/* ==========================================================================
   IMVN Relaunch — Agency upgrade layer
   Loads AFTER style.css. Adds depth, motion, and cross-border storytelling
   while keeping every brand token (orange / black) from style.css.
   ========================================================================== */

:root {
  --brand-gradient: linear-gradient(135deg, #FB8301 0%, #FF6B00 55%, #D86E00 100%);
  --brand-gradient-soft: linear-gradient(135deg, #FFF4E8 0%, #FFE7CC 100%);
  --ink-gradient: radial-gradient(120% 120% at 20% 0%, #1A1A1C 0%, #0F0F10 60%);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-brand: 0 20px 50px -18px rgba(251, 131, 1, 0.55);
  --shadow-float: 0 30px 60px -24px rgba(15, 15, 16, 0.28);
}

/* --------------------------------------------------------------------------
   Global polish
   -------------------------------------------------------------------------- */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

::selection { background: rgba(251, 131, 1, 0.22); }

.section { position: relative; }

/* Section eyebrow gets a little leading rule for an editorial feel */
.eyebrow.eyebrow--rule {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.eyebrow.eyebrow--rule::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--brand-orange);
  border-radius: 2px;
}

/* Gradient text accent for hero + section leads */
.text-gradient {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   Scroll-reveal primitives
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal].is-visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-parallax] { transform: none !important; }
}

/* --------------------------------------------------------------------------
   Header — glassy on scroll
   -------------------------------------------------------------------------- */
.site-header {
  transition: box-shadow 0.25s ease, background 0.25s ease, backdrop-filter 0.25s ease;
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 10px 30px -18px rgba(15, 15, 16, 0.35);
}
.nav-links a { position: relative; }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 2px;
  background: var(--brand-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease-out-expo);
}
.nav-links a:hover::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   HERO — cinematic, cross-border collaboration
   -------------------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(90% 70% at 85% -10%, rgba(251, 131, 1, 0.10), transparent 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(251, 131, 1, 0.06), transparent 55%);
  padding-block: clamp(var(--space-8), 9vw, var(--space-10));
}
.hero .eyebrow { color: var(--brand-orange-dark); }
.hero h1 { letter-spacing: -0.02em; }
.hero h1 .text-gradient { display: inline; }

/* floating trust line under hero CTAs */
.hero-trustline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}
.hero-trustline .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-orange); }

/* ----- Hero collaboration scene (right column) ----- */
.collab-scene {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  background: var(--ink-gradient);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-float);
}
.collab-scene::before {
  content: '';
  position: absolute; inset: -25%;
  background:
    radial-gradient(circle at 28% 30%, rgba(251, 131, 1, 0.42), transparent 34%),
    radial-gradient(circle at 74% 72%, rgba(255, 168, 77, 0.24), transparent 40%);
  z-index: 0;
  animation: heroGlow 9s ease-in-out infinite alternate;
}
@keyframes heroGlow {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); }
  100% { transform: translate3d(3%, 2%, 0) scale(1.08); }
}
/* faint lat/long grid to read as "global map" */
.collab-scene::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(120% 120% at 50% 40%, #000 45%, transparent 78%);
  z-index: 0;
}
.collab-scene svg { position: relative; z-index: 1; width: 100%; height: 100%; display: block; }

/* routes: hidden dash offset until .is-live draws them */
.collab-route {
  fill: none;
  stroke: url(#routeGrad);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 8 10;
  opacity: 0.85;
}
[data-routemap].is-live .collab-route { animation: routeFlow 3.2s linear infinite; }
@keyframes routeFlow { to { stroke-dashoffset: -180; } }

/* a solid "drawing" line layered on top for the reveal */
.collab-route-draw {
  fill: none;
  stroke: rgba(255,255,255,0.85);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
}
[data-routemap].is-live .collab-route-draw { animation: routeDraw 2.4s var(--ease-out-expo) forwards; }
[data-routemap].is-static .collab-route-draw { stroke-dashoffset: 0; }
@keyframes routeDraw { to { stroke-dashoffset: 0; } }

/* country / creator nodes */
.node-ring { fill: none; stroke: var(--brand-orange); stroke-width: 2; opacity: 0.9; }
.node-core { fill: #fff; }
.node-core.brand { fill: var(--brand-orange); }
.node-pulse {
  fill: var(--brand-orange);
  opacity: 0.35;
  transform-origin: center;
}
[data-routemap].is-live .node-pulse { animation: nodePulse 2.6s ease-out infinite; }
@keyframes nodePulse {
  0% { transform: scale(1); opacity: 0.4; }
  80%, 100% { transform: scale(3); opacity: 0; }
}
.node-label {
  fill: rgba(255,255,255,0.86);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 11px;
  font-weight: 600;
}

/* travelling packet along the main route */
.route-packet { fill: #fff; filter: drop-shadow(0 0 6px rgba(251,131,1,0.9)); }
[data-routemap].is-live .route-packet {
  offset-path: path('M70,300 C150,250 210,150 330,120');
  animation: packetMove 3.4s var(--ease-out-expo) infinite;
}
@keyframes packetMove {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* floating creator avatar chips over the scene */
.creator-chip {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 7px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  animation: floatChip 6s ease-in-out infinite;
}
.creator-chip img,
.creator-chip .flag {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-orange-50); font-size: 0.85rem;
}
.creator-chip .role { color: var(--brand-orange-dark); }
.creator-chip.c1 { top: 12%; left: -6%; animation-delay: 0s; }
.creator-chip.c2 { top: 46%; right: -8%; animation-delay: 1.4s; }
.creator-chip.c3 { bottom: 10%; left: 6%; animation-delay: 0.7s; }
@keyframes floatChip {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .creator-chip, .collab-scene::before { animation: none; }
}

/* --------------------------------------------------------------------------
   Cross-border marquee ribbon (between hero and journeys)
   -------------------------------------------------------------------------- */
.crossborder-ribbon {
  border-block: 1px solid var(--border);
  background: var(--bg-alt);
  padding-block: var(--space-4);
  overflow: hidden;
}
.marquee {
  display: flex;
  gap: var(--space-8);
  width: max-content;
  animation: marquee 32s linear infinite;
}
.crossborder-ribbon:hover .marquee { animation-play-state: paused; }
.marquee span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.marquee span::before { content: '✦'; color: var(--brand-orange); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; } }

/* --------------------------------------------------------------------------
   Markets coverage band — factual cross-border footprint
   -------------------------------------------------------------------------- */
.coverage {
  background: var(--ink-gradient);
  color: #fff;
  overflow: hidden;
}
.coverage h2, .coverage h3 { color: #fff; }
.coverage p { color: rgba(255,255,255,0.72); }
.coverage .eyebrow { color: var(--brand-orange-light); }
.coverage-grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .coverage-grid { grid-template-columns: 0.95fr 1.05fr; } }
.coverage-stats { display: flex; flex-wrap: wrap; gap: var(--space-7); margin-top: var(--space-6); }
.coverage-stat .num {
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.coverage-stat .lbl { color: rgba(255,255,255,0.7); font-size: 0.9375rem; font-weight: 600; margin-top: var(--space-2); }

/* market map with pinned countries */
.market-map { position: relative; }
.market-map svg { width: 100%; height: auto; }
.map-land { fill: rgba(255,255,255,0.08); stroke: rgba(255,255,255,0.14); stroke-width: 1; }
.map-arc { fill: none; stroke: var(--brand-orange); stroke-width: 1.6; stroke-dasharray: 5 7; opacity: 0.75; }
.coverage.is-visible .map-arc { animation: routeFlow 2.6s linear infinite; }
.map-pin { fill: var(--brand-orange); stroke: #fff; stroke-width: 2; }
.map-pin-pulse { fill: var(--brand-orange); opacity: 0.4; transform-origin: center; animation: nodePulse 2.8s ease-out infinite; }
.map-label { fill: #fff; font-family: 'Be Vietnam Pro', sans-serif; font-size: 12px; font-weight: 700; }

/* --------------------------------------------------------------------------
   Journey cards — elevated, with directional glow
   -------------------------------------------------------------------------- */
.journey-card { position: relative; overflow: hidden; isolation: isolate; }
.journey-card::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 100% 0%, rgba(251,131,1,0.16), transparent 60%);
  opacity: 0; transition: opacity 0.4s ease; z-index: -1;
}
.journey-card:hover::after { opacity: 1; }
.journey-card--inbound { background: var(--ink-gradient); }
.journey-card--inbound::after { background: radial-gradient(60% 60% at 100% 0%, rgba(251,131,1,0.32), transparent 60%); }
.journey-card .journey-index {
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em;
  opacity: 0.55; text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Pillars — numbered, animated icon badges
   -------------------------------------------------------------------------- */
.pillar { position: relative; padding: var(--space-6); border-radius: var(--radius-md); transition: background 0.3s ease, transform 0.3s var(--ease-out-expo); }
.pillar:hover { background: var(--bg-alt); transform: translateY(-4px); }
.pillar .icon-badge { transition: transform 0.4s var(--ease-out-expo), background 0.3s ease; }
.pillar:hover .icon-badge { transform: rotate(-6deg) scale(1.08); background: var(--brand-orange); color: #fff; }
.pillar-index {
  position: absolute; top: var(--space-5); right: var(--space-5);
  font-size: 2.4rem; font-weight: 800; line-height: 1;
  color: var(--brand-orange-50);
}

/* --------------------------------------------------------------------------
   Solution + article + proof cards — richer hover
   -------------------------------------------------------------------------- */
.solution-card { position: relative; overflow: hidden; }
.solution-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--brand-gradient);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease-out-expo);
}
.solution-card:hover::before { transform: scaleX(1); }
.solution-card:hover .icon-badge { background: var(--brand-orange); color: #fff; }
.solution-card .card-link { transition: gap 0.2s ease; display: inline-flex; gap: 6px; }
.solution-card:hover .card-link { gap: 12px; }

.article-card { position: relative; }
.article-card .thumb { transition: transform 0.6s var(--ease-out-expo); }
.article-card:hover .thumb { transform: scale(1.06); }
.article-card .thumb-wrap { overflow: hidden; }

.proof-card {
  border-style: solid;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease;
}
.proof-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.proof-card .proof-kicker { display: block; color: var(--brand-orange); font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-3); }

/* --------------------------------------------------------------------------
   Dark CTA band — parallax glow
   -------------------------------------------------------------------------- */
.section-black { position: relative; overflow: hidden; }
.cta-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 60% at 20% 20%, rgba(251,131,1,0.25), transparent 60%),
    radial-gradient(45% 55% at 85% 90%, rgba(251,131,1,0.18), transparent 60%);
}
.section-black .container { position: relative; z-index: 1; }

