/* ============================================================================
   premium-2026.css — "Bold Premium" visual layer (loaded LAST)
   ----------------------------------------------------------------------------
   Adds modern SaaS/AI depth on top of the existing navy design system WITHOUT
   touching content or rewriting base rules: elevated hover cards, premium
   buttons, electric-blue accent, richer backgrounds, dark statement sections.
   Tokens live in variables.css (accent ramp, gradients, glows, dark-* set).
   ========================================================================== */

/* ── 1. ELEVATED CARD SYSTEM ───────────────────────────────────────────────
   One consistent premium treatment across every card family on the homepage. */
.eco-card,
.about__feature,
.work-card,
.ts-cat,
.process__stage-card,
.partners__card {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card-2026);
  transition:
    transform .34s cubic-bezier(.22, 1, .36, 1),
    box-shadow .34s cubic-bezier(.22, 1, .36, 1),
    border-color .34s ease;
}
.eco-card:hover,
.about__feature:hover,
.work-card:hover,
.ts-cat:hover,
.process__stage-card:hover,
.partners__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-2026-hover);
  border-color: var(--color-accent-200);
}

/* Accent hairline that fades in on hover (drawn as an inset ring, no layout shift) */
.eco-card,
.about__feature,
.ts-cat,
.partners__card,
.work-card {
  position: relative;
}
.eco-card::after,
.about__feature::after,
.ts-cat::after,
.partners__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--gradient-hairline);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .34s ease;
  pointer-events: none;
}
.eco-card:hover::after,
.about__feature:hover::after,
.ts-cat:hover::after,
.partners__card:hover::after {
  opacity: 1;
}

/* Harmonise the About feature icon chips to the navy+accent system
   (was blue / purple / amber — off-brand) */
.about__feature-icon,
.about__feature-icon--blue,
.about__feature-icon--violet,
.about__feature-icon--amber {
  background: var(--color-accent-soft) !important;
  color: var(--color-accent-600) !important;
  border-color: rgba(59, 130, 246, 0.22) !important;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}
.about__feature:hover .about__feature-icon {
  transform: translateY(-2px) scale(1.04);
  box-shadow: var(--shadow-accent);
}

/* Service card icon + number pick up the accent on hover */
.eco-card:hover .eco-card__icon { box-shadow: var(--shadow-accent); }
.eco-card:hover .eco-card__num,
.work-card:hover .work-card__num { color: var(--color-accent-500); }

/* ── 2. PREMIUM BUTTONS / CTAs ─────────────────────────────────────────────*/
.btn--primary,
.hero__cta--primary,
.about-cta__primary {
  background-image: var(--gradient-cta) !important;
  background-color: var(--color-brand-500);
  border: none;
  box-shadow: var(--shadow-button-primary);
  transition:
    transform .2s cubic-bezier(.22, 1, .36, 1),
    box-shadow .28s ease,
    filter .2s ease;
}
.btn--primary:hover,
.hero__cta--primary:hover,
.about-cta__primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-button-primary-hover), var(--glow-accent);
  filter: saturate(1.06);
}
.btn--primary:active,
.hero__cta--primary:active { transform: translateY(0); }

/* Outline / secondary — refined, fills subtly on hover */
.btn--outline,
.btn--secondary,
.hero__cta--ghost {
  transition: transform .2s cubic-bezier(.22, 1, .36, 1), border-color .25s ease, background-color .25s ease, color .25s ease;
}
.btn--outline:hover,
.btn--secondary:hover,
.hero__cta--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent-400);
  background-color: var(--color-accent-soft);
  color: var(--color-brand-700);
}

/* Keyboard focus — accent ring across interactive controls */
.btn:focus-visible,
a.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--glow-accent-focus);
}

/* ── 3. EYEBROW LABELS → ACCENT ────────────────────────────────────────────*/
.services__eyebrow,
.ecosystem__eyebrow,
.partners__eyebrow,
.success__eyebrow,
.process__eyebrow,
.about__eyebrow,
.work__eyebrow,
.faq__eyebrow,
.contact__eyebrow {
  color: var(--color-accent-600) !important;
}
.services__eyebrow-dot,
[class$="__eyebrow-dot"] {
  background: var(--color-accent-500) !important;
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}

