:root{
  --bg:#0b0f14; --card:#111827; --text:#e5e7eb; --muted:#9ca3af;
  --border:rgba(255,255,255,.10); --link:#93c5fd; --accent:#60a5fa;
  --max:1120px; --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background: radial-gradient(1200px 700px at 20% 0%, rgba(96,165,250,.25), transparent 60%),
              radial-gradient(900px 600px at 90% 10%, rgba(56,189,248,.18), transparent 55%),
              var(--bg);
  color:var(--text); line-height:1.6;
}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(var(--max), calc(100% - 2rem)); margin:0 auto}
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(10px);
  background:rgba(11,15,20,.72);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0}
.brand{
  display:flex;
  align-items:center;
  gap:.65rem;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--text);
}
.brand img{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display:block;
}

@media (min-width: 768px){
  .brand img{
    width: 56px;
    height: 56px;
  }
}
.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem .7rem; border:1px solid var(--border);
  background:rgba(255,255,255,.03); color:var(--text);
  border-radius:12px; cursor:pointer;
}
#primary-nav{display:none}
.primary-nav{display:flex; flex-direction:column; gap:.4rem; padding:.6rem 0 1rem}
.primary-nav a{padding:.6rem .75rem; border-radius:12px}
.primary-nav a:hover{background:rgba(255,255,255,.05); text-decoration:none}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.75rem 1rem; border-radius:14px; border:1px solid var(--border);
  background:rgba(255,255,255,.03); color:var(--text); font-weight:700;
}
.btn:hover{background:rgba(255,255,255,.06)}
.btn.primary{
  background:linear-gradient(135deg, rgba(96,165,250,.95), rgba(59,130,246,.85));
  border-color:rgba(59,130,246,.35); color:#081018;
}

.hero{padding:4rem 0 2.5rem}
.hero-grid{display:grid; gap:1.5rem}
.hero-card{
  background:rgba(17,24,39,.65);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.25rem;
  box-shadow:0 10px 40px rgba(0,0,0,.35);
}
.hero h1{font-size:clamp(2rem, 4.5vw, 3.2rem); line-height:1.1; margin:0 0 .75rem}
.hero p{margin:0 0 1.1rem; color:var(--muted)}
.badges{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem}
.badge{
  font-size:.9rem; padding:.4rem .6rem; border:1px solid var(--border);
  border-radius:999px; background:rgba(255,255,255,.03);
}

.section{padding:2.5rem 0}
.section h2{font-size:clamp(1.4rem, 2.6vw, 2rem); margin:0 0 1rem}
.lead{color:var(--muted); margin-top:-.3rem}
.grid{display:grid; gap:1rem}
.card{
  background:rgba(17,24,39,.62);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.1rem;
}
.card h3{margin:.2rem 0 .5rem}
.card p{margin:.3rem 0 0; color:var(--muted)}
.card ul{margin:.7rem 0 0; padding-left:1.2rem; color:var(--muted)}
.two-col{display:grid; gap:1rem}

.form input,.form textarea,.form select{
  width:100%; padding:.75rem .8rem; border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.25); color:var(--text);
}
.form label{display:block; margin:.6rem 0 .35rem; color:var(--muted)}
.form .row{display:grid; gap:.8rem}
.form button{border:0; width:100%}

.site-footer{padding:2rem 0; border-top:1px solid var(--border); color:var(--muted)}
.small{font-size:.95rem} .tiny{font-size:.85rem}

@media (min-width:768px){
  #primary-nav{display:block}
  .nav-toggle{display:none}
  .primary-nav{flex-direction:row; padding:0; gap:.2rem}
  .hero-grid{grid-template-columns:1.2fr .8fr; align-items:start}
  .grid.cols-3{grid-template-columns:repeat(3, minmax(0,1fr))}
  .two-col{grid-template-columns:1.1fr .9fr}
}
/* Force larger logo */
.brand img{
  width: 72px !important;
  height: 72px !important;
  max-height: none !important;
}
@media (min-width: 768px){
  .brand img{
    width: 96px !important;
    height: 96px !important;
  }
}