/* =========================================================
   CodeBraze — Odoo ERP Solutions
   ========================================================= */
:root {
  --navy: #0f1a3c;
  --navy-2: #1b2550;
  --text: #4a5372;
  --muted: #6b7390;
  --primary: #5b50ec;
  --primary-2: #6a4cf0;
  --blue: #3b5bdb;
  --link: #3d55e8;
  --line: #e9ecf5;
  --bg-soft: #f5f6fb;
  --footer: #0b1633;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(28, 39, 90, .07);
  --shadow-sm: 0 4px 16px rgba(28, 39, 90, .06);
  --container: 1184px;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;
}

/* ---------- Theme palette ----------
   Light values are the original design colours. Dark values keep the same hue
   so the purple/blue brand carries into dark mode. */
:root {
  color-scheme: light;
  --surface: #fff;
  --surface-rgb: 255, 255, 255;
  --primary-text: var(--primary);
  --navy-bg: #0f1a3c;
  --bd-8f84ff: #8f84ff;
  --bd-b9b1fa: #b9b1fa;
  --bd-b9b2f8: #b9b2f8;
  --bd-bdb7f5: #bdb7f5;
  --bd-c9c2f6: #c9c2f6;
  --bd-cfc9fb: #cfc9fb;
  --bd-cfcbdc: #cfcbdc;
  --bd-cfd3e3: #cfd3e3;
  --bd-d6d1f8: #d6d1f8;
  --bd-d9dce8: #d9dce8;
  --bd-dcd8fb: #dcd8fb;
  --bd-dfe2ee: #dfe2ee;
  --bd-e2def9: #e2def9;
  --bd-e2e0f7: #e2e0f7;
  --bd-e2e4f0: #e2e4f0;
  --bd-e3e0fb: #e3e0fb;
  --bd-e3e1f7: #e3e1f7;
  --bd-e3e5f0: #e3e5f0;
  --bd-e3e6f0: #e3e6f0;
  --bd-e4e1fb: #e4e1fb;
  --bd-e6e4f5: #e6e4f5;
  --bd-e6e4fb: #e6e4fb;
  --bd-e6e8f0: #e6e8f0;
  --bd-e6e8f1: #e6e8f1;
  --bd-e6e8f2: #e6e8f2;
  --bd-e9e8f6: #e9e8f6;
  --bd-eceef5: #eceef5;
  --bd-eceef6: #eceef6;
  --bd-eef0f6: #eef0f6;
  --bd-efedf4: #efedf4;
  --bd-f0f1f6: #f0f1f6;
  --bd-f6caca: #f6caca;
  --bg-b3aaf0: #b3aaf0;
  --bg-b8a6ff: #b8a6ff;
  --bg-b9b1ff: #b9b1ff;
  --bg-b9c9ff: #b9c9ff;
  --bg-c9a2ff: #c9a2ff;
  --bg-cfc9fb: #cfc9fb;
  --bg-d6d2f2: #d6d2f2;
  --bg-d6d2f7: #d6d2f7;
  --bg-dbe6ff: #dbe6ff;
  --bg-dbeafe: #dbeafe;
  --bg-dcd8e6: #dcd8e6;
  --bg-dcd8fb: #dcd8fb;
  --bg-dcfce7: #dcfce7;
  --bg-dfdff0: #dfdff0;
  --bg-dfe2ee: #dfe2ee;
  --bg-dfe7ff: #dfe7ff;
  --bg-dfe8ff: #dfe8ff;
  --bg-e2e0f5: #e2e0f5;
  --bg-e3f7df: #e3f7df;
  --bg-e4e0ff: #e4e0ff;
  --bg-e4e1fb: #e4e1fb;
  --bg-e4e1fc: #e4e1fc;
  --bg-e4ecff: #e4ecff;
  --bg-e5e7ef: #e5e7ef;
  --bg-e6e4fb: #e6e4fb;
  --bg-e6e8f2: #e6e8f2;
  --bg-e6ecff: #e6ecff;
  --bg-e6f8ee: #e6f8ee;
  --bg-e7efff: #e7efff;
  --bg-e7f7f0: #e7f7f0;
  --bg-e8efff: #e8efff;
  --bg-e9e8f6: #e9e8f6;
  --bg-e9ebf3: #e9ebf3;
  --bg-ece4ff: #ece4ff;
  --bg-ecebf8: #ecebf8;
  --bg-ecebfd: #ecebfd;
  --bg-eceef5: #eceef5;
  --bg-eef0f6: #eef0f6;
  --bg-eef0f7: #eef0f7;
  --bg-eef0f8: #eef0f8;
  --bg-eef3ff: #eef3ff;
  --bg-efe6dd: #efe6dd;
  --bg-efedfd: #efedfd;
  --bg-efedff: #efedff;
  --bg-eff4ff: #eff4ff;
  --bg-f0f1f6: #f0f1f6;
  --bg-f0f4ff: #f0f4ff;
  --bg-f1e6ff: #f1e6ff;
  --bg-f1efff: #f1efff;
  --bg-f1f2f8: #f1f2f8;
  --bg-f1f2fb: #f1f2fb;
  --bg-f2f1fb: #f2f1fb;
  --bg-f3f1ff: #f3f1ff;
  --bg-f3f4f8: #f3f4f8;
  --bg-f3f4fa: #f3f4fa;
  --bg-f4f5fa: #f4f5fa;
  --bg-f5f3ff: #f5f3ff;
  --bg-f5f4fe: #f5f4fe;
  --bg-f5f6fa: #f5f6fa;
  --bg-f6f5ff: #f6f5ff;
  --bg-f6f7fb: #f6f7fb;
  --bg-f6f7fc: #f6f7fc;
  --bg-f7f6ff: #f7f6ff;
  --bg-f7f7fc: #f7f7fc;
  --bg-f8f6fb: #f8f6fb;
  --bg-f8f7ff: #f8f7ff;
  --bg-f8f9fc: #f8f9fc;
  --bg-faf9ff: #faf9ff;
  --bg-fbe4ec: #fbe4ec;
  --bg-fbfbfe: #fbfbfe;
  --bg-fbfbff: #fbfbff;
  --bg-fde8d8: #fde8d8;
  --bg-fdecec: #fdecec;
  --bg-fdeeee: #fdeeee;
  --bg-fdf0dc: #fdf0dc;
  --bg-fef3c7: #fef3c7;
  --bg-fff4d6: #fff4d6;
  --tx-0f1a3c: #0f1a3c;
  --tx-15803d: #15803d;
  --tx-16a34a: #16a34a;
  --tx-1c2446: #1c2446;
  --tx-1d4ed8: #1d4ed8;
  --tx-1f9d6b: #1f9d6b;
  --tx-1fa971: #1fa971;
  --tx-1faa59: #1faa59;
  --tx-2d3350: #2d3350;
  --tx-2f3654: #2f3654;
  --tx-2f6fe0: #2f6fe0;
  --tx-34d399: #34d399;
  --tx-3d6cf0: #3d6cf0;
  --tx-4a5372: #4a5372;
  --tx-4b3f78: #4b3f78;
  --tx-4b43c9: #4b43c9;
  --tx-4b4f5c: #4b4f5c;
  --tx-5a6180: #5a6180;
  --tx-5b50ec: #5b50ec;
  --tx-6b5ce7: #6b5ce7;
  --tx-6d5dfc: #6d5dfc;
  --tx-714b67: #714b67;
  --tx-7a8099: #7a8099;
  --tx-7c4a2d: #7c4a2d;
  --tx-7ee2b8: #7ee2b8;
  --tx-8a80e8: #8a80e8;
  --tx-8a90a8: #8a90a8;
  --tx-8f8f8f: #8f8f8f;
  --tx-9aa0b8: #9aa0b8;
  --tx-9aa1b8: #9aa1b8;
  --tx-9aa4c7: #9aa4c7;
  --tx-9b4de0: #9b4de0;
  --tx-a16207: #a16207;
  --tx-a3a8bd: #a3a8bd;
  --tx-b4232a: #b4232a;
  --tx-b45309: #b45309;
  --tx-be185d: #be185d;
  --tx-c2410c: #c2410c;
  --tx-d97706: #d97706;
  --tx-e5484d: #e5484d;
  --tx-f87171: #f87171;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --navy: #eef0ff;
  --navy-2: #d9ddf7;
  --text: #b6bdd8;
  --muted: #9098b8;
  --link: #9fb0ff;
  --line: #242d55;
  --bg-soft: #121a3a;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, .3);
  --surface: #0e1430;
  --surface-rgb: 14, 20, 48;
  --primary-text: #aaa2ff;
  --bd-8f84ff: #373172;
  --bd-b9b1fa: #322c67;
  --bd-b9b2f8: #322c67;
  --bd-bdb7f5: #312c66;
  --bd-c9c2f6: #312a61;
  --bd-cfc9fb: #2e285c;
  --bd-cfcbdc: #433c59;
  --bd-cfd3e3: #353c5a;
  --bd-d6d1f8: #2d275a;
  --bd-d9dce8: #323953;
  --bd-dcd8fb: #2a2556;
  --bd-dfe2ee: #2c3452;
  --bd-e2def9: #2b2454;
  --bd-e2e0f7: #282454;
  --bd-e2e4f0: #2a3051;
  --bd-e3e0fb: #292353;
  --bd-e3e1f7: #282454;
  --bd-e3e5f0: #2b3150;
  --bd-e3e6f0: #2b3350;
  --bd-e4e1fb: #292352;
  --bd-e6e4f5: #292453;
  --bd-e6e4fb: #272351;
  --bd-e6e8f0: #2d334c;
  --bd-e6e8f1: #2b314d;
  --bd-e6e8f2: #292f4f;
  --bd-e9e8f6: #262351;
  --bd-eceef5: #272f4b;
  --bd-eceef6: #252d4d;
  --bd-eef0f6: #27304a;
  --bd-efedf4: #332b47;
  --bd-f0f1f6: #2a2e46;
  --bd-f6caca: #5e2828;
  --bg-b3aaf0: #231b5c;
  --bg-b8a6ff: #261957;
  --bg-b9b1ff: #1e1853;
  --bg-b9c9ff: #17244f;
  --bg-c9a2ff: #341a59;
  --bg-cfc9fb: #1c164a;
  --bg-d6d2f2: #1c164a;
  --bg-d6d2f7: #1a1548;
  --bg-dbe6ff: #132141;
  --bg-dbeafe: #132741;
  --bg-dcd8e6: #2d273c;
  --bg-dcd8fb: #191444;
  --bg-dcfce7: #134223;
  --bg-dfdff0: #1d1d3d;
  --bg-dfe2ee: #1f253b;
  --bg-dfe7ff: #121d3f;
  --bg-dfe8ff: #121f3f;
  --bg-e2e0f5: #191541;
  --bg-e3f7df: #1b4213;
  --bg-e4e0ff: #18123f;
  --bg-e4e1fb: #181340;
  --bg-e4e1fc: #17123f;
  --bg-e4ecff: #121e3d;
  --bg-e5e7ef: #212536;
  --bg-e6e4fb: #16123f;
  --bg-e6e8f2: #1d2138;
  --bg-e6ecff: #111c3c;
  --bg-e6f8ee: #123f26;
  --bg-e7efff: #111f3c;
  --bg-e7f7f0: #143d2b;
  --bg-e8efff: #111e3b;
  --bg-e9e8f6: #19173a;
  --bg-e9ebf3: #1d2235;
  --bg-ece4ff: #1e123d;
  --bg-ecebf8: #17143a;
  --bg-ecebfd: #13113b;
  --bg-eceef5: #1b2134;
  --bg-eef0f6: #1b2133;
  --bg-eef0f7: #191f35;
  --bg-eef0f8: #161d37;
  --bg-eef3ff: #101c39;
  --bg-efe6dd: #3e2e1d;
  --bg-efedfd: #16113a;
  --bg-efedff: #151139;
  --bg-eff4ff: #101d38;
  --bg-f0f1f6: #1d2030;
  --bg-f0f4ff: #101b38;
  --bg-f1e6ff: #24113c;
  --bg-f1efff: #151038;
  --bg-f1f2f8: #191d32;
  --bg-f1f2fb: #111539;
  --bg-f2f1fb: #151139;
  --bg-f3f1ff: #161037;
  --bg-f3f4f8: #1b1f2f;
  --bg-f3f4fa: #151a34;
  --bg-f4f5fa: #171b32;
  --bg-f5f3ff: #161037;
  --bg-f5f4fe: #141037;
  --bg-f5f6fa: #181d30;
  --bg-f6f5ff: #131036;
  --bg-f6f7fb: #161b31;
  --bg-f6f7fc: #121735;
  --bg-f7f6ff: #140f35;
  --bg-f7f7fc: #131333;
  --bg-f8f6fb: #211631;
  --bg-f8f7ff: #140f35;
  --bg-f8f9fc: #151c30;
  --bg-faf9ff: #150f34;
  --bg-fbe4ec: #3f1222;
  --bg-fbfbfe: #0f0f34;
  --bg-fbfbff: #0f0f33;
  --bg-fde8d8: #432813;
  --bg-fdecec: #3a1111;
  --bg-fdeeee: #3a1111;
  --bg-fdf0dc: #412f13;
  --bg-fef3c7: #4a3f15;
  --bg-fff4d6: #433613;
  --tx-0f1a3c: #d9dff0;
  --tx-15803d: #bee6cd;
  --tx-16a34a: #b1e1c3;
  --tx-1c2446: #d1d6ed;
  --tx-1d4ed8: #93acf1;
  --tx-1f9d6b: #b0e1cd;
  --tx-1fa971: #abdfca;
  --tx-1faa59: #abdfc1;
  --tx-2d3350: #cdd1e3;
  --tx-2f3654: #cbd0e2;
  --tx-2f6fe0: #94b5ef;
  --tx-34d399: #9ae9cc;
  --tx-3d6cf0: #8da9f6;
  --tx-4a5372: #bdc2d4;
  --tx-4b3f78: #c0b9da;
  --tx-4b43c9: #a4a0e4;
  --tx-4b4f5c: #c9cbd3;
  --tx-5a6180: #b6bacc;
  --tx-5b50ec: #9891f3;
  --tx-6b5ce7: #9e94ef;
  --tx-6d5dfc: #9387fd;
  --tx-714b67: #d3bdce;
  --tx-7a8099: #9da1b4;
  --tx-7c4a2d: #e4c7b7;
  --tx-7ee2b8: #9be9c8;
  --tx-8a80e8: #a097ec;
  --tx-8a90a8: #9ca1b5;
  --tx-8f8f8f: #a8a8a8;
  --tx-9aa0b8: #9aa0b8;
  --tx-9aa1b8: #9aa1b8;
  --tx-9aa4c7: #b0b8d3;
  --tx-9b4de0: #c497ed;
  --tx-a16207: #e4d1b7;
  --tx-a3a8bd: #a3a8bd;
  --tx-b4232a: #dda6a9;
  --tx-b45309: #e1c5af;
  --tx-be185d: #dda6bd;
  --tx-c2410c: #deb9a9;
  --tx-d97706: #dcc2a3;
  --tx-e5484d: #f09497;
  --tx-f87171: #f98a8a;
}

[fill="#e6ecff"] { fill: var(--bg-e6ecff); }
[fill="#dfe7ff"] { fill: var(--bg-dfe7ff); }
[fill="#dbe6ff"] { fill: var(--bg-dbe6ff); }


*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

.container {
  width: 100%;
  max-width: calc(var(--container) + 48px);
  margin: 0 auto;
  padding: 0 24px;
}

.ico { width: 16px; height: 16px; flex: none; }

/* ---------- Shared ---------- */
.eyebrow {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--tx-6b5ce7);
  padding-bottom: 5px;
  margin-bottom: 14px;
  border-bottom: 1.5px solid var(--bd-c9c2f6);
}

.h2 {
  font-size: 30px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--navy);
}
.h2--lg { font-size: 40px; line-height: 1.2; }

.lead { font-size: 15.5px; line-height: 1.65; color: var(--text); }
.sub  { font-size: 13.5px; line-height: 1.6; color: var(--text); margin-top: 10px; }

.grad-text {
  background: linear-gradient(90deg, #3d6cf0 0%, #5a4fe8 55%, #7b4be8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 28px;
  border: 0;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary {
  color: #fff;
  background: linear-gradient(90deg, #4f55ee 0%, #6a4cf0 100%);
  box-shadow: 0 8px 20px rgba(91, 80, 236, .28);
}
.btn--primary:hover { box-shadow: 0 12px 26px rgba(91, 80, 236, .38); }
.btn--outline {
  color: var(--primary-text);
  background: var(--surface);
  border: 1.5px solid var(--bd-bdb7f5);
}
.btn--outline:hover { border-color: var(--primary); }
.btn--ghost {
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .45);
  background: transparent;
}
.btn--ghost:hover { background: rgba(255, 255, 255, .08); }
.btn--sm { height: 42px; padding: 0 20px; font-size: 14px; border-radius: 8px; }
.btn--wide { padding: 0 38px; height: 54px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--link);
  transition: gap .2s ease;
}
.link-arrow:hover { gap: 12px; }
.link-arrow .ico { width: 14px; height: 14px; }

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.sec-head .link-arrow { margin-bottom: 44px; }

/* ---------- Logo ---------- */
.logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.logo img { height: 48px; width: auto; }
.logo--light img { height: 52px; }

/* Odoo wordmark (text based) */
.odoo-word {
  font-family: var(--font);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--tx-8f8f8f);
}
.odoo-word::first-letter { color: var(--tx-714b67); }
.odoo-word--lg { font-size: 44px; font-weight: 600; color: var(--tx-8f8f8f); }
.odoo-word--xs { font-size: 11px; }

/* ================= HEADER ================= */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(var(--surface-rgb), .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: box-shadow .25s ease;
}
.header.is-scrolled { box-shadow: 0 6px 24px rgba(20, 30, 70, .07); }
.header__inner {
  display: flex;
  align-items: center;
  height: 74px;
}
.nav {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-left: auto;
  margin-right: 34px;
}
.nav__link {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy-2);
  padding: 6px 0;
  transition: color .2s ease;
}
.nav__link:hover { color: var(--primary-text); }
.nav__link.is-active { color: var(--primary-text); }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary);
}
.header__cta { box-shadow: 0 6px 16px rgba(91, 80, 236, .28); }

.burger {
  display: none;
  width: 42px;
  height: 42px;
  margin-left: 12px;
  border: 0;
  border-radius: 8px;
  background: var(--bg-f1f2fb);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.burger span { width: 18px; height: 2px; border-radius: 2px; background: var(--navy); transition: .25s; }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ================= HERO ================= */
.hero {
  position: relative;
  padding: 36px 0 56px;
  background:
    radial-gradient(620px 420px at 78% 38%, rgba(142, 120, 255, .16), transparent 70%),
    radial-gradient(500px 300px at 100% 0%, rgba(160, 140, 255, .12), transparent 70%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg-fbfbff) 100%);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: 36px;
  align-items: center;
}
.hero__title {
  font-size: 50px;
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--navy);
  margin-bottom: 22px;
}
.hero__text {
  max-width: 450px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 28px;
}
.hero__actions { display: flex; gap: 14px; margin-bottom: 30px; }
.hero__actions .btn--primary { padding: 0 30px; }
.hero__actions .btn--outline { padding: 0 34px; }

.hero__badges {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  column-gap: 22px;
}
.hero__badges li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--navy-2);
}
.hero__badges svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }

.partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
  padding: 10px 20px 10px 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
  box-shadow: 0 10px 26px rgba(28, 39, 90, .08);
}
.partner-badge img { width: auto; height: 46px; }
.partner-badge span { display: flex; flex-direction: column; padding-left: 16px; border-left: 1px solid var(--bd-e6e4f5); }
.partner-badge b { font-size: 13.5px; font-weight: 700; color: var(--navy); }
.partner-badge small { font-size: 11.5px; color: var(--muted); }
.footer__partner {
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--surface);
}
.footer__partner img { width: auto; height: 42px; }

.hero__visual { position: relative;  }

.doodle {
  position: absolute;
  font-family: var(--hand);
  font-weight: 500;
  color: var(--tx-4a5372);
  line-height: 1.1;
  pointer-events: none;
}
/* ---------- Showcase (hero visual) ---------- */
.showcase {
  position: relative;
  height: 500px;
  perspective: 1600px;
}
.showcase__glow {
  position: absolute;
  inset: 4% 2% 2% 6%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side at 50% 55%, rgba(146, 124, 255, .26), transparent 75%),
    radial-gradient(closest-side at 85% 20%, rgba(120, 160, 255, .18), transparent 70%);
  filter: blur(8px);
}
.showcase__dots {
  position: absolute;
  left: 6%;
  top: 8%;
  width: 110px;
  height: 56px;
  background-image: radial-gradient(var(--bg-b3aaf0) 1.4px, transparent 1.7px);
  background-size: 14px 14px;
  opacity: .8;
}
.win {
  position: absolute;
  left: 27%;
  top: 5%;
  width: 45%;
  height: 84%;
  background: var(--surface);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 24px 50px rgba(60, 50, 140, .14), 0 2px 6px rgba(30, 40, 90, .06);
  transition:
    transform 1.1s cubic-bezier(.65, 0, .25, 1),
    box-shadow 1.1s ease,
    filter 1.1s ease,
    opacity .8s ease;
  will-change: transform;
}
.win.is-center {
  z-index: 3;
  cursor: default;
  transform: none;
  box-shadow: 0 40px 80px rgba(60, 50, 140, .2), 0 2px 8px rgba(30, 40, 90, .06);
}
.win.is-left {
  z-index: 1;
  transform: translate(-66%, 8%) scale(.74) rotateY(26deg);
  filter: saturate(.9) brightness(.98);
}
.win.is-right {
  z-index: 2;
  transform: translate(71%, -5%) scale(.78) rotateY(-26deg);
  filter: saturate(.9) brightness(.98);
}
.win.is-back {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate(0, 4%) scale(.6);
}
.win:not(.is-center):not(.is-left):not(.is-right) { opacity: 0; pointer-events: none; }
.win__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  padding: 0 24px;
}
.win__bar img { height: 24px; width: auto; }
.win__tools { display: flex; gap: 10px; }
.win__tools i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--bd-cfcbdc);
}