/* ── 4. HERO — mesh + accent glow, retire the flat dot-grid ────────────────*/
.hero.hero--light {
  background:
    var(--gradient-hero-mesh),
    linear-gradient(180deg, #FFFFFF 0%, #F6F8FC 100%);
}
/* Soften the dot grid so the mesh reads first */
.hero__grid { opacity: 0.25 !important; }
/* Warm the existing hero glows toward the accent */
.hero__glow--1 { background: radial-gradient(circle, rgba(59,130,246,0.16), transparent 70%) !important; }
.hero__glow--2 { background: radial-gradient(circle, rgba(21,67,120,0.14), transparent 70%) !important; }
/* Soft glow behind the photo collage */
.hero__media-stack::before {
  content: "";
  position: absolute;
  inset: -12% -8% -8% -6%;
  z-index: 0;
  background: radial-gradient(ellipse at 60% 40%, var(--color-accent-glow), transparent 68%);
  filter: blur(46px);
  opacity: 0.5;
  pointer-events: none;
}
.hero__block { z-index: 1; }
/* One accent stat in the hero row */
.hero__stat:first-child .hero__stat-num,
.hero__stats > *:first-child [class*="num"] { color: var(--color-accent-600); }

/* ── 5. SOFTEN DECORATIVE DOT-GRIDS (mesh reads first) ─────────────────────
   ONLY *__bg-grid — these are empty decorative layers. The bare *__grid
   selectors are CONTENT layout wrappers (contact/partners/success) and must
   NOT be touched, or the whole section dims. */
[class$="__bg-grid"] {
  opacity: 0.5 !important;
}

/* NOTE: decorative dot-grid softening lives in section 5 below and must ONLY
   target *__bg-grid (empty decorative layers) — never *__grid content wrappers. */

/* ── 5b. SECTION RHYTHM — tint card-heavy sections so white cards pop ───────*/
.services,
.ecosystem.techstack,
.success {
  background: linear-gradient(180deg, #F7F9FC 0%, #F1F5FB 100%) !important;
}
/* keep the resting card surface crisp white + a faint hairline for definition */
.eco-card,
.about__feature,
.ts-cat,
.partners__card,
.work-card {
  background: #FFFFFF;
  border: 1px solid rgba(11, 33, 64, 0.07);
}
/* CTA links inside cards pick up the accent */
.eco-card__cta,
.work-card__cta {
  color: var(--color-accent-600) !important;
  transition: gap .2s ease, color .2s ease;
}
.eco-card:hover .eco-card__cta,
.work-card:hover .work-card__cta { color: var(--color-accent-700) !important; }

/* ── 5c. DARK STATEMENT SECTION — PROCESS ──────────────────────────────────
   A deep-navy timeline with accent-glow nodes for mid-page rhythm/contrast. */
.process {
  position: relative;
  background-color: var(--dark-bg);
  background-image: var(--gradient-dark-mesh), var(--gradient-dark-section);
  color: var(--dark-text);
}
.process__grid.__decor,          /* faint bg dot-grid, if present */
.process > .process__bg { opacity: 0.18 !important; }
.process__eyebrow { color: var(--color-accent-400) !important; }
.process__headline { color: var(--dark-text) !important; }
.process__headline em,
.process__headline .hero__serif,
.process__headline [class*="serif"] { color: var(--color-accent-400) !important; }
.process__sub,
.process__footer-text,
.process__collab { color: var(--dark-text-muted) !important; }

/* Timeline step cards → glass on dark */
.process .process__stage-card {
  background: var(--dark-surface) !important;
  border: 1px solid var(--dark-border) !important;
}
.process .process__stage-card:hover {
  background: var(--dark-surface-2) !important;
  border-color: var(--color-accent-400) !important;
}
.process__card-title { color: var(--dark-text) !important; }
.process__card-desc { color: var(--dark-text-muted) !important; }
.process__stage-label,
.process__card-meta { color: var(--color-accent-400) !important; }
.process__stage-num,
.process__card-bg-num { color: rgba(146, 180, 226, 0.14) !important; }

/* All step icon chips → unified accent glow (was rainbow: amber/green/rose/teal/violet) */
.process [class*="process__icon-wrap"] {
  background: rgba(59, 130, 246, 0.14) !important;
  border: 1px solid var(--dark-border-strong) !important;
  color: var(--color-accent-300) !important;
  box-shadow: 0 0 22px rgba(59, 130, 246, 0.30) !important;
}
.process .process__card-icon { color: var(--color-accent-300) !important; }

/* The vertical connector line → accent gradient */
.process__grid::before,
.process__track,
.process__line {
  background: linear-gradient(180deg, var(--color-accent-500), rgba(59,130,246,0.05)) !important;
}

/* Deliverable / tag chips → dark pills */
.process__deliverables > * ,
.process__collab {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-muted) !important;
}
.process__collab-icon { color: var(--color-accent-400) !important; }

/* ── 5d. DARK FOOTER — strong close ────────────────────────────────────────*/
#site-footer {
  position: relative;
  background-color: var(--dark-bg);
  background-image: var(--gradient-dark-mesh), var(--gradient-dark-section);
  color: var(--dark-text);
  border-top: 1px solid var(--dark-border);
}
#site-footer .footer__brand-logo { color: #fff; }
#site-footer .footer__news-title,
#site-footer .footer__col-title { color: var(--dark-text) !important; }
#site-footer .footer__col-title { color: var(--color-accent-300) !important; }
#site-footer .footer__brand-desc,
#site-footer .footer__brand-tagline,
#site-footer .footer__news-copy,
#site-footer .footer__contact-item,
#site-footer .footer__copyright,
#site-footer .footer__contact-icon { color: var(--dark-text-muted) !important; }
#site-footer .footer__link,
#site-footer .footer__legal-link {
  color: var(--dark-text-muted) !important;
  transition: color .2s ease;
}
#site-footer .footer__link:hover,
#site-footer .footer__legal-link:hover { color: var(--color-accent-300) !important; }
#site-footer .footer__brand-tagline { color: var(--color-accent-300) !important; }

