/* =====================================================================
   Cinema Layer — dark cinematic hero + light editorial body
   Loaded LAST. Overrides flash-layer/polish-layer where needed.
   Pair with: canvas-hero.js + custom-cursor.js + smooth-scroll.js + scroll-pin.js
   ===================================================================== */

/* ---------------------------------------------------------------------
   Color tokens — black / white / red / green (matches Calibre logo)
   These override the warm coral palette site-wide.
   --------------------------------------------------------------------- */
:root {
  --cinema-bg: #0a0a0c;
  --cinema-bg-soft: #14141a;
  --cinema-fg: #ffffff;                                /* pure white */
  --cinema-fg-muted: rgba(255, 255, 255, 0.70);
  --cinema-fg-dim: rgba(255, 255, 255, 0.42);
  --cinema-accent: #e63946;                            /* red */
  --cinema-accent-bright: #ef4a55;                     /* slightly lighter for hover */
  --cinema-accent-glow: rgba(230, 57, 70, 0.45);
  --cinema-green: #22c55e;                             /* green for "live/ready" moments */
  --cinema-green-glow: rgba(34, 197, 94, 0.35);

  /* Override odoo-shared.css warm tokens so the light body sections also use red */
  --accent: #e63946;
  --accent-dark: #c92e3c;
}

/* ---------------------------------------------------------------------
   Body & smooth scroll wrapper
   --------------------------------------------------------------------- */
html, body {
  background: var(--cinema-bg);
  color: var(--cinema-fg);
  overscroll-behavior: none;
}

body.smooth-scroll-active {
  height: 100vh;
  overflow: hidden;
}

#scroll-content {
  will-change: transform;
}

/* ---------------------------------------------------------------------
   Logo cinematic intro — page loads with big logo on dark, scales to nav
   --------------------------------------------------------------------- */
.logo-splash {
  position: fixed;
  inset: 0;
  background: var(--cinema-bg);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: splash-veil 2000ms cubic-bezier(0.7, 0, 0.3, 1) forwards;
}
.logo-splash::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(255, 107, 84, 0.10), transparent 60%);
  opacity: 0;
  animation: splash-glow 2000ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.logo-splash img {
  width: clamp(360px, 44vw, 780px);
  height: auto;
  opacity: 0;
  transform: scale(0.86);
  animation: splash-logo 2000ms cubic-bezier(0.5, 0, 0.2, 1) forwards;
  will-change: transform, opacity;
}
.logo-splash::after {
  content: "CALGARY · IT STUDIO";
  position: absolute;
  bottom: 32%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 28px;
  letter-spacing: 12px;
  color: var(--cinema-accent);
  opacity: 0;
  animation: splash-tagline 2000ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes splash-veil {
  0%, 55%   { opacity: 1; }
  78%       { opacity: 1; }
  100%      { opacity: 0; visibility: hidden; }
}
@keyframes splash-glow {
  0%        { opacity: 0; }
  30%       { opacity: 1; }
  78%       { opacity: 1; }
  100%      { opacity: 0; }
}
@keyframes splash-logo {
  0%        { opacity: 0; transform: scale(0.86); filter: blur(8px); }
  20%       { opacity: 1; transform: scale(1); filter: blur(0); }
  60%       { opacity: 1; transform: scale(1); filter: blur(0); }
  80%       { opacity: 1; transform: scale(0.6) translateY(-30vh) translateX(-30vw); filter: blur(0); }
  100%      { opacity: 0; transform: scale(0.2) translateY(-44vh) translateX(-44vw); filter: blur(0); }
}
@keyframes splash-tagline {
  0%        { opacity: 0; transform: translateX(-50%) translateY(10px); }
  30%       { opacity: 1; transform: translateX(-50%) translateY(0); }
  60%       { opacity: 1; transform: translateX(-50%) translateY(0); }
  80%       { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  100%      { opacity: 0; }
}

/* Splash on phones: the desktop clamp() bottoms out at 360px (near edge-to-edge
   on a 390px screen) and the 28px/12px-tracked tagline needs ~520px. Scale both. */
@media (max-width: 640px) {
  .logo-splash img { width: min(72vw, 300px); }
  .logo-splash::after {
    font-size: 12px;
    letter-spacing: 5px;
    bottom: 33%;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-splash {
    animation: splash-veil-reduced 400ms forwards;
  }
  .logo-splash img, .logo-splash::before, .logo-splash::after { animation: none; }
  @keyframes splash-veil-reduced {
    to { opacity: 0; visibility: hidden; }
  }
}

/* Nav logo gets a subtle hover glow */
header .brand a {
  display: inline-flex;
  position: relative;
}
header .brand a::after {
  content: "";
  position: absolute;
  inset: -8px;
  background: radial-gradient(circle at center, rgba(255, 107, 84, 0.25), transparent 65%);
  opacity: 0;
  transition: opacity 350ms ease-out;
  pointer-events: none;
  z-index: -1;
}
header .brand a:hover::after { opacity: 1; }

/* Nav logo entrance — fades in after the splash hides it */
header .brand-logo {
  opacity: 0;
  animation: nav-logo-fadein 600ms 1700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes nav-logo-fadein {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------------
   Branded cursor — native SVG via `cursor: url(...)`. Zero JS, zero RAF.
   The browser tracks it on the OS layer (no DOM, no compositor work).
     - Default state: coral filled dot (8px hotspot at center)
     - Interactive elements: open coral ring (12px hotspot at center)
   --------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  body {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><circle cx='9' cy='9' r='5' fill='%23e65644' stroke='white' stroke-width='1.5'/></svg>") 9 9, auto;
  }
  a, button, [role="button"], input, select, textarea, .cursor-pointer,
  summary, label, .case-card, .work-card, .client-card, .pillars-grid .block,
  .mini-frame, .module-card, .pillar-card, .halo-icon, .btn, .btn-outline {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><circle cx='14' cy='14' r='10' fill='rgba(230,86,68,0.18)' stroke='%23e65644' stroke-width='2'/><circle cx='14' cy='14' r='2.5' fill='%23e65644'/></svg>") 14 14, pointer;
  }
}

.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform, width, height;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--cinema-accent);
  transition: width 200ms cubic-bezier(0.2, 0, 0, 1),
              height 200ms cubic-bezier(0.2, 0, 0, 1),
              opacity 200ms;
  mix-blend-mode: difference;
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1.5px solid var(--cinema-accent);
  background: transparent;
  transition: width 250ms cubic-bezier(0.2, 0, 0, 1),
              height 250ms cubic-bezier(0.2, 0, 0, 1),
              background 250ms cubic-bezier(0.2, 0, 0, 1),
              border-color 250ms cubic-bezier(0.2, 0, 0, 1);
}
body.cursor-hover-interactive .cursor-ring {
  width: 36px; height: 36px;
  background: rgba(255, 107, 84, 0.10);
  border-color: var(--cinema-accent);
}
body.cursor-hover-interactive .cursor-dot {
  width: 4px; height: 4px;
  opacity: 0.5;
}
@media (hover: none) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ---------------------------------------------------------------------
   Hero — full-bleed, dark, cinematic
   --------------------------------------------------------------------- */
.hero {
  background: var(--cinema-bg) !important;
  background-image: none !important;
  color: var(--cinema-fg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  padding: 0 !important;
}
.hero::before, .hero::after { display: none !important; }

.hero #hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.hero .container {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  padding: 0 6vw;
  width: 100%;
}

.hero-grid {
  display: block !important;
  grid-template-columns: none !important;
  text-align: left;
}

.hero .eyebrow {
  color: var(--cinema-accent);
  font-size: 12px;
  letter-spacing: 3px;
  margin-bottom: 32px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hero .eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--cinema-accent);
}
.hero .eyebrow::after {
  content: "";
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--cinema-fg-dim);
}

.hero h1 {
  font-family: 'Work Sans', sans-serif;
  font-weight: 900;
  font-size: clamp(44px, 8.5vw, 124px) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.04em !important;
  margin: 0 0 36px !important;
  color: var(--cinema-fg);
  max-width: none;
}
.hero h1 .accent {
  color: var(--cinema-accent);
  position: relative;
}
.hero h1 .line {
  display: block;
}
.hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40%);
  filter: blur(12px);
  animation: cinema-word-reveal 1000ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes cinema-word-reveal {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.hero-sub {
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--cinema-fg-muted);
  max-width: 640px;
  margin-bottom: 48px;
  line-height: 1.55;
  font-weight: 400;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}
.hero-ctas .btn {
  background: var(--cinema-fg);
  color: var(--cinema-bg);
  padding: 18px 32px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border-radius: 4px;
  transition: transform 250ms cubic-bezier(0.2, 0, 0, 1), background 250ms;
}
.hero-ctas .btn:hover {
  background: var(--cinema-accent);
  color: var(--cinema-bg);
  transform: translateY(-2px);
}
.hero-ctas .btn-outline {
  background: transparent;
  color: var(--cinema-fg);
  border: 1.5px solid rgba(244, 241, 236, 0.25);
  padding: 16.5px 32px;
}
.hero-ctas .btn-outline:hover {
  background: transparent;
  color: var(--cinema-accent);
  border-color: var(--cinema-accent);
}

.hero-trust {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--cinema-fg-dim);
  font-weight: 500;
  letter-spacing: 0.3px;
  flex-wrap: wrap;
}
.hero-trust .stars { color: var(--cinema-accent); letter-spacing: 2px; }
.hero-trust strong { color: var(--cinema-fg); font-weight: 600; }
.hero-trust .sep { color: var(--cinema-fg-dim); opacity: 0.5; }
.hero-trust .partner-badge {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--cinema-accent);
  border: 1px solid rgba(255, 107, 84, 0.4);
  background: rgba(255, 107, 84, 0.05);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

/* Hide the old hero visual (vis-card + floating cards) */
.hero .hero-visual { display: none !important; }

