/* Minimal, modern, Web3-ish styling in dark blue/black palette
   Focused on readability, performance, and a trustworthy aesthetic. */

:root{
  --bg-0:#0b1220;
  --bg-1:#0e1628;
  --card:rgba(255,255,255,0.04);
  --card-border:rgba(255,255,255,0.08);
  --text:#e6edf3;
  --muted:#9fb0c1;
  --accent:#5bb2ff;
  --accent-2:#8efcf3;
  --good:#27d49c;
  --bad:#ff6b6b;
  --shadow:0 8px 30px rgba(0,0,0,0.35);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, #12203a 0%, transparent 60%),
    radial-gradient(1000px 600px at 100% 10%, #091426 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  background-attachment: fixed;
}

img{max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1120px, 92%);margin-inline:auto}

.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden}
.skip-link{position:absolute;left:-999px;top:auto}
.skip-link:focus{left:1rem;top:1rem;background:var(--accent);color:#001b2e;padding:.5rem 1rem;border-radius:.5rem}

.site-header{
  position:sticky;top:0;z-index:80;
  background:rgba(5,10,20,0.7);backdrop-filter: blur(8px);
  border-bottom:1px solid var(--card-border);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.brand{display:flex;gap:.6rem;align-items:center;font-weight:700;color:var(--text)}
.brand span{letter-spacing:.2px}
.brand:hover{text-decoration:none}

.nav-toggle{
  display:none;
  font-size:1.25rem;
  background:transparent;border:1px solid var(--card-border);color:var(--text);
  padding:.35rem .6rem;border-radius:.5rem
}
.nav-menu{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.nav-menu a{display:inline-block;padding:.4rem .6rem;border-radius:.4rem}
.nav-menu a:hover{background:var(--card)}
.nav-menu--static{gap:1rem}

@media (max-width: 860px){
  .nav-toggle{display:inline-block}
  .nav-menu{position:absolute;right:1rem;top:62px;background:rgba(10,16,28,0.95);
    border:1px solid var(--card-border);border-radius:.75rem;padding:.6rem;flex-direction:column;display:none}
  .nav-menu[aria-expanded="true"]{display:flex}
}

.hero{
  position:relative;overflow:hidden;padding:5.5rem 0 3rem;
}
.hero__title{
  font-size: clamp(1.8rem, 3.6vw + 1rem, 3.25rem);
  line-height:1.15;margin:0 0 .75rem;
}
.accent-underline{background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero__subtitle{color:var(--muted);max-width:65ch;margin-bottom:1.25rem}
.hero__bullets{display:grid;gap:.4rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));padding:0;margin:1rem 0 0;list-style: none}

.hero-bg{
  position:absolute;inset:-40% -10% -10% -10%;
  background: radial-gradient(800px 400px at 75% 10%, rgba(91,178,255,0.12) 0%, transparent 70%),
              radial-gradient(700px 360px at 25% 0%, rgba(142,252,243,0.10) 0%, transparent 65%);
  pointer-events:none;
}

.cta-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin:1rem 0}
.btn{
  display:inline-block;border:1px solid var(--card-border);padding:.8rem 1rem;border-radius:.7rem;
  font-weight:700;text-decoration:none;box-shadow:var(--shadow);transition:transform .06s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{
  background:linear-gradient(135deg,#0e2d4b 0%, #0b1f34 50%, #0e2d4b 100%);
  border-color:#204a7a;
}
.btn--primary:hover{background:linear-gradient(135deg,#12375b 0%, #0c2540 50%, #12375b 100%)}
.btn--ghost{background:transparent}
.tiny{font-size:.85rem}
.note{color:var(--muted)}

.trust{padding:1.5rem 0}
.trust__card{
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1px solid var(--card-border); border-radius:.9rem; padding:1rem 1.25rem; text-align:center
}
.trust__line{margin:.2rem 0 .2rem;font-weight:700}
.trust__meta{margin:0;color:var(--muted)}

.section-title{font-size:1.6rem;margin:2.5rem 0 1rem}
.features{padding:1rem 0 2rem}
.grid{
  display:grid;gap:1rem;
  grid-template-columns:repeat(12,1fr)
}
.card{
  grid-column: span 6;
  background:var(--card);border:1px solid var(--card-border);border-radius:1rem;padding:1rem 1.1rem;
}
.card h3{margin-top:0}
.card__icon{font-size:1.25rem;margin-bottom:.35rem}
.tight{margin:.4rem 0 0 1rem}

@media (max-width: 860px){ .card{grid-column: span 12} }

.good{color:var(--good)}
.bad{color:var(--bad)}

.how{padding:1rem 0 2rem}
.steps{counter-reset:step; list-style:none;padding:0;margin:0 0 1rem}
.steps > li{position:relative;padding-left:2.2rem;margin:.6rem 0}
.steps > li::before{
  counter-increment: step; content: counter(step);
  position:absolute;left:0;top:.1rem;width:1.6rem;height:1.6rem;border-radius:.4rem;
  display:grid;place-items:center;background:linear-gradient(135deg,#183354,#0b1f34);
  color:#bfe0ff;border:1px solid #264a77
}

.faq{padding:1rem 0 2.5rem}
.qa{border:1px solid var(--card-border);border-radius:.8rem;background:rgba(255,255,255,0.03);padding:.6rem .9rem;margin:.6rem 0}
.qa summary{cursor:pointer;font-weight:700}
.qa__a{color:var(--muted);margin-top:.4rem}

.prose{padding:2rem 0}
.prose h1{margin-top:.2rem}
.prose h2{margin-top:1.4rem}

.cta{text-align:center;padding:2rem 0 3rem}

.site-footer{
  border-top:1px solid var(--card-border);
  background:rgba(5,10,20,0.6);backdrop-filter: blur(8px);
  padding:1.25rem 0;margin-top:2rem
}
.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer-nav{display:flex;gap:1rem}
.brand--footer span{font-weight:700}
.muted{color:var(--muted)}