/* Page styles extracted from inline CSS for maintainability. */

:root {
        --ink: #071126;
        --muted: #5f6b82;
        --line: #dce4f3;
        --paper: #f7f9fe;
        --white: #fff;
        --blue: #4e46e5;
        --violet: #8b3ffc;
        --red: #ec345a;
        --cyan: #22c6e8;
        --radius: 22px;
        --shadow: 0 22px 70px rgba(19, 34, 84, 0.12);
      }
      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        font-family:
          Inter,
          ui-sans-serif,
          system-ui,
          -apple-system,
          "Segoe UI",
          sans-serif;
        color: var(--ink);
        background: var(--white);
        line-height: 1.6;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      .wrap {
        width: min(1180px, calc(100% - 40px));
        margin: auto;
      }
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 14px 20px;
        border-radius: 12px;
        font-weight: 750;
        border: 1px solid transparent;
        transition: 0.25s;
      }
      .btn:hover {
        transform: translateY(-2px);
      }
      .btn-primary {
        color: #fff;
        background: linear-gradient(
          110deg,
          var(--blue),
          var(--violet),
          var(--red)
        );
        box-shadow: 0 14px 35px rgba(110, 58, 224, 0.28);
      }
      .btn-light {
        background: #fff;
        border-color: var(--line);
      }
      header {
        position: sticky;
        top: 0;
        z-index: 20;
        background: rgba(255, 255, 255, 0.88);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(220, 228, 243, 0.8);
      }
      nav {
        height: 78px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 0 20px;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 11px;
        font-weight: 850;
        font-size: 1.06rem;
      }
      .logo {
        height: 92px;
        width: auto;
        display: block;
        object-fit: contain;
      }
      .navlinks {
        display: flex;
        align-items: center;
        gap: 28px;
        font-size: 0.94rem;
        font-weight: 650;
      }
      .menu {
        display: none;
        border: 0;
        background: #eef1fa;
        border-radius: 10px;
        padding: 9px;
        font-size: 1.2rem;
      }
      .hero {
        overflow: hidden;
        position: relative;
        padding: 100px 0 70px;
        background: linear-gradient(135deg, #f7f9fe 0%, #f0edff 100%);
      }
      .hero:before {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        border: 1px solid rgba(78, 70, 229, 0.12);
        border-radius: 50%;
        right: -180px;
        top: 30px;
        box-shadow:
          0 0 0 70px rgba(78, 70, 229, 0.025),
          0 0 0 140px rgba(236, 52, 90, 0.02);
      }
      .hero-content {
        position: relative;
        z-index: 1;
      }
      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: #4c38c8;
        background: #eeeafe;
        border: 1px solid #dcd5ff;
        border-radius: 999px;
        padding: 7px 12px;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }
      .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #22c55e;
        box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.13);
      }
      h1 {
        font-size: clamp(2.8rem, 6vw, 5.25rem);
        line-height: 1.02;
        letter-spacing: -0.055em;
        margin: 23px 0 23px;
        max-width: 800px;
      }
      .grad {
        background: linear-gradient(100deg, #3221af 15%, #8c37e8 55%, #e22f57);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .lead {
        font-size: 1.13rem;
        color: var(--muted);
        max-width: 650px;
      }
      section {
        padding: 92px 0;
      }
      .section-head {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 35px;
        margin-bottom: 40px;
      }
      .kicker {
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.11em;
        color: #6751d7;
        font-weight: 850;
      }
      .section-head h2 {
        font-size: clamp(2rem, 4vw, 3.3rem);
        line-height: 1.08;
        letter-spacing: -0.04em;
        margin: 9px 0;
      }
      .section-head p {
        max-width: 570px;
        color: var(--muted);
      }
      .center {
        text-align: center;
        max-width: 760px;
        margin: 0 auto 45px;
      }
      .center h2 {
        font-size: clamp(2rem, 4vw, 3.3rem);
        line-height: 1.08;
        letter-spacing: -0.04em;
        margin: 0 0 12px;
      }
      .center p {
        color: var(--muted);
      }
      .services-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
      }
      .service-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 20px;
        padding: 35px;
        transition: 0.3s;
      }
      .service-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 30px 80px rgba(19, 34, 84, 0.15);
        border-color: #c9b8ff;
      }
      .service-card h3 {
        font-size: 1.35rem;
        margin: 0 0 12px;
      }
      .service-card p {
        margin: 0 0 24px;
        color: var(--muted);
        font-size: 0.95rem;
        line-height: 1.7;
      }
      .service-features {
        margin: 20px 0;
      }
      .feature-item {
        display: flex;
        gap: 12px;
        padding: 12px 0;
        color: #5a6b7f;
        font-size: 0.92rem;
      }
      .feature-item:before {
        content: "✓";
        color: #22af70;
        font-weight: 900;
        min-width: 20px;
      }
      .process-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
      }
      .step {
        padding: 28px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 18px;
        text-align: center;
        transition: 0.25s;
      }
      .step:hover {
        border-color: #c9b8ff;
        background: #fafbff;
      }
      .step-num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        background: linear-gradient(135deg, var(--blue), var(--violet));
        color: #fff;
        border-radius: 50%;
        font-weight: 900;
        margin-bottom: 15px;
      }
      .step h3 {
        font-size: 1.1rem;
        margin: 12px 0 10px;
      }
      .step p {
        font-size: 0.88rem;
        color: var(--muted);
        margin: 0;
      }
      .showcase {
        background: var(--paper);
      }
      .showcase-section {
        display: grid;
        grid-template-columns: 1fr 1.1fr;
        gap: 50px;
        align-items: center;
        margin-bottom: 70px;
      }
      .showcase-copy h3 {
        font-size: 1.4rem;
        margin: 0 0 16px;
      }
      .showcase-copy p {
        color: var(--muted);
        margin: 8px 0;
      }
      .highlight-box {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 18px;
        padding: 28px;
        margin-top: 20px;
      }
      .highlight-box strong {
        display: block;
        color: var(--blue);
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 8px;
      }
      .cta {
        padding: 86px 0;
      }
      .cta-box {
        padding: 54px;
        border-radius: 30px;
        background:
          radial-gradient(
            circle at 90% 10%,
            rgba(255, 255, 255, 0.24),
            transparent 25%
          ),
          linear-gradient(110deg, #4337d2, #8b32d1 58%, #e23955);
        color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 30px;
      }
      .cta h2 {
        font-size: clamp(2rem, 4vw, 3.2rem);
        line-height: 1.08;
        letter-spacing: -0.04em;
        margin: 0 0 12px;
      }
      .cta p {
        margin: 0;
        color: #eee9ff;
      }
      .cta .btn {
        background: #fff;
        color: #301d86;
        white-space: nowrap;
      }
      footer {
        background: #060a17;
        color: #c5cce0;
        padding: 55px 0 28px;
      }
      .foot {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 40px;
      }
      .foot h4 {
        color: #fff;
      }
      .foot a {
        display: block;
        margin: 8px 0;
        color: #c5cce0;
      }
      .copy {
        border-top: 1px solid #20263a;
        margin-top: 40px;
        padding-top: 22px;
        font-size: 0.82rem;
      }
      @media (max-width: 900px) {
        .navlinks {
          display: none;
          position: absolute;
          left: 20px;
          right: 20px;
          top: 70px;
          background: #fff;
          border: 1px solid var(--line);
          border-radius: 15px;
          padding: 20px;
          box-shadow: var(--shadow);
          flex-direction: column;
          align-items: flex-start;
        }
        .navlinks.open {
          display: flex;
        }
        .menu {
          display: block;
        }
        .services-grid {
          grid-template-columns: 1fr;
        }
        .process-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .showcase-section {
          grid-template-columns: 1fr;
        }
        .foot {
          grid-template-columns: 1fr 1fr;
        }
        .foot > div:first-child {
          grid-column: span 2;
        }
      }
      @media (max-width: 600px) {
        .wrap {
          width: min(100% - 28px, 1180px);
        }
        .hero {
          padding: 76px 0 60px;
        }
        h1 {
          font-size: 2.75rem;
        }
        .section-head {
          display: block;
        }
        .services-grid {
          grid-template-columns: 1fr;
        }
        .process-grid {
          grid-template-columns: 1fr;
        }
        .showcase-section {
          display: block;
        }
        .cta-box {
          padding: 35px 25px;
          display: block;
        }
        .cta .btn {
          margin-top: 24px;
        }
        .foot {
          grid-template-columns: 1fr;
        }
        .foot > div:first-child {
          grid-column: auto;
        }
        section {
          padding: 70px 0;
        }
      }

/* Service Card Icon Styling */
        .service-icon {
          width: 56px;
          height: 56px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(135deg, var(--blue), var(--violet));
          border-radius: 16px;
          margin-bottom: 16px;
          flex-shrink: 0;
          transition:
            transform 0.3s,
            box-shadow 0.3s;
        }

        .service-icon svg {
          width: 32px;
          height: 32px;
          stroke: #fff;
          stroke-width: 2;
          color: #fff;
        }

        /* Service card flex layout */
        .service-card {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
        }

        /* Hover effect for icons */
        .service-card:hover .service-icon {
          transform: translateY(-4px);
          box-shadow: 0 8px 24px rgba(78, 70, 229, 0.2);
        }

        /* Mobile responsiveness */
        @media (max-width: 600px) {
          .service-icon {
            width: 48px;
            height: 48px;
          }

          .service-icon svg {
            width: 28px;
            height: 28px;
          }
        }