/* Zerium Studio — Neon/Metallic Professional One‑Pager */
:root{
  --bg:#0B0B12; --fg:#E7E7EC; --muted:#B4B6C8;
  --cyan:#35E0FF; --violet:#8A5CFF; --mag:#FF4DD8;
  --glass:rgba(255,255,255,.06);
  --max:1200px; --radius:18px; --shadow:0 10px 40px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--fg);background:radial-gradient(1200px 600px at 15% -10%, rgba(53,224,255,.12), transparent 55%),radial-gradient(1200px 700px at 120% 10%, rgba(138,92,255,.10), transparent 60%),var(--bg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 24px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg, rgba(11,11,18,.8), rgba(11,11,18,.35));border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.5px}
.logo{height:36px;width:auto;display:block}
.brand-text{display:none}
.menu{display:flex;gap:14px;align-items:center}
.menu .link{padding:8px 12px;border-radius:10px}
.menu .link:hover{background:rgba(255,255,255,.06)}
.btn{padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.14);font-weight:600}
.btn.glow{box-shadow:0 0 18px rgba(53,224,255,.35), inset 0 0 10px rgba(138,92,255,.25)}
.btn.ghost{background:transparent}

/* Hero */
.hero{position:relative;min-height:74vh;display:grid;place-items:center;overflow:hidden}
#fx{position:absolute;inset:0;z-index:0}
.hero-inner{position:relative;z-index:1;text-align:center}
.wordmark{font-family:'Space Grotesk',Inter,sans-serif;margin:0}
.zerium{display:inline-block;font-size:clamp(42px,8vw,112px);font-weight:700;letter-spacing:.04em;line-height:1;
  background:linear-gradient(90deg,#7BE7FF,#B29DFF 35%,#7BE7FF 70%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 10px 30px rgba(138,92,255,.45));}
.chain{display:block;margin:4px auto 2px;width:120px;height:30px;opacity:.9}
.studio{display:block;letter-spacing:.35em;font-weight:700;color:#EDEDF7;position:relative}
.studio::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-28px;width:min(420px,70vw);height:34px;
  background:radial-gradient(closest-side, rgba(255,255,255,.38), rgba(255,255,255,0) 70%);filter:blur(8px)}

.tagline{margin:28px 0 0;color:var(--muted)}
.cta{margin:26px auto 0;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Sections */
.section{padding:88px 0}
.section-head{text-align:center;max-width:760px;margin:0 auto 32px}
.section-head h2{margin:0 0 10px;font-weight:800}
.section-head p{margin:0;color:var(--muted)}

.grid{display:grid;gap:18px}
.work-grid{grid-template-columns:repeat(3,1fr)}
.card{background:var(--glass);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);position:relative;overflow:hidden;isolation:isolate}
.card h3{margin:0 0 8px}
.card .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.card .tags span{font-size:.78rem;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);color:#D9D9E2}

.case .card-bg{position:absolute;inset:-40% -20% auto -20%;height:140px;z-index:-1;opacity:.9;filter:blur(2px)}
.bg1{background:radial-gradient(closest-side, rgba(138,92,255,.18), transparent 60%)}
.bg2{background:radial-gradient(closest-side, rgba(53,224,255,.20), transparent 60%)}
.bg3{background:radial-gradient(closest-side, rgba(255,77,216,.18), transparent 60%)}

.services{grid-template-columns:repeat(3,1fr)}
.svc ul{margin:10px 0 0 18px;color:var(--muted)}

.stack{grid-template-columns:repeat(5,1fr)}
.chip{padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12);text-align:center;background:rgba(255,255,255,.04)}

/* Contact */
.contact-form{max-width:760px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form input, .contact-form textarea{background:#0F0F19;border:1px solid rgba(255,255,255,.12);border-radius:12px;color:var(--fg);padding:12px 14px;font:inherit}
.contact-form textarea{grid-column:1/-1;min-height:140px;resize:vertical}
.mailfallback{text-align:center;color:var(--muted);margin-top:12px}

/* Footer */
.site-footer{padding:42px 0;color:var(--muted);border-top:1px solid rgba(255,255,255,.06);text-align:center}

/* Responsive */
@media (max-width:1000px){
  .work-grid{grid-template-columns:1fr 1fr}
  .services{grid-template-columns:1fr 1fr}
  .stack{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:640px){
  .work-grid,.services{grid-template-columns:1fr}
  .stack{grid-template-columns:1fr 1fr}
  .brand-text{display:inline}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}