/* ============================================================
   666 Website Services — global stylesheet
   ============================================================ */

:root {
  --bg: #07070a;
  --bg-soft: #0d0e13;
  --bg-card: #101218;
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.16);
  --ink: #f4f4f6;
  --ink-dim: #a7a8b2;
  --ink-mute: #6a6b76;
  --red: #ff2e4d;
  --red-deep: #c8112f;
  --red-glow: #ff4d6a;
  --cyan: #5cf0ff;
  --amber: #ffb547;
  --green: #38e29a;
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-cn: "Noto Sans SC", "Manrope", sans-serif;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --max: 1320px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--red); color: #fff; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

/* page atmosphere */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,46,77,0.12), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(92,240,255,0.06), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

main, header, footer, section { position: relative; z-index: 1; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; }

/* ===== type ===== */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.mono { font-family: var(--font-mono); letter-spacing: 0; }
.cn { font-family: var(--font-cn); }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.kicker .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 10px var(--red);
}
.kicker .bar { width: 24px; height: 1px; background: var(--line-strong); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.section-title {
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.02;
  font-weight: 600;
}
.section-title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--red), var(--red-glow) 60%, #ffb09a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--ink-dim);
  max-width: 60ch;
}

/* ===== buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  border: 1px solid var(--line-strong);
  transition: transform .25s, background .25s, border-color .25s, box-shadow .25s;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.btn .ico { width: 16px; height: 16px; transition: transform .25s; }
.btn:hover { transform: translateY(-2px); }
.btn:hover .ico { transform: translateX(3px); }

.btn-primary {
  background: linear-gradient(180deg, var(--red), var(--red-deep));
  border-color: transparent;
  box-shadow: 0 10px 24px -10px rgba(255,46,77,0.6), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary:hover { box-shadow: 0 18px 40px -14px rgba(255,46,77,0.8), inset 0 1px 0 rgba(255,255,255,0.22); }

.btn-ghost {
  background: rgba(255,255,255,0.03);
  border-color: transparent;
  isolation: isolate;
}
/* faint static rail so the border still reads when the bolt is on the far side */
.btn-ghost::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--line-strong);
  pointer-events: none;
  z-index: -2;
}
/* warm conic gradient that sweeps around the pill */
.btn-ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: conic-gradient(
    from var(--btg-angle, 0deg),
    transparent 0deg,
    transparent 215deg,
    rgba(255,46,77,0.95) 290deg,
    #ff9d6a 320deg,
    rgba(255,77,106,0.9) 340deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
  animation: btg-spin 3.4s linear infinite;
}
.btn-ghost > * { position: relative; z-index: 1; }
.btn-ghost:hover { background: rgba(255,255,255,0.06); }
.btn-ghost:hover::before { animation-duration: 1.8s; }

@property --btg-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes btg-spin {
  to { --btg-angle: 360deg; }
}
/* fallback: rotate the whole gradient layer for browsers without @property */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .btn-ghost::before { animation: btg-rotate 3.4s linear infinite; }
}
@keyframes btg-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-ghost::before { animation: none; }
}

/* ===== nav ===== */
.nav {
  position: fixed;
  top: 16px;
  left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.nav-inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 18px;
  background: rgba(11,11,15,0.62);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: background .3s, border-color .3s, transform .3s;
}
.nav.scrolled .nav-inner {
  background: rgba(11,11,15,0.85);
  border-color: var(--line-strong);
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  padding-right: 14px;
  border-right: 1px solid var(--line);
  margin-right: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.nav-logo .mark {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--red), #ff7755);
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.04em;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 8px 20px -6px rgba(255,46,77,0.6);
}
.nav-logo img { background: transparent; }
.nav-links { display: flex; gap: 2px; }
.nav-link {
  padding: 8px 14px;
  font-size: 14px;
  color: var(--ink-dim);
  border-radius: 999px;
  transition: color .2s, background .2s;
}
.nav-link:hover { color: var(--ink); background: rgba(255,255,255,0.05); }

/* ===== Services dropdown ===== */
.nav-dd-wrap {
  position: relative;
  display: inline-flex;
}
.nav-link-dd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-link-dd .chev {
  width: 9px; height: 6px;
  opacity: 0.7;
  transition: transform .25s cubic-bezier(.16,.84,.24,1), opacity .2s;
}
.nav-dd-wrap.is-open .nav-link-dd { color: var(--ink); background: rgba(255,255,255,0.05); }
.nav-dd-wrap.is-open .nav-link-dd .chev { transform: rotate(180deg); opacity: 1; }

.nav-dd {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px) scale(0.985);
  transform-origin: top center;
  width: 360px;
  padding: 10px 10px 10px;
  background: rgba(11,11,15,0.92);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  box-shadow:
    0 24px 60px -20px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.03),
    0 0 36px -16px rgba(255,46,77,0.35);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity .26s cubic-bezier(.16,.84,.24,1),
    transform .32s cubic-bezier(.16,.84,.24,1),
    visibility 0s linear .32s;
  z-index: 60;
}
.nav-dd-wrap.is-open .nav-dd {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition:
    opacity .26s cubic-bezier(.16,.84,.24,1),
    transform .32s cubic-bezier(.16,.84,.24,1),
    visibility 0s;
}
/* invisible hover bridge so the cursor doesn't leak through the gap */
.nav-dd-wrap::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  height: 14px;
  pointer-events: none;
}
.nav-dd-wrap.is-open::after { pointer-events: auto; }

.nav-dd-arrow {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: rgba(11,11,15,0.92);
  border-left: 1px solid var(--line-strong);
  border-top: 1px solid var(--line-strong);
  border-top-left-radius: 3px;
}

.nav-dd-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.nav-dd-head .cn {
  font-family: var(--font-mono);
  color: var(--ink-mute);
  letter-spacing: 0.14em;
  font-size: 9.5px;
}

.nav-dd-item {
  display: grid;
  grid-template-columns: 36px 1fr 22px;
  gap: 12px;
  align-items: center;
  padding: 12px 12px;
  border-radius: 14px;
  color: var(--ink-dim);
  position: relative;
  transition: background .22s ease, color .22s ease, transform .25s cubic-bezier(.16,.84,.24,1);
  opacity: 0;
  transform: translateY(6px);
  animation: navDdItem .42s cubic-bezier(.16,.84,.24,1) forwards;
  animation-delay: calc(0.08s + var(--i, 0) * 0.07s);
}
.nav-dd-wrap:not(.is-open) .nav-dd-item { animation: none; opacity: 0; }
@keyframes navDdItem {
  to { opacity: 1; transform: translateY(0); }
}
.nav-dd-item:hover {
  background: linear-gradient(180deg, rgba(255,46,77,0.10), rgba(255,46,77,0.04));
  color: var(--ink);
}
.nav-dd-item .ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, rgba(255,46,77,0.18), rgba(255,46,77,0.04));
  border: 1px solid rgba(255,46,77,0.22);
  color: var(--red-glow);
  flex-shrink: 0;
  transition: transform .25s cubic-bezier(.16,.84,.24,1), background .25s, border-color .25s;
}
.nav-dd-item:hover .ic {
  background: linear-gradient(160deg, rgba(255,46,77,0.32), rgba(255,46,77,0.10));
  border-color: rgba(255,46,77,0.45);
  transform: scale(1.04);
}
.nav-dd-item .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-dd-item .t {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.012em;
  display: inline-flex; align-items: baseline; gap: 6px;
}
.nav-dd-item .t .cn {
  font-family: var(--font-cn);
  font-weight: 400;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0;
}
.nav-dd-item .d {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.4;
}
.nav-dd-item .arr {
  display: grid; place-items: center;
  color: var(--ink-mute);
  transition: color .22s, transform .25s cubic-bezier(.16,.84,.24,1);
}
.nav-dd-item:hover .arr {
  color: var(--red);
  transform: translate(3px, -3px);
}

.nav-dd-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  margin-top: 6px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-radius: 10px;
  transition: background .22s, color .22s;
}
.nav-dd-foot:hover { background: rgba(255,255,255,0.04); color: var(--red); }
.nav-dd-foot svg { transition: transform .25s; }
.nav-dd-foot:hover svg { transform: translateX(3px); }

/* ===== Mobile services accordion ===== */
.mobile-svc {
  display: flex;
  flex-direction: column;
}
.mobile-svc-trigger {
  appearance: none;
  background: transparent;
  border: 0;
  text-align: left;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.mobile-svc-trigger > span { display: inline-flex; align-items: baseline; gap: 10px; font-size: 22px; font-family: var(--font-display); font-weight: 500; }
.mobile-svc-trigger .cn { font-family: var(--font-cn); font-size: 13px; color: var(--ink-mute); font-weight: 400; }
.mobile-svc-trigger .chev {
  width: 14px; height: 9px;
  color: var(--ink-mute);
  transition: transform .3s cubic-bezier(.16,.84,.24,1);
}
.mobile-svc.is-open .mobile-svc-trigger .chev { transform: rotate(180deg); color: var(--red); }

/* Accordion container — uses max-height so multiple children stack correctly */
.mobile-svc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  transition: max-height .4s cubic-bezier(.16,.84,.24,1),
              opacity .25s ease,
              padding .3s ease;
}
.mobile-svc.is-open .mobile-svc-list {
  max-height: 600px;
  opacity: 1;
  padding-top: 4px;
  padding-bottom: 12px;
}

/* Reset the inherited .mobile-menu-inner a styles for sub-items, then restyle */
.mobile-svc-list a {
  display: grid !important;
  grid-template-columns: 36px 1fr !important;
  column-gap: 14px !important;
  align-items: center !important;
  justify-content: start !important;
  padding: 14px 14px !important;
  margin: 0 0 0 12px !important;
  border: 1px solid var(--line) !important;
  border-left: 2px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 12px 12px 0 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: var(--ink) !important;
  background: rgba(255,255,255,0.02);
  transform: none !important;
  opacity: 1 !important;
  transition: background .2s, border-color .2s, transform .2s !important;
}
.mobile-svc-list a:hover {
  background: rgba(255,46,77,0.06);
  border-color: rgba(255,46,77,0.4) !important;
  border-left-color: var(--red) !important;
  padding-left: 14px !important;
}
.mobile-svc-list a .ic {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(255,46,77,0.12);
  border: 1px solid rgba(255,46,77,0.2);
  color: var(--red-glow);
  flex-shrink: 0;
  grid-column: 1;
  grid-row: 1;
}
.mobile-svc-list a .body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
}
.mobile-svc-list a .t {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.2;
}
.mobile-svc-list a .d {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
  .nav-dd, .nav-dd-item, .nav-link-dd .chev,
  .mobile-svc-trigger .chev, .mobile-svc-list { transition-duration: 0s !important; animation: none !important; }
}
.nav-cta {
  margin-left: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  transition: transform .2s, background .2s;
}
.nav-cta:hover { transform: translateY(-1px); background: white; }

