/* Ascend International — Flashy Loader + Animated Coming Soon */

:root{
  --bg:#07090c;
  --fg:#f4f6fb;
  --hair: rgba(244,246,251,.12);
  --hair2: rgba(244,246,251,.07);
  --glass: rgba(255,255,255,.05);
  --glass2: rgba(255,255,255,.03);
  --border: rgba(255,255,255,.12);
  --glow: rgba(255,255,255,.14);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  overflow:hidden;
}

/* ================= FLASH LOADER ================= */
.loader{
  position:fixed;
  inset:0;
  z-index:60;
  display:grid;
  place-items:center;
  isolation:isolate;
}

.loader__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 50% 48%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 500px at 18% 70%, rgba(255,255,255,.06), transparent 64%),
    radial-gradient(900px 520px at 82% 62%, rgba(255,255,255,.06), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 62%);
  opacity:.95;
}

/* HUD Card */
.loader__hud{
  position:relative;
  width: min(760px, calc(100vw - 42px));
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
  backdrop-filter: blur(12px);
  box-shadow: 0 22px 120px rgba(0,0,0,.55);
  padding: clamp(18px, 4vw, 28px);
  display:grid;
  grid-template-columns: 92px 1fr;
  gap: clamp(14px, 3vw, 22px);
  overflow:hidden;
  transform: translateZ(0);
  animation: hudFloat 3.4s ease-in-out infinite;
}

@keyframes hudFloat{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-10px) scale(1.01); }
}

/* animated internal shine */
.loader__hud::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform: translateX(-140%) skewX(-12deg);
  animation: hudSweep 1.9s ease-in-out infinite;
  opacity:.9;
}
@keyframes hudSweep{
  0%{ transform: translateX(-140%) skewX(-12deg); opacity:0; }
  20%{ opacity:.9; }
  55%{ transform: translateX(160%) skewX(-12deg); opacity:.25; }
  100%{ transform: translateX(160%) skewX(-12deg); opacity:0; }
}

/* logo */
.loader__logo{
  width:92px; height:92px;
  border-radius: 22px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 80px rgba(0,0,0,.35);
  position:relative;
  z-index:2;
  animation: logoPulse 1.6s ease-in-out infinite;
}
@keyframes logoPulse{
  0%,100%{ filter: brightness(1); }
  50%{ filter: brightness(1.25); }
}
.loader__logo img{
  width: 62%;
  height: 62%;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.45));
}

/* type area */
.loader__type{
  position:relative;
  z-index:2;
  display:grid;
  gap: 10px;
  align-content:center;
}

.loader__kicker{
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.64);
}

/* glitch headline (3 layers) */
.loader__glitch{
  position:relative;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  font-size: clamp(30px, 4.2vw, 46px);
  text-transform: uppercase;
}
.loader__glitch span{
  position:absolute;
  inset:0;
  display:block;
  background: linear-gradient(90deg, rgba(255,255,255,.78), rgba(255,255,255,1), rgba(255,255,255,.78));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 2.2s ease-in-out infinite;
}
.loader__glitch span:nth-child(1){
  position:relative;
  animation: shimmer 2.2s ease-in-out infinite, glitch 1.8s steps(2) infinite;
}
.loader__glitch span:nth-child(2){
  color: rgba(255,255,255,.65);
  mix-blend-mode: screen;
  transform: translate(0,0);
  opacity:.65;
  animation: glitch2 1.4s steps(2) infinite;
  -webkit-text-stroke: 1px rgba(255,255,255,.12);
}
.loader__glitch span:nth-child(3){
  color: rgba(255,255,255,.35);
  opacity:.45;
  animation: glitch3 1.1s steps(2) infinite;
}

