:root{
  --bg:#070810;
  --panel:#0b1020;
  --panel2:#0a0f1a;

  --text:#eef0f5;
  --muted:#a6b0c2;

  /* Palette DNA */
  --violet:#a78bfa;
  --magenta:#fb7185;
  --cyan:#22d3ee;
  --amber:#fbbf24;
  --acid:#34d399;

  /* Primary UI accents */
  --accent: var(--violet);
  --accent2: var(--cyan);

  /* Neon edge gradients */
  --edgeA: rgba(167,139,250,.85);
  --edgeB: rgba(34,211,238,.75);
  --edgeC: rgba(251,191,36,.55);
  --edgeD: rgba(251,113,133,.55);

  --danger: var(--magenta);
  --ok: var(--acid);

  --shadow: 0 24px 90px rgba(0,0,0,.45);
  --glass: rgba(10,15,26,.58);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  background:
    radial-gradient(1100px 620px at 12% 8%, rgba(167,139,250,.18), transparent 60%),
    radial-gradient(900px 520px at 92% 18%, rgba(34,211,238,.14), transparent 62%),
    radial-gradient(850px 520px at 70% 92%, rgba(251,191,36,.10), transparent 62%),
    radial-gradient(760px 460px at 18% 88%, rgba(251,113,133,.10), transparent 64%),
    linear-gradient(180deg, rgba(7,8,16,1) 0%, rgba(5,6,12,1) 100%);
  color: var(--text);
}

a{color:var(--accent2);text-decoration:none;font-weight:800}

.hero{
  padding: 2.5rem 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(34,211,238,.18);
}
.heroInner{
  max-width:1100px;
  margin:0 auto;
}
.back{
  display:inline-block;
  max-width:1100px;
  margin:0 auto 1.25rem;
  color: rgba(166,176,194,.95);
  font-weight:800;
}
.badge{
  display:inline-flex;
  padding:.35rem .6rem;
  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(11,16,32,.60), rgba(9,12,22,.44)) padding-box,
    linear-gradient(135deg, rgba(34,211,238,.55), rgba(167,139,250,.50), rgba(251,191,36,.30)) border-box;
  border-radius:999px;
  color: var(--muted);
  font-weight:900;
  font-size:.8rem;
}

h1{
  margin:.75rem 0 .5rem;
  font-size: clamp(2rem, 3.8vw, 3rem);
  letter-spacing:-.02em;
  background: linear-gradient(90deg, rgba(251,191,36,.95), rgba(34,211,238,.95), rgba(167,139,250,.95));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.sub{
  margin:0;
  color: var(--muted);
  max-width: 820px;
  line-height:1.5;
}
.heroStats{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-top:1.25rem;
}
.stat{
  flex: 1;
  min-width: 190px;
  padding:.9rem 1rem;
  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(11,16,32,.62), rgba(9,12,22,.46)) padding-box,
    linear-gradient(135deg, rgba(34,211,238,.55), rgba(167,139,250,.45), rgba(251,191,36,.28)) border-box;
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.statTop{
  font-weight:1000;
  font-size:1.2rem;
  color: var(--accent);
}
.statText{
  margin-top:.2rem;
  color: var(--muted);
  font-weight:700;
}

.wrap{
  max-width:1100px;
  margin:0 auto;
  padding: 1.5rem 1.25rem 3rem;
  display:grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 1.25rem;
}
@media (max-width: 980px){
  .wrap{grid-template-columns:1fr}
}

.card{
  background: linear-gradient(180deg, rgba(11,16,32,.82), rgba(9,12,22,.58));
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(11,16,32,.82), rgba(9,12,22,.58)) padding-box,
    linear-gradient(135deg, var(--edgeA), var(--edgeB), var(--edgeC), var(--edgeD)) border-box;
  border-radius: 16px;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.cardHead{
  padding: 1.25rem 1.25rem 0;
}
.cardHead h2{
  margin:0;
  font-size:1.2rem;
}
.muted{color:var(--muted)}
.card form{
  padding: 1.25rem;
}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1rem;
}
@media (max-width: 720px){
  .grid2{grid-template-columns:1fr}
}

.field{margin-bottom:1rem}
label{
  display:block;
  font-weight:900;
  margin:0 0 .4rem;
}
.req{color:var(--danger)}
input,select,textarea{
  width:100%;
  padding:.88rem .98rem;
  border-radius: 12px;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(16,22,38,.92), rgba(10,14,26,.86)) padding-box,
    linear-gradient(135deg, rgba(34,211,238,.60), rgba(167,139,250,.52), rgba(251,191,36,.28), rgba(251,113,133,.30)) border-box;
  color: var(--text);
  outline:none;
  box-shadow: 0 10px 32px rgba(0,0,0,.28);
}

textarea{min-height: 120px; resize: vertical}
input:focus,select:focus,textarea:focus{
  border-color: transparent;
  box-shadow:
    0 0 0 4px rgba(34,211,238,.14),
    0 0 0 7px rgba(167,139,250,.10),
    0 18px 70px rgba(0,0,0,.35);
  background:
    linear-gradient(180deg, rgba(20,28,52,.92), rgba(10,14,26,.84)) padding-box,
    linear-gradient(135deg, rgba(251,191,36,.60), rgba(34,211,238,.60), rgba(167,139,250,.60), rgba(251,113,133,.45)) border-box;
}

.hint{
  margin-top:.35rem;
  font-size:.85rem;
  color: var(--muted);
}

.agreement{
  display:flex;
  gap:.7rem;
  align-items:flex-start;
  margin: 1rem 0 .5rem;
  padding: .85rem 1rem;
  border-radius: 14px;
  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(11,16,32,.56), rgba(9,12,22,.42)) padding-box,
    linear-gradient(135deg, rgba(251,191,36,.45), rgba(34,211,238,.40), rgba(167,139,250,.40)) border-box;
}
.agreement input{width:auto;margin-top:.25rem}

.actions{
  margin-top:1rem;
  display:flex;
  gap:1rem;
  align-items:center;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.95rem 1.08rem;
  border-radius: 14px;
  border:1px solid transparent;
  background:
    linear-gradient(90deg, rgba(167,139,250,1), rgba(34,211,238,.95), rgba(251,191,36,.85)) padding-box,
    linear-gradient(135deg, rgba(251,113,133,.55), rgba(34,211,238,.55), rgba(167,139,250,.55)) border-box;
  color: #070810;
  font-weight:1000;
  cursor:pointer;
}

.btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}
.btnIcon{font-size:1.1rem}
.fine{
  color: var(--muted);
  font-size:.85rem;
  max-width: 520px;
}

.statusBox{
  margin-top:1rem;
  display:none;
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(11,16,32,.62), rgba(9,12,22,.46)) padding-box,
    linear-gradient(135deg, rgba(34,211,238,.45), rgba(167,139,250,.40), rgba(251,191,36,.25)) border-box;
}
.statusBox.show{display:block}
.statusBox.ok{border-color: rgba(52,211,153,.35)}
.statusBox.bad{border-color: rgba(251,113,133,.35)}

.side .panel{
  position: sticky;
  top: 1rem;
  background:
    linear-gradient(180deg, rgba(11,16,32,.74), rgba(9,12,22,.52)) padding-box,
    linear-gradient(135deg, rgba(167,139,250,.55), rgba(34,211,238,.45), rgba(251,191,36,.32)) border-box;
  border:1px solid transparent;
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: var(--shadow);
}
.side h3{margin:0 0 .6rem}
.meter{margin:1rem 0}
.meterRow{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}
.pill{
  padding:.35rem .6rem;
  border-radius: 999px;
  border:1px solid var(--border);
  background: rgba(15,21,32,.6);
  color: var(--muted);
  font-weight:900;
  font-size:.8rem;
}
.pill.active{
  color:#070810;
  border:1px solid transparent;
  background:
    linear-gradient(90deg, rgba(251,191,36,.95), rgba(34,211,238,.92), rgba(167,139,250,.92)) padding-box,
    linear-gradient(135deg, rgba(167,139,250,.60), rgba(34,211,238,.55), rgba(251,191,36,.35)) border-box;
}

.faq details{
  border-top:1px solid rgba(30,38,51,.6);
  padding:.8rem 0;
}
.faq summary{
  cursor:pointer;
  font-weight:900;
}
.faq p{margin:.5rem 0 0;line-height:1.5}

.boardLink{
  display:block;
  margin-top:1rem;
  padding:.9rem 1rem;
  border-radius: 14px;
  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(11,16,32,.40), rgba(9,12,22,.28)) padding-box,
    linear-gradient(135deg, rgba(167,139,250,.60), rgba(34,211,238,.55), rgba(251,191,36,.35)) border-box;
  color: var(--text);
  font-weight:1000;
  text-align:center;
}

.hp{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden}

.footer{
  padding: 2.5rem 1.25rem;
  text-align:center;
  color: var(--muted);
  border-top:1px solid rgba(30,38,51,.6);
}


/* Subtle lab grid */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to right, rgba(34,211,238,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(167,139,250,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity:.12;
  mix-blend-mode: screen;
  mask-image: radial-gradient(600px 420px at 50% 35%, rgba(0,0,0,.9), transparent 70%);
  z-index:0;
}

/* ===== FX: incubator universe ===== */
body::before{
  content:"";
  position:fixed;
  inset:-120px;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 20% 20%, rgba(34,211,238,.06), transparent 60%),
    radial-gradient(900px 540px at 80% 30%, rgba(167,139,250,.05), transparent 65%),
    radial-gradient(700px 420px at 55% 85%, rgba(251,191,36,.035), transparent 65%);
  filter: blur(0px);
  opacity:1;
  animation: auraDrift 14s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

@keyframes auraDrift{
  0%{transform: translate3d(0,0,0) scale(1)}
  100%{transform: translate3d(22px,-12px,0) scale(1.02)}
}

.fxLayer{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.fxParticle{
  position:absolute;
  left:var(--x);
  top:var(--y);
  font-size:var(--s);
  opacity:var(--o);
  filter: blur(var(--b));
  transform: translate(-50%,-50%);
  animation: floaty var(--d) ease-in-out infinite alternate;
  will-change: transform,opacity;
  text-shadow:
    0 0 16px rgba(34,211,238,.25),
    0 0 28px rgba(167,139,250,.22),
    0 0 38px rgba(251,191,36,.12),
    0 0 46px rgba(251,113,133,.10);
}
@keyframes floaty{
  0%{transform: translate(calc(-50% - var(--dx)), calc(-50% - var(--dy)))}
  100%{transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))}
}

/* Keep real content above FX */
.hero,.wrap,.footer{position:relative;z-index:1}

/* Button: reaction + shimmer */
.btn{
  position:relative;
  overflow:hidden;
  box-shadow: var(--glow);
  transition: transform .12s ease, filter .12s ease;
}
.btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(110deg,
    rgba(11,15,20,0) 0%,
    rgba(167,139,250,.25) 28%,
    rgba(34,211,238,.22) 50%,
    rgba(251,191,36,.16) 70%,
    rgba(11,15,20,0) 100%);
  transform: translateX(-120%);
  opacity:.75;
}
.btn:hover::before{animation: shimmer 1.25s ease-in-out infinite}
@keyframes shimmer{
  0%{transform: translateX(-120%)}
  100%{transform: translateX(120%)}
}
.btn:active{transform: scale(.985)}
.btn.reacting{
  animation: reactPop .55s ease-out 1;
  filter: saturate(1.15) brightness(1.05);
}
@keyframes reactPop{
  0%{transform: scale(.98)}
  35%{transform: scale(1.03)}
  100%{transform: scale(1)}
}
.btn.loading{
  cursor:progress;
}
.btn.loading .btnIcon{animation: spinny 1.1s linear infinite}
@keyframes spinny{
  0%{transform: rotate(0deg)}
  100%{transform: rotate(360deg)}
}
.btn.success{
  background: var(--ok);
  box-shadow: 0 0 24px rgba(52,211,153,.25), 0 0 64px rgba(52,211,153,.10);
}
.btn.fail{
  background: var(--danger);
  box-shadow: 0 0 24px rgba(251,113,133,.25), 0 0 64px rgba(251,113,133,.10);
}

/* StatusBox reveal */
.statusBox.show{
  animation: statusIn .32s ease-out 1;
}
@keyframes statusIn{
  from{transform: translateY(10px); opacity:0}
  to{transform: translateY(0); opacity:1}
}

/* Meter pulse when submission succeeds */
.pill.pulse{
  animation: pillPulse .9s ease-out 1;
}
@keyframes pillPulse{
  0%{transform: scale(1); box-shadow:none}
  35%{transform: scale(1.06); box-shadow: 0 0 0 6px rgba(52,211,153,.10)}
  100%{transform: scale(1); box-shadow:none}
}

/* Board link: portal-ish ripple */
.boardLink{
  position:relative;
  overflow:hidden;
  box-shadow: 0 0 0 0 rgba(125,211,252,.0);
  transition: transform .12s ease, box-shadow .2s ease;
}
.boardLink:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(34,211,238,.30), 0 0 0 6px rgba(167,139,250,.08);
}
.ripple{
  position:fixed;
  width:12px;
  height:12px;
  border-radius:999px;
  pointer-events:none;
  z-index:9999;
  border: 2px solid rgba(34,211,238,.55);
  box-shadow: 0 0 0 2px rgba(167,139,250,.18);
  transform: translate(-50%,-50%) scale(1);
  animation: rippleOut .55s ease-out 1 forwards;
}
@keyframes rippleOut{
  0%{opacity:.95; transform: translate(-50%,-50%) scale(1)}
  100%{opacity:0; transform: translate(-50%,-50%) scale(46)}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  body::before,.fxParticle,.btn::before,.btn.loading .btnIcon{animation:none !important}
}

/* ===== Neon edge treatment ===== */
.neonEdge{
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(11,16,32,.78), rgba(9,12,22,.55)) padding-box,
    linear-gradient(135deg, var(--edgeA), var(--edgeB), var(--edgeC), var(--edgeD)) border-box;
  box-shadow: var(--shadow);
}
.neonEdgeSoft{
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(11,16,32,.64), rgba(9,12,22,.46)) padding-box,
    linear-gradient(135deg, rgba(167,139,250,.55), rgba(34,211,238,.45), rgba(251,191,36,.30)) border-box;
}

/* Stat color variety */
.heroStats .stat:nth-child(1) .statTop{color: var(--amber)}
.heroStats .stat:nth-child(2) .statTop{color: var(--cyan)}
.heroStats .stat:nth-child(3) .statTop{color: var(--violet)}

/* Animated edge shimmer (very subtle) */
.card,.side .panel,.stat{
  position:relative;
}
.card::before,.side .panel::before,.stat::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(120deg,
    rgba(167,139,250,.18),
    rgba(34,211,238,.16),
    rgba(251,191,36,.10),
    rgba(251,113,133,.08));
  filter: blur(14px);
  opacity:.45;
  animation: edgeBreath 9s ease-in-out infinite alternate;
  z-index:-1;
}
@keyframes edgeBreath{
  0%{transform: translate3d(0,0,0) scale(1)}
  100%{transform: translate3d(12px,-10px,0) scale(1.02)}
}
@media (prefers-reduced-motion: reduce){
  .card::before,.side .panel::before,.stat::before{animation:none !important}
}
select {
  color: #ffffff;
  background-color: #0f172a;
}

select option {
  background: #0f172a;
  color: #ffffff;
}