:root {
  --bg: #01060c;
  --bg-2: #04101c;
  --navy: #0a1e32;
  --line: rgba(135, 206, 250, 0.16);
  --line-strong: rgba(135, 206, 250, 0.45);
  --ice: #87cefa;
  --ice-deep: #4aa8e8;
  --ice-soft: #b8e2f8;
  --muted: #7aaecc;
  --slate: #5a7a90;
  --text: #ffffff;
  --green: #3ddc97;
  --red: #ff5a5a;
  --glass: rgba(10, 30, 50, 0.55);
  --radius: 20px;
  --maxw: min(1560px, 92vw);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
}

/* one continuous backdrop for the entire deck — no seams between slides.
   Clean modern look: deep gradient base, one soft light bloom, faint dot matrix. */
body {
  background:
    radial-gradient(120vw 90vh at 50% -20%, #0a1826 0%, #040b14 45%, #01050a 100%)
    fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70vw 55vh at 72% 8%, rgba(74, 168, 232, 0.1), transparent 60%),
    radial-gradient(60vw 50vh at 15% 95%, rgba(43, 108, 160, 0.08), transparent 60%),
    radial-gradient(circle 1px at 1px 1px, rgba(148, 200, 240, 0.11) 1px, transparent 1.5px);
  background-size: auto, auto, 34px 34px;
  animation: aurora 30s ease-in-out infinite alternate;
}

/* soft vignette keeps focus on the center of each slide */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(115vw 115vh at 50% 50%, transparent 55%, rgba(0, 3, 8, 0.55) 100%);
}

@keyframes aurora {
  0% { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 4vw 3vh, -4vw -3vh, 0 0; }
}

/* ---------- scroll deck ---------- */

main {
  position: relative;
  z-index: 1;
  scroll-snap-type: y proximity;
}

.slide {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 7vh, 96px) 0;
  background: transparent;
}

.wrap {
  width: var(--maxw);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.slide.alt {
  background: transparent;
}

.glow {
  position: absolute;
  width: 60vw;
  height: 60vw;
  max-width: 900px;
  max-height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 168, 232, 0.1), transparent 65%);
  pointer-events: none;
  filter: blur(20px);
}

.glow.tl { top: -20vh; left: -15vw; }
.glow.br { bottom: -25vh; right: -12vw; }

/* ---------- type ---------- */

.kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ice);
  font-size: clamp(12px, 0.9vw, 15px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: clamp(14px, 2vh, 22px);
}

.kicker::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--ice);
}

.kicker .num {
  color: var(--slate);
  letter-spacing: 0.08em;
}

h1 {
  font-size: clamp(30px, 3.4vw, 58px);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.12;
  max-width: 24ch;
}

h1 .hl {
  background: linear-gradient(92deg, var(--ice-soft), var(--ice-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  margin-top: clamp(12px, 1.6vh, 20px);
  font-size: clamp(16px, 1.25vw, 22px);
  line-height: 1.5;
  color: var(--muted);
  max-width: 62ch;
}

.body {
  margin-top: clamp(24px, 4vh, 44px);
}

/* ---------- reveal animations ---------- */

.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0s);
}

.in-view .reveal,
.reveal.in-view {
  opacity: 1;
  transform: none;
}

/* scroll-linked slide transitions: each slide zooms/fades in as it enters
   and gently recedes as it leaves the viewport */
@supports (animation-timeline: view()) {
  .slide > .wrap,
  .slide > .cover-inner {
    animation: slide-pass both cubic-bezier(0.3, 0, 0.3, 1);
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }

  /* slides melt into one another: never fully vanish, no dead zone
     between sections — one continuous flow */
  @keyframes slide-pass {
    0% { transform: translateY(7vh) scale(0.94); opacity: 0.25; filter: blur(5px); }
    42% { transform: none; opacity: 1; filter: blur(0); }
    58% { transform: none; opacity: 1; filter: blur(0); }
    100% { transform: translateY(-7vh) scale(0.95); opacity: 0.25; filter: blur(5px); }
  }

  /* parallax drift on phone rows while scrolling through */
  .phone-row .phone:nth-child(odd) {
    animation: drift-a both linear;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }

  .phone-row .phone:nth-child(even) {
    animation: drift-b both linear;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }

  @keyframes drift-a {
    0% { translate: 0 7vh; }
    100% { translate: 0 -7vh; }
  }

  @keyframes drift-b {
    0% { translate: 0 12vh; }
    100% { translate: 0 -12vh; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .slide > .wrap, .slide > .cover-inner, .phone-row .phone { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- cards & grids ---------- */

.card {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 2.2vw, 36px);
  backdrop-filter: blur(6px);
}

.card h2 {
  font-size: clamp(18px, 1.5vw, 26px);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 22px); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 20px); }

.list {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 16px);
  margin-top: clamp(14px, 2vh, 22px);
  list-style: none;
}

