/* index-plus.css — landing page enhancements (v2.19). Loads after index-glass.css. Additive only. */

/* Align nav + footer with the page content column (they were 20px wider than the sections) */
.nav-inner,.footer .container{max-width:1200px}

/* Hero: the "one click" gradient used to fade to grey-blue; keep it warm and legible */
.ig-grad{background:linear-gradient(110deg,var(--amber2),var(--amber) 62%,#e07a2f);-webkit-background-clip:text;background-clip:text}
html[data-theme="light"] .ig-grad{background:linear-gradient(110deg,#a9640f,#b87316 60%,#c2561a);-webkit-background-clip:text;background-clip:text}

/* Scroll progress */
.ip-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:260;pointer-events:none;background:transparent}
.ip-progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--amber),var(--amber2));transform:scaleX(0);transform-origin:left;box-shadow:0 0 10px rgba(232,163,61,.55)}

/* Active section in the nav */
.nav-links a{position:relative}
.nav-links a.active{color:var(--text);background:rgba(232,163,61,.12)}
.nav-links a.active::after{content:"";position:absolute;left:50%;bottom:2px;width:14px;height:2px;margin-left:-7px;border-radius:2px;background:var(--amber)}

/* Proof strip */
.ip-proof{padding:clamp(40px,6vw,72px) 0 0}
.ip-proof-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border-radius:20px;overflow:hidden;border:1px solid var(--border);background:var(--border)}
.ip-stat{background:var(--surface);padding:26px 24px;display:flex;flex-direction:column;gap:6px;position:relative;transition:background-color .25s}
.ip-stat:hover{background:var(--elevated)}
.ip-stat b{font:800 clamp(2rem,3.6vw,2.7rem)/1 var(--f-display);letter-spacing:-.04em;color:var(--text);font-variant-numeric:tabular-nums}
.ip-stat b em{font-style:normal;color:var(--amber)}
.ip-stat span{font-size:.84rem;color:var(--text2);line-height:1.45}
.ip-stat small{font:600 .7rem var(--f-mono);color:var(--text3);text-transform:uppercase;letter-spacing:.08em}

/* CTA form: heading is centred, so centre the form and keep it tidy on phones */
.ig-cta-band .cta-email{margin:0 auto;max-width:480px}
.cta-input[aria-invalid="true"],.field input[aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 3px rgba(229,101,79,.18)}
.ip-hint{display:block;min-height:1.2em;margin-top:10px;font-size:.78rem;color:var(--text3);text-align:center}
.ip-hint.err{color:var(--red)}

/* Back to top */
.ip-top{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:240;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--amber);background:var(--nav-bg);border:1px solid var(--border-b);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:var(--shadow-md);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s,transform .25s,border-color .2s}
.ip-top.show{opacity:1;transform:none;pointer-events:auto}
.ip-top:hover{border-color:var(--amber)}
.toast-stack{bottom:76px}

/* Footer: slightly larger, easier-to-hit social icon */
.footer-social a{width:36px;height:36px}
.footer-social a svg{width:16px;height:16px}

@media(max-width:900px){.ip-proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.ip-stat{padding:20px 16px}.ig-cta-band .cta-email .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.ip-progress i{transition:none}.ip-top{transition:none}}
@media print{.ip-progress,.ip-top{display:none!important}}

