:root { color-scheme: dark; --bg:#071525; --panel:#102a46; --raised:#193b60; --blue:#2684ff; --blue-hi:#55a0ff; --white:#f5f8fc; --muted:#a9bdd2; --border:#294a69; --coral:#ff7657; --aqua:#35d0a2; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:radial-gradient(circle at 85% 5%,rgba(38,132,255,.16),transparent 28rem),var(--bg); color:var(--white); font:16px/1.65 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:inherit; }
img { max-width:100%; display:block; }
.site-header, footer { width:min(1180px,calc(100% - 40px)); margin:auto; display:flex; align-items:center; justify-content:space-between; }
.site-header { min-height:78px; border-bottom:1px solid rgba(169,189,210,.16); }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; font-size:1.15rem; font-weight:800; letter-spacing:-.02em; }
.brand img { width:34px; height:34px; border-radius:9px; }
nav { display:flex; gap:8px; }
nav a { color:var(--muted); padding:8px 13px; border-radius:10px; text-decoration:none; font-weight:700; }
nav a:hover,nav a[aria-current="page"] { color:var(--white); background:var(--panel); }
main { width:min(1180px,calc(100% - 40px)); margin:auto; }
.hero { min-height:670px; display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center; padding:76px 0; }
.eyebrow { margin:0 0 12px; color:var(--aqua); font-size:.76rem; font-weight:850; letter-spacing:.14em; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:760px; margin-bottom:22px; font-size:clamp(2.8rem,6vw,5.4rem); line-height:.98; letter-spacing:-.055em; }
h2 { font-size:clamp(2rem,4vw,3.3rem); line-height:1.08; letter-spacing:-.04em; }
h3 { margin-bottom:7px; font-size:1.15rem; }
.lede { max-width:660px; color:var(--muted); font-size:1.18rem; }
.actions { display:flex; gap:12px; margin:30px 0; }
.button { display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent; border-radius:12px; padding:11px 17px; text-decoration:none; font-weight:800; }
.button.primary { background:var(--blue); color:white; box-shadow:0 10px 28px rgba(38,132,255,.24); }
.button.primary:hover { background:var(--blue-hi); }
.button.secondary { border-color:var(--border); background:var(--panel); }
.button.secondary:hover { background:var(--raised); }
.trust { display:flex; flex-wrap:wrap; gap:10px 22px; color:var(--muted); font-size:.88rem; }
.trust span::before { content:"✓"; color:var(--aqua); margin-right:7px; font-weight:900; }
.hero-shot { margin:0; overflow:hidden; border:1px solid var(--border); border-radius:22px; box-shadow:0 30px 80px rgba(0,0,0,.42),0 0 0 8px rgba(25,59,96,.22); transform:perspective(1200px) rotateY(-3deg); }
.hero-shot img { width:100%; }
.section { padding:96px 0; }
.section-heading { max-width:760px; margin-bottom:42px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feature-grid article { min-height:230px; padding:26px; border:1px solid var(--border); border-radius:18px; background:linear-gradient(145deg,var(--panel),rgba(16,42,70,.65)); }
.feature-grid article:hover { border-color:var(--blue); transform:translateY(-2px); transition:.2s ease; }
.feature-grid p,figcaption,.prose p,.prose li { color:var(--muted); }
.feature-icon { width:42px; height:42px; display:grid; place-items:center; margin-bottom:28px; border-radius:11px; font-size:1.4rem; font-weight:900; }
.feature-icon.blue { color:var(--blue-hi); background:rgba(38,132,255,.15); }
.feature-icon.coral { color:var(--coral); background:rgba(255,118,87,.14); }
.feature-icon.aqua { color:var(--aqua); background:rgba(53,208,162,.14); }
.showcase { border-top:1px solid rgba(169,189,210,.14); }
.gallery { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.gallery figure { margin:0; overflow:hidden; border:1px solid var(--border); border-radius:18px; background:var(--panel); }
.gallery figcaption { padding:17px 20px; }
.cta { display:flex; align-items:center; justify-content:space-between; gap:30px; margin:50px 0 100px; padding:42px; border:1px solid var(--border); border-radius:22px; background:linear-gradient(120deg,var(--panel),var(--raised)); }
.cta h2 { margin:0; font-size:clamp(1.8rem,4vw,3rem); }
footer { min-height:100px; border-top:1px solid rgba(169,189,210,.16); color:var(--muted); font-size:.9rem; }
footer a { text-decoration:none; }
.document { padding:72px 0 110px; }
.document.narrow { max-width:900px; }
.document-hero { padding-bottom:38px; border-bottom:1px solid var(--border); }
.document-hero h1 { font-size:clamp(2.8rem,6vw,4.8rem); }
.document-grid { display:grid; grid-template-columns:300px 1fr; gap:64px; padding-top:54px; }
.contact-card { position:sticky; top:24px; align-self:start; padding:24px; border:1px solid var(--border); border-radius:18px; background:var(--panel); }
.contact-card .button { width:100%; margin-top:8px; }
.prose { padding-top:46px; }
.document-grid .prose { padding-top:0; }
.prose h2 { margin:44px 0 12px; font-size:1.45rem; letter-spacing:-.02em; }
.prose h2:first-child { margin-top:0; }
.prose a { color:var(--blue-hi); }
.prose code { color:var(--white); background:var(--panel); padding:2px 6px; border-radius:5px; }
.prose details { border-top:1px solid var(--border); padding:18px 0; }
.prose details:last-of-type { border-bottom:1px solid var(--border); }
.prose summary { cursor:pointer; font-weight:800; }
.prose details p { margin:12px 0 0; }
.callout { padding:22px 24px; border-left:4px solid var(--aqua); border-radius:0 12px 12px 0; background:var(--panel); color:var(--white)!important; font-size:1.08rem; }
@media (max-width:850px) { .hero { grid-template-columns:1fr; gap:38px; padding-top:60px; }.hero-shot { transform:none; }.feature-grid { grid-template-columns:1fr 1fr; }.document-grid { grid-template-columns:1fr; gap:30px; }.contact-card { position:static; }.gallery { grid-template-columns:1fr; } }
@media (max-width:560px) { .site-header,footer,main { width:min(100% - 24px,1180px); }.site-header { align-items:flex-start; flex-direction:column; justify-content:center; gap:8px; padding:14px 0; }nav { width:100%; }nav a { flex:1; text-align:center; }.feature-grid { grid-template-columns:1fr; }.cta { align-items:flex-start; flex-direction:column; padding:28px; }.actions { flex-direction:column; }.button { width:100%; }footer { flex-direction:column; justify-content:center; gap:4px; }.section { padding:68px 0; } }