/* buttons: shimmer on primary */
.btn-primary { position: relative; overflow: hidden; box-shadow: var(--shadow-brand); }
.btn-primary::after {
  content: '';
  position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s var(--ease-out-expo);
}
.btn-primary:hover::after { left: 130%; }

/* --------------------------------------------------------------------------
   Section title helper (kicker + heading + optional lead)
   -------------------------------------------------------------------------- */
.section-lead { color: var(--text-secondary); font-size: 1.0625rem; }

/* generic scroll-hint for hero */
.scroll-hint {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--text-muted); font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.scroll-hint .mouse {
  width: 22px; height: 34px; border: 2px solid var(--text-muted); border-radius: 12px; position: relative;
}
.scroll-hint .mouse::after {
  content: ''; position: absolute; left: 50%; top: 6px; width: 3px; height: 6px;
  background: var(--brand-orange); border-radius: 2px; transform: translateX(-50%);
  animation: scrollDot 1.6s ease-in-out infinite;
}
@keyframes scrollDot { 0% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 10px); } }
@media (prefers-reduced-motion: reduce) { .scroll-hint .mouse::after { animation: none; } }

/* ==========================================================================
   REVISION 2 — cinematic hero, video, photo cards, micro-interactions
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cinematic full-bleed hero (borderless image + scroll-zoom)
   -------------------------------------------------------------------------- */
.hero--cinematic {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex;
  align-items: center;
  padding-block: clamp(var(--space-9), 12vh, 160px);
  background: var(--brand-black);
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: -8% 0 -8% 0;     /* extra bleed so scroll-zoom never shows an edge */
  z-index: -2;
  will-change: transform;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15,15,16,0.92) 0%, rgba(15,15,16,0.72) 42%, rgba(15,15,16,0.32) 100%),
    linear-gradient(0deg, rgba(15,15,16,0.85) 0%, transparent 42%),
    radial-gradient(70% 60% at 85% 10%, rgba(251,131,1,0.18), transparent 60%);
}
.hero-inner {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  position: relative;
  z-index: 1;
  width: 100%;
}
@media (min-width: 992px) { .hero-inner { grid-template-columns: 1.05fr 0.95fr; } }

.hero-copy { color: #fff; max-width: 640px; }
.hero-copy .eyebrow { color: var(--brand-orange-light); }
.hero-copy h1 { color: #fff; letter-spacing: -0.02em; }
.hero-copy p { color: rgba(255,255,255,0.82); font-size: 1.0625rem; max-width: 520px; }

/* glass button for dark hero */
.btn-glass {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.34);
  color: #fff;
  backdrop-filter: blur(6px);
}
.btn-glass:hover { background: rgba(255,255,255,0.9); color: var(--brand-black); border-color: transparent; }

/* two-direction positioning block (replaces flat country list) */
.hero-directions { display: grid; gap: var(--space-3); margin-top: var(--space-6); max-width: 560px; }
@media (min-width: 560px) { .hero-directions { grid-template-columns: 1fr 1fr; } }
.dir {
  position: relative;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s var(--ease-out-expo), background 0.25s ease;
}
.dir::before {  /* spotlight glow follows cursor via --mx/--my */
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), rgba(251,131,1,0.28), transparent 60%);
  opacity: 0; transition: opacity 0.3s ease;
}
.dir:hover { transform: translateY(-3px); border-color: rgba(251,131,1,0.6); background: rgba(255,255,255,0.1); }
.dir:hover::before { opacity: 1; }
.dir-arrow {
  flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-orange); color: #fff; font-size: 1.1rem; font-weight: 700;
  transition: transform 0.3s var(--ease-out-expo);
}
.dir:hover .dir-arrow { transform: translate(3px, -3px) scale(1.08); }
.dir-txt { display: flex; flex-direction: column; line-height: 1.25; position: relative; }
.dir-txt b { font-size: 0.875rem; font-weight: 700; color: #fff; }
.dir-txt small { font-size: 0.75rem; color: rgba(255,255,255,0.62); }

/* collab scene becomes a glass card over the photo */
.hero-glass {
  background: rgba(15,15,16,0.42);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6);
}
.hero-glass.collab-scene::after { opacity: 0.5; }
.hero-scroll {
  position: absolute;
  left: 50%; bottom: var(--space-5);
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255,255,255,0.72);
}
.hero-scroll .mouse { border-color: rgba(255,255,255,0.6); }
@media (max-width: 991px) { .hero-scroll { display: none; } .hero-copy { max-width: none; } }

/* --------------------------------------------------------------------------
   Showreel / video demo
   -------------------------------------------------------------------------- */
.video-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--brand-black);
  box-shadow: var(--shadow-float);
  isolation: isolate;
}
.video-poster, .video-el {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.video-el { opacity: 0; transition: opacity 0.4s ease; }
.video-frame::after {  /* subtle scrim so the play button reads */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(15,15,16,0.5), transparent 55%);
  transition: opacity 0.4s ease;
}
.video-frame.is-playing .video-poster,
.video-frame.is-playing .video-play,
.video-frame.is-playing .video-note,
.video-frame.is-playing::after { opacity: 0; pointer-events: none; }
.video-frame.is-playing .video-el { opacity: 1; }
.video-poster { transition: transform 0.8s var(--ease-out-expo); }
.video-frame:hover .video-poster { transform: scale(1.04); }
.video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 2;
  width: 84px; height: 84px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--brand-orange); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-brand);
  transition: transform 0.25s var(--ease-out-expo), background 0.25s ease;
}
.video-play::before {  /* pulsing ring */
  content: ''; position: absolute; inset: -6px;
  border-radius: 50%; border: 2px solid rgba(251,131,1,0.6);
  animation: playPulse 2.2s ease-out infinite;
}
@keyframes playPulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } }
.video-play:hover { transform: translate(-50%, -50%) scale(1.08); background: var(--brand-orange-dark); }
.video-play .tri {
  width: 0; height: 0; margin-left: 5px;
  border-style: solid; border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
}
.video-note {
  position: absolute; left: 50%; bottom: var(--space-4); transform: translateX(-50%);
  z-index: 2; color: rgba(255,255,255,0.85); font-size: 0.8125rem; font-weight: 600;
  background: rgba(0,0,0,0.4); padding: 6px 12px; border-radius: var(--radius-pill);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .video-play::before { animation: none; } }

