.ai-page,
.ai-page * {
 box-sizing: border-box;
}

.ai-page {
 --ai-bg: #020817;
 --ai-bg-2: #061527;
 --ai-card: rgba(255,255,255,.06);
 --ai-card-2: rgba(255,255,255,.08);
 --ai-border: rgba(255,255,255,.12);
 --ai-border-soft: rgba(255,255,255,.08);
 --ai-text: #ffffff;
 --ai-muted: rgba(255,255,255,.70);
 --ai-muted-2: rgba(255,255,255,.52);
 --ai-blue: #009EFA;
 --ai-blue-dark: #0B6BD3;
 --ai-green: #31DCA5;
 --ai-red: #EB5E73;
 --ai-yellow: #F6B133;
 --ai-orange: #F16A24;
 --ai-deep-red: #8D1F22;
 --ai-light-blue: #B8DCF4;
 --ai-shadow: 0 24px 80px rgba(0,0,0,.30);
 --ai-max: 1200px;

 position: relative;
 overflow: hidden;
 color: var(--ai-text);
 background:
  radial-gradient(circle at 12% 0%, rgba(0,158,250,.22), transparent 28rem),
  radial-gradient(circle at 88% 0%, rgba(139,59,255,.14), transparent 26rem),
  linear-gradient(180deg, #020817 0%, #04152A 48%, #020817 100%);
 font-family: Inter, "Helvetica Neue", Arial, sans-serif;
 line-height: 1.5;
}

.ai-page::before {
 content: "";
 position: absolute;
 inset: 0;
 pointer-events: none;
 background-image:
  linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
 background-size: 56px 56px;
 mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.4) 70%, transparent);
}

.ai-wrap {
 width: min(var(--ai-max), calc(100% - 44px));
 margin: 0 auto;
}

.ai-section {
 padding: 104px 0;
}

.ai-section-tight {
 padding-top: 0;
}

.ai-kicker {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 color: #74C9FF;
 font-size: 12px;
 font-weight: 800;
 letter-spacing: .15em;
 text-transform: uppercase;
}

.ai-kicker::before {
 content: "";
 width: 9px;
 height: 9px;
 border-radius: 999px;
 background: var(--ai-blue);
 box-shadow: 0 0 18px rgba(0,158,250,.75);
}

.ai-h2 {
 margin: 18px 0 0;
 max-width: 900px;
 font-size: clamp(36px, 5.2vw, 66px);
 line-height: 1.02;
 letter-spacing: -.045em;
 font-weight: 700;
}

.ai-lead {
 margin: 22px 0 0;
 max-width: 700px;
 color: var(--ai-muted);
 font-size: clamp(17px, 1.7vw, 21px);
 line-height: 1.5;
}

.ai-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 52px;
 padding: 0 24px;
 border-radius: 999px;
 text-decoration: none;
 font-size: 15px;
 font-weight: 700;
 transition: .18s ease;
}

.ai-btn-primary {
 background: var(--ai-blue);
 color: #fff;
 box-shadow: 0 12px 30px rgba(0,158,250,.22);
}

.ai-btn-primary:hover {
 background: #11AAFF;
 transform: translateY(-1px);
}

.ai-btn-secondary {
 border: 1px solid var(--ai-border);
 background: rgba(255,255,255,.05);
 color: #fff;
}

.ai-btn-secondary:hover {
 background: rgba(255,255,255,.09);
}

.ai-blue {
 color: var(--ai-blue);
}

.ai-nav {
 position: sticky;
 top: 0;
 z-index: 25;
 backdrop-filter: blur(18px);
 background: rgba(2,8,23,.78);
 border-bottom: 1px solid var(--ai-border-soft);
}

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

.ai-logo-link {
 display: inline-flex;
 align-items: center;
}

.ai-logo-img {
 display: block;
 height: 42px;
 width: auto;
}

.ai-nav-links {
 display: flex;
 align-items: center;
 gap: 18px;
}

.ai-nav-links a:not(.ai-btn) {
 color: var(--ai-muted);
 text-decoration: none;
 font-size: 14px;
 font-weight: 600;
}

.ai-nav-links a:not(.ai-btn):hover {
 color: #fff;
}

.ai-hero {
 padding: 96px 0 86px;
}

.ai-hero-grid {
 display: grid;
 grid-template-columns: minmax(0,.88fr) minmax(520px,1.12fr);
 gap: 54px;
 align-items: center;
}

.ai-hero h1 {
 margin: 18px 0 0;
 font-size: clamp(50px, 7vw, 92px);
 line-height: .93;
 letter-spacing: -.065em;
 font-weight: 650;
}

.ai-hero h1 span {
 display: block;
}

.ai-hero p {
 margin: 26px 0 0;
 max-width: 620px;
 color: rgba(255,255,255,.80);
 font-size: clamp(18px, 1.75vw, 22px);
 line-height: 1.45;
}

.ai-hero-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 14px;
 margin-top: 34px;
}

.ai-hero-points {
 display: grid;
 gap: 12px;
 margin-top: 34px;
 max-width: 560px;
}

