:root {
  color-scheme: dark;
  --bg: #05070d;
  --ink: #f5f1e8;
  --muted: #bfc7d5;
  --line: rgba(245, 241, 232, 0.16);
  --panel: rgba(12, 16, 28, 0.76);
  --blue: #7cf5ff;
  --violet: #9d7cff;
  --green: #63e889;
  --amber: #f9d86b;
  --coral: #ff7a5c;
  --shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; max-width: 100%; overflow-x: hidden; background: var(--bg); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { overflow: hidden; }
button, a { font: inherit; }

.deck-shell { position: relative; min-height: 100vh; overflow: hidden; background: radial-gradient(circle at 12% 12%, rgba(124,245,255,.17), transparent 30%), radial-gradient(circle at 86% 20%, rgba(157,124,255,.18), transparent 32%), radial-gradient(circle at 78% 94%, rgba(99,232,137,.15), transparent 32%), linear-gradient(135deg, #05070d, #101426 54%, #05070d); }
.deck-shell::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(245,241,232,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(245,241,232,.04) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); animation: gridMove 20s linear infinite; pointer-events: none; }
#flowCanvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; pointer-events: none; }

.topbar { position: fixed; z-index: 20; inset: 0 0 auto 0; display: grid; grid-template-columns: minmax(160px, 240px) 1fr auto; gap: 24px; align-items: center; padding: 22px clamp(18px, 4vw, 56px); pointer-events: none; }
.brand, .counter { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 950; }
.brand img { display: block; width: min(170px, 34vw); height: auto; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #05070d; background: linear-gradient(135deg, var(--blue), var(--green)); font-weight: 950; }
.progress { height: 2px; background: rgba(245,241,232,.14); overflow: hidden; }
.progress span { display: block; width: calc((var(--slide-progress, 1) / var(--slide-total, 13)) * 100%); height: 100%; background: linear-gradient(90deg, var(--blue), var(--violet), var(--green), var(--amber)); transition: width 360ms ease; }
.counter { color: var(--muted); font-variant-numeric: tabular-nums; }

.slides { position: relative; z-index: 5; min-height: 100vh; }
.slide { position: absolute; inset: 0; display: grid; place-items: center; min-height: 100vh; padding: 96px clamp(18px, 5vw, 72px) 98px; opacity: 0; transform: translateX(5%) scale(.985); pointer-events: none; transition: opacity 520ms ease, transform 620ms cubic-bezier(.22,1,.36,1); }
.slide.is-active { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; }
.content { position: relative; z-index: 2; width: min(1180px, 100%); }
.hero-slide { place-items: stretch; padding: 0; }
.hero-media { position: absolute; inset: 0; pointer-events: none; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,7,13,.94), rgba(5,7,13,.68) 48%, rgba(5,7,13,.28)), linear-gradient(0deg, rgba(5,7,13,.94), transparent 48%); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.82) saturate(.88) contrast(1.05); animation: imageFloat 15s ease-in-out infinite alternate; }
.hero-content { align-self: end; max-width: 1120px; padding: 18vh clamp(22px, 6vw, 88px) 12vh; }

.eyebrow { margin: 0 0 18px; color: var(--blue); font-size: .82rem; font-weight: 950; letter-spacing: .18em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; letter-spacing: 0; }
h1, h2 { max-width: 1080px; margin-bottom: 22px; line-height: .94; font-weight: 950; }
h1 { font-size: clamp(4rem, 12vw, 12rem); }
h2 { font-size: clamp(2.35rem, 3.4vw, 4rem); }
h3 { margin-bottom: 10px; font-size: clamp(1.05rem, 1.7vw, 1.45rem); line-height: 1.12; }
p, li { color: var(--muted); font-size: clamp(1rem, 1.55vw, 1.22rem); line-height: 1.6; }
.hero-subtitle { margin-bottom: 16px; color: var(--green); font-size: clamp(1.2rem, 2.4vw, 2rem); font-weight: 900; }
.lead { max-width: 810px; color: #e5e9ef; font-size: clamp(1.05rem, 2vw, 1.42rem); }
.hero-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.hero-stats span, .tags span, .problem-stack span { border: 1px solid var(--line); background: rgba(245,241,232,.07); backdrop-filter: blur(14px); }
.hero-stats span { min-width: 174px; padding: 15px 16px; color: var(--muted); }
.hero-stats strong { display: block; color: var(--ink); font-size: 1.85rem; line-height: 1; }

.split, .media { display: grid; grid-template-columns: minmax(0, .96fr) minmax(340px, .9fr); align-items: center; gap: clamp(28px, 6vw, 86px); }
.media { grid-template-columns: minmax(340px, .9fr) minmax(0, 1fr); }
.media.reverse { grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr); }
.problem-stack { display: grid; gap: 14px; }
.problem-stack span { display: block; padding: 22px 24px; color: var(--ink); font-size: clamp(1.05rem, 2.2vw, 1.5rem); font-weight: 850; transform: translateX(18px); opacity: 0; }
.slide.is-active .problem-stack span { animation: tagIn 440ms ease forwards; }
.slide.is-active .problem-stack span:nth-child(2) { animation-delay: 80ms; } .slide.is-active .problem-stack span:nth-child(3) { animation-delay: 160ms; } .slide.is-active .problem-stack span:nth-child(4) { animation-delay: 240ms; }

.pipeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 42px; }
.pipeline article, .impact-grid article, .comparison article, .timeline-card { border: 1px solid var(--line); background: linear-gradient(180deg, rgba(245,241,232,.08), rgba(245,241,232,.025)); box-shadow: var(--shadow); }
.pipeline article { min-height: 280px; padding: 22px; opacity: 0; transform: translateY(18px); }
.slide.is-active .pipeline article { animation: riseIn 520ms ease forwards; }
.slide.is-active .pipeline article:nth-child(2) { animation-delay: 70ms; } .slide.is-active .pipeline article:nth-child(3) { animation-delay: 140ms; } .slide.is-active .pipeline article:nth-child(4) { animation-delay: 210ms; } .slide.is-active .pipeline article:nth-child(5) { animation-delay: 280ms; }
.pipeline span { display: inline-block; margin-bottom: 68px; color: var(--amber); font-size: .78rem; font-weight: 950; }
.pipeline p, .impact-grid p { font-size: .98rem; }

.image-panel { position: relative; overflow: hidden; min-height: 530px; border: 1px solid var(--line); box-shadow: var(--shadow); background: #111727; }
.image-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(5,7,13,.78)); }
.image-panel img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; }
.motion-list { display: grid; gap: 14px; padding: 0; margin: 30px 0 0; list-style: none; }
.motion-list li { position: relative; padding: 16px 18px 16px 48px; border-top: 1px solid var(--line); background: linear-gradient(90deg, rgba(124,245,255,.08), transparent); }
.motion-list li::before { content: ""; position: absolute; left: 18px; top: 25px; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 24px rgba(124,245,255,.7); }

.quality-radar { position: relative; min-height: 520px; display: grid; place-items: center; }
.radar-ring { position: absolute; width: min(70vw, 480px); aspect-ratio: 1; border: 1px solid rgba(124,245,255,.35); border-radius: 50%; box-shadow: 0 0 80px rgba(124,245,255,.16); animation: rotate 14s linear infinite; }
.radar-ring.r2 { width: min(48vw, 320px); border-color: rgba(157,124,255,.35); animation-direction: reverse; }
.radar-line { position: absolute; width: min(70vw, 480px); height: 1px; background: linear-gradient(90deg, transparent, var(--green)); transform-origin: center; animation: rotate 5s linear infinite; }
.quality-radar span { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; padding: 10px 12px; border: 1px solid var(--line); background: rgba(5,7,13,.72); color: var(--ink); font-weight: 900; }
.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.tags span { padding: 12px 14px; color: var(--ink); font-weight: 850; }

.audit-panel {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(124, 245, 255, 0.28);
  background:
    radial-gradient(circle at 80% 16%, rgba(99, 232, 137, 0.14), transparent 36%),
    linear-gradient(180deg, rgba(245, 241, 232, 0.08), rgba(245, 241, 232, 0.025));
  box-shadow: var(--shadow);
}

