/* Theme tokens + shared surface primitives.
   Mirrors what is live on reinersbot.space so the landing page and the
   dashboard read as one brand. */

:root{
  /* one reference pixel of the 1280×960 comp */
  --u: min(100vw / 1280, 100vh / 960);
  /* text/control scale — equals --u until the mobile tier floors it */
  --t: var(--u);

  --bg:#05040b; --bg-soft:#0b0b12;
  --ink:#f5f3ff; --muted:#9ca3af; --muted2:#6b7280;
  --brand:#7c3aed; --brand-dark:#6d28d9;
  --cyan:#22d3ee; --emerald:#34d399; --ice:#c4b5fd;
  --brand-glow: rgba(124,58,237,.45);
  --track:#1b1b27;

  --ease-expo: cubic-bezier(.16,1,.3,1);
}
@supports (height:100svh){:root{--u: min(100vw / 1280, 100svh / 960)}}

html,body{margin:0;height:100%}

body{background:var(--bg);overflow:hidden;color:var(--ink);
  font-family:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}

/* faint tech grid, fading in from the top */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(124,58,237,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,58,237,.05) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% -10%,black 35%,transparent 78%);
  mask-image:radial-gradient(ellipse 80% 55% at 50% -10%,black 35%,transparent 78%)}

/* slow-drifting aurora blobs */
body::after{content:'';position:fixed;inset:-25%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 38% at 18% 28%,rgba(124,58,237,.22),transparent 70%),
    radial-gradient(32% 32% at 82% 18%,rgba(56,232,192,.1),transparent 70%),
    radial-gradient(44% 44% at 62% 82%,rgba(124,58,237,.16),transparent 70%);
  filter:blur(42px);
  animation:aurora-drift 26s ease-in-out infinite alternate}
@keyframes aurora-drift{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(3%,-2.5%) scale(1.08)}
  100%{transform:translate(-3%,2%) scale(1.05)}}
@media (prefers-reduced-motion:reduce){ body::after{animation-duration:60s} }

/* glass surface */
.glass{background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 24px 60px -28px rgba(0,0,0,.85);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%)}

/* animated gradient ring */
.conic-ring{position:relative;padding:2px;overflow:hidden;isolation:isolate}
.conic-ring::before{content:'';position:absolute;inset:-50%;z-index:-1;
  background:conic-gradient(from 0deg,#7c3aed,#22d3ee,#34d399,#a78bfa,#7c3aed);
  animation:conic-spin 5s linear infinite}
@keyframes conic-spin{to{transform:rotate(360deg)}}

/* headline shimmer */
.text-shimmer{background:linear-gradient(110deg,#fff 30%,#c4b5fd 44%,#67e8f9 52%,#fff 66%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:text-shimmer 6s linear infinite}
@keyframes text-shimmer{from{background-position:150% 0}to{background-position:-150% 0}}

/* button shine sweep */
.btn-shine{position:relative;overflow:hidden}
.btn-shine::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s ease}
.btn-shine:hover::after{transform:translateX(120%)}