/* Hero scroll cue */
.hero-scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--cinema-fg-dim);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  opacity: 0;
  animation: scroll-cue-fade 600ms 1600ms forwards;
}
.hero-scroll-cue::before {
  content: "";
  width: 1px; height: 48px;
  background: linear-gradient(180deg, transparent, var(--cinema-accent), transparent);
  background-size: 100% 200%;
  animation: scroll-cue-pulse 2.4s linear infinite;
}
@keyframes scroll-cue-fade { to { opacity: 1; } }
@keyframes scroll-cue-pulse {
  0% { background-position: 0% -100%; }
  100% { background-position: 0% 100%; }
}

/* ---------------------------------------------------------------------
   Nav inside dark hero, transitions to light below
   --------------------------------------------------------------------- */
header {
  background: transparent !important;
  border: none !important;
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  padding: 24px 0 !important;
}
header .nav-links a {
  color: var(--cinema-fg) !important;
  font-weight: 500;
  font-size: 14px;
}
header .nav-links a:hover { color: var(--cinema-accent) !important; }
header .nav-links a.btn {
  background: var(--cinema-fg);
  color: var(--cinema-bg) !important;
  border-radius: 4px;
  padding: 10px 20px;
}
header .nav-links a.btn:hover {
  background: var(--cinema-accent);
  color: var(--cinema-bg) !important;
}
header .brand-logo {
  height: 104px;
  width: auto;
  transition: filter 250ms cubic-bezier(0.2, 0, 0, 1), transform 250ms cubic-bezier(0.2, 0, 0, 1);
}
header .brand a:hover .brand-logo {
  transform: translateY(-1px);
}

header.is-scrolled {
  position: fixed;
  background: rgba(10, 10, 12, 0.96) !important;
  /* backdrop-filter removed for perf — was triggering a full-screen blur repaint on every scroll frame */
  padding: 16px 0 !important;
  border-bottom: 1px solid rgba(244, 241, 236, 0.08) !important;
  animation: header-drop 350ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes header-drop {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* Hide announce bar on cinema homepage */
.announce { display: none !important; }

/* ---------------------------------------------------------------------
   Light body sections — editorial treatment
   --------------------------------------------------------------------- */
.promise-band, .pillars-section, .work-section,
.process-section, .clients-section, .studio-band,
.modules-section, .why-section, .faq-section {
  background: var(--bg) !important;
  color: var(--charcoal);
}

/* Promise band — full-width editorial moment */
.promise-band {
  padding: 140px 0 !important;
}
.promise-band h2 {
  font-size: clamp(28px, 3.6vw, 48px) !important;
  letter-spacing: -0.025em !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  margin-bottom: 32px !important;
}
.promise-band p.lede {
  font-size: clamp(18px, 1.8vw, 24px) !important;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.4;
}
.promise-band p .accent { color: var(--accent); font-weight: 700; }

/* Pillars — editorial cards, no agency tilt */
.pillars-section { padding: 160px 0 120px !important; }
.pillars-section .section-head h2 {
  font-size: clamp(26px, 3.4vw, 44px) !important;
  letter-spacing: -0.025em !important;
  font-weight: 800 !important;
  margin-bottom: 48px;
  line-height: 1.05;
}
.pillars-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 32px !important;
}
.pillars-grid .block {
  padding: 48px !important;
  background: var(--bg-soft);
  border: none !important;
  box-shadow: none !important;
  border-radius: 16px;
  transition: background 350ms, transform 350ms;
}
.pillars-grid .block:hover {
  background: #fff;
  transform: translateY(-4px);
  box-shadow: 0 30px 80px rgba(65, 62, 62, 0.08) !important;
}
.pillars-grid .block .pill-tag {
  font-size: 11px !important;
  color: var(--accent) !important;
  margin-bottom: 24px !important;
}
.pillars-grid .block h3 {
  font-size: clamp(19px, 2vw, 26px) !important;
  letter-spacing: -0.015em;
  font-weight: 700;
  margin-bottom: 14px !important;
  line-height: 1.2;
}
.pillars-grid .block p {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--charcoal-soft);
}
@media (max-width: 800px) { .pillars-grid { grid-template-columns: 1fr !important; } }

/* Pillar bullets — small list under each card body */
.pillar-bullets {
  list-style: none;
  padding: 0;
  margin: 20px 0 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pillar-bullets li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--charcoal);
}
.pillar-bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

/* Pillar card — full anchor wrapping (router cards) */
.pillars-grid a.block,
.pillars-grid .pillar-card {
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: var(--charcoal) !important;
  position: relative;
}
.pillars-grid .pillar-card .pillar-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(65, 62, 62, 0.10);
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--accent) !important;
  transition: gap 250ms cubic-bezier(0.2, 0, 0, 1);
}
.pillars-grid .pillar-card .pillar-cta span[aria-hidden] {
  display: inline-block;
  transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);
}
.pillars-grid .pillar-card:hover .pillar-cta {
  gap: 14px;
}
.pillars-grid .pillar-card:hover .pillar-cta span[aria-hidden] {
  transform: translateX(4px);
}

/* Skim-friendly section lede — bold lead line + short stacked sentences */
.section-lede {
  margin-top: 28px;
  max-width: 720px;
  color: var(--charcoal-soft);
  font-size: 18px;
  line-height: 1.5;
}
.section-lede strong {
  display: block;
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 20px;
}
.section-lede p {
  margin: 0 0 10px;
}
.section-lede .lede-end {
  margin-top: 20px;
  font-weight: 600;
  color: var(--charcoal);
}
@media (max-width: 720px) {
  .section-lede { font-size: 16px; }
  .section-lede strong { font-size: 19px; }
}

/* Promise stats row */
.promise-stats {
  display: flex;
  justify-content: center;
  gap: 64px;
  margin-top: 56px;
  flex-wrap: wrap;
}
.promise-stat {
  text-align: center;
  font-family: 'Work Sans', sans-serif;
}
.promise-stat strong {
  display: block;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
}
.promise-stat span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--charcoal-soft);
}

/* Work section — vertical full-width band */
.work-section { padding: 120px 0 !important; }
.work-grid .work-card {
  display: block;
  text-decoration: none;
  color: inherit;
  aspect-ratio: auto !important;
  padding: 32px 36px !important;
  border-radius: 16px;
  background: var(--bg-soft) !important;
  border: 1px solid rgba(65, 62, 62, 0.05) !important;
  transition: transform 250ms cubic-bezier(0.2, 0, 0, 1), background 250ms;
  font-size: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.work-grid .work-card:hover {
  background: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
}
.work-card .work-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.work-card .work-vertical {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
}
.work-card .work-stars {
  color: var(--accent);
  letter-spacing: 1.5px;
  font-size: 13px;
}
.work-card .work-title {
  font-size: clamp(20px, 2vw, 26px) !important;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 12px !important;
}
.work-card .work-blurb {
  font-size: 14px;
  line-height: 1.5;
  color: var(--charcoal-soft);
  margin-bottom: 18px;
}
.work-card .work-quote {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: rgba(230, 57, 70, 0.04);
  font-size: 14px;
  font-style: italic;
  line-height: 1.4;
  color: var(--charcoal);
  border-radius: 0 8px 8px 0;
}
.work-card .work-attribution {
  font-size: 12px;
  font-weight: 600;
  color: var(--charcoal-soft);
  margin-bottom: 16px;
  letter-spacing: 0.2px;
}
.work-card .work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
}
.work-card .work-tags span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  background: rgba(230, 57, 70, 0.08);
  color: var(--accent);
  padding: 4px 9px;
  border-radius: 4px;
}
@media (max-width: 900px) {
  .work-grid { flex-direction: column; }
}

/* Testimonials grid */
.testimonials-section {
  padding: 120px 0 !important;
  background: var(--bg-soft) !important;
}
.testimonials-section .section-head h2 {
  font-size: clamp(26px, 3.4vw, 44px) !important;
  letter-spacing: -0.025em !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.testimonial-card {
  margin: 0;
  background: #fff;
  border-radius: 14px;
  padding: 28px 28px 24px;
  border: 1px solid rgba(65, 62, 62, 0.06);
  transition: transform 250ms cubic-bezier(0.2, 0, 0, 1), box-shadow 250ms;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.05);
}
.testimonial-card .t-stars {
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 1.5px;
}
.testimonial-card blockquote {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--charcoal);
  font-weight: 500;
  border: none;
  padding: 0;
  background: none;
}
.testimonial-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(65, 62, 62, 0.08);
}
.testimonial-card figcaption strong {
  color: var(--charcoal);
  font-weight: 700;
  font-size: 13px;
}
.testimonial-card figcaption span {
  color: var(--charcoal-soft);
  font-size: 12px;
}
@media (max-width: 900px) {
  .testimonials-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}
.work-section .section-head h2 {
  font-size: clamp(26px, 3.4vw, 44px) !important;
  letter-spacing: -0.025em !important;
  font-weight: 800 !important;
  line-height: 1.05;
}
.work-grid {
  display: flex !important;
  flex-direction: column;
  grid-template-columns: none !important;
  gap: 24px !important;
}
.work-card {
  aspect-ratio: 16/7 !important;
  padding: 56px !important;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--bg-soft) 0%, #ebebe7 100%) !important;
  border: none !important;
  font-size: 12px !important;
  letter-spacing: 3px !important;
}

