/* ============================================================ 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 */ /* bioelectric synapse palette: teal/mint signal, electric blue secondary, warm "firing" accent */ --blue:#3b74e8; --blue2:#5a93f2; --cyan:#33d6c2; --ice:#c6efe6; --teal:#33d6c2; --energy:#ff6a4d; --energy2:#ff8a4a; --hot:#ff4d72; --chrome1:#ffffff; --chrome2:#e2e7ec; --chrome3:#a9b6b3; --chrome4:#6f7d82; --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(51,214,194,.07), transparent 62%), radial-gradient(55% 50% at 86% 96%, rgba(255,106,77,.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(51,214,194,.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) 38%,var(--chrome3) 70%,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} .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} .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(56,189,248,.30),inset 0 1px 0 rgba(255,255,255,.4)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(56,189,248,.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,94,58,.32),inset 0 1px 0 rgba(255,255,255,.35)} .btn-energy:hover{transform:translateY(-2px);box-shadow:0 16px 46px rgba(255,94,58,.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;align-items:center;text-align:center;padding:120px 0 80px;position:relative;overflow:hidden} .hero .wrap{position:relative;z-index:2} .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(59,130,246,.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(59,130,246,.10) 40deg,transparent 80deg,rgba(56,189,248,.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,94,58,.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(59,130,246,.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(59,130,246,.12);border:1px solid rgba(59,130,246,.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(59,130,246,.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,94,58,.3)} .tcol.to{border-color:rgba(56,189,248,.4);box-shadow:0 0 0 1px rgba(56,189,248,.15),0 18px 44px rgba(56,189,248,.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(56,189,248,.3),0 26px 60px rgba(56,189,248,.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(56,189,248,.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='%2338bdf8' 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(59,130,246,.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(59,130,246,.16),rgba(56,189,248,.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} } /* ===== 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(56,189,248,.5);color:var(--ice);box-shadow:0 0 0 1px rgba(56,189,248,.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(51,214,194,.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(51,214,194,.45)}70%{box-shadow:0 0 0 17px rgba(51,214,194,0)}100%{box-shadow:0 0 0 0 rgba(51,214,194,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(51,214,194,.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(51,214,194,.30),transparent 70%)} .hero-aurora i:nth-child(2){width:36vw;height:36vw;right:-8vw;bottom:-10vw;background:radial-gradient(circle,rgba(59,116,232,.24),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,106,77,.14),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(51,214,194,.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. Source art sits on pure black, so `mix-blend-mode:screen` drops the black and lets only the glowing figure + ring show on the dark neural background. No alpha-key artifacts. ============================================================ */ /* 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;mix-blend-mode:screen;pointer-events:none; filter:saturate(1.08); -webkit-mask-image:radial-gradient(closest-side,#000 50%,transparent 80%); mask-image:radial-gradient(closest-side,#000 50%,transparent 80%); } /* HERO: crisp glowing emblem above the wordmark */ .hero-emblem{ width:clamp(112px,15vw,164px);height:auto;margin:0 auto 8px; display:block;mix-blend-mode:screen; filter:drop-shadow(0 0 26px rgba(51,214,194,.45)) drop-shadow(0 0 54px rgba(59,116,232,.30)); animation:emblemPulse 5.5s ease-in-out infinite; } @keyframes emblemPulse{0%,100%{filter:drop-shadow(0 0 22px rgba(51,214,194,.40)) drop-shadow(0 0 48px rgba(59,116,232,.26))}50%{filter:drop-shadow(0 0 34px rgba(51,214,194,.55)) drop-shadow(0 0 66px rgba(59,116,232,.36))}} @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 — slightly larger + a subtle ring/glow */ .brand .mark{ mix-blend-mode:screen; filter:drop-shadow(0 0 7px rgba(51,214,194,.40)); background:radial-gradient(closest-side,rgba(51,214,194,.14),transparent 72%); } /* FOOTER: proper brand lockup (emblem reads + glows) */ #footer .fbrand .brand .mark,#footer .fbrand .mark{ width:34px;height:34px;mix-blend-mode:screen; filter:drop-shadow(0 0 9px rgba(51,214,194,.42)); background:radial-gradient(closest-side,rgba(51,214,194,.16),transparent 72%); } #footer .fbrand .brand{gap:12px} /* AUTH pages (signin/account): emblem at the top */ .auth-emblem,.ashell .mark,.mhead-emblem{ mix-blend-mode:screen; filter:drop-shadow(0 0 18px rgba(51,214,194,.45)) drop-shadow(0 0 38px rgba(59,116,232,.28)); } .ashell .mark img{width:100%;height:100%} /* Mask any residual square edge on lighter-than-black panels so the emblem reads as a floating mark, not a boxed image. */ .brand .mark,.auth-emblem,.mhead-emblem,#footer .fbrand .mark{ -webkit-mask-image:radial-gradient(closest-side,#000 68%,transparent 92%); mask-image:radial-gradient(closest-side,#000 68%,transparent 92%); }