:root{
  --bg0:#07171b; --bg1:#0a2026; --bg2:#0c2a31;
  --grad1:#10b3bb; --grad2:#4ae2d5; --grad3:#5a60ff;
  --ink:#dff7fb; --ink2:#9fd3db;
  --card:rgba(255,255,255,.06); --line:rgba(255,255,255,.16);
  --glow:#54ffe6;
  --container-desktop:1200px; --container-mobile:80vw;
  --nav-offset:86px; --how-card-mobile:90%;
}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{
  margin:0;color:var(--ink);
  background:
    radial-gradient(60rem 60rem at 10% -10%, #132e33 0%, transparent 60%),
    radial-gradient(50rem 50rem at 100% 0%, #0d2c4a 0%, transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg0) 40%, var(--bg2) 100%);
  font:16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
a{color:var(--ink); text-decoration:none}
.wrap{width:min(var(--container-desktop),94vw); margin:0 auto; padding:clamp(12px,3vw,24px)}
.wrap.wide{ width:min(1400px,96vw) }
#nav-spacer{height:var(--nav-offset)}
section{scroll-margin-top:calc(var(--nav-offset)+10px); margin-bottom:clamp(18px,3.2vw,32px)}
.copy,[data-copy]{cursor:pointer; border-bottom:1px dotted var(--ink2)}
.addr-break{word-break:break-all}

/* Background orbs */
.bg-orb,.bg-orb2{position:fixed; pointer-events:none; z-index:-1; filter:blur(18px)}
.bg-orb {inset:auto auto 10% -10%; width:28rem;height:28rem; background:radial-gradient(closest-side, rgba(84,255,230,.25), transparent 70%)}
.bg-orb2{inset:15% -10% auto auto; width:32rem;height:32rem; background:radial-gradient(closest-side, rgba(90,96,255,.18), transparent 70%)}

/* Header / Nav */
.nav-outer{position:fixed; top:0; left:0; right:0; z-index:1000; backdrop-filter:saturate(120%) blur(10px)}
.nav-outer>.wrap{width:min(var(--container-desktop),94vw); padding:clamp(8px,2.2vw,14px)}
.nav{
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding:10px 14px; border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid var(--line); box-shadow:0 10px 40px rgba(0,0,0,.25); flex-wrap:wrap;
}
.brand{display:flex; gap:10px; align-items:center}
.brand img{width:40px;height:40px;border-radius:10px;display:block}
.brand .t{font-family:"Chakra Petch"; font-weight:700; letter-spacing:.5px}
.navlinks{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.navlinks a{opacity:.95; font-weight:600; white-space:nowrap}
.navlinks a.active{border-bottom:2px solid var(--grad1); padding-bottom:2px}

/* Buttons */
.btn{
  appearance:none; border:0; cursor:pointer; color:#06181b; font-weight:800;
  background:linear-gradient(90deg,var(--grad1),var(--grad2));
  padding:12px 18px; border-radius:999px
}
.btn:hover{box-shadow:0 0 24px -6px var(--glow)}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.menu-toggle{display:none; color:var(--ink); background:transparent; border:1px solid var(--line);
  border-radius:10px; width:42px; height:42px; align-items:center; justify-content:center}

/* ===== Dropdown: closed dark / open blue (button look) ===== */
.select-wrap{ position:relative; display:inline-flex; align-items:center }

/* Closed: dark + white */
.select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid var(--line);
  color:var(--ink);
  padding:12px 44px 12px 14px;
  border-radius:999px;
  font-weight:800; letter-spacing:.2px; line-height:1.2;
  cursor:pointer; min-width:140px;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  color-scheme: dark; /* dark list bg */
}
.select:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border-color:rgba(255,255,255,.24);
}

/* Open/active: button blue + dark text */
.select:focus,
.select:active{
  outline:0;
  border:0;
  background:linear-gradient(90deg,var(--grad1),var(--grad2));
  color:#06181b;
  box-shadow:
    0 0 0 3px rgba(84,255,230,.25),
    0 10px 24px rgba(0,0,0,.35);
}

/* Chevron without SVG (border trick) */
.select-wrap::after{
  content:"";
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:0; height:0; pointer-events:none;
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-top:6px solid var(--ink);  /* closed: white chevron */
}
/* Invert chevron on focus */
.select-wrap:focus-within::after{
  border-top-color:#06181b;
  filter: drop-shadow(0 0 4px rgba(16,179,187,.6));
}

/* Dark options (as far as allowed) */
.select option{ background:#0a2026; color:var(--ink) }
.select option:checked{ background:#0c2a31 }
.select option[disabled]{ color:#6b8c94; background:#0a2026 }

/* Controls layout */
.pool-controls{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.pool-controls .control{ display:flex; align-items:center; gap:8px }
.badge{ font-weight:700; font-family:"Chakra Petch"; opacity:.85 }

/* Cards / Grids */
.hero{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(16px,3.2vw,28px); align-items:center}
.h1{
  font-family:"Chakra Petch"; font-weight:700; font-size:clamp(1.8rem,5vw,3rem); margin:0 0 6px;
  background:linear-gradient(90deg,#4de7db,#16b8bf,#5a60ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 24px rgba(84,255,230,.2)
}
.lead{color:var(--ink2); margin:0 0 12px}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:clamp(14px,2.6vw,22px); margin-bottom:clamp(12px,2.8vw,18px)}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,3.4vw,24px)}
/* Pools Landing: 4→2→1 */
.grid-cols-4{display:grid; gap:clamp(14px,3.4vw,24px); grid-template-columns:repeat(auto-fit, minmax(220px,1fr))}
.grid-pools{display:grid; gap:clamp(14px,3.4vw,24px); grid-template-columns:repeat(auto-fit, minmax(520px,1fr))}
h2,h3{font-family:"Chakra Petch"}
h2{margin:4px 0 10px; font-size:clamp(1.2rem,2.8vw,1.6rem)}
h3{margin:10px 0 6px}
ul{margin:8px 0 8px 20px}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,3vw,14px); margin-top:10px}
.kpi{text-align:left; padding:14px; border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border:1px solid var(--line)}
.kpi b{display:block; font-family:"Chakra Petch"}
.table-wrap{overflow:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse}
th,td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:left}
th{font-family:"Chakra Petch"}

/* Tablet */
@media (max-width:1024px){
  .grid-pools{grid-template-columns:repeat(auto-fit, minmax(440px,1fr))}
}

/* Mobile */
@media (max-width:960px){
  .wrap{width:var(--container-mobile); max-width:none; padding-left:0; padding-right:0}
  .nav-outer>.wrap{width:var(--container-mobile); padding-left:0; padding-right:0}
  .nav{border-radius:12px}
  .menu-toggle{display:inline-flex}
  .navlinks{display:none; width:100%; flex-direction:column; gap:12px; padding-top:10px; border-top:1px solid var(--line); margin-top:8px}
  #site-nav[data-open="1"] .navlinks{display:flex}
  .navlinks .btn{width:100%; text-align:center}
  .hero{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .card{margin-left:auto; margin-right:auto}
  table{min-width:0; font-size:14px}
  th,td{padding:8px 10px}
  .lead, .card p, .card li{font-size:.95rem}
  .addr-break{font-size:.95rem}
  #how .card{width:100% !important; margin-left:0; margin-right:0}
}

/* very small */
@media (max-width:420px){
  .navlinks .btn{padding:9px 12px}
}
/* Address pill dropdown */
.addr-menu{
  position:absolute; right:14px; top:64px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border:1px solid var(--line); border-radius:12px; padding:6px;
  backdrop-filter:saturate(120%) blur(8px);
  box-shadow:0 18px 40px rgba(0,0,0,.35); z-index:50;
}
.addr-menu button, .addr-menu a{
  display:block; width:100%; text-align:left; border:0; background:transparent;
  color:var(--ink); padding:10px 12px; border-radius:10px; font-weight:600; cursor:pointer; text-decoration:none;
}
.addr-menu button:hover, .addr-menu a:hover{ background:rgba(255,255,255,.10) }
/* Address pill dropdown (username form) */
.addr-menu{
  position:absolute; right:14px; top:64px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border:1px solid var(--line); border-radius:12px; padding:10px;
  backdrop-filter:saturate(120%) blur(8px);
  box-shadow:0 18px 40px rgba(0,0,0,.35); z-index:60;
  min-width:220px;
}
.addr-menu .menu-label{ display:block; font-weight:700; font-family:"Chakra Petch"; margin:2px 0 6px; opacity:.85 }
.addr-menu .menu-input{
  width:100%; padding:10px 12px; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid var(--line);
  color:var(--ink);
}
.addr-menu .menu-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:8px }
.addr-menu .menu-hint{ margin-top:6px; font-size:.92em; opacity:.85 }

/* ===== Fixed header offset (global, zuverlässig) ========================= */
body{
  /* Abstand unter dem fixen Header – kann bei Bedarf angepasst werden */
  padding-top: calc(var(--nav-offset) + 8px);
}

/* Alten Spacer neutralisieren, damit nicht doppelt gepolstert wird */
#nav-spacer{ height:0 !important; }

/* Dropdown (addr-menu) – compact frosted glass + sicher oberhalb aller Layer */
#addr-menu{
  position: fixed;                /* bleibt */
  z-index: 2147483647;            /* maximal: über allen Stacks */
  pointer-events: auto;

  max-width: 320px;
  min-width: 260px;

  background: rgba(16,24,28,.65);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
}

#addr-menu input[type="text"]{
  width:100%;
  padding:10px 12px;
  box-sizing:border-box;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  color: var(--ink,#e8f6f8);
}

#addr-menu .btn,
#addr-menu .btn.ghost{
  width:100%;
  margin-top:8px;
  cursor:pointer;
}
#addr-menu #name-hint{ font-size:12px; opacity:.8; margin-top:6px; }

.pay-group { display:inline-flex; gap:8px; align-items:center; margin-left:8px; }
#price-label { opacity:.85; }
/* in /css/site.css ergänzen */
#pool-size-label {
  border: 1px solid rgba(255,255,255,.12);
}