/* ============================================
   MAE CORTEX — Base, layout, primitives
   ============================================ */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: scroll;          /* single, stable scroll container (prevents layout shift) */
  scrollbar-width: none;       /* Firefox — hide scrollbar */
  -ms-overflow-style: none;    /* legacy Edge */
}
html::-webkit-scrollbar { width: 0; height: 0; display: none; }  /* Chromium/WebKit — hide */

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Body must NOT own a scrollbar — otherwise html + body = two scrollbars. */
body { overflow: visible; }

body::before {
  /* subtle stars / noise overlay + global atmosphere (muted for minimalist luxury) */
  content: "";
  position: fixed; inset: 0;
  background-image:
    radial-gradient(ellipse at 50% 0%, oklch(0.22 0.08 280 / 0.42), transparent 55%),
    radial-gradient(ellipse at 50% 100%, oklch(0.18 0.06 285 / 0.32), transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><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 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: auto, auto, 220px;
  opacity: 0.62;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}
[data-theme="light"] body::before { opacity: 0.16; mix-blend-mode: multiply; }

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

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* === Container === */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  position: relative;
  z-index: 2;
}

/* === Headings === */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.035em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.03em; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.025em; }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }
p { margin: 0; color: var(--text-2); line-height: 1.55; text-wrap: pretty; }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 12px var(--acc-glow);
}

.lead { font-size: var(--fs-lead); color: var(--text-2); line-height: 1.5; max-width: 60ch; }

.mono { font-family: var(--font-mono); }

/* === Glow plates (ambient background lights) === */
.glow-plate {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  z-index: 0;
}

/* === Section === */
section { position: relative; padding-block: var(--section-y); }

/* === Buttons — pill: deep glass body · luminous gradient rim · metallic label
   · accent light-leak (per reference "Generate"). Hover changes light only —
   the button never moves. All colour flows from --btn-* tokens (accent hue). === */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 26px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.005em;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  isolation: isolate;
  text-decoration: none;
  /* Bright silver label (solid — reliably renders above the glass ::before body;
     a text-clip gradient would hide behind the negative-z pseudo). Icons inherit
     this via currentColor. */
  color: var(--btn-metal-2);
  text-shadow: 0 1px 1px oklch(0 0 0 / 0.45), 0 -1px 0 oklch(1 0 0 / 0.12);
  transition: filter var(--dur-mid) var(--ease-out);   /* light only — no transform */
}
/* Glass body + luminous gradient rim (double-background border trick) */
.btn::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, var(--btn-body-1), var(--btn-body-2)) padding-box,
    /* directional rim — brightest along the right edge (per Get Started reference) */
    linear-gradient(100deg, var(--btn-rim-hi), var(--btn-rim-lo) 42%,
      var(--btn-rim-hi) 80%, var(--btn-ice) 90%, var(--btn-rim-lo) 100%) border-box;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.28),                 /* top inner rim light */
    inset 0 -14px 26px -18px oklch(0 0 0 / 0.9),        /* base inner shade */
    0 14px 32px -18px oklch(0 0 0 / 0.7);               /* soft drop */
  z-index: -2;
}
/* Accent light-leak spilling from beneath the pill */
.btn::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -9px;
  width: 58%; height: 22px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--btn-glow), transparent 76%);
  filter: blur(7px);
  opacity: 0;
  pointer-events: none;
  z-index: -3;
  transition: opacity var(--dur-mid) var(--ease-out);
}
.btn:hover { filter: brightness(1.08); }
.btn:hover::after { opacity: 0.55; }
.btn:focus-visible { outline: 2px solid var(--btn-rim-hi); outline-offset: 3px; }

/* Arrow / icons — keep visible against the clipped (transparent-fill) label */
.btn .arrow { display: inline-flex; }

/* === Primary — BİREBİR port of design-ref/buttons "Get Started Button".
   Same body radial, 1.5px mask-composite rim, liquid-metal smoke (SVG #mx-wisp
   turbulence), crescent/sheen/well layers, sparkle dots, glowing label, hover
   scale. Layer spans + the filter are injected by enhanceCtas() in app.jsx;
   --btn-w is measured per button so every calc() scales like the reference. === */
