@font-face { font-family: "Montserrat"; font-weight: 400; src: url("../fonts/Montserrat/Montserrat-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 500; src: url("../fonts/Montserrat/Montserrat-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 600; src: url("../fonts/Montserrat/Montserrat-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 700; src: url("../fonts/Montserrat/Montserrat-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; src: url("../fonts/IBM-Plex-Sans/IBMPlexSans-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: italic; src: url("../fonts/IBM-Plex-Sans/IBMPlexSans-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; src: url("../fonts/IBM-Plex-Sans/IBMPlexSans-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; src: url("../fonts/IBM-Plex-Sans/IBMPlexSans-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; src: url("../fonts/IBM-Plex-Mono/IBMPlexMono-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; src: url("../fonts/IBM-Plex-Mono/IBMPlexMono-Medium.ttf") format("truetype"); font-display: swap; }

:root {

  --ra-obsidian: #15141A;
  --ra-ink:      #0F0D15;
  --ra-slate:    #1F2031;
  --ra-graphite: #26252C;
  --ra-cream:    #FDFDFB;
  --ra-muted:    #A7A3B3;
  --ra-lavender: #A096D2;
  --ra-plum:     #422A51;

  --ra-g-magenta: #EB6DF4;
  --ra-g-violet:  #923A9E;
  --ra-g-indigo:  #6C4DC4;
  --ra-g-blue:    #74B0EC;
  --ra-g-royal:   #162171;

  --ra-gradient: linear-gradient(120deg, #EB6DF4 0%, #923A9E 30%, #6C4DC4 55%, #74B0EC 80%, #162171 100%);

  --ra-gradient-metallic:
    linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.22) 48%, rgba(255,255,255,0) 62%),
    var(--ra-gradient);

  --bg:            var(--ra-obsidian);
  --bg-deep:       var(--ra-ink);
  --surface:       var(--ra-slate);
  --surface-2:     var(--ra-graphite);
  --border:        var(--ra-graphite);
  --text:          var(--ra-cream);
  --text-muted:    var(--ra-muted);
  --link:          var(--ra-lavender);
  --accent-soft:   var(--ra-plum);
  --focus-ring:    var(--ra-gradient);

  --font-display: "Montserrat", "IBM Plex Sans Hebrew", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", "IBM Plex Sans Hebrew", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;
  --font-hebrew:  "IBM Plex Sans Hebrew", system-ui, sans-serif;

  --fs-display: clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem);
  --fs-h1:      clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem);
  --fs-h2:      clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  --fs-h3:      1.25rem;
  --fs-lead:    clamp(1.125rem, 1rem + .4vw, 1.375rem);
  --fs-body:    1.0625rem;
  --fs-small:   .875rem;
  --fs-mono:    .8125rem;
  --lh-tight:   1.08;
  --lh-head:    1.18;
  --lh-body:    1.6;
  --tracking-display: -0.02em;
  --tracking-mono:     0.04em;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;
  --content-max: 1120px;
  --text-max: 68ch;
  --gutter: clamp(16px, 4vw, 40px);

  --elevation-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px -12px rgba(66,42,81,.55);
  --elevation-2: 0 1px 0 rgba(255,255,255,.05) inset, 0 18px 48px -18px rgba(66,42,81,.7), 0 2px 6px rgba(15,13,21,.6);
  --elevation-3: 0 1px 0 rgba(255,255,255,.06) inset, 0 32px 80px -24px rgba(108,77,196,.35), 0 4px 12px rgba(15,13,21,.7);
  --surface-tint: linear-gradient(180deg, rgba(160,150,210,.06), rgba(160,150,210,0) 60%);

  --grain-opacity: .045;
  --grain-opacity-light: .03;
  --grain-opacity-max: .07;

  --ease-out:        cubic-bezier(.16, 1, .3, 1);
  --dur-appear:      520ms;
  --dur-fast:        180ms;
  --appear-rise:     16px;
  --appear-stagger:  80ms;

  --glow-cta: radial-gradient(60% 120% at 50% 50%, rgba(235,109,244,.35), rgba(108,77,196,.18) 45%, rgba(0,0,0,0) 70%);
}

:root[data-theme="light"] {
  --bg:          #FDFDFB;
  --bg-deep:     #F3F1F6;
  --surface:     #FFFFFF;
  --surface-2:   #ECE9F1;
  --border:      #DDD9E4;
  --text:        #15141A;
  --text-muted:  #5E5A6B;
  --link:        #422A51;
  --accent-soft: #ECE6F6;
  --elevation-1: 0 8px 24px -14px rgba(66,42,81,.25);
  --elevation-2: 0 18px 48px -20px rgba(66,42,81,.3);
  --elevation-3: 0 32px 80px -28px rgba(108,77,196,.28);
  --grain-opacity: .03;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-appear: 1ms; --appear-rise: 0px; --appear-stagger: 0ms; }
}

.appear { opacity: 0; transform: translateY(var(--appear-rise)); transition: opacity var(--dur-appear) var(--ease-out), transform var(--dur-appear) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--appear-stagger)); }
.appear.is-in { opacity: 1; transform: none; }

.grain::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

.focus-glow:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #923A9E, 0 0 18px 2px rgba(235,109,244,.35); }