:root {
      --navy: #0B1222;
      --navy-light: #131D2F;
      --navy-mid: #1A2744;
      --teal: #00D4AA;
      --teal-dark: #00B894;
      --coral: #FF6B6B;
      --white: #FFFFFF;
      --gray-50: #F8FAFC;
      --gray-100: #F1F5F9;
      --gray-200: #E2E8F0;
      --gray-300: #CBD5E1;
      --gray-400: #94A3B8;
      --gray-500: #64748B;
      --gray-600: #475569;
      --gray-700: #334155;
      --gray-800: #1E293B;
      --warm-bg: #FAFBFD;
      --container: 1200px;
      --radius: 16px;
      --button-radius: 10px;
      --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
      --shadow-hover: 0 18px 45px rgba(15, 23, 42, 0.14);
      --gradient: linear-gradient(135deg, var(--teal), var(--teal-dark));
      --hero-glow: radial-gradient(circle at 15% 20%, rgba(0, 212, 170, 0.18), transparent 30%), radial-gradient(circle at 85% 10%, rgba(0, 212, 170, 0.12), transparent 28%), radial-gradient(circle at 50% 80%, rgba(255,255,255,0.05), transparent 30%);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: 'DM Sans', sans-serif;
      color: var(--gray-800);
      background: var(--white);
      line-height: 1.6;
    }
    body.mobile-menu-open {
      overflow: hidden;
    }
    a { color: inherit; text-decoration: none; }
    .hidden { display: none !important; }
    .container {
      width: min(100% - 40px, var(--container));
      margin: 0 auto;
    }
    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(11, 18, 34, 0.95);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 78px;
      gap: 24px;
    }
    .nav-desktop {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-left: auto;
    }
    .mobile-nav-toggle {
      display: none;
      width: 48px;
      height: 48px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.05);
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      transition: 0.22s ease;
      padding: 0;
    }
    .mobile-nav-toggle:hover {
      background: rgba(255,255,255,0.08);
    }
    .mobile-nav-toggle span {
      width: 20px;
      height: 2px;
      border-radius: 999px;
      background: var(--white);
      transition: transform 0.22s ease, opacity 0.22s ease;
    }
    .mobile-nav-toggle.active span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }
    .mobile-nav-toggle.active span:nth-child(2) {
      opacity: 0;
    }
    .mobile-nav-toggle.active span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }
    .mobile-menu-panel {
      display: none;
    }
    .mobile-menu-inner {
      display: grid;
      gap: 18px;
    }
    .mobile-nav-links {
      display: grid;
      gap: 10px;
    }
    .mobile-nav-link,
    .mobile-nav-group-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 56px;
      padding: 0 18px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.04);
      color: rgba(255,255,255,0.9);
      font-weight: 700;
      font-size: 16px;
      cursor: pointer;
      transition: 0.22s ease;
    }
    .mobile-nav-link:hover,
    .mobile-nav-group-summary:hover,
    .mobile-nav-link.active,
    .mobile-nav-group-summary.active {
      background: rgba(0,212,170,0.1);
      border-color: rgba(0,212,170,0.22);
      color: var(--teal);
    }
    .mobile-nav-group {
      margin: 0;
    }
    .mobile-nav-group > summary {
      list-style: none;
    }
    .mobile-nav-group > summary::-webkit-details-marker {
      display: none;
    }
    .mobile-nav-group-summary::after {
      content: '⌄';
      font-size: 12px;
      transition: transform 0.22s ease;
    }
    .mobile-nav-group[open] .mobile-nav-group-summary::after {
      transform: rotate(180deg);
    }
    .mobile-nav-children {
      display: grid;
      gap: 8px;
      padding: 10px 0 0 12px;
    }
    .mobile-nav-children .mobile-nav-link {
      min-height: 50px;
      font-size: 14px;
      background: rgba(255,255,255,0.03);
    }
    .mobile-nav-actions {
      display: grid;
      gap: 14px;
      padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .mobile-nav-actions .lang-switch {
      width: fit-content;
    }
    .mobile-nav-actions .btn {
      width: 100%;
    }
    .mobile-demo-btn.active {
      box-shadow: 0 10px 24px rgba(0,212,170,0.28);
    }
    .logo {
      display: inline-flex;
      align-items: center;
      font-family: 'Sora', sans-serif;
      font-size: 22px;
      letter-spacing: -0.03em;
      font-weight: 800;
    }
    .logo .accent {
      background: linear-gradient(135deg, var(--teal), #00FFD4);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-right: 2px;
    }
    .logo .rest { color: var(--white); font-weight: 700; }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 22px;
      color: rgba(255,255,255,0.88);
      flex-wrap: wrap;
      justify-content: center;
    }
    .nav-links a {
      font-weight: 600;
      font-size: 15px;
      cursor: pointer;
      padding: 10px 16px;
      border-radius: 12px;
      transition: 0.22s ease;
    }
    .nav-links a:hover {
      color: var(--white);
      background: rgba(255,255,255,0.06);
    }
    .nav-links a.active {
      color: var(--teal);
      background: rgba(0,212,170,0.08);
      box-shadow: inset 0 0 0 1px rgba(0,212,170,0.08);
    }
    .nav-dropdown {
      position: relative;
      display: inline-flex;
      align-items: center;
      padding-bottom: 14px;
      margin-bottom: -14px;
    }
    .nav-dropdown-trigger {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .nav-dropdown-trigger::after {
      content: '⌄';
      font-size: 11px;
      line-height: 1;
      opacity: 0.9;
      transition: transform 0.22s ease;
    }
    .nav-dropdown:hover .nav-dropdown-trigger::after,
    .nav-dropdown:focus-within .nav-dropdown-trigger::after {
      transform: rotate(180deg);
    }
    .nav-dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 290px;
      padding: 12px;
      border-radius: 18px;
      background: rgba(11, 18, 34, 0.98);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 20px 50px rgba(0,0,0,0.28);
      display: grid;
      gap: 4px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      pointer-events: none;
      transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
      z-index: 80;
      backdrop-filter: blur(16px);
    }
    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }
    .nav-dropdown-menu a {
      display: block;
      width: 100%;
      padding: 12px 14px;
      border-radius: 12px;
      color: rgba(255,255,255,0.84);
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: 0.22s ease;
      white-space: nowrap;
    }
    .nav-dropdown-menu a:hover,
    .nav-dropdown-menu a:focus-visible {
      color: var(--white);
      background: rgba(255,255,255,0.06);
      outline: none;
    }
    .nav-demo-btn.active {
      background: rgba(255,255,255,0.08);
      border-color: rgba(0,212,170,0.34);
      color: var(--white);
      box-shadow: 0 10px 24px rgba(0,212,170,0.14);
    }
    .nav-actions { display: flex; align-items: center; gap: 12px; }
    .lang-switch {
      display: inline-flex;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 999px;
      overflow: hidden;
    }
    .lang-switch button {
      border: 0;
      background: transparent;
      color: rgba(255,255,255,0.86);
      padding: 9px 14px;
      font-weight: 700;
      cursor: pointer;
    }
    .lang-switch button.active {
      background: rgba(255,255,255,0.12);
      color: var(--white);
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 48px;
      padding: 0 18px;
      border-radius: var(--button-radius);
      font-weight: 700;
      transition: 0.25s ease;
      cursor: pointer;
      border: 1px solid transparent;
      font-family: 'DM Sans', sans-serif;
      font-size: 15px;
    }
    .btn-primary {
      background: var(--gradient);
      color: var(--navy);
      box-shadow: 0 10px 24px rgba(0, 212, 170, 0.22);
    }
    .btn-primary:hover { transform: translateY(-2px); }
    .btn-secondary {
      background: transparent;
      border-color: rgba(255,255,255,0.24);
      color: var(--white);
    }
    .btn-secondary-dark {
      background: transparent;
      border-color: var(--gray-300);
      color: var(--gray-800);
    }
    .page { display: none; }
    .page.active { display: block; }
    .hero, .subhero {
      background: var(--hero-glow), var(--navy);
      color: var(--white);
      padding: 92px 0 80px;
      position: relative;
      overflow: hidden;
    }
    .hero-grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 48px;
      align-items: center;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.05);
      padding: 10px 16px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 24px;
    }
    .badge .dot {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 5px rgba(0,212,170,0.15);
    }
    h1, h2, h3, h4 {
      font-family: 'Sora', sans-serif;
      line-height: 1.04;
      letter-spacing: -0.03em;
      margin: 0 0 16px;
    }
    h1 { font-size: clamp(42px, 6vw, 72px); }
    h2 { font-size: clamp(30px, 4.4vw, 48px); }
    h3 { font-size: 22px; }
    p.lead {
      font-size: 20px;
      color: rgba(255,255,255,0.82);
      max-width: 760px;
      margin-bottom: 28px;
    }
    .gradient-text {
      background: linear-gradient(135deg, var(--teal), #00FFD4);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 24px; }
    .trustline {
      display: flex;
      gap: 14px;
      align-items: center;
      flex-wrap: wrap;
      color: rgba(255,255,255,0.8);
      font-weight: 600;
    }
    .stars { color: var(--teal); letter-spacing: 2px; }
    .hero-panel {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 24px;
      padding: 26px;
      box-shadow: 0 22px 60px rgba(0,0,0,0.25);
    }
    .panel-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }
    .panel-card {
      background: rgba(255,255,255,0.06);
      border-radius: 18px;
      padding: 18px;
      border: 1px solid rgba(255,255,255,0.08);
    }
    .panel-card .eyebrow {
      display: block;
      margin-bottom: 12px;
    }
    .panel-card strong {
      display: block;
    }
    .panel-card p {
      margin-top: 12px;
    }
    .section { padding: 88px 0; }
    .section.alt { background: var(--warm-bg); }
    .section-header {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      align-items: end;
      margin-bottom: 36px;
    }
    .section-header-top {
      align-items: start;
    }
    .section-header p { max-width: 700px; color: var(--gray-600); margin: 0; }
    .home-features-header {
      align-items: start;
    }
    .home-features-header p {
      padding-top: 34px;
    }
    .cards-3, .cards-4, .cards-2, .pricing-grid, .integration-grid, .stats-grid {
      display: grid;
      gap: 22px;
    }
    .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
    .integration-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .card {
      background: var(--white);
      border-radius: var(--radius);
      border: 1px solid var(--gray-200);
      padding: 26px;
      box-shadow: var(--shadow);
      transition: 0.25s ease;
      height: 100%;
    }
    .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
    .card.dark {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--white);
      box-shadow: none;
    }
    .card.dark p, .card.dark small { color: rgba(255,255,255,0.76); }
    .icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: inline-grid;
      place-items: center;
      background: rgba(0,212,170,0.12);
      color: var(--teal-dark);
      margin-bottom: 18px;
      font-size: 24px;
      font-weight: 700;
    }
    .icon svg {
      width: 24px;
      height: 24px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--teal-dark);
      margin-bottom: 10px;
    }
    ul.clean, ul.feature-list {
      list-style: none;
      padding: 0;
      margin: 18px 0 0;
    }
    ul.feature-list li, ul.clean li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      margin-bottom: 12px;
      color: var(--gray-700);
    }
    .check {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: rgba(0,212,170,0.14);
      color: var(--teal-dark);
      display: inline-grid;
      place-items: center;
      flex: 0 0 22px;
      margin-top: 1px;
      font-size: 13px;
      font-weight: 900;
    }
    .check svg {
      width: 13px;
      height: 13px;
    }
    .arrow-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-left: 6px;
      color: inherit;
      transition: transform 0.25s ease;
    }
    .arrow-link svg {
      width: 16px;
      height: 16px;
    }
    .linked-card:hover .arrow-link,
    a:hover .arrow-link {
      transform: translateX(3px);
    }
    .testimonial-wrap { background: var(--navy); color: var(--white); }
    .quote {
      font-size: 18px;
      margin: 12px 0 20px;
      color: rgba(255,255,255,0.9);
    }
    .muted { color: var(--gray-600); }
    .faq-list { display: grid; gap: 14px; }
    .faq-item {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 16px;
      overflow: hidden;
    }
    .faq-button {
      width: 100%;
      background: none;
      border: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 22px 24px;
      font-size: 17px;
      font-weight: 700;
      cursor: pointer;
      text-align: left;
    }
    .faq-answer {
      display: none;
      padding: 0 24px 22px;
      color: var(--gray-600);
    }
    .pricing-faq-layout {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 22px;
      align-items: start;
    }
    .pricing-faq-aside {
      background: linear-gradient(180deg, rgba(0,212,170,0.08), rgba(255,255,255,1));
      border: 1px solid var(--gray-200);
      border-radius: 24px;
      padding: 28px;
      box-shadow: var(--shadow);
      position: sticky;
      top: 108px;
    }
    .pricing-faq-aside p {
      color: var(--gray-600);
      margin: 0 0 18px;
    }
    .pricing-faq-points {
      display: grid;
      gap: 12px;
      margin-top: 18px;
    }
    .pricing-faq-point {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      padding: 14px 0;
      border-top: 1px solid var(--gray-200);
      color: var(--gray-700);
    }
    .pricing-faq-point:first-child {
      border-top: 0;
      padding-top: 0;
    }
    .faq-item.pricing-faq-item {
      border-radius: 20px;
      box-shadow: var(--shadow);
    }
    .faq-item.pricing-faq-item.open {
      border-color: rgba(0,212,170,0.24);
      box-shadow: 0 16px 38px rgba(0,212,170,0.1);
    }
    .faq-item.pricing-faq-item .faq-button {
      padding: 24px 26px;
      font-size: 18px;
    }
    .faq-item.pricing-faq-item .faq-answer {
      padding: 0 26px 24px;
      font-size: 16px;
      line-height: 1.7;
    }
    .faq-item.open .faq-answer { display: block; }
    .faq-item.open .faq-chevron { transform: rotate(180deg); }
    .faq-chevron { transition: 0.2s ease; }
    .cta-panel {
      background: linear-gradient(135deg, rgba(0,212,170,0.08), rgba(11,18,34,0.04));
      border: 1px solid var(--gray-200);
      border-radius: 28px;
      padding: 36px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
    }
    .pricing-card {
      position: relative;
      padding: 30px;
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,0.96));
      border: 1px solid var(--gray-200);
      box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
      overflow: hidden;
    }
    .pricing-card::before {
      content: '';
      position: absolute;
      inset: 0 0 auto 0;
      height: 4px;
      background: linear-gradient(135deg, rgba(0,212,170,0.9), rgba(0,184,148,0.78));
      opacity: 0.88;
    }
    .pricing-card.highlight {
      background: linear-gradient(180deg, rgba(0,212,170,0.08), rgba(255,255,255,1));
      border-color: rgba(0,212,170,0.24);
      box-shadow: 0 22px 50px rgba(0, 212, 170, 0.12);
      transform: translateY(-8px);
    }
    .pricing-plan-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }
    .pill {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(11,18,34,0.05);
      color: var(--navy);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.02em;
    }
    .plan-badge {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(0,212,170,0.14);
      color: var(--teal-dark);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.02em;
      box-shadow: inset 0 0 0 1px rgba(0,212,170,0.12);
    }
    .pricing-plan-kicker {
      font-size: 16px;
      line-height: 1.55;
      color: var(--gray-600);
      margin: 14px 0 0;
      max-width: 32ch;
    }
    .price {
      font-family: 'Sora', sans-serif;
      font-size: clamp(42px, 5vw, 56px);
      line-height: 0.96;
      letter-spacing: -0.05em;
      color: var(--navy);
      margin: 4px 0 10px;
    }
    .price-period {
      color: var(--navy);
      font-weight: 800;
      font-size: 18px;
      line-height: 1.2;
    }
    .price-note {
      margin-top: 8px;
      min-height: 22px;
      color: var(--gray-500);
      font-size: 14px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--gray-200);
    }
    .pricing-card > p {
      margin: 18px 0 0;
      color: var(--gray-700);
      font-size: 19px;
      line-height: 1.6;
      min-height: 98px;
      max-width: 30ch;
    }
    .pricing-card .btn {
      width: 100%;
      margin: 20px 0 18px;
      min-height: 52px;
      border-radius: 14px;
      font-size: 17px;
      font-weight: 800;
    }
    .pricing-card .btn.btn-secondary-dark {
      border-color: var(--gray-300);
      background: rgba(11,18,34,0.02);
    }
    .pricing-card .feature-list {
      margin-top: 18px;
      padding-top: 18px;
      border-top: 1px solid var(--gray-200);
    }
    .pricing-card .feature-list li {
      margin-bottom: 13px;
    }
    .pricing-inline-proof,
    .pricing-proof-grid,
    .pricing-fit-grid {
      display: grid;
      gap: 14px 16px;
    }
    .pricing-inline-proof,
    .pricing-proof-grid,
    .pricing-fit-grid {
      display: grid;
      gap: 14px 16px;
    }
    .pricing-inline-proof {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-top: 34px;
      align-items: stretch;
    }
    .pricing-inline-item {
      display: flex;
      align-items: center;
      gap: 14px;
      min-height: 84px;
      padding: 18px 20px;
      border-radius: 20px;
      background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 18px 38px rgba(0,0,0,0.16);
      backdrop-filter: blur(10px);
      text-align: left;
    }
    .pricing-inline-icon {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 42px;
      background: rgba(0,212,170,0.14);
      border: 1px solid rgba(0,212,170,0.18);
      color: #7eead3;
      font-family: 'Sora', sans-serif;
      font-size: 16px;
      font-weight: 800;
      letter-spacing: -0.03em;
    }
    .pricing-inline-text {
      color: rgba(255,255,255,0.94);
      font-weight: 700;
      font-size: 16px;
      line-height: 1.35;
      letter-spacing: -0.02em;
    }
    .pricing-proof-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pricing-fit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pricing-proof-card,
    .pricing-fit-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 22px;
      padding: 24px;
      box-shadow: var(--shadow);
      height: 100%;
    }
    .pricing-proof-card {
      background: linear-gradient(180deg, rgba(0,212,170,0.06), rgba(255,255,255,1));
    }
    .pricing-fit-card.featured {
      background: linear-gradient(135deg, rgba(0,212,170,0.08), rgba(11,18,34,0.03));
      border-color: rgba(0,212,170,0.24);
    }
    .pricing-matrix-note {
      margin-top: 18px;
      padding: 16px 18px;
      border-radius: 14px;
      background: rgba(0,212,170,0.08);
      border: 1px solid rgba(0,212,170,0.16);
      color: var(--gray-700);
      font-weight: 600;
    }
    .billing-toggle {
      display: inline-flex;
      align-items: center;
      gap: 0;
      padding: 6px;
      border: 1px solid var(--gray-200);
      border-radius: 999px;
      background: var(--white);
      margin-bottom: 32px;
    }
    .billing-toggle button {
      border: 0;
      background: transparent;
      padding: 11px 18px;
      border-radius: 999px;
      font-weight: 700;
      cursor: pointer;
    }
    .billing-toggle button.active {
      background: var(--navy);
      color: var(--white);
    }
    table {
      width: 100%;
      border-collapse: collapse;
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    th, td {
      padding: 16px 18px;
      border-bottom: 1px solid var(--gray-200);
      text-align: left;
      font-size: 15px;
    }
    th { background: var(--gray-50); font-family: 'Sora', sans-serif; }
    tr:last-child td { border-bottom: 0; }
    .form-grid {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 24px;
      align-items: start;
    }
    .form-card, .sidebar-stack { display: grid; gap: 20px; }
    .input-group { display: grid; gap: 8px; margin-bottom: 16px; }
    label { font-weight: 700; color: var(--gray-700); }
    input, textarea {
      width: 100%;
      border: 1px solid var(--gray-300);
      border-radius: 12px;
      padding: 14px 16px;
      font: inherit;
      background: var(--white);
    }
    textarea { min-height: 140px; resize: vertical; }
    .thank-you {
      display: none;
      background: rgba(0,212,170,0.08);
      border: 1px solid rgba(0,212,170,0.18);
      border-radius: 16px;
      padding: 22px;
      color: var(--navy);
      font-weight: 700;
      margin-top: 16px;
    }
    .form-honeypot {
      position: absolute !important;
      left: -9999px !important;
      width: 1px !important;
      height: 1px !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
    .form-status {
      display: block;
      margin-top: 14px;
      padding: 14px 16px;
      border-radius: 14px;
      font-size: 14px;
      line-height: 1.5;
      font-weight: 600;
    }
    .form-status[hidden] {
      display: none;
    }
    .form-status.is-loading {
      background: rgba(11,18,34,0.04);
      border: 1px solid rgba(11,18,34,0.08);
      color: var(--gray-700);
    }
    .form-status.is-success {
      background: rgba(0,212,170,0.08);
      border: 1px solid rgba(0,212,170,0.18);
      color: var(--navy);
    }
    .form-status.is-error {
      background: rgba(255,107,107,0.1);
      border: 1px solid rgba(255,107,107,0.18);
      color: #9f1239;
    }
    .btn[disabled],
    .btn.is-loading {
      cursor: wait;
      opacity: 0.82;
      transform: none !important;
      box-shadow: none !important;
    }
    .contact-hero-grid,
    .contact-channel-grid,
    .contact-proof-grid {
      display: grid;
      gap: 22px;
    }
    .contact-hero-grid {
      grid-template-columns: 1.02fr 0.98fr;
      align-items: center;
    }
    .contact-channel-grid,
    .contact-proof-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .contact-stage {
      background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 28px;
      padding: 28px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.22);
      color: var(--white);
    }
    .contact-stage-grid {
      display: grid;
      gap: 14px;
      margin-top: 18px;
    }
    .contact-stage-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 18px;
      padding: 16px;
    }
    .contact-stage-item p {
      color: rgba(255,255,255,0.76);
      margin: 4px 0 0;
      font-size: 14px;
    }
    .contact-channel-card,
    .contact-proof-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 22px;
      padding: 24px;
      box-shadow: var(--shadow);
      height: 100%;
    }
    .contact-proof-card {
      background: linear-gradient(180deg, rgba(0,212,170,0.07), rgba(255,255,255,1));
    }
    .contact-proof-card p,
    .contact-channel-card p {
      color: var(--gray-600);
      margin: 0;
    }
    .contact-socials {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .contact-hero-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
      margin-top: 28px;
    }
    .contact-hero-actions .hero-actions {
      margin: 0;
    }
    .contact-socials-inline {
      margin-top: 0;
      padding-top: 0;
      border-top: 0;
      margin-left: auto;
      justify-content: flex-end;
      align-items: center;
    }
    .contact-social-link {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      display: inline-grid;
      place-items: center;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      color: var(--white);
      transition: 0.22s ease;
    }
    .contact-social-link:hover {
      transform: translateY(-2px);
      background: rgba(0,212,170,0.14);
      border-color: rgba(0,212,170,0.22);
      color: #7eead3;
    }
    .contact-social-link svg {
      width: 19px;
      height: 19px;
      fill: currentColor;
    }
    .legal-copy {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 20px;
      box-shadow: var(--shadow);
      padding: 30px;
    }
    .legal-copy h2,
    .legal-copy h3 {
      margin-top: 34px;
      margin-bottom: 14px;
    }
    .legal-copy h2:first-child,
    .legal-copy h3:first-child {
      margin-top: 0;
    }
    .legal-copy p,
    .legal-copy li {
      color: var(--gray-700);
    }
    .legal-copy ul,
    .legal-copy ol {
      margin: 14px 0 18px 22px;
      padding: 0;
    }
    .legal-copy li + li {
      margin-top: 8px;
    }
    .legal-copy hr {
      border: 0;
      border-top: 1px solid var(--gray-200);
      margin: 24px 0;
    }
    .legal-meta {
      display: inline-flex;
      align-items: center;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(0,212,170,0.12);
      color: var(--teal-dark);
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 18px;
    }
    .legal-intro {
      font-size: 17px;
      color: var(--gray-600);
      margin-bottom: 18px;
    }
    .legal-box {
      background: var(--gray-50);
      border: 1px solid var(--gray-200);
      border-radius: 16px;
      padding: 18px;
      margin: 18px 0;
    }
    .legal-box p:last-child {
      margin-bottom: 0;
    }
    .legal-contact-block {
      background: linear-gradient(180deg, rgba(0,212,170,0.07), rgba(255,255,255,1));
      border: 1px solid var(--gray-200);
      border-radius: 18px;
      padding: 20px;
      margin-top: 18px;
    }
    .footer {
      background: var(--navy);
      color: var(--white);
      padding: 70px 0 28px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 28px;
      margin-bottom: 34px;
    }
    .footer h4 { font-size: 17px; margin-bottom: 14px; }
    .footer p, .footer li, .footer a {
      color: rgba(255,255,255,0.76);
    }
    .footer a {
      cursor: pointer;
    }
    .footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
    .copyright {
      border-top: 1px solid rgba(255,255,255,0.08);
      padding-top: 20px;
      color: rgba(255,255,255,0.62);
      font-size: 14px;
    }
    .preview-bar {
      background: #fff7ed;
      border-bottom: 1px solid #fed7aa;
      color: #9a3412;
      font-weight: 700;
      font-size: 14px;
      padding: 10px 0;
    }
    .center { text-align: center; }
    .small { font-size: 14px; }
        .feature-metric-grid,
    .module-grid,
    .feature-deep-dive,
    .process-grid,
    .security-grid,
    .feature-highlight-grid {
      display: grid;
      gap: 22px;
    }
    .feature-metric-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: stretch;
    }
    .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .feature-highlight-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .feature-deep-dive {
      grid-template-columns: 1.05fr 0.95fr;
      align-items: center;
    }
    .process-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .security-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .metric-card {
      position: relative;
      padding: 28px 26px 24px;
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,0.96));
      border: 1px solid var(--gray-200);
      box-shadow: var(--shadow);
      text-align: left;
      min-height: 210px;
      overflow: hidden;
      transition: 0.25s ease;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
    .metric-card::before {
      content: '';
      position: absolute;
      inset: 0 0 auto 0;
      height: 4px;
      background: linear-gradient(135deg, rgba(0,212,170,0.92), rgba(0,184,148,0.78));
      opacity: 0.9;
    }
    .metric-card::after {
      content: '';
      position: absolute;
      right: -50px;
      top: -50px;
      width: 150px;
      height: 150px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(0,212,170,0.09), transparent 68%);
      pointer-events: none;
    }
    .metric-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
    }
    .metric-card:nth-child(2)::after {
      background: radial-gradient(circle, rgba(11,18,34,0.06), transparent 68%);
    }
    .metric-card:nth-child(3)::after {
      background: radial-gradient(circle, rgba(0,212,170,0.07), transparent 68%);
    }
    .metric-card:nth-child(4)::after {
      background: radial-gradient(circle, rgba(26,39,68,0.08), transparent 70%);
    }
    .metric-kicker {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(0,212,170,0.12);
      color: var(--teal-dark);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }
    .metric-value {
      font-family: 'Sora', sans-serif;
      font-size: 40px;
      line-height: 1.02;
      letter-spacing: -0.04em;
      margin-bottom: 16px;
      color: var(--navy);
      max-width: 220px;
    }
    .metric-card p {
      margin: 0;
      color: var(--gray-600);
      font-size: 18px;
      line-height: 1.55;
      max-width: 250px;
    }
    .module-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 20px;
      padding: 26px;
      box-shadow: var(--shadow);
      height: 100%;
    }
    .module-card p { color: var(--gray-600); }
    .feature-visual {
      background: linear-gradient(180deg, rgba(0,212,170,0.08), rgba(11,18,34,0.02));
      border: 1px solid var(--gray-200);
      border-radius: 24px;
      padding: 26px;
      box-shadow: var(--shadow);
    }
    .feature-stack {
      display: grid;
      gap: 14px;
      margin-top: 18px;
    }
    .feature-stack-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      background: rgba(255,255,255,0.72);
      border: 1px solid var(--gray-200);
      border-radius: 16px;
      padding: 16px;
    }
    .feature-step {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 20px;
      padding: 24px;
      box-shadow: var(--shadow);
      height: 100%;
    }
    .step-number {
      width: 36px;
      height: 36px;
      border-radius: 999px;
      display: inline-grid;
      place-items: center;
      background: rgba(0,212,170,0.14);
      color: var(--teal-dark);
      font-family: 'Sora', sans-serif;
      font-weight: 800;
      margin-bottom: 16px;
    }
    .feature-note {
      margin-top: 22px;
      padding: 18px 20px;
      border-radius: 16px;
      background: rgba(0,212,170,0.08);
      border: 1px solid rgba(0,212,170,0.18);
      color: var(--gray-700);
    }
    .security-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 20px;
      padding: 24px;
      box-shadow: var(--shadow);
      height: 100%;
    }
    .mini-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(0,212,170,0.12);
      color: var(--teal-dark);
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 14px;
    }
    .feature-cta-box {
      background: var(--navy);
      color: var(--white);
      border-radius: 28px;
      padding: 38px;
      box-shadow: 0 24px 60px rgba(11,18,34,0.18);
    }
    .feature-cta-box p { color: rgba(255,255,255,0.8); }
    .linked-card {
      cursor: pointer;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .linked-card::after {
      content: '';
      position: absolute;
      inset: auto 0 0 0;
      height: 4px;
      background: linear-gradient(135deg, var(--teal), var(--teal-dark));
      opacity: 0;
      transition: 0.25s ease;
    }
    .linked-card:hover::after { opacity: 1; }
    .card-link-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: auto;
      padding-top: 14px;
      border-top: 1px solid var(--gray-200);
      color: var(--navy);
      font-weight: 800;
    }
    .linked-card > p + .card-link-row,
    .linked-card > ul + .card-link-row {
      margin-top: auto;
      padding-top: 18px;
    }
    .arrow-link {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      display: inline-grid;
      place-items: center;
      background: rgba(0,212,170,0.12);
      color: var(--teal-dark);
      font-size: 16px;
      font-weight: 900;
    }
    .integration-hero-grid,
    .integration-category-grid,
    .integration-flow-grid,
    .integration-benefit-grid,
    .integration-api-grid {
      display: grid;
      gap: 22px;
    }
    .integration-hero-grid {
      grid-template-columns: 1.05fr 0.95fr;
      align-items: center;
    }
    .integration-category-grid,
    .integration-benefit-grid,
    .integration-api-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .integration-flow-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .integration-highlight {
      background: linear-gradient(180deg, rgba(0,212,170,0.08), rgba(11,18,34,0.03));
      border: 1px solid var(--gray-200);
      border-radius: 26px;
      padding: 28px;
      box-shadow: var(--shadow);
    }
    .integration-stack {
      display: grid;
      gap: 14px;
      margin-top: 18px;
    }
    .integration-stack-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      background: rgba(255,255,255,0.78);
      border: 1px solid var(--gray-200);
      border-radius: 16px;
      padding: 16px;
    }
    .integration-flow-step,
    .integration-info-card,
    .integration-api-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 20px;
      padding: 24px;
      box-shadow: var(--shadow);
      height: 100%;
    }
    .integration-note {
      margin-top: 24px;
      padding: 18px 20px;
      border: 1px solid rgba(0,212,170,0.18);
      border-radius: 16px;
      background: rgba(0,212,170,0.08);
      color: var(--gray-700);
    }
    .integration-mini-list {
      list-style: none;
      padding: 0;
      margin: 16px 0 0;
      display: grid;
      gap: 10px;
    }
    .integration-mini-list li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      color: var(--gray-700);
    }
    .integration-cta-panel {
      background: var(--navy);
      color: var(--white);
      border-radius: 28px;
      padding: 38px;
      box-shadow: 0 24px 60px rgba(11,18,34,0.18);
    }
    .integration-cta-panel p { color: rgba(255,255,255,0.8); }
    .recruiting-hero-grid,
    .recruiting-metric-grid,
    .recruiting-pillar-grid,
    .recruiting-workflow-grid,
    .recruiting-usecase-grid,
    .recruiting-stage-grid {
      display: grid;
      gap: 22px;
    }
    .recruiting-hero-grid {
      grid-template-columns: 1.05fr 0.95fr;
      align-items: center;
    }
    .recruiting-metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .recruiting-pillar-grid,
    .recruiting-usecase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .recruiting-workflow-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .recruiting-stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .recruiting-highlight {
      background: linear-gradient(180deg, rgba(0,212,170,0.08), rgba(11,18,34,0.03));
      border: 1px solid var(--gray-200);
      border-radius: 26px;
      padding: 28px;
      box-shadow: var(--shadow);
    }
    .recruiting-stack {
      display: grid;
      gap: 14px;
      margin-top: 18px;
    }
    .recruiting-stack-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      background: rgba(255,255,255,0.78);
      border: 1px solid var(--gray-200);
      border-radius: 16px;
      padding: 16px;
    }
    .recruiting-pillar-card,
    .recruiting-step-card,
    .recruiting-usecase-card,
    .recruiting-stage-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 20px;
      padding: 24px;
      box-shadow: var(--shadow);
      height: 100%;
    }
    .recruiting-note {
      margin-top: 24px;
      padding: 18px 20px;
      border: 1px solid rgba(0,212,170,0.18);
      border-radius: 16px;
      background: rgba(0,212,170,0.08);
      color: var(--gray-700);
    }
    .recruiting-cta-panel {
      background: var(--navy);
      color: var(--white);
      border-radius: 28px;
      padding: 38px;
      box-shadow: 0 24px 60px rgba(11,18,34,0.18);
    }
    .recruiting-cta-panel p { color: rgba(255,255,255,0.8); }
    .hr-hero-grid,
    .hr-metric-grid,
    .hr-pillar-grid,
    .hr-workflow-grid,
    .hr-benefit-grid,
    .hr-scope-grid {
      display: grid;
      gap: 22px;
    }
    .hr-hero-grid {
      grid-template-columns: 1.05fr 0.95fr;
      align-items: center;
    }
    .hr-metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hr-pillar-grid,
    .hr-benefit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hr-workflow-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hr-scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hr-highlight {
      background: linear-gradient(180deg, rgba(0,212,170,0.08), rgba(11,18,34,0.03));
      border: 1px solid var(--gray-200);
      border-radius: 26px;
      padding: 28px;
      box-shadow: var(--shadow);
    }
    .hr-stack {
      display: grid;
      gap: 14px;
      margin-top: 18px;
    }
    .hr-stack-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      background: rgba(255,255,255,0.78);
      border: 1px solid var(--gray-200);
      border-radius: 16px;
      padding: 16px;
    }
    .hr-pillar-card,
    .hr-step-card,
    .hr-benefit-card,
    .hr-scope-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 20px;
      padding: 24px;
      box-shadow: var(--shadow);
      height: 100%;
    }
    .hr-note {
      margin-top: 24px;
      padding: 18px 20px;
      border: 1px solid rgba(0,212,170,0.18);
      border-radius: 16px;
      background: rgba(0,212,170,0.08);
      color: var(--gray-700);
    }
    .hr-cta-panel {
      background: var(--navy);
      color: var(--white);
      border-radius: 28px;
      padding: 38px;
      box-shadow: 0 24px 60px rgba(11,18,34,0.18);
    }
    .hr-cta-panel p { color: rgba(255,255,255,0.8); }
    .onboarding-hero-grid,
    .onboarding-metric-grid,
    .onboarding-pillar-grid,
    .onboarding-workflow-grid,
    .onboarding-benefit-grid,
    .onboarding-scope-grid {
      display: grid;
      gap: 22px;
    }
    .onboarding-hero-grid {
      grid-template-columns: 1.05fr 0.95fr;
      align-items: center;
    }
    .onboarding-metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .onboarding-pillar-grid,
    .onboarding-benefit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .onboarding-workflow-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .onboarding-scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .onboarding-highlight {
      background: linear-gradient(180deg, rgba(0,212,170,0.08), rgba(11,18,34,0.03));
      border: 1px solid var(--gray-200);
      border-radius: 26px;
      padding: 28px;
      box-shadow: var(--shadow);
    }
    .onboarding-stack {
      display: grid;
      gap: 14px;
      margin-top: 18px;
    }
    .onboarding-stack-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      background: rgba(255,255,255,0.78);
      border: 1px solid var(--gray-200);
      border-radius: 16px;
      padding: 16px;
    }
    .onboarding-pillar-card,
    .onboarding-step-card,
    .onboarding-benefit-card,
    .onboarding-scope-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 20px;
      padding: 24px;
      box-shadow: var(--shadow);
      height: 100%;
    }
    .onboarding-note {
      margin-top: 24px;
      padding: 18px 20px;
      border: 1px solid rgba(0,212,170,0.18);
      border-radius: 16px;
      background: rgba(0,212,170,0.08);
      color: var(--gray-700);
    }
    .onboarding-cta-panel {
      background: var(--navy);
      color: var(--white);
      border-radius: 28px;
      padding: 38px;
      box-shadow: 0 24px 60px rgba(11,18,34,0.18);
    }
    .onboarding-cta-panel p { color: rgba(255,255,255,0.8); }
    .brand-hero-grid,
    .brand-signal-grid,
    .brand-story-grid,
    .brand-channel-grid,
    .brand-journey-grid,
    .brand-compare-grid,
    .brand-proof-grid {
      display: grid;
      gap: 22px;
    }
    .brand-hero-grid {
      grid-template-columns: 1fr 1fr;
      align-items: center;
    }
    .brand-signal-grid,
    .brand-proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .brand-story-grid,
    .brand-compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .brand-channel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .brand-journey-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .brand-stage {
      background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 24px;
      padding: 28px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.22);
    }
    .brand-stage-card {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 18px;
      padding: 18px;
      margin-top: 14px;
      color: rgba(255,255,255,0.86);
    }
    .brand-signal-card,
    .brand-story-card,
    .brand-channel-card,
    .brand-journey-card,
    .brand-compare-card,
    .brand-proof-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 22px;
      padding: 24px;
      box-shadow: var(--shadow);
      height: 100%;
    }
    .brand-story-card.featured {
      background: linear-gradient(135deg, rgba(0,212,170,0.08), rgba(11,18,34,0.03));
    }
    .brand-channel-card {
      text-align: left;
      position: relative;
      overflow: hidden;
    }
    .brand-channel-card::before {
      content: '';
      position: absolute;
      inset: 0 0 auto 0;
      height: 4px;
      background: var(--gradient);
    }
    .brand-channel-type {
      display: inline-flex;
      align-items: center;
      padding: 7px 11px;
      border-radius: 999px;
      background: var(--gray-100);
      color: var(--gray-700);
      font-size: 12px;
      font-weight: 800;
      margin-top: 10px;
    }
    .brand-signal-number {
      font-family: 'Sora', sans-serif;
      font-size: 38px;
      line-height: 1;
      letter-spacing: -0.03em;
      color: var(--navy);
      margin-bottom: 12px;
    }
    .brand-journey-card {
      position: relative;
      padding-top: 56px;
    }
    .brand-journey-point {
      position: absolute;
      top: 18px;
      left: 22px;
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 8px rgba(0,212,170,0.12);
    }
    .brand-journey-card::after {
      content: '';
      position: absolute;
      top: 28px;
      right: -22px;
      width: 44px;
      height: 2px;
      background: linear-gradient(90deg, rgba(0,212,170,0.45), rgba(0,212,170,0));
    }
    .brand-journey-grid .brand-journey-card:last-child::after { display: none; }
    .brand-compare-card.bad {
      background: linear-gradient(180deg, rgba(255,107,107,0.06), rgba(255,255,255,1));
    }
    .brand-compare-card.good {
      background: linear-gradient(180deg, rgba(0,212,170,0.08), rgba(255,255,255,1));
    }
    .brand-compare-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
    }
    .brand-tag-soft {
      display: inline-flex;
      align-items: center;
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
    }
    .brand-tag-soft.bad {
      background: rgba(255,107,107,0.12);
      color: #b42318;
    }
    .brand-tag-soft.good {
      background: rgba(0,212,170,0.12);
      color: var(--teal-dark);
    }
    .brand-proof-card p,
    .brand-signal-card p,
    .brand-story-card p,
    .brand-channel-card p,
    .brand-journey-card p,
    .brand-compare-card p { color: var(--gray-600); }
    .brand-cta-panel {
      background: linear-gradient(135deg, var(--navy), var(--navy-light));
      color: var(--white);
      border-radius: 32px;
      padding: 42px;
      box-shadow: 0 24px 60px rgba(11,18,34,0.22);
    }
    .brand-cta-panel p { color: rgba(255,255,255,0.8); }
    .securityhub-hero-grid,
    .securityhub-principle-grid,
    .securityhub-scope-grid,
    .securityhub-story-grid,
    .securityhub-procurement-grid,
    .securityhub-commitment-grid {
      display: grid;
      gap: 22px;
    }
    .securityhub-hero-grid {
      grid-template-columns: 1.02fr 0.98fr;
      align-items: center;
    }
    .securityhub-principle-grid,
    .securityhub-procurement-grid,
    .securityhub-commitment-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .securityhub-scope-grid,
    .securityhub-story-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .securityhub-command {
      background: linear-gradient(160deg, rgba(6,12,25,0.96), rgba(19,29,47,0.94));
      color: var(--white);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 28px;
      padding: 28px;
      box-shadow: 0 28px 70px rgba(0,0,0,0.28);
      overflow: hidden;
      position: relative;
    }
    .securityhub-command::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 20% 18%, rgba(0,212,170,0.18), transparent 28%), radial-gradient(circle at 78% 24%, rgba(0,212,170,0.08), transparent 22%);
      pointer-events: none;
    }
    .securityhub-command > * { position: relative; }
    .securityhub-command-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 18px;
    }
    .securityhub-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.9);
      font-size: 12px;
      font-weight: 800;
    }
    .securityhub-status-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #7eead3;
      box-shadow: 0 0 0 6px rgba(126,234,211,0.16);
    }
    .securityhub-layer-stack {
      display: grid;
      gap: 14px;
      margin-top: 18px;
    }
    .securityhub-layer {
      display: grid;
      grid-template-columns: 84px 1fr;
      gap: 16px;
      align-items: start;
      padding: 16px;
      border-radius: 18px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
    }
    .securityhub-layer-label {
      font-family: 'Sora', sans-serif;
      font-size: 13px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #7eead3;
      margin-top: 2px;
    }
    .securityhub-layer p {
      color: rgba(255,255,255,0.76);
      margin: 4px 0 0;
      font-size: 14px;
    }
    .securityhub-card,
    .securityhub-story-card,
    .securityhub-procurement-card,
    .securityhub-commitment-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 22px;
      padding: 24px;
      box-shadow: var(--shadow);
      height: 100%;
    }
    .securityhub-card p,
    .securityhub-story-card p,
    .securityhub-procurement-card p,
    .securityhub-commitment-card p { color: var(--gray-600); }
    .securityhub-card h3,
    .securityhub-story-card h3,
    .securityhub-procurement-card h3,
    .securityhub-commitment-card h3 { margin-bottom: 10px; }
    .securityhub-icon-wrap {
      width: 54px;
      height: 54px;
      border-radius: 16px;
      display: inline-grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(0,212,170,0.14), rgba(0,212,170,0.08));
      color: var(--teal-dark);
      margin-bottom: 16px;
      font-size: 25px;
      font-weight: 900;
    }
    .securityhub-scope-block {
      background: linear-gradient(180deg, rgba(0,212,170,0.08), rgba(11,18,34,0.03));
      border: 1px solid var(--gray-200);
      border-radius: 26px;
      padding: 28px;
      box-shadow: var(--shadow);
      height: 100%;
    }
    .securityhub-scope-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 16px;
    }
    .securityhub-scope-tag {
      display: inline-flex;
      align-items: center;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(0,212,170,0.12);
      color: var(--teal-dark);
      font-size: 12px;
      font-weight: 800;
    }
    .securityhub-story-card {
      position: relative;
      overflow: hidden;
    }
    .securityhub-story-card::before {
      content: '';
      position: absolute;
      inset: 0 0 auto 0;
      height: 4px;
      background: var(--gradient);
    }
    .securityhub-story-step {
      display: inline-grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      background: rgba(0,212,170,0.12);
      color: var(--teal-dark);
      font-family: 'Sora', sans-serif;
      font-weight: 800;
      margin-bottom: 14px;
    }
    .securityhub-note {
      margin-top: 24px;
      padding: 18px 20px;
      border-radius: 16px;
      background: rgba(11,18,34,0.04);
      border: 1px solid var(--gray-200);
      color: var(--gray-700);
    }
    .securityhub-cta-panel {
      background: linear-gradient(145deg, #07101f, #16243d);
      color: var(--white);
      border-radius: 32px;
      padding: 42px;
      box-shadow: 0 28px 70px rgba(11,18,34,0.22);
    }
    .securityhub-cta-panel p { color: rgba(255,255,255,0.82); }
    .offer-hero-grid,
    .offer-promise-grid,
    .offer-proof-grid,
    .offer-strip-grid {
      display: grid;
      gap: 22px;
    }
    .offer-hero-grid {
      grid-template-columns: 1.02fr 0.98fr;
      align-items: center;
    }
    .offer-promise-grid,
    .offer-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .offer-strip-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .offer-stage {
      background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 28px;
      padding: 28px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.22);
    }
    .offer-stage-grid {
      display: grid;
      gap: 14px;
      margin-top: 18px;
    }
    .offer-stage-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 18px;
      padding: 16px;
      color: rgba(255,255,255,0.88);
    }
    .offer-stage-item p {
      color: rgba(255,255,255,0.74);
      margin: 4px 0 0;
      font-size: 14px;
    }
    .offer-strip-card,
    .offer-promise-card,
    .offer-proof-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 22px;
      padding: 24px;
      box-shadow: var(--shadow);
      height: 100%;
    }
    .offer-strip-card {
      text-align: center;
      background: linear-gradient(180deg, rgba(0,212,170,0.07), rgba(255,255,255,1));
    }
    .offer-proof-card.accent {
      background: linear-gradient(135deg, rgba(0,212,170,0.08), rgba(11,18,34,0.03));
    }
    .offer-number {
      font-family: 'Sora', sans-serif;
      font-size: 34px;
      letter-spacing: -0.03em;
      color: var(--navy);
      margin-bottom: 8px;
    }
    .offer-tag {
      display: inline-flex;
      align-items: center;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(0,212,170,0.12);
      color: var(--teal-dark);
      font-size: 12px;
      font-weight: 800;
      margin-bottom: 12px;
    }
    .offer-note {
      margin-top: 24px;
      padding: 18px 20px;
      border-radius: 16px;
      background: rgba(0,212,170,0.08);
      border: 1px solid rgba(0,212,170,0.16);
      color: var(--gray-700);
    }
    .offer-cta-panel {
      background: linear-gradient(145deg, var(--navy), var(--navy-light));
      color: var(--white);
      border-radius: 32px;
      padding: 40px;
      box-shadow: 0 24px 60px rgba(11,18,34,0.2);
    }
    .offer-cta-panel p { color: rgba(255,255,255,0.82); }
    .setup-hero-grid,
    .setup-flow-grid,
    .setup-screen-grid,
    .setup-benefit-grid {
      display: grid;
      gap: 22px;
    }
    .setup-hero-grid {
      grid-template-columns: 1.02fr 0.98fr;
      align-items: center;
    }
    .setup-flow-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .setup-screen-grid,
    .setup-benefit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .setup-stage {
      background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 28px;
      padding: 28px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.22);
      color: var(--white);
    }
    .setup-stage-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 18px;
      flex-wrap: wrap;
    }
    .setup-stage-badge {
      display: inline-flex;
      align-items: center;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      color: #7eead3;
      font-size: 12px;
      font-weight: 800;
    }
    .setup-stage-grid {
      display: grid;
      gap: 14px;
    }
    .setup-stage-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 18px;
      padding: 16px;
    }
    .setup-stage-item p {
      color: rgba(255,255,255,0.76);
      margin: 4px 0 0;
      font-size: 14px;
    }
    .setup-step-card,
    .setup-screen-card,
    .setup-benefit-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 22px;
      padding: 24px;
      box-shadow: var(--shadow);
      height: 100%;
    }
    .setup-step-card {
      position: relative;
      overflow: hidden;
    }
    .setup-step-card::before {
      content: '';
      position: absolute;
      inset: 0 0 auto 0;
      height: 4px;
      background: var(--gradient);
    }
    .setup-step-no {
      display: inline-grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border-radius: 999px;
      background: rgba(0,212,170,0.12);
      color: var(--teal-dark);
      font-family: 'Sora', sans-serif;
      font-weight: 800;
      margin-bottom: 16px;
    }
    .setup-screen-card {
      background: linear-gradient(180deg, rgba(0,212,170,0.07), rgba(255,255,255,1));
    }
    .setup-window {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 12px 24px rgba(15,23,42,0.06);
    }
    .setup-window-top {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--gray-200);
      background: var(--gray-50);
    }
    .setup-dot {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: var(--gray-300);
    }
    .setup-window-body {
      padding: 16px;
      display: grid;
      gap: 10px;
    }
    .setup-line {
      height: 10px;
      border-radius: 999px;
      background: var(--gray-100);
      overflow: hidden;
    }
    .setup-line > span {
      display: block;
      height: 100%;
      background: linear-gradient(135deg, rgba(0,212,170,0.8), rgba(0,184,148,0.7));
      border-radius: 999px;
    }
    .setup-chip-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 4px;
    }
    .setup-chip {
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(0,212,170,0.12);
      color: var(--teal-dark);
      font-size: 12px;
      font-weight: 800;
    }
    .setup-note {
      margin-top: 24px;
      padding: 18px 20px;
      border-radius: 16px;
      background: rgba(0,212,170,0.08);
      border: 1px solid rgba(0,212,170,0.16);
      color: var(--gray-700);
    }
    .setup-cta-panel {
      background: linear-gradient(145deg, var(--navy), var(--navy-light));
      color: var(--white);
      border-radius: 32px;
      padding: 40px;
      box-shadow: 0 24px 60px rgba(11,18,34,0.2);
    }
    .setup-cta-panel p { color: rgba(255,255,255,0.82); }
    .home-proof-grid,
    .home-value-grid,
    .home-advantage-grid,
    .home-flow-grid {
      display: grid;
      gap: 22px;
    }
    .home-proof-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .home-value-grid,
    .home-advantage-grid,
    .home-flow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-proof-card,
    .home-value-card,
    .home-flow-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 22px;
      padding: 26px;
      box-shadow: var(--shadow);
      height: 100%;
    }
    .home-proof-card {
      text-align: center;
      background: linear-gradient(180deg, rgba(0,212,170,0.07), rgba(255,255,255,1));
    }
    .home-proof-number {
      font-family: 'Sora', sans-serif;
      font-size: 38px;
      line-height: 1;
      letter-spacing: -0.04em;
      color: var(--navy);
      margin-bottom: 12px;
    }
    .home-proof-card p,
    .home-value-card p,
    .home-flow-card p {
      margin: 0;
      color: var(--gray-600);
    }
    .home-value-card {
      position: relative;
      overflow: hidden;
    }
    .home-value-card::before,
    .home-flow-card::before {
      content: '';
      position: absolute;
      inset: 0 0 auto 0;
      height: 4px;
      background: var(--gradient);
    }
    .home-value-card h3,
    .home-flow-card h3 {
      margin-bottom: 10px;
    }
    .home-advantage-card {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 22px;
      padding: 26px;
      box-shadow: none;
      height: 100%;
    }
    .home-advantage-card h3 {
      color: var(--white);
      margin-bottom: 10px;
    }
    .home-advantage-card p {
      margin: 0;
      color: rgba(255,255,255,0.76);
    }
    .home-advantage-tag {
      display: inline-flex;
      align-items: center;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      color: #7eead3;
      font-size: 12px;
      font-weight: 800;
      margin-bottom: 14px;
    }
    .home-flow-card {
      position: relative;
      padding-top: 64px;
    }
    .home-flow-step {
      position: absolute;
      top: 22px;
      left: 26px;
      width: 32px;
      height: 32px;
      border-radius: 999px;
      display: inline-grid;
      place-items: center;
      background: rgba(0,212,170,0.12);
      color: var(--teal-dark);
      font-family: 'Sora', sans-serif;
      font-weight: 800;
      font-size: 14px;
    }
    .home-section-note {
      margin-top: 24px;
      padding: 18px 20px;
      border-radius: 16px;
      background: rgba(0,212,170,0.08);
      border: 1px solid rgba(0,212,170,0.16);
      color: var(--gray-700);
      font-weight: 600;
    }

    .de-only.hidden-lang { display: none !important; }
    .hr-wissen-hero {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 24px;
      align-items: center;
    }
    .hr-wissen-stage {
      background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 28px;
      padding: 28px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.22);
      color: var(--white);
    }
    .hr-wissen-stage-grid {
      display: grid;
      gap: 14px;
      margin-top: 18px;
    }
    .hr-wissen-stage-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 18px;
      padding: 16px;
    }
    .hr-wissen-stage-item p {
      color: rgba(255,255,255,0.76);
      margin: 4px 0 0;
      font-size: 14px;
    }
    .hr-wissen-toolbar {
      display: flex;
      gap: 16px;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }
    .hr-wissen-search-wrap {
      flex: 1 1 520px;
      position: relative;
    }
    .hr-wissen-search {
      width: 100%;
      min-height: 58px;
      border-radius: 18px;
      border: 1px solid var(--gray-300);
      background: var(--white);
      padding: 0 18px;
      font: inherit;
      font-size: 16px;
      box-shadow: var(--shadow);
    }
    .hr-wissen-count {
      color: var(--gray-600);
      font-weight: 700;
    }
    .hr-wissen-letterbar {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 24px;
    }
    .hr-wissen-letter {
      min-width: 42px;
      min-height: 42px;
      border-radius: 999px;
      border: 1px solid var(--gray-300);
      background: var(--white);
      color: var(--gray-700);
      font-weight: 700;
      cursor: pointer;
      padding: 0 14px;
      transition: 0.2s ease;
    }
    .hr-wissen-letter:hover,
    .hr-wissen-letter.active {
      border-color: rgba(0,212,170,0.3);
      background: rgba(0,212,170,0.08);
      color: var(--teal-dark);
    }
    .hr-wissen-grid {
      display: grid;
      gap: 18px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .hr-wissen-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 22px;
      padding: 24px;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      gap: 14px;
      min-height: 100%;
      cursor: pointer;
      transition: 0.22s ease;
    }
    .hr-wissen-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(0,212,170,0.24);
    }
    .hr-wissen-term {
      display: inline-flex;
      align-items: center;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(0,212,170,0.12);
      color: var(--teal-dark);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      width: fit-content;
      margin-bottom: 4px;
    }
    .hr-wissen-card h3 {
      font-size: 24px;
      margin: 0;
    }
    .hr-wissen-card p {
      margin: 0;
      color: var(--gray-600);
    }
    .hr-wissen-card-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 10px;
    }
    .hr-wissen-card-actions a,
    .hr-wissen-card-actions button {
      font-weight: 800;
      color: var(--navy);
      cursor: pointer;
      background: transparent;
      border: 0;
      padding: 0;
      font: inherit;
    }
    .hr-wissen-entry-wrap {
      display: grid;
      gap: 24px;
    }
    .hr-wissen-entry-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 24px;
      padding: 32px;
      box-shadow: var(--shadow);
    }
    .hr-wissen-entry-meta {
      display: inline-flex;
      align-items: center;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(0,212,170,0.12);
      color: var(--teal-dark);
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 18px;
    }
    .hr-wissen-entry-card p {
      color: var(--gray-700);
      font-size: 18px;
      line-height: 1.75;
      margin: 0 0 18px;
    }
    .hr-wissen-entry-card p:last-child {
      margin-bottom: 0;
    }
    .hr-wissen-entry-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 28px;
    }
    .hr-wissen-entry-side {
      background: linear-gradient(180deg, rgba(0,212,170,0.07), rgba(255,255,255,1));
      border: 1px solid var(--gray-200);
      border-radius: 24px;
      padding: 28px;
      box-shadow: var(--shadow);
    }
    .hr-wissen-entry-side p {
      color: var(--gray-600);
      margin: 0 0 16px;
    }
    .hr-wissen-entry-wrap {
      grid-template-columns: minmax(0, 1.24fr) minmax(280px, 0.76fr);
      align-items: start;
    }
    .hr-wissen-article {
      display: grid;
      gap: 24px;
    }
    .hr-wissen-article-copy,
    .hr-wissen-article-section {
      display: grid;
      gap: 0;
    }
    .hr-wissen-entry-card h3 {
      font-size: 28px;
      margin: 0 0 14px;
    }
    .hr-wissen-entry-card .hr-wissen-article-copy h3,
    .hr-wissen-entry-card .hr-wissen-article-section h3,
    .hr-wissen-entry-card .hr-wissen-seo-box h3,
    .hr-wissen-entry-card .hr-wissen-faq-box h3,
    .hr-wissen-entry-card .hr-wissen-related-box h3,
    .hr-wissen-entry-side h3 {
      font-size: 24px;
      line-height: 1.2;
      margin-top: 0;
      margin-bottom: 14px;
    }
    .hr-wissen-entry-card ul {
      margin: 0 0 20px 22px;
      padding: 0;
      color: var(--gray-700);
    }
    .hr-wissen-entry-card li + li {
      margin-top: 10px;
    }
    .hr-wissen-entry-card strong {
      color: var(--gray-800);
    }
    .hr-wissen-seo-grid {
      display: grid;
      gap: 18px;
    }
    .hr-wissen-seo-box,
    .hr-wissen-faq-box,
    .hr-wissen-related-box {
      background: linear-gradient(180deg, rgba(0,212,170,0.06), rgba(255,255,255,1));
      border: 1px solid var(--gray-200);
      border-radius: 22px;
      padding: 24px;
      box-shadow: var(--shadow);
    }
    .hr-wissen-faq-list {
      display: grid;
      gap: 14px;
      margin-top: 18px;
    }
    .hr-wissen-faq-item {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 18px;
      padding: 18px;
    }
    .hr-wissen-faq-item strong {
      display: block;
      margin-bottom: 8px;
      font-size: 17px;
      line-height: 1.45;
    }
    .hr-wissen-faq-item p {
      margin-bottom: 0;
      font-size: 16px;
      line-height: 1.7;
    }
    .hr-wissen-related-links,
    .hr-wissen-side-links {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 18px;
    }
    .hr-wissen-side-links {
      display: grid;
      gap: 10px;
      margin-top: 18px;
      margin-bottom: 22px;
    }
    .hr-wissen-related-link {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 48px;
      padding: 0 16px;
      border-radius: 999px;
      border: 1px solid var(--gray-300);
      background: var(--white);
      color: var(--gray-800);
      font-weight: 700;
      font-size: 14px;
      cursor: pointer;
      transition: 0.22s ease;
      font-family: 'DM Sans', sans-serif;
    }
    .hr-wissen-related-link:hover {
      border-color: rgba(0,212,170,0.28);
      background: rgba(0,212,170,0.08);
      color: var(--teal-dark);
    }
    .hr-wissen-related-link-stack {
      width: 100%;
      border-radius: 16px;
      justify-content: space-between;
    }
    .hr-wissen-conversion-box {
      background: linear-gradient(145deg, var(--navy), var(--navy-light));
      color: var(--white);
      border-radius: 28px;
      padding: 30px;
      box-shadow: 0 24px 60px rgba(11,18,34,0.18);
    }
    .hr-wissen-conversion-box p {
      color: rgba(255,255,255,0.82);
      font-size: 17px;
      line-height: 1.7;
      margin-bottom: 0;
    }
    .hr-wissen-conversion-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 22px;
    }
    .hr-wissen-conversion-actions .btn {
      min-width: 220px;
    }
    .hr-wissen-side-cta {
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid var(--gray-200);
    }
    .hr-wissen-side-cta p {
      margin-bottom: 16px;
    }
    .hr-wissen-longform {
      display: grid;
      gap: 22px;
    }
    .hr-wissen-longform-section {
      padding-bottom: 6px;
    }
    .hr-wissen-longform-section:last-child {
      padding-bottom: 0;
    }
    .hr-wissen-longform-points {
      margin: 8px 0 18px 22px;
      padding: 0;
    }
    .hr-wissen-longform-points li {
      margin-top: 8px;
    }
    @media (max-width: 1024px) {
      .hr-wissen-entry-wrap {
        grid-template-columns: 1fr;
      }
    }
    .hr-wissen-empty {
      grid-column: 1 / -1;
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 20px;
      padding: 26px;
      color: var(--gray-600);
      box-shadow: var(--shadow);
    }
    .table-scroll {
      width: 100%;
      overflow-x: auto;
    }
    .pricing-detail-table th:not(:first-child),
    .pricing-detail-table td:not(:first-child) {
      text-align: center;
      width: 14%;
      white-space: nowrap;
      vertical-align: middle;
    }
    .pricing-detail-table td:first-child {
      width: 58%;
      vertical-align: top;
    }
    .pricing-matrix-intro {
      margin: 0 0 22px;
      color: var(--gray-600);
      max-width: 980px;
    }
    .matrix-group-row td {
      background: linear-gradient(90deg, rgba(0,212,170,0.12), rgba(0,212,170,0.04));
      color: var(--navy);
      font-family: 'Sora', sans-serif;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -0.02em;
      padding-top: 18px;
      padding-bottom: 18px;
    }
    .matrix-feature-title {
      display: block;
      font-weight: 700;
      color: var(--gray-800);
      margin-bottom: 4px;
    }
    .matrix-feature-copy {
      display: block;
      color: var(--gray-600);
      font-size: 14px;
      line-height: 1.55;
    }
    .matrix-yes,
    .matrix-no {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 34px;
      min-height: 34px;
      border-radius: 999px;
      font-weight: 800;
      font-size: 15px;
    }
    .matrix-yes {
      background: rgba(0,212,170,0.14);
      color: var(--teal-dark);
    }
    .matrix-no {
      background: var(--gray-100);
      color: var(--gray-400);
    }