/* Process section — clean 4-stage grid */
.process-section {
  padding: 120px 0 !important;
  background: var(--bg) !important;
  position: relative;
}
.process-section .section-head h2 {
  font-size: clamp(26px, 3.4vw, 44px) !important;
  letter-spacing: -0.025em !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  margin-bottom: 48px;
}
.process-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.process-stage-card {
  position: relative;
  background: var(--bg-soft);
  border: 1px solid rgba(65, 62, 62, 0.05);
  border-radius: 16px;
  padding: 40px 36px 36px;
  overflow: hidden;
  transition: transform 250ms cubic-bezier(0.2, 0, 0, 1), background 250ms, box-shadow 250ms;
}
.process-stage-card:hover {
  background: #fff;
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.05);
}
.process-stage-card .stage-num {
  position: absolute;
  top: 16px;
  right: 24px;
  font-family: 'Work Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.85;
  color: var(--accent);
  opacity: 0.10;
  letter-spacing: -0.04em;
  pointer-events: none;
}
.process-stage-card .stage-eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 700;
}
.process-stage-card h3 {
  font-size: clamp(19px, 1.9vw, 26px) !important;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 14px !important;
  max-width: 100%;
}
.process-stage-card h3 .accent { color: var(--accent); }
.process-stage-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--charcoal-soft);
  margin: 0;
}
@media (max-width: 800px) {
  .process-grid { grid-template-columns: 1fr; }
}

/* Clients — generous 3x2 */
.clients-section { padding: 140px 0 !important; }
.clients-section .section-head h2 {
  font-size: clamp(32px, 4.5vw, 56px) !important;
  letter-spacing: -0.03em !important;
  font-weight: 800 !important;
  margin-bottom: 64px;
}
.clients-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}
.client-card {
  aspect-ratio: 4/3;
  padding: 48px 32px !important;
  background: var(--bg-soft) !important;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: clamp(15px, 1.4vw, 19px) !important;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 16px;
  transition: background 250ms, transform 250ms;
}
.client-card:hover {
  background: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 20px 50px rgba(65, 62, 62, 0.06);
}
.client-card .vertical {
  font-size: 10px !important;
  letter-spacing: 2.5px;
  margin-top: 12px !important;
}
@media (max-width: 800px) { .clients-grid { grid-template-columns: 1fr !important; } }

/* Studio — centered editorial */
.studio-band { padding: 140px 0 !important; text-align: center; }
.studio-band .container { max-width: 760px; }
.studio-band h2 {
  font-size: clamp(28px, 3.8vw, 52px) !important;
  letter-spacing: -0.025em !important;
  font-weight: 800 !important;
  margin-bottom: 28px !important;
  line-height: 1.05 !important;
}
.studio-band p {
  font-size: clamp(16px, 1.4vw, 19px) !important;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.55;
  color: var(--charcoal);
}

/* Studio stats row — restored base layout */
.studio-stats {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 56px !important;
  margin-top: 56px !important;
}
.studio-stat {
  text-align: center;
  font-family: 'Work Sans', sans-serif;
  min-width: 100px;
}
.studio-stat strong {
  display: block !important;
  font-size: clamp(26px, 3vw, 40px) !important;
  font-weight: 800 !important;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1 !important;
  margin-bottom: 8px !important;
}
.studio-stat span {
  display: block !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: var(--charcoal-soft) !important;
  font-weight: 500;
}

/* Clients grid — restored base layout */
.clients-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin-top: 48px;
}
.client-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  aspect-ratio: 5/4;
  padding: 32px 24px !important;
  background: var(--bg-soft) !important;
  border: 1px solid rgba(65, 62, 62, 0.05) !important;
  border-radius: 14px;
  font-size: clamp(14px, 1.3vw, 17px) !important;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: var(--charcoal);
  transition: transform 250ms cubic-bezier(0.2, 0, 0, 1), background 250ms, box-shadow 250ms;
}
.client-card:hover {
  background: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
}
.client-card .vertical {
  display: block !important;
  margin-top: 14px !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--accent);
}
@media (max-width: 900px) {
  .clients-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
  .clients-grid { grid-template-columns: 1fr !important; }
}

/* Section-head base alignment */
.section-head {
  margin-bottom: 32px;
}

/* ---------------------------------------------------------------------
   Final CTA — back to dark cinema for bookend
   --------------------------------------------------------------------- */
.offer {
  background: var(--cinema-bg) !important;
  color: var(--cinema-fg) !important;
  padding: 160px 0 !important;
  background-image: none !important;
}
.offer::before { display: none !important; }
.offer .eyebrow { color: var(--cinema-accent) !important; }
.offer h2 {
  color: var(--cinema-fg) !important;
  font-size: clamp(32px, 4.6vw, 64px) !important;
  letter-spacing: -0.03em !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  margin-bottom: 28px !important;
}
.offer p { color: var(--cinema-fg-muted) !important; font-size: 18px !important; }
.offer .btn {
  background: var(--cinema-fg) !important;
  color: var(--cinema-bg) !important;
  padding: 20px 36px;
  font-size: 16px;
}
.offer .btn:hover {
  background: var(--cinema-accent) !important;
}
.offer .deliverable-card {
  background: rgba(244, 241, 236, 0.04) !important;
  border: 1px solid rgba(244, 241, 236, 0.08) !important;
}
.offer .deliverable-card h4 { color: var(--cinema-accent) !important; }
.offer .deliverable-card li { color: var(--cinema-fg-muted) !important; }
.offer .deliverable-card li::before { color: var(--cinema-accent) !important; }

/* Footer stays dark */
footer {
  background: #050507 !important;
  color: var(--cinema-fg-muted) !important;
}
footer h5 { color: var(--cinema-fg) !important; }
footer a { color: var(--cinema-fg-muted) !important; }
footer a:hover { color: var(--cinema-accent) !important; }
footer .brand-logo {
  height: 56px;
  width: auto;
}

/* ---------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero h1 .word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .hero-scroll-cue::before { animation: none !important; }
  .cursor-dot, .cursor-ring { display: none !important; }
  body { cursor: auto !important; }
}

/* =====================================================================
   ODOO PAGE — additional components
   ===================================================================== */

/* =====================================================================
   ODOO HERO — module wheel (clean rebuild, no CSS variables for sizing)
   ===================================================================== */

/* Odoo page — founder spotlight (Kuljeet photo + LinkedIn) */
.founder-spotlight {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: center;
  padding: 36px 0;
  border-bottom: 1px solid rgba(65, 62, 62, 0.10);
}
.founder-photo {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-soft);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.10);
  flex-shrink: 0;
}
.founder-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.founder-meta h3 {
  font-family: 'Work Sans', sans-serif;
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  line-height: 1.1;
  color: var(--charcoal);
}
.founder-role {
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 14px;
  letter-spacing: 0.005em;
}
.founder-bio {
  font-size: 16px;
  line-height: 1.55;
  color: var(--charcoal-soft);
  margin: 0 0 16px;
  max-width: 560px;
}
.founder-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 24px;
  background: #0a66c2;
  color: #fff !important;
  text-decoration: none !important;
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 200ms, background 200ms;
}
.founder-linkedin:hover {
  background: #084d92;
  transform: translateY(-1px);
}
@media (max-width: 640px) {
  .founder-spotlight {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 24px;
  }
  .founder-photo { margin: 0 auto; width: 160px; height: 160px; }
  .founder-bio { margin-left: auto; margin-right: auto; }
}

/* =====================================================================
   Cost Calculator — dashboard layout (top: inputs / bottom: 3-card row)
   Visually distinct from Odoo's side-by-side pattern
   ===================================================================== */
.odoo-page .cost-calc-section {
  background: var(--bg) !important;
  padding: 120px 0 !important;
}
.cc-board {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 56px;
}

/* Sticky two-column layout — main column scrolls, sidebar follows */
.cc-board--sticky {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  align-items: start;
}
.cc-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Users row — featured at the top of the main column */
.cc-users-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  background: #fff;
  border: 1.5px solid rgba(65, 62, 62, 0.08);
  border-radius: 16px;
  gap: 16px;
  flex-wrap: wrap;
}
.cc-users-row-label {
  font-family: 'Work Sans', sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--charcoal);
}

/* Section header H4s in the main column */
.cc-section-h {
  font-family: 'Work Sans', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  margin: 16px 0 0;
}
.cc-section-h--receipt { margin-top: 32px; }
.cc-section-sub {
  font-size: 14px;
  color: var(--charcoal-soft);
  margin: 4px 0 12px;
  line-height: 1.45;
}

/* Receipt block in main column (replaces the in-card version) */
.cc-main .cc-receipt {
  margin-top: 0;
  background: #fff;
  border: 1.5px solid rgba(65, 62, 62, 0.08);
  border-radius: 16px;
  padding: 24px 28px;
  max-height: none;
}
.cc-main .cc-apps-list {
  max-height: none;
  overflow: visible;
}
.cc-main .cc-apps-list li {
  color: var(--charcoal);
  border-bottom-color: rgba(65, 62, 62, 0.10);
  padding: 10px 0;
  font-size: 14px;
}
.cc-main .cc-apps-list .cc-app-name { font-size: 14px; color: var(--charcoal); }
.cc-main .cc-apps-list .cc-app-rate { font-size: 11px; color: var(--charcoal-soft); white-space: nowrap; }
.cc-main .cc-apps-list .cc-app-cost { color: var(--charcoal); white-space: nowrap; }
.cc-main .cc-apps-list .cc-empty { color: var(--charcoal-soft); }
.cc-main .cc-receipt-total {
  border-top-color: rgba(65, 62, 62, 0.25);
  padding-top: 18px;
  margin-top: 14px;
}
.cc-main .cc-receipt-total span { color: var(--charcoal-soft); }
.cc-main .cc-receipt-total strong { color: var(--charcoal); }

/* STICKY SIDE PANEL */
.cc-sticky-panel {
  position: sticky;
  top: 100px;
  align-self: start;
}
.cc-sticky-inner {
  background: linear-gradient(160deg, #50b946 0%, #2f8e2a 100%);
  color: #fff;
  border-radius: 24px;
  padding: 32px 28px;
  box-shadow: 0 30px 70px rgba(80, 185, 70, 0.30);
  position: relative;
  overflow: hidden;
}
.cc-sticky-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
  opacity: 0.5;
}
.cc-sticky-inner > * { position: relative; }