.ai-point {
 display: flex;
 gap: 12px;
 align-items: flex-start;
 color: var(--ai-muted);
 font-size: 15px;
}

.ai-point-icon {
 width: 22px;
 height: 22px;
 flex: none;
 display: grid;
 place-items: center;
 border-radius: 999px;
 background: rgba(49,220,165,.16);
 color: var(--ai-green);
 font-size: 13px;
 font-weight: 800;
 margin-top: 1px;
}

.ai-hero-visual {
 position: relative;
 min-height: 580px;
}

.ai-dashboard-card,
.ai-dashboard-shadow-card {
 position: absolute;
 inset: auto 0 auto auto;
 width: min(700px, 100%);
 border-radius: 32px;
 border: 1px solid rgba(184,220,244,.26);
 background: linear-gradient(180deg, rgba(78,108,137,.38), rgba(39,67,97,.44));
 box-shadow: var(--ai-shadow);
 overflow: hidden;
}

.ai-dashboard-card {
 top: 0;
 right: 20px;
 z-index: 2;
 transform: rotate(-2deg);
 backdrop-filter: blur(12px);
}

.ai-dashboard-shadow-card {
 top: 338px;
 right: 68px;
 height: 190px;
 opacity: .28;
 transform: rotate(-2deg);
}

.ai-dashboard-top {
 display: flex;
 align-items: center;
 gap: 14px;
 padding: 18px 22px 14px;
 border-bottom: 1px solid rgba(184,220,244,.12);
}

.ai-dashboard-dots {
 display: flex;
 gap: 7px;
}

.ai-dashboard-dots i {
 width: 8px;
 height: 8px;
 display: block;
 border-radius: 50%;
 background: rgba(255,255,255,.32);
}

.ai-dashboard-search {
 flex: 1;
 min-height: 34px;
 display: flex;
 align-items: center;
 padding: 0 14px;
 border-radius: 999px;
 background: rgba(255,255,255,.08);
 color: rgba(255,255,255,.42);
 font-size: 12px;
}

.ai-live-pill {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 8px 12px;
 border-radius: 999px;
 border: 1px solid rgba(49,220,165,.28);
 color: var(--ai-green);
 background: rgba(49,220,165,.12);
 font-size: 11px;
 font-weight: 700;
 white-space: nowrap;
}

.ai-live-pill::before {
 content: "";
 width: 7px;
 height: 7px;
 border-radius: 999px;
 background: var(--ai-green);
}

.ai-dashboard-body {
 padding: 26px 22px 24px;
}

.ai-dashboard-heading h3 {
 margin: 0;
 font-size: 18px;
 font-weight: 650;
}

.ai-dashboard-sub {
 color: rgba(255,255,255,.50);
 font-size: 12px;
 margin-top: 4px;
}

.ai-kpi-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0,1fr));
 gap: 14px;
 margin-top: 22px;
}

.ai-kpi {
 min-height: 140px;
 padding: 15px 15px 14px;
 border-radius: 18px;
 background: rgba(255,255,255,.07);
 border: 1px solid rgba(255,255,255,.08);
}

.ai-kpi-label {
 color: rgba(255,255,255,.52);
 font-size: 10px;
 font-weight: 800;
 letter-spacing: .14em;
 text-transform: uppercase;
}

.ai-kpi-value {
 display: flex;
 align-items: flex-start;
 gap: 4px;
 margin-top: 14px;
 min-height: 58px;
 font-size: 20px;
 line-height: 1.02;
 font-weight: 700;
 letter-spacing: -.04em;
 font-variant-numeric: tabular-nums;
}

.ai-kpi-value-euro .ai-kpi-currency {
 font-size: 18px;
 line-height: 1.1;
 margin-top: 3px;
}

.ai-kpi-value span:last-child {
 display: inline-block;
}

.ai-kpi-meta {
 margin-top: 10px;
 color: #58E3A6;
 font-size: 13px;
 font-weight: 700;
}

.ai-kpi-meta-green {
 color: #58E3A6;
}

.ai-hero-table {
 display: grid;
 gap: 12px;
 margin-top: 18px;
}

.ai-hero-row {
 display: grid;
 grid-template-columns: 84px 1fr 82px;
 gap: 12px;
 align-items: center;
 font-size: 13px;
 color: rgba(255,255,255,.84);
}

.ai-hero-city,
.ai-hero-amount {
 font-weight: 600;
}

.ai-hero-amount {
 text-align: right;
 white-space: nowrap;
}

.ai-hero-statusbar {
 display: flex;
 height: 14px;
 overflow: hidden;
 border-radius: 999px;
}

.ai-hero-statusbar span {
 display: block;
 height: 100%;
}

