:root{
  --bg:#fafafa;
  --fg:#0f172a;
  --muted:#475569;
  --accent:#16a34a;
  --accent2:#f97316;
  --accent3:#ef4444;
  --brand:#0ea5e9;
  --card:#ffffff;
  --ring: rgba(14,165,233,0.25);
  --shadow: 0 8px 30px rgba(2, 8, 23, 0.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--fg);
  line-height:1.7;
}

.container{max-width:1200px;margin:0 auto;padding:0 1.25rem}
.grid{display:grid;gap:1.25rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.8);
  backdrop-filter: blur(8px);
  border-bottom:1px solid #e5e7eb;
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:0.75rem 0}
.logo{display:flex; align-items:center; gap:.5rem; font-weight:800; letter-spacing:.3px}
.logo svg{width:28px;height:28px}
nav a{color:#0f172a;text-decoration:none;font-weight:600;margin:0 .5rem}
nav a.active{color:var(--accent)}
nav a:hover{color:var(--accent)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1rem; border-radius:14px; border:1px solid transparent;
  text-decoration:none; font-weight:700; transition:.2s transform;
  box-shadow: var(--shadow);
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--brand)); color:white}
.btn-ghost{background:white; color:var(--fg); border-color:#e5e7eb}

.hero{
  position:relative; overflow:hidden; padding:3rem 0 2rem;
  background: radial-gradient(1200px 400px at 20% -10%, rgba(16,185,129,.15), transparent),
             radial-gradient(1000px 350px at 80% -10%, rgba(234,88,12,.12), transparent),
             radial-gradient(800px 300px at 50% 10%, rgba(239,68,68,.1), transparent);
}
.hero h1{font-size:clamp(28px,4vw,52px); line-height:1.1; margin:.25rem 0}
.hero p{color:var(--muted); max-width:720px}

.card{
  background:var(--card); border:1px solid #e5e7eb; border-radius:18px; padding:1rem; box-shadow:var(--shadow)
}
.card h3{margin:.2rem 0}
.badge{display:inline-block; padding:.25rem .5rem; border-radius:999px; background:rgba(22,163,74,.08); color:var(--accent); font-weight:700; font-size:.8rem}

.footer{margin-top:3rem; padding:2rem 0; background:white; border-top:1px solid #e5e7eb; color:#334155}
.footer a{color:#0ea5e9; text-decoration:none}

.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.85rem; padding:.15rem .35rem; border-radius:6px; border:1px solid #cbd5e1; background:#f8fafc}

/* Carousel */
.carousel{position:relative; overflow:hidden; border-radius:18px; border:1px solid #e5e7eb; background:white}
.carousel-track{display:flex; transition: transform .6s ease}
.carousel-slide{min-width:100%; padding:2rem}
.carousel-controls{position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none}
.carousel-controls button{pointer-events:auto; border:none; background:rgba(15,23,42,.65); color:white; padding:.5rem .75rem; border-radius:12px; cursor:pointer}
.carousel-dots{display:flex; gap:.4rem; justify-content:center; margin-top:.75rem}
.carousel-dots button{width:10px; height:10px; border-radius:999px; border:none; background:#e2e8f0; cursor:pointer}
.carousel-dots button.active{background:var(--accent)}

/* Animations */
.reveal{opacity:0; transform: translateY(12px); transition:.6s ease}
.reveal.visible{opacity:1; transform: translateY(0)}

/* Tables */
table{width:100%; border-collapse:collapse}
th,td{padding:.65rem; border-bottom:1px solid #e5e7eb; text-align:left}

/* Forms */
input, textarea, select{
  width:100%; padding:.7rem .85rem; border:1px solid #cbd5e1; border-radius:12px; outline:none
}
input:focus, textarea:focus, select:focus{box-shadow:0 0 0 6px var(--ring); border-color:#38bdf8}
label{font-weight:700; margin-bottom:.3rem; display:block}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media(max-width:900px){.form-row{grid-template-columns:1fr}}

/* Ad slot */
.ad-slot{border:1px dashed #e5e7eb; padding:1rem; border-radius:16px; background:linear-gradient(90deg, #fff, #fafafa)}
.ad-slot small{color:#64748b}
.ad-slot h4{margin:.2rem 0}