/* =========================================================== NoFooly — marketing site THEME SYSTEM — DARK default + LIGHT toggle (data-theme on ). Tokens mirror the cockpit (admin/index.html) EXACTLY so site == app and the handoff is seamless. Toggle persists to localStorage 'nf_theme' (shared key with the app), read pre-paint to avoid flash. Site default = NIGHT per brand decision; if 'nf_theme' is unset → dark. =========================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); /* DARK / NIGHT — DEFAULT (refined near-black, NOT navy) */ :root, html[data-theme="dark"]{ /* surfaces */ --bg:#0a0a0c; --bg2:#0d0d10; --panel:#121214; --card:#161619; --card2:#1d1d22; --line:#26262d; --txt:#f4f4f6; --dim:#9a9aa3; --faint:#5f6068; --mut:#7a7a86; /* accents */ --accent:#7b5cff; --accent2:#ff5fa2; --blue:#5aa9ff; --good:#34d399; --warn:#fbbf24; --bad:#f87171; --gold:#e0b341; /* needs-your-OK badge */ --okbg:#3a2c0a; --oktx:#e0b341; /* derived surfaces (swap per theme so light works without per-rule overrides) */ --inset:#101013; --inset2:#0c0c0f; --hover:#ffffff0d; --sheen:#ffffff1f; --ovl:#ffffff14; /* input field bg */ --field:#0c0c0f; /* elevation — dark uses hairline borders + minimal shadow */ --el-1:0 1px 2px #00000040; --el-2:0 8px 28px #00000055; --el-soft:0 1px 2px #00000040; --shadow-card:0 30px 70px #0009; /* spacing + radius + motion */ --r-lg:20px; --r-md:14px; --r-sm:11px; --r-pill:40px; --ease:cubic-bezier(.4,0,.2,1); --t:.2s; --wrap:1140px; } /* LIGHT — clean, warm, soft-shadow elevation (not just borders) */ html[data-theme="light"]{ --bg:#f6f7f9; --bg2:#eef0f4; --panel:#ffffff; --card:#ffffff; --card2:#f4f5f7; --line:#e7e8ec; --txt:#15161a; --dim:#6b6e78; --faint:#9a9da7; --mut:#8b8d98; --accent:#6c5ce7; --accent2:#ff5fa2; --blue:#2f6fed; --good:#16a34a; --warn:#d97706; --bad:#dc2626; --gold:#d99a00; --okbg:#fff0d6; --oktx:#9a6a00; --inset:#f4f5f7; --inset2:#eef0f4; --hover:#0000000a; --sheen:#15161a0f; --ovl:#15161a14; --field:#ffffff; /* soft shadows give LIGHT its depth */ --el-1:0 1px 2px rgba(20,22,40,.04), 0 4px 16px rgba(20,22,40,.05); --el-2:0 4px 14px rgba(20,22,40,.07), 0 12px 34px rgba(20,22,40,.07); --el-soft:0 1px 2px rgba(20,22,40,.05); --shadow-card:var(--el-2); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;font-family:'Inter','Segoe UI',system-ui,sans-serif; background:var(--bg);color:var(--txt);-webkit-font-smoothing:antialiased; line-height:1.55;overflow-x:hidden; } a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} ::selection{background:var(--accent);color:#fff} ::-webkit-scrollbar{width:10px}::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} /* ---------- nav ---------- */ header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px); background:color-mix(in srgb,var(--bg) 85%,transparent);border-bottom:1px solid var(--line)} .nav .wrap{display:flex;align-items:center;gap:18px;height:66px} .brand{display:flex;align-items:center;gap:9px;font-weight:900;font-size:21px;letter-spacing:-.4px} .brand .pip{width:9px;height:9px;border-radius:50%;background:var(--accent2); box-shadow:0 0 12px var(--accent2);display:inline-block} .brand b{color:var(--txt)} .nav .links{display:flex;align-items:center;gap:26px;margin-left:auto} .nav .links a.l{color:var(--dim);font-size:14.5px;font-weight:500;transition:var(--t)} .nav .links a.l:hover{color:var(--txt)} .nav .links a.l.on{color:var(--txt)} /* theme toggle (sun/moon) — mirrors the app's .themetog */ .themetog{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--card); color:var(--dim);cursor:pointer;font-size:16px;line-height:1;display:grid;place-items:center;flex:0 0 auto; box-shadow:var(--el-soft);transition:border-color var(--t) var(--ease),color var(--t) var(--ease),transform var(--t) var(--ease)} .themetog:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)} .themetog::before{content:"☀️"} html[data-theme="dark"] .themetog::before{content:"🌙"} /* hamburger (mobile only) */ .navtoggle{display:none;width:40px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--card); cursor:pointer;flex:0 0 auto;padding:0;align-items:center;justify-content:center} .navtoggle span{position:relative;width:18px;height:2px;background:var(--txt);border-radius:2px;transition:var(--t)} .navtoggle span::before,.navtoggle span::after{content:"";position:absolute;left:0;width:18px;height:2px; background:var(--txt);border-radius:2px;transition:var(--t)} .navtoggle span::before{top:-6px}.navtoggle span::after{top:6px} .nav.open .navtoggle span{background:transparent} .nav.open .navtoggle span::before{top:0;transform:rotate(45deg)} .nav.open .navtoggle span::after{top:0;transform:rotate(-45deg)} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; font-weight:700;font-size:14.5px;padding:11px 20px;border-radius:var(--r-pill); border:1px solid transparent;cursor:pointer;transition:var(--t);white-space:nowrap} /* primary CTA = the ONE place the purple→pink gradient lives (+ brand mark) */ .btn-primary{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 33%,transparent)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 45%,transparent)} .btn-ghost{color:var(--txt);border-color:var(--line);background:var(--card)} .btn-ghost:hover{border-color:var(--accent);background:var(--hover)} .btn-lg{padding:15px 30px;font-size:16px} /* ---------- generic section ---------- */ section{position:relative} .sec{padding:84px 0} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700; letter-spacing:1.4px;text-transform:uppercase;color:var(--accent2);margin-bottom:16px} .eyebrow::before{content:"";width:22px;height:2px;background:var(--accent2);border-radius:2px} h1{font-size:clamp(38px,6vw,62px);line-height:1.04;font-weight:900;letter-spacing:-1.5px;margin:0} h2{font-size:clamp(28px,4vw,42px);line-height:1.1;font-weight:800;letter-spacing:-1px;margin:0 0 16px} h3{font-size:19px;font-weight:700;margin:0 0 8px;letter-spacing:-.3px} .lead{font-size:clamp(17px,2vw,20px);color:var(--dim);max-width:640px;line-height:1.6} .center{text-align:center}.center .lead{margin-left:auto;margin-right:auto} /* brand-mark gradient — second place the gradient is allowed (headline emphasis) */ .grad{background:linear-gradient(120deg,var(--accent) 10%,var(--accent2) 95%); -webkit-background-clip:text;background-clip:text;color:transparent} /* ---------- hero ---------- */ .hero{padding:96px 0 70px;position:relative;overflow:hidden} .hero::before{content:"";position:absolute;inset:0;z-index:-1; background: radial-gradient(680px 420px at 78% 8%,color-mix(in srgb,var(--accent2) 16%,transparent),transparent 70%), radial-gradient(720px 480px at 12% 30%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%);} .hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center} .hero .lead{margin:22px 0 30px} .hero .cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .hero .signin{font-size:14px;color:var(--dim)} .hero .signin a{color:var(--blue);font-weight:600} .hero .signin a:hover{text-decoration:underline} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}} /* ---------- hero feed mock (mirrors the app's .nf-* feed cards) ---------- */ .feedmock{display:flex;flex-direction:column;gap:14px;position:relative} .feedmock .fm-lbl{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--faint); letter-spacing:1px;text-transform:uppercase;font-weight:700} .feedmock .fm-lbl .dot{width:8px;height:8px;border-radius:50%;background:var(--good); box-shadow:0 0 9px var(--good);animation:pulse 2s var(--ease) infinite} .fmcard{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden; box-shadow:var(--shadow-card)} .fmcard.ok{border-color:color-mix(in srgb,var(--gold) 38%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 16%,transparent),var(--shadow-card)} .fmcard.ok .fm-hd{background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 12%,transparent),transparent)} .fm-hd{display:flex;align-items:center;gap:12px;padding:14px 16px 11px} .fm-av{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px;flex:0 0 auto; background:var(--inset);border:1px solid var(--line)} .fm-meta{flex:1;min-width:0} .fm-name{font-weight:800;font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .fm-role{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:20px; background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)} .fm-sub{font-size:11.5px;color:var(--faint);margin-top:1px} .fm-okflag{margin-left:auto;display:flex;align-items:center;gap:6px;background:var(--okbg); border:1px solid color-mix(in srgb,var(--gold) 33%,transparent);color:var(--oktx);font-size:11px;font-weight:800; padding:5px 11px;border-radius:20px;white-space:nowrap} .fm-body{padding:0 16px 14px} .fm-lead{font-weight:600;color:var(--txt);font-size:14.5px;margin:0 0 4px} .fm-line{font-size:13.5px;color:var(--dim);margin:0} .fm-thumb{margin-top:12px;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--card)} .fm-tiles{display:flex;gap:8px;padding:12px} .fm-tile{flex:1;height:74px;border-radius:10px;border:1px solid var(--line);background:var(--card2);position:relative;overflow:hidden} .fm-tile::before{content:'';position:absolute;left:9px;right:9px;bottom:9px;height:6px;border-radius:4px;background:var(--sheen)} .fm-tile::after{content:'';position:absolute;left:9px;right:28px;bottom:19px;height:6px;border-radius:4px;background:var(--sheen)} .fm-tile i{position:absolute;top:9px;left:9px;width:22px;height:22px;border-radius:50%;background:var(--accent)} .fm-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 16px;border-top:1px solid var(--line)} .fm-btn{border:1px solid var(--line);background:var(--card);color:var(--txt);border-radius:11px;padding:8px 14px; font:inherit;font-weight:800;font-size:12.5px;cursor:pointer;transition:var(--t) var(--ease); display:flex;align-items:center;gap:6px} .fm-btn:hover{border-color:var(--accent);transform:translateY(-1px)} .fm-btn.gold{background:var(--gold);border-color:transparent;color:#3a2c00; box-shadow:0 6px 18px color-mix(in srgb,var(--gold) 27%,transparent)} /* ---------- audience strip ---------- */ .audience{border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:var(--bg2);padding:34px 0} .audience .row{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center;justify-content:center} .audience .tag{font-size:15px;color:var(--dim);font-weight:600;display:flex;align-items:center;gap:9px} .audience .tag span{font-size:20px} .audience .pre{width:100%;text-align:center;color:var(--faint);font-size:13px; letter-spacing:1px;text-transform:uppercase;font-weight:700;margin-bottom:6px} /* ---------- steps ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px} .step{background:var(--card);border:1px solid var(--line);box-shadow:var(--el-1); border-radius:var(--r-lg);padding:26px;position:relative;transition:var(--t)} .step:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--el-2)} .step .n{font-size:13px;font-weight:800;color:var(--accent2);letter-spacing:1px;margin-bottom:14px} .step .ic{font-size:30px;margin-bottom:12px} .step p{color:var(--dim);font-size:15px;margin:0} /* ---------- crew grid ---------- */ .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:16px;margin-top:42px} .card{background:var(--card);border:1px solid var(--line);box-shadow:var(--el-1); border-radius:var(--r-md);padding:20px;transition:var(--t);position:relative;overflow:hidden} .card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--el-2)} .card .av{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:25px; background:var(--inset);border:1px solid var(--line);margin-bottom:14px} .card .role{font-size:12.5px;color:var(--accent2);font-weight:600;margin-top:2px} .card p{color:var(--dim);font-size:14px;margin:10px 0 0} /* ---------- pillars ---------- */ .pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:42px} .pillar{display:flex;gap:16px;padding:22px;border-radius:var(--r-md); background:var(--panel);border:1px solid var(--line)} .pillar .ic{font-size:26px;flex:0 0 auto} .pillar h3{margin-bottom:5px} .pillar p{color:var(--dim);font-size:14.5px;margin:0} /* ---------- mission quote ---------- */ .quote{padding:70px 0;background: radial-gradient(700px 400px at 50% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%)} .quote blockquote{max-width:780px;margin:0 auto;text-align:center; font-size:clamp(22px,3.2vw,30px);line-height:1.4;font-weight:600;letter-spacing:-.5px} .quote .by{margin-top:24px;color:var(--faint);font-size:14px;letter-spacing:.5px} /* ---------- trust-story stops (the real approve-gate flow) ---------- */ .slider{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:42px} .stop{border:1px solid var(--line);border-radius:var(--r-md);padding:24px;background:var(--card);box-shadow:var(--el-1); position:relative;transition:var(--t)} .stop.mid{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset,var(--el-2)} .stop .lvl{font-size:24px;margin-bottom:10px} .stop .badge{position:absolute;top:-11px;left:24px;font-size:10.5px;font-weight:800;letter-spacing:1px; text-transform:uppercase;color:#fff;background:var(--accent);padding:3px 10px;border-radius:20px} .stop h3{margin-bottom:6px}.stop p{color:var(--dim);font-size:14px;margin:0} /* the real stage spine: Requested → Planned → In Progress → Needs your OK → Done */ .spine{display:flex;align-items:stretch;gap:8px;margin-top:42px;flex-wrap:wrap} .spine .snode{flex:1 1 0;min-width:120px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card); box-shadow:var(--el-1);padding:16px 14px;text-align:center;position:relative;transition:var(--t)} .spine .snode.gate{border-color:color-mix(in srgb,var(--gold) 50%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 22%,transparent),var(--el-1)} .spine .snode .se{font-size:24px;display:block;margin-bottom:8px} .spine .snode b{font-size:13.5px;letter-spacing:.2px;display:block} .spine .snode small{font-size:11.5px;color:var(--dim);display:block;margin-top:3px;line-height:1.35} .spine .snode.gate .badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:800; letter-spacing:.6px;text-transform:uppercase;background:var(--okbg);color:var(--oktx); border:1px solid color-mix(in srgb,var(--gold) 33%,transparent);padding:3px 10px;border-radius:20px;white-space:nowrap} /* ---------- waitlist / CTA band ---------- */ .cta{padding:78px 0} .ctabox{background:var(--card);border:1px solid var(--line);box-shadow:var(--el-2); border-radius:28px;padding:54px 40px;text-align:center;position:relative;overflow:hidden} .ctabox::before{content:"";position:absolute;inset:0; background:radial-gradient(500px 260px at 50% -20%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%);pointer-events:none} .wl-form{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:560px;margin:28px auto 0} .wl-form input{flex:1 1 220px;min-width:0;padding:14px 18px;border-radius:var(--r-pill); border:1px solid var(--line);background:var(--field);color:var(--txt);font-size:15px;font-family:inherit;transition:var(--t)} .wl-form input::placeholder{color:var(--faint)} .wl-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)} .wl-note{margin-top:14px;font-size:13px;color:var(--faint)} .wl-msg{margin-top:18px;font-size:15px;font-weight:600;min-height:22px} .wl-msg.ok{color:var(--good)}.wl-msg.err{color:var(--bad)} /* ---------- footer ---------- */ footer.foot{border-top:1px solid var(--line);background:var(--bg2);padding:46px 0 38px} .foot .grid{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-start} .foot .tag{color:var(--dim);font-size:14px;max-width:320px;margin-top:12px} .foot .links{display:flex;gap:40px;flex-wrap:wrap} .foot .col h4{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--faint);margin:0 0 12px} .foot .col a{display:block;color:var(--dim);font-size:14px;margin-bottom:9px;transition:var(--t)} .foot .col a:hover{color:var(--txt)} .foot .base{margin-top:36px;padding-top:22px;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;color:var(--faint);font-size:13px} /* ---------- TEAM CHECKER (public teaser) ---------- */ .team-checker{background:var(--card);border:1px solid var(--line);box-shadow:var(--el-1); border-radius:24px;padding:30px;position:relative} .tc-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700; letter-spacing:1.4px;text-transform:uppercase;color:var(--accent2);margin-bottom:12px} .tc-box{position:relative} .tc-inrow{display:flex;gap:10px;flex-wrap:wrap} .tc-input{flex:1 1 260px;min-width:0;padding:15px 18px;border-radius:var(--r-pill);border:1px solid var(--line); background:var(--field);color:var(--txt);font-size:16px;font-family:inherit;transition:var(--t)} .tc-input::placeholder{color:var(--faint)} .tc-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)} .tc-sugg{display:none;position:absolute;z-index:20;top:58px;left:0;right:0;background:var(--panel);border:1px solid var(--line); border-radius:14px;overflow:hidden;box-shadow:var(--el-2);max-height:280px;overflow-y:auto} .tc-opt{display:block;width:100%;text-align:left;background:transparent;border:0;color:var(--txt); padding:11px 16px;font-size:15px;cursor:pointer;border-bottom:1px solid var(--line)} .tc-opt:hover{background:var(--hover)} .tc-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} .tc-chiplbl{width:100%;font-size:12px;color:var(--faint);letter-spacing:.5px} .tc-chip{font-size:13px;color:var(--dim);background:var(--inset);border:1px solid var(--line); padding:7px 13px;border-radius:var(--r-pill);cursor:pointer;transition:var(--t)} .tc-chip:hover{border-color:var(--accent);color:var(--txt);transform:translateY(-1px)} .tc-result{display:none;margin-top:24px;padding-top:24px;border-top:1px solid var(--line); animation:fade .35s var(--ease)} .tc-result.show{display:block} .tc-loading{color:var(--dim);font-size:15px;padding:10px 0} .tc-head{margin-bottom:18px} .tc-badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase; padding:4px 11px;border-radius:var(--r-pill);margin-bottom:12px} .tc-badge.ok{color:#06281c;background:var(--good)} .tc-badge.new{color:#2a1c00;background:var(--gold)} .tc-head h3{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.6px;margin:0 0 6px;line-height:1.1} .tc-sub{color:var(--dim);font-size:15px;margin:0;max-width:560px} .tc-crew{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:11px;margin-bottom:20px} .tc-member{display:flex;gap:13px;padding:14px;border-radius:13px;background:var(--inset);border:1px solid var(--line)} .tc-member.tc-hat{background:color-mix(in srgb,var(--accent) 12%,var(--card));border-color:var(--accent)} .tc-av{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:20px;flex:0 0 auto; background:var(--card2);border:1px solid var(--line)} .tc-mname{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .tc-mline{color:var(--dim);font-size:13px;margin-top:3px;line-height:1.4} .tc-knows{font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#06281c; background:var(--good);padding:2px 7px;border-radius:20px} .tc-knows.tc-spec{color:#fff;background:var(--accent)} .tc-jobs{background:var(--inset);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:20px} .tc-jobs-lbl{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--faint)} .tc-jobs-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .tc-job{font-size:13.5px;color:var(--txt);background:var(--card2);border:1px solid var(--line);padding:7px 13px;border-radius:var(--r-pill)} .tc-tools{background:color-mix(in srgb,var(--accent) 7%,var(--inset));border-color:color-mix(in srgb,var(--accent) 22%,var(--line))} .tc-tools-build{color:var(--txt);font-size:14px;line-height:1.5;margin:10px 0 0} .tc-cta{text-align:center;background:radial-gradient(420px 200px at 50% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%); border-radius:16px;padding:22px} .tc-cta p{color:var(--dim);font-size:15px;margin:0 0 16px} .tc-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:center} /* rotating trade word */ .tradecycle{color:var(--accent2);font-weight:800;transition:opacity .22s var(--ease);display:inline-block} /* ---------- pricing ---------- */ .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;align-items:stretch} .plan{display:flex;flex-direction:column;background:var(--card);box-shadow:var(--el-1); border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;position:relative;transition:var(--t)} .plan:hover{transform:translateY(-4px);box-shadow:var(--el-2)} .plan.feature{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset,var(--el-2)} .plan .pop{position:absolute;top:-12px;left:28px;font-size:10.5px;font-weight:800;letter-spacing:1px; text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2)); padding:4px 12px;border-radius:20px} .plan .pname{font-size:13px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent2)} .plan .pprice{font-size:42px;font-weight:900;letter-spacing:-1.5px;margin:10px 0 2px;line-height:1} .plan .pprice small{font-size:16px;font-weight:600;color:var(--dim);letter-spacing:0} .plan .ptag{color:var(--dim);font-size:14.5px;min-height:42px;margin-bottom:18px} .plan ul{list-style:none;margin:0 0 22px;padding:0;flex:1} .plan ul li{font-size:14.5px;color:var(--txt);padding:8px 0 8px 28px;position:relative;line-height:1.4} .plan ul li::before{content:"✓";position:absolute;left:0;top:7px;color:var(--good);font-weight:800} .plan ul li.muted{color:var(--faint)}.plan ul li.muted::before{content:"·";color:var(--faint)} .plan .btn{width:100%} .plan .pnote{font-size:12.5px;color:var(--faint);margin-top:12px;text-align:center} .pricing-foot{text-align:center;margin-top:34px;color:var(--dim);font-size:15px} .pricing-foot a{color:var(--blue);font-weight:600} .enterprise{margin-top:24px;display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap; background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 26px} .enterprise b{color:var(--txt)} @media(max-width:820px){.plans{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}} /* ---------- reveal anim ---------- */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)} .reveal.in{opacity:1;transform:none} /* ---------- responsive ---------- */ @media(max-width:880px){ .hero .grid{grid-template-columns:1fr;gap:36px} .hero .feedmock{order:-1} .steps{grid-template-columns:1fr} .pillars{grid-template-columns:1fr} .slider{grid-template-columns:1fr} .spine{flex-direction:column} .spine .snode.gate .badge{left:24px;transform:none} /* MOBILE NAV — hamburger reveals a drop panel (so How/Pricing/Why/Sign-in are reachable) */ .navtoggle{display:flex} .nav .links{position:absolute;top:66px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0; background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--el-2); padding:8px 16px 16px;margin-left:0; max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:max-height .28s var(--ease),opacity .2s var(--ease)} .nav.open .links{max-height:480px;opacity:1;pointer-events:auto} .nav .links a.l{padding:13px 4px;font-size:16px;border-bottom:1px solid var(--line)} .nav .links a.l:last-of-type{border-bottom:0} .nav .links .btn-primary{margin-top:12px;width:100%} /* keep brand + toggle + hamburger on the top row */ .nav .wrap{position:relative} .nav .themetog{margin-left:auto;order:2} .nav .navtoggle{order:3} } @media(max-width:560px){ .sec{padding:60px 0} .btn{padding:11px 17px} .ctabox{padding:40px 22px} }