*,
*::before,
*::after { box-sizing: border-box; }
body { margin:0; font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#1f2933; background-color:#f5f7fa; line-height:1.6;}
a { color:inherit; text-decoration:none;}
img { max-width:100%; display:block;}
.container{ width:100%; max-width:1120px; margin:0 auto; padding:0 16px;}
.flex-between{ display:flex; align-items:center; justify-content:space-between;}
.topbar{ position:sticky; top:0; z-index:20; background-color:#0b1120; color:#f9fafb; padding:10px 0;}
.logo a{ font-weight:700; font-size:1.1rem;}
.logo span{ color:#38bdf8;}
.nav a{ margin:0 8px; font-size:0.95rem; padding:6px 10px; border-radius:999px;}
.nav a:hover{ background-color:rgba(148,163,184,.25);}
.nav a.active{ background-color:#38bdf8; color:#0b1120;}
.btn-primary,.btn-secondary{ display:inline-block; padding:10px 18px; border-radius:999px; font-size:.95rem; font-weight:600; cursor:pointer; border:none; text-align:center;}
.btn-primary{ background:linear-gradient(135deg,#0ea5e9,#0369a1); color:#f9fafb;}
.btn-primary:hover{ opacity:.9;}
.btn-secondary{ background-color:#e2e8f0; color:#0f172a;}
.btn-secondary:hover{ background-color:#cbd5e1;}
.btn-primary.small{ padding:6px 14px; font-size:.85rem;}
.full{ width:100%;}
.mt-16{ margin-top:16px;} .mt-32{ margin-top:32px;} .mt-40{ margin-top:40px;}
.center{text-align:center;}
.hero{ padding:40px 0 56px; background:radial-gradient(circle at top left,#0ea5e9 0,#0f172a 45%,#020617 100%); color:#e5e7eb;}
.hero-grid{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:32px; align-items:flex-start;}
.hero h1{ font-size:2.4rem; line-height:1.2; margin-bottom:16px;}
.hero h1 span{ color:#38bdf8;}
.hero-text{ font-size:.98rem; color:#e5e7eb; max-width:620px;}
.hero-actions{ margin:20px 0 12px; display:flex; flex-wrap:wrap; gap:10px;}
.hero-list{ list-style:none; padding-left:0; font-size:.9rem;}
.hero-list li{ margin-bottom:4px;}
.badge{ display:inline-block; padding:4px 10px; border-radius:999px; background-color:rgba(15,23,42,.7); border:1px solid rgba(148,163,184,.6); font-size:.78rem; margin-bottom:10px;}
.hero-card{ background-color:#0b1120; padding:20px; border-radius:16px; box-shadow:0 18px 50px rgba(15,23,42,.7);}
.hero-card h2{ margin-top:0; font-size:1.3rem;}
.hero-card label{ display:block; font-size:.85rem; margin-top:10px;}
.hero-card input,.hero-card textarea{ width:100%; margin-top:4px; padding:8px 10px; border-radius:8px; border:1px solid #1f2937; background-color:#020617; color:#e5e7eb; font-size:.9rem;}
.hero-card input:focus,.hero-card textarea:focus{ outline:1px solid #38bdf8; border-color:#38bdf8;}
.form-note{ margin-top:8px; font-size:.78rem; color:#9ca3af;}
.features,.services-preview,.area,.content{ padding:40px 0; background-color:#f5f7fa;}
.features:nth-of-type(even),.area{ background-color:#e5e7eb;}
.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;}
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px;}
.card{ background-color:#fff; border-radius:14px; padding:18px 18px 20px; box-shadow:0 8px 20px rgba(15,23,42,.06); font-size:.94rem;}
.card h3{ margin-top:0; margin-bottom:8px; font-size:1.05rem;}
.area-grid{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:24px;}
.area-box{ background-color:#020617; color:#e5e7eb; padding:18px; border-radius:16px; font-size:.94rem;}
.area-list{ padding-left:18px;}
.page-header{ padding:40px 0 20px; background:linear-gradient(135deg,#0ea5e9,#0369a1); color:#f9fafb;}
.page-header h1{ margin:0 0 8px;}
.content .narrow{ max-width:720px; margin:0 auto;}
.bullet-list{ padding-left:20px;} .bullet-list li{ margin-bottom:6px;}
.callout{ background-color:#020617; color:#e5e7eb; padding:20px; border-radius:18px;}
.callout h2{ margin-top:0; margin-bottom:10px;}
.callout ol{ padding-left:20px; font-size:.95rem;}
.contact-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; padding-top:20px;}
.contact-form label{ display:block; margin-top:10px; font-size:.9rem;}
.contact-form input,.contact-form textarea{ width:100%; margin-top:4px; padding:8px 10px; border-radius:8px; border:1px solid #cbd5e1; font-size:.9rem;}
.contact-form input:focus,.contact-form textarea:focus{ outline:1px solid #0ea5e9; border-color:#0ea5e9;}
.footer{ background-color:#020617; color:#e5e7eb; padding:28px 0 16px; margin-top:40px; font-size:.9rem;}
.footer-grid{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,2fr) minmax(0,1.5fr); gap:20px;}
.footer-links{ list-style:none; padding-left:0;}
.footer-links li{ margin-bottom:4px;}
.footer-bottom{ text-align:center; margin-top:12px; font-size:.8rem; color:#9ca3af;}
@media(max-width:900px){
.hero-grid,.grid-3,.grid-2,.area-grid,.contact-grid,.footer-grid{ grid-template-columns:minmax(0,1fr);}
.topbar .container{ flex-wrap:wrap; gap:10px;}
.nav{ width:100%; display:flex; justify-content:center; flex-wrap:wrap;}
.hero{ padding-top:24px;}
}