/* =========================================================
   BMIET Landing — Cleaned Style Sheet
   (single source of truth; no duplicate overrides)
   ========================================================= */

/* ---------- Theme tokens ---------- */
:root{
  --bg0:#0b0f19;
  --bg1:#0f172a;
  --fg:#e5e7eb;
  --muted:#94a3b8;

  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.10);
  --stroke: rgba(255,255,255,.14);

  --shadow: 0 18px 60px rgba(0,0,0,.35);
  --shadow2: 0 10px 40px rgba(0,0,0,.18);

  --radius: 20px;
  --radius2: 26px;

  --accent:#34d399; /* emerald default */
  --accent2:#22c55e;
  --danger:#fb7185;

  --navh: 74px;
  --max: 1180px;
  --blur: 14px;

  --topbar-bg: rgba(0,0,0,.20);
  --nav-bg: rgba(0,0,0,.25);

  --surface-hover: rgba(255,255,255,.07);
  --surface-soft: rgba(255,255,255,.05);

  --ring:#e5e7eb;
}

html[data-theme="light"]{
  --bg0:#f8fafc;
  --bg1:#ffffff;
  --fg:#0b1220;
  --muted:#475569;

  --card: rgba(15,23,42,.04);
  --card2: rgba(15,23,42,.07);
  --stroke: rgba(15,23,42,.12);

  --shadow: 0 18px 60px rgba(2,6,23,.12);
  --shadow2: 0 10px 40px rgba(2,6,23,.08);

  --topbar-bg: rgba(255,255,255,.75);
  --nav-bg: rgba(255,255,255,.75);

  --surface-hover: rgba(15,23,42,.05);
  --surface-soft: rgba(15,23,42,.03);

  --ring:#cbd5f5;
}

html[data-accent="emerald"]{ --accent:#34d399; --accent2:#22c55e; }
html[data-accent="violet"] { --accent:#a78bfa; --accent2:#8b5cf6; }
html[data-accent="sky"]    { --accent:#38bdf8; --accent2:#0ea5e9; }
html[data-accent="rose"]   { --accent:#fb7185; --accent2:#f43f5e; }

/* ---------- Base / reset ---------- */
*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--fg);
  overflow-x:hidden;

  background:
    radial-gradient(1200px 700px at 12% 6%, rgba(52,211,153,.20), transparent 55%),
    radial-gradient(900px 600px at 88% 22%, rgba(167,139,250,.14), transparent 56%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

a{color:inherit}
img{max-width:100%; display:block}
button,input,select,textarea{font:inherit}

/* ---------- Forms ---------- */
input,select,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.12);
  color:var(--fg);
  outline:none;
}
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{
  background: rgba(255,255,255,.85);
}
textarea{resize:vertical}

label span{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin:0 0 6px 2px;
}
select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}

/* ---------- Layout helpers ---------- */
.container{width:min(var(--max), calc(100% - 36px)); margin:0 auto}
.row{display:flex; align-items:center; justify-content:space-between; gap:16px}

.small{font-size:13px}
.tiny{font-size:12px}
.muted{color:var(--muted)}
.nowrap{white-space:nowrap}
.hide-sm{display:inline}

.skip{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  left:12px; top:12px; width:auto; height:auto;
  padding:10px 12px;
  background:#000; color:#fff;
  z-index:9999; border-radius:12px;
}

/* ---------- Topbar (single line) ---------- */
.topbar{
  background: var(--topbar-bg);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(var(--blur));
}
html[data-theme="light"] .topbar{
  border-bottom: 1px solid rgba(2,6,23,.08);
}
.topbar .container{padding:10px 0}

/* Use this if you adopted the "single-line" HTML version */
.topbar-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.topbar-row .spacer{flex:1; min-width:12px}

.topbar-left{display:flex; align-items:center; gap:10px}
.topbar-right{display:flex; align-items:center; gap:10px; justify-content:flex-end}

.topbar .link{
  font-size:13px;
  color:var(--muted);
  text-decoration:none;
}
.topbar .link:hover{color:var(--fg)}
.dot{opacity:.6}

.pill{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
}
html[data-theme="light"] .pill{
  background: rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.10);
}

