:root {
            --color-blue: #0066B3;
            --color-teal: #00A99D;
            --color-dark: #1F2937;
            --color-gray-bg: #F8F9FA;
            --color-white: #FFFFFF;
            --color-muted: #667085;
            --color-soft-blue: rgba(0, 102, 179, 0.08);
            --color-soft-teal: rgba(0, 169, 157, 0.1);
            --gradient-main: linear-gradient(135deg, var(--color-blue) 0%, var(--color-teal) 100%);
            --gradient-soft: linear-gradient(135deg, rgba(0,102,179,0.08) 0%, rgba(0,169,157,0.10) 100%);
            --container-width: 1120px;
            --border-radius: 18px;
            --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.06);
            --shadow-card: 0 22px 55px rgba(15, 23, 42, 0.10);
            --shadow-hover: 0 20px 45px rgba(0, 169, 157, 0.16);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }

        body {
            font-family: 'Roboto', sans-serif;
            color: var(--color-dark);
            background-color: var(--color-white);
            line-height: 1.6;
            overflow-x: hidden;
        }

        a { text-decoration: none; color: inherit; transition: 0.3s; }
        ul { list-style: none; }
        p { color: #555; font-weight: 300; margin-bottom: 15px; }
        h1, h2, h3, h4 { line-height: 1.18; }

        .container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }
        .section-padding { padding: 68px 0; }
        .bg-gray { background-color: var(--color-gray-bg); }
        .gradient-text { background: var(--gradient-main); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .section-kicker { color: var(--color-teal); font-weight: 900; text-transform: uppercase; letter-spacing: 1px; font-size: 0.84rem; margin-bottom: 12px; display: block; }
        .section-title { font-size: 2.55rem; font-weight: 900; margin-bottom: 18px; color: var(--color-dark); letter-spacing: -0.02em; }
        .section-intro { max-width: 760px; margin: 0 auto 34px auto; text-align: center; color: #666; font-size: 1.06rem; }

        .btn {
            display: inline-block;
            padding: 12px 30px;
            font-weight: 700;
            border-radius: 999px;
            font-size: 1rem;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
            border: none;
            text-align: center;
        }
        .btn-primary { background: var(--gradient-main); color: white; box-shadow: 0 4px 15px rgba(0, 169, 157, 0.30); }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 169, 157, 0.42); color: white; }
        .btn-outline { background: transparent; color: var(--color-blue); border: 2px solid var(--color-blue); }
        .btn-outline:hover { background: rgba(0, 102, 179, 0.05); }
        .btn-white { background: white; color: var(--color-blue); }
        .btn-white:hover { background: #f0f0f0; transform: translateY(-2px); }
        .btn-ghost { background: transparent; color: var(--color-blue); padding-left: 8px; padding-right: 8px; }
        .btn-ghost:hover { color: var(--color-teal); }
        /* Button size + full-width variants (ButtonBlock). */
        .btn--small { padding: 8px 20px; font-size: 0.9rem; }
        .btn--large { padding: 15px 38px; font-size: 1.12rem; }
        .btn--block { display: block; width: 100%; }

        header {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.88);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid rgba(226,232,240,0.9);
            padding: 10px 0;
        }
        .nav-flex { display: flex; justify-content: space-between; align-items: center; }
        .logo { display: flex; align-items: center; }
        .logo img { height: 45px; width: auto; }
        .nav-links { display: flex; gap: 24px; align-items: center; font-weight: 500; }
        .nav-links a:hover { color: var(--color-blue); }
        .mobile-menu-btn { display: none; font-size: 24px; cursor: pointer; }

        /* HERO */
        .hero {
            position: relative;
            padding: 46px 0 52px 0;
            background:
                radial-gradient(circle at 8% 10%, rgba(0, 169, 157, 0.18) 0%, transparent 35%),
                radial-gradient(circle at 92% 18%, rgba(0, 102, 179, 0.15) 0%, transparent 42%),
                linear-gradient(180deg, #fff 0%, #f8fbfd 100%);
            overflow: hidden;
        }
        .hero::before {
            content: '';
            position: absolute;
            width: 420px;
            height: 420px;
            right: -160px;
            bottom: -170px;
            background: var(--gradient-main);
            opacity: 0.06;
            border-radius: 50%;
        }
        .hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(0,102,179,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(0,169,157,0.04) 1px, transparent 1px);
            background-size: 46px 46px;
            mask-image: linear-gradient(to bottom, rgba(0,0,0,0.35), transparent 72%);
            pointer-events: none;
        }
        .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 0.96fr 1.04fr; gap: 42px; align-items: start; }
        .hero-content { padding-top: 4px; }
        .hero-badge {
            display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
            background: rgba(0, 169, 157, 0.10); color: var(--color-blue); font-weight: 900; font-size: 0.9rem; margin-bottom: 18px;
            border: 1px solid rgba(0, 169, 157, 0.18);
        }
        .hero-content h1 { font-size: clamp(2.15rem, 3.8vw, 3.25rem); font-weight: 900; margin-bottom: 14px; color: var(--color-dark); letter-spacing: -0.035em; }
        .hero-claim { font-size: clamp(1.25rem, 2.05vw, 1.8rem); line-height: 1.24; font-weight: 800; color: var(--color-dark); margin-bottom: 22px; max-width: 700px; }
        .hero-content .subtitle { font-size: 1.05rem; color: #444; margin-bottom: 22px; max-width: 650px; }
        .hero-claim p { margin: 0; color: var(--color-dark); font-weight: 800; font-size: inherit; line-height: inherit; }
        .hero-content .subtitle p { margin: 0; color: inherit; font-size: inherit; }
        .hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
        .hero-trust-row { display: flex; gap: 13px; flex-wrap: wrap; color: #475467; font-size: 0.94rem; }
        .hero-trust-row span { display: inline-flex; align-items: center; gap: 8px; background: white; border: 1px solid #edf2f7; padding: 7px 11px; border-radius: 999px; box-shadow: 0 6px 18px rgba(15,23,42,0.04); }
        .hero-trust-row i { color: var(--color-teal); }

        .hero-visual {
            position: relative;
            min-height: 420px;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding-top: 0;
        }
        .visual-glow {
            position: absolute;
            width: 470px;
            height: 470px;
            background: var(--gradient-main);
            opacity: 0.12;
            border-radius: 44% 56% 58% 42% / 42% 50% 50% 58%;
            filter: blur(4px);
            animation: blob 9s infinite ease-in-out;
        }
        @keyframes blob {
            0%,100% { border-radius: 44% 56% 58% 42% / 42% 50% 50% 58%; transform: translateY(0) rotate(0deg); }
            50% { border-radius: 55% 45% 40% 60% / 55% 45% 55% 45%; transform: translateY(-12px) rotate(2deg); }
        }
        .antchat-preview {
            position: relative;
            width: min(100%, 560px);
            background: white;
            border-radius: 28px;
            box-shadow: var(--shadow-card);
            border: 1px solid rgba(226,232,240,0.95);
            overflow: hidden;
            transform: rotate(-1.5deg);
        }
        .preview-topbar { height: 58px; background: #f8fafc; border-bottom: 1px solid #edf2f7; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
        .preview-dots { display: flex; gap: 8px; }
        .preview-dots span { width: 10px; height: 10px; border-radius: 50%; background: #d0d5dd; display: block; }
        .preview-label { font-weight: 900; color: var(--color-dark); }
        .preview-body { padding: 28px; }
        .preview-title { display:flex; align-items:center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
        .preview-title h3 { font-size: 1.55rem; }
        .preview-shield { width: 42px; height: 42px; border-radius: 13px; background: var(--gradient-main); display:flex; align-items:center; justify-content:center; color:white; box-shadow: 0 9px 20px rgba(0,169,157,0.28); }
        .preview-search { display: flex; align-items: center; gap: 12px; border: 1px solid #d0d5dd; border-radius: 14px; padding: 14px 16px; margin-bottom: 20px; color: #667085; box-shadow: 0 7px 18px rgba(0,0,0,0.05); }
        .preview-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
        .preview-tab { background: #f2f4f7; border-radius: 9px; padding: 7px 10px; font-size: 0.82rem; color: #344054; }
        .preview-tab.active { background: rgba(0, 169, 157, 0.12); color: var(--color-blue); border-bottom: 2px solid var(--color-blue); }
        .preview-agent-card { background: #f2f4f7; border-radius: 18px; padding: 24px; display: grid; grid-template-columns: 60px 1fr; gap: 18px; align-items: center; }
        .preview-agent-icon { width: 58px; height: 58px; border-radius: 50%; background: white; display: flex; align-items: center; justify-content: center; color: var(--color-dark); box-shadow: 0 8px 20px rgba(0,0,0,0.12); font-size: 1.3rem; }
        .preview-agent-card h3 { font-size: 1.15rem; margin-bottom: 6px; }
        .preview-agent-card p { margin: 0; font-size: 0.95rem; color: #444; }
        .floating-card {
            position: absolute;
            background: white;
            border: 1px solid #edf2f7;
            border-radius: 16px;
            box-shadow: 0 16px 36px rgba(15,23,42,0.10);
            padding: 15px 18px;
            z-index: 4;
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 900;
            color: #344054;
        }
        .floating-card i { color: var(--color-teal); }
        .floating-card.one { left: 0; top: 72px; }
        .floating-card.two { right: 0; bottom: 70px; }



        /* HERO IMAGE PLACEHOLDER / FINAL SCREENSHOT */
        .hero-image-frame {
            position: relative;
            width: min(100%, 540px);
            min-height: 330px;
            background: white;
            border-radius: 28px;
            box-shadow: var(--shadow-card);
            border: 1px solid rgba(226,232,240,0.95);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
        }

        .hero-image-frame img {
            display: block;
            width: 100%;
            height: auto;
        }

        .hero-image-placeholder {
            width: 100%;
            min-height: 330px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 40px;
            background: linear-gradient(135deg, rgba(0,102,179,0.06), rgba(0,169,157,0.09));
            color: #667085;
        }

        .hero-image-placeholder i {
            font-size: 2.3rem;
            color: var(--color-teal);
            margin-bottom: 16px;
        }

        .hero-image-placeholder strong {
            display: block;
            color: var(--color-dark);
            font-size: 1.2rem;
            margin-bottom: 8px;
        }

        /* QUICK VALUE STRIP */
        .value-strip { margin-top: -38px; position: relative; z-index: 3; padding-bottom: 58px; }
        .value-panel {
            background: rgba(255,255,255,0.92);
            backdrop-filter: blur(10px);
            border: 1px solid #edf2f7;
            border-radius: 24px;
            box-shadow: 0 18px 45px rgba(15,23,42,0.08);
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            overflow: hidden;
        }
        .value-item { padding: 30px; display: flex; gap: 18px; align-items: flex-start; border-right: 1px solid #edf2f7; }
        .value-item:last-child { border-right: none; }
        .value-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--gradient-main); color: white; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow: 0 9px 20px rgba(0,169,157,0.22); }
        .value-item h3 { font-size: 1.1rem; margin-bottom: 7px; }
        .value-item p { margin-bottom: 0; font-size: 0.94rem; }

        /* STORY SECTION */
        .story-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
        .story-grid--single { display: block; max-width: 880px; margin: 0 auto; }
        .story-grid--single .section-title { max-width: 820px; }


        /* WHY / COMPLIANCE CARD */
        .why-compliance-layout {
            display: grid;
            grid-template-columns: 0.9fr 1.1fr;
            gap: 42px;
            align-items: start;
        }
        .why-compliance-copy {
            position: sticky;
            top: 96px;
        }
        .why-compliance-copy .section-copy {
            color: #555;
            font-size: 1.06rem;
            font-weight: 300;
            max-width: 820px;
        }
        .compliance-card {
            background: white;
            border: 1px solid #edf2f7;
            border-radius: 28px;
            box-shadow: var(--shadow-card);
            overflow: hidden;
            position: relative;
        }
        .compliance-card::before {
            content: '';
            position: absolute;
            right: -90px;
            top: -90px;
            width: 230px;
            height: 230px;
            border-radius: 50%;
            background: var(--gradient-main);
            opacity: 0.08;
        }
        .compliance-top {
            position: relative;
            z-index: 1;
            padding: 32px;
            border-bottom: 1px solid #edf2f7;
        }
        .compliance-top small {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: 'Roboto Mono', monospace;
            color: var(--color-teal);
            font-weight: 700;
            margin-bottom: 12px;
        }
        .compliance-top h3 {
            font-size: 1.7rem;
            line-height: 1.15;
            margin-bottom: 10px;
            letter-spacing: -0.02em;
        }
        .compliance-top p { color: var(--color-muted); margin: 0; }
        .status-grid {
            position: relative;
            z-index: 1;
            padding: 22px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
        }
        .status-item {
            background: #f8fafc;
            border: 1px solid #e7eef5;
            border-radius: 18px;
            padding: 18px;
        }
        .status-code {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--color-blue);
            font-family: 'Roboto Mono', monospace;
            font-size: 0.78rem;
            font-weight: 700;
            margin-bottom: 10px;
        }
        .status-code i { color: var(--color-teal); }
        .status-item strong { display: block; margin-bottom: 5px; font-size: 1rem; }
        .status-item span { display: block; color: var(--color-muted); font-size: 0.9rem; line-height: 1.45; }
        .status-item.main { background: linear-gradient(135deg, rgba(0,102,179,0.06), rgba(0,169,157,0.08)); border-color: rgba(0,169,157,0.22); }
        .status-footer {
            position: relative;
            z-index: 1;
            margin: 0 22px 22px;
            padding: 16px 18px;
            border-radius: 16px;
            background: var(--color-dark);
            color: white;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .status-footer i { color: var(--color-teal); }
        .status-footer span { color: rgba(255,255,255,0.86); font-size: 0.92rem; line-height: 1.45; }
        .story-card {
            background: var(--gradient-soft);
            border: 1px solid rgba(0,169,157,0.16);
            border-radius: 26px;
            padding: 42px;
            position: relative;
            overflow: hidden;
        }
        .story-card::after { content: ''; position:absolute; right:-70px; bottom:-80px; width:210px; height:210px; border-radius:50%; background: var(--gradient-main); opacity:0.08; }
        .story-stat { display:grid; gap: 18px; position:relative; z-index:1; }
        .story-stat-item { background:white; border:1px solid #edf2f7; border-radius:18px; padding: 20px; display:flex; align-items:center; gap: 16px; box-shadow: 0 10px 22px rgba(15,23,42,0.05); }
        .story-stat-icon { width: 45px; height:45px; border-radius:14px; background: var(--color-soft-teal); color: var(--color-blue); display:flex; align-items:center; justify-content:center; }
        .story-stat-item strong { display:block; font-size:1.05rem; color: var(--color-dark); }
        .story-stat-item span { color:#667085; font-size:0.92rem; }
        .problem-list { display: grid; gap: 18px; margin-top: 26px; }
        .problem-item { background: white; border-radius: 16px; border: 1px solid #eee; padding: 22px; display: flex; gap: 16px; align-items: flex-start; box-shadow: 0 5px 18px rgba(0,0,0,0.03); }
        .problem-item i { color: var(--color-blue); font-size: 1.2rem; margin-top: 2px; }
        .problem-item h3 { font-size: 1.05rem; margin-bottom: 6px; }
        .problem-item p { margin-bottom: 0; font-size: 0.95rem; }

        /* AGENTS */
        .agents-layout { display: grid; grid-template-columns: 280px 1fr; gap: 34px; align-items: start; }
        .agent-side {
            position: sticky;
            top: 95px;
            background: #fff;
            border: 1px solid #edf2f7;
            border-radius: 22px;
            box-shadow: var(--shadow-soft);
            padding: 24px;
        }
        .agent-side h3 { font-size: 1.25rem; margin-bottom: 10px; }
        .agent-side p { font-size: 0.94rem; margin-bottom: 18px; }
        .agent-side-chip { display:inline-flex; align-items:center; gap:8px; padding: 8px 11px; background: var(--color-soft-teal); color: var(--color-blue); border-radius:999px; font-weight:900; font-size:0.82rem; margin-bottom: 18px; }
        .agents-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
        .agent-card {
            background: white;
            border: 1px solid #eee;
            border-radius: 22px;
            padding: 24px;
            transition: 0.3s;
            display: flex;
            flex-direction: column;
            min-height: 255px;
            position: relative;
            overflow: hidden;
        }
        .agent-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: var(--gradient-main); opacity:0; transition:0.3s; }
        .agent-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: rgba(0, 169, 157, 0.25); }
        .agent-card:hover::before { opacity:1; }
        .agent-head { display:flex; align-items:flex-start; gap: 14px; margin-bottom: 12px; }
        .agent-icon { width: 45px; height:45px; border-radius:14px; background: #f0f7fb; color: var(--color-blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .agent-card h3 { font-size: 1.12rem; margin-bottom: 6px; }
        .agent-card p { font-size: 0.93rem; margin-bottom: 18px; flex-grow: 1; }
        .agent-example { background: #f8fafc; border-radius: 12px; padding: 12px; font-size: 0.82rem; color: #475467; border-left: 3px solid var(--color-teal); }



        /* ASSISTANTS - SELECTED VARIANT */
        .icon-box { width: 46px; height: 46px; border-radius: 14px; background: #f0f7fb; color: var(--color-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .v2-board { background: #fff; border: 1px solid #e7eef5; border-radius: 26px; box-shadow: var(--shadow-card); overflow: hidden; margin-top: 34px; }
        .v2-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 24px; background: linear-gradient(135deg, rgba(0,102,179,.06), rgba(0,169,157,.07)); border-bottom: 1px solid #e7eef5; }
        .v2-toolbar strong { font-size: 1.15rem; color: var(--color-dark); }
        .v2-toolbar span { font-family: 'Roboto Mono', monospace; font-size: .78rem; color: var(--color-blue); background: #fff; border: 1px solid rgba(0,102,179,.12); border-radius: 999px; padding: 7px 10px; }
        .v2-helper { padding: 0 24px 18px; color:#526071; background:linear-gradient(135deg, rgba(0,102,179,.06), rgba(0,169,157,.07)); font-weight: 300; }
        .v2-list { display: grid; grid-template-columns: 1fr 1fr; }
        .v2-row { display: grid; grid-template-columns: 54px 1fr; gap: 14px; padding: 22px 24px; border-bottom: 1px solid #eef2f7; border-right: 1px solid #eef2f7; align-items: start; }
        .v2-row:nth-child(even) { border-right: none; }
        .v2-row:nth-last-child(-n+2) { border-bottom: none; }
        .v2-row h3 { font-size: 1.08rem; margin-bottom: 5px; }
        .v2-row p { margin: 0 0 12px; font-weight: 300; color: #555; font-size: .93rem; }
        .v2-row .mini-prompt { font-size: .82rem; color: #526071; background: #f8fafc; border-radius: 10px; padding: 9px 11px; display: inline-block; }
        .v2-row.featured { background: rgba(0,169,157,.04); }
        .v2-footer { display: flex; align-items: center; gap: 12px; padding: 18px 24px; background: #f8fafc; color: #526071; border-top: 1px solid #eef2f7; }
        .v2-footer i { color: var(--color-teal); }

        /* FLOW */
        .flow-section { background: #fff; }
        .flow-row { display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position:relative; }
        .flow-step { background: white; border: 1px solid #edf2f7; border-radius: 22px; padding: 26px; box-shadow: var(--shadow-soft); position:relative; }
        .flow-number { font-size: 2.6rem; font-weight:900; background: var(--gradient-main); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height:1; margin-bottom: 16px; }
        .flow-step h3 { font-size:1.12rem; margin-bottom:10px; }
        .flow-step p { margin-bottom:0; font-size:0.94rem; }

        /* USE CASES */
        .usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
        .usecase-card { background: white; border: 1px solid #eee; border-radius: 22px; padding: 30px; box-shadow: var(--shadow-soft); transition: 0.3s; }
        .usecase-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
        .usecase-number { font-size: 2.7rem; font-weight: 900; background: var(--gradient-main); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; margin-bottom: 18px; }
        .usecase-card h3 { margin-bottom: 12px; font-size: 1.18rem; }
        .usecase-card p { margin-bottom: 0; font-size: 0.98rem; }

        /* SECURITY */
        .security-section { background: linear-gradient(135deg, #0f172a 0%, #16253a 50%, #1e293b 100%); color: white; padding: 94px 0; font-family: 'Roboto Mono', monospace; position: relative; overflow:hidden; }
        .security-section::before { content:''; position:absolute; inset:0; background-image: radial-gradient(circle at 16% 18%, rgba(0,169,157,0.18), transparent 28%), radial-gradient(circle at 80% 80%, rgba(0,102,179,0.18), transparent 30%); }
        .security-inner { position:relative; z-index:1; }
        .security-section h2 { color: white; font-size: 2.45rem; margin-bottom: 14px; text-align: center; }
        .security-section .security-intro { color: #cbd5e1; max-width: 760px; margin: 0 auto 42px auto; text-align: center; }
        .security-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
        .security-card { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; padding: 28px; min-height: 220px; backdrop-filter: blur(10px); }
        .security-card i { color: var(--color-teal); font-size: 1.7rem; margin-bottom: 18px; }
        .security-card h3 { color: white; font-size: 1.05rem; margin-bottom: 10px; }
        .security-card p { color: #cbd5e1; margin-bottom: 0; font-size: 0.93rem; }

        /* TRAINING */
        .training-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 55px; align-items: center; }
        .training-list { display: grid; gap: 16px; margin-top: 24px; }
        .training-list li { display: flex; gap: 12px; align-items: flex-start; color: #475467; }
        .training-list i { color: var(--color-teal); margin-top: 4px; }
        .training-box { background: var(--color-soft-teal); border-radius: 26px; padding: 42px; position: relative; overflow: hidden; border: 1px solid rgba(0,169,157,0.16); }
        .training-box::after { content: ''; position: absolute; right: -30px; bottom: -30px; width: 170px; height: 170px; background: var(--gradient-main); border-radius: 50%; opacity: 0.09; }
        .training-box h3 { font-size: 1.45rem; margin-bottom: 16px; position:relative; z-index:1; }
        .training-box p { margin-bottom: 0; position:relative; z-index:1; }

        /* PRICING */
        .pricing-wrap { display:grid; grid-template-columns: 0.8fr 1.2fr; gap: 34px; align-items: stretch; max-width: 980px; margin: 0 auto; }
        .pricing-note-card { background:#fff; border:1px solid #edf2f7; border-radius:24px; padding:32px; box-shadow:var(--shadow-soft); }
        .pricing-note-card i { color:var(--color-blue); font-size:2rem; margin-bottom:18px; }
        .pricing-note-card h3 { font-size:1.3rem; margin-bottom:12px; }
        .pricing-card { background: white; border-radius: 24px; box-shadow: 0 25px 60px rgba(0,0,0,0.08); border: 1px solid #eee; overflow: hidden; }
        .pricing-head { background: var(--gradient-main); color: white; padding: 34px 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
        .pricing-head h3 { color: white; font-size: 1.7rem; }
        .pricing-badge { background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.35); padding: 8px 12px; border-radius: 999px; font-size: 0.9rem; }
        .pricing-body { padding: 40px; }
        .price-line { font-size: 2.8rem; font-weight: 900; color: var(--color-dark); margin-bottom: 12px; }
        .price-line span { font-size: 1rem; color: #667085; font-weight: 400; }
        .pricing-features { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; margin: 28px 0 34px 0; }
        .pricing-features li { display: flex; gap: 10px; color: #475467; }
        .pricing-features i { color: var(--color-teal); margin-top: 4px; }
        .pricing-small-note { background: #f8fafc; border-radius: 12px; padding: 16px; font-size: 0.92rem; color: #667085; margin-bottom: 28px; }

        /* REFERENCE */
        .reference-card { background: white; border-radius: 26px; padding: 46px; box-shadow: var(--shadow-soft); border: 1px solid #eee; max-width: 920px; margin: 0 auto; position:relative; overflow:hidden; }
        .reference-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--gradient-main); }
        .reference-card i { color: var(--color-teal); font-size: 2.2rem; opacity: 0.35; margin-bottom: 16px; }
        .reference-text { font-size: 1.25rem; font-style: italic; color: #444; margin-bottom: 24px; }
        .reference-author { font-weight: 900; color: var(--color-blue); }
        .reference-author span { display: block; color: #667085; font-weight: 400; font-size: 0.95rem; margin-top: 4px; }

        /* FAQ */
        .faq-section { padding: 90px 0; }
        .faq-wrap { max-width: 850px; margin: 0 auto; }
        .faq-item { border: 1px solid #eee; border-radius: 14px; margin-bottom: 15px; background: white; overflow: hidden; transition: 0.3s; }
        .faq-item:hover { border-color: rgba(0, 102, 179, 0.3); box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
        .faq-question { width: 100%; text-align: left; padding: 24px; background: none; border: none; cursor: pointer; font-size: 1.05rem; font-weight: 700; color: var(--color-dark); display: flex; justify-content: space-between; align-items: center; gap: 20px; font-family: 'Roboto', sans-serif; }
        .faq-number { color: var(--color-teal); font-weight: 900; margin-right: 10px; }
        .faq-toggle-icon { width: 24px; height: 24px; position: relative; flex-shrink: 0; }
        .faq-toggle-icon::before, .faq-toggle-icon::after { content: ''; position: absolute; background: var(--color-blue); top: 50%; left: 50%; transform: translate(-50%, -50%); transition: 0.3s; }
        .faq-toggle-icon::before { width: 14px; height: 2px; }
        .faq-toggle-icon::after { width: 2px; height: 14px; }
        .faq-item.active .faq-toggle-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
        .faq-item.active .faq-toggle-icon::before { transform: translate(-50%, -50%) rotate(180deg); background: var(--color-teal); }
        .faq-item.active .faq-question { color: var(--color-blue); }
        .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease-out; padding: 0 24px; color: #555; line-height: 1.7; }
        .faq-item.active .faq-answer { padding-bottom: 24px; }
        .faq-answer p { margin-bottom: 0; }

        /* CTA + FORM */
        .cta-section { padding: 56px 0; }
        .cta-box { background: var(--gradient-main); color: white; border-radius: 28px; padding: 44px; text-align: center; box-shadow: 0 22px 55px rgba(0,169,157,0.18); }
        .cta-box h2 { color: white; font-size: 2.25rem; margin-bottom: 18px; }
        .cta-box p { color: rgba(255,255,255,0.92); max-width: 680px; margin: 0 auto 28px auto; font-size: 1.1rem; }
        .contact-form-wrap { max-width: 800px; margin: 0 auto; background: white; border-radius: 24px; border: 1px solid #eee; box-shadow: var(--shadow-soft); padding: 44px; }
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
        .form-group { margin-bottom: 18px; }
        .form-label { display: block; margin-bottom: 8px; font-weight: 500; color: #444; font-size: 0.95rem; }
        .form-label span { color: red; }
        .form-control { width: 100%; padding: 12px 15px; border: 2px solid #eee; border-radius: 10px; font-size: 1rem; font-family: 'Roboto', sans-serif; transition: 0.3s; background: #fdfdfd; }
        .form-control:focus { outline: none; border-color: var(--color-teal); background: white; box-shadow: 0 0 0 4px rgba(0, 169, 157, 0.1); }
        textarea.form-control { resize: vertical; min-height: 130px; }
        .form-check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 26px; font-size: 0.9rem; color: #666; }
        .form-check input { margin-top: 4px; cursor: pointer; }
        .form-check a { color: var(--color-blue); text-decoration: underline; }

        footer { background-color: var(--color-dark); color: #d1d5db; padding-top: 80px; }
        .newsletter-bar { background: rgba(255,255,255,0.05); padding: 40px; border-radius: var(--border-radius); display: flex; justify-content: space-between; align-items: center; margin-bottom: 60px; }
        .newsletter-input-group { display: flex; gap: 10px; }
        .newsletter-input-group input { padding: 12px 20px; border-radius: 50px; border: none; outline: none; width: 250px; }
        .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 60px; }
        .footer-col h5 { color: white; font-size: 1.1rem; margin-bottom: 20px; }
        .footer-col ul li { margin-bottom: 10px; }
        .footer-col ul li a:hover { color: var(--color-teal); text-decoration: underline; }
        .footer-logo { font-size: 24px; font-weight: 900; color: white; display: block; margin-bottom: 15px; }
        .social-icons a { margin-right: 15px; font-size: 1.2rem; transition: 0.3s; }
        .social-icons a:hover { color: var(--color-teal); }
        .copyright { border-top: 1px solid rgba(255,255,255,0.1); padding: 20px 0; text-align: center; font-size: 0.9rem; }

/* ── Use cases (usecases block) ───────────────────────────────── */
        .usecase-grid.usecase-grid--six { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
        .usecase-card {
            background: white; border: 1px solid #e7eef5; border-radius: 22px; padding: 24px;
            box-shadow: var(--shadow-soft); transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
            position: relative; overflow: hidden;
        }
        .usecase-card::before {
            content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
            background: var(--gradient-main); opacity: 0; transition: opacity 0.25s;
        }
        .usecase-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: rgba(0, 169, 157, 0.28); }
        .usecase-card:hover::before { opacity: 1; }
        .usecase-icon {
            width: 48px; height: 48px; border-radius: 15px; background: var(--gradient-soft); color: var(--color-blue);
            display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 1.15rem;
        }
        .usecase-card h3 { font-size: 1.16rem; margin-bottom: 10px; color: var(--color-dark); }
        .usecase-card p { margin-bottom: 13px; font-size: 0.95rem; color: #526071; }
        .usecase-example {
            display: block; background: #f8fafc; border-left: 3px solid var(--color-teal); border-radius: 12px;
            padding: 12px 13px; color: #475467; font-size: 0.84rem; line-height: 1.45;
        }

/* ── How it works (process block) ─────────────────────────────── */
        .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
        .process-step { background: white; border: 1px solid #e7eef5; border-radius: 22px; padding: 22px; box-shadow: var(--shadow-soft); }
        .process-number {
            width: 42px; height: 42px; border-radius: 14px; background: var(--gradient-main); color: white;
            display: flex; align-items: center; justify-content: center; font-family: 'Roboto Mono', monospace;
            font-weight: 900; margin-bottom: 14px; box-shadow: 0 9px 20px rgba(0,169,157,0.22);
        }
        .process-step h3 { font-size: 1.08rem; margin-bottom: 9px; }
        .process-step p { margin-bottom: 0; font-size: 0.94rem; }

/* ── Audience (audience block) ────────────────────────────────── */
        .audience-layout { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 28px; align-items: stretch; }
        .audience-card { background: white; border: 1px solid #edf2f7; border-radius: 26px; padding: 30px; box-shadow: var(--shadow-soft); }
        .audience-card.highlight { background: linear-gradient(135deg, rgba(0,102,179,0.06), rgba(0,169,157,0.09)); border-color: rgba(0,169,157,0.18); }
        .audience-list { display: grid; gap: 11px; margin-top: 18px; }
        .audience-list li { display: flex; gap: 11px; align-items: flex-start; color: #475467; }
        .audience-list i { color: var(--color-teal); margin-top: 4px; }

/* Mobile hamburger button is a real <button> (a11y) — reset its chrome. */
        .mobile-menu-btn { background: transparent; border: none; color: var(--color-dark); line-height: 1; }

        @media (max-width: 1050px) {
            .why-compliance-layout { grid-template-columns: 1fr; }
            .why-compliance-copy { position: static; }
            .hero-grid, .story-grid, .training-grid, .pricing-wrap { grid-template-columns: 1fr; }
            .hero-visual { min-height: auto; padding-top: 20px; }
            .floating-card { display:none; }
            .value-panel, .security-grid, .usecase-grid, .flow-row { grid-template-columns: 1fr; }
            .value-item { border-right:none; border-bottom:1px solid #edf2f7; }
            .value-item:last-child { border-bottom:none; }
            .agents-layout { grid-template-columns: 1fr; }
            .agent-side { position: static; }
            .usecase-grid.usecase-grid--six, .process-grid, .audience-layout { grid-template-columns: 1fr; }
        }
        @media (max-width: 900px) {
            .status-grid { grid-template-columns: 1fr; }
            .nav-flex { position: relative; }
            .nav-links { display: none; }
            .nav-links.open {
                display: flex; position: absolute; left: 20px; right: 20px; top: 62px;
                flex-direction: column; align-items: flex-start; gap: 14px; background: white;
                border: 1px solid #edf2f7; border-radius: 18px; padding: 18px; box-shadow: var(--shadow-card);
            }
            .mobile-menu-btn { display: block; }
            .newsletter-bar { flex-direction: column; gap: 20px; text-align: center; }
            .newsletter-input-group { flex-direction: column; width: 100%; }
            .newsletter-input-group input { width: 100%; }
            .footer-grid { grid-template-columns: 1fr; }
            .pricing-features, .form-grid, .agents-grid { grid-template-columns: 1fr; }
            .cta-box, .contact-form-wrap, .reference-card { padding: 34px 24px; }
            .section-title { font-size: 2rem; }
            .hero { padding-top: 52px; }
            .hero-image-frame,
            .hero-image-placeholder { min-height: 280px; }
        }
        @media (max-width: 600px) {
            .hero-buttons .btn { width: 100%; }
            .hero-image-frame,
            .hero-image-placeholder { min-height: 260px; }
            .pricing-head, .pricing-body { padding: 28px 24px; }
            .value-item { padding:24px; }
        }

        @media (max-width: 980px) {
            .v2-list { grid-template-columns: 1fr; }
            .v2-row, .v2-row:nth-child(even) { border-right: none; }
            .v2-row:nth-last-child(-n+2) { border-bottom: 1px solid #eef2f7; }
            .v2-row:last-child { border-bottom: none; }
        }
        @media (max-width: 700px) {
            .v2-toolbar, .v2-footer { flex-direction: column; align-items: flex-start; }
        }

/* Compact spacing on small screens (2026-06 redesign). */
        @media (max-width: 900px) {
            .section-padding { padding: 52px 0; }
            .hero { padding: 42px 0 46px 0; }
            .section-intro { margin-bottom: 28px; }
            .cta-section { padding: 48px 0; }
            .cta-box { padding: 34px 24px; }
        }
        @media (max-width: 600px) {
            .section-padding { padding: 44px 0; }
            .hero { padding: 36px 0 40px 0; }
        }

/* ── Page-builder components (ContentPage + Section block) ─────── */
        .builder-section { padding: 68px 0; }
        .builder-section--sp-compact { padding: 56px 0; }
        .builder-section--sp-normal { padding: 68px 0; }
        .builder-section--sp-large { padding: 96px 0; }
        .builder-section--gray { background: var(--color-gray-bg); }
        .builder-section--soft { background: var(--gradient-soft); }
        .builder-section--dark { background: #0f172a; color: #cbd5e1; }
        .builder-section--dark p { color: #cbd5e1; }
        .builder-section--dark .comp-heading,
        .builder-section--dark .comp-card h3 { color: #fff; }
        .builder-section--gradient { background: var(--gradient-main); color: #fff; box-shadow: 0 22px 55px rgba(0,169,157,0.18); }
        .builder-section--gradient .comp-heading,
        .builder-section--gradient .comp-prose,
        .builder-section--gradient p { color: #fff; }
        .container--narrow { max-width: 820px; }
        .container--wide { max-width: 1320px; }
        .container--full { max-width: none; padding-left: 24px; padding-right: 24px; }
        /* Optional dividing line on a section's top/bottom edge. */
        .builder-section--divider-top { border-top: 1px solid #e7eef5; }
        .builder-section--divider-bottom { border-bottom: 1px solid #e7eef5; }
        /* Vertical rhythm between stacked content blocks in a section. */
        .builder-section .container > * + * { margin-top: 26px; }

        /* Named semantic sections (#33): CTA band. */
        .cta-band { text-align: center; }
        .cta-band h2 { font-size: 2.25rem; margin-bottom: 18px; }
        .cta-band p { max-width: 680px; margin: 0 auto 28px; font-size: 1.1rem; }

        /* Heading component */
        .comp-heading { font-weight: 900; color: var(--color-dark); letter-spacing: -0.02em; }
        h2.comp-heading { font-size: 2.55rem; }
        h3.comp-heading { font-size: 1.6rem; }
        h4.comp-heading { font-size: 1.2rem; }
        .comp-heading--center { text-align: center; }
        span.section-kicker.comp-heading--center { text-align: center; }

        /* Section header unit (kicker + heading + intro). */
        .section-head--center { text-align: center; }
        .section-head--left { text-align: left; }
        .section-head--left .section-intro { margin-left: 0; }

        /* Prose (WYSIWYG) component */
        .comp-prose--lead { font-size: 1.15rem; color: #475467; }
        .comp-prose--muted { color: var(--color-muted); }
        .comp-prose--center { text-align: center; margin-left: auto; margin-right: auto; max-width: 760px; }

        /* Inline curated text-colour palette (rich-text colour features). */
        .text-blue { color: var(--color-blue); }
        .text-teal { color: var(--color-teal); }
        /* If two colours are stacked on the same run, the gradient wins. */
        .text-gradient {
            background: var(--gradient-main); -webkit-background-clip: text;
            background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
        }

        /* Callout / framed box */
        .callout { display: flex; gap: 14px; align-items: flex-start; border-radius: 16px; padding: 20px 22px; }
        .callout__icon { font-size: 1.3rem; margin-top: 2px; }
        .callout__body { flex: 1; }
        .callout--info { background: var(--color-soft-blue); border: 1px solid rgba(0,102,179,0.16); }
        .callout--info .callout__icon { color: var(--color-blue); }
        .callout--example { background: #f8fafc; border-left: 4px solid var(--color-teal); }
        .callout--example .callout__icon { color: var(--color-teal); }
        .callout--highlight { background: var(--gradient-soft); border: 1px solid rgba(0,169,157,0.18); }
        .callout--highlight .callout__icon { color: var(--color-teal); }
        .callout--dark { background: #0f172a; color: #cbd5e1; }
        .callout--dark .callout__icon { color: var(--color-teal); }
        .callout--dark p { color: #cbd5e1; }
        .callout--success { background: #ecfdf5; border: 1px solid rgba(5,150,105,0.22); }
        .callout--success .callout__icon { color: #059669; }
        .callout--warning { background: #fffbeb; border: 1px solid rgba(217,119,6,0.22); }
        .callout--warning .callout__icon { color: #d97706; }
        .callout--danger { background: #fef2f2; border: 1px solid rgba(220,38,38,0.22); }
        .callout--danger .callout__icon { color: #dc2626; }

        /* Button component alignment */
        .comp-button--center { text-align: center; }
        .comp-button--left { text-align: left; }

        /* Numbered-steps column variants (reuses .process-grid/.process-step) */
        .process-grid--cols2 { grid-template-columns: repeat(2, 1fr); }
        .process-grid--cols3 { grid-template-columns: repeat(3, 1fr); }
        .process-grid--cols4 { grid-template-columns: repeat(4, 1fr); }
        /* Steps timeline variant (vertical, numbered). */
        .process-timeline { list-style: none; margin: 0; padding: 0; position: relative; max-width: 760px; }
        .process-timeline::before { content: ''; position: absolute; left: 22px; top: 8px; bottom: 8px; width: 2px; background: var(--gradient-main); opacity: 0.25; }
        .process-timeline__item { position: relative; display: flex; gap: 20px; align-items: flex-start; padding-bottom: 26px; }
        .process-timeline__item:last-child { padding-bottom: 0; }
        .process-timeline__item .process-number { flex-shrink: 0; position: relative; z-index: 1; }
        .process-timeline__body h3 { font-size: 1.08rem; margin-bottom: 6px; }
        .process-timeline__body p { margin-bottom: 0; font-size: 0.94rem; color: #526071; }

        /* Card grid component */
        .comp-card-grid { display: grid; gap: 18px; }
        .comp-card-grid--cols2 { grid-template-columns: repeat(2, 1fr); }
        .comp-card-grid--cols3 { grid-template-columns: repeat(3, 1fr); }
        .comp-card-grid--cols4 { grid-template-columns: repeat(4, 1fr); }
        .comp-card {
            background: white; border: 1px solid #eee; border-radius: 22px; padding: 30px;
            box-shadow: var(--shadow-soft); transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
        }
        .comp-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: rgba(0,169,157,0.28); }
        .comp-card__icon {
            width: 48px; height: 48px; border-radius: 15px; background: var(--gradient-soft); color: var(--color-blue);
            display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 1.15rem;
        }
        .comp-card h3 { font-size: 1.16rem; margin-bottom: 10px; color: var(--color-dark); }
        .comp-card__body { font-size: 0.95rem; color: #526071; }
        .comp-card__link { display: inline-block; margin-top: 12px; color: var(--color-blue); font-weight: 700; font-size: 0.92rem; }
        .comp-card__link i { font-size: 0.8rem; margin-left: 4px; }
        .comp-card__kicker { color: var(--color-teal); font-weight: 900; text-transform: uppercase; letter-spacing: 1px; font-size: 0.8rem; margin-bottom: 8px; display: block; }
        .comp-card--highlight { background: linear-gradient(135deg, rgba(0,102,179,0.06), rgba(0,169,157,0.09)); border-color: rgba(0,169,157,0.18); }
        .comp-card__bullets { display: grid; gap: 10px; margin-top: 14px; }
        .comp-card__bullets li { display: flex; gap: 10px; align-items: flex-start; color: #475467; font-size: 0.95rem; }
        .comp-card .usecase-example { margin-top: 13px; }

        /* Bullet list with a curated marker (ListBlock + card bullets). The
           marker is a brand-teal ::before so the tick is one option, not the
           forced default. */
        .comp-bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
        .comp-bullets li { display: flex; gap: 10px; align-items: flex-start; color: #475467; font-size: 0.95rem; }
        .comp-bullets li::before { color: var(--color-teal); font-weight: 900; flex-shrink: 0; }
        .comp-bullets--dot li::before { content: "•"; }
        .comp-bullets--dash li::before { content: "–"; }
        .comp-bullets--check li::before { content: "\f058"; font-family: "Font Awesome 6 Free"; margin-top: 2px; }
        .comp-bullets--none li::before { content: ""; display: none; }
        .comp-bullets--number { counter-reset: comp-bullet; }
        .comp-bullets--number li::before { counter-increment: comp-bullet; content: counter(comp-bullet) "."; }

        /* Cards in a row share the tallest height. */
        .comp-card-grid { align-items: stretch; }
        .comp-card { height: 100%; }
        /* Card style variants (CardGridBlock). bordered = base look. */
        .comp-card-grid--raised .comp-card { border-color: transparent; box-shadow: var(--shadow-card); }
        .comp-card-grid--flat .comp-card { box-shadow: none; }
        .comp-card-grid--flat .comp-card:hover { transform: none; box-shadow: none; }
        /* Whole-card-as-link variant. */
        .comp-card--linked { display: block; color: inherit; text-decoration: none; cursor: pointer; }
        .comp-card--linked:hover { color: inherit; }
        /* Optional image header on a card. */
        .comp-card__media { margin: -30px -30px 18px; }
        .comp-card__img { width: 100%; height: auto; display: block; border-radius: 22px 22px 0 0; }

        @media (max-width: 1050px) {
            .comp-card-grid--cols3, .comp-card-grid--cols4,
            .process-grid--cols3, .process-grid--cols4 { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 700px) {
            .builder-section { padding: 48px 0; }
            .comp-card-grid, .process-grid--cols2, .process-grid--cols3, .process-grid--cols4 { grid-template-columns: 1fr; }
        }

/* Columns component (side-by-side content) */
        .comp-columns { display: grid; gap: 28px; }
        .comp-columns--cols2 { grid-template-columns: 1fr 1fr; }
        .comp-columns--cols3 { grid-template-columns: repeat(3, 1fr); }
        .comp-columns--ratio-left-narrow.comp-columns--cols2 { grid-template-columns: 0.9fr 1.1fr; }
        .comp-columns--ratio-right-narrow.comp-columns--cols2 { grid-template-columns: 1.1fr 0.9fr; }
        .comp-columns--gap-large { gap: 42px; }
        .comp-columns--center { align-items: center; }
        .comp-columns--start { align-items: start; }
        .comp-columns--sticky .comp-column:first-child { position: sticky; top: 96px; align-self: start; }
        .comp-column > * + * { margin-top: 18px; }

        @media (max-width: 900px) {
            .comp-columns--cols2, .comp-columns--cols3 { grid-template-columns: 1fr; }
            .comp-columns--ratio-left-narrow.comp-columns--cols2,
            .comp-columns--ratio-right-narrow.comp-columns--cols2 { grid-template-columns: 1fr; }
            .comp-columns--sticky .comp-column:first-child { position: static; }
            .comp-columns--reverse-mobile { display: flex; flex-direction: column-reverse; }
        }

        /* Testimonial */
        .testimonial { background: white; border: 1px solid #edf2f7; border-radius: 22px; padding: 30px; box-shadow: var(--shadow-soft); max-width: 760px; }
        .testimonial__quote { font-size: 1.2rem; line-height: 1.5; color: var(--color-dark); font-weight: 500; margin: 0 0 18px 0; }
        .testimonial__quote::before { content: '\201C'; color: var(--color-teal); font-weight: 900; margin-right: 4px; }
        .testimonial__author { display: flex; align-items: center; gap: 14px; }
        .testimonial__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
        .testimonial__meta strong { display: block; color: var(--color-dark); }
        .testimonial__role { color: var(--color-muted); font-size: 0.92rem; }

        /* Metrics band */
        .metric-band { display: grid; gap: 22px; text-align: center; }
        .metric-band--cols2 { grid-template-columns: repeat(2, 1fr); }
        .metric-band--cols3 { grid-template-columns: repeat(3, 1fr); }
        .metric-band--cols4 { grid-template-columns: repeat(4, 1fr); }
        .metric__value { display: block; font-size: 2.8rem; font-weight: 900; line-height: 1; background: var(--gradient-main); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
        .metric__label { display: block; margin-top: 8px; color: var(--color-muted); font-size: 0.98rem; }

        /* Logo strip */
        .logo-strip { text-align: center; }
        .logo-strip__title { color: var(--color-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 0.84rem; margin-bottom: 18px; }
        .logo-strip__items { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 32px; }
        .logo-strip__logo { height: 44px; width: auto; opacity: 0.85; }
        .logo-strip--grayscale .logo-strip__logo { filter: grayscale(1); opacity: 0.7; transition: 0.3s; }
        .logo-strip--grayscale .logo-strip__logo:hover { filter: none; opacity: 1; }

        /* Divider / spacer */
        .builder-divider { border: none; }
        hr.builder-divider { border-top: 1px solid #e7eef5; }
        .builder-divider--small { margin: 14px 0; }
        .builder-divider--medium { margin: 30px 0; }
        .builder-divider--large { margin: 56px 0; }
        .builder-divider--blank { margin: 0; }
        .builder-divider--blank.builder-divider--small { height: 14px; }
        .builder-divider--blank.builder-divider--medium { height: 30px; }
        .builder-divider--blank.builder-divider--large { height: 56px; }

        /* Video embed (responsive 16:9) */
        .video-embed { margin: 0; max-width: 860px; }
        .video-embed__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); }
        .video-embed__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
        .video-embed__caption { color: var(--color-muted); font-size: 0.92rem; margin-top: 10px; text-align: center; }

        @media (max-width: 700px) {
            .metric-band--cols2, .metric-band--cols3, .metric-band--cols4 { grid-template-columns: 1fr 1fr; }
        }

        /* Data table (TableBlock) — on-brand, horizontally scrollable. */
        .builder-table { overflow-x: auto; }
        .builder-table table { width: 100%; border-collapse: collapse; font-size: 0.96rem; background: white; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-soft); }
        .builder-table th, .builder-table td { padding: 13px 18px; text-align: left; border-bottom: 1px solid #edf2f7; }
        .builder-table thead th { background: var(--gradient-soft); color: var(--color-blue); font-weight: 900; }
        .builder-table tbody tr:last-child td, .builder-table tbody tr:last-child th { border-bottom: none; }
        .builder-table caption { caption-side: bottom; margin-top: 10px; color: var(--color-muted); font-size: 0.9rem; }

/* ── Legal + contact pages (gdpr / vop / kontakt) ─────────────── */
        .legal-hero {
            position: relative;
            padding: 72px 0 54px;
            background:
                radial-gradient(circle at 8% 10%, rgba(0, 169, 157, 0.16) 0%, transparent 34%),
                radial-gradient(circle at 92% 18%, rgba(0, 102, 179, 0.12) 0%, transparent 42%),
                linear-gradient(180deg, #fff 0%, #f8fbfd 100%);
            overflow: hidden;
            border-bottom: 1px solid #edf2f7;
        }
        .legal-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(0,102,179,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,169,157,0.035) 1px, transparent 1px);
            background-size: 46px 46px;
            mask-image: linear-gradient(to bottom, rgba(0,0,0,0.30), transparent 72%);
            pointer-events: none;
        }
        .legal-hero .container { position: relative; z-index: 1; }
        .legal-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            border-radius: 999px;
            background: rgba(0, 169, 157, 0.10);
            color: var(--color-blue);
            font-weight: 900;
            font-size: 0.9rem;
            margin-bottom: 18px;
            border: 1px solid rgba(0, 169, 157, 0.18);
        }
        .legal-hero h1 {
            font-size: clamp(2.2rem, 4vw, 3.4rem);
            font-weight: 900;
            letter-spacing: -0.035em;
            margin-bottom: 14px;
        }
        .legal-hero p {
            max-width: 820px;
            font-size: 1.08rem;
            color: #475467;
            margin-bottom: 0;
        }
        .legal-layout {
            display: grid;
            grid-template-columns: 260px 1fr;
            gap: 34px;
            align-items: start;
        }
        .legal-nav-card {
            position: sticky;
            top: 96px;
            background: #fff;
            border: 1px solid #edf2f7;
            border-radius: 22px;
            box-shadow: var(--shadow-soft);
            padding: 22px;
        }
        .legal-nav-card h3 {
            font-size: 1.05rem;
            margin-bottom: 14px;
        }
        .legal-nav-card a {
            display: block;
            padding: 8px 0;
            color: #526071;
            font-size: 0.92rem;
            border-bottom: 1px solid #f1f5f9;
        }
        .legal-nav-card a:last-child { border-bottom: none; }
        .legal-nav-card a:hover { color: var(--color-blue); }
        .legal-content {
            background: #fff;
            border: 1px solid #edf2f7;
            border-radius: 26px;
            box-shadow: var(--shadow-soft);
            padding: 44px;
        }
        .legal-content h2 {
            font-size: 1.55rem;
            margin: 34px 0 14px;
            color: var(--color-dark);
            letter-spacing: -0.015em;
            scroll-margin-top: 90px;
        }
        .legal-content h2:first-child { margin-top: 0; }
        .legal-content h3 {
            font-size: 1.12rem;
            margin: 24px 0 10px;
            color: var(--color-dark);
        }
        .legal-content p { color: #4b5563; margin-bottom: 14px; }
        .legal-content ul {
            list-style: disc;
            padding-left: 22px;
            margin: 8px 0 18px;
            color: #4b5563;
        }
        .legal-content li { margin-bottom: 7px; }
        .legal-note {
            background: linear-gradient(135deg, rgba(0,102,179,0.06), rgba(0,169,157,0.08));
            border: 1px solid rgba(0,169,157,0.18);
            border-radius: 18px;
            padding: 20px;
            margin: 22px 0;
        }
        .legal-note p { margin-bottom: 0; }
        .company-box {
            background: #f8fafc;
            border: 1px solid #e7eef5;
            border-radius: 18px;
            padding: 20px;
            margin: 16px 0 22px;
        }
        .company-box p { margin-bottom: 6px; }
        .company-box p:last-child { margin-bottom: 0; }
        @media (max-width: 980px) {
            .legal-layout { grid-template-columns: 1fr; }
            .legal-nav-card { position: static; }
        }
        @media (max-width: 700px) {
            .legal-content { padding: 28px 22px; }
            .legal-hero { padding: 56px 0 42px; }
        }

        /* Demo-request form: validation + success states. */
        .field-error { display: block; margin-top: 6px; color: #c0392b; font-size: 0.85rem; }
        .form-errors { margin-bottom: 18px; padding: 12px 16px; border-radius: 12px; background: rgba(192, 57, 43, 0.08); color: #c0392b; font-size: 0.9rem; }
        .contact-success { background: var(--color-white); padding: 48px 40px; border-radius: var(--border-radius); box-shadow: var(--shadow-card); }
        .contact-success i { color: var(--color-teal); }

        /* Rich text inside StreamField section copy (issue #14). The copy
           fields became RichText so editors get bold/italic/lists; these
           rules keep a single paragraph looking like the old <p> and make
           lists/inline marks inherit the surrounding section style. */
        .rich-text > :first-child { margin-top: 0; }
        .rich-text > :last-child { margin-bottom: 0; }
        .rich-text ul { list-style: disc; padding-left: 1.3em; margin: 0.6em 0; }
        .rich-text ol { list-style: decimal; padding-left: 1.3em; margin: 0.6em 0; }
        .rich-text li { margin: 0.3em 0; }
        .rich-text a { color: var(--color-blue); text-decoration: underline; }
        .rich-text b, .rich-text strong { font-weight: 700; }
        .rich-text h2 { font-size: 1.8rem; font-weight: 800; color: var(--color-dark); margin: 1.2em 0 0.5em; }
        .rich-text h3 { font-size: 1.35rem; font-weight: 700; color: var(--color-dark); margin: 1em 0 0.4em; }
        .rich-text hr { border: none; border-top: 1px solid #e7eef5; margin: 1.5em 0; }
        .rich-text blockquote { margin: 1em 0; padding-left: 1em; border-left: 3px solid var(--color-teal); color: var(--color-muted); }
        .rich-text img { max-width: 100%; height: auto; border-radius: var(--border-radius); }

        /* Free rich-text section block (issue #14). */
        .richtext-section-head { margin-bottom: 22px; }
        .richtext-section-body { max-width: 820px; color: #475467; font-size: 1.06rem; line-height: 1.7; }
        .richtext-centered { text-align: center; margin-left: auto; margin-right: auto; }

        /* Standalone image block (issue #15). */
        .image-block-figure { margin: 0 auto; max-width: 820px; }
        .image-block-figure.image-block-full { max-width: none; }
        .image-block-img { width: 100%; height: auto; display: block; }
        .image-block--rounded .image-block-img { border-radius: var(--border-radius); }
        .image-block--shadow .image-block-img { box-shadow: var(--shadow-card); }
        .image-block-caption { margin-top: 14px; text-align: center; color: var(--color-muted); font-size: 0.92rem; }

        /* Legal page rich-text extras: ordered lists + the callout boxes
           (company / provider details, GDPR principles) are authored as
           <blockquote> so the body stays editable in Draftail. */
        .legal-content ol { list-style: decimal; padding-left: 22px; margin: 8px 0 18px; color: #4b5563; }
        .legal-content blockquote {
            background: linear-gradient(135deg, rgba(0,102,179,0.06), rgba(0,169,157,0.08));
            border: 1px solid rgba(0,169,157,0.18);
            border-left: 4px solid var(--color-teal);
            border-radius: 0 16px 16px 0;
            padding: 18px 20px;
            margin: 22px 0;
            color: #475467;
            line-height: 1.7;
        }
        .legal-content blockquote strong { color: var(--color-dark); }

        /* Kontakt page: contact person card, billing details, map. */
        .contact-section { padding: 76px 0 90px; }
        .contact-card-wrap { max-width: 820px; margin: 0 auto 64px; }
        .person-card {
            background: var(--color-white);
            border: 1px solid #edf2f7;
            border-radius: 26px;
            box-shadow: var(--shadow-card);
            overflow: hidden;
            display: grid;
            grid-template-columns: 190px 1fr;
            min-height: 210px;
        }
        .person-placeholder {
            background: linear-gradient(135deg, rgba(0,102,179,0.08), rgba(0,169,157,0.11));
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 30px;
            border-right: 1px solid #edf2f7;
        }
        .person-avatar {
            width: 110px;
            height: 110px;
            border-radius: 50%;
            background: var(--color-white);
            color: var(--color-blue);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            font-size: 2.2rem;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
            border: 1px solid #edf2f7;
        }
        .person-avatar-img {
            width: 110px;
            height: 110px;
            border-radius: 50%;
            object-fit: cover;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
            border: 1px solid #edf2f7;
        }
        .person-info { padding: 32px 36px; }
        .person-info .role {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--color-blue);
            background: var(--color-soft-blue);
            border-radius: 999px;
            padding: 7px 11px;
            font-weight: 900;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: .04em;
            margin-bottom: 14px;
        }
        .person-info h2 { font-size: 1.65rem; margin-bottom: 6px; }
        .person-info p { color: var(--color-muted); margin-bottom: 20px; }
        .contact-lines { display: grid; gap: 10px; margin-bottom: 24px; }
        .contact-line { display: flex; align-items: center; gap: 10px; color: #344054; font-weight: 500; }
        .contact-line i { color: var(--color-blue); width: 18px; text-align: center; }
        .contact-actions { display: flex; flex-wrap: wrap; gap: 12px; }
        .billing-map-grid {
            display: grid;
            grid-template-columns: 0.95fr 1.05fr;
            gap: 32px;
            align-items: stretch;
        }
        .info-card, .map-card {
            background: var(--color-white);
            border: 1px solid #edf2f7;
            border-radius: 24px;
            box-shadow: var(--shadow-soft);
            overflow: hidden;
        }
        .info-card { padding: 34px; }
        .card-title { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
        .card-title-icon {
            width: 44px;
            height: 44px;
            border-radius: 14px;
            background: var(--gradient-main);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 9px 20px rgba(0,169,157,0.20);
        }
        .card-title h2 { font-size: 1.45rem; }
        .billing-note {
            background: linear-gradient(135deg, rgba(0,102,179,0.06), rgba(0,169,157,0.09));
            border: 1px solid rgba(0,169,157,0.16);
            border-radius: 16px;
            padding: 16px;
            margin-bottom: 22px;
            color: #475467;
            font-weight: 300;
        }
        .billing-note p { margin: 0; }
        .billing-table { display: grid; gap: 0; border-top: 1px solid #edf2f7; }
        .billing-row {
            display: grid;
            grid-template-columns: 150px 1fr;
            gap: 18px;
            padding: 13px 0;
            border-bottom: 1px solid #edf2f7;
            align-items: start;
        }
        .billing-row span { color: var(--color-muted); font-size: 0.94rem; }
        .billing-row strong { color: var(--color-dark); font-size: 0.95rem; text-align: right; }
        .registry-note { margin-top: 18px; color: #667085; font-size: 0.88rem; line-height: 1.55; }
        .map-card { min-height: 445px; display: grid; grid-template-rows: auto 1fr; }
        .map-header { padding: 24px 26px; border-bottom: 1px solid #edf2f7; }
        .map-header h2 { font-size: 1.35rem; margin-bottom: 5px; }
        .map-header p { margin: 0; color: var(--color-muted); font-size: 0.94rem; }
        .map-frame { min-height: 350px; }
        .map-frame iframe { width: 100%; height: 100%; min-height: 350px; border: 0; display: block; }
        @media (max-width: 940px) {
            .billing-map-grid { grid-template-columns: 1fr; }
        }
        @media (max-width: 720px) {
            .person-card { grid-template-columns: 1fr; }
            .person-placeholder { border-right: none; border-bottom: 1px solid #edf2f7; }
            .person-info { padding: 28px 24px; }
            .billing-row { grid-template-columns: 1fr; gap: 3px; }
            .billing-row strong { text-align: left; }
            .contact-actions .btn { width: 100%; }
            .contact-section { padding: 56px 0 72px; }
            .info-card { padding: 26px; }
        }