:root {
    --ink: #142033;
    --ink-2: #26364d;
    --muted: #647084;
    --faint: #8994a6;
    --line: #dce3ed;
    --panel: #ffffff;
    --surface: #f5f7fa;
    --surface-2: #edf2f7;
    --navy: #0b2a4a;
    --blue: #0aa8ff;
    --cyan: #22d7f5;
    --violet: #6128f2;
    --magenta: #ff1678;
    --green: #16705a;
    --amber: #b77816;
    --shadow: 0 22px 70px rgba(34, 43, 90, 0.14);
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  }
  body {
    margin: 0;
    color: var(--ink);
    background: #fff;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; text-decoration: none; }
  img, svg { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; }

  .skip-link {
    position: absolute;
    top: -60px;
    left: 12px;
    z-index: 100;
    padding: 10px 18px;
    background: var(--navy);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border-radius: 8px;
    text-decoration: none;
    transition: top .15s ease;
  }
  .skip-link:focus { top: 12px; }

  .wrap {
    width: min(1160px, calc(100% - 40px));
    margin: 0 auto;
  }

  .topbar {
    background: var(--navy);
    color: rgba(255,255,255,0.78);
    font-size: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .topbar .wrap {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }
  .topbar strong { color: #fff; font-weight: 700; }
  .topbar .meta { display: flex; gap: 18px; flex-wrap: nowrap; }

  header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .nav {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
    padding: 12px 0;
  }
  .nav-toggle {
    display: none;
    width: 42px; height: 42px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
  }
  .nav-toggle svg { width: 22px; height: 22px; color: var(--navy); }
  .mobile-nav {
    display: none;
    border-top: 1px solid var(--line);
  }
  .mobile-nav .wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0 18px;
  }
  .mobile-nav a {
    padding: 13px 4px;
    color: var(--ink-2);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
  }
  .mobile-nav .actions { display: flex; gap: 10px; margin-top: 12px; }
  .mobile-nav .actions .btn { flex: 1; text-align: center; }
  header.nav-open .mobile-nav { display: block; }
  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: 0;
  }
  .brand-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    object-position: left center;
    border-radius: 8px;
  }
  .brand small {
    display: block;
    margin-top: 1px;
    color: var(--muted);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  nav {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
    gap: 14px 18px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
  }
  nav a {
    position: relative;
    padding-bottom: 3px;
  }
  nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--blue), var(--violet));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
  }
  nav a:hover { color: var(--navy); }
  nav a:hover::after { transform: scaleX(1); }

  /* Dropdown navigation */
  nav .nav-item { position: relative; }
  nav .dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    padding: 0 0 3px;
    position: relative;
  }
  nav .dropdown-trigger::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--blue), var(--violet));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
  }
  nav .dropdown-trigger:hover,
  nav .nav-item.open .dropdown-trigger,
  nav .nav-item:focus-within .dropdown-trigger { color: var(--navy); }
  nav .dropdown-trigger:hover::after,
  nav .nav-item.open .dropdown-trigger::after,
  nav .nav-item:focus-within .dropdown-trigger::after { transform: scaleX(1); }
  nav .dropdown-caret {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-top: -3px;
    transition: transform .15s ease, margin-top .15s ease;
    flex-shrink: 0;
  }
  nav .nav-item.open .dropdown-caret,
  nav .nav-item:hover .dropdown-caret,
  nav .nav-item:focus-within .dropdown-caret { transform: rotate(225deg); margin-top: 2px; }
  nav .dropdown-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    margin-top: 10px;
    min-width: 232px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 30;
  }
  nav .dropdown-panel::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
  }
  nav .dropdown-panel a {
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--ink-2);
    font-weight: 600;
    font-size: 13.5px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  nav .dropdown-panel a svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--muted);
  }
  nav .dropdown-panel a::after { display: none; }
  nav .dropdown-panel a:hover,
  nav .dropdown-panel a:focus-visible,
  nav .dropdown-panel a[aria-current="page"] { background: var(--surface); color: var(--navy); }
  nav .nav-item:hover .dropdown-panel,
  nav .nav-item.open .dropdown-panel,
  nav .nav-item:focus-within .dropdown-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  /* Mobile accordion groups */
  .mobile-nav .nav-group { border-bottom: 1px solid var(--line); }
  .mobile-nav .nav-group-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 4px;
    background: none;
    border: none;
    text-align: left;
    color: var(--ink-2);
    font-weight: 700;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
  }
  .mobile-nav .nav-group-toggle svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--muted);
    transition: transform .15s ease;
  }
  .mobile-nav .nav-group.open .nav-group-toggle svg { transform: rotate(180deg); }
  .mobile-nav .nav-group-panel {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 0 0 10px 8px;
  }
  .mobile-nav .nav-group.open .nav-group-panel { display: flex; }
  .mobile-nav .nav-group-panel a {
    padding: 10px 8px;
    border-bottom: none;
    font-weight: 600;
    font-size: 14px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .mobile-nav .nav-group-panel a svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    color: var(--muted);
  }
  .mobile-nav .nav-group-panel a:hover,
  .mobile-nav .nav-group-panel a[aria-current="page"] { color: var(--navy); }

  .actions { display:flex; align-items:center; gap:10px; flex-shrink:0; margin-left:auto; }
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 17px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--navy);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  }
  .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(20,32,51,0.1); }
  .btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
  .btn.primary:hover {
    background: linear-gradient(90deg, var(--blue), var(--violet));
    border-color: transparent;
    box-shadow: 0 14px 28px -8px rgba(97,40,242,0.45);
  }

  .hero {
    padding: 0;
    background:
      radial-gradient(circle at 80% 15%, rgba(255,22,120,0.16), transparent 30%),
      radial-gradient(circle at 58% 22%, rgba(34,215,245,0.18), transparent 26%),
      linear-gradient(116deg, rgba(7,21,49,0.99), rgba(20,18,70,0.97) 52%, rgba(11,42,74,0.97)),
      linear-gradient(135deg, #071531, #16123f);
    color: #fff;
    overflow: hidden;
  }
  .hero-grid {
    min-height: 640px;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
    gap: 58px;
    align-items: center;
    padding: 72px 0 64px;
  }
  #hero {
    padding: 76px 0 60px;
    text-align: center;
    background:
      radial-gradient(circle at 15% 0%, rgba(34,215,245,0.08), transparent 45%),
      radial-gradient(circle at 85% 10%, rgba(255,22,120,0.06), transparent 40%),
      var(--surface);
    border-bottom: 1px solid var(--line);
  }
  #hero .section-head { max-width: 720px; margin: 0 auto; text-align: center; }
  #hero h1 { color: var(--navy); font-size: clamp(30px, 4vw, 42px); line-height: 1.15; }
  #hero > .wrap > p, #hero .section-head p:last-child { color: var(--muted); font-size: 16px; line-height: 1.6; }

  .eyebrow {
    margin: 0 0 14px;
    color: var(--faint);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }
  .hero .eyebrow, .contact .eyebrow { color: #7dd7df; }
  h1, h2, h3, p { margin-top: 0; }
  h1 {
    margin-bottom: 22px;
    max-width: 760px;
    font-size: clamp(40px, 6vw, 64px);
    line-height: 1.04;
    letter-spacing: 0;
  }
  .lede {
    max-width: 630px;
    margin-bottom: 30px;
    color: rgba(255,255,255,0.78);
    font-size: 18px;
  }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 42px; }
  .hero .btn { border-color: rgba(255,255,255,0.22); }
  .hero .btn.primary { background: #fff; color: var(--navy); border-color: #fff; }
  .hero .btn.secondary { background: rgba(255,255,255,0.08); color: #fff; }

  .hero-brand-card {
    margin-bottom: 24px;
    width: min(430px, 100%);
    padding: 20px 24px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
  }
  .hero-brand-card img {
    width: 100%;
    height: auto;
    max-height: 230px;
    object-fit: contain;
  }

  .home-services {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .home-service {
    min-height: 214px;
    padding: 22px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px;
    background: rgba(255,255,255,0.1);
    box-shadow: 0 24px 70px rgba(0,0,0,0.18);
  }
  .home-service-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--magenta), var(--blue) 52%, var(--violet));
    font-weight: 800;
    font-size: 13px;
  }
  .home-service h3 {
    margin-bottom: 8px;
    color: #fff;
    font-size: 19px;
  }
  .home-service p {
    margin-bottom: 16px;
    color: rgba(255,255,255,0.74);
    font-size: 14px;
  }
  .home-service ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
    color: rgba(255,255,255,0.84);
    font-size: 12px;
    font-weight: 650;
  }
  .home-service li {
    position: relative;
    padding-left: 14px;
  }
  .home-service li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cyan);
  }

  .proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    background: rgba(255,255,255,0.13);
    max-width: 620px;
  }
  .proof div {
    min-height: 92px;
    padding: 16px 18px;
    background: rgba(255,255,255,0.07);
  }
  .proof b { display: block; color: #fff; font-size: 25px; line-height: 1.1; }
  .proof span { display: block; margin-top: 7px; color: rgba(255,255,255,0.7); font-size: 12px; font-weight: 600; }

  .command-center {
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    background: rgba(255,255,255,0.96);
    color: var(--ink);
    box-shadow: 0 30px 90px rgba(0,0,0,0.28);
    overflow: hidden;
  }
  .cc-head {
    min-height: 62px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    background: #fbfcfe;
  }
  .cc-head b { color: var(--navy); }
  .status-dot {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--green);
    font-size: 12px;
    font-weight: 800;
  }
  .status-dot::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
  }
  .cc-body {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    min-height: 394px;
  }
  .cc-sidebar {
    padding: 18px;
    background: var(--surface);
    border-right: 1px solid var(--line);
  }
  .health {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    margin-bottom: 14px;
  }
  .health small { color: var(--muted); font-size: 12px; font-weight: 700; }
  .health strong { display: block; margin-top: 4px; color: var(--navy); font-size: 22px; }
  .bar {
    height: 8px;
    border-radius: 99px;
    background: var(--surface-2);
    overflow: hidden;
    margin-top: 12px;
  }
  .bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--magenta), var(--blue), var(--violet)); }
  .cc-main { padding: 20px; }
  .panel-title {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .stack-list { display: grid; gap: 10px; }
  .stack-item {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
  }
  .stack-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--blue);
    font-size: 12px;
    font-weight: 800;
  }
  .stack-item b { display: block; color: var(--ink-2); font-size: 14px; }
  .stack-item small { color: var(--faint); font-size: 12px; }
  .pill {
    padding: 5px 9px;
    border-radius: 99px;
    color: var(--green);
    background: #e8f6f1;
    font-size: 11px;
    font-weight: 800;
  }
  .category-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 18px 0 0;
  }
  .category-tag {
    padding: 6px 12px;
    border-radius: 99px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 700;
    transition: transform .14s ease, box-shadow .14s ease;
  }
  .category-tag:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(20,32,51,0.08); }
  .category-tag.tag-ms { background: #e9f2fd; border-color: #bcdafc; color: #0a5ec4; }
  .category-tag.tag-azure { background: #e6f2ff; border-color: #b8ddff; color: #0067b8; }
  .category-tag.tag-google { background: #fff2e0; border-color: #ffd9a0; color: #b8681a; }
  .category-tag.tag-adobe { background: #ffe9ea; border-color: #ffc4c8; color: #c8102e; }
  .category-tag.tag-autodesk { background: #e3f7fb; border-color: #b6ecf4; color: #0d7c94; }
  .category-tag.tag-security { background: #eaf8ef; border-color: #bfeece; color: #1a7a3e; }
  .category-tag.tag-aws { background: #f3efff; border-color: #d9cbff; color: #6128f2; }
  .category-tag.tag-trendmicro { background: #fdecec; border-color: #f8c9c9; color: #dc2626; }
  .category-tag.tag-seqrite { background: #fff0f6; border-color: #ffc9dd; color: #d93876; }
  .category-tag.tag-volumelicensing { background: #eafaf3; border-color: #b8ecd4; color: #07876c; }

  .category-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 28px 0 0;
  }
  .category-card {
    --accent: #0a5ec4;
    --accent-tint: #e9f2fd;
    padding: 18px 20px 20px;
    border-radius: 14px;
    background: var(--accent-tint);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-top: 4px solid var(--accent);
  }
  .category-card-label {
    display: block;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .category-card .category-tags { justify-content: flex-start; margin: 0; }
  .category-card-ms { --accent: #0a5ec4; --accent-tint: #e9f2fd; }
  .category-card-azure { --accent: #0067b8; --accent-tint: #e6f2ff; }
  .category-card-google { --accent: #b8681a; --accent-tint: #fff2e0; }
  .category-card-adobe { --accent: #c8102e; --accent-tint: #ffe9ea; }
  .category-card-autodesk { --accent: #0d7c94; --accent-tint: #e3f7fb; grid-column: span 1; }
  .category-card-aws { --accent: #6128f2; --accent-tint: #f3efff; }
  .category-card-trendmicro { --accent: #dc2626; --accent-tint: #fdecec; }
  .category-card-seqrite { --accent: #d93876; --accent-tint: #fff0f6; }
  .category-card-volumelicensing { --accent: #07876c; --accent-tint: #eafaf3; }
  @media (max-width: 900px) {
    .category-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 560px) {
    .category-groups { grid-template-columns: 1fr; }
  }

  .region-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 28px 0 0;
  }
  .region-card-central { --accent: #0a5ec4; --accent-tint: #e9f2fd; }
  .region-card-cg { --accent: #0067b8; --accent-tint: #e6f2ff; }
  .region-card-mh { --accent: #b8681a; --accent-tint: #fff2e0; }
  .region-card-ncr { --accent: #1a7a3e; --accent-tint: #eaf8ef; }
  .region-card-panindia { --accent: #c8102e; --accent-tint: #ffe9ea; grid-column: 1 / -1; }
  @media (max-width: 640px) {
    .region-groups { grid-template-columns: 1fr; }
  }

  .partner-strip {
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
    background: #fff;
  }
  .stats-band {
    background: var(--navy);
    padding: 34px 0;
  }
  .stats-band .wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .stats-band .stat {
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.14);
  }
  .stats-band .stat:last-child { border-right: none; }
  .stats-band .stat b {
    display: block;
    font-size: 34px;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
  }
  .stats-band .stat span {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: rgba(255,255,255,0.68);
  }
  @media (max-width: 640px) {
    .stats-band .wrap { grid-template-columns: 1fr; gap: 20px; }
    .stats-band .stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.14); padding-bottom: 20px; }
    .stats-band .stat:last-child { border-bottom: none; padding-bottom: 0; }
  }
  .partner-strip .wrap {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    align-items: start;
  }
  .strip-intro { padding-top: 4px; }
  .strip-desc {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
  }
  .strip-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }
  .logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .logo-tile {
    flex: 1 1 calc(25% - 9px);
    max-width: calc(25% - 9px);
    min-width: 130px;
    min-height: 108px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink-2);
    background: #fff;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    padding: 10px 8px;
    transition: box-shadow .16s ease, transform .16s ease;
  }
  .logo-tile:hover { box-shadow: 0 14px 30px rgba(20,32,51,0.1); transform: translateY(-2px); }
  .logo-tile em {
    display: block;
    color: var(--faint);
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .logo-tile-img { padding: 14px 10px; }
  .logo-tile-img img {
    width: 100%;
    max-height: 62px;
    object-fit: contain;
  }
  .logo-mark {
    width: 56px;
    height: 40px;
    margin: 0 auto;
    border-radius: 8px;
    display: grid;
    place-items: center;
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--magenta), var(--blue) 52%, var(--violet));
    font-size: 12px;
    font-weight: 800;
  }
  .logo-mark img {
    width: 25px;
    height: 25px;
    object-fit: contain;
  }

  section { padding: 88px 0; scroll-margin-top: 100px; }
  section.alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  #products { position: relative; overflow: hidden; }
  #products::before,
  #products::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.07;
    pointer-events: none;
    z-index: 0;
  }
  #products::before { top: -160px; left: 8%; background: var(--blue); }
  #products::after { top: -160px; right: 8%; background: var(--violet); }
  #products .wrap { position: relative; z-index: 1; }
  #products .section-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
    margin-bottom: 44px;
  }
  #products .section-head {
    position: relative;
    padding-left: 18px;
    margin-bottom: 0;
    flex: 1 1 480px;
  }
  #products .section-head::before {
    content: "";
    position: absolute;
    left: 0; top: 4px;
    width: 4px;
    height: calc(100% - 8px);
    min-height: 60px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--blue), var(--violet));
  }
  .platform-mosaic {
    flex: 0 0 300px;
    margin-top: 4px;
    padding: 22px 24px;
    background: linear-gradient(165deg, #fff, var(--surface) 160%);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(20,32,51,0.03), 0 10px 24px rgba(20,32,51,0.05);
  }
  .platform-mosaic > b {
    display: block;
    margin-bottom: 14px;
    color: var(--faint);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .mosaic-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
  .mosaic-tile {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .mosaic-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 18px -8px rgba(20,32,51,0.22);
  }
  .mosaic-tile img { width: 100%; height: 100%; object-fit: contain; }
  .mosaic-tile.mosaic-mark {
    font-size: 10px;
    font-weight: 800;
    border: 0;
  }
  .head-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
  }
  .head-chip {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 9px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(20,32,51,0.03);
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
  }
  .head-chip b {
    color: var(--navy);
    font-size: 14px;
    font-weight: 800;
  }
  @media (max-width: 980px) {
    #products .section-head-row { flex-direction: column; gap: 24px; }
    .platform-mosaic { flex-basis: auto; width: 100%; }
    .mosaic-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  }
  @media (max-width: 640px) {
    .mosaic-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  .section-head {
    max-width: 710px;
    margin-bottom: 38px;
  }
  .section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
  h2 {
    margin-bottom: 14px;
    color: var(--navy);
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.12;
    letter-spacing: 0;
  }
  .section-head p { color: var(--muted); font-size: 16px; }

  #solutions { position: relative; overflow: hidden; }
  #solutions::before,
  #solutions::after {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
  }
  #solutions::before { top: -180px; left: -140px; background: var(--blue); }
  #solutions::after { bottom: -200px; right: -160px; background: var(--violet); }
  #solutions .wrap { position: relative; z-index: 1; }
  #solutions .section-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
    margin-bottom: 38px;
  }
  #solutions .section-head {
    position: relative;
    padding-left: 18px;
    margin-bottom: 0;
    flex: 1 1 480px;
  }
  #solutions .section-head::before {
    content: "";
    position: absolute;
    left: 0; top: 4px;
    width: 4px;
    height: calc(100% - 8px);
    min-height: 60px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--blue), var(--violet));
  }
  .portfolio-glance {
    flex: 0 0 280px;
    margin-top: 4px;
    padding: 22px 24px;
    background: linear-gradient(165deg, #fff, var(--surface) 160%);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(20,32,51,0.03), 0 10px 24px rgba(20,32,51,0.05);
  }
  .portfolio-glance b {
    display: block;
    margin-bottom: 14px;
    color: var(--faint);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .portfolio-glance ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 11px;
  }
  .portfolio-glance li { display: block; }
  .portfolio-glance li a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-2);
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 6px;
    margin: -4px -6px;
    padding: 4px 6px;
    transition: background .15s ease, color .15s ease, transform .15s ease;
  }
  .portfolio-glance li a:hover,
  .portfolio-glance li a:focus-visible {
    background: var(--surface-2);
    color: var(--navy);
    transform: translateX(2px);
  }
  .portfolio-glance .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
  }
  @media (max-width: 980px) {
    #solutions .section-head-row { flex-direction: column; gap: 24px; }
    .portfolio-glance { flex-basis: auto; width: 100%; }
    .portfolio-glance ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  .solutions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
  .solution {
    --accent: #087fc3;
    --accent-tint: #edf8ff;
    min-height: 286px;
    padding: 32px 28px 28px;
    background: linear-gradient(165deg, #fff 55%, var(--accent-tint) 165%);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(20,32,51,0.03), 0 10px 24px rgba(20,32,51,0.05);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    position: relative;
    overflow: hidden;
  }
  .solution::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent) 60%, transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
  }
  .solution::after {
    content: "";
    position: absolute;
    top: -30px;
    right: -30px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--accent-tint);
    opacity: 0.6;
    z-index: 0;
    transition: transform .3s ease;
  }
  .solution > * { position: relative; z-index: 1; }
  .solution:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px -16px color-mix(in srgb, var(--accent) 35%, rgba(20,32,51,0.2));
    border-color: var(--accent-tint);
  }
  .solution:hover::before { transform: scaleX(1); }
  .solution:hover::after { transform: scale(1.25); }
  .solution { scroll-margin-top: 100px; }
  .solution.glance-active {
    animation: solutionFlash 1.1s ease;
  }
  @keyframes solutionFlash {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent), 0 10px 24px rgba(20,32,51,0.05); }
    30% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 35%, transparent), 0 10px 24px rgba(20,32,51,0.05); }
    100% { box-shadow: 0 1px 2px rgba(20,32,51,0.03), 0 10px 24px rgba(20,32,51,0.05); }
  }
  .solution:nth-child(1) { --accent: #087fc3; --accent-tint: #edf8ff; }
  .solution:nth-child(2) { --accent: #6128f2; --accent-tint: #f3efff; }
  .solution:nth-child(3) { --accent: #d93876; --accent-tint: #fff0f6; }
  .solution:nth-child(4) { --accent: #dc2626; --accent-tint: #fdecec; }
  .solution:nth-child(5) { --accent: #07876c; --accent-tint: #ebfaf5; }
  .solution:nth-child(6) { --accent: #b77816; --accent-tint: #fff7e7; }
  .solution:nth-child(7) { --accent: #087fc3; --accent-tint: #edf8ff; }
  .solution:nth-child(8) { --accent: #6128f2; --accent-tint: #f3efff; }
  .solution:nth-child(9) { --accent: #d93876; --accent-tint: #fff0f6; }
  .solution:nth-child(10) { --accent: #dc2626; --accent-tint: #fdecec; }
  .solution:nth-child(11) { --accent: #07876c; --accent-tint: #ebfaf5; }
  .solution:nth-child(12) { --accent: #b77816; --accent-tint: #fff7e7; }
  .solution:nth-child(13) { --accent: #087fc3; --accent-tint: #edf8ff; }
  .solution:nth-child(14) { --accent: #6128f2; --accent-tint: #f3efff; }
  .solution:nth-child(15) { --accent: #d93876; --accent-tint: #fff0f6; }
  .solution:nth-child(16) { --accent: #dc2626; --accent-tint: #fdecec; }
  .solution:nth-child(17) { --accent: #07876c; --accent-tint: #ebfaf5; }
  .solution:nth-child(18) { --accent: #b77816; --accent-tint: #fff7e7; }
  .solution .icon {
    width: 58px;
    height: 58px;
    margin-bottom: 22px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: var(--accent);
    background: var(--accent-tint);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-tint) 60%, transparent);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .solution .icon svg { width: 28px; height: 28px; }
  .solution:hover .icon {
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent-tint) 80%, transparent);
  }
  .solution h3 { margin-bottom: 9px; color: var(--ink); font-size: 18px; }
  .solution p { color: var(--muted); font-size: 14px; }
  .solution ul {
    margin: 18px 0 0;
    padding: 14px 0 0;
    list-style: none;
    display: grid;
    gap: 10px;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 600;
    border-top: 1px dashed var(--line);
  }
  .solution li {
    position: relative;
    padding-left: 18px;
  }
  .solution li.has-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 0;
  }
  .solution li.has-logo::before { display: none; }
  .solution-fit {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
    color: var(--ink-2);
    font-size: 12.5px;
    line-height: 1.5;
  }
  .solution-fit b { color: var(--accent); }
  .solution-timeline {
    margin-top: 6px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.5;
  }
  .solution-timeline b { color: var(--ink-2); }
  .li-logo {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--line);
    overflow: hidden;
  }
  .li-logo img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
  .li-logo.li-mark { color: #fff; font-size: 8px; font-weight: 800; border: 0; }
  .solution li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
  }

  .product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }
  .product-card {
    min-height: 236px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  .product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -10px rgba(20,32,51,0.14);
    border-color: rgba(10,42,74,0.16);
  }
  .product-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
  }
  .product-logo {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    background: #fff;
    flex: 0 0 auto;
  }
  .product-logo img {
    width: 32px;
    height: 32px;
    object-fit: contain;
  }
  .product-logo.service-badge {
    color: #fff;
    background: linear-gradient(135deg, var(--magenta), var(--blue) 52%, var(--violet));
    border: 0;
    font-size: 11px;
    font-weight: 800;
  }
  .product-logo.product-logo-img {
    width: 56px;
    height: 56px;
    padding: 8px;
    border: 1px solid var(--line);
    background: #fff;
  }
  .product-logo.product-logo-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .product-card h3 {
    margin-bottom: 2px;
    color: var(--navy);
    font-size: 16px;
  }
  .product-card small {
    color: var(--faint);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .product-card p {
    margin-bottom: 14px;
    color: var(--muted);
    font-size: 13px;
  }
  .versions {
    margin-bottom: 13px;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink-2);
    font-size: 12px;
    line-height: 1.45;
  }
  .versions b {
    display: block;
    margin-bottom: 3px;
    color: var(--navy);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .product-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 7px;
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 650;
  }
  .product-list li {
    padding-left: 14px;
    position: relative;
  }
  .product-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--blue);
  }

  .two-col {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 56px;
    align-items: start;
  }
  .ownership {
    margin-top: 40px;
    padding: 28px 28px 32px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
  }
  .ownership-head { max-width: 640px; margin-bottom: 20px; }
  .ownership-head h3 { margin: 4px 0 8px; color: var(--navy); font-size: 22px; }
  .ownership-head p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
  .ownership-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .ownership-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 18px;
    border-radius: 10px;
    border-left: 4px solid var(--accent);
    background: var(--accent-tint);
  }
  .ownership-row span { display: flex; align-items: center; gap: 10px; color: var(--navy); font-weight: 700; font-size: 14px; }
  .ownership-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
  .ownership-row-rua { --accent: #087fc3; --accent-tint: #edf8ff; }
  .ownership-row-joint { --accent: #b77816; --accent-tint: #fff7e7; }
  .tag-rua, .tag-joint {
    flex: 0 0 auto;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
  }
  .tag-rua { background: var(--blue); }
  .tag-joint { background: var(--amber); }
  @media (max-width: 640px) {
    .ownership-grid { grid-template-columns: 1fr; }
  }

  .icon-strip {
    display: grid;
    gap: 22px;
    padding: 28px 24px;
  }
  .icon-strip-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
  }
  .icon-circle {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(10,168,255,0.12), rgba(97,40,242,0.12));
    color: var(--navy);
  }
  .icon-circle svg { width: 22px; height: 22px; }
  .icon-strip-item h4 { margin: 0 0 4px; font-size: 14px; color: var(--ink-2); font-weight: 800; }
  .icon-strip-item p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
  .mini-partners {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 20px 24px 4px;
    border-top: 1px solid var(--line);
  }
  .mini-logo {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .mini-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
  .mini-logo-text {
    color: #fff;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    border: 0;
  }
  .card-footer-link {
    display: block;
    padding: 14px 24px 22px;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    text-decoration: none;
  }
  #about { position: relative; overflow: hidden; }
  #about::before,
  #about::after {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
  }
  #about::before { top: -200px; left: -120px; background: var(--blue); }
  #about::after { bottom: -220px; right: -140px; background: var(--magenta); }
  #about .wrap { position: relative; z-index: 1; }

  .about-head-row {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 28px;
  }
  .about-head-text { margin-bottom: 0; }

  .about-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .about-stat {
    --c1: #22c1ff;
    --c2: #087fc3;
    padding: 16px 16px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    color: #fff;
    box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--c2) 65%, transparent);
  }
  .about-stat .icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.22);
    margin-bottom: 8px;
  }
  .about-stat .icon svg { width: 16px; height: 16px; }
  .about-stat b { display: block; font-size: 24px; font-weight: 800; line-height: 1; }
  .about-stat span { display: block; margin-top: 4px; font-size: 12px; color: rgba(255,255,255,0.9); line-height: 1.35; }
  .about-stat-blue { --c1: #22c1ff; --c2: #087fc3; }
  .about-stat-violet { --c1: #8a5cff; --c2: #6128f2; }
  .about-stat-magenta { --c1: #ff5fa8; --c2: #d93876; }
  .about-stat-green { --c1: #26d6ab; --c2: #07876c; }

  .about-copy {
    column-count: 2;
    column-gap: 40px;
    margin: 0 0 36px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
  }
  .about-copy p { margin: 0 0 14px; break-inside: avoid; }

  .value-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .value-card {
    --accent: #087fc3;
    --accent-tint: #edf8ff;
    padding: 20px 20px 18px;
    background: var(--accent-tint);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
    border-top: 4px solid var(--accent);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(20,32,51,0.03);
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
    overflow: hidden;
  }
  .value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -18px color-mix(in srgb, var(--accent) 45%, rgba(20,32,51,0.2));
  }
  .value-card-blue { --accent: #087fc3; --accent-tint: #edf8ff; }
  .value-card-violet { --accent: #6128f2; --accent-tint: #f3efff; }
  .value-card-magenta { --accent: #d93876; --accent-tint: #fff0f6; }
  .value-card-red { --accent: #dc2626; --accent-tint: #fdecec; }
  .value-card-green { --accent: #07876c; --accent-tint: #ebfaf5; }
  .value-card-amber { --accent: #b77816; --accent-tint: #fff7e7; }
  .region-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .region-cards.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .region-card {
    --accent: #087fc3;
    --accent-tint: #edf8ff;
    padding: 18px 20px 20px;
    background: var(--accent-tint);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-top: 3px solid var(--accent);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(20,32,51,0.03);
  }
  .region-card-full { grid-column: 1 / -1; }
  .region-card-blue { --accent: #087fc3; --accent-tint: #edf8ff; }
  .region-card-cyan { --accent: #0aa8ff; --accent-tint: #eef7ff; }
  .region-card-amber { --accent: #b77816; --accent-tint: #fff7e7; }
  .region-card-green { --accent: #07876c; --accent-tint: #ebfaf5; }
  .region-card-red { --accent: #dc2626; --accent-tint: #fdecec; }
  .region-card-violet { --accent: #6128f2; --accent-tint: #f3efff; }
  .region-card-magenta { --accent: #d93876; --accent-tint: #fff0f6; }
  .region-card-title {
    display: block;
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 12px;
  }
  .region-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .region-pills span {
    padding: 6px 12px;
    border-radius: 99px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 700;
  }
  @media (max-width: 900px) {
    .region-cards.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 700px) {
    .region-cards { grid-template-columns: 1fr; }
  }
  .value-card .icon {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--accent);
    transition: transform .25s ease;
  }
  .value-card .icon svg { width: 20px; height: 20px; }
  .value-card:hover .icon { transform: scale(1.08) rotate(-4deg); }
  .value-card h3 { margin-bottom: 6px; color: var(--navy); font-size: 15px; }
  .value-card p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; }

  @media (max-width: 900px) {
    .about-head-row { grid-template-columns: 1fr; }
    .value-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 560px) {
    .about-stats { grid-template-columns: 1fr; }
    .about-copy { column-count: 1; }
    .value-cards { grid-template-columns: 1fr; }
  }


  .process {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }
  .step {
    --accent: #087fc3;
    --accent-tint: #edf8ff;
    min-height: 218px;
    padding: 22px 22px 20px;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
    border-top: 4px solid var(--accent);
    border-radius: 12px;
    background: var(--accent-tint);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .step:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -18px color-mix(in srgb, var(--accent) 45%, rgba(20,32,51,0.2));
  }
  .step-blue { --accent: #087fc3; --accent-tint: #edf8ff; }
  .step-violet { --accent: #6128f2; --accent-tint: #f3efff; }
  .step-magenta { --accent: #d93876; --accent-tint: #fff0f6; }
  .step-green { --accent: #07876c; --accent-tint: #ebfaf5; }
  .step-num {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 14px;
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
  }
  .step b {
    display: inline-flex;
    margin-bottom: 10px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
  }
  .step h3 { margin-bottom: 8px; color: var(--navy); font-size: 18px; }
  .step p { color: var(--ink-2); font-size: 14px; margin-bottom: 0; }

  .contact {
    position: relative;
    overflow: hidden;
    background:
      linear-gradient(90deg, rgba(11,42,74,0.96), rgba(11,42,74,0.88)),
      var(--navy);
    color: #fff;
  }
  .contact::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 70% 100% at 0% 0%, #000 40%, transparent 85%);
    mask-image: radial-gradient(ellipse 70% 100% at 0% 0%, #000 40%, transparent 85%);
    pointer-events: none;
  }
  .contact::after {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    right: -140px;
    bottom: -180px;
    background: radial-gradient(circle, rgba(97,40,242,0.35), transparent 70%);
    filter: blur(10px);
    pointer-events: none;
  }
  .contact .wrap { position: relative; z-index: 1; }
  .contact h2 { color: #fff; }
  .contact .section-head p { color: rgba(255,255,255,0.74); }
  .contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(320px, 0.54fr);
    gap: 46px;
    align-items: start;
  }
  .contact-map-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    align-items: stretch;
  }
  .contact-lines {
    display: grid;
    gap: 12px;
    margin-top: 30px;
  }
  .contact-line {
    padding: 17px 0;
    border-top: 1px solid rgba(255,255,255,0.16);
    display: grid;
    grid-template-columns: 116px 1fr;
    gap: 18px;
    color: rgba(255,255,255,0.78);
    font-size: 14px;
  }
  .contact-line strong { color: #fff; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; }
  .contact-card {
    padding: 28px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    box-shadow: 0 24px 70px rgba(0,0,0,0.18);
  }
  .contact-card img {
    width: 220px;
    max-width: 100%;
    height: auto;
    margin-bottom: 22px;
  }
  .contact-card h3 {
    margin-bottom: 10px;
    color: #fff;
    font-size: 22px;
  }
  .contact-card p {
    margin-bottom: 20px;
    color: rgba(255,255,255,0.74);
    font-size: 14px;
  }
  .contact-card .btn {
    width: 100%;
    min-height: 48px;
    border-color: #fff;
    background: #fff;
    color: var(--navy);
  }
  .whatsapp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    border-radius: 8px;
    background: #25D366;
    color: #05330f;
    font-weight: 800;
    text-decoration: none;
    font-size: 14px;
    transition: filter 0.15s ease;
  }
  .whatsapp-btn:hover { filter: brightness(1.06); }
  .whatsapp-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
  .address-block {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.16);
  }
  .address-block svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: rgba(255,255,255,0.7); }
  .address-block .address-label {
    display: block;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 4px;
  }
  .address-block .address-text {
    color: rgba(255,255,255,0.74);
    font-size: 14px;
    line-height: 1.6;
  }
  .contact-line .whatsapp-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    font-weight: 700;
  }
  .contact-line .whatsapp-inline:hover { color: #fff; }
  .contact-line .whatsapp-inline svg { width: 18px; height: 18px; flex-shrink: 0; }

  footer {
    position: relative;
    padding: 36px 0;
    background: #081d33;
    color: rgba(255,255,255,0.64);
    font-size: 13px;
  }
  footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--violet), var(--magenta));
  }
  footer a { color: rgba(255,255,255,0.82); }
  footer a:hover { color: #fff; }
  footer .wrap {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
  }
  footer strong { color: #fff; }

  :focus-visible { outline: 3px solid rgba(36,87,214,0.35); outline-offset: 3px; }

  @media (max-width: 980px) {
    nav { display: none; }
    .nav-toggle { display: flex; }
    .nav .actions { display: none; }
    .hero-grid, .two-col, .contact-grid { grid-template-columns: 1fr; }
    .contact-map-grid { grid-template-columns: 1fr; }
    .hero-grid { min-height: auto; }
    .command-center { max-width: 640px; }
    .home-services { max-width: 720px; }
    .solutions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .solution:nth-child(3n) { border-right: 1px solid var(--line); }
    .solution:nth-child(2n) { border-right: 0; }
    .solution:nth-child(n+3) { border-top: 1px solid var(--line); }
    .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .partner-strip .wrap { grid-template-columns: 1fr; }
    .logo-tile { flex: 1 1 calc(25% - 9px); max-width: calc(25% - 9px); }
  }

  @media (max-width: 640px) {
    .wrap { width: min(100% - 28px, 1160px); }
    .topbar .wrap, .nav { align-items: flex-start; }
    .topbar .wrap { padding: 10px 0; flex-direction: column; }
    .nav { padding: 14px 0; min-height: auto; }
    .actions .btn:not(.primary) { display: none; }
    .hero-grid { padding: 50px 0; gap: 36px; }
    .proof, .home-services, .solutions, .process, .product-grid { grid-template-columns: 1fr; }
    .solution, .solution:nth-child(2n), .solution:nth-child(3n) { border-right: 0; }
    .solution:nth-child(n+2) { border-top: 1px solid var(--line); }
    .cc-body { grid-template-columns: 1fr; }
    .cc-sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
    .stack-item { grid-template-columns: 36px 1fr; }
    .stack-item .pill { grid-column: 2; width: max-content; }
    .logo-tile { flex: 1 1 calc(50% - 6px); max-width: calc(50% - 6px); }
    .contact-line { grid-template-columns: 1fr; gap: 3px; }
    section { padding: 56px 0; }
    #hero { padding: 48px 0 40px; }
  }
  /* Home-page service focus */
  .brand-logo,
  .hero-brand-card { display: none !important; }

  .brand { gap: 0; }
  .brand::before {
    content: "Rua Technologies";
    font-size: 19px;
    letter-spacing: -0.03em;
  }
  header .brand { gap: 12px; }
  header .brand::before { content: none; }
  header .brand-logo {
    display: block !important;
    width: 44px;
    height: 44px;
    object-fit: contain;
    object-position: left center;
    border-radius: 0;
  }
  .hero-grid {
    grid-template-columns: minmax(0, 0.88fr) minmax(500px, 1.12fr);
    gap: 46px;
    min-height: 550px;
    padding: 48px 0;
  }
  .hero h1 { max-width: 620px; font-size: clamp(43px, 5.4vw, 62px); }
  .hero .lede { max-width: 560px; }
  .why-rua {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: 860px;
    margin: 30px auto 0;
    text-align: left;
  }
  .why-rua div {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .why-rua div:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -14px rgba(20,32,51,0.16); }
  .why-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 12px;
    border-radius: 8px;
    color: var(--cyan);
    background: var(--card-tint, #edf8ff);
  }
  .why-icon svg { width: 20px; height: 20px; }
  .why-rua b {
    display: block;
    color: var(--navy);
    font-size: 14px;
  }
  .why-rua span {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.5;
  }
  .hero .why-rua div {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.14);
  }
  .hero .why-icon {
    color: var(--cyan);
    background: rgba(255,255,255,0.12);
  }
  .hero .why-rua b { color: #fff; }
  .hero .why-rua span { color: rgba(255,255,255,0.68); }
  #why .why-rua { margin: 26px auto 0; }
  #why, #process, #industries { padding: 60px 0; }

  .industry-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    max-width: 780px;
    margin: 30px auto 0;
  }
  .industry-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    text-align: left;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .industry-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -14px rgba(20,32,51,0.16); }
  .industry-card b { color: var(--navy); font-size: 13.5px; }
  .industry-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    color: var(--ind-color);
    background: var(--ind-tint);
  }
  .industry-icon svg { width: 20px; height: 20px; }
  @media (max-width: 780px) {
    .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 480px) {
    .industry-grid { grid-template-columns: 1fr; }
  }

  .process-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    margin: 34px auto 0;
    max-width: 920px;
  }
  .process-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    min-width: 96px;
    padding: 0 6px;
  }
  .process-step::before {
    content: '';
    position: absolute;
    top: 15px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--line);
    z-index: 0;
  }
  .process-step:first-child::before { display: none; }
  .process-num {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--step-color, var(--cyan));
    color: var(--step-color, var(--cyan));
    font-size: 13px;
    font-weight: 700;
  }
  .process-highlight .process-num { background: var(--step-color, var(--cyan)); color: #fff; }
  .process-label {
    margin-top: 10px;
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
  }
  .process-highlight .process-label { color: var(--step-color, var(--cyan)); }
  @media (max-width: 780px) {
    .process-steps { flex-wrap: wrap; justify-content: flex-start; gap: 18px 0; }
    .process-step { flex: 0 0 33.33%; min-width: 0; }
    .process-step::before { display: none; }
  }

  #faq .wrap { max-width: 820px; }
  .faq-list { display: flex; flex-direction: column; gap: 12px; }
  .faq-item {
    border: 1px solid var(--line);
    border-left: 3px solid var(--faq-color, var(--cyan));
    border-radius: 10px;
    background: #fff;
    padding: 4px 20px;
    transition: box-shadow .2s ease, transform .2s ease;
  }
  .faq-item:hover { box-shadow: 0 10px 22px -14px rgba(20,32,51,0.18); }
  .faq-item summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    cursor: pointer;
    color: var(--navy);
    font-weight: 700;
    font-size: 15px;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after {
    content: '+';
    margin-left: auto;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--faq-color, var(--cyan));
    background: var(--faq-tint, #edf8ff);
    font-size: 15px;
    font-weight: 700;
    transition: transform .2s ease;
  }
  .faq-item[open] summary::after { content: '−'; }
  .faq-q {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    color: var(--faq-color, var(--cyan));
    background: var(--faq-tint, #edf8ff);
    font-size: 12px;
    font-weight: 800;
  }
  .faq-item p { color: var(--muted); margin: 0 0 18px 38px; font-size: 14px; line-height: 1.6; }
  .category-tags.center { justify-content: center; }
  .service-coverage {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    max-width: 570px;
  }
  .service-coverage span {
    padding: 7px 11px;
    border: 1px solid rgba(125, 215, 223, 0.34);
    border-radius: 99px;
    color: rgba(255,255,255,0.9);
    background: rgba(9, 25, 57, 0.38);
    font-size: 12px;
    font-weight: 700;
  }
  .home-services {
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .home-services-label {
    grid-column: 1 / -1;
    color: #7dd7df;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }
  .home-service {
    min-height: 224px;
    padding: 24px;
    background: linear-gradient(145deg, rgba(255,255,255,0.15), rgba(255,255,255,0.07));
  }
  .home-service:hover {
    transform: translateY(-4px);
    border-color: rgba(125, 215, 223, 0.64);
    background: linear-gradient(145deg, rgba(255,255,255,0.2), rgba(255,255,255,0.09));
  }
  .home-service-icon.service-logo {
    width: 74px;
    height: 54px;
    padding: 7px;
    background: #fff;
    overflow: hidden;
  }
  .service-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .service-logo-m365 { background: linear-gradient(135deg, #1c4ed8, #ea4da2) !important; }
  .service-logo-m365 img { transform: scale(1.55); }
  .service-logo-google img { transform: none; }
  .service-logo-azure img { transform: scale(1.06); }
  .home-service {
    display: flex;
    flex-direction: column;
  }
  .home-service ul { margin-bottom: 18px; }
  .service-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    transition: color .16s ease, gap .16s ease;
  }
  .service-link span {
    color: var(--cyan);
    font-size: 18px;
    line-height: 1;
  }
  .service-link:hover { color: var(--cyan); gap: 17px; }
  .service-catalogue { background: #fff; }
  .catalogue-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  .catalogue-card {
    --card-accent: #087fc3;
    --card-tint: #edf8ff;
    min-height: 166px;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--card-tint), #fff 62%);
    box-shadow: 0 8px 24px rgba(20,32,51,0.04);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    overflow: hidden;
  }
  .catalogue-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 86px;
    height: 5px;
    border-radius: 0 10px 0 10px;
    background: var(--card-accent);
  }
  .catalogue-card:hover {
    transform: translateY(-4px);
    border-color: var(--card-accent);
    box-shadow: 0 18px 38px rgba(20,32,51,0.12);
  }
  .catalogue-card b { color: var(--navy); font-size: 17px; }
  .catalogue-card span { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.5; }
  .catalogue-card i { margin-top: auto; padding-top: 17px; color: var(--card-accent); font-size: 12px; font-style: normal; font-weight: 800; }
  .catalogue-card:nth-child(3n + 2) { --card-accent: #6128f2; --card-tint: #f3efff; }
  .catalogue-card:nth-child(3n) { --card-accent: #d93876; --card-tint: #fff0f6; }
  .catalogue-card:nth-child(4n) { --card-accent: #07876c; --card-tint: #ebfaf5; }
  .catalogue-card:nth-child(5n) { --card-accent: #b77816; --card-tint: #fff7e7; }
  #m365-offerings {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  }
  #m365-offerings .eyebrow { color: #0078D4; }
  #m365-offerings h2 { color: #201F1E; }
  .m365-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .m365-group {
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
  }
  .m365-group.business,
  .m365-group.enterprise,
  .m365-group.frontline { border-top: 5px solid #0078D4; }
  .m365-group > p { margin-bottom: 8px; color: #0078D4; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
  .m365-group h3 { margin-bottom: 20px; color: #201F1E; font-size: 20px; line-height: 1.2; }
  .m365-group ul { margin: 0; padding: 0; list-style: none; }
  .m365-group li { padding: 13px 0; border-top: 1px solid var(--line); }
  .m365-group li:first-child { border-top: 0; padding-top: 0; }
  .m365-group li b { display: block; color: #201F1E; font-size: 14px; }
  .m365-group li span { display: block; margin-top: 3px; color: #605E5C; font-size: 12px; line-height: 1.45; }
  .m365-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .m365-group li .m365-tags span {
    display: inline-block;
    margin: 0;
    padding: 3px 8px;
    border-radius: 99px;
    background: #EFF6FC;
    border: 1px solid #C7E0F4;
    color: #004578;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
  }
  .m365-note { max-width: 780px; margin: 22px auto 0; color: var(--muted); font-size: 12px; text-align: center; }
  .m365-action { margin-top: 22px; text-align: center; }
  @media (max-width: 940px) {
    .hero-grid { grid-template-columns: 1fr; }
    .catalogue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .m365-groups { grid-template-columns: 1fr; }
    .why-rua { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 640px) {
    .service-coverage { gap: 7px; }
    .service-coverage span { font-size: 11px; }
    .catalogue-grid { grid-template-columns: 1fr; }
    .why-rua { grid-template-columns: 1fr; }
  }  /* ---------- Floating WhatsApp widget ---------- */
  .wa-widget { position: fixed; right: 22px; bottom: 22px; z-index: 999; font-family: inherit; }
  .wa-fab {
    width: 58px; height: 58px; border-radius: 50%;
    background: #25D366; color: #fff; border: 0; cursor: pointer;
    display: grid; place-items: center;
    box-shadow: 0 10px 26px rgba(37,211,102,0.45);
    transition: transform .18s ease;
  }
  .wa-fab:hover { transform: scale(1.06); }
  .wa-fab svg { width: 30px; height: 30px; }
  .wa-fab .wa-fab-close { display: none; width: 22px; height: 22px; }
  .wa-widget.open .wa-fab .wa-fab-chat { display: none; }
  .wa-widget.open .wa-fab .wa-fab-close { display: block; }
  .wa-card {
    position: absolute; bottom: 74px; right: 0;
    width: 300px; background: #fff; border-radius: 12px; overflow: hidden;
    box-shadow: 0 24px 60px -12px rgba(11,42,74,0.35);
    opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .wa-widget.open .wa-card { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
  .wa-card-head {
    background: var(--navy); color: #fff; padding: 16px 18px;
    display: flex; align-items: center; gap: 12px;
  }
  .wa-card-avatar {
    width: 40px; height: 40px; border-radius: 50%; background: #fff;
    display: grid; place-items: center; flex: 0 0 auto; overflow: hidden;
  }
  .wa-card-avatar img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
  .wa-card-head b { display: block; font-size: 14px; }
  .wa-card-head span { display: block; font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 1px; }
  .wa-card-body {
    background: #e8ded3; background-image: radial-gradient(rgba(0,0,0,0.03) 1px, transparent 1px);
    background-size: 14px 14px; padding: 18px;
  }
  .wa-bubble {
    background: #fff; border-radius: 8px; padding: 10px 12px; max-width: 85%;
    font-size: 13px; color: var(--ink-2); box-shadow: 0 1px 1px rgba(0,0,0,0.06);
  }
  .wa-bubble b { display: block; font-size: 12px; color: var(--green); margin-bottom: 2px; }
  .wa-card-foot { padding: 14px 16px 18px; background: #fff; }
  .wa-start-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 12px; border-radius: 8px; background: #25D366; color: #fff;
    font-weight: 800; font-size: 14px; text-decoration: none;
  }
  .wa-start-btn svg { width: 18px; height: 18px; }
  .wa-card-foot .wa-by { display: block; text-align: center; margin-top: 8px; font-size: 11px; color: var(--faint); }
  @media (max-width: 480px) {
    .wa-card { width: calc(100vw - 44px); right: -6px; }
  }


/* Fix oversized SVG icons in blog cards */
.article-card svg,
.product-card.article-card svg,
.blog-card svg{
  width:28px !important;
  height:28px !important;
  max-width:28px !important;
  max-height:28px !important;
  display:inline-block !important;
  flex-shrink:0;
}
.article-card img,
.product-card.article-card img,
.blog-card img{
  width:100%;
  height:220px;
  object-fit:cover;
}

/* ============================================================
   HOMEPAGE REDESIGN (v2) — scoped classes, index.html only
   ============================================================ */

/* Dark header (homepage only) */
header.header-dark {
  background: rgba(9, 20, 41, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
header.header-dark .brand span,
header.header-dark nav > a,
header.header-dark .dropdown-trigger { color: #fff; }
header.header-dark .brand small { color: rgba(255,255,255,0.6); }
header.header-dark nav .dropdown-trigger:hover,
header.header-dark nav .nav-item.open .dropdown-trigger,
header.header-dark nav .nav-item:focus-within .dropdown-trigger { color: #7dd7df; }
header.header-dark .dropdown-trigger::after { background: #7dd7df; }
header.header-dark .nav-toggle { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
header.header-dark .nav-toggle svg { color: #fff; }
.hp-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--blue), var(--violet));
  color: #fff !important;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  box-shadow: 0 14px 28px -10px rgba(97,40,242,0.5);
}
.hp-nav-cta:hover { filter: brightness(1.08); }
@media (max-width: 980px) { .hp-nav-cta { display: none; } }

/* Hero v2 layout */
.hp-hero-eyebrow {
  color: #7dd7df;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.hp-hero-copy { color: rgba(255,255,255,0.75); font-size: 16px; max-width: 540px; margin-bottom: 26px; }
.hp-h1-accent {
  background: linear-gradient(90deg, #0aa8ff, #6128f2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hp-btn-gradient {
  background: linear-gradient(90deg, var(--blue), var(--violet)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 14px 28px -10px rgba(97,40,242,0.5);
}
.hp-btn-gradient:hover { filter: brightness(1.08); }
.hp-feature-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
  margin-bottom: 30px;
  max-width: 560px;
}
.hp-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.85);
}
.hp-feature svg { width: 20px; height: 20px; flex-shrink: 0; color: #22d7f5; margin-top: 1px; }
.hp-feature b { display: block; font-size: 13px; color: #fff; }
.hp-feature span { color: rgba(255,255,255,0.6); font-size: 12px; }
.hp-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
.hp-stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
  max-width: 560px;
}
.hp-stat { display: flex; align-items: center; gap: 10px; }
.hp-stat svg { width: 20px; height: 20px; color: #22d7f5; flex-shrink: 0; }
.hp-stat b { display: block; font-size: 17px; color: #fff; line-height: 1.1; }
.hp-stat span { font-size: 11px; color: rgba(255,255,255,0.55); }

/* Hero graphic */
.hp-hero-art { position: relative; width: 100%; max-width: 520px; margin: 0 auto; }
.hp-hero-art svg { width: 100%; height: auto; display: block; }
.hp-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(10, 20, 41, 0.85);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 14px 30px rgba(0,0,0,0.35);
  font-weight: 700;
  font-size: 13px;
  color: #fff;
}
.hp-badge img { height: 20px; width: auto; max-width: 60px; object-fit: contain; }
.hp-badge-tl { top: 2%; left: -4%; }
.hp-badge-tr { top: 2%; right: -4%; }
.hp-badge-bl { bottom: 6%; left: -6%; }
.hp-badge-br { bottom: 6%; right: -6%; }
@media (max-width: 700px) {
  .hp-badge { padding: 7px 11px; font-size: 11px; }
  .hp-badge img { height: 15px; }
}

/* Trust bar */
.hp-quickstats {
  background: var(--navy);
  padding: 0 0 44px;
  margin-top: -1px;
}
.hp-quickcard {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 26px;
}
.hp-quickcard-full {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 18px;
}
.hp-quicktile-icon {
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(34,215,245,0.12);
  color: #22d7f5;
}
.hp-quicktile-icon svg { width: 20px; height: 20px; }
.hp-quicktile h3 { font-size: 14px; color: #fff; margin-bottom: 6px; }
.hp-quicktile p { font-size: 12.5px; color: rgba(255,255,255,0.6); line-height: 1.5; margin: 0; }
.hp-quickstat b { display: block; font-size: 30px; color: #fff; line-height: 1.1; }
.hp-quickstat span { font-size: 12.5px; color: rgba(255,255,255,0.6); }
@media (max-width: 1100px) {
  .hp-quickcard-full { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .hp-quickcard-full { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .hp-quickcard-full { grid-template-columns: 1fr; }
}

.hp-trustbar { background: var(--panel); border-bottom: 1px solid var(--line); padding: 40px 0; }
.hp-trustbar .wrap { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.hp-trustbar-text { flex: 0 0 300px; max-width: 340px; }
.hp-trustbar-text p.eyebrow { color: var(--blue); margin-bottom: 8px; }
.hp-trustbar-text span { color: var(--muted); font-size: 14px; }
.hp-trustbar-logos { display: flex; gap: 36px; flex-wrap: wrap; align-items: center; flex: 1; }
.hp-trustbar-logo { display: flex; align-items: center; gap: 10px; }
.hp-trustbar-logo img { height: 26px; width: auto; max-width: 90px; object-fit: contain; }
.hp-trustbar-logo b { display: block; font-size: 13.5px; color: var(--ink); }
.hp-trustbar-logo span { font-size: 11px; color: var(--muted); }

/* Core services v2 */
.hp-svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.hp-svc-card {
  padding: 26px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.hp-svc-icon {
  width: 56px; height: 56px;
  border-radius: 12px;
  display: grid; place-items: center;
  margin-bottom: 16px;
  background: var(--surface);
}
.hp-svc-icon img { height: 32px; width: auto; max-width: 42px; object-fit: contain; }
.hp-svc-icon svg { width: 28px; height: 28px; color: #fff; }
.hp-svc-card h3 { font-size: 17px; margin-bottom: 8px; }
.hp-svc-card p { color: var(--muted); font-size: 13.5px; margin-bottom: 14px; }
.hp-svc-card ul { margin: 0 0 16px; padding-left: 18px; color: var(--ink-2); font-size: 13px; line-height: 1.7; }
.hp-svc-card .service-link { margin-top: auto; font-size: 13.5px; font-weight: 700; color: var(--blue); }

/* Stats band v2 (4 items) */
.hp-stats-band { background: var(--navy); color: #fff; padding: 34px 0; }
.hp-stats-band .wrap { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.hp-stats-band .stat { display: flex; align-items: center; gap: 12px; justify-content: center; border-right: 1px solid rgba(255,255,255,0.14); }
.hp-stats-band .stat:last-child { border-right: none; }
.hp-stats-band .stat svg { width: 30px; height: 30px; color: #22d7f5; flex-shrink: 0; }
.hp-stats-band .stat b { display: block; font-size: 22px; }
.hp-stats-band .stat span { font-size: 12px; color: rgba(255,255,255,0.65); }

/* Why choose us */
.hp-why-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.hp-why-item {
  text-align: center;
  flex: 1 1 200px;
  max-width: 220px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 18px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.hp-why-item:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -22px rgba(20,32,51,0.22); }
.hp-why-icon {
  width: 48px; height: 48px;
  margin: 0 auto 14px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--surface);
  color: var(--navy);
}
.hp-why-icon svg { width: 22px; height: 22px; }
.hp-why-item h3 { font-size: 14.5px; margin-bottom: 6px; }
.hp-why-item p { font-size: 12.5px; color: var(--muted); }

/* Industries strip */
.hp-industries-grid { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 14px; }
.hp-industry { text-align: center; }
.hp-industry-icon {
  width: 46px; height: 46px;
  margin: 0 auto 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--blue);
}
.hp-industry-icon svg { width: 20px; height: 20px; }
.hp-industry span { font-size: 12px; font-weight: 600; color: var(--ink-2); }

/* Insights section */
.hp-insights-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* CTA band */
.hp-cta-band {
  background:
    radial-gradient(circle at 85% 20%, rgba(34,215,245,0.14), transparent 40%),
    linear-gradient(120deg, #071531, #16123f 60%, #0b2a4a);
  color: #fff;
  border-radius: 20px;
  padding: 40px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.hp-cta-copy h2 { font-size: 26px; margin-bottom: 8px; color: #fff; }
.hp-cta-copy p { color: rgba(255,255,255,0.7); font-size: 14.5px; margin: 0; max-width: 420px; }
.hp-cta-mid { display: flex; gap: 26px; flex-wrap: wrap; }
.hp-cta-mid div { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.hp-cta-mid svg { width: 20px; height: 20px; color: #22d7f5; }

/* Footer v2 */
footer.footer-v2 { background: var(--navy); color: rgba(255,255,255,0.75); padding: 56px 0 0; }
.footer-v2-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 30px; padding-bottom: 40px; }
.footer-v2-brand img { height: 52px; width: auto; margin-bottom: 14px; }
.footer-v2-brand p { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.6); max-width: 260px; margin-bottom: 18px; }
.footer-v2-social { display: flex; gap: 10px; }
.footer-v2-social a {
  width: 34px; height: 34px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.footer-v2-social svg { width: 16px; height: 16px; }
.footer-v2-col b { display: block; color: #fff; font-size: 14.5px; margin-bottom: 16px; }
.footer-v2-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-v2-col a { font-size: 13.5px; color: rgba(255,255,255,0.65); }
.footer-v2-col a:hover { color: #fff; }
.footer-v2-contact-line { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; margin-bottom: 12px; color: rgba(255,255,255,0.7); }
.footer-v2-contact-line svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; color: #22d7f5; }
.footer-v2-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 18px 0;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  font-size: 12.5px; color: rgba(255,255,255,0.5);
}
.footer-v2-bottom a { color: rgba(255,255,255,0.6); }
.footer-v2-bottom a:hover { color: #fff; }

/* Responsive */
@media (max-width: 1080px) {
  .hp-svc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hp-industries-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .footer-v2-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .hp-feature-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hp-stats-row { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 20px; }
  .hp-trustbar .wrap { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hp-trustbar-text { flex: 0 0 auto; max-width: none; }
  .hp-svc-grid { grid-template-columns: 1fr; }
  .hp-stats-band .wrap { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
  .hp-stats-band .stat { border-right: none; }
  .hp-industries-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .hp-cta-band { flex-direction: column; align-items: flex-start; text-align: left; }
  .footer-v2-top { grid-template-columns: 1fr; }
  .hp-hero-art { display: none; }
}

/* ---- All-Products catalogue: stats, chips, category grouping, compact cards ---- */
.products-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 26px 0 22px;
}
.products-stats > div {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(160deg, #fff, var(--surface));
  text-align: center;
}
.products-stats strong {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.products-stats span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 32px;
}
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 750;
  transition: transform .14s ease, box-shadow .14s ease;
}
.cat-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--accent) 45%, transparent);
}
.cat-chip b { font-weight: 800; opacity: .7; }
.cat-chip::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}

.product-category {
  margin-bottom: 34px;
  scroll-margin-top: 90px;
}
.product-category:last-child { margin-bottom: 0; }

.cat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--accent-tint);
  border-left: 4px solid var(--accent);
}
.cat-head-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  flex: 0 0 auto;
}
.cat-head-icon svg { width: 18px; height: 18px; }
.cat-head-text { flex: 1; min-width: 0; }
.cat-head h2 {
  margin: 0;
  font-size: 16.5px;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.cat-head p {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--ink-2);
}
.cat-count {
  flex: 0 0 auto;
  padding: 4px 11px;
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  white-space: nowrap;
}

.product-grid-compact {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: 12px;
}
.product-grid-compact .product-card {
  min-height: 0;
  padding: 14px 15px;
  border-top: 3px solid var(--accent);
  border-radius: 10px;
}
.product-grid-compact .product-head { gap: 9px; margin-bottom: 10px; }
.product-grid-compact .product-logo,
.product-grid-compact .product-logo.product-logo-img {
  width: 36px;
  height: 36px;
  padding: 6px;
}
.product-grid-compact .product-card h3 { font-size: 13.5px; line-height: 1.25; margin-bottom: 1px; }
.product-grid-compact .product-card small { font-size: 9.5px; }
.product-grid-compact .product-card p { font-size: 12px; margin-bottom: 10px; }
.product-grid-compact .versions { padding: 8px 9px; margin-bottom: 10px; font-size: 11px; }
.product-grid-compact .versions b { font-size: 9px; margin-bottom: 2px; }
.product-grid-compact .product-list { font-size: 11px; gap: 5px; }
.product-grid-compact .product-list li { padding-left: 12px; }

@media (max-width: 980px) {
  .product-grid-compact { grid-template-columns: repeat(var(--cols-tablet, 2), 1fr); }
}
@media (max-width: 720px) {
  .product-grid-compact { grid-template-columns: 1fr; }
  .cat-head { flex-wrap: wrap; }
  .cat-count { margin-left: 46px; }
}


/* Exact homepage why-section icon colors */
.hp-why-icon{
width:64px;height:64px;border-radius:16px;
display:flex;align-items:center;justify-content:center;
box-shadow:0 10px 25px rgba(15,23,42,.08);
transition:all .25s ease;
}
.hp-why-item:nth-child(1) .hp-why-icon{background:#EFF6FF;color:#2563EB;border:1px solid #BFDBFE;}
.hp-why-item:nth-child(2) .hp-why-icon{background:#ECFDF5;color:#10B981;border:1px solid #A7F3D0;}
.hp-why-item:nth-child(3) .hp-why-icon{background:#F5F3FF;color:#7C3AED;border:1px solid #DDD6FE;}
.hp-why-item:nth-child(4) .hp-why-icon{background:#FFF7ED;color:#F59E0B;border:1px solid #FDE1B8;}
.hp-why-item:nth-child(5) .hp-why-icon{background:#ECFEFF;color:#0891B2;border:1px solid #A5F3FC;}
.hp-why-icon svg{width:30px;height:30px;stroke:currentColor!important;}
.hp-why-item:hover .hp-why-icon{
transform:translateY(-4px) scale(1.08);
box-shadow:0 16px 35px rgba(37,99,235,.15);
}


/* ==== Industry section polish (non-destructive) ==== */
.industry-item,
.industry-card,
.hp-industry-item{
    transition:all .28s ease;
    padding:18px 12px;
    border-radius:16px;
}
.industry-item:hover,
.industry-card:hover,
.hp-industry-item:hover{
    transform:translateY(-5px);
    background:#fff;
    box-shadow:0 10px 28px rgba(15,23,42,.08);
}
.industry-item .icon,
.industry-card .icon,
.hp-industry-item .icon{
    width:60px;
    height:60px;
    margin:0 auto 14px;
    border-radius:16px;
    background:#fff;
    border:1px solid #E6EDF7;
    box-shadow:0 6px 18px rgba(15,23,42,.05);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .28s ease;
}
.industry-item:hover .icon,
.industry-card:hover .icon,
.hp-industry-item:hover .icon{
    border-color:#2563EB;
    transform:scale(1.08);
}
.industry-item h3,
.industry-card h3,
.hp-industry-item h3{
    margin-top:8px;
    font-weight:600;
}


/* Exact Industry section polish */
.hp-industries-grid{gap:24px!important}
.hp-industry{
padding:18px 12px!important;
border-radius:18px;
transition:all .28s ease;
}
.hp-industry:hover{
background:#fff;
transform:translateY(-5px);
box-shadow:0 10px 28px rgba(15,23,42,.08);
}
.hp-industry-icon{
width:60px!important;
height:60px!important;
margin:0 auto 14px!important;
display:flex;align-items:center;justify-content:center;
background:#fff;
border:1px solid #E6EDF7;
border-radius:16px;
box-shadow:0 6px 18px rgba(15,23,42,.05);
transition:.28s ease;
}
.hp-industry:hover .hp-industry-icon{
border-color:#2563eb;
transform:scale(1.08);
}
.hp-industry span{
display:block;
margin-top:10px;
font-weight:600;
}


/* ===== Latest Insights polish ===== */
.hp-blog-grid,.blog-grid{gap:32px!important;}
.hp-blog-card,.blog-card{
 border:1px solid #E6EDF7!important;
 border-radius:18px!important;
 box-shadow:0 8px 28px rgba(15,23,42,.05);
 transition:all .28s ease;
 height:100%;
 display:flex;
 flex-direction:column;
 padding:22px!important;
}
.hp-blog-card:hover,.blog-card:hover{
 transform:translateY(-6px);
 border-color:#2563EB!important;
 box-shadow:0 16px 40px rgba(15,23,42,.10);
}
.hp-blog-card h3,.blog-card h3{
 line-height:1.35;
 margin:10px 0 16px;
}
.hp-blog-card p,.blog-card p{
 color:#64748B;
 line-height:1.75;
}
.hp-blog-card a,.blog-card a{
 margin-top:auto;
 font-weight:600;
 transition:.25s;
}
.hp-blog-card:hover a,.blog-card:hover a{
 letter-spacing:.2px;
}
.hp-blog-meta span:first-child,.blog-meta span:first-child{
 display:inline-block;
 padding:5px 10px;
 border-radius:999px;
 background:#EFF6FF;
 color:#2563EB;
 font-weight:600;
 margin-right:8px;
}
.hp-blog-meta span:last-child,.blog-meta span:last-child{
 color:#64748B;
}