/* Apps window */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 22px;
  padding: 18px 26px 26px;
}
.apps-grid span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tx-4b4f5c);
}
.apps-grid b {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 6px 16px rgba(60, 50, 140, .12), 0 0 0 1px rgba(60, 50, 140, .04);
  transition: transform .25s ease;
}
.win.is-center .apps-grid span:hover b { transform: translateY(-4px); }
.apps-grid img { width: 34px; height: 34px; }

/* Sales list window */
.win--list .win__bar { border-bottom: 1px solid var(--bd-eef0f6); }
.win-list { display: flex; height: calc(100% - 58px); }
.win-list__side {
  width: 37%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 8px;
  background: linear-gradient(180deg, #243056 0%, #1b2442 100%);
}
.win-list__side span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 7px;
  font-size: 11px;
  color: rgba(255, 255, 255, .72);
  white-space: nowrap;
}
.win-list__side i { width: 10px; height: 10px; border-radius: 3px; background: rgba(255, 255, 255, .35); flex: none; }
.win-list__side .is-on { background: #3b6fe0; color: #fff; }
.win-list__side .is-on i { background: var(--surface); }
.win-list__main { flex: 1; min-width: 0; padding: 12px 12px 0; }
.win-list__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.win-list__head b { font-size: 12px; font-weight: 700; color: var(--navy); }
.win-list__head span {
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 700;
  color: #fff;
  background: #714b67;
}
.win-list__search {
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 9.5px;
  color: var(--tx-a3a8bd);
  background: var(--bg-f5f6fa);
  border: 1px solid var(--bd-e6e8f0);
  margin-bottom: 4px;
}
.win-list__main p {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 0;
  border-bottom: 1px solid var(--bd-f0f1f6);
}
.win-list__main p > span { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.win-list__main p b { font-size: 10.5px; font-weight: 700; color: var(--navy); }
.win-list__main p em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--navy); }
.win-list__main p small {
  font-size: 9.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.win-list__main p i {
  flex: none;
  padding: 1px 6px;
  border-radius: 9px;
  font-style: normal;
  font-size: 8.5px;
  font-weight: 700;
}
.win-list__main .is-done { color: var(--tx-15803d); background: var(--bg-dcfce7); }
.win-list__main .is-order { color: var(--tx-1d4ed8); background: var(--bg-dbeafe); }
.win-list__main .is-quote { color: var(--tx-b45309); background: var(--bg-fef3c7); }

/* Inventory dashboard window */
.win--stock .win__bar,
.win--acc .win__bar { border-bottom: 1px solid var(--bd-eef0f6); }
.dash { padding: 12px 16px 0; }
.dash__head, .acc__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.dash__head b, .acc__head b { font-size: 12px; font-weight: 700; color: var(--navy); }
.dash__head span, .acc__head span { font-size: 9.5px; color: var(--muted); }
.dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.dash__kpis span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 8px;
  border-radius: 7px;
  background: var(--bg-f6f7fb);
  border: 1px solid var(--bd-eceef5);
}
.dash__kpis small { font-size: 8.5px; color: var(--muted); }
.dash__kpis b { font-size: 13px; font-weight: 800; color: var(--navy); }
.dash__kpis b.is-warn { color: var(--tx-d97706); }
.dash__chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 92px;
  padding: 0 4px;
  border-bottom: 1px solid var(--bd-eceef5);
}
.dash__chart i {
  flex: 1;
  height: var(--h);
  border-radius: 4px 4px 0 0;
  background: var(--bg-dcd8fb);
}
.dash__chart i.is-now { background: linear-gradient(180deg, #6d5dfc, #4f63f0); }
.dash__months { display: flex; gap: 8px; padding: 4px 4px 0; margin-bottom: 10px; }
.dash__months span { flex: 1; font-size: 8px; text-align: center; color: var(--muted); }
.dash__list li {
  display: grid;
  grid-template-columns: 1fr 58px 26px;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--bd-f0f1f6);
  font-size: 9.5px;
  color: var(--navy);
}
.dash__list li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash__list li i {
  position: relative;
  height: 5px;
  border-radius: 3px;
  background: var(--bg-eceef5);
  overflow: hidden;
}
.dash__list li i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: inherit;
  background: #22c55e;
}
.dash__list li i.is-low::after { background: #f59e0b; }
.dash__list li em { font-style: normal; font-weight: 700; text-align: right; }

/* Accounting window */
.acc { padding: 12px 14px 0; }
.acc__card {
  position: relative;
  padding: 11px 13px 44px;
  margin-bottom: 12px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #6d5dfc 0%, #4f63f0 60%, #4f8df7 100%);
  overflow: hidden;
}
.acc__card small { display: block; font-size: 9px; opacity: .85; }
.acc__card b { display: block; font-size: 19px; font-weight: 800; margin: 2px 0 1px; }
.acc__card em { font-style: normal; font-size: 9px; font-weight: 700; color: #bbf7d0; }
.acc__card svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 40px; }
.acc p {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--bd-f0f1f6);
}
.acc p > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acc p > span + span { align-items: flex-end; flex: none; }
.acc p b { font-size: 10px; font-weight: 700; color: var(--navy); }
.acc p small { font-size: 9px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc p em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--navy); }
.acc p i { padding: 1px 6px; border-radius: 9px; font-style: normal; font-size: 8.5px; font-weight: 700; }
.acc .is-paid { color: var(--tx-15803d); background: var(--bg-dcfce7); }
.acc .is-due { color: var(--tx-b45309); background: var(--bg-fef3c7); }

/* POS window */
.win--pos .win__bar { border-bottom: 1px solid var(--bd-eef0f6); }
.pos { padding: 10px 12px 0; }
.pos__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.pos__head b { font-size: 12px; font-weight: 700; color: var(--navy); }
.pos__head span { font-size: 9.5px; color: var(--muted); }
.pos__cats { display: flex; gap: 5px; margin-bottom: 9px; }
.pos__cats span {
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg-f3f4f8);
}
.pos__cats .is-on { color: #fff; background: #714b67; }
.pos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 9px; }
.pos__item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 5px 6px;
  border-radius: 8px;
  border: 1px solid var(--bd-eceef5);
  background: var(--surface);
}
.pos__item i {
  position: relative;
  display: grid;
  place-items: center;
  height: 40px;
  margin-bottom: 4px;
  border-radius: 6px;
}
.pos__item svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pos__item u {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 8.5px;
  font-weight: 800;
  text-decoration: none;
  color: #fff;
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--surface);
}
.pos__item b { font-size: 9px; font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos__item em { font-style: normal; font-size: 9px; font-weight: 600; color: var(--muted); }
.t-tea { background: var(--bg-fdf0dc); color: var(--tx-b45309); }
.t-coffee { background: var(--bg-efe6dd); color: var(--tx-7c4a2d); }
.t-cake { background: var(--bg-fbe4ec); color: var(--tx-be185d); }
.t-juice { background: var(--bg-e3f7df); color: var(--tx-15803d); }
.t-sand { background: var(--bg-fff4d6); color: var(--tx-a16207); }
.t-bun { background: var(--bg-fde8d8); color: var(--tx-c2410c); }
.pos__order {
  padding: 7px 9px 8px;
  border-radius: 8px;
  background: var(--bg-f6f7fb);
  border: 1px solid var(--bd-eceef5);
}
.pos__order p { display: flex; justify-content: space-between; padding: 2px 0; font-size: 9.5px; color: var(--text); }
.pos__order p b { font-weight: 700; color: var(--navy); }
.pos__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--bd-d9dce8);
  font-size: 9.5px;
  color: var(--muted);
}
.pos__total b { margin-left: 4px; font-size: 12px; font-weight: 800; color: var(--navy); }
.pos__total i {
  padding: 5px 12px;
  border-radius: 6px;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #6d5dfc, #4f63f0);
}

/* Dashboard window (dark) */
.win--dash { background: #141c38; }
.win--dash .win__bar { background: var(--surface); border-bottom: 1px solid var(--bd-eef0f6); }
.sdash { padding: 12px 14px 0; color: #fff; }
.sdash__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.sdash__head b { font-size: 12px; font-weight: 700; }
.sdash__head span { font-size: 9px; color: var(--tx-9aa4c7); }
.sdash__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.sdash__kpis span {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 9px;
  border-radius: 8px;
  background: #1e2850;
  border: 1px solid #28336a;
}
.sdash__kpis small { font-size: 8.5px; color: var(--tx-9aa4c7); }
.sdash__kpis b { font-size: 13px; font-weight: 800; }
.sdash__kpis em { font-style: normal; font-size: 8.5px; font-weight: 700; color: var(--tx-34d399); }
.sdash__kpis em.is-down { color: var(--tx-f87171); }
.sdash__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: #1e2850;
  border: 1px solid #28336a;
}
.sdash__donut { position: relative; width: 64px; height: 64px; flex: none; }
.sdash__donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sdash__donut b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.sdash__legend { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.sdash__legend li { display: flex; align-items: center; gap: 6px; font-size: 9.5px; color: #c7cde4; }
.sdash__legend i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.sdash__legend b { margin-left: auto; font-weight: 700; color: #fff; }
.sdash__chart {
  padding: 8px 10px 6px;
  border-radius: 8px;
  background: #1e2850;
  border: 1px solid #28336a;
}
.sdash__chart small { display: block; font-size: 8.5px; color: var(--tx-9aa4c7); margin-bottom: 4px; }
.sdash__chart svg { display: block; width: 100%; height: 52px; }

/* Kanban window (dark bezel) */
.win--board {
  padding: 10px;
  border-radius: 18px;
  background: linear-gradient(160deg, #3a3f4d 0%, #23262f 100%);
}
.win__screen { height: 100%; border-radius: 9px; background: var(--surface); overflow: hidden; }
.win__bar--sm { height: 46px; padding: 0 16px; border-bottom: 1px solid var(--bd-eef0f6); }
.win__bar--sm img { height: 20px; }
.win__bar--sm .win__tools i { width: 13px; height: 13px; border-width: 1.5px; }
.win__title { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 14px 0; }
.win__title b { font-size: 12px; font-weight: 700; color: var(--navy); }
.win__title span { font-size: 10px; font-weight: 700; color: var(--tx-16a34a); }
.kanban { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 8px 12px 14px; }
.kanban__col { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.kanban__col header { display: flex; align-items: center; justify-content: space-between; }
.kanban__col header b { font-size: 11px; font-weight: 700; color: var(--navy); }
.kanban__col header span {
  min-width: 16px;
  padding: 0 5px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  color: var(--muted);
  background: var(--bg-eef0f6);
}
.kanban__bar { display: flex; height: 4px; gap: 2px; border-radius: 2px; overflow: hidden; margin-bottom: 1px; }
.kanban__bar u { background: #22c55e; }
.kanban__bar s { background: #f59e0b; }
.kanban__bar em { background: var(--bg-e5e7ef); }
.kcard {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 8px 7px;
  border-radius: 7px;
  background: var(--surface);
  border: 1px solid var(--bd-eceef5);
  border-left: 3px solid #f59e0b;
  box-shadow: 0 2px 6px rgba(30, 40, 90, .05);
}
.kcard.is-won { border-left-color: #22c55e; }
.kcard img { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.kcard div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kcard b { font-size: 10px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.kcard small {
  font-size: 9px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kcard em { font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--tx-5b50ec); margin-top: 2px; }

.stat {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 190px;
  padding: 16px 22px;
  border-radius: 16px;
  background: rgba(var(--surface-rgb), .96);
  box-shadow: 0 20px 44px rgba(50, 40, 130, .16);
  animation: float 6s ease-in-out infinite;
}
.stat small { font-size: 13px; font-weight: 700; color: var(--navy); }
.stat strong { font-size: 19px; font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.stat em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--tx-16a34a); }
.stat em.is-muted { font-weight: 500; color: var(--muted); }
.stat--sales { left: 0; bottom: 9%; animation-delay: -2s; }
.stat--inv { right: 2%; bottom: 13%; min-width: 180px; padding: 18px 24px; }
.stat--inv small { font-size: 15px; }
.stat--inv strong { font-size: 28px; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .stat, .pstatus, .step.is-active .step__ico::after { animation: none; }
  .process__photos img { transform: none; transition-duration: .01s; }
  .sflow__arrow::before { display: none; }
  .win { transition-duration: .01s; }
}

/* ================= TRUSTED ================= */
.trusted { padding: 26px 0 30px; background: var(--surface); }
.trusted__label {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--tx-4b3f78);
  margin-bottom: 20px;
}
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex;
  align-items: center;
  flex: none;
}
.marquee__group li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: 0 38px;
}
.marquee__group img {
  width: auto;
  height: 54px;
  max-width: 160px;
  object-fit: contain;
  transition: transform .25s ease;
}
.marquee__group img.is-tall { height: 66px; }
.marquee__group img.is-wide { height: 30px; max-width: 170px; }
.marquee__group img.is-small { height: 44px; }
.marquee__group img.is-leema { height: 66px; max-width: 220px; }
.marquee__group li:hover img { transform: scale(1.08); }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation-duration: 120s; }
}

/* ================= CHALLENGE ================= */
.challenge { padding: 44px 0 50px; background: var(--bg-soft); }
.challenge__grid {
  display: grid;
  grid-template-columns: 1fr 700px;
  gap: 40px;
  align-items: center;
}
.challenge__content { padding-left: 4px; }
.challenge .h2 { margin-bottom: 16px; }
.challenge .lead { max-width: 440px; margin-bottom: 28px; }
.challenge__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pcard {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px 18px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pcard__ico {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  margin-bottom: 16px;
}
.pcard__ico svg { width: 28px; height: 28px; }
.pcard__ico--blue { background: var(--bg-e4ecff); }
.pcard__ico--purple { background: var(--bg-f1e6ff); }
.pcard h3 { font-size: 14.5px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.pcard p { font-size: 12.5px; line-height: 1.55; color: var(--text); }

/* ================= SOLUTION ================= */
.solution { padding: 30px 0 34px; background: var(--surface); overflow: hidden; }
.solution__grid {
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: 0;
  align-items: center;
}
.solution .h2 { margin-bottom: 16px; }
.solution .lead { max-width: 450px; margin-bottom: 28px; font-size: 14.5px; }
.sflow {
  display: grid;
  grid-template-columns: 1fr 26px 1.12fr 26px 1fr;
  align-items: center;
  max-width: 470px;
  margin: 0 0 30px;
  padding-top: 12px;
}
.sflow__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 84px;
  padding: 0 8px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--bd-e9e8f6);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.sflow__card b {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.3;
}
.sflow__card--main {
  height: 96px;
  border-color: var(--bd-dcd8fb);
  box-shadow: 0 14px 30px rgba(91, 80, 236, .16);
}
.sflow__card--main img { height: 24px; width: auto; }
.sflow__card--main b { color: var(--tx-5b50ec); }
.sflow__pill {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--bg-efedfd);
  border: 1px solid var(--bd-dcd8fb);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tx-6b5ce7);
  white-space: nowrap;
}
.sflow__pill::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6b5ce7;
}
.sflow__icons { display: flex; gap: 5px; }
.sflow__icons i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--bg-e4ecff);
  color: var(--tx-3d6cf0);
}
.sflow__icons i:nth-child(even) { background: var(--bg-f1e6ff); color: var(--tx-9b4de0); }
.sflow__icons svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sflow__arrow {
  position: relative;
  height: 1px;
  margin: 0 4px;
  background: var(--bg-d6d2f7);
}
.sflow__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--bd-b9b1fa);
  border-right: 1px solid var(--bd-b9b1fa);
  transform: rotate(45deg);
}
.sflow__arrow::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5b50ec;
  animation: sflow-dot 2.4s ease-in-out infinite;
}
.sflow__arrow + .sflow__card + .sflow__arrow::before { animation-delay: 1.2s; }
@keyframes sflow-dot {
  0% { left: 0; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { left: calc(100% - 5px); opacity: 0; }
}
.solution__visual {
  position: relative;
  margin-right: -48px;
}
.scene {
  position: relative;
  aspect-ratio: 1380 / 720;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0, #000 8%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0, #000 8%, #000 90%, transparent 100%);
  mask-composite: intersect;
}
.scene__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scene__screen {
  position: absolute;
  left: 0;
  top: 0;
  width: 800px;
  height: 500px;
  transform-origin: 0 0;
  visibility: hidden;
}
.scene__screen.is-ready { visibility: visible; }
.odoo-home {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-f8f6fb) 100%);
  overflow: hidden;
}
.odoo-home::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(var(--surface-rgb), 0) 55%, rgba(255, 255, 255, .35) 75%, rgba(var(--surface-rgb), 0) 90%);
  pointer-events: none;
}
.odoo-home__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 0 26px;
  border-bottom: 1px solid var(--bd-efedf4);
}
.odoo-home__bar img { height: 24px; width: auto; }
.odoo-home__tools { display: flex; gap: 14px; }
.odoo-home__tools i { width: 14px; height: 14px; border-radius: 50%; background: var(--bg-dcd8e6); }
.odoo-home__apps {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-content: center;
  row-gap: 30px;
  padding: 0 60px 10px;
}
.odoo-home__apps span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--tx-4b4f5c);
  white-space: nowrap;
}
.odoo-home__apps img {
  width: 74px;
  height: 74px;
  padding: 14px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 4px 12px rgba(40, 30, 70, .12), 0 0 0 1px rgba(40, 30, 70, .04);
}
.doodle--sol {
  right: 9%;
  top: 11%;
  font-size: 20px;
  font-weight: 600;
  color: var(--tx-2f3654);
  text-shadow: 0 0 6px var(--surface), 0 0 12px var(--surface), 0 0 18px rgba(255, 255, 255, .9);
  z-index: 2;
}
.doodle--sol svg {
  display: block;
  width: 14px;
  height: 24px;
  margin: 4px 0 0 4px;
}
.checklist {
  position: absolute;
  right: 3%;
  top: 36%;
  z-index: 3;
  width: 262px;
  padding: 18px 24px;
  background: rgba(var(--surface-rgb), .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(30, 40, 100, .14);
}
.checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  padding: 7px 0;
}
.checklist svg { width: 22px; height: 22px; flex: none; }

/* ================= MODULES ================= */
.modules { padding: 50px 0 56px; background: var(--bg-soft); }
.modules__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px 27px;
}
.mcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 108px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 4px 22px rgba(28, 39, 90, .07);
  transition: transform .25s ease, box-shadow .25s ease;
}
.mcard:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(28, 39, 90, .12); }
.mcard img { width: 44px; height: 44px; transition: transform .25s ease; }
.mcard:hover img { transform: scale(1.1); }
.mcard span { font-size: 13px; font-weight: 600; color: var(--navy); }