/* --------------------------------------------------------------------------
   Photo journey cards
   -------------------------------------------------------------------------- */
.journey-card--photo { color: #fff; background: var(--brand-black); }
.journey-card--photo p { color: rgba(255,255,255,0.8); }
.journey-card--photo::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: var(--img);
  background-size: cover; background-position: center;
  transform: scale(1.04);
  transition: transform 0.7s var(--ease-out-expo);
}
.journey-card--photo:hover::before { transform: scale(1.1); }
.journey-card--photo::after {  /* readability scrim + spotlight */
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 1;
  background:
    linear-gradient(0deg, rgba(15,15,16,0.9) 0%, rgba(15,15,16,0.55) 45%, rgba(15,15,16,0.35) 100%),
    radial-gradient(220px circle at var(--mx, 80%) var(--my, 0%), rgba(251,131,1,0.35), transparent 60%);
}
.journey-card--photo.journey-card--outbound::after {
  background:
    linear-gradient(0deg, rgba(15,15,16,0.9) 0%, rgba(15,15,16,0.5) 50%, rgba(216,110,0,0.35) 100%),
    radial-gradient(220px circle at var(--mx, 80%) var(--my, 0%), rgba(255,168,77,0.4), transparent 60%);
}
.journey-card--photo .journey-index { color: rgba(255,255,255,0.7); }

/* --------------------------------------------------------------------------
   Micro-interactions: magnetic buttons, ripple, card spotlight
   -------------------------------------------------------------------------- */
[data-magnetic] { transition: transform 0.2s var(--ease-out-expo); will-change: transform; }

.btn { position: relative; overflow: hidden; }
.ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(255,255,255,0.5); pointer-events: none;
  animation: ripple 0.6s var(--ease-out-expo);
}
.btn-secondary .ripple, .btn-glass .ripple { background: rgba(251,131,1,0.35); }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* mouse-follow highlight on solution cards */
.solution-card { --mx: 50%; --my: 50%; }
.solution-card::after {
  content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0;
  background: radial-gradient(200px circle at var(--mx) var(--my), rgba(251,131,1,0.12), transparent 60%);
  transition: opacity 0.3s ease; pointer-events: none;
}
.solution-card:hover::after { opacity: 1; }
.solution-card > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-magnetic] { transform: none !important; }
  .hero-bg img { transform: scale(1.02) !important; }
}

/* ==========================================================================
   REVISION 3 — animated people illustrations (Why IMVN) + rich proof cards
   ========================================================================== */

/* ---- Pillar figures (people → select → operate) ---- */
.pillar--fig { text-align: left; }
.pillar-figure {
  border-radius: var(--radius-md);
  background: linear-gradient(155deg, #fff 0%, var(--brand-orange-50) 100%);
  border: 1px solid var(--border);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  overflow: hidden;
}
.pillar-figure .fig { width: 100%; height: auto; display: block; }
.pillar-step {
  display: inline-block;
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--brand-orange-dark); margin-bottom: var(--space-2);
}
.pillar:hover .pillar-figure { border-color: var(--brand-orange); }

