/* =========================================================
   01. VARIABLES — Design System
========================================================= */
:root{
  --bg:#0A0B0E;
  --bg-alt:#0D0F13;
  --surface:#12151B;
  --surface-2:#181C24;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.15);

  --text:#F3F4F7;
  --muted:#8E93A1;
  --faint:#5C606C;

  --accent:#FFB454;        /* amber — syntax-highlight string tone */
  --accent-soft:#FFCB84;
  --accent-2:#6FA8FF;      /* cool blue — function/keyword tone */
  --ok:#5CE0A3;

  --font-display:'Sora', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --radius-pill:999px;

  --shadow-md: 0 20px 50px rgba(0,0,0,.4);
  --shadow-glow: 0 0 60px rgba(255,180,84,.12);

  --ease: cubic-bezier(.16,.8,.28,1);
  --t-fast:.2s var(--ease);
  --t-med:.4s var(--ease);
  --t-slow:.7s var(--ease);

  --container: min(92%, 1200px);
  --navbar-h: 76px;
}

/* =========================================================
   02. RESET
========================================================= */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--navbar-h); }
img,svg{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,textarea{ font:inherit; color:inherit; background:none; border:none; }
button{ cursor:pointer; }
ul,ol{ list-style:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* =========================================================
   03. GLOBAL STYLES
========================================================= */
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.container{ width:var(--container); margin-inline:auto; }

h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:1.15; letter-spacing:-.02em; color:var(--text); }
h2{ font-size:clamp(1.85rem,1.5rem + 1.6vw,2.6rem); }
h3{ font-size:1.1rem; font-weight:600; }
p{ color:var(--muted); }

::selection{ background:var(--accent); color:#0A0B0E; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--surface-2); border-radius:var(--radius-pill); border:2px solid var(--bg); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.skip-link{ position:absolute; left:-9999px; top:0; z-index:1000; background:var(--accent); color:#0A0B0E; padding:.8rem 1.2rem; border-radius:var(--radius-sm); font-weight:600; }
.skip-link:focus{ left:1rem; top:1rem; }

.section{ padding:clamp(4rem,5.5vw,6.5rem) 0; }
.section--alt{ background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

.section-head{ max-width:640px; margin:0 auto clamp(2.5rem,4vw,3.5rem); text-align:center; }
.section-head--left{ margin-inline:0; text-align:left; max-width:420px; }
.section-head h2{ margin-top:.6rem; }
.section-head p{ margin-top:.9rem; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-mono); font-size:.75rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent);
}
.eyebrow::before{ content:'//'; opacity:.6; }

.mono-label{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-mono); font-size:.78rem; color:var(--muted); background:var(--surface); border:1px solid var(--border); padding:.45rem .9rem; border-radius:var(--radius-pill); }
.mono-label--center{ background:none; border:none; padding:0; color:var(--accent); font-size:.85rem; margin-bottom:.8rem; }
.dot-live{ width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px rgba(92,224,163,.2); animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

.text-accent{ color:var(--accent); }
.text-link{ display:inline-flex; align-items:center; gap:.4rem; font-size:.88rem; font-weight:600; color:var(--accent); transition:gap var(--t-fast); flex-shrink:0; }
.text-link:hover{ gap:.7rem; }

/* =========================================================
   04. REUSABLE COMPONENTS
========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.6rem; border-radius:var(--radius-sm);
  font-weight:600; font-size:.92rem; white-space:nowrap;
  transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn--primary{ background:var(--accent); color:#1A1200; }
.btn--primary:hover{ background:var(--accent-soft); box-shadow:var(--shadow-glow); transform:translateY(-3px); }
.btn--primary:active{ transform:translateY(-1px) scale(.98); }

.btn--ghost{ border:1px solid var(--border-strong); color:var(--text); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-3px); }
.btn--ghost:active{ transform:translateY(-1px) scale(.98); }

.btn--sm{ padding:.6rem 1.3rem; font-size:.82rem; }
.btn--lg{ padding:1rem 2.1rem; font-size:.98rem; }
.btn--block{ display:flex; width:100%; }

/* window-chrome dots (shared: editor + browser cards) */
.dot{ width:9px; height:9px; border-radius:50%; }
.dot--red{ background:#FF6B6B; }
.dot--yellow{ background:#FFD166; }
.dot--green{ background:#5CE0A3; }

/* =========================================================
   05. GLOBAL INTERACTIONS
========================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* --- Merged: cursor-follow glow (additive — does not touch existing border-color hover states) --- */
.glow-card{ position:relative; }
.glow-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(280px circle at var(--x,50%) var(--y,50%), rgba(255,180,84,.16), transparent 65%);
  opacity:0; transition:opacity .35s var(--ease); pointer-events:none; z-index:0;
}
.glow-card:hover::before{ opacity:1; }

@media (hover:none){
  .audience-card:active, .browser-card:active, .pillar:active, .stat-card:active, .tool-badge:active{ transform:scale(.97); }
}

/* =========================================================
   06. NAVBAR
========================================================= */
.navbar{
  position:fixed; inset:0 0 auto 0; z-index:200; height:var(--navbar-h);
  display:flex; align-items:center;
  background:rgba(10,11,14,.55);
  border-bottom:1px solid transparent;
  backdrop-filter:blur(16px);
  transition:background var(--t-med), border-color var(--t-med);
}
.navbar.is-scrolled{ background:rgba(10,11,14,.9); border-color:var(--border); }
.navbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

.logo{ display:flex; align-items:center; gap:.15rem; font-family:var(--font-mono); font-weight:800; font-size:1.2rem; }
.logo__bracket{ color:var(--accent); }
.logo__text em{ font-style:normal; color:var(--muted); }
.logo__dot{ color:var(--accent); } /* merged: dot accent for new logo mark */

.nav-menu__list{ display:flex; align-items:center; gap:2.2rem; }
.nav-menu__link{ font-family:var(--font-mono); font-size:.85rem; color:var(--muted); font-weight:500; transition:color var(--t-fast); position:relative; }
.nav-menu__link:hover, .nav-menu__link.is-active{ color:var(--text); }
.nav-menu__link.is-active::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--accent); border-radius:2px; }

.navbar__actions{ display:flex; align-items:center; gap:1rem; }
.menu-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; }
.menu-toggle span{ display:block; width:22px; height:2px; background:var(--text); border-radius:2px; margin-inline:auto; transition:transform var(--t-fast), opacity var(--t-fast); }
.menu-toggle.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.is-active span:nth-child(2){ opacity:0; }
.menu-toggle.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; top:var(--navbar-h); left:0; right:0; z-index:190;
  background:rgba(10,11,14,.98); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:1.5rem 4% 2rem;
  display:flex; flex-direction:column; gap:1.5rem;
  transform:translateY(-8px); opacity:0; visibility:hidden;
  transition:transform var(--t-med), opacity var(--t-med), visibility var(--t-med);
}
.mobile-menu.is-open{ transform:translateY(0); opacity:1; visibility:visible; }
.mobile-menu ul{ display:flex; flex-direction:column; gap:1.1rem; }
.mobile-menu a{ font-family:var(--font-mono); font-size:1.05rem; color:var(--text); }

