:root {
           --color-navy: #2a0f19;
           --color-body-bg: #fafafa;
           --color-vapor: #f8fafc;
           --color-body-text: #0f172a;
           --color-slate-50: #f8fafc;
           --color-slate-100: #f1f5f9;
           --color-slate-200: #e2e8f0;
           --color-slate-300: #cbd5e1;
           --color-slate-400: #94a3b8;
           --color-slate-500: #64748b;
           --color-slate-600: #475569;
           --color-slate-700: #334155;
           --color-slate-800: #1e293b;
           --color-slate-900: #0f172a;
           --color-orange: #f97316;
           --color-orange-dark: #ea580c;
           --color-sage: #10b981;
           --section-border: 1px solid var(--color-slate-200);
           --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
           --font-display: system-ui, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
           --shadow-orange: 0 10px 30px rgba(249, 115, 22, 0.22);
           --shadow-card: 0 24px 70px -42px rgba(15, 23, 42, 0.45);
           --radius-full: 9999px;
         }

         *,
         *::before,
         *::after {
           box-sizing: border-box;
         }

         html {
           scroll-behavior: smooth;
         }

         body {
           margin: 0;
           font-family: var(--font-sans);
           font-size: 16px;
           line-height: 1.5;
           color: var(--color-body-text);
           background: var(--color-body-bg);
           -webkit-font-smoothing: antialiased;
           text-rendering: optimizeLegibility;
         }

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

         button,
         input,
         select,
         textarea {
           font: inherit;
         }

         h1,
         h2,
         h3,
         h4,
         p {
           margin: 0;
         }

         h1,
         h2,
         h3,
         h4 {
           font-family: var(--font-display);
           color: var(--color-navy);
           letter-spacing: -0.035em;
           line-height: 1.08;
         }

         h1 {
           font-size: clamp(2.55rem, 7vw, 5.8rem);
         }

         h2 {
           font-size: clamp(2rem, 4.5vw, 3.75rem);
         }

         h3 {
           font-size: clamp(1.2rem, 2.3vw, 1.55rem);
         }

         p {
           color: var(--color-slate-600);
         }

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

         :focus-visible {
           outline: 2px solid rgba(16, 185, 129, 0.65);
           outline-offset: 3px;
           border-radius: 999px;
         }

         .skip-link {
           position: absolute;
           top: -48px;
           left: 12px;
           z-index: 1000;
           padding: 10px 14px;
           background: var(--color-orange);
           color: #fff;
           border-radius: 999px;
           font-weight: 700;
           transition: top 180ms ease;
         }

         .skip-link:focus {
           top: 12px;
         }

         .container {
           width: min(1180px, calc(100% - 32px));
           margin-inline: auto;
         }

         .section {
           padding: 88px 0;
         }

         .eyebrow {
           display: inline-flex;
           align-items: center;
           gap: 8px;
           width: fit-content;
           border: 1px solid rgba(249, 115, 22, 0.25);
           background: rgba(249, 115, 22, 0.08);
           color: var(--color-orange-dark);
           border-radius: var(--radius-full);
           padding: 7px 12px;
           font-size: 0.72rem;
           font-weight: 800;
           letter-spacing: 0.08em;
           text-transform: uppercase;
         }

         .dot {
           width: 8px;
           height: 8px;
           border-radius: 999px;
           background: var(--color-sage);
           box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.14);
           flex: 0 0 auto;
         }

         .btn {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           gap: 10px;
           border: 1px solid transparent;
           border-radius: var(--radius-full);
           padding: 0.95rem 1.6rem;
           min-height: 50px;
           font-weight: 750;
           line-height: 1;
           cursor: pointer;
           transition: transform 180ms ease,
                  box-shadow 180ms ease,
                  background-color 180ms ease,
                  border-color 180ms ease,
                  color 180ms ease;
         }

         .btn:hover {
           transform: translateY(-1px);
         }

         .btn-primary {
           background: var(--color-orange);
           color: #fff;
           box-shadow: var(--shadow-orange);
         }

         .btn-primary:hover {
           background: var(--color-orange-dark);
           color: #fff;
         }

         .btn-secondary {
           background: rgba(255,255,255,0.78);
           color: var(--color-navy);
           border-color: var(--color-slate-300);
         }

         .btn-secondary:hover {
           background: #fff;
           color: var(--color-navy);
         }

         .btn-dark {
           background: var(--color-orange);
           color: #fff;
         }

         .btn-dark:hover {
           background: var(--color-orange-dark);
           color: #fff;
         }

         .header {
           position: sticky;
           top: 0;
           z-index: 50;
           background: rgba(255,255,255,0.88);
           backdrop-filter: blur(16px);
           border-bottom: 1px solid rgba(226, 232, 240, 0.85);
         }

         .nav {
           display: flex;
           align-items: center;
           justify-content: space-between;
           height: 76px;
           gap: 24px;
         }

         .brand {
           display: inline-flex;
           align-items: center;
           gap: 12px;
           color: var(--color-navy);
         }

         .brand-mark {
           width: 42px;
           height: 42px;
           border-radius: 15px;
           background: var(--color-navy);
           color: white;
           display: grid;
           place-items: center;
           font-weight: 900;
           box-shadow: 0 12px 22px -16px rgba(42, 15, 25, 0.6);
           overflow: hidden;
         }

         .brand-logo {
           width: 100%;
           height: 100%;
           object-fit: cover;
           border-radius: inherit;
         }

         .brand-name {
           display: flex;
           flex-direction: column;
           line-height: 1.05;
           font-weight: 850;
           letter-spacing: -0.02em;
         }

         .brand-name small {
           margin-top: 5px;
           color: var(--color-slate-500);
           font-size: 0.65rem;
           font-weight: 800;
           letter-spacing: 0.11em;
           text-transform: uppercase;
         }

         .nav-links {
           display: flex;
           align-items: center;
           gap: 24px;
           color: var(--color-slate-600);
           font-size: 0.9rem;
           font-weight: 700;
         }

         .nav-links a:hover {
           color: var(--color-orange-dark);
         }

         .mobile-toggle {
           display: none;
         }

         .hero {
           position: relative;
           overflow: hidden;
           background: #fff;
           border-bottom: var(--section-border);
           padding: 76px 0 96px;
         }

         .hero-grid {
           display: grid;
           grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
           gap: 56px;
           align-items: center;
         }

         .hero-copy {
           display: grid;
           gap: 24px;
         }

         .hero-copy p {
           max-width: 660px;
           font-size: clamp(1.05rem, 1.4vw, 1.22rem);
           line-height: 1.65;
         }

         .highlight {
           color: var(--color-orange);
         }

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

         .stats-grid {
           display: grid;
           grid-template-columns: repeat(3, minmax(0, 1fr));
           gap: 12px;
           max-width: 680px;
         }

         .hero-visual-wrap {
           position: relative;
         }

         .hero-visual {
           position: relative;
           background: #fff;
           border: 1px solid rgba(226, 232, 240, 0.92);
           border-radius: 34px;
           box-shadow: var(--shadow-card);
           padding: 26px;
           overflow: hidden;
         }
         .visual-flow {
           position: relative;
           z-index: 1;
           display: grid;
           gap: 16px;
         }

         .source-grid {
           display: grid;
           grid-template-columns: repeat(4, minmax(0, 1fr));
           gap: 10px;
         }

         .source-card {
           border: 1px solid var(--color-slate-200);
           background: rgba(248, 250, 252, 0.9);
           border-radius: 18px;
           padding: 13px 12px;
           min-height: 82px;
           display: grid;
           align-content: center;
           gap: 4px;
           box-shadow: 0 12px 24px -24px rgba(15, 23, 42, 0.55);
         }

         .source-type {
           color: var(--color-orange-dark);
           font-size: 0.64rem;
           font-weight: 900;
           letter-spacing: 0.08em;
           text-transform: uppercase;
         }

         .source-name {
           color: var(--color-navy);
           font-size: 0.83rem;
           font-weight: 900;
           line-height: 1.15;
         }

         .titan-layer {
           position: relative;
           color: #fff;
           background: var(--color-navy);
           border: 1px solid rgba(249, 115, 22, 0.32);
           border-radius: 28px;
           padding: 22px;
           box-shadow: 0 20px 50px -38px rgba(42, 15, 25, 0.75);
         }

         .titan-layer h3 {
           color: #fff;
           display: flex;
           gap: 12px;
           align-items: center;
           font-size: 1.18rem;
           margin-bottom: 9px;
         }

         .titan-layer p {
           color: rgba(255,255,255,0.78);
           font-size: 0.9rem;
           line-height: 1.6;
         }

         .teams-window {
           background: #fff;
           border: 1px solid rgba(226, 232, 240, 0.95);
           border-radius: 24px;
           overflow: hidden;
           box-shadow: 0 16px 50px -42px rgba(15,23,42,0.6);
         }

         .teams-header {
           display: flex;
           align-items: center;
           justify-content: space-between;
           gap: 12px;
           padding: 12px 14px;
           border-bottom: var(--section-border);
           background: #f8fafc;
         }

         .teams-title {
           display: inline-flex;
           align-items: center;
           gap: 8px;
           color: #464eb8;
           font-size: 0.78rem;
           font-weight: 900;
         }

         .teams-pill {
           color: #047857;
           background: rgba(16,185,129,0.1);
           border: 1px solid rgba(16,185,129,0.18);
           border-radius: 999px;
           padding: 4px 8px;
           font-size: 0.62rem;
           font-weight: 900;
           text-transform: uppercase;
           white-space: nowrap;
         }

         .teams-chat {
           display: grid;
           gap: 10px;
           padding: 14px;
           background: #fff;
         }

         .hero-chat-bubble {
           max-width: 86%;
           border-radius: 17px;
           padding: 11px 13px;
           font-size: 0.79rem;
           line-height: 1.45;
         }

         .hero-chat-bubble.question {
           justify-self: end;
           background: var(--color-slate-100);
           color: var(--color-slate-800);
           border-top-right-radius: 5px;
         }

         .hero-chat-bubble.answer {
           justify-self: start;
           background: #fff;
           color: var(--color-slate-700);
           border: 1px solid var(--color-slate-200);
           border-top-left-radius: 5px;
           box-shadow: 0 10px 26px -24px rgba(15,23,42,0.7);
         }

         .trust-bar {
           background: #fff;
           border-bottom: var(--section-border);
         }

         .trust-inner {
           display: flex;
           align-items: center;
           justify-content: center;
           flex-wrap: wrap;
           gap: 18px 34px;
           padding: 30px 0;
           color: var(--color-slate-500);
           font-weight: 900;
           letter-spacing: -0.02em;
           text-align: center;
         }

         .trust-inner span:first-child {
           flex-basis: 100%;
           font-size: 0.72rem;
           color: var(--color-slate-400);
           letter-spacing: 0.1em;
           text-transform: uppercase;
           font-weight: 850;
         }

         .centered-heading {
           max-width: 820px;
           margin: 0 auto 44px;
           text-align: center;
           display: grid;
           gap: 14px;
           justify-items: center;
         }

         .centered-heading p {
           max-width: 700px;
           font-size: 1.03rem;
           line-height: 1.65;
         }

         .calculator {
           display: grid;
           grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr);
           gap: 28px;
           max-width: 980px;
           margin: 0 auto;
           background: #fff;
           border: 1px solid var(--color-slate-200);
           border-radius: 34px;
           box-shadow: var(--shadow-card);
           padding: 28px;
         }

         .controls {
           display: grid;
           gap: 16px;
         }

         .control-card {
           border: 1px solid var(--color-slate-200);
           background: var(--color-slate-50);
           border-radius: 24px;
           padding: 18px;
         }

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

         .control-header label {
           color: var(--color-navy);
           font-weight: 850;
           font-size: 0.9rem;
         }

         .control-value {
           background: #fff;
           border: 1px solid var(--color-slate-200);
           border-radius: 14px;
           padding: 6px 10px;
           color: var(--color-orange-dark);
           font-weight: 900;
           white-space: nowrap;
         }

         input[type="range"] {
           width: 100%;
           accent-color: var(--color-orange);
         }

         .control-note {
           margin-top: 8px;
           font-size: 0.76rem;
           color: var(--color-slate-500);
         }

         .result-panel {
           position: relative;
           overflow: hidden;
           background: #183d54;
           color: #fff;
           border-radius: 30px;
           padding: 28px;
           display: grid;
           gap: 18px;
           align-content: start;
         }

         .result-panel p {
           color: rgba(255,255,255,0.7);
         }

         .result-label {
           color: var(--color-orange);
           font-size: 0.76rem;
           font-weight: 900;
           letter-spacing: 0.1em;
           text-transform: uppercase;
         }

         .result-total {
           color: #fff;
           font-size: clamp(2.6rem, 5vw, 4rem);
           font-weight: 950;
           letter-spacing: -0.055em;
           line-height: 1;
         }

         .result-list {
           display: grid;
           gap: 10px;
         }

         .result-row {
           display: flex;
           justify-content: space-between;
           align-items: center;
           gap: 12px;
           border: 1px solid rgba(255,255,255,0.12);
           background: rgba(255,255,255,0.06);
           border-radius: 18px;
           padding: 13px;
           font-size: 0.88rem;
         }

         .result-row span:first-child {
           color: rgba(255,255,255,0.75);
         }

         .result-row strong {
           color: #fff;
           white-space: nowrap;
         }

         .benefits {
           display: grid;
           grid-template-columns: repeat(3, minmax(0, 1fr));
           gap: 22px;
         }

         .benefit-card {
           background: #fff;
           border: 1px solid var(--color-slate-200);
           border-radius: 30px;
           padding: 28px;
           box-shadow: 0 20px 70px -55px rgba(15, 23, 42, 0.7);
         }

         .benefit-icon {
           width: 48px;
           height: 48px;
           border-radius: 18px;
           display: grid;
           place-items: center;
           background: rgba(249, 115, 22, 0.1);
           color: var(--color-orange-dark);
           margin-bottom: 18px;
           font-weight: 900;
         }

         .benefit-card h3 {
           margin-bottom: 10px;
         }

         .benefit-card p {
           font-size: 0.94rem;
           line-height: 1.65;
         }

         .proof-note {
           margin-top: 18px;
           border: 1px solid var(--color-slate-200);
           background: var(--color-slate-50);
           border-radius: 18px;
           padding: 12px;
           color: var(--color-navy);
           font-size: 0.82rem;
           font-weight: 780;
         }

         .dark-section {
           background: #183d54;
           color: #fff;
         }

         .dark-section h2,
         .dark-section h3 {
           color: #fff;
         }

         .dark-section p {
           color: rgba(255,255,255,0.72);
         }

         .comparison-grid {
           display: grid;
           grid-template-columns: minmax(0, 0.95fr) minmax(380px, 1.05fr);
           gap: 42px;
           align-items: center;
         }

         .comparison-copy {
           display: grid;
           gap: 18px;
         }

         .compare-box {
           background: rgba(255,255,255,0.06);
           border: 1px solid rgba(255,255,255,0.14);
           border-radius: 30px;
           padding: 26px;
           display: grid;
           gap: 20px;
         }

         .compare-item {
           display: grid;
           grid-template-columns: 38px 1fr;
           gap: 14px;
           align-items: start;
         }

         .compare-sign {
           width: 38px;
           height: 38px;
           border-radius: 999px;
           display: grid;
           place-items: center;
           font-weight: 950;
         }

         .compare-sign.bad {
           color: #f87171;
           background: rgba(248, 113, 113, 0.14);
         }

         .compare-sign.good {
           color: #34d399;
           background: rgba(52, 211, 153, 0.14);
         }

         .compare-item h3 {
           font-size: 1.05rem;
           letter-spacing: -0.01em;
           margin-bottom: 6px;
         }

         .compare-item p {
           font-size: 0.9rem;
           line-height: 1.6;
         }

         .demo-shell {
           display: grid;
           grid-template-columns: 300px minmax(0, 1fr);
           gap: 18px;
           max-width: 1020px;
           margin: 0 auto;
           background: var(--color-slate-50);
           border: 1px solid var(--color-slate-200);
           border-radius: 34px;
           padding: 18px;
           box-shadow: var(--shadow-card);
         }

         .scenario-list {
           display: grid;
           gap: 9px;
           align-content: start;
         }

         .scenario-title {
           color: var(--color-slate-400);
           font-size: 0.72rem;
           font-weight: 900;
           letter-spacing: 0.1em;
           text-transform: uppercase;
           padding: 10px 8px 6px;
         }

         .scenario-btn {
           width: 100%;
           text-align: left;
           border: 1px solid transparent;
           background: transparent;
           border-radius: 20px;
           padding: 13px;
           cursor: pointer;
           display: grid;
           grid-template-columns: 42px 1fr;
           gap: 12px;
           align-items: center;
           transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
         }

         .scenario-btn:hover,
         .scenario-btn.active {
           background: #fff;
           border-color: rgba(249, 115, 22, 0.45);
           box-shadow: 0 12px 24px -22px rgba(15, 23, 42, 0.5);
         }

         .scenario-ico {
           width: 42px;
           height: 42px;
           border-radius: 16px;
           display: grid;
           place-items: center;
           background: rgba(249, 115, 22, 0.1);
           color: var(--color-orange-dark);
           font-weight: 900;
         }

         .scenario-name {
           display: block;
           color: var(--color-slate-900);
           font-size: 0.9rem;
           font-weight: 850;
         }

         .scenario-meta {
           display: block;
           color: var(--color-slate-500);
           font-size: 0.75rem;
           margin-top: 2px;
         }

         .demo-window {
           background: #fff;
           border: 1px solid var(--color-slate-200);
           border-radius: 26px;
           overflow: hidden;
           min-height: 480px;
           display: grid;
           grid-template-rows: auto 1fr auto;
         }

         .demo-header {
           display: flex;
           justify-content: space-between;
           align-items: center;
           gap: 14px;
           padding: 16px 18px;
           background: var(--color-slate-50);
           border-bottom: var(--section-border);
         }

         .demo-header strong {
           color: var(--color-navy);
           font-size: 0.9rem;
         }

         .demo-badge {
           background: var(--color-slate-200);
           color: var(--color-slate-700);
           border-radius: 999px;
           padding: 6px 9px;
           font-size: 0.68rem;
           font-weight: 850;
           text-transform: uppercase;
           white-space: nowrap;
         }

         .chat-scroll {
           padding: 22px;
           display: grid;
           gap: 16px;
           align-content: start;
           overflow-y: auto;
           scroll-behavior: smooth;
         }

         .chat-scroll::-webkit-scrollbar {
           width: 4px;
         }

         .chat-scroll::-webkit-scrollbar-thumb {
           background: #d1d5db;
           border-radius: 4px;
         }

         .msg {
           display: grid;
           gap: 8px;
           max-width: 680px;
           animation: fadeInUp 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
         }

         .msg-user {
           justify-self: end;
         }

         .bubble {
           border-radius: 20px;
           padding: 13px 15px;
           font-size: 0.88rem;
           line-height: 1.55;
         }

         .msg-user .bubble {
           background: var(--color-slate-100);
           color: var(--color-slate-800);
           border-top-right-radius: 6px;
         }

         .msg-bot {
           grid-template-columns: 38px 1fr;
         }

         .bot-avatar {
           width: 38px;
           height: 38px;
           border-radius: 14px;
           background: var(--color-navy);
           color: #fff;
           display: grid;
           place-items: center;
           font-weight: 950;
         }

         .msg-bot .bubble {
           background: #fff;
           color: var(--color-slate-700);
           border: 1px solid var(--color-slate-200);
           border-top-left-radius: 6px;
           box-shadow: 0 12px 30px -28px rgba(15,23,42,0.55);
         }

         .mini-card {
           margin-top: 12px;
           border: 1px solid var(--color-slate-200);
           border-radius: 16px;
           overflow: hidden;
           background: var(--color-slate-50);
         }

         .mini-card-header {
           background: var(--color-slate-100);
           color: var(--color-slate-800);
           border-bottom: var(--section-border);
           padding: 10px 12px;
           font-size: 0.75rem;
           font-weight: 850;
         }

         .mini-card-body {
           padding: 12px;
           font-size: 0.82rem;
           color: var(--color-slate-600);
         }

         .demo-input {
           padding: 14px 16px;
           border-top: var(--section-border);
           background: var(--color-slate-50);
           display: flex;
           gap: 12px;
           align-items: center;
         }

         .fake-input {
           flex: 1;
           border: 1px solid var(--color-slate-200);
           background: #fff;
           color: var(--color-slate-400);
           border-radius: 999px;
           padding: 11px 14px;
           font-size: 0.8rem;
         }

         .demo-input a {
           color: var(--color-orange-dark);
           font-weight: 850;
           font-size: 0.82rem;
           white-space: nowrap;
         }

         .security-grid {
           display: grid;
           grid-template-columns: repeat(3, minmax(0, 1fr));
           gap: 22px;
         }

         .quote-card {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 28px;
  align-items: center;
  background: #183d54;
  color: #fff;
  border-radius: 34px;
  padding: 42px;
  box-shadow: var(--shadow-card);
}

         .quote-card h2,
         .quote-card h3 {
           color: #fff;
         }

         .quote-card p {
           color: rgba(255,255,255,0.72);
         }

         blockquote {
           margin: 0;
           color: #fff;
           font-size: clamp(1.25rem, 2.4vw, 1.75rem);
           line-height: 1.42;
           letter-spacing: -0.03em;
           font-weight: 650;
         }

         .quote-meta {
           margin-top: 18px;
           color: rgba(255,255,255,0.72);
           font-size: 0.86rem;
         }

         .metric-box {
           border: 1px solid rgba(255,255,255,0.14);
           background: rgba(255,255,255,0.06);
           border-radius: 24px;
           padding: 22px;
           display: grid;
           gap: 18px;
         }

         .metric-value {
           color: #fff;
           font-size: 2rem;
           font-weight: 950;
           line-height: 1;
         }

         .metric-label {
           color: rgba(255,255,255,0.72);
           font-size: 0.82rem;
           margin-top: 5px;
         }

         .final-cta {
           background: #183d54;
           color: #fff;
           padding: 82px 0;
           text-align: center;
         }

         .final-cta h2 {
           color: #fff;
         }

         .final-cta p {
           color: rgba(255,255,255,0.72);
           max-width: 680px;
           margin: 18px auto 0;
           font-size: 1.05rem;
           line-height: 1.65;
         }

         .final-actions {
           display: flex;
           justify-content: center;
           flex-wrap: wrap;
           gap: 14px;
           margin-top: 30px;
         }

         .final-note {
           color: rgba(255,255,255,0.55);
           margin-top: 18px;
           font-size: 0.82rem;
         }

         footer {
           background: #183d54;
           color: var(--color-slate-400);
           padding: 38px 0;
         }

         .footer-inner {
           display: flex;
           align-items: center;
           justify-content: space-between;
           gap: 24px;
           flex-wrap: wrap;
           font-size: 0.82rem;
         }

         .footer-links {
           display: flex;
           flex-wrap: wrap;
           gap: 18px;
         }

         .footer-links a:hover {
           color: #fff;
         }

         .modal {
           position: fixed;
           inset: 0;
           z-index: 100;
           display: none;
           align-items: center;
           justify-content: center;
           background: rgba(15, 23, 42, 0.58);
           backdrop-filter: blur(10px);
           padding: 18px;
         }

         .modal.open {
           display: flex;
         }

         .modal-card {
           width: min(940px, 100%);
           max-height: 92vh;
           overflow-y: auto;
           background: #fff;
           border: 1px solid var(--color-slate-200);
           border-radius: 34px;
           box-shadow: 0 30px 80px -40px rgba(15, 23, 42, 0.8);
           padding: 24px;
           animation: fadeInUp 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
         }

         .modal-top {
           display: flex;
           align-items: flex-start;
           justify-content: space-between;
           gap: 16px;
           margin-bottom: 16px;
         }

         .close-btn {
           width: 40px;
           height: 40px;
           border-radius: 999px;
           border: 1px solid var(--color-slate-200);
           background: #fff;
           color: var(--color-slate-500);
           cursor: pointer;
           font-size: 1.35rem;
           line-height: 1;
           flex: 0 0 auto;
         }

         .calendly-frame-wrap {
           width: 100%;
           height: min(72vh, 720px);
           min-height: 620px;
           overflow: hidden;
           border: 1px solid var(--color-slate-200);
           border-radius: 24px;
           background: var(--color-slate-50);
         }

         .calendly-frame {
           display: block;
           width: 100%;
           height: 100%;
           border: 0;
         }

         .calendly-fallback {
           margin-top: 12px;
           color: var(--color-slate-500);
           font-size: 0.78rem;
           text-align: center;
         }

         .calendly-fallback a {
           color: var(--color-orange-dark);
           font-weight: 850;
         }

         @media (max-width: 720px) {
           .modal-card {
             padding: 16px;
             border-radius: 26px;
           }

           .calendly-frame-wrap {
             height: 72vh;
             min-height: 560px;
             border-radius: 20px;
           }
         }

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

         @media (max-width: 1024px) {
           .nav-links,
           .nav-cta {
             display: none;
           }

           .mobile-toggle {
             display: inline-flex;
           }

           .hero-grid,
           .calculator,
           .comparison-grid,
           .quote-card {
             grid-template-columns: 1fr;
           }

           .hero-visual-wrap {
             max-width: 680px;
             width: 100%;
             margin: 0 auto;
           }

           .source-grid {
             grid-template-columns: repeat(2, minmax(0, 1fr));
           }

           .benefits,
           .security-grid {
             grid-template-columns: 1fr;
           }

           .demo-shell {
             grid-template-columns: 1fr;
           }

           .scenario-list {
             grid-template-columns: repeat(2, minmax(0, 1fr));
           }

           .scenario-title {
             grid-column: 1 / -1;
           }
         }

         @media (max-width: 720px) {
           .container {
             width: min(100% - 24px, 1180px);
           }

           .section {
             padding: 66px 0;
           }

           .hero {
             padding: 54px 0 72px;
           }

           .stats-grid {
             grid-template-columns: 1fr;
           }

           .hero-actions,
           .final-actions {
             align-items: stretch;
           }

           .btn {
             width: 100%;
           }

           .calculator,
           .demo-shell,
           .hero-visual,
           .quote-card {
             padding: 18px;
             border-radius: 26px;
           }

           .result-panel {
             border-radius: 24px;
             padding: 22px;
           }

           .scenario-list {
             grid-template-columns: 1fr;
           }

           .demo-header,
           .demo-input,
           .control-header,
           .result-row {
             align-items: flex-start;
             flex-direction: column;
           }

           .fake-input {
             width: 100%;
           }

           .demo-input a {
             white-space: normal;
           }

           .footer-inner {
             flex-direction: column;
             align-items: flex-start;
           }

           .trust-inner {
             gap: 14px 20px;
           }
         }

         .hero-hidden {
           display: none !important;
         }

         .hero .hero-copy > .eyebrow {
           display: none !important;
         }

         .visual-flow-animated {
           gap: 14px;
         }

         .flow-lane {
           position: relative;
           width: 10px;
           height: 56px;
           margin: 0 auto;
           border-radius: 999px;
           background: rgba(249,115,22,.16);
           overflow: hidden;
         }
         .flow-particle {
           position: absolute;
           left: 50%;
           width: 10px;
           height: 10px;
           margin-left: -5px;
           border-radius: 999px;
           background: var(--color-orange);
           box-shadow: 0 0 18px rgba(249,115,22,.35);
           animation: flowDown 2s linear infinite;
         }

         .flow-particle.p2 {
           animation-delay: .65s;
           background: #fb923c;
         }

         .flow-particle.p3 {
           animation-delay: 1.2s;
           background: #60a5fa;
         }

         @keyframes flowDown {
           0% {
             transform: translateY(-18px) scale(.8);
             opacity: 0;
           }
           15% {
             opacity: 1;
           }
           100% {
             transform: translateY(68px) scale(1);
             opacity: 0;
           }
         }

         .titan-layer-compact {
           display: flex;
           align-items: center;
           gap: 14px;
           padding: 18px 20px;
         }

         .titan-mark {
           width: 42px;
           height: 42px;
           border-radius: 14px;
           display: flex;
           align-items: center;
           justify-content: center;
           background: rgba(249,115,22,.12);
           color: var(--color-orange);
           font-weight: 900;
           font-size: 1.15rem;
           flex-shrink: 0;
         }

         .titan-layer-compact h3 {
           margin: 0;
           font-size: 1.1rem;
         }

         .titan-layer-compact p {
           margin: .2rem 0 0;
           font-size: .88rem;
           color: var(--color-slate-600);
         }

         .hero-teams-window {
           min-height: 236px;
         }

         .hero-sequence {
           min-height: 152px;
           display: flex;
           flex-direction: column;
           gap: 12px;
         }

         .hero-thinking,
         .thinking-bubble {
           align-self: flex-start;
           max-width: 92%;
           background: #fff;
           border: 1px solid var(--color-slate-200);
           border-radius: 18px 18px 18px 8px;
           padding: 14px 16px;
           box-shadow: 0 20px 50px -40px rgba(15,23,42,.45);
         }

         .hero-thinking-label,
         .thinking-title {
           font-size: .78rem;
           font-weight: 800;
           color: var(--color-slate-700);
           margin-bottom: 0;
         }

         .hero-dot-row,
         .thinking-dots {
           display: inline-flex;
           align-items: center;
           gap: 6px;
           margin-bottom: 0;
         }

         .hero-thinking-inline {
           display: flex;
           align-items: center;
           gap: 10px;
         }

         .hero-sequence .hero-thinking {
           display: inline-flex;
           align-self: flex-start;
           width: fit-content;
           max-width: fit-content;
           min-width: 0;
           min-height: 0;
           padding: 8px 12px;
         }

         .hero-sequence .hero-thinking-inline {
           display: inline-flex;
           align-items: center;
           gap: 10px;
           width: auto;
           white-space: nowrap;
         }

         .hero-sequence .hero-thinking-label {
           margin-bottom: 0;
           line-height: 1;
         }

         .hero-sequence .hero-dot-row {
           display: inline-flex;
           align-items: center;
           gap: 6px;
           margin-bottom: 0;
           line-height: 1;
         }

         .hero-dot-row span,
         .thinking-dots span {
           width: 8px;
           height: 8px;
           border-radius: 999px;
           background: var(--color-slate-400);
           animation: thinkBounce 1.1s infinite ease-in-out;
         }

         .hero-dot-row span:nth-child(2),
         .thinking-dots span:nth-child(2) {
           animation-delay: .15s;
         }

         .hero-dot-row span:nth-child(3),
         .thinking-dots span:nth-child(3) {
           animation-delay: .3s;
         }

         @keyframes thinkBounce {
           0%, 80%, 100% {
             transform: translateY(0);
             opacity: .45;
           }
           40% {
             transform: translateY(-5px);
             opacity: 1;
           }
         }

         .consult-chip-list {
           display: flex;
           flex-wrap: wrap;
           gap: 8px;
         }

         .consult-chip {
           display: inline-flex;
           align-items: center;
           padding: .32rem .58rem;
           border-radius: 999px;
           background: rgba(37,99,235,.08);
           color: #464eb8;
           font-size: .72rem;
           font-weight: 700;
           border: 1px solid rgba(70,78,184,.12);
         }

         .hero-chat-bubble.answer {
           background: #fff9f5;
           border-color: rgba(249,115,22,.25);
         }

         .demo-shell {
           align-items: stretch;
         }

         .demo-input {
           align-items: center;
         }

         .thinking-meta {
           display: block;
           font-size: .75rem;
           color: var(--color-slate-500);
           margin-bottom: 8px;
         }

         .scenario-extra {
           display: grid;
           gap: 12px;
           margin-top: 14px;
         }

         .status-grid {
           display: grid;
           grid-template-columns: repeat(3, minmax(0, 1fr));
           gap: 10px;
         }

         .status-card {
           border: 1px solid var(--color-slate-200);
           border-radius: 16px;
           padding: 12px;
           background: #fff;
         }

         .status-card small {
           display: block;
           color: var(--color-slate-500);
           font-weight: 700;
           text-transform: uppercase;
           letter-spacing: .04em;
         }

         .status-card strong {
           display: block;
           margin-top: 6px;
           font-size: 1.05rem;
           color: var(--color-navy);
         }

         .status-card .accent-positive {
           color: #0f9f6e;
         }

         .status-card .accent-warning {
           color: #d97706;
         }

         .status-card .accent-purple {
           color: #7c3aed;
         }

         .sales-bars {
           display: grid;
           gap: 10px;
         }

         .sales-bar-row {
           display: grid;
           grid-template-columns: 120px 1fr 56px;
           align-items: center;
           gap: 10px;
         }

         .sales-bar-label {
           font-size: .78rem;
           font-weight: 700;
           color: var(--color-slate-700);
           display: flex;
           align-items: center;
           gap: 8px;
         }

         .swatch {
           width: 10px;
           height: 10px;
           border-radius: 999px;
           display: inline-block;
         }

         .sales-bar-track {
           display: block;
           width: 100%;
           height: 14px;
           background: #eef2ff;
           border-radius: 999px;
           overflow: hidden;
         }

         .sales-bar-fill {
           display: block;
           height: 100%;
           border-radius: 999px;
         }

         .bar-purple {
           background: #8b5cf6;
         }

         .bar-blue {
           background: #3b82f6;
         }

         .bar-green {
           background: #10b981;
         }

         .bar-orange {
           background: #f97316;
         }

         .bar-value {
           font-size: .78rem;
           font-weight: 800;
           color: var(--color-slate-700);
           text-align: right;
         }

         .demo-table-wrap {
           border: 1px solid var(--color-slate-200);
           border-radius: 16px;
           overflow: hidden;
         }

         .demo-table {
           width: 100%;
           border-collapse: collapse;
           font-size: .78rem;
         }

         .demo-table th {
           text-align: left;
           background: var(--color-slate-50);
           padding: 10px 12px;
           color: var(--color-slate-600);
           font-size: .72rem;
           text-transform: uppercase;
           letter-spacing: .04em;
         }

         .demo-table td {
           padding: 10px 12px;
           border-top: 1px solid var(--color-slate-100);
           color: var(--color-slate-700);
         }

         .badge-ok,
         .badge-watch {
           display: inline-flex;
           align-items: center;
           padding: .2rem .55rem;
           border-radius: 999px;
           font-size: .72rem;
           font-weight: 800;
         }

         .badge-ok {
           background: rgba(16,185,129,.12);
           color: #047857;
         }

         .badge-watch {
           background: rgba(245,158,11,.14);
           color: #b45309;
         }

         .action-wrap {
           display: flex;
           flex-wrap: wrap;
           gap: 10px;
           align-items: center;
           margin-top: 4px;
         }

         .execute-action-btn {
           border: 0;
           border-radius: 999px;
           background: var(--color-orange);
           color: #fff;
           font-weight: 800;
           font-size: .78rem;
           padding: .72rem 1rem;
           cursor: pointer;
           box-shadow: var(--shadow-orange);
         }

         .execute-action-btn:hover {
           background: var(--color-orange-dark);
         }

         .execute-action-btn.done {
           background: #10b981;
           box-shadow: none;
         }

         .action-done {
           font-size: .78rem;
           color: #047857;
           font-weight: 700;
         }

         .mini-alert-card {
           border: 1px solid rgba(249,115,22,.18);
           background: #fff7ed;
           border-radius: 16px;
           padding: 14px;
         }

         .mini-alert-card strong {
           display: block;
           color: #9a3412;
           margin-bottom: 6px;
         }

         .alert-toast {
           position: fixed;
           right: 22px;
           bottom: 22px;
           z-index: 80;
           display: flex;
           flex-direction: column;
           align-items: flex-start;
           gap: 4px;
           max-width: 340px;
           width: min(340px, calc(100vw - 24px));
           border: 1px solid rgba(249,115,22,.18);
           border-radius: 20px;
           background: #fff;
           box-shadow: 0 26px 60px -30px rgba(15,23,42,.45);
           padding: 16px 18px;
           cursor: pointer;
           opacity: 0;
           pointer-events: none;
           transform: translateY(18px) scale(.98);
           transition: all .28s ease;
         }

         .alert-toast.show {
           opacity: 1;
           pointer-events: auto;
           transform: translateY(0) scale(1);
         }

         .toast-pill {
           display: inline-flex;
           align-items: center;
           padding: .25rem .55rem;
           border-radius: 999px;
           background: rgba(239,68,68,.12);
           color: #b91c1c;
           font-size: .68rem;
           font-weight: 800;
           text-transform: uppercase;
           letter-spacing: .04em;
         }

         .toast-title {
           font-size: .92rem;
           color: var(--color-navy);
         }

         .toast-body {
           font-size: .78rem;
           color: var(--color-slate-600);
           text-align: left;
         }

         @media (max-width: 980px) {
           .status-grid {
             grid-template-columns: 1fr;
           }

           .sales-bar-row {
             grid-template-columns: 1fr;
             gap: 6px;
           }

           .bar-value {
             text-align: left;
           }

           .demo-shell {
             height: auto !important;
           }
         }