/* shared clean avatar */
.av-bg { fill: var(--brand-orange-50); }
.av-head, .av-body { fill: var(--brand-orange); }
.av.pick .av-bg { fill: var(--brand-orange); }
.av.pick .av-head, .av.pick .av-body { fill: #fff; }
.pick-ring { fill: none; stroke: var(--brand-orange); stroke-width: 2.5; }
.pick-check { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* FIG 1 — audience cluster */
.fig1 .av { opacity: 1; }
.fig1 .pin { opacity: 1; }
.fig1 .pin-shape { fill: var(--brand-orange); }
.fig1 .pin-dot { fill: #fff; }
.ground-pulse { fill: var(--brand-orange); opacity: 0; transform-box: fill-box; transform-origin: center; }
.pillar.is-visible .fig1 .av { animation: avIn 0.6s both; }
.pillar.is-visible .fig1 .a1 { animation-delay: 0.05s; }
.pillar.is-visible .fig1 .a5 { animation-delay: 0.15s; }
.pillar.is-visible .fig1 .a2 { animation-delay: 0.25s; }
.pillar.is-visible .fig1 .a3 { animation-delay: 0.35s; }
.pillar.is-visible .fig1 .a4 { animation-delay: 0.45s; }
.pillar.is-visible .fig1 .pin { animation: pinDrop 0.6s 0.2s both; }
.pillar.is-visible .fig1 .ground-pulse { animation: gpulse 2.6s ease-out 0.7s infinite; }
@keyframes avIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pinDrop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gpulse { 0% { transform: scale(0.6); opacity: 0.45; } 80%,100% { transform: scale(1.8); opacity: 0; } }

/* FIG 2 — scan + pick */
.fig2 .av.dim { opacity: 0.35; }
.fig2 .scan-line { stroke: var(--brand-orange); stroke-width: 2; opacity: 0; }
.fig2 .pick-ring { opacity: 0; transform-box: fill-box; transform-origin: center; }
.fig2 .pick-check { stroke-dasharray: 24; stroke-dashoffset: 24; }
.pillar.is-visible .fig2 .scan-line { animation: scan 1.5s ease-in-out 0.2s; }
.pillar.is-visible .fig2 .pick-ring { animation: popRing 0.5s var(--ease-out-expo) 0.95s both; }
.pillar.is-visible .fig2 .pick-check { animation: draw24 0.4s ease 1.2s both; }
.pillar.is-visible .fig2 .av.dim { animation: dimOut 0.5s 0.95s both; }
@keyframes scan { 0% { opacity: 0.9; transform: translateX(0); } 100% { opacity: 0; transform: translateX(190px); } }
@keyframes popRing { from { opacity: 0; transform: scale(0.5); } 60% { opacity: 1; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
@keyframes draw24 { to { stroke-dashoffset: 0; } }
@keyframes dimOut { from { opacity: 1; } to { opacity: 0.35; } }

/* FIG 3 — operate pipeline */
.fig3 .flow-line { fill: none; stroke: var(--brand-orange); stroke-width: 2; stroke-dasharray: 6 7; stroke-dashoffset: 170; opacity: 0.9; }
.fig3 .step-node { fill: #fff; stroke: var(--brand-orange); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.fig3 .step-ic { fill: none; stroke: var(--brand-orange); stroke-width: 2; stroke-linecap: round; }
.fig3 .step-lbl { fill: var(--text-secondary); font-family: 'Be Vietnam Pro', sans-serif; font-size: 11px; font-weight: 700; }
.fig3 .step { opacity: 0; }
.fig3 .flow-packet { fill: var(--brand-orange); opacity: 0; }
.pillar.is-visible .fig3 .flow-line { animation: drawFlow 0.9s ease 0.2s forwards; }
.pillar.is-visible .fig3 .s1 { animation: stepPop 0.4s var(--ease-out-expo) 0.5s both; }
.pillar.is-visible .fig3 .s2 { animation: stepPop 0.4s var(--ease-out-expo) 0.75s both; }
.pillar.is-visible .fig3 .s3 { animation: stepPop 0.4s var(--ease-out-expo) 1s both; }
.pillar.is-visible .fig3 .flow-packet { animation: packetFlow 2.8s var(--ease-out-expo) 1.2s infinite; }
@keyframes drawFlow { to { stroke-dashoffset: 0; } }
@keyframes stepPop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes packetFlow {
  0% { offset-distance: 0%; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.fig3 .flow-packet { offset-path: path('M52,88 H206'); }

@media (prefers-reduced-motion: reduce) {
  .fig1 .av, .fig1 .pin, .fig2 .pick-ring, .fig3 .step { opacity: 1 !important; animation: none !important; }
  .fig2 .pick-check { stroke-dashoffset: 0 !important; }
  .fig3 .flow-line { stroke-dashoffset: 0 !important; }
  .ground-pulse, .fig2 .scan-line, .fig3 .flow-packet { animation: none !important; }
}

/* ---- Rich proof cards (Selected work) ---- */
.proof-card--rich {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-style: solid;
  background: #fff;
  position: relative;
  --mx: 70%; --my: 0%;
  transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s ease, border-color 0.35s ease;
}
.proof-card--rich:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.proof-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-dark) 100%);
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.proof-media::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(200px circle at var(--mx) var(--my), rgba(255,255,255,0.35), transparent 55%);
  opacity: 0; transition: opacity 0.3s ease;
}
.proof-card--rich:hover .proof-media::before { opacity: 1; }
.proof-media::after {  /* subtle grid to read as "work" tile */
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(120% 120% at 20% 100%, #000 40%, transparent 75%);
  mask-image: radial-gradient(120% 120% at 20% 100%, #000 40%, transparent 75%);
}
.proof-num {
  position: relative; z-index: 1;
  font-size: 3.4rem; font-weight: 800; line-height: 1;
  color: rgba(255,255,255,0.92);
  padding: 0 var(--space-5) var(--space-4);
}
.proof-arrow {
  position: absolute; top: var(--space-4); right: var(--space-4); z-index: 1;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.2); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700;
  transition: transform 0.3s var(--ease-out-expo), background 0.3s ease, color 0.3s ease;
}
.proof-card--rich:hover .proof-arrow { transform: translate(3px, -3px) scale(1.06); background: #fff; color: var(--brand-orange-dark); }
.proof-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.proof-text { color: var(--text-muted); font-size: 0.9375rem; margin: 0; }
.proof-cta {
  margin-top: auto; color: var(--brand-orange); font-weight: 800; font-size: 0.875rem;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.3s var(--ease-out-expo), transform 0.3s var(--ease-out-expo);
}
.proof-card--rich:hover .proof-cta { opacity: 1; transform: none; }
.proof-shine {
  position: absolute; top: 0; left: -60%; width: 40%; height: 100%; z-index: 2;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-18deg); pointer-events: none;
  transition: left 0.75s var(--ease-out-expo);
}
.proof-card--rich:hover .proof-shine { left: 130%; }

/* ==========================================================================
   REVISION 4 — Solutions page (breadcrumb on dark hero, process timeline)
   ========================================================================== */

/* breadcrumb sitting on the dark cinematic hero */
.hero-copy .breadcrumb { color: rgba(255,255,255,0.7); }
.hero-copy .breadcrumb a { color: rgba(255,255,255,0.7); }
.hero-copy .breadcrumb a:hover { color: var(--brand-orange-light); }

/* compact hero for interior pages (shorter than the homepage) */
.hero--compact { min-height: min(74vh, 660px); }

/* solution card badge tint variants (direction-coded) */
.solution-card .badge-direction { margin-bottom: var(--space-3); }

/* process timeline — numbered steps joined by a brand line */
.process-grid { position: relative; }
@media (min-width: 768px) {
  .process-grid::before {
    content: '';
    position: absolute;
    top: 24px; left: 18%; right: 18%;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-orange-50), var(--brand-orange), var(--brand-orange-50));
    z-index: 0;
  }
}
.process-grid .pillar { position: relative; z-index: 1; }
.process-grid .pillar-number {
  background: #fff;
  transition: transform 0.3s var(--ease-out-expo), background 0.3s ease, color 0.3s ease;
}
.process-grid .pillar:hover .pillar-number {
  background: var(--brand-orange);
  color: #fff;
  transform: scale(1.08);
}

/* interior-page solution grid: give cards a touch more presence */
.solutions-cards .solution-card { min-height: 240px; }

/* ==========================================================================
   REVISION 5 — feature solution cards + solution-detail hero (flowmaps)
   ========================================================================== */

/* ---- shared flowmap primitives (used by cards + detail heroes) ---- */
.fm-route { fill: none; stroke: var(--brand-orange-light); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 7 8; opacity: 0.85; animation: routeFlow 3s linear infinite; }
.fm-route.faint { opacity: 0.4; }
.fm-node { fill: #fff; }
.fm-node.vn { fill: var(--brand-orange); }
.fm-ring { fill: none; stroke: var(--brand-orange); stroke-width: 2; }
.fm-pulse { fill: var(--brand-orange); opacity: 0.4; transform-box: fill-box; transform-origin: center; animation: nodePulse 2.6s ease-out infinite; }
.fm-label { fill: rgba(255,255,255,0.82); font-family: 'Be Vietnam Pro', sans-serif; font-size: 12px; font-weight: 700; }
.fm-cap { fill: rgba(255,255,255,0.55); font-family: 'Be Vietnam Pro', sans-serif; font-size: 11px; font-weight: 600; }
.fm-packet { fill: #fff; filter: drop-shadow(0 0 5px rgba(251,131,1,0.9)); animation: packetFlow 3.2s var(--ease-out-expo) infinite; }
.fm-packet.rev { animation-direction: reverse; }
.fm-packet.d2 { animation-delay: 1.4s; }
.fm-bar { fill: var(--brand-orange); transform-box: fill-box; transform-origin: bottom; animation: barRise 1.5s var(--ease-out-expo) infinite alternate; }
.fm-bar.b2 { animation-delay: 0.2s; } .fm-bar.b3 { animation-delay: 0.4s; } .fm-bar.b4 { animation-delay: 0.6s; }
.fm-scan { stroke: var(--brand-orange); stroke-width: 2; opacity: 0.7; transform-box: fill-box; animation: scanCard 2.8s ease-in-out infinite; }
@keyframes barRise { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
@keyframes scanCard { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(104px); } }
@media (prefers-reduced-motion: reduce) {
  .fm-route, .fm-pulse, .fm-packet, .fm-bar, .fm-scan { animation: none !important; }
}

/* ---- feature solution cards ---- */
.solution-feature-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .solution-feature-grid { grid-template-columns: 1fr 1fr; } }
.solution-feature {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: #fff; overflow: hidden;
  --mx: 75%; --my: 0%;
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s ease, border-color 0.4s ease;
}
.solution-feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.sf-visual {
  position: relative; aspect-ratio: 16 / 7; overflow: hidden;
  background: var(--ink-gradient);
  display: flex; align-items: center; justify-content: center;
}
.sf-visual::before { content: ''; position: absolute; inset: 0; background: radial-gradient(85% 90% at 82% 0%, rgba(251,131,1,0.28), transparent 60%); }
.sf-visual::after {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 30%, #000 45%, transparent 80%);
  mask-image: radial-gradient(120% 120% at 50% 30%, #000 45%, transparent 80%);
}
.sf-index { position: absolute; top: 10px; left: 16px; z-index: 2; font-size: 2.4rem; font-weight: 800; color: rgba(255,255,255,0.16); line-height: 1; }
.sf-visual .badge-direction { position: absolute; top: 16px; right: 16px; z-index: 2; margin: 0; background: rgba(255,255,255,0.14); color: #fff; }
.sf-motif { position: relative; z-index: 1; width: 72%; max-width: 320px; }
.sf-motif svg { width: 100%; height: auto; display: block; }
.sf-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.sf-body h3 { margin-bottom: var(--space-1); }
.sf-body p { margin-bottom: 0; }
.sf-body .card-link { margin-top: auto; padding-top: var(--space-4); color: var(--brand-orange); font-weight: 800; display: inline-flex; gap: 6px; transition: gap 0.2s ease; }
.solution-feature:hover .sf-body .card-link { gap: 12px; }
.solution-feature .sf-shine {
  content: ''; position: absolute; top: 0; left: -60%; width: 42%; height: 100%; z-index: 3;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-18deg); pointer-events: none; transition: left 0.85s var(--ease-out-expo);
}
.solution-feature:hover .sf-shine { left: 145%; }

/* ---- solution-detail hero (graphic, non-photo) ---- */
.sol-hero {
  position: relative;
  background: var(--ink-gradient);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(var(--space-8), 9vw, 128px);
}
.sol-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 60% at 82% 12%, rgba(251,131,1,0.22), transparent 60%),
             radial-gradient(40% 50% at 0% 100%, rgba(251,131,1,0.12), transparent 60%);
}
.sol-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(120% 100% at 70% 20%, #000 40%, transparent 82%);
  mask-image: radial-gradient(120% 100% at 70% 20%, #000 40%, transparent 82%);
}
.sol-hero-inner { position: relative; z-index: 1; display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 992px) { .sol-hero-inner { grid-template-columns: 1.02fr 0.98fr; } }
.sol-hero .breadcrumb, .sol-hero .breadcrumb a { color: rgba(255,255,255,0.7); }
.sol-hero .breadcrumb a:hover { color: var(--brand-orange-light); }
.sol-hero .badge-direction { background: rgba(251,131,1,0.16); color: var(--brand-orange-light); }
.sol-hero h1 { color: #fff; letter-spacing: -0.02em; }
.sol-hero p { color: rgba(255,255,255,0.82); font-size: 1.0625rem; max-width: 520px; }
.sol-hero-figure {
  position: relative;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  background: rgba(15,15,16,0.35);
  backdrop-filter: blur(8px);
  padding: var(--space-6);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
.sol-hero-figure .fm-ghost {
  position: absolute; top: -14px; right: 6px; z-index: 0;
  font-size: 8rem; font-weight: 800; line-height: 1;
  color: rgba(255,255,255,0.05);
  pointer-events: none; user-select: none;
}
.sol-hero-figure svg { position: relative; z-index: 1; width: 100%; height: auto; display: block; }
.sol-hero-figcap { position: relative; z-index: 1; margin-top: var(--space-3); color: rgba(255,255,255,0.6); font-size: 0.8125rem; font-weight: 600; }

/* ==========================================================================
   REVISION 6 — interior body sections: proof cards, modules, FAQ, inputs
   (works across all detail pages via auto-reveal + these hover styles)
   ========================================================================== */

/* plain proof cards (Selected work on detail pages) — now interactive */
.proof-card:not(.proof-card--rich) {
  position: relative;
  overflow: hidden;
  --mx: 50%; --my: 0%;
}
.proof-card:not(.proof-card--rich)::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(200px circle at var(--mx) var(--my), rgba(251,131,1,0.10), transparent 60%);
  transition: opacity 0.3s ease;
}
.proof-card:not(.proof-card--rich):hover::before { opacity: 1; }
.proof-card:not(.proof-card--rich)::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 1;
  background: var(--brand-gradient); transform: scaleY(0); transform-origin: top;
  transition: transform 0.45s var(--ease-out-expo);
}
.proof-card:not(.proof-card--rich):hover::after { transform: scaleY(1); }

/* Module cards (plain .solution-card, no link): richer hover cue */
.solution-card:hover h4 { color: var(--brand-orange-dark); }
.solution-card h4 { transition: color 0.25s ease; }

/* Next-step cards get a cursor-tracked glow too */
.next-step-card { position: relative; overflow: hidden; --mx: 50%; --my: 0%; }
.next-step-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(251,131,1,0.10), transparent 60%);
  transition: opacity 0.3s ease;
}
.next-step-card:hover::before { opacity: 1; }
.next-step-card > * { position: relative; z-index: 1; }

/* FAQ accordion — hover + open micro-interactions */
.faq-item { transition: background 0.25s ease; border-radius: var(--radius-sm); }
.faq-item:hover { background: var(--brand-orange-50); }
.faq-item summary { transition: color 0.2s ease, padding-left 0.25s var(--ease-out-expo); padding-inline: var(--space-3); }
.faq-item summary:hover { color: var(--brand-orange-dark); padding-left: var(--space-4); }
.faq-item[open] summary { color: var(--brand-orange-dark); }
.faq-item summary::after { transition: transform 0.25s var(--ease-out-expo); }
.faq-item[open] summary::after { transform: scale(1.15); }

/* Input hover (forms on contact / request-a-brief / capture) */
.field input:hover, .field select:hover, .field textarea:hover,
.capture-form input:hover, .brief-form input:hover, .brief-form select:hover, .brief-form textarea:hover {
  border-color: var(--brand-orange-light);
}

/* feature-card visual: subtle cursor-tracked highlight */
.solution-feature .sf-visual { --mx: 75%; --my: 0%; }
.solution-feature:hover .sf-visual::before {
  background:
    radial-gradient(160px circle at var(--mx) var(--my), rgba(255,255,255,0.14), transparent 55%),
    radial-gradient(85% 90% at 82% 0%, rgba(251,131,1,0.28), transparent 60%);
}

/* ==========================================================================
   REVISION 7 — image media band (Ken Burns + parallax + market chips)
   ========================================================================== */
.media-band {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  box-shadow: var(--shadow-float);
  isolation: isolate;
}
@media (max-width: 640px) { .media-band { aspect-ratio: 4 / 3; } }
.media-figure { position: absolute; inset: -8% 0; z-index: 0; will-change: transform; }
.media-figure img {
  width: 100%; height: 100%; object-fit: cover;
  animation: kenBurns 20s ease-in-out infinite alternate;
}
@keyframes kenBurns {
  from { transform: scale(1.06) translate(0, 0); }
  to   { transform: scale(1.16) translate(-2.5%, -2.5%); }
}
.media-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(0deg, rgba(15,15,16,0.88) 0%, rgba(15,15,16,0.25) 55%, transparent 100%),
    linear-gradient(90deg, rgba(15,15,16,0.7) 0%, transparent 62%);
}
.media-overlay {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: clamp(20px, 4vw, 44px);
  color: #fff;
}
.media-overlay .eyebrow { color: var(--brand-orange-light); }
.media-overlay h3 { color: #fff; margin-bottom: var(--space-4); max-width: 560px; }
.media-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.media-chips span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.22);
  font-size: 0.8125rem; font-weight: 700;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}
.media-band.is-visible .media-chips span { opacity: 1; transform: none; }
.media-band.is-visible .media-chips span:nth-child(2) { transition-delay: 0.1s; }
.media-band.is-visible .media-chips span:nth-child(3) { transition-delay: 0.2s; }
.media-band.is-visible .media-chips span:nth-child(4) { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .media-figure img { animation: none; transform: scale(1.06); }
  .media-chips span { opacity: 1; transform: none; }
}

/* ==========================================================================
   REVISION 8 — interior sections: numbered Modules, linked Selected work,
   feature-card "Giải pháp khác" (3-up)
   ========================================================================== */

/* ---- Modules: numbered cards, accent bar draws in on reveal ---- */
.module-grid { counter-reset: mod; }
.module-grid .solution-card { counter-increment: mod; }
.module-grid .solution-card h4::before {
  content: counter(mod, decimal-leading-zero) "\00a0\00a0";
  color: var(--brand-orange);
  font-weight: 800;
}
.module-grid .solution-card.is-visible::before { transform: scaleX(1); }  /* top gradient bar draws in */

/* ---- Selected work: designed dark tiles linked by a route line ---- */
.proof-card--showcase {
  background:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 26px 26px,
    var(--ink-gradient);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.10);
  min-height: 212px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-6);
  overflow: hidden;
}
.proof-card--showcase .ps-num {
  position: absolute; top: 14px; left: 18px; z-index: 1;
  font-size: 2.6rem; font-weight: 800; line-height: 1; color: rgba(255,255,255,0.12);
}
.proof-card--showcase .proof-kicker { position: relative; z-index: 1; color: var(--brand-orange-light); }
.proof-card--showcase .ps-text { position: relative; z-index: 1; color: rgba(255,255,255,0.62); font-size: 0.9375rem; margin: 0; }
.proof-card--showcase .ps-route { position: absolute; left: 0; right: 0; top: 46%; width: 100%; height: 34px; z-index: 0; }
.proof-card--showcase .ps-route line { animation: routeFlow 3s linear infinite; }
.proof-card--showcase:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(251,131,1,0.4); }

