/* =========================================================
   ALPHAFORCE MD — PRODUCTION STYLES
   Clean consolidated build
   Global + Home page
========================================================= */

:root{
  --bg:#020913;
  --bg-deep:#040d17;
  --bg-soft:#071421;
  --bg-elevated:#0a1829;
  --panel:#0c1b2e;

  --blue:#0d63ff;
  --blue-bright:#2485ff;
  --blue-soft:rgba(36,133,255,.12);

  --white:#fff;
  --text:#f5f7fa;
  --muted:#a8b4c1;
  --faint:#758496;
  --yellow:#ffb928;
  --green:#20d365;
  --red:#ff6468;

  --border:rgba(255,255,255,.08);
  --border-blue:rgba(36,133,255,.34);

  --container:1250px;
  --font:"Inter",Arial,Helvetica,sans-serif;
  --font-display:Georgia,"Times New Roman",serif;
}

/* =========================================================
   RESET / BASE
========================================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  margin:0;
  min-width:320px;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.menu-open{
  overflow:hidden;
}

/* Editorial display typography: major headings use the review-section
   serif while interface copy, cards, navigation, and controls stay sans. */
main h1,
main h2,
.cart-drawer__header h2{
  font-family:var(--font-display);
}

main h2{
  font-size:clamp(28px,3vw,40px);
}

img{
  display:block;
  max-width:100%;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  color:inherit;
}

.container{
  width:min(calc(100% - 40px),var(--container));
  margin-inline:auto;
}

.eyebrow{
  display:inline-block;
  margin-bottom:14px;
  color:var(--blue-bright);
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
}

.eyebrow-light{
  color:#95c4ff;
}

.section-head{
  max-width:760px;
  margin-bottom:44px;
}

.section-head--center{
  margin-inline:auto;
  text-align:center;
}

.section-head h2,
.story-content h2,
.benefits-copy h2,
.comparison-copy h2,
.risk-card h2{
  margin:0;
  color:#fff;
  font-size:clamp(34px,3.15vw,49px);
  line-height:1.06;
  letter-spacing:-.035em;
}

.section-head p,
.story-content p,
.benefits-copy p,
.comparison-copy p,
.risk-card p{
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
}

/* =========================================================
   BUTTONS
========================================================= */

.btn{
  min-height:58px;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:0;
  border-radius:7px;
  cursor:pointer;
  font-size:12px;
  font-weight:800;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

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

.btn-primary{
  color:#fff;
  background:linear-gradient(100deg,#0745d6,#0c72ff);
  box-shadow:0 16px 34px rgba(5,83,255,.18);
}

.btn-primary:hover{
  box-shadow:0 20px 46px rgba(5,83,255,.28);
}

.btn-secondary{
  color:#fff;
  border:1px solid rgba(70,136,226,.52);
  background:rgba(4,14,25,.45);
}

.btn-wide{
  width:min(100%,390px);
}

/* =========================================================
   PROMO BAR
========================================================= */

.promo-bar{
  min-height:42px;
  display:flex;
  align-items:center;
  background:linear-gradient(90deg,#0759df 0%,#0d67ff 55%,#1b7dff 100%);
}

.promo-bar__inner{
  min-height:42px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:700;
}

.promo-bar a{
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* =========================================================
   HEADER
========================================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(2,9,19,.94);
  border-bottom:1px solid var(--border);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}

.site-header__inner{
  min-height:76px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}

.brand{
  display:inline-flex;
  align-items:center;
  font-size:clamp(20px,1.8vw,26px);
  font-weight:900;
  letter-spacing:-.045em;
}

.brand strong{
  color:var(--blue-bright);
}

.desktop-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:32px;
}

.desktop-nav a{
  position:relative;
  padding:28px 0 25px;
  color:rgba(255,255,255,.85);
  font-size:13px;
  font-weight:600;
}

.desktop-nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:18px;
  height:2px;
  background:var(--blue-bright);
  transition:right .18s ease;
}

.desktop-nav a:hover::after,
.desktop-nav a.is-active::after{
  right:0;
}

.header-actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:6px;
}

.icon-link{
  position:relative;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
}

.icon-link svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.cart-count{
  position:absolute;
  top:-2px;
  right:-2px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  display:grid;
  place-items:center;
  border-radius:99px;
  background:var(--blue);
  font-size:10px;
  font-weight:800;
}