.hero-visual {
           background: #fff;
           border: 1px solid var(--color-slate-200);
         }

         .hero-visual-wrap {
           align-self: start;
         }

         .titan-layer-compact {
           background: #fff;
           border: 1px solid var(--color-slate-200);
           box-shadow: 0 12px 30px -24px rgba(15,23,42,.35);
         }

         .titan-mark {
           background: rgba(70,78,184,.08);
           color: #464eb8;
         }

         .titan-layer-compact h3 {
           color: var(--color-slate-800);
           font-size: 1rem;
         }

         .titan-layer-compact p {
           color: var(--color-slate-500);
           font-size: .82rem;
         }

         .hero-teams-window {
           background: #fff;
           border: 1px solid rgba(70,78,184,.14);
           box-shadow: 0 26px 70px -42px rgba(70,78,184,.35);
           min-height: 312px;
         }

         .teams-header {
           background: var(--color-slate-50);
         }

         .teams-title {
           color: #2a0f19;
         }

         .teams-pill {
           background: #464eb8;
           color: #fff;
         }

         .hero-sequence {
           height: 188px;
           min-height: 188px;
         }

         #heroQuestionBubble,
         #heroAnswerBubble {
           min-height: 62px;
         }

         #heroThinkingBubble {
           min-height: 88px;
         }

         .hero-msg {
           display: flex;
           align-items: flex-end;
           gap: 8px;
           width: 100%;
         }

         .hero-msg-user {
           justify-content: flex-start;
           align-self: flex-start;
         }

         .hero-msg-thinking,
         .hero-msg-answer {
           justify-content: flex-end;
           align-self: flex-end;
         }

         .hero-avatar {
           width: 30px;
           height: 30px;
           border-radius: 999px;
           display: grid;
           place-items: center;
           flex: 0 0 30px;
           font-size: 0.72rem;
           font-weight: 950;
           line-height: 1;
         }

         .hero-avatar svg {
           width: 15px;
           height: 15px;
         }

         .hero-avatar-user {
           background: var(--color-slate-100);
           color: var(--color-slate-600);
           border: 1px solid var(--color-slate-200);
         }

         .hero-avatar-bot {
           background: var(--color-navy);
           color: #fff;
           box-shadow: 0 10px 22px -18px rgba(42, 15, 25, 0.65);
         }

         .hero-msg .hero-chat-bubble {
           justify-self: auto;
           max-width: min(360px, calc(100% - 40px));
         }

         .hero-msg-user .hero-chat-bubble.question {
           border-radius: 17px 17px 17px 6px;
         }

         .hero-msg-answer .hero-chat-bubble.answer {
           border-radius: 17px 17px 6px 17px;
           text-align: left;
         }

         .hero-msg-thinking .hero-thinking {
           align-self: auto;
           max-width: min(360px, calc(100% - 40px));
         }

         #heroThinkingBubble.hero-msg-thinking {
           min-height: 0;
         }

         .source-grid {
           grid-template-columns: repeat(4, minmax(0, 1fr));
         }

         .trust-bar-companies {
           border-top: 0;
           background: #fff;
         }

         .trust-bar-companies .trust-inner span:first-child {
           color: var(--color-slate-500);
           font-weight: 800;
         }

         #why,
         #architecture {
           border-top: 0 !important;
         }

         @media (max-width: 980px) {
           .source-grid {
             grid-template-columns: repeat(2, minmax(0,1fr));
           }

           .hero-sequence {
             height: auto;
             min-height: 188px;
           }
         }

         .nav-cta {
           display: inline-flex;
           align-items: center;
           gap: 12px;
           flex: 0 0 auto;
         }

         .language-controls {
           display: inline-flex;
           align-items: center;
           gap: 8px;
           flex: 0 0 auto;
         }

         .language-label {
           color: var(--color-slate-500);
           font-size: 0.78rem;
           font-weight: 800;
           white-space: nowrap;
         }

         .language-select {
           appearance: none;
           border: 1px solid var(--color-slate-200);
           border-radius: var(--radius-full);
           background: #fff;
           color: var(--color-navy);
           padding: 8px 34px 8px 12px;
           min-height: 38px;
           max-width: 150px;
           font-size: 0.82rem;
           font-weight: 850;
           cursor: pointer;
           box-shadow: 0 12px 28px -26px rgba(15,23,42,0.55);
         }

         .language-select:hover {
           border-color: rgba(249, 115, 22, 0.45);
         }

         .language-hint {
           position: absolute;
           width: 1px;
           height: 1px;
           padding: 0;
           margin: -1px;
           overflow: hidden;
           clip: rect(0, 0, 0, 0);
           white-space: nowrap;
           border: 0;
         }

         @media (max-width: 1120px) {
           .language-label {
             display: none;
           }

           .language-select {
             max-width: 132px;
           }
         }

         @media (max-width: 1024px) {
           .nav-cta {
             display: inline-flex;
             margin-left: auto;
           }

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

         @media (max-width: 720px) {
           .nav {
             gap: 8px;
           }

           .language-select {
             max-width: 112px;
             min-height: 36px;
             padding: 7px 30px 7px 10px;
             font-size: 0.76rem;
           }
         }

         @media (max-width: 420px) {
           .brand-name small {
             display: none;
           }

           .language-select {
             max-width: 96px;
           }
         }

         .persona-section {
           background: #fff;
           border-bottom: var(--section-border);
           padding: 46px 0 54px;
         }

         .persona-heading {
           max-width: 820px;
           margin: 0 auto 24px;
           text-align: center;
           display: grid;
           gap: 10px;
           justify-items: center;
         }

         .persona-heading h2 {
           font-size: clamp(1.75rem, 3.2vw, 2.65rem);
         }

         .persona-heading p {
           max-width: 680px;
           font-size: 0.96rem;
           line-height: 1.6;
         }

         .persona-grid {
           display: grid;
           grid-template-columns: repeat(5, minmax(0, 1fr));
           gap: 14px;
         }

         .persona-card {
           text-align: left;
           border: 1px solid var(--color-slate-200);
           background: #fff;
           border-radius: 24px;
           padding: 18px;
           cursor: pointer;
           min-height: 150px;
           display: grid;
           gap: 12px;
           align-content: start;
           transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
         }

         .persona-card:hover {
           transform: translateY(-2px);
           border-color: rgba(249, 115, 22, 0.45);
           box-shadow: 0 18px 46px -34px rgba(15, 23, 42, 0.65);
           background: #fff;
         }

         .persona-icon {
           width: 42px;
           height: 42px;
           border-radius: 16px;
           display: grid;
           place-items: center;
           background: rgba(249, 115, 22, 0.1);
           color: var(--color-orange-dark);
           font-weight: 950;
         }

         .persona-card strong {
           color: var(--color-navy);
           font-size: 1rem;
           line-height: 1.2;
         }

         .persona-card span:last-child {
           color: var(--color-slate-500);
           font-size: 0.78rem;
           font-weight: 650;
           line-height: 1.4;
         }

         .calculator-context-copy {
           font-size: 0.78rem;
           color: rgba(255,255,255,0.75);
         }


         @media (max-width: 1024px) {
           .persona-grid {
             grid-template-columns: repeat(2, minmax(0, 1fr));
           }
         }

         @media (max-width: 720px) {
           .persona-grid {
             grid-template-columns: 1fr;
           }

           .persona-card {
             min-height: auto;
           }
         }


         /* Stable hero CTA row for longer translated labels */
         .hero-actions {
           display: grid;
           grid-template-columns: max-content max-content;
           align-items: center;
           justify-content: flex-start;
           gap: 14px;
           flex-wrap: nowrap;
         }

         .hero-actions .btn {
           width: auto;
           white-space: nowrap;
           min-width: 0;
         }

         .hero-actions .btn svg {
           flex: 0 0 auto;
         }

         @media (max-width: 980px) {
           .hero-actions {
             grid-template-columns: minmax(0, auto) minmax(0, auto);
             gap: 10px;
           }

           .hero-actions .btn {
             padding-inline: 1.1rem;
             font-size: 0.92rem;
           }
         }

         @media (max-width: 720px) {
           .hero-actions {
             display: grid;
             grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
             align-items: stretch;
             gap: 10px;
           }

           .hero-actions .btn {
             width: 100%;
             padding: 0.82rem 0.62rem;
             font-size: clamp(0.72rem, 3.2vw, 0.86rem);
             line-height: 1.12;
             white-space: normal;
             min-height: 50px;
             gap: 7px;
           }

           .hero-actions .btn svg {
             width: 16px;
             height: 16px;
           }
         }

         @media (max-width: 420px) {
           .hero-actions .btn {
             padding-inline: 0.5rem;
             font-size: 0.72rem;
           }

           .hero-actions .btn svg {
             width: 14px;
             height: 14px;
           }
         }


         .nav-cta .btn-dark {
           order: 1;
         }

         .nav-cta .language-controls {
           order: 2;
         }

         .language-controls .language-select {
           min-width: 86px;
           max-width: 92px;
           padding-left: 11px;
           padding-right: 18px;
         }

/* ==========================================================================
   Hero mobile / desktop split
   Keep this block at the very end of the CSS file.
   ========================================================================== */

.hero-mobile-block {
  display: none !important;
}

.hero-desktop-block {
  display: block !important;
}

@media (max-width: 767px) {
  .hero-desktop-block {
    display: none !important;
  }

  .hero-mobile-block {
    display: flex !important;
    flex-direction: column;
    gap: 1.25rem;
  }

  .hero-mobile-block .hero-copy .hero-mobile-heading {
    margin: 0 auto 0 0;
    max-width: 560px;
    text-align: left;
    font-family: var(--font-display);
    color: var(--color-navy);
    font-size: clamp(3.05rem, 12vw, 4.45rem);
    font-weight: 740;
    letter-spacing: -0.05em;
    line-height: 1;
  }

  .hero-mobile-block .hero-copy .hero-mobile-heading .highlight {
    display: block;
    color: var(--color-orange);
  }

  .hero-mobile-source-flow {
    display: grid;
    justify-items: center;
    gap: 0.48rem;
    margin-top: 0.15rem;
    margin-bottom: -0.15rem;
  }

  .hero-mobile-source-card {
    width: min(230px, 72vw);
    border: 1px solid var(--color-slate-200);
    background: #fff;
    border-radius: 20px;
    padding: 0.85rem 1rem;
    display: grid;
    justify-items: center;
    gap: 0.42rem;
    box-shadow: 0 18px 46px -38px rgba(15, 23, 42, 0.55);
  }

  .hero-mobile-source-logo {
    max-width: 145px;
    max-height: 44px;
    object-fit: contain;
  }

  .hero-mobile-source-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 28px;
  }

  .hero-mobile-source-connector span {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--color-orange);
    opacity: 0.85;
  }

  .hero-mobile-block .hero-teams-window {
    min-height: 238px;
  }

  .hero-mobile-block .teams-chat.hero-sequence {
    height: 126px;
    min-height: 126px;
    padding: 12px;
    gap: 9px;
  }

  .hero-mobile-block .hero-chat-bubble {
    padding: 9px 11px;
    font-size: 0.76rem;
    line-height: 1.38;
  }

  .hero-mobile-block .hero-msg .hero-chat-bubble {
    max-width: min(330px, calc(100% - 38px));
  }

  .hero-mobile-block .hero-thinking {
    padding: 7px 10px;
  }

  .hero-mobile-block .hero-actions {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: 100%;
  }

  .hero-mobile-block .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (min-width: 768px) {
  .hero-mobile-block {
    display: none !important;
  }

  .hero-desktop-block {
    display: block !important;
  }
}