/* ================= PLATFORM (orbit) ================= */
.platform {
  position: relative;
  padding: 54px 0 60px;
  background:
    radial-gradient(circle at 50% 58%, rgba(128, 108, 255, .1), transparent 42%),
    var(--surface);
  overflow: hidden;
}
.platform__head { max-width: 800px; margin: 0 auto; text-align: center; }
.platform__head .sub { font-size: 14.5px; margin-top: 14px; }
.orbit {
  --r1: 178px;
  --r2: 292px;
  --spin: 140s;
  position: relative;
  width: 680px;
  height: 680px;
  margin: 6px auto 0;
}
.orbit__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1.5px dashed var(--bd-d6d1f8);
  transform: translate(-50%, -50%);
}
.orbit__ring--inner { width: calc(var(--r1) * 2); height: calc(var(--r1) * 2); }
.orbit__ring--outer { width: calc(var(--r2) * 2); height: calc(var(--r2) * 2); border-color: var(--bd-e2def9); }
.orbit__track { position: absolute; inset: 0; animation: orbit-spin var(--spin) linear infinite; }
.orbit__track--inner { animation-direction: reverse; }
.orb {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: rotate(var(--a)) translateX(var(--r2)) rotate(calc(-1 * var(--a)));
}
.orbit__track--inner .orb { transform: rotate(var(--a)) translateX(var(--r1)) rotate(calc(-1 * var(--a))); }
.orb__in { position: absolute; left: 0; top: 0; animation: orbit-spin var(--spin) linear infinite reverse; }
.orbit__track--inner .orb__in { animation-direction: normal; }
.orb__box {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 92px;
  transform: translate(-50%, -28px);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: var(--navy);
}
.orb__box img {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 6px 10px rgba(40, 30, 110, .12));
  transition: transform .25s ease;
}
.orb__box:hover img { transform: scale(1.15); }
.orbit:hover .orbit__track,
.orbit:hover .orb__in { animation-play-state: paused; }
.orbit__core {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: var(--surface);
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 14px rgba(109, 93, 252, .07),
    0 0 0 30px rgba(109, 93, 252, .04),
    0 24px 50px rgba(91, 80, 236, .18);
}
.orbit__core::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px solid rgba(109, 93, 252, .25);
  animation: core-pulse 3s ease-out infinite;
}
.orbit__core img { height: 34px; width: auto; }
.orbit__core b { font-size: 13px; font-weight: 700; color: var(--primary-text); }
.platform__actions { display: flex; justify-content: center; gap: 14px; margin-top: 8px; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes core-pulse {
  0% { transform: scale(.92); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit__track, .orb__in, .orbit__core::after { animation: none; }
}

/* ================= WHY CODEBRAZE ================= */
.why { padding: 50px 0 60px; background: var(--bg-soft); }
.why__grid {
  display: grid;
  grid-template-columns: 1fr 640px;
  gap: 56px;
  align-items: center;
}
.why .h2 { margin-bottom: 16px; }
.why .lead { max-width: 420px; }
.why__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wcard {
  position: relative;
  padding: 18px 20px 20px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.wcard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #6d5dfc, #4f8df7);
  opacity: 0;
  transition: opacity .25s ease;
}
.wcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--bd-dcd8fb); }
.wcard:hover::before { opacity: 1; }
.wcard__ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  margin-bottom: 14px;
  background: var(--bg-e4ecff);
  color: var(--tx-3d6cf0);
  transition: background .25s ease, color .25s ease;
}
.wcard--purple .wcard__ico { background: var(--bg-f1e6ff); color: var(--tx-9b4de0); }
.wcard:hover .wcard__ico { background: linear-gradient(135deg, #6d5dfc, #4f63f0); color: #fff; }
.wcard__ico svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wcard h3 { font-size: 14.5px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.wcard p { font-size: 12.5px; line-height: 1.6; color: var(--text); }

/* ================= SERVICES ================= */
.services { padding: 54px 0 64px; background: var(--surface); }
.services__head { max-width: 720px; margin: 0 auto 34px; text-align: center; }
.services__head .sub { font-size: 14.5px; margin-top: 14px; }
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.scard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.scard::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #6d5dfc, #4f8df7);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.scard:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--bd-dcd8fb); }
.scard:hover::after { transform: scaleX(1); }
.scard__ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  margin-bottom: 16px;
  background: var(--bg-e4ecff);
  color: var(--tx-3d6cf0);
  transition: background .25s ease, color .25s ease;
}
.scard--purple .scard__ico { background: var(--bg-f1e6ff); color: var(--tx-9b4de0); }
.scard:hover .scard__ico { background: linear-gradient(135deg, #6d5dfc, #4f63f0); color: #fff; }
.scard__ico svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.scard h3 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 7px; }
.scard p { flex: 1; font-size: 13px; line-height: 1.6; color: var(--text); margin-bottom: 16px; }
.scard .link-arrow { font-size: 13px; }

/* ================= PROCESS ================= */
.process {
  position: relative;
  padding: 56px 0 60px;
  background: linear-gradient(180deg, var(--bg-f6f7fc) 0%, var(--bg-f2f1fb) 100%);
  overflow: hidden;
}
.process__blob {
  position: absolute;
  right: -140px;
  top: -120px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(128, 108, 255, .16), transparent 70%);
  pointer-events: none;
}
.process__grid {
  position: relative;
  display: grid;
  grid-template-columns: 530px 1fr;
  gap: 70px;
  align-items: center;
}
.process__media { position: relative; }
.process__frame {
  position: absolute;
  inset: 18px -18px -18px 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, #6d5dfc 0%, #4f8df7 100%);
  opacity: .9;
}
.process__dots {
  position: absolute;
  left: -26px;
  top: -26px;
  width: 110px;
  height: 90px;
  background-image: radial-gradient(var(--bg-b3aaf0) 1.5px, transparent 1.8px);
  background-size: 14px 14px;
}
.process__photos {
  position: relative;
  height: 340px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-e9e8f6);
  box-shadow: 0 24px 50px rgba(30, 30, 90, .18);
}
.process__photos img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 30%;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .7s ease, transform 3.6s ease-out;
}
.process__photos img.is-active { opacity: 1; transform: scale(1); }
.pstatus {
  position: absolute;
  left: -28px;
  bottom: -22px;
  z-index: 2;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  column-gap: 12px;
  row-gap: 10px;
  width: 240px;
  padding: 14px 18px 16px;
  border-radius: 16px;
  background: rgba(var(--surface-rgb), .96);
  box-shadow: 0 18px 40px rgba(40, 30, 110, .18);
  animation: float 6s ease-in-out infinite;
}
.pstatus__ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #6d5dfc, #4f63f0);
}
.pstatus__ico .step__ico { all: unset; display: contents; }
.pstatus__ico svg { width: 22px; height: 22px; }
.pstatus__text small { display: block; font-size: 11px; color: var(--muted); line-height: 1.3; }
.pstatus__text em { font-style: normal; font-weight: 700; color: var(--primary-text); }
.pstatus__text b { font-size: 15px; font-weight: 700; color: var(--navy); }
.pstatus__bar {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 6px;
  background: var(--bg-ecebf8);
  overflow: hidden;
}
.pstatus__bar i {
  display: block;
  height: 100%;
  width: 16.66%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6d5dfc, #4f8df7);
  transition: width .6s ease;
}

.process .h2 { font-size: 31px; }
.steps {
  --p: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-top: 28px;
}
.steps::before,
.steps::after {
  content: "";
  position: absolute;
  top: 26px;
  left: calc(100% / 12);
  height: 3px;
  border-radius: 3px;
}
.steps::before { right: calc(100% / 12); background: var(--bg-dfdff0); }
.steps::after {
  width: calc((100% - 100% / 6) * var(--p));
  background: linear-gradient(90deg, #6d5dfc, #4f8df7);
  transition: width .6s ease;
}
.step { position: relative; z-index: 1; }
.step__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  font: inherit;
}
.step__ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin-bottom: 10px;
  background: var(--surface);
  border: 2px solid var(--bd-e2e0f7);
  color: var(--tx-8a80e8);
  transition: transform .35s ease, background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.step__ico svg { width: 24px; height: 24px; }
.step small { font-size: 11px; color: var(--muted); line-height: 1.3; }
.step b { padding: 0 4px; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--navy); transition: color .3s ease; }
.step:hover .step__ico { transform: translateY(-3px); border-color: var(--bd-b9b1fa); }
.step.is-done .step__ico { background: var(--bg-ecebfd); border-color: var(--bd-cfc9fb); color: var(--tx-6b5ce7); }
.step.is-active .step__ico {
  background: linear-gradient(135deg, #6d5dfc, #4f63f0);
  border-color: transparent;
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 10px 24px rgba(91, 80, 236, .35);
}
.step.is-active .step__ico::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid rgba(109, 93, 252, .35);
  animation: pulse 1.8s ease-out infinite;
}
.step.is-active b { color: var(--primary-text); }
@keyframes pulse {
  0% { transform: scale(.85); opacity: 1; }
  100% { transform: scale(1.25); opacity: 0; }
}

.step-detail {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 26px;
  padding: 18px 22px;
  border-radius: 14px;
  background: var(--surface);
  border-left: 4px solid #6d5dfc;
  box-shadow: 0 10px 30px rgba(28, 39, 90, .07);
  transition: opacity .3s ease, transform .3s ease;
}
.step-detail.is-changing { opacity: 0; transform: translateY(6px); }
.step-detail__num {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #6d5dfc, #4f8df7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.step-detail b { display: block; font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.step-detail p { font-size: 13px; line-height: 1.6; color: var(--text); }
.process__more { margin-top: 20px; }

/* ================= VIDEO ================= */
.showreel {
  position: relative;
  padding: 64px 0;
  overflow: hidden;
  background:
    radial-gradient(600px 380px at 85% 20%, rgba(109, 93, 252, .35), transparent 70%),
    radial-gradient(520px 360px at 10% 100%, rgba(79, 141, 247, .22), transparent 70%),
    var(--navy-bg);
}
.showreel__grid {
  display: grid;
  grid-template-columns: 1fr 640px;
  gap: 60px;
  align-items: center;
}
.showreel .eyebrow { color: #b3a9ff; border-color: rgba(179, 169, 255, .45); }
.showreel .h2 { color: #fff; }
.showreel .grad-text { background-image: linear-gradient(90deg, #7fa6ff 0%, #a898ff 60%, var(--bg-c9a2ff) 100%); }
.showreel .sub { color: rgba(226, 230, 255, .75); max-width: 440px; }
.showreel__list { margin: 22px 0 28px; display: grid; gap: 12px; }
.showreel__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #e6e9ff;
}
.showreel__list .ico { width: 20px; height: 20px; flex: none; }

.showreel__media { position: relative; }
.showreel__glow {
  position: absolute;
  inset: 8% -4% -8% 8%;
  border-radius: 24px;
  background: linear-gradient(135deg, #6d5dfc, #4f8df7);
  filter: blur(40px);
  opacity: .45;
}
.player {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 30px 70px rgba(5, 10, 40, .55);
}
.player__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  background: var(--bg-f3f4fa);
  border-bottom: 1px solid var(--bd-e6e8f2);
}
.player__bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff6b6b; }
.player__bar i:nth-child(2) { background: #ffc24b; }
.player__bar i:nth-child(3) { background: #3ecf8e; }
.player__bar span { margin-left: 10px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.player__screen { position: relative; aspect-ratio: 16 / 9; background: #0b1230; }
.player__screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.player__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 0;
  cursor: pointer;
  font: inherit;
  background: linear-gradient(180deg, rgba(15, 26, 60, .28), rgba(15, 26, 60, .6));
  transition: opacity .35s ease, visibility .35s ease;
}
.player__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #6d5dfc, #4f63f0);
  box-shadow: 0 14px 34px rgba(91, 80, 236, .55);
  transition: transform .3s ease;
}
.player__btn svg { width: 30px; height: 30px; margin-left: 4px; }
.player__btn::before,
.player__btn::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .55);
  animation: play-ring 2.2s ease-out infinite;
}
.player__btn::after { animation-delay: 1.1s; }
@keyframes play-ring {
  0% { transform: scale(.85); opacity: 1; }
  100% { transform: scale(1.45); opacity: 0; }
}
.player__label {
  display: flex;
  flex-direction: column;
  padding: 9px 16px;
  border-radius: 12px;
  text-align: left;
  color: #fff;
  background: rgba(15, 26, 60, .78);
  box-shadow: 0 10px 24px rgba(5, 10, 40, .3);
}
.player__label b { font-size: 17px; font-weight: 700; }
.player__label small { font-size: 12.5px; opacity: .85; }
.player__play:hover .player__btn { transform: scale(1.08); }
.player.is-playing .player__play { opacity: 0; visibility: hidden; }
.player__sound {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px 0 12px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background: rgba(15, 26, 60, .78);
  box-shadow: 0 8px 20px rgba(5, 10, 40, .3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .3s ease, visibility .3s ease, transform .3s ease, background .2s ease;
}
.player__sound svg { width: 18px; height: 18px; }
.player__sound:hover { background: linear-gradient(135deg, #6d5dfc, #4f63f0); }
.player.is-muted .player__sound { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .player__btn::before, .player__btn::after { animation: none; opacity: 0; }
}

/* ================= SAVINGS CALCULATOR ================= */
.savings { padding: 58px 0 60px; background: var(--surface); }
.savings__head { max-width: 720px; margin: 0 auto 34px; text-align: center; }
.savings__head .sub { max-width: 580px; margin: 12px auto 0; font-size: 14.5px; }
.hand-mark {
  position: relative;
  display: inline-block;
  padding: 0 10px;
  font-family: var(--hand);
  font-size: 1.35em;
  font-weight: 600;
  line-height: 1;
  color: var(--primary-text);
  letter-spacing: 0;
  z-index: 0;
}
.hand-mark::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .08em;
  height: .42em;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-e4ecff), var(--bg-ece4ff));
  transform: rotate(-1.5deg);
  z-index: -1;
}

.savings__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
.savings__panel {
  padding: 26px 26px 24px;
  border-radius: 20px;
  background: var(--bg-soft);
  border: 1px solid var(--bd-eceef6);
}
.savings__panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 18px;
}
.savings__panel-head h3 { font-size: 17px; font-weight: 700; color: var(--navy); }
.savings__hint { font-size: 12px; color: var(--muted); }

.savings__apps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.svapp {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--navy);
}
.svapp__logo {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  max-width: 84px;
  padding: 18px;
  border-radius: 14px;
  background: var(--surface);
  border: 1.5px solid var(--bd-eceef6);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.svapp__logo img { width: 100%; height: 100%; object-fit: contain; }
.svapp__name { font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--text); text-align: center; }
.svapp:hover .svapp__logo { transform: translateY(-3px); border-color: var(--bd-dcd8fb); box-shadow: 0 10px 22px rgba(40, 30, 110, .1); }
.svapp:focus-visible { outline: none; }
.svapp:focus-visible .svapp__logo { outline: 2px solid var(--primary); outline-offset: 2px; }
.svapp__check {
  position: absolute;
  top: -6px;
  right: calc(50% - 48px);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6d5dfc, #4f63f0);
  color: #fff;
  box-shadow: 0 4px 10px rgba(91, 80, 236, .35);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .2s ease, transform .2s ease;
}
.svapp__check svg { width: 12px; height: 12px; }
.svapp.is-on .svapp__logo { border-color: var(--primary); box-shadow: 0 8px 20px rgba(91, 80, 236, .18); }
.svapp.is-on .svapp__name { color: var(--navy); font-weight: 700; }
.svapp.is-on .svapp__check { opacity: 1; transform: none; }

.savings__users {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--bd-e3e5f0);
}
.savings__users label { font-size: 17px; font-weight: 700; color: var(--navy); }
.stepper {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: var(--surface);
  border: 1.5px solid var(--bd-dcd8fb);
}
.stepper button {
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  font-size: 20px;
  font-weight: 600;
  color: var(--primary-text);
  transition: background .2s ease;
}
.stepper button:hover { background: var(--bg-f1efff); }
.stepper input {
  width: 72px;
  height: 44px;
  border: 0;
  border-left: 1px solid var(--bd-eceef6);
  border-right: 1px solid var(--bd-eceef6);
  font: 700 17px/1 var(--font);
  color: var(--navy);
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper input:focus { outline: none; background: var(--bg-faf9ff); }
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.savings__summary { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 96px; }
.svcard {
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
  box-shadow: var(--shadow);
}
.svcard__title { font-size: 14px; font-weight: 600; color: var(--navy); }
.svcard__title b { color: var(--primary-text); }
.svcard__title span { font-weight: 500; color: var(--muted); }
.svcard__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 232px;
  margin: 14px 0 0;
  overflow-y: auto;
  padding-right: 4px;
}
.svcard__list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--text);
}
.svcard__list li span:last-child { font-weight: 600; color: var(--navy); text-align: right; }
.svcard__list .is-empty { justify-content: center; color: var(--muted); font-style: italic; }
.svcard__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--bd-dfe2ee);
}
.svcard__total > span { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.svcard__total b { font-size: 20px; font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.svcard__total small, .svsave small { font-size: 12px; font-weight: 500; color: var(--muted); }
.svcard--odoo .svcard__total { margin-top: 10px; padding-top: 10px; }
.svcard--odoo .svcard__total b { color: var(--primary-text); }

.svsave {
  position: relative;
  overflow: hidden;
  padding: 22px 22px 20px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #6d5dfc 0%, #4f63f0 60%, #4f8df7 100%);
  box-shadow: 0 16px 34px rgba(79, 99, 240, .3);
}
.svsave::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  pointer-events: none;
}
.svsave__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.svsave strong { display: block; margin-top: 4px; font-size: 32px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.svsave small { color: rgba(255, 255, 255, .8); }
.svsave p { margin-top: 4px; font-size: 13px; color: rgba(255, 255, 255, .85); }
.svsave__btn {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  color: var(--primary-text);
  background: var(--surface);
  box-shadow: 0 8px 18px rgba(15, 26, 60, .18);
}
.svsave strong.is-bump { animation: sv-bump .35s ease; }
@keyframes sv-bump { 40% { transform: scale(1.05); } }
.savings__note { margin-top: 20px; font-size: 11.5px; color: var(--muted); text-align: center; }
.opsavings { padding: 64px 0 66px; border-top: 1px solid var(--bd-eef0f6); scroll-margin-top: 60px; }

.svteaser { padding: 56px 0; background: var(--surface); }
.svteaser__card {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: 28px 44px;
  padding: 38px 42px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--bg-f6f5ff) 0%, var(--bg-eef3ff) 100%);
  border: 1px solid var(--bd-e6e4fb);
}
.svteaser__text .sub { max-width: 540px; margin-top: 10px; font-size: 14.5px; }
.svteaser__side { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.svteaser__logos { display: flex; flex-wrap: wrap; gap: 10px; }
.svteaser__logos span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 12px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
  box-shadow: var(--shadow-sm);
}
.svteaser__logos img { width: 100%; height: 100%; object-fit: contain; }
.svteaser__logos .svteaser__more { padding: 0; font-size: 14px; font-weight: 700; color: var(--primary-text); }

/* ================= INDUSTRIES ================= */
.industries { padding: 54px 0 56px; background: var(--surface); }
.industries__head { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.industries__head .sub { font-size: 14.5px; margin-top: 14px; }
.industries__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.icard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 14px;
  border: 1px solid var(--bd-eceef6);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.icard:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(40, 30, 110, .13); border-color: var(--bd-dcd8fb); }
.icard__media { position: relative; display: block; height: 128px; overflow: hidden; }
.icard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(15, 26, 60, .35));
}
.icard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.icard:hover .icard__media img { transform: scale(1.07); }
.icard__ico {
  position: absolute;
  left: 16px;
  top: 106px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--tx-3d6cf0);
  box-shadow: 0 8px 18px rgba(40, 30, 110, .16);
  transition: background .25s ease, color .25s ease;
}
.icard--purple .icard__ico { color: var(--tx-9b4de0); }
.icard:hover .icard__ico { background: linear-gradient(135deg, #6d5dfc, #4f63f0); color: #fff; }
.icard__ico svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icard__body { padding: 30px 18px 20px; }
.icard h3 { font-size: 14.5px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.icard p { font-size: 12.5px; line-height: 1.55; color: var(--text); }
.industries__more { margin-top: 28px; text-align: center; }

/* ================= OUR WORK ================= */
.work { padding: 56px 0 60px; background: var(--bg-soft); }
.work__head { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.work__head .sub { max-width: 560px; margin-left: auto; margin-right: auto; }

.wfeat {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  overflow: hidden;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
  box-shadow: 0 18px 44px rgba(28, 39, 90, .09);
}
.wfeat__media { position: relative; min-height: 320px; overflow: hidden; }
.wfeat__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .35s ease, transform 6s ease-out;
}
.wfeat:hover .wfeat__media > img { transform: scale(1.04); }
.wfeat__logo {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  padding: 10px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(15, 26, 60, .22);
  transition: opacity .35s ease;
}
.wfeat__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.wfeat__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 34px 40px;
  transition: opacity .35s ease, transform .35s ease;
}
.wfeat.is-changing .wfeat__body { opacity: 0; transform: translateY(8px); }
.wfeat.is-changing .wfeat__media > img,
.wfeat.is-changing .wfeat__logo { opacity: 0; }
.wfeat__tag {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tx-6b5ce7);
  background: var(--bg-efedfd);
  border: 1px solid var(--bd-dcd8fb);
}
.wfeat h3 { margin-top: 14px; font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; color: var(--navy); }
.wfeat__loc { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.wfeat__loc .ico { width: 15px; height: 15px; color: var(--tx-6b5ce7); }
.wfeat p { margin-top: 14px; font-size: 14px; line-height: 1.65; color: var(--text); }
.wfeat__tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  width: 100%;
  margin: 18px 0 24px;
}
.wfeat__tags li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--navy); }
.wfeat__tags .ico {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  color: var(--tx-3d6cf0);
  background: var(--bg-e4ecff);
}

.work__thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * 16px) / 5);
  gap: 16px;
  margin-top: 18px;
  padding: 4px 2px 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.work__thumbs::-webkit-scrollbar { display: none; }
.wthumb {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border-radius: 14px;
  border: 1.5px solid var(--bd-eceef6);
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
  box-shadow: var(--shadow-sm, 0 6px 18px rgba(28, 39, 90, .06));
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.wthumb img { width: 100%; height: 92px; object-fit: cover; transition: filter .3s ease, transform .5s ease; }
.wthumb__body { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; }
.wthumb small { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-6b5ce7); }
.wthumb b { font-size: 13.5px; line-height: 1.3; font-weight: 700; color: var(--navy); }
.wthumb em { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-style: normal; font-size: 11.5px; color: var(--muted); }
.wthumb em .ico { width: 12px; height: 12px; flex: none; }
.wthumb:hover { transform: translateY(-4px); border-color: var(--bd-cfc9fb); }
.wthumb:hover img { transform: scale(1.05); }
.wthumb.is-active {
  border-color: #8f84f5;
  box-shadow: 0 14px 30px rgba(91, 80, 236, .18);
}
.wthumb:not(.is-active) img { filter: saturate(.85); }

