/* =============================================================================
   BRUNO LANDING PAGE — standalone stylesheet
   Extracted from dashboard/src/app/styles/global-*.css (design tokens and the
   component classes the landing page uses), plus the handful of Tailwind
   utilities that dashboard/src/app/LandingPage.tsx relies on.
   ============================================================================= */

:root {
  /* Brand primitives */
  --brand-stripe-violet: oklch(57.8% 0.235 278);
  --brand-stripe-violet-hover: oklch(52.8% 0.248 276);
  --brand-stripe-violet-soft: oklch(95.8% 0.0214 289);
  --brand-stripe-navy: oklch(26% 0.0604 251);
  --brand-bruno-coral: oklch(63% 0.18 31);
  --brand-bruno-coral-soft: oklch(95% 0.045 31);
  --brand-bruno-gold-soft: oklch(96% 0.05 82);
  --brand-bruno-sky-soft: oklch(95% 0.035 238);
  --brand-bruno-sage-soft: oklch(95.5% 0.035 150);
  --brand-bruno-eye: oklch(14% 0.01 50);
  --brand-coffee-teak: oklch(39% 0.075 58);

  --color-primary: var(--brand-stripe-violet);
  --color-primary-light: var(--brand-stripe-violet-soft);
  --color-on-primary: var(--color-white);

  /* Neutrals */
  --color-white: oklch(100% 0 0);
  --color-gray-50: oklch(98.1% 0.00512 248);
  --color-gray-100: oklch(96.2% 0.00858 248);
  --color-gray-200: oklch(89.8% 0.0156 257);
  --color-gray-300: oklch(81.6% 0.0249 254);
  --color-gray-400: oklch(67.2% 0.033 250);
  --color-gray-500: oklch(55.4% 0.032 263);
  --color-gray-600: oklch(47.9% 0.0339 250);
  --color-gray-900: var(--brand-stripe-navy);

  /* Surfaces */
  --background: var(--color-white);
  --foreground: var(--color-gray-900);
  --color-surface-muted: var(--color-gray-50);

  /* Typography */
  --font-display: "Benne";
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family: var(--font-body);
  --font-heading: var(--font-display), Georgia, "Times New Roman", serif;
  --font-heading-weight: 400;
  --font-heading-stroke: 0px;

  --text-sm: 13px;
  --text-base: 14px;
  --text-xl: 22px;
  --text-4xl: 48px;

  --font-normal: 400;
  --font-medium: 500;

  --leading-normal: 1.43;
  --leading-snug: 1.33;

  /* Spacing — 8px base */
  --space-1-5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 16px;

  /* Shadows */
  --shadow-card: 0 6px 20px oklch(13% 0.008 55 / 8%);

  /* Motion */
  --transition-fast: 150ms ease;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* Controls */
  --size-control: 44px;
  --button-radius: var(--radius-sm);
  --button-min-height: var(--size-control);
  --button-padding-y: 14px;
  --button-padding-x: var(--space-6);
  --button-primary-bg: var(--brand-stripe-violet);
  --button-primary-bg-hover: var(--brand-stripe-violet-hover);
  --button-primary-fg: var(--color-white);
  --button-secondary-bg: var(--color-white);
  --button-secondary-bg-hover: color-mix(in oklch, var(--brand-stripe-violet-soft) 62%, var(--color-white));
  --button-secondary-fg: var(--color-gray-900);
  --button-secondary-border: color-mix(in oklch, var(--color-gray-200) 78%, var(--brand-stripe-violet));
}

/* =============================================================================
   RESET — the parts of Tailwind preflight this page depends on
   ============================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  font-weight: var(--font-normal);
}

h1, h2, h3, p {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

iframe {
  display: block;
}

/* =============================================================================
   TYPOGRAPHY
   ============================================================================= */

.text-display {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--font-heading-weight);
  -webkit-text-stroke: var(--font-heading-stroke) currentColor;
  line-height: 1.08;
  color: var(--color-gray-900);
}

.text-heading-1 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: var(--font-heading-weight);
  -webkit-text-stroke: var(--font-heading-stroke) currentColor;
  line-height: 1.16;
  color: var(--color-gray-900);
}

.text-heading-2 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-heading-weight);
  -webkit-text-stroke: var(--font-heading-stroke) currentColor;
  line-height: 1.18;
  color: var(--color-gray-900);
}

.text-heading-3 {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: var(--leading-snug);
  color: var(--color-gray-900);
}

.text-body-lg {
  font-size: 18px;
  font-weight: var(--font-normal);
  line-height: 1.62;
  color: var(--color-gray-500);
}