@keyframes shimmer{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
@keyframes glitch{
  0%,100%{ clip-path: inset(0 0 0 0); }
  10%{ clip-path: inset(0 0 70% 0); transform: translate(-2px, -1px); }
  22%{ clip-path: inset(40% 0 20% 0); transform: translate(2px, 1px); }
  36%{ clip-path: inset(70% 0 0 0); transform: translate(-3px, 1px); }
  52%{ clip-path: inset(10% 0 55% 0); transform: translate(2px, -1px); }
  70%{ clip-path: inset(55% 0 10% 0); transform: translate(-1px, 2px); }
}
@keyframes glitch2{
  0%,100%{ transform: translate(0,0); }
  25%{ transform: translate(2px,-1px); }
  50%{ transform: translate(-2px,1px); }
  75%{ transform: translate(1px,2px); }
}
@keyframes glitch3{
  0%,100%{ transform: translate(0,0); opacity:.35; }
  33%{ transform: translate(-3px,0); opacity:.55; }
  66%{ transform: translate(2px,1px); opacity:.40; }
}

/* progress line */
.loader__line{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-top: 6px;
}
.loader__bar{
  flex:1;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  overflow:hidden;
}
.loader__bar span{
  display:block;
  height:100%;
  width:100%;
  transform: scaleX(0);
  transform-origin:left;
  background: linear-gradient(90deg, rgba(255,255,255,.65), rgba(255,255,255,.18));
  border-radius: 999px;
  filter: brightness(1.15);
}
.loader__pct{
  min-width: 56px;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
  text-align:right;
}

/* sub row */
.loader__sub{
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(255,255,255,.55);
  font-size: 12px;
}
.dotpulse{ display:inline-flex; gap:6px; }
.dotpulse i{
  width:6px;height:6px;border-radius:999px;
  background: rgba(255,255,255,.78);
  opacity:.25;
  animation: dot 1s ease-in-out infinite;
}
.dotpulse i:nth-child(2){animation-delay:.18s}
.dotpulse i:nth-child(3){animation-delay:.36s}
@keyframes dot{
  0%,100%{opacity:.22; transform: translateY(0)}
  50%{opacity:.90; transform: translateY(-2px)}
}

/* ring + scanner overlay */
.loader__ring{
  position:absolute;
  left: 62%;
  top: 50%;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(closest-side, rgba(255,255,255,.06), transparent 68%),
    conic-gradient(from 0deg, rgba(255,255,255,.0), rgba(255,255,255,.28), rgba(255,255,255,.0));
  filter: blur(.2px);
  transform: translate(-50%, -50%);
  animation: ringSpin 1.6s linear infinite;
  opacity:.9;
  pointer-events:none;
}
@keyframes ringSpin{ to { transform: translate(-50%, -50%) rotate(360deg); } }

.loader__scanner{
  position:absolute;
  inset:-20%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  width: 45%;
  transform: skewX(-12deg) translateX(-140%);
  animation: scan 1.55s ease-in-out infinite;
  opacity:.65;
  mix-blend-mode: overlay;
}
@keyframes scan{
  0%{ transform: skewX(-12deg) translateX(-140%); opacity:0; }
  18%{ opacity:.65; }
  60%{ transform: skewX(-12deg) translateX(260%); opacity:.25; }
  100%{ transform: skewX(-12deg) translateX(260%); opacity:0; }
}

/* corners */
.loader__corners{
  position:absolute; inset:14px;
  pointer-events:none;
  z-index:3;
}
.loader__corners i{
  position:absolute; width:14px; height:14px;
  border: 2px solid rgba(255,255,255,.22);
  opacity:.65;
}
.loader__corners i:nth-child(1){ left:0; top:0; border-right:none; border-bottom:none; }
.loader__corners i:nth-child(2){ right:0; top:0; border-left:none; border-bottom:none; }
.loader__corners i:nth-child(3){ left:0; bottom:0; border-right:none; border-top:none; }
.loader__corners i:nth-child(4){ right:0; bottom:0; border-left:none; border-top:none; }

/* sparkfield */
.loader__sparkfield{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.spark{
  position:absolute;
  width: 2px;
  height: 22px;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.65), rgba(255,255,255,0));
  opacity:.35;
  transform: rotate(18deg);
  animation: spark 2.2s ease-in-out infinite;
  filter: blur(.2px);
}
@keyframes spark{
  0%{ opacity:0; transform: translateY(10px) rotate(18deg) scaleY(.8); }
  25%{ opacity:.35; }
  60%{ opacity:.10; transform: translateY(-18px) rotate(18deg) scaleY(1.1); }
  100%{ opacity:0; }
}

/* flash hit */
.loader--flash .loader__hud{
  outline: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 18px 120px rgba(0,0,0,.62), 0 0 0 6px rgba(255,255,255,.05);
}
.loader--out{
  animation: loaderOut .85s ease forwards;
}
@keyframes loaderOut{
  to { opacity:0; transform: scale(1.02); filter: blur(6px); pointer-events:none; }
}

