:root{
  --bg:#05070f;
  --card:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.12);
  --text:rgba(255,255,255,.9);
  --muted:rgba(255,255,255,.68);
  --accent:#7c3aed; /* violet */
  --accent2:#22d3ee; /* cyan */
  --shadow: 0 18px 60px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0;
  font:16px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(124,58,237,.35), transparent 60%),
    radial-gradient(900px 600px at 85% 20%, rgba(34,211,238,.25), transparent 55%),
    radial-gradient(900px 600px at 50% 85%, rgba(34,211,238,.12), transparent 60%),
    var(--bg);
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1120px; margin:0 auto; padding:24px}

/* Top nav */
.nav{
  position:sticky;
  top:0;
  z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  backdrop-filter: blur(10px);
}
.nav::before{
  content:"";
  position:absolute;
  inset:-6px -18px;
  background:linear-gradient(to bottom, rgba(5,7,15,.86), rgba(5,7,15,.50));
  border-bottom:1px solid rgba(255,255,255,.08);
  z-index:-1;
}
.brand{display:flex; gap:12px; align-items:center; font-weight:800; letter-spacing:.5px}
.logo{
  width:28px; height:28px; border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 10px 30px rgba(124,58,237,.25);
}
.navlinks{display:flex; gap:10px; align-items:center; color:var(--muted); font-weight:700; flex-wrap:nowrap}
.navlinks a{padding:8px 10px; border-radius:12px}
.navlinks a:hover{background:rgba(255,255,255,.06); text-decoration:none; color:var(--text)}

/* Mobile nav */
.mobileNav{display:none; position:relative;}
.mobileNav summary{list-style:none; cursor:pointer; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:rgba(255,255,255,.04); font-weight:800; color:var(--text);}
.mobileNav summary::-webkit-details-marker{display:none}
.mobileNav[open] summary{outline:3px solid rgba(34,211,238,.35); outline-offset:2px}
.mobileNavLinks{position:absolute; right:0; top:52px; min-width:220px; background:rgba(5,7,15,.96); border:1px solid rgba(255,255,255,.12); border-radius:14px; box-shadow:0 22px 70px rgba(0,0,0,.45); padding:10px; display:flex; flex-direction:column; gap:6px; max-height:70vh; overflow:auto;}
.mobileNavLinks a{padding:10px 12px; border-radius:12px; color:rgba(255,255,255,.88); font-weight:800;}
.mobileNavLinks a:hover{background:rgba(255,255,255,.06); text-decoration:none}

/* Hero */
.hero{
  position:relative;
  padding:64px 0 24px;
}
.heroBg{
  position:absolute;
  inset:-240px -240px auto -240px;
  height:560px;
  background:
    radial-gradient(500px 320px at 25% 30%, rgba(124,58,237,.55), transparent 60%),
    radial-gradient(520px 360px at 70% 25%, rgba(34,211,238,.35), transparent 55%),
    conic-gradient(from 180deg at 50% 50%, rgba(124,58,237,.18), rgba(34,211,238,.14), rgba(124,58,237,.18));
  filter: blur(24px) saturate(120%);
  opacity:.85;
  animation: floatGlow 12s ease-in-out infinite;
  pointer-events:none;
}
@keyframes floatGlow{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(0,16px,0) scale(1.02); }
}
.kicker{color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:.14em; font-size:12px}
.h1{
  margin:12px 0 12px;
  font-size:48px; line-height:1.06; letter-spacing:-.03em;
}
.gradientText{
  background: linear-gradient(135deg, rgba(124,58,237,1), rgba(34,211,238,1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lead{max-width:780px; color:var(--muted); font-size:18px}
.ctaRow{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 14px; border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  font-weight:800;
  box-shadow: 0 10px 40px rgba(0,0,0,.18);
}
.btn.primary{
  background:linear-gradient(135deg, rgba(124,58,237,.98), rgba(34,211,238,.88));
  border:0;
  color:#071018;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}

/* Proof strip */
.proofStrip{
  margin-top:26px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(255,255,255,.04);
  overflow:hidden;
  position:relative;
}
.proofStrip::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(600px 140px at 20% 0%, rgba(124,58,237,.20), transparent 60%),
              radial-gradient(520px 160px at 80% 0%, rgba(34,211,238,.16), transparent 60%);
  pointer-events:none;
}
.ticker{
  display:flex;
  gap:18px;
  padding:12px 14px;
  white-space:nowrap;
  animation: scroll 26s linear infinite;
}
.ticker span{ color:rgba(255,255,255,.72); font-weight:800; font-size:13px; letter-spacing:.02em; }
.dot{opacity:.5}
@keyframes scroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* Layout helpers */
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin-top:22px}
.card{
  border:1px solid var(--border);
  background:var(--card);
  border-radius:18px;
  padding:18px;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.card h3{margin:0 0 8px; font-size:18px}
.card p{margin:0; color:var(--muted)}
.col6{grid-column:span 6}
.col4{grid-column:span 4}
.col8{grid-column:span 8}
.col12{grid-column:span 12}
.section{padding:34px 0}
.section h2{margin:0 0 10px; font-size:26px; letter-spacing:-.01em}
.split{display:flex; gap:18px; flex-wrap:wrap}
.split > *{flex:1 1 320px}

/* Work cards */
.workGrid{display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin-top:18px}
.workCard{grid-column:span 6}
.workMedia{
  margin:0 0 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  background:rgba(0,0,0,.25);
}
.workMedia img{width:100%; height:auto; display:block}
.carousel{position:relative; min-height:220px}
.carousel img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.01); transition:opacity 600ms ease}
.carousel img.active{opacity:1}
.carousel img:first-child{position:relative}
.workMeta{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.pill{font-size:12px; color:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.14); padding:6px 10px; border-radius:999px; background:rgba(0,0,0,.12); font-weight:800}
.list{margin:10px 0 0; padding-left:18px; color:var(--muted)}

/* How we work */
.steps{display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin-top:14px}
.step{grid-column:span 3}
.stepNum{font-weight:900; opacity:.8}
.stepTitle{font-weight:900; margin:4px 0 6px}
.stepText{color:var(--muted); font-size:14px; margin:0}

.footer{padding:28px 0 46px; color:var(--muted); font-size:13px}
.small{font-size:13px; color:var(--muted)}

@media (max-width:980px){
  .h1{font-size:38px}
  .col6,.col4,.col8,.workCard{grid-column:span 12}
  .step{grid-column:span 6}

  .navlinks{display:none}
  .mobileNav{display:block}
}
@media (max-width:540px){
  .step{grid-column:span 12}
}
@media (prefers-reduced-motion: reduce){
  .heroBg,.ticker{animation:none}
}


/* Full-width hero art */
.heroArtFull{padding:0; margin:18px 0 0;}
.heroArtFullInner{width:100%; max-width:none; padding:0;}
.heroArtImg{width:100%; max-height:600px; height:auto; display:block; object-fit:contain; margin:0 auto;}

@media (max-width:980px){.heroArtFull{margin-top:14px}}