/* ==========================================================
   VIVID SPARK TECHNOLOGY — shared.css
   Art direction: AI-powered small business ops platform
   Palette: Brand green (#CFEDC0 light / #102903 dark)
   Typography: Plus Jakarta Sans (display) + Manrope (body)
   ========================================================== */

/* ----------------------------------------------------------
   1. DESIGN TOKENS — Single source of truth
   ---------------------------------------------------------- */
:root, [data-theme='light'] {
  /* Brand palette */
  --color-bg:             #CFEDC0;
  --color-surface:        #dff4d4;
  --color-surface-2:      #edf9e6;
  --color-surface-offset: #c2e1b3;
  --color-surface-dynamic:#a7ce97;
  --color-border:         rgba(16,41,3,.18);
  --color-divider:        rgba(16,41,3,.12);

  /* Text */
  --color-text:           #102903;
  --color-text-muted:     rgba(16,41,3,.74);
  --color-text-faint:     rgba(16,41,3,.50);
  --color-text-inverse:   #CFEDC0;

  /* Primary accent */
  --color-primary:        #102903;
  --color-primary-hover:  #183c07;
  --color-primary-highlight: rgba(16,41,3,.09);

  /* Header / footer tonal bands */
  --header-band-bg:       #c5e6b2;
  --header-band-surface:  #bddfa8;
  --header-band-border:   rgba(16,41,3,.10);
  --footer-band-bg:       #9fce7f;
  --footer-band-surface:  #90c26e;
  --footer-band-border:   rgba(16,41,3,.14);

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(16,41,3,.05);
  --shadow-md:  0 12px 36px rgba(16,41,3,.10);
  --shadow-lg:  0 28px 80px rgba(16,41,3,.14);

  /* Radius */
  --radius-sm:   .4rem;
  --radius-md:   .8rem;
  --radius-lg:   1.25rem;
  --radius-xl:   2rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition: 220ms cubic-bezier(.16,1,.3,1);

  /* Fluid type scale */
  --text-xs:   clamp(.75rem,  .7rem  + .25vw, .875rem);
  --text-sm:   clamp(.875rem, .8rem  + .35vw, 1rem);
  --text-base: clamp(1rem,    .95rem + .25vw, 1.125rem);
  --text-lg:   clamp(1.125rem,1rem   + .75vw, 1.5rem);
  --text-xl:   clamp(1.25rem, 1.08rem + .7vw, 1.65rem);
  --text-2xl:  clamp(1.5rem,  1.2rem + 1.2vw, 2.4rem);

  /* Spacing */
  --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem;
  --space-4: 1rem;   --space-5: 1.25rem;--space-6: 1.5rem;
  --space-8: 2rem;   --space-10:2.5rem; --space-12:3rem;
  --space-16:4rem;   --space-20:5rem;   --space-24:6rem;

  /* Content width */
  --content: 1180px;
  --header-max: 1200px;

  /* Fonts */
  --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-body:    'Manrope', 'Inter', sans-serif;
}

[data-theme='dark'] {
  --color-bg:             #102903;
  --color-surface:        #17370a;
  --color-surface-2:      #1d4310;
  --color-surface-offset: #143107;
  --color-surface-dynamic:#285918;
  --color-border:         rgba(207,237,192,.20);
  --color-divider:        rgba(207,237,192,.14);

  --color-text:           #CFEDC0;
  --color-text-muted:     rgba(207,237,192,.80);
  --color-text-faint:     rgba(207,237,192,.52);
  --color-text-inverse:   #102903;

  --color-primary:        #CFEDC0;
  --color-primary-hover:  #dff4d4;
  --color-primary-highlight: rgba(207,237,192,.12);

  --header-band-bg:       #162918;
  --header-band-surface:  #1c341f;
  --header-band-border:   rgba(207,237,192,.10);
  --footer-band-bg:       #0d1f10;
  --footer-band-surface:  #143017;
  --footer-band-border:   rgba(207,237,192,.13);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.24);
  --shadow-md: 0 14px 40px rgba(0,0,0,.30);
  --shadow-lg: 0 30px 90px rgba(0,0,0,.44);
}

