:root{ --bg:#0b0d10; --surface:#11161b; --text:#e7edf3; --muted:#a9b4bf; --primary:#4f8cff; --accent:#00c2ff; --border:#223042; --radius:14px; --brand-grad:linear-gradient(90deg,var(--primary),var(--accent)); --shadow-sm:0 4px 12px color-mix(in srgb, black 40%, transparent); --shadow-md:0 12px 30px color-mix(in srgb, black 55%, transparent) }
@media (prefers-color-scheme: light){ :root{ --bg:#fff; --surface:#f6f8fa; --text:#0f1720; --muted:#475569; --border:#e2e8f0; --primary:#2563eb; --accent:#22d3ee } }
*{ box-sizing:border-box } html{ scroll-behavior:smooth }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica Neue,Arial; color:var(--text); background:radial-gradient(1200px 800px at 20% -10%, color-mix(in srgb,var(--accent) 6%, transparent), transparent), var(--bg); line-height:1.6 }
img{ max-width:100%; height:auto; display:block } a{ color:inherit; text-decoration:none }
.container{ width:min(100% - 2rem, 1200px); margin-inline:auto }
.section{ padding:clamp(2.8rem, 2.5vw + 1.2rem, 5.5rem) 0 } .section.alt{ background:color-mix(in srgb,var(--surface) 92%, transparent) }
.section-title{ font-size:clamp(1.4rem,1.1rem + 1.4vw,2.2rem); margin:0 0 1rem } .muted{ color:var(--muted) } .lead{ font-size:clamp(1rem,.9rem + .6vw,1.25rem); color:var(--muted) }
.site-header{ position:sticky; top:0; z-index:10; backdrop-filter:saturate(170%) blur(10px); background:color-mix(in srgb, var(--bg) 78%, transparent); border-bottom:1px solid var(--border) }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:.85rem 0 } .brand{ display:inline-flex; align-items:center; gap:.55rem; font-weight:800; letter-spacing:.2px }
.brand span{ background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent }
.site-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:.75rem; align-items:center } .site-nav a{ position:relative }
.site-nav a::after{ content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--brand-grad); transition:width .2s ease } .site-nav a:hover::after{ width:100% }
.nav-toggle{ display:grid; gap:4px; background:none; border:1px solid var(--border); padding:.5rem; border-radius:10px; color:var(--text) } .nav-toggle span{ width:22px; height:2px; background:currentColor; display:block }
.site-nav{ position:fixed; inset-inline:0; top:58px; background:var(--bg); border-top:1px solid var(--border); transform:translateY(-120%); transition:transform .24s ease } .site-nav ul{ flex-direction:column; padding:1rem } .site-nav.open{ transform:translateY(0) }
@media (min-width:840px){ .nav-toggle{ display:none } .site-nav{ position:static; transform:none; border:0; background:transparent } .site-nav ul{ flex-direction:row; padding:0 } }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; border:1px solid var(--border); padding:.68rem 1.05rem; border-radius:999px; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; font-weight:700 } .btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm) } .btn:active{ transform:translateY(0) } .btn-primary{ background:var(--brand-grad); color:#fff; border-color:transparent } .btn-secondary{ background:transparent }
.hero{ padding:clamp(3.2rem,3vw + 1rem,6.2rem) 0 } .hero-grid{ display:grid; gap:2.2rem; align-items:center; grid-template-columns:1fr } .hero-copy h1{ font-size:clamp(1.9rem,1.1rem + 2.7vw,3.2rem); line-height:1.15; margin:0 0 .8rem } .hero-media{ max-width:560px; justify-self:center; filter:drop-shadow(0 12px 24px color-mix(in srgb, black 55%, transparent)) }
@media (min-width:960px){ .hero-grid{ grid-template-columns:1.1fr .9fr } }
.grid{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)) } .cards .card{ background:color-mix(in srgb, var(--surface) 95%, transparent); border:1px solid var(--border); padding:1.1rem; border-radius:var(--radius); box-shadow:0 0 0 rgba(0,0,0,0); transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease } .cards .card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:color-mix(in srgb, var(--primary) 45%, var(--border)) }
.two-col{ display:grid; gap:2rem; grid-template-columns:1fr } @media (min-width:960px){ .two-col{ grid-template-columns:1.2fr .8fr } } .rounded{ border-radius:var(--radius) } .checklist{ padding-left:1rem } .checklist li{ margin:.25rem 0 }
.contact-form{ background:var(--bg); border:1px solid var(--border); padding:1rem; border-radius:var(--radius); box-shadow:var(--shadow-sm) } .form-grid{ display:grid; gap:1rem; grid-template-columns:1fr } @media (min-width:700px){ .form-grid{ grid-template-columns:1fr 1fr } } label{ display:grid; gap:.35rem }
input,textarea{ width:100%; padding:.78rem .9rem; background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:12px; transition:border-color .18s ease, box-shadow .18s ease } input:focus,textarea:focus{ outline:0; border-color:color-mix(in srgb, var(--primary) 60%, var(--border)); box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent) }
.faq{ background:color-mix(in srgb, var(--surface) 95%, transparent); border:1px solid var(--border); border-radius:12px; padding:.75rem 1rem; margin:.5rem 0 } .faq>summary{ cursor:pointer; font-weight:700 }
.site-footer{ border-top:1px solid var(--border); padding:1rem 0; background:color-mix(in srgb, var(--surface) 96%, transparent) } .footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem } .to-top{ border:1px solid var(--border); padding:.35rem .65rem; border-radius:10px }
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease } .reveal.is-visible{ opacity:1; transform:translateY(0) }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } .reveal{ opacity:1; transform:none } .btn, .cards .card{ transition:none } }
.skip-link{ position:absolute; left:-9999px } .skip-link:focus{ left:1rem; top:1rem; background:var(--primary); color:#fff; padding:.5rem .75rem; border-radius:10px }