/* ---- Giải pháp khác: feature cards, 3 across ---- */
.solution-feature-grid.cols-3 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .solution-feature-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.solution-feature-grid.cols-3 .sf-visual { aspect-ratio: 16 / 8; }

/* ==========================================================================
   REVISION 9 — Selected work as a 3D stage (bg scene + panel cards)
   Cards have a media zone ready for real case-study images (no breakage).
   ========================================================================== */
.proof-stage { position: relative; background: var(--ink-gradient); color: #fff; overflow: hidden; isolation: isolate; }
.proof-stage .eyebrow { color: var(--brand-orange-light); }
.proof-stage h2, .proof-stage h3 { color: #fff; }
/* 3D perspective grid "floor" the cards stand on */
.proof-stage::before {
  content: ''; position: absolute; left: -25%; right: -25%; bottom: -12%; height: 78%;
  background-image:
    linear-gradient(rgba(251,131,1,0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251,131,1,0.14) 1px, transparent 1px);
  background-size: 52px 52px;
  transform: perspective(560px) rotateX(62deg);
  transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 78%);
  mask-image: linear-gradient(to top, #000 0%, transparent 78%);
  opacity: 0.55; z-index: 0;
  animation: gridPan 22s linear infinite;
}
@keyframes gridPan { to { background-position: 0 52px; } }
/* soft brand glow over the stage */
.proof-stage::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(62% 55% at 50% 16%, rgba(251,131,1,0.20), transparent 62%);
}
.proof-stage .container { position: relative; z-index: 1; }
.proof-stage .card-grid { perspective: 1400px; }

/* panel cards floating on the stage */
.proof-card--3d {
  position: relative; --mx: 50%; --my: 0%;
  display: flex; flex-direction: column;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 34px 54px -22px rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  transition: transform 0.45s var(--ease-out-expo), box-shadow 0.45s ease, border-color 0.45s ease;
}
.proof-card--3d:hover { transform: translateY(-10px); box-shadow: 0 46px 74px -26px rgba(0,0,0,0.75); border-color: rgba(251,131,1,0.45); }
/* media zone — holds a real case image later; placeholder = brand gradient + number */
.p3d-media {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-dark) 100%);
  display: flex; align-items: center; justify-content: center;
}
.p3d-media::after {  /* faint grid so the placeholder reads as "designed", hidden once an <img> is added */
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.14) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(120% 120% at 20% 100%, #000 40%, transparent 78%);
  mask-image: radial-gradient(120% 120% at 20% 100%, #000 40%, transparent 78%);
}
.p3d-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.p3d-media img + .p3d-num, .p3d-media img ~ .p3d-num { display: none; }
.p3d-num { position: relative; z-index: 1; font-size: 3rem; font-weight: 800; color: rgba(255,255,255,0.9); line-height: 1; }
.proof-card--3d .p3d-media { transition: transform 0.6s var(--ease-out-expo); }
.proof-card--3d:hover .p3d-media { transform: scale(1.05); }
.p3d-body { padding: var(--space-5); position: relative; z-index: 1; }
.p3d-kicker { display: block; color: var(--brand-orange-light); font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-2); }
.p3d-text { color: rgba(255,255,255,0.68); font-size: 0.9375rem; margin: 0; }
/* cursor-tracked glow */
.proof-card--3d::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(251,131,1,0.16), transparent 60%);
  transition: opacity 0.3s ease;
}
.proof-card--3d:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .proof-stage::before { animation: none; }
  .proof-card--3d .p3d-media { transition: none; }
}

