/* Randevuka Reflect design tokens — Hero Reflect Reset
   Landing + public/auth ortak dil. */

/* Geist Sans — npm/geist@ jsDelivr CSS 404; Fontsource woff2 */
@font-face {
  font-family: "Geist Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.3.0/files/geist-sans-latin-400-normal.woff2")
    format("woff2");
}
@font-face {
  font-family: "Geist Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.3.0/files/geist-sans-latin-500-normal.woff2")
    format("woff2");
}
@font-face {
  font-family: "Geist Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.3.0/files/geist-sans-latin-600-normal.woff2")
    format("woff2");
}
@font-face {
  font-family: "Geist Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.3.0/files/geist-sans-latin-700-normal.woff2")
    format("woff2");
}
@font-face {
  font-family: "Geist Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.3.0/files/geist-sans-latin-800-normal.woff2")
    format("woff2");
}

:root {
  --rv-bg: #050508;
  --rv-surface: rgba(255, 255, 255, 0.03);
  --rv-border: rgba(255, 255, 255, 0.08);
  --rv-text: #ececee;
  --rv-text-muted: rgba(236, 236, 238, 0.62);
  --rv-accent: #5e6ad2;
  --rv-accent-glow: rgba(94, 106, 210, 0.35);
  --rv-accent-hover: #6b76db;
  /* Reflect.app portal family */
  --rv-portal-1: #787bff;
  --rv-portal-2: #ba9cff;
  --rv-portal-3: #9cb2ff;
  --rv-portal-4: #e59cff;
  --rv-portal-5: #5439ff;
  --rv-cta-fill: radial-gradient(
    ellipse 88% 95% at 50% 42%,
    #533891 0%,
    #3a2270 38%,
    #24105a 72%,
    #14063a 100%
  );
  --rv-cta-fill-hover: radial-gradient(
    ellipse 88% 95% at 50% 42%,
    #6344a3 0%,
    #463082 38%,
    #2e1768 72%,
    #1a0a48 100%
  );
  --rv-cta-border: rgba(121, 92, 182, 0.92);
  --rv-cta-border-hover: rgba(150, 120, 210, 0.95);
  --rv-cta-ink: #ffffff;
  --rv-cta-shadow:
    inset 0 0 22px 3px rgba(6, 1, 20, 0.55),
    inset 0 1px 0 rgba(190, 165, 235, 0.36),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(80, 40, 140, 0.22),
    0 6px 20px rgba(0, 0, 0, 0.4),
    0 0 26px rgba(90, 50, 160, 0.38);
  --rv-cta-shadow-hover:
    inset 0 0 20px 2px rgba(6, 1, 20, 0.48),
    inset 0 1px 0 rgba(210, 185, 250, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(100, 60, 170, 0.32),
    0 8px 24px rgba(0, 0, 0, 0.48),
    0 0 34px rgba(110, 70, 190, 0.5);
  --rv-radius-lg: 16px;
  --rv-radius-md: 12px;
  --rv-radius-pill: 999px;
  --rv-blur: 12px;
  --rv-section-y: clamp(5rem, 12vh, 7.5rem);
  --rv-container: min(1120px, 92vw);
  --rv-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rv-font-display: "Geist Sans", "Inter", system-ui, sans-serif;
  --rv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}

.rv-container {
  width: var(--rv-container);
  margin-inline: auto;
}

.rv-section {
  padding-block: var(--rv-section-y);
}

.rv-glass {
  background: var(--rv-surface);
  border: 1px solid var(--rv-border);
  border-radius: var(--rv-radius-lg);
  backdrop-filter: blur(var(--rv-blur));
  -webkit-backdrop-filter: blur(var(--rv-blur));
}

.rv-display {
  font-family: var(--rv-font-display);
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--rv-text);
  line-height: 1.05;
}

.rv-body {
  font-family: var(--rv-font);
  font-weight: 400;
  color: var(--rv-text-muted);
  line-height: 1.55;
}

.rv-btn-primary,
.rv-btn-cta,
.rv-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.65rem 1.35rem;
  border-radius: var(--rv-radius-pill);
  font-family: var(--rv-font);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.2s var(--rv-ease),
    border-color 0.2s var(--rv-ease),
    box-shadow 0.2s var(--rv-ease),
    color 0.2s var(--rv-ease),
    transform 0.15s var(--rv-ease);
}

.rv-btn-primary {
  border: 1px solid rgba(94, 106, 210, 0.45);
  background: rgba(94, 106, 210, 0.22);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.rv-btn-primary:hover {
  border-color: rgba(94, 106, 210, 0.65);
  background: rgba(94, 106, 210, 0.34);
  box-shadow: 0 0 18px rgba(94, 106, 210, 0.22);
  color: #fff;
}

.rv-btn-primary:active {
  transform: translateY(1px);
}

.rv-btn-cta {
  border: 1px solid var(--rv-cta-border);
  background: var(--rv-cta-fill);
  color: var(--rv-cta-ink);
  box-shadow: var(--rv-cta-shadow);
}

.rv-btn-cta:hover {
  border-color: var(--rv-cta-border-hover);
  background: var(--rv-cta-fill-hover);
  box-shadow: var(--rv-cta-shadow-hover);
  color: #fff;
}

.rv-btn-cta:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 0 24px 4px rgba(6, 1, 20, 0.62),
    inset 0 1px 0 rgba(180, 150, 230, 0.22),
    0 3px 12px rgba(0, 0, 0, 0.4);
}

.rv-btn-ghost {
  border: 1px solid var(--rv-border);
  background: var(--rv-surface);
  color: var(--rv-text);
  backdrop-filter: blur(var(--rv-blur));
  -webkit-backdrop-filter: blur(var(--rv-blur));
}

.rv-btn-ghost:hover {
  border-color: rgba(94, 106, 210, 0.45);
  color: #fff;
  box-shadow: 0 0 20px rgba(94, 106, 210, 0.18);
}

.rv-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.35rem;
  border-radius: var(--rv-radius-pill);
  background: var(--rv-surface);
  border: 1px solid var(--rv-border);
  backdrop-filter: blur(var(--rv-blur));
  -webkit-backdrop-filter: blur(var(--rv-blur));
}

.rv-link {
  color: var(--rv-text-muted);
  text-decoration: none;
  transition: color 0.15s var(--rv-ease);
}

.rv-link:hover {
  color: var(--rv-accent);
}

@media (prefers-reduced-motion: reduce) {
  .rv-btn-primary,
  .rv-btn-cta,
  .rv-btn-ghost,
  .rv-link {
    transition: none;
  }
}
