:root{
  --bg:#070a12;
  --panel:rgba(18,24,40,.62);
  --panel2:rgba(18,24,40,.42);
  --stroke:rgba(255,255,255,.10);
  --stroke2:rgba(255,255,255,.14);
  --text:#e9eefc;
  --muted:rgba(233,238,252,.70);
  --muted2:rgba(233,238,252,.55);

  /* Wider palette */
  --accent:#6ad7ff;
  --accent2:#a78bfa;
  --accent3:#ff5bd6;
  --accent4:#fbbf24;
  --accent5:#2ee59d;
  --accent6:#a3ff4f;

  --good:#2ee59d;
  --warn:#fbbf24;
  --bad:#ff5c7a;

  --shadow:0 18px 40px rgba(0,0,0,.45);
  --radius:18px;

  --glass:rgba(255,255,255,.06);
  --glass2:rgba(255,255,255,.04);

  /* Footer gold */
  --gold:#f7d57a;
  --gold2:#d6a74b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;

  /* colorful but controlled */
  background:
    radial-gradient(1100px 780px at 40% -20%, rgba(106,215,255,.14), transparent 60%),
    radial-gradient(900px 720px at 100% 0%, rgba(167,139,250,.13), transparent 55%),
    radial-gradient(900px 720px at 0% 10%, rgba(255,91,214,.10), transparent 55%),
    radial-gradient(900px 820px at 20% 90%, rgba(251,191,36,.09), transparent 60%),
    radial-gradient(1000px 820px at 90% 90%, rgba(163,255,79,.07), transparent 60%),
    var(--bg);

  color:var(--text);
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
button,input{font:inherit}

/* ===== Ambient layers ===== */
#bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-3;
  display:block;
}

.overlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
}

.overlay-scan{
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.03),
    rgba(255,255,255,.03) 1px,
    transparent 2px,
    transparent 6px
  );
  /* Mobile Safari/Chrome can render blend-modes with visible horizontal seams.
     Keep this layer simple and consistent. */
  opacity:.08;
  mix-blend-mode:normal;
}

.overlay-grain{
  /* Avoid soft-light blend seams on some GPUs */
  opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:normal;
}

/* ===== Hero ===== */
.hero{padding:54px 18px 18px}

.hero-inner{
  max-width:920px;
  margin:0 auto;
  position:relative;
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(18,24,40,.58), rgba(18,24,40,.30));
  border-radius:24px;
  padding:30px 18px 22px; /* slightly more breathing room */
  box-shadow:var(--shadow);
  overflow:hidden;
}

.hero-inner::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(700px 260px at 35% 0%, rgba(106,215,255,.18), transparent 55%),
    radial-gradient(540px 300px at 100% 40%, rgba(167,139,250,.14), transparent 60%),
    radial-gradient(520px 320px at 0% 55%, rgba(255,91,214,.10), transparent 62%),
    radial-gradient(520px 320px at 20% 100%, rgba(251,191,36,.08), transparent 62%);
  filter:blur(12px);
  z-index:0;
}

/* Stack: logo then text, centered */
.hero-stack{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

/* ===== Liquid logo orb ===== */
.logo-orb{
  position:relative;
  width:208px;
  height:208px;
  border-radius:999px;
  overflow:hidden;

  border:1px solid rgba(255,255,255,.18);
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), rgba(255,255,255,.03));
  box-shadow:
    0 18px 40px rgba(0,0,0,.45),
    0 0 24px rgba(106,215,255,.14),
    0 0 22px rgba(255,91,214,.10),
    0 0 18px rgba(251,191,36,.10);
}

/* Liquid layer (moving gradient blob) */
.logo-orb::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    conic-gradient(
      from 90deg,
      rgba(106,215,255,.35),
      rgba(167,139,250,.28),
      rgba(255,91,214,.22),
      rgba(251,191,36,.18),
      rgba(163,255,79,.14),
      rgba(106,215,255,.35)
    );
  filter:blur(18px);
  opacity:.85;
  animation:liquidSpin 7.5s linear infinite;
  mix-blend-mode:screen;
}