/* ── v2.20 enhancements ── */
/* Skip link (keyboard / screen-reader) */
.ip-skip{position:fixed;left:16px;top:-60px;z-index:700;padding:10px 16px;border-radius:10px;background:var(--amber);color:#191008;font:600 .85rem var(--f-body);transition:top .2s}
.ip-skip:focus{top:12px;outline:2px solid var(--text);outline-offset:2px}

/* Why DashView: before / after */
.ip-cmp{display:grid;grid-template-columns:1fr 1fr;gap:1px;max-width:980px;margin:0 auto;border:1px solid var(--border);border-radius:20px;overflow:hidden;background:var(--border)}
.ip-cmp-col{background:var(--surface);padding:30px 30px 26px}
.ip-cmp-col.good{background:linear-gradient(180deg,rgba(232,163,61,.07),transparent 70%),var(--surface)}
.ip-cmp-col h3{display:flex;flex-direction:column;gap:8px;font-size:1.12rem;margin-bottom:18px}
.ip-cmp-tag{align-self:flex-start;font:600 .7rem var(--f-mono);text-transform:uppercase;letter-spacing:.08em;padding:3px 10px;border-radius:999px;border:1px solid var(--border)}
.ip-cmp-col.bad .ip-cmp-tag{color:var(--red);border-color:rgba(229,101,79,.35)}
.ip-cmp-col.good .ip-cmp-tag{color:var(--green);border-color:rgba(79,180,119,.4)}
.ip-cmp-col ul{display:grid;gap:0}
.ip-cmp-col li{display:grid;grid-template-columns:22px 1fr;gap:10px;padding:13px 0;border-top:1px solid var(--border);font-size:.93rem;line-height:1.5;color:var(--text2)}
.ip-cmp-col li:first-child{border-top:none}
.ip-cmp-col li i{font:700 .95rem/1.5 var(--f-mono);font-style:normal}
.ip-cmp-col.bad li i{color:var(--red)}
.ip-cmp-col.good li i{color:var(--green)}
.ip-cmp-col.good li{color:var(--text)}

/* Mobile sticky call-to-action */
.ip-sticky{display:none}
@media(max-width:720px){
  .ig-cta{flex-direction:column;align-items:stretch}
  .ig-cta .btn{width:100%}
  .ip-sticky{position:fixed;left:0;right:0;bottom:0;z-index:230;display:flex;gap:10px;padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:var(--nav-bg);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border-top:1px solid var(--border);transform:translateY(110%);transition:transform .3s cubic-bezier(.16,1,.3,1);visibility:hidden}
  .ip-sticky.show{transform:none;visibility:visible}
  .ip-sticky .btn{flex:1;padding:12px 10px}
  .ip-sticky.show ~ .ip-top{bottom:calc(76px + env(safe-area-inset-bottom))}
  .ip-sticky.show ~ .toast-stack{bottom:136px}
  body.has-sticky{padding-bottom:0}
}
@media(max-width:820px){.ip-cmp{grid-template-columns:1fr}.ip-cmp-col{padding:24px 22px 18px}}
@media(prefers-reduced-motion:reduce){.ip-sticky,.ip-skip{transition:none}}
@media print{.ip-sticky,.ip-skip{display:none!important}}

/* ═══════════ v2.21 — stronger motion (all of it off for prefers-reduced-motion) ═══════════ */
@media (prefers-reduced-motion:no-preference){
  /* Headline: words rise out of a blur, "one click" shimmers */
  @keyframes ipWord{0%{opacity:0;transform:translateY(.85em) rotateX(-70deg) scale(.9);filter:blur(14px)}55%{filter:blur(2px)}100%{opacity:1;transform:none;filter:blur(0)}}
  @keyframes ipShimmer{from{background-position:0% 50%}to{background-position:100% 50%}}
  .ig-h1 .word{animation:ipWord 1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i)*85ms + 150ms)}
  .ig-h1 .word.ig-grad{background-size:230% 100%;animation:ipWord 1s cubic-bezier(.16,1,.3,1) calc(var(--i)*85ms + 150ms) both,ipShimmer 5s ease-in-out 1.6s infinite alternate}

  /* Scroll reveals: bigger travel + scale; two-column sections slide in from opposite sides */
  .rv{opacity:0;transform:translate3d(0,46px,0) scale(.965);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
  .ig-two>.rv:first-child{transform:translate3d(-60px,26px,0) scale(.97)}
  .ig-two>.rv:last-child{transform:translate3d(60px,26px,0) scale(.97)}
  .ig-stage.rv{transform:perspective(1400px) translate3d(0,70px,0) rotateX(16deg) scale(.92);transform-origin:50% 100%;transition-duration:1.2s}
  .rv.in,.ig-two>.rv.in,.ig-stage.rv.in{opacity:1;transform:none}

  /* Hero: pointer-follow glow, mouse-parallax floating cards, scroll-parallax blobs */
  .ig-hero{position:relative}
  .ig-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(560px circle at var(--hx,72%) var(--hy,32%),rgba(232,163,61,.15),transparent 62%);opacity:var(--ho,0);transition:opacity .5s}
  .ig-hero>.ig-wrap{position:relative;z-index:1}
  .ig-blob.a{translate:0 calc(var(--ipsy,0)*-.09px)}
  .ig-blob.b{translate:0 calc(var(--ipsy,0)*.07px)}
  .ig-blob.c{translate:0 calc(var(--ipsy,0)*-.12px)}
  @keyframes ipFloat{from{transform:translate3d(0,-10px,0) rotate(-1.4deg)}to{transform:translate3d(0,13px,0) rotate(1.4deg)}}
  .ig-float{animation-name:ipFloat;translate:calc(var(--mx2,0)*16px) calc(var(--my2,0)*12px);transition:translate .4s cubic-bezier(.16,1,.3,1),box-shadow .25s}
  .ig-float.f2{translate:calc(var(--mx2,0)*-12px) calc(var(--my2,0)*-9px)}
  @keyframes ipChip{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}
  .ig-chips.in .ig-chip{animation:ipChip .6s cubic-bezier(.34,1.56,.64,1) both}
  .ig-chips.in .ig-chip:nth-child(2){animation-delay:.1s}.ig-chips.in .ig-chip:nth-child(3){animation-delay:.2s}

  /* Buttons: light sweep (hero CTA repeats on its own) + magnetic lift */
  .btn-primary{position:relative;overflow:hidden;isolation:isolate}
  .btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);transform:translateX(-130%)}
  .btn-primary:hover::after{transform:translateX(130%);transition:transform .75s cubic-bezier(.16,1,.3,1)}
  @keyframes ipShine{0%,70%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
  .ig-cta .btn-primary::after{animation:ipShine 5s 2.2s infinite}
  .ig-cta .btn{transition:translate .35s cubic-bezier(.16,1,.3,1),filter .2s,box-shadow .2s,background-color .25s,border-color .25s}

  /* Proof stats pop in one after another */
  @keyframes ipStat{from{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:none}}
  .ip-proof-grid.in .ip-stat{animation:ipStat .8s cubic-bezier(.16,1,.3,1) both}
  .ip-proof-grid.in .ip-stat:nth-child(2){animation-delay:.1s}.ip-proof-grid.in .ip-stat:nth-child(3){animation-delay:.2s}.ip-proof-grid.in .ip-stat:nth-child(4){animation-delay:.3s}

  /* Before / after rows slide in from their own side */
  @keyframes ipFromL{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
  @keyframes ipFromR{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
  .ip-cmp.in .bad li{animation:ipFromL .7s cubic-bezier(.16,1,.3,1) both}
  .ip-cmp.in .good li{animation:ipFromR .7s cubic-bezier(.16,1,.3,1) both}
  .ip-cmp.in li:nth-child(1){animation-delay:.2s}.ip-cmp.in li:nth-child(2){animation-delay:.32s}.ip-cmp.in li:nth-child(3){animation-delay:.44s}.ip-cmp.in li:nth-child(4){animation-delay:.56s}

  /* Steps: numbers spring in, cards tilt toward the pointer */
  @keyframes ipPop{0%{transform:scale(.2) rotate(-25deg);opacity:0}100%{transform:none;opacity:1}}
  .ig-steps3.in .ig-s .num{animation:ipPop .8s cubic-bezier(.34,1.56,.64,1) both}
  .ig-steps3.in .ig-s:nth-child(2) .num{animation-delay:.25s}.ig-steps3.in .ig-s:nth-child(3) .num{animation-delay:.5s}
  .ig-card.rv.in,.ig-s.rv.in{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .3s}
  .ig-card.rv.in:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}

  /* FAQ answers unfold, back-to-top bounces in */
  @keyframes ipFaq{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .ig-faq details[open] .a{animation:ipFaq .4s cubic-bezier(.16,1,.3,1)}
  .ip-top.show{animation:ipPop .5s cubic-bezier(.34,1.56,.64,1)}

  /* Final CTA band breathes */
  @keyframes ipBreathe{0%,100%{box-shadow:0 0 0 0 rgba(232,163,61,0)}50%{box-shadow:0 0 70px -10px rgba(232,163,61,.28)}}
  .ig-cta-band.in{animation:ipBreathe 5s ease-in-out 1s infinite}
}

/* ═══ iOS-style frosted glass: nav, glass cards, modal, toast, mobile bar ═══ */
:root{--ios-blur:blur(28px) saturate(180%);--ios-hair:rgba(255,255,255,.14);--ios-tint:rgba(30,30,34,.55)}
html[data-theme="light"]{--ios-hair:rgba(255,255,255,.75);--ios-tint:rgba(255,255,255,.62)}
.nav.scrolled,.nav.menu-open .nav-inner{background:var(--ios-tint);-webkit-backdrop-filter:var(--ios-blur);backdrop-filter:var(--ios-blur);border-bottom:.5px solid rgba(120,120,128,.32)}
.ig-glass{-webkit-backdrop-filter:var(--ios-blur);backdrop-filter:var(--ios-blur)}
.ig-win,.ig-ai,.ig-rec,.ig-cta-band{box-shadow:0 1px 0 var(--ios-hair) inset,0 24px 60px -24px rgba(0,0,0,.45)}
.ig-float{background:var(--ios-tint);-webkit-backdrop-filter:var(--ios-blur);backdrop-filter:var(--ios-blur);border:.5px solid var(--ios-hair)}
.modal-overlay{background:rgba(0,0,0,.28);-webkit-backdrop-filter:blur(12px) saturate(120%);backdrop-filter:blur(12px) saturate(120%)}
.modal-card,.toast{background:var(--ios-tint);-webkit-backdrop-filter:blur(40px) saturate(190%);backdrop-filter:blur(40px) saturate(190%);border:.5px solid var(--ios-hair);border-radius:26px}
.toast{border-radius:18px}
.ip-sticky,.ip-top{background:var(--ios-tint);-webkit-backdrop-filter:var(--ios-blur);backdrop-filter:var(--ios-blur);border-color:rgba(120,120,128,.32)}
@media(max-width:720px){.nav.menu-open{background:var(--ios-tint);-webkit-backdrop-filter:var(--ios-blur);backdrop-filter:var(--ios-blur)}.nav.menu-open .nav-links{background:transparent}}
@media (prefers-reduced-transparency:reduce){
  .nav.scrolled,.ig-glass,.ig-float,.modal-overlay,.modal-card,.toast,.ip-sticky,.ip-top{-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav.scrolled,.ig-float,.modal-card,.toast,.ip-sticky,.ip-top{background:var(--bg)}
}

/* ═══════════ v2.22 — smoothness & detailing (landing page) ═══════════ */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-spring:cubic-bezier(.34,1.56,.64,1)}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior-y:none;scrollbar-gutter:stable}
body{-webkit-tap-highlight-color:transparent}
::selection{background:rgba(232,163,61,.34);color:inherit}
img,svg{-webkit-user-drag:none}

/* warm, slim scrollbar */
html{scrollbar-width:thin;scrollbar-color:rgba(232,163,61,.55) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(160,150,140,.4);border-radius:11px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(232,163,61,.7);background-clip:padding-box;border:3px solid transparent}

/* keyboard focus: one consistent warm ring everywhere */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:10px}
[tabindex="-1"]:focus{outline:none}