/* ===== Language switcher ===== */
.lang-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  margin-right: 8px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  /* Two layers: inner solid (padding-box) + animated conic ring (border-box) */
  background:
    linear-gradient(rgba(11,11,15,0.92), rgba(11,11,15,0.92)) padding-box,
    conic-gradient(
      from var(--lt-angle),
      rgba(255,255,255,0.10) 0deg,
      rgba(255,255,255,0.10) 200deg,
      var(--red) 270deg,
      #ff9d6a 300deg,
      var(--red-glow) 325deg,
      rgba(255,255,255,0.10) 360deg
    ) border-box;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  animation: lt-spin 2.4s linear infinite;
  transition: color .18s, filter .18s;
}
.lang-toggle:hover {
  filter: drop-shadow(0 0 8px rgba(255,46,77,0.45));
  animation-duration: 1.2s;
}
.lang-toggle svg { width: 14px; height: 14px; opacity: 0.85; }

@property --lt-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes lt-spin {
  to { --lt-angle: 360deg; }
}
/* Safari / older browser fallback: pulse the ring instead of rotating */
@supports not (background: conic-gradient(from 0deg in oklch, red, blue)) {
  @keyframes lt-pulse {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(255,46,77,0)); }
    50%      { filter: drop-shadow(0 0 6px rgba(255,46,77,0.6)); }
  }
}

/* Mobile menu language toggle */
.mobile-menu .lang-toggle { margin-right: 0; padding: 10px 16px; font-size: 12px; align-self: flex-start; }

/* Use Chinese font stack when zh is active — keeps Latin chars in display font */
html[lang="zh-CN"] body,
body[data-lang="zh"] {
  font-family: "Manrope", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}
body[data-lang="zh"] h1,
body[data-lang="zh"] h2,
body[data-lang="zh"] h3,
body[data-lang="zh"] h4,
body[data-lang="zh"] .nav-cta,
body[data-lang="zh"] .btn {
  font-family: "Space Grotesk", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

@media (max-width: 820px) {
  .nav-links { display: none; }
}

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 130px 0 90px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
#hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.9;
}
.hero-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 60%, transparent 30%, var(--bg) 95%),
    linear-gradient(180deg, transparent 60%, var(--bg) 100%);
  z-index: 1;
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; width: 100%; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.025);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
  margin-bottom: 28px;
}
.hero-status .pulse {
  position: relative; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
}
.hero-status .pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  background: var(--green); opacity: 0.4;
  animation: pulse 2s infinite ease-out;
}
@keyframes pulse {
  0% { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0; }
}

.hero h1 {
  font-size: clamp(48px, 7.2vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 600;
}
.hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.08em; perspective: 1000px; }
.hero h1 .word {
  display: inline-block;
  transform-origin: 50% 100%;
  will-change: transform, opacity, filter;
  animation: wordRise 1.15s cubic-bezier(.18,.74,.2,1.04) both;
}
/* Stagger across the whole headline, line-by-line + word-by-word */
.hero h1 .line:nth-child(1) .word:nth-child(1) { animation-delay: 0.10s; }
.hero h1 .line:nth-child(1) .word:nth-child(2) { animation-delay: 0.22s; }
.hero h1 .line:nth-child(2) .word:nth-child(1) { animation-delay: 0.36s; }
.hero h1 .line:nth-child(2) .word:nth-child(2) { animation-delay: 0.50s; }

@keyframes wordRise {
  0% {
    opacity: 0;
    transform: translateY(115%) rotateX(-55deg) scale(0.92);
    filter: blur(10px);
  }
  55% {
    opacity: 1;
    filter: blur(0);
  }
  78% {
    transform: translateY(-4%) rotateX(2deg) scale(1.005);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0) scale(1);
    filter: blur(0);
  }
}
/* Legacy keyframe kept for any other consumer */
@keyframes rise { from { opacity: 0; transform: translateY(60%); } to { opacity: 1; transform: translateY(0); } }
@keyframes riseSoftKf { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.hero h1 .accent {
  display: inline-block;
  position: relative;
  background: linear-gradient(120deg, var(--red) 10%, var(--red-glow) 50%, #ffa478 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero h1 .accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 3px;
  background: linear-gradient(90deg, var(--red), transparent);
  transform-origin: left;
  animation: underline 1.4s .8s cubic-bezier(.16,.84,.24,1) forwards;
  transform: scaleX(0);
}
@keyframes underline { to { transform: scaleX(1); } }

.hero-sub {
  margin-top: 26px;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--ink-dim);
  max-width: 56ch;
  position: relative;
  will-change: transform, opacity, filter, letter-spacing, clip-path;
  animation: subEnter 1.4s 1.05s cubic-bezier(.2,.72,.18,1) both;
  clip-path: inset(0 100% 0 0);
}
.hero-sub strong { transition: color .3s ease; }

@keyframes subEnter {
  0% {
    opacity: 0;
    transform: translate3d(-36px, 8px, 0);
    filter: blur(14px);
    letter-spacing: 0.14em;
    clip-path: inset(0 100% 0 0);
  }
  30% {
    opacity: 1;
    filter: blur(6px);
  }
  60% {
    filter: blur(0);
    letter-spacing: 0.02em;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
    letter-spacing: normal;
    clip-path: inset(0 0 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 .word,
  .hero-sub {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    letter-spacing: normal !important;
  }
}

.hero-meta {
  margin-top: 36px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-foot {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.hero-foot .cell .v {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: -0.02em;
}
.hero-foot .cell .l {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 4px;
}
@media (max-width: 720px) {
  .hero-foot { grid-template-columns: repeat(2, 1fr); }
}

/* hero right column — floating tech panels */
.hero-side {
  position: relative;
  height: 560px;
  perspective: 1400px;
  transform-style: preserve-3d;
}
@media (max-width: 1024px) { .hero-side { height: 500px; } }

/* tilt stage — driven by JS via --mx / --my (-1..1) and --ft (time) */
.tilt-stage {
  --mx: 0;
  --my: 0;
  --ft: 0;
  --active: 0;
}
.tilt-stage .panel {
  transform-style: preserve-3d;
  will-change: transform;
}

/* circuit svg background */
.circuit-bg {
  position: absolute;
  inset: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
}
@keyframes dashRun {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -860; }
}

.panel {
  position: absolute;
  background: linear-gradient(180deg, rgba(20,21,28,0.94), rgba(13,14,19,0.94));
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,0.8),
    0 0 0 1px rgba(255,255,255,0.02),
    inset 0 1px 0 rgba(255,255,255,0.06);
  padding: 14px 16px;
  font-size: 12px;
  z-index: 1;
  /* base float + cursor parallax. depth attr controls magnitude */
  --d: 1;
  transform:
    translate3d(
      calc(var(--mx) * var(--d) * 10px),
      calc(var(--my) * var(--d) * 8px + sin(var(--ft) * 1rad) * 4px),
      0
    )
    rotateY(calc(var(--mx) * 6deg))
    rotateX(calc(var(--my) * -5deg));
  transition: box-shadow .3s, border-color .3s;
}
.panel[data-depth="1"]   { --d: 0.6; }
.panel[data-depth="1.5"] { --d: 0.9; }
.panel[data-depth="2"]   { --d: 1.3; }

.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(140px 100px at calc(50% + var(--mx) * 60px) calc(50% + var(--my) * 60px), rgba(255,46,77,0.18), transparent 70%);
  opacity: var(--active, 0);
  transition: opacity .4s;
  pointer-events: none;
  mix-blend-mode: screen;
}
.panel::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,46,77,0.5), transparent 50%, rgba(92,240,255,0.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: calc(var(--active, 0) * 0.7);
  transition: opacity .4s;
  pointer-events: none;
}
@keyframes panelIn {
  from { opacity: 0; transform: translate3d(0, 30px, 0) scale(0.96); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* size + position of each panel */
.panel.p-code   { top: 2%;   left: 4%;   width: 78%; min-height: 175px; }
.panel.p-perf   { top: 38%;  right: 0;   width: 58%; }
.panel.p-deploy { bottom: 2%; left: 0;   width: 66%; }

.code-body { min-height: 130px; }
.caret {
  display: inline-block;
  color: var(--red);
  animation: blink 1s steps(1) infinite;
  font-family: var(--font-mono);
  margin-left: 1px;
}
@keyframes blink { 50% { opacity: 0; } }

/* live metric bar */
.metric-bar {
  position: relative;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  margin-top: 12px;
  overflow: hidden;
}
.metric-bar-fill {
  position: absolute; inset: 0;
  width: 99%;
  background: linear-gradient(90deg, var(--green), var(--cyan));
  border-radius: 4px;
}
.metric-bar-shine {
  position: absolute; top: 0; bottom: 0;
  width: 80px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: shineRun 2.2s linear infinite;
  mix-blend-mode: overlay;
}
@keyframes shineRun {
  from { transform: translateX(-100px); }
  to   { transform: translateX(520px); }
}

/* live dot indicator */
.live-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: liveBlink 1.4s ease-in-out infinite;
}
@keyframes liveBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}
.deploy-clock {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--cyan);
  display: flex; align-items: center; gap: 6px;
  letter-spacing: 0.12em;
}
.deploy-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
  margin-left: 8px;
}