.list li {
  display: flex;
  gap: 12px;
  font-size: clamp(15px, 1.15vw, 20px);
  line-height: 1.4;
  color: #e8f4fb;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ice);
  margin-top: 0.55em;
  flex: 0 0 6px;
  box-shadow: 0 0 8px rgba(135, 206, 250, 0.8);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: clamp(11px, 0.8vw, 13px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(135, 206, 250, 0.1);
  color: var(--ice);
  border: 1px solid var(--line);
}

.pill.live { color: var(--green); border-color: rgba(61, 220, 151, 0.4); background: rgba(61, 220, 151, 0.08); }
.pill.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }

/* ---------- big stats ---------- */

.stat-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 20px);
}

.big-stat {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
  padding: clamp(18px, 1.8vw, 30px);
  position: relative;
  overflow: hidden;
}

.big-stat::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 2px;
  background: linear-gradient(90deg, var(--ice), transparent);
}

.big-stat .n {
  font-size: clamp(30px, 2.8vw, 52px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.big-stat .n small { font-size: 0.55em; color: var(--ice); font-weight: 600; }

.big-stat .l {
  margin-top: 10px;
  font-size: clamp(13px, 1vw, 16px);
  color: var(--muted);
  line-height: 1.4;
}

.big-stat .src {
  margin-top: 8px;
  font-size: clamp(10px, 0.75vw, 12px);
  color: var(--slate);
}

/* ---------- phones ---------- */

.phone-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 26px);
  align-items: start;
}

.phone {
  min-width: 0;
  text-align: center;
  perspective: 1400px;
}

/* angle the row toward the center like a product lineup */
.phone:nth-child(1) .frame { --ry: 12deg; }
.phone:nth-child(2) .frame { --ry: 5deg; }
.phone:nth-child(3) .frame { --ry: -5deg; }
.phone:nth-child(4) .frame { --ry: -12deg; }

.phone .frame {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(var(--ry, 0deg)) rotateX(3deg);
  border-radius: clamp(26px, 2.2vw, 40px);
  padding: clamp(8px, 0.65vw, 13px);
  background: linear-gradient(150deg, #2c3e50 0%, #0b1622 40%, #050b12 100%);
  border: 1px solid rgba(160, 215, 250, 0.35);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.65),
    0 0 50px rgba(74, 168, 232, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.55s ease;
}

/* device body thickness behind the screen */
.phone .frame::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: linear-gradient(150deg, #46607a, #0d1a28 60%, #030810);
  transform: translateZ(-14px) scale(1.015);
  filter: blur(0.5px);
}

/* glass glare across the screen */
.phone .frame::after {
  content: "";
  position: absolute;
  inset: clamp(8px, 0.65vw, 13px);
  border-radius: clamp(18px, 1.7vw, 28px);
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 22%, transparent 40%);
  pointer-events: none;
  transform: translateZ(1px);
}

