:root {
  --navy:#0b1530; --navy2:#132a5a; --ink:#0f1b3d; --mut:#5b6476; --line:#e2e6ee; --paper:#f5f7fb;
  --acc:#0fa3a0; --mint:#7ff0d6; --violet:#6c5cff; --gold:#f5b841; --coral:#ff7a59; --ok:#22a861; --bad:#e5484d;
  --film: linear-gradient(90deg,#6c5cff,#22c1e0 35%,#2fd39a 60%,#f5b841 85%,#ff7a59);
}
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body { font-family:'IBM Plex Sans', system-ui, sans-serif; color:#fff; background:var(--navy); -webkit-font-smoothing:antialiased; }
a { color:var(--mint); }
button, input { font:inherit; }
.bg { position:fixed; inset:0; z-index:0; background:
  radial-gradient(1100px 600px at 0% -10%, #23458a 0%, transparent 60%),
  radial-gradient(900px 560px at 110% 110%, #0f5b63 0%, transparent 60%),
  radial-gradient(600px 400px at 70% 10%, rgba(108,92,255,.35) 0%, transparent 60%), var(--navy); }
canvas.fx { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.wrap { position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; }
header.site { display:flex; align-items:center; gap:14px; padding:18px clamp(16px,4vw,48px); }
.logo { width:42px; height:42px; border-radius:12px; background:var(--film); background-size:200% 100%; animation:film 8s linear infinite; display:grid; place-items:center; font:800 12px Outfit; letter-spacing:-.02em; color:var(--navy); box-shadow:0 8px 24px rgba(34,193,224,.25); flex:none; }
@keyframes film { to { background-position:200% 0; } }
.brandtxt { display:flex; flex-direction:column; line-height:1.15; }
.brandtxt b { font:700 16px Outfit; letter-spacing:.01em; } .brandtxt span { font-size:12px; color:#a9b7d6; }
header.site .sp { flex:1; }
.pill { display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:30px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); font-size:12.5px; color:#dbe3f3; }
.pill i { width:8px; height:8px; border-radius:50%; background:#2fd39a; box-shadow:0 0 8px #2fd39a; animation:blink 2s infinite; font-style:normal; }
@keyframes blink { 50% { opacity:.35; } }
.eyebrow { font:600 12px 'IBM Plex Mono', monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--mint); }
.grad { background:var(--film); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:film 8s linear infinite; }
footer.site { margin-top:auto; padding:22px clamp(16px,4vw,48px); display:flex; align-items:center; gap:14px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.08); background:rgba(5,10,28,.35); backdrop-filter:blur(6px); }
footer.site .prof { display:flex; align-items:center; gap:12px; }
footer.site .av { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#6c5cff,#0fa3a0); display:grid; place-items:center; font:700 14px Outfit; flex:none; }
footer.site b { font:600 14.5px Outfit; } footer.site small { display:block; color:#a9b7d6; font-size:12.5px; }
footer.site .sp { flex:1; } footer.site .cp { font-size:12px; color:#7f8db0; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:12px; padding:13px 18px; font-weight:600; font-size:15px; color:#fff; background:linear-gradient(90deg,#0fa3a0,#6c5cff); box-shadow:0 10px 26px rgba(108,92,255,.35); cursor:pointer; transition:transform .15s, box-shadow .15s; text-decoration:none; }
.btn:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(108,92,255,.45); }
.btn.ghost { background:rgba(255,255,255,.08); box-shadow:none; border:1px solid rgba(255,255,255,.18); font-size:13.5px; padding:9px 13px; }
.rise { animation:rise .7s both; } .d1 { animation-delay:.08s; } .d2 { animation-delay:.16s; } .d3 { animation-delay:.24s; } .d4 { animation-delay:.32s; }
@keyframes rise { from { opacity:0; transform:translateY(16px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }