/* ==========================================================================
   SaleStrat — "The Ledger" design system, v2
   Auto light/dark (prefers-color-scheme), solid editorial palette,
   3D tilt interactions, marquee, tightened responsive breakpoints.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: light dark;

  /* --- Color tokens (light default) --- */
  --bg: #F7F7F4;
  --surface: #FFFFFF;
  --surface-2: #ECEEE9;
  --ink: #111311;
  --ink-soft: #454B45;
  --ink-faint: #737A72;
  --brass: #F0642E;
  --brass-2: #FF7A3D;
  --brass-deep: #C6471D;
  --brass-tint: #FCE2D8;
  --forest: #227A4A;
  --forest-2: #42A96D;
  --forest-tint: #DDF1E5;
  --rule: rgba(17, 19, 17, 0.15);
  --rule-soft: rgba(17, 19, 17, 0.08);
  --shadow: 0 1px 2px rgba(21,33,27,0.05), 0 12px 32px rgba(21,33,27,0.08);
  --glow-brass: 0 0 0 1px rgba(240,100,46,.2), 0 18px 42px rgba(240,100,46,.16);
  --overlay-photo: linear-gradient(160deg, rgba(240,100,46,0.16), rgba(34,122,74,0.18));

  --serif: 'Montserrat', Arial, sans-serif;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --script: 'Caveat', cursive;
  --container: 1180px;
  --pad: clamp(18px, 5vw, 48px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101210;
    --surface: #181B18;
    --surface-2: #232722;
    --ink: #F6F7F2;
    --ink-soft: #BEC5BC;
    --ink-faint: #899189;
    --brass: #FF7040;
    --brass-2: #FF8B59;
    --brass-deep: #FF7040;
    --brass-tint: rgba(240,100,46,0.16);
    --forest: #56C27F;
    --forest-2: #83D79F;
    --forest-tint: rgba(66,169,109,0.16);
    --rule: rgba(246, 247, 242, 0.15);
    --rule-soft: rgba(246, 247, 242, 0.08);
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 20px 44px rgba(0,0,0,0.45);
      --glow-brass: 0 0 0 1px rgba(255,112,64,.22), 0 18px 42px rgba(0,0,0,.34);
      --overlay-photo: linear-gradient(160deg, rgba(240,100,46,0.18), rgba(34,122,74,0.22));
  }
}
html { scroll-behavior: smooth; scroll-padding-top: 82px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
  transition: background 0.3s ease, color 0.3s ease;
  padding-top: 76px;
}
@media (hover: hover) and (pointer: fine) {
  .magnetic-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 400;
    width: 34px;
    height: 34px;
    border: 1.5px solid var(--brass);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(.82);
    transition: opacity .2s ease, transform .22s cubic-bezier(.2,.8,.2,1), border-color .2s ease;
    will-change: transform;
  }
  .magnetic-cursor::before {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    top: 6px;
    left: 6px;
    border: 1px solid var(--brass-2);
    border-radius: 50%;
  }
  .magnetic-cursor::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 1.5px;
    right: -7px;
    bottom: 1px;
    background: var(--brass);
    transform: rotate(48deg);
    transform-origin: left center;
    border-radius: 2px;
  }
  .magnetic-cursor.is-visible { opacity: .9; }
  .magnetic-cursor.is-hovering { border-color: var(--forest-2); transform: translate3d(-50%, -50%, 0) scale(1.18); }
}
@media (max-width: 560px), (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .magnetic-cursor { display: none !important; }
}
.scroll-progress { position: fixed; left: 0; top: 0; z-index: 250; width: 100%; height: 3px; background: linear-gradient(90deg, var(--brass), var(--forest-2)); transform: scaleX(0); transform-origin: left center; box-shadow: 0 0 12px rgba(231,182,92,.45); pointer-events: none; }
.has-scrolled .site-nav { background: color-mix(in srgb, var(--surface) 78%, transparent); box-shadow: 0 10px 28px rgba(0,0,0,.14); }

.page-ready .page-transition-content { opacity: 0; transform: translateY(-8px); }
.transition-emojis { display: flex; align-items: center; gap: 9px; font-size: 1.7rem; }
.transition-emojis span { display: inline-block; animation: transition-bob 1.3s ease-in-out infinite; }
.transition-emojis span:nth-child(2) { animation-delay: 0.14s; }
.transition-emojis span:nth-child(3) { animation-delay: 0.28s; }
.transition-orbit { width: 116px; height: 70px; position: relative; display: flex; align-items: center; justify-content: center; }
.transition-orbit::before, .transition-orbit::after { content: ""; position: absolute; border: 1px solid rgba(231,182,92,0.42); border-radius: 50%; transform: rotate(-18deg); }
.transition-orbit::before { width: 112px; height: 34px; }
.transition-orbit::after { width: 76px; height: 76px; border-color: rgba(127,187,156,0.3); transform: rotate(28deg); }
.transition-orbit i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--brass-2); box-shadow: 0 0 16px var(--brass-2); animation: orbit-dot 1.8s linear infinite; }
.transition-orbit b, .transition-orbit em { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--forest-2); animation: magic-drift 1.8s ease-in-out infinite; }
.transition-orbit b { left: 4px; top: 8px; } .transition-orbit em { right: 6px; bottom: 8px; animation-delay: .45s; background: var(--brass-2); }
.transition-orbit span { position: relative; z-index: 1; }
.transition-progress { width: 150px; height: 3px; border-radius: 10px; overflow: hidden; background: rgba(247,245,238,0.16); }
.transition-progress span { display: block; width: 42%; height: 100%; border-radius: inherit; background: var(--brass-2); animation: progress-sweep 1s ease-in-out infinite; }
.transition-label { font-family: var(--script); font-size: 1.15rem; color: rgba(247,245,238,0.82); letter-spacing: 0.01em; }
@keyframes transition-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes orbit-dot { from { transform: rotate(0deg) translateX(53px) rotate(0deg); } to { transform: rotate(360deg) translateX(53px) rotate(-360deg); } }
@keyframes progress-sweep { 0% { transform: translateX(-130%); } 100% { transform: translateX(360%); } }
@keyframes magic-drift { 0%, 100% { opacity: .25; transform: translate(0, 4px) scale(.7); } 50% { opacity: 1; transform: translate(5px, -5px) scale(1.2); } }
@keyframes transition-grid { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(42px, 42px, 0); } }
@media (prefers-reduced-motion: reduce) {
  .page-transition { display: none; }
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.12; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 7vw, 4.1rem); font-weight: 500; }
h2 { font-size: clamp(1.5rem, 4.6vw, 2.5rem); }
h3 { font-size: 1.24rem; font-weight: 600; }
p { color: var(--ink-soft); max-width: 62ch; }
p.lede { font-size: clamp(1rem, 2.4vw, 1.14rem); color: var(--ink-soft); max-width: 54ch; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); width: 100%; }
.section { padding: clamp(48px, 9vw, 108px) 0; }
.section-rule { border-top: 1px solid var(--rule); }
.section { position: relative; isolation: isolate; }
.section::before { content: ""; position: absolute; width: min(34vw, 420px); height: min(34vw, 420px); top: 10%; right: -12%; border-radius: 50%; background: var(--brass); opacity: .045; filter: blur(70px); transform: translate3d(0, calc(var(--section-drift, 0px) * -1), 0); pointer-events: none; z-index: -1; }
.section:nth-of-type(even)::before { left: -12%; right: auto; background: var(--forest); }

.folio { display: flex; align-items: baseline; gap: 14px; font-family: var(--script); font-weight: 500; color: var(--brass-deep); font-size: clamp(1.15rem, 2.4vw, 1.35rem); margin-bottom: 14px; }
.folio::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.kicker { font-family: var(--script); color: var(--ink-faint); font-size: 1.2rem; }

/* --- Buttons --- */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 600; font-size: 0.96rem; padding: 13px 24px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; white-space: nowrap; }
.btn:hover { transform: translateY(-2px) scale(1.015); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--brass); color: #111311; -webkit-text-fill-color: #111311; box-shadow: 0 8px 22px rgba(240,100,46,0.24); }
.btn-primary > * { color: inherit; -webkit-text-fill-color: inherit; }
.btn-primary:hover { box-shadow: 0 14px 30px rgba(169,118,46,0.42); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-outline:hover { border-color: var(--brass); background: var(--surface-2); }
.btn-text { color: var(--brass-deep); font-weight: 600; border-bottom: 1px solid var(--brass); padding: 2px 0; border-radius: 0; display: inline-block; }
.btn-text:hover { color: var(--ink); border-color: var(--ink); }

/* --- Nav --- */
.site-nav { position: fixed; inset: 0 0 auto; z-index: 100; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); border-bottom: 1px solid var(--rule); transition: background .25s ease, box-shadow .25s ease, border-color .25s ease; }
.nav-row { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 16px; }
.nav-brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; transition: transform .3s ease; }
.nav-brand:hover { transform: translateY(-2px); }
.nav-brand img { display: block; height: 56px; width: 64px; object-fit: contain; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.nav-brand-fallback { display: none; font-family: var(--serif); font-weight: 700; }
.nav-brand-text { display: none; }
.nav-brand-name { font-family: var(--serif); font-weight: 600; font-size: 1.18rem; }
.nav-brand-tag { font-size: 0.72rem; color: var(--ink-faint); font-weight: 600; letter-spacing: 0.01em; }
.nav-links { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 28px); font-size: 0.95rem; font-weight: 500; }
.nav-links a:not(.btn) { color: var(--ink-soft); border-bottom: 1px solid transparent; padding-bottom: 3px; transition: color 0.2s ease, border-color 0.2s ease; }
.nav-links a:not(.btn):hover { color: var(--ink); border-color: var(--brass); }
.nav-toggle { display: none; background: none; border: 1px solid var(--rule); border-radius: 8px; width: 42px; height: 42px; align-items: center; justify-content: center; color: var(--ink); flex-shrink: 0; }

@media (min-width: 1081px) and (max-width: 1200px) {
  .nav-links { gap: 11px; font-size: .78rem; }
  .nav-links .btn { padding: 10px 13px; font-size: .78rem; }
  .nav-brand img { width: 56px; height: 48px; }
  .nav-row { gap: 12px; }
}
@media (max-width: 1080px) {
  .nav-brand-tag { display: none; }
  .nav-links { position: fixed; inset: 76px 0 0 0; z-index: 101; background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); flex-direction: column; align-items: flex-start; padding: 28px var(--pad); gap: 22px; transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; }
  .nav-links.open { transform: translateX(0); }
  .nav-links .btn { margin-top: 6px; }
  .nav-toggle { display: flex; }
}
@media (max-width: 400px) { .nav-brand img { width: 52px; height: 46px; } }

/* --- Hero --- */
.hero { padding: clamp(40px, 8vw, 96px) 0 clamp(32px, 6vw, 60px); position: relative; isolation: isolate; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 6vw, 64px); align-items: center; }
.service-hero .hero-grid { align-items: start; }
.service-hero { padding-top: clamp(34px, 5vw, 58px); }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 0.84rem; font-weight: 600; color: var(--forest); background: var(--forest-tint); padding: 6px 14px; border-radius: 20px; margin-bottom: 22px; }
.hero-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--forest); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.4); } }
.hero h1 { margin-bottom: 20px; }
.hero h1 em { font-family: var(--script); font-size: 1.12em; font-weight: 600; color: var(--brass); }
.hero .lede { margin-bottom: 30px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.hero-skills { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--rule); padding: 7px 13px; border-radius: 20px; }

/* --- Hero visual: floating 3D card cluster --- */
.hero-visual { position: relative; height: clamp(320px, 42vw, 460px); perspective: 1400px; translate: 0 var(--scroll-y, 0); transition: translate .15s linear; }
.hv-card { position: absolute; border-radius: 16px; background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow); transform-style: preserve-3d; animation: floaty 6s ease-in-out infinite; overflow: hidden; }
@keyframes floaty { 0%,100% { transform: translateY(0) rotateX(4deg) rotateY(-6deg); } 50% { transform: translateY(-14px) rotateX(2deg) rotateY(-4deg); } }
.hv-photo { width: 54%; height: 72%; top: 2%; left: 0; z-index: 3; animation-delay: 0s; }
.hv-photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-caption { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; display: flex; flex-direction: column; gap: 2px; padding: 9px 11px 8px; border-top: 2px solid var(--brass); border-radius: 0 0 9px 9px; background: rgba(16,18,16,.9); color: var(--ink); backdrop-filter: blur(8px); }
.photo-caption strong { font-size: clamp(.62rem, 1.2vw, .76rem); line-height: 1.2; }
.photo-caption span { color: var(--brass-2); font-size: clamp(.52rem, 1vw, .64rem); letter-spacing: .04em; }
.hv-stat { width: 44%; height: 28%; bottom: 2%; right: 0; z-index: 4; padding: 16px 18px; animation-delay: -1.4s; background: linear-gradient(135deg, var(--surface), var(--surface-2)); display: flex; flex-direction: column; justify-content: center; }
.hv-stat .fig { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 600; color: var(--brass-deep); }
.hv-stat .lab { font-size: 0.78rem; color: var(--ink-faint); margin-top: 2px; }
.hv-chip { width: 44%; height: 24%; top: 2%; right: 0; z-index: 2; padding: 14px 16px; animation-delay: -3s; display: flex; align-items: center; gap: 10px; }
.hv-chip .ico { width: 34px; height: 34px; border-radius: 9px; background: var(--forest-tint); color: var(--forest); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hv-chip .ico svg { width: 18px; height: 18px; }
.hv-chip .txt { font-size: 0.84rem; font-weight: 700; }
.hv-chip .sub { font-size: 0.72rem; color: var(--ink-faint); font-weight: 500; }
.hv-glow { position: absolute; width: 60%; height: 60%; left: 18%; top: 12%; background: radial-gradient(circle, var(--brass-2), transparent 70%); opacity: 0.35; filter: blur(50px); z-index: 1; }
.hero-feature-tiles { position: absolute; left: 0; bottom: 2%; width: 54%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; z-index: 5; }
.hv-feature { position: relative; min-height: 76px; padding: 10px; display: flex; align-items: center; gap: 8px; animation-delay: -4.2s; }
.hv-feature:nth-child(2) { animation-delay: -5.1s; }
.hv-feature strong, .hv-feature small { display: block; }
.hv-feature strong { font-size: clamp(0.64rem, 1.2vw, 0.76rem); line-height: 1.2; }
.hv-feature small { color: var(--ink-faint); font-size: clamp(0.58rem, 1.1vw, 0.68rem); margin-top: 3px; }
.feature-icon { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.feature-icon svg { width: 14px; height: 14px; }
.feature-icon-brass { background: var(--brass-tint); color: var(--brass-deep); }
.feature-icon-forest { background: var(--forest-tint); color: var(--forest); }
.hv-mini { width: 31%; min-height: 54px; padding: 9px 10px; display: flex; align-items: center; gap: 7px; z-index: 6; animation-delay: -2.2s; }
.hv-mini-top { top: 29%; right: 1%; }
.hv-mini-bottom { top: 48%; right: 1%; animation-delay: -3.6s; }
.hv-mini strong, .hv-mini small { display: block; white-space: nowrap; }
.hv-mini strong { font-size: clamp(0.58rem, 1.2vw, 0.7rem); line-height: 1.2; }
.hv-mini small { color: var(--ink-faint); font-size: clamp(0.52rem, 1vw, 0.62rem); margin-top: 2px; }
.mini-check { width: 22px; height: 22px; border-radius: 50%; background: var(--brass-tint); color: var(--brass-deep); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.8rem; font-weight: 800; }
.mini-check-forest { background: var(--forest-tint); color: var(--forest); }
@media (max-width: 900px) { .hero-visual { height: clamp(280px, 70vw, 380px); margin-top: 8px; } }
@media (max-width: 480px) { .hero-visual { height: 300px; } .hv-stat, .hv-chip { padding: 10px 12px; } .hero-feature-tiles { gap: 5px; } .hv-feature { padding: 7px; gap: 5px; min-height: 64px; } .feature-icon { width: 22px; height: 22px; } .hv-mini { width: 35%; padding: 7px; gap: 4px; } .hv-mini-top { top: 30%; } .hv-mini-bottom { top: 48%; } .mini-check { width: 18px; height: 18px; font-size: 0.68rem; } }

/* --- Interactive storefront preview --- */
.store-stage { position: relative; min-height: 420px; display: grid; place-items: center; perspective: 1200px; }
.store-shadow { position: absolute; width: 72%; height: 18%; bottom: 9%; border-radius: 50%; background: rgba(0,0,0,.25); filter: blur(22px); transform: rotate(-7deg); }
.store-window { position: relative; width: min(100%, 460px); padding: 18px; border: 1px solid var(--rule); border-radius: 18px; background: var(--surface); box-shadow: 0 28px 60px rgba(0,0,0,.22); transform: rotateX(5deg) rotateY(-8deg) rotateZ(1deg); transform-style: preserve-3d; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.store-window:hover { box-shadow: 0 34px 70px rgba(0,0,0,.3); }
.store-topbar, .store-status { display: flex; align-items: center; justify-content: space-between; font-size: .58rem; letter-spacing: .08em; color: var(--ink-faint); }
.store-brand { font-weight: 800; color: var(--ink); }
.store-nav b { color: var(--ink); letter-spacing: 0; }
.store-nav i { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 3px; border-radius: 50%; background: var(--brass); color: #fff; font-style: normal; font-size: .55rem; }
.store-hero-copy { padding: 34px 4px 24px; }
.store-hero-copy > span { color: var(--forest); font-size: .56rem; font-weight: 800; letter-spacing: .16em; }
.store-hero-copy strong { display: block; margin: 8px 0; font-family: var(--serif); font-size: clamp(2rem, 4vw, 3rem); line-height: .88; letter-spacing: -.05em; }
.store-hero-copy em { color: var(--brass); font-weight: 500; }
.store-hero-copy small { color: var(--ink-faint); font-size: .68rem; }
.store-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.store-product { appearance: none; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; transition: transform .25s ease; }
.store-product:hover, .store-product:focus-visible, .store-product.is-selected { transform: translateY(-5px); }
.product-art { position: relative; display: block; height: 120px; margin-bottom: 8px; overflow: hidden; border-radius: 10px; background: var(--forest-tint); }
.product-art::before, .product-art::after, .product-art i { content: ""; position: absolute; display: block; }
.product-art-lamp { background: #e7dfd0; }
.product-art-lamp::before { width: 42px; height: 42px; left: 50%; top: 24px; border-radius: 50%; background: var(--brass); transform: translateX(-50%); box-shadow: 0 14px 20px rgba(240,100,46,.25); }
.product-art-lamp::after { width: 3px; height: 36px; left: 50%; top: 64px; background: var(--ink); }
.product-art-lamp i { width: 35px; height: 4px; left: 50%; bottom: 14px; border-radius: 50%; background: var(--ink); transform: translateX(-50%); }
.product-art-vase { background: #dce9dc; }
.product-art-vase::before { width: 45px; height: 64px; left: 50%; top: 34px; border-radius: 36% 36% 45% 45%; background: var(--forest); transform: translateX(-50%); }
.product-art-vase::after { width: 18px; height: 22px; left: 50%; top: 18px; background: var(--forest); transform: translateX(-50%); }
.product-art-chair { background: #eee3d8; }
.product-art-chair::before { width: 54px; height: 48px; left: 50%; top: 25px; border-radius: 8px 8px 4px 4px; background: #bd744f; transform: translateX(-50%); }
.product-art-chair::after { width: 50px; height: 42px; left: 50%; top: 65px; border: 4px solid #8d543b; border-top: 0; transform: translateX(-50%); }
.store-product > span:last-child { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }
.store-product b { font-size: .68rem; }
.store-product small { color: var(--ink-faint); font-size: .57rem; }
.store-status { justify-content: flex-start; gap: 7px; margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--rule-soft); letter-spacing: 0; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--forest); box-shadow: 0 0 0 4px var(--forest-tint); }
.store-arrow { margin-left: auto; color: var(--brass); font-size: 1rem; }
.store-float { position: absolute; z-index: 2; padding: 10px 13px; border: 1px solid var(--rule); border-radius: 9px; background: var(--surface); box-shadow: var(--shadow); color: var(--ink-soft); font-size: .62rem; animation: floaty 5s ease-in-out infinite; }
.store-float b { margin-left: 5px; color: var(--forest); }
.store-float-one { top: 10%; right: -2%; }
.store-float-two { bottom: 11%; left: -3%; animation-delay: -2.2s; }
@media (max-width: 900px) { .store-stage { min-height: 360px; } .store-window { width: min(100%, 500px); } }
@media (max-width: 480px) { .store-stage { min-height: 330px; } .store-window { padding: 12px; } .store-hero-copy { padding: 24px 2px 18px; } .product-art { height: 92px; } .store-float { font-size: .55rem; } .store-float-one { right: -1%; } .store-float-two { left: -1%; } }
@media (prefers-reduced-motion: reduce) { .store-window, .store-product, .store-float { transition: none; animation: none; } .store-window { transform: none; } }

/* --- Interactive growth dashboard --- */
.growth-stage { position: relative; min-height: 420px; display: grid; place-items: center; perspective: 1200px; }
.growth-shadow { position: absolute; width: 72%; height: 18%; bottom: 9%; border-radius: 50%; background: rgba(0,0,0,.25); filter: blur(22px); transform: rotate(-7deg); }
.growth-dashboard { position: relative; width: min(100%, 460px); padding: 18px; border: 1px solid var(--rule); border-radius: 18px; background: var(--surface); box-shadow: 0 28px 60px rgba(0,0,0,.22); transform: rotateX(5deg) rotateY(-8deg) rotateZ(1deg); transform-style: preserve-3d; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.growth-dashboard:hover { box-shadow: 0 34px 70px rgba(0,0,0,.3); }
.growth-topbar { display: flex; justify-content: space-between; color: var(--ink-faint); font-size: .58rem; letter-spacing: .08em; }
.growth-topbar > span:last-child { display: flex; align-items: center; gap: 7px; letter-spacing: 0; }
.growth-brand { color: var(--ink); font-weight: 800; }
.growth-heading { padding: 34px 4px 20px; }
.growth-heading > span { color: var(--forest); font-size: .56rem; font-weight: 800; letter-spacing: .16em; }
.growth-heading strong { display: block; margin-top: 8px; font-family: var(--serif); font-size: clamp(2rem, 4vw, 3rem); line-height: .88; letter-spacing: -.05em; }
.growth-heading em { color: var(--brass); font-weight: 500; }
.growth-metric { display: flex; align-items: end; justify-content: space-between; padding: 13px 14px; border: 1px solid var(--rule-soft); border-radius: 10px; background: var(--surface-2); }
.growth-metric small { display: block; color: var(--ink-faint); font-size: .58rem; }
.growth-metric b { display: block; margin-top: 3px; font-family: var(--serif); font-size: 2rem; line-height: 1; }
.growth-metric > strong { color: var(--forest); font-size: .68rem; }
.growth-chart { height: 112px; display: flex; align-items: end; gap: 7px; padding: 16px 5px 12px; border-bottom: 1px solid var(--rule); }
.growth-chart i { flex: 1; height: var(--h); min-height: 9px; border-radius: 5px 5px 2px 2px; background: var(--brass); opacity: .78; animation: bar-rise 1.2s ease both; }
.growth-chart i:nth-child(even) { background: var(--forest); animation-delay: .12s; }
.growth-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 14px; }
.growth-channel { appearance: none; padding: 9px 8px; border: 1px solid transparent; border-radius: 9px; background: none; color: var(--ink); text-align: left; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.growth-channel:hover, .growth-channel:focus-visible, .growth-channel.is-selected { border-color: var(--rule); background: var(--surface-2); transform: translateY(-3px); }
.growth-channel span { display: flex; align-items: center; gap: 5px; }
.growth-channel b { font-size: .6rem; }
.growth-channel small { display: block; margin-top: 5px; color: var(--forest); font-size: .58rem; }
.channel-icon { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 5px; font-style: normal; font-size: .72rem; }
.channel-seo { color: var(--brass-deep); background: var(--brass-tint); }
.channel-ads { color: var(--forest); background: var(--forest-tint); }
.channel-store { color: var(--brass-deep); background: var(--brass-tint); }
.growth-status { display: flex; align-items: center; gap: 7px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule-soft); color: var(--ink-faint); font-size: .62rem; }
.growth-status .store-arrow { margin-left: auto; }
.growth-float-one { top: 10%; right: -2%; }
.growth-float-two { bottom: 11%; left: -3%; animation-delay: -2.2s; }
@media (max-width: 900px) { .growth-stage { min-height: 360px; } .growth-dashboard { width: min(100%, 500px); } }
@media (max-width: 480px) { .growth-stage { min-height: 330px; } .growth-dashboard { padding: 12px; } .growth-heading { padding: 24px 2px 18px; } .growth-float-one { right: -1%; } .growth-float-two { left: -1%; } }
@media (prefers-reduced-motion: reduce) { .growth-dashboard, .growth-channel, .growth-chart i { transition: none; animation: none; } .growth-dashboard { transform: none; } }

/* --- Ledger stat row --- */
.ledger { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--surface); }
.ledger-row { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) { .ledger-row { grid-template-columns: repeat(2, 1fr); } }
.ledger-cell { padding: 24px var(--pad); border-left: 1px solid var(--rule); transition: background 0.2s ease; }
.ledger-cell:hover { background: var(--surface-2); }
.ledger-cell:first-child { border-left: none; }
@media (max-width: 760px) { .ledger-cell:nth-child(2n+1) { border-left: none; } .ledger-cell:nth-child(n+3) { border-top: 1px solid var(--rule); } }
.ledger-fig { font-family: var(--serif); font-size: clamp(1.5rem, 4vw, 1.9rem); font-weight: 600; color: var(--brass-deep); font-variant-numeric: tabular-nums; }
.ledger-label { font-size: 0.84rem; color: var(--ink-faint); margin-top: 4px; }

/* --- Vision / mission section --- */
.vision-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
@media (max-width: 860px) { .vision-grid { grid-template-columns: 1fr; } }
.vision-card { border-radius: 16px; padding: 28px; background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow); transition: transform 0.35s ease, box-shadow 0.35s ease, border-color .35s ease; }
.vision-card .vnum { font-family: var(--script); color: var(--brass); font-size: 1.8rem; margin-bottom: 10px; }
.vision-card h3 { margin-bottom: 10px; }
.vision-card p { font-size: 0.96rem; }
.vision-lede { max-width: 68ch; }

/* --- Interactive service constellation --- */
.service-constellation { overflow: hidden; padding-bottom: clamp(26px, 4vw, 54px); }
.service-constellation > .container > h2, .service-constellation > .container > .lede { max-width: 680px; }
.service-constellation > .container > .folio, .service-constellation > .container > h2, .service-constellation > .container > .lede { position: relative; z-index: 2; }
.constellation { height: clamp(330px, 36vw, 390px); max-width: 900px; margin: 44px auto 0; position: relative; display: grid; place-items: center; perspective: 1000px; transform: perspective(1200px) rotateX(var(--my, 0deg)) rotateY(var(--mx, 0deg)); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.constellation-orbit { display: none; }
.constellation-lines { position: absolute; width: 100%; height: 100%; pointer-events: none; }
.constellation-lines i { position: absolute; left: 50%; top: 50%; width: min(24vw, 170px); height: 1px; background: linear-gradient(90deg, var(--brass), transparent); transform-origin: left center; opacity: .22; transition: opacity .5s ease, width .6s cubic-bezier(.2,.8,.2,1); }
.constellation-lines i:nth-child(1) { transform: rotate(-145deg); } .constellation-lines i:nth-child(2) { transform: rotate(-90deg); } .constellation-lines i:nth-child(3) { transform: rotate(-35deg); } .constellation-lines i:nth-child(4) { transform: rotate(35deg); } .constellation-lines i:nth-child(5) { transform: rotate(90deg); } .constellation-lines i:nth-child(6) { transform: rotate(145deg); }
.constellation-core { position: relative; z-index: 4; width: 190px; height: 190px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; font-family: var(--sans); transform-style: preserve-3d; transform: perspective(700px) rotateX(var(--core-rx, 0deg)) rotateY(var(--core-ry, 0deg)) translateZ(20px); transition: transform .55s cubic-bezier(.2,.8,.2,1); animation: core-float 5s ease-in-out infinite; }
.constellation-core:focus-visible { outline: 2px solid var(--brass-2); outline-offset: 8px; }
.constellation-core:hover, .constellation-core:focus-visible, .constellation.is-open .constellation-core { transform: perspective(700px) rotateX(var(--core-rx, 0deg)) rotateY(var(--core-ry, 0deg)) scale(1.08) translateZ(20px); }
.constellation-core img { position: relative; z-index: 2; width: 132px; height: 132px; object-fit: contain; filter: saturate(1.18) contrast(1.08); transform: translateZ(24px) rotateX(2deg) rotateY(-3deg); transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .45s ease; }
.constellation-core:hover img, .constellation-core:focus-visible img, .constellation.is-open .constellation-core img { transform: translateZ(36px) rotateX(5deg) rotateY(-7deg) scale(1.04); filter: saturate(1.28) contrast(1.12); }
.core-network { position: absolute; z-index: 1; width: min(72vw, 520px); height: 170px; transform: translateZ(2px); opacity: .78; animation: network-drift 12s ease-in-out infinite; pointer-events: none; }
.core-network::after { display: none; }
.core-network-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.constellation-core:hover .core-network, .constellation-core:focus-visible .core-network, .constellation.is-open .core-network { opacity: 1; animation-duration: 7s; }
.core-glow { display: none; }
.service-branches { position: absolute; inset: 0; }
.service-node { position: absolute; z-index: 3; width: 154px; min-height: 70px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); display: grid; grid-template-columns: 29px 1fr; column-gap: 8px; align-items: center; opacity: 0; transform: translate(-50%, -50%) scale(.76); pointer-events: none; transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease; }
.service-node:hover { border-color: var(--brass); box-shadow: 0 16px 35px rgba(169,118,46,.2); }
.service-node strong, .service-node small { display: block; grid-column: 2; white-space: nowrap; }
.service-node strong { font-size: .75rem; line-height: 1.2; }
.service-node small { color: var(--ink-faint); font-size: .62rem; margin-top: 2px; }
.node-icon { grid-row: 1 / span 2; width: 29px; height: 29px; border-radius: 9px; display: grid; place-items: center; background: var(--brass-tint); color: var(--brass-deep); font-size: .95rem; }
.node-design { left: 17%; top: 25%; } .node-grow { left: 83%; top: 25%; } .node-ads { left: 9%; top: 67%; } .node-seo { left: 91%; top: 67%; } .node-automation { left: 29%; top: 91%; } .node-vision { left: 71%; top: 91%; }
.constellation.is-open .service-node, .constellation:focus-within .service-node { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.constellation.is-open .constellation-lines i, .constellation:focus-within .constellation-lines i { opacity: .65; width: min(30vw, 220px); }
@keyframes orbit-breathe { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(3deg) scale(1.025); } }
@keyframes core-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes core-pulse { 0%, 100% { transform: scale(.96); } 50% { transform: scale(1.08); } }
@keyframes core-mobile-tilt { 0%, 100% { transform: translateZ(24px) rotateX(-4deg) rotateY(-7deg); } 50% { transform: translateZ(24px) rotateX(4deg) rotateY(7deg); } }
@keyframes network-drift { 0%, 100% { transform: translateZ(2px) translateY(0) rotateX(4deg) rotateY(-2deg); } 50% { transform: translateZ(8px) translateY(-5px) rotateX(-3deg) rotateY(3deg); } }

/* --- Pinned scroll story --- */
.scroll-story { min-height: 260vh; position: relative; }
.story-grid { min-height: 100vh; position: sticky; top: 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: clamp(30px, 7vw, 100px); align-items: center; overflow: hidden; }
.story-copy { position: relative; z-index: 2; }
.story-copy h2 { max-width: 520px; }
.story-steps { margin-top: 42px; border-left: 1px solid var(--rule); }
.story-step { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 17px 0 17px 20px; opacity: .38; transform: translateX(0); transition: opacity .45s ease, transform .45s ease, border-color .45s ease; border-left: 2px solid transparent; margin-left: -1px; }
.story-step.is-active { opacity: 1; border-left-color: var(--brass); transform: translateX(7px); }
.story-step > span { font-family: var(--serif); color: var(--brass); font-size: .95rem; }
.story-step h3 { font-size: 1.1rem; margin-bottom: 5px; }
.story-step p { font-size: .88rem; max-width: 36ch; }
.story-stage { height: min(64vw, 590px); min-height: 390px; position: relative; perspective: 1200px; transform: rotateY(calc(var(--story-progress, 0) * -8deg)); transition: transform .2s linear; }
.story-stage-glow { position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(circle, var(--brass-2), transparent 66%); opacity: .18; filter: blur(28px); }
.story-ring { position: absolute; border: 1px solid var(--rule); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ring-a { width: 88%; height: 52%; transform: translate(-50%, -50%) rotate(-24deg); animation: story-ring 12s linear infinite; }
.ring-b { width: 55%; height: 80%; transform: translate(-50%, -50%) rotate(27deg); animation: story-ring 9s linear -3s infinite reverse; border-color: rgba(127,187,156,.28); }
.story-panel { position: absolute; left: 50%; top: 50%; width: min(300px, 65%); aspect-ratio: 1.35; border: 1px solid var(--rule); border-radius: 18px; padding: 24px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface-2) 86%, transparent)); box-shadow: var(--shadow); display: flex; flex-direction: column; justify-content: space-between; transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .6s ease; }
.story-panel span { color: var(--ink-faint); font-size: .64rem; letter-spacing: .14em; }
.panel-back { transform: translate(-50%, -50%) translate(calc((var(--story-progress, 0) - .5) * -150px), -70px) rotate(-12deg) scale(.82); opacity: .35; }
.panel-mid { transform: translate(-50%, -50%) translate(calc((var(--story-progress, 0) - .5) * 40px), 0) rotate(5deg) scale(.9); opacity: .7; }
.panel-mid b { font-family: var(--serif); color: var(--forest); font-size: 2.8rem; }
.panel-mid small, .panel-front small { color: var(--ink-faint); font-size: .72rem; }
.panel-front { transform: translate(-50%, -50%) translate(calc((var(--story-progress, 0) - .5) * 150px), 70px) rotate(-4deg) scale(1); }
.panel-front strong { font-family: var(--serif); color: var(--brass); font-size: 5rem; line-height: 1; }
.story-orbit-dot { position: absolute; width: 10px; height: 10px; left: 50%; top: 50%; border-radius: 50%; background: var(--brass-2); box-shadow: 0 0 22px var(--brass-2); transform: rotate(calc(var(--story-progress, 0) * 360deg)) translateX(190px); }
@keyframes story-ring { from { rotate: 0deg; } to { rotate: 360deg; } }
@media (max-width: 800px) {
  .scroll-story { min-height: auto; padding: 70px 0; }
  .story-grid { min-height: auto; position: relative; grid-template-columns: 1fr; gap: 30px; }
  .story-stage { order: -1; height: 340px; min-height: 0; }
  .story-panel { width: min(250px, 68%); padding: 18px; }
  .panel-front strong { font-size: 4rem; }
  .story-steps { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) { .hero-visual { translate: none; } .scroll-progress { transition: none; } }

/* --- Two-path split --- */
.path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 36px; }
@media (max-width: 800px) { .path-grid { grid-template-columns: 1fr; } }
.path-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; padding: clamp(24px, 4vw, 38px); display: flex; flex-direction: column; box-shadow: var(--shadow); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color .3s ease; will-change: transform; }
.path-card .path-num { font-family: var(--script); color: var(--brass); font-size: 1.2rem; margin-bottom: 10px; }
.path-card h3 { font-size: clamp(1.25rem, 3vw, 1.5rem); margin-bottom: 10px; }
.path-card p { margin-bottom: 18px; }
.path-list { list-style: none; margin-bottom: 24px; flex: 1; }
.path-list li { position: relative; padding-left: 20px; margin-bottom: 10px; color: var(--ink-soft); font-size: 0.96rem; }
.path-list li::before { content: "—"; position: absolute; left: 0; color: var(--brass); }

/* --- Service feature cards --- */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; }
@media (max-width: 760px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card { border: 1px solid var(--rule); border-radius: 16px; padding: 26px; background: var(--surface); box-shadow: var(--shadow); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color .3s ease; will-change: transform; }
.feature-card h3 { margin-bottom: 10px; font-size: 1.18rem; }
.feature-card p { margin-bottom: 16px; font-size: 0.96rem; }
.feature-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { font-size: 0.78rem; font-weight: 700; padding: 5px 11px; border-radius: 20px; }
.tag.brass { background: var(--brass-tint); color: var(--brass-deep); }
.tag.forest { background: var(--forest-tint); color: var(--forest); }

/* --- Case studies --- */
.case-list { display: flex; flex-direction: column; margin-top: 36px; }
.case-row { display: grid; grid-template-columns: 200px 1fr 200px; gap: 28px; align-items: center; padding: 28px 0; border-top: 1px solid var(--rule); }
.case-list .case-row:last-child { border-bottom: 1px solid var(--rule); }
@media (max-width: 860px) { .case-row { grid-template-columns: 1fr; gap: 16px; } }
.photo-frame { position: relative; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); transform: translateZ(0); }
.photo-frame img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.5s ease; }
.photo-frame::after { content: ""; position: absolute; inset: 0; background: var(--overlay-photo); mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) { .photo-frame::after { mix-blend-mode: normal; } }
.case-row:hover .photo-frame img { transform: scale(1.06); }
.case-row:hover .photo-frame { box-shadow: 0 18px 36px rgba(169,118,46,.2); }
.case-tags { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.case-row h3 { font-size: clamp(1.1rem, 2.6vw, 1.28rem); margin-bottom: 8px; }
.case-row p { font-size: 0.95rem; }
.case-stats { display: flex; flex-direction: column; gap: 12px; }
.case-stats div { text-align: right; }
@media (max-width: 860px) { .case-stats { flex-direction: row; flex-wrap: wrap; gap: 18px; } .case-stats div { text-align: left; } }
.case-stat-fig { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; color: var(--forest); font-variant-numeric: tabular-nums; }
.case-stat-label { font-size: 0.8rem; color: var(--ink-faint); }

/* --- Testimonials --- */
.test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
@media (max-width: 900px) { .test-grid { grid-template-columns: 1fr; } }
.test-card { border: 1px dashed var(--rule); border-radius: 14px; padding: 24px; background: var(--surface); }
.test-card p { font-family: var(--script); font-size: 1.15rem; color: var(--ink); margin-bottom: 18px; }
.test-meta { font-size: 0.82rem; color: var(--ink-faint); font-weight: 600; }

/* --- Tools marquee (replaces static tech grid) --- */
.marquee { overflow: hidden; position: relative; margin-top: 36px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; gap: 16px; animation: scroll-left 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tool-pill { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow); white-space: nowrap; }
.tool-pill .ico { width: 30px; height: 30px; border-radius: 8px; background: var(--brass-tint); color: var(--brass-deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tool-pill .ico svg { width: 16px; height: 16px; }
.tool-pill strong { font-size: 0.88rem; color: var(--ink); display: block; }
.tool-pill span { font-size: 0.76rem; color: var(--ink-faint); display: block; }

/* --- Process steps --- */
.process-list { margin-top: 40px; }
.process-item { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid var(--rule); }
.process-list .process-item:last-child { border-bottom: 1px solid var(--rule); }
.process-num { font-family: var(--serif); font-size: 1.5rem; color: var(--brass); font-weight: 600; }
.process-item h3 { margin-bottom: 8px; font-size: 1.12rem; }
.process-item p { font-size: 0.96rem; }
@media (max-width: 480px) { .process-item { grid-template-columns: 40px 1fr; gap: 14px; } .process-num { font-size: 1.2rem; } }
.process-tabs { margin-top: 34px; }
.process-tab-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 4px 2px 22px; border-bottom: 1px solid var(--rule); perspective: 1100px; }
.process-tab { position: relative; min-height: 156px; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; padding: 18px 18px 30px; border: 1px solid var(--rule); border-radius: 16px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 88%, white 12%), var(--surface-2)); color: var(--ink); font: 600 .82rem var(--sans); text-align: left; cursor: pointer; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transform-style: preserve-3d; box-shadow: 0 14px 28px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.06); transition: transform .18s ease-out, background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease; }
.process-tab::before { content: ""; position: absolute; width: 130px; height: 130px; right: -44px; bottom: -62px; border-radius: 50%; background: var(--brass); opacity: .08; filter: blur(2px); transition: transform .45s ease, opacity .35s ease; }
.process-tab:hover, .process-tab:focus-visible, .process-tab.is-active { border-color: var(--brass); background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface-2) 72%, var(--brass-tint))); color: var(--ink); box-shadow: 0 24px 42px rgba(0,0,0,.2), 0 0 0 1px rgba(255,112,64,.1), inset 0 1px 0 rgba(255,255,255,.1); }
.process-tab:hover::before, .process-tab:focus-visible::before, .process-tab.is-active::before { opacity: .22; transform: scale(1.35); }
.process-tile-top { position: relative; z-index: 1; display: flex; width: 100%; justify-content: space-between; align-items: center; }
.process-tile-top > span { color: var(--brass); font: italic 1.25rem var(--serif); }
.process-tile-top i { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--rule); border-radius: 9px; color: var(--brass-2); font-style: normal; font-size: 1.05rem; transition: transform .35s ease, background .3s ease; }
.process-tab:hover .process-tile-top i, .process-tab.is-active .process-tile-top i { transform: translateZ(18px) rotate(-8deg) scale(1.1); background: var(--brass-tint); }
.process-tab strong, .process-tab small { position: relative; z-index: 1; display: block; width: 100%; line-height: 1.3; }
.process-tab strong { margin-top: auto; color: var(--ink); font-size: 1rem; }
.process-tab small { color: var(--ink-soft); font-size: .68rem; font-weight: 500; }
.process-tile-signal { position: absolute; z-index: 1; left: 18px; bottom: 14px; width: 46px; height: 3px; border-radius: 4px; background: linear-gradient(90deg, var(--brass), var(--forest-2)); transform-origin: left; transform: scaleX(.48); transition: transform .4s ease; }
.process-tab:hover .process-tile-signal, .process-tab.is-active .process-tile-signal { transform: scaleX(1); }
.process-panels { position: relative; min-height: 190px; }
.process-panel { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 20px; margin-top: 18px; padding: 28px 24px; border: 1px solid var(--rule); border-radius: 16px; background: color-mix(in srgb, var(--surface) 78%, transparent); box-shadow: var(--shadow); }
.process-panel[hidden] { display: none; }
.process-panel.is-active { animation: process-panel-in .45s ease both; }
@keyframes process-panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) { .process-tab-list { grid-template-columns: 1fr; } .process-tab { min-height: 132px; } }
@media (max-width: 480px) { .process-panel { grid-template-columns: 40px 1fr; gap: 14px; padding: 22px 16px; } }

/* --- CTA band --- */
.cta-band { position: relative; overflow: hidden; background: var(--ink); color: var(--bg); border-radius: 20px; padding: clamp(30px, 6vw, 56px); text-align: left; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr); gap: clamp(28px, 6vw, 72px); align-items: center; }
.cta-band .lede, .cta-band p { margin-left: auto; margin-right: auto; }
.cta-copy { position: relative; z-index: 1; }
.cta-logo { height: 36px; width: auto; margin: 0 auto 18px; position: relative; }
@media (prefers-color-scheme: dark) { .cta-band { background: #181B18; } }
.cta-band .lede, .cta-band p { margin-left: 0; margin-right: 0; }
.cta-actions { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; }
.cta-actions .btn { justify-content: center; width: 100%; }
.contact-icon { width: 17px; height: 17px; flex-shrink: 0; }
.cta-band::after { content: ""; position: absolute; width: 180px; height: 180px; border: 1px solid var(--brass); opacity: 0.35; border-radius: 50%; top: -80px; right: -60px; }
.cta-band h2 { color: #F6F3E9; position: relative; }
.cta-band p { color: rgba(246, 243, 233, 0.78); position: relative; }
.cta-eyebrow { display: block; color: var(--brass-2); font-family: var(--script); font-size: 1.2rem; margin-bottom: 12px; }
.cta-visual { min-height: 210px; position: relative; display: flex; align-items: center; justify-content: center; }
.cta-orbit { position: absolute; border: 1px solid rgba(231,182,92,0.42); border-radius: 50%; transform: rotate(-18deg); }
.orbit-one { width: 230px; height: 94px; animation: cta-orbit-float 5s ease-in-out infinite; }
.orbit-two { width: 160px; height: 160px; border-color: rgba(127,187,156,0.34); transform: rotate(30deg); animation: cta-orbit-float 5s ease-in-out -1.8s infinite; }
.cta-spark { position: absolute; top: 22px; right: 22%; color: var(--brass-2); font-size: 1.5rem; animation: transition-bob 2s ease-in-out infinite; }
.cta-metric { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; font-family: var(--serif); }
.cta-metric strong { font-size: clamp(1.8rem, 4vw, 2.5rem); color: var(--brass-2); }
.cta-metric span { font-family: var(--sans); font-size: 0.72rem; color: rgba(246,243,233,0.68); }
.cta-bars { position: absolute; bottom: 16px; display: flex; align-items: end; gap: 6px; height: 42px; }
.cta-bars i { display: block; width: 7px; height: 18px; border-radius: 3px 3px 0 0; background: var(--forest-2); animation: bar-rise 1.5s ease-in-out infinite alternate; }
.cta-bars i:nth-child(2) { height: 27px; animation-delay: .15s; } .cta-bars i:nth-child(3) { height: 21px; animation-delay: .3s; } .cta-bars i:nth-child(4) { height: 35px; animation-delay: .45s; } .cta-bars i:nth-child(5) { height: 42px; animation-delay: .6s; }
.cta-visual-label { position: absolute; bottom: -3px; right: 0; font-size: 0.72rem; color: rgba(246,243,233,0.55); letter-spacing: 0.08em; text-transform: uppercase; }
.cta-visual-label span { color: var(--brass-2); padding: 0 4px; }
.cta-build-visual { min-height: 210px; }
.build-window { width: min(280px, 90%); border: 1px solid rgba(246,243,233,0.25); border-radius: 12px; overflow: hidden; background: rgba(246,243,233,0.08); box-shadow: 0 18px 34px rgba(0,0,0,0.18); transform: rotate(-4deg); animation: build-float 4.5s ease-in-out infinite; }
.build-window-top { display: flex; align-items: center; gap: 5px; padding: 9px 11px; border-bottom: 1px solid rgba(246,243,233,0.16); color: rgba(246,243,233,0.5); font-size: 0.6rem; }
.build-window-top i { width: 6px; height: 6px; border-radius: 50%; background: var(--brass-2); opacity: .8; }
.build-window-top i:nth-child(2) { background: var(--forest-2); }
.build-window-top i:nth-child(3) { background: rgba(246,243,233,0.4); }
.build-window-top span { margin-left: auto; }
.build-window-body { padding: 18px; }
.build-line { width: 42%; height: 7px; border-radius: 5px; background: var(--brass-2); opacity: .85; margin-top: 8px; }
.build-line-wide { width: 68%; height: 11px; margin-top: 0; }
.build-card-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
.build-card-row i { height: 48px; border-radius: 7px; background: linear-gradient(145deg, rgba(127,187,156,.8), rgba(63,92,76,.35)); animation: card-pulse 2.4s ease-in-out infinite; }
.build-card-row i:nth-child(2) { animation-delay: .25s; background: linear-gradient(145deg, rgba(231,182,92,.85), rgba(169,118,46,.3)); }
.build-card-row i:nth-child(3) { animation-delay: .5s; }
.build-spark { position: absolute; color: var(--brass-2); font-size: 1.4rem; animation: transition-bob 2.2s ease-in-out infinite; }
.build-spark-one { top: 23px; right: 12%; }
.build-spark-two { bottom: 28px; left: 13%; color: var(--forest-2); animation-delay: .6s; }
.cta-build-visual .cta-visual-label { right: 2%; }
@keyframes build-float { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(-1deg) translateY(-8px); } }
@keyframes card-pulse { 0%, 100% { transform: translateY(0); opacity: .72; } 50% { transform: translateY(-4px); opacity: 1; } }
@keyframes cta-orbit-float { 0%, 100% { transform: rotate(-18deg) translateY(0); } 50% { transform: rotate(-14deg) translateY(-7px); } }
@keyframes bar-rise { from { transform: scaleY(.72); transform-origin: bottom; opacity: .65; } to { transform: scaleY(1); transform-origin: bottom; opacity: 1; } }
.cta-band .btn-primary { background: var(--brass-2); color: #111311; -webkit-text-fill-color: #111311; }
.cta-band .btn-outline { border-color: rgba(246,243,233,0.3); color: #F6F3E9; }
.cta-band .btn-outline:hover { background: rgba(246,243,233,0.08); }
@media (max-width: 700px) { .cta-band { grid-template-columns: 1fr; gap: 26px; text-align: center; } .cta-band .lede, .cta-band p { margin-left: auto; margin-right: auto; } .cta-logo { margin-bottom: 14px; } .cta-actions { max-width: 360px; width: 100%; margin: 0 auto; } .cta-visual { min-height: 170px; } .cta-visual-label { right: 8%; } }

/* Friendly, interactive contact choices shared by page and article CTAs. */
.cta-band h2 { color: #f7f6f1; }
.cta-band p { color: rgba(247,246,241,.78); }
.cta-intents { position: relative; z-index: 1; margin-top: 22px; }
.cta-intents-label { display: block; margin-bottom: 9px; color: rgba(247,246,241,.7); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cta-intent-options { display: flex; flex-wrap: wrap; gap: 8px; }
.cta-intent { min-height: 38px; padding: 8px 12px; border: 1px solid rgba(247,246,241,.25); border-radius: 999px; background: rgba(247,246,241,.07); color: #f7f6f1; font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.cta-intent:hover { transform: translateY(-2px); border-color: rgba(255,139,89,.78); background: rgba(247,246,241,.13); }
.cta-intent[aria-pressed="true"] { border-color: var(--brass-2); background: rgba(255,139,89,.18); box-shadow: 0 0 0 3px rgba(255,139,89,.1); }
.cta-intent:focus-visible { outline: 2px solid var(--brass-2); outline-offset: 3px; }
.cta-band .cta-intent-status { min-height: 1.5em; margin-top: 10px; color: rgba(247,246,241,.68); font-size: .78rem; }
.cta-band .cta-actions .btn-outline { border-color: rgba(247,246,241,.32); color: #f7f6f1; }
.cta-band .cta-actions .btn-outline:hover { border-color: rgba(247,246,241,.55); background: rgba(247,246,241,.1); }
.cta-band .cta-actions { gap: 10px; }
.post-cta { position: relative; overflow: hidden; padding: clamp(22px, 4vw, 34px); }
.post-cta h3 { color: var(--ink); }
.post-cta > p { color: var(--ink-soft); }
.post-cta .cta-intents-label { color: var(--ink-soft); }
.post-cta .cta-intent { border-color: var(--rule); background: color-mix(in srgb, var(--surface) 84%, var(--brass-tint)); color: var(--ink); }
.post-cta .cta-intent:hover { border-color: var(--brass); background: var(--brass-tint); }
.post-cta .cta-intent[aria-pressed="true"] { border-color: var(--brass); background: var(--brass-tint); }
.post-cta .cta-intent:focus-visible { outline-color: var(--brass); }
.post-cta .cta-intent-status { min-height: 1.5em; margin-top: 10px; color: var(--ink-faint); font-size: .78rem; }
.post-cta .cta-actions { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; justify-self: auto; gap: 10px; margin: 20px auto 0; }
.post-cta .cta-actions .btn { width: auto; }
@media (max-width: 700px) {
  .cta-band .cta-intent-options { justify-content: center; }
  .cta-band .cta-intent { flex: 1 1 145px; }
}
@media (max-width: 480px) {
  .post-cta .cta-actions { flex-direction: column; }
  .post-cta .cta-actions .btn { width: 100%; }
}

/* --- Footer --- */
.site-footer { border-top: 1px solid var(--rule); padding: 36px 0; }
.sai-launcher:focus-visible, .sai-close:focus-visible, .sai-qr button:focus-visible, .sai-send:focus-visible,
.sai-input-row input:focus-visible, .nav-toggle:focus-visible {
  outline: 3px solid var(--forest-2);
  outline-offset: 3px;
}
:focus-visible { outline: 3px solid var(--forest-2); outline-offset: 3px; }
.footer-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; font-size: 0.86rem; color: var(--ink-faint); text-align: center; }
.footer-row a { color: var(--ink-faint); }
.footer-row a:hover { color: var(--ink); }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 560px) { .footer-row { flex-direction: column; text-align: center; } }

/* --- Icon plates --- */
.plate-brass { background: linear-gradient(135deg, var(--brass-tint), transparent); color: var(--brass-deep); }
.plate-forest { background: linear-gradient(135deg, var(--forest-tint), transparent); color: var(--forest); }
.icon-plate { width: 100%; height: 100%; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.icon-plate svg { width: 42%; height: 42%; }
.post-banner { width: 100%; aspect-ratio: 21/9; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 22px 0 8px; position: relative; overflow: hidden; }
.post-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,18,22,.76), rgba(12,18,22,.23) 72%), linear-gradient(0deg, rgba(12,18,22,.45), transparent 55%); }
.post-banner-caption { position: absolute; z-index: 1; left: clamp(20px, 4vw, 48px); bottom: clamp(20px, 4vw, 42px); display: flex; flex-direction: column; gap: 8px; max-width: min(520px, 78%); color: #fff; }
.post-banner-caption span { font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.76); }
.post-banner-caption strong { font-family: var(--font-display, inherit); font-size: clamp(1.2rem, 3.5vw, 2.2rem); line-height: 1.15; text-wrap: balance; }

/* --- Blog index --- */
.blog-grid { display: flex; flex-direction: column; margin-top: 32px; }
.blog-row { display: grid; grid-template-columns: 92px 1fr; gap: 22px; padding: 24px 0; border-top: 1px solid var(--rule); align-items: start; transition: transform 0.25s ease; }
.blog-grid .blog-row:last-child { border-bottom: 1px solid var(--rule); }
.blog-row:hover { transform: translateX(4px); }
.blog-plate { width: 92px; height: 92px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--shadow); }
.blog-thumb { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.blog-row h3 { font-size: clamp(1.05rem, 2.6vw, 1.3rem); margin-bottom: 8px; }
.blog-row h3 a:hover { color: var(--brass-deep); }
.blog-meta { font-size: 0.82rem; color: var(--ink-faint); margin-top: 10px; }
@media (max-width: 560px) { .blog-row { grid-template-columns: 1fr; } .blog-plate { width: 52px; height: 52px; } .blog-plate .icon-plate svg { width: 50%; height: 50%; } }

/* --- Blog post --- */
.post-header { padding: clamp(36px, 8vw, 76px) 0 20px; }
.post-header .kicker { display: block; margin-bottom: 14px; }
.post-header h1 { font-size: clamp(1.7rem, 6vw, 3rem); margin-bottom: 16px; }
.post-meta { display: flex; gap: 16px; color: var(--ink-faint); font-size: 0.9rem; flex-wrap: wrap; }
.post-body { max-width: 72ch; }
.post-body p { max-width: none; margin-bottom: 20px; font-size: clamp(0.98rem, 2.4vw, 1.04rem); }
.post-body h2 { font-size: clamp(1.25rem, 3.4vw, 1.5rem); margin: 36px 0 16px; }
.post-body h3 { font-size: 1.14rem; margin: 26px 0 12px; }
.post-body ul, .post-body ol { margin: 0 0 20px 22px; color: var(--ink-soft); }
.post-body li { margin-bottom: 8px; }
.post-body a { color: var(--brass-deep); border-bottom: 1px solid var(--brass); }
.post-body blockquote { border-left: 3px solid var(--brass); padding-left: 18px; font-family: var(--script); color: var(--ink); margin: 24px 0; font-size: clamp(1.15rem, 2.8vw, 1.35rem); }
.post-cta { margin-top: 40px; padding: 24px; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.related-posts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 14px; }
@media (max-width: 640px) { .related-posts { grid-template-columns: 1fr; } }

/* --- Focus states --- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--brass-deep); outline-offset: 2px; }

/* --- Reveal-on-scroll with stagger via --d --- */
.reveal { opacity: 0; transform: perspective(900px) translateY(18px) rotateX(2deg); transition: opacity 0.7s ease var(--d, 0s), transform 0.7s cubic-bezier(.2,.8,.2,1) var(--d, 0s); }
.reveal.visible { opacity: 1; transform: perspective(900px) translateY(0) rotateX(0); }

/* --- 3D tilt (JS sets --rx/--ry via inline style) --- */
[data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform 0.15s ease-out, box-shadow 0.3s ease; }
[data-tilt]:hover { box-shadow: 0 24px 50px rgba(21,33,27,0.16), var(--glow-brass); }
.feature-card:hover .feature-icon, .tool-pill:hover .ico { transform: translateY(-2px) scale(1.08); box-shadow: 0 8px 18px rgba(240,100,46,.14); }
.feature-icon, .tool-pill .ico { transition: transform .25s ease, box-shadow .25s ease; }
@media (hover: none) { [data-tilt] { transform: none !important; } }
@media (max-width: 560px) {
  html { scroll-padding-top: 74px; }
  body { padding-top: 68px; }
  .nav-row { height: 68px; }
  .site-nav { background: color-mix(in srgb, var(--bg) 92%, transparent); }
  .nav-links { inset: 68px 0 0 0; }
  .hero { padding-top: 34px; }
  .section { padding: 56px 0; }
  .case-row { padding: 24px 0; }
  .case-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .case-stats div { min-width: 0; }
  .case-stat-fig { font-size: 1.05rem; }
  .case-stat-label { font-size: .68rem; line-height: 1.3; }
  .constellation { height: 320px; margin-top: 28px; }
  .constellation-core { width: 160px; height: 160px; }
  .constellation-core img { width: 112px; height: 112px; }
  .core-network { width: min(92vw, 360px); height: 140px; }
  .service-node { width: 142px; min-height: 62px; padding: 8px; }
  .node-design { left: 15%; top: 18%; } .node-grow { left: 85%; top: 18%; } .node-ads { left: 8%; top: 50%; } .node-seo { left: 92%; top: 50%; } .node-automation { left: 27%; top: 82%; } .node-vision { left: 73%; top: 82%; }
  .constellation-lines i { width: 100px; }
}

/* Theme controls, navigation, and additional conversion sections */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F7F7F4;
  --surface: #FFFFFF;
  --surface-2: #ECEEE9;
  --ink: #111311;
  --ink-soft: #454B45;
  --ink-faint: #737A72;
  --brass: #F0642E;
  --brass-2: #FF7A3D;
  --brass-deep: #C6471D;
  --brass-tint: #FCE2D8;
  --forest: #227A4A;
  --forest-2: #42A96D;
  --forest-tint: #DDF1E5;
  --rule: rgba(17, 19, 17, 0.15);
  --rule-soft: rgba(17, 19, 17, 0.08);
  --shadow: 0 1px 2px rgba(21,33,27,0.05), 0 12px 32px rgba(21,33,27,0.08);
  --glow-brass: 0 0 0 1px rgba(240,100,46,.2), 0 18px 42px rgba(240,100,46,.16);
  --overlay-photo: linear-gradient(160deg, rgba(240,100,46,0.16), rgba(34,122,74,0.18));
}
:root[data-theme="light"] .platform-amazon { color: #242424; }
:root[data-theme="light"] .platform-shopify { color: #3F5B1D; }
:root[data-theme="light"] .platform-woocommerce { color: #5A3690; }
:root[data-theme="light"] .home-platforms-section { background: color-mix(in srgb, var(--surface-2) 28%, transparent); }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101210;
  --surface: #181B18;
  --surface-2: #232722;
  --ink: #F6F7F2;
  --ink-soft: #BEC5BC;
  --ink-faint: #A0AAA0;
  --brass: #FF7040;
  --brass-2: #FF8B59;
  --brass-deep: #FF8B59;
  --brass-tint: rgba(240,100,46,0.16);
  --forest: #56C27F;
  --forest-2: #83D79F;
  --forest-tint: rgba(66,169,109,0.16);
  --rule: rgba(246, 247, 242, 0.18);
  --rule-soft: rgba(246, 247, 242, 0.1);
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 20px 44px rgba(0,0,0,0.45);
  --glow-brass: 0 0 0 1px rgba(255,112,64,.22), 0 18px 42px rgba(0,0,0,.34);
  --overlay-photo: linear-gradient(160deg, rgba(240,100,46,0.18), rgba(34,122,74,0.22));
}

.nav-links a[aria-current="location"],
.nav-links a[aria-current="page"] { color: var(--ink); border-color: var(--brass); }
.theme-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: 600 .78rem/1 var(--sans);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.theme-toggle:hover { transform: translateY(-1px); border-color: var(--brass); background: var(--surface-2); }
.theme-toggle-icon { color: var(--brass-deep); font-size: 1rem; }
.theme-toggle-label { white-space: nowrap; }
.nav-toggle { cursor: pointer; }
.nav-links a:focus-visible, .theme-toggle:focus-visible, .nav-toggle:focus-visible,
.btn:focus-visible, summary:focus-visible, .sai-launcher:focus-visible {
  outline: 3px solid var(--brass-deep);
  outline-offset: 3px;
}
.site-nav { background: color-mix(in srgb, var(--bg) 94%, transparent); }
.has-scrolled .site-nav { background: color-mix(in srgb, var(--surface) 92%, transparent); }
.btn-primary { background: var(--brass); color: #111311; -webkit-text-fill-color: #111311; }
.btn-primary:hover { background: var(--brass-2); }
.btn-outline { background: var(--surface); }

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 500;
  padding: 10px 14px;
  transform: translateY(-160%);
  border-radius: 6px;
  background: var(--ink);
  color: var(--bg);
}
.skip-link:focus { transform: translateY(0); }
.scroll-progress { height: 3px; z-index: 300; }
.hero-brand-visual { overflow: clip; border-radius: 24px; }
.section.shutter-reveal { clip-path: inset(0 0 16% 0); transition: clip-path .75s cubic-bezier(.2,.8,.2,1); }
.section.shutter-reveal.visible { clip-path: inset(0); }

.testimonial-placeholder {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  max-width: 850px;
  padding: clamp(22px, 5vw, 42px);
  border: 1px dashed var(--rule);
  border-radius: 18px;
  background: var(--surface);
}
.testimonial-placeholder h2 { font-size: clamp(1.35rem, 3.4vw, 2rem); margin-bottom: 10px; }
.testimonial-mark { color: var(--brass); font: 700 4rem/.8 Georgia, serif; }
.faq-list { max-width: 850px; margin-top: 28px; border-top: 1px solid var(--rule); }
.faq-item { padding: 19px 2px; border-bottom: 1px solid var(--rule); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--ink); font-weight: 700; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--brass-deep); font-size: 1.4rem; line-height: 1; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin-top: 12px; }
.case-placeholder-mark {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 16px;
  background: var(--brass-tint);
  color: var(--brass-deep);
  font: 700 1.4rem var(--serif);
}
.case-placeholder .case-stat-fig { font-size: 1.05rem; overflow-wrap: anywhere; }
.case-placeholder .case-stat-label { max-width: 12ch; }
.case-note { margin-top: 22px; }
.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 92px;
  z-index: 120;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
  cursor: pointer;
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.back-to-top:hover { background: var(--surface-2); }
.theme-switching, .theme-switching * { transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease !important; }
@media (max-width: 1080px) {
  .theme-toggle { order: 0; }
  .nav-row { gap: 10px; }
}
@media (max-width: 560px) {
  .theme-toggle { min-width: 40px; min-height: 40px; padding: 8px; }
  .theme-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .section.shutter-reveal { clip-path: none; transition: none; }
  .testimonial-placeholder { gap: 10px; }
  .case-placeholder-mark { width: 54px; height: 54px; }
  .back-to-top { right: 16px; bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .section.shutter-reveal { clip-path: none; transition: none; }
}
.solo-assurance { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; color: var(--ink-faint); font-size: .82rem; }
.solo-assurance strong { color: var(--brass-deep); font: 700 1.05rem var(--serif); }
.home-tool-mark:not(.tool-commerce) { font-weight: 800; font-size: .9rem; }
.case-placeholder .case-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
main:focus { outline: none; }
@media (hover: none) {
  .constellation-core img { animation: core-mobile-tilt 8s ease-in-out infinite; }
}

@media (max-width: 700px) {
  .constellation-core img { animation: core-mobile-tilt 8s ease-in-out infinite; }
}

/* ==========================================================================
   Chatbot widget (StratAI)
   ========================================================================== */
.sai-launcher { position: fixed; bottom: 22px; right: 22px; z-index: 200; width: 58px; height: 58px; border-radius: 50%; background: var(--brass); color: #17191d; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 12px 28px rgba(240,90,50,.32); border: 1px solid color-mix(in srgb, var(--brass-deep) 30%, transparent); }
.sai-launcher:hover { transform: scale(1.06); }
.sai-notif { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--forest); border: 2px solid var(--bg); }
.sai-tooltip { position: fixed; bottom: 90px; right: 22px; z-index: 200; background: var(--ink); color: var(--bg); font-size: 0.86rem; font-weight: 600; padding: 10px 14px; border-radius: 10px; max-width: 220px; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; }
.sai-tooltip.show { opacity: 1; transform: none; }
.sai-window { position: fixed; bottom: 90px; right: 22px; z-index: 200; width: min(370px, calc(100vw - 28px)); height: min(520px, calc(100dvh - 130px)); background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,0.28); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(14px) scale(0.98); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; }
.sai-window.open { opacity: 1; transform: none; pointer-events: auto; }
.sai-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--rule); background: var(--surface-2); }
.sai-name { font-family: var(--serif); font-weight: 600; }
.sai-sub { font-size: 0.76rem; color: var(--ink-faint); }
.sai-close { width: 30px; height: 30px; border-radius: 50%; background: var(--bg); border: 1px solid var(--rule); color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sai-messages { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.sai-msg { display: flex; gap: 8px; max-width: 90%; }
.sai-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.sai-msg-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--brass); color: #1a1f17; font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sai-bubble { background: var(--surface-2); border: 1px solid var(--rule); border-radius: 12px; padding: 10px 13px; font-size: 0.92rem; line-height: 1.5; }
.sai-msg.user .sai-bubble { background: var(--forest-tint); border-color: rgba(63,92,76,0.25); white-space: pre-wrap; }
.sai-bubble strong { color: var(--brass-deep); }
.sai-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sai-action-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; padding: 7px 12px; border-radius: 20px; background: var(--ink); color: var(--bg); }
.sai-action-btn.wa { background: var(--forest); }
.sai-typing-bubble { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; }
.sai-typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); animation: sai-blink 1.2s infinite; }
.sai-typing-dot:nth-child(2) { animation-delay: 0.2s; } .sai-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes sai-blink { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }
.sai-qr { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 14px; }
.sai-qr button { font-size: 0.82rem; font-weight: 600; padding: 8px 12px; border-radius: 18px; border: 1px solid var(--rule); background: var(--surface-2); cursor: pointer; color: var(--ink); }
.sai-qr button:hover { border-color: var(--brass); color: var(--brass-deep); }
.sai-input-row { display: flex; gap: 8px; padding: 14px; border-top: 1px solid var(--rule); background: var(--surface-2); }
.sai-input-row input { flex: 1; border: 1px solid var(--rule); border-radius: 20px; padding: 10px 14px; font-family: var(--sans); font-size: 0.9rem; background: var(--surface); color: var(--ink); min-width: 0; }
.sai-input-row input:focus { outline: none; border-color: var(--brass); }
.sai-send { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--bg); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sai-send:hover { background: var(--brass-deep); }

@media (max-width: 480px) {
  .sai-launcher { bottom: 16px; right: 16px; }
  .sai-window { bottom: 0; right: 0; width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
  .sai-tooltip { right: 16px; bottom: 84px; max-width: calc(100vw - 90px); }
}

/* --- Global small-screen safety net --- */
@media (max-width: 380px) {
  h1 { font-size: 1.9rem; }
  .btn { padding: 12px 18px; font-size: 0.9rem; }
  .hero-cta { gap: 10px; }
}

/* Quiet, glassy surfaces and gentle motion keep the experience clear and responsive. */
:root {
  color-scheme: light;
  --bg: #F7F7F4;
  --surface: #FFFFFF;
  --surface-2: #ECEEE9;
  --ink: #111311;
  --ink-soft: #454B45;
  --ink-faint: #737A72;
  --brass: #F0642E;
  --brass-2: #FF7A3D;
  --brass-deep: #C6471D;
  --brass-tint: #FCE2D8;
  --forest: #227A4A;
  --forest-2: #42A96D;
  --forest-tint: #DDF1E5;
  --rule: rgba(17, 19, 17, 0.15);
  --rule-soft: rgba(17, 19, 17, 0.08);
  --shadow: 0 1px 2px rgba(21,33,27,0.05), 0 12px 32px rgba(21,33,27,0.08);
  --glow-brass: 0 0 0 1px rgba(240,100,46,.2), 0 18px 42px rgba(240,100,46,.16);
  --container: 1120px;
}

html { color-scheme: light dark; overflow-x: clip; }
body { background: var(--bg); transition: background .35s cubic-bezier(.2,.8,.2,1), color .35s cubic-bezier(.2,.8,.2,1); }
.site-nav {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(24px) saturate(1.45);
  -webkit-backdrop-filter: blur(24px) saturate(1.45);
  border-bottom-color: rgba(33, 43, 56, .08);
}
.has-scrolled .site-nav { background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: var(--shadow); }
.nav-brand img { border-radius: 0; box-shadow: none; }
.nav-links a:not(.btn) { transition: color .28s cubic-bezier(.2,.8,.2,1), border-color .28s cubic-bezier(.2,.8,.2,1); }
.nav-links a[aria-current="page"]:not(.btn) { color: var(--ink); border-color: var(--brass); }
.btn, .nav-toggle, .path-card, .feature-card, .vision-card, .case-row, .cta-band {
  border-radius: 18px;
}
.btn {
  transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s cubic-bezier(.2,.8,.2,1), background .3s ease, color .3s ease, border-color .3s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.98); }
