:root{
  --bg:#050505;
  --text:#ffffff;
  --muted:rgba(255,255,255,.70);
  --line:rgba(255,255,255,.12);
  --shadow: 0 22px 90px rgba(0,0,0,.75);
  --r:22px;

  /* chrome gradient */
  --g1:#ffffff;
  --g2:#d9d9d9;
  --g3:#8c8c8c;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
.wrap{width:min(1120px,92vw); margin:0 auto;}
.muted{color:var(--muted);}
.tiny{font-size:12px}
body.lock{overflow:hidden}

/* animated chrome text */
.grad-text{
  background: linear-gradient(115deg, var(--g1), var(--g2), var(--g3), var(--g1));
  background-size: 240% 240%;
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  animation: gradShift 4.2s ease-in-out infinite;
  text-shadow: 0 0 18px rgba(255,255,255,.08);
}
@keyframes gradShift{
  0%{background-position: 0% 50%;}
  50%{background-position: 100% 50%;}
  100%{background-position: 0% 50%;}
}

/* ===== Cinematic Intro ===== */
.intro{
  position:fixed; inset:0;
  z-index:999;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(16px);
  opacity:1;
  transform: translateY(0);
  transition: opacity .85s ease, transform .85s ease;
}
.intro.hide{
  opacity:0;
  transform: translateY(-26px) scale(.98);
  pointer-events:none;
}
.intro-bg{
  position:absolute; inset:-25%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.07), transparent 60%);
  filter: blur(10px);
  animation: haze 9s ease-in-out infinite alternate;
  opacity:.95;
}
.intro-grain{
  position:absolute; inset:0;
  opacity:.14;
  mix-blend-mode: overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  animation: grainMove .9s steps(2) infinite;
}
.intro-scan{
  position:absolute; inset:-30% 0;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.06), transparent);
  opacity:.5;
  transform: translateY(-40%);
  animation: scan 2.6s ease-in-out infinite;
}
@keyframes scan{
  0%{transform: translateY(-40%);}
  100%{transform: translateY(40%);}
}

.intro-shell{
  position:relative;
  width:min(640px, 92vw);
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  border-radius: 26px;
  box-shadow: 0 40px 140px rgba(0,0,0,.68);
  overflow:hidden;
}
.intro-shell::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.16), transparent 55%),
    radial-gradient(circle at 85% 75%, rgba(255,255,255,.10), transparent 55%);
  pointer-events:none;
}

.intro-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.pill.tiny{
  display:inline-flex;
  padding: 6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  font-weight: 900;
  letter-spacing: .8px;
}

.intro-core{
  padding: 20px 18px 18px;
  text-align:center;
}

/* BIGGER, cinematic intro logo */
.intro-logo{
  height:140px;
  width:auto;
  filter:
    drop-shadow(0 0 15px rgba(255,255,255,.35))
    drop-shadow(0 0 40px rgba(255,255,255,.20))
    drop-shadow(0 0 80px rgba(255,255,255,.10));
  animation: introFloat 3.5s ease-in-out infinite;
}
@keyframes introFloat{
  0%{transform: translateY(0) scale(1);}
  50%{transform: translateY(-10px) scale(1.03);}
  100%{transform: translateY(0) scale(1);}
}

.intro-kicker{
  display:block;
  margin-top: 10px;
  font-weight:900;
  letter-spacing: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.70);
}
.intro-brand{
  display:block;
  font-weight: 900;
  letter-spacing: -1px;
  font-size: 52px;
  margin-top: 6px;
}
.intro-sub{ margin-top: 8px; }

.boot{
  width:min(520px, 92%);
  margin: 14px auto 0;
  text-align:left;
  font-weight: 800;
  letter-spacing: .3px;
}
.boot-line{
  display:flex;
  gap:10px;
  padding: 8px 10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  margin-top: 8px;
  opacity:0;
  transform: translateY(6px);
  animation: bootIn .55s ease forwards;
}
.boot-line:nth-child(1){ animation-delay: .30s; }
.boot-line:nth-child(2){ animation-delay: .55s; }
.boot-line:nth-child(3){ animation-delay: .80s; }
@keyframes bootIn{ to{opacity:1; transform: translateY(0);} }
.boot-tag{ color: rgba(255,255,255,.90); letter-spacing: 1px; }

