/* ============================================================
   DESIGN TOKENS
   Baseline: 1440px (Figma design width)
   Fluid container + padding · upward scaling at 1440/1920/2560/3840
   ============================================================ */
:root {
  /* Colors — AGEX-style: near-black bg, pure white text, electric blue accent
     WCAG on --surface (#0c0c24):
       --ink     (#ffffff) : 19.20:1 AAA
       --color   (#8899bb) :  6.69:1 AA
       --primary (#4d7aff) :  5.07:1 AA
     Light theme overrides live in [data-theme="light"] below. */
  --ink:      #ffffff;   /* pure white */
  --color:    #8899bb;   /* muted blue-gray */
  --white:    #ffffff;   /* pure white — for text-on-dark sections; NEVER remapped */
  --surface:  #0c0c24;   /* dark purple-black card surface */
  --stroke:   #28285c;   /* purple-blue border — visible glow effect */
  --bg:       #04040e;   /* near-pure black */
  --bg-soft:  #080818;   /* slightly lighter black */
  --primary:  #4d7aff;   /* electric blue */

  /* Gradients */
  --grad-text: linear-gradient(90deg, #6699ff 0%, #3355ee 100%);
  --grad-cyan: linear-gradient(108deg, #00ffff 0%, #ffffff 100%);
  --grad-dark: linear-gradient(163deg, #04040e 0%, #0033cc 100%);

  /* Shadows — deep with subtle blue glow */
  --shadow-card:   0 4px 32px rgba(0, 0, 0, 0.80);
  --shadow-button: 0 4px 16px rgba(0, 0, 0, 0.60);
  --shadow-hover:  0 16px 48px rgba(0, 0, 180, 0.25);

  color-scheme: dark;

  /* Layout — fluid: never narrower than 1200, expands with viewport, capped at 1800 by default.
     --gutter = the horizontal padding that auto-centers content within a full-bleed section.
     Equals max(pad-x, (viewport - container) / 2). */
  --container: clamp(1200px, 92vw, 1800px);
  --pad-x: clamp(24px, 6.5vw, 96px);
  --gutter: max(var(--pad-x), calc((100vw - var(--container)) / 2));
  --section-y: clamp(64px, 7vw, 120px);
  --gap-grid: clamp(16px, 1.6vw, 24px);

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-full: 999px;

  /* Spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* Typography baseline (1440 Figma).
     Upward jumps at 1920/2560/3840 via @media below. */
  --fs-display-l: 56px; --lh-display-l: 72px;
  --fs-display-m: 46px; --lh-display-m: 62px;
  --fs-display-s: 36px; --lh-display-s: 44px;
  --fs-headline-m: 28px; --lh-headline-m: 36px;
  --fs-headline-s: 24px; --lh-headline-s: 32px;
  --fs-card-title: 20px; --lh-card-title: 28px;  /* card h3 in multi-col grids */
  --fs-title-l: 22px;  --lh-title-l: 28px;
  --fs-title-m: 18px;  --lh-title-m: 24px;
  --fs-title-s: 16px;  --lh-title-s: 24px;
  --fs-body-l: 18px;   --lh-body-l: 26px;
  --fs-body-m: 16px;   --lh-body-m: 24px;
  --fs-body-s: 14px;   --lh-body-s: 20px;
  --fs-label-l: 14px;  --lh-label-l: 20px;

  /* Component sizes */
  --nav-h: 80px;
  --btn-pad-y: 12px;
  --btn-pad-x: 24px;
  --btn-fs: 18px;
  --icon-btn-pad: 12px;
  --tech-pill-size: 64px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-offset) + var(--s-4)); }

/* Mobile/tablet: scale display + headline type down so the heading hierarchy holds
   (base tokens only scale UP for large screens — they need a downward step too). */
@media (max-width: 768px) {
  :root {
    --fs-display-l: 40px; --lh-display-l: 48px;
    --fs-display-m: 36px; --lh-display-m: 44px;
    --fs-display-s: 28px; --lh-display-s: 36px;
    --fs-headline-m: 24px; --lh-headline-m: 32px;
    --fs-headline-s: 22px; --lh-headline-s: 30px;
  }
}
@media (max-width: 600px) {
  :root {
    --fs-display-l: 32px; --lh-display-l: 40px;
    --fs-display-m: 30px; --lh-display-m: 38px;
    --fs-display-s: 24px; --lh-display-s: 32px;
    --fs-headline-m: 22px; --lh-headline-m: 30px;
    --fs-headline-s: 20px; --lh-headline-s: 28px;
  }
}
body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; }

/* ---------- Typography helpers (token-driven for fluid scaling) ---------- */
.display-l { font-weight: 800; font-size: var(--fs-display-l); line-height: var(--lh-display-l); letter-spacing: -1px; }
.display-m { font-weight: 800; font-size: var(--fs-display-m); line-height: var(--lh-display-m); }
.display-s { font-weight: 800; font-size: var(--fs-display-s); line-height: var(--lh-display-s); }
.headline-m { font-weight: 700; font-size: var(--fs-headline-m); line-height: var(--lh-headline-m); }
.headline-s { font-weight: 700; font-size: var(--fs-headline-s); line-height: var(--lh-headline-s); }
.title-l { font-weight: 600; font-size: var(--fs-title-l); line-height: var(--lh-title-l); }
.title-m { font-weight: 600; font-size: var(--fs-title-m); line-height: var(--lh-title-m); }
.title-s { font-weight: 600; font-size: var(--fs-title-s); line-height: var(--lh-title-s); }
.body-l { font-weight: 400; font-size: var(--fs-body-l); line-height: var(--lh-body-l); }
.body-m { font-weight: 400; font-size: var(--fs-body-m); line-height: var(--lh-body-m); }
.body-s { font-weight: 400; font-size: var(--fs-body-s); line-height: var(--lh-body-s); }
.label-l { font-weight: 500; font-size: var(--fs-label-l); line-height: var(--lh-label-l); }
.muted { color: var(--color); }
.gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons ----------
   3 canonical variants (design system):
     .btn-dark   — đen  — dark navy bg, white text  (primary action on light bg)
     .btn-primary— xanh — brand blue bg, white text  (primary action, CTA)
     .btn-white  — trắng— white bg, dark text        (action on dark/colored bg)
   All share identical size, radius, transition via .btn base.
   ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--primary); color: var(--white); }
.btn-primary:hover { box-shadow: 0 6px 18px rgba(0, 60, 255, 0.35); }
.btn-dark { background: var(--ink); color: var(--bg); }       /* text = page bg color so it stays readable */
.btn-dark:hover { box-shadow: var(--shadow-hover); }
.btn-white { background: var(--white); color: #07112f; box-shadow: var(--shadow-card); } /* always dark ink on white bg */
.btn-white:hover { box-shadow: var(--shadow-hover); }
.btn-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: var(--fs-title-m); line-height: var(--lh-title-m);
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.btn-link svg { color: #2d74e6; }
.icon-btn {
  background: var(--surface);
  padding: 12px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  color: var(--ink);
}
.icon-btn-glass {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}
.btn svg, .btn-link svg, .icon-btn svg, .icon-btn-glass svg { flex-shrink: 0; }

/* ============================================================
   LANGUAGE SWITCHER (header)
   Pill button + dropdown popover. Always renders all 3 languages.
   ============================================================ */
.lang-switcher { position: relative; display: inline-flex; }
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 99px;
  background: rgba(136, 153, 187, 0.10);
  border: 1px solid rgba(136, 153, 187, 0.18);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  line-height: 1;
}
.lang-toggle:hover { background: rgba(136, 153, 187, 0.18); border-color: rgba(136, 153, 187, 0.28); }
.lang-toggle svg { color: var(--ink); }
.lang-toggle .lang-current { letter-spacing: 0.02em; }
.lang-switcher .lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  list-style: none;
  margin: 0;
  padding: 6px;
  min-width: 168px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: none;
  z-index: 200;
}
.lang-switcher.open .lang-menu { display: block; }
.lang-switcher .lang-menu li { margin: 0; padding: 0; }
.lang-switcher .lang-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  transition: background .15s ease;
}
.lang-switcher .lang-menu a:hover { background: rgba(136, 153, 187, 0.09); }
.lang-switcher .lang-menu a.active {
  background: rgba(96, 144, 255, 0.15);
  color: var(--primary);
}
.lang-switcher .lang-menu .lang-code {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  background: rgba(15, 23, 42, 0.06);
  padding: 3px 8px;
  border-radius: 6px;
  min-width: 30px;
  text-align: center;
}
.lang-switcher .lang-menu a.active .lang-code {
  background: var(--primary);
  color: var(--white);
}

/* ============================================================
   SCROLL-TRIGGERED REVEAL ANIMATIONS
   Activated by JS adding .reveal--in class.
   Respects prefers-reduced-motion.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(56px);
  transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1), transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal--in {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger children of a reveal-group */
.reveal-group > * {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1), transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-group.reveal--in > * { opacity: 1; transform: translateY(0); }
.reveal-group.reveal--in > *:nth-child(1)  { transition-delay: 0.00s; }
.reveal-group.reveal--in > *:nth-child(2)  { transition-delay: 0.10s; }
.reveal-group.reveal--in > *:nth-child(3)  { transition-delay: 0.20s; }
.reveal-group.reveal--in > *:nth-child(4)  { transition-delay: 0.30s; }
.reveal-group.reveal--in > *:nth-child(5)  { transition-delay: 0.40s; }
.reveal-group.reveal--in > *:nth-child(6)  { transition-delay: 0.50s; }
.reveal-group.reveal--in > *:nth-child(7)  { transition-delay: 0.60s; }
.reveal-group.reveal--in > *:nth-child(8)  { transition-delay: 0.70s; }
.reveal-group.reveal--in > *:nth-child(9)  { transition-delay: 0.80s; }
.reveal-group.reveal--in > *:nth-child(10) { transition-delay: 0.90s; }
.reveal-group.reveal--in > *:nth-child(11) { transition-delay: 1.00s; }
.reveal-group.reveal--in > *:nth-child(12) { transition-delay: 1.10s; }

