:root { color-scheme: dark; --ink:#edf5ff; --muted:#9caec3; --line:#ffffff1c; --panel:#0d1b2bdb; --accent:#8dd6ff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:#07111d; color:var(--ink); font:15px/1.6 Inter,ui-sans-serif,system-ui,sans-serif; }
a { color:inherit; }
.rain-canvas { position:fixed; inset:0; z-index:0; width:100%; height:100%; background:linear-gradient(#081a2c,#07111d 70%); }
.site-header,.hero,.about,.site-footer { position:relative; z-index:1; }
.site-header { position:fixed; inset:0 0 auto; min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 max(24px,5vw); border-bottom:1px solid var(--line); background:#07111de8; backdrop-filter:blur(16px); }
.brand,.footer-brand { display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none; }
.brand img,.footer-brand img { width:38px; height:38px; object-fit:contain; border:1px solid var(--line); border-radius:10px; }
.brand span { display:grid; line-height:1.1; gap:3px; }.brand small { color:var(--accent); font-size:9px; letter-spacing:.14em; font-weight:700; }.brand strong { font-size:16px; }
.desktop-nav { display:flex; gap:8px; }.desktop-nav a,.mobile-nav a { padding:8px 10px; border:1px solid transparent; border-radius:8px; color:var(--muted); text-decoration:none; transition:color .18s,border-color .18s,box-shadow .18s; }.desktop-nav a:hover,.desktop-nav a:focus-visible,.mobile-nav a:hover,.mobile-nav a:focus-visible { color:#fff; border-color:#8dd6ff88; box-shadow:0 0 0 3px #8dd6ff16; outline:none; }
.menu-button { display:none; color:#fff; border:1px solid var(--line); border-radius:8px; background:transparent; padding:8px 10px; font-size:18px; }.mobile-nav { display:none; }
.hero { width:min(880px,calc(100% - 40px)); min-height:760px; margin:auto; padding:180px 0 150px; display:grid; align-content:center; }.eyebrow { margin:0 0 12px; color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }.hero h1,.about h2 { max-width:780px; margin:0; font-size:clamp(3.4rem,10vw,8.5rem); line-height:.95; letter-spacing:-.07em; }.hero-copy { max-width:520px; margin:24px 0 0; color:var(--muted); font-size:clamp(1rem,2vw,1.2rem); }.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }.primary-button,.secondary-button { display:inline-flex; align-items:center; border:1px solid #8dd6ff88; border-radius:9px; padding:11px 15px; color:#07111d; background:var(--accent); font:inherit; font-weight:700; text-decoration:none; cursor:pointer; transition:border-color .18s,box-shadow .18s; }.secondary-button { color:var(--ink); background:#ffffff0b; border-color:var(--line); }.primary-button:hover,.primary-button:focus-visible,.secondary-button:hover,.secondary-button:focus-visible { border-color:#fff; box-shadow:0 0 0 4px #8dd6ff20; outline:none; }
.about { width:min(1000px,calc(100% - 40px)); margin:0 auto; padding:70px 0 120px; border-top:1px solid var(--line); }.about h2 { max-width:650px; font-size:clamp(2.5rem,6vw,5.3rem); }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:44px; }.feature-grid article { padding:22px; border:1px solid var(--line); border-radius:14px; background:var(--panel); transition:border-color .18s,box-shadow .18s; }.feature-grid article:hover { border-color:#8dd6ff70; box-shadow:0 12px 35px #0004; }.feature-grid span { color:var(--accent); font-size:12px; }.feature-grid h3 { margin:25px 0 8px; }.feature-grid p { margin:0; color:var(--muted); }
.site-footer { width:min(1000px,calc(100% - 40px)); margin:0 auto; padding:22px 0 28px; border-top:1px solid var(--line); }.footer-top { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }.social-links { display:flex; flex-wrap:wrap; gap:7px; }.social-links a { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; color:var(--muted); font-size:13px; text-decoration:none; transition:color .18s,border-color .18s,box-shadow .18s; }.social-links a:hover,.social-links a:focus-visible { color:#fff; border-color:#8dd6ff88; box-shadow:0 0 0 3px #8dd6ff16; outline:none; }.copyright { margin:18px 0 0; padding-top:14px; border-top:1px solid #ffffff12; color:var(--muted); font-size:12px; }.copyright a { color:#fff; }
.top-button { position:fixed; right:22px; bottom:22px; z-index:5; width:42px; height:42px; border:1px solid #8dd6ff88; border-radius:999px; color:#fff; background:#102337; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .18s,border-color .18s,box-shadow .18s; }.top-button[data-visible="true"] { opacity:1; pointer-events:auto; }.top-button:hover,.top-button:focus-visible { border-color:#fff; box-shadow:0 0 0 4px #8dd6ff20; outline:none; }
@media (max-width:680px) { .site-header { padding:0 18px; }.desktop-nav { display:none; }.menu-button { display:block; }.mobile-nav[data-open="true"] { display:grid; position:absolute; inset:72px 18px auto; padding:10px; border:1px solid var(--line); border-radius:12px; background:#0d1b2b; box-shadow:0 18px 40px #0006; }.hero { min-height:690px; padding-top:145px; }.feature-grid { grid-template-columns:1fr; }.about,.site-footer { width:min(100% - 32px,1000px); }.footer-top { align-items:flex-start; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.rain-canvas { opacity:.7; } }