*, *::before, 
*::after
 {
   box-sizing: border-box; 
  }


html, body 
{ height: 100%; 
  scroll-behavior: smooth; 
  }
body 
{ margin: 0; 
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
   background: #000; 
   color: #fff; 
  }

img, svg, video
{ 
  display: block;
   max-width: 100%; 
  height: auto; 
}

:root {
  --brand: #e50914;
  --brand-2: #b20710;
  --bg: #000;
  --text: #fff;
  --muted: #b3b3b3;
  --panel: #141414;
  --card: #0f0f0f;
  --divider: #232323;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.6);
  --container: 1200px;
}

.container 
{ width: min(100% - 2rem, var(--container)); 
  margin-inline: auto;
 }


.center
 {
   text-align: center;
   }


.muted 
{ 
  color: var(--muted); 
}


.sr-only 
{ 
  position: absolute;
  width: 1px; 
  height: 1px;
  padding: 0;
  margin: -1px; 
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; 
  border: 0; 
}


.nav
 { 
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(0,0,0,.8), rgba(0,0,0,0));
}


.nav__inner 
{ display: flex;
  align-items: center; 
  justify-content: space-between;
  padding: 1.25rem 0; 
}

.brand__wordmark 
{
  font-family: "Bebas Neue", Impact, system-ui;
  letter-spacing: .03em;
  font-size: 2rem;
  color: var(--brand); 
  text-shadow: 0 4px 20px rgba(229,9,20,.35); 
}

.select 
{ 
  background: rgba(0,0,0,.6); 
  color: var(--text);
  border: 1px solid #666;
  border-radius: 8px;
  padding: .5rem .75rem;
}


.btn
 {
  display: inline-flex;
  align-items: center; 
  gap: .5rem;
  padding: .75rem 1rem;
  border-radius: 10px; 
  text-decoration: none; 
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
 }

.btn--ghost 
{ 
  background: rgba(0,0,0,.6);
  border-color: #666; 
  color: #fff; 
}

.btn--primary 
{
   background: var(--brand); 
   color: #fff; 
   border-color: var(--brand-2);
   box-shadow: 0 10px 20px rgba(229,9,20,.35);
}

.btn--primary:hover
 {
   filter: brightness(1.05);
 }


.hero
 {
  position: relative;
  isolation: isolate;
 }

