:root {
    --magenta: #E8005A;
    --cyan: #00B4C8;
    --gradient: linear-gradient(135deg, #3e8ef5 0%, #72f8ca 100%);
    --dark: #0D0D14;
    --body: #1E1E2E;
    --grey: #64648A;
    --light: #F6F6FA;
    --border: #E4E4EE;
    --white: #FFFFFF;
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { min-height: 100%; overflow-x: hidden; }
  html { scroll-behavior: smooth; }
  body { font-family: 'Montserrat', sans-serif; background: var(--white); color: var(--body); overflow-x: hidden; -webkit-font-smoothing: antialiased; }

  /* URGENCY BAR */
  .urgency-bar {
    background: var(--dark); color: var(--white);
    text-align: center; padding: 11px 20px;
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    flex-wrap: wrap;
  }
  .urgency-social { display: inline-flex; }
  .urgency-social .avatar-stack { display: inline-flex; }
  @media(max-width:700px) {
    .urgency-bar {
      padding: 9px 12px;
      font-size: 0.63rem;
      gap: 5px;
      white-space: nowrap;
      justify-content: center;
      flex-wrap: nowrap;
      overflow: hidden;
    }
    .urgency-bar span { white-space: nowrap; }
    .urgency-text { font-size: 0.63rem; }
    .urgency-social { flex-wrap: nowrap; align-items: center; gap: 5px; }
    .urgency-social .avatar-stack { display: inline-flex; }
  }
  @media(max-width:390px) {
    .urgency-bar { font-size: 0.56rem; gap: 4px; padding: 8px 8px; }
    .urgency-text { font-size: 0.56rem; }
    .urgency-social { gap: 4px; }
  }
  @media(max-width:340px) {
    .urgency-social .avatar-stack { display: none; }
    .urgency-bar { font-size: 0.5rem; }
    .urgency-text { font-size: 0.5rem; }
  }
  .urgency-bar .highlight { color: #FFD166; font-weight: 800; }
  .urgency-mobile { display: none; }
  @media(max-width:700px) { .urgency-desktop { display: none; } .urgency-mobile { display: inline; } }

  /* NAV */
  nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,0.97); backdrop-filter: blur(16px);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 80px; height: 72px; gap: 20px;
  }
  .nav-logo {
    font-weight: 900; font-size: 1.25rem; color: var(--dark); letter-spacing: -0.03em;
    text-decoration: none;
  }
  .nav-logo .logo-accent {
    background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  }
  .nav-badge {
    display: flex; align-items: center; gap: 12px;
    border: 1.5px solid var(--border);
    border-radius: 100px; padding: 5px 5px;
    font-size: 0.82rem; font-weight: 600; color: var(--body);
    white-space: nowrap;
    position: absolute; left: 50%; transform: translateX(-50%);
  }
  .saas-pill {
    display: flex; align-items: center; gap: 7px;
    background: linear-gradient(135deg, #3e8ef5, #72f8ca);
    border-radius: 100px; padding: 5px 14px 5px 7px; flex-shrink: 0;
    white-space: nowrap;
  }
  .saas-label { font-size: 0.72rem; font-weight: 800; color: white; text-transform: uppercase; letter-spacing: 0.1em; }

  .btn-nav {
    background: var(--magenta); color: var(--white);
    font-weight: 700; font-size: 0.88rem;
    padding: 13px 26px; border-radius: 8px; text-decoration: none;
    transition: all 0.22s; white-space: nowrap;
    box-shadow: 0 4px 16px rgba(232,0,90,0.25);
  }
  .btn-nav:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(232,0,90,0.4); }
  .btn-login {
    font-size: 0.82rem; font-weight: 700;
    color: var(--grey); text-decoration: none;
    padding: 8px 16px; border-radius: 100px;
    border: 1.5px solid var(--border);
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
  }
  .btn-login:hover { color: var(--dark); border-color: var(--dark); }

  /* NAV CONTACT DROPDOWN */
  .nav-contact-wrap { position: relative; }
  .nav-contact-btn {
    display: flex; align-items: center; gap: 7px;
    background: none; border: none; cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem; font-weight: 700; color: var(--grey);
    padding: 0; transition: color 0.2s;
  }
  .nav-contact-btn:hover { color: var(--body); }
  .nav-contact-chevron { transition: transform 0.2s; color: var(--grey); }
  .nav-contact-wrap.open .nav-contact-chevron { transform: rotate(180deg); }
  .nav-contact-dropdown {
    position: absolute; top: calc(100% + 10px); right: 0;
    background: var(--white); border: 1.5px solid var(--border);
    border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    min-width: 290px; padding: 6px;
    opacity: 0; pointer-events: none; transform: translateY(-6px);
    transition: opacity 0.18s, transform 0.18s;
    z-index: 200;
  }
  .nav-contact-wrap.open .nav-contact-dropdown {
    opacity: 1; pointer-events: all; transform: translateY(0);
  }
  .nav-contact-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 8px; text-decoration: none;
    color: var(--body); transition: background 0.15s;
  }
  .nav-contact-item:hover { background: var(--light); }
  .nav-contact-icon {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid; flex-shrink: 0;
  }
  .nav-contact-label { font-size: 0.62rem; font-weight: 700; color: var(--grey); text-transform: uppercase; letter-spacing: 0.06em; }
  .nav-contact-value { font-size: 0.78rem; font-weight: 700; color: var(--dark); margin-top: 1px; }
  @media(max-width:700px) {
    .nav-contact-dropdown { min-width: 0; width: 260px; right: 0; }
    .nav-contact-value { font-size: 0.72rem; white-space: nowrap; }
  }

  /* HERO */
  .hero { background: var(--white); padding: 64px 80px 16px; text-align: center; position: relative; overflow: hidden; }
  .hero::before { content: ''; position: absolute; top: -100px; left: -180px; width: 540px; height: 540px; background: radial-gradient(circle, rgba(0,180,200,0.05) 0%, transparent 70%); pointer-events: none; }
  .hero::after { content: ''; position: absolute; top: -60px; right: -100px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(0,212,140,0.05) 0%, transparent 70%); pointer-events: none; }

  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 1rem; font-weight: 700; color: var(--grey);
    margin-bottom: 28px; position: relative; z-index: 1;
    animation: fadeUp 0.6s 0.1s both;
  }
  .eyebrow-line { width: 28px; height: 2px; background: var(--cyan); border-radius: 2px; flex-shrink: 0; }
  @media(max-width:600px) {
    .hero-eyebrow { font-size: 0.78rem; gap: 6px; }
    .eyebrow-line { width: 16px; }
    .eyebrow-text { max-width: none; white-space: nowrap; font-size: 0.78rem; text-align: center; }
  }

  .hero h1 {
    font-weight: 900; font-size: clamp(1.75rem, 2.8vw, 2.85rem);
    line-height: 1.28; letter-spacing: -0.03em; color: var(--dark);
    max-width: 1100px; margin: 0 auto 28px;
    position: relative; z-index: 1; animation: fadeUp 0.6s 0.2s both;
  }
  .hero h1 .underline {
    background: var(--gradient);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  }
  .hero-sub {
    font-size: 1.05rem; line-height: 1.65; color: var(--grey);
    max-width: 900px; margin: 0 auto 34px;
    position: relative; z-index: 1; animation: fadeUp 0.6s 0.35s both;
    word-wrap: break-word; overflow-wrap: break-word;
  }
  .hero-sub strong { color: var(--dark); font-weight: 700; }
  .hero-sub-mobile { display: none; }
  .hero-sub-desktop { display: inline; }
  .h1-mobile { display: none; }
  .h1-desktop { display: inline; }
  @media(max-width:768px) { .no-cc-note { margin-bottom: 16px !important; } }
  .logo-strip-wrap { margin-top:48px; padding:0 20px; max-width:900px; margin-left:auto; margin-right:auto; }
  @media(max-width:768px) { .logo-strip-wrap { margin-top:20px; } }
  .logo-slider-track { display:flex; align-items:center; justify-content:center; gap:40px; flex-wrap:wrap; }
  .logo-slider-mobile { display:none; }
  @media(max-width:768px) {
    .logo-strip-wrap p { margin-bottom:12px; }
    .logo-slider-track { display:none; }
    .logo-slider-mobile { display:block; position:relative; }
    .logo-slider-inner { position:relative; height:60px; }
    .logo-slide { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:24px; opacity:0; transition:opacity 0.4s ease; pointer-events:none; }
    .logo-slide.active { opacity:1; pointer-events:auto; }
    .logo-slide img { height:44px; width:auto; object-fit:contain; max-width:42%; }
    .logo-dots { display:flex; justify-content:center; gap:8px; margin-top:10px; }
    .logo-dot { width:8px; height:8px; border-radius:50%; background:var(--grey); opacity:0.3; cursor:pointer; transition:opacity 0.2s; }
    .logo-dot.active { opacity:1; background:var(--primary, #3e8ef5); }
  }
  @media(max-width:768px){ .hide-mobile { display:none; } }
  .hero-sub-break { display: block; }
  @media(max-width: 1024px) { .hero-sub-break { display: inline; } }

  .hero-cta-group {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    flex-wrap: wrap; margin-bottom: 28px;
    position: relative; z-index: 1; animation: fadeUp 0.6s 0.45s both;
  }
  .btn-primary {
    display: inline-block; background: var(--magenta); color: var(--white);
    font-weight: 800; font-size: 0.95rem; padding: 20px 36px; border-radius: 12px;
    text-decoration: none; transition: all 0.22s;
    box-shadow: 0 8px 28px rgba(232,0,90,0.35);
  }
  .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(232,0,90,0.45); }

  .btn-primary-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
  }
  .no-risk-hint {
    font-size: 0.72rem; font-weight: 700;
    color: rgba(100,100,130,0.5);
    text-align: center; width: 100%;
    letter-spacing: 0.01em;
  }
  .btn-primary-wrap .btn-primary { width: auto; text-align: center; }
  /* No-trial info tooltip */
  .no-trial-hint {
    display: flex; align-items: center; justify-content: center;
    gap: 6px;
    font-size: 0.72rem; font-weight: 600;
    color: rgba(100,100,130,0.6);
    cursor: default;
    position: relative;
    width: 100%;
  }
  .no-trial-icon {
    width: 16px; height: 16px; border-radius: 50%;
    border: 1.5px solid rgba(100,100,130,0.35);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem; font-weight: 800;
    color: rgba(100,100,130,0.5);
    flex-shrink: 0;
    transition: border-color 0.2s, color 0.2s;
  }
  .no-trial-hint:hover .no-trial-icon {
    border-color: #E8005A; color: #E8005A;
  }
  .no-trial-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%; transform: translateX(-50%);
    background: #1a1a2e;
    color: rgba(255,255,255,0.85);
    font-size: 0.72rem; font-weight: 600;
    line-height: 1.5;
    padding: 10px 14px;
    border-radius: 10px;
    white-space: normal;
    width: 240px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    opacity: 0; pointer-events: none;
    transition: opacity 0.18s, transform 0.18s;
    transform: translateX(-50%) translateY(4px);
    z-index: 10;
  }
  .no-trial-tooltip::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1a1a2e;
  }
  .no-trial-hint:hover .no-trial-tooltip {
    opacity: 1; transform: translateX(-50%) translateY(0);
  }
  @media(max-width:600px) {
    .no-trial-tooltip { white-space: normal; width: 240px; text-align: center; }
  }
  .btn-secondary {
    display: inline-block; color: var(--grey); font-weight: 600;
    font-size: 0.9rem; text-decoration: none; padding: 8px 4px;
    border-bottom: 2px solid var(--border); transition: all 0.2s;
  }
  .btn-secondary:hover { color: var(--body); border-color: var(--cyan); }

  /* MOCK UI */
  .hero-mockup {
    max-width: 860px; margin: 0 auto;
    position: relative; z-index: 1; animation: fadeUp 0.7s 0.6s both;
  }
  .mockup-shell {
    background: var(--dark); border-radius: 16px;
    overflow: hidden; box-shadow: none;
    border: 1px solid rgba(255,255,255,0.08);
  }
  .mockup-bar {
    background: #1a1a2e; padding: 12px 20px;
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .mockup-dot { width: 12px; height: 12px; border-radius: 50%; }
  .mockup-dot.r { background: #FF5F57; }
  .mockup-dot.y { background: #FFBD2E; }
  .mockup-dot.g { background: #28C840; }
  .mockup-url {
    flex: 1; background: rgba(255,255,255,0.06); border-radius: 6px;
    padding: 6px 14px; font-size: 0.74rem; color: rgba(255,255,255,0.4);
    font-weight: 500; letter-spacing: 0.02em; text-align: center; max-width: 320px; margin: 0 auto;
  }

  .mockup-body {
    display: grid; grid-template-columns: 200px 1fr;
    min-height: 320px;
  }
  .mockup-sidebar {
    background: #141424; padding: 20px 16px;
    border-right: 1px solid rgba(255,255,255,0.06);
    display: flex; flex-direction: column; gap: 6px;
  }
  .sidebar-label {
    font-size: 0.62rem; font-weight: 700; color: rgba(255,255,255,0.25);
    text-transform: uppercase; letter-spacing: 0.12em;
    margin-bottom: 8px; margin-top: 16px; padding: 0 4px;
  }
  .sidebar-label:first-child { margin-top: 0; }
  .sidebar-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 8px;
    font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.45);
    cursor: pointer; transition: all 0.2s;
  }
  .sidebar-item.active {
    background: rgba(62,142,245,0.15);
    color: rgba(255,255,255,0.9); border: 1px solid rgba(62,142,245,0.2);
  }
  .sidebar-dot {
    width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.15); flex-shrink: 0;
  }
  .sidebar-item.active .sidebar-dot { background: #72f8ca; }
  .sidebar-item.done .sidebar-dot { background: var(--magenta); }
  .sidebar-item.done { color: rgba(255,255,255,0.6); }

  .mockup-main { padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; }
  .mockup-step-title { font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.1em; }
  .mockup-field {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; padding: 12px 16px;
    display: flex; flex-direction: column; gap: 4px;
  }
  .field-label { font-size: 0.68rem; font-weight: 700; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.1em; }
  .field-value { font-size: 0.88rem; font-weight: 600; color: rgba(255,255,255,0.85); }
  .field-value.gradient-text {
    background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    font-weight: 800;
  }
  .mockup-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .mockup-progress {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; padding: 14px 16px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .progress-label { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 8px; }
  .progress-dot-anim { width: 8px; height: 8px; background: #72f8ca; border-radius: 50%; animation: pulseDot 1.5s ease-in-out infinite; }
  @keyframes pulseDot { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
  .progress-pct { font-weight: 800; font-size: 0.95rem; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
  .progress-bar-wrap { height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; margin-top: 8px; }
  .progress-bar-fill { height: 100%; border-radius: 2px; background: var(--gradient); width: 73%; animation: fillBar 2s 1.5s ease-out both; }
  @keyframes fillBar { from { width: 0%; } to { width: 73%; } }

  .mockup-action-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
  .mockup-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--magenta); color: white;
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.78rem;
    padding: 10px 18px; border-radius: 7px; border: none; cursor: pointer;
  }
  .mockup-btn-outline {
    background: transparent; color: rgba(255,255,255,0.4);
    font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.78rem;
    padding: 10px 16px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.1); cursor: pointer;
  }
  .mockup-tag {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(0,180,200,0.12); border: 1px solid rgba(0,180,200,0.2);
    border-radius: 100px; padding: 3px 10px;
    font-size: 0.68rem; font-weight: 700; color: var(--cyan);
  }

  /* TRUST ROW */
  .trust-row {
    display: flex; align-items: center; justify-content: center; gap: 24px;
    padding: 28px 80px; border-bottom: 1px solid var(--border);
    background: var(--white); flex-wrap: nowrap;
  }
  .trust-item {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.82rem; font-weight: 500; color: var(--grey);
  }
  .trust-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .trust-icon.cyan { background: rgba(0,180,200,0.1); }
  .trust-icon.magenta { background: rgba(232,0,90,0.08); }
  .trust-icon.green { background: rgba(114,248,202,0.12); }

  /* SECTION GENERAL */
  .section-label {
    display: inline-block; font-size: 0.72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--cyan); margin-bottom: 16px;
  }
  .section-title {
    font-weight: 900; font-size: clamp(1.9rem, 3vw, 2.8rem);
    line-height: 1.12; letter-spacing: -0.03em; color: var(--dark);
    margin-bottom: 48px;
  }

  /* PAIN SECTION */
  .pain-section { background: var(--dark); padding: 100px 80px; }
  .pain-section .section-label { color: var(--magenta); }
  .pain-section .section-title { color: var(--white); }
  .pain-section .section-title .red { color: var(--magenta); }
  .pain-intro {
    max-width: 900px; margin: 0 auto 56px;
    text-align: center; font-size: 1rem; line-height: 1.78;
    color: rgba(255,255,255,0.55); font-weight: 500;
  }
  .pain-intro p { margin-bottom: 16px; }
  .pain-intro p:last-child { margin-bottom: 0; }
  .pain-intro strong { color: rgba(255,255,255,0.85); font-weight: 700; }
  .pain-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
    max-width: 1400px; margin: 0 auto;
  }
  .pain-card {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px; padding: 28px 26px;
    transition: border-color 0.2s, background 0.2s;
  }
  .pain-card:hover { border-color: rgba(232,0,90,0.3); background: rgba(232,0,90,0.04); }
  .pain-icon {
    width: 36px; height: 36px; background: var(--magenta); border-radius: 8px;
    display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
  }
  .pain-icon svg { width: 18px; height: 18px; }
  .pain-num { font-size: 0.68rem; font-weight: 800; color: rgba(255,255,255,0.25); text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: 6px; }
  .pain-card h3 { font-size: 1rem; font-weight: 800; color: var(--white); margin-bottom: 10px; line-height: 1.3; }
  .pain-card p { font-size: 0.88rem; line-height: 1.65; color: rgba(255,255,255,0.5); font-weight: 500; }

  /* GRADIENT BAND */
  .gradient-band {
    background: var(--gradient); padding: 70px 80px; text-align: center;
  }
  .gradient-band h2 {
    font-weight: 900; font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    line-height: 1.15; letter-spacing: -0.025em; color: var(--white);
    max-width: 900px; margin: 0 auto;
  }

  /* WORKFLOW SECTION */
  .workflow-section { padding: 48px 80px 100px; background: var(--white); }
  .workflow-inner { max-width: 900px; margin: 0 auto; }
  .workflow-intro {
    max-width: 640px; font-size: 1rem; line-height: 1.75;
    color: var(--grey); margin-bottom: 56px;
  }
  .workflow-intro p { margin-bottom: 12px; }
  .workflow-intro strong { color: var(--dark); }
  .workflow-steps { display: flex; flex-direction: column; gap: 0; }
  .wf-step {
    display: grid; grid-template-columns: 60px 1fr;
    gap: 0 24px; padding: 28px 0; border-bottom: 1px solid rgba(228,228,238,0.5);
    align-items: start; position: relative;
  }
  .wf-step:last-child { border-bottom: none; }
  .wf-num-col { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .wf-num {
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--gradient); display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 1.1rem; color: white; flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(62,142,245,0.3);
  }
  .wf-connector { width: 2px; flex: 1; min-height: 40px; background: rgba(228,228,238,0.5); margin-top: 8px; }
  .wf-step:last-child .wf-connector { display: none; }
  .wf-body { padding-top: 8px; }
  .wf-body h3 { font-size: 1.1rem; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
  .wf-body p { font-size: 0.92rem; line-height: 1.65; color: var(--grey); }

  /* API SECTION */
  .api-section { padding: 100px 80px; background: var(--light); }
  .api-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1400px; margin: 0 auto; }
  .api-card {
    background: var(--white); border: 1.5px solid var(--border);
    border-radius: 20px; padding: 32px 28px;
    transition: all 0.25s; cursor: default;
    display: flex; flex-direction: column;
  }
  .api-card:hover { border-color: var(--cyan); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,180,200,0.1); }
  .api-logo {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px; font-size: 1.4rem;
  }
  .api-logo.sprengnetter { background: linear-gradient(135deg, #0066CC, #0099FF); }
  .api-logo.google { background: linear-gradient(135deg, #4285F4, #34A853); }
  .api-logo.ai { background: linear-gradient(135deg, #7B2FBE, #C084FC); }
  .api-card h3 { font-size: 1.05rem; font-weight: 800; color: var(--dark); margin-bottom: 10px; }
  .api-card p { font-size: 0.88rem; line-height: 1.65; color: var(--grey); flex: 1; }
  .api-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(0,180,200,0.08); border: 1px solid rgba(0,180,200,0.15);
    border-radius: 100px; padding: 4px 12px; margin-top: 16px;
    font-size: 0.68rem; font-weight: 800; color: var(--cyan);
    text-transform: uppercase; letter-spacing: 0.1em;
    align-self: flex-start;
  }

  /* DESIGN SECTION */
  .design-section { padding: 100px 80px; background: var(--white); }
  .design-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; max-width: 1100px; margin: 0 auto; }
  .design-text .section-label { display: block; }
  .design-text .section-title { margin-bottom: 24px; }
  .design-text p { font-size: 0.95rem; line-height: 1.78; color: var(--grey); margin-bottom: 20px; }
  .design-text p strong { color: var(--dark); font-weight: 700; }
  .design-visual {
    background: var(--dark); border-radius: 20px; overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.18); aspect-ratio: 4/5; display: flex; flex-direction: column;
  }
  .dv-header { padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .dv-brand { font-size: 0.78rem; font-weight: 800; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 4px; }
  .dv-title { font-size: 1rem; font-weight: 900; color: white; }
  .dv-body { flex: 1; display: flex; flex-direction: column; gap: 1px; }
  .dv-img-placeholder { flex: 1; background: linear-gradient(180deg, #1a2040 0%, #0d1030 100%); display: flex; align-items: center; justify-content: center; }
  .dv-img-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; height: 100%; }
  .dv-img-block { background: rgba(255,255,255,0.04); }
  .dv-img-block:nth-child(1) { background: linear-gradient(135deg, #1a2a3a, #0d1830); }
  .dv-img-block:nth-child(2) { background: linear-gradient(135deg, #1a1a2e, #0d0d20); }
  .dv-img-block:nth-child(3) { background: linear-gradient(135deg, #0d1820, #1a2a30); grid-column: 1 / -1; height: 80px; }
  .dv-data-row {
    display: flex; gap: 1px;
  }
  .dv-data-block {
    flex: 1; padding: 16px; background: rgba(255,255,255,0.03);
    display: flex; flex-direction: column; gap: 4px;
  }
  .dv-data-label { font-size: 0.6rem; font-weight: 700; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.1em; }
  .dv-data-val { font-size: 1rem; font-weight: 900; color: white; }
  .dv-data-val.up { color: #72f8ca; }
  .dv-footer { padding: 16px 24px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: space-between; }
  .dv-footer-logo { font-size: 0.75rem; font-weight: 800; color: rgba(255,255,255,0.3); }
  .dv-footer-badge { background: var(--magenta); padding: 4px 12px; border-radius: 6px; font-size: 0.68rem; font-weight: 800; color: white; }

  /* PRICING */
  .pricing-section { padding: 100px 80px; background: var(--light); }
  .pricing-inner { max-width: 560px; margin: 0 auto; }
  .price-card {
    background: var(--white); border: 2px solid var(--border);
    border-radius: 24px; padding: 48px 40px; text-align: left;
    box-shadow: 0 16px 60px rgba(0,0,0,0.08);
    position: relative; overflow: hidden;
  }
  .price-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--gradient);
  }
  .price-card-label {
    font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.14em; color: var(--cyan); margin-bottom: 16px; display: block;
  }
  .price-card h2 { font-size: 1.5rem; font-weight: 900; color: var(--dark); margin-bottom: 8px; }
  .price-amount {
    display: flex; align-items: baseline; gap: 4px;
    margin: 24px 0;
  }
  .price-eur { font-size: 1.5rem; font-weight: 800; color: var(--grey); }
  .price-num {
    font-size: 4rem; font-weight: 900; color: var(--dark);
    letter-spacing: -0.04em; line-height: 1;
  }
  .price-period { font-size: 0.9rem; font-weight: 600; color: var(--grey); }
  .price-features { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 32px 0; }
  .price-features li {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: 0.92rem; font-weight: 600; color: var(--body); line-height: 1.45;
  }
  .check-icon {
    width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
    background: rgba(0,180,200,0.1); display: flex; align-items: center; justify-content: center;
  }
  .check-icon svg { width: 11px; height: 11px; }
  .btn-cta {
    display: block; width: 100%; text-align: center; background: var(--magenta);
    color: white; font-weight: 800; font-size: 1.05rem; padding: 20px 32px;
    border-radius: 12px; text-decoration: none; transition: all 0.22s;
    box-shadow: 0 8px 28px rgba(232,0,90,0.3); margin-bottom: 16px;
  }
  .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(232,0,90,0.4); }
  .price-note { font-size: 0.8rem; color: var(--grey); font-weight: 600; text-align: center; }

  /* FINAL CTA */
  .final-cta { background:
      radial-gradient(820px 460px at 18% -12%, rgba(0,180,200,0.12), transparent 62%),
      radial-gradient(820px 480px at 88% 112%, rgba(232,0,90,0.10), transparent 62%),
      linear-gradient(150deg, var(--rx-dark1) 0%, var(--rx-dark3) 100%);
    padding: 120px 80px; text-align: center; }
  .final-cta h2 {
    font-weight: 800; font-size: clamp(2rem, 3vw, 2.9rem);
    line-height: 1.14; letter-spacing: -0.03em; color: var(--white);
    max-width: 940px; margin: 0 auto 16px; text-wrap: balance;
  }
  .final-cta p { font-size: 1rem; color: rgba(255,255,255,0.82); margin-bottom: 42px; font-weight: 500; }
  .btn-white {
    display: inline-block; background: var(--white); color: var(--magenta);
    font-weight: 800; font-size: 1.08rem; padding: 22px 52px; border-radius: 12px;
    text-decoration: none; transition: all 0.22s; box-shadow: 0 12px 36px rgba(0,0,0,0.18);
  }
  .btn-white:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0,0,0,0.22); }
  .final-note { margin-top: 24px; font-size: 0.8rem; color: rgba(255,255,255,0.75); font-weight: 600; }

  /* FOOTER */
  footer {
    background: var(--dark);
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 48px 80px 32px;
  }
  .footer-inner {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 40px; max-width: 1180px; margin: 0 auto 40px;
  }
  .footer-brand { display: flex; flex-direction: column; gap: 12px; }
  .footer-logo { font-weight: 900; font-size: 1.2rem; color: rgba(255,255,255,0.9); letter-spacing: -0.03em; }
  .footer-logo span { background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
  .footer-tagline { font-size: 0.78rem; color: rgba(255,255,255,0.35); max-width: 200px; line-height: 1.6; }
  .footer-contact-block { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
  .footer-contact-title { font-size: 0.65rem; font-weight: 800; color: rgba(255,255,255,0.25); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 4px; }
  .footer-contact-row { display: flex; align-items: center; gap: 8px; text-decoration: none; color: rgba(255,255,255,0.55); font-size: 0.82rem; font-weight: 600; transition: color 0.2s; }
  .footer-contact-row:hover { color: rgba(255,255,255,0.9); }
  .footer-contact-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }
  .footer-address { font-size: 0.78rem; color: rgba(255,255,255,0.3); line-height: 1.7; }
  .footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    max-width: 1180px; margin: 0 auto;
    border-top: 1px solid rgba(255,255,255,0.07); padding-top: 24px;
    font-size: 0.74rem; color: rgba(255,255,255,0.25);
  }
  .footer-bottom a { color: rgba(255,255,255,0.25); text-decoration: none; transition: color 0.2s; }
  .footer-bottom a:hover { color: rgba(255,255,255,0.6); }
  .footer-links { display: flex; gap: 20px; }

  /* ANIMATIONS */
  @keyframes fadeUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }

  /* RESPONSIVE */
  @media (max-width: 1100px) {
    .api-grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
    .design-inner { grid-template-columns: 1fr; gap: 40px; }
    .pain-section, .workflow-section, .api-section, .design-section, .pricing-section, .final-cta { padding: 70px 40px; }
    .gradient-band { padding: 50px 40px; }
    .trust-row { padding: 20px 40px; gap: 24px; flex-wrap: wrap; }
    .pain-grid { grid-template-columns: repeat(2, 1fr); }
  }
  /* Tablet: hide pill text, keep compact */
  @media (max-width: 1200px) and (min-width: 1081px) {
    nav { padding: 0 32px; gap: 12px; }
    .nav-badge { padding: 6px 12px 6px 6px; gap: 8px; }
    .nav-badge > span:last-of-type { display: none; }
    .btn-nav { font-size: 0.82rem; padding: 10px 18px; }
  }
  @media (max-width: 1080px) and (min-width: 769px) {
    nav { padding: 0 24px; gap: 12px; }
    .nav-badge { display: none !important; }
    .btn-nav { font-size: 0.82rem; padding: 10px 18px; }
    .hero h1 { font-size: clamp(2rem, 4.2vw, 2.8rem); line-height: 1.15; }
  }

  @media (max-width: 768px) {
    nav { padding: 0 16px !important; height: 56px !important; }
    .nav-badge { display: none !important; }
    .nav-support-label { display: inline; }
    @media(max-width:768px) { .nav-support-label { display: none; } }
    .btn-nav { display: none !important; }
    .btn-login { font-size: 0.8rem; padding: 10px 20px; border-color: var(--dark); color: var(--dark); }
    .hero { padding: 40px 20px 32px; }
    .hero h1 { font-size: clamp(1.7rem, 6.4vw, 2.4rem); line-height: 1.25; }
    .h1-desktop { display: none; }
    .h1-mobile { display: inline; }
    .hero-sub { font-size: 0.95rem; text-align: center; padding: 0 4px; }
    .hero-sub-desktop { display: none; }
    .hero-sub-mobile { display: inline; }
    .hero-cta-group { flex-direction: column; margin-bottom: 12px; }
    .btn-primary { width: 100%; text-align: center; }
    .mockup-body { grid-template-columns: 1fr; }
    .mockup-sidebar { display: none; }
    .pain-section, .workflow-section, .api-section, .design-section, .pricing-section, .final-cta { padding: 60px 20px; }
    .gradient-band { padding: 40px 20px; }
    .trust-row { display: none !important; }
    .pain-grid { grid-template-columns: 1fr; }
    .api-grid { grid-template-columns: 1fr; }
    .design-inner { grid-template-columns: 1fr; }
    .section-title { font-size: clamp(1.6rem, 5.5vw, 2.2rem); }
    .price-card { padding: 32px 24px; }
    .final-cta h2 { font-size: clamp(1.6rem, 5vw, 2.2rem); }
    .btn-white { padding: 16px 32px; font-size: 0.95rem; }
    footer { padding: 32px 20px 24px; } .footer-inner { flex-direction: column; gap: 32px; } .footer-bottom { flex-direction: column; gap: 10px; text-align: center; } .footer-links { justify-content: center; } .footer-tagline { max-width: none; }
    .mockup-row { grid-template-columns: 1fr; }
  }

  /* TEMPLATE GALLERY */
  .template-section { padding: 100px 80px; background: var(--dark); text-align: center; }
  .template-section .section-label { color: var(--magenta); }
  .template-section .section-title { color: var(--white); }
  .template-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1300px; margin: 0 auto 36px; }
  .template-card {
    background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.08);
    border-radius: 16px; overflow: hidden; cursor: pointer;
    transition: all 0.25s; text-align: left;
  }
  .template-card:hover { border-color: rgba(255,255,255,0.25); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.4); }
  .template-card.selected { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,180,200,0.2); }
  .template-badge {
    margin: 14px 14px 0; display: inline-block;
    font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em;
    border: 1px solid; border-radius: 100px; padding: 3px 10px;
  }
  .template-preview { width: 100%; aspect-ratio: 16/9; overflow: hidden; }
  .template-preview img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
  .template-info { padding: 14px 16px 18px; }
  .template-name { display: block; font-size: 0.9rem; font-weight: 800; color: var(--white); margin-bottom: 3px; }
  .template-desc { font-size: 0.75rem; color: var(--grey); font-weight: 500; }
  .template-note {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.82rem; font-weight: 600; color: var(--grey);
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 100px; padding: 10px 20px;
  }
  .template-note svg { color: var(--green); flex-shrink: 0; }
  @media(max-width:1100px){ .template-grid { grid-template-columns: repeat(2,1fr); } .template-section { padding: 70px 40px; } }
  @media(max-width:640px){ .template-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .template-section { padding: 60px 20px; } }

/* ════════════════════════════════════════════════════════════
   REDESIGN (TP-Layout) — namespaced rx-*  ·  CI bleibt erhalten
   ════════════════════════════════════════════════════════════ */
:root{ --rx-dark1:#0b1733; --rx-dark2:#0e1f44; --rx-dark3:#143c7a; }

/* ── DARK HERO + NAV ─────────────────────────────────────────── */
/* Gesamter Hero-Bereich (Nav + Text + Showcase) läuft auf dunklem Grund */
.rx-hero{
  position:relative; padding-bottom:104px;
  background:
    radial-gradient(900px 480px at 88% -10%, rgba(0,180,200,0.18), transparent 60%),
    linear-gradient(155deg, var(--rx-dark1), var(--rx-dark3));
  overflow:hidden;
}
.rx-nav{
  position:relative; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 48px; max-width:1360px; margin:0 auto;
}
.rx-nav-logo{ font-weight:900; font-size:1.3rem; color:#fff; letter-spacing:-0.03em; text-decoration:none; text-shadow:0 1px 3px rgba(8,22,60,0.22); }
.rx-nav-logo span{ background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; text-shadow:none; }
.rx-nav-links{ display:flex; align-items:center; gap:30px; }
.rx-nav-links a{ font-size:0.9rem; font-weight:700; color:#fff; text-decoration:none; transition:opacity 0.18s; text-shadow:0 1px 3px rgba(8,22,60,0.22); }
.rx-nav-links a:hover{ opacity:0.82; }
.rx-nav-right{ display:flex; align-items:center; gap:14px; }
.rx-nav-login{ font-size:0.88rem; font-weight:700; color:#fff; text-decoration:none; padding:9px 6px; transition:opacity 0.18s; text-shadow:0 1px 3px rgba(8,22,60,0.22); }
.rx-nav-login:hover{ opacity:0.82; }
.rx-nav-cta{
  background:var(--magenta); color:#fff; font-weight:800; font-size:0.88rem;
  padding:12px 22px; border-radius:10px; text-decoration:none; white-space:nowrap;
  box-shadow:0 6px 22px rgba(232,0,90,0.4); transition:transform .2s, box-shadow .2s;
}
.rx-nav-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(232,0,90,0.55); }

/* Burger-Button (nur Mobil sichtbar) */
.rx-burger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:46px; height:46px; padding:0; background:transparent; border:none; cursor:pointer; position:relative; z-index:30; }
.rx-burger span{ display:block; width:26px; height:2.5px; margin:0 auto; background:#fff; border-radius:3px; transition:transform .32s cubic-bezier(.65,.05,.36,1), opacity .2s ease; }
.rx-burger.open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.rx-burger.open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.rx-burger.open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* Mobiles Menü-Panel */
.rx-mobile-menu{ position:absolute; top:100%; left:0; right:0; z-index:20;
  display:flex; flex-direction:column; padding:6px 22px 22px;
  background:linear-gradient(160deg, var(--rx-dark1), var(--rx-dark3));
  border-radius:0 0 24px 24px; box-shadow:0 26px 54px rgba(8,22,60,0.45);
  opacity:0; transform:translateY(-14px); pointer-events:none; visibility:hidden;
  transition:opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1), visibility .3s; }
.rx-mobile-menu.open{ opacity:1; transform:translateY(0); pointer-events:auto; visibility:visible; }
.rx-mobile-menu a{ color:#fff; text-decoration:none; font-weight:700; font-size:1.05rem; padding:15px 6px; border-bottom:1px solid rgba(255,255,255,0.10);
  opacity:0; transform:translateY(8px); transition:opacity .35s ease, transform .35s ease; }
.rx-mobile-menu.open a{ opacity:1; transform:translateY(0); }
.rx-mobile-menu.open a:nth-child(1){ transition-delay:.06s; }
.rx-mobile-menu.open a:nth-child(2){ transition-delay:.11s; }
.rx-mobile-menu.open a:nth-child(3){ transition-delay:.16s; }
.rx-mobile-menu.open a:nth-child(4){ transition-delay:.21s; }
.rx-mobile-menu.open a:nth-child(5){ transition-delay:.26s; }
.rx-mobile-menu .rx-mobile-cta{ margin-top:14px; padding:15px; text-align:center; font-weight:800;
  background:var(--magenta); border-radius:12px; border-bottom:none; box-shadow:0 8px 24px rgba(232,0,90,0.4); }

/* Zentrierter Intro-Text auf dunklem Grund (Vorbild: sevdesk / Weißblau Media) */
.rx-hero-intro{
  position:relative; z-index:3; max-width:760px; margin:0 auto;
  padding:64px 24px 40px; display:flex; flex-direction:column; align-items:center; text-align:center;
}
.rx-hero-eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:24px;
  padding:8px 18px; border:1px solid rgba(255,255,255,0.16); border-radius:999px;
  background:rgba(255,255,255,0.05);
  font-size:0.75rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase;
  color:#9fe8ef;
}
.rx-hero-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px rgba(0,180,200,0.6); }
@media(max-width:768px){
  .rx-hero-eyebrow{ font-size:0.68rem; letter-spacing:0.05em; white-space:nowrap; padding:7px 14px; max-width:100%; }
}
.rx-hero h1{
  font-weight:900; font-size:clamp(2rem,3.7vw,3.6rem); line-height:1.1;
  letter-spacing:-0.035em; color:#fff; margin:0 0 22px; text-wrap:balance; text-align:center;
}
.rx-hero h1 .g{ background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.rx-hero-sub{ font-size:1.05rem; line-height:1.62; color:rgba(223,230,255,0.72); max-width:560px; margin:0 auto 36px; text-align:center; }
.rx-hero-sub strong{ color:#fff; font-weight:700; }
.rx-hero-ctas{ display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; }
.rx-btn-lg{
  display:inline-flex; align-items:center; gap:8px; background:var(--magenta); color:#fff;
  font-weight:800; font-size:1rem; padding:23px 30px; border-radius:13px; text-decoration:none;
  box-shadow:0 10px 32px rgba(232,0,90,0.42); transition:transform .2s, box-shadow .2s;
}
.rx-btn-lg:hover{ transform:translateY(-3px); box-shadow:0 18px 44px rgba(232,0,90,0.52); }
.rx-hero-ctas .rx-btn-lg{ font-size:0.88rem; }
.rx-btn-lg.rx-btn-stacked{ flex-direction:column; align-items:center; gap:6px; padding:15px 34px; line-height:1.18; }
.rx-btn-stacked .rx-btn-main{ font-size:1rem; font-weight:800; }
.rx-btn-stacked .rx-btn-sub{ font-size:0.74rem; font-weight:600; opacity:0.82; letter-spacing:0.02em; }
.rx-hero-note{ font-size:0.8rem; font-weight:600; color:var(--grey); }
.rx-hero-rating{ display:flex; align-items:center; gap:10px; margin-top:24px; width:fit-content; transition:opacity .2s; }
/* Trust-Pill mit Avatar-Stack (Vorbild: "Trusted by ..."-Badge) */
.rx-hero-social{
  display:inline-flex; align-items:center; gap:13px; margin-bottom:28px;
  background:#fff; border:1px solid var(--border); border-radius:999px; padding:8px 22px 8px 9px;
  box-shadow:0 16px 36px rgba(6,18,58,0.12);
}
.rx-hero-social .avatars{ display:flex; }
.rx-hero-social .avatars span{
  width:32px; height:32px; border-radius:50%; border:2.5px solid #fff; margin-left:-11px;
  display:flex; align-items:center; justify-content:center;
  font-size:0.66rem; font-weight:800; color:#fff; flex-shrink:0;
}
.rx-hero-social .avatars span:first-child{ margin-left:0; }
.rx-hero-social .txt{ font-size:0.88rem; color:var(--grey); font-weight:500; white-space:nowrap; }
.rx-hero-social .txt b{ color:var(--dark); font-weight:800; }

.rx-hero-trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px 22px; margin-top:22px; }
.rx-hero-trust span{ display:inline-flex; align-items:center; gap:7px; font-size:0.85rem; font-weight:500; color:rgba(223,230,255,0.75); }
.rx-hero-trust svg{ width:15px; height:15px; flex-shrink:0; color:#5be8b8; }
.rx-hero-rating:hover{ opacity:0.82; }
.rx-hero-rating .rx-rating-logo{ height:38px; width:auto; display:block; flex-shrink:0; }
.rx-hero-rating .stars{ color:#FBBF24; font-size:1.05rem; letter-spacing:1px; }
.rx-hero-rating span{ font-size:0.86rem; color:var(--grey); font-weight:600; }
.rx-hero-rating strong{ color:var(--dark); }

/* Schmalere Software-Vorschau darunter, mittig, noch auf dunklem Grund */
.rx-hero-showcase{ position:relative; z-index:3; max-width:1040px; margin:0 auto; padding:0 24px; }
.rx-hero-media{ position:relative; }
.rx-ph{ position:relative; width:100%; }
.rx-ph-frame{
  position:relative; z-index:1; width:100%; border-radius:18px; overflow:hidden;
  box-shadow:0 55px 110px -30px rgba(2,8,30,0.65), 0 0 0 1px rgba(255,255,255,0.08);
  display:flex; flex-direction:column; background:#fff;
}
.rx-ph-bar{ height:40px; flex-shrink:0; display:flex; align-items:center; gap:8px; padding:0 16px; background:#fbfcfe; border-bottom:1px solid var(--border); }
.rx-ph-bar .dot{ width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.rx-ph-bar .dot.r{ background:#ff5f57; }
.rx-ph-bar .dot.y{ background:#febc2e; }
.rx-ph-bar .dot.g{ background:#28c840; }
.rx-ph-bar .url{ margin-left:14px; flex:1; max-width:300px; height:22px; border-radius:7px; background:#eef1f7; display:flex; align-items:center; padding:0 12px; font-size:0.72rem; color:#9aa6bf; font-weight:600; }
.rx-ph-body{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px; color:#5a6b8c;
  background:
    repeating-linear-gradient(45deg, rgba(20,50,138,0.05) 0 16px, transparent 16px 32px),
    linear-gradient(135deg,#eaf1ff 0%, #dde9ff 100%);
}
.rx-ph-body svg{ opacity:0.55; }
.rx-ph-body b{ font-size:0.9rem; font-weight:800; letter-spacing:0.02em; color:#33415c; }
.rx-ph-body small{ font-size:0.76rem; color:#7886a3; }
/* Ratio sitzt auf dem Bild selbst — Frame wächst mit (Adressleiste + volles Bild, nichts wird abgeschnitten) */
.rx-ph-img{ width:100%; height:auto; aspect-ratio:1500/811; object-fit:cover; object-position:center center; display:block; }

/* ── Animierter Neon-Flow-Rahmen um die Software-Vorschau ───────── */
@property --rx-glow-a{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.rx-ph{ --rx-glow-a:0deg; }
/* weicher, umlaufender Leucht-Halo (hinter dem Frame) */
.rx-ph::before{
  content:""; position:absolute; inset:-9px; z-index:0; border-radius:26px; pointer-events:none;
  background:conic-gradient(from var(--rx-glow-a), #00E5C7, #22D3EE, #EAFFFB, #34D399, #7CFFD9, #00E5C7);
  filter:blur(26px); opacity:.9;
  animation:rx-glow-flow 4.5s linear infinite;
}
/* scharfer Neon-Rand direkt auf der Frame-Kante, mit wanderndem Highlight */
.rx-ph::after{
  content:""; position:absolute; inset:-2px; z-index:2; border-radius:20px; padding:2.5px; pointer-events:none;
  background:conic-gradient(from var(--rx-glow-a), #00E5C7, #22D3EE, #F2FFFC, #34D399, #7CFFD9, #00E5C7);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  filter:drop-shadow(0 0 8px rgba(34,211,238,0.85));
  animation:rx-glow-flow 4.5s linear infinite;
}
@keyframes rx-glow-flow{ to{ --rx-glow-a:360deg; } }
@media (prefers-reduced-motion: reduce){
  .rx-ph::before, .rx-ph::after{ animation:none; }
}
/* Feature-Chips: rechts an den Bildrand geschoben, leicht angeschnitten */
.rx-hero-badges{
  position:absolute; top:50%; right:-90px; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:flex-end; gap:16px; z-index:4;
}
.rx-hb{
  display:flex; align-items:center; gap:11px; background:#fff; border-radius:14px;
  padding:12px 20px 12px 11px; box-shadow:0 22px 55px rgba(6,18,58,0.4);
  width:236px; box-sizing:border-box;
}
.rx-hb .ic{ width:36px; height:36px; border-radius:10px; background:var(--gradient); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rx-hb b{ font-size:0.86rem; font-weight:800; color:var(--dark); line-height:1.2; }
.rx-hb.is-highlight{ background:var(--gradient); box-shadow:0 24px 60px rgba(0,150,170,0.5); }
.rx-hb.is-highlight b{ color:#fff; font-weight:900; }
.rx-hb.is-highlight .ic{ background:rgba(255,255,255,0.22); }

/* Schwebende Stat-Karte über dem unteren Bildrand — Vorbild: Weißblau Media Badge */
.rx-hero-floatstats{
  position:absolute; left:50%; bottom:-44px; transform:translateX(-50%);
  display:flex; align-items:center; z-index:5;
  background:#fff; border-radius:18px; box-shadow:0 30px 60px rgba(6,18,58,0.4);
  padding:26px 10px; max-width:92%; overflow-x:auto;
}
.rx-fs-item{ position:relative; padding:0 32px; text-align:center; flex-shrink:0; }
.rx-fs-item + .rx-fs-item::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:38px; background:var(--border); }
.rx-fs-item b{ display:block; font-weight:900; font-size:1.6rem; letter-spacing:-0.02em; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.rx-fs-item span{ display:block; font-size:0.88rem; font-weight:600; color:var(--grey); margin-top:5px; white-space:nowrap; }

/* ── STATS BAR ───────────────────────────────────────────────── */
.rx-stats{ background:var(--white); border-bottom:1px solid var(--border); }
.rx-stats-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); }
.rx-stat{ padding:34px 28px; text-align:center; border-right:1px solid var(--border); }
.rx-stat:last-child{ border-right:none; }
.rx-stat .num{ font-size:clamp(1.7rem,2.6vw,2.5rem); font-weight:900; letter-spacing:-0.03em; color:var(--dark); line-height:1; margin-bottom:8px; }
.rx-stat .num.g{ background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.rx-stat .num.m{ color:var(--magenta); }
.rx-stat .lbl{ font-size:0.82rem; font-weight:600; color:var(--grey); line-height:1.4; }

/* ── SPLIT (Bild links / Text rechts) ────────────────────────── */
/* oben 96px: davor wechselt die Hintergrundfarbe (grau → weiß), das trägt viel Luft.
   unten 48px: die Workflow-Sektion ist ebenfalls weiß – ohne Farbkante wirkt der
   gleiche Abstand wie ein Loch, deshalb hier bewusst enger. */
.rx-split{ padding:96px 76px 32px; background:var(--white); }
.rx-split-inner{ max-width:1196px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.rx-split-media{ position:relative; }
.rx-exp-wrap{ position:relative; width:100%; max-width:none; margin:0; }
.rx-hint{ position:absolute; left:auto; right:-2px; top:-96px; width:320px; height:230px; z-index:3; pointer-events:none; text-align:right; }
.rx-hint-label{ font-family:'Caveat',cursive; font-weight:700; font-size:1.62rem; color:var(--cyan); transform:rotate(-3deg); white-space:normal; line-height:1.05; display:block; margin:0 0 0 auto; max-width:300px; text-align:right; }
.rx-hint-arrow{ position:absolute; left:66px; top:77px; width:150px; height:168px; color:var(--cyan); }
.rx-exp-ph{
  border-radius:14px; overflow:hidden; aspect-ratio:1/1.414; width:100%;
  border:1px solid var(--border); box-shadow:0 28px 70px rgba(8,22,60,0.14);
  background:
    repeating-linear-gradient(45deg,#eef2fb 0 16px,#f6f8fe 16px 32px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center;
  color:var(--grey); padding:24px;
}
.rx-exp-ph svg{ opacity:0.45; }
.rx-exp-ph b{ font-size:0.9rem; font-weight:800; color:var(--body); }
.rx-exp-ph small{ font-size:0.76rem; }
.rx-exp-img{ display:block; width:100%; height:auto; border-radius:14px; }
.rx-split-text h2{ font-size:clamp(1.8rem,2.8vw,2.6rem); font-weight:900; letter-spacing:-0.03em; line-height:1.12; color:var(--dark); margin:0 0 18px; }
.rx-split-text h2 .g{ background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.rx-split-text p{ font-size:1rem; line-height:1.72; color:var(--grey); margin:0 0 16px; }
.rx-split-text p strong{ color:var(--dark); }
.rx-link{ display:inline-flex; align-items:center; gap:7px; font-size:0.92rem; font-weight:800; color:var(--magenta); text-decoration:none; margin-top:6px; }
.rx-link:hover{ gap:11px; }
.rx-cta-row{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:24px; }
.rx-cta-row .rx-link{ margin-top:0; }
.rx-link-pdf{ display:inline-flex; align-items:center; gap:10px; padding:15px 30px; border:2px solid var(--magenta); border-radius:13px; color:var(--magenta); font-family:'Montserrat',sans-serif; font-weight:800; font-size:0.95rem; line-height:1; text-decoration:none; background:rgba(232,0,90,0.06); transition:all .2s; }
.rx-link-pdf svg{ flex-shrink:0; }
.rx-link-pdf:hover{ background:var(--magenta); color:#fff; transform:translateY(-2px); box-shadow:0 12px 34px rgba(232,0,90,0.35); }
/* Mobil: full-width, gleiche Schriftgröße wie die anderen Haupt-CTAs (1rem) */
@media(max-width:768px){
  .rx-cta-row{ margin-top:20px; }
  .rx-link-pdf{ width:100%; justify-content:center; text-align:center; font-size:1rem; padding:20px 26px; white-space:normal; }
}

/* ── 3 KARTEN ────────────────────────────────────────────────── */
.rx-cards{ padding:30px 64px 96px; background:var(--white); }
.rx-cards-head{ text-align:center; max-width:640px; margin:0 auto 48px; }
.rx-cards-head h2{ font-size:clamp(1.8rem,2.8vw,2.6rem); font-weight:900; letter-spacing:-0.03em; color:var(--dark); margin:0 0 14px; line-height:1.14; }
.rx-cards-head p{ font-size:1rem; color:var(--grey); line-height:1.6; }
.rx-cards-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.rx-card{ border-radius:20px; padding:34px 30px; border:1px solid transparent; }
.rx-card.blue{ background:#eaf2ff; border-color:#d7e6ff; }
.rx-card.teal{ background:#e6faf7; border-color:#cdf3ec; }
.rx-card.mag{ background:#fdeaf2; border-color:#f8d4e3; }
.rx-card-ic{ width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.rx-card.blue .rx-card-ic{ background:#3e8ef5; }
.rx-card.teal .rx-card-ic{ background:#00B4C8; }
.rx-card.mag  .rx-card-ic{ background:var(--magenta); }
.rx-card h3{ font-size:1.18rem; font-weight:900; color:var(--dark); letter-spacing:-0.02em; margin:0 0 10px; }
.rx-card p{ font-size:0.92rem; line-height:1.65; color:#52607a; margin:0; }

/* ── TESTIMONIAL ─────────────────────────────────────────────── */
.rx-testi{ padding:52px 64px 84px; background:var(--white); }
.rx-testi-inner{ max-width:820px; margin:0 auto; text-align:center; }
.rx-testi .stars{ color:#FBBF24; font-size:1.25rem; letter-spacing:2px; margin-bottom:22px; }
.rx-testi blockquote{ font-size:clamp(1.3rem,2.4vw,1.85rem); font-weight:800; line-height:1.4; letter-spacing:-0.02em; color:var(--dark); margin:0 0 28px; text-wrap:balance; }
.rx-testi blockquote span{ background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.rx-testi-who{ display:inline-flex; align-items:center; gap:13px; }
.rx-testi-av{ width:48px; height:48px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:1rem; }
.rx-testi-who b{ display:block; font-size:0.92rem; color:var(--dark); }
.rx-testi-who small{ font-size:0.8rem; color:var(--grey); }

/* ── SOFTWARE-DEMO ───────────────────────────────────────────── */
.rx-demo{ padding:92px 64px; background:linear-gradient(180deg,#eef5ff 0%, #f6faff 100%); text-align:center; }
.rx-demo-head{ max-width:680px; margin:0 auto 44px; }
.rx-demo-head h2{ font-size:clamp(1.9rem,3vw,2.7rem); font-weight:900; letter-spacing:-0.03em; color:var(--dark); margin:0 0 14px; line-height:1.12; }
.rx-demo-head h2 .g{ background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.rx-demo-head p{ font-size:1rem; color:var(--grey); line-height:1.6; }
.rx-browser{ max-width:1000px; margin:0 auto 32px; border-radius:18px; overflow:hidden; background:transparent; box-shadow:0 36px 100px rgba(20,40,90,0.22); }
.rx-browser-bar{ display:flex; align-items:center; gap:7px; padding:12px 16px; background:#1a1a2e; }
.rx-browser-bar i{ width:11px; height:11px; border-radius:50%; display:block; }
.rx-browser-bar .u{ flex:1; max-width:280px; margin:0 auto; height:22px; border-radius:6px; background:rgba(255,255,255,0.08); }
.rx-browser video, .rx-browser img{ width:100%; display:block; }
.rx-demo-ctas{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.rx-btn-ghost{ display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--dark); font-weight:800; font-size:0.95rem; padding:15px 28px; border-radius:12px; border:2px solid var(--border); text-decoration:none; transition:all .2s; }
.rx-btn-ghost:hover{ border-color:var(--cyan); color:var(--cyan); }

/* ── VORHER / NACHHER BAND ───────────────────────────────────── */
.rx-ba-band{ padding:0 64px 92px; background:linear-gradient(180deg,#f6faff 0%, #ffffff 100%); }
.rx-ba-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.rx-ba-card{ border-radius:16px; overflow:hidden; box-shadow:0 18px 56px rgba(0,0,0,0.12); background:#0f1424; }
.rx-ba-cap{ display:flex; align-items:center; gap:8px; padding:12px 16px; }
.rx-ba-cap b{ font-size:0.82rem; font-weight:800; color:#fff; }
.rx-ba-cap small{ font-size:0.72rem; color:rgba(255,255,255,0.5); margin-left:auto; }
.rx-ba-slider{ position:relative; height:300px; overflow:hidden; cursor:col-resize; user-select:none; -webkit-user-select:none; }
.rx-ba-slider img{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; display:block; }
.rx-ba-before{ position:absolute; left:0; top:0; width:50%; height:100%; overflow:hidden; z-index:2; }
.rx-ba-before img{ filter:grayscale(0.3) brightness(0.85); }
.rx-ba-before .shade{ position:absolute; inset:0; background:rgba(0,0,0,0.12); }
.rx-ba-tag{ position:absolute; bottom:12px; font-size:12px; color:#fff; font-weight:800; text-transform:uppercase; letter-spacing:0.1em; text-shadow:0 1px 6px rgba(0,0,0,0.7); z-index:3; }
.rx-ba-tag.after{ right:14px; }
.rx-ba-tag.before{ left:14px; }
.rx-ba-line{ position:absolute; left:50%; top:0; width:3px; height:100%; background:var(--magenta); transform:translateX(-50%); z-index:4; pointer-events:none; }
.rx-ba-handle{ position:absolute; left:50%; top:50%; width:40px; height:40px; border-radius:50%; background:var(--magenta); transform:translate(-50%,-50%); z-index:5; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 20px rgba(232,0,90,0.5); }

/* ── FEATURE-GRID ────────────────────────────────────────────── */
.rx-feat{ padding:96px 64px; background:var(--white); }
.rx-feat-head{ text-align:center; max-width:640px; margin:0 auto 56px; }
.rx-feat-head h2{ font-size:clamp(1.9rem,3vw,2.7rem); font-weight:900; letter-spacing:-0.03em; color:var(--dark); margin:0 0 14px; line-height:1.12; }
.rx-feat-head h2 .g{ background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.rx-feat-head p{ font-size:1rem; color:var(--grey); line-height:1.6; text-wrap:balance; }
.rx-feat-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.rx-feat-card{ background:var(--white); border:1px solid var(--border); border-radius:16px; padding:26px 22px; transition:transform .2s, box-shadow .2s, border-color .2s; }
.rx-feat-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,0.07); border-color:#f6c9da; }
.rx-feat-ic{ width:58px; height:58px; border-radius:15px; background:var(--magenta); box-shadow:0 10px 24px rgba(232,0,90,0.30); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.rx-feat-card h3{ font-size:1rem; font-weight:800; color:var(--dark); margin:0 0 8px; letter-spacing:-0.01em; }
.rx-feat-card p{ font-size:0.85rem; line-height:1.6; color:var(--grey); margin:0; }
.rx-feat-soon{ display:inline-block; vertical-align:middle; margin-left:8px; font-size:0.6rem; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; color:var(--magenta); background:rgba(232,0,90,0.08); border:1px solid rgba(232,0,90,0.22); border-radius:100px; padding:2px 9px; white-space:nowrap; }

/* ── Feature-Videos: Karten-Chip + Lightbox ─────────────────────────── */
.rx-feat-card[data-yt]{ cursor:pointer; }
.rx-feat-card[data-yt]:focus-visible{ outline:2px solid var(--magenta); outline-offset:3px; }
.rx-feat-video{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:0.72rem; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; color:var(--magenta); background:rgba(232,0,90,0.07); border:1px solid rgba(232,0,90,0.20); border-radius:100px; padding:5px 12px; transition:background .2s, color .2s, border-color .2s; }
.rx-feat-video svg{ width:11px; height:11px; flex:none; }
.rx-feat-card[data-yt]:hover .rx-feat-video{ background:var(--magenta); border-color:var(--magenta); color:#fff; }

.rx-vmodal{ position:fixed; inset:0; z-index:10000; display:none; align-items:center; justify-content:center; padding:24px; }
.rx-vmodal.open{ display:flex; }
.rx-vmodal-backdrop{ position:absolute; inset:0; background:rgba(10,14,26,0.86); backdrop-filter:blur(4px); cursor:pointer; }
.rx-vmodal-box{ position:relative; width:min(960px,100%); z-index:1; }
.rx-vmodal-frame{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,0.55); }
.rx-vmodal-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.rx-vmodal-title{ margin-top:12px; text-align:center; color:#fff; font-size:0.95rem; font-weight:700; letter-spacing:0.01em; }
.rx-vmodal-close{ position:absolute; top:-16px; right:-16px; z-index:2; width:38px; height:38px; border-radius:50%; border:0; cursor:pointer; background:var(--magenta); color:#fff; font-size:22px; line-height:1; font-weight:700; box-shadow:0 8px 22px rgba(232,0,90,0.45); display:flex; align-items:center; justify-content:center; transition:transform .15s; }
.rx-vmodal-close:hover{ transform:scale(1.08); }
@media(max-width:640px){
  .rx-vmodal{ padding:14px; }
  .rx-vmodal-close{ top:-14px; right:2px; }
}

/* ── WORKS WITH ──────────────────────────────────────────────── */
.rx-logos{ padding:64px 64px; background:transparent; text-align:center; }
.rx-logos p{ font-size:0.82rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--grey); margin:0 0 28px; }
.rx-logos-row{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; max-width:1196px; margin:0 auto; }
/* ── Trust-Badges (im hellen Band, nahtlos) ── */
.rx-trust{ max-width:1080px; margin:52px auto 0; padding:34px 0 0; border-top:1px solid var(--border); }
.rx-trust-inner{ display:grid; grid-template-columns:repeat(4,1fr); }
.rx-trust-item{ display:flex; align-items:center; gap:10px; padding:2px 14px; border-right:1px solid var(--border); text-align:left; }
.rx-trust-item:first-child{ padding-left:0; }
.rx-trust-item:last-child{ border-right:none; padding-right:0; }
.rx-trust-ic{ flex-shrink:0; width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(232,0,90,0.08); color:var(--magenta); }
.rx-trust-ic svg{ width:20px; height:20px; }
.rx-trust-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.rx-trust-txt b{ font-size:0.83rem; font-weight:800; color:var(--dark); letter-spacing:-0.02em; line-height:1.22; }
.rx-trust-txt span{ font-size:0.74rem; font-weight:500; color:var(--grey); line-height:1.28; }
@media (max-width:1200px){
  .rx-trust{ margin-top:44px; padding-top:28px; }
  .rx-trust-inner{ grid-template-columns:repeat(2,1fr); row-gap:24px; }
  .rx-trust-item{ padding:2px 28px; }
  .rx-trust-item:nth-child(odd){ padding-left:0; }
  .rx-trust-item:nth-child(2n){ border-right:none; padding-right:0; }
}
@media (max-width:600px){
  .rx-trust{ margin-top:38px; padding-top:26px; }
  .rx-trust-inner{ grid-template-columns:1fr; row-gap:20px; justify-items:start; max-width:300px; margin:0 auto; }
  .rx-trust-item{ border-right:none; padding:0; }
}
/* ── Makler-Logo-Slider (dezente Endlos-Laufschrift) ── */
.rx-logostrip{ background:var(--light); padding:48px 24px 0; }
.rx-mslider{ max-width:1080px; margin:0 auto; }
.rx-mslider-lbl{ font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--grey); text-align:center; margin:22px 0 0; }
.rx-mslider-viewport{ overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.rx-mslider-track{ display:flex; align-items:center; gap:64px; width:max-content; animation:rxMarquee 34s linear infinite; }
.rx-mslider:hover .rx-mslider-track{ animation-play-state:paused; }
.rx-mslider-track img{ height:52px; width:auto; max-width:180px; object-fit:contain;
  opacity:1; transition:transform .25s; flex-shrink:0; }
.rx-mslider-track img:hover{ transform:scale(1.05); }
@keyframes rxMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .rx-mslider-track{ animation:none; justify-content:center; flex-wrap:wrap; gap:44px; } }
@media (max-width:600px){
  .rx-logostrip{ padding:36px 20px 0; }
  .rx-mslider-track{ gap:44px; animation-duration:24s; }
  .rx-mslider-track img{ height:40px; }
}
.rx-wordmark{ font-size:1.45rem; font-weight:900; letter-spacing:-0.02em; color:#9aa3b8; opacity:0.85; transition:color .2s, opacity .2s; }
.rx-wordmark:hover{ color:var(--dark); opacity:1; }
.rx-logo-img{ height:42px; width:auto; max-width:190px; object-fit:contain; filter:grayscale(1); opacity:0.55; transition:filter .25s, opacity .25s; }
.rx-logo-img:hover{ filter:grayscale(0); opacity:1; }

/* ── VORTEILE / SCHRITTE BAND ────────────────────────────────── */
.rx-benefits{ padding:96px 64px; background:
    radial-gradient(900px 480px at 88% -10%, rgba(0,180,200,0.18), transparent 60%),
    linear-gradient(155deg, var(--rx-dark1), var(--rx-dark3)); }
.rx-benefits-inner{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center; }
.rx-benefits h2{ font-size:clamp(1.9rem,3vw,2.7rem); font-weight:900; letter-spacing:-0.03em; color:#fff; margin:0 0 16px; line-height:1.12; }
.rx-benefits h2 .g{ background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.rx-benefits > .rx-benefits-inner > div > .sub{ font-size:1rem; color:rgba(255,255,255,0.65); line-height:1.6; margin:0 0 34px; }
.rx-steps{ display:flex; flex-direction:column; gap:18px; }
.rx-step{ display:flex; gap:16px; align-items:flex-start; }
.rx-step-n{ width:38px; height:38px; border-radius:11px; background:var(--gradient); color:#fff; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 6px 18px rgba(62,142,245,0.35); }
.rx-step b{ display:block; font-size:1rem; font-weight:800; color:#fff; margin-bottom:3px; }
.rx-step p{ font-size:0.9rem; color:rgba(255,255,255,0.6); line-height:1.55; margin:0; }
.rx-adv{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.rx-adv-card{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:15px; padding:22px 20px; }
.rx-adv-ic{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:13px; }
.rx-adv-card h4{ font-size:0.95rem; font-weight:800; color:#fff; margin:0 0 7px; }
.rx-adv-card p{ font-size:0.82rem; line-height:1.55; color:rgba(255,255,255,0.55); margin:0; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:1080px){
  .rx-nav{ padding:18px 32px; }
  .rx-hero-intro{ padding:52px 32px 36px; }
  .rx-hero h1{ font-size:2rem; }
  .rx-split,.rx-cards,.rx-testi,.rx-demo,.rx-feat,.rx-benefits,.rx-ba-band,.rx-logos{ padding-left:32px; padding-right:32px; }
  .rx-feat-grid{ grid-template-columns:repeat(2,1fr); }
  /* Hero-Showcase: Badges kompakter an den Bildrand */
  .rx-hero-showcase{ max-width:640px; padding:0 32px; }
  .rx-hero-badges{ right:6px; gap:9px; }
  .rx-hb{ width:auto; max-width:none; padding:7px 13px 7px 7px; gap:8px; border-radius:11px; box-shadow:0 10px 24px rgba(6,18,58,0.16); }
  .rx-hb .ic{ width:28px; height:28px; border-radius:8px; }
  .rx-hb .ic svg{ width:16px; height:16px; }
  .rx-hb b{ font-size:0.74rem; line-height:1.1; white-space:nowrap; }
  .rx-hb.is-highlight{ box-shadow:0 12px 28px rgba(0,150,170,0.32); }
  /* Stat-Karte an die schmalere Showcase-Breite anpassen — sonst Overflow/Scrollbalken */
  .rx-hero-floatstats{ padding:16px 6px; bottom:-32px; overflow-x:visible; }
  .rx-fs-item{ padding:0 14px; }
  .rx-fs-item b{ font-size:1.15rem; }
  .rx-fs-item span{ font-size:0.68rem; }
  .rx-fs-item + .rx-fs-item::before{ height:24px; }
}
/* .rx-ph aspect-ratio: use base 1500/811 ratio at all sizes to match real screenshot */
@media(max-width:920px){
  .rx-nav-links{ display:none; }
  .rx-split-inner,.rx-benefits-inner{ grid-template-columns:1fr; gap:40px; }
  .rx-exp-wrap{ margin:0 auto; max-width:520px; }
  .rx-cards-grid{ grid-template-columns:1fr; }
  .rx-ba-grid{ grid-template-columns:1fr; }
  /* Handschrift-Hinweis: zentriert über den Platzhalter statt rechts daneben */
  .rx-hint{ position:static; width:auto; max-width:340px; margin:0 auto 14px; text-align:center; }
  .rx-hint-label{ transform:rotate(-2deg); margin-left:0; max-width:none; font-size:1.45rem; line-height:1.12; display:inline-block; }
  .rx-hint-arrow{ display:none; }
}
@media(max-width:768px){
  .rx-hero{ padding-bottom:56px; }
  .rx-nav{ padding:16px 20px; }
  .rx-nav-login{ display:none; }
  .rx-hero-intro{ padding:40px 24px 30px; }
  .rx-hero h1{ font-size:1.9rem; }
  .rx-hero-social{ padding:7px 16px 7px 8px; gap:10px; }
  .rx-hero-social .avatars span{ width:27px; height:27px; margin-left:-9px; font-size:0.6rem; }
  .rx-hero-social .txt{ font-size:0.78rem; }
  .rx-hero-showcase{ padding:0 24px; }
  .rx-hero-media{ display:flex; flex-direction:column; align-items:center; }
  .rx-ph{ order:1; width:100%; }
  .rx-hero-floatstats{
    order:2; position:relative; left:auto; bottom:auto; transform:none;
    width:100%; max-width:100%; box-sizing:border-box;
    margin:20px auto 0; flex-wrap:wrap; justify-content:center; row-gap:14px; padding:20px 10px;
  }
  .rx-fs-item{ padding:0 16px; flex:1 1 40%; }
  .rx-fs-item b{ font-size:1.3rem; }
  .rx-fs-item span{ font-size:0.8rem; }
  .rx-fs-item:nth-child(3)::before{ display:none; }
  /* Adressleiste kompakter auf Mobil */
  .rx-ph-bar{ height:30px; gap:6px; padding:0 12px; }
  .rx-ph-bar .dot{ width:8px; height:8px; }
  .rx-ph-bar .url{ margin-left:10px; height:17px; font-size:0.62rem; padding:0 9px; }
  /* Feature-Chips bleiben auf dem Bild, nur kompakter am rechten Rand */
  .rx-hero-badges{ right:8px; gap:7px; }
  .rx-hb{ width:auto; padding:6px 11px 6px 6px; }
  .rx-hb .ic{ width:24px; height:24px; }
  .rx-hb .ic svg{ width:14px; height:14px; }
  .rx-hb b{ font-size:0.62rem; }
  .rx-hero-ctas .rx-btn-lg{ width:100%; justify-content:center; text-align:center; font-size:1rem; padding:20px 26px; white-space:normal; }
  .rx-hero-ctas .rx-btn-lg span{ display:none; }
  .workflow-section{ padding:40px 0 44px !important; }
  .rx-testi{ padding-top:32px; }
  .rx-split,.rx-cards,.rx-testi,.rx-demo,.rx-feat,.rx-benefits,.rx-ba-band,.rx-logos{ padding-left:20px; padding-right:20px; }
  .rx-split{ padding-top:28px; padding-bottom:56px; }
  .rx-stats-grid{ grid-template-columns:1fr 1fr; }
  .rx-feat-grid{ grid-template-columns:1fr; }
  .rx-adv{ grid-template-columns:1fr; }
  .rx-logos{ padding:48px 24px; }
  .rx-logos-row{ gap:16px 26px; justify-content:center; }
  .rx-wordmark{ font-size:1.15rem; }
  .rx-logo-img{ height:32px; max-width:140px; }
}
@media(max-width:480px){
  .rx-wordmark{ font-size:1rem; }
  .rx-logos-row{ gap:12px 20px; }
  .rx-logo-img{ height:28px; }
  .rx-hint-label{ font-size:1.3rem; }
  .rx-hero-ctas .rx-btn-lg{ font-size:1rem; padding:18px 22px; }
  .rx-hb{ padding:5px 10px 5px 5px; gap:6px; }
  .rx-hb .ic{ width:22px; height:22px; }
  .rx-hb .ic svg{ width:13px; height:13px; }
  .rx-hb b{ font-size:0.62rem; }
  .rx-hero-badges{ right:30px; gap:6px; }
  .rx-hero-rating .rx-rating-logo{ height:28px; }
  .rx-hero-rating span:last-child{ font-size:0.74rem; }
}

/* ── Override alte globale nav{}-Regeln (sticky/weiß/mobil-hidden) ── */
nav.rx-nav{ position:relative!important; background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; height:auto!important; }
.rx-nav-cta.btn-nav{ display:inline-flex!important; background:var(--magenta); color:#fff!important; box-shadow:0 6px 22px rgba(232,0,90,0.4); }
.rx-nav-login.btn-login{ border:none!important; background:transparent!important; color:#fff!important; border-radius:0!important; padding:9px 6px!important; }
@media(max-width:1080px){ nav.rx-nav{ padding:18px 32px!important; } }
@media(max-width:768px){
  nav.rx-nav{ padding:16px 20px!important; height:auto!important; }
  .rx-nav-login.btn-login{ display:none!important; }
  .rx-nav-cta.btn-nav{ display:inline-flex!important; font-size:0.84rem; padding:11px 18px; background:transparent!important; border:2px solid #fff!important; color:#fff!important; box-shadow:none!important; }
}
/* Mobil: statt CTA ein Burger-Menü */
@media(max-width:920px){
  .rx-nav-cta.btn-nav{ display:none!important; }
  .rx-nav-login.btn-login{ display:none!important; }
  .rx-burger{ display:flex; }
}

.wf2-head{text-align:center;padding:0 40px 94px}
.wf2-steps{display:flex;flex-direction:column;gap:72px;max-width:none;margin:0}
.wf2-step{
  display:grid;grid-template-columns:1fr 1fr;
  min-height:440px;position:relative;
  opacity:0;transform:translateY(40px);
  transition:opacity 0.7s ease,transform 0.7s ease;
}
.wf2-step.visible{opacity:1;transform:translateY(0)}
.wf2-step:nth-child(even) .wf2-text{order:2}
.wf2-step:nth-child(even) .wf2-visual{order:1}
.wf2-text{display:flex;flex-direction:column;justify-content:center;padding:42px 64px;position:relative;width:100%}
.wf2-step:nth-child(odd) .wf2-text{padding-left:max(76px,calc((100vw - 1196px)/2));padding-right:64px}
.wf2-step:nth-child(even) .wf2-text{padding-right:max(76px,calc((100vw - 1196px)/2));padding-left:64px}
.wf2-step-num{display:inline-flex;align-items:center;gap:13px;margin-bottom:22px}
.wf2-num-badge{width:50px;height:50px;border-radius:14px;background:var(--gradient);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:white;flex-shrink:0;box-shadow:0 10px 26px rgba(0,150,170,0.34)}
.wf2-num-label{font-size:12px;font-weight:800;color:var(--cyan);text-transform:uppercase;letter-spacing:0.13em}
.wf2-text h3{font-size:1.9rem;font-weight:900;color:var(--dark);letter-spacing:-0.025em;line-height:1.12;margin-bottom:16px}
.wf2-text p{font-size:0.95rem;line-height:1.65;color:var(--grey);max-width:460px}
.wf2-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(0,180,200,0.08);border:1px solid rgba(0,180,200,0.18);border-radius:100px;padding:5px 14px;font-size:11px;font-weight:800;color:var(--cyan);margin-top:20px}
.wf2-visual{display:flex;align-items:center;justify-content:center;padding:56px clamp(32px,5vw,80px);position:relative;overflow:hidden;border-radius:0;margin:0;min-height:535px}
.wf2-visual > *{width:100%;max-width:760px}
/* Slider-Schritte: Slider füllt die komplette Visual-Box wie die anderen Boxen –
   kein blauer Hintergrund, bündig am linken Seitenrand, abgerundet zur Mitte hin. */
.wf2-visual--media{padding:0 !important;background:none !important;min-height:535px}
.wf2-visual--media > div{max-width:none !important;width:100% !important;height:100%}
.wf2-visual--media > div > div{height:100% !important;display:flex;flex-direction:column;border-radius:0 28px 28px 0 !important;box-shadow:none !important;background:#0D0D14 !important;overflow:hidden}
.wf2-visual--media [id$="-slider"]{flex:1 !important;height:auto !important;min-height:440px}
.wf2-visual--img{padding:0 !important;align-items:center;overflow:hidden;background:transparent !important}
.wf2-visual--img .wf2-img{display:block;width:100%;max-width:none;height:100%;object-fit:cover;object-position:center;background:linear-gradient(150deg, var(--rx-dark1) 0%, var(--rx-dark3) 100%);border-radius:28px 0 0 28px}
.wf2-step:nth-child(odd) .wf2-visual{background:radial-gradient(720px 420px at 82% -12%, rgba(0,180,200,0.20), transparent 60%), linear-gradient(150deg, var(--rx-dark1) 0%, var(--rx-dark3) 100%);border-radius:28px 0 0 28px}
.wf2-step:nth-child(even) .wf2-visual{background:radial-gradient(720px 420px at 18% -12%, rgba(232,0,90,0.20), transparent 60%), linear-gradient(150deg, var(--rx-dark1) 0%, var(--rx-dark3) 100%);border-radius:0 28px 28px 0}
.il-card{background:white;border-radius:16px;padding:20px;box-shadow:0 8px 40px rgba(0,0,0,0.08);width:100%;max-width:440px}
.il-dark-card{background:#0D0D14;border-radius:16px;padding:20px;width:100%;max-width:440px;box-shadow:0 8px 40px rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.06)}
.il-upload-zone{border:2px dashed rgba(0,180,200,0.35);border-radius:12px;padding:16px;text-align:center;margin-bottom:10px;background:rgba(0,180,200,0.04)}
.il-gen-bar{height:4px;background:#E4E4EE;border-radius:2px;overflow:hidden;margin-top:6px}
.il-gen-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,#3e8ef5,#72f8ca);animation:fillAnim 2.5s ease-in-out infinite alternate}
@keyframes fillAnim{0%{width:20%}100%{width:85%}}
.il-float{position:absolute;background:white;border-radius:12px;padding:8px 12px;box-shadow:0 8px 28px rgba(0,0,0,0.12);font-family:Montserrat,sans-serif;font-size:10px;font-weight:800;display:flex;align-items:center;gap:7px;white-space:nowrap}
.il-float-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.il-phone{width:160px;height:280px;background:#0D0D14;border-radius:28px;border:6px solid #1E1E2E;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.35);overflow:hidden;flex-shrink:0}
.il-phone-bar{height:16px;background:#141424;display:flex;align-items:center;justify-content:center}
.il-phone-notch{width:40px;height:8px;background:#0D0D14;border-radius:4px}
.il-phone-screen{padding:8px;display:flex;flex-direction:column;gap:5px}
.il-expose-mini{width:140px;background:white;border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,0.15);overflow:hidden;flex-shrink:0}
.il-expose-header{background:#0D0D14;padding:8px 10px}
.il-expose-img{height:60px;background:linear-gradient(135deg,#1a2a3a,#0d1830);display:flex;align-items:center;justify-content:center}
.il-expose-body{padding:8px 10px}
.il-email{background:white;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.1);padding:14px 16px;width:100%;max-width:400px}
.il-email-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.il-email-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3e8ef5,#72f8ca);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:white;flex-shrink:0}
.pulse-dot{animation:pulseDot2 1.8s ease-in-out infinite}
@keyframes pulseDot2{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.8)}}
.type-cursor{display:inline-block;width:2px;height:11px;background:#00B4C8;vertical-align:middle;margin-left:2px;animation:blink2 0.9s steps(1) infinite}
@keyframes blink2{0%,100%{opacity:1}50%{opacity:0}}
.wf2-step+.wf2-step::before{display:none}
@media(max-width:900px){
  .wf2-steps{gap:48px}
  .wf2-step{grid-template-columns:1fr;min-height:auto}
  .wf2-step:nth-child(even) .wf2-text{order:1;padding:40px 24px}
  .wf2-step:nth-child(even) .wf2-visual{order:2}
  .wf2-step:nth-child(odd) .wf2-text{padding:40px 24px}
  .wf2-step:nth-child(odd) .wf2-visual,.wf2-step:nth-child(even) .wf2-visual{border-radius:0}
  .wf2-visual--img .wf2-img{border-radius:0}
  .wf2-visual--media > div > div{border-radius:0 !important}
  .wf2-visual--media{min-height:auto}
  .wf2-visual--media [id$="-slider"]{min-height:460px}
  .wf2-visual{min-height:460px}
  .wf2-text h3{font-size:1.5rem}
}
@media(max-width:560px){
  .wf2-visual--media [id$="-slider"]{min-height:360px}
  .wf2-visual{min-height:360px}
}

    @keyframes ki-scan-beam {
      0%   { top: -4px; opacity: 0; }
      8%   { opacity: 1; }
      92%  { opacity: 1; }
      100% { top: calc(100% + 4px); opacity: 0; }
    }
    @keyframes ki-flash {
      0%, 100% { opacity: 0.4; }
      50% { opacity: 1; }
    }
    @keyframes ki-progress {
      0%   { width: 0%; opacity: 0.6; }
      60%  { width: 85%; opacity: 1; }
      80%  { width: 85%; }
      100% { width: 100%; opacity: 0.4; }
    }
  

/* ══ PRICING ══════════════════════════════════════════════════ */
.pricing-header{max-width:720px;margin:0 auto 56px;text-align:center}
.pricing-header h2{font-size:clamp(1.9rem,3vw,2.8rem);font-weight:900;color:var(--dark);letter-spacing:-0.025em;line-height:1.1;margin-bottom:16px}
.pricing-header p{font-size:0.98rem;line-height:1.7;color:var(--grey)}

/* Grid */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  max-width:1180px;
  margin:0 auto;
  align-items:stretch;
}

/* Base card – matches checkout .pkg */
.plan-card{
  background:#fff;
  border:1.5px solid rgba(0,0,0,0.07);
  border-radius:20px;
  padding:32px 28px;
  position:relative;
  display:flex;flex-direction:column;
  transition:transform 0.2s,box-shadow 0.2s;
}
.plan-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.08)}

/* Featured – exactly like checkout bestseller */
.plan-card.featured{
  border-color:transparent;
  box-shadow:0 0 0 2.5px var(--cyan),0 16px 48px rgba(0,180,200,0.14);
}
.plan-card.featured:hover{transform:translateY(-4px)}

/* Bestseller badge */
.plan-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--dark);color:white;font-size:0.65rem;font-weight:800;
  text-transform:uppercase;letter-spacing:0.12em;padding:5px 16px;
  border-radius:100px;white-space:nowrap;border:2px solid #fff;
}

/* Typography */
.plan-label{font-size:0.68rem;font-weight:800;text-transform:uppercase;letter-spacing:0.1em;color:var(--cyan);margin-bottom:10px;display:block}
.plan-name{font-size:1.3rem;font-weight:900;color:var(--dark);letter-spacing:-0.02em;margin-bottom:6px}
.plan-tagline{font-size:0.8rem;color:var(--grey);margin-bottom:20px;line-height:1.5}

/* Setup row */
.plan-setup{
  display:flex;align-items:center;gap:8px;
  background:var(--light);border-radius:8px;padding:8px 12px;margin-bottom:16px;
}
.plan-setup-label{font-size:0.72rem;color:var(--grey);font-weight:600}
.plan-setup-val{font-size:0.88rem;font-weight:800;color:var(--dark);margin-left:auto}

/* Price */
.plan-price-row{display:flex;align-items:baseline;gap:2px;margin-bottom:6px}
.plan-eur{font-size:1.1rem;font-weight:700;color:var(--grey)}
.plan-num{font-size:3.2rem;font-weight:900;color:var(--dark);letter-spacing:-0.04em;line-height:1}
.plan-period{font-size:0.82rem;color:var(--grey);font-weight:600;margin-left:2px}
.plan-vat{font-size:0.72rem;color:var(--grey);margin-bottom:24px}

/* Divider */
.plan-divider{height:1px;background:rgba(0,0,0,0.06);border:none;margin:0 0 20px}

/* Feature rows */
.plan-features{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;flex:1}
.plan-row{display:flex;align-items:flex-start;gap:10px;font-size:0.8rem;color:var(--grey);font-weight:500;line-height:1.4}
.plan-row-icon{width:18px;height:18px;border-radius:50%;background:rgba(0,200,150,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.plan-row-icon svg{width:10px;height:10px}
.plan-row strong{color:var(--dark);font-weight:700}
.plan-hint{display:block;margin-top:3px;font-size:0.72rem;font-weight:800;color:var(--cyan);line-height:1.35}

/* No-binding note */
.plan-no-binding{
  font-size:0.72rem;color:var(--grey);text-align:left;
  margin-bottom:20px;padding:0;line-height:1.5;
}
.plan-no-binding strong{color:var(--cyan)}

/* CTA button */
.plan-cta{
  width:100%;padding:16px;border-radius:12px;
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:0.95rem;
  cursor:pointer;border:none;transition:all 0.2s;
  text-decoration:none;display:flex;align-items:center;justify-content:center;gap:8px;
}
.plan-cta-primary{background:#E8005A;color:white;border:2px solid transparent;box-shadow:0 4px 20px rgba(232,0,90,0.25)}
.plan-cta-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(232,0,90,0.45)}
.plan-cta-outline{background:transparent;color:var(--dark);border:2px solid rgba(0,0,0,0.12)}
.plan-cta-outline:hover{border-color:#E8005A;color:#E8005A;background:rgba(232,0,90,0.04)}
.plan-note{font-size:0.72rem;color:var(--grey);text-align:center;margin-top:8px}
/* Desktop-Grid: hält die drei CTA-Buttons exakt auf einer Linie, auch wenn
   Button-Label oder Fußnote in einer Karte zweizeilig umbrechen */
.pricing-grid .plan-note{line-height:1.5;min-height:34px}
@media(min-width:901px) and (max-width:1240px){
  .pricing-grid .plan-cta{min-height:70px}
}

/* ── MOBILE TABS ──────────────────────────────────────────── */
.pricing-tabs{display:none}

@media(max-width:900px){
  .pricing-grid{display:none}
  .pricing-tabs{display:block;max-width:480px;margin:0 auto}

  .ptab-btns{
    display:flex;border-radius:14px;background:rgba(0,0,0,0.05);
    padding:4px;gap:2px;margin-bottom:24px;
  }
  .ptab-btn{
    flex:1;padding:10px 6px;border:none;background:transparent;
    font-size:0.75rem;font-weight:800;color:var(--grey);
    border-radius:10px;cursor:pointer;transition:all 0.2s;
    text-transform:uppercase;letter-spacing:0.05em;
    font-family:'Montserrat',sans-serif;
  }
  .ptab-btn.active{background:white;color:var(--dark);box-shadow:0 2px 12px rgba(0,0,0,0.1)}
  .ptab-btn.active.ft{color:var(--cyan)}
  .ptab-panel{display:none}
  .ptab-panel.active{display:block}

  .ptab-card{
    background:#fff;border:1.5px solid rgba(0,0,0,0.07);
    border-radius:20px;padding:28px 24px;position:relative;
    display:flex;flex-direction:column;
  }
  .ptab-card.feat{box-shadow:0 0 0 2.5px var(--cyan),0 12px 40px rgba(0,180,200,0.14)}
}
@media(max-width:600px){.pricing-section{padding:60px 20px!important}}

.faq-wrap{max-width:760px;margin:0 auto}
.faq-wrap h2{font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:900;color:var(--dark);letter-spacing:-0.025em;margin-bottom:8px}
.faq-wrap .faq-sub{font-size:0.95rem;color:var(--grey);margin-bottom:48px}
.faq-item{border-bottom:1px solid rgba(0,0,0,0.07);padding:0}
.faq-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 0;font-family:'Montserrat',sans-serif;font-size:0.95rem;
  font-weight:700;color:var(--dark);line-height:1.4;
}
.faq-q:hover{color:var(--cyan)}
.faq-icon{
  width:28px;height:28px;border-radius:50%;background:var(--light);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background 0.2s,transform 0.3s;font-size:1.1rem;color:var(--grey);
}
.faq-item.open .faq-icon{background:#d52e5c;color:white;transform:rotate(45deg)}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height 0.35s ease,padding 0.2s;
  font-size:0.88rem;color:var(--grey);line-height:1.7;padding:0 36px 0 0;
}
.faq-item.open .faq-a{max-height:800px;padding-bottom:20px}
@media(max-width:768px){#faq-section{padding:60px 20px !important}}
@media(max-width:480px){#faq-section{padding:48px 16px !important}}
@media(max-width:600px){.faq-wrap{padding:0}.faq-q{font-size:0.88rem}}

.rp-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:end}
.rp-img-wrap{position:relative;align-self:stretch;display:flex}
.rp-img-ph{width:100%;height:100%;min-height:480px;background:repeating-linear-gradient(135deg,#eef0f6 0,#eef0f6 13px,#e3e6f1 13px,#e3e6f1 26px);border-radius:20px 20px 0 0;display:flex;align-items:center;justify-content:center;color:#9aa0b8;font-weight:700;font-size:0.85rem;text-align:center}
.rp-img{width:100%;height:100%;object-fit:cover;display:block}
.rp-text{padding-bottom:96px}
.rp-text h2{font-size:clamp(2rem,3.1vw,2.9rem);font-weight:900;color:var(--dark);letter-spacing:-0.025em;line-height:1.08;margin-bottom:24px}
.rp-text h2 span{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.rp-text p{font-size:1rem;line-height:1.8;color:var(--grey);max-width:32em}
.rp-sign{margin-top:26px;padding-top:20px;border-top:1px solid var(--border);font-size:0.95rem;font-weight:800;color:var(--dark)}
.rp-linkedin{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:var(--magenta);font-weight:700;font-size:0.9rem;text-decoration:none;transition:opacity .2s}
.rp-linkedin:hover{opacity:0.65}
@media(max-width:960px){.rp-inner{grid-template-columns:1fr;gap:28px}.rp-text{padding-bottom:0;order:-1}.rp-sec{padding:56px 20px 0 !important}.rp-img-wrap{align-self:auto}.rp-img-ph{height:auto;min-height:0;aspect-ratio:1/0.62}}

  .cookie-banner{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:9999;background:#0e1833;backdrop-filter:blur(16px);color:#fff;border-radius:14px;padding:18px 24px;display:flex;align-items:center;gap:20px;box-shadow:0 8px 40px rgba(0,0,0,0.35);max-width:680px;width:calc(100% - 48px);font-family:'Montserrat',sans-serif;font-size:0.78rem;line-height:1.55;border:1px solid rgba(255,255,255,0.08);animation:cookieSlideUp 0.4s cubic-bezier(0.16,1,0.3,1) both}
  @keyframes cookieSlideUp{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
  .cookie-banner p{flex:1;color:rgba(255,255,255,0.7);margin:0}
  .cookie-banner p a{color:rgba(255,255,255,0.5);text-decoration:underline;cursor:pointer}
  .cookie-banner-btns{display:flex;gap:10px;flex-shrink:0}
  .cookie-btn-accept{background:#E8005A;color:#fff;font-family:'Montserrat',sans-serif;font-weight:700;font-size:0.78rem;padding:9px 18px;border-radius:8px;border:none;cursor:pointer;transition:all 0.2s;white-space:nowrap}
  .cookie-btn-accept:hover{background:#c4004c;transform:translateY(-1px)}
  .cookie-btn-decline{background:transparent;color:rgba(255,255,255,0.45);font-family:'Montserrat',sans-serif;font-weight:600;font-size:0.78rem;padding:9px 14px;border-radius:8px;border:1px solid rgba(255,255,255,0.12);cursor:pointer;transition:all 0.2s;white-space:nowrap}
  .cookie-btn-decline:hover{color:rgba(255,255,255,0.7);border-color:rgba(255,255,255,0.25)}
  @media(max-width:600px){.cookie-banner{flex-direction:column;align-items:flex-start;gap:14px;bottom:16px}.cookie-banner-btns{width:100%}.cookie-btn-accept{flex:1;text-align:center}}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(13,13,20,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* ── Einheitliche Button-Schriftgröße auf Mobil ─────────────────
   Alle Haupt-/Content-CTAs auf 0.95rem (15.2px) normalisiert.
   !important, um Inline-Styles (z. B. .btn-white) & höher spezifische
   Regeln (.rx-hero-ctas .rx-btn-lg) sauber zu überschreiben. */
@media(max-width:768px){
  .rx-btn-lg,
  .rx-link-pdf,
  .rx-mobile-cta,
  .btn-white,
  .rx-btn-ghost,
  .plan-cta{
    font-size:0.95rem !important;
    font-weight:800;
  }
}


/* ==== Pain-Sektion (3 Karten, heller Seitenstil) ==== */
.rx-pain{background:var(--light);padding:96px 24px 104px}
.rx-pain-head{max-width:860px;margin:0 auto;text-align:center}
.rx-pain-head h2{font-size:clamp(1.8rem,2.8vw,2.6rem);font-weight:900;letter-spacing:-0.03em;
  line-height:1.12;color:var(--dark);margin:14px 0 0}
.rx-pain-head h2 .g{background:var(--gradient);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text}
.rx-pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1160px;margin:56px auto 0}
.rx-pain-card{background:var(--white);border:1px solid var(--border);border-radius:16px;
  padding:30px 28px 34px;text-align:left;transition:transform .2s, box-shadow .2s, border-color .2s}
.rx-pain-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.07);border-color:#f6c9da}
.rx-pain-ic{width:58px;height:58px;border-radius:15px;background:var(--magenta);color:#fff;
  box-shadow:0 10px 24px rgba(232,0,90,0.30);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.rx-pain-card h4{color:var(--dark);font-size:1.12rem;margin:0 0 10px;font-weight:800;letter-spacing:-0.01em}
.rx-pain-card p{color:var(--grey);font-size:0.93rem;line-height:1.7;margin:0}
.rx-pain-card code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.9em;
  background:rgba(30,30,46,0.05);border:1px solid var(--border);
  padding:2px 8px;border-radius:6px;color:var(--body);white-space:nowrap}
@media (max-width:920px){.rx-pain-grid{grid-template-columns:1fr;max-width:560px}}

/* ==== Claim-Statement (in Pain-Sektion integriert) ==== */
.rx-pain-claim{max-width:880px;margin:64px auto 0;text-align:center;color:var(--body);
  font-size:clamp(1.05rem,1.8vw,1.28rem);line-height:1.7;font-weight:500}
.rx-pain-claim strong{font-weight:800;color:var(--magenta)}

/* ==== Workflow-Kopf ==== */
.wf2-head{max-width:820px;margin:0 auto 64px;text-align:center;padding:0 24px}
.wf2-head h2{font-size:clamp(1.8rem,2.8vw,2.6rem);font-weight:900;letter-spacing:-0.03em;
  line-height:1.12;color:var(--dark);margin:14px 0 0}
.wf2-head h2 .g{background:var(--gradient);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text}


/* ══ Umschalter monatlich / jährlich ══════════════════════════════ */
.billing-toggle{display:flex;justify-content:center;gap:6px;margin:0 auto 46px;
  padding:6px;border-radius:999px;background:rgba(15,23,42,.06);width:max-content;
  max-width:calc(100% - 32px);flex-wrap:wrap}
.bt-opt{border:0;background:transparent;cursor:pointer;padding:12px 24px;
  border-radius:999px;font:600 15px/1.2 Montserrat,sans-serif;color:#475569;
  display:inline-flex;align-items:center;gap:10px;transition:background .18s,color .18s}
.bt-opt:hover{color:#0f172a}
.bt-opt.is-active{background:#fff;color:#0f172a;
  box-shadow:0 2px 10px rgba(15,23,42,.10)}
.bt-save{font-size:12px;font-weight:700;letter-spacing:.2px;padding:4px 10px;
  border-radius:999px;background:linear-gradient(135deg,#00a86b,#72f8ca);color:#08312a}
.plan-permonth{margin-top:6px;font:600 13.5px/1.4 Montserrat,sans-serif;color:#64748b}
@media (max-width:560px){
  .bt-opt{padding:10px 16px;font-size:14px}
  .bt-save{font-size:11px;padding:3px 8px}
}

/* Längerer Eyebrow darf auf sehr schmalen Geräten umbrechen */
@media (max-width:380px){
  .rx-hero-eyebrow{white-space:normal;text-align:center;line-height:1.35;
    padding-top:8px;padding-bottom:8px}
}

/* ══ Hero kompakter: je ein Satz pro Zeile ═══════════════════════ */
@media(min-width:900px){
  .rx-hero-intro{max-width:1000px;padding-top:56px}
  .rx-hero h1{font-size:clamp(2.6rem,3.5vw,3.5rem);line-height:1.12;
    letter-spacing:-0.032em;margin-bottom:20px;text-wrap:pretty}
  .rx-hero-sub{max-width:840px;font-size:1.08rem;text-wrap:pretty}
}

/* ══ CRM-Import – im Stil der übrigen Abschnitte ═══════════════════ */
#crm-import{background:var(--light);padding:96px 24px 104px;text-align:center}
.rx-imp{max-width:1160px;margin:0 auto}
#crm-import .rx-imp h2{font-size:clamp(1.8rem,2.8vw,2.6rem);font-weight:900;
  letter-spacing:-0.03em;line-height:1.12;color:var(--dark);
  max-width:1020px;margin:14px auto 0}
#crm-import .rx-imp h2 .g{background:var(--gradient);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text}
#crm-import .rx-imp-lead{text-transform:none;letter-spacing:normal;font-weight:400;
  font-size:1rem;line-height:1.72;color:var(--grey);max-width:680px;margin:18px auto 0}

#crm-import .rx-logos-row{margin-top:12px}
#crm-import > p{margin:64px 0 24px}

@media(max-width:900px){
  #crm-import{padding:72px 24px 80px}
}


/* Logoleiste im Schmerz-Abschnitt */
.rx-pain .rx-logos-lbl{font-size:0.82rem;font-weight:700;text-transform:uppercase;
  letter-spacing:0.1em;color:var(--grey);text-align:center;margin:72px 0 28px}
.rx-pain .rx-logos-row{display:flex;align-items:center;justify-content:space-between;
  gap:28px;flex-wrap:wrap;max-width:1196px;margin:0 auto}
@media(max-width:900px){
  .rx-pain .rx-logos-lbl{margin:56px 0 22px}
  .rx-pain .rx-logos-row{gap:16px 26px;justify-content:center}
}


/* ══════════════════════════════════════════════════════════════════
   MOBILER VERTIKAL-RHYTHMUS  (Stand 24.07.2026)
   Ein einziger Wert pro Breakpoint für alle Hauptsektionen, damit die
   Abstände zwischen den Abschnitten gleichmäßig sind.
   Abstand zwischen zwei Sektionen = padding-bottom + padding-top.
     ≤768px : 56 + 56 = 112px
     ≤480px : 44 + 44 =  88px
   !important nur dort, wo im HTML ein inline-style oder eine ältere
   !important-Regel dagegensteht (workflow, pricing, faq, rp-sec, final-cta).
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .rx-hero{ padding-bottom:56px; }
  .rx-pain{ padding-top:56px; padding-bottom:56px; }
  .rx-split{ padding-top:56px; padding-bottom:56px; }
  .workflow-section{ padding-top:56px!important; padding-bottom:56px!important; }
  .rx-demo{ padding-top:56px; padding-bottom:56px; }
  .rx-feat{ padding-top:56px; padding-bottom:56px; }
  .rx-benefits{ padding-top:56px; padding-bottom:56px; }
  .pricing-section{ padding-top:56px!important; padding-bottom:56px!important;
                    padding-left:20px!important; padding-right:20px!important; }
  .rx-testi{ padding-top:56px; padding-bottom:56px; }
  #faq-section{ padding-top:56px!important; padding-bottom:56px!important; }
  /* unten bewusst 0: das Bild läuft an die Sektionskante */
  .rp-sec{ padding-top:56px!important; }
  .final-cta{ padding-top:56px!important; padding-bottom:56px!important; }
}
@media(max-width:480px){
  .rx-hero{ padding-bottom:44px; }
  .rx-pain{ padding-top:44px; padding-bottom:44px; }
  .rx-split{ padding-top:44px; padding-bottom:44px; }
  .workflow-section{ padding-top:44px!important; padding-bottom:44px!important; }
  .rx-demo{ padding-top:44px; padding-bottom:44px; }
  .rx-feat{ padding-top:44px; padding-bottom:44px; }
  .rx-benefits{ padding-top:44px; padding-bottom:44px; }
  .pricing-section{ padding-top:44px!important; padding-bottom:44px!important; }
  .rx-testi{ padding-top:44px; padding-bottom:44px; }
  #faq-section{ padding-top:44px!important; padding-bottom:44px!important; }
  .rp-sec{ padding-top:44px!important; }
  .final-cta{ padding-top:44px!important; padding-bottom:44px!important; }
}

/* Logo-Label im Schmerz-Abschnitt: 72px Innenabstand sprengt auf Mobil
   den Rhythmus – auf Sektionsmaß bringen */
@media(max-width:768px){
  .rx-pain .rx-logos-lbl{ margin:44px 0 20px; }
}

/* ── Hero-Subline: Aufhänger als eigene Zeile, Detailzeile ruhiger ──
   Zweistufig statt drei gleich aussehende Fließtextzeilen:
   1. Zeile = Nutzenversprechen (heller, etwas größer)
   2. Block = Faktenzeile (kleiner, schmaler, ausbalancierte Umbrüche) */
.rx-hero-sub strong{ display:block; color:#fff; font-weight:600;
  font-size:1.24rem; line-height:1.38; letter-spacing:-0.01em; margin-bottom:12px;
  text-wrap:balance; }
.rx-hero-sub span{ display:block; max-width:620px; margin:0 auto;
  font-size:1rem; line-height:1.62; text-wrap:balance; }
/* Zweizeilige Hero-Subline: 1. Zeile = Eingabeweg, 2. Block = Ergebnis */
.rx-hero-sub .l1{ max-width:none; margin-bottom:0; text-wrap:pretty; }
.rx-hero-sub .l2{ max-width:700px; }
@media(min-width:900px){
  .rx-hero-sub .l1{ max-width:840px; }
}
@media(max-width:899px){
  .rx-hero-sub .l1{ max-width:560px; margin-left:auto; margin-right:auto; }
}
@media(max-width:768px){
  .rx-hero-sub strong{ font-size:1.1rem; margin-bottom:10px; }
  .rx-hero-sub span{ font-size:0.95rem; line-height:1.58; }
}