:root {
  --bg: #050816;
  --bg-2: #080d1d;
  --panel: rgba(14, 14, 18, 0.76);
  --panel-strong: rgba(18, 18, 24, 0.92);
  --text: #f7f8ff;
  --muted: #9198ad;
  --muted-2: #626b82;
  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.20);
  --acid: #4c8dff;
  --cyan: #ff5c77;
  --violet: #a78bfa;
  --pink: #ff78b7;
  --radius: 16px;
  --max: 1280px;
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 78% 12%, rgba(167,139,250,.10), transparent 28rem),
    radial-gradient(circle at 18% 68%, rgba(255,92,119,.055), transparent 34rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 72%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 58%, rgba(76,141,255,.015) 58% 59%, transparent 59%);
}

body.menu-open { overflow: hidden; }

::selection {
  color: #050816;
  background: var(--acid);
}

button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

#webgl {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}

body.webgl-ready #webgl { opacity: 1; }

.noise {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.site-header, main, .footer { position: relative; z-index: 3; }

.site-header {
  position: fixed;
  top: 14px;
  left: 50%;
  width: min(calc(100% - 28px), var(--max));
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px 0 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  transform: translateX(-50%);
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
  z-index: 50;
}

.site-header.scrolled {
  background: rgba(6,6,8,.78);
  border-color: var(--line);
  box-shadow: 0 14px 40px rgba(0,0,0,.24);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .11em;
}

.brand-mark {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: var(--acid);
  box-shadow: 0 0 20px rgba(76,141,255,.38);
  transform: rotate(22deg);
}

.nav { display: flex; align-items: center; gap: 2px; }

.nav > a {
  padding: 9px 12px;
  border-radius: 8px;
  color: #aaaab3;
  font-size: .79rem;
  font-weight: 760;
  transition: color .18s ease, background .18s ease;
}

.nav > a:hover { color: white; background: rgba(255,255,255,.055); }

.nav .nav-cta {
  margin-left: 8px;
  color: #09090b;
  background: var(--acid);
  font-weight: 900;
}

.nav .nav-cta:hover { color: #09090b; background: #74a9ff; }

.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 19px;
  height: 2px;
  margin: 5px auto;
  border-radius: 99px;
  background: white;
}

.section {
  width: min(calc(100% - 40px), var(--max));
  min-height: 100vh;
  margin: 0 auto;
  padding: 120px 0;
}

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 120px;
  padding-bottom: 84px;
}
.hero-copy {
  position: relative;
  z-index: 4;
  width: min(630px, 56vw);
}

.eyebrow {
  margin: 0 0 18px;
  color: #b9b9c1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 2px;
  margin: 0 10px 3px 0;
  background: var(--acid);
}

.hero-title, .section-heading h2, .contact-copy h2, .keep-copy h2 {
  margin: 0;
  font-weight: 950;
  letter-spacing: -.06em;
  line-height: .91;
  text-transform: uppercase;
}

.hero-title {
  max-width: 650px;
  font-size: clamp(3.8rem, 5.5vw, 6rem);
}

.hero-line { display: block; white-space: nowrap; }

.accent-text {
  color: transparent;
  background: linear-gradient(105deg, #fff 0%, #fff 12%, var(--acid) 44%, var(--cyan) 72%, #b9a5ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

.hero-sub {
  width: min(535px, 100%);
  margin: 23px 0 0;
  color: #a6a6b0;
  font-size: clamp(.95rem, 1.2vw, 1.08rem);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 27px;
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .025em;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.button:hover { transform: translateY(-2px); }

.button-primary {
  color: #09090b;
  border-color: var(--acid);
  background: var(--acid);
  box-shadow: 0 14px 34px rgba(76,141,255,.09);
}

.button-primary:hover { background: #e6ff79; }

.button-ghost { color: #f3f3f6; background: rgba(255,255,255,.025); }
.button-ghost:hover { border-color: var(--line-strong); background: rgba(255,255,255,.06); }



.hero-showcase {
  position:absolute;
  z-index:4;
  top:15%;
  right:-1%;
  width:min(48vw,650px);
  min-height:500px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  border-radius:22px;
  background:
    radial-gradient(circle at 28% 18%,rgba(76,141,255,.055),transparent 32%),
    radial-gradient(circle at 78% 72%,rgba(255,92,119,.06),transparent 36%),
    rgba(7,8,10,.62);
  box-shadow:
    0 38px 100px rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(255,255,255,.018);
  backdrop-filter:blur(12px);
}

.showcase-topbar {
  height:48px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  padding:0 16px;
  border-bottom:1px solid rgba(255,255,255,.075);
  background:rgba(255,255,255,.018);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

.showcase-status {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--acid);
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.11em;
}

.showcase-status i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--acid);
  box-shadow:0 0 14px rgba(76,141,255,.8);
}

.showcase-file {
  overflow:hidden;
  color:#6e6e79;
  font-size:.56rem;
  font-weight:750;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:center;
}

.showcase-timecode {
  color:#8b8b96;
  font-size:.56rem;
  font-weight:850;
}

.showcase-body {
  height:452px;
  display:grid;
  grid-template-columns:minmax(190px,.82fr) minmax(230px,1.18fr);
  gap:18px;
  padding:18px;
}

.showcase-phone {
  position:relative;
  overflow:hidden;
  height:100%;
  min-height:410px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:16px;
  background:
    radial-gradient(circle at 50% 32%,rgba(255,92,119,.18),transparent 34%),
    linear-gradient(165deg,#121a20,#0a0b10 56%,#14101b);
  box-shadow:0 20px 55px rgba(0,0,0,.30);
  isolation:isolate;
}

.showcase-phone::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(to bottom,rgba(0,0,0,.04),rgba(0,0,0,.10) 58%,rgba(0,0,0,.56)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px);
  pointer-events:none;
}

.hero-preview-video {
  position:absolute;
  inset:0;
  z-index:-1;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#0c0d10;
}

.phone-overlay-top {
  position:absolute;
  z-index:2;
  top:12px;
  left:12px;
  right:12px;
  display:flex;
  justify-content:space-between;
  color:rgba(255,255,255,.66);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.52rem;
  font-weight:900;
  letter-spacing:.10em;
}

.phone-caption {
  position:absolute;
  z-index:2;
  left:12px;
  right:12px;
  bottom:48px;
  color:#fff;
  text-align:center;
  text-shadow:0 4px 18px rgba(0,0,0,.8);
  font-size:clamp(1.2rem,2.2vw,2rem);
  font-weight:950;
  letter-spacing:-.045em;
  line-height:.88;
}

.phone-caption::first-line {
  color:var(--acid);
}

.phone-progress {
  position:absolute;
  z-index:2;
  left:13px;
  right:13px;
  bottom:18px;
  height:3px;
  overflow:hidden;
  border-radius:99px;
  background:rgba(255,255,255,.12);
}

.phone-progress span {
  display:block;
  width:42%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--acid),var(--cyan));
  animation:heroPreviewProgress 4.8s ease-in-out infinite;
}

@keyframes heroPreviewProgress {
  0% { width:8%; }
  50% { width:72%; }
  100% { width:8%; }
}

.showcase-editor {
  min-width:0;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(255,255,255,.075);
  border-radius:14px;
  background:rgba(5,6,8,.46);
  overflow:hidden;
}

.editor-head {
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:12px 13px;
  border-bottom:1px solid rgba(255,255,255,.065);
  color:#7d7d89;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.55rem;
  font-weight:900;
  letter-spacing:.11em;
}

.timeline {
  position:relative;
  display:grid;
  gap:10px;
  padding:19px 13px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.timeline-playhead {
  position:absolute;
  top:10px;
  bottom:9px;
  left:57%;
  width:1px;
  z-index:4;
  background:rgba(76,141,255,.72);
  box-shadow:0 0 12px rgba(76,141,255,.28);
  animation:timelinePlayhead 4.6s ease-in-out infinite;
}

.timeline-playhead::before {
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:7px;
  height:7px;
  border-radius:2px;
  background:var(--acid);
  transform:translate(-50%,-2px) rotate(45deg);
}

@keyframes timelinePlayhead {
  0%,100% { left:31%; }
  50% { left:82%; }
}

.timeline-row {
  display:grid;
  grid-template-columns:52px 1fr;
  align-items:center;
  gap:8px;
}

.timeline-label {
  color:#696975;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.49rem;
  font-weight:850;
  letter-spacing:.07em;
}

.timeline-track {
  position:relative;
  height:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.05);
  border-radius:5px;
  background:rgba(255,255,255,.025);
}

.segment {
  position:absolute;
  top:4px;
  bottom:4px;
  display:block;
  border-radius:3px;
}

.seg-a { left:4%; width:24%; background:rgba(255,255,255,.15); }
.seg-b { left:32%; width:19%; background:rgba(255,255,255,.10); }
.seg-c { left:56%; width:35%; background:rgba(255,255,255,.13); }
.seg-caption { left:12%; width:67%; background:rgba(76,141,255,.52); }
.seg-zoom { left:47%; width:22%; background:rgba(255,92,119,.54); }
.seg-sfx-a { left:23%; width:13%; background:rgba(151,113,255,.58); }
.seg-sfx-b { left:71%; width:16%; background:rgba(255,86,170,.50); }

.editor-tools {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  padding:13px;
}

.editor-tools span {
  min-width:0;
  padding:8px 7px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:6px;
  color:#8b8b95;
  background:rgba(255,255,255,.018);
  text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.47rem;
  font-weight:850;
  letter-spacing:.055em;
}

.editor-tools span:nth-child(1),
.editor-tools span:nth-child(2) {
  color:#cbe95b;
  border-color:rgba(76,141,255,.12);
}

.editor-export {
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px;
  border-top:1px solid rgba(255,255,255,.06);
}

.editor-export div {
  display:grid;
  gap:3px;
}

.editor-export small {
  color:#5f5f69;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.46rem;
  font-weight:900;
  letter-spacing:.10em;
}

.editor-export strong {
  color:#bdbdc6;
  font-size:.67rem;
  font-weight:850;
}

.export-ready {
  padding:6px 8px;
  border:1px solid rgba(76,141,255,.18);
  border-radius:999px;
  color:var(--acid);
  background:rgba(76,141,255,.055);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.49rem;
  font-weight:950;
  letter-spacing:.08em;
}

.hero-showcase:hover .showcase-phone {
  border-color:rgba(76,141,255,.19);
}

.hero-showcase:hover .showcase-editor {
  border-color:rgba(255,92,119,.12);
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 34px;
}

.hero-proof > span:not(.status-dot) {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #85858f;
  background: rgba(255,255,255,.02);
  font-size: .65rem;
  font-weight: 800;
}

.status-dot {
  width: 7px;
  height: 7px;
  margin-right: 2px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 14px rgba(76,141,255,.8);
}

.scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #696973;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .16em;
}

.scroll-cue i {
  position: relative;
  display: block;
  width: 52px;
  height: 1px;
  overflow: hidden;
  background: rgba(255,255,255,.15);
}

.scroll-cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--acid);
  transform: translateX(-100%);
  animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
  0% { transform: translateX(-100%); }
  50%,100% { transform: translateX(100%); }
}

.ticker {
  position: relative;
  z-index: 4;
  width: 100%;
  overflow: hidden;
  border-block: 1px solid rgba(76,141,255,.22);
  background: var(--acid);
  transform: rotate(-.45deg) scale(1.01);
}

.ticker-track { width: max-content; display: flex; animation: marquee 24s linear infinite; }

.ticker-track span {
  padding: 12px 0;
  white-space: nowrap;
  color: #09090b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .1em;
}

@keyframes marquee { to { transform: translateX(-50%); } }

.section-heading { width: min(720px, 100%); margin-bottom: 50px; }
.section-heading.wide { width: min(950px,100%); }

.section-heading h2, .contact-copy h2, .keep-copy h2 {
  font-size: clamp(2.8rem, 5vw, 5.6rem);
}

.section-heading > p:last-child, .contact-copy > p:last-child {
  width: min(560px,100%);
  margin: 22px 0 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.7;
}

.demo-section { min-height: 112vh; }

.transform-stage {
  position: relative;
  width: min(920px,100%);
  margin-left: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(rgba(255,255,255,.018), rgba(255,255,255,.008)),
    rgba(8,8,10,.48);
  box-shadow: 0 34px 90px rgba(0,0,0,.24);
}

.transform-stage::before {
  content: "PREVIEW / EDIT MODE";
  position: absolute;
  top: -27px;
  right: 4px;
  color: var(--muted-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .55rem;
  letter-spacing: .1em;
}

.demo-controls {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,.02);
}

.demo-tab, .filter {
  border: 0;
  border-radius: 6px;
  padding: 8px 11px;
  color: #777782;
  background: transparent;
  font-size: .68rem;
  font-weight: 850;
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}