/* boot-in animation on first paint */
@keyframes panelBoot {
  from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.96); filter: blur(6px); }
  to   { opacity: 1; filter: blur(0); }
}
.tilt-stage .panel { animation: panelBoot .9s cubic-bezier(.16,.84,.24,1) backwards; }
.tilt-stage .p-code   { animation-delay: .35s; }
.tilt-stage .p-perf   { animation-delay: .55s; }
.tilt-stage .p-deploy { animation-delay: .75s; }

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.panel-head .dots { display: flex; gap: 6px; }
.panel-head .dots span {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--line-strong);
}
.panel-head .dots span:first-child { background: #ff5f56; }
.panel-head .dots span:nth-child(2) { background: #ffbd2e; }
.panel-head .dots span:nth-child(3) { background: #27c93f; }
.panel-head .name {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
}

.code-line {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tok-k { color: #ff8aa0; }
.tok-s { color: #b6f0a0; }
.tok-c { color: var(--ink-mute); }
.tok-f { color: var(--cyan); }
.tok-n { color: #ffd28a; }

.metric-row { display: flex; justify-content: space-between; padding: 4px 0; font-family: var(--font-mono); }
.metric-row .lab { color: var(--ink-mute); }
.metric-row .val { color: var(--ink); }
.metric-row .val .b { color: var(--green); }

.deploy-stage {
  display: flex; gap: 6px; align-items: center;
  font-family: var(--font-mono); font-size: 11px;
  padding: 5px 0;
}
.deploy-stage .ck {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--green); display: grid; place-items: center;
}
.deploy-stage .ck::after { content: "✓"; color: var(--green); font-size: 9px; }
.deploy-stage.running .ck { border-color: var(--cyan); animation: spin 1.2s linear infinite; }
.deploy-stage.running .ck::after { content: ""; }
.deploy-stage.pending { color: var(--ink-mute); }
.deploy-stage.pending .ck { border-color: var(--line-strong); }
.deploy-stage.pending .ck::after { content: ""; }
@keyframes spin { to { transform: rotate(360deg); } }

/* the floating 666 logo mark behind hero */
.hero-mark {
  position: absolute;
  right: -4%;
  top: 50%;
  width: clamp(520px, 60vw, 1100px);
  aspect-ratio: 459 / 225;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  animation: heroMarkDrift 14s ease-in-out infinite;
}
.hero-mark-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.55;
  filter:
    saturate(1.15)
    drop-shadow(0 0 40px rgba(255, 46, 77, 0.35))
    drop-shadow(0 0 100px rgba(40, 80, 255, 0.22));
  animation: heroMarkPulse 5.5s ease-in-out infinite;
}
/* tech rings — wrap around the mark using its own aspect ratio so they sit behind the 6s */
.hero-mark-ring {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
  border-radius: 999px;
}
.hero-mark-ring-1 {
  /* large dashed track behind everything */
  left: 50%; top: 50%;
  width: 92%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-style: dashed;
  border-color: rgba(255, 46, 77, 0.16);
  animation: heroMarkSpin 80s linear infinite;
}
.hero-mark-ring-2 {
  /* inner ring with two satellite nodes */
  left: 50%; top: 50%;
  width: 64%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-color: rgba(92, 240, 255, 0.10);
  animation: heroMarkSpin 120s linear infinite reverse;
}
.hero-mark-ring-2::before,
.hero-mark-ring-2::after {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red, #FF2E4D);
  box-shadow: 0 0 12px rgba(255, 46, 77, 0.9);
}
.hero-mark-ring-2::before { top: -3.5px; left: 50%; transform: translateX(-50%); }
.hero-mark-ring-2::after {
  bottom: -3.5px; right: 12%;
  background: var(--cyan, #5CF0FF);
  box-shadow: 0 0 12px rgba(92, 240, 255, 0.85);
}
.hero-mark-ring-3 {
  /* tiny offset ring upper-right for asymmetry */
  right: 4%;
  top: 18%;
  width: 28%;
  aspect-ratio: 1;
  border-color: rgba(255, 220, 60, 0.10);
  animation: heroMarkSpinSimple 50s linear infinite;
}
/* horizontal scan line crossing the mark */
.hero-mark-scan {
  position: absolute;
  left: 4%; right: 4%;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255, 46, 77, 0)   0%,
    rgba(255, 46, 77, 0.55) 35%,
    rgba(92, 240, 255, 0.55) 65%,
    rgba(92, 240, 255, 0)   100%);
  filter: blur(0.5px);
  animation: heroMarkScan 6s ease-in-out infinite;
}

@keyframes heroMarkDrift {
  0%, 100% { transform: translateY(-50%) translateX(0) scale(1); }
  50%      { transform: translateY(-52%) translateX(-1.2%) scale(1.015); }
}
@keyframes heroMarkPulse {
  0%, 100% { opacity: 0.50; filter: saturate(1.15)
    drop-shadow(0 0 40px rgba(255,46,77,0.35))
    drop-shadow(0 0 100px rgba(40,80,255,0.22)); }
  50%      { opacity: 0.62; filter: saturate(1.25)
    drop-shadow(0 0 56px rgba(255,46,77,0.55))
    drop-shadow(0 0 120px rgba(40,80,255,0.32)); }
}
@keyframes heroMarkSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes heroMarkSpinSimple {
  to { transform: rotate(360deg); }
}
@keyframes heroMarkScan {
  0%   { top: 12%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 88%; opacity: 0; }
}

/* ===== marquee ===== */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.015);
  overflow: hidden;
  padding: 22px 0;
}
.marquee-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-item {
  display: flex; align-items: center; gap: 18px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 500;
  color: var(--ink-dim);
  letter-spacing: -0.01em;
}
.marquee-item .star {
  width: 22px; height: 22px;
  color: var(--red);
  flex-shrink: 0;
}
.marquee-item:hover { color: var(--ink); }

/* ===== sections shared ===== */
.section {
  padding: 130px 0;
  position: relative;
}
.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  margin-bottom: 64px;
}
@media (max-width: 720px) {
  .section-head { grid-template-columns: 1fr; }
}
.section-head .lead { margin-top: 18px; }

/* ===== services ===== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 960px) { .services-grid { grid-template-columns: 1fr; } }

.svc-card {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
    var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 28px 32px;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.16,.84,.24,1), border-color .4s, background .4s;
  isolation: isolate;
}
a.svc-card.is-link { cursor: pointer; }
.svc-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--red), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.svc-card:hover { transform: translateY(-6px); border-color: transparent; background: linear-gradient(180deg, rgba(255,46,77,0.04), rgba(255,255,255,0)) var(--bg-card); }
.svc-card:hover::before { opacity: 1; }

.svc-card .num {
  position: absolute;
  top: 20px; right: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.18em;
}
.svc-icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255,46,77,0.18), rgba(255,46,77,0.04));
  border: 1px solid rgba(255,46,77,0.25);
  display: grid; place-items: center;
  margin-bottom: 24px;
  color: var(--red-glow);
}
.svc-card h3 {
  font-size: 26px;
  margin-bottom: 6px;
}
.svc-card .cn-sub {
  font-family: var(--font-cn);
  color: var(--ink-mute);
  font-size: 14px;
  margin-bottom: 18px;
}
.svc-card p {
  color: var(--ink-dim);
  font-size: 15px;
  margin: 0 0 22px;
}
.svc-card ul {
  list-style: none; padding: 0; margin: 0 0 24px;
  display: grid; gap: 8px;
}
.svc-card li {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px;
  color: var(--ink-dim);
}
.svc-card li svg { color: var(--red); flex-shrink: 0; }

.svc-card .foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
}
.svc-card .arr {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  display: grid; place-items: center;
  transition: background .3s, transform .3s;
}
.svc-card:hover .arr {
  background: var(--red);
  transform: translateX(4px);
}
.svc-card:hover .arr svg { color: white; }

/* ===== stats ===== */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent),
    var(--bg-soft);
}
.stats .stat {
  padding: 36px 28px;
  border-right: 1px solid var(--line);
  position: relative;
}
.stats .stat:last-child { border-right: 0; }
.stats .stat .v {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, 4.5vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff, #9d9eaa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stats .stat .v .sfx { color: var(--red); -webkit-text-fill-color: var(--red); }
.stats .stat .l {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.stats .stat .d {
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-dim);
}
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats .stat:nth-child(2) { border-right: 0; }
  .stats .stat:nth-child(1), .stats .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
}

/* ===== process ===== */
.process-list {
  display: grid;
  gap: 0;
}
.process-row {
  display: grid;
  grid-template-columns: 80px 1fr 1.4fr 200px;
  gap: 32px;
  padding: 36px 0;
  border-top: 1px solid var(--line);
  align-items: center;
  position: relative;
  cursor: default;
  transition: padding .3s;
}
.process-row:last-child { border-bottom: 1px solid var(--line); }
.process-row::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,46,77,0.06), transparent 60%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.process-row:hover { padding-left: 16px; }
.process-row:hover::before { opacity: 1; }
.process-row .n {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--red);
  letter-spacing: 0.14em;
}
.process-row .t {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.process-row .t .cn {
  display: block;
  font-size: 14px;
  color: var(--ink-mute);
  letter-spacing: 0;
  margin-top: 4px;
}
.process-row .d { color: var(--ink-dim); font-size: 15px; }
.process-row .tags {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end;
}
.process-row .tag {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  background: rgba(255,255,255,0.02);
}
@media (max-width: 900px) {
  .process-row { grid-template-columns: 50px 1fr; gap: 14px; }
  .process-row .d, .process-row .tags { grid-column: 2; }
  .process-row .tags { justify-content: flex-start; }
}

/* ===== Our Skills — Apple-style vertical panels ===== */
.section-skills { padding-top: 100px; padding-bottom: 120px; }

.skill-stack {
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin-top: 80px;
}

.skill-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 80px;
  align-items: center;
  padding: 40px 0;
}
.skill-panel.flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.skill-panel.flip .sp-text { order: 2; padding-left: 20px; }
.skill-panel.flip .sp-vis { order: 1; }

.sp-text { padding-right: 20px; }
.sp-n {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.sp-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 22px;
}
.sp-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--ink);
  margin: 0 0 22px;
}
.sp-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--red), var(--red-glow));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sp-desc {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 440px;
  margin: 0;
}

.sp-vis {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
}
.sp-vis:has(.vis-mobile) {
  aspect-ratio: 4 / 6;
  max-height: 680px;
}
.sp-vis:has(.vis-code) {
  aspect-ratio: 4 / 3.6;
}
.sp-vis-inner {
  position: absolute; inset: 0;
  border-radius: 28px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,46,77,0.04), transparent 60%),
    linear-gradient(180deg, #0f1118 0%, #0a0b10 100%);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.6);
}

@media (max-width: 900px) {
  .skill-stack { gap: 60px; margin-top: 60px; }
  .skill-panel, .skill-panel.flip {
    grid-template-columns: 1fr;
    gap: 32px; padding: 0;
  }
  .skill-panel.flip .sp-text { order: 1; padding-left: 0; }
  .skill-panel.flip .sp-vis { order: 2; }
  .sp-text { padding-right: 0; }
  .sp-title { font-size: clamp(34px, 8vw, 48px); }
  .sp-desc { font-size: 17px; }
  .sp-vis { aspect-ratio: 4 / 3.2; }
}

/* ============================================================
   Visual 1 — Analytics
   ============================================================ */
