:root {
      --solven-blue: #1A457D;
      --solven-teal: #33D1C2;
      --solven-gray: #5A5A5A;
      --solven-light: #F6F8FB;
      --solven-white: #FFFFFF;
      --solven-border: #E5EAF0;
      --solven-text: #122033;
      --solven-radius: 22px;
      --solven-shadow: 0 10px 30px rgba(18, 32, 51, 0.06);
    }

    html { scroll-behavior: smooth; }
    body {
      font-family: 'Inter', sans-serif;
      color: var(--solven-text);
      background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
    }

    h1, h2, h3, .navbar-brand, .btn, .brand-text {
      font-family: 'Manrope', sans-serif;
    }

    .text-solven-blue { color: var(--solven-blue) !important; }
    .text-solven-gray { color: var(--solven-gray) !important; }
    .bg-solven-blue { background-color: var(--solven-blue) !important; }
    .bg-solven-teal { background-color: var(--solven-teal) !important; }
    .border-solven { border-color: var(--solven-border) !important; }

    .navbar {
      backdrop-filter: blur(10px);
      background: rgba(255,255,255,0.88) !important;
      border-bottom: 1px solid rgba(229, 234, 240, 0.8);
    }

    .navbar-brand {
      display: flex;
      align-items: center;
      gap: 14px;
      font-weight: 800;
      color: var(--solven-blue) !important;
    }

    .brand-block {
      display: flex;
      flex-direction: column;
      line-height: 1;
    }

    .brand-text {
      font-size: 30px;
      font-weight: 800;
      letter-spacing: 0.02em;
      color: var(--solven-blue);
    }

    .brand-tagline {
      margin-top: 4px;
      font-size: 13px;
      color: var(--solven-gray);
      font-weight: 500;
    }

    .solven-symbol {
      width: 58px;
      height: 58px;
      position: relative;
      flex: 0 0 auto;
    }

    .solven-symbol::before,
    .solven-symbol::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 24px;
      transform: rotate(28deg);
      background: linear-gradient(180deg, var(--solven-teal) 0%, #2d8fe0 52%, var(--solven-blue) 100%);
      clip-path: polygon(20% 0%, 100% 0%, 78% 17%, 48% 28%, 66% 39%, 85% 52%, 73% 68%, 0% 100%, 18% 66%, 50% 53%, 31% 41%, 12% 30%, 20% 15%);
    }

    .solven-symbol::after {
      inset: 13px 18px;
      background: #fff;
      clip-path: polygon(0 28%, 72% 0, 100% 13%, 28% 44%, 100% 76%, 72% 100%, 0 71%, 54% 45%);
    }

    .hero {
      padding: 80px 0 48px;
      overflow: hidden;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(51, 209, 194, 0.10);
      color: var(--solven-blue);
      font-weight: 700;
      margin-bottom: 18px;
    }

    .eyebrow-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: var(--solven-teal);
    }

    .hero h1,
    .section-title,
    .cta-title {
      color: var(--solven-blue);
      letter-spacing: -0.03em;
    }

    .hero h1 {
      font-size: clamp(42px, 7vw, 72px);
      line-height: 0.95;
      margin-bottom: 22px;
    }

    .hero-copy {
      font-size: 22px;
      line-height: 1.55;
      color: var(--solven-gray);
      max-width: 680px;
    }

    .btn-solven-primary {
      background: var(--solven-blue);
      color: #fff;
      border: 1px solid var(--solven-blue);
      border-radius: 16px;
      padding: 14px 22px;
      font-weight: 700;
      box-shadow: 0 10px 24px rgba(26, 69, 125, 0.18);
    }

    .btn-solven-primary:hover {
      background: #143962;
      border-color: #143962;
      color: #fff;
    }

    .btn-solven-secondary {
      background: #fff;
      color: var(--solven-blue);
      border: 1px solid var(--solven-border);
      border-radius: 16px;
      padding: 14px 22px;
      font-weight: 700;
    }

    .btn-solven-secondary:hover {
      border-color: var(--solven-blue);
      color: var(--solven-blue);
    }

    .hero-visual {
      background: linear-gradient(135deg, #ffffff 0%, #f2f7fb 55%, #eafcf8 100%);
      border: 1px solid var(--solven-border);
      border-radius: 30px;
      padding: 26px;
      box-shadow: var(--solven-shadow);
      position: relative;
      min-height: 420px;
      overflow: hidden;
    }

    .screen {
      background: white;
      border: 1px solid var(--solven-border);
      border-radius: 24px;
      box-shadow: 0 18px 36px rgba(26, 69, 125, 0.10);
      padding: 18px;
      position: relative;
      z-index: 2;
    }

    .mini-logo {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: 'Manrope', sans-serif;
      font-weight: 800;
      color: var(--solven-blue);
      font-size: 14px;
    }

    .mini-module,
    .module-grid {
      display: grid;
      grid-template-columns: repeat(2, 16px);
      gap: 4px;
    }

    .mini-module span,
    .module-grid span {
      width: 16px;
      height: 16px;
      border-radius: 4px;
      display: block;
    }

    .mini-module span:nth-child(1), .module-grid span:nth-child(1) { background: var(--solven-blue); }
    .mini-module span:nth-child(2), .module-grid span:nth-child(2) { background: var(--solven-teal); }
    .mini-module span:nth-child(3), .module-grid span:nth-child(3) { background: var(--solven-teal); }
    .mini-module span:nth-child(4), .module-grid span:nth-child(4) { background: #dbe7f4; }

    .chart-box {
      height: 140px;
      border-radius: 18px;
      background: linear-gradient(180deg, #f9fbfd 0%, #eef5fb 100%);
      border: 1px solid var(--solven-border);
      position: relative;
      overflow: hidden;
    }

    .chart-box svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .stat-card,
    .issue-card,
    .service-card,
    .step-card {
      border: 1px solid var(--solven-border);
      border-radius: 22px;
      background: #fff;
      box-shadow: var(--solven-shadow);
    }

    .stat-card .value {
      font-family: 'Manrope', sans-serif;
      font-size: 28px;
      font-weight: 800;
      color: var(--solven-blue);
    }

    .visual-blocks {
      position: absolute;
      right: -8px;
      bottom: -6px;
      display: grid;
      grid-template-columns: repeat(4, 42px);
      gap: 8px;
      z-index: 1;
      opacity: 0.95;
    }

    .visual-blocks span {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      display: block;
    }

    .visual-blocks span:nth-child(1), .visual-blocks span:nth-child(5), .visual-blocks span:nth-child(8) { background: rgba(26,69,125,0.18); }
    .visual-blocks span:nth-child(2), .visual-blocks span:nth-child(6) { background: rgba(51,209,194,0.32); }
    .visual-blocks span:nth-child(3), .visual-blocks span:nth-child(7) { background: rgba(26,69,125,0.75); }
    .visual-blocks span:nth-child(4) { background: rgba(51,209,194,0.7); }

    .section-block {
      padding: 64px 0;
    }

    .section-title {
      font-size: clamp(30px, 4.4vw, 52px);
      line-height: 1.05;
      margin-bottom: 14px;
    }

    .section-copy {
      font-size: 20px;
      line-height: 1.6;
      color: var(--solven-gray);
      max-width: 860px;
    }

    .icon-badge {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      background: linear-gradient(135deg, rgba(26,69,125,0.12), rgba(51,209,194,0.16));
      color: var(--solven-blue);
      margin-bottom: 14px;
    }

    .card-title {
      color: var(--solven-blue);
      font-family: 'Manrope', sans-serif;
      font-size: 24px;
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: -0.02em;
    }

    .services-band {
      background: linear-gradient(180deg, rgba(247, 250, 252, 0.65) 0%, rgba(255,255,255,1) 100%);
      border-top: 1px solid var(--solven-border);
      border-bottom: 1px solid var(--solven-border);
    }

    .step-number {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: var(--solven-blue);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-family: 'Manrope', sans-serif;
      margin-bottom: 14px;
    }

    .cta-box {
      border-radius: 32px;
      background: linear-gradient(135deg, var(--solven-blue) 0%, #24589d 65%, #2170c8 100%);
      color: white;
      padding: 42px;
      box-shadow: 0 20px 50px rgba(26, 69, 125, 0.22);
      position: relative;
      overflow: hidden;
    }

    .cta-box::after {
      content: "";
      position: absolute;
      inset: auto -20px -20px auto;
      width: 220px;
      height: 220px;
      border-radius: 40px;
      background: radial-gradient(circle at center, rgba(51,209,194,0.25), rgba(51,209,194,0));
    }

    .cta-title {
      font-size: clamp(30px, 4vw, 50px);
      color: #fff;
      margin-bottom: 12px;
    }

    .cta-copy {
      font-size: 20px;
      color: rgba(255,255,255,0.92);
      max-width: 780px;
    }

    .footer {
      border-top: 1px solid var(--solven-border);
      background: #fff;
    }

    @media (max-width: 991.98px) {
      .hero {
        padding-top: 56px;
      }

      .hero-copy,
      .section-copy,
      .cta-copy {
        font-size: 18px;
      }

      .brand-text {
        font-size: 26px;
      }
    }