:root{
  --bg0: #f7f7fb;
  --bg1: #ffffff;
  --text: rgba(2,6,23,.92);
  --muted: rgba(2,6,23,.62);
  --stroke: rgba(2,6,23,.10);
  --card: rgba(255,255,255,.72);
  --card2: rgba(255,255,255,.55);
  --accentA: rgba(99,102,241,.55);
  --accentB: rgba(16,185,129,.45);
  --accentC: rgba(236,72,153,.40);
}

html.dark{
  --bg0: #070b14;
  --bg1: #0b1220;
  --text: rgba(255,255,255,.90);
  --muted: rgba(255,255,255,.62);
  --stroke: rgba(255,255,255,.12);
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.09);
  --accentA: rgba(99,102,241,.40);
  --accentB: rgba(16,185,129,.28);
  --accentC: rgba(236,72,153,.24);
}

body{
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui;
  color: var(--text);
  background:
    radial-gradient(900px 560px at 18% 12%, var(--accentA), transparent 60%),
    radial-gradient(820px 540px at 82% 18%, var(--accentB), transparent 58%),
    radial-gradient(900px 560px at 52% 92%, var(--accentC), transparent 62%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* subtle grain */
.grain:before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  opacity:.075;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* glass */
.glass{
  background: linear-gradient(180deg, var(--card), var(--card2));
  border: 1px solid var(--stroke);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* animated gradient line */
.glowline{
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.60), rgba(16,185,129,.55), rgba(236,72,153,.50), transparent);
  background-size: 200% 100%;
  animation: shift 6s linear infinite;
}
@keyframes shift { to { background-position: 200% 0; } }

/* scroll reveal */
.reveal{
  opacity: 0;
  transform: translateY(14px) scale(.99);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in{ opacity: 1; transform: translateY(0) scale(1); }

/* parallax-ish float */
.floaty{ animation: float 9s ease-in-out infinite; }
.floaty.b{ animation-duration: 12s; animation-delay: -2.2s; }
.floaty.c{ animation-duration: 14s; animation-delay: -4.1s; }
@keyframes float{
  0%,100%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(0,-14px,0); }
}

/* button shine */
.btn-shine{ position: relative; overflow: hidden; }
.btn-shine:after{
  content:"";
  position:absolute;
  top:-130%;
  left:-30%;
  width: 34%;
  height: 350%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.30), transparent);
  transition: left .9s ease;
  opacity:.9;
}
.btn-shine:hover:after{ left: 120%; }

/* form inputs */
.px-input{
  width: 100%;
  border-radius: 1rem;
  padding: 0.9rem 1rem;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(2,6,23,.10);
  outline: none;
}
html.dark .px-input{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
}
html.dark select.px-input{
  background-color: #0b1220;
  color: rgba(255,255,255,.92);
  color-scheme: dark;
}
html.dark select.px-input option{
  background-color: #0b1220;
  color: rgba(255,255,255,.92);
}
html.dark select.px-input option:checked{
  background-color: #1e293b;
  color: rgba(255,255,255,.96);
}
.px-input:focus{
  box-shadow: 0 0 0 4px rgba(99,102,241,.18);
  border-color: rgba(99,102,241,.45);
}
.px-help{
  color: var(--muted);
  font-size: 0.8rem;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .glowline, .floaty{ animation: none !important; }
  .reveal{ transition: none !important; }
  .btn-shine:after{ display:none; }
  html{ scroll-behavior: auto !important; }
}