/* ==========================================================================
   Desktop/mobile nav split
   ========================================================================== */

.nav-mobile {
  display: none;
}

.nav-desktop {
  display: flex;
}

.mobile-nav-panel {
  display: none;
}

.mobile-nav-panel[hidden] {
  display: none !important;
}

@media (max-width: 1024px) {
  .nav-desktop {
    display: none !important;
  }

  .nav-mobile {
    display: flex !important;
    justify-content: space-between;
  }

  .brand-mobile {
    gap: 0;
  }

  .mobile-toggle {
    display: inline-flex !important;
    width: 42px;
    height: 42px;
    min-width: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    border: 1px solid var(--color-slate-200);
    border-radius: 999px;
    background: #fff;
    color: var(--color-navy);
    cursor: pointer;
    box-shadow: 0 12px 28px -26px rgba(15, 23, 42, 0.55);
  }

  .mobile-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
  }

  .mobile-nav-panel {
    position: absolute;
    top: 76px;
    left: 12px;
    right: 12px;
    z-index: 80;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--color-slate-200);
    border-radius: 22px;
    box-shadow: 0 24px 60px -40px rgba(15, 23, 42, 0.75);
  }

  .mobile-nav-panel.is-open {
    display: grid !important;
    gap: 14px;
  }

  .mobile-nav-links {
    display: grid;
    gap: 4px;
  }

  .mobile-nav-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 14px;
    color: var(--color-slate-700);
    font-size: 0.95rem;
    font-weight: 800;
  }

  .mobile-nav-links a:hover {
    background: var(--color-slate-50);
    color: var(--color-orange-dark);
  }

  .mobile-nav-cta {
    width: 100%;
  }

  .mobile-language-controls {
    width: 100%;
  }

  .mobile-language-controls .language-select {
    width: 100%;
    max-width: none;
  }
}

