:root{
  --stage:#000;
  --text:#eefaf3;
  --muted:rgba(238,250,243,.82);
  --gold:#f0d27a;
  --gold2:#d3a84e;
  --line:rgba(255,255,255,.38);   /* brighter chrome lines */
  --line2:rgba(255,255,255,.55);  /* strong chrome edges */
  --radius:0px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Georgia, serif;
  color:var(--text);
  background:#000;
}

.stage{
  min-height:100%;
  background:#000;
  padding:28px 14px 44px;
}

/* =======================
   MAIN PANEL (POSTER)
   ======================= */
.panel{
  max-width:980px;
  margin:0 auto;
  padding:18px 18px 22px;
  border-radius:var(--radius);
  border:2px solid var(--line2);
  background:
    linear-gradient(180deg, rgba(0,100,50,.95), rgba(0,18,9,.96));
  box-shadow:
    0 0 0 2px rgba(0,0,0,.75) inset,
    0 24px 60px rgba(0,0,0,.8),
    0 0 42px rgba(120,255,190,.16);
  position:relative;
}

/* Layout layers */
.topbar,.hero,.section,.footer{position:relative}

/* =======================
   TOP BAR / NAV
   ======================= */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.brand{display:flex;align-items:center;gap:12px}

.badge{
  font-weight:900;
  letter-spacing:.7px;
  color:#fff;
  text-decoration:none;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#1b1b1b,#050505);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 2px 6px rgba(0,0,0,.8);
}

.nav a{
  color:#fff;
  text-decoration:none;
  margin-left:10px;
  font-weight:900;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#1b1b1b,#050505);
}
.nav a:hover{border-color:#fff}

/* =======================
   HERO
   ======================= */
.hero{
  padding:22px 16px 20px;
  border-radius:var(--radius);
  border:2px solid var(--line2);
  background:rgba(0,0,0,.42);
  box-shadow:0 18px 44px rgba(0,0,0,.7);
}

/* =======================
   CHROME TITLE (BRIGHT)
   ======================= */
.chrome{
  font-size:56px;
  margin:0;
  line-height:1;
  letter-spacing:.8px;
  text-align:center;
  background:linear-gradient(
    180deg,
    #ffffff 0%,
    #f3f6f9 18%,
    #ffffff 36%,
    #cfd7df 55%,
    #ffffff 72%,
    #e6ebf0 88%,
    #ffffff 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:
    0 4px 0 rgba(0,0,0,.7),
    0 0 26px rgba(255,255,255,.35);
}

/* Gold subheading */
.subdomain{
  text-align:center;
  color:var(--gold);
  font-weight:900;
  margin-top:8px;
  letter-spacing:.6px;
  font-size:22px;
  text-shadow:
    0 2px 0 rgba(0,0,0,.75),
    0 0 18px rgba(255,215,120,.28);
}

.tagline{
  text-align:center;
  margin:14px 0 0;
  font-size:24px;
  color:var(--gold);
  font-weight:900;
  text-shadow:
    0 2px 0 rgba(0,0,0,.75),
    0 0 16px rgba(255,215,120,.25);
}

.desc{
  text-align:center;
  margin:12px auto 16px;
  max-width:860px;
  color:rgba(255,255,255,.9);
  font-size:18px;
}

/* =======================
   CHROME BUTTON
   ======================= */
.btn{
  display:inline-block;
  text-decoration:none;
  font-weight:900;
  color:var(--gold);
  padding:14px 34px;
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.06)),
    linear-gradient(180deg, rgba(0,120,60,.98), rgba(0,50,25,.98));
  border:2px solid var(--line2);
  box-shadow:
    0 12px 24px rgba(0,0,0,.7),
    0 0 0 2px rgba(0,0,0,.5) inset,
    0 0 36px rgba(255,255,255,.18);
  text-shadow:0 2px 0 rgba(0,0,0,.85);
  position:relative;
  overflow:hidden;
}
.btn:hover{filter:brightness(1.08)}

.btn:before{
  content:"";
  position:absolute;
  top:-40%;
  left:-30%;
  width:26%;
  height:180%;
  transform:skewX(-18deg);
  background:rgba(255,255,255,.45);
  animation:shine 2.6s linear infinite;
}
@keyframes shine{0%{left:-35%}100%{left:120%}}

.cta{display:flex;justify-content:center;margin:14px 0 6px}

/* =======================
   CHROME SECTION BARS
   ======================= */
.bar{
  margin:18px 0 12px;
  padding:14px 12px;
  text-align:center;
  font-weight:900;
  letter-spacing:.4px;
  color:var(--gold);
  font-size:24px;
  border-radius:14px;
  border:2px solid var(--line2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.04)),
    linear-gradient(180deg, rgba(0,70,35,.92), rgba(0,20,10,.92));
  box-shadow:
    0 12px 26px rgba(0,0,0,.7),
    0 0 0 2px rgba(0,0,0,.45) inset;
}

/* =======================
   SECTIONS
   ======================= */
.section{margin-top:14px}

/* Pills */
.pills{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.pill{
  text-align:center;
  padding:14px 12px;
  border-radius:16px;
  border:2px solid var(--line2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.04)),
    linear-gradient(180deg, rgba(0,85,42,.75), rgba(0,28,14,.75));
  font-weight:900;
  color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,.85);
  box-shadow:
    0 10px 20px rgba(0,0,0,.6),
    0 0 0 2px rgba(0,0,0,.45) inset;
}

/* Cards */
.cards{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
.card{
  border-radius:14px;
  border:2px solid var(--line2);
  background:
    linear-gradient(180deg, rgba(0,95,48,.7), rgba(0,18,9,.8));
  box-shadow:
    0 14px 28px rgba(0,0,0,.7),
    0 0 0 2px rgba(0,0,0,.45) inset;
}
.card .c-top,
.card .c-mid{
  padding:12px;
  color:#fff;
  font-weight:800;
}
.card .c-bot{
  padding:12px;
  border-top:1px solid var(--line);
  text-align:center;
}
.card .link{
  display:inline-block;
  color:var(--gold);
  font-weight:900;
  padding:10px 14px;
  border-radius:14px;
  border:2px solid var(--line2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.04)),
    linear-gradient(180deg, rgba(0,100,50,.75), rgba(0,35,18,.75));
  text-shadow:0 2px 0 rgba(0,0,0,.85);
}

/* Steps */
.steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.step{
  padding:14px 12px;
  border-radius:16px;
  border:2px solid var(--line2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.04)),
    linear-gradient(180deg, rgba(0,85,42,.75), rgba(0,28,14,.75));
  font-weight:900;
  color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,.85);
}

/* Footer */
.footer{
  text-align:center;
  margin-top:18px;
  color:rgba(255,255,255,.75);
  font-size:14px;
}

/* =======================
   RESPONSIVE
   ======================= */
@media (max-width: 980px){
  .cards{grid-template-columns: repeat(2,1fr);}
}
@media (max-width: 640px){
  .pills,
  .cards,
  .steps{grid-template-columns:1fr}
  .chrome{font-size:44px}
  .subdomain,
  .tagline{font-size:20px}
}