:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #071b30; color: #f4f8f7; font-family: Manrope, Arial, sans-serif; }
main { isolation: isolate; position: relative; min-height: 100svh; overflow: hidden; padding: 38px clamp(24px, 6vw, 96px) 28px; display: flex; flex-direction: column; }
main::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 81% 23%, #157c83 0, rgba(16,101,113,.43) 14%, transparent 35%), radial-gradient(circle at 29% 80%, #123f5d 0, transparent 37%), #071b30; }
main::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .38; background-image: linear-gradient(rgba(168,220,214,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(168,220,214,.11) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom, transparent, black 12%, black 83%, transparent); }
header, footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; font-weight: 800; font-size: 19px; letter-spacing: -.8px; }
.brand svg { width: 28px; fill: rgba(83,213,199,.18); stroke: #61d5c9; stroke-width: 1.6; }
.dot { color: #63d9c3; }
.status, .eyebrow, footer { font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .09em; }
.status { display: flex; align-items: center; gap: 8px; color: #b6d6d7; text-transform: uppercase; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: #69e7aa; box-shadow: 0 0 0 5px rgba(105,231,170,.1); }
.hero { max-width: 760px; margin: auto 0; padding: 70px 0; }
.eyebrow { color: #65d7c6; margin: 0 0 21px; font-weight: 500; }
h1 { font-size: clamp(48px, 8.4vw, 112px); line-height: .96; letter-spacing: -.07em; margin: 0; font-weight: 800; }
h1 em { font-family: Georgia, serif; font-weight: 400; color: #84e2d2; letter-spacing: -.06em; }
.intro { max-width: 475px; margin: 31px 0 26px; color: #c3d3da; font-size: clamp(15px, 1.45vw, 18px); line-height: 1.75; }
.email { color: #f3f8f7; text-decoration: none; display: inline-flex; gap: 16px; align-items: center; border-bottom: 1px solid #69d8ca; padding: 0 0 8px; font-weight: 700; font-size: 14px; transition: color .2s, gap .2s; }
.email:hover { color: #74dfce; gap: 21px; }
footer { color: #8eabb9; font-size: 9px; }
.coordinates { color: #5e9ba7; }
.map { position: absolute; width: min(72vw, 980px); aspect-ratio: 1; right: -15vw; top: 4%; opacity: .85; z-index: -1; transform: rotate(-7deg); }
.map::before { content: ""; position: absolute; inset: 8%; border: 1px solid rgba(102,215,198,.23); border-radius: 46% 54% 49% 51%; box-shadow: inset 0 0 120px rgba(52,197,177,.1); }
.line { position: absolute; height: 1px; background: #4cb7b0; opacity: .45; transform-origin: left center; }
.line-a { width: 64%; top: 36%; left: 11%; transform: rotate(29deg); }.line-b { width: 52%; top: 58%; left: 23%; transform: rotate(-41deg); }.line-c { width: 43%; top: 19%; left: 40%; transform: rotate(72deg); }.line-d { width: 59%; top: 72%; left: 17%; transform: rotate(-13deg); }.line-e { width: 44%; top: 31%; left: 48%; transform: rotate(116deg); }
.pin { position: absolute; width: 13px; height: 13px; border: 3px solid #81e7d3; border-radius: 50%; box-shadow: 0 0 0 7px rgba(109,220,202,.1), 0 0 22px #55cfbe; }.pin::after { content: ""; position: absolute; background: #81e7d3; width: 28px; height: 1px; left: 5px; top: 12px; transform: rotate(45deg); transform-origin: left; }.pin-one { top: 32%; left: 56%; }.pin-two { top: 55%; left: 36%; }.pin-three { top: 67%; left: 66%; }
@media (max-width: 600px) { main { padding-top: 25px; } .status { font-size: 8px; } .hero { padding: 90px 0; } .map { width: 130vw; right: -65vw; top: 18%; opacity: .5; } footer { flex-direction: column; align-items: flex-start; gap: 8px; } }