:root{
    --bg:        #0e161f;
    --bg-alt:    #131e29;
    --surface:   #182534;
    --line:      #263a4c;
    --navy:      #1c3350;
    --blue:      #2e5c8a;
    --blue-light:#5b93c7;
    --orange:    #e8763c;
    --text:      #f4f6f8;
    --text-dim:  #8fa3b5;
    --font-display: 'Barlow Condensed', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  html{ scroll-behavior:smooth; }

  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    min-height:100vh;
    overflow-x:hidden;
    position:relative;
  }

  /* ---------- blueprint grid backdrop ---------- */
  .blueprint{
    position:fixed;
    inset:0;
    z-index:0;
    background-image:
      linear-gradient(rgba(91,147,199,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(91,147,199,0.06) 1px, transparent 1px),
      linear-gradient(rgba(91,147,199,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(91,147,199,0.03) 1px, transparent 1px);
    background-size:80px 80px, 80px 80px, 16px 16px, 16px 16px;
    background-position:-1px -1px;
    mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 85%);
  }

  .noise-line{
    position:fixed;
    left:0; right:0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(91,147,199,0.4), transparent);
    z-index:1;
    animation:scan 9s linear infinite;
    pointer-events:none;
  }
  @keyframes scan{
    0%{ top:0%; opacity:0; }
    5%{ opacity:1; }
    95%{ opacity:1; }
    100%{ top:100%; opacity:0; }
  }

  /* ---------- top bar ---------- */
  header{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:28px clamp(20px, 5vw, 64px);
    border-bottom:1px solid var(--line);
  }
  .mark{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .mark img{ width:34px; height:34px; flex-shrink:0; background-size: cover;}
  .mark-text{
    font-family:var(--font-display);
    font-weight:700;
    font-size:22px;
    letter-spacing:0.5px;
    text-transform:uppercase;
  }
  .mark-text span{ color:var(--orange); }

  .status-pill{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--blue-light);
    border:1px solid rgba(91,147,199,0.4);
    padding:7px 14px;
    border-radius:2px;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .status-pill::before{
    content:'';
    width:7px; height:7px;
    background:var(--orange);
    border-radius:50%;
    box-shadow:0 0 8px var(--orange);
    animation:pulse 1.6s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{ opacity:1; }
    50%{ opacity:0.35; }
  }

  /* ---------- hero ---------- */
  main{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:clamp(48px, 8vw, 96px) 24px 64px;
  }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--text-dim);
    margin-bottom:18px;
  }
  .eyebrow strong{ color:var(--blue-light); font-weight:500; }

  h1{
    font-family:var(--font-display);
    font-weight:800;
    text-transform:uppercase;
    font-size:clamp(52px, 11vw, 128px);
    line-height:0.92;
    letter-spacing:1px;
    background:linear-gradient(180deg, #ffffff 0%, #d8d8d0 55%, var(--text-dim) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  .subtitle{
    font-family:var(--font-body);
    font-weight:500;
    font-size:clamp(15px, 2vw, 19px);
    color:var(--text-dim);
    max-width:560px;
    margin:20px auto 0;
    line-height:1.6;
  }
  .subtitle b{ color:var(--text); font-weight:600; }

  /* ---------- countdown / gauge dial ---------- */
  .countdown-wrap{
    margin-top:clamp(48px, 6vw, 72px);
    width:100%;
    max-width:920px;
  }
  .countdown-label{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--text-dim);
    margin-bottom:22px;
  }

  .countdown{
    display:flex;
    justify-content:center;
    gap:clamp(10px, 2.4vw, 28px);
    flex-wrap:wrap;
  }

  .unit{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
  }

  .dial{
    position:relative;
    width:clamp(78px, 12vw, 128px);
    height:clamp(78px, 12vw, 128px);
    border-radius:50%;
    background:
      radial-gradient(circle at 50% 42%, #21272a 0%, #171b1d 70%, #121516 100%);
    border:1px solid var(--line);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.02),
      inset 0 8px 18px rgba(0,0,0,0.55),
      0 0 0 6px rgba(91,147,199,0.04);
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .dial .ticks{
    position:absolute;
    inset:0;
  }
  .dial .ticks span{
    position:absolute;
    top:4%;
    left:50%;
    width:1.5px;
    height:8%;
    background:rgba(238,238,230,0.18);
    transform-origin:50% 46px;
  }

  .dial .progress-ring{
    position:absolute;
    inset:0;
    transform:rotate(-90deg);
  }
  .dial .progress-ring circle{
    fill:none;
    stroke-width:2.5;
  }
  .dial .progress-ring .track{
    stroke:rgba(255,255,255,0.05);
  }
  .dial .progress-ring .fill{
    stroke:var(--blue-light);
    stroke-linecap:round;
    filter:drop-shadow(0 0 4px rgba(91,147,199,0.55));
    transition:stroke-dashoffset 0.6s linear;
  }

  .dial .value{
    position:relative;
    z-index:2;
    font-family:var(--font-mono);
    font-weight:600;
    font-size:clamp(22px, 3.6vw, 38px);
    color:var(--text);
    font-variant-numeric:tabular-nums;
  }

  .dial .needle{
    position:absolute;
    width:2px;
    height:34%;
    background:linear-gradient(180deg, var(--orange), transparent);
    top:16%;
    left:50%;
    transform-origin:50% 250%;
    border-radius:2px;
    opacity:0.85;
  }

  .unit-name{
    font-family:var(--font-mono);
    font-size:10.5px;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:var(--text-dim);
  }

  .colon{
    align-self:center;
    font-family:var(--font-mono);
    font-size:clamp(20px, 3vw, 32px);
    color:var(--line);
    padding-bottom:26px;
  }

  /* ---------- CTA ---------- */
  .cta-row{
    margin-top:56px;
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    justify-content:center;
    align-items:center;
  }

  .notify-form{
    display:flex;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:2px;
    overflow:hidden;
  }
  .notify-form input{
    background:transparent;
    border:none;
    outline:none;
    padding:15px 18px;
    color:var(--text);
    font-family:var(--font-body);
    font-size:14px;
    width:clamp(190px, 30vw, 280px);
  }
  .notify-form input::placeholder{ color:var(--text-dim); }
  .notify-form button{
    background:var(--blue);
    color:#ffffff;
    border:none;
    padding:0 24px;
    font-family:var(--font-display);
    font-weight:700;
    letter-spacing:0.5px;
    text-transform:uppercase;
    font-size:14px;
    cursor:pointer;
    transition:filter 0.15s ease;
  }
  .notify-form button:hover{ filter:brightness(1.15); }
  .notify-form button:focus-visible,
  .notify-form input:focus-visible{
    outline:2px solid var(--orange);
    outline-offset:-2px;
  }

  .form-msg{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--blue-light);
    min-height:16px;
    margin-top:12px;
  }

  /* ---------- info spec sheet ---------- */
  .spec-sheet{
    position:relative;
    z-index:2;
    border-top:1px solid var(--line);
    background:linear-gradient(180deg, var(--bg-alt), var(--bg));
    padding:clamp(36px, 5vw, 56px) clamp(20px, 5vw, 64px) 40px;
  }

  .spec-grid{
    max-width:1080px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }

  .spec-item{
    background:var(--bg);
    padding:26px 24px;
    display:flex;
    flex-direction:column;
    gap:10px;
    transition:background 0.2s ease;
  }
  .spec-item:hover{ background:var(--bg-alt); }

  .spec-item .icon{
    width:20px; height:20px;
    color:var(--blue-light);
  }

  .spec-key{
    font-family:var(--font-mono);
    font-size:10.5px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--text-dim);
  }

  .spec-value{
    font-family:var(--font-body);
    font-weight:600;
    font-size:15px;
    color:var(--text);
    word-break:break-word;
  }
  .spec-value a{ color:inherit; text-decoration:none; }
  .spec-value a:hover{ color:var(--blue-light); }

  footer{
    text-align:center;
    padding:26px 20px 34px;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:1px;
    color:var(--text-dim);
    position:relative;
    z-index:2;
  }
  footer span{ color:var(--blue-light); }

  @media (max-width:720px){
    .spec-grid{ grid-template-columns:1fr; }
    .colon{ display:none; }
    .countdown{ gap:16px; }
  }

  @media (prefers-reduced-motion: reduce){
    .noise-line, .status-pill::before{ animation:none; }
    .dial .progress-ring .fill{ transition:none; }
}