:root{
  --bg-0: #05070d;
  --bg-1: #0a0f1e;
  --navy: #0d1730;
  --blue: #1c3f8f;
  --blue-light: #3a63c4;
  --blue-glow: #2a4fb0;
  --silver-1: #f4f6fa;
  --silver-2: #c7cede;
  --silver-3: #838fac;
  --text: #eef1f8;
  --text-dim: #8892ac;
  --radius: 16px;
}

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

html,body{
  height:100%;
  background: var(--bg-0);
  color: var(--text);
  font-family: 'Montserrat', system-ui, sans-serif;
  overflow-x: hidden;
}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
}

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

/* ---------- background fx ---------- */
.bg-fx{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, var(--navy) 0%, var(--bg-0) 55%);
}

.orb{
  position:absolute;
  border-radius:50%;
  filter: blur(90px);
  opacity:.55;
  animation: float 16s ease-in-out infinite;
}
.orb-1{
  width:520px; height:520px;
  top:-160px; left:-120px;
  background: radial-gradient(circle at 30% 30%, var(--blue-light), transparent 70%);
  animation-delay: 0s;
}
.orb-2{
  width:460px; height:460px;
  bottom:-180px; right:-140px;
  background: radial-gradient(circle at 60% 60%, var(--blue) 0%, transparent 70%);
  animation-delay: -8s;
}

@keyframes float{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(30px,-40px) scale(1.08); }
}

.grid-overlay{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 40%, transparent 90%);
  animation: gridShift 26s linear infinite;
}
@keyframes gridShift{
  0%{ background-position: 0 0, 0 0; }
  100%{ background-position: 46px 92px, 46px 92px; }
}

.noise{
  position:absolute; inset:0;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---------- floating particles (JS injected) ---------- */
.particles{
  position:fixed; inset:0; z-index:1; pointer-events:none;
}
.particle{
  position:absolute;
  bottom:-10px;
  border-radius:50%;
  background: radial-gradient(circle, var(--silver-1), var(--blue-light) 70%);
  opacity:.5;
  animation-name: rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes rise{
  0%{ transform: translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.6; }
  90%{ opacity:.4; }
  100%{ transform: translateY(-110vh) translateX(var(--drift,20px)); opacity:0; }
}

/* ---------- main content ---------- */
.wrap{
  position:relative; z-index:2;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 64px 20px 40px;
  max-width: 720px;
  margin: 0 auto;
}

/* logo */
.logo-mark{
  width: min(460px, 88vw);
  margin-bottom: 4px;
  animation: appear .9s ease .1s both, logoFloat 6s ease-in-out infinite;
}
.logo-mark img{
  display:block;
  width:100%;
  height:auto;
  filter: drop-shadow(0 0 26px rgba(58,99,196,.45)) drop-shadow(0 10px 30px rgba(0,0,0,.4));
  animation: logoGlow 4s ease-in-out infinite;
}
@keyframes logoFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}
@keyframes logoGlow{
  0%,100%{ filter: drop-shadow(0 0 26px rgba(58,99,196,.45)) drop-shadow(0 10px 30px rgba(0,0,0,.4)); }
  50%{ filter: drop-shadow(0 0 44px rgba(58,99,196,.75)) drop-shadow(0 10px 30px rgba(0,0,0,.4)); }
}

.headline{
  margin-top:38px;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  font-weight:600;
  color: var(--text);
  animation: appear 1s ease .5s both;
}
.dots span{
  animation: blink 1.4s infinite;
  opacity:0;
}
.dots span:nth-child(1){ animation-delay:0s; }
.dots span:nth-child(2){ animation-delay:.2s; }
.dots span:nth-child(3){ animation-delay:.4s; }
@keyframes blink{
  0%,20%{ opacity:0; }
  50%{ opacity:1; }
  100%{ opacity:0; }
}

.sub{
  margin-top:14px;
  max-width: 480px;
  font-size:.95rem;
  line-height:1.6;
  color: var(--text-dim);
  font-weight:300;
  animation: appear 1s ease .6s both;
}

/* progress bar */
.progress{
  margin-top:34px;
  width:min(360px, 80vw);
  height:6px;
  border-radius:99px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
  position:relative;
  animation: appear 1s ease .7s both;
}
.progress-bar{
  position:absolute; inset:0 auto 0 0;
  width:40%;
  border-radius:99px;
  background: linear-gradient(90deg, var(--blue), var(--silver-1));
  box-shadow: 0 0 14px var(--blue-glow);
  animation: loadSlide 2.4s ease-in-out infinite;
}
@keyframes loadSlide{
  0%{ left:-40%; }
  60%{ left:100%; }
  100%{ left:100%; }
}

/* contact note */
.contact-note{
  margin-top:34px;
  max-width:420px;
  font-size:.9rem;
  font-weight:400;
  color: var(--silver-2);
  animation: appear 1s ease .7s both;
}

/* socials */
.socials{
  margin-top:22px;
  display:flex;
  gap:16px;
  animation: appear 1s ease .8s both;
}
.social-link{
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.social-link svg{ width:18px; height:18px; fill: var(--silver-2); transition: fill .25s ease; }
.social-link:hover{
  transform: translateY(-4px);
  background: linear-gradient(135deg, var(--blue-light), var(--blue));
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(28,63,143,.5);
}
.social-link:hover svg{ fill:#fff; }

.site-footer{
  position:relative; z-index:2;
  text-align:center;
  padding: 18px 20px 26px;
  font-size:.76rem;
  color: var(--text-dim);
  letter-spacing:.03em;
}

@keyframes appear{
  from{ opacity:0; transform: translateY(16px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ---------- mobile tuning ---------- */
@media (max-width: 640px){
  .wrap{ padding: 44px 18px 32px; }

  .orb{ filter: blur(46px); opacity:.5; animation-duration: 12s; }
  .orb-1{ width:260px; height:260px; top:-90px; left:-80px; }
  .orb-2{ width:230px; height:230px; bottom:-100px; right:-90px; }

  .grid-overlay{ background-size: 32px 32px; opacity:.6; }

  .particle{ display:none; }
  .particle:nth-child(-n+10){ display:block; }

  .logo-mark{ width:min(300px, 82vw); }
  .logo-mark img{ animation: none; filter: drop-shadow(0 0 18px rgba(58,99,196,.5)) drop-shadow(0 6px 18px rgba(0,0,0,.4)); }
  @keyframes logoFloat{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-8px); }
  }

  .headline{ margin-top:26px; }
  .progress{ margin-top:26px; }
  .contact-note{ margin-top:26px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}