:root {
  --bg: #000;
  --fg: #f6f6f6;
  --muted: rgba(255,255,255,.68);
  --line: rgba(255,255,255,.14);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--fg); }
body {
  overflow-x: hidden;
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .08em;
}
a { color: inherit; }
.background { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.grid {
  position: absolute; inset: -12%; opacity: .46;
  background-image:
    linear-gradient(30deg, transparent 49.65%, var(--line) 49.8%, var(--line) 50.2%, transparent 50.35%),
    linear-gradient(150deg, transparent 49.65%, var(--line) 49.8%, var(--line) 50.2%, transparent 50.35%);
  background-size: 270px 156px;
  mask-image: radial-gradient(circle at center, black 14%, transparent 77%);
  animation: drift 24s ease-in-out infinite alternate;
}
.hero { min-height: 100vh; display: grid; place-items: center; padding: 54px 22px 92px; position: relative; z-index: 1; }
.content { width: min(980px, 100%); text-align: center; opacity: 0; transform: translateY(14px); }
body.loaded .content { animation: reveal 1.1s cubic-bezier(.2,.7,.2,1) forwards; }
.logo {
  display: block; width: min(760px, 82vw); max-height: 250px; object-fit: contain; margin: 0 auto 14px;
  filter: brightness(1.15) contrast(1.08);
  animation: breathe 7s ease-in-out infinite;
}
.rule { width: 1px; height: 48px; background: linear-gradient(transparent, rgba(255,255,255,.8), transparent); margin: 0 auto 24px; }
h1 { margin: 0; font-weight: 300; line-height: 1.35; letter-spacing: .27em; font-size: clamp(24px, 3.1vw, 49px); }
h1 span { display: block; }
.keywords { margin: 26px auto 28px; font-size: clamp(11px, 1.35vw, 18px); letter-spacing: .29em; color: rgba(255,255,255,.88); }
.keywords b { font-weight: 300; margin: 0 .48em; }
.cta {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 24px;
  padding: 17px 24px; border: 1px solid rgba(255,255,255,.72); text-decoration: none;
  font-size: clamp(11px, 1.15vw, 15px); letter-spacing: .13em; transition: color .35s ease, border-color .35s ease;
}
.cta::before { content:""; position:absolute; inset:0; background:#fff; transform: translateX(-102%); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.cta span { position: relative; z-index: 1; }
.cta:hover::before, .cta:focus-visible::before { transform: translateX(0); }
.cta:hover, .cta:focus-visible { color:#000; border-color:#fff; outline:none; }
.arrow { font-size: 20px; line-height: 1; }
.contact { margin-top: 36px; display: grid; gap: 10px; color: var(--muted); font-size: clamp(10px, 1.05vw, 13px); }
.contact a { text-decoration: none; }
.contact a:hover { color: #fff; }
footer { position: fixed; left: 24px; bottom: 18px; z-index: 2; font-size: 10px; letter-spacing: .12em; color: rgba(255,255,255,.48); }
.cube { position: absolute; width: 150px; height: 150px; opacity: .28; animation: float 10s ease-in-out infinite; }
.cube span { position:absolute; inset:0; border:1px solid rgba(255,255,255,.25); transform: rotate(30deg) skewY(-30deg) scaleY(.86); }
.cube span:nth-child(2) { transform: translate(46px,70px) rotate(30deg) skewY(-30deg) scaleY(.86); }
.cube span:nth-child(3) { transform: translate(-46px,70px) rotate(30deg) skewY(-30deg) scaleY(.86); }
.cube-a { top: 4%; left: 7%; }
.cube-b { right: 8%; bottom: 9%; animation-delay: -3s; }
.signal { position:absolute; width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 10px #fff; opacity:.8; }
.signal-a { left:12%; top:32%; animation: signalA 9s linear infinite; }
.signal-b { right:14%; top:58%; animation: signalB 12s linear infinite; }
@keyframes reveal { to { opacity:1; transform:none; } }
@keyframes breathe { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.006); } }
@keyframes drift { to { transform: translate3d(2%, -1%, 0); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes signalA { 0% { transform: translate(0,0); opacity:0; } 10% { opacity:.8; } 100% { transform: translate(520px,300px); opacity:0; } }
@keyframes signalB { 0% { transform: translate(0,0); opacity:0; } 10% { opacity:.7; } 100% { transform: translate(-420px,-240px); opacity:0; } }
@media (max-width: 720px) {
  .hero { padding-top: 36px; }
  .logo { width: 92vw; }
  h1 { letter-spacing: .18em; }
  .keywords { line-height: 1.9; letter-spacing: .18em; max-width: 320px; }
  .keywords b { margin: 0 .24em; }
  .cta { gap: 14px; padding: 15px 16px; }
  footer { position: static; text-align: center; padding: 0 16px 20px; }
  .cube { transform: scale(.72); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .content { opacity:1; transform:none; }
}