/* ===========================================================
   Elegant Success Impressions — 3X Performance Toolkit
   Landing page styles
   =========================================================== */

:root{
  --navy:#24397C; --navy-d:#1a2b62; --sky:#C9E3F1; --sky-soft:#EAF2FB;
  --ink:#1A2138; --muted:#5a6478; --line:#DDE7F2; --bg-soft:#F1F6FB;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;font-family:'Source Sans 3',system-ui,sans-serif;color:#1A2138;line-height:1.6}
a{text-decoration:none}
img{max-width:100%}

/* Placeholder blocks (product mockups / headshots supplied later) */
.ph{position:relative;background-image:repeating-linear-gradient(135deg,rgba(36,57,124,.07) 0 10px,rgba(36,57,124,0) 10px 20px);display:flex;align-items:center;justify-content:center}
.ph span{font:600 11px ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;opacity:.55;color:#24397C}

/* Lucide icons render as block-level svgs */
svg.lucide{display:block}

/* ---- Keyframes ---- */
@keyframes esiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes esiFloatB{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-22px) rotate(8deg)}}
@keyframes esiSpin{to{transform:rotate(360deg)}}
@keyframes esiNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
@keyframes esiPulseRing{0%{transform:scale(.85);opacity:.5}100%{transform:scale(1.6);opacity:0}}
@keyframes esiReveal{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ---- Scroll reveal (progressive enhancement) ----
   Elements are only hidden when JS is active (html.js). The
   IntersectionObserver in main.js adds .in to trigger the reveal.
   Using `animation` (not `transition`) avoids clashing with the
   inline `transition` declarations used for hover states.        */
html.js [data-reveal]{opacity:0}
html.js [data-reveal].in{animation:esiReveal .8s cubic-bezier(.16,.84,.44,1) both}

/* ===========================================================
   Responsive
   The markup is built on inline styles (exported from the design
   tool), so fluid type and gutters use class hooks + !important
   to win over inline values. Headings scale smoothly with
   clamp() rather than snapping at hard breakpoints; the clamp
   max in every rule equals the original desktop size, so the
   desktop design is unchanged.
   =========================================================== */

/* Fluid section / nav gutters (replaces the fixed 56px) */
.sec{padding-left:clamp(20px,5vw,56px) !important;padding-right:clamp(20px,5vw,56px) !important}
.nav{padding-left:clamp(20px,5vw,56px) !important;padding-right:clamp(20px,5vw,56px) !important}

/* Fluid headings — max = original px, scaling down toward mobile */
.hero-title{font-size:clamp(2rem,1.1rem + 5vw,3.875rem) !important}
.hd-48{font-size:clamp(1.9rem,1.3rem + 3vw,3rem) !important}
.hd-42{font-size:clamp(1.75rem,1.25rem + 2.5vw,2.625rem) !important}
.hd-40{font-size:clamp(1.7rem,1.25rem + 2.3vw,2.5rem) !important}
.hd-38{font-size:clamp(1.55rem,1.2rem + 1.9vw,2.375rem) !important}
.hd-37{font-size:clamp(1.5rem,1.2rem + 1.8vw,2.3125rem) !important}
.hd-36{font-size:clamp(1.5rem,1.2rem + 1.7vw,2.25rem) !important}
.hd-30{font-size:clamp(1.35rem,1.15rem + 1.2vw,1.875rem) !important}

/* Pricing card breathes on small screens */
.price-card{padding:clamp(28px,5vw,48px) !important}

/* Tablet: drop to two- and one-column layouts */
@media (max-width:980px){
  .nav{flex-wrap:wrap;gap:14px}
  .nav-links{gap:18px !important;flex-wrap:wrap;justify-content:center}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr) !important}
  .grid-2,.coach-grid,.transform-grid{grid-template-columns:1fr !important}
  .transform-arrow{padding:18px 0 !important}
}

