/* ══════════════════════════════════════════════════════════ SALECOLOGY AI — DESIGN SYSTEM Shared stylesheet for the new site. FONTS: currently Figtree as a stand-in for MUSEO SANS. To switch: add your Adobe Fonts to each page's , then change --sans below to the Adobe family name (e.g. 'museo-sans'). ══════════════════════════════════════════════════════════ */ :root{ --sans:'Figtree',system-ui,-apple-system,sans-serif; /* ← swap to 'museo-sans' */ --mono:'IBM Plex Mono',ui-monospace,monospace; --serif:'Instrument Serif',Georgia,serif; --cream-50:#FFFEFA; --cream-100:#FAFAF5; --cream-200:#F4F3EC; --cream-300:#EDEBE0; --cream-400:#DDD9C9; --navy-950:#000A1C; --navy-900:#000C22; --navy-800:#001233; --navy-700:#001846; --navy-600:#001E61; --navy-300:#7C96D6; --navy-100:#EDF1F9; --magenta:#D50058; --magenta-700:#B0004A; --magenta-soft:#FCE9F1; --sky:#0496FF; --sky-200:#8FD0FF; --sky-soft:#E4F1FF; --ink:#001E61; --ink-soft:#3A4F73; --muted:#6B7A94; --green:#12B866; --ease:cubic-bezier(.16,1,.3,1); --maxw:1180px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:var(--sans);background:var(--cream-100);color:var(--ink);font-size:16px;line-height:1.6;letter-spacing:-.006em;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ::selection{background:var(--magenta);color:#fff} h1,h2,h3,h4{font-family:var(--sans);font-weight:800;letter-spacing:-.028em;line-height:1.04} .display{font-size:clamp(2.5rem,1.5rem + 3.5vw,3.85rem);letter-spacing:-.032em;line-height:1.05} .h2{font-size:clamp(2rem,1.25rem + 3.1vw,3.1rem);letter-spacing:-.028em;line-height:1.08} .h3{font-size:clamp(1.4rem,1.1rem + 1.5vw,1.95rem);letter-spacing:-.02em;line-height:1.16;font-weight:800} .h4{font-size:1.22rem;letter-spacing:-.014em;line-height:1.3;font-weight:700} .lead{font-size:clamp(1.06rem,1rem + .42vw,1.24rem);line-height:1.56;color:var(--ink-soft);font-weight:400} .body-lg{font-size:1.08rem;line-height:1.62;color:var(--ink-soft)} p{color:var(--ink-soft)} .small{font-size:.9rem;color:var(--muted)} .eyebrow{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--magenta);display:inline-block;margin-bottom:1.1rem} .eyebrow.on-dark{color:var(--sky-200)} /* Instrument Serif is a DISPLAY serif. Only use it above ~1.6rem. At body sizes it reads thin and looks like a mistake. */ .serif{font-family:var(--serif);font-weight:400} .em{color:var(--magenta)} .metric{font-family:var(--mono);font-weight:600;letter-spacing:-.04em;line-height:.92} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .sec{padding:clamp(4.5rem,3rem + 6vw,7rem) 0} .sec-sm{padding:clamp(2.8rem,2rem + 3vw,4rem) 0} .dark{background:var(--navy-950);color:var(--cream-100)} .dark p{color:#A9BAD8} .dark h1,.dark h2,.dark h3,.dark h4{color:var(--cream-50)} .tint{background:var(--cream-200)} .tint-3{background:var(--cream-300)} .grain::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .grain>*{position:relative;z-index:1} section{position:relative} /* NAV */ .nav{position:sticky;top:0;z-index:100;background:rgba(250,250,245,.85);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid rgba(0,30,97,.08)} .nav .inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:66px;display:flex;align-items:center;justify-content:space-between;gap:20px} .logo{display:flex;align-items:center;font-weight:800;font-size:1.34rem;letter-spacing:-.035em;color:var(--navy-600)} .logo sup{font-size:.4em;font-weight:500;top:-.7em;position:relative} .logo .ai{display:inline-flex;align-items:center;font-size:.62rem;font-weight:700;letter-spacing:.08em;color:#fff;background:var(--sky);padding:3px 6px;border-radius:5px;margin-left:7px} .navlinks{display:flex;align-items:center;gap:24px} .navlinks a{font-size:.9rem;font-weight:600;color:var(--ink-soft);position:relative;transition:color .14s} .navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--magenta);transform:scaleX(0);transition:transform .18s var(--ease)} .navlinks a:hover{color:var(--navy-600)} .navlinks a:hover::after{transform:scaleX(1)} @media(max-width:1120px){.navlinks{display:none}} /* BUTTONS */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-weight:700;font-size:.97rem;letter-spacing:-.01em;padding:14px 24px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:background .14s,border-color .14s,transform .14s var(--ease)} .btn svg{width:15px;height:15px;flex:none} .btn-pri{background:var(--magenta);color:#fff;box-shadow:0 1px 2px rgba(0,30,97,.08),0 10px 24px -12px rgba(213,0,88,.55)} .btn-pri:hover{background:var(--magenta-700);transform:translateY(-1px)} .btn-sec{background:transparent;color:var(--navy-600);border-color:rgba(0,30,97,.22)} .btn-sec:hover{border-color:var(--navy-600);background:rgba(0,30,97,.03)} .btn-onDark{background:rgba(255,255,255,.08);color:var(--cream-50);border-color:rgba(255,255,255,.22)} .btn-onDark:hover{background:rgba(255,255,255,.14)} .btn-sm{padding:9px 16px;font-size:.86rem;border-radius:8px} .btn-lg{padding:16px 28px;font-size:1.02rem} /* HERO */ .hero{padding:clamp(2.8rem,2rem + 3vw,4.5rem) 0 clamp(3.5rem,2rem + 5vw,5.5rem);overflow:hidden} .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,1rem + 4vw,4rem);align-items:center} @media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:2.75rem}} .hero h1{margin-bottom:1.4rem} .hero .lead{max-width:46ch;margin-bottom:1.7rem} .hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:1rem} .reassure{font-size:.87rem;color:var(--muted);max-width:48ch;line-height:1.55} .sectors{display:flex;flex-wrap:wrap;gap:7px;margin-top:1.9rem;padding-top:1.6rem;border-top:1px solid rgba(0,30,97,.1)} .sectors span{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid rgba(0,30,97,.14);border-radius:99px;padding:5px 11px} /* ENGINE PANEL (hero visual) */ .epanel{background:linear-gradient(168deg,var(--navy-800),var(--navy-950));border-radius:18px;padding:20px;border:1px solid rgba(255,255,255,.09);box-shadow:0 2px 4px rgba(0,30,97,.1),0 40px 74px -30px rgba(0,20,60,.55);position:relative;overflow:hidden} .epanel::after{content:"";position:absolute;top:-28%;right:-22%;width:330px;height:330px;pointer-events:none;background:radial-gradient(circle,rgba(4,150,255,.26),transparent 68%)} .epanel>*{position:relative;z-index:1} .ep-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.1)} .ep-head .t{font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--sky-200)} .livechip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#7EF0B0;background:rgba(18,184,102,.13);border:1px solid rgba(18,184,102,.34);padding:4px 9px;border-radius:99px} .livechip i{width:6px;height:6px;border-radius:99px;background:var(--green);animation:blink 1.8s infinite} @keyframes blink{0%,100%{opacity:1}50%{opacity:.35}} .erow{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:12px;margin-bottom:8px} .erow:last-of-type{margin-bottom:0} .erow .ic{width:36px;height:36px;border-radius:10px;background:rgba(4,150,255,.17);color:var(--sky-200);display:grid;place-items:center;flex:none} .erow .ic svg{width:18px;height:18px} .erow .lb{font-size:.88rem;font-weight:700;color:var(--cream-50);letter-spacing:-.012em} .erow .sb{font-size:.75rem;color:#8FA3C6} .erow .val{margin-left:auto;font-family:var(--mono);font-weight:600;font-size:1.15rem;color:var(--sky-200);letter-spacing:-.03em} .ep-foot{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;font-family:var(--mono);font-size:.68rem;color:#8FA3C6} /* OFFER BAR */ .offerbar{background:var(--navy-600);color:#fff;position:relative;overflow:hidden} .offerbar .inner{max-width:var(--maxw);margin:0 auto;padding:13px 24px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;text-align:center} .offerbar p{color:#DCE6F7;font-size:.92rem;margin:0} .offerbar b{color:#fff} .offerbar a{font-weight:700;font-size:.92rem;color:#fff;border-bottom:2px solid var(--magenta);padding-bottom:1px;white-space:nowrap} /* TICKER */ .ticker{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .track{display:flex;align-items:center;gap:56px;width:max-content;animation:scroll 48s linear infinite} .ticker:hover .track{animation-play-state:paused} @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .track img{height:28px;width:auto;flex:none;filter:grayscale(1) brightness(0) invert(1);opacity:.42;transition:opacity .2s} .track img:hover{opacity:.9} @media(max-width:768px){.track img{height:21px}.track{gap:36px}} /* PROBLEM */ .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(0,30,97,.1);border:1px solid rgba(0,30,97,.1);border-radius:16px;overflow:hidden} @media(max-width:860px){.pgrid{grid-template-columns:1fr}} .pcard{background:var(--cream-100);padding:2.2rem 1.9rem;transition:background .2s} .pcard:hover{background:var(--cream-50)} .pcard .n{font-family:var(--mono);font-size:.78rem;color:var(--magenta);letter-spacing:.08em;margin-bottom:2.4rem;display:block} .pcard h3{margin-bottom:.55rem} .pcard p{font-size:.97rem} .pcard .who{font-family:var(--mono);font-size:.68rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:1rem;display:block} /* CALC */ .calc{display:grid;grid-template-columns:.94fr 1.06fr;gap:clamp(2rem,1rem + 4vw,4rem);align-items:center} @media(max-width:920px){.calc{grid-template-columns:1fr;gap:2.5rem}} .calc-card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:clamp(1.5rem,1rem + 2vw,2.3rem)} .field{margin-bottom:1.4rem} .field label{display:block;font-size:.92rem;font-weight:700;color:var(--cream-50);margin-bottom:.6rem;letter-spacing:-.012em} .field .inputwrap{display:flex;align-items:center;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.16);border-radius:11px;padding:0 14px;transition:border-color .16s} .field .inputwrap:focus-within{border-color:var(--sky)} .field .pre{font-family:var(--mono);color:#8FA3C6;font-size:1rem;margin-right:2px} .field input{flex:1;background:transparent;border:0;outline:0;color:#fff;font-family:var(--mono);font-size:1.35rem;font-weight:600;padding:13px 0;letter-spacing:-.02em;width:100%} .field input::-webkit-outer-spin-button,.field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .field input[type=number]{-moz-appearance:textfield} .result .metric{font-size:clamp(2.8rem,2rem + 5.4vw,5.2rem);color:var(--magenta);display:block;margin:.2rem 0 .1rem} .result .metric.flash{animation:pop .5s var(--ease)} @keyframes pop{0%{transform:scale(.965);opacity:.6}100%{transform:scale(1);opacity:1}} /* ACTS */ .act{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,.5rem + 2vw,2.6rem);padding:2.3rem 0;border-top:1px solid rgba(0,30,97,.11)} .act:last-child{border-bottom:1px solid rgba(0,30,97,.11)} .act .num{font-family:var(--mono);font-weight:600;font-size:clamp(1.5rem,1rem + 1.8vw,2.2rem);color:var(--magenta);letter-spacing:-.04em;line-height:1;opacity:.85;min-width:2.6ch} .act-body{display:grid;grid-template-columns:.6fr 1fr;gap:clamp(1rem,.5rem + 2vw,3rem);align-items:baseline} @media(max-width:840px){.act-body{grid-template-columns:1fr;gap:.5rem}} .act h3{margin-bottom:.3rem} .act .promise{font-family:var(--sans);font-weight:600;font-size:1.04rem;letter-spacing:-.012em;color:var(--magenta);line-height:1.4} .act p{font-size:1rem} .act .tools{display:flex;flex-wrap:wrap;gap:7px;margin-top:.9rem} .act .tools a{font-size:.8rem;font-weight:600;color:var(--ink-soft);background:var(--cream-100);border:1px solid rgba(0,30,97,.14);border-radius:99px;padding:5px 11px;transition:all .15s} .act .tools a:hover{border-color:var(--magenta);color:var(--magenta);background:var(--magenta-soft)} /* APP MOCK */ .appwin{border-radius:14px;overflow:hidden;background:var(--navy-900);border:1px solid rgba(255,255,255,.1);box-shadow:0 1px 2px rgba(0,20,60,.1),0 40px 80px -30px rgba(0,20,60,.6)} .appbar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:rgba(0,0,0,.32);border-bottom:1px solid rgba(255,255,255,.07)} .appbar .d{width:9px;height:9px;border-radius:99px;background:rgba(255,255,255,.18)} .appbar .tt{font-family:var(--mono);font-size:.68rem;color:#8FA3C6;margin-left:8px} .appbar .st{margin-left:auto;font-family:var(--mono);font-size:.62rem;color:#7EF0B0;letter-spacing:.08em;text-transform:uppercase} .appbody{padding:15px} .bub{max-width:84%;padding:9px 13px;border-radius:13px;font-size:.85rem;line-height:1.45;margin-bottom:7px} .bub.ai{background:rgba(4,150,255,.16);color:#EAF3FF;border-top-left-radius:3px} .bub.them{background:rgba(255,255,255,.08);color:#D7E2F5;margin-left:auto;border-top-right-radius:3px} .recap{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:11px 13px;margin-top:10px} .recap .lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#7EF0B0;margin-bottom:7px} .recap .r{display:flex;justify-content:space-between;font-size:.8rem;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.07)} .recap .r:last-child{border:0} .recap .r span:first-child{color:#8FA3C6} .recap .r span:last-child{color:#EAF3FF;font-weight:600} /* VOICE */ .vwrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,1rem + 4vw,4rem);align-items:center} @media(max-width:900px){.vwrap{grid-template-columns:1fr}} .player{background:linear-gradient(168deg,var(--navy-800),var(--navy-950));border-radius:18px;padding:22px;border:1px solid rgba(255,255,255,.09);box-shadow:0 40px 74px -30px rgba(0,20,60,.5);position:relative;overflow:hidden} .player::after{content:"";position:absolute;top:-30%;right:-25%;width:320px;height:320px;pointer-events:none;background:radial-gradient(circle,rgba(4,150,255,.26),transparent 68%)} .player>*{position:relative;z-index:1} .wave{display:flex;align-items:center;justify-content:center;gap:3px;height:48px;margin:4px 0 14px} .wave i{width:3px;border-radius:3px;background:var(--sky);opacity:.4;height:8px} .player.playing .wave i{opacity:.95;animation:eq .9s ease-in-out infinite} @keyframes eq{0%,100%{height:7px}50%{height:30px}} .player.playing .wave i:nth-child(3n){animation-delay:.12s} .player.playing .wave i:nth-child(3n+1){animation-delay:.26s} .player.playing .wave i:nth-child(4n){animation-delay:.38s} .voice-tabs{display:inline-flex;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:99px;padding:3px;margin-bottom:14px} .voice-tabs button{font-family:var(--sans);font-weight:700;font-size:.8rem;color:#A9BAD8;background:transparent;border:0;padding:7px 16px;border-radius:99px;cursor:pointer;transition:all .16s} .voice-tabs button.on{background:var(--sky);color:#fff} .vlist{display:grid;gap:7px} .vrow{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:11px;padding:9px 11px;transition:background .16s,border-color .16s} .vrow:hover{background:rgba(255,255,255,.09)} .vrow.on{background:rgba(4,150,255,.15);border-color:rgba(4,150,255,.55)} .vrow .pbtn{width:33px;height:33px;border-radius:99px;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;flex:none} .vrow.on .pbtn{background:var(--sky)} .vrow .nm{font-weight:700;font-size:.92rem;color:var(--cream-50)} .vrow .ds{font-size:.74rem;color:#8FA3C6} .vrow .dur{margin-left:auto;font-family:var(--mono);font-size:.7rem;color:#8FA3C6} .pbar{height:4px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:14px} .pbar i{display:block;height:100%;width:0;background:var(--sky);border-radius:99px;transition:width .1s linear} .player-foot{display:flex;justify-content:space-between;margin-top:9px;font-family:var(--mono);font-size:.68rem;color:#8FA3C6} /* GROWTH PACK */ .pack{background:linear-gradient(165deg,var(--navy-800),var(--navy-950));border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:clamp(1.8rem,1rem + 3vw,3rem);position:relative;overflow:hidden} .pack::after{content:"";position:absolute;bottom:-35%;left:-12%;width:420px;height:420px;pointer-events:none;background:radial-gradient(circle,rgba(213,0,88,.3),transparent 66%)} .pack>*{position:relative;z-index:1} .packlist{display:grid;gap:11px;margin:1.7rem 0} .packitem{display:flex;align-items:center;gap:13px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:13px 15px} .packitem .tick{width:24px;height:24px;border-radius:99px;background:rgba(18,184,102,.18);color:#7EF0B0;display:grid;place-items:center;flex:none} .packitem .tick svg{width:13px;height:13px} .packitem .txt{font-size:.97rem;color:var(--cream-50);font-weight:600;letter-spacing:-.012em} .packitem .txt span{display:block;font-weight:400;font-size:.82rem;color:#8FA3C6;margin-top:2px} .packitem .wv{margin-left:auto;font-family:var(--mono);font-size:.82rem;color:#8FA3C6;white-space:nowrap} .packtotal{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.14);margin-bottom:1.6rem} .packtotal .lbl{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#8FA3C6} .packtotal .amt{font-family:var(--mono);font-weight:600;font-size:clamp(1.8rem,1.2rem + 2vw,2.6rem);letter-spacing:-.04em;color:#fff} .packtotal .amt s{color:#6B7E9E;font-size:.5em;margin-right:.5rem;text-decoration-thickness:2px} /* PROOF */ .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:900px){.tgrid{grid-template-columns:1fr}} .tcard{background:var(--cream-100);border:1px solid rgba(0,30,97,.11);border-radius:16px;padding:2rem 1.8rem;display:flex;flex-direction:column;transition:border-color .18s,transform .18s var(--ease)} .tcard:hover{border-color:rgba(0,30,97,.25);transform:translateY(-2px)} .tcard .big{font-family:var(--mono);font-weight:600;font-size:2.3rem;color:var(--magenta);letter-spacing:-.045em;line-height:1;margin-bottom:.4rem} .tcard .sect{font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:1.1rem;display:block} .tcard q{font-family:var(--sans);font-weight:500;font-size:1.06rem;line-height:1.5;letter-spacing:-.008em;color:var(--ink);flex:1;quotes:none;display:block} .tcard .attr{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid rgba(0,30,97,.11);display:flex;align-items:center;gap:11px} .tcard .attr img{height:26px;width:auto;flex:none} .tcard .attr .av{width:34px;height:34px;border-radius:99px;background:var(--navy-600);color:#fff;display:grid;place-items:center;font-size:.75rem;font-weight:700;flex:none} .tcard .attr .nm{font-size:.87rem;font-weight:700;color:var(--ink)} .tcard .attr .rl{font-size:.76rem;color:var(--muted)} /* FOUNDER */ .founder{display:grid;grid-template-columns:.76fr 1.24fr;gap:clamp(2rem,1rem + 4vw,4rem);align-items:center} @media(max-width:880px){.founder{grid-template-columns:1fr}} .founder .pic{border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(0,20,60,.45)} .founder .pic img{width:100%;object-fit:cover;aspect-ratio:4/5} .founder blockquote{font-family:var(--sans);font-weight:600;font-size:clamp(1.12rem,1rem + .55vw,1.3rem);line-height:1.5;letter-spacing:-.015em;color:var(--ink);margin-bottom:1.3rem} .books{display:flex;align-items:flex-end;gap:14px;margin-top:1.7rem} .books img{width:80px;border-radius:4px;box-shadow:0 14px 30px -14px rgba(0,20,60,.5);transform:rotate(-3deg);transition:transform .22s var(--ease)} .books img:nth-child(2){transform:rotate(2deg)} .books img:nth-child(3){transform:rotate(-1deg)} .books img:hover{transform:translateY(-5px) rotate(0)} /* PRICING */ .pricegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} @media(max-width:1020px){.pricegrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.pricegrid{grid-template-columns:1fr}} .pcard2{background:var(--cream-100);border:1px solid rgba(0,30,97,.13);border-radius:16px;padding:1.8rem 1.6rem;display:flex;flex-direction:column;position:relative;transition:border-color .18s} .pcard2:hover{border-color:rgba(0,30,97,.28)} .pcard2.feat{border-color:var(--navy-600);box-shadow:0 24px 50px -28px rgba(0,30,97,.4)} .pcard2 .tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem} .pcard2.feat .tag{color:var(--magenta)} .pcard2 .amt{font-family:var(--mono);font-weight:600;font-size:2.1rem;letter-spacing:-.045em;color:var(--ink);line-height:1} .pcard2 .per{font-size:.84rem;color:var(--muted);font-family:var(--sans);font-weight:500} .pcard2 .desc{font-size:.9rem;color:var(--ink-soft);margin:.8rem 0 1.2rem;flex:1;line-height:1.5} .badge{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--navy-600);color:#fff;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 11px;border-radius:99px;white-space:nowrap} .risk{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:2.6rem} @media(max-width:960px){.risk{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.risk{grid-template-columns:1fr}} .risk div{display:flex;gap:9px;align-items:flex-start;font-size:.88rem;color:var(--ink-soft);line-height:1.45} .risk svg{width:16px;height:16px;color:var(--green);flex:none;margin-top:2px} /* FAQ */ .faq{max-width:820px} .faq details{border-bottom:1px solid rgba(0,30,97,.12);padding:1.3rem 0} .faq summary{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;cursor:pointer;list-style:none;font-weight:800;font-size:1.1rem;letter-spacing:-.018em;color:var(--ink);line-height:1.35} .faq summary::-webkit-details-marker{display:none} .faq summary i{font-style:normal;font-size:1.5rem;color:var(--magenta);line-height:1;transition:transform .22s var(--ease);flex:none} .faq details[open] summary i{transform:rotate(45deg)} .faq p{margin-top:.85rem;font-size:1rem;max-width:70ch} /* FREE TASTER */ .freecard{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(2rem,1rem + 4vw,3.6rem);align-items:center; background:var(--cream-50);border:1px solid rgba(0,30,97,.13);border-left:4px solid var(--magenta); border-radius:18px;padding:clamp(1.8rem,1rem + 3vw,3.2rem)} @media(max-width:920px){.freecard{grid-template-columns:1fr}} .freesteps{display:grid;gap:11px;margin-top:1.8rem} .freesteps>div{display:flex;align-items:center;gap:12px} .freesteps .s{width:26px;height:26px;border-radius:99px;background:var(--navy-600);color:#fff;display:grid;place-items:center; font-family:var(--mono);font-size:.74rem;font-weight:600;flex:none} .freesteps p{font-size:.97rem;color:var(--ink-soft);margin:0} .lrow{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09); border-radius:10px;padding:9px 11px;margin-bottom:7px} .lav{width:30px;height:30px;border-radius:99px;background:var(--sky);color:#fff;display:grid;place-items:center; font-size:.68rem;font-weight:700;flex:none} .ln{font-size:.86rem;font-weight:700;color:var(--cream-50)} .ls{font-size:.72rem;color:#8FA3C6} .lfit{margin-left:auto;font-family:var(--mono);font-weight:600;font-size:.95rem;color:var(--sky-200)} .pull{text-align:center;max-width:900px;margin:0 auto} .pull .q{font-family:var(--serif);font-size:clamp(2rem,1.4rem + 3vw,3.3rem);line-height:1.18;color:var(--navy-600)} footer{background:var(--navy-950);color:#8FA3C6;padding:4rem 0 2rem} footer .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px;margin-bottom:3rem} @media(max-width:820px){footer .cols{grid-template-columns:1fr 1fr}} @media(max-width:560px){footer .cols{grid-template-columns:1fr;gap:26px}} footer h5{font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:#fff;margin-bottom:1rem;font-weight:500} footer ul{list-style:none;display:grid;gap:9px} footer a{font-size:.9rem;color:#8FA3C6;transition:color .15s} footer a:hover{color:var(--sky-200)} footer .base{border-top:1px solid rgba(255,255,255,.09);padding-top:1.5rem;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.8rem;color:#6B7E9E} .rv{opacity:0;transform:translateY(14px);transition:opacity .52s var(--ease),transform .52s var(--ease)} .rv.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} .track{animation:none;flex-wrap:wrap;justify-content:center;width:auto} .ticker{-webkit-mask-image:none;mask-image:none} .player.playing .wave i{animation:none} *{scroll-behavior:auto!important} } /* ══════════ FORMS ══════════ */ .sform{display:grid;gap:12px;margin-top:1.8rem;max-width:460px} .sform .row{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:560px){.sform .row{grid-template-columns:1fr}} .sform label{display:block;font-size:.82rem;font-weight:700;color:var(--ink);margin-bottom:6px;letter-spacing:-.01em} .sform input,.sform textarea{ width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);background:#fff; border:1px solid rgba(0,30,97,.2);border-radius:10px;padding:13px 14px;outline:0; transition:border-color .15s,box-shadow .15s; } .sform input::placeholder,.sform textarea::placeholder{color:#9BA8BE} .sform input:focus,.sform textarea:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(4,150,255,.14)} .sform .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden} .sform button{width:100%;margin-top:4px} /* ══════════ CONFIRMATION PAGES ══════════ */ .conf{min-height:78vh;display:flex;align-items:center;padding:clamp(3rem,2rem + 4vw,6rem) 0} .conf-inner{max-width:760px;margin:0 auto;text-align:center} .conf .badge-ok{ width:74px;height:74px;border-radius:999px;margin:0 auto 2rem;display:grid;place-items:center; background:rgba(18,184,102,.14);border:1px solid rgba(18,184,102,.4);color:var(--green); } .conf .badge-ok svg{width:34px;height:34px} .steps-next{display:grid;gap:14px;margin:2.6rem auto 0;max-width:620px;text-align:left} .step-next{display:flex;gap:16px;align-items:flex-start;background:var(--cream-50); border:1px solid rgba(0,30,97,.12);border-radius:14px;padding:18px 20px} .dark .step-next{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)} .step-next .sn{width:30px;height:30px;border-radius:999px;background:var(--navy-600);color:#fff; display:grid;place-items:center;font-family:var(--mono);font-size:.8rem;font-weight:600;flex:none} .dark .step-next .sn{background:var(--sky)} .step-next h4{font-size:1.02rem;margin-bottom:3px} .step-next p{font-size:.92rem;margin:0} /* ══════════ TOOL CARDS ══════════ */ .toolgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:960px){.toolgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.toolgrid{grid-template-columns:1fr}} .tool{display:flex;flex-direction:column;background:var(--cream-50);border:1px solid rgba(0,30,97,.13); border-radius:16px;padding:1.6rem;transition:border-color .18s,transform .18s var(--ease),box-shadow .18s} .tool:hover{border-color:rgba(0,30,97,.3);transform:translateY(-3px);box-shadow:0 22px 44px -26px rgba(0,30,97,.34)} .tool .ti{width:44px;height:44px;border-radius:12px;background:var(--sky-soft);color:var(--navy-600); display:grid;place-items:center;margin-bottom:1rem} .tool.lead .ti{background:linear-gradient(145deg,#0496FF,#001E61);color:#fff} .tool.lead{border-color:var(--sky);box-shadow:0 16px 40px -26px rgba(4,150,255,.5)} .tool .ti svg{width:22px;height:22px} .tool h3{font-size:1.14rem;letter-spacing:-.02em;margin-bottom:.3rem} .tool .tl{font-family:var(--sans);font-weight:600;font-size:.95rem;letter-spacing:-.012em;color:var(--magenta);margin-bottom:.6rem;line-height:1.4} .tool p{font-size:.93rem;flex:1;margin-bottom:1.1rem} .tool .go{font-size:.86rem;font-weight:700;color:var(--navy-600);display:inline-flex;align-items:center;gap:7px} .tool .go svg{width:14px;height:14px;transition:transform .16s var(--ease)} .tool:hover .go svg{transform:translateX(4px)} .toolhead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .chip-live{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:.6rem;font-weight:600; letter-spacing:.09em;text-transform:uppercase;color:#0A8A49;background:#E2F7EC;border:1px solid #B7E6CD; padding:4px 9px;border-radius:99px;white-space:nowrap} .chip-live i{width:5px;height:5px;border-radius:99px;background:var(--green)} .grouphead{display:flex;align-items:flex-end;gap:18px;margin:3.4rem 0 1.6rem} .grouphead:first-of-type{margin-top:0} .grouphead .gn{font-family:var(--mono);font-weight:600;font-size:2.6rem;color:rgba(0,30,97,.13);letter-spacing:-.04em;line-height:1} .grouphead h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.2rem);letter-spacing:-.026em;margin-bottom:.2rem} .grouphead p{font-size:.98rem;margin:0} /* ══════════ TOOL PAGE BITS ══════════ */ .statstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;text-align:center} @media(max-width:760px){.statstrip{grid-template-columns:repeat(2,1fr);gap:20px}} .statstrip .v{font-family:var(--mono);font-weight:600;font-size:clamp(1.9rem,1.2rem + 2.2vw,2.9rem); letter-spacing:-.045em;color:var(--magenta);line-height:1} .statstrip .l{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase; color:var(--muted);margin-top:.6rem;line-height:1.4} .dark .statstrip .l{color:#8FA3C6} .featlist{display:grid;gap:14px;margin:1.6rem 0 2rem} .featlist li{list-style:none;display:flex;gap:13px;font-size:1rem;color:var(--ink-soft);line-height:1.55} .featlist .fk{width:22px;height:22px;border-radius:999px;background:var(--sky-soft);color:var(--navy-600); display:grid;place-items:center;flex:none;margin-top:2px} .featlist .fk svg{width:12px;height:12px} .featlist b{color:var(--ink);font-weight:700} .split{display:grid;grid-template-columns:.62fr 1fr;gap:clamp(2rem,1rem + 4vw,4rem);align-items:center} @media(max-width:900px){.split{grid-template-columns:1fr}} .split.flip{grid-template-columns:1fr .62fr} @media(max-width:900px){.split.flip{grid-template-columns:1fr}} .whogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media(max-width:860px){.whogrid{grid-template-columns:1fr}} .whocard{border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:1.8rem} .whocard h3{font-size:1.24rem;margin-bottom:.5rem} .whocard p{font-size:.95rem} .pricebox{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.5rem,1rem + 3vw,2.6rem);align-items:center} @media(max-width:880px){.pricebox{grid-template-columns:1fr}} .pricepanel{background:var(--cream-50);border:1px solid var(--navy-600);border-radius:18px;padding:2rem; box-shadow:0 24px 50px -30px rgba(0,30,97,.4);position:relative} .pricepanel .tagtop{position:absolute;top:-10px;left:2rem;background:var(--navy-600);color:#fff;font-family:var(--mono); font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 11px;border-radius:99px} .mathsbox{background:var(--cream-200);border:1px solid rgba(0,30,97,.11);border-radius:18px;padding:2rem} .mathstats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:1.4rem} .mathstats div{border-left:2px solid rgba(213,0,88,.34);padding-left:12px} .mathstats .v{font-family:var(--mono);font-weight:600;font-size:1.5rem;letter-spacing:-.04em;color:var(--ink)} .mathstats .l{font-size:.78rem;color:var(--muted);margin-top:2px}