/* second “current” to feel like flowing liquid */
.logo-orb::after{
  content:"";
  position:absolute;
  inset:-35%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(106,215,255,.14), transparent 55%),
    radial-gradient(circle at 40% 80%, rgba(255,91,214,.12), transparent 55%),
    radial-gradient(circle at 80% 20%, rgba(251,191,36,.10), transparent 55%);
  filter:blur(14px);
  opacity:.55;
  animation:liquidFloat 5.6s ease-in-out infinite alternate;
}

@keyframes liquidSpin{
  to{transform:rotate(360deg)}
}
@keyframes liquidFloat{
  0%{transform:translate(-6%, -2%) scale(1.03)}
  100%{transform:translate(6%, 3%) scale(1.08)}
}

/* Force logo image into perfect circle */
.logo{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  border-radius:999px;     /* force circle */
  /* Avoid cropping: keep the entire circular mark visible */
  object-fit:contain;
  object-position:center;
  display:block;
  /* give it breathing room without shaving edges */
  padding:10px;
  background:rgba(0,0,0,.10);
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

/* ===== Brand text ===== */
.brand{
  text-align:center;
  max-width:720px;
}

h1{
  margin:0 0 10px;
  font-size:40px;
  letter-spacing:.2px;
  text-shadow:0 10px 28px rgba(0,0,0,.45);
}

.sub{
  margin:0 auto 18px;
  max-width:640px;
  color:var(--muted);
  line-height:1.35;
}

.emoji{filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}

.cta-row{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin:14px 0 18px;
}

.btn{
  border:1px solid var(--stroke2);
  background:var(--glass);
  color:var(--text);
  padding:12px 16px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
  box-shadow:0 12px 26px rgba(0,0,0,.25);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}

.btn.primary{
  border-color:rgba(106,215,255,.35);
  background:linear-gradient(90deg,
    rgba(106,215,255,.20),
    rgba(167,139,250,.16),
    rgba(255,91,214,.12),
    rgba(251,191,36,.08)
  );
  box-shadow:0 18px 36px rgba(106,215,255,.10), 0 18px 36px rgba(167,139,250,.08);
}
.btn.ghost{background:var(--glass2)}

.ticker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 12px;
  border-radius:16px;
  background:linear-gradient(90deg, rgba(251,191,36,.14), rgba(255,92,122,.10), rgba(255,91,214,.09));
  border:1px solid rgba(251,191,36,.18);
  box-shadow:0 14px 30px rgba(0,0,0,.28);
  overflow:hidden;
  position:relative;
}
.ticker::after{
  content:"";
  position:absolute;
  inset:-40px;
  background:radial-gradient(circle at 10% 50%, rgba(255,255,255,.16), transparent 45%);
  transform:translateX(-30%);
  animation:sweep 6.2s linear infinite;
  opacity:.42;
}
@keyframes sweep{
  0%{transform:translateX(-35%)}
  100%{transform:translateX(35%)}
}
.warn{filter:drop-shadow(0 10px 22px rgba(251,191,36,.25))}
.sep{opacity:.55}
.muted{color:var(--muted2)}

/* ===== Main layout ===== */
.wrap{max-width:920px;margin:0 auto;padding:14px 18px 64px}

.controls{
  margin-top:14px;
  border:1px solid var(--stroke);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(18,24,40,.50), rgba(18,24,40,.32));
  box-shadow:var(--shadow);
  padding:14px;
}

.search{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  padding:12px 12px;
  border-radius:16px;
  transition:border-color .14s ease, background .14s ease;
}
.search:focus-within{
  border-color:rgba(255,91,214,.22);
  background:rgba(255,255,255,.07);
}
.search .icon{opacity:.8}
.search input{
  width:100%;
  background:transparent;
  border:none;
  outline:none;
  color:var(--text);
}
.search input::placeholder{color:rgba(233,238,252,.48)}