.text-secondary {
  color: var(--color-gray-500);
}

/* =============================================================================
   LOGO AND HEADER
   ============================================================================= */

.logo {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: var(--font-heading-weight);
  -webkit-text-stroke: var(--font-heading-stroke) currentColor;
  font-style: italic;
  letter-spacing: 0;
  line-height: 0.82;
  transform: translateY(0);
  color: var(--color-gray-900);
}

.logo-wordmark {
  order: 1;
}

.header-container {
  height: 80px;
}

.header-logo {
  align-items: flex-end;
  gap: var(--space-1-5);
  text-decoration: none;
}

.header-logo svg {
  width: 32px;
  height: 32px;
}

.header-logo .bruno-mascot {
  order: 0;
  line-height: 0;
  margin-bottom: -2px;
}

.header-logo .bruno-mascot::after {
  display: none;
}

.header-logo .bruno-mascot svg {
  display: block;
}

/* =============================================================================
   MASCOT
   ============================================================================= */

.bruno-mascot {
  display: inline-block;
  position: relative;
  isolation: isolate;
  line-height: 0;
  cursor: pointer;
  transform-origin: center;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.bruno-mascot::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -5%;
  z-index: -1;
  height: 16%;
  border-radius: 999px;
  background: color-mix(in oklch, var(--brand-bruno-coral) 28%, transparent);
  filter: blur(3px);
  opacity: 0.42;
  transform: scaleX(0.92);
  transform-origin: center;
  animation: bruno-mascot-shadow 14s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.bruno-mascot-sprite {
  display: block;
  position: relative;
  z-index: 1;
  image-rendering: pixelated;
  transform-origin: center center;
  transition:
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 180ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.bruno-mascot-cheek {
  opacity: 0.88;
}

.bruno-mascot-shine {
  opacity: 0.82;
}

@keyframes bruno-mascot-shadow {
  0%, 78%, 100% {
    opacity: 0.42;
    transform: scaleX(0.92);
  }

  82% {
    opacity: 0.30;
    transform: scaleX(0.76);
  }

  88% {
    opacity: 0.48;
    transform: scaleX(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bruno-mascot {
    transition: none;
  }

  .bruno-mascot::after {
    animation: none;
  }

  .bruno-mascot-sprite {
    transition: none;
  }
}

/* =============================================================================
   BUTTONS
   ============================================================================= */

.btn {
  display: inline-flex;
  min-height: var(--button-min-height);
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--button-padding-y) var(--button-padding-x);
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  transition:
    transform 100ms var(--ease-out),
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
}

.btn:active:not(:disabled) {
  transform: scale(0.97);
}

.btn-primary {
  border-color: color-mix(in oklch, var(--brand-stripe-violet) 74%, var(--color-white));
  background: var(--button-primary-bg);
  color: var(--button-primary-fg);
}

.btn-secondary {
  border-color: var(--button-secondary-border);
  background: var(--button-secondary-bg);
  color: var(--button-secondary-fg);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover:not(:disabled) {
    background: var(--button-primary-bg-hover);
    transform: translateY(-1px);
  }

  .btn-secondary:hover:not(:disabled) {
    border-color: color-mix(in oklch, var(--brand-stripe-violet) 38%, var(--color-gray-300));
    background: var(--button-secondary-bg-hover);
    transform: translateY(-1px);
  }
}

/* =============================================================================
   CARDS AND BADGES
   ============================================================================= */

.card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.card-bordered {
  background: var(--color-white);
  border: 1px solid color-mix(in oklch, var(--color-gray-200) 82%, var(--color-white));
  border-radius: var(--radius-md);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

.badge-primary {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* =============================================================================
   LAYOUT
   ============================================================================= */

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Tailwind utilities used by the landing page */
.flex-1 { flex: 1 1 0%; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

@media (min-width: 768px) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-4);
  }

  .header-container {
    height: 64px;
  }

  .header-logo svg {
    width: 27px !important;
    height: 27px !important;
  }

  .logo {
    font-size: 19px;
    font-style: italic;
    transform: translateY(0);
  }

  .text-display {
    font-size: 32px;
  }

  .text-heading-1 {
    font-size: 24px;
  }

  .text-heading-2 {
    font-size: 18px;
  }

  .btn {
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
  }

  .btn-primary,
  .btn-secondary {
    padding: var(--space-3) var(--space-5);
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-3);
  }

  .text-display {
    font-size: 28px;
  }

  .text-heading-1 {
    font-size: 22px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    padding: 0 var(--space-5);
  }
}

@media (pointer: coarse) {
  .btn {
    min-height: 44px;
  }
}