.vis-analytics { position: absolute; inset: 0; padding: 30px 36px 28px; display: block; }
.va-top { position: absolute; top: 28px; left: 36px; z-index: 2; }
.va-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
}
.va-value {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.2vw, 56px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.va-value i { font-style: normal; color: var(--ink-mute); font-size: 0.55em; margin-left: 4px; font-weight: 500; }
.va-delta {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--green); margin-top: 8px;
}
.va-side {
  position: absolute; top: 28px; right: 32px; z-index: 2;
  display: flex; flex-direction: column; gap: 10px;
}
.va-mini {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  min-width: 130px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 8px;
  align-items: center;
}
.va-mini-l {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute);
  grid-column: 1;
}
.va-mini-v {
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  grid-column: 1;
}
.va-mini-v i { font-style: normal; color: var(--ink-mute); font-size: 0.65em; margin-left: 2px; font-weight: 500; }
.va-spark { grid-column: 2; grid-row: 1 / span 2; width: 56px; height: 28px; }
.va-chart {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* ============================================================
   Visual 2 — Mobile (centered phone, single focus)
   ============================================================ */
.vis-mobile {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
  overflow: hidden;
}

/* floating side cards */
.vm-float {
  position: absolute;
  background: rgba(15,17,25,0.92);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 30px -10px rgba(0,0,0,0.5);
  z-index: 3;
  animation: vmFloat 6s ease-in-out infinite;
}
@keyframes vmFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.vm-float-1 {
  top: 12%; left: 4%;
  display: flex; align-items: center; gap: 10px;
  animation-delay: 0s;
}
.vm-float-2 {
  bottom: 18%; left: 6%;
  display: grid; grid-template-columns: auto 1fr; gap: 4px 10px;
  align-items: center;
  animation-delay: 1.5s;
}
.vm-float-3 {
  top: 22%; right: 4%;
  display: flex; flex-direction: column; gap: 2px;
  align-items: flex-start;
  animation-delay: 3s;
}
.vm-f-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.vm-f-meta { display: flex; flex-direction: column; gap: 1px; }
.vm-f-t { font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--ink); }
.vm-f-s { font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute); }
.vm-f-num {
  font-family: var(--font-display); font-size: 24px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.02em; line-height: 1;
  grid-row: 1 / span 2;
  font-variant-numeric: tabular-nums;
}
.vm-f-l {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-mute); line-height: 1.3;
}
.vm-f-spark { grid-column: 1 / span 2; width: 100%; height: 18px; margin-top: 4px; }
.vm-stars {
  display: flex; gap: 1px; color: #ffb547;
  font-size: 11px; line-height: 1;
}
.vm-f-rate {
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.02em; line-height: 1; margin-top: 2px;
}

/* fly-to-cart */
.vm-fly {
  position: absolute;
  left: 50%; top: 60%;
  pointer-events: none; z-index: 4;
}
.vm-fly > div {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 16px rgba(255,46,77,0.7);
  animation: vmFly 1.2s cubic-bezier(0.5, -0.3, 0.6, 0.8) forwards;
}
@keyframes vmFly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(-180px, -160px) scale(0.2); opacity: 0; }
}

.vm-phone {
  width: 296px;
  height: 100%;
  max-height: 640px;
  aspect-ratio: 9 / 19.5;
  background: #050608;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 40px;
  position: relative;
  overflow: hidden;
  z-index: 2;
  box-shadow: 0 30px 60px -15px rgba(0,0,0,0.75),
              inset 0 0 0 1px rgba(255,255,255,0.04),
              inset 0 0 0 4px rgba(0,0,0,0.6);
}
.vm-glow {
  position: absolute; inset: -40%;
  background: radial-gradient(circle, rgba(255,46,77,0.16), transparent 60%);
  z-index: 0; pointer-events: none;
}
.vm-notch {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 28px; background: #000; border-radius: 16px;
  z-index: 5;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04);
}
.vm-screen {
  position: absolute; inset: 0;
  padding: 42px 14px 3px;
  display: flex; flex-direction: column; gap: 6px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,46,77,0.08), transparent 60%),
    linear-gradient(180deg, #0a0a0f 0%, #07070b 60%, #0a0a0f 100%);
}
.vm-bar {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink);
  font-weight: 600; padding: 0 6px;
}
.vm-bar-r { display: inline-flex; align-items: center; gap: 5px; }
.vm-bar-r svg { opacity: 0.95; }
.vm-batt {
  width: 22px; height: 10px; border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.55);
  position: relative; padding: 1.5px;
  display: inline-flex; align-items: center;
}
.vm-batt::after {
  content: ''; position: absolute; right: -3px; top: 50%; transform: translateY(-50%);
  width: 2px; height: 5px; border-radius: 0 1px 1px 0;
  background: rgba(255,255,255,0.55);
}
.vm-batt i {
  display: block; width: 80%; height: 100%; border-radius: 1.5px;
  background: #fff;
}

.vm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px; margin-top: 0;
  flex-shrink: 0;
}
.vm-hi {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 8.5px; color: var(--ink-mute);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.vm-hi svg { color: var(--red); }
.vm-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); margin-top: 2px; letter-spacing: -0.012em; line-height: 1.1; }
.vm-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #2a2c33 0%, #1a1c22 100%);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--ink); letter-spacing: 0.04em;
  flex-shrink: 0;
}

.vm-cats {
  display: flex; gap: 4px; padding: 0 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.vm-cat {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-body); font-size: 11.5px; font-weight: 500;
  padding: 5px 11px; border-radius: 100px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--ink-dim);
  white-space: nowrap;
  transition: all 0.4s ease;
}
.vm-cat i {
  font-style: normal;
  font-family: var(--font-mono); font-size: 8.5px;
  color: var(--ink-mute);
  font-weight: 600;
}
.vm-cat.on {
  background: rgba(255,255,255,0.96); color: #0a0b10;
  border-color: rgba(255,255,255,0.96);
}
.vm-cat.on i { color: rgba(10,11,16,0.55); }

/* Search */
.vm-search {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 11px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 11px;
  color: var(--ink-mute);
  font-family: var(--font-body); font-size: 12px;
  flex-shrink: 0;
}
.vm-search > span:first-of-type { flex: 1; }
.vm-search-kbd {
  font-family: var(--font-mono); font-size: 9px;
  padding: 1px 5px; border-radius: 4px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--ink-dim);
}

/* Featured */
.vm-feat-label {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 4px 0;
  font-family: var(--font-mono); font-size: 8.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
  flex-shrink: 0;
}
.vm-feat-dots { display: inline-flex; gap: 3px; }
.vm-feat-dots i {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  transition: all 0.4s ease;
}
.vm-feat-dots i.on { background: var(--red); width: 14px; border-radius: 100px; }

.vm-feat {
  display: flex; gap: 10px;
  padding: 8px;
  background: linear-gradient(135deg, rgba(255,46,77,0.12) 0%, rgba(255,46,77,0.04) 100%);
  border: 1px solid rgba(255,46,77,0.2);
  border-radius: 14px;
  flex-shrink: 0;
  animation: vmFeatIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
}
@keyframes vmFeatIn {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.vm-feat.added {
  background: linear-gradient(135deg, rgba(56,226,154,0.14) 0%, rgba(56,226,154,0.04) 100%);
  border-color: rgba(56,226,154,0.3);
}
.vm-feat-img {
  position: relative;
  width: 72px; height: 72px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
.vm-feat-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.04);
}
.vm-feat-tag {
  position: absolute; left: 4px; top: 4px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px 2px 5px;
  background: rgba(8,8,12,0.72);
  backdrop-filter: blur(6px);
  border-radius: 100px;
  font-family: var(--font-body); font-size: 8px; font-weight: 600;
  color: #fff; letter-spacing: 0.02em;
}
.vm-feat-tag > span {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 4px rgba(255,46,77,0.8);
}
.vm-feat-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 6px;
}
.vm-feat-top { display: flex; flex-direction: column; gap: 1px; }
.vm-feat-name {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.012em; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vm-feat-cn {
  font-family: var(--font-cn); font-size: 10px;
  color: var(--ink-mute); line-height: 1.2;
}
.vm-feat-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.vm-feat-foot .vm-price-v { color: var(--ink); }
.vm-feat-foot .vm-price-cur { color: var(--ink-mute); }

/* Section header */
.vm-sec {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 4px 4px 0;
  flex-shrink: 0;
}
.vm-sec > span:first-child {
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.012em;
}
.vm-sec-l {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--red); letter-spacing: 0.08em; text-transform: uppercase;
}

