:root { color-scheme: dark; --bg:#0b0c0e; --panel:rgba(255,255,255,.075); --panel-border:rgba(255,255,255,.16); --text:#f8f8fa; --muted:#a5a7ae; --subtle:#6e7179; --radius:26px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; background:var(--bg); } body { min-width:320px; margin:0; overflow-x:hidden; background:radial-gradient(circle at 10% 5%,#343840 0,transparent 24rem),radial-gradient(circle at 90% 80%,#24262e 0,transparent 28rem),var(--bg); color:var(--text); font:400 16px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } a { color:inherit; text-decoration:none; } a:focus-visible { outline:3px solid #fff; outline-offset:4px; border-radius:8px; } #particle-field { position:fixed; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; opacity:.72; } .site-shell { position:relative; z-index:1; width:min(1120px,calc(100% - 32px)); margin:0 auto; } .glass { border:1px solid var(--panel-border); background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.035)); box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 22px 80px rgba(0,0,0,.24); backdrop-filter:blur(22px) saturate(130%); -webkit-backdrop-filter:blur(22px) saturate(130%); }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-top:18px; padding:12px 16px 12px 18px; border-radius:18px; } .brand { display:inline-flex; align-items:center; gap:9px; font-weight:760; letter-spacing:-.03em; } .brand__dot,.status-dot { width:9px; height:9px; border-radius:50%; background:#fff; box-shadow:0 0 18px #fff; } .text-link { color:var(--muted); font-size:.9rem; transition:color .2s ease; } .text-link:hover { color:#fff; }
.hero { display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:clamp(42px,9vw,128px); min-height:min(720px,calc(100vh - 90px)); padding:80px 5vw; } .hero__identity { max-width:640px; } .avatar-wrap { width:clamp(120px,17vw,180px); aspect-ratio:1; margin-bottom:32px; border-radius:37%; padding:4px; background:linear-gradient(135deg,#fff,#4f525c 42%,#eceef7); box-shadow:0 0 0 8px rgba(255,255,255,.03),0 32px 70px rgba(0,0,0,.48); animation:float 6s ease-in-out infinite; } .avatar { width:100%; height:100%; display:block; object-fit:cover; border-radius:35%; filter:contrast(1.06) grayscale(.15); } .eyebrow { margin:0 0 8px; color:var(--muted); font-size:.73rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; } h1,h2,p { margin-top:0; } h1 { max-width:7ch; margin-bottom:18px; font-size:clamp(3.2rem,9vw,7.7rem); line-height:.88; letter-spacing:-.085em; text-wrap:balance; } h2 { margin-bottom:10px; font-size:clamp(1.35rem,3vw,2rem); line-height:1.1; letter-spacing:-.045em; } .hero__summary,.connection__heading p,.info-card p { color:var(--muted); } .hero__summary { max-width:47ch; font-size:clamp(1rem,2vw,1.17rem); }
.hero__actions { display:grid; gap:11px; width:100%; } .social-link { display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:13px; min-height:68px; padding:13px 16px; border:1px solid rgba(255,255,255,.13); border-radius:18px; background:rgba(255,255,255,.05); color:var(--text); font-weight:650; transition:transform .22s ease,background .22s ease,border-color .22s ease; } .social-link:hover { transform:translateY(-4px); border-color:rgba(255,255,255,.38); background:rgba(255,255,255,.1); } .social-link svg { width:23px; height:23px; fill:currentColor; } .social-link--studio img { width:26px; height:26px; object-fit:contain; border-radius:7px; } .social-link__arrow { color:var(--muted); font-size:1.25rem; }
.connection { display:grid; grid-template-columns:1fr auto; gap:26px 40px; align-items:end; padding:clamp(24px,5vw,54px); border-radius:var(--radius); } .connection__heading { max-width:65ch; } .connection__heading p { margin-bottom:0; } .connection__status { grid-column:1/-1; display:inline-flex; align-items:center; gap:10px; color:#d2d3d8; font-size:.92rem; } .status-dot { width:8px; height:8px; background:#cbd0d9; box-shadow:0 0 16px #d8dce4; } .button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:12px 19px; border-radius:14px; font-weight:760; transition:transform .2s ease,box-shadow .2s ease; } .button:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(255,255,255,.18); } .button svg { width:20px; height:20px; fill:currentColor; } .button--primary { background:#fff; color:#101114; }
.info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:16px 0 72px; } .info-card { min-height:230px; padding:28px; border-radius:22px; animation:float 7s ease-in-out infinite; } .info-card:nth-child(2) { animation-delay:-2.3s; } .info-card:nth-child(3) { animation-delay:-4.6s; } .info-card__number { display:block; margin-bottom:52px; color:var(--subtle); font:700 .72rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; } .footer { display:flex; justify-content:space-between; gap:20px; padding:24px 4px 40px; color:var(--subtle); font-size:.86rem; } .footer nav { display:flex; flex-wrap:wrap; gap:18px; } .footer a:hover { color:#fff; } .reveal { animation:reveal .7s cubic-bezier(.2,.75,.25,1) both; } .reveal--late { animation-delay:.11s; } .reveal--later { animation-delay:.22s; } @keyframes reveal { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:translateY(0); } } @keyframes float { 50% { transform:translateY(-8px); } }
@media (max-width:760px) { .site-shell { width:min(100% - 24px,620px); } .hero { grid-template-columns:1fr; min-height:auto; gap:42px; padding:70px 12px; } .connection { grid-template-columns:1fr; } .button { width:100%; } .info-grid { grid-template-columns:1fr; } .info-card { min-height:0; } .info-card__number { margin-bottom:28px; } .footer { flex-direction:column; } } @media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } #particle-field { display:none; } }
.document-shell { min-height:100vh; display:flex; flex-direction:column; } .document-main { flex:1; display:grid; place-items:center; padding:clamp(44px,9vw,110px) 0; } .dashboard-card,.legal { width:min(780px,100%); padding:clamp(26px,6vw,62px); border-radius:var(--radius); } .dashboard-card { text-align:center; } .dashboard-card h1,.legal h1 { max-width:none; font-size:clamp(2.2rem,6vw,4.4rem); } .dashboard-card > p { max-width:57ch; margin:0 auto 26px; color:var(--muted); } .dashboard-icon { display:grid; place-items:center; width:54px; height:54px; margin:0 auto 24px; border:1px solid rgba(255,255,255,.36); border-radius:50%; color:#fff; font-size:1.4rem; box-shadow:0 0 30px rgba(255,255,255,.16); } .dashboard-note { max-width:59ch; margin:0 auto 28px; padding:18px; border:1px solid rgba(255,255,255,.11); border-radius:14px; background:rgba(0,0,0,.16); color:var(--muted); text-align:left; } .dashboard-note strong { color:var(--text); } .legal { color:var(--muted); } .legal h1,.legal h2 { color:var(--text); } .legal h2 { margin-top:34px; font-size:1.25rem; } .legal__updated { color:var(--subtle); font-size:.88rem; } .legal a { color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.34); text-underline-offset:3px; }
.stats-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; max-width:520px; margin:28px auto; text-align:left; }
.stats-identity { grid-column:1/-1; margin:0 0 2px; color:var(--muted); }
.stats-identity strong { color:var(--text); }
.stat-card { display:grid; gap:4px; padding:20px; border:1px solid rgba(255,255,255,.13); border-radius:16px; background:rgba(255,255,255,.055); }
.stat-card strong { font-size:clamp(1.5rem,5vw,2.3rem); line-height:1.1; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.stat-card span { color:var(--muted); font-size:.9rem; }
[hidden] { display:none !important; }
@media (max-width:420px) { .stats-grid { grid-template-columns:1fr; } }