.cc-sticky-label {
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 12px;
}
.cc-sticky-savings {
  font-family: 'Work Sans', sans-serif;
  font-size: clamp(34px, 3.8vw, 46px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #fff;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.cc-sticky-period {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 24px;
  line-height: 1.4;
}

.cc-sticky-breakdown {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.cc-sticky-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
}
.cc-sticky-row-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
}
.cc-sticky-row-bad,
.cc-sticky-row-good {
  font-family: 'Work Sans', sans-serif;
  font-weight: 800;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.cc-sticky-row-bad { color: #ffe3df; text-decoration: line-through; text-decoration-color: rgba(255, 227, 223, 0.6); }
.cc-sticky-row-good { color: #fff; }
.cc-sticky-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 4px 0;
}
.cc-sticky-formula {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  margin: 8px 0 0;
  line-height: 1.4;
}

.cc-sticky-cta {
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #fff !important;
  color: var(--accent-dark) !important;
  border-color: #fff !important;
  font-weight: 800 !important;
  padding: 14px 20px !important;
}
.cc-sticky-cta:hover {
  background: var(--charcoal) !important;
  color: #fff !important;
}

/* Mobile: drop the sticky behavior, sidebar stacks below main */
@media (max-width: 1000px) {
  .cc-board--sticky { grid-template-columns: 1fr; gap: 28px; }
  .cc-sticky-panel { position: static; }
  .cc-sticky-inner { padding: 28px 24px; }
}

/* TOP: input panel — full width, light surface */
.cc-input-panel {
  background: #fff;
  border: 1.5px solid rgba(65, 62, 62, 0.08);
  border-radius: 20px;
  padding: 36px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}
.cc-input-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.cc-input-head h4 {
  font-family: 'Work Sans', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--charcoal);
}

/* Inline stepper — different from Odoo's right-sidebar +/− */
.cc-stepper-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 16px;
  background: var(--bg-soft);
  border-radius: 100px;
  border: 1.5px solid rgba(65, 62, 62, 0.08);
}
.cc-stepper-label {
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
}
.cc-step {
  width: 36px;
  height: 36px;
  border: none;
  background: #fff;
  font-family: 'Work Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: transform 160ms, background 160ms;
}
.cc-step:hover { transform: scale(1.06); background: var(--accent); color: #fff; }
.cc-users {
  width: 64px;
  text-align: center;
  border: none;
  background: transparent;
  font-family: 'Work Sans', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--charcoal);
  padding: 0;
  -moz-appearance: textfield;
}
.cc-users::-webkit-outer-spin-button, .cc-users::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* App grid — denser, smaller tiles than Odoo's version */
.cc-app-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}
.cc-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px 7px;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 180ms, transform 180ms, box-shadow 180ms, background 180ms;
  position: relative;
}
.cc-app:hover {
  border-color: rgba(80, 185, 70, 0.30);
  background: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}