/* Menu list */
.vm-list {
  display: flex; flex-direction: column; gap: 5px;
  padding: 0 2px;
  flex: 1 1 0; min-height: 0;
  overflow: hidden;
}
.vm-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px 5px 5px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
}
.vm-item-img {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 9px;
  overflow: hidden;
  flex-shrink: 0;
}
.vm-item-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.04);
}
.vm-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vm-item-name {
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.01em; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vm-item-meta {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 9px;
  color: var(--ink-mute);
}
.vm-item-rate { display: inline-flex; align-items: center; gap: 2px; }
.vm-item-rate b { color: #ffb547; font-weight: 600; font-size: 9px; }
.vm-item-dot { color: var(--ink-dim); }
.vm-item-right {
  display: flex; align-items: center; gap: 7px;
  flex-shrink: 0;
}
.vm-item-price {
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.vm-item-add {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px -3px rgba(255,46,77,0.6);
  flex-shrink: 0;
}

/* Floating cart bar */
.vm-cartbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  margin: 2px 2px 0;
  background: linear-gradient(135deg, #1a0d0f 0%, #14080b 100%);
  border: 1px solid rgba(255,46,77,0.25);
  border-radius: 100px;
  flex-shrink: 0;
  box-shadow: 0 6px 16px -6px rgba(255,46,77,0.4);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.vm-cartbar.pulse {
  border-color: rgba(56,226,154,0.35);
  box-shadow: 0 6px 16px -6px rgba(56,226,154,0.4);
}
.vm-cartbar-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vm-cartbar-icon {
  position: relative;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.vm-cartbar-c {
  position: absolute; top: -3px; right: -3px;
  min-width: 12px; height: 12px; padding: 0 3px;
  background: #fff; color: #0a0b10;
  border-radius: 100px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 8px; font-weight: 700;
  border: 1.5px solid #1a0d0f;
}
.vm-cartbar-t { font-family: var(--font-display); font-size: 11.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; line-height: 1.1; }
.vm-cartbar-s { font-family: var(--font-mono); font-size: 8.5px; color: var(--ink-mute); margin-top: 1px; }
.vm-cartbar-total {
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.012em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Price (shared by featured) */
.vm-price { display: flex; align-items: baseline; gap: 3px; }
.vm-price-cur { font-family: var(--font-mono); font-size: 8.5px; color: rgba(255,255,255,0.6); letter-spacing: 0.08em; text-transform: uppercase; }
.vm-price-v { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.vm-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--red); color: #fff;
  padding: 5px 11px; border-radius: 100px;
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  box-shadow: 0 6px 14px -5px rgba(255,46,77,0.7);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
}
.vm-btn.added { background: var(--green); box-shadow: 0 6px 14px -5px rgba(56,226,154,0.5); }

.vm-tabbar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 5px 4px 1px;
  border-top: 1px solid rgba(255,255,255,0.05);
  margin: 0 -2px;
  flex-shrink: 0;
}
.vm-tb {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  color: var(--ink-mute);
  position: relative;
  padding: 3px 0;
  height: 22px;
}
.vm-tb svg { width: 16px; height: 16px; }
.vm-tb.on { color: var(--ink); }
.vm-tb.on::before {
  content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 2px; border-radius: 2px;
  background: var(--red);
}
.vm-tb-badge {
  position: absolute; top: -3px; right: calc(50% - 15px);
  min-width: 12px; height: 12px; padding: 0 3px;
  background: var(--red); color: #fff;
  border-radius: 100px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 7.5px; font-weight: 700;
  letter-spacing: 0;
  border: 1.5px solid #0a0a0f;
}

.vm-homebar {
  width: 80px; height: 3.5px; border-radius: 100px;
  background: rgba(255,255,255,0.35);
  margin: 2px auto 1px;
  flex-shrink: 0;
}

/* ============================================================
   Visual 3 — Commerce: real product detail page
   ============================================================ */
.vis-commerce {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 22px; padding: 26px;
  align-items: stretch;
  container-type: inline-size;
}
.vc-stage {
  position: relative;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #0f1015 0%, #0a0b10 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  min-height: 0; min-width: 0;
  box-shadow: 0 24px 50px -24px rgba(0,0,0,0.6);
}

/* --- Browser chrome --- */
.vc-chrome {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  flex-shrink: 0;
}
.vc-traffic { display: flex; gap: 5px; }
.vc-traffic i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--line-strong);
}
.vc-traffic i:nth-child(1) { background: #ff5f56; }
.vc-traffic i:nth-child(2) { background: #ffbd2e; }
.vc-traffic i:nth-child(3) { background: #27c93f; }
.vc-url {
  flex: 1;
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-mute);
  letter-spacing: 0;
  overflow: hidden; white-space: nowrap;
}
.vc-url .vc-lock { color: var(--ink-mute); flex-shrink: 0; opacity: 0.8; }
.vc-url .vc-host { color: var(--ink); }
.vc-url i { font-style: normal; opacity: 0.55; }
.vc-bag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px;
  color: var(--ink-dim);
  font-family: var(--font-mono); font-size: 10.5px;
}
.vc-bag .vc-bag-n {
  background: var(--red); color: #fff;
  padding: 1px 6px; border-radius: 100px;
  font-size: 9.5px; font-weight: 600;
}

/* --- Viewer area: thumbs + hero --- */
.vc-viewer {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
}
.vc-thumbs {
  display: flex; flex-direction: column; gap: 8px;
}
.vc-thumb {
  width: 44px; height: 44px;
  border-radius: 8px;
  padding: 2px;
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}
.vc-thumb-fill {
  width: 100%; height: 100%;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.vc-thumb-fill img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.vc-thumb.on {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink) inset;
}
.vc-thumb-more {
  width: 44px; height: 32px;
  display: grid; place-items: center;
  border-radius: 8px;
  border: 1px dashed var(--line-strong);
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-mute);
}

/* --- Hero image area --- */
.vc-hero {
  position: relative;
  min-height: 0;
  border-radius: 10px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(255,46,77,0.06), transparent 70%),
    linear-gradient(180deg, #15161d 0%, #0d0e13 100%);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  animation: vcHero 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes vcHero {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}
.vc-hero-tl {
  position: absolute; top: 10px; left: 10px;
  display: flex; gap: 6px; z-index: 4;
}
.vc-sale {
  background: var(--red); color: #fff;
  padding: 3px 7px; border-radius: 100px;
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 12px -4px rgba(255,46,77,0.6);
}
.vc-new {
  background: rgba(255,255,255,0.08);
  color: var(--ink);
  padding: 3px 7px; border-radius: 100px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.16em;
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
}
.vc-fav {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 100px;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  backdrop-filter: blur(6px);
  z-index: 4;
  cursor: pointer;
}

.vc-product {
  position: relative;
  width: 78%; aspect-ratio: 0.82;
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 24px 48px -16px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  animation: vcSwap 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.vc-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  animation: vcPhotoIn 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes vcPhotoIn {
  0% { opacity: 0; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes vcSwap {
  0% { opacity: 0; transform: translateY(6px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.vc-weave {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  opacity: 0.35;
  z-index: 2;
  pointer-events: none;
}
.vc-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 30% 25%, rgba(255,255,255,0.08), transparent 60%),
    radial-gradient(ellipse 100% 80% at 70% 110%, rgba(0,0,0,0.5), transparent 60%);
  z-index: 3;
  pointer-events: none;
}
.vc-tag-corner {
  position: absolute; top: 12px; left: 12px;
  display: flex; flex-direction: column;
  background: rgba(255,255,255,0.95);
  padding: 5px 9px;
  border-radius: 3px;
  line-height: 1.1;
  font-family: var(--font-mono);
  color: #1a1a1f;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,0.5);
  z-index: 5;
}
.vc-tag-corner i {
  font-style: normal;
  font-size: 7.5px;
  letter-spacing: 0.18em;
  opacity: 0.6;
}
.vc-tag-corner b {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.1em;
}
.vc-photog {
  position: absolute; bottom: 10px; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4em;
  color: rgba(255,255,255,0.7);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  mix-blend-mode: overlay;
  z-index: 4;
  pointer-events: none;
}

.vc-hero-foot {
  position: absolute; bottom: 8px; left: 10px; right: 10px;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 4;
  pointer-events: none;
}
.vc-viewers {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 9.5px; color: var(--ink-dim);
  white-space: nowrap;
}
.vc-viewers i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: liveBlink 1.4s ease-in-out infinite;
}
.vc-imgcount {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-mute);
  padding: 3px 8px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 100px;
  white-space: nowrap;
}

/* fly-in price tag (kept) */
.vc-price-tag {
  position: absolute; top: 60px; right: 18px;
  z-index: 5;
  background: var(--red);
  color: #fff;
  border-radius: 100px;
  padding: 6px 13px;
  display: inline-flex; align-items: baseline; gap: 4px;
  box-shadow: 0 12px 24px -8px rgba(255,46,77,0.6);
  font-family: var(--font-display);
  animation: vcTag 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes vcTag {
  0% { opacity: 0; transform: scale(0.7) translateY(-6px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.vc-price-tag span { font-family: var(--font-mono); font-size: 10px; opacity: 0.85; }
.vc-price-tag b { font-size: 15px; font-weight: 600; }

/* --- Info column --- */
.vc-info {
  display: flex; flex-direction: column;
  align-self: center;
  min-width: 0; min-height: 0;
}
.vc-crumb {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-mute); letter-spacing: 0.04em;
  margin-bottom: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vc-crumb i { font-style: normal; margin: 0 6px; opacity: 0.5; }
.vc-brand {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.22em; color: var(--ink-mute);
  margin-bottom: 4px;
}
.vc-name {
  font-family: var(--font-display); font-size: 26px;
  font-weight: 600; color: var(--ink); letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 8px;
}
.vc-rating {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 12px;
}
.vc-stars { display: inline-flex; gap: 1px; color: #ffb547; }
.vc-rate-n {
  font-family: var(--font-display); font-size: 12px;
  font-weight: 600; color: var(--ink);
  margin-left: 4px;
}
.vc-rev {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-mute);
}
.vc-price-row {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.vc-now {
  font-family: var(--font-display); font-size: 22px;
  font-weight: 700; color: var(--ink);
  letter-spacing: -0.02em;
}
.vc-old {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-mute);
  text-decoration: line-through;
}
.vc-installments {
  width: 100%;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-mute);
  margin-top: 2px;
}

.vc-divider { height: 1px; background: var(--line); margin: 14px 0 10px; }

.vc-section-l {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; color: var(--ink-mute); text-transform: uppercase;
  margin-bottom: 8px;
}
.vc-section-l b {
  color: var(--ink); font-weight: 600; text-transform: none; letter-spacing: 0;
  font-family: var(--font-display); margin-left: 4px;
  font-size: 12px;
}
.vc-size-l { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 6px; }
.vc-size-l span { white-space: nowrap; min-width: 0; }
.vc-size-guide {
  text-transform: none; letter-spacing: 0;
  color: var(--ink-dim);
  font-family: var(--font-mono); font-size: 9.5px;
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}

.vc-swatches { display: flex; gap: 8px; }
.vc-sw {
  width: 24px; height: 24px; border-radius: 50%;
  padding: 2px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  display: grid; place-items: center;
}
.vc-sw span {
  width: 100%; height: 100%; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
  display: block;
}
.vc-sw.on {
  border-color: var(--red);
  transform: scale(1.05);
}

.vc-sizes { display: flex; gap: 6px; flex-wrap: wrap; }
.vc-sz {
  min-width: 36px;
  padding: 7px 6px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-dim);
  font-family: var(--font-mono); font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.05em;
}
.vc-sz:hover:not(.out) { border-color: var(--ink-mute); color: var(--ink); }
.vc-sz.on {
  background: var(--ink); color: var(--bg);
  border-color: var(--ink);
}
.vc-sz.out {
  color: var(--ink-mute);
  border-color: var(--line);
  cursor: not-allowed;
  position: relative;
  opacity: 0.5;
}
.vc-sz.out::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 50%;
  height: 1px; background: currentColor;
  transform: rotate(-12deg);
}

.vc-cta-row {
  display: flex; gap: 8px;
  margin-top: 16px;
  align-items: stretch;
}
.vc-add {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: space-between;
  background: var(--ink); color: var(--bg);
  padding: 11px 16px; border-radius: 100px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: all 0.3s;
  cursor: pointer;
  border: none;
}
.vc-add:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(255,255,255,0.4); }
.vc-add-l { font-size: 13px; white-space: nowrap; }
.vc-add-p {
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: 0.55;
  padding-left: 10px;
  border-left: 1px solid rgba(7,7,10,0.18);
  margin-left: 6px;
  white-space: nowrap;
}
.vc-fav-btn {
  width: 42px;
  display: grid; place-items: center;
  border-radius: 100px;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-dim);
  cursor: pointer;
  transition: all 0.2s;
}
.vc-fav-btn:hover { color: var(--red); border-color: var(--red); }

.vc-trust {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.vc-tr {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 9.5px;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}
.vc-tr svg { color: var(--ink-mute); }

.vc-stock {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--green); letter-spacing: 0.04em;
  margin-top: 10px;
  white-space: nowrap;
}
.vc-pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(56,226,154,0.5);
  animation: livepulse 1.8s ease-out infinite;
}

/* Keep price + rating from wrapping at narrow widths */
.vc-now, .vc-old, .vc-rev, .vc-rate-n, .vc-installments { white-space: nowrap; }

/* ============================================================
   Compact mode — when the panel container is narrow,
   drop nice-to-haves and shrink so a real PDP still fits
   ============================================================ */
@container (max-width: 560px) {
  .vis-commerce { padding: 14px; gap: 12px; }
  .vc-crumb,
  .vc-installments,
  .vc-trust,
  .vc-size-guide,
  .vc-fav-btn,
  .vc-thumb-more,
  .vc-rev,
  .vc-new,
  .vc-photog,
  .vc-divider { display: none; }

  .vc-chrome { padding: 7px 9px; gap: 7px; }
  .vc-url { font-size: 9px; padding: 4px 7px; }
  .vc-bag { padding: 3px 6px; font-size: 9px; }
  .vc-bag .vc-bag-n { font-size: 8.5px; padding: 1px 5px; }

  .vc-viewer { grid-template-columns: 30px 1fr; gap: 8px; padding: 10px; }
  .vc-thumb { width: 30px; height: 30px; border-radius: 6px; }
  .vc-thumbs { gap: 5px; }
  .vc-product { width: 86%; }

  .vc-sale { font-size: 9px; padding: 2px 6px; }
  .vc-fav { width: 22px; height: 22px; }
  .vc-tag-corner i { font-size: 6.5px; }
  .vc-tag-corner b { font-size: 8.5px; }
  .vc-viewers { font-size: 8.5px; padding: 2px 6px; }
  .vc-imgcount { font-size: 8.5px; padding: 2px 6px; }
  .vc-hero-foot { left: 8px; right: 8px; bottom: 6px; }

  .vc-price-tag { top: 44px; right: 12px; padding: 4px 10px; }
  .vc-price-tag span { font-size: 9px; }
  .vc-price-tag b { font-size: 13px; }

  .vc-brand { font-size: 9px; letter-spacing: 0.18em; margin-bottom: 2px; }
  .vc-name { font-size: 17px; line-height: 1.05; margin-bottom: 6px; }
  .vc-rating { margin-bottom: 8px; gap: 4px; }
  .vc-rate-n { font-size: 11px; margin-left: 2px; }
  .vc-stars svg { width: 9px; height: 9px; }
  .vc-now { font-size: 17px; }
  .vc-old { font-size: 11px; }
  .vc-price-row { gap: 8px; margin-bottom: 0; }

  .vc-section-l { font-size: 9px; margin-bottom: 5px; letter-spacing: 0.12em; }
  .vc-section-l b { font-size: 11px; }
  .vc-size-l { margin-top: 10px; }

  .vc-swatches { gap: 6px; }
  .vc-sw { width: 20px; height: 20px; padding: 1px; }

  .vc-sizes { gap: 4px; }
  .vc-sz { min-width: 26px; padding: 5px 4px; font-size: 10px; border-radius: 5px; }

  .vc-cta-row { margin-top: 12px; gap: 6px; }
  .vc-add { padding: 9px 14px; justify-content: center; }
  .vc-add-l { font-size: 12px; }
  .vc-add-p { display: none; }
  .vc-tag-corner { display: none; }

  .vc-stock { font-size: 9px; margin-top: 8px; }
}

/* Very narrow — stack the viewer's thumb rail above; hide things that collide */
@container (max-width: 420px) {
  .vc-viewer { grid-template-columns: 1fr; grid-template-rows: 32px 1fr; }
  .vc-thumbs { flex-direction: row; gap: 5px; }
  .vc-thumb { width: 32px; height: 32px; }
  .vc-name { font-size: 15px; }
  .vc-price-tag,
  .vc-viewers,
  .vc-imgcount { display: none; }
  .vc-sale, .vc-fav { top: 8px; }
  .vc-fav { right: 8px; }
  .vc-hero-tl { left: 8px; }
}

/* ============================================================
   Visual 4 — Calendar (calm grid filling)
   ============================================================ */
.vis-calendar {
  position: absolute; inset: 0;
  padding: 36px 40px;
  display: flex; flex-direction: column; gap: 14px;
}
.vk-head {
  display: flex; justify-content: space-between; align-items: flex-start;
}
.vk-month {
  font-family: var(--font-display); font-size: 22px;
  font-weight: 600; color: var(--ink); letter-spacing: -0.02em;
}
.vk-sub {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-mute); letter-spacing: 0.14em; text-transform: uppercase;
  margin-top: 3px;
}
.vk-util {
  display: flex; align-items: center; gap: 10px;
}
.vk-util-r {
  position: relative; width: 44px; height: 44px;
}
.vk-util-r svg { width: 100%; height: 100%; }
.vk-util-r span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.02em;
}
.vk-util-r span i { font-style: normal; color: var(--ink-mute); font-size: 0.7em; }
.vk-util-l {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-mute); letter-spacing: 0.14em; text-transform: uppercase;
}
.vk-dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; color: var(--ink-mute);
  text-align: center;
}
.vk-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  flex: 1; min-height: 0;
}
.vk-cell {
  position: relative;
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.04);
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: 6px 8px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-mute);
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.vk-cell.f {
  background: rgba(255,46,77,0.1);
  border-color: rgba(255,46,77,0.25);
  color: var(--ink-dim);
}
.vk-cell.s {
  background: var(--red); color: #fff;
  border-color: var(--red);
  box-shadow: 0 12px 24px -8px rgba(255,46,77,0.6);
  transform: scale(1.06);
  z-index: 2;
}
.vk-cell i {
  position: absolute; bottom: 8px; left: 8px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--red);
  font-style: normal;
}
.vk-cell.s i { background: #fff; }

.vk-slots {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  margin-top: 4px;
}
.vk-slot {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.vk-slot.on {
  background: rgba(255,46,77,0.1);
  border-color: rgba(255,46,77,0.3);
}
.vk-t {
  font-family: var(--font-display); font-size: 14px;
  font-weight: 600; color: var(--ink); letter-spacing: -0.01em;
}
.vk-l {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.1em; color: var(--ink-mute); text-transform: uppercase;
}
.vk-slot.on .vk-l { color: var(--red); }

/* ============================================================
   Visual 5 — DevOps (production deploy dashboard)
   ============================================================ */
.vis-code {
  position: absolute; inset: 0;
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 10px;
  font-variant-numeric: tabular-nums;
  min-height: 0;
}

/* Header — status + branch pill + version */
.vd-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.vd-status { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vd-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.vd-dot.red {
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(255,46,77,0.5);
  animation: livepulse 1.8s ease-out infinite;
}
.vd-dot.green {
  background: var(--green);
  box-shadow: 0 0 12px rgba(56,226,154,0.5);
}
@keyframes livepulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,46,77,0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(255,46,77,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,46,77,0); }
}
.vd-state {
  font-family: var(--font-display); font-size: 18px;
  font-weight: 600; color: var(--ink); letter-spacing: -0.02em;
  flex-shrink: 0;
}
.vd-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(255,255,255,0.02);
  font-family: var(--font-mono); font-size: 9.5px;
  color: var(--ink-dim);
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 1; min-width: 0;
  overflow: hidden;
}
.vd-pill-icon { display: inline-flex; color: var(--ink-mute); flex-shrink: 0; }
.vd-pill-sep  { color: var(--ink-mute); opacity: 0.5; flex-shrink: 0; }
.vd-pill-from {
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis;
}
.vd-rel {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 9.5px;
  color: var(--ink-mute); letter-spacing: 0.02em;
  flex-shrink: 0;
  white-space: nowrap;
}
.vd-rel-hash { color: var(--ink); }
.vd-rel-sep  { opacity: 0.45; }