.btn-primary { box-shadow: 0 6px 18px rgba(238, 113, 75, .18); }
.btn-primary:hover { box-shadow: 0 10px 26px rgba(238, 113, 75, .25); }
.hero { padding-top: clamp(52px, 9vw, 112px); }
.hero h1 em { font-family: var(--sans); font-size: .88em; font-weight: 700; font-style: normal; letter-spacing: -.045em; color: var(--brass-deep); }
.hero-tag, .chip { border-radius: 999px; }
.hv-card, .feature-card, .path-card, .vision-card, .cta-band, .post-cta {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-color: var(--rule);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.path-card, .feature-card, .vision-card { padding: clamp(22px, 3vw, 32px); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s cubic-bezier(.2,.8,.2,1), border-color .3s ease; }
.path-card:hover, .feature-card:hover, .vision-card:hover { transform: translateY(-4px); box-shadow: 0 6px 14px rgba(28, 39, 54, .04), 0 24px 56px rgba(28, 39, 54, .1); }
.hv-card { animation: floaty 6s ease-in-out infinite; }
.hv-photo { border-radius: 28px; }
.hv-chip, .hv-stat, .hv-mini, .hv-feature { border-radius: 20px; }
.photo-caption { border: 1px solid rgba(255,255,255,.22); border-radius: 16px; background: rgba(28, 31, 35, .76); color: #fff; backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); }
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section::before { display: none; }
.section-link { margin-top: 28px; }
.case-row { padding: 24px; margin: 16px 0; border: 1px solid var(--rule-soft); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.case-note { max-width: 78ch; margin-top: 28px; color: var(--ink-faint); font-size: .88rem; }
.reveal { transform: translateY(14px); transition: opacity .65s cubic-bezier(.2,.8,.2,1) var(--d, 0s), transform .65s cubic-bezier(.2,.8,.2,1) var(--d, 0s); }
.reveal.visible { transform: translateY(0); }
[data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform .42s cubic-bezier(.2,.8,.2,1), box-shadow .42s cubic-bezier(.2,.8,.2,1); }
[data-tilt]:hover { box-shadow: 0 20px 46px rgba(21,33,27,.14), var(--glow-brass); }
.nav-links { transition: transform .42s cubic-bezier(.2,.8,.2,1); }

@media (max-width: 860px) {
  .nav-links { background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

.hero-brand-visual { display: grid; place-items: center; min-height: 440px; transform-style: preserve-3d; }
.hero-brand-glow { position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--brass-2), transparent 68%); opacity: .17; filter: blur(30px); animation: brand-glow 6s ease-in-out infinite alternate; }
.hero-brand-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid var(--rule); border-radius: 50%; transform-style: preserve-3d; pointer-events: none; }
.hero-brand-orbit-one { width: 78%; height: 50%; transform: translate(-50%,-50%) rotate(-28deg); animation: brand-orbit 18s linear infinite; }
.hero-brand-orbit-two { width: 62%; height: 82%; border-color: color-mix(in srgb, var(--forest) 35%, transparent); transform: translate(-50%,-50%) rotate(38deg); animation: brand-orbit-reverse 22s linear infinite; }
@keyframes brand-orbit { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes brand-orbit-reverse { from { rotate: 360deg; } to { rotate: 0deg; } }
@keyframes brand-glow { from { opacity: .12; scale: .92; } to { opacity: .25; scale: 1.08; } }

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #101210;
    --surface: #181B18;
    --surface-2: #232722;
    --ink: #F6F7F2;
    --ink-soft: #BEC5BC;
    --ink-faint: #A0AAA0;
    --brass: #FF7040;
    --brass-2: #FF8B59;
    --brass-deep: #FF8B59;
    --brass-tint: rgba(240,100,46,0.16);
    --forest: #56C27F;
    --forest-2: #83D79F;
    --forest-tint: rgba(66,169,109,0.16);
    --rule: rgba(246, 247, 242, 0.18);
    --rule-soft: rgba(246, 247, 242, 0.1);
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 20px 44px rgba(0,0,0,0.45);
    --glow-brass: 0 0 0 1px rgba(255,112,64,.22), 0 18px 42px rgba(0,0,0,.34);
    --overlay-photo: linear-gradient(160deg, rgba(240,100,46,0.18), rgba(34,122,74,0.22));
  }
  .site-nav { background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom-color: var(--rule-soft); }
  .has-scrolled .site-nav { background: color-mix(in srgb, var(--surface) 90%, transparent); }
  .hv-card, .feature-card, .path-card, .vision-card, .cta-band, .post-cta { background: color-mix(in srgb, var(--surface) 92%, transparent); }
  .case-row { background: color-mix(in srgb, var(--surface) 82%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-brand-glow, .hero-brand-orbit { animation: none; }
}
.about-portrait { position: relative; min-height: 410px; overflow: hidden; border: 1px solid var(--rule); border-radius: 30px; background: var(--surface); box-shadow: var(--shadow); transform-style: preserve-3d; animation: portrait-drift 6.5s ease-in-out infinite; }
.about-portrait img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.about-portrait-caption { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; padding: 14px 16px; border: 1px solid rgba(255,255,255,.22); border-radius: 18px; color: #fff; background: rgba(25,29,34,.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transform: translateZ(28px); }
.about-portrait-caption span { color: rgba(255,255,255,.78); font-size: .84rem; }
@keyframes portrait-drift { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@media (max-width: 900px) { .about-portrait { min-height: 380px; } }
@media (prefers-reduced-motion: reduce) { .about-portrait { animation: none; } }

.hero-brand-visual { display: flex; align-items: center; justify-content: center; height: auto; min-height: 0; overflow: visible; perspective: none; }
.hero-brand-glow { width: 74%; opacity: .22; }
.hero-brand-orbit-one { width: 90%; height: 63%; }
.hero-brand-orbit-two { width: 76%; height: 94%; }
.hero-brand-network { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-system-layout { position: relative; z-index: 3; width: min(100%, 500px); padding: 0; }
.hero-brand-logo { position: relative; z-index: 2; display: grid; place-items: center; width: 148px; height: 112px; margin: 0 auto 7px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; animation: none; }
.hero-brand-logo img, .system-page-logo img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(28,39,54,.16)); }
.system-video-module { width: 100%; }
.system-player { position: relative; padding: 12px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--rule) 92%, transparent); border-radius: 22px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 97%, transparent), color-mix(in srgb, var(--surface-2) 84%, transparent)); box-shadow: 0 22px 54px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); }
.system-player-heading, .system-player-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 3px 4px 11px; }
.system-player-heading > span:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.system-player-heading strong { color: var(--ink); font-size: .65rem; letter-spacing: .11em; }
.system-player-heading small { color: var(--ink-faint); font-size: .65rem; }
.system-autoplay, .system-player-time { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; color: var(--ink-faint); font-size: .61rem; font-weight: 700; }
.system-autoplay i, .system-player-time i { width: 6px; height: 6px; border-radius: 50%; background: var(--forest-2); box-shadow: 0 0 10px color-mix(in srgb, var(--forest-2) 75%, transparent); }
.system-player-screen { position: relative; isolation: isolate; aspect-ratio: 16 / 9; min-height: 180px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--rule) 75%, transparent); border-radius: 14px; background: radial-gradient(ellipse at 50% 42%, rgba(255,128,92,.18), transparent 38%), radial-gradient(ellipse at 72% 70%, rgba(103,213,176,.13), transparent 42%), linear-gradient(145deg, #171d23, #0e1217); }
.hero-system-layout .system-phone-frame { --phone-screen-width: min(350px, 32vw, max(270px, calc((100svh - 190px) * .49))); }
.hero-system-layout .system-player-screen { width: var(--phone-screen-width); aspect-ratio: 9 / 16; min-height: 0; margin-inline: auto; background: linear-gradient(145deg, #171d23, #0e1217); }
.system-video-module-page .system-player-screen { width: min(100%, 350px); aspect-ratio: 9 / 16; min-height: 0; margin-inline: auto; background: linear-gradient(145deg, #171d23, #0e1217); }
.system-player-screen::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .28; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 30px 30px; mask-image: linear-gradient(135deg, #000, transparent 84%); pointer-events: none; }
.system-video { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; background: #0e1217; }
.system-video-placeholder { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 20px; color: #f3f5f8; text-align: center; background: radial-gradient(ellipse at 50% 42%, rgba(255,128,92,.08), transparent 48%); transition: opacity .55s ease, visibility .55s ease; }
.system-video-module.is-playing .system-video-placeholder { visibility: hidden; opacity: 0; }
.system-placeholder-orbit { position: absolute; width: min(42%, 190px); aspect-ratio: 1; border: 1px solid rgba(255,128,92,.27); border-radius: 50%; box-shadow: 0 0 36px rgba(255,128,92,.12), inset 0 0 36px rgba(103,213,176,.07); animation: system-orbit-breathe 5s ease-in-out infinite; }
.system-placeholder-orbit::before, .system-placeholder-orbit::after { content: ""; position: absolute; inset: 14%; border: 1px solid rgba(103,213,176,.2); border-radius: 50%; transform: rotate(44deg) scaleX(.62); }
.system-placeholder-orbit::after { transform: rotate(-44deg) scaleX(.62); border-color: rgba(255,128,92,.19); }
.system-placeholder-kicker, .system-video-placeholder strong, .system-placeholder-note { position: relative; z-index: 1; }
.system-placeholder-kicker { color: #8bd6b4; font-size: .6rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.system-video-placeholder strong { font-size: clamp(1rem, 2vw, 1.35rem); line-height: 1.25; text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,.38); }
.system-placeholder-note { margin-top: 2px; color: rgba(243,245,248,.66); font-size: .62rem; letter-spacing: .06em; }
.system-mute-toggle, .system-play-toggle { position: absolute; z-index: 3; bottom: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #fff; background: rgba(14,18,23,.76); box-shadow: 0 6px 18px rgba(0,0,0,.2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font: inherit; font-size: .66rem; font-weight: 700; cursor: pointer; opacity: 1; transition: opacity .25s ease, transform .25s ease, border-color .25s ease, background .25s ease; }
.system-mute-toggle { right: 10px; padding: 0 11px; }
.system-play-toggle { left: 10px; width: 38px; padding: 0; }
.system-mute-toggle:hover, .system-play-toggle:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.48); background: rgba(14,18,23,.94); }
.system-mute-toggle:focus-visible, .system-play-toggle:focus-visible { outline: 2px solid var(--brass-2); outline-offset: 3px; }
.system-mute-toggle svg, .system-play-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.system-play-icon { display: none; fill: currentColor !important; stroke: none !important; }
.system-play-toggle.is-paused .system-play-icon { display: block; }
.system-play-toggle.is-paused .system-pause-icon { display: none; }
.system-player-screen.is-playing:not(.is-controls-visible) .system-mute-toggle, .system-player-screen.is-playing:not(.is-controls-visible) .system-play-toggle { opacity: 0; pointer-events: none; }
.system-player-screen.is-controls-visible .system-mute-toggle, .system-player-screen.is-controls-visible .system-play-toggle, .system-player-screen:has(button:focus-visible) .system-mute-toggle, .system-player-screen:has(button:focus-visible) .system-play-toggle { opacity: 1; pointer-events: auto; }
.system-audio-on, .system-mute-toggle.is-unmuted .system-audio-muted { display: none; }
.system-mute-toggle.is-unmuted .system-audio-on { display: block; }
.system-player-footer { padding: 10px 4px 1px; }
.system-player-footer > span:first-child { overflow: hidden; color: var(--ink-faint); font-size: .62rem; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.system-player-time { color: var(--ink-soft); font-size: .6rem; }
.system-player-time i { width: 5px; height: 5px; }
.system-video-link { display: flex; align-items: center; justify-content: center; gap: 7px; width: fit-content; margin: 12px auto 0; color: var(--ink-soft); font-size: .72rem; font-weight: 700; text-decoration: none; transition: color .25s ease, gap .25s ease; }
.system-video-link:hover { gap: 11px; color: var(--brass-deep); }
.system-video-link span { color: var(--brass-deep); }
@keyframes system-orbit-breathe { 0%,100% { scale: .96; opacity: .7; } 50% { scale: 1.04; opacity: 1; } }
.system-page-hero { position: relative; isolation: isolate; min-height: min(calc(100svh - 76px), 920px); padding: clamp(88px, 10vh, 108px) 0 clamp(26px, 4vh, 42px); overflow: hidden; display: flex; align-items: center; background: radial-gradient(ellipse at 77% 36%, color-mix(in srgb, var(--forest-tint) 92%, transparent), transparent 35%), radial-gradient(ellipse at 87% 70%, color-mix(in srgb, var(--brass-tint) 80%, transparent), transparent 37%), radial-gradient(ellipse at 8% 10%, color-mix(in srgb, var(--brass-tint) 56%, transparent), transparent 39%); }
.system-page-hero::before { content: ""; position: absolute; z-index: -1; top: 52%; left: 72%; width: min(920px, 88vw); height: min(820px, 90vh); border-radius: 50%; background: radial-gradient(ellipse at 48% 45%, color-mix(in srgb, var(--brass-tint) 84%, transparent), transparent 48%), radial-gradient(ellipse at 52% 55%, color-mix(in srgb, var(--forest-tint) 80%, transparent), transparent 68%); filter: blur(42px); transform: translate(-50%,-50%); pointer-events: none; }
.system-page-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .3; background-image: radial-gradient(color-mix(in srgb, var(--ink-faint) 32%, transparent) .8px, transparent .8px), linear-gradient(120deg, transparent 48%, color-mix(in srgb, var(--forest) 9%, transparent) 48.15%, transparent 48.3%); background-size: 32px 32px, 100% 100%; mask-image: linear-gradient(100deg, transparent 10%, #000 86%); pointer-events: none; }
.system-page-layout { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(32px, 6vw, 82px); width: 100%; }
.system-page-intro { max-width: 610px; margin: 0; text-align: left; }
.system-page-intro .hero-tag { margin-bottom: 18px; }
.system-page-intro h1 { margin: 0 0 18px; font-size: clamp(2.25rem, 4.2vw, 3.8rem); line-height: 1.08; }
.system-page-intro h1 em { font-family: var(--script); color: var(--brass); font-weight: 600; }
.system-page-intro .lede { max-width: 50ch; margin: 0; }
.system-page-player-wrap { width: min(100%, 440px); margin: 0 auto; }
.system-phone-stage { position: relative; display: grid; place-items: center; isolation: isolate; perspective: 1200px; }
.system-phone-stage::before, .system-phone-stage::after { content: ""; position: absolute; z-index: 0; width: min(94%, 460px); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--brass) 24%, transparent); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brass-tint) 32%, transparent), transparent 69%); box-shadow: 0 0 75px color-mix(in srgb, var(--brass-tint) 45%, transparent); transform: rotate(-24deg) scaleY(.7); pointer-events: none; }
.system-phone-stage::after { width: min(76%, 370px); border-color: color-mix(in srgb, var(--forest) 28%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--forest-tint) 35%, transparent), transparent 70%); transform: rotate(32deg) scaleY(.72); }
.system-phone-frame { --phone-screen-width: min(360px, 31vw, max(270px, calc((100svh - 180px) * .49))); position: relative; z-index: 2; width: fit-content; margin: 0 auto; padding: 6px; border: 1px solid rgba(255,255,255,.68); border-radius: 47px; background: linear-gradient(130deg, #f2f5f8 0%, #84909b 4%, #252d35 8%, #0d1218 13%, #54616c 48%, #171d23 88%, #c8d1d9 96%, #f8fbfd 100%); box-shadow: 0 44px 100px rgba(0,0,0,.42), 0 0 38px rgba(117,210,165,.14), 0 0 74px rgba(255,128,92,.12), inset 0 0 0 1px rgba(255,255,255,.22), inset 0 0 0 2px rgba(0,0,0,.58); transform: rotateY(-4deg) rotateZ(-1deg) translateX(40px); transition: transform .6s cubic-bezier(.2,.75,.25,1), box-shadow .6s ease; }
.system-phone-frame:hover { transform: rotateY(0) rotateZ(0) translate(40px,-6px); box-shadow: 0 48px 100px rgba(0,0,0,.46), 0 20px 40px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.16), inset 0 0 0 3px rgba(0,0,0,.25); }
.system-phone-side-button { position: absolute; z-index: 0; display: block; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #aeb7c0, #333c45 35%, #7d8791 70%, #272e35); box-shadow: 0 1px 3px rgba(0,0,0,.55); }
.system-phone-side-button-left { top: 104px; left: -3px; height: 62px; }
.system-phone-side-button-right { top: 132px; right: -3px; height: 88px; }
.system-phone-frame .system-player-screen { position: relative; z-index: 1; width: var(--phone-screen-width); aspect-ratio: 9 / 18.2; min-height: 0; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 40px; background: #0e1217; box-shadow: inset 0 0 0 1px rgba(0,0,0,.48), inset 8px 0 18px rgba(255,255,255,.06), inset -8px 0 18px rgba(255,255,255,.06); }
.system-phone-frame .system-video { object-fit: cover; }
.system-video-module-page .system-video { border-radius: inherit; }
.system-video-module-page .system-video-placeholder { gap: 13px; padding: 48px 18px; }
.system-video-module-page .system-placeholder-kicker { font-size: .7rem; }
.system-video-module-page .system-video-placeholder strong { font-size: clamp(1.35rem, 3.2vw, 2.5rem); }
.system-video-module-page .system-placeholder-note { font-size: .72rem; }
.system-phone-frame .system-phone-island { position: absolute; z-index: 4; top: 13px; left: 50%; display: grid; place-items: center; width: 11px; height: 11px; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; background: #030506; box-shadow: 0 1px 5px rgba(0,0,0,.7); transform: translateX(-50%); pointer-events: none; }
.system-phone-island i { width: 4px; height: 4px; border: 1px solid rgba(109,165,255,.45); border-radius: 50%; background: #142943; box-shadow: 0 0 5px rgba(81,147,255,.45); }
.system-phone-status { position: absolute; z-index: 4; top: 13px; left: 22px; right: 20px; display: flex; align-items: center; justify-content: space-between; height: 24px; color: #fff; font-size: .65rem; font-weight: 800; text-shadow: 0 1px 4px rgba(0,0,0,.6); pointer-events: none; }
.system-phone-status-icons { display: flex; align-items: center; gap: 4px; height: 12px; }
.system-phone-status-icons i:nth-child(1) { width: 10px; height: 8px; border: 1px solid currentColor; border-radius: 2px; }
.system-phone-status-icons i:nth-child(2) { width: 9px; height: 8px; border: 1px solid currentColor; border-bottom: 0; clip-path: polygon(0 100%, 50% 0, 100% 100%); background: currentColor; }
.system-phone-status-icons i:nth-child(3) { width: 13px; height: 7px; border: 1px solid currentColor; border-radius: 2px; box-shadow: inset -3px 0 0 currentColor; }
.system-phone-audio-status { position: absolute; z-index: 4; top: 48px; right: 17px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #fff; background: rgba(12,17,20,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: .56rem; font-weight: 700; pointer-events: none; }
.system-phone-audio-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--forest-2); box-shadow: 0 0 8px var(--forest-2); }
.system-phone-home-indicator { position: absolute; z-index: 4; bottom: 8px; left: 50%; width: 82px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.82); box-shadow: 0 1px 4px rgba(0,0,0,.35); transform: translateX(-50%); pointer-events: none; }
.system-phone-frame .system-mute-toggle, .system-phone-frame .system-play-toggle { bottom: 22px; }
.system-phone-frame .system-mute-toggle { right: 14px; }
.system-phone-frame .system-play-toggle { left: 14px; }
.system-phone-caption { max-width: 34ch; min-height: 2.7em; margin: 17px auto 0; color: var(--ink-faint); font-size: .7rem; line-height: 1.4; text-align: center; }
.system-video-guide { position: absolute; z-index: 1; left: -19%; bottom: -2%; width: min(64%, 272px); height: auto; overflow: visible; filter: drop-shadow(0 16px 22px rgba(18,31,35,.18)); transform-origin: 60% 90%; animation: guide-present 6s ease-in-out infinite; pointer-events: none; }
@keyframes guide-present { 0%,100% { translate: 0 0; rotate: -1deg; } 50% { translate: 0 -7px; rotate: 1deg; } }
.system-steps-intro { max-width: 72ch; }
.system-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }

@media (max-width: 900px) {
  .system-page-hero { min-height: auto; padding-top: 96px; }
  .system-page-layout { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 28px; }
  .system-page-intro h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
  .system-phone-frame { --phone-screen-width: min(360px, 31vw, max(250px, calc((100svh - 180px) * .49))); }
  .system-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .hero-brand-visual { margin-top: 4px; }
  .hero-system-layout { width: min(100%, 520px); padding-top: 0; }
  .hero-brand-logo { width: 118px; height: 88px; margin-bottom: 0; }
  .system-player { padding: 9px; border-radius: 18px; }
  .hero-system-layout .system-phone-frame { --phone-screen-width: min(270px, calc(100vw - 60px), max(180px, calc((100svh - 360px) * .49))); }
  .hero-system-layout .system-player-screen { width: var(--phone-screen-width); }
  .system-player-heading { padding-bottom: 8px; }
  .system-autoplay, .system-player-time { font-size: .56rem; }
  .system-mute-toggle, .system-play-toggle { bottom: 7px; min-height: 34px; font-size: .61rem; }
  .system-mute-toggle { right: 7px; padding: 0 9px; }
  .system-play-toggle { left: 7px; width: 34px; }
  .system-player-footer { padding-top: 8px; }
  .system-player-footer > span:first-child { max-width: 62%; }
  .system-page-hero { min-height: 0; padding: 68px 0 24px; display: block; }
  .system-page-hero::before { top: 42%; left: 55%; width: 110vw; height: 80vh; }
  .system-page-layout { grid-template-columns: 1fr; gap: 10px; }
  .system-page-intro { margin: 0 auto; text-align: center; max-width: 560px; }
  .system-page-intro .hero-tag { margin-bottom: 10px; }
  .system-page-intro h1 { margin: 0 auto 10px; font-size: clamp(1.9rem, 7vw, 2.55rem); line-height: 1.1; }
  .system-page-intro .lede { max-width: 52ch; margin: 0 auto; font-size: .88rem; }
  .system-page-player-wrap { width: 100%; max-width: 420px; }
  .system-phone-frame { --phone-screen-width: min(310px, calc(100vw - 86px), max(185px, calc((100svh - 400px) * .49))); padding: 6px; border-radius: 43px; transform: rotateZ(-1deg); }
  .system-phone-frame { transform: rotateZ(-1deg); }
  .system-phone-frame:hover { transform: rotateZ(0) translateY(-4px); }
  .system-phone-frame .system-player-screen { border-radius: 37px; }
  .system-phone-frame .system-phone-island { top: 11px; width: 10px; height: 10px; }
  .system-phone-frame .system-phone-status { top: 11px; left: 19px; right: 17px; font-size: .6rem; }
  .system-phone-frame .system-phone-audio-status { top: 38px; right: 12px; }
  .system-phone-frame .system-mute-toggle, .system-phone-frame .system-play-toggle { bottom: 19px; }
  .system-phone-frame .system-mute-toggle { right: 11px; }
  .system-phone-frame .system-play-toggle { left: 11px; }
  .system-phone-frame .system-phone-home-indicator { bottom: 7px; width: 70px; height: 3px; }
  .system-phone-caption { margin-top: 12px; font-size: .66rem; }
  .system-phone-stage::before { width: min(100%, 380px); border-color: color-mix(in srgb, var(--brass) 32%, transparent); box-shadow: 0 0 90px color-mix(in srgb, var(--brass-tint) 65%, transparent); }
  .system-phone-stage::after { width: min(78%, 300px); border-color: color-mix(in srgb, var(--forest) 35%, transparent); box-shadow: 0 0 80px color-mix(in srgb, var(--forest-tint) 60%, transparent); }
  .system-video-guide { display: none; }
  .system-page-hero { background: radial-gradient(ellipse at 50% 58%, color-mix(in srgb, var(--forest-tint) 65%, transparent), transparent 34%), radial-gradient(ellipse at 15% 74%, color-mix(in srgb, var(--brass-tint) 50%, transparent), transparent 43%), radial-gradient(ellipse at 90% 35%, color-mix(in srgb, var(--brass-tint) 44%, transparent), transparent 42%); }
  .system-page-hero::after { opacity: .22; background-size: 25px 25px, 100% 100%; mask-image: linear-gradient(180deg, transparent 16%, #000 78%); }
  .system-steps { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 700px) and (max-height: 720px) {
  .system-page-hero { padding-top: 54px; padding-bottom: 12px; }
  .system-page-layout { gap: 4px; }
  .system-page-intro .hero-tag { margin-bottom: 6px; }
  .system-page-intro h1 { margin-bottom: 6px; font-size: clamp(1.7rem, 6.4vw, 2.15rem); }
  .system-page-intro .lede { font-size: .8rem; line-height: 1.45; }
  .system-page-player-wrap .system-phone-frame { --phone-screen-width: min(270px, calc(100vw - 86px), max(155px, calc((100svh - 390px) * .49))); }
  .system-phone-caption { margin-top: 8px; }
  .system-mute-toggle [data-mute-label] { display: none; }
}
@media (max-width: 380px) {
  .hero-brand-logo { width: 112px; height: 84px; }
  .system-player-heading strong { font-size: .58rem; }
  .system-player-heading small { font-size: .58rem; }
  .system-autoplay { gap: 4px; font-size: .52rem; }
  .system-placeholder-kicker { font-size: .53rem; }
  .system-video-placeholder strong { font-size: .96rem; }
  .system-placeholder-note { font-size: .55rem; }
  .system-player-time { display: none; }
  .system-player-footer > span:first-child { max-width: 100%; }
}
@supports not selector(:has(*)) {
  .system-player-screen:focus-within .system-mute-toggle, .system-player-screen:focus-within .system-play-toggle { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .system-placeholder-orbit { animation: none; }
  .system-video-guide { animation: none; }
  .system-phone-frame { transition: none; }
  .system-video-link, .system-mute-toggle, .system-play-toggle { transition: none; }
}

.ai-post-header { padding-top: clamp(32px, 6vw, 58px); }
.ai-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 23px; color: var(--ink-faint); font-size: .74rem; }
.ai-breadcrumbs a { color: var(--ink-soft); text-decoration: none; }
.ai-breadcrumbs a:hover { color: var(--brass-deep); }
.ai-hero-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr); align-items: center; gap: clamp(28px, 5vw, 68px); }
.ai-hero-copy { min-width: 0; }
.ai-hero-copy .kicker { display: block; margin-bottom: 14px; }
.ai-post-header h1 { max-width: 760px; margin-bottom: 16px; font-size: clamp(2.1rem, 5vw, 3.7rem); line-height: 1.06; text-wrap: balance; }
.ai-post-deck { max-width: 62ch; margin: 0 0 18px; color: var(--ink-soft); font-size: clamp(1rem, 2.1vw, 1.18rem); line-height: 1.65; }
.ai-post-header .post-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.ai-hero-visual { width: 100%; max-width: 450px; margin: 0 auto; }
.ai-hero-visual img { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 38px rgba(20, 45, 38, .15)); }
.ai-post-section { padding-top: 12px; }
.ai-post-body { max-width: 78ch; }
.ai-post-body > p:first-of-type { font-size: 1.08rem; }
.ai-answer-card { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 16px; margin: 0 0 28px; padding: clamp(18px, 3vw, 27px); border: 1px solid color-mix(in srgb, var(--forest) 37%, var(--rule)); border-radius: 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--forest-tint) 72%, var(--surface)), color-mix(in srgb, var(--brass-tint) 38%, var(--surface))); box-shadow: var(--shadow); }
.ai-answer-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid color-mix(in srgb, var(--forest) 35%, var(--rule)); border-radius: 15px; color: var(--forest); background: color-mix(in srgb, var(--forest-tint) 55%, var(--surface)); font-size: 1.5rem; }
.ai-answer-card strong { display: block; margin: 0 0 5px; color: var(--ink); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.ai-post-body .ai-answer-card p { margin: 0; color: var(--ink-soft); font-size: .97rem; }
.ai-toc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 28px 0 36px; padding: 21px 23px; border: 1px solid var(--rule); border-radius: 20px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.ai-toc strong { grid-column: 1 / -1; margin-bottom: 2px; color: var(--ink); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.ai-toc a { width: fit-content; color: var(--ink-soft); font-size: .82rem; text-decoration: none; border: 0; }
.ai-toc a::before { content: "↗"; margin-right: 7px; color: var(--forest); }
.ai-toc a:hover { color: var(--brass-deep); }
.ai-post-body h2[id] { scroll-margin-top: 100px; }
.ai-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin: 26px 0; }
.ai-stat-card { display: flex; flex-direction: column; min-height: 185px; padding: 21px 19px; border: 1px solid var(--rule); border-radius: 19px; background: color-mix(in srgb, var(--surface) 91%, transparent); box-shadow: 0 12px 30px rgba(0,0,0,.07); }
.ai-stat-card strong { margin-bottom: 8px; color: var(--forest); font-family: var(--font-display, inherit); font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1; }
.ai-stat-card-accent strong { color: var(--brass-deep); }
.ai-stat-card span { color: var(--ink-soft); font-size: .8rem; line-height: 1.5; }
.ai-stat-card small { margin-top: auto; padding-top: 13px; color: var(--ink-faint); font-size: .68rem; font-weight: 700; }
.ai-use-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin: 24px 0 32px; }
.ai-use-card { position: relative; min-height: 222px; padding: 22px; overflow: hidden; border: 1px solid var(--rule); border-radius: 20px; background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: 0 14px 36px rgba(0,0,0,.07); transition: transform .3s ease, border-color .3s ease; }
.ai-use-card::after { content: ""; position: absolute; top: -54px; right: -44px; width: 145px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--forest-tint) 75%, transparent), transparent 70%); pointer-events: none; }
.ai-use-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--forest) 48%, var(--rule)); }
.ai-use-number { color: var(--brass-deep); font-size: .68rem; font-weight: 800; letter-spacing: .15em; }
.ai-use-card h3 { margin: 13px 0 8px; color: var(--ink); font-size: 1.06rem; }
.ai-use-card p { margin-bottom: 15px; color: var(--ink-soft); font-size: .84rem; }
.ai-use-tag { display: inline-flex; padding: 6px 9px; border: 1px solid var(--rule); border-radius: 99px; color: var(--ink-faint); background: color-mix(in srgb, var(--surface-2) 70%, transparent); font-size: .64rem; font-weight: 700; }
.ai-workflow { margin: 32px 0; padding: clamp(20px, 4vw, 32px); border: 1px solid color-mix(in srgb, var(--forest) 34%, var(--rule)); border-radius: 24px; background: radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--forest-tint) 60%, transparent), transparent 70%), color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: var(--shadow); }
.ai-workflow figcaption { display: flex; flex-direction: column; gap: 6px; margin-bottom: 23px; }
.ai-workflow-kicker { color: var(--forest); font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.ai-workflow figcaption strong { color: var(--ink); font-size: clamp(1.1rem, 3vw, 1.5rem); }
.ai-workflow-steps { display: grid; grid-template-columns: minmax(0,1fr) 20px minmax(0,1fr) 20px minmax(0,1fr) 20px minmax(0,1fr); align-items: center; gap: 8px; }
.ai-workflow-steps > i { color: var(--brass-deep); text-align: center; font-style: normal; }
.ai-workflow-step { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 14px 11px; border: 1px solid var(--rule); border-radius: 15px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.ai-workflow-step-active { border-color: color-mix(in srgb, var(--forest) 55%, var(--rule)); box-shadow: 0 0 24px color-mix(in srgb, var(--forest-tint) 72%, transparent); }
.ai-workflow-symbol { color: var(--brass-deep); font-size: .65rem; font-weight: 800; letter-spacing: .1em; }
.ai-workflow-step strong { color: var(--ink); font-size: .78rem; }
.ai-workflow-step small { color: var(--ink-faint); font-size: .63rem; line-height: 1.4; }
.ai-cost-panel { margin: 25px 0; padding: clamp(20px, 4vw, 30px); border: 1px solid var(--rule); border-radius: 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--brass-tint) 54%, var(--surface)), color-mix(in srgb, var(--forest-tint) 38%, var(--surface))); }
.ai-cost-label { display: block; margin-bottom: 8px; color: var(--brass-deep); font-size: .69rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ai-cost-panel > div strong { display: block; color: var(--ink); font-size: clamp(1.15rem, 3vw, 1.55rem); line-height: 1.35; }
.ai-cost-panel ul { margin: 18px 0 0 19px; }
.ai-cost-panel li { margin-bottom: 7px; color: var(--ink-soft); font-size: .85rem; }
.ai-implementation-list { counter-reset: ai-steps; display: grid; gap: 10px; margin: 24px 0 30px !important; padding: 0 !important; list-style: none; }
.ai-implementation-list li { position: relative; margin: 0 !important; padding: 16px 18px 16px 54px; border: 1px solid var(--rule); border-radius: 16px; color: var(--ink-soft); background: color-mix(in srgb, var(--surface) 88%, transparent); font-size: .91rem; }
.ai-implementation-list li::before { counter-increment: ai-steps; content: counter(ai-steps, decimal-leading-zero); position: absolute; top: 16px; left: 17px; color: var(--forest); font-size: .72rem; font-weight: 800; letter-spacing: .07em; }
.ai-implementation-list strong { color: var(--ink); }
.ai-search-note { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 16px; margin: 30px 0; padding: 22px; border: 1px solid color-mix(in srgb, var(--brass) 35%, var(--rule)); border-radius: 20px; background: color-mix(in srgb, var(--brass-tint) 42%, var(--surface)); }
.ai-search-mark { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid color-mix(in srgb, var(--brass) 45%, var(--rule)); border-radius: 17px; color: var(--brass-deep); font-size: .83rem; font-weight: 800; }
.ai-search-note strong { display: block; margin: 1px 0 6px; color: var(--ink); font-size: .96rem; }
.ai-post-body .ai-search-note p { margin: 0; color: var(--ink-soft); font-size: .84rem; }
.ai-faq-list { display: grid; gap: 9px; margin: 21px 0 30px; }
.ai-faq-list details { padding: 16px 19px; border: 1px solid var(--rule); border-radius: 15px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.ai-faq-list summary { position: relative; padding-right: 25px; color: var(--ink); font-weight: 800; font-size: .92rem; cursor: pointer; list-style: none; }
.ai-faq-list summary::-webkit-details-marker { display: none; }
.ai-faq-list summary::after { content: "+"; position: absolute; top: -3px; right: 0; color: var(--forest); font-size: 1.25rem; }
.ai-faq-list details[open] summary::after { content: "−"; }
.ai-faq-list details p { margin: 12px 0 0; color: var(--ink-soft); font-size: .88rem; }
.ai-sources { padding-left: 21px; }
.ai-sources li { padding-left: 4px; color: var(--ink-soft); font-size: .86rem; line-height: 1.6; }
.ai-editorial-note { padding: 15px 17px; border-left: 2px solid var(--brass); color: var(--ink-faint); background: color-mix(in srgb, var(--surface-2) 60%, transparent); font-size: .78rem !important; }
.ai-post-cta { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--forest) 40%, var(--rule)); background: radial-gradient(ellipse at 90% 5%, color-mix(in srgb, var(--forest-tint) 78%, transparent), transparent 38%), linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--brass-tint) 46%, var(--surface))); }
.ai-post-cta::after { content: "AI"; position: absolute; right: 22px; top: -38px; color: color-mix(in srgb, var(--forest) 11%, transparent); font-size: clamp(7rem, 20vw, 14rem); font-weight: 800; line-height: 1; pointer-events: none; }
.ai-post-cta > * { position: relative; z-index: 1; }
.ai-cta-kicker { color: var(--forest); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ai-post-cta h2 { max-width: 20ch; margin: 9px 0 12px; color: var(--ink); font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.15; }
.ai-post-body .ai-post-cta p { max-width: 62ch; color: var(--ink-soft); font-size: .92rem; }
.ai-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px auto 0; }
.blog-featured-ai .featured-art { background: #111923; }
.blog-featured-ai .featured-art::after { background: linear-gradient(0deg, rgba(9,16,21,.86), rgba(9,16,21,.08) 75%); }
.blog-featured-ai .featured-flow-step-active { border-color: rgba(117,210,165,.55); }
.blog-featured-ai .featured-photo { opacity: .2; filter: saturate(.72); }
@media (max-width: 700px) {
  .ai-hero-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ai-hero-visual { width: min(100%, 340px); }
  .ai-toc { grid-template-columns: 1fr; gap: 9px; }
  .ai-stat-grid { grid-template-columns: 1fr; }
  .ai-stat-card { min-height: 0; }
  .ai-use-grid { grid-template-columns: 1fr; }
  .ai-use-card { min-height: 0; }
  .ai-workflow-steps { grid-template-columns: 1fr; }
  .ai-workflow-steps > i { transform: rotate(90deg); }
  .ai-search-note { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-use-card { transition: none; }
}

.journey-section > .container > .lede { max-width: 72ch; }
.journey-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.journey-card { position: relative; display: flex; flex-direction: column; min-height: 265px; padding: 24px 20px 20px; overflow: hidden; border: 1px solid var(--rule); border-radius: 20px; background: color-mix(in srgb, var(--surface) 86%, transparent); box-shadow: var(--shadow); transform-style: preserve-3d; transition: border-color .35s ease, box-shadow .4s ease; }
.journey-card::after { content: ""; position: absolute; right: -42px; bottom: -62px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, var(--brass-tint), transparent 70%); opacity: .7; pointer-events: none; }

/* Homepage visual system: editorial grid, clear growth steps, and a focused AI feature. */
.home-hero { padding-top: clamp(46px, 7vw, 82px); padding-bottom: clamp(38px, 5vw, 64px); overflow: hidden; }
.home-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .54; background-image: linear-gradient(to right, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg, #000 0, transparent 72%); pointer-events: none; }
.home-hero::after { content: ""; position: absolute; z-index: -1; top: -20%; right: -12%; width: min(76vw, 960px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--forest-tint) 76%, transparent), color-mix(in srgb, var(--brass-tint) 50%, transparent) 38%, transparent 70%); filter: blur(20px); opacity: .72; pointer-events: none; }
.home-hero .hero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(28px, 4vw, 54px); }
.home-hero-copy { position: relative; z-index: 2; padding-block: 15px; }
.home-hero .hero-tag { margin-bottom: 26px; }
.home-hero h1 { max-width: 690px; margin-bottom: 20px; font-size: clamp(2.8rem, 6.2vw, 5.5rem); font-weight: 800; line-height: .99; letter-spacing: -.065em; text-wrap: balance; }
.home-hero h1 em { display: inline-block; margin-top: .08em; font-size: .96em; font-style: normal; letter-spacing: -.06em; color: var(--brass-deep); background: linear-gradient(95deg, var(--brass-deep), var(--forest)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.home-hero .lede { max-width: 56ch; margin-bottom: 24px; font-size: clamp(1rem, 1.5vw, 1.12rem); }
.home-hero .hero-cta { margin-bottom: 27px; }
.home-growth-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; color: var(--ink-soft); font-size: .7rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.home-growth-steps span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.home-growth-steps i { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid color-mix(in srgb, var(--forest) 36%, var(--rule)); border-radius: 50%; color: var(--forest); background: color-mix(in srgb, var(--surface) 78%, transparent); font-size: .58rem; font-style: normal; }
.home-growth-steps b { width: clamp(9px, 1.7vw, 22px); height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--forest) 54%, transparent), color-mix(in srgb, var(--brass) 60%, transparent)); }
.home-hero .hero-brand-visual { min-width: 0; }
.home-hero .hero-brand-network { opacity: .86; }
.home-ai-section { padding-top: clamp(10px, 2vw, 26px); }
.home-ai-feature { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); align-items: center; gap: clamp(22px, 5vw, 64px); min-height: 380px; padding: clamp(26px, 5vw, 58px); overflow: hidden; border: 1px solid rgba(151, 216, 184, .24); border-radius: 30px; color: #f4f8f5; background: radial-gradient(ellipse at 83% 18%, rgba(86, 174, 131, .2), transparent 42%), linear-gradient(125deg, #111a1d 0%, #172827 58%, #202725 100%); box-shadow: 0 24px 70px rgba(16, 29, 27, .2); isolation: isolate; }
.home-ai-feature::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .28; background-image: linear-gradient(rgba(211, 240, 222, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(211, 240, 222, .11) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(115deg, transparent 10%, #000); }
.home-ai-feature::after { content: "XAI"; position: absolute; z-index: -1; right: 35%; bottom: -1.05em; color: rgba(181, 235, 201, .045); font-size: clamp(8rem, 23vw, 20rem); font-weight: 800; letter-spacing: -.09em; line-height: 1; pointer-events: none; }
.home-ai-copy { position: relative; z-index: 2; max-width: 610px; }
.home-ai-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; color: #a5e3bd; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.home-ai-kicker span { width: 8px; height: 8px; border-radius: 50%; background: #86dbab; box-shadow: 0 0 14px rgba(134, 219, 171, .82); animation: home-ai-pulse 2.4s ease-in-out infinite; }
@keyframes home-ai-pulse { 0%,100% { opacity: .7; scale: .85; } 50% { opacity: 1; scale: 1.16; } }
.home-ai-copy h2 { max-width: 18ch; margin-bottom: 14px; color: #f4f8f5; font-size: clamp(1.8rem, 4vw, 3.25rem); line-height: 1.06; letter-spacing: -.045em; text-wrap: balance; }
.home-ai-copy > p { max-width: 54ch; margin-bottom: 19px; color: rgba(238, 246, 240, .76); font-size: .94rem; }
.home-ai-points { display: grid; gap: 9px; margin: 0 0 24px; }
.home-ai-points span { display: flex; align-items: center; gap: 10px; color: rgba(244, 248, 245, .9); font-size: .78rem; font-weight: 700; }
.home-ai-points i { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid rgba(150, 222, 180, .36); border-radius: 50%; color: #a5e3bd; font-size: .56rem; font-style: normal; }
.home-ai-feature .btn-primary { color: #102018; background: #a5e3bd; border-color: #a5e3bd; box-shadow: 0 8px 24px rgba(116, 213, 157, .17); }
.home-ai-feature .btn-primary:hover { background: #c2f0d1; border-color: #c2f0d1; box-shadow: 0 12px 30px rgba(116, 213, 157, .26); }
.home-ai-visual { position: relative; display: grid; place-items: center; min-width: 0; min-height: 285px; }
.home-ai-visual img { position: relative; z-index: 1; display: block; width: min(100%, 420px); height: auto; filter: drop-shadow(0 22px 32px rgba(0, 0, 0, .28)); animation: home-ai-drift 7s ease-in-out infinite; }
.home-ai-orbit { position: absolute; width: min(84%, 350px); aspect-ratio: 1; border: 1px solid rgba(161, 232, 190, .16); border-radius: 50%; }
.home-ai-orbit-one { animation: home-ai-orbit 24s linear infinite; }
.home-ai-orbit-two { width: min(66%, 272px); border-color: rgba(255, 139, 89, .24); animation: home-ai-orbit 31s linear infinite reverse; }
.home-ai-visual-label { position: absolute; z-index: 2; bottom: 2%; padding: 8px 12px; border: 1px solid rgba(231, 244, 235, .16); border-radius: 999px; color: rgba(244, 248, 245, .78); background: rgba(16, 27, 25, .74); backdrop-filter: blur(12px); font-size: .62rem; font-weight: 700; letter-spacing: .035em; }
.home-ai-visual-label i { padding-inline: 4px; color: #a5e3bd; font-style: normal; }
@keyframes home-ai-drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes home-ai-orbit { to { rotate: 360deg; } }
@media (max-width: 900px) {
  .home-hero .hero-grid { grid-template-columns: 1fr; gap: 16px; }
  .home-hero-copy { max-width: 740px; }
  .home-hero .hero-brand-visual { width: min(100%, 630px); margin: 0 auto; }
}
@media (max-width: 700px) {
  .home-hero { padding-top: 34px; }
  .home-hero h1 { font-size: clamp(2.65rem, 11vw, 4.4rem); }
  .home-growth-steps { gap: 7px; font-size: .6rem; }
  .home-growth-steps span { gap: 5px; }
  .home-growth-steps b { width: 10px; }
  .home-ai-feature { grid-template-columns: 1fr; gap: 16px; padding: 26px 22px 20px; border-radius: 24px; }
  .home-ai-copy h2 { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .home-ai-visual { min-height: 235px; }
  .home-ai-visual img { width: min(100%, 340px); }
  .home-ai-orbit { width: min(78%, 280px); }
  .home-ai-orbit-two { width: min(62%, 220px); }
  .home-ai-visual-label { bottom: -2px; font-size: .56rem; }
}
@media (prefers-reduced-motion: reduce) {
  .home-ai-kicker span, .home-ai-visual img, .home-ai-orbit { animation: none; }
}
.home-platforms-section { position: relative; overflow: hidden; background: color-mix(in srgb, var(--surface-2) 40%, transparent); }
.home-platforms-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr); align-items: end; gap: 28px; margin-bottom: 30px; }
.home-platforms-heading .folio { margin-bottom: 8px; }
.home-platforms-heading h2 { max-width: 22ch; margin-bottom: 0; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.12; letter-spacing: -.04em; text-wrap: balance; }
.home-platforms-heading .lede { margin: 0 0 3px; font-size: .92rem; }
.home-platform-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.home-platform-card { min-width: 0; min-height: 178px; padding: 18px 16px 16px; border: 1px solid var(--rule); border-radius: 19px; background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: 0 10px 30px rgba(20, 34, 28, .045); transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .35s ease; }
.home-platform-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--forest) 44%, var(--rule)); box-shadow: var(--shadow); }
.home-platform-logo { display: flex; align-items: center; gap: 8px; min-height: 48px; margin-bottom: 12px; font-size: clamp(.92rem, 1.3vw, 1.12rem); font-weight: 800; letter-spacing: -.045em; white-space: nowrap; }
.home-platform-logo img { flex: 0 0 38px; display: block; width: 38px; height: 38px; border-radius: 9px; object-fit: contain; }
.platform-shopify { color: #5C873B; }
.platform-woocommerce { color: #7F54B3; font-size: .84rem; letter-spacing: -.055em; }
.platform-amazon { color: #232F3E; }
.platform-amazon svg { color: #F39A1E; }
.platform-flipkart { color: #2874F0; }
.platform-blinkit { color: #F36F21; }
.home-platform-type { display: inline-flex; width: fit-content; margin-bottom: 7px; padding: 4px 8px; border: 1px solid var(--rule-soft); border-radius: 999px; color: var(--ink-faint); background: color-mix(in srgb, var(--surface-2) 76%, transparent); font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.home-platform-card p { color: var(--ink-soft); font-size: .72rem; line-height: 1.5; }
.home-tool-panel { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 64px); margin-top: 30px; padding: clamp(22px, 4vw, 36px); border: 1px solid var(--rule); border-radius: 25px; background: color-mix(in srgb, var(--surface) 86%, transparent); box-shadow: var(--shadow); }
.home-tool-intro .folio { margin-bottom: 9px; }
.home-tool-intro h3 { max-width: 22ch; margin-bottom: 10px; font-size: clamp(1.35rem, 2.5vw, 1.85rem); line-height: 1.18; letter-spacing: -.035em; }
.home-tool-intro p { max-width: 44ch; color: var(--ink-soft); font-size: .83rem; }
.home-tool-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 10px; }
.home-tool-item { display: flex; align-items: center; gap: 11px; min-width: 0; min-height: 68px; padding: 10px 12px; border: 1px solid var(--rule-soft); border-radius: 15px; background: color-mix(in srgb, var(--surface-2) 58%, transparent); }
.home-tool-mark { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; color: var(--forest); background: var(--forest-tint); }
.home-tool-mark svg, .home-tool-mark img { width: 25px; height: 25px; }
.home-tool-mark img { display: block; border-radius: 6px; object-fit: contain; }
.tool-meta { color: #0866FF; background: rgba(8, 102, 255, .09); }
.tool-whatsapp { color: #18A957; background: rgba(24, 169, 87, .1); }
.tool-google { background: #fff; }
.tool-commerce { color: var(--brass-deep); background: var(--brass-tint); }
.home-tool-item > span:last-child { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.home-tool-item strong { overflow: hidden; color: var(--ink); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.home-tool-item small { color: var(--ink-faint); font-size: .62rem; line-height: 1.35; }
.home-platform-note { margin: 14px 2px 0; color: var(--ink-faint); font-size: .68rem; }
.home-platform-link { margin-top: 13px; }
@media (prefers-color-scheme: dark) {
  .platform-amazon { color: #F4F6F8; }
  .platform-shopify { color: #A8D080; }
  .platform-woocommerce { color: #C7A5F5; }
  .home-platforms-section { background: color-mix(in srgb, var(--surface-2) 28%, transparent); }
}
@media (max-width: 900px) {
  .home-platforms-heading { grid-template-columns: 1fr; gap: 12px; }
  .home-platform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .home-platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .home-platform-card { min-height: 165px; padding: 14px 12px; }
  .home-platform-logo { gap: 6px; font-size: .92rem; }
  .home-platform-logo img { flex-basis: 32px; width: 32px; height: 32px; }
  .platform-woocommerce { font-size: .78rem; }
  .home-platform-card p { font-size: .68rem; }
  .home-tool-panel { grid-template-columns: 1fr; gap: 18px; margin-top: 22px; padding: 21px 16px; }
  .home-tool-list { gap: 8px; }
  .home-tool-item { gap: 8px; min-height: 64px; padding: 8px; }
  .home-tool-mark { flex-basis: 32px; width: 32px; height: 32px; border-radius: 10px; }
  .home-tool-mark svg, .home-tool-mark img { width: 22px; height: 22px; }
  .home-tool-item strong { font-size: .68rem; }
  .home-tool-item small { font-size: .56rem; }
}
@media (max-width: 360px) {
  .home-tool-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .home-platform-card { transition: none; }
}
.journey-card:hover { border-color: color-mix(in srgb, var(--brass) 55%, var(--rule)); box-shadow: 0 20px 48px rgba(21,33,27,.11), var(--glow-brass); }
.journey-number { position: absolute; top: 21px; right: 20px; color: var(--ink-faint); font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
.journey-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 23px; border: 1px solid var(--rule); border-radius: 15px; color: var(--brass-deep); background: var(--brass-tint); font-size: 1.35rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.journey-card h3 { position: relative; z-index: 1; margin-bottom: 9px; font-size: 1rem; }
.journey-card p { position: relative; z-index: 1; font-size: .84rem; line-height: 1.65; }
.journey-tag { position: relative; z-index: 1; display: block; margin-top: auto; padding-top: 15px; color: var(--forest); font-size: .68rem; font-weight: 800; letter-spacing: .025em; }
@media (max-width: 1050px) { .journey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .journey-grid { grid-template-columns: 1fr; gap: 12px; } .journey-card { min-height: 220px; } }

/* Shared scroll depth and reveals are applied by site.js on every page. */
.section::before { display: block; content: ""; inset: 0; width: auto; height: auto; top: 0; right: 0; border-radius: 0; opacity: .28; filter: none; background: radial-gradient(ellipse at 12% calc(26% + var(--section-drift, 0px)), color-mix(in srgb, var(--brass-tint) 46%, transparent), transparent 44%); transform: translate3d(0, calc(var(--section-drift, 0px) * -.2), 0); will-change: transform; }
.scroll-progress { height: 3px; background: linear-gradient(90deg, var(--brass-2), #f5b26e 48%, var(--forest-2)); box-shadow: 0 0 14px color-mix(in srgb, var(--brass-2) 55%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .section::before { transform: none; }
}

/* Blog landing page: aligned editorial hero, featured guide, and live filters. */
.blog-hero { padding: clamp(58px, 7vw, 90px) 0 clamp(44px, 6vw, 70px); }
.blog-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr); gap: clamp(38px, 7vw, 96px); align-items: center; }
.blog-hero-copy { position: relative; z-index: 1; }
.blog-hero-copy h1 { max-width: none; margin: 8px 0 18px; font-size: clamp(2.55rem, 4.8vw, 3.85rem); line-height: 1.08; }
.blog-hero-copy .lede { max-width: 58ch; font-size: clamp(1rem, 1.7vw, 1.14rem); }
.blog-scroll-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--ink); font-size: .82rem; font-weight: 800; text-decoration: none; }
.blog-scroll-link span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--rule); border-radius: 50%; color: var(--brass-deep); transition: transform .3s ease, background .3s ease; }
.blog-scroll-link:hover span { transform: translateY(3px); background: var(--brass-tint); }
.blog-hero-visual { position: relative; min-height: 370px; display: grid; place-items: center; isolation: isolate; perspective: 800px; border: 1px solid color-mix(in srgb, var(--rule) 75%, transparent); border-radius: 28px; background: radial-gradient(ellipse at 50% 48%, color-mix(in srgb, var(--surface) 64%, transparent), color-mix(in srgb, var(--surface-2) 30%, transparent) 60%, transparent 78%); }
.blog-hero-visual::before { content: ""; position: absolute; z-index: -2; width: 72%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brass-tint) 86%, transparent), transparent 68%); filter: blur(16px); }
.blog-hero-visual::after { content: ""; position: absolute; z-index: -2; inset: 0; border-radius: inherit; opacity: .35; background-image: radial-gradient(color-mix(in srgb, var(--ink-faint) 34%, transparent) .7px, transparent .7px); background-size: 17px 17px; mask-image: radial-gradient(ellipse at center, #000, transparent 78%); pointer-events: none; }
.blog-visual-eyebrow { position: absolute; z-index: 3; top: 5%; left: 50%; display: inline-flex; align-items: center; gap: 8px; transform: translateX(-50%); color: var(--ink-faint); font-size: .57rem; font-weight: 800; letter-spacing: .16em; white-space: nowrap; }
.blog-visual-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--forest-2); box-shadow: 0 0 12px var(--forest-2); }
.blog-visual-orbit { position: absolute; z-index: -1; width: 78%; height: 56%; border: 1px solid color-mix(in srgb, var(--forest-2) 32%, transparent); border-radius: 50%; transform: rotate(-28deg); animation: blog-orbit 22s linear infinite; }
.blog-visual-orbit-two { width: 59%; height: 84%; border-color: color-mix(in srgb, var(--brass-2) 34%, transparent); transform: rotate(34deg); animation-direction: reverse; animation-duration: 28s; }
.blog-visual-connections { position: absolute; z-index: 0; inset: 8% 2%; width: 96%; height: 84%; overflow: visible; pointer-events: none; }
.blog-connection-path { fill: none; stroke: color-mix(in srgb, var(--forest-2) 40%, transparent); stroke-width: 1.2; stroke-dasharray: 5 7; }
.blog-connection-path-secondary { stroke: color-mix(in srgb, var(--brass-2) 36%, transparent); }
.blog-connection-pulse { fill: var(--forest-2); filter: drop-shadow(0 0 5px var(--forest-2)); }
.blog-visual-center { position: relative; z-index: 2; display: grid; justify-items: center; gap: 4px; width: 166px; min-height: 190px; padding: 8px; text-align: center; color: var(--ink); animation: blog-center-float 5.5s ease-in-out infinite; }
.blog-visual-center-label { color: var(--ink-faint); font-size: .54rem; font-weight: 800; letter-spacing: .12em; }
.blog-visual-brand { position: relative; display: grid; place-items: center; width: 144px; height: 136px; }
.blog-visual-brand img { display: block; width: 100%; height: 100%; object-fit: contain; }
.blog-visual-center-foot { display: flex; align-items: center; gap: 5px; color: var(--ink-faint); font-size: .58rem; font-weight: 700; letter-spacing: .03em; }
.blog-visual-center-foot b { color: var(--brass-deep); font-weight: 800; }
.blog-visual-center-foot i { width: 13px; height: 1px; margin-inline: 2px; background: linear-gradient(90deg, var(--forest), var(--brass)); }
.blog-visual-node { position: absolute; z-index: 2; display: grid; grid-template-columns: 28px 1fr; align-items: center; column-gap: 8px; min-width: 122px; padding: 9px 9px; border: 1px solid color-mix(in srgb, var(--rule) 92%, transparent); border-radius: 14px; color: var(--ink); background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 10px 28px rgba(7, 16, 19, .1); backdrop-filter: blur(14px); transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease; animation: blog-node-float 5s ease-in-out infinite; }
.blog-visual-node:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--forest-2) 52%, var(--rule)); box-shadow: var(--shadow); }
.blog-visual-node > span { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--brass-deep); background: var(--brass-tint); font-size: .63rem; font-weight: 800; }
.blog-visual-node strong { font-size: .69rem; line-height: 1.2; }
.blog-visual-node small { color: var(--ink-soft); font-size: .57rem; line-height: 1.25; }
.blog-node-offer { top: 12%; left: 0; animation-delay: -.5s; }
.blog-node-discover { top: 13%; right: 0; animation-delay: -2s; }
.blog-node-convert { bottom: 13%; right: 0; animation-delay: -3.2s; }
.blog-node-improve { bottom: 12%; left: 0; animation-delay: -1.5s; }
.blog-visual-spark { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--brass-2); box-shadow: 0 0 15px var(--brass-2); animation: blog-spark 2.8s ease-in-out infinite; }
.blog-spark-one { left: 17%; bottom: 25%; }
.blog-spark-two { right: 22%; top: 31%; width: 5px; height: 5px; background: var(--forest-2); box-shadow: 0 0 13px var(--forest-2); animation-delay: -1.4s; }
.blog-visual-caption { position: absolute; z-index: 3; bottom: 2.5%; left: 50%; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1px solid var(--rule-soft); border-radius: 999px; color: var(--ink-faint); background: color-mix(in srgb, var(--surface) 84%, transparent); font-size: .54rem; font-weight: 700; white-space: nowrap; transform: translateX(-50%); }
.blog-visual-caption i { color: var(--forest); font-size: .72rem; font-style: normal; }
@keyframes blog-orbit { to { rotate: 360deg; } }
@keyframes blog-center-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes blog-node-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes blog-spark { 0%,100% { opacity: .42; scale: .8; } 50% { opacity: 1; scale: 1.35; } }
.blog-library { padding-top: clamp(40px, 5.5vw, 70px); }
.blog-library-container { max-width: 1120px; }
.blog-library-heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 24px; }
.blog-library-heading .folio { margin-bottom: 5px; }
.blog-library-heading h2 { margin-bottom: 0; }
.blog-library-note { max-width: 34ch; color: var(--ink-faint); font-size: .84rem; }
.blog-featured { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); min-height: 280px; overflow: hidden; border: 1px solid var(--rule); border-radius: 24px; background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: var(--shadow); }
.featured-art { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 280px; padding: 19px; overflow: hidden; color: #f5f6f8; background: radial-gradient(ellipse at 50% 55%, rgba(80,170,145,.17), transparent 43%), linear-gradient(145deg, #1a2227, #11161c); }
.featured-photo { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.featured-art::before, .featured-art::after { content: ""; position: absolute; z-index: 0; left: 50%; top: 51%; width: 390px; height: 110px; border: 1px solid rgba(128,211,183,.23); border-radius: 50%; transform: translate(-50%,-50%) rotate(-23deg); }
.featured-art::after { width: 250px; height: 250px; border-color: rgba(255,139,89,.2); transform: translate(-50%,-50%) rotate(35deg); }
.featured-art-top, .featured-flow, .featured-art-caption { position: relative; z-index: 1; }
.featured-art-top { display: flex; align-items: center; gap: 5px; color: rgba(245,246,248,.5); }
.featured-art-top > span { width: 7px; height: 7px; border-radius: 50%; background: #ff805c; }
.featured-art-top > span:nth-child(2) { background: #66c6a2; }
.featured-art-top > span:nth-child(3) { background: rgba(245,246,248,.38); }
.featured-art-top small { margin-left: auto; font-size: .58rem; letter-spacing: .13em; }
.featured-flow { display: grid; grid-template-columns: minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr); align-items: center; gap: 5px; }
.featured-flow-step { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 12px 9px; border: 1px solid rgba(245,246,248,.16); border-radius: 14px; background: rgba(245,246,248,.06); backdrop-filter: blur(10px); }
.featured-flow-step > span { color: #ff987a; font-size: .58rem; font-weight: 800; }
.featured-flow-step strong { font-size: .68rem; }
.featured-flow-step small { color: rgba(245,246,248,.62); font-size: .56rem; }
.featured-flow-step.featured-step-active { border-color: rgba(255,139,89,.56); background: rgba(255,139,89,.1); transform: translateY(-7px); box-shadow: 0 10px 28px rgba(0,0,0,.2); }
.featured-flow > i { color: #74c9a8; font-size: .95rem; font-style: normal; text-align: center; }
.featured-art-caption { display: flex; align-items: center; gap: 8px; color: rgba(245,246,248,.7); font-size: .64rem; }
.featured-pulse { width: 7px; height: 7px; border-radius: 50%; background: #66c6a2; box-shadow: 0 0 12px #66c6a2; animation: blog-spark 2.4s ease-in-out infinite; }
.featured-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 4vw, 42px); }
.featured-label { margin: 14px 0 7px; color: var(--ink-faint); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.featured-copy h3 { max-width: 28ch; margin-bottom: 10px; font-size: clamp(1.18rem, 2.3vw, 1.6rem); line-height: 1.3; }
.featured-copy h3 a { color: var(--ink); text-decoration: none; }
.featured-copy h3 a:hover { color: var(--brass-deep); }
.featured-copy > p { max-width: 52ch; color: var(--ink-soft); font-size: .84rem; }
.featured-footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule-soft); }
.featured-footer .blog-meta { margin: 0; }
.featured-footer .btn-text { white-space: nowrap; }
.blog-controls { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: 36px 0 22px; padding-bottom: 17px; border-bottom: 1px solid var(--rule); }
.blog-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-filter { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 12px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-soft); background: color-mix(in srgb, var(--surface) 82%, transparent); font: inherit; font-size: .7rem; font-weight: 700; cursor: pointer; transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease; }
.blog-filter:hover { transform: translateY(-2px); border-color: var(--brass); color: var(--ink); }
.blog-filter.is-active { border-color: var(--brass); color: var(--ink); background: var(--brass-tint); }
.blog-filter span { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; color: var(--ink-faint); background: color-mix(in srgb, var(--surface) 78%, transparent); font-size: .62rem; }
.blog-filter:focus-visible, .blog-search input:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.blog-search { display: flex; align-items: center; gap: 9px; width: min(100%, 240px); min-height: 40px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 12px; background: color-mix(in srgb, var(--surface) 82%, transparent); }
.blog-search svg { flex: 0 0 17px; width: 17px; height: 17px; color: var(--ink-faint); }
.blog-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font: inherit; font-size: .74rem; }
.blog-search input::placeholder { color: var(--ink-faint); }
.blog-results-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 4px; }
.blog-results-heading h3 { font-size: 1rem; }
.blog-results-heading p { color: var(--ink-faint); font-size: .72rem; }
.blog-grid { margin-top: 0; }
.blog-row { grid-template-columns: 76px minmax(0, 1fr); gap: 18px; padding: 21px 4px; }
.blog-plate { width: 76px; height: 76px; border-radius: 17px; }
.blog-row > div:last-child { min-width: 0; }
.blog-row h3 a { color: var(--ink); text-decoration: none; transition: color .25s ease; }
.blog-row p { max-width: 74ch; color: var(--ink-soft); font-size: .87rem; }
.blog-row[hidden], .blog-featured[hidden] { display: none; }
.blog-empty { display: flex; flex-direction: column; gap: 4px; padding: 30px 4px; border-top: 1px solid var(--rule); color: var(--ink); }
.blog-empty span { color: var(--ink-faint); font-size: .84rem; }
.blog-empty[hidden] { display: none; }
@media (max-width: 850px) {
  .blog-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); gap: 28px; }
  .blog-hero-copy h1 { font-size: clamp(2.4rem, 5.4vw, 3.4rem); }
  .blog-hero-visual { min-height: 400px; }
}
@media (min-width: 681px) and (max-width: 1100px) {
  .blog-hero-visual { min-height: 420px; }
  .blog-node-offer, .blog-node-discover { top: 8%; }
  .blog-node-convert, .blog-node-improve { bottom: 8%; }
}
@media (max-width: 680px) {
  .blog-hero-grid { grid-template-columns: 1fr; gap: 14px; }
  .blog-hero-visual { width: min(100%, 440px); min-height: 380px; margin: 0 auto; }
  .blog-visual-center { width: 172px; min-height: 190px; padding: 8px; }
  .blog-visual-brand { width: 146px; height: 136px; }
  .blog-visual-node { grid-template-columns: 25px 1fr; column-gap: 6px; min-width: 0; width: clamp(102px, 32vw, 126px); padding: 8px; }
  .blog-visual-node > span { width: 25px; height: 25px; }
  .blog-visual-node strong { font-size: .64rem; }
  .blog-visual-node small { font-size: .53rem; }
  .blog-visual-eyebrow { top: 4%; font-size: .52rem; }
  .blog-visual-caption { bottom: 2%; }
  .blog-library-heading { align-items: start; flex-direction: column; gap: 7px; }
  .blog-featured { grid-template-columns: 1fr; }
  .featured-art { min-height: 225px; }
  .featured-copy { padding: 24px; }
  .blog-controls { align-items: stretch; flex-direction: column; gap: 12px; margin-top: 26px; }
  .blog-search { width: 100%; }
}
@media (max-width: 420px) {
  .blog-hero-copy h1 { font-size: clamp(2.2rem, 9vw, 2.8rem); }
  .blog-hero-visual { min-height: 380px; }
  .blog-visual-center { width: 156px; min-height: 180px; }
  .blog-visual-brand { width: 132px; height: 124px; }
  .blog-visual-node { width: clamp(94px, 30vw, 112px); padding: 7px 6px; }
  .blog-node-offer, .blog-node-discover { top: 8%; }
  .blog-node-convert, .blog-node-improve { bottom: 8%; }
  .blog-node-offer, .blog-node-improve { left: 1%; }
  .blog-node-discover, .blog-node-convert { right: 1%; }
  .blog-visual-node strong { font-size: .6rem; }
  .blog-visual-node small { font-size: .5rem; }
  .blog-visual-caption { font-size: .5rem; }
  .featured-art { min-height: 200px; padding: 14px; }
  .featured-flow { grid-template-columns: minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1fr); gap: 2px; }
  .featured-flow-step { padding: 9px 6px; }
  .featured-flow-step strong { font-size: .6rem; }
  .featured-flow-step small { font-size: .49rem; }
  .blog-filters { gap: 6px; }
  .blog-filter { padding: 6px 9px; font-size: .65rem; }
  .blog-row { grid-template-columns: 62px minmax(0, 1fr); gap: 13px; padding: 18px 0; }
  .blog-plate { width: 62px; height: 62px; border-radius: 13px; }
  .blog-row h3 { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-visual-orbit, .blog-visual-center, .blog-visual-node, .blog-visual-spark, .featured-pulse { animation: none; }
  .blog-connection-pulse { display: none; }
  .blog-visual-node:hover { transform: none; }
  .featured-flow-step.featured-step-active { transform: none; }
  .blog-scroll-link span, .blog-filter, .blog-row { transition: none; }
}
.cta-band {
  background:
    radial-gradient(ellipse at 88% 12%, rgba(64, 169, 137, .2), transparent 32%),
    radial-gradient(ellipse at 8% 100%, rgba(240, 100, 46, .16), transparent 36%),
    linear-gradient(125deg, #192d2b, #151b22 68%, #242021);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 24px 64px rgba(13, 24, 21, .2);
}
.post-cta {
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 90%, var(--brass-tint)), var(--surface));
}

