/* ============================================================ THE WAY IN · movement site. Chrome / high-energy / dark. Brand name is templated (see brand.js BRAND.name). Swap one line there and it cascades everywhere. ============================================================ */ /* Fonts are loaded non-render-blocking from each page (preconnect + media=print swap). @import here was render-blocking and hurt FCP/LCP. */ :root{ /* neutral warm-charcoal dark (no navy) so accents read as bioelectric signal, not stars */ --bg:#0a0a0c; --bg2:#101013; --panel:#15151a; --panel2:#1b1b21; --line:#27272f; --line2:#35353f; --ink:#eef0f3; --soft:#b2b6bf; --mute:#8b9099; /* mute lightened to clear WCAG AA 4.5:1 on dark panels */ /* ELECTRIC palette (sampled from logo emblem): electric BLUE primary, electric RED hot accent. --cyan/--teal are kept as token names for back-compat but now resolve to electric blue. */ --blue:#2f6bff; --blue2:#5b9bff; --bluedeep:#1f4fd0; --cyan:#5b9bff; --ice:#cfe0ff; --teal:#2f6bff; --energy:#ff2e3c; --energy2:#ff5a64; --hot:#ff2e3c; /* steel + electric chrome: white -> bright blue -> deep blue, hot-red glint via --chrome-glint */ --chrome1:#ffffff; --chrome2:#dfe7ff; --chrome3:#9ab2ee; --chrome4:#6478b0; --radius:16px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,Arial,sans-serif;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased} /* soft neural-tissue ambient (off-center organic glows, no sky/horizon, no stars) */ body::before{content:"";position:fixed;inset:0;z-index:-3;background: radial-gradient(60% 48% at 18% 14%, rgba(47,107,255,.07), transparent 62%), radial-gradient(55% 50% at 86% 96%, rgba(255,46,60,.05), transparent 64%), radial-gradient(130% 120% at 50% 50%, transparent 56%, rgba(0,0,0,.5)), var(--bg);} /* faint organic tissue mottle (replaces the old star-grid) */ body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.7; background: radial-gradient(40% 30% at 72% 22%, rgba(123,160,180,.035), transparent 70%), radial-gradient(45% 34% at 24% 78%, rgba(47,107,255,.03), transparent 72%);} /* the animated nervous system (injected by brand.js) */ #nerve{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.9} .wrap{max-width:1140px;margin:0 auto;padding:0 24px} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} /* ---------- type ---------- */ .chrome{background:linear-gradient(180deg,var(--chrome1) 0%,var(--chrome2) 34%,#5b9bff 62%,var(--chrome3) 82%,var(--chrome4) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 1px 0 rgba(255,255,255,.12)} .eyebrow{font-family:'Space Grotesk';font-size:12px;letter-spacing:.28em;font-weight:700;text-transform:uppercase;color:var(--cyan)} h1,h2,h3{font-family:'Space Grotesk',sans-serif;line-height:1.05;letter-spacing:-.01em} .display{font-family:'Sora',sans-serif;font-weight:900;letter-spacing:.01em;line-height:.98;text-transform:uppercase} /* ---------- nav ---------- */ /* Reserve chrome heights BEFORE brand.js injects, so injection causes zero layout shift (CLS). */ #nav{min-height:68px;display:block} #footer{min-height:340px;display:block} #cries{min-height:46px} .hero-stats{min-height:84px} @media(max-width:600px){#footer{min-height:520px}} .nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(5,6,10,.72);border-bottom:1px solid var(--line)} .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px} .brand{display:flex;align-items:center;gap:11px;flex:none;white-space:nowrap} .brand .mark{width:38px;height:38px;flex:none;object-fit:contain;border-radius:8px;display:block} .brand .nm{font-family:'Sora';font-weight:900;font-size:19px;letter-spacing:.06em;white-space:nowrap} .navlinks{display:flex;gap:26px;align-items:center;font-family:'Space Grotesk';font-weight:600;font-size:14px;color:var(--soft)} .navlinks a:hover{color:var(--ink)} .navlinks .joinbtn{color:#04101f} @media(max-width:820px){.navlinks{display:none}} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:9px;font-family:'Space Grotesk';font-weight:700;font-size:15px;padding:14px 26px;border-radius:13px;cursor:pointer;border:none;transition:.2s;letter-spacing:.01em} .btn-primary{background:linear-gradient(135deg,var(--blue),var(--cyan));color:#04101f;box-shadow:0 10px 30px rgba(91,155,255,.30),inset 0 1px 0 rgba(255,255,255,.4)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(91,155,255,.45),inset 0 1px 0 rgba(255,255,255,.5)} .btn-energy{background:linear-gradient(135deg,var(--energy),var(--energy2));color:#1a0a04;box-shadow:0 10px 30px rgba(255,46,60,.32),inset 0 1px 0 rgba(255,255,255,.35)} .btn-energy:hover{transform:translateY(-2px);box-shadow:0 16px 46px rgba(255,46,60,.5)} .btn-ghost{background:rgba(120,160,255,.06);color:var(--ink);border:1px solid var(--line2)} .btn-ghost:hover{border-color:var(--blue2);background:rgba(120,160,255,.12)} .btn-block{display:flex;width:100%;justify-content:center} /* ---------- sections ---------- */ section{padding:96px 0;position:relative} .sec-head{max-width:760px;margin:0 auto 48px;text-align:center} .sec-head h2{font-size:clamp(2rem,4.6vw,3.4rem);margin:14px 0 12px} .sec-head p{color:var(--soft);font-size:1.08rem} .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} /* ---------- hero ---------- */ .hero{min-height:94vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 0 80px;position:relative;overflow:hidden} .hero .wrap{position:relative;z-index:2;width:100%;margin-left:auto;margin-right:auto} .hero-logo{font-family:'Sora';font-weight:900;font-size:clamp(3rem,11vw,8.2rem);letter-spacing:.02em;line-height:.9;text-transform:uppercase;margin-bottom:10px; filter:drop-shadow(0 6px 30px rgba(47,107,255,.45))} .hero h1{font-size:clamp(1.9rem,4.6vw,3.2rem);font-weight:700;max-width:920px;margin:22px auto 0} .hero .sub{color:var(--soft);font-size:clamp(1.05rem,2vw,1.3rem);max-width:680px;margin:20px auto 0} .hero .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px} .hero .scarcity{margin-top:22px;font-family:'Space Grotesk';font-size:13px;letter-spacing:.04em;color:var(--mute)} .hero .scarcity b{color:var(--cyan)} .beam{position:absolute;left:50%;top:-10%;width:140vw;height:120vh;transform:translateX(-50%);z-index:0; background:conic-gradient(from 180deg at 50% 0,transparent 0deg,rgba(47,107,255,.10) 40deg,transparent 80deg,rgba(91,155,255,.08) 130deg,transparent 200deg); animation:spin 40s linear infinite;pointer-events:none} @keyframes spin{to{transform:translateX(-50%) rotate(360deg)}} .spark{position:absolute;border-radius:50%;z-index:1;pointer-events:none;animation:floaty 7s ease-in-out infinite} @keyframes floaty{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-16px);opacity:1}} /* ---------- enemy strip ---------- */ .enemy{background:linear-gradient(180deg,transparent,rgba(255,46,60,.04),transparent);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .enemy .big{font-family:'Space Grotesk';font-weight:700;font-size:clamp(1.5rem,3.4vw,2.5rem);text-align:center;max-width:900px;margin:0 auto;line-height:1.25} .enemy .big .x{color:var(--energy)} /* ---------- pillars ---------- */ .grid{display:grid;gap:18px} .g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}.g4{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr}} @media(max-width:620px){.g3,.g4,.g2{grid-template-columns:1fr}} .card{background:linear-gradient(180deg,var(--panel),rgba(14,19,32,.6));border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:.25s;position:relative;overflow:hidden} .card:hover{border-color:var(--blue);transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 0 1px rgba(47,107,255,.2)} .card .n{font-family:'Sora';font-weight:700;font-size:13px;color:var(--cyan);letter-spacing:.1em} .card h3{font-size:1.28rem;margin:10px 0 8px} .card p{color:var(--soft);font-size:.97rem} .pillar .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(47,107,255,.12);border:1px solid rgba(47,107,255,.3);margin-bottom:14px;font-size:22px} /* ---------- doctrine flow ---------- */ .flow{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;justify-content:center;margin-top:10px} .flow .step{flex:1;min-width:150px;text-align:center;padding:18px 14px;position:relative} .flow .step .k{font-family:'Sora';font-weight:700;color:var(--ice);font-size:1.05rem} .flow .step .d{color:var(--mute);font-size:.85rem;margin-top:6px} .flow .arr{display:flex;align-items:center;color:var(--blue2);font-size:1.4rem} @media(max-width:680px){.flow .arr{transform:rotate(90deg)}} /* ---------- manifesto ---------- */ .manifesto{background:radial-gradient(80% 90% at 50% 0,rgba(47,107,255,.10),transparent 70%)} .creed{max-width:780px;margin:0 auto;text-align:center} .creed p{font-size:clamp(1.15rem,2.3vw,1.5rem);line-height:1.5;color:var(--ice);font-weight:500;margin:18px 0} .creed .lead{font-family:'Space Grotesk';font-weight:700;font-size:clamp(1.8rem,4vw,2.8rem);color:#fff;margin-bottom:8px} .creed .end{font-family:'Sora';font-weight:900;font-size:clamp(1.4rem,3.2vw,2.2rem);margin-top:26px;text-transform:uppercase} /* ---------- transformation ---------- */ .tform{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;max-width:920px;margin:0 auto} @media(max-width:680px){.tform{grid-template-columns:1fr}} .tcol{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px} .tcol.from{border-color:rgba(255,46,60,.3)} .tcol.to{border-color:rgba(91,155,255,.4);box-shadow:0 0 0 1px rgba(91,155,255,.15),0 18px 44px rgba(91,155,255,.10)} .tcol .lab{font-family:'Sora';font-size:12px;letter-spacing:.14em;font-weight:700} .tcol.from .lab{color:var(--energy)}.tcol.to .lab{color:var(--cyan)} .tcol ul{list-style:none;margin-top:12px}.tcol li{padding:6px 0;color:var(--soft);font-size:.96rem;border-bottom:1px solid var(--line)} .tform .mid{font-size:2rem;color:var(--blue2);text-align:center} /* ---------- tiers ---------- */ .tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch} @media(max-width:980px){.tiers{grid-template-columns:1fr 1fr}} @media(max-width:560px){.tiers{grid-template-columns:1fr}} .tier{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:18px;padding:26px 22px;display:flex;flex-direction:column;position:relative;transition:.25s} .tier:hover{transform:translateY(-5px);border-color:var(--line2)} .tier.feat{border:1px solid var(--cyan);box-shadow:0 0 0 1px rgba(91,155,255,.3),0 26px 60px rgba(91,155,255,.16);background:linear-gradient(180deg,rgba(18,30,55,.9),var(--panel))} .tier .badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--blue),var(--cyan));color:#04101f;font-family:'Space Grotesk';font-weight:700;font-size:11px;letter-spacing:.06em;padding:4px 14px;border-radius:20px;text-transform:uppercase;white-space:nowrap} .tier .tn{font-family:'Sora';font-weight:700;font-size:1.15rem;letter-spacing:.04em} .tier .price{font-family:'Space Grotesk';font-weight:700;font-size:2.1rem;margin:8px 0 2px} .tier .price small{font-size:.85rem;color:var(--mute);font-weight:500} .tier .desc{color:var(--soft);font-size:.9rem;min-height:38px} .tier ul{list-style:none;margin:16px 0 20px;flex:1} .tier li{padding:7px 0;color:var(--soft);font-size:.92rem;display:flex;gap:9px;align-items:flex-start} .tier li::before{content:"";flex:none;width:16px;height:16px;margin-top:3px;border-radius:50%;background:rgba(91,155,255,.16);border:1px solid var(--cyan);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b9bff' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");background-size:11px;background-repeat:no-repeat;background-position:center} /* ---------- provider ladder ---------- */ .ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:760px){.ladder{grid-template-columns:1fr}} .rung{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:14px;padding:20px} .rung .pn{font-family:'Sora';font-weight:700;font-size:1.05rem} .rung .meta{color:var(--mute);font-size:.82rem;margin:3px 0 10px} .rung p{color:var(--soft);font-size:.92rem} /* ---------- founder ---------- */ .founder{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center} @media(max-width:820px){.founder{grid-template-columns:1fr}} .fphoto{aspect-ratio:4/5;border-radius:20px;border:1px solid var(--line2);background: radial-gradient(60% 50% at 50% 30%,rgba(47,107,255,.25),transparent 70%),linear-gradient(180deg,var(--panel2),var(--bg2)); display:grid;place-items:center;position:relative;overflow:hidden} .fphoto .ph{font-family:'Sora';font-weight:900;font-size:4rem;color:rgba(120,160,255,.18)} .fphoto .tagph{position:absolute;bottom:16px;left:16px;font-size:11px;color:var(--mute);font-family:'Space Grotesk';letter-spacing:.1em;text-transform:uppercase} .founder h2{font-size:clamp(1.8rem,3.6vw,2.7rem);margin:12px 0} .founder .quote{font-family:'Space Grotesk';font-weight:600;font-size:1.25rem;color:var(--ice);border-left:3px solid var(--cyan);padding-left:16px;margin:18px 0} /* ---------- cta band ---------- */ .band{background:linear-gradient(135deg,rgba(47,107,255,.16),rgba(91,155,255,.08));border:1px solid var(--line2);border-radius:24px;padding:54px 32px;text-align:center;position:relative;overflow:hidden} .band h2{font-size:clamp(1.9rem,4.4vw,3rem)} .band .form{display:flex;gap:10px;max-width:480px;margin:24px auto 0;flex-wrap:wrap} .band input{flex:1;min-width:220px;background:rgba(5,6,10,.6);border:1px solid var(--line2);border-radius:13px;padding:14px 16px;color:var(--ink);font:15px Inter;outline:none} .band input:focus{border-color:var(--cyan)} /* ---------- rallying marquee ---------- */ .cries{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;overflow:hidden;white-space:nowrap;background:rgba(10,13,22,.5)} .cries .track{display:inline-flex;gap:38px;animation:slide 38s linear infinite;font-family:'Sora';font-weight:700;font-size:1.05rem;text-transform:uppercase;letter-spacing:.06em} .cries .track span{color:var(--soft)}.cries .track b{color:var(--cyan)} @keyframes slide{to{transform:translateX(-50%)}} /* ---------- footer ---------- */ footer{border-top:1px solid var(--line);padding:54px 0 40px;background:var(--bg2)} .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px} @media(max-width:680px){.fgrid{grid-template-columns:1fr}} footer h4,footer .fh{font-family:'Space Grotesk';font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);margin-bottom:12px} footer a{display:block;color:var(--soft);padding:4px 0;font-size:.92rem}footer a:hover{color:var(--ink)} .disc{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);color:var(--mute);font-size:12px;line-height:1.7;max-width:840px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* ===== FAQ (accordion, AEO-friendly) ===== */ .faqlist{display:flex;flex-direction:column;gap:12px;margin-top:30px} .faq-item{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line2);border-radius:14px;padding:4px 20px;transition:border-color .2s} .faq-item[open]{border-color:var(--blue)} .faq-item summary{font-family:'Space Grotesk';font-weight:700;font-size:1.04rem;color:var(--ink);cursor:pointer;list-style:none;padding:16px 0;position:relative;padding-right:34px} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--cyan);font-weight:400;transition:transform .2s} .faq-item[open] summary::after{content:"\2212"} .faq-item summary:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px} .faq-a{color:var(--soft);font-size:1rem;line-height:1.65;padding:0 0 18px} /* ===== mobile hardening (added 2026-06-17) ===== */ html{overflow-x:hidden} section,.hero,.band,.cries,.manifesto{overflow-x:clip} @media(max-width:600px){ .flow{flex-direction:column;align-items:stretch;gap:4px} .flow .step{min-width:0;width:100%} .flow .arr{width:100%;justify-content:center;transform:rotate(90deg);padding:0;font-size:1.2rem} section{padding:64px 0} .band{padding:38px 20px} .hero{min-height:auto;padding:90px 0 60px} table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} } /* ===== mobile menu (hamburger + dropdown) ===== */ .navtoggle{display:none;width:42px;height:42px;border:1px solid var(--line2);border-radius:11px;background:rgba(120,160,255,.07);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0} .navtoggle span{display:block;width:20px;height:2px;background:var(--ice);border-radius:2px;transition:.25s} .navtoggle.x span:nth-child(1){transform:translateY(7px) rotate(45deg)} .navtoggle.x span:nth-child(2){opacity:0} .navtoggle.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mobilemenu{display:none;flex-direction:column;gap:0;padding:10px 24px 22px;background:rgba(8,11,18,.98);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)} .mobilemenu.open{display:flex} .mobilemenu a{font-family:'Space Grotesk';font-weight:600;font-size:17px;color:var(--soft);padding:14px 4px;border-bottom:1px solid var(--line)} .mobilemenu a:hover{color:var(--ink)} .mobilemenu a.btn{color:#04101f;margin-top:12px;justify-content:center;border-bottom:none} @media(max-width:820px){ .navtoggle{display:flex} } @media(min-width:821px){ .mobilemenu{display:none !important} } /* ============================================================ MEGA-MENU NAV (ported from codex v2, re-themed to the live ELECTRIC BLUE/RED palette). Desktop = data-driven mega dropdowns; mobile = accordion drawers. Degrades to a flat link list with JS off (static-baked nav + noscript reveal). --navTint is an R,G,B triplet so we can build rgba() tints; themes map to the live blue (47,107,255) / red (255,46,60). ============================================================ */ .navitem{position:relative} .nav-theme-start{--navAccent:#5b9bff;--navAccent2:#2f6bff;--navTint:91,155,255} .nav-theme-learn{--navAccent:#5b9bff;--navAccent2:#2f6bff;--navTint:47,107,255} .nav-theme-academy{--navAccent:#ff5a64;--navAccent2:#ff2e3c;--navTint:255,90,100} .nav-theme-community{--navAccent:#ff5a64;--navAccent2:#2f6bff;--navTint:255,46,60} .nav-theme-providers{--navAccent:#5b9bff;--navAccent2:#ff2e3c;--navTint:91,155,255} .navmain,.navplain{height:40px;display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;border-radius:11px;background:transparent;color:var(--soft);font:700 14px 'Space Grotesk';padding:0 10px;cursor:pointer;transition:.18s;white-space:nowrap;text-decoration:none} .navmain:hover,.navmain:focus-visible,.navplain:hover,.navplain:focus-visible,.navplain.active{color:var(--ink);background:rgba(120,160,255,.06);border-color:var(--line)} /* MEMBERSHIP = the conversion we want -> make it crackle and pull the eye */ .navplain[href*="membership"]{color:#fff;font-weight:800;border-color:rgba(91,155,255,.55);background:linear-gradient(180deg,rgba(47,107,255,.16),rgba(255,46,60,.08));text-shadow:0 0 10px rgba(91,155,255,.6);overflow:hidden;position:relative;animation:memCharge 2.2s ease-in-out infinite} .navplain[href*="membership"]::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.24) 50%,transparent 62%);transform:translateX(-130%);animation:memSweep 3.4s ease-in-out infinite;pointer-events:none} .navplain[href*="membership"]:hover,.navplain[href*="membership"]:focus-visible{color:#fff;border-color:#ff5a64;background:linear-gradient(180deg,rgba(47,107,255,.22),rgba(255,46,60,.14));box-shadow:0 0 24px rgba(255,46,60,.6)} @keyframes memCharge{0%,100%{box-shadow:0 0 9px rgba(47,107,255,.4),inset 0 0 8px rgba(47,107,255,.14)}50%{box-shadow:0 0 22px rgba(91,155,255,.8),0 0 34px rgba(255,46,60,.3),inset 0 0 13px rgba(91,155,255,.24)}} @keyframes memSweep{0%,55%{transform:translateX(-130%)}82%,100%{transform:translateX(130%)}} .mobile-utility[href*="membership"]{border:1px solid rgba(91,155,255,.55);border-radius:10px;background:linear-gradient(180deg,rgba(47,107,255,.14),rgba(255,46,60,.07));color:#fff;font-weight:800;text-shadow:0 0 8px rgba(91,155,255,.5);box-shadow:0 0 16px rgba(47,107,255,.32)} @media(prefers-reduced-motion:reduce){.navplain[href*="membership"],.navplain[href*="membership"]::before{animation:none}.navplain[href*="membership"]{box-shadow:0 0 15px rgba(91,155,255,.5)}} /* lightning bolt + "Founding pricing" urgency flag on the Membership pill. has-flag stacks two tight lines, vertically centered, so the 40px pill keeps its height with zero layout shift; the bolt is crisp SVG (not an emoji). */ .navplain.has-flag{flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0 13px;line-height:1} .np-row{display:inline-flex;align-items:center;gap:5px;line-height:1} .nav-bolt{display:inline-flex;width:11px;height:13px;color:#dbe8ff;position:relative;z-index:1} .nav-bolt svg{width:100%;height:100%;display:block;fill:currentColor;filter:drop-shadow(0 0 5px rgba(91,155,255,.85))} .navplain[href*="membership"] .nav-bolt{animation:boltFlicker 2.6s steps(1,end) infinite} .nav-flag{font:800 8.5px/1 'Space Grotesk',sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#ff7a82;text-shadow:0 0 8px rgba(255,46,60,.6);position:relative;z-index:1} @keyframes boltFlicker{0%,46%,52%,71%,76%,100%{opacity:1}48%{opacity:.32}50%{opacity:1}73%{opacity:.5}} /* mobile: bolt inline with the label, flag trailing on the charged row */ .mobile-utility.has-flag{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .mobile-utility .np-row{display:inline-flex;align-items:center;gap:6px} .mobile-utility[href*="membership"] .nav-bolt{animation:boltFlicker 2.6s steps(1,end) infinite} @media(prefers-reduced-motion:reduce){.navplain[href*="membership"] .nav-bolt,.mobile-utility[href*="membership"] .nav-bolt{animation:none}} .navitem.open .navmain,.navitem:hover .navmain,.navitem:focus-within .navmain{color:var(--ink);background:rgba(var(--navTint),.12);border-color:rgba(var(--navTint),.42);box-shadow:0 0 0 1px rgba(var(--navTint),.12),0 12px 30px rgba(var(--navTint),.12)} .navnum{font-family:'Sora';font-size:10px;letter-spacing:.04em;color:var(--navAccent);opacity:.95} .chev{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.75;transition:.18s} .navitem.open .chev,.navitem:hover .chev,.navitem:focus-within .chev{transform:rotate(225deg) translate(-1px,-1px)} .mega{position:absolute;top:calc(100% + 13px);width:min(780px,calc(100vw - 48px));display:grid;grid-template-columns:250px 1fr;gap:14px;background:linear-gradient(145deg,rgba(27,27,33,.98),rgba(12,13,18,.99));border:1px solid rgba(var(--navTint),.38);border-radius:18px;padding:16px;box-shadow:0 30px 80px rgba(0,0,0,.62),0 0 0 1px rgba(var(--navTint),.10),0 0 46px rgba(var(--navTint),.13);opacity:0;pointer-events:none;transform:translateY(9px) scale(.985);transition:opacity .22s ease,transform .22s cubic-bezier(.2,.7,.2,1);z-index:80;overflow:visible} .mega::before{content:"";position:absolute;top:-22px;left:-10px;right:-10px;height:24px} .mega::after{content:"";position:absolute;left:18px;right:18px;top:0;height:2px;background:linear-gradient(90deg,var(--navAccent),transparent);opacity:.9} .mega-glow{position:absolute;inset:auto -14% -36% auto;width:360px;height:260px;background:radial-gradient(circle,rgba(var(--navTint),.24),transparent 70%);filter:blur(12px);pointer-events:none;animation:navGlow 4.5s ease-in-out infinite} .mega-left{left:0} .mega-center{left:50%;transform:translateX(-50%) translateY(8px)} .mega-right{right:0} .navitem.open .mega,.navitem:hover .mega,.navitem:focus-within .mega{opacity:1;pointer-events:auto;transform:translateY(0)} .navitem.open .mega-center,.navitem:hover .mega-center,.navitem:focus-within .mega-center{transform:translateX(-50%) translateY(0)} .mega-intro{display:flex;flex-direction:column;gap:8px;position:relative;padding:14px;border:1px solid rgba(var(--navTint),.22);border-radius:14px;background:linear-gradient(150deg,rgba(var(--navTint),.13),rgba(120,160,255,.04));min-height:100%} .mega-k{font-family:'Space Grotesk';font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--navAccent);font-weight:800} .mega-intro>a:not(.mega-feature){font-family:'Sora';font-weight:800;color:var(--ink);font-size:1.25rem;line-height:1.05;text-decoration:none} .mega-intro p{color:var(--mute);font-size:.86rem;line-height:1.45;max-width:56ch} .mega-feature{margin-top:auto;display:block;border-radius:13px;padding:13px;background:linear-gradient(135deg,var(--navAccent),var(--navAccent2));color:#04101f;box-shadow:0 12px 32px rgba(var(--navTint),.24);transition:.18s;text-decoration:none} .mega-feature:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(var(--navTint),.34)} .mega-feature span{display:block;font-family:'Space Grotesk';font-weight:800;font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.74} .mega-feature b{display:block;font-family:'Sora';font-size:.96rem;line-height:1.18;margin-top:3px} .mega-feature small{display:block;font-family:'Inter';font-weight:600;font-size:.74rem;line-height:1.3;margin-top:5px;opacity:.82} .mega-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .mega-link{display:block;border:1px solid transparent;border-radius:12px;padding:10px 11px;background:rgba(120,160,255,.035);transition:.16s;position:relative;overflow:hidden;text-decoration:none} .mega-link::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--navAccent);opacity:.28} .mega-link:hover,.mega-link:focus-visible,.mega-link.active{border-color:rgba(var(--navTint),.36);background:rgba(var(--navTint),.10);transform:translateY(-1px)} .mega-link:hover::before,.mega-link.active::before{opacity:1} .mega-link span{display:block;color:var(--ice);font-family:'Space Grotesk';font-weight:700;font-size:.9rem;line-height:1.2} .mega-link small{display:block;color:var(--mute);font-family:'Inter';font-weight:500;font-size:.76rem;line-height:1.35;margin-top:3px} .navitem.open .mega-link,.navitem:hover .mega-link,.navitem:focus-within .mega-link{animation:menuRise .26s both} .navitem.open .mega-link:nth-child(2),.navitem:hover .mega-link:nth-child(2),.navitem:focus-within .mega-link:nth-child(2){animation-delay:.025s} .navitem.open .mega-link:nth-child(3),.navitem:hover .mega-link:nth-child(3),.navitem:focus-within .mega-link:nth-child(3){animation-delay:.05s} .navitem.open .mega-link:nth-child(4),.navitem:hover .mega-link:nth-child(4),.navitem:focus-within .mega-link:nth-child(4){animation-delay:.075s} .navitem.open .mega-link:nth-child(5),.navitem:hover .mega-link:nth-child(5),.navitem:focus-within .mega-link:nth-child(5){animation-delay:.1s} .navitem.open .mega-link:nth-child(6),.navitem:hover .mega-link:nth-child(6),.navitem:focus-within .mega-link:nth-child(6){animation-delay:.125s} .navitem.open .mega-link:nth-child(n+7),.navitem:hover .mega-link:nth-child(n+7),.navitem:focus-within .mega-link:nth-child(n+7){animation-delay:.15s} @keyframes menuRise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} @keyframes navGlow{0%,100%{transform:translate(0,0) scale(1);opacity:.65}50%{transform:translate(-24px,-10px) scale(1.08);opacity:1}} /* honor reduced-motion: no glow drift, no link cascade */ @media(prefers-reduced-motion:reduce){ .mega-glow{animation:none} .navitem.open .mega-link,.navitem:hover .mega-link,.navitem:focus-within .mega-link{animation:none} .mega{transition:opacity .12s ease} } /* wider mega flips to a single column on small laptops so it never clips */ @media(max-width:980px){.mega{grid-template-columns:1fr;width:min(420px,calc(100vw - 32px))}.mega-grid{grid-template-columns:1fr}} /* ---- mobile mega drawers (richer slide-out) ---- */ html.nav-open,body.nav-open{overflow:hidden} body.nav-open #nerve{display:none} .mobile-start{display:grid;gap:10px;margin-bottom:4px} .mobile-primary{display:block;border:1px solid rgba(47,107,255,.32);border-radius:14px;padding:16px 15px;background:linear-gradient(135deg,rgba(47,107,255,.18),rgba(31,79,208,.10));box-shadow:0 14px 38px rgba(47,107,255,.10);text-decoration:none} .mobile-primary span{display:block;font-family:'Space Grotesk';font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);font-weight:800;margin-bottom:4px} .mobile-primary b{display:block;font-family:'Sora';font-size:1.15rem;line-height:1.12;color:var(--ink)} .mobile-primary small{display:block;color:var(--soft);font-size:.82rem;line-height:1.35;margin-top:4px} .mobile-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .mobile-quick a{border:1px solid var(--line);border-radius:12px;padding:11px;background:rgba(255,255,255,.035);text-decoration:none} .mobile-quick b{display:block;font-family:'Space Grotesk';font-size:.9rem;color:var(--ice)} .mobile-quick small{display:block;color:var(--mute);font-size:.72rem;margin-top:2px} .mobile-label{font-family:'Space Grotesk';font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:800;margin:8px 2px 2px} .mobile-section{border:1px solid rgba(255,255,255,.075);border-radius:12px;background:rgba(255,255,255,.035);padding:0;box-shadow:none;overflow:visible} .mobile-drawer.current{border-color:rgba(var(--navTint),.35)} .mobile-head{width:100%;min-height:58px;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;border:0;background:transparent;color:var(--ice);padding:0 13px;cursor:pointer;text-align:left;border-radius:12px} .mobile-num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(var(--navTint),.14);color:var(--navAccent);font-family:'Sora';font-weight:800;font-size:11px} .mobile-copy b{display:block;font-family:'Sora';font-weight:800;font-size:1rem;line-height:1.12} .mobile-count{display:grid;place-items:center;min-width:28px;height:28px;border:1px solid rgba(var(--navTint),.24);border-radius:999px;color:var(--navAccent);font-family:'Space Grotesk';font-size:11px;font-weight:800;background:rgba(5,6,10,.22)} .mobile-caret{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.72;transition:.2s} .mobile-head:hover,.mobile-head:focus-visible{outline:none;background:rgba(var(--navTint),.08)} .mobile-drawer.open .mobile-caret{transform:rotate(225deg)} .mobile-drawer-panel[hidden]{display:none!important} .mobile-drawer-panel{display:grid;gap:8px;padding:4px 13px 13px;border-top:1px solid rgba(255,255,255,.07)} .mobile-drawer-panel p{color:var(--mute);font-size:.82rem;line-height:1.4;margin:2px 0 0} .mobile-feature{display:block;padding:12px;border-radius:11px;border:1px solid rgba(var(--navTint),.28);background:rgba(var(--navTint),.10);color:var(--ice)!important;font-family:'Sora'!important;font-weight:800!important;text-decoration:none} .mobile-feature b{display:block;font-family:'Space Grotesk';font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--navAccent);margin-bottom:3px} .mobile-feature small{color:var(--soft)!important;font-weight:600!important} .mobile-links{display:grid;gap:1px} .mobilemenu a:not(.btn){font-family:'Space Grotesk';font-weight:600;font-size:15px;color:var(--soft);padding:9px 8px;border-radius:9px} .mobilemenu a:not(.btn):hover{color:var(--ink);background:rgba(var(--navTint,47,107,255),.10)} .mobilemenu a small{display:block;color:var(--mute);font-family:'Inter';font-weight:500;font-size:.74rem;line-height:1.3;margin-top:2px} .mobile-actions{--navTint:47,107,255;display:grid;gap:6px;padding:8px;margin-top:2px} .mobile-utility{border:1px solid var(--line);background:rgba(120,160,255,.04)} body.nav-open .ally-fab,body.nav-open .ally-panel{opacity:0;pointer-events:none;transform:scale(.94)} @media(max-width:420px){.mobilemenu{padding-left:16px;padding-right:16px}.mobile-primary{padding:14px}.mobile-quick a{padding:10px}} /* ===== the cascade chain (signature diagram) ===== */ .chain{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;max-width:900px;margin:6px auto 0} .chain .link{font-family:'Space Grotesk';font-weight:600;font-size:.95rem;background:var(--panel);border:1px solid var(--line2);border-radius:999px;padding:10px 17px;color:var(--soft)} .chain .link.hot{border-color:rgba(91,155,255,.5);color:var(--ice);box-shadow:0 0 0 1px rgba(91,155,255,.18)} .chain .link.end{background:linear-gradient(135deg,var(--energy),var(--energy2));color:#1a0a04;border:none;font-weight:700} .chain i{color:var(--blue2);font-style:normal;font-size:1.05rem} /* tighten nav for the fuller link set on mid-size laptops */ @media(max-width:1120px){ .navlinks{gap:16px;font-size:13px} .navlinks .joinbtn{padding:8px 14px} } /* ===== full-viewport heroes (fill the screen on landing) ===== */ .hero,.mhero,.dhero,.qhero,.fhero,.phero,.lib-hero,.page-hero,.m-hero{ min-height:calc(100svh - 66px)!important; display:flex;flex-direction:column;justify-content:center; } @media(max-width:700px){ .hero,.mhero,.dhero,.qhero,.fhero,.phero,.lib-hero,.page-hero,.m-hero{min-height:calc(100svh - 58px)!important;padding-top:84px;padding-bottom:48px} } /* forum landing hero */ .fhero-band{min-height:calc(100svh - 66px);display:flex;flex-direction:column;justify-content:center;text-align:center;position:relative;overflow:hidden;padding:90px 0 60px} /* ===== ALLY · the doctrine companion (AI assistant widget) ===== */ .ally-fab{position:fixed;right:22px;bottom:22px;z-index:120;width:62px;height:62px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(135deg,var(--blue),var(--cyan));box-shadow:0 12px 34px rgba(47,107,255,.45),inset 0 1px 0 rgba(255,255,255,.4);display:grid;place-items:center;transition:.2s} .ally-fab:hover{transform:translateY(-3px) scale(1.04)} .ally-fab svg{width:29px;height:29px} .ally-fab .ping{position:absolute;inset:0;border-radius:50%;animation:allyping 2.6s infinite;pointer-events:none} @keyframes allyping{0%{box-shadow:0 0 0 0 rgba(47,107,255,.45)}70%{box-shadow:0 0 0 17px rgba(47,107,255,0)}100%{box-shadow:0 0 0 0 rgba(47,107,255,0)}} .ally-panel{position:fixed;right:22px;bottom:96px;z-index:121;width:384px;max-width:calc(100vw - 32px);height:566px;max-height:calc(100dvh - 130px);background:var(--panel);border:1px solid var(--line2);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.6);display:none;flex-direction:column;overflow:hidden} .ally-panel.open{display:flex;animation:allyup .25s ease} @keyframes allyup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .ally-head{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(47,107,255,.08),transparent)} .ally-av{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center;font-family:'Sora';font-weight:800;color:#04130d;flex:none} .ally-head .nm{font-family:'Sora';font-weight:700;font-size:1.02rem;line-height:1.1} .ally-head .st{font-size:.74rem;color:var(--cyan);display:flex;align-items:center;gap:5px} .ally-head .st::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)} .ally-head .x{margin-left:auto;background:none;border:none;color:var(--soft);font-size:24px;cursor:pointer;line-height:1} .ally-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:11px} .ally-msg{max-width:85%;padding:11px 14px;border-radius:14px;font-size:.93rem;line-height:1.5} .ally-msg.bot{background:var(--panel2);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px;color:var(--ink)} .ally-msg.me{background:linear-gradient(135deg,var(--blue),var(--cyan));color:#04130d;align-self:flex-end;border-bottom-right-radius:4px;font-weight:500} .ally-msg a{color:var(--cyan);font-weight:600} .ally-msg b{color:var(--ice)} .ally-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 4px} .ally-chip{font-family:'Space Grotesk';font-size:.8rem;font-weight:600;padding:7px 12px;border-radius:999px;border:1px solid var(--line2);background:var(--bg2);color:var(--soft);cursor:pointer;transition:.15s;text-align:left} .ally-chip:hover{border-color:var(--cyan);color:var(--ink)} .ally-typing{display:flex;gap:4px;padding:13px 15px;align-self:flex-start;background:var(--panel2);border:1px solid var(--line);border-radius:14px;border-bottom-left-radius:4px} .ally-typing span{width:7px;height:7px;border-radius:50%;background:var(--cyan);animation:allyblink 1.2s infinite} .ally-typing span:nth-child(2){animation-delay:.2s}.ally-typing span:nth-child(3){animation-delay:.4s} @keyframes allyblink{0%,60%,100%{opacity:.3}30%{opacity:1}} .ally-foot{border-top:1px solid var(--line);padding:12px 14px;background:var(--panel)} .ally-inp{display:flex;gap:8px} .ally-inp input{flex:1;background:var(--bg2);border:1px solid var(--line2);border-radius:12px;padding:11px 13px;color:var(--ink);font-size:.92rem;outline:none} .ally-inp input:focus{border-color:var(--cyan)} .ally-inp button{background:linear-gradient(135deg,var(--blue),var(--cyan));border:none;border-radius:12px;padding:0 16px;cursor:pointer;color:#04130d;font-weight:700;font-family:'Space Grotesk'} .ally-disc{font-size:.68rem;color:var(--mute);text-align:center;margin-top:9px;line-height:1.45} @media(max-width:520px){.ally-panel{right:10px;left:10px;width:auto;bottom:90px;height:calc(100dvh - 116px)}.ally-fab{right:16px;bottom:16px}} /* library cards still in progress */ .acard.soon{opacity:.62;cursor:default;pointer-events:none} .acard.soon .read{color:var(--mute)} .acard.soon .badge-cat::after{content:" · soon";color:var(--mute);font-weight:500} .card.soon{opacity:.62;cursor:default;pointer-events:none} /* ============ HERO STAGE: uniform headline + ambient + authority + cue ============ */ /* UNIFORM hero headline across every hero (fixes the size/case inconsistency) */ .hero h1,.mhero h1,.dhero h1,.qhero h1,.fhero h1,.phero h1,.lib-hero h1,.page-hero h1,.m-hero h1,.fhero-band h1{ font-family:'Sora',sans-serif!important;font-weight:800!important; font-size:clamp(2.5rem,6vw,5rem)!important;line-height:.98!important; letter-spacing:-.01em!important;text-transform:uppercase!important;margin:10px auto 0!important;max-width:16ch} /* content above the ambient layers */ .hero .wrap,.mhero .wrap,.dhero .wrap,.qhero .wrap,.fhero .wrap,.phero .wrap,.lib-hero .wrap,.page-hero .wrap,.m-hero .wrap,.fhero-band .wrap{position:relative;z-index:3} .hero,.mhero,.dhero,.qhero,.fhero,.phero,.lib-hero,.page-hero,.m-hero,.fhero-band{position:relative;overflow:hidden} /* subtle aurora (neural canvas is already the main bg) */ .hero-aurora{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .hero-aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.4;animation:auroraFloat 24s ease-in-out infinite} .hero-aurora i:nth-child(1){width:42vw;height:42vw;left:-8vw;top:-12vw;background:radial-gradient(circle,rgba(47,107,255,.30),transparent 70%)} .hero-aurora i:nth-child(2){width:36vw;height:36vw;right:-8vw;bottom:-10vw;background:radial-gradient(circle,rgba(91,155,255,.26),transparent 70%);animation-delay:-8s;animation-duration:30s} .hero-aurora i:nth-child(3){width:26vw;height:26vw;left:44%;top:36%;background:radial-gradient(circle,rgba(255,46,60,.18),transparent 70%);animation-delay:-15s;animation-duration:36s} @keyframes auroraFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(7%,-6%) scale(1.12)}66%{transform:translate(-6%,6%) scale(.93)}} @media(prefers-reduced-motion:reduce){.hero-aurora i{animation:none}} /* authority stat strip */ .hero-stats{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;margin-top:32px;min-height:64px;align-items:center} /* On the full-viewport inner heroes the stats are injected by JS after paint. Reserve their footprint up front so injection causes zero layout shift (CLS). */ .lib-hero .wrap,.page-hero .wrap,.dhero .wrap,.qhero .wrap,.mhero .wrap,.phero .wrap,.fhero .wrap,.m-hero .wrap{padding-bottom:96px} .lib-hero .wrap .hero-stats,.page-hero .wrap .hero-stats,.dhero .wrap .hero-stats,.qhero .wrap .hero-stats,.mhero .wrap .hero-stats,.phero .wrap .hero-stats,.fhero .wrap .hero-stats,.m-hero .wrap .hero-stats{position:absolute;left:0;right:0;bottom:34px;margin-top:0} .hero-stat{text-align:center;min-width:96px} .hero-stat b{display:block;font-family:'Sora';font-weight:800;font-size:1.5rem;background:linear-gradient(180deg,#fff,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1} .hero-stat span{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);margin-top:5px;display:block} /* scroll cue */ .hero-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--mute);font-family:'Space Grotesk';font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;animation:cueBob 2s ease-in-out infinite;text-decoration:none} .hero-cue svg{width:20px;height:20px} @keyframes cueBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}} @media(max-width:600px){.hero-stats{gap:18px;margin-top:24px}.hero-stat b{font-size:1.28rem}.hero h1,.mhero h1,.dhero h1,.qhero h1,.fhero h1,.phero h1,.lib-hero h1,.page-hero h1,.m-hero h1,.fhero-band h1{font-size:clamp(2rem,8vw,3.2rem)!important}.hero-cue{bottom:14px}} /* ===== footer (rebuilt: organized, useful, properly spaced) ===== */ #footer footer{border-top:1px solid var(--line);margin-top:46px;padding:54px 0 30px;background:linear-gradient(180deg,transparent,rgba(47,107,255,.03))} .fgrid{grid-template-columns:1.7fr 1fr 1fr 1fr !important;gap:36px} @media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr !important}} @media(max-width:520px){.fgrid{grid-template-columns:1fr !important}} .ftag{color:var(--soft);margin:12px 0 16px;max-width:36ch;font-size:.92rem} .fjoin{display:flex;gap:8px;max-width:330px} .fjoin input{flex:1;min-width:0;background:var(--bg2);border:1px solid var(--line2);border-radius:11px;padding:10px 13px;color:var(--ink);font-size:.9rem;outline:none} .fjoin input:focus{border-color:var(--cyan)} .fjoin .btn{padding:10px 18px;font-size:14px} footer h4,footer .fh{color:var(--ice);font-size:13px;letter-spacing:.06em;margin-bottom:10px} footer a{display:block;color:var(--soft);padding:5px 0;font-size:.92rem;transition:.15s} footer a:hover{color:var(--cyan)} .fbottom{margin-top:36px;padding-top:22px;border-top:1px solid var(--line)} .fbottom .disc{color:var(--mute);font-size:12.5px;line-height:1.7;max-width:900px;margin:0} .fmeta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-top:16px;color:var(--mute);font-size:.82rem} .fmini{display:flex;gap:18px} .fmini a{display:inline;padding:0;color:var(--mute)} .fmini a:hover{color:var(--cyan)} /* ============================================================ BRAND EMBLEM TREATMENTS · the chrome figure-in-ring logo. The master PNG now carries REAL transparency (transparent background, opaque dark figure body, glowing ring + arcs), so the emblem renders directly as a normal PNG. No blend-mode, no black-keying, no luminance/radial mask — those would punch the figure's solid body back out. A soft drop-shadow glow is the only treatment. ============================================================ */ /* HERO: large subtle watermark behind the headline */ .hero-watermark{ position:absolute;left:50%;top:44%;transform:translate(-50%,-50%); width:min(820px,124vw);max-width:none;height:auto;z-index:0; opacity:.22;pointer-events:none; filter:saturate(1.08); } /* HERO: crisp glowing emblem above the wordmark (dual electric glow: blue core + red halo) */ .hero-emblem{ width:clamp(140px,17vw,200px);height:auto;margin:0 auto 10px; display:block;position:relative;z-index:2; filter:drop-shadow(0 0 26px rgba(47,107,255,.50)) drop-shadow(0 0 54px rgba(255,46,60,.22)); animation:emblemPulse 5.5s ease-in-out infinite; } @keyframes emblemPulse{0%,100%{filter:drop-shadow(0 0 22px rgba(47,107,255,.44)) drop-shadow(0 0 48px rgba(255,46,60,.18))}50%{filter:drop-shadow(0 0 34px rgba(91,155,255,.60)) drop-shadow(0 0 66px rgba(255,46,60,.30))}} @media(prefers-reduced-motion:reduce){.hero-emblem{animation:none}} @media(max-width:600px){.hero-watermark{opacity:.18;top:40%;width:140vw}.hero-emblem{margin-bottom:4px}} /* NAV: make the mark READ on the dark bar — a subtle glow only */ .brand .mark{ filter:drop-shadow(0 0 7px rgba(47,107,255,.40)); } /* FOOTER: proper brand lockup (emblem reads + glows) */ #footer .fbrand .brand .mark,#footer .fbrand .mark{ width:34px;height:34px; filter:drop-shadow(0 0 9px rgba(47,107,255,.42)); } #footer .fbrand .brand{gap:12px} /* AUTH pages (signin/account): emblem at the top */ .auth-emblem,.ashell .mark,.mhead-emblem{ filter:drop-shadow(0 0 18px rgba(47,107,255,.45)) drop-shadow(0 0 38px rgba(255,46,60,.22)); } .ashell .mark img{width:100%;height:100%} /* ============================================================ ELECTRICITY / LIGHTNING FX · electric blue + red, GPU-cheap. All effects animate transform/opacity/filter only (no layout), cause zero layout shift, and are fully disabled under prefers-reduced-motion. Tasteful: a few high-impact moments. ============================================================ */ /* ---- 1. HERO EMBLEM FLANKING ARCS (blue left, red right) ---- Pure CSS pseudo-elements on .hero-emblem so NO markup changes. They sit BEHIND the emblem (z-index:2 on the img above) and flank it, never covering the wordmark below. Flicker via opacity + a slight filter pulse to read like a crackling energy arc. */ .hero-emblem{ --arc-w:clamp(54px,7vw,96px); --arc-h:clamp(150px,19vw,230px); } .hero-emblem::before,.hero-emblem::after{ content:"";position:absolute;top:50%;width:var(--arc-w);height:var(--arc-h); transform:translateY(-50%);z-index:-1;pointer-events:none;border-radius:50%; background: radial-gradient(60% 90% at 100% 50%,rgba(47,107,255,.55),transparent 70%), radial-gradient(40% 70% at 100% 50%,rgba(91,155,255,.65),transparent 72%); -webkit-mask:radial-gradient(120% 86% at 130% 50%,transparent 58%,#000 60%,#000 70%,transparent 73%); mask:radial-gradient(120% 86% at 130% 50%,transparent 58%,#000 60%,#000 70%,transparent 73%); filter:blur(.6px) drop-shadow(0 0 8px rgba(47,107,255,.7)); opacity:.0;animation:arcCrackleL 3.1s steps(1,end) infinite; } .hero-emblem::before{ right:calc(100% - 8px); transform:translateY(-50%) scaleX(-1); } .hero-emblem::after{ left:calc(100% - 8px); background: radial-gradient(60% 90% at 0 50%,rgba(255,46,60,.55),transparent 70%), radial-gradient(40% 70% at 0 50%,rgba(255,90,100,.65),transparent 72%); -webkit-mask:radial-gradient(120% 86% at -30% 50%,transparent 58%,#000 60%,#000 70%,transparent 73%); mask:radial-gradient(120% 86% at -30% 50%,transparent 58%,#000 60%,#000 70%,transparent 73%); filter:blur(.6px) drop-shadow(0 0 8px rgba(255,46,60,.7)); animation:arcCrackleR 2.7s steps(1,end) infinite; } /* crackle = irregular flicker (opacity jumps) + faint scale jitter */ @keyframes arcCrackleL{ 0%,7%{opacity:.18;transform:translateY(-50%) scaleX(-1) scaleY(1)} 9%{opacity:.85;transform:translateY(-50%) scaleX(-1) scaleY(1.04)} 11%{opacity:.32}14%{opacity:.9;transform:translateY(-50%) scaleX(-1) scaleY(.97)} 16%{opacity:.5}40%{opacity:.22}43%{opacity:.78;transform:translateY(-50%) scaleX(-1) scaleY(1.03)} 46%,100%{opacity:.28;transform:translateY(-50%) scaleX(-1) scaleY(1)} } @keyframes arcCrackleR{ 0%,5%{opacity:.2}8%{opacity:.82;transform:translateY(-50%) scaleY(1.04)} 10%{opacity:.34}30%{opacity:.24}33%{opacity:.86;transform:translateY(-50%) scaleY(.97)} 36%{opacity:.46}60%{opacity:.2}63%{opacity:.8;transform:translateY(-50%) scaleY(1.03)} 66%,100%{opacity:.3;transform:translateY(-50%) scaleY(1)} } /* ---- 2. PRIMARY BUTTONS: charged glow + hover crackle ---- Idle: soft animated blue glow (box-shadow pulse). Hover/focus: intensify + a quick red/blue spark via a pseudo-element ring. */ .btn-primary{position:relative;isolation:isolate;animation:btnCharge 3.4s ease-in-out infinite} @keyframes btnCharge{ 0%,100%{box-shadow:0 10px 30px rgba(47,107,255,.30),0 0 0 0 rgba(91,155,255,0),inset 0 1px 0 rgba(255,255,255,.4)} 50%{box-shadow:0 12px 34px rgba(47,107,255,.42),0 0 18px 1px rgba(91,155,255,.28),inset 0 1px 0 rgba(255,255,255,.45)} } .btn-primary::after{ content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;pointer-events:none; background:linear-gradient(120deg,rgba(91,155,255,.0) 30%,rgba(91,155,255,.9) 48%,rgba(255,46,60,.9) 56%,rgba(255,46,60,0) 72%); opacity:0;transition:opacity .18s ease;filter:blur(3px); } .btn-primary:hover,.btn-primary:focus-visible{animation:none;box-shadow:0 16px 44px rgba(47,107,255,.5),0 0 24px 2px rgba(91,155,255,.45),inset 0 1px 0 rgba(255,255,255,.5)} .btn-primary:hover::after,.btn-primary:focus-visible::after{opacity:1;animation:btnSpark .5s ease-out} @keyframes btnSpark{0%{opacity:0;transform:translateX(-14%)}30%{opacity:1}100%{opacity:.55;transform:translateX(0)}} /* ---- 3. SECTION ACCENT: electric current under the eyebrow ---- A thin blue->red gradient line that "charges" across. Applied ONLY to .eyebrow inside section headers (sparing, high-impact). */ .sec-head .eyebrow,.hero .eyebrow{position:relative;display:inline-block;padding-bottom:9px} .sec-head .eyebrow::after,.hero .eyebrow::after{ content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;border-radius:2px; background:linear-gradient(90deg,transparent,var(--blue) 18%,var(--blue2) 42%,var(--energy) 70%,transparent); background-size:240% 100%;animation:currentRun 3.6s linear infinite; box-shadow:0 0 10px rgba(47,107,255,.55); } @keyframes currentRun{0%{background-position:120% 0}100%{background-position:-120% 0}} /* ---- 4. HERO HEADLINE: subtle periodic electric shimmer ---- A travelling light sweep across the chrome wordmark + a gentle glow pulse. Uses background-position only (cheap). */ .hero-logo.chrome{ background:linear-gradient(110deg,var(--chrome1) 0%,var(--chrome2) 26%,#7fb0ff 42%,#fff 50%,#5b9bff 58%,var(--chrome3) 74%,var(--chrome4) 100%); background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent; animation:wordmarkShimmer 7s ease-in-out infinite; } @keyframes wordmarkShimmer{0%,100%{background-position:120% 0}50%{background-position:-20% 0}} /* ---- 5. ELECTRIC TOP-BORDER on the CTA band (charges across) ---- */ .band{position:relative} .band::before{ content:"";position:absolute;left:0;right:0;top:-1px;height:2px;border-radius:2px;pointer-events:none; background:linear-gradient(90deg,transparent,var(--blue) 20%,var(--blue2) 45%,var(--energy) 72%,transparent); background-size:240% 100%;animation:currentRun 4.2s linear infinite; box-shadow:0 0 12px rgba(47,107,255,.5); } /* ---- GLOBAL reduced-motion kill switch for all electric FX ---- */ @media(prefers-reduced-motion:reduce){ .hero-emblem::before,.hero-emblem::after{animation:none;opacity:.3} .btn-primary{animation:none} .btn-primary::after{display:none} .sec-head .eyebrow::after,.hero .eyebrow::after,.band::before{animation:none} .hero-logo.chrome{animation:none;background-position:0 0} }