:root{
  --bg:#060708;
  --ink:#f2f3f3;
  --mut:#9aa0a3;
  --dim:#55595c;
  --line:rgba(255,255,255,.09);
  --sig:#7ddcff;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Archivo',system-ui,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--sig);color:#060708}

#field{
  position:fixed;inset:0;
  width:100%;height:100%;
  display:block;
  z-index:0;
}
.grid{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.4;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:28px 28px;
}

/* corner ticks — instrument framing, no text */
.ticks{position:fixed;inset:20px;z-index:2;pointer-events:none}
.ticks i{
  position:absolute;width:14px;height:14px;opacity:.6;
  font-style:normal;
}
.ticks i::before,.ticks i::after{
  content:"";position:absolute;background:var(--dim);
}
.ticks i::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%)}
.ticks i::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-50%)}
.ticks i:nth-child(1){top:0;left:0}
.ticks i:nth-child(2){top:0;right:0}
.ticks i:nth-child(3){bottom:0;left:0}
.ticks i:nth-child(4){bottom:0;right:0}

.stage{
  position:relative;z-index:2;
  min-height:100dvh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  padding:80px clamp(24px,6vw,80px) 120px;
  max-width:1200px;
  margin:0 auto;
}

.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;font-weight:500;letter-spacing:.32em;text-indent:.32em;
  color:var(--dim);text-transform:uppercase;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;gap:14px;
}
.eyebrow::before{
  content:"";display:block;width:28px;height:1px;
  background:var(--dim);
}

h1{
  font-weight:600;
  font-size:clamp(3.4rem,11vw,10rem);
  line-height:.94;
  letter-spacing:-.04em;
  margin:22px 0 0;
  text-transform:uppercase;
  text-wrap:balance;
}
h1 .line{display:block;overflow:hidden}
h1 .line span{display:block;transform:translateY(110%);animation:rise .9s var(--ease) forwards}
h1 .line:nth-child(2) span{animation-delay:.1s}
h1 em{font-style:normal;color:var(--sig)}
@keyframes rise{to{transform:translateY(0)}}

.rule{
  width:100%;max-width:420px;height:1px;background:var(--line);
  margin:32px auto 22px;opacity:0;
  animation:fade .9s var(--ease) .45s forwards;
  position:relative;
}
.rule::after{
  content:"";position:absolute;left:50%;top:-2px;
  width:32px;height:5px;background:var(--sig);
  transform:translateX(-50%);
}

.sub{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;font-weight:400;letter-spacing:.3em;
  color:var(--mut);text-transform:uppercase;
  opacity:0;animation:fade .9s var(--ease) .6s forwards;
}

.meta{
  position:fixed;z-index:2;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(32px,7vw,110px) 34px;
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;letter-spacing:.28em;
  color:var(--dim);text-transform:uppercase;
  opacity:0;animation:fade .9s var(--ease) .75s forwards;
}
@keyframes fade{to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  h1 .line span,.rule,.sub,.meta{animation:none;opacity:1;transform:none}
}

/* tablet */
@media (max-width:1024px){
  .stage{padding:72px 40px 130px;max-width:100%}
  h1{font-size:clamp(3rem,12vw,7rem)}
  .rule{max-width:340px}
  .meta{padding:0 40px 32px}
  .grid{background-size:24px 24px}
}

/* mobile */
@media (max-width:640px){
  .stage{padding:64px 24px 120px}
  .eyebrow{font-size:10px;letter-spacing:.24em;text-indent:.24em}
  .eyebrow::before{width:20px}
  h1{font-size:clamp(2.6rem,15.5vw,4.5rem);line-height:.96}
  .rule{max-width:240px;margin:26px auto 18px}
  .sub{font-size:10px;letter-spacing:.22em;text-indent:.22em}
  .meta{padding:0 24px 26px;font-size:9px;letter-spacing:.2em}
  .meta .mid{display:none}
  .ticks{inset:12px}
  .grid{background-size:22px 22px;opacity:.32}
}