:root{
  --bg:#08080a;
  --panel:#151218;
  --panel2:#211a22;
  --cream:#fff1cf;
  --paper:#f6ddb0;
  --muted:#c9baa4;
  --line:rgba(255,241,207,.16);
  --line2:rgba(255,241,207,.26);
  --tomato:#ff4d3f;
  --tomato2:#b71f23;
  --gold:#f4c55a;
  --green:#37b56d;
  --blue:#62dbe8;
  --purple:#bca0ff;
  --ink:#21160f;
  --shadow:0 24px 80px rgba(0,0,0,.42);
  --radius:30px;
  --max:1200px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  min-height:100%;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--cream);
  background:
    radial-gradient(circle at 12% 0%,rgba(255,77,63,.24),transparent 30rem),
    radial-gradient(circle at 90% 5%,rgba(98,219,232,.14),transparent 34rem),
    radial-gradient(circle at 55% 45%,rgba(244,197,90,.08),transparent 32rem),
    linear-gradient(180deg,#111016 0%,#070707 82%);
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  opacity:.065;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent 82%);
}

a{color:inherit}

img{max-width:100%}

.shell{
  width:min(var(--max),calc(100% - 28px));
  margin-inline:auto;
}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid var(--line);
  background:rgba(8,8,10,.86);
  backdrop-filter:blur(16px);
}

.nav{
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
  font-weight:950;
  letter-spacing:-.045em;
  font-size:clamp(1.08rem,2.8vw,1.48rem);
  white-space:nowrap;
}

.logo{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(145deg,#ff6758,#ba2025);
  box-shadow:0 12px 32px rgba(255,77,63,.28);
  transform:rotate(-4deg);
}

.logo span{
  transform:rotate(4deg);
  font-size:1.4rem;
}

.nav-links{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nav-links a,
.btn{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  border:1px solid var(--line);
  border-radius:999px;
  padding:.72rem 1rem;
  color:var(--cream);
  background:rgba(255,241,207,.07);
  text-decoration:none;
  font-weight:900;
  cursor:pointer;
  transition:.16s ease;
}

.nav-links a.active,
.nav-links a:hover,
.btn:hover{
  background:rgba(255,241,207,.14);
  transform:translateY(-1px);
}

.btn.primary{
  border:0;
  color:#fff;
  background:linear-gradient(135deg,var(--tomato),var(--tomato2));
  box-shadow:0 14px 36px rgba(255,77,63,.28);
}

.btn.gold{
  border:0;
  color:var(--ink);
  background:linear-gradient(135deg,#ffe08a,#f4b83f);
}

.hero{
  min-height:calc(100vh - 74px);
  padding:clamp(2rem,6vw,5.5rem) 0;
  display:grid;
  align-items:center;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:clamp(1.4rem,4vw,3.5rem);
  align-items:center;
}

.eyebrow{
  display:inline-flex;
  width:fit-content;
  align-items:center;
  gap:.45rem;
  margin:0 0 .85rem;
  padding:.5rem .8rem;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--paper);
  background:rgba(255,241,207,.075);
  font-size:.76rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:950;
}

h1,h2,h3{
  margin:0;
  line-height:.94;
  letter-spacing:-.075em;
}

h1{
  font-size:clamp(2.8rem,7vw,6.4rem);
}

h2{
  font-size:clamp(2.05rem,4.8vw,4.2rem);
}

h3{
  font-size:clamp(1.45rem,3vw,2.35rem);
}

p{
  color:var(--muted);
  line-height:1.55;
  font-size:1.06rem;
}

.hero p{
  max-width:720px;
  font-size:clamp(1.1rem,2.2vw,1.38rem);
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1.25rem;
}

.phone-stage{
  min-height:600px;
  position:relative;
}

.hero-phone{
  position:absolute;
  width:min(225px,38vw);
  filter:drop-shadow(0 28px 45px rgba(0,0,0,.58));
}

.hero-phone.one{left:3%;top:22%;transform:rotate(-8deg)}
.hero-phone.two{left:36%;top:0;transform:rotate(3deg);z-index:2}
.hero-phone.three{right:2%;top:23%;transform:rotate(8deg)}

.phone{
  overflow:hidden;
  border:8px solid #050506;
  border-radius:26px;
  background:#050506;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}

.phone img{
  width:100%;
  display:block;
}

.float-card{
  position:absolute;
  left:8%;
  right:6%;
  bottom:5%;
  z-index:4;
  border:1px solid var(--line2);
  border-radius:24px;
  background:rgba(15,13,16,.82);
  backdrop-filter:blur(16px);
  box-shadow:var(--shadow);
  padding:1rem;
}

.float-card strong{
  display:block;
  font-size:1.05rem;
  margin-bottom:.25rem;
}

.float-card p{
  margin:0;
  font-size:.95rem;
}

.section{
  padding:clamp(2.5rem,6vw,5.5rem) 0;
}

.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:1.5rem;
  margin-bottom:1.35rem;
}

.section-head p{
  max-width:560px;
  margin:0;
}

.center{
  text-align:center;
}

.center .eyebrow{
  margin-left:auto;
  margin-right:auto;
}

.catalogue-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}

.product-card{
  min-height:100%;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,241,207,.1),rgba(255,241,207,.04));
  box-shadow:0 18px 60px rgba(0,0,0,.28);
  text-decoration:none;
}

