:root{
  --bg: #05070d;
  --panel: rgba(255,255,255,0.06);
  --panel-strong: rgba(255,255,255,0.12);
  --text: #e6f1ff;
  --muted: #9fb0c3;
  --primary: #55ffe0;
  --accent: #7a5cff;
  --hot: #ff3b7a;
  --ring: 0 0 30px rgba(122, 92, 255, .45);
  --radius: 18px;
  --grid: radial-gradient(1000px 600px at 10% -10%, rgba(122,92,255,.35) 0, transparent 60%),
          radial-gradient(900px 600px at 90% 10%, rgba(85,255,224,.20) 0, transparent 55%);
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color:var(--text);
  background: var(--bg);
  background-image: var(--grid);
  overflow-x:hidden;
}

/* Floating orbs for depth */
.bg-orb{
  position: fixed;
  width: 40vmax; height: 40vmax;
  border-radius: 50%;
  filter: blur(60px) saturate(140%);
  opacity:.3; z-index:0; pointer-events:none;
  mix-blend-mode: screen;
}
.bg-orb--one{ background: radial-gradient(circle at 30% 40%, var(--accent), transparent 60%); top:-10vmax; left:-10vmax; animation: float1 18s ease-in-out infinite; }
.bg-orb--two{ background: radial-gradient(circle at 60% 50%, var(--primary), transparent 60%); bottom:-12vmax; right:-6vmax; animation: float2 20s ease-in-out infinite; }
.bg-orb--three{ background: radial-gradient(circle at 50% 50%, var(--hot), transparent 60%); top:10vmax; right:25vmax; animation: float3 22s ease-in-out infinite; }

@keyframes float1{ 50%{ transform: translate3d(4vmax,2vmax,0) scale(1.05);} }
@keyframes float2{ 50%{ transform: translate3d(-3vmax,-2vmax,0) scale(1.07);} }
@keyframes float3{ 50%{ transform: translate3d(2vmax,3vmax,0) scale(1.04);} }

/* Constellation canvas backdrop */
#constellation{
  position: fixed; inset:0; z-index:0; opacity:.35;
}

/* Header */
.site-header{
  position: sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px; backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(5,7,13,.8), rgba(5,7,13,.35) 60%, transparent);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{ display:flex; gap:12px; align-items:center; text-decoration:none; color:var(--text); font-weight:700; letter-spacing:.2px; }
.brand img{ width:32px; height:32px }
.nav{ display:flex; gap:16px; align-items:center }
.nav a{ color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:12px; transition:.2s }
.nav a:hover{ color:var(--text); background: var(--panel) }
.nav .cta{ background: linear-gradient(90deg, var(--accent), var(--primary)); color:#0b0f17; font-weight:700; box-shadow: var(--ring) }
.nav .cta:hover{ transform: translateY(-1px) }

/* Hero */
.hero{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:40px; align-items:center;
  padding:72px 28px 40px; position:relative; z-index:1;
}
.hero__copy h1{
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(36px, 6vw, 78px);
  line-height:1.02; margin: 0 0 16px;
}
.fx-gradient{
  background: linear-gradient(90deg, var(--accent), var(--primary));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 20px rgba(122,92,255,.25);
}
.lead{ color: var(--muted); font-size: clamp(16px, 2.1vw, 20px) }
.hero__cta{ display:flex; gap:12px; margin:22px 0 14px }
.btn{ border:0; border-radius:14px; padding:12px 16px; text-decoration:none; cursor:pointer; }
.btn--primary{ background: linear-gradient(90deg, var(--accent), var(--primary)); color:#0b0f17; font-weight:800; letter-spacing:.2px; }
.btn--ghost{ background: transparent; border:1px solid var(--panel-strong); color: var(--text) }
.pillars{ display:flex; gap:12px; list-style:none; padding:0; margin:18px 0 0 }
.pillars li{ padding:8px 12px; border-radius:12px; background: var(--panel); border:1px solid var(--panel-strong); color:var(--muted) }

.hero__art{
  display:flex; align-items:center; justify-content:center;
  padding:10px;
}
.hero__art img{
  max-width: 100%; height:auto; filter: drop-shadow(0 30px 60px rgba(0,0,0,.5));
}

/* Content cards */
.cards{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; padding: 10px 28px 28px;
}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); padding:20px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  backdrop-filter: blur(12px);
}
.card h3{ margin:6px 0 10px; font-family: "Space Grotesk", Inter, sans-serif }
.card p, .card li{ color: var(--muted) }
.values{ padding-left:18px; margin: 8px 0 0 }

/* Panels */
.panels{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; padding: 10px 28px 60px;
}
.panel{
  background: var(--panel);
  border:1px solid var(--panel-strong);
  border-radius: var(--radius); padding:18px;
}
.panel h4{ margin:6px 0 6px }
.panel p{ color: var(--muted) }

/* Pages */
.page{ padding: 48px 28px }
.page--about .about-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-top:12px;
}
.page--contact .contact-form{
  max-width:720px; background: var(--panel);
  border:1px solid var(--panel-strong); border-radius: var(--radius);
  padding:18px; backdrop-filter: blur(8px);
}
.field{ display:grid; gap:6px; margin: 10px 0 }
.field input, .field textarea{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.12); color: var(--text);
  border-radius:12px; padding:12px; outline:none;
}
.field input:focus, .field textarea:focus{ border-color: var(--primary); box-shadow: var(--ring) }
.form-success{ color: var(--primary); margin-top:10px }

/* Footer */
.site-footer{
  position: relative; z-index:1;
  border-top:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(5,7,13,.2), rgba(5,7,13,.6));
}
.footer-inner{ display:grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap:18px; padding: 18px 28px }
.footer-brand{ display:grid; gap:6px }
.footer-brand img{ width:28px }
.footer-links{ display:flex; flex-wrap:wrap; gap:12px; align-content:start }
.footer-links a{ color: var(--muted); text-decoration:none; }
.footer-links a:hover{ color: var(--text) }
.footer-note{ position:relative }
.footer-note .grid{ position:absolute; right:0; bottom:0; width:160px; opacity:.35 }
.footer-note p{ margin:0; color: var(--muted) }

/* Responsive */
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; }
  .panels{ grid-template-columns: 1fr 1fr; }
  .page--about .about-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .panels{ grid-template-columns: 1fr; }
}