*{
  box-sizing:border-box;
}

:root{
  --bg:#03101b;
  --panel:#071d2d;
  --panel-soft:rgba(7,29,45,.72);
  --line:rgba(104,211,255,.16);
  --cyan:#72dcff;
  --blue:#2e8cff;
  --text:#f4fbff;
  --muted:#88a4b7;
  --status:#52e2a7;
  --status-rgb:82,226,167;
}

html{
  min-height:100%;
  background:var(--bg);
}

body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 76% 38%,rgba(24,119,203,.17),transparent 35%),
    linear-gradient(135deg,#020913 0%,#061827 51%,#020a12 100%);
}

.background-grid{
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);
}

.ambient{
  position:fixed;
  border-radius:999px;
  filter:blur(100px);
  pointer-events:none;
}

.ambient-one{
  width:460px;
  height:460px;
  right:-180px;
  top:12%;
  background:rgba(30,143,255,.17);
}

.ambient-two{
  width:340px;
  height:340px;
  left:-170px;
  bottom:-80px;
  background:rgba(47,220,255,.08);
}

.navbar{
  width:min(1500px,calc(100% - 72px));
  height:112px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:10;
}

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

.brand-logo-shell{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.brand-logo{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:
    drop-shadow(0 8px 12px rgba(0,0,0,.35))
    drop-shadow(0 0 16px rgba(56,188,255,.18));
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1;
}

.brand-text strong{
  font-size:19px;
  letter-spacing:.15em;
}

.brand-text span{
  margin-top:7px;
  color:#6f91a7;
  font-size:9px;
  font-weight:700;
  letter-spacing:.18em;
}

.top-status{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(4,18,30,.58);
  backdrop-filter:blur(14px);
  color:#b5ccda;
  font-size:10px;
  font-weight:800;
  letter-spacing:.13em;
}

.top-status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--status);
  box-shadow:0 0 13px rgba(var(--status-rgb),.75);
  animation:pulse 2.2s infinite;
}

.page{
  width:min(1500px,calc(100% - 72px));
  min-height:calc(100vh - 200px);
  margin:0 auto;
  padding:38px 0 105px;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(390px,.9fr);
  align-items:center;
  gap:6vw;
  position:relative;
  z-index:2;
}

.content{
  min-width:0;
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:13px;
  color:#73d8ff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.26em;
}

.eyebrow span{
  width:34px;
  height:1px;
  background:#73d8ff;
  box-shadow:0 0 12px #73d8ff;
}

h1{
  max-width:900px;
  margin:26px 0 24px;
  font-size:clamp(60px,6.2vw,108px);
  line-height:.89;
  letter-spacing:-.067em;
  font-weight:900;
}

h1 span{
  display:block;
  color:transparent;
  -webkit-text-stroke:1px rgba(145,221,255,.82);
  text-shadow:0 0 42px rgba(38,151,255,.13);
}

.subtitle{
  max-width:680px;
  margin:0;
  color:var(--muted);
  font-size:clamp(15px,1.05vw,18px);
  line-height:1.75;
}

.subtitle strong{
  color:#dff5ff;
}

.countdown{
  display:flex;
  align-items:center;
  gap:12px;
  margin:43px 0 36px;
}

.count-box{
  width:clamp(108px,8vw,132px);
  aspect-ratio:1/.86;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(105,205,255,.17);
  border-radius:18px;
  background:
    linear-gradient(145deg,rgba(13,52,78,.77),rgba(4,18,30,.78));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 60px rgba(0,0,0,.18);
  backdrop-filter:blur(14px);
}

.count-box strong{
  font-size:clamp(39px,3.45vw,59px);
  line-height:.9;
  font-weight:800;
  letter-spacing:-.055em;
  font-variant-numeric:tabular-nums;
}

.count-box span{
  margin-top:12px;
  color:#66879b;
  font-size:9px;
  font-weight:800;
  letter-spacing:.18em;
}

.count-separator{
  margin-top:-20px;
  color:#397696;
  font-size:32px;
  font-weight:700;
}