.intro-bar{
  margin: 16px auto 0;
  width: min(520px, 92%);
  height: 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  overflow:hidden;
}
.intro-fill{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,.92), rgba(255,255,255,.25));
  background-size: 200% 100%;
  animation: load 2.55s ease forwards, barshine .75s linear infinite;
}
@keyframes load{ from{ width: 0%; } to{ width: 100%; } }
@keyframes barshine{ from{ background-position: 0% 50%; } to{ background-position: 200% 50%; } }
.intro-hint{ margin-top: 10px; }

.intro-corners span{
  position:absolute;
  width:18px; height:18px;
  border:2px solid rgba(255,255,255,.16);
  opacity:.65;
}
.intro-corners span:nth-child(1){top:12px; left:12px; border-right:none; border-bottom:none;}
.intro-corners span:nth-child(2){top:12px; right:12px; border-left:none; border-bottom:none;}
.intro-corners span:nth-child(3){bottom:12px; left:12px; border-right:none; border-top:none;}
.intro-corners span:nth-child(4){bottom:12px; right:12px; border-left:none; border-top:none;}

/* subtle glitch */
.glitch{ position:relative; }
.glitch::before,
.glitch::after{
  content: attr(data-text);
  position:absolute; left:0; top:0;
  width:100%;
  opacity:.18;
  pointer-events:none;
}
.glitch::before{ transform: translate(2px,0); clip-path: inset(0 0 55% 0); }
.glitch::after{ transform: translate(-2px,0); clip-path: inset(55% 0 0 0); }
.glitch{ animation: glitch 3.8s ease-in-out infinite; }
@keyframes glitch{
  0%,100%{filter:none}
  48%{filter:none}
  50%{filter: contrast(1.08)}
  52%{filter:none}
}

/* ===== Background ===== */
.bg{position:fixed; inset:0; z-index:-1; pointer-events:none;}
.spotlight{
  position:absolute; inset:-30%;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.16), transparent 55%),
    radial-gradient(circle at 80% 35%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(circle at 55% 85%, rgba(255,255,255,.08), transparent 60%);
  filter: blur(10px);
  opacity:.55;
  animation: haze 9s ease-in-out infinite alternate;
}
@keyframes haze{
  0%{transform: translate3d(0,0,0) scale(1);}
  100%{transform: translate3d(-3.5%, 2.2%, 0) scale(1.08);}
}
.grid{
  position:absolute; inset:0;
  opacity:.14;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 15%, black 0 55%, transparent 78%);
  animation: gridShift 7.5s ease-in-out infinite alternate;
}
@keyframes gridShift{ 0%{transform: translateY(0);} 100%{transform: translateY(18px);} }
.stars{
  position:absolute; inset:0;
  opacity:.14;
  background-image:
    radial-gradient(rgba(255,255,255,.9) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.8) 1px, transparent 1px);
  background-size: 130px 130px, 190px 190px;
  background-position: 0 0, 55px 80px;
  animation: stars 8.2s linear infinite;
}
@keyframes stars{ from{transform: translateY(0);} to{transform: translateY(60px);} }

.shooting-stars{position:absolute; inset:0; overflow:hidden;}
.shoot{
  position:absolute;
  width: 240px;
  height: 2px;
  opacity: .55;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95), rgba(255,255,255,0));
  filter: drop-shadow(0 0 16px rgba(255,255,255,.22));
  transform: rotate(var(--rot)) translate3d(0,0,0);
  animation: shoot var(--dur) linear infinite;
  animation-delay: var(--delay);
}
@keyframes shoot{
  0%{transform: translate3d(var(--x1), var(--y1), 0) rotate(var(--rot)); opacity: 0;}
  9%{opacity: .75;}
  100%{transform: translate3d(var(--x2), var(--y2), 0) rotate(var(--rot)); opacity: 0;}
}

