/* ==========================================================================
   Bizentrix Technologies — Creaviq-Inspired Modern UI System
   Clean display typography (Funnel Display, Teko, Nova Slim), original
   Bizentrix Blue & Green brand palette, luxury glassmorphism, and curved sections.
   ========================================================================== */

:root {
  /* Brand — Blue */
  --blue-deep: #1e4e79;
  --blue: #2f7db8;
  --blue-light: #7fb9de;
  --blue-tint: #eaf3fa;

  /* Brand — Green */
  --green-deep: #2f6a2f;
  --green: #4f9d2e;
  --green-light: #8dc63f;
  --green-tint: #eef7e6;

  /* Neutrals (Light Mode default) */
  --ink: #0c1b2b;        /* primary deep navy/slate text */
  --ink-soft: #2d3d52;   /* charcoal secondary text */
  --muted: #64748b;      /* slate captions */
  --line: #e2e8f0;       /* hairline borders */
  --bg: #ffffff;         /* clean canvas */
  --bg-alt: #f4f8fb;     /* soft tinted section background */
  --bg-card: #ffffff;    /* card backgrounds */
  --bg-card-hover: #ffffff;
  --bg-dark: #0c1b2b;    /* deep obsidian blue sections */
  --bg-dark-2: #07111d;  /* true deep dark footer */

  /* Signature Brand Gradient (Blue -> Green) */
  --grad: linear-gradient(120deg, var(--blue-deep) 0%, var(--blue) 45%, var(--green-light) 100%);
  --grad-soft: linear-gradient(120deg, var(--blue-tint), var(--green-tint));

  /* Typography (Creaviq Style) */
  --font-head: "Funnel Display", "Segoe UI", system-ui, sans-serif;
  --font-body: "Funnel Display", "Segoe UI", system-ui, sans-serif;
  --font-metric: "Teko", sans-serif;
  --font-badge: "Nova Slim", system-ui;

  /* Spacing / shape (Creaviq Style) */
  --container: 1240px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-sm: 12px;
  --shadow-sm: 0 4px 14px rgba(20, 40, 70, 0.05);
  --shadow: 0 16px 44px rgba(20, 40, 70, 0.09);
  --shadow-lg: 0 28px 70px rgba(20, 40, 70, 0.16);
  --transition: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----------------------------- Theme Overrides --------------------------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #ffffff;
  --ink-soft: #c8d7e6;
  --muted: #8ba2b8;
  --line: rgba(255, 255, 255, 0.12);
  --bg: #07111d;
  --bg-alt: #0c1b2b;
  --bg-card: #0c1b2b;
  --bg-card-hover: #102337;
  --bg-dark: #050c15;
  --bg-dark-2: #03070d;
  --blue-tint: rgba(47, 125, 184, 0.18);
  --green-tint: rgba(141, 198, 63, 0.14);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow: 0 16px 44px rgba(0, 0, 0, 0.52);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.72);
}

html[data-theme="light"] {
  color-scheme: light;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--bg);
  transition: background-color 0.25s ease, color 0.25s ease;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overflow-wrap: break-word;
  word-break: break-word;
}
body.nav-open { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--blue); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--blue-deep); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  word-break: break-word;
}

h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); font-weight: 700; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 700; }
p { margin: 0 0 1.1rem; }

ul, ol { margin: 0 0 1.1rem; padding-left: 1.2rem; }

/* ----------------------------- Layout ----------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 28px);
}

.section { padding: clamp(56px, 8vw, 110px) 0; }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--bg-dark); color: #c7d6e4; }
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: #fff; }

/* Creaviq Curved Section Breaks */
.section--curved {
  border-radius: 36px;
  margin: 16px 12px;
  overflow: hidden;
}
@media (min-width: 940px) {
  .section--curved {
    border-radius: 54px;
    margin: 28px 24px;
  }
}

.section-head { max-width: 800px; margin-bottom: 52px; }
.section-head.center { margin-inline: auto; text-align: center; }

/* Creaviq Pill Eyebrow Badge (Brand Theme) */
.eyebrow,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-deep);
  background: var(--blue-tint);
  border: 1px solid rgba(47, 125, 184, 0.24);
  padding: 6px 16px;
  border-radius: 9999px;
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-light);
  box-shadow: 0 0 0 4px rgba(141, 198, 63, 0.24);
}
.section--dark .eyebrow {
  color: var(--green-light);
  background: rgba(141, 198, 63, 0.12);
  border-color: rgba(141, 198, 63, 0.28);
}
.section--dark .eyebrow::before {
  background: var(--green-light);
  box-shadow: 0 0 0 4px rgba(141, 198, 63, 0.28);
}

.lead { font-size: 1.18rem; color: var(--ink-soft); }
.section--dark .lead { color: #b6c7d7; }

/* ------------------------------ Grid ------------------------------------ */
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ----------------------------- Buttons ---------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 13px 28px;
  border-radius: 9999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition),
    background var(--transition), color var(--transition);
  white-space: nowrap;
}
.btn:focus-visible { outline: 3px solid var(--blue-light); outline-offset: 2px; }

