:root {
      /* ===== EXISTING COLOR PALETTE ===== */
      --color-primary: #7F858C;
      --color-primary-dark: #6A7076;
      --color-primary-light: #9BA1A8;
      --color-deep-core: #4E5459;
      --color-hero-bg: #0F1C2E;
      --color-grafite: #33383D;
      --color-neutral: #D9DCE0;
      --color-neutral-bg: #F4F5F7;
      --color-success: #2BAE9A;
      --color-warning: #C3A057;
      --color-danger: #E55E5E;
      --color-white: #FFFFFF;

      /* ===== SEMANTIC COLOR TOKENS ===== */
      --color-bg-primary: #060811;
      --color-bg-secondary: #0F1C2E;
      --color-bg-tertiary: #151e35;
      --color-bg-elevated: rgba(15,23,42,0.95);

      --color-text-primary: #FFFFFF;
      --color-text-secondary: #E5E7EB;
      --color-text-tertiary: #9CA3AF;
      --color-text-muted: #6B7280;

      --color-border-subtle: rgba(148, 163, 184, 0.16);
      --color-border-default: rgba(148, 163, 184, 0.35);
      --color-border-strong: rgba(148, 163, 184, 0.6);

      --overlay-subtle: rgba(15,23,42,0.5);
      --overlay-medium: rgba(15,23,42,0.8);
      --overlay-strong: rgba(5,6,10,0.95);

      /* ===== TYPOGRAPHY SCALE ===== */
      --font-display: "Inter Tight", system-ui, sans-serif;
      --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

      --text-xs: clamp(0.69rem, 0.66rem + 0.15vw, 0.75rem);
      --text-sm: clamp(0.83rem, 0.78rem + 0.24vw, 0.94rem);
      --text-base: clamp(1rem, 0.93rem + 0.37vw, 1.19rem);
      --text-lg: clamp(1.2rem, 1.09rem + 0.54vw, 1.48rem);
      --text-xl: clamp(1.44rem, 1.29rem + 0.76vw, 1.86rem);
      --text-2xl: clamp(1.73rem, 1.52rem + 1.03vw, 2.32rem);
      --text-3xl: clamp(2.07rem, 1.8rem + 1.37vw, 2.9rem);

      --leading-tight: 1.2;
      --leading-snug: 1.375;
      --leading-normal: 1.5;
      --leading-relaxed: 1.625;
      --leading-loose: 2;

      /* ===== SPACING SCALE (8px base) ===== */
      --space-1: 0.25rem;  /* 4px */
      --space-2: 0.5rem;   /* 8px */
      --space-3: 0.75rem;  /* 12px */
      --space-4: 1rem;     /* 16px */
      --space-5: 1.25rem;  /* 20px */
      --space-6: 1.5rem;   /* 24px */
      --space-8: 2rem;     /* 32px */
      --space-10: 2.5rem;  /* 40px */
      --space-12: 3rem;    /* 48px */
      --space-16: 4rem;    /* 64px */
      --space-20: 5rem;    /* 80px */
      --space-24: 6rem;    /* 96px */

      /* ===== LAYOUT TOKENS ===== */
      --max-width: 1120px;
      --container-padding: clamp(1rem, 5vw, 1.5rem);

      --gap-sm: var(--space-3);
      --gap-md: var(--space-6);
      --gap-lg: var(--space-10);

      /* ===== BORDER RADIUS ===== */
      --radius-sm: 6px;
      --radius-md: 8px;
      --radius-lg: 12px;
      --radius-xl: 16px;
      --radius-2xl: 22px;
      --radius-full: 999px;

      /* ===== SHADOWS ===== */
      --shadow-sm: 0 4px 12px rgba(0,0,0,0.05);
      --shadow-card: 0 10px 30px rgba(0,0,0,0.08);
      --shadow-lg: 0 18px 45px rgba(5,6,10,0.32);
      --shadow-xl: 0 24px 55px rgba(5,6,10,0.45);

      /* ===== TRANSITIONS ===== */
      --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
      --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
      --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

      --ease-in: cubic-bezier(0.4, 0, 1, 1);
      --ease-out: cubic-bezier(0, 0, 0.2, 1);
      --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
      --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

      /* ===== Z-INDEX SCALE ===== */
      --z-base: 1;
      --z-dropdown: 10;
      --z-sticky: 40;
      --z-fixed: 50;
      --z-modal-backdrop: 1000;
      --z-modal: 1001;
      --z-popover: 1010;
      --z-tooltip: 1020;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      background-color: #060811;
      color: var(--color-neutral-bg);
      font-size: 17px;
      line-height: 1.85;
      -webkit-font-smoothing: antialiased;
    }

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

    img {
      max-width: 100%;
      display: block;
    }

    /* ===== ACCESSIBILITY ENHANCEMENTS ===== */

    /* Enhanced focus states */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: 3px;
      border-radius: var(--radius-sm);
    }

    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* High contrast mode support */
    @media (prefers-contrast: high) {
      :root {
        --color-border-default: rgba(255, 255, 255, 0.6);
        --color-text-tertiary: #B0B0B0;
      }

      .card,
      .btn {
        border-width: 2px;
      }
    }

    .page {
      background: radial-gradient(circle at top, #151e35 0, #05060a 55%);
      min-height: 100vh;
      color: var(--color-neutral-bg);
    }

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

    /* Skip to content link for accessibility */
    .skip-to-content {
      position: absolute;
      top: -40px;
      left: 0;
      background: var(--color-primary);
      color: white;
      padding: 8px 16px;
      text-decoration: none;
      z-index: 100;
    }

    .skip-to-content:focus {
      top: 0;
    }

    header {
      position: sticky;
      top: 0;
      z-index: var(--z-sticky);
      background: var(--color-bg-primary);
      border-bottom: 1px solid var(--color-border-default);
      transition: border-color var(--transition-base), box-shadow var(--transition-base);
    }
    header.is-scrolled {
      box-shadow: 0 1px 0 0 rgba(0,0,0,0.4);
    }

    /* Section anchor target offset — prevents headings from disappearing under sticky header */
    section[id],
    h1[id],
    h2[id],
    h3[id] {
      scroll-margin-top: 96px;
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: nowrap;
      padding: 16px 0;
      gap: 12px;
      position: relative;
    }

    .nav-left {
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }

    .logo-icon {
      width: 48px;
      height: 48px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 0, #9BA1A8 0, #7F858C 38%, #4E5459 80%);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.2), 0 14px 35px rgba(15,23,42,0.75);
    }

    .logo-icon svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .core-orbit-icon,
    .core-orbit-logo {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .core-orbit-icon svg,
    .core-orbit-logo svg {
      display: block;
      width: 100%;
      height: auto;
    }

    .core-orbit-icon .orbit,
    .core-orbit-logo .orbit {
      transform-origin: 110px 110px;
      animation: orbit-spin 11s linear infinite;
    }

    .core-orbit-icon .orbit-2,
    .core-orbit-logo .orbit-2 {
      animation-duration: 9s;
      animation-delay: -1.2s;
      opacity: 0.85;
    }

    .core-orbit-icon .orbit-3,
    .core-orbit-logo .orbit-3 {
      animation-duration: 7.5s;
      animation-delay: -2s;
      opacity: 0.75;
    }

    .core-orbit-logo {
      width: 52px;
      height: 52px;
      background: radial-gradient(circle at 30% 0, #a5acb2 0, #7F858C 38%, #2b3035 82%);
      box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.18), 0 12px 30px rgba(5,6,10,0.8);
    }

    .logo-text {
      display: flex;
      flex-direction: column;
    }

    .logo-title {
      font-family: "Inter Tight", system-ui, sans-serif;
      font-size: 18px;
      font-weight: 600;
      white-space: nowrap;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .logo-subtitle {
      font-size: 14px;
      opacity: 0.7;
      white-space: nowrap;
      letter-spacing: 0.01em;
    }
    @media (max-width: 720px) {
      .logo-subtitle { display: none; }
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 18px;
      font-size: 15px;
      flex-wrap: nowrap;
      color: #E4E9F2;
    }

    .nav-links a {
      opacity: 0.8;
      white-space: nowrap;
      transition: opacity 0.2s ease;
    }

    .nav-links a:hover {
      opacity: 1;
    }

    .nav-cta {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .nav-cta .btn {
      white-space: nowrap;
      padding: 9px 14px;
      font-size: 14px;
    }

    .nav-admin {
      font-size: 14px;
      padding: 8px 14px;
      border-color: rgba(148, 163, 184, 0.35);
      background: rgba(15,23,42,0.45);
    }

    .nav-admin:hover {
      border-color: rgba(229, 231, 235, 0.7);
      background: rgba(15,23,42,0.75);
    }

    .language-switcher {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(15,23,42,0.5);
      border: 1px solid rgba(148, 163, 184, 0.3);
      white-space: nowrap;
    }

    .lang-link {
      cursor: pointer;
      opacity: 0.7;
      transition: opacity 0.2s ease;
      text-decoration: none;
      color: inherit;
    }

    .lang-link:hover {
      opacity: 1;
    }

    .lang-link.active {
      opacity: 1;
      font-weight: 500;
    }

    .lang-separator {
      opacity: 0.3;
    }

    /* Mobile menu toggle */
    .mobile-menu-toggle {
      display: none;
      background: none;
      border: none;
      color: #E5E7EB;
      cursor: pointer;
      padding: 8px;
      transition: opacity 0.2s ease;
    }

    .mobile-menu-toggle:hover {
      opacity: 0.7;
    }

    .mobile-menu-toggle svg {
      width: 24px;
      height: 24px;
    }

    .btn {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius-full);
      padding: 9px 18px;
      font-size: 15px;
      font-weight: 500;
      border: 1px solid transparent;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition:
        transform var(--transition-base),
        background var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base),
        color var(--transition-base);
      background: none;
      color: inherit;
      text-decoration: none;
      will-change: transform;
    }

    .btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
      opacity: 0;
      transition: opacity var(--transition-base);
      pointer-events: none;
    }

    .btn:hover::before {
      opacity: 1;
    }

    .btn:active {
      transform: scale(0.98);
    }

    .btn-primary {
      background: var(--color-primary);
      border-color: rgba(148, 163, 184, 0.3);
      color: var(--color-white);
      box-shadow: 0 8px 22px rgba(15,23,42,0.38);
    }

    .btn-primary:hover {
      background: var(--color-primary-dark);
      transform: translateY(-1px);
      box-shadow: 0 13px 30px rgba(15,23,42,0.65);
    }

    .btn-ghost {
      border-color: rgba(148, 163, 184, 0.5);
      color: #E5E7EB;
      background: rgba(15,23,42,0.5);
    }

    .btn-ghost:hover {
      border-color: rgba(229, 231, 235, 0.9);
      background: rgba(15,23,42,0.9);
    }

    main {
      padding-bottom: 110px;
    }

    /* Hero */
    .hero {
      padding: 90px 0 90px;
    }

    .hero-inner {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
      gap: 48px;
      align-items: center;
    }

    .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 4px 11px;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.35);
      background: radial-gradient(circle at top left, rgba(148,163,184,0.2) 0, rgba(15,23,42,0.8) 45%, rgba(15,23,42,0.95) 100%);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: #E5E7EB;
      margin-bottom: 16px;
    }

    .hero-tag-dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 0, #22c55e 0, #16a34a 30%, #14532d 80%);
      box-shadow: 0 0 0 5px rgba(34,197,94,0.14);
    }

        .hero-title {
      font-family: "Inter Tight", system-ui, sans-serif;
      font-size: clamp(42px, 4.2vw, 56px);
      line-height: 1.07;
      font-weight: 700;
      letter-spacing: -0.05em;
      margin-bottom: 16px;
      color: #FFFFFF;
    }

    .hero-title span.highlight {
      background-image: linear-gradient(120deg, #E5E7EB, #9BA1A8);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-subtitle {
      max-width: 600px;
      font-size: 17px;
      color: #E4E9F2;
      margin-bottom: 28px;
      line-height: 1.9;
    }

    .hero-subtitle strong {
      color: #E5E7EB;
      font-weight: 500;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      align-items: center;
      margin-bottom: 28px;
    }

    .hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      font-size: 12px;
      color: #9CA3AF;
    }

    .hero-meta span {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .hero-meta-badge {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--color-success);
      box-shadow: 0 0 0 5px rgba(34,197,94,0.18);
    }

    .hero-right {
      border-radius: 22px;
      border: 1px solid rgba(148, 163, 184, 0.35);
      padding: 18px 18px 18px 18px;
      background: radial-gradient(circle at top, rgba(148,163,184,0.18) 0, rgba(15,23,42,0.95) 55%);
      box-shadow: 0 22px 55px rgba(15,23,42,0.9);
    }

    /* Container for simple SVG illustrations (DAOR, Solutions, Advisory pages) */
    .hero-right.hero-illustration-container {
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      background: transparent;
      box-shadow: none;
      padding: 0;
    }

    .hero-illustration {
      width: 100%;
      height: auto;
      max-width: 400px;
    }

    .core-orbit-icon {
      width: 180px;
      max-width: 100%;
      margin: 0 auto 12px;
      filter: drop-shadow(0 16px 44px rgba(8,11,21,0.65));
    }

    @keyframes orbit-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .hero-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }

    .hero-panel-title {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: #9CA3AF;
    }

    .hero-panel-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: #9CA3AF;
    }

    .hero-panel-status-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--color-success);
    }

    .hero-panel-body {
      border-radius: 16px;
      background: linear-gradient(145deg, #020617, #020617 45%, #020617 70%, #111827);
      border: 1px solid rgba(51,65,85,0.8);
      padding: 16px 16px 12px;
    }

    .hero-panel-grid {
      display: grid;
      grid-template-columns: 2.2fr 2fr;
      gap: 12px;
    }

    .hero-yaml {
      background: radial-gradient(circle at top, rgba(15,23,42,0.9) 0, #020617 50%);
      border-radius: 12px;
      border: 1px solid rgba(55, 65, 81, 0.8);
      padding: 12px 12px;
      font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 11px;
      color: #E5E7EB;
      overflow: hidden;
    }

    .hero-yaml pre {
      white-space: pre;
      overflow-x: auto;
    }

    .hero-yaml .comment {
      color: #6B7280;
    }

    .hero-yaml .key {
      color: #E5E7EB;
    }

    .hero-yaml .value {
      color: #7DD3FC;
    }

    .hero-yaml .scalar {
      color: #FACC15;
    }

    .hero-decision {
      background: radial-gradient(circle at top, rgba(17,24,39,0.7) 0, #020617 60%);
      border-radius: 12px;
      border: 1px solid rgba(55, 65, 81, 0.9);
      padding: 12px 12px 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .hero-decision-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: 12px;
      color: #E5E7EB;
    }

    .hero-decision-label {
      opacity: 0.7;
      font-size: 11px;
    }

    .confidence-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 3px 9px;
      background: rgba(34,197,94,0.09);
      color: #bbf7d0;
      font-size: 11px;
    }

    .confidence-dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--color-success);
    }

    .rationale-box {
      background: rgba(15,23,42,0.9);
      border-radius: 9px;
      padding: 8px 9px;
      border: 1px dashed rgba(75, 85, 99, 0.9);
      font-size: 11px;
      color: #EAF0F9;
    }

    .rationale-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: #9CA3AF;
      margin-bottom: 4px;
    }

    .hero-decision-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 10px;
      color: #9CA3AF;
      border-top: 1px solid rgba(55,65,81,0.8);
      padding-top: 6px;
      margin-top: 4px;
    }

    /* Sections */
    section {
      padding: 72px 0;
      position: relative;
    }

    section + section {
      border-top: 1px solid rgba(127,133,140,0.12);
    }

    section +     section {
      padding: 52px 0;
      position: relative;
    }

    section + section {
      border-top: 1px solid rgba(127,133,140,0.12);
    }

    .section-header {
      text-align: left;
      margin-bottom: 34px;
    }

    .section-kicker {
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #9CA3AF;
      margin-bottom: 8px;
    }

    .section-title {
      font-family: "Inter Tight", system-ui, sans-serif;
      font-size: 28px;
      letter-spacing: -0.03em;
      font-weight: 700;
      color: #FFFFFF;
      margin-bottom: 6px;
    }

    .section-subtitle {
      font-size: 15.5px;
      color: #E0E6F1;
      max-width: 560px;
      line-height: 1.85;
    }

    /* Value cards */
    .value-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px;
    }

    .card {
      border-radius: var(--radius-lg);
      border: 1px solid rgba(148, 163, 184, 0.25);
      background: radial-gradient(circle at top, rgba(15,23,42,0.9) 0, #020617 60%);
      padding: 20px 20px 18px;
      box-shadow: var(--shadow-lg);
      transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base);
      will-change: transform;
    }

    .card:hover {
      transform: translateY(-6px) scale(1.01);
      border-color: rgba(148,163,184,0.45);
      box-shadow:
        var(--shadow-xl),
        0 0 0 1px rgba(148,163,184,0.3);
    }

    .card:focus-within {
      outline: 2px solid var(--color-primary);
      outline-offset: 3px;
    }

    .card-title {
      font-size: 15px;
      font-weight: 500;
      color: #E5E7EB;
      margin-bottom: 6px;
    }

    .card-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: #9CA3AF;
      margin-bottom: 8px;
    }

    .card-pill-dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--color-primary);
    }

            .card-text {
      font-size: 15px;
      color: #E0E6F1;
      line-height: 1.85;
    }

    /* How it works */
    .how-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.3fr);
      gap: 30px;
      align-items: flex-start;
    }

    .how-steps {
      display: grid;
      gap: 10px;
    }

    .step {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 12px;
      align-items: flex-start;
      padding: 10px 0;
      border-bottom: 1px solid rgba(55,65,81,0.8);
    }

    .step-badge {
      width: 26px;
      height: 26px;
      border-radius: 999px;
      background: rgba(15,23,42,0.9);
      border: 1px solid rgba(148,163,184,0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #E5E7EB;
    }

    .step-title {
      font-size: 14px;
      font-weight: 500;
      color: #E5E7EB;
      margin-bottom: 3px;
    }

    .step-text {
      font-size: 13px;
      color: #9CA3AF;
    }

    .how-panel {
      border-radius: var(--radius-md);
      border: 1px solid rgba(148, 163, 184, 0.25);
      background: linear-gradient(150deg, #020617, #020617 48%, #111827 100%);
      padding: 16px 16px 12px;
      box-shadow: var(--shadow-card);
    }

    .how-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      font-size: 12px;
      color: #9CA3AF;
    }

    .how-tag {
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.4);
      padding: 2px 8px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: #E5E7EB;
    }

    .badge-state {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
    }

    .badge-state-dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--color-success);
    }

    .how-metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 10px;
      font-size: 12px;
      color: #E5E7EB;
    }

    .how-metric-label {
      font-size: 12px;
      opacity: 0.75;
    }

    .how-metric-value {
      font-size: 13px;
    }

    /* Use cases */
    .usecases-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 3px 9px;
      font-size: 11px;
      border: 1px solid rgba(148,163,184,0.4);
      color: #E5E7EB;
      margin-bottom: 8px;
    }

    .badge-dot-success {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--color-success);
    }

    .badge-dot-warning {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--color-warning);
    }

    .badge-dot-info {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--color-primary-light);
    }

    /* Architecture placeholder */
    .arch-panel {
      border-radius: var(--radius-md);
      border: 1px dashed rgba(148,163,184,0.6);
      background: rgba(15,23,42,0.7);
      padding: 18px;
      text-align: center;
      font-size: 13px;
      color: #9CA3AF;
    }

    .arch-panel strong {
      color: #E5E7EB;
    }

    /* CTA final */
    .cta-final {
      border-radius: 22px;
      padding: 28px 28px 24px;
      background: linear-gradient(135deg, #7F858C, #4E5459);
      color: #FFFFFF;
      display: grid;
      grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.2fr);
      gap: 20px;
      align-items: center;
      margin-top: 20px;
      box-shadow: 0 22px 60px rgba(15,23,42,0.8);
    }

    .cta-title {
      font-family: "Inter Tight", system-ui, sans-serif;
      font-size: 22px;
      letter-spacing: -0.03em;
      margin-bottom: 6px;
    }

    .cta-text {
      font-size: 16px;
      opacity: 0.9;
    }

    .cta-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: flex-end;
    }

    .btn-light {
      background: #F9FAFB;
      color: #111827;
      border-color: rgba(15,23,42,0.1);
      box-shadow: 0 10px 24px rgba(15,23,42,0.35);
    }

    .btn-light:hover {
      background: #E5E7EB;
      transform: translateY(-1px);
    }

    .btn-outline-light {
      border-color: rgba(249,250,251,0.9);
      color: #FFFFFF;
      background: transparent;
    }

    .btn-outline-light:hover {
      background: rgba(15,23,42,0.18);
    }

    /* Insights / Blog section */
    #insights {
      background:
        radial-gradient(circle at 12% 0%, rgba(43,174,154,0.14), transparent 46%),
        radial-gradient(circle at 88% 100%, rgba(125,211,252,0.09), transparent 38%);
    }

    .insights-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
      gap: var(--space-5);
      align-items: stretch;
    }

    .insight-featured {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius-xl);
      border: 1px solid rgba(148, 163, 184, 0.32);
      background: linear-gradient(135deg, rgba(15,23,42,0.95), rgba(2,6,23,0.94) 58%, rgba(10,20,40,0.94));
      padding: clamp(1.35rem, 1.2rem + 0.8vw, 1.9rem);
      box-shadow: 0 20px 46px rgba(5,6,10,0.6);
    }

    .insight-featured::before {
      content: "";
      position: absolute;
      left: -60px;
      top: -70px;
      width: 180px;
      height: 180px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(43,174,154,0.24), transparent 70%);
      pointer-events: none;
    }

    .insight-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--text-xs);
      color: #b7c1d2;
      margin-bottom: var(--space-4);
      position: relative;
      z-index: var(--z-base);
    }

    .insight-type {
      border-radius: var(--radius-full);
      border: 1px solid rgba(43,174,154,0.45);
      background: rgba(43,174,154,0.16);
      color: #d6f5ef;
      padding: 0.15rem 0.55rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      font-weight: 600;
    }

    .insight-dot {
      width: 4px;
      height: 4px;
      border-radius: 999px;
      background: rgba(229, 231, 235, 0.55);
    }

    .insight-featured-title {
      font-family: var(--font-display);
      font-size: clamp(1.45rem, 1.2rem + 1vw, 2.05rem);
      line-height: var(--leading-snug);
      letter-spacing: -0.03em;
      margin-bottom: var(--space-4);
      color: #f8fafc;
      position: relative;
      z-index: var(--z-base);
    }

    .insight-featured-lead,
    .insight-featured-body {
      color: #d7dfec;
      font-size: var(--text-sm);
      line-height: var(--leading-relaxed);
      margin-bottom: var(--space-3);
      max-width: 64ch;
      position: relative;
      z-index: var(--z-base);
    }

    .insight-quote {
      margin: var(--space-4) 0;
      padding: var(--space-3) var(--space-4);
      border-left: 3px solid rgba(125,211,252,0.6);
      border-radius: var(--radius-sm);
      background: rgba(15,23,42,0.68);
      color: #dbe8fd;
      font-size: var(--text-sm);
      line-height: var(--leading-relaxed);
      font-style: italic;
      position: relative;
      z-index: var(--z-base);
    }

    .insight-tags {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      margin-top: var(--space-4);
      position: relative;
      z-index: var(--z-base);
    }

    .insight-tag {
      border-radius: var(--radius-full);
      border: 1px solid rgba(148, 163, 184, 0.38);
      background: rgba(15,23,42,0.65);
      color: #e4e9f2;
      padding: 0.2rem 0.6rem;
      font-size: var(--text-xs);
      line-height: 1.3;
    }

    .insight-featured-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3);
      align-items: center;
      margin-top: var(--space-5);
      position: relative;
      z-index: var(--z-base);
    }

    .insight-side {
      border-radius: var(--radius-xl);
      border: 1px solid rgba(148, 163, 184, 0.28);
      background: linear-gradient(160deg, rgba(15,23,42,0.85), rgba(2,6,23,0.92));
      padding: clamp(1.1rem, 1rem + 0.6vw, 1.5rem);
      box-shadow: 0 16px 36px rgba(5,6,10,0.45);
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      justify-content: flex-start;
    }

    .insight-side-title {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      color: #f3f4f6;
      letter-spacing: -0.02em;
    }

    .insight-checklist {
      list-style: none;
      display: grid;
      gap: var(--space-3);
      margin: 0;
      padding: 0;
    }

    .insight-checklist li {
      position: relative;
      padding-left: 1.1rem;
      color: #d7dfec;
      font-size: var(--text-sm);
      line-height: var(--leading-relaxed);
    }

    .insight-checklist li::before {
      content: ">";
      position: absolute;
      left: 0;
      top: 0;
      color: #7dd3fc;
      font-weight: 700;
    }

    .insight-side-note {
      color: #aebad0;
      font-size: var(--text-xs);
      line-height: var(--leading-relaxed);
      border-top: 1px solid rgba(148, 163, 184, 0.2);
      padding-top: var(--space-4);
    }

    @media (max-width: 960px) {
      .insights-layout {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    @media (max-width: 720px) {
      .insight-featured,
      .insight-side {
        border-radius: var(--radius-lg);
      }

      .insight-featured-actions .btn {
        width: 100%;
      }
    }

    @media (max-width: 480px) {
      .insight-meta {
        gap: 0.35rem;
      }

      .insight-featured-title {
        letter-spacing: -0.02em;
      }
    }

    footer {
      padding: 28px 0 38px;
      font-size: 11px;
      color: #6B7280;
      border-top: 1px solid rgba(31,41,55,0.8);
      margin-top: 40px;
    }

    .footer-inner {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      align-items: center;
      gap: 12px;
    }

    .footer-links {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .footer-links a {
      opacity: 0.7;
      transition: opacity 0.2s ease;
    }

    .footer-links a:hover {
      opacity: 1;
    }

    .footer-social {
      display: inline-flex;
      align-items: center;
    }


    .footer-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 0;
      flex-wrap: wrap;
    }

    .footer-row-top {
      border-bottom: 1px solid var(--color-border-default);
    }

    .footer-row-bottom {
      justify-content: center;
      gap: 28px;
      padding-top: 18px;
      padding-bottom: 0;
    }

    .footer-row-bottom a {
      color: var(--color-text-muted);
      opacity: 0.7;
      transition: opacity 0.2s ease;
      text-decoration: none;
      font-size: 0.875rem;
    }

    .footer-row-bottom a:hover { opacity: 1; }

    .footer-socials {
      display: inline-flex;
      gap: 14px;
      align-items: center;
    }

    .footer-socials a {
      display: inline-flex;
      align-items: center;
      color: var(--color-text-primary);
      opacity: 1;
      transition: color 0.2s ease, transform 0.2s ease;
    }

    .footer-socials a:hover {
      color: var(--color-success);
      transform: translateY(-1px);
    }

    /* Modal styles */
    .modal-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--overlay-strong);
      backdrop-filter: blur(4px);
      z-index: var(--z-modal-backdrop);
      align-items: center;
      justify-content: center;
      padding: var(--space-5);
      animation: fadeIn var(--transition-base) var(--ease-out);
    }

    .modal-overlay.active {
      display: flex;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    .modal {
      background: linear-gradient(145deg, var(--color-bg-secondary), #020617);
      border-radius: var(--radius-xl);
      border: 1px solid var(--color-border-default);
      max-width: 480px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
      animation: slideUp var(--transition-slow) var(--ease-out);
    }

    @keyframes slideUp {
      from {
        transform: translateY(20px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .modal-header {
      padding: 24px 24px 16px;
      border-bottom: 1px solid rgba(148, 163, 184, 0.2);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }

    .modal-title {
      font-family: "Inter Tight", system-ui, sans-serif;
      font-size: 22px;
      font-weight: 600;
      color: #FFFFFF;
      margin-bottom: 4px;
    }

    .modal-subtitle {
      font-size: 13px;
      color: #9CA3AF;
    }

    .modal-close {
      background: none;
      border: none;
      color: #9CA3AF;
      cursor: pointer;
      padding: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.2s ease;
      margin-left: 16px;
    }

    .modal-close:hover {
      color: #E5E7EB;
    }

    .modal-close svg {
      width: 24px;
      height: 24px;
    }

    .modal-body {
      padding: 24px;
    }

    .form-group {
      margin-bottom: 18px;
    }

    .form-label {
      display: block;
      font-size: 14px;
      font-weight: 500;
      color: #E5E7EB;
      margin-bottom: 6px;
    }

    .form-label .required {
      color: #E55E5E;
    }

    .form-input,
    .form-select,
    .form-textarea {
      width: 100%;
      padding: 10px 14px;
      background: #0f1624;
      border: 1px solid rgba(148, 163, 184, 0.35);
      border-radius: 10px;
      color: #e4e9f2;
      caret-color: #e4e9f2;
      font-size: 14px;
      font-family: inherit;
      transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
      outline: none;
    }

    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
      border-color: var(--color-primary);
      background: #111a2b;
      box-shadow: 0 0 0 3px rgba(127, 133, 140, 0.2);
    }

    .form-textarea {
      resize: vertical;
      min-height: 100px;
    }

    .form-help {
      font-size: 12px;
      color: #9CA3AF;
      margin-top: 4px;
    }

    .modal-footer {
      padding: 16px 24px 24px;
      display: flex;
      gap: 10px;
      justify-content: flex-end;
    }

    .btn-secondary {
      background: rgba(15, 23, 42, 0.8);
      border-color: rgba(148, 163, 184, 0.4);
      color: #E5E7EB;
    }

    .btn-secondary:hover {
      background: rgba(15, 23, 42, 0.95);
    }

    .success-message {
      display: none;
      text-align: center;
      padding: 40px 24px;
    }

    .success-message.active {
      display: block;
    }

    .success-icon {
      width: 64px;
      height: 64px;
      margin: 0 auto 16px;
      background: rgba(34, 197, 94, 0.15);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .success-icon svg {
      width: 32px;
      height: 32px;
      color: var(--color-success);
    }

    .success-title {
      font-size: 24px;
      font-weight: 600;
      line-height: 1.25;
      color: #FFFFFF;
      margin-bottom: 8px;
    }

    .success-text {
      font-size: 14px;
      color: #9CA3AF;
      margin-bottom: 24px;
    }

    /* ===== Talk to DAOR — two-pane modal (scoped to .modal--split) ===== */
    .modal--split {
      display: flex;
      max-width: 860px;
      flex-direction: row;
      align-items: stretch;
      overflow: hidden;           /* each pane manages its own scroll */
      padding: 0;
    }

    .modal-aside {
      width: 290px;
      flex-shrink: 0;
      padding: 28px 24px;
      background: linear-gradient(160deg, #10203a, #0a1322);
      border-right: 1px solid rgba(148, 163, 184, 0.18);
      display: flex;
      flex-direction: column;
      gap: 22px;
    }

    .modal-main {
      flex: 1;
      min-width: 0;
      max-height: 90vh;
      overflow-y: auto;
    }

    .aside-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      width: max-content;
      font-family: "JetBrains Mono", monospace;
      font-size: 11px;
      color: #2BAE9A;
      background: rgba(43, 174, 154, 0.1);
      border: 1px solid rgba(43, 174, 154, 0.3);
      border-radius: 20px;
      padding: 3px 9px;
    }
    .aside-badge::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #2BAE9A;
    }

    .aside-title {
      font-family: "Inter Tight", system-ui, sans-serif;
      font-size: 21px;
      font-weight: 600;
      line-height: 1.25;
      color: #FFFFFF;
    }
    .aside-subtitle {
      font-size: 13px;
      color: #9CA3AF;
      line-height: 1.5;
      margin-top: 6px;
    }

    .aside-steps {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .aside-step {
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }
    .aside-step-n {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      border-radius: 50%;
      background: rgba(43, 174, 154, 0.14);
      color: #2BAE9A;
      font-family: "JetBrains Mono", monospace;
      font-size: 12px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .aside-step-t {
      font-size: 13px;
      color: #E5E7EB;
      line-height: 1.4;
    }
    .aside-step-t span {
      display: block;
      color: #9CA3AF;
      font-size: 12px;
      margin-top: 2px;
    }

    .aside-foot {
      margin-top: auto;
      font-size: 12px;
      color: #6B7280;
      line-height: 1.5;
    }
    .aside-foot strong {
      color: #9CA3AF;
      font-weight: 600;
    }

    .modal-main-title {
      font-family: "Inter Tight", system-ui, sans-serif;
      font-size: 16px;
      font-weight: 600;
      color: #E5E7EB;
    }

    /* Compact 2-column form grid */
    .modal--split .modal-header {
      padding: 20px 24px 8px;
      border-bottom: none;
    }
    .modal--split .modal-body {
      padding: 8px 24px 20px;
    }
    .modal--split .form-group {
      margin-bottom: 14px;
    }
    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 16px;
    }
    .form-grid .span-2 {
      grid-column: 1 / -1;
    }

    /* Responsive: stack panes + single column below 720px */
    @media (max-width: 720px) {
      .modal--split {
        flex-direction: column;
        max-width: 92vw;
        overflow-y: auto;
      }
      .modal-aside {
        width: auto;
        border-right: none;
        border-bottom: 1px solid rgba(148, 163, 184, 0.18);
        padding: 20px 24px;
        gap: 12px;
      }
      .modal-aside .aside-steps,
      .modal-aside .aside-foot {
        display: none;          /* keep mobile compact — context lives in main */
      }
      .modal-main {
        max-height: none;
        overflow-y: visible;
      }
      .form-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ===== ANIMATIONS ===== */

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes slideUp {
      from {
        transform: translateY(20px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    /* Hero content animations */
    .hero-left > * {
      animation: fadeInUp 0.6s var(--ease-out) backwards;
    }

    .hero-left > *:nth-child(1) { animation-delay: 0.1s; }
    .hero-left > *:nth-child(2) { animation-delay: 0.2s; }
    .hero-left > *:nth-child(3) { animation-delay: 0.3s; }
    .hero-left > *:nth-child(4) { animation-delay: 0.4s; }
    .hero-left > *:nth-child(5) { animation-delay: 0.5s; }

    .hero-right {
      animation: fadeInUp 0.8s var(--ease-out) 0.3s backwards;
    }

    /* Card entrance animations */
    .value-grid .card,
    .usecases-grid .card {
      animation: fadeInUp 0.5s var(--ease-out) backwards;
    }

    .value-grid .card:nth-child(1),
    .usecases-grid .card:nth-child(1) { animation-delay: 0.1s; }
    .value-grid .card:nth-child(2),
    .usecases-grid .card:nth-child(2) { animation-delay: 0.2s; }
    .value-grid .card:nth-child(3),
    .usecases-grid .card:nth-child(3) { animation-delay: 0.3s; }

    /* Button loading state */
    .btn.is-loading {
      pointer-events: none;
      position: relative;
      color: transparent !important;
    }

    .btn.is-loading::after {
      content: '';
      position: absolute;
      width: 16px;
      height: 16px;
      top: 50%;
      left: 50%;
      margin: -8px 0 0 -8px;
      border: 2px solid currentColor;
      border-radius: 50%;
      border-top-color: transparent;
      color: var(--color-white);
      animation: spin 0.6s linear infinite;
    }

    /* Responsive */
    @media (max-width: 960px) {
      .hero-inner {
        grid-template-columns: minmax(0, 1fr);
      }

      .hero-right {
        order: -1;
      }

    .cta-final {
      border-radius: 22px;
      padding: 28px 28px 24px;
      background: linear-gradient(135deg, #7F858C, #4E5459);
      color: #FFFFFF;
      display: grid;
      grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.2fr);
      gap: 20px;
      align-items: center;
      margin-top: 20px;
      box-shadow: 0 22px 60px rgba(15,23,42,0.8);
    }

      .cta-actions {
        justify-content: flex-start;
      }
    }

    @media (max-width: 780px) {
      .nav {
        gap: 12px;
      }

      .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(5,6,10,0.98);
        flex-direction: column;
        padding: 20px;
        border-bottom: 1px solid rgba(127,133,140,0.16);
        gap: 12px;
      }

      .nav-links.active {
        display: flex;
      }

      .nav-links a {
        padding: 8px 0;
        width: 100%;
      }

      .mobile-menu-toggle {
        display: block;
      }

      .nav-cta .btn-ghost {
        display: none;
      }

      .nav-cta .nav-admin {
        display: none;
      }

    .hero {
      padding: 90px 0 90px;
    }

      .core-orbit-icon {
        width: 150px;
        margin: 0 auto 10px;
      }

      .hero-panel-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .value-grid,
    .usecases-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px;
    }

    .how-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.3fr);
      gap: 30px;
      align-items: flex-start;
    }

    section {
      padding: 72px 0;
      position: relative;
    }

    section + section {
      border-top: 1px solid rgba(127,133,140,0.12);
    }

      .modal {
        margin: 20px;
      }
    }

    @media (max-width: 480px) {
      .logo-subtitle {
        display: none;
      }

        .hero-title {
      font-family: "Inter Tight", system-ui, sans-serif;
      font-size: clamp(42px, 4.2vw, 56px);
      line-height: 1.07;
      font-weight: 700;
      letter-spacing: -0.05em;
      margin-bottom: 16px;
      color: #FFFFFF;
    }

      .modal-footer {
        flex-direction: column;
      }

      .modal-footer .btn {
        width: 100%;
        justify-content: center;
      }
    }
  /* ===== PRODUCT PAGES STYLES ===== */

  /* Product Hero Tag (replacing breadcrumb) */
  .product-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 11px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-default);
    background: radial-gradient(circle at top left, rgba(148,163,184,0.2) 0, rgba(15,23,42,0.8) 45%, rgba(15,23,42,0.95) 100%);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-secondary);
    margin-bottom: 16px;
  }

  .product-tag-dot {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    box-shadow: 0 0 0 5px rgba(34,197,94,0.14);
  }

  .product-tag-dot.success {
    background: radial-gradient(circle at 30% 0, #22c55e 0, #16a34a 30%, #14532d 80%);
  }

  .product-tag-dot.warning {
    background: radial-gradient(circle at 30% 0, var(--color-warning) 0, #b8923f 30%, #6d5625 80%);
  }

  .product-tag-dot.info {
    background: radial-gradient(circle at 30% 0, #60a5fa 0, #3b82f6 30%, #1e40af 80%);
  }

  /* Product Hero Image */
  .product-hero-visual {
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border-default);
    padding: var(--space-6);
    background: radial-gradient(circle at top, rgba(148,163,184,0.15) 0, rgba(15,23,42,0.95) 55%);
    box-shadow: var(--shadow-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    position: relative;
    overflow: hidden;
  }

  .product-hero-visual::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-primary-light), transparent);
  }

  .product-illustration {
    width: 100%;
    max-width: 400px;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.3));
  }

  /* Stats Cards (replacing stats-panel) */
  .stats-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-5);
  }

  .stat-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-default);
    background: radial-gradient(circle at top, rgba(15,23,42,0.9) 0, #020617 60%);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
    transition:
      transform var(--transition-base),
      box-shadow var(--transition-base),
      border-color var(--transition-base);
    will-change: transform;
  }

  .stat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(148,163,184,0.4);
    box-shadow: var(--shadow-xl);
  }

  .stat-card-value {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
    background: linear-gradient(120deg, #E5E7EB, var(--color-primary-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .stat-card-label {
    font-size: 14px;
    color: var(--color-text-tertiary);
    line-height: var(--leading-relaxed);
  }

  /* Carousel Container */
  .carousel-container {
    position: relative;
    margin-top: var(--space-8);
  }

  .carousel-wrapper {
    overflow: hidden;
    padding: 2px; /* Prevent focus outline clipping */
  }

  .carousel-track {
    display: flex;
    gap: var(--space-5);
    align-items: stretch;
    transition: transform var(--transition-slow) var(--ease-in-out);
    will-change: transform;
  }

  .carousel-slide {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
  }

  .carousel-slide .card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  @media (min-width: 768px) {
    .carousel-slide {
      width: calc((100% - var(--space-5)) / 2);
    }
  }

  @media (min-width: 1024px) {
    .carousel-slide {
      width: calc((100% - (var(--space-5) * 2)) / 3);
    }
  }

  /* Carousel Controls */
  .carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-8);
  }

  .carousel-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-default);
    background: var(--overlay-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
      background var(--transition-base),
      border-color var(--transition-base),
      transform var(--transition-fast);
  }

  .carousel-btn:hover:not(:disabled) {
    background: var(--overlay-strong);
    border-color: var(--color-border-strong);
    transform: scale(1.05);
  }

  .carousel-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  .carousel-btn svg {
    width: 20px;
    height: 20px;
  }

  /* Carousel Indicators */
  .carousel-indicators {
    display: flex;
    gap: var(--space-2);
  }

  .carousel-indicator {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: rgba(148, 163, 184, 0.3);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all var(--transition-base);
  }

  .carousel-indicator.active {
    width: 24px;
    background: var(--color-primary);
  }

  /* Smaller carousel cards for capabilities */
  .carousel-compact .carousel-slide .card {
    padding: var(--space-5);
  }

  .carousel-compact .carousel-slide .card-title {
    font-size: 16px;
    margin-bottom: var(--space-3);
  }

  .carousel-compact .carousel-slide .card-text {
    font-size: 14px;
  }

  /* Responsive fallbacks for heroes and visuals */
  @media (max-width: 900px) {
    .hero-inner {
      grid-template-columns: 1fr;
    }

    .hero-right,
    .product-hero-visual {
      width: 100%;
      order: 2;
    }

    .hero-panel-body,
    .product-hero-visual svg,
    .hero-right svg {
      width: 100%;
      height: auto;
      max-width: 100%;
    }

    .hero-panel-body {
      overflow-x: auto;
    }
  }

  /* Mobile-friendly carousel fallback */
  @media (max-width: 720px) {
    .carousel-wrapper {
      overflow-x: auto;
      scroll-snap-type: x mandatory;
    }

    .carousel-track {
      gap: var(--space-4);
    }

    .carousel-slide {
      min-width: calc(100% - var(--space-4));
      scroll-snap-align: start;
    }

    .carousel-controls {
      display: none;
    }

    /* Compact hero panel for mobile */
    .hero-right,
    .hero-panel-body {
      max-height: 460px;
    }

    .hero-panel-body {
      overflow-y: auto;
    }

    .hero-yaml pre {
      font-size: 12px;
      line-height: 1.4;
      white-space: pre-wrap;
      word-break: break-word;
    }
  }

  /* Core page mobile graphic */
  .hero-mobile-graphic {
    display: none;
    background: linear-gradient(145deg, rgba(59,130,246,0.08), rgba(16,185,129,0.08));
    border: 1px solid rgba(148,163,184,0.25);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-top: var(--space-4);
  }

  .hero-mobile-label {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-3);
  }

  .hero-mobile-card {
    display: grid;
    gap: var(--space-3);
  }

  .hero-mobile-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--color-text-secondary);
  }

  .hero-mobile-key {
    color: var(--color-text-tertiary);
  }

  .hero-mobile-value {
    color: var(--color-text);
    font-weight: 600;
  }

  /* Nav dropdown for Solutions */
  .nav-dropdown {
    position: relative;
  }

  .nav-dropdown > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .nav-dropdown .chevron {
    width: 12px;
    height: 12px;
    transition: transform var(--transition-base);
  }