/* Variants */
.reveal--scale { transform: translateY(16px) scale(0.96); }
.reveal--scale.reveal--in { transform: translateY(0) scale(1); }
.reveal--left { transform: translateX(-32px); }
.reveal--left.reveal--in { transform: translateX(0); }
.reveal--right { transform: translateX(32px); }
.reveal--right.reveal--in { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-group > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Subtle continuous animations (background blobs, gradient shifts) */
@keyframes float-slow {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(8px, -12px); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(0, 255, 122, 0.2); }
  50% { box-shadow: 0 0 0 8px rgba(0, 255, 122, 0.05); }
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes ring-pulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Apply to existing elements */
.float-card .dot { animation: pulse-glow 2.4s ease-in-out infinite; }
.hero-floats .float-card { animation: float-slow 6s ease-in-out infinite; }
.hero-floats .float-card:nth-child(2) { animation-delay: -2s; }
.hero-floats .float-card:nth-child(3) { animation-delay: -4s; }

/* ============================================================
   SPACING UTILITIES — 4pt scale, replace inline styles
   ============================================================ */
/* Vertical stack (flex column with gap) */
.stack { display: flex; flex-direction: column; }
.stack-2 { gap: var(--s-2); }   /* 8 */
.stack-3 { gap: var(--s-3); }   /* 12 */
.stack-4 { gap: var(--s-4); }   /* 16 */
.stack-5 { gap: var(--s-5); }   /* 24 */
.stack-6 { gap: var(--s-6); }   /* 32 */
.stack-7 { gap: var(--s-7); }   /* 48 */

/* Horizontal row (flex row with gap) */
.row { display: flex; flex-wrap: wrap; align-items: center; }
.row-2 { gap: var(--s-2); }
.row-3 { gap: var(--s-3); }
.row-4 { gap: var(--s-4); }
.row-5 { gap: var(--s-5); }
.row-6 { gap: var(--s-6); }
.row.items-start { align-items: flex-start; }
.row.items-stretch { align-items: stretch; }

/* Equal-column grids */
.grid { display: grid; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); }
.gap-6 { gap: var(--s-6); }
.gap-7 { gap: var(--s-7); }

/* Margin top utilities */
.mt-1 { margin-top: var(--s-1); }   /* 4 */
.mt-2 { margin-top: var(--s-2); }   /* 8 */
.mt-3 { margin-top: var(--s-3); }   /* 12 */
.mt-4 { margin-top: var(--s-4); }   /* 16 */
.mt-5 { margin-top: var(--s-5); }   /* 24 */
.mt-6 { margin-top: var(--s-6); }   /* 32 */
.mt-7 { margin-top: var(--s-7); }   /* 48 */
.mt-8 { margin-top: var(--s-8); }   /* 64 */

/* Margin bottom utilities */
.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }

/* Section padding variants — apply on top of .section */
.section.pt-sm { padding-top: var(--s-7); }   /* 48 */
.section.pt-md { padding-top: var(--s-8); }   /* 64 */
.section.pb-sm { padding-bottom: var(--s-7); }
.section.pb-md { padding-bottom: var(--s-8); }

/* Two-column section pattern (common) */
.section.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);    /* 48 */
  align-items: start;
}
.section.two-col.center { align-items: center; }

/* Layout alignment helpers */
.align-self-start { align-self: flex-start; }
.text-center { text-align: center; }
.full-width { width: 100%; }
.max-w-prose { max-width: 72ch; }

/* ---------- Layout ----------
   .page = full-bleed so backgrounds reach the viewport edge.
   Sections use --gutter = max(pad, (viewport - container) / 2)
   so content stays centered at container width while bg fills 100vw.
*/
.page { width: 100%; max-width: 100%; margin: 0; }
.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
}
.section-tight {
  padding-top: clamp(32px, 4vw, 64px);
  padding-bottom: clamp(32px, 4vw, 64px);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- Header / Hero ---------- */
.hero-wrap {
  position: relative;
  overflow: hidden;
  /* Fill the full viewport so no white gap below the hero */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.hero-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/hero-bg.png') center/cover no-repeat;
  z-index: 0;
}
.hero-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 90%, var(--bg) 100%);
  z-index: 0;
  pointer-events: none;
}
.hero-wrap > * { position: relative; z-index: 1; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  gap: 24px;
  flex-wrap: nowrap;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* Initial: fully transparent, floats over hero background */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease, padding 0.25s ease, box-shadow 0.3s ease;
}
/* After user scrolls — glass appears (dark default) */
body.scrolled .nav {
  background: rgba(4, 4, 14, 0.95);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--stroke);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  padding-top: 12px;
  padding-bottom: 12px;
}
/* WordPress admin bar — shift fixed nav down so it doesn't overlap the bar.
   WP adds .admin-bar to <html>; bar is 32px on desktop, 46px on mobile. */
.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .nav { top: 46px; }
}
/* Nav offset reserved for content that comes after .nav.
   --nav-offset = nav height; --nav-gap = breathing room between nav and content.
   Apply ONLY to interior content, not to body — so hero illustration
   reaches the top edge behind the (initially transparent) nav. */
:root {
  --nav-offset: 84px;
  --nav-gap: clamp(32px, 4vw, 64px);
}
/* All layouts: nav is a sibling (possibly non-adjacent) of hero-wrap/page-hero/section */
.hero-wrap > .nav ~ .hero { padding-top: calc(var(--nav-offset) + var(--nav-gap)); }
.page > nav ~ .hero-wrap > .hero { padding-top: calc(var(--nav-offset) + var(--nav-gap)); }
.page > nav ~ .page-hero { padding-top: calc(var(--nav-offset) + var(--nav-gap) + var(--s-5)); }
.page > nav ~ section:not(.page-hero):not(.hero-wrap):not(.stats-section) { padding-top: calc(var(--nav-offset) + var(--nav-gap)); }
.nav-left { display: flex; align-items: center; gap: 48px; }
.brand img { height: 32px; width: auto; }
.nav-menu {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 99px;
  box-shadow: var(--shadow-button);
}
.nav-menu a {
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--color);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-menu a.active { background: rgba(77, 122, 255, 0.18); color: var(--primary); }
.nav-menu a:not(.active):hover { background: rgba(200, 220, 255, 0.08); color: var(--ink); }

/* Nav dropdown (hover-open, with nested support for White-label) */
.nav-item-has-children { position: relative; }
.nav-item-has-children > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-item-has-children > a svg { transition: transform 0.2s ease; flex-shrink: 0; }
.nav-item-has-children:hover > a svg { transform: rotate(180deg); }
.nav-item-has-children.nav-item--nested:hover > a svg { transform: rotate(0); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 340px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--s-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
}
.nav-item-has-children:hover > .nav-dropdown,
.nav-dropdown:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Bridge to prevent gap between trigger and dropdown */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.nav-dropdown a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink);
  white-space: normal;
  text-align: left;
}
.nav-dropdown a:hover { background: var(--bg); color: var(--primary); }
.nav-dropdown a svg { flex-shrink: 0; color: var(--color); }

/* Nested cascade for White-label */
.nav-dropdown .nav-item-has-children { position: static; }
.nav-dropdown--nested {
  top: calc(-1 * var(--s-2));
  left: 100%;
  margin-left: var(--s-2);
}
.nav-dropdown--nested::before {
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--s-2));
  right: auto;
  width: var(--s-2);
  height: auto;
}
.nav-right { display: flex; align-items: center; gap: 16px; }

/* ── Hamburger button (desktop: hidden) ─────────────────── */
.ham {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-s);
  color: var(--ink);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.ham span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  transform-origin: center;
}
/* Animate to × when open */
.ham.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ham.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ham.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hero {
  padding: var(--s-7) clamp(420px, 42vw, 1100px) var(--s-7) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  position: relative;
}
/* Inside hero-wrap flex container — grow to fill viewport height above tech-strip */
.hero-wrap > .hero {
  flex: 1;
  justify-content: center;
}
/* Fallback for browsers without dvh support */
.hero:has(.hero-floats) {
  min-height: clamp(440px, 30vw, 900px);
}
.hero h1 {
  font-weight: 800;
  font-size: 46px;
  line-height: 62px;
  color: var(--ink);
}
.hero h1 span { display: inline; }
.hero-sub { font-size: var(--fs-body-l); line-height: var(--lh-body-l); color: var(--color); }

/* Hero stat row — 3 trust metrics below the buttons (matches prototype) */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  margin-top: var(--s-2);
  padding-top: var(--s-5);
  border-top: 1px solid var(--stroke);
  max-width: 620px;
}
.hero-stat { flex: 1 1 150px; min-width: 140px; }
.hero-stat-value {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: var(--fs-display-s);
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin-bottom: var(--s-2);
}
.hero-stat-value svg { width: 28px; height: auto; }
.hero-stat-label {
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--color);
}
.hero-actions { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }

/* Floating cards in hero — positioned in the visible area BELOW the nav.
   inset-top = nav-offset so cards never sit behind the transparent nav. */
.hero-floats { position: absolute; inset: var(--nav-offset) 0 0 0; pointer-events: none; }
/* ---- Glass system ----
   Light sections: rgba(255,255,255,0.60–0.72) + blur  → frosted white
   Dark sections : rgba(255,255,255,0.10–0.14) + blur  → deep glass
   ------------------------------------------------------------------ */

