@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css');

:root{
  /* Neutrals */
  --bg:#ffffff; --text:#111827; --muted:#6b7280; --border:#e5e7eb;
  --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-700:#374151;

  /* Brand */
  --pink-50:#fff0f4; --pink-100:#ffe1ea; --pink-500:#ff1f64; --pink-600:#e01356; 
  --pink-accent:#ff2f71; --coral:#ff4c3b; 
  --brand-red:#FF0052; --brand-blue:#2933E8; --brand-green:#30E345;

.brand {
  display: flex;
  align-items: center;
  gap: 12px; /* space between logo and text */
  text-decoration: none;
}

/* ===== Base & brand ===== */
*{ box-sizing:border-box }
html, body{ height:100% }
body{ margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; line-height:1.6 }
.container{ width:min(1120px,92%); margin-inline:auto }

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit }
.brand-logo{ width:70px; height:auto; display:block; border-radius:6px }
.brand-name{ font-size:2rem; font-weight:800; color:#000 }

/* ===== Header & nav (shared) ===== */
.site-header{ position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #e5e7eb; backdrop-filter:saturate(140%) blur(6px) }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:.85rem 0 }

.btn{ --pad:.7rem 1rem; display:inline-flex; align-items:center; gap:.45rem; padding:var(--pad);
  border-radius:999px; text-decoration:none; font-weight:600; border:1px solid transparent; transition:transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease }
.btn-sm{ --pad:.55rem .85rem; font-size:.92rem }
.btn-light{ background:#f3f4f6; color:#111 }
.btn-primary{ background:#FF0052; color:#fff }
.btn:hover{ transform:translateY(-1px) }

.nav-toggle, .nav-close{ background:none; border:0; font-size:28px; line-height:1 }

/* ===== Mobile/Tablet (default) ===== */
#nav{
  position:fixed; inset:0; width:100%; height:100vh;
  background:#FF0052; transform:translateX(-100%); transition:transform .3s ease;
  z-index:99999; padding:24px 18px; display:flex; flex-direction:column; overflow-y:auto;
}
@supports (height:100dvh){ #nav{ height:100dvh; } }
#nav.open{ transform:translateX(0) }
.nav-close{ position:absolute; top:12px; right:12px; font-size:26px; color:#fff }
.nav-list{ list-style:none; margin:64px 0 0; padding:0 }
.nav-list li{ margin:14px 0 }
.nav-list a{ color:#fff; font-weight:700; font-size:1.1rem; text-decoration:none }
.nav-ctas{ margin-top:auto; display:flex; gap:.5rem }
.nav-toggle{ display:inline-flex }

/* Lock scroll when menu open */
body.no-scroll{ overflow:hidden }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #nav{ transition:none }
  .btn{ transition:none }
}

/* ===== Laptop/Desktop (>= 1024px) ===== */
@media (min-width:1024px){
  /* Turn overlay into inline row */
  #nav{
    position:static !important; inset:auto !important; width:auto !important; height:auto !important;
    transform:none !important; background:transparent !important; padding:0 !important; display:flex !important;
    flex-direction:row; align-items:center; gap:24px; overflow:visible !important; z-index:auto !important;
  }
  .nav-list{
    display:flex !important; align-items:center; gap:24px; margin:0 !important; padding:0 !important; list-style:none;
  }
  .nav-list li{ margin:0 !important }
  .nav-list a{ color:#111 !important; font-weight:600; text-decoration:none }
  .nav-list a:hover{ text-decoration:underline; text-underline-offset:4px }

  .nav-ctas{ margin-top:0; display:flex; gap:.5rem }

  /* Hide mobile-only controls */
  .nav-toggle, #navClose{ display:none !important }

  /* Ensure body is scrollable even if class was set */
  body.no-scroll{ overflow:auto !important }
}
/* Make sure the hamburger is visible on a light header */
.nav-toggle{ color:#111 }








/* ========== Index ========== */


/* ========== Hero ========== */
.hero{background:linear-gradient(180deg,var(--pink-50),#fff 50%);padding:clamp(2rem,4vw,4rem) 0 2rem}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.hero-text h1{font-size:clamp(2rem,1.1rem + 3vw,3rem);line-height:1.15;margin:.2rem 0 .8rem}
.accent{color:var(--pink-500)}
.hero-text p{color:var(--muted);max-width:56ch}
.hero-actions{display:flex;gap:.8rem;margin:1.2rem 0 1.6rem;flex-wrap:wrap}
.hero-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.metric{border:1px solid var(--border);background:#fff;border-radius:16px;padding:.9rem;text-align:center}
.metric-icon{inline-size:36px;block-size:36px;display:grid;place-items:center;margin:0 auto .4rem;background:var(--gray-100);border-radius:12px;color:var(--pink-500)}
.hero-art .art-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}
.art-img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;border-radius:14px}
.art-caption{text-align:center;padding-top:.8rem}
.art-caption h4{margin:.2rem 0 .2rem}
.art-caption p{margin:0;color:var(--muted)}

/* ========== About (generic) ========== */
.about{padding:2rem 0 1rem}
.cards-3{ /* unified */
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem
}
.card{border:1px solid transparent;border-radius:var(--radius-md);background:#fff;padding:1.2rem;text-align:center;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease}
/* legacy color-ring variants kept for compatibility */
.card.problem{box-shadow:-9px 11px 30px rgba(0,0,0,.12), inset 0 0 0 4px var(--brand-red)}
.card.solution{box-shadow:-9px 11px 30px rgba(0,0,0,.12), inset 0 0 0 4px var(--brand-blue)}
.card.impact{box-shadow:-9px 11px 30px rgba(0,0,0,.12), inset 0 0 0 4px var(--brand-green)}
.card.problem:hover{transform:translateY(-6px);background:linear-gradient(0deg,rgba(255,0,82,.06),rgba(255,0,82,.06)),#fff;box-shadow:-9px 11px 40px rgba(255,0,82,.25), inset 0 0 0 4px var(--brand-red)}
.card.solution:hover{transform:translateY(-6px);background:linear-gradient(0deg,rgba(41,51,232,.07),rgba(41,51,232,.07)),#fff;box-shadow:-9px 11px 40px rgba(41,51,232,.25), inset 0 0 0 4px var(--brand-blue)}
.card.impact:hover{transform:translateY(-6px);background:linear-gradient(0deg,rgba(48,227,69,.09),rgba(48,227,69,.09)),#fff;box-shadow:-9px 11px 40px rgba(48,227,69,.25), inset 0 0 0 4px var(--brand-green)}
.card-icon{inline-size:44px;block-size:44px;border-radius:14px;display:grid;place-items:center;margin:.2rem auto .6rem;color:#fff}
.card-icon.pink{background:var(--brand-red)}
.card-icon.blue{background:var(--brand-blue)}
.card-icon.green{background:var(--brand-green)}
.card h3{margin:.1rem 0 .4rem}
.card p{margin:0;color:var(--muted)}

/* ========== How ========== */
.how{padding:1rem 0 1rem}
.steps-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.step{background:#fff;border:1px solid var(--border);border-radius:16px;padding:1.1rem;text-align:center;transition:transform .2s ease}
.step:hover{transform:translateY(-4px)}
.step-icon{inline-size:44px;block-size:44px;border-radius:50%;display:grid;place-items:center;margin:0 auto .5rem;background:var(--gray-100);color:var(--pink-500)}
.step h4{margin:.3rem 0 .2rem}
.step p{margin:0;color:var(--muted)}

/* ========== Features ========== */
.features{padding:1rem 0 1rem}
.features-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.feature{border:1px solid var(--border);background:#fff;border-radius:16px;padding:1rem;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;box-shadow:var(--shadow-card-pink)}
.feature:hover{transform:translateY(-6px);background:linear-gradient(0deg,rgba(255,31,100,.06),rgba(255,31,100,.06)),#fff;box-shadow:-13px -10px 42px rgba(255,31,100,.25)}
.feature-mini{inline-size:30px;block-size:30px;border-radius:10px;background:#fee2e2;color:var(--pink-600);display:grid;place-items:center;margin-bottom:.5rem}
.feature h4{margin:.1rem 0 .2rem}
.feature p{margin:0;color:var(--muted)}

/* ========== FAQ ========== */
.faq{padding:1rem 0 2rem}
.accordion{max-width:800px;margin-inline:auto}
.acc-item{border:1px solid var(--border);border-radius:14px;background:#fff;margin-bottom:.65rem;overflow:hidden}
.acc-item[open] summary i{transform:rotate(45deg)}
.acc-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:1rem;font-weight:600}
.acc-item summary::-webkit-details-marker{display:none}
.acc-item summary i{transition:transform .2s ease}
.acc-content{padding:0 1rem 1rem;color:var(--muted)}

/* ========== CTA (Apps) ========== */
.cta-app{background:linear-gradient(180deg,#fff,#ff086640 15%,var(--pink-500) 100%);color:#fff;padding:2.2rem 0}
.cta-grid{display:grid;grid-template-columns:1.2fr 1fr .8fr;gap:1.4rem;align-items:center}
.cta-head h2{margin:.2rem 0}
.cta-head p{margin:0;color:#ffe5ee}
.store-buttons{display:flex;gap:.7rem;flex-wrap:wrap}
.store-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-radius:var(--pill);border:1px solid #ffffff66;color:#fff;text-decoration:none;background:transparent}
.qr-card{margin-top:1rem;background:#ff4a83;border-radius:16px;border:1px solid #ffffff55;text-align:center;padding:1rem}
.qr{inline-size:160px;aspect-ratio:1/1;margin:0 auto .6rem;border-radius:12px;background:#fff;color:#111;display:grid;place-items:center;font-size:72px}
.qr-caption{margin:0;color:#ffe5ee}
.cta-features h4{margin:.2rem 0 .6rem}
.cta-features ul{margin:0;padding-inline-start:1rem}
.cta-features li{margin:.25rem 0}

/* ========== ABOUT PAGE SECTIONS ========== */

/* Scoped overrides to avoid conflict with home hero */

.hero--about{padding:60px 20px 40px;text-align:center;background:none}
.hero--about p{max-width:760px;margin-inline:auto}
.accent-underline{position:relative}
.accent-underline::after{content:"";position:absolute;left:0;bottom:-6px;height:4px;width:120%;background:linear-gradient(90deg,var(--pink-accent),var(--coral));border-radius:6px}

.grid.why{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;margin:40px auto}
.quote{margin-top:14px;border-inline-start:4px solid var(--pink-accent);padding:10px 14px;background:#fff2f7;border-radius:10px}
.highlight-cards{background:#fff;border:1px solid #e9edf0;border-radius:16px;padding:18px;display:grid;gap:14px}
.highlight-cards .mini{display:flex;gap:12px;align-items:center;border:1px solid #e9edf0;border-radius:14px;padding:12px;box-shadow:-9px 11px 24px rgba(0,0,0,.08);transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease}
.highlight-cards .mini:hover{transform:translateY(-3px);box-shadow:-9px 18px 28px rgba(0,0,0,.12);background:linear-gradient(90deg,var(--pink-accent) 0%, var(--coral) 100%);color:#fff}
.highlight-cards .mini:hover p{color:#fff}
.highlight-cards .mini:hover .icon{background:rgba(255,255,255,.2)}
.highlight-cards .icon{inline-size:40px;block-size:40px;display:grid;place-items:center;border-radius:12px;background:#f4f6f8}

/* simple decorative shapes */
.dot,.zap,.users,.heart{display:inline-block;inline-size:18px;block-size:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%, var(--pink-accent), var(--coral))}
.zap{clip-path:polygon(45% 0,60% 0,35% 55%,60% 55%,20% 100%,35% 55%,10% 55%)}
.users{border-radius:0;clip-path:polygon(50% 0,62% 0,62% 30%,78% 30%,78% 42%,62% 42%,62% 100%,50% 100%,50% 42%,34% 42%,34% 30%,50% 30%)}
.heart{border-radius:0;clip-path:path("M9 3c2 0 3 1 3 3 0 2-3 4-6 9C3 10 0 8 0 6 0 4 1 3 3 3c1.2 0 2 .6 3 1.6C7 3.6 7.8 3 9 3z")}

/* Problem → Solution → Impact (PSI) */
.psi{padding:40px 0}
.psi .muted{color:#8a95a3}
.psi .cards-3{margin-top:20px}
.psi .cards-3 .card{position:relative;box-shadow:inset 0 0 0 4px transparent;transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease}
.psi .cards-3 .card:nth-child(1){box-shadow:inset 0 0 0 4px var(--brand-red)}
.psi .cards-3 .card:nth-child(2){box-shadow:inset 0 0 0 4px var(--brand-blue)}
.psi .cards-3 .card:nth-child(3){box-shadow:inset 0 0 0 4px var(--brand-green)}
.psi .cards-3 .card:hover{transform:translateY(-4px) scale(1.02)}
.psi .cards-3 .card:nth-child(1):hover{background:rgba(255,0,82,.06);box-shadow:inset 0 0 0 4px var(--brand-red), 0 10px 24px rgba(255,0,82,.18)}
.psi .cards-3 .card:nth-child(2):hover{background:rgba(41,51,232,.06);box-shadow:inset 0 0 0 4px var(--brand-blue), 0 10px 24px rgba(41,51,232,.18)}
.psi .cards-3 .card:nth-child(3):hover{background:rgba(48,227,69,.08);box-shadow:inset 0 0 0 4px var(--brand-green), 0 10px 24px rgba(48,227,69,.22)}
.psi .cards-3 .card:hover .pill{background:rgba(255,255,255,.85)}
.psi .cards-3 .card:hover .card-icon{filter:saturate(1.15)}

/* Mission & Vision */




.btn-ghost{ background:#fff; border-color:#e7e9ee; color:#0f1623; }



/* Hero */


.badge{
  display:inline-block; font-weight:600; font-size:.8rem; color:#6f7a94;
  border:1px solid #ecedf3; background:#fff; padding:.25rem .6rem; border-radius:999px;
}
.hero__title{
  margin-top:14px;
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 800;
}
.txt-accent{ color:var(--primary); }
.hero__lead{ color:var(--muted); max-width:880px; margin:.75rem 0 1.25rem; font-size:clamp(1rem, 1.4vw, 1.05rem); }

/* Two column section */
.twocol{ padding: 28px 0 14px; }
.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1.25rem; }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; position:relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card--elevate:hover,
.card--hover:hover{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 24px 40px rgba(15,22,35,.10);
  border-color:#dfe6ee;
}
.card__icon.pill{
  position:absolute; top:-14px; left:16px;
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:.3rem .6rem;
  font-size:.9rem; color:#ff7aa1;
}
.card h3{ font-size:1.2rem; margin-bottom:.25rem; }
.muted{ color:var(--muted); }
.tick{ list-style:none; padding:0; margin:.6rem 0 0; }
.tick li{ position:relative; padding-left:1.5rem; margin:.5rem 0; color:#34425c; }
.tick li::before{
  content:"✔"; position:absolute; left:0; top:0; font-size:.95rem; color:var(--primary);
}

/* Core values */
.values{ padding: 28px 0; }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; margin-top:1rem; }
.mini{ padding:18px; }
.mini__icon{ font-size:1.2rem; opacity:.9; margin-bottom:.3rem; }


/* How we bring this to life */



.how{ 
  padding: 28px 0; 
} 

.grid-how{ 
  display: grid; 
  gap: 1.25rem; 
  grid-template-columns: 1.2fr .8fr; 
  align-items: stretch; 
} 

.how__left h3{ 
  font-size: 1.4rem; 
  margin-bottom: .25rem; 
} 

.dot{ 
  list-style: none; 
  padding: 0; 
} 

.dot li{ 
  position: relative; 
  padding-left: 1.25rem; 
  margin: .45rem 0; 
} 

.dot li::before{ 
  content: "•"; 
  position: absolute; 
  left: 0; 
  top: 0; 
  color: var(--indigo); 
  font-weight: 700; 
} 

.card--panel{ 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 

.pill-grid{ 
  display: grid; 
  grid-template-columns: repeat(2, minmax(0,1fr)); 
  gap: .8rem; 
  width: 100%; 
} 

.pill-box{ 
  text-align: center; 
  padding: 1rem; 
  border-radius: 12px; 
  border: 1px dashed #f1c8d8; 
  background: #fff7fb; 
  font-weight: 600; 
  color: #c92557; 
}


/* CTA */


.cta {
  background: linear-gradient(180deg, #FF0052, #d5024f);
  color: #fff;
  padding: 40px 0;
  margin-top: 26px;
  text-align: center;
  position: relative;
}



.cta__icon{
  width:60px; height:60px; border-radius:999px;
  background:rgba(255,255,255,.15); display:grid; place-items:center;
  margin:0 auto 10px; font-size:24px;
}
.cta__title{
  font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight:800; margin:.25rem 0 .35rem;
}

/* Scoped button variants (avoid colliding with globals) */
.cta .btn{ will-change: transform; transition: transform .15s ease, box-shadow .15s ease; }
.cta .btn:focus-visible{
  outline:2px solid rgba(255,255,255,.8);
  outline-offset:3px;
}
.cta .btn-light{ background:#ffd2e1; color:#3b0a1c; }
.cta .btn-white{ background:#fff; color:#111; }
.cta .btn:is(.btn-light, .btn-white):hover{ transform: translateY(-2px); }

/* Colored inner strokes for three specific cards (move to cards section if global) */
.card--mission{ box-shadow: inset 0 0 0 4px var(--primary); }
.card--solution{ box-shadow: inset 0 0 0 4px var(--indigo); }
.card--impact{ box-shadow: inset 0 0 0 4px var(--green); }

/* Center CTA buttons */
.cta .actions{
  display:flex; justify-content:center; align-items:center;
  gap:1rem; flex-wrap:wrap; margin-top:1rem;
}


/* ========== Events(Coming Soon) ========== */




*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color:var(--bn-text);
  background:var(--bn-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:var(--bn-link); text-decoration:none}
a:hover{ text-decoration:underline }

/* Layout shell for the section */
.bn-main{
  padding: clamp(24px, 5vw, 56px) 0;
}
.bn-container{
  width: min(100% - 32px, 1024px);
  margin-inline: auto;
}

/* Card */
.cta-card{
  background: var(--bn-card);
  border: 1px solid var(--bn-border);
  border-radius: var(--bn-radius);
  box-shadow: var(--bn-shadow);
  padding: clamp(20px, 4vw, 40px);
  text-align: center;
}

.cta-icon {
  --size: 64px;
  width: var(--size);
  height: var(--size);
  margin-inline: auto;
  margin-bottom: 14px;
  display: grid;
  place-items: center;
  color: #fff;                /* icon (blood drop) white */
  background: #FF0052;        /* solid brand color */
  border-radius: 100%;

}

/* Headings & Lead */


/*center text */

.cta-title,
.cta-lead{
  text-align: center;
}

/* Optional: tidy width & spacing */
.cta-lead{
  max-width: 60ch;
  margin: 8px auto 20px;  /* centers the paragraph block */
}

.cta-title{
  margin: 6px 0 8px 0;
  font-size: clamp(22px, 3.2vw, 28px);
  line-height: 1.2;
  font-weight: 700;
}
.cta-lead{
  margin: 0 0 22px 0;
  font-size: clamp(14px, 2.3vw, 16px);
  color: var(--bn-muted);
}

/* Panel */
.cta-panel{
  border: 1px solid var(--bn-border);
  background: ;
  border-radius: 12px;
  padding: clamp(14px, 3vw, 22px);
  margin: 0 auto 18px auto;
  text-align: left;
  max-width: 780px;
}
.panel-title{
  margin: 0 0 10px 0;
  text-align: center;
  font-size: clamp(15px, 2.4vw, 18px);
  font-weight: 600;
  color: #2b2f38;
}
.panel-list{
  --gap: 10px;
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: var(--gap);
}
.panel-list li{
  position: relative;
  padding-left: 22px;
  font-size: clamp(14px, 2.2vw, 16px);
}
.panel-list li::before{
  content:"•";
  position:absolute; left:4px; top:0;
  line-height:1;
  color: var(--bn-pink);
  font-weight:700;
}

/* Actions */
.cta-actions{
  margin-top: 14px;
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap: wrap;
}

.bn-btn{
  --pad-y: 10px;
  --pad-x: 16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: var(--pad-y) var(--pad-x);
  border-radius: 10px;
  border:1px solid transparent;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  text-decoration:none !important;
  user-select:none;
  transition: transform .04s ease, background .2s ease, border-color .2s ease;
}
.bn-btn:active{ transform: translateY(1px); }

.bn-btn-primary{
  background: var(--bn-pink);
  color:#fff;
}
.bn-btn-primary:hover{ background: var(--bn-pink-600); }

.bn-btn-ghost{
  background:#FF0052;
  border-color: var(--bn-border);
  color:#000000;
}
.bn-btn-ghost:hover{
  background:#FF0052;
  border-color:#000000;
}

/* Helper note */
.cta-help{
  margin: 12px 0 2px 0;
  font-size: 13px;
  color: var(--bn-muted);
}
.br-mobile{ display:inline }
@media (min-width: 560px){
  .br-mobile{ display:none }
}

/* Larger screens: slightly tighten max width */
@media (min-width: 900px){
  .cta-card{ padding: 46px }
}


/* ========== Contact us ========== */


/* =========================
    Contact Page CSS (cleaned)
   ========================= */

:root{
  --bn-primary: var(--rose-700, #d80045);
  --bn-primary-600: var(--rose-400, #f16b86);
  --bn-accent: var(--rose-100, #FFB6C1);
  --bn-text: var(--text, #1b1b1b);
  --bn-muted: var(--muted, #6b7280);
  --bn-surface: var(--surface, #ffffff);
  --bn-border: var(--border, #e5e7eb);
  --bn-neutral: var(--neutral, #6b7280);
  --bn-shadow: var(--shadow, 0 10px 24px rgba(216,0,69,.12));
  --bn-radius: var(--radius, 14px); /* fallback added */
}

/* Base container (inherits your global font) */
.bn-contact{ color: var(--bn-text); }

/* ---------- HERO (single source of truth) ---------- */
.bnc-hero {
  padding: 48px 0 28px;    /* balanced spacing top & bottom */
  text-align: center;
}

.bnc-title {
  font-weight: 900;
  font-size: clamp(2.4rem, 4vw, 3rem); /* scales on mobile/desktop */
  color: #000;             /* solid black headline */
  margin-bottom: 16px;     /* clear gap below headline */
}

.bnc-sub {
  font-weight: 400;        /* supporting text lighter than headline */
  font-size: 1.05rem;
  color: color-mix(in srgb, var(--bn-text), #000 30%);
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.6;
}


/* ---------- LAYOUT ---------- */
.bnc-content{ padding: 36px 0; } /* slightly reduced vertical space */
.bnc-wrap{
  width: min(1100px, 92%);
  margin-inline: auto;
  display: flex;
  justify-content: center;
}

/* Two-column grid (form + sidebar). If you only use the compact form,
   you can omit .bnc-grid in your HTML. */
.bnc-grid{ display: grid; gap: 24px; grid-template-columns: 1.25fr .95fr; }
@media (max-width: 960px){ .bnc-grid{ grid-template-columns: 1fr; } }

/* ---------- CARDS ---------- */
.bnc-card{
  background: var(--bn-surface);
  border-radius: var(--bn-radius);
  box-shadow: var(--bn-shadow);
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--bn-border) 80%, var(--bn-primary) 10%);
}
.bnc-card-title{
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--bn-text);
  margin: 4px 0 6px;
}
.bnc-card-sub{
  font-size: 1rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--bn-text), #000 15%);
  margin: -2px 0 16px;
}

/* Make the FORM card compact & centered */
.bnc-form-card{
  max-width: 520px;  /* key line to avoid full-width form */
  width: 100%;
  margin: 0 auto;
}

/* ---------- FORM ---------- */
.bnc-form{ display: grid; gap: 12px; }
.bnc-field{ display: grid; gap: 6px; font-size: .95rem; }
.bnc-field span{ font-weight: 600; color: var(--bn-text); }
.req{ color: var(--bn-primary); }
.muted{ color: var(--bn-muted); font-weight: 500; }

.bnc-form input,
.bnc-form textarea{
  width: 100%;
  border: 1px solid var(--bn-border);
  border-radius: 12px;
  padding: 10px 12px;            /* slightly smaller controls */
  font: inherit;
  color: var(--bn-text);
  background: var(--bn-surface);
  outline: none;
  transition: box-shadow .2s, border-color .2s;
}
.bnc-form input::placeholder,
.bnc-form textarea::placeholder{
  color: color-mix(in srgb, var(--bn-muted), #000 15%);
}
.bnc-form input:focus,
.bnc-form textarea:focus{
  border-color: var(--bn-primary-600);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bn-primary-600) 20%, transparent);
}

.bnc-btn{
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;            /* smaller button */
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
  background: linear-gradient(180deg, var(--bn-primary-600), var(--bn-primary));
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.bnc-btn:hover{ transform: translateY(-2px); }
.bnc-btn:disabled{ opacity: .7; cursor: not-allowed; }

/* ---------- STATUS (inline success/error) ---------- */
.bnc-status{
  margin-top: 6px;
  font-size: .95rem;
  font-weight: 600;
  min-height: 1.2em;             /* preserves space even when empty */
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
.bnc-status.show{ opacity: 1; transform: translateY(0); }
.bnc-status.success{ color: #16a34a; } /* green */
.bnc-status.error{ color: #dc2626; }   /* red */

/* ---------- INFO LIST (sidebar) ---------- */
.bnc-lead{
  color: color-mix(in srgb, var(--bn-text), #000 10%);
  margin: 0 0 12px;
  line-height: 1.6;
}
.bnc-list{ list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.bnc-item{ display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: flex-start; }
.bnc-item .bnc-item-label{ font-weight: 700; color: var(--bn-text); margin-bottom: 2px; }
.bnc-item p{ margin: .25rem 0 0; color: color-mix(in srgb, var(--bn-text), #000 10%); }
.bnc-item a{ color: var(--bn-link, var(--bn-primary)); text-decoration: none; }
.bnc-item a:hover{ text-decoration: underline; }

/* ---------- ICONS (neutral) ---------- */
.bnc-ico{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--bn-neutral); /* neutral icon tone */
  background: color-mix(in srgb, var(--bn-surface) 90%, #f3f4f6 10%);
  border: 1px solid var(--bn-border);
}
.bnc-ico svg{ width: 22px; height: 22px; fill: currentColor; }

/* ---------- SOCIAL ---------- */
.bnc-social{ margin-top: 16px; }
.bnc-social-title{ font-weight: 800; color: var(--bn-text); margin: 8px 0 8px; }
.bnc-social-row{ display: flex; gap: 10px; }
.bnc-social-row a{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--bn-surface);
  color: var(--bn-neutral);
  border: 1px solid var(--bn-border);
  transition: transform .12s ease, background .2s;
}
.bnc-social-row a:hover{
  background: color-mix(in srgb, var(--bn-surface) 85%, #f3f4f6 15%);
  transform: translateY(-2px);
}
.bnc-social-row svg{ width: 18px; height: 18px; fill: currentColor; }

/* ---------- HONEYPOT (anti-spam) ---------- */
.honeypot{
  position: absolute;
  left: -9999px;
  visibility: hidden;
  height: 0;
  width: 0;
  overflow: hidden;
}

/* ---------- Small screen tweaks ---------- */
@media (max-width: 560px){
  .bnc-card{ padding: 18px; }
  .bnc-form-card{ max-width: 100%; }
}


.bnc-status.show{ opacity:1; transform: translateY(0); }
.bnc-status.success{ color:#16a34a; } /* green */
.bnc-status.error{ color:#dc2626; }   /* red */



/* ========== 	volunteer	 ========== */



/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;


.highlight {
  color: #FF0052; /* or any brand color */
}



}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 3px solid rgba(255,0,82,.45);
  outline-offset: 2px;
}

/* ===== Layout Container ===== */
.bn-container{
  width: min(1100px, 92vw);
  margin-inline:auto;
  padding-bottom: 56px; /* breathing room above the footer you already have */
}

/* ===== Section helpers ===== */
.section-title{
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 900;
  text-align:center;
  margin: 0 0 10px;
}
.section-kicker{
  text-align:center;
  color:var(--muted);
  max-width: 840px;
  margin: 0 auto 26px;
  line-height:1.6;
}
.section-underline{
  width:64px;height:4px;background:var(--brand);
  border-radius:999px;margin: 10px auto 14px;
}

/* ===== Hero ===== */
.vol-hero{
  text-align:center;
  padding: clamp(40px, 8vw, 80px) 0 24px;
  background: linear-gradient(180deg, #fff 0%, #fff 40%, #fafbff 100%);
  border-bottom:1px solid var(--line);
}

.vol-hero__title{
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900; margin: 0;
}
.vol-hero__title .brand{ color: var(--brand); }
.vol-hero__underline{
  width:60px;height:4px;background:var(--brand);
  border-radius:999px;margin:10px auto 14px;
}
.vol-hero__subtitle{
  color: var(--ink);
  font-weight: 700;
  margin: 0 0 6px;
}
.vol-hero__lead{
  color: var(--muted);
  max-width: 760px; margin: 0 auto;
  line-height: 1.65;
}

/* ===== Why Cards ===== */
.vol-why{ padding: 42px 0; }
.card-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 18px;
}
.info-card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad);
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.info-card:hover{ transform: translateY(-4px); box-shadow: 0 14px 34px rgba(2,8,23,.10); border-color: #ffd0df; }
.info-card__icon{
  width:56px;height:56px;border-radius:999px;margin-bottom:10px;
  display:grid;place-items:center;background:#fff1f7;color:var(--brand);font-size:22px;
}
.info-card__title{ font-weight: 800; margin:0 0 6px; }
.info-card__text{ color: var(--muted); margin:0; line-height:1.6; font-size: .98rem; }

/* ===== Opportunities Pills ===== */
.vol-opps{ padding: 42px 0; }
.opps-grid{
  display:grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0,1fr));
  max-width: 900px; margin: 14px auto 0;
}
.pill{
  background:#fff;
  border:1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  text-align:left;
  box-shadow: var(--shadow);
  display:flex; align-items:center; gap:10px;
  cursor: default;
}
.pill__dot{
  width:20px;height:20px;border-radius:999px;
  display:inline-block; flex:0 0 auto;
  background: radial-gradient(65% 65% at 50% 50%, #ffeaf3 0%, #ffd0e2 100%);
  border: 2px solid var(--brand);
}

/* ===== Form ===== */
.vol-form{ padding: 42px 0; }
.form{
  background: var(--soft);
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 3vw, 28px);
  box-shadow: var(--shadow);
}
.form-group{
  border:1px dashed #e6ebf3;
  border-radius: 14px;
  padding: var(--pad);
  background:#fff;
  margin-bottom: 18px;
}
.form-legend{
  font-weight: 800;
  margin-bottom: 10px;
}
.form-row{
  display:flex; flex-direction:column; gap:8px;
  margin-bottom: 12px;
}
label{ font-weight:600; }
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  border-radius: 12px;
  padding: 12px 12px;
  font: inherit;
  transition: border-color .2s ease, box-shadow .2s ease;
}
textarea{ resize: vertical; }
input:focus, select:focus, textarea:focus{
  border-color: #ffc0d3;
  box-shadow: 0 0 0 4px rgba(255,0,82,.07);
}
.hint{ color:#8b94a6; font-size:.85rem; }

.form-consent{
  background:#fff;
  border:1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  margin: 12px 0 18px;
}
.checkbox{ display:flex; gap:10px; align-items:flex-start; }
.checkbox input{ margin-top: 4px; }

.form-actions{
  display:flex; gap:10px; flex-wrap:wrap;
  justify-content:flex-start;
}
.btn{
  appearance:none; border:0; border-radius: 10px;
  padding: 12px 16px; font-weight: 700; cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn-primary{

  color:#fff;
  box-shadow: 0 8px 20px rgba(255,0,82,.25);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255,0,82,.32); }
.btn-ghost{
  background:#fff;
  color:#0f172a;
  border:1px solid var(--line);
}

.btn-ghost:hover{ transform: translateY(-2px); }

/* Inline errors + status + honeypot (minimal, matches your form look) */
.form-status{ min-height:22px; text-align:center; font-weight:600; margin-bottom:12px; }
.err{ color:#b42318; display:block; min-height:1.1em; }
.hp{ position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden; }



/* ========== Donation ========== */






*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

/* Layout helpers */
.container{
  width:min(1100px, 92%);
  margin:0 auto;
}
.section{ padding:64px 0; }
.section-title{
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight:800;
  text-align:center;
  margin:0 0 8px;
}
.section-title .accent{ color:var(--accent); }
.section-sub{
  text-align:center;
  color:var(--muted);
  max-width:800px;
  margin:0.25rem auto 2rem;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:12px 18px; border-radius:999px;
  font-weight:600; text-decoration:none; border:1px solid transparent;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease,color .2s ease; 
  cursor:pointer;
}

.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(255,46,99,.32); }
.btn-ghost{ background:transparent; border-color:#e5e7eb; color:var(--text); }
.btn-ghost:hover{ background:#f3f4f6; }

/* Hero */
.hero{ padding-top:72px; padding-bottom:48px; text-align:center; background:linear-gradient(180deg,#fff, #fff 60%, #f9fbff);}
.hero-badge{
  width:48px; height:48px; display:grid; place-content:center; margin:0 auto 10px;
  background:#ffe9ef; color:var(--accent); border-radius:999px; font-size:22px;
}
.hero-title{
  margin:6px 0 10px; font-size: clamp(32px, 5vw, 48px); font-weight:800;
}
.hero-title span{ color:var(--accent); }
.hero-sub{
  color:var(--muted); max-width:760px; margin:0 auto 20px;
}
.hero-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }


/* Card hover pop effect */
.card,
.impact-card,
.process-item,
.help-card,
.acc {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  will-change: transform, box-shadow;
}

.card:hover,
.impact-card:hover,
.process-item:hover,
.help-card:hover,
.acc:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  z-index: 2;
}




/* Impact */
.grid-1{ display:grid; grid-template-columns:1fr; gap:16px; }
.impact-card{
  background:var(--card); border:1px solid #eef2f7; border-radius:var(--radius);
  padding:22px; text-align:center; box-shadow:var(--shadow);
}
.impact-icon{ font-size:26px; }
.impact-card h3{ margin:.5rem 0 .125rem; }
.impact-card p{ color:var(--muted); margin:0; }

/* Cards */
.cards{ display:grid; gap:16px; grid-template-columns: repeat(1,1fr); }
.grid-4{ grid-template-columns: repeat(1, 1fr); }
@media (min-width:720px){ .grid-4{ grid-template-columns:repeat(3, 1fr);} }
@media (min-width:980px){ .grid-4{ grid-template-columns:repeat(4, 1fr);} }

.card{
  background:var(--card); border:1px solid #eef2f7; border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow); min-height:140px;
}
.card-icon{ font-size:22px; margin-bottom:6px; }
.card h3{ font-size:16px; margin:0 0 6px; }
.card p{ color:var(--muted); margin:0; }

.help-card{
  margin-top:18px; padding:18px; border:1px dashed #e5e7eb; background:#fff;
  border-radius:var(--radius); display:flex; gap:12px; align-items:center; justify-content:space-between;
}

/* Process */
.process .process-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(1,1fr);
  margin-top:10px;
}
@media (min-width:720px){ .process .process-grid{ grid-template-columns:repeat(3,1fr);} }
@media (min-width:980px){ .process .process-grid{ grid-template-columns:repeat(4,1fr);} }

.process-item{
  background:var(--card); border:1px solid #eef2f7; border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow);
}
.pi-icon{ font-size:22px; margin-bottom:6px; }
.process-item h3{ margin:0 0 6px; font-size:16px; }
.process-item p{ margin:0; color:var(--muted); }

/* Form */
.form{
  margin-top:18px; background:var(--card); border:1px solid #eef2f7; border-radius:24px;
  padding:22px; box-shadow:var(--shadow);
}
.grid-2{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:860px){ .grid-2{ grid-template-columns:1fr 1fr; } }
.grid-span-2{ grid-column:1 / -1; }

.field{ display:flex; flex-direction:column; gap:8px; }
.field > span{ font-weight:600; font-size:14px; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field select,
.field textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid #e5e7eb;
  outline:none; background:#fff; font:inherit; transition:box-shadow .15s ease, border-color .15s ease, transform .06s ease;
}
.field textarea{ resize:vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 6px var(--ring); }
.field small{ color:var(--muted); margin-top:-4px; }

.split{ display:flex; gap:12px; align-items:end; }
.subfield{ flex:1; display:flex; flex-direction:column; gap:8px; }
.subfield.checkbox{ flex:0 0 auto; align-items:center; gap:10px; margin-bottom:3px; }
.subfield.checkbox input{ width:18px; height:18px; }

.consent{ display:flex; gap:10px; align-items:flex-start; margin:10px 0 16px; }
.consent input{ margin-top:3px; }

.notice{
  margin-top:14px; border-top:1px solid #f1f5f9; padding-top:12px; color:var(--muted);
}
.hp{ position:absolute !important; left:-10000px !important; opacity:0 !important; height:0 !important; width:0 !important; }


.form-messages {
  margin-top: 14px;
  font-size: 15px;
  padding: 12px 16px;
  border-radius: 12px;
  display: none; /* hidden by default */
}

.form-messages.success {
  display: block;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #6ee7b7;
}

.form-messages.error {
  display: block;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}



/* Accordion (animated) */
.accordion{ max-width:900px; margin:10px auto 0; }
.acc{
  border:1px solid #eef2f7; background:#fff; border-radius:16px; box-shadow:var(--shadow);
  padding:0; overflow:hidden; margin-bottom:12px;
}
.acc summary{
  list-style:none; cursor:pointer; padding:16px 18px; font-weight:600;
}
.acc summary::-webkit-details-marker{ display:none; }
.acc .acc-content{
  padding:0 18px 16px; color:var(--muted);
  animation: dropdown .25s ease forwards; transform-origin: top;
}
details[open] .acc-content{ animation: dropdown .25s ease; }
@keyframes dropdown{
  from { opacity:0; transform: scaleY(.98); }
  to { opacity:1; transform: scaleY(1); }
}

/* Pop-in on scroll */
.pop{ transform:translateY(16px) scale(.98); opacity:0; }
.pop.in{ transform:translateY(0) scale(1); opacity:1; transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .45s ease; }

/* Utility */
.process{ background:linear-gradient(180deg,#fff,#f7fbff); }



/* ========== Get App ========== */



.bn-pill .bn-now {
  background: linear-gradient(90deg, #FF0052);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}


*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue","Noto Sans",Arial;}
h1,h2,h3{line-height:1.2;margin:0 0 .4rem}
p{margin:.4rem 0 1rem}
img,svg{display:block}

.bn-container{
  width:min(1120px, 92%);
  margin-inline:auto;
}

.bn-main a{ text-decoration:none }

/* ---------- Hero ---------- */
.bn-hero{
  background:
    radial-gradient(1200px 320px at 50% -40%, rgba(255,77,141,.14), transparent 70%),
    linear-gradient(180deg, #fff, #fff);
  padding: 6rem 0 5rem;
  text-align:center;
}
.bn-pill{
  display:inline-block;
  background:#fff;
  border:1px solid var(--line);
  padding:.35rem .7rem;
  border-radius:999px;
  font-size:.85rem;
  color:var(--muted);
  margin-bottom:1rem;
}
.bn-title{
  font-size: clamp(2rem, 4.2vw + .6rem, 3.2rem);
  font-weight:800;
  letter-spacing:-.02em;
}
.bn-subtitle{
  max-width: 740px;
  margin: .6rem auto 1.4rem;
  color: var(--muted);
}
.bn-actions{
  display:flex;
  justify-content:center;
  gap:.8rem;
  flex-wrap:wrap;
}
.bn-btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border:1px solid var(--line);
  padding:.8rem 1rem;
  border-radius:.75rem;
  font-weight:600;
  background:#fff;
  color:var(--text);
  transition:.25s ease;
}


.bn-btn:hover{ transform:translateY(-2px) }
.bn-btn-primary{
  background:var(--pink);
  border-color:transparent; 
  box-shadow: 0 8px 24px rgba(255,77,141,.35);
}
.bn-btn-primary:hover{ background:var(--pink-600) }
.bn-btn-ghost{
  background:#fff;
}
.bn-btn-soft{
  width: fit-content;
  background:#fff5f8;
  border-color:#ffd1e1;
  color:#b4235a;
  padding:.7rem 1rem;
  border-radius:.6rem;
  cursor:not-allowed;
}

/* ---------- Demo ---------- */
.bn-demo{
  padding: 3.5rem 0 1rem;
}
.bn-demo .bn-container{
  display:grid;
  grid-template-columns: 1.05fr 1.3fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items:center;
}
.bn-demo h2{ font-size:1.6rem }
.bn-demo p{ color:var(--muted) }
.bn-chips{ display:flex; gap:.5rem; flex-wrap:wrap }
.bn-chip{
  background:var(--chip);
  padding:.35rem .65rem;
  border-radius:999px;
  font-size:.85rem;
  border:1px solid var(--line);
}
.bn-chip-soon{ background:#ffe6f0; border-color:#ffd1e1; color:#b4235a }

.bn-video-card{
  position:relative;
  min-height: 320px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, #fafafa, #fff);
  border-radius:1rem;
  display:grid;
  place-items:center;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.bn-play{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.75rem 1rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:600;
  cursor:default;
}
.bn-play-icon{ font-size:1rem }
.bn-coming{
  position:absolute;
  right:1rem;
  bottom:1rem;
  font-size:.85rem;
  color:var(--muted);
}

/* ---------- Feature cards ---------- */
.bn-features{ padding: 2rem 0 1rem }
.bn-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius: .9rem;
  padding: 1.2rem 1.1rem;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: var(--shadow);
  transform-origin: center top;
}
.card:hover{
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 14px 36px rgba(15,23,42,.12), 0 4px 10px rgba(15,23,42,.08);
}
.bn-icon{
  color:var(--pink);
  margin-bottom:.6rem;
}
.card h3{ margin-bottom:.2rem; font-size:1.1rem }
.card p{ color:var(--muted) }

/* ---------- Download section ---------- */
.bn-download{ padding: 2.5rem 0 3.5rem }
.bn-download h2{ text-align:center; font-size:1.8rem }
.bn-download-sub{
  text-align:center;
  color:var(--muted);
  max-width:680px;
  margin:.5rem auto 1.8rem;
}
.store-grid{
  grid-template-columns: repeat(3, 1fr);
}
.store-card .store-head{
  display:flex; align-items:center; gap:.6rem; margin-bottom:.25rem;
}
.store-icon{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:.6rem;
  background:#fff5f8;
  color:var(--pink);
  font-weight:700;
  border:1px solid #ffd1e1;
}
.bn-legal{
  margin-top:1rem; text-align:center; color:var(--muted); font-size:.9rem;
}

/* ---------- Drop-in animation ---------- */
.drop-in{
  opacity:0;
  transform: translateY(-18px);
  animation: bn-drop .7s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: var(--delay, 60ms);
}
@keyframes bn-drop{
  to{ opacity:1; transform: translateY(0) }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .bn-demo .bn-container{ grid-template-columns: 1fr }
  .bn-grid{ grid-template-columns: 1fr; }
  .store-grid{ grid-template-columns: 1fr; }
  .bn-hero{ padding: 4.5rem 0 3rem }
}







/* ========== Footer ========== */
.site-footer{background:#0f172a;color:#cbd5e1;padding:2rem 0 1.2rem}
.brand-footer{display:flex;align-items:center;gap:.6rem}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:1.4rem}
.footer-col h4{color:#fff;margin:.2rem 0 .6rem}
.footer-col p{margin:.2rem 0 .6rem}
.link-list{list-style:none;margin:0;padding:0}
.link-list li{margin:.35rem 0}
.link-list a{color:#cbd5e1;text-decoration:none}
.link-list a:hover{color:#fff;text-decoration:underline;text-underline-offset:6px}
.contact-list{list-style:none;margin:.6rem 0 0;padding:0}
.contact-list li{display:flex;gap:.5rem;align-items:center;margin:.25rem 0}
.contact-list a{color:#fff;text-decoration:none}
.footer-apps{display:flex;gap:.4rem;margin-top:.5rem}

/* Chips (social) – consolidated */
.chip{inline-size:38px;block-size:38px;display:grid;place-items:center;border-radius:12px;background:#fff;color:#0f172a;text-decoration:none;transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;border:1px solid #ffffff22}
.chip i{font-size:20px}
.chip:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.18);filter:saturate(1.1)}
.chip--facebook{background:#1877F2;color:#fff}
.chip--instagram{background:radial-gradient(45% 45% at 30% 30%, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);color:#fff}
.chip--x{background:#000;color:#fff;border-color:#000}
.chip--whatsapp{background:#25D366;color:#fff}

.footer-bottom{border-top:1px solid #334155;margin-top:1.4rem;padding-top:.8rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.95rem}
.footer-bottom .love{color:#ff9eb5}
.footer-bottom a{color:#cbd5e1;text-decoration:none;margin-inline-start:.6rem}
.footer-bottom a:hover{color:#fff}
.footer-socials{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.follow-note{margin:.25rem 0 .5rem;color:#9fb0c6}



/* ========== Responsive ========== */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr}
  .cta-grid{grid-template-columns:1fr;text-align:center}
  .cta-content{display:grid;place-items:center}
  .cta-features{justify-self:center}
}
@media (max-width:900px){
  .cards-3{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr 1fr}
  .features-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero-metrics{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .nav-toggle{display:inline-flex}
  .nav{position:fixed;inset:0 0 0 30%;background:#fff;border-inline-start:1px solid var(--border);padding:1rem;flex-direction:column;align-items:flex-start;gap:1rem;transform:translateX(100%);transition:transform .25s ease;box-shadow:var(--shadow)}
  .nav.open{transform:translateX(0)}
  .nav-close{display:inline-flex}
  .nav-list{flex-direction:column;gap:.6rem}
  .nav-ctas{margin-top:auto}
  .steps-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}

/* ========== Motion & A11y ========== */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}