.hero__bg 
{ position: absolute;
  inset: 0;
  background:
  radial-gradient(1000px 500px at 70% -10%, rgba(229,9,20,.45), transparent 50%),
  radial-gradient(800px 400px at 20% -10%, rgba(229,9,20,.35), transparent 50%),
  linear-gradient(180deg, #000 0%, #0b0b0b 40%, #000 100%);
  filter: saturate(1.1);
}

.overlay
 {
   position: absolute; 
   inset: 0; 
   background: radial-gradient(1200px 600px at 50% -20%, rgba(0,0,0,.5), transparent 60%);
   }

.hero__content
 {
   position: relative; 
   padding: 8rem 0 5rem;
    text-align: center; 
  }

.hero h1
 { 
  font-size: clamp(2rem, 6vw, 3.5rem); 
  margin: 0 0 1rem; 
  font-weight: 800; 
  letter-spacing: -.02em; 
}

.hero .sub 
{ 
  font-size: clamp(1rem, 2.8vw, 1.5rem);
  margin: 0 0 1.25rem; color: #e5e5e5;
}

.cta__prompt
 { 
  color: #e5e5e5;
  margin-bottom: 1rem; 
 }

.cta 
{ 
  display: grid; 
  grid-template-columns: 1fr auto; 
  
  gap: .75rem; width: min(700px, 100%); margin: 0 auto;
 }

.cta--center 
{ margin-top: 1rem; 
}
.input 
{ 
  padding: 1rem 1rem;
   background: rgba(20,20,20,.8);
   border: 1px solid #555; 
   color: #fff; 
   border-radius: 10px; 
   font-size: 1rem; 
  }

.input::placeholder
 { 
  color: #9ca3af;
 }

.divider
 { 
  height: 8px; 
  background: var(--divider);
 }


.feature-row
 { 
  background: #000; 
}

.fr__grid 
{ 
  display: grid;
  align-items: center;
  gap: 2rem; 
  grid-template-columns: 1fr; 
  padding: 4rem 0; 
  }

.fr__grid--reverse .fr__text 
{ 
  order: 2;
}

@media
 (min-width: 900px)
  {
  .fr__grid
   { 
    grid-template-columns: 1fr 1fr; gap: 3rem;
   }
  .fr__grid--reverse .fr__text
   {
     order: 1;
     }
}

.fr__text h2 
{ 
  font-size: clamp(1.75rem, 3.5vw, 2.5rem); 
  margin-bottom: .75rem; 
}

.fr__text p

{ color: #e5e5e5;
   font-size: 1.075rem;
   }


.tv-frame
 {
   width: 100%;
   aspect-ratio: 16/10; 
   background: linear-gradient(180deg, #0f0f0f, #000);
    border-radius: var(--radius); 
    border: 3px solid #222; 
    position: relative; 
    box-shadow: var(--shadow);
  }

.tv-screen 
{ position: absolute;
  inset: 6% 6%;
  background: radial-gradient(800px 400px at 50% 50%, rgba(255,255,255,.1), rgba(0,0,0,.85)); 
  border-radius: 10px; 
} 

.tv-screen img {
  width: 100%;
  height: 100%;
  border-radius: 12px white ;
  object-fit: cover;
  display:block;
  overflow: hidden;

 
}

.mobile-card 
{ 
  width: min(420px, 100%); 
  margin-inline: auto; 
  background: var(--panel); 
  border: 2px solid #2a2a2a; 
  border-radius: calc(var(--radius) + 6px);
  padding: 1rem; 
  position: relative; 
  box-shadow: var(--shadow); 
}

.poster 
{ 
  height: 220px;
  border-radius: 12px; 
  background: linear-gradient(135deg, #1f2937, #0b0b0b); 
  border: 1px solid #333;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;           
  position: relative;
}


.poster img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
  display:block
}


.dl-pill 
{ 
  position: absolute; 
  left: 50%; bottom: -24px;
  transform: translateX(-50%);
  background: #000;
  border: 1px solid #2a2a2a; 
  border-radius: 999px; 
  padding: .5rem .75rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
  width: calc(100% - 3rem); 
}

.thumb
 { 
  width: 42px; 
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(135deg, #6b7280, #1f2937);
  border: 1px solid #333; 
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block
}

.pill__text 
{ 
  display: flex; 
  flex-direction: column; 
  line-height: 1.1; 
}

.pill__text strong
 { 
  font-size: .95rem;
 }

.pill__text span 
{
   font-size: .85rem; 
   color: #9ca3af; 
}

.spinner 
{ 
  width: 26px; 
  height: 26px;
   border: 3px solid #444; 
   border-top-color: #fff;
    border-radius: 50%; 
    animation: spin 1s linear infinite;
}


@keyframes spin
 {
   to 
   { 
    transform: rotate(360deg); 
   } 
 }


.devices
 {
   position: relative; 
   height: 240px; 
  }


.laptop, .tablet, .phone 
{
  
  position: absolute;
  background: linear-gradient(180deg, #0f0f0f, #000);
  border: 2px solid #222;
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;       
  display: flex;
  justify-content: center;
  align-items: center;
}

.laptop 
{ 
  width: 62%; 
  height: 70%;
  left: 0;
  bottom: 0; 
}

.tablet 
{
  width: 38%; 
  height: 58%;
  left: 55%;
  bottom: 10%;
  border-radius: 18px; 
}

.phone 
{ width: 22%;
  height: 48%;
  left: 72%; 
  bottom: 0; 
  border-radius: 22px;
}




.kid-card 
{ 
  width: min(420px, 100%);
  margin-inline: auto; 
  background: var(--panel); 
  border: 2px solid #2a2a2a; 
  border-radius: calc(var(--radius) + 6px); 
  padding: 1.25rem; 
  display: grid; 
  grid-template-columns: auto 1fr;
  gap: 1rem; 
  align-items: center; 
  }

.avatar 
{ 
  width: 64px;
   height: 64px;
   border-radius: 50%;
  background: radial-gradient(60px 60px at 35% 35%, #d97706, #7c2d12 70%); 
     border: 2px solid #2a2a2a; 
     overflow: hidden;
     display: flex;
    }

.kid-pill
 { 
  display: flex;
   flex-direction: column;
   }

.kid-pill span
 { 
  color: #9ca3af;
 }


.faq 
{
   background: #000;
    padding: 3rem 0;
   }

.faq h2 
{
   margin: 0 0 1rem;
 }

.faq details
 { 
  background: #2a2a2a;
   color: #fff;
    border-radius: 8px; 
    margin: 0 auto 12px; 
    padding: 1rem 1.25rem; 
    width: min(900px, 100%); 
    border: 1px solid #3a3a3a;
   }


.faq summary 
{ 
  cursor: pointer; 
  list-style: none;
   font-weight: 600; 
  }

.faq summary::-webkit-details-marker 
{ 
  display: none; 
}

.faq details[open]
 { 
  background: #3a3a3a; 
}

.faq .answer
 {
   margin-top: .75rem; 
   color: #e5e5e5;
   }


.footer 
{
   background: #000;
   padding: 3rem 0; 
  }

.footer__grid 
{ 
  display: grid;
   gap: 1.5rem; 
  }

.footer__links 
{ list-style: none;
  padding: 0;
  margin: 0; 
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem 1rem; 
}

.footer__links a
 { 
  color: #b3b3b3; 
  text-decoration: none;
 }

.footer__links a:hover
 {
   text-decoration: underline; 
}

.footer__bottom
{
   display: flex; 
   align-items: center;
   gap: 1rem; 
   margin-top: .5rem; 
}

.select--footer
 {
   background: transparent; 
 }


@media (min-width: 700px)
 {
  .footer__links 
  { 
    grid-template-columns: repeat(4, 1fr);
   }
}

@media (max-width: 700px) 
{
  .cta 
  { grid-template-columns: 1fr; }
}