.ai-hero-statusbar .s1 { width: 42%; background: #31DCA5; }
.ai-hero-statusbar .s2 { width: 29%; background: #10A7FF; }
.ai-hero-statusbar .s3 { width: 19%; background: #F5C242; }
.ai-hero-statusbar .s4 { width: 10%; background: #F05E73; }

.ai-pain-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0,1fr));
 gap: 16px;
 margin-top: 42px;
}

.ai-pain-card {
 padding: 26px;
 border-radius: 24px;
 border: 1px solid var(--ai-border-soft);
 background: rgba(255,255,255,.05);
}

.ai-pain-card h3 {
 margin: 0;
 font-size: 22px;
 letter-spacing: -.03em;
 font-weight: 650;
}

.ai-pain-card p {
 margin: 10px 0 0;
 color: var(--ai-muted);
 font-size: 15px;
}

.ai-cockpit-shell {
 margin-top: 42px;
 border-radius: 34px;
 border: 1px solid rgba(0,158,250,.28);
 background: rgba(4,18,35,.92);
 box-shadow: var(--ai-shadow);
 overflow: hidden;
}

.ai-cockpit-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 18px;
 padding: 28px 28px 24px;
 border-bottom: 1px solid rgba(255,255,255,.08);
}

.ai-cockpit-header h3 {
 margin: 0;
 font-size: 20px;
 font-weight: 650;
}

.ai-cockpit-sub {
 margin-top: 6px;
 color: var(--ai-muted-2);
 font-size: 13px;
}

.ai-tabs {
 display: inline-flex;
 gap: 6px;
 padding: 5px;
 border-radius: 999px;
 background: rgba(255,255,255,.08);
 border: 1px solid rgba(255,255,255,.08);
}

.ai-tab {
 min-height: 38px;
 padding: 0 16px;
 border: 0;
 border-radius: 999px;
 background: transparent;
 color: rgba(255,255,255,.62);
 font-family: inherit;
 font-size: 13px;
 font-weight: 700;
 cursor: pointer;
}

.ai-tab.is-active {
 background: #fff;
 color: #091420;
}

.ai-cockpit-grid {
 display: grid;
 grid-template-columns: minmax(0,1.15fr) minmax(340px,.85fr);
 gap: 22px;
 padding: 26px 28px 30px;
}

.ai-summary-row {
 display: grid;
 grid-template-columns: repeat(2, minmax(0,1fr));
 gap: 16px;
 margin-bottom: 18px;
}

.ai-summary-card {
 display: flex;
 gap: 16px;
 align-items: center;
 min-height: 108px;
 padding: 18px 22px;
 border-radius: 18px;
 border: 1px solid rgba(255,255,255,.08);
 background: rgba(255,255,255,.05);
}

.ai-summary-icon {
 width: 46px;
 height: 46px;
 flex: none;
 display: grid;
 place-items: center;
 border-radius: 14px;
 background: rgba(184,220,244,.14);
 color: #DCEAF5;
 font-weight: 700;
}

.ai-summary-icon-red {
 background: rgba(235,94,115,.12);
 color: #FF9EAC;
}

.ai-summary-label {
 color: var(--ai-muted-2);
 font-size: 11px;
 font-weight: 800;
 letter-spacing: .12em;
 text-transform: uppercase;
}

.ai-summary-value {
 margin-top: 5px;
 font-size: 18px;
 font-weight: 700;
 letter-spacing: -.02em;
}

.ai-summary-meta {
 margin-top: 4px;
 color: var(--ai-muted-2);
 font-size: 13px;
}

.ai-data-table {
 border: 1px solid rgba(255,255,255,.08);
 border-radius: 20px;
 overflow: hidden;
 background: rgba(255,255,255,.04);
}

.ai-data-head {
 padding: 16px 18px;
 border-bottom: 1px solid rgba(255,255,255,.08);
}

.ai-mini-tabs {
 display: inline-flex;
 gap: 4px;
 padding: 4px;
 border-radius: 12px;
 background: rgba(255,255,255,.06);
}

.ai-mini-tab {
 min-height: 30px;
 padding: 0 14px;
 border: 0;
 border-radius: 10px;
 background: transparent;
 color: rgba(255,255,255,.62);
 font-size: 12px;
 font-weight: 700;
}

.ai-mini-tab.is-active {
 background: rgba(255,255,255,.92);
 color: #091420;
}

.ai-data-labels {
 display: grid;
 grid-template-columns: 1.1fr 170px 1fr;
 gap: 16px;
 margin-top: 16px;
 color: var(--ai-muted-2);
 font-size: 12px;
 font-weight: 800;
 letter-spacing: .10em;
 text-transform: uppercase;
}

.ai-data-body {
 display: grid;
}

.ai-data-row {
 display: grid;
 grid-template-columns: 1.1fr 170px 1fr;
 gap: 16px;
 align-items: center;
 padding: 18px;
 border-bottom: 1px solid rgba(255,255,255,.08);
}

.ai-data-row:last-child {
 border-bottom: 0;
}

.ai-data-name strong {
 display: block;
 font-size: 16px;
 font-weight: 650;
}

.ai-data-name span {
 display: block;
 margin-top: 5px;
 color: var(--ai-muted-2);
 font-size: 13px;
}

.ai-data-amount {
 font-size: 18px;
 font-weight: 700;
 text-align: right;
 white-space: nowrap;
 font-variant-numeric: tabular-nums;
}

.ai-status-track {
 display: flex;
 height: 24px;
 border-radius: 4px;
 overflow: hidden;
}

.ai-status-track span {
 display: block;
 height: 100%;
}

