/* Dark theme: black/near-black surfaces, high-contrast type, subtle glow accents */
:root{
  --bg:#0b0c10;           /* near black */
  --panel:#0f1116;        /* panel surface */
  --edge:rgba(255,255,255,.08);
  --muted:#9aa0a6;        /* gray text */
  --fg:#e8eaf0;           /* foreground */
  --accent:#6ee7b7;       /* green accent */
  --accent-weak:rgba(110,231,183,.12);
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  --focus: 0 0 0 2px #0b0c10, 0 0 0 4px rgba(110,231,183,.6);
}

*{box-sizing:border-box}
html,body{height:100%}
html{color-scheme:dark}
body{
  margin:0;
  font:500 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--fg);
  background:
    radial-gradient(900px 500px at 10% -20%, rgba(110,231,183,.08), transparent),
    radial-gradient(800px 400px at 120% 0%, rgba(147,197,253,.08), transparent),
    var(--bg);
}

/* Skip link and focus states */
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{position:fixed; left:20px; top:20px; width:auto; height:auto; padding:10px 12px; background:#111318; border:1px solid var(--edge); border-radius:10px; box-shadow:var(--shadow)}
*:focus-visible{outline:none; box-shadow:var(--focus)}

/* Header */
.site-header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:16px;
  padding:14px 20px; backdrop-filter:saturate(140%) blur(6px);
  background:linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.2));
  border-bottom:1px solid var(--edge);
}
.brand{font-weight:800; letter-spacing:.4px; text-decoration:none; color:var(--fg)}
.site-nav{margin-left:auto; display:flex; gap:16px}
.site-nav a{color:var(--fg); text-decoration:none; padding:10px 12px; border-radius:var(--radius-sm); border:1px solid transparent}
.site-nav a:hover{border-color:var(--edge); background:rgba(255,255,255,.03)}
.nav-toggle{display:none; margin-left:auto; background:transparent; color:var(--fg); border:1px solid var(--edge); padding:8px 10px; border-radius:10px}

/* Hero */
.hero{position:relative; padding:64px 20px}
.hero::before{content:""; position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(600px 300px at 30% 0%, var(--accent-weak), transparent)}
.hero-inner{max-width:1100px; margin:0 auto}
.eyebrow{display:inline-block; color:var(--muted); border:1px solid var(--edge); padding:6px 10px; border-radius:999px; font-size:12px; letter-spacing:.4px}
.hero h1{margin:14px 0 10px; font-size:clamp(28px, 5vw, 52px); line-height:1.05}
.lede{color:var(--muted); font-size:clamp(16px, 2.6vw, 20px); max-width:70ch}
.actions{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}

/* Buttons */
.btn{appearance:none; border:1px solid var(--edge); background:#12131a; color:var(--fg); padding:10px 14px; border-radius:var(--radius-sm); font-weight:700; text-decoration:none; transition:.18s ease}
.btn:hover{transform:translateY(-1px); border-color:rgba(255,255,255,.26)}
.btn.primary{background:linear-gradient(180deg, rgba(110,231,183,.18), rgba(110,231,183,.06)); border-color:rgba(110,231,183,.35)}

/* Sections */
.section{padding:40px 20px}
.section h2{max-width:1100px; margin:0 auto 10px}
.steps{max-width:1100px; margin:0 auto; padding:0; list-style:none; color:var(--muted)}
.steps li{padding:10px 0}

/* Grid / Cards */
.grid{display:grid; grid-template-columns:repeat(12, 1fr); gap:14px; max-width:1100px; padding:20px; margin:0 auto}
.features .card{grid-column:span 6; background:var(--panel); border:1px solid var(--edge); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.features .card h3{margin:0 0 6px}
.features .card p{margin:0; color:var(--muted)}

/* Utility containers */
.container{max-width:1100px; margin:0 auto; padding:0 20px}
.cta{padding:30px; background:var(--panel); border:1px solid var(--edge); border-radius:var(--radius); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:space-between; gap:14px}
.cta p{margin:0; color:var(--muted)}

/* Footer */
.site-footer{margin-top:40px; border-top:1px solid var(--edge); background:#0a0b0f}
.footer-inner{max-width:1100px; margin:0 auto; padding:18px 20px; display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:12px; align-items:start}
.footer-brand{font-weight:800}
.footer-nav{display:flex; gap:12px; flex-wrap:wrap}
.footer-nav a{color:var(--fg); text-decoration:none; border:1px solid transparent; padding:6px 8px; border-radius:8px}
.footer-nav a:hover{border-color:var(--edge); background:rgba(255,255,255,.04)}
address{font-style:normal; color:var(--muted)}
.legal{color:var(--muted)}

/* Content pages */
.page{max-width:1100px; margin:0 auto; padding:40px 20px}
.page h1{margin:0 0 8px; font-size:clamp(28px, 4vw, 40px)}
.lead{color:var(--muted); margin:0 0 18px}
.pill{display:inline-block; padding:6px 10px; border:1px solid var(--edge); border-radius:999px; color:var(--muted); font-size:12px; letter-spacing:.4px}
.grid.cols-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px}
.tile{background:var(--panel); border:1px solid var(--edge); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
.tile h3{margin:0 0 8px}
.tile p{margin:0; color:var(--muted)}
.stack{display:grid; gap:8px}

/* Forms */
form{display:grid; gap:12px; max-width:560px}
label{display:grid; gap:6px}
input, textarea{background:#111318; color:var(--fg); border:1px solid var(--edge); border-radius:10px; padding:10px}
textarea{min-height:140px; resize:vertical}
button{cursor:pointer}

/* Responsive */
@media (max-width: 900px){
  .features .card{grid-column:span 12}
  .footer-inner{grid-template-columns:1fr 1fr}
  .cta{flex-direction:column; align-items:flex-start}
}
@media (max-width: 680px){
  .site-nav{display:none}
  .nav-toggle{display:block}
  .grid.cols-3{grid-template-columns:1fr}
}