.btn-primary {
  background-image: linear-gradient(115deg, #1e4e79 0%, #2f7db8 45%, #4f9d2e 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(47, 125, 184, 0.32);
}
.btn-primary:hover {
  background-image: linear-gradient(115deg, #2f7db8 0%, #1e4e79 55%, #4f9d2e 100%);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(47, 125, 184, 0.44);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-outline:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-2px);
}

.btn-ghost-light { background: rgba(255,255,255,0.10); color: #fff; border-color: rgba(255,255,255,0.28); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.18); color: #fff; }

.btn-lg { padding: 16px 34px; font-size: 1.05rem; }
.btn-sm { padding: 8px 16px; font-size: 0.86rem; }
.btn-ghost { background: transparent; color: var(--muted); border-color: transparent; }
.btn-ghost:hover { color: var(--ink); }
.btn-arrow::after {
  content: "→";
  font-size: 1.1em;
  line-height: 1;
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-arrow:hover::after {
  transform: translateX(4px);
}

/* ------------------------------ Cards ----------------------------------- */
.card {
  position: relative;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition),
    border-color var(--transition);
  height: 100%;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 50px rgba(20, 40, 70, 0.14);
  border-color: rgba(47, 125, 184, 0.32);
}

.card-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: var(--grad-soft);
  color: var(--blue-deep);
  margin-bottom: 20px;
}
.card-icon svg { width: 28px; height: 28px; }
.card h3 { margin-bottom: 10px; }
.card p:last-child { margin-bottom: 0; }

/* Creaviq Signature Glass Card */
.glass-card {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.5),
              inset 0 -1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
  position: relative;
}
.glass-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  pointer-events: none;
}
.glass-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 100%; width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), transparent, rgba(255, 255, 255, 0.3));
  pointer-events: none;
}

/* Creaviq Dot Matrix Background */
.bg-dot-matrix {
  background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}
.section--dark .bg-dot-matrix,
.hero .bg-dot-matrix {
  background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1.5px, transparent 1.5px);
}

.tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font-head);
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--blue-tint);
  color: var(--blue-deep);
}
.tag--green { background: #ecfdf5; color: #047857; }

/* --------------------------- Header / Nav -------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(12, 27, 43, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 16px 40px rgba(7, 17, 29, 0.25);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(520px 90px at 15% 0%, rgba(47, 125, 184, 0.22), transparent 60%),
    radial-gradient(460px 90px at 85% 100%, rgba(141, 198, 63, 0.18), transparent 62%);
  pointer-events: none;
}
/* The sheen sweeps far past the header's right edge, so it lives inside a
   clipping wrapper — on the header itself it would stretch the page width and
   flash a horizontal scrollbar on every pass. The header can't clip its own
   overflow because the mobile menu and account dropdown hang below it. */
.nav-sheen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.nav-sheen::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30%;
  width: 28%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  transform: skewX(-18deg);
  animation: nav-sheen 6s ease-in-out infinite;
}
.site-header .container {
  position: relative;
  z-index: 1;
  max-width: none;
  padding-inline: clamp(20px, 3vw, 48px);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 32px);
  height: 88px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  flex-shrink: 0;
  min-width: max-content;
}
.brand img { height: 48px; width: auto; flex-shrink: 0; }
.brand-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.45rem;
  color: #fff;
  letter-spacing: 0;
  line-height: 1;
}
.brand-name small {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--green-light);
  margin-top: 6px;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(10px, 1.2vw, 22px);
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.nav-links > li { flex: 0 0 auto; }
.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(0.92rem, 1vw, 1.02rem);
  line-height: 1;
  color: rgba(255, 255, 255, 0.88);
  padding: 10px 0;
  border-radius: 8px;
  white-space: nowrap;
}
/* Animated underline — absolutely positioned so it never shifts the link. */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue-light), var(--green-light));
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.nav-links a:hover,
.nav-links a.active { color: #fff; transform: translateY(-1px); }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); opacity: 1; }

/* Nav dropdown ("More") */
.nav-dropdown {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-block: 6px;
}
.nav-dropdown-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(0.92rem, 1vw, 1.02rem);
  line-height: 1;
  color: rgba(255, 255, 255, 0.88);
  padding: 10px 0;
  border-radius: 8px;
  white-space: nowrap;
  transition: color var(--transition), transform var(--transition);
}
.nav-dropdown-trigger::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue-light), var(--green-light));
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger.active,
.nav-dropdown.open .nav-dropdown-trigger {
  color: #fff;
  transform: translateY(-1px);
}
.nav-dropdown-trigger:hover::after,
.nav-dropdown-trigger.active::after,
.nav-dropdown.open .nav-dropdown-trigger::after {
  transform: scaleX(1);
  opacity: 1;
}
.nav-caret {
  color: rgba(255, 255, 255, 0.75);
  transition: transform 0.25s ease, color 0.25s ease;
}
.nav-dropdown.open .nav-caret,
.nav-dropdown:hover .nav-caret {
  transform: rotate(180deg);
  color: #fff;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 270px;
  background: rgba(14, 31, 48, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(7, 17, 29, 0.40);
  padding: 10px;
  z-index: 120;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Invisible hover bridge to eliminate gap between button and menu */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -18px;
  left: -20px;
  right: -20px;
  height: 22px;
  background: transparent;
  pointer-events: auto;
}
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (min-width: 1181px) {
  .nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

.nav-dropdown-menu a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 11px 15px;
  border-radius: 10px;
  background: transparent;
  color: #e4eef9;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
  white-space: normal;
}
.nav-dropdown-menu a::after {
  display: none !important;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transform: translateX(4px);
}
.dropdown-item-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
}
.dropdown-item-desc {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: #a2bdd8;
  line-height: 1.35;
  font-weight: 400;
}
.nav-dropdown-menu a:hover .dropdown-item-desc,
.nav-dropdown-menu a.active .dropdown-item-desc {
  color: #d2e4f7;
}

.nav-cta { display: flex; align-items: center; justify-content: flex-end; gap: clamp(12px, 1.4vw, 22px); flex: 0 0 auto; }

/* Account links are listed inline only inside the mobile menu. */
.nav-divider, .nav-acc-mobile { display: none; }