.ai-status-track .c1 { background: var(--ai-light-blue); }
.ai-status-track .c2 { background: var(--ai-yellow); }
.ai-status-track .c3 { background: var(--ai-orange); }
.ai-status-track .c4 { background: #E11D1D; }
.ai-status-track .c5 { background: var(--ai-deep-red); }

.ai-legend {
 display: flex;
 flex-wrap: wrap;
 gap: 18px;
 padding: 16px 18px 18px;
 border-top: 1px solid rgba(255,255,255,.08);
 color: var(--ai-muted-2);
 font-size: 12px;
}

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

.ai-legend i {
 width: 12px;
 height: 12px;
 display: inline-block;
 border-radius: 2px;
}

.ai-legend .c1 { background: var(--ai-light-blue); }
.ai-legend .c2 { background: var(--ai-yellow); }
.ai-legend .c3 { background: var(--ai-orange); }
.ai-legend .c4 { background: #E11D1D; }
.ai-legend .c5 { background: var(--ai-deep-red); }

.ai-side-panel,
.ai-side-benefits {
 border: 1px solid rgba(255,255,255,.08);
 border-radius: 20px;
 background: rgba(255,255,255,.04);
}

.ai-side-panel {
 padding: 18px;
}

.ai-side-panel-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 14px;
 margin-bottom: 14px;
}

.ai-side-panel-head h4 {
 margin: 0;
 font-size: 18px;
 font-weight: 650;
}

.ai-side-panel-head span {
 color: var(--ai-muted-2);
 font-size: 12px;
 font-weight: 700;
}

.ai-task-list {
 display: grid;
 gap: 14px;
}

.ai-task-card {
 display: flex;
 gap: 14px;
 padding: 18px;
 border-radius: 18px;
 border: 1px solid rgba(255,255,255,.08);
 background: rgba(255,255,255,.05);
}

.ai-task-badge {
 width: 28px;
 height: 28px;
 flex: none;
 display: grid;
 place-items: center;
 border-radius: 999px;
 background: var(--ai-blue);
 color: #00111d;
 font-weight: 800;
 font-size: 13px;
}

.ai-task-card strong {
 display: block;
 font-size: 16px;
 font-weight: 650;
}

.ai-task-card p {
 margin: 8px 0 0;
 color: var(--ai-muted-2);
 font-size: 14px;
 line-height: 1.45;
}

.ai-side-benefits {
 display: grid;
 gap: 12px;
 margin-top: 16px;
 padding: 18px;
}

.ai-benefit-card {
 display: flex;
 gap: 12px;
 align-items: flex-start;
 padding: 14px;
 border-radius: 16px;
 background: rgba(255,255,255,.04);
}

.ai-benefit-icon {
 width: 24px;
 height: 24px;
 display: grid;
 place-items: center;
 border-radius: 999px;
 background: rgba(49,220,165,.16);
 color: var(--ai-green);
 font-size: 13px;
 font-weight: 800;
 flex: none;
}

.ai-benefit-card strong {
 display: block;
 font-size: 15px;
 font-weight: 650;
}

.ai-benefit-card span {
 display: block;
 margin-top: 5px;
 color: var(--ai-muted-2);
 font-size: 13px;
}

.ai-disclaimer {
 margin-top: 16px;
 color: var(--ai-muted-2);
 font-size: 12.5px;
}

.ai-workflow-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0,1fr));
 gap: 16px;
 margin-top: 40px;
}

.ai-workflow-card {
 padding: 26px;
 border-radius: 22px;
 border: 1px solid var(--ai-border-soft);
 background: rgba(255,255,255,.05);
}

.ai-workflow-no {
 width: 42px;
 height: 42px;
 display: grid;
 place-items: center;
 border-radius: 14px;
 background: var(--ai-blue);
 color: #fff;
 font-size: 16px;
 font-weight: 700;
}

.ai-workflow-card h3 {
 margin: 20px 0 0;
 font-size: 22px;
 font-weight: 650;
}

.ai-workflow-card p {
 margin: 10px 0 0;
 color: var(--ai-muted);
 font-size: 15px;
}

.ai-form-shell {
 display: grid;
 grid-template-columns: minmax(0,.9fr) minmax(360px,1.1fr);
 gap: 34px;
 align-items: start;
}

.ai-form-benefits {
 display: grid;
 gap: 14px;
 margin-top: 34px;
}

.ai-form-benefit {
 display: flex;
 gap: 14px;
 padding: 18px;
 border-radius: 20px;
 background: rgba(255,255,255,.05);
 border: 1px solid var(--ai-border-soft);
}

.ai-check {
 width: 28px;
 height: 28px;
 flex: none;
 display: grid;
 place-items: center;
 border-radius: 999px;
 background: rgba(49,220,165,.14);
 color: var(--ai-green);
 font-size: 15px;
 font-weight: 800;
}

.ai-form-benefit strong {
 display: block;
 font-size: 15px;
 font-weight: 650;
}

.ai-form-benefit span {
 display: block;
 margin-top: 5px;
 color: var(--ai-muted);
 font-size: 14px;
}