.phone .frame:hover {
  transform: rotateY(0deg) rotateX(0deg) translateY(-12px) scale(1.03);
  box-shadow:
    0 56px 120px rgba(0, 0, 0, 0.7),
    0 0 70px rgba(74, 168, 232, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.phone img {
  display: block;
  width: 100%;
  border-radius: clamp(18px, 1.7vw, 28px);
  transform: translateZ(0.5px);
}

.phone .cap {
  margin-top: 14px;
  font-size: clamp(14px, 1.05vw, 18px);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.phone .sub {
  margin-top: 4px;
  font-size: clamp(12px, 0.85vw, 14px);
  color: var(--slate);
}

/* ---------- cover ---------- */

.slide.cover {
  background: transparent;
}

.cover-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(24px, 3vw, 60px);
  width: var(--maxw);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.cover-logo {
  width: clamp(84px, 8vw, 140px);
  height: auto;
  margin-bottom: clamp(18px, 3vh, 34px);
  filter: drop-shadow(0 0 34px rgba(135, 206, 250, 0.35));
}

.cover-word {
  font-size: clamp(56px, 6.5vw, 118px);
  font-weight: 750;
  letter-spacing: 0.02em;
  line-height: 0.95;
}

.cover-line {
  margin-top: clamp(14px, 2.4vh, 26px);
  font-size: clamp(18px, 1.6vw, 28px);
  line-height: 1.45;
  color: #e8f4fb;
  max-width: 24ch;
}

.cover-line .hl { color: var(--ice); }

.cover-name {
  margin-top: clamp(24px, 4.5vh, 48px);
  color: var(--muted);
  font-size: clamp(14px, 1.05vw, 18px);
}

.cover-fan {
  position: relative;
  height: clamp(420px, 62vh, 720px);
}

.cover-fan {
  perspective: 1600px;
}

.cover-fan .phone-f {
  position: absolute;
  width: clamp(170px, 15vw, 265px);
  border-radius: clamp(22px, 2vw, 34px);
  border: 1px solid rgba(160, 215, 250, 0.35);
  background: linear-gradient(150deg, #2c3e50 0%, #0b1622 40%, #050b12 100%);
  padding: clamp(7px, 0.55vw, 11px);
  transform-style: preserve-3d;
  box-shadow:
    0 50px 110px rgba(0, 0, 0, 0.7),
    0 0 70px rgba(74, 168, 232, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  animation: floaty 6s ease-in-out infinite;
}

.cover-fan .phone-f::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: linear-gradient(150deg, #46607a, #0d1a28 60%, #030810);
  transform: translateZ(-14px) scale(1.015);
}

.cover-fan .phone-f::after {
  content: "";
  position: absolute;
  inset: clamp(7px, 0.55vw, 11px);
  border-radius: clamp(16px, 1.5vw, 26px);
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 22%, transparent 40%);
  pointer-events: none;
  transform: translateZ(1px);
}

.cover-fan .phone-f img { display: block; width: 100%; border-radius: clamp(16px, 1.5vw, 26px); }

.cover-fan .p1 { left: 0%; top: 12%; transform: rotateY(16deg) rotateZ(-7deg); z-index: 1; animation-delay: 0s; }
.cover-fan .p2 { left: 30%; top: 2%; transform: rotateY(0deg); z-index: 3; animation-delay: 1.2s; }
.cover-fan .p3 { left: 60%; top: 14%; transform: rotateY(-16deg) rotateZ(7deg); z-index: 2; animation-delay: 2.4s; }

@keyframes floaty {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}

@media (prefers-reduced-motion: reduce) {
  .cover-fan .phone-f { animation: none; }
}

.scroll-hint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--slate);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 3;
}

.scroll-hint::after {
  content: "";
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--ice), transparent);
  animation: drip 1.8s ease-in-out infinite;
}

@keyframes drip {
  0% { transform: scaleY(0); transform-origin: top; opacity: 1; }
  70% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ---------- solution ---------- */

.solution {
  display: grid;
  grid-template-columns: 1fr clamp(200px, 18vw, 300px) 1fr;
  gap: clamp(14px, 1.6vw, 26px);
  align-items: stretch;
}

.hub {
  background: radial-gradient(circle at 50% 30%, rgba(74, 168, 232, 0.16), transparent 70%), #061018;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 18px;
  gap: 14px;
}

.hub img { width: clamp(56px, 5vw, 90px); filter: drop-shadow(0 0 24px rgba(135, 206, 250, 0.4)); }
.hub strong { font-size: clamp(16px, 1.3vw, 22px); }
.hub p { font-size: clamp(12px, 0.95vw, 15px); color: var(--muted); line-height: 1.45; }

/* ---------- stages ---------- */

.stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.3vw, 22px); }

