:root { --ink:#07111a; --navy:#0d2231; --paper:#f6f7f5; --mist:#e6eef0; --muted:#576b75; --line:#c8d5d9; --lime:#c3ff69; --lime-dark:#8dcb38; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,Arial,sans-serif; } a { color:inherit; text-decoration:none; } .frame { width:min(100% - 48px,1170px); margin:auto; }
.topline { background:#040b11; color:#b5c6cc; font:9px "DM Mono",monospace; letter-spacing:.05em; } .topline .frame { min-height:33px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.site-header { background:#f8f9f7; border-bottom:1px solid #d3dfe2; } .header-inner { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:22px; } .brand { display:flex; align-items:center; gap:10px; } .brand img { width:53px; height:53px; object-fit:contain; mix-blend-mode:multiply; } .brand span { display:grid; gap:4px; } .brand strong { font-size:15px; font-weight:800; letter-spacing:-.04em; line-height:1; } .brand small { color:#476271; font:7px "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; }
nav { display:flex; gap:24px; margin-left:auto; } nav a,.call-link { font-size:10px; font-weight:800; letter-spacing:.04em; } nav a:hover,.call-link:hover { color:#277989; } .call-link { padding:12px 16px; background:var(--lime); color:#06150c; }
.hero { color:#fff; background:radial-gradient(circle at 82% 23%,rgb(79 155 173 /.34),transparent 24%),linear-gradient(130deg,#07111a,#112c3d 68%,#091620); position:relative; overflow:hidden; } .hero:after { content:""; position:absolute; width:540px; height:540px; right:-210px; bottom:-270px; border:1px solid rgb(195 255 105 /.26); transform:rotate(45deg); box-shadow:0 0 0 45px rgb(195 255 105 /.035),0 0 0 90px rgb(195 255 105 /.025); } .hero-grid { min-height:454px; display:grid; grid-template-columns:1fr 255px; gap:75px; align-items:center; padding:74px 0; position:relative; z-index:1; } .eyebrow { margin:0 0 12px; color:#408899; font:9px "DM Mono",monospace; letter-spacing:.14em; text-transform:uppercase; } .hero .eyebrow { color:#c3ff69; } .breadcrumbs { margin:0 0 24px; color:#bed1d7; font-size:10px; } .breadcrumbs a { border-bottom:1px solid rgb(255 255 255 /.4); } .breadcrumbs i { padding:0 6px; font-style:normal; color:#759ba8; } h1,h2 { margin:0; font-weight:800; letter-spacing:-.06em; } h1 { max-width:760px; font-size:clamp(43px,5vw,70px); line-height:.98; } h2 { font-size:clamp(31px,3.2vw,46px); line-height:1.04; } .hero-copy { max-width:650px; margin:22px 0 0; color:#d3e0e4; font-size:14px; line-height:1.84; } .actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:29px; } .button { min-height:45px; display:inline-flex; align-items:center; gap:8px; padding:0 17px; font-size:10px; font-weight:800; letter-spacing:.045em; text-transform:uppercase; transition:transform .16s ease,background .16s ease; } .button:hover { transform:translateY(-2px); } .primary { background:var(--lime); color:#07150e; } .secondary { border:1px solid rgb(255 255 255 /.48); color:#fff; } .whats { background:#25d366; color:#05280e; } .hero aside { padding:24px; background:#f5f8f6; color:var(--ink); border-left:2px solid var(--lime); } .hero aside p { margin:0; color:#3c7180; font:9px "DM Mono",monospace; letter-spacing:.13em; } .hero aside strong { display:block; margin:14px 0 25px; font-size:23px; line-height:1.08; letter-spacing:-.05em; } .hero aside span { color:#536a73; font-size:10px; font-weight:800; }
.body-section { padding:102px 0; } .body-grid { display:grid; grid-template-columns:minmax(0,720px) 265px; justify-content:space-between; gap:75px; } .copy-section { margin-bottom:45px; } .copy-section p,.callout p,.side-card p { margin:0 0 16px; color:var(--muted); font-size:13px; line-height:1.88; } .copy-section .source-link { color:#247587; font-weight:800; text-decoration:underline; text-underline-offset:3px; } .side-card { align-self:start; position:sticky; top:18px; padding:26px; background:#e8f0f1; border-top:2px solid #5b9bad; } .side-card .eyebrow { margin-bottom:17px; } .side-card>a:not(.small-link) { display:block; padding:11px 0; border-top:1px solid #c2d1d6; font-size:14px; font-weight:800; letter-spacing:-.03em; } .side-card hr { border:0; border-top:1px solid #c2d1d6; margin:21px 0; } .side-card strong { font-size:12px; } .small-link { color:#176d7c; font-size:10px; font-weight:800; } .callout { padding:39px; margin-top:62px; color:#fff; background:#112d3d; position:relative; overflow:hidden; } .callout:after { content:""; position:absolute; right:-78px; top:-85px; width:260px; height:260px; border:1px solid rgb(195 255 105 /.28); border-radius:50%; } .callout .eyebrow { color:var(--lime); } .callout h2,.callout p,.callout .actions { position:relative; z-index:1; } .callout p:not(.eyebrow) { max-width:550px; color:#c5d4da; }
.faq-section { padding:98px 0; background:#e8f0f1; } .faq-layout { display:grid; grid-template-columns:.72fr 1.28fr; gap:92px; } .faq-list { border-top:1px solid #b9cbd0; } details { padding:19px 0; border-bottom:1px solid #b9cbd0; } summary { list-style:none; cursor:pointer; padding-right:25px; font-size:17px; font-weight:800; letter-spacing:-.035em; position:relative; } summary:after { content:"+"; position:absolute; right:0; color:#2d7888; font-size:19px; } details[open] summary:after { content:"–"; } details p { margin:16px 0 0; color:var(--muted); font-size:12px; line-height:1.75; }
.related-section { padding:92px 0; background:var(--paper); } .related-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:34px; border-top:1px solid #bdced2; } .related-card { min-height:145px; padding:21px; display:flex; flex-direction:column; gap:25px; border-right:1px solid #bdced2; border-bottom:1px solid #bdced2; transition:background .18s ease,color .18s ease; } .related-card:first-child { border-left:1px solid #bdced2; } .related-card:hover { color:#fff; background:#102b3a; } .related-card span { color:#448293; font:9px "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; } .related-card strong { font-size:18px; letter-spacing:-.04em; } .related-card b { color:var(--lime-dark); }
footer { padding-top:43px; background:#030a10; color:#b7c6cb; } .footer-grid { display:grid; grid-template-columns:1.15fr 1fr auto; gap:50px; align-items:center; padding-bottom:38px; } .footer-brand { color:#fff; } .footer-brand img { mix-blend-mode:normal; padding:2px; background:#fff; } .footer-grid p { margin:0; font-size:10px; line-height:1.8; } .footer-grid>div:last-child { display:grid; gap:9px; color:#fff; font-size:11px; font-weight:800; } .footer-base { padding:17px 0; border-top:1px solid #273c46; color:#81949b; font:8px "DM Mono",monospace; letter-spacing:.04em; }
@media (max-width:780px) { .frame { width:min(100% - 36px,1170px); } .topline .frame { justify-content:center; } .topline a,.site-header nav,.call-link { display:none; } .header-inner { min-height:70px; } .brand img { width:45px; height:45px; } .hero-grid,.body-grid,.faq-layout { grid-template-columns:1fr; gap:33px; } .hero-grid { min-height:0; padding:66px 0; } .hero aside { max-width:300px; } .body-section,.faq-section,.related-section { padding:68px 0; } .side-card { position:static; } .related-grid { grid-template-columns:1fr; } .related-card,.related-card:first-child { border-left:1px solid #bdced2; } .footer-grid { grid-template-columns:1fr; gap:26px; } h1 { font-size:clamp(41px,12.5vw,58px); } }