.ai-form-card {
 padding: 30px;
 border-radius: 30px;
 background: #fff;
 color: #1E2C3B;
 box-shadow: 0 24px 80px rgba(0,0,0,.26);
}

.ai-form-card h3 {
 margin: 0 0 8px;
 font-size: 30px;
 font-weight: 650;
 letter-spacing: -.03em;
 color: #1E2C3B;
}

.ai-form-card p {
 margin: 0 0 22px;
 color: rgba(30,44,59,.66);
 font-size: 15px;
}

.ai-form-fallback {
 display: grid;
 gap: 12px;
 padding: 18px;
 border-radius: 18px;
 background: #F5F8FB;
 border: 1px solid #E4EBF3;
}

.ai-form-fallback input,
.ai-form-fallback textarea {
 width: 100%;
 min-height: 48px;
 border: 1px solid #D6E0EB;
 border-radius: 12px;
 background: #fff;
 color: #1E2C3B;
 font-family: inherit;
 font-size: 14px;
 padding: 0 14px;
}

.ai-form-fallback textarea {
 min-height: 96px;
 padding-top: 14px;
 resize: vertical;
}

.ai-form-fallback button {
 min-height: 52px;
 border: 0;
 border-radius: 999px;
 background: var(--ai-blue);
 color: #fff;
 font-family: inherit;
 font-size: 15px;
 font-weight: 700;
}

.ai-final {
 padding: 84px 0 100px;
 text-align: center;
 border-top: 1px solid rgba(255,255,255,.08);
}

.ai-final h2 {
 margin: 0 auto;
 max-width: 860px;
 font-size: clamp(38px, 5vw, 70px);
 line-height: 1.02;
 letter-spacing: -.05em;
 font-weight: 650;
}

.ai-final p {
 margin: 22px auto 0;
 max-width: 660px;
 color: var(--ai-muted);
 font-size: 18px;
}

.ai-final .ai-btn {
 margin-top: 30px;
}

