/* ============================================================================ 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:#168a4d; --cta-press:#127a44; --gold:#c68a2e; --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} @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)} .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} .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: radial-gradient(120% 80% at 88% -10%, rgba(19,41,42,.05), transparent 60%), var(--paper)} .hero__bull{position:absolute;right:-6%;top:50%;transform:translateY(-46%); width:min(58vw,640px);color:var(--brand);opacity:.05;pointer-events:none;z-index:0} .hero__inner{position:relative;z-index:1;display:grid;gap:clamp(22px,4vw,44px); padding-block:clamp(22px,3.4vw,46px); grid-template-columns:1fr;align-items:start} @media (min-width:920px){ .hero__inner{grid-template-columns:minmax(0,1.15fr) minmax(380px,.85fr); gap:clamp(40px,5vw,72px)} } .hero__eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em; text-transform:uppercase;color:var(--brand);display:flex;align-items:center;gap:.7ch;margin-bottom:18px} .hero__eyebrow .tick{width:22px;height:2px;background:var(--gold)} .hero h1{font-family:var(--disp);font-weight:600; font-size:clamp(2.15rem,6.4vw,4rem);line-height:1.02;letter-spacing:-.025em; color:var(--ink);max-width:16ch;text-wrap:balance} .hero h1 em{font-style:normal;color:var(--brand); background:linear-gradient(transparent 64%, rgba(198,138,46,.22) 0);} .hero__sub{margin-top:20px;max-width:46ch;color:var(--muted); font-size:clamp(1.02rem,2.6vw,1.22rem);line-height:1.5} .hero__brandline{margin-top:22px;display:block;max-width:max-content; font-family:var(--mono);font-size:.82rem;color:var(--brand);line-height:1.5; padding-top:16px;border-top:1px solid var(--hair)} .hero__brandline b{color:var(--ink);font-weight:500} .hero__trustrow{margin-top:24px;display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center} .hero__rating{display:inline-flex;align-items:baseline;gap:.6ch;font-family:var(--mono)} .hero__rating .n{font-size:1.5rem;color:var(--ink);font-weight:500} .hero__rating .stars{color:var(--gold);font-size:1rem;letter-spacing:.06em} .hero__rating .c{color:var(--muted);font-size:.85rem} .hero__credit{display:inline-flex;align-items:center;gap:.55ch;font-size:.86rem;color:var(--muted)} .hero__credit .dot{width:6px;height:6px;border-radius:50%;background:var(--cta)} /* hero lottie accent (markets line) — reserved box, no layout shift */ .hero__accent{margin-top:26px;width:100%;max-width:420px;aspect-ratio:240/120; position:relative} .hero__accent .lottie,.hero__accent .fb-hero{position:absolute;inset:0;width:100%;height:100%} .hero__accent .fb-hero{width:100%;height:100%} /* ---- 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-size:.78rem;font-weight:500;color:var(--ink); margin-bottom:6px;letter-spacing:.01em} .field .req{color:var(--gold)} .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} /* ============================================== 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);border-radius:var(--radius);overflow:hidden;background:#fff} .stat{padding:18px 16px;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.7rem,4.5vw,2.3rem); color:var(--brand);line-height:1;letter-spacing:-.02em} .stat__l{margin-top:7px;font-size:.82rem;color:var(--muted);line-height:1.25} .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,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:40px;height:40px;display:grid;place-items:center} .trust-item__icon .lottie{width:34px;height:34px} .trust-item__t{font-size:.7rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--gold)} .trust-item__v{font-weight:500;font-size:.92rem;color:var(--ink);line-height:1.25;margin-top:2px} /* ============================================ WHY METHOD (§04) ========== */ .method{padding-block:clamp(30px,4.2vw,56px);background:var(--paper-2); border-block:1px solid var(--hair)} .method__grid{display:grid;gap:clamp(22px,3vw,38px);grid-template-columns:1fr} @media (min-width:920px){.method__grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:start}} .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.55} .method__list{margin-top:22px;display:grid;gap:0} .method__list li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start; padding:15px 0;border-top:1px solid var(--hair);font-size:.96rem} .method__list li:last-child{border-bottom:1px solid var(--hair)} .method__list .n{font-family:var(--mono);font-size:.8rem;color:var(--gold);padding-top:2px} .method__cta{margin-top:24px;display:flex;flex-wrap:wrap;gap:14px;align-items:center} /* lift the markets visual — restyle wrapper to match ledger theme */ .method .mkt-viz{border:1px solid var(--hair) !important;border-radius:var(--radius) !important; box-shadow:var(--shadow-1) !important; --mkt-paper:#fff;--mkt-brand:#13292a;--mkt-up:#168a4d;--mkt-down:#7f9a8f; --mkt-gold:#c68a2e;--mkt-grid:#eceadf;--mkt-axis:#565f5f;--mkt-line:#c68a2e} .method .mkt-title{font-family:var(--disp) !important;font-weight:600 !important} .method .mkt-chip b{font-family:var(--disp) !important} .method .mkt-viz{font-family:var(--sans) !important} /* ============================================ 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);border-radius:var(--radius); background:#fff;overflow:hidden} .includes li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start; padding:15px 18px;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:1px solid var(--hair);border-radius:var(--radius); background:var(--brand);color:#fff;padding:24px 22px;overflow:hidden} .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);border-radius:var(--radius); overflow:hidden;background:var(--brand);aspect-ratio:4/5;box-shadow:var(--shadow-1)} .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); border-left:3px solid var(--gold);border-radius:var(--radius);padding:11px 14px;box-shadow:var(--shadow-1); 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:18px 22px;border-left:3px solid var(--gold); background:#fff;border-radius:0 var(--radius) var(--radius) 0;border:1px solid var(--hair);border-left:3px solid var(--gold)} .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); border-radius:var(--radius);padding:10px 14px;background:#fff} .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)} .reviews__wall{margin-top:28px} /* desktop: masonry-ish columns wall */ @media (min-width:760px){ .reviews__wall{columns:3;column-gap:18px} .review{break-inside:avoid;margin-bottom:18px} } /* mobile: carousel */ @media (max-width:759px){ .reviews__wall{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory; margin-inline:calc(var(--gutter)*-1);padding:4px var(--gutter) 12px; -webkit-overflow-scrolling:touch;scrollbar-width:none} .reviews__wall::-webkit-scrollbar{display:none} .review{flex:0 0 84%;scroll-snap-align:start} } .review{background:#fff;border:1px solid var(--hair);border-radius:var(--radius); padding:18px 18px 16px;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.15} .review__name{font-weight:700;font-size:.95rem} .review__src{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} .hero-accent-svg{display:block} .hero-accent-svg svg{width:100%;height:auto;display:block} @media (prefers-reduced-motion:no-preference){.hero-accent-svg .fb-hero-line{stroke-dasharray:380;animation:heroDraw 1.2s .15s cubic-bezier(.2,.7,.3,1) both}} @keyframes heroDraw{from{stroke-dashoffset:380}to{stroke-dashoffset:0}} .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} /* ============================================ HOW IT WORKS (§08) ======= */ .how{padding-block:clamp(30px,4.2vw,56px);background:var(--brand);color:#fff;position:relative;overflow:hidden} .how__bull{position:absolute;left:-4%;bottom:-10%;width:min(46vw,460px);color:#fff;opacity:.04;pointer-events:none} .how .kicker{color:#fff}.how .kicker::after{background:rgba(255,255,255,.2)}.how .kicker .idx{color:var(--gold)} .how 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;color:#fff;max-width:20ch} .how__steps{margin-top:30px;display:grid;gap:18px;grid-template-columns:1fr;position:relative} @media (min-width:760px){.how__steps{grid-template-columns:repeat(3,1fr);gap:0}} @media (max-width:759px){ .how__steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory; margin-inline:calc(var(--gutter)*-1);padding:4px var(--gutter) 12px;gap:14px;scrollbar-width:none} .how__steps::-webkit-scrollbar{display:none} .how-step{flex:0 0 80%;scroll-snap-align:start} } .how-step{position:relative;padding:24px 22px;background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);border-radius:var(--radius)} @media (min-width:760px){ .how-step{background:transparent;border:0;border-right:1px solid rgba(255,255,255,.14);padding:8px 28px 8px 0;margin-right:28px} .how-step:last-child{border-right:0;margin-right:0} } .how-step__n{font-family:var(--mono);font-weight:500;font-size:.82rem;color:var(--gold); display:inline-flex;align-items:center;gap:.7ch} .how-step__n .num{display:grid;place-items:center;width:30px;height:30px;border-radius:50%; border:1.5px solid var(--gold);font-size:.9rem} .how-step h3{font-family:var(--disp);font-weight:600;font-size:1.25rem;margin-top:14px;color:#fff;line-height:1.15} .how-step p{margin-top:9px;color:rgba(255,255,255,.74);font-size:.92rem;line-height:1.5} .how__progress{margin-top:24px} .how__cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px;align-items:center} .how .compliance{color:rgba(255,255,255,.6)}.how .compliance::before{background:var(--gold)} /* ============================================ PRICING (§09) ============ */ .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);border-top:3px solid var(--brand); border-radius:var(--radius);padding:clamp(22px,3vw,30px);box-shadow:var(--shadow-1)} .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:.72rem;color:var(--cta);border:1px solid var(--cta);border-radius:2px;padding:3px 7px} .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);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)} /* ============================================ 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 h4{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%);transition:transform .3s ease} .mobile-cta.is-shown{transform:translateY(0)} .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} .wa-float:hover{transform:translateY(-2px)} .wa-float svg{width:24px;height:24px} .wa-float__txt{white-space:nowrap} @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: visible by default; only animates under no-preference + html.js */ @media (prefers-reduced-motion:no-preference){ html.js .reveal:not(.hero__copy):not(.hero__form){opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)} html.js .reveal.is-in{opacity:1;transform:none} html.js .reveal-stagger>*{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease} html.js .reveal-stagger.is-in>*{opacity:1;transform:none} html.js .reveal-stagger.is-in>*:nth-child(2){transition-delay:.06s} html.js .reveal-stagger.is-in>*:nth-child(3){transition-delay:.12s} html.js .reveal-stagger.is-in>*:nth-child(4){transition-delay:.18s} html.js .reveal-stagger.is-in>*:nth-child(5){transition-delay:.24s} html.js .reveal-stagger.is-in>*:nth-child(6){transition-delay:.30s} } /* 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)} :root{--track:#d7dad3} .fb-hero-line{stroke-dasharray:340} @media (prefers-reduced-motion:no-preference){ html.js .fb-hero-line{stroke-dashoffset:340;animation:fb-draw 1.4s ease-out forwards} } @keyframes fb-draw{to{stroke-dashoffset:0}}