.clear{
  border:none;
  background:rgba(255,255,255,.08);
  color:rgba(233,238,252,.70);
  width:32px;height:32px;
  border-radius:10px;
  cursor:pointer;
  transition:transform .14s ease, background .14s ease;
}
.clear:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}
.clear:active{transform:translateY(1px)}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 8px}
.chip{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:rgba(233,238,252,.82);
  cursor:pointer;
  transition:transform .14s ease, background .14s ease, border-color .14s ease;
  user-select:none;
}
.chip:hover{transform:translateY(-1px);background:rgba(255,255,255,.07)}
.chip.active{
  border-color:rgba(251,191,36,.22);
  background:linear-gradient(90deg,
    rgba(106,215,255,.14),
    rgba(167,139,250,.12),
    rgba(255,91,214,.10),
    rgba(251,191,36,.09),
    rgba(163,255,79,.06)
  );
}

.meta{display:flex;align-items:center;gap:10px;color:var(--muted2);font-size:13px;padding:4px 2px 0}
.dot{
  width:6px;height:6px;border-radius:99px;
  background:rgba(251,191,36,.55);
  box-shadow:0 0 18px rgba(251,191,36,.32);
  animation:blink 2.1s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:.45}50%{opacity:1}}

.grid{margin-top:14px;display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:14px}
@media (max-width:740px){
  h1{font-size:36px}
  .grid{grid-template-columns:1fr}
}

/* Cards */
.card{
  position:relative;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(18,24,40,.62), rgba(18,24,40,.36));
  box-shadow:var(--shadow);
  overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  will-change:transform;
}
.card:hover{
  border-color:rgba(255,91,214,.16);
  box-shadow:0 22px 52px rgba(0,0,0,.55);
}
.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(420px 230px at var(--mx,50%) var(--my,30%), rgba(106,215,255,.16), transparent 55%),
    radial-gradient(520px 260px at 80% 80%, rgba(255,91,214,.10), transparent 60%),
    radial-gradient(520px 260px at 20% 90%, rgba(251,191,36,.08), transparent 60%);
  opacity:0;
  transition:opacity .18s ease;
}
.card:hover::before{opacity:1}

.card-inner{position:relative;padding:16px 16px 14px}
.kicker{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.cat{font-size:12px;letter-spacing:.2px;color:rgba(233,238,252,.75);opacity:.95}

.statusWrap{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  line-height:1;
}
.status{
  font-size:11px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.status::before{
  content:"";
  width:7px;height:7px;border-radius:99px;
  background:rgba(233,238,252,.55);
  box-shadow:0 0 16px rgba(233,238,252,.35);
}
.version{
  font-size:10px;
  letter-spacing:.2px;
  color:rgba(233,238,252,.70);
  opacity:.9;
  padding:0 2px;
}
.status[data-status="live"]{border-color:rgba(46,229,157,.25);background:rgba(46,229,157,.08)}
.status[data-status="live"]::before{background:var(--good);box-shadow:0 0 18px rgba(46,229,157,.55);animation:pulse 1.6s ease-in-out infinite}
.status[data-status="wip"]{border-color:rgba(251,191,36,.25);background:rgba(251,191,36,.08)}
.status[data-status="wip"]::before{background:var(--warn);box-shadow:0 0 18px rgba(251,191,36,.40);animation:pulse 2.1s ease-in-out infinite}
.status[data-status="beta"]{border-color:rgba(106,215,255,.25);background:rgba(106,215,255,.08)}
.status[data-status="beta"]::before{background:var(--accent);box-shadow:0 0 18px rgba(106,215,255,.45);animation:pulse 1.9s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.25);opacity:1}}