/* ================= BACKGROUND ================= */
.bg{ position:fixed; inset:0; z-index:0; }
.bg__spotlight{
  position:absolute; inset:-20%;
  --x: 48vw; --y: 38vh;
  background:
    radial-gradient(420px 300px at var(--x) var(--y), rgba(255,255,255,.12), transparent 62%),
    radial-gradient(900px 520px at 50% 30%, rgba(255,255,255,.06), transparent 58%);
  filter: blur(1px);
  opacity:.95;
}
.bg__orbits{
  position:absolute; inset:-30%;
  background:
    radial-gradient(closest-side at 35% 45%, rgba(255,255,255,.06), transparent 62%),
    radial-gradient(closest-side at 65% 60%, rgba(255,255,255,.05), transparent 64%),
    radial-gradient(closest-side at 52% 28%, rgba(255,255,255,.04), transparent 66%);
  animation: drift 14s ease-in-out infinite alternate;
  opacity:.85;
}
@keyframes drift{
  0%{ transform: translate3d(-1.5%, -1%, 0) scale(1); }
  100%{ transform: translate3d(1.5%, 1%, 0) scale(1.02); }
}
.bg__grid{
  position:absolute; inset:-1px;
  background:
    linear-gradient(to right, var(--hair) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hair2) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity:.70;
  mask-image: radial-gradient(62% 46% at 50% 45%, black 0%, transparent 78%);
  animation: gridMove 18s linear infinite;
}
@keyframes gridMove{ to { background-position: 72px 72px, 0 72px; } }
.bg__scan{
  position:absolute; inset:-10%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  width: 45%;
  transform: skewX(-12deg) translateX(-120%);
  animation: bgscan 6.2s ease-in-out infinite;
  opacity:.55;
  mix-blend-mode: overlay;
}
@keyframes bgscan{
  0%{ transform: skewX(-12deg) translateX(-120%); opacity:0; }
  16%{ opacity:.55; }
  50%{ transform: skewX(-12deg) translateX(210%); opacity:.30; }
  100%{ transform: skewX(-12deg) translateX(210%); opacity:0; }
}
.bg__noise{
  position:absolute; inset:0;
  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='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  opacity:.07;
  mix-blend-mode:overlay;
  animation: noiseMove 1.1s steps(2) infinite;
}
@keyframes noiseMove{
  0%{ transform: translate3d(0,0,0) }
  100%{ transform: translate3d(-2%, 1.5%, 0) }
}
.bg__vignette{
  position:absolute; inset:0;
  background: radial-gradient(60% 55% at 50% 40%, transparent 0%, rgba(0,0,0,.78) 74%, rgba(0,0,0,.93) 100%);
  opacity:.98;
}

/* ================= PAGE ================= */
.page{
  position:relative;
  z-index:1;
  height:100vh;
  padding: clamp(18px, 3.4vw, 44px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* Topbar */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.pill{
  display:inline-flex; align-items:center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--glass2);
  color: rgba(244,246,251,.62);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  backdrop-filter: blur(10px);
  animation: shimmerSoft 6s ease-in-out infinite;
}
@keyframes shimmerSoft{ 0%,100%{ filter: brightness(1); } 50%{ filter: brightness(1.18); } }
.status{
  display:flex; align-items:center; gap:10px;
  color: rgba(244,246,251,.62);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.status__dot{
  width:8px; height:8px; border-radius:999px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 0 0 rgba(255,255,255,.40);
  animation: pulse 1.3s ease-in-out infinite;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,255,255,.38); opacity:.95}
  70%{ box-shadow: 0 0 0 10px rgba(255,255,255,0); opacity:.85}
  100%{ box-shadow: 0 0 0 0 rgba(255,255,255,0); opacity:.95}
}

/* Hero */
.hero{
  --rx: 0deg;
  --ry: 0deg;
  flex:1;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 3.2vw, 44px);
  align-items:center;
  max-width: 1280px;
  width:100%;
  margin: 0 auto;
  transform-style: preserve-3d;
  transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .18s ease;
}

.hero__left{
  display:flex;
  gap: clamp(16px, 3vw, 28px);
  align-items:center;
}
.mark{
  width: clamp(92px, 11vw, 128px);
  aspect-ratio: 1/1;
  border-radius: 24px;
  display:grid;
  place-items:center;
  border: 1px solid var(--border);
  background: var(--glass);
  box-shadow: 0 28px 110px rgba(0,0,0,.40);
  backdrop-filter: blur(10px);
  animation: float 6.8s ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform: translateY(6px) translateZ(30px); }
  50%{ transform: translateY(-10px) translateZ(30px); }
}
.mark img{
  width: 64%;
  height: 64%;
  object-fit: contain;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.35));
  animation: logoGlow 3.8s ease-in-out infinite;
}
@keyframes logoGlow{
  0%,100%{ opacity:1; }
  50%{ opacity:.92; }
}

