:root {
      --bg: #f5f8fc;
      --surface: rgba(255,255,255,.84);
      --card: #ffffff;
      --text: #0f172a;
      --muted: #4b5563;
      --line: rgba(15, 23, 42, 0.1);
      --primary: #0d5f92;
      --primary-2: #1780c2;
      --accent: #f59e0b;
      --accent-2: #22c55e;
      --shadow: 0 20px 50px rgba(14, 34, 66, 0.12);
      --radius: 24px;
      --max: 1240px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: Inter, Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(23,128,194,.12), transparent 30%),
        radial-gradient(circle at top right, rgba(245,158,11,.10), transparent 25%),
        linear-gradient(180deg, #f7fbff 0%, #eef5fb 100%);
      line-height: 1.55;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    .container { width: min(calc(100% - 32px), var(--max)); margin: 0 auto; }
    .glass {
      background: var(--surface);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(255,255,255,.65);
      box-shadow: var(--shadow);
    }

    .topbar {
      border-bottom: 1px solid var(--line);
      background: rgba(13,95,146,.95);
      color: #fff;
      font-size: 14px;
    }
    .topbar-inner {
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
      min-height: 52px;
    }
    .topbar-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
    .pill1-link {
      display: inline-flex; align-items: center; justify-content: center;
      min-height: 38px; padding: 0 14px; border-radius: 999px; font-weight: 600;
      background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
    }
    .pill2-link {
      display: inline-flex; align-items: center; justify-content: center;
      min-height: 38px; padding: 0 14px; border-radius: 999px; font-weight: 600;
      background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
    }

    .pill1-link.primary { background: #fff; color: var(--primary); }
    .pill2-link.primary { background: #fff; color: var(--primary); }

    header.site-header {
      position: sticky; top: 0; z-index: 1000;
      background: rgba(255,255,255,.82); backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(15,23,42,.06);
    }
    .nav-shell {
      display: flex; align-items: center; justify-content: space-between; gap: 18px;
      min-height: 82px;
    }
    .brand img { width: 150px; }
    .nav-links {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    }
    .nav-links a {
      padding: 10px 14px; border-radius: 999px; font-weight: 600; color: #234;
    }
    .nav-links a:hover, .nav-links a.active { background: rgba(13,95,146,.08); color: var(--primary); }
    .nav-toggle {
      display: none; background: #fff; border: 1px solid var(--line); border-radius: 14px;
      width: 48px; height: 48px; box-shadow: var(--shadow); cursor: pointer;
    }
    .nav-toggle span {
      display: block; width: 22px; height: 2px; background: #123; margin: 5px auto;
    }

    .hero {
      padding: 42px 0 22px;
    }
    .hero-card {
      position: relative; overflow: hidden; border-radius: 32px; min-height: 650px;
      background: #0e4b73;
      box-shadow: 0 30px 80px rgba(6, 29, 56, 0.22);
    }
    .hero-bg,
    .hero-overlay { position: absolute; inset: 0; }
    .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
    .hero-overlay {
      background:
        linear-gradient(90deg, rgba(4,24,45,.82) 0%, rgba(7,35,61,.72) 38%, rgba(8,45,73,.38) 72%, rgba(11,52,84,.18) 100%),
        linear-gradient(180deg, rgba(7,31,51,.28), rgba(7,31,51,.62));
    }
    .hero-content {
      position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr;
      gap: 24px; align-items: center; min-height: 620px; padding: 56px;
    }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 10px 16px; border-radius: 999px;
      background: rgba(255,255,255,.10); color: #fff; font-weight: 700; font-size: 14px;
      border: 1px solid rgba(255,255,255,.16);
      margin-bottom: 18px;
    }
    h1 {
      margin: 0 0 16px; font-size: clamp(2.5rem, 4vw, 4.8rem); line-height: .98;
      letter-spacing: -0.04em; color: #fff;
    }
    .hero p.lead {
      margin: 0 0 28px; color: rgba(255,255,255,.88); font-size: clamp(1.02rem, 1.5vw, 1.18rem);
      max-width: 690px;
    }
    .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 54px; padding: 0 22px; border-radius: 16px; font-weight: 700;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .btn:hover { transform: translateY(-1px); }
    .btn-primary {
      color: #fff; background: linear-gradient(135deg, var(--primary-2), var(--primary));
      box-shadow: 0 18px 30px rgba(23,128,194,.28);
    }
    .btn-secondary {
      color: #fff; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16);
    }
    .hero-stats {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px;
      max-width: 760px;
    }
    .stat {
      padding: 18px; border-radius: 22px; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.16);
      color: #fff;
    }
    .stat strong { display: block; font-size: 1.10rem; margin-bottom: 4px; }
    .stat span { color: rgba(255,255,255,.78); font-size: .92rem; }

    .hero-side {
      display: grid; gap: 16px; align-content: center; justify-items: end;
    }
    .bubble-stack { display: grid; grid-template-columns: repeat(2, minmax(120px, 170px)); gap: 14px; }
    .bubble-card {
      background: rgba(255,255,255,.95); border-radius: 24px; padding: 18px; box-shadow: var(--shadow);
      min-height: 140px; display: flex; align-items: center; justify-content: center;
    }
    .bubble-card.featured { grid-column: span 2; min-height: 120px; }
    .bubble-card img { max-height: 92px; width: auto; }
    .side-note {
      color: #fff; max-width: 420px; text-align: right; font-size: .98rem;
      background: rgba(255,255,255,.08); padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(255,255,255,.14);
    }

    section { padding: 38px 0; }
    .section-head { text-align: center; margin-bottom: 28px; }
    .section-head .label {
      display: inline-flex; padding: 8px 14px; border-radius: 999px; font-size: .84rem;
      text-transform: uppercase; letter-spacing: .11em; font-weight: 800;
      color: var(--primary); background: rgba(13,95,146,.08); margin-bottom: 10px;
    }
    .section-head h2 {
      margin: 0 0 10px; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -.03em;
    }
    .section-head p { max-width: 760px; margin: 0 auto; color: var(--muted); }

    .logo-row {
      display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
    }
    .logo-card {
      min-height: 112px; display: flex; align-items: center; justify-content: center;
      border-radius: 22px; background: rgba(255,255,255,.72); border: 1px solid rgba(15,23,42,.06);
      box-shadow: 0 16px 35px rgba(14,34,66,.06);
      padding: 18px;
    }
    .logo-card img { max-height: 44px; opacity: .9; }

    .feature-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    }
    .feature-card {
      background: rgba(255,255,255,.86); border: 1px solid rgba(15,23,42,.06); border-radius: 26px;
      box-shadow: 0 18px 45px rgba(14,34,66,.07); overflow: hidden;
    }
    .feature-card-inner { padding: 24px; }
    .feature-title {
      display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
    }
    .feature-title img {
      width: 52px; height: 52px; object-fit: contain; border-radius: 16px; background: rgba(13,95,146,.06); padding: 10px;
    }
    .feature-title h3 { margin: 0; font-size: 1.3rem; line-height: 1.15; }
    .feature-card ul {
      margin: 0; padding-left: 20px; color: #1f2937;
      display: grid; gap: 10px;
    }
    .feature-card p { margin: 0; color: #334155; }
    .badge-new { color: #dc2626; font-weight: 800; }

    .integrations {
      display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center;
      padding: 24px; border-radius: 28px;
    }
    .integration-logos {
      display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end;
    }
    .integration-logos img {
      height: 42px; width: auto; border-radius: 14px; background: #fff; padding: 8px 12px; box-shadow: 0 12px 28px rgba(14,34,66,.08);
    }

    .cta-band {
      padding: 28px; border-radius: 30px; display: grid; grid-template-columns: 1.2fr auto; gap: 18px; align-items: center;
      color: #fff; background: linear-gradient(135deg, #0d5f92, #0b4d76 60%, #083958);
      box-shadow: 0 24px 50px rgba(13,95,146,.24);
    }
    .cta-band h3 { margin: 0 0 8px; font-size: clamp(1.6rem, 3vw, 2.3rem); }
    .cta-band p { margin: 0; color: rgba(255,255,255,.86); }

    .split-card {
      display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center;
      padding: 28px; border-radius: 30px;
    }
    .image-card, .text-card {
      background: rgba(255,255,255,.88); border: 1px solid rgba(15,23,42,.06); border-radius: 28px; padding: 24px; box-shadow: 0 18px 40px rgba(14,34,66,.07);
    }
    .text-card h3 { margin-top: 0; font-size: 1.6rem; }
    .text-card p { color: var(--muted); }

    .steps {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px;
    }
    .step-card {
      padding: 18px; border-radius: 24px; background: rgba(255,255,255,.88); border: 1px solid rgba(15,23,42,.06); text-align: center;
      box-shadow: 0 16px 35px rgba(14,34,66,.06);
    }
    .step-card img { border-radius: 18px; margin: 0 auto 12px; }
    .step-number {
      display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
      border-radius: 999px; background: rgba(13,95,146,.08); color: var(--primary); font-weight: 800; margin-bottom: 10px;
    }

    .video-card {
      padding: 20px; border-radius: 30px; text-align: center;
      background: linear-gradient(180deg, #0b4266, #0c3655);
      color: #fff; box-shadow: 0 26px 56px rgba(8, 34, 57, 0.22);
    }
    .video-card p { color: rgba(255,255,255,.84); max-width: 740px; margin: 0 auto 14px; }
    .video-thumb {
      display: inline-block; border-radius: 24px; overflow: hidden; box-shadow: 0 22px 44px rgba(0,0,0,.24); margin-top: 10px;
    }
    .video-note { margin-top: 14px; color: rgba(255,255,255,.72); font-size: .92rem; }

    .design-layout {
      display: grid; grid-template-columns: .95fr 1.05fr; gap: 24px; align-items: start;
    }
    .design-thumbs {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
    }
    .thumb-card {
      background: rgba(255,255,255,.88); border: 1px solid rgba(15,23,42,.06); border-radius: 24px;
      padding: 16px; box-shadow: 0 16px 36px rgba(14,34,66,.06); text-align: center;
    }
    .thumb-card img { border-radius: 16px; margin-bottom: 10px; }

    .reviews {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
    }
    .review-card {
      padding: 24px; border-radius: 28px; background: rgba(255,255,255,.9); border: 1px solid rgba(15,23,42,.06);
      box-shadow: 0 18px 40px rgba(14,34,66,.07);
    }
    .quote-mark { font-size: 3rem; line-height: 1; color: rgba(13,95,146,.16); font-weight: 900; }
    .review-card p { color: #334155; }
    .review-person { display: flex; gap: 14px; align-items: center; margin-top: 14px; }
    .review-person img { width: 72px; height: 72px; border-radius: 18px; object-fit: cover; }
    .review-person strong { display: block; }
    .review-person span { color: #64748b; font-size: .95rem; }

    .pricing-grid {
      display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
    }
    .price-card {
      position: relative; border-radius: 28px; overflow: hidden;
      background: rgba(255,255,255,.92); border: 1px solid rgba(15,23,42,.06); box-shadow: 0 18px 40px rgba(14,34,66,.07);
    }
    .price-head {
      padding: 18px 20px; color: #fff; font-weight: 800; text-align: center;
    }
    .price-body { padding: 24px 20px; }
    .price-body h3 { margin: 0; font-size: 2.2rem; line-height: 1; }
    .price-body .per { color: #64748b; margin-bottom: 16px; }
    .price-body ul { margin: 0 0 22px; padding-left: 18px; display: grid; gap: 10px; color: #334155; }
    .price-card .btn { width: 100%; }
    .price-footnote { margin-top: 14px; color: #64748b; font-size: .93rem; }

    .iframe-card {
      background: rgba(255,255,255,.9); border: 1px solid rgba(15,23,42,.06); border-radius: 30px; box-shadow: 0 18px 45px rgba(14,34,66,.07); overflow: hidden;
    }
    .iframe-card iframe { width: 100%; min-height: 980px; border: 0; display: block; }

    footer {
      padding: 34px 0 44px;
    }
    .footer-card {
      padding: 30px; border-radius: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
    }
    .footer-card h3 { margin-top: 0; }
    .footer-links {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px;
    }
    .footer-links a { color: #334155; }
    .footer-bottom {
      margin-top: 18px; text-align: center; color: #64748b; font-size: .95rem;
    }

    @media (max-width: 1180px) {
      .hero-content,
      .design-layout,
      .split-card,
      .footer-card,
      .integrations,
      .cta-band { grid-template-columns: 1fr; }
      .hero-side { justify-items: start; }
      .side-note { text-align: left; }
      .pricing-grid { grid-template-columns: repeat(3, 1fr); }
      .feature-grid { grid-template-columns: repeat(2, 1fr); }
      .logo-row { grid-template-columns: repeat(3, 1fr); }
    }

    @media (max-width: 900px) {
      .nav-toggle { display: inline-block; }
      .nav-links {
        position: absolute; top: calc(100% + 10px); left: 16px; right: 16px;
        display: none; padding: 14px; border-radius: 20px; background: rgba(255,255,255,.96);
        border: 1px solid rgba(15,23,42,.08); box-shadow: var(--shadow);
      }
      .nav-links.open { display: grid; gap: 6px; }
      .nav-links a { padding: 12px 14px; }
      .hero-content { padding: 34px 24px; min-height: auto; }
      .hero-card { min-height: unset; }
      .bubble-stack { grid-template-columns: repeat(3, 1fr); width: 100%; }
      .bubble-card.featured { grid-column: auto; }
      .steps,
      .pricing-grid,
      .reviews,
      .feature-grid,
      .design-thumbs { grid-template-columns: 1fr 1fr; }
      .hero-stats { grid-template-columns: 1fr; }
    }

    @media (max-width: 640px) {
      .topbar-inner, .topbar-actions { justify-content: center; text-align: center; }
      .topbar-inner { padding: 12px 0; }
      .nav-shell { min-height: 72px; }
      .brand img { width: 150px; }
      .hero { padding-top: 22px; }
      h1 { font-size: 2.35rem; }
      .hero p.lead { font-size: 1rem; }
      .hero-ctas { flex-direction: column; }
      .btn { width: 100%; }
      .bubble-stack,
      .steps,
      .pricing-grid,
      .reviews,
      .feature-grid,
      .design-thumbs,
      .footer-links,
      .logo-row { grid-template-columns: 1fr; }
      .logo-card { min-height: 94px; }
      .container { width: min(calc(100% - 20px), var(--max)); }
      .hero-content,
      .split-card,
      .image-card,
      .text-card,
      .video-card,
      .footer-card,
      .feature-card-inner,
      .price-body,
      .cta-band,
      .integrations { padding-left: 18px; padding-right: 18px; }
      .iframe-card iframe { min-height: 780px; }
      .pill2-link { display: none; } 
    }