/* ════════════════════════════════════════════════════════════
   TOP TV SINGLE — landing page
   Portrait-only, fullscreen reel + translucent payment sheet.
   ════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}

:root{
  --c-primary:#1668ff;
  --c-accent:#0a3fa8;
  --glass:rgba(9,20,44,.52);
  --glass-line:rgba(255,255,255,.16);
  --txt:#f2f6ff;
  --txt-dim:rgba(228,238,255,.74);
  --radius:20px;
}

body{
  background:#000;
  color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}

/* ─────────────── stage / portrait frame ─────────────── */

.stage{
  position:fixed;
  inset:0;
  overflow:hidden;
  background:#000;
  /* Phones: the frame is the whole viewport. */
  --fw:100vw;
  --fh:100vh;
  --fh:100dvh;
}

/* Anything wider than a portrait phone gets a centred 9:16 frame,
   because the source material is recorded portrait. */
@media (min-aspect-ratio:10/16){
  .stage{--fh:100dvh;--fw:calc(100dvh * 9 / 16)}
}

.reel{
  position:absolute;
  top:50%;left:50%;
  width:var(--fw);
  height:var(--fh);
  transform:translate(-50%,-50%);
  overflow:hidden;
  background:#000;
}

/* Each clip is a full-frame layer. New clips enter from the right,
   the outgoing clip exits to the left. */
.slide{
  position:absolute;
  inset:0;
  transform:translate3d(100%,0,0);
  transition:transform .5s cubic-bezier(.4,0,.2,1);
  will-change:transform;
  backface-visibility:hidden;
  background:#000;
}
.slide.is-active{transform:translate3d(0,0,0);z-index:2}
.slide.is-prev{transform:translate3d(-100%,0,0);z-index:1}

.slide-poster{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  filter:blur(1px);
  transform:scale(1.04);
}

.slide-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  background:#000;
}

.empty{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:24px;
  background:radial-gradient(120% 90% at 50% 30%,#12203f 0%,#05080f 100%);
  color:var(--txt-dim);
}
.empty-ico{font-size:52px;opacity:.85}
.empty p{margin:0;font-size:15px;line-height:1.6}

/* The reel carries no on-screen controls at all — no play button, no sound
   badge, no prompts. Nothing is ever drawn over the video except the payment
   card itself. */

/* ─────────────── payment card (small, centred, translucent) ───────────────
   Kept deliberately compact so the reel stays visible all around it. */

.sheet-wrap{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  padding:18px;
  /* Light veil only — the video must read clearly behind and around the card. */
  background:rgba(0,0,0,.28);
  animation:fadeIn .25s ease both;
}
.sheet-wrap[hidden]{display:none}

.sheet{
  width:100%;
  max-width:300px;
  padding:18px 16px 16px;
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--glass-line);
  border-radius:18px;
  box-shadow:0 18px 46px rgba(0,0,0,.5);
  animation:popIn .32s cubic-bezier(.22,1.2,.36,1) both;
  max-height:82dvh;
  overflow-y:auto;
  text-align:center;
}

.sheet-title{
  margin:0 0 6px;
  font-size:13.5px;line-height:1.35;font-weight:800;
  letter-spacing:.2px;
}
.sheet-desc{
  margin:0 0 11px;
  font-size:11px;line-height:1.5;
  color:var(--txt-dim);
}

.price{
  display:flex;align-items:baseline;justify-content:center;gap:5px;
  margin:0 auto 12px;padding:6px 15px;width:fit-content;
  border-radius:99px;
  background:linear-gradient(135deg,var(--c-primary),var(--c-accent));
  box-shadow:0 5px 16px rgba(22,104,255,.34);
}
.price b{font-size:19px;font-weight:800;letter-spacing:-.4px}
.price span{font-size:10.5px;font-weight:600;opacity:.9}

.err{
  margin:0 0 10px;padding:8px 10px;
  border-radius:10px;
  background:rgba(220,38,38,.22);
  border:1px solid rgba(248,113,113,.5);
  color:#ffd9d9;font-size:12px;font-weight:700;line-height:1.4;
}
.err[hidden]{display:none}