/* Surfaces on dark: social, trust badges, to-top, newsletter input */
#site-footer .footer__social-link,
#site-footer .footer__trust-badge,
#site-footer .footer__totop,
#site-footer .footer__news-input {
  background: var(--dark-surface) !important;
  border: 1px solid var(--dark-border) !important;
  color: var(--dark-text) !important;
}
#site-footer .footer__news-input::placeholder { color: var(--dark-text-muted) !important; }
#site-footer .footer__social-link:hover,
#site-footer .footer__trust-badge:hover,
#site-footer .footer__totop:hover {
  border-color: var(--color-accent-400) !important;
  color: #fff !important;
  background: var(--dark-surface-2) !important;
}
/* dividers */
#site-footer .footer__main,
#site-footer .footer__bottom,
#site-footer .footer__trust,
#site-footer .footer__newsletter { border-color: var(--dark-border) !important; }

/* ── 5e. DARK STATEMENT SECTION — CONTACT (form panel stays a light card) ──*/
.contact {
  position: relative;
  background-color: var(--dark-bg);
  background-image: var(--gradient-dark-mesh), var(--gradient-dark-section);
  color: var(--dark-text);
}
.contact__eyebrow { color: var(--color-accent-400) !important; }
.contact__headline { color: var(--dark-text) !important; }
.contact__headline em,
.contact__headline [class*="serif"] { color: var(--color-accent-400) !important; }
.contact__intro,
.contact__sub,
.contact__actions-note,
.contact__step-text { color: var(--dark-text-muted) !important; }
.contact__jump { color: var(--color-accent-300) !important; }
.contact__step-title { color: var(--dark-text) !important; }
.contact__step-num {
  background: rgba(59, 130, 246, 0.16) !important;
  color: var(--color-accent-300) !important;
  border: 1px solid var(--dark-border-strong) !important;
}
/* trust chips + method + calendar cards → glass on dark */
.contact__chip,
.contact__method,
.contact__calendar {
  background: var(--dark-surface) !important;
  border: 1px solid var(--dark-border) !important;
  color: var(--dark-text) !important;
}
.contact__method:hover,
.contact__calendar:hover { border-color: var(--color-accent-400) !important; background: var(--dark-surface-2) !important; }
.contact__method-label,
.contact__calendar-text { color: var(--dark-text-muted) !important; }
.contact__method-value,
.contact__calendar-title { color: var(--dark-text) !important; }
.contact__method-icon,
.contact__calendar-icon {
  background: rgba(59, 130, 246, 0.14) !important;
  color: var(--color-accent-300) !important;
  border-color: var(--dark-border-strong) !important;
}
/* Keep the form card (.contact__card) light — its inputs stay legible as-is. */