.menu-toggle{
  display:none;
  width:38px;
  height:38px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}

.menu-toggle span{
  display:block;
  width:22px;
  height:2px;
  margin:5px auto;
  background:#fff;
}

/* =========================================================
   MOBILE DRAWER
========================================================= */

.mobile-nav-backdrop{
  position:fixed;
  inset:0;
  z-index:1001;
  display:none;
  background:rgba(0,5,12,.76);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .24s ease,visibility .24s ease;
}

.mobile-nav{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  z-index:1002;
  width:min(88vw,390px);
  height:100dvh;
  padding:22px;
  display:none;
  flex-direction:column;
  background:
    radial-gradient(circle at 80% 8%,rgba(30,119,255,.18),transparent 30%),
    linear-gradient(180deg,#071421 0%,#04101b 100%);
  border-left:1px solid rgba(255,255,255,.08);
  box-shadow:-28px 0 70px rgba(0,0,0,.46);
  transform:translateX(102%);
  visibility:hidden;
  pointer-events:none;
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    visibility .28s ease;
}

.mobile-nav.is-open{
  transform:translateX(0);
  visibility:visible;
  pointer-events:auto;
}

.mobile-nav-backdrop.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.mobile-nav__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:22px;
  border-bottom:1px solid var(--border);
}

.mobile-nav__brand{
  font-size:20px;
}

.mobile-nav__close{
  width:40px;
  height:40px;
  border:1px solid var(--border);
  border-radius:50%;
  background:rgba(255,255,255,.03);
  cursor:pointer;
  font-size:28px;
  line-height:1;
}

.mobile-nav__links{
  display:grid;
  margin-top:22px;
}

.mobile-nav__links a{
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid var(--border);
  color:#f3f6fa;
  font-size:16px;
  font-weight:650;
}

.mobile-nav__links a span{
  color:var(--blue-bright);
}

.mobile-nav__footer{
  margin-top:auto;
  padding-top:26px;
}

.mobile-nav__footer .btn{
  width:100%;
}

.mobile-nav__footer p{
  margin:14px 0 0;
  color:var(--muted);
  text-align:center;
  font-size:11px;
}

/* =========================================================
   HERO
========================================================= */

.hero{
  position:relative;
  isolation:isolate;
  min-height:calc(100svh - 118px);
  overflow:hidden;
  background:var(--bg);
}

.hero-bg{
  position:absolute;
  inset:0;
  z-index:-3;
  background:
    linear-gradient(
      90deg,
      rgba(1,7,13,.98) 0%,
      rgba(1,8,15,.91) 36%,
      rgba(2,15,29,.54) 68%,
      rgba(2,10,20,.16) 100%
    ),
    url("../assets/hero-bg.webp");
  background-size:cover;
  background-position:center;
}

.hero-grid{
  min-height:calc(100svh - 118px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  column-gap:clamp(78px,6.2vw,104px);
  padding:34px 0;
}

.hero-copy{
  width:100%;
  max-width:560px;
  min-width:0;
}

.rating-line{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:22px;
  color:rgba(255,255,255,.71);
  font-size:13px;
}

.stars{
  flex:none;
  color:var(--yellow);
  font-size:17px;
  letter-spacing:1px;
}

.hero-title{
  width:100%;
  max-width:560px;
  margin:0;
  color:#fff;
  font-size:clamp(42px,3.5vw,80px);
  line-height:1.09;
  letter-spacing:-.02em;
  font-weight:820;
}

.hero-title > span,
.hero-title > strong{
  display:block;
  white-space:nowrap;
}

.hero-title strong{
  color:var(--blue-bright);
}

.hero-feature-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px 18px;
  margin-top:28px;
}

.hero-feature{
  display:flex;
  align-items:center;
  gap:8px;
  color:#f3f6fa;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
}

.feature-check{
  position:relative;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  flex:none;
}

.feature-check__inner{
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  background:var(--blue-bright);
  clip-path:polygon(
    50% 0%,
    62% 8%,
    76% 5%,
    84% 17%,
    97% 22%,
    94% 37%,
    100% 50%,
    92% 62%,
    95% 77%,
    82% 83%,
    76% 96%,
    62% 92%,
    50% 100%,
    38% 92%,
    24% 96%,
    18% 83%,
    5% 77%,
    8% 62%,
    0% 50%,
    6% 37%,
    3% 22%,
    16% 17%,
    24% 5%,
    38% 8%
  );
}