.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 16px;
  padding: 12px 20px 12px 16px;
  box-shadow: var(--shadow-card);
}
.float-card .dot { width: 8px; height: 8px; border-radius: 50%; background: #00ff7a; box-shadow: 0 0 0 4px rgba(0, 255, 122, 0.2); flex-shrink: 0; }
.float-card .ft { font-weight: 600; font-size: var(--fs-title-s); line-height: var(--lh-title-s); color: #07112f; } /* dark ink on light glass bg */
.float-card .fs { font-weight: 400; font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: #50566b; }
/* Top-right — "Am hiểu thị trường nội địa" */
.float-1 {
  top: clamp(8px, 1vw, 28px);
  right: clamp(40px, 4.2vw, 180px);
  max-width: clamp(240px, 19vw, 460px);
}
/* Middle-left — "3 ngôn ngữ" */
.float-2 {
  top: 42%;
  right: clamp(240px, 24vw, 820px);
  max-width: clamp(140px, 11vw, 260px);
}
/* Lower-right — "Tăng hiệu quả với AI" */
.float-3 {
  top: 70%;
  right: clamp(48px, 5vw, 200px);
  max-width: clamp(240px, 19vw, 440px);
}

/* Tech logos strip */
.tech-strip {
  background: rgba(0, 2, 100, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 16px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  overflow: hidden;     /* clip the marquee */
}
.tech-strip-title { font-size: 16px; color: var(--ink); text-align: left; padding: 0 var(--gutter); }

/* Marquee viewport — fade edges + clip */
.tech-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
}
.tech-logos {
  display: flex;
  flex-wrap: nowrap;
  gap: 48px;
  width: max-content;
  animation: tech-marquee 40s linear infinite;
  will-change: transform;
}
.tech-marquee:hover .tech-logos { animation-play-state: paused; }
@keyframes tech-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }   /* exactly half because list is duplicated */
}
@media (prefers-reduced-motion: reduce) {
  .tech-logos { animation: none; }
  .tech-marquee { overflow-x: auto; }
}
.tech-pill {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px dashed var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tech-pill img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* Client logo lockup — placeholder logos (monogram mark + wordmark). Swap for real <img> logos later. */
.client-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.client-logo .mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}
.client-logo .name {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.client-logo__img {
  height: 44px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
}

/* ---------- Stats ---------- */
.stats-section {
  padding: var(--s-7) var(--gutter) var(--section-y);
  background: rgba(0, 2, 100, 0.05);
}
.stats-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 16px;
  padding: 20px;
  border-radius: 28px;
  overflow: hidden;
}
/* Layer 1 — background image (the blue wave photo) — position shifts for parallax */
.stats-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/stats-bg.png');
  background-size: cover;
  background-position: center calc(50% + var(--stats-parallax, 0px));
  border-radius: 28px;
  z-index: 0;
}
/* Layer 2 — very light colour wash so waves stay vivid */
.stats-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(6, 18, 150, 0.28) 0%, rgba(12, 35, 210, 0.14) 100%);
  border-radius: 28px;
  z-index: 0;
}
.stats-col { display: flex; flex-direction: column; gap: 16px; position: relative; z-index: 1; }
.stat-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  padding: 24px;
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  min-height: 168px;
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.stat-card::after {
  content: '';
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle at center, rgba(0, 220, 255, 0.18) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
/* stat-card: display only — no hover state */
.stat-card > * { position: relative; z-index: 1; }
/* Big card — slightly darker navy glass to anchor the left column */
.stat-card.big {
  background: rgba(8, 18, 110, 0.45);
  border-color: rgba(255, 255, 255, 0.14);
  min-height: 100%;
}
/* Numbers — teal gradient, bigger inside the big card */
.stat-num {
  font-weight: 800;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -1px;
  background: var(--grad-cyan);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}
.stat-card.big .stat-num {
  font-size: 56px;
  margin-bottom: 12px;
}
.stat-title { font-weight: 600; font-size: var(--fs-title-l); line-height: var(--lh-title-l); color: var(--white); }
.stat-body { font-size: var(--fs-body-l); line-height: var(--lh-body-l); color: rgba(255, 255, 255, 0.8); }

/* ---------- Trust pills strip (industries · platforms · languages) ---------- */
.trust-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--gutter);
  background: rgba(0, 2, 100, 0.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid var(--stroke);
}
.trust-pill {
  padding: 6px 16px;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 999px;
  font-size: var(--fs-body-s);
  line-height: 1;
  font-weight: 500;
  color: var(--color);
  white-space: nowrap;
}
.trust-sep { color: color-mix(in srgb, var(--color) 45%, transparent); font-weight: 400; }
.trust-langs { font-size: var(--fs-body-s); font-weight: 500; color: var(--color); white-space: nowrap; }


/* ---------- Problem ---------- */

.problem-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.problem-left { display: flex; flex-direction: column; gap: 32px; }
.problem-right { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.problem-col { display: flex; flex-direction: column; gap: 16px; }
.problem-col-1 { padding-top: 48px; }
.problem-col-2 { padding-bottom: 48px; }
.problem-card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.problem-card::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -40%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 0, 60, 0.10) 0%, transparent 70%);
  pointer-events: none;
  transition: opacity 0.3s ease;
  opacity: 0;
}
/* problem-card: display only — no hover state */
.problem-card .problem-icon {
  background: var(--surface);
  color: #d9352a;
}
.problem-icon {
  width: 48px;
  height: 48px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.problem-card h3 { font-weight: 700; font-size: var(--fs-card-title); line-height: var(--lh-card-title); color: var(--ink); }
.problem-card p { font-size: var(--fs-title-s); line-height: var(--lh-title-s); color: var(--color); }

/* ---------- Service ---------- */
.service-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
  /* background handled by .section.service-section rule above */
}
.section-heading { display: flex; flex-direction: column; gap: 12px; position: relative; }
.section-heading h2 { font-weight: 800; font-size: var(--fs-display-s); line-height: var(--lh-display-s); color: var(--ink); }
.section-heading p { font-size: var(--fs-body-l); line-height: var(--lh-body-l); color: var(--color); max-width: 1088px; }
/* Optional eyebrow label above section heading */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: var(--fs-label-l);
  line-height: var(--lh-label-l);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--primary);
  padding: 6px 14px;
  background: rgba(0, 60, 255, 0.08);
  border-radius: 999px;
  align-self: flex-start;
  margin-bottom: 4px;
}
.section-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 60, 255, 0.18);
}
.service-grid {
  display: grid;
  grid-template-columns: 420px 1fr 1fr 1fr 1fr;
  gap: 16px;
  height: 420px;
}
.service-card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease, border-color 0.32s ease, background 0.32s ease;
}
.service-card:not(.feature):not(.dark):hover {
  transform: translateY(-6px);
  background: #14143a;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(77, 122, 255, 0.5), 0 0 20px rgba(77, 122, 255, 0.15);
  border-color: rgba(77, 122, 255, 0.6);
}
.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-xl);
  padding: 1px;
  background: linear-gradient(135deg, rgba(45, 116, 230, 0.3), rgba(14, 40, 211, 0.0));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.service-card { position: relative; overflow: hidden; }
.service-card:hover::after { opacity: 1; }
.service-card-content { display: flex; flex-direction: column; gap: 16px; }
.service-card h3 { font-weight: 700; font-size: var(--fs-card-title); line-height: var(--lh-card-title); color: var(--ink); }
.service-card p { font-size: var(--fs-title-s); line-height: var(--lh-title-s); color: var(--color); }
.service-card.feature {
  background: var(--grad-dark);
  padding: 32px;
  color: var(--white);
}
.service-card.feature h3 { color: var(--white); font-size: var(--fs-headline-m); line-height: var(--lh-headline-m); }
.service-card.feature p { color: var(--white); }
.service-card.feature .feature-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.service-card.feature .feature-cta span { font-weight: 600; font-size: 18px; color: var(--white); }
.service-card.dark {
  background: #0a0a28;   /* dark always — not token-based so it never goes white */
  color: var(--white);
}
.service-card.dark h3 { color: var(--white); }
.service-card.dark p { color: var(--white); }
.service-card.dark .btn-link {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: var(--white);
}
.service-card.dark .btn-link svg { color: var(--white); }

/* ---------- Process ---------- */
.process-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
  /* background handled by .section.process-section rule above */
}
.process-body { display: grid; grid-template-columns: 420px 1fr; gap: 32px; align-items: center; }
.process-steps { display: flex; flex-direction: column; }
.process-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  border-radius: 16px;
  cursor: pointer;
  /* no hover state — active state only */
}
.process-step .num {
  width: 32px;
  font-weight: 600;
  font-size: 18px;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.process-step.active {
  background: var(--primary);
  color: var(--white);
}
.process-step.active .num {
  background: var(--grad-cyan);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.process-card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: var(--shadow-card);
}
.process-num-badge {
  width: 88px;
  padding: 8px;
  border-radius: 12px;
  background: var(--grad-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 36px;
  line-height: 44px;
  color: var(--white);
}
.process-card-title { font-weight: 700; font-size: var(--fs-headline-m); line-height: var(--lh-headline-m); color: var(--ink); }
.process-card-body { font-size: var(--fs-title-s); line-height: var(--lh-title-s); color: var(--color); }
.process-divider { height: 1px; background: var(--stroke); width: 100%; }
.process-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.process-meta-label { font-weight: 600; font-size: 16px; color: var(--ink); }
.process-meta-value { font-size: 16px; color: var(--color); }

/* Service detail card — same as process-card but with CTA button at bottom */
.svc-detail-card { justify-content: space-between; }

/* ---------- Contact ---------- */
.contact-section {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  overflow: hidden;
}
.contact-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/contact-bg.png') center/cover no-repeat, #001478;
  z-index: 0;
}
/* Light wash only — let the swirl texture breathe */
.contact-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 8, 100, 0.42) 0%, rgba(0, 20, 140, 0.28) 100%);
  z-index: 0;
}
.contact-section > * { position: relative; z-index: 1; }

.contact-left { display: flex; flex-direction: column; gap: 24px; color: var(--white); }
.contact-left h2 { font-weight: 800; font-size: var(--fs-display-s); line-height: var(--lh-display-s); color: var(--white); }
.contact-left p { font-size: var(--fs-body-l); line-height: var(--lh-body-l); color: var(--white); }
.contact-checks { display: flex; flex-direction: column; max-width: 420px; }
.contact-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-weight: 600;
  font-size: 16px;
  color: var(--white);
}
.contact-check svg { color: #00ffff; flex-shrink: 0; }
/* Base contact card (always overridden by more-specific selectors) */
.contact-card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: var(--shadow-card);
}
.contact-card h3 { font-weight: 700; font-size: var(--fs-headline-m); line-height: var(--lh-headline-m); color: var(--ink); }
.contact-card-sub { font-size: var(--fs-title-s); line-height: var(--lh-title-s); color: var(--color); }

/* Deep dark glass when contact card sits on the dark contact-section background */
.contact-section .contact-card {
  background: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 12px 48px rgba(0, 0, 100, 0.30), inset 0 1px 0 rgba(255,255,255,0.18);
}
.contact-section .contact-card h3 { color: var(--white); }
.contact-section .contact-card-sub { color: rgba(255, 255, 255, 0.72); }
.contact-section .contact-card .form-field label { color: rgba(255, 255, 255, 0.88); }
.contact-section .contact-card .form-field input,
.contact-section .contact-card .form-field select,
.contact-section .contact-card .form-field textarea {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--white);
}
.contact-section .contact-card .form-field input::placeholder,
.contact-section .contact-card .form-field textarea::placeholder { color: rgba(255, 255, 255, 0.40); }
.contact-section .contact-card .form-field input:focus,
.contact-section .contact-card .form-field select:focus,
.contact-section .contact-card .form-field textarea:focus {
  border-color: rgba(0, 200, 255, 0.60);
  background: rgba(255, 255, 255, 0.15);
}
.contact-section .contact-card .form-field select option { background: #001478; color: var(--white); }
/* Custom white arrow for select inside dark CTA section */
.contact-section .contact-card .form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  color: var(--white);
}
.contact-section .contact-card .form-field select option[value=""] { color: rgba(255,255,255,0.40); }
.contact-section .contact-card .process-divider { background: rgba(255, 255, 255, 0.18); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-weight: 500; font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: var(--ink); }
.form-field input, .form-field select, .form-field textarea {
  background: var(--bg-soft);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease;
  width: 100%;
  box-sizing: border-box;
}
/* Placeholder text — inputs & textarea only */
.form-field input::placeholder,
.form-field textarea::placeholder { color: #a6b2c7; }
/* Select: custom arrow, remove browser default */
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2350566b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
/* Select placeholder state (empty value) */
.form-field select:required:invalid,
.form-field select[value=""],
.form-field select option[value=""] { color: #a6b2c7; }
/* Selected option shows in ink color */
.form-field select option { color: var(--ink); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 60, 255, 0.08);
}
.form-field textarea { resize: vertical; min-height: 96px; }

/* Contact form card on white background (contact page, not dark CTA section) */
.section:not(.contact-section) > .contact-card,
.split-2 > .contact-card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: relative;
}
.section:not(.contact-section) > .contact-card h3,
.split-2 > .contact-card h3 { color: var(--ink); }
.section:not(.contact-section) > .contact-card .contact-card-sub,
.split-2 > .contact-card .contact-card-sub { color: var(--color); }
.section:not(.contact-section) > .contact-card .form-field label,
.split-2 > .contact-card .form-field label { color: var(--ink); }