.stage-card {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(18px, 1.8vw, 30px);
  position: relative;
}

.stage-card.now { border-color: var(--line-strong); box-shadow: 0 0 40px rgba(74, 168, 232, 0.1) inset; }

.stage-label {
  color: var(--ice);
  font-size: clamp(11px, 0.8vw, 13px);
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.stage-card h3 { font-size: clamp(18px, 1.5vw, 26px); letter-spacing: -0.02em; margin: 12px 0 6px; }
.stage-card .tag { color: var(--slate); font-size: clamp(12px, 0.9vw, 15px); margin-bottom: 12px; }
.stage-card ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.stage-card li { font-size: clamp(13px, 1vw, 17px); color: var(--muted); line-height: 1.4; padding-left: 14px; position: relative; }
.stage-card li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--ice-deep); }

/* ---------- metrics / traction ---------- */

.metric-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 16px); }

.metric {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(14px, 1.5vw, 24px);
}

.metric .num { font-size: clamp(24px, 2.2vw, 42px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.metric .num.pending { color: var(--slate); font-size: clamp(15px, 1.2vw, 20px); }
.metric .name { margin-top: 8px; font-size: clamp(12px, 0.9vw, 15px); color: var(--muted); line-height: 1.35; }

.note { font-size: clamp(13px, 0.95vw, 16px); line-height: 1.5; color: var(--muted); }

code {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.9em;
  color: var(--ice-soft);
  background: rgba(135, 206, 250, 0.08);
  padding: 1px 6px;
  border-radius: 6px;
}

/* ---------- loop / moat ---------- */

.flywheel { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(16px, 1.8vw, 28px); }
.loop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 16px); }

.loop-item {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(14px, 1.6vw, 24px);
}