.fld-label{
  display:block;margin:0 0 6px;
  font-size:9.5px;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;
  color:var(--txt-dim);text-align:left;
}
.fld{
  display:flex;align-items:stretch;
  border:1.5px solid rgba(255,255,255,.2);
  border-radius:14px;
  background:rgba(255,255,255,.09);
  overflow:hidden;
  transition:border-color .18s,box-shadow .18s;
}
.fld:focus-within{
  border-color:var(--c-primary);
  box-shadow:0 0 0 3px rgba(22,104,255,.25);
}
.fld-cc{
  display:grid;place-items:center;
  padding:0 10px;
  font-size:13px;font-weight:700;
  color:#fff;
  background:rgba(255,255,255,.1);
  border-right:1px solid rgba(255,255,255,.14);
}
.fld input{
  flex:1;min-width:0;
  padding:11px 11px;
  border:0;outline:0;background:transparent;
  color:#fff;font-size:15px;font-weight:600;letter-spacing:.5px;
  font-family:inherit;
}
.fld input::placeholder{color:rgba(255,255,255,.4);font-weight:500;letter-spacing:.3px;font-size:13px}

.fld-hint{
  margin:6px 2px 0;
  font-size:10.5px;line-height:1.4;
  color:var(--txt-dim);
  min-height:15px;text-align:left;
}
.fld-hint.ok{color:#7dffb0}
.fld-hint.bad{color:#ff9d9d;font-weight:700}

.btn{
  width:100%;margin-top:12px;
  padding:12px 16px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  border:0;border-radius:12px;
  background:linear-gradient(135deg,var(--c-primary),var(--c-accent));
  color:#fff;font-size:14.5px;font-weight:800;font-family:inherit;
  letter-spacing:.3px;cursor:pointer;
  box-shadow:0 6px 20px rgba(22,104,255,.4);
  transition:transform .12s,opacity .2s;
}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.6;cursor:not-allowed}

.spin{
  width:17px;height:17px;flex:none;
  border:2.2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite;
}
.spin.dark{border-color:rgba(22,104,255,.3);border-top-color:var(--c-primary)}
.spin[hidden]{display:none}

/* status panes */
.st-ico{font-size:34px;text-align:center;margin:2px 0 8px;line-height:1}
.st-ico.ok{filter:drop-shadow(0 4px 14px rgba(34,197,94,.5))}
.st-ico.bad{filter:drop-shadow(0 4px 14px rgba(248,113,113,.4))}
.st-title{margin:0 0 6px;font-size:15px;font-weight:800;text-align:center}
.st-body{margin:0 0 11px;font-size:11.5px;line-height:1.5;color:var(--txt-dim);text-align:center}
.st-tip{
  display:flex;align-items:center;gap:8px;
  padding:9px 10px;margin-bottom:11px;
  border-radius:10px;
  background:rgba(22,104,255,.16);
  border:1px solid rgba(22,104,255,.34);
  font-size:10.5px;line-height:1.4;color:#dfe9ff;text-align:left;
}
.st-tip svg{width:14px;height:14px;flex:none;color:var(--c-primary)}
.st-poll{margin:10px 0 0;font-size:10.5px;text-align:center;color:var(--txt-dim)}
.st-redir{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:11.5px;color:var(--txt-dim);
}
.dots{display:flex;gap:6px;justify-content:center;margin-top:3px}
.dots span{
  width:7px;height:7px;border-radius:50%;
  background:var(--c-primary);
  animation:bounce 1.3s infinite ease-in-out both;
}
.dots span:nth-child(2){animation-delay:.18s}
.dots span:nth-child(3){animation-delay:.36s}

/* ─────────────── portrait guard ─────────────── */

.rotate-guard{
  position:fixed;inset:0;z-index:200;
  display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:20px;
  background:#04070f;color:#dbe6ff;text-align:center;
}
.rotate-guard p{margin:0;font-size:15px;font-weight:600;line-height:1.7}
.rotate-guard small{font-size:12px;font-weight:400;opacity:.6}
.rotate-phone{
  width:52px;height:86px;
  border:3px solid var(--c-primary);
  border-radius:11px;
  animation:rotatePhone 2.4s ease-in-out infinite;
}
/* Landscape on a handset → block. Tablets/desktops stay usable. */
@media (orientation:landscape) and (max-height:560px){
  .rotate-guard{display:flex}
}

/* ─────────────── keyframes ─────────────── */

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bounce{0%,80%,100%{transform:scale(.55);opacity:.45}40%{transform:scale(1);opacity:1}}
@keyframes rotatePhone{0%,45%{transform:rotate(90deg)}55%,100%{transform:rotate(0)}}

@media (prefers-reduced-motion:reduce){
  .slide{transition-duration:.01ms}
  .sheet,.sheet-wrap{animation-duration:.01ms}
  .dots span,.rotate-phone{animation:none}
}