/* Phone: single column + tighter vertical rhythm */
@media (max-width:620px){
  .sec{padding-top:54px !important;padding-bottom:54px !important}
  .grid-3,.grid-4{grid-template-columns:1fr !important}
  .bonus{flex-direction:column !important;padding:30px !important}
  .bonus .ph{width:100% !important}
}

/* ===========================================================
   MOBILE NAV — "morphing pill dropdown"
   The hamburger morphs into an X and the sticky header extends
   downward into a floating card. Hidden above 980px; the desktop
   .nav-links are untouched there.
   =========================================================== */

/* Hamburger toggle — desktop hides it */
.nav-toggle{display:none;width:46px;height:46px;flex:none;border:1px solid var(--line);
  border-radius:13px;background:#fff;cursor:pointer;padding:0;place-items:center;
  box-shadow:0 4px 14px rgba(36,57,124,.07);transition:background .3s,border-color .3s,box-shadow .3s}
.nav-toggle-bars{position:relative;display:block;width:20px;height:14px}
.nav-toggle-bars span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;
  background:var(--navy);transition:transform .34s cubic-bezier(.65,.05,.2,1),
  opacity .2s ease,background .3s}
.nav-toggle-bars span:nth-child(1){top:0}
.nav-toggle-bars span:nth-child(2){top:6px}
.nav-toggle-bars span:nth-child(3){top:12px}
/* Open state — fill navy, morph bars into an X */
body.nav-open .nav-toggle{background:var(--navy);border-color:var(--navy);
  box-shadow:0 10px 24px rgba(36,57,124,.28)}
