/* NucleuX landing — shared design system. Per-page accent: set --accent on (default teal). */ :root{ --bg:#0D1B2A; --bg-2:#0a1622; --panel:#13283a; --panel-2:#16314a; --ink:#E8E0D5; --ink-muted:#aeb8bd; --ink-dim:#7d8a93; --rule:rgba(232,224,213,.09); --rule-strong:rgba(91,179,179,.28); --teal:#5BB3B3; --teal-bright:#76c7c4; --gold:#C9A86C; --gold-bright:#d8bd86; --amber:#D98E4A; --crimson:#D9534F; --violet:#B58BD4; --accent:var(--teal); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(58rem 40rem at 78% -12%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 60%), radial-gradient(48rem 34rem at 3% 6%, rgba(201,168,108,.09), transparent 60%), radial-gradient(42rem 42rem at 50% 122%, color-mix(in srgb,var(--accent) 9%,transparent), transparent 60%); } .wrap{position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:0 24px} a{color:inherit} /* Nav */ header{padding:24px 0 0} .nav{display:flex;align-items:center;justify-content:space-between;gap:16px} .brand{display:flex;align-items:center;gap:12px;text-decoration:none} .mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center; background:linear-gradient(135deg,var(--teal),#3f8f8f);color:#10202b;font-weight:800;font-size:20px; box-shadow:0 6px 20px rgba(91,179,179,.35), inset 0 1px 0 rgba(255,255,255,.18);letter-spacing:-.02em} .brand h1{font-size:19px;font-weight:750;letter-spacing:-.01em;line-height:1.05} .brand span{font-size:11.5px;color:var(--ink-dim);letter-spacing:.18em;text-transform:uppercase} .nav-links{display:flex;gap:8px;align-items:center} .nav-links a{font-size:13.5px;color:var(--ink-muted);text-decoration:none;padding:9px 15px;border-radius:10px;transition:.2s} .nav-links a:hover{color:var(--ink);background:rgba(91,179,179,.07)} .nav-links a.primary{border:1px solid var(--rule);} .nav-links a.primary:hover{border-color:var(--rule-strong)} /* Hero */ .hero{text-align:center;padding:72px 0 40px} .pill{display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase; color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); padding:6px 14px;border-radius:999px;margin-bottom:22px;background:color-mix(in srgb,var(--accent) 7%,transparent)} .hero h2{font-size:clamp(32px,5.2vw,56px);line-height:1.06;font-weight:800;letter-spacing:-.025em} .grad{background:linear-gradient(120deg,var(--teal-bright),var(--gold-bright)); -webkit-background-clip:text;background-clip:text;color:transparent} .lede{max-width:600px;margin:20px auto 0;color:var(--ink-muted);font-size:clamp(15px,1.8vw,18px)} .hero-cta{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* Buttons */ .btn{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:650; padding:12px 22px;border-radius:12px;text-decoration:none;transition:.2s;cursor:pointer;border:1px solid transparent} .btn-primary{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 65%,#1a1a1a)); color:#0e1c27;box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 30%,transparent)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 38%,transparent)} .btn-ghost{border-color:var(--rule);color:var(--ink-muted)} .btn-ghost:hover{color:var(--ink);border-color:var(--rule-strong);background:rgba(91,179,179,.06)} .btn .arr{transition:transform .2s}.btn:hover .arr{transform:translateX(4px)} /* Section scaffolding */ .section{padding:40px 0} .eyebrow{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);font-weight:650;margin-bottom:14px} .section h3{font-size:clamp(22px,3vw,30px);font-weight:760;letter-spacing:-.02em;margin-bottom:10px} .section .muted{color:var(--ink-muted);max-width:640px} /* Level / tier badge */ .tier{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;letter-spacing:.04em; color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent); background:color-mix(in srgb,var(--accent) 7%,transparent);padding:6px 13px;border-radius:999px} .tier .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)} /* Chips (subjects / subspecialties) */ .chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px} .chip{font-size:13px;color:var(--ink-muted);background:var(--panel);border:1px solid var(--rule); border-radius:9px;padding:7px 13px;transition:.18s} .chip:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--ink)} /* Maintenance strip (the differentiator) */ .maintain{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--rule); border-radius:20px;padding:30px;margin:8px 0} .maintain h3{margin-bottom:6px} .pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:22px} .pillar{display:flex;gap:13px;align-items:flex-start} .pillar .pico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:19px;flex:0 0 auto; background:color-mix(in srgb,var(--accent) 13%,transparent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent)} .pillar h4{font-size:15px;font-weight:700;margin-bottom:3px} .pillar p{font-size:13.5px;color:var(--ink-muted);line-height:1.5} /* Feature grid */ .features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px} .feature{background:var(--panel);border:1px solid var(--rule);border-radius:16px;padding:20px;transition:.2s} .feature:hover{border-color:color-mix(in srgb,var(--accent) 35%,transparent);transform:translateY(-3px)} .feature .fico{font-size:22px;margin-bottom:10px} .feature h4{font-size:16px;font-weight:700;margin-bottom:5px} .feature p{font-size:13.5px;color:var(--ink-muted)} /* App cards (hub) */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px} .card{--accent:var(--teal);position:relative;display:flex;flex-direction:column;gap:13px; background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--rule); border-radius:18px;padding:22px;text-decoration:none;color:inherit;overflow:hidden; transition:transform .22s,border-color .22s,box-shadow .22s} .card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);opacity:.85} .card.live{cursor:pointer} .card.live:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 45%,transparent); box-shadow:0 16px 40px rgba(0,0,0,.35), inset 0 0 60px color-mix(in srgb,var(--accent) 7%,transparent)} .card.soon{opacity:.93} .card-top{display:flex;align-items:center;gap:13px} .ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-weight:800;font-size:15px; color:#0e1c27;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 58%,#2a2a2a)); box-shadow:inset 0 1px 0 rgba(255,255,255,.18);flex:0 0 auto;letter-spacing:-.02em} .card h4{font-size:18px;font-weight:730;letter-spacing:-.01em} .card .sub{font-size:12px;color:var(--ink-dim)} .card .desc{font-size:14px;color:var(--ink-muted);flex:1} .row{display:flex;align-items:center;justify-content:space-between;margin-top:4px} .badge{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px} .badge.on{color:#0e1c27;background:var(--accent)} .badge.on .dot{width:7px;height:7px;border-radius:50%;background:#0e1c27;animation:pulse 1.8s ease-in-out infinite} @keyframes pulse{50%{opacity:.4}} .badge.soon{color:var(--gold-bright);border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);background:rgba(201,168,108,.07)} .go{font-size:14px;font-weight:650;color:var(--accent);display:inline-flex;align-items:center;gap:6px} .card.live:hover .go .arr{transform:translateX(4px)}.go .arr{transition:transform .2s} .waitlist{font-size:13px;color:var(--ink-dim)} /* Footer */ footer{margin-top:50px;border-top:1px solid var(--rule);padding:30px 0 46px; display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between} footer .f-brand{display:flex;align-items:center;gap:10px;color:var(--ink-muted);font-size:14px} footer .dot-mark{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--teal),#3f8f8f); display:grid;place-items:center;color:#10202b;font-weight:800;font-size:13px} footer small{color:var(--ink-dim);font-size:12.5px} footer a{color:var(--teal-bright);text-decoration:none} .back{font-size:13px;color:var(--ink-dim);text-decoration:none} .back:hover{color:var(--ink-muted)}