.cc-app input { position: absolute; opacity: 0; pointer-events: none; }
.cc-app img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  opacity: 0.55;
  transition: opacity 200ms, transform 200ms;
  background: transparent;
  border: 0;
  outline: 0;
}
.cc-app:has(input:checked) img { opacity: 1; transform: scale(1.05); }
.cc-app span {
  font-family: 'Work Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  color: var(--charcoal-soft);
  line-height: 1.15;
}
.cc-app:has(input:checked) {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 6px 16px rgba(80, 185, 70, 0.16);
}
.cc-app:has(input:checked) img { opacity: 1; }
.cc-app:has(input:checked) span { color: var(--charcoal); }
.cc-app:has(input:checked)::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* Variant dropdown — small native select tucked into each tile */
.cc-variant {
  display: none;
  width: 100%;
  margin-top: 6px;
  padding: 4px 22px 4px 6px;
  font-family: 'Work Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--charcoal);
  background: #fff;
  border: 1px solid rgba(65, 62, 62, 0.15);
  border-radius: 6px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%23413e3e'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 8px;
}
.cc-app:has(input:checked) .cc-variant {
  display: block;
}
.cc-variant:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* BOTTOM: 3-card dashboard — different from Odoo's stacked sidebar */
.cc-dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cc-card {
  padding: 32px 28px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 240px;
}
.cc-card-label {
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.cc-card-amount {
  font-family: 'Work Sans', sans-serif;
  font-size: clamp(36px, 4.2vw, 52px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: 10px;
}
.cc-card-period {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0.75;
  margin-bottom: auto;
}
.cc-card-note {
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  margin: 16px 0 0;
  opacity: 0.65;
  letter-spacing: 0.01em;
}

/* Card 1: "Your stack today" — coral warning theme */
.cc-card--current {
  background: linear-gradient(135deg, #fff5f3, #ffe9e5);
  border: 1.5px solid rgba(230, 57, 70, 0.18);
  color: #8a2a2a;
}
.cc-card--current .cc-card-label { color: rgba(138, 42, 42, 0.75); }
.cc-card--current .cc-card-amount { color: #c9442f; }

/* Card 2: "Odoo, all apps" — neutral charcoal/dark */
.cc-card--odoo {
  background: var(--charcoal);
  color: var(--cream, #f4f1ec);
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}
.cc-card--odoo .cc-card-label { color: rgba(244, 241, 236, 0.65); }
.cc-card--odoo .cc-card-amount { color: #fff; }
.cc-card--odoo .cc-card-period { color: rgba(244, 241, 236, 0.7); }
.cc-card--odoo .cc-card-note { color: rgba(244, 241, 236, 0.5); }

/* Card 3: "You'd save" — bright Calibre green hero */
.cc-card--savings {
  background: linear-gradient(135deg, #50b946 0%, #30b125 100%);
  color: #fff;
  box-shadow: 0 20px 50px rgba(80, 185, 70, 0.30);
}
.cc-card--savings .cc-card-label { color: rgba(255, 255, 255, 0.85); }
.cc-card--savings .cc-card-amount { color: #fff; }
.cc-card--savings .cc-card-period { color: rgba(255, 255, 255, 0.85); opacity: 1; }
.cc-card-cta {
  align-self: flex-start;
  margin-top: 18px !important;
  background: #fff !important;
  color: var(--accent-dark) !important;
  border-color: #fff !important;
  font-weight: 800 !important;
}
.cc-card-cta:hover {
  background: var(--charcoal) !important;
  color: #fff !important;
}

/* Receipt-style list — always visible inside "Your stack today" card */
.cc-receipt {
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  max-height: 460px;
  overflow: hidden;
}
.cc-apps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  max-height: 360px;
  scrollbar-width: thin;
}
.cc-apps-list::-webkit-scrollbar { width: 6px; }
.cc-apps-list::-webkit-scrollbar-thumb {
  background: rgba(138, 42, 42, 0.25);
  border-radius: 3px;
}
.cc-apps-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #6b2222;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(138, 42, 42, 0.15);
  gap: 8px;
}
.cc-apps-list li:last-child { border-bottom: none; }
.cc-apps-list .cc-app-name {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-apps-list .cc-app-rate {
  font-family: 'Work Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(138, 42, 42, 0.55);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cc-apps-list .cc-app-cost {
  font-family: 'Work Sans', sans-serif;
  font-weight: 800;
  color: #c9442f;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  white-space: nowrap;
}
.cc-apps-list .cc-empty {
  color: rgba(138, 42, 42, 0.5);
  font-style: italic;
  justify-content: center;
  border-bottom: none;
  padding: 24px 0;
}
.cc-receipt-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  margin-top: 14px;
  border-top: 2px solid rgba(138, 42, 42, 0.30);
  gap: 16px;
  flex-wrap: nowrap;
}
/* Only style the DIRECT-CHILD span (the "Total / year" label),
   not the nested .cc-apps-total span inside the strong. */
.cc-receipt-total > span {
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(138, 42, 42, 0.85);
  flex-shrink: 0;
}
.cc-receipt-total strong {
  font-family: 'Work Sans', sans-serif;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #c9442f;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* Force the nested .cc-apps-total span to inherit the strong's size */
.cc-receipt-total strong .cc-apps-total {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-transform: none;
}
/* In the main column (sticky layout) the receipt sits on white, not coral.
   Override the coral palette so it reads on the lighter background. */
.cc-main .cc-receipt-total {
  border-top-color: rgba(65, 62, 62, 0.20);
}
.cc-main .cc-receipt-total span { color: var(--charcoal-soft); }
.cc-main .cc-receipt-total strong {
  color: var(--charcoal) !important;
  background: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: inline !important;
  -webkit-text-fill-color: var(--charcoal) !important;
}

/* Hide the redundant amount display (it lives in the receipt total now) */
.cc-card--current .cc-card-amount,
.cc-card--current .cc-card-period {
  display: none;
}

@media (max-width: 1000px) {
  .cc-dashboard { grid-template-columns: 1fr; }
  .cc-app-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 720px) {
  .cc-input-panel { padding: 24px; }
  .cc-input-head { flex-direction: column; align-items: flex-start; }
  .cc-app-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .cc-app img { width: 30px; height: 30px; }
  .cc-app span { font-size: 9.5px; }
}
@media (max-width: 400px) {
  .cc-app-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Odoo page — quickfacts strip beneath "What is Odoo" */
.odoo-quickfacts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
  padding: 32px 0;
  border-top: 1px solid rgba(65, 62, 62, 0.10);
  border-bottom: 1px solid rgba(65, 62, 62, 0.10);
}
.quickfact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.quickfact strong {
  font-family: 'Work Sans', sans-serif;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--charcoal);
  line-height: 1;
}
.quickfact span {
  font-size: 13px;
  color: var(--charcoal-soft);
  line-height: 1.3;
}
@media (max-width: 720px) {
  .odoo-quickfacts { grid-template-columns: repeat(2, 1fr); }
}

/* "Also configured" line beneath module/comparison grids */
.modules-also {
  margin-top: 32px;
  font-size: 15px;
  color: var(--charcoal-soft);
  line-height: 1.55;
}
.modules-also strong { color: var(--charcoal); font-weight: 700; }
.modules-also a { color: var(--accent); font-weight: 600; text-decoration: none; }
.modules-also a:hover { text-decoration: underline; }

/* Disable scroll-reveal animations entirely on Odoo page (per user: no inter-card animation on scroll) */
.odoo-page .reveal,
.odoo-page .reveal-stagger,
.odoo-page .reveal-stagger > *,
.odoo-page .compare-detail.reveal .comp-table table tbody tr,
.odoo-page .process-grid .process-step .step-num {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  filter: none !important;
}

/* Green theme + WHITE hero background with fancy mesh treatment */
.odoo-page { --accent: #50b946; --accent-dark: #30b125; }
.odoo-page .word.accent { color: var(--accent) !important; }
.odoo-page header.is-scrolled {
  background: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.odoo-page header .nav-links a { color: var(--charcoal) !important; }
.odoo-page header .nav-links .btn { color: #fff !important; }
.odoo-page header .brand-logo { opacity: 1 !important; animation: none !important; }

/* Defensive: strip any background/border/outline from logo images on the Odoo page */
.odoo-page img,
.odoo-page .odoo-title-mark img,
.odoo-page .halo-center img,
.odoo-page .cc-app img,
.odoo-page .brand-logo,
.odoo-page .halo-icon img {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.odoo-page .hero { background: #ffffff !important; color: var(--charcoal) !important; }
.odoo-page .hero::before, .odoo-page .hero::after { display: block !important; }
.odoo-page .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(at 18% 22%, rgba(80, 185, 70, 0.18) 0%, transparent 42%),
    radial-gradient(at 82% 18%, rgba(230, 57, 70, 0.10) 0%, transparent 38%),
    radial-gradient(at 70% 80%, rgba(80, 185, 70, 0.10) 0%, transparent 45%),
    radial-gradient(at 14% 78%, rgba(255, 200, 84, 0.08) 0%, transparent 40%);
  z-index: 0;
  pointer-events: none;
}
.odoo-page .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
}
.odoo-page .hero .container { position: relative; z-index: 1; }

/* Title now reads on white */
.odoo-page .hero .eyebrow { color: var(--accent) !important; }
.odoo-page .hero .hero-sub { color: var(--charcoal-soft) !important; }
.odoo-page .hero .hero-trust { color: var(--charcoal) !important; }
.odoo-page .hero .hero-trust .stars { color: var(--accent) !important; }

/* =====================================================================
   ODOO HALO — 8 module icons spinning in a ring around the Odoo logo
   Fresh implementation. New class names (.odoo-hero, .odoo-halo, .halo-*).
   No interaction with old .module-wheel / .wheel-tile / .hero-stage rules.
   ===================================================================== */

.odoo-page .hero.odoo-hero {
  min-height: 760px !important;
  padding: 120px 0 60px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative;
}

/* Halo container — fixed 720×720 square centered in hero (large for clear halo effect) */
.odoo-halo {
  position: relative;
  width: 720px;
  height: 720px;
  z-index: 2;
  flex-shrink: 0;
}

/* Diagonal flowing lines — thin lines that drift across the hero at an angle */
.halo-ambient {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Slow ambient flow lines — diagonal gradient bars slide horizontally across
   the hero. Each line has its own duration + delay so they desync naturally. */
.flow-line {
  position: absolute;
  height: 2px;
  width: 200%;
  left: -50%;
  border-radius: 100px;
  opacity: 0;
}

/* Each line slides across in ~45% of its cycle, then sits off-screen for ~55%.
   Combined with prime-ish durations + irregular delays, this caps the screen at
   roughly 2-4 visible lines at any moment instead of all 6 at once. */
.flow-line--green-1 {
  top: 12%;
  background: linear-gradient(90deg, transparent 0%, rgba(80, 185, 70, 0.55) 50%, transparent 100%);
  animation: line-flow 5.7s linear infinite;
  animation-delay: -3.2s;
}
.flow-line--red {
  top: 26%;
  background: linear-gradient(90deg, transparent 0%, rgba(230, 86, 68, 0.45) 50%, transparent 100%);
  animation: line-flow 9.1s linear infinite;
  animation-delay: -7.4s;
}
.flow-line--green-2 {
  top: 40%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(80, 185, 70, 0.42) 50%, transparent 100%);
  animation: line-flow 7.3s linear infinite;
  animation-delay: -1.8s;
}
.flow-line--amber {
  top: 58%;
  height: 2.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(230, 86, 68, 0.40) 50%, transparent 100%);
  animation: line-flow 11.3s linear infinite;
  animation-delay: -5.6s;
}
.flow-line--green-3 {
  top: 74%;
  background: linear-gradient(90deg, transparent 0%, rgba(80, 185, 70, 0.38) 50%, transparent 100%);
  animation: line-flow 6.5s linear infinite;
  animation-delay: -2.1s;
}
.flow-line--green-4 {
  top: 88%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(80, 185, 70, 0.30) 50%, transparent 100%);
  animation: line-flow 13.1s linear infinite;
  animation-delay: -8.7s;
}

@keyframes line-flow {
  0%   { transform: rotate(-14deg) translateX(-80%); opacity: 0; }
  4%   { opacity: 1; }
  40%  { opacity: 1; }
  45%  { transform: rotate(-14deg) translateX(80%);  opacity: 0; }
  100% { transform: rotate(-14deg) translateX(80%);  opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-line { animation: none !important; }
}

/* Center: title block sits in the middle, above the spinning ring */
.halo-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.halo-center .eyebrow { margin: 0; }
.halo-center h1.odoo-title-mark { margin: 0; padding: 0; line-height: 1; }
.halo-center .odoo-title-mark img { display: block; width: 220px; height: auto; }
.halo-center .hero-sub { font-size: 14px !important; line-height: 1.45; margin: 0; }
.halo-center .hero-ctas { margin: 4px 0; display: flex; justify-content: center; }
.halo-center .hero-trust {
  font-size: 11px;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
  color: var(--charcoal);
}

/* Rotating halo ring — GPU-composited spin. Icons use box-shadow on the inner
   <img> so the rotation doesn't trigger filter re-raster (previously the killer). */
.halo-ring {
  position: absolute;
  inset: 0;
  z-index: 5;
  transform-origin: 50% 50%;
  animation: halo-spin 60s linear infinite;
  will-change: transform;
  transform: translateZ(0);
}
.halo-ring:hover { animation-play-state: paused; }

/* Each icon — 80×80 square, anchored at halo center, then translated to its orbit position.
   Removed filter:drop-shadow (forced re-raster on rotate); icons keep visual depth via
   box-shadow on the inner image (cheaper, composited). */
.halo-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  text-decoration: none !important;
  z-index: 6;
  transition: z-index 0ms 180ms;
}
.halo-icon:hover { z-index: 7; transition: z-index 0ms 0ms; }
.halo-icon img {
  border-radius: 14px;
  /* No hover shadow / no transition — the green box-shadow on hover was creating
     a visible green glow trail beneath the icon. */
}

/* Orbital radius 300px around center, 8 positions at 45° intervals */
.halo-icon-1 { transform: translate(    0px, -300px); }   /* N */
.halo-icon-2 { transform: translate(  212px, -212px); }   /* NE */
.halo-icon-3 { transform: translate(  300px,    0px); }   /* E */
.halo-icon-4 { transform: translate(  212px,  212px); }   /* SE */
.halo-icon-5 { transform: translate(    0px,  300px); }   /* S */
.halo-icon-6 { transform: translate( -212px,  212px); }   /* SW */
.halo-icon-7 { transform: translate( -300px,    0px); }   /* W */
.halo-icon-8 { transform: translate( -212px, -212px); }   /* NW */

/* Inner wrapper counter-rotates so each icon stays upright while ring spins.
   GPU composited; no filters to re-raster. */
.halo-icon-inner {
  display: block;
  position: relative;
  width: 80px;
  height: 80px;
  transform-origin: 50% 50%;
  animation: halo-counter-spin 60s linear infinite;
  will-change: transform;
  transition: box-shadow 250ms ease;
  /* border-radius removed — keep wrapper square (clipping handled per-element).
     The hover glow itself will be a soft diffuse halo. */
}
.halo-ring:hover .halo-icon-inner { animation-play-state: paused; }

/* Soft diffuse green halo on hover — applied via radial-gradient pseudo-element
   so there's no sharp box-shadow ring or white inner circle */
.halo-icon::after {
  content: '';
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(80, 185, 70, 0.55) 0%, rgba(80, 185, 70, 0.18) 45%, transparent 70%);
  opacity: 0;
  transition: opacity 250ms ease;
  pointer-events: none;
  z-index: -1;
}
.halo-icon:hover::after {
  opacity: 1;
}

.halo-icon img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: contain;
  transition: transform 280ms cubic-bezier(0.2, 0, 0, 1);
}
.halo-icon:hover img { transform: scale(1.18); }

/* Module name label sits below the icon image */
.halo-label {
  display: block;
  position: absolute;
  top: 86px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Work Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--charcoal);
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}

@keyframes halo-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes halo-counter-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* Responsive: scale the whole halo down on smaller screens */
@media (max-width: 760px) {
  .odoo-page .hero.odoo-hero { min-height: 600px !important; padding: 100px 0 50px !important; }
  .odoo-halo { transform: scale(0.78); }
}
@media (max-width: 520px) {
  .odoo-page .hero.odoo-hero { min-height: 500px !important; }
  .odoo-halo { transform: scale(0.6); }
}

/* legacy module-hero-grid (other future pages may use it) */
.module-hero-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.module-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px 80px;
  border-radius: 14px;
  text-decoration: none !important;
  color: var(--charcoal) !important;
  min-height: 220px;
  transition: transform 280ms cubic-bezier(0.2, 0, 0, 1),
              box-shadow 280ms cubic-bezier(0.2, 0, 0, 1);
  overflow: hidden;
  isolation: isolate;
}
.module-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.5) 100%);
  opacity: 0;
  transition: opacity 280ms ease;
  z-index: 0;
  pointer-events: none;
}
.module-tile > * { position: relative; z-index: 1; }
.module-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.32);
}
.module-tile:hover::before { opacity: 1; }