.loop-item b {
  display: block;
  color: var(--ice);
  font-size: clamp(11px, 0.8vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.loop-item p { font-size: clamp(14px, 1.15vw, 19px); line-height: 1.4; }

.data-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin-top: 14px; }
.data-list span {
  font-size: clamp(12px, 0.95vw, 16px);
  color: #dcecf6;
  padding: 7px 0;
  border-bottom: 1px solid rgba(135, 206, 250, 0.1);
}

/* ---------- revenue ---------- */

.price { font-size: clamp(36px, 3.4vw, 62px); font-weight: 700; letter-spacing: -0.03em; }
.price small { font-size: 0.38em; color: var(--muted); font-weight: 500; }

.planned {
  display: inline-block;
  margin-top: 8px;
  color: var(--ice);
  font-size: clamp(11px, 0.8vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.when {
  margin-top: clamp(14px, 2vh, 24px);
  padding-top: clamp(12px, 1.6vh, 18px);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.5;
}

/* ---------- market ---------- */

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

.market-card {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(18px, 1.9vw, 30px);
  display: flex;
  flex-direction: column;
}

.market-card .tag { color: var(--ice); font-size: clamp(11px, 0.85vw, 14px); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 650; }
.market-card .value { font-size: clamp(34px, 3.2vw, 58px); font-weight: 700; letter-spacing: -0.03em; margin: 12px 0 4px; }
.market-card h3 { font-size: clamp(15px, 1.25vw, 21px); margin-bottom: 12px; }
.calc { font-size: clamp(12px, 0.95vw, 16px); line-height: 1.5; color: var(--muted); }
.sources { margin-top: auto; padding-top: 12px; font-size: clamp(10px, 0.75vw, 12px); color: var(--slate); line-height: 1.45; }

/* ---------- sequence ---------- */

.seq { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }

.seq-step {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(12px, 1.4vw, 20px);
  position: relative;
}

.seq-step b { display: block; color: var(--ice); font-size: clamp(11px, 0.8vw, 13px); letter-spacing: 0.12em; margin-bottom: 6px; }
.seq-step p { font-size: clamp(12px, 1vw, 17px); line-height: 1.35; }

/* ---------- competition table ---------- */

.comp-table { width: 100%; border-collapse: collapse; }

.comp-table th,
.comp-table td {
  text-align: left;
  padding: clamp(10px, 1.2vw, 18px) clamp(8px, 1vw, 14px);
  border-bottom: 1px solid rgba(135, 206, 250, 0.12);
  vertical-align: top;
  font-size: clamp(12px, 1vw, 17px);
  line-height: 1.4;
}

.comp-table th {
  color: var(--slate);
  font-size: clamp(10px, 0.8vw, 13px);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.comp-table .val { color: var(--ice-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.comp-table tr.ryval td { background: rgba(135, 206, 250, 0.07); font-weight: 600; }
.comp-table tr.ryval td:first-child { border-left: 2px solid var(--ice); }

.diff { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(14px, 2vh, 22px); }

.chip {
  border: 1px solid var(--line);
  background: var(--glass);
  color: var(--ice-soft);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: clamp(11px, 0.9vw, 15px);
}

/* ---------- team ---------- */

.team-layout { display: grid; grid-template-columns: clamp(240px, 22vw, 360px) 1fr; gap: clamp(20px, 2.4vw, 40px); align-items: start; }

.portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 40px rgba(74, 168, 232, 0.1);
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  display: block;
}

/* subtle bottom fade so the name reads as part of the card */
.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(1, 6, 12, 0.55), transparent 35%);
  pointer-events: none;
}

.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 16px); }

.fit-item { background: var(--glass); border: 1px solid var(--line); border-radius: 16px; padding: clamp(14px, 1.5vw, 22px); }
.fit-item b { display: block; font-size: clamp(14px, 1.15vw, 19px); margin-bottom: 5px; }
.fit-item p { color: var(--muted); font-size: clamp(12px, 0.95vw, 16px); line-height: 1.4; }

/* ---------- raise ---------- */

.raise-grid { display: grid; grid-template-columns: 0.85fr 1.1fr 1.05fr; gap: clamp(12px, 1.4vw, 22px); }

.big-num { font-size: clamp(44px, 4.2vw, 80px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }

.use li,
.miles li {
  font-size: clamp(13px, 1.05vw, 18px);
  line-height: 1.4;
  color: #e8f4fb;
  padding: clamp(8px, 1.1vh, 12px) 0;
  border-bottom: 1px solid rgba(135, 206, 250, 0.1);
  list-style: none;
  display: flex;
  gap: 10px;
}

.use li::before,
.miles li::before { content: "—"; color: var(--ice); }

/* ---------- close ---------- */

.slide.close { background: transparent; text-align: center; }
.slide.close .wrap { display: flex; flex-direction: column; align-items: center; }

.close-phones {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 1.2vw, 18px);
  margin-top: clamp(20px, 3.5vh, 40px);
}

.close-phones img {
  width: clamp(120px, 10.5vw, 190px);
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.close-phones img:nth-child(even) { transform: translateY(14px); }

/* ---------- chrome ---------- */

.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--ice-deep), var(--ice));
  z-index: 40;
  box-shadow: 0 0 12px rgba(135, 206, 250, 0.7);
}

.dots {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 40;
}

.dots a {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(135, 206, 250, 0.22);
  transition: all 0.25s ease;
  display: block;
}

.dots a.active {
  background: var(--ice);
  box-shadow: 0 0 10px rgba(135, 206, 250, 0.9);
  transform: scale(1.25);
}

.footer-tag {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  z-index: 3;
}

.footer-tag .wrap {
  display: flex;
  justify-content: space-between;
  color: var(--slate);
  font-size: clamp(10px, 0.75vw, 12px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-tag img { width: 14px; vertical-align: -2px; margin-right: 8px; }

/* ---------- print ---------- */

@media print {
  .progress, .dots, .scroll-hint { display: none !important; }
  .slide { min-height: auto; page-break-after: always; break-after: page; padding: 40px 0; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .slide::before { display: none; }
}

@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4, .stat-band, .stages, .phone-row, .market,
  .flywheel, .loop, .team-layout, .raise-grid, .seq, .metric-board, .fit,
  .solution, .cover-inner, .data-list {
    grid-template-columns: 1fr;
  }
  .cover-fan { display: none; }
}