/* ==========================================================================
   REVISION 10 — make the 3D stage obvious, market flag-chips, chart bg
   ========================================================================== */

/* --- clearer perspective floor (overrides Rev9) --- */
.proof-stage::before {
  left: 0; right: 0; bottom: 0; height: 86%;
  background-image:
    linear-gradient(rgba(251,131,1,0.5) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(251,131,1,0.34) 1.5px, transparent 1.5px);
  background-size: 62px 62px;
  transform: perspective(340px) rotateX(60deg);
  -webkit-mask-image: linear-gradient(to top, #000 4%, rgba(0,0,0,0.55) 42%, transparent 76%);
  mask-image: linear-gradient(to top, #000 4%, rgba(0,0,0,0.55) 42%, transparent 76%);
  opacity: 0.85;
}
/* horizon glow sits where the floor recedes */
.proof-stage::after {
  background: radial-gradient(72% 42% at 50% 60%, rgba(251,131,1,0.28), transparent 62%);
}

/* --- 3D fan: side cards angle inward, straighten + lift on hover --- */
.proof-stage .card-grid { perspective: 1300px; }
.proof-card--3d { transform-style: preserve-3d; }
.proof-stage .card-grid > .proof-card--3d:nth-child(1) { --ry: 9deg; }
.proof-stage .card-grid > .proof-card--3d:nth-child(3) { --ry: -9deg; }
.proof-card--3d[data-reveal] { transform: rotateY(var(--ry, 0deg)) translateY(26px); }
.proof-card--3d[data-reveal].is-visible { transform: rotateY(var(--ry, 0deg)) translateY(0); }
.proof-card--3d:hover { transform: rotateY(0deg) translateY(-12px) !important; }
/* richer media placeholder (still fully replaced by a real <img>) */
.p3d-media { background: radial-gradient(130% 120% at 25% 12%, #FFA84D 0%, #D86E00 62%, #B35A00 100%); }

@media (prefers-reduced-motion: reduce) {
  .proof-card--3d[data-reveal], .proof-card--3d[data-reveal].is-visible { transform: rotateY(var(--ry,0deg)) !important; }
}

/* --- Market flag-chips (expand page "Thị trường có thể bắt đầu") --- */
.market-showcase { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
.market-chip {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px 22px 10px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: #fff; min-height: 60px;
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease, border-color 0.3s ease;
}
.market-chip:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--brand-orange); }
.market-chip .flag {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-orange-50); font-size: 1.35rem; line-height: 1;
  transition: transform 0.35s var(--ease-out-expo);
}
.market-chip:hover .flag { transform: scale(1.12) rotate(-6deg); }
.market-chip .m-name { font-size: 1rem; font-weight: 700; color: var(--text-primary); line-height: 1.15; }
.market-chip .m-sub { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }
.market-chip--more { background: var(--brand-black); border-color: transparent; }
.market-chip--more .m-name { color: #fff; }
.market-chip--more .flag { background: rgba(255,255,255,0.12); }
.market-chip--more:hover { border-color: var(--brand-orange); }

/* --- Animated chart background (market-intelligence Modules) --- */
.section--chart { position: relative; overflow: hidden; }
.section--chart > .container { position: relative; z-index: 1; }
.chart-bg {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(50%, 620px);
  z-index: 0; pointer-events: none; opacity: 0.9;
  -webkit-mask-image: linear-gradient(to left, #000 30%, transparent 92%);
  mask-image: linear-gradient(to left, #000 30%, transparent 92%);
}
.chart-bg svg { width: 100%; height: 100%; display: block; }
.chart-grid line { stroke: rgba(251,131,1,0.16); stroke-width: 1; }
.chart-area { fill: rgba(251,131,1,0.08); }
.chart-bar { fill: rgba(251,131,1,0.22); transform-box: fill-box; transform-origin: bottom; animation: barRise 1.8s var(--ease-out-expo) infinite alternate; }
.chart-bar.cb2 { animation-delay: 0.25s; } .chart-bar.cb3 { animation-delay: 0.5s; } .chart-bar.cb4 { animation-delay: 0.75s; }
.chart-line { fill: none; stroke: var(--brand-orange); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1100; stroke-dashoffset: 1100; animation: chartDraw 3s var(--ease-out-expo) forwards; }
.chart-dot { fill: #fff; stroke: var(--brand-orange); stroke-width: 3; }
.chart-dot-pulse { fill: var(--brand-orange); opacity: 0.4; transform-box: fill-box; transform-origin: center; animation: nodePulse 2.6s ease-out infinite; }
@keyframes chartDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .chart-line { stroke-dashoffset: 0; animation: none; }
  .chart-bar, .chart-dot-pulse { animation: none; }
}

/* ==========================================================================
   REVISION 11 — chart bg smaller+bolder; Markets arc-map background
   ========================================================================== */

/* chart bg: dồn về góc phải, nhỏ hơn + màu đậm hơn */
.chart-bg { width: min(34%, 400px); height: 58%; top: 9%; bottom: auto; opacity: 1; }
.chart-grid line { stroke: rgba(251,131,1,0.24); }
.chart-area { fill: rgba(251,131,1,0.16); }
.chart-bar { fill: rgba(251,131,1,0.44); }
.chart-line { stroke: var(--brand-orange-dark); stroke-width: 3.5; }
.chart-dot { stroke: var(--brand-orange-dark); }

/* Markets scene: creative cross-border arc-map background + more presence */
.markets-scene { position: relative; overflow: hidden; padding-block: clamp(var(--space-9), 11vw, 140px); }
.markets-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.72;
  -webkit-mask-image: radial-gradient(118% 100% at 50% 42%, #000 50%, transparent 88%);
  mask-image: radial-gradient(118% 100% at 50% 42%, #000 50%, transparent 88%);
}
.markets-bg svg { width: 100%; height: 100%; display: block; }
.markets-scene > .container { position: relative; z-index: 1; }
.mkbg-land { fill: rgba(251,131,1,0.05); stroke: rgba(251,131,1,0.14); stroke-width: 1; }
.mkbg-arc { fill: none; stroke: var(--brand-orange); stroke-width: 1.6; stroke-dasharray: 5 7; opacity: 0.5; animation: routeFlow 3s linear infinite; }
.mkbg-node { fill: var(--brand-orange); }
.mkbg-node.origin { stroke: var(--brand-orange-dark); stroke-width: 2; }
.mkbg-pulse { fill: var(--brand-orange); opacity: 0.3; transform-box: fill-box; transform-origin: center; animation: nodePulse 2.8s ease-out infinite; }
.mkbg-packet { fill: var(--brand-orange); filter: drop-shadow(0 0 4px rgba(251,131,1,0.85)); animation: packetFlow 3.6s var(--ease-out-expo) infinite; }
.mkbg-packet.p2 { animation-delay: 1.2s; } .mkbg-packet.p3 { animation-delay: 2s; } .mkbg-packet.p4 { animation-delay: 0.6s; }
.mkbg-label { fill: var(--brand-orange-dark); font-family: 'Be Vietnam Pro', sans-serif; font-size: 13px; font-weight: 700; opacity: 0.5; }
@media (prefers-reduced-motion: reduce) { .mkbg-arc, .mkbg-pulse, .mkbg-packet { animation: none; } }

/* ==========================================================================
   REVISION 12 — For Creators: creator-network section background
   ========================================================================== */
.creator-scene { position: relative; overflow: hidden; }
.creator-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.62;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 45%, #000 46%, transparent 86%);
  mask-image: radial-gradient(120% 100% at 50% 45%, #000 46%, transparent 86%);
}
.creator-bg svg { width: 100%; height: 100%; display: block; }
.crbg-av .av-bg { fill: var(--brand-orange-50); }
.crbg-av .av-head, .crbg-av .av-body { fill: var(--brand-orange); }
.crbg-av.hub .av-bg { fill: var(--brand-orange); }
.crbg-av.hub .av-head, .crbg-av.hub .av-body { fill: #fff; }
.crbg-ring { fill: none; stroke: var(--brand-orange); stroke-width: 1.6; opacity: 0.6; }
.crbg-link { fill: none; stroke: var(--brand-orange); stroke-width: 1.4; stroke-dasharray: 5 7; opacity: 0.4; animation: routeFlow 3.4s linear infinite; }
.crbg-pulse { fill: var(--brand-orange); opacity: 0.28; transform-box: fill-box; transform-origin: center; animation: nodePulse 2.8s ease-out infinite; }
.crbg-packet { fill: var(--brand-orange); filter: drop-shadow(0 0 4px rgba(251,131,1,0.85)); animation: packetFlow 3.6s var(--ease-out-expo) infinite; }
.crbg-packet.p2 { animation-delay: 1.3s; } .crbg-packet.p3 { animation-delay: 2.2s; }
.creator-scene > .container { position: relative; z-index: 1; }
/* creator hero flowmap: service node icons */
.fm-svc { fill: none; stroke: var(--brand-orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .crbg-link, .crbg-pulse, .crbg-packet { animation: none; } }

/* ==========================================================================
   REVISION 13 — For Creators: bright image hero (light) + benefit cards
   ========================================================================== */
/* light cinematic hero: ảnh sáng, chủ thể phải, text trái, không animation */
.hero--light { background: #fff; }
.hero--light .hero-bg img { object-position: right center; transform: scale(1.02); }
.hero--light .hero-scrim {
  background: linear-gradient(90deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.84) 34%, rgba(255,255,255,0.28) 64%, rgba(255,255,255,0) 100%);
}
@media (max-width: 991px) {
  .hero--light .hero-scrim { background: linear-gradient(0deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.86) 52%, rgba(255,255,255,0.2) 100%); }
}
.hero--light .hero-copy { color: var(--text-primary); }
.hero--light .hero-copy h1 { color: var(--text-primary); }
.hero--light .hero-copy p { color: var(--text-secondary); }
.hero--light .hero-copy .eyebrow { color: var(--brand-orange-dark); }
.hero--light .breadcrumb, .hero--light .breadcrumb a { color: var(--text-muted); }
.hero--light .breadcrumb a:hover { color: var(--brand-orange-dark); }
.hero--light .badge-direction { background: var(--brand-orange-50); color: var(--brand-orange-dark); }
.hero--light .btn-glass { background: rgba(15,15,16,0.04); border-color: var(--border); color: var(--text-primary); backdrop-filter: none; }
.hero--light .btn-glass:hover { background: var(--brand-black); color: #fff; border-color: transparent; }

/* benefit-rich creator cards with in-card animation */
.creator-card {
  position: relative; overflow: hidden; --mx: 50%; --my: 0%;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s ease, border-color 0.4s ease;
}
.creator-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brand-gradient); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out-expo); }
.creator-card:hover::before { transform: scaleX(1); }
.creator-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.creator-card::after { content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; background: radial-gradient(240px circle at var(--mx) var(--my), rgba(251,131,1,0.10), transparent 60%); transition: opacity 0.3s ease; }
.creator-card:hover::after { opacity: 1; }
.creator-card > * { position: relative; z-index: 1; }
.cc-icon {
  width: 52px; height: 52px; border-radius: 50%; margin-bottom: var(--space-4);
  background: var(--brand-orange-50); color: var(--brand-orange);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.3s ease, color 0.3s ease, transform 0.4s var(--ease-out-expo);
  animation: ccPulse 2.8s ease-in-out infinite;
}
.cc-icon svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.creator-card:hover .cc-icon { background: var(--brand-orange); color: #fff; transform: rotate(-6deg) scale(1.08); }
@keyframes ccPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(251,131,1,0.28); } 50% { box-shadow: 0 0 0 9px rgba(251,131,1,0); } }
.creator-card h4 { margin-bottom: var(--space-2); }
.creator-card p { color: var(--text-secondary); margin-bottom: var(--space-3); }
.cc-benefits { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.cc-benefits span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8125rem; font-weight: 700; color: var(--brand-orange-dark);
  background: var(--brand-orange-50); padding: 6px 12px; border-radius: var(--radius-pill);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo), background 0.25s ease;
}
.cc-benefits span::before { content: '✓'; font-weight: 900; }
.creator-card.is-visible .cc-benefits span { opacity: 1; transform: none; }
.creator-card.is-visible .cc-benefits span:nth-child(2) { transition-delay: 0.08s; }
.creator-card.is-visible .cc-benefits span:nth-child(3) { transition-delay: 0.16s; }
.creator-card:hover .cc-benefits span { background: #fff; }
.creator-card .card-link { margin-top: auto; color: var(--brand-orange); font-weight: 800; display: inline-flex; gap: 6px; transition: gap 0.2s ease; }
.creator-card:hover .card-link { gap: 12px; }
.cc-shine { position: absolute; top: 0; left: -60%; width: 42%; height: 100%; z-index: 2; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.42), transparent); transform: skewX(-18deg); pointer-events: none; transition: left 0.85s var(--ease-out-expo); }
.creator-card:hover .cc-shine { left: 145%; }
@media (prefers-reduced-motion: reduce) { .cc-icon { animation: none; } }

/* ==========================================================================
   REVISION 14 — calm the creator-network background (bớt rối mắt)
   Ẩn phần giữa (sau card), chỉ để hint mờ ở viền; node/line nhạt hơn.
   ========================================================================== */
.creator-bg {
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(100% 90% at 50% 50%, transparent 38%, #000 82%);
  mask-image: radial-gradient(100% 90% at 50% 50%, transparent 38%, #000 82%);
}
.crbg-av .av-bg { fill: rgba(251,131,1,0.07); }
.crbg-av .av-head, .crbg-av .av-body { fill: rgba(251,131,1,0.55); }
.crbg-av.hub .av-bg { fill: rgba(251,131,1,0.5); }
.crbg-av.hub .av-head, .crbg-av.hub .av-body { fill: #fff; }
.crbg-link { stroke-width: 1.2; opacity: 0.22; }
.crbg-pulse { display: none; }
.crbg-packet { opacity: 0.75; }

/* ==========================================================================
   REVISION 15 — Contact Us: premium, conversion-first split
   ========================================================================== */
.contact-split { position: relative; overflow: hidden; }
.contact-split::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(48% 55% at 90% 0%, rgba(251,131,1,0.10), transparent 62%),
    radial-gradient(42% 50% at 0% 100%, rgba(251,131,1,0.06), transparent 62%);
}
.contact-grid { position: relative; z-index: 1; display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 0.92fr 1.08fr; } }
.contact-lead h1 { letter-spacing: -0.02em; }
.contact-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-5); padding: 8px 16px;
  border-radius: var(--radius-pill); background: var(--brand-orange-50);
  color: var(--brand-orange-dark); font-weight: 700; font-size: 0.875rem;
}
.contact-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-orange); animation: chipPulse 2.4s ease-out infinite; }
@keyframes chipPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(251,131,1,0.45); } 50% { box-shadow: 0 0 0 6px rgba(251,131,1,0); } }
.contact-quick { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.contact-quick a {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md);
  background: #fff;
  transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s ease, border-color 0.25s ease;
}
.contact-quick a:hover { transform: translateX(5px); box-shadow: var(--shadow-md); border-color: var(--brand-orange); }
.contact-quick .icon-badge { margin-bottom: 0; flex: 0 0 auto; transition: background 0.25s ease, color 0.25s ease; }
.contact-quick a:hover .icon-badge { background: var(--brand-orange); color: #fff; }
.cq-text { display: flex; flex-direction: column; min-width: 0; }
.cq-label { font-weight: 700; font-size: 0.9375rem; }
.cq-value { color: var(--text-secondary); font-size: 0.875rem; word-break: break-word; }
.cq-arrow { margin-left: auto; color: var(--brand-orange); font-weight: 800; transition: transform 0.2s ease; }
.contact-quick a:hover .cq-arrow { transform: translateX(4px); }

.contact-form-card {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  box-shadow: var(--shadow-float);
}
.contact-form-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--brand-gradient); }
.contact-form-card h3 { margin-bottom: var(--space-2); }
.cfc-sub { color: var(--text-secondary); font-size: 0.9375rem; margin-bottom: var(--space-5); }
.contact-form-card .brief-form { display: grid; gap: var(--space-4); }
.contact-form-card .field label { color: var(--text-primary); }
.form-note { text-align: center; color: var(--text-muted); font-size: 0.8125rem; margin: var(--space-3) 0 0; }
@media (prefers-reduced-motion: reduce) { .contact-chip .dot { animation: none; } }