.product-art{
  min-height:285px;
  display:grid;
  place-items:center;
  padding:1rem;
}

.product-card.station .product-art{background:linear-gradient(135deg,#154f69,#0b0f18)}
.product-card.zoo .product-art{background:linear-gradient(135deg,#dff2bd,#236d39)}
.product-card.rumour .product-art{background:linear-gradient(135deg,#e6c792,#331111)}

.product-art .phone{
  width:150px;
  transform:translateY(1rem);
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));
}

.product-body{
  display:flex;
  flex-direction:column;
  flex:1;
  gap:.9rem;
  padding:1.15rem;
}

.product-body p{
  margin:0;
}

.tags{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.42rem;
}

.tags li{
  border:1px solid var(--line);
  border-radius:999px;
  padding:.42rem .6rem;
  background:rgba(255,241,207,.07);
  color:var(--paper);
  font-weight:850;
  font-size:.82rem;
}

.product-body .btn{
  margin-top:auto;
}

.game-hero{
  padding:clamp(1.5rem,4.5vw,3.4rem) 0;
}

.game-hero-grid{
  display:grid;
  grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);
  gap:clamp(1.2rem,4vw,3rem);
  align-items:center;
}

.feature-phone{
  width:min(320px,78vw);
  margin:auto;
  filter:drop-shadow(0 28px 58px rgba(0,0,0,.55));
}

.store-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.75rem;
  margin-top:1.1rem;
}

.store-link{
  min-height:66px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(0,0,0,.24);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.7rem;
  padding:.8rem .9rem;
  text-decoration:none;
  font-weight:950;
}

.store-link:hover{
  background:rgba(255,241,207,.12);
}

.store-link small{
  display:block;
  color:var(--muted);
  font-size:.74rem;
  margin-bottom:.07rem;
  font-weight:850;
}

.seller-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.75rem;
  margin-top:1.1rem;
}

.seller{
  border:1px solid var(--line);
  border-radius:20px;
  padding:.9rem;
  background:rgba(255,241,207,.06);
}

.seller b{
  display:block;
  margin-bottom:.25rem;
}

.seller span{
  color:var(--muted);
  font-size:.92rem;
  line-height:1.35;
}

.story-block{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:1rem;
  align-items:stretch;
}

.story-copy,
.story-shot{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,241,207,.09),rgba(255,241,207,.04));
  box-shadow:var(--shadow);
  overflow:hidden;
}