/* =========================================================
   07. HERO
========================================================= */
.hero{ position:relative; padding:calc(var(--navbar-h) + 3.5rem) 0 5rem; overflow:hidden; }
.hero__grid-bg{
  position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 100%);
}
.hero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }

.hero__title{ margin-top:1.1rem; font-size:clamp(2.3rem,1.6rem + 2.9vw,3.4rem); font-weight:700; }
.hero__desc{ margin-top:1.4rem; max-width:48ch; font-size:1.05rem; color:var(--muted); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem; }

.hero__stats{ display:flex; gap:2.2rem; margin-top:2.6rem; flex-wrap:wrap; }
.hero__stats strong{ display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--accent); }
.hero__stats span{ font-size:.78rem; color:var(--faint); }

.hero__visual{ position:relative; min-height:380px; }
.editor{
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-md);
  box-shadow:var(--shadow-md); overflow:hidden;
}
.editor__head{ display:flex; align-items:center; gap:.4rem; padding:.9rem 1.1rem; border-bottom:1px solid var(--border); }
.editor__filename{ margin-left:.7rem; font-family:var(--font-mono); font-size:.75rem; color:var(--faint); }
.editor__body{ padding:1.4rem 1.2rem; min-height:220px; position:relative; }
.editor__code{ font-family:var(--font-mono); font-size:.82rem; line-height:1.75; white-space:pre-wrap; color:var(--muted); }
.editor__code .kw{ color:var(--accent-2); }
.editor__code .str{ color:var(--accent); }
.editor__code .fn{ color:var(--ok); }
.editor__cursor{ display:inline-block; width:7px; height:16px; background:var(--accent); vertical-align:middle; animation:blink 1s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.editor__foot{ display:flex; gap:.6rem; padding:.9rem 1.1rem; border-top:1px solid var(--border); }
.editor__badge{ font-family:var(--font-mono); font-size:.7rem; padding:.3rem .6rem; border-radius:var(--radius-sm); background:var(--surface-2); color:var(--muted); }
.editor__badge--ok{ color:var(--ok); }

.float-card{
  position:absolute; z-index:3; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-md);
  padding:.9rem 1.1rem; box-shadow:var(--shadow-md); animation:floatY 6s ease-in-out infinite;
}
.float-card--perf{ top:-6%; right:-4%; animation-delay:.3s; }
.float-card--commit{ bottom:-6%; left:-4%; animation-delay:1s; }
.float-card__label{ display:block; font-family:var(--font-mono); font-size:.68rem; color:var(--faint); margin-bottom:.2rem; }
.float-card strong{ font-family:var(--font-display); font-size:1.2rem; color:var(--text); }
.float-card strong span{ font-size:.75rem; color:var(--faint); font-weight:400; }
.float-card__shield{ display:flex; align-items:center; gap:.4rem; font-size:.95rem; } /* merged: security badge */
.float-card__shield svg{ color:var(--accent-2); flex-shrink:0; }

@keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

/* =========================================================
   08. REMAINING SECTIONS — each with a distinct visual device
========================================================= */

/* --- Built For: index cards --- */
.audience-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.audience-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:1.8rem; transition:transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
}
.audience-card:hover{ transform:translateY(-6px); border-color:var(--accent); box-shadow:var(--shadow-md); }
.audience-card__index{ display:block; font-family:var(--font-mono); font-size:.78rem; color:var(--accent); margin-bottom:1rem; }
.audience-card h3{ margin-bottom:.5rem; }
.audience-card p{ font-size:.88rem; }

/* --- Case Studies: browser-chrome mockups --- */
.cases-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.browser-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;
  transition:transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.browser-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-md); border-color:var(--border-strong); }
.browser-card__chrome{ display:flex; align-items:center; gap:.4rem; padding:.7rem .9rem; border-bottom:1px solid var(--border); background:var(--surface-2); }
.browser-card__url{ margin-left:.6rem; font-family:var(--font-mono); font-size:.7rem; color:var(--faint); }
.browser-card__preview{ height:150px; background:linear-gradient(135deg, var(--surface-2), var(--bg-alt)); position:relative; overflow:hidden; }
.browser-card__preview::before{ content:''; position:absolute; inset:16px; border:1px dashed var(--border-strong); border-radius:var(--radius-sm); }

.browser-card__body{ padding:1.4rem; }
.browser-card__tags{ display:flex; gap:.5rem; margin-bottom:.8rem; }
.browser-card__tags span{ font-family:var(--font-mono); font-size:.68rem; color:var(--accent); background:rgba(255,180,84,.1); padding:.25rem .6rem; border-radius:var(--radius-pill); }
.browser-card h3{ font-size:1.02rem; margin-bottom:.5rem; }
.browser-card p{ font-size:.86rem; margin-bottom:1rem; }

/* --- How I Help: horizontal rows --- */
.help-list{ display:flex; flex-direction:column; border-top:1px solid var(--border); }
.help-row{
  display:flex; align-items:center; gap:2rem; padding:1.8rem 0; border-bottom:1px solid var(--border);
  transition:padding-left var(--t-med), background var(--t-med);
}
.help-row:hover{ padding-left:.8rem; background:rgba(255,180,84,.03); }
.help-row__num{ font-family:var(--font-mono); font-size:1.4rem; color:var(--border-strong); flex-shrink:0; width:50px; }
.help-row__main{ flex:1; }
.help-row__main h3{ margin-bottom:.4rem; }
.help-row__main p{ font-size:.92rem; max-width:56ch; }