.work__nav { display: flex; align-items: center; gap: 24px; margin-top: 8px; }
.work__progress { flex: 1; height: 3px; border-radius: 3px; background: var(--bg-e2e0f5); overflow: hidden; }
.work__progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6d5dfc, #4f8df7); }
.work__progress i.is-running { animation: work-progress var(--dur, 6s) linear forwards; }
@keyframes work-progress { from { width: 0; } to { width: 100%; } }
.work__dots { display: flex; gap: 6px; }
.work__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--bg-d6d2f2);
  cursor: pointer;
  transition: width .3s ease, background .3s ease;
}
.work__dots button.is-active { width: 24px; background: linear-gradient(90deg, #6d5dfc, #4f63f0); }

.work__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
  padding: 16px 16px 16px 26px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
}
.work__more p { font-size: 14px; font-weight: 500; color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .work__progress i.is-running { animation: none; width: 100%; }
}

/* ================= TESTIMONIALS ================= */
.quotes { padding: 8px 0 64px; background: var(--bg-soft); }
.quotes__head { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.quotes__head .sub { max-width: 520px; margin-left: auto; margin-right: auto; }
.quotes__viewport { overflow: hidden; }
.quotes__track { display: flex; align-items: stretch; gap: 16px; }
.tcard {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - 32px) / 3);
  width: calc((100% - 32px) / 3);
  margin: 0;
  padding: 18px 16px 16px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
  box-shadow: var(--shadow-sm);
}
.tcard__mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--primary-text);
  background: var(--bg-efedfd);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  line-height: 1;
  padding-top: 8px;
}
.tcard blockquote { margin: 12px 0 16px; }
.tcard blockquote p {
  font-size: 13.5px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--navy);
}
.tcard figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--bd-eceef6);
}
.tcard__logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 84px;
  height: 48px;
  padding: 4px 8px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
}
.tcard__logo img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}
.tcard figcaption b { display: block; font-size: 13.5px; line-height: 1.3; font-weight: 700; color: var(--navy); }
.tcard figcaption small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--muted); }
.quotes__more { margin-top: 22px; text-align: center; }
@media (max-width: 900px) {
  .tcard { flex-basis: 100%; width: 100%; }
}