/* Commit message line */
.vd-commit {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 7px;
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.vd-commit-msg {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink); letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.vd-commit-by {
  font-family: var(--font-mono); font-size: 9.5px;
  color: var(--ink-mute);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Body — pipeline + terminal */
.vd-body {
  flex: 1 1 0;
  min-height: 0;
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 10px;
  overflow: hidden;
}

/* Pipeline */
.vd-pipe {
  display: flex; flex-direction: column;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.014);
  min-height: 0;
  overflow: hidden;
}
.vd-pipe-row {
  position: relative;
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 2px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-mute);
  letter-spacing: 0;
  transition: color 0.3s;
  min-width: 0;
}
.vd-pipe-row + .vd-pipe-row { border-top: 1px dashed rgba(255,255,255,0.045); }
.vd-pipe-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  color: var(--ink-mute);
}
.vd-pipe-o {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.5;
}
.vd-pipe-l { color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vd-pipe-d {
  color: var(--ink-mute); opacity: 0.7;
  font-size: 9.5px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.vd-pipe-row.act  { color: var(--ink); }
.vd-pipe-row.act .vd-pipe-i { color: var(--red); }
.vd-pipe-row.act .vd-pipe-d { color: var(--red); opacity: 1; }
.vd-pipe-row.done { color: var(--ink-dim); }
.vd-pipe-row.done .vd-pipe-i { color: var(--green); }
.vd-pipe-bar {
  grid-column: 2 / 4;
  display: block;
  height: 2px;
  margin-top: 2px;
  border-radius: 100px;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
}
.vd-pipe-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--red), var(--red-glow));
  border-radius: 100px;
  transition: width 0.18s linear;
}
.vd-spin {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,46,77,0.22);
  border-top-color: var(--red);
  animation: vd-spin 0.7s linear infinite;
}
@keyframes vd-spin { to { transform: rotate(360deg); } }

/* Terminal */
.vd-term {
  display: flex; flex-direction: column;
  border-radius: 10px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.25));
  overflow: hidden;
  min-height: 0;
}
.vd-term-head {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.018);
  flex-shrink: 0;
}
.vd-term-dots { display: inline-flex; gap: 3px; }
.vd-term-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.14);
}
.vd-term-dots i:first-child { background: rgba(255,46,77,0.55); }
.vd-term-title {
  font-family: var(--font-mono); font-size: 9.5px;
  color: var(--ink-mute); letter-spacing: 0.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vd-term-body {
  flex: 1 1 0; min-height: 0;
  padding: 8px 10px;
  overflow: hidden;
  font-family: var(--font-mono); font-size: 10px;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--ink-dim);
}
.vd-log {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: vd-log-in 0.25s ease-out;
}
@keyframes vd-log-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: none; }
}
.vd-log.cmd   { color: var(--ink); }
.vd-log.ok    { color: var(--green); }
.vd-log.mute  { color: var(--ink-mute); }
.vd-log.deploy{ color: var(--red-glow); }
.vd-log.cursor {
  color: var(--red);
  animation: vd-blink 0.9s steps(2, start) infinite;
}
@keyframes vd-blink { 50% { opacity: 0; } }