@media (min-width: 1025px) {
  .nav-desktop {
    display: flex !important;
  }

  .nav-mobile {
    display: none !important;
  }

  .mobile-nav-panel {
    display: none !important;
  }
}
/* ==========================================================================
   Trust bar carousel
   ========================================================================== */

.trust-bar-companies {
  background: #fff;
  border-bottom: var(--section-border);
  overflow: hidden;
}

.trust-carousel-inner {
  padding: 30px 0;
  display: grid;
  gap: 18px;
  text-align: center;
}

.trust-carousel-label {
  color: var(--color-slate-400);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.trust-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.trust-carousel-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 34px;
  animation: trustCarousel 28s linear infinite;
}

.trust-carousel-item {
  flex: 0 0 auto;
  color: var(--color-slate-500);
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

@keyframes trustCarousel {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 720px) {
  .trust-carousel-inner {
    padding: 24px 0;
    gap: 14px;
  }

  .trust-carousel-track {
    gap: 26px;
    animation-duration: 22s;
  }

  .trust-carousel-item {
    font-size: 0.86rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trust-carousel-track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }

  .trust-carousel {
    mask-image: none;
    -webkit-mask-image: none;
  }
}

/* ==========================================================================
   Persona cards: desktop original + mobile compact carousel
   ========================================================================== */

/* Desktop/tablet: originele kaart-layout herstellen */
@media (min-width: 721px) {
  .persona-section {
    background: #fff;
    border-bottom: var(--section-border);
    padding: 46px 0 54px;
  }

  .persona-heading {
    max-width: 820px;
    margin: 0 auto 24px;
    text-align: center;
    display: grid;
    gap: 10px;
    justify-items: center;
  }

  .persona-heading h2 {
    font-size: clamp(1.75rem, 3.2vw, 2.65rem);
  }

  .persona-heading p {
    max-width: 680px;
    font-size: 0.96rem;
    line-height: 1.6;
  }

  .persona-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px;
    overflow: visible;
    padding: 0;
    margin: 0;
  }

  .persona-card {
    flex: initial;
    min-height: 150px;
    padding: 18px;
    border-radius: 24px;
    display: grid;
    gap: 12px;
    align-content: start;
    justify-items: start;
    text-align: left;
    scroll-snap-align: unset;
  }

  .persona-card span:last-child {
    display: block !important;
  }

  .persona-icon {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    font-size: inherit;
  }

  .persona-card strong {
    max-width: none;
    font-size: 1rem;
    line-height: 1.2;
  }
}

