.hero{
  position:relative;min-height:100vh;
  display:flex;align-items:center;
  overflow:hidden;
}

@keyframes beamSweep{
  0%,100%{opacity:.3;transform:translateY(-50%) scaleX(.8)}
  50%{opacity:1;transform:translateY(-50%) scaleX(1)}
}

.hero-content{
  position:relative;z-index:2;
  width:100%;max-width:1280px;margin:0 auto;
  padding:0 48px;
}

.hero-kicker{
  font-family:'Space Mono',monospace;font-size:11px;color:var(--teal);
  letter-spacing:3px;text-transform:uppercase;margin-bottom:20px;
  display:flex;align-items:center;gap:12px;
}

.kicker-line{width:48px;height:1px;background:var(--teal)}

.hero h1{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(54px,9vw,120px);
  font-weight:900;line-height:.92;
  letter-spacing:-2px;text-transform:uppercase;
  margin-bottom:32px;
}

.hero h1 .line-1{color:#fff;display:block}

.hero h1 .line-2{
  font-style:italic;display:block;
  -webkit-text-stroke:2px var(--coral);
  color:transparent;
}

.hero h1 .line-3{color:var(--coral);display:block}

.hero-lower{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;
  align-items:end;margin-top:48px;
}

.hero-sub{
  font-size:17px;font-weight:300;color:rgba(255,255,255,.5);
  line-height:1.75;max-width:480px;
}

.hero-actions{display:flex;flex-direction:column;gap:12px;align-items:flex-start}

.btn-coral{
  background:var(--coral);color:#fff;
  border:2px solid var(--coral);
  padding:18px 40px;
  font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;
  cursor:pointer;transition:all .25s;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
}

.btn-coral:hover{background:transparent;color:var(--coral);transform:scale(1.03)}

.hero-micro{font-family:'Space Mono',monospace;font-size:11px;color:rgba(255,255,255,.2);letter-spacing:.5px}

.scroll-cue{
  position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:'Space Mono',monospace;font-size:10px;color:rgba(255,255,255,.25);
  letter-spacing:2px;text-transform:uppercase;animation:fadeIn 1s 1.5s both;
}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.scroll-arrow{
  width:24px;height:24px;border-right:2px solid rgba(255,255,255,.25);
  border-bottom:2px solid rgba(255,255,255,.25);
  transform:rotate(45deg);
  animation:bounce 2s infinite;
}

@keyframes bounce{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(4px,4px)}}

.marquee-wrap{
  border-top:1px solid rgba(255,95,63,.3);
  border-bottom:1px solid rgba(255,95,63,.3);
  padding:16px 0;overflow:hidden;background:rgba(255,95,63,.06);
}

.marquee-track{
  display:flex;gap:0;
  animation:marquee 30s linear infinite;
  width:max-content;
}

@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.marquee-item{
  display:flex;align-items:center;gap:16px;padding:0 40px;
  font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.35);
  white-space:nowrap;
}

.marquee-dot{width:4px;height:4px;border-radius:50%;background:var(--coral);flex-shrink:0}

.stats-wrap{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid rgba(255,255,255,.07);
}

.stat-cell{
  padding:48px 32px;text-align:center;
  border-right:1px solid rgba(255,255,255,.1);
  position:relative;overflow:hidden;
  background:rgba(255,255,255,.06);
}

.stat-cell::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--coral),var(--pink));
  transform:scaleX(0);transition:transform .4s;transform-origin:left;
}

.stat-cell:hover::after{transform:scaleX(1)}

.stat-cell:last-child{border-right:none}

.stat-num{
  font-family:'Barlow Condensed',sans-serif;font-size:56px;font-weight:900;
  color:#fff;line-height:1;display:block;margin-bottom:8px;
}

.stat-label{font-family:'Space Mono',monospace;font-size:10px;color:rgba(255,255,255,.3);letter-spacing:2px;text-transform:uppercase}

.stat-coral{color:var(--coral)}

.cats-section{padding:80px 48px;max-width:1280px;margin:0 auto}

.section-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:20px;
}

.section-label{
  font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:700;
  text-transform:uppercase;letter-spacing:1px;
}

.section-sub{font-family:'Space Mono',monospace;font-size:11px;color:rgba(255,255,255,.3);letter-spacing:1px}

.cat-blocks{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.07)}

.cat-block{
  background:rgba(255,255,255,.06);padding:32px 28px;cursor:pointer;
  transition:all .25s;position:relative;
}

.cat-block:hover{background:rgba(255,95,63,.18)}

.cat-block::before{
  content:'';position:absolute;top:0;left:0;width:0;height:2px;
  background:var(--coral);transition:width .3s;
}

.cat-block:hover::before{width:100%}

.cb-icon{font-size:28px;margin-bottom:16px;display:block}

.cb-name{
  font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;
}

.cb-count{font-family:'Space Mono',monospace;font-size:10px;color:rgba(255,255,255,.3);letter-spacing:1px}

.reviews-section{padding:0 48px 80px;max-width:1280px;margin:0 auto}

.r-header{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:32px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1);
}

.r-header h2{font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:700;text-transform:uppercase;letter-spacing:1px}