/* ---------- Article ---------- */
.article-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: var(--section-y) var(--gutter);
}
.article-head {
  display: flex;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
}
.article-head-left { display: flex; flex-direction: column; gap: 8px; }
.article-head-left h2 { font-weight: 800; font-size: var(--fs-display-s); line-height: var(--lh-display-s); color: var(--ink); }
.article-head-left p { font-size: var(--fs-body-l); line-height: var(--lh-body-l); color: var(--color); }
.article-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.article-card { display: flex; flex-direction: column; gap: 16px; transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease; }
.article-card:hover { transform: translateY(-6px); }
.article-card:hover h3 { color: var(--primary); }
.article-card .thumb {
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  overflow: hidden;
}
.article-card h3 { transition: color 0.2s ease; }
.article-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.article-card h3 { font-weight: 600; font-size: var(--fs-title-m); line-height: var(--lh-title-m); color: var(--ink); }
.article-card .date { font-size: var(--fs-body-l); line-height: var(--lh-body-l); color: var(--color); }

/* ---------- Footer ---------- */
.footer-section {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 96px var(--gutter) 48px;
  overflow: hidden;
  background: var(--surface);
}
.footer-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/footer-bg.png') center/cover no-repeat;
  opacity: 0.5;
  z-index: 0;
}
.footer-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(0,0,0,0) 100%);
  z-index: 0;
}
.footer-section > * { position: relative; z-index: 1; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 48px;
}
.footer-brand { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.footer-brand img { height: 32px; width: auto; align-self: flex-start; }
.footer-tagline { font-size: var(--fs-body-l); line-height: var(--lh-body-l); color: var(--ink); }
.footer-contacts { display: flex; flex-direction: column; gap: 8px; }
.footer-contact {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color);
}
.footer-contact svg { color: var(--color); flex-shrink: 0; }
.footer-col h4 { font-weight: 700; font-size: var(--fs-label-l); line-height: var(--lh-title-s); color: var(--ink); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.06em; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-col a, .footer-col li span { font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: var(--color); transition: color 0.15s ease; }
.footer-col a:hover { color: var(--ink); }
/* Liên hệ column — icon + text rows */
.footer-col--contact li { display: flex; align-items: flex-start; gap: 8px; }
.footer-col--contact svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--color); }
.footer-col--contact a { color: var(--color); }
.footer-col--contact a:hover { color: var(--ink); }
.footer-divider { height: 1px; background: var(--stroke); width: 100%; }
.footer-bottom {
  display: flex;
  gap: 48px;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
  color: var(--color);
}
.footer-bottom-left { flex: 1; }
.footer-bottom a:hover { color: var(--ink); }

/* ---------- Page hero (sub-pages) ----------
   Clean subtle background — no 3D illustration overlap.
*/
.page-hero {
  position: relative;
  padding: var(--s-8) var(--gutter) var(--s-7);
  text-align: left;
  overflow: hidden;
  /* Dark default: blue glow fades into page bg — no white strip */
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(77, 122, 255, 0.14) 0%, rgba(77, 122, 255, 0) 70%),
    linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
}
/* Decorative dot grid pattern */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(45, 116, 230, 0.08) 1px, transparent 0);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 70%);
  pointer-events: none;
}
/* Floating blobs */
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 200px at 8% 30%, rgba(0, 60, 255, 0.06) 0%, transparent 100%),
    radial-gradient(circle 240px at 92% 70%, rgba(45, 116, 230, 0.08) 0%, transparent 100%);
  pointer-events: none;
  animation: float-slow 8s ease-in-out infinite;
}
/* Tighten rhythm when content follows page-hero directly */
.page-hero + .section,
.page-hero + .article-section,
.page-hero + .faq-section { padding-top: var(--s-7); }
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 {
  font-weight: 800;
  font-size: var(--fs-display-m);
  line-height: var(--lh-display-m);
  color: var(--ink);
  margin: 0 0 var(--s-3);
  max-width: clamp(720px, 70vw, 960px);
}
.page-hero p {
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: var(--color);
  max-width: clamp(480px, 55vw, 720px);
  margin: 0;
}

/* ═══════════════════════════════════════════════════
   Service hero wrapper — gradient bg, no full-height
═══════════════════════════════════════════════════ */
/* Kill the full-viewport height used on homepage */
.svc-hero-wrap { min-height: 0; }
/* Replace hero-bg.png with a clean brand gradient */
.svc-hero-wrap::before {
  background:
    radial-gradient(ellipse 70% 80% at 100% 20%, rgba(59, 130, 246, 0.13) 0%, transparent 60%),
    radial-gradient(ellipse 55% 65% at 5% 100%,  rgba(99, 102, 241, 0.09) 0%, transparent 55%),
    linear-gradient(160deg, #f2f7ff 0%, #ffffff 55%, #faf5ff 100%);
}
/* Fade-to-white overlay can stay */

/* ═══════════════════════════════════════════════════
   Service hero — single column, text left
═══════════════════════════════════════════════════ */
.hero.svc-hero {
  /* Override the homepage hero's huge right padding */
  padding-right: var(--gutter);
  /* Flex-column comes from .hero base; no justify-content override needed */
}
.svc-hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  max-width: 680px;
}

/* ═══════════════════════════════════════════════════
   Service stats bar — homepage stats visual style
═══════════════════════════════════════════════════ */
.svc-stat-bar { padding: 0 var(--gutter) var(--section-y); }
.svc-stat-grid-wrap {
  position: relative;
  border-radius: 28px;
  padding: clamp(20px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  overflow: hidden;
}
/* Layer 1 — same wave background image as homepage stats */
.svc-stat-grid-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/stats-bg.png');
  background-size: cover;
  background-position: center;
  z-index: 0;
}
/* Layer 2 — same colour tint */
.svc-stat-grid-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(6, 18, 150, 0.28) 0%, rgba(12, 35, 210, 0.14) 100%);
  z-index: 0;
}
.svc-stat-card {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  padding: 28px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.svc-stat-num {
  font-size: clamp(26px, 2.6vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
  background: var(--grad-cyan);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}
.svc-stat-unit {
  font-size: clamp(13px, 1.2vw, 19px);
  font-weight: 600;
  /* Inherits gradient from parent svc-stat-num */
}
.svc-stat-label {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.60);
}

/* ═══════════════════════════════════════════════════
   Service "why" — 2-col with pain point cards
═══════════════════════════════════════════════════ */
.svc-why-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(48px, 5vw, 88px);
  align-items: start;
}
.svc-why-left { display: flex; flex-direction: column; gap: var(--s-4); }
.svc-why-left h2 {
  font-weight: 800;
  font-size: var(--fs-display-s);
  line-height: var(--lh-display-s);
  color: var(--ink);
}
.svc-why-lead {
  font-size: var(--fs-body-l);
  line-height: 1.7;
  font-weight: 700;
  color: var(--primary);
}
.svc-why-body {
  font-size: var(--fs-body-m);
  line-height: 1.7;
  color: var(--color);
}
/* Pain point cards */
.svc-pain-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.svc-pain-col { display: flex; flex-direction: column; gap: 14px; }
.svc-pain-right { margin-top: 32px; }
.pain-card {
  background: var(--surface);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.55;
}
.pain-x {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ef4444;
  font-size: 11px;
  font-weight: 900;
  margin-top: 1px;
}

/* btn-ghost removed — use .btn-white instead (see button design system above) */

/* Breadcrumb */
.crumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  color: var(--color);
  margin-bottom: 16px;
  justify-content: center;
}
.crumbs a { color: var(--color); }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: #c4cad9; }
.crumbs .current { color: var(--ink); font-weight: 600; }

/* ---------- FAQ Accordion ---------- */
.faq-section { padding: var(--section-y) var(--gutter) calc(var(--section-y) * 1.5); display: flex; flex-direction: column; gap: 24px; }
.faq-section h2 { font-weight: 800; font-size: var(--fs-display-s); line-height: var(--lh-display-s); color: var(--ink); }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.faq-item summary { list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--ink);
}
.faq-q .chev { transition: transform 0.2s ease; flex-shrink: 0; color: var(--color); }
.faq-item[open] .chev { transform: rotate(180deg); color: var(--primary); }
.faq-a {
  font-size: 16px;
  line-height: 24px;
  color: var(--color);
  padding: 0 24px 20px;
}

/* ---------- Filter tabs ---------- */
.filter-bar { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.filter-label { font-weight: 600; font-size: 16px; color: var(--ink); }
.tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 99px;
  box-shadow: var(--shadow-button);
}
.tabs button {
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  color: var(--color);
  transition: background 0.15s ease, color 0.15s ease;
}
.tabs button.active { background: var(--primary); color: var(--white); }
.tabs button:not(.active):hover { background: var(--bg); color: var(--ink); }