/* ── 5f. TECH STACK — premium chip pills with accent dots ──────────────────*/
.ts-cat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}
.ts-cat__chips li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 10px;
  background: #F4F7FC;
  border: 1px solid rgba(11, 33, 64, 0.08);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: -0.01em;
  color: var(--color-brand-800);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ts-cat__chips li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gradient-accent);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
  flex: none;
}
.ts-cat__chips li:hover {
  transform: translateY(-1px);
  border-color: var(--color-accent-300);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.16);
}
/* category card icon/label accent */
.ts-cat__label { position: relative; }

/* ── 5g. FIX: gradient-text accent lines are invisible on dark sections ─────
   `.text-gradient` clips a NAVY gradient into the text (transparent fill),
   which disappears on dark. Re-point it to a bright accent gradient there. */
.process .text-gradient,
.contact .text-gradient,
#site-footer .text-gradient,
.process__headline em,
.contact__headline em {
  background: linear-gradient(120deg, var(--color-accent-300) 0%, #E4EEFF 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: var(--color-accent-300) !important;
}

/* ── 5h. PROCESS — REDESIGN: vertical timeline → 3-column stepper grid ─────*/
.process__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  max-width: 1200px !important;
  margin-inline: auto !important;
}
.process__stage-card {
  position: relative;
  padding: 26px 24px !important;             /* real card padding, no rail gap */
  background: var(--dark-surface) !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 10px 30px rgba(4, 12, 24, 0.35) !important;
  gap: 12px !important;
  overflow: hidden;
}
.process__stage-card:hover {
  transform: translateY(-6px) !important;
  border-color: var(--color-accent-400) !important;
  background: var(--dark-surface-2) !important;
  box-shadow: 0 20px 44px rgba(4, 12, 24, 0.5) !important;
}
/* remove the connector rail entirely */
.process__stage-card::after { display: none !important; }

/* big faint step number, top-right */
.process__card-bg-num {
  display: block !important;
  position: absolute; top: 12px; right: 18px;
  font-family: var(--font-display);
  font-size: 3.4rem; font-weight: 800; line-height: 1;
  color: rgba(146, 180, 226, 0.10) !important;
  pointer-events: none;
}

/* icon + label row flows INSIDE the card top (no absolute node) */
.process__card-top {
  display: flex !important; align-items: center; gap: 12px;
}
.process .process__icon-wrap {
  position: static !important;
  width: 46px !important; height: 46px !important;
  border-radius: 13px !important;
  box-shadow: 0 0 22px rgba(59, 130, 246, 0.28) !important;
  flex: none;
}
.process .process__icon-wrap svg { width: 20px !important; height: 20px !important; }
.process__card-title { font-size: 1.06rem !important; margin-top: 2px; }
.process__deliverables { gap: 6px !important; }

/* responsive: 2-up on tablet, 1-up on phone */
@media (max-width: 960px) {
  .process__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 620px) {
  .process__grid { grid-template-columns: 1fr !important; }
  .process__card-bg-num { font-size: 2.8rem; }
}