body.nav-open .nav-toggle-bars span{background:#fff}
body.nav-open .nav-toggle-bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .nav-toggle-bars span:nth-child(2){opacity:0;transform:scaleX(.2)}
body.nav-open .nav-toggle-bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Dropdown card — anchored to the hamburger (top-right) */
.mobile-nav{position:absolute;top:calc(100% + 12px);right:clamp(20px,5vw,56px);
  left:clamp(20px,5vw,56px);max-width:380px;margin-left:auto;z-index:60;
  background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  padding:8px;box-shadow:0 26px 60px rgba(20,30,60,.22),0 4px 14px rgba(20,30,60,.08);
  transform-origin:top right;transform:translateY(-12px) scale(.95);opacity:0;
  transition:transform .38s cubic-bezier(.16,.84,.44,1),opacity .26s ease}
.mobile-nav[hidden]{display:none}
/* Sky glow in the corner for depth */
.mobile-nav::before{content:"";position:absolute;top:-40px;right:-40px;width:160px;height:160px;
  border-radius:50%;background:radial-gradient(circle,rgba(201,227,241,.6),transparent 70%);
  pointer-events:none;z-index:0}
body.nav-open .mobile-nav{transform:translateY(0) scale(1);opacity:1}

/* Link rows */
.mobile-nav a{position:relative;z-index:1;display:flex;align-items:center;gap:14px;
  padding:15px 14px;color:var(--ink);border-radius:12px;
  transition:background .25s,transform .25s,padding .25s}
.mobile-nav a:not(.mn-cta) + a:not(.mn-cta){border-top:1px dashed #eef2f8}
.mobile-nav .mn-num{flex:none;width:30px;font-family:'Newsreader';font-style:italic;
  font-weight:500;font-size:18px;color:var(--navy);font-feature-settings:"tnum";
  transition:color .25s}
.mobile-nav .mn-label{position:relative;font-family:'Libre Franklin';font-weight:700;
  font-size:18px;letter-spacing:-.01em}
.mobile-nav .mn-label::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:2px;
  border-radius:2px;background:var(--navy);transition:width .3s cubic-bezier(.16,.84,.44,1)}
.mobile-nav .mn-ic{margin-left:auto;color:#b9c4da;width:18px;height:18px;transition:color .25s,transform .25s}
.mobile-nav .mn-ic svg{width:18px;height:18px;display:block}
/* Hover / active nudge */
.mobile-nav a:not(.mn-cta):hover,.mobile-nav a:not(.mn-cta):focus-visible{
  background:var(--sky-soft);transform:translateX(4px);outline:none}
.mobile-nav a:not(.mn-cta):hover .mn-num,.mobile-nav a:not(.mn-cta):focus-visible .mn-num{color:#7aa0e0}
.mobile-nav a:not(.mn-cta):hover .mn-label::after,
.mobile-nav a:not(.mn-cta):focus-visible .mn-label::after{width:100%}
.mobile-nav a:not(.mn-cta):hover .mn-ic,.mobile-nav a:not(.mn-cta):focus-visible .mn-ic{
  color:var(--navy);transform:translateX(3px)}

/* CTA pinned at the base, full width */
.mobile-nav .mn-cta{justify-content:center;gap:9px;margin-top:8px;
  font:800 16px 'Source Sans 3';color:#fff;background:var(--navy);padding:15px 20px;
  border-radius:12px;box-shadow:0 12px 26px rgba(36,57,124,.26);transition:.25s}
.mobile-nav .mn-cta svg{width:18px;height:18px}
.mobile-nav .mn-cta:hover{background:var(--navy-d);transform:translateY(-2px)}

/* Staggered entrance */
body.nav-open .mobile-nav a{animation:esiMnRow .5s cubic-bezier(.16,.84,.44,1) both}
body.nav-open .mobile-nav a:nth-child(1){animation-delay:.06s}
body.nav-open .mobile-nav a:nth-child(2){animation-delay:.11s}
body.nav-open .mobile-nav a:nth-child(3){animation-delay:.16s}
body.nav-open .mobile-nav a:nth-child(4){animation-delay:.21s}
body.nav-open .mobile-nav a:nth-child(5){animation-delay:.28s}
@keyframes esiMnRow{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* Scrim */
.nav-scrim{position:fixed;inset:0;z-index:40;background:rgba(20,28,58,.34);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .32s ease}
.nav-scrim[hidden]{display:none}
body.nav-open .nav-scrim{opacity:1}
body.nav-open{overflow:hidden}

/* Show the hamburger / hide the desktop links below 980px and
   neutralise the old wrap rules so the header stays one clean row */
@media (max-width:980px){
  .nav{flex-wrap:nowrap}
  .nav-links{display:none !important}
  .nav-toggle{display:grid}
}

/* ===========================================================
   ENHANCEMENTS — atmosphere, product mockups, social proof,
   conversion elements and micro-interactions.
   =========================================================== */

/* ---- Grain texture over the whole page ---- */
.grain{
  position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.04;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Top scroll-progress bar ---- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:101;
  background:linear-gradient(90deg,var(--navy),#5f7fd6,var(--sky));
  box-shadow:0 1px 6px rgba(36,57,124,.4);transition:width .1s linear;
}

/* ---- Primary CTA shine sweep ---- */
.cta{position:relative;overflow:hidden;isolation:isolate}
.cta::after{
  content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);transition:left .6s cubic-bezier(.2,.7,.3,1);
}
.cta:hover::after{left:130%}

/* ---- Sticky buy-bar (slides up on scroll) ---- */
.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  transform:translateY(120%);transition:transform .45s cubic-bezier(.16,.84,.44,1);
  background:rgba(255,255,255,.86);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(20,30,60,.1);
}
.buybar.show{transform:translateY(0)}
.buybar-in{max-width:1000px;margin:0 auto;padding:12px clamp(16px,5vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.buybar-info{display:flex;flex-direction:column;line-height:1.25}
.buybar-info strong{font:800 15px 'Libre Franklin';color:var(--ink)}
.buybar-info span{font:600 13px 'Source Sans 3';color:var(--muted)}
.buybar-price{font-family:'Libre Franklin';font-weight:900;color:var(--navy)}
.buybar-btn{display:inline-flex;align-items:center;gap:8px;flex:none;
  font:800 15px 'Source Sans 3';color:#fff;background:var(--navy);
  padding:13px 22px;border-radius:11px;box-shadow:0 10px 22px rgba(36,57,124,.28);transition:.25s}
.buybar-btn:hover{background:var(--navy-d);transform:translateY(-2px)}

/* ---- Hero proof cluster (avatars + rating) ---- */
.proof{display:inline-flex;align-items:center;gap:14px;margin:6px auto 0;
  padding:8px 16px 8px 8px;background:#fff;border:1px solid var(--line);
  border-radius:100px;box-shadow:0 6px 18px rgba(36,57,124,.08)}
.avatars{display:flex}
.avatars span{width:34px;height:34px;border-radius:50%;margin-left:-10px;
  border:2px solid #fff;display:grid;place-items:center;
  font:800 12px 'Libre Franklin';color:#fff}
.avatars span:first-child{margin-left:0}
.avatars span:nth-child(1){background:linear-gradient(135deg,#3a55a8,#24397C)}
.avatars span:nth-child(2){background:linear-gradient(135deg,#5b7fd0,#3a55a8)}
.avatars span:nth-child(3){background:linear-gradient(135deg,#7aa0e0,#5b7fd0)}
.avatars span:nth-child(4){background:linear-gradient(135deg,#9ab6e6,#7aa0e0)}
.avatars span.more{background:var(--sky);color:var(--navy)}
.proof-text{text-align:left;line-height:1.15}
.proof-stars{display:flex;gap:2px;color:#f5a623;margin-bottom:2px}
.proof-stars svg{width:14px;height:14px;fill:#f5a623}
.proof-text small{font:600 12.5px 'Source Sans 3';color:var(--muted)}
.proof-text b{color:var(--ink)}

/* ---- Hero product mockup (the "3X Planner") ---- */
.mock{position:relative;border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(180deg,#fff,#fbfdff);overflow:hidden;
  box-shadow:0 30px 70px rgba(20,30,60,.18);text-align:left}
.mock-bar{display:flex;align-items:center;gap:8px;padding:13px 18px;
  border-bottom:1px solid var(--line);background:#fff}
.mock-bar .d{width:10px;height:10px;border-radius:50%}
.mock-bar .d1{background:#ff6058}.mock-bar .d2{background:#ffbd2e}.mock-bar .d3{background:#28c840}
.mock-title{margin-left:8px;font:700 12.5px 'Source Sans 3';color:var(--muted)}
.mock-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font:800 10px 'Source Sans 3';letter-spacing:.1em;color:var(--navy);
  background:var(--sky-soft);padding:4px 9px;border-radius:100px}
.mock-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#28c840;
  box-shadow:0 0 0 0 rgba(40,200,64,.6);animation:esiBlip 1.6s ease-out infinite}
@keyframes esiBlip{0%{box-shadow:0 0 0 0 rgba(40,200,64,.5)}100%{box-shadow:0 0 0 7px rgba(40,200,64,0)}}
.mock-body{display:grid;grid-template-columns:1.35fr 1fr;gap:0}
.mock-tasks{padding:20px;border-right:1px solid var(--line)}
.mock-stats{padding:20px;display:flex;flex-direction:column;gap:16px;background:#fbfdff}
.mock-h{font:800 10.5px 'Source Sans 3';letter-spacing:.12em;text-transform:uppercase;
  color:#9aa6bd;margin:0 0 12px}
.mock-h.mt{margin-top:20px}
.task{display:flex;align-items:center;gap:11px;padding:9px 0;font:600 13.5px 'Source Sans 3';color:var(--ink)}
.task + .task{border-top:1px dashed #eef2f8}
.tbox{width:19px;height:19px;border-radius:6px;border:2px solid #cdd9ec;flex:none;display:grid;place-items:center}
.task.done .tbox{background:var(--navy);border-color:var(--navy)}
.task.done .tbox svg{width:12px;height:12px;color:#fff}
.task.done span{color:var(--muted);text-decoration:line-through;text-decoration-color:#c7d0e0}
.tprio{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--sky)}
.streaks{display:flex;gap:5px;margin-top:4px}
.streaks i{width:22px;height:22px;border-radius:6px;background:var(--sky-soft);
  display:grid;place-items:center;font:800 10px 'Libre Franklin';color:var(--navy)}
.streaks i.on{background:var(--navy);color:#fff}
.ring{width:104px;height:104px;border-radius:50%;align-self:center;position:relative;
  background:conic-gradient(var(--navy) 0 76%,#e6ecf7 76% 100%);display:grid;place-items:center}
.ring::before{content:"";position:absolute;inset:11px;border-radius:50%;background:#fbfdff}
.ring b{position:relative;font:900 26px 'Libre Franklin';color:var(--navy);line-height:1}
.ring small{position:relative;display:block;text-align:center;font:700 9px 'Source Sans 3';
  letter-spacing:.12em;text-transform:uppercase;color:#9aa6bd;margin-top:2px}
.bars{display:flex;align-items:flex-end;gap:7px;height:64px}
.bars i{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#9ab6e6,#c9d8f1)}
.bars i:last-child{background:linear-gradient(180deg,var(--navy),#3a55a8)}
.mock-kpi{display:flex;align-items:center;gap:8px;font:700 12px 'Source Sans 3';color:var(--ink)}
.mock-kpi svg{width:16px;height:16px;color:#28c840}
.mock-kpi b{color:var(--navy)}

/* ---- Brand marquee ---- */
.brands{padding:34px 56px !important;border-top:1px solid #EEF3F9;background:#fff}
.brands-label{text-align:center;font:700 11.5px 'Source Sans 3';letter-spacing:.16em;
  text-transform:uppercase;color:#9aa6bd;margin:0 0 20px}
.marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;width:max-content;gap:64px;animation:esiMarquee 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{display:inline-flex;align-items:center;gap:9px;flex:none;
  font:800 21px 'Libre Franklin';color:#b3bed3;letter-spacing:-.01em;transition:color .3s}
.marquee-track span:hover{color:var(--navy)}
.marquee-track span svg{width:18px;height:18px}
@keyframes esiMarquee{to{transform:translateX(-50%)}}

/* ---- Coach portrait (designed monogram frame) ---- */
.portrait{position:relative;height:430px;border-radius:20px;overflow:hidden;
  background:radial-gradient(120% 90% at 30% 10%,#33509c,var(--navy) 55%,var(--navy-d));
  display:grid;place-items:center;border:1px solid var(--line)}
.portrait::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.10) 1.3px,transparent 1.3px);
  background-size:22px 22px}
.portrait-ring{position:absolute;width:260px;height:260px;border-radius:50%;
  border:1.5px dashed rgba(201,227,241,.4);animation:esiSpin 26s linear infinite}
.portrait-av{position:relative;width:170px;height:170px;border-radius:50%;
  background:linear-gradient(160deg,#dceaf8,#9fc0ea);display:grid;place-items:center;
  font:800 64px 'Libre Franklin';color:var(--navy);
  box-shadow:0 20px 50px rgba(0,0,0,.3),inset 0 2px 8px rgba(255,255,255,.6)}
.pchip{position:absolute;display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.95);border-radius:100px;padding:7px 12px;
  font:800 11px 'Source Sans 3';color:var(--navy);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.pchip svg{width:13px;height:13px}
.pchip-1{top:42px;left:26px;animation:esiFloat 5s ease-in-out infinite}
.pchip-2{bottom:70px;right:24px;animation:esiFloatB 6.5s ease-in-out infinite}
.pchip-3{top:120px;right:34px;animation:esiFloat 7s ease-in-out infinite}

/* ---- Bonus: CXO planner mockup ---- */
.planner{position:relative;width:240px;height:200px;flex:none}
.planner-card{position:absolute;border-radius:14px;background:#fff;
  border:1px solid var(--line);box-shadow:0 16px 36px rgba(20,30,60,.16);padding:18px}
.planner-back{inset:18px 0 0 26px;background:linear-gradient(160deg,#eaf2fb,#dbe7f7);transform:rotate(-6deg)}
.planner-front{inset:0 26px 18px 0}
.planner-front .pl-ic{width:38px;height:38px;border-radius:10px;background:var(--navy);
  display:grid;place-items:center;margin-bottom:12px}
.planner-front .pl-ic svg{width:20px;height:20px;color:var(--sky)}
.planner-front .pl-t{font:800 14px 'Libre Franklin';color:var(--ink);margin-bottom:10px}
.planner-front .pl-l{height:7px;border-radius:4px;background:#eef2f8;margin-bottom:7px}
.planner-front .pl-l.s{width:70%}.planner-front .pl-l.m{width:90%}
.planner-badge{position:absolute;top:-12px;right:-10px;z-index:2;
  background:var(--navy);color:#fff;font:800 11px 'Source Sans 3';
  padding:6px 12px;border-radius:100px;box-shadow:0 10px 22px rgba(36,57,124,.3)}

/* ---- Pricing: value anchor ---- */
.price-anchor{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 8px}
.price-anchor .strike{font:600 16px 'Source Sans 3';color:#9aa6bd;text-decoration:line-through}
.price-anchor .save{font:800 11px 'Source Sans 3';letter-spacing:.06em;color:#fff;
  background:linear-gradient(135deg,#2f9e5b,#23864a);padding:5px 11px;border-radius:100px;
  box-shadow:0 6px 14px rgba(35,134,74,.3)}
.price-trust{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:16px;
  font:600 13px 'Source Sans 3';color:var(--muted)}
.price-trust .avatars span{width:28px;height:28px;font-size:10px}

/* ---- Soft glow blobs ---- */
.glow{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0}

/* ===========================================================
   CONVERSION ROUND 2 — how-it-works, value stack, payment
   trust, guarantee, ratings + richer testimonials.
   =========================================================== */

/* ---- How it works (3 steps) ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1000px;margin:0 auto;position:relative}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 26px 26px;transition:.3s}
.step:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(36,57,124,.12);border-color:var(--sky)}
.step-n{position:absolute;top:-16px;left:26px;width:42px;height:42px;border-radius:12px;background:var(--navy);
  color:#fff;display:grid;place-items:center;font:900 18px 'Libre Franklin';box-shadow:0 10px 22px rgba(36,57,124,.3)}
.step-ic{width:46px;height:46px;border-radius:12px;background:var(--sky-soft);color:var(--navy);
  display:grid;place-items:center;margin:14px 0 16px}
.step-ic svg{width:24px;height:24px}
.step h3{font-family:'Libre Franklin';font-weight:700;font-size:19px;color:var(--ink);margin:0 0 7px}
.step p{font-size:15px;color:var(--muted);margin:0}
.step-link{position:absolute;top:44px;right:-15px;color:#cdd9ec;z-index:2}
.step-link svg{width:28px;height:28px}

/* ---- Value stack (inside the pricing card) ---- */
.vstack{text-align:left;margin:0 0 22px;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.vstack-h{font:800 11px 'Source Sans 3';letter-spacing:.1em;text-transform:uppercase;color:#9aa6bd;
  background:var(--bg-soft);padding:11px 16px;margin:0;border-bottom:1px solid var(--line)}
.vrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 16px;
  font:600 14px 'Source Sans 3';color:var(--ink)}
.vrow + .vrow{border-top:1px dashed #eef2f8}
.vrow .vi{display:flex;align-items:center;gap:9px}
.vrow .vi svg{width:15px;height:15px;color:var(--navy);flex:none}
.vrow .vp{color:var(--muted);font-weight:700;white-space:nowrap}
.vrow.b{background:#f3f9f4}
.vrow.b .vi svg{color:#23864a}
.vrow.b em{font-style:normal;font:800 9px 'Source Sans 3';letter-spacing:.05em;color:#23864a;
  background:#dff1e4;padding:2px 7px;border-radius:100px;margin-left:7px}
.vrow.b .vp s{color:#9aa6bd;font-weight:600;margin-right:6px}
.vrow.b .vp b{color:#23864a}
.vtotal{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;
  background:var(--navy);color:#fff;font:700 14px 'Source Sans 3'}
.vtotal s{color:#9bb6e6}

/* ---- Payment trust row ---- */
.paytrust{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;margin:14px 0 0}
.pt-lock{display:inline-flex;align-items:center;gap:6px;font:600 12.5px 'Source Sans 3';color:var(--muted)}
.pt-lock svg{width:14px;height:14px;color:#23864a}
.paychip{font:800 10.5px 'Source Sans 3';color:#5a6478;background:#fff;border:1px solid var(--line);
  border-radius:7px;padding:5px 9px}

/* ---- Guarantee band ---- */
.guarantee{display:flex;align-items:center;gap:24px;max-width:760px;margin:26px auto 0;background:#fff;
  border:1px solid var(--line);border-radius:20px;padding:26px 30px;box-shadow:0 16px 40px rgba(20,30,60,.08)}
.guarantee .seal{flex:none;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#eafaf0,#cdeedd);border:2px solid #bfe6cf;color:#23864a}
.guarantee .seal svg{width:40px;height:40px}
.guarantee h3{font-family:'Libre Franklin';font-weight:800;font-size:21px;color:var(--ink);margin:0 0 5px}
.guarantee p{font-size:15px;color:var(--muted);margin:0}

/* ---- Ratings summary (testimonials) ---- */
.ratings{display:inline-flex;align-items:center;gap:11px;margin:0 auto 16px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 18px}
.ratings .rs{display:flex;gap:2px}
.ratings .rs svg{width:16px;height:16px;color:#f5a623;fill:#f5a623}
.ratings b{font-family:'Libre Franklin';font-weight:800;color:#fff;font-size:16px}
.ratings span{font:600 13px 'Source Sans 3';color:#bcd0ee}

/* ---- Richer testimonial cards ---- */
.tchip{display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;font:800 11.5px 'Source Sans 3';
  color:#23864a;background:#eaf7ee;border-radius:100px;padding:5px 11px}
.tchip svg{width:13px;height:13px}
.tmeta{display:flex;align-items:center;gap:11px;margin-top:2px}
.tav{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  font:800 14px 'Libre Franklin';color:#fff;background:linear-gradient(135deg,#3a55a8,#24397C)}

/* ---- Enhancement responsiveness ---- */
@media (max-width:760px){
  .mock-body{grid-template-columns:1fr}
  .mock-tasks{border-right:none;border-bottom:1px solid var(--line)}
  .mock-stats{flex-direction:row;align-items:center;flex-wrap:wrap}
  .buybar-info span{display:none}
  .brands{padding-left:clamp(20px,5vw,56px) !important;padding-right:clamp(20px,5vw,56px) !important}
  .marquee-track{gap:42px}
  .marquee-track span{font-size:18px}
  .steps{grid-template-columns:1fr;gap:30px}
  .step-link{display:none}
  .guarantee{flex-direction:column;text-align:center;gap:16px}
}

/* ===========================================================
   HERO — asymmetric editorial split
   =========================================================== */
.hero{padding-top:78px;padding-bottom:96px;
  background:
    radial-gradient(58% 50% at 82% -5%, #E7F0FB, transparent 60%),
    radial-gradient(46% 42% at 2% 28%, #EFF5FC, transparent 55%),
    linear-gradient(180deg,#F7FAFD 0%,#fff 70%)}
.hero-dots{position:absolute;inset:0;z-index:0;
  background-image:radial-gradient(circle,#cdd9ec 1.4px,transparent 1.4px);background-size:30px 30px;opacity:.35;
  -webkit-mask-image:radial-gradient(80% 70% at 60% 25%,#000,transparent);
  mask-image:radial-gradient(80% 70% at 60% 25%,#000,transparent)}
.hero-grid{position:relative;z-index:2;max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:center;text-align:left}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start}
.hero-badge{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:100px;padding:8px 18px;font:600 12.5px 'Source Sans 3';color:var(--navy);
  letter-spacing:.02em;margin-bottom:24px;box-shadow:0 4px 14px rgba(36,57,124,.07)}
.hero-badge svg{width:15px;height:15px}
.hero-copy .hero-title{font-family:'Libre Franklin';font-weight:800;line-height:1.03;
  letter-spacing:-.025em;color:var(--ink);margin:0 0 20px;max-width:14ch}
.hl{color:var(--navy);background:linear-gradient(transparent 58%,rgba(201,227,241,.7) 58%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 2px;border-radius:2px}
.hero-lead{font-size:20px;line-height:1.55;color:#51607a;margin:0 0 32px;max-width:44ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.hero-trust{display:flex;gap:14px 26px;flex-wrap:wrap;font:600 13.5px 'Source Sans 3';color:#5a6478;margin-bottom:22px}
.hero-trust span{display:inline-flex;align-items:center;gap:7px}
.hero-trust svg{width:16px;height:16px;color:var(--navy)}

.hero-visual{position:relative;z-index:2}
.hero-visual-bg{position:absolute;inset:-14% -12% -16% -8%;z-index:0;
  background:radial-gradient(120% 110% at 72% 16%,rgba(201,227,241,.6),transparent 64%)}
.mock-wrap{position:relative;z-index:1;
  transform:perspective(1600px) rotateY(-7deg) rotateX(2.5deg);
  transition:transform .6s cubic-bezier(.16,.84,.44,1)}
.hero-visual:hover .mock-wrap{transform:perspective(1600px) rotateY(-2deg) rotateX(1deg)}
.float{position:absolute;display:flex;align-items:center;gap:8px;border-radius:12px;padding:10px 14px;
  font:700 13px 'Source Sans 3';box-shadow:0 12px 28px rgba(20,30,60,.16);z-index:4}
.float svg{width:18px;height:18px}
.float-a{top:-20px;right:-16px;background:#fff;border:1px solid var(--line);color:var(--ink);
  animation:esiFloat 4.5s ease-in-out infinite}
.float-a svg{color:var(--navy)}
.float-b{bottom:-18px;left:-20px;background:var(--navy);color:#fff;
  animation:esiFloatB 5.5s ease-in-out infinite}
.float-b svg{color:var(--sky)}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:50px;text-align:center}
  .hero-copy{align-items:center}
  .hero-copy .hero-title,.hero-lead{max-width:18ch}
  .hero-lead{max-width:46ch}
  .hero-cta,.hero-trust{justify-content:center}
  .hero-visual{max-width:540px;margin:0 auto;width:100%}
  .mock-wrap,.hero-visual:hover .mock-wrap{transform:none}
}
@media (max-width:430px){
  .float-a{right:-4px}.float-b{left:-4px}
  .float{font-size:12px;padding:8px 11px}
}

/* ===========================================================
   FAQ — native accordion
   =========================================================== */
.faq{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:22px 4px;font-family:'Libre Franklin';font-weight:700;font-size:18px;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-q{display:flex;align-items:center;gap:14px}
.faq-q svg{width:21px;height:21px;color:var(--navy);flex:none}
.faq-chev{color:#9aa6bd;flex:none;transition:transform .3s ease,color .3s}
.faq-chev svg{width:20px;height:20px;display:block}
.faq-item[open] .faq-chev{transform:rotate(180deg);color:var(--navy)}
.faq-a{padding:0 4px 24px 39px}
.faq-a p{font-size:16px;color:var(--muted);margin:0}
.faq-item[open] .faq-a{animation:esiReveal .35s cubic-bezier(.16,.84,.44,1) both}
.faq-item summary:hover .faq-q{color:var(--navy)}
@media (max-width:520px){
  .faq-item summary{font-size:16px;gap:12px}
  .faq-a{padding-left:4px}
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js [data-reveal]{opacity:1}
  *{animation:none !important}
  .cta::after{display:none}
  .mock-wrap,.hero-visual:hover .mock-wrap{transform:none}
  /* Mobile nav: instant show, no morph/stagger */
  .mobile-nav,.nav-toggle-bars span,.nav-scrim{transition:none !important}
  body.nav-open .mobile-nav{transform:none}
}