/* ---------- Blog detail layout ---------- */
.blog-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 32px;
  border: 1px solid var(--stroke);
}
.blog-cover img { width: 100%; height: 100%; object-fit: cover; }
.blog-detail-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  padding: 32px var(--gutter) 64px;
}
.blog-body { display: flex; flex-direction: column; gap: 24px; }
.blog-body h2 { font-weight: 700; font-size: var(--fs-headline-m); line-height: var(--lh-headline-m); color: var(--ink); margin-top: 8px; }
.blog-body h3 { font-weight: 700; font-size: 22px; line-height: 30px; color: var(--ink); margin-top: 4px; }
.blog-body p { font-size: 18px; line-height: 28px; color: var(--color); }
.blog-body img { width: 100%; border-radius: 16px; border: 1px solid var(--stroke); }
.blog-body ul, .blog-body ol { padding-left: 24px; }
.blog-body li { font-size: 18px; line-height: 28px; color: var(--color); margin-bottom: 4px; }
.blog-body blockquote {
  border-left: 4px solid var(--primary);
  padding: 8px 0 8px 24px;
  font-size: 20px;
  line-height: 30px;
  color: var(--ink);
  font-weight: 500;
  margin: 0;
}
.toc-card {
  background: var(--bg);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 24px;
  position: sticky;
  top: 24px;
  height: fit-content;
}
.toc-card h4 { font-weight: 600; font-size: 14px; color: var(--color); text-transform: uppercase; margin-bottom: 12px; letter-spacing: 0.5px; }
.toc-card ol { list-style: decimal; padding-left: 20px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.toc-card a { font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: var(--ink); }
.toc-card a:hover { color: var(--primary); }

/* ---------- Map card (clickable, opens Google Maps) ---------- */
.map-card {
  border-radius: var(--r-2xl);
  border: 1px solid var(--stroke);
  background:
    radial-gradient(circle at 30% 30%, rgba(0, 60, 255, 0.10) 0%, rgba(0, 60, 255, 0) 50%),
    radial-gradient(circle at 70% 70%, rgba(45, 116, 230, 0.10) 0%, rgba(45, 116, 230, 0) 50%),
    linear-gradient(135deg, #f0f5ff 0%, #dbe5f5 100%);
  position: relative;
  height: 280px;
  display: grid;
  grid-template-areas:
    "pin"
    "info"
    "cta";
  grid-template-rows: 1fr auto auto;
  padding: var(--s-5);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease;
}
.map-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.map-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 60, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 60, 255, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.map-card .map-pin {
  grid-area: pin;
  align-self: center;
  justify-self: center;
  width: 64px;
  height: 64px;
  border-radius: var(--r-full);
  background: var(--primary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 60, 255, 0.35);
  position: relative;
  z-index: 1;
}
.map-card .map-info {
  grid-area: info;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin-bottom: var(--s-3);
}
.map-card .map-cta {
  grid-area: cta;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 600;
  font-size: var(--fs-title-s);
  color: var(--primary);
}

/* ---------- Value icons grid ---------- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.value-card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.value-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
/* value-card: display only — no hover state */
.value-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}
.value-card h3 { font-weight: 700; font-size: 20px; line-height: 28px; color: var(--ink); }
.value-card p { font-size: var(--fs-title-s); line-height: var(--lh-title-s); color: var(--color); }

/* ---------- Team grid ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.team-card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  /* team-card: display only — no hover state */
}
.team-photo {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #dbe5f5 0%, #f9fafd 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 48px;
  color: rgba(0, 60, 255, 0.4);
}
.team-info { padding: 20px 24px 24px; }
.team-info h3 { font-weight: 700; font-size: var(--fs-title-m); line-height: var(--lh-title-m); color: var(--ink); }
.team-info p { font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: var(--color); margin-top: 4px; }

/* ---------- Case study cards ---------- */
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.case-card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease, border-color 0.32s ease, background 0.32s ease;
}
.case-card:hover {
  transform: translateY(-6px);
  background: #14143a;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(77, 122, 255, 0.5), 0 0 20px rgba(77, 122, 255, 0.15);
  border-color: rgba(77, 122, 255, 0.6);
}
.case-thumb { aspect-ratio: 16 / 10; overflow: hidden; }
.case-thumb img { width: 100%; height: 100%; object-fit: cover; }
.case-info { padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.case-tag { font-size: 12px; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: 0.5px; }
.case-info h3 { font-weight: 700; font-size: var(--fs-card-title); line-height: var(--lh-card-title); color: var(--ink); }
.case-info p { font-size: var(--fs-title-s); line-height: var(--lh-title-s); color: var(--color); }

/* ---------- Project detail — single hero thumbnail ---------- */
.project-thumb-hero {
  width: 100%;
  max-height: clamp(320px, 42vw, 580px);
  overflow: hidden;
  padding: 0 var(--gutter);
}
.project-thumb-hero img {
  width: 100%;
  height: clamp(320px, 42vw, 580px);
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: var(--r-2xl);
}

/* Legacy cover gallery — kept for backward compat but no longer rendered */
.case-cover {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  padding: 0 var(--gutter);
}
.case-cover-img {
  aspect-ratio: 3 / 4;
  border-radius: var(--r-2xl);
  overflow: hidden;
  border: 1px solid var(--stroke);
  background: var(--bg);
}
.case-cover-img img { width: 100%; height: 100%; object-fit: cover; }

/* Case study hero: 2-col (info left, stats right) */
.case-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: center;
}
.case-hero-info {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.case-hero-info h1 { color: var(--ink); }

/* 3 callout cards (Vấn đề / Giải pháp / Kết quả) */
.case-callouts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.case-callout {
  border-radius: var(--r-2xl);
  padding: var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
/* case-callout: display only — no hover state */
.case-callout h3 {
  font-weight: 700;
  font-size: var(--fs-headline-s);
  line-height: var(--lh-headline-s);
}
.case-callout p {
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
}
.case-callout--dark {
  background: var(--grad-dark);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--white);
}
.case-callout--dark h3 { color: var(--white); }
.case-callout--dark p { color: rgba(255, 255, 255, 0.78); }
.case-callout--light {
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-card);
}
.case-callout--light h3 { color: var(--ink); }
.case-callout--light p { color: var(--color); }

/* Tech stack grid */
.case-tech-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.case-tech-item {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  text-align: center;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.case-tech-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.case-tech-item img { width: 40px; height: 40px; object-fit: contain; }
.case-tech-item p { color: var(--ink); }

@media (max-width: 1024px) {
  .case-cover { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
  .case-callouts { grid-template-columns: 1fr; }
  .case-hero { grid-template-columns: 1fr; }
  .case-tech-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .case-cover { grid-template-columns: 1fr; }
  .case-tech-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Case study detail stats ---------- */
.case-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);     /* 16px (was 24) — tighter when inside hero col */
}
.case-stat {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-xl);
  padding: var(--s-6);    /* 32px (was 48) — narrower hero col */
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}
/* case-stat: display only — no hover state */
.case-stat-num {
  font-weight: 800;
  font-size: var(--fs-display-s);     /* 36px — fits narrower hero col */
  line-height: var(--lh-display-s);
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.5px;
}
.case-stat-label {
  font-weight: 500;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--color);
}
@media (max-width: 768px) {
  .case-stats { grid-template-columns: 1fr; }
  .case-stat { padding: var(--s-5); }
}

/* ---------- Feature list ---------- */
.feature-list { display: flex; flex-direction: column; gap: 16px; }
.feature-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 16px;
}
.feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #e5edff 0%, #c9d8ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}
.feature-row h4 { font-weight: 700; font-size: var(--fs-title-m); line-height: var(--lh-title-m); color: var(--ink); margin-bottom: 4px; }
.feature-row p { font-size: var(--fs-title-s); line-height: var(--lh-title-s); color: var(--color); }

/* ---------- Pricing / package cards ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.price-card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.price-card.featured {
  background: var(--grad-dark);
  color: var(--white);
  border-color: transparent;
}
.price-card.featured h3, .price-card.featured .price, .price-card.featured li { color: var(--white); }
.price-card h3 { font-weight: 700; font-size: var(--fs-headline-s); line-height: var(--lh-headline-s); color: var(--ink); }
.price-card .price { font-weight: 800; font-size: var(--fs-display-s); line-height: var(--lh-display-s); color: var(--ink); }
.price-card ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.price-card li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-title-s); line-height: var(--lh-title-s); color: var(--color); }
.price-card li svg { color: #00c853; flex-shrink: 0; margin-top: 2px; }
.price-card.featured li svg { color: #00ffff; }

/* ============================================================
   THEME TOGGLE
   Dark is the global default (tokens set in :root above).
   Light theme is an opt-in override: <html data-theme="light">.
   FOUC-prevention inline <script> in <head> sets the attribute
   before first paint. JS reads / writes localStorage.
   ============================================================ */

/* ── Smooth transitions on manual toggle only ── */
.theme-transitioning * {
  transition: background 0.3s ease, color 0.2s ease, border-color 0.25s ease,
              box-shadow 0.25s ease !important;
}

/* ── Theme toggle button ── */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 7px;
  background: transparent;
  border: 1px solid var(--stroke);
  border-radius: var(--r-full);
  cursor: pointer;
  color: var(--ink);
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover  { background: rgba(220,232,255,0.08); border-color: var(--primary); color: var(--primary); }
.theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.theme-toggle svg { display: block; pointer-events: none; }
/* Dark default — show sun (click → go light) */
.theme-toggle .icon-sun  { display: block; }
.theme-toggle .icon-moon { display: none;  }
/* Light mode — show moon (click → go dark) */
[data-theme="light"] .theme-toggle .icon-sun  { display: none;  }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* Logo: dark mode shows white text logo, light mode shows dark text logo */
.logo-light { display: none; }
.logo-dark  { display: block; }
[data-theme="light"] .logo-light { display: block; }
[data-theme="light"] .logo-dark  { display: none; }

/* ============================================================
   LIGHT MODE OVERRIDES  [data-theme="light"]
   Restores original light palette and component styles.
   ============================================================ */
[data-theme="light"] {
  --ink:      #07112f;
  --color:    #50566b;
  --surface:  #ffffff;
  --stroke:   #e3edf6;
  --bg:       #f3f5fa;
  --bg-soft:  #f9fafd;
  --primary:  #003cff;
  --shadow-card:   0 4px 24px rgba(0, 0, 64, 0.08);
  --shadow-button: 0 4px 12px rgba(0, 0, 64, 0.08);
  --shadow-hover:  0 12px 32px rgba(0, 0, 64, 0.12);
  --grad-text: linear-gradient(90deg, #2d74e6 0%, #0e28d3 100%);
  color-scheme: light;
}

/* Body */
[data-theme="light"] body { background: var(--surface); }

/* Nav scrolled — white glass */
[data-theme="light"] body.scrolled .nav {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom-color: var(--stroke);
  box-shadow: 0 4px 24px rgba(0, 0, 64, 0.06);
}
/* Nav links */
[data-theme="light"] .nav-menu a.active { background: var(--ink); color: var(--white); }
[data-theme="light"] .nav-menu a:not(.active):hover { background: var(--bg); color: var(--ink); }
[data-theme="light"] .nav-dropdown { box-shadow: 0 8px 24px rgba(0,0,64,0.10); }
[data-theme="light"] .nav-dropdown a:hover { background: var(--bg); color: var(--primary); }
[data-theme="light"] .nav-drawer-menu a.active { color: var(--primary); }

/* Theme toggle on light bg */
[data-theme="light"] .theme-toggle:hover { background: var(--bg); }

/* Lang switcher */
[data-theme="light"] .lang-toggle {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .lang-toggle:hover { background: var(--surface); border-color: rgba(15, 23, 42, 0.16); }
[data-theme="light"] .lang-switcher .lang-menu {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}
[data-theme="light"] .lang-switcher .lang-menu a:hover { background: rgba(45, 116, 230, 0.08); }
[data-theme="light"] .lang-switcher .lang-menu a.active {
  background: linear-gradient(135deg, rgba(45, 116, 230, 0.12), rgba(45, 116, 230, 0.04));
  color: var(--primary);
}

/* Hero / footer gradients */
[data-theme="light"] .hero-wrap::after {
  background: linear-gradient(180deg, rgba(255,255,255,0) 90%, var(--bg-soft) 100%);
}
[data-theme="light"] .footer-section::after {
  background: linear-gradient(180deg, var(--bg-soft) 0%, rgba(255,255,255,0) 100%);
}

/* Service card hover */
[data-theme="light"] .service-card:not(.feature):not(.dark):hover {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 20px 48px rgba(0, 0, 64, 0.14);
  border-color: rgba(45, 116, 230, 0.28);
}

/* Forms */
[data-theme="light"] .form-field input,
[data-theme="light"] .form-field textarea,
[data-theme="light"] .form-field select {
  background: var(--bg-soft);
  border-color: var(--stroke);
  color: var(--ink);
}
[data-theme="light"] .form-field input::placeholder,
[data-theme="light"] .form-field textarea::placeholder { color: #a6b2c7; }
[data-theme="light"] .form-field input:focus,
[data-theme="light"] .form-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 60, 255, 0.08);
}

/* Blog tabs */
[data-theme="light"] .tabs button.active { background: var(--surface); color: var(--ink); }
[data-theme="light"] .tabs button:not(.active):hover { background: var(--bg); color: var(--ink); }

/* Mobile sticky CTA */
[data-theme="light"] .mobile-cta { background: var(--surface); border-top-color: var(--stroke); }

/* Page-hero — restore light gradient (fades to white, not dark bg) */
[data-theme="light"] .page-hero {
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(45, 116, 230, 0.10) 0%, rgba(45, 116, 230, 0) 70%),
    linear-gradient(180deg, var(--bg-soft) 0%, var(--white) 100%);
}