.nav-dropdown .chevron.open {
  transform: rotate(180deg);
}

  .nav-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--color-surface-elevated);
    border: 1px solid rgba(148,163,184,0.2);
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    z-index: 20;
  }

  .nav-submenu.open {
    display: block;
  }

  .nav-submenu a {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    font-size: 14px;
  }

  .nav-submenu a:hover {
    background: rgba(148,163,184,0.1);
  }

  @media (max-width: 900px) {
    .nav-dropdown {
      width: 100%;
    }

  .nav-submenu {
    position: static;
    display: none;
    box-shadow: none;
    border: 1px solid rgba(148,163,184,0.15);
    margin-top: var(--space-2);
  }

  .nav-submenu.open {
    display: block;
  }
}

.nav-dropdown:hover .nav-submenu {
  display: block;
  pointer-events: auto;
}

.nav-dropdown:hover .chevron {
  transform: rotate(180deg);
}
  @media (max-width: 720px) {
    .hero-right {
      display: none;
    }

    /* Show simple SVG illustrations on mobile (unlike complex panels) */
    .hero-right.hero-illustration-container {
      display: flex;
      margin-top: var(--space-4);
    }

    .hero-right.hero-illustration-container .hero-illustration {
      max-width: 280px;
      margin: 0 auto;
    }

    .hero-mobile-graphic {
      display: block;
    }
  }

  @media (max-width: 480px) {
    .hero-right.hero-illustration-container .hero-illustration {
      max-width: 220px;
    }
  }

  /* Grid Layouts for Product Pages */
  .two-col-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5);
  }

  .three-col-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-5);
  }

  /* Card Lists */
  .card-list {
    list-style: none;
    margin-top: var(--space-4);
    padding: 0;
  }

  .card-list li {
    padding: var(--space-2) 0;
    padding-left: var(--space-6);
    position: relative;
    font-size: 14px;
    color: var(--color-text-tertiary);
    line-height: var(--leading-relaxed);
  }

  .card-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-success);
    font-weight: 600;
  }

  /* Responsive Adjustments for Product Pages */
  @media (max-width: 768px) {
    .carousel-slide {
      min-width: 100%;
    }

    .stats-card-grid {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .product-hero-visual {
      min-height: 200px;
    }
  }

  /* Suri Chat widget styles - now provided by @nexo/suri-chat package */


  /* ============================================
   * COOKIE CONSENT BANNER
   * LGPD + Marco Civil Compliant
   * ============================================ */

  .cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-modal);
    background: linear-gradient(180deg, var(--color-bg-secondary) 0%, #020617 100%);
    border-top: 1px solid var(--color-border-default);
    padding: var(--space-5) var(--space-4);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
  }

  .cookie-consent-banner.active {
    transform: translateY(0);
    opacity: 1;
  }

  .cookie-consent-container {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .cookie-consent-content {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .cookie-consent-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: rgba(43, 174, 154, 0.15);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-success);
  }

  .cookie-consent-icon svg {
    width: 24px;
    height: 24px;
  }

  .cookie-consent-text {
    flex: 1;
  }

  .cookie-consent-title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
  }

  .cookie-consent-description {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin: 0;
  }

  .cookie-consent-link {
    color: var(--color-success);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.2s ease;
  }

  .cookie-consent-link:hover {
    text-decoration-color: var(--color-success);
  }

  .cookie-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: flex-end;
  }

  .cookie-consent-btn {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    outline: none;
    white-space: nowrap;
  }

  .cookie-consent-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .cookie-consent-btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-success) 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(43, 174, 154, 0.25);
  }

  .cookie-consent-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(43, 174, 154, 0.35);
  }

  .cookie-consent-btn-secondary {
    background: rgba(148, 163, 184, 0.1);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-default);
  }

  .cookie-consent-btn-secondary:hover {
    background: rgba(148, 163, 184, 0.15);
    color: var(--color-text-primary);
    border-color: var(--color-border-muted);
  }

  /* Mobile responsive */
  @media (max-width: 768px) {
    .cookie-consent-banner {
      padding: var(--space-4);
    }

    .cookie-consent-content {
      flex-direction: column;
      gap: var(--space-3);
    }

    .cookie-consent-icon {
      width: 36px;
      height: 36px;
    }

    .cookie-consent-icon svg {
      width: 20px;
      height: 20px;
    }

    .cookie-consent-actions {
      flex-direction: column;
      width: 100%;
    }

    .cookie-consent-btn {
      width: 100%;
      justify-content: center;
      text-align: center;
    }
  }

  /* ============================================
   * ENHANCED FOOTER
   * ============================================ */

  footer.enhanced {
    padding: var(--space-6) 0 var(--space-8);
  }

  footer.enhanced .footer-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  }

  .footer-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .footer-copyright {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
  }

  .footer-social {
    display: flex;
    gap: var(--space-3);
  }

  .footer-social-link {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.12);
    color: var(--color-text-tertiary);
    transition: all 0.2s ease;
  }

  .footer-social-link:hover {
    background: rgba(148, 163, 184, 0.15);
    color: var(--color-text-primary);
    border-color: rgba(148, 163, 184, 0.25);
    transform: translateY(-2px);
  }

  .footer-social-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .footer-social-link svg {
    width: 18px;
    height: 18px;
  }

  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .footer-nav {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
  }

  .footer-nav a {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    transition: color 0.2s ease;
  }

  .footer-nav a:hover {
    color: var(--color-text-secondary);
  }

  .footer-legal {
    display: flex;
    gap: var(--space-4);
    align-items: center;
  }

  .footer-legal-link {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    transition: color 0.2s ease;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
  }

  .footer-legal-link:hover {
    color: var(--color-text-secondary);
  }

  .footer-legal-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .footer-manage-cookies {
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.2s ease, color 0.2s ease;
  }

  .footer-manage-cookies:hover {
    text-decoration-color: var(--color-text-secondary);
  }

  /* Mobile responsive */
  @media (max-width: 768px) {
    footer.enhanced {
      padding: var(--space-5) 0 var(--space-6);
    }

    .footer-top {
      flex-direction: column;
      gap: var(--space-4);
      text-align: center;
    }

    .footer-bottom {
      flex-direction: column;
      gap: var(--space-3);
      text-align: center;
    }

    .footer-nav {
      justify-content: center;
    }

    .footer-legal {
      justify-content: center;
    }
  }

/* ===== ACCESSIBILITY UTILITIES ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ===== VERTICAL ACCENT COLORS ===== */

[data-vertical="fraud"] .hero-tag-dot {
  background: radial-gradient(circle at 30% 0, var(--color-warning) 0, #b8923f 30%, #6d5625 80%);
  box-shadow: 0 0 0 5px rgba(195, 160, 87, 0.14);
}
[data-vertical="fraud"] .section-kicker {
  color: var(--color-warning);
}
[data-vertical="fraud"] .stat-card-value {
  background: linear-gradient(120deg, #E5E7EB, var(--color-warning));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[data-vertical="agro"] .section-kicker {
  color: var(--color-success);
}
[data-vertical="agro"] .stat-card-value {
  background: linear-gradient(120deg, #E5E7EB, var(--color-success));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[data-vertical="support"] .hero-tag-dot {
  background: radial-gradient(circle at 30% 0, #60a5fa 0, #3b82f6 30%, #1e40af 80%);
  box-shadow: 0 0 0 5px rgba(96, 165, 250, 0.14);
}
[data-vertical="support"] .section-kicker {
  color: #60a5fa;
}
[data-vertical="support"] .stat-card-value {
  background: linear-gradient(120deg, #E5E7EB, #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}