.demo-tab.active, .filter.active { color: #08080a; background: var(--acid); }

.demo-frame { width: 100%; transition: width .5s cubic-bezier(.2,.75,.2,1), margin .5s cubic-bezier(.2,.75,.2,1); }
.demo-frame.edit-mode { width: min(395px,100%); margin-inline: auto; }

.fake-video {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  aspect-ratio: 16/9;
  background: #0b0b12;
  box-shadow: 0 28px 70px rgba(0,0,0,.34);
  transition: aspect-ratio .5s cubic-bezier(.2,.75,.2,1), border-radius .5s ease;
}

.edit-mode .fake-video { aspect-ratio: 9/16; border-radius: 16px; }

.game-scene {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 25%, rgba(255,92,119,.22), transparent 22%),
    linear-gradient(125deg, rgba(15,29,49,.95), rgba(15,14,34,.7)),
    #0b0f17;
}

.game-scene::before, .game-scene::after { content:""; position:absolute; background: rgba(255,255,255,.07); }
.game-scene::before { width:36%; height:65%; right:13%; bottom:0; clip-path:polygon(35% 0,100% 18%,83% 100%,0 100%,12% 22%); }
.game-scene::after { width:33%; height:42%; left:12%; bottom:0; clip-path:polygon(0 36%,38% 0,100% 12%,86% 100%,10% 100%); }

.crosshair { position:absolute; top:48%; left:55%; width:20px; height:20px; border:2px solid rgba(255,255,255,.78); border-radius:50%; transform:translate(-50%,-50%); }
.crosshair::before,.crosshair::after { content:""; position:absolute; background:rgba(255,255,255,.8); }
.crosshair::before { width:2px; height:32px; left:7px; top:-8px; }
.crosshair::after { width:32px; height:2px; left:-8px; top:7px; }

