/* main.css */
:root{
  --bg-0:#06090f;
  --bg-1:#0a1220;
  --bg-2:#0e1a2b;
  --txt:#e7f6ff;
  --muted:#89a7c4;
  --accent:#58b6ff;
  --accent-2:#257cff;
  --ring: rgba(88,182,255,.45);
  --max:1120px;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.45), 0 0 40px rgba(26,106,255,.06);
}

*{box-sizing:border-box}
html,body {
    height:100%;
}

body {
    margin:0;
    font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    color:var(--txt);
    background: radial-gradient(1200px 600px at 20% -10%, rgba(37,124,255,.35), transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, rgba(0,194,255,.22), transparent 60%),
    linear-gradient(180deg, #070a12 0%, #05070c 100%);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

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

.container {
    width:min(100%, var(--max)); margin-inline:auto; padding:0 20px;
}

/* Header */
.nav {
    position:sticky; 
    top:0; 
    z-index:20; 
    backdrop-filter:saturate(140%) blur(8px); 
    background:linear-gradient(180deg, rgba(10,18,32,.75), rgba(10,18,32,.35)); border-bottom:1px solid rgba(88,182,255,.08);
}

.nav-inner {
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    padding:14px 0;
}

.brand {
    display:flex;
    align-items:center;
    gap:12px; font-weight:800;
    letter-spacing:.2px;
}

.brand-badge {
    width:36px;
    height:36px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow:0 8px 18px rgba(37,124,255,.35);
}

.brand span {
    font-size:18px;
}

.nav a {
    opacity:.9;
}

.nav a:hover {
    opacity:1;
}

.nav-links {
    display:flex; gap:18px;
}


/* Hero */
.hero {
    padding:84px 0 40px;
}

.hero-grid {
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:36px; align-items:center;
}

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

.tag {
    display:inline-flex;
    align-items:center;
    gap:10px; padding:6px 12px;
    border-radius:999px;
    background:rgba(88,182,255,.10);
    color:var(--accent);
    border:1px solid rgba(88,182,255,.25);
}

.h1 {
    font-size: clamp(36px, 5vw, 56px);
    line-height:1.05;
    margin:14px 0 12px;
    font-weight:800;
    letter-spacing:-.02em;
}

.sub {
    font-size: clamp(16px, 1.6vw, 18px);
    color:var(--muted);
}

.bullets {display:grid;
     grid-template-columns:1fr 1fr;
    gap:12px 16px; margin:26px 0 34px;
}

@media (max-width: 600px) {
    .bullets{grid-template-columns:1fr}
}

.bullet {
    display:flex;
    gap:12px;
    align-items:flex-start;
}

.check {
    width:22px;
    height:22px;
    flex:0 0 22px;
    border-radius:6px;
    display:grid;
    place-items:center;
    background:linear-gradient(180deg, var(--accent), var(--accent-2));
    box-shadow:0 6px 12px rgba(37,124,255,.35);
}

.cta {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.btn {
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 16px;
    border-radius:12px;
    font-weight:600;
    border:1px solid rgba(88,182,255,.30);
    background:linear-gradient(180deg, rgba(17,28,47,.9), rgba(17,28,47,.6));
    box-shadow: var(--shadow);
}

.btn:hover {
     background:linear-gradient(180deg, rgba(17,28,47,1), rgba(17,28,47,.8));
     transform:translateY(-1px);
}

.btn.primary {
    background:linear-gradient(180deg, var(--accent), var(--accent-2));
    color:#001024; border-color:transparent;
}

.btn.primary:hover {
    filter:saturate(110%);
}

.card {
    background:linear-gradient(180deg, rgba(12,22,39,.8), rgba(10,18,32,.8));
    border:1px solid rgba(88,182,255,.12);
    border-radius:var(--radius); box-shadow: var(--shadow)
}

/* Address copy */
.addr {
    display:flex;
    align-items:center;
    gap:10px; padding:10px 12px;
    background:var(--bg-1);
    border:1px solid rgba(88,182,255,.18);
    border-radius:12px;
    width:100%;
}

.addr code {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.copy {
    padding:8px 12px;
    border-radius:10px;
    border:1px solid rgba(88,182,255,.30);
    background:var(--bg-2);
    cursor:pointer;
}

/* Feature grid */
.features {
    padding:60px 0;
}

.grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

@media (max-width: 1000px) {
    .grid{grid-template-columns:repeat(2,1fr)}
}

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

.feature {
    padding:22px;
}

.feature h3 {
    margin:14px 0 8px;
}

.muted {
    color:var(--muted);
}

/* Footer */
footer {
    padding:28px 0 60px;
    color:var(--muted);
    border-top:1px solid rgba(88,182,255,.10);
}

.foot-flex {
    display:flex;
    gap:16px;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
}

.links {
    display:flex; gap:12px;
    flex-wrap:wrap;
}

.links a {
    padding:8px 12px;
    border:1px solid rgba(88,182,255,.18);
    border-radius:10px;
}

.links a:hover{
    background:rgba(88,182,255,.08);
}

/* tiny helpers */
.sr-only {
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}