:root{
  color-scheme:dark;
  --bg:#000000;
  --bg-alt:#0a0a0a;
  --ink:#00d4ff;
  --ink-soft:rgba(0,212,255,0.85);
  --muted:rgba(0,212,255,0.5);
  --surface:rgba(0,20,40,0.5);
  --surface-strong:rgba(0,20,40,0.8);
  --surface-soft:rgba(0,20,40,0.3);
  --accent:#ffffff;
  --accent-strong:#ffffff;
  --accent-soft:rgba(0,212,255,0.08);
  --accent-glow:rgba(0,212,255,0.4);
  --border:rgba(0,212,255,0.2);
  --border-strong:rgba(0,212,255,0.4);
  --radius-lg:8px;
  --radius-md:6px;
  --radius-sm:4px;
  --blur:12px;
  --shadow-soft:0 0 20px rgba(0,212,255,0.15);
  --shadow-medium:0 0 30px rgba(0,212,255,0.25);
  --font-sans:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"Courier New",monospace;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  height:100%;
}

body{
  margin:0;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  font-family:var(--font-mono);
  color:var(--ink);
  background:#000000;
  letter-spacing:0.01em;
  padding:0;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    repeating-linear-gradient(0deg,rgba(0,212,255,0.03) 0 1px,transparent 1px 2px);
  opacity:0.5;
  pointer-events:none;
  z-index:1;
  animation:scan 8s linear infinite;
}

@keyframes scan{
  0%{transform:translateY(0);}
  100%{transform:translateY(100%);}
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0,212,255,0.05), transparent 70%);
  pointer-events:none;
  z-index:0;
}

.app-surface{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  isolation:isolate;
  z-index:2;
}

.site-header{
  position:sticky;
  top:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:28px clamp(24px,8vw,72px);
  z-index:20;
  backdrop-filter:blur(var(--blur));
  background:rgba(0,0,0,0.9);
  border-bottom:1px solid var(--border);
  box-shadow:0 0 20px rgba(0,212,255,0.1);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:16px;
  text-decoration:none;
  color:inherit;
}

.brand-logo{
  position:relative;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:4px;
  background:rgba(0,20,40,0.6);
  box-shadow:0 0 20px rgba(0,212,255,0.3), inset 0 0 10px rgba(0,212,255,0.1);
  border:1px solid var(--border-strong);
}

.brand-frame{
  position:absolute;
  inset:6px;
  border-radius:2px;
  border:1px dashed var(--ink);
  opacity:0.5;
  animation:pulse 2s ease-in-out infinite;
}

@keyframes pulse{
  0%, 100%{opacity:0.3;}
  50%{opacity:0.7;}
}

.brand-letter{
  font-size:1.75rem;
  font-weight:700;
  color:var(--ink);
  text-shadow:0 0 10px rgba(0,212,255,0.8);
}

.brand-copy{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.brand-title{
  font-size:1.2rem;
  font-weight:700;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--ink);
  text-shadow:0 0 10px rgba(0,212,255,0.5);
}

.brand-tagline{
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:0.3em;
  color:var(--muted);
}

.site-nav{
  display:flex;
  gap:22px;
  align-items:center;
}

.nav-item{
  position:relative;
  text-decoration:none;
  color:var(--ink-soft);
  text-transform:uppercase;
  font-size:0.74rem;
  letter-spacing:0.28em;
  padding:10px 0;
  transition:color 0.2s ease, text-shadow 0.2s ease;
}
.nav-item::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--ink);
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform 0.25s ease;
  box-shadow:0 0 10px rgba(0,212,255,0.8);
}
.nav-item:focus-visible,
.nav-item:hover{
  color:var(--ink);
  text-shadow:0 0 10px rgba(0,212,255,0.8);
}
.nav-item:focus-visible::after,
.nav-item:hover::after{
  transform:scaleX(1);
  transform-origin:left;
}