/* page-to-page: soft cross-fade where the browser supports view transitions */
@view-transition{navigation:auto}
@keyframes ipVtOut{to{opacity:0;transform:scale(.995)}}
@keyframes ipVtIn{from{opacity:0;transform:scale(1.004)}}
::view-transition-old(root){animation:.18s ease-in both ipVtOut}
::view-transition-new(root){animation:.28s var(--ease-out) both ipVtIn}

/* GPU: blobs are already radial-gradients that fade to transparent — the extra 80px blur on three
   viewport-sized layers was the heaviest paint on the page. Same look, a fraction of the cost. */
.ig-blob{filter:none;backface-visibility:hidden;transform:translateZ(0)}
.ig-hero.ip-off .ig-blob,.ig-hero.ip-off .ig-float,.ig-hero.ip-off .ig-h1 .word.ig-grad{animation-play-state:paused}
.ig-float,.ig-stage{backface-visibility:hidden}

/* reveals: promote only while animating, release afterwards; gentler 3D entrance */
.rv:not(.in){will-change:transform,opacity}
.rv.in.rv-done{will-change:auto}
@media (prefers-reduced-motion:no-preference){
  .ig-stage.rv{transform:perspective(1400px) translate3d(0,56px,0) rotateX(10deg) scale(.94)}
  .rv{transition-timing-function:var(--ease-out)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}::view-transition-old(root),::view-transition-new(root){animation:none}}