.audit-score {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.audit-score span {
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
}

.audit-score strong {
  color: var(--green);
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: 0.8;
  font-weight: 950;
}

.audit-panel ul {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.audit-panel li {
  display: grid;
  grid-template-columns: 126px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(245, 241, 232, 0.1);
  background: transparent;
}

.audit-panel li::before {
  display: none;
}

.audit-panel b {
  color: var(--ink);
}

.audit-panel li span {
  color: var(--muted);
}

.chart-layout, .donut-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .45fr); gap: clamp(28px, 5vw, 70px); align-items: center; margin-top: 42px; }
.bar-chart { display: grid; gap: 28px; }
.bar-row { display: grid; gap: 10px; }
.bar-row span { color: var(--muted); font-weight: 850; }
.bar { height: 72px; display: flex; align-items: center; justify-content: flex-end; padding: 0 18px; color: #05070d; font-size: 1.4rem; font-weight: 950; background: linear-gradient(90deg, var(--violet), var(--blue)); transform-origin: left; animation: growBar 900ms ease both; }
.bar.full { width: 100%; }
.bar.tiny { width: 18%; min-width: 130px; background: linear-gradient(90deg, var(--green), var(--amber)); animation-delay: 200ms; }
.saving-card { min-height: 240px; display: grid; align-content: center; gap: 10px; padding: 28px; border: 1px solid var(--line); background: rgba(245,241,232,.07); box-shadow: var(--shadow); }
.saving-card strong { color: var(--green); font-size: clamp(3rem, 6vw, 5.4rem); line-height: .9; }
.saving-card span { color: var(--muted); font-size: 1.15rem; }
.donut { width: min(64vw, 420px); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#7cf5ff 0 25%, #9d7cff 25% 66%, #f9d86b 66% 74%, #63e889 74% 87%, #ff7a5c 87% 100%); box-shadow: inset 0 0 0 70px #0b1020, var(--shadow); }
.legend { display: grid; gap: 14px; }
.legend span { display: flex; gap: 10px; align-items: center; color: var(--muted); font-weight: 800; }
.legend b { width: 16px; height: 16px; display: inline-block; }
.comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 42px; }
.comparison article { min-height: 340px; padding: 30px; }
.comparison .highlight { background: linear-gradient(135deg, rgba(124,245,255,.15), rgba(99,232,137,.08)); border-color: rgba(124,245,255,.38); }

.full-image-slide {
  display: grid;
  grid-template-columns: minmax(0, 0.58fr) minmax(520px, 1.18fr);
  align-items: center;
  gap: clamp(24px, 4vw, 62px);
}

.full-image-slide h2 {
  font-size: clamp(2.2rem, 5vw, 5.2rem);
}

.analysis-showcase {
  position: relative;
  overflow: hidden;
  min-height: 690px;
  margin: 0;
  /* border: 1px solid rgba(124, 245, 255, 0.28);
  background:
    radial-gradient(circle at 78% 18%, rgba(157, 124, 255, 0.18), transparent 38%),
    rgba(245, 241, 232, 0.055);
  box-shadow: var(--shadow); */
}

.analysis-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  /* background: linear-gradient(180deg, rgba(5, 7, 13, 0.08), rgba(5, 7, 13, 0.32)); */
  pointer-events: none;
}

.analysis-showcase img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: contain;
  /* padding: 16px; */
}

.impact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 42px; }
.impact-grid article { min-height: 300px; padding: 24px; }
.impact-grid strong { display: inline-block; margin-bottom: 58px; color: var(--coral); }
.closing { max-width: 980px; text-align: center; }
.closing h2, .closing p { margin-left: auto; margin-right: auto; }
.cta { display: inline-flex; align-items: center; min-height: 54px; margin-top: 22px; padding: 0 24px; color: #05070d; background: linear-gradient(135deg, var(--blue), var(--green)); text-decoration: none; font-weight: 950; }
.cta-button { margin-left: 10px; border: 0; cursor: pointer; }
.cta-button:hover, .cta:hover { filter: brightness(1.08); }
.controls { position: fixed; z-index: 30; left: 50%; bottom: 22px; display: flex; align-items: center; gap: 10px; padding: 9px; border: 1px solid var(--line); background: rgba(5,7,13,.72); backdrop-filter: blur(18px); transform: translateX(-50%); box-shadow: var(--shadow); }
.controls button { display: grid; place-items: center; width: 42px; height: 42px; border: 0; color: var(--ink); background: rgba(245,241,232,.08); cursor: pointer; font-size: 1.35rem; }
.dots { display: flex; gap: 7px; align-items: center; }
.dot { width: 8px !important; height: 8px !important; padding: 0; border-radius: 50%; background: rgba(245,241,232,.28) !important; }
.dot.is-active { width: 26px !important; border-radius: 999px; background: var(--blue) !important; }

.demo-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 22px;
}

.demo-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 13, 0.76);
  backdrop-filter: blur(16px);
}