.btn--primary {
  /* reference knobs: accent #5C8DFF → RGB triplet + derived icy tint */
  --acc: 92 141 255;
  --ice: 198 216 255;
  --glow: 1.1;
  --flow-s: 24s;
  --btn-w: 200px;                 /* fallback — enhancer sets the real width */
  isolation: isolate;
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.012em;
  background: radial-gradient(ellipse 120% 160% at 30% -20%, #191d2e 0%, #0e1019 45%, #05060c 100%);
  box-shadow:
    0 0 calc(var(--btn-w) * 0.07) rgba(0, 0, 0, 0.85),
    0 calc(var(--btn-w) * 0.03) calc(var(--btn-w) * 0.1) rgba(0, 0, 0, 0.6),
    0 0 calc(var(--btn-w) * 0.12) rgb(var(--acc) / 0.10),
    inset 0 1px 0 rgb(var(--ice) / 0.18),
    inset 0 -2px 8px rgb(var(--ice) / 0.06),
    inset 0 0 calc(var(--btn-w) * 0.06) rgb(var(--acc) / 0.05);
  text-shadow:
    0 0 calc(var(--glow) * 6px) rgba(255, 255, 255, 0.95),
    0 0 calc(var(--glow) * 18px) rgb(var(--acc) / 0.75),
    0 0 calc(var(--glow) * 48px) rgb(var(--acc) / 0.50);
  /* Hover must stay compositor-only (transform + child opacity). A filter
     transition here re-rasterizes the turbulence smoke on EVERY frame — the
     main thread saturates, the smoke animation drops frames ("freezes") and
     snaps forward when the transition ends. brightness(1.12) is therefore
     emulated by the .cta-brite overlay fading in. */
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.btn--primary:hover { transform: scale(1.015); }
.btn--primary:hover .cta-brite { opacity: 1; }
.btn--primary:active { transform: scale(0.99); }
.btn--primary:active .cta-brite { opacity: 1; }
.btn--primary:focus-visible { outline: 1px solid rgb(var(--ice) / 0.5); outline-offset: 6px; }

/* gradient rim — brightest along the right edge (verbatim) */
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  border: 0;
  background: linear-gradient(100deg,
    rgb(var(--ice) / 0.25) 0%,
    rgb(var(--ice) / 0.05) 22%,
    rgb(var(--ice) / 0.12) 48%,
    rgb(var(--ice) / 0.70) 76%,
    rgb(var(--ice) / 1.0) 88%,
    rgb(var(--ice) / 0.35) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  pointer-events: none;
  z-index: 1;
}
/* reference keeps its glow in the box-shadow; ::after is repurposed further
   down as an invisible hover hit-pad (edge-flicker fix) */

/* inner layer stack (injected): smoke → well → crescent → sheen → dots.
   z-index -1 keeps the inline label/icon painting above the layers while the
   rim (::before, z1) stays on top of everything. */
.btn--primary .cta-inner {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.btn--primary .cta-smoke {
  position: absolute;
  inset: -18%;
}
/* The drifting strip: same gradients/filter as the reference, but the motion
   is a compositor TRANSFORM loop instead of background-position. The
   turbulence rasterizes once; the drift then never pauses — not during hover
   scale, not under main-thread load. Tile width and 24s period are verbatim
   (one --btn-w per loop, right → left). */
.btn--primary .cta-smoke-strip {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% + var(--btn-w));
  will-change: transform;
  filter: url(#mx-wisp) contrast(1.3) brightness(1.25);
  background-repeat: repeat-x;
  background-size: var(--btn-w) 100%;
  background-image:
    radial-gradient(ellipse 26% 30% at 44% 64%, rgb(var(--ice) / 0.48), transparent 70%),
    radial-gradient(ellipse 30% 42% at 58% 36%, rgb(var(--ice) / 0.36), transparent 70%),
    radial-gradient(ellipse 20% 55% at 80% 42%, rgb(var(--ice) / 0.44), transparent 70%),
    radial-gradient(ellipse 16% 30% at 70% 78%, rgb(var(--acc) / 0.30), transparent 70%),
    radial-gradient(ellipse 14% 26% at 18% 38%, rgb(var(--acc) / 0.22), transparent 70%),
    linear-gradient(90deg,
      rgb(var(--ice) / 0) 0%,
      rgb(var(--ice) / 0.16) 12%,
      rgb(var(--ice) / 0) 24%,
      rgb(var(--acc) / 0.10) 38%,
      rgb(var(--ice) / 0) 50%,
      rgb(var(--ice) / 0.20) 64%,
      rgb(var(--ice) / 0) 76%,
      rgb(var(--ice) / 0.12) 88%,
      rgb(var(--ice) / 0) 100%);
  animation: mx-cta-flow var(--flow-s) linear infinite;
}
/* one full tile per loop — seamless right-to-left stream (compositor) */
@keyframes mx-cta-flow {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--btn-w))); }
}
/* deepen the center so the text pops */
.btn--primary .cta-well {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 75% at 42% 52%, rgba(2, 4, 12, 0.60), transparent 75%);
}
/* bright curved bloom hugging the right cap */
.btn--primary .cta-crescent {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 30% 105% at 101% 50%, rgb(var(--ice) / 0.48), transparent 65%),
    radial-gradient(ellipse 12% 60% at 100.5% 38%, rgb(var(--ice) / 0.55), transparent 70%);
  filter: blur(7px);
}
/* faint cool sheen across the top + dim left cap light */
.btn--primary .cta-sheen {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(var(--ice) / 0.12) 0%, transparent 22%),
    radial-gradient(ellipse 18% 80% at -2% 55%, rgb(var(--ice) / 0.12), transparent 70%),
    linear-gradient(0deg, rgb(var(--acc) / 0.06) 0%, transparent 14%);
}
/* hover brightening — compositor-only stand-in for brightness(1.12): a soft
   white/ice wash that fades in over the layer stack (under the label) */