/* System preference fallback (no JS / first paint) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:             #102903;
    --color-surface:        #17370a;
    --color-surface-2:      #1d4310;
    --color-surface-offset: #143107;
    --color-surface-dynamic:#285918;
    --color-border:         rgba(207,237,192,.20);
    --color-divider:        rgba(207,237,192,.14);
    --color-text:           #CFEDC0;
    --color-text-muted:     rgba(207,237,192,.80);
    --color-text-faint:     rgba(207,237,192,.52);
    --color-text-inverse:   #102903;
    --color-primary:        #CFEDC0;
    --color-primary-hover:  #dff4d4;
    --color-primary-highlight: rgba(207,237,192,.12);
    --header-band-bg:       #162918;
    --header-band-surface:  #1c341f;
    --header-band-border:   rgba(207,237,192,.10);
    --footer-band-bg:       #0d1f10;
    --footer-band-surface:  #143017;
    --footer-band-border:   rgba(207,237,192,.13);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.24);
    --shadow-md: 0 14px 40px rgba(0,0,0,.30);
    --shadow-lg: 0 30px 90px rgba(0,0,0,.44);
  }
}


/* ----------------------------------------------------------
   2. BASE RESET
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--text-base)/1.6 var(--font-body);
}

img, svg { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; }
p, li { text-wrap: pretty; max-width: 72ch; }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
  color: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}


/* ----------------------------------------------------------
   3. LAYOUT UTILITIES
   ---------------------------------------------------------- */
.skip-link {
  position: absolute; left: 1rem; top: -3rem;
  background: var(--color-primary); color: var(--color-text-inverse);
  padding: .75rem 1rem; border-radius: var(--radius-full); z-index: 200;
}
.skip-link:focus { top: 1rem; }

.container {
  width: min(calc(100% - 2rem), var(--header-max));
  margin-inline: auto;
}

.site-shell { display: flex; flex-direction: column; min-height: 100dvh; }
main { flex: 1; margin-top: 0; }


/* ----------------------------------------------------------
   4. HEADER
   ---------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(180deg, var(--header-band-bg), var(--header-band-surface));
  border-bottom: 1px solid var(--header-band-border);
  backdrop-filter: blur(10px);
}

/* Topbar row */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .45rem 0 .3rem;
  border-bottom: none;
}
.topbar-left  { display: flex; align-items: center; gap: 1rem; min-width: 0; flex: 1 1 auto; }
.top-actions  { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; flex: 0 0 auto; flex-wrap: nowrap; }

/* Logo */
.brand { display: inline-flex; align-items: center; flex: 0 1 auto; text-decoration: none; color: inherit; }
.brand-logo-img { height: 120px; width: auto; max-width: min(100%, 640px); display: block; object-fit: contain; }

/* Contact sales CTA */
.center-cta {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 46px; padding: .82rem 1.08rem;
  border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 800; white-space: nowrap;
  background: var(--color-primary); color: var(--color-text-inverse);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  margin-left: .4rem;
}
.center-cta::after { content: "→"; font-size: .95em; opacity: .9; }
.center-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* Nav row */
.nav-row {
  display: block;
  padding: .25rem 0 .5rem;
  border-top: 1px solid var(--header-band-border);
}
.nav-row nav { width: 100%; display: flex; justify-content: center; }

.nav-links {
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: center;
  justify-content: center; margin: 0; padding: 0;
}

.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .72rem .95rem; border-radius: var(--radius-full);
  font-weight: 700;
  border: 1px solid rgba(16,41,3,.10);
  background: rgba(255,255,255,.36);
  color: #183a09;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition), border-color var(--transition), color var(--transition);
}
.nav-links a:hover {
  background: rgba(255,255,255,.58);
  color: #102903;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.nav-links a[aria-current='page'] {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: transparent;
  box-shadow: 0 10px 20px rgba(16,41,3,.12);
}
.nav-links a[aria-current='page']:hover { color: var(--color-text-inverse); }

/* Dark mode nav */
[data-theme='dark'] .nav-links a {
  background: rgba(207,237,192,.08);
  border-color: rgba(207,237,192,.10);
  color: #e5f6da;
}
[data-theme='dark'] .nav-links a:hover {
  background: rgba(207,237,192,.14);
  color: #f2fde9;
}
[data-theme='dark'] .nav-links a[aria-current='page'] {
  background: #cfedc0;
  color: #102903;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(0,0,0,.24);
}

/* Icon pills (account, cart, theme toggle) */
.icon-pill, .theme-toggle, .mobile-nav-toggle {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 44px; padding: .72rem .95rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
}
.icon-pill:hover, .theme-toggle:hover, .mobile-nav-toggle:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.utility-link { font-weight: 700; letter-spacing: -.01em; }
.utility-icon {
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--color-primary-highlight); font-size: .78rem;
}

