@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  --bg: #070708;
  --text: #f2f2f0;
  --muted: #999a9d;
  --line: rgba(255,255,255,.16);
  --subtle: rgba(255,255,255,.055);
  --mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace;
  --sans: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100svh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
::selection { color: #050505; background: #fff; }

.site-shell { position: relative; min-height: 100svh; display: flex; flex-direction: column; isolation: isolate; }
.site-shell::before {
  content: '';
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(to right, var(--subtle) 1px, transparent 1px), linear-gradient(to bottom, var(--subtle) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: linear-gradient(100deg, transparent 16%, #000 95%);
  opacity: .46;
}
.site-shell::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 78% 48%, rgba(255,255,255,.032), transparent 39%);
}
.container { width: min(100% - 112px, 1500px); margin-inline: auto; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding-block: 36px 28px; border-bottom: 1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap: 12px; font-weight: 800; font-size: 15px; letter-spacing: -.045em; white-space: nowrap; }
.brand-symbol { width: 26px; height: 26px; display: inline-grid; place-items:center; border: 1.4px solid var(--text); font-size: 12px; font-weight: 800; line-height: 1; letter-spacing:-.1em; }
.brand-symbol span {transform: translateX(-1px)}
.trademark { font-size: .55em; font-weight: 500; line-height: 0; vertical-align: super; margin-left: .11em; letter-spacing: 0; }
.topnav { display:flex; align-items:center; gap: 34px; }
.nav-link { font-family:var(--mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; transition:color .18s ease; }
.nav-link:hover, .nav-link[aria-current='page'] { color:var(--text); }
.nav-link[aria-current='page']::before { content:'•'; padding-right: 9px; }

.home-main { display:flex; flex:1; flex-direction:column; justify-content:center; position:relative; padding-block: 88px 96px; }
.eyebrow { display:flex; align-items:center; gap: 14px; font-family:var(--mono); font-size: 11px; color:var(--muted); letter-spacing:.15em; line-height:1.7; text-transform:uppercase; }
.eyebrow .line { display:block; width: 30px; height:1px; background: rgba(255,255,255,.52); flex:none; }
.home-title { font-size: clamp(54px, 9.9vw, 164px); font-weight:800; line-height:1.055; letter-spacing: -.082em; margin: 27px 0 49px -0.065em; white-space: nowrap; }
.home-title .tld { color:#77797e; }
.home-lower { display:flex; justify-content:space-between; align-items:flex-end; gap:60px; }
.statement { margin:0; font-size:clamp(22px,2.85vw,42px); font-weight:600; line-height:1.35; letter-spacing:-.055em; max-width:560px; }
.statement .dim { color:var(--muted); }
.descriptor { max-width:325px; font-size:14px; line-height:1.9; color:var(--muted); margin:0 0 5px; }
.signal-mark { position:absolute; right:0; top:19%; width:124px; height:54px; opacity:.65; }
.signal-mark polyline { stroke-dasharray: 250; stroke-dashoffset: 250; animation: draw-line 2s 0.4s ease forwards; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }

.footer { border-top:1px solid var(--line); padding-block:25px 30px; display:flex; justify-content:space-between; align-items:center; gap:24px; color:var(--muted); font-family:var(--mono); font-size:11px; letter-spacing:.04em; }
.footer-right { display:flex; align-items:center; gap:13px; }
.live-dot { background:var(--text); width:5px; height:5px; border-radius:50%; }

.contact-main { display:flex; flex:1; flex-direction:column; justify-content:center; padding-block:100px 120px; }
.contact-title { font-size:clamp(50px,8.2vw,128px); line-height:1.05; letter-spacing:-.079em; font-weight:800; max-width:1100px; margin:28px 0 40px -0.065em; }
.contact-intro { font-size:clamp(17px,1.55vw,21px); color:var(--muted); line-height:1.8; max-width:520px; margin:0 0 77px; }
.contact-label { color:var(--muted); font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.17em; margin-bottom:20px; }
.email { display:inline-flex; width:fit-content; align-items:center; gap:22px; border-bottom:1px solid rgba(255,255,255,.65); padding-bottom:10px; font-size:clamp(24px,4.2vw,62px); font-weight:600; letter-spacing:-.055em; line-height:1.25; transition:gap .2s ease, border-color .2s ease; overflow-wrap:anywhere; }
.email:hover { gap:30px; border-color:#fff; }
.email svg {width:clamp(21px,2.5vw,36px); height:clamp(21px,2.5vw,36px); flex:none;}

@media (min-width:1600px) { .home-title {font-size: 158px} }
@media (max-width:900px) {
  .container { width: min(100% - 64px, 1500px); }
  .home-title { font-size: clamp(49px, 9.7vw, 90px); }
  .home-lower {gap:40px;}
  .descriptor {max-width:260px;}
}
@media (max-width:640px) {
  .container { width:calc(100% - 40px); }
  .topbar { padding-block:22px; }
  .brand { font-size:14px; gap:9px; }
  .brand-symbol { width:23px; height:23px; }
  .topnav {gap:18px;}
  .nav-link { font-size:10px; }
  .home-main {padding-block:96px 78px;}
  .home-title { font-size:clamp(37px, 10vw, 68px); margin:25px 0 58px -0.07em; letter-spacing:-.08em; }
  .home-lower { flex-direction:column; align-items:flex-start; gap:25px; }
  .statement { font-size:clamp(27px, 6.5vw, 40px); }
  .descriptor {font-size:13px;max-width:350px;}
  .signal-mark {top:14%; right:0; width:90px;}
  .footer { padding-block:22px; align-items:flex-start; font-size:10px; }
  .footer-right {gap:8px;text-align:right;}
  .contact-main {padding-block:94px 105px;}
  .contact-title {font-size:clamp(53px, 12vw, 90px); margin:25px 0 30px;}
  .contact-intro { margin-bottom:67px;font-size:16px;}
  .email { gap:12px; font-size:clamp(23px, 6.1vw, 38px); }
}
@media (max-width:370px) {
  .brand {font-size:10px; gap:5px; letter-spacing:-.06em;}
  .brand-symbol {width:20px;height:20px;}
  .topnav {gap:9px;}
  .nav-link {font-size:9px;}
  .home-title {font-size:10.1vw;}
  .footer-right .status-text {display:none;}
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after {scroll-behavior:auto!important;animation:none!important;transition:none!important;} .signal-mark polyline {stroke-dashoffset:0;} }