@media (max-width: 1024px) {
      .pricing-faq-layout {
        grid-template-columns: 1fr;
      }
      .pricing-faq-aside {
        position: static;
        top: auto;
      }
      .feature-metric-grid,
      .module-grid,
      .feature-highlight-grid,
      .process-grid,
      .security-grid,
      .feature-deep-dive,
      .contact-hero-grid,
      .contact-channel-grid,
      .contact-proof-grid,
      .contact-hero-grid,
      .contact-channel-grid,
      .contact-proof-grid,
      .integration-hero-grid,
      .integration-category-grid,
      .integration-flow-grid,
      .integration-benefit-grid,
      .integration-api-grid,
      .recruiting-hero-grid,
      .recruiting-metric-grid,
      .recruiting-pillar-grid,
      .recruiting-workflow-grid,
      .recruiting-usecase-grid,
      .recruiting-stage-grid,
      .hr-hero-grid,
      .hr-metric-grid,
      .hr-pillar-grid,
      .hr-workflow-grid,
      .hr-benefit-grid,
      .hr-scope-grid,
      .onboarding-hero-grid,
      .onboarding-metric-grid,
      .onboarding-pillar-grid,
      .onboarding-workflow-grid,
      .onboarding-benefit-grid,
      .onboarding-scope-grid,
      .brand-hero-grid,
      .brand-signal-grid,
      .brand-story-grid,
      .brand-channel-grid,
      .brand-journey-grid,
      .brand-compare-grid,
      .brand-proof-grid,
      .securityhub-hero-grid,
      .securityhub-principle-grid,
      .securityhub-scope-grid,
      .securityhub-story-grid,
      .securityhub-procurement-grid,
      .securityhub-commitment-grid,
      .offer-hero-grid,
      .offer-promise-grid,
      .offer-proof-grid,
      .offer-strip-grid,
      .setup-hero-grid,
      .setup-flow-grid,
      .setup-screen-grid,
      .setup-benefit-grid,
      .home-proof-grid,
      .home-value-grid,
      .home-advantage-grid,
      .home-flow-grid,
      .pricing-inline-proof,
      .pricing-proof-grid,
      .pricing-fit-grid,
      .hero-grid, .form-grid, .footer-grid, .cards-4, .stats-grid, .cards-3, .integration-grid, .pricing-grid, .cards-2 {
        grid-template-columns: 1fr 1fr;
      }
      .hero-grid, .form-grid, .footer-grid, .cards-4, .stats-grid, .cards-3, .integration-grid, .pricing-grid, .cards-2 {
        grid-template-columns: 1fr 1fr;
      }
      .hero-grid { grid-template-columns: 1fr; }
      .pricing-card.highlight { transform: none; }
      .hr-wissen-hero,
      .hr-wissen-grid {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 768px) {
      .site-header.menu-open {
        background: rgba(11, 18, 34, 0.98);
      }
      .nav {
        min-height: 72px;
        padding: 12px 0;
        gap: 12px;
      }
      .logo {
        flex: 1 1 auto;
      }
      .nav-desktop {
        display: none;
      }
      .mobile-nav-toggle {
        display: inline-flex;
      }
      .mobile-menu-panel {
        display: block;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        border-top: 1px solid rgba(255,255,255,0.08);
        background: rgba(11, 18, 34, 0.98);
        transition: max-height 0.28s ease, opacity 0.2s ease;
      }
      .site-header.menu-open .mobile-menu-panel {
        max-height: calc(100vh - 72px);
        opacity: 1;
        pointer-events: auto;
      }
      .mobile-menu-inner {
        padding: 16px 0 24px;
      }
      .mobile-nav-actions .lang-switch {
        width: 100%;
        justify-content: center;
      }
      .mobile-nav-actions .lang-switch button {
        flex: 1 1 0;
      }
      .contact-hero-actions {
        align-items: flex-start;
      }
      .contact-socials-inline {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
      }
      .hero, .subhero, .section { padding: 68px 0; }
      .cards-4, .stats-grid, .cards-3, .integration-grid, .pricing-grid, .cards-2, .form-grid, .footer-grid, .contact-hero-grid, .contact-channel-grid, .contact-proof-grid, .integration-hero-grid, .integration-category-grid, .integration-flow-grid, .integration-benefit-grid, .integration-api-grid, .recruiting-hero-grid, .recruiting-metric-grid, .recruiting-pillar-grid, .recruiting-workflow-grid, .recruiting-usecase-grid, .recruiting-stage-grid, .hr-hero-grid, .hr-metric-grid, .hr-pillar-grid, .hr-workflow-grid, .hr-benefit-grid, .hr-scope-grid, .onboarding-hero-grid, .onboarding-metric-grid, .onboarding-pillar-grid, .onboarding-workflow-grid, .onboarding-benefit-grid, .onboarding-scope-grid, .brand-hero-grid, .brand-signal-grid, .brand-story-grid, .brand-channel-grid, .brand-journey-grid, .brand-compare-grid, .brand-proof-grid, .securityhub-hero-grid, .securityhub-principle-grid, .securityhub-scope-grid, .securityhub-story-grid, .securityhub-procurement-grid, .securityhub-commitment-grid, .offer-hero-grid, .offer-promise-grid, .offer-proof-grid, .offer-strip-grid, .setup-hero-grid, .setup-flow-grid, .setup-screen-grid, .setup-benefit-grid, .home-proof-grid, .home-value-grid, .home-advantage-grid, .home-flow-grid, .pricing-inline-proof, .pricing-proof-grid, .pricing-fit-grid { grid-template-columns: 1fr; }
      .section-header, .cta-panel { display: grid; }
      .container { width: min(100% - 28px, var(--container)); }
      .hr-wissen-search-wrap {
        flex-basis: 100%;
      }
      .hr-wissen-grid {
        grid-template-columns: 1fr;
      }
      h1 { font-size: 44px; }
      p.lead { font-size: 18px; }
    }

    /* =====================================================
       PRICING PAGE 2.0 — Refined Design System
       Scoped to #page-pricing to avoid affecting other pages
       ===================================================== */

    /* ---------- Atmospheric hero backdrop ---------- */
    #page-pricing .subhero {
      padding: 96px 0 88px;
      background:
        radial-gradient(ellipse 85% 60% at 50% 0%, rgba(0,212,170,0.22), transparent 62%),
        radial-gradient(ellipse 50% 40% at 88% 30%, rgba(0,255,212,0.10), transparent 55%),
        radial-gradient(ellipse 48% 50% at 12% 65%, rgba(126,234,211,0.10), transparent 55%),
        linear-gradient(180deg, var(--navy) 0%, #08101e 100%);
      position: relative;
      overflow: hidden;
    }
    #page-pricing .subhero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
      background-size: 56px 56px;
      -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, rgba(0,0,0,0.75), transparent 72%);
              mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, rgba(0,0,0,0.75), transparent 72%);
      pointer-events: none;
      z-index: 0;
    }
    #page-pricing .subhero::after {
      content: '';
      position: absolute;
      inset: auto 0 -1px 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0,212,170,0.35), transparent);
      z-index: 1;
    }
    #page-pricing .subhero > .container {
      position: relative;
      z-index: 2;
    }
    #page-pricing .subhero .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 18px;
      background: rgba(0,212,170,0.12);
      border: 1px solid rgba(0,212,170,0.26);
      border-radius: 999px;
      color: #8ff2d4 !important;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    #page-pricing .subhero .eyebrow::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 4px rgba(0,212,170,0.18);
    }
    #page-pricing .subhero h1 {
      margin-top: 22px;
      font-size: clamp(42px, 5.6vw, 72px);
      letter-spacing: -0.035em;
      line-height: 1.02;
    }
    #page-pricing .subhero p.lead {
      font-size: 20px;
      color: rgba(255,255,255,0.70);
      max-width: 640px;
      margin: 20px auto 0;
    }

    /* ---------- Trust bar with custom SVG icons ---------- */
    #page-pricing .pricing-inline-proof {
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap: 14px;
      margin-top: 48px;
      max-width: 1080px;
      margin-inline: auto;
    }
    #page-pricing .pricing-inline-item {
      min-height: 88px;
      padding: 20px 22px;
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 18px 38px rgba(0,0,0,0.22);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      transition: transform 0.35s cubic-bezier(.2,.8,.2,1), border-color 0.35s ease, background 0.35s ease;
    }
    #page-pricing .pricing-inline-item:hover {
      transform: translateY(-3px);
      border-color: rgba(0,212,170,0.30);
      background: linear-gradient(180deg, rgba(0,212,170,0.08), rgba(255,255,255,0.02));
    }
    #page-pricing .pricing-inline-icon {
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(0,212,170,0.22), rgba(0,212,170,0.06));
      border: 1px solid rgba(0,212,170,0.32);
      color: #7eead3;
      display: inline-grid;
      place-items: center;
      font-family: 'Sora', sans-serif;
      font-size: 15px;
      font-weight: 800;
      letter-spacing: -0.02em;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    }
    #page-pricing .pricing-inline-text {
      color: rgba(255,255,255,0.92);
      font-weight: 700;
      font-size: 15px;
      line-height: 1.35;
      letter-spacing: -0.01em;
    }

    /* ---------- Billing toggle ---------- */
    #page-pricing .billing-toggle-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      margin-bottom: 40px;
    }
    #page-pricing .billing-toggle {
      display: inline-flex;
      align-items: center;
      gap: 0;
      padding: 6px;
      border: 1px solid var(--gray-200);
      border-radius: 999px;
      background: var(--white);
      margin: 0;
      box-shadow:
        0 2px 8px rgba(15,23,42,0.04),
        0 12px 28px rgba(15,23,42,0.06);
    }
    #page-pricing .billing-toggle button {
      position: relative;
      border: 0;
      background: transparent;
      padding: 12px 22px;
      border-radius: 999px;
      font-weight: 700;
      font-size: 15px;
      color: var(--gray-600);
      cursor: pointer;
      transition: color 0.25s ease;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    #page-pricing .billing-toggle button:hover {
      color: var(--navy);
    }
    #page-pricing .billing-toggle button.active {
      background: var(--navy);
      color: var(--white);
      box-shadow: 0 8px 18px rgba(11,18,34,0.25);
    }
    #page-pricing .billing-toggle .save-badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(0,212,170,0.18);
      color: var(--teal-dark);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    #page-pricing .billing-toggle button.active .save-badge {
      background: rgba(0,212,170,0.25);
      color: #7eead3;
    }

    /* ---------- Pricing section layout ---------- */
    #page-pricing .pricing-section {
      padding: 56px 0 96px;
      background: var(--warm-bg);
      position: relative;
    }
    #page-pricing .pricing-grid {
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 22px;
      align-items: stretch;
      max-width: 1180px;
      margin: 0 auto;
    }

    /* ---------- Pricing cards — three distinct tiers ---------- */
    #page-pricing .pricing-card {
      position: relative;
      padding: 34px 30px 30px;
      border-radius: 26px;
      background: #ffffff;
      border: 1px solid var(--gray-200);
      box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 12px 32px rgba(15,23,42,0.06);
      overflow: visible;
      display: flex;
      flex-direction: column;
      transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease;
    }
    #page-pricing .pricing-card::before {
      display: none; /* remove the old teal stripe */
    }
    #page-pricing .pricing-card:hover {
      transform: translateY(-4px);
      box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 24px 48px rgba(15,23,42,0.10);
    }

    /* -- Tier 1: Essentials — clean white -- */
    #page-pricing .pricing-card.tier-essentials {
      background: #ffffff;
    }

    /* -- Tier 2: Scale — the hero, dark with teal glow -- */
    #page-pricing .pricing-card.tier-scale {
      background: linear-gradient(180deg, #0F1A30 0%, #0B1324 100%);
      border: 1px solid rgba(0,212,170,0.25);
      color: rgba(255,255,255,0.92);
      transform: translateY(-12px);
      box-shadow:
        0 1px 0 rgba(255,255,255,0.05) inset,
        0 30px 60px rgba(0,212,170,0.20),
        0 10px 30px rgba(0,0,0,0.35);
      overflow: hidden;
    }
    #page-pricing .pricing-card.tier-scale::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 40% at 50% 0%, rgba(0,212,170,0.18), transparent 60%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(0,255,212,0.08), transparent 55%);
      pointer-events: none;
      z-index: 0;
    }
    #page-pricing .pricing-card.tier-scale > * {
      position: relative;
      z-index: 1;
    }
    #page-pricing .pricing-card.tier-scale:hover {
      transform: translateY(-16px);
      box-shadow:
        0 1px 0 rgba(255,255,255,0.05) inset,
        0 36px 72px rgba(0,212,170,0.26),
        0 14px 36px rgba(0,0,0,0.40);
    }

    /* -- Tier 3: Enterprise — refined white with subtle accent -- */
    #page-pricing .pricing-card.tier-enterprise {
      background:
        linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
      border: 1px solid var(--gray-200);
      position: relative;
    }
    #page-pricing .pricing-card.tier-enterprise::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 26px;
      padding: 1px;
      background: linear-gradient(180deg, rgba(11,18,34,0.15), transparent 40%);
      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      pointer-events: none;
    }

    /* ---------- Card header: plan name + badge ---------- */
    #page-pricing .pricing-plan-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
      flex-wrap: nowrap;
    }
    #page-pricing .pricing-card .pill {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 6px 14px;
      border-radius: 999px;
      font-family: 'Sora', sans-serif;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      background: rgba(11,18,34,0.06);
      color: var(--navy);
    }
    #page-pricing .pricing-card.tier-scale .pill {
      background: rgba(0,212,170,0.16);
      color: #7eead3;
      border: 1px solid rgba(0,212,170,0.26);
    }
    #page-pricing .pricing-card.tier-enterprise .pill {
      background: linear-gradient(135deg, #1A2744, #0B1222);
      color: #ffffff;
    }
    #page-pricing .pricing-card .plan-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--teal), #00FFD4);
      color: var(--navy);
      font-family: 'Sora', sans-serif;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      box-shadow: 0 6px 16px rgba(0,212,170,0.35);
    }
    #page-pricing .pricing-card .plan-badge::before {
      content: '★';
      font-size: 11px;
    }

    /* ---------- Kicker copy ---------- */
    #page-pricing .pricing-plan-kicker {
      font-size: 15px;
      line-height: 1.5;
      color: var(--gray-600);
      margin: 0 0 26px;
      max-width: 34ch;
    }
    #page-pricing .pricing-card.tier-scale .pricing-plan-kicker {
      color: rgba(255,255,255,0.68);
    }

    /* ---------- Price display ---------- */
    #page-pricing .pricing-card .price {
      font-family: 'Sora', sans-serif;
      font-size: clamp(48px, 5vw, 62px);
      line-height: 0.96;
      letter-spacing: -0.055em;
      color: var(--navy);
      margin: 0;
      display: inline-flex;
      align-items: baseline;
      gap: 2px;
      font-weight: 800;
    }
    #page-pricing .pricing-card.tier-scale .price {
      color: #ffffff;
    }
    #page-pricing .pricing-card .price-period {
      color: var(--gray-600);
      font-weight: 600;
      font-size: 15px;
      line-height: 1.2;
      margin-top: 6px;
    }
    #page-pricing .pricing-card.tier-scale .price-period {
      color: rgba(255,255,255,0.60);
    }
    #page-pricing .pricing-card .price-note {
      margin-top: 14px;
      min-height: auto;
      color: var(--gray-500);
      font-size: 13px;
      padding-bottom: 22px;
      padding-top: 0;
      border-bottom: 1px solid var(--gray-200);
    }
    #page-pricing .pricing-card.tier-scale .price-note {
      color: rgba(255,255,255,0.50);
      border-bottom-color: rgba(255,255,255,0.10);
    }

    /* ---------- Tagline paragraph ---------- */
    #page-pricing .pricing-card > p {
      margin: 20px 0 0;
      color: var(--gray-700);
      font-size: 16px;
      line-height: 1.6;
      min-height: auto;
      max-width: 32ch;
    }
    #page-pricing .pricing-card.tier-scale > p {
      color: rgba(255,255,255,0.76);
    }

    /* ---------- CTA button inside card ---------- */
    #page-pricing .pricing-card .btn {
      width: 100%;
      margin: 22px 0 22px;
      min-height: 54px;
      border-radius: 14px;
      font-size: 16px;
      font-weight: 800;
      letter-spacing: -0.005em;
      transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    }
    #page-pricing .pricing-card.tier-essentials .btn.btn-primary {
      background: var(--navy);
      color: var(--white);
      border: 1px solid var(--navy);
    }
    #page-pricing .pricing-card.tier-essentials .btn.btn-primary:hover {
      background: #1A2744;
      transform: translateY(-2px);
      box-shadow: 0 14px 28px rgba(11,18,34,0.22);
    }
    #page-pricing .pricing-card.tier-scale .btn.btn-primary {
      background: linear-gradient(135deg, var(--teal), #00FFD4);
      color: var(--navy);
      border: 1px solid transparent;
      box-shadow: 0 10px 24px rgba(0,212,170,0.35);
    }
    #page-pricing .pricing-card.tier-scale .btn.btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 36px rgba(0,212,170,0.48);
    }
    #page-pricing .pricing-card.tier-enterprise .btn.btn-secondary-dark {
      background: #ffffff;
      color: var(--navy);
      border: 1.5px solid var(--navy);
    }
    #page-pricing .pricing-card.tier-enterprise .btn.btn-secondary-dark:hover {
      background: var(--navy);
      color: var(--white);
      transform: translateY(-2px);
      box-shadow: 0 14px 28px rgba(11,18,34,0.25);
    }

    /* ---------- Feature list ---------- */
    #page-pricing .pricing-card .feature-list {
      margin-top: 4px;
      padding-top: 22px;
      border-top: 1px solid var(--gray-200);
      list-style: none;
      padding-left: 0;
    }
    #page-pricing .pricing-card.tier-scale .feature-list {
      border-top-color: rgba(255,255,255,0.12);
    }
    #page-pricing .pricing-card .feature-list li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 14px;
      font-size: 14.5px;
      line-height: 1.5;
      color: var(--gray-700);
    }
    #page-pricing .pricing-card.tier-scale .feature-list li {
      color: rgba(255,255,255,0.82);
    }
    #page-pricing .pricing-card .feature-list .check {
      flex: 0 0 20px;
      width: 20px;
      height: 20px;
      border-radius: 6px;
      background: rgba(0,212,170,0.14);
      color: var(--teal-dark);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      margin-top: 1px;
    }
    #page-pricing .pricing-card .feature-list .check svg {
      width: 12px;
      height: 12px;
    }
    #page-pricing .pricing-card.tier-scale .feature-list .check {
      background: rgba(0,212,170,0.22);
      color: #7eead3;
    }

    /* ---------- Guarantee / reassurance strip ---------- */
    #page-pricing .pricing-matrix-note {
      margin: 32px auto 0;
      max-width: 1180px;
      padding: 18px 24px;
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(0,212,170,0.10), rgba(0,212,170,0.04));
      border: 1px solid rgba(0,212,170,0.18);
      color: var(--gray-700);
      font-weight: 600;
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      text-align: center;
    }
    #page-pricing .pricing-matrix-note::before {
      content: '';
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      background: var(--teal-dark);
      -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2l8 3v6c0 5-3.5 9.5-8 11-4.5-1.5-8-6-8-11V5l8-3z'/><path d='M9 12l2 2 4-4'/></svg>") center/contain no-repeat;
              mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2l8 3v6c0 5-3.5 9.5-8 11-4.5-1.5-8-6-8-11V5l8-3z'/><path d='M9 12l2 2 4-4'/></svg>") center/contain no-repeat;
    }

    /* ---------- "Included in all plans" section ---------- */
    #page-pricing .pricing-proof-grid {
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap: 18px;
    }
    #page-pricing .pricing-proof-card {
      background: #ffffff;
      border: 1px solid var(--gray-200);
      border-radius: 20px;
      padding: 28px 24px;
      box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 10px 24px rgba(15,23,42,0.04);
      height: 100%;
      transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, border-color 0.35s ease;
      position: relative;
      overflow: hidden;
    }
    #page-pricing .pricing-proof-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--teal), transparent);
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    #page-pricing .pricing-proof-card:hover {
      transform: translateY(-4px);
      border-color: rgba(0,212,170,0.26);
      box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 20px 40px rgba(0,212,170,0.12);
    }
    #page-pricing .pricing-proof-card:hover::before {
      opacity: 1;
    }
    #page-pricing .pricing-proof-card .proof-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(0,212,170,0.14), rgba(0,212,170,0.04));
      border: 1px solid rgba(0,212,170,0.22);
      display: inline-grid;
      place-items: center;
      margin-bottom: 18px;
      color: var(--teal-dark);
    }
    #page-pricing .pricing-proof-card .proof-icon svg {
      width: 24px;
      height: 24px;
    }
    #page-pricing .pricing-proof-card h3 {
      font-size: 18px;
      margin: 0 0 8px;
      color: var(--navy);
      letter-spacing: -0.02em;
    }
    #page-pricing .pricing-proof-card p {
      margin: 0;
      font-size: 14px;
      line-height: 1.55;
      color: var(--gray-600);
    }

    /* ---------- Matrix table 2.0 ---------- */
    #page-pricing .pricing-matrix-intro {
      margin: 0 0 28px;
      color: var(--gray-600);
      max-width: 820px;
      font-size: 16px;
      line-height: 1.6;
    }
    #page-pricing .table-scroll {
      border-radius: 22px;
      overflow: hidden;
      background: #ffffff;
      border: 1px solid var(--gray-200);
      box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 14px 36px rgba(15,23,42,0.06);
    }
    #page-pricing .pricing-detail-table {
      border: 0;
      border-radius: 0;
      box-shadow: none;
      background: transparent;
    }
    #page-pricing .pricing-detail-table thead th {
      background: #0B1222;
      color: #ffffff;
      font-family: 'Sora', sans-serif;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.02em;
      padding: 20px 18px;
      border-bottom: 0;
    }
    #page-pricing .pricing-detail-table thead th:first-child {
      text-align: left;
    }
    #page-pricing .pricing-detail-table thead th:not(:first-child) {
      text-align: center;
    }
    /* Highlight Scale column (3rd) */
    #page-pricing .pricing-detail-table thead th:nth-child(3) {
      background: linear-gradient(180deg, #0F1A30, #0B1222);
      position: relative;
    }
    #page-pricing .pricing-detail-table thead th:nth-child(3)::after {
      content: 'Empfohlen';
      position: absolute;
      top: 6px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 9px;
      color: var(--teal);
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 800;
    }
    #page-pricing .pricing-detail-table tbody td {
      padding: 18px;
      border-bottom: 1px solid var(--gray-100);
      font-size: 14px;
      vertical-align: middle;
    }
    #page-pricing .pricing-detail-table tbody td:not(:first-child) {
      text-align: center;
    }
    #page-pricing .pricing-detail-table tbody tr:hover td {
      background: rgba(0,212,170,0.02);
    }
    /* Subtle background on Scale column */
    #page-pricing .pricing-detail-table tbody tr td:nth-child(3) {
      background: rgba(0,212,170,0.03);
    }
    #page-pricing .pricing-detail-table tbody tr:hover td:nth-child(3) {
      background: rgba(0,212,170,0.06);
    }
    #page-pricing .matrix-group-row td {
      background: linear-gradient(90deg, rgba(11,18,34,0.04), transparent) !important;
      color: var(--navy);
      font-family: 'Sora', sans-serif;
      font-size: 13px !important;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 16px 18px !important;
    }
    #page-pricing .matrix-feature-title {
      display: block;
      font-weight: 700;
      color: var(--gray-800);
      margin-bottom: 3px;
      font-size: 14.5px;
    }
    #page-pricing .matrix-feature-copy {
      display: block;
      color: var(--gray-500);
      font-size: 13px;
      line-height: 1.5;
    }
    #page-pricing .matrix-yes,
    #page-pricing .matrix-no {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      font-size: 0;
      position: relative;
    }
    #page-pricing .matrix-yes {
      background: rgba(0,212,170,0.14);
      color: var(--teal-dark);
    }
    #page-pricing .matrix-yes::after {
      content: '';
      width: 14px;
      height: 14px;
      background: var(--teal-dark);
      -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
              mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
    }
    #page-pricing .matrix-no {
      background: var(--gray-100);
    }
    #page-pricing .matrix-no::after {
      content: '';
      width: 10px;
      height: 2px;
      border-radius: 2px;
      background: var(--gray-400);
    }

    /* ---------- FAQ aside — upgraded ---------- */
    #page-pricing .pricing-faq-aside {
      background: linear-gradient(180deg, #0F1A30 0%, #0B1222 100%);
      color: rgba(255,255,255,0.92);
      border-radius: 22px;
      padding: 32px 30px;
      border: 1px solid rgba(0,212,170,0.18);
      box-shadow: 0 20px 50px rgba(11,18,34,0.18);
      position: sticky;
      top: 100px;
    }
    #page-pricing .pricing-faq-aside .mini-pill {
      display: inline-flex;
      align-items: center;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(0,212,170,0.18);
      border: 1px solid rgba(0,212,170,0.28);
      color: #7eead3;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 16px;
    }
    #page-pricing .pricing-faq-aside h3 {
      color: #ffffff;
      font-size: 22px;
      margin: 0 0 12px;
      letter-spacing: -0.02em;
    }
    #page-pricing .pricing-faq-aside p {
      color: rgba(255,255,255,0.70);
      font-size: 15px;
      line-height: 1.6;
      margin: 0 0 22px;
    }
    #page-pricing .pricing-faq-aside .pricing-faq-points {
      display: grid;
      gap: 12px;
    }
    #page-pricing .pricing-faq-aside .pricing-faq-point {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      font-size: 14px;
      line-height: 1.5;
      color: rgba(255,255,255,0.82);
      padding-top: 0;
      border-top: 0;
    }
    #page-pricing .pricing-faq-aside .pricing-faq-point .check {
      flex: 0 0 20px;
      width: 20px;
      height: 20px;
      border-radius: 6px;
      background: rgba(0,212,170,0.22);
      color: #7eead3;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 800;
      margin-top: 1px;
    }
    #page-pricing .pricing-faq-aside .pricing-faq-point .check svg {
      width: 12px;
      height: 12px;
    }

    /* ---------- FAQ items ---------- */
    #page-pricing .faq-item.pricing-faq-item {
      background: #ffffff;
      border: 1px solid var(--gray-200);
      border-radius: 16px;
      margin-bottom: 12px;
      box-shadow:
        0 1px 2px rgba(15,23,42,0.03),
        0 4px 10px rgba(15,23,42,0.03);
      transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
      overflow: hidden;
    }
    #page-pricing .faq-item.pricing-faq-item:hover {
      border-color: rgba(0,212,170,0.26);
      box-shadow:
        0 1px 2px rgba(15,23,42,0.03),
        0 10px 24px rgba(15,23,42,0.06);
    }
    #page-pricing .faq-item.pricing-faq-item.open {
      border-color: rgba(0,212,170,0.30);
      box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 18px 40px rgba(0,212,170,0.10);
    }
    #page-pricing .faq-item.pricing-faq-item .faq-button {
      width: 100%;
      padding: 20px 24px;
      background: transparent;
      border: 0;
      font-family: inherit;
      font-size: 16px;
      font-weight: 700;
      color: var(--navy);
      text-align: left;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      letter-spacing: -0.01em;
    }
    #page-pricing .faq-item.pricing-faq-item .faq-chevron {
      flex: 0 0 28px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--gray-100);
      color: var(--navy);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      transition: transform 0.3s ease, background 0.3s ease;
    }
    #page-pricing .faq-item.pricing-faq-item.open .faq-chevron {
      transform: rotate(180deg);
      background: var(--teal);
      color: var(--navy);
    }
    #page-pricing .faq-item.pricing-faq-item .faq-answer {
      display: block;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease, padding 0.3s ease;
      padding: 0 24px;
      color: var(--gray-600);
      line-height: 1.6;
    }
    #page-pricing .faq-item.pricing-faq-item.open .faq-answer {
      max-height: 600px;
      padding: 0 24px 22px;
    }

    /* ---------- Final CTA panel ---------- */
    #page-pricing .cta-panel {
      background:
        radial-gradient(ellipse 60% 60% at 0% 0%, rgba(0,212,170,0.18), transparent 60%),
        radial-gradient(ellipse 50% 60% at 100% 100%, rgba(0,255,212,0.12), transparent 55%),
        linear-gradient(135deg, #0F1A30 0%, #0B1222 100%);
      border: 1px solid rgba(0,212,170,0.20);
      border-radius: 28px;
      padding: 48px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 32px;
      flex-wrap: wrap;
      color: #ffffff;
      position: relative;
      overflow: hidden;
      box-shadow: 0 30px 60px rgba(11,18,34,0.25);
    }
    #page-pricing .cta-panel::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 48px 48px;
      -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(0,0,0,0.6), transparent 75%);
              mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(0,0,0,0.6), transparent 75%);
      pointer-events: none;
    }
    #page-pricing .cta-panel > * {
      position: relative;
      z-index: 1;
    }
    #page-pricing .cta-panel .eyebrow {
      color: #7eead3 !important;
      font-size: 12px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 700;
    }
    #page-pricing .cta-panel h2 {
      color: #ffffff;
      margin-top: 10px;
      max-width: 28ch;
      font-size: clamp(26px, 3vw, 36px);
    }
    #page-pricing .cta-panel p.muted {
      color: rgba(255,255,255,0.68);
      margin: 12px 0 0;
      max-width: 52ch;
    }
    #page-pricing .cta-panel .btn.btn-primary {
      background: linear-gradient(135deg, var(--teal), #00FFD4);
      color: var(--navy);
      border: 1px solid transparent;
      box-shadow: 0 10px 24px rgba(0,212,170,0.35);
    }
    #page-pricing .cta-panel .btn.btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 36px rgba(0,212,170,0.50);
    }
    #page-pricing .cta-panel .btn.btn-secondary-dark {
      background: transparent;
      color: #ffffff;
      border: 1.5px solid rgba(255,255,255,0.30);
    }
    #page-pricing .cta-panel .btn.btn-secondary-dark:hover {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.50);
    }

    /* ---------- Entrance animations ---------- */
    @keyframes pricingCardRise {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes pricingScaleRise {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(-12px); }
    }
    #page-pricing.active .pricing-card.tier-essentials {
      animation: pricingCardRise 0.7s cubic-bezier(.2,.8,.2,1) 0.05s both;
    }
    #page-pricing.active .pricing-card.tier-scale {
      animation: pricingScaleRise 0.75s cubic-bezier(.2,.8,.2,1) 0.15s both;
    }
    #page-pricing.active .pricing-card.tier-enterprise {
      animation: pricingCardRise 0.7s cubic-bezier(.2,.8,.2,1) 0.25s both;
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 1100px) {
      #page-pricing .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 540px;
      }
      #page-pricing .pricing-card.tier-scale {
        transform: translateY(0);
      }
      #page-pricing .pricing-card.tier-scale:hover {
        transform: translateY(-4px);
      }
      #page-pricing.active .pricing-card.tier-scale {
        animation: pricingCardRise 0.75s cubic-bezier(.2,.8,.2,1) 0.15s both;
      }
      #page-pricing .pricing-proof-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
      }
      #page-pricing .pricing-inline-proof {
        grid-template-columns: repeat(2, minmax(0,1fr));
      }
      #page-pricing .pricing-faq-aside {
        position: static;
      }
    }
    @media (max-width: 640px) {
      #page-pricing .subhero { padding: 72px 0 60px; }
      #page-pricing .pricing-inline-proof {
        grid-template-columns: 1fr;
      }
      #page-pricing .pricing-proof-grid {
        grid-template-columns: 1fr;
      }
      #page-pricing .cta-panel {
        padding: 32px 24px;
        text-align: center;
        justify-content: center;
      }
      #page-pricing .cta-panel h2 { margin-inline: auto; }
      #page-pricing .cta-panel p.muted { margin-inline: auto; }
    }


    /* =====================================================
       FEATURES PAGE — Metric Grid 2.0
       Scoped to #page-features .feature-metric-grid
       ===================================================== */

    #page-features .feature-metric-grid {
      gap: 20px;
    }

    #page-features .feature-metric-grid .metric-card {
      position: relative;
      padding: 30px 28px 28px;
      border-radius: 22px;
      background: #ffffff;
      border: 1px solid var(--gray-200);
      box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 24px rgba(15, 23, 42, 0.05);
      display: flex;
      flex-direction: column;
      min-height: 260px;
      transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, border-color 0.35s ease;
      overflow: hidden;
    }
    /* Remove the old decorative stripe and radial glow */
    #page-features .feature-metric-grid .metric-card::before,
    #page-features .feature-metric-grid .metric-card::after {
      display: none;
    }
    #page-features .feature-metric-grid .metric-card:hover {
      transform: translateY(-3px);
      border-color: rgba(0, 212, 170, 0.26);
      box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 18px 40px rgba(15, 23, 42, 0.08);
    }

    /* Index number in top-right (01 / 02 / 03 / 04) */
    #page-features .feature-metric-grid .metric-index {
      position: absolute;
      top: 24px;
      right: 26px;
      font-family: 'Sora', sans-serif;
      font-size: 12px;
      font-weight: 700;
      color: var(--gray-300);
      letter-spacing: 0.08em;
      transition: color 0.3s ease;
    }
    #page-features .feature-metric-grid .metric-card:hover .metric-index {
      color: var(--teal-dark);
    }

    /* Icon in soft tinted box (top-left) */
    #page-features .feature-metric-grid .metric-icon {
      display: inline-grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(0,212,170,0.10), rgba(0,212,170,0.03));
      border: 1px solid rgba(0,212,170,0.20);
      color: var(--teal-dark);
      margin-bottom: 22px;
      transition: background 0.3s ease, border-color 0.3s ease;
    }
    #page-features .feature-metric-grid .metric-card:hover .metric-icon {
      background: linear-gradient(135deg, rgba(0,212,170,0.16), rgba(0,212,170,0.06));
      border-color: rgba(0,212,170,0.32);
    }
    #page-features .feature-metric-grid .metric-icon svg {
      width: 22px;
      height: 22px;
    }

    /* Kicker: small caps label under icon (replaces pill tag) */
    #page-features .feature-metric-grid .metric-kicker {
      display: block;
      margin: 0 0 10px;
      padding: 0;
      background: transparent;
      border: 0;
      color: var(--gray-500);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      width: auto;
    }

    /* Stat: big number with smaller unit label inline */
    #page-features .feature-metric-grid .metric-stat {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin-bottom: 18px;
      flex-wrap: wrap;
    }
    #page-features .feature-metric-grid .metric-number {
      font-family: 'Sora', sans-serif;
      font-size: clamp(48px, 4.2vw, 60px);
      line-height: 0.9;
      letter-spacing: -0.055em;
      font-weight: 800;
      color: var(--navy);
    }
    #page-features .feature-metric-grid .metric-unit {
      font-family: 'Sora', sans-serif;
      font-size: 22px;
      line-height: 1;
      letter-spacing: -0.02em;
      font-weight: 600;
      color: var(--gray-700);
    }

    /* Description */
    #page-features .feature-metric-grid .metric-card p {
      margin: auto 0 0;
      color: var(--gray-600);
      font-size: 14.5px;
      line-height: 1.55;
      max-width: none;
      padding-top: 18px;
      border-top: 1px solid var(--gray-100);
    }

    /* Subtle staggered entry */
    @keyframes metricCardRise {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    #page-features.active .feature-metric-grid .metric-card:nth-child(1) { animation: metricCardRise 0.5s cubic-bezier(.2,.8,.2,1) 0.05s both; }
    #page-features.active .feature-metric-grid .metric-card:nth-child(2) { animation: metricCardRise 0.5s cubic-bezier(.2,.8,.2,1) 0.12s both; }
    #page-features.active .feature-metric-grid .metric-card:nth-child(3) { animation: metricCardRise 0.5s cubic-bezier(.2,.8,.2,1) 0.19s both; }
    #page-features.active .feature-metric-grid .metric-card:nth-child(4) { animation: metricCardRise 0.5s cubic-bezier(.2,.8,.2,1) 0.26s both; }

    /* Responsive */
    @media (max-width: 1024px) {
      #page-features .feature-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 560px) {
      #page-features .feature-metric-grid {
        grid-template-columns: 1fr;
      }
      #page-features .feature-metric-grid .metric-card {
        min-height: auto;
      }
    }

    /* =====================================================
       FEATURES PAGE — Module Grid with Visuals
       Scoped to #page-features .module-grid
       ===================================================== */

    #page-features .module-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
    }

    #page-features .module-grid .module-card {
      position: relative;
      padding: 0;
      border-radius: 22px;
      background: #ffffff;
      border: 1px solid var(--gray-100);
      box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 10px 24px rgba(15, 23, 42, 0.08),
        0 24px 48px rgba(15, 23, 42, 0.06);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 100%;
      cursor: pointer;
      transition: transform 0.35s cubic-bezier(.2,.8,.2,1),
                  box-shadow 0.35s ease,
                  border-color 0.35s ease;
    }
    #page-features .module-grid .module-card:hover {
      transform: translateY(-4px);
      border-color: rgba(0, 212, 170, 0.28);
      box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 16px 32px rgba(15, 23, 42, 0.10),
        0 32px 60px rgba(0, 212, 170, 0.14);
    }

    /* Visual container — transparent PNG on white, illustration brings its own shadow */
    #page-features .module-grid .module-visual {
      position: relative;
      width: 100%;
      aspect-ratio: 3 / 2;
      background: #ffffff;
      overflow: hidden;
    }
    #page-features .module-grid .module-visual img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center center;
      transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
      display: block;
      padding: 14px 14px 6px;
    }
    #page-features .module-grid .module-card:hover .module-visual img {
      transform: scale(1.02);
    }

    /* Card body below the visual */
    #page-features .module-grid .module-body {
      padding: 28px 28px 26px;
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    #page-features .module-grid .module-body h3 {
      font-size: 20px;
      letter-spacing: -0.02em;
      color: var(--navy);
      margin: 0 0 10px;
    }
    #page-features .module-grid .module-body > p {
      margin: 0 0 18px;
      color: var(--gray-600);
      font-size: 14.5px;
      line-height: 1.6;
    }
    #page-features .module-grid .module-body ul.clean {
      list-style: none;
      padding: 0;
      margin: 0 0 18px;
    }
    #page-features .module-grid .module-body ul.clean li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 6px 0;
      color: var(--gray-700);
      font-size: 14px;
      line-height: 1.5;
    }
    #page-features .module-grid .module-body ul.clean .check {
      flex: 0 0 18px;
      width: 18px;
      height: 18px;
      border-radius: 5px;
      background: rgba(0, 212, 170, 0.12);
      color: var(--teal-dark);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 800;
      margin-top: 2px;
    }
    #page-features .module-grid .module-body ul.clean .check svg {
      width: 10px;
      height: 10px;
    }
    #page-features .module-grid .module-body .card-link-row {
      margin-top: auto;
      padding-top: 18px;
      border-top: 1px solid var(--gray-100);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: var(--teal-dark);
      font-weight: 700;
      font-size: 14px;
      letter-spacing: -0.005em;
    }
    #page-features .module-grid .module-body .arrow-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(0, 212, 170, 0.10);
      transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
      color: var(--teal-dark);
    }
    #page-features .module-grid .module-card:hover .module-body .arrow-link {
      background: var(--teal);
      color: var(--navy);
      transform: translateX(4px);
    }

    /* Neutralize any leftover base .linked-card styles */
    #page-features .module-grid .module-card.linked-card::after {
      display: none;
    }

    /* Staggered entry */
    @keyframes moduleCardRise {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    #page-features.active .module-grid .module-card:nth-child(1) { animation: moduleCardRise 0.55s cubic-bezier(.2,.8,.2,1) 0.05s both; }
    #page-features.active .module-grid .module-card:nth-child(2) { animation: moduleCardRise 0.55s cubic-bezier(.2,.8,.2,1) 0.12s both; }
    #page-features.active .module-grid .module-card:nth-child(3) { animation: moduleCardRise 0.55s cubic-bezier(.2,.8,.2,1) 0.19s both; }
    #page-features.active .module-grid .module-card:nth-child(4) { animation: moduleCardRise 0.55s cubic-bezier(.2,.8,.2,1) 0.26s both; }
    #page-features.active .module-grid .module-card:nth-child(5) { animation: moduleCardRise 0.55s cubic-bezier(.2,.8,.2,1) 0.33s both; }
    #page-features.active .module-grid .module-card:nth-child(6) { animation: moduleCardRise 0.55s cubic-bezier(.2,.8,.2,1) 0.40s both; }

    /* Responsive */
    @media (max-width: 1024px) {
      #page-features .module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 640px) {
      #page-features .module-grid {
        grid-template-columns: 1fr;
      }
      #page-features .module-grid .module-visual {
        aspect-ratio: 3 / 2;
      }
    }

    /* =====================================================
       HOMEPAGE — Proof Section "Die wichtigsten Gründe"
       Scoped to #page-home .home-proof-section / .home-proof-grid
       ===================================================== */

    #page-home .home-proof-section {
      padding: 92px 0;
      background:
        linear-gradient(180deg, #FAFBFD 0%, #F3F6FB 100%);
      position: relative;
      overflow: hidden;
    }
    /* Subtle ambient glow behind the grid */
    #page-home .home-proof-section::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: min(900px, 70%);
      height: 380px;
      background: radial-gradient(ellipse at center,
        rgba(0, 212, 170, 0.08) 0%,
        rgba(0, 212, 170, 0.02) 40%,
        transparent 70%);
      pointer-events: none;
      z-index: 0;
    }
    #page-home .home-proof-section > .container {
      position: relative;
      z-index: 1;
    }
    #page-home .home-proof-section .section-header {
      margin-bottom: 48px;
    }
    #page-home .home-proof-section .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      border-radius: 999px;
      background: rgba(0, 212, 170, 0.10);
      border: 1px solid rgba(0, 212, 170, 0.22);
      color: var(--teal-dark);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }
    #page-home .home-proof-section .eyebrow::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 4px rgba(0, 212, 170, 0.16);
    }
    #page-home .home-proof-section h2 {
      letter-spacing: -0.03em;
      max-width: 22ch;
    }

    /* Grid */
    #page-home .home-proof-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 20px;
      align-items: stretch;
    }

    /* Card base */
    #page-home .home-proof-card {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 28px 26px 26px;
      border-radius: 22px;
      background: #ffffff;
      border: 1px solid var(--gray-100);
      box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 8px 20px rgba(15, 23, 42, 0.06),
        0 22px 44px rgba(15, 23, 42, 0.05);
      overflow: hidden;
      text-align: left;
      min-height: 260px;
      isolation: isolate;
      transition: transform 0.4s cubic-bezier(.2,.8,.2,1),
                  box-shadow 0.4s ease,
                  border-color 0.4s ease;
    }
    /* Remove any inherited decorative stripe from base rule */
    #page-home .home-proof-card::before,
    #page-home .home-proof-card::after {
      content: none;
    }
    /* Subtle color-coded ambient wash per tone (bottom-right) */
    #page-home .home-proof-card {
      background:
        radial-gradient(ellipse 85% 70% at 100% 100%,
          rgba(0, 212, 170, 0.07) 0%,
          transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    }
    #page-home .home-proof-card[data-tone="users"] {
      background:
        radial-gradient(ellipse 85% 70% at 100% 100%,
          rgba(0, 212, 170, 0.11) 0%,
          transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    }
    #page-home .home-proof-card[data-tone="hosting"] {
      background:
        radial-gradient(ellipse 85% 70% at 100% 100%,
          rgba(11, 18, 34, 0.05) 0%,
          transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    }

    #page-home .home-proof-card:hover {
      transform: translateY(-5px);
      border-color: rgba(0, 212, 170, 0.30);
      box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 14px 28px rgba(15, 23, 42, 0.08),
        0 32px 56px rgba(0, 212, 170, 0.12);
    }

    /* Top row: index + icon */
    #page-home .home-proof-card .home-proof-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 28px;
    }
    #page-home .home-proof-card .home-proof-index {
      font-family: 'Sora', sans-serif;
      font-size: 12px;
      font-weight: 700;
      color: var(--gray-300);
      letter-spacing: 0.12em;
      transition: color 0.3s ease;
    }
    #page-home .home-proof-card:hover .home-proof-index {
      color: var(--teal-dark);
    }
    #page-home .home-proof-card .home-proof-icon {
      display: inline-grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: linear-gradient(135deg,
        rgba(0, 212, 170, 0.10),
        rgba(0, 212, 170, 0.03));
      border: 1px solid rgba(0, 212, 170, 0.20);
      color: var(--teal-dark);
      transition: background 0.3s ease,
                  border-color 0.3s ease,
                  transform 0.3s ease;
    }
    #page-home .home-proof-card .home-proof-icon svg {
      width: 20px;
      height: 20px;
    }
    #page-home .home-proof-card:hover .home-proof-icon {
      background: linear-gradient(135deg,
        rgba(0, 212, 170, 0.18),
        rgba(0, 212, 170, 0.06));
      border-color: rgba(0, 212, 170, 0.32);
      transform: scale(1.04) rotate(-2deg);
    }

    /* Metric: big number + unit */
    #page-home .home-proof-card .home-proof-metric {
      display: flex;
      align-items: baseline;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }
    #page-home .home-proof-card .home-proof-number {
      font-family: 'Sora', sans-serif;
      font-size: clamp(56px, 5.5vw, 72px);
      line-height: 1.15;
      letter-spacing: -0.055em;
      font-weight: 800;
      color: var(--navy);
      background: linear-gradient(135deg, var(--navy) 0%, #1A2744 100%);
      -webkit-background-clip: text;
              background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block;
      padding: 0.1em 0.04em;
    }
    /* Teal accent for "∞" and "DE" */
    #page-home .home-proof-card .home-proof-number--accent {
      background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 100%);
      -webkit-background-clip: text;
              background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    #page-home .home-proof-card .home-proof-unit {
      font-family: 'Sora', sans-serif;
      font-size: 20px;
      line-height: 1.1;
      letter-spacing: -0.02em;
      font-weight: 700;
      color: var(--navy);
    }

    /* Description */
    #page-home .home-proof-card p {
      margin: auto 0 0;
      color: var(--gray-600);
      font-size: 14.5px;
      line-height: 1.55;
      padding-top: 16px;
      border-top: 1px solid var(--gray-100);
    }

    /* Staggered entry */
    @keyframes homeProofRise {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    #page-home.active .home-proof-grid .home-proof-card:nth-child(1) {
      animation: homeProofRise 0.55s cubic-bezier(.2,.8,.2,1) 0.05s both;
    }
    #page-home.active .home-proof-grid .home-proof-card:nth-child(2) {
      animation: homeProofRise 0.55s cubic-bezier(.2,.8,.2,1) 0.14s both;
    }
    #page-home.active .home-proof-grid .home-proof-card:nth-child(3) {
      animation: homeProofRise 0.55s cubic-bezier(.2,.8,.2,1) 0.23s both;
    }
    #page-home.active .home-proof-grid .home-proof-card:nth-child(4) {
      animation: homeProofRise 0.55s cubic-bezier(.2,.8,.2,1) 0.32s both;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      #page-home .home-proof-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 560px) {
      #page-home .home-proof-grid {
        grid-template-columns: 1fr;
      }
      #page-home .home-proof-card {
        min-height: auto;
      }
      #page-home .home-proof-section {
        padding: 64px 0;
      }
    }

    /* =====================================================
       ABOUT PAGE — Contrast Opener "Vorher / Nachher"
       Scoped to #page-about .about-contrast-section
       ===================================================== */

    #page-about .about-contrast-section {
      padding: 96px 0;
      background: #ffffff;
      position: relative;
      overflow: hidden;
    }
    #page-about .about-contrast-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 55% 55% at 82% 15%, rgba(0,212,170,0.10), transparent 55%),
        radial-gradient(ellipse 48% 45% at 15% 85%, rgba(11,18,34,0.04), transparent 55%);
      pointer-events: none;
      z-index: 0;
    }
    #page-about .about-contrast-section > .container {
      position: relative;
      z-index: 1;
    }

    #page-about .about-contrast-header {
      text-align: center;
      max-width: 820px;
      margin: 0 auto 56px;
    }
    #page-about .about-contrast-header .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      border-radius: 999px;
      background: rgba(0,212,170,0.10);
      border: 1px solid rgba(0,212,170,0.22);
      color: var(--teal-dark);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 20px;
    }
    #page-about .about-contrast-header .eyebrow::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 4px rgba(0,212,170,0.16);
    }
    #page-about .about-contrast-header h2 {
      font-size: clamp(30px, 3.8vw, 44px);
      letter-spacing: -0.03em;
      line-height: 1.12;
      max-width: 22ch;
      margin: 0 auto;
    }

    /* Split layout: Before | arrow | After */
    #page-about .about-contrast-split {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 28px;
      align-items: stretch;
    }

    /* Connecting arrow between cards */
    #page-about .about-contrast-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--teal-dark);
      opacity: 0.8;
    }
    #page-about .about-contrast-arrow svg {
      width: 48px;
      height: 48px;
    }

    /* Base card */
    #page-about .about-contrast-card {
      position: relative;
      padding: 36px 34px 32px;
      border-radius: 24px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 380px;
      transition: transform 0.4s cubic-bezier(.2,.8,.2,1),
                  box-shadow 0.4s ease;
    }

    /* BEFORE: faded, muted, slightly unsettled */
    #page-about .about-contrast-card--before {
      background: #FAFBFD;
      border: 1px solid var(--gray-200);
      color: var(--gray-700);
      box-shadow:
        0 1px 2px rgba(15,23,42,0.03),
        0 6px 14px rgba(15,23,42,0.04);
    }
    /* Subtle diagonal pattern on "before" card to convey friction */
    #page-about .about-contrast-card--before::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        repeating-linear-gradient(
          135deg,
          rgba(100, 116, 139, 0.05) 0 1px,
          transparent 1px 14px
        );
      pointer-events: none;
      opacity: 0.6;
    }

    /* AFTER: dark navy hero card with teal glow */
    #page-about .about-contrast-card--after {
      background:
        radial-gradient(ellipse 60% 60% at 100% 0%, rgba(0,212,170,0.18), transparent 58%),
        radial-gradient(ellipse 50% 50% at 0% 100%, rgba(0,255,212,0.10), transparent 55%),
        linear-gradient(180deg, #0F1A30 0%, #0B1222 100%);
      border: 1px solid rgba(0,212,170,0.22);
      color: #ffffff;
      box-shadow:
        0 1px 2px rgba(11,18,34,0.12),
        0 18px 42px rgba(0,212,170,0.18),
        0 30px 60px rgba(11,18,34,0.20);
      transform: translateY(-8px);
    }
    /* Subtle grid pattern on "after" card to convey structure */
    #page-about .about-contrast-card--after::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 44px 44px;
      -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, rgba(0,0,0,0.7), transparent 75%);
              mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, rgba(0,0,0,0.7), transparent 75%);
      pointer-events: none;
    }

    #page-about .about-contrast-card > * {
      position: relative;
      z-index: 1;
    }

    #page-about .about-contrast-card:hover {
      transform: translateY(-10px);
    }
    #page-about .about-contrast-card--after:hover {
      transform: translateY(-14px);
      box-shadow:
        0 1px 2px rgba(11,18,34,0.12),
        0 24px 52px rgba(0,212,170,0.24),
        0 36px 72px rgba(11,18,34,0.24);
    }

    /* Card head: label + title */
    #page-about .about-contrast-card-head {
      padding-bottom: 24px;
      margin-bottom: 24px;
      border-bottom: 1px solid var(--gray-200);
    }
    #page-about .about-contrast-card--after .about-contrast-card-head {
      border-bottom-color: rgba(255,255,255,0.10);
    }

    #page-about .about-contrast-label {
      display: inline-flex;
      align-items: center;
      padding: 5px 12px;
      border-radius: 999px;
      background: rgba(100, 116, 139, 0.12);
      color: var(--gray-600);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 14px;
    }
    #page-about .about-contrast-label--accent {
      background: rgba(0,212,170,0.18);
      border: 1px solid rgba(0,212,170,0.30);
      color: #8ff2d4;
    }

    #page-about .about-contrast-card-head h3 {
      font-size: 26px;
      letter-spacing: -0.02em;
      line-height: 1.12;
      margin: 0;
      color: var(--gray-800);
    }
    #page-about .about-contrast-card--after .about-contrast-card-head h3 {
      color: #ffffff;
    }

    /* Points list */
    #page-about .about-contrast-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    #page-about .about-contrast-list li {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      font-size: 15.5px;
      line-height: 1.5;
    }
    #page-about .about-contrast-card--before .about-contrast-list li {
      color: var(--gray-600);
    }
    #page-about .about-contrast-card--after .about-contrast-list li {
      color: rgba(255,255,255,0.85);
    }

    /* Mark icons */
    #page-about .about-contrast-mark {
      flex: 0 0 24px;
      width: 24px;
      height: 24px;
      border-radius: 8px;
      display: inline-grid;
      place-items: center;
      margin-top: 1px;
    }
    #page-about .about-contrast-mark--neg {
      background: rgba(100, 116, 139, 0.12);
      color: var(--gray-500);
    }
    #page-about .about-contrast-mark--neg svg {
      width: 12px;
      height: 12px;
    }
    #page-about .about-contrast-mark--pos {
      background: rgba(0,212,170,0.20);
      color: var(--teal);
      box-shadow: 0 0 0 1px rgba(0,212,170,0.30);
    }
    #page-about .about-contrast-mark--pos svg {
      width: 13px;
      height: 13px;
    }

    /* Staggered entry */
    @keyframes aboutContrastRise {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes aboutContrastRiseAfter {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(-8px); }
    }
    @keyframes aboutArrowFade {
      from { opacity: 0; transform: translateX(-8px); }
      to   { opacity: 0.8; transform: translateX(0); }
    }
    #page-about.active .about-contrast-card--before {
      animation: aboutContrastRise 0.6s cubic-bezier(.2,.8,.2,1) 0.10s both;
    }
    #page-about.active .about-contrast-arrow {
      animation: aboutArrowFade 0.6s cubic-bezier(.2,.8,.2,1) 0.30s both;
    }
    #page-about.active .about-contrast-card--after {
      animation: aboutContrastRiseAfter 0.6s cubic-bezier(.2,.8,.2,1) 0.40s both;
    }

    /* Responsive */
    @media (max-width: 900px) {
      #page-about .about-contrast-split {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      #page-about .about-contrast-card--after {
        transform: translateY(0);
      }
      #page-about .about-contrast-card--after:hover {
        transform: translateY(-6px);
      }
      #page-about.active .about-contrast-card--after {
        animation: aboutContrastRise 0.6s cubic-bezier(.2,.8,.2,1) 0.40s both;
      }
      #page-about .about-contrast-arrow {
        transform: rotate(90deg);
      }
      #page-about .about-contrast-arrow svg {
        width: 36px;
        height: 36px;
      }
    }
    @media (max-width: 560px) {
      #page-about .about-contrast-section {
        padding: 64px 0;
      }
      #page-about .about-contrast-card {
        padding: 28px 24px;
        min-height: auto;
      }
    }

    /* =====================================================
       CONTACT PAGE — Professional B2B redesign
       Scoped to #page-contact
       ===================================================== */

    /* Subhero with meta row */
    #page-contact .contact-subhero {
      padding-bottom: 56px;
    }
    #page-contact .contact-hero-meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 22px 36px;
      margin-top: 32px;
    }
    #page-contact .contact-hero-meta-item {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: rgba(255,255,255,0.78);
      font-size: 14px;
      font-weight: 500;
    }
    #page-contact .contact-hero-meta-icon {
      display: inline-grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: rgba(0,212,170,0.14);
      border: 1px solid rgba(0,212,170,0.28);
      color: #7eead3;
    }
    #page-contact .contact-hero-meta-icon svg {
      width: 14px;
      height: 14px;
    }

    /* Main section background */
    #page-contact .contact-main-section {
      padding: 72px 0 96px;
      background:
        radial-gradient(ellipse 60% 40% at 80% 0%, rgba(0,212,170,0.06), transparent 55%),
        linear-gradient(180deg, #FAFBFD 0%, #F3F6FB 100%);
      position: relative;
    }

    /* Main 2-col grid */
    #page-contact .contact-main-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
      gap: 32px;
      align-items: start;
    }

    /* ==== LEFT: Form card ==== */
    #page-contact .contact-form-wrap {
      position: relative;
    }
    #page-contact .contact-form-card {
      background: #ffffff;
      border: 1px solid var(--gray-100);
      border-radius: 24px;
      padding: 40px 40px 36px;
      box-shadow:
        0 1px 2px rgba(15,23,42,0.05),
        0 10px 26px rgba(15,23,42,0.06),
        0 28px 52px rgba(15,23,42,0.05);
    }
    #page-contact .contact-form-head {
      margin-bottom: 32px;
      padding-bottom: 28px;
      border-bottom: 1px solid var(--gray-100);
    }
    #page-contact .contact-form-head .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      border-radius: 999px;
      background: rgba(0,212,170,0.10);
      border: 1px solid rgba(0,212,170,0.22);
      color: var(--teal-dark);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }
    #page-contact .contact-form-head .eyebrow::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 4px rgba(0,212,170,0.16);
    }
    #page-contact .contact-form-head h2 {
      font-size: clamp(24px, 2.4vw, 30px);
      letter-spacing: -0.02em;
      line-height: 1.18;
      margin: 0 0 10px;
      color: var(--navy);
    }
    #page-contact .contact-form-head p {
      margin: 0;
      color: var(--gray-600);
      font-size: 15px;
      line-height: 1.5;
    }

    /* Form layout */
    #page-contact .contact-form {
      display: flex;
      flex-direction: column;
      gap: 22px;
    }
    #page-contact .contact-form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    /* Topic selector */
    #page-contact .contact-form-topic {
      border: 0;
      padding: 0;
      margin: 0;
    }
    #page-contact .contact-form-topic legend {
      font-size: 13px;
      font-weight: 600;
      color: var(--gray-700);
      margin-bottom: 12px;
      padding: 0;
    }
    #page-contact .contact-topic-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    #page-contact .contact-topic-option {
      position: relative;
      display: block;
      cursor: pointer;
    }
    #page-contact .contact-topic-option input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    #page-contact .contact-topic-inner {
      display: block;
      padding: 14px 16px;
      border: 1.5px solid var(--gray-200);
      border-radius: 14px;
      background: #ffffff;
      transition: all 0.25s ease;
    }
    #page-contact .contact-topic-title {
      display: block;
      font-size: 14.5px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 3px;
      letter-spacing: -0.005em;
    }
    #page-contact .contact-topic-desc {
      display: block;
      font-size: 12.5px;
      color: var(--gray-500);
      line-height: 1.4;
    }
    #page-contact .contact-topic-option:hover .contact-topic-inner {
      border-color: rgba(0,212,170,0.40);
      background: #FAFEFC;
    }
    #page-contact .contact-topic-option input:checked + .contact-topic-inner {
      border-color: var(--teal);
      background: rgba(0,212,170,0.06);
      box-shadow: 0 0 0 3px rgba(0,212,170,0.10);
    }
    #page-contact .contact-topic-option input:checked + .contact-topic-inner .contact-topic-title {
      color: var(--teal-dark);
    }
    #page-contact .contact-topic-option input:focus-visible + .contact-topic-inner {
      outline: 2px solid var(--teal);
      outline-offset: 2px;
    }

    /* Inputs */
    #page-contact .input-group {
      display: flex;
      flex-direction: column;
    }
    #page-contact .input-group label {
      font-size: 13px;
      font-weight: 600;
      color: var(--gray-700);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    #page-contact .contact-optional {
      font-size: 11px;
      font-weight: 500;
      color: var(--gray-400);
      text-transform: none;
      letter-spacing: 0;
    }
    #page-contact .input-group input,
    #page-contact .input-group select,
    #page-contact .input-group textarea {
      width: 100%;
      font-family: inherit;
      font-size: 15px;
      color: var(--navy);
      background: #ffffff;
      padding: 12px 14px;
      border: 1.5px solid var(--gray-200);
      border-radius: 12px;
      transition: all 0.2s ease;
      appearance: none;
      -webkit-appearance: none;
    }
    #page-contact .input-group textarea {
      resize: vertical;
      min-height: 120px;
      line-height: 1.5;
    }
    #page-contact .input-group input:hover,
    #page-contact .input-group select:hover,
    #page-contact .input-group textarea:hover {
      border-color: var(--gray-300);
    }
    #page-contact .input-group input:focus,
    #page-contact .input-group select:focus,
    #page-contact .input-group textarea:focus {
      outline: none;
      border-color: var(--teal);
      box-shadow: 0 0 0 3px rgba(0,212,170,0.12);
    }
    #page-contact .input-hint {
      font-size: 12.5px;
      color: var(--gray-500);
      margin-top: 6px;
      line-height: 1.4;
    }

    /* Custom select */
    #page-contact .contact-select-wrap {
      position: relative;
    }
    #page-contact .contact-select-wrap select {
      padding-right: 42px;
      cursor: pointer;
    }
    #page-contact .contact-select-chevron {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      color: var(--gray-500);
      display: inline-flex;
    }
    #page-contact .contact-select-chevron svg {
      width: 16px;
      height: 16px;
    }

    /* Consent checkbox */
    #page-contact .contact-consent {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 12px;
      align-items: flex-start;
      padding: 14px 16px;
      background: #FAFBFD;
      border: 1px solid var(--gray-100);
      border-radius: 12px;
      cursor: pointer;
    }
    #page-contact .contact-consent input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    #page-contact .contact-consent-box {
      width: 20px;
      height: 20px;
      border-radius: 6px;
      border: 1.5px solid var(--gray-300);
      background: #ffffff;
      display: inline-grid;
      place-items: center;
      color: transparent;
      transition: all 0.2s ease;
      margin-top: 1px;
    }
    #page-contact .contact-consent-box svg {
      width: 12px;
      height: 12px;
    }
    #page-contact .contact-consent:hover .contact-consent-box {
      border-color: var(--gray-400);
    }
    #page-contact .contact-consent input:checked ~ .contact-consent-box {
      background: var(--teal);
      border-color: var(--teal);
      color: var(--navy);
    }
    #page-contact .contact-consent input:focus-visible ~ .contact-consent-box {
      outline: 2px solid var(--teal);
      outline-offset: 2px;
    }
    #page-contact .contact-consent-text {
      font-size: 13px;
      line-height: 1.5;
      color: var(--gray-600);
    }

    /* Submit area */
    #page-contact .contact-form-submit {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
      padding-top: 8px;
    }
    #page-contact .contact-form-submit .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 28px;
      font-size: 15px;
    }
    #page-contact .contact-submit-note {
      font-size: 12.5px;
      color: var(--gray-500);
      flex: 1;
      min-width: 200px;
      line-height: 1.45;
    }

    /* ==== RIGHT: Aside ==== */
    #page-contact .contact-aside {
      display: flex;
      flex-direction: column;
      gap: 20px;
      position: sticky;
      top: 96px;
    }

    #page-contact .contact-aside-card {
      background: #ffffff;
      border: 1px solid var(--gray-100);
      border-radius: 20px;
      padding: 28px 26px;
      box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 6px 18px rgba(15,23,42,0.04);
    }

    #page-contact .contact-aside-eyebrow {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--teal-dark);
      margin-bottom: 18px;
    }
    #page-contact .contact-aside-eyebrow--light {
      color: #7eead3;
    }

    /* Direct contact channels */
    #page-contact .contact-channel-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    #page-contact .contact-channel {
      display: grid;
      grid-template-columns: 40px 1fr;
      gap: 14px;
      align-items: start;
    }
    #page-contact .contact-channel-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: linear-gradient(135deg, rgba(0,212,170,0.10), rgba(0,212,170,0.03));
      border: 1px solid rgba(0,212,170,0.20);
      color: var(--teal-dark);
      display: inline-grid;
      place-items: center;
    }
    #page-contact .contact-channel-icon svg {
      width: 18px;
      height: 18px;
    }
    #page-contact .contact-channel-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--gray-500);
      margin-bottom: 4px;
    }
    #page-contact .contact-channel-value {
      display: block;
      font-size: 15.5px;
      font-weight: 600;
      color: var(--navy);
      text-decoration: none;
      line-height: 1.3;
      letter-spacing: -0.005em;
      transition: color 0.2s ease;
    }
    a.contact-channel-value:hover {
      color: var(--teal-dark);
    }
    #page-contact .contact-channel-value-static {
      font-weight: 600;
    }
    #page-contact .contact-channel-sub {
      font-size: 12.5px;
      color: var(--gray-500);
      margin-top: 4px;
      line-height: 1.4;
    }

    /* Dark promise card */
    #page-contact .contact-aside-card--dark {
      background:
        radial-gradient(ellipse 60% 55% at 100% 0%, rgba(0,212,170,0.14), transparent 60%),
        linear-gradient(180deg, #0F1A30 0%, #0B1222 100%);
      border: 1px solid rgba(0,212,170,0.20);
      color: #ffffff;
      position: relative;
      overflow: hidden;
    }
    #page-contact .contact-aside-card--dark::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 32px 32px;
      -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,0.6), transparent 80%);
              mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,0.6), transparent 80%);
      pointer-events: none;
    }
    #page-contact .contact-aside-card--dark > * {
      position: relative;
      z-index: 1;
    }

    #page-contact .contact-promise-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    #page-contact .contact-promise-list li {
      display: grid;
      grid-template-columns: 22px 1fr;
      gap: 12px;
      align-items: start;
    }
    #page-contact .contact-promise-icon {
      width: 22px;
      height: 22px;
      border-radius: 6px;
      background: rgba(0,212,170,0.22);
      color: var(--teal);
      display: inline-grid;
      place-items: center;
      margin-top: 2px;
      box-shadow: 0 0 0 1px rgba(0,212,170,0.30);
    }
    #page-contact .contact-promise-icon svg {
      width: 12px;
      height: 12px;
    }
    #page-contact .contact-promise-list strong {
      display: block;
      color: #ffffff;
      font-size: 14.5px;
      font-weight: 700;
      letter-spacing: -0.005em;
      margin-bottom: 4px;
    }
    #page-contact .contact-promise-list p {
      margin: 0;
      color: rgba(255,255,255,0.68);
      font-size: 13px;
      line-height: 1.5;
    }

    /* Social icons card */
    #page-contact .contact-aside-socials {
      padding: 4px 6px;
    }
    #page-contact .contact-aside-socials .contact-aside-eyebrow {
      margin-bottom: 12px;
    }
    #page-contact .contact-aside-socials .contact-socials {
      display: flex;
      gap: 10px;
    }
    #page-contact .contact-social-link {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: #ffffff;
      border: 1px solid var(--gray-200);
      display: inline-grid;
      place-items: center;
      color: var(--gray-600);
      transition: all 0.25s ease;
    }
    #page-contact .contact-social-link svg {
      width: 17px;
      height: 17px;
      fill: currentColor;
    }
    #page-contact .contact-social-link:hover {
      background: var(--teal);
      border-color: var(--teal);
      color: var(--navy);
      transform: translateY(-2px);
    }

    /* Responsive */
    @media (max-width: 1024px) {
      #page-contact .contact-main-grid {
        grid-template-columns: 1fr;
      }
      #page-contact .contact-aside {
        position: static;
      }
    }
    @media (max-width: 720px) {
      #page-contact .contact-form-card {
        padding: 28px 24px 28px;
      }
      #page-contact .contact-topic-grid,
      #page-contact .contact-form-row {
        grid-template-columns: 1fr;
      }
      #page-contact .contact-main-section {
        padding: 56px 0 72px;
      }
    }

    /* =====================================================
       DEMO PAGE — Professional redesign with hero image
       Scoped to #page-demo
       ===================================================== */

    /* Subhero meta row */
    #page-demo .demo-subhero {
      padding-bottom: 56px;
    }
    #page-demo .demo-hero-meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 22px 36px;
      margin-top: 32px;
    }
    #page-demo .demo-hero-meta-item {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: rgba(255,255,255,0.80);
      font-size: 14px;
      font-weight: 500;
    }
    #page-demo .demo-hero-meta-icon {
      display: inline-grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: rgba(0,212,170,0.14);
      border: 1px solid rgba(0,212,170,0.28);
      color: #7eead3;
    }
    #page-demo .demo-hero-meta-icon svg {
      width: 14px;
      height: 14px;
    }

    /* Main section background */
    #page-demo .demo-main-section {
      padding: 72px 0 96px;
      background:
        radial-gradient(ellipse 55% 40% at 20% 0%, rgba(0,212,170,0.06), transparent 55%),
        linear-gradient(180deg, #FAFBFD 0%, #F3F6FB 100%);
      position: relative;
    }

    /* Main 2-col grid */
    #page-demo .demo-main-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
      gap: 32px;
      align-items: start;
    }

    /* ===== LEFT: Image + Agenda ===== */
    #page-demo .demo-context-col {
      display: flex;
      flex-direction: column;
      gap: 24px;
      position: sticky;
      top: 96px;
    }

    /* Professional image card */
    #page-demo .demo-visual {
      position: relative;
      margin: 0;
      border-radius: 24px;
      overflow: hidden;
      aspect-ratio: 3 / 2;
      box-shadow:
        0 1px 2px rgba(15,23,42,0.06),
        0 12px 28px rgba(15,23,42,0.10),
        0 32px 64px rgba(15,23,42,0.08);
    }
    #page-demo .demo-visual img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    #page-demo .demo-visual-caption {
      position: absolute;
      left: 20px;
      right: 20px;
      bottom: 20px;
      padding: 18px 20px;
      background: linear-gradient(135deg, rgba(11,18,34,0.92), rgba(15,26,48,0.88));
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 8px 24px rgba(0,0,0,0.24);
    }
    #page-demo .demo-visual-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #7eead3;
      margin-bottom: 8px;
    }
    #page-demo .demo-visual-badge-dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 4px rgba(0,212,170,0.20);
    }
    #page-demo .demo-visual-quote {
      color: #ffffff;
      font-size: 15px;
      line-height: 1.45;
      font-weight: 500;
      letter-spacing: -0.005em;
    }

    /* Agenda card */
    #page-demo .demo-agenda-card {
      background: #ffffff;
      border: 1px solid var(--gray-100);
      border-radius: 20px;
      padding: 28px 28px 24px;
      box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 6px 18px rgba(15,23,42,0.04);
    }
    #page-demo .demo-agenda-head {
      margin-bottom: 20px;
    }
    #page-demo .demo-agenda-head .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 6px 14px;
      border-radius: 999px;
      background: rgba(0,212,170,0.10);
      border: 1px solid rgba(0,212,170,0.22);
      color: var(--teal-dark);
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }
    #page-demo .demo-agenda-head .eyebrow::before {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 3px rgba(0,212,170,0.16);
    }
    #page-demo .demo-agenda-head h2 {
      font-size: clamp(20px, 2vw, 24px);
      line-height: 1.22;
      letter-spacing: -0.015em;
      margin: 0;
      color: var(--navy);
    }

    #page-demo .demo-agenda-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    #page-demo .demo-agenda-item {
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 14px;
      padding-bottom: 16px;
    }
    #page-demo .demo-agenda-item--last {
      padding-bottom: 0;
    }
    #page-demo .demo-agenda-marker {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 2px;
    }
    #page-demo .demo-agenda-index {
      display: inline-grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: linear-gradient(135deg, rgba(0,212,170,0.12), rgba(0,212,170,0.04));
      border: 1px solid rgba(0,212,170,0.22);
      color: var(--teal-dark);
      font-family: 'Sora', var(--font-sans);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    #page-demo .demo-agenda-line {
      flex: 1;
      width: 1.5px;
      background: linear-gradient(180deg, rgba(0,212,170,0.22), rgba(0,212,170,0.04));
      margin-top: 6px;
      min-height: 12px;
    }
    #page-demo .demo-agenda-body {
      padding-bottom: 4px;
    }
    #page-demo .demo-agenda-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 4px;
    }
    #page-demo .demo-agenda-row h3 {
      font-size: 15.5px;
      font-weight: 700;
      letter-spacing: -0.005em;
      color: var(--navy);
      margin: 0;
    }
    #page-demo .demo-agenda-time {
      flex-shrink: 0;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: var(--teal-dark);
      padding: 3px 9px;
      border-radius: 999px;
      background: rgba(0,212,170,0.10);
      border: 1px solid rgba(0,212,170,0.18);
    }
    #page-demo .demo-agenda-time--soft {
      color: var(--gray-600);
      background: var(--gray-100);
      border-color: var(--gray-200);
    }
    #page-demo .demo-agenda-body p {
      margin: 0;
      font-size: 13.5px;
      line-height: 1.55;
      color: var(--gray-600);
    }

    /* ===== RIGHT: Form ===== */
    #page-demo .demo-form-col {
      position: relative;
    }
    #page-demo .demo-form-card {
      background: #ffffff;
      border: 1px solid var(--gray-100);
      border-radius: 24px;
      padding: 40px 40px 36px;
      box-shadow:
        0 1px 2px rgba(15,23,42,0.05),
        0 10px 26px rgba(15,23,42,0.06),
        0 28px 52px rgba(15,23,42,0.05);
    }
    #page-demo .demo-form-head {
      margin-bottom: 32px;
      padding-bottom: 28px;
      border-bottom: 1px solid var(--gray-100);
    }
    #page-demo .demo-form-head .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      border-radius: 999px;
      background: rgba(0,212,170,0.10);
      border: 1px solid rgba(0,212,170,0.22);
      color: var(--teal-dark);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }
    #page-demo .demo-form-head .eyebrow::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 4px rgba(0,212,170,0.16);
    }
    #page-demo .demo-form-head h2 {
      font-size: clamp(22px, 2.2vw, 28px);
      letter-spacing: -0.02em;
      line-height: 1.2;
      margin: 0 0 10px;
      color: var(--navy);
    }
    #page-demo .demo-form-head p {
      margin: 0;
      color: var(--gray-600);
      font-size: 14.5px;
      line-height: 1.5;
    }

    #page-demo .demo-form {
      display: flex;
      flex-direction: column;
      gap: 22px;
    }
    #page-demo .demo-form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    #page-demo .input-group {
      display: flex;
      flex-direction: column;
    }
    #page-demo .input-group label {
      font-size: 13px;
      font-weight: 600;
      color: var(--gray-700);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    #page-demo .demo-optional {
      font-size: 11px;
      font-weight: 500;
      color: var(--gray-400);
      text-transform: none;
      letter-spacing: 0;
    }
    #page-demo .input-group input,
    #page-demo .input-group select,
    #page-demo .input-group textarea {
      width: 100%;
      font-family: inherit;
      font-size: 15px;
      color: var(--navy);
      background: #ffffff;
      padding: 12px 14px;
      border: 1.5px solid var(--gray-200);
      border-radius: 12px;
      transition: all 0.2s ease;
      appearance: none;
      -webkit-appearance: none;
    }
    #page-demo .input-group textarea {
      resize: vertical;
      min-height: 100px;
      line-height: 1.5;
    }
    #page-demo .input-group input:hover,
    #page-demo .input-group select:hover,
    #page-demo .input-group textarea:hover {
      border-color: var(--gray-300);
    }
    #page-demo .input-group input:focus,
    #page-demo .input-group select:focus,
    #page-demo .input-group textarea:focus {
      outline: none;
      border-color: var(--teal);
      box-shadow: 0 0 0 3px rgba(0,212,170,0.12);
    }
    #page-demo .input-hint {
      font-size: 12.5px;
      color: var(--gray-500);
      margin-top: 6px;
      line-height: 1.45;
    }

    /* Custom select */
    #page-demo .demo-select-wrap {
      position: relative;
    }
    #page-demo .demo-select-wrap select {
      padding-right: 42px;
      cursor: pointer;
    }
    #page-demo .demo-select-chevron {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      color: var(--gray-500);
      display: inline-flex;
    }
    #page-demo .demo-select-chevron svg {
      width: 16px;
      height: 16px;
    }

    /* Focus chips */
    #page-demo .demo-focus-group {
      border: 0;
      padding: 0;
      margin: 0;
    }
    #page-demo .demo-focus-group legend {
      padding: 0;
      margin-bottom: 12px;
      display: flex;
      align-items: baseline;
      gap: 10px;
      flex-wrap: wrap;
    }
    #page-demo .demo-focus-group legend > span:first-child {
      font-size: 13px;
      font-weight: 600;
      color: var(--gray-700);
    }
    #page-demo .demo-focus-hint {
      font-size: 11.5px;
      color: var(--gray-400);
      font-weight: 500;
    }
    #page-demo .demo-focus-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    #page-demo .demo-focus-chip {
      position: relative;
      cursor: pointer;
    }
    #page-demo .demo-focus-chip input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    #page-demo .demo-focus-chip-inner {
      display: inline-block;
      padding: 9px 14px;
      border: 1.5px solid var(--gray-200);
      border-radius: 999px;
      background: #ffffff;
      font-size: 13px;
      font-weight: 600;
      color: var(--gray-700);
      transition: all 0.2s ease;
      white-space: nowrap;
    }
    #page-demo .demo-focus-chip:hover .demo-focus-chip-inner {
      border-color: rgba(0,212,170,0.40);
      color: var(--teal-dark);
    }
    #page-demo .demo-focus-chip input:checked + .demo-focus-chip-inner {
      border-color: var(--teal);
      background: rgba(0,212,170,0.08);
      color: var(--teal-dark);
      box-shadow: 0 0 0 3px rgba(0,212,170,0.10);
    }
    #page-demo .demo-focus-chip input:focus-visible + .demo-focus-chip-inner {
      outline: 2px solid var(--teal);
      outline-offset: 2px;
    }

    /* Consent */
    #page-demo .demo-consent {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 12px;
      align-items: flex-start;
      padding: 14px 16px;
      background: #FAFBFD;
      border: 1px solid var(--gray-100);
      border-radius: 12px;
      cursor: pointer;
    }
    #page-demo .demo-consent input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    #page-demo .demo-consent-box {
      width: 20px;
      height: 20px;
      border-radius: 6px;
      border: 1.5px solid var(--gray-300);
      background: #ffffff;
      display: inline-grid;
      place-items: center;
      color: transparent;
      transition: all 0.2s ease;
      margin-top: 1px;
    }
    #page-demo .demo-consent-box svg {
      width: 12px;
      height: 12px;
    }
    #page-demo .demo-consent:hover .demo-consent-box {
      border-color: var(--gray-400);
    }
    #page-demo .demo-consent input:checked ~ .demo-consent-box {
      background: var(--teal);
      border-color: var(--teal);
      color: var(--navy);
    }
    #page-demo .demo-consent input:focus-visible ~ .demo-consent-box {
      outline: 2px solid var(--teal);
      outline-offset: 2px;
    }
    #page-demo .demo-consent-text {
      font-size: 13px;
      line-height: 1.5;
      color: var(--gray-600);
    }

    /* Submit */
    #page-demo .demo-form-submit {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
      padding-top: 8px;
    }
    #page-demo .demo-form-submit .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 28px;
      font-size: 15px;
    }
    #page-demo .demo-submit-note {
      font-size: 12.5px;
      color: var(--gray-500);
      flex: 1;
      min-width: 200px;
      line-height: 1.45;
    }

    /* ===== Promise Section ===== */
    #page-demo .demo-promise-section {
      padding: 88px 0 104px;
      background:
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(0,212,170,0.05), transparent 55%),
        #ffffff;
    }
    #page-demo .demo-promise-header {
      text-align: center;
      max-width: 680px;
      margin: 0 auto 48px;
    }
    #page-demo .demo-promise-header .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      border-radius: 999px;
      background: rgba(0,212,170,0.10);
      border: 1px solid rgba(0,212,170,0.22);
      color: var(--teal-dark);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 20px;
    }
    #page-demo .demo-promise-header .eyebrow::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 4px rgba(0,212,170,0.16);
    }
    #page-demo .demo-promise-header h2 {
      font-size: clamp(26px, 3vw, 36px);
      letter-spacing: -0.025em;
      line-height: 1.18;
      margin: 0;
      color: var(--navy);
    }

    #page-demo .demo-promise-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    #page-demo .demo-promise-card {
      background: #ffffff;
      border: 1px solid var(--gray-100);
      border-radius: 18px;
      padding: 28px 24px;
      transition: all 0.25s ease;
      box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 4px 14px rgba(15,23,42,0.04);
    }
    #page-demo .demo-promise-card:hover {
      transform: translateY(-4px);
      border-color: rgba(0,212,170,0.28);
      box-shadow:
        0 1px 2px rgba(15,23,42,0.05),
        0 12px 28px rgba(15,23,42,0.08);
    }
    #page-demo .demo-promise-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(0,212,170,0.12), rgba(0,212,170,0.04));
      border: 1px solid rgba(0,212,170,0.22);
      color: var(--teal-dark);
      display: inline-grid;
      place-items: center;
      margin-bottom: 18px;
    }
    #page-demo .demo-promise-icon svg {
      width: 20px;
      height: 20px;
    }
    #page-demo .demo-promise-card h3 {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: -0.005em;
      color: var(--navy);
      margin: 0 0 8px;
      line-height: 1.3;
    }
    #page-demo .demo-promise-card p {
      margin: 0;
      font-size: 13.5px;
      line-height: 1.55;
      color: var(--gray-600);
    }

    /* Responsive */
    @media (max-width: 1100px) {
      #page-demo .demo-promise-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 1024px) {
      #page-demo .demo-main-grid {
        grid-template-columns: 1fr;
      }
      #page-demo .demo-context-col {
        position: static;
      }
    }
    @media (max-width: 720px) {
      #page-demo .demo-form-card {
        padding: 28px 24px 28px;
      }
      #page-demo .demo-agenda-card {
        padding: 24px 22px 20px;
      }
      #page-demo .demo-form-row {
        grid-template-columns: 1fr;
      }
      #page-demo .demo-main-section {
        padding: 56px 0 72px;
      }
      #page-demo .demo-promise-section {
        padding: 64px 0 80px;
      }
      #page-demo .demo-promise-grid {
        grid-template-columns: 1fr;
      }
      #page-demo .demo-visual-caption {
        left: 14px;
        right: 14px;
        bottom: 14px;
        padding: 14px 16px;
      }
    }

    /* =====================================================
       HOMEPAGE VALUE MODULE — Full redesign with images
       ===================================================== */

    /* Section wrapper */
    .home-value-section {
      position: relative;
      padding: 96px 0;
      background:
        radial-gradient(ellipse 50% 35% at 50% 0%, rgba(0,212,170,0.05), transparent 55%),
        #ffffff;
    }
    .home-value-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(15,23,42,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,0.025) 1px, transparent 1px);
      background-size: 44px 44px;
      -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,0,0,0.45), transparent 75%);
              mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,0,0,0.45), transparent 75%);
      pointer-events: none;
      opacity: 0.5;
    }
    .home-value-section > .container {
      position: relative;
      z-index: 1;
    }

    /* Header block */
    .home-value-header {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 56px;
    }
    .home-value-header .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      border-radius: 999px;
      background: rgba(0,212,170,0.10);
      border: 1px solid rgba(0,212,170,0.22);
      color: var(--teal-dark);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }
    .home-value-header .eyebrow::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 4px rgba(0,212,170,0.16);
    }
    .home-value-header h2 {
      font-size: clamp(28px, 3vw, 40px);
      letter-spacing: -0.025em;
      line-height: 1.16;
      margin: 0 0 16px;
      color: var(--navy);
    }
    .home-value-intro {
      margin: 0;
      color: var(--gray-600);
      font-size: 15.5px;
      line-height: 1.55;
    }

    /* Grid — override the original minimal definition */
    .home-value-section .home-value-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
    }

    /* Card base — override base styles */
    .home-value-section .home-value-card {
      display: flex;
      flex-direction: column;
      position: relative;
      height: 100%;
      padding: 0;
      background: #ffffff;
      border: 1px solid var(--gray-100);
      border-radius: 22px;
      overflow: hidden;
      box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 6px 20px rgba(15,23,42,0.05);
      transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                  border-color 0.3s ease,
                  box-shadow 0.3s ease;
    }
    /* Kill the old ::before gradient top bar */
    .home-value-section .home-value-card::before {
      display: none;
    }

    /* Visual (image) */
    .home-value-visual {
      position: relative;
      aspect-ratio: 3 / 2;
      overflow: hidden;
      background: linear-gradient(180deg, #F5FDFB 0%, #EBF9F5 100%);
    }
    .home-value-visual img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .home-value-visual-glow {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(ellipse 100% 60% at 50% 100%, rgba(0,212,170,0.08), transparent 70%);
    }

    /* Body */
    .home-value-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 28px 28px 26px;
    }
    .home-value-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      align-self: flex-start;
      padding: 5px 12px;
      border-radius: 999px;
      background: rgba(0,212,170,0.10);
      border: 1px solid rgba(0,212,170,0.22);
      color: var(--teal-dark);
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 14px;
    }
    .home-value-tag::before {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 3px rgba(0,212,170,0.18);
    }
    .home-value-section .home-value-card h3 {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.015em;
      color: var(--navy);
      margin: 0 0 10px;
      line-height: 1.25;
    }
    .home-value-section .home-value-card p {
      margin: 0;
      font-size: 14.5px;
      line-height: 1.55;
      color: var(--gray-600);
    }

    /* Linked variant */
    .home-value-card--linked {
      cursor: pointer;
      display: flex;
      flex-direction: column;
    }
    .home-value-card--linked:hover {
      transform: translateY(-6px);
      border-color: rgba(0,212,170,0.32);
      box-shadow:
        0 2px 4px rgba(15,23,42,0.05),
        0 18px 40px rgba(15,23,42,0.10),
        0 0 0 1px rgba(0,212,170,0.08);
    }
    .home-value-card--linked:hover .home-value-visual img {
      transform: scale(1.04);
    }
    .home-value-card--linked:focus-visible {
      outline: 2px solid var(--teal);
      outline-offset: 3px;
    }

    /* Link row */
    .home-value-linkrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: auto;
      padding-top: 20px;
      color: var(--teal-dark);
      font-size: 13.5px;
      font-weight: 700;
      letter-spacing: -0.005em;
    }
    .home-value-linkrow svg {
      width: 15px;
      height: 15px;
      transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .home-value-card--linked:hover .home-value-linkrow svg {
      transform: translateX(4px);
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .home-value-section .home-value-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 720px) {
      .home-value-section {
        padding: 72px 0;
      }
      .home-value-section .home-value-grid {
        grid-template-columns: 1fr;
      }
      .home-value-body {
        padding: 24px 22px 22px;
      }
      .home-value-header {
        margin-bottom: 40px;
      }
    }

    /* =====================================================
       STRUKTUR PAGE — Tool-chaos vs Platform
       Scoped to #page-struktur
       ===================================================== */

    /* Subhero meta row */
    #page-struktur .struktur-subhero {
      padding-bottom: 56px;
    }
    #page-struktur .struktur-hero-meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 22px 36px;
      margin-top: 32px;
    }
    #page-struktur .struktur-hero-meta-item {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: rgba(255,255,255,0.80);
      font-size: 14px;
      font-weight: 500;
    }
    #page-struktur .struktur-hero-meta-icon {
      display: inline-grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: rgba(0,212,170,0.14);
      border: 1px solid rgba(0,212,170,0.28);
      color: #7eead3;
    }
    #page-struktur .struktur-hero-meta-icon svg {
      width: 14px;
      height: 14px;
    }

    /* === Eyebrow styling (shared across sections) === */
    #page-struktur .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      border-radius: 999px;
      background: rgba(0,212,170,0.10);
      border: 1px solid rgba(0,212,170,0.22);
      color: var(--teal-dark);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }
    #page-struktur .subhero .eyebrow {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(0,212,170,0.28);
    }
    #page-struktur .eyebrow::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 4px rgba(0,212,170,0.16);
    }

    /* ===== Contrast section (Chaos vs Clarity) ===== */
    #page-struktur .struktur-contrast-section {
      padding: 88px 0;
      background:
        radial-gradient(ellipse 60% 40% at 20% 0%, rgba(0,212,170,0.05), transparent 55%),
        linear-gradient(180deg, #FAFBFD 0%, #F3F6FB 100%);
    }
    #page-struktur .struktur-contrast-header {
      text-align: center;
      max-width: 760px;
      margin: 0 auto 56px;
    }
    #page-struktur .struktur-contrast-header h2 {
      font-size: clamp(28px, 3vw, 40px);
      letter-spacing: -0.025em;
      line-height: 1.16;
      margin: 0 0 16px;
      color: var(--navy);
    }
    #page-struktur .struktur-contrast-header p {
      margin: 0;
      color: var(--gray-600);
      font-size: 16px;
      line-height: 1.55;
    }

    #page-struktur .struktur-contrast-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    #page-struktur .struktur-contrast-card {
      position: relative;
      border-radius: 24px;
      padding: 36px 32px 32px;
      overflow: hidden;
    }
    #page-struktur .struktur-contrast-card--chaos {
      background: #FAFBFD;
      border: 1px solid var(--gray-200);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.8);
    }
    #page-struktur .struktur-contrast-card--chaos::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        repeating-linear-gradient(45deg, rgba(15,23,42,0.02) 0 1px, transparent 1px 10px);
      pointer-events: none;
    }
    #page-struktur .struktur-contrast-card--clarity {
      background:
        radial-gradient(ellipse 55% 50% at 100% 0%, rgba(0,212,170,0.14), transparent 60%),
        linear-gradient(180deg, #0F1A30 0%, #0B1222 100%);
      border: 1px solid rgba(0,212,170,0.22);
      color: #ffffff;
      box-shadow: 0 20px 48px rgba(15,23,42,0.12);
    }
    #page-struktur .struktur-contrast-card--clarity::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 40px 40px;
      -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(0,0,0,0.7), transparent 85%);
              mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(0,0,0,0.7), transparent 85%);
      pointer-events: none;
    }
    #page-struktur .struktur-contrast-card > * {
      position: relative;
      z-index: 1;
    }

    #page-struktur .struktur-contrast-label {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 6px 14px;
      border-radius: 999px;
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }
    #page-struktur .struktur-contrast-label--muted {
      background: var(--gray-100);
      border: 1px solid var(--gray-200);
      color: var(--gray-600);
    }
    #page-struktur .struktur-contrast-label--accent {
      background: rgba(0,212,170,0.18);
      border: 1px solid rgba(0,212,170,0.32);
      color: #7eead3;
    }
    #page-struktur .struktur-contrast-label-dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
    }
    #page-struktur .struktur-contrast-label--muted .struktur-contrast-label-dot {
      background: var(--gray-400);
    }
    #page-struktur .struktur-contrast-label--accent .struktur-contrast-label-dot {
      background: var(--teal);
      box-shadow: 0 0 0 4px rgba(0,212,170,0.20);
    }

    #page-struktur .struktur-contrast-heading {
      font-size: clamp(20px, 2.1vw, 24px);
      letter-spacing: -0.02em;
      margin: 0 0 24px;
      line-height: 1.22;
    }
    #page-struktur .struktur-contrast-card--chaos .struktur-contrast-heading {
      color: var(--navy);
    }
    #page-struktur .struktur-contrast-card--clarity .struktur-contrast-heading {
      color: #ffffff;
    }

    /* Chaos cloud */
    #page-struktur .struktur-chaos-cloud {
      position: relative;
      height: 260px;
      margin-bottom: 28px;
    }
    #page-struktur .struktur-chaos-pill {
      position: absolute;
      display: inline-block;
      padding: 9px 14px;
      border-radius: 10px;
      background: #ffffff;
      border: 1px solid var(--gray-200);
      font-size: 13px;
      font-weight: 600;
      color: var(--gray-700);
      box-shadow: 0 4px 12px rgba(15,23,42,0.06);
      white-space: nowrap;
    }
    #page-struktur .struktur-chaos-pill--1 { top: 4%;  left: 2%;  transform: rotate(-5deg); }
    #page-struktur .struktur-chaos-pill--2 { top: 10%; right: 4%; transform: rotate(4deg); }
    #page-struktur .struktur-chaos-pill--3 { top: 28%; left: 18%; transform: rotate(-2deg); }
    #page-struktur .struktur-chaos-pill--4 { top: 32%; right: 14%; transform: rotate(3deg); }
    #page-struktur .struktur-chaos-pill--5 { top: 50%; left: 4%;  transform: rotate(2deg); }
    #page-struktur .struktur-chaos-pill--6 { top: 55%; right: 22%; transform: rotate(-3deg); }
    #page-struktur .struktur-chaos-pill--7 { bottom: 12%; left: 22%; transform: rotate(5deg); }
    #page-struktur .struktur-chaos-pill--8 { bottom: 4%;  right: 6%;  transform: rotate(-4deg); }

    /* Clarity hub */
    #page-struktur .struktur-clarity-hub {
      position: relative;
      height: 260px;
      margin-bottom: 28px;
    }
    #page-struktur .struktur-clarity-center {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 130px;
      height: 130px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(0,212,170,0.38), rgba(0,212,170,0.14) 60%, transparent 70%);
      border: 1.5px solid rgba(0,212,170,0.50);
      display: grid;
      place-items: center;
      z-index: 2;
      box-shadow:
        0 0 0 8px rgba(0,212,170,0.08),
        0 0 0 16px rgba(0,212,170,0.04),
        0 10px 30px rgba(0,212,170,0.20);
    }
    #page-struktur .struktur-clarity-center-label {
      font-family: 'Sora', var(--font-sans);
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: #ffffff;
      line-height: 1;
      margin-bottom: 2px;
    }
    #page-struktur .struktur-clarity-center-sub {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: #7eead3;
    }
    #page-struktur .struktur-clarity-node {
      position: absolute;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.92);
      font-size: 12.5px;
      font-weight: 600;
      letter-spacing: -0.005em;
      z-index: 1;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    #page-struktur .struktur-clarity-node-dot {
      width: 5px;
      height: 5px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 3px rgba(0,212,170,0.18);
    }
    #page-struktur .struktur-clarity-node--1 { top: 10%; left: 6%; }
    #page-struktur .struktur-clarity-node--2 { top: 10%; right: 6%; }
    #page-struktur .struktur-clarity-node--3 { top: 46%; left: 2%; }
    #page-struktur .struktur-clarity-node--4 { top: 46%; right: 2%; }
    #page-struktur .struktur-clarity-node--5 { bottom: 10%; left: 12%; }
    #page-struktur .struktur-clarity-node--6 { bottom: 10%; right: 12%; }

    /* Contrast points list */
    #page-struktur .struktur-contrast-points {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    #page-struktur .struktur-contrast-points li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding-left: 2px;
      font-size: 14px;
      line-height: 1.5;
      color: var(--gray-700);
    }
    #page-struktur .struktur-contrast-points li::before {
      content: '';
      flex-shrink: 0;
      width: 14px;
      height: 14px;
      margin-top: 4px;
      border-radius: 4px;
      background:
        linear-gradient(45deg, transparent 44%, var(--gray-400) 44%, var(--gray-400) 56%, transparent 56%),
        linear-gradient(-45deg, transparent 44%, var(--gray-400) 44%, var(--gray-400) 56%, transparent 56%);
      background-color: #ffffff;
      border: 1px solid var(--gray-200);
    }
    #page-struktur .struktur-contrast-points--accent li {
      color: rgba(255,255,255,0.80);
    }
    #page-struktur .struktur-contrast-points--accent li::before {
      background:
        linear-gradient(45deg, transparent 36%, var(--navy) 36%, var(--navy) 44%, transparent 44%, transparent 56%, var(--navy) 56%, var(--navy) 64%, transparent 64%);
      background-color: var(--teal);
      border-color: rgba(0,212,170,0.50);
      /* Simpler: just a check mark via SVG-style mask */
      background: var(--teal);
      position: relative;
    }
    #page-struktur .struktur-contrast-points--accent li::after {
      content: '';
      position: absolute;
      left: 4px;
      top: 7px;
      width: 6px;
      height: 3px;
      border-left: 1.5px solid var(--navy);
      border-bottom: 1.5px solid var(--navy);
      transform: rotate(-45deg);
    }

    /* ===== Cost section ===== */
    #page-struktur .struktur-cost-section {
      padding: 96px 0;
      background: #ffffff;
    }
    #page-struktur .struktur-cost-header {
      text-align: center;
      max-width: 680px;
      margin: 0 auto 56px;
    }
    #page-struktur .struktur-cost-header h2 {
      font-size: clamp(26px, 2.8vw, 36px);
      letter-spacing: -0.025em;
      line-height: 1.18;
      margin: 0;
      color: var(--navy);
    }
    #page-struktur .struktur-cost-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    #page-struktur .struktur-cost-card {
      position: relative;
      padding: 32px 26px 28px;
      background: #ffffff;
      border: 1px solid var(--gray-100);
      border-radius: 20px;
      box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 4px 14px rgba(15,23,42,0.04);
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
      overflow: hidden;
    }
    #page-struktur .struktur-cost-card::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0.55;
      pointer-events: none;
      background: radial-gradient(ellipse 70% 50% at 100% 0%, rgba(0,212,170,0.06), transparent 60%);
    }
    #page-struktur .struktur-cost-card[data-tone="errors"]::before {
      background: radial-gradient(ellipse 70% 50% at 100% 0%, rgba(239,130,90,0.06), transparent 60%);
    }
    #page-struktur .struktur-cost-card[data-tone="ownership"]::before {
      background: radial-gradient(ellipse 70% 50% at 100% 0%, rgba(106,140,255,0.06), transparent 60%);
    }
    #page-struktur .struktur-cost-card[data-tone="audit"]::before {
      background: radial-gradient(ellipse 70% 50% at 100% 0%, rgba(180,140,255,0.06), transparent 60%);
    }
    #page-struktur .struktur-cost-card > * {
      position: relative;
      z-index: 1;
    }
    #page-struktur .struktur-cost-card:hover {
      transform: translateY(-4px);
      border-color: rgba(0,212,170,0.28);
      box-shadow:
        0 1px 2px rgba(15,23,42,0.05),
        0 12px 28px rgba(15,23,42,0.08);
    }
    #page-struktur .struktur-cost-index {
      font-family: 'Sora', var(--font-sans);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: var(--gray-400);
      margin-bottom: 16px;
    }
    #page-struktur .struktur-cost-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(0,212,170,0.12), rgba(0,212,170,0.04));
      border: 1px solid rgba(0,212,170,0.22);
      color: var(--teal-dark);
      display: inline-grid;
      place-items: center;
      margin-bottom: 18px;
    }
    #page-struktur .struktur-cost-icon svg {
      width: 20px;
      height: 20px;
    }
    #page-struktur .struktur-cost-card h3 {
      font-size: 16.5px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--navy);
      margin: 0 0 8px;
      line-height: 1.28;
    }
    #page-struktur .struktur-cost-card p {
      margin: 0;
      font-size: 13.5px;
      line-height: 1.55;
      color: var(--gray-600);
    }

    /* ===== Principles section ===== */
    #page-struktur .struktur-principles-section {
      padding: 96px 0;
      background:
        radial-gradient(ellipse 60% 40% at 80% 0%, rgba(0,212,170,0.05), transparent 55%),
        linear-gradient(180deg, #FAFBFD 0%, #F3F6FB 100%);
    }
    #page-struktur .struktur-principles-header {
      max-width: 680px;
      margin: 0 0 48px;
    }
    #page-struktur .struktur-principles-header h2 {
      font-size: clamp(26px, 2.8vw, 36px);
      letter-spacing: -0.025em;
      line-height: 1.18;
      margin: 0;
      color: var(--navy);
    }
    #page-struktur .struktur-principles-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    #page-struktur .struktur-principle-card {
      background: #ffffff;
      border: 1px solid var(--gray-100);
      border-radius: 22px;
      padding: 36px 30px 30px;
      box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 6px 18px rgba(15,23,42,0.04);
      display: flex;
      flex-direction: column;
    }
    #page-struktur .struktur-principle-num {
      font-family: 'Sora', var(--font-sans);
      font-size: 36px;
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 1;
      background: linear-gradient(135deg, var(--teal-dark), var(--teal));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom: 20px;
    }
    #page-struktur .struktur-principle-head h3 {
      font-size: 19px;
      font-weight: 700;
      letter-spacing: -0.015em;
      color: var(--navy);
      margin: 0 0 10px;
      line-height: 1.25;
    }
    #page-struktur .struktur-principle-head p {
      margin: 0 0 22px;
      font-size: 14px;
      line-height: 1.55;
      color: var(--gray-600);
    }
    #page-struktur .struktur-principle-list {
      list-style: none;
      padding: 20px 0 0;
      margin: 0;
      border-top: 1px solid var(--gray-100);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    #page-struktur .struktur-principle-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 13.5px;
      line-height: 1.45;
      color: var(--gray-700);
    }
    #page-struktur .struktur-principle-list li::before {
      content: '';
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      margin-top: 2px;
      border-radius: 4px;
      background: rgba(0,212,170,0.14);
      border: 1px solid rgba(0,212,170,0.28);
      position: relative;
    }
    #page-struktur .struktur-principle-list li::after {
      content: '';
      position: absolute;
      margin-left: 4px;
      margin-top: 6px;
      width: 6px;
      height: 3px;
      border-left: 1.5px solid var(--teal-dark);
      border-bottom: 1.5px solid var(--teal-dark);
      transform: rotate(-45deg);
    }

    /* ===== Modules section ===== */
    #page-struktur .struktur-modules-section {
      padding: 96px 0;
      background: #ffffff;
    }
    #page-struktur .struktur-modules-header {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 56px;
    }
    #page-struktur .struktur-modules-header h2 {
      font-size: clamp(26px, 2.8vw, 36px);
      letter-spacing: -0.025em;
      line-height: 1.18;
      margin: 0 0 14px;
      color: var(--navy);
    }
    #page-struktur .struktur-modules-header p {
      margin: 0;
      color: var(--gray-600);
      font-size: 15px;
      line-height: 1.55;
    }
    #page-struktur .struktur-modules-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }
    #page-struktur .struktur-module-card {
      background: #ffffff;
      border: 1px solid var(--gray-100);
      border-radius: 16px;
      padding: 24px 22px 22px;
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
      box-shadow: 0 1px 2px rgba(15,23,42,0.03);
    }
    #page-struktur .struktur-module-card:hover {
      transform: translateY(-3px);
      border-color: rgba(0,212,170,0.28);
      box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 10px 22px rgba(15,23,42,0.06);
    }
    #page-struktur .struktur-module-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: linear-gradient(135deg, rgba(0,212,170,0.12), rgba(0,212,170,0.04));
      border: 1px solid rgba(0,212,170,0.22);
      color: var(--teal-dark);
      display: inline-grid;
      place-items: center;
      margin-bottom: 14px;
    }
    #page-struktur .struktur-module-icon svg {
      width: 18px;
      height: 18px;
    }
    #page-struktur .struktur-module-card h3 {
      font-size: 15.5px;
      font-weight: 700;
      letter-spacing: -0.005em;
      color: var(--navy);
      margin: 0 0 6px;
      line-height: 1.3;
    }
    #page-struktur .struktur-module-card p {
      margin: 0;
      font-size: 13px;
      line-height: 1.5;
      color: var(--gray-600);
    }

    /* ===== CTA section ===== */
    #page-struktur .struktur-cta-section {
      padding: 72px 0 112px;
      background: #ffffff;
    }
    #page-struktur .struktur-cta-panel {
      background:
        radial-gradient(ellipse 60% 60% at 100% 0%, rgba(0,212,170,0.18), transparent 60%),
        radial-gradient(ellipse 60% 60% at 0% 100%, rgba(0,212,170,0.10), transparent 60%),
        linear-gradient(135deg, #0F1A30 0%, #0B1222 100%);
      border: 1px solid rgba(0,212,170,0.22);
      border-radius: 28px;
      padding: 56px 48px;
      color: #ffffff;
      text-align: center;
      position: relative;
      overflow: hidden;
      box-shadow: 0 30px 60px rgba(15,23,42,0.18);
    }
    #page-struktur .struktur-cta-panel::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 36px 36px;
      -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,0.6), transparent 80%);
              mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,0.6), transparent 80%);
      pointer-events: none;
    }
    #page-struktur .struktur-cta-panel > * {
      position: relative;
      z-index: 1;
    }
    #page-struktur .struktur-cta-panel .eyebrow {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(0,212,170,0.28);
    }
    #page-struktur .struktur-cta-panel h2 {
      font-size: clamp(26px, 3vw, 38px);
      letter-spacing: -0.025em;
      line-height: 1.16;
      margin: 0 auto 16px;
      max-width: 780px;
      color: #ffffff;
    }
    #page-struktur .struktur-cta-panel p {
      margin: 0 auto 32px;
      max-width: 680px;
      color: rgba(255,255,255,0.72);
      font-size: 15.5px;
      line-height: 1.55;
    }
    #page-struktur .struktur-cta-panel .hero-actions {
      justify-content: center;
    }

    /* Responsive */
    @media (max-width: 1100px) {
      #page-struktur .struktur-cost-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      #page-struktur .struktur-principles-grid {
        grid-template-columns: 1fr;
      }
      #page-struktur .struktur-modules-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 900px) {
      #page-struktur .struktur-contrast-grid {
        grid-template-columns: 1fr;
      }
      #page-struktur .struktur-chaos-cloud,
      #page-struktur .struktur-clarity-hub {
        height: 240px;
      }
    }
    @media (max-width: 720px) {
      #page-struktur .struktur-contrast-section,
      #page-struktur .struktur-cost-section,
      #page-struktur .struktur-principles-section,
      #page-struktur .struktur-modules-section {
        padding: 64px 0;
      }
      #page-struktur .struktur-contrast-card {
        padding: 28px 24px 26px;
      }
      #page-struktur .struktur-cost-grid {
        grid-template-columns: 1fr;
      }
      #page-struktur .struktur-modules-grid {
        grid-template-columns: 1fr;
      }
      #page-struktur .struktur-cta-panel {
        padding: 40px 28px;
      }
      #page-struktur .struktur-chaos-pill {
        font-size: 12px;
        padding: 7px 11px;
      }
      #page-struktur .struktur-clarity-node {
        font-size: 11.5px;
        padding: 6px 10px;
      }
      #page-struktur .struktur-clarity-center {
        width: 110px;
        height: 110px;
      }
      #page-struktur .struktur-clarity-center-label {
        font-size: 18px;
      }
    }

    /* =====================================================
       TEMPO PAGE — Speed benchmark + day timeline
       Scoped to #page-tempo
       ===================================================== */

    /* Subhero meta row */
    #page-tempo .tempo-subhero {
      padding-bottom: 56px;
    }
    #page-tempo .tempo-hero-meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 22px 36px;
      margin-top: 32px;
    }
    #page-tempo .tempo-hero-meta-item {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: rgba(255,255,255,0.80);
      font-size: 14px;
      font-weight: 500;
    }
    #page-tempo .tempo-hero-meta-icon {
      display: inline-grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: rgba(0,212,170,0.14);
      border: 1px solid rgba(0,212,170,0.28);
      color: #7eead3;
    }
    #page-tempo .tempo-hero-meta-icon svg {
      width: 14px;
      height: 14px;
    }

    /* Shared eyebrow styling */
    #page-tempo .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      border-radius: 999px;
      background: rgba(0,212,170,0.10);
      border: 1px solid rgba(0,212,170,0.22);
      color: var(--teal-dark);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }
    #page-tempo .subhero .eyebrow {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(0,212,170,0.28);
    }
    #page-tempo .eyebrow::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 4px rgba(0,212,170,0.16);
    }

    /* ===== Benchmark section ===== */
    #page-tempo .tempo-benchmark-section {
      padding: 96px 0;
      background:
        radial-gradient(ellipse 55% 45% at 10% 0%, rgba(0,212,170,0.05), transparent 55%),
        linear-gradient(180deg, #FAFBFD 0%, #F3F6FB 100%);
    }
    #page-tempo .tempo-benchmark-header {
      max-width: 760px;
      margin: 0 auto 56px;
      text-align: center;
    }
    #page-tempo .tempo-benchmark-header h2 {
      font-size: clamp(28px, 3vw, 40px);
      letter-spacing: -0.025em;
      line-height: 1.16;
      margin: 0 0 16px;
      color: var(--navy);
    }
    #page-tempo .tempo-benchmark-header p {
      margin: 0;
      color: var(--gray-600);
      font-size: 15.5px;
      line-height: 1.55;
    }

    #page-tempo .tempo-benchmark-list {
      background: #ffffff;
      border: 1px solid var(--gray-100);
      border-radius: 24px;
      padding: 8px 28px;
      box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 10px 24px rgba(15,23,42,0.05);
    }

    #page-tempo .tempo-benchmark-row {
      display: grid;
      grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
      gap: 40px;
      padding: 32px 0;
      border-bottom: 1px solid var(--gray-100);
      align-items: center;
    }
    #page-tempo .tempo-benchmark-row:last-child {
      border-bottom: 0;
    }

    #page-tempo .tempo-benchmark-label {
      padding-right: 4px;
    }
    #page-tempo .tempo-benchmark-process {
      font-size: 16.5px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--navy);
      line-height: 1.3;
      margin-bottom: 6px;
    }
    #page-tempo .tempo-benchmark-desc {
      font-size: 13px;
      color: var(--gray-500);
      line-height: 1.5;
    }

    #page-tempo .tempo-benchmark-bars {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    #page-tempo .tempo-bar {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    #page-tempo .tempo-bar-fill {
      height: 10px;
      border-radius: 999px;
      transform-origin: left center;
      animation: tempoBarGrow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    @keyframes tempoBarGrow {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }
    #page-tempo .tempo-bar--before .tempo-bar-fill {
      background: linear-gradient(90deg, var(--gray-200), var(--gray-300));
    }
    #page-tempo .tempo-bar--after .tempo-bar-fill {
      background: linear-gradient(90deg, var(--teal), var(--teal-dark));
      box-shadow: 0 2px 12px rgba(0,212,170,0.25);
    }
    #page-tempo .tempo-bar-meta {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      padding: 0 2px;
    }
    #page-tempo .tempo-bar-tag {
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gray-500);
    }
    #page-tempo .tempo-bar-tag--accent {
      color: var(--teal-dark);
    }
    #page-tempo .tempo-bar-value {
      font-family: 'Sora', var(--font-sans);
      font-size: 13.5px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--navy);
    }
    #page-tempo .tempo-bar--after .tempo-bar-value {
      color: var(--teal-dark);
    }

    #page-tempo .tempo-benchmark-footnote {
      margin-top: 24px;
      font-size: 12.5px;
      color: var(--gray-500);
      line-height: 1.5;
      padding: 0 8px;
      max-width: 780px;
    }

    /* ===== Levers section ===== */
    #page-tempo .tempo-levers-section {
      padding: 96px 0;
      background: #ffffff;
    }
    #page-tempo .tempo-levers-header {
      max-width: 760px;
      margin: 0 0 48px;
    }
    #page-tempo .tempo-levers-header h2 {
      font-size: clamp(26px, 2.8vw, 36px);
      letter-spacing: -0.025em;
      line-height: 1.18;
      margin: 0;
      color: var(--navy);
    }

    #page-tempo .tempo-levers-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    #page-tempo .tempo-lever-card {
      display: grid;
      grid-template-columns: 180px minmax(0, 1fr);
      gap: 32px;
      background: #ffffff;
      border: 1px solid var(--gray-100);
      border-radius: 22px;
      padding: 32px 36px;
      box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 6px 18px rgba(15,23,42,0.04);
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
      position: relative;
      overflow: hidden;
    }
    #page-tempo .tempo-lever-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 4px;
      background: linear-gradient(180deg, var(--teal), var(--teal-dark));
      opacity: 0;
      transition: opacity 0.25s ease;
    }
    #page-tempo .tempo-lever-card:hover {
      transform: translateX(3px);
      border-color: rgba(0,212,170,0.28);
      box-shadow:
        0 1px 2px rgba(15,23,42,0.05),
        0 12px 28px rgba(15,23,42,0.08);
    }
    #page-tempo .tempo-lever-card:hover::before {
      opacity: 1;
    }
    #page-tempo .tempo-lever-card--alt {
      background: linear-gradient(135deg, #FAFBFD 0%, #F3F6FB 100%);
    }

    #page-tempo .tempo-lever-visual {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 16px;
    }
    #page-tempo .tempo-lever-number {
      font-family: 'Sora', var(--font-sans);
      font-size: 48px;
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 1;
      background: linear-gradient(135deg, var(--teal-dark), var(--teal));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    #page-tempo .tempo-lever-icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(0,212,170,0.14), rgba(0,212,170,0.04));
      border: 1px solid rgba(0,212,170,0.22);
      color: var(--teal-dark);
      display: inline-grid;
      place-items: center;
    }
    #page-tempo .tempo-lever-icon svg {
      width: 24px;
      height: 24px;
    }

    #page-tempo .tempo-lever-body h3 {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.015em;
      color: var(--navy);
      margin: 0 0 10px;
      line-height: 1.25;
    }
    #page-tempo .tempo-lever-body p {
      margin: 0 0 18px;
      font-size: 14.5px;
      line-height: 1.55;
      color: var(--gray-600);
    }
    #page-tempo .tempo-lever-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    #page-tempo .tempo-lever-tags span {
      display: inline-flex;
      align-items: center;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(0,212,170,0.08);
      border: 1px solid rgba(0,212,170,0.18);
      font-size: 12px;
      font-weight: 600;
      color: var(--teal-dark);
      letter-spacing: -0.005em;
    }

    /* ===== Day timeline section ===== */
    #page-tempo .tempo-day-section {
      padding: 96px 0;
      background:
        radial-gradient(ellipse 60% 40% at 90% 100%, rgba(0,212,170,0.05), transparent 55%),
        linear-gradient(180deg, #FAFBFD 0%, #F3F6FB 100%);
    }
    #page-tempo .tempo-day-header {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 56px;
    }
    #page-tempo .tempo-day-header h2 {
      font-size: clamp(26px, 2.8vw, 36px);
      letter-spacing: -0.025em;
      line-height: 1.18;
      margin: 0 0 14px;
      color: var(--navy);
    }
    #page-tempo .tempo-day-header p {
      margin: 0;
      color: var(--gray-600);
      font-size: 15px;
      line-height: 1.55;
    }

    #page-tempo .tempo-day-timeline {
      max-width: 840px;
      margin: 0 auto;
      background: #ffffff;
      border: 1px solid var(--gray-100);
      border-radius: 24px;
      padding: 36px 32px;
      box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 10px 24px rgba(15,23,42,0.05);
    }

    #page-tempo .tempo-day-item {
      display: grid;
      grid-template-columns: 64px 40px minmax(0, 1fr);
      gap: 20px;
      align-items: start;
    }
    #page-tempo .tempo-day-time {
      font-family: 'Sora', var(--font-sans);
      font-size: 14.5px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--teal-dark);
      padding-top: 3px;
      text-align: right;
    }
    #page-tempo .tempo-day-connector {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 64px;
    }
    #page-tempo .tempo-day-dot {
      width: 14px;
      height: 14px;
      border-radius: 999px;
      background: var(--teal);
      border: 3px solid #ffffff;
      box-shadow:
        0 0 0 2px rgba(0,212,170,0.28),
        0 0 0 6px rgba(0,212,170,0.08);
      margin-top: 6px;
      position: relative;
      z-index: 2;
    }
    #page-tempo .tempo-day-line {
      flex: 1;
      width: 2px;
      background: linear-gradient(180deg, rgba(0,212,170,0.35), rgba(0,212,170,0.08));
      margin-top: 4px;
    }
    #page-tempo .tempo-day-connector--last .tempo-day-line {
      display: none;
    }
    #page-tempo .tempo-day-content {
      padding-bottom: 28px;
    }
    #page-tempo .tempo-day-item:last-child .tempo-day-content {
      padding-bottom: 0;
    }
    #page-tempo .tempo-day-content h3 {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: -0.005em;
      color: var(--navy);
      margin: 0 0 6px;
      line-height: 1.3;
    }
    #page-tempo .tempo-day-content p {
      margin: 0;
      font-size: 13.5px;
      line-height: 1.55;
      color: var(--gray-600);
    }

    #page-tempo .tempo-day-summary {
      max-width: 840px;
      margin: 32px auto 0;
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 16px;
      align-items: start;
      padding: 24px 28px;
      background:
        radial-gradient(ellipse 60% 100% at 0% 50%, rgba(0,212,170,0.10), transparent 60%),
        #ffffff;
      border: 1px solid rgba(0,212,170,0.22);
      border-radius: 18px;
    }
    #page-tempo .tempo-day-summary-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: var(--teal);
      color: var(--navy);
      display: inline-grid;
      place-items: center;
      margin-top: 2px;
    }
    #page-tempo .tempo-day-summary-icon svg {
      width: 20px;
      height: 20px;
    }
    #page-tempo .tempo-day-summary-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    #page-tempo .tempo-day-summary-text strong {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--navy);
    }
    #page-tempo .tempo-day-summary-text span {
      font-size: 14px;
      color: var(--gray-600);
      line-height: 1.5;
    }

    /* ===== CTA section ===== */
    #page-tempo .tempo-cta-section {
      padding: 72px 0 112px;
      background: #ffffff;
    }
    #page-tempo .tempo-cta-panel {
      background:
        radial-gradient(ellipse 60% 60% at 100% 0%, rgba(0,212,170,0.18), transparent 60%),
        radial-gradient(ellipse 60% 60% at 0% 100%, rgba(0,212,170,0.10), transparent 60%),
        linear-gradient(135deg, #0F1A30 0%, #0B1222 100%);
      border: 1px solid rgba(0,212,170,0.22);
      border-radius: 28px;
      padding: 56px 48px;
      color: #ffffff;
      text-align: center;
      position: relative;
      overflow: hidden;
      box-shadow: 0 30px 60px rgba(15,23,42,0.18);
    }
    #page-tempo .tempo-cta-panel::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 36px 36px;
      -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,0.6), transparent 80%);
              mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,0.6), transparent 80%);
      pointer-events: none;
    }
    #page-tempo .tempo-cta-panel > * {
      position: relative;
      z-index: 1;
    }
    #page-tempo .tempo-cta-panel .eyebrow {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(0,212,170,0.28);
    }
    #page-tempo .tempo-cta-panel h2 {
      font-size: clamp(26px, 3vw, 38px);
      letter-spacing: -0.025em;
      line-height: 1.16;
      margin: 0 auto 16px;
      max-width: 780px;
      color: #ffffff;
    }
    #page-tempo .tempo-cta-panel p {
      margin: 0 auto 32px;
      max-width: 680px;
      color: rgba(255,255,255,0.72);
      font-size: 15.5px;
      line-height: 1.55;
    }
    #page-tempo .tempo-cta-panel .hero-actions {
      justify-content: center;
    }

    /* Responsive */
    @media (max-width: 1024px) {
      #page-tempo .tempo-benchmark-row {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      #page-tempo .tempo-lever-card {
        grid-template-columns: 120px minmax(0, 1fr);
        gap: 24px;
        padding: 28px 28px;
      }
      #page-tempo .tempo-lever-number {
        font-size: 40px;
      }
    }
    @media (max-width: 720px) {
      #page-tempo .tempo-benchmark-section,
      #page-tempo .tempo-levers-section,
      #page-tempo .tempo-day-section {
        padding: 64px 0;
      }
      #page-tempo .tempo-benchmark-list {
        padding: 0 20px;
      }
      #page-tempo .tempo-benchmark-row {
        padding: 24px 0;
      }
      #page-tempo .tempo-lever-card {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 24px 22px;
      }
      #page-tempo .tempo-lever-visual {
        flex-direction: row;
        align-items: center;
      }
      #page-tempo .tempo-lever-number {
        font-size: 36px;
      }
      #page-tempo .tempo-day-timeline {
        padding: 24px 20px;
      }
      #page-tempo .tempo-day-item {
        grid-template-columns: 52px 32px minmax(0, 1fr);
        gap: 14px;
      }
      #page-tempo .tempo-day-time {
        font-size: 13px;
      }
      #page-tempo .tempo-day-summary {
        padding: 20px 22px;
      }
      #page-tempo .tempo-cta-panel {
        padding: 40px 28px;
      }
    }

    /* =====================================================
       PLANBAR PAGE — Scaling curves + growth stages
       Scoped to #page-planbar
       ===================================================== */

    /* Subhero meta row */
    #page-planbar .planbar-subhero {
      padding-bottom: 56px;
    }
    #page-planbar .planbar-hero-meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 22px 36px;
      margin-top: 32px;
    }
    #page-planbar .planbar-hero-meta-item {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: rgba(255,255,255,0.80);
      font-size: 14px;
      font-weight: 500;
    }
    #page-planbar .planbar-hero-meta-icon {
      display: inline-grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: rgba(0,212,170,0.14);
      border: 1px solid rgba(0,212,170,0.28);
      color: #7eead3;
    }
    #page-planbar .planbar-hero-meta-icon svg {
      width: 14px;
      height: 14px;
    }

    /* Shared eyebrow */
    #page-planbar .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      border-radius: 999px;
      background: rgba(0,212,170,0.10);
      border: 1px solid rgba(0,212,170,0.22);
      color: var(--teal-dark);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }
    #page-planbar .subhero .eyebrow {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(0,212,170,0.28);
    }
    #page-planbar .eyebrow::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 4px rgba(0,212,170,0.16);
    }

    /* ===== Curve Section ===== */
    #page-planbar .planbar-curve-section {
      padding: 96px 0;
      background:
        radial-gradient(ellipse 55% 45% at 90% 0%, rgba(0,212,170,0.05), transparent 55%),
        linear-gradient(180deg, #FAFBFD 0%, #F3F6FB 100%);
    }
    #page-planbar .planbar-curve-header {
      text-align: center;
      max-width: 760px;
      margin: 0 auto 48px;
    }
    #page-planbar .planbar-curve-header h2 {
      font-size: clamp(28px, 3vw, 40px);
      letter-spacing: -0.025em;
      line-height: 1.16;
      margin: 0 0 16px;
      color: var(--navy);
    }
    #page-planbar .planbar-curve-header p {
      margin: 0;
      color: var(--gray-600);
      font-size: 15.5px;
      line-height: 1.55;
    }

    #page-planbar .planbar-curve-card {
      background: #ffffff;
      border: 1px solid var(--gray-100);
      border-radius: 24px;
      padding: 36px 40px 32px;
      box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 14px 36px rgba(15,23,42,0.06);
    }

    #page-planbar .planbar-curve-legend {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-bottom: 28px;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--gray-100);
    }
    #page-planbar .planbar-curve-legend-item {
      display: grid;
      grid-template-columns: 16px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
    }
    #page-planbar .planbar-curve-legend-dot {
      width: 12px;
      height: 12px;
      border-radius: 999px;
      margin-top: 4px;
    }
    #page-planbar .planbar-curve-legend-item--classic .planbar-curve-legend-dot {
      background: #FFFFFF;
      border: 2px solid var(--gray-400);
    }
    #page-planbar .planbar-curve-legend-item--accent .planbar-curve-legend-dot {
      background: var(--teal);
      box-shadow: 0 0 0 3px rgba(0,212,170,0.16);
    }
    #page-planbar .planbar-curve-legend-title {
      font-size: 14.5px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--navy);
      margin-bottom: 2px;
    }
    #page-planbar .planbar-curve-legend-desc {
      font-size: 13px;
      color: var(--gray-600);
      line-height: 1.5;
    }

    /* SVG container */
    #page-planbar .planbar-curve-visual {
      background: linear-gradient(180deg, #FAFBFD 0%, #FFFFFF 100%);
      border: 1px solid var(--gray-100);
      border-radius: 16px;
      padding: 16px;
      overflow: hidden;
    }
    #page-planbar .planbar-curve-svg {
      width: 100%;
      height: auto;
      display: block;
    }

    /* SVG line draw animation */
    #page-planbar .planbar-curve-line {
      stroke-dasharray: 1200;
      stroke-dashoffset: 1200;
      animation: planbarDrawLine 1.6s ease-out 0.2s forwards;
    }
    #page-planbar .planbar-curve-line--platform {
      animation-delay: 0.6s;
    }
    @keyframes planbarDrawLine {
      to { stroke-dashoffset: 0; }
    }

    /* Insights row below SVG */
    #page-planbar .planbar-curve-insights {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 24px;
    }
    #page-planbar .planbar-curve-insight {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 18px;
      background: rgba(0,212,170,0.04);
      border: 1px solid rgba(0,212,170,0.14);
      border-radius: 14px;
    }
    #page-planbar .planbar-curve-insight-num {
      font-family: 'Sora', var(--font-sans);
      font-size: 28px;
      font-weight: 700;
      line-height: 1;
      background: linear-gradient(135deg, var(--teal-dark), var(--teal));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      flex-shrink: 0;
    }
    #page-planbar .planbar-curve-insight-text {
      font-size: 13.5px;
      line-height: 1.4;
      color: var(--gray-700);
      font-weight: 500;
    }

    /* ===== Stages Section ===== */
    #page-planbar .planbar-stages-section {
      padding: 96px 0;
      background: #ffffff;
    }
    #page-planbar .planbar-stages-header {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 56px;
    }
    #page-planbar .planbar-stages-header h2 {
      font-size: clamp(26px, 2.8vw, 36px);
      letter-spacing: -0.025em;
      line-height: 1.18;
      margin: 0 0 14px;
      color: var(--navy);
    }
    #page-planbar .planbar-stages-header p {
      margin: 0;
      color: var(--gray-600);
      font-size: 15px;
      line-height: 1.55;
    }

    #page-planbar .planbar-stages-track {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    #page-planbar .planbar-stages-line {
      position: absolute;
      top: 102px;
      left: 12%;
      right: 12%;
      height: 2px;
      background: linear-gradient(90deg, rgba(0,212,170,0.18) 0%, rgba(0,212,170,0.45) 50%, var(--teal) 100%);
      z-index: 0;
    }

    #page-planbar .planbar-stage-card {
      position: relative;
      background: #ffffff;
      border: 1px solid var(--gray-100);
      border-radius: 20px;
      padding: 28px 24px 26px;
      box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 6px 18px rgba(15,23,42,0.04);
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }
    #page-planbar .planbar-stage-card:hover {
      transform: translateY(-3px);
      border-color: rgba(0,212,170,0.28);
      box-shadow:
        0 1px 2px rgba(15,23,42,0.05),
        0 12px 28px rgba(15,23,42,0.08);
    }
    #page-planbar .planbar-stage-card--hero {
      background:
        radial-gradient(ellipse 60% 60% at 100% 0%, rgba(0,212,170,0.12), transparent 60%),
        #FAFEFC;
      border-color: rgba(0,212,170,0.28);
    }
    #page-planbar .planbar-stage-top {
      text-align: center;
      margin-bottom: 22px;
      padding-bottom: 16px;
    }
    #page-planbar .planbar-stage-phase {
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--teal-dark);
      margin-bottom: 10px;
    }
    #page-planbar .planbar-stage-number {
      font-family: 'Sora', var(--font-sans);
      font-size: 52px;
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 0.95;
      color: var(--navy);
      margin-bottom: 4px;
    }
    #page-planbar .planbar-stage-card--hero .planbar-stage-number {
      background: linear-gradient(135deg, var(--teal-dark), var(--teal));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    #page-planbar .planbar-stage-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--gray-500);
      letter-spacing: 0.02em;
    }
    #page-planbar .planbar-stage-marker {
      position: absolute;
      top: 96px;
      left: 50%;
      transform: translateX(-50%);
      width: 14px;
      height: 14px;
      border-radius: 999px;
      background: var(--teal);
      border: 3px solid #ffffff;
      box-shadow:
        0 0 0 2px rgba(0,212,170,0.35),
        0 4px 12px rgba(0,212,170,0.22);
      z-index: 1;
    }
    #page-planbar .planbar-stage-card--hero .planbar-stage-marker {
      box-shadow:
        0 0 0 2px var(--teal),
        0 0 0 6px rgba(0,212,170,0.18),
        0 4px 14px rgba(0,212,170,0.35);
    }
    #page-planbar .planbar-stage-list {
      list-style: none;
      padding: 20px 0 0;
      margin: 0;
      border-top: 1px solid var(--gray-100);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    #page-planbar .planbar-stage-list li {
      position: relative;
      padding-left: 22px;
      font-size: 13px;
      line-height: 1.45;
      color: var(--gray-700);
    }
    #page-planbar .planbar-stage-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 5px;
      width: 12px;
      height: 12px;
      border-radius: 4px;
      background: rgba(0,212,170,0.14);
      border: 1px solid rgba(0,212,170,0.28);
    }
    #page-planbar .planbar-stage-list li::after {
      content: '';
      position: absolute;
      left: 3px;
      top: 9px;
      width: 5px;
      height: 2.5px;
      border-left: 1.5px solid var(--teal-dark);
      border-bottom: 1.5px solid var(--teal-dark);
      transform: rotate(-45deg);
    }

    /* ===== Dimensions Section ===== */
    #page-planbar .planbar-dimensions-section {
      padding: 96px 0;
      background:
        radial-gradient(ellipse 55% 45% at 10% 100%, rgba(0,212,170,0.05), transparent 55%),
        linear-gradient(180deg, #FAFBFD 0%, #F3F6FB 100%);
    }
    #page-planbar .planbar-dimensions-header {
      max-width: 720px;
      margin: 0 0 48px;
    }
    #page-planbar .planbar-dimensions-header h2 {
      font-size: clamp(26px, 2.8vw, 36px);
      letter-spacing: -0.025em;
      line-height: 1.18;
      margin: 0;
      color: var(--navy);
    }

    #page-planbar .planbar-dimensions-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }
    #page-planbar .planbar-dimension-card {
      position: relative;
      background: #ffffff;
      border: 1px solid var(--gray-100);
      border-radius: 22px;
      padding: 32px 30px 28px;
      box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 6px 18px rgba(15,23,42,0.04);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }
    #page-planbar .planbar-dimension-card::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 180px;
      height: 180px;
      background: radial-gradient(circle at 100% 0%, rgba(0,212,170,0.10), transparent 70%);
      pointer-events: none;
    }
    #page-planbar .planbar-dimension-card:hover {
      transform: translateY(-4px);
      border-color: rgba(0,212,170,0.28);
      box-shadow:
        0 1px 2px rgba(15,23,42,0.05),
        0 14px 30px rgba(15,23,42,0.08);
    }
    #page-planbar .planbar-dimension-card--alt {
      background:
        radial-gradient(ellipse 60% 60% at 100% 0%, rgba(0,212,170,0.10), transparent 60%),
        #FAFEFC;
      border-color: rgba(0,212,170,0.28);
    }

    #page-planbar .planbar-dimension-stat {
      display: flex;
      align-items: baseline;
      gap: 12px;
      margin-bottom: 20px;
      padding-bottom: 18px;
      border-bottom: 1px dashed var(--gray-200);
      position: relative;
      z-index: 1;
    }
    #page-planbar .planbar-dimension-big {
      font-family: 'Sora', var(--font-sans);
      font-size: 56px;
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 0.95;
      background: linear-gradient(135deg, var(--teal-dark), var(--teal));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    #page-planbar .planbar-dimension-small {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--gray-600);
      line-height: 1.4;
      letter-spacing: -0.005em;
    }

    #page-planbar .planbar-dimension-card h3 {
      font-size: 19px;
      font-weight: 700;
      letter-spacing: -0.015em;
      color: var(--navy);
      margin: 0 0 10px;
      line-height: 1.25;
      position: relative;
      z-index: 1;
    }
    #page-planbar .planbar-dimension-card p {
      margin: 0 0 20px;
      font-size: 14px;
      line-height: 1.55;
      color: var(--gray-600);
      position: relative;
      z-index: 1;
      flex: 1;
    }
    #page-planbar .planbar-dimension-footer {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--teal-dark);
      padding: 12px 14px;
      background: rgba(0,212,170,0.06);
      border-radius: 10px;
      border-left: 2px solid var(--teal);
      line-height: 1.4;
      letter-spacing: -0.005em;
      position: relative;
      z-index: 1;
    }

    /* ===== Matrix Section ===== */
    #page-planbar .planbar-matrix-section {
      padding: 96px 0;
      background: #ffffff;
    }
    #page-planbar .planbar-matrix-inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 48px;
      align-items: center;
      background:
        radial-gradient(ellipse 50% 80% at 0% 50%, rgba(0,212,170,0.05), transparent 60%),
        #FAFBFD;
      border: 1px solid var(--gray-100);
      border-radius: 28px;
      padding: 48px 48px;
    }
    #page-planbar .planbar-matrix-left h2 {
      font-size: clamp(24px, 2.6vw, 32px);
      letter-spacing: -0.02em;
      line-height: 1.2;
      margin: 0 0 14px;
      color: var(--navy);
    }
    #page-planbar .planbar-matrix-left > p {
      margin: 0 0 24px;
      color: var(--gray-600);
      font-size: 14.5px;
      line-height: 1.55;
    }
    #page-planbar .planbar-matrix-footer {
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      padding: 14px 16px;
      background: #ffffff;
      border: 1px solid var(--gray-200);
      border-radius: 12px;
    }
    #page-planbar .planbar-matrix-footer-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: rgba(0,212,170,0.10);
      color: var(--teal-dark);
      display: inline-grid;
      place-items: center;
    }
    #page-planbar .planbar-matrix-footer-icon svg {
      width: 16px;
      height: 16px;
    }
    #page-planbar .planbar-matrix-footer-text {
      font-size: 13px;
      line-height: 1.45;
      color: var(--gray-700);
      padding-top: 6px;
    }

    #page-planbar .planbar-matrix-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 10px;
    }
    #page-planbar .planbar-matrix-list li {
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr);
      gap: 14px;
      align-items: center;
      padding: 14px 18px;
      background: #ffffff;
      border: 1px solid var(--gray-100);
      border-radius: 12px;
      transition: transform 0.2s ease, border-color 0.2s ease;
    }
    #page-planbar .planbar-matrix-list li:hover {
      transform: translateX(3px);
      border-color: rgba(0,212,170,0.28);
    }
    #page-planbar .planbar-matrix-check {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: linear-gradient(135deg, var(--teal), var(--teal-dark));
      color: #ffffff;
      display: inline-grid;
      place-items: center;
      box-shadow: 0 4px 10px rgba(0,212,170,0.25);
    }
    #page-planbar .planbar-matrix-check svg {
      width: 14px;
      height: 14px;
    }
    #page-planbar .planbar-matrix-list li span:last-child {
      font-size: 14.5px;
      font-weight: 600;
      color: var(--navy);
      letter-spacing: -0.005em;
    }

    /* ===== CTA Section ===== */
    #page-planbar .planbar-cta-section {
      padding: 72px 0 112px;
      background: #ffffff;
    }
    #page-planbar .planbar-cta-panel {
      background:
        radial-gradient(ellipse 60% 60% at 100% 0%, rgba(0,212,170,0.18), transparent 60%),
        radial-gradient(ellipse 60% 60% at 0% 100%, rgba(0,212,170,0.10), transparent 60%),
        linear-gradient(135deg, #0F1A30 0%, #0B1222 100%);
      border: 1px solid rgba(0,212,170,0.22);
      border-radius: 28px;
      padding: 56px 48px;
      color: #ffffff;
      text-align: center;
      position: relative;
      overflow: hidden;
      box-shadow: 0 30px 60px rgba(15,23,42,0.18);
    }
    #page-planbar .planbar-cta-panel::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 36px 36px;
      -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,0.6), transparent 80%);
              mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,0.6), transparent 80%);
      pointer-events: none;
    }
    #page-planbar .planbar-cta-panel > * {
      position: relative;
      z-index: 1;
    }
    #page-planbar .planbar-cta-panel .eyebrow {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(0,212,170,0.28);
    }
    #page-planbar .planbar-cta-panel h2 {
      font-size: clamp(26px, 3vw, 38px);
      letter-spacing: -0.025em;
      line-height: 1.16;
      margin: 0 auto 16px;
      max-width: 780px;
      color: #ffffff;
    }
    #page-planbar .planbar-cta-panel p {
      margin: 0 auto 32px;
      max-width: 680px;
      color: rgba(255,255,255,0.72);
      font-size: 15.5px;
      line-height: 1.55;
    }
    #page-planbar .planbar-cta-panel .hero-actions {
      justify-content: center;
    }

    /* Responsive */
    @media (max-width: 1100px) {
      #page-planbar .planbar-stages-track {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }
      #page-planbar .planbar-stages-line {
        display: none;
      }
      #page-planbar .planbar-dimensions-grid {
        grid-template-columns: 1fr;
      }
      #page-planbar .planbar-curve-insights {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 900px) {
      #page-planbar .planbar-matrix-inner {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 36px 28px;
      }
      #page-planbar .planbar-curve-legend {
        grid-template-columns: 1fr;
        gap: 14px;
      }
    }
    @media (max-width: 720px) {
      #page-planbar .planbar-curve-section,
      #page-planbar .planbar-stages-section,
      #page-planbar .planbar-dimensions-section,
      #page-planbar .planbar-matrix-section {
        padding: 64px 0;
      }
      #page-planbar .planbar-curve-card {
        padding: 24px 20px;
      }
      #page-planbar .planbar-stages-track {
        grid-template-columns: 1fr;
      }
      #page-planbar .planbar-stage-marker {
        display: none;
      }
      #page-planbar .planbar-stage-number {
        font-size: 44px;
      }
      #page-planbar .planbar-dimension-big {
        font-size: 48px;
      }
      #page-planbar .planbar-matrix-inner {
        padding: 28px 22px;
      }
      #page-planbar .planbar-cta-panel {
        padding: 40px 28px;
      }
    }

    /* =====================================================
       HOMEPAGE — Modules Section redesign
       ===================================================== */
    .home-modules-section {
      position: relative;
      padding: 96px 0;
      background: #ffffff;
    }
    .home-modules-header {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 56px;
    }
    .home-modules-header .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      border-radius: 999px;
      background: rgba(0,212,170,0.10);
      border: 1px solid rgba(0,212,170,0.22);
      color: var(--teal-dark);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }
    .home-modules-header .eyebrow::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 4px rgba(0,212,170,0.16);
    }
    .home-modules-header h2 {
      font-size: clamp(28px, 3vw, 40px);
      letter-spacing: -0.025em;
      line-height: 1.16;
      margin: 0 0 16px;
      color: var(--navy);
    }
    .home-modules-header p {
      margin: 0;
      color: var(--gray-600);
      font-size: 15.5px;
      line-height: 1.55;
    }

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

    .home-module-card {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 32px 28px 26px;
      background: #ffffff;
      border: 1px solid var(--gray-100);
      border-radius: 20px;
      text-decoration: none;
      cursor: pointer;
      box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 4px 14px rgba(15,23,42,0.04);
      transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                  border-color 0.25s ease,
                  box-shadow 0.25s ease;
      overflow: hidden;
    }
    .home-module-card::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 160px;
      height: 160px;
      background: radial-gradient(circle at 100% 0%, rgba(0,212,170,0.10), transparent 70%);
      pointer-events: none;
    }
    .home-module-card:hover {
      transform: translateY(-4px);
      border-color: rgba(0,212,170,0.28);
      box-shadow:
        0 1px 2px rgba(15,23,42,0.05),
        0 14px 30px rgba(15,23,42,0.08);
    }
    .home-module-card:focus-visible {
      outline: 2px solid var(--teal);
      outline-offset: 3px;
    }
    .home-module-card--primary {
      background:
        radial-gradient(ellipse 50% 50% at 100% 0%, rgba(0,212,170,0.08), transparent 60%),
        #ffffff;
    }

    .home-module-icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(0,212,170,0.14), rgba(0,212,170,0.04));
      border: 1px solid rgba(0,212,170,0.22);
      color: var(--teal-dark);
      display: inline-grid;
      place-items: center;
      margin-bottom: 22px;
      position: relative;
      z-index: 1;
    }
    .home-module-icon svg {
      width: 24px;
      height: 24px;
    }
    .home-module-card--primary .home-module-icon {
      background: linear-gradient(135deg, rgba(0,212,170,0.20), rgba(0,212,170,0.08));
      border-color: rgba(0,212,170,0.32);
    }

    .home-module-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      align-self: flex-start;
      padding: 4px 12px;
      border-radius: 999px;
      background: var(--gray-100);
      color: var(--gray-600);
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 12px;
      position: relative;
      z-index: 1;
    }
    .home-module-card--primary .home-module-tag {
      background: rgba(0,212,170,0.10);
      color: var(--teal-dark);
    }
    .home-module-card h3 {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -0.015em;
      color: var(--navy);
      margin: 0 0 10px;
      line-height: 1.25;
      position: relative;
      z-index: 1;
    }
    .home-module-card p {
      margin: 0;
      font-size: 14px;
      line-height: 1.55;
      color: var(--gray-600);
      position: relative;
      z-index: 1;
      flex: 1;
    }
    .home-module-linkrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid var(--gray-100);
      color: var(--teal-dark);
      font-size: 13.5px;
      font-weight: 700;
      letter-spacing: -0.005em;
      position: relative;
      z-index: 1;
    }
    .home-module-linkrow svg {
      width: 15px;
      height: 15px;
      transition: transform 0.25s ease;
    }
    .home-module-card:hover .home-module-linkrow svg {
      transform: translateX(4px);
    }

    /* =====================================================
       HOMEPAGE — Advantage Section redesign
       ===================================================== */
    .home-advantage-section {
      padding: 96px 0;
      background:
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(0,212,170,0.12), transparent 55%),
        radial-gradient(ellipse 60% 50% at 0% 0%, rgba(0,212,170,0.08), transparent 55%),
        linear-gradient(135deg, #0F1A30 0%, #0B1222 100%);
      color: #ffffff;
      position: relative;
      overflow: hidden;
    }
    .home-advantage-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 44px 44px;
      -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,0.7), transparent 85%);
              mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,0.7), transparent 85%);
      pointer-events: none;
    }
    .home-advantage-section > .container {
      position: relative;
      z-index: 1;
    }
    .home-advantage-header {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 56px;
    }
    .home-advantage-header .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      border-radius: 999px;
      background: rgba(0,212,170,0.14);
      border: 1px solid rgba(0,212,170,0.32);
      color: #7eead3;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }
    .home-advantage-header .eyebrow::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 4px rgba(0,212,170,0.20);
    }
    .home-advantage-header h2 {
      font-size: clamp(28px, 3vw, 40px);
      letter-spacing: -0.025em;
      line-height: 1.16;
      margin: 0 0 16px;
      color: #ffffff;
    }
    .home-advantage-header p {
      margin: 0;
      color: rgba(255,255,255,0.72);
      font-size: 15.5px;
      line-height: 1.55;
    }

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

    .home-advantage-section .home-advantage-card {
      display: flex;
      flex-direction: column;
      gap: 0;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 22px;
      padding: 36px 32px 32px;
      height: 100%;
      box-shadow: none;
      position: relative;
      overflow: hidden;
      transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    }
    .home-advantage-section .home-advantage-card:hover {
      transform: translateY(-4px);
      border-color: rgba(0,212,170,0.35);
      background: rgba(255,255,255,0.06);
    }
    .home-advantage-section .home-advantage-card--accent {
      background:
        radial-gradient(ellipse 70% 70% at 100% 0%, rgba(0,212,170,0.14), transparent 60%),
        rgba(255,255,255,0.05);
      border-color: rgba(0,212,170,0.28);
    }

    .home-advantage-num {
      font-family: 'Sora', var(--font-sans);
      font-size: 44px;
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 1;
      background: linear-gradient(135deg, #7eead3, var(--teal));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom: 22px;
    }

    .home-advantage-body {
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    .home-advantage-section .home-advantage-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      align-self: flex-start;
      padding: 4px 12px;
      border-radius: 999px;
      background: rgba(0,212,170,0.14);
      border: 1px solid rgba(0,212,170,0.28);
      color: #7eead3;
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }
    .home-advantage-section .home-advantage-card h3 {
      color: #ffffff;
      font-size: 19px;
      font-weight: 700;
      letter-spacing: -0.015em;
      margin: 0 0 10px;
      line-height: 1.25;
    }
    .home-advantage-section .home-advantage-card p {
      margin: 0 0 20px;
      color: rgba(255,255,255,0.72);
      font-size: 14px;
      line-height: 1.55;
    }

    .home-advantage-list {
      list-style: none;
      padding: 20px 0 0;
      margin: 0;
      border-top: 1px solid rgba(255,255,255,0.10);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .home-advantage-list li {
      position: relative;
      padding-left: 22px;
      font-size: 13px;
      line-height: 1.45;
      color: rgba(255,255,255,0.78);
    }
    .home-advantage-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 5px;
      width: 12px;
      height: 12px;
      border-radius: 4px;
      background: var(--teal);
      opacity: 0.9;
    }
    .home-advantage-list li::after {
      content: '';
      position: absolute;
      left: 3px;
      top: 8px;
      width: 5px;
      height: 3px;
      border-left: 1.5px solid var(--navy);
      border-bottom: 1.5px solid var(--navy);
      transform: rotate(-45deg);
    }

    /* =====================================================
       HOMEPAGE — Flow Section redesign
       ===================================================== */
    .home-flow-section {
      padding: 96px 0;
      background:
        radial-gradient(ellipse 50% 40% at 50% 0%, rgba(0,212,170,0.06), transparent 55%),
        linear-gradient(180deg, #FAFBFD 0%, #F3F6FB 100%);
    }
    .home-flow-header {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 56px;
    }
    .home-flow-header .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      border-radius: 999px;
      background: rgba(0,212,170,0.10);
      border: 1px solid rgba(0,212,170,0.22);
      color: var(--teal-dark);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }
    .home-flow-header .eyebrow::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 4px rgba(0,212,170,0.16);
    }
    .home-flow-header h2 {
      font-size: clamp(26px, 2.8vw, 36px);
      letter-spacing: -0.025em;
      line-height: 1.18;
      margin: 0 0 14px;
      color: var(--navy);
    }
    .home-flow-header p {
      margin: 0;
      color: var(--gray-600);
      font-size: 15.5px;
      line-height: 1.55;
    }

    .home-flow-track {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
    }
    .home-flow-line {
      position: absolute;
      top: 46px;
      left: 16%;
      right: 16%;
      height: 2px;
      background: linear-gradient(90deg, rgba(0,212,170,0.22) 0%, var(--teal) 50%, rgba(0,212,170,0.50) 100%);
      z-index: 0;
    }

    .home-flow-section .home-flow-card {
      position: relative;
      background: #ffffff;
      border: 1px solid var(--gray-100);
      border-radius: 20px;
      padding: 64px 28px 28px;
      box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 6px 18px rgba(15,23,42,0.04);
      display: flex;
      flex-direction: column;
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .home-flow-section .home-flow-card::before {
      display: none;
    }
    .home-flow-section .home-flow-card:hover {
      transform: translateY(-3px);
      border-color: rgba(0,212,170,0.28);
      box-shadow:
        0 1px 2px rgba(15,23,42,0.05),
        0 12px 28px rgba(15,23,42,0.08);
    }
    .home-flow-section .home-flow-card--final {
      background:
        radial-gradient(ellipse 60% 60% at 100% 0%, rgba(0,212,170,0.12), transparent 60%),
        #FAFEFC;
      border-color: rgba(0,212,170,0.28);
    }

    .home-flow-marker {
      position: absolute;
      top: 40px;
      left: 50%;
      transform: translateX(-50%);
      width: 14px;
      height: 14px;
      border-radius: 999px;
      background: #ffffff;
      border: 3px solid var(--teal);
      display: grid;
      place-items: center;
      z-index: 1;
      box-shadow:
        0 0 0 4px rgba(0,212,170,0.14),
        0 4px 12px rgba(0,212,170,0.20);
    }
    .home-flow-marker-dot {
      width: 4px;
      height: 4px;
      border-radius: 999px;
      background: var(--teal);
    }

    .home-flow-section .home-flow-step {
      display: block;
      position: static;
      top: auto;
      left: auto;
      width: auto;
      height: auto;
      background: transparent;
      border-radius: 0;
      font-family: 'Sora', var(--font-sans);
      font-size: 36px;
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 1;
      background: linear-gradient(135deg, var(--teal-dark), var(--teal));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom: 14px;
      text-align: left;
    }
    .home-flow-section .home-flow-card h3 {
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--navy);
      margin: 0 0 8px;
      line-height: 1.3;
    }
    .home-flow-section .home-flow-card p {
      margin: 0 0 18px;
      color: var(--gray-600);
      font-size: 14px;
      line-height: 1.55;
      flex: 1;
    }
    .home-flow-time {
      display: inline-flex;
      align-self: flex-start;
      padding: 5px 12px;
      border-radius: 999px;
      background: rgba(0,212,170,0.10);
      border: 1px solid rgba(0,212,170,0.22);
      color: var(--teal-dark);
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .home-flow-note {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin: 40px auto 0;
      padding: 14px 20px;
      background: #ffffff;
      border: 1px solid var(--gray-200);
      border-radius: 999px;
      color: var(--gray-700);
      font-size: 14px;
      box-shadow: 0 4px 14px rgba(15,23,42,0.04);
    }
    .home-flow-note {
      max-width: fit-content;
    }
    .home-flow-section > .container {
      display: flex;
      flex-direction: column;
    }
    .home-flow-section .home-flow-note {
      align-self: center;
    }
    .home-flow-note svg {
      width: 18px;
      height: 18px;
      color: var(--teal-dark);
      flex-shrink: 0;
    }

    /* =====================================================
       HOMEPAGE — FAQ Section redesign
       ===================================================== */
    .home-faq-section {
      padding: 96px 0;
      background: #ffffff;
    }
    .home-faq-inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
      gap: 56px;
      align-items: start;
    }

    .home-faq-left {
      position: sticky;
      top: 96px;
    }
    .home-faq-left .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      border-radius: 999px;
      background: rgba(0,212,170,0.10);
      border: 1px solid rgba(0,212,170,0.22);
      color: var(--teal-dark);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }
    .home-faq-left .eyebrow::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 4px rgba(0,212,170,0.16);
    }
    .home-faq-left h2 {
      font-size: clamp(26px, 2.8vw, 36px);
      letter-spacing: -0.025em;
      line-height: 1.18;
      margin: 0 0 16px;
      color: var(--navy);
    }
    .home-faq-left > p {
      margin: 0 0 28px;
      color: var(--gray-600);
      font-size: 15px;
      line-height: 1.55;
    }

    .home-faq-aside {
      background:
        radial-gradient(ellipse 50% 80% at 0% 0%, rgba(0,212,170,0.08), transparent 60%),
        #FAFBFD;
      border: 1px solid var(--gray-100);
      border-radius: 18px;
      padding: 24px 24px;
    }
    .home-faq-aside-title {
      font-size: 15.5px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--navy);
      margin-bottom: 8px;
    }
    .home-faq-aside p {
      margin: 0 0 18px;
      font-size: 13.5px;
      line-height: 1.5;
      color: var(--gray-600);
    }
    .home-faq-aside .btn {
      font-size: 13.5px;
      padding: 10px 20px;
    }

    .home-faq-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .home-faq-section .faq-item {
      background: #ffffff;
      border: 1px solid var(--gray-100);
      border-radius: 16px;
      overflow: hidden;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .home-faq-section .faq-item:hover {
      border-color: rgba(0,212,170,0.22);
      box-shadow: 0 4px 14px rgba(15,23,42,0.04);
    }
    .home-faq-section .faq-item.open {
      border-color: rgba(0,212,170,0.32);
      background:
        radial-gradient(ellipse 40% 100% at 0% 0%, rgba(0,212,170,0.05), transparent 60%),
        #ffffff;
    }
    .home-faq-section .faq-button {
      width: 100%;
      background: none;
      border: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 22px 26px;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--navy);
      text-align: left;
      cursor: pointer;
      font-family: inherit;
    }
    .home-faq-section .faq-chevron {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      background: rgba(0,212,170,0.10);
      color: var(--teal-dark);
      display: inline-grid;
      place-items: center;
      flex-shrink: 0;
      transition: transform 0.3s ease, background 0.25s ease;
    }
    .home-faq-section .faq-chevron svg {
      width: 16px;
      height: 16px;
    }
    .home-faq-section .faq-item.open .faq-chevron {
      transform: rotate(180deg);
      background: var(--teal);
      color: var(--navy);
    }
    .home-faq-section .faq-answer {
      padding: 0 26px 22px;
      color: var(--gray-600);
      font-size: 14.5px;
      line-height: 1.6;
      display: none;
    }
    .home-faq-section .faq-item.open .faq-answer {
      display: block;
    }

    /* =====================================================
       HOMEPAGE — Final CTA redesign
       ===================================================== */
    .home-final-cta-section {
      padding: 72px 0 120px;
      background: #ffffff;
    }
    .home-final-cta-panel {
      position: relative;
      background:
        radial-gradient(ellipse 60% 80% at 100% 0%, rgba(0,212,170,0.22), transparent 60%),
        radial-gradient(ellipse 60% 80% at 0% 100%, rgba(0,212,170,0.14), transparent 60%),
        linear-gradient(135deg, #0F1A30 0%, #0B1222 100%);
      border: 1px solid rgba(0,212,170,0.28);
      border-radius: 32px;
      padding: 72px 56px 64px;
      color: #ffffff;
      text-align: center;
      overflow: hidden;
      box-shadow: 0 30px 70px rgba(15,23,42,0.22);
    }
    .home-final-cta-panel::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 40px 40px;
      -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,0.6), transparent 80%);
              mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,0.6), transparent 80%);
      pointer-events: none;
    }
    .home-final-cta-panel > * {
      position: relative;
      z-index: 1;
    }

    .home-final-cta-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 18px;
      border-radius: 999px;
      background: rgba(0,212,170,0.16);
      border: 1px solid rgba(0,212,170,0.34);
      color: #7eead3;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 24px;
    }
    .home-final-cta-dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 4px rgba(0,212,170,0.22);
    }

    .home-final-cta-panel h2 {
      font-size: clamp(28px, 3.2vw, 44px);
      letter-spacing: -0.025em;
      line-height: 1.14;
      margin: 0 auto 18px;
      max-width: 720px;
      color: #ffffff;
    }
    .home-final-cta-panel p {
      margin: 0 auto 36px;
      max-width: 640px;
      color: rgba(255,255,255,0.75);
      font-size: 16px;
      line-height: 1.55;
    }

    .home-final-cta-actions {
      display: inline-flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      margin-bottom: 40px;
    }

    .home-final-cta-meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 28px;
      padding-top: 32px;
      border-top: 1px solid rgba(255,255,255,0.10);
    }
    .home-final-cta-meta-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: rgba(255,255,255,0.78);
      font-size: 13.5px;
      font-weight: 500;
    }
    .home-final-cta-meta-item svg {
      width: 16px;
      height: 16px;
      color: var(--teal);
    }

    /* Responsive */
    @media (max-width: 1100px) {
      .home-modules-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .home-advantage-section .home-advantage-grid {
        grid-template-columns: 1fr;
      }
      .home-faq-inner {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      .home-faq-left {
        position: static;
      }
    }
    @media (max-width: 900px) {
      .home-flow-track {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      .home-flow-line {
        display: none;
      }
      .home-flow-section .home-flow-card {
        padding: 32px 24px 24px;
      }
      .home-flow-marker {
        position: static;
        transform: none;
        margin-bottom: 14px;
      }
    }
    @media (max-width: 720px) {
      .home-modules-section,
      .home-advantage-section,
      .home-flow-section,
      .home-faq-section {
        padding: 72px 0;
      }
      .home-modules-grid {
        grid-template-columns: 1fr;
      }
      .home-final-cta-section {
        padding: 56px 0 88px;
      }
      .home-final-cta-panel {
        padding: 48px 28px 40px;
        border-radius: 24px;
      }
      .home-final-cta-meta {
        gap: 16px 24px;
        padding-top: 24px;
      }
      .home-advantage-section .home-advantage-card {
        padding: 28px 26px 26px;
      }
      .home-advantage-num {
        font-size: 36px;
        margin-bottom: 16px;
      }
      .home-faq-section .faq-button {
        padding: 18px 22px;
        font-size: 15px;
      }
      .home-faq-section .faq-answer {
        padding: 0 22px 18px;
      }
    }

    /* =====================================================
       HR OPERATIONS — shared subpage shell
       ===================================================== */
    .hr-op-tile {
      position: relative;
      text-decoration: none;
      color: inherit;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .hr-op-tile:hover {
      transform: translateY(-3px);
      border-color: rgba(0,212,170,0.28);
      box-shadow: 0 14px 30px rgba(15,23,42,0.08);
    }
    .hr-op-tile:focus-visible {
      outline: 2px solid var(--teal);
      outline-offset: 3px;
    }
    .hr-op-tile-link {
      margin-top: auto;
      padding-top: 16px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--teal-dark);
      font-size: 13.5px;
      font-weight: 700;
    }
    .hr-op-tile-link svg {
      width: 15px;
      height: 15px;
      transition: transform 0.25s ease;
    }
    .hr-op-tile:hover .hr-op-tile-link svg {
      transform: translateX(4px);
    }

    .hrp-subhero {
      padding: 80px 0 64px;
      background:
        radial-gradient(ellipse 60% 60% at 50% 0%, rgba(0,212,170,0.20), transparent 60%),
        radial-gradient(ellipse 50% 50% at 100% 100%, rgba(0,212,170,0.12), transparent 60%),
        linear-gradient(135deg, #0F1A30 0%, #0B1222 100%);
      color: #ffffff;
      position: relative;
      overflow: hidden;
    }
    .hrp-subhero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 44px 44px;
      -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,0.7), transparent 85%);
              mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,0.7), transparent 85%);
      pointer-events: none;
    }
    .hrp-subhero > .container {
      position: relative;
      z-index: 1;
      max-width: 840px;
    }
    .hrp-subhero .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      border-radius: 999px;
      background: rgba(0,212,170,0.16);
      border: 1px solid rgba(0,212,170,0.34);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 20px;
    }
    .hrp-subhero .eyebrow::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 4px rgba(0,212,170,0.22);
    }
    .hrp-subhero h1 {
      font-size: clamp(32px, 4vw, 52px);
      letter-spacing: -0.028em;
      line-height: 1.08;
      margin: 0 0 22px;
      color: #ffffff;
    }
    .hrp-subhero .lead {
      font-size: 17px;
      line-height: 1.55;
      color: rgba(255,255,255,0.78);
      margin: 0 auto 36px;
      max-width: 720px;
    }

    .hrp-hero-meta {
      display: inline-flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }
    .hrp-hero-meta-item {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.14);
      color: rgba(255,255,255,0.88);
      font-size: 13.5px;
      font-weight: 500;
    }
    .hrp-hero-meta-icon {
      display: inline-grid;
      place-items: center;
      color: var(--teal);
    }
    .hrp-hero-meta-icon svg {
      width: 16px;
      height: 16px;
    }

    /* Shared pillars section (4 stacked numbered cards) */
    .hrp-pillars-section {
      padding: 88px 0;
      background: #ffffff;
    }
    .hrp-pillars-header {
      max-width: 720px;
      margin: 0 auto 48px;
      text-align: center;
    }
    .hrp-pillars-header .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      border-radius: 999px;
      background: rgba(0,212,170,0.10);
      border: 1px solid rgba(0,212,170,0.22);
      color: var(--teal-dark);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 16px;
    }
    .hrp-pillars-header .eyebrow::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 4px rgba(0,212,170,0.16);
    }
    .hrp-pillars-header h2 {
      font-size: clamp(26px, 3vw, 38px);
      letter-spacing: -0.025em;
      line-height: 1.18;
      margin: 0;
      color: var(--navy);
    }
    .hrp-pillars-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
    }
    .hrp-pillar-card {
      padding: 28px 24px;
      background: #ffffff;
      border: 1px solid var(--gray-100);
      border-radius: 20px;
      position: relative;
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .hrp-pillar-card:hover {
      transform: translateY(-3px);
      border-color: rgba(0,212,170,0.28);
      box-shadow: 0 10px 26px rgba(15,23,42,0.06);
    }
    .hrp-pillar-num {
      font-family: 'Sora', var(--font-sans);
      font-size: 30px;
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1;
      background: linear-gradient(135deg, var(--teal-dark), var(--teal));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom: 16px;
    }
    .hrp-pillar-card h3 {
      font-size: 16.5px;
      font-weight: 700;
      letter-spacing: -0.012em;
      color: var(--navy);
      margin: 0 0 10px;
      line-height: 1.3;
    }
    .hrp-pillar-card p {
      margin: 0;
      color: var(--gray-600);
      font-size: 13.5px;
      line-height: 1.55;
    }

    /* Shared benefit section (2-col: text + checklist) */
    .hrp-benefit-section {
      padding: 88px 0;
      background: linear-gradient(180deg, #FAFBFD 0%, #F3F6FB 100%);
    }
    .hrp-benefit-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      gap: 56px;
      align-items: start;
    }
    .hrp-benefit-text .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      border-radius: 999px;
      background: rgba(0,212,170,0.10);
      border: 1px solid rgba(0,212,170,0.22);
      color: var(--teal-dark);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }
    .hrp-benefit-text .eyebrow::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 4px rgba(0,212,170,0.16);
    }
    .hrp-benefit-text h2 {
      font-size: clamp(26px, 2.8vw, 36px);
      letter-spacing: -0.025em;
      line-height: 1.18;
      margin: 0 0 18px;
      color: var(--navy);
    }
    .hrp-benefit-text p {
      margin: 0;
      color: var(--gray-600);
      font-size: 15.5px;
      line-height: 1.6;
    }
    .hrp-benefit-list {
      list-style: none;
      padding: 0;
      margin: 0;
      background: #ffffff;
      border: 1px solid var(--gray-100);
      border-radius: 20px;
      padding: 24px;
      box-shadow: 0 4px 14px rgba(15,23,42,0.04);
    }
    .hrp-benefit-list li {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 14px 0;
      border-bottom: 1px solid var(--gray-100);
      color: var(--gray-700);
      font-size: 14.5px;
      line-height: 1.5;
    }
    .hrp-benefit-list li:last-child {
      border-bottom: 0;
    }
    .hrp-benefit-list li:first-child {
      padding-top: 4px;
    }
    .hrp-benefit-list li:last-child {
      padding-bottom: 4px;
    }
    .hrp-benefit-check {
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      border-radius: 7px;
      background: linear-gradient(135deg, var(--teal), var(--teal-dark));
      color: #ffffff;
      display: inline-grid;
      place-items: center;
      margin-top: 1px;
      box-shadow: 0 2px 6px rgba(0,212,170,0.28);
    }
    .hrp-benefit-check svg {
      width: 12px;
      height: 12px;
    }

    /* Shared CTA panel (dark) */
    .hrp-cta-section {
      padding: 72px 0 96px;
      background: #ffffff;
    }
    .hrp-cta-panel {
      position: relative;
      padding: 64px 48px;
      border-radius: 28px;
      background:
        radial-gradient(ellipse 60% 80% at 100% 0%, rgba(0,212,170,0.22), transparent 60%),
        radial-gradient(ellipse 60% 80% at 0% 100%, rgba(0,212,170,0.14), transparent 60%),
        linear-gradient(135deg, #0F1A30 0%, #0B1222 100%);
      border: 1px solid rgba(0,212,170,0.28);
      color: #ffffff;
      text-align: center;
      overflow: hidden;
      box-shadow: 0 24px 60px rgba(15,23,42,0.18);
    }
    .hrp-cta-panel::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 40px 40px;
      -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,0.6), transparent 80%);
              mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,0.6), transparent 80%);
      pointer-events: none;
    }
    .hrp-cta-panel > * {
      position: relative;
      z-index: 1;
    }
    .hrp-cta-panel .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      border-radius: 999px;
      background: rgba(0,212,170,0.16);
      border: 1px solid rgba(0,212,170,0.34);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 20px;
    }
    .hrp-cta-panel .eyebrow::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 4px rgba(0,212,170,0.22);
    }
    .hrp-cta-panel h2 {
      font-size: clamp(26px, 3vw, 38px);
      letter-spacing: -0.025em;
      line-height: 1.18;
      margin: 0 auto 14px;
      max-width: 680px;
      color: #ffffff;
    }
    .hrp-cta-panel p {
      margin: 0 auto 32px;
      max-width: 600px;
      color: rgba(255,255,255,0.78);
      font-size: 15.5px;
      line-height: 1.55;
    }

    /* =====================================================
       PAGE-ZEITERFASSUNG — specific visuals
       ===================================================== */
    #page-zeiterfassung .zeit-visual-section {
      padding: 72px 0 20px;
      background: #ffffff;
    }
    #page-zeiterfassung .zeit-visual-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
      gap: 24px;
    }
    #page-zeiterfassung .zeit-visual-card {
      background: #ffffff;
      border: 1px solid var(--gray-100);
      border-radius: 24px;
      padding: 28px;
      box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 12px 28px rgba(15,23,42,0.06);
    }
    #page-zeiterfassung .zeit-visual-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 22px;
    }
    #page-zeiterfassung .zeit-visual-eyebrow {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--gray-600);
    }
    #page-zeiterfassung .zeit-visual-sub {
      font-size: 12.5px;
      color: var(--gray-500);
    }
    #page-zeiterfassung .zeit-visual-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(0,212,170,0.12);
      color: var(--teal-dark);
      font-size: 11.5px;
      font-weight: 700;
    }
    #page-zeiterfassung .zeit-visual-dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--teal);
      box-shadow: 0 0 0 3px rgba(0,212,170,0.22);
      animation: zeitPulse 1.8s ease-in-out infinite;
    }
    @keyframes zeitPulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.55; }
    }

    #page-zeiterfassung .zeit-widget {
      position: relative;
    }
    #page-zeiterfassung .zeit-widget-time {
      background: linear-gradient(135deg, rgba(0,212,170,0.10), rgba(0,212,170,0.02));
      border: 1px solid rgba(0,212,170,0.20);
      border-radius: 18px;
      padding: 28px 24px;
      text-align: center;
      margin-bottom: 18px;
    }
    #page-zeiterfassung .zeit-widget-time-value {
      display: block;
      font-family: 'Sora', var(--font-sans);
      font-size: 44px;
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1;
      background: linear-gradient(135deg, var(--teal-dark), var(--teal));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-variant-numeric: tabular-nums;
    }
    #page-zeiterfassung .zeit-widget-time-label {
      display: block;
      margin-top: 8px;
      font-size: 12.5px;
      color: var(--gray-600);
      letter-spacing: 0.02em;
    }
    #page-zeiterfassung .zeit-widget-controls {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }
    #page-zeiterfassung .zeit-widget-btn {
      flex: 1;
      padding: 12px 16px;
      border-radius: 12px;
      border: 1px solid var(--gray-200);
      background: #ffffff;
      color: var(--gray-700);
      font-family: inherit;
      font-size: 13.5px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: default;
      opacity: 0.82;
    }
    #page-zeiterfassung .zeit-widget-btn svg {
      width: 14px;
      height: 14px;
    }
    #page-zeiterfassung .zeit-widget-btn--stop {
      background: linear-gradient(135deg, #fef2f2, #ffffff);
      border-color: rgba(239,68,68,0.24);
      color: #dc2626;
    }
    #page-zeiterfassung .zeit-widget-entries {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    #page-zeiterfassung .zeit-widget-entry {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border-radius: 10px;
      background: var(--gray-50);
      font-size: 13px;
      color: var(--gray-700);
      font-variant-numeric: tabular-nums;
    }
    #page-zeiterfassung .zeit-widget-entry-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--teal);
      flex-shrink: 0;
    }
    #page-zeiterfassung .zeit-widget-entry--pause .zeit-widget-entry-dot {
      background: #f59e0b;
    }
    #page-zeiterfassung .zeit-widget-entry--active {
      background: rgba(0,212,170,0.08);
      color: var(--navy);
      font-weight: 600;
    }
    #page-zeiterfassung .zeit-widget-entry-time {
      flex: 1;
    }
    #page-zeiterfassung .zeit-widget-entry-dur {
      color: var(--gray-500);
      font-size: 12.5px;
    }
    #page-zeiterfassung .zeit-widget-entry--active .zeit-widget-entry-dur {
      color: var(--teal-dark);
      font-weight: 700;
    }

    #page-zeiterfassung .zeit-week {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 24px;
    }
    #page-zeiterfassung .zeit-week-row {
      display: grid;
      grid-template-columns: 32px 1fr 52px;
      align-items: center;
      gap: 12px;
    }
    #page-zeiterfassung .zeit-week-day {
      font-size: 12.5px;
      font-weight: 700;
      color: var(--gray-600);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    #page-zeiterfassung .zeit-week-bar {
      position: relative;
      height: 12px;
      border-radius: 999px;
      background: var(--gray-100);
      overflow: hidden;
    }
    #page-zeiterfassung .zeit-week-fill {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, var(--teal-dark), var(--teal));
      border-radius: 999px;
      transition: width 0.6s ease;
    }
    #page-zeiterfassung .zeit-week-row--active .zeit-week-fill {
      background: linear-gradient(90deg, #f59e0b, var(--teal));
    }
    #page-zeiterfassung .zeit-week-row--future .zeit-week-bar {
      background: repeating-linear-gradient(-45deg, var(--gray-100), var(--gray-100) 6px, var(--gray-50) 6px, var(--gray-50) 12px);
    }
    #page-zeiterfassung .zeit-week-val {
      font-size: 13px;
      color: var(--gray-700);
      font-variant-numeric: tabular-nums;
      font-weight: 600;
      text-align: right;
    }
    #page-zeiterfassung .zeit-week-foot {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      padding-top: 20px;
      border-top: 1px solid var(--gray-100);
    }
    #page-zeiterfassung .zeit-week-foot > div {
      text-align: center;
    }
    #page-zeiterfassung .zeit-week-foot-val {
      font-family: 'Sora', var(--font-sans);
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--navy);
      font-variant-numeric: tabular-nums;
    }
    #page-zeiterfassung .zeit-week-foot-val--pos {
      color: var(--teal-dark);
    }
    #page-zeiterfassung .zeit-week-foot-lbl {
      font-size: 11px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--gray-500);
      font-weight: 700;
      margin-top: 4px;
    }

    /* =====================================================
       PAGE-DIENSTPLAENE — week schedule
       ===================================================== */
    #page-dienstplaene .dienst-visual-section {
      padding: 72px 0 20px;
      background: #ffffff;
    }
    #page-dienstplaene .dienst-plan-card {
      background: #ffffff;
      border: 1px solid var(--gray-100);
      border-radius: 24px;
      padding: 28px;
      box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 16px 36px rgba(15,23,42,0.07);
      overflow: hidden;
    }
    #page-dienstplaene .dienst-plan-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 20px;
      flex-wrap: wrap;
      margin-bottom: 22px;
    }
    #page-dienstplaene .dienst-plan-eyebrow {
      font-size: 12.5px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 4px;
    }
    #page-dienstplaene .dienst-plan-week {
      font-size: 12px;
      color: var(--gray-500);
      letter-spacing: 0.02em;
    }
    #page-dienstplaene .dienst-plan-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }
    #page-dienstplaene .dienst-legend-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11.5px;
      color: var(--gray-600);
      font-weight: 600;
    }
    #page-dienstplaene .dienst-legend-sw {
      width: 14px;
      height: 10px;
      border-radius: 4px;
    }
    #page-dienstplaene .dienst-sw-early { background: rgba(0,212,170,0.18); color: var(--teal-dark); border: 1px solid rgba(0,212,170,0.32); }
    #page-dienstplaene .dienst-sw-late { background: rgba(59,130,246,0.16); color: #1d4ed8; border: 1px solid rgba(59,130,246,0.28); }
    #page-dienstplaene .dienst-sw-night { background: rgba(124,58,237,0.16); color: #6d28d9; border: 1px solid rgba(124,58,237,0.28); }
    #page-dienstplaene .dienst-sw-off { background: var(--gray-100); color: var(--gray-500); border: 1px solid var(--gray-200); }

    #page-dienstplaene .dienst-plan-grid {
      display: grid;
      grid-template-columns: 150px repeat(7, minmax(0, 1fr));
      gap: 6px;
      font-size: 12px;
    }
    #page-dienstplaene .dienst-plan-col-head {
      padding: 8px 4px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--gray-500);
      text-align: center;
    }
    #page-dienstplaene .dienst-plan-row-head {
      padding: 12px 14px;
      background: var(--gray-50);
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    #page-dienstplaene .dienst-plan-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--navy);
      line-height: 1.2;
    }
    #page-dienstplaene .dienst-plan-role {
      font-size: 11px;
      color: var(--gray-500);
      margin-top: 2px;
    }
    #page-dienstplaene .dienst-plan-cell {
      padding: 10px 4px;
      border-radius: 8px;
      font-size: 11.5px;
      font-weight: 600;
      text-align: center;
      font-variant-numeric: tabular-nums;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
    }
    #page-dienstplaene .dienst-plan-foot {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: 24px;
      padding-top: 22px;
      border-top: 1px solid var(--gray-100);
    }
    #page-dienstplaene .dienst-plan-foot-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    #page-dienstplaene .dienst-plan-foot-val {
      font-family: 'Sora', var(--font-sans);
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--navy);
      line-height: 1;
      margin-bottom: 4px;
    }
    #page-dienstplaene .dienst-plan-foot-val--accent {
      background: linear-gradient(135deg, var(--teal-dark), var(--teal));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    #page-dienstplaene .dienst-plan-foot-val--accent svg {
      width: 22px;
      height: 22px;
      color: var(--teal-dark);
      background: none;
      -webkit-background-clip: initial;
      background-clip: initial;
    }
    #page-dienstplaene .dienst-plan-foot-lbl {
      font-size: 11px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--gray-500);
      font-weight: 700;
    }

    /* =====================================================
       PAGE-SELFSERVICE — flow + side card
       ===================================================== */
    #page-selfservice .selfs-visual-section {
      padding: 72px 0 20px;
      background: #ffffff;
    }
    #page-selfservice .selfs-visual-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
      gap: 24px;
    }
    #page-selfservice .selfs-flow-card {
      background: #ffffff;
      border: 1px solid var(--gray-100);
      border-radius: 24px;
      padding: 32px;
      box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 12px 28px rgba(15,23,42,0.06);
    }
    #page-selfservice .selfs-flow-eyebrow {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--gray-500);
      margin-bottom: 24px;
    }
    #page-selfservice .selfs-flow {
      display: flex;
      flex-direction: column;
    }
    #page-selfservice .selfs-flow-step {
      display: flex;
      gap: 18px;
      align-items: flex-start;
      padding: 4px 0;
    }
    #page-selfservice .selfs-flow-dot {
      width: 40px;
      height: 40px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(0,212,170,0.14), rgba(0,212,170,0.04));
      border: 1px solid rgba(0,212,170,0.28);
      display: grid;
      place-items: center;
      flex-shrink: 0;
      color: var(--teal-dark);
      font-family: 'Sora', var(--font-sans);
      font-size: 15px;
      font-weight: 700;
    }
    #page-selfservice .selfs-flow-dot--end {
      background: linear-gradient(135deg, var(--teal), var(--teal-dark));
      color: #ffffff;
      border-color: transparent;
      box-shadow: 0 4px 12px rgba(0,212,170,0.32);
    }
    #page-selfservice .selfs-flow-dot--end svg {
      width: 18px;
      height: 18px;
    }
    #page-selfservice .selfs-flow-body {
      padding-top: 4px;
      padding-bottom: 8px;
    }
    #page-selfservice .selfs-flow-title {
      font-size: 15.5px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 6px;
    }
    #page-selfservice .selfs-flow-desc {
      font-size: 13.5px;
      line-height: 1.55;
      color: var(--gray-600);
      margin-bottom: 8px;
    }
    #page-selfservice .selfs-flow-chip {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 999px;
      background: var(--gray-100);
      color: var(--gray-600);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    #page-selfservice .selfs-flow-connector {
      width: 2px;
      height: 18px;
      background: linear-gradient(180deg, rgba(0,212,170,0.32), rgba(0,212,170,0.14));
      margin-left: 19px;
      border-radius: 2px;
    }

    #page-selfservice .selfs-side-card {
      background:
        radial-gradient(ellipse 50% 80% at 0% 0%, rgba(0,212,170,0.10), transparent 60%),
        #FAFBFD;
      border: 1px solid var(--gray-100);
      border-radius: 24px;
      padding: 32px;
      height: fit-content;
    }
    #page-selfservice .selfs-side-eyebrow {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--teal-dark);
      margin-bottom: 20px;
    }
    #page-selfservice .selfs-types {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    #page-selfservice .selfs-types li {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px 14px;
      border-radius: 12px;
      background: #ffffff;
      border: 1px solid var(--gray-100);
      font-size: 14px;
      color: var(--gray-700);
      font-weight: 500;
      transition: transform 0.2s ease, border-color 0.2s ease;
    }
    #page-selfservice .selfs-types li:hover {
      transform: translateX(3px);
      border-color: rgba(0,212,170,0.28);
    }
    #page-selfservice .selfs-type-icon {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: rgba(0,212,170,0.10);
      color: var(--teal-dark);
      display: inline-grid;
      place-items: center;
      flex-shrink: 0;
    }
    #page-selfservice .selfs-type-icon svg {
      width: 16px;
      height: 16px;
    }

    /* =====================================================
       PAGE-DOKUMENTE — file browser
       ===================================================== */
    #page-dokumente .dok-visual-section {
      padding: 72px 0 20px;
      background: #ffffff;
    }
    #page-dokumente .dok-browser {
      background: #ffffff;
      border: 1px solid var(--gray-100);
      border-radius: 24px;
      box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 16px 36px rgba(15,23,42,0.07);
      overflow: hidden;
    }
    #page-dokumente .dok-browser-top {
      padding: 22px 28px 0;
      border-bottom: 1px solid var(--gray-100);
      background: #FAFBFD;
    }
    #page-dokumente .dok-browser-search {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 11px 16px;
      background: #ffffff;
      border: 1px solid var(--gray-200);
      border-radius: 12px;
      color: var(--gray-500);
      margin-bottom: 18px;
      box-shadow: 0 1px 2px rgba(15,23,42,0.03);
    }
    #page-dokumente .dok-browser-search svg {
      width: 16px;
      height: 16px;
      color: var(--gray-400);
    }
    #page-dokumente .dok-browser-search-placeholder {
      flex: 1;
      font-size: 14px;
    }
    #page-dokumente .dok-browser-shortcut {
      padding: 3px 8px;
      border-radius: 6px;
      background: var(--gray-100);
      color: var(--gray-500);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    #page-dokumente .dok-browser-tabs {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }
    #page-dokumente .dok-browser-tab {
      padding: 10px 0;
      font-size: 13px;
      font-weight: 600;
      color: var(--gray-500);
      cursor: default;
      border-bottom: 2px solid transparent;
    }
    #page-dokumente .dok-browser-tab--active {
      color: var(--teal-dark);
      border-bottom-color: var(--teal);
    }

    #page-dokumente .dok-browser-list {
      padding: 8px 28px 24px;
    }
    #page-dokumente .dok-browser-row {
      display: grid;
      grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.2fr);
      align-items: center;
      gap: 12px;
      padding: 12px 8px;
      border-radius: 8px;
      font-size: 13px;
      color: var(--gray-700);
      border-bottom: 1px solid var(--gray-100);
    }
    #page-dokumente .dok-browser-row:last-child {
      border-bottom: 0;
    }
    #page-dokumente .dok-browser-row--head {
      font-size: 11px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--gray-500);
      font-weight: 700;
      padding: 14px 8px 10px;
    }
    #page-dokumente .dok-browser-row:not(.dok-browser-row--head):hover {
      background: rgba(0,212,170,0.04);
    }
    #page-dokumente .dok-browser-file {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #page-dokumente .dok-file-ico {
      flex-shrink: 0;
      width: 32px;
      height: 40px;
      border-radius: 6px;
      display: inline-grid;
      place-items: center;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.04em;
      color: #ffffff;
      position: relative;
    }
    #page-dokumente .dok-file-ico::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 8px;
      height: 8px;
      background: rgba(255,255,255,0.3);
      border-bottom-left-radius: 3px;
    }
    #page-dokumente .dok-file-ico[data-type="pdf"] {
      background: linear-gradient(135deg, #ef4444, #dc2626);
    }
    #page-dokumente .dok-file-ico[data-type="docx"] {
      background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    }
    #page-dokumente .dok-browser-tag {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 999px;
      background: rgba(0,212,170,0.12);
      color: var(--teal-dark);
      font-size: 11px;
      font-weight: 700;
      align-self: center;
      justify-self: start;
    }
    #page-dokumente .dok-browser-tag--alt {
      background: rgba(59,130,246,0.12);
      color: #1d4ed8;
    }
    #page-dokumente .dok-browser-tag--muted {
      background: var(--gray-100);
      color: var(--gray-600);
    }
    #page-dokumente .dok-browser-access {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11.5px;
      color: var(--gray-600);
      font-weight: 600;
    }
    #page-dokumente .dok-browser-access svg {
      width: 13px;
      height: 13px;
      color: var(--teal-dark);
    }
    #page-dokumente .dok-browser-foot {
      padding: 14px 28px;
      border-top: 1px solid var(--gray-100);
      background: #FAFBFD;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      font-size: 12px;
      color: var(--gray-500);
      flex-wrap: wrap;
    }
    #page-dokumente .dok-browser-foot-sec {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--gray-600);
      font-weight: 600;
    }
    #page-dokumente .dok-browser-foot-sec svg {
      width: 13px;
      height: 13px;
      color: var(--teal-dark);
    }

    /* =====================================================
       Responsive for HR operations subpages
       ===================================================== */
    @media (max-width: 1100px) {
      .hrp-pillars-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .hrp-benefit-grid {
        grid-template-columns: 1fr;
        gap: 36px;
      }
      #page-zeiterfassung .zeit-visual-grid,
      #page-selfservice .selfs-visual-grid {
        grid-template-columns: 1fr;
      }
      #page-dienstplaene .dienst-plan-grid {
        font-size: 11px;
        grid-template-columns: 130px repeat(7, minmax(0, 1fr));
      }
    }
    @media (max-width: 900px) {
      #page-dienstplaene .dienst-plan-grid {
        grid-template-columns: 110px repeat(7, minmax(40px, 1fr));
      }
      #page-dienstplaene .dienst-plan-cell {
        font-size: 10.5px;
        min-height: 38px;
        padding: 6px 2px;
      }
      #page-dienstplaene .dienst-plan-name {
        font-size: 12px;
      }
      #page-dokumente .dok-browser-row {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
      }
      #page-dokumente .dok-browser-row > *:nth-child(4),
      #page-dokumente .dok-browser-row > *:nth-child(5) {
        display: none;
      }
    }
    @media (max-width: 720px) {
      .hrp-subhero {
        padding: 56px 0 48px;
      }
      .hrp-pillars-section,
      .hrp-benefit-section {
        padding: 56px 0;
      }
      .hrp-pillars-grid {
        grid-template-columns: 1fr;
      }
      .hrp-cta-panel {
        padding: 44px 24px;
        border-radius: 22px;
      }
      .hrp-hero-meta-item {
        font-size: 12.5px;
        padding: 8px 12px;
      }
      #page-zeiterfassung .zeit-visual-card,
      #page-dienstplaene .dienst-plan-card,
      #page-selfservice .selfs-flow-card,
      #page-selfservice .selfs-side-card {
        padding: 22px;
        border-radius: 20px;
      }
      #page-dienstplaene .dienst-plan-foot {
        grid-template-columns: repeat(2, 1fr);
      }
      #page-dienstplaene .dienst-plan-grid {
        overflow-x: auto;
        grid-template-columns: 100px repeat(7, 48px);
      }
      #page-dokumente .dok-browser-top,
      #page-dokumente .dok-browser-list,
      #page-dokumente .dok-browser-foot {
        padding-left: 18px;
        padding-right: 18px;
      }
    }

  

html { overflow-y: scroll; }
.page { display: block; }
.hidden-lang { display: none !important; }
.lang-switch-static {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--white);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  background: rgba(255,255,255,0.05);
}
.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.86);
  padding: 9px 14px;
  font-weight: 700;
  text-decoration: none;
}
.lang-switch a.active {
  background: rgba(255,255,255,0.12);
  color: var(--white);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.card-overlay-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}
.home-value-card--linked,
.module-card.linked-card {
  position: relative;
}
.breadcrumb {
  padding: 14px 0 0;
}
.breadcrumb ol {
  list-style: none;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  color: var(--gray-500);
  font-size: 14px;
}
.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.breadcrumb li:not(:last-child)::after {
  content: "/";
  color: var(--gray-400);
}
.breadcrumb a:hover {
  color: var(--teal-dark);
}
.page-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main.site-main {
  flex: 1 0 auto;
}
.hr-static-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 980px) {
  .hr-static-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .hr-static-grid {
    grid-template-columns: 1fr;
  }
}