/* Anonymous "Sign in" link (desktop) */
.nav-signin {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1rem, 1.08vw, 1.16rem);
  color: rgba(255, 255, 255, 0.9);
  padding: 12px 0;
  white-space: nowrap;
}
.nav-signin:hover { color: #fff; }
.nav-desktop-cta {
  min-height: auto;
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 0.94rem;
  min-width: auto;
  justify-content: center;
  background: linear-gradient(115deg, var(--blue-deep) 0%, var(--blue) 45%, var(--green) 100%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: 0 10px 24px rgba(47, 125, 184, 0.28);
}
.nav-desktop-cta:hover {
  background: linear-gradient(115deg, var(--blue) 0%, var(--blue-deep) 45%, var(--green-deep) 100%);
  color: #fff;
  box-shadow: 0 14px 30px rgba(47, 125, 184, 0.34);
}

/* Authenticated account dropdown (desktop) */
.account { position: relative; }
.account-trigger {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--bg-card); border: 1.5px solid var(--line); border-radius: 999px;
  padding: 6px 12px 6px 6px; cursor: pointer; font-family: var(--font-head);
  font-weight: 600; font-size: 0.92rem; color: var(--ink); transition: var(--transition);
}
.account-trigger:hover { border-color: var(--blue-light); }
.account-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
  background: var(--grad); font-size: 0.85rem; font-weight: 700;
}
.account-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-caret { color: var(--muted); transition: transform var(--transition); }
.account.open .account-caret { transform: rotate(180deg); }
.account-menu {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 200px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 8px; z-index: 120;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}
.account-menu::before {
  content: "";
  position: absolute;
  top: -16px;
  left: -10px;
  right: -10px;
  height: 18px;
  background: transparent;
  pointer-events: auto;
}
.account.open .account-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.account-menu a, .account-logout button {
  display: block; width: 100%; text-align: left;
  font-family: var(--font-head); font-weight: 500; font-size: 0.93rem;
  color: var(--ink); padding: 10px 12px; border-radius: 8px;
  background: none; border: 0; cursor: pointer;
}
.account-menu a:hover, .account-logout button:hover { background: var(--bg-alt); color: var(--blue-deep); }
.account-logout { margin: 0; }

.nav-toggle {
  display: none;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.24); cursor: pointer;
  width: 44px; height: 44px; padding: 9px;
  border-radius: 10px;
}
.nav-toggle span { display: block; height: 2.5px; background: #fff; border-radius: 2px; transition: var(--transition); }
.nav-toggle span + span { margin-top: 6px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* ------------------------ Theme Toggle (Sun / Moon) --------------------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  padding: 0;
  flex: 0 0 auto;
}
.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.20);
  border-color: var(--blue-light);
  box-shadow: 0 0 16px rgba(47, 125, 184, 0.45);
  transform: scale(1.06);
}
.theme-toggle:active { transform: scale(0.92); }
.theme-toggle-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, color 0.25s ease;
}
/* In Light Mode: Sun is visible, Moon hidden */
html[data-theme="light"] .theme-toggle-sun {
  transform: scale(1) rotate(0deg);
  opacity: 1;
  color: #facc15;
}
html[data-theme="light"] .theme-toggle-moon {
  transform: scale(0.3) rotate(90deg);
  opacity: 0;
  pointer-events: none;
}
/* In Dark Mode: Moon is visible, Sun hidden */
html[data-theme="dark"] .theme-toggle-sun {
  transform: scale(0.3) rotate(-90deg);
  opacity: 0;
  pointer-events: none;
}
html[data-theme="dark"] .theme-toggle-moon {
  transform: scale(1) rotate(0deg);
  opacity: 1;
  color: var(--blue-light);
}

/* Mobile Theme Switcher inside nav drawer */
.nav-theme-mobile { display: none; }
@media (max-width: 1180px) {
  .nav-theme-mobile {
    display: block;
    padding: 8px 6px 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
  }
  .nav-theme-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 14px;
    color: var(--ink);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition);
  }
  .nav-theme-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .theme-toggle-pill {
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: rgba(12, 27, 43, 0.20);
    position: relative;
    transition: background 0.25s ease;
  }
  html[data-theme="dark"] .theme-toggle-pill {
    background: linear-gradient(120deg, var(--blue), var(--green-light));
  }
  .theme-pill-thumb {
    position: absolute;
    top: 2px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  html[data-theme="dark"] .theme-pill-thumb {
    transform: translateX(18px);
    background: #07111d;
  }
}