.feature-check__inner svg{
  width:13px;
  height:13px;
  fill:none;
  stroke:#fff;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.hero-main-cta{
  width:min(100%,500px);
  margin-top:30px;
}

.guarantee-line{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:18px;
  color:rgba(255,255,255,.80);
  font-size:12px;
}

.hero-copy > .guarantee-line{
  width:min(100%,500px);
  justify-content:center;
  text-align:center;
}

.shield{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  flex:none;
  border:1px solid rgba(255,255,255,.42);
  border-radius:50%;
  font-size:11px;
}

.hero-product{
  position:relative;
  width:100%;
  min-width:0;
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}

.hero-product__glow{
  position:absolute;
  width:78%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(30,119,255,.40),
    rgba(18,92,220,.18) 31%,
    transparent 69%
  );
  filter:blur(22px);
}

.hero-product img{
  position:relative;
  z-index:2;
  width:min(100%,570px);
  max-width:100%;
  max-height:520px;
  object-fit:contain;
  margin-inline:auto;
  filter:drop-shadow(0 28px 24px rgba(0,0,0,.52));
}

/* =========================================================
   SHARED DARK SECTION LANGUAGE
========================================================= */

.story-section,
.benefits-section,
.comparison-section,
.numbers-section,
.risk-section,
.faq-section{
  position:relative;
  isolation:isolate;
  border-top:1px solid rgba(255,255,255,.045);
}

.story-section::before,
.benefits-section::before,
.comparison-section::before,
.numbers-section::before,
.risk-section::before,
.faq-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 78% 15%,rgba(25,111,255,.11),transparent 30%),
    linear-gradient(180deg,var(--bg-soft),var(--bg-deep));
}

/* =========================================================
   STORY
========================================================= */

.story-section{
  padding:94px 0;
}

.story-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(48px,6vw,82px);
  align-items:center;
}

.story-image img{
  width:100%;
  aspect-ratio:1.04;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow:0 28px 60px rgba(0,0,0,.30);
}

.story-content{
  max-width:600px;
}

.story-content h2 span{
  color:#dce7f4;
}

.story-body{
  margin-top:26px;
}

.story-body p{
  margin:0 0 17px;
  color:#dce4ed;
}

.story-chips{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:24px 0 27px;
}

.story-chips span{
  padding:9px 12px;
  border:1px solid var(--border-blue);
  border-radius:7px;
  background:rgba(13,99,255,.08);
  font-size:12px;
  font-weight:600;
}

/* =========================================================
   REVIEWS
========================================================= */

.reviews-section{
  padding:90px 0;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%,rgba(14,91,210,.09),transparent 34%),
    #080f19;
  border-top:1px solid rgba(255,255,255,.045);
}

.reviews-section .section-head{
  margin-inline:auto;
  text-align:center;
}

.reviews-shell{
  width:min(100%,1480px);
  margin-inline:auto;
  overflow:hidden;
}

.reviews-track{
  display:flex;
  gap:18px;
  overflow-x:auto;
  padding:0 20px 8px;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
}

.reviews-track::-webkit-scrollbar{
  display:none;
}

.review-card{
  flex:0 0 min(325px,82vw);
  min-height:265px;
  padding:26px;
  scroll-snap-align:start;
  border:1px solid rgba(36,133,255,.22);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(10,29,51,.92),rgba(6,18,31,.92));
}

.review-stars{
  margin-bottom:18px;
  color:var(--yellow);
  letter-spacing:2px;
}

.review-card p{
  margin:0;
  color:#eef3f8;
  font-size:14px;
  line-height:1.7;
}

.review-user{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:22px;
}

.avatar{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  flex:none;
  border-radius:50%;
  background:#020913;
  color:var(--blue-bright);
  font-weight:800;
}

.review-user strong{
  display:block;
  font-size:13px;
}

.review-user small{
  display:block;
  margin-top:3px;
  color:var(--blue-bright);
  font-size:11px;
  font-weight:700;
}

.verified-mark{
  width:14px;
  height:14px;
  display:inline-grid;
  place-items:center;
  margin-right:4px;
  border-radius:50%;
  background:var(--blue-bright);
  color:#fff;
  font-size:9px;
  line-height:1;
}