/* Overall progress */
.vd-prog { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.vd-prog-bar {
  flex: 1; height: 3px; border-radius: 100px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.vd-prog-bar > div {
  height: 100%;
  background: linear-gradient(90deg, var(--red), var(--red-glow));
  border-radius: 100px;
  transition: width 0.4s ease;
  box-shadow: 0 0 8px rgba(255,77,106,0.4);
}
.vd-prog-n {
  font-family: var(--font-display); font-size: 15px;
  font-weight: 600; color: var(--ink); letter-spacing: -0.02em;
  min-width: 44px; text-align: right;
}
.vd-prog-n i { font-style: normal; color: var(--ink-mute); font-size: 0.6em; margin-left: 2px; font-weight: 500; }

/* Region rollout strip */
.vd-regions {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  flex-shrink: 0;
}
.vd-region {
  padding: 6px 7px 7px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.014);
  transition: all 0.4s;
  min-width: 0;
}
.vd-region.rolling {
  border-color: rgba(255,46,77,0.35);
  background: rgba(255,46,77,0.06);
}
.vd-region.live {
  border-color: rgba(56,226,154,0.25);
}
.vd-region-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 4px;
}
.vd-region-loc {
  font-family: var(--font-mono); font-size: 10px;
  font-weight: 600; color: var(--ink);
  letter-spacing: 0.06em;
}
.vd-region-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  flex-shrink: 0;
}
.vd-region-dot.rolling {
  background: var(--red);
  animation: livepulse 1.4s ease-out infinite;
}
.vd-region-dot.live {
  background: var(--green);
  box-shadow: 0 0 6px rgba(56,226,154,0.6);
}
.vd-region-city {
  font-family: var(--font-mono); font-size: 8.5px;
  color: var(--ink-mute);
  margin-top: 1px;
  letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vd-region-meta {
  margin-top: 4px;
  min-height: 10px;
}
.vd-region-state {
  font-family: var(--font-mono); font-size: 8.5px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.vd-region-state.live { color: var(--green); }
.vd-region-roll {
  display: flex; align-items: center; gap: 5px;
}
.vd-region-rollbar {
  flex: 1; height: 2px; border-radius: 100px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.vd-region-rollbar > span {
  display: block; height: 100%;
  background: var(--red);
  transition: width 0.2s linear;
}
.vd-region-pct {
  font-family: var(--font-mono); font-size: 8.5px;
  color: var(--red-glow);
  min-width: 18px; text-align: right;
}

@media (max-width: 900px) {
  /* === Section 03: Commerce — keep horizontal 2-col so info column stays
     visible; the existing @container queries handle further compactness
     at narrow widths === */
  .vis-commerce {
    grid-template-columns: 1.05fr 1fr;
    gap: 12px;
    padding: 16px;
  }
  .vis-commerce .vc-stage { min-height: 0; }
  .vis-commerce .vc-product { width: 78%; }

  /* === Section 04: Calendar — pack rows to top with explicit row size
     so the appointment slots below the grid don't overlap dates === */
  .sp-vis:has(.vis-calendar) { aspect-ratio: 4 / 4.1; }
  .vis-calendar { padding: 24px 22px 22px; gap: 12px; }
  .vk-grid {
    flex: 0 0 auto;
    align-content: start;
    grid-auto-rows: minmax(38px, 1fr);
    gap: 5px;
  }
  .vk-cell { padding: 5px 7px; font-size: 10.5px; min-height: 38px; }
  .vk-dow { gap: 5px; }
  .vk-slots { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 0; }
  .vk-slot:nth-child(n+4) { display: none; }
  .vk-slot { padding: 8px 10px; }
  .vk-t { font-size: 13px; }
  .vk-month { font-size: 20px; }

  /* === Section 05: DevOps — taller frame so stacked pipeline + terminal
     have breathing room and rows aren't cut off === */
  .sp-vis:has(.vis-code) { aspect-ratio: 4 / 4.6; }
  .vis-analytics { padding: 28px; }
  .vis-code { padding: 20px 20px 22px; gap: 10px; }
  .vd-state { font-size: 19px; }
  .vd-pill { font-size: 9.5px; padding: 3px 7px; }
  .vd-pill-from { display: none; }
  .vd-commit-by { display: none; }
  .vd-body { grid-template-columns: 1fr; gap: 10px; }
  .vd-pipe { padding: 10px 12px; }
  .vd-pipe-row { font-size: 11px; padding: 5px 2px; }
  .vd-term-body { font-size: 10.5px; line-height: 1.55; }
  .vd-regions { grid-template-columns: repeat(3, 1fr); }
  .vd-regions > .vd-region:nth-child(n+4) { display: none; }

  /* Mobile demo (Visual 2) — reposition for narrow viewports */
  .sp-vis:has(.vis-mobile) {
    aspect-ratio: 4 / 5.4;
    max-height: 640px;
  }
  .vis-mobile { padding: 12px; }
  .vm-phone {
    width: 248px;
    max-height: 520px;
  }
  .vm-screen { padding: 36px 12px 3px; gap: 5px; }
  .vm-name { font-size: 15px; }
  .vm-search { font-size: 11px; padding: 6px 10px; }
  .vm-cat { font-size: 10.5px; padding: 4px 9px; }
  .vm-feat-img { width: 60px; height: 60px; }
  .vm-feat-name { font-size: 13.5px; }
  .vm-item-img { width: 38px; height: 38px; }
  .vm-item-name { font-size: 12px; }
  .vm-cartbar-t { font-size: 11px; }

  /* Floats: scale down, push outward into corners so they don't fight the phone */
  .vm-float {
    padding: 7px 9px;
    transform: scale(0.85);
    transform-origin: top left;
  }
  .vm-float-3 { transform-origin: top right; }
  .vm-float-2 { transform-origin: bottom left; }
  .vm-float-1 { top: 4%; left: 2%; }
  .vm-float-2 { bottom: 8%; left: 2%; }
  .vm-float-3 { top: 10%; right: 2%; }
}

@media (max-width: 560px) {
  /* Very narrow: hide decorative floats — phone takes full focus */
  .vm-float-1, .vm-float-2, .vm-float-3 { display: none; }
  .sp-vis:has(.vis-mobile) {
    aspect-ratio: 4 / 6;
    max-height: 600px;
  }
  .vis-mobile { padding: 0; }
  .vm-phone { width: 240px; max-height: 500px; }
  .vm-screen { padding: 34px 11px 3px; gap: 4px; }

  /* === Calendar on phone — slightly more vertical room === */
  .sp-vis:has(.vis-calendar) { aspect-ratio: 4 / 4.6; }
  .vis-calendar { padding: 20px 16px 18px; gap: 10px; }
  .vk-month { font-size: 18px; }
  .vk-sub { font-size: 9px; }
  .vk-util-r { width: 38px; height: 38px; }
  .vk-util-r span { font-size: 11px; }
  .vk-cell { font-size: 10px; padding: 4px 6px; min-height: 34px; }
  .vk-slot { padding: 7px 8px; }
  .vk-t { font-size: 12px; }
  .vk-l { font-size: 8.5px; }

  /* === DevOps on phone — taller still, tighter padding === */
  .sp-vis:has(.vis-code) { aspect-ratio: 4 / 5.2; }
  .vis-code { padding: 16px 14px 18px; gap: 8px; }
  .vd-rel { font-size: 9px; }
  .vd-commit-msg { font-size: 10.5px; }
  .vd-regions { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .vd-region { padding: 5px 6px 6px; }
  .vd-region-loc { font-size: 9.5px; }
  .vd-region-city { font-size: 8px; }

  /* === Commerce on phone — tighter padding === */
  .vis-commerce { padding: 12px; gap: 10px; }
}

/* ===== pricing ===== */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 960px) { .price-grid { grid-template-columns: 1fr; } }

.price-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
}
.price-card.featured {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,46,77,0.12), transparent 60%),
    linear-gradient(180deg, #14151c, #0e0f15);
  border-color: rgba(255,46,77,0.5);
  box-shadow: 0 30px 70px -30px rgba(255,46,77,0.4);
}
.price-card .ribbon {
  position: absolute;
  top: -1px; right: 18px;
  padding: 6px 12px;
  background: var(--red);
  color: white;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 0 0 8px 8px;
}
.price-card .name { font-size: 22px; font-weight: 600; }
.price-card .cn { font-family: var(--font-cn); color: var(--ink-mute); font-size: 13px; margin-top: 4px; }
.price-card .amt {
  margin-top: 26px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-display);
}
.price-card .amt .cur { font-size: 16px; color: var(--ink-mute); font-weight: 500; }
.price-card .amt .num { font-size: 54px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.price-card .amt .per { color: var(--ink-mute); font-size: 14px; }
.price-card .desc { color: var(--ink-dim); margin-top: 14px; font-size: 14px; min-height: 42px; }
.price-card ul {
  list-style: none; padding: 0; margin: 22px 0 28px;
  display: grid; gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.price-card li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: var(--ink-dim);
}
.price-card li svg { color: var(--red); flex-shrink: 0; margin-top: 3px; }
.price-card .pbtn { margin-top: auto; }

/* ===== testimonials ===== */
.testi-wrap { overflow: hidden; }
.testi-track {
  display: flex; gap: 18px; width: max-content;
  animation: marquee 50s linear infinite;
}
.testi-wrap:hover .testi-track { animation-play-state: paused; }
.testi-card {
  width: 380px;
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  display: flex; flex-direction: column;
  gap: 18px;
}
.testi-card .stars { color: var(--red); display: flex; gap: 2px; }
.testi-card .q { font-size: 16px; line-height: 1.55; color: var(--ink); }
.testi-card .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.testi-card .ava {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--red), #ff8e6a);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; color: white;
}
.testi-card .name { font-weight: 600; font-size: 14px; }
.testi-card .role { font-size: 12px; color: var(--ink-mute); font-family: var(--font-mono); }

/* ===== final CTA ===== */
.cta {
  margin: 0 28px 80px;
  border-radius: 28px;
  padding: 80px 60px;
  background:
    radial-gradient(80% 100% at 0% 0%, rgba(255,46,77,0.25), transparent 60%),
    radial-gradient(80% 100% at 100% 100%, rgba(92,240,255,0.08), transparent 60%),
    linear-gradient(180deg, #14151c, #0a0b10);
  border: 1px solid var(--line-strong);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta::before {
  content: "666";
  position: absolute;
  bottom: -60px; right: -20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 360px;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,46,77,0.18);
  z-index: 0;
  user-select: none;
  pointer-events: none;
}
.cta .inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.cta h2 {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin-bottom: 20px;
}
.cta h2 em { font-style: normal; color: var(--red); }
.cta p { color: var(--ink-dim); font-size: 18px; max-width: 540px; margin: 0 auto 32px; }
.cta .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 720px) { .cta { padding: 56px 24px; } }

/* ===== footer ===== */
footer {
  border-top: 1px solid var(--line);
  padding: 70px 0 30px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 60px;
}
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

.foot-brand .mark-lg {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--red), #ff7755);
  color: white;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 18px;
}
.foot-brand p { color: var(--ink-dim); font-size: 14px; max-width: 32ch; }
.foot-col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 18px;
  font-weight: 500;
}
.foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot-col a { color: var(--ink-dim); font-size: 14px; transition: color .2s; }
.foot-col a:hover { color: var(--ink); }

.foot-bottom {
  border-top: 1px solid var(--line);
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
}

