:root {
  color-scheme: dark;
  --bg: #07131d;
  --panel: #0d2232;
  --panel-2: #102b40;
  --ink: #eef8ff;
  --muted: #8facbf;
  --blue: #299ff5;
  --blue-2: #62c6ff;
  --line: rgba(152, 206, 239, 0.16);
  --radius: 28px;
}

* { box-sizing: border-box; }
html {
  height: 100%;
  overflow: hidden;
  scroll-behavior: smooth;
  background: var(--bg);
}
body {
  margin: 0;
  height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 8%, rgba(41,159,245,.12), transparent 30rem),
    var(--bg);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
}
main {
  height: 100svh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: auto;
  scroll-snap-type: none;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
body.fullpage-mode main { height:auto; overflow:visible; }
body.fullpage-mode .scene,
body.fullpage-mode .report-story { min-height:100svh; height:100svh; }
body.fullpage-mode .report-sticky { min-height:100svh; }
body.fullpage-mode .fp-section { overflow:hidden; }
main::-webkit-scrollbar { display:none; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}
.page-noise {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.topbar {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px clamp(24px, 5vw, 76px);
  background: linear-gradient(to bottom, rgba(7,19,29,.94), rgba(7,19,29,0));
  pointer-events: none;
}
.brand { display: flex; align-items: center; gap: 18px; color: var(--ink); text-decoration: none; pointer-events: auto; }
.brand img { width: 132px; height: 34px; object-fit: contain; object-position: left; }
.brand span { color: var(--muted); padding-left: 18px; border-left: 1px solid var(--line); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
.chapter-indicator { display: flex; align-items: center; gap: 10px; color: var(--muted); font-variant-numeric: tabular-nums; font-size: .82rem; }
.chapter-indicator i { width: 44px; height: 1px; background: var(--line); }
.chapter-indicator span:first-child { color: var(--ink); }
.rail { position: fixed; right: 24px; top: 22vh; bottom: 22vh; width: 2px; z-index: 40; background: rgba(255,255,255,.08); border-radius: 999px; }
.rail span { display: block; height: 0; width: 100%; background: linear-gradient(var(--blue-2), var(--blue)); border-radius: inherit; box-shadow: 0 0 18px rgba(41,159,245,.7); }

.scene {
  position: relative;
  min-height: 100svh;
  padding: 120px clamp(28px, 7vw, 120px) 72px;
  display: grid;
  align-items: center;
  isolation: isolate;
}
.scene,
.report-story {
  scroll-snap-align: none;
}
.hero { grid-template-columns: minmax(340px, .75fr) minmax(560px, 1.25fr); gap: clamp(40px, 6vw, 110px); overflow: hidden; }
.hero-copy { z-index: 2; }
.hero-copy h1 { text-shadow: 0 3px 14px rgba(3, 8, 12, .58), 0 12px 38px rgba(3, 8, 12, .28); }
.kicker, .step { color: var(--blue-2); font-weight: 700; font-size: .78rem; letter-spacing: .19em; text-transform: uppercase; }
h1, h2 { margin: 0; max-width: 13ch; font-weight: 750; letter-spacing: -.055em; line-height: .98; text-wrap: balance; }
h1 { font-size: clamp(3.5rem, 6.4vw, 7.2rem); }
h2 { font-size: clamp(3rem, 5.4vw, 6.4rem); }
h1 em, h2 em { color: var(--blue); font-style: normal; }
.lead { max-width: 31rem; margin: 36px 0 0; color: #b7cfde; font-size: clamp(1.2rem, 1.8vw, 1.7rem); line-height: 1.45; }
.dashboard-stage {
  position: relative;
  z-index: 1;
  width: min(1050px, 56vw);
  overflow: visible;
  box-shadow: 0 55px 130px rgba(0,0,0,.55), 0 0 90px rgba(41,159,245,.11);
  transform: perspective(1600px) rotateY(-7deg) rotateX(2deg);
  transition: transform .18s ease-out;
}
.dashboard-stage img { display: block; width: 100%; border-radius: 26px; }
.scanline { position: absolute; left: 0; right: 0; height: 1px; top: 15%; background: linear-gradient(90deg, transparent, rgba(80,194,255,.7), transparent); box-shadow: 0 0 25px rgba(80,194,255,.5); animation: scan 6s ease-in-out infinite; }
@keyframes scan { 0%,100% { top: 14%; opacity: 0; } 10%,90% { opacity: 1; } 50% { top: 92%; } }
.orb { position: absolute; width: 44vw; aspect-ratio: 1; border-radius: 50%; filter: blur(2px); background: radial-gradient(circle, rgba(41,159,245,.17), transparent 66%); }
.orb-a { right: -10vw; top: 10vh; }
.scroll-cue { position: absolute; left: clamp(28px,7vw,120px); bottom: 34px; display: flex; align-items: center; gap: 16px; color: var(--muted); text-decoration: none; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.scroll-cue i { display: block; width: 58px; height: 1px; background: var(--blue); position: relative; overflow: visible; }
.scroll-cue i::after { content:""; position:absolute; right:0; top:-3px; width:7px; height:7px; border-right:1px solid var(--blue); border-bottom:1px solid var(--blue); transform: rotate(45deg); }

.split { grid-template-columns: minmax(360px,.82fr) minmax(520px,1.18fr); gap: clamp(48px,8vw,140px); }
.scene-copy { position: relative; z-index: 2; }
.scene-copy .step { margin: 0 0 26px; }
.task-list { margin: 46px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.task-list li { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); color: #c7dbe7; font-size: clamp(1rem,1.35vw,1.28rem); }
.task-list span { color: var(--blue); font-size: .74rem; letter-spacing: .12em; }
.accent-line { margin: 36px 0 0; color: var(--blue-2); font-size: clamp(1.35rem,2vw,2rem); font-weight: 700; }
.wide-media { position:relative; aspect-ratio:1.68; overflow:hidden; background:transparent; }
.wide-media video { position:absolute; inset:-5% -4%; display:block; width:108%; height:110%; object-fit:cover; border-radius:0; box-shadow:none; }
.hero-media { z-index:1; width:min(1050px,56vw); justify-self:end; }
.problem-copy-only { place-items:center; }
.problem-copy-only .scene-copy { width:min(620px,100%); text-align:center; }
.problem-copy-only h2 { margin-inline:auto; }
.problem-copy-only .task-list { text-align:left; }

@media (min-width: 901px) {
  /* The report copy has ample space beside the phone on desktop.  Let the
     headline use it so the message stays a compact three-line block. */
  .report-sticky {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
    gap: clamp(36px, 5vw, 92px);
  }
  .report-copy h2 { max-width: 16ch; }

  .problem-copy-only .scene-copy { width:min(1200px,100%); display:grid; grid-template-columns:minmax(340px,.88fr) minmax(430px,1.12fr); column-gap:clamp(64px,11vw,190px); align-items:start; text-align:left; }
  .problem-copy-only .step { grid-column:1; grid-row:1; }
  .problem-copy-only h2 { grid-column:1; grid-row:2; margin:0; }
  .problem-copy-only .problem-actions { grid-column:2; grid-row:1 / span 2; align-self:center; }
  .problem-copy-only .problem-actions .task-list { margin:0; }
  .problem-copy-only .problem-actions .accent-line { margin:18px 0 0; font-size:clamp(1.75rem,2.7vw,2.9rem); line-height:1.08; }
}

.report-story { position: relative; min-height: 100svh; background: linear-gradient(180deg, transparent, rgba(21,76,117,.18) 45%, transparent); }
.report-sticky { position: relative; min-height: 100svh; padding: 110px clamp(28px,8vw,150px) 60px; display: grid; grid-template-columns: 1fr minmax(320px,470px); gap: clamp(54px,10vw,180px); align-items: center; overflow: hidden; }
.report-copy { align-self:start; }
.report-copy h2 { max-width: 11ch; }
.clean-list { margin: 48px 0 0; padding: 0; list-style: none; display: grid; gap: 22px; }
.clean-list li { position: relative; padding-left: 28px; color: #c8dce8; font-size: clamp(1.05rem,1.45vw,1.35rem); }
.clean-list li::before { content:""; position:absolute; left:0; top:.45em; width:9px; height:9px; border-radius:50%; background: var(--blue); box-shadow: 0 0 18px rgba(41,159,245,.6); }
.telegram-line { margin: 46px 0 0; font-size: clamp(1.45rem,2.2vw,2.2rem); font-weight: 700; }
.telegram-line strong { color: var(--blue); }
.phone-wrap { position: relative; justify-self: center; width: min(430px, 32vw); }
.phone { position: relative; z-index:2; aspect-ratio: 1284/2778; border-radius: 54px; overflow: hidden; border: 9px solid #111b23; background: #08131c; box-shadow: 0 60px 140px rgba(0,0,0,.62); }
.phone video, .phone img { width: 100%; height: 100%; object-fit: cover; display:block; }
.phone-glow { position:absolute; z-index:0; left:50%; top:52%; width:155%; aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%); background:rgba(70,128,168,.52); filter:blur(82px); opacity:.96; }

.feature {
  grid-template-columns: minmax(360px, .82fr) minmax(420px, .9fr);
  gap: clamp(60px, 10vw, 190px);
  overflow: hidden;
}
.feature::before {
  content:"";
  position:absolute;
  right:5%;
  top:50%;
  width:min(54vw,720px);
  aspect-ratio:1;
  z-index:-1;
  border-radius:50%;
  transform:translateY(-50%);
  background:rgba(70,128,168,.5);
  filter:blur(105px);
  opacity:.96;
}
.feature.reverse::before { left:5%; right:auto; }
.feature.reverse { grid-template-columns: minmax(420px,.9fr) minmax(360px,.82fr); }
.feature.reverse .feature-copy { grid-column:2; grid-row:1; }
.feature.reverse .screen-card { grid-column:1; grid-row:1; }
.feature-copy { max-width: 670px; }
.feature-copy h2 { max-width: 11ch; }
.screen-card {
  position:relative;
  justify-self:center;
  width:min(430px,32vw,calc(82svh * .4622));
  aspect-ratio:1284/2778;
  overflow:hidden;
  border:9px solid #111b23;
  border-radius:54px;
  background:#08131c;
  box-shadow:0 48px 120px rgba(0,0,0,.55);
  transform:rotate(2deg);
}
.reverse .screen-card { transform:rotate(-2deg); }
.screen-card img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.screen-card::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; }
.screen-shine { position:absolute; z-index:2; top:-40%; left:-25%; width:40%; height:180%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); transform:rotate(18deg); animation:shine 8s ease-in-out infinite; pointer-events:none; }
@keyframes shine { 0%,65% { left:-35%; } 100% { left:125%; } }
.screen-card.tall { width:min(430px,32vw,calc(84svh * .4622)); }

.connect { background:linear-gradient(130deg, rgba(41,159,245,.04), transparent 50%); }
.phone-shot {
  position:relative;
  justify-self:center;
  width:min(430px,32vw,calc(82svh * .4622));
  aspect-ratio:1284/2778;
  overflow:hidden;
  border-radius:54px;
  border:9px solid #111b23;
  background:#08131c;
  box-shadow:0 55px 130px rgba(0,0,0,.6);
}
.phone-shot img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.trust-row { margin-top:52px; display:flex; align-items:center; flex-wrap:wrap; gap:12px; color:var(--muted); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; }
.trust-row i { flex:1 1 24px; max-width:42px; height:1px; background:var(--blue); }
.trust-row strong { color:#7ee0a3; font-weight:700; }

.morning { display:flex; flex-direction:column; justify-content:center; text-align:center; overflow:hidden; }
.morning-copy { position:relative; z-index:3; }
.morning h2 { max-width:none; font-size:clamp(2.5rem,4.5vw,5.5rem); }
.time { margin:.08em 0 0; font-size:clamp(8rem,22vw,22rem); line-height:.82; font-weight:800; letter-spacing:-.1em; padding-right:.1em; text-shadow:0 0 90px rgba(41,159,245,.18); }
.timezone { margin:28px 0 0; color:var(--blue-2); font-size:.82rem; font-weight:700; letter-spacing:.23em; }
.morning .lead { margin:34px auto 0; max-width:none; }
.time-rings { position:absolute; left:50%; top:50%; width:min(1000px,80vw); aspect-ratio:1; transform:translate(-50%,-50%); opacity:.5; }
.time-rings i { position:absolute; inset:0; border:1px solid rgba(41,159,245,.13); border-radius:50%; animation:ring 7s ease-in-out infinite alternate; }
.time-rings i:nth-child(2) { inset:14%; animation-delay:-2s; }
.time-rings i:nth-child(3) { inset:28%; animation-delay:-4s; }
@keyframes ring { to { transform:scale(1.08); opacity:.3; } }
.delivery-path { position:absolute; bottom:55px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:18px; color:#6f8da0; font-size:.72rem; letter-spacing:.16em; }
.delivery-path i { width:60px; height:1px; background:linear-gradient(90deg,var(--line),var(--blue)); }
.delivery-path b { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--blue); color:#06121b; box-shadow:0 0 28px rgba(41,159,245,.45); }

.signal-pills { margin-top:46px; display:flex; flex-wrap:wrap; gap:12px; max-width:540px; }
.signal-pills span { padding:12px 17px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.03); font-size:.92rem; }
.signal-pills span::before { content:""; display:inline-block; width:8px; height:8px; margin-right:10px; border-radius:50%; }
.signal-pills .risk::before { background:#ff985c; box-shadow:0 0 12px rgba(255,152,92,.6); }
.signal-pills .chance::before { background:#6ee39a; box-shadow:0 0 12px rgba(110,227,154,.5); }
.signal-pills .quality::before { background:#d8e8f1; }
.evidence-list { margin:48px 0 0; padding-left:1.25em; display:grid; gap:16px; color:#c9dce7; font-size:1.05rem; }
.evidence-list li { padding-left:.25em; }
.evidence-list li::marker { color:var(--blue); }

.extras { grid-template-columns:minmax(360px,.7fr) minmax(600px,1.3fr); gap:80px; overflow:hidden; }
.extras-copy { max-width:620px; }
.phone-pair { position:relative; justify-self:center; width:min(750px,49vw); height:min(80svh,850px); }
.phone-pair::before { content:""; position:absolute; z-index:0; left:50%; top:48%; width:115%; aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%); background:rgba(70,128,168,.5); filter:blur(105px); opacity:.96; }
.mini-phone { position:absolute; z-index:1; overflow:hidden; border:7px solid #111b23; border-radius:45px; background:#08131c; box-shadow:0 50px 120px rgba(0,0,0,.58); }
.mini-phone img, .mini-phone video { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.mini-phone.front { left:50%; top:0; width:auto; height:100%; aspect-ratio:1284/2778; transform:translateX(-50%) rotate(2deg); }

.finale { grid-template-columns:1fr; min-height:110svh; overflow:hidden; text-align:center; }
.final-copy { z-index:2; justify-self:center; }
.final-copy h2 { max-width:10ch; font-size:clamp(4.4rem,8vw,9.3rem); }
.final-copy .lead { margin-left:auto; margin-right:auto; font-size:clamp(1.4rem,2vw,2.1rem); }
.back-to-top { display:inline-flex; align-items:center; gap:22px; margin-top:54px; padding:16px 0; color:#b8d1df; text-decoration:none; border-bottom:1px solid var(--line); font-size:.9rem; letter-spacing:.06em; }
.back-to-top span { color:var(--blue); font-size:1.2rem; }
.final-orbit { position:absolute; right:-20vw; width:80vw; aspect-ratio:1; border:1px solid rgba(41,159,245,.12); border-radius:50%; box-shadow:0 0 140px rgba(41,159,245,.1) inset; }

.phone::before,
.phone-shot::before,
.screen-card::before,
.mini-phone::before {
  content:"";
  position:absolute;
  z-index:5;
  top:-1px;
  left:50%;
  width:43%;
  height:29px;
  border-radius:0 0 18px 18px;
  transform:translateX(-50%);
  background:#03080c;
  box-shadow:0 1px 0 rgba(255,255,255,.06);
  pointer-events:none;
}

.reveal { opacity: .08; transform: translateY(48px); transition: opacity .8s ease, transform .95s cubic-bezier(.2,.75,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .topbar { padding: 18px 22px; }
  .brand img { width: 112px; }
  .brand span { display:none; }
  .rail { right: 8px; }
  h1 { font-size:clamp(2.25rem,7.4vw,4.8rem); }
  h2 { font-size:clamp(2rem,6.5vw,4.25rem); }
  .scene, .report-sticky { padding: 72px 24px 24px; }
  .hero, .split, .report-sticky { grid-template-columns: 1fr; }
  .hero { gap: 20px; align-content:start; }
  .hero-media { width:100%; justify-self:stretch; }
  .dashboard-stage { width: 100%; transform: none; }
  .split { gap:20px; align-content:start; }
  .problem-copy-only .scene-copy { width:min(620px,100%); display:block; text-align:center; }
  .problem-copy-only h2 { margin-inline:auto; }
  .problem-copy-only .task-list { text-align:left; }
  .scene-copy .step { margin-bottom:12px; }
  .task-list { margin-top:20px; gap:2px; }
  .task-list li { padding:10px 0; }
  .accent-line { margin-top:18px; }
  .wide-media { margin-top: 0; }
  .report-sticky { gap:20px; align-content:start; }
  .report-copy h2 { font-size:clamp(1.8rem,7.3vw,3.1rem); }
  .clean-list { margin-top:16px; gap:10px; }
  .telegram-line { margin-top:16px; }
  .phone-wrap { width: min(275px,66vw); }
  .phone,
  .phone-shot,
  .screen-card,
  .mini-phone { border-radius:26px; border-width:6px; }
  .feature, .feature.reverse, .extras, .finale { grid-template-columns:1fr; }
  .feature, .feature.reverse, .extras { gap:20px; align-content:start; }
  .feature, .feature.reverse { grid-template-rows:max-content max-content; }
  .feature::before,
  .feature.reverse::before {
    left:50%;
    right:auto;
    top:72%;
    width:min(110vw,520px);
    transform:translate(-50%,-50%);
    filter:blur(82px);
  }
  .finale { gap:42px; align-content:center; }
  .feature.reverse .feature-copy, .feature.reverse .screen-card { grid-column:auto; grid-row:auto; }
  .feature.reverse .feature-copy { order:0; }
  .feature.reverse .screen-card { order:1; margin-top:52px; }
  .screen-card { width:min(310px,72vw,calc(64svh * .4622)); }
  .screen-card.tall { width:min(310px,72vw,calc(66svh * .4622)); }
  .phone-shot { width:min(310px,72vw,calc(64svh * .4622)); }
  .trust-row { margin-top:14px; }
  .morning h2 { font-size:clamp(1.7rem,6vw,3.65rem); }
  .time { font-size:clamp(7rem,31vw,13rem); }
  .delivery-path { display:none; }
  .signal-pills { margin-top:20px; }
  .evidence-list { margin-top:20px; gap:12px; }
  .phone-pair { width:min(620px,88vw); height:min(72svh,650px); }
  .finale { padding-top:130px; }
  .final-copy h2 { font-size:clamp(2.6rem,10.7vw,4.35rem); }

  .phone::before,
  .phone-shot::before,
  .screen-card::before,
  .mini-phone::before { height:20px; border-radius:0 0 13px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html, body, main { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity:1; transform:none; }
  [data-depth] { transform:none !important; }
}