:root {
  --bg: #05070b;
  --bg-soft: rgba(13, 17, 24, 0.8);
  --panel: rgba(10, 14, 20, 0.66);
  --panel-border: rgba(110, 168, 255, 0.14);
  --line: rgba(255, 255, 255, 0.08);
  --text: #f4f7fb;
  --muted: #9aa8bd;
  --accent: #7ad7ff;
  --accent-2: #88ffcc;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(71, 125, 255, 0.12), transparent 24%),
    radial-gradient(circle at bottom right, rgba(74, 255, 187, 0.10), transparent 18%),
    var(--bg);
  overflow: hidden;
}
#matrixCanvas,
.noise,
.grid,
.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
#matrixCanvas { opacity: 0.22; }
.noise {
  opacity: 0.04;
  background-image: radial-gradient(circle, #fff 0.55px, transparent 0.7px);
  background-size: 10px 10px;
  mix-blend-mode: screen;
}
.grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle at center, rgba(0,0,0,1), rgba(0,0,0,0.2) 68%, transparent 88%);
  opacity: 0.25;
}
.ambient {
  filter: blur(80px);
  opacity: 0.55;
}
.ambient-1 {
  width: 36vw; height: 36vw; left: -10vw; top: -12vw;
  background: rgba(53, 123, 255, 0.23);
  animation: floatOne 12s ease-in-out infinite alternate;
}
.ambient-2 {
  width: 28vw; height: 28vw; right: -8vw; bottom: -10vw;
  background: rgba(62, 255, 181, 0.18);
  animation: floatTwo 13s ease-in-out infinite alternate;
}
.shell {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}
.hero-card {
  width: min(1220px, 100%);
  border: 1px solid var(--panel-border);
  background: linear-gradient(180deg, rgba(12,18,25,0.72), rgba(8,12,18,0.86));
  border-radius: 28px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
  padding: 26px;
  position: relative;
  overflow: hidden;
}
.hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(122,215,255,0.05) 40%, transparent 78%);
  transform: translateX(-60%);
  animation: scan 9s linear infinite;
}
.hero-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.client-logo-wrap {
  min-height: 60px;
  display: flex;
  align-items: center;
}
.client-logo {
  max-height: 68px;
  max-width: min(300px, 44vw);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,0.35));
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #dce8f7;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
}
.status-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 0 rgba(136,255,204,0.45);
  animation: pulse 2s infinite;
}
.hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 32px;
  align-items: center;
}
.copy { padding: 14px 6px 14px 2px; }
.eyebrow {
  margin: 0 0 14px;
  color: var(--accent);
  font-size: 15px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
}
h1 {
  margin: 0;
  font-size: clamp(40px, 7vw, 74px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  font-weight: 800;
}
h1 span {
  color: transparent;
  -webkit-text-stroke: 1px rgba(122,215,255,0.90);
  text-shadow: 0 0 26px rgba(122,215,255,0.10);
}
.lead {
  margin: 22px 0 0;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.8;
  color: var(--muted);
  max-width: 62ch;
}
.feature-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.feature-chip {
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.035);
  color: #d7e4f5;
  font-size: 14px;
}
.meta-line {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 15px;
}
.meta-label { color: var(--muted); }
.meta-line a {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.visual-stack {
  display: grid;
  gap: 18px;
}
.glass-panel {
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(5, 10, 14, 0.78);
  backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 18px 50px rgba(0,0,0,0.28);
  overflow: hidden;
}
.window-bar,
.terminal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
.window-bar > span:not(.editor-status) {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
}
.window-bar strong,
.terminal-title,
.terminal-state {
  margin-left: 10px;
  color: #d7e4f5;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.terminal-head { justify-content: space-between; }
.terminal-state {
  margin-left: auto;
  color: var(--accent-2);
}
.code-body,
.terminal-body {
  padding: 18px 20px 20px;
  font-family: 'JetBrains Mono', monospace;
  color: #d5e6f8;
}
.code-body {
  min-height: 312px;
  font-size: 13px;
  line-height: 1.8;
  white-space: pre-wrap;
}
.terminal-body {
  min-height: 170px;
  font-size: 13px;
  line-height: 1.9;
}
.line {
  display: block;
}
.token-key { color: #7ad7ff; }
.token-fn { color: #88ffcc; }
.token-val { color: #ffd580; }
.token-muted { color: #8da1b8; }
.cursor {
  display: inline-block;
  width: 9px;
  height: 1.1em;
  vertical-align: -0.15em;
  background: var(--accent);
  margin-left: 3px;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(136,255,204,0.4); }
  70% { box-shadow: 0 0 0 10px rgba(136,255,204,0); }
  100% { box-shadow: 0 0 0 0 rgba(136,255,204,0); }
}
@keyframes scan {
  from { transform: translateX(-60%); }
  to { transform: translateX(140%); }
}
@keyframes floatOne {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(90px,60px,0); }
}
@keyframes floatTwo {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-60px,-80px,0); }
}
@media (max-width: 1040px) {
  body { overflow: auto; }
  .hero-content { grid-template-columns: 1fr; }
  .hero-card { padding: 22px; }
}
@media (max-width: 700px) {
  .shell { padding: 16px; }
  .hero-card { border-radius: 22px; padding: 18px; }
  .hero-top { flex-direction: column; align-items: flex-start; }
  .client-logo { max-width: 72vw; max-height: 58px; }
  .status-pill { font-size: 12px; }
  .lead { line-height: 1.7; }
  .feature-row { gap: 10px; }
  .feature-chip { font-size: 13px; }
  .code-body { min-height: 260px; font-size: 12px; }
  .terminal-body { min-height: 150px; font-size: 12px; }
}

/* V4: Adaptable client logo surface */
.client-logo-wrap {
  max-width: min(300px, 50vw);
  min-height: 70px;
  border-radius: 15px;
  padding: 10px 17px;
  background: linear-gradient(140deg, #f9fbff 0%, #e7edf5 100%);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 10px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.75);
  transition: background 450ms ease, box-shadow 450ms ease;
  isolation: isolate;
}
.client-logo-wrap.logo-surface-dark {
  background: linear-gradient(140deg, #1c2936 0%, #0d1620 100%);
  border-color: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.14);
}
.client-logo {
  display: block;
  max-width: min(257px, 42vw);
  max-height: 63px;
  filter: none;
}
/* Bottom studio mark: understated, no duplicated marketing label */
.agency-signature {
  margin-top: 30px;
  display: inline-flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 17px;
  border-top: 1px solid rgba(255,255,255,.11);
  min-width: 295px;
}
.signature-caption {
  color: #8598ad;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
}
.agency-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
}
.agency-link:hover .agency-domain { color: #fff; transform: translateX(2px); }
.agency-mark {
  width: 128px;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.15));
}
.agency-domain {
  border-left: 1px solid rgba(255,255,255,.14);
  padding-left: 13px;
  color: #b6c5d8;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -.01em;
  transition: color .2s ease, transform .2s ease;
}
.agency-domain span { color: #7ad7ff; margin-left: 2px; }
.code-body {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(122,215,255,.25) transparent;
  height: 312px;
  min-height: 312px;
  max-height: 312px;
}
.terminal-body {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(122,215,255,.24) transparent;
  height: 170px;
  min-height: 170px;
  max-height: 170px;
}
.token-number {color: #d2a8ff;}
.token-comment {color:#74899f;}
.token-property {color:#80bfff;}
.terminal-ok {color:#88ffcc;}
.terminal-muted {color:#8297aa;}
.terminal-warn {color:#ffd580;}
@media (max-width: 700px) {
 .client-logo-wrap {max-width: min(270px, 72vw); min-height: 63px; padding: 10px 13px; }
 .client-logo { max-height: 57px; max-width: min(242px, 65vw); }
 .agency-signature {min-width: min(295px,100%);}
 .agency-mark {width: 120px;}
 .agency-domain {font-size: 12px;}
 .code-body {height: 264px; min-height: 264px; max-height: 264px;}
 .terminal-body {height: 155px; min-height: 155px; max-height: 155px;}
}
@media (prefers-reduced-motion: reduce) {
 .hero-card::before,.ambient,.status-dot { animation: none !important; }
 .agency-domain {transition:none;}
}


/* V5 — cinematic but restrained activity system */
.hero-card {
  --light-x: 75%;
  --light-y: 40%;
  transition: box-shadow .35s ease;
}
.hero-card::after {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(430px circle at var(--light-x) var(--light-y), rgba(115,207,255,.065), transparent 70%);
  opacity: .9;
}
.hero-top, .hero-content {z-index: 2; position: relative;}
.copy {animation: riseIn 800ms cubic-bezier(.2,.75,.25,1) both;}
.visual-stack {position:relative;animation: riseIn 1050ms 120ms cubic-bezier(.2,.75,.25,1) both;}
.hero-top {animation: riseIn 650ms ease both;}
@keyframes riseIn {
 from {opacity:0;transform:translateY(16px)}
 to {opacity:1;transform:translateY(0)}
}
/* Window itself grows or contracts with typed lines; no jumping from fixed-height editor to another. */
.code-window {position:relative;transition:border-color .5s ease,box-shadow .6s ease;}
.code-window::before {
  content:'';
  position:absolute;
  left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,#7ad7ff 40%,transparent);
  opacity:0;
  transition:opacity .4s;
  pointer-events:none;
  z-index:3;
}
.code-window[data-state=writing]::before {opacity:.8;}
.code-window.is-checking::after {
  content:'';position:absolute;left:0;right:0;height:2px;top:18%;
  background:linear-gradient(90deg,transparent,rgba(126,224,255,.7),transparent);
  box-shadow:0 0 25px rgba(126,224,255,.45);
  animation: auditSweep .7s ease-in-out 1;
  pointer-events:none;
}
.code-window.is-finished {border-color:rgba(136,255,204,.25);box-shadow:0 16px 52px rgba(0,0,0,.25),inset 0 0 25px rgba(136,255,204,.025);}
.code-window.is-switching {border-color:rgba(122,215,255,.20);}
@keyframes auditSweep {from {top:15%;opacity:0} 15%{opacity:1} to {top:85%;opacity:0}}
.window-bar {gap:7px;min-height:54px;}
.window-bar strong {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;letter-spacing:.02em;}
.editor-status {margin-left:auto;display:inline-flex;gap:7px;align-items:center;color:#8ba9c0;font:600 10px/1 'JetBrains Mono',monospace;letter-spacing:.07em;white-space:nowrap;}
.editor-status i {width:6px;height:6px;border-radius:50%;background:#7ad7ff;box-shadow:0 0 10px rgba(122,215,255,.35);}
.code-window[data-state=writing] .editor-status i {animation:pulse 1.6s infinite;}
.code-window[data-state=ready] .editor-status {color:#88ffcc;}
.code-window[data-state=ready] .editor-status i {background:#88ffcc;}
.code-body {
  height:78px;
  min-height:78px;
  max-height:372px;
  overflow-y:auto;
  overflow-x:auto;
  white-space:pre;
  line-height:24px;
  padding:13px 21px 17px;
  transition: height 440ms cubic-bezier(.22,.81,.22,1);
  scrollbar-width:thin;
  scrollbar-color:rgba(122,215,255,.22) transparent;
}
.code-body .line {min-height:24px;white-space:pre;}
.code-body .current-line {background:linear-gradient(90deg,rgba(122,215,255,.05),transparent 75%);animation:lineAppear .24s ease both;}
@keyframes lineAppear {from {opacity:.4;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}
.editor-footer {
  min-height:30px;
  display:flex;
  align-items:center;
  gap:9px;
  border-top:1px solid rgba(255,255,255,.055);
  padding:7px 16px;
  font:500 10px/1 'JetBrains Mono',monospace;
  color:#8da4b6;
  letter-spacing:.04em;
}
.editor-footer-dot{width:5px;height:5px;border-radius:50%;background:#7ad7ff;box-shadow:0 0 8px #7ad7ff60;}
.editor-footer-right{margin-left:auto;opacity:.7}
.terminal {position:relative;}
.terminal-activity{display:inline-block;width:5px;height:5px;border-radius:50%;background:#88ffcc;margin-right:8px;box-shadow:0 0 12px rgba(136,255,204,.5);animation:glowBreath 2.6s ease-in-out infinite;}
@keyframes glowBreath {50% {opacity:.4;box-shadow:0 0 2px rgba(136,255,204,.2)}}
.terminal-body {
  height:147px;
  min-height:147px;
  max-height:147px;
  overflow-y:auto;
  padding:15px 18px;
  font:500 11px/1.8 'JetBrains Mono',monospace;
}
.terminal-entry {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:terminalArrive .3s ease both;}
@keyframes terminalArrive {from {opacity:0;transform:translateY(5px)} to {opacity:1;transform:translateY(0)}}
.terminal-message {color:#bdcedd;}
.terminal-ok .terminal-message {color:#88ffcc;}
.build-track {padding:12px 18px 14px;border-top:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.012);}
.build-track-head {display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;color:#899aad;font-size:11px;letter-spacing:.02em;}
.build-percentage {font:600 11px/1 'JetBrains Mono',monospace;color:#91dfff;}
.build-track-line {height:3px;width:100%;border-radius:999px;background:rgba(255,255,255,.09);position:relative;overflow:hidden;}
.build-track-line>span {position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#4c9bc6,#7ad7ff,#88ffcc);border-radius:inherit;box-shadow:0 0 14px rgba(122,215,255,.4);transition:width 350ms cubic-bezier(.22,.82,.23,1);}
.build-progress-glow {position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.2) 50%,transparent 65%);transform:translateX(-140%);animation:progressGlint 3.4s linear infinite;}
@keyframes progressGlint {to {transform:translateX(140%)}}
@media (max-width:700px) {
 .code-body {max-height:298px;min-height:78px;height:78px;font-size:11px;line-height:22px;padding:11px 13px 15px;}
 .code-body .line {min-height:22px;}
 .terminal-body {height:135px;min-height:135px;max-height:135px;font-size:10px;padding:12px 13px;}
 .window-bar strong{font-size:10px;}
 .editor-status{font-size:9px;}
 .editor-footer-right{font-size:9px;}
 .build-track{padding:11px 14px 13px;}
}
@media (prefers-reduced-motion: reduce) {
 .copy,.visual-stack,.hero-top,.code-window.is-checking::after,.terminal-activity,.build-progress-glow {animation:none!important;}
 .code-body,.code-window,.hero-card {transition:none!important;}
 .hero-card::after{display:none;}
}