/* ── Cards — restore light glass style ── */
[data-theme="light"] .problem-card,
[data-theme="light"] .service-card:not(.feature):not(.dark),
[data-theme="light"] .team-card,
[data-theme="light"] .case-card {
  background: rgba(255, 255, 255, 0.60);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 4px 20px rgba(0, 0, 64, 0.07);
}
[data-theme="light"] .case-card:hover {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 20px 48px rgba(0, 0, 64, 0.14);
  border-color: rgba(45, 116, 230, 0.28);
}
[data-theme="light"] .service-card:not(.feature):not(.dark):hover {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 20px 48px rgba(0, 0, 64, 0.14);
  border-color: rgba(45, 116, 230, 0.28);
}

/* Process card — restore light glass on dark process section */
[data-theme="light"] .process-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 32px rgba(0, 0, 64, 0.09);
}

/* Mobile CTA call button — restore white on light */
[data-theme="light"] .mobile-cta-call {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(15, 23, 42, 0.08);
}

/* ============================================================
   RESPONSIVE — DOWNWARD (tablet → mobile)
   ============================================================ */

/* Tablet (≤ 1200px) — collapse multi-column grids to 2-col */
@media (max-width: 1200px) {
  .hero { padding-right: var(--gutter); }
  .hero-floats { display: none; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .service-grid { grid-template-columns: 1fr 1fr; height: auto; }
  .service-grid > * { min-height: 280px; }
  .article-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid .footer-brand { grid-column: 1 / -1; }
  .problem-section { grid-template-columns: 1fr; }
  .process-body { grid-template-columns: 1fr; }
  .contact-section { grid-template-columns: 1fr; }
  .values-grid, .team-grid { grid-template-columns: 1fr 1fr; }
  .case-grid, .pricing-grid { grid-template-columns: 1fr 1fr; }
  .blog-detail-grid { grid-template-columns: 1fr; }
  .toc-card { position: static; }
  .article-section .case-grid,
  .case-study-related .case-grid { grid-template-columns: 1fr 1fr; }
}

/* Small tablet (≤ 1024px) */
@media (max-width: 1024px) {
  .tech-logos { gap: 32px; }
  .article-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   MOBILE NAV DRAWER + OVERLAY
   Always present in DOM; shown/hidden via JS classes.
   ============================================================ */

/* Overlay backdrop */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
body.nav--open .nav-overlay { opacity: 1; pointer-events: auto; }

/* Slide-in drawer */
.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: rgba(8, 8, 28, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.nav--open .nav-drawer { transform: translateX(0); }

.nav-drawer-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: calc(var(--nav-offset, 64px) + 32px) 28px 40px;
  gap: 0;
}
.nav-drawer-menu {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.nav-drawer-menu a {
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.85);
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  text-decoration: none;
  transition: color 0.15s ease;
}
.nav-drawer-menu a:last-child { border-bottom: none; }
.nav-drawer-menu a:hover,
.nav-drawer-menu a:focus-visible {
  color: var(--white);
  outline: none;
}
.nav-drawer-menu a.active { color: var(--primary); }

.nav-drawer-foot {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin-top: 24px;
}
/* Keep lang switcher readable on dark drawer bg */
.nav-drawer-foot .lang-switcher .lang-current,
.nav-drawer-foot .lang-switcher .lang-option { color: rgba(255, 255, 255, 0.8); }

/* Light mode: drawer flips to white glass */
[data-theme="light"] .nav-drawer {
  background: rgba(255, 255, 255, 0.97);
  border-left-color: var(--stroke);
}
[data-theme="light"] .nav-drawer-menu a {
  color: var(--ink);
  border-bottom-color: var(--stroke);
}
[data-theme="light"] .nav-drawer-menu a:hover,
[data-theme="light"] .nav-drawer-menu a:focus-visible { color: var(--primary); }
[data-theme="light"] .nav-drawer-menu a.active { color: var(--primary); }
[data-theme="light"] .nav-drawer-foot {
  border-top-color: var(--stroke);
}
[data-theme="light"] .nav-drawer-foot .lang-switcher .lang-current,
[data-theme="light"] .nav-drawer-foot .lang-switcher .lang-option { color: var(--color); }

/* Prevent body scroll when drawer is open */
body.nav--open { overflow: hidden; }

/* Mobile (≤ 768px) — single column everything, mobile nav */
/* ── Mobile (≤ 768px) ─────────────────────────────────────
   Strategy:
   • Hide decorative/desktop-only elements that clutter mobile
   • Reduce section vertical spacing
   • Reduce card padding and text sizes
   • Move lang-switcher to drawer only (already in drawer-foot)
   ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* ── Base ── */
  body { font-size: 15px; }
  :root {
    --nav-offset: 64px;
    --section-y:  48px;   /* tighter vertical rhythm on mobile (was clamp→64px) */
  }

  /* ── Nav ── */
  .nav { padding: 10px var(--gutter); }
  body.scrolled .nav { padding: 8px var(--gutter); }
  .nav-menu { display: none; }
  .ham { display: flex; }
  .nav-cta-desktop { display: none !important; }
  /* Hide lang-switcher from top nav on mobile — it lives in the drawer footer */
  .nav-right .lang-switcher { display: none; }

  /* ── Hero ── */
  .hero { gap: 24px; padding: 0 var(--gutter); }
  .hero h1 { font-size: 36px; line-height: 44px; }
  .hero-sub { font-size: var(--fs-body-m); }
  .hero-buttons { flex-direction: column; align-items: stretch; }
  .hero-buttons .btn { justify-content: center; }
  /* Hide floating info-cards — they overlap/overflow on small screens */
  .hero-floats, .float-card { display: none; }
  /* Tighten hero trust row */
  .hero-stats { gap: var(--s-4); }
  .hero-stat-value { font-size: var(--fs-headline-m); }

  /* ── Page-hero (inner pages) ── */
  .page-hero { padding: 40px var(--gutter) 32px; }
  /* Hide decorative dot-grid on mobile */
  .page-hero::before { display: none; }

  /* ── Section headings ── */
  .section-heading h2,
  .contact-left h2,
  .article-head-left h2,
  .page-hero h1 { font-size: var(--fs-headline-m); line-height: var(--lh-headline-m); }
  .section-heading p { font-size: var(--fs-body-m); }

  /* ── Cards — tighter padding + smaller titles ── */
  .problem-card,
  .service-card,
  .value-card,
  .team-card,
  .case-card,
  .article-card,
  .faq-item { padding: 20px; }
  .contact-card, .process-card { padding: 24px; }
  /* Card h3: 20→18px — feels oversized at 375px */
  .service-card h3, .problem-card h3,
  .team-card h3, .value-card h3 { font-size: 17px; line-height: 25px; }

  /* ── Grids → single column ── */
  .problem-right { grid-template-columns: 1fr; }
  .problem-col-1, .problem-col-2 { padding: 0; }
  .service-grid { grid-template-columns: 1fr; }
  .article-grid { grid-template-columns: 1fr; }
  .values-grid, .team-grid { grid-template-columns: 1fr; }
  .case-grid, .pricing-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }

  /* ── Process section — hide step list, show active card only ── */
  .process-body { grid-template-columns: 1fr; gap: var(--s-5); }
  .process-steps { display: flex; flex-direction: row; overflow-x: auto;
                   gap: 8px; padding-bottom: 4px; scrollbar-width: none; }
  .process-steps::-webkit-scrollbar { display: none; }
  .process-step { flex-shrink: 0; padding: 8px 14px; font-size: 14px; }

  /* ── Service page ── */
  .svc-stat-grid-wrap { grid-template-columns: 1fr 1fr; gap: 12px; }
  .svc-why-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .svc-pain-cols { grid-template-columns: 1fr; }
  .svc-pain-right { margin-top: 0; }

  /* ── Forms ── */
  .form-row { grid-template-columns: 1fr; }

  /* ── Stack section layouts that set grid-template-columns inline ── */
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: 1fr 1fr !important; }

  /* ── Tech logos ── */
  .tech-logos { gap: 20px; animation-duration: 25s; }
  .tech-pill { width: 48px; height: 48px; }
  .tech-pill img { width: 24px; height: 24px; }
  /* Hide the section title above marquee */
  .tech-strip-title { display: none; }

  /* ── Footer ── */
  .footer-section { padding: 48px var(--gutter) 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-wrap: wrap; gap: 12px; }

  /* ── Filter/tabs ── */
  .filter-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .tabs { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
}

/* ── Very small (≤ 480px) — tighten further ──────────────── */
@media (max-width: 480px) {
  body { font-size: 14px; }
  :root { --section-y: 40px; }
  .hero h1 { font-size: 30px; line-height: 38px; }
  .display-l, .display-m { font-size: 26px; line-height: 34px; }
  .btn { padding: 10px 14px 10px 18px; font-size: 15px; }
  .nav { padding: 10px 16px; }
  .article-section, .section, .section-tight { padding-left: 16px; padding-right: 16px; }
  /* Extra-small cards */
  .problem-card, .service-card, .team-card,
  .case-card, .article-card { padding: 16px; }
  .service-card h3, .problem-card h3 { font-size: 16px; line-height: 23px; }
}

/* ============================================================
   RESPONSIVE — UPWARD (1440 → 1920 → 2560 / 2K → 3840 / 4K)
   Pattern: bump tokens, body font-size, nav and component sizes.
   The fluid container + --pad-x clamp() already scales between
   breakpoints; these queries pin in the design intent at each step.
   ============================================================ */