.status-card{
  max-width:700px;
  display:flex;
  align-items:center;
  gap:19px;
  padding:19px 22px;
  border:1px solid rgba(var(--status-rgb),.2);
  border-radius:16px;
  background:linear-gradient(90deg,rgba(var(--status-rgb),.08),rgba(4,17,28,.24));
}

.status-icon{
  width:46px;
  height:46px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border:1px solid rgba(var(--status-rgb),.36);
  border-radius:14px;
  background:rgba(var(--status-rgb),.08);
  color:var(--status);
  font-size:20px;
  font-weight:900;
  box-shadow:0 0 28px rgba(var(--status-rgb),.08);
}

.status-copy span{
  display:block;
  margin-bottom:5px;
  color:var(--status);
  font-size:8px;
  font-weight:800;
  letter-spacing:.2em;
}

.status-copy h2{
  margin:0;
  font-size:16px;
  line-height:1.2;
}

.status-copy p{
  margin:5px 0 0;
  color:#819bad;
  font-size:12px;
  line-height:1.5;
}

.hero-visual{
  width:min(39vw,570px);
  aspect-ratio:1;
  justify-self:center;
  display:grid;
  place-items:center;
  position:relative;
}

.hero-visual::before{
  content:"";
  position:absolute;
  inset:14%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(67,196,255,.16),rgba(22,94,170,.05) 48%,transparent 72%);
  filter:blur(26px);
}

.orbit{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(103,209,255,.14);
}

.orbit-one{
  inset:8%;
  transform:rotate(-16deg) scaleY(.57);
  box-shadow:
    0 0 0 34px rgba(79,181,255,.024),
    0 0 0 72px rgba(79,181,255,.016);
}

.orbit-two{
  inset:22%;
  transform:rotate(22deg) scaleY(.78);
}

.hero-logo-wrap{
  width:88%;
  position:relative;
  z-index:2;
  animation:floatLogo 5s ease-in-out infinite;
  filter:
    drop-shadow(0 22px 36px rgba(0,0,0,.42))
    drop-shadow(0 0 28px rgba(44,184,255,.16));
}

.hero-logo{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}

.visual-label{
  position:absolute;
  right:1%;
  bottom:5%;
  padding-left:17px;
  border-left:1px solid rgba(104,211,255,.5);
  display:flex;
  flex-direction:column;
  gap:5px;
}

.visual-label span{
  color:#5f8298;
  font-size:8px;
  font-weight:800;
  letter-spacing:.2em;
}

.visual-label strong{
  font-size:15px;
  letter-spacing:.16em;
}

.footer{
  width:min(1500px,calc(100% - 72px));
  height:88px;
  margin:-88px auto 0;
  display:flex;
  align-items:center;
  gap:14px;
  position:relative;
  z-index:3;
  color:#486579;
  font-size:8px;
  font-weight:700;
  letter-spacing:.16em;
}

.footer i{
  width:28px;
  height:1px;
  background:#28485b;
}

@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.55;transform:scale(.78)}
}

@keyframes floatLogo{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-13px) scale(1.012)}
}

@media(max-width:1100px){
  .page{
    grid-template-columns:1fr;
    padding-top:58px;
    padding-bottom:155px;
  }

  .hero-visual{
    position:absolute;
    width:520px;
    right:-220px;
    top:50px;
    opacity:.28;
    z-index:-1;
  }
}