/* ==========================================================================
   REVISION 16 — Article: horizontal hub scroller + rail jump button
   ========================================================================== */
#same-hub { scroll-margin-top: 88px; }
.hub-scroller {
  display: flex; gap: var(--space-5);
  overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  margin-top: var(--space-6); padding-bottom: var(--space-4);
  scrollbar-width: thin; scrollbar-color: var(--brand-orange) var(--border);
}
.hub-scroller::-webkit-scrollbar { height: 8px; }
.hub-scroller::-webkit-scrollbar-track { background: var(--border); border-radius: var(--radius-pill); }
.hub-scroller::-webkit-scrollbar-thumb { background: var(--brand-orange); border-radius: var(--radius-pill); }
.hub-scroller::-webkit-scrollbar-thumb:hover { background: var(--brand-orange-dark); }
.hub-scroller > .article-card { scroll-snap-align: start; flex: 0 0 clamp(258px, 74vw, 316px); }

.rail-jump {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-6);
  padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: #fff; font-weight: 700; font-size: 0.9375rem; color: var(--text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.rail-jump:hover { border-color: var(--brand-orange); box-shadow: var(--shadow-sm); transform: translateY(-2px); color: var(--brand-orange-dark); }
.rail-jump .arw { color: var(--brand-orange); transition: transform 0.2s ease; }
.rail-jump:hover .arw { transform: translateY(3px); }

/* ==========================================================================
   REVISION 17 — Auth pages (login / register): premium clean
   ========================================================================== */
.auth-section { position: relative; overflow: hidden; }
.auth-section::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46% 50% at 88% 4%, rgba(251,131,1,0.10), transparent 62%),
    radial-gradient(40% 46% at 6% 100%, rgba(251,131,1,0.06), transparent 62%);
}
.auth-section > .container { position: relative; z-index: 1; }
.auth-card { position: relative; overflow: hidden; box-shadow: var(--shadow-float); }
.auth-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--brand-gradient); }
.btn-social { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.btn-social:hover { border-color: var(--brand-orange); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.auth-card .field input:hover { border-color: var(--brand-orange-light); }

/* ==========================================================================
   REVISION 18 — Markets hero: arc-map behind, text left / map right
   ========================================================================== */
.markets-hero .markets-bg {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 32%, rgba(0,0,0,0.55) 60%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 32%, rgba(0,0,0,0.55) 60%, #000 100%);
  opacity: 0.6;
}
@media (max-width: 900px) { .markets-hero .markets-bg { opacity: 0.35; } }
/* market cards keep a comfy min height so flags + copy sit nicely */
.markets-grid .solution-card { min-height: 210px; }

/* ==========================================================================
   REVISION 19 — Showreel full-screen (full-bleed video band)
   ========================================================================== */
.showreel--full { padding: 0; }
.showreel--full .video-frame {
  aspect-ratio: auto;
  width: 100%;
  height: min(90vh, 900px);
  min-height: 460px;
  border-radius: 0;
  max-width: none;
}
.showreel--full .video-poster, .showreel--full .video-el { border-radius: 0; }
.video-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  transition: opacity 0.4s ease;
  background:
    linear-gradient(0deg, rgba(15,15,16,0.72), rgba(15,15,16,0.28) 45%, rgba(15,15,16,0.55)),
    radial-gradient(65% 65% at 50% 45%, rgba(15,15,16,0.15), rgba(15,15,16,0.5));
}
.showreel-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff; padding: var(--space-6);
  transition: opacity 0.4s ease;
}
.showreel-overlay .eyebrow { color: var(--brand-orange-light); }
.showreel-overlay h2 {
  color: #fff; max-width: 820px; margin-bottom: var(--space-6);
  font-size: clamp(1.6rem, 3vw + 0.5rem, 2.8rem);
  text-shadow: 0 2px 30px rgba(0,0,0,0.4);
}
.showreel--full .video-play {
  position: relative; top: auto; left: auto; transform: none;
  margin: 0 auto; width: 92px; height: 92px;
}
.showreel--full .video-play:hover { transform: scale(1.08); background: var(--brand-orange-dark); }
.showreel-note {
  margin-top: var(--space-4); color: rgba(255,255,255,0.85);
  font-size: 0.8125rem; font-weight: 600;
  background: rgba(0,0,0,0.35); padding: 6px 14px; border-radius: var(--radius-pill);
}
.showreel--full .video-frame.is-playing .showreel-overlay,
.showreel--full .video-frame.is-playing .video-scrim { opacity: 0; pointer-events: none; }


/* REVISION 20 — SEO handoff polish: compact post cards + theme craft note */
.article-card .title { font-size: 0.98rem; line-height: 1.32; }
.article-card .excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.single-post .article-layout h1,
.single .article-layout h1 { font-size: clamp(1.75rem, 2.4vw + 0.7rem, 2.55rem); line-height: 1.15; }
.imvn-craft-note {
  color: rgba(255,255,255,0.52);
  font-size: 0.8125rem;
  line-height: 1.6;
  max-width: 760px;
  margin: 0 0 var(--space-5);
}
.imvn-craft-note strong { color: rgba(255,255,255,0.82); }