.type{ display:grid; gap: 12px; }
.title{ margin:0; line-height: .92; letter-spacing: -0.03em; }

.title__primary{
  display:block;
  font-weight: 850;
  font-size: clamp(50px, 6.4vw, 90px);
  background: linear-gradient(90deg, rgba(255,255,255,.70), rgba(255,255,255,1), rgba(255,255,255,.70));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: titleIn 1s ease forwards, shimmer 4.8s ease-in-out infinite;
  animation-delay: 0.2s, 1.2s;
  opacity:0;
  transform: translateY(10px);
}
.title__secondary{
  display:block;
  font-weight: 600;
  font-size: clamp(22px, 3.0vw, 38px);
  color: rgba(244,246,251,.78);
  opacity:0;
  transform: translateY(10px);
  animation: titleIn 1s ease forwards;
  animation-delay: 0.35s;
}
@keyframes titleIn{ to { opacity:1; transform: translateY(0); } }

.sub{
  margin:0;
  color: rgba(244,246,251,.62);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size: 12px;
  opacity:0;
  transform: translateY(10px);
  animation: titleIn 1s ease forwards;
  animation-delay: 0.52s;
}

.actions{
  display:flex;
  align-items:center;
  gap: 14px;
  margin-top: 8px;
  opacity:0;
  transform: translateY(10px);
  animation: titleIn 1s ease forwards;
  animation-delay: 0.65s;
}
.chip{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--glass2);
  color: rgba(244,246,251,.72);
  font-size: 12px;
  backdrop-filter: blur(10px);
  position:relative;
  overflow:hidden;
}
.chip::after{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform: translateX(-140%);
  animation: chipSweep 5.6s ease-in-out infinite;
  opacity:.9;
}
@keyframes chipSweep{
  0%{ transform: translateX(-140%); opacity:0; }
  18%{ opacity:.9; }
  48%{ transform: translateX(140%); opacity:.35; }
  100%{ transform: translateX(140%); opacity:0; }
}
.chip > *{ position:relative; z-index:1; }
.line{
  height:1px; flex:1;
  background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  animation: lineBreath 4.8s ease-in-out infinite;
}
@keyframes lineBreath{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

.hero__right{ width:100%; display:grid; gap: 18px; align-items:end; }
.big{ position:relative; padding: 14px 0 0; }
.big__stroke{
  font-weight: 900;
  letter-spacing: -0.03em;
  font-size: clamp(56px, 6.4vw, 88px);
  color: transparent;
  -webkit-text-stroke: 1px rgba(244,246,251,.22);
  text-stroke: 1px rgba(244,246,251,.22);
  opacity:.95;
  animation: strokeFlicker 7.2s ease-in-out infinite;
}
@keyframes strokeFlicker{ 0%,100%{ opacity:.70; } 50%{ opacity:1; } 60%{ opacity:.82; } }
.big__fill{
  margin-top: 6px;
  font-weight: 750;
  letter-spacing: -0.02em;
  font-size: clamp(22px, 2.9vw, 38px);
  color: rgba(244,246,251,.86);
  position:relative;
}
.big__fill::after{
  content:"";
  position:absolute;
  left:-10%;
  top:0;
  width:35%;
  height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-14deg) translateX(-160%);
  animation: wordSweep 6.2s ease-in-out infinite;
  opacity:0;
}
@keyframes wordSweep{
  0%{ transform: skewX(-14deg) translateX(-160%); opacity:0; }
  14%{ opacity:.7; }
  44%{ transform: skewX(-14deg) translateX(360%); opacity:.25; }
  100%{ transform: skewX(-14deg) translateX(360%); opacity:0; }
}