.review-arrows{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:24px;
}

.review-arrows button{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid var(--border-blue);
  border-radius:50%;
  background:rgba(13,99,255,.06);
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  font-size:18px;
  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.review-arrows button:hover:not(:disabled){
  background:rgba(13,99,255,.14);
  border-color:var(--blue-bright);
  transform:translateY(-1px);
}

.review-arrows button:active:not(:disabled){
  transform:scale(.96);
}

.review-arrows button:disabled{
  opacity:.3;
  cursor:not-allowed;
}

/* =========================================================
   BENEFITS
========================================================= */

.benefits-section{
  padding:98px 0;
}

.benefits-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(52px,6vw,86px);
  align-items:center;
}

.benefits-copy{
  max-width:610px;
}

.benefits-copy h2 span{
  color:#c9d0da;
}

.benefits-intro{
  margin-top:23px;
}

.benefit-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px 30px;
  margin-top:34px;
}

.benefit-item{
  display:grid;
  grid-template-columns:46px 1fr;
  gap:14px;
}

.benefit-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(145deg,rgba(13,99,255,.24),rgba(13,99,255,.09));
  border:1px solid rgba(36,133,255,.42);
  box-shadow:inset 0 1px rgba(255,255,255,.06);
}

.benefit-icon svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:#fff;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.benefit-item h3{
  margin:0 0 7px;
  font-size:17px;
}

.benefit-item p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.62;
}

.benefits-product{
  position:relative;
  min-height:500px;
  padding:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  border:1px solid rgba(255,255,255,.045);
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 54%,rgba(25,110,255,.15),transparent 43%),
    linear-gradient(180deg,rgba(8,23,40,.78),rgba(4,13,23,.40));
}

.benefits-product__glow{
  position:absolute;
  width:78%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(28,111,255,.22),transparent 67%);
  filter:blur(22px);
}

.benefits-product img{
  position:relative;
  z-index:1;
  width:min(590px,96%);
  max-height:410px;
  object-fit:contain;
  filter:drop-shadow(0 28px 32px rgba(0,0,0,.42));
}

/* =========================================================
   COMPARISON
========================================================= */

.comparison-section{
  padding:98px 0;
}

.comparison-grid{
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:68px;
  align-items:center;
}

.comparison-copy{
  max-width:510px;
}

.comparison-copy p{
  color:var(--muted);
}

.comparison-table{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(5,15,27,.68);
  box-shadow:0 22px 55px rgba(0,0,0,.13);
}

.comparison-row{
  min-height:70px;
  display:grid;
  grid-template-columns:1.4fr .72fr .94fr;
  align-items:stretch;
  border-bottom:1px solid var(--border);
}

.comparison-row:last-child{
  border-bottom:0;
}

.comparison-row > *{
  display:flex;
  align-items:center;
  padding:15px 18px;
}

.comparison-head strong:nth-child(2){
  justify-content:center;
  background:rgba(13,99,255,.17);
}

.comparison-head strong:nth-child(3){
  justify-content:center;
}

.comparison-row > span:first-child{
  font-size:13px;
  line-height:1.45;
}

.check,
.cross{
  justify-content:center;
  font-size:19px;
  font-weight:900;
}

.check{
  color:var(--green);
  background:rgba(13,99,255,.10);
}

.cross{
  color:var(--red);
}

/* =========================================================
   NUMBERS
========================================================= */

.numbers-section{
  padding:92px 0 84px;
}

.numbers-section .section-head p{
  color:var(--muted);
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  margin-top:52px;
}

.stats-grid article{
  padding:22px 16px;
  text-align:center;
}

.stats-grid strong{
  display:block;
  color:#fff;
  font-size:clamp(58px,6vw,88px);
  line-height:1;
  letter-spacing:-.055em;
}

.stats-grid p{
  max-width:250px;
  margin:22px auto 0;
  color:#d8e0e9;
  font-size:12px;
  line-height:1.5;
}

/* =========================================================
   RISK-FREE CTA
========================================================= */

.risk-section{
  padding:68px 0 92px;
}

.risk-card{
  max-width:700px;
  text-align:center;
}

