:root{
  --ink:        #0B1536;
  --ink-deep:   #060C20;
  --ink-lift:   #122148;
  --green:      #00915F;
  --green-lit:  #21C289;
  --blue:       #1A5490;
  --text:       #E9EEF7;
  --muted:      #8496B5;
  --rule:       rgba(150,172,210,.24);

  --ease: cubic-bezier(.22,.68,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(120% 90% at 50% 8%, #16264F 0%, var(--ink) 42%, var(--ink-deep) 100%);
  color:var(--text);
  font-family:"IBM Plex Sans",-apple-system,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ---------- background layers ---------- */
#paths{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}

.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.30;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.scrim{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(48% 40% at 50% 47%,
    rgba(7,13,33,.80) 0%, rgba(7,13,33,.56) 46%, rgba(7,13,33,0) 74%);
}
.vignette{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(78% 62% at 50% 46%, transparent 42%, rgba(4,8,20,.62) 100%);
}

/* ---------- layout ---------- */
.shell{
  position:relative;z-index:3;
  min-height:100dvh;
  display:grid;place-items:center;
  padding:clamp(24px,6vw,64px);
}
.parallax{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  max-width:760px;
  will-change:transform;
}

/* ---------- lockup ---------- */
.lockup{display:flex;align-items:center;gap:clamp(16px,2.4vw,26px)}
.lockup__mark{
  height:clamp(52px,7.4vw,82px);width:auto;display:block;
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.45));
}
.lockup__rule{width:1px;align-self:stretch;margin:6px 0;background:var(--rule)}
.lockup__word{
  font-size:clamp(19px,2.5vw,27px);
  font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  white-space:nowrap;line-height:1;
}

/* ---------- status ---------- */
.status{
  display:inline-flex;align-items:center;gap:10px;
  margin:clamp(30px,5vw,44px) 0 0;
  padding:7px 16px 7px 13px;
  border:1px solid rgba(33,194,137,.30);
  border-radius:999px;
  background:rgba(0,145,95,.09);
  font-size:12px;letter-spacing:.17em;text-transform:uppercase;
  color:#9FE7C8;font-weight:500;
}
.status__dot{
  width:7px;height:7px;border-radius:50%;background:var(--green-lit);
  box-shadow:0 0 0 0 rgba(33,194,137,.55);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{
  0%  {box-shadow:0 0 0 0 rgba(33,194,137,.50)}
  70% {box-shadow:0 0 0 11px rgba(33,194,137,0)}
  100%{box-shadow:0 0 0 0 rgba(33,194,137,0)}
}

/* ---------- headline ---------- */
.headline{
  margin:clamp(18px,3vw,26px) 0 0;
  font-size:clamp(40px,8.2vw,78px);
  font-weight:500;line-height:1.08;letter-spacing:-.028em;
}
.headline .line{display:block;overflow:hidden}
.headline .line>span{display:block}

.sub{
  margin:clamp(18px,2.6vw,24px) 0 0;
  max-width:46ch;
  font-size:clamp(15px,1.7vw,18px);
  line-height:1.65;color:var(--muted);
}

.contact{margin:clamp(28px,4vw,40px) 0 0;font-size:14px}
.contact a{
  color:var(--text);text-decoration:none;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.02em;
  padding-bottom:3px;
  border-bottom:1px solid var(--rule);
  transition:border-color .35s var(--ease), color .35s var(--ease);
}
.contact a:hover,.contact a:focus-visible{color:var(--green-lit);border-color:var(--green-lit)}

/* ---------- footer ---------- */
.foot{
  position:fixed;z-index:3;left:0;right:0;bottom:0;
  display:flex;justify-content:center;align-items:center;gap:10px;
  padding:22px 24px;
  font-size:11.5px;letter-spacing:.1em;color:rgba(132,150,181,.75);
}
.foot__mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.foot__sep{opacity:.5}

/* ---------- entrance ----------
   Transitions, not keyframe animations: an animation with fill-mode "both"
   holds its start frame whenever the animation clock does not advance (hidden
   tab, frozen compositor), which would leave the page blank. A transition
   simply lands on the end state instead.                                     */
.js .lockup,.js .status,.js .headline .line>span,.js .sub,.js .contact,.js .foot{
  opacity:0;transform:translateY(16px);
}
.js.ready .lockup,.js.ready .status,.js.ready .headline .line>span,
.js.ready .sub,.js.ready .contact,.js.ready .foot{
  opacity:1;transform:none;
  transition:opacity .9s var(--ease) var(--d,0s),
             transform .9s var(--ease) var(--d,0s);
}
.js .lockup                       {--d:.05s}
.js .headline .line:nth-child(1)>span{--d:.34s}
.js .headline .line:nth-child(2)>span{--d:.44s}
.js .status                       {--d:.62s}
.js .sub                          {--d:.72s}
.js .contact                      {--d:.84s}
.js .foot                         {--d:.98s}

/* one-time light sweep across the lockup — a pure overlay, so the mark itself
   is never hidden if the animation does not run */
.lockup{position:relative;overflow:hidden}
.lockup::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(190,225,255,.16),transparent);
}
.js.ready .lockup::after{animation:sweep 1.5s var(--ease) .55s 1}
@keyframes sweep{
  0%{left:-60%;opacity:0}
  15%{opacity:1}
  85%{opacity:1}
  100%{left:115%;opacity:0}
}

/* ---------- responsive ---------- */
@media (max-width:560px){
  body{overflow:auto}
  .lockup{flex-direction:column;gap:16px}
  .lockup__rule{display:none}
  .lockup__word{letter-spacing:.19em}
  /* keep the block vertically centred; reserve room for the fixed footer */
  .shell{padding-top:76px;padding-bottom:104px}
  .foot{padding:18px 20px}
  /* narrower viewport = less scrim coverage, so quieten the paths instead */
  #paths{opacity:.72}
  .scrim{background:radial-gradient(72% 46% at 50% 44%,
    rgba(7,13,33,.86) 0%, rgba(7,13,33,.62) 52%, rgba(7,13,33,0) 82%)}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .js .lockup,.js .status,.js .headline .line>span,.js .sub,.js .contact,.js .foot{
    opacity:1;transform:none;transition:none !important;
  }
  .lockup::after{animation:none !important;opacity:0 !important}
  .status__dot{animation:none}
}