/* big 666 ghost in footer */
.foot-ghost {
  text-align: center;
  font-family: "Bagel Fat One", var(--font-display);
  font-weight: 400;
  font-size: clamp(120px, 24vw, 360px);
  line-height: 0.8;
  letter-spacing: -0.05em;
  margin-top: 60px;
  user-select: none;
}
.foot-ghost span {
  display: inline-block;
  transform: skewX(-8deg);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px currentColor;
  background: linear-gradient(180deg, currentColor, transparent 85%);
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0.45;
}
.foot-ghost .g-r { color: #e8232a; }
.foot-ghost .g-b { color: #2a5fe0; }
.foot-ghost .g-y { color: #ffd400; }

/* generic reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.16,.84,.24,1), transform .9s cubic-bezier(.16,.84,.24,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: .1s; }
.reveal.d2 { transition-delay: .2s; }
.reveal.d3 { transition-delay: .3s; }
.reveal.d4 { transition-delay: .4s; }

/* badge for hero meta tech stack */
.stack-strip {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 30px;
}
.stack-strip .chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}


/* ============================================================
   MOBILE RESPONSIVE LAYER
   Breakpoints: 1024 / 820 / 680 / 480
   ============================================================ */

/* --- Hamburger button (hidden by default) --- */
.nav-burger {
  display: none;
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px;
  margin-left: 4px;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}
.nav-burger:hover { background: rgba(255,255,255,0.06); }
.nav-burger span {
  display: block;
  width: 18px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  margin: 2px 0;
  transition: transform .25s, opacity .2s;
  transform-origin: center;
}
.nav.menu-open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.menu-open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- Mobile slide-down menu (hidden by default) --- */
.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 49;
  background: rgba(7,7,10,0.96);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 90px 24px 40px;
  overflow-y: auto;
}
.mobile-menu.is-open { opacity: 1; pointer-events: auto; }
.mobile-menu-inner {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile-menu-inner a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.01em;
  transition: color .2s, padding .2s;
  transform: translateY(8px);
  opacity: 0;
}
.mobile-menu.is-open .mobile-menu-inner a {
  transform: translateY(0);
  opacity: 1;
  transition: transform .35s cubic-bezier(.16,.84,.24,1), opacity .35s, color .2s;
}
.mobile-menu.is-open .mobile-menu-inner a:nth-child(1) { transition-delay: .04s; }
.mobile-menu.is-open .mobile-menu-inner a:nth-child(2) { transition-delay: .08s; }
.mobile-menu.is-open .mobile-menu-inner a:nth-child(3) { transition-delay: .12s; }
.mobile-menu.is-open .mobile-menu-inner a:nth-child(4) { transition-delay: .16s; }
.mobile-menu.is-open .mobile-menu-inner a:nth-child(5) { transition-delay: .20s; }
.mobile-menu.is-open .mobile-menu-inner a:nth-child(6) { transition-delay: .24s; }
.mobile-menu-inner a:hover { color: var(--red); padding-left: 8px; }
.mobile-menu-inner a .cn {
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--ink-mute);
  font-weight: 400;
  letter-spacing: 0.06em;
}
.mobile-menu-inner .mobile-cta {
  background: var(--red);
  color: white !important;
  border: 0;
  border-radius: 14px;
  padding: 18px 22px;
  margin-top: 24px;
  font-size: 18px;
  font-weight: 600;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 12px 32px -10px rgba(255,46,77,0.5);
}
.mobile-menu-inner .mobile-cta:hover { padding-left: 22px; color: white !important; }
.mobile-menu-foot {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mobile-menu-foot a {
  font-family: var(--font-mono);
  font-size: 13px !important;
  color: var(--ink-dim) !important;
  padding: 10px 0 !important;
  border-bottom: 0 !important;
  font-weight: 400 !important;
  justify-content: flex-start !important;
}
.mobile-menu-foot a:hover { color: var(--red) !important; padding-left: 0 !important; }

/* show hamburger only at narrow widths */
@media (max-width: 820px) {
  .nav-burger { display: inline-flex; }
  .nav-cta { display: none; }
  .nav-inner { padding: 8px 8px 8px 14px; }
  .nav-logo { padding-right: 12px; margin-right: 4px; font-size: 15px; }
  .nav-logo img { height: 30px !important; width: auto !important; max-height: 30px; }
  .nav-logo span span { font-size: 12px !important; }
}

/* ============================================================
   TABLET (<=1024)
   ============================================================ */
@media (max-width: 1024px) {
  .section { padding: 90px 0; }
  .wrap { padding: 0 24px; }
  .hero { padding: 110px 0 70px; }
  .hero-side { height: 460px; }
  .panel.p-code { width: 280px; }
  .panel.p-perf { width: 250px; }
  .panel.p-deploy { width: 230px; }
}

/* ============================================================
   LARGE PHONE (<=820)
   ============================================================ */
@media (max-width: 820px) {
  .section { padding: 70px 0; }
  .wrap { padding: 0 20px; }

  /* hero */
  .hero { padding: 100px 0 60px; min-height: auto; }
  .hero-status { font-size: 11px; gap: 8px; flex-wrap: wrap; }
  .hero h1 { font-size: clamp(40px, 11vw, 64px) !important; line-height: 0.98 !important; }
  .hero-sub { font-size: 16px; }
  .hero-meta { gap: 10px; flex-wrap: wrap; }
  .hero-meta .btn { width: 100%; justify-content: center; }
  .hero-mark { display: none; }
  /* hide the floating tech panels on mobile — too cramped */
  .hero-side { display: none; }
  .hero-grid { gap: 28px; }
  .stack-strip { gap: 6px; margin-top: 22px; }
  .stack-strip .chip { font-size: 10px; padding: 5px 10px; }
  .hero-foot { gap: 14px; margin-top: 30px; padding-top: 22px; }
  .hero-foot .cell .v { font-size: 26px; }
  .hero-foot .cell .l { font-size: 10px; }

  /* section heads */
  .section-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 44px; }
  .section-title { font-size: clamp(34px, 8vw, 56px) !important; line-height: 1.02 !important; }
  .lead { font-size: 15px; }

  /* services / pricing already collapse */
  .svc-card { padding: 28px 24px; }
  .svc-card h3 { font-size: 26px; }

  /* process */
  .process-row { padding: 22px 18px; grid-template-columns: 40px 1fr !important; gap: 10px !important; }
  .process-row .n { font-size: 11px; }
  .process-row .t { font-size: 22px !important; }
  .process-row .d, .process-row .tags { grid-column: 2 !important; font-size: 14px; }

  /* pricing */
  .price-card { padding: 28px 24px; }
  .price-card .amt .num { font-size: 38px; }

  /* testimonials */
  .testi-card { width: 280px !important; padding: 24px 20px; }
  .testi-card .q { font-size: 14px; }

  /* CTA */
  .cta h2 { font-size: clamp(36px, 9vw, 56px) !important; line-height: 1.02 !important; }
  .cta p { font-size: 15px; }
  .cta .actions { flex-direction: column; gap: 10px; }
  .cta .actions .btn { width: 100%; justify-content: center; }
  .cta-ghost-666 { font-size: 200px !important; }

  /* footer — compact, professional mobile layout */
  footer { padding: 48px 0 22px; }
  .foot-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 22px;
    margin-bottom: 32px;
  }
  .foot-brand { grid-column: 1 / -1; }
  .foot-brand > div:first-child { margin-bottom: 14px !important; gap: 12px !important; }
  .foot-brand img { height: 42px !important; }
  .foot-brand p { max-width: none; font-size: 13px; line-height: 1.55; }
  .foot-col h4 { font-size: 10px; margin-bottom: 12px; letter-spacing: 0.16em; }
  .foot-col ul { gap: 8px; }
  .foot-col a { font-size: 13px; }
  .foot-bottom {
    padding-top: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 10.5px;
    line-height: 1.5;
  }

  /* marquee */
  .marquee-item { font-size: 20px !important; gap: 14px !important; }
  .marquee-item .star { width: 16px; height: 16px; }

  /* stats */
  .stats .stat { padding: 24px 16px; }
  .stats .stat .v { font-size: clamp(32px, 9vw, 48px) !important; }
  .stats .stat .l { font-size: 10px; }
  .stats .stat .d { font-size: 12px; }
}

/* ============================================================
   SMALL PHONE (<=480)
   ============================================================ */
@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .section { padding: 56px 0; }

  .nav { top: 10px; }
  .nav-inner { padding: 6px 6px 6px 12px; }
  .nav-logo { padding-right: 10px; }
  .nav-logo span span { display: none; } /* hide subtitle on small */

  .hero { padding: 90px 0 48px; }
  .hero h1 { font-size: clamp(36px, 12vw, 52px) !important; }
  .hero-status { font-size: 10px; }

  /* hero footer stats — 2x2 grid on small */
  .hero-foot { grid-template-columns: repeat(2, 1fr); }

  /* stats section also 2x2 */
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats .stat:nth-child(2) { border-right: 0; }
  .stats .stat:nth-child(1), .stats .stat:nth-child(2) {
    border-bottom: 1px solid var(--line);
  }

  /* section padding */
  .svc-card, .price-card { padding: 24px 20px; }
  .price-card .name { font-size: 20px; }

  /* mobile menu links smaller */
  .mobile-menu-inner a { font-size: 19px; padding: 16px 4px; }
  .mobile-menu-inner .mobile-cta { font-size: 16px; padding: 16px 20px; }

  /* CTA */
  .cta-ghost-666 { display: none; }
  .cta { padding: 48px 20px !important; border-radius: 18px; }

  /* footer ghost */
  .foot-ghost { font-size: 30vw !important; margin-top: 40px; }
}

/* ============================================================
   start-project.html — mobile responsive
   ============================================================ */
@media (max-width: 820px) {
  .sp-page { padding-top: 90px; }
  .sp-hero { padding: 36px 0 40px; }
  .sp-hero h1 { font-size: clamp(34px, 9vw, 58px) !important; }
  .sp-hero .lede { font-size: 15px; }
  .sp-hero .meta { gap: 8px 18px; font-size: 11px; }
  .sp-layout { grid-template-columns: 1fr !important; gap: 28px; padding-bottom: 64px; }
  .sp-form { padding: 26px 20px !important; border-radius: 18px; }
  .sp-section { margin-bottom: 30px; }
  .sp-section-head h2 { font-size: 19px; }
  .sp-section-head .cn { display: none; }
  .sp-row { grid-template-columns: 1fr !important; gap: 14px; }
  .sp-choices { grid-template-columns: 1fr !important; gap: 8px; }
  .sp-choice .box { padding: 12px 14px; min-height: 50px; }
  .sp-drop { padding: 24px 16px; }
  .sp-drop .lab { font-size: 14px; }
  .sp-submit { flex-direction: column !important; align-items: stretch !important; gap: 16px; padding-top: 22px; margin-top: 22px; }
  .sp-submit .note { font-size: 11px; max-width: none; }
  .sp-submit button { width: 100%; justify-content: center; font-size: 15px; padding: 14px 24px; }
  .sp-aside { position: static !important; gap: 14px; }
  .sp-aside .card { padding: 22px 20px; border-radius: 14px; }
  .sp-success .card { padding: 32px 24px; border-radius: 18px; }
  .sp-success h2 { font-size: 26px; }
  .sp-success p { font-size: 14px; }
}

@media (max-width: 480px) {
  .sp-page { padding-top: 78px; }
  .sp-form { padding: 22px 16px !important; border-radius: 16px; }
  .sp-hero .crumb { font-size: 10px; flex-wrap: wrap; gap: 6px; }
  .sp-input, .sp-textarea, .sp-select, .sp-phone input { font-size: 14px; padding: 12px 14px; }
  .sp-phone .prefix { font-size: 13px; padding: 0 12px; }
}