.risk-icon{
  width:54px;
  height:54px;
  margin:0 auto 18px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(145deg,#fff,#dceaff);
  color:#0d315f;
  font-size:23px;
  font-weight:900;
}

.risk-card p{
  max-width:540px;
  margin:19px auto 0;
}

.risk-button{
  width:min(100%,430px);
  margin-top:27px;
}

/* =========================================================
   FAQ
========================================================= */

.faq-section{
  padding:88px 0;
}

.faq-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.faq-item{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  background:rgba(4,14,25,.42);
}

.faq-item.is-open{
  border-color:rgba(36,133,255,.35);
  background:rgba(8,26,46,.62);
}

.faq-question{
  width:100%;
  min-height:60px;
  padding:0 18px;
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  cursor:pointer;
  text-align:left;
  font-size:14px;
  font-weight:600;
  -webkit-tap-highlight-color:transparent;
}

.faq-question span:last-child{
  color:var(--blue-bright);
  font-size:20px;
  transition:transform .18s ease;
}

.faq-item.is-open .faq-question span:last-child{
  transform:rotate(45deg);
}

.faq-answer{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .22s ease;
}

.faq-answer p{
  overflow:hidden;
  margin:0;
  padding:0 18px;
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
}

.faq-item.is-open .faq-answer{
  grid-template-rows:1fr;
}

.faq-item.is-open .faq-answer p{
  padding-bottom:18px;
}

/* =========================================================
   FOOTER
========================================================= */

.site-footer{
  padding:62px 0 22px;
  background:#05090e;
  border-top:1px solid var(--border);
}

.footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1.5fr;
  gap:58px;
}

