:root{
  --bg:#f6efe9;
  --card:#ffffffaa;
  --text:#2b2b2b;
  --muted:#6b6b6b;
  --olive:#3f4a33;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius:18px;
}

*{box-sizing:border-box}
html, body{ overflow-x:hidden; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background: linear-gradient(#f7efe8, #f3ebe4);
}

a{color:inherit;text-decoration:none}

/* -------------------------------
   LAYOUT WIDTH (desktop + responsive)
-------------------------------- */

/* Responsive container with gutters */
.container{
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  padding: 24px 0;
}

/* Nav matches container width */
.nav{
  width: min(1320px, calc(100% - 48px));
  margin: 18px auto 0;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background:#ffffff7a;
  border:1px solid #ffffff9e;
  border-radius:999px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  position: relative; /* required for dropdown menu positioning */
}

.logoBox{
  width:120px;height:44px;
  border-radius:12px;
  background:#e14b4b;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;letter-spacing:1px;
}

/* Desktop menu */
.menu{
  display:flex;
  gap:18px;
  color:#333;
}
.menu a{opacity:.8}
.menu a:hover{opacity:1}

.navActions{display:flex;align-items:center;gap:10px}
.iconBtn{
  width:38px;height:38px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:#ffffffa8;border:1px solid #ffffff;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 18px;border-radius:999px;
  border:0;cursor:pointer;font-weight:650;
}
.btnDark{background:#2c2c2c;color:#fff}
.btnOlive{background:var(--olive);color:#fff}
.btnOlive:hover{filter:brightness(1.05)}

/* Hamburger (hidden on desktop) */
.hamburger{
  display:none;
  border:0;
  background:#ffffffa8;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid #ffffff;
  box-shadow: var(--shadow);
  font-size:20px;
  cursor:pointer;
}

/* -------------------------------
   HERO
-------------------------------- */

.hero{
  margin-top:18px;
  padding:26px;
  background:#ffffff7a;
  border:1px solid #ffffff;
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap:22px;
  align-items:center;
}

.hero h1{
  font-family: ui-serif, Georgia, 'Times New Roman', serif;
  font-size: clamp(34px, 4vw, 56px);
  line-height:1.02;
  margin:0 0 10px;
}
.subtext{margin:0 0 18px;color:var(--muted);font-size:16px}
.launchingSoon{margin:18px 0 0;opacity:.7}
.downArrow{margin-top:8px;opacity:.6;font-size:22px}

.heroArt{
  position:relative;
  height:320px;
  border-radius:22px;
  background: radial-gradient(circle at 50% 40%, #ffffff, #f2e8e0);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.glow{
  position:absolute;inset:-80px;
  background: radial-gradient(circle at 50% 30%, #fff, transparent 55%);
  opacity:.9;
}
.imagePlaceholder{
  position:relative;
  width:80%;height:70%;
  border:2px dashed rgba(0,0,0,.15);
  border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(0,0,0,.35);
  font-weight:700;
}

/* -------------------------------
   SECTIONS
-------------------------------- */

.section{margin-top:22px}
.sectionTitle{
  text-align:center;
  font-family: ui-serif, Georgia, serif;
  font-size:32px;
  margin:14px 0 16px;
}

.cardRow{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:14px;
}

.toyCard{
  background:#ffffff85;
  border:1px solid #ffffff;
  border-radius:18px;
  box-shadow: var(--shadow);
  padding:12px;
  text-align:center;
}
.toyImg{
  height:120px;
  border-radius:14px;
  background:#f2e8e0;
  display:flex;align-items:center;justify-content:center;
  color:rgba(0,0,0,.35);
  border:1px solid #ffffff;
}
.toyName{
  margin:10px 0 10px;
  font-family: ui-serif, Georgia, serif;
  font-size:20px;
}
.voteBtn{
  width:100%;
  background:#ffffffb5;
  border:1px solid #ffffff;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:650;
}
.voteBtn:hover{filter:brightness(1.02)}

.twoCol{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
}

.panel{
  background:#ffffff7a;
  border:1px solid #ffffff;
  border-radius:18px;
  box-shadow: var(--shadow);
  padding:18px;
}
.panel h3{
  font-family: ui-serif, Georgia, serif;
  margin:0 0 6px;
  font-size:28px;
}
.muted{color:var(--muted);margin:6px 0 14px}

.form{display:flex;flex-direction:column;gap:12px}
.formRow{display:flex;gap:10px}
.input{
  width:100%;
  padding:14px 14px;
  border-radius:14px;
  border:1px solid #ffffff;
  background:#ffffffb8;
  outline:none;
}
.joinedRow{
  margin-top:14px;
  display:flex;align-items:center;gap:10px;
}
.avatars{opacity:.8}

.leaderList{margin:8px 0 0;padding-left:22px}
.eggArt{margin-top:10px}
.note{margin-top:10px;color:var(--muted);text-align:center}

/* -------------------------------
   LAUNCH ROW (Countdown + CTA)
-------------------------------- */

.launchRow{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  align-items:stretch;
}

.countdownBox, .ctaBox{
  background:#ffffff7a;
  border:1px solid #ffffff;
  border-radius:18px;
  box-shadow: var(--shadow);
  padding:18px;
  min-width: 0; /* prevents overflow */
}

.launchTitle{
  text-align:center;
  font-family: ui-serif, Georgia, serif;
  font-size:26px;
  margin-bottom:12px;
}

.countdown{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:nowrap;       /* force single line */
}

.timeBox{
  flex:1;
  min-width:0;            /* critical for mobile fitting */
  background:#ffffffb8;
  border:1px solid #ffffff;
  border-radius:14px;
  text-align:center;
  padding:12px 8px;
}
.timeBox b{font-size:26px;display:block}
.timeBox span{color:var(--muted);font-size:12px}

.ctaBox{display:flex;flex-direction:column;gap:10px;justify-content:center}

.footer{
  text-align:center;
  padding:24px 0 12px;
  color:var(--muted);
}

/* -------------------------------
   RESPONSIVE
-------------------------------- */

@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
  .twoCol{ grid-template-columns: 1fr; }
  .launchRow{ grid-template-columns: 1fr; }

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

@media (max-width: 520px){

  /* tighter gutters */
  .container, .nav{
    width: calc(100% - 24px);
  }

  /* NAV: one line (logo + actions + hamburger) */
  .nav{
    padding: 10px 12px;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .logoBox{
    width:auto;
    height:auto;
    padding: 8px 12px;
    font-size: 14px;
  }

  /* show hamburger on mobile */
  .hamburger{ display:flex; align-items:center; justify-content:center; }

  /* hide desktop menu; use dropdown */
  .menu{
    display:none;
    position:absolute;
    left: 12px;
    right: 12px;
    top: 64px;
    padding: 12px;
    flex-direction: column;
    gap: 10px;
    border-radius: 18px;
    background: #ffffffea;
    box-shadow: var(--shadow);
    z-index: 50;
  }
  .menu.open{ display:flex; }

  .btnDark{
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
  }
  .iconBtn{ width:34px; height:34px; }

  /* Countdown fits in one row */
  .countdown{ gap: 8px; }
  .timeBox{ padding: 10px 6px; }
  .timeBox b{ font-size: 22px; }
  .timeBox span{ font-size: 11px; }
}

@media (max-width: 420px){
  .cardRow{ grid-template-columns: 1fr; }
}