@media (max-width: 1100px) {
 .ai-hero-grid,
 .ai-cockpit-grid,
 .ai-form-shell {
  grid-template-columns: 1fr;
 }

 .ai-hero-visual {
  min-height: 520px;
 }

 .ai-dashboard-card {
  right: 0;
 }

 .ai-dashboard-shadow-card {
  right: 40px;
 }

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

@media (max-width: 760px) {
 .ai-wrap {
  width: min(100% - 28px, var(--ai-max));
 }

 .ai-nav-links a:not(.ai-btn) {
  display: none;
 }

 .ai-nav-inner {
  min-height: 68px;
 }

 .ai-logo-img {
  height: 34px;
 }

 .ai-hero {
  padding: 72px 0 64px;
 }

 .ai-hero-grid {
  gap: 28px;
 }

 .ai-hero h1 {
  font-size: clamp(44px, 15vw, 62px);
 }

 .ai-hero-visual {
  min-height: 420px;
 }

 .ai-dashboard-card,
 .ai-dashboard-shadow-card {
  width: 100%;
  right: 0;
 }

 .ai-dashboard-card {
  transform: none;
 }

 .ai-dashboard-shadow-card {
  display: none;
 }

 .ai-kpi-grid,
 .ai-pain-grid,
 .ai-workflow-grid,
 .ai-summary-row {
  grid-template-columns: 1fr;
 }

 .ai-hero-row,
 .ai-data-row,
 .ai-data-labels {
  grid-template-columns: 1fr;
 }

 .ai-hero-amount,
 .ai-data-amount {
  text-align: left;
 }

 .ai-tabs {
  width: 100%;
  overflow-x: auto;
 }

 .ai-cockpit-header {
  align-items: flex-start;
  flex-direction: column;
 }

 .ai-data-labels {
  gap: 8px;
 }

 .ai-form-card {
  padding: 22px;
 }

 .ai-section {
  padding: 74px 0;
 }

 .ai-section-tight {
  padding-top: 0;
 }
}

/* =========================================================
  Mobile QR Landingpage
  Wird nur auf kleinen Screens angezeigt.
  Desktop-HTML bleibt unverändert im Webflow Embed.
  ========================================================= */

.ai-mobile-page {
 display: none;
}

@media (max-width: 760px) {
 .ai-page {
  background:
   radial-gradient(circle at 50% 0%, rgba(0,158,250,.24), transparent 22rem),
   linear-gradient(180deg, #020817 0%, #04152A 55%, #020817 100%);
  padding-bottom: 82px;
 }

 .ai-page > .ai-hero,
 .ai-page > section,
 .ai-page > .ai-final {
  display: none !important;
 }

 .ai-mobile-page {
  display: block;
 }

 .ai-nav {
  position: static;
  background: #020817;
 }

 .ai-nav-inner {
  min-height: 64px;
 }

 .ai-logo-img {
  height: 32px;
 }

 .ai-nav-links {
  display: none;
 }

 .ai-mobile-hero {
  padding: 42px 0 36px;
 }

 .ai-mobile-hero h1 {
  margin: 16px 0 0;
  font-size: clamp(42px, 12vw, 54px);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 650;
 }

 .ai-mobile-hero h1 span {
  color: var(--ai-blue);
 }

 .ai-mobile-hero p {
  margin: 18px 0 0;
  color: rgba(255,255,255,.78);
  font-size: 18px;
  line-height: 1.45;
 }

 .ai-mobile-main-cta {
  width: 100%;
  margin-top: 24px;
 }

 .ai-mobile-proof {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 22px;
 }

 .ai-mobile-proof div {
  min-height: 112px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.055);
 }

 .ai-mobile-proof strong {
  display: block;
  color: #fff;
  font-size: 25px;
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 700;
 }

 .ai-mobile-proof span {
  display: block;
  margin-top: 10px;
  color: rgba(255,255,255,.58);
  font-size: 13px;
  line-height: 1.35;
 }

 .ai-mobile-mini-ui {
  margin-top: 22px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(0,158,250,.24);
  background: rgba(255,255,255,.055);
  box-shadow: 0 18px 50px rgba(0,0,0,.24);
 }

 .ai-mobile-ui-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
 }

 .ai-mobile-ui-top span {
  color: #fff;
  font-size: 18px;
  font-weight: 650;
 }

 .ai-mobile-ui-top b {
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--ai-green);
  background: rgba(49,220,165,.12);
  font-size: 12px;
 }

 .ai-mobile-ui-card {
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.08);
 }

 .ai-mobile-ui-card strong {
  display: block;
  font-size: 16px;
  color: #fff;
 }

 .ai-mobile-ui-card span {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,.58);
  font-size: 14px;
 }

 .ai-mobile-statusbar {
  display: flex;
  height: 18px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 5px;
 }

 .ai-mobile-statusbar i {
  display: block;
  height: 100%;
  width: 20%;
 }

 .ai-mobile-statusbar i.wide {
  width: 35%;
 }

 .ai-mobile-statusbar .c1 { background: var(--ai-light-blue); }
 .ai-mobile-statusbar .c2 { background: var(--ai-yellow); }
 .ai-mobile-statusbar .c3 { background: var(--ai-orange); }
 .ai-mobile-statusbar .c4 { background: #E11D1D; }
 .ai-mobile-statusbar .c5 { background: var(--ai-deep-red); }

 .ai-mobile-section {
  padding: 34px 0;
 }

 .ai-mobile-section h2,
 .ai-mobile-form-copy h2 {
  margin: 0;
  font-size: 34px;
  line-height: 1.04;
  letter-spacing: -.04em;
  font-weight: 650;
 }

 .ai-mobile-cards {
  display: grid;
  gap: 12px;
  margin-top: 20px;
 }

 .ai-mobile-cards article {
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.055);
 }

 .ai-mobile-cards strong {
  display: block;
  color: #fff;
  font-size: 18px;
  font-weight: 650;
 }

 .ai-mobile-cards span {
  display: block;
  margin-top: 7px;
  color: rgba(255,255,255,.64);
  font-size: 15px;
  line-height: 1.42;
 }

 .ai-mobile-flow-section {
  padding-top: 20px;
 }

 .ai-mobile-flow {
  display: grid;
  gap: 10px;
  margin-top: 20px;
 }

 .ai-mobile-flow div {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
 }

 .ai-mobile-flow b {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ai-blue);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
 }

 .ai-mobile-flow span {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
 }

 .ai-mobile-form-section {
  padding: 38px 0 52px;
 }

 .ai-mobile-form-copy p {
  margin: 14px 0 0;
  color: rgba(255,255,255,.70);
  font-size: 16px;
  line-height: 1.45;
 }

 .ai-mobile-form-card {
  margin-top: 22px;
  padding: 22px;
  border-radius: 24px;
 }

 .ai-mobile-form-card h3 {
  font-size: 26px;
 }

 .ai-mobile-sticky-cta {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 50;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ai-blue);
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 14px 34px rgba(0,0,0,.34);
 }

 .ai-form-fallback {
  padding: 14px;
 }
}


/* =========================================================
  Desktop Click Hint für Demo-Cockpit
  Hinweis: verschwindet nach erster Interaktion per JS.
  ========================================================= */