.stack{
  display:grid; gap: 10px;
  padding: 16px 16px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  box-shadow: 0 28px 110px rgba(0,0,0,.33);
  position:relative; overflow:hidden;
  animation: cardFloat 8s ease-in-out infinite;
}
@keyframes cardFloat{
  0%,100%{ transform: translateY(0) translateZ(20px); }
  50%{ transform: translateY(-8px) translateZ(20px); }
}
.stack::after{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transform: translateX(-140%);
  animation: chipSweep 6.6s ease-in-out infinite;
  opacity:.6;
}
.metric{ display:grid; gap: 8px; position:relative; z-index:1; }
.metric__label{
  font-size: 11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(244,246,251,.58);
}
.metric__bar{
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  overflow:hidden;
}
.metric__bar span{
  display:block;
  height:100%;
  width: var(--w, 65%);
  background: linear-gradient(90deg, rgba(255,255,255,.58), rgba(255,255,255,.16));
  border-radius: 999px;
  transform-origin: left;
  animation: fill 3.8s ease-in-out infinite;
}
@keyframes fill{
  0%{ transform: scaleX(.92); filter: brightness(1); }
  50%{ transform: scaleX(1.02); filter: brightness(1.2); }
  100%{ transform: scaleX(.92); filter: brightness(1); }
}

.ticker{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  overflow:hidden;
  animation: tickerBreath 5.2s ease-in-out infinite;
}
@keyframes tickerBreath{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } }
.ticker__track{
  display:flex; gap: 42px;
  padding: 10px 0;
  white-space: nowrap;
  color: rgba(244,246,251,.44);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size: 10px;
  animation: marquee 16s linear infinite;
}
@keyframes marquee{ to { transform: translateX(-50%); } }

/* micro loader */
.widget{
  position:absolute;
  left: 52%;
  top: 52%;
  transform: translate(-50%, -50%);
  pointer-events:none;
  opacity:.95;
}
.widget__card{
  width: 160px;
  padding: 18px 16px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 90px rgba(0,0,0,.35);
  display:grid;
  gap: 8px;
  place-items:center;
  animation: widgetFloat 6.4s ease-in-out infinite;
}
@keyframes widgetFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }
.widget__ring{
  width: 42px; height: 42px; border-radius: 999px;
  border: 2px solid rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.82);
  animation: ringSpin2 1.05s linear infinite;
}
@keyframes ringSpin2{ to { transform: rotate(360deg); } }
.widget__label{
  font-size: 11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: rgba(255,255,255,.72);
}
.widget__dots{ display:flex; gap: 6px; transform: translateY(-2px); }
.widget__dots i{
  width:6px;height:6px;border-radius:999px;
  background: rgba(255,255,255,.70);
  opacity:.25; animation: dot 1s ease-in-out infinite;
}
.widget__dots i:nth-child(2){animation-delay:.18s}
.widget__dots i:nth-child(3){animation-delay:.36s}
.widget__sub{ margin-top: 2px; font-size: 11px; color: rgba(255,255,255,.52); }

/* Footer */
.foot{
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(244,246,251,.45);
  font-size: 11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  max-width: 1280px;
  width:100%;
  margin: 0 auto;
}
.sep{ opacity:.5 }

/* Responsive */
@media (max-width: 980px){
  body{ overflow:auto; }
  .page{ height:auto; min-height:100vh; gap: 26px; }
  .hero{ grid-template-columns: 1fr; align-items:start; padding-top: 10px; transform:none; }
  .widget{ position:relative; left:auto; top:auto; transform:none; margin-top: 14px; }
  .loader__hud{ grid-template-columns: 78px 1fr; }
  .loader__ring{ display:none; }
}
@media (max-width: 560px){
  .hero__left{ flex-direction:column; align-items:flex-start; }
  .mark{ width: 92px; border-radius: 20px; }
  .actions{ flex-direction: column; align-items:flex-start; }
  .line{ width: 70%; flex: none; }
  .foot{ flex-direction:column; align-items:flex-start; }
  .sep{ display:none }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  .hero{ transform:none !important; }
}


/* ===== Looping Loader Overrides (stays on screen) ===== */
.loader{
  pointer-events:none; /* don't block the page */
}
.loader__bg{
  opacity:.55;
}
.loader__hud{
  pointer-events:none;
  transform-origin:center;
  animation: hudFloat 3.4s ease-in-out infinite, hudBreath 4.2s ease-in-out infinite;
}
@keyframes hudBreath{
  0%,100%{ filter: brightness(1); }
  50%{ filter: brightness(1.15); }
}
.loader--reset .loader__hud{
  animation: hudFloat 3.4s ease-in-out infinite, hudBreath 4.2s ease-in-out infinite, resetPop .16s ease-in-out;
}
@keyframes resetPop{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.03); }
  100%{ transform: scale(1); }
}