/* Mobile: compacte swipe carousel */
@media (max-width: 720px) {
  .persona-section {
    padding: 44px 0 48px;
  }

  .persona-heading {
    margin: 0 auto 24px;
    text-align: center;
  }

  .persona-heading h2 {
    font-size: clamp(2rem, 8vw, 2.65rem);
    line-height: 1.08;
  }

  .persona-heading p {
    max-width: 340px;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.55;
  }

  .persona-grid {
    --persona-card-width: 226px;

    display: flex !important;
    grid-template-columns: none !important;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: calc((100vw - var(--persona-card-width)) / 2);
    padding: 2px calc((100vw - var(--persona-card-width)) / 2) 14px;
    margin-inline: -12px;
    -webkit-overflow-scrolling: touch;
  }

  .persona-grid::-webkit-scrollbar {
    display: none;
  }

  .persona-card {
    flex: 0 0 var(--persona-card-width);
    min-height: 154px;
    padding: 17px;
    border-radius: 24px;
    gap: 13px;
    scroll-snap-align: center;

    display: grid;
    justify-items: center;
    align-content: center;
    text-align: center;
  }

  .persona-card span:last-child {
    display: none !important;
  }

  .persona-icon {
    width: 54px;
    height: 54px;
    border-radius: 20px;
    font-size: 1rem;
  }

  .persona-card strong {
    max-width: 180px;
    font-size: 1.08rem;
    line-height: 1.16;
  }
}