[data-theme='dark'] .icon-pill,
[data-theme='dark'] .theme-toggle,
[data-theme='dark'] .mobile-nav-toggle,
[data-theme='dark'] .language-button {
  background: color-mix(in srgb, var(--header-band-surface) 88%, white 2%);
  border-color: rgba(207,237,192,.09);
  color: var(--color-text);
}

/* Language switcher */
.language-wrap { position: relative; }
.language-button {
  min-height: 44px; padding: .52rem .72rem .52rem .58rem;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-surface) 96%, transparent),
    color-mix(in srgb, var(--color-surface-2) 98%, transparent));
  display: inline-flex; align-items: center; gap: .65rem;
  font-weight: 700; letter-spacing: -.01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--shadow-sm);
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.language-button:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), var(--shadow-md); }
.language-button:active { transform: translateY(0) scale(.99); }
.language-button .caret { opacity: .62; font-size: .78rem; transition: transform var(--transition), opacity var(--transition); }
.language-wrap.open .language-button .caret { transform: rotate(180deg); opacity: 1; }
.language-button .button-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.language-button .button-copy small { font-size: .67rem; color: var(--color-text-faint); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

.language-menu {
  position: absolute; top: calc(100% + .6rem); right: 0; min-width: 220px; padding: .5rem;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-surface) 98%, transparent),
    color-mix(in srgb, var(--color-surface-2) 100%, transparent));
  border: 1px solid color-mix(in srgb, var(--color-border) 95%, transparent);
  border-radius: 1.1rem; box-shadow: var(--shadow-lg);
  display: grid; gap: .35rem; z-index: 120;
  opacity: 0; transform: translateY(-8px) scale(.98); pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.language-wrap.open .language-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.language-option {
  width: 100%; text-align: left; padding: .82rem .9rem; border-radius: .85rem;
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  transition: background var(--transition), transform var(--transition);
}
.language-option:hover { background: var(--color-primary-highlight); transform: translateX(2px); }
.language-option[aria-current='true'] { background: var(--color-primary-highlight); }
.language-option .language-name { display: flex; align-items: center; gap: .72rem; font-weight: 700; }
.language-option .check { opacity: 0; transform: scale(.8); transition: opacity var(--transition), transform var(--transition); color: var(--color-primary); }
.language-option[aria-current='true'] .check { opacity: 1; transform: scale(1); }

.flag-badge {
  width: 1.55rem; height: 1.55rem; border-radius: 50%;
  display: inline-grid; place-items: center; font-size: .92rem; line-height: 1;
  background: color-mix(in srgb, var(--color-primary-highlight) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
}

/* Header divider */
.header-divider { display: none; }


/* ----------------------------------------------------------
   5. MOBILE NAVIGATION
   ---------------------------------------------------------- */
.mobile-menu-toggle {
  display: none;
  align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: .72rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
  background: color-mix(in srgb, var(--color-surface) 86%, transparent);
  color: var(--color-text);
}
.mobile-menu-toggle svg { width: 20px; height: 20px; }
.mobile-nav-panel { display: none; }

@media (max-width: 920px) {
  .topbar { flex-wrap: wrap; }
  .topbar-left { width: 100%; }
  .top-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .brand-logo-img { height: 88px; max-width: min(100%, 520px); }
  .nav-row { display: none !important; }
  .mobile-menu-toggle { display: inline-flex; }
  .center-cta { padding: .82rem 1rem; font-size: .92rem; }

  .mobile-nav-panel {
    display: block; max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
    transition: max-height .32s ease, opacity .24s ease, border-color .24s ease;
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--header-band-bg) 96%, transparent),
      color-mix(in srgb, var(--header-band-surface) 96%, transparent));
    border-top: 1px solid transparent;
  }
  .mobile-nav-panel.is-open { max-height: 85vh; opacity: 1; pointer-events: auto; border-top: 1px solid var(--header-band-border); }
  .mobile-nav-inner { padding: 1rem clamp(1rem,4vw,1.4rem) 1.25rem; display: grid; gap: .8rem; }
  .mobile-nav-list { display: grid; gap: .68rem; }
  .mobile-nav-link, .mobile-nav-utility {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 48px; padding: .92rem 1rem; border-radius: 18px;
    text-decoration: none; font-weight: 700; color: var(--color-text);
    background: color-mix(in srgb, var(--color-surface) 84%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
  }
  .mobile-nav-link[aria-current='page'] {
    background: var(--color-primary); color: var(--color-text-inverse); border-color: transparent;
  }
  .mobile-nav-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .68rem; margin-top: .15rem; }
  .mobile-nav-utility { justify-content: center; text-align: center; font-weight: 600; }

  [data-theme='dark'] .mobile-menu-toggle { background: rgba(207,237,192,.08); border-color: rgba(207,237,192,.12); color: #e5f6da; }
  [data-theme='dark'] .mobile-nav-link,
  [data-theme='dark'] .mobile-nav-utility { background: rgba(207,237,192,.08); border-color: rgba(207,237,192,.10); color: #e8f7df; }
  [data-theme='dark'] .mobile-nav-link[aria-current='page'] { background: #cfedc0; color: #102903; }
}

@media (max-width: 620px) {
  .topbar { grid-template-columns: 1fr auto; grid-template-areas: 'brand actions' 'cta cta'; }
  .brand-wrap { grid-area: brand; }
  .top-actions { grid-area: actions; }
  .center-cta-wrap { grid-area: cta; justify-self: start; }
  .mobile-nav-meta { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .brand-logo-img { height: 68px; max-width: 100%; }
  .top-actions { gap: .45rem; }
  .top-actions > * { flex: 1 1 calc(50% - .35rem); }
  .center-cta { flex: 1 1 auto; text-align: center; margin-left: 0; }
  .nav-links { display: none; }
  .nav-links.open { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding-top: .35rem; }
  .mobile-nav-toggle { display: inline-flex; margin-bottom: .35rem; }
}

@media (max-width: 1100px) {
  .brand-logo-img { height: 96px; max-width: min(100%, 540px); }
  .center-cta { padding: .75rem .95rem; }
}


/* ----------------------------------------------------------
   6. HERO
   ---------------------------------------------------------- */
.hero { padding: clamp(3.5rem,8vw,7rem) 0; }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: var(--space-6); }

.eyebrow {
  display: inline-flex; gap: .55rem; align-items: center;
  padding: .45rem .8rem; border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em;
  background: var(--color-surface-2);
}

h1 { font-size: var(--text-2xl); max-width: 15ch; margin: .8rem 0 .9rem; }
h2 { font-size: var(--text-xl); margin-bottom: .7rem; }
h3 { font-size: clamp(1rem,.96rem + .35vw,1.2rem); margin-bottom: .5rem; }
p  { max-width: 70ch; color: var(--color-text-muted); }

/* Hero panel */
.hero-panel {
  padding: 1.2rem; position: relative; overflow: hidden;
  min-height: 480px;
}
.hero-scene {
  aspect-ratio: 4/3; border-radius: calc(var(--radius-xl) - .7rem);
  background: linear-gradient(155deg, var(--color-surface-offset), var(--color-surface-2));
  position: relative; overflow: hidden;
}
.hero-scene::before, .hero-scene::after { content: ''; position: absolute; inset: auto; filter: blur(2px); }
.hero-scene::before { width: 16rem; height: 16rem; border-radius: 50%; top: -3rem; right: -3rem; background: radial-gradient(circle,rgba(16,41,3,.16),transparent 70%); }
.hero-scene::after  { width: 18rem; height: 18rem; border-radius: 50%; left: -5rem; bottom: -6rem; background: radial-gradient(circle,rgba(207,237,192,.85),transparent 72%); }
[data-theme='dark'] .hero-scene::before { background: radial-gradient(circle,rgba(207,237,192,.18),transparent 70%); }
[data-theme='dark'] .hero-scene::after  { background: radial-gradient(circle,rgba(207,237,192,.12),transparent 72%); }

.float-card, .signal-line, .node {
  position: absolute; border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 84%, transparent);
  backdrop-filter: blur(8px); box-shadow: var(--shadow-md);
}
.float-card { padding: 1rem; border-radius: 1rem; animation: floatY 7s ease-in-out infinite; }
.float-card small { display: block; text-transform: uppercase; letter-spacing: .1em; color: var(--color-text-faint); margin-bottom: .5rem; }
.f1 { left: 8%; top: 13%; width: 40%; }
.f2 { right: 10%; top: 24%; width: 34%; animation-delay: -1.4s; }
.f3 { left: 14%; bottom: 14%; width: 38%; animation-delay: -2.8s; }
.signal-line { left: 10%; right: 10%; bottom: 12%; height: .9rem; border-radius: 999px; background: linear-gradient(90deg,var(--color-primary),transparent); animation: pulseLine 4.8s ease-in-out infinite; }
.node { width: 4.5rem; height: 4.5rem; border-radius: 50%; right: 9%; bottom: 16%; animation: floatY 6s ease-in-out infinite; }

@keyframes floatY    { 0%,100% { transform: translateY(0); }  50% { transform: translateY(-8px); } }
@keyframes pulseLine { 0%,100% { opacity: .55; transform: scaleX(.96); } 50% { opacity: 1; transform: scaleX(1); } }


/* ----------------------------------------------------------
   7. CARDS / SURFACES
   ---------------------------------------------------------- */
.hero-panel, .card, .pricing-card, .feature-card, .footer-card, .cta-box, .quote-box {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-surface) 96%, transparent),
    color-mix(in srgb, var(--color-surface-2) 98%, transparent));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.card, .pricing-card, .feature-card, .quote-box, .cta-box, .footer-card { padding: 1.45rem; }

