:root { --bg:#0b1220; --surface:#0f172a; --card:#0f1b33; --text:#e6edf6; --muted:#a8b3c7; --primary:#15c0d4; --primary-strong:#00a8c1; --ring:rgba(21,192,212,0.35); --header-height:72px; }
section { scroll-margin-top: calc(var(--header-height) + 18px); }
* { box-sizing:border-box; } html,body{ margin:0; padding:0; color:var(--text); background:var(--bg); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, Apple Color Emoji, Segoe UI Emoji; }
a{ color:inherit; text-decoration:none; } .container{ width:min(1100px,92%); margin:0 auto; }
.site-header{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:12px 4vw; background:rgba(15,23,42,0.95); backdrop-filter:blur(8px); border-bottom:1px solid #1e2a44; }
.logo-full{ height:40px; width:auto; display:block; }
.nav{ display:flex; gap:1rem; } .nav a{ padding:10px 12px; border-radius:10px; } .nav a:hover{ background:#15223a; }
.menu{ display:none; background:transparent; border:0; color:var(--text); font-size:1.5rem; }
.hero{ position:relative; padding:104px 0 76px; overflow:clip; } .hero .hero-content{ position:relative; } .hero .hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.28; }
.hero h1{ font-size:clamp(2rem,4vw,3rem); line-height:1.1; margin:0 0 .75rem; } .hero p{ color:var(--muted); font-size:clamp(1rem,1.2vw,1.15rem); max-width:60ch; }
.actions{ display:flex; gap:.75rem; margin-top:1rem; }
.btn{ display:inline-block; padding:.85rem 1.1rem; border-radius:12px; background:#13203a; border:1px solid #1f2d4a; } .btn.primary{ background:linear-gradient(135deg, var(--primary), var(--primary-strong)); color:#061020; border:none; } .btn:hover{ transform:translateY(-1px); }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:24px auto 48px; } .stat{ background:#0c172a; border:1px solid #1e2a44; border-radius:16px; padding:16px; text-align:center; } .stat span{ color:var(--muted); font-size:.95rem; }
.section{ padding:64px 0; } .grid.two{ display:grid; grid-template-columns:1.2fr 1fr; gap:2rem; align-items:center; } .grid.three{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.rounded{ border-radius:16px; } .shadow{ box-shadow:0 10px 30px rgba(0,0,0,.35); }
.about, .technology, .pickup, .contact, .services{ padding:64px 0; }
.services{ background:#0b1427; border-block:1px solid #1e2a44; }
.card{ background:var(--card); border:1px solid #1e2a44; border-radius:16px; padding:18px; } .card h3{ margin-top:0; }
.checklist{ padding-left:1rem; } .checklist li{ margin:.4rem 0; } .bullets{ padding-left:1rem; } .bullets li{ margin:.4rem 0; }
.contact-card.large{ padding:28px; font-size:1.05rem; } .contact-card.large h2{ font-size:1.6rem; margin-top:0; }
.form-note{ color:var(--muted); font-size:.9rem; }
.contact-form, .pickup-form{ display:grid; gap:.75rem; }
.contact-form label, .pickup-form label{ display:grid; gap:.35rem; font-size:.95rem; }
.contact-form input, .contact-form textarea, .pickup-form input, .pickup-form textarea{ background:#0f172a; border:1px solid #324056; color:#e6edf6; padding:.7rem .8rem; border-radius:12px; }
.contact-form input:focus, .contact-form textarea:focus, .pickup-form input:focus, .pickup-form textarea:focus{ outline:2px solid var(--ring); border-color:var(--primary); }
.site-footer{ border-top:1px solid #1e2a44; padding:22px 0; background:#0b1427; } .footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; } .footer-nav{ display:flex; gap:.75rem; } .footer-nav a{ color:var(--muted); }
@media (max-width:900px){ .grid.two{ grid-template-columns:1fr; } .grid.three{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .nav{ display:none; } .menu{ display:block; } .grid.three{ grid-template-columns:1fr; } .footer-inner{ flex-direction:column; align-items:flex-start; } }