:root{
  --brand-dark:#2b1a16;
  --orange-1:#f97316;
  --orange-2:#d9460d;
  --yellow:#f6d36b;
  --ink:#0f172a;
  --muted:#475569;
  --line:#e2e8f0;
  --radius:16px;
  --vote:#22c55e;
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,system-ui,Arial,sans-serif;color:var(--ink);background:#fff}

/* ===== Topbar / Nav ===== */
.topbar{
  position:sticky;top:0;z-index:1000;
  background:var(--brand-dark);
  border-bottom:1px solid rgba(255,255,255,.12)
}
.inner{
  max-width:1200px;margin:0 auto;
  padding:12px 20px;             /* header height; lower to 8px if you want it slimmer */
  display:flex;align-items:center;gap:16px
}

/* Brand */
.logo-wrap{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.logo-wrap .mark{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:var(--yellow)}
.logo-wrap .mark img{width:28px;height:28px;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text .name{font-weight:800;letter-spacing:.2px;color:#fff}
.brand-text .tag{font-size:12px;color:var(--yellow);margin-top:2px}

/* Primary nav */
.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav>li{list-style:none;position:relative}

/* >>> FIX: keep label + chevron on the SAME line */
.nav>li>a,
.nav>li>button{
  appearance:none;background:none;border:none;color:#fff;cursor:pointer;
  padding:10px 12px;border-radius:10px;font-weight:700;
  display:inline-flex;align-items:center;gap:8px;   /* <- key fix */
  line-height:1;                                    /* <- prevents wrapping below */
}
.nav>li>a:hover,
.nav>li>button:hover{background:rgba(255,255,255,.10)}

/* Chevron icon beside label (not below it) */
.chev{
  width:14px;height:14px;flex:0 0 14px;
  margin-left:2px;vertical-align:middle;display:inline-block
}

/* Dropdown menu */
.menu{
  position:absolute;left:0;top:calc(100% + 8px);min-width:260px;display:none;
  background:var(--brand-dark);
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.25);
  padding:8px
}
.menu.open{display:block}
.menu a{display:block;color:#fff;text-decoration:none;padding:10px 12px;border-radius:8px}
.menu a:hover{background:rgba(255,255,255,.08);color:var(--yellow)}
.menu .label{display:block;font-size:12px;color:var(--yellow);margin:6px 0 10px 12px;font-weight:600}

/* Vote pill */
.vote-pill{
  margin-left:8px;background:var(--vote);color:#062b12;font-weight:800;
  border:none;border-radius:999px;padding:10px 16px;cursor:pointer
}

/* Mobile */
.hamb{display:none;margin-left:auto;color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:10px;background:transparent;padding:8px 10px}
.drawer{display:none}
@media (max-width: 980px){
  .nav{display:none}
  .hamb{display:block}
  .drawer{display:block;border-top:1px solid rgba(255,255,255,.12);background:var(--brand-dark)}
  .drawer details{border-bottom:1px solid rgba(255,255,255,.12)}
  .drawer summary{list-style:none;padding:14px 20px;color:#fff;font-weight:700;cursor:pointer}
  .drawer summary::-webkit-details-marker{display:none}
  .drawer a{display:block;color:#fff;text-decoration:none;padding:12px 24px}
  .drawer a:hover{background:rgba(255,255,255,.08)}
}

/* ===== Hero ===== */
.hero{
  text-align:center;
  background:linear-gradient(180deg,var(--orange-2),var(--orange-1));
  color:#1b100d;padding:72px 20px
}
.hero .wrap{max-width:1100px;margin:0 auto}
.hero h1{margin:0 0 16px;font-size:clamp(36px,6vw,64px);line-height:1.05;color:#1b100d;font-weight:800;letter-spacing:-.5px}
.hero p{max-width:860px;font-size:20px;line-height:1.5;color:#2f1c18;margin:0 0 28px}

/* CTAs */
.cta-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.btn{border-radius:12px;padding:14px 20px;font-weight:800;border:2px solid #00000022;box-shadow:0 4px 0 #00000014;cursor:pointer;text-decoration:none;display:inline-block}
.btn-primary{background:var(--yellow);color:#111}
.btn-primary:hover{filter:brightness(.95)}
.btn-ghost{background:#ffffff10;color:#1b100d;border-color:#00000033}
.btn-ghost:hover{background:#ffffff22}

/* Content */
main{max-width:1100px;margin:28px auto;padding:0 20px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
/* ===== Responsive layout for icon row ===== */
@media (max-width:1024px){
  /* override inline desktop settings */
  .icon-row{ 
    flex-wrap: wrap !important; 
    justify-content: center !important; 
    gap: 20px !important;
  }
  .icon-row .icon-item{ 
    flex: 0 0 33.333% !important;  /* 3 per row */
    margin-bottom: 16px;
  }
  .icon-row .ico{ font-size: 48px !important; } /* scale icons a bit */
  .icon-row .label{ font-size: 16px !important; }
}

@media (max-width:640px){
  .icon-row .icon-item{ 
    flex: 0 0 50% !important;     /* 2 per row */
  }
  .icon-row .ico{ font-size: 40px !important; }  /* smaller for phones */
  .icon-row .label{ font-size: 15px !important; }
}

/* Optional: very small phones */
@media (max-width:400px){
  .icon-row .icon-item{ flex: 0 0 100% !important; } /* 1 per row if needed */
}
/* ===== Clean footer bar fixed to bottom ===== */
.footer-bar{
  position: fixed;
  bottom: 0; left: 0; width: 100%;
  height: 56px;
  background: var(--brand-dark);
  border-top: 1px solid rgba(255,255,255,.12);
  z-index: 1000;
}

/* Prevent footer from covering the bottom of the page */
body{ padding-bottom: 60px; }

@media (max-width: 420px){
  .footer-bar{ height: 48px; }
  body{ padding-bottom: 52px; }
}