@media (max-width: 360px) {
  .persona-grid {
    --persona-card-width: 212px;
  }

  .persona-card strong {
    font-size: 1rem;
  }
}

/* ==========================================================================
   ROI calculator mobile compact
   Layout:
   1. Jaarlijkse impact
   2. Sliders
   3. CTA
   Desktop blijft intact
   ========================================================================== */

@media (max-width: 720px) {
  #roi .centered-heading,
  .section:has(.calculator) .centered-heading {
    margin-bottom: 22px;
  }

  #roi .centered-heading h2,
  .section:has(.calculator) .centered-heading h2 {
    font-size: clamp(2.15rem, 8.5vw, 2.8rem);
    line-height: 1.08;
  }

  .calculator {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    border-radius: 26px;
  }

  /* Laat de children van result-panel meedoen in de calculator-flow */
  .result-panel {
    display: contents;
  }

  /* Alleen jaarlijkse impact bovenaan tonen */
  .result-panel > div:first-child {
    order: 1;
    display: grid;
    gap: 6px;
    background: #183d54;
    color: #fff;
    border-radius: 24px;
    padding: 22px 20px;
    text-align: center;
  }

  .result-panel > div:first-child p {
    display: none;
  }

  .result-label {
    color: var(--color-orange);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .result-total {
    color: #fff;
    font-size: clamp(2.35rem, 12vw, 3.15rem);
    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.055em;
  }

  /* Details mobiel verbergen */
  .result-list,
  .calculator-context-copy,
  .result-panel > p {
    display: none !important;
  }

  /* Sliders direct onder jaarlijkse impact */
  .controls {
    order: 2;
    gap: 10px;
  }

  .control-card {
    padding: 14px;
    border-radius: 20px;
  }

  .control-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }

  .control-header label {
    font-size: 0.84rem;
    line-height: 1.25;
  }

  .control-value {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 12px;
    font-size: 0.78rem;
  }

.control-note {
  display: none !important;
}

  input[type="range"] {
    height: 28px;
  }

  /* CTA onder de sliders */
  .result-panel .btn {
    order: 3;
    width: 100%;
    min-height: 48px;
    padding: 0.86rem 1rem;
    font-size: 0.9rem;
  }

  /* Base case onderaan compact */
  .calculator + p {
    max-width: 100% !important;
    margin-top: 10px !important;
    padding: 10px 12px !important;
    font-size: 0.72rem !important;
    line-height: 1.45 !important;
  }
}

