:root{
  --bg:#ffffff; --fg:#0f172a; --muted:#475569; --border:#e5e7eb;
  --primary:#0ea5e9; /* sky-500 */
  --primary-600:#0284c7;
  --accent:#22c55e; /* green */
  --accent-2:#f59e0b; /* amber */
  --card:#ffffff; --shadow:0 10px 25px rgba(2,8,23,0.06);
  --radius:16px; --container:1200px;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0; font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; color:var(--fg); background:var(--bg)}

.bgfx-glow{position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(14,165,233,0.12), transparent 60%),
    radial-gradient(900px 500px at 80% 10%, rgba(34,197,94,0.10), transparent 60%);
}
.bgfx-grid{position:fixed; inset:0; z-index:-4; pointer-events:none; opacity:.35;
  background-image: radial-gradient(#e5e7eb 1px, transparent 1px); background-size:22px 22px; background-position:-10px -10px;
}
.bgfx-noise{position:fixed; inset:0; z-index:-5; pointer-events:none; opacity:.035; mix-blend:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.7'/></svg>");
}

.container{max-width:var(--container); margin:0 auto; padding:0 1rem}
.section{padding:4rem 0} .section-lg{padding:5rem 0}
.grid{display:grid; gap:1.25rem}
.grid-2{grid-template-columns:1fr} .grid-3{grid-template-columns:1fr} .grid-4{grid-template-columns:1fr}
@media(min-width:768px){ .grid-2{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:1fr 1fr} }
@media(min-width:1024px){ .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} }

h1{font-size: clamp(2rem, 2vw + 1.5rem, 3.2rem); line-height:1.2; margin:.25rem 0 .75rem; font-weight:800; letter-spacing:-0.015em}
h2{font-size: clamp(1.5rem, 1vw + 1.2rem, 2.2rem); line-height:1.25; margin:0; font-weight:800}
h3{font-size:1.125rem; margin:.25rem 0}
p.muted{color:var(--muted)}

.navbar{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86); backdrop-filter: blur(10px); border-bottom:1px solid var(--border)}
.navbar-inner{display:flex; align-items:center; justify-content:space-between; padding:.85rem 1rem}
.nav-links{display:none; gap:1.25rem} @media(min-width:768px){ .nav-links{display:flex} }
a{color:inherit; text-decoration:none} a:hover{color:var(--primary)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600; border-radius:10px; padding:.8rem 1.05rem; border:1px solid transparent; cursor:pointer; transition: all .15s ease}
.btn-primary{background:var(--primary); color:#fff} .btn-primary:hover{background:var(--primary-600)}
.btn-ghost{background:transparent} .btn-ghost:hover{background:#f1f5f9}
.btn-secondary{background:#f1f5f9} .btn-secondary:hover{background:#e2e8f0}

.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}
.card-body{padding:1.25rem} .card-head{padding:1.25rem; border-bottom:1px solid var(--border)}

.badge{display:inline-flex; align-items:center; justify-content:center; padding:.3rem .6rem; font-size:.75rem; border-radius:999px; background:rgba(14,165,233,.12); color:var(--primary)}

.hero-sweep{background: linear-gradient(180deg, rgba(14,165,233,0.14) 0%, rgba(14,165,233,0) 60%)}
.section-sweep-green{background: linear-gradient(180deg, rgba(34,197,94,0.10), rgba(34,197,94,0))}
.section-sweep-amber{background: radial-gradient(500px 80px at 50% 0%, rgba(245,158,11,0.10), transparent 70%)}
.section-sweep-slate{background: linear-gradient(180deg, rgba(15,23,42,0.05), rgba(15,23,42,0))}

.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px}
.gallery img{width:100%; height:180px; object-fit:cover; border-radius:12px; border:1px solid var(--border)}

.stat{text-align:center} .stat .value{font-size:clamp(1.5rem,2vw+.5rem,2.2rem); font-weight:800} .stat .label{font-size:.85rem; color:var(--muted)}

.input,.textarea{width:100%; border:1px solid var(--border); border-radius:12px; padding:.7rem .9rem; background:#fff; font:inherit}
.textarea{min-height:110px; resize:vertical}

.footer{border-top:1px solid var(--border)} .footer .cols{display:grid; gap:1rem; grid-template-columns:1fr}
@media(min-width:768px){ .footer .cols{grid-template-columns:repeat(4,1fr)} }