[data-theme='dark'] .card,
[data-theme='dark'] .feature-card,
[data-theme='dark'] .pricing-card,
[data-theme='dark'] .quote-box,
[data-theme='dark'] .hero-panel,
[data-theme='dark'] .footer-card-premium {
  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-bg) 8%);
  border-color: color-mix(in srgb, var(--color-border) 88%, transparent);
}


/* ----------------------------------------------------------
   8. SECTIONS & GRIDS
   ---------------------------------------------------------- */
.section { padding: clamp(3rem,7vw,5rem) 0; border-top: 1px solid var(--color-divider); }

.stack-cards    { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); }
.split-grid     { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-6); }
.stats-row      { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-6); }
.pricing-grid   { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); }

.kicker  { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--color-text-faint); margin-bottom: .8rem; }
.metric  { font-family: var(--font-display); font-size: clamp(1.45rem,1.25rem + .7vw,2rem); }

.list { display: grid; gap: .85rem; margin-top: .9rem; }
.list li { list-style: none; padding-left: 1.3rem; position: relative; color: var(--color-text-muted); }
.list li::before { content: '•'; position: absolute; left: 0; color: var(--color-primary); font-weight: 800; }

.mini-tags { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.mini-tags span { padding: .45rem .7rem; border-radius: var(--radius-full); background: var(--color-primary-highlight); font-size: var(--text-xs); font-weight: 700; }

/* CTA box */
.cta-box { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: var(--space-6); }


/* ----------------------------------------------------------
   9. BUTTONS
   ---------------------------------------------------------- */
.button-row { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }

.btn {
  min-height: 48px; padding: .95rem 1.2rem; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; transition: all var(--transition);
}
.btn-primary {
  background: var(--color-primary); color: var(--color-text-inverse); border: none;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-secondary { border: 1px solid var(--color-border); background: transparent; }
.btn-secondary:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }


/* ----------------------------------------------------------
   10. PRICING
   ---------------------------------------------------------- */
.price { font-family: var(--font-display); font-size: clamp(1.5rem,1.25rem + .85vw,2.1rem); line-height: 1.05; margin: .6rem 0; }
.price-note { font-size: var(--text-sm); }

.pricing-card.featured { background: var(--color-primary); color: var(--color-text-inverse); }
.pricing-card.featured p,
.pricing-card.featured li,
.pricing-card.featured .price-note { color: rgba(207,237,192,.86); }
.pricing-card.featured .btn { background: var(--color-text-inverse); color: var(--color-primary); }


/* ----------------------------------------------------------
   11. SCROLL REVEAL
   ---------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }


/* ----------------------------------------------------------
   12. FOOTER
   ---------------------------------------------------------- */
.footer {
  padding: 2rem 0 3rem;
  background: linear-gradient(180deg, var(--footer-band-bg), var(--footer-band-surface));
  border-top: 1px solid var(--footer-band-border);
  position: relative;
}
.footer-shell  { display: grid; gap: 1rem; }
.footer-grid   { display: grid; grid-template-columns: 1.3fr .9fr .9fr .95fr; gap: 1rem; padding-top: .7rem; }
.footer-links  { display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; }

.footer-section-title { font-family: var(--font-display); font-size: var(--text-sm); letter-spacing: -.02em; margin-bottom: .85rem; }
.footer-links a, .footer-links span { font-size: var(--text-sm); color: var(--color-text-muted); }
.footer-links a:hover { color: var(--color-text); }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding-top: .8rem; border-top: 1px solid var(--footer-band-border);
}
.footer-legal, .footer-status { display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; }
.footer-legal a, .footer-status span, .footer-bottom small { font-size: var(--text-xs); color: var(--color-text-faint); }
.footer-legal a:hover { color: var(--color-text); }