/* ================= CTA ================= */
.cta-wrap { padding: 8px 0 16px; background: var(--surface); }
.cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 186px;
  padding: 36px 52px;
  border-radius: 16px;
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(420px 260px at 85% 60%, rgba(99, 102, 241, .28), transparent 70%),
    radial-gradient(500px 300px at 20% 0%, rgba(59, 70, 170, .35), transparent 70%),
    linear-gradient(100deg, #131c4d 0%, #1b2766 55%, #202c70 100%);
  box-shadow: 0 20px 40px rgba(15, 26, 70, .22);
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0 0 0 45%;
  background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.3px);
  background-size: 9px 9px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 65% 50%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 65% 50%, #000 30%, transparent 75%);
  pointer-events: none;
}
.cta > * { position: relative; }
.cta__eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  margin-bottom: 10px;
}
.cta h2 { font-size: 28px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 10px; }
.cta p { font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .82); }
.cta__actions { display: flex; gap: 14px; }
.cta__actions .btn { height: 50px; padding: 0 26px; font-size: 13.5px; }
.cta__actions .btn--primary { background: linear-gradient(90deg, #5d57f0, #6b52f5); }

/* ================= FOOTER ================= */
.footer {
  background: var(--footer);
  color: rgba(255, 255, 255, .78);
  padding: 36px 0 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: 290px 176px 160px 152px 1fr;
  gap: 24px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.footer__brand .logo { margin-bottom: 14px; }
.footer__brand p { font-size: 12px; margin-bottom: 16px; }
.socials { display: flex; gap: 10px; }
.socials a {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  transition: background .2s ease, border-color .2s ease;
}
.socials a:hover { background: var(--primary); border-color: var(--primary); }
.socials svg { width: 12px; height: 12px; }
.footer__col { display: flex; flex-direction: column; gap: 4px; }
.footer__col h4 { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.footer__col a,
.footer__col span { font-size: 12px; line-height: 1.6; transition: color .2s ease; }
.footer__col a:hover { color: #fff; }
.footer__contact > a,
.footer__contact > address,
.footer__contact > p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
}
.footer__contact > * > span { display: flex; flex-direction: column; }
.footer__contact small { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, .5); }
.footer__contact svg { width: 13px; height: 13px; margin-top: 4px; color: #fff; flex: none; }
.nums { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.nums i { font-style: normal; opacity: .45; }
.footer__contact .wa { margin-top: 2px; }
.footer__contact .wa svg { margin-top: 0; }
.footer__contact .wa svg { width: 26px; height: 26px; }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0 26px;
  font-size: 11.5px;
}
.footer__bottom nav { display: flex; gap: 34px; }
.footer__bottom a:hover { color: #fff; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.footer__news {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
  padding: 6px 0 30px;
  margin-bottom: 34px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.footer__news h4 { font-size: 15px; font-weight: 700; color: #fff; }
.footer__news p { margin-top: 4px; font-size: 12.5px; }
.newsform { position: relative; flex: 0 1 440px; display: flex; flex-direction: column; gap: 8px; }
.newsform__row { display: flex; gap: 8px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); transition: border-color .2s ease, box-shadow .2s ease; }
.newsform__row:focus-within { border-color: var(--bd-8f84ff); box-shadow: 0 0 0 4px rgba(109, 93, 252, .25); }
.newsform input[type="email"] { flex: 1; min-width: 0; padding: 0 14px; font: inherit; font-size: 13px; color: #fff; background: transparent; border: 0; outline: none; }
.newsform input[type="email"]::placeholder { color: rgba(255, 255, 255, .45); }
.newsform .btn { flex: none; border-radius: 999px; }
.newsform .form-status { padding: 8px 12px; font-size: 12px; color: #ffd6d8; background: rgba(229, 72, 77, .14); border-color: rgba(229, 72, 77, .35); }
.newsform__ok { font-size: 12.5px; font-weight: 600; color: var(--tx-7ee2b8); }
.newsform__ok[hidden] { display: none; }
.newsform__note { font-size: 11px; color: rgba(255, 255, 255, .5); }
.newsform__note a { color: rgba(255, 255, 255, .78); text-decoration: underline; }
.newsform__note a:hover { color: #fff; }
@media (max-width: 640px) {
  .newsform { flex-basis: 100%; }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1200px) {
  .hero__grid { grid-template-columns: 1fr 1.15fr; }
  .challenge__grid { grid-template-columns: 1fr 1.3fr; }
  .solution__grid { grid-template-columns: 1fr 1.2fr; }
  .process__grid { grid-template-columns: 1fr 1.1fr; gap: 56px; }
  .showreel__grid { grid-template-columns: 1fr 1.3fr; gap: 44px; }
  .why__grid { grid-template-columns: 1fr 1.4fr; gap: 40px; }
  .nav { gap: 24px; }
  .hero__badges { grid-template-columns: repeat(2, auto); row-gap: 12px; }
  .solution__visual { margin-right: -24px; }
  .checklist { width: 230px; padding: 14px 18px; }
  .checklist li { font-size: 13px; padding: 5px 0; }
}

@media (max-width: 1024px) {
  .nav {
    position: fixed;
    top: 74px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: 10px 24px 20px;
    background: var(--surface);
    box-shadow: 0 16px 30px rgba(20, 30, 70, .1);
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: .25s ease;
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav__link { width: 100%; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav__link.is-active::after { display: none; }
  .header__cta { margin-left: auto; }
  .burger { display: flex; }

  .hero__grid,
  .challenge__grid,
  .solution__grid,
  .process__grid,
  .wfeat { grid-template-columns: 1fr; }
  .wfeat__media { min-height: 260px; }
  .work__thumbs { grid-auto-columns: calc((100% - 2 * 16px) / 3); }
  .hero__visual { max-width: 680px; }
  .hero__badges { grid-template-columns: repeat(4, auto); }
  .process__grid { gap: 56px; }
  .why__grid { grid-template-columns: 1fr; gap: 30px; }
  .showreel__grid { grid-template-columns: 1fr; gap: 36px; }
  .showreel__media { max-width: 720px; }
  .showreel .sub { max-width: 600px; }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .why .lead { max-width: 600px; }
  .process__media { max-width: 600px; margin-left: 28px; margin-right: 18px; }
  .solution__visual { max-width: 760px; margin-right: 0; }
  .modules__grid { grid-template-columns: repeat(3, 1fr); }
  .industries__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .cta { flex-direction: column; align-items: flex-start; }
  .cta p br { display: none; }
}

@media (max-width: 680px) {
  .container { padding: 0 18px; }
  .header__cta { display: none; }
  .burger { margin-left: auto; }
  .hero { padding-top: 24px; }
  .hero__title { font-size: 38px; }
  .hero__actions { flex-wrap: wrap; justify-content: center; }
  .hero__badges { grid-template-columns: repeat(2, auto); justify-content: center; row-gap: 12px; }
  .hero__content,
  .challenge__content,
  .solution__content,
  .why__content,
  .showreel__content,
  .process__content,
  .svteaser__text,
  .cta,
  .footer__brand,
  .footer__col,
  .footer__news { text-align: center; }
  .hero__text,
  .challenge .lead,
  .solution .lead,
  .why .lead,
  .showreel .sub,
  .process__content .sub,
  .svteaser__text .sub { margin-left: auto; margin-right: auto; }
  .cta__actions,
  .socials,
  .svteaser__logos,
  .footer__bottom nav { justify-content: center; }
  .partner-badge,
  .sflow { margin-left: auto; margin-right: auto; }
  .showreel__list li,
  .footer__contact > a,
  .footer__contact > address,
  .footer__contact > p { justify-content: center; }
  .svteaser__side,
  .cta,
  .footer__col { align-items: center; }
  .pcard,
  .icard__body,
  .step-detail { text-align: center; }
  .pcard__ico { margin-left: auto; margin-right: auto; }
  .step-detail { flex-direction: column; align-items: center; }
  .partner-badge { gap: 12px; padding: 10px 14px 10px 12px; }
  .partner-badge img { height: 36px; }
  .partner-badge span { padding-left: 12px; }
  .partner-badge b { font-size: 12.5px; }
  .partner-badge small { font-size: 10.5px; }
  .showcase { height: 480px; }
  .showcase__dots { display: none; }
  .win { left: 8%; width: 84%; top: 0; height: 80%; }
  .win.is-left, .win.is-right, .win.is-back { transform: scale(.94); opacity: 0; pointer-events: none; }
  .apps-grid { padding: 10px 14px 20px; row-gap: 16px; }
  .apps-grid b { width: 54px; height: 54px; }
  .stat { min-width: 0; padding: 12px 16px; }
  .stat small { font-size: 12px; }
  .stat strong { font-size: 16px; }
  .stat--inv strong { font-size: 22px; }
  .stat--sales { left: 0; bottom: 0; }
  .stat--inv { right: 0; bottom: 3%; }
  .marquee__group li { height: 60px; padding: 0 22px; }
  .marquee__group img { height: 42px; max-width: 120px; }
  .marquee__group img.is-tall { height: 50px; }
  .marquee__group img.is-wide { height: 24px; max-width: 130px; }
  .marquee__group img.is-small { height: 36px; }
  .marquee__group img.is-leema { height: 52px; max-width: 180px; }
  .h2--lg { font-size: 31px; }
  .h2, .process .h2 { font-size: 26px; }
  .h2 br, .sub br { display: none; }
  .challenge__cards { grid-template-columns: 1fr 1fr; gap: 14px; }
  .platform { padding: 40px 0 46px; }
  .orbit { --r1: 96px; --r2: 160px; width: 350px; height: 350px; margin-top: 14px; }
  .orb__box { width: 62px; gap: 4px; font-size: 8.5px; transform: translate(-50%, -18px); }
  .orb__box img { width: 26px; height: 26px; }
  .orbit__core { width: 96px; height: 96px; gap: 3px; box-shadow: 0 0 0 8px rgba(109, 93, 252, .07), 0 14px 30px rgba(91, 80, 236, .18); }
  .orbit__core::after { inset: -8px; }
  .orbit__core img { height: 20px; }
  .orbit__core b { font-size: 9.5px; }
  .platform__actions { flex-direction: column; align-items: center; margin-top: 16px; }
  .why { padding: 40px 0 46px; }
  .showreel { padding: 44px 0 50px; }
  .showreel__list li { font-size: 13px; }
  .player__bar { height: 28px; }
  .player__btn { width: 58px; height: 58px; }
  .player__btn svg { width: 24px; height: 24px; }
  .player__label b { font-size: 14px; }
  .services { padding: 40px 0 48px; }
  .services__head { margin-bottom: 24px; }
  .services__grid { grid-template-columns: 1fr; gap: 12px; }
  .scard { align-items: center; padding: 18px; text-align: center; }
  .why__cards { grid-template-columns: 1fr; gap: 12px; }
  .wcard { display: flex; flex-direction: column; align-items: center; padding: 18px 16px; text-align: center; }
  .wcard__ico { margin-bottom: 12px; }
  .sflow { grid-template-columns: 1fr 16px 1.1fr 16px 1fr; }
  .sflow__card { height: 80px; padding: 0 4px; }
  .sflow__card--main { height: 90px; }
  .sflow__card b { font-size: 9px; letter-spacing: .04em; }
  .sflow__icons { gap: 3px; }
  .sflow__icons i { width: 18px; height: 18px; border-radius: 5px; }
  .sflow__icons svg { width: 11px; height: 11px; }
  .sflow__arrow { margin: 0 2px; }
  .pcard { padding: 16px 14px 18px; }
  .pcard__ico { width: 46px; height: 46px; margin-bottom: 12px; }
  .pcard h3 { font-size: 13.5px; }
  .process { padding: 44px 0 48px; }
  .process__media { margin: 0 14px 0 0; }
  .process__frame { inset: 14px -14px -14px 14px; }
  .process__dots { left: -12px; top: -16px; }
  .process__photos { height: 240px; }
  .pstatus { left: 12px; bottom: -34px; width: 220px; padding: 12px 14px 14px; }
  .process__content { margin-top: 20px; }
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
  .steps::before, .steps::after { display: none; }
  .step-detail { padding: 16px 18px; gap: 14px; }
  .step-detail__num { font-size: 26px; }
  .solution__visual { display: flex; flex-direction: column; gap: 16px; margin: 0 -18px; overflow: hidden; }
  .scene { width: 150%; margin-left: -4%; }
  .doodle--sol { display: none; }
  .checklist { position: relative; top: auto; right: auto; width: auto; margin: 0 18px; }
  .sec-head { flex-direction: column; align-items: center; text-align: center; }
  .sec-head .link-arrow { margin-bottom: 0; }
  .modules__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .industries { padding: 40px 0 44px; }
  .industries__head { margin-bottom: 24px; }
  .industries__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .icard__media { height: 96px; }
  .icard__ico { left: 10px; top: 76px; width: 36px; height: 36px; border-radius: 10px; }
  .icard__ico svg { width: 18px; height: 18px; }
  .icard__body { padding: 24px 12px 14px; }
  .icard h3 { font-size: 13px; }
  .icard p { font-size: 11px; }
  .work { padding: 40px 0 46px; }
  .work__head { margin-bottom: 24px; }
  .wfeat__media { min-height: 200px; }
  .wfeat__logo { width: 68px; height: 68px; right: 12px; bottom: 12px; border-radius: 12px; }
  .wfeat__body { align-items: center; padding: 22px 20px 24px; text-align: center; }
  .wfeat__tags { justify-items: center; }
  .wfeat__tags li { justify-content: center; }
  .wfeat h3 { font-size: 21px; }
  .wfeat p { font-size: 13px; }
  .wfeat__tags { gap: 8px 12px; }
  .wfeat__tags li { font-size: 12px; }
  .work__thumbs { grid-auto-columns: 62%; gap: 12px; }
  .work__more { flex-direction: column; align-items: center; padding: 16px 18px; text-align: center; }
  .cta { padding: 30px 24px; }
  .cta__actions { flex-wrap: wrap; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__bottom { flex-direction: column; align-items: center; text-align: center; }
  .footer__bottom nav { gap: 20px; }
}

/* ================= LEGAL PAGES ================= */
.lhero {
  position: relative;
  padding: 48px 0 56px;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(520px 260px at 85% 0%, rgba(128, 108, 255, .16), transparent 70%),
    radial-gradient(480px 240px at 10% 100%, rgba(79, 141, 247, .12), transparent 70%),
    linear-gradient(180deg, var(--bg-f6f7fc) 0%, var(--bg-f2f1fb) 100%);
  border-bottom: 1px solid var(--bd-eceef6);
}
.lhero__crumbs { display: flex; justify-content: center; gap: 8px; margin-bottom: 22px; font-size: 12.5px; color: var(--muted); }
.lhero__crumbs a { color: var(--primary-text); font-weight: 600; }
.lhero__crumbs a:hover { text-decoration: underline; }
.lhero__title { font-size: 44px; line-height: 1.15; font-weight: 800; letter-spacing: -.025em; color: var(--navy); }
.lhero__sub { max-width: 620px; margin: 14px auto 0; font-size: 15px; line-height: 1.65; color: var(--text); }
.lhero__updated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  background: var(--surface);
  border: 1px solid var(--bd-dcd8fb);
  box-shadow: var(--shadow-sm);
}
.lhero__updated svg { width: 15px; height: 15px; color: var(--tx-6b5ce7); }

.legal {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding-top: 44px;
  padding-bottom: 70px;
}
.legal__toc {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 116px);
  overflow-y: auto;
  padding: 20px 14px 18px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
  box-shadow: var(--shadow-sm);
  scrollbar-width: thin;
}
.legal__toc-label {
  padding: 0 10px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tx-6b5ce7);
}
.legal__toc nav { display: flex; flex-direction: column; gap: 2px; }
.legal__toc a {
  padding: 7px 10px;
  border-radius: 8px;
  border-left: 3px solid transparent;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.legal__toc a:hover { background: var(--bg-f5f4fe); color: var(--navy); }
.legal__toc a.is-active { background: var(--bg-efedfd); color: var(--primary-text); font-weight: 600; border-left-color: #6d5dfc; }

.legal__jump { display: none; }

.lsec { scroll-margin-top: 96px; padding: 0 0 30px; margin-bottom: 30px; border-bottom: 1px solid var(--bd-eceef6); }
.lsec__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.lsec__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #6d5dfc, #4f63f0);
  box-shadow: 0 8px 18px rgba(91, 80, 236, .25);
}
.lsec h2 { font-size: 21px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: var(--navy); }
.lsec p { font-size: 14.5px; line-height: 1.75; color: var(--text); }
.lsec p + p { margin-top: 10px; }
.lsec p a { color: var(--primary-text); font-weight: 600; }
.lsec p a:hover { text-decoration: underline; }
.lsec b { color: var(--navy); font-weight: 700; }
.lsec__list { display: grid; gap: 8px; margin: 14px 0 16px; }
.lsec__list--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.lsec__list li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.lsec__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-e4ecff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-8.5' fill='none' stroke='%233d6cf0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.lsec__notice {
  padding: 22px 24px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--bg-f5f3ff) 0%, var(--bg-eef3ff) 100%);
  border: 1px solid var(--bd-dcd8fb);
  border-left: 4px solid #6d5dfc;
}

.lcontact {
  margin-top: 18px;
  padding: 24px;
  border-radius: 16px;
  color: #fff;
  background:
    radial-gradient(360px 200px at 100% 0%, rgba(109, 93, 252, .45), transparent 70%),
    var(--navy-bg);
  box-shadow: 0 18px 40px rgba(15, 26, 60, .2);
}
.lcontact > strong { display: block; margin-bottom: 16px; font-size: 17px; font-weight: 700; }
.lcontact__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.lcontact__grid > * { display: flex; flex-direction: column; font-size: 14px; line-height: 1.5; color: #e6e9ff; }
.lsec .lcontact__grid p { font-size: 14px; line-height: 1.5; color: #e6e9ff; margin: 0; }
.lcontact__grid small { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #b3a9ff; }
.lcontact__grid a,
.lsec .lcontact__grid p a { color: #e6e9ff; font-weight: 400; transition: color .2s ease; }
.lcontact__grid a:hover { color: #fff; text-decoration: underline; }

.legal__note { font-size: 13px; line-height: 1.7; font-style: italic; color: var(--muted); }
.legal__framework {
  margin-top: 18px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
  box-shadow: var(--shadow-sm);
}
.legal__framework strong { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-6b5ce7); margin-bottom: 4px; }
.legal__framework p { font-size: 14px; color: var(--navy); font-weight: 600; }
.footer__bottom a[aria-current="page"] { color: #fff; }

@media (max-width: 1024px) {
  .legal { grid-template-columns: 1fr; gap: 0; padding-top: 28px; }
  .legal__toc { display: none; }
  .legal__jump {
    position: sticky;
    top: 74px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 -4px 26px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(var(--surface-rgb), .96);
    border: 1px solid var(--bd-eceef6);
    box-shadow: var(--shadow-sm);
  }
  .legal__jump label { flex: none; font-size: 12px; font-weight: 700; color: var(--navy); }
  .legal__jump select {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--bd-dcd8fb);
    background: var(--surface);
    font: inherit;
    font-size: 13px;
    color: var(--navy);
  }
  .lsec { scroll-margin-top: 150px; }
}

@media (max-width: 680px) {
  .lhero { padding: 32px 0 38px; }
  .lhero__title { font-size: 32px; }
  .lhero__sub { font-size: 14px; }
  .legal { padding-bottom: 48px; }
  .legal__jump label { display: none; }
  .lsec { padding-bottom: 24px; margin-bottom: 24px; }
  .lsec__num { width: 32px; height: 32px; font-size: 13px; }
  .lsec h2 { font-size: 18px; }
  .lsec p { font-size: 14px; }
  .lsec__list--cols { grid-template-columns: 1fr; }
  .lsec__notice { padding: 18px; }
  .lcontact { padding: 20px; }
  .lcontact__grid { grid-template-columns: 1fr; }
}

.lhero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.lhero__meta .lhero__updated { margin-top: 0; }
.lhero__print { margin-top: 18px; gap: 8px; }
.lhero__print svg { width: 16px; height: 16px; }
.legal__intro-notice { margin-bottom: 34px; }
.legal__intro-notice strong { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-6b5ce7); }
.legal__intro-notice p { font-size: 14px; line-height: 1.7; color: var(--text); }

.ldefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 6px; }
.ldefs > div {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, transform .2s ease;
}
.ldefs > div:hover { border-color: var(--bd-cfc9fb); transform: translateY(-2px); }
.ldefs dt { margin-bottom: 4px; font-size: 14px; font-weight: 700; color: var(--primary-text); }
.ldefs dd { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text); }

.ltable { overflow-x: auto; border-radius: 12px; border: 1px solid var(--bd-eceef6); box-shadow: var(--shadow-sm); }
.ltable table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 13.5px; }
.ltable th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-6b5ce7); background: var(--bg-f5f4fe); }
.ltable td { padding: 13px 16px; color: var(--text); border-top: 1px solid var(--bd-eceef6); }
.ltable td:first-child { font-weight: 700; color: var(--navy); }

.lsec__related, .legal__related { font-size: 13.5px; color: var(--muted); }
.lsec p.lsec__related { margin-top: 12px; }
.lsec__related a, .legal__related a { color: var(--primary-text); font-weight: 600; }
.lsec__related a:hover, .legal__related a:hover { text-decoration: underline; }
.legal__related { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.legal-print-head { display: none; }

@media (max-width: 680px) {
  .ldefs { grid-template-columns: 1fr; }
  .lhero__meta { gap: 8px; }
  .lhero__meta .lhero__updated { padding: 6px 12px; font-size: 11.5px; }
}

@media print {
  .header, .footer, .legal__toc, .legal__jump, .lhero, .legal__related, .lsec__related { display: none !important; }
  body { background: var(--surface); }
  .legal-print-head { display: flex; flex-direction: column; gap: 2px; padding: 0 0 12px; margin-bottom: 18px; border-bottom: 2px solid #6d5dfc; font-size: 11px; color: var(--tx-4a5372); }
  .legal-print-head strong { font-size: 16px; color: var(--tx-0f1a3c); }
  .legal { display: block; padding: 0; }
  .lsec { break-inside: avoid-page; padding-bottom: 14px; margin-bottom: 14px; }
  .lsec__num { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ldefs > div, .ltable, .lcontact { box-shadow: none; }
  .lcontact { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 1200px) {
  .savings__apps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .savings__grid { grid-template-columns: 1fr; }
  .svteaser__card { grid-template-columns: 1fr; }
  .savings__apps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .savings__summary { position: static; display: grid; grid-template-columns: 1fr 1fr; }
  .savings__summary .svcard:first-child { grid-row: span 2; }
}
@media (max-width: 680px) {
  .savings { padding: 44px 0 48px; }
  .savings__head .h2--lg { font-size: 30px; }
  .savings__panel { padding: 20px 16px; }
  .savings__apps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .svapp__logo { padding: 13px; border-radius: 12px; }
  .svapp__name { font-size: 11px; }
  .svapp__check { right: 2px; }
  .savings__summary { display: flex; }
  .svsave strong { font-size: 28px; }
  .svteaser { padding: 40px 0; }
  .svteaser__card { padding: 26px 20px; }
  .svteaser__logos span { width: 46px; height: 46px; padding: 10px; }
}

/* ================= ODOO PAGE ================= */
.opsec-head { max-width: 720px; margin: 0 auto 36px; text-align: center; }
.opsec-head .sub { max-width: 600px; margin: 12px auto 0; font-size: 14.5px; }
.opfeat__ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--tx-5b50ec);
  background: linear-gradient(135deg, var(--bg-efedff), var(--bg-e4ecff));
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.opfeat__ico svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hero */
.ophero {
  position: relative;
  padding: 34px 0 96px;
  overflow: hidden;
  background:
    radial-gradient(560px 300px at 88% 10%, rgba(128, 108, 255, .16), transparent 70%),
    radial-gradient(520px 280px at 0% 100%, rgba(79, 141, 247, .12), transparent 70%),
    linear-gradient(180deg, var(--bg-f6f7fc) 0%, var(--bg-f2f1fb) 100%);
}
.ophero__grid { display: grid; grid-template-columns: 1fr 1.02fr; gap: 56px; align-items: center; }
.ophero__crumbs { justify-content: flex-start; margin-bottom: 18px; }
.ophero__title { font-size: 46px; line-height: 1.14; font-weight: 800; letter-spacing: -.025em; color: var(--navy); }
.ophero__lead { max-width: 540px; margin-top: 18px; font-size: 15.5px; line-height: 1.7; color: var(--text); }
.ophero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.ophero__checks { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 26px; margin-top: 26px; }
.ophero__checks li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--navy); }
.ophero__checks .ico { color: var(--tx-5b50ec); }

.ophero__visual { position: relative; padding: 10px 26px 40px 0; }
.ophero__glow {
  position: absolute;
  inset: 8% 4% 12% 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(109, 93, 252, .35), transparent);
  filter: blur(30px);
}
.ophome {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--bd-e6e4fb);
  box-shadow: 0 30px 60px rgba(40, 30, 110, .16);
}
.ophome__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  background: var(--bg-f7f7fc);
  border-bottom: 1px solid var(--bd-eceef6);
}
.ophome__bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff6159; }
.ophome__bar i:nth-child(2) { background: #ffbd2e; }
.ophome__bar i:nth-child(3) { background: #28c941; }
.ophome__bar span { margin-left: 10px; font-size: 12px; font-weight: 600; color: var(--muted); }
.ophome__apps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px 12px;
  padding: 30px 26px 32px;
  background:
    radial-gradient(420px 200px at 50% 0%, rgba(109, 93, 252, .08), transparent 70%),
    var(--surface);
}
.ophome__apps span { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ophome__apps img {
  width: 58px;
  height: 58px;
  padding: 8px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 6px 16px rgba(40, 30, 110, .1);
  transition: transform .25s ease;
}
.ophome__apps span:hover img { transform: translateY(-4px); }
.ophome__apps b { font-size: 11.5px; font-weight: 600; color: var(--text); text-align: center; }

.ophero__float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 18px 40px rgba(40, 30, 110, .16);
  animation: op-float 5s ease-in-out infinite;
}
.ophero__float--db { left: -34px; bottom: -6px; }
.ophero__float--db b { display: block; font-size: 13.5px; color: var(--navy); }
.ophero__float--db small { font-size: 11.5px; color: var(--muted); }
.ophero__float-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #6d5dfc, #4f63f0);
}
.ophero__float-ico svg { width: 20px; height: 20px; }
.ophero__float--partner { right: 0; top: -14px; padding: 8px 12px; animation-delay: -2.5s; }
.ophero__float--partner img { width: auto; height: 46px; }
@keyframes op-float { 50% { transform: translateY(-8px); } }

/* Stats */
.opstats { position: relative; z-index: 2; margin-top: -54px; }
.opstats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
  box-shadow: 0 20px 44px rgba(28, 39, 90, .1);
}
.opstats__grid > div { padding: 26px 20px; text-align: center; }
.opstats__grid > div + div { border-left: 1px solid var(--bd-eceef6); }
.opstats__grid b {
  display: block;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  background: linear-gradient(90deg, #3d6cf0, #7b4be8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.opstats__grid span { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.hmstats { margin-top: 0; padding: 6px 0 44px; background: var(--surface); }

/* What is Odoo */
.opwhat { padding: 70px 0 64px; background: var(--surface); }
.opwhat__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.opwhat__text p { margin-top: 16px; font-size: 15px; line-height: 1.75; color: var(--text); }
.opwhat__text p b { color: var(--navy); }
.opwhat__text .h2 { margin-bottom: 6px; }
.opwhat__cards { display: flex; flex-direction: column; gap: 16px; }
.opcard {
  position: relative;
  padding: 22px 24px 22px 80px;
  border-radius: 16px;
  background: var(--bg-soft);
  border: 1px solid var(--bd-eceef6);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.opcard:hover { transform: translateX(6px); border-color: var(--bd-dcd8fb); box-shadow: var(--shadow); }
.opcard__num {
  position: absolute;
  left: 22px;
  top: 22px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 800;
  color: var(--tx-5b50ec);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.opcard h3 { font-size: 16px; font-weight: 700; color: var(--navy); }
.opcard p { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.opcard--accent { color: #fff; border-color: transparent; background: linear-gradient(135deg, #6d5dfc 0%, #4f63f0 70%, #4f8df7 100%); box-shadow: 0 16px 34px rgba(79, 99, 240, .28); }
.opcard--accent h3 { color: #fff; }
.opcard--accent p { color: rgba(255, 255, 255, .88); }

/* Before / after */
.opshift { padding: 62px 0 66px; background: var(--bg-soft); }
.opshift__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: center; }
.opshift__card { height: 100%; padding: 28px 30px; border-radius: 18px; background: var(--surface); border: 1px solid var(--bd-eceef6); box-shadow: var(--shadow-sm); }
.opshift__card h3 { margin-bottom: 18px; font-size: 19px; font-weight: 700; color: var(--navy); }
.opshift__card ul { display: flex; flex-direction: column; gap: 13px; }
.opshift__card li { display: flex; gap: 12px; font-size: 14px; line-height: 1.5; color: var(--text); }
.opshift__card li .ico { width: 20px; height: 20px; margin-top: 1px; }
.opshift__card--before li .ico { color: #b7bccd; }
.opshift__card--before h3 { color: var(--muted); }
.opshift__card--after { border: 1.5px solid var(--bd-cfc9fb); box-shadow: 0 18px 40px rgba(91, 80, 236, .12); }
.opshift__card--after li { color: var(--navy); font-weight: 500; }
.opshift__card--after li .ico { color: var(--tx-5b50ec); }
.opshift__card--after h3 { display: inline-block; background: linear-gradient(90deg, #3d6cf0, #7b4be8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.opshift__arrow {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #6d5dfc, #4f63f0);
  box-shadow: 0 10px 24px rgba(91, 80, 236, .3);
}
.opshift__arrow .ico { width: 22px; height: 22px; }

/* Apps */
.opapps { padding: 64px 0 66px; background: var(--surface); }
.opapps__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.opfam {
  padding: 22px 20px 20px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.opfam:hover { transform: translateY(-5px); border-color: var(--bd-dcd8fb); box-shadow: 0 18px 40px rgba(40, 30, 110, .12); }
.opfam h3 { font-size: 16px; font-weight: 700; color: var(--navy); }
.opfam > p { margin-top: 6px; min-height: 42px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.opfam ul { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bd-eceef6); }
.opfam li { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--navy); transition: background .2s ease; }
.opfam li:hover { background: var(--bg-f5f4fe); }
.opfam li img { width: 28px; height: 28px; flex: none; }

/* Why Odoo */
.opwhy { padding: 64px 0 66px; background: var(--bg-soft); }
.opwhy__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.opfeat {
  padding: 22px 20px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.opfeat:hover { transform: translateY(-5px); border-color: var(--bd-dcd8fb); box-shadow: 0 18px 40px rgba(40, 30, 110, .12); }
.opfeat:hover .opfeat__ico,
.ophost__card:hover .opfeat__ico,
.ophelp__card:hover .opfeat__ico { color: #fff; background: linear-gradient(135deg, #6d5dfc, #4f63f0); }
.opfeat h3 { margin-top: 16px; font-size: 15px; font-weight: 700; color: var(--navy); }
.opfeat p { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--text); }

/* Editions */
.opeditions { padding: 64px 0 60px; background: var(--surface); }
.opcompare {
  max-width: 940px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
  box-shadow: var(--shadow);
}
.opcompare__row { display: grid; grid-template-columns: 1.5fr 1fr 1fr; }
.opcompare__row > span { display: flex; align-items: center; padding: 15px 22px; font-size: 13.5px; color: var(--text); }
.opcompare__row > span:first-child { font-weight: 600; color: var(--navy); }
.opcompare__row > span:not(:first-child) { flex-direction: column; justify-content: center; text-align: center; }
.opcompare__row > span:last-child { background: var(--bg-f8f7ff); }
.opcompare__row + .opcompare__row { border-top: 1px solid var(--bd-eceef6); }
.opcompare__row--head > span { padding-top: 22px; padding-bottom: 18px; }
.opcompare__ed b { display: block; font-size: 17px; font-weight: 800; color: var(--navy); }
.opcompare__ed small { font-size: 12px; color: var(--muted); }
.opcompare__row > span.opcompare__ed--ent { position: relative; background: linear-gradient(135deg, #6d5dfc, #4f63f0); }
.opcompare__ed--ent b { color: #fff; }
.opcompare__ed--ent small { color: rgba(255, 255, 255, .85); }
.opcompare__ed--ent em {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tx-5b50ec);
  background: var(--surface);
}
.opcompare .ico { width: 22px; height: 22px; vertical-align: middle; }
.opcompare .yes { color: var(--tx-5b50ec); }
.opcompare .no { color: #c9cddb; }
.opeditions__note { margin-top: 20px; font-size: 13.5px; text-align: center; color: var(--muted); }
.opeditions__note a { font-weight: 600; color: var(--primary-text); }
.opeditions__note a:hover { text-decoration: underline; }

/* Hosting */
.ophost { padding: 62px 0 66px; background: var(--bg-soft); }
.ophost__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ophost__card {
  padding: 26px 26px 24px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ophost__card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(40, 30, 110, .12); }
.ophost__card--accent { border: 1.5px solid var(--bd-cfc9fb); box-shadow: 0 18px 40px rgba(91, 80, 236, .12); }
.ophost__card h3 { margin-top: 16px; font-size: 18px; font-weight: 700; color: var(--navy); }
.ophost__tag { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--tx-6b5ce7); }
.ophost__card ul { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--bd-eceef6); }
.ophost__card li {
  position: relative;
  padding-left: 24px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}
.ophost__card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--bg-e4ecff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-8.5' fill='none' stroke='%233d6cf0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* Fit */
.opfit { padding: 66px 0; background: var(--surface); }
.opfit__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.opfit__media { position: relative; padding: 0 0 30px; }
.opfit__media::before {
  content: "";
  position: absolute;
  inset: 10% -4% 0 8%;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--bg-efedff), var(--bg-e4ecff));
  transform: rotate(3deg);
}
.opfit__window {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--bd-e6e4fb);
  box-shadow: 0 24px 50px rgba(28, 39, 90, .16);
}
.opfit__window > img { width: 100%; height: auto; }
.opfit__badge {
  position: absolute;
  right: -18px;
  bottom: 26px;
  display: flex;
  flex-direction: column;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 18px 40px rgba(40, 30, 110, .16);
}
.opfit__badge b { font-size: 20px; font-weight: 800; color: var(--tx-5b50ec); }
.opfit__badge span { font-size: 12px; color: var(--muted); }
.opfit__list { display: flex; flex-direction: column; gap: 12px; margin: 22px 0 24px; }
.opfit__list li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.5; color: var(--navy); }
.opfit__list .ico { width: 20px; height: 20px; margin-top: 1px; color: var(--tx-5b50ec); }

/* How CodeBraze helps */
.ophelp {
  padding: 66px 0 70px;
  color: #fff;
  background:
    radial-gradient(520px 300px at 90% 0%, rgba(109, 93, 252, .35), transparent 70%),
    radial-gradient(460px 280px at 0% 100%, rgba(79, 141, 247, .2), transparent 70%),
    var(--navy-bg);
}
.ophelp__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.ophelp__head > div:first-child { max-width: 700px; }
.ophelp .eyebrow { color: #b3a9ff; border-bottom-color: rgba(179, 169, 255, .5); }
.ophelp .h2 { color: #fff; }
.ophelp .grad-text { background-image: linear-gradient(90deg, #8fb0ff, var(--bg-b8a6ff)); }
.ophelp .sub { color: rgba(230, 233, 255, .8); font-size: 14.5px; }
.ophelp__partner {
  display: flex;
  align-items: center;
  flex: none;
  gap: 14px;
  padding: 10px 18px 10px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
}
.ophelp__partner img { width: auto; height: 50px; padding: 6px 8px; border-radius: 10px; background: var(--surface); }
.ophelp__partner b { display: block; font-size: 13.5px; }
.ophelp__partner small { font-size: 12px; color: rgba(230, 233, 255, .7); }
.ophelp__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ophelp__card {
  padding: 24px 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.ophelp__card:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .08); border-color: rgba(179, 169, 255, .4); }
.ophelp__card .opfeat__ico { color: #c9c0ff; background: rgba(255, 255, 255, .08); }
.ophelp__card h3 { margin-top: 16px; font-size: 16px; font-weight: 700; }
.ophelp__card p { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: rgba(230, 233, 255, .75); }

/* FAQ */
.opfaq { padding: 66px 0 56px; background: var(--surface); }
.opfaq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.opfaq__intro { position: sticky; top: 100px; }
.opfaq__intro .sub { margin: 12px 0 22px; font-size: 14.5px; }
.opfaq__list { display: flex; flex-direction: column; gap: 12px; }
.faq {
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq[open] { border-color: var(--bd-cfc9fb); box-shadow: 0 12px 28px rgba(91, 80, 236, .1); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico {
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 50%;
  color: var(--tx-5b50ec);
  background: var(--bg-f1efff);
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.faq[open] summary .ico { transform: rotate(45deg); color: #fff; background: linear-gradient(135deg, #6d5dfc, #4f63f0); }
.faq p { padding: 0 20px 18px; font-size: 14px; line-height: 1.7; color: var(--text); }
.odoo-page .cta-wrap { padding: 16px 0 40px; }

@media (max-width: 1200px) {
  .opapps__grid, .opwhy__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .ophero__grid, .opwhat__grid, .opfit__grid, .opfaq__grid { grid-template-columns: 1fr; gap: 40px; }
  .ophero__visual { max-width: 620px; margin: 0 auto; width: 100%; }
  .ophero__float--db { left: 0; }
  .opshift__grid { grid-template-columns: 1fr; }
  .opshift__arrow { margin: 0 auto; transform: rotate(90deg); }
  .opapps__grid, .opwhy__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ophost__grid, .ophelp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ophelp__head { flex-direction: column; align-items: flex-start; }
  .opfit__badge { right: 16px; }
  .opfaq__intro { position: static; }
}
@media (max-width: 680px) {
  .ophero { padding: 24px 0 80px; }
  .ophero__title { font-size: 32px; }
  .ophero__lead { font-size: 14.5px; }
  .ophero__checks { grid-template-columns: 1fr; }
  .ophero__visual { padding: 10px 0 50px; }
  .ophome__apps { gap: 16px 6px; padding: 22px 12px; }
  .ophome__apps img { width: 46px; height: 46px; padding: 6px; }
  .ophome__apps b { font-size: 10.5px; }
  .ophero__float--partner img { height: 34px; }
  .opstats__grid { grid-template-columns: 1fr 1fr; }
  .opstats__grid > div:nth-child(3) { border-left: 0; }
  .opstats__grid > div:nth-child(n + 3) { border-top: 1px solid var(--bd-eceef6); }
  .opstats__grid b { font-size: 26px; }
  .opwhat, .opshift, .opapps, .opwhy, .opeditions, .ophost, .opfit, .ophelp, .opfaq { padding: 46px 0; }
  .opcard { padding: 20px 18px 20px 72px; }
  .opcard__num { left: 18px; }
  .opshift__card { padding: 22px 20px; }
  .opapps__grid, .opwhy__grid, .ophost__grid, .ophelp__grid { grid-template-columns: 1fr; }
  .opfam > p { min-height: 0; }
  .opcompare__row { grid-template-columns: 1.2fr 1fr 1fr; }
  .opcompare__row > span { padding: 12px 10px; font-size: 12px; }
  .opcompare__ed b { font-size: 14px; }
  .opcompare__ed--ent em { display: none; }
}

.services__more { margin-top: 30px; text-align: center; }

/* ================= SERVICES PAGE ================= */
.srvhero {
  padding: 40px 0 120px;
  text-align: center;
  background:
    radial-gradient(560px 300px at 85% 0%, rgba(128, 108, 255, .16), transparent 70%),
    radial-gradient(520px 280px at 10% 100%, rgba(79, 141, 247, .12), transparent 70%),
    linear-gradient(180deg, var(--bg-f6f7fc) 0%, var(--bg-f2f1fb) 100%);
}
.srvhero__title { font-size: 46px; line-height: 1.14; font-weight: 800; letter-spacing: -.025em; color: var(--navy); }
.srvhero__lead { max-width: 660px; margin: 18px auto 0; font-size: 15.5px; line-height: 1.7; color: var(--text); }
.srvhero__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.srvover { position: relative; z-index: 2; margin-top: -76px; padding-bottom: 20px; }
.srvover__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.srvtile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 20px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
  box-shadow: 0 16px 38px rgba(28, 39, 90, .08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.srvtile:hover { transform: translateY(-6px); border-color: var(--bd-cfc9fb); box-shadow: 0 22px 46px rgba(40, 30, 110, .14); }
.srvtile__num { position: absolute; top: 18px; right: 22px; font-size: 30px; font-weight: 800; color: #efedfd; letter-spacing: -.02em; transition: color .25s ease; }
.srvtile:hover .srvtile__num { color: #dcd8fb; }
.srvtile__ico,
.srvflow__ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  color: var(--tx-5b50ec);
  background: linear-gradient(135deg, var(--bg-efedff), var(--bg-e4ecff));
  transition: background .25s ease, color .25s ease;
}
.srvtile__ico svg,
.srvflow__ico svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.srvtile:hover .srvtile__ico { color: #fff; background: linear-gradient(135deg, #6d5dfc, #4f63f0); }
.srvtile h2 { margin-top: 16px; font-size: 16.5px; font-weight: 700; line-height: 1.3; color: var(--navy); }
.srvtile p { margin-top: 6px; flex: 1; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.srvtile__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--link); transition: gap .2s ease; }
.srvtile:hover .srvtile__more { gap: 12px; }
.srvtile__more .ico { width: 14px; height: 14px; }

/* Service blocks */
.srv { padding: 72px 0; background: var(--surface); scroll-margin-top: 60px; }
.srv--soft { background: var(--bg-soft); }
.srv__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.srv--flip .srv__text { order: 2; }
.srv__tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 5px 14px 5px 5px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tx-5b50ec);
  background: var(--surface);
  border: 1px solid var(--bd-dcd8fb);
}
.srv--soft .srv__tag { background: var(--surface); }
.srv:not(.srv--soft) .srv__tag { background: var(--bg-f5f4fe); }
.srv__tag b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 11.5px;
  color: #fff;
  background: linear-gradient(135deg, #6d5dfc, #4f63f0);
}
.srv__desc { margin-top: 14px; font-size: 15px; line-height: 1.75; color: var(--text); }
.srv__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; margin-top: 22px; }
.srv__list li { display: flex; gap: 10px; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--navy); }
.srv__list .ico { width: 18px; height: 18px; margin-top: 1px; color: var(--tx-5b50ec); }
.srv__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 28px; }

.srv__visual { position: relative; padding: 24px; }
.srv__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background:
    radial-gradient(260px 200px at 80% 20%, rgba(109, 93, 252, .18), transparent 70%),
    linear-gradient(135deg, var(--bg-efedff), var(--bg-e8efff));
  transform: rotate(-2deg);
}
.srv--soft .srv__visual::before { background: radial-gradient(260px 200px at 80% 20%, rgba(109, 93, 252, .16), transparent 70%), var(--surface); transform: rotate(2deg); box-shadow: var(--shadow-sm); }
.vis {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--bd-e6e4fb);
  box-shadow: 0 24px 50px rgba(40, 30, 110, .14);
}
.vis__bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; background: var(--bg-f7f7fc); border-bottom: 1px solid var(--bd-eceef6); }
.vis__bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff6159; }
.vis__bar i:nth-child(2) { background: #ffbd2e; }
.vis__bar i:nth-child(3) { background: #28c941; }
.vis__bar span { margin-left: 8px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.vis__chip {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 16px 36px rgba(40, 30, 110, .16);
  animation: op-float 5s ease-in-out infinite;
}
.vis__chip--br { right: -6px; bottom: 0; }
.vis__chip--tl { left: -6px; top: 0; }
.vis__chip img { width: auto; height: 42px; }
.vis__chip b { font-size: 18px; font-weight: 800; color: var(--tx-5b50ec); }
.vis__chip span { font-size: 11.5px; color: var(--muted); }
.vis__chip--stack { flex-direction: row; gap: 6px; padding: 10px; }
.vis__chip--stack span { padding: 5px 10px; border-radius: 8px; font-size: 11.5px; font-weight: 700; color: var(--tx-5b50ec); background: var(--bg-f1efff); }

.vis-erp__apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 10px; padding: 28px 22px 34px; }
.vis-erp__apps span { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text); }
.vis-erp__apps img { width: 56px; height: 56px; padding: 8px; border-radius: 14px; background: var(--surface); box-shadow: 0 6px 16px rgba(40, 30, 110, .1); }

.vis-flow { padding: 24px 24px 26px; }
.vis-flow__title { margin-bottom: 18px; font-size: 14px; font-weight: 700; color: var(--navy); }
.vis-flow__steps { position: relative; display: flex; flex-direction: column; gap: 18px; }
.vis-flow__steps::before { content: ""; position: absolute; left: 17px; top: 10px; bottom: 10px; width: 2px; background: var(--bg-e6e4fb); }
.vis-flow__steps > div { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 0; }
.vis-flow__steps i {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  color: var(--tx-9aa1b8);
  background: var(--surface);
  border: 2px solid var(--bd-e6e4fb);
}
.vis-flow__steps .is-done i { color: #fff; border-color: transparent; background: linear-gradient(135deg, #6d5dfc, #4f63f0); }
.vis-flow__steps .is-active i { color: var(--tx-5b50ec); border-color: #5b50ec; box-shadow: 0 0 0 5px rgba(91, 80, 236, .15); }
.vis-flow__steps span { flex: 1; padding: 10px 14px; border-radius: 12px; background: var(--bg-f7f7fc); }
.vis-flow__steps .is-active span { background: var(--bg-f1efff); }
.vis-flow__steps b { display: block; font-size: 13.5px; color: var(--navy); }
.vis-flow__steps small { font-size: 11.5px; color: var(--muted); }

.vis-web__body { padding: 20px; }
.vis-web__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vis-web__kpis div { padding: 12px; border-radius: 12px; background: var(--bg-f7f7fc); }
.vis-web__kpis small { display: block; font-size: 10.5px; color: var(--muted); }
.vis-web__kpis b { display: block; margin-top: 2px; font-size: 17px; font-weight: 800; color: var(--navy); }
.vis-web__kpis em { font-size: 11px; font-style: normal; font-weight: 700; color: var(--tx-1f9d6b); }
.vis-web__chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 170px;
  margin-top: 14px;
  padding: 16px 14px 0;
  border-radius: 12px;
  background: repeating-linear-gradient(0deg, var(--bg-f1f2f8) 0 1px, transparent 1px 34px), var(--bg-fbfbfe);
}
.vis-web__chart span { flex: 1; height: var(--h); border-radius: 8px 8px 0 0; background: linear-gradient(180deg, #7b6bff, #4f63f0); opacity: .9; }
.vis-web__chart span:nth-child(odd) { background: linear-gradient(180deg, var(--bg-b9b1ff), #8f9dfa); }

.vis-phone {
  position: relative;
  width: 250px;
  margin: 0 auto;
  padding: 12px;
  border-radius: 38px;
  background: #0f1a3c;
  box-shadow: 0 30px 60px rgba(15, 26, 60, .3);
}
.vis-phone__notch { position: absolute; top: 12px; left: 50%; z-index: 1; width: 90px; height: 22px; border-radius: 0 0 14px 14px; background: #0f1a3c; transform: translateX(-50%); }
.vis-phone__screen { display: flex; flex-direction: column; gap: 12px; min-height: 440px; padding: 40px 16px 14px; border-radius: 28px; background: linear-gradient(180deg, var(--bg-f3f1ff) 0%, var(--surface) 45%); }
.vis-phone__hello { font-size: 15px; font-weight: 800; color: var(--navy); }
.vis-phone__card { padding: 14px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #6d5dfc, #4f63f0); box-shadow: 0 12px 24px rgba(79, 99, 240, .3); }
.vis-phone__card small { display: block; font-size: 11px; opacity: .85; }
.vis-phone__card b { display: block; font-size: 20px; }
.vis-phone__progress { display: block; height: 6px; margin: 10px 0 6px; border-radius: 6px; background: rgba(255, 255, 255, .25); }
.vis-phone__progress i { display: block; height: 100%; border-radius: 6px; background: var(--surface); }
.vis-phone__card em { font-size: 11px; font-style: normal; opacity: .9; }
.vis-phone__list { display: flex; flex-direction: column; gap: 8px; }
.vis-phone__list span { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; font-size: 11px; font-weight: 600; color: var(--navy); background: var(--surface); box-shadow: 0 4px 12px rgba(40, 30, 110, .07); }
.vis-phone__list i { width: 8px; height: 8px; border-radius: 50%; background: #1f9d6b; }
.vis-phone__list em { margin-left: auto; font-size: 10px; font-style: normal; color: var(--tx-1f9d6b); }
.vis-phone__list .is-next i { background: #5b50ec; }
.vis-phone__list .is-next em { color: var(--tx-5b50ec); }
.vis-phone__tabbar { display: flex; justify-content: space-around; margin-top: auto; padding: 12px 8px 4px; border-top: 1px solid var(--bd-eceef6); }
.vis-phone__tabbar i { width: 22px; height: 22px; border-radius: 7px; background: var(--bg-e6e8f2); }
.vis-phone__tabbar i.is-on { background: linear-gradient(135deg, #6d5dfc, #4f63f0); }

.vis-hub { position: relative; height: 360px; }
.vis-hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.vis-hub__lines path { fill: none; stroke: var(--bg-b9b1ff); stroke-width: 2; stroke-dasharray: 6 6; animation: hub-dash 1.2s linear infinite; }
@keyframes hub-dash { to { stroke-dashoffset: -12; } }
.vis-hub__core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 150px;
  padding: 16px 12px;
  border-radius: 20px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #6d5dfc, #4f63f0);
  box-shadow: 0 0 0 10px rgba(109, 93, 252, .12), 0 20px 40px rgba(79, 99, 240, .35);
  transform: translate(-50%, -50%);
}
.vis-hub__core img { width: 38px; height: 38px; padding: 5px; border-radius: 10px; background: var(--surface); }
.vis-hub__core b { margin-top: 8px; font-size: 14px; }
.vis-hub__core small { font-size: 11px; opacity: .85; }
.vis-hub__node {
  position: absolute;
  padding: 9px 14px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--navy);
  background: var(--surface);
  border: 1px solid var(--bd-e6e4fb);
  box-shadow: 0 10px 24px rgba(40, 30, 110, .12);
  transform: translate(-50%, -50%);
}
.vis-hub__node.n1 { left: 17.5%; top: 16.7%; }
.vis-hub__node.n2 { left: 82.5%; top: 16.7%; }
.vis-hub__node.n3 { left: 12%; top: 50%; }
.vis-hub__node.n4 { left: 88%; top: 50%; }
.vis-hub__node.n5 { left: 17.5%; top: 83.3%; }
.vis-hub__node.n6 { left: 82.5%; top: 83.3%; }

.vis-support { padding: 20px; }
.vis-support__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.vis-support__head b { font-size: 15px; color: var(--navy); }
.vis-support__head span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--tx-1f9d6b); background: var(--bg-e7f7f0); }
.vis-support__head span i { width: 7px; height: 7px; border-radius: 50%; background: #1f9d6b; box-shadow: 0 0 0 3px rgba(31, 157, 107, .2); }
.vis-support ul { display: flex; flex-direction: column; gap: 10px; }
.vis-support li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg-f7f7fc); }
.vis-support li b { display: block; font-size: 13px; color: var(--navy); }
.vis-support li small { font-size: 11px; color: var(--muted); }
.vis-support em { flex: none; order: 2; margin-left: auto; padding: 4px 9px; border-radius: 999px; font-size: 10.5px; font-style: normal; font-weight: 700; }
.vis-support em.ok { color: var(--tx-1f9d6b); background: var(--bg-e7f7f0); }
.vis-support em.prog { color: var(--tx-5b50ec); background: var(--bg-efedff); }

/* Tech strip */
.srvtech { padding: 40px 0; background: var(--surface); border-top: 1px solid var(--bd-eceef6); border-bottom: 1px solid var(--bd-eceef6); }
.srvtech__label { margin-bottom: 16px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; text-align: center; color: var(--muted); }
.srvtech__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.srvtech__list li {
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  background: var(--bg-soft);
  border: 1px solid var(--bd-eceef6);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.srvtech__list li:hover { color: var(--tx-5b50ec); border-color: var(--bd-cfc9fb); background: var(--bg-f5f4fe); }

/* Process */
.srvflow { padding: 64px 0 68px; background: var(--bg-soft); }
.srvflow__steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; counter-reset: none; }
.srvflow__steps::before { content: ""; position: absolute; top: 48px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, var(--bg-cfc9fb), var(--bg-b9c9ff)); }
.srvflow__steps li {
  position: relative;
  padding: 24px 18px 22px;
  border-radius: 16px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.srvflow__steps li:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(40, 30, 110, .12); }
.srvflow__steps li:hover .srvflow__ico { color: #fff; background: linear-gradient(135deg, #6d5dfc, #4f63f0); }
.srvflow__ico { margin: 0 auto; }
.srvflow__steps small { display: block; margin-top: 14px; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-6b5ce7); }
.srvflow__steps h3 { margin-top: 4px; font-size: 15.5px; font-weight: 700; color: var(--navy); }
.srvflow__steps p { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--text); }

/* Why */
.srvwhy {
  padding: 66px 0;
  color: #fff;
  background:
    radial-gradient(520px 300px at 90% 0%, rgba(109, 93, 252, .35), transparent 70%),
    radial-gradient(460px 280px at 0% 100%, rgba(79, 141, 247, .2), transparent 70%),
    var(--navy-bg);
}
.srvwhy__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.srvwhy .eyebrow { color: #b3a9ff; border-bottom-color: rgba(179, 169, 255, .5); }
.srvwhy .h2 { color: #fff; }
.srvwhy .grad-text { background-image: linear-gradient(90deg, #8fb0ff, var(--bg-b8a6ff)); }
.srvwhy .sub { color: rgba(230, 233, 255, .8); font-size: 14.5px; }
.srvwhy__partner { display: inline-flex; margin-top: 24px; }
.srvwhy__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.srvwhy__cards div {
  padding: 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.srvwhy__cards div:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .08); border-color: rgba(179, 169, 255, .4); }
.srvwhy__cards b { display: block; font-size: 16px; }
.srvwhy__cards b::before { content: ""; display: block; width: 26px; height: 3px; margin-bottom: 12px; border-radius: 3px; background: linear-gradient(90deg, #8fb0ff, var(--bg-b8a6ff)); }
.srvwhy__cards p { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: rgba(230, 233, 255, .75); }
.services-page .cta-wrap { padding: 40px 0 40px; }

@media (max-width: 1024px) {
  .srvover__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .srv__grid, .srvwhy__grid { grid-template-columns: 1fr; gap: 40px; }
  .srv--flip .srv__text { order: 0; }
  .srv__visual { max-width: 560px; width: 100%; margin: 0 auto; }
  .srvflow__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .srvflow__steps::before { display: none; }
}
@media (max-width: 680px) {
  .srvhero { padding: 26px 0 100px; }
  .srvhero__title { font-size: 32px; }
  .srvhero__lead { font-size: 14.5px; }
  .srvover__grid { grid-template-columns: 1fr; }
  .srv { padding: 48px 0; }
  .srv__list { grid-template-columns: 1fr; }
  .srv__visual { padding: 14px; }
  .vis-erp__apps img { width: 46px; height: 46px; }
  .vis-hub { height: 320px; }
  .vis-hub__node { padding: 7px 10px; font-size: 10.5px; }
  .vis-hub__core { width: 124px; }
  .vis-phone { width: 230px; }
  .srvflow, .srvwhy { padding: 48px 0; }
  .srvflow__steps { grid-template-columns: 1fr; }
  .srvwhy__cards { grid-template-columns: 1fr; }
}

/* ================= ABOUT PAGE ================= */
.abico {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  color: var(--tx-5b50ec);
  background: linear-gradient(135deg, var(--bg-efedff), var(--bg-e4ecff));
  transition: background .25s ease, color .25s ease;
}
.abico svg,
.abjourney__ico svg,
.abmv__ico svg,
.abhero__float-ico svg,
.abcred__badge--ico svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hero */
.abhero {
  position: relative;
  padding: 34px 0 90px;
  overflow: hidden;
  background:
    radial-gradient(560px 300px at 88% 10%, rgba(128, 108, 255, .16), transparent 70%),
    radial-gradient(520px 280px at 0% 100%, rgba(79, 141, 247, .12), transparent 70%),
    linear-gradient(180deg, var(--bg-f6f7fc) 0%, var(--bg-f2f1fb) 100%);
}
.abhero__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: center; }
.abhero__crumbs { justify-content: flex-start; margin-bottom: 18px; }
.abhero__title { font-size: 46px; line-height: 1.14; font-weight: 800; letter-spacing: -.025em; color: var(--navy); text-wrap: balance; }
.abhero__lead { max-width: 540px; margin-top: 18px; font-size: 15.5px; line-height: 1.7; color: var(--text); }
.abhero__tagline { margin-top: 14px; font-family: var(--hand); font-size: 28px; font-weight: 600; line-height: 1.1; color: var(--tx-5b50ec); }
.abhero__checks { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 22px; }
.abhero__checks li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--navy); }
.abhero__checks .ico { color: var(--tx-5b50ec); }
.abhero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.abhero__visual { position: relative; min-height: 440px; }
.abhero__glow {
  position: absolute;
  inset: 10% 6% 10% 14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(109, 93, 252, .35), transparent);
  filter: blur(30px);
}
.abhero__img { position: absolute; margin: 0; overflow: hidden; border-radius: 20px; background: var(--surface); box-shadow: 0 30px 60px rgba(40, 30, 110, .18); }
.abhero__img img { width: 100%; height: 100%; object-fit: cover; }
.abhero__img--main { top: 0; right: 0; width: 86%; aspect-ratio: 16 / 10.5; border: 6px solid var(--surface); }
.abhero__img--sub { left: 0; bottom: 0; width: 52%; aspect-ratio: 4 / 3; border: 6px solid var(--surface); }
.abhero__img--sub img { object-position: 62% center; }
.abhero__float {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 18px 40px rgba(40, 30, 110, .16);
  animation: op-float 5s ease-in-out infinite;
}
.abhero__float--partner { top: -16px; left: 8%; padding: 8px 12px; }
.abhero__float--partner img { width: auto; height: 46px; }
.abhero__float--loc { right: -10px; bottom: 36px; animation-delay: -2.5s; }
.abhero__float b { display: block; font-size: 13.5px; color: var(--navy); }
.abhero__float small { font-size: 11.5px; color: var(--muted); }
.abhero__float-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #6d5dfc, #4f63f0);
}
.abhero__float-ico svg { width: 20px; height: 20px; }

.abclients { border-bottom: 1px solid var(--bd-eceef6); }

/* Story + journey */
.abstory { padding: 76px 0; background: var(--bg-soft); scroll-margin-top: 60px; }
.abstory__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.abstory__text .h2 { margin-bottom: 18px; }
.abstory__text p { margin-top: 12px; font-size: 15px; line-height: 1.75; color: var(--text); }
.abstory__caps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.abstory__caps li {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tx-5b50ec);
  background: var(--surface);
  border: 1px solid var(--bd-dcd8fb);
}
.abjourney { padding: 30px 30px 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--bd-eceef6); box-shadow: 0 20px 44px rgba(28, 39, 90, .08); }
.abjourney__title { margin-bottom: 22px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--tx-6b5ce7); }
.abjourney__list { position: relative; display: flex; flex-direction: column; gap: 22px; }
.abjourney__list li { position: relative; display: flex; gap: 18px; }
.abjourney__list li:not(:last-child)::before { content: ""; position: absolute; left: 22px; top: 46px; bottom: -22px; width: 2px; background: linear-gradient(180deg, var(--bg-dcd8fb), var(--bg-b9c9ff)); }
.abjourney__ico {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: var(--tx-5b50ec);
  background: var(--surface);
  border: 2px solid var(--bd-dcd8fb);
}
.abjourney__list li.is-now .abjourney__ico { color: #fff; border-color: transparent; background: linear-gradient(135deg, #6d5dfc, #4f63f0); box-shadow: 0 0 0 6px rgba(109, 93, 252, .15); }
.abjourney__list small { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-6b5ce7); }
.abjourney__list h3 { margin-top: 2px; font-size: 16px; font-weight: 700; color: var(--navy); }
.abjourney__list p { margin-top: 4px; font-size: 13.5px; line-height: 1.6; color: var(--text); }

/* Mission, vision, values */
.abmission { padding: 76px 0; background: var(--surface); }
.abmv { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.abmv__card { position: relative; overflow: hidden; padding: 34px 36px; border-radius: 22px; }
.abmv__card small { display: block; margin-top: 18px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.abmv__card p { margin-top: 10px; font-size: 18px; font-weight: 600; line-height: 1.6; letter-spacing: -.005em; }
.abmv__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; }
.abmv__ico svg { width: 24px; height: 24px; }
.abmv__card--mission {
  color: #fff;
  background:
    radial-gradient(360px 220px at 100% 0%, rgba(143, 176, 255, .35), transparent 70%),
    linear-gradient(135deg, #6d5dfc 0%, #4f63f0 60%, #4f8df7 100%);
  box-shadow: 0 24px 50px rgba(79, 99, 240, .3);
}
.abmv__card--mission::after {
  content: "";
  position: absolute;
  inset: 0 0 0 50%;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.3px);
  background-size: 10px 10px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 80% 30%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 80% 30%, #000 20%, transparent 75%);
  pointer-events: none;
}
.abmv__card--mission .abmv__ico { color: #fff; background: rgba(255, 255, 255, .16); }
.abmv__card--mission small { color: rgba(255, 255, 255, .8); }
.abmv__card--vision { color: var(--navy); background: linear-gradient(135deg, var(--bg-f7f6ff), var(--bg-f0f4ff)); border: 1px solid var(--bd-dcd8fb); }
.abmv__card--vision .abmv__ico { color: #fff; background: linear-gradient(135deg, #6d5dfc, #4f63f0); }
.abmv__card--vision small { color: var(--tx-6b5ce7); }

.abvalues { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.abvalue { padding: 24px 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--bd-eceef6); box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.abvalue:hover { transform: translateY(-5px); border-color: var(--bd-cfc9fb); box-shadow: 0 18px 40px rgba(40, 30, 110, .12); }
.abvalue:hover .abico,
.abprin:hover .abico,
.abrole:hover .abico { color: #fff; background: linear-gradient(135deg, #6d5dfc, #4f63f0); }
.abvalue h3 { margin-top: 16px; font-size: 16px; font-weight: 700; color: var(--navy); }
.abvalue p { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--text); }

/* Principles */
.abprinciples { padding: 76px 0; background: var(--bg-soft); }
.abprin__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.abprin { position: relative; padding: 26px 24px 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--bd-eceef6); box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.abprin:hover { transform: translateY(-5px); border-color: var(--bd-cfc9fb); box-shadow: 0 18px 40px rgba(40, 30, 110, .12); }
.abprin__num { position: absolute; top: 18px; right: 22px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: #efedfd; transition: color .25s ease; }
.abprin:hover .abprin__num { color: #dcd8fb; }
.abprin h3 { margin-top: 16px; font-size: 16.5px; font-weight: 700; color: var(--navy); }
.abprin p { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--text); }

/* Credentials */
.abcred {
  padding: 76px 0;
  color: #fff;
  background:
    radial-gradient(520px 300px at 90% 0%, rgba(109, 93, 252, .35), transparent 70%),
    radial-gradient(460px 280px at 0% 100%, rgba(79, 141, 247, .2), transparent 70%),
    var(--navy-bg);
}
.abcred__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.abcred .eyebrow { color: #b3a9ff; border-bottom-color: rgba(179, 169, 255, .5); }
.abcred .h2 { color: #fff; }
.abcred .grad-text { background-image: linear-gradient(90deg, #8fb0ff, var(--bg-b8a6ff)); }
.abcred .sub { max-width: 460px; font-size: 14.5px; color: rgba(230, 233, 255, .8); }
.abcred__items { display: flex; flex-direction: column; gap: 14px; margin: 26px 0 28px; }
.abcred__item { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.abcred__item b { display: block; font-size: 15px; }
.abcred__item p { margin-top: 2px; font-size: 13px; line-height: 1.55; color: rgba(230, 233, 255, .72); }
.abcred__badge { display: grid; place-items: center; flex: none; width: 96px; height: 56px; padding: 6px 8px; border-radius: 12px; background: var(--surface); }
.abcred__badge img { width: auto; height: 100%; }
.abcred__badge--ico { color: #fff; background: linear-gradient(135deg, #6d5dfc, #4f63f0); }
.abcred__badge--ico svg { width: 26px; height: 26px; }
.btn--light { color: var(--navy); background: var(--surface); box-shadow: 0 10px 24px rgba(0, 0, 0, .2); }
.btn--light:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, .28); }
.abapps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.abapp { overflow: hidden; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.abapp:hover { transform: translateY(-5px); border-color: rgba(179, 169, 255, .45); background: rgba(255, 255, 255, .08); }
.abapp img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.abapp span { display: block; padding: 12px 14px 14px; }
.abapp b { display: block; font-size: 14px; }
.abapp small { font-size: 11.5px; color: rgba(230, 233, 255, .65); }

/* What we do */
.abdo { padding: 76px 0; background: var(--surface); }
.srvtile h3 { margin-top: 16px; font-size: 16.5px; font-weight: 700; line-height: 1.3; color: var(--navy); }

/* Team */
.abteam { padding: 76px 0; background: var(--bg-soft); }
.abteam__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.abteam__media { position: relative; }
.abteam__media::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--bg-e4e0ff), var(--bg-dfe8ff));
}
.abteam__frame {
  position: relative;
  aspect-ratio: 4 / 3.2;
  overflow: hidden;
  border-radius: 22px;
  background: var(--bg-e9ebf3);
  box-shadow: 0 26px 54px rgba(40, 30, 110, .16);
}
.abteam__scene { position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 16 / 9; translate: -47% 0; }
.abteam__photo,
.abteam__finger { position: absolute; inset: 0; width: 100%; height: 100%; }
.abteam__finger { z-index: 2; clip-path: ellipse(.7% 1.1% at 35.3% 64.8%); pointer-events: none; }
.abteam__screen {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 900px;
  height: 560px;
  transform-origin: 0 0;
  visibility: hidden;
}
.abteam__screen.is-ready { visibility: visible; }

.odash {
  position: relative;
  display: grid;
  grid-template-columns: 150px 1fr;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-f4f5fa);
  font-family: inherit;
  color: var(--tx-2d3350);
}
.odash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgba(var(--surface-rgb), 0) 45%, rgba(255, 255, 255, .28) 62%, rgba(var(--surface-rgb), 0) 80%);
  pointer-events: none;
}
.odash__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 20px;
  background: linear-gradient(180deg, #5b50ec, #4a45d8);
}
.odash__apps { display: grid; grid-template-columns: repeat(3, 7px); gap: 5px; margin-bottom: 10px; }
.odash__apps i { width: 7px; height: 7px; border-radius: 2px; background: rgba(var(--surface-rgb), .9); }
.odash__side > span:not(.odash__apps) { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 14px; }
.odash__side > span.is-on { background: rgba(255, 255, 255, .2); }
.odash__side img { width: 40px; height: 40px; padding: 6px; border-radius: 10px; background: var(--surface); }
.odash__body { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.odash__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 0 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--bd-e6e8f1);
}
.odash__nav > img { width: 30px; height: 30px; }
.odash__nav > b { font-size: 21px; font-weight: 800; color: var(--tx-1c2446); }
.odash__menu { display: flex; gap: 22px; margin-left: 16px; font-size: 15px; color: var(--tx-5a6180); }
.odash__menu em { font-style: normal; }
.odash__menu em.is-on { font-weight: 800; color: var(--tx-5b50ec); }
.odash__user { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.odash__user i { width: 18px; height: 18px; border-radius: 50%; background: var(--bg-dfe2ee); }
.odash__user span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #6d5dfc, #4f63f0); color: #fff; font-size: 13px; font-weight: 800; }
.odash__cp {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 66px;
  padding: 0 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--bd-e6e8f1);
}
.odash__crumb small { display: block; font-size: 13px; color: var(--tx-8a90a8); }
.odash__crumb b { font-size: 20px; font-weight: 800; }
.odash__search {
  display: flex;
  gap: 8px;
  flex: 1;
  max-width: 380px;
  margin-left: auto;
  padding: 7px;
  border: 1.5px solid var(--bd-dfe2ee);
  border-radius: 8px;
}
.odash__search span { padding: 5px 12px; border-radius: 6px; background: var(--bg-efedff); color: var(--tx-4b43c9); font-size: 13px; font-weight: 700; }
.odash__views { display: flex; gap: 6px; }
.odash__views i { width: 30px; height: 30px; border-radius: 7px; background: var(--bg-eef0f6); }
.odash__views i.is-on { background: #5b50ec; }
.odash__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 18px 24px 0; }
.odash__kpi { padding: 14px 18px; border-radius: 12px; background: var(--surface); border: 1px solid var(--bd-e6e8f1); }
.odash__kpi small { display: block; font-size: 14px; color: var(--tx-7a8099); }
.odash__kpi b { display: block; margin-top: 4px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--tx-1c2446); }
.odash__kpi em { font-style: normal; font-size: 13px; font-weight: 800; color: var(--tx-1fa971); }
.odash__main { flex: 1; display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; padding: 16px 24px 22px; min-height: 0; }
.odash__card { display: flex; flex-direction: column; padding: 16px 18px; border-radius: 12px; background: var(--surface); border: 1px solid var(--bd-e6e8f1); min-height: 0; }
.odash__card h5 { font-size: 16px; font-weight: 800; color: var(--tx-1c2446); }
.odash__bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 14px;
  padding-bottom: 2px;
  background: repeating-linear-gradient(0deg, var(--bg-eceef5) 0 1px, transparent 1px 25%);
}
.odash__bars i { flex: 1; height: var(--h); border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #6d5dfc, #4f8df7); }
.odash__bars i:nth-child(3n + 2) { background: linear-gradient(180deg, #8b7dff, #6d5dfc); }
.odash__card--side { align-items: center; }
.odash__card--side h5 { align-self: flex-start; }
.odash__donut {
  width: 130px;
  height: 130px;
  margin: 16px 0 14px;
  border-radius: 50%;
  background: conic-gradient(#5b50ec 0 48%, #4f8df7 48% 78%, #f5a524 78% 100%);
  -webkit-mask: radial-gradient(circle, transparent 46%, #000 47%);
  mask: radial-gradient(circle, transparent 46%, #000 47%);
}
.odash__card--side ul { display: flex; gap: 14px; font-size: 13px; font-weight: 600; color: var(--tx-5a6180); }
.odash__card--side li { display: flex; align-items: center; gap: 6px; }
.odash__card--side li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: #5b50ec; }
.odash__card--side li:nth-child(2)::before { background: #4f8df7; }
.odash__card--side li:nth-child(3)::before { background: #f5a524; }
.abteam__note {
  position: absolute;
  left: -18px;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 18px 40px rgba(40, 30, 110, .16);
  animation: op-float 5s ease-in-out infinite;
}
.abteam__note b { display: block; font-size: 13.5px; color: var(--navy); }
.abteam__note small { font-size: 11.5px; color: var(--muted); }
.abteam__text .sub { font-size: 14.5px; }
.abroles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.abrole { display: flex; gap: 14px; padding: 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--bd-eceef6); box-shadow: var(--shadow-sm); transition: transform .25s ease, border-color .25s ease; }
.abrole:hover { transform: translateY(-4px); border-color: var(--bd-cfc9fb); }
.abrole .abico { width: 42px; height: 42px; border-radius: 12px; }
.abrole .abico svg { width: 20px; height: 20px; }
.abrole h3 { font-size: 14.5px; font-weight: 700; color: var(--navy); }
.abrole p { margin-top: 3px; font-size: 12.5px; line-height: 1.55; color: var(--text); }

.abhire {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 56px;
  padding: 28px 32px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--bg-f6f5ff) 100%);
  border: 1px solid var(--bd-e6e4fb);
  box-shadow: var(--shadow-sm);
}
.abhire__ico { flex: none; width: 56px; height: 56px; border-radius: 16px; }
.abhire__ico svg { width: 26px; height: 26px; }
.abhire__text { flex: 1; min-width: 0; }
.abhire__tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary-text);
  background: var(--bg-efedff);
}
.abhire h3 { margin-top: 8px; font-size: 20px; font-weight: 700; color: var(--navy); }
.abhire p { max-width: 560px; margin-top: 4px; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.abhire__actions { display: flex; flex-wrap: wrap; gap: 12px; flex: none; }

/* Office */
.aboffice { padding: 76px 0 56px; background: var(--surface); }
.aboffice__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 22px; }
.aboffice__card { padding: 30px; border-radius: 20px; background: var(--bg-soft); border: 1px solid var(--bd-eceef6); }
.aboffice__logo { width: auto; height: 38px; margin-bottom: 22px; }
.aboffice__list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 22px; }
.aboffice__list li { display: flex; align-items: center; gap: 14px; }
.aboffice__list .abico { width: 40px; height: 40px; border-radius: 11px; background: var(--surface); box-shadow: var(--shadow-sm); }
.aboffice__list .abico svg { width: 19px; height: 19px; }
.aboffice__list small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.aboffice__list b,
.aboffice__list a { font-size: 14px; font-weight: 600; color: var(--navy); }
.aboffice__list a:hover { color: var(--primary-text); }
.aboffice__list i { margin: 0 4px; font-style: normal; color: #c3c7d6; }
.aboffice__map { overflow: hidden; min-height: 380px; border-radius: 20px; border: 1px solid var(--bd-eceef6); box-shadow: var(--shadow-sm); background: var(--bg-eef0f7); }
.aboffice__map iframe { display: block; width: 100%; height: 100%; min-height: 380px; border: 0; }
.about-page .cta-wrap { padding: 8px 0 40px; }
.about-page .h2,
.contact-page .h2 { text-wrap: balance; }

@media (max-width: 1024px) {
  .abhero__grid, .abstory__grid, .abcred__grid, .abteam__grid { grid-template-columns: 1fr; gap: 44px; }
  .abhero__visual { max-width: 600px; width: 100%; margin: 0 auto; }
  .abvalues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abprin__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abteam__media { max-width: 600px; width: 100%; margin: 0 auto; }
  .aboffice__grid { grid-template-columns: 1fr; }
  .abhire { flex-wrap: wrap; }
  .abhire__text { flex-basis: calc(100% - 78px); }
  .abhire__actions { padding-left: 78px; }
}
@media (max-width: 680px) {
  .abhire { flex-direction: column; align-items: flex-start; margin-top: 40px; padding: 24px 20px; }
  .abhire__text { flex-basis: auto; }
  .abhire__actions { padding-left: 0; }
  .abhero { padding: 26px 0 64px; }
  .abhero__title { font-size: 32px; }
  .abhero__lead { font-size: 14.5px; }
  .abhero__tagline { font-size: 24px; }
  .abhero__visual { min-height: 320px; }
  .abhero__img--main { width: 92%; }
  .abhero__img--sub { width: 56%; }
  .abhero__float--loc { right: 0; bottom: 8px; padding: 10px 12px; }
  .abhero__float--partner img { height: 36px; }
  .abstory, .abmission, .abprinciples, .abcred, .abdo, .abteam { padding: 52px 0; }
  .aboffice { padding: 52px 0 40px; }
  .abjourney { padding: 24px 20px 20px; }
  .abmv { grid-template-columns: 1fr; }
  .abmv__card { padding: 26px 24px; }
  .abmv__card p { font-size: 16px; }
  .abvalues, .abprin__grid, .abroles { grid-template-columns: 1fr; }
  .abapps { gap: 12px; }
  .abteam__media::before { inset: 12px -10px -12px 12px; }
  .abteam__note { left: 8px; bottom: 14px; }
  .aboffice__card { padding: 24px 20px; }
  .aboffice__map, .aboffice__map iframe { min-height: 300px; }
}

/* ================= CONTACT PAGE ================= */
.cthero {
  padding: 40px 0 128px;
  text-align: center;
  background:
    radial-gradient(560px 300px at 85% 0%, rgba(128, 108, 255, .16), transparent 70%),
    radial-gradient(520px 280px at 10% 100%, rgba(79, 141, 247, .12), transparent 70%),
    linear-gradient(180deg, var(--bg-f6f7fc) 0%, var(--bg-f2f1fb) 100%);
}
.cthero__title { font-size: 46px; line-height: 1.14; font-weight: 800; letter-spacing: -.025em; color: var(--navy); text-wrap: balance; }
.cthero__lead { max-width: 640px; margin: 18px auto 0; font-size: 15.5px; line-height: 1.7; color: var(--text); }

.ctq__ico svg,
.ctinfo__ico svg,
.ico--stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ctq__ico svg.is-fill { stroke: none; }

.ctquick { position: relative; z-index: 2; margin-top: -84px; }
.ctquick__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ctq {
  display: flex;
  flex-direction: column;
  padding: 24px 22px 20px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
  box-shadow: 0 16px 38px rgba(28, 39, 90, .08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ctq:hover { transform: translateY(-6px); border-color: var(--bd-cfc9fb); box-shadow: 0 22px 46px rgba(40, 30, 110, .14); }
.ctq__ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  color: var(--tx-5b50ec);
  background: linear-gradient(135deg, var(--bg-efedff), var(--bg-e4ecff));
  transition: background .25s ease, color .25s ease;
}
.ctq__ico svg { width: 23px; height: 23px; }
.ctq:hover .ctq__ico { color: #fff; background: linear-gradient(135deg, #6d5dfc, #4f63f0); }
.ctq--wa .ctq__ico { color: var(--tx-1faa59); background: var(--bg-e6f8ee); }
.ctq--wa:hover .ctq__ico { color: #fff; background: #25d366; }
.ctq small { margin-top: 16px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.ctq b { margin-top: 2px; font-size: 16px; font-weight: 700; color: var(--navy); overflow-wrap: anywhere; }
.ctq__nums { display: flex; flex-direction: column; margin-top: 2px; }
.ctq__nums a { font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--navy); transition: color .2s ease; }
.ctq__nums a:hover { color: var(--tx-1faa59); }
.ctq__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; font-size: 13px; font-weight: 600; color: var(--link); transition: gap .2s ease; }
.ctq:hover .ctq__more { gap: 12px; }
.ctq__more .ico { width: 14px; height: 14px; }

/* Form */
.ctmain { padding: 64px 0 76px; background: var(--surface); scroll-margin-top: 70px; }
.ctmain__grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: 28px; align-items: start; }
.ctform-card { padding: 36px 38px; border-radius: 22px; background: var(--surface); border: 1px solid var(--bd-eceef6); box-shadow: 0 20px 48px rgba(28, 39, 90, .08); }
.ctform-card__head .sub { font-size: 14.5px; }
.ctform { display: flex; flex-direction: column; gap: 18px; margin-top: 26px; }
.ctform[hidden] { display: none; }
.ctform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ctfield { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ctfield label,
.ctfield legend { font-size: 13px; font-weight: 600; color: var(--navy); }
.ctfield__req { color: var(--tx-e5484d); }
.ctfield input,
.ctfield select,
.ctfield textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  color: var(--navy);
  background: var(--bg-f8f9fc);
  border: 1.5px solid var(--bd-e3e6f0);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ctfield select {
  appearance: none;
  padding-right: 40px;
  cursor: pointer;
  background: var(--bg-f8f9fc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7390' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;
}
.ctfield textarea { min-height: 128px; resize: vertical; }
.ctfield input::placeholder,
.ctfield textarea::placeholder { color: var(--tx-9aa1b8); }
.ctfield input:hover,
.ctfield select:hover,
.ctfield textarea:hover { border-color: var(--bd-cfd3e3); }
.ctfield input:focus,
.ctfield select:focus,
.ctfield textarea:focus { outline: none; background-color: var(--surface); border-color: #6d5dfc; box-shadow: 0 0 0 4px rgba(109, 93, 252, .14); }
.ctfield.is-invalid input,
.ctfield.is-invalid select,
.ctfield.is-invalid textarea { border-color: #e5484d; box-shadow: 0 0 0 4px rgba(229, 72, 77, .1); }
.ctfield__err { min-height: 0; font-size: 12px; font-weight: 500; color: var(--tx-e5484d); }
.ctfield__err:empty { display: none; }

.ctchips { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
.ctchips legend { float: left; width: 100%; margin-bottom: 8px; }
.ctchips label { position: relative; cursor: pointer; }
.ctchips input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.ctchips span {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-f8f9fc);
  border: 1.5px solid var(--bd-e3e6f0);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.ctchips label:hover span { border-color: var(--bd-cfc9fb); }
.ctchips input:checked + span { color: var(--tx-5b50ec); background: var(--bg-f1efff); border-color: #6d5dfc; }
.ctchips input:focus-visible + span { box-shadow: 0 0 0 4px rgba(109, 93, 252, .18); }

.ctform__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.ctform__actions .btn { flex: 1 1 200px; }
.ctform__actions .ico { width: 18px; height: 18px; }
.ctform__note { font-size: 12.5px; color: var(--muted); }

.ctdone { padding: 40px 10px 16px; text-align: center; }
.ctdone[hidden] { display: none; }
.ctdone__ico { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; color: var(--tx-1f9d6b); background: var(--bg-e7f7f0); box-shadow: 0 0 0 10px rgba(31, 157, 107, .08); }
.ctdone__ico .ico { width: 38px; height: 38px; }
.ctdone h3 { margin-top: 22px; font-size: 22px; font-weight: 800; color: var(--navy); }
.ctdone p { max-width: 420px; margin: 8px auto 22px; font-size: 14.5px; line-height: 1.7; color: var(--text); }
.ctdone h3:focus { outline: none; }
.ctform__note a { color: var(--primary-text); font-weight: 600; }

/* Secure forms: honeypot, Turnstile slot, status */
.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.turnstile-box:empty { display: none; }
.turnstile-box { max-width: 100%; }
.form-status {
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--tx-b4232a);
  background: var(--bg-fdeeee);
  border: 1px solid var(--bd-f6caca);
}
.form-status[hidden] { display: none; }
form[aria-busy="true"] [data-submit] { opacity: .7; cursor: progress; }

/* Book a demo */
.dmmods { gap: 8px; }
.dmmods span { padding: 7px 14px; font-size: 12.5px; }
.dmmods .ctfield__err { width: 100%; }
.dmmods legend .ctfield__req { display: inline; padding: 0; font-size: inherit; color: var(--tx-e5484d); background: none; border: 0; }
.demo-page div.cthelp__opt,
.careers-page div.cthelp__opt { cursor: default; }
.demo-page div.cthelp__opt:hover,
.careers-page div.cthelp__opt:hover { transform: none; }

/* Side */
.ctside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
.cthelp { padding: 24px; border-radius: 20px; background: var(--bg-soft); border: 1px solid var(--bd-eceef6); }
.cthelp__title { margin-bottom: 14px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--tx-6b5ce7); }
.cthelp__opt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, border-color .2s ease;
}
.cthelp__opt + .cthelp__opt { margin-top: 10px; }
.cthelp__opt:hover { transform: translateX(4px); border-color: var(--bd-cfc9fb); }
.cthelp__opt:hover .ctq__ico { color: #fff; background: linear-gradient(135deg, #6d5dfc, #4f63f0); }
.cthelp__opt .ctq__ico { width: 42px; height: 42px; border-radius: 12px; }
.cthelp__opt .ctq__ico svg { width: 20px; height: 20px; }
.cthelp__opt b { display: block; font-size: 14px; color: var(--navy); }
.cthelp__opt small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.cthelp__arrow { margin-left: auto; color: #b3aefc; transition: color .2s ease; }
.cthelp__opt:hover .cthelp__arrow { color: var(--tx-5b50ec); }

.ctinfo {
  padding: 26px 24px;
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(320px 200px at 100% 0%, rgba(109, 93, 252, .45), transparent 70%),
    var(--navy-bg);
}
.ctinfo__list { display: flex; flex-direction: column; gap: 16px; }
.ctinfo__list li { display: flex; gap: 14px; }
.ctinfo__ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; color: #c9c1ff; background: rgba(255, 255, 255, .08); }
.ctinfo__ico svg { width: 18px; height: 18px; }
.ctinfo__list small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(230, 233, 255, .6); }
.ctinfo__list b { font-size: 13.5px; font-weight: 600; line-height: 1.55; }
.ctinfo__list a:hover { color: #c9c1ff; }
.ctinfo__wa { width: 100%; margin-top: 22px; color: #fff; background: #25d366; box-shadow: 0 10px 22px rgba(37, 211, 102, .25); }
.ctinfo__wa:hover { box-shadow: 0 14px 28px rgba(37, 211, 102, .35); }
.ctinfo__wa .ico { width: 18px; height: 18px; }
.ctinfo__partner { display: flex; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); }

/* Steps, map, faq */
.ctflow .srvflow__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ctflow .srvflow__steps::before { left: 12%; right: 12%; }
.ctmap { padding: 72px 0; background: var(--surface); }
.ctmap__frame { position: relative; overflow: hidden; height: 420px; border-radius: 22px; border: 1px solid var(--bd-eceef6); box-shadow: var(--shadow); background: var(--bg-eef0f7); }
.ctmap__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.ctmap__card {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 300px;
  padding: 22px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 20px 44px rgba(28, 39, 90, .18);
}
.ctmap__card img { width: auto; height: 32px; }
.ctmap__card p { margin: 14px 0 16px; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.ctmap__card p b { display: block; font-size: 14.5px; color: var(--navy); }
.ctfaq { background: var(--bg-soft); }
.ctfaq .faq { background: var(--surface); }

@media (max-width: 1024px) {
  .ctquick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctmain__grid { grid-template-columns: 1fr; }
  .ctside { position: static; display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .ctflow .srvflow__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .cthero { padding: 26px 0 100px; }
  .cthero__title { font-size: 32px; }
  .cthero__lead { font-size: 14.5px; }
  .ctquick { margin-top: -70px; }
  .ctquick__grid { grid-template-columns: 1fr; gap: 12px; }
  .ctq { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; padding: 16px; }
  .ctq__ico { grid-row: span 2; width: 44px; height: 44px; }
  .ctq small { margin-top: 0; }
  .ctq__more { display: none; }
  .ctmain { padding: 44px 0 52px; }
  .ctform-card { padding: 26px 20px; border-radius: 18px; }
  .ctform__row { grid-template-columns: 1fr; }
  .ctside { grid-template-columns: 1fr; }
  .ctflow .srvflow__steps { grid-template-columns: 1fr; }
  .ctmap { padding: 48px 0; }
  .ctmap__frame { height: auto; display: flex; flex-direction: column; }
  .ctmap__frame iframe { height: 280px; }
  .ctmap__card { position: static; width: auto; border-radius: 0; box-shadow: none; }
}
/* ================= CASE STUDIES PAGE ================= */
.cases-page .h2 { text-wrap: balance; }

.cshero {
  position: relative;
  padding: 34px 0 72px;
  overflow: hidden;
  background:
    radial-gradient(560px 300px at 88% 10%, rgba(128, 108, 255, .16), transparent 70%),
    radial-gradient(520px 280px at 0% 100%, rgba(79, 141, 247, .12), transparent 70%),
    linear-gradient(180deg, var(--bg-f6f7fc) 0%, var(--bg-f2f1fb) 100%);
}
.cshero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; }
.cshero__crumbs { justify-content: flex-start; margin-bottom: 18px; }
.cshero__title { margin-top: 6px; font-size: 50px; line-height: 1.1; font-weight: 800; letter-spacing: -.025em; color: var(--navy); }
.cshero__lead { max-width: 520px; margin-top: 18px; font-size: 15.5px; line-height: 1.7; color: var(--text); }
.cshero__logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(var(--surface-rgb), .6);
  border: 1px solid var(--bd-e4e1fb);
  box-shadow: 0 20px 50px rgba(40, 30, 110, .08);
  backdrop-filter: blur(6px);
}
.cshero__logo {
  display: grid;
  place-items: center;
  height: 96px;
  padding: 16px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.cshero__logo img { max-width: 100%; max-height: 52px; width: auto; height: auto; object-fit: contain; }
.cshero__logo:hover { transform: translateY(-4px); border-color: var(--bd-cfc9fb); box-shadow: 0 14px 30px rgba(40, 30, 110, .12); }
.cshero__logos .cshero__logo:nth-child(2) { animation: op-float 6s ease-in-out infinite; }
.cshero__logos .cshero__logo:nth-child(6) { animation: op-float 7s ease-in-out 1s infinite; }

/* Toolbar */
.cslist { padding: 0 0 90px; }
.cstools {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 20px;
  align-items: center;
  margin-top: -34px;
  margin-bottom: 34px;
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
  box-shadow: 0 16px 38px rgba(28, 39, 90, .08);
}
.cssearch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--bg-soft);
  border: 1.5px solid transparent;
  color: var(--muted);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.cssearch .ico { width: 18px; height: 18px; }
.cssearch:focus-within { background: var(--surface); border-color: var(--bd-b9b2f8); box-shadow: 0 0 0 4px rgba(91, 80, 236, .1); color: var(--primary-text); }
.cssearch input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  color: var(--navy);
}
.cssearch input::placeholder { color: var(--tx-9aa0b8); }
.cssearch input::-webkit-search-cancel-button { display: none; }
.cssearch__clear {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--bg-e4e1fb);
  color: var(--primary-text);
  cursor: pointer;
}
.cssearch__clear[hidden] { display: none; }
.cssearch__clear .ico { width: 13px; height: 13px; }
.cssearch__clear:hover { background: var(--primary); color: #fff; }
.cscount { grid-column: 2; grid-row: 1; justify-self: end; font-size: 14px; color: var(--muted); white-space: nowrap; }
.cscount b { font-size: 20px; font-weight: 800; color: var(--navy); margin-right: 2px; }
.csfilters { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.csfilters__ico { width: 18px; height: 18px; margin-right: 4px; color: var(--primary-text); }
.csfilter {
  height: 36px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--bd-e2e4f0);
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.csfilter:hover { border-color: var(--bd-b9b2f8); color: var(--primary-text); }
.csfilter.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(90deg, #6d5dfc, #4f63f0);
  box-shadow: 0 8px 18px rgba(91, 80, 236, .28);
}

/* Cards */
.csgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.cscard {
  display: flex;
  flex-direction: column;
  scroll-margin-top: 110px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.cscard[hidden] { display: none; }
.cscard:hover { transform: translateY(-6px); border-color: var(--bd-dcd8fb); box-shadow: 0 24px 50px rgba(40, 30, 110, .12); }
.cscard:target { border-color: var(--bd-b9b2f8); box-shadow: 0 0 0 4px rgba(91, 80, 236, .14), 0 24px 50px rgba(40, 30, 110, .12); }
.cscard__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-eef0f8); }
.cscard__media > img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.cscard:hover .cscard__media > img { transform: scale(1.05); }
.cscard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(15, 26, 60, .45) 100%);
  pointer-events: none;
}
.cscard__logo {
  position: absolute;
  z-index: 1;
  left: 18px;
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  padding: 10px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(15, 26, 60, .22);
}
.cscard__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.cscard__logo:has(.is-wide) { width: 112px; }
.cscard__body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; }
.cscard__tag {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bg-efedff);
  color: var(--primary-text);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.cscard__name { margin-top: 12px; font-size: 23px; line-height: 1.25; font-weight: 800; letter-spacing: -.015em; color: var(--navy); }
.cscard__loc { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.cscard__loc .ico { width: 15px; height: 15px; color: var(--primary-text); }
.cscard__sum { margin-top: 12px; font-size: 14.5px; line-height: 1.7; color: var(--text); }
.cscard__group { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--bd-e2e4f0); }
.cscard__group h3 { margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }

.cschips { display: flex; flex-wrap: wrap; gap: 7px; }
.cschips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 11px;
  border-radius: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--bd-eceef6);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}
.cschips li img { width: 16px; height: 16px; flex: none; }
.cschips--dev li { background: var(--bg-f3f1ff); border-color: var(--bd-e4e1fb); color: var(--tx-4b43c9); }
.cschips .is-extra { display: none; }
.cschips.is-open .is-extra { display: inline-flex; animation: cs-pop .25s ease both; }
.cschips li.cschips__toggle { padding: 0; border: 0; background: none; }
.cschips__toggle button {
  min-height: 30px;
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px dashed var(--bd-b9b2f8);
  background: var(--surface);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary-text);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cschips__toggle button:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
@keyframes cs-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

.cscard__hl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--bg-f6f5ff), var(--bg-eff4ff));
}
.cscard__hl li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--navy); }
.cscard__hl .ico { width: 18px; height: 18px; color: var(--primary-text); }
.cscard__cta { align-self: flex-start; margin-top: 22px; gap: 8px; }
.cscard__cta .ico { transition: transform .2s ease; }
.cscard__cta:hover .ico { transform: translateX(3px); }

.csempty {
  max-width: 460px;
  margin: 10px auto 0;
  padding: 46px 30px;
  text-align: center;
  border-radius: 20px;
  background: var(--surface);
  border: 1px dashed var(--bd-cfc9fb);
}
.csempty[hidden] { display: none; }
.csempty__ico {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--bg-efedff);
  color: var(--primary-text);
}
.csempty__ico .ico { width: 26px; height: 26px; }
.csempty h3 { margin-top: 16px; font-size: 20px; font-weight: 800; color: var(--navy); }
.csempty p { margin: 8px 0 20px; font-size: 14.5px; line-height: 1.6; color: var(--text); }

.cases-page .cta-wrap { padding: 0 0 40px; }

@media (max-width: 1024px) {
  .cshero__grid { grid-template-columns: 1fr; gap: 40px; }
  .cshero__title { font-size: 42px; }
  .csgrid { gap: 22px; }
  .cscard__body { padding: 22px; }
  .cscard__hl { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .csgrid { grid-template-columns: 1fr; }
  .cscard__hl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .cshero { padding: 26px 0 64px; }
  .cshero__title { font-size: 34px; }
  .cshero__lead { font-size: 14.5px; }
  .cshero__logos { gap: 10px; padding: 12px; }
  .cshero__logo { height: 74px; padding: 12px; }
  .cshero__logo img { max-height: 40px; }
  .cstools { grid-template-columns: 1fr; padding: 14px; }
  .cscount { grid-column: auto; grid-row: auto; justify-self: start; order: -1; }
  .csfilters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px; padding: 2px 14px 4px; scrollbar-width: none; }
  .csfilters::-webkit-scrollbar { display: none; }
  .csfilter { flex: none; }
  .cscard__name { font-size: 20px; }
  .cscard__hl { grid-template-columns: 1fr; }
  .cscard__cta { align-self: stretch; }
}

/* ================= CAREERS ================= */
.careers-page .cthero { padding-bottom: 72px; }
.crhero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

.crjobs { padding: 72px 0 76px; background: var(--surface); scroll-margin-top: 70px; }
.crjobs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.crjob {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 22px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.crjob:hover { transform: translateY(-5px); border-color: var(--bd-cfc9fb); box-shadow: 0 20px 44px rgba(40, 30, 110, .12); }
.crjob__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.crjob h3 { font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--navy); }
.crjob__tag {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary-text);
  background: var(--bg-efedff);
}
.crjob__tag--intern { color: var(--tx-2f6fe0); background: var(--bg-e7efff); }
.crjob__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.crjob__meta li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.crjob__meta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.crjob > p { margin-top: 14px; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.crjob__req { display: grid; gap: 8px; margin: 16px 0 22px; padding-top: 16px; border-top: 1px dashed var(--bd-e3e1f7); }
.crjob__req li { position: relative; padding-left: 22px; font-size: 13px; line-height: 1.5; color: var(--navy-2); }
.crjob__req li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6d5dfc, #4f63f0);
}
.crjob__req li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 6px;
  height: 3.5px;
  border-left: 1.8px solid var(--surface);
  border-bottom: 1.8px solid var(--surface);
  transform: rotate(-45deg);
}
.crjob__apply { align-self: flex-start; margin-top: auto; gap: 8px; }
.crjob__apply .ico { transition: transform .2s ease; }
.crjob__apply:hover .ico { transform: translateX(3px); }
.crjob--open {
  align-items: flex-start;
  border: 1px dashed var(--bd-b9b2f8);
  background: linear-gradient(135deg, var(--bg-f6f5ff), var(--bg-eff4ff));
  box-shadow: none;
}
.crjob--open h3 { margin-top: 18px; }
.crjob--open > p { margin-bottom: 22px; }

.crrole {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  padding: 34px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
  box-shadow: var(--shadow);
}
.crrole__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.crrole__close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-text);
  background: var(--bg-efedff);
}
.crrole__close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.crrole.is-closed .crrole__close { color: var(--muted); background: var(--bg-f0f1f6); }
.crrole__title { margin-top: 16px; font-size: 28px; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; color: var(--navy); }
.crrole__alt { margin-top: 2px; font-size: 16px; font-weight: 600; color: var(--primary-text); }
.crrole__lead { margin-top: 16px; font-size: 14.5px; line-height: 1.7; color: var(--text); }
.crrole__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.crrole__group { padding: 20px 20px 18px; border-radius: 16px; background: var(--bg-soft); border: 1px solid var(--bd-eceef6); }
.crrole__group--wide { grid-column: 1 / -1; }
.crrole__group--learn { background: linear-gradient(135deg, var(--bg-f6f5ff), var(--bg-eff4ff)); border-color: var(--bd-e3e0fb); }
.crrole__group h4 { font-size: 14.5px; font-weight: 700; color: var(--navy); }
.crrole__group .crjob__req { margin: 12px 0 0; padding-top: 12px; }
.crrole__group--learn .crjob__req { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.crjob__req--plus li::before { background: var(--bg-e4e1fc); }
.crjob__req--plus li::after { border-color: var(--primary); }
.crrole__side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
.crrole__poster { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--bd-eceef6); box-shadow: var(--shadow); }
.crrole__cta { display: flex; flex-direction: column; gap: 10px; }
.crrole__cta[hidden], .crrole__closed[hidden] { display: none; }
.crrole__apply { justify-content: center; gap: 8px; }
.crrole__cta p { font-size: 13px; text-align: center; color: var(--muted); }
.crrole__cta a { font-weight: 600; color: var(--primary-text); }
.crrole__cta a:hover { text-decoration: underline; }
.crrole__closed { padding: 14px 16px; border-radius: 14px; font-size: 13px; line-height: 1.6; color: var(--navy-2); background: var(--bg-f0f1f6); }

.crgeneral { flex-direction: row; align-items: center; gap: 18px; margin-top: 22px; }
.crgeneral:hover { transform: none; box-shadow: none; }
.crgeneral__text { flex: 1; min-width: 0; }
.crgeneral h3 { margin-top: 0; }
.crgeneral .crgeneral__text p { margin-top: 4px; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.crgeneral .crjob__apply { align-self: center; margin-top: 0; }

/* CV upload */
.crupload {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 18px;
  text-align: center;
  border: 1.5px dashed var(--bd-cfd3e3);
  border-radius: 14px;
  background: var(--bg-f8f7ff);
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.crupload:hover,
.crupload.is-drag { border-color: #6d5dfc; background: var(--bg-f1efff); }
.crupload:focus-within { border-color: #6d5dfc; box-shadow: 0 0 0 4px rgba(109, 93, 252, .14); }
.ctfield.is-invalid .crupload { border-color: #e5484d; }
.ctfield .crupload__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.ctfield .crupload__input:focus { box-shadow: none; }
.crupload.is-full { opacity: .55; }
.crupload.is-full .crupload__input { pointer-events: none; }
.crupload__ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #6d5dfc, #3b82f6);
  box-shadow: 0 8px 18px -8px rgba(109, 93, 252, .7);
}
.crupload__ico .ico { width: 22px; height: 22px; }
.crupload__text { font-size: 14px; color: var(--navy); }
.crupload__text b { color: var(--tx-6d5dfc); }
.crupload__rules { font-size: 12px; color: var(--tx-8a90a8); }
.crupload__hint { margin: 0; font-size: 12px; color: var(--tx-8a90a8); }
.crupload__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.crupload__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 12px;
  border: 1px solid var(--bd-e6e8f2);
  border-radius: 10px;
  background: var(--surface);
}
.crupload__fico { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; color: var(--tx-6d5dfc); background: var(--bg-efedff); }
.crupload__fico .ico { width: 17px; height: 17px; }
.crupload__name { flex: 1; min-width: 0; overflow: hidden; font-size: 13.5px; font-weight: 600; color: var(--navy); text-overflow: ellipsis; white-space: nowrap; }
.crupload__size { flex: none; font-size: 12px; color: var(--tx-8a90a8); }
.crupload__remove {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--tx-8a90a8);
  background: transparent;
  cursor: pointer;
}
.crupload__remove:hover,
.crupload__remove:focus-visible { color: var(--tx-e5484d); background: var(--bg-fdecec); outline: none; }
.crupload__remove .ico { width: 15px; height: 15px; }

@media (max-width: 1024px) {
  .crjobs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crrole { grid-template-columns: 1fr; gap: 28px; }
  .crrole__side { position: static; max-width: 460px; width: 100%; margin: 0 auto; }
}

@media (max-width: 680px) {
  .careers-page .cthero { padding-bottom: 56px; }
  .crjobs { padding: 56px 0 60px; }
  .crjobs__grid { grid-template-columns: 1fr; }
  .crjob__apply { align-self: stretch; }
  .crrole { padding: 22px 18px; }
  .crrole__title { font-size: 23px; }
  .crrole__groups, .crrole__group--learn .crjob__req { grid-template-columns: 1fr; }
  .crgeneral { flex-direction: column; align-items: flex-start; }
  .crgeneral .crjob__apply { align-self: stretch; }
}

/* ================= 404 ================= */
.nfhero {
  padding: 64px 0 88px;
  text-align: center;
  background:
    radial-gradient(560px 300px at 85% 0%, rgba(128, 108, 255, .16), transparent 70%),
    radial-gradient(520px 280px at 10% 100%, rgba(79, 141, 247, .12), transparent 70%),
    linear-gradient(180deg, var(--bg-f6f7fc) 0%, var(--bg-f2f1fb) 100%);
}
.nfhero__code {
  font-size: 132px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
  background: linear-gradient(90deg, #3d6cf0, #7b4be8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nfhero__title { margin-top: 10px; font-size: 38px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
.nfhero__lead { max-width: 520px; margin: 14px auto 0; font-size: 15.5px; line-height: 1.7; color: var(--text); }
.nfhero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.nflinks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 960px; margin: 56px auto 0; text-align: left; }
.nflink {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--bd-eceef6);
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.nflink:hover { transform: translateY(-4px); border-color: var(--bd-cfc9fb); box-shadow: 0 16px 34px rgba(40, 30, 110, .1); }
.nflink__ico { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; color: var(--primary-text); background: linear-gradient(135deg, var(--bg-efedff), var(--bg-e4ecff)); }
.nflink__ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nflink b { display: block; font-size: 14px; font-weight: 700; color: var(--navy); }
.nflink small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }

@media (max-width: 1024px) {
  .nflinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .nfhero { padding: 44px 0 64px; }
  .nfhero__code { font-size: 96px; }
  .nfhero__title { font-size: 28px; }
  .nflinks { grid-template-columns: 1fr; margin-top: 40px; }
}

/* ================= THEME TOGGLE & DARK MODE ================= */
.theme-toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  margin-right: 14px;
  padding: 0;
  border: 1px solid var(--bd-e6e4fb);
  border-radius: 10px;
  color: var(--navy-2);
  background: var(--bg-f1f2fb);
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.theme-toggle:hover { color: var(--primary-text); border-color: var(--bd-cfc9fb); }
.theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle__sun,
[data-theme="dark"] .theme-toggle__moon { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: block; }

.logo__img--dark,
[data-theme="dark"] .logo__img--light { display: none; }
[data-theme="dark"] .logo__img--dark { display: block; }

[data-theme="dark"] body { background: #0a0f26; }
[data-theme="dark"] .grad-text { background-image: linear-gradient(90deg, #7fa0ff 0%, #9b8cff 55%, #c09bff 100%); }
[data-theme="dark"] .header.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
[data-theme="dark"] ::selection { color: #fff; background: rgba(109, 93, 252, .6); }
[data-theme="dark"] .marquee__group img {
  padding: 6px 10px;
  border-radius: 10px;
  background: #f3f4fb;
}
[data-theme="dark"] :is(.cshero__logo, .cscard__logo, .wfeat__logo, .svapp__logo, .tcard__logo) {
  border-color: transparent;
  background: #f3f4fb;
}
[data-theme="dark"] .ctchips input:checked + span {
  color: #fff;
  background: rgba(109, 93, 252, .32);
}
[data-theme="dark"] main img[src$="odoo-learning-partner.webp"] {
  padding: 3px 6px;
  border-radius: 8px;
  background: #f3f4fb;
}

@media (max-width: 1024px) {
  .theme-toggle { margin-left: auto; margin-right: 12px; }
  .header__cta { margin-left: 0; }
}
@media (max-width: 680px) {
  .theme-toggle { margin-right: 0; }
  .burger { margin-left: 10px; }
}