.demo-dialog {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: min(820px, calc(100svh - 44px));
  overflow: auto;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(124, 245, 255, 0.28);
  background:
    radial-gradient(circle at 88% 10%, rgba(157, 124, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(20, 26, 45, 0.96), rgba(7, 10, 20, 0.96));
  box-shadow: var(--shadow);
}

.demo-dialog h2 {
  font-size: clamp(2rem, 5vw, 4.3rem);
}

.demo-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: rgba(245, 241, 232, 0.08);
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 1;
}

.demo-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.demo-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 850;
}

.demo-form input,
.demo-form textarea {
  width: 100%;
  border: 1px solid rgba(245, 241, 232, 0.18);
  border-radius: 0;
  padding: 15px 16px;
  color: var(--ink);
  background: rgba(5, 7, 13, 0.58);
  outline: none;
}

.demo-form input:focus,
.demo-form textarea:focus {
  border-color: rgba(124, 245, 255, 0.82);
  box-shadow: 0 0 0 3px rgba(124, 245, 255, 0.12);
}

.demo-full,
.demo-status,
.demo-actions {
  grid-column: 1 / -1;
}

.demo-status {
  min-height: 1.5em;
  margin: 0;
  color: var(--green);
  font-weight: 850;
}

.demo-status.is-error {
  color: var(--coral);
}

.demo-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.primary-action,
.secondary-action {
  min-height: 50px;
  border: 1px solid var(--line);
  padding: 0 20px;
  color: var(--ink);
  background: rgba(245, 241, 232, 0.08);
  cursor: pointer;
  font-weight: 950;
}

.primary-action {
  border-color: transparent;
  color: #05070d;
  background: linear-gradient(135deg, var(--blue), var(--green));
}

@keyframes gridMove { to { transform: translate3d(54px, 54px, 0); } }
@keyframes imageFloat { from { transform: scale(1.03); } to { transform: scale(1.09) translate3d(-1.2%, -1%, 0); } }
@keyframes tagIn { to { opacity: 1; transform: translateX(0); } }
@keyframes riseIn { to { opacity: 1; transform: translateY(0); } }
@keyframes rotate { to { rotate: 360deg; } }
@keyframes growBar { from { scale: 0 1; } to { scale: 1 1; } }

@media (max-width: 960px) {
  html, body { touch-action: pan-y; -webkit-overflow-scrolling: touch; }
  body { overflow-x: hidden; overflow-y: auto; }
  .deck-shell { min-height: 100svh; height: auto; overflow: visible; }
  .deck-shell, .slides, .slide, .content { max-width: 100vw; overflow-x: clip; touch-action: pan-y; }
  .slides { min-height: auto; padding-bottom: 0; }
  .topbar { position: sticky; grid-template-columns: auto 1fr auto; gap: 12px; padding: 16px; background: rgba(5,7,13,.72); backdrop-filter: blur(14px); }
  .brand span:last-child { display: none; }
  .slide { position: relative; inset: auto; display: none; min-height: auto; padding: 34px 18px 104px; opacity: 1; transform: none; pointer-events: auto; transition: none; place-items: stretch; }
  .slide.is-active { display: block; height: calc(100svh - 68px); min-height: 0; overflow-x: hidden; overflow-y: auto; transform: none; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
  .hero-slide.is-active { display: block; height: calc(100svh - 68px); min-height: 0; }
  .hero-slide.is-active .hero-media { position: fixed; top: 68px; right: 0; bottom: 0; left: 0; }
  .content { margin: 0 auto; }
  .hero-content { padding: 12vh 20px 14vh; }
  h1 { font-size: clamp(4rem, 22vw, 7rem); }
  h2 { font-size: clamp(2.1rem, 11vw, 4.2rem); line-height: 1; }
  .split, .media, .media.reverse, .chart-layout, .donut-layout, .comparison, .pipeline, .impact-grid, .full-image-slide { grid-template-columns: 1fr; }
  .image-panel { min-height: 330px; }
  .pipeline article, .impact-grid article, .comparison article { min-height: auto; }
  .analysis-showcase { min-height: 430px; }
  .analysis-showcase img { padding: 12px; }
  .quality-radar { min-height: 390px; }
  .controls { bottom: 12px; width: calc(100% - 24px); justify-content: center; }
  .dots { max-width: 150px; overflow: hidden; }
  .dot { flex: 0 0 auto; }
  .cta-button { margin-left: 0; margin-right: 0; }
  .demo-form { grid-template-columns: 1fr; }
  .demo-actions { justify-content: stretch; }
  .demo-actions button { flex: 1; }
}