/* cursor spotlight on cards + proof stats (position fed by index-plus.js, one write per frame) */
.ig-card,.ip-stat{position:relative}
.ig-card::before,.ip-stat::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(340px circle at var(--sx,50%) var(--sy,50%),rgba(232,163,61,.16),transparent 62%)}
.ig-card:hover::before,.ip-stat:hover::before{opacity:1}
html[data-theme="light"] .ig-card::before,html[data-theme="light"] .ip-stat::before{background:radial-gradient(340px circle at var(--sx,50%) var(--sy,50%),rgba(194,110,20,.12),transparent 62%)}

/* nav: underline that slides in, quieter hover */
.nav-links a{transition:color .2s,background-color .25s var(--ease-out)}
.nav-links a:not(.active):hover{color:var(--text);background:rgba(232,163,61,.08)}
.nav-links a.active::after{transition:width .35s var(--ease-out),margin .35s var(--ease-out)}
.nav-links a.active:hover::after{width:22px;margin-left:-11px}

/* buttons: tactile press, calmer lift */
.btn{transition:transform .22s var(--ease-out),box-shadow .25s,background-color .25s,border-color .25s,color .2s,translate .35s var(--ease-out)}
.btn:active{transform:scale(.97);transition-duration:.08s}
.btn-primary:hover{box-shadow:0 10px 28px -10px rgba(232,163,61,.65)}
.btn-outline:hover{border-color:var(--amber)}

