/* Lastra — brand tokens */
:root {
  --brand-50:  oklch(0.97 0.018 255);
  --brand-100: oklch(0.93 0.04 255);
  --brand-200: oklch(0.86 0.07 255);
  --brand-300: oklch(0.76 0.11 255);
  --brand-400: oklch(0.64 0.15 255);
  --brand-500: oklch(0.52 0.17 255);
  --brand-600: oklch(0.45 0.17 255);
  --brand-700: oklch(0.38 0.15 255);
  --brand-800: oklch(0.30 0.12 255);
  --brand-900: oklch(0.25 0.09 255);
  --brand-950: oklch(0.18 0.07 255);

  --ink-950: oklch(0.14 0.015 255);
  --ink-900: oklch(0.19 0.015 255);
  --ink-800: oklch(0.26 0.012 255);
  --ink-700: oklch(0.38 0.010 255);
  --ink-600: oklch(0.50 0.008 255);
  --ink-500: oklch(0.62 0.006 255);
  --ink-400: oklch(0.74 0.005 255);
  --ink-300: oklch(0.84 0.005 255);
  --ink-200: oklch(0.91 0.005 255);
  --ink-100: oklch(0.95 0.004 255);
  --ink-50:  oklch(0.98 0.003 255);

  --paper: oklch(0.985 0.004 85);
  --paper-2: oklch(0.965 0.008 85);

  --success: oklch(0.52 0.14 155);
  --warning: oklch(0.68 0.15 80);
  --danger:  oklch(0.55 0.18 25);

  --font-display: "Fraunces", Georgia, serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink-900);
  font-family: var(--font-sans); font-feature-settings: "cv02","cv03","cv04","cv11","ss01";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
* { box-sizing: border-box; }
a { color: inherit; }

/* Responsive — mobile/tablet overrides, applied via data attributes on sections/containers */

/* Generic: grids collapse to 1 column on narrow screens */
@media (max-width: 900px) {
  /* Hide desktop-only elements */
  [data-desktop-only] { display: none !important; }
  /* Show mobile-only */
  [data-mobile-only] { display: flex !important; }

  /* Section padding shrinks */
  [data-section] { padding: 72px 20px !important; }

  /* All multi-column grids become single column */
  [data-grid-2], [data-grid-3], [data-grid-4], [data-grid-hero], [data-grid-split] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Secondary: 2-col grids inside dark card (validations) stay 1-col */
  [data-grid-2-inner] { grid-template-columns: 1fr !important; gap: 4px 0 !important; }

  /* Hero headline */
  [data-hero-title] {
    font-size: clamp(44px, 11vw, 68px) !important;
    line-height: 1.0 !important;
  }
  [data-section-title] {
    font-size: clamp(32px, 8.5vw, 48px) !important;
  }
  [data-hero-padding] { padding: 80px 20px 0 !important; }
  [data-cta-padding] { padding: 80px 20px !important; }

  /* Hero stat row stacks vertically, smaller */
  [data-hero-stats] { gap: 24px !important; flex-wrap: wrap !important; }
  [data-hero-stats] > div { flex: 1 1 45% !important; }
  [data-hero-stats] [data-stat-num] { font-size: 28px !important; }

  /* Nav */
  [data-nav] { padding: 0 20px !important; }
  [data-nav-center] { display: none !important; }
  [data-nav-cta-secondary] { display: none !important; }

  /* Footer */
  [data-footer] { padding: 56px 20px 32px !important; }
  [data-footer-grid] { grid-template-columns: 1fr !important; gap: 32px !important; padding-bottom: 32px !important; }
  [data-footer-bottom] { flex-direction: column !important; gap: 12px !important; align-items: flex-start !important; }

  /* Clients strip: 2 cols */
  [data-clients-grid] { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
  [data-clients] { padding: 40px 20px !important; }

  /* Solution dark card */
  [data-dark-card] { padding: 40px 24px !important; border-radius: 10px !important; }
  [data-dark-card-title] { font-size: 32px !important; }

  /* Security sticky col: unstick */
  [data-sticky] { position: static !important; }

  /* Quote */
  [data-quote] { padding: 80px 20px !important; }
  [data-quote-text] { font-size: 26px !important; line-height: 1.25 !important; }

  /* CTA */
  [data-cta-title] { font-size: clamp(32px, 8.5vw, 52px) !important; line-height: 1.04 !important; }
  [data-cta-card] { padding: 24px !important; }

  /* Hero card */
  [data-hero-card] { margin-top: 8px !important; }
  [data-hero-card-big-num] { font-size: 52px !important; }

  /* Solution step cards: reduce min-height */
  [data-step-card] { min-height: auto !important; padding: 24px !important; }

  /* Problem cards */
  [data-problem-card] { padding: 24px !important; }

  /* Buttons wrap nicely */
  [data-button-row] { flex-direction: column !important; align-items: stretch !important; }
  [data-button-row] a { width: 100% !important; justify-content: center !important; }
}

/* Tablet: 2 cols on 3/4-col grids */
@media (min-width: 901px) and (max-width: 1100px) {
  [data-grid-3], [data-grid-4] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-clients-grid] { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Mobile nav menu overlay */
[data-mobile-only] { display: none; }
[data-mobile-menu] {
  display: none;
}
[data-mobile-menu][data-open="true"] {
  position: fixed; inset: 0; background: var(--paper); z-index: 100;
  display: flex; flex-direction: column; padding: 24px 20px;
  animation: mm-slide 240ms cubic-bezier(0.2,0,0,1);
}
@keyframes mm-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }
[data-mobile-menu] a.mm-link { padding: 18px 0; font-size: 20px; font-family: 'Fraunces', serif; font-weight: 400; color: var(--ink-900); text-decoration: none; border-bottom: 1px solid var(--ink-200); letter-spacing: -0.01em; }