/* =========================================================
   OWN THE HUNGER — Global Styles
   Place this file at: /assets/style.css
   ========================================================= */

:root{
  --bg:#000000;
  --fg:#ffffff;

  --muted:rgba(255,255,255,.78);
  --muted2:rgba(255,255,255,.55);

  --line:rgba(255,255,255,.12);
  --panel:rgba(255,255,255,.06);
  --tile:#0b0b0b;

  --purple:#7C4DFF;
  --purple-2:#5C2FFF;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--fg); background:var(--bg);
  font-family:"Sora",system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body.no-scroll{overflow:hidden}

/* Background */
.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(55% 55% at 15% 12%, rgba(124,77,255,.34), transparent 60%),
    radial-gradient(45% 50% at 85% 10%, rgba(92,47,255,.28), transparent 60%),
    radial-gradient(60% 60% at 50% 48%, rgba(124,77,255,.16), transparent 72%);
  filter:blur(80px);
}

/* Layout */
.max{max-width:1160px; margin:0 auto}
.wrap{padding:38px 24px}
.section{margin:46px 0}
.wrap-tight{padding:22px 24px}
.section:first-of-type{margin-top:0}

/* Cards */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:0 32px 80px rgba(0,0,0,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:34px;
}

/* Typography */
h1{margin:.25rem 0 1rem; font-size:clamp(2.3rem,4.8vw,3.8rem); line-height:1.06; font-weight:800}
h2{margin:0 0 1rem; font-size:clamp(1.4rem,2.8vw,2.1rem)}
h3{margin:0 0 .5rem}
p{line-height:1.65}
.eyebrow{font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted2); margin-bottom:10px}
.sub{margin:0 0 1.1rem; color:var(--muted)}

/* Header / nav */
.site-header{position:sticky; top:0; z-index:50}
.site-header::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.42));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  z-index:-1;
}
.nav{
  max-width:1160px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  color:#fff; font-weight:800; letter-spacing:.02em; text-decoration:none;
}
.brand img{
  height:28px; width:auto; display:block;
  filter:drop-shadow(0 6px 18px rgba(124,77,255,.35));
}

.links{display:flex; align-items:center; gap:22px}
.links a{color:#fff; opacity:.92; text-decoration:none; white-space:nowrap}
.links a:hover{opacity:1; text-decoration:none}
.links .join{
  background:linear-gradient(180deg,var(--purple),var(--purple-2));
  color:#fff; font-weight:800; padding:12px 18px;
  border-radius:16px; box-shadow:0 16px 32px rgba(124,77,255,.35);
}
.links .join:hover{filter:brightness(1.06)}

/* Hamburger */
.hamburger{
  display:none;
  appearance:none; border:0; background:transparent;
  color:#fff; padding:8px; border-radius:12px;
  line-height:0; width:36px; height:36px; position:relative;
}
.hamburger span{
  position:absolute; left:8px; right:8px;
  height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--purple),var(--purple-2));
  transition:.25s;
}
.hamburger span:nth-child(1){top:11px}
.hamburger span:nth-child(2){top:17px}
.hamburger span:nth-child(3){top:23px}
.hamburger.active span:nth-child(1){transform:rotate(45deg); top:17px}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg); top:17px}

/* Mobile menu */
.mobile-panel{
  display:none; position:fixed; inset:0;
  background:rgba(5,0,12,.55);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  z-index:9999;
}
.mobile-panel.open{display:block}
.mobile-panel .sheet{
  position:absolute; right:12px; left:12px; top:76px;
  border-radius:20px; border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(124,77,255,.10), rgba(92,47,255,.06));
  box-shadow:0 8px 30px rgba(0,0,0,.45), 0 0 120px rgba(124,77,255,.28);
  padding:14px;
}
.mobile-panel a{
  display:block; color:#fff; text-decoration:none; opacity:.95;
  padding:12px 14px; border-radius:12px;
}
.mobile-panel a:hover{background:rgba(255,255,255,.08); opacity:1}

/* Banner (2 lines, compact, timer NOT in card) */
.banner{
  position:relative;
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(124,77,255,.14), rgba(0,0,0,.22));
  box-shadow:0 10px 40px rgba(124,77,255,.10);
  overflow:hidden;
}
.banner::before{
  content:"";
  position:absolute;
  top:-90%;
  left:-120%;
  width:240%;
  height:320%;
  background:linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.07),
    rgba(124,77,255,.12),
    rgba(255,255,255,.07),
    transparent
  );
  transform:rotate(14deg);
  animation:banner-sweep 5.2s linear infinite;
  opacity:.38;
  pointer-events:none;
  mix-blend-mode:screen;
}
@keyframes banner-sweep{
  0%{left:-130%}
  100%{left:130%}
}
.banner .inner{
  max-width:1160px;
  margin:0 auto;
  padding:6px 14px;
  display:grid;
  grid-template-rows:auto auto;
  gap:4px;
  position:relative;
  z-index:1;
  line-height:1.1;
}
.banner .row-1{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  overflow:hidden;
  white-space:nowrap;
  font-size:.92rem;
  font-weight:900;
  letter-spacing:.01em;
}
.banner .dot{
  width:8px;height:8px;border-radius:8px;
  background:linear-gradient(180deg,var(--purple),var(--purple-2));
  box-shadow:0 0 0 0 rgba(124,77,255,.45);
  animation:banner-pulse 1.9s ease-out infinite;
  flex:0 0 auto;
}
@keyframes banner-pulse{
  0%{box-shadow:0 0 0 0 rgba(124,77,255,.45)}
  70%{box-shadow:0 0 0 12px rgba(124,77,255,0)}
  100%{box-shadow:0 0 0 0 rgba(124,77,255,0)}
}
.banner .code-pill{
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);
  box-shadow:none;
  font-weight:950;
  letter-spacing:.05em;
  flex:0 0 auto;
}
.banner .free{
  opacity:.92;
  font-weight:900;
  flex:1 1 auto;
  min-width:0;
  text-overflow:ellipsis;
  overflow:hidden;
}
.banner .row-2{width:100%}
.banner .timer{
  width:100%;
  text-align:center;
  font-size:.90rem;
  font-weight:900;
  letter-spacing:.01em;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  animation:timer-soft 1.7s ease-in-out infinite;
}
@keyframes timer-soft{
  0%,100%{opacity:.85; transform:translateY(0)}
  50%{opacity:1; transform:translateY(-0.5px)}
}

/* Buttons */
.cta{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:16px 22px;
  border-radius:16px;
  font-weight:800;
  background:linear-gradient(180deg,var(--purple),var(--purple-2));
  color:#fff;
  box-shadow:0 16px 36px rgba(124,77,255,.35);
  text-decoration:none;
  border:0;
  cursor:pointer;
}
.cta:hover{filter:brightness(1.06)}
.cta.block{width:100%}

a{color:#cbb7ff}
a:hover{text-decoration:underline}

/* Responsive */
@media(max-width:900px){
  .links{display:none!important}
  .hamburger{display:inline-flex}
  .wrap{padding:18px 16px}
  .wrap-tight{padding:14px 16px}
  .card{padding:22px; border-radius:20px}

  .banner .inner{padding:6px 12px; gap:4px}
  .banner .row-1{font-size:.90rem}
  .banner .timer{font-size:.88rem}
}