.module-tile-icon {
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 12px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  background: #fff;
  padding: 4px;
  transition: transform 280ms cubic-bezier(0.2, 0, 0, 1);
}
.module-tile:hover .module-tile-icon {
  transform: rotate(-4deg) scale(1.06);
}
.module-tile h3 {
  font-family: 'Work Sans', sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.15;
  color: var(--charcoal);
}
.module-tile p {
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(65, 62, 62, 0.78);
  margin: 0;
}
.module-tile-arrow {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(65, 62, 62, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--charcoal);
  transition: transform 280ms cubic-bezier(0.2, 0, 0, 1),
              background 280ms ease;
}
.module-tile:hover .module-tile-arrow {
  transform: translateX(4px);
  background: var(--charcoal);
  color: var(--cream, #f4f1ec);
}

/* Module tile palette — pastel pop against dark hero */
.module-tile--coral  { background: #ffe3e0; }
.module-tile--mint   { background: #e1f6de; }
.module-tile--yellow { background: #fff4d6; }
.module-tile--purple { background: #efe6ff; }
.module-tile--pink   { background: #ffd9e6; }


@media (max-width: 1100px) {
  .module-hero-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .module-hero-grid { grid-template-columns: repeat(2, 1fr); }
  .hero.hero-modules { padding: 130px 0 90px !important; }
  .module-tile { min-height: 190px; padding: 24px 20px 70px; }
  .module-tile-icon { width: 48px; height: 48px; }
}
@media (max-width: 480px) {
  .module-hero-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .module-tile { min-height: 170px; padding: 20px 18px 64px; }
  .module-tile-icon { width: 42px; height: 42px; }
  .module-tile h3 { font-size: 16px; }
  .module-tile p { font-size: 12.5px; }
}

/* Modules section — 4×2 grid of small cards (legacy, kept for other pages) */
.modules-section { padding: 120px 0 !important; }
.modules-section .section-head h2 {
  font-size: clamp(26px, 3.4vw, 44px) !important;
  letter-spacing: -0.025em !important;
  font-weight: 800 !important;
  line-height: 1.05;
  margin-bottom: 48px;
}
.modules-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.modules-grid .module-card,
.modules-grid .module-card-static {
  padding: 28px 24px;
  background: var(--bg-soft);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none !important;
  color: var(--charcoal) !important;
  transition: background 280ms cubic-bezier(0.2, 0, 0, 1),
              transform 280ms cubic-bezier(0.2, 0, 0, 1),
              box-shadow 280ms cubic-bezier(0.2, 0, 0, 1);
  border: 1px solid transparent;
}
.modules-grid a.module-card:hover {
  background: #fff;
  transform: translateY(-3px);
  box-shadow: 0 22px 50px rgba(65, 62, 62, 0.07);
  border-color: rgba(230, 57, 70, 0.18);
}
.modules-grid .module-tag {
  font-family: 'Work Sans', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
  font-weight: 700;
}
.modules-grid .module-card h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 4px 0 0;
  line-height: 1.2;
}
.modules-grid .module-card p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--charcoal-soft);
  margin: 0;
}
@media (max-width: 1000px) {
  .modules-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .modules-grid { grid-template-columns: 1fr; }
}

/* Why section — named contrast band */
.why-section { padding: 120px 0 !important; }
.why-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: start;
}
.why-section h2 {
  font-size: clamp(28px, 3.6vw, 48px) !important;
  letter-spacing: -0.025em !important;
  font-weight: 800 !important;
  line-height: 1.05;
}
.why-contrast {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 40px;
  background: var(--bg-soft);
  border-radius: 16px;
}
.contrast-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(65, 62, 62, 0.08);
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  line-height: 1.4;
}
.contrast-row:last-child { border-bottom: none; }
.contrast-bad {
  color: var(--charcoal-soft);
  text-decoration: line-through;
  text-decoration-color: rgba(65, 62, 62, 0.35);
  text-decoration-thickness: 1.5px;
  font-weight: 500;
}
.contrast-good {
  color: var(--charcoal);
  font-weight: 700;
  position: relative;
  padding-left: 18px;
}
.contrast-good::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 800;
}
@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 520px) {
  .why-contrast { padding: 28px 24px; }
  .contrast-row { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; }
  .contrast-bad { font-size: 13px; }
}

/* FAQ — native details/summary accordion */
.faq-section { padding: 120px 0 !important; }
.faq-section .section-head h2 {
  font-size: clamp(26px, 3.4vw, 44px) !important;
  letter-spacing: -0.025em !important;
  font-weight: 800 !important;
  line-height: 1.05;
  margin-bottom: 32px;
}
.faq-list {
  margin-top: 32px;
  max-width: 880px;
  border-top: 1px solid rgba(65, 62, 62, 0.10);
}
.faq-item {
  border-bottom: 1px solid rgba(65, 62, 62, 0.10);
}
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 48px 24px 0;
  font-family: 'Work Sans', sans-serif;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  position: relative;
  transition: color 200ms;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  font-weight: 400;
  color: var(--accent);
  transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);
  line-height: 1;
}
.faq-item[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item > summary:hover { color: var(--accent); }
.faq-item p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--charcoal-soft);
  margin: 0 0 12px;
  padding-right: 48px;
}
.faq-item > p:first-of-type { margin-top: 0; }
.faq-item > p:last-of-type { margin-bottom: 24px; }
@media (max-width: 520px) {
  .faq-item > summary { padding: 20px 36px 20px 0; font-size: 16px; }
  .faq-item p { padding-right: 0; font-size: 15px; }
}

/* SR-only — visually hidden text for SEO/accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Work section — supporting voices row (replaces standalone testimonials section) */
.work-voices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.work-voice {
  margin: 0;
}
.work-voice blockquote {
  margin: 0 0 14px;
  font-family: 'Work Sans', sans-serif;
  font-size: 19px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--charcoal);
  letter-spacing: -0.005em;
}
.work-voice figcaption {
  font-size: 13px;
  color: var(--charcoal-soft);
  letter-spacing: 0.02em;
}
@media (max-width: 760px) {
  .work-voices { grid-template-columns: 1fr; gap: 24px; }
  .work-voice blockquote { font-size: 17px; }
}

/* Work section — compact client roster line (replaces standalone clients section) */
.work-clients {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 15px;
  line-height: 1.65;
  color: var(--charcoal-soft);
}
.work-clients strong {
  color: var(--charcoal);
  font-weight: 600;
  margin-right: 6px;
}

/* ============================================================
   Mini-frame cards — stacked full-width rows, image left + content right
   ============================================================ */
.pillars-grid--mini {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 40px !important;
}
.mini-frame {
  display: grid !important;
  grid-template-columns: 1.05fr 1fr !important;
  background: var(--bg-soft) !important;
  border-radius: 18px !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: var(--charcoal) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  transition: transform 320ms ease, box-shadow 320ms ease, background 320ms ease !important;
  box-shadow: none !important;
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 360px;
}
.mini-frame:hover {
  background: #fff !important;
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(65, 62, 62, 0.08) !important;
}
.mini-frame-art {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  border-bottom: none;
  border-right: 1px solid rgba(0, 0, 0, 0.04);
  display: block;
  overflow: hidden;
  position: relative;
  aspect-ratio: auto;
}