/* ------------------------------ Footer ---------------------------------- */
.site-footer {
  background: var(--bg-dark-2);
  color: #9fb3c6;
  padding-top: 72px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 40px;
  padding-bottom: 48px;
}
.site-footer .footer-heading {
  color: #fff; font-size: 0.95rem; line-height: 1.4; letter-spacing: 0.04em;
  text-transform: uppercase; margin-bottom: 18px;
}
.footer-brand img { height: 44px; margin-bottom: 18px; }
.footer-brand p { max-width: 34ch; font-size: 0.95rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 11px; }
.footer-links a { color: #9fb3c6; font-size: 0.96rem; }
.footer-links a:hover { color: var(--green-light); }
.footer-contact li { display: flex; gap: 10px; margin-bottom: 14px; font-size: 0.95rem; }
.footer-contact svg { flex: none; width: 18px; height: 18px; color: var(--green-light); margin-top: 3px; }
/* Keeps extra phone numbers aligned under the first one (which owns the icon). */
.footer-contact-spacer { flex: none; width: 18px; }
.footer-contact li + li:has(.footer-contact-spacer) { margin-top: -8px; }
.footer-contact a { color: #c7d6e4; }
.footer-contact a:hover { color: #fff; }

.social { display: flex; gap: 12px; margin-top: 18px; }
.social a {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.07); color: #c7d6e4;
}
.social a:hover { background: var(--grad); color: #fff; }
.social svg { width: 18px; height: 18px; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.10);
  padding: 22px 0;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 0.86rem; color: #7d93a8;
}
.footer-bottom a { color: #9fb3c6; }
.footer-bottom a:hover { color: #fff; }

/* ------------------------- Breadcrumbs ---------------------------------- */
.breadcrumbs { font-size: 0.86rem; color: var(--muted); padding: 18px 0 0; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--blue); }
.breadcrumbs span { margin: 0 8px; opacity: 0.5; }

/* --------------------------- Page hero (interior) ----------------------- */
.page-hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(850px 420px at 78% 30%, rgba(47, 125, 184, 0.32), transparent 70%),
    radial-gradient(650px 360px at 12% 80%, rgba(141, 198, 63, 0.24), transparent 65%),
    linear-gradient(180deg, #07111d 0%, #0c1b2b 55%, #07111d 100%);
  color: #c7d6e4;
  padding: clamp(68px, 8.5vw, 110px) 0 clamp(64px, 8vw, 96px);
  overflow: hidden;
  border-bottom: 1px solid rgba(127, 185, 222, 0.18);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1.2px, transparent 1.2px);
  background-size: 28px 28px;
  pointer-events: none;
  opacity: 0.72;
  z-index: 0;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(47, 125, 184, 0.6) 35%, rgba(141, 198, 63, 0.6) 65%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 {
  color: #fff;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.3rem, 4.6vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
  max-width: 20ch;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}
.page-hero p,
.page-hero .lead {
  max-width: 60ch;
  color: #cddbe8;
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.7;
  margin: 0 0 24px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.page-hero .breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 7px 18px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--font-badge);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-light);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  width: fit-content;
}
.page-hero .breadcrumbs a {
  color: #9cb4ca;
  text-decoration: none;
  transition: color 0.25s ease;
}
.page-hero .breadcrumbs a:hover {
  color: #fff;
}
.page-hero .breadcrumbs span {
  color: rgba(141, 198, 63, 0.7);
  margin: 0;
  font-weight: 700;
  font-size: 0.85rem;
}

/* ------------------------------ Forms ----------------------------------- */
.form-field { margin-bottom: 20px; }
.form-field label {
  display: block; font-family: var(--font-head); font-weight: 600;
  font-size: 0.92rem; color: var(--ink); margin-bottom: 7px;
}
.form-field .req { color: var(--green); }
.form-control {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(47, 125, 184, 0.12);
}
textarea.form-control { min-height: 150px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.help-text { font-size: 0.84rem; color: var(--muted); margin-top: 6px; }
.errorlist { list-style: none; margin: 6px 0 0; padding: 0; color: #c0392b; font-size: 0.86rem; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Messages / alerts */
.alert {
  padding: 16px 20px; border-radius: var(--radius-sm);
  margin-bottom: 22px; font-size: 0.96rem; border: 1px solid transparent;
}
.alert-success { background: var(--green-tint); color: var(--green-deep); border-color: #cbe7b8; }
.alert-error { background: #fdecea; color: #c0392b; border-color: #f5c6c0; }

/* ------------------------------ Utilities ------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 18px; }
.divider-chevron {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--green); margin: 10px 0;
}

/* skip link for a11y */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: #fff; color: var(--ink); padding: 10px 16px; border-radius: 8px;
  transition: top var(--transition);
}
.skip-link:focus { top: 12px; }

/* --------------------------- Responsive --------------------------------- */
@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
/* Nav uses a compact desktop layout before switching to the mobile menu. */
@media (max-width: 1320px) {
  .nav {
    gap: 16px;
    height: 84px;
  }
  .brand img { height: 44px; }
  .brand-name { font-size: 1.3rem; }
  .brand-name small { font-size: 0.58rem; margin-top: 5px; }
  .nav-links { gap: clamp(8px, 1vw, 16px); }
  .nav-links a,
  .nav-signin { font-size: 0.92rem; }
  .nav-cta { gap: 12px; }
  .nav-desktop-cta {
    min-height: auto;
    padding: 10px 18px;
    font-size: 0.9rem;
    min-width: auto;
  }
}
@media (max-width: 1180px) {
  .nav-toggle { display: block; }
  /* The panel hangs from the bottom edge of the header. That edge moves — the
     promo bar sits above the header until it scrolls away — so the offset comes
     from --nav-offset, which main.js keeps in sync. The 88px is only the
     pre-JS fallback. */
  .nav-links {
    position: fixed; inset: var(--nav-offset, 88px) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-card); border-bottom: 1px solid var(--line);
    padding: 14px 24px 22px;
    box-shadow: var(--shadow);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: var(--transition);
    max-height: calc(100vh - var(--nav-offset, 88px)); overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links a {
    padding: 14px 10px;
    border-radius: 8px;
    font-size: 1.02rem;
    color: var(--ink);
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .nav-links a:hover, .nav-links a.active { background: var(--bg-alt); color: var(--blue-deep); transform: none; }
  .nav-links a::after { display: none; }

  /* Mobile More dropdown */
  .nav-dropdown {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .nav-dropdown-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 14px 10px;
    font-size: 1.02rem;
    color: var(--ink);
    min-height: 44px;
    border-radius: 8px;
  }
  .nav-dropdown-trigger .nav-caret {
    color: var(--muted);
  }
  .nav-dropdown-trigger:hover,
  .nav-dropdown-trigger.active {
    background: var(--bg-alt);
    color: var(--blue-deep);
    transform: none;
  }
  .nav-dropdown-trigger::after {
    display: none !important;
  }
  .nav-dropdown-menu {
    position: static;
    transform: none;
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: none;
    padding: 6px;
    margin: 4px 0 10px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height 0.3s ease, opacity 0.25s ease;
  }
  .nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    max-height: 400px;
    pointer-events: auto;
  }
  .nav-dropdown-menu a {
    color: var(--ink);
    padding: 10px 12px;
    min-height: auto;
  }
  .nav-dropdown-menu a:hover,
  .nav-dropdown-menu a.active {
    background: var(--bg-card);
    color: var(--blue-deep);
    transform: none;
  }
  .nav-dropdown-menu .dropdown-item-title {
    color: var(--ink);
  }
  .nav-dropdown-menu a:hover .dropdown-item-title,
  .nav-dropdown-menu a.active .dropdown-item-title {
    color: var(--blue-deep);
  }
  .nav-dropdown-menu .dropdown-item-desc {
    color: var(--muted);
  }

  /* Account links join the mobile menu */
  .nav-divider { display: block; height: 1px; background: var(--line); margin: 10px 0; padding: 0; }
  .nav-acc-mobile { display: block; }
  .nav-acc-mobile .nav-logout-form button {
    width: 100%; text-align: left; padding: 14px 8px; border: 0; background: none;
    font-family: var(--font-head); font-weight: 500; font-size: 1.02rem; color: var(--ink); cursor: pointer;
  }
  .nav-acc-mobile .nav-logout-form button:hover { color: var(--blue-deep); }

  /* Desktop account UI hidden in mobile */
  .nav-cta .account, .nav-cta .nav-signin, .nav-cta .nav-desktop-cta { display: none; }
}
@media (max-width: 760px) {
  .site-header .container { padding-inline: 16px; }
  .nav { height: 68px; }
  .nav-links {
    /* Shorter header here, so the pre-JS fallback shrinks to match. */
    inset: var(--nav-offset, 68px) 0 auto 0;
    max-height: calc(100vh - var(--nav-offset, 68px));
    padding-inline: 16px;
  }
  .brand img { height: 38px; }
  .brand-name { font-size: 1rem; }
  .brand-name small { display: none; }
}
@media (max-width: 880px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .brand-name { font-size: 0.98rem; }
  .footer-bottom { flex-direction: column; }
}
@media (max-width: 480px) {
  .site-header .container { padding-inline: 14px; }
  .brand { gap: 10px; }
  .brand img { height: 34px; }
  .brand-name { font-size: 0.92rem; }
  .card { padding: 22px 18px; }
  .btn-lg { padding: 14px 24px; font-size: 0.98rem; }
  .cta-inner .btn { width: 100%; justify-content: center; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ========================================================================
   Shared components (used across multiple pages)
   ======================================================================== */

/* Brand-gradient text */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Reveal-on-scroll with smooth deceleration spring & blur */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  filter: blur(4px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Clickable card */
.card-link { display: flex; flex-direction: column; color: inherit; }
.card-link h3 { color: var(--ink); }
.card-link:hover h3 { color: var(--blue-deep); }
.card-more {
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--blue);
}

/* Project card */
.project-card {
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid rgba(47, 125, 184, 0.16); border-radius: var(--radius-lg);
  overflow: hidden; color: inherit; height: 100%;
  box-shadow: 0 12px 32px rgba(8, 8, 12, 0.06);
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.38s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
}
.project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(47, 125, 184, 0.20);
  border-color: rgba(47, 125, 184, 0.35);
}
.project-media {
  position: relative; aspect-ratio: 16 / 10; background: var(--bg-dark);
  display: grid; place-items: center; overflow: hidden;
}
.project-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
}
.project-card:hover .project-media img {
  transform: scale(1.05);
}
.project-media-fallback { color: var(--blue-light); opacity: 0.7; }
.project-domain {
  position: absolute; top: 14px; left: 14px;
  background: rgba(12, 27, 43, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: #fff;
  font-family: var(--font-head); font-weight: 600; font-size: 0.76rem;
  letter-spacing: 0.02em;
  padding: 5px 14px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30);
  z-index: 2;
}
.project-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.project-body h3 {
  margin-bottom: 8px; font-size: 1.22rem; line-height: 1.25;
  transition: color 0.25s ease;
}
.project-card:hover .project-body h3 {
  color: var(--blue-deep);
}
.project-body .card-more { color: var(--blue-deep); font-weight: 600; margin-top: auto; padding-top: 14px; }

/* Testimonial: flex rows so a partial last row (1 or 2 cards) sits centred */
.testimonial-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }
.testimonial-grid > .testimonial { flex: 0 1 calc((100% - 56px) / 3); }
@media (max-width: 880px) { .testimonial-grid > .testimonial { flex-basis: calc((100% - 28px) / 2); } }
@media (max-width: 620px) { .testimonial-grid > .testimonial { flex-basis: 100%; } }
html[data-theme="dark"] .section--alt .testimonial { background: var(--bg-card-hover); }
/* Testimonial */
.testimonial {
  margin: 0; background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 32px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.testimonial:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}
.testimonial blockquote {
  margin: 0 0 20px; font-size: 1.08rem; color: var(--ink); line-height: 1.6;
}
.testimonial figcaption strong { display: block; color: var(--ink); font-family: var(--font-head); }
.testimonial figcaption span { font-size: 0.9rem; color: var(--muted); }

/* CTA band - Creaviq curved container style with Bizentrix Brand Gradient */
.cta-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 360px at 15% 10%, rgba(127, 185, 222, 0.35), transparent 60%),
    radial-gradient(800px 340px at 85% 90%, rgba(141, 198, 63, 0.30), transparent 60%),
    linear-gradient(135deg, #0c1b2b 0%, #1e4e79 48%, #2f6a2f 100%);
  color: #fff;
  padding: clamp(52px, 7vw, 84px) clamp(24px, 5vw, 64px);
  border-radius: 36px;
  margin: 32px 16px;
  border: 1px solid rgba(127, 185, 222, 0.24);
  box-shadow: 0 24px 64px rgba(12, 27, 43, 0.28);
}
@media (min-width: 940px) {
  .cta-band {
    border-radius: 48px;
    margin: 48px 32px;
  }
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 26px;
  pointer-events: none;
}
@media (min-width: 940px) {
  .cta-band::before {
    border-radius: 38px;
  }
}
.cta-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.cta-inner h2 {
  color: #fff;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.cta-inner p {
  color: rgba(255, 255, 255, 0.94);
  font-size: 1.08rem;
  margin: 0;
  max-width: 60ch;
}
.cta-band .btn-primary {
  background: #fff;
  color: #1e4e79;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25);
}
.cta-band .btn-primary:hover {
  background: var(--grad);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 18px 42px rgba(47, 125, 184, 0.40);
}

/* Feature list with check icons */
.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li { position: relative; padding-left: 30px; margin-bottom: 12px; }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--grad);
}
.feature-list li::after {
  content: ""; position: absolute; left: 5px; top: 11px;
  width: 5px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

@media (max-width: 620px) {
  .cta-inner { flex-direction: column; align-items: flex-start; }
}

/* ========================================================================
   Page-load entrance animations (motion-safe; skipped for reduced-motion)
   ======================================================================== */
@keyframes biz-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes biz-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* The navbar stays static — only page content animates in on load. */

/* ========================================================================
   Promo banner — sticky top bar + one-time pop-up (pilot offer, etc.)
   ======================================================================== */
.promo-bar {
  background: var(--grad);
  color: #fff;
}
.promo-bar-inner {
  display: flex; align-items: center; gap: 16px;
  padding: 9px 0; flex-wrap: wrap;
}
.promo-bar-text {
  margin: 0; display: flex; align-items: center; gap: 10px;
  flex: 1 1 auto; font-size: 0.94rem; line-height: 1.35;
}
.promo-bar-badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.22); font-size: 0.72rem;
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap;
}
.promo-bar-cta {
  color: #fff; font-weight: 700; font-size: 0.9rem; white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55); padding-bottom: 1px;
}
.promo-bar-cta:hover { border-bottom-color: #fff; }
.promo-bar-close {
  background: none; border: 0; color: #fff; font-size: 1.4rem; line-height: 1;
  cursor: pointer; padding: 0 4px; opacity: 0.85;
}
.promo-bar-close:hover { opacity: 1; }

.promo-popup {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.promo-popup[hidden] { display: none; }
.promo-popup-backdrop {
  position: absolute; inset: 0;
  background: rgba(12, 27, 43, 0.62); backdrop-filter: blur(2px);
  animation: biz-fade 0.25s ease;
}
.promo-popup-card {
  position: relative; z-index: 1; width: min(460px, 100%);
  background: var(--bg); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 40px 34px 34px; text-align: center;
  animation: biz-rise 0.3s ease;
}
.promo-popup-badge {
  display: inline-block; padding: 5px 14px; border-radius: 999px;
  background: var(--grad-soft); color: var(--blue-deep);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; margin-bottom: 16px;
}
.promo-popup-card h2 { font-size: 1.55rem; margin: 0 0 12px; }
.promo-popup-card p { color: var(--ink-soft); margin: 0 0 22px; }
.promo-popup-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: 0; font-size: 1.7rem; line-height: 1;
  color: var(--muted); cursor: pointer;
}
.promo-popup-close:hover { color: var(--ink); }
body.promo-open { overflow: hidden; }

@media (max-width: 620px) {
  .promo-bar-cta { order: 3; }
}

@keyframes nav-sheen {
  0%, 48% { transform: translateX(0) skewX(-18deg); opacity: 0; }
  58%     { opacity: 1; }
  100%    { transform: translateX(520%) skewX(-18deg); opacity: 0; }
}

/* ==========================================================================
   Dark Mode — Global Core Overrides
   ========================================================================== */
html[data-theme="dark"] .site-header {
  background: rgba(7, 17, 29, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

@media (max-width: 1180px) {
  html[data-theme="dark"] .nav-links {
    background: #0c1b2b;
    border-bottom-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  }
  html[data-theme="dark"] .nav-links a,
  html[data-theme="dark"] .nav-dropdown-trigger {
    color: #ffffff;
  }
  html[data-theme="dark"] .nav-links a:hover,
  html[data-theme="dark"] .nav-links a.active,
  html[data-theme="dark"] .nav-dropdown-trigger:hover,
  html[data-theme="dark"] .nav-dropdown-trigger.active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--blue-light);
  }
}

html[data-theme="dark"] .nav-dropdown-menu {
  background: rgba(12, 27, 43, 0.98);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.65);
}