.grain{
  position:absolute; inset:0;
  opacity:.12;
  mix-blend-mode: overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  animation: grainMove .8s steps(2) infinite;
}
@keyframes grainMove{
  0%{transform: translate(0,0);}
  25%{transform: translate(-2%, 1%);}
  50%{transform: translate(-1%, -2%);}
  75%{transform: translate(2%, 2%);}
  100%{transform: translate(1%, -1%);}
}
.vignette{
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 20%, transparent 0 55%, rgba(0,0,0,.65) 85%);
  opacity:.9;
}

/* ===== Topbar ===== */
.topbar{
  position:sticky; top:0; z-index:20;
  background: rgba(5,5,5,.62);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 0;
}
.brand{display:flex; align-items:center; gap:12px;}
/* BIGGER header logo */
.brand-logo{
  height:72px;
  width:auto;
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.35))
    drop-shadow(0 0 20px rgba(255,255,255,.18));
  transition: transform .25s ease;
}
.brand-logo:hover{ transform: scale(1.05); }

.brand-name{font-weight:900; letter-spacing:.35px;}

.nav{display:flex; gap:18px;}
.nav a{
  color:var(--muted);
  font-weight:800;
  font-size:14px;
  letter-spacing:.2px;
  position:relative;
}
.nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:-8px;
  height:2px;
  width:0%;
  background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.75), rgba(255,255,255,.0));
  transition: width .22s ease;
}
.nav a:hover{color:var(--text);}
.nav a:hover::after{width:100%;}
.top-actions{display:flex; gap:10px;}

/* ===== Buttons (ripple) ===== */
.btn{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color:var(--text);
  padding:10px 14px;
  border-radius: 14px;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
  position:relative;
  overflow:hidden;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
}
.btn:active{transform: translateY(0) scale(.99);}
.btn.full{width:100%;}

.btn.primary{
  color:#080808;
  border-color: rgba(255,255,255,.28);
  background: linear-gradient(120deg, #ffffff, #d9d9d9, #8c8c8c, #ffffff);
  background-size: 240% 240%;
  animation: btnGrad 3.6s ease-in-out infinite;
  box-shadow: 0 18px 55px rgba(255,255,255,.10);
}
@keyframes btnGrad{
  0%{background-position: 0% 50%;}
  50%{background-position: 100% 50%;}
  100%{background-position: 0% 50%;}
}
.btn.ghost{ background: rgba(255,255,255,.04); }
.btn.ghost:hover{ box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 10px 40px rgba(255,255,255,.05); }
.btn.primary::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 60%);
  opacity:.25;
  pointer-events:none;
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:.18} 50%{opacity:.34} }
.btn::after{
  content:"";
  position:absolute; top:-60%; left:-40%;
  width:40%; height:220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform: rotate(20deg);
  opacity:0;
}
.btn:hover::after{animation: shine .9s ease;}
@keyframes shine{
  0%{left:-40%; opacity:0;}
  20%{opacity:.6;}
  100%{left:130%; opacity:0;}
}
.ripple{
  position:absolute;
  border-radius:999px;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,.28);
  pointer-events:none;
  animation: ripple .55s ease-out forwards;
}
@keyframes ripple{
  from{width:0; height:0; opacity:.45;}
  to{width:320px; height:320px; opacity:0;}
}

/* ===== Hero ===== */
.hero{padding: 64px 0 18px;}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 26px;
  align-items:start;
}
.hero-badges{display:flex; gap:10px; flex-wrap:wrap;}
.badge{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.5px;
}
.badge.live{
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  display:inline-flex; align-items:center; gap:8px;
}
.dot{
  width:8px; height:8px; border-radius:999px;
  background:#fff;
  box-shadow: 0 0 20px rgba(255,255,255,.25);
}