@media (min-width: 761px) {
 .ai-cockpit-shell {
  position: relative;
 }

 .ai-tabs {
  position: relative;
  overflow: visible;
 }

 .ai-tabs:not(.has-interacted)::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 1px solid rgba(0,158,250,.70);
  box-shadow:
   0 0 0 0 rgba(0,158,250,.26),
   0 0 28px rgba(0,158,250,.28);
  pointer-events: none;
  animation: aiTabPulse 2.1s ease-in-out infinite;
 }

 .ai-tabs:not(.has-interacted)::before {
  content: "Ansicht wechseln";
  position: absolute;
  right: 10px;
  top: calc(100% + 12px);
  z-index: 4;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(0,158,250,.14);
  border: 1px solid rgba(0,158,250,.38);
  color: #9EDCFF;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 10px 28px rgba(0,0,0,.20);
 }

 .ai-tab {
  position: relative;
 }

 .ai-tab:not(.is-active):hover {
  color: #fff;
  background: rgba(255,255,255,.08);
 }

 .ai-tab:not(.is-active)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(0,158,250,.70);
  transform: translateX(-50%) scale(.7);
  opacity: .75;
  transition: opacity .16s ease, transform .16s ease;
 }

 .ai-tab:not(.is-active):hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
 }

 .ai-tabs.has-interacted::before,
 .ai-tabs.has-interacted::after {
  display: none;
 }

 .ai-cockpit-shell:not(.has-interacted)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 34px;
  pointer-events: none;
  background:
   radial-gradient(circle at calc(100% - 150px) 62px, rgba(0,158,250,.16), transparent 160px);
  opacity: .72;
  animation: aiCockpitGlow 2.4s ease-in-out infinite;
 }

 @keyframes aiTabPulse {
  0%, 100% {
   box-shadow:
    0 0 0 0 rgba(0,158,250,.22),
    0 0 26px rgba(0,158,250,.25);
   opacity: .86;
  }
  50% {
   box-shadow:
    0 0 0 8px rgba(0,158,250,0),
    0 0 42px rgba(0,158,250,.44);
   opacity: 1;
  }
 }

 @keyframes aiCockpitGlow {
  0%, 100% { opacity: .46; }
  50% { opacity: .85; }
 }
}


/* =========================================================
  Mini Tabs im Cockpit klickbar machen
  ========================================================= */

.ai-mini-tab {
 cursor: pointer;
 transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.ai-mini-tab:not(.is-active):hover {
 color: #fff;
 background: rgba(255,255,255,.09);
}

.ai-mini-tabs {
 position: relative;
}

@media (min-width: 761px) {
 .ai-mini-tabs:not(.has-interacted)::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  border: 1px solid rgba(0,158,250,.35);
  box-shadow: 0 0 24px rgba(0,158,250,.16);
  pointer-events: none;
  opacity: .7;
 }
}


/* =========================================================
  Interaktiver Produktflow: Filter -> Debitor -> Buchung -> Aufgabe -> Mahnstatus
  ========================================================= */

.ai-flow-demo-flow {
 margin-top: 18px;
 border-radius: 22px;
 border: 1px solid rgba(255,255,255,.10);
 background: rgba(255,255,255,.04);
 overflow: hidden;
}

.ai-flow-flow-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 padding: 18px;
 border-bottom: 1px solid rgba(255,255,255,.08);
}

.ai-flow-flow-head h4 {
 margin: 0;
 color: #fff;
 font-size: 18px;
 font-weight: 650;
 letter-spacing: -.02em;
}

.ai-flow-flow-head span {
 color: rgba(255,255,255,.48);
 font-size: 12px;
 font-weight: 700;
 white-space: nowrap;
}

.ai-flow-steps {
 display: grid;
 grid-template-columns: repeat(5, minmax(0,1fr));
 gap: 8px;
 padding: 14px 18px;
 border-bottom: 1px solid rgba(255,255,255,.08);
}

.ai-flow-step {
 min-height: 38px;
 padding: 9px 10px;
 border: 1px solid rgba(255,255,255,.08);
 border-radius: 12px;
 background: rgba(255,255,255,.045);
 color: rgba(255,255,255,.58);
 font-family: inherit;
 font-size: 11px;
 line-height: 1.15;
 font-weight: 750;
 cursor: pointer;
 transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

.ai-flow-step:hover {
 color: #fff;
 border-color: rgba(0,158,250,.34);
 background: rgba(0,158,250,.10);
}

.ai-flow-step.is-active {
 color: #04152A;
 border-color: #fff;
 background: #fff;
}

.ai-flow-step.is-done {
 color: #9EDCFF;
 border-color: rgba(0,158,250,.24);
}

.ai-flow-content {
 padding: 18px;
}

.ai-flow-content-panel {
 display: none;
}

.ai-flow-content-panel.is-active {
 display: block;
 animation: aiProductFade .22s ease;
}

@keyframes aiProductFade {
 from { opacity: 0; transform: translateY(4px); }
 to { opacity: 1; transform: none; }
}

.ai-flow-panel-title {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 14px;
 margin-bottom: 14px;
}

.ai-flow-panel-title h5 {
 margin: 0;
 color: #fff;
 font-size: 17px;
 font-weight: 650;
 letter-spacing: -.02em;
}

.ai-flow-panel-title p {
 margin: 5px 0 0;
 color: rgba(255,255,255,.58);
 font-size: 13px;
 line-height: 1.45;
}

.ai-flow-pill {
 display: inline-flex;
 align-items: center;
 min-height: 26px;
 padding: 0 9px;
 border-radius: 999px;
 background: rgba(0,158,250,.12);
 border: 1px solid rgba(0,158,250,.28);
 color: #9EDCFF;
 font-size: 11px;
 font-weight: 800;
 white-space: nowrap;
}

.ai-flow-grid {
 display: grid;
 gap: 10px;
}

.ai-flow-debtor-row,
.ai-flow-booking-row,
.ai-flow-note-row {
 width: 100%;
 display: grid;
 grid-template-columns: minmax(0,1fr) auto;
 gap: 16px;
 align-items: center;
 padding: 14px;
 border-radius: 16px;
 border: 1px solid rgba(255,255,255,.08);
 background: rgba(255,255,255,.05);
 color: #fff;
 text-align: left;
 font-family: inherit;
}

button.ai-flow-debtor-row,
button.ai-flow-booking-row {
 cursor: pointer;
 transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

button.ai-flow-debtor-row:hover,
button.ai-flow-booking-row:hover {
 border-color: rgba(0,158,250,.34);
 background: rgba(0,158,250,.08);
 transform: translateY(-1px);
}

.ai-flow-debtor-main strong,
.ai-flow-booking-main strong,
.ai-flow-note-row strong {
 display: block;
 font-size: 15px;
 font-weight: 650;
}

.ai-flow-debtor-main span,
.ai-flow-booking-main span,
.ai-flow-note-row span {
 display: block;
 margin-top: 4px;
 color: rgba(255,255,255,.54);
 font-size: 12.5px;
}

.ai-flow-amount {
 color: #fff;
 font-size: 15px;
 font-weight: 800;
 white-space: nowrap;
 font-variant-numeric: tabular-nums;
}

.ai-flow-labels {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 margin-top: 9px;
}

.ai-flow-labels i {
 display: inline-flex;
 align-items: center;
 min-height: 22px;
 padding: 0 8px;
 border-radius: 999px;
 background: rgba(255,255,255,.07);
 color: rgba(255,255,255,.66);
 font-style: normal;
 font-size: 11px;
 font-weight: 700;
}

.ai-flow-detail-card {
 padding: 16px;
 border-radius: 18px;
 background: rgba(255,255,255,.055);
 border: 1px solid rgba(255,255,255,.08);
}

.ai-flow-detail-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0,1fr));
 gap: 10px;
}