.title{margin:0 0 8px;font-size:20px}
.desc{margin:0 0 14px;color:var(--muted);line-height:1.35}

.actions{display:flex;gap:10px;align-items:center;justify-content:flex-start}
.action{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(233,238,252,.90);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:transform .14s ease, background .14s ease, opacity .14s ease, border-color .14s ease;
}
.action:hover{transform:translateY(-1px);background:rgba(255,255,255,.09)}
.action:active{transform:translateY(1px)}
.action.disabled{opacity:.45;cursor:not-allowed}
.action.link{
  background:linear-gradient(90deg, rgba(106,215,255,.14), rgba(167,139,250,.12), rgba(255,91,214,.10), rgba(251,191,36,.08));
  border-color:rgba(251,191,36,.18);
}
.action.link:hover{border-color:rgba(251,191,36,.28)}

/* Footer + gold socials */
.footer{margin-top:30px;padding:18px 18px 30px;color:rgba(233,238,252,.60)}
.footer-inner{
  max-width:920px;
  margin:0 auto;
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}
.footer-link{
  color:rgba(233,238,252,.78);
  text-decoration:underline;
  text-decoration-color:rgba(106,215,255,.30);
  text-underline-offset:4px;
}

.socials{display:flex;gap:10px;align-items:center}
.social{
  width:34px;height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid rgba(247,213,122,.22);
  background:linear-gradient(180deg, rgba(247,213,122,.10), rgba(214,167,75,.06));
  box-shadow:0 12px 26px rgba(0,0,0,.28);
  transition:transform .14s ease, border-color .14s ease, background .14s ease;
  color:var(--gold);
}
.social:hover{
  transform:translateY(-1px);
  border-color:rgba(247,213,122,.35);
  background:linear-gradient(180deg, rgba(247,213,122,.14), rgba(214,167,75,.08));
}
.social:active{transform:translateY(1px)}
.social svg{width:18px;height:18px;fill:currentColor;opacity:.95}

/* ===== Reactor: centered + "neon liquid" ===== */
.reactor-wrap{
  position:relative;
  width:188px;
  height:188px;
  display:grid;
  place-items:center;
  margin-top:2px;
}

/* Reactor sits BEHIND the logo */
.reactor{
  position:absolute;
  inset:0;
  border-radius:999px;
  pointer-events:none;
  opacity:.92;
  filter:drop-shadow(0 18px 50px rgba(0,0,0,.50));
}

/* Donut-shaped liquid (masked) */
.reactor-liquid{
  position:absolute;
  inset:-22%;
  border-radius:999px;

  /* layered "fluid" colors */
  background:
    radial-gradient(circle at 30% 25%, rgba(106,215,255,.55), transparent 55%),
    radial-gradient(circle at 75% 35%, rgba(167,139,250,.45), transparent 58%),
    radial-gradient(circle at 55% 75%, rgba(255,91,214,.35), transparent 62%),
    radial-gradient(circle at 25% 78%, rgba(251,191,36,.28), transparent 62%),
    conic-gradient(from 210deg,
      rgba(106,215,255,.28),
      rgba(167,139,250,.22),
      rgba(255,91,214,.18),
      rgba(251,191,36,.16),
      rgba(46,229,157,.14),
      rgba(106,215,255,.28)
    );

  /* blur + contrast gives it "liquid neon" vibes */
  filter:blur(14px) contrast(1.25) saturate(1.15);
  mix-blend-mode:screen;

  /* donut mask */
  -webkit-mask:
    radial-gradient(circle,
      transparent 0 54px,
      #000 58px 86px,
      transparent 90px
    );
  mask:
    radial-gradient(circle,
      transparent 0 54px,
      #000 58px 86px,
      transparent 90px
    );

  animation:reactorFlow 6.8s ease-in-out infinite alternate;
}

