/* ============================================================================ Easy Trading — Editorial Trading Ledger Design system + full stylesheet (below-fold + shared). Critical above-fold subset is inlined in index.html . Brand green is EXACTLY #13292a. ========================================================================== */ /* ---------------------------------------------------------------- Fonts ---- */ /* atleetech.com type system — Sora (display) · Hanken Grotesk (body) · Geist Mono (figures). Self-hosted variable woff2 (OFL). */ @font-face{font-family:"Sora";src:url("/assets/fonts/sora-var.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap} @font-face{font-family:"Hanken Grotesk";src:url("/assets/fonts/hanken-grotesk-var.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap} @font-face{font-family:"Geist Mono";src:url("/assets/fonts/geist-mono-var.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap} /* --------------------------------------------------------------- Tokens ---- */ :root{ --paper:#f7f6f1; --paper-2:#f1efe6; /* faint panel */ --paper-3:#ece9dd; /* deeper panel */ --ink:#0d1411; --brand:#13292a; /* EXACT brand deep teal-green */ --brand-2:#1d3d3a; --cta:#148044; /* AA: white text hits 5.0:1 (was #168a4d @4.39) */ --cta-press:#106b39; --gold:#c68a2e; --gold-ink:#8a5416; /* deep ledger-gold for small text on light (AA 5.3:1) */ --muted:#565f5f; --up:#168a4d; --down:#7f9a8f; /* muted teal-grey, never alarming red */ --hair:#d9d5c7; /* hairline / ledger rule */ --hair-soft:#e6e2d6; --wa:#25d366; /* WhatsApp only */ --ink-rgb:13,20,17; --sans:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif; --disp:"Sora",ui-sans-serif,system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,"SFMono-Regular",monospace; --maxw:1200px; --gutter:clamp(18px,5vw,40px); --radius:3px; /* sharp, ledger-like — NOT pill/16px */ --tap:46px; --shadow-1:0 1px 0 rgba(255,255,255,.6) inset, 0 14px 32px -26px rgba(var(--ink-rgb),.5); --shadow-cta:0 10px 24px -12px rgba(22,138,77,.55); } /* ---------------------------------------------------------------- Reset ---- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:light} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;background:var(--paper);color:var(--ink); font-family:var(--sans);font-weight:400;line-height:1.55; font-size:clamp(15px,1.05rem,17px); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden;} img,svg,video{display:block;max-width:100%} button{font:inherit;color:inherit;cursor:pointer;border:0;background:none} a{color:inherit;text-decoration:none} ul{margin:0;padding:0;list-style:none} h1,h2,h3,h4,p{margin:0} :focus-visible{outline:2.5px solid var(--cta);outline-offset:3px;border-radius:2px} /* ----------------------------------------------------------- Primitives ---- */ .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .mono{font-family:var(--mono);font-feature-settings:"tnum" 1,"lnum" 1;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em} .fig{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em} /* numbered editorial section label e.g. §03 — Why a method */ .kicker{display:flex;align-items:center;gap:.7ch; font-family:var(--mono);font-weight:500;font-size:.74rem; letter-spacing:.12em;text-transform:uppercase;color:var(--brand)} .kicker .idx{color:var(--gold-ink)} .kicker::after{content:"";flex:1;height:1px;background:var(--hair);max-width:120px} .h-disp{font-family:var(--disp);font-weight:600;line-height:1.04;letter-spacing:-.02em;color:var(--ink)} .lede{color:var(--muted);font-size:clamp(1rem,2.4vw,1.18rem);line-height:1.5;max-width:60ch} .footer__branch{display:block;line-height:1.5;margin-top:2px} .footer__branch a{color:var(--cta);font-weight:600;white-space:nowrap} .footer__branch a:hover{text-decoration:underline} .compliance{font-size:.76rem;color:var(--muted);line-height:1.4; font-style:italic;letter-spacing:.005em} .compliance::before{content:"";display:inline-block;width:6px;height:6px;margin-right:.6ch; vertical-align:middle;background:var(--gold);border-radius:50%} /* hairline ledger divider between major sections */ .rule{height:1px;background:linear-gradient(90deg,transparent,var(--hair) 8%,var(--hair) 92%,transparent); border:0;margin:0} /* ---- Buttons ---------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.6ch; min-height:var(--tap);padding:0 1.4em;border-radius:var(--radius); font-family:var(--sans);font-weight:700;font-size:1rem;letter-spacing:.005em; text-align:center;transition:transform .14s ease,background .14s ease,box-shadow .14s ease; -webkit-tap-highlight-color:transparent} .btn--cta{background:var(--cta);color:#fff;box-shadow:var(--shadow-cta)} .btn--cta:hover{background:var(--cta-press);transform:translateY(-1px)} .btn--cta:active{transform:translateY(0)} .btn--cta .price{font-family:var(--mono);font-weight:500; padding-left:.7ch;margin-left:.5ch;border-left:1px solid rgba(255,255,255,.32)} .btn--ink{background:var(--brand);color:#fff} .btn--ink:hover{background:var(--brand-2);transform:translateY(-1px)} .btn--ghost{background:transparent;color:var(--brand);border:1.5px solid var(--brand)} .btn--ghost:hover{background:var(--brand);color:#fff} .btn--block{display:flex;width:100%} .btn--sm{min-height:44px;font-size:.9rem;padding:0 1.1em} /* ============================================================ HEADER ===== */ .site-header{position:sticky;top:0;z-index:60; background:rgba(247,246,241,.86);backdrop-filter:saturate(1.1) blur(8px); border-bottom:1px solid var(--hair)} .site-header__bar{display:flex;align-items:center;gap:16px; height:62px;justify-content:space-between} .brand{display:flex;align-items:center;gap:10px} .brand__bull{width:38px;height:auto;color:var(--brand)} .brand__name{font-family:var(--disp);font-weight:700;font-size:1.12rem;letter-spacing:-.01em;color:var(--ink);line-height:1} .brand__name span{color:var(--brand)} .header__right{display:flex;align-items:center;gap:14px} .rating-chip{display:inline-flex;align-items:center;gap:.55ch; font-family:var(--mono);font-size:.8rem;color:var(--ink); padding:6px 10px;border:1px solid var(--hair);border-radius:var(--radius); background:var(--paper)} .rating-chip .stars{color:var(--gold);letter-spacing:.05em} .rating-chip .src{color:var(--muted)} @media (max-width:560px){.header__cta-text{display:none}} @media (max-width:430px){.rating-chip .src{display:none}} /* ============================================================ HERO ======= */ .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--hair);background:var(--paper)} /* layered atmosphere: warm radial glow + fine ledger grid, masked to fade out */ .hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(78% 55% at 86% -10%, rgba(198,138,46,.14), transparent 60%), radial-gradient(70% 62% at 4% 112%, rgba(19,41,42,.06), transparent 55%), linear-gradient(rgba(19,41,42,.035) 1px, transparent 1px) 0 0/100% 34px, linear-gradient(90deg, rgba(19,41,42,.035) 1px, transparent 1px) 0 0/34px 100%; -webkit-mask-image:radial-gradient(135% 105% at 62% 0%, #000 52%, transparent 100%); mask-image:radial-gradient(135% 105% at 62% 0%, #000 52%, transparent 100%)} .hero__bull{position:absolute;right:-8%;top:50%;transform:translateY(-46%); width:min(56vw,600px);color:var(--brand);opacity:.045;pointer-events:none;z-index:0} .hero__inner{position:relative;z-index:1;display:grid;gap:clamp(20px,3.6vw,40px); padding-block:clamp(24px,3.6vw,54px);grid-template-columns:1fr;align-items:start} @media (min-width:768px){ .hero__inner{grid-template-columns:minmax(0,1.1fr) minmax(366px,.9fr); grid-template-rows:min-content auto; column-gap:clamp(40px,5vw,80px);row-gap:20px;align-items:start} .hero__copy{grid-column:1;grid-row:1} .hero__trust{grid-column:1;grid-row:2} .hero__form{grid-column:2;grid-row:1 / span 2;align-self:start} } .hero__trust{display:flex;flex-direction:column;gap:16px;align-items:flex-start} /* eyebrow — mono, dash lead */ .hero__eyebrow{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em; text-transform:uppercase;color:var(--gold-ink);display:flex;align-items:center;gap:.9ch; margin-bottom:clamp(14px,2vw,22px)} .hero__eyebrow .dash{width:26px;height:2px;background:var(--gold);flex:none} /* headline — dramatic, tight, accented */ .hero h1{font-family:var(--disp);font-weight:640; font-size:clamp(2.25rem,6.6vw,4.6rem);line-height:1.0;letter-spacing:-.032em; color:var(--ink);max-width:15ch;text-wrap:balance} .hero h1 em{font-style:normal;color:var(--gold-ink)} .hero h1 .u{white-space:nowrap;background:linear-gradient(transparent 68%, rgba(198,138,46,.34) 0)} .hero__sub{max-width:44ch;color:var(--muted);font-size:clamp(1.02rem,2.4vw,1.2rem);line-height:1.5} .hero__sub b{color:var(--ink);font-weight:600} /* inline stat row */ .hero__stats{display:flex;flex-wrap:wrap;align-items:center;gap:9px 18px; padding-top:16px;border-top:1px solid var(--hair);width:100%;max-width:530px} .hero__stats>li{display:inline-flex} .hstat{display:inline-flex;align-items:baseline;gap:.5ch;font-size:.86rem;color:var(--muted)} .hstat b{color:var(--ink);font-weight:600} .hstat .mono{font-size:1rem;color:var(--ink);letter-spacing:-.01em} .hstat--link{text-decoration:none} .hstat__stars{color:var(--gold);font-size:.8rem;letter-spacing:.05em} .hstat--link:hover .hstat__lbl{text-decoration:underline} /* ---- Capture card (the form panel) ---------------------------------- */ .capture{position:relative;background:#fff;border:1px solid var(--hair); border-top:3px solid var(--brand);border-radius:var(--radius); padding:clamp(20px,3.2vw,28px);box-shadow:var(--shadow-1)} .capture::before{content:"";position:absolute;left:0;right:0;top:-3px;height:3px; background:repeating-linear-gradient(90deg,var(--gold) 0 14px,transparent 14px 22px); opacity:0} .capture__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:4px} .capture__title{font-family:var(--disp);font-weight:600;font-size:1.32rem;color:var(--ink);line-height:1.1} .capture__seat{font-family:var(--mono);font-size:.72rem;color:var(--brand); border:1px solid var(--hair);border-radius:2px;padding:3px 7px;white-space:nowrap;text-transform:uppercase;letter-spacing:.06em} .capture__price{display:flex;align-items:baseline;gap:.7ch;margin:14px 0 4px} .capture__price .amt{font-family:var(--mono);font-weight:500;font-size:2.1rem;color:var(--ink)} .capture__price .note{font-size:.82rem;color:var(--muted);line-height:1.25} .field{margin-top:14px} .field label{display:block;font-family:var(--mono);font-size:.68rem;font-weight:500; text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:7px} .field .req{color:var(--gold-ink)} .input,.phone-wrap{width:100%;background:var(--paper);border:1px solid var(--hair); border-radius:var(--radius);transition:border-color .14s ease,box-shadow .14s ease} .input{min-height:var(--tap);padding:0 14px;font:inherit;color:var(--ink)} .input::placeholder{color:#9aa39f} .input:focus{outline:0;border-color:var(--cta);box-shadow:0 0 0 3px rgba(22,138,77,.14)} .phone-wrap{display:flex;align-items:stretch;overflow:hidden} .phone-wrap:focus-within{border-color:var(--cta);box-shadow:0 0 0 3px rgba(22,138,77,.14)} .phone-wrap .cc{display:flex;align-items:center;padding:0 12px; font-family:var(--mono);font-size:.95rem;color:var(--muted); background:var(--paper-2);border-right:1px solid var(--hair)} .phone-wrap input{flex:1;min-height:var(--tap);padding:0 14px;border:0;background:transparent; font:inherit;font-family:var(--mono);letter-spacing:.04em;color:var(--ink)} .phone-wrap input:focus{outline:0} .field__err{display:none;margin-top:6px;font-size:.78rem;color:#b4472b} .field.is-invalid .input,.field.is-invalid .phone-wrap{border-color:#c2643f;background:#fbf2ee} .field.is-invalid .field__err{display:block} .capture__submit{margin-top:18px} .capture__foot{margin-top:14px;display:flex;flex-direction:column;gap:8px} .capture__assure{display:flex;align-items:center;gap:.6ch;font-size:.8rem;color:var(--muted)} .capture__assure svg{width:15px;height:15px;color:var(--cta);flex:none} .capture__assure b{color:var(--ink);font-weight:600} /* ---- Enrolment ticket (elevated hero form) --------------------------- */ .ticket{position:relative;background:#fff;border:1px solid var(--hair-soft);border-radius:8px;overflow:hidden; box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 34px 64px -44px rgba(13,20,17,.55), 0 3px 10px -6px rgba(13,20,17,.12)} .ticket__chrome{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:9px 14px;background:linear-gradient(var(--paper-2),var(--paper-3));border-bottom:1px solid var(--hair)} .ticket__brand{display:inline-flex;align-items:center;gap:.6ch;font-family:var(--mono); font-size:.72rem;color:var(--muted);letter-spacing:.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ticket__bull{width:17px;height:auto;color:var(--brand);flex:none} .ticket__live{display:inline-flex;align-items:center;gap:.5ch;font-family:var(--mono); font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cta);flex:none; border:1px solid rgba(20,128,68,.3);border-radius:40px;padding:3px 9px;background:#fff} .ticket__live i{width:6px;height:6px;border-radius:50%;background:var(--cta);box-shadow:0 0 0 0 rgba(20,128,68,.5)} @media (prefers-reduced-motion:no-preference){html.js .ticket__live i{animation:tlive 2.4s ease-in-out infinite}} @keyframes tlive{0%,100%{box-shadow:0 0 0 0 rgba(20,128,68,.5)}50%{box-shadow:0 0 0 5px rgba(20,128,68,0)}} .ticket__body{padding:clamp(18px,3vw,26px)} .ticket__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px} .ticket__title{font-family:var(--disp);font-weight:640;font-size:1.36rem;color:var(--ink);line-height:1.08;letter-spacing:-.015em} .ticket__note{margin-top:5px;font-size:.78rem;color:var(--muted);line-height:1.35} .ticket__price{display:flex;flex-direction:column;align-items:flex-end;text-align:right;flex:none} .ticket__price b{font-family:var(--mono);font-weight:500;font-size:1.95rem;color:var(--gold-ink);line-height:1;letter-spacing:-.02em} .ticket__price span{font-size:.68rem;color:var(--muted);margin-top:4px;max-width:11ch;line-height:1.2} .ticket__foot{margin-top:15px;display:flex;flex-direction:column;gap:8px} /* ============================================== PROOF / TRUST (§03) ====== */ .proof{padding-block:clamp(30px,4.2vw,56px)} .proof__grid{display:grid;gap:clamp(24px,4vw,44px);grid-template-columns:1fr} @media (min-width:880px){.proof__grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center}} .video-frame{position:relative;border:1px solid var(--hair);border-radius:var(--radius); background:var(--brand);overflow:hidden;box-shadow:var(--shadow-1); aspect-ratio:4/5;max-width:440px} @media (min-width:880px){.video-frame{aspect-ratio:4/5;max-width:none}} .video-frame__tag{position:absolute;left:12px;top:12px;z-index:3; display:inline-flex;align-items:center;gap:.5ch; font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase; color:#fff;background:rgba(13,20,17,.55);backdrop-filter:blur(4px); padding:5px 9px;border-radius:2px} .video-frame__tag .live{width:7px;height:7px;border-radius:50%;background:#ff5b4d; box-shadow:0 0 0 0 rgba(255,91,77,.6);animation:livePulse 2s infinite} @media (prefers-reduced-motion:reduce){.video-frame__tag .live{animation:none}} @keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(255,91,77,.55)}70%{box-shadow:0 0 0 8px rgba(255,91,77,0)}100%{box-shadow:0 0 0 0 rgba(255,91,77,0)}} .video-frame video,.video-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .video-frame__cap{position:absolute;left:0;right:0;bottom:0;z-index:2; padding:28px 14px 12px;color:#fff;font-size:.84rem; background:linear-gradient(transparent,rgba(13,20,17,.72))} .stats-ledger{display:grid;grid-template-columns:repeat(2,1fr);gap:0; border:1px solid var(--hair-soft);border-radius:10px;overflow:hidden;background:#fff; box-shadow:0 1px 2px rgba(13,20,17,.03)} .stat{padding:clamp(20px,2.6vw,26px) clamp(18px,2.4vw,24px);border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)} .stat:nth-child(2n){border-right:0} .stat:nth-last-child(-n+2){border-bottom:0} .stat__v{font-family:var(--mono);font-weight:500;font-size:clamp(1.9rem,4.8vw,2.5rem); color:var(--ink);line-height:1;letter-spacing:-.03em} .stat__l{margin-top:9px;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);line-height:1.3} .proof__lead{margin-bottom:18px} .proof__lead h2{font-family:var(--disp);font-weight:600;font-size:clamp(1.5rem,3.6vw,2.1rem); line-height:1.08;letter-spacing:-.02em;margin-top:12px;max-width:20ch} /* trust bar */ .trustbar{margin-top:22px;display:grid;gap:0;grid-template-columns:1fr; border-top:1px solid var(--hair)} @media (min-width:600px){.trustbar{grid-template-columns:repeat(3,minmax(0,1fr));border-top:0}} .trust-item{display:flex;align-items:center;gap:12px;padding:14px 4px; border-bottom:1px solid var(--hair)} @media (min-width:600px){.trust-item{border-bottom:0;border-top:1px solid var(--hair);padding:16px 14px 16px 0} .trust-item+.trust-item{border-left:1px solid var(--hair);padding-left:18px}} .trust-item__icon{flex:none;width:44px;height:44px;display:grid;place-items:center; border:1px solid var(--hair);border-radius:8px;background:#fff} .trust-item__icon .lottie{width:26px;height:26px} .trust-item__t{display:block;font-size:.66rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--gold-ink)} .trust-item__v{display:block;font-weight:600;font-size:.92rem;color:var(--ink);line-height:1.3;margin-top:3px} /* ============================================ WHY METHOD (§04) ========== */ .method{padding-block:clamp(34px,4.6vw,64px);background:var(--paper-2); border-block:1px solid var(--hair)} .method__inner{max-width:760px} .method__copy{max-width:46ch} .method h2{font-family:var(--disp);font-weight:600;font-size:clamp(1.7rem,4.4vw,2.55rem); line-height:1.06;letter-spacing:-.025em;margin-top:14px;max-width:18ch} .method__body{margin-top:16px;color:var(--muted);max-width:52ch;line-height:1.6} /* four pillar cards (light ledger aesthetic) */ .pillars{margin-top:clamp(24px,3.4vw,36px);display:grid;gap:16px;grid-template-columns:1fr} @media (min-width:640px){.pillars{grid-template-columns:1fr 1fr}} .pillar{position:relative;background:#fff;border:1px solid var(--hair-soft);border-radius:8px; padding:clamp(20px,2.6vw,26px);box-shadow:0 1px 2px rgba(13,20,17,.03); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .pillar:hover{transform:translateY(-2px);box-shadow:0 22px 44px -30px rgba(13,20,17,.4);border-color:var(--hair)} .pillar__n{position:absolute;top:18px;right:18px;font-family:var(--mono);font-size:.72rem;color:var(--gold-ink);font-weight:700;letter-spacing:.04em} .pillar__icon{width:44px;height:44px;display:grid;place-items:center;color:var(--brand); border:1px solid var(--hair);border-radius:8px;background:var(--paper-2)} .pillar__icon svg{width:23px;height:23px} .pillar__t{font-family:var(--disp);font-weight:640;font-size:1.15rem;color:var(--ink);margin-top:16px;line-height:1.15;letter-spacing:-.01em} .pillar__d{margin-top:7px;color:var(--muted);font-size:.92rem;line-height:1.5;max-width:32ch} .method__cta{margin-top:clamp(26px,3.4vw,34px);display:flex;flex-wrap:wrap;gap:14px;align-items:center} /* ============================================ COMPARISON (§03) ========= */ .compare{padding-block:clamp(30px,4.4vw,60px)} .compare__inner{max-width:820px} .compare h2{font-family:var(--disp);font-weight:600;font-size:clamp(1.7rem,4.4vw,2.55rem); line-height:1.06;letter-spacing:-.025em;margin-top:14px;max-width:20ch} .compare__body{margin-top:16px;color:var(--muted);max-width:54ch;line-height:1.6} /* ===================== §03 · The Learning Console ===================== */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .console{margin-top:clamp(24px,3.4vw,34px);background:#fff;border:1px solid var(--hair); border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-1)} .console__bar{display:flex;align-items:center;gap:14px;background:var(--brand);color:#fff; padding:12px clamp(16px,3vw,24px)} .console__idx{font-size:.82rem;letter-spacing:.02em;color:rgba(255,255,255,.6);white-space:nowrap} .console__idx b{color:#fff;font-weight:600} .console__idxtot{color:rgba(255,255,255,.6)} .console__step{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .4s ease} .console__rail{flex:1;height:2px;background:rgba(255,255,255,.16);border-radius:2px;overflow:hidden;min-width:36px} .console__rail i{display:block;height:100%;width:20%;background:var(--gold);border-radius:2px; transition:width .5s cubic-bezier(.2,.7,.3,1)} .console__stage{position:relative;min-height:348px} @media (min-width:560px){.console__stage{min-height:322px}} @media (min-width:768px){.console__stage{min-height:306px}} .console__foot{padding:11px clamp(16px,3vw,24px);border-top:1px solid var(--hair); font-family:var(--mono);font-size:.64rem;letter-spacing:.04em;color:var(--muted);text-align:center;line-height:1.45} /* All scenes are absolutely stacked (fixed stage height = no CLS). Reveal-safe: the payoff scene is shown by CSS with no JS / reduced motion; it can never blank. */ .scene{margin:0;position:absolute;inset:0;display:flex;flex-direction:column;gap:12px; padding:clamp(16px,2.4vw,22px) clamp(16px,2.6vw,24px); opacity:0;visibility:hidden;transform:translateY(12px) scale(.986)} /* Reveal-safe resting frame: the calm "doubts & discipline" scene shows with no JS / reduced-motion (the payoff now lives in its own .method3 panel above). */ .scene--doubts{opacity:1;visibility:visible;transform:none} .scene__art{position:relative;flex:1;min-height:150px;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:14px;text-align:center} .scene__cap{font-size:.98rem;color:var(--muted);text-align:center;line-height:1.45;max-width:46ch;margin-inline:auto} .scene__cap em{font-style:normal;color:var(--brand);font-weight:600} /* animated mode: JS adds .is-anim only under html.js + no reduced-motion. Longer, eased crossfade (was .5s ease) so scene changes glide, not snap. */ @media (prefers-reduced-motion:no-preference){ html.js .console.is-anim .scene{transition:opacity .72s cubic-bezier(.4,0,.2,1),transform .72s cubic-bezier(.4,0,.2,1),visibility .72s} html.js .console.is-anim .scene.is-active{opacity:1;visibility:visible;transform:none} html.js .console.is-anim .scene--doubts:not(.is-active){opacity:0;visibility:hidden;transform:translateY(12px) scale(.986)} } /* -- shared AI companion chip -- */ .ai-chip{display:inline-flex;align-items:center;gap:.6ch;font-family:var(--mono);font-size:.68rem; letter-spacing:.08em;text-transform:uppercase;color:var(--brand); border:1px solid var(--hair);border-radius:40px;padding:5px 11px 5px 9px;background:var(--paper-2)} .ai-spark{width:9px;height:9px;flex:none;border-radius:50%;background:var(--gold); box-shadow:0 0 0 0 rgba(198,138,46,.5)} @media (prefers-reduced-motion:no-preference){ html.js .console.is-anim .scene.is-active .ai-spark{animation:spark 1.8s ease-in-out infinite} } @keyframes spark{0%,100%{box-shadow:0 0 0 0 rgba(198,138,46,.5)}50%{box-shadow:0 0 0 6px rgba(198,138,46,0)}} /* -- S1 noise -- */ .scene--noise .scene__art{gap:0} .nzscreen{position:relative;width:100%;height:100%} .nzq{position:absolute;display:inline-flex;align-items:center;gap:.5ch;white-space:nowrap; font-family:var(--mono);font-size:.72rem;color:var(--muted); background:var(--paper-2);border:1px solid var(--hair);border-radius:5px;padding:5px 9px} .nzq b{color:var(--ink)} .nzq .up{color:var(--cta)} .nzq .dn{color:var(--down)} .nzq--1{top:12%;left:5%} .nzq--2{top:39%;left:24%} .nzq--3{top:63%;left:8%} .nzq--4{top:24%;right:7%} .nzq--5{top:70%;right:12%;color:var(--gold-ink);font-style:italic;background:transparent;border:0} .nzmark{position:absolute;font-family:var(--disp);font-weight:700;color:var(--hair-soft);line-height:1} .nzmark--1{font-size:2.6rem;top:2%;right:32%} .nzmark--2{font-size:1.7rem;bottom:5%;left:46%} @media (prefers-reduced-motion:no-preference){ html.js .console.is-anim .scene--noise.is-active .nzq{animation:nzjit .5s steps(2,end) infinite} html.js .console.is-anim .scene--noise.is-active .nzq--2{animation-duration:.42s} html.js .console.is-anim .scene--noise.is-active .nzq--4{animation-duration:.6s} html.js .console.is-anim .scene--noise.is-active .nzq--3{animation-duration:.36s} html.js .console.is-anim .scene--noise.is-active .nzmark{animation:nzflick 1.1s steps(2,end) infinite} } @keyframes nzjit{0%{transform:translate(0,0)}50%{transform:translate(2px,-1px)}100%{transform:translate(-2px,1px)}} @keyframes nzflick{0%,100%{opacity:1}50%{opacity:.35}} /* -- S2 structure: a real module panel -- */ .scene--structure .scene__art{gap:0} .modpanel{width:min(360px,100%);border:1px solid var(--hair);border-radius:10px;background:#fff; overflow:hidden;box-shadow:0 1px 2px rgba(13,20,17,.03);text-align:left} .modpanel__hdr{display:flex;align-items:center;justify-content:space-between;gap:8px; padding:10px 12px;background:var(--paper-2);border-bottom:1px solid var(--hair)} .modpanel__prog{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .mrows{display:flex;flex-direction:column} .mrow{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--hair); font-weight:600;color:var(--ink);font-size:.98rem} .mrow:last-child{border-bottom:0} .mrow__n{font-family:var(--mono);font-size:.74rem;color:var(--gold-ink);font-weight:700;flex:none} .mrow__t{flex:1} .mrow__ck{flex:none;width:20px;height:20px;display:grid;place-items:center;border-radius:50%; background:var(--cta);color:#fff;font-size:.66rem;font-weight:700;transform:scale(0)} @media (prefers-reduced-motion:no-preference){ html.js .console.is-anim .scene--structure.is-active .mrow__ck{animation:pop .4s cubic-bezier(.2,.7,.3,1) forwards} html.js .console.is-anim .scene--structure.is-active .mrow:nth-child(2) .mrow__ck{animation-delay:.18s} html.js .console.is-anim .scene--structure.is-active .mrow:nth-child(3) .mrow__ck{animation-delay:.36s} } @keyframes pop{to{transform:scale(1)}} /* -- S3 practice: a real historical candlestick chart -- */ .scene--practice .scene__art{gap:10px} .pchart{position:relative;width:min(360px,100%)} .candles{width:100%;height:140px;display:block} .candles__axis{stroke:var(--hair);stroke-width:1} .candles__zone{fill:rgba(198,138,46,.1);stroke:var(--gold);stroke-width:1;stroke-dasharray:3 3;opacity:0} .cndl line{stroke:currentColor;stroke-width:1.4} .cndl rect{fill:currentColor} .cndl.up{color:var(--cta)} .cndl.dn{color:var(--down)} .pchart__watermark{position:absolute;top:8px;left:0;right:0;text-align:center; font-size:.7rem;letter-spacing:.16em;color:rgba(13,20,17,.07);pointer-events:none} .pchart__pin{position:absolute;top:26%;left:36%;font-family:var(--mono);font-size:.6rem;white-space:nowrap; color:var(--gold-ink);background:var(--paper-2);border:1px solid var(--hair);border-radius:3px;padding:2px 6px;opacity:0} .pchart__tag{display:block;text-align:center;font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;color:var(--muted);margin-top:6px} @media (prefers-reduced-motion:no-preference){ html.js .console.is-anim .scene--practice.is-active .candles{clip-path:inset(0 100% 0 0);animation:cwipe 1.1s ease forwards} html.js .console.is-anim .scene--practice.is-active .candles__zone{animation:fadein .5s ease 1s forwards} html.js .console.is-anim .scene--practice.is-active .pchart__pin{animation:fadein .4s ease 1.1s forwards} } @keyframes cwipe{to{clip-path:inset(0 0 0 0)}} @keyframes fadein{to{opacity:1}} /* -- S4 doubts: a real chat + discipline streak -- */ .scene--doubts .scene__art{gap:12px} .chat{width:min(360px,100%);border:1px solid var(--hair);border-radius:12px;background:#fff; overflow:hidden;box-shadow:0 1px 2px rgba(13,20,17,.03);text-align:left} .chat__hdr{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px; background:var(--brand);color:#fff} .chat__who{display:inline-flex;align-items:center;gap:.55ch;font-size:.78rem;font-weight:600} .chat__who b{color:var(--gold);font-weight:500} .chat__who .ai-spark{background:var(--gold)} .chat__lang{font-size:.58rem;letter-spacing:.06em;color:rgba(255,255,255,.75); border:1px solid rgba(255,255,255,.28);border-radius:40px;padding:2px 7px} .chat__body{padding:10px;display:flex;flex-direction:column;gap:6px} .cbub{max-width:84%;font-size:.84rem;line-height:1.35;padding:7px 10px;border-radius:11px} .cbub__t{font-family:var(--mono);font-size:.56rem;opacity:.55;margin-left:8px} .cbub--you{align-self:flex-end;background:var(--paper-3);color:var(--ink);border-bottom-right-radius:3px} .cbub--ai{align-self:flex-start;background:var(--brand);color:#fff;border-bottom-left-radius:3px} .cbub--typing{align-self:flex-start;display:inline-flex;gap:4px;padding:11px 13px; background:var(--paper-2);border:1px solid var(--hair)} .cbub--typing i{width:6px;height:6px;border-radius:50%;background:var(--muted)} .chat__input{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px; border-top:1px solid var(--hair);color:#9aa39f;font-size:.76rem} .chat__send{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--cta);color:#fff;font-size:.68rem} .disc__streak{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono)} .disc__streak b{font-size:.66rem;letter-spacing:.04em;color:var(--gold-ink)} .disc__streak i{width:11px;height:11px;border-radius:3px;background:var(--hair)} @media (prefers-reduced-motion:no-preference){ html.js .console.is-anim .scene--doubts.is-active .cbub--you{animation:bubin .4s ease .2s both} html.js .console.is-anim .scene--doubts.is-active .cbub--typing{animation:bubin .3s ease .5s both} html.js .console.is-anim .scene--doubts.is-active .cbub--ai{animation:bubin .4s ease 1s both} html.js .console.is-anim .scene--doubts.is-active .cbub--typing i{animation:typ 1s ease-in-out infinite} html.js .console.is-anim .scene--doubts.is-active .cbub--typing i:nth-child(2){animation-delay:.15s} html.js .console.is-anim .scene--doubts.is-active .cbub--typing i:nth-child(3){animation-delay:.3s} html.js .console.is-anim .scene--doubts.is-active .disc__streak i{animation:tickfill .3s ease forwards} html.js .console.is-anim .scene--doubts.is-active .disc__streak i:nth-child(2){animation-delay:.3s} html.js .console.is-anim .scene--doubts.is-active .disc__streak i:nth-child(3){animation-delay:.42s} html.js .console.is-anim .scene--doubts.is-active .disc__streak i:nth-child(4){animation-delay:.54s} html.js .console.is-anim .scene--doubts.is-active .disc__streak i:nth-child(5){animation-delay:.66s} html.js .console.is-anim .scene--doubts.is-active .disc__streak i:nth-child(6){animation-delay:.78s} } @keyframes bubin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes typ{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}} @keyframes tickfill{to{background:var(--gold)}} /* -- §03 · THE METHOD — the payoff, lifted into its own signature panel. Bright "daybreak" card: warm paper, gold accents, everything centered, a before→after time transformation (both bars animate), a colossal figure. */ .method3{position:relative;overflow:hidden;text-align:center;margin-top:clamp(22px,3vw,32px); background:linear-gradient(180deg,#fff,var(--paper-2)); border:1px solid var(--hair);border-radius:18px; padding:clamp(30px,4.2vw,50px) clamp(20px,3.4vw,44px); box-shadow:0 34px 66px -48px rgba(13,20,17,.42),0 1px 0 rgba(255,255,255,.85) inset} .method3::before{content:"";position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,transparent,var(--gold),transparent)} /* atmosphere: a warm gold bloom from the top-centre */ .method3__bg{position:absolute;inset:0;pointer-events:none; background:radial-gradient(62% 42% at 50% -6%,rgba(198,138,46,.15),transparent 70%)} .method3__eyebrow{position:relative;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em; text-transform:uppercase;color:var(--gold-ink);margin-bottom:clamp(20px,2.6vw,26px)} /* before → after time transformation — centred block, both bars animate */ .method3__xform{position:relative;display:grid;grid-template-columns:1fr auto 1fr; align-items:end;gap:clamp(10px,2.2vw,22px);max-width:540px;margin:0 auto clamp(24px,3.2vw,34px)} .tbar{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0;text-align:center} .tbar__k{font-family:var(--mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)} .tbar__bar{position:relative;width:100%;height:11px;border-radius:6px;background:var(--paper-3); overflow:hidden;border:1px solid var(--hair-soft)} .tbar__bar i{position:absolute;inset:0 auto 0 0;height:100%;border-radius:6px} .tbar--before .tbar__bar i{background:linear-gradient(90deg,#cfc8b4,var(--down))} .tbar--after .tbar__bar i{background:linear-gradient(90deg,var(--gold),#d89a3a);box-shadow:0 0 14px -3px rgba(198,138,46,.6)} .tbar__v{font-family:var(--mono);font-size:.8rem;font-weight:500;color:var(--muted)} .tbar--after .tbar__v{color:var(--gold-ink)} .method3__arrow{font-family:var(--disp);font-size:1.3rem;color:var(--gold);opacity:.75;padding-bottom:4px} /* colossal payoff figure */ .method3__hero{position:relative} .method3__num{display:block;font-family:var(--mono);font-weight:500; font-size:clamp(3.2rem,13vw,5.4rem);line-height:.9;letter-spacing:-.03em;color:var(--gold-ink)} @supports ((-webkit-background-clip:text) or (background-clip:text)){ .method3__num{background:linear-gradient(178deg,var(--gold),var(--gold-ink) 94%); -webkit-background-clip:text;background-clip:text;color:transparent} } .method3__sub{margin:12px auto 0;font-size:clamp(1.02rem,2.3vw,1.2rem);line-height:1.5; color:var(--muted);max-width:46ch} .method3__sub b{color:var(--ink);font-weight:600} .method3__foot{position:relative;margin:clamp(20px,2.8vw,28px) auto 0;max-width:48ch; padding-top:clamp(16px,2.2vw,20px);border-top:1px solid var(--hair); font-size:.98rem;color:var(--muted);line-height:1.5} .method3__foot em{font-style:normal;color:var(--gold-ink);font-weight:600} .method3__cta{margin-top:clamp(22px,2.8vw,28px)} /* reveal-safe motion: fully visible by default; .is-in (scroll) plays entrance. Both bars animate from 0 (staggered) only while JS+motion are on and not yet revealed. */ @media (prefers-reduced-motion:no-preference){ html.js .method3.is-in{animation:et-rise .62s cubic-bezier(.2,.7,.3,1) both} html.js .method3 .tbar__bar i{transition:width 1s cubic-bezier(.34,.8,.28,1)} html.js .method3 .tbar--before .tbar__bar i{transition-delay:.12s} html.js .method3 .tbar--after .tbar__bar i{transition-delay:.42s} html.js .method3:not(.is-in) .tbar__bar i{width:0 !important} } /* -- §03 · AI time-saving callout (Busy schedule? No problem.) — bright, centred -- */ .ai-save{position:relative;overflow:hidden;text-align:center;margin-top:clamp(18px,2.6vw,26px); background:linear-gradient(180deg,#fff,var(--paper-2)); border:1px solid var(--hair);border-radius:18px; padding:clamp(28px,3.8vw,44px) clamp(20px,3.2vw,40px); box-shadow:0 30px 60px -46px rgba(13,20,17,.4),0 1px 0 rgba(255,255,255,.85) inset} .ai-save::before{content:"";position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,transparent,var(--gold),transparent)} .ai-save__bg{position:absolute;inset:0;pointer-events:none; background:radial-gradient(62% 42% at 50% -6%,rgba(198,138,46,.13),transparent 70%)} .ai-save__h{position:relative;font-family:var(--disp);font-weight:640;font-size:clamp(1.6rem,4.6vw,2.4rem); line-height:1.04;letter-spacing:-.02em;color:var(--ink)} .ai-save__h em{font-style:normal;color:var(--gold-ink)} .ai-save__p{position:relative;margin:14px auto 0;font-size:clamp(1.02rem,2.3vw,1.2rem);line-height:1.5; color:var(--muted);max-width:52ch} .ai-save__p b{color:var(--ink);font-weight:600} .ai-save__note{position:relative;display:block;margin:16px auto 0;max-width:46ch; font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--gold-ink);line-height:1.65} .ai-save__cta{margin-top:clamp(20px,2.6vw,26px)} /* shared: both card CTAs are centred, comfortable tap targets */ .method3__cta,.ai-save__cta{display:inline-flex;width:min(100%,360px);margin-inline:auto} @media (prefers-reduced-motion:no-preference){ html.js .ai-save.is-in{animation:et-rise .6s cubic-bezier(.2,.7,.3,1) both} } /* ============================================ DEMO (§05) =============== */ .demo{padding-block:clamp(30px,4.2vw,56px)} .demo__head{max-width:62ch} .demo h2{font-family:var(--disp);font-weight:600;font-size:clamp(1.7rem,4.4vw,2.55rem); line-height:1.06;letter-spacing:-.025em;margin-top:14px} .demo__body{margin-top:16px;color:var(--muted);max-width:56ch} .demo__panel{margin-top:20px;display:grid;gap:clamp(20px,3vw,32px);grid-template-columns:1fr} @media (min-width:880px){.demo__panel{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center}} .includes{display:grid;gap:0;border:1px solid var(--hair-soft);border-radius:10px; background:#fff;overflow:hidden;box-shadow:0 1px 2px rgba(13,20,17,.03)} .includes li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start; padding:16px 20px;border-bottom:1px solid var(--hair)} .includes li:last-child{border-bottom:0} .includes li .ck{flex:none;width:22px;height:22px;color:var(--cta);margin-top:1px} .includes li span{font-size:.95rem;line-height:1.4} .demo__aside{display:flex;flex-direction:column;gap:18px} .demo__live{position:relative;border:0;border-radius:10px; background:linear-gradient(160deg,var(--brand-2),var(--brand) 60%);color:#fff;padding:clamp(22px,3vw,28px);overflow:hidden; box-shadow:0 30px 60px -40px rgba(13,20,17,.6)} .demo__live .bull{position:absolute;right:-30px;bottom:-30px;width:200px;color:#fff;opacity:.06} .demo__live .badge{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; color:var(--gold);display:inline-flex;align-items:center;gap:.6ch} .demo__live .badge .live{width:8px;height:8px;border-radius:50%;background:#ff5b4d} .demo__live h3{font-family:var(--disp);font-weight:600;font-size:1.5rem;margin-top:12px;line-height:1.1;position:relative} .demo__live p{margin-top:8px;color:rgba(255,255,255,.78);font-size:.92rem;position:relative} .demo__live .price{margin-top:16px;font-family:var(--mono);font-size:1.1rem;position:relative} .demo__live .price b{font-size:1.7rem;font-weight:500} /* ============================================ FOUNDER (§06) ============ */ .founder{padding-block:clamp(30px,4.2vw,56px);background:var(--paper-2);border-block:1px solid var(--hair)} .founder__grid{display:grid;gap:clamp(22px,3vw,42px);grid-template-columns:1fr} @media (min-width:840px){.founder__grid{grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);align-items:center}} .founder__media{position:relative} .founder__portrait{position:relative;border:1px solid var(--hair-soft);border-radius:12px; overflow:hidden;background:var(--brand);aspect-ratio:4/5; box-shadow:0 34px 64px -44px rgba(13,20,17,.55),0 3px 10px -6px rgba(13,20,17,.12)} .founder__portrait img{width:100%;height:100%;object-fit:cover} .founder__chip{position:absolute;right:-12px;bottom:-14px;background:#fff;border:1px solid var(--hair-soft); border-left:3px solid var(--gold);border-radius:8px;padding:12px 15px; box-shadow:0 18px 36px -22px rgba(13,20,17,.4);max-width:62%} .founder__chip .k{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)} .founder__chip .v{font-family:var(--mono);font-weight:500;font-size:1.3rem;color:var(--brand);line-height:1.1} .founder__chip .v small{font-size:.7rem;color:var(--muted)} .founder h2{font-family:var(--disp);font-weight:600;font-size:clamp(1.9rem,5vw,2.9rem); line-height:1;letter-spacing:-.025em;margin-top:12px} .founder__role{margin-top:8px;font-family:var(--mono);font-size:.86rem;color:var(--brand)} .founder__bio{margin-top:18px;color:var(--muted);max-width:54ch;line-height:1.6} .founder__quote{margin-top:22px;padding:20px 24px;border-left:3px solid var(--gold); background:#fff;border-radius:0 8px 8px 0;border:1px solid var(--hair-soft);border-left:3px solid var(--gold); box-shadow:0 1px 2px rgba(13,20,17,.03)} .founder__quote p{font-family:var(--disp);font-weight:600;font-size:clamp(1.05rem,2.6vw,1.32rem); line-height:1.3;color:var(--ink);letter-spacing:-.01em} .founder__quote cite{display:block;margin-top:10px;font-style:normal;font-family:var(--mono);font-size:.8rem;color:var(--muted)} .founder__stats{margin-top:22px;display:flex;flex-wrap:wrap;gap:24px} .founder__stat .v{font-family:var(--mono);font-weight:500;font-size:1.5rem;color:var(--brand)} .founder__stat .l{font-size:.8rem;color:var(--muted)} /* ============================================ REVIEWS (§07) ============ */ .reviews{padding-block:clamp(30px,4.2vw,56px)} .reviews__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px} .reviews__head h2{font-family:var(--disp);font-weight:600;font-size:clamp(1.7rem,4.4vw,2.4rem); line-height:1.05;letter-spacing:-.025em;margin-top:12px;max-width:18ch} .gbadge{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--hair-soft); border-radius:8px;padding:11px 15px;background:#fff;box-shadow:0 1px 2px rgba(13,20,17,.03)} .gbadge__g{font-family:var(--disp);font-weight:700;font-size:1.2rem;line-height:1} .gbadge__g .b{color:#4285F4}.gbadge__g .o{color:#EA4335} .gbadge__meta .r{font-family:var(--mono);font-weight:500;font-size:1.05rem} .gbadge__meta .r .stars{color:var(--gold)} .gbadge__meta .c{font-size:.74rem;color:var(--muted)} /* ---- Featured testimonial spotlight (auto-advancing carousel) -------- */ .tspot{margin-top:26px;position:relative;background:linear-gradient(160deg,var(--brand-2),var(--brand) 55%);color:#fff; border:0;border-radius:12px;overflow:hidden; display:grid;grid-template-columns:1fr; box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 34px 64px -40px rgba(var(--ink-rgb),.7)} @media (min-width:780px){.tspot{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr)}} .tspot::before{content:"";position:absolute;left:0;top:0;width:4px;height:100%;z-index:2; background:repeating-linear-gradient(180deg,var(--gold) 0 16px,transparent 16px 26px);opacity:.9} .tspot__main{min-width:0;display:flex;flex-direction:column} /* rating ledger panel (fills the composition; editorial, not dead space) */ .tspot__aside{position:relative;overflow:hidden;display:none;flex-direction:column; justify-content:center;gap:6px;padding:clamp(26px,3vw,40px); background:rgba(0,0,0,.16);border-left:1px solid rgba(255,255,255,.1)} @media (min-width:780px){.tspot__aside{display:flex}} .tspot__bull{position:absolute;right:-22%;bottom:-12%;width:88%;color:#fff;opacity:.06;pointer-events:none} .tspot__big{font-family:var(--mono);font-weight:500;font-size:clamp(3.2rem,5vw,4.4rem); line-height:.9;color:#fff;letter-spacing:-.03em;position:relative} .tspot__bigstars{color:var(--gold);letter-spacing:.16em;font-size:1.1rem;position:relative} .tspot__biglabel{margin-top:8px;font-weight:700;font-size:1rem;color:#fff;position:relative;max-width:14ch} .tspot__subtle{font-family:var(--mono);font-size:.72rem;color:rgba(255,255,255,.6);position:relative} .tspot__viewport{overflow:hidden;outline:none} .tspot__viewport:focus-visible{outline:2.5px solid var(--gold);outline-offset:-3px} .tspot__track{display:flex;transition:transform .6s cubic-bezier(.4,0,.15,1);will-change:transform} @media (prefers-reduced-motion:reduce){.tspot__track{transition:none}} .tspot__slide{flex:0 0 100%;min-width:0;padding:clamp(26px,4vw,46px) clamp(22px,4vw,52px); display:flex;flex-direction:column;align-items:flex-start} .tspot__quotemark{font-family:var(--disp);font-weight:700;font-size:3.2rem;line-height:.6; color:var(--gold);opacity:.85;height:.5em;pointer-events:none} .tspot__stars{margin-top:14px;color:var(--gold);letter-spacing:.12em;font-size:1rem} .tspot__quote{margin:14px 0 0;font-family:var(--disp);font-weight:600; font-size:clamp(1.18rem,2.7vw,1.85rem);line-height:1.32;letter-spacing:-.015em; color:#fff;max-width:30ch;text-wrap:balance} .tspot__who{margin-top:22px;display:flex;align-items:center;gap:12px} .tspot__av{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center; background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22); font-family:var(--disp);font-weight:600;font-size:1rem;color:#fff} .tspot__id{line-height:1.2;display:flex;flex-direction:column} .tspot__id b{font-weight:700;font-size:1rem} .tspot__id small{font-family:var(--mono);font-size:.72rem;color:rgba(255,255,255,.6)} .tspot__nav{display:flex;align-items:center;gap:14px; padding:0 clamp(18px,4vw,28px) 18px;border-top:1px solid rgba(255,255,255,.1);padding-top:14px} .tspot__arrow{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center; color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2); transition:background .15s ease,transform .15s ease} .tspot__arrow:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)} .tspot__arrow:active{transform:translateY(0)} .tspot__dots{display:flex;gap:2px;margin-right:auto;align-items:center} .tspot__dots button{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.28); padding:8px;min-height:0;box-sizing:content-box;background-clip:content-box;cursor:pointer; transition:width .25s ease,background .25s ease} .tspot__dots button[aria-selected="true"]{width:24px;border-radius:8px;background:var(--gold);background-clip:content-box} /* no-JS / reduced-motion: spotlight is a single readable quote (track shows slide 1) */ html:not(.js) .tspot__nav{display:none} html:not(.js) .tspot__track{display:block} html:not(.js) .tspot__slide+.tspot__slide{display:none} /* ---- Auto-scrolling Google reviews feed (marquee) ------------------- */ .rmarquee{margin-top:30px} .rmarquee__caption{display:flex;align-items:center;gap:.6ch;font-size:.74rem; color:var(--muted);letter-spacing:.04em;margin-bottom:14px} .rmarquee__caption .dotg{width:7px;height:7px;border-radius:50%;background:var(--cta); box-shadow:0 0 0 0 rgba(22,138,77,.5);animation:livePulse 2.4s infinite} @media (prefers-reduced-motion:reduce){.rmarquee__caption .dotg{animation:none}} .rmarquee__mask{overflow:hidden; margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter); -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .rmarquee__row{display:flex;gap:16px;width:max-content;will-change:transform} .rmarquee.is-scrolling .rmarquee__row{animation:rmarquee var(--mq-dur,52s) linear infinite} .rmarquee.is-scrolling:hover .rmarquee__row, .rmarquee.is-scrolling:focus-within .rmarquee__row{animation-play-state:paused} .rmarquee__row .review{flex:0 0 clamp(248px,72vw,320px)} @keyframes rmarquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 8px))}} /* no-JS / reduced-motion: static, fully-visible wrapped grid (never animates) */ @media (prefers-reduced-motion:reduce){ .rmarquee__mask{-webkit-mask-image:none;mask-image:none;margin-inline:0;padding-inline:0} .rmarquee__row{flex-wrap:wrap;width:auto;justify-content:center} .rmarquee__row .review{flex:1 1 280px;max-width:340px} } html:not(.js) .rmarquee__mask{-webkit-mask-image:none;mask-image:none;margin-inline:0;padding-inline:0} html:not(.js) .rmarquee__row{flex-wrap:wrap;width:auto;justify-content:center} html:not(.js) .rmarquee__row .review{flex:1 1 280px;max-width:340px} .review{background:#fff;border:1px solid var(--hair-soft);border-radius:10px; padding:20px 20px 18px;box-shadow:0 8px 22px -20px rgba(var(--ink-rgb),.4)} .review__top{display:flex;align-items:center;gap:11px} .review__av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center; background:var(--brand);color:#fff;font-family:var(--disp);font-weight:600;font-size:.95rem} .review__who{line-height:1.2;min-width:0} .review__name{display:block;font-weight:700;font-size:.95rem} .review__src{display:block;font-size:.72rem;color:var(--muted);font-family:var(--mono)} .review__stars{margin-left:auto;color:var(--gold);font-size:.82rem;letter-spacing:.05em} .review__text{margin-top:11px;font-size:.92rem;line-height:1.5;color:#27302c} .review__q{font-family:var(--disp);color:var(--hair);font-size:1.6rem;line-height:0; position:relative;top:.2em;margin-right:.1ch} .carousel-dots{display:flex;gap:2px;justify-content:center;margin-top:14px} @media (min-width:760px){.carousel-dots{display:none}} .carousel-dots button{width:8px;height:8px;border-radius:50%;background:var(--hair);padding:8px;min-height:0;box-sizing:content-box;background-clip:content-box;cursor:pointer} .carousel-dots button[aria-current="true"]{background:var(--brand);width:22px;border-radius:4px} .reviews__link{margin-top:22px;font-family:var(--mono);font-size:.84rem;color:var(--brand); display:inline-flex;align-items:center;gap:.5ch;border-bottom:1px solid var(--hair);padding-bottom:2px} /* ============================================ PRICING (§07) ============ */ .pricing{padding-block:clamp(30px,4.2vw,56px)} .pricing__grid{display:grid;gap:clamp(26px,4vw,44px);grid-template-columns:1fr} @media (min-width:840px){.pricing__grid{grid-template-columns:minmax(0,1fr) minmax(330px,.8fr);align-items:start}} .pricing h2{font-family:var(--disp);font-weight:600;font-size:clamp(1.8rem,4.6vw,2.6rem); line-height:1.04;letter-spacing:-.025em;margin-top:12px;max-width:18ch} .pricing__body{margin-top:16px;color:var(--muted);max-width:50ch} .price-card{background:#fff;border:1px solid var(--hair-soft);border-top:3px solid var(--brand); border-radius:10px;padding:clamp(22px,3vw,30px); box-shadow:0 34px 64px -46px rgba(13,20,17,.45),0 1px 2px rgba(13,20,17,.03)} .price-card__label{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--brand)} .price-card__row{display:flex;align-items:baseline;gap:12px;margin-top:12px;flex-wrap:wrap} .price-card__mrp{font-family:var(--mono);font-size:1.2rem;color:var(--muted);text-decoration:line-through;text-decoration-color:var(--down)} .price-card__sp{font-family:var(--mono);font-weight:500;font-size:clamp(2.2rem,6vw,2.9rem);color:var(--ink);letter-spacing:-.02em;line-height:1} .price-card__save{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--cta);border:1px solid rgba(20,128,68,.3);border-radius:40px;padding:3px 10px;background:rgba(20,128,68,.06)} .price-card__demo{margin-top:16px;padding:14px 16px;background:var(--paper-2);border:1px solid var(--hair); border-left:3px solid var(--gold);border-radius:0 var(--radius) var(--radius) 0;font-size:.9rem;line-height:1.45} .price-card__demo b{color:var(--ink)} .price-card__incl{margin-top:18px;border-top:1px dashed var(--hair);padding-top:16px} .price-card__incl .ph{display:flex;align-items:center;gap:.6ch;font-family:var(--mono);font-size:.74rem;color:var(--muted); text-transform:uppercase;letter-spacing:.06em} .price-card__incl .ph .b{width:7px;height:7px;border-radius:50%;background:var(--gold)} .price-card__incl p{margin-top:8px;font-size:.86rem;color:var(--muted);line-height:1.45} .price-card__cta{margin-top:20px} /* ============================================ FAQ (§10) =============== */ .faq{padding-block:clamp(30px,4.2vw,56px);background:var(--paper-2);border-block:1px solid var(--hair)} .faq__grid{display:grid;gap:clamp(24px,4vw,48px);grid-template-columns:1fr} @media (min-width:840px){.faq__grid{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);align-items:start}} .faq h2{font-family:var(--disp);font-weight:600;font-size:clamp(1.8rem,4.6vw,2.5rem); line-height:1.04;letter-spacing:-.025em;margin-top:12px} .faq__intro{margin-top:14px;color:var(--muted);max-width:34ch} .faq__list{border-top:1px solid var(--hair)} .faq-item{border-bottom:1px solid var(--hair)} .faq-item summary{display:flex;align-items:center;gap:14px;justify-content:space-between; padding:18px 4px;cursor:pointer;list-style:none;font-family:var(--disp);font-weight:600; font-size:clamp(1.02rem,2.4vw,1.18rem);color:var(--ink);line-height:1.25} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary .qn{font-family:var(--mono);font-weight:500;font-size:.8rem;color:var(--gold-ink);flex:none} .faq-item summary .sign{flex:none;width:26px;height:26px;position:relative;margin-left:auto;color:var(--brand)} .faq-item summary .sign::before,.faq-item summary .sign::after{content:"";position:absolute; background:currentColor;left:50%;top:50%;transition:transform .2s ease} .faq-item summary .sign::before{width:13px;height:2px;transform:translate(-50%,-50%)} .faq-item summary .sign::after{width:2px;height:13px;transform:translate(-50%,-50%)} .faq-item[open] summary .sign::after{transform:translate(-50%,-50%) scaleY(0)} .faq-item__a{padding:0 4px 20px 4px;color:var(--muted);max-width:62ch;line-height:1.6} .faq-item__a p{font-size:.95rem} /* ============================================ FINAL CTA (§11) ========= */ .final{padding-block:clamp(44px,7vw,90px);position:relative;overflow:hidden; background:var(--brand);color:#fff;text-align:left} .final__bull{position:absolute;right:-6%;top:50%;transform:translateY(-50%);width:min(54vw,560px);color:#fff;opacity:.05;pointer-events:none} .final__grid{position:relative;display:grid;gap:clamp(26px,4vw,48px);grid-template-columns:1fr} @media (min-width:880px){.final__grid{grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);align-items:center}} .final .kicker{color:#fff}.final .kicker::after{background:rgba(255,255,255,.2)}.final .kicker .idx{color:var(--gold)} .final h2{font-family:var(--disp);font-weight:600;font-size:clamp(2rem,5.4vw,3.2rem); line-height:1.02;letter-spacing:-.03em;margin-top:14px;color:#fff;max-width:16ch;text-wrap:balance} .final__sub{margin-top:16px;color:rgba(255,255,255,.8);max-width:46ch;font-size:1.05rem} .final__brandline{margin-top:20px;font-family:var(--mono);font-size:.84rem;color:var(--gold)} .final .compliance{color:rgba(255,255,255,.6);margin-top:18px}.final .compliance::before{background:var(--gold)} /* capture card variant on dark */ .final .capture{border-top-color:var(--gold)} .final .capture__title{color:var(--ink)} /* ============================================ FOOTER (§12) ============ */ .site-footer{background:var(--ink);color:rgba(255,255,255,.7);padding-block:clamp(36px,5vw,60px);font-size:.88rem} .site-footer__top{display:grid;gap:28px;grid-template-columns:1fr; padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.12)} @media (min-width:760px){.site-footer__top{grid-template-columns:1.4fr 1fr 1fr}} .site-footer .brand__name{color:#fff}.site-footer .brand__name span{color:var(--gold)} .site-footer .brand__bull{color:#fff} .footer__about{margin-top:14px;line-height:1.6;max-width:42ch;color:rgba(255,255,255,.6)} .footer__col h3{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);margin-bottom:12px} .footer__col a,.footer__col li{display:block;padding:5px 0;color:rgba(255,255,255,.74);line-height:1.4} .footer__col a:hover{color:#fff} .footer__contact .mono{color:#fff} .footer__disclaimer{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12); font-size:.76rem;line-height:1.65;color:rgba(255,255,255,.5);max-width:none} .footer__disclaimer strong{color:rgba(255,255,255,.8)} .footer__bottom{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:space-between; font-family:var(--mono);font-size:.74rem;color:rgba(255,255,255,.45)} /* ============================================ STICKY MOBILE CTA ======= */ .mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:55; display:flex;align-items:center;gap:12px;padding:10px var(--gutter); padding-bottom:calc(10px + env(safe-area-inset-bottom)); background:rgba(247,246,241,.94);backdrop-filter:blur(10px); border-top:1px solid var(--hair);transform:translateY(110%);visibility:hidden; transition:transform .3s ease,visibility 0s linear .3s} .mobile-cta.is-shown{transform:translateY(0);visibility:visible;transition:transform .3s ease} .mobile-cta__info{line-height:1.1} .mobile-cta__price{font-family:var(--mono);font-weight:500;font-size:1.15rem;color:var(--ink)} .mobile-cta__note{font-size:.68rem;color:var(--muted)} .mobile-cta .btn{flex:1} @media (min-width:760px){.mobile-cta{display:none !important}} /* ============================================ WHATSAPP FLOATER ======== */ .wa-float{position:fixed;right:16px;z-index:54;bottom:16px; display:inline-flex;align-items:center;gap:10px; background:var(--wa);color:#073b22;font-weight:700;font-size:.9rem; padding:11px 16px 11px 13px;border-radius:40px; box-shadow:0 12px 30px -10px rgba(7,59,34,.5); transition:transform .15s ease,opacity .25s ease,visibility .25s} .wa-float:hover{transform:translateY(-2px)} .wa-float svg{width:24px;height:24px} .wa-float__txt{white-space:nowrap} /* hidden while the hero form is on screen (no overlap, cleaner first fold) */ .wa-float.is-hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px)} @media (max-width:759px){ .wa-float{bottom:calc(72px + env(safe-area-inset-bottom));width:52px;height:52px; padding:0;justify-content:center;border-radius:50%} .wa-float__txt{display:none} } /* ============================================ FUNNEL MODAL ============ */ .modal{position:fixed;inset:0;z-index:90;display:none;align-items:flex-end;justify-content:center} @media (min-width:600px){.modal{align-items:center}} .modal.is-open{display:flex} .modal__backdrop{position:absolute;inset:0;background:rgba(13,20,17,.55);backdrop-filter:blur(3px); animation:fadeIn .2s ease} .modal__dialog{position:relative;width:100%;max-width:440px;max-height:92vh;overflow:auto; background:var(--paper);border:1px solid var(--hair);border-top:3px solid var(--brand); border-radius:var(--radius) var(--radius) 0 0;padding:clamp(20px,4vw,28px); box-shadow:0 -10px 40px -10px rgba(13,20,17,.4);animation:sheetUp .26s cubic-bezier(.2,.8,.25,1)} @media (min-width:600px){.modal__dialog{border-radius:var(--radius);animation:popIn .22s ease}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes sheetUp{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}} @keyframes popIn{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}} @media (prefers-reduced-motion:reduce){.modal__backdrop,.modal__dialog{animation:none}} .modal__close{position:absolute;right:12px;top:12px;width:44px;height:44px;border-radius:50%; display:grid;place-items:center;color:var(--muted);background:var(--paper-2);border:1px solid var(--hair)} .modal__close:hover{color:var(--ink);background:var(--paper-3)} .modal__steps{display:flex;align-items:center;gap:8px;margin-bottom:14px;padding-right:44px;font-family:var(--mono);font-size:.72rem;color:var(--muted)} .modal__steps .s{display:inline-flex;align-items:center;gap:.5ch} .modal__steps .s .b{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--hair);display:grid;place-items:center;font-size:.66rem} .modal__steps .s.is-active{color:var(--brand)} .modal__steps .s.is-active .b{border-color:var(--brand);background:var(--brand);color:#fff} .modal__steps .s.is-done .b{border-color:var(--cta);background:var(--cta);color:#fff} .modal__steps .line{flex:1;height:1px;background:var(--hair)} .modal__title{font-family:var(--disp);font-weight:600;font-size:1.45rem;line-height:1.12;color:var(--ink)} .modal__sub{margin-top:6px;font-size:.88rem;color:var(--muted)} /* pay step */ .pay-summary{margin-top:16px;border:1px solid var(--hair);border-radius:var(--radius);background:#fff;overflow:hidden} .pay-summary__row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--hair);font-size:.9rem} .pay-summary__row:last-child{border-bottom:0} .pay-summary__row .k{color:var(--muted)} .pay-summary__row .v{font-family:var(--mono);color:var(--ink)} .pay-summary__row.total .v{font-size:1.3rem;font-weight:500;color:var(--ink)} .pay-summary__row.total .k{color:var(--ink);font-weight:700} .pay-note{margin-top:12px;font-size:.78rem;color:var(--muted);display:flex;gap:.6ch;align-items:flex-start;line-height:1.4} .pay-note svg{width:15px;height:15px;color:var(--cta);flex:none;margin-top:1px} .pay-methods{margin-top:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;color:var(--muted)} .pay-methods .chip{border:1px solid var(--hair);border-radius:2px;padding:3px 8px;background:#fff;color:var(--ink)} .testmode{margin-top:14px;padding:12px 14px;background:#fff7e6;border:1px solid #e6cf99;border-left:3px solid var(--gold); border-radius:0 var(--radius) var(--radius) 0;font-size:.82rem;color:#6b5320;line-height:1.45;display:none} .testmode.is-shown{display:block} .modal__pay-btn{margin-top:16px} /* success */ .pay-success{text-align:center;padding:6px 0 4px} .pay-success__icon{width:88px;height:88px;margin:4px auto 8px} .pay-success h3{font-family:var(--disp);font-weight:600;font-size:1.6rem;color:var(--ink)} .pay-success p{margin-top:8px;color:var(--muted);font-size:.92rem} .pay-success__class{margin-top:16px;border:1px solid var(--hair);border-radius:var(--radius);background:#fff;padding:14px 16px;text-align:left} .pay-success__class .k{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)} .pay-success__class .v{font-weight:500;color:var(--ink)} .modal .compliance{margin-top:14px} .is-loading{opacity:.7;pointer-events:none} .btn .spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff; border-radius:50%;animation:spin .7s linear infinite} @keyframes spin{to{transform:rotate(1turn)}} /* ============================================ SCROLL REVEAL =========== */ /* REVEAL-SAFE BY CONSTRUCTION (rewritten): - Content is ALWAYS visible by default (no opacity:0 base state anywhere). - The entrance is a TIME-BASED, auto-playing CSS keyframe (document timeline) whose end-state IS the natural visible state and uses fill-mode `both`, so it can NEVER get stuck hidden and never depends on a JS IntersectionObserver. - Disabled entirely under reduced-motion and when JS is off (no html.js) → content renders fully visible with zero animation. - Hero copy/form are intentionally NOT animated (they are the LCP) so paint is instant. The keyframe rules are also mirrored in the inline critical CSS so above-the-fold elements never flash. See @keyframes et-rise below. */ @media (prefers-reduced-motion:no-preference){ html.js .reveal:not(.hero__copy):not(.hero__form){animation:et-rise .62s cubic-bezier(.2,.7,.3,1) both} html.js .reveal-stagger>*{animation:et-rise .55s cubic-bezier(.2,.7,.3,1) both} html.js .reveal-stagger>*:nth-child(2){animation-delay:.07s} html.js .reveal-stagger>*:nth-child(3){animation-delay:.14s} html.js .reveal-stagger>*:nth-child(4){animation-delay:.21s} html.js .reveal-stagger>*:nth-child(5){animation-delay:.28s} html.js .reveal-stagger>*:nth-child(6){animation-delay:.35s} } @keyframes et-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} /* ===== scroll-in micro-animations — §02 method · §04 demo · §07 pricing · §09 final ===== Reveal-SAFE: elements are fully visible by default; `.is-in` (added by JS on scroll) only triggers a self-completing entrance. No JS / reduced-motion → static. */ @media (prefers-reduced-motion:no-preference){ /* §02 · pillar cards rise, then icons pop */ html.js .pillars.is-in .pillar{animation:et-rise .55s cubic-bezier(.2,.7,.3,1) both} html.js .pillars.is-in .pillar:nth-child(2){animation-delay:.09s} html.js .pillars.is-in .pillar:nth-child(3){animation-delay:.18s} html.js .pillars.is-in .pillar:nth-child(4){animation-delay:.27s} html.js .pillars.is-in .pillar__icon{animation:et-pop .5s cubic-bezier(.2,.7,.3,1) both;animation-delay:.2s} html.js .pillars.is-in .pillar:nth-child(2) .pillar__icon{animation-delay:.29s} html.js .pillars.is-in .pillar:nth-child(3) .pillar__icon{animation-delay:.38s} html.js .pillars.is-in .pillar:nth-child(4) .pillar__icon{animation-delay:.47s} /* §04 · demo checklist rows rise, ticks pop */ html.js .includes.is-in li{animation:et-rise .5s cubic-bezier(.2,.7,.3,1) both} html.js .includes.is-in li:nth-child(2){animation-delay:.07s} html.js .includes.is-in li:nth-child(3){animation-delay:.14s} html.js .includes.is-in li:nth-child(4){animation-delay:.21s} html.js .includes.is-in li:nth-child(5){animation-delay:.28s} html.js .includes.is-in li:nth-child(6){animation-delay:.35s} html.js .includes.is-in li .ck{animation:et-pop .4s cubic-bezier(.2,.7,.3,1) both} html.js .includes.is-in li:nth-child(2) .ck{animation-delay:.1s} html.js .includes.is-in li:nth-child(3) .ck{animation-delay:.17s} html.js .includes.is-in li:nth-child(4) .ck{animation-delay:.24s} html.js .includes.is-in li:nth-child(5) .ck{animation-delay:.31s} html.js .includes.is-in li:nth-child(6) .ck{animation-delay:.38s} /* §07 · pricing — save badge pops (the price counts up via the count-up observer) */ html.js .price-card__save.is-in{animation:et-pop .45s cubic-bezier(.2,.7,.3,1) both;animation-delay:.15s} /* §09 · final — copy rises, a gold rule draws under the headline */ html.js .final__copy.is-in>*{animation:et-rise .55s cubic-bezier(.2,.7,.3,1) both} html.js .final__copy.is-in>*:nth-child(2){animation-delay:.08s} html.js .final__copy.is-in>*:nth-child(3){animation-delay:.16s} html.js .final__copy.is-in>*:nth-child(4){animation-delay:.24s} html.js .final__copy.is-in .final__u::after{animation:et-underline .6s cubic-bezier(.2,.7,.3,1) .5s both} } @keyframes et-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}} @keyframes et-underline{from{transform:scaleX(0)}to{transform:scaleX(1)}} .final__u{position:relative;white-space:nowrap} .final__u::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:3px; background:var(--gold);border-radius:2px;transform:scaleX(0);transform-origin:left} /* count-up holds layout */ .stat__v[data-count]{min-width:2ch} /* utility */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} [hidden]{display:none !important} /* ---- Lottie / fallback boxes ---------------------------------------- */ .lottie{display:block;position:relative} .lottie svg{display:block;width:100%;height:100%} .fb{color:var(--brand)} /* ============================================ MOBILE MINIMALIST ========= * * ~95% of traffic is mobile. Calmer rhythm, more whitespace, fewer boxed * borders and larger tap targets — without touching desktop or the * reveal-safe visible-by-default defaults (no opacity:0 introduced here). */ @media (max-width:600px){ /* a touch more air in body copy for comfortable reading */ body{line-height:1.62} /* calmer, more even vertical rhythm between every section */ .proof,.method,.compare,.demo,.founder,.reviews,.pricing,.faq,.final{padding-block:40px} /* HERO — let copy + form breathe */ .hero__inner{gap:20px;padding-block:16px 30px} .hero__sub{margin-top:16px} .hero__trustrow{margin-top:20px;gap:12px 18px} .hero__brandline{margin-top:18px} /* STATS — an OPEN ledger (kept on-brand) instead of a heavy boxed card: hairline cross-rules only, no outer box, more room to breathe */ .stats-ledger{border:0;border-radius:0;background:transparent; border-top:1px solid var(--hair)} .stat{padding:18px 0;border-right:0;border-bottom:0} .stat:nth-child(odd){border-right:1px solid var(--hair);padding-right:18px} .stat:nth-child(even){padding-left:18px} .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--hair)} /* TRUST + INCLUDES — roomier rows, comfortable tap rhythm */ .trustbar{margin-top:20px} .trust-item{padding:16px 2px;gap:14px} .includes li{padding:16px 16px} /* METHOD PILLARS — drop the boxes; an open hairline list reads calmer, one idea per row, with the icon inline so the eye moves straight down. */ .pillars{gap:0} .pillar{background:transparent;border:0;border-radius:0;box-shadow:none; padding:18px 0 18px 56px;border-top:1px solid var(--hair);min-height:0} .pillar:first-child{border-top:0} .pillar__icon{position:absolute;left:0;top:18px;width:40px;height:40px} .pillar__t{margin-top:2px} .pillar__n{top:20px} /* COMPARISON — lighter panel, no heavy card outline on the small screen */ .compare__panel{border:0;border-radius:0;box-shadow:none;padding:0; border-top:1px solid var(--hair)} .compare__hl{margin-top:22px} /* REVIEWS — keep it clean: spotlight carousel + marquee + Google link is enough. Hide the redundant Google rating badge (the heading already states the live 5.0 / 261), so review proof isn't stacked three ways. */ .reviews__head .gbadge{display:none} .reviews__head{margin-bottom:2px} .rmarquee{margin-top:24px} .reviews__link{margin-top:18px} } /* Point-of-collection consent line under each capture form (DPDP notice at the moment data is given, not only in the footer). Deliberately quiet — it is a legal notice, not a selling point, and must not compete with the CTA. */ .consent-note{margin-top:10px;font-size:.72rem;line-height:1.45;color:var(--muted);text-align:center} .consent-note a{color:var(--brand);text-decoration:underline;text-underline-offset:2px} .consent-note a:hover{color:var(--cta)}