/* Why SaleStrat page */
.why-hero { padding-top: clamp(56px, 8vw, 92px); padding-bottom: clamp(42px, 6vw, 72px); overflow: hidden; }
.why-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .85fr); align-items: center; gap: clamp(34px, 6vw, 82px); }
.why-hero-copy { position: relative; z-index: 1; }
.why-hero-copy h1 { max-width: 660px; margin-bottom: 19px; font-size: clamp(2.5rem, 5vw, 4.2rem); line-height: 1.08; }
.why-hero-copy .lede { max-width: 58ch; }
.why-hero-note { display: flex; align-items: center; gap: 9px; margin-top: 20px; color: var(--ink-faint); font-size: .76rem; }
.why-hero-note span { color: var(--brass-deep); font-size: 1rem; }
.why-visual { position: relative; isolation: isolate; overflow: hidden; padding: clamp(21px, 3vw, 34px); border: 1px solid var(--rule); border-radius: 26px; background: radial-gradient(ellipse at 85% 0%, color-mix(in srgb, var(--forest-tint) 72%, transparent), transparent 44%), radial-gradient(ellipse at 0% 100%, color-mix(in srgb, var(--brass-tint) 70%, transparent), transparent 46%), color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: var(--shadow); }
.why-visual::after { position: absolute; z-index: -1; top: -58px; right: -60px; width: 180px; height: 180px; border: 1px solid color-mix(in srgb, var(--forest-2) 26%, transparent); border-radius: 50%; box-shadow: 0 0 0 14px color-mix(in srgb, var(--forest-tint) 28%, transparent), 0 0 0 38px color-mix(in srgb, var(--brass-tint) 26%, transparent); content: ""; }
.why-visual-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; color: var(--ink-faint); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.why-visual-indicator { width: 8px; height: 8px; border-radius: 50%; background: var(--forest-2); box-shadow: 0 0 12px color-mix(in srgb, var(--forest-2) 65%, transparent); }
.why-step-list { position: relative; display: grid; gap: 10px; }
.why-step-list::before { position: absolute; top: 24px; bottom: 24px; left: 20px; width: 1px; background: linear-gradient(var(--forest-2), var(--brass-2)); opacity: .48; content: ""; }
.why-step { position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr) 30px; align-items: center; gap: 12px; min-height: 72px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--rule) 90%, transparent); border-radius: 15px; background: color-mix(in srgb, var(--surface) 83%, transparent); transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, background .3s ease; }
.why-step:hover { transform: translateX(4px); border-color: color-mix(in srgb, var(--forest-2) 40%, var(--rule)); background: color-mix(in srgb, var(--surface) 96%, transparent); }
.why-step-number { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid color-mix(in srgb, var(--forest-2) 34%, var(--rule)); border-radius: 13px; color: var(--forest); background: var(--surface); font-size: .65rem; font-weight: 800; }
.why-step strong, .why-step small { display: block; }
.why-step strong { font-size: .84rem; }
.why-step small { margin-top: 3px; color: var(--ink-faint); font-size: .65rem; line-height: 1.4; }
.why-step-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--brass-deep); background: var(--brass-tint); font-size: 1rem; }
.why-step-final .why-step-number { color: var(--brass-deep); border-color: color-mix(in srgb, var(--brass-2) 42%, var(--rule)); }
.why-visual-footer { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 20px; color: var(--ink-faint); font-size: .62rem; font-weight: 700; }
.why-visual-footer i { width: 20px; height: 1px; background: linear-gradient(90deg, var(--forest-2), var(--brass-2)); }
.why-section-lede { max-width: 68ch; }
.why-principles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.why-principles-grid .vision-card { margin: 0; }
.why-fit-layout, .why-faq-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 7vw, 88px); align-items: start; }
.why-fit-list { border-top: 1px solid var(--rule); }
.why-fit-list > div { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 17px 0; border-bottom: 1px solid var(--rule); }
.why-fit-list > div > span { color: var(--brass-deep); font-size: .72rem; font-weight: 800; }
.why-fit-list p { margin: 0; color: var(--ink-soft); font-size: .91rem; }
.why-expect-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.why-expect-card { position: relative; min-height: 206px; padding: 22px 19px; border: 1px solid var(--rule); border-radius: 18px; background: color-mix(in srgb, var(--surface) 88%, transparent); transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease; }
.why-expect-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--forest-2) 38%, var(--rule)); box-shadow: var(--shadow); }
.why-expect-card > span { color: var(--brass-deep); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.why-expect-card h3 { margin: 20px 0 9px; font-size: 1.03rem; }
.why-expect-card p { margin: 0; color: var(--ink-soft); font-size: .8rem; }
.why-expect-link { margin-top: 22px; }
.why-faq-list { border-top: 1px solid var(--rule); }
.why-faq-list details { padding: 17px 0; border-bottom: 1px solid var(--rule); }
.why-faq-list summary { position: relative; padding-right: 28px; color: var(--ink); font-size: .94rem; font-weight: 800; cursor: pointer; list-style: none; }
.why-faq-list summary::-webkit-details-marker { display: none; }
.why-faq-list summary::after { position: absolute; top: -2px; right: 2px; color: var(--brass-deep); content: "+"; font-size: 1.3rem; transition: transform .2s ease; }
.why-faq-list details[open] summary::after { transform: rotate(45deg); }
.why-faq-list details p { max-width: 70ch; margin: 12px 0 0; color: var(--ink-soft); font-size: .88rem; }
@media (max-width: 1000px) {
  .why-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(310px, .9fr); gap: 28px; }
  .why-expect-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .why-hero-grid, .why-fit-layout, .why-faq-layout { grid-template-columns: 1fr; }
  .why-visual { width: min(100%, 520px); margin: 12px auto 0; }
  .why-principles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .why-principles-grid, .why-expect-grid { grid-template-columns: 1fr; }
  .why-expect-card { min-height: 0; }
  .why-step { grid-template-columns: 38px minmax(0,1fr) 26px; gap: 9px; padding: 9px; }
  .why-step-number { width: 36px; height: 36px; }
  .why-step-list::before { left: 18px; }
  .why-visual { padding: 18px 14px; }
  .why-hero-copy h1 { font-size: clamp(2.35rem, 10vw, 3.2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .why-step, .why-expect-card, .why-faq-list summary::after { transition: none; }
  .why-step:hover, .why-expect-card:hover { transform: none; }
}

  /* Shared finishing pass: ordered navigation and pointer ambience. */
  .nav-links a[aria-current="page"] { color: var(--ink); border-color: var(--brass); }
  .nav-links a.btn[aria-current="page"] { border-color: transparent; }

  .cta-band {
    grid-template-columns: minmax(0, 1fr) minmax(230px, .62fr);
    gap: clamp(32px, 6vw, 76px);
  }
  .cta-copy h2 { max-width: 19ch; text-wrap: balance; }
  .cta-copy > p { max-width: 60ch; }
  .cta-actions { width: 100%; max-width: 390px; justify-self: end; }

  .feature-card, .vision-card, .journey-card, .why-visual {
    transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .35s ease;
  }
  .section::before { display: none; }

  @media (max-width: 700px) {
    .cta-band { grid-template-columns: 1fr; }
    .cta-actions { justify-self: center; }
  }
/* Vermilion, ink and paper: sharper editorial contrast, inspired by the
   reference without importing its brand assets or visual identity. */
:root {
  --bg: #F7F6F4;
  --surface: #FFFFFF;
  --surface-2: #EEECE9;
  --ink: #171614;
  --ink-soft: #4F4B48;
  --ink-faint: #625D58;
  --brass: #D9361F;
  --brass-2: #F05238;
  --brass-deep: #B82D1A;
  --brass-tint: #FBE3DD;
  --rule: rgba(23, 22, 20, .16);
  --rule-soft: rgba(23, 22, 20, .09);
  --shadow: 0 2px 6px rgba(32, 25, 22, .04), 0 18px 44px rgba(32, 25, 22, .09);
  --glow-brass: 0 0 0 1px rgba(217, 54, 31, .18), 0 18px 42px rgba(217, 54, 31, .13);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F7F6F4;
  --surface: #FFFFFF;
  --surface-2: #EEECE9;
  --ink: #171614;
  --ink-soft: #4F4B48;
  --ink-faint: #625D58;
  --brass: #D9361F;
  --brass-2: #F05238;
  --brass-deep: #B82D1A;
  --brass-tint: #FBE3DD;
  --rule: rgba(23, 22, 20, .16);
  --rule-soft: rgba(23, 22, 20, .09);
  --shadow: 0 2px 6px rgba(32, 25, 22, .04), 0 18px 44px rgba(32, 25, 22, .09);
  --glow-brass: 0 0 0 1px rgba(217, 54, 31, .18), 0 18px 42px rgba(217, 54, 31, .13);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141311;
  --surface: #1D1B19;
  --surface-2: #292623;
  --ink: #F7F4F0;
  --ink-soft: #C8C0BA;
  --ink-faint: #AAA19A;
  --brass: #FF715C;
  --brass-2: #FF8A76;
  --brass-deep: #FF9B88;
  --brass-tint: rgba(255, 113, 92, .15);
  --rule: rgba(247, 244, 240, .17);
  --rule-soft: rgba(247, 244, 240, .1);
  --shadow: 0 2px 6px rgba(0, 0, 0, .24), 0 20px 46px rgba(0, 0, 0, .42);
  --glow-brass: 0 0 0 1px rgba(255, 113, 92, .23), 0 18px 42px rgba(0, 0, 0, .36);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #141311;
    --surface: #1D1B19;
    --surface-2: #292623;
    --ink: #F7F4F0;
    --ink-soft: #C8C0BA;
    --ink-faint: #AAA19A;
    --brass: #FF715C;
    --brass-2: #FF8A76;
    --brass-deep: #FF9B88;
    --brass-tint: rgba(255, 113, 92, .15);
    --rule: rgba(247, 244, 240, .17);
    --rule-soft: rgba(247, 244, 240, .1);
    --shadow: 0 2px 6px rgba(0, 0, 0, .24), 0 20px 46px rgba(0, 0, 0, .42);
    --glow-brass: 0 0 0 1px rgba(255, 113, 92, .23), 0 18px 42px rgba(0, 0, 0, .36);
  }
}

body { background: var(--bg); color: var(--ink); }
.home-hero {
  background-image:
    radial-gradient(ellipse at 82% 35%, color-mix(in srgb, var(--brass-tint) 75%, transparent), transparent 52%),
    linear-gradient(135deg, transparent 54%, color-mix(in srgb, var(--brass) 3%, transparent) 54.1%, transparent 54.3%);
}
.home-hero::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--brass-tint) 88%, transparent), color-mix(in srgb, var(--brass) 12%, transparent) 38%, transparent 70%);
}
.home-hero .home-hero-copy h1 {
  max-width: 13ch;
  font-size: clamp(2rem, 5.8vw, 4.2rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.065em;
}
.home-hero .home-hero-copy h1 em {
  color: var(--brass);
  font-size: 1em;
  font-weight: 800;
  letter-spacing: inherit;
  background: none;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}
.hero-tag {
  color: var(--brass-deep);
  background: color-mix(in srgb, var(--brass-tint) 72%, var(--surface));
}
.hero-tag .dot { background: var(--brass); }
.hero-brand-glow { background: radial-gradient(circle, var(--brass), transparent 68%); }
.hero-brand-orbit-two { border-color: color-mix(in srgb, var(--brass) 32%, transparent); }
.home-growth-steps i, .journey-number, .path-num, .vision-card .vnum { color: var(--brass-deep); }
.folio { color: var(--brass-deep); }

.scroll-progress {
  background: linear-gradient(90deg, #B82D1A, #F05238 68%, #FF9B67);
  box-shadow: 0 0 12px color-mix(in srgb, var(--brass) 38%, transparent);
}
.nav-links a[aria-current="location"],
.nav-links a[aria-current="page"] { color: var(--ink); border-color: var(--brass); }
.nav-links a:not(.btn):hover { color: var(--brass-deep); }

.btn-primary,
.cta-band .btn-primary {
  border-color: #B82D1A;
  background: #B82D1A;
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  box-shadow: 0 8px 22px rgba(184, 45, 26, .2);
}
.btn-primary:hover,
.cta-band .btn-primary:hover {
  border-color: #9F2617;
  background: #9F2617;
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  box-shadow: 0 12px 28px rgba(184, 45, 26, .28);
}
.btn-outline:hover,
.back-to-top:hover { border-color: var(--brass); color: var(--brass-deep); }

.journey-card,
.home-platform-card,
.path-card,
.vision-card {
  position: relative;
  background-image: radial-gradient(260px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), color-mix(in srgb, var(--brass) 9%, transparent), transparent 72%);
  border-color: var(--rule);
}
.journey-card:hover,
.home-platform-card:hover,
.path-card:hover,
.vision-card:hover {
  border-color: color-mix(in srgb, var(--brass) 58%, var(--rule));
  box-shadow: var(--shadow), var(--glow-brass);
}
.journey-card::before,
.home-platform-card::before,
.path-card::before,
.vision-card::before {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--brass), color-mix(in srgb, var(--brass-2) 28%, transparent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .42s cubic-bezier(.2, .8, .2, 1);
}
.journey-card:hover::before,
.home-platform-card:hover::before,
.path-card:hover::before,
.vision-card:hover::before,
.journey-card:focus-within::before,
.home-platform-card:focus-within::before,
.path-card:focus-within::before,
.vision-card:focus-within::before { transform: scaleX(1); }
.home-platform-card:hover { border-color: color-mix(in srgb, var(--brass) 55%, var(--rule)); }
.journey-icon { border-color: color-mix(in srgb, var(--brass) 28%, var(--rule)); }
.journey-tag { color: var(--brass-deep); }

.home-ai-feature {
  border-color: color-mix(in srgb, var(--brass) 55%, transparent);
  background:
    radial-gradient(ellipse at 84% 18%, rgba(255, 255, 255, .16), transparent 42%),
    linear-gradient(125deg, #9F2617 0%, #C8321D 58%, #D9361F 100%);
  box-shadow: 0 24px 70px rgba(159, 38, 23, .2);
}
.home-ai-feature::before {
  opacity: .2;
  background-image: linear-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .16) 1px, transparent 1px);
}
.home-ai-feature::after { color: rgba(255, 255, 255, .07); }
.home-ai-kicker { color: #FFE1DA; }
.home-ai-kicker span { background: #FFD0C5; box-shadow: 0 0 14px rgba(255, 208, 197, .72); }
.home-ai-copy h2 { color: #FFFFFF; }
.home-ai-copy > p { color: #FFFFFF; }
.home-ai-feature .btn-primary,
.home-ai-feature .btn-primary:hover {
  border-color: #FFFFFF;
  background: #FFFFFF;
  color: #171614;
  -webkit-text-fill-color: #171614;
  box-shadow: 0 8px 24px rgba(66, 14, 8, .2);
}
.home-ai-feature .btn-primary:hover { transform: translateY(-2px); background: #F7F1ED; }
.home-ai-visual-label i { color: #FFB5A5; }

.platform-amazon { color: #242424; }
.platform-shopify { color: #3F5B1D; }
.platform-woocommerce { color: #5A3690; }
.home-platforms-section { background: color-mix(in srgb, var(--surface-2) 42%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .platform-amazon { color: #F4F6F8; }
  :root:not([data-theme="light"]) .platform-shopify { color: #A8D080; }
  :root:not([data-theme="light"]) .platform-woocommerce { color: #C7A5F5; }
  :root:not([data-theme="light"]) .home-platforms-section { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
}
:root[data-theme="dark"] .platform-amazon { color: #F4F6F8; }
:root[data-theme="dark"] .platform-shopify { color: #A8D080; }
:root[data-theme="dark"] .platform-woocommerce { color: #C7A5F5; }
:root[data-theme="dark"] .home-platforms-section { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }

.tool-meta { color: #0052CC; background: #E7F0FF; }
.tool-whatsapp { color: #08763B; background: #E6F5EB; }
.tool-google { color: #1967D2; background: #FFFFFF; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tool-meta { color: #9BC2FF; background: rgba(8, 102, 255, .2); }
  :root:not([data-theme="light"]) .tool-whatsapp { color: #80E0A7; background: rgba(24, 169, 87, .2); }
}
:root[data-theme="dark"] .tool-meta { color: #9BC2FF; background: rgba(8, 102, 255, .2); }
:root[data-theme="dark"] .tool-whatsapp { color: #80E0A7; background: rgba(24, 169, 87, .2); }

.theme-toggle:hover,
.nav-toggle:hover,
.sai-close:hover,
.sai-qr button:hover { border-color: var(--brass); }
.theme-toggle-icon,
.faq-item summary::after,
.case-placeholder-mark { color: var(--brass-deep); }
.sai-launcher {
  background: #B82D1A;
  color: #FFFFFF;
  border-color: #B82D1A;
  box-shadow: 0 12px 28px rgba(184, 45, 26, .28);
}
.sai-launcher:hover { background: #9F2617; }
.sai-msg-avatar { background: var(--brass); }
.faq-item summary::after { transition: transform .25s ease; }
.faq-item[open] summary::after { content: "+"; transform: rotate(45deg); }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 3px;
}
.btn:focus-visible,
.nav-toggle:focus-visible,
.theme-toggle:focus-visible,
.sai-launcher:focus-visible { outline-color: var(--brass-deep); }
.cta-band .btn-outline {
  background: transparent;
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}
.cta-band .btn-outline:hover { background: rgba(255, 255, 255, .1); }
.post-body a.btn { border-bottom: 0; }
.post-body a.btn-primary {
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}
.post-body a.btn-outline {
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  border-color: var(--rule);
}
.post-body a.btn-outline:hover {
  color: var(--brass-deep);
  -webkit-text-fill-color: var(--brass-deep);
  border-color: var(--brass);
}

@media (max-width: 560px) {
  .home-hero .home-hero-copy h1 { font-size: clamp(2rem, 8vw, 3rem); }
}

@media (min-width: 1081px) {
  .nav-row {
    justify-content: initial;
    gap: clamp(14px, 2vw, 26px);
  }
  .nav-brand { order: 1; }
  .nav-links {
    order: 2;
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: clamp(8px, 1.05vw, 15px);
    min-width: 0;
    font-size: clamp(.76rem, .9vw, .86rem);
    white-space: nowrap;
  }
  .nav-links .btn { padding: 11px 16px; font-size: .82rem; }
  .theme-toggle { order: 3; }
  .nav-brand img { width: clamp(62px, 5vw, 78px); height: clamp(52px, 4.2vw, 62px); }
}

@media (prefers-reduced-motion: reduce) {
  .journey-card::before,
  .home-platform-card::before,
  .path-card::before,
  .vision-card::before { transition: none; }
}

/* Lumia-inspired tile palette: red and paper by day, navy and green by night. */
:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #FFF0F2;
  --ink: #321018;
  --ink-soft: #54232C;
  --ink-faint: #70464D;
  --brass: #F21D3B;
  --brass-2: #FF5268;
  --brass-deep: #A40D27;
  --brass-tint: #FFE1E6;
  --forest: #A40D27;
  --forest-2: #D51B39;
  --forest-tint: #FFE1E6;
  --rule: rgba(72, 10, 23, .2);
  --rule-soft: rgba(72, 10, 23, .11);
  --shadow: 0 8px 22px rgba(90, 14, 30, .08);
  --glow-brass: 0 0 0 2px rgba(242, 29, 59, .2), 0 14px 30px rgba(164, 13, 39, .13);
  --overlay-photo: linear-gradient(160deg, rgba(164, 13, 39, .24), rgba(50, 16, 24, .5));
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #FFF0F2;
  --ink: #321018;
  --ink-soft: #54232C;
  --ink-faint: #70464D;
  --brass: #F21D3B;
  --brass-2: #FF5268;
  --brass-deep: #A40D27;
  --brass-tint: #FFE1E6;
  --forest: #A40D27;
  --forest-2: #D51B39;
  --forest-tint: #FFE1E6;
  --rule: rgba(72, 10, 23, .2);
  --rule-soft: rgba(72, 10, 23, .11);
  --shadow: 0 8px 22px rgba(90, 14, 30, .08);
  --glow-brass: 0 0 0 2px rgba(242, 29, 59, .2), 0 14px 30px rgba(164, 13, 39, .13);
  --overlay-photo: linear-gradient(160deg, rgba(164, 13, 39, .24), rgba(50, 16, 24, .5));
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #071523;
  --surface: #0D2031;
  --surface-2: #132B3A;
  --ink: #F3F8FC;
  --ink-soft: #C8D9E4;
  --ink-faint: #A2BAC7;
  --brass: #39D994;
  --brass-2: #65E9AC;
  --brass-deep: #39D994;
  --brass-tint: rgba(57, 217, 148, .14);
  --forest: #39D994;
  --forest-2: #65E9AC;
  --forest-tint: rgba(57, 217, 148, .13);
  --rule: rgba(206, 229, 239, .2);
  --rule-soft: rgba(206, 229, 239, .12);
  --shadow: 0 10px 28px rgba(0, 0, 0, .24);
  --glow-brass: 0 0 0 2px rgba(57, 217, 148, .22), 0 14px 32px rgba(0, 0, 0, .24);
  --overlay-photo: linear-gradient(160deg, rgba(8, 39, 49, .3), rgba(3, 15, 27, .62));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #071523;
    --surface: #0D2031;
    --surface-2: #132B3A;
    --ink: #F3F8FC;
    --ink-soft: #C8D9E4;
    --ink-faint: #A2BAC7;
    --brass: #39D994;
    --brass-2: #65E9AC;
    --brass-deep: #39D994;
    --brass-tint: rgba(57, 217, 148, .14);
    --forest: #39D994;
    --forest-2: #65E9AC;
    --forest-tint: rgba(57, 217, 148, .13);
    --rule: rgba(206, 229, 239, .2);
    --rule-soft: rgba(206, 229, 239, .12);
    --shadow: 0 10px 28px rgba(0, 0, 0, .24);
    --glow-brass: 0 0 0 2px rgba(57, 217, 148, .22), 0 14px 32px rgba(0, 0, 0, .24);
    --overlay-photo: linear-gradient(160deg, rgba(8, 39, 49, .3), rgba(3, 15, 27, .62));
  }
}

body { background: var(--bg); color: var(--ink); }
.site-nav {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-bottom: 2px solid var(--brass);
}
.has-scrolled .site-nav { background: color-mix(in srgb, var(--surface) 97%, transparent); }
.home-hero {
  background-color: var(--bg);
  background-image:
    linear-gradient(90deg, transparent calc(100% - 1px), color-mix(in srgb, var(--brass) 9%, transparent) 100%),
    linear-gradient(transparent calc(100% - 1px), color-mix(in srgb, var(--brass) 9%, transparent) 100%);
  background-size: 56px 56px;
}
.home-hero::after { background: radial-gradient(circle, color-mix(in srgb, var(--brass-tint) 75%, transparent), transparent 70%); }
.hero-tag {
  border-radius: 2px;
  border-left: 4px solid var(--brass);
  background: var(--surface-2);
}
.nav-links a[aria-current="location"],
.nav-links a[aria-current="page"] { border-bottom-width: 2px; }

.btn,
.nav-toggle,
.theme-toggle,
.nav-links .btn,
.hero-tag,
.journey-icon,
.journey-card,
.home-platform-card,
.path-card,
.vision-card,
.feature-card,
.case-row,
.service-node,
.faq-item,
.post-cta,
.ai-toc,
.ai-answer-card,
.ai-stat-card,
.ai-faq-list details,
.blog-filter {
  border-radius: 2px;
}
.btn {
  min-height: 46px;
  font-weight: 800;
  letter-spacing: .01em;
}
.btn-primary,
.cta-band .btn-primary {
  border-color: var(--brass-deep);
  background: var(--brass-deep);
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  box-shadow: none;
}
.btn-primary:hover,
.cta-band .btn-primary:hover {
  border-color: color-mix(in srgb, var(--brass-deep) 82%, var(--ink));
  background: color-mix(in srgb, var(--brass-deep) 82%, var(--ink));
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  box-shadow: var(--glow-brass);
}
.btn-outline {
  border: 2px solid var(--brass-deep);
  background: var(--surface);
  color: var(--brass-deep);
  -webkit-text-fill-color: var(--brass-deep);
}
.btn-outline:hover {
  border-color: var(--brass-deep);
  background: var(--brass-tint);
  color: var(--brass-deep);
  -webkit-text-fill-color: var(--brass-deep);
}
.scroll-progress {
  background: linear-gradient(90deg, var(--brass-deep), var(--brass), var(--brass-2));
  box-shadow: 0 0 12px color-mix(in srgb, var(--brass) 36%, transparent);
}

.journey-card,
.home-platform-card,
.path-card,
.vision-card,
.feature-card,
.case-row {
  border: 1px solid var(--rule);
  border-top: 4px solid var(--brass);
  background-color: var(--surface);
  background-image: none;
  box-shadow: var(--shadow);
}
.journey-card:hover,
.home-platform-card:hover,
.path-card:hover,
.vision-card:hover,
.feature-card:hover,
.case-row:hover {
  transform: translateY(-4px);
  border-color: var(--brass);
  box-shadow: var(--glow-brass);
}
.journey-card::before,
.home-platform-card::before,
.path-card::before,
.vision-card::before { height: 4px; background: var(--brass-2); }
.journey-icon,
.node-icon {
  border-radius: 2px;
  background: var(--brass-tint);
  color: var(--brass-deep);
}
.home-platforms-section { background: var(--surface-2); }
.cta-band {
  color: var(--ink);
  background: var(--surface-2);
  border: 2px solid var(--brass);
  border-left-width: 8px;
  border-radius: 2px;
  box-shadow: none;
}
.cta-band h2,
.cta-band p,
.cta-band .cta-intents-label,
.cta-band .cta-intent { color: var(--ink); }
.cta-band .cta-eyebrow { color: var(--brass-deep); }
.cta-band .cta-intent {
  border-color: var(--rule);
  background: var(--surface);
}
.cta-band .cta-intent:hover {
  border-color: var(--brass);
  background: var(--brass-tint);
}
.cta-band .btn-outline {
  border-color: var(--brass-deep);
  background: transparent;
  color: var(--brass-deep);
  -webkit-text-fill-color: var(--brass-deep);
}
.cta-band .btn-outline:hover { background: var(--brass-tint); }
.cta-band::after { border-radius: 2px; border-color: var(--brass); opacity: .2; }

.home-ai-feature {
  border: 0;
  border-left: 8px solid var(--brass-2);
  border-radius: 2px;
  background: linear-gradient(120deg, var(--brass-deep), var(--brass));
  box-shadow: var(--shadow);
}
.home-ai-feature .btn-primary,
.home-ai-feature .btn-primary:hover {
  border-color: var(--surface);
  background: var(--surface);
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}
.theme-toggle,
.nav-toggle { border-color: var(--rule); }
input,
textarea,
select {
  border-radius: 2px;
  border-color: var(--rule);
  background-color: var(--surface);
  color: var(--ink);
}
input::placeholder,
textarea::placeholder { color: var(--ink-faint); opacity: 1; }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 3px;
}

:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .cta-band .btn-primary {
  border-color: var(--brass);
  background: var(--brass);
  color: #062116;
  -webkit-text-fill-color: #062116;
}
:root[data-theme="dark"] .post-body a.btn-primary {
  color: #062116;
  -webkit-text-fill-color: #062116;
}
:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .cta-band .btn-primary:hover {
  border-color: var(--brass-2);
  background: var(--brass-2);
  color: #062116;
  -webkit-text-fill-color: #062116;
}
:root[data-theme="dark"] .btn-outline,
:root[data-theme="dark"] .cta-band .btn-outline {
  border-color: var(--brass);
  color: var(--brass);
  -webkit-text-fill-color: var(--brass);
}
:root[data-theme="dark"] .btn-outline:hover,
:root[data-theme="dark"] .cta-band .btn-outline:hover {
  background: var(--brass-tint);
  color: var(--brass-2);
  -webkit-text-fill-color: var(--brass-2);
}
:root[data-theme="dark"] .cta-band {
  color: var(--ink);
  background: var(--surface-2);
}
:root[data-theme="dark"] .cta-band h2,
:root[data-theme="dark"] .cta-band p,
:root[data-theme="dark"] .cta-band .cta-intents-label,
:root[data-theme="dark"] .cta-band .cta-intent { color: var(--ink); }
:root[data-theme="dark"] .home-ai-feature {
  background: linear-gradient(120deg, #0C352D, #10543D);
  border-left-color: var(--brass);
}
:root[data-theme="dark"] .home-ai-feature .home-ai-kicker,
:root[data-theme="dark"] .home-ai-feature .home-ai-copy h2,
:root[data-theme="dark"] .home-ai-feature .home-ai-copy > p { color: #F3F8FC; }
:root[data-theme="dark"] .home-ai-feature .btn-primary,
:root[data-theme="dark"] .home-ai-feature .btn-primary:hover {
  color: #062116;
  -webkit-text-fill-color: #062116;
}
:root[data-theme="dark"] .sai-launcher {
  background: var(--brass);
  border-color: var(--brass);
  color: #062116;
}
:root[data-theme="dark"] .tool-meta { color: #A8CCFF; background: rgba(29, 91, 166, .3); }
:root[data-theme="dark"] .tool-whatsapp { color: #7DE7AE; background: rgba(31, 151, 92, .23); }
:root[data-theme="dark"] .tool-google { color: #A8CCFF; background: #10283A; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary,
  :root:not([data-theme="light"]) .cta-band .btn-primary {
    border-color: var(--brass);
    background: var(--brass);
    color: #062116;
    -webkit-text-fill-color: #062116;
  }
  :root:not([data-theme="light"]) .btn-primary:hover,
  :root:not([data-theme="light"]) .cta-band .btn-primary:hover {
    border-color: var(--brass-2);
    background: var(--brass-2);
    color: #062116;
    -webkit-text-fill-color: #062116;
  }
  :root:not([data-theme="light"]) .post-body a.btn-primary {
    color: #062116;
    -webkit-text-fill-color: #062116;
  }
  :root:not([data-theme="light"]) .btn-outline,
  :root:not([data-theme="light"]) .cta-band .btn-outline {
    border-color: var(--brass);
    color: var(--brass);
    -webkit-text-fill-color: var(--brass);
  }
  :root:not([data-theme="light"]) .cta-band {
    color: var(--ink);
    background: var(--surface-2);
  }
  :root:not([data-theme="light"]) .cta-band h2,
  :root:not([data-theme="light"]) .cta-band p,
  :root:not([data-theme="light"]) .cta-band .cta-intents-label,
  :root:not([data-theme="light"]) .cta-band .cta-intent { color: var(--ink); }
  :root:not([data-theme="light"]) .home-ai-feature {
    background: linear-gradient(120deg, #0C352D, #10543D);
    border-left-color: var(--brass);
  }
  :root:not([data-theme="light"]) .home-ai-feature .home-ai-kicker,
  :root:not([data-theme="light"]) .home-ai-feature .home-ai-copy h2,
  :root:not([data-theme="light"]) .home-ai-feature .home-ai-copy > p { color: #F3F8FC; }
  :root:not([data-theme="light"]) .home-ai-feature .btn-primary,
  :root:not([data-theme="light"]) .home-ai-feature .btn-primary:hover {
    color: #062116;
    -webkit-text-fill-color: #062116;
  }
  :root:not([data-theme="light"]) .sai-launcher {
    background: var(--brass);
    border-color: var(--brass);
    color: #062116;
  }
  :root:not([data-theme="light"]) .tool-meta { color: #A8CCFF; background: rgba(29, 91, 166, .3); }
  :root:not([data-theme="light"]) .tool-whatsapp { color: #7DE7AE; background: rgba(31, 151, 92, .23); }
  :root:not([data-theme="light"]) .tool-google { color: #A8CCFF; background: #10283A; }
}

/* Alternating editorial bands keep the red bold, deliberate, and easy to scan. */
:root {
  --red-950: #570817;
  --red-900: #79091F;
  --red-800: #A40D27;
  --red-600: #D91635;
  --red-500: #F21D3B;
}
.theme-band-red {
  color: #FFFFFF;
  background: linear-gradient(132deg, var(--red-900), var(--red-600));
  border-color: rgba(255, 255, 255, .18);
}
.theme-band-red::before { opacity: .14; background: #FFFFFF; }
.theme-band-red h1,
.theme-band-red h2,
.theme-band-red h3,
.theme-band-red h4,
.theme-band-red p,
.theme-band-red .folio,
.theme-band-red .kicker,
.theme-band-red .home-growth-steps,
.theme-band-red .solo-assurance { color: #FFFFFF; }
.theme-band-red .folio::after { background: rgba(255, 255, 255, .34); }
.theme-band-red .hero-tag {
  color: #FFFFFF;
  background: rgba(74, 0, 15, .26);
  border-color: rgba(255, 255, 255, .7);
}
.theme-band-red .home-hero-copy h1 em { color: #FFFFFF; }
.theme-band-red .home-growth-steps i {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, .58);
  background: rgba(74, 0, 15, .24);
}
.theme-band-red .home-growth-steps b { background: rgba(255, 255, 255, .62); }
.theme-band-red .btn-primary {
  border-color: #FFFFFF;
  background: #FFFFFF;
  color: var(--red-900);
  -webkit-text-fill-color: var(--red-900);
}
.theme-band-red .btn-primary:hover { background: #FFE9EC; }
.theme-band-red .btn-outline {
  border-color: rgba(255, 255, 255, .86);
  background: rgba(74, 0, 15, .14);
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}
.theme-band-red .btn-outline:hover { background: rgba(255, 255, 255, .14); }
.theme-band-red .home-platform-card,
.theme-band-red .home-tool-panel {
  border-color: rgba(255, 255, 255, .72);
  background: #FFFFFF;
  color: #321018;
  box-shadow: 0 12px 30px rgba(67, 0, 14, .2);
}
.theme-band-red .home-platform-card p,
.theme-band-red .home-tool-panel p,
.theme-band-red .home-tool-panel h3,
.theme-band-red .home-tool-item strong { color: #321018; }
.theme-band-red .home-tool-item small,
.theme-band-red .home-platform-type { color: #70464D; }
.theme-band-red .home-platform-note { color: #FFFFFF; }
.theme-band-red .home-platform-link .btn-text { color: #FFFFFF; border-color: #FFFFFF; }
.theme-band-red .home-platform-link .btn-text:hover { color: #FFE1E6; }
.theme-band-red .home-ai-feature {
  border: 1px solid rgba(255, 255, 255, .55);
  border-left: 8px solid #FFFFFF;
  background: linear-gradient(125deg, var(--red-950), var(--red-800) 58%, var(--red-600));
  box-shadow: 0 20px 50px rgba(67, 0, 14, .22);
}
.theme-band-red .home-ai-feature h2,
.theme-band-red .home-ai-feature p { color: #FFFFFF; }
.theme-band-red .home-ai-feature .btn-primary {
  border-color: #FFFFFF;
  background: #FFFFFF;
  color: var(--red-900);
  -webkit-text-fill-color: var(--red-900);
}
.theme-band-red .testimonial-placeholder,
.theme-band-red .faq-item {
  border-color: rgba(255, 255, 255, .4);
  background: rgba(74, 0, 15, .24);
  color: #FFFFFF;
}
.theme-band-red .testimonial-placeholder p,
.theme-band-red .faq-item summary,
.theme-band-red .faq-item p { color: #FFFFFF; }
.theme-band-red .section-link .btn-primary {
  border-color: #FFFFFF;
  background: #FFFFFF;
  color: var(--red-900);
  -webkit-text-fill-color: var(--red-900);
}
.theme-band-paper {
  color: var(--ink);
  background: #FFFFFF;
}
.theme-band-paper h1,
.theme-band-paper h2,
.theme-band-paper h3,
.theme-band-paper h4 { color: var(--red-900); }
.theme-band-paper p,
.theme-band-paper .lede { color: #54232C; }
.theme-band-paper .folio,
.theme-band-paper .kicker { color: var(--red-800); }
.theme-band-paper .section-rule { border-color: rgba(164, 13, 39, .2); }

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #080808;
  --surface: #111111;
  --surface-2: #191919;
  --ink: #F7F7F7;
  --ink-soft: #D3D3D3;
  --ink-faint: #B2B2B2;
  --brass: #F21D3B;
  --brass-2: #FF6978;
  --brass-deep: #FF4058;
  --brass-tint: rgba(242, 29, 59, .16);
  --forest: #F21D3B;
  --forest-2: #FF6978;
  --forest-tint: rgba(242, 29, 59, .13);
  --rule: rgba(255, 255, 255, .2);
  --rule-soft: rgba(255, 255, 255, .12);
  --shadow: 0 12px 34px rgba(0, 0, 0, .48);
  --glow-brass: 0 0 0 1px rgba(255, 64, 88, .3), 0 16px 38px rgba(128, 0, 20, .28);
  --overlay-photo: linear-gradient(160deg, rgba(96, 0, 16, .28), rgba(0, 0, 0, .68));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #080808;
    --surface: #111111;
    --surface-2: #191919;
    --ink: #F7F7F7;
    --ink-soft: #D3D3D3;
    --ink-faint: #B2B2B2;
    --brass: #F21D3B;
    --brass-2: #FF6978;
    --brass-deep: #FF4058;
    --brass-tint: rgba(242, 29, 59, .16);
    --forest: #F21D3B;
    --forest-2: #FF6978;
    --forest-tint: rgba(242, 29, 59, .13);
    --rule: rgba(255, 255, 255, .2);
    --rule-soft: rgba(255, 255, 255, .12);
    --shadow: 0 12px 34px rgba(0, 0, 0, .48);
    --glow-brass: 0 0 0 1px rgba(255, 64, 88, .3), 0 16px 38px rgba(128, 0, 20, .28);
    --overlay-photo: linear-gradient(160deg, rgba(96, 0, 16, .28), rgba(0, 0, 0, .68));
  }
}

:root[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
:root[data-theme="dark"] .site-nav {
  background: rgba(8, 8, 8, .94);
  border-color: var(--brass);
}
:root[data-theme="dark"] .has-scrolled .site-nav { background: rgba(8, 8, 8, .97); }
:root[data-theme="dark"] .home-hero {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 82% 35%, rgba(143, 9, 31, .3), transparent 52%),
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(255, 255, 255, .035) 100%),
    linear-gradient(transparent calc(100% - 1px), rgba(255, 255, 255, .035) 100%);
  background-size: auto, 56px 56px, 56px 56px;
}
:root[data-theme="dark"] .home-hero::after { background: radial-gradient(circle, rgba(242, 29, 59, .12), transparent 70%); }
:root[data-theme="dark"] .home-hero .home-hero-copy h1,
:root[data-theme="dark"] .home-hero .home-hero-copy h1 em { color: #FFFFFF; }
:root[data-theme="dark"] .theme-band-red,
:root[data-theme="dark"] .theme-band-paper {
  color: var(--ink);
  background: linear-gradient(135deg, #080808 0%, #111111 68%, #26090E 100%);
  border-color: var(--rule);
}
:root[data-theme="light"] .theme-band-red,
:root[data-theme="light"] .theme-band-paper {
  border-color: rgba(164, 13, 39, .16);
}
:root[data-theme="light"] .home-platforms-section.theme-band-red {
  background: linear-gradient(132deg, var(--red-900), var(--red-600));
}
:root[data-theme="dark"] .theme-band-red h1,
:root[data-theme="dark"] .theme-band-red h2,
:root[data-theme="dark"] .theme-band-red h3,
:root[data-theme="dark"] .theme-band-red h4,
:root[data-theme="dark"] .theme-band-red p,
:root[data-theme="dark"] .theme-band-red .folio,
:root[data-theme="dark"] .theme-band-red .kicker,
:root[data-theme="dark"] .theme-band-paper h1,
:root[data-theme="dark"] .theme-band-paper h2,
:root[data-theme="dark"] .theme-band-paper h3,
:root[data-theme="dark"] .theme-band-paper h4,
:root[data-theme="dark"] .theme-band-paper p,
:root[data-theme="dark"] .theme-band-paper .folio,
:root[data-theme="dark"] .theme-band-paper .kicker { color: var(--ink); }
:root[data-theme="dark"] .theme-band-red .folio::after,
:root[data-theme="dark"] .theme-band-paper .folio::after { background: var(--rule); }
:root[data-theme="dark"] .theme-band-red .home-platform-card,
:root[data-theme="dark"] .theme-band-red .home-tool-panel {
  color: var(--ink);
  border-color: var(--rule);
  background: linear-gradient(140deg, #161616, #101010 65%, #200B10);
}
:root[data-theme="dark"] .theme-band-red .home-platform-card p,
:root[data-theme="dark"] .theme-band-red .home-tool-panel p,
:root[data-theme="dark"] .theme-band-red .home-tool-panel h3,
:root[data-theme="dark"] .theme-band-red .home-tool-item strong,
:root[data-theme="dark"] .theme-band-red .home-tool-item small,
:root[data-theme="dark"] .theme-band-red .home-platform-type { color: var(--ink-soft); }
:root[data-theme="dark"] .theme-band-red .home-platform-link .btn-text { color: var(--brass-2); border-color: var(--brass); }
:root[data-theme="dark"] .theme-band-red .home-ai-feature {
  border-color: rgba(255, 255, 255, .14);
  border-left-color: var(--brass);
  background: linear-gradient(125deg, #101010, #27090F 58%, #6F0A1D);
}
:root[data-theme="dark"] .theme-band-red .home-ai-feature h2,
:root[data-theme="dark"] .theme-band-red .home-ai-feature p,
:root[data-theme="dark"] .theme-band-red .testimonial-placeholder p,
:root[data-theme="dark"] .theme-band-red .faq-item summary,
:root[data-theme="dark"] .theme-band-red .faq-item p { color: var(--ink); }
:root[data-theme="dark"] .theme-band-red .testimonial-placeholder,
:root[data-theme="dark"] .theme-band-red .faq-item {
  color: var(--ink);
  border-color: var(--rule);
  background: linear-gradient(130deg, #151515, #210A0F);
}
:root[data-theme="dark"] .theme-band-red .btn-primary,
:root[data-theme="dark"] .theme-band-red .section-link .btn-primary,
:root[data-theme="dark"] .theme-band-red .home-ai-feature .btn-primary {
  border-color: var(--brass);
  background: linear-gradient(110deg, #9C0B25, #D91635);
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}
:root[data-theme="dark"] .theme-band-red .btn-outline {
  border-color: var(--brass-2);
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  background: rgba(255, 255, 255, .035);
}
:root[data-theme="dark"] .journey-card,
:root[data-theme="dark"] .home-platform-card,
:root[data-theme="dark"] .path-card,
:root[data-theme="dark"] .vision-card,
:root[data-theme="dark"] .feature-card,
:root[data-theme="dark"] .case-row,
:root[data-theme="dark"] .post-cta,
:root[data-theme="dark"] .ai-stat-card,
:root[data-theme="dark"] .ai-toc,
:root[data-theme="dark"] .ai-faq-list details {
  color: var(--ink);
  border-color: var(--rule);
  border-top-color: var(--brass);
  background: linear-gradient(140deg, #141414, #101010 72%, #21090E);
}
:root[data-theme="dark"] .platform-amazon,
:root[data-theme="dark"] .platform-shopify,
:root[data-theme="dark"] .platform-woocommerce,
:root[data-theme="dark"] .platform-flipkart,
:root[data-theme="dark"] .platform-blinkit { color: #FFFFFF; }
:root[data-theme="dark"] .tool-meta { color: #FFFFFF; background: #202020; }
:root[data-theme="dark"] .tool-whatsapp { color: #FFFFFF; background: #202020; }
:root[data-theme="dark"] .tool-google { color: #FFFFFF; background: #202020; }
:root[data-theme="dark"] .cta-band {
  color: var(--ink);
  border-color: var(--brass);
  background: linear-gradient(125deg, #101010, #1B1113 62%, #3E0B15);
}
:root[data-theme="dark"] .cta-band h2,
:root[data-theme="dark"] .cta-band p,
:root[data-theme="dark"] .cta-band .cta-intents-label,
:root[data-theme="dark"] .cta-band .cta-intent { color: var(--ink); }
:root[data-theme="dark"] .cta-band .btn-outline {
  border-color: var(--brass-2);
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .cta-band .btn-primary,
:root[data-theme="dark"] .post-body a.btn-primary {
  border-color: var(--brass);
  background: linear-gradient(110deg, #9C0B25, #D91635);
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}
:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .cta-band .btn-primary:hover {
  border-color: var(--brass-2);
  background: linear-gradient(110deg, #B70E2A, #E92643);
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}
:root[data-theme="dark"] .btn-outline {
  border-color: var(--brass-2);
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  background: transparent;
}
:root[data-theme="dark"] .btn-outline:hover { background: rgba(242, 29, 59, .15); }
:root[data-theme="dark"] .sai-launcher {
  color: #FFFFFF;
  border-color: var(--brass);
  background: linear-gradient(145deg, #9C0B25, #E21A3A);
}
:root[data-theme="dark"] .home-ai-feature {
  border-color: rgba(255, 255, 255, .14);
  border-left-color: var(--brass);
  background: linear-gradient(125deg, #101010, #27090F 58%, #6F0A1D);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-nav { background: rgba(8, 8, 8, .94); border-color: var(--brass); }
  :root:not([data-theme="light"]) .has-scrolled .site-nav { background: rgba(8, 8, 8, .97); }
  :root:not([data-theme="light"]) .home-hero {
    background-color: var(--bg);
    background-image:
      radial-gradient(ellipse at 82% 35%, rgba(143, 9, 31, .3), transparent 52%),
      linear-gradient(90deg, transparent calc(100% - 1px), rgba(255, 255, 255, .035) 100%),
      linear-gradient(transparent calc(100% - 1px), rgba(255, 255, 255, .035) 100%);
    background-size: auto, 56px 56px, 56px 56px;
  }
  :root:not([data-theme="light"]) .home-hero .home-hero-copy h1,
  :root:not([data-theme="light"]) .home-hero .home-hero-copy h1 em { color: #FFFFFF; }
  :root:not([data-theme="light"]) .theme-band-red,
  :root:not([data-theme="light"]) .theme-band-paper {
    color: var(--ink);
    background: linear-gradient(135deg, #080808 0%, #111111 68%, #26090E 100%);
    border-color: var(--rule);
  }
  :root:not([data-theme="light"]) .home-platforms-section.theme-band-red {
    background: linear-gradient(135deg, #080808 0%, #111111 68%, #26090E 100%);
  }
  :root:not([data-theme="light"]) .theme-band-red h1,
  :root:not([data-theme="light"]) .theme-band-red h2,
  :root:not([data-theme="light"]) .theme-band-red h3,
  :root:not([data-theme="light"]) .theme-band-red h4,
  :root:not([data-theme="light"]) .theme-band-red p,
  :root:not([data-theme="light"]) .theme-band-red .folio,
  :root:not([data-theme="light"]) .theme-band-red .kicker,
  :root:not([data-theme="light"]) .theme-band-paper h1,
  :root:not([data-theme="light"]) .theme-band-paper h2,
  :root:not([data-theme="light"]) .theme-band-paper h3,
  :root:not([data-theme="light"]) .theme-band-paper h4,
  :root:not([data-theme="light"]) .theme-band-paper p,
  :root:not([data-theme="light"]) .theme-band-paper .folio,
  :root:not([data-theme="light"]) .theme-band-paper .kicker { color: var(--ink); }
  :root:not([data-theme="light"]) .theme-band-red .home-platform-card,
  :root:not([data-theme="light"]) .theme-band-red .home-tool-panel,
  :root:not([data-theme="light"]) .journey-card,
  :root:not([data-theme="light"]) .home-platform-card,
  :root:not([data-theme="light"]) .path-card,
  :root:not([data-theme="light"]) .vision-card,
  :root:not([data-theme="light"]) .feature-card,
  :root:not([data-theme="light"]) .case-row,
  :root:not([data-theme="light"]) .post-cta,
  :root:not([data-theme="light"]) .ai-stat-card,
  :root:not([data-theme="light"]) .ai-toc,
  :root:not([data-theme="light"]) .ai-faq-list details {
    color: var(--ink);
    border-color: var(--rule);
    background: linear-gradient(140deg, #141414, #101010 72%, #21090E);
  }
  :root:not([data-theme="light"]) .theme-band-red .home-platform-card p,
  :root:not([data-theme="light"]) .theme-band-red .home-tool-panel p,
  :root:not([data-theme="light"]) .theme-band-red .home-tool-panel h3,
  :root:not([data-theme="light"]) .theme-band-red .home-tool-item strong,
  :root:not([data-theme="light"]) .theme-band-red .home-tool-item small,
  :root:not([data-theme="light"]) .theme-band-red .home-platform-type { color: var(--ink-soft); }
  :root:not([data-theme="light"]) .theme-band-red .home-ai-feature,
  :root:not([data-theme="light"]) .home-ai-feature {
    border-color: rgba(255, 255, 255, .14);
    border-left-color: var(--brass);
    background: linear-gradient(125deg, #101010, #27090F 58%, #6F0A1D);
  }
  :root:not([data-theme="light"]) .theme-band-red .home-ai-feature h2,
  :root:not([data-theme="light"]) .theme-band-red .home-ai-feature p { color: var(--ink); }
  :root:not([data-theme="light"]) .theme-band-red .testimonial-placeholder,
  :root:not([data-theme="light"]) .theme-band-red .faq-item {
    color: var(--ink);
    border-color: var(--rule);
    background: linear-gradient(130deg, #151515, #210A0F);
  }
  :root:not([data-theme="light"]) .theme-band-red .faq-item summary,
  :root:not([data-theme="light"]) .theme-band-red .faq-item p { color: var(--ink); }
  :root:not([data-theme="light"]) .cta-band {
    color: var(--ink);
    border-color: var(--brass);
    background: linear-gradient(125deg, #101010, #1B1113 62%, #3E0B15);
  }
  :root:not([data-theme="light"]) .cta-band h2,
  :root:not([data-theme="light"]) .cta-band p,
  :root:not([data-theme="light"]) .cta-band .cta-intents-label,
  :root:not([data-theme="light"]) .cta-band .cta-intent { color: var(--ink); }
  :root:not([data-theme="light"]) .btn-primary,
  :root:not([data-theme="light"]) .cta-band .btn-primary,
  :root:not([data-theme="light"]) .post-body a.btn-primary,
  :root:not([data-theme="light"]) .theme-band-red .btn-primary,
  :root:not([data-theme="light"]) .theme-band-red .section-link .btn-primary,
  :root:not([data-theme="light"]) .theme-band-red .home-ai-feature .btn-primary {
    border-color: var(--brass);
    background: linear-gradient(110deg, #9C0B25, #D91635);
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
  }
  :root:not([data-theme="light"]) .btn-outline,
  :root:not([data-theme="light"]) .cta-band .btn-outline,
  :root:not([data-theme="light"]) .theme-band-red .btn-outline {
    border-color: var(--brass-2);
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    background: transparent;
  }
  :root:not([data-theme="light"]) .platform-amazon,
  :root:not([data-theme="light"]) .platform-shopify,
  :root:not([data-theme="light"]) .platform-woocommerce,
  :root:not([data-theme="light"]) .platform-flipkart,
  :root:not([data-theme="light"]) .platform-blinkit { color: #FFFFFF; }
  :root:not([data-theme="light"]) .tool-meta,
  :root:not([data-theme="light"]) .tool-whatsapp,
  :root:not([data-theme="light"]) .tool-google { color: #FFFFFF; background: #202020; }
  :root:not([data-theme="light"]) .sai-launcher {
    color: #FFFFFF;
    border-color: var(--brass);
    background: linear-gradient(145deg, #9C0B25, #E21A3A);
  }
}

.home-ai-visual {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
}
.home-ai-feature::after { content: none; }
.xai-panel {
  position: relative;
  z-index: 2;
  width: min(100%, 470px);
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .76);
  background: #FFFFFF;
  color: #321018;
  box-shadow: 0 20px 46px rgba(67, 0, 14, .25);
}
.xai-panel-header {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
  padding: 14px 16px;
  background: #570817;
  color: #FFFFFF;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
}
.xai-window-dots { display: inline-flex; flex: 0 0 auto; gap: 5px; }
.xai-window-dots i { width: 8px; height: 8px; border-radius: 50%; background: #FF9AA7; }
.xai-window-dots i:nth-child(2) { background: #FFCF9F; }
.xai-window-dots i:nth-child(3) { background: #FFFFFF; }
.xai-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-left: auto;
  color: #FFE1E6;
  font-size: .55rem;
  letter-spacing: .08em;
  white-space: nowrap;
}
.xai-live-indicator i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #FF6978; }
.xai-panel-body { min-width: 0; padding: 17px clamp(13px, 2.4vw, 22px) 15px; }
.xai-example-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 0 0 11px;
  color: #79091F;
  font-size: .59rem;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
}
.xai-example-label span {
  color: #70464D;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
}
.xai-step-list {
  position: relative;
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 2px 0;
}
.xai-step-list::before {
  position: absolute;
  z-index: 0;
  top: 24px;
  bottom: 24px;
  left: 29px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, rgba(164, 13, 39, .48) 0 4px, transparent 4px 8px);
  content: "";
  pointer-events: none;
}
.xai-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 47px;
  padding: 5px 10px;
  border: 1px solid #EAD7DA;
  border-radius: 2px;
  background: #FFFFFF;
  color: #321018;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.xai-step:hover { transform: translateX(2px); border-color: #D91635; }
.xai-step:focus-visible { z-index: 2; outline: 3px solid #A40D27; outline-offset: 2px; }
.xai-step.is-active {
  border-color: #A40D27;
  background: #FFF0F2;
  box-shadow: inset 3px 0 #A40D27;
}
.xai-step-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #D9A5AE;
  border-radius: 2px;
  background: #FFFFFF;
  color: #79091F;
  font-size: .58rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.xai-step.is-active .xai-step-number { border-color: #A40D27; background: #A40D27; color: #FFFFFF; }
.xai-step-name {
  min-width: 0;
  color: inherit;
  font-size: .67rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.xai-step-arrow { color: #A40D27; font-size: .84rem; text-align: right; transition: transform .2s ease; }
.xai-step.is-active .xai-step-arrow { transform: translate(2px, -2px); }
.xai-benefit {
  min-width: 0;
  min-height: 97px;
  margin-top: 12px;
  padding: 12px 13px;
  border-left: 3px solid #D91635;
  background: #FFF0F2;
}
.xai-benefit-kicker {
  display: block;
  margin-bottom: 4px;
  color: #79091F;
  font-size: .53rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.xai-benefit h3 {
  margin: 0 0 4px;
  color: #321018;
  font-size: .79rem;
  line-height: 1.35;
}
.xai-benefit p {
  max-width: none;
  margin: 0;
  color: #54232C;
  font-size: .66rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.home-ai-feature .xai-benefit p { color: #54232C; }
.xai-disclaimer {
  max-width: none;
  margin: 10px 0 0;
  color: #70464D;
  font-size: .54rem;
  line-height: 1.45;
}
.theme-band-red .home-ai-feature .xai-example-label { color: #79091F; }
.theme-band-red .home-ai-feature .xai-disclaimer { color: #70464D; }

:root[data-theme="dark"] .xai-panel {
  border-color: rgba(255, 255, 255, .2);
  background: linear-gradient(145deg, #151515, #0E0E0E 70%, #26090E);
  color: #F7F7F7;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .48);
}
:root[data-theme="dark"] .xai-panel-header { background: #050505; color: #FFFFFF; }
:root[data-theme="dark"] .xai-live-indicator { color: #FFD9DE; }
:root[data-theme="dark"] .xai-live-indicator i { background: #FF4058; }
:root[data-theme="dark"] .xai-example-label,
:root[data-theme="dark"] .xai-benefit-kicker { color: #FF6978; }
:root[data-theme="dark"] .theme-band-red .home-ai-feature .xai-example-label { color: #FF6978; }
:root[data-theme="dark"] .xai-example-label span,
:root[data-theme="dark"] .xai-disclaimer { color: #D3D3D3; }
:root[data-theme="dark"] .xai-step-list::before { background: repeating-linear-gradient(to bottom, rgba(255, 105, 120, .72) 0 4px, transparent 4px 8px); }
:root[data-theme="dark"] .xai-step {
  border-color: rgba(255, 255, 255, .18);
  background: #151515;
  color: #F7F7F7;
}
:root[data-theme="dark"] .xai-step:hover,
:root[data-theme="dark"] .xai-step.is-active { border-color: #FF4058; }
:root[data-theme="dark"] .xai-step.is-active {
  background: linear-gradient(100deg, rgba(156, 11, 37, .36), rgba(32, 13, 16, .9));
  box-shadow: inset 3px 0 #FF4058;
}
:root[data-theme="dark"] .xai-step-number {
  border-color: rgba(255, 105, 120, .6);
  background: #101010;
  color: #FF9AA7;
}
:root[data-theme="dark"] .xai-step.is-active .xai-step-number {
  border-color: #D91635;
  background: linear-gradient(135deg, #9C0B25, #D91635);
  color: #FFFFFF;
}
:root[data-theme="dark"] .xai-step-arrow { color: #FF6978; }
:root[data-theme="dark"] .xai-step:focus-visible { outline-color: #FF6978; }
:root[data-theme="dark"] .xai-benefit {
  border-left-color: #FF4058;
  background: linear-gradient(115deg, rgba(156, 11, 37, .22), rgba(28, 17, 19, .9));
}
:root[data-theme="dark"] .xai-benefit h3 { color: #FFFFFF; }
:root[data-theme="dark"] .xai-benefit p { color: #E2E2E2; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .xai-panel {
    border-color: rgba(255, 255, 255, .2);
    background: linear-gradient(145deg, #151515, #0E0E0E 70%, #26090E);
    color: #F7F7F7;
    box-shadow: 0 22px 48px rgba(0, 0, 0, .48);
  }
  :root:not([data-theme="light"]) .xai-panel-header { background: #050505; color: #FFFFFF; }
  :root:not([data-theme="light"]) .xai-live-indicator { color: #FFD9DE; }
  :root:not([data-theme="light"]) .xai-live-indicator i { background: #FF4058; }
  :root:not([data-theme="light"]) .xai-example-label,
  :root:not([data-theme="light"]) .xai-benefit-kicker { color: #FF6978; }
  :root:not([data-theme="light"]) .theme-band-red .home-ai-feature .xai-example-label { color: #FF6978; }
  :root:not([data-theme="light"]) .xai-example-label span,
  :root:not([data-theme="light"]) .xai-disclaimer { color: #D3D3D3; }
  :root:not([data-theme="light"]) .xai-step-list::before { background: repeating-linear-gradient(to bottom, rgba(255, 105, 120, .72) 0 4px, transparent 4px 8px); }
  :root:not([data-theme="light"]) .xai-step {
    border-color: rgba(255, 255, 255, .18);
    background: #151515;
    color: #F7F7F7;
  }
  :root:not([data-theme="light"]) .xai-step:hover,
  :root:not([data-theme="light"]) .xai-step.is-active { border-color: #FF4058; }
  :root:not([data-theme="light"]) .xai-step.is-active {
    background: linear-gradient(100deg, rgba(156, 11, 37, .36), rgba(32, 13, 16, .9));
    box-shadow: inset 3px 0 #FF4058;
  }
  :root:not([data-theme="light"]) .xai-step-number {
    border-color: rgba(255, 105, 120, .6);
    background: #101010;
    color: #FF9AA7;
  }
  :root:not([data-theme="light"]) .xai-step.is-active .xai-step-number {
    border-color: #D91635;
    background: linear-gradient(135deg, #9C0B25, #D91635);
    color: #FFFFFF;
  }
  :root:not([data-theme="light"]) .xai-step-arrow { color: #FF6978; }
  :root:not([data-theme="light"]) .xai-step:focus-visible { outline-color: #FF6978; }
  :root:not([data-theme="light"]) .xai-benefit {
    border-left-color: #FF4058;
    background: linear-gradient(115deg, rgba(156, 11, 37, .22), rgba(28, 17, 19, .9));
  }
  :root:not([data-theme="light"]) .xai-benefit h3 { color: #FFFFFF; }
  :root:not([data-theme="light"]) .xai-benefit p { color: #E2E2E2; }
}

@media (max-width: 700px) {
  .home-ai-visual { min-height: 0; }
  .xai-panel { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .xai-step,
  .xai-step-arrow { transition: none; }
}

/* Lumia palette and shared interactive surfaces */
:root {
  color-scheme: light;
  --bg: #FFF7F5;
  --surface: #FFFCFB;
  --surface-2: #F7E8E8;
  --ink: #321018;
  --ink-soft: #5D3C44;
  --ink-faint: #775A62;
  --brass: #C91635;
  --brass-2: #F0445C;
  --brass-deep: #A40D27;
  --brass-tint: #FBE2E7;
  --forest: #8F1730;
  --forest-2: #D5324E;
  --forest-tint: #F5DCE1;
  --rule: rgba(91, 13, 30, .18);
  --rule-soft: rgba(91, 13, 30, .1);
  --shadow: 0 2px 6px rgba(80, 14, 30, .05), 0 16px 38px rgba(80, 14, 30, .1);
  --glow-brass: 0 0 0 1px rgba(201, 22, 53, .2), 0 18px 42px rgba(201, 22, 53, .18);
  --red-900: #4B0818;
  --red-800: #79091F;
  --red-700: #A40D27;
  --red-500: #D91635;
  --red-300: #FF7185;
  --section-tint: #F8E9E9;
  --section-paper: #FFF9F7;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #090909;
    --surface: #151213;
    --surface-2: #211619;
    --ink: #FAF4F4;
    --ink-soft: #D2C4C7;
    --ink-faint: #B5A3A8;
    --brass: #FF536D;
    --brass-2: #FF8192;
    --brass-deep: #FF7185;
    --brass-tint: rgba(255, 67, 94, .16);
    --forest: #FF7185;
    --forest-2: #FF9AA7;
    --forest-tint: rgba(255, 67, 94, .13);
    --rule: rgba(255, 245, 246, .17);
    --rule-soft: rgba(255, 245, 246, .1);
    --shadow: 0 2px 8px rgba(0, 0, 0, .35), 0 20px 46px rgba(0, 0, 0, .4);
    --glow-brass: 0 0 0 1px rgba(255, 83, 109, .24), 0 18px 42px rgba(0, 0, 0, .35);
    --red-900: #070707;
    --red-800: #211014;
    --red-700: #A40D27;
    --red-500: #FF536D;
    --red-300: #FF9AA7;
    --section-tint: #151113;
    --section-paper: #0D0C0D;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #FFF7F5;
  --surface: #FFFCFB;
  --surface-2: #F7E8E8;
  --ink: #321018;
  --ink-soft: #5D3C44;
  --ink-faint: #775A62;
  --brass: #C91635;
  --brass-2: #F0445C;
  --brass-deep: #A40D27;
  --brass-tint: #FBE2E7;
  --forest: #8F1730;
  --forest-2: #D5324E;
  --forest-tint: #F5DCE1;
  --rule: rgba(91, 13, 30, .18);
  --rule-soft: rgba(91, 13, 30, .1);
  --shadow: 0 2px 6px rgba(80, 14, 30, .05), 0 16px 38px rgba(80, 14, 30, .1);
  --glow-brass: 0 0 0 1px rgba(201, 22, 53, .2), 0 18px 42px rgba(201, 22, 53, .18);
  --red-900: #4B0818;
  --red-800: #79091F;
  --red-700: #A40D27;
  --red-500: #D91635;
  --red-300: #FF7185;
  --section-tint: #F8E9E9;
  --section-paper: #FFF9F7;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #090909;
  --surface: #151213;
  --surface-2: #211619;
  --ink: #FAF4F4;
  --ink-soft: #D2C4C7;
  --ink-faint: #B5A3A8;
  --brass: #FF536D;
  --brass-2: #FF8192;
  --brass-deep: #FF7185;
  --brass-tint: rgba(255, 67, 94, .16);
  --forest: #FF7185;
  --forest-2: #FF9AA7;
  --forest-tint: rgba(255, 67, 94, .13);
  --rule: rgba(255, 245, 246, .17);
  --rule-soft: rgba(255, 245, 246, .1);
  --shadow: 0 2px 8px rgba(0, 0, 0, .35), 0 20px 46px rgba(0, 0, 0, .4);
  --glow-brass: 0 0 0 1px rgba(255, 83, 109, .24), 0 18px 42px rgba(0, 0, 0, .35);
  --red-900: #070707;
  --red-800: #211014;
  --red-700: #A40D27;
  --red-500: #FF536D;
  --red-300: #FF9AA7;
  --section-tint: #151113;
  --section-paper: #0D0C0D;
}

html { background: var(--bg); }
body {
  background-color: var(--bg);
  background-image: radial-gradient(ellipse at 92% 8%, color-mix(in srgb, var(--brass-tint) 48%, transparent), transparent 34rem);
  color: var(--ink);
}
::selection { background: var(--brass); color: #fff; }

.site-nav {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-bottom-color: color-mix(in srgb, var(--brass) 22%, var(--rule));
}
.has-scrolled .site-nav {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 12px 30px rgba(59, 9, 21, .14);
}
.nav-links > a:not(.btn) {
  border-radius: 6px;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.nav-links > a:not(.btn):hover,
.nav-links > a:not(.btn):focus-visible {
  color: var(--brass-deep);
  background: var(--brass-tint);
}
.theme-toggle {
  border-color: var(--rule);
  background: var(--surface);
  color: var(--ink);
}
.theme-toggle:hover { border-color: var(--brass); color: var(--brass-deep); }
.scroll-progress {
  background: linear-gradient(90deg, var(--brass), var(--brass-2), #FFB1BA);
  box-shadow: 0 0 14px color-mix(in srgb, var(--brass) 48%, transparent);
}

header.hero:not(.home-hero) {
  background:
    radial-gradient(ellipse at 82% 52%, rgba(255, 105, 127, .3), transparent 34%),
    linear-gradient(122deg, #79091F 0%, #C91635 57%, #A40D27 100%);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
header.hero:not(.home-hero)::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .14;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(120deg, transparent 10%, #000 100%);
}
header.hero:not(.home-hero) h1,
header.hero:not(.home-hero) h2,
header.hero:not(.home-hero) .kicker,
header.hero:not(.home-hero) .lede,
header.hero:not(.home-hero) p { color: #fff; }
header.hero:not(.home-hero) h1 em { color: #FFD6DC; }
header.hero:not(.home-hero) .btn-primary {
  background: #fff;
  border-color: #fff;
  color: var(--red-800);
  -webkit-text-fill-color: var(--red-800);
}
header.hero:not(.home-hero) .btn-primary:hover { background: #FFE8EC; }
header.hero:not(.home-hero) .btn-outline {
  border-color: rgba(255, 255, 255, .68);
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: rgba(255, 255, 255, .08);
}
header.hero:not(.home-hero) .btn-outline:hover { background: rgba(255, 255, 255, .18); }

.theme-band-red {
  background: linear-gradient(116deg, #79091F 0%, #C91635 56%, #A40D27 100%);
  color: #fff;
}
.theme-band-red h1,
.theme-band-red h2,
.theme-band-red h3,
.theme-band-red h4,
.theme-band-red p,
.theme-band-red .folio,
.theme-band-red .kicker { color: #fff; }
.theme-band-red .btn-primary,
.theme-band-red .section-link .btn-primary,
.theme-band-red .home-ai-feature .btn-primary {
  background: #fff;
  border-color: #fff;
  color: var(--red-800);
  -webkit-text-fill-color: var(--red-800);
}
.theme-band-red .btn-primary:hover,
.theme-band-red .section-link .btn-primary:hover { background: #FFE8EC; }
.theme-band-red .btn-outline {
  color: #fff;
  -webkit-text-fill-color: #fff;
  border-color: rgba(255,255,255,.68);
}
.theme-band-red .btn-outline:hover { background: rgba(255,255,255,.14); }
.theme-band-paper {
  background: linear-gradient(135deg, var(--section-paper), var(--section-tint));
  color: var(--ink);
}
.theme-band-paper h1,
.theme-band-paper h2,
.theme-band-paper h3,
.theme-band-paper h4 { color: var(--red-900); }
.theme-band-paper p,
.theme-band-paper .lede { color: var(--ink-soft); }
.theme-band-paper .folio,
.theme-band-paper .kicker { color: var(--red-800); }
main > .section.section-rule:not(.theme-band-red):not(.theme-band-paper):nth-of-type(odd) {
  background: linear-gradient(130deg, var(--section-tint), var(--section-paper));
}
main > .section.section-rule:not(.theme-band-red):not(.theme-band-paper):nth-of-type(even) {
  background: linear-gradient(140deg, var(--section-paper), var(--surface-2));
}

.btn {
  border-radius: 7px;
  transition: transform .2s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: linear-gradient(120deg, var(--brass-deep), var(--brass));
  border-color: transparent;
  color: #fff;
  -webkit-text-fill-color: #fff;
  box-shadow: 0 9px 24px color-mix(in srgb, var(--brass) 25%, transparent);
}
.btn-primary:hover {
  color: #fff;
  -webkit-text-fill-color: #fff;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--brass) 34%, transparent);
}
.btn-outline { border-color: var(--brass); color: var(--red-800); }
.btn-outline:hover { border-color: var(--brass); background: var(--brass-tint); }
.btn-text, .post-body a { color: var(--red-800); }
.btn-text:hover, .post-body a:hover { color: var(--brass); }
.tag.brass, .tag.forest {
  color: var(--red-800);
  background: var(--brass-tint);
  border-color: color-mix(in srgb, var(--brass) 25%, transparent);
}
.feature-icon-brass, .feature-icon-forest, .plate-brass, .plate-forest {
  color: var(--red-800);
  background: linear-gradient(135deg, var(--brass-tint), var(--section-paper));
}

.feature-card,
.path-card,
.vision-card,
.journey-card,
.home-platform-card,
.home-tool-panel,
.case-row,
.process-panel,
.blog-featured,
.post-cta,
.testimonial-placeholder {
  border-color: var(--rule);
  background: color-mix(in srgb, var(--surface) 92%, var(--brass-tint));
  box-shadow: var(--shadow);
}
.feature-card,
.path-card,
.vision-card,
.journey-card,
.home-platform-card,
.case-row,
.blog-featured,
.post-cta,
.process-tab,
.impact-tab,
.faq-item {
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.feature-card:hover,
.path-card:hover,
.vision-card:hover,
.journey-card:hover,
.home-platform-card:hover,
.case-row:hover,
.blog-featured:hover,
.post-cta:hover {
  border-color: color-mix(in srgb, var(--brass) 54%, var(--rule));
  box-shadow: 0 18px 42px color-mix(in srgb, var(--brass) 15%, transparent);
}

.home-ai-feature::before { background-image: none; }

.hero-system-layout { width: min(100%, 560px); }
.system-phone-stage { width: 100%; }
.system-video-guide,
.system-player > .system-phone-side-button,
.system-player > .system-phone-island,
.system-player > .system-phone-status,
.system-player > .system-phone-audio-status,
.system-player > .system-phone-home-indicator { display: none; }
.system-player {
  width: min(100%, 360px);
  margin-inline: auto;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--brass) 25%, var(--rule));
  border-radius: 20px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--surface-2) 94%, transparent));
  box-shadow: 0 26px 62px rgba(0,0,0,.24), 0 0 42px color-mix(in srgb, var(--brass) 13%, transparent), inset 0 1px 0 rgba(255,255,255,.62);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.system-player-heading { padding: 0 3px 11px; }
.system-player-heading strong { font-size: .68rem; letter-spacing: .1em; }
.system-player-heading small { font-size: .72rem; }
.system-autoplay { color: var(--brass-deep); font-size: .64rem; letter-spacing: .08em; }
.system-autoplay i { background: var(--brass); box-shadow: 0 0 10px color-mix(in srgb, var(--brass) 70%, transparent); }
.system-player-screen,
.hero-system-layout .system-player-screen,
.system-video-module-page .system-player-screen {
  width: 100%;
  aspect-ratio: 9 / 16;
  min-height: 0;
  margin: 0;
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(242,29,59,.22), transparent 54%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 1px, transparent 1px 24px),
    linear-gradient(145deg, #211116, #09090B 72%);
}
.system-video { object-fit: cover; }
.system-video-placeholder {
  pointer-events: none;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 1px, transparent 1px 24px),
    radial-gradient(ellipse at 50% 42%, rgba(242,29,59,.2), transparent 58%);
}
.system-placeholder-kicker { color: #FF9B88; }
.system-placeholder-orbit { border-color: rgba(255,113,92,.35); box-shadow: 0 0 36px rgba(255,113,92,.12), inset 0 0 36px rgba(255,255,255,.04); }
.system-placeholder-orbit::before,
.system-placeholder-orbit::after { border-color: rgba(255,255,255,.14); }
.system-player-screen::before { opacity: .16; }
.system-video-controls {
  position: absolute;
  z-index: 4;
  inset: auto 0 0;
  padding: 34px 14px 12px;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(8,8,10,.74) 32%, rgba(8,8,10,.94));
}
.system-player-seek {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  color: rgba(255,255,255,.88);
  font-variant-numeric: tabular-nums;
  font-size: .65rem;
}
.system-player-seek input {
  width: 100%;
  height: 18px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  accent-color: #FF5268;
}
.system-player-seek input::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 5px;
  background: linear-gradient(to right, #FF5268 var(--seek-progress, 0%), rgba(255,255,255,.36) var(--seek-progress, 0%));
}
.system-player-seek input::-moz-range-track { height: 4px; border-radius: 5px; background: rgba(255,255,255,.36); }
.system-player-seek input::-moz-range-progress { height: 4px; border-radius: 5px; background: #FF5268; }
.system-player-seek input::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -4px;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #F21D3B;
  box-shadow: 0 0 0 3px rgba(242,29,59,.28);
}
.system-player-seek input::-moz-range-thumb { width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #F21D3B; box-shadow: 0 0 0 3px rgba(242,29,59,.28); }
.system-player-seek input:disabled { cursor: not-allowed; opacity: .5; }
.system-player-seek input:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }
.system-player-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 5px; }
.system-player-transport { display: inline-flex; align-items: center; gap: 7px; }
.system-player-actions button {
  position: static;
  z-index: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  color: #fff;
  background: rgba(20,18,20,.78);
  box-shadow: none;
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font: inherit;
  font-size: .68rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.system-player-actions button:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.65); background: rgba(242,29,59,.88); }
.system-player-actions button[hidden] { display: none; }
.system-player-actions button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.system-player-actions .system-skip-toggle { min-width: 40px; padding: 0 8px; }
.system-player-actions .system-play-toggle { width: 36px; min-height: 36px; padding: 0; }
.system-player-actions .system-play-toggle svg,
.system-player-actions .system-mute-toggle svg,
.system-player-actions .system-fullscreen-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.system-player-actions .system-play-toggle .system-play-icon { fill: currentColor; stroke: none; }
.system-player-actions .system-play-toggle .system-play-icon,
.system-player-actions .system-play-toggle.is-paused .system-pause-icon { display: none; }
.system-player-actions .system-play-toggle.is-paused .system-play-icon { display: block; }
.system-player-actions .system-mute-toggle { gap: 7px; min-height: 34px; padding: 0 10px; }
.system-player-actions .system-fullscreen-toggle { width: 34px; min-width: 34px; padding: 0; }
.system-player-actions .system-audio-on,
.system-player-actions .system-mute-toggle.is-unmuted .system-audio-muted { display: none; }
.system-player-actions .system-mute-toggle.is-unmuted .system-audio-on { display: block; }
.system-player-screen.is-playing:not(.is-controls-visible) .system-mute-toggle,
.system-player-screen.is-playing:not(.is-controls-visible) .system-play-toggle { opacity: 1; pointer-events: auto; }
.system-phone-caption { max-width: none; min-height: 0; margin: 10px 3px 0; font-size: .7rem; text-align: left; }
.system-player.is-fullscreen { width: min(100vw, 1280px); max-width: none; border: 0; border-radius: 0; }
.system-player:fullscreen { width: min(100vw, 520px); max-width: none; border: 0; border-radius: 0; background: #09090B; }
.system-player:fullscreen .system-player-screen { border: 0; border-radius: 0; }

@media (max-width: 560px) {
  .system-player { padding: 9px; border-radius: 15px; }
  .system-player-heading { padding: 0 2px 8px; }
  .system-player-heading strong { font-size: .58rem; }
  .system-player-heading small { font-size: .62rem; }
  .system-video-controls { padding: 27px 9px 8px; }
  .system-player-seek { gap: 6px; font-size: .58rem; }
  .system-player-actions { gap: 7px; }
  .system-player-transport { gap: 5px; }
  .system-player-actions button { min-height: 31px; }
  .system-player-actions .system-play-toggle { width: 33px; min-height: 33px; }
  .system-player-actions .system-skip-toggle { min-width: 35px; padding: 0 6px; }
  .system-player-actions .system-mute-toggle { width: 34px; min-width: 34px; padding: 0; }
  .system-player-actions .system-mute-toggle [data-mute-label] { display: none; }
  .system-player-actions .system-fullscreen-toggle { width: 32px; min-width: 32px; }
  .system-phone-caption { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .system-player-actions button { transition: none; }
}
.feature-card:hover h3,
.path-card:hover h3,
.vision-card:hover h3,
.journey-card:hover h3 { color: var(--red-800); }
.feature-card:focus-within,
.path-card:focus-within,
.vision-card:focus-within,
.journey-card:focus-within,
.case-row:focus-within { border-color: var(--brass); }
.faq-item {
  border: 1px solid var(--rule);
  border-radius: 10px;
  margin: 10px 0;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--surface) 94%, var(--brass-tint));
}
.faq-item:hover,
.faq-item[open] { border-color: var(--brass); box-shadow: var(--shadow); }
.faq-item summary { color: var(--ink); }
.faq-item[open] summary { color: var(--red-800); }
.site-footer {
  border-top: 1px solid color-mix(in srgb, var(--brass) 35%, transparent);
  background: #4B0818;
  color: #FFF7F5;
}
.site-footer .footer-row,
.site-footer .footer-row a { color: rgba(255, 247, 245, .82); }
.site-footer .footer-row a:hover { color: #fff; }

/* Connected, keyboard-accessible customer journey explorer */
.impact-explorer {
  margin-top: 30px;
  border: 1px solid color-mix(in srgb, var(--brass) 35%, var(--rule));
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--brass-tint) 75%, transparent), transparent 44%),
    color-mix(in srgb, var(--surface) 96%, var(--brass-tint));
  box-shadow: 0 20px 54px rgba(66, 9, 24, .18);
  overflow: hidden;
}
.impact-map {
  position: relative;
  min-width: 0;
  padding: 22px clamp(16px, 3.8vw, 40px) 20px;
}
.impact-map-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink-faint);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.impact-map-label > span:first-child { display: flex; align-items: center; gap: 9px; color: var(--red-800); }
.impact-map-label i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 4px var(--brass-tint);
}
.impact-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(76px, auto));
  gap: 76px 24px;
  margin-top: 18px;
}
.impact-routes {
  position: absolute;
  z-index: 0;
  top: 38px;
  left: 18px;
  width: calc(100% - 36px);
  height: 228px;
  overflow: visible;
  pointer-events: none;
}
.impact-routes path {
  fill: none;
  stroke: color-mix(in srgb, var(--brass) 48%, transparent);
  stroke-width: 1.7;
  stroke-dasharray: 4 8;
}
.impact-routes circle { fill: var(--brass); opacity: .65; }
.impact-explorer.visible .impact-routes path { animation: impact-dash 14s linear infinite; }
.impact-explorer.visible .impact-routes path:nth-child(2) { animation-delay: -7s; }
@keyframes impact-dash { to { stroke-dashoffset: -120; } }
.impact-tab {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 76px;
  padding: 14px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(63, 8, 24, .09);
}
.impact-tab:hover,
.impact-tab:focus-visible,
.impact-tab.is-active {
  border-color: var(--brass);
  background: color-mix(in srgb, var(--surface) 86%, var(--brass-tint));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--brass) 18%, transparent), 0 0 0 2px color-mix(in srgb, var(--brass) 12%, transparent);
  transform: translateY(-3px);
}
.impact-tab-number {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: var(--brass-tint);
  color: var(--red-800);
  font-size: .75rem;
  font-weight: 900;
}
.impact-tab.is-active .impact-tab-number { background: #A40D27; color: #fff; }
.impact-tab strong,
.impact-tab small { display: block; min-width: 0; overflow-wrap: anywhere; }
.impact-tab strong { color: var(--ink); font-size: .88rem; line-height: 1.3; }
.impact-tab small { margin-top: 3px; color: var(--ink-soft); font-size: .7rem; line-height: 1.35; }
.impact-tab-arrow { color: var(--brass); font-size: 1rem; text-align: right; transition: transform .2s ease; }
.impact-tab:hover .impact-tab-arrow,
.impact-tab.is-active .impact-tab-arrow { transform: translate(2px, -2px); }
.impact-brand {
  position: absolute;
  z-index: 2;
  top: 150px;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 122px;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--brass) 35%, var(--rule));
  border-radius: 7px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(63, 8, 24, .14);
  transform: translateX(-50%);
  pointer-events: none;
}
.impact-brand > span { color: var(--red-800); font-size: 1.02rem; font-weight: 500; letter-spacing: -.05em; }
.impact-brand > span strong { color: var(--brass); font-weight: 900; }
.impact-brand small { margin-top: 2px; color: var(--ink-faint); font-size: .45rem; font-weight: 800; letter-spacing: .1em; }
.impact-explorer.visible .impact-brand { animation: impact-float 4s ease-in-out infinite; }
@keyframes impact-float { 50% { box-shadow: 0 12px 30px rgba(63, 8, 24, .2); } }
.impact-detail {
  position: relative;
  z-index: 1;
  margin: 24px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--brass);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, var(--brass-tint));
  animation: impact-detail-in .28s ease both;
}
.impact-detail-label { color: var(--red-800); font-size: .63rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.impact-detail h3 { margin: 5px 0; color: var(--ink); font-size: 1.02rem; }
.impact-detail p { max-width: 72ch; color: var(--ink-soft); font-size: .85rem; }
@keyframes impact-detail-in { from { opacity: .55; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.impact-disclaimer { margin: 12px 0 0; color: var(--ink-faint); font-size: .66rem; }
.case-template-label { margin-top: 52px; }
.theme-band-red .impact-explorer {
  border-color: rgba(255,255,255,.35);
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.14), transparent 44%),
    rgba(73, 4, 20, .42);
  box-shadow: 0 22px 54px rgba(62, 3, 17, .24);
}
.theme-band-red .impact-map-label,
.theme-band-red .impact-disclaimer { color: rgba(255,255,255,.8); }
.theme-band-red .impact-map-label > span:first-child { color: #fff; }
.theme-band-red .impact-disclaimer { color: rgba(255,255,255,.78); }

:root[data-theme="dark"] .theme-band-red,
:root[data-theme="dark"] header.hero:not(.home-hero) {
  background:
    radial-gradient(ellipse at 78% 52%, rgba(163, 13, 39, .3), transparent 40%),
    linear-gradient(120deg, #080808 0%, #151012 58%, #26090F 100%);
}
:root[data-theme="dark"] .theme-band-paper,
:root[data-theme="dark"] main > .section.section-rule:not(.theme-band-red):not(.theme-band-paper):nth-of-type(odd) {
  background: linear-gradient(135deg, #121011, #1B1215);
}
:root[data-theme="dark"] main > .section.section-rule:not(.theme-band-red):not(.theme-band-paper):nth-of-type(even) {
  background: linear-gradient(145deg, #090909, #151012);
}
:root[data-theme="dark"] .theme-band-paper h1,
:root[data-theme="dark"] .theme-band-paper h2,
:root[data-theme="dark"] .theme-band-paper h3,
:root[data-theme="dark"] .theme-band-paper h4,
:root[data-theme="dark"] .theme-band-paper p,
:root[data-theme="dark"] .theme-band-paper .lede,
:root[data-theme="dark"] .theme-band-paper .folio,
:root[data-theme="dark"] .theme-band-paper .kicker { color: var(--ink); }
:root[data-theme="dark"] .site-footer { background: #050505; }
:root[data-theme="dark"] .impact-explorer {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(150, 18, 42, .2), transparent 46%),
    #111011;
  border-color: rgba(255, 113, 133, .3);
}
:root[data-theme="dark"] .impact-tab {
  background: #171315;
  border-color: rgba(255,255,255,.16);
  color: #FAF4F4;
}
:root[data-theme="dark"] .impact-tab strong,
:root[data-theme="dark"] .impact-detail h3 { color: #FAF4F4; }
:root[data-theme="dark"] .impact-tab small,
:root[data-theme="dark"] .impact-detail p { color: #D2C4C7; }
:root[data-theme="dark"] .impact-brand,
:root[data-theme="dark"] .impact-detail { background: #191315; }
:root[data-theme="dark"] body {
  background-color: #090909;
  background-image: radial-gradient(ellipse at 92% 8%, rgba(255, 67, 94, .08), transparent 34rem);
}
:root[data-theme="dark"] .impact-tab-number {
  border: 1px solid rgba(255, 113, 133, .4);
  background: rgba(255, 83, 109, .16);
  color: #FF9AA7;
}
:root[data-theme="dark"] .impact-tab.is-active .impact-tab-number { background: #A40D27; color: #fff; }
:root[data-theme="dark"] .impact-brand > span,
:root[data-theme="dark"] .impact-detail-label,
:root[data-theme="dark"] .impact-map-label > span:first-child { color: #FF9AA7; }
:root[data-theme="dark"] .impact-brand small,
:root[data-theme="dark"] .impact-map-label,
:root[data-theme="dark"] .impact-disclaimer { color: #C1B2B6; }
:root[data-theme="dark"] header.hero:not(.home-hero) .btn-primary {
  background: #FF536D;
  border-color: #FF536D;
  color: #16090C;
  -webkit-text-fill-color: #16090C;
}
:root[data-theme="dark"] .site-footer .footer-row,
:root[data-theme="dark"] .site-footer .footer-row a { color: #D2C4C7; }
:root[data-theme="dark"] .theme-band-red .impact-explorer { background: rgba(10, 9, 10, .8); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-band-red,
  :root:not([data-theme]) header.hero:not(.home-hero) {
    background:
      radial-gradient(ellipse at 78% 52%, rgba(163, 13, 39, .3), transparent 40%),
      linear-gradient(120deg, #080808 0%, #151012 58%, #26090F 100%);
  }
  :root:not([data-theme]) .theme-band-paper,
  :root:not([data-theme]) main > .section.section-rule:not(.theme-band-red):not(.theme-band-paper):nth-of-type(odd) {
    background: linear-gradient(135deg, #121011, #1B1215);
  }
  :root:not([data-theme]) main > .section.section-rule:not(.theme-band-red):not(.theme-band-paper):nth-of-type(even) {
    background: linear-gradient(145deg, #090909, #151012);
  }
  :root:not([data-theme]) .theme-band-paper h1,
  :root:not([data-theme]) .theme-band-paper h2,
  :root:not([data-theme]) .theme-band-paper h3,
  :root:not([data-theme]) .theme-band-paper h4,
  :root:not([data-theme]) .theme-band-paper p,
  :root:not([data-theme]) .theme-band-paper .lede,
  :root:not([data-theme]) .theme-band-paper .folio,
  :root:not([data-theme]) .theme-band-paper .kicker { color: var(--ink); }
  :root:not([data-theme]) .site-footer { background: #050505; }
  :root:not([data-theme]) .impact-explorer {
    background:
      radial-gradient(ellipse at 50% 42%, rgba(150, 18, 42, .2), transparent 46%),
      #111011;
    border-color: rgba(255, 113, 133, .3);
  }
  :root:not([data-theme]) .impact-tab {
    background: #171315;
    border-color: rgba(255,255,255,.16);
    color: #FAF4F4;
  }
  :root:not([data-theme]) .impact-tab strong,
  :root:not([data-theme]) .impact-detail h3 { color: #FAF4F4; }
  :root:not([data-theme]) .impact-tab small,
  :root:not([data-theme]) .impact-detail p { color: #D2C4C7; }
  :root:not([data-theme]) .impact-brand,
  :root:not([data-theme]) .impact-detail { background: #191315; }
  :root:not([data-theme]) body {
    background-color: #090909;
    background-image: radial-gradient(ellipse at 92% 8%, rgba(255, 67, 94, .08), transparent 34rem);
  }
  :root:not([data-theme]) .impact-tab-number {
    border: 1px solid rgba(255, 113, 133, .4);
    background: rgba(255, 83, 109, .16);
    color: #FF9AA7;
  }
  :root:not([data-theme]) .impact-tab.is-active .impact-tab-number { background: #A40D27; color: #fff; }
  :root:not([data-theme]) .impact-brand > span,
  :root:not([data-theme]) .impact-detail-label,
  :root:not([data-theme]) .impact-map-label > span:first-child { color: #FF9AA7; }
  :root:not([data-theme]) .impact-brand small,
  :root:not([data-theme]) .impact-map-label,
  :root:not([data-theme]) .impact-disclaimer { color: #C1B2B6; }
  :root:not([data-theme]) header.hero:not(.home-hero) .btn-primary {
    background: #FF536D;
    border-color: #FF536D;
    color: #16090C;
    -webkit-text-fill-color: #16090C;
  }
  :root:not([data-theme]) .site-footer .footer-row,
  :root:not([data-theme]) .site-footer .footer-row a { color: #D2C4C7; }
  :root:not([data-theme]) .theme-band-red .impact-explorer { background: rgba(10, 9, 10, .8); }
}

@media (max-width: 700px) {
  .impact-map { padding: 18px 14px 16px; }
  .impact-tabs {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 10px;
  }
  .impact-routes { display: none; }
  .impact-brand {
    position: static;
    grid-column: 1;
    width: fit-content;
    min-height: 0;
    margin: 2px auto 0;
    padding: 8px 14px;
    transform: none;
  }
  .impact-detail { margin-top: 14px; padding: 16px; }
}
@media (max-width: 420px) {
  .impact-map-label { align-items: flex-start; font-size: .56rem; letter-spacing: .08em; }
  .impact-tab { grid-template-columns: 34px minmax(0, 1fr) 18px; gap: 9px; padding: 12px; }
  .impact-tab-number { width: 32px; height: 32px; }
  .impact-tab strong { font-size: .82rem; }
  .impact-tab small { font-size: .67rem; }
  .case-template-label { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .impact-explorer.visible .impact-routes path,
  .impact-explorer.visible .impact-brand { animation: none; }
  .impact-tab,
  .impact-detail { transition: none; animation: none; }
}

.theme-band-red,
.home-platforms-section.theme-band-red {
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.09) 0 1px, transparent 1px 32px),
    linear-gradient(116deg, #79091F 0%, #C91635 56%, #A40D27 100%);
}
.home-hero.theme-band-red {
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.09) 0 1px, transparent 1px 32px),
    radial-gradient(ellipse at 82% 35%, rgba(255,255,255,.16), transparent 50%),
    linear-gradient(116deg, #79091F 0%, #C91635 56%, #A40D27 100%);
}
.theme-band-red .home-ai-feature {
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.09) 0 1px, transparent 1px 30px),
    linear-gradient(125deg, var(--red-950), var(--red-800) 58%, var(--red-600));
}
.system-page-hero::after {
  background-image:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--brass) 11%, transparent) 0 1px, transparent 1px 34px),
    radial-gradient(color-mix(in srgb, var(--ink-faint) 32%, transparent) .8px, transparent .8px),
    linear-gradient(120deg, transparent 48%, color-mix(in srgb, var(--brass) 9%, transparent) 48.15%, transparent 48.3%);
  background-size: auto, 32px 32px, 100% 100%;
}

:root[data-theme="dark"] .theme-band-red,
:root[data-theme="dark"] .home-platforms-section.theme-band-red {
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.065) 0 1px, transparent 1px 32px),
    linear-gradient(130deg, #080808 0%, #111111 68%, #26090E 100%);
}
:root[data-theme="dark"] .home-hero.theme-band-red {
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.065) 0 1px, transparent 1px 32px),
    radial-gradient(ellipse at 82% 35%, rgba(143,9,31,.3), transparent 52%),
    linear-gradient(130deg, #080808 0%, #111111 68%, #26090E 100%);
  background-size: auto;
}
:root[data-theme="dark"] .theme-band-red .home-ai-feature {
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.065) 0 1px, transparent 1px 30px),
    linear-gradient(125deg, #101010, #27090F 58%, #6F0A1D);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-band-red,
  :root:not([data-theme="light"]) .home-platforms-section.theme-band-red {
    background-image:
      repeating-linear-gradient(135deg, rgba(255,255,255,.065) 0 1px, transparent 1px 32px),
      linear-gradient(130deg, #080808 0%, #111111 68%, #26090E 100%);
  }
  :root:not([data-theme="light"]) .home-hero.theme-band-red {
    background-image:
      repeating-linear-gradient(135deg, rgba(255,255,255,.065) 0 1px, transparent 1px 32px),
      radial-gradient(ellipse at 82% 35%, rgba(143,9,31,.3), transparent 52%),
      linear-gradient(130deg, #080808 0%, #111111 68%, #26090E 100%);
    background-size: auto;
  }
  :root:not([data-theme="light"]) .theme-band-red .home-ai-feature {
    background-image:
      repeating-linear-gradient(135deg, rgba(255,255,255,.065) 0 1px, transparent 1px 30px),
      linear-gradient(125deg, #101010, #27090F 58%, #6F0A1D);
  }
}
:root[data-theme="light"] .home-platforms-section.theme-band-red {
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.09) 0 1px, transparent 1px 32px),
    linear-gradient(132deg, var(--red-900), var(--red-600));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .home-platforms-section.theme-band-red {
    background-image:
      repeating-linear-gradient(135deg, rgba(255,255,255,.065) 0 1px, transparent 1px 32px),
      linear-gradient(130deg, #080808 0%, #111111 68%, #26090E 100%);
  }
}

:root[data-theme="light"] body {
  background-color: #FFF8F8;
  background-image: none;
}
:root[data-theme="light"] header.hero:not(.home-hero),
:root[data-theme="light"] .theme-band-red,
:root[data-theme="light"] .home-hero.theme-band-red,
:root[data-theme="light"] .home-platforms-section.theme-band-red {
  background-color: #C91635;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 1px, transparent 1px 34px);
}
:root[data-theme="light"] .theme-band-paper,
:root[data-theme="light"] .system-page-hero,
:root[data-theme="light"] main > .section.section-rule:not(.theme-band-red):not(.theme-band-paper):nth-of-type(odd) {
  background-color: #FFF4F5;
  background-image: none;
}
:root[data-theme="light"] main > .section.section-rule:not(.theme-band-red):not(.theme-band-paper):nth-of-type(even) {
  background-color: #FFFFFF;
  background-image: none;
}
:root[data-theme="light"] header.hero:not(.home-hero)::after,
:root[data-theme="light"] .system-page-hero::after,
:root[data-theme="light"] .home-hero::after,
:root[data-theme="light"] .hero-brand-glow {
  display: none;
}
:root[data-theme="light"] .theme-band-red .home-ai-feature {
  background-color: #79091F;
  background-image: none;
}
:root[data-theme="light"] .journey-card,
:root[data-theme="light"] .home-platform-card,
:root[data-theme="light"] .path-card,
:root[data-theme="light"] .vision-card,
:root[data-theme="light"] .feature-card,
:root[data-theme="light"] .home-tool-panel,
:root[data-theme="light"] .case-row,
:root[data-theme="light"] .process-panel,
:root[data-theme="light"] .process-tab,
:root[data-theme="light"] .blog-featured,
:root[data-theme="light"] .post-cta,
:root[data-theme="light"] .testimonial-placeholder,
:root[data-theme="light"] .faq-item {
  background-color: #FFFFFF;
  background-image: none;
}
:root[data-theme="light"] .theme-band-red .home-platform-card,
:root[data-theme="light"] .theme-band-red .home-tool-panel {
  background-color: #FFFFFF;
}
:root[data-theme="light"] .feature-icon-brass,
:root[data-theme="light"] .feature-icon-forest,
:root[data-theme="light"] .plate-brass,
:root[data-theme="light"] .plate-forest {
  background-color: #FFE1E6;
  background-image: none;
}
:root[data-theme="light"] .cta-band {
  background-color: #A40D27;
  background-image: none;
}
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .cta-band .btn-primary {
  background-color: #A40D27;
  background-image: none;
}
:root[data-theme="light"] .theme-band-red .btn-primary,
:root[data-theme="light"] .theme-band-red .home-ai-feature .btn-primary {
  background-color: #FFFFFF;
  background-image: none;
}
:root[data-theme="light"] .scroll-progress {
  background-color: #D91635;
  background-image: none;
}
:root[data-theme="light"] .system-player {
  background-color: #FFFFFF;
  background-image: none;
}
:root[data-theme="light"] .system-player-screen {
  background-color: #120D10;
  background-image: none;
}
:root[data-theme="light"] .system-video-placeholder {
  background-color: #120D10;
  background-image: none;
}
:root[data-theme="light"] .system-video-controls {
  background-color: rgba(8,8,10,.94);
  background-image: none;
}
:root[data-theme="light"] .system-player-seek input::-webkit-slider-runnable-track,
:root[data-theme="light"] .system-player-seek input::-moz-range-progress {
  background: #F21D3B;
}
:root[data-theme="light"] .system-player-seek input::-moz-range-track {
  background: rgba(255,255,255,.36);
}
:root[data-theme="light"] .impact-explorer {
  background-color: #FFFFFF;
  background-image: none;
}
:root[data-theme="light"] .theme-band-red .impact-explorer {
  background-color: #570817;
  background-image: none;
}
:root[data-theme="light"] .hero-brand-glow {
  background: none;
}
:root[data-theme="light"] .build-card-row i {
  background: #A40D27;
}
:root[data-theme="light"] .build-card-row i:nth-child(2) {
  background: #F21D3B;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) body {
    background-color: #FFF8F8;
    background-image: none;
  }
  :root:not([data-theme]) header.hero:not(.home-hero),
  :root:not([data-theme]) .theme-band-red,
  :root:not([data-theme]) .home-hero.theme-band-red,
  :root:not([data-theme]) .home-platforms-section.theme-band-red {
    background-color: #C91635;
    background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 1px, transparent 1px 34px);
  }
  :root:not([data-theme]) .theme-band-paper,
  :root:not([data-theme]) .system-page-hero,
  :root:not([data-theme]) main > .section.section-rule:not(.theme-band-red):not(.theme-band-paper):nth-of-type(odd) {
    background-color: #FFF4F5;
    background-image: none;
  }
  :root:not([data-theme]) main > .section.section-rule:not(.theme-band-red):not(.theme-band-paper):nth-of-type(even) {
    background-color: #FFFFFF;
    background-image: none;
  }
  :root:not([data-theme]) header.hero:not(.home-hero)::after,
  :root:not([data-theme]) .system-page-hero::after,
  :root:not([data-theme]) .home-hero::after,
  :root:not([data-theme]) .hero-brand-glow { display: none; }
  :root:not([data-theme]) .theme-band-red .home-ai-feature {
    background-color: #79091F;
    background-image: none;
  }
  :root:not([data-theme]) .journey-card,
  :root:not([data-theme]) .home-platform-card,
  :root:not([data-theme]) .path-card,
  :root:not([data-theme]) .vision-card,
  :root:not([data-theme]) .feature-card,
  :root:not([data-theme]) .home-tool-panel,
  :root:not([data-theme]) .case-row,
  :root:not([data-theme]) .process-panel,
  :root:not([data-theme]) .process-tab,
  :root:not([data-theme]) .blog-featured,
  :root:not([data-theme]) .post-cta,
  :root:not([data-theme]) .testimonial-placeholder,
  :root:not([data-theme]) .faq-item {
    background-color: #FFFFFF;
    background-image: none;
  }
  :root:not([data-theme]) .theme-band-red .home-platform-card,
  :root:not([data-theme]) .theme-band-red .home-tool-panel { background-color: #FFFFFF; }
  :root:not([data-theme]) .feature-icon-brass,
  :root:not([data-theme]) .feature-icon-forest,
  :root:not([data-theme]) .plate-brass,
  :root:not([data-theme]) .plate-forest {
    background-color: #FFE1E6;
    background-image: none;
  }
  :root:not([data-theme]) .cta-band {
    background-color: #A40D27;
    background-image: none;
  }
  :root:not([data-theme]) .btn-primary,
  :root:not([data-theme]) .cta-band .btn-primary { background-color: #A40D27; background-image: none; }
  :root:not([data-theme]) .theme-band-red .btn-primary,
  :root:not([data-theme]) .theme-band-red .home-ai-feature .btn-primary { background-color: #FFFFFF; background-image: none; }
  :root:not([data-theme]) .scroll-progress { background-color: #D91635; background-image: none; }
  :root:not([data-theme]) .system-player { background-color: #FFFFFF; background-image: none; }
  :root:not([data-theme]) .system-player-screen,
  :root:not([data-theme]) .system-video-placeholder {
    background-color: #120D10;
    background-image: none;
  }
  :root:not([data-theme]) .system-video-controls {
    background-color: rgba(8,8,10,.94);
    background-image: none;
  }
  :root:not([data-theme]) .system-player-seek input::-webkit-slider-runnable-track,
  :root:not([data-theme]) .system-player-seek input::-moz-range-progress { background: #F21D3B; }
  :root:not([data-theme]) .system-player-seek input::-moz-range-track { background: rgba(255,255,255,.36); }
  :root:not([data-theme]) .impact-explorer {
    background-color: #FFFFFF;
    background-image: none;
  }
  :root:not([data-theme]) .theme-band-red .impact-explorer {
    background-color: #570817;
    background-image: none;
  }
  :root:not([data-theme]) .hero-brand-glow { background: none; }
  :root:not([data-theme]) .build-card-row i { background: #A40D27; }
  :root:not([data-theme]) .build-card-row i:nth-child(2) { background: #F21D3B; }
}
header.hero:not(.home-hero)::after {
  opacity: .14;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.24) 0 1px, transparent 1px 32px);
  background-size: auto;
  mask-image: linear-gradient(120deg, transparent 7%, #000 100%);
}

.home-hero .system-video-link {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, .72);
}
.home-hero .system-video-link span {
  color: #FFFFFF;
}
.home-hero .system-video-link:hover,
.home-hero .system-video-link:focus-visible {
  color: #FFFFFF;
  background: rgba(255, 255, 255, .12);
}

:root[data-theme="light"] .theme-band-red .home-ai-feature .xai-benefit h3 {
  color: #321018;
}
:root[data-theme="light"] .theme-band-red .faq-item {
  border-color: rgba(121, 9, 31, .24);
  background: #FFFFFF;
  color: #321018;
}
:root[data-theme="light"] .theme-band-red .faq-item summary,
:root[data-theme="light"] .theme-band-red .faq-item p {
  color: #321018;
}
:root[data-theme="light"] .cta-band h2,
:root[data-theme="light"] .cta-band p,
:root[data-theme="light"] .cta-band .cta-intents-label,
:root[data-theme="light"] .cta-band .cta-intent-status {
  color: #FFFFFF;
}
:root[data-theme="light"] .cta-band .cta-eyebrow {
  color: #FFE1E6;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-band-red .home-ai-feature .xai-benefit h3 { color: #321018; }
  :root:not([data-theme]) .theme-band-red .faq-item {
    border-color: rgba(121, 9, 31, .24);
    background: #FFFFFF;
    color: #321018;
  }
  :root:not([data-theme]) .theme-band-red .faq-item summary,
  :root:not([data-theme]) .theme-band-red .faq-item p { color: #321018; }
  :root:not([data-theme]) .cta-band h2,
  :root:not([data-theme]) .cta-band p,
  :root:not([data-theme]) .cta-band .cta-intents-label,
  :root:not([data-theme]) .cta-band .cta-intent-status { color: #FFFFFF; }
  :root:not([data-theme]) .cta-band .cta-eyebrow { color: #FFE1E6; }
}

/* SaleStratXAI article: red-and-white editorial tiles and an explorable workflow chart. */
.ai-post-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(30px, 5vw, 58px) 0 clamp(42px, 6vw, 72px);
  color: #FFFFFF;
  background-color: #C91635;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 1px, transparent 1px 34px);
}
.ai-post-header::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: none;
  content: "";
}
.ai-post-header .container { position: relative; }
.ai-post-header h1 { max-width: 760px; color: #FFFFFF; }
.ai-post-header .kicker { color: #FFE1E6; }
.ai-post-header .ai-breadcrumbs,
.ai-post-header .ai-breadcrumbs a,
.ai-post-header .post-meta { color: #FFFFFF; }
.ai-post-header .ai-breadcrumbs a:hover { color: #FFFFFF; }
.ai-post-deck { color: rgba(255,255,255,.9); }
.ai-hero-dashboard {
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: 16px 18px 0 rgba(87,8,23,.32), 0 22px 48px rgba(67,0,14,.2);
}
.ai-chart-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.ai-dashboard { overflow: hidden; border: 1px solid #E8B8C0; background: #FFF8F8; color: #321018; }
.ai-dashboard-bar {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 47px;
  padding: 0 15px;
  color: #FFFFFF;
  background: #79091F;
}
.ai-dashboard-bar > strong { min-width: 0; font-size: .62rem; letter-spacing: .12em; }
.ai-dashboard-lights { display: flex; gap: 5px; }
.ai-dashboard-lights i { width: 8px; height: 8px; border-radius: 50%; background: #FFFFFF; opacity: .8; }
.ai-dashboard-lights i:nth-child(2) { opacity: .55; }
.ai-dashboard-lights i:nth-child(3) { opacity: .35; }
.ai-dashboard-status { display: inline-flex; align-items: center; gap: 6px; color: #FFE1E6; font-size: .5rem; font-weight: 800; letter-spacing: .08em; }
.ai-dashboard-status i,
.ai-dashboard-footer > span i { width: 7px; height: 7px; border-radius: 50%; background: #FF9EAD; }
.ai-dashboard-body { padding: clamp(14px, 2.4vw, 22px); }
.ai-dashboard-caption { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: #79091F; font-size: .52rem; font-weight: 800; letter-spacing: .08em; }
.ai-dashboard-caption i { flex: 1; height: 1px; background: #D91635; }
.ai-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.ai-dashboard-tile {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 94px;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  padding: 12px;
  border: 1px solid #E8B8C0;
  border-radius: 2px;
  color: #321018;
  background: #FFFFFF;
  text-align: left;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.ai-dashboard-tile::after { position: absolute; right: 0; bottom: 0; width: 38px; height: 3px; background: #D91635; content: ""; transform: scaleX(.24); transform-origin: right; transition: transform .25s ease; }
.ai-dashboard-tile > span { margin-bottom: 7px; color: #A40D27; font-size: .48rem; font-weight: 800; letter-spacing: .1em; }
.ai-dashboard-tile > strong { position: relative; z-index: 1; font-size: .72rem; line-height: 1.3; }
.ai-dashboard-tile > small { position: relative; z-index: 1; margin-top: 4px; color: #70464D; font-size: .53rem; line-height: 1.35; }
.ai-dashboard-tile > b { position: absolute; right: 8px; bottom: -7px; color: rgba(164,13,39,.1); font-size: 2.4rem; line-height: 1; }
.ai-dashboard-tile-red { background: #FFF0F2; }
.ai-dashboard-tile:hover,
.ai-dashboard-tile.is-active { z-index: 1; transform: translateY(-2px); border-color: #A40D27; box-shadow: 0 5px 14px rgba(121,9,31,.12); }
.ai-dashboard-tile.is-active { background: #FFE1E6; }
.ai-dashboard-tile.is-active::after,
.ai-dashboard-tile:hover::after { transform: scaleX(1); }
.ai-dashboard-tile:focus-visible { z-index: 2; outline: 3px solid #79091F; outline-offset: 2px; }
.ai-dashboard-detail { min-height: 2.8em; margin: 11px 0 0; padding: 9px 10px; border-left: 3px solid #D91635; color: #54232C; background: #FFFFFF; font-size: .63rem; line-height: 1.45; }
.ai-dashboard-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; color: #79091F; font-size: .52rem; font-weight: 800; }
.ai-dashboard-footer > span { display: flex; align-items: center; gap: 6px; }
.ai-dashboard-footer > span i { flex: 0 0 7px; background: #A40D27; }
.ai-dashboard-footer svg { width: 86px; height: 26px; overflow: visible; }
.ai-dashboard-footer svg path { fill: none; stroke: #D91635; stroke-width: 2; stroke-dasharray: 150; animation: ai-chart-draw 1.2s ease-out both; }
.ai-dashboard-footer svg circle { fill: #79091F; }
@keyframes ai-chart-draw { from { stroke-dashoffset: 150; } to { stroke-dashoffset: 0; } }

.ai-article-section { padding-top: clamp(30px, 5vw, 54px); padding-bottom: clamp(46px, 7vw, 80px); background: #FFF4F5; }
.ai-post-body { max-width: 940px; padding: clamp(16px, 3vw, 34px); border: 1px solid #F0D8DC; border-top: 6px solid #C91635; background: #FFFFFF; box-shadow: 0 18px 50px rgba(121,9,31,.08); }
.ai-post-body > p { max-width: 76ch; }
.ai-post-body h2[id] { display: flex; align-items: flex-start; gap: 12px; margin-top: clamp(38px, 6vw, 56px); color: #79091F; }
.ai-post-body h2[id]::before { display: grid; flex: 0 0 31px; place-items: center; width: 31px; height: 31px; margin-top: 1px; border: 1px solid #D91635; color: #A40D27; background: #FFF0F2; content: counter(ai-article-section, decimal-leading-zero); font-size: .58rem; font-weight: 800; }
.ai-post-body { counter-reset: ai-article-section; }
.ai-post-body h2[id] { counter-increment: ai-article-section; }
.ai-answer-card { border: 0; border-left: 7px solid #FFFFFF; border-radius: 2px; color: #FFFFFF; background: #A40D27; box-shadow: none; }
.ai-answer-card strong,
.ai-post-body .ai-answer-card p { color: #FFFFFF; }
.ai-answer-icon { border-color: rgba(255,255,255,.5); color: #79091F; background: #FFFFFF; }
.ai-toc { grid-template-columns: repeat(2, minmax(0,1fr)); border: 1px solid #E8B8C0; border-top: 4px solid #C91635; border-radius: 2px; background: #FFF4F5; }
.ai-toc strong { color: #79091F; }
.ai-toc a { display: block; width: 100%; padding: 10px 12px; border: 1px solid #F0D8DC; color: #54232C; background: #FFFFFF; transition: transform .2s ease, border-color .2s ease, background-color .2s ease; }
.ai-toc a::before { color: #A40D27; }
.ai-toc a:hover,
.ai-toc a:focus-visible { transform: translateX(2px); border-color: #A40D27; color: #79091F; background: #FFF0F2; }
.ai-stat-card,
.ai-use-card,
.ai-faq-list details,
.ai-implementation-list li { border-color: #E8B8C0; border-radius: 2px; background: #FFFFFF; box-shadow: 0 8px 20px rgba(121,9,31,.06); }
.ai-stat-card { border-top: 5px solid #C91635; }
.ai-stat-card strong,
.ai-stat-card-accent strong { color: #A40D27; }
.ai-stat-card:nth-child(2) { color: #FFFFFF; border-color: #79091F; background: #A40D27; }
.ai-stat-card:nth-child(2) strong,
.ai-stat-card:nth-child(2) span,
.ai-stat-card:nth-child(2) small { color: #FFFFFF; }
.ai-use-card { border-top: 4px solid #C91635; }
.ai-use-card::after { background: radial-gradient(circle, rgba(217,22,53,.13), transparent 70%); }
.ai-use-card:hover { border-color: #A40D27; }
.ai-use-number,
.ai-workflow-kicker,
.ai-workflow-steps > i,
.ai-workflow-symbol,
.ai-implementation-list li::before,
.ai-faq-list summary::after { color: #A40D27; }
.ai-use-tag { border-color: #E8B8C0; border-radius: 2px; color: #79091F; background: #FFF0F2; }
.ai-workflow { border: 0; border-radius: 2px; color: #FFFFFF; background: #A40D27; box-shadow: none; }
.ai-workflow-kicker,
.ai-workflow figcaption strong { color: #FFFFFF; }
.ai-workflow-step,
.ai-workflow-step-active { border-color: #E8B8C0; border-radius: 2px; background: #FFFFFF; box-shadow: none; }
.ai-workflow-step strong { color: #321018; }
.ai-workflow-step small { color: #70464D; }
.ai-cost-panel { border: 1px solid #E8B8C0; border-left: 6px solid #C91635; border-radius: 2px; background: #FFF0F2; }
.ai-cost-label { color: #A40D27; }
.ai-implementation-list li { border-left: 4px solid #C91635; }
.ai-search-note { border: 1px solid #E8B8C0; border-left: 6px solid #C91635; border-radius: 2px; background: #FFF4F5; }
.ai-search-mark { border-color: #E8B8C0; border-radius: 2px; color: #79091F; background: #FFFFFF; }
.ai-faq-list details { border-left: 4px solid #C91635; transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.ai-faq-list details:hover,
.ai-faq-list details[open] { transform: translateX(2px); border-color: #A40D27; background: #FFF4F5; }
.ai-faq-list summary:focus-visible { outline: 3px solid #A40D27; outline-offset: 3px; }
.ai-editorial-note { border-left-color: #C91635; background: #FFF4F5; }
.ai-post-cta { border: 0; border-left: 8px solid #FFFFFF; border-radius: 2px; color: #FFFFFF; background: #A40D27; box-shadow: none; }
:root[data-theme="light"] .ai-post-cta { background-color: #A40D27; background-image: none; }
.ai-post-cta::after { color: rgba(255,255,255,.08); }
.ai-cta-kicker,
.ai-post-cta h2,
.ai-post-body .ai-post-cta p { color: #FFFFFF; }
.ai-cta-actions .btn-outline { border-color: #FFFFFF; color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; }
.ai-cta-actions .btn-outline:hover { color: #79091F; -webkit-text-fill-color: #79091F; background: #FFFFFF; }
.ai-post-body .related-posts { grid-template-columns: repeat(3, minmax(0,1fr)); }
.ai-post-body .related-posts a { display: flex; align-items: center; min-height: 64px; padding: 12px 14px; border: 1px solid #E8B8C0; border-top: 4px solid #C91635; color: #79091F; background: #FFF4F5; text-decoration: none; transition: transform .2s ease, border-color .2s ease, background-color .2s ease; }
.ai-post-body .related-posts a:hover { transform: translateY(-2px); border-color: #A40D27; background: #FFF0F2; }

:root[data-theme="dark"] .ai-post-header,
:root:not([data-theme]) .ai-post-header { color: #FAF4F4; background-color: #090909; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 34px), linear-gradient(125deg,#090909 0%,#171012 60%,#3A0A14 100%); }
:root[data-theme="dark"] .ai-post-header::before,
:root:not([data-theme]) .ai-post-header::before { background: linear-gradient(90deg,rgba(217,22,53,.16),transparent 70%); }
:root[data-theme="dark"] .ai-post-header h1,
:root[data-theme="dark"] .ai-post-header .ai-breadcrumbs,
:root[data-theme="dark"] .ai-post-header .ai-breadcrumbs a,
:root[data-theme="dark"] .ai-post-header .post-meta,
:root[data-theme="dark"] .ai-post-deck,
:root:not([data-theme]) .ai-post-header h1,
:root:not([data-theme]) .ai-post-header .ai-breadcrumbs,
:root:not([data-theme]) .ai-post-header .ai-breadcrumbs a,
:root:not([data-theme]) .ai-post-header .post-meta,
:root:not([data-theme]) .ai-post-deck { color: #FAF4F4; }
:root[data-theme="dark"] .ai-post-header .kicker,
:root:not([data-theme]) .ai-post-header .kicker { color: #FF9AA7; }
:root[data-theme="dark"] .ai-hero-dashboard,
:root:not([data-theme]) .ai-hero-dashboard { border-color: #5B1722; background: #111111; box-shadow: 12px 14px 0 rgba(156,11,37,.32), 0 22px 48px rgba(0,0,0,.4); }
:root[data-theme="dark"] .ai-dashboard,
:root:not([data-theme]) .ai-dashboard { border-color: #4A2026; color: #FAF4F4; background: #111111; }
:root[data-theme="dark"] .ai-dashboard-bar,
:root:not([data-theme]) .ai-dashboard-bar { background: #050505; }
:root[data-theme="dark"] .ai-dashboard-status,
:root:not([data-theme]) .ai-dashboard-status { color: #FF9AA7; }
:root[data-theme="dark"] .ai-dashboard-caption,
:root:not([data-theme]) .ai-dashboard-caption,
:root[data-theme="dark"] .ai-dashboard-footer,
:root:not([data-theme]) .ai-dashboard-footer { color: #FF9AA7; }
:root[data-theme="dark"] .ai-dashboard-caption i,
:root:not([data-theme]) .ai-dashboard-caption i { background: #D91635; }
:root[data-theme="dark"] .ai-dashboard-tile,
:root:not([data-theme]) .ai-dashboard-tile { border-color: #54212A; color: #FAF4F4; background: #1A1A1A; }
:root[data-theme="dark"] .ai-dashboard-tile-red,
:root:not([data-theme]) .ai-dashboard-tile-red { background: #260D12; }
:root[data-theme="dark"] .ai-dashboard-tile > span,
:root:not([data-theme]) .ai-dashboard-tile > span { color: #FF9AA7; }
:root[data-theme="dark"] .ai-dashboard-tile > small,
:root:not([data-theme]) .ai-dashboard-tile > small { color: #D3C7C9; }
:root[data-theme="dark"] .ai-dashboard-tile > b,
:root:not([data-theme]) .ai-dashboard-tile > b { color: rgba(255,105,120,.12); }
:root[data-theme="dark"] .ai-dashboard-tile:hover,
:root[data-theme="dark"] .ai-dashboard-tile.is-active,
:root:not([data-theme]) .ai-dashboard-tile:hover,
:root:not([data-theme]) .ai-dashboard-tile.is-active { border-color: #FF6978; background: #351018; }
:root[data-theme="dark"] .ai-dashboard-tile:focus-visible,
:root:not([data-theme]) .ai-dashboard-tile:focus-visible { outline-color: #FF6978; }
:root[data-theme="dark"] .ai-dashboard-detail,
:root:not([data-theme]) .ai-dashboard-detail { border-left-color: #FF4058; color: #FAF4F4; background: #1A1A1A; }
:root[data-theme="dark"] .ai-dashboard-footer > span i,
:root:not([data-theme]) .ai-dashboard-footer > span i { background: #FF4058; }
:root[data-theme="dark"] .ai-dashboard-footer svg path,
:root:not([data-theme]) .ai-dashboard-footer svg path { stroke: #FF6978; }
:root[data-theme="dark"] .ai-dashboard-footer svg circle,
:root:not([data-theme]) .ai-dashboard-footer svg circle { fill: #FF4058; }
:root[data-theme="dark"] .ai-article-section,
:root:not([data-theme]) .ai-article-section { background: #090909; }
:root[data-theme="dark"] .ai-post-body,
:root:not([data-theme]) .ai-post-body { border-color: #3A2024; border-top-color: #D91635; color: #FAF4F4; background: #111111; box-shadow: 0 18px 50px rgba(0,0,0,.3); }
:root[data-theme="dark"] .ai-post-body h2[id],
:root:not([data-theme]) .ai-post-body h2[id] { color: #FF9AA7; }
:root[data-theme="dark"] .ai-post-body h2[id]::before,
:root:not([data-theme]) .ai-post-body h2[id]::before { border-color: #7A1E2B; color: #FF9AA7; background: #260D12; }
:root[data-theme="dark"] .ai-answer-card,
:root:not([data-theme]) .ai-answer-card { border-left-color: #FF6978; background: #260D12; }
:root[data-theme="dark"] .ai-answer-card strong,
:root[data-theme="dark"] .ai-post-body .ai-answer-card p,
:root:not([data-theme]) .ai-answer-card strong,
:root:not([data-theme]) .ai-post-body .ai-answer-card p { color: #FAF4F4; }
:root[data-theme="dark"] .ai-answer-icon,
:root:not([data-theme]) .ai-answer-icon { border-color: #7A1E2B; color: #FF9AA7; background: #111111; }
:root[data-theme="dark"] .ai-toc,
:root:not([data-theme]) .ai-toc { border-color: #54212A; border-top-color: #D91635; background: #171212; }
:root[data-theme="dark"] .ai-toc strong,
:root:not([data-theme]) .ai-toc strong { color: #FF9AA7; }
:root[data-theme="dark"] .ai-toc a,
:root:not([data-theme]) .ai-toc a { border-color: #432027; color: #FAF4F4; background: #111111; }
:root[data-theme="dark"] .ai-toc a::before,
:root:not([data-theme]) .ai-toc a::before { color: #FF6978; }
:root[data-theme="dark"] .ai-toc a:hover,
:root[data-theme="dark"] .ai-toc a:focus-visible,
:root:not([data-theme]) .ai-toc a:hover,
:root:not([data-theme]) .ai-toc a:focus-visible { border-color: #FF6978; color: #FFFFFF; background: #260D12; }
:root[data-theme="dark"] .ai-stat-card,
:root[data-theme="dark"] .ai-use-card,
:root[data-theme="dark"] .ai-faq-list details,
:root[data-theme="dark"] .ai-implementation-list li,
:root:not([data-theme]) .ai-stat-card,
:root:not([data-theme]) .ai-use-card,
:root:not([data-theme]) .ai-faq-list details,
:root:not([data-theme]) .ai-implementation-list li { border-color: #432027; border-top-color: #D91635; color: #FAF4F4; background: #151313; box-shadow: none; }
:root[data-theme="dark"] .ai-stat-card strong,
:root[data-theme="dark"] .ai-stat-card-accent strong,
:root:not([data-theme]) .ai-stat-card strong,
:root:not([data-theme]) .ai-stat-card-accent strong { color: #FF6978; }
:root[data-theme="dark"] .ai-stat-card span,
:root[data-theme="dark"] .ai-stat-card small,
:root:not([data-theme]) .ai-stat-card span,
:root:not([data-theme]) .ai-stat-card small { color: #E2DADD; }
:root[data-theme="dark"] .ai-stat-card:nth-child(2),
:root:not([data-theme]) .ai-stat-card:nth-child(2) { border-color: #7A1E2B; border-top-color: #FF6978; background: #260D12; }
:root[data-theme="dark"] .ai-stat-card:nth-child(2) strong,
:root[data-theme="dark"] .ai-stat-card:nth-child(2) span,
:root[data-theme="dark"] .ai-stat-card:nth-child(2) small,
:root:not([data-theme]) .ai-stat-card:nth-child(2) strong,
:root:not([data-theme]) .ai-stat-card:nth-child(2) span,
:root:not([data-theme]) .ai-stat-card:nth-child(2) small { color: #FAF4F4; }
:root[data-theme="dark"] .ai-use-card::after,
:root:not([data-theme]) .ai-use-card::after { background: radial-gradient(circle, rgba(217,22,53,.15), transparent 70%); }
:root[data-theme="dark"] .ai-use-card h3,
:root[data-theme="dark"] .ai-workflow-step strong,
:root[data-theme="dark"] .ai-cost-panel > div strong,
:root[data-theme="dark"] .ai-implementation-list strong,
:root[data-theme="dark"] .ai-search-note strong,
:root[data-theme="dark"] .ai-faq-list summary,
:root[data-theme="dark"] .ai-post-body blockquote,
:root:not([data-theme]) .ai-use-card h3,
:root:not([data-theme]) .ai-workflow-step strong,
:root:not([data-theme]) .ai-cost-panel > div strong,
:root:not([data-theme]) .ai-implementation-list strong,
:root:not([data-theme]) .ai-search-note strong,
:root:not([data-theme]) .ai-faq-list summary,
:root:not([data-theme]) .ai-post-body blockquote { color: #FAF4F4; }
:root[data-theme="dark"] .ai-use-card p,
:root[data-theme="dark"] .ai-stat-card span,
:root[data-theme="dark"] .ai-cost-panel li,
:root[data-theme="dark"] .ai-implementation-list li,
:root[data-theme="dark"] .ai-post-body .ai-search-note p,
:root[data-theme="dark"] .ai-faq-list details p,
:root[data-theme="dark"] .ai-sources li,
:root:not([data-theme]) .ai-use-card p,
:root:not([data-theme]) .ai-stat-card span,
:root:not([data-theme]) .ai-cost-panel li,
:root:not([data-theme]) .ai-implementation-list li,
:root:not([data-theme]) .ai-post-body .ai-search-note p,
:root:not([data-theme]) .ai-faq-list details p,
:root:not([data-theme]) .ai-sources li { color: #D3C7C9; }
:root[data-theme="dark"] .ai-use-number,
:root[data-theme="dark"] .ai-workflow-kicker,
:root[data-theme="dark"] .ai-workflow-steps > i,
:root[data-theme="dark"] .ai-workflow-symbol,
:root[data-theme="dark"] .ai-cost-label,
:root[data-theme="dark"] .ai-implementation-list li::before,
:root[data-theme="dark"] .ai-faq-list summary::after,
:root:not([data-theme]) .ai-use-number,
:root:not([data-theme]) .ai-workflow-kicker,
:root:not([data-theme]) .ai-workflow-steps > i,
:root:not([data-theme]) .ai-workflow-symbol,
:root:not([data-theme]) .ai-cost-label,
:root:not([data-theme]) .ai-implementation-list li::before,
:root:not([data-theme]) .ai-faq-list summary::after { color: #FF9AA7; }
:root[data-theme="dark"] .ai-use-tag,
:root:not([data-theme]) .ai-use-tag { border-color: #54212A; color: #FFB5BE; background: #260D12; }
:root[data-theme="dark"] .ai-workflow,
:root:not([data-theme]) .ai-workflow { border: 1px solid #54212A; background: #260D12; }
:root[data-theme="dark"] .ai-workflow-step,
:root[data-theme="dark"] .ai-workflow-step-active,
:root:not([data-theme]) .ai-workflow-step,
:root:not([data-theme]) .ai-workflow-step-active { border-color: #54212A; background: #151313; }
:root[data-theme="dark"] .ai-workflow-step small,
:root:not([data-theme]) .ai-workflow-step small { color: #D3C7C9; }
:root[data-theme="dark"] .ai-cost-panel,
:root:not([data-theme]) .ai-cost-panel { border-color: #54212A; border-left-color: #D91635; background: #1A1214; }
:root[data-theme="dark"] .ai-search-note,
:root:not([data-theme]) .ai-search-note { border-color: #54212A; border-left-color: #D91635; background: #171212; }
:root[data-theme="dark"] .ai-search-mark,
:root:not([data-theme]) .ai-search-mark { border-color: #54212A; color: #FF9AA7; background: #111111; }
:root[data-theme="dark"] .ai-faq-list details:hover,
:root[data-theme="dark"] .ai-faq-list details[open],
:root:not([data-theme]) .ai-faq-list details:hover,
:root:not([data-theme]) .ai-faq-list details[open] { border-color: #FF6978; background: #201014; }
:root[data-theme="dark"] .ai-faq-list summary:focus-visible,
:root:not([data-theme]) .ai-faq-list summary:focus-visible { outline-color: #FF6978; }
:root[data-theme="dark"] .ai-editorial-note,
:root:not([data-theme]) .ai-editorial-note { border-left-color: #D91635; color: #D3C7C9; background: #171212; }
:root[data-theme="dark"] .ai-post-cta,
:root:not([data-theme]) .ai-post-cta { border-left-color: #FF6978; color: #FAF4F4; background: #260D12; }
:root[data-theme="dark"] .ai-cta-kicker,
:root[data-theme="dark"] .ai-post-cta h2,
:root[data-theme="dark"] .ai-post-body .ai-post-cta p,
:root:not([data-theme]) .ai-cta-kicker,
:root:not([data-theme]) .ai-post-cta h2,
:root:not([data-theme]) .ai-post-body .ai-post-cta p { color: #FAF4F4; }
:root[data-theme="dark"] .ai-cta-actions .btn-outline,
:root:not([data-theme]) .ai-cta-actions .btn-outline { border-color: #FF9AA7; color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; }
:root[data-theme="dark"] .ai-cta-actions .btn-outline:hover,
:root:not([data-theme]) .ai-cta-actions .btn-outline:hover { color: #321018; -webkit-text-fill-color: #321018; background: #FFFFFF; }
:root[data-theme="dark"] .ai-post-body .related-posts a,
:root:not([data-theme]) .ai-post-body .related-posts a { border-color: #54212A; border-top-color: #D91635; color: #FFB5BE; background: #171212; }
:root[data-theme="dark"] .ai-post-body .related-posts a:hover,
:root:not([data-theme]) .ai-post-body .related-posts a:hover { border-color: #FF6978; background: #260D12; }

@media (max-width: 700px) {
  .ai-post-body { padding: 16px; }
  .ai-post-body .related-posts { grid-template-columns: 1fr; }
  .ai-dashboard-bar { grid-template-columns: auto minmax(0,1fr); }
  .ai-dashboard-status { grid-column: 2; margin-top: -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-dashboard-footer svg path { animation: none; }
  .ai-dashboard-tile,
  .ai-toc a,
  .ai-faq-list details,
  .ai-post-body .related-posts a { transition: none; }
  .ai-dashboard-tile:hover,
  .ai-dashboard-tile.is-active,
  .ai-toc a:hover,
  .ai-faq-list details:hover,
  .ai-faq-list details[open],
  .ai-post-body .related-posts a:hover { transform: none; }
}

.cta-band .cta-actions .btn-outline {
  border-color: rgba(255,255,255,.82);
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}
.cta-band .cta-actions .btn-outline:hover,
.cta-band .cta-actions .btn-outline:focus-visible {
  border-color: #FFFFFF;
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  background: rgba(255,255,255,.14);
}

/* Services landing page: two clear paths, with the work grouped into balanced tiles. */
.services-hero {
  padding-block: clamp(52px, 7vw, 88px);
  overflow: hidden;
}
.services-hero-copy {
  position: relative;
  z-index: 1;
}
.services-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(36px, 6vw, 82px);
  align-items: center;
}
.services-hero-copy h1 {
  max-width: none;
  margin: 12px 0 18px;
  font-size: clamp(2.7rem, 4vw, 3.7rem);
  line-height: 1.03;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.services-hero-copy h1 em {
  color: #FFE1E6;
  font-style: normal;
}
.services-hero-copy .lede {
  max-width: 48ch;
  margin-bottom: 0;
  color: rgba(255,255,255,.9);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.7;
}
.services-hero-copy > .btn {
  margin-top: 20px;
}
.services-hero-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 22px 0 0;
  color: #FFE1E6;
  font-size: .79rem;
  font-weight: 650;
}
.services-hero-note > span {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #FFC1CB;
  box-shadow: 0 0 0 5px rgba(255,255,255,.12);
}
.service-path-showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
  min-width: 0;
  perspective: 1100px;
}
.service-path-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 370px;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid rgba(255,255,255,.52);
  border-radius: 10px;
  color: #321018;
  text-decoration: none;
  background: #FFF9F7;
  box-shadow: 0 24px 54px rgba(61, 2, 17, .24);
  transform: translateY(0);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .3s ease;
}
.service-path-card:hover {
  z-index: 1;
  border-color: #FFFFFF;
  box-shadow: 0 30px 64px rgba(48, 1, 13, .36);
  transform: translateY(-7px);
}
.service-path-card:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 4px;
}
.service-offer-card:focus-visible {
  outline: 3px solid #79091F;
  outline-offset: 4px;
}
.service-build-section .service-offer-featured:focus-visible { outline-color: #FFE1E6; }
.service-grow-section .service-offer-card:focus-visible { outline-color: #FFE1E6; }
.service-path-card-grow {
  color: #FFFFFF;
  border-color: rgba(255,255,255,.32);
  background: linear-gradient(155deg, #5C091B, #390812 66%, #24070E);
}
.service-path-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #A40D27;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .11em;
}
.service-path-card-grow .service-path-card-top { color: #FFB5C0; }
.service-path-card-arrow {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 1rem;
  transition: transform .25s ease, background .25s ease;
}
.service-path-card:hover .service-path-card-arrow,
.service-path-card:focus-visible .service-path-card-arrow {
  background: rgba(201,22,53,.12);
  transform: translate(2px,-2px);
}
.service-path-card-grow:hover .service-path-card-arrow,
.service-path-card-grow:focus-visible .service-path-card-arrow { background: rgba(255,255,255,.12); }
.service-path-art {
  position: relative;
  display: grid;
  min-height: 150px;
  flex: 1;
  place-items: center;
  margin: 10px 0 14px;
  overflow: hidden;
  border-radius: 6px;
  background:
    linear-gradient(rgba(164,13,39,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(164,13,39,.07) 1px, transparent 1px),
    #FBEAEC;
  background-size: 18px 18px;
}
.service-path-art::after {
  position: absolute;
  width: 170px;
  height: 170px;
  border: 1px solid rgba(164,13,39,.16);
  border-radius: 50%;
  content: "";
  transition: transform .5s ease;
}
.service-path-card:hover .service-path-art::after { transform: scale(1.12); }
.service-build-window {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(74%, 190px);
  min-height: 92px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 12px 31px 22px;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(121,9,31,.14);
  border-radius: 5px;
  background: #FFFFFF;
  box-shadow: 0 12px 26px rgba(91,13,30,.14);
  transform: rotate(-4deg);
  transition: transform .35s ease;
}
.service-path-card:hover .service-build-window { transform: rotate(-1deg) translateY(-3px); }
.service-build-window i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #D91635;
}
.service-build-window i:nth-child(2) { background: #F7B74A; }
.service-build-window i:nth-child(3) { background: #49A678; }
.service-build-window b {
  grid-column: 1 / 3;
  grid-row: 2;
  border-radius: 3px;
  background: linear-gradient(135deg,#F9D9DE,#F2A9B5);
}
.service-build-window em {
  grid-column: 3;
  grid-row: 2 / 4;
  border-radius: 3px;
  background: #FFE6EA;
}
.service-build-window small {
  grid-column: 1 / 3;
  grid-row: 3;
  width: 80%;
  height: 5px;
  align-self: center;
  border-radius: 5px;
  background: #C91635;
}
.service-art-caption {
  position: absolute;
  z-index: 1;
  right: 10px;
  bottom: 9px;
  color: #79091F;
  font-size: .53rem;
  font-weight: 900;
  letter-spacing: .09em;
}
.service-path-art-grow {
  background:
    linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px),
    #26070E;
  background-size: 18px 18px;
}
.service-path-art-grow::after { border-color: rgba(255,255,255,.16); }
.service-path-art-grow svg {
  position: absolute;
  z-index: 1;
  inset: 20% 8% 18%;
  width: 84%;
  height: 62%;
  overflow: visible;
}
.service-path-art-grow svg .service-growth-line {
  fill: none;
  stroke: #FF9BAA;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .8s ease;
}
.service-path-card-grow:hover .service-path-art-grow svg .service-growth-line { stroke-dashoffset: 260; }
.service-path-art-grow svg .service-growth-area { fill: rgba(255,83,109,.22); }
.service-growth-bars {
  position: absolute;
  inset: auto 12% 18% 12%;
  display: flex;
  height: 58%;
  align-items: end;
  justify-content: space-between;
  gap: 7px;
}
.service-growth-bars i {
  width: 13%;
  height: 24%;
  border: 1px solid rgba(255,155,170,.34);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg,rgba(255,83,109,.44),rgba(255,83,109,.06));
}
.service-growth-bars i:nth-child(2) { height: 38%; }
.service-growth-bars i:nth-child(3) { height: 31%; }
.service-growth-bars i:nth-child(4) { height: 64%; }
.service-growth-bars i:nth-child(5) { height: 83%; }
.service-path-art-grow .service-art-caption { color: #FFC1CB; }
.service-path-card-copy {
  display: grid;
  gap: 7px;
}
.service-path-card-copy strong {
  color: inherit;
  font-size: clamp(1.12rem, 1.65vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: -.035em;
}
.service-path-card-copy > span {
  color: #5D3C44;
  font-size: .79rem;
  line-height: 1.5;
}
.service-path-card-grow .service-path-card-copy > span { color: #F0D8DD; }
.service-path-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.service-path-tags span {
  padding: 5px 7px;
  border: 1px solid rgba(121,9,31,.16);
  border-radius: 3px;
  color: #79091F;
  font-size: .56rem;
  font-weight: 750;
}
.service-path-card-grow .service-path-tags span {
  color: #FFE1E6;
  border-color: rgba(255,225,230,.26);
}
.service-detail-section { padding-block: clamp(54px, 7vw, 88px); }
.service-build-section {
  background: #FFF4F5;
  color: #321018;
}
.service-section-heading {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(280px, .7fr);
  align-items: end;
  gap: clamp(24px, 5vw, 72px);
  margin-bottom: 30px;
}
.service-section-heading h2 {
  margin: 6px 0 0;
  color: #4B0818;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -.045em;
}
.service-section-heading .lede {
  max-width: 56ch;
  margin: 0 0 3px;
  font-size: .97rem;
  line-height: 1.65;
}
.service-offer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}
.service-offer-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 278px;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(19px, 2.2vw, 27px);
  border: 1px solid rgba(121,9,31,.15);
  border-top: 4px solid #D91635;
  border-radius: 7px;
  color: #321018;
  text-decoration: none;
  background: #FFFFFF;
  box-shadow: 0 12px 28px rgba(91,13,30,.08);
  transform: translateY(0);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .25s ease, box-shadow .3s ease;
}
.service-offer-card:hover {
  border-color: rgba(201,22,53,.48);
  box-shadow: 0 22px 42px rgba(91,13,30,.16);
  transform: translateY(-5px);
}
.service-offer-index {
  position: absolute;
  top: 17px;
  right: 18px;
  color: #A40D27;
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .1em;
}
.service-offer-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 5px;
  color: #A40D27;
  background: #FBE2E7;
  transition: transform .3s ease, color .3s ease, background .3s ease;
}
.service-offer-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.service-offer-card:hover .service-offer-icon { transform: translateY(-3px) rotate(-4deg); }
.service-offer-card h3 {
  margin: 0 0 9px;
  color: inherit;
  font-size: 1.08rem;
  line-height: 1.28;
}
.service-offer-card p {
  margin: 0 0 20px;
  color: #5D3C44;
  font-size: .87rem;
  line-height: 1.6;
}
.service-offer-link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(121,9,31,.14);
  color: #A40D27;
  font-size: .73rem;
  font-weight: 850;
}
.service-offer-link > span {
  display: inline-block;
  font-size: 1rem;
  transition: transform .25s ease;
}
.service-offer-card:hover .service-offer-link > span { transform: translate(3px,-2px); }
.service-offer-featured {
  border-color: #79091F;
  border-top-color: #FF7185;
  color: #FFFFFF;
  background: linear-gradient(150deg,#79091F,#4B0818 82%);
  box-shadow: 0 16px 34px rgba(91,13,30,.2);
}
.service-offer-featured .service-offer-index { color: #FFC1CB; }
.service-offer-featured .service-offer-icon { color: #FFFFFF; background: rgba(255,255,255,.14); }
.service-offer-featured p { color: #F3DDE1; }
.service-offer-featured .service-offer-link {
  color: #FFFFFF;
  border-color: rgba(255,255,255,.24);
}
.service-grow-section .service-section-heading .folio,
.service-grow-section .service-section-heading h2,
.service-grow-section .service-section-heading .lede { color: #FFFFFF; }
.service-grow-section .service-offer-card {
  border-color: rgba(255,255,255,.3);
  border-top-color: #FFC1CB;
  color: #321018;
  background: #FFF9F7;
}
.service-grow-section .service-offer-card p { color: #5D3C44; }
.service-grow-section .service-offer-card .service-offer-index { color: #A40D27; }
.service-grow-section .service-offer-card .service-offer-icon { color: #A40D27; background: #FBE2E7; }
.service-grow-section .service-offer-card .service-offer-link { color: #A40D27; border-color: rgba(121,9,31,.16); }
.service-grow-section .service-offer-featured {
  border-color: rgba(255,255,255,.24);
  color: #FFFFFF;
  background: linear-gradient(150deg,#4B0818,#26070E);
}
.service-grow-section .service-offer-featured .service-offer-index { color: #FFC1CB; }
.service-grow-section .service-offer-featured .service-offer-icon { color: #FFFFFF; background: rgba(255,255,255,.14); }
.service-grow-section .service-offer-featured p { color: #F3DDE1; }
.service-grow-section .service-offer-featured .service-offer-link { color: #FFFFFF; border-color: rgba(255,255,255,.24); }

:root[data-theme="dark"] .service-build-section {
  background: #100E0F;
  color: #FAF4F4;
}
:root[data-theme="dark"] .service-build-section .service-section-heading h2 { color: #FAF4F4; }
:root[data-theme="dark"] .service-offer-card,
:root[data-theme="dark"] .service-grow-section .service-offer-card {
  border-color: rgba(255,255,255,.13);
  border-top-color: #FF7185;
  color: #FAF4F4;
  background: linear-gradient(145deg,#191516,#111011 74%,#21090E);
  box-shadow: 0 14px 32px rgba(0,0,0,.3);
}
:root[data-theme="dark"] .service-offer-card p,
:root[data-theme="dark"] .service-grow-section .service-offer-card p { color: #D2C4C7; }
:root[data-theme="dark"] .service-offer-card .service-offer-index,
:root[data-theme="dark"] .service-grow-section .service-offer-card .service-offer-index { color: #FF9AA7; }
:root[data-theme="dark"] .service-offer-card .service-offer-icon,
:root[data-theme="dark"] .service-grow-section .service-offer-card .service-offer-icon {
  color: #FF9AA7;
  background: rgba(255,83,109,.15);
}
:root[data-theme="dark"] .service-offer-card .service-offer-link,
:root[data-theme="dark"] .service-grow-section .service-offer-card .service-offer-link {
  color: #FF9AA7;
  border-color: rgba(255,255,255,.17);
}
:root[data-theme="dark"] .service-offer-featured,
:root[data-theme="dark"] .service-grow-section .service-offer-featured {
  border-color: rgba(255,113,133,.48);
  border-top-color: #FF9AA7;
  color: #FFFFFF;
  background: linear-gradient(145deg,#8E0C27,#3A0B13 82%);
}
:root[data-theme="dark"] .service-offer-featured p,
:root[data-theme="dark"] .service-grow-section .service-offer-featured p { color: #F3DDE1; }
:root[data-theme="dark"] .service-offer-featured .service-offer-index,
:root[data-theme="dark"] .service-grow-section .service-offer-featured .service-offer-index { color: #FFE1E6; }
:root[data-theme="dark"] .service-offer-featured .service-offer-icon,
:root[data-theme="dark"] .service-grow-section .service-offer-featured .service-offer-icon {
  color: #FFFFFF;
  background: rgba(255,255,255,.14);
}
:root[data-theme="dark"] .service-offer-featured .service-offer-link,
:root[data-theme="dark"] .service-grow-section .service-offer-featured .service-offer-link {
  color: #FFFFFF;
  border-color: rgba(255,255,255,.24);
}
:root[data-theme="dark"] .service-offer-card:focus-visible { outline-color: #FF9AA7; }
:root[data-theme="dark"] .service-offer-featured:focus-visible { outline-color: #FFFFFF; }
:root[data-theme="dark"] .service-path-card-build {
  border-color: rgba(255,113,133,.35);
  color: #FAF4F4;
  background: linear-gradient(150deg,#211619,#111011 80%);
}
:root[data-theme="dark"] .service-path-card-grow {
  border-color: rgba(255,113,133,.45);
  background: linear-gradient(155deg,#65091E,#1B0A0E 80%);
}
:root[data-theme="dark"] .service-path-card-top { color: #FF9AA7; }
:root[data-theme="dark"] .service-path-card-grow .service-path-card-top { color: #FFE1E6; }
:root[data-theme="dark"] .service-path-art {
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),
    #211619;
  background-size: 18px 18px;
}
:root[data-theme="dark"] .service-path-art::after { border-color: rgba(255,113,133,.25); }
:root[data-theme="dark"] .service-path-card-copy > span { color: #D2C4C7; }
:root[data-theme="dark"] .service-path-card-grow .service-path-card-copy > span { color: #F3DDE1; }
:root[data-theme="dark"] .service-path-tags span { color: #FFB5C0; border-color: rgba(255,113,133,.3); }
:root[data-theme="dark"] .service-path-card-grow .service-path-tags span { color: #FFE1E6; border-color: rgba(255,225,230,.26); }
:root[data-theme="dark"] .service-path-art-grow {
  background:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),
    #10090B;
  background-size: 18px 18px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .service-build-section { background: #100E0F; color: #FAF4F4; }
  :root:not([data-theme]) .service-build-section .service-section-heading h2 { color: #FAF4F4; }
  :root:not([data-theme]) .service-offer-card,
  :root:not([data-theme]) .service-grow-section .service-offer-card {
    border-color: rgba(255,255,255,.13);
    border-top-color: #FF7185;
    color: #FAF4F4;
    background: linear-gradient(145deg,#191516,#111011 74%,#21090E);
  }
  :root:not([data-theme]) .service-offer-card p,
  :root:not([data-theme]) .service-grow-section .service-offer-card p { color: #D2C4C7; }
  :root:not([data-theme]) .service-offer-card .service-offer-index,
  :root:not([data-theme]) .service-grow-section .service-offer-card .service-offer-index { color: #FF9AA7; }
  :root:not([data-theme]) .service-offer-card .service-offer-icon,
  :root:not([data-theme]) .service-grow-section .service-offer-card .service-offer-icon { color: #FF9AA7; background: rgba(255,83,109,.15); }
  :root:not([data-theme]) .service-offer-card .service-offer-link,
  :root:not([data-theme]) .service-grow-section .service-offer-card .service-offer-link { color: #FF9AA7; border-color: rgba(255,255,255,.17); }
  :root:not([data-theme]) .service-offer-featured,
  :root:not([data-theme]) .service-grow-section .service-offer-featured { color: #FFFFFF; background: linear-gradient(145deg,#8E0C27,#3A0B13 82%); }
  :root:not([data-theme]) .service-offer-featured p,
  :root:not([data-theme]) .service-grow-section .service-offer-featured p { color: #F3DDE1; }
  :root:not([data-theme]) .service-offer-featured .service-offer-index,
  :root:not([data-theme]) .service-grow-section .service-offer-featured .service-offer-index { color: #FFE1E6; }
  :root:not([data-theme]) .service-offer-featured .service-offer-icon,
  :root:not([data-theme]) .service-grow-section .service-offer-featured .service-offer-icon { color: #FFFFFF; background: rgba(255,255,255,.14); }
  :root:not([data-theme]) .service-offer-featured .service-offer-link,
  :root:not([data-theme]) .service-grow-section .service-offer-featured .service-offer-link { color: #FFFFFF; border-color: rgba(255,255,255,.24); }
  :root:not([data-theme]) .service-offer-card:focus-visible { outline-color: #FF9AA7; }
  :root:not([data-theme]) .service-offer-featured:focus-visible { outline-color: #FFFFFF; }
  :root:not([data-theme]) .service-path-card-build { border-color: rgba(255,113,133,.35); color: #FAF4F4; background: linear-gradient(150deg,#211619,#111011 80%); }
  :root:not([data-theme]) .service-path-card-grow { border-color: rgba(255,113,133,.45); background: linear-gradient(155deg,#65091E,#1B0A0E 80%); }
  :root:not([data-theme]) .service-path-card-top { color: #FF9AA7; }
  :root:not([data-theme]) .service-path-card-grow .service-path-card-top { color: #FFE1E6; }
  :root:not([data-theme]) .service-path-art { background: linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),#211619; background-size: 18px 18px; }
  :root:not([data-theme]) .service-path-art::after { border-color: rgba(255,113,133,.25); }
  :root:not([data-theme]) .service-path-card-copy > span { color: #D2C4C7; }
  :root:not([data-theme]) .service-path-card-grow .service-path-card-copy > span { color: #F3DDE1; }
  :root:not([data-theme]) .service-path-tags span { color: #FFB5C0; border-color: rgba(255,113,133,.3); }
  :root:not([data-theme]) .service-path-card-grow .service-path-tags span { color: #FFE1E6; border-color: rgba(255,225,230,.26); }
  :root:not([data-theme]) .service-path-art-grow { background: linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),#10090B; background-size: 18px 18px; }
}

@media (max-width: 1000px) {
  .services-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .services-hero-copy { max-width: 720px; }
  .service-path-showcase { width: min(100%, 760px); margin-inline: auto; }
  .service-path-card { min-height: 350px; }
}
@media (max-width: 700px) {
  .services-hero { padding-block: 44px 56px; }
  .services-hero-grid { gap: 28px; }
  .services-hero-copy h1 { font-size: clamp(2.45rem, 10vw, 3.4rem); }
  .service-path-showcase { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .service-path-card { min-height: 0; }
  .service-path-art { min-height: 138px; }
  .service-section-heading { grid-template-columns: minmax(0,1fr); gap: 12px; margin-bottom: 24px; }
  .service-section-heading .lede { max-width: 62ch; }
  .service-offer-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .service-offer-card { min-height: 0; }
}
@media (max-width: 380px) {
  .service-path-card { padding: 15px; }
  .service-path-tags { gap: 5px; }
  .service-path-tags span { font-size: .52rem; }
}
@media (prefers-reduced-motion: reduce) {
  .service-path-card,
  .service-path-card-arrow,
  .service-path-art::after,
  .service-build-window,
  .service-path-art-grow svg .service-growth-line,
  .service-offer-card,
  .service-offer-icon,
  .service-offer-link > span { transition: none; }
  .service-path-card:hover,
  .service-offer-card:hover { transform: none; }
}

/* Insights page: a clear red-and-paper editorial palette with a legible workflow visual. */
.blog-hero-visual {
  border-color: color-mix(in srgb, var(--brass) 28%, var(--rule));
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--surface);
  background-image: linear-gradient(color-mix(in srgb, var(--brass) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--brass) 9%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  box-shadow: var(--shadow);
}
.blog-hero-visual::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--brass) 13%, transparent), transparent 70%);
  filter: none;
}
.blog-hero-visual::after { opacity: .14; }
.blog-visual-orbit { border-color: color-mix(in srgb, var(--brass) 34%, transparent); }
.blog-visual-orbit-two { border-color: color-mix(in srgb, var(--brass-2) 28%, transparent); }
.blog-connection-path { stroke: color-mix(in srgb, var(--brass) 46%, transparent); }
.blog-connection-path-secondary { stroke: color-mix(in srgb, var(--brass-2) 42%, transparent); }
.blog-connection-pulse,
.blog-visual-spark,
.blog-spark-two { background: var(--brass); fill: var(--brass); box-shadow: 0 0 14px color-mix(in srgb, var(--brass) 54%, transparent); }
.blog-visual-eyebrow,
.blog-visual-center-label,
.blog-visual-center-foot,
.blog-visual-caption { color: var(--ink-soft); }
.blog-visual-node {
  border-color: var(--rule);
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: none;
}
.blog-visual-node:hover { border-color: var(--brass); box-shadow: var(--shadow), var(--glow-brass); }
.blog-visual-node > span { color: #FFFFFF; background: var(--red-900); }
.blog-visual-node small { color: var(--ink-faint); }
.blog-visual-caption { border-color: var(--rule); background: var(--surface); }
.blog-visual-caption i,
.blog-visual-center-foot b { color: var(--brass-deep); }
.blog-library { background-color: var(--surface-2); }
.blog-library-heading h2,
.blog-results-heading h3 { color: var(--ink); }
.blog-library-note { color: var(--ink-soft); }
.blog-featured {
  border-color: color-mix(in srgb, var(--brass) 36%, var(--rule));
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.blog-featured-ai .featured-art {
  background-color: #10090C;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px), radial-gradient(ellipse at 50% 50%, #3A0B15, #10090C 72%);
  background-size: 26px 26px, 26px 26px, auto;
}
.blog-featured-ai .featured-photo { opacity: .05; filter: saturate(.5); }
.blog-featured-ai .featured-art-top > span:first-child { background: #F21D3B; }
.blog-featured-ai .featured-art-top > span:nth-child(2) { background: #FF6978; }
.blog-featured-ai .featured-art::before,
.blog-featured-ai .featured-art::after { border-color: rgba(255,105,120,.28); }
.blog-featured-ai .featured-art::after { background: none; }
.blog-featured-ai .featured-art-top { color: rgba(255,255,255,.8); }
.blog-featured-ai .featured-flow-step {
  border-color: rgba(255,255,255,.24);
  background: rgba(10,10,10,.88);
  backdrop-filter: none;
}
.blog-featured-ai .featured-flow-step > span { color: #FF6978; }
.blog-featured-ai .featured-flow-step strong { color: #FFFFFF; }
.blog-featured-ai .featured-flow-step small { color: #E0D5D7; }
.blog-featured-ai .featured-flow-step.featured-step-active {
  border-color: #FF6978;
  background: #3A0B15;
}
.blog-featured-ai .featured-flow > i { color: #FF6978; }
.blog-featured-ai .featured-art-caption { color: #FFFFFF; }
.blog-featured-ai .featured-pulse { background: #FF6978; box-shadow: 0 0 12px #FF6978; }
.blog-featured-ai .featured-copy { background: var(--surface); }
.blog-featured-ai .featured-copy h3 a { color: var(--ink); }
.blog-featured-ai .featured-copy h3 a:hover,
.blog-featured-ai .featured-copy h3 a:focus-visible { color: var(--brass-deep); }
.blog-featured-ai .featured-copy > p { color: var(--ink-soft); }
.blog-featured-ai .featured-label,
.blog-featured-ai .blog-meta { color: var(--ink-faint); }
.blog-featured-ai .featured-footer { border-color: var(--rule-soft); }
.blog-featured-ai .featured-footer .btn-text { color: var(--brass-deep); }
.blog-featured-ai .tag.forest {
  color: var(--brass-deep);
  -webkit-text-fill-color: currentColor;
  border-color: color-mix(in srgb, var(--brass) 28%, var(--rule));
  background: var(--brass-tint);
}

/* Client stories replace empty proof templates with the work the client has described. */
.client-work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}
.client-work-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 340px;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid color-mix(in srgb, var(--brass) 28%, var(--rule));
  border-top: 5px solid var(--brass-deep);
  border-radius: 4px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.client-work-card:hover,
.client-work-card:focus-within {
  transform: translateY(-5px);
  border-color: var(--brass);
  box-shadow: var(--shadow), var(--glow-brass);
}
.client-work-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.client-work-index { color: var(--brass-deep); font-size: .64rem; font-weight: 800; letter-spacing: .12em; }
.client-work-location { color: var(--ink-faint); font-size: .7rem; font-weight: 700; }
.client-work-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 22px 0 14px;
  border-radius: 4px;
  color: #FFFFFF;
  background: var(--red-900);
}
.client-work-icon svg { width: 32px; height: 32px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.client-work-card h3 { max-width: 24ch; margin-bottom: 10px; color: var(--ink); font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.3; }
.client-work-card p { color: var(--ink-soft); font-size: .88rem; }
.client-work-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 18px; }
.client-work-tags span { padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--brass) 28%, var(--rule)); border-radius: 2px; color: var(--brass-deep); background: var(--brass-tint); font-size: .62rem; font-weight: 700; }
.client-work-attribution { display: block; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--rule-soft); color: var(--ink-soft); font-size: .72rem; font-weight: 800; }
.client-work-attribution i { padding-inline: 4px; color: var(--brass-deep); font-style: normal; }

/* Selected-work cards use service details instead of invented metrics. */
.case-stories-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 16px;
}
.case-story.case-row {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid color-mix(in srgb, var(--brass) 28%, var(--rule));
  border-top: 5px solid var(--brass-deep);
  border-radius: 4px;
  background: var(--surface);
}
.case-story-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.case-story-number { display: flex; align-items: baseline; gap: 10px; color: var(--brass-deep); font-size: 1.2rem; font-weight: 800; }
.case-story-number small { color: var(--ink-faint); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.case-story .case-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.case-story .tag { margin: 0; }
.case-story-body { min-width: 0; }
.case-story-kicker { color: var(--brass-deep); font-size: .6rem; font-weight: 800; letter-spacing: .13em; }
.case-story-body h2 { margin: 8px 0 10px; color: var(--ink); font-size: clamp(1.35rem, 2.5vw, 1.8rem); line-height: 1.2; }
.case-story-body p { margin: 0; color: var(--ink-soft); font-size: .86rem; }
.case-story-deliverables { display: grid; gap: 7px; }
.case-story-deliverables span { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 11px; border: 1px solid var(--rule); color: var(--ink); background: var(--surface-2); font-size: .72rem; font-weight: 700; }
.case-story-deliverables i { flex: 0 0 auto; color: var(--brass-deep); font-size: .62rem; font-style: normal; font-weight: 800; }
.case-story-footer { display: grid; gap: 5px; margin-top: auto; padding: 13px 15px; border-left: 4px solid #A40D27; color: #FFFFFF; background: #79091F; }
.case-story-footer span { color: #FFE1E6; font-size: .59rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.case-story-footer strong { font-size: .75rem; line-height: 1.5; }

/* Dark-theme hover text stays bright on dark cards. */
:root[data-theme="dark"] .feature-card:hover h3,
:root[data-theme="dark"] .path-card:hover h3,
:root[data-theme="dark"] .vision-card:hover h3,
:root[data-theme="dark"] .journey-card:hover h3,
:root[data-theme="dark"] .faq-item[open] summary { color: #FF6978; }
:root[data-theme="dark"] .client-work-card {
  border-color: rgba(255,105,120,.28);
  border-top-color: #FF4058;
  color: #F7F7F7;
  background: linear-gradient(145deg, #151515, #101010 70%, #26090E);
}
:root[data-theme="dark"] .client-work-card:hover,
:root[data-theme="dark"] .client-work-card:focus-within { border-color: #FF6978; }
:root[data-theme="dark"] .client-work-index,
:root[data-theme="dark"] .client-work-card h3 { color: #FF9AA7; }
:root[data-theme="dark"] .client-work-location,
:root[data-theme="dark"] .client-work-card p,
:root[data-theme="dark"] .client-work-attribution { color: #E0D5D7; }
:root[data-theme="dark"] .client-work-icon { color: #FFFFFF; background: #A40D27; }
:root[data-theme="dark"] .client-work-tags span { border-color: rgba(255,105,120,.28); color: #FFE1E6; background: rgba(164,13,39,.22); }
:root[data-theme="dark"] .client-work-attribution { border-color: rgba(255,255,255,.16); }
:root[data-theme="dark"] .client-work-attribution i { color: #FF6978; }
:root[data-theme="dark"] .case-story.case-row {
  border-color: rgba(255,105,120,.25);
  border-top-color: #FF4058;
  background: linear-gradient(145deg, #151515, #101010 70%, #26090E);
}
:root[data-theme="dark"] .case-story .case-tags .tag {
  border-color: rgba(255,105,120,.3);
  color: #FFE1E6;
  -webkit-text-fill-color: #FFE1E6;
  background: rgba(164,13,39,.32);
}
:root[data-theme="dark"] .case-story-number,
:root[data-theme="dark"] .case-story-kicker,
:root[data-theme="dark"] .case-story-deliverables i { color: #FF6978; }
:root[data-theme="dark"] .case-story-number small { color: #D3D3D3; }
:root[data-theme="dark"] .case-story-body h2,
:root[data-theme="dark"] .case-story-deliverables span { color: #F7F7F7; }
:root[data-theme="dark"] .case-story-body p { color: #D3D3D3; }
:root[data-theme="dark"] .case-story-deliverables span { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
:root[data-theme="dark"] .case-story-footer { border-left-color: #FF4058; background: linear-gradient(110deg, #79091F, #3A0B15); }
:root[data-theme="dark"] .case-story-footer span { color: #FFE1E6; }
:root[data-theme="dark"] .blog-library {
  color: #F7F7F7;
  background: linear-gradient(135deg, #080808, #111111 68%, #26090E);
}
:root[data-theme="dark"] .blog-library-heading h2,
:root[data-theme="dark"] .blog-results-heading h3 { color: #F7F7F7; }
:root[data-theme="dark"] .blog-library-note { color: #D3D3D3; }
:root[data-theme="dark"] .blog-featured {
  border-color: rgba(255,105,120,.34);
  background: #111111;
}
:root[data-theme="dark"] .blog-featured-ai .featured-copy { background: #111111; }
:root[data-theme="dark"] .blog-featured-ai .featured-copy h3 a { color: #F7F7F7; }
:root[data-theme="dark"] .blog-featured-ai .featured-copy h3 a:hover,
:root[data-theme="dark"] .blog-featured-ai .featured-copy h3 a:focus-visible { color: #FF9AA7; }
:root[data-theme="dark"] .blog-featured-ai .featured-copy > p { color: #D3D3D3; }
:root[data-theme="dark"] .blog-featured-ai .featured-label,
:root[data-theme="dark"] .blog-featured-ai .blog-meta { color: #B8ADB0; }
:root[data-theme="dark"] .blog-featured-ai .featured-footer { border-color: rgba(255,255,255,.16); }
:root[data-theme="dark"] .blog-featured-ai .featured-footer .btn-text { color: #FF9AA7; }
:root[data-theme="dark"] .blog-featured-ai .tag.forest { border-color: rgba(255,105,120,.3); color: #FFE1E6; -webkit-text-fill-color: #FFE1E6; background: rgba(164,13,39,.28); }
:root[data-theme="dark"] .blog-hero-visual {
  border-color: rgba(255,105,120,.36);
  background-color: #111111;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px), radial-gradient(ellipse at 50% 48%, #3A0B15, #111111 72%);
  background-size: 24px 24px, 24px 24px, auto;
  box-shadow: 0 24px 56px rgba(0,0,0,.4);
}
:root[data-theme="dark"] .blog-visual-eyebrow,
:root[data-theme="dark"] .blog-visual-center-label,
:root[data-theme="dark"] .blog-visual-center-foot,
:root[data-theme="dark"] .blog-visual-caption { color: #F0DADD; }
:root[data-theme="dark"] .blog-visual-node { border-color: rgba(255,105,120,.3); color: #F7F7F7; background: #171313; }
:root[data-theme="dark"] .blog-visual-node small { color: #D3D3D3; }
:root[data-theme="dark"] .blog-visual-caption { border-color: rgba(255,105,120,.28); background: #171313; }
:root[data-theme="dark"] .blog-visual-node > span { color: #FFFFFF; background: #A40D27; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .feature-card:hover h3,
  :root:not([data-theme="light"]) .path-card:hover h3,
  :root:not([data-theme="light"]) .vision-card:hover h3,
  :root:not([data-theme="light"]) .journey-card:hover h3,
  :root:not([data-theme="light"]) .faq-item[open] summary { color: #FF6978; }
  :root:not([data-theme="light"]) .client-work-card {
    border-color: rgba(255,105,120,.28);
    border-top-color: #FF4058;
    color: #F7F7F7;
    background: linear-gradient(145deg, #151515, #101010 70%, #26090E);
  }
  :root:not([data-theme="light"]) .client-work-card:hover,
  :root:not([data-theme="light"]) .client-work-card:focus-within { border-color: #FF6978; }
  :root:not([data-theme="light"]) .client-work-index,
  :root:not([data-theme="light"]) .client-work-card h3 { color: #FF9AA7; }
  :root:not([data-theme="light"]) .client-work-location,
  :root:not([data-theme="light"]) .client-work-card p,
  :root:not([data-theme="light"]) .client-work-attribution { color: #E0D5D7; }
  :root:not([data-theme="light"]) .client-work-tags span { border-color: rgba(255,105,120,.28); color: #FFE1E6; background: rgba(164,13,39,.22); }
  :root:not([data-theme="light"]) .client-work-attribution { border-color: rgba(255,255,255,.16); }
  :root:not([data-theme="light"]) .client-work-attribution i { color: #FF6978; }
  :root:not([data-theme="light"]) .case-story.case-row { border-color: rgba(255,105,120,.25); border-top-color: #FF4058; background: linear-gradient(145deg, #151515, #101010 70%, #26090E); }
  :root:not([data-theme="light"]) .case-story .case-tags .tag { border-color: rgba(255,105,120,.3); color: #FFE1E6; -webkit-text-fill-color: #FFE1E6; background: rgba(164,13,39,.32); }
  :root:not([data-theme="light"]) .case-story-number,
  :root:not([data-theme="light"]) .case-story-kicker,
  :root:not([data-theme="light"]) .case-story-deliverables i { color: #FF6978; }
  :root:not([data-theme="light"]) .case-story-number small { color: #D3D3D3; }
  :root:not([data-theme="light"]) .case-story-body h2,
  :root:not([data-theme="light"]) .case-story-deliverables span { color: #F7F7F7; }
  :root:not([data-theme="light"]) .case-story-body p { color: #D3D3D3; }
  :root:not([data-theme="light"]) .case-story-deliverables span { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
  :root:not([data-theme="light"]) .case-story-footer { border-left-color: #FF4058; background: linear-gradient(110deg, #79091F, #3A0B15); }
  :root:not([data-theme="light"]) .blog-library { color: #F7F7F7; background: linear-gradient(135deg, #080808, #111111 68%, #26090E); }
  :root:not([data-theme="light"]) .blog-library-heading h2,
  :root:not([data-theme="light"]) .blog-results-heading h3 { color: #F7F7F7; }
  :root:not([data-theme="light"]) .blog-library-note { color: #D3D3D3; }
  :root:not([data-theme="light"]) .blog-featured { border-color: rgba(255,105,120,.34); background: #111111; }
  :root:not([data-theme="light"]) .blog-featured-ai .featured-copy { background: #111111; }
  :root:not([data-theme="light"]) .blog-featured-ai .featured-copy h3 a { color: #F7F7F7; }
  :root:not([data-theme="light"]) .blog-featured-ai .featured-copy h3 a:hover,
  :root:not([data-theme="light"]) .blog-featured-ai .featured-copy h3 a:focus-visible { color: #FF9AA7; }
  :root:not([data-theme="light"]) .blog-featured-ai .featured-copy > p { color: #D3D3D3; }
  :root:not([data-theme="light"]) .blog-featured-ai .featured-label,
  :root:not([data-theme="light"]) .blog-featured-ai .blog-meta { color: #B8ADB0; }
  :root:not([data-theme="light"]) .blog-featured-ai .featured-footer { border-color: rgba(255,255,255,.16); }
  :root:not([data-theme="light"]) .blog-featured-ai .featured-footer .btn-text { color: #FF9AA7; }
  :root:not([data-theme="light"]) .blog-featured-ai .tag.forest { border-color: rgba(255,105,120,.3); color: #FFE1E6; -webkit-text-fill-color: #FFE1E6; background: rgba(164,13,39,.28); }
  :root:not([data-theme="light"]) .blog-hero-visual {
    border-color: rgba(255,105,120,.36);
    background-color: #111111;
    background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px), radial-gradient(ellipse at 50% 48%, #3A0B15, #111111 72%);
    background-size: 24px 24px, 24px 24px, auto;
  }
  :root:not([data-theme="light"]) .blog-visual-eyebrow,
  :root:not([data-theme="light"]) .blog-visual-center-label,
  :root:not([data-theme="light"]) .blog-visual-center-foot,
  :root:not([data-theme="light"]) .blog-visual-caption { color: #F0DADD; }
  :root:not([data-theme="light"]) .blog-visual-node { border-color: rgba(255,105,120,.3); color: #F7F7F7; background: #171313; }
  :root:not([data-theme="light"]) .blog-visual-node small { color: #D3D3D3; }
  :root:not([data-theme="light"]) .blog-visual-caption { border-color: rgba(255,105,120,.28); background: #171313; }
}

@media (max-width: 760px) {
  .client-work-grid,
  .case-stories-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .client-work-card { min-height: 0; padding: 20px; }
  .client-work-top { align-items: flex-start; flex-direction: column; gap: 5px; }
  .case-story-top { align-items: flex-start; flex-direction: column; }
  .case-story.case-row { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .client-work-card,
  .blog-visual-node { transition: none; }
  .client-work-card:hover,
  .client-work-card:focus-within,
  .blog-visual-node:hover { transform: none; }
  .blog-visual-orbit,
  .blog-visual-center,
  .blog-visual-node,
  .blog-visual-spark,
  .blog-connection-pulse,
  .featured-pulse { animation: none; }
  .blog-connection-pulse { display: none; }
}