/* Liquid Glass — Alfin brand palette (violet on light) */
:root {
  /* Surfaces — light grayish-cream like alfin-ex.ru */
  --bg: #F7F6FB;
  --bg-warm: #EFEDF6;

  --glass-1: rgba(255, 255, 255, 0.62);
  --glass-2: rgba(255, 255, 255, 0.78);
  --glass-3: rgba(255, 255, 255, 0.88);
  --glass-strong: rgba(255, 255, 255, 0.96);

  --line: rgba(60, 50, 110, 0.10);
  --line-strong: rgba(60, 50, 110, 0.20);
  --line-glow: rgba(95, 75, 200, 0.30);

  /* Specular / highlight gradients (top edge of glass) */
  --spec-top: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.35) 28%, rgba(255,255,255,0) 60%);
  --spec-side: linear-gradient(90deg, rgba(255,255,255,0.40), rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.40));

  /* Text — near-black, slightly warm */
  --fg: #15172A;
  --fg-muted: rgba(21, 23, 42, 0.62);
  --fg-dim: rgba(21, 23, 42, 0.40);

  /* Brand — deep indigo primary, balanced and serious */
  --primary: #4F46BA;        /* deep indigo (base/buttons) */
  --primary-deep: #322890;
  --primary-light: #7565D8;
  --primary-soft: rgba(79, 70, 186, 0.10);

  /* Accent — violet, used for highlights */
  --accent: #7C5CF0;
  --accent-deep: #5B3FD8;
  --accent-light: #A48BFF;
  --accent-soft: rgba(124, 92, 240, 0.12);

  --accent-2: #6068A8;
  --accent-2-soft: rgba(96, 104, 168, 0.10);

  --success: #4FB573;
  --success-soft: rgba(79, 181, 115, 0.14);
  --warn: #F0B458;
  --warn-soft: rgba(240, 180, 88, 0.14);
  --danger: #E5604F;
  --danger-soft: rgba(229, 96, 79, 0.14);
  --pain: #6B7CFF;

  /* Type */
  --font-sans: "Manrope", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-glass:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 0 0 1px rgba(60, 40, 120, 0.05) inset,
    0 24px 50px -12px rgba(60, 40, 120, 0.18),
    0 8px 24px -8px rgba(60, 40, 120, 0.10);

  --shadow-glass-sm:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 0 0 1px rgba(60, 40, 120, 0.04) inset,
    0 8px 20px -6px rgba(60, 40, 120, 0.12);

  --shadow-glow-primary:
    0 0 0 1px rgba(79, 70, 186, 0.40),
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 0 24px rgba(79, 70, 186, 0.26),
    0 12px 30px -8px rgba(50, 40, 144, 0.34);

  --shadow-glow-accent:
    0 0 0 1px rgba(124, 92, 240, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 0 28px rgba(124, 92, 240, 0.32),
    0 12px 30px -8px rgba(91, 63, 216, 0.38);
}

/* ── Dark theme — deep violet */
:root[data-theme="dark"] {
  --bg: #0E0A1E;
  --bg-warm: #150F2E;
  --glass-1: rgba(255, 255, 255, 0.04);
  --glass-2: rgba(255, 255, 255, 0.07);
  --glass-3: rgba(255, 255, 255, 0.12);
  --glass-strong: rgba(255, 255, 255, 0.18);
  --line: rgba(180, 160, 255, 0.12);
  --line-strong: rgba(180, 160, 255, 0.24);
  --spec-top: linear-gradient(180deg, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0.10) 28%, rgba(255,255,255,0) 60%);
  --fg: #F2EEFF;
  --fg-muted: rgba(242, 238, 255, 0.66);
  --fg-dim: rgba(242, 238, 255, 0.40);
  --shadow-glass:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 24px 60px -12px rgba(0, 0, 0, 0.55),
    0 8px 24px -8px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
}

/* ── Animated aurora bg — violet/pink/blue */
.aurora {
  position: fixed;
  inset: -10vmax;
  z-index: -10;
  pointer-events: none;
  filter: blur(80px) saturate(1.15);
  opacity: 0.30;
}
.aurora::before, .aurora::after, .aurora .blob {
  content: "";
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: multiply;
  will-change: transform;
}
:root[data-theme="dark"] .aurora::before,
:root[data-theme="dark"] .aurora::after,
:root[data-theme="dark"] .aurora .blob { mix-blend-mode: screen; }

.aurora::before {
  top: -10vmax; left: -10vmax;
  width: 70vmax; height: 70vmax;
  background: radial-gradient(circle, #4F46BA 0%, transparent 60%);
  animation: drift1 28s ease-in-out infinite alternate;
}
.aurora::after {
  bottom: -20vmax; right: -10vmax;
  width: 80vmax; height: 80vmax;
  background: radial-gradient(circle, #7C5CF0 0%, transparent 55%);
  animation: drift2 36s ease-in-out infinite alternate;
}
.aurora .blob {
  top: 30%; left: 35%;
  width: 45vmax; height: 45vmax;
  background: radial-gradient(circle, #322890 0%, transparent 65%);
  animation: drift3 32s ease-in-out infinite alternate;
}

@keyframes drift1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(20vmax, 12vmax) scale(1.15); }
}
@keyframes drift2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-18vmax, -10vmax) scale(1.1); }
}
@keyframes drift3 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-12vmax, 18vmax) scale(0.85); }
}

.noise {
  position: fixed;
  inset: 0;
  z-index: -5;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ── Glass primitive */
.glass {
  position: relative;
  background: var(--glass-2);
  backdrop-filter: blur(32px) saturate(1.8);
  -webkit-backdrop-filter: blur(32px) saturate(1.8);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-glass);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
}
.glass-sm {
  background: var(--glass-1);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-glass-sm);
  border-radius: var(--r-md);
}

.glass::before, .glass-sm::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--spec-top);
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
  mask: linear-gradient(#000, transparent 50%);
  -webkit-mask: linear-gradient(#000, transparent 50%);
}

.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 120% 80% at 50% -20%, rgba(255,255,255,0.50), transparent 50%);
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}

.glass > *, .glass-sm > * { position: relative; z-index: 2; }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum", "zero"; }

::selection { background: var(--primary); color: white; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--glass-strong); border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

.gradient-text {
  background: linear-gradient(120deg, var(--primary-deep), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Dark text override for headings on light bg */
h1, h2, h3 { color: #1A1D2B; }

.lift {
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.lift:hover {
  transform: translateY(-2px);
}