/* Fraszov Insider — compact, mobile-first landing page
   Design tokens: one type scale, one radius scale, one spacing rhythm. */
:root{
  --bg:#000;
  --surface:#0e0e0f;
  --surface-2:#161618;
  --chip:#1c1c1e;
  --line:#1f1f22;
  --text:#fff;
  --text-2:#a1a1a6;
  --muted:#8e8e93;
  --faint:#636366;
  --accent:#7BC0E9;
  --accent-hover:#8ccaef;
  --accent-press:#68b2de;
  --live:#FF3B30;
  --pad:20px;
  --r-sm:8px; --r-md:12px; --r-lg:14px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --card-w:124px;
  --thumb-h:178px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--bg); -webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-x:hidden; }
@supports (overflow:clip){ html{ overflow-x:clip; } }
body{
  margin:0; min-height:100%; background:var(--bg); color:var(--text);
  font-family:var(--font); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
@supports (overflow:clip){ body{ overflow-x:clip; } }
p{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
img{ display:block; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:10px; }

/* ---------- Page ---------- */
.page{
  max-width:440px; margin:0 auto;
  padding:calc(max(var(--safe-t), 12px) + 18px) calc(var(--pad) + var(--safe-r)) calc(max(var(--safe-b), 12px) + 16px) calc(var(--pad) + var(--safe-l));
  display:flex; flex-direction:column; align-items:stretch;
}

/* ---------- Brand ---------- */
.brand{ display:flex; align-items:center; justify-content:center; gap:12px; }
.brand__ring{ flex:0 0 auto; width:52px; height:52px; border-radius:50%; padding:2px; box-shadow:inset 0 0 0 1.5px var(--accent); }
.brand__ring img{ width:100%; height:100%; border-radius:50%; object-fit:cover; border:2px solid var(--bg); background:var(--surface-2); }
.brand__ring[hidden]{ display:none; }
.brand__text{ display:flex; flex-direction:column; text-align:left; }
.brand__name{ font-size:18px; font-weight:650; letter-spacing:-.02em; line-height:1.2; }
.brand__handle{ margin-top:1px; font-size:14px; color:var(--muted); line-height:1.25; }

/* ---------- Hero ---------- */
.hero{ text-align:center; margin-top:22px; }
.hero__title{
  margin:0; font-weight:700; letter-spacing:-.032em; line-height:1.1;
  font-size:var(--h1-fit, min(6.8vw, 31px));
}
.hero__l1,.hero__l2{ display:block; white-space:nowrap; }
.hero__title .accent{ color:var(--accent); }
.hero__l2{ color:var(--text-2); margin-top:2px; }
.hero__desc{
  margin:12px auto 0; max-width:340px;
  font-size:14.5px; line-height:1.5; color:var(--muted); letter-spacing:-.006em;
  text-wrap:balance;
}

/* ---------- CTA ---------- */
.cta-wrap{ display:flex; justify-content:center; margin-top:20px; }
.cta{
  display:inline-flex; align-items:center; justify-content:center;
  height:50px; min-width:184px; padding:0 44px; border-radius:var(--r-md);
  background:var(--accent); color:#06090c;
  font-size:17px; font-weight:650; letter-spacing:-.015em;
  transition:transform .16s var(--ease), background-color .16s ease;
  touch-action:manipulation; user-select:none; -webkit-user-select:none;
}
@media (hover:hover){ .cta:hover{ background:var(--accent-hover); } }
.cta:active{ transform:scale(.965); background:var(--accent-press); transition-duration:.08s; }

/* ---------- Social proof ---------- */
.proof{ margin:16px auto 0; display:flex; align-items:center; gap:10px; touch-action:manipulation; }
.proof__faces{ display:flex; padding-left:8px; }
.proof__faces img{ width:32px; height:32px; border-radius:50%; object-fit:cover; margin-left:-8px; box-shadow:0 0 0 2px var(--bg); background:var(--surface-2); }
.proof__text{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.proof__stars{ display:flex; gap:1.5px; }
.proof__stars svg{ width:13px; height:13px; fill:#F5B70A; }
.proof__title{ font-size:13.5px; font-weight:600; letter-spacing:-.01em; line-height:1.15; white-space:nowrap; }
.proof[hidden]{ display:none; }

/* ---------- Testimonial marquee ---------- */
.reviews{ margin-top:22px; }
.marquee{
  position:relative; overflow:hidden;
  margin:0 calc(-1 * (var(--pad) + var(--safe-r))) 0 calc(-1 * (var(--pad) + var(--safe-l)));
  touch-action:pan-y;           /* vertical page scroll stays native; horizontal drag is ours */
  cursor:grab; user-select:none; -webkit-user-select:none;
}
.marquee.is-drag{ cursor:grabbing; }
.track{ display:flex; gap:10px; width:max-content; will-change:transform; transform:translate3d(0,0,0); }
.card{
  flex:0 0 var(--card-w); width:var(--card-w);
  display:flex; flex-direction:column; text-align:left;
  -webkit-user-drag:none;
}
.card__media{
  position:relative; width:100%; height:var(--thumb-h);
  border-radius:var(--r-lg); overflow:hidden; background:var(--surface-2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .18s var(--ease);
}
.card__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 32%; pointer-events:none; -webkit-user-drag:none; }
.card__media .play{ position:absolute; left:8px; bottom:8px; }
.card:active .card__media{ transform:scale(.98); }
.card__label{ margin-top:8px; font-size:12.5px; font-weight:600; line-height:1.25; letter-spacing:-.01em; white-space:nowrap; }
.card__result{ margin-top:2px; font-size:13px; font-weight:650; line-height:1.25; letter-spacing:-.01em; color:var(--accent); white-space:nowrap; }
.disclosure{ margin-top:10px; font-size:11px; line-height:1.4; color:var(--faint); text-align:center; }

/* Play icon */
.play{
  display:inline-grid; place-items:center;
  width:28px; height:28px; border-radius:50%;
  background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
.play::before{ content:""; margin-left:2px; border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent #fff; }
.play--sm{ width:22px; height:22px; }
.play--sm::before{ border-width:4px 0 4px 6.5px; }
.play--accent{ width:34px; height:34px; background:var(--chip); box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.play--accent::before{ border-color:transparent transparent transparent var(--accent); }

/* ---------- VIP card ---------- */
.vip{
  margin-top:22px; width:100%;
  display:flex; align-items:center; gap:12px; text-align:left;
  padding:10px 12px 10px 10px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line);
  transition:background-color .16s ease, transform .16s var(--ease);
  touch-action:manipulation;
}
.vip:active{ background:var(--surface-2); transform:scale(.99); }
@media (hover:hover){ .vip:hover{ background:var(--surface-2); } }
.vip__thumb{ position:relative; flex:0 0 auto; width:44px; height:56px; border-radius:var(--r-sm); overflow:hidden; background:var(--surface-2); }
.vip__thumb img{ width:100%; height:100%; object-fit:cover; opacity:.8; }
.vip__thumb .play{ position:absolute; inset:0; margin:auto; }
.vip__text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.vip__title{ font-size:15px; font-weight:600; letter-spacing:-.015em; line-height:1.25; }
.vip__sub{ font-size:12.5px; line-height:1.4; color:var(--muted); }
.vip.is-disabled{ opacity:.5; pointer-events:none; }

/* ---------- LIVE ---------- */
.live{ margin-top:24px; text-align:center; }
.live__title{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; letter-spacing:-.015em; line-height:1.3; }
.live__title b{ color:var(--live); font-weight:700; letter-spacing:.02em; }
.live__dot{ flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--live); }
.live__sub{ margin:4px auto 0; max-width:320px; font-size:12.5px; line-height:1.4; color:var(--muted); text-wrap:balance; }
.socials{ display:flex; justify-content:center; gap:10px; margin-top:12px; }
.socials[hidden]{ display:none; }
.social{ display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--chip); transition:background-color .15s ease, transform .15s var(--ease); }
.social svg{ width:15px; height:15px; fill:#e8e8ed; }
.social--youtube svg{ fill:#FF0033; }
.social--kick svg{ fill:#53FC18; width:13px; height:13px; }
.social:active{ transform:scale(.94); background:#2a2a2d; }
@media (hover:hover){ .social:hover{ background:#2a2a2d; } }

/* ---------- Risk disclaimer ---------- */
.risk{ margin:28px auto 0; max-width:380px; text-align:center; }
.risk p{ font-size:11px; line-height:1.55; color:var(--faint); }
.risk strong{ color:var(--muted); font-weight:600; }

/* ---------- Entrance animations (only when <html class="anim">) ---------- */
@keyframes rise{ from{ opacity:0; transform:translate3d(0,10px,0); } }
.anim [data-in]{ animation:rise .5s var(--ease) both; animation-delay:var(--d, calc(var(--i, 0) * 80ms)); }
.anim [data-reveal]{ opacity:0; transform:translate3d(0,14px,0); transition:opacity .45s ease, transform .55s var(--ease); }
.anim [data-reveal].in{ opacity:1; transform:none; }
.anim .proof__faces img{ animation:rise .45s var(--ease) both; }

/* ---------- Video player ---------- */
.player{
  position:fixed; inset:0; z-index:50; background:#000;
  display:flex; flex-direction:column;
  padding:max(var(--safe-t),10px) var(--safe-r) max(var(--safe-b),10px) var(--safe-l);
  animation:fadeIn .18s ease;
}
.player[hidden],.consent[hidden]{ display:none; }
.player__top{ display:flex; align-items:flex-start; gap:12px; padding:6px 14px 10px 18px; }
.player__meta{ flex:1 1 auto; min-width:0; padding-top:4px; }
.player__title{ font-size:16px; font-weight:650; letter-spacing:-.01em; }
.player__caption{ margin-top:3px; font-size:13px; color:var(--accent); }
.player__caption:empty{ display:none; }
.player__stage{ position:relative; flex:1 1 0; min-height:0; overflow:hidden; display:grid; place-items:center; }
.player__stage video{ position:absolute; inset:0; margin:auto; width:100%; height:100%; max-width:520px; object-fit:contain; background:#000; }
@media (min-width:600px){ .player__stage video{ border-radius:14px; } }
.player__spinner{ position:absolute; width:30px; height:30px; border-radius:50%; border:2.5px solid rgba(255,255,255,.18); border-top-color:var(--accent); animation:spin .8s linear infinite; pointer-events:none; opacity:0; transition:opacity .2s; }
.player.is-loading .player__spinner{ opacity:1; }
.player__bottom{ display:flex; align-items:center; justify-content:center; gap:22px; padding:10px 14px 2px; }
.player__bottom[hidden]{ display:none; }
.player__count{ font-size:13px; color:var(--muted); min-width:48px; text-align:center; font-variant-numeric:tabular-nums; }
.player__disclosure{ padding:6px 22px 2px; text-align:center; font-size:10.5px; color:#6b6e75; }
.player__disclosure:empty{ display:none; }

.iconbtn{
  flex:0 0 auto; display:grid; place-items:center;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  touch-action:manipulation;
}
.iconbtn:active{ background:rgba(255,255,255,.18); }
.iconbtn:disabled{ opacity:.3; }
.x{ position:relative; width:14px; height:14px; }
.x::before,.x::after{ content:""; position:absolute; left:50%; top:50%; width:16px; height:1.75px; background:#fff; border-radius:2px; }
.x::before{ transform:translate(-50%,-50%) rotate(45deg); }
.x::after{ transform:translate(-50%,-50%) rotate(-45deg); }
.chev{ width:9px; height:9px; border:solid #fff; border-width:0 0 1.75px 1.75px; }
.chev--l{ transform:translateX(2px) rotate(45deg); }
.chev--r{ transform:translateX(-2px) rotate(-135deg); }

/* ---------- Consent ---------- */
.consent{
  position:fixed; z-index:60; left:12px; right:12px; bottom:calc(max(var(--safe-b),10px) + 6px);
  max-width:436px; margin:0 auto; padding:12px 12px 12px 16px;
  display:flex; align-items:center; gap:12px;
  background:#16171a; border-radius:14px; box-shadow:inset 0 0 0 1px var(--line), 0 10px 40px rgba(0,0,0,.6);
  font-size:12.5px; line-height:1.35; color:var(--text-2);
}
.consent p{ flex:1 1 auto; }
.consent__btns{ display:flex; gap:6px; }
.consent button{ height:34px; padding:0 12px; border-radius:9px; font-size:13px; font-weight:600; background:rgba(255,255,255,.08); }
.consent button.is-accent{ background:var(--accent); color:#05080c; }

@keyframes fadeIn{ from{ opacity:0; } }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Larger screens ---------- */
@media (min-width:400px){ :root{ --card-w:130px; --thumb-h:186px; } }
@media (min-width:600px){
  :root{ --card-w:140px; --thumb-h:200px; }
  .page{ padding-top:56px; }
  .marquee{ margin:0; border-radius:var(--r-lg); }
  .card:hover .card__media{ box-shadow:inset 0 0 0 1px rgba(123,192,233,.55); }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}