/* Large desktop (≥ 1440) — design baseline, slight container bump */
@media (min-width: 1440px) {
  :root {
    --container: clamp(1360px, 90vw, 1800px);
    --pad-x: clamp(64px, 6.5vw, 96px);
  }
}

/* Full HD (≥ 1920) — body text bumps, controls grow */
@media (min-width: 1920px) {
  :root {
    --container: clamp(1600px, 88vw, 2000px);
    --pad-x: clamp(96px, 6vw, 120px);
    --section-y: clamp(120px, 7vw, 160px);
    --nav-h: 88px;

    --fs-display-l: 64px;  --lh-display-l: 80px;
    --fs-display-m: 52px;  --lh-display-m: 68px;
    --fs-display-s: 40px;  --lh-display-s: 48px;
    --fs-headline-m: 30px; --lh-headline-m: 38px;
    --fs-headline-s: 26px; --lh-headline-s: 34px;
    --fs-title-l: 24px;    --lh-title-l: 30px;
    --fs-title-m: 19px;    --lh-title-m: 26px;
    --fs-title-s: 17px;    --lh-title-s: 26px;
    --fs-body-l: 19px;     --lh-body-l: 28px;
    --fs-body-m: 17px;     --lh-body-m: 26px;
    --fs-body-s: 15px;     --lh-body-s: 22px;
    --fs-label-l: 15px;    --lh-label-l: 22px;
  }
  body { font-size: 17px; line-height: 26px; }
  .btn { padding: 14px 20px 14px 28px; font-size: 19px; }
  .nav-menu a { font-size: 17px; padding: 9px 18px; }
  .brand img { height: 36px; }
  .icon-btn { padding: 14px; }
  .icon-btn-glass { padding: 14px; }
  .tech-pill { width: 72px; height: 72px; }
  .tech-pill img { width: 36px; height: 36px; }
  .stat-card { min-height: 200px; padding: 28px; }
  .stats-grid { gap: 14px; padding: 16px; }
  .nav { padding-top: 20px; padding-bottom: 20px; }
  body.scrolled .nav { padding-top: 14px; padding-bottom: 14px; }
  :root { --nav-offset: 92px; }
}

/* QHD / 2K (≥ 2560) — container expands, type and UI scale up */
@media (min-width: 2560px) {
  :root {
    --container: clamp(2000px, 86vw, 2400px);
    --pad-x: clamp(120px, 5vw, 160px);
    --section-y: clamp(160px, 7vw, 200px);
    --nav-h: 104px;

    --fs-display-l: 80px;  --lh-display-l: 100px;
    --fs-display-m: 64px;  --lh-display-m: 84px;
    --fs-display-s: 48px;  --lh-display-s: 60px;
    --fs-headline-m: 36px; --lh-headline-m: 48px;
    --fs-headline-s: 30px; --lh-headline-s: 40px;
    --fs-title-l: 28px;    --lh-title-l: 36px;
    --fs-title-m: 22px;    --lh-title-m: 30px;
    --fs-title-s: 20px;    --lh-title-s: 30px;
    --fs-body-l: 22px;     --lh-body-l: 32px;
    --fs-body-m: 19px;     --lh-body-m: 30px;
    --fs-body-s: 17px;     --lh-body-s: 26px;
    --fs-label-l: 17px;    --lh-label-l: 26px;

    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 26px;
    --r-2xl: 32px;
  }
  body { font-size: 19px; line-height: 30px; }
  .btn { padding: 16px 24px 16px 32px; font-size: 22px; border-radius: 14px; }
  .nav-menu a { font-size: 19px; padding: 11px 22px; }
  .brand img { height: 40px; }
  .icon-btn, .icon-btn-glass { padding: 16px; border-radius: 999px; }
  .icon-btn svg, .icon-btn-glass svg, .btn svg { width: 28px; height: 28px; }
  .tech-pill { width: 84px; height: 84px; }
  .tech-pill img { width: 42px; height: 42px; }
  .stat-card { min-height: 224px; padding: 32px; }
  .stat-card.big { min-height: 100%; }
  .stat-card.big .stat-num { font-size: 64px; }
  .stats-grid { padding: 24px; gap: 20px; }
  .nav { padding-top: 24px; padding-bottom: 24px; }
  body.scrolled .nav { padding-top: 16px; padding-bottom: 16px; }
  :root { --nav-offset: 112px; }
  .float-card { padding: 16px 24px 16px 20px; border-radius: 20px; }
  .float-card .ft { font-size: 19px; line-height: 28px; }
  .float-card .fs { font-size: 17px; line-height: 26px; }
  .process-num-badge { width: 110px; padding: 12px; font-size: 48px; line-height: 60px; }
  .footer-section { padding: 128px var(--gutter) 64px; }
}

/* 4K UHD (≥ 3840) — full upscale */
@media (min-width: 3840px) {
  :root {
    --container: clamp(2800px, 84vw, 3360px);
    --pad-x: clamp(160px, 5vw, 240px);
    --section-y: clamp(200px, 6vw, 256px);
    --nav-h: 128px;

    --fs-display-l: 108px; --lh-display-l: 132px;
    --fs-display-m: 88px;  --lh-display-m: 110px;
    --fs-display-s: 64px;  --lh-display-s: 80px;
    --fs-headline-m: 48px; --lh-headline-m: 64px;
    --fs-headline-s: 40px; --lh-headline-s: 52px;
    --fs-title-l: 36px;    --lh-title-l: 48px;
    --fs-title-m: 28px;    --lh-title-m: 38px;
    --fs-title-s: 26px;    --lh-title-s: 38px;
    --fs-body-l: 28px;     --lh-body-l: 42px;
    --fs-body-m: 24px;     --lh-body-m: 38px;
    --fs-body-s: 22px;     --lh-body-s: 34px;
    --fs-label-l: 22px;    --lh-label-l: 34px;

    --r-md: 18px;
    --r-lg: 26px;
    --r-xl: 34px;
    --r-2xl: 44px;
  }
  body { font-size: 24px; line-height: 38px; }
  .btn { padding: 20px 30px 20px 40px; font-size: 28px; border-radius: 18px; }
  .nav-menu a { font-size: 24px; padding: 14px 28px; }
  .brand img { height: 52px; }
  .icon-btn, .icon-btn-glass { padding: 20px; }
  .icon-btn svg, .icon-btn-glass svg, .btn svg { width: 36px; height: 36px; }
  .tech-pill { width: 112px; height: 112px; }
  .tech-pill img { width: 56px; height: 56px; }
  .stat-card { min-height: 300px; padding: 48px; }
  .stat-card.big { min-height: 100%; }
  .stat-card.big .stat-num { font-size: 84px; }
  .stats-grid { padding: 28px; gap: 24px; }
  .nav { padding-top: 32px; padding-bottom: 32px; }
  body.scrolled .nav { padding-top: 22px; padding-bottom: 22px; }
  :root { --nav-offset: 140px; }
  .float-card { padding: 22px 32px 22px 28px; border-radius: 28px; }
  .float-card .ft { font-size: 26px; line-height: 36px; }
  .float-card .fs { font-size: 22px; line-height: 32px; }
  .process-num-badge { width: 156px; padding: 16px; font-size: 64px; line-height: 80px; }
  .footer-section { padding: 200px var(--gutter) 96px; }
  .nav-right { gap: 24px; }
  .nav-left { gap: 64px; }
}

/* ============================================================
   v1.0 ADDITIONS — utilities, form polish, trust, footer socials,
   mobile CTA, scroll-top, cookie banner, accessibility ring.
   ============================================================ */

/* ----- Generic 2-column split (replaces inline grid-template-columns) ----- */
.split-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .split-2 { grid-template-columns: 1fr; gap: 32px; }
}

/* ----- About page — story columns, hero buttons, ink utility ----- */
.about-col { display: flex; flex-direction: column; gap: 16px; }
.ink { color: var(--ink); }
.page-hero .hero-buttons,
.about-hero-btns { justify-content: center; margin-top: var(--s-5); }
.about-values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

/* ═══════════════════════════════════════════════════
   ABOUT PAGE — full redesign (Figma node 386:6730)
═══════════════════════════════════════════════════ */

/* ── 1. Hero ── */
.about-hero {
  background: var(--bg);
  padding: var(--s-7) var(--gutter) 0;
  overflow: hidden;
}
/* Nav clearance — nav is outside, so inherits the generic rule
   .page > nav + section:not(.page-hero):not(.hero-wrap)
   but we add a small extra top gap to breathe */
.page > nav + .about-hero {
  padding-top: calc(var(--nav-offset) + var(--nav-gap) + var(--s-3));
}
.about-hero-text { max-width: 820px; margin-bottom: var(--s-6); }
.about-hero-h1 {
  font-size: var(--fs-display-s);
  line-height: var(--lh-display-s);
  font-weight: 800;
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.about-hero-sub {
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: var(--color);
}

/* 5-stat bar inside hero — same ocean wave look as svc-stat-bar */
.about-stat-wrap { padding: 0 0 var(--s-7); }
.about-stat-grid {
  position: relative;
  border-radius: 28px;
  padding: clamp(20px, 2.5vw, 36px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  overflow: hidden;
}
.about-stat-grid::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('../images/stats-bg.png');
  background-size: cover; background-position: center;
  z-index: 0;
}
.about-stat-grid::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(6,18,150,0.28) 0%, rgba(12,35,210,0.14) 100%);
  z-index: 0;
}

/* ── Shared section heading (used in values, team) ── */
.about-h2 {
  font-size: var(--fs-display-s);
  line-height: var(--lh-display-s);
  font-weight: 800;
  color: var(--ink);
}

/* ── 2. Story ── */
.about-story {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--s-7);
  align-items: start;
}
.about-story-text {
  display: flex; flex-direction: column; gap: var(--s-4);
}
.about-story-img {
  width: 360px; height: 360px;
  border-radius: var(--r-xl);
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--bg) 0%, var(--stroke) 100%);
}
.about-story-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── 3. Vision / Mission ── */
.about-vision {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 0;
}
.about-vision-card {
  border-radius: var(--r-xl);
  padding: var(--s-6);
  border: 1px solid var(--stroke);
}
.about-vision-card.vision-grad {
  background: var(--grad-dark);
}
.about-vision-card.vision-dark {
  background: #0a0a28;
}
.about-vision-card h3 {
  font-size: var(--fs-headline-s);
  line-height: var(--lh-headline-s);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--s-4);
}
.about-vision-card p {
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: rgba(255,255,255,0.82);
}