/* On small screens: keep single line but allow sideways scroll instead of wrap */
@media (max-width: 720px){
  .topbar-row{overflow-x:auto; -webkit-overflow-scrolling:touch}
}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  height:var(--navh);
  background: var(--nav-bg);
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(var(--blur));
  overflow:visible;
}
html[data-theme="light"] .nav{
  border-bottom:1px solid rgba(2,6,23,.10);
}
.nav-inner{
  height:var(--navh);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand img{border-radius:12px; box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset}
.brand-name{font-weight:800; letter-spacing:.2px}
.brand-sub{font-size:12px; color:var(--muted)}

.nav-links{display:flex; gap:14px; align-items:center}
.nav-links a{
  font-size:14px;
  color:var(--muted);
  text-decoration:none;
  padding:8px 10px;
  border-radius:12px;
}
.nav-links a:hover{color:var(--fg); background: var(--surface-hover)}

.nav-actions{display:flex; gap:10px; align-items:center}

.iconbtn{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  width:38px; height:38px;
  border-radius:14px;
  cursor:pointer;
  transition: transform .15s ease;
}
html[data-theme="light"] .iconbtn{
  border:1px solid rgba(2,6,23,.10);
  background: rgba(15,23,42,.04);
}
.iconbtn:hover{transform: translateY(-1px)}

.hamburger{
  display:none;
  border:0;
  background:transparent;
  width:44px; height:44px;
  border-radius:14px;
  cursor:pointer;
}
.hamburger span{
  display:block; height:2px; width:22px;
  background:var(--fg);
  margin:5px auto;
  border-radius:2px;
  opacity:.9;
}

/* Mobile menu dropdown */
.mobile-menu{
  position:absolute;
  left:0; right:0;
  top:var(--navh);
  z-index:60;
  padding:10px 18px 16px;
  border-bottom:1px solid rgba(255,255,255,.10);
  display:flex;
  flex-direction:column;
  gap:10px;
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(var(--blur));
  max-height: calc(100svh - var(--navh));
  overflow:auto;
}
html[data-theme="light"] .mobile-menu{
  background: rgba(255,255,255,.82);
  border-bottom:1px solid rgba(2,6,23,.10);
}
.mobile-menu a{
  color:var(--muted);
  text-decoration:none;
  padding:10px 12px;
  border-radius:14px;
}
.mobile-menu a:hover{background: var(--surface-hover); color:var(--fg)}

/* ---------- Sections / headings ---------- */
.section{padding: 74px 0; position:relative}
[id]{scroll-margin-top: calc(var(--navh) + 14px)}

.section-head{display:flex; flex-direction:column; gap:8px; margin-bottom:24px}
h1,h2,h3{margin:0}
h2{font-size: clamp(22px, 2.2vw, 34px); letter-spacing:-.6px}
h3{font-size: 18px}

/* Subtle section glow */
.section::after{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(52,211,153,.06), transparent 55%),
    radial-gradient(120% 80% at 50% 100%, rgba(167,139,250,.05), transparent 55%);
  pointer-events:none;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:#06101a;
  font-weight:800;
  border-radius:16px;
  text-decoration:none;
  border:0;
  cursor:pointer;
  box-shadow: 0 14px 35px rgba(52,211,153,.18);
  transition: transform .15s ease;
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0px)}
.btn-sm{padding:10px 12px; border-radius:14px; font-weight:800; font-size:14px}
.btn-ghost{
  background: rgba(255,255,255,.06);
  color:var(--fg);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:none;
}
html[data-theme="light"] .btn-ghost{
  background: rgba(15,23,42,.05);
  border:1px solid rgba(15,23,42,.12);
}
.btn-block{width:100%}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height: calc(100svh - var(--navh));
  display:flex;
  align-items:stretch;
  padding:0;
}

.hero-media{position:absolute; inset:0; overflow:hidden}
.hero-poster{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:saturate(1.1) contrast(1.05)
}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition: opacity .8s ease;
}
.hero-video.is-playing{opacity:1}

.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(2,6,23,.85), rgba(2,6,23,.42)),
    radial-gradient(900px 600px at 15% 35%, rgba(52,211,153,.16), transparent 55%);
}
html[data-theme="light"] .hero-overlay{
  background:
    linear-gradient(90deg, rgba(248,250,252,.90), rgba(248,250,252,.50)),
    radial-gradient(900px 600px at 15% 35%, rgba(52,211,153,.14), transparent 55%);
}

.hero-glow{
  position:absolute; inset:-20%;
  background: radial-gradient(circle at 65% 30%, rgba(167,139,250,.16), transparent 45%);
  filter: blur(30px);
}

.hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:22px;
  padding:58px 0;
  align-items:center;
}

.hero-left h1{
  font-size: clamp(30px, 3.5vw, 54px);
  letter-spacing:-1.5px;
  line-height:1.05;
}
.grad{
  background: linear-gradient(90deg, var(--accent), rgba(167,139,250,.95));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.lead{font-size:16px; line-height:1.55; margin:14px 0 18px; max-width:52ch}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin:16px 0 8px}

.trustbar{display:flex; gap:14px; flex-wrap:wrap; margin-top:18px}
.trust{
  padding:12px 14px;
  border-radius:16px;
  background: var(--surface-soft);
  border:1px solid var(--stroke);
  min-width:150px;
}
.kpi{font-weight:900; font-size:20px; letter-spacing:-.4px}

.mini-actions{margin-top:14px; font-size:13px}
.mini{color:var(--muted); text-decoration:none}
.mini:hover{color:var(--fg); text-decoration:underline}

/* Hero card */
.hero-card{
  padding:18px;
  border-radius: var(--radius2);
  background: linear-gradient(180deg, var(--card2), var(--card));
  border: 1px solid var(--stroke);
  backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow);
}
.hero-card-head{display:flex; flex-direction:column; gap:6px; margin-bottom:10px}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  width:fit-content;
  padding:7px 10px;
  border-radius:999px;
  background: var(--surface-soft);
  border:1px solid var(--stroke);
  font-weight:800;
  font-size:12px;
}