/* ==========================================================================
   Business benefits mobile checklist
   Desktop blijft intact. Mobile wordt compacte checklist.
   ========================================================================== */

@media (max-width: 720px) {
  .section:has(.benefits) {
    padding: 58px 0 54px;
  }

  .section:has(.benefits) .centered-heading {
    max-width: 100%;
    margin: 0 auto 30px;
    gap: 14px;
  }

  .section:has(.benefits) .centered-heading h2 {
    font-size: clamp(2.15rem, 8.5vw, 2.85rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
  }

  .section:has(.benefits) .centered-heading p {
    max-width: 340px;
    font-size: 1rem;
    line-height: 1.55;
  }

  .benefits {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .benefit-card {
    display: grid;
    grid-template-columns: 66px 1fr;
    gap: 16px;
    align-items: center;

    min-height: 104px;
    padding: 20px;
    border-radius: 24px;
    text-align: left;
  }

  .benefit-icon {
    width: 66px;
    height: 66px;
    border-radius: 22px;
    margin: 0;
    display: grid;
    place-items: center;

    font-size: 0;
    background: rgba(249, 115, 22, 0.1);
    color: var(--color-orange-dark);
  }

  .benefit-icon::before {
    content: "✓";
    font-size: 2rem;
    font-weight: 950;
    line-height: 1;
  }

  .benefit-card h3 {
    margin: 0;
    font-size: clamp(1.35rem, 5.6vw, 1.65rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
  }

  .benefit-card p {
    display: none !important;
  }
}

@media (max-width: 390px) {
  .benefit-card {
    grid-template-columns: 58px 1fr;
    gap: 14px;
    min-height: 96px;
    padding: 18px;
  }

  .benefit-icon {
    width: 58px;
    height: 58px;
    border-radius: 20px;
  }

  .benefit-icon::before {
    font-size: 1.8rem;
  }

  .benefit-card h3 {
    font-size: clamp(1.22rem, 5.3vw, 1.48rem);
  }
}

/* ==========================================================================
   Comparison section mobile: compact contrast cards
   Desktop blijft intact.
   Mobile:
   - algemene intro-copy onder heading verbergen
   - copy onder beide compare-items tonen
   ========================================================================== */

@media (max-width: 720px) {
  .dark-section {
    padding: 58px 0 62px;
  }

  .dark-section .comparison-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px;
    align-items: start;
  }

  .dark-section .comparison-copy {
    display: grid;
    gap: 0;
    text-align: left;
  }

  .dark-section .comparison-copy h2 {
    font-size: clamp(2.25rem, 9vw, 3rem);
    line-height: 1.06;
    letter-spacing: -0.055em;
  }

  .dark-section .comparison-copy > p {
    display: none !important;
  }

  .compare-box {
    display: grid;
    gap: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
  }

  .compare-item {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 15px;
    align-items: start;

    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
  }

  .compare-sign {
    width: 58px;
    height: 58px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 1.55rem;
    font-weight: 950;
    line-height: 1;
  }

  .compare-sign.bad {
    color: #f87171;
    background: rgba(248, 113, 113, 0.18);
  }

  .compare-sign.good {
    color: #34d399;
    background: rgba(52, 211, 153, 0.18);
  }

  .compare-item h3 {
    margin: 0 0 7px;
    font-size: clamp(1.2rem, 5.3vw, 1.48rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
  }

  .compare-item p {
    display: block !important;
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.48;
    color: rgba(255, 255, 255, 0.72);
  }
}

@media (max-width: 390px) {
  .dark-section {
    padding: 52px 0 56px;
  }

  .dark-section .comparison-copy h2 {
    font-size: clamp(2.05rem, 8.6vw, 2.55rem);
  }

  .compare-item {
    grid-template-columns: 52px 1fr;
    gap: 13px;
    padding: 16px;
    border-radius: 22px;
  }

  .compare-sign {
    width: 52px;
    height: 52px;
    font-size: 1.4rem;
  }

  .compare-item h3 {
    font-size: clamp(1.12rem, 5.1vw, 1.34rem);
  }

  .compare-item p {
    font-size: 0.88rem;
    line-height: 1.45;
  }
}

/* ==========================================================================
   Live demo mobile layout
   Desktop blijft intact.
   Mobile: voorbeeldvragen en Ask Titan visual visueel losgetrokken.
   ========================================================================== */

.mobile-scenario-card {
  display: none;
}

@media (max-width: 720px) {
  .section:has(.demo-shell) {
    padding: 56px 0 58px;
  }

  .section:has(.demo-shell) .centered-heading {
    margin-bottom: 24px;
  }

  .section:has(.demo-shell) .centered-heading h2 {
    font-size: clamp(2.1rem, 8.5vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
  }

  .demo-shell {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px;

    max-width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .scenario-list {
    display: none !important;
  }

  .mobile-scenario-card {
    display: grid;
    gap: 9px;
    padding: 16px;
    border: 1px solid var(--color-slate-200);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 46px -38px rgba(15, 23, 42, 0.55);
  }

  .mobile-scenario-label {
    color: var(--color-slate-400);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .mobile-scenario-select {
    width: 100%;
    min-height: 50px;
    border: 1px solid var(--color-slate-200);
    border-radius: 18px;
    background: var(--color-slate-50);
    color: var(--color-navy);
    padding: 0 14px;
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1.2;
    appearance: auto;
  }

  .demo-window {
    min-height: auto;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 46px -38px rgba(15, 23, 42, 0.55);
    overflow: hidden;
  }

  .demo-header {
    display: grid;
    gap: 10px;
    align-items: start;
    padding: 14px;
  }

  .demo-header strong {
    font-size: 0.92rem;
    line-height: 1.25;
  }

  .demo-badge {
    width: fit-content;
    max-width: 100%;
    font-size: 0.66rem;
    line-height: 1.15;
    white-space: normal;
  }

  .chat-scroll {
    padding: 16px;
    gap: 14px;
    overflow: visible;
  }

  .msg {
    max-width: 100%;
  }

  .msg-bot {
    grid-template-columns: 34px 1fr;
    gap: 10px;
  }

  .bot-avatar {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }

  .bubble {
    padding: 12px 13px;
    border-radius: 18px;
    font-size: 0.88rem;
    line-height: 1.5;
  }

  .msg-user {
    justify-self: stretch;
  }

  .msg-user .bubble {
    width: 100%;
    border-top-right-radius: 18px;
  }

  .msg-bot .bubble {
    border-top-left-radius: 18px;
  }

  .mini-card {
    margin-top: 10px;
    border-radius: 16px;
  }

  .mini-card-header {
    padding: 10px 12px;
    font-size: 0.72rem;
  }

  .mini-card-body {
    padding: 12px;
    font-size: 0.8rem;
    line-height: 1.45;
  }

  .action-wrap {
    margin-top: 10px;
  }

  .execute-action-btn {
    width: 100%;
    padding: 0.82rem 1rem;
    font-size: 0.78rem;
  }

  .demo-input {
    display: none !important;
  }
}

@media (max-width: 390px) {
  .mobile-scenario-card {
    padding: 14px;
    border-radius: 22px;
  }

  .mobile-scenario-select {
    font-size: 0.82rem;
  }

  .chat-scroll {
    padding: 14px;
  }

  .bubble {
    font-size: 0.82rem;
  }
}

/* ==========================================================================
   Hide practice case on mobile
   ========================================================================== */

@media (max-width: 767px) {
  .mobile-hide-section,
  .practice-case-section,
  .section.practice-case-section,
  .section:has(.quote-card) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
}

/* ==========================================================================
   Final CTA mobile optimization
   Desktop blijft intact
   ========================================================================== */

@media (max-width: 720px) {
  .final-cta {
    padding: 58px 0 62px;
    text-align: center;
  }

  .final-cta .container {
    width: min(100% - 28px, 1180px);
  }

  .final-cta h2 {
    max-width: 360px;
    margin: 0 auto;
    font-size: clamp(2.15rem, 9vw, 2.85rem);
    line-height: 1.06;
    letter-spacing: -0.055em;
  }

  .final-cta p {
    max-width: 340px;
    margin: 18px auto 0;
    font-size: 1rem;
    line-height: 1.55;
  }

  .final-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 340px;
    margin: 28px auto 0;
  }

  .final-actions .btn {
    width: 100%;
    min-height: 56px;
    padding: 1rem 1.15rem;
    font-size: 0.95rem;
    line-height: 1.15;
  }

  .final-actions .btn-secondary {
    background: rgba(255, 255, 255, 0.82);
    color: var(--color-navy);
    border-color: rgba(255, 255, 255, 0.68);
    box-shadow: none;
  }

  .final-note {
    max-width: 320px;
    margin: 20px auto 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.55);
  }
}

@media (max-width: 390px) {
  .final-cta {
    padding: 52px 0 58px;
  }

  .final-cta h2 {
    font-size: clamp(2rem, 8.8vw, 2.55rem);
  }

  .final-cta p {
    font-size: 0.94rem;
  }

  .final-actions {
    max-width: 100%;
  }

  .final-actions .btn {
    min-height: 54px;
    font-size: 0.9rem;
  }
}

/* Hide final CTA body copy on mobile */
@media (max-width: 720px) {
  .final-cta p {
    display: none !important;
  }

  .final-actions {
    margin-top: 28px;
  }
}

/* ==========================================================================
   Footer mobile layout
   Desktop blijft intact
   ========================================================================== */

@media (max-width: 720px) {
  footer {
    padding: 34px 0 38px;
  }

  .footer-inner {
    display: grid;
    gap: 24px;
    justify-items: center;
    text-align: center;
  }

  footer .brand {
    justify-content: center;
    gap: 12px;
  }

  footer .brand-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }

  footer .brand-name {
    display: flex !important;
    align-items: flex-start;
    text-align: left;
    color: #fff;
  }

  footer .brand-name small {
    display: block !important;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.62rem;
  }

  .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 16px;
    max-width: 320px;
  }

  .footer-links a {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
    font-weight: 750;
  }

  .footer-links a:hover {
    color: #fff;
  }

  .footer-inner > div:last-child {
    max-width: 300px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.76rem;
    line-height: 1.45;
  }
}

@media (max-width: 390px) {
  .footer-links {
    gap: 9px 13px;
  }

  .footer-links a {
    font-size: 0.78rem;
  }

  .footer-inner > div:last-child {
    font-size: 0.72rem;
  }
}

/* ==========================================================================
   Multilingual desktop hero safeguards
   Keep this block at the very end of the stylesheet so it overrides older
   hero-grid and hero-actions declarations without changing other sections.
   ========================================================================== */

/* The hero may contain a nested .container in the current template.
   Neutralise that second container so it does not remove another 32px. */
.hero-desktop-block .hero-grid.container {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* Give the hero slightly more horizontal room than regular content. */
.hero > .container {
  width: min(1280px, calc(100% - 48px));
}

@media (min-width: 1025px) {
  .hero-desktop-block .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(430px, 520px);
    align-items: center;
    gap: clamp(2.5rem, 4vw, 4.5rem);
    width: 100%;
    max-width: none;
  }

  /* Grid children must be allowed to shrink. Without min-width: 0,
     long German, French, Polish and Russian words can enter the visual. */
  .hero-desktop-block .hero-copy,
  .hero-desktop-block .hero-visual-wrap {
    width: 100%;
    min-width: 0;
  }

  .hero-desktop-block .hero-copy h1,
  .hero-desktop-block .hero-heading {
    width: 100%;
    max-width: 100%;
    margin: 0;
    font-size: clamp(3.35rem, 4.2vw, 5.2rem);
    line-height: 0.99;
    letter-spacing: -0.055em;
    text-wrap: balance;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }

  /* Works with the current markup and with the optional hero-heading spans. */
  .hero-desktop-block .hero-copy h1 > .highlight,
  .hero-desktop-block .hero-heading-highlight {
    display: block;
    max-width: 100%;
    margin-top: 0.1em;
  }

  .hero-desktop-block .hero-heading-main {
    display: block;
    max-width: 100%;
  }

  .hero-desktop-block .hero-copy > p {
    width: 100%;
    max-width: 650px;
  }

  /* Keep the visual fully inside its own grid column. */
  .hero-desktop-block .hero-visual-wrap {
    position: relative;
    z-index: 1;
    justify-self: end;
    align-self: center;
    max-width: 520px;
    margin: 0;
    transform: none;
  }

  .hero-desktop-block .hero-visual {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  /* Override the older max-content/nowrap CTA rules. */
  .hero-desktop-block .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
  }

  .hero-desktop-block .hero-actions .btn {
    width: auto;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    flex: 0 1 auto;
  }

  .hero-desktop-block .hero-actions .btn svg {
    flex: 0 0 auto;
  }

  /* Most translated headlines are longer than Dutch. */
  html:not(:lang(nl)) .hero-desktop-block .hero-copy h1,
  html:not(:lang(nl)) .hero-desktop-block .hero-heading {
    font-size: clamp(2.9rem, 3.65vw, 4.45rem);
    letter-spacing: -0.045em;
  }

  html:lang(de) .hero-desktop-block .hero-copy h1,
  html:lang(de) .hero-desktop-block .hero-heading,
  html:lang(fr) .hero-desktop-block .hero-copy h1,
  html:lang(fr) .hero-desktop-block .hero-heading,
  html:lang(es) .hero-desktop-block .hero-copy h1,
  html:lang(es) .hero-desktop-block .hero-heading,
  html:lang(pl) .hero-desktop-block .hero-copy h1,
  html:lang(pl) .hero-desktop-block .hero-heading,
  html:lang(it) .hero-desktop-block .hero-copy h1,
  html:lang(it) .hero-desktop-block .hero-heading {
    font-size: clamp(2.7rem, 3.35vw, 4rem);
  }

  html:lang(ru) .hero-desktop-block .hero-copy h1,
  html:lang(ru) .hero-desktop-block .hero-heading {
    font-size: clamp(2.5rem, 3.05vw, 3.65rem);
    letter-spacing: -0.035em;
  }
}

/* Compact desktop/laptop widths: preserve two columns but reduce both the
   visual and headline before switching to the existing one-column layout. */
@media (min-width: 1025px) and (max-width: 1240px) {
  .hero > .container {
    width: min(1180px, calc(100% - 40px));
  }

  .hero-desktop-block .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(390px, 460px);
    gap: clamp(1.75rem, 3vw, 2.75rem);
  }

  .hero-desktop-block .hero-visual-wrap {
    max-width: 460px;
  }

  .hero-desktop-block .hero-copy h1,
  .hero-desktop-block .hero-heading {
    font-size: clamp(2.85rem, 4vw, 4rem);
  }

  html:not(:lang(nl)) .hero-desktop-block .hero-copy h1,
  html:not(:lang(nl)) .hero-desktop-block .hero-heading {
    font-size: clamp(2.5rem, 3.45vw, 3.45rem);
  }

  html:lang(ru) .hero-desktop-block .hero-copy h1,
  html:lang(ru) .hero-desktop-block .hero-heading {
    font-size: clamp(2.3rem, 3.15vw, 3.05rem);
  }
}

/* The existing stylesheet changes the desktop hero to one column at 1024px.
   Keep its copy and buttons contained at those intermediate widths too. */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero > .container {
    width: min(860px, calc(100% - 40px));
  }

  .hero-desktop-block .hero-copy,
  .hero-desktop-block .hero-visual-wrap {
    min-width: 0;
  }

  .hero-desktop-block .hero-copy h1,
  .hero-desktop-block .hero-heading {
    max-width: 820px;
    font-size: clamp(3rem, 7vw, 4.5rem);
    line-height: 1;
    text-wrap: balance;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .hero-desktop-block .hero-copy h1 > .highlight,
  .hero-desktop-block .hero-heading-highlight {
    display: block;
    margin-top: 0.1em;
  }

  html:not(:lang(nl)) .hero-desktop-block .hero-copy h1,
  html:not(:lang(nl)) .hero-desktop-block .hero-heading {
    font-size: clamp(2.65rem, 6.3vw, 4rem);
  }

  .hero-desktop-block .hero-actions {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
  }

  .hero-desktop-block .hero-actions .btn {
    width: auto;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    line-height: 1.25;
  }
}

/* Restore the normal mobile container width used elsewhere on the site. */
@media (max-width: 767px) {
  .hero > .container {
    width: min(100% - 24px, 1180px);
  }
}