:root { --bg:#0d0f13; --card:#161a22; --line:#262b36; --text:#eceff4; --muted:#9aa3b2; --accent:#ff7a3d; color-scheme: dark; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.6 ui-sans-serif,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color: inherit; }
p { margin: 0; }
h1,h2,h3 { margin:0; line-height:1.1; letter-spacing:-.02em; }
.wrap { width:min(1160px, 100% - 32px); margin-inline:auto; }
:focus-visible { outline:2px solid #35c6b4; outline-offset:3px; border-radius:6px; }

.nav { position:sticky; top:0; z-index:10; backdrop-filter:blur(14px); background:rgba(13,15,19,.75); border-bottom:1px solid var(--line); }
.nav-in { display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand { font-weight:750; font-size:21px; text-decoration:none; letter-spacing:-.02em; }
.brand b { color:var(--accent); font-weight:750; }
nav { display:flex; align-items:center; gap:22px; }
nav a { text-decoration:none; color:var(--muted); font-size:15px; }
nav a:hover { color:var(--text); }
nav .pill { border:1px solid var(--line); padding:7px 14px; border-radius:999px; color:var(--text); }
nav .pill:hover { border-color:var(--accent); }
@media (max-width:520px){ nav a:not(.pill){ display:none; } }

.hero { position:relative; overflow:hidden; padding:84px 0 0; }
.hero::before { content:""; position:absolute; inset:-30% -10% auto auto; width:75vw; height:75vw; max-width:1000px; max-height:1000px; background:radial-gradient(closest-side, rgba(53,198,180,.14), transparent 70%); pointer-events:none; }
.hero::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.4; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(70% 90% at 70% 20%,#000,transparent); }
.hero .wrap { position:relative; z-index:1; }
.eyebrow { display:inline-flex; gap:8px; align-items:center; color:var(--accent); font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; margin-bottom:20px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--accent); animation:pulse 2s infinite; }
@keyframes pulse { 0%{ box-shadow:0 0 0 0 rgba(255,122,61,.6);} 70%{ box-shadow:0 0 0 9px rgba(255,122,61,0);} 100%{ box-shadow:0 0 0 0 rgba(255,122,61,0);} }
h1 { font-size:clamp(40px,7vw,84px); font-weight:800; max-width:15ch; }
.grad { background:linear-gradient(95deg,#35c6b4,#5aa9ff 45%,#ff6bd6); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead { color:var(--muted); font-size:clamp(17px,2vw,21px); max-width:560px; margin-top:24px; }

.ticker { position:relative; z-index:1; margin-top:64px; border-block:1px solid var(--line); overflow:hidden; white-space:nowrap; background:#0b0d11; }
#ticker { display:inline-flex; gap:0; animation:marquee 38s linear infinite; }
#ticker span { padding:14px 28px; color:var(--muted); font:600 13px ui-monospace,Menlo,monospace; text-transform:uppercase; letter-spacing:.1em; }
#ticker span::after { content:"•"; margin-left:56px; color:var(--accent); }
@keyframes marquee { to { transform:translateX(-50%); } }

.section { padding:72px 0 96px; }
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
@media (max-width:760px){ .grid { grid-template-columns:1fr; } .section { padding:48px 0 64px; } .hero { padding-top:52px; } }
.card { background:var(--card); border:1px solid var(--line); border-radius:20px; overflow:hidden; transition:border-color .25s, transform .25s, box-shadow .25s; }
.card:hover { border-color:color-mix(in srgb, var(--c) 60%, var(--line)); transform:translateY(-4px); box-shadow:0 30px 60px -36px var(--c); }
.media { aspect-ratio:4/3; background:radial-gradient(75% 75% at 50% 35%, #232a36, #12151b); border-bottom:1px solid var(--line); }
canvas { display:block; width:100%; height:100%; }
.body { padding:20px 24px 24px; }
.body h3 { font-size:22px; display:flex; align-items:center; gap:10px; }
.body h3::before { content:""; width:10px; height:10px; border-radius:50%; background:var(--c); box-shadow:0 0 14px var(--c); }
.body p { color:var(--muted); margin-top:8px; }
.body a { display:inline-block; margin-top:12px; color:var(--c); font-weight:600; text-decoration:none; }
.body a:hover { text-decoration:underline; text-underline-offset:4px; }

.foot { border-top:1px solid var(--line); padding:28px 0; }
.foot-in { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.foot p { color:var(--muted); font-size:14px; }

/* contact page */
.contact-hero { padding-bottom: 96px; }
.contact-hero h1 { max-width: 18ch; }
nav a[aria-current="page"] { color: var(--text); }
.contact-card { margin-top: 40px; max-width: 560px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 28px; box-shadow: 0 30px 80px -50px #000; }
.label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mail { display: inline-block; margin: 8px 0 20px; font-size: clamp(22px, 4.2vw, 34px); font-weight: 700; letter-spacing: -.02em; text-decoration: none; word-break: break-all; }
.mail:hover { color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 999px; border: 1px solid transparent; background: var(--accent); color: #16100c; font: 600 15px/1 inherit; text-decoration: none; cursor: pointer; }
.btn:hover { background: #ff8c57; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { background: #ffffff0d; border-color: #3a4150; }
.copied { min-height: 1.4em; margin-top: 12px; font-size: 14px; color: #35c6b4; }
.sub-h { font-size: 22px; margin-top: 48px; }
.hint { color: var(--muted); font-size: 15px; margin-top: 8px; }
.hint a { color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 20px; max-width: 760px; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; text-decoration: none; font-size: 14.5px; color: var(--text); background: #ffffff05; transition: border-color .15s, background .15s; }
.chip:hover { border-color: var(--accent); background: #ff7a3d14; }
.foot p a { color: var(--text); text-decoration: none; }
.foot p a:hover { color: var(--accent); }