/* --- Approach: pillar strip --- */
.pillar-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.pillar{ padding:2rem 1.6rem; border-right:1px solid var(--border); transition:background var(--t-med); }
.pillar:last-child{ border-right:none; }
.pillar:hover{ background:var(--surface); }
.pillar__icon{ color:var(--accent); margin-bottom:1.1rem; }
.pillar h3{ font-size:1rem; margin-bottom:.5rem; }
.pillar p{ font-size:.86rem; }

/* --- Process: connected timeline --- */
.timeline{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.timeline__line{ position:absolute; top:22px; left:0; right:0; height:1px; background:var(--border); z-index:0; }
.timeline__step{ position:relative; z-index:1; display:flex; flex-direction:column; gap:.9rem; }
.timeline__marker{
  width:44px; height:44px; border-radius:50%; background:var(--bg); border:1px solid var(--accent);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:.85rem; color:var(--accent);
}
.timeline__step h3{ font-size:1.02rem; }
.timeline__step p{ font-size:.88rem; }

/* --- Standards: stat cards --- */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.stat-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:2rem 1.6rem; text-align:center; transition:transform var(--t-med), border-color var(--t-med);
}
.stat-card:hover{ transform:translateY(-6px); border-color:var(--accent); }
.stat-card__value{ display:block; font-family:var(--font-display); font-size:2.1rem; font-weight:700; color:var(--accent); margin-bottom:.6rem; }
.stat-card h3{ font-size:.98rem; margin-bottom:.5rem; }
.stat-card p{ font-size:.85rem; }

/* --- Tools: badge grid --- */
.tool-grid{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }
.tool-badge{
  font-family:var(--font-mono); font-size:.88rem; color:var(--muted);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill);
  padding:.65rem 1.4rem; transition:color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.tool-badge:hover{ color:var(--accent); border-color:var(--accent); transform:translateY(-3px); }

/* --- About: split profile --- */
.about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:3.5rem; align-items:center; }
.about-content p{ margin-top:1.2rem; max-width:52ch; }
.checklist{ display:flex; flex-direction:column; gap:.9rem; margin:1.6rem 0 2rem; }
.checklist li{ display:flex; align-items:flex-start; gap:.7rem; font-size:.92rem; color:var(--text); }
.checklist__icon{ flex-shrink:0; width:20px; height:20px; border-radius:50%; background:rgba(92,224,163,.15); color:var(--ok); display:flex; align-items:center; justify-content:center; font-size:.7rem; margin-top:.1rem; }

.profile-card{ background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.profile-card__photo{ height:440px; background:linear-gradient(135deg, var(--surface-2), var(--bg-alt)); position:relative; }
.profile-card__photo img{ width:100%; height:100%; object-fit:cover; object-position:center 15%; display:block; }

/* --- FAQ: two column layout --- */
.faq-layout{ display:grid; grid-template-columns:.8fr 1.2fr; gap:3rem; align-items:start; }
.faq-list{ display:flex; flex-direction:column; }
.faq-item{ border-bottom:1px solid var(--border); }
.faq-item__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.3rem 0; text-align:left; font-size:.98rem; font-weight:500; }
.faq-item__icon{ position:relative; width:18px; height:18px; flex-shrink:0; }
.faq-item__icon::before,.faq-item__icon::after{ content:''; position:absolute; background:var(--accent); border-radius:2px; transition:transform var(--t-fast); }
.faq-item__icon::before{ width:100%; height:2px; top:50%; left:0; transform:translateY(-50%); }
.faq-item__icon::after{ height:100%; width:2px; left:50%; top:0; transform:translateX(-50%); }
.faq-item.is-open .faq-item__icon::after{ transform:translateX(-50%) scaleY(0); }
.faq-item__a{ max-height:0; overflow:hidden; transition:max-height var(--t-med); }
.faq-item__a p{ padding:0 0 1.3rem; font-size:.9rem; max-width:60ch; }
.faq-item.is-open .faq-item__a{ max-height:220px; }