html[data-theme="dark"] .account-trigger {
  background: #0c1b2b;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.16);
}
html[data-theme="dark"] .account-menu {
  background: #0c1b2b;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .account-menu a,
html[data-theme="dark"] .account-logout button {
  color: #e4eef9;
}
html[data-theme="dark"] .account-menu a:hover,
html[data-theme="dark"] .account-logout button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #091523;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.16);
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  background: #0d2036;
  border-color: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(47, 125, 184, 0.28);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #627b95;
}

html[data-theme="dark"] .promo-popup-card {
  background: #0c1b2b;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}
html[data-theme="dark"] .promo-popup-card h2 {
  color: #ffffff;
}
html[data-theme="dark"] .home-card-panel {
  background: #0c1b2b;
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .tag {
  background: rgba(47, 125, 184, 0.18);
  color: var(--blue-light);
}
html[data-theme="dark"] .tag--green {
  background: rgba(141, 198, 63, 0.16);
  color: #a4e054;
}
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-content {
  background: #0c1b2b;
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--ink-soft);
}
html[data-theme="dark"] .skip-link {
  background: #0c1b2b;
  color: #ffffff;
}

/* ==========================================================================
   Interaction & readability layer (light + dark)
   One calm hover language for every card: the card keeps its own surface,
   gains a soft brand wash, a gradient accent bar, a small lift and a filled
   icon. Text never changes to a colour that can disappear into the card.
   Selectors are prefixed with :root so they outrank the per-page rules in
   home.css / pages.css regardless of stylesheet order.
   ========================================================================== */
html { scroll-padding-top: 96px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: rgba(47, 125, 184, 0.22); }
a, button, .btn { -webkit-tap-highlight-color: transparent; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--blue-light);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Never fade the cards the visitor is not pointing at */
:root :is(.home-service-grid, .services-deck, .portfolio-grid):hover :is(.home-service-card, .service-deck-card, .project-card):not(:hover) {
  opacity: 1;
  transform: none;
}

/* ---- Surface cards: brand wash replaces the dark flood ------------------ */
:root :is(.why-card, .home-service-card, .process-step, .value-card, .service-deck-card, .job-card)::before {
  background:
    radial-gradient(420px 200px at 12% 0%, rgba(141, 198, 63, 0.10), transparent 62%),
    radial-gradient(420px 220px at 100% 100%, rgba(47, 125, 184, 0.10), transparent 62%);
}
:root :is(.why-card, .home-service-card, .process-step, .value-card, .service-deck-card)::after {
  inset: 0 0 auto 0;
  height: 4px;
  border: 0;
  border-radius: 0;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left center;
}
:root :is(.why-card, .home-service-card, .process-step, .value-card, .service-deck-card):is(:hover, :focus-within)::after {
  opacity: 1;
  transform: scaleX(1);
}

:root :is(.why-card, .home-service-card, .process-step, .value-card, .service-deck-card, .job-card, .capability-card, .job-row, .card, .testimonial, .project-card, .article-card):is(:hover, :focus-within) {
  transform: translateY(-6px);
  border-color: rgba(47, 125, 184, 0.42);
  box-shadow: 0 22px 50px rgba(47, 125, 184, 0.16);
}
:root :is(.why-card, .home-service-card, .process-step, .value-card, .service-deck-card, .job-card):is(:hover, :focus-within)::before { opacity: 1; }

:root :is(.why-card, .home-service-card, .process-step, .value-card, .service-deck-card, .job-card):is(:hover, :focus-within) :is(h3, .job-card-body h3) {
  color: var(--ink);
  transform: none;
}
:root :is(.why-card, .home-service-card, .process-step, .value-card, .service-deck-card):is(:hover, :focus-within) p,
:root .job-card:is(:hover, :focus-within) .job-card-body p {
  color: var(--ink-soft);
  transform: none;
}
:root :is(.home-service-card, .service-deck-card):is(:hover, :focus-within) .card-more {
  color: var(--blue-deep);
  transform: translateX(4px);
}
:root :is(.why-card, .value-card, .service-deck-card):is(:hover, :focus-within) .card-icon,
:root .process-step:is(:hover, :focus-within) .process-icon {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 24px rgba(47, 125, 184, 0.28);
  transform: scale(1.06);
}
:root .process-step:is(:hover, :focus-within) .process-num { color: var(--blue); }
:root .job-card:is(:hover, :focus-within) .job-tag { color: var(--muted); transform: none; }
:root .job-card:is(:hover, :focus-within) .job-tag svg { color: var(--blue); }
:root .job-card:is(:hover, :focus-within) .job-card-cta {
  color: #fff;
  background: var(--grad);
  transform: translateX(4px);
}
:root .job-card:is(:hover, :focus-within) { transform: translateY(-4px); border-left-color: var(--blue); }

/* Media cards: zoom the picture a little, keep the text where it is */
:root .project-card:is(:hover, :focus-within) .project-body h3 { color: var(--blue-deep); }
:root .card-link:is(:hover, :focus-visible) .card-more,
:root .project-card:is(:hover, :focus-within) .card-more { text-decoration: underline; text-underline-offset: 4px; }

/* ---- Dark theme --------------------------------------------------------- */
:root[data-theme="dark"] :is(.why-card, .home-service-card, .process-step, .value-card, .service-deck-card, .job-card, .portfolio-grid .project-card, .article-card)::before {
  background:
    radial-gradient(420px 200px at 12% 0%, rgba(141, 198, 63, 0.12), transparent 62%),
    radial-gradient(420px 220px at 100% 100%, rgba(47, 125, 184, 0.20), transparent 62%),
    var(--bg-card-hover);
}
:root[data-theme="dark"] :is(.why-card, .home-service-card, .process-step, .value-card, .service-deck-card, .job-card, .capability-card, .job-row, .card, .testimonial, .project-card, .article-card):is(:hover, :focus-within) {
  background-color: var(--bg-card-hover);
  border-color: rgba(127, 185, 222, 0.38);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(127, 185, 222, 0.10);
}
:root[data-theme="dark"] :is(.why-card, .home-service-card, .process-step, .value-card, .service-deck-card, .job-card):is(:hover, :focus-within) h3 { color: #ffffff; }
:root[data-theme="dark"] :is(.why-card, .home-service-card, .process-step, .value-card, .service-deck-card):is(:hover, :focus-within) p,
:root[data-theme="dark"] .job-card:is(:hover, :focus-within) .job-card-body p { color: #c7d6e4; }
:root[data-theme="dark"] .process-step:is(:hover, :focus-within) .process-num { color: var(--green-light); }
:root[data-theme="dark"] .job-card:is(:hover, :focus-within) .job-tag svg { color: var(--green-light); }

/* Brand-deep blue is too dark to read on navy: use the light brand blue */
:root[data-theme="dark"] :is(.card-icon, .process-icon) { color: var(--blue-light); }
:root[data-theme="dark"] :is(.card-more, .project-body .card-more, .home-service-card .card-more, .service-deck-card .card-more),
:root[data-theme="dark"] :is(.home-service-card, .service-deck-card):is(:hover, :focus-within) .card-more,
:root[data-theme="dark"] .card-link:hover h3,
:root[data-theme="dark"] .project-card:is(:hover, :focus-within) .project-body h3,
:root[data-theme="dark"] :is(.aside-links, .contact-points, .recaptcha-notice, .breadcrumbs, .auth-resend-prompt) a:hover,
:root[data-theme="dark"] .app-row-main h3 a:hover,
:root[data-theme="dark"] .auth-create-link:hover,
:root[data-theme="dark"] .filter-pill:not(.active):hover,
:root[data-theme="dark"] main a:not([class]):hover {
  color: var(--blue-light);
}
:root[data-theme="dark"] .filter-pill:not(.active):hover { border-color: var(--blue-light); }
:root[data-theme="dark"] .article-cat { color: var(--blue-light); }
:root[data-theme="dark"] .article-card:hover .article-cat { color: #fff; }

/* Framed card panels (services, portfolio, insights, about) */
:root[data-theme="dark"] :is(.card-panel, .about-card-panel, .home-card-panel) {
  background:
    radial-gradient(760px 280px at 10% 0%, rgba(47, 125, 184, 0.16), transparent 62%),
    radial-gradient(760px 300px at 92% 100%, rgba(141, 198, 63, 0.12), transparent 62%),
    linear-gradient(135deg, #091726, #0c1b2b);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
:root[data-theme="dark"] :is(.card-panel, .about-card-panel, .home-card-panel)::before {
  border-color: rgba(255, 255, 255, 0.06);
}

/* Product cards + status badges (shared: home page and products pages) */
.product-card-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.product-tagline {
  color: var(--blue-deep); font-weight: 600; font-size: 0.98rem;
  margin: 2px 0 8px;
}
.promo-badge {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; white-space: nowrap;
}
.promo-badge--coming_soon { background: #fff3df; color: #9a6a00; }
.promo-badge--pilot       { background: var(--blue-tint); color: var(--blue-deep); }
.promo-badge--live        { background: var(--green-tint); color: var(--green-deep); }

/* A card is one big link: stop the global a:hover colour bleeding into its text */
:root :is(.card-link, .project-card, .article-card, .job-card):is(:hover, :focus-visible) { color: inherit; }
:root .card-link:is(:hover, :focus-visible) p:not(.product-tagline) { color: var(--ink-soft); }
:root .card-more { color: var(--blue-deep); }

:root .product-card { position: relative; overflow: hidden; isolation: isolate; }
:root .product-card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--grad); transform: scaleX(0); transform-origin: left center;
  transition: transform 0.35s ease;
}
:root .product-card:is(:hover, :focus-visible)::after { transform: scaleX(1); }
:root .product-card:is(:hover, :focus-visible) h3 { color: var(--ink); }
:root .product-card:is(:hover, :focus-visible) .card-icon { background: var(--grad); color: #fff; }

:root[data-theme="dark"] .card-link:is(:hover, :focus-visible) p:not(.product-tagline) { color: #c7d6e4; }
:root[data-theme="dark"] .product-card:is(:hover, :focus-visible) h3 { color: #ffffff; }
:root[data-theme="dark"] .product-card:is(:hover, :focus-visible) .product-tagline { color: var(--blue-light); }
:root[data-theme="dark"] .promo-badge--pilot { background: rgba(127, 185, 222, 0.16); color: var(--blue-light); }
:root[data-theme="dark"] .promo-badge--live { background: rgba(141, 198, 63, 0.16); color: var(--green-light); }
:root[data-theme="dark"] .promo-badge--coming_soon { background: rgba(255, 196, 87, 0.16); color: #ffc457; }

/* --------------------------------------------------------------------------
   Mobile nav: the "More" dropdown
   The desktop styles paint the trigger and the open item white for the dark
   header bar. In the mobile sheet that panel is light, so those colours have to
   be restated per theme or the label and the active item's subtitle disappear.
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  :root .nav-dropdown-trigger:hover,
  :root .nav-dropdown-trigger.active,
  :root .nav-dropdown.open .nav-dropdown-trigger {
    color: var(--blue-deep);
    background: var(--bg-alt);
  }
  :root .nav-dropdown-menu a .dropdown-item-title { color: var(--ink); }
  :root .nav-dropdown-menu a:hover .dropdown-item-title,
  :root .nav-dropdown-menu a.active .dropdown-item-title { color: var(--blue-deep); }
  :root .nav-dropdown-menu a .dropdown-item-desc,
  :root .nav-dropdown-menu a:hover .dropdown-item-desc,
  :root .nav-dropdown-menu a.active .dropdown-item-desc { color: var(--ink-soft); }

  :root[data-theme="dark"] .nav-dropdown-trigger:hover,
  :root[data-theme="dark"] .nav-dropdown-trigger.active,
  :root[data-theme="dark"] .nav-dropdown.open .nav-dropdown-trigger {
    color: var(--blue-light);
    background: rgba(255, 255, 255, 0.08);
  }
  :root[data-theme="dark"] .nav-dropdown-menu a .dropdown-item-title { color: #ffffff; }
  :root[data-theme="dark"] .nav-dropdown-menu a:hover .dropdown-item-title,
  :root[data-theme="dark"] .nav-dropdown-menu a.active .dropdown-item-title { color: var(--blue-light); }
  :root[data-theme="dark"] .nav-dropdown-menu a .dropdown-item-desc,
  :root[data-theme="dark"] .nav-dropdown-menu a:hover .dropdown-item-desc,
  :root[data-theme="dark"] .nav-dropdown-menu a.active .dropdown-item-desc { color: #8ba2b8; }
  :root[data-theme="dark"] .nav-dropdown-menu a:hover,
  :root[data-theme="dark"] .nav-dropdown-menu a.active { background: rgba(255, 255, 255, 0.08); }
}