:root{
    --pink:#ff6fb3; --yellow:#ffe066; --blue:#6ec3ff; --green:#6fe28f;
    --purple:#a085ff; --orange:#ff9f68; --ink:#241f3d; --ink-soft:#5b5478;
    --paper:#fff8ef; --card:#ffffff;
    --shadow:0 18px 50px rgba(40,30,80,.16), 0 4px 12px rgba(40,30,80,.08);
    --shadow-sm:0 8px 22px rgba(40,30,80,.12);
    --radius:26px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Fredoka',system-ui,-apple-system,sans-serif;
    color:var(--ink); background:var(--paper); overflow-x:hidden;
    -webkit-font-smoothing:antialiased; line-height:1.55;
  }
  h1,h2,h3{font-family:'Baloo 2',system-ui,sans-serif; line-height:1.08; letter-spacing:.2px;}
  a{color:inherit; text-decoration:none;}
  .wrap{width:min(1140px,92vw); margin:0 auto;}
  section{position:relative;}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:.55em; cursor:pointer;
    font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.08rem;
    padding:.85em 1.6em; border-radius:999px; border:0; color:#fff;
    background:linear-gradient(135deg,var(--pink),var(--purple));
    box-shadow:0 10px 24px rgba(160,90,200,.4); transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn:hover{transform:translateY(-3px) scale(1.02); box-shadow:0 16px 32px rgba(160,90,200,.5);}
  .btn:active{transform:translateY(0) scale(.99);}
  .btn.ghost{background:#fff; color:var(--ink); box-shadow:var(--shadow-sm);}
  .btn.ghost:hover{box-shadow:var(--shadow);}

  /* ---------- nav ---------- */
  nav{
    position:sticky; top:0; z-index:50; backdrop-filter:blur(12px);
    background:rgba(255,248,239,.78); border-bottom:1px solid rgba(40,30,80,.06);
  }
  nav .wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
  .brand{display:flex; align-items:center; gap:10px; font-family:'Baloo 2'; font-weight:800; font-size:1.45rem;}
  .brand .mark{
    width:42px; height:42px; border-radius:13px; display:grid; place-items:center; font-size:1.4rem;
    background:linear-gradient(135deg,var(--blue),var(--green)); box-shadow:var(--shadow-sm);
    animation:bob 3s ease-in-out infinite;
  }
  .brand b{background:linear-gradient(90deg,var(--pink),var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .nav-links{display:flex; align-items:center; gap:28px; font-weight:500;}
  .nav-links a.lk{color:var(--ink-soft); transition:color .15s;}
  .nav-links a.lk:hover{color:var(--ink);}
  @media(max-width:760px){ .nav-links .lk{display:none;} }

  /* ---------- hero ---------- */
  .hero{position:relative; padding:64px 0 40px; text-align:center; overflow:hidden;}
  .hero .pill{
    display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.95rem;
    padding:.5em 1.1em; border-radius:999px; background:#fff; box-shadow:var(--shadow-sm); margin-bottom:26px;
  }
  .hero .pill .dot{width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(111,226,143,.3); animation:pulse 1.8s ease-in-out infinite;}
  .hero h1{font-size:clamp(2.6rem,6.6vw,5rem); font-weight:800;}
  .hero h1 .grad{background:linear-gradient(100deg,var(--pink),var(--purple) 55%,var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .hero p.lead{font-size:clamp(1.05rem,2.4vw,1.4rem); color:var(--ink-soft); max-width:680px; margin:22px auto 0; font-weight:400;}
  .hero-video{width:min(760px,100%); display:block; margin:32px auto 0; border:4px solid #fff; border-radius:24px; background:#241f3d; box-shadow:var(--shadow);}
  .hero .cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px;}
  .hero .trust{margin-top:22px; color:var(--ink-soft); font-size:.95rem; display:flex; gap:18px; justify-content:center; flex-wrap:wrap;}
  .hero .trust span{display:inline-flex; align-items:center; gap:6px;}

  /* floating emoji field */
  .floaties{position:absolute; inset:0; pointer-events:none; z-index:0;}
  .floaties .e{position:absolute; font-size:2.6rem; opacity:.9; filter:drop-shadow(0 8px 14px rgba(40,30,80,.18)); animation:float 7s ease-in-out infinite;}
  .hero .wrap{position:relative; z-index:2;}

  /* blob backdrop */
  .blob{position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; z-index:0;}

  /* ---------- moving demo strip ---------- */
  .ticker{padding:14px 0; background:linear-gradient(90deg,var(--purple),var(--pink)); color:#fff; overflow:hidden; white-space:nowrap;}
  .ticker .track{display:inline-flex; gap:48px; animation:scroll 22s linear infinite; font-family:'Baloo 2'; font-weight:700; font-size:1.15rem;}
  .ticker .track span{display:inline-flex; align-items:center; gap:10px;}

  /* ---------- section heading ---------- */
  .head{text-align:center; max-width:680px; margin:0 auto 46px;}
  .head .kicker{font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:.82rem; color:var(--pink);}
  .head h2{font-size:clamp(2rem,4.6vw,3rem); font-weight:800; margin-top:10px;}
  .head p{color:var(--ink-soft); font-size:1.1rem; margin-top:14px; font-weight:400;}

  .block{padding:88px 0;}

  /* ---------- sports grid ---------- */
  .sports{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px;}
  .sport{
    position:relative; border-radius:var(--radius); padding:28px 24px 26px; overflow:hidden;
    background:var(--card); box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease;
    border:1px solid rgba(40,30,80,.05);
  }
  .sport:hover{transform:translateY(-8px) rotate(-.6deg); box-shadow:var(--shadow);}
  .sport .glow{position:absolute; top:-40px; right:-40px; width:130px; height:130px; border-radius:50%; filter:blur(34px); opacity:.45;}
  .sport .emoji{font-size:3rem; display:inline-block; animation:bob 3.4s ease-in-out infinite;}
  .sport h3{font-size:1.45rem; margin:14px 0 6px;}
  .sport .move{display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:600; color:var(--ink-soft); background:rgba(40,30,80,.05); padding:.35em .8em; border-radius:999px; margin-bottom:12px;}
  .sport p{color:var(--ink-soft); font-size:.98rem; font-weight:400;}
  .sport .levels{margin-top:14px; font-size:.82rem; font-weight:600; color:var(--ink-soft);}

  /* ---------- how it works ---------- */
  .steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px;}
  .step{text-align:center; padding:8px;}
  .step .num{
    width:74px; height:74px; margin:0 auto 16px; border-radius:24px; display:grid; place-items:center;
    font-family:'Baloo 2'; font-weight:800; font-size:2rem; color:#fff; box-shadow:var(--shadow-sm);
    position:relative; transform:rotate(-4deg);
  }
  .step h3{font-size:1.3rem; margin-bottom:8px;}
  .step p{color:var(--ink-soft); font-weight:400;}

  /* ---------- benefits ---------- */
  .benefits-wrap{background:linear-gradient(160deg,#fff,#fff5fb); border-radius:34px; padding:54px clamp(24px,5vw,64px); box-shadow:var(--shadow-sm);}
  .benefits{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:30px; margin-top:8px;}
  .benefit{display:flex; gap:16px; align-items:flex-start;}
  .benefit .ico{flex:none; width:54px; height:54px; border-radius:16px; display:grid; place-items:center; font-size:1.7rem; box-shadow:var(--shadow-sm);}
  .benefit h3{font-size:1.18rem; margin-bottom:4px;}
  .benefit p{color:var(--ink-soft); font-size:.96rem; font-weight:400;}

  /* ---------- stats ---------- */
  .stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:18px; text-align:center;}
  .stat{background:var(--card); border-radius:var(--radius); padding:30px 18px; box-shadow:var(--shadow-sm); border:1px solid rgba(40,30,80,.05);}
  .stat .big{font-family:'Baloo 2'; font-weight:800; font-size:2.6rem; background:linear-gradient(120deg,var(--pink),var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .stat .lbl{color:var(--ink-soft); font-weight:500; margin-top:4px;}

  /* ---------- final CTA ---------- */
  .final{
    text-align:center; border-radius:40px; padding:70px clamp(24px,6vw,80px); overflow:hidden; position:relative;
    background:linear-gradient(135deg,var(--purple),var(--pink) 60%,var(--orange)); color:#fff;
    box-shadow:0 30px 60px rgba(160,90,200,.35);
  }
  .final h2{font-size:clamp(2rem,5vw,3.4rem); font-weight:800;}
  .final p{font-size:1.2rem; max-width:560px; margin:18px auto 0; opacity:.95; font-weight:400;}
  .final .btn{background:#fff; color:var(--purple); margin-top:32px; font-size:1.2rem; box-shadow:0 14px 30px rgba(0,0,0,.18);}
  .final .e{position:absolute; font-size:3rem; opacity:.5; animation:float 6s ease-in-out infinite;}

  /* ---------- footer ---------- */
  footer{padding:46px 0 60px; text-align:center; color:var(--ink-soft);}
  footer .brand{justify-content:center; margin-bottom:14px;}
  footer .small{font-size:.9rem; margin-top:10px;}
  footer .product{font-size:.9rem; margin-top:14px;}

  /* ---------- reveal ---------- */
  .reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1; transform:none;}

  /* ---------- animations ---------- */
  @keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
  @keyframes float{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-26px) rotate(6deg);}}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(111,226,143,.3);}50%{box-shadow:0 0 0 9px rgba(111,226,143,0);}}
  @keyframes scroll{to{transform:translateX(-50%);}}
  @media(prefers-reduced-motion:reduce){*{animation:none!important;} .reveal{opacity:1; transform:none;}}


/* Shared public navigation: keep Play free and the menu together on phones. */
.site-nav .wrap { position:relative; flex-wrap:wrap; gap:12px; }
.site-nav .brand { flex-shrink:0; gap:8px; font-size:1.25rem; }
.site-nav .brand .mark { animation:none; width:36px; height:36px; }
.nav-actions { display:flex; align-items:center; gap:10px; order:3; }
.site-nav .nav-links { margin-left:auto; gap:18px; font-size:.92rem; }
.nav-play { font-size:1rem; padding:.6em 1.1em; white-space:nowrap; }
.menu-toggle { display:none; width:44px; height:44px; border:1px solid #ded4ed; border-radius:14px; background:#fff; cursor:pointer; padding:12px 10px; }
.menu-toggle span { display:block; height:2px; margin:4px 0; background:var(--ink); border-radius:2px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline:3px solid #7252cf; outline-offset:4px; }
.tv-kicker { color:#7252cf; font-weight:700; font-size:.82rem; letter-spacing:1.7px; }
.tv-home { background:linear-gradient(150deg,#f1eaff,#fff8ef 65%,#e9f7ff); }
.tv-feature { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:36px; }
.tv-feature h2 { font-size:clamp(2rem,4.4vw,3.2rem); margin:12px 0 18px; }
.tv-feature-copy > p, .tv-hero p { font-size:1.15rem; color:var(--ink-soft); }
.tv-mini-steps { margin:24px 0; padding-left:24px; color:var(--ink-soft); }
.tv-mini-steps li { padding:5px 0 5px 8px; }
.tv-mini-steps li::marker { color:#7252cf; font-weight:700; }
.tv-feature-art { margin:0; }
.tv-feature-art img { width:100%; height:auto; display:block; }
.tv-feature-art figcaption { text-align:center; font-size:.92rem; color:var(--ink-soft); margin-top:12px; }
.tv-hero { display:grid; grid-template-columns:1fr 1.1fr; gap:32px; padding-top:72px; align-items:center; }
.tv-hero h1 { font-size:clamp(3rem,6vw,4.8rem); margin:14px 0 22px; }
.tv-gradient { color:#865cd5; }
.tv-hero .btn { margin-top:24px; }
.tv-text-link { display:block; margin-top:20px; color:#7252cf; }
.tv-hero .tv-note { font-size:.9rem; margin-top:20px; }
.tv-setup-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tv-setup-card { background:white; border-radius:26px; padding:20px 24px 28px; box-shadow:var(--shadow-sm); }
.tv-setup-card img { width:100%; height:auto; display:block; margin-bottom:16px; }
.tv-step-number { display:inline-block; background:#eee7ff; color:#7252cf; border-radius:10px; padding:4px 10px; margin-bottom:14px; font-weight:700; }
.tv-setup-card h3 { font-size:1.6rem; margin-bottom:12px; }
.tv-setup-card p { color:var(--ink-soft); }
.tv-tips { display:grid; grid-template-columns:1fr 1fr; gap:48px; padding:36px; border-radius:28px; background:#eee7ff; }
.tv-tips h2 { font-size:2.4rem; margin:12px 0; }
.tv-tips p { color:var(--ink-soft); }
.tv-tips details { padding:16px 0; border-bottom:1px solid #d4c7ea; }
.tv-tips summary { cursor:pointer; font-weight:600; }
.tv-tips details p { padding-top:12px; font-size:.96rem; }
.tv-tips a { text-decoration:underline; }
@media(max-width:1100px) {
  .site-nav .nav-links { display:none; order:4; width:100%; margin:0; padding:10px 0; }
  .site-nav .nav-links .lk { display:block; padding:10px 14px; border-radius:10px; }
  .site-nav .nav-links .lk:hover { background:#eee7ff; }
  .menu-toggle { display:block; }
  .nav-actions { margin-left:auto; }
  .site-nav.menu-open .nav-links { display:flex; flex-direction:column; gap:0; align-items:stretch; }
  .tv-setup-grid { grid-template-columns:1fr; }
  .tv-setup-card { display:grid; grid-template-columns:220px 1fr; column-gap:24px; }
  .tv-setup-card img { grid-row:1 / 4; align-self:center; margin:0; }
  .tv-step-number { justify-self:start; }
}
@media(max-width:600px) {
  .site-nav .wrap { gap:8px; padding:10px 0; }
  .site-nav .brand { font-size:1rem; gap:5px; }
  .site-nav .brand .mark { width:28px; height:32px; font-size:1.1rem; border-radius:10px; }
  .nav-actions { gap:6px; }
  .nav-play { font-size:.88rem; padding:.6em .85em; }
  .menu-toggle { width:40px; height:40px; padding:9px; }
  .tv-feature, .tv-hero, .tv-tips { grid-template-columns:1fr; }
  .tv-hero { padding-top:42px; }
  .tv-home { padding:56px 0; }
  .tv-feature { gap:24px; }
  .tv-setup-card { display:block; }
  .tv-setup-card img { margin-bottom:16px; }
  .tv-tips { padding:24px; gap:20px; }
  .block { padding:56px 0; }
}
@media(max-width:350px) { .site-nav .brand { font-size:.9rem; } .site-nav .brand .mark { display:none; } }

@media(max-width:600px) { footer .brand { font-size:1.05rem; gap:6px; } footer .brand .mark { width:32px; height:32px; font-size:1.1rem; } }