.footer-chip { padding: .45rem .75rem; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; background: var(--color-primary-highlight); color: var(--color-text-muted); }

/* Dark footer text fixes */
[data-theme='dark'] .footer { color: #cfedc0; }
[data-theme='dark'] .footer a,
[data-theme='dark'] .footer p,
[data-theme='dark'] .footer li,
[data-theme='dark'] .footer strong,
[data-theme='dark'] .footer span { color: #dcefd2; }
[data-theme='dark'] .footer a:hover { color: #ffffff; }
[data-theme='dark'] .footer-chip,
[data-theme='dark'] .utility-link .utility-icon { background: rgba(127,159,132,.16); color: var(--color-text-muted); }

/* Footer card */
.footer-card-premium {
  padding: 1rem 1.05rem; border-radius: 1.3rem;
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-surface) 96%, transparent),
    color-mix(in srgb, var(--color-surface-2) 100%, transparent));
  box-shadow: var(--shadow-sm);
}


/* ----------------------------------------------------------
   13. CONTACT PAGE
   ---------------------------------------------------------- */
.contact-shell { padding-block: clamp(3rem,5vw,5rem); }
.contact-grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,420px);
  gap: var(--space-10); align-items: start;
}
.contact-card, .contact-side-card {
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
}
.contact-card { padding: clamp(1.4rem,2vw,2rem); }
.contact-side-card { padding: 1.25rem; }

.contact-kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem .78rem; border-radius: var(--radius-full);
  background: var(--color-primary-highlight); color: var(--color-primary);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.contact-heading {
  font-size: clamp(1.15rem,.98rem + .45vw,1.55rem);
  line-height: 1.2; max-width: 26ch; margin-bottom: var(--space-4);
  font-weight: 700;
}
.contact-copy { color: var(--color-text-muted); max-width: 62ch; margin-bottom: var(--space-6); }

.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-5); }
.field-group { display: flex; flex-direction: column; gap: var(--space-2); }
.field-group.full { grid-column: 1 / -1; }
.field-label { font-size: var(--text-sm); font-weight: 700; }
.field-label .required { color: var(--color-primary); margin-left: .15rem; }
.field-hint { font-size: var(--text-xs); color: var(--color-text-muted); }

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%; min-height: 52px; padding: .92rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent);
  background: color-mix(in srgb, var(--color-surface-2) 94%, transparent);
  color: var(--color-text);
}
.contact-form textarea { min-height: 170px; resize: vertical; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--color-text-faint); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 14%, transparent);
}
.contact-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); flex-wrap: wrap; }
.contact-note { font-size: var(--text-xs); color: var(--color-text-muted); max-width: 46ch; }
.side-stack { display: grid; gap: var(--space-4); }
.info-list  { display: grid; gap: var(--space-4); }
.info-item strong { display: block; font-size: var(--text-sm); margin-bottom: .2rem; }
.info-item span, .info-item a { color: var(--color-text-muted); text-decoration: none; }
.info-item a:hover { color: var(--color-text); }
.page-link-inline { color: var(--color-primary); text-decoration: none; font-weight: 700; }
.page-link-inline:hover { text-decoration: underline; }


/* ----------------------------------------------------------
   14. PRODUCT PAGE
   ---------------------------------------------------------- */
.product-grid-four { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-4); }
.product-grid-four .info-card { min-width: 0; }
.service-list-expanded { display: grid; gap: .72rem; padding-left: 1.1rem; }
.service-list-expanded li { max-width: 72ch; }


/* ----------------------------------------------------------
   15. RESPONSIVE BREAKPOINTS
   ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .product-grid-four { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 920px) {
  .hero-grid, .split-grid, .stack-cards, .stats-row,
  .pricing-grid, .cta-box, .footer-grid,
  .contact-grid, .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .product-grid-four { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .container { width: min(calc(100% - 1.2rem), var(--header-max)); }
  .button-row { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
  h1 { max-width: 100%; }
  .language-menu { left: 0; right: auto; min-width: 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .contact-grid, .form-grid { grid-template-columns: 1fr; }
}