/* ==========================================================================
   Next Value Digital — page-specific animated visuals
   Shared trigger convention: elements with [data-animate] get ".is-active"
   added by assets/js/animations.js via IntersectionObserver. Generic
   fade-in/slide-up/count-up already live in style.css + main.js via
   [data-reveal] / [data-count] — this file only styles the new
   illustrative components (laptop mockup, SEA graph, Meta mockup,
   LinkedIn network) so nothing sitewide is duplicated.
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  .laptop-screen, .dash-bar, .dash-line, .sea-curve, .sea-loupe-ring,
  .phone-feed, .li-line, .li-node{ transition: none !important; animation: none !important; }
  .laptop-mockup .laptop-screen{ transform: none !important; }
  .dash-bar{ transform: none !important; }
  .dash-line, .sea-curve{ stroke-dashoffset: 0 !important; }
  .li-line{ stroke-dashoffset: 0 !important; }
}

/* ---------- Laptop mockup (home hero only) ---------- */
.laptop-mockup{
  perspective: 1400px;
  width: 100%;
  max-width: 460px;
  margin-left: auto;
}
.laptop-screen{
  position: relative;
  background: var(--ink);
  border: 7px solid #201d38;
  border-bottom-width: 10px;
  border-radius: 14px 14px 5px 5px;
  padding: 16px 16px 20px;
  transform-origin: 50% 100%;
  transform: rotateX(78deg);
  box-shadow: 0 40px 70px -25px rgba(11,10,20,0.55);
  transition: transform 1.15s var(--ease-out);
  aspect-ratio: 16/10.5;
}
.laptop-mockup.is-active .laptop-screen{ transform: rotateX(0deg); }
.laptop-base{
  height: 12px;
  margin: 0 -14px;
  background: linear-gradient(180deg, #2a2740, #14121f);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 14px 24px -8px rgba(11,10,20,0.5);
}
.laptop-base::after{
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 70px; height: 5px; margin-top: -1px;
  background: #14121f;
  border-radius: 0 0 6px 6px;
}
.dashboard-bar{
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 12px;
}
.dashboard-bar span{ width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.dashboard-bar b{
  margin-left: 8px;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}
.dashboard-kpis{
  display: flex;
  gap: 18px;
  margin-bottom: 12px;
}
.dashboard-kpis .kpi b{
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  background: var(--gradient-twin);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dashboard-kpis .kpi span{
  font-size: 0.62rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dashboard-chart{ width: 100%; height: auto; display: block; }
.dash-bar{
  fill: url(#dashBarGrad);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform 0.7s var(--ease-out);
}
.laptop-mockup.is-active .dash-bar{ transform: scaleY(1); }
.laptop-mockup.is-active .dash-bar:nth-child(2){ transition-delay: .08s; }
.laptop-mockup.is-active .dash-bar:nth-child(3){ transition-delay: .16s; }
.laptop-mockup.is-active .dash-bar:nth-child(4){ transition-delay: .24s; }
.laptop-mockup.is-active .dash-bar:nth-child(5){ transition-delay: .32s; }
.dash-line{
  fill: none;
  stroke: url(#dashLineGrad);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 460;
  stroke-dashoffset: 460;
  transition: stroke-dashoffset 1.3s var(--ease-out) .3s;
}
.laptop-mockup.is-active .dash-line{ stroke-dashoffset: 0; }

/* ---------- Google Ads / SEA visual ---------- */
.sea-visual{ position: relative; width: 100%; max-width: 380px; margin-left: auto; }
.sea-visual svg{ width: 100%; height: auto; overflow: visible; }
.sea-searchbar{ fill: none; stroke: rgba(20,18,31,0.15); stroke-width: 2; }
.sea-loupe-ring{
  fill: none; stroke: var(--gold-dark); stroke-width: 2.5;
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: sea-pulse 2.6s ease-in-out infinite;
}
@keyframes sea-pulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.12); } }
.sea-curve{
  fill: none; stroke: url(#seaCurveGrad); stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 420; stroke-dashoffset: 420;
  transition: stroke-dashoffset 1.6s var(--ease-out) .2s;
  filter: drop-shadow(0 4px 10px rgba(226,130,92,0.35));
}
.sea-visual.is-active .sea-curve{ stroke-dashoffset: 0; }
.sea-dot{
  fill: var(--gold-dark); opacity: 0; transform-box: fill-box; transform-origin: 50% 50%;
  transition: opacity .4s ease, transform .4s var(--ease-out);
  transform: scale(0);
}
.sea-visual.is-active .sea-dot{ opacity: 1; transform: scale(1); }
.sea-visual.is-active .sea-dot:nth-of-type(1){ transition-delay: .5s; }
.sea-visual.is-active .sea-dot:nth-of-type(2){ transition-delay: .9s; }
.sea-visual.is-active .sea-dot:nth-of-type(3){ transition-delay: 1.3s; }
.sea-stat{ text-align: center; margin-top: 14px; }
.sea-stat b{ font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--gold-dark); }
.sea-stat span{ display: block; font-size: 0.78rem; color: var(--muted-dark); }

/* ---------- Meta Ads mobile mockup ---------- */
.meta-visual{ display: flex; flex-direction: column; align-items: center; gap: 16px; }
.phone-frame{
  width: 200px; height: 340px;
  background: var(--ink);
  border-radius: 30px;
  border: 6px solid #1a1830;
  padding: 10px;
  box-shadow: 0 30px 55px -20px rgba(11,10,20,0.45);
  position: relative;
  overflow: hidden;
}
.phone-notch{
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 14px; background: #1a1830; border-radius: 0 0 10px 10px;
  z-index: 2;
}
.phone-feed{
  display: flex; flex-direction: column; gap: 10px;
  animation: feed-scroll 9s linear infinite;
  animation-play-state: paused;
}
.meta-visual.is-active .phone-feed{ animation-play-state: running; }
@keyframes feed-scroll{
  0%{ transform: translateY(0); }
  100%{ transform: translateY(-50%); }
}
.feed-post{
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.feed-post.highlight{ background: var(--gradient-twin-soft); border: 1px solid rgba(226,130,92,0.4); }
.post-avatar{ width: 26px; height: 26px; border-radius: 50%; background: var(--gradient-twin); flex-shrink: 0; }
.post-lines{ display: flex; flex-direction: column; gap: 5px; flex-grow: 1; }
.post-lines span{ display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.16); }
.post-lines span:last-child{ width: 60%; }
.post-media{ height: 70px; border-radius: 8px; background: rgba(255,255,255,0.08); margin-top: 4px; }
.meta-stat{ text-align: center; }
.meta-stat b{ font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--violet-dark); }
.meta-stat span{ display: block; font-size: 0.78rem; color: var(--muted-dark); }

/* ---------- LinkedIn Ads network visual ---------- */
.linkedin-visual{ position: relative; width: 100%; max-width: 380px; margin-left: auto; }
.linkedin-visual svg{ width: 100%; height: auto; overflow: visible; }
.li-line{
  stroke: rgba(10,102,194,0.35); stroke-width: 2;
  stroke-dasharray: 160; stroke-dashoffset: 160;
  transition: stroke-dashoffset 0.9s var(--ease-out);
}
.linkedin-visual.is-active .li-line{ stroke-dashoffset: 0; }
.linkedin-visual.is-active .li-line:nth-of-type(1){ transition-delay: .1s; }
.linkedin-visual.is-active .li-line:nth-of-type(2){ transition-delay: .25s; }
.linkedin-visual.is-active .li-line:nth-of-type(3){ transition-delay: .4s; }
.linkedin-visual.is-active .li-line:nth-of-type(4){ transition-delay: .55s; }
.li-node{
  fill: #fff; stroke: #0A66C2; stroke-width: 2.5;
  transform-box: fill-box; transform-origin: 50% 50%;
  transform: scale(0);
  transition: transform .5s var(--ease-out);
}
.li-node.center{ fill: #0A66C2; }
.linkedin-visual.is-active .li-node{ transform: scale(1); }
.linkedin-visual.is-active .li-node.center{ transition-delay: 0s; }
.linkedin-visual.is-active .li-node:not(.center):nth-of-type(2){ transition-delay: .35s; }
.linkedin-visual.is-active .li-node:not(.center):nth-of-type(3){ transition-delay: .5s; }
.linkedin-visual.is-active .li-node:not(.center):nth-of-type(4){ transition-delay: .65s; }
.linkedin-visual.is-active .li-node:not(.center):nth-of-type(5){ transition-delay: .8s; }
.linkedin-stat{ text-align: center; margin-top: 14px; }
.linkedin-stat b{ font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: #0A66C2; }
.linkedin-stat span{ display: block; font-size: 0.78rem; color: var(--muted-dark); }

/* ---------- Shared layout helper for the platform-detail sections ---------- */
.platform-detail{ display: flex; align-items: center; gap: 50px; flex-wrap: wrap; }
.platform-detail:not(:last-child){ margin-bottom: 70px; }
.platform-detail > .platform-detail-text{ flex: 1 1 380px; }
.platform-detail > .platform-detail-visual{ flex: 1 1 320px; }
.platform-detail.reverse{ flex-direction: row-reverse; }
@media (max-width: 760px){
  .platform-detail, .platform-detail.reverse{ flex-direction: column; }
  .platform-detail > .platform-detail-visual{ margin: 0 auto; }
}

/* ==========================================================================
   SITE-WIDE MOTION LAYER v2 — richer, applied on every page
   Everything below is additive: no existing rule is overridden, only new
   selectors/pseudo-elements/keyframes. All of it is generated/attached by
   assets/js/animations.js, nothing here requires manual markup changes.
   ========================================================================== */

/* ---------- Ambient floating hero blobs ---------- */
@keyframes blob-float-a{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(24px,26px) scale(1.08); }
}
@keyframes blob-float-b{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-20px,-18px) scale(1.06); }
}
.hero::before{ animation: blob-float-a 13s ease-in-out infinite; }
.hero::after{ animation: blob-float-b 15s ease-in-out infinite; }
.page-hero::before{ animation: blob-float-a 14s ease-in-out infinite; }

/* ---------- Cursor spotlight (injected into .hero / .page-hero) ---------- */
.cursor-spotlight{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  background: radial-gradient(420px circle at var(--sx,50%) var(--sy,50%), rgba(185,83,154,0.16), transparent 65%);
  z-index: 0;
}
.cursor-spotlight.is-on{ opacity: 1; }

/* ---------- Word-by-word heading reveal ---------- */
.word-split{ display: inline-block; overflow: hidden; vertical-align: top; }
.word-split .word{
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.7s var(--ease-out), opacity 0.6s ease;
}
/* hero h1: animates on load */
.page-hero h1.word-ready .word,
.hero h1.word-ready .word{ transform: translateY(0); opacity: 1; }
/* section headings: cascade once the ancestor [data-reveal] gets .is-visible */
[data-reveal].is-visible h2 .word-split .word,
[data-reveal].is-visible h1 .word-split .word{ transform: translateY(0); opacity: 1; }

/* ---------- 3D tilt + magnetic buttons (transform applied inline via JS) ---------- */
.tilt-target{ transition: transform 0.5s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.3s ease; }
.magnetic-btn{ transition: transform 0.35s var(--ease-out), box-shadow 0.3s ease; }

/* ---------- Scroll-to-top button (injected by JS) ---------- */
.scroll-top-btn{
  position: fixed;
  left: 24px;
  bottom: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ink-soft-solid, #171428);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 60;
  opacity: 0;
  transform: translateY(14px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s var(--ease-out), background 0.3s ease;
  box-shadow: 0 14px 30px -12px rgba(11,10,20,0.45);
}
.scroll-top-btn.is-visible{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.scroll-top-btn:hover{ background: var(--violet); }
.scroll-top-btn svg{ width: 18px; height: 18px; }
@media (max-width: 640px){ .scroll-top-btn{ left: 14px; bottom: 14px; width: 40px; height: 40px; } }

/* ---------- Logo marquee: per-logo hover polish ---------- */
.client-logo img{ transition: transform 0.4s var(--ease-out), filter 0.4s ease; filter: grayscale(0.15); }
.client-logo:hover img{ transform: scale(1.08); filter: grayscale(0); }

/* ---------- Price card ribbon pulse ---------- */
@keyframes ribbon-pulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(108,76,245,0.35); }
  50%{ box-shadow: 0 0 0 6px rgba(108,76,245,0); }
}
.price-card .ribbon{ animation: ribbon-pulse 2.4s ease-in-out infinite; }
.price-card{ transition: transform 0.5s var(--ease-out), box-shadow 0.4s var(--ease-out); }

/* ---------- Case-visual gentle hover lift (portfolio) ---------- */
.case-visual{ transition: transform 0.5s var(--ease-out); }
.case:hover .case-visual{ transform: scale(1.02); }

/* ---------- Timeline draw-in (contact "what happens next") ---------- */
.steps-vertical .sv-line{
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.8s var(--ease-out);
}
.steps-vertical.is-active .step-v:nth-child(1) .sv-line{ transition-delay: .1s; }
.steps-vertical.is-active .step-v:nth-child(2) .sv-line{ transition-delay: .5s; }
.steps-vertical.is-active .step-v:nth-child(3) .sv-line{ transition-delay: .9s; }
.steps-vertical.is-active .sv-line{ transform: scaleY(1); }
.steps-vertical .sv-num{ transform: scale(0.6); opacity: 0; transition: transform 0.5s var(--ease-out), opacity 0.4s ease; }
.steps-vertical.is-active .step-v:nth-child(1) .sv-num{ transition-delay: 0s; }
.steps-vertical.is-active .step-v:nth-child(2) .sv-num{ transition-delay: .4s; }
.steps-vertical.is-active .step-v:nth-child(3) .sv-num{ transition-delay: .8s; }
.steps-vertical.is-active .step-v:nth-child(4) .sv-num{ transition-delay: 1.2s; }
.steps-vertical.is-active .sv-num{ transform: scale(1); opacity: 1; }

@media (prefers-reduced-motion: reduce){
  .hero::before, .hero::after, .page-hero::before{ animation: none !important; }
  .cursor-spotlight{ display: none !important; }
  .word-split .word{ transform: none !important; opacity: 1 !important; }
  .scroll-top-btn{ transition: none !important; }
  .price-card .ribbon{ animation: none !important; }
  .steps-vertical .sv-line, .steps-vertical .sv-num{ transform: none !important; opacity: 1 !important; }
}
@media (pointer: coarse){
  .cursor-spotlight{ display: none !important; }
}

/* ==========================================================================
   SIGNATURE PAGE VISUALS v3 — one distinct "device opens" style animated
   illustration per interior page, in the spirit of the homepage laptop:
   Portfolio → results dashboard per case study, About → expertise
   convergence orbit, Pricing → acquisition flow, Contact → inbox mockup,
   Blog → article mockup. All triggered by [data-animate] + .is-active,
   same convention as the rest of this file.
   ========================================================================== */

/* ---------- Portfolio: per-case results device mockup ---------- */
.case-visual{ flex-direction: column; gap: 10px; }
.case-logo-badge{
  position: absolute;
  top: 18px; left: 18px;
  background: rgba(255,255,255,0.95);
  border-radius: 10px;
  padding: 8px 14px;
  z-index: 2;
  box-shadow: 0 10px 24px -10px rgba(11,10,20,0.4);
}
.case-logo-badge img{ max-height: 24px; display: block; }
.device-mock{
  width: 84%;
  background: rgba(11,10,20,0.6);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  backdrop-filter: blur(6px);
  padding: 16px 18px 20px;
  transform: translateY(18px) scale(0.94);
  opacity: 0;
  transition: transform 0.8s var(--ease-out), opacity 0.6s ease;
}
.device-mock.is-active{ transform: translateY(0) scale(1); opacity: 1; }
.device-bar{ display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.device-bar i{ width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.35); display: block; }
.device-bar b{ margin-left: 6px; font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.device-kpis{ display: flex; gap: 24px; margin-bottom: 14px; }
.device-kpis .kpi b{ display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: #fff; }
.device-kpis .kpi span{ font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255,255,255,0.55); }
.device-chart{ width: 100%; height: auto; display: block; }
.device-bar-fill{
  fill: #fff; opacity: 0.9;
  transform-box: fill-box; transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform 0.65s var(--ease-out);
}
.device-mock.is-active .device-bar-fill{ transform: scaleY(1); }
.device-mock.is-active .device-bar-fill:nth-of-type(2){ transition-delay: .1s; }
.device-mock.is-active .device-bar-fill:nth-of-type(3){ transition-delay: .2s; }
.device-mock.is-active .device-bar-fill:nth-of-type(4){ transition-delay: .3s; }
.device-mock.is-active .device-bar-fill:nth-of-type(5){ transition-delay: .4s; }
.device-line{
  fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 300; stroke-dashoffset: 300; opacity: 0.9;
  transition: stroke-dashoffset 1.1s var(--ease-out) .35s;
}
.device-mock.is-active .device-line{ stroke-dashoffset: 0; }

/* ---------- About: expertise convergence orbit ---------- */
.orbit-chip{
  position: absolute;
  top: 6%;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 7px 16px;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(10px) scale(0.85);
  transition: opacity 0.5s ease, transform 0.5s var(--ease-out);
  white-space: nowrap;
}
.twin-orb.is-active .orbit-chip{ opacity: 1; transform: translateY(0) scale(1); }
.orbit-chip.chip-a{ left: 0; color: var(--violet-dark); transition-delay: .25s; }
.orbit-chip.chip-b{ right: 0; color: var(--gold-dark); transition-delay: .55s; }
.orbit-beam{
  stroke: #fff; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 140; stroke-dashoffset: 140; opacity: 0.75;
  transition: stroke-dashoffset 1s var(--ease-out) .4s;
}
.twin-orb.is-active .orbit-beam{ stroke-dashoffset: 0; }
.orbit-dot{ fill: #fff; opacity: 0; }
.twin-orb.is-active .orbit-dot{ opacity: 1; animation: orbit-travel 2.6s ease-in-out .9s infinite; }
@keyframes orbit-travel{
  0%, 100%{ transform: translateX(0); }
  50%{ transform: translateX(64px); }
}

/* ---------- Pricing: acquisition flow ---------- */
.flow-visual{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  max-width: 920px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.flow-stage{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; flex: 1 1 140px; }
.flow-stage .flow-icon{
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--gradient-twin-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  transform: scale(0.6);
  opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.4s ease;
}
.flow-visual.is-active .flow-stage .flow-icon{ transform: scale(1); opacity: 1; }
.flow-visual.is-active .flow-stage:nth-child(1) .flow-icon{ transition-delay: 0s; }
.flow-visual.is-active .flow-stage:nth-child(3) .flow-icon{ transition-delay: .55s; }
.flow-visual.is-active .flow-stage:nth-child(5) .flow-icon{ transition-delay: 1.1s; }
.flow-visual.is-active .flow-stage:nth-child(7) .flow-icon{ transition-delay: 1.65s; }
.flow-stage b{ font-family: var(--font-display); font-size: 0.92rem; }
.flow-stage span{ font-size: 0.78rem; color: var(--muted-dark); max-width: 16ch; }
.flow-arrow{ flex: 0 0 auto; width: 60px; height: 20px; }
.flow-arrow-line{
  fill: none; stroke: url(#flowGrad); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 70; stroke-dashoffset: 70;
  transition: stroke-dashoffset 0.7s var(--ease-out);
}
.flow-visual.is-active .flow-arrow:nth-of-type(1) .flow-arrow-line{ transition-delay: .3s; }
.flow-visual.is-active .flow-arrow:nth-of-type(2) .flow-arrow-line{ transition-delay: .85s; }
.flow-visual.is-active .flow-arrow:nth-of-type(3) .flow-arrow-line{ transition-delay: 1.4s; }
.flow-visual.is-active .flow-arrow-line{ stroke-dashoffset: 0; }
@media (max-width: 760px){
  .flow-visual{ flex-direction: column; }
  .flow-arrow{ width: 20px; height: 40px; }
}

/* ---------- Contact: inbox mockup ---------- */
.inbox-mock{
  background: var(--ink);
  border-radius: 16px;
  padding: 18px 20px 22px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-lift);
}
.inbox-bar{ display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.inbox-bar i{ width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.3); display: block; }
.inbox-bar b{ margin-left: 6px; font-family: var(--font-display); font-size: 0.64rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.inbox-item{
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 12px 14px;
  transform: translateX(30px);
  opacity: 0;
  transition: transform 0.7s var(--ease-out), opacity 0.5s ease;
}
.inbox-mock.is-active .inbox-item{ transform: translateX(0); opacity: 1; }
.inbox-avatar{ width: 34px; height: 34px; border-radius: 50%; background: var(--gradient-twin); flex-shrink: 0; }
.inbox-text{ display: flex; flex-direction: column; gap: 3px; flex-grow: 1; }
.inbox-name{ font-size: 0.9rem; font-weight: 600; color: #fff; }
.inbox-sub{ font-size: 0.76rem; color: rgba(255,255,255,0.5); }
.inbox-check{
  width: 26px; height: 26px; border-radius: 50%;
  background: #2E9E6B;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  transform: scale(0);
  transition: transform 0.4s var(--ease-out);
  transition-delay: .6s;
}
.inbox-mock.is-active .inbox-check{ transform: scale(1); }
.inbox-stat{ display: flex; align-items: baseline; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); }
.inbox-stat b{ font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: #fff; }
.inbox-stat span{ font-size: 0.78rem; color: rgba(255,255,255,0.55); }

/* ---------- Blog: featured article mockup ---------- */
.article-mock{
  width: 100%; height: 100%;
  padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
  justify-content: center;
  background: linear-gradient(135deg, var(--violet) 0%, var(--gold) 100%);
}
.article-mock .al{
  height: 10px; border-radius: 5px;
  background: rgba(255,255,255,0.32);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.article-mock.is-active .al{ transform: scaleX(1); }
.article-mock.is-active .al:nth-child(1){ transition-delay: 0s; width: 40%; }
.article-mock.is-active .al:nth-child(2){ transition-delay: .15s; width: 92%; }
.article-mock.is-active .al:nth-child(3){ transition-delay: .3s; width: 86%; }
.article-mock.is-active .al:nth-child(4){ transition-delay: .45s; width: 70%; }
.article-mock .al:nth-child(1){ width: 40%; }
.article-mock .al:nth-child(2){ width: 92%; }
.article-mock .al:nth-child(3){ width: 86%; }
.article-mock .al:nth-child(4){ width: 70%; }
.article-mock .al-ring{
  align-self: flex-end;
  margin-top: 6px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.18);
  border-top-color: #fff;
  transform: rotate(-90deg) scale(0);
  transition: transform 0.6s var(--ease-out) .5s;
}
.article-mock.is-active .al-ring{ transform: rotate(315deg) scale(1); }

@media (prefers-reduced-motion: reduce){
  .device-mock, .device-bar-fill, .device-line,
  .orbit-chip, .orbit-beam, .orbit-dot,
  .flow-stage .flow-icon, .flow-arrow-line,
  .inbox-item, .inbox-check,
  .article-mock .al, .article-mock .al-ring{
    transform: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; animation: none !important;
  }
}

/* ==========================================================================
   LIGHT LAYER v4 — rotating gradient glows, shimmer sweeps, twinkling
   starfields, breathing CTA glow, glowing gradient numbers. Applied via
   generic selectors / classes added by animations.js — no per-page markup.
   ========================================================================== */

/* ---------- Rotating gradient glow ring (device panels + featured pricing) ---------- */
@property --border-angle{
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.glow-ring{ position: relative; z-index: 0; }
.glow-ring::before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--border-angle), var(--violet), var(--magenta), var(--gold), var(--violet-light), var(--violet));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.9;
  animation: glow-spin 6s linear infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes glow-spin{ to{ --border-angle: 360deg; } }

/* ---------- Shimmer sweep on primary CTAs ---------- */
.btn-primary{ position: relative; overflow: hidden; }
.floating-contact{ overflow: hidden; }
.btn-primary::after, .floating-contact::after{
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  animation: shimmer-sweep 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmer-sweep{
  0%{ left: -60%; }
  35%, 100%{ left: 140%; }
}

/* ---------- Breathing glow pulse on the floating CTA ---------- */
@keyframes cta-breathe{
  0%, 100%{ box-shadow: var(--shadow-glow); }
  50%{ box-shadow: 0 0 0 1px rgba(108,76,245,0.2), 0 22px 55px -12px rgba(185,83,154,0.55); }
}
.floating-contact{ animation: cta-breathe 3.4s ease-in-out infinite; }

/* ---------- Enhanced cursor spotlight: dual-tone light play ---------- */
.cursor-spotlight{
  background:
    radial-gradient(360px circle at var(--sx,50%) var(--sy,50%), rgba(226,130,92,0.14), transparent 60%),
    radial-gradient(520px circle at var(--sx,50%) var(--sy,50%), rgba(185,83,154,0.18), transparent 65%);
}

/* ---------- Twinkling starfield (dark sections) ---------- */
.starfield-layer{
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 28% 68%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1.8px 1.8px at 46% 12%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 63% 78%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 34%, rgba(255,255,255,0.75), transparent 60%),
    radial-gradient(1.2px 1.2px at 91% 60%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1.6px 1.6px at 8% 85%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1.3px 1.3px at 55% 92%, rgba(255,255,255,0.5), transparent 60%);
  background-repeat: no-repeat;
  animation: star-twinkle 4s ease-in-out infinite alternate;
  opacity: 0.7;
}
@keyframes star-twinkle{ from{ opacity: 0.35; } to{ opacity: 0.85; } }

/* ---------- Glowing gradient numbers (KPIs & stats) ---------- */
.dashboard-kpis .kpi b, .device-kpis .kpi b, .stat-row .stat b, .stat-band .sb b,
.sea-stat b, .meta-stat b, .linkedin-stat b, .inbox-stat b, .case-metric b,
.price-card .amount{
  animation: text-glow-pulse 3.2s ease-in-out infinite;
}
@keyframes text-glow-pulse{
  0%, 100%{ filter: drop-shadow(0 0 5px rgba(108,76,245,0.3)); }
  50%{ filter: drop-shadow(0 0 13px rgba(185,83,154,0.5)); }
}

@media (prefers-reduced-motion: reduce){
  .glow-ring::before{ animation: none !important; }
  .btn-primary::after, .floating-contact::after{ animation: none !important; display: none !important; }
  .floating-contact{ animation: none !important; }
  .starfield-layer{ animation: none !important; opacity: 0.6 !important; }
  .dashboard-kpis .kpi b, .device-kpis .kpi b, .stat-row .stat b, .stat-band .sb b,
  .sea-stat b, .meta-stat b, .linkedin-stat b, .inbox-stat b, .case-metric b,
  .price-card .amount{ animation: none !important; filter: none !important; }
}
@media (pointer: coarse){
  .glow-ring::before{ animation-duration: 9s; }
}

/* ==========================================================================
   CINEMATIC LAYER v5 — dramatic curtain-wipe title reveal + sweeping
   theatrical spotlight beams in dark hero sections, inspired by
   high-production website reveals (bold title wipes, stage-light beams
   crossing a dark scene). Injected by animations.js, no markup changes.
   ========================================================================== */

/* ---------- Cinematic focus-pull reveal for hero titles ---------- */
.hero h1, .page-hero h1{
  transition: transform 1s cubic-bezier(0.16,1,0.3,1), filter 0.9s ease, opacity 0.7s ease;
}
.hero h1.reveal-start, .page-hero h1.reveal-start{
  transform: scale(1.06);
  filter: blur(16px);
  opacity: 0;
}

/* ---------- Sweeping cinematic spotlight beams (hero sections) ---------- */
.spotlight-beams{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.spotlight-beams::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,0.4) 100%);
}
.spotlight-beams .beam{
  position: absolute;
  top: -30%;
  left: -15%;
  width: 150px;
  height: 175%;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 75%);
  transform: rotate(16deg);
  filter: blur(8px);
  animation: beam-sweep 11s ease-in-out infinite;
}
.spotlight-beams .beam:nth-child(2){ animation-delay: -3.6s; opacity: 0.7; width: 120px; }
.spotlight-beams .beam:nth-child(3){ animation-delay: -7.2s; opacity: 0.5; width: 95px; }
@keyframes beam-sweep{
  0%, 100%{ left: -15%; }
  50%{ left: 95%; }
}

@media (prefers-reduced-motion: reduce){
  .hero h1.reveal-start, .page-hero h1.reveal-start{ transform: none !important; filter: none !important; opacity: 1 !important; }
  .spotlight-beams .beam{ animation: none !important; opacity: 0.25 !important; }
}

/* ---------- Canvas particle network (cinematic data-flow background) ---------- */
.particle-canvas{
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   CONTENT-AWARE MOTION v6 — beyond the hero: every section gets an
   animation tied to its own content, reusing the existing [data-reveal]
   → .is-visible toggle already running site-wide (no new JS observers,
   so this stays exactly as robust as the reveal system already in use).
   ========================================================================== */

/* ---------- Numbered process steps: connecting line draws in ---------- */
.process-step::after{
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease-out) 0.35s;
}
.process-step.is-visible::after{ transform: scaleX(1); }
.process-num{
  transform: scale(0.4);
  opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.4s ease;
}
.process-step.is-visible .process-num{ transform: scale(1); opacity: 1; }

/* ---------- Method/differentiator numbers slide in ahead of their text ---------- */
.method-item .m-num{
  display: inline-block;
  transform: translateX(-14px);
  opacity: 0;
  transition: transform 0.6s var(--ease-out), opacity 0.5s ease;
}
.method-item.is-visible .m-num{ transform: translateX(0); opacity: 1; }

/* ---------- Blog thumbnails wipe open like a curtain ---------- */
.blog-card .thumb::before, .featured-visual::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-twin);
  transform-origin: left;
  transform: scaleX(1);
  z-index: 2;
  transition: transform 0.75s var(--ease-out) 0.15s;
}
.blog-card.is-visible .thumb::before,
a[data-reveal].is-visible .featured-visual::before{ transform: scaleX(0); }