/* — Custom Software: code editor with typing animation — */
.mini-frame-art--code {
  background: #1e1c1c;
  padding: 36px 44px;
  display: flex;
  align-items: center;
}
.code-window {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 16px;
  line-height: 1.7;
  color: #d8d4d4;
  width: 100%;
}
.code-line {
  white-space: nowrap;
  overflow: hidden;
}
.code-gutter {
  display: inline-block;
  width: 22px;
  color: #6e6868;
  margin-right: 12px;
  font-size: 14px;
}
.code-kw   { color: #e65644; }
.code-fn   { color: #f4c842; }
.code-str  { color: #f4c842; }
.code-var  { color: #50b946; }
.code-pun  { color: #d8d4d4; }
.code-caret {
  display: inline-block;
  color: #e65644;
  margin-left: 1px;
  animation: code-blink 1s steps(1) infinite;
}
@keyframes code-blink {
  50% { opacity: 0; }
}

/* — Websites: 3-thumbnail case-study collage — */
.mini-frame-art--web {
  background: linear-gradient(135deg, #fafafa 0%, #ececec 100%);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-collage {
  position: relative;
  width: 100%;
  height: 100%;
}
.site-thumb {
  position: absolute;
  width: 56%;
  height: 88%;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  transition: transform 350ms ease;
}
.site-thumb--1 { left: 0; top: 6%; transform: rotate(-5deg); z-index: 1; }
.site-thumb--2 { left: 22%; top: 6%; z-index: 3; transform: rotate(0deg) scale(1.04); }
.site-thumb--3 { right: 0; top: 6%; transform: rotate(5deg); z-index: 2; }
.mini-frame:hover .site-thumb--1 { transform: rotate(-8deg) translateX(-4px); }
.mini-frame:hover .site-thumb--3 { transform: rotate(8deg) translateX(4px); }
.site-thumb-chrome {
  height: 18px;
  background: #eaeaea;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 8px;
}
.site-thumb-chrome span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ccc;
}
.site-thumb-chrome span:nth-child(1) { background: #e65644; }
.site-thumb-chrome span:nth-child(2) { background: #f4c842; }
.site-thumb-chrome span:nth-child(3) { background: #50b946; }
.site-thumb-body {
  flex: 1;
  padding: 16px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100% - 18px);
  position: relative;
}
.site-thumb-tag {
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: auto;
  padding: 5px 10px;
  border-radius: 5px;
  background: rgba(0,0,0,0.04);
  color: var(--charcoal);
  text-transform: uppercase;
}
.site-thumb-body--hustle {
  background: linear-gradient(140deg, #2a2a2a 0%, #1a1a1a 100%);
}
.site-thumb-body--hustle .site-thumb-tag {
  background: rgba(255, 200, 50, 0.18);
  color: #f4c842;
}
.site-bulb {
  width: 14px; height: 14px;
  background: #f4c842;
  border-radius: 50%;
  box-shadow: 0 0 14px 2px rgba(244, 200, 66, 0.7);
  position: absolute;
  top: 30%; left: 22%;
  animation: bulb-pulse 1.6s ease-in-out infinite;
}
.site-bulb--2 { top: 42%; left: 48%; animation-delay: 0.4s; }
.site-bulb--3 { top: 30%; left: 72%; animation-delay: 0.8s; }
@keyframes bulb-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); }
}
.site-thumb-body--brige {
  background: linear-gradient(140deg, #1e3a8a 0%, #2563eb 100%);
}
.site-thumb-body--brige .site-thumb-tag {
  background: rgba(255,255,255,0.18);
  color: #fff;
}
.site-bar {
  height: 8px; width: 60%;
  background: rgba(255,255,255,0.6);
  border-radius: 2px;
  margin-bottom: 6px;
}
.site-bar--mid { width: 45%; }
.site-bar--short { width: 35%; background: #f4c842; }
.site-thumb-body--safety {
  background: linear-gradient(140deg, #c2410c 0%, #ea580c 100%);
}
.site-thumb-body--safety .site-thumb-tag {
  background: rgba(255,255,255,0.18);
  color: #fff;
}
.site-shield {
  width: 32px;
  height: 36px;
  background: #fff;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  margin-bottom: 8px;
}

/* — Odoo: tiled module icon background with logo on top — */
.mini-frame-art--odoo {
  background: linear-gradient(135deg, #714b67 0%, #5c3d54 100%);
  position: relative;
}
.odoo-tile-bg {
  position: absolute;
  inset: 0;
  opacity: 0.22;
}
.odoo-tile-bg img {
  position: absolute;
  width: 56px;
  height: 56px;
}
.odoo-logo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.odoo-logo-white {
  width: auto;
  height: 32%;
  max-width: 65%;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.32));
  display: block;
}

/* — Card body — */
.mini-frame-body {
  padding: 44px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mini-frame h3 {
  font-family: 'Work Sans', sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  color: var(--charcoal);
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.mini-frame .mini-num {
  font-family: 'Caveat', cursive;
  font-size: 30px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  flex: none;
}
.mini-frame p {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--charcoal-soft);
  margin: 0 0 22px;
  max-width: 460px;
}
.mini-frame .mini-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-weight: 600;
  font-size: 15px;
  margin-top: 0;
}
.mini-frame .mini-cta span[aria-hidden] {
  display: inline-block;
  transition: transform 250ms ease;
}
.mini-frame:hover .mini-cta span[aria-hidden] {
  transform: translateX(5px);
}

@media (max-width: 820px) {
  .mini-frame {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .mini-frame-art {
    aspect-ratio: 5 / 2.4 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  }
  .mini-frame-body { padding: 28px 24px; }
  .mini-frame h3 { font-size: 22px; }
  .mini-frame p { font-size: 15px; }
}

/* ============================================================
   Color & aesthetic — warm section backgrounds, brand-color H2 highlights,
   subtle decorative shapes, aggregate-trust proof section
   ============================================================ */

/* Warm-tinted section background — flat soft cream + diagonal coral stripes */
.section--warm {
  background:
    radial-gradient(circle at 15% 20%, rgba(230, 86, 68, 0.14) 0%, transparent 50%),
    radial-gradient(circle at 85% 75%, rgba(80, 185, 70, 0.10) 0%, transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(244, 200, 66, 0.10) 0%, transparent 55%),
    #fef4eb !important;
  position: relative;
  overflow: hidden;
}
.section--warm > .container {
  position: relative;
  z-index: 2;
}

/* Decorative shapes — kept as accents but small and pushed into corners */
.section-decor {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.4;
  z-index: 1;
}
.section-decor--coral {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(230, 86, 68, 0.35) 0%, transparent 70%);
  top: -120px; right: -80px;
}
.section-decor--mint {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(80, 185, 70, 0.30) 0%, transparent 70%);
  bottom: -120px; left: -80px;
}

/* Brand-color highlights on H2 keywords */
.hl-coral  { color: #e65644; }
.hl-green  { color: #30b125; }
.hl-purple { color: #714B67; }

/* ============================================================
   Proof section — badges + industries + one anonymous quote
   ============================================================ */
.proof-badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
  margin-bottom: 56px;
}
.proof-badges--four {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.proof-badges--four .proof-badge {
  padding: 18px 20px;
  gap: 12px;
}
.proof-badges--four .proof-badge-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
}
.proof-badges--four .proof-badge-body strong {
  font-size: 14.5px;
}
.proof-badges--four .proof-badge-body span {
  font-size: 12px;
}
.proof-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 26px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(65, 62, 62, 0.04);
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.proof-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(65, 62, 62, 0.08);
}
.proof-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff4d6 0%, #fff8e6 100%);
}
.proof-badge-icon .stars {
  color: #f4c842;
  font-size: 14px;
  letter-spacing: 1px;
}
.proof-badge-icon--odoo {
  background: linear-gradient(135deg, #efe6ff 0%, #f6f0fe 100%);
  padding: 10px;
}
.proof-badge-icon--odoo svg {
  width: 100%;
  height: 100%;
}
.proof-badge-icon--years {
  background: linear-gradient(135deg, #ffe3e0 0%, #fff0ee 100%);
  font-family: 'Caveat', cursive;
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
}
.proof-badge-icon--bark {
  background: linear-gradient(135deg, #e1f6de 0%, #effbed 100%);
}
.proof-badge-icon--bark .stars {
  color: #30b125;
  font-size: 12px;
  letter-spacing: 0.5px;
}
.proof-badge-icon--google {
  background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
  padding: 9px;
}
.proof-badge-icon--google svg {
  width: 100%;
  height: 100%;
}
.proof-badge-icon--bbb {
  background: linear-gradient(135deg, #efe6ff 0%, #f6f0fe 100%);
  font-family: 'Work Sans', sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: #714B67;
  letter-spacing: -0.02em;
}
.proof-badge-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.proof-badge-body strong {
  font-family: 'Work Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: -0.005em;
}
.proof-badge-body span {
  font-size: 13px;
  color: var(--charcoal-soft);
}

/* Industries served — pill row */
.proof-industries {
  margin-bottom: 56px;
  padding: 28px 32px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px dashed rgba(0, 0, 0, 0.08);
  border-radius: 14px;
}
.proof-industries-label {
  display: block;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 16px;
}
.proof-industries-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.proof-industries-list span {
  display: inline-block;
  padding: 7px 14px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal);
  transition: background 200ms, border-color 200ms, transform 200ms;
}
.proof-industries-list span:hover {
  background: var(--bg-soft);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* One representative quote */
.proof-quote {
  position: relative;
  margin: 0 0 32px;
  padding: 36px 40px 36px 76px;
  background: #fff;
  border-left: 4px solid var(--accent);
  border-radius: 0 14px 14px 0;
  max-width: 820px;
  box-shadow: 0 6px 24px rgba(65, 62, 62, 0.05);
}
.proof-quote-mark {
  position: absolute;
  top: 14px;
  left: 24px;
  font-family: 'Work Sans', serif;
  font-size: 80px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.25;
  font-weight: 700;
}
.proof-quote blockquote {
  margin: 0;
  font-family: 'Work Sans', sans-serif;
  font-size: 20px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--charcoal);
  letter-spacing: -0.005em;
}
.proof-quote figcaption {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--charcoal-soft);
}
.proof-quote figcaption .stars {
  color: #f4c842;
  letter-spacing: 1px;
}
.proof-cta {
  margin-top: 8px;
  font-size: 15px;
}
.proof-cta a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.proof-cta a span[aria-hidden] {
  display: inline-block;
  transition: transform 250ms ease;
}
.proof-cta a:hover span[aria-hidden] {
  transform: translateX(4px);
}

@media (max-width: 1100px) {
  .proof-badges--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .proof-badges, .proof-badges--four { grid-template-columns: 1fr; gap: 14px; }
  .proof-industries { padding: 22px; }
  .proof-quote { padding: 28px 24px 28px 52px; }
  .proof-quote blockquote { font-size: 17px; }
  .proof-quote-mark { font-size: 56px; left: 16px; top: 10px; }
}

/* ============================================================
   Testimonial tiles — 3-column pastel-tinted cards under the badges
   ============================================================ */
.testimonials-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
  position: relative;
  z-index: 2;
}
.testimonial-tile {
  margin: 0;
  padding: 28px 26px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform 280ms ease, box-shadow 280ms ease;
  box-shadow: 0 4px 18px rgba(65, 62, 62, 0.04);
}
.testimonial-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(65, 62, 62, 0.08);
}
.testimonial-tile--pink   { background: linear-gradient(135deg, #fff5f3 0%, #ffe3e0 100%); }
.testimonial-tile--mint   { background: linear-gradient(135deg, #f3fbf2 0%, #e1f6de 100%); }
.testimonial-tile--yellow { background: linear-gradient(135deg, #fffaef 0%, #fff4d6 100%); }
.testimonial-tile .stars {
  color: #f4c842;
  letter-spacing: 1.5px;
  font-size: 14px;
  margin-bottom: 14px;
  display: block;
}
.testimonial-tile blockquote {
  margin: 0 0 18px;
  font-family: 'Work Sans', sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--charcoal);
  letter-spacing: -0.005em;
  flex: 1;
}
.testimonial-tile figcaption {
  font-size: 12.5px;
  color: var(--charcoal-soft);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.testimonial-tile figcaption strong {
  color: var(--charcoal);
  font-weight: 700;
  font-size: 13.5px;
}
@media (max-width: 900px) {
  .testimonials-row { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
   Proof section — soft cream base with diagonal stripe texture
   ============================================================ */
.section--proof {
  background:
    radial-gradient(circle at 20% 15%, rgba(230, 86, 68, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 30%, rgba(113, 75, 103, 0.10) 0%, transparent 55%),
    radial-gradient(circle at 30% 85%, rgba(80, 185, 70, 0.10) 0%, transparent 50%),
    radial-gradient(circle at 90% 95%, rgba(244, 200, 66, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, #fff9f3 0%, #fdf2eb 100%) !important;
  position: relative;
  overflow: hidden;
}
.section--proof > .container { position: relative; z-index: 2; }
.section--proof::before {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(120px);
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(230, 86, 68, 0.22) 0%, transparent 70%);
  top: 40px;
  left: -160px;
  z-index: 0;
}
.section--proof::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(120px);
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(80, 185, 70, 0.18) 0%, transparent 70%);
  bottom: 60px;
  right: -140px;
  z-index: 0;
}

/* Studio band gets a soft warm tint instead of pure charcoal (kept dark for contrast,
   but a subtle warm haze layered on top) */
.studio-band {
  position: relative;
  overflow: hidden;
}
.studio-band::before {
  content: '';
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 86, 68, 0.16) 0%, transparent 70%);
  filter: blur(70px);
  top: -100px;
  right: -200px;
  pointer-events: none;
  z-index: 0;
}
.studio-band::after {
  content: '';
  position: absolute;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(113, 75, 103, 0.18) 0%, transparent 70%);
  filter: blur(70px);
  bottom: -100px;
  left: -180px;
  pointer-events: none;
  z-index: 0;
}
.studio-band > .container { position: relative; z-index: 2; }

/* ============================================================
   Studio band — founder spotlight (homepage)
   Overrides the legacy centered/narrow studio-band styling
   ============================================================ */
.studio-band--founder { text-align: left !important; padding: 120px 0 !important; }
.studio-band--founder .container {
  max-width: 1180px !important;
  text-align: left !important;
}
.studio-head {
  margin-bottom: 48px;
  max-width: 760px;
}
.studio-head .eyebrow { margin-bottom: 14px; }
.studio-band--founder .studio-head h2 {
  font-size: clamp(30px, 3.4vw, 44px) !important;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  max-width: 760px;
}

/* Wider founder spotlight — text gets priority, image stays large */
.founder-spotlight--wide {
  display: grid !important;
  grid-template-columns: 340px 1fr !important;
  gap: 60px !important;
  align-items: start !important;
  padding: 0 !important;
  border: none !important;
}
.founder-spotlight--wide .founder-photo {
  width: 320px !important;
  height: 320px !important;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-soft);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}
.founder-spotlight--wide .founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.founder-spotlight--wide .founder-meta {
  max-width: 640px;
}
.founder-spotlight--wide .founder-role {
  font-size: 17px !important;
  margin: 0 0 18px !important;
}
.founder-spotlight--wide .founder-role strong {
  font-size: 22px;
  color: var(--charcoal);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.founder-spotlight--wide .founder-bio {
  font-size: 17px !important;
  line-height: 1.6 !important;
  margin: 0 0 14px !important;
  max-width: 600px !important;
  color: var(--charcoal-soft) !important;
}

/* Credentials strip — 4 quick-hit authority signals */
.founder-credentials {
  list-style: none;
  padding: 0;
  margin: 26px 0 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 600px;
}
.founder-credentials li {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.founder-credentials li strong {
  font-family: 'Work Sans', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.founder-credentials li span {
  font-size: 11.5px;
  color: var(--charcoal-soft);
  line-height: 1.3;
}

/* Stack / industries lines under credentials */
.founder-stack {
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: var(--charcoal-soft) !important;
  margin: 0 0 8px !important;
  max-width: 640px !important;
}
.founder-stack strong {
  color: var(--charcoal);
  font-weight: 700;
  margin-right: 4px;
}

@media (max-width: 900px) {
  .founder-spotlight--wide {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .founder-spotlight--wide .founder-photo {
    width: 240px !important;
    height: 240px !important;
    margin: 0 auto;
  }
  .founder-credentials { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Pillar bullets — logo-paired variant (Migration + Integration cards)
   Shows source-brand → Odoo-module visual pairs above the text label
   ============================================================ */
.pillar-bullets--logos {
  gap: 14px !important;
  margin-top: 22px !important;
}
.bullet-logo-row {
  padding-left: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: 6px;
}
.bullet-logo-row::before {
  display: none !important;
}
.bullet-logo-pair {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}
.bullet-brand-logo {
  height: 22px;
  width: auto;
  max-width: 60px;
  object-fit: contain;
  display: block;
}
.bullet-brand-logo--odoo {
  height: 24px;
  max-width: 28px;
  border-radius: 4px;
}
.bullet-arrow {
  font-size: 13px;
  color: var(--charcoal-soft);
  margin: 0 2px;
  font-weight: 600;
}
.bullet-arrow--two-way {
  color: var(--accent);
}
.bullet-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--bg-soft);
  color: var(--charcoal-soft);
  border-radius: 4px;
  font-size: 14px;
}
.bullet-label {
  font-size: 14px;
  color: var(--charcoal);
  font-weight: 500;
  padding-left: 4px;
}

/* ============================================================
   Layout audit fixes for pillar cards — tighter, larger headings
   ============================================================ */
.pillars-grid .block {
  padding: 36px 32px !important;
}
.pillars-grid .block .pill-tag {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 18px !important;
}
.pillars-grid .block h3 {
  font-size: clamp(22px, 2.2vw, 28px) !important;
  margin-bottom: 12px !important;
}
.pillars-grid .block p {
  font-size: 15.5px !important;
  margin-bottom: 8px !important;
}
.pillars-grid .pillar-card .pillar-cta {
  margin-top: 22px;
  padding-top: 18px;
  font-size: 15px !important;
}

/* ============================================================
   Module cards — official Odoo module icon at the top of each card
   ============================================================ */
.module-card {
  position: relative;
}
.module-card-icon {
  display: block;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(113, 75, 103, 0.10);
}
.module-card-icon-pair {
  display: inline-flex;
  align-items: center;
  gap: -10px;
  margin-bottom: 18px;
}
.module-card-icon-pair img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(113, 75, 103, 0.10);
}
.module-card-icon-pair img:first-child {
  margin-right: -16px;
  z-index: 2;
  position: relative;
}
.module-card-icon-pair img:last-child {
  border: 2px solid #fff;
}
.module-card:hover .module-card-icon,
.module-card:hover .module-card-icon-pair img {
  transform: translateY(-2px);
  transition: transform 250ms ease;
}

/* Subtle static accent — soft purple glow behind the halo center
   (Replaces the rotating ring as a visual "alive" cue without animation) */
.odoo-halo::before {
  content: '';
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(113, 75, 103, 0.08) 0%, transparent 65%);
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   Halo lightning rays — opacity-only pulse animation
   Each ray fades in/out, staggered around the circle. Cheap on GPU
   because opacity-only animations don't trigger re-rasterization.
   ============================================================ */
.halo-rays {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  overflow: visible;
}
.halo-ray {
  opacity: 0;
  /* Opacity + steps animation; no filter — cheap on rotation. */
}
/* Prime-ish durations + irregular delays = rays never sync up. Each cycle has
   TWO strike windows so the storm feels active rather than orderly. */
.halo-ray-1 { animation: ray-strike 4.3s steps(1, end) 0.0s infinite; }
.halo-ray-2 { animation: ray-strike 5.9s steps(1, end) 0.7s infinite; }
.halo-ray-3 { animation: ray-strike 4.7s steps(1, end) 2.1s infinite; }
.halo-ray-4 { animation: ray-strike 6.7s steps(1, end) 1.3s infinite; }
.halo-ray-5 { animation: ray-strike 5.1s steps(1, end) 3.4s infinite; }
.halo-ray-6 { animation: ray-strike 7.3s steps(1, end) 0.5s infinite; }
.halo-ray-7 { animation: ray-strike 4.9s steps(1, end) 2.8s infinite; }
.halo-ray-8 { animation: ray-strike 5.7s steps(1, end) 1.9s infinite; }

/* Lightning strike: TWO bursts per cycle, each with a flicker.
   steps(1, end) so opacity jumps sharply — feels electric, not pulsy. */
@keyframes ray-strike {
  0%, 100% { opacity: 0; }
  /* First burst */
  1%       { opacity: 0.95; }
  2.5%     { opacity: 0.25; }
  3.5%     { opacity: 0.95; }
  5%       { opacity: 0; }
  /* Second burst — random-feeling secondary bolt */
  58%      { opacity: 0; }
  59%      { opacity: 0.85; }
  60.5%    { opacity: 0.35; }
  61.5%    { opacity: 0.9; }
  63%      { opacity: 0; }
}

/* Storm clouds — static (no animation), behind the rotating ring.
   Single SVG layer, no filters, low GPU cost. */
.halo-clouds {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}