.hp{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

.form{display:flex; flex-direction:column; gap:12px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}

.form.wide input,.form.wide select,.form.wide textarea{background: rgba(255,255,255,.05)}
html[data-theme="light"] .form.wide input,
html[data-theme="light"] .form.wide select,
html[data-theme="light"] .form.wide textarea{background: rgba(255,255,255,.92)}

.sep{border:0; border-top:1px solid rgba(255,255,255,.10); margin:14px 0}
html[data-theme="light"] .sep{border-top:1px solid rgba(2,6,23,.10)}
.quote{margin:0; font-weight:600; line-height:1.35}

/* Scroll hint */
.scrollhint{
  position:absolute;
  left:50%;
  bottom:16px;
  transform: translateX(-50%);
  opacity:.75;
  display:flex; align-items:center; gap:10px;
  font-size:12px;
}
.mouse{
  width:24px; height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  position:relative;
}
.mouse:after{
  content:"";
  position:absolute;
  left:50%;
  top:10px;
  width:4px; height:4px;
  border-radius:999px;
  background: rgba(255,255,255,.55);
  transform: translateX(-50%);
  animation: wheel 1.2s infinite;
}
@keyframes wheel{
  0%{transform: translate(-50%,0); opacity:.8}
  70%{transform: translate(-50%,12px); opacity:.2}
  100%{transform: translate(-50%,0); opacity:0}
}

/* ---------- Cards & layouts ---------- */
.card{
  padding:18px;
  border-radius: var(--radius);
  background: var(--card);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(6px);
}
.bento{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
.span2{grid-column: span 2}

.card.media{padding:14px}
.media-inner{display:grid; gap:12px}
.media-inner img{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
}
html[data-theme="light"] .media-inner img{border:1px solid rgba(2,6,23,.10)}

.bullets{margin:12px 0 0 18px; color:var(--muted)}
.bullets li{margin:8px 0}

.cardlink{
  display:inline-block;
  margin-top:12px;
  color:var(--accent);
  text-decoration:none;
  font-weight:800;
}
.cardlink:hover{text-decoration:underline}

.tagrow{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.tag{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background: var(--surface-soft);
  border:1px solid var(--stroke);
  color:var(--muted);
}

.kpirow{display:flex; gap:14px; flex-wrap:wrap; margin:12px 0 10px}
.kpirow > div{min-width:120px}

.split{display:grid; grid-template-columns:1fr 1fr; gap:14px}

/* Tables */
.table{display:grid; gap:8px; margin-top:12px}
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:14px;
}
.table-scroll.wide .table{min-width: 720px}

.trow{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background: var(--surface-soft);
  border:1px solid rgba(255,255,255,.10);
}
html[data-theme="light"] .trow{border:1px solid rgba(15,23,42,.10)}
.trow.thead{
  background: rgba(255,255,255,.08);
  font-weight:800;
}
html[data-theme="light"] .trow.thead{background: rgba(15,23,42,.06)}

/* 4-col placements table */
#placements .trow{
  grid-template-columns: 1fr .9fr 1fr 1fr;
}

/* FAQ */
.faq{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
details.card summary{cursor:pointer; font-weight:800}
details.card summary::-webkit-details-marker{display:none}
details.card p{margin:10px 0 0; color:var(--muted)}

/* Contact */
.contact-grid{display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:14px}
.mapwrap{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  margin-top:12px;
}
html[data-theme="light"] .mapwrap{border:1px solid rgba(15,23,42,.10)}
.mapwrap iframe{width:100%; height:260px; border:0}

/* ---------- Student & alumni voices carousel ---------- */
#student-voices .review-carousel{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:0;
}

#student-voices .review-slide{
  margin:0;
}

#student-voices .quote{
  margin:0 0 4px;
}

#student-voices .review-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:8px;
  max-width:100%;
  overflow:hidden;
}

/* Prev/next buttons */
#student-voices .review-btn{
  flex:0 0 auto;
  border-radius:999px;
  border:1px solid var(--ring);
  background:transparent;
  width:26px;
  height:26px;
  padding:0;
  line-height:1;
  font-size:15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:var(--shadow2);
  transition:
    background-color .15s ease,
    transform .1s ease,
    box-shadow .15s ease;
}

#student-voices .review-btn:hover{
  background-color:rgba(0,0,0,.03);
  transform:translateY(-1px);
  box-shadow:0 4px 6px rgba(0,0,0,.18);
}

html[data-theme="light"] #student-voices .review-btn:hover{
  background-color:rgba(255,255,255,.06);
}

/* Dots */
#student-voices .review-dots{
  flex:1 1 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  max-width:100%;
}

#student-voices .review-dot{
  flex:0 0 auto;
  width:6px;
  height:6px;
  border-radius:999px;
  border:1px solid var(--ring);
  background:transparent;
  padding:0;
  cursor:pointer;
  transition:
    background-color .15s ease,
    transform .1s ease,
    border-color .15s ease;
}

#student-voices .review-dot.active{
  background-color:currentColor;
  border-color:currentColor;
  transform:scale(1.15);
}

@media (max-width:640px){
  #student-voices .quote{
    font-size:.9rem;
  }
}

/* ---------- Footer ---------- */
.footer{
  padding:26px 0;
  border-top:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  backdrop-filter: blur(var(--blur));
}
html[data-theme="light"] .footer{
  background: rgba(255,255,255,.70);
  border-top:1px solid rgba(2,6,23,.10);
}
.footer-inner{display:flex; justify-content:space-between; gap:18px; align-items:center}
.footer-left{display:flex; gap:12px; align-items:center}
.footer-title{font-weight:900}
.footer-right{display:flex; gap:14px; flex-wrap:wrap}
.footer-right a{font-size:13px; color:var(--muted); text-decoration:none}
.footer-right a:hover{color:var(--fg); text-decoration:underline}