.r-header a{font-family:'Space Mono',monospace;font-size:11px;color:var(--coral);text-decoration:none;letter-spacing:1px}

.r-list{display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.07)}

.r-row{
  background:rgba(255,255,255,.06);display:grid;grid-template-columns:auto 1fr auto auto;
  align-items:center;gap:32px;padding:24px 28px;cursor:pointer;
  transition:background .2s;
}

.r-row:hover{background:rgba(255,255,255,.12)}

.r-num{
  font-family:'Barlow Condensed',sans-serif;font-size:36px;font-weight:900;
  color:rgba(255,255,255,.1);width:48px;text-align:right;
}

.r-info{}

.r-cat-tag{
  font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2px;
  text-transform:uppercase;color:var(--teal);margin-bottom:6px;
}

.r-title{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}

.r-date{font-size:12px;color:rgba(255,255,255,.25)}

.r-score-badge{
  font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:900;
  color:var(--coral);white-space:nowrap;
}

.cta-block{
  margin:0 48px 80px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,95,63,.35);
  padding:72px 64px;
  position:relative;overflow:hidden;
}

.cta-block::before{
  content:'';position:absolute;
  top:-100px;right:-100px;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,95,63,.12) 0%,transparent 70%);
  animation:ctaOrb 10s ease-in-out infinite alternate;
}

@keyframes ctaOrb{from{transform:scale(1)}to{transform:scale(1.3) translate(-30px,30px)}}

.cta-inner{position:relative;z-index:1;max-width:700px}

.cta-tag{font-family:'Space Mono',monospace;font-size:11px;color:var(--teal);letter-spacing:3px;text-transform:uppercase;margin-bottom:16px}

.cta-h{
  font-family:'Barlow Condensed',sans-serif;font-size:clamp(40px,6vw,72px);
  font-weight:900;text-transform:uppercase;letter-spacing:-1px;line-height:1;
  margin-bottom:20px;
}

.cta-h em{font-style:italic;color:var(--coral)}

.cta-body{font-size:16px;color:rgba(255,255,255,.45);line-height:1.7;max-width:500px;margin-bottom:36px}

.cta-btns{display:flex;gap:12px;flex-wrap:wrap}

.btn-ghost{
  background:transparent;color:rgba(255,255,255,.75);
  border:2px solid rgba(255,255,255,.35);
  padding:16px 32px;
  font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  cursor:pointer;transition:all .25s;
}

.btn-ghost:hover{background:rgba(255,255,255,.95);color:var(--navy);border-color:rgba(255,255,255,.95)}

@media(max-width:768px){
  /* Nav */
  nav{height:auto;flex-wrap:wrap}
  .nav-logo-wrap{padding:0 20px;height:56px}
  .nav-logo{font-size:18px}
  .nav-right-wrap{margin-left:auto}
  .nav-date-tag{padding:0 12px;font-size:10px}

  /* Mobile menu toggle */


  /* Hero */
  .hero{padding:80px 24px 80px;min-height:auto}
  .hero-content{padding:0}
  .hero-kicker{font-size:10px;flex-wrap:wrap;gap:8px}
  .kicker-line{width:28px}
  .hero h1{font-size:clamp(42px,13vw,72px);letter-spacing:-1px;margin-bottom:20px}
  .hero h1 .line-2{-webkit-text-stroke:1.5px var(--coral)}
  .hero-lower{grid-template-columns:1fr;gap:28px;margin-top:28px}
  .hero-sub{font-size:15px;max-width:100%}
  .hero-actions{align-items:stretch}
  .btn-coral{font-size:16px;padding:16px 28px;text-align:center}
  .scroll-cue{display:none}

  /* Marquee */
  .marquee-item{padding:0 24px;font-size:14px}

  /* Stats */
  .stats-wrap{grid-template-columns:repeat(2,1fr)}
  .stat-cell{padding:28px 16px}
  .stat-num{font-size:40px}

  /* Categories */
  .cats-section{padding:56px 20px}
  .section-header{flex-direction:column;align-items:flex-start;gap:6px}
  .section-label{font-size:24px}
  .cat-blocks{grid-template-columns:repeat(3,1fr)!important}
  .cat-block{padding:20px 16px}
  .cb-name{font-size:15px}
  .cb-icon{font-size:22px;margin-bottom:10px}

  /* Reviews */
  .reviews-section{padding:0 20px 56px}
  .r-header{margin-bottom:20px}
  .r-header h2{font-size:24px}
  .r-row{
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    gap:8px 16px;padding:18px 16px;
  }
  .r-num{font-size:28px;width:36px}
  .r-title{font-size:16px}
  .r-date{display:none}
  .r-score-badge{font-size:22px;grid-column:2;justify-self:end}

  /* CTA */
  .cta-block{margin:0 20px 56px;padding:48px 28px}
  .cta-h{font-size:clamp(32px,10vw,52px)}
  .cta-body{font-size:14px}
  .cta-btns{flex-direction:column}
  .btn-ghost{text-align:center}

  /* Footer */
}

@media(max-width:480px){
  .stat-cell{padding:24px 12px}
  .stat-num{font-size:34px}
  .cat-blocks{grid-template-columns:repeat(2,1fr)!important}
}