/* ── 4. Bridge ── */
.about-bridge {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: var(--s-7);
  align-items: start;
}
.about-bridge-img {
  width: 360px; height: 360px;
  border-radius: var(--r-xl);
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--bg) 0%, var(--stroke) 100%);
}
.about-bridge-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-bridge-text {
  display: flex; flex-direction: column; gap: var(--s-4);
}
.about-bridge-card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-xl);
  padding: 24px var(--s-6);
  box-shadow: var(--shadow-card);
}
.about-bridge-card-title {
  font-size: var(--fs-title-m);
  line-height: var(--lh-title-m);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

/* ── 5. Core values ── */
.about-core-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.about-core-card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-5);
  box-shadow: var(--shadow-card);
}
.about-core-en {
  font-size: var(--fs-display-s);
  line-height: var(--lh-display-s);
  font-weight: 800;
  background: var(--grad-dark);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  margin-bottom: var(--s-2);
}
.about-core-vi {
  font-size: var(--fs-card-title);
  line-height: var(--lh-card-title);
  font-weight: 700;
  color: var(--ink);
}
.about-core-body {
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--color);
}

/* ── 6. Team ── */
.about-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.about-team-card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-xl);
  padding: var(--s-6) var(--s-5);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-5);
  text-align: center;
  box-shadow: var(--shadow-card);
}
.about-team-photo {
  width: 99px; height: 99px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #dbe5f5 0%, #f9fafd 100%);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 32px;
  color: rgba(0, 60, 255, 0.4);
  flex-shrink: 0;
}
.about-team-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-team-info { width: 100%; }
.about-team-name {
  font-size: var(--fs-title-m);
  line-height: var(--lh-title-m);
  font-weight: 600;
  color: var(--ink);
}
.about-team-role {
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--color);
  margin-top: 4px;
}

/* ── 7. Trusted / Partners ── */
.about-trusted { display: flex; flex-direction: column; gap: var(--s-4); }
.about-trusted-h2 {
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.about-partner-label {
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: var(--color);
}
.about-logo-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-bottom: var(--s-5);
}
.about-logo-card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  padding: 28px 20px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px;
  box-shadow: var(--shadow-card);
  min-height: 120px;
  text-align: center;
}
.about-logo-mark {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; color: var(--white);
  flex-shrink: 0;
}
.about-logo-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

/* ── About page — responsive ── */
@media (max-width: 1024px) {
  .about-stat-grid { grid-template-columns: repeat(3, 1fr); }
  .about-logo-row  { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .about-story  { grid-template-columns: 1fr; }
  .about-story-img { width: 100%; height: 240px; }
  .about-vision { grid-template-columns: 1fr; }
  .about-bridge { grid-template-columns: 1fr; }
  .about-bridge-img { width: 100%; height: 240px; }
  .about-core-grid { grid-template-columns: 1fr; }
  .about-logo-row  { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .about-stat-grid { grid-template-columns: 1fr 1fr; }
  .about-logo-row  { grid-template-columns: repeat(2, 1fr); }
  .about-team-grid { grid-template-columns: 1fr 1fr; }
  /* 3/4/5-col section grids → single column on phones */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: 1fr !important; }
}

/* ----- Visible focus state for accessibility (keyboard nav) ----- */
*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible, .icon-btn:focus-visible, .icon-btn-glass:focus-visible {
  outline-offset: 4px;
}

/* ----- Form notice (success / error after submit) ----- */
.form-notice {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.5;
  align-items: flex-start;
}
.form-notice strong { display: block; margin-bottom: 4px; }
.form-notice--ok {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: #166534;
}
.form-notice--ok svg { color: #16a34a; flex-shrink: 0; }
.form-notice--err {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #991b1b;
}
.form-notice--err svg { color: #dc2626; flex-shrink: 0; }

/* ----- Empty state (used by archive-project) ----- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 64px 24px;
  background: var(--bg);
  border-radius: 24px;
  max-width: 640px;
  margin: 32px auto;
}
.empty-state-icon {
  width: 96px;
  height: 96px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(45, 116, 230, 0.08);
  color: var(--primary);
}
.empty-state h3 { font-size: 24px; line-height: 1.3; }
.empty-state p { color: var(--muted); max-width: 480px; }
.empty-state .btn { margin-top: 8px; }

/* ----- Partners / Client logo grid ----- */
.partners-section {
  padding: 36px var(--page-x);
  max-width: var(--page-max);
  margin-inline: auto;
}
.partner-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.partner-card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 28px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 112px;
}
/* Logo mark + wordmark */
.partner-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.partner-mark {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: var(--white);
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.partner-wordmark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.partner-brand {
  font-weight: 800;
  font-size: 17px;
  line-height: 1.2;
  color: var(--ink);
}
.partner-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1px;
}
/* "Many more" CTA card */
.partner-more {
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: var(--primary);
  font-weight: 600;
  font-size: var(--fs-body-l);
  border: 1px dashed rgba(45, 116, 230, 0.35);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s cubic-bezier(0.22,1,0.36,1);
}
.partner-more:hover {
  background: rgba(45, 116, 230, 0.05);
  border-color: var(--primary);
  transform: translateY(-4px);
}
.partner-more svg { flex-shrink: 0; }
@media (max-width: 1024px) {
  .partner-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .partner-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 500px) {
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
  .partner-mark { width: 32px; height: 32px; font-size: 12px; }
  .partner-brand { font-size: 15px; }
}

/* ----- Trust: testimonials ----- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}
.testimonial-card {
  background: var(--surface);
  padding: 28px;
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}
.testimonial-card .quote-mark {
  color: var(--primary);
  opacity: 0.3;
}
.testimonial-card blockquote {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  font-style: italic;
}
.testimonial-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.testimonial-card figcaption strong { font-weight: 700; color: var(--ink); }
.testimonial-card figcaption span { font-size: 14px; color: var(--muted); }

/* ----- Footer social icons ----- */
.footer-socials {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.footer-social-link:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-2px);
}

/* ----- Mobile sticky CTA bar (≤768px) ----- */
.mobile-cta {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: none;
  gap: 8px;
  z-index: 90;
  transform: translateY(120%);
  transition: transform .3s ease;
  pointer-events: none;
}
.mobile-cta--visible { transform: translateY(0); pointer-events: auto; }
@media (max-width: 768px) {
  .mobile-cta { display: flex; }
}
.mobile-cta-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
}
.mobile-cta-call {
  background: rgba(220, 232, 255, 0.08);
  color: var(--ink);
  border: 1px solid var(--stroke);
}
.mobile-cta-contact {
  background: var(--primary);
  color: #fff;
}
.mobile-cta-btn svg { width: 18px; height: 18px; }

/* ----- Scroll-to-top button ----- */
.scroll-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
  z-index: 80;
  transition: opacity .2s ease, transform .2s ease;
  opacity: 0.9;
}
.scroll-top:hover { opacity: 1; transform: translateY(-2px); }
.scroll-top[hidden] { display: none; }
@media (max-width: 768px) {
  .scroll-top { bottom: 88px; right: 16px; }
}

/* ----- Cookie banner (bottom-fixed) ----- */
.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 24px;
  max-width: 480px;
  background: rgba(15, 23, 42, 0.96);
  color: rgba(255, 255, 255, 0.9);
  padding: 20px 22px;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 100;
  font-size: 14px;
  line-height: 1.5;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner strong { display: block; margin-bottom: 6px; color: #fff; font-size: 15px; }
.cookie-banner p { margin: 0; }
.cookie-banner a { color: #fff; text-decoration: underline; }
.cookie-banner-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  justify-content: flex-end;
}
.cookie-banner-actions .btn { padding: 8px 16px; font-size: 14px; }
@media (max-width: 600px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .cookie-banner-actions { flex-direction: column-reverse; }
  .cookie-banner-actions .btn { width: 100%; }
}

/* ----- Respect prefers-reduced-motion globally for marquee + scroll-top + mobile-cta ----- */
@media (prefers-reduced-motion: reduce) {
  .tech-logos { animation: none !important; }
  .mobile-cta { transition: none; }
  .scroll-top { transition: none; }
}

/* ============================================================
   EFFECTS SYSTEM — cursor · parallax · tilt · magnetic
   ============================================================ */

/* ── Custom Cursor (desktop/mouse only) ───────────────────── */
@media (hover: hover) and (pointer: fine) {
  *, *::before, *::after { cursor: none !important; }
}
.cursor-dot {
  position: fixed;
  inset: 0 auto auto 0;
  width: 6px; height: 6px;
  background: var(--primary);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  will-change: transform;
  transition: width 0.18s ease, height 0.18s ease, background 0.18s ease, opacity 0.2s ease;
  opacity: 0;
}
.cursor-ring {
  position: fixed;
  inset: 0 auto auto 0;
  width: 28px; height: 28px;
  border: 1.5px solid rgba(0, 60, 255, 0.48);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
  transition: width 0.22s ease, height 0.22s ease, border-color 0.22s ease, opacity 0.22s ease;
  opacity: 0;
}
.cursor-dot.cursor-visible  { opacity: 1; }
.cursor-ring.cursor-visible { opacity: 1; }

body.cursor-hover .cursor-dot  { width: 10px; height: 10px; }
body.cursor-hover .cursor-ring { width: 44px; height: 44px; border-color: rgba(0, 60, 255, 0.22); }
body.cursor-text  .cursor-dot  { width: 2px; height: 20px; border-radius: 2px; background: var(--ink); }
body.cursor-text  .cursor-ring { opacity: 0 !important; }

/* ── Hero Blobs (injected by JS) ─────────────────────────── */
.hero { position: relative; z-index: 1; }
.hero-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
  will-change: transform;
  animation: blob-drift 10s ease-in-out infinite alternate;
}
@keyframes blob-drift {
  from { transform: translateY(0px) scale(1); }
  to   { transform: translateY(-24px) scale(1.04); }
}
.hero-blob-1 {
  width: clamp(280px, 28vw, 480px);
  height: clamp(280px, 28vw, 480px);
  background: radial-gradient(circle, rgba(0, 60, 255, 0.10) 0%, transparent 70%);
  top: 4%; right: 6%;
  animation-duration: 11s;
}
.hero-blob-2 {
  width: clamp(180px, 20vw, 340px);
  height: clamp(180px, 20vw, 340px);
  background: radial-gradient(circle, rgba(0, 200, 255, 0.07) 0%, transparent 70%);
  top: 44%; right: 28%;
  animation-duration: 14s;
  animation-delay: -4s;
}
.hero-blob-3 {
  width: clamp(140px, 14vw, 260px);
  height: clamp(140px, 14vw, 260px);
  background: radial-gradient(circle, rgba(45, 116, 230, 0.07) 0%, transparent 70%);
  top: 16%; right: 52%;
  animation-duration: 9s;
  animation-delay: -7s;
}

/* ── Tilt cards ───────────────────────────────────────────── */
.tilt-card { will-change: transform; }

/* ── Magnetic buttons ─────────────────────────────────────── */
.btn-magnetic {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.2s ease !important;
}

/* ── Noise grain overlay ──────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.022;
  pointer-events: none;
  z-index: 9997;
  mix-blend-mode: overlay;
}

/* ── Reduced-motion overrides ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-blob { animation: none; }
  .cursor-ring { transition: none; }
}