/* ---------- Floating elements ---------- */
.sticky-cta{
  position:fixed;
  left:50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display:none;
  gap:10px;
  z-index:60;
  padding:10px;
  border-radius:999px;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(var(--blur));
}
html[data-theme="light"] .sticky-cta{
  background: rgba(255,255,255,.75);
  border:1px solid rgba(2,6,23,.10);
}

/* Hero audio button */
.hero-audio-btn{
  position:absolute;
  top: calc(var(--navh) + 12px);
  right: 16px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.36);
  color:var(--fg);
  font-weight:800;
  line-height:1.1;
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur));
  cursor:pointer;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform: translateY(-6px);
  transition: opacity .3s ease, transform .3s ease, background .3s ease, border-color .3s ease;
}
.hero-audio-btn.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translateY(0);
}
.hero-audio-btn[aria-pressed="true"]{
  background: rgba(0,0,0,.48);
  border-color: rgba(255,255,255,.24);
}
html[data-theme="light"] .hero-audio-btn{
  background: rgba(255,255,255,.82);
  border:1px solid rgba(2,6,23,.12);
}
html[data-theme="light"] .hero-audio-btn[aria-pressed="true"]{
  background: rgba(255,255,255,.92);
  border-color: rgba(2,6,23,.18);
}
.hero-audio-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.hero-audio-icon{font-size:15px; line-height:1}
.hero-audio-text{font-size:13px; font-weight:800; letter-spacing:-.1px}

/* WhatsApp FAB */
.chatfab{
  position:fixed;
  right:16px;
  bottom: calc(90px + env(safe-area-inset-bottom));
  z-index:70;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  text-decoration:none;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow);
}
html[data-theme="light"] .chatfab{
  background: rgba(255,255,255,.78);
  border:1px solid rgba(2,6,23,.10);
}
.chatfab-dot{
  width:10px; height:10px;
  border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(52,211,153,.12);
}
.chatfab-text{font-weight:900; font-size:13px; color:var(--fg)}

/* ---------- Image aspect fixes ---------- */
#campus .media-inner{display:block}
#campus .media-inner img{
  width:100%;
  aspect-ratio:16 / 9;
  max-height: min(480px, 60vh);
  height:auto;
  object-fit:cover;
  object-position:center;
  border-radius:16px;
}

#programs .card.media .media-inner img{
  width:100%;
  aspect-ratio:16 / 9;
  max-height:260px;
  height:auto;
  object-fit:cover;
  object-position:center;
  border-radius:12px;
}

/* Programs: make card heights feel consistent + keep CTA aligned */
#programs .bento > article.card:not(.media){
  display:flex;
  flex-direction:column;
  min-height: 220px;
}

#programs .bento > article.card:not(.media) .cardlink{
  margin-top:auto;
  padding-top:12px;
}

/* Tighten bullets a bit */
#programs .bullets{
  margin: 10px 0 0;
  padding-left: 18px;
}

@media (max-width: 768px){
  #programs .card.media .media-inner img{max-height:220px}
  #campus .media-inner img{max-height:320px}
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr; padding:36px 0 80px}
  .hide-sm{display:none}
  .nav-links{display:none}
  .hamburger{display:block}

  .bento{grid-template-columns: repeat(2, 1fr)}
  .faq{grid-template-columns: 1fr}
  .split{grid-template-columns: 1fr}
  .contact-grid{grid-template-columns: 1fr}
  .grid3{grid-template-columns: 1fr}

  .sticky-cta{display:flex}

  .hero-audio-btn{top:auto; right:14px; bottom:26px}
}

@media (max-width: 520px){
  .grid2{grid-template-columns:1fr}
  .bento{grid-template-columns: 1fr}
  .span2{grid-column: span 1}
  .hero-left h1{letter-spacing:-1px}
  .trust{min-width:140px}

  .hero-audio-btn{right:12px; bottom:20px}
}

/* ---------- Motion respect ---------- */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  .mouse:after{animation:none}
  .btn:hover{transform:none}
  .iconbtn:hover{transform:none}
}