@media(max-width:720px){
  .navbar,
  .page,
  .footer{
    width:min(100% - 34px,1500px);
  }

  .navbar{
    height:92px;
  }

  .brand-logo-shell{
    width:46px;
    height:46px;
  }

  .brand-text span{
    display:none;
  }

  .brand-text strong{
    font-size:15px;
  }

  .top-status{
    max-width:160px;
    padding:10px 12px;
    font-size:8px;
    text-align:right;
  }

  .page{
    min-height:auto;
    padding-top:45px;
    padding-bottom:135px;
  }

  h1{
    font-size:clamp(48px,15vw,76px);
  }

  .subtitle{
    font-size:14px;
  }

  .countdown{
    gap:6px;
    margin:35px 0 30px;
  }

  .count-box{
    width:calc((100vw - 68px)/4);
    max-width:110px;
    border-radius:13px;
  }

  .count-box strong{
    font-size:clamp(27px,9vw,42px);
  }

  .count-box span{
    margin-top:8px;
    font-size:7px;
    letter-spacing:.11em;
  }

  .count-separator{
    display:none;
  }

  .status-card{
    padding:16px;
  }

  .status-copy p{
    font-size:11px;
  }

  .hero-visual{
    width:380px;
    right:-220px;
    top:100px;
  }

  .footer{
    height:80px;
    margin-top:-80px;
  }
}


/* MOBILE VERO */
@media (max-width: 720px) {
  body {
    min-height: 100svh;
    background:
      radial-gradient(circle at 50% 16%, rgba(28,132,220,.20), transparent 34%),
      linear-gradient(180deg,#020913 0%,#061827 58%,#020a12 100%);
  }

  .navbar, .page, .footer {
    width: min(100% - 28px, 680px);
  }

  .navbar {
    height: 82px;
    gap: 12px;
  }

  .brand {
    gap: 9px;
    min-width: 0;
  }

  .brand-logo-shell {
    width: 42px;
    height: 42px;
  }

  .brand-text strong {
    font-size: 13px;
    letter-spacing: .11em;
    white-space: nowrap;
  }

  .brand-text span {
    display: none;
  }

  .top-status {
    max-width: 145px;
    padding: 9px 11px;
    gap: 7px;
    font-size: 7px;
    line-height: 1.25;
    letter-spacing: .08em;
    text-align: right;
  }

  .page {
    min-height: auto;
    padding: 24px 0 116px;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .content {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .hero-visual {
    position: relative;
    order: -1;
    width: min(92vw, 410px);
    height: auto;
    aspect-ratio: 1.22 / 1;
    right: auto;
    top: auto;
    opacity: 1;
    z-index: 1;
    margin: -6px auto -16px;
  }

  .visual-label {
    display: none;
  }

  .eyebrow {
    justify-content: center;
    text-align: center;
    font-size: 8px;
    letter-spacing: .17em;
  }

  .eyebrow span {
    width: 24px;
  }

  h1 {
    margin: 18px auto 17px;
    max-width: 540px;
    font-size: clamp(42px, 13vw, 66px);
    line-height: .91;
    text-align: center;
  }

  .subtitle {
    max-width: 520px;
    margin: 0 auto;
    padding: 0 4px;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
  }

  .subtitle strong {
    display: block;
    margin-top: 4px;
  }

  .countdown {
    width: 100%;
    max-width: 420px;
    margin: 28px auto 24px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .count-box {
    width: 100%;
    aspect-ratio: 1.55 / 1;
    border-radius: 15px;
  }

  .count-box strong {
    font-size: clamp(38px, 12vw, 54px);
  }

  .count-box span {
    margin-top: 9px;
    font-size: 8px;
  }

  .count-separator {
    display: none;
  }

  .status-card {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    align-items: flex-start;
    gap: 13px;
    padding: 15px;
  }

  .status-icon {
    width: 42px;
    height: 42px;
  }

  .status-copy p {
    font-size: 11px;
  }

  .footer {
    height: 70px;
    margin-top: -70px;
    justify-content: center;
    font-size: 7px;
  }
}

@media (max-width: 390px) {
  .navbar, .page, .footer {
    width: min(100% - 22px, 680px);
  }

  .brand-logo-shell {
    width: 38px;
    height: 38px;
  }

  .brand-text strong {
    font-size: 12px;
  }

  .top-status {
    max-width: 132px;
    font-size: 6.5px;
  }

  .hero-visual {
    width: min(96vw, 370px);
  }

  h1 {
    font-size: clamp(38px, 12.6vw, 54px);
  }

  .subtitle {
    font-size: 12px;
  }

  .countdown {
    gap: 8px;
  }
}