:root{
  --navy-900:#0f1318;
  --navy-850:#161a20;
  --navy-800:#1d232a;
  --navy-700:#242b33;
  --surface:#283039;
  --line:rgba(192,201,214,0.13);
  --line-strong:rgba(192,201,214,0.26);
  --ink:#eef1f5;
  --ink-soft:#c6ccd5;
  --muted:#909aa7;
  --muted-2:#6d7783;
  --silver:#b8c1cd;
  --silver-bright:#e9edf2;
  --steel-glow:rgba(205,214,226,0.22);
  --metal:linear-gradient(150deg,#f3f5f8 0%,#d2d9e1 38%,#aab3bf 56%,#e3e8ee 100%);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Helvetica Neue",Helvetica,Arial,"Segoe UI",sans-serif;
  background:radial-gradient(ellipse 110% 80% at 70% -10%, #232b35 0%, var(--navy-850) 45%, var(--navy-900) 100%);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
  min-height:100svh;
}
::selection{background:rgba(200,209,222,.30);color:#fff}
.mono{font-family:"SF Mono",ui-monospace,"Roboto Mono",Menlo,Consolas,monospace}

/* ---------- AMBIENT BACKGROUND ---------- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg .grid{
  position:absolute;inset:-2px;
  background-image:
    linear-gradient(rgba(200,209,222,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(200,209,222,.055) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 0%,#000 40%,transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 0%,#000 40%,transparent 85%);
  animation:gridDrift 40s linear infinite;
}
@keyframes gridDrift{
  from{background-position:0 0,0 0}
  to{background-position:64px 64px,64px 64px}
}
.bg .glow-a{
  position:absolute;width:820px;height:820px;left:-200px;top:-220px;border-radius:50%;
  background:radial-gradient(circle,rgba(205,214,226,.18),transparent 60%);
  filter:blur(10px);
  animation:floatA 18s ease-in-out infinite alternate;
}
.bg .glow-b{
  position:absolute;width:680px;height:680px;right:-180px;bottom:-200px;border-radius:50%;
  background:radial-gradient(circle,rgba(140,160,190,.14),transparent 62%);
  filter:blur(10px);
  animation:floatB 22s ease-in-out infinite alternate;
}
@keyframes floatA{
  from{transform:translate(0,0)}
  to{transform:translate(40px,30px)}
}
@keyframes floatB{
  from{transform:translate(0,0)}
  to{transform:translate(-50px,-25px)}
}
.bg .scan{
  position:absolute;left:0;right:0;height:140px;
  background:linear-gradient(180deg,transparent 0%,rgba(205,214,226,.05) 45%,rgba(205,214,226,.10) 50%,rgba(205,214,226,.05) 55%,transparent 100%);
  animation:scanLine 9s linear infinite;
  mix-blend-mode:screen;
  opacity:.55;
}
@keyframes scanLine{
  0%{top:-160px}
  100%{top:110%}
}
.bg .noise{
  position:absolute;inset:0;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- LAYOUT ---------- */
.frame{
  position:relative;z-index:2;
  min-height:100svh;
  display:flex;flex-direction:column;
  padding:28px 36px;
}
.corners::before,.corners::after,
.corners > i:nth-child(1),.corners > i:nth-child(2){
  content:"";position:fixed;width:22px;height:22px;z-index:3;pointer-events:none;
  border-color:var(--line-strong);
  opacity:.7;
}
.corners::before{top:22px;left:22px;border-top:1px solid;border-left:1px solid}
.corners::after{top:22px;right:22px;border-top:1px solid;border-right:1px solid}
.corners > i:nth-child(1){bottom:22px;left:22px;border-bottom:1px solid;border-left:1px solid;display:block}
.corners > i:nth-child(2){bottom:22px;right:22px;border-bottom:1px solid;border-right:1px solid;display:block}

/* ---------- TOP BAR ---------- */
.top{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{
  width:38px;height:30px;
  background:url("/assets/kx-mark.png") center/contain no-repeat;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
}
.brand .wm{
  font-weight:700;letter-spacing:.20em;font-size:14px;color:var(--ink);
}
.brand .sub{
  font-size:10.5px;letter-spacing:.28em;color:var(--muted);text-transform:uppercase;margin-top:2px;
}
.status{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);
  padding:9px 14px;border:1px solid var(--line-strong);border-radius:999px;
  background:rgba(255,255,255,.02);
  backdrop-filter:blur(6px);
}
.status .ping{
  width:8px;height:8px;border-radius:50%;background:#7ad7a0;
  box-shadow:0 0 0 0 rgba(122,215,160,.55);
  animation:ping 2s ease-out infinite;
}
@keyframes ping{
  0%  {box-shadow:0 0 0 0 rgba(122,215,160,.55)}
  70% {box-shadow:0 0 0 10px rgba(122,215,160,0)}
  100%{box-shadow:0 0 0 0 rgba(122,215,160,0)}
}

/* ---------- HERO ---------- */
.stage{
  flex:1;
  display:grid;
  place-items:center;
  text-align:center;
  padding:20px 0;
}
.stage-inner{max-width:780px;width:100%;display:flex;flex-direction:column;align-items:center;gap:32px}

.eyebrow{
  font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--silver-bright);font-weight:600;
  display:inline-flex;align-items:center;gap:14px;
}
.eyebrow::before,.eyebrow::after{
  content:"";width:36px;height:1px;background:linear-gradient(90deg,transparent,var(--silver),transparent);
}

.wordmark{
  font-weight:700;letter-spacing:.04em;
  font-size:clamp(56px,11vw,148px);
  line-height:.95;
  background:var(--metal);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 8px 36px rgba(0,0,0,.5);
  user-select:none;
  background-size:200% 100%;
  animation:shimmer 8s linear infinite;
}
@keyframes shimmer{
  0%  {background-position:0% 50%}
  100%{background-position:200% 50%}
}
.wordmark .scram{display:inline-block;min-width:.55em}

.tagline{
  font-size:clamp(18px,1.6vw,21px);
  color:var(--ink-soft);
  max-width:560px;
  text-wrap:balance;
  line-height:1.55;
}
.tagline .accent{color:var(--silver-bright)}

.progress{
  width:min(540px,90%);
  display:flex;flex-direction:column;gap:10px;align-items:center;
}
.progress .bar{
  width:100%;height:2px;background:rgba(200,209,222,.10);position:relative;overflow:hidden;border-radius:2px;
}
.progress .fill{
  position:absolute;top:0;bottom:0;left:0;width:0%;
  background:linear-gradient(90deg,transparent,var(--silver-bright),transparent);
  animation:sweep 3.6s var(--ease) infinite;
}
@keyframes sweep{
  0%  {left:-30%;width:30%}
  60% {left:100%;width:30%}
  100%{left:100%;width:30%}
}
.progress .meta{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
.progress .meta .v{color:var(--ink-soft)}

/* ---------- BOTTOM ---------- */
.bottom{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  color:var(--muted);
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
}
.bottom .col{display:flex;flex-direction:column;gap:6px}
.bottom .v{color:var(--ink-soft);letter-spacing:.06em;text-transform:none;font-size:13.5px}
.bottom a.v:hover{color:#fff}
.bottom .right{text-align:right}
.ts{font-feature-settings:"tnum" 1}

/* reveal */
.reveal{opacity:0;transform:translateY(10px);animation:rise .9s var(--ease) forwards}
.d0{animation-delay:.05s}
.d1{animation-delay:.20s}
.d2{animation-delay:.40s}
.d3{animation-delay:.60s}
.d4{animation-delay:.80s}
.d5{animation-delay:1.0s}
.d6{animation-delay:1.2s}
@keyframes rise{to{opacity:1;transform:translateY(0)}}

@media (prefers-reduced-motion: reduce){
  .reveal{animation:none;opacity:1;transform:none}
  .wordmark,.scan,.fill,.glow-a,.glow-b,.grid{animation:none !important}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:720px){
  .frame{padding:22px 22px}
  .corners::before,.corners::after{top:18px}
  .corners::before{left:18px}.corners::after{right:18px}
  .corners > i:nth-child(1){bottom:18px;left:18px}
  .corners > i:nth-child(2){bottom:18px;right:18px}
  .top{flex-direction:column;align-items:flex-start;gap:14px}
  .bottom{flex-direction:column;align-items:flex-start;gap:18px}
  .bottom .right{text-align:left}
  .stage-inner{gap:26px}
}