.btn--primary .cta-brite {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 160% at 30% -20%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04) 60%),
    rgb(var(--ice) / 0.05);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
/* sparkles */
.btn--primary .cta-dot {
  position: absolute;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px rgb(var(--acc) / 0.9);
  animation: mx-twinkle 3.2s ease-in-out infinite;
}
@keyframes mx-twinkle {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}
/* keep the label/icon above the injected layers */
.btn--primary > .arrow, .btn--primary > svg { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .btn--primary .cta-smoke-strip { animation: none; }
  .btn--primary .cta-dot { animation: none; opacity: 0.8; }
}
/* focused indigo light-leak beneath the pill */
/* Invisible hover hit-pad — the hover region stays constant while the button
   scales (1.015), so pulling away near the edge can't re-trigger :hover and
   double-bounce the transition. (Replaces the retired v1 underglow; also the
   stale duplicate :hover{brightness 1.08} that fought the verbatim 1.12.) */
.btn--primary::after {
  content: "";
  display: block;
  position: absolute;
  inset: -5px;
  width: auto;
  height: auto;
  border-radius: inherit;
  transform: none;
  background: none;
  filter: none;
  opacity: 1;
  pointer-events: auto;
  transition: none;
}

/* === Ghost — lightest glass, plain readable label (no metallic) === */
.btn--ghost {
  color: var(--text-1);
  -webkit-text-fill-color: currentColor;
  background: none;
  text-shadow: none;
}
.btn--ghost::before {
  background:
    linear-gradient(180deg, oklch(0.70 0.04 var(--btn-h) / 0.08), oklch(0.50 0.04 var(--btn-h) / 0.05)) padding-box,
    linear-gradient(135deg, var(--btn-rim-hi), var(--btn-rim-lo) 60%) border-box;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.16);
}
.btn--ghost::after { display: none; }
.btn--ghost:hover { filter: none; }
.btn--ghost:hover::before {
  background:
    linear-gradient(180deg, oklch(0.72 0.06 var(--btn-h) / 0.16), oklch(0.50 0.05 var(--btn-h) / 0.08)) padding-box,
    linear-gradient(135deg, var(--btn-rim-hi), var(--btn-rim-lo) 55%) border-box;
}

/* === Sizes === */
.btn--lg { padding: 13px 28px; font-size: 0.9375rem; gap: 10px; }
.btn--sm { padding: 8px 16px; font-size: 0.8125rem; gap: 6px; }

/* Tabular CTA — full-width plan card buttons */
.btn--block { width: 100%; padding-block: 12px; }

/* Icon size constraint */
.btn svg, .btn .arrow svg { width: 14px; height: 14px; flex-shrink: 0; }
.btn--lg svg, .btn--lg .arrow svg { width: 16px; height: 16px; }
.btn--sm svg, .btn--sm .arrow svg { width: 12px; height: 12px; }

/* Generic icon inside text-only links */
.link-icon svg { width: 14px; height: 14px; vertical-align: middle; }

/* === Glass card === */
.glass {
  position: relative;
  background: var(--surf-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-4);
  backdrop-filter: blur(30px) saturate(160%);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  overflow: hidden;
}
/* Form variant — allow dropdowns to overflow the container */
.glass.glass--form { overflow: visible; }
.glass.glass--form::before { display: none; }
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 35%, rgba(255,255,255,0) 65%, rgba(255,255,255,0.06));
  -webkit-mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* === Reveal === */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-stagger="1"] { transition-delay: 80ms; }
.reveal[data-stagger="2"] { transition-delay: 160ms; }
.reveal[data-stagger="3"] { transition-delay: 240ms; }
.reveal[data-stagger="4"] { transition-delay: 320ms; }
.reveal[data-stagger="5"] { transition-delay: 400ms; }
.reveal[data-stagger="6"] { transition-delay: 480ms; }

/* === Tags / chips === */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--surf-1);
  border: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}
.tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--acc); box-shadow: 0 0 8px var(--acc-glow);
}

/* === Section header pattern === */
.section-head {
  display: grid;
  gap: 18px;
  margin-bottom: 56px;
  max-width: 760px;
}
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }

/* === Divider === */
.hr {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline-strong), transparent);
  border: 0;
  margin: 0;
}

/* === Marquee === */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* === Hide on small screens === */
@media (max-width: 720px) {
  .desktop-only { display: none !important; }
}

/* === Accessibility / motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* === Scrollbar — hidden site-wide (scroll still works) === */
::-webkit-scrollbar { width: 0; height: 0; display: none; }
* { scrollbar-width: none; -ms-overflow-style: none; }