/* ── 5i. CONTACT — refinements (keep dark) ─────────────────────────────────*/
/* calendar banner reads as a clear accent CTA card */
.contact__calendar {
  background: linear-gradient(135deg, rgba(59,130,246,0.14), rgba(255,255,255,0.04)) !important;
  border: 1px solid var(--dark-border-strong) !important;
  border-radius: var(--radius-lg) !important;
}
.contact__calendar-title { font-weight: 700 !important; }
/* info method cards: COMPACT 2-column grid (was a tall full-width stack) */
.contact__methods {
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
.contact__method {
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 15px !important;
  border-radius: 14px !important;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.contact__method:hover { transform: translateY(-2px); }
/* the Office card (last, long address) spans the full width */
.contact__methods .contact__method:last-child,
.contact__method--full { grid-column: 1 / -1 !important; }
.contact__method-icon { width: 36px !important; height: 36px !important; border-radius: 11px !important; }
.contact__method-value { font-size: 0.9rem !important; line-height: 1.35 !important; }
@media (max-width: 560px) {
  .contact__methods { grid-template-columns: 1fr !important; }
}
/* the light form card gets the gradient submit button + soft accent ring */
.contact__card { box-shadow: 0 24px 60px rgba(4, 12, 24, 0.45), 0 0 0 1px rgba(59,130,246,0.08) !important; }
.contact__input:focus, .contact__select:focus { border-color: var(--color-accent-400) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   7. INNER PAGES — roll the homepage premium system site-wide
   ═══════════════════════════════════════════════════════════════════════════ */

/* Shared accent eyebrow (used on service + about pages) */
.about-eyebrow { color: var(--color-accent-600) !important; }

/* ── 7a. SERVICE PAGES (svc-*) ─────────────────────────────────────────────*/
/* hero: retire the dot-grid, add gradient mesh + glow */
.svc-hero.hero--light {
  background: var(--gradient-hero-mesh), linear-gradient(180deg, #FFFFFF 0%, #F6F8FC 100%);
}
.svc-hero__grid { opacity: 0.22 !important; }
.svc-hero__panel { box-shadow: var(--shadow-card-2026) !important; border-radius: var(--radius-2xl) !important; }
.svc-hero__panel-cta:hover { color: var(--color-accent-700) !important; }

/* elevated cards + accent hover across every service card family */
.svc-cap, .svc-problem, .svc-pkg, .svc-deliver__item, .svc-work__card, .svc-related__card {
  box-shadow: var(--shadow-card-2026);
}
.svc-cap:hover, .svc-problem:hover, .svc-pkg:hover,
.svc-deliver__item:hover, .svc-work__card:hover, .svc-related__card:hover {
  border-color: var(--color-accent-200) !important;
  box-shadow: var(--shadow-card-2026-hover) !important;
}
.svc-pkg--featured { border-color: var(--color-accent-400) !important; }

/* premium tech chips with accent dot */
.svc-tech__tag {
  display: inline-flex !important; align-items: center; gap: 7px;
  border: 1px solid rgba(11, 33, 64, 0.08) !important;
}
.svc-tech__tag::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--gradient-accent); box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}
.svc-tech__tag:hover { border-color: var(--color-accent-300) !important; }

/* DARK statement section: the process / steps timeline (matches homepage) */
.svc-process {
  position: relative;
  background-color: var(--dark-bg) !important;
  background-image: var(--gradient-dark-mesh), var(--gradient-dark-section) !important;
  color: var(--dark-text);
}
.svc-process .about-eyebrow { color: var(--color-accent-400) !important; }
.svc-process .about-section-title,
.svc-process .about-section-title * { color: var(--dark-text) !important; }
.svc-process .about-section-title .text-gradient,
.svc-process .about-section-title em {
  background: linear-gradient(120deg, var(--color-accent-300), #E4EEFF) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: var(--color-accent-300) !important;
}
.svc-process > .container > p,
.svc-process p:not(.svc-step__desc) { color: var(--dark-text-muted) !important; }
.svc-step__title { color: var(--dark-text) !important; }
.svc-step__desc { color: var(--dark-text-muted) !important; }
.svc-step__num {
  background: rgba(59, 130, 246, 0.14) !important;
  border: 1px solid var(--dark-border-strong) !important;
  color: var(--color-accent-300) !important;
  box-shadow: 0 0 22px rgba(59, 130, 246, 0.28) !important;
}
.svc-step__icon { color: var(--color-accent-300) !important; }
.svc-step:not(:last-child)::after {
  background: linear-gradient(90deg, var(--color-accent-500), transparent) !important;
  opacity: 0.5 !important;
}

/* FAQ: accent the open question */
.svc-faq[open] .svc-faq__q, .svc-faq.is-open .svc-faq__q { color: var(--color-accent-700) !important; }

/* ── 7b. ABOUT / INSIGHTS / PARTNERS / CASE-STUDY / LEGAL ──────────────────*/
/* accent eyebrows across inner pages (light surfaces) */
.ins-hero__eyebrow, .eyebrow, .about-hero__eyebrow-wrap .about-eyebrow { color: var(--color-accent-600) !important; }

/* retire / soften decorative dot-grids on inner heroes; add mesh glow */
.about-hero__grid, .ins-hero__grid, .legal-hero__grid { opacity: 0.22 !important; }
.about-hero, .ins-hero.hero--light, .legal-hero.hero--light {
  background-image: var(--gradient-hero-mesh), linear-gradient(180deg, #FFFFFF 0%, #F6F8FC 100%);
}

/* elevated hover cards across inner card families */
.ins-card, .ins-feat__card, .about-value, .about-why__item, .about-visual-card, .about-stat {
  box-shadow: var(--shadow-card-2026);
  transition: transform .34s cubic-bezier(.22,1,.36,1), box-shadow .34s cubic-bezier(.22,1,.36,1), border-color .34s ease;
}
.ins-card:hover, .ins-feat__card:hover, .about-value:hover, .about-why__item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-2026-hover) !important;
  border-color: var(--color-accent-200) !important;
}
/* insights card CTA + read-more pick up the accent */
.ins-card__cta, .ins-feat__cta { color: var(--color-accent-600) !important; }
.ins-filter.is-active { background: var(--gradient-accent) !important; border-color: transparent !important; color: #fff !important; }

/* shared dark CTA band (about-cta): make its accent line/gradient text pop, add glow */
.about-cta .text-gradient, .about-cta__accent, .about-cta__headline em {
  background: linear-gradient(120deg, var(--color-accent-300), #E4EEFF) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: var(--color-accent-300) !important;
}

/* ── 7c. CASE-STUDY DETAIL (cs-*) — premium format ─────────────────────────*/
/* hero: mesh + retire dot-grid */
.cs-hero.hero--light { background-image: var(--gradient-hero-mesh), linear-gradient(180deg,#FFFFFF 0%, #F6F8FC 100%); }
.cs-hero__grid { opacity: 0.22 !important; }
.cs-hero__visual, .cs-result__visual { border-radius: var(--radius-2xl) !important; box-shadow: var(--shadow-card-2026) !important; }

/* elevated cards across the detail page */
.cs-facts, .cs-narr, .cs-hl-card, .cs-next__card {
  box-shadow: var(--shadow-card-2026);
  transition: transform .34s cubic-bezier(.22,1,.36,1), box-shadow .34s cubic-bezier(.22,1,.36,1), border-color .34s ease;
}
.cs-narr:hover, .cs-hl-card:hover, .cs-next__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-2026-hover) !important;
  border-color: var(--color-accent-200) !important;
}
.cs-hl-card__icon, .cs-outcome__icon { color: var(--color-accent-600) !important; }

/* premium tech chips (accent dot) */
.cs-tech__tag {
  display: inline-flex !important; align-items: center; gap: 7px;
  border: 1px solid rgba(11, 33, 64, 0.08) !important;
}
.cs-tech__tag::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--gradient-accent); box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

/* DARK statement section: the outcome / result */
.cs-result {
  position: relative;
  background-color: var(--dark-bg) !important;
  background-image: var(--gradient-dark-mesh), var(--gradient-dark-section) !important;
  color: var(--dark-text);
}
.cs-result .about-eyebrow { color: var(--color-accent-400) !important; }
.cs-result .cs-overview__title, .cs-result .cs-result__copy h2 { color: var(--dark-text) !important; }
.cs-result .cs-outcome { color: var(--dark-text) !important; }
.cs-result .cs-outcome__icon { color: var(--color-accent-300) !important; }
.cs-result__note { color: var(--dark-text-muted) !important; }
.cs-result__visual { box-shadow: 0 24px 60px rgba(4,12,24,.5) !important; border: 1px solid var(--dark-border) !important; }

/* ── 6. FLOATING WHATSAPP — off the green, onto brand ──────────────────────*/
.wa-fab {
  background: var(--gradient-cta) !important;
  box-shadow: 0 10px 30px rgba(21, 67, 120, 0.34) !important;
}
.wa-fab:hover { box-shadow: 0 14px 36px rgba(37, 99, 235, 0.40) !important; }