/* Clean title w/ aggressive glow + sweep */
.hero-title.clean{
  margin: 18px 0 10px;
  line-height: .92;
  letter-spacing: -2.4px;
  font-size: clamp(82px, 8.2vw, 132px);
  position: relative;
}
.hero-word{
  display:inline-block;
  position:relative;
  filter:
    drop-shadow(0 0 18px rgba(255,255,255,.22))
    drop-shadow(0 0 44px rgba(255,255,255,.18))
    drop-shadow(0 0 90px rgba(255,255,255,.10));
  animation: titleBreathAgg 2.3s ease-in-out infinite;
}
@keyframes titleBreathAgg{
  0%,100%{
    filter:
      drop-shadow(0 0 14px rgba(255,255,255,.18))
      drop-shadow(0 0 44px rgba(255,255,255,.18))
      drop-shadow(0 0 110px rgba(255,255,255,.10));
    transform: translateY(0);
  }
  50%{
    filter:
      drop-shadow(0 0 22px rgba(255,255,255,.32))
      drop-shadow(0 0 68px rgba(255,255,255,.22))
      drop-shadow(0 0 150px rgba(255,255,255,.14));
    transform: translateY(-2px);
  }
}
/* chrome sweep across title */
.hero-word::after{
  content:"";
  position:absolute;
  inset:-20% -26%;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.20) 50%, transparent 60%);
  transform: translateX(-55%) rotate(-10deg);
  mix-blend-mode: screen;
  opacity:.62;
  animation: titleSweep 3.1s ease-in-out infinite;
  pointer-events:none;
}
@keyframes titleSweep{
  0%{transform: translateX(-55%) rotate(-10deg); opacity:0;}
  20%{opacity:.60;}
  50%{opacity:.80;}
  100%{transform: translateX(55%) rotate(-10deg); opacity:0;}
}

.hero-sub{margin:0; color:var(--muted); font-size:18px; max-width:560px;}
.hero-points{margin-top:14px; display:grid; gap:10px;}
.point{display:flex; gap:10px; align-items:center; color:var(--muted); font-weight:700;}
.ic{
  width:22px; height:22px;
  display:grid; place-items:center;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.95);
}
.hero-cta{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap;}
.hero-stats{
  margin-top:18px; padding-top:18px;
  border-top:1px dashed rgba(255,255,255,.14);
  display:flex; gap:14px; flex-wrap:wrap;
}
.stat{
  min-width:150px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: var(--r);
  padding:12px 14px;
}
.k{font-weight:900; font-size:20px;}
.s{color:var(--muted); font-size:13px; margin-top:3px;}

/* preview */
.preview{
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  border-radius: 24px;
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
  transform: perspective(900px) rotateY(-10deg) rotateX(7deg);
  animation: floatCard 5.6s ease-in-out infinite;
}
@keyframes floatCard{
  0%,100%{transform: perspective(900px) rotateY(-10deg) rotateX(7deg) translateY(0);}
  50%{transform: perspective(900px) rotateY(-6deg) rotateX(9deg) translateY(-7px);}
}
.preview-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.pill{
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  color: var(--muted);
  display:inline-flex; align-items:center; gap:8px;
}
.pill.ok{border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:rgba(255,255,255,.92);}
.mini-dot{width:7px; height:7px; border-radius:999px; background:#fff; box-shadow:0 0 18px rgba(255,255,255,.18);}
.preview-body{padding:14px;}
.pname{font-weight:900; font-size:18px; margin-top:6px;}
.pdesc{color:var(--muted); margin-top:6px;}
.price-row{display:flex; gap:10px; align-items:baseline; margin:12px 0 10px;}
.price{font-weight:900; font-size:34px;}
.strike{color: rgba(255,255,255,.38); text-decoration: line-through; font-weight:800;}
.chips{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.chips span{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  padding:8px 10px;
  border-radius:999px;
  color:var(--muted);
  font-weight:800;
  font-size:12px;
}
.side{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap;}
.side-card{
  flex:1; min-width:160px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: var(--r);
  padding:12px 14px;
}
.sk{font-weight:900; font-size:18px;}
.ss{color:var(--muted); font-size:13px; margin-top:3px;}

/* marquee */
.marquee{
  margin-top:22px;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  overflow:hidden;
}
.track{
  display:flex; gap:40px; white-space:nowrap;
  padding:12px 0;
  color: rgba(255,255,255,.45);
  font-weight:900;
  letter-spacing:2px;
  animation: marquee 11.5s linear infinite;
}
@keyframes marquee{ from{transform: translateX(0);} to{transform: translateX(-33.333%);} }

/* sections */
.section{padding:56px 0;}
.section-head h2{margin:0; font-size:26px; letter-spacing:-.3px;}
.section-head p{margin:8px 0 0;}

/* category cards */
.cat-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
  margin-top:16px;
}
.cat{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  border-radius:22px;
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.cat:hover{ transform: translateY(-4px); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.045); }
.cat-media{
  height:120px;
  position:relative;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.cat-bg{
  position:absolute; inset:-30%;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.14), transparent 55%),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,.10), transparent 60%);
  filter: blur(6px);
  animation: catGlow 6s ease-in-out infinite alternate;
}
@keyframes catGlow{ 0%{transform: translate3d(0,0,0) scale(1);} 100%{transform: translate3d(-3%,2%,0) scale(1.08);} }
.cat-text{ position:relative; font-weight:900; letter-spacing:3px; color: rgba(255,255,255,.62); }
.cat-body{padding:14px;}
.cat-top{display:flex; justify-content:space-between; gap:10px; align-items:baseline;}
.cat-name{font-weight:900;}
.cat-meta{color: rgba(255,255,255,.50); font-weight:800; font-size:12px;}
.cat-sub{margin:6px 0 12px; font-weight:700;}