/* --- CTA --- */
.cta-section{ padding:2rem 0 clamp(4rem,6vw,6rem); }
.cta-box{
  position:relative; text-align:center; padding:clamp(3rem,5vw,4.5rem) 2rem;
  border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--border-strong); overflow:hidden;
}
.cta-box::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%, rgba(255,180,84,.12), transparent 60%); pointer-events:none; }
.cta-box h2{ position:relative; max-width:22ch; margin:0 auto; }
.cta-box p{ position:relative; max-width:46ch; margin:1rem auto 1.8rem; }
.cta-box__actions{ position:relative; display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }

/* --- Footer --- */
.footer{ padding:4rem 0 0; border-top:1px solid var(--border); }
.footer__grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:2.5rem; padding-bottom:3rem; }
.footer__brand p{ margin:1rem 0 1.2rem; font-size:.88rem; max-width:32ch; }
.footer__social{ display:flex; gap:.7rem; }
.footer__social a{ width:40px; height:40px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:1.1rem; transition:border-color var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.footer__social a:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-3px); } /* merged: hover lift */
.footer__col h4{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em; margin-bottom:1.1rem; color:var(--text); }
.footer__col ul{ display:flex; flex-direction:column; gap:.7rem; }
.footer__col a{ font-size:.88rem; color:var(--muted); transition:color var(--t-fast); }
.footer__col a:hover{ color:var(--accent); }
.footer__bottom{ display:flex; justify-content:space-between; padding:1.5rem 0; border-top:1px solid var(--border); font-family:var(--font-mono); font-size:.75rem; color:var(--faint); }

/* Back to top */
.back-to-top{
  position:fixed; bottom:1.6rem; right:1.6rem; z-index:150; width:44px; height:44px; border-radius:50%;
  background:var(--accent); color:#1A1200; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ transform:translateY(-4px); }

/* =========================================================
   10. RESPONSIVE
========================================================= */
@media (max-width:1366px){ :root{ --container:min(92%,1100px); } }
@media (max-width:1200px){
  .hero__grid{ gap:2rem; }
  .audience-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:992px){
  .nav-menu{ display:none; }
  .menu-toggle{ display:flex; }

  .hero__grid{ grid-template-columns:1fr; text-align:left; }
  .hero__visual{ margin-top:2.5rem; min-height:320px; }

  .cases-grid{ grid-template-columns:1fr 1fr; }
  .pillar-strip{ grid-template-columns:1fr 1fr; }
  .pillar{ border-bottom:1px solid var(--border); }
  .pillar:nth-child(2n){ border-right:none; }

  .timeline{ grid-template-columns:1fr 1fr; }
  .timeline__line{ display:none; }

  .stat-grid{ grid-template-columns:1fr 1fr; }

  .about-grid{ grid-template-columns:1fr; }
  .about-visual{ order:-1; max-width:360px; }

  .faq-layout{ grid-template-columns:1fr; gap:1.5rem; }

  .footer__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:768px){
  :root{ --navbar-h:68px; }
  h2{ font-size:clamp(1.6rem,1.3rem + 2vw,2.2rem); }

  .hero{ padding-top:calc(var(--navbar-h) + 2.5rem); }
  .hero__stats{ gap:1.6rem; }

  .audience-grid{ grid-template-columns:1fr; }
  .cases-grid{ grid-template-columns:1fr; }
  .pillar-strip{ grid-template-columns:1fr; }
  .pillar{ border-right:none !important; }
  .timeline{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:1fr 1fr; }

  .help-row{ flex-direction:column; align-items:flex-start; gap:.8rem; }

  .footer__grid{ grid-template-columns:1fr; gap:2rem; }
  .footer__bottom{ flex-direction:column; gap:.5rem; text-align:center; }
}

@media (max-width:576px){
  .hero__cta{ flex-direction:column; width:100%; }
  .hero__cta .btn{ width:100%; }
  .float-card{ display:none; }
  .stat-grid{ grid-template-columns:1fr; }
  .cta-box__actions{ flex-direction:column; width:100%; }
  .cta-box__actions .btn{ width:100%; }
}

@media (max-width:360px){
  .container{ width:94%; }
  .editor__body{ padding:1.1rem; }
}