.layout{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:80px;
  padding:96px clamp(24px,8vw,112px) 160px;
  width: 70vw;
  margin: 0 auto;
}

.hero{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:56px;
  align-items:center;
}

.hero-copy{
  display:flex;
  flex-direction:column;
  gap:20px;
  max-width:560px;
}

.eyebrow{
  margin:0;
  text-transform:uppercase;
  letter-spacing:0.4em;
  font-size:0.78rem;
  color:var(--muted);
}

.glitch-text{
  position:relative;
  display:inline-block;
  animation:glitchText 3s infinite;
}
.glitch-text::before,
.glitch-text::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  pointer-events:none;
}
.glitch-text::before{
  transform:translateX(calc(var(--gx,0px)*0.5));
  color:rgba(0,212,255,0.7);
  animation:glitch1 2s infinite;
}
.glitch-text::after{
  transform:translateX(calc(var(--gx,0px)*-0.35));
  color:rgba(0,212,255,0.4);
  animation:glitch2 3s infinite;
}

@keyframes glitch1{
  0%, 100%{clip-path:inset(0 0 0 0);}
  5%{clip-path:inset(10% 0 85% 0);}
  10%{clip-path:inset(80% 0 10% 0);}
  15%{clip-path:inset(50% 0 30% 0);}
  20%{clip-path:inset(0 0 0 0);}
}

@keyframes glitch2{
  0%, 100%{clip-path:inset(0 0 0 0);}
  7%{clip-path:inset(20% 0 60% 0);}
  14%{clip-path:inset(60% 0 20% 0);}
  21%{clip-path:inset(0 0 0 0);}
}

.title{
  margin:0;
  font-weight:700;
  font-size:clamp(2.4rem,4vw,3.2rem);
  line-height:1.08;
  letter-spacing:0.02em;
  color:var(--ink);
  text-shadow:0 0 20px rgba(0,212,255,0.5);
}

.accent{
  color:var(--accent-strong);
  text-shadow:0 0 15px rgba(255,255,255,0.8);
}

.subtitle{
  margin:0;
  font-size:1.05rem;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:52ch;
}

.hero-panel{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.progress-container{
  width:min(420px,100%);
  background:var(--surface-strong);
  border-radius:var(--radius-lg);
  padding:28px 32px;
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-medium), inset 0 0 20px rgba(0,212,255,0.05);
  display:flex;
  flex-direction:column;
  gap:22px;
}

.progress-track{
  position:relative;
  width:100%;
  height:12px;
  border-radius:2px;
  background:rgba(0,50,80,0.3);
  overflow:hidden;
  border:1px solid rgba(0,212,255,0.2);
}

.progress-fill{
  position:absolute;
  inset:0;
  width:0%;
  background:linear-gradient(90deg,rgba(0,212,255,0.95),rgba(0,212,255,0.6));
  border-radius:2px;
  box-shadow:0 0 20px rgba(0,212,255,0.6);
  transition:width 0.3s ease;
}

.progress-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:0.76rem;
  color:var(--muted);
}

.progress-timer{
  font-family:var(--font-mono);
  font-size:0.96rem;
  color:var(--ink);
  letter-spacing:0.36em;
  text-shadow:0 0 10px rgba(0,212,255,0.6);
}

.progress-status{
  min-height:18px;
}

.status-text{
  font-size:0.82rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.status-text.live{
  color:#00d4ff;
  text-shadow:0 0 10px rgba(0,212,255,0.8);
}
.status-text.warn{
  color:#ffff00;
  text-shadow:0 0 10px rgba(255,255,0,0.8);
}
.status-text.error{
  color:#ff0000;
  text-shadow:0 0 10px rgba(255,0,0,0.8);
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.stat-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:28px 32px;
  border-radius:var(--radius-md);
  background:var(--surface-strong);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft), inset 0 0 20px rgba(0,212,255,0.03);
  transition:border-color 0.3s ease, box-shadow 0.3s ease;
}
.stat-card:hover{
  border-color:var(--border-strong);
  box-shadow:0 0 30px rgba(0,212,255,0.3), inset 0 0 30px rgba(0,212,255,0.05);
}