.footer-grid > div{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-grid h3{
  margin:0 0 12px;
  font-size:13px;
}

.footer-grid a{
  color:#b9c1ca;
  font-size:13px;
}

.footer-brand{
  align-items:flex-start;
}

.footer-brand p{
  max-width:320px;
  color:#7f8a96;
  font-size:13px;
  line-height:1.65;
}

.footer-bottom{
  margin-top:48px;
  padding-top:18px;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#68727d;
  font-size:11px;
}

/* =========================================================
   FOCUS STATES
========================================================= */

.faq-question:focus-visible,
.review-arrows button:focus-visible,
.menu-toggle:focus-visible,
.mobile-nav__close:focus-visible{
  outline:2px solid var(--blue-bright);
  outline-offset:3px;
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:1059px){
  .hero-grid{
    column-gap:52px;
  }

  .hero-title{
    font-size:clamp(39px,4.15vw,47px);
  }

  .hero-product img{
    width:min(100%,500px);
  }

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

  .comparison-copy{
    max-width:700px;
  }

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

@media(max-width:860px){
  .site-header__inner{
    grid-template-columns:1fr auto;
  }

  .desktop-nav{
    display:none;
  }

  .menu-toggle{
    display:block;
  }

  .mobile-nav-backdrop{
    display:block;
  }

  .mobile-nav{
    display:flex;
  }

  .hero,
  .hero-grid{
    min-height:auto;
  }

  .hero-grid,
  .story-grid,
  .benefits-grid{
    grid-template-columns:1fr;
  }

  .hero-grid{
    padding:54px 0 30px;
  }

  .hero-copy{
    max-width:650px;
  }

  .hero-product{
    min-height:400px;
  }

  .story-content{
    max-width:none;
  }

  .benefit-list{
    grid-template-columns:1fr 1fr;
  }

  .benefits-product{
    min-height:390px;
  }

  .benefits-product img{
    max-height:330px;
  }

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

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

  .footer-brand{
    grid-column:1/-1;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:620px){
  .container{
    width:calc(100% - 28px);
  }

  .promo-bar__inner{
    gap:5px;
    font-size:10px;
  }

  .brand{
    font-size:19px;
  }

  .hero-grid{
    width:calc(100% - 28px);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding-top:34px;
    padding-bottom:26px;
  }

  .hero-copy,
  .hero-product{
    width:100%;
    max-width:100%;
  }

  .rating-line{
    align-items:flex-start;
    gap:9px;
    margin-bottom:15px;
    font-size:11px;
    line-height:1.45;
  }

  .stars{
    font-size:15px;
  }

  .hero-title{
    width:100%;
    max-width:none;
    font-size:clamp(28px,8.05vw,30px);
    line-height:1.07;
    letter-spacing:-.01em;
    font-weight:810;
  }

  .hero-title > span,
  .hero-title > strong{
    width:100%;
    white-space:nowrap;
  }

  .hero-feature-row{
    width:100%;
    justify-content:center;
    align-items:center;
    gap:10px 14px;
    margin-top:21px;
    text-align:center;
  }

  .hero-feature{
    justify-content:center;
    font-size:11px;
  }

  .feature-check{
    width:21px;
    height:21px;
  }

  .feature-check__inner{
    width:20px;
    height:20px;
  }

  .feature-check__inner svg{
    width:11px;
    height:11px;
  }

  .hero-main-cta{
    width:100%;
    min-height:56px;
    margin-top:23px;
    margin-inline:auto;
    font-size:11px;
  }

  .hero-copy > .guarantee-line{
    width:100%;
    justify-content:center;
    margin-top:14px;
    text-align:center;
    font-size:10.5px;
  }

  .hero-product{
    min-height:235px;
    margin-top:8px;
    padding:6px 0 2px;
  }

  .hero-product__glow{
    width:82%;
  }

  .hero-product img{
    width:100%;
    max-width:400px;
    max-height:225px;
    object-fit:contain;
    margin-inline:auto;
    transform:none;
  }

  .story-section,
  .reviews-section,
  .benefits-section,
  .comparison-section,
  .numbers-section,
  .risk-section,
  .faq-section{
    padding:70px 0;
  }

  .section-head h2,
  .story-content h2,
  .benefits-copy h2,
  .comparison-copy h2,
  .risk-card h2{
    font-size:33px;
  }

  .story-grid{
    gap:34px;
  }

  .story-image img{
    aspect-ratio:.94;
  }

  .review-card{
    flex-basis:86vw;
    min-height:245px;
    padding:23px;
  }

  .benefit-list{
    grid-template-columns:1fr;
    gap:22px;
  }

  .benefits-grid{
    gap:36px;
  }

  .benefits-product{
    min-height:300px;
    padding:26px 18px;
    overflow:hidden;
  }

  .benefits-product img{
    width:96%;
    max-height:270px;
  }

  .comparison-table{
    border-radius:8px;
  }

  .comparison-row{
    grid-template-columns:1.15fr .62fr .78fr;
    min-height:62px;
  }

  .comparison-row > *{
    padding:11px 9px;
  }

  .comparison-row > span:first-child{
    font-size:10.5px;
  }

  .comparison-head strong{
    font-size:11px;
  }

  .stats-grid{
    grid-template-columns:1fr 1fr;
    gap:38px 14px;
    margin-top:42px;
  }

  .stats-grid article{
    padding:0;
  }

  .stats-grid strong{
    font-size:54px;
  }

  .stats-grid p{
    margin-top:14px;
    font-size:11px;
    line-height:1.45;
  }

  .faq-question{
    min-height:58px;
    padding:0 15px;
    font-size:13px;
  }

  .faq-answer p{
    padding-inline:15px;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:34px 24px;
  }

  .footer-brand{
    grid-column:1/-1;
  }

  .footer-bottom{
    flex-direction:column;
  }
}

@media(max-width:390px){
  .hero-title{
    font-size:clamp(25px,7.7vw,29px);
  }

  .hero-feature-row{
    gap:9px 12px;
  }

  .hero-feature{
    font-size:10.5px;
  }

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

  .stats-grid strong{
    font-size:62px;
  }

  .comparison-row{
    grid-template-columns:1.12fr .58fr .76fr;
  }

  .comparison-row > *{
    padding:10px 7px;
  }
}

/* =========================================================
   MOTION
========================================================= */

@media(prefers-reduced-motion:no-preference){
  .hero-copy{
    animation:fadeUp .65s ease both;
  }

  .hero-product img{
    animation:productIn .85s cubic-bezier(.2,.8,.2,1) both;
  }

  @keyframes fadeUp{
    from{
      opacity:0;
      transform:translateY(12px);
    }
    to{
      opacity:1;
      transform:translateY(0);
    }
  }

  @keyframes productIn{
    from{
      opacity:0;
      transform:translate(24px,8px);
    }
    to{
      opacity:1;
      transform:translate(0,0);
    }
  }
}


/* =========================================================
   MOBILE STORY ORDER
   Text first, image second
========================================================= */
@media(max-width:620px){
  .story-grid{
    display:flex;
    flex-direction:column;
  }

  .story-content{
    order:1;
  }

  .story-image{
    order:2;
  }
}