@keyframes reactorFlow{
  0%{
    transform:translate(-2%, -2%) rotate(0deg) scale(1.02);
    filter:blur(14px) contrast(1.18) saturate(1.12);
  }
  50%{
    transform:translate(2.5%, -1.5%) rotate(120deg) scale(1.06);
    filter:blur(16px) contrast(1.28) saturate(1.18);
  }
  100%{
    transform:translate(-1.5%, 2.2%) rotate(260deg) scale(1.08);
    filter:blur(15px) contrast(1.34) saturate(1.22);
  }
}

/* Outer glossy ring */
.reactor::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), transparent 55%),
    conic-gradient(from 90deg,
      rgba(106,215,255,.22),
      rgba(167,139,250,.18),
      rgba(255,91,214,.14),
      rgba(251,191,36,.12),
      rgba(46,229,157,.10),
      rgba(106,215,255,.22)
    );
  -webkit-mask:radial-gradient(circle, transparent 0 80px, #000 82px 88px, transparent 90px);
  mask:radial-gradient(circle, transparent 0 80px, #000 82px 88px, transparent 90px);
  filter:blur(.2px);
  opacity:.85;
  animation:ringSpin 12.5s linear infinite;
}

@keyframes ringSpin{
  to{transform:rotate(360deg)}
}

/* Inner rings (subtle, dynamic) */
.reactor-ring{
  position:absolute;
  inset:18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  -webkit-mask:radial-gradient(circle, transparent 0 62px, #000 64px 66px, transparent 68px);
  mask:radial-gradient(circle, transparent 0 62px, #000 64px 66px, transparent 68px);
  background:conic-gradient(from 180deg,
    rgba(106,215,255,.10),
    rgba(167,139,250,.08),
    rgba(255,91,214,.07),
    rgba(251,191,36,.06),
    rgba(46,229,157,.06),
    rgba(106,215,255,.10)
  );
  opacity:.85;
  filter:blur(.35px);
  animation:ringWobble 7.4s ease-in-out infinite;
}

.ring-b{
  inset:30px;
  opacity:.68;
  animation-duration:9.2s;
  animation-direction:alternate-reverse;
}
.ring-c{
  inset:44px;
  opacity:.55;
  animation-duration:11.8s;
}

@keyframes ringWobble{
  0%{transform:rotate(-8deg) scale(1.00)}
  50%{transform:rotate(10deg) scale(1.02)}
  100%{transform:rotate(-14deg) scale(1.01)}
}

/* Sparks orbiting around the donut */
.reactor-spark{
  position:absolute;
  top:50%;
  left:50%;
  width:10px;
  height:10px;
  border-radius:99px;
  transform:translate(-50%,-50%);
  background:rgba(255,255,255,.65);
  box-shadow:0 0 26px rgba(106,215,255,.55);
  animation:orbit 5.6s ease-in-out infinite;
  opacity:.92;
}
.sp2{animation-duration:7.1s;box-shadow:0 0 26px rgba(251,191,36,.40);width:8px;height:8px}
.sp3{animation-duration:8.0s;box-shadow:0 0 26px rgba(255,91,214,.40);width:7px;height:7px}
@keyframes orbit{
  0%{transform:translate(-50%,-50%) translateX(76px) translateY(-10px)}
  50%{transform:translate(-50%,-50%) translateX(-76px) translateY(14px)}
  100%{transform:translate(-50%,-50%) translateX(76px) translateY(-10px)}
}

/* Place the logo perfectly centered INSIDE the reactor */
.reactor-wrap .logo-orb{
  width:168px;
  height:168px;
  margin:0;               /* reactor-wrap handles spacing */
}

/* Responsive sizing */
@media (max-width:740px){
  .reactor-wrap{width:176px;height:176px}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important}
  .ticker::after{display:none}
  .dot{animation:none}
  .reactor-liquid,.reactor-ring,.reactor::before,.reactor-spark,.logo-orb::before,.logo-orb::after{animation:none}
}