/* FAQ: smooth open / close where the browser can animate <details> height */
@supports (interpolate-size:allow-keywords){
  .ig-faq details{interpolate-size:allow-keywords}
  .ig-faq details::details-content{block-size:0;overflow:clip;transition:block-size .38s var(--ease-out),content-visibility .38s allow-discrete}
  .ig-faq details[open]::details-content{block-size:auto}
}
.ig-faq details{transition:border-color .25s,background-color .25s,box-shadow .3s}
.ig-faq details[open]{border-color:rgba(232,163,61,.4);box-shadow:0 14px 34px -22px rgba(232,163,61,.5)}
.ig-faq summary{transition:color .2s}
.ig-faq summary:hover{color:var(--amber)}
.ig-faq summary::after{transition:transform .4s var(--ease-spring),background-color .2s,border-color .2s}
.ig-faq details[open] summary::after{background:rgba(232,163,61,.16);border-color:var(--amber)}

/* numbers never jitter while counting */
.ip-stat b,[data-count]{font-variant-numeric:tabular-nums}

/* scroll progress + back-to-top: silkier */
.ip-progress i{transition:transform .12s linear}
.ip-top{transition:opacity .3s,transform .4s var(--ease-spring),border-color .2s}

/* touch devices: no sticky hover states, no tilt jitter */
@media (hover:none){.ig-card::before,.ip-stat::before{display:none}.ig-card:hover{transform:none}}