/* Theme variables — Blue/Teal; reversed logo usage by design */
:root{
  --brand-primary:#102136; --brand-secondary:#4b5b7c;
  --accent-blue:#3aa0f0; --accent-teal:#1ac8c4;
  --bg:#f7f9fc; --surface:#ffffff;
  --text-strong:#0d1220; --text:#1f2a3a; --text-muted:#5c6a82;
  --link:var(--accent-blue); --link-hover:#0b5bd3;
  --glass-bg:255,255,255; --border:rgba(0,0,0,.08);
  --radius-xl:18px; --radius-lg:12px; --radius-md:10px;
  --shadow-lg:0 12px 38px rgba(16,33,54,.20), inset 0 1px 0 rgba(255,255,255,.45);
  --shadow-sm:0 6px 20px rgba(16,33,54,.16);
}
@media(prefers-color-scheme:dark){:root{--bg:linear-gradient(180deg,#0c1220 0%,#0e1628 100%);--surface:rgba(255,255,255,.08);--text-strong:#eef1f6;--text:#e8ecf2;--text-muted:#b7c0d0;--link:#9bd2ff;--link-hover:#dff0ff;--border:rgba(255,255,255,.12);--shadow-lg:0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);--shadow-sm:0 6px 20px rgba(0,0,0,.18)}}
body{background:var(--bg);color:var(--text)}

/* Clean gradient background - Light/Dark Mode responsive */
.bg-anim{position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(135deg, #f7f9fc 0%, #eef3fa 50%, #f9fafb 100%);filter:none}
.bg-anim .layer{display:none}
.bg-anim .l1{display:none}
.bg-anim .l2{display:none}
@media(prefers-color-scheme:dark){.bg-anim{background:linear-gradient(135deg, #0c1220 0%, #0e1628 100%)}}

/* Hero dynamic background variables */
:root{
  --hero-pos-x: 50%;
  --hero-pos-y: 50%;
}

/* Use CSS variables to position radial gradients; JS will update these on mousemove */
#intro{
  --_hx: var(--hero-pos-x);
  --_hy: var(--hero-pos-y);
  background-image: radial-gradient(600px circle at var(--_hx) var(--_hy), rgba(26,200,196,0.12), transparent 30%), radial-gradient(500px circle at calc(var(--_hx) + 20%) calc(var(--_hy) - 10%), rgba(58,160,240,0.10), transparent 30%);
  background-repeat: no-repeat;
  background-size: cover;
  transition: background 300ms ease, filter 300ms ease;
}

#intro.hovered{filter: saturate(1.2) brightness(1.02);}

/* Logo switching (reversed): light mode = dark logo; dark mode = light logo */
.logo-dark{display:block}.logo-light{display:none}
@media(prefers-color-scheme:dark){.logo-dark{display:none}.logo-light{display:block}}