.story-copy{
  padding:clamp(1.1rem,3vw,2rem);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.story-copy p{
  max-width:680px;
}

.story-shot{
  min-height:420px;
  display:grid;
  place-items:center;
  padding:1rem;
}

.story-shot .phone{
  width:min(260px,80%);
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.48));
}

.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.9rem;
}

.step{
  border:1px solid var(--line);
  border-radius:24px;
  background:rgba(255,241,207,.065);
  overflow:hidden;
  box-shadow:0 14px 44px rgba(0,0,0,.24);
}

.step .phone{
  width:100%;
  border:0;
  border-radius:0;
}

.step-copy{
  padding:.9rem;
}

.step-copy strong{
  display:block;
  color:var(--cream);
  margin-bottom:.25rem;
}

.step-copy p{
  margin:0;
  font-size:.94rem;
}

.gallery-wrap{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,241,207,.055);
  box-shadow:var(--shadow);
  padding:1rem;
}

.gallery{
  display:flex;
  overflow-x:auto;
  gap:1rem;
  padding:.2rem .1rem 1rem;
  scroll-snap-type:x mandatory;
}

.shot{
  flex:0 0 230px;
  margin:0;
  scroll-snap-align:start;
}

.shot .phone{
  border-width:7px;
  border-radius:24px;
}

.shot figcaption{
  color:var(--paper);
  text-align:center;
  margin-top:.55rem;
  font-weight:900;
}

.big-cta{
  border:1px solid var(--line2);
  border-radius:var(--radius);
  background:
    radial-gradient(circle at 20% 0%,rgba(255,77,63,.18),transparent 30rem),
    linear-gradient(135deg,rgba(255,241,207,.12),rgba(255,241,207,.045));
  box-shadow:var(--shadow);
  padding:clamp(1.2rem,4vw,2.4rem);
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:1rem;
  align-items:center;
}

.big-cta p{
  max-width:680px;
}

.book-wall{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:1rem;
  align-items:center;
}

.book-stack-panel,
.book-copy-panel{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,241,207,.1),rgba(255,241,207,.04));
  box-shadow:var(--shadow);
  overflow:hidden;
}

.book-stack-panel{
  min-height:430px;
  position:relative;
}