.label{
  text-transform:uppercase;
  letter-spacing:0.32em;
  font-size:0.68rem;
  color:var(--muted);
}

.value{
  margin:0;
  font-size:2.2rem;
  font-weight:700;
  letter-spacing:0.05em;
  color:var(--ink);
  display:flex;
  align-items:baseline;
  gap:8px;
  text-shadow:0 0 15px rgba(0,212,255,0.5);
}

.value .unit{
  font-size:0.95rem;
  color:var(--muted);
  letter-spacing:0.08em;
  text-shadow:none;
}

.value.success{
  color:var(--accent-strong);
  text-shadow:0 0 15px rgba(255,255,255,0.8);
}

.muted{
  margin:0;
  color:var(--muted);
  font-size:0.9rem;
  max-width:42ch;
}

.button{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 24px;
  border-radius:4px;
  border:1px solid var(--border-strong);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:0.24em;
  font-size:0.78rem;
  font-weight:700;
  color:var(--ink);
  background:var(--surface-strong);
  box-shadow:0 0 20px rgba(0,212,255,0.2);
  transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  font-family:var(--font-mono);
}
.button:hover{
  transform:translateY(-2px);
  box-shadow:0 0 30px rgba(0,212,255,0.4);
  border-color:var(--ink);
}
.button.primary{
  background:rgba(0,212,255,0.1);
  color:#00d4ff;
  border-color:var(--ink);
  text-shadow:0 0 10px rgba(0,212,255,0.8);
}
.button.primary:hover{
  box-shadow:0 0 40px rgba(0,212,255,0.6);
  background:rgba(0,212,255,0.15);
}

.footer{
  margin-top:auto;
  border-top:1px solid var(--border);
  background:rgba(0,0,0,0.95);
  backdrop-filter:blur(20px);
}
.footer .inner{
  max-width:1080px;
  margin:0 auto;
  padding:28px clamp(24px,8vw,72px);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.footer-actions{
  display:flex;
  gap:16px;
}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.glitch-scan{
  position:fixed;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg,transparent,rgba(0,212,255,0.3) 20%,rgba(0,212,255,0.8) 50%,rgba(0,212,255,0.3) 80%,transparent);
  box-shadow:0 0 20px rgba(0,212,255,0.8);
  pointer-events:none;
  opacity:0.6;
  z-index:25;
  animation:scanMove 4s linear infinite;
}

@keyframes scanMove{
  0%{top:0;}
  100%{top:100%;}
}

@media (max-width:1080px){
  .hero{
    grid-template-columns:1fr;
    gap:48px;
  }
  .hero-panel{
    justify-content:flex-start;
  }
  .progress-container{
    width:min(480px,100%);
  }
}

@media (max-width:860px){
  .site-header{
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }
  .site-nav{
    width:100%;
    justify-content:space-between;
  }
  .layout{
    padding-top:72px;
    gap:64px;
  }
  .stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
  }
}

@media (max-width:640px){
  .site-nav{
    flex-wrap:wrap;
    gap:12px;
  }
  .nav-item{
    letter-spacing:0.22em;
  }
  .hero-copy{
    gap:16px;
  }
  .title{
    font-size:clamp(2.2rem,6vw,2.6rem);
  }
  .subtitle{
    font-size:0.98rem;
  }
  .progress-container{
    padding:24px;
  }
  .progress-meta{
    flex-direction:column;
    align-items:flex-start;
  }
  .stats-grid{
    grid-template-columns:1fr;
  }
  .stat-card{
    padding:24px;
  }
  .footer .inner{
    padding-block:24px;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:0.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.001ms!important;
    scroll-behavior:auto!important;
  }
}