:root{
  --aqua-1:#e6fbfa; --aqua-2:#dff7f6; --mint:#00d1c1; --mint-dark:#00bfae;
  --glass:rgba(255,255,255,0.66); --text:#072023; --muted:#546266;
  --card-shadow: 0 10px 30px rgba(2,18,22,0.06);
  --radius:14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:linear-gradient(180deg,var(--aqua-1),var(--aqua-2));
  color:var(--text); line-height:1.45;
}

/* container */
.container{max-width:1100px;margin:0 auto;padding:18px}

/* NAV */
.nav-wrap{position:sticky;top:0;z-index:80;backdrop-filter: blur(6px)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.brand-mark{font-weight:900;font-size:18px;letter-spacing:0.6px}
.brand-mark .mc{color:var(--mint);margin-left:4px}
.nav-links{display:flex;gap:12px;align-items:center}
.nav-item{padding:8px 12px;border-radius:10px;text-decoration:none;color:inherit;font-weight:700;opacity:0.95}
.nav-item:hover{background:rgba(255,255,255,0.5)}
.nav-item.active{background:rgba(255,255,255,0.7);box-shadow:var(--card-shadow)}
.nav-actions{display:flex;align-items:center;gap:10px}

/* hamburger */
.hamburger{display:none;background:none;border:none;padding:6px;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);margin:4px 0;border-radius:2px}

/* HERO */
.hero{padding:36px 0;display:flex;gap:28px;align-items:center}
.hero-left{flex:1}
.title{font-size:44px;margin:6px 0 8px;font-weight:900;letter-spacing:0.6px}
.shiny{
  position:relative; overflow:hidden;
}
.shiny::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.03) 100%);
  transform:translateX(-110%); transition:transform 2.2s ease-in-out; pointer-events:none;
}
.shiny:hover::after{ transform:translateX(110%); }
.subtitle{margin:0 0 18px;color:var(--muted);max-width:560px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:800}
.btn-primary{background:linear-gradient(90deg,var(--mint),var(--mint-dark));color:white;box-shadow:0 12px 40px rgba(0,209,193,0.12);border:none}
.btn-outline{border:2px solid rgba(2,18,22,0.06);background:transparent;color:var(--text)}
.btn-ghost{background:transparent;border:1px solid rgba(2,18,22,0.04);padding:8px 12px;border-radius:10px}
.btn-small{padding:8px 10px;border-radius:10px}
.ip-line{margin-top:10px;font-weight:700}
.small-note{color:var(--muted);font-size:13px;margin-top:8px}

/* ip pulse */
.ip-pulse{
  display:inline-block;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,0.6);
  box-shadow: 0 6px 18px rgba(0,0,0,0.04); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  animation:ipPulse 2.6s infinite;
}
@keyframes ipPulse{
  0%{ transform:translateY(0); box-shadow:0 6px 18px rgba(0,0,0,0.04)}
  50%{ transform:translateY(-3px); box-shadow:0 18px 30px rgba(0,0,0,0.06)}
  100%{ transform:translateY(0); box-shadow:0 6px 18px rgba(0,0,0,0.04)}
}

/* glass card */
.glass-card{padding:18px;border-radius:var(--radius);background:var(--glass);box-shadow:var(--card-shadow);max-width:380px}
.card-title{margin:0 0 10px}
.info-list{list-style:none;padding:0;margin:0 0 12px}
.info-list li{margin:6px 0;font-weight:600}

/* features */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:36px 0}
.feature{background:white;padding:18px;border-radius:12px;box-shadow:var(--card-shadow);text-align:center}

/* pages + cards */
.page{padding:36px 0}
.page-title{font-size:28px;margin-bottom:8px}
.lead{color:var(--muted)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.card{background:white;padding:18px;border-radius:12px;box-shadow:var(--card-shadow)}
.rules-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:20px}
.rule-card{background:white;padding:18px;border-radius:12px;box-shadow:var(--card-shadow)}
.rule-list{padding-left:16px;margin:8px 0 0}

/* footer */
.footer{padding:18px 0;margin-top:36px}
.footer-grid{display:flex;justify-content:space-between;align-items:center;gap:12px}
.small{font-size:13px}
.muted{color:var(--muted)}
.mono{font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;background:rgba(255,255,255,0.5);padding:4px 8px;border-radius:8px}
.center{text-align:center}

/* subtle reveal/slide */
.fade-in{opacity:0;transform:translateY(8px);animation:fadeInUp .6s forwards}
@keyframes fadeInUp{to{opacity:1;transform:none}}
.slide-up{opacity:0;transform:translateY(10px);animation:slideUp .6s forwards}
@keyframes slideUp{to{opacity:1;transform:none}}
.animate{opacity:0;transform:translateY(12px);transition:all .6s cubic-bezier(.2,.9,.2,1)}
.animate.visible{opacity:1;transform:none}

/* responsive */
@media (max-width:900px){
  .hero{flex-direction:column}
  .nav-links{display:none;position:absolute;top:72px;right:20px;background:linear-gradient(180deg,var(--aqua-1),var(--aqua-2));padding:12px;border-radius:10px;flex-direction:column;box-shadow:var(--card-shadow)}
  .nav-links.show{display:flex}
  .hamburger{display:block}
  .features{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .rules-grid{grid-template-columns:1fr}
  .glass-card{max-width:100%}
}

/* tiny helpers */
.delay{transition-delay:120ms}
.brand-mark.small{font-size:16px;font-weight:900}