/* strip */
.strip{
  margin-top:18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  border-radius:22px;
  box-shadow: var(--shadow);
  padding:16px;
}
.strip-head h3{margin:0; letter-spacing:-.2px;}
.strip-head p{margin:6px 0 0;}
.prod-grid{display:grid; gap:10px; margin-top:12px;}
.prod{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  border-radius:18px;
  padding:12px 14px;
}
.pt{font-weight:900;}
.pp{font-weight:900;}
.prod-right{display:flex; gap:12px; align-items:center;}

/* reviews */
.reviews{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  margin-top:16px;
}
.review{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  border-radius:22px;
  box-shadow: var(--shadow);
  padding:16px;
}
.r-top{display:flex; justify-content:space-between; align-items:center;}
.stars-txt{font-weight:900; letter-spacing:1px;}
.r-text{margin-top:10px; font-weight:700; color: rgba(255,255,255,.86);}
.r-foot{margin-top:10px;}

/* status */
.status-card{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  border-radius:22px;
  box-shadow: var(--shadow);
  padding:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.sb{display:flex; gap:10px; flex-wrap:wrap;}
.s{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  font-weight:900;
  font-size:12px;
}
.s.ok{background: rgba(255,255,255,.08);}
.s.warn{background: rgba(255,255,255,.03); opacity:.8;}

/* faq */
.faq{display:grid; gap:10px; margin-top:12px;}
.q{
  width:100%;
  text-align:left;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-weight:900;
  cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
}
.q span{opacity:.75; transition: transform .15s ease;}
.q[aria-expanded="true"] span{transform: rotate(180deg);}
.a{display:none; padding:0 16px 14px;}

/* footer */
.footer{
  border-top:1px solid rgba(255,255,255,.12);
  padding:26px 0;
  background: rgba(255,255,255,.02);
}
.footer-row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.fbrand{font-weight:900; font-size:16px; margin-bottom:6px;}
.flinks{display:flex; gap:14px; flex-wrap:wrap;}

/* reveal */
.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.show{opacity:1; transform: translateY(0);}

/* responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr;}
  .preview{transform:none; animation:none;}
  .cat-grid{grid-template-columns: repeat(2, 1fr);}
  .reviews{grid-template-columns: 1fr;}
}
@media (max-width: 780px){
  .nav{display:none;}
  .top-actions{display:none;}
  .cat-grid{grid-template-columns: 1fr;}
}
/* (optional) make audio fade feel smoother if user hits play fast */