.hud { position:absolute; top:16px; z-index:3; padding:6px 8px; border:1px solid rgba(255,255,255,.1); border-radius:6px; background:rgba(0,0,0,.32); color:rgba(255,255,255,.72); font:800 .58rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.hud-left{left:16px}.hud-right{right:16px}

.facecam { position:absolute; z-index:4; right:4%; bottom:5%; width:24%; aspect-ratio:4/3; padding:3px; border-radius:10px; background:linear-gradient(135deg,var(--acid),var(--cyan),var(--violet)); transition:width .5s ease,right .5s ease; }
.edit-mode .facecam { width:48%; right:6%; }
.face-placeholder { height:100%; display:grid; place-items:center; border-radius:7px; background:#18131f; color:white; font-size:clamp(1.1rem,2.8vw,2.5rem); font-weight:950; }

.edit-caption,.meme-chip { position:absolute; z-index:5; opacity:0; transform:translateY(10px) scale(.96); transition:opacity .35s ease .12s,transform .35s ease .12s; }
.edit-caption { left:50%; bottom:22%; width:80%; transform:translate(-50%,10px) scale(.96); color:white; text-align:center; text-shadow:0 3px 10px #000; font-size:clamp(.95rem,2.5vw,2rem); font-weight:950; line-height:.95; }
.edit-mode .edit-caption { opacity:1; transform:translate(-50%,0) scale(1); }
.meme-chip { top:17%; left:8%; padding:7px 9px; border-radius:6px; color:#070709; background:var(--acid); font-size:.58rem; font-weight:950; transform:rotate(-6deg) translateY(8px); }
.edit-mode .meme-chip { opacity:1; transform:rotate(-6deg) translateY(0); }

.demo-meta { display:flex; justify-content:space-between; gap:20px; margin-top:12px; color:#666671; font:800 .58rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.09em; }

.filters { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px; }
.filter { border:1px solid var(--line); }

.clip-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; perspective:1000px; }
.clip-card { min-width:0; transition:opacity .3s ease, transform .22s ease; transform-style:preserve-3d; }
.clip-card.is-hidden { display:none; }

.clip-preview {
  position:relative;
  overflow:hidden;
  aspect-ratio:9/13.3;
  padding:15px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:14px;
  background:#111;
  isolation:isolate;
  box-shadow:0 24px 60px rgba(0,0,0,.18);
  transform:translateZ(0);
}

.clip-preview::before { content:""; position:absolute; inset:-20%; z-index:-2; transition:transform .38s ease, filter .38s ease; }
.clip-preview::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to bottom,rgba(7,7,9,.05),rgba(7,7,9,.88)),repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 42px); }
.clip-card:hover .clip-preview::before { transform:scale(1.07) rotate(1.5deg); filter:saturate(1.15); }

.preview-1::before{background:radial-gradient(circle at 65% 25%,#ff5c77,transparent 22%),linear-gradient(145deg,#0c1020,#222254 52%,#a78bfa)}
.preview-2::before{background:radial-gradient(circle at 30% 30%,#ff68d2,transparent 22%),linear-gradient(145deg,#121126,#4c1a64 50%,#7658ff)}
.preview-3::before{background:radial-gradient(circle at 50% 24%,#4c8dff,transparent 20%),linear-gradient(145deg,#091b1b,#153c46 45%,#654cff)}
.preview-4::before{background:radial-gradient(circle at 75% 20%,#ff4f9d,transparent 23%),linear-gradient(145deg,#1d0a18,#42152f 48%,#3b2a8f)}
.preview-5::before{background:radial-gradient(circle at 28% 27%,#7ef4ff,transparent 22%),linear-gradient(145deg,#071318,#0d4350 48%,#7355ff)}
.preview-6::before{background:radial-gradient(circle at 55% 20%,#4c8dff,transparent 20%),linear-gradient(145deg,#16110b,#4c2920 50%,#b23677)}

.preview-7::before { background: radial-gradient(circle at 68% 22%, #d7ff39, transparent 22%), linear-gradient(145deg,#0c140a,#234b26 50%,#5e4cff); }
.preview-8::before { background: radial-gradient(circle at 30% 24%, #52f4df, transparent 22%), linear-gradient(145deg,#071419,#123f4e 48%,#ff4ca8); }
.preview-9::before { background: radial-gradient(circle at 62% 20%, #ffca51, transparent 22%), linear-gradient(145deg,#171009,#4a2714 48%,#6d4cff); }
.preview-10::before { background: radial-gradient(circle at 32% 25%, #b8ff42, transparent 21%), linear-gradient(145deg,#0c150a,#244322 48%,#2ebee8); }
.preview-11::before { background: radial-gradient(circle at 70% 24%, #ff78ca, transparent 22%), linear-gradient(145deg,#150a18,#4a174f 48%,#4af1d8); }
.preview-12::before { background: radial-gradient(circle at 48% 20%, #7df5ff, transparent 22%), linear-gradient(145deg,#071318,#133b49 48%,#d6ff39); }
.clip-top { display:flex; justify-content:space-between; gap:12px; color:rgba(255,255,255,.74); font:900 .56rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.12em; }
.clip-preview strong { position:absolute; left:15px; bottom:56px; max-width:88%; font-size:clamp(1.7rem,3.1vw,3rem); font-weight:950; letter-spacing:-.055em; line-height:.88; }
.play-chip { position:absolute; right:13px; bottom:13px; padding:8px 9px; border:1px solid rgba(255,255,255,.18); border-radius:7px; color:#09090b; background:var(--acid); font-size:.58rem; font-weight:950; cursor:pointer; }

.clip-video {
  position:absolute;
  inset:0;
  z-index:-1;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#09090b;
  opacity:0;
  transform:scale(1.015);
  transition:opacity .22s ease, transform .32s ease;
}

.clip-card[data-local-video="true"] .clip-preview::before {
  z-index:-3;
}

.clip-card[data-local-video="true"] .clip-preview::after {
  z-index:0;
  background:
    linear-gradient(to bottom,rgba(5,6,8,.12),rgba(5,6,8,.03) 42%,rgba(5,6,8,.58) 100%);
  pointer-events:none;
}

.clip-card[data-local-video="true"] .clip-video,
.clip-card[data-local-video="true"] .clip-top,
.clip-card[data-local-video="true"] .clip-preview strong,
.clip-card[data-local-video="true"] .play-chip {
  position:absolute;
}

.clip-card[data-local-video="true"] .clip-video {
  z-index:-1;
}

.clip-card[data-local-video="true"] .clip-top,
.clip-card[data-local-video="true"] .clip-preview strong,
.clip-card[data-local-video="true"] .play-chip {
  z-index:2;
}

.clip-card[data-local-video="true"]:hover .clip-video,
.clip-card[data-local-video="true"].is-video-playing .clip-video {
  opacity:1;
  transform:scale(1);
}

.clip-card[data-local-video="true"]:hover .clip-preview::before,
.clip-card[data-local-video="true"].is-video-playing .clip-preview::before {
  opacity:0;
}

.clip-card[data-local-video="true"].is-video-playing .clip-preview strong {
  opacity:0;
  transform:translateY(8px);
}

.clip-card[data-local-video="true"] .clip-preview strong {
  transition:opacity .2s ease, transform .2s ease;
}

.clip-card[data-local-video="true"] .play-chip {
  box-shadow:0 8px 28px rgba(0,0,0,.22);
}

.clip-card[data-local-video="true"].manual-playing .play-chip {
  color:#fff;
  background:rgba(8,9,11,.76);
  border-color:rgba(255,255,255,.24);
  backdrop-filter:blur(10px);
}

.clip-info { display:flex; justify-content:space-between; gap:12px; padding:10px 2px 0; color:#73737e; font-size:.66rem; font-weight:760; }

.services-section { padding-bottom:160px; }
.service-stack { border-top:1px solid var(--line); }
.service-row { display:grid; grid-template-columns:48px minmax(300px,1fr) minmax(230px,.58fr); align-items:center; gap:22px; padding:24px 0; border-bottom:1px solid var(--line); transition:padding .2s ease,background .2s ease; }
.service-row:hover { padding-left:12px; padding-right:12px; background:linear-gradient(90deg,rgba(76,141,255,.035),transparent); }
.service-row > span { color:var(--acid); font:900 .62rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.service-row h3 { margin:0; font-size:clamp(1.7rem,3.1vw,3.2rem); line-height:1; letter-spacing:-.05em; }
.service-row p { margin:0; color:#858590; font-size:.9rem; line-height:1.6; }

.process-grid,.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.process-card,.price-card { position:relative; overflow:hidden; min-height:290px; padding:22px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); }
.process-card::before,.price-card::before { content:""; position:absolute; width:140px; height:140px; right:-64px; top:-64px; border:1px solid rgba(76,141,255,.13); border-radius:50%; }
.process-card { display:flex; flex-direction:column; justify-content:flex-end; }
.step { margin-bottom:auto; color:var(--acid); font:900 .62rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.12em; }
.process-card h3,.price-card h3 { margin:0 0 10px; font-size:clamp(1.55rem,2.6vw,2.7rem); line-height:.95; letter-spacing:-.05em; }
.process-card p,.price-copy { margin:0; color:#858590; font-size:.9rem; line-height:1.62; }

.price-card { display:flex; flex-direction:column; }
.price-card.featured { border-color:rgba(76,141,255,.38); background:linear-gradient(145deg,rgba(76,141,255,.06),rgba(255,255,255,.018)); transform:translateY(-8px); }
.popular { position:absolute; top:13px; right:13px; padding:6px 8px; border-radius:6px; color:#09090b; background:var(--acid); font:950 .54rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.08em; }
.price-kicker { margin:0 0 34px; color:#666672; font:900 .6rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.14em; }
.price-card ul { display:grid; gap:9px; margin:24px 0 28px; padding:0; list-style:none; color:#aaaab4; font-size:.82rem; }
.price-card li::before { content:"+"; margin-right:9px; color:var(--acid); font-weight:950; }
.price-card .button { margin-top:auto; }

.personality-section { min-height:108vh; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:70px; }
.awkward-lines { display:grid; gap:10px; }
.awkward-lines span { width:max-content; max-width:100%; position:relative; display:inline-block; color:#5e5e68; font-size:clamp(1.35rem,2.45vw,2.55rem); font-weight:850; letter-spacing:-.04em; }
.awkward-lines span::after { content:""; position:absolute; top:54%; left:0; width:100%; height:2px; background:#ff5470; transform:scaleX(0); transform-origin:left; }
.js-ready .awkward-lines span::after { animation:strike 1s ease forwards; animation-play-state:paused; }
.personality-section.in-view .awkward-lines span::after { animation-play-state:running; }
.awkward-lines span:nth-child(2)::after{animation-delay:.12s}.awkward-lines span:nth-child(3)::after{animation-delay:.24s}.awkward-lines span:nth-child(4)::after{animation-delay:.36s}
@keyframes strike{to{transform:scaleX(1)}}

.contact-section { min-height:118vh; display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(38px,6vw,90px); align-items:start; padding-top:150px; }
.contact-copy { position:sticky; top:145px; }
.lead-form { padding:clamp(20px,3.2vw,32px); border:1px solid var(--line); border-radius:16px; background:rgba(10,10,13,.78); box-shadow:0 32px 90px rgba(0,0,0,.23); backdrop-filter:blur(14px); }
.lead-form::before { content:"FORM / 001"; display:block; margin-bottom:24px; color:var(--acid); font:900 .56rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.12em; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
label { display:grid; gap:7px; }
label > span,legend { color:#9b9ba5; font-size:.7rem; font-weight:780; }
label.full { grid-column:1/-1; }
input,select,textarea { width:100%; outline:none; border:1px solid var(--line); border-radius:8px; padding:12px 13px; color:white; background:rgba(255,255,255,.025); transition:border-color .18s ease,background .18s ease,box-shadow .18s ease; }
input:focus,select:focus,textarea:focus { border-color:rgba(76,141,255,.56); background:rgba(255,255,255,.045); box-shadow:0 0 0 3px rgba(76,141,255,.07); }
input::placeholder,textarea::placeholder { color:#565660; }
select option { color:white; background:#111117; }
fieldset { margin:22px 0; padding:0; border:0; }
legend { margin-bottom:9px; }
.choice-row { display:flex; flex-wrap:wrap; gap:7px; }
.choice { display:block; }
.choice input { position:absolute; opacity:0; pointer-events:none; }
.choice span { display:inline-flex; padding:9px 11px; border:1px solid var(--line); border-radius:7px; color:#8d8d98; background:rgba(255,255,255,.018); cursor:pointer; transition:.18s ease; }
.choice input:checked + span { color:#09090b; border-color:var(--acid); background:var(--acid); }
.lead-form > label { margin-top:15px; }
.submit-button { width:100%; margin-top:22px; border:0; }
.form-status { min-height:22px; margin:11px 0 0; color:#8e8e99; font-size:.73rem; }

.footer { width:min(calc(100% - 40px),var(--max)); margin:0 auto; min-height:110px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid var(--line); color:#666670; font-size:.7rem; }
.footer p { margin:0; text-align:center; }
.reveal { will-change:transform,opacity; }

@media (max-width: 980px) {
  .hero-showcase {
    right:-3%;
    width:min(46vw,520px);
    min-height:455px;
  }

  .showcase-body {
    height:407px;
    grid-template-columns:minmax(150px,.78fr) minmax(195px,1.22fr);
    gap:12px;
    padding:12px;
  }

  .showcase-phone {
    min-height:380px;
  }


  .hero-copy { width:min(610px,62vw); }
.clip-grid,.pricing-grid { grid-template-columns:repeat(2,1fr); }
  .price-card.featured { transform:none; }
  .pricing-grid .price-card:last-child { grid-column:1/-1; }
  .service-row { grid-template-columns:38px 1fr; }
  .service-row p { grid-column:2; }
  .process-grid { grid-template-columns:1fr; }
  .process-card { min-height:215px; }
  .personality-section,.contact-section { grid-template-columns:1fr; }
  .contact-copy { position:static; }
}

@media (max-width: 720px) {
  .hero-showcase {
    display:none;
  }
.site-header { top:9px; width:calc(100% - 18px); }
  .menu-toggle { display:block; }
  .nav { position:absolute; top:calc(100% + 7px); left:0; right:0; display:grid; gap:3px; padding:9px; border:1px solid var(--line); border-radius:12px; background:rgba(7,7,9,.97); opacity:0; transform:translateY(-7px); pointer-events:none; transition:opacity .18s ease,transform .18s ease; }
  .site-header.menu-open .nav { opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav > a { padding:11px 12px; }
  .nav .nav-cta { margin-left:0; }
  .section { width:min(calc(100% - 26px),var(--max)); padding:88px 0; }
  .hero { min-height:100svh; padding-top:106px; align-items:flex-start; }
  .hero-copy { width:100%; }
  .hero-title { max-width:100%; font-size:clamp(3.05rem,14vw,4.7rem); }
  .hero-line { white-space:normal; }
  .hero-sub { width:min(92%,500px); font-size:.94rem; }
.hero::after { top:auto; right:4px; bottom:calc(7% + 14px); }
.hero-actions .button { flex:1 1 100%; }
  .scroll-cue { display:none; }
  .ticker { transform:none; }
  .demo-section { min-height:auto; }
  .demo-meta { font-size:.5rem; }
  .clip-grid,.pricing-grid { grid-template-columns:1fr; }
  .pricing-grid .price-card:last-child { grid-column:auto; }
  .clip-preview strong { font-size:clamp(2.35rem,12vw,4rem); }
  .service-row { grid-template-columns:28px 1fr; gap:12px; }
  .service-row h3 { font-size:clamp(1.65rem,8vw,2.7rem); }
  .personality-section { min-height:auto; gap:80px; }
  .form-grid { grid-template-columns:1fr; }
  label.full { grid-column:auto; }
  .lead-form { padding:18px; }
  .footer { width:calc(100% - 26px); min-height:170px; flex-direction:column; justify-content:center; text-align:center; }
}

@media (max-width: 480px) {
  .section-heading h2,.contact-copy h2,.keep-copy h2 { font-size:clamp(2.45rem,12.6vw,4rem); }
  .demo-controls { width:auto; }
  .demo-tab { flex:0 0 auto; }
  .choice-row { display:grid; grid-template-columns:repeat(2,1fr); }
  .choice span { justify-content:center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }
}

/* Streamer ritual hero sample */
.hero-stream-ritual{position:absolute;z-index:4;top:14%;right:-1%;width:min(49vw,680px);min-height:520px;overflow:hidden;border:1px solid rgba(255,255,255,.11);border-radius:24px;background:radial-gradient(circle at 72% 18%,rgba(76,141,255,.055),transparent 28%),radial-gradient(circle at 28% 78%,rgba(255,92,119,.05),transparent 34%),rgba(7,8,10,.68);box-shadow:0 40px 110px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.018);backdrop-filter:blur(13px);transition:transform .16s ease-out;transform-style:preserve-3d}
.ritual-topbar{min-height:48px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.075);background:rgba(255,255,255,.018);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.ritual-brand{display:inline-flex;align-items:center;gap:8px;color:#a2a2ad;font-size:.55rem;font-weight:900;letter-spacing:.12em}.ritual-dot{width:7px;height:7px;border-radius:50%;background:var(--acid);box-shadow:0 0 14px rgba(76,141,255,.72)}
.ritual-mode{color:#62626d;text-align:center;font-size:.52rem;font-weight:850;letter-spacing:.10em}.ritual-clock{color:#8a8a95;font-size:.54rem;font-weight:900}
.ritual-stage{display:grid;grid-template-columns:minmax(205px,.82fr) minmax(250px,1.18fr);gap:16px;min-height:472px;padding:18px}
.ritual-left{display:flex;flex-direction:column;min-width:0}.ritual-title-block{padding:4px 2px 14px}.ritual-kicker{display:block;margin-bottom:9px;color:#6e6e79;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.50rem;font-weight:900;letter-spacing:.11em}
.ritual-title-block h3{margin:0;color:#f6f6f8;font-size:clamp(1.25rem,2vw,1.8rem);font-weight:950;letter-spacing:-.05em;line-height:.94}.ritual-title-block p{margin:10px 0 0;color:#777782;font-size:.72rem;line-height:1.5}
.gear-checks{display:grid;gap:7px;margin-top:auto}.gear-row{min-height:60px;display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;padding:9px 10px;border:1px solid rgba(255,255,255,.065);border-radius:11px;background:rgba(255,255,255,.018);transition:.28s ease}
.gear-row.is-ready{border-color:rgba(76,141,255,.16);background:rgba(76,141,255,.035)}.gear-row.is-ready .gear-state{color:var(--acid)}.gear-row.is-ready .gear-icon{color:#08090a;border-color:var(--acid);background:var(--acid)}
.gear-icon{min-width:36px;height:30px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.08);border-radius:7px;color:#8b8b96;background:rgba(255,255,255,.025);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.48rem;font-weight:950;letter-spacing:.07em;transition:.28s ease}
.gear-main{min-width:0;display:grid;gap:3px}.gear-main strong{color:#b9b9c1;font-size:.68rem;font-weight:850}.gear-main small{color:#595964;font-size:.55rem}.gear-state{color:#5e5e68;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.47rem;font-weight:900;letter-spacing:.06em;transition:.28s ease}
.mini-wave{height:14px;display:flex;align-items:center;gap:2px}.mini-wave i{width:2px;height:4px;display:block;border-radius:99px;background:#61616c;animation:ritualWave .8s ease-in-out infinite alternate}.mini-wave i:nth-child(2){animation-delay:.08s}.mini-wave i:nth-child(3){animation-delay:.16s}.mini-wave i:nth-child(4){animation-delay:.24s}.mini-wave i:nth-child(5){animation-delay:.32s}.mini-wave i:nth-child(6){animation-delay:.40s}
@keyframes ritualWave{to{height:13px;background:var(--cyan)}}
.ritual-right{min-width:0;display:flex;flex-direction:column;gap:10px}.stream-screen{position:relative;flex:1;min-height:390px;overflow:hidden;border:1px solid rgba(255,255,255,.085);border-radius:16px;background:radial-gradient(circle at 50% 36%,rgba(255,92,119,.12),transparent 28%),linear-gradient(150deg,#0d1318,#0a0b10 58%,#120e16);box-shadow:0 24px 60px rgba(0,0,0,.28);isolation:isolate}
.screen-grid{position:absolute;inset:0;z-index:0;opacity:.35;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:42px 42px}
.ritual-screen{position:absolute;inset:0;z-index:2;opacity:0;transform:scale(.985);pointer-events:none;transition:opacity .42s ease,transform .42s ease}.ritual-screen.active{opacity:1;transform:scale(1)}.ritual-screen[data-screen="check"]{display:grid;place-items:center}
.setup-core{position:relative;z-index:3;width:116px;height:116px;display:grid;place-items:center;align-content:center;gap:2px;border:1px solid rgba(76,141,255,.18);border-radius:50%;background:radial-gradient(circle,rgba(76,141,255,.08),rgba(7,8,10,.7) 64%);box-shadow:0 0 50px rgba(76,141,255,.06)}.setup-core span{color:#6e6e79;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.48rem;font-weight:900;letter-spacing:.11em}.setup-core strong{color:#eef1e7;font-size:1.05rem;font-weight:950;letter-spacing:-.04em}
.setup-orbit{position:absolute;top:50%;left:50%;border:1px solid rgba(255,92,119,.14);border-radius:50%;transform:translate(-50%,-50%)}.orbit-one{width:190px;height:110px;animation:ritualOrbitA 5s linear infinite}.orbit-two{width:150px;height:220px;border-color:rgba(142,102,255,.14);animation:ritualOrbitB 7s linear infinite reverse}
@keyframes ritualOrbitA{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes ritualOrbitB{from{transform:translate(-50%,-50%) rotate(18deg)}to{transform:translate(-50%,-50%) rotate(378deg)}}
.screen-starting{display:grid;place-items:center;align-content:center;gap:8px;text-align:center}.starting-label{color:#8e8e99;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.58rem;font-weight:900;letter-spacing:.18em}.countdown-number{color:var(--acid);font-size:clamp(5rem,8vw,8rem);font-weight:950;letter-spacing:-.08em;line-height:.85;text-shadow:0 0 34px rgba(76,141,255,.16)}.starting-small{color:#5f5f69;font-size:.58rem}
.screen-live,.screen-clip{overflow:hidden}.ritual-live-video,.ritual-result-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0b0d10}.screen-live::after,.screen-clip::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.08),rgba(0,0,0,.04) 52%,rgba(0,0,0,.65)),repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px);pointer-events:none}
.live-topline{position:absolute;z-index:3;top:12px;left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#dddde3;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.52rem;font-weight:900}.live-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:7px;color:#fff;background:#ff3b6a}.live-badge i{width:6px;height:6px;border-radius:50%;background:#fff;animation:ritualLiveBlink 1s ease-in-out infinite}@keyframes ritualLiveBlink{50%{opacity:.35}}
.chat-stack{position:absolute;z-index:3;right:12px;bottom:14px;display:grid;justify-items:end;gap:7px}.chat-stack span{width:max-content;max-width:160px;padding:7px 9px;border:1px solid rgba(255,255,255,.09);border-radius:8px;color:#d8d8df;background:rgba(6,7,9,.70);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.49rem;font-weight:800;backdrop-filter:blur(8px)}
.clip-result-card{position:absolute;inset:18px 44px;overflow:hidden;border:1px solid rgba(76,141,255,.14);border-radius:14px;background:#0d0f12;box-shadow:0 18px 48px rgba(0,0,0,.28)}.clip-result-overlay{position:absolute;z-index:3;left:14px;right:14px;bottom:18px}.clip-result-overlay span{display:block;margin-bottom:7px;color:var(--acid);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.48rem;font-weight:950;letter-spacing:.10em}.clip-result-overlay strong{color:#fff;font-size:clamp(1.2rem,2vw,1.85rem);font-weight:950;letter-spacing:-.045em;line-height:.90;text-shadow:0 3px 14px rgba(0,0,0,.65)}
.ritual-footer{display:grid;gap:7px}.ritual-footer>span{color:#656570;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.48rem;font-weight:800;letter-spacing:.07em}.ritual-progress{height:3px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.06)}.ritual-progress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--acid),var(--cyan));transition:width .45s ease}
@media (max-width:980px){.hero-stream-ritual{right:-3%;width:min(47vw,540px);min-height:480px}.ritual-stage{min-height:430px;grid-template-columns:minmax(165px,.76fr) minmax(210px,1.24fr);gap:12px;padding:12px}.gear-row{grid-template-columns:34px 1fr}.gear-state{display:none}}
@media (max-width:720px){.hero-stream-ritual{display:none}}


/* V10 — fluid resolution scaling */
html {
  font-size: clamp(14px, calc(11.6px + .32vw), 18px);
}

.section {
  width: min(calc(100% - clamp(26px, 4vw, 52px)), var(--max));
  padding-top: clamp(78px, 10vh, 120px);
  padding-bottom: clamp(78px, 10vh, 120px);
}

.hero {
  min-height: 100svh;
  padding-top: clamp(96px, 13vh, 132px);
  padding-bottom: clamp(58px, 8vh, 88px);
}

.hero-copy {
  width: min(47vw, 610px);
}

.hero-title {
  max-width: none;
  font-size: clamp(3.15rem, min(5.15vw, 8.4vh), 5.85rem);
}

.hero-sub {
  font-size: clamp(.92rem, .66rem + .34vw, 1.06rem);
}

.section-heading h2,
.contact-copy h2,
.keep-copy h2 {
  font-size: clamp(2.55rem, min(4.7vw, 7.5vh), 5.25rem);
}

.hero-stream-ritual {
  top: clamp(88px, 12vh, 128px);
  right: 0;
  width: clamp(430px, 46vw, 680px);
  height: clamp(430px, 68vh, 540px);
  min-height: 0;
}

.ritual-stage {
  height: calc(100% - 48px);
  min-height: 0;
  grid-template-columns: minmax(185px,.8fr) minmax(225px,1.2fr);
  gap: clamp(10px, 1.2vw, 16px);
  padding: clamp(12px, 1.3vw, 18px);
}

.stream-screen {
  min-height: 0;
}

.ritual-title-block h3 {
  font-size: clamp(1.15rem, 1.45vw, 1.75rem);
}

.ritual-title-block p {
  font-size: clamp(.63rem, .62vw, .72rem);
}

.gear-row {
  min-height: clamp(50px, 7vh, 60px);
}

.clip-grid {
  gap: clamp(12px, 1.25vw, 18px);
}

.clip-preview strong {
  font-size: clamp(1.65rem, 2.8vw, 3rem);
}

/* Common 1366x768 / small laptop range */
@media (max-width: 1180px) and (min-width: 881px) {
  .hero-copy {
    width: 50vw;
  }

  .hero-title {
    font-size: clamp(3rem, min(5vw, 7.7vh), 4.8rem);
  }

  .hero-stream-ritual {
    width: 43vw;
    height: clamp(410px, 66vh, 500px);
  }

  .ritual-stage {
    grid-template-columns: minmax(145px,.72fr) minmax(190px,1.28fr);
  }

  .gear-row {
    grid-template-columns: 34px 1fr;
  }

  .gear-state {
    display: none;
  }

  .clip-grid,
  .pricing-grid {
    grid-template-columns: repeat(2,1fr);
  }
}

/* Narrow desktop / tablet: keep first screen readable instead of overlapping */
@media (max-width: 880px) {
  .hero-stream-ritual {
    display: none;
  }

  .hero-copy {
    width: min(720px, 100%);
  }

  .hero-title {
    font-size: clamp(3rem, min(9vw, 8.5vh), 5.2rem);
  }
}

@media (max-width: 720px) {
  html {
    font-size: clamp(14px, 3.7vw, 16px);
  }

  .hero-title {
    font-size: clamp(2.85rem, 13vw, 4.55rem);
  }

  .section-heading h2,
  .contact-copy h2,
  .keep-copy h2 {
    font-size: clamp(2.35rem, 11vw, 3.9rem);
  }

  .section {
    padding-top: clamp(70px, 9vh, 90px);
    padding-bottom: clamp(70px, 9vh, 90px);
  }
}

@media (min-width: 1800px) {
  :root {
    --max: 1440px;
  }

  .hero-copy {
    width: min(650px, 43vw);
  }

  .hero-stream-ritual {
    width: min(660px, 42vw);
  }
}

/* Low-end machines automatically get cheaper compositing too. */
html[data-performance="lite"] .noise {
  opacity: .014;
}

html[data-performance="lite"] .site-header.scrolled,
html[data-performance="lite"] .hero-stream-ritual,
html[data-performance="lite"] .lead-form {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


/* ================================================================
   V11 PORTFOLIO MODE — work-first presentation
   ================================================================ */

.portfolio-hero .hero-sub {
  max-width: 560px;
}

.portfolio-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .55fr);
  align-items: end;
  gap: clamp(28px, 5vw, 84px);
  margin-bottom: clamp(42px, 7vw, 84px);
}

.portfolio-heading h2,
.reel-end h2 {
  margin: 0;
  font-size: clamp(3rem, 6vw, 6.7rem);
  font-weight: 950;
  letter-spacing: -.065em;
  line-height: .88;
  text-transform: uppercase;
}

.portfolio-intro {
  max-width: 440px;
  margin: 0 0 8px auto;
  color: #8f8f9a;
  font-size: clamp(.88rem, 1.05vw, 1.02rem);
  line-height: 1.72;
}

.featured-section {
  padding-top: clamp(110px, 14vh, 170px);
}

.featured-projects {
  display: grid;
  gap: clamp(30px, 5vw, 72px);
}

.feature-project {
  position: relative;
  display: grid;
  grid-template-columns: minmax(310px, .9fr) minmax(300px, 1.1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 92px);
  min-height: clamp(560px, 75vh, 760px);
  padding: clamp(28px, 4vw, 56px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 26px;
  background:
    radial-gradient(circle at 16% 18%, rgba(76,141,255,.055), transparent 28%),
    radial-gradient(circle at 84% 78%, rgba(255,92,119,.045), transparent 32%),
    rgba(8,8,11,.68);
  box-shadow: 0 36px 100px rgba(0,0,0,.22);
  transform: none !important;
}

.feature-project::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(90deg, #000, transparent 80%);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 80%);
}

.feature-project.feature-reverse {
  grid-template-columns: minmax(300px, 1.1fr) minmax(310px, .9fr);
}

.feature-project.feature-reverse .feature-media { order: 2; }
.feature-project.feature-reverse .feature-copy { order: 1; }

.feature-number {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 3;
  color: rgba(255,255,255,.12);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(3rem, 8vw, 8rem);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.07em;
}

.feature-media.clip-preview {
  width: min(100%, 390px);
  aspect-ratio: 9 / 16;
  justify-self: center;
  border-radius: 20px;
  box-shadow:
    0 28px 80px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.06);
}

.feature-media.clip-preview::after {
  z-index: 1;
}

.feature-media .clip-video {
  z-index: 0;
}

.feature-media .clip-top,
.feature-media strong,
.feature-media .play-chip {
  z-index: 3;
}

.feature-media strong {
  font-size: clamp(2rem, 4vw, 3.7rem) !important;
  bottom: 70px;
}

.feature-copy {
  position: relative;
  z-index: 2;
  max-width: 560px;
}

.feature-label {
  margin: 0 0 15px;
  color: var(--acid);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.feature-copy h3 {
  margin: 0;
  font-size: clamp(2.6rem, 5.2vw, 5.8rem);
  font-weight: 950;
  letter-spacing: -.065em;
  line-height: .87;
  text-transform: uppercase;
}

.feature-copy > p:not(.feature-label) {
  max-width: 500px;
  margin: 24px 0 0;
  color: #8f8f9a;
  font-size: clamp(.88rem, 1.1vw, 1.03rem);
  line-height: 1.72;
}

.feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 24px;
}

.feature-tags span,
.archive-chip,
.reel-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 7px;
  color: #92929d;
  background: rgba(255,255,255,.025);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .55rem;
  font-weight: 850;
  letter-spacing: .08em;
}

.archive-section {
  padding-top: clamp(110px, 14vh, 170px);
}

.archive-heading {
  margin-bottom: 30px;
}

.portfolio-archive {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.5vw, 20px);
}

.portfolio-archive .clip-preview {
  aspect-ratio: 4 / 5;
}

.archive-chip {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  color: var(--acid);
  border-color: rgba(76,141,255,.13);
  background: rgba(5,5,7,.72);
}

.reel-end {
  min-height: 78vh;
  display: grid;
  place-items: center;
  text-align: center;
}

.reel-end-inner {
  width: min(100%, 1060px);
}

.reel-end .eyebrow::before {
  display: none;
}

.reel-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
}

.reel-note {
  margin: 22px 0 0;
  color: #686873;
  font-size: .78rem;
}

.portfolio-footer {
  border-top: 1px solid rgba(255,255,255,.07);
}

/* Portfolio mode intentionally has no sales, pricing, process or inquiry UI. */

@media (max-width: 980px) {
  .portfolio-heading {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .portfolio-intro {
    margin-left: 0;
  }

  .feature-project,
  .feature-project.feature-reverse {
    grid-template-columns: minmax(260px, .86fr) minmax(280px, 1.14fr);
    min-height: 560px;
    gap: 34px;
  }

  .feature-project.feature-reverse .feature-media { order: 2; }
  .feature-project.feature-reverse .feature-copy { order: 1; }

  .feature-copy h3 {
    font-size: clamp(2.35rem, 5.4vw, 4rem);
  }
}

@media (max-width: 760px) {
  .feature-project,
  .feature-project.feature-reverse {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 22px;
    gap: 28px;
  }

  .feature-project.feature-reverse .feature-media,
  .feature-project.feature-reverse .feature-copy {
    order: initial;
  }

  .feature-media.clip-preview {
    width: min(100%, 340px);
  }

  .feature-copy {
    max-width: 100%;
  }

  .portfolio-archive {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .portfolio-heading h2,
  .reel-end h2 {
    font-size: clamp(2.6rem, 13vw, 4rem);
  }

  .feature-project {
    border-radius: 18px;
    padding: 16px;
  }

  .feature-number {
    font-size: 3.2rem;
  }

  .portfolio-archive {
    grid-template-columns: 1fr;
  }

  .portfolio-archive .clip-preview {
    aspect-ratio: 4 / 5;
  }
}


/* ================================================================
   V12 THEME B — COBALT / CORAL PORTFOLIO
   A genuinely separate visual direction from the acid-lime theme.
   ================================================================ */
:root {
  --bg: #050816;
  --bg-2: #080d1d;
  --panel: rgba(10, 17, 38, .78);
  --panel-strong: rgba(11, 20, 43, .94);
  --text: #f7f8ff;
  --muted: #9198ad;
  --muted-2: #626b82;
  --line: rgba(164, 181, 225, .13);
  --line-strong: rgba(179, 194, 236, .24);
  --acid: #4c8dff;
  --cyan: #ff5c77;
  --violet: #a78bfa;
  --pink: #ff78b7;
}

html { background: #050816; }

body {
  background:
    radial-gradient(circle at 82% 12%, rgba(76,141,255,.15), transparent 31rem),
    radial-gradient(circle at 17% 58%, rgba(167,139,250,.08), transparent 35rem),
    radial-gradient(circle at 72% 88%, rgba(255,92,119,.07), transparent 29rem),
    #050816;
}

body::before {
  opacity: .15;
  background-image:
    linear-gradient(rgba(137,166,235,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(137,166,235,.04) 1px, transparent 1px);
  background-size: 62px 62px;
}

body::after {
  background: linear-gradient(118deg, transparent 0 56%, rgba(76,141,255,.026) 56% 56.25%, transparent 56.25%);
}

::selection { color:#fff; background:#4c8dff; }

.site-header.scrolled {
  background: rgba(5,8,22,.82);
  border-color: rgba(130,154,218,.15);
  box-shadow: 0 18px 46px rgba(0,0,0,.28), 0 0 32px rgba(76,141,255,.04);
}

.brand-mark {
  border-radius: 50% 50% 50% 10%;
  background: linear-gradient(135deg,#4c8dff,#a78bfa 58%,#ff5c77);
  box-shadow: 0 0 24px rgba(76,141,255,.42);
}

.eyebrow::before {
  background: linear-gradient(90deg,#4c8dff,#ff5c77);
}

.accent-text {
  background: linear-gradient(102deg,#fff 0%,#dfe9ff 14%,#4c8dff 42%,#a78bfa 70%,#ff6d82 100%);
  background-clip:text;
  -webkit-background-clip:text;
}

.button-primary {
  color:#fff;
  border-color:rgba(110,157,255,.44);
  background: linear-gradient(115deg,#397cf2,#6f75ff 58%,#9b72f5);
  box-shadow: 0 15px 38px rgba(55,109,234,.21);
}

.button-primary:hover {
  background: linear-gradient(115deg,#4c8dff,#7f7aff 58%,#ae7cff);
  box-shadow: 0 17px 46px rgba(76,141,255,.28);
}

.status-dot,
.slider-live-dot {
  background:#ff5c77;
  box-shadow:0 0 18px rgba(255,92,119,.6);
}

.hero-proof > span:not(.status-dot) {
  border-color:rgba(133,157,217,.14);
  background:rgba(12,20,42,.42);
}

.feature-project {
  border-color:rgba(120,149,222,.12);
  background:
    radial-gradient(circle at 14% 18%, rgba(76,141,255,.09), transparent 29%),
    radial-gradient(circle at 84% 76%, rgba(255,92,119,.055), transparent 30%),
    rgba(7,12,29,.70);
  box-shadow:0 38px 110px rgba(0,0,0,.27), 0 0 60px rgba(76,141,255,.025);
}

.feature-label,
.archive-chip { color:#76a6ff; }

.filters .filter.active {
  color:#fff;
  border-color:rgba(76,141,255,.48);
  background:rgba(76,141,255,.13);
  box-shadow: inset 0 0 22px rgba(76,141,255,.06);
}

/* Hero clip carousel */
.hero-clip-slider {
  position:absolute;
  z-index:4;
  top:clamp(90px,11.5vh,124px);
  right:-10px;
  width:clamp(510px,48vw,700px);
  height:clamp(500px,72vh,620px);
}

.slider-shell {
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border:1px solid rgba(130,156,221,.16);
  border-radius:28px;
  background:
    radial-gradient(circle at 50% 12%,rgba(76,141,255,.11),transparent 33%),
    radial-gradient(circle at 82% 75%,rgba(255,92,119,.065),transparent 32%),
    linear-gradient(155deg,rgba(11,18,40,.94),rgba(5,8,22,.84));
  box-shadow:0 38px 110px rgba(0,0,0,.34),0 0 70px rgba(76,141,255,.04),inset 0 0 0 1px rgba(255,255,255,.018);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
}

.slider-shell::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.36;
  background-image:
    linear-gradient(rgba(130,160,230,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(130,160,230,.025) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(to bottom,#000,transparent 90%);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 90%);
}

.slider-head,
.slider-foot {
  position:absolute;
  left:20px;
  right:20px;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.slider-head { top:17px; }
.slider-foot { bottom:17px; }

.slider-head-left {
  display:flex;
  align-items:center;
  gap:9px;
  color:#9ca8c6;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.54rem;
  font-weight:900;
  letter-spacing:.15em;
}

.slider-live-dot {
  width:7px;
  height:7px;
  border-radius:50%;
}

.slider-counter {
  color:#71809f;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.55rem;
  font-weight:900;
  letter-spacing:.08em;
}

.slider-stage {
  position:absolute;
  inset:53px 14px 56px;
  perspective:1100px;
  overflow:hidden;
}

.hero-slide {
  position:absolute;
  top:50%;
  left:50%;
  width:clamp(230px,19vw,286px);
  aspect-ratio:9 / 16;
  overflow:hidden;
  border:1px solid rgba(173,191,236,.14);
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 24%,rgba(76,141,255,.16),transparent 36%),
    linear-gradient(160deg,#101936,#070b19 67%,#130d20);
  box-shadow:0 26px 75px rgba(0,0,0,.43);
  transform-origin:center;
  cursor:pointer;
  transition:transform .62s cubic-bezier(.2,.8,.2,1),opacity .5s ease,filter .5s ease,border-color .5s ease;
  will-change:transform,opacity;
}

.hero-slide.is-active {
  z-index:5;
  opacity:1;
  filter:none;
  border-color:rgba(107,153,255,.34);
  transform:translate(-50%,-50%) translateX(0) scale(1) rotateY(0deg);
  box-shadow:0 34px 90px rgba(0,0,0,.52),0 0 52px rgba(76,141,255,.10);
}

.hero-slide.is-prev {
  z-index:3;
  opacity:.48;
  filter:saturate(.62) brightness(.62);
  transform:translate(-50%,-50%) translateX(-72%) scale(.79) rotateY(8deg);
}

.hero-slide.is-next {
  z-index:3;
  opacity:.48;
  filter:saturate(.62) brightness(.62);
  transform:translate(-50%,-50%) translateX(72%) scale(.79) rotateY(-8deg);
}

.hero-slide.is-hidden {
  z-index:1;
  opacity:0;
  transform:translate(-50%,-50%) scale(.68);
}

.hero-slider-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#070b18;
}

.hero-slide-tint {
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(4,8,21,.06),rgba(4,8,21,.03) 43%,rgba(4,8,21,.82)),
    linear-gradient(115deg,rgba(76,141,255,.08),transparent 45%,rgba(255,92,119,.055));
}

.hero-slide-top {
  position:absolute;
  z-index:4;
  top:14px;
  left:14px;
  right:14px;
  display:flex;
  justify-content:space-between;
  color:rgba(236,241,255,.86);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.50rem;
  font-weight:900;
  letter-spacing:.12em;
}

.hero-slide-copy {
  position:absolute;
  z-index:4;
  left:16px;
  right:16px;
  bottom:48px;
}

.hero-slide-copy small {
  display:block;
  margin-bottom:8px;
  color:#86adff;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.48rem;
  font-weight:900;
  letter-spacing:.11em;
}

.hero-slide-copy strong {
  display:block;
  color:#fff;
  font-size:clamp(1.7rem,2.45vw,2.65rem);
  font-weight:950;
  letter-spacing:-.06em;
  line-height:.87;
  text-transform:uppercase;
  text-shadow:0 5px 22px rgba(0,0,0,.52);
}

.hero-slide-sound {
  position:absolute;
  z-index:7;
  left:16px;
  bottom:15px;
  padding:0;
  border:0;
  color:#c8d3ee;
  background:transparent;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.48rem;
  font-weight:900;
  letter-spacing:.1em;
  cursor:pointer;
  opacity:0;
  transform:translateY(4px);
  transition:.25s ease;
}

.hero-slide.is-active .hero-slide-sound {
  opacity:.82;
  transform:none;
}

.slider-dots {
  display:flex;
  align-items:center;
  gap:7px;
}

.slider-dot {
  width:22px;
  height:4px;
  padding:0;
  border:0;
  border-radius:99px;
  background:rgba(140,157,201,.20);
  cursor:pointer;
  transition:width .25s ease,background .25s ease,box-shadow .25s ease;
}

.slider-dot.is-active {
  width:42px;
  background:linear-gradient(90deg,#4c8dff,#a78bfa,#ff5c77);
  box-shadow:0 0 18px rgba(76,141,255,.25);
}

.slider-arrows {
  display:flex;
  gap:7px;
}

.slider-arrows button {
  width:38px;
  height:34px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(139,159,210,.15);
  border-radius:9px;
  color:#e8edff;
  background:rgba(15,24,50,.66);
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}

.slider-arrows button:hover {
  transform:translateY(-1px);
  border-color:rgba(100,149,255,.40);
  background:rgba(76,141,255,.14);
}

@media (max-width:1180px) and (min-width:901px) {
  .hero-clip-slider {
    width:45vw;
    right:-8px;
  }

  .hero-slide {
    width:clamp(205px,18.5vw,250px);
  }

  .hero-slide.is-prev { transform:translate(-50%,-50%) translateX(-66%) scale(.77) rotateY(8deg); }
  .hero-slide.is-next { transform:translate(-50%,-50%) translateX(66%) scale(.77) rotateY(-8deg); }
}

@media (max-width:900px) {
  .portfolio-hero.hero {
    min-height:auto;
    display:block;
    padding-top:112px;
    padding-bottom:78px;
  }

  .portfolio-hero .hero-copy {
    width:min(720px,100%);
  }

  .hero-clip-slider {
    position:relative;
    top:auto;
    right:auto;
    width:100%;
    height:clamp(500px,72vw,610px);
    margin-top:52px;
  }

  .hero-slide {
    width:clamp(220px,34vw,286px);
  }
}

@media (max-width:620px) {
  .hero-clip-slider {
    height:530px;
    margin-top:38px;
  }

  .slider-shell { border-radius:20px; }
  .slider-stage { inset:50px 8px 54px; }

  .hero-slide {
    width:min(62vw,250px);
    border-radius:17px;
  }

  .hero-slide.is-prev { transform:translate(-50%,-50%) translateX(-62%) scale(.74); }
  .hero-slide.is-next { transform:translate(-50%,-50%) translateX(62%) scale(.74); }

  .slider-head,
  .slider-foot { left:14px;right:14px; }

  .slider-arrows button { width:36px;height:32px; }
}

@media (max-width:430px) {
  .hero-clip-slider { height:500px; }
  .hero-slide { width:min(66vw,238px); }
  .hero-slide.is-prev { transform:translate(-50%,-50%) translateX(-56%) scale(.70); }
  .hero-slide.is-next { transform:translate(-50%,-50%) translateX(56%) scale(.70); }
}

html[data-performance="lite"] .slider-shell {
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}


/* ================================================================
   V13 — SIGNAL GLASS THEME
   Obsidian / Signal Orange / Arctic Mint / Chrome White
   ================================================================ */
:root {
  --bg:#070707;
  --bg-2:#0d0d0d;
  --panel:rgba(14,14,14,.76);
  --panel-strong:rgba(18,18,18,.93);
  --text:#f7f7f2;
  --muted:#9a9a94;
  --muted-2:#62625f;
  --line:rgba(255,255,245,.10);
  --line-strong:rgba(255,255,245,.20);
  --acid:#ff5a1f;
  --cyan:#62ffd6;
  --violet:#ffc857;
  --pink:#ff8a63;
}

html { background:#070707; }

body {
  background:
    radial-gradient(circle at 80% 10%,rgba(255,90,31,.10),transparent 30rem),
    radial-gradient(circle at 19% 62%,rgba(98,255,214,.055),transparent 34rem),
    radial-gradient(circle at 68% 86%,rgba(255,200,87,.045),transparent 28rem),
    #070707;
}

body::before {
  opacity:.14;
  background-image:
    linear-gradient(rgba(255,255,245,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,245,.032) 1px,transparent 1px);
  background-size:58px 58px;
}

body::after {
  background:
    linear-gradient(118deg,transparent 0 58%,rgba(255,90,31,.025) 58% 58.18%,transparent 58.18%),
    linear-gradient(62deg,transparent 0 74%,rgba(98,255,214,.018) 74% 74.15%,transparent 74.15%);
}

::selection { color:#050505; background:#62ffd6; }

.site-header.scrolled {
  background:rgba(7,7,7,.84);
  border-color:rgba(255,255,245,.10);
  box-shadow:0 18px 46px rgba(0,0,0,.36),0 0 28px rgba(255,90,31,.035);
}

.brand-mark {
  border-radius:2px 8px 2px 8px;
  background:linear-gradient(145deg,#fff7e8 0 15%,#ff8a30 15% 62%,#ff3d17 62% 78%,#62ffd6 78%);
  box-shadow:0 0 25px rgba(255,90,31,.38),0 0 12px rgba(98,255,214,.16);
  transform:skewX(-9deg) rotate(6deg);
}

.eyebrow::before { background:linear-gradient(90deg,#ff5a1f,#ffc857,#62ffd6); }

.accent-text {
  background:linear-gradient(100deg,#fff 0%,#fff7ea 14%,#ffc857 36%,#ff5a1f 63%,#62ffd6 100%);
  background-clip:text;
  -webkit-background-clip:text;
}

.button-primary {
  color:#090909;
  border-color:rgba(255,174,83,.52);
  background:linear-gradient(115deg,#ffc857,#ff8a2d 56%,#ff531e);
  box-shadow:0 16px 38px rgba(255,90,31,.18),0 0 26px rgba(255,200,87,.08);
}
.button-primary:hover {
  background:linear-gradient(115deg,#ffd877,#ff9c41 56%,#ff6330);
  box-shadow:0 18px 48px rgba(255,90,31,.25),0 0 32px rgba(255,200,87,.10);
}

.status-dot,.slider-live-dot {
  background:#62ffd6;
  box-shadow:0 0 18px rgba(98,255,214,.52);
}

.hero-proof > span:not(.status-dot) {
  border-color:rgba(255,255,245,.11);
  background:rgba(15,15,15,.46);
}

.feature-project {
  border-color:rgba(255,255,245,.09);
  background:
    radial-gradient(circle at 12% 18%,rgba(255,90,31,.075),transparent 29%),
    radial-gradient(circle at 86% 78%,rgba(98,255,214,.045),transparent 31%),
    rgba(10,10,10,.72);
  box-shadow:0 38px 110px rgba(0,0,0,.32),0 0 54px rgba(255,90,31,.018);
}

.feature-label,.archive-chip { color:#ff9f55; }
.filters .filter.active {
  color:#0a0a0a;
  border-color:rgba(255,138,45,.48);
  background:#ffc857;
  box-shadow:0 0 24px rgba(255,138,45,.12);
}

/* Hero slider — chrome glass */
.hero-clip-slider {
  position:absolute;
  z-index:4;
  top:clamp(90px,11.5vh,124px);
  right:-10px;
  width:clamp(520px,48.5vw,710px);
  height:clamp(505px,72vh,625px);
}

.slider-shell {
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border:1px solid rgba(255,255,245,.12);
  border-radius:30px;
  background:
    radial-gradient(circle at 78% 7%,rgba(255,90,31,.115),transparent 30%),
    radial-gradient(circle at 22% 83%,rgba(98,255,214,.075),transparent 30%),
    linear-gradient(155deg,rgba(18,18,16,.93),rgba(7,7,7,.88));
  box-shadow:
    0 42px 120px rgba(0,0,0,.46),
    0 0 66px rgba(255,90,31,.035),
    inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.slider-shell::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.42;
  background:
    linear-gradient(102deg,transparent 0 22%,rgba(255,255,255,.035) 22.3%,transparent 22.7%),
    linear-gradient(180deg,rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:auto,48px 48px,48px 48px;
  mask-image:linear-gradient(to bottom,#000,transparent 92%);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 92%);
}

.slider-shell::after {
  content:"";
  position:absolute;
  z-index:1;
  top:-30%;
  left:-16%;
  width:34%;
  height:170%;
  pointer-events:none;
  opacity:.13;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  transform:rotate(17deg);
  animation:signalGlassSweep 8.5s ease-in-out infinite;
}

@keyframes signalGlassSweep {
  0%,18% { transform:translateX(-35%) rotate(17deg);opacity:.05; }
  48% { opacity:.15; }
  72%,100% { transform:translateX(390%) rotate(17deg);opacity:.04; }
}

.slider-head-left { color:#aaa9a0; }
.slider-counter { color:#7c7c76; }

.slider-stage {
  position:absolute;
  inset:53px 14px 58px;
  perspective:1200px;
  overflow:hidden;
}

.hero-slide {
  width:clamp(230px,19vw,286px);
  border:1px solid rgba(255,255,245,.12);
  border-radius:23px;
  background:
    radial-gradient(circle at 50% 22%,rgba(255,90,31,.13),transparent 38%),
    linear-gradient(160deg,#171511,#090909 66%,#101715);
  box-shadow:0 26px 78px rgba(0,0,0,.46);
}

.hero-slide::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:.18;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.025) 3px 4px);
}

.hero-slide.is-active {
  border-color:rgba(255,126,55,.40);
  box-shadow:0 36px 96px rgba(0,0,0,.56),0 0 50px rgba(255,90,31,.11),0 0 24px rgba(98,255,214,.035);
}
.hero-slide.is-prev,.hero-slide.is-next { filter:saturate(.72) brightness(.58) contrast(1.04); }
.hero-slider-video { background:#0b0b0a; }
.hero-slide-tint {
  background:
    linear-gradient(to bottom,rgba(6,6,6,.025),rgba(6,6,6,.04) 42%,rgba(6,6,6,.83)),
    linear-gradient(118deg,rgba(255,90,31,.08),transparent 44%,rgba(98,255,214,.055));
}
.hero-slide-copy small { color:#ff9f55; }
.hero-slide-sound { color:#e8e6dc; }

.slider-dots {
  max-width:70%;
  display:grid;
  grid-template-columns:repeat(12,minmax(6px,1fr));
  gap:5px;
}
.slider-dot {
  width:auto;
  min-width:7px;
  height:4px;
  border-radius:99px;
  background:rgba(255,255,245,.13);
}
.slider-dot.is-active {
  width:auto;
  background:linear-gradient(90deg,#ffc857,#ff5a1f,#62ffd6);
  box-shadow:0 0 16px rgba(255,90,31,.24);
}
.slider-arrows button {
  border-color:rgba(255,255,245,.11);
  color:#f6f5ed;
  background:rgba(17,17,15,.72);
}
.slider-arrows button:hover {
  border-color:rgba(255,138,45,.42);
  background:rgba(255,90,31,.13);
}

@media (max-width:900px) {
  .hero-clip-slider {
    position:relative;
    top:auto;
    right:auto;
    width:100%;
    height:clamp(510px,74vw,620px);
    margin-top:52px;
  }
}

@media (max-width:620px) {
  .slider-dots { max-width:66%; gap:3px; }
  .slider-dot { min-width:4px; height:3px; }
}

html[data-performance="lite"] .slider-shell::after { display:none; }


/* ==================================================================
   V14 — PRISM VOID
   A different visual system: spectral glass / chromatic edges / open deck
   Graphite + pearl + cyan + fuchsia + ultraviolet
   ================================================================== */
:root {
  --bg:#07090d;
  --bg-2:#0b0d12;
  --panel:rgba(13,15,21,.64);
  --panel-strong:rgba(13,15,21,.88);
  --text:#f5f7fb;
  --muted:#9ca3b3;
  --muted-2:#626a7a;
  --line:rgba(232,239,255,.10);
  --line-strong:rgba(232,239,255,.22);
  --acid:#65f6ff;
  --cyan:#ff4fd2;
  --violet:#846cff;
  --pink:#ff74b9;
  --prism-a:#65f6ff;
  --prism-b:#846cff;
  --prism-c:#ff4fd2;
  --prism-d:#d7ff72;
}

html { background:#07090d; }
body {
  background:
    radial-gradient(ellipse at 76% 4%,rgba(132,108,255,.11),transparent 34rem),
    radial-gradient(ellipse at 15% 67%,rgba(101,246,255,.065),transparent 37rem),
    radial-gradient(ellipse at 92% 72%,rgba(255,79,210,.055),transparent 32rem),
    linear-gradient(155deg,#07090d 0%,#090a10 48%,#07080b 100%);
}

body::before {
  opacity:.15;
  background-image:
    linear-gradient(rgba(232,239,255,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(232,239,255,.026) 1px,transparent 1px);
  background-size:72px 72px;
  transform:perspective(900px) rotateX(58deg) scale(1.35) translateY(-10%);
  transform-origin:50% 0;
  mask-image:linear-gradient(to bottom,#000 0 52%,transparent 84%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0 52%,transparent 84%);
}

body::after {
  opacity:.78;
  background:
    linear-gradient(117deg,transparent 0 39%,rgba(101,246,255,.035) 39.15%,transparent 39.3%),
    linear-gradient(64deg,transparent 0 68%,rgba(255,79,210,.028) 68.15%,transparent 68.3%),
    radial-gradient(circle at 50% 0,rgba(255,255,255,.025),transparent 37%);
}

::selection { color:#05070a;background:#d7ff72; }

.site-header {
  border-radius:999px;
  padding-left:18px;
  padding-right:8px;
}
.site-header.scrolled {
  background:rgba(8,10,14,.70);
  border-color:rgba(215,225,255,.11);
  box-shadow:0 18px 50px rgba(0,0,0,.30),0 0 45px rgba(101,246,255,.025);
  backdrop-filter:blur(18px) saturate(130%);
}
.site-header.scrolled::after {
  content:"";
  position:absolute;
  left:11%;right:11%;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--prism-a),var(--prism-b),var(--prism-c),transparent);
  opacity:.45;
}
.brand-mark {
  width:15px;height:15px;border-radius:50% 18% 50% 18%;
  background:conic-gradient(from 205deg,var(--prism-a),var(--prism-b),var(--prism-c),var(--prism-d),var(--prism-a));
  box-shadow:0 0 18px rgba(101,246,255,.34),0 0 28px rgba(255,79,210,.16);
  transform:rotate(28deg);
}
.nav > a:hover { background:rgba(255,255,255,.045); }

.eyebrow::before {
  width:34px;
  background:linear-gradient(90deg,var(--prism-a),var(--prism-b),var(--prism-c));
  box-shadow:0 0 14px rgba(101,246,255,.25);
}

.hero-title {
  position:relative;
  text-wrap:balance;
}
.hero-title::after {
  content:"";
  position:absolute;
  left:-3%;bottom:-12%;width:54%;height:22%;
  background:linear-gradient(90deg,rgba(101,246,255,.20),rgba(132,108,255,.12),rgba(255,79,210,0));
  filter:blur(28px);
  pointer-events:none;
  opacity:.8;
}
.accent-text {
  color:transparent;
  background:
    linear-gradient(98deg,#ffffff 0 8%,#c9fbff 20%,#65f6ff 37%,#927dff 58%,#ff5bd8 78%,#f9f9ff 100%);
  background-size:180% 100%;
  background-clip:text;
  -webkit-background-clip:text;
  animation:prismTextShift 8s ease-in-out infinite alternate;
}
@keyframes prismTextShift { to { background-position:100% 0; } }

.button-primary {
  position:relative;
  overflow:hidden;
  color:#071014;
  border-color:rgba(153,250,255,.50);
  border-radius:999px;
  background:linear-gradient(110deg,#dfffff 0%,#8cf8ff 35%,#bfaeff 66%,#ff9ae7 100%);
  box-shadow:0 14px 38px rgba(101,246,255,.10),0 0 28px rgba(132,108,255,.08);
}
.button-primary::after {
  content:"";position:absolute;inset:-30% auto -30% -35%;width:28%;
  transform:skewX(-18deg);background:rgba(255,255,255,.38);filter:blur(8px);
  transition:transform .45s ease;
}
.button-primary:hover::after { transform:translateX(520%) skewX(-18deg); }
.button-primary:hover { background:linear-gradient(110deg,#fff,#9af8ff 36%,#c4b5ff 68%,#ffa3e9); }

.hero-proof > span:not(.status-dot) {
  border-color:rgba(226,233,255,.09);
  border-radius:999px;
  background:rgba(255,255,255,.018);
  backdrop-filter:blur(8px);
}
.status-dot,.slider-live-dot {
  background:#d7ff72;
  box-shadow:0 0 18px rgba(215,255,114,.52);
}

/* ----- Hero: open prism deck instead of a boxed orange panel ----- */
.hero-clip-slider {
  top:clamp(86px,10.8vh,118px);
  right:-2.6%;
  width:clamp(530px,49vw,735px);
  height:clamp(520px,73vh,640px);
}
.slider-shell {
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.slider-shell::before {
  content:"";
  position:absolute;
  z-index:-2;
  inset:7% 3% 5% 5%;
  border-radius:48% 52% 44% 56% / 55% 38% 62% 45%;
  background:
    radial-gradient(circle at 25% 30%,rgba(101,246,255,.16),transparent 36%),
    radial-gradient(circle at 74% 22%,rgba(132,108,255,.17),transparent 38%),
    radial-gradient(circle at 68% 76%,rgba(255,79,210,.14),transparent 37%);
  filter:blur(34px);
  opacity:.78;
  animation:prismBlob 11s ease-in-out infinite alternate;
  mask-image:none;-webkit-mask-image:none;
}
@keyframes prismBlob {
  0% { transform:translate3d(-1%,1%,0) rotate(-2deg) scale(.96); }
  100% { transform:translate3d(2%,-2%,0) rotate(3deg) scale(1.04); }
}
.slider-shell::after {
  content:"";
  position:absolute;
  z-index:-1;
  inset:12% 9% 10%;
  border:1px solid rgba(235,241,255,.08);
  border-radius:34px;
  opacity:.85;
  background:
    linear-gradient(120deg,rgba(255,255,255,.035),transparent 35%),
    rgba(12,14,20,.22);
  transform:rotate(-2.3deg);
  animation:none;
}
.slider-head {
  left:9%;right:7%;top:0;
  padding:0 2px 11px;
  border-bottom:1px solid rgba(232,239,255,.09);
}
.slider-head::after {
  content:"";position:absolute;left:0;bottom:-1px;width:42%;height:1px;
  background:linear-gradient(90deg,var(--prism-a),var(--prism-b),transparent);
}
.slider-head-left { color:#c1c8d6;letter-spacing:.16em; }
.slider-counter { color:#7c8496; }
.slider-stage {
  inset:46px 0 52px;
  overflow:visible;
  perspective:1450px;
}
.hero-slide {
  width:clamp(228px,19.5vw,298px);
  aspect-ratio:9/16;
  height:auto;
  max-height:88%;
  border:1px solid rgba(235,241,255,.13);
  border-radius:28px 12px 28px 12px;
  background:
    linear-gradient(150deg,rgba(255,255,255,.055),transparent 27%),
    linear-gradient(165deg,#161923,#090a0e 72%);
  box-shadow:0 34px 90px rgba(0,0,0,.48);
  transform-origin:center;
}
.hero-slide::before {
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(135deg,rgba(255,255,255,.12),transparent 19% 72%,rgba(255,255,255,.035)),
    repeating-linear-gradient(0deg,transparent 0 4px,rgba(255,255,255,.012) 4px 5px);
  opacity:.48;
}
.hero-slide::after {
  content:"";position:absolute;z-index:-1;inset:-2px;border-radius:inherit;padding:1px;
  background:conic-gradient(from 180deg,transparent 0 17%,rgba(101,246,255,.72) 25%,rgba(132,108,255,.62) 44%,rgba(255,79,210,.65) 61%,transparent 74% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.12;
  transition:opacity .35s ease;
}
.hero-slide.is-active {
  transform:translate(-50%,-50%) scale(1) rotateY(-1deg) rotateZ(.4deg);
  border-color:rgba(235,241,255,.18);
  box-shadow:
    0 40px 110px rgba(0,0,0,.58),
    -18px 0 48px rgba(101,246,255,.08),
    18px 0 52px rgba(255,79,210,.075);
}
.hero-slide.is-active::after { opacity:.92; }
.hero-slide.is-prev {
  transform:translate(-50%,-50%) translateX(-78%) translateY(3%) scale(.72) rotateY(15deg) rotateZ(-4deg);
  filter:saturate(.68) brightness(.48);
  opacity:.48;
}
.hero-slide.is-next {
  transform:translate(-50%,-50%) translateX(78%) translateY(-2%) scale(.76) rotateY(-15deg) rotateZ(4deg);
  filter:saturate(.78) brightness(.58);
  opacity:.60;
}
.hero-slide.is-hidden { opacity:0;transform:translate(-50%,-50%) scale(.62); }
.hero-slide-tint {
  background:
    linear-gradient(to bottom,rgba(7,9,13,.02),rgba(7,9,13,.04) 45%,rgba(7,9,13,.84)),
    linear-gradient(135deg,rgba(101,246,255,.055),transparent 42%,rgba(255,79,210,.07));
}
.hero-slide-copy small { color:#a7faff; }
.hero-slide-copy strong { text-shadow:0 5px 22px rgba(0,0,0,.72); }
.hero-slide-sound {
  border:1px solid rgba(235,241,255,.14);
  border-radius:999px;
  padding:6px 9px;
  color:#f7fbff;
  background:rgba(9,11,16,.44);
  backdrop-filter:blur(10px);
}
.hero-slide-coming {
  position:absolute;z-index:5;left:14px;bottom:14px;
  padding:6px 9px;border:1px solid rgba(235,241,255,.10);border-radius:999px;
  color:#9ba4b8;background:rgba(9,11,16,.52);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.46rem;font-weight:900;letter-spacing:.08em;
}
.hero-slide.is-placeholder .hero-slider-video {
  background:
    radial-gradient(circle at 30% 24%,rgba(101,246,255,.11),transparent 32%),
    radial-gradient(circle at 76% 72%,rgba(255,79,210,.10),transparent 38%),
    linear-gradient(160deg,#151824,#08090d 68%);
}
.hero-slide.is-placeholder .hero-slide-copy strong { color:#aeb6c7; }

.slider-foot {
  left:9%;right:7%;bottom:3px;
}
.slider-dots {
  max-width:72%;
  grid-template-columns:repeat(12,minmax(7px,1fr));
  gap:5px;
}
.slider-dot {
  height:3px;
  border-radius:0;
  background:rgba(232,239,255,.13);
}
.slider-dot.is-active {
  background:linear-gradient(90deg,var(--prism-a),var(--prism-b),var(--prism-c));
  box-shadow:0 0 17px rgba(101,246,255,.22);
}
.slider-arrows button {
  border-radius:50%;
  border-color:rgba(235,241,255,.13);
  background:rgba(10,12,18,.48);
  color:#f5f8ff;
  backdrop-filter:blur(10px);
}
.slider-arrows button:hover {
  border-color:rgba(101,246,255,.36);
  background:rgba(101,246,255,.08);
}

/* ----- Portfolio surfaces: less card-template, more editorial glass ----- */
.portfolio-heading {
  position:relative;
}
.portfolio-heading::after {
  content:"";position:absolute;right:0;top:12%;width:24%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(101,246,255,.42),rgba(255,79,210,.24));
}
.feature-project {
  position:relative;
  overflow:visible;
  border-color:rgba(232,239,255,.08);
  border-radius:26px 8px 26px 8px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.035),transparent 28%),
    rgba(10,12,17,.48);
  box-shadow:0 34px 100px rgba(0,0,0,.30);
  backdrop-filter:blur(8px);
}
.feature-project::before {
  content:"";position:absolute;z-index:-1;inset:-1px;border-radius:inherit;
  background:linear-gradient(120deg,rgba(101,246,255,.16),transparent 28% 70%,rgba(255,79,210,.12));
  opacity:.5;
}
.feature-number {
  color:transparent;
  -webkit-text-stroke:1px rgba(219,226,246,.13);
  text-shadow:18px 0 38px rgba(132,108,255,.05);
}
.feature-label,.archive-chip { color:#a7faff; }
.feature-tags span {
  border-radius:999px;
  border-color:rgba(232,239,255,.09);
  background:rgba(255,255,255,.018);
}
.clip-preview {
  border-color:rgba(232,239,255,.08);
  background:
    radial-gradient(circle at 20% 15%,rgba(101,246,255,.07),transparent 28%),
    radial-gradient(circle at 82% 82%,rgba(255,79,210,.065),transparent 34%),
    #0a0c11;
}
.clip-video { background:#090b10; }
.play-chip {
  border-radius:999px;
  border-color:rgba(235,241,255,.16);
  color:#fff;
  background:rgba(8,10,15,.58);
  backdrop-filter:blur(10px);
}
.clip-card:hover .clip-preview {
  border-color:rgba(101,246,255,.24);
  box-shadow:0 18px 54px rgba(0,0,0,.28),0 0 34px rgba(132,108,255,.045);
}
.filters .filter {
  border-radius:999px;
}
.filters .filter.active {
  color:#07090d;
  border-color:transparent;
  background:linear-gradient(110deg,#bdfcff,#9e8dff,#ff90e5);
  box-shadow:0 0 24px rgba(101,246,255,.10);
}
.archive-placeholder { opacity:.68; }
.archive-placeholder:hover { opacity:.88; }
.archive-placeholder .clip-preview {
  background:
    linear-gradient(135deg,rgba(255,255,255,.024),transparent),
    repeating-linear-gradient(135deg,rgba(101,246,255,.03) 0 1px,transparent 1px 18px),
    #090b10;
}
.reel-end-inner {
  border-top:1px solid rgba(232,239,255,.10);
  border-bottom:1px solid rgba(232,239,255,.07);
  background:
    linear-gradient(90deg,transparent,rgba(101,246,255,.025),rgba(132,108,255,.028),rgba(255,79,210,.022),transparent);
}

/* ----- Resolution system ----- */
html { font-size:clamp(13.5px,calc(11.25px + .34vw),18px); }
.section {
  width:min(calc(100% - clamp(24px,4vw,64px)),1480px);
  padding-top:clamp(72px,9.2vh,126px);
  padding-bottom:clamp(72px,9.2vh,126px);
}
.hero {
  min-height:100svh;
  padding-top:clamp(94px,12vh,126px);
  padding-bottom:clamp(54px,7vh,82px);
}
.hero-copy { width:min(46vw,640px); }
.hero-title { font-size:clamp(3rem,min(5.25vw,8.4vh),6rem); }
.hero-sub { font-size:clamp(.9rem,.70rem + .28vw,1.08rem); }
.portfolio-heading h2,.reel-end h2 { font-size:clamp(2.55rem,min(4.9vw,7.3vh),5.35rem); }

@media (min-width:1700px) {
  :root { --max:1480px; }
  .hero-copy { width:min(650px,42vw); }
  .hero-clip-slider { width:min(720px,43vw);right:0; }
}

@media (max-width:1366px) and (min-width:1081px) {
  .section { width:min(calc(100% - 38px),1260px); }
  .hero-copy { width:48vw; }
  .hero-title { font-size:clamp(3rem,min(4.9vw,8vh),4.8rem); }
  .hero-clip-slider { width:46vw;height:clamp(450px,68vh,560px);right:-1%; }
  .hero-slide { width:clamp(205px,18.2vw,255px); }
  .hero-slide.is-prev { transform:translate(-50%,-50%) translateX(-72%) translateY(3%) scale(.70) rotateY(14deg) rotateZ(-4deg); }
  .hero-slide.is-next { transform:translate(-50%,-50%) translateX(72%) translateY(-2%) scale(.74) rotateY(-14deg) rotateZ(4deg); }
}

@media (max-width:1080px) {
  .portfolio-hero.hero {
    min-height:auto;
    display:block;
    padding-top:108px;
  }
  .portfolio-hero .hero-copy { width:min(760px,100%); }
  .hero-title { font-size:clamp(3.15rem,min(8.5vw,8.2vh),5.35rem); }
  .hero-clip-slider {
    position:relative;top:auto;right:auto;width:100%;
    height:clamp(500px,67vw,620px);margin-top:48px;
  }
  .slider-shell::before { inset:4% 8%; }
  .hero-slide { width:clamp(220px,31vw,288px); }
  .featured-projects { gap:clamp(42px,7vw,84px); }
}

@media (max-width:820px) {
  .site-header { width:calc(100% - 20px);top:10px; }
  .hero-proof { max-width:100%; }
  .portfolio-heading::after { display:none; }
  .feature-project { border-radius:22px 8px 22px 8px; }
  .portfolio-archive { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:620px) {
  html { font-size:clamp(13.5px,3.7vw,16px); }
  .section { width:calc(100% - 24px); }
  .portfolio-hero.hero { padding-top:96px;padding-bottom:66px; }
  .hero-title { font-size:clamp(2.8rem,13vw,4.55rem); }
  .hero-line { white-space:normal; }
  .hero-sub { margin-top:18px; }
  .hero-actions { margin-top:22px; }
  .hero-clip-slider { height:clamp(475px,132vw,555px);margin-top:36px; }
  .slider-shell::after { inset:10% 2% 8%;border-radius:24px; }
  .slider-head { left:2%;right:2%; }
  .slider-stage { inset:45px -4px 50px; }
  .hero-slide { width:min(62vw,248px);border-radius:22px 9px 22px 9px; }
  .hero-slide.is-prev { transform:translate(-50%,-50%) translateX(-58%) scale(.68) rotateZ(-3deg); }
  .hero-slide.is-next { transform:translate(-50%,-50%) translateX(58%) scale(.72) rotateZ(3deg); }
  .slider-foot { left:2%;right:2%; }
  .slider-dots { gap:3px;max-width:65%; }
  .portfolio-archive { grid-template-columns:1fr; }
  .feature-project { backdrop-filter:none; }
}

@media (max-width:390px) {
  .hero-title { font-size:clamp(2.6rem,12.4vw,3.4rem); }
  .hero-clip-slider { height:465px; }
  .hero-slide { width:min(64vw,226px); }
  .slider-head-left { font-size:.48rem; }
  .hero-proof > span:not(.status-dot) { padding-left:9px;padding-right:9px; }
}

@media (max-height:760px) and (min-width:1081px) {
  .hero { padding-top:92px;padding-bottom:42px; }
  .hero-title { font-size:clamp(3rem,6.8vh,4.65rem); }
  .hero-sub { margin-top:16px;line-height:1.5; }
  .hero-actions { margin-top:20px; }
  .hero-clip-slider { top:80px;height:calc(100vh - 112px);max-height:555px; }
  .hero-slide { max-height:86%; }
}

@media (min-width:2100px) {
  .section { max-width:1600px; }
  .hero-copy { width:670px; }
  .hero-clip-slider { width:760px; }
}

html[data-performance="lite"] .slider-shell::before {
  filter:none;
  opacity:.18;
  animation:none;
}
html[data-performance="lite"] .feature-project,
html[data-performance="lite"] .hero-slide-sound,
html[data-performance="lite"] .slider-arrows button {
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
@media (prefers-reduced-motion:reduce) {
  .accent-text,.slider-shell::before { animation:none !important; }
}


/* V15 performance pass — same Prism Void look, cheaper rendering */
.featured-section { display:none !important; }

.hero-clip-slider,
.slider-shell,
.slider-stage,
.hero-slide {
  transform-style:flat;
}

.slider-shell::before {
  filter:none !important;
  animation:none !important;
  opacity:.26 !important;
}

.slider-shell::after {
  background:rgba(12,14,20,.24) !important;
}

.hero-slide {
  contain:layout paint style;
  will-change:transform,opacity;
  transition:transform .32s cubic-bezier(.2,.72,.2,1),opacity .22s ease,border-color .22s ease !important;
}

.hero-slide::before {
  opacity:.28 !important;
}

.hero-slide::after {
  display:none !important;
}

.hero-slide.is-active {
  box-shadow:0 26px 62px rgba(0,0,0,.48),0 0 0 1px rgba(101,246,255,.08) !important;
}

.hero-slide.is-prev,
.hero-slide.is-next {
  filter:none !important;
  opacity:.42 !important;
}

.hero-slide.is-hidden {
  visibility:hidden;
  pointer-events:none;
}

.hero-slide-sound,
.slider-arrows button,
.hero-proof > span:not(.status-dot) {
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.hero-slider-video {
  transform:translateZ(0);
  backface-visibility:hidden;
}

.hero-slide:not(.is-playing) .hero-slider-video {
  object-fit:cover;
}

/* On smaller hardware/resolutions, show only the active card. */
html[data-performance="lite"] .hero-slide.is-prev,
html[data-performance="lite"] .hero-slide.is-next {
  opacity:0 !important;
  visibility:hidden;
  pointer-events:none;
}

html[data-performance="lite"] .slider-shell::after,
html[data-performance="lite"] .noise {
  display:none !important;
}

@media (max-width:900px) {
  .hero-slide.is-prev,
  .hero-slide.is-next {
    opacity:.20 !important;
    filter:none !important;
  }
}

@media (max-width:620px) {
  .hero-slide.is-prev,
  .hero-slide.is-next {
    opacity:0 !important;
    visibility:hidden;
  }
}


/* V16 — archive completeness + responsive flow + active-slide autoplay */
.archive-section {
  clear: both;
  position: relative;
  z-index: 3;
}

.portfolio-archive {
  align-items: start;
}

/* Active slide runs automatically; button is now only an audio toggle. */
.hero-slide.is-playing .hero-slider-video {
  opacity: 1;
}
.hero-slide-sound {
  min-width: 66px;
  text-align: center;
}

/* Prevent the open-deck hero from visually bleeding into the archive on
   stacked laptop/tablet/mobile layouts. */
@media (max-width:1080px) {
  .portfolio-hero.hero {
    overflow: clip;
    padding-bottom: clamp(96px, 11vw, 142px);
  }

  .hero-clip-slider {
    margin-bottom: clamp(50px, 7vw, 84px);
  }

  .archive-section {
    padding-top: clamp(86px, 10vh, 118px);
  }
}

@media (max-width:820px) {
  .portfolio-heading {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  .portfolio-intro {
    width: min(100%, 620px);
    margin: 0 !important;
  }

  .hero-clip-slider {
    margin-bottom: 62px;
  }
}

@media (max-width:620px) {
  .portfolio-hero.hero {
    padding-bottom: 92px;
  }

  .hero-clip-slider {
    margin-bottom: 48px;
  }

  .archive-section {
    padding-top: 78px;
  }
}

/* ================================================================
   FINAL CONTENT PASS — myclippies.com + true 9:16 hero reel
   ================================================================ */

.brand > span:last-child {
  letter-spacing: .035em;
  text-transform: lowercase;
  font-size: .78rem;
}

.portfolio-hero .hero-copy {
  width: min(48vw, 670px);
}

.final-hero-title {
  max-width: 720px;
  font-size: clamp(2.8rem, min(4.9vw, 7.8vh), 5.45rem);
}

.final-hero-title .hero-line {
  white-space: nowrap;
}

.hero-lead {
  width: min(560px, 100%);
  margin: 24px 0 0;
  color: #f2f5ff;
  font-size: clamp(1.02rem, .84rem + .34vw, 1.28rem);
  font-weight: 760;
  letter-spacing: -.018em;
}

.portfolio-hero .hero-sub {
  width: min(570px, 100%);
  margin-top: 10px;
}

/* The hero reel is a real 9:16 video deck at every resolution. */
.hero-clip-slider {
  top: clamp(82px, 9.5vh, 108px);
  right: -1.5%;
  width: clamp(510px, 47vw, 760px);
  height: clamp(540px, 78vh, 700px);
}

.slider-stage {
  inset: 46px 0 54px;
}

.hero-slide {
  width: clamp(245px, 19vw, 330px) !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 9 / 16 !important;
}

.hero-slide.is-active {
  transform: translate(-50%, -50%) scale(1) rotateZ(.25deg) !important;
}

.hero-slide.is-prev {
  transform: translate(-50%, -50%) translateX(-82%) translateY(2%) scale(.69) rotateZ(-3deg) !important;
}

.hero-slide.is-next {
  transform: translate(-50%, -50%) translateX(82%) translateY(-1%) scale(.72) rotateZ(3deg) !important;
}

.hero-slider-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Portfolio copy supplied for the final site. */
.archive-heading h2 {
  max-width: 920px;
}

.services-section,
.process-section {
  min-height: auto;
}

.final-section-heading {
  width: min(100%, 980px);
  margin-bottom: clamp(34px, 5vw, 70px);
}

.final-section-heading h2,
.closing-section h2 {
  margin: 0;
  font-size: clamp(2.65rem, min(5.35vw, 7.7vh), 5.9rem);
  font-weight: 950;
  letter-spacing: -.065em;
  line-height: .89;
  text-transform: uppercase;
}

.service-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}

.service-card {
  position: relative;
  min-height: 330px;
  padding: clamp(24px, 2.6vw, 38px);
  overflow: hidden;
  border: 1px solid rgba(232,239,255,.085);
  border-radius: 24px 8px 24px 8px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 42%),
    radial-gradient(circle at 82% 14%, rgba(101,246,255,.075), transparent 28%),
    radial-gradient(circle at 18% 86%, rgba(255,79,210,.055), transparent 35%),
    rgba(9,11,16,.55);
  box-shadow: 0 22px 70px rgba(0,0,0,.20);
}

.service-card::after {
  content: "";
  position: absolute;
  inset: auto -15% -42% 20%;
  height: 58%;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(132,108,255,.08), transparent 70%);
}

.service-number {
  display: block;
  margin-bottom: clamp(64px, 8vw, 120px);
  color: #a7faff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.service-card h3,
.process-step h3 {
  margin: 0;
  color: #f7f8ff;
  font-size: clamp(1.4rem, 2vw, 2.15rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.04;
}

.service-card p,
.process-step p {
  margin: 16px 0 0;
  color: #9299ad;
  font-size: clamp(.88rem, .74rem + .16vw, 1rem);
  line-height: 1.72;
}

.process-steps {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(232,239,255,.09);
}

.process-step {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: start;
  gap: clamp(18px, 3vw, 42px);
  padding: clamp(28px, 4vw, 54px) 0;
  border-bottom: 1px solid rgba(232,239,255,.09);
}

.process-number {
  color: transparent;
  -webkit-text-stroke: 1px rgba(167,250,255,.38);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(2.5rem, 4.5vw, 4.6rem);
  font-weight: 950;
  line-height: .82;
}

.process-step > div {
  max-width: 720px;
}

.closing-section {
  min-height: 68vh;
  display: grid;
  place-items: center;
  text-align: center;
}

.closing-inner {
  width: min(100%, 1100px);
  padding: clamp(58px, 8vw, 108px) clamp(20px, 5vw, 72px);
  border-top: 1px solid rgba(232,239,255,.09);
  border-bottom: 1px solid rgba(232,239,255,.07);
  background:
    radial-gradient(circle at 50% 18%, rgba(101,246,255,.045), transparent 35%),
    linear-gradient(90deg, transparent, rgba(132,108,255,.035), rgba(255,79,210,.025), transparent);
}

.closing-section .eyebrow::before {
  display: none;
}

.closing-inner > p:last-child {
  width: min(100%, 650px);
  margin: 24px auto 0;
  color: #a0a7ba;
  font-size: clamp(.96rem, .78rem + .25vw, 1.14rem);
  line-height: 1.7;
}

.portfolio-footer .brand > span:last-child {
  font-size: .72rem;
}

@media (max-width: 1366px) and (min-width: 1081px) {
  .portfolio-hero .hero-copy { width: 50vw; }
  .final-hero-title { font-size: clamp(2.65rem, min(4.55vw, 7.3vh), 4.45rem); }
  .hero-clip-slider { width: 44vw; height: clamp(520px, 74vh, 620px); }
  .hero-slide { width: clamp(225px, 18.2vw, 285px) !important; }
  .hero-slide.is-prev { transform: translate(-50%, -50%) translateX(-76%) scale(.67) rotateZ(-3deg) !important; }
  .hero-slide.is-next { transform: translate(-50%, -50%) translateX(76%) scale(.70) rotateZ(3deg) !important; }
}

@media (max-width: 1080px) {
  .portfolio-hero.hero {
    overflow: clip;
    padding-bottom: clamp(80px, 9vw, 112px);
  }

  .portfolio-hero .hero-copy {
    width: min(800px, 100%);
  }

  .final-hero-title {
    width: min(100%, 760px);
    font-size: clamp(3rem, min(8vw, 7.8vh), 5rem);
  }

  .hero-clip-slider {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: clamp(590px, 76vw, 690px);
    margin-top: 42px;
    margin-bottom: 30px;
  }

  .hero-slide {
    width: clamp(250px, 34vw, 320px) !important;
  }

  .service-cards {
    grid-template-columns: 1fr;
  }

  .service-card {
    min-height: 250px;
  }

  .service-number {
    margin-bottom: 56px;
  }
}

@media (max-width: 720px) {
  .brand > span:last-child { font-size: .71rem; }
  .final-hero-title { font-size: clamp(2.65rem, 12vw, 4.15rem); }
  .final-hero-title .hero-line { white-space: normal; }
  .hero-lead { margin-top: 20px; }

  .hero-clip-slider {
    height: clamp(570px, 154vw, 650px);
    margin-top: 30px;
  }

  .slider-stage { inset: 44px 0 50px; }
  .hero-slide { width: min(74vw, 300px) !important; }
  .hero-slide.is-prev,
  .hero-slide.is-next {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .slider-dots { max-width: 74%; }

  .final-section-heading h2,
  .closing-section h2 {
    font-size: clamp(2.45rem, 11.7vw, 4rem);
  }

  .process-step {
    grid-template-columns: 58px 1fr;
    gap: 16px;
  }

  .process-number {
    font-size: 2.8rem;
  }

  .closing-section { min-height: 58vh; }
}

@media (max-width: 430px) {
  .hero-clip-slider { height: 585px; }
  .hero-slide { width: min(76vw, 274px) !important; }
  .slider-head-left { font-size: .46rem; }
  .slider-counter { font-size: .47rem; }
  .slider-arrows button { width: 38px; height: 38px; }
}

@media (max-height: 760px) and (min-width: 1081px) {
  .portfolio-hero.hero { padding-top: 88px; padding-bottom: 36px; }
  .final-hero-title { font-size: clamp(2.55rem, 6.5vh, 4.2rem); }
  .hero-lead { margin-top: 16px; }
  .portfolio-hero .hero-sub { margin-top: 8px; }
  .hero-actions { margin-top: 18px; }
  .hero-proof { margin-top: 18px; }
  .hero-clip-slider { top: 72px; height: calc(100svh - 94px); max-height: 620px; }
  .hero-slide { width: min(18vw, 276px) !important; }
}


/* V19 requested cleanup */
.play-chip {
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  width: clamp(54px, 4.2vw, 70px) !important;
  height: clamp(54px, 4.2vw, 70px) !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: rgba(7,9,14,.56) !important;
  box-shadow:
    0 14px 38px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(255,255,255,.04) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translate(-50%, -50%) !important;
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    opacity .18s ease !important;
  font-size: 0 !important;
  z-index: 4 !important;
}

.play-chip::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid #fff;
}

.clip-card:hover .play-chip {
  transform: translate(-50%, -50%) scale(1.08) !important;
  background: rgba(17,20,29,.76) !important;
  border-color: rgba(255,255,255,.52) !important;
}

.clip-card.manual-playing .play-chip::before {
  width: 14px;
  height: 18px;
  margin-left: 0;
  border: 0;
  background:
    linear-gradient(
      90deg,
      #fff 0 4px,
      transparent 4px 10px,
      #fff 10px 14px
    );
}

@media (max-width: 720px) {
  .play-chip {
    width: 56px !important;
    height: 56px !important;
  }
}