.book{
  position:absolute;
  width:220px;
  min-height:310px;
  border-radius:18px;
  color:var(--ink);
  box-shadow:0 20px 55px rgba(0,0,0,.36);
  border:2px solid rgba(0,0,0,.12);
  padding:1.05rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.book:nth-child(1){left:5%;top:18%;transform:rotate(-8deg);background:#dff1c6}
.book:nth-child(2){left:31%;top:8%;transform:rotate(4deg);background:#d8e8ff}
.book:nth-child(3){left:54%;top:22%;transform:rotate(10deg);background:#f4d9ab}

.book span{
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.68rem;
  font-weight:950;
  opacity:.72;
}

.book b{
  font-size:1.35rem;
  line-height:1;
  letter-spacing:-.06em;
}

.book-copy-panel{
  padding:clamp(1.2rem,4vw,2rem);
}

.safe-note{
  margin-top:1rem;
  border:1px dashed rgba(255,241,207,.24);
  border-radius:20px;
  background:rgba(255,241,207,.055);
  color:var(--muted);
  padding:1rem;
  line-height:1.55;
}

.safe-note strong{color:var(--cream)}

.filter-bar{
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  margin:1rem 0 1.25rem;
}

.filter-btn{
  border:1px solid var(--line);
  border-radius:999px;
  padding:.65rem .9rem;
  background:rgba(255,241,207,.07);
  color:var(--cream);
  font-weight:900;
  cursor:pointer;
}

.filter-btn.active,
.filter-btn:hover{
  background:rgba(255,77,63,.28);
}

.footer{
  border-top:1px solid var(--line);
  padding:2rem 0;
  color:var(--muted);
}

.footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

.footer a{
  color:var(--paper);
  text-decoration:none;
  font-weight:900;
}

.mobile-bottom{
  display:none;
}

@media(max-width:980px){
  .hero-grid,
  .game-hero-grid,
  .story-block,
  .big-cta,
  .book-wall{
    grid-template-columns:1fr;
  }

  .phone-stage{
    min-height:480px;
  }

  .catalogue-grid{
    grid-template-columns:1fr;
  }

  .product-card{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
  }

  .product-art{
    min-height:100%;
  }

  .seller-strip{
    grid-template-columns:repeat(2,1fr);
  }

  .steps{
    grid-template-columns:repeat(2,1fr);
  }

  .store-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:720px){
  body{
    padding-bottom:70px;
  }

  .nav{
    min-height:64px;
  }

  .topbar{
    position:relative;
  }

  .nav-links{
    display:none;
  }

  .hero{
    min-height:auto;
    padding:1.2rem 0 2rem;
  }

  .hero-grid{
    text-align:center;
  }

  .hero .eyebrow,
  .game-hero .eyebrow{
    margin-left:auto;
    margin-right:auto;
  }

  .actions{
    justify-content:center;
  }

  h1{
    font-size:clamp(2.35rem,12vw,4rem);
  }

  h2{
    font-size:clamp(1.9rem,9vw,3rem);
  }

  .phone-stage{
    min-height:410px;
  }

  .hero-phone{
    width:170px;
  }

  .hero-phone.one{left:-2%;top:18%}
  .hero-phone.two{left:30%;top:0}
  .hero-phone.three{right:-3%;top:22%}

  .float-card{
    left:0;
    right:0;
    bottom:0;
    text-align:left;
  }

  .section{
    padding:2rem 0;
  }

  .section-head{
    display:block;
    text-align:center;
  }

  .section-head .eyebrow{
    margin-left:auto;
    margin-right:auto;
  }

  .product-card{
    display:flex;
  }

  .product-art{
    min-height:245px;
  }

  .story-shot{
    min-height:320px;
  }

  .steps{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:.5rem;
  }

  .step{
    flex:0 0 78vw;
    scroll-snap-align:center;
  }

  .seller-strip{
    grid-template-columns:1fr;
  }

  .shot{
    flex-basis:72vw;
  }

  .book-stack-panel{
    min-height:390px;
  }

  .book{
    width:180px;
    min-height:275px;
  }

  .book:nth-child(1){left:0}
  .book:nth-child(2){left:22%}
  .book:nth-child(3){left:42%}

  .mobile-bottom{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:60;
    height:68px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:.35rem;
    padding:.45rem .55rem .6rem;
    border-top:1px solid var(--line);
    background:rgba(8,8,10,.92);
    backdrop-filter:blur(16px);
  }

  .mobile-bottom a{
    min-width:0;
    min-height:46px;
    display:grid;
    place-items:center;
    border-radius:16px;
    color:var(--muted);
    text-decoration:none;
    font-size:.75rem;
    font-weight:950;
  }

  .mobile-bottom a.active,
  .mobile-bottom a:hover{
    color:#fff;
    background:rgba(255,241,207,.13);
  }
}

@media(max-width:390px){
  .brand{font-size:.98rem}
  .logo{width:39px;height:39px}
  .btn{padding:.62rem .74rem;font-size:.85rem}
  p{font-size:.98rem}
}

.product-card.twitcher .product-art{background:linear-gradient(135deg,#dfe8b8,#1d4d34)}
.product-card.twitcher .btn.primary{background:linear-gradient(135deg,#3c8d4f,#1d5b3b)}
.book:nth-child(4){left:70%;top:34%;transform:rotate(15deg);background:#dfe8b8}
.catalogue-grid.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.catalogue-grid.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.catalogue-grid.four{grid-template-columns:1fr}.mobile-bottom{grid-template-columns:repeat(6,1fr)}.mobile-bottom a{font-size:.68rem}}