.ai-flow-detail-item {
 padding: 12px;
 border-radius: 14px;
 background: rgba(255,255,255,.04);
}

.ai-flow-detail-item small {
 display: block;
 color: rgba(255,255,255,.46);
 font-size: 10px;
 font-weight: 800;
 letter-spacing: .11em;
 text-transform: uppercase;
}

.ai-flow-detail-item strong {
 display: block;
 margin-top: 5px;
 color: #fff;
 font-size: 14px;
 font-weight: 650;
}

.ai-flow-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin-top: 14px;
}

.ai-flow-action-btn {
 min-height: 40px;
 padding: 0 14px;
 border: 0;
 border-radius: 999px;
 background: var(--ai-blue);
 color: #fff;
 font-family: inherit;
 font-size: 13px;
 font-weight: 750;
 cursor: pointer;
}

.ai-flow-action-btn.secondary {
 border: 1px solid rgba(255,255,255,.12);
 background: rgba(255,255,255,.06);
 color: #fff;
}

.ai-flow-action-btn.is-disabled {
 opacity: .55;
 cursor: default;
}

.ai-flow-assignment {
 display: grid;
 gap: 12px;
}

.ai-flow-assignment-card {
 padding: 16px;
 border-radius: 18px;
 background: rgba(0,158,250,.10);
 border: 1px solid rgba(0,158,250,.28);
}

.ai-flow-assignment-card strong {
 display: block;
 color: #fff;
 font-size: 16px;
 font-weight: 650;
}

.ai-flow-assignment-card span {
 display: block;
 margin-top: 6px;
 color: rgba(255,255,255,.66);
 font-size: 13px;
}

.ai-flow-mail-chip {
 margin-top: 12px;
 padding: 12px;
 border-radius: 14px;
 background: rgba(255,255,255,.06);
 color: rgba(255,255,255,.70);
 font-size: 13px;
}

.ai-flow-status-list {
 display: grid;
 gap: 10px;
}

.ai-flow-status-item {
 display: flex;
 gap: 12px;
 align-items: flex-start;
 padding: 14px;
 border-radius: 16px;
 border: 1px solid rgba(255,255,255,.08);
 background: rgba(255,255,255,.05);
}

.ai-flow-status-dot {
 width: 22px;
 height: 22px;
 flex: none;
 display: grid;
 place-items: center;
 border-radius: 999px;
 background: rgba(49,220,165,.15);
 color: var(--ai-green);
 font-size: 12px;
 font-weight: 800;
 margin-top: 1px;
}

.ai-flow-status-item.is-next .ai-flow-status-dot {
 background: rgba(0,158,250,.15);
 color: #9EDCFF;
}

.ai-flow-status-item strong {
 display: block;
 color: #fff;
 font-size: 14.5px;
 font-weight: 650;
}

.ai-flow-status-item span {
 display: block;
 margin-top: 4px;
 color: rgba(255,255,255,.56);
 font-size: 12.5px;
}

.ai-flow-footnote {
 margin-top: 12px;
 color: rgba(255,255,255,.46);
 font-size: 12px;
 line-height: 1.4;
}

@media (max-width: 1100px) {
 .ai-flow-steps {
  grid-template-columns: repeat(2, minmax(0,1fr));
 }

 .ai-flow-detail-grid {
  grid-template-columns: 1fr;
 }
}

@media (max-width: 760px) {
 .ai-flow-demo-flow {
  display: none;
 }
}