/* ---------- Founder / quote cards: mark punctuation pops in ---------- */
.spotlight .mark{
  display: inline-block;
  transform: scale(0.4) rotate(-8deg);
  opacity: 0;
  transition: transform 0.6s var(--ease-out) 0.1s, opacity 0.5s ease 0.1s;
}
[data-reveal].is-visible .mark{ transform: scale(1) rotate(0deg); opacity: 1; }

/* ---------- Chip rows cascade in (only inside containers confirmed to
   toggle .is-visible — .founder-card and .case both carry [data-reveal]
   themselves; hero/page-hero chip-rows are never reveal-gated, so they
   are deliberately left untouched here to avoid hiding them forever) ---------- */
.founder-card .chip-row .chip, .case .chip-row .chip{
  display: inline-flex;
  transform: translateY(10px);
  opacity: 0;
  transition: transform 0.45s var(--ease-out), opacity 0.4s ease;
}
.founder-card.is-visible .chip-row .chip, .case.is-visible .chip-row .chip{ transform: translateY(0); opacity: 1; }
.chip-row .chip:nth-child(1){ transition-delay: 0s; }
.chip-row .chip:nth-child(2){ transition-delay: .08s; }
.chip-row .chip:nth-child(3){ transition-delay: .16s; }
.chip-row .chip:nth-child(4){ transition-delay: .24s; }
.chip-row .chip:nth-child(5){ transition-delay: .32s; }

/* ---------- SVG icon stroke draw-in (services, values, features) ---------- */
.icon-wrap svg [data-draw]{ transition: stroke-dashoffset 0.9s var(--ease-out); }

@media (prefers-reduced-motion: reduce){
  .process-step::after, .process-num, .method-item .m-num,
  .blog-card .thumb::before, .featured-visual::before,
  .spotlight .mark, .chip-row .chip{
    transform: none !important; opacity: 1 !important;
  }
  .icon-wrap svg [data-draw]{ stroke-dashoffset: 0 !important; transition: none !important; }
}