/* PIT motion system: restrained reveals, depth and interaction states. */

/* PIT color overrides: map gold vars to acid-lime */
:root { --gold: #84b340; --gold-bright: #a3d34a; --navy: #0d111c; --navy-2: #111828; --navy-3: #181f34; --steel: #c3cad9; --ivory: #f4f5f7; }

/* ── 1. SCROLL-REVEAL SYSTEM ─────────────────────────────────────────── */
.rv {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.rv.in {
  opacity: 1;
  transform: translateY(0);
}
/* staggered children */
.rv-stagger > *:nth-child(1) { transition-delay: .0s }
.rv-stagger > *:nth-child(2) { transition-delay: .08s }
.rv-stagger > *:nth-child(3) { transition-delay: .16s }
.rv-stagger > *:nth-child(4) { transition-delay: .24s }
.rv-stagger > *:nth-child(5) { transition-delay: .32s }
.rv-stagger > *:nth-child(6) { transition-delay: .40s }
/* left/right slide variants */
.rv-left {
  opacity: 0; transform: translateX(-48px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.rv-left.in { opacity: 1; transform: translateX(0) }
.rv-right {
  opacity: 0; transform: translateX(48px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.rv-right.in { opacity: 1; transform: translateX(0) }
.rv-scale {
  opacity: 0; transform: scale(.92);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.rv-scale.in { opacity: 1; transform: scale(1) }
/* clip-path reveal (dramatic) */
.rv-clip {
  clip-path: inset(100% 0 0 0);
  transition: clip-path .8s cubic-bezier(.22,1,.36,1);
}
.rv-clip.in { clip-path: inset(0 0 0 0) }

/* ── 2. ANIMATED COUNTERS ────────────────────────────────────────────── */
.counter { display: inline-block; min-width: 2ch }
.counter[data-target]:after {
  content: attr(data-target);
  font-variant-numeric: tabular-nums;
}
.counting .counter[data-target]:after { animation: countPulse .3s ease }
@keyframes countPulse {
  0% { transform: scale(1) }
  50% { transform: scale(1.08); color: var(--gold) }
  100% { transform: scale(1) }
}

/* ── 3. FLOATING / PARALLAX DECORATIVE ELEMENTS ──────────────────────── */
.deco-float {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  opacity: .06;
  animation: decoFloat 12s ease-in-out infinite alternate;
}
.deco-float.gold { background: radial-gradient(circle, var(--gold), transparent 70%) }
.deco-float.steel { background: radial-gradient(circle, var(--steel), transparent 70%) }
@keyframes decoFloat {
  0% { transform: translate(0, 0) scale(1) }
  50% { transform: translate(18px, -22px) scale(1.08) }
  100% { transform: translate(-12px, 14px) scale(.95) }
}
/* grid-line pulse behind hero */
.hero-grid-bg {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: .18;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 100%);
}
/* gradient line separator */
.glow-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-bright) 50%, var(--gold) 70%, transparent);
  opacity: .35;
  margin: 0 auto;
  width: 100%;
}

/* ── 4. GLASS-MORPHISM CARDS ─────────────────────────────────────────── */
.glass-card {
  background: rgba(10,31,51,.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(191,204,218,.12);
  border-radius: 18px;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .35s;
}
.glass-card:hover {
  transform: translateY(-5px);
  border-color: rgba(200,159,93,.35);
  box-shadow: 0 28px 60px -28px rgba(0,0,0,.7), 0 0 0 1px rgba(200,159,93,.1);
}

/* ── 5. MAGNETIC BUTTONS ─────────────────────────────────────────────── */
.magnetic {
  position: relative;
  display: inline-flex;
  transition: transform .25s cubic-bezier(.22,1,.36,1);
  cursor: pointer;
}
.magnetic:after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.magnetic:hover:after {
  transform: scale(1.04);
}
/* ripple on click */
.ripple {
  position: relative;
  overflow: hidden;
}
.ripple:before {
  content: '';
  position: absolute;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
.ripple.rippling:before {
  animation: ripple .6s ease-out forwards;
}
@keyframes ripple {
  0% { width: 0; height: 0; opacity: .6 }
  100% { width: 400px; height: 400px; opacity: 0 }
}

/* ── 6. TEXT REVEAL (word-by-word / line clip) ───────────────────────── */
.text-reveal { overflow: hidden }
.text-reveal > * {
  transform: translateY(100%);
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.text-reveal.in > * { transform: translateY(0) }
/* staggered words inside h1/h2 */
.word-reveal .word {
  display: inline-block;
  transform: translateY(0);
  opacity: 1;
  transition: transform .65s cubic-bezier(.22,1,.36,1), opacity .65s cubic-bezier(.22,1,.36,1);
}
.word-reveal:not([data-lcp]):not(.in) .word {
  transform: translateY(105%);
  opacity: 0;
}
.word-reveal.in .word { transform: translateY(0); opacity: 1 }
.word-reveal.in .word:nth-child(2) { transition-delay: .04s }
.word-reveal.in .word:nth-child(3) { transition-delay: .08s }
.word-reveal.in .word:nth-child(4) { transition-delay: .12s }
.word-reveal.in .word:nth-child(5) { transition-delay: .16s }
.word-reveal.in .word:nth-child(6) { transition-delay: .20s }
.word-reveal.in .word:nth-child(7) { transition-delay: .24s }
.word-reveal.in .word:nth-child(8) { transition-delay: .28s }

/* ── 7. GLOW BORDER ANIMATION ────────────────────────────────────────── */
.glow-border {
  position: relative;
  overflow: hidden;
}
.glow-border:before {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  background: conic-gradient(from var(--glow-angle, 0deg), transparent 30%, var(--gold) 50%, transparent 70%);
  z-index: -1;
  opacity: 0;
  transition: opacity .4s;
  animation: glowRotate 4s linear infinite;
}
.glow-border:hover:before { opacity: .6 }
@keyframes glowRotate {
  to { --glow-angle: 360deg }
}
@property --glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ── 8. GRADIENT TEXT ────────────────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, var(--gold), var(--gold-bright), var(--steel));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── 9. STAT STRIP PREMIUM ──────────────────────────────────────────── */
.stat-strip .stat-cell {
  position: relative;
  overflow: hidden;
}
.stat-strip .stat-cell:after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.stat-strip .stat-cell.in:after { transform: scaleX(1) }
.stat-strip .stat-cell strong {
  transition: transform .5s cubic-bezier(.22,1,.36,1);
  display: inline-block;
}
.stat-strip .stat-cell.in strong {
  animation: countBounce .5s cubic-bezier(.22,1,.36,1);
}
@keyframes countBounce {
  0% { transform: scale(.8); opacity: .5 }
  60% { transform: scale(1.12) }
  100% { transform: scale(1); opacity: 1 }
}

/* ── 10. SECTION DIVIDER WAVE ────────────────────────────────────────── */
.section-wave {
  position: relative;
  margin-top: -1px;
}
.section-wave:before {
  content: '';
  display: block;
  height: 80px;
  background: var(--ivory);
  clip-path: ellipse(55% 100% at 50% 100%);
}

/* ── 11. CARD HOVER MICRO-INTERACTIONS ───────────────────────────────── */
.premium-card .card-media img {
  transition: transform .6s cubic-bezier(.22,1,.36,1), filter .4s;
}
.premium-card:hover .card-media img {
  transform: scale(1.08);
  filter: brightness(1.05);
}
.premium-card .card-cta i {
  transition: transform .3s cubic-bezier(.22,1,.36,1);
  display: inline-block;
}
.premium-card:hover .card-cta i {
  transform: translateX(6px);
}
/* case card subtle glow */
.case-card {
  transition: background .25s, box-shadow .4s;
}
.case-card:hover {
  box-shadow: inset 0 0 0 1px rgba(200,159,93,.2), 0 20px 50px -24px rgba(0,0,0,.6);
}

/* ── 12. INSIGHT ROW HOVER ───────────────────────────────────────────── */
.insight-row {
  transition: background .2s, transform .25s cubic-bezier(.22,1,.36,1);
}
.insight-row:hover {
  background: var(--navy-3);
  transform: translateX(4px);
}
.insight-row:hover .arrow {
  transform: translateX(6px);
  transition: transform .25s;
}

/* ── 13. FOUNDER CARD HOVER ──────────────────────────────────────────── */
.founder-card {
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
}
.founder-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 54px -20px rgba(0,0,0,.6);
}
.founder-photo {
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s;
}
.founder-card:hover .founder-photo {
  transform: scale(1.06);
  box-shadow: 0 0 0 6px rgba(200,159,93,.25);
}

/* ── 14. PROCESS STEP CONNECTOR LINE ─────────────────────────────────── */
.process-step {
  position: relative;
}
.process-step:after {
  content: '';
  position: absolute;
  top: 34px; right: 0;
  width: 28px; height: 1px;
  background: var(--gold);
  opacity: .3;
  transition: width .4s, opacity .4s;
}
.process-step:hover:after { width: 44px; opacity: .6 }
.process-step:last-child:after { display: none }

/* ── 15. TESTIMONIAL CARD ANIMATION ──────────────────────────────────── */
.testimonial-card {
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 54px -16px rgba(1,20,37,.22);
}
.testimonial-card .quote:before {
  transition: transform .3s, opacity .3s;
}
.testimonial-card:hover .quote:before {
  transform: scale(1.1) rotate(-3deg);
  opacity: .8;
}

/* ── 16. CTA BAND ANIMATED GRADIENT BORDER ───────────────────────────── */
.cta-band {
  position: relative;
  overflow: hidden;
}
.cta-band:before {
  content: '';
  position: absolute;
  top: 0; left: -100%; right: 0; bottom: 0;
  width: 300%;
  background: linear-gradient(90deg, transparent, rgba(200,159,93,.06), transparent);
  animation: ctaShimmer 6s ease-in-out infinite;
}
@keyframes ctaShimmer {
  0% { transform: translateX(-30%) }
  50% { transform: translateX(30%) }
  100% { transform: translateX(-30%) }
}

/* ── 17. HERO PARALLAX DEPTH ─────────────────────────────────────────── */
.hero-detail {
  position: relative;
  overflow: hidden;
}
.hero-detail .hero-panel {
  transition: transform .15s linear;
}

/* ── 18. PAGE LOAD ENTRANCE ──────────────────────────────────────────── */
body { animation: pageIn .5s ease }
@keyframes pageIn {
  from { opacity: 0 }
  to { opacity: 1 }
}

/* ── 19. SECTION HOVER-LIFT ───────────────────────────────────────────── */
.section.light {
  transition: box-shadow .4s;
}
.section.light:hover {
  box-shadow: inset 0 1px 0 0 rgba(200,159,93,.1);
}

/* ── 20. WHATSAPP FLOATING BUTTON (PSW) ──────────────────────────────── */
.wa-float {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 24px rgba(37,211,102,.45);
  z-index: 100;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
  animation: waPulse 3s ease-in-out infinite;
}
.wa-float:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 30px rgba(37,211,102,.6);
}
@keyframes waPulse {
  0%,100% { box-shadow: 0 6px 24px rgba(37,211,102,.45) }
  50% { box-shadow: 0 6px 32px rgba(37,211,102,.65), 0 0 0 8px rgba(37,211,102,.12) }
}

/* ── 21. DETAIL ITEM HOVER GLOW ──────────────────────────────────────── */
.detail-item {
  transition: background .25s, transform .25s;
}
.detail-item:hover {
  background: var(--navy-3);
  transform: translateY(-2px);
}

/* ── 22. MOBILE MENU SLIDE ───────────────────────────────────────────── */
.mobile-menu {
  animation: menuSlide .3s cubic-bezier(.22,1,.36,1);
}
@keyframes menuSlide {
  from { opacity: 0; transform: translateY(-12px) }
  to { opacity: 1; transform: translateY(0) }
}

/* ── 23. CHAT WIDGET FLOAT ───────────────────────────────────────────── */
.chat-fab {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  color: var(--navy);
  display: grid; place-items: center;
  box-shadow: 0 6px 24px rgba(200,159,93,.45);
  z-index: 100;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.chat-fab:hover { transform: scale(1.1) }

/* ── 24. LOADING SKELETON (for async content) ────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--navy-2) 25%, var(--navy-3) 50%, var(--navy-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}
@keyframes shimmer {
  0% { background-position: 200% 0 }
  100% { background-position: -200% 0 }
}

/* ── 24b. STICKY TOPBAR DEPTH ────────────────────────────────────────── */
.topbar {
  transition: height .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, background .28s ease;
}
.topbar.is-scrolled {
  box-shadow: 0 18px 40px -28px rgba(0,0,0,.65);
}

/* ── 25. RESPONSIVE REFINEMENTS ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-left, .rv-right, .rv-scale, .rv-clip,
  .text-reveal, .word-reveal .word {
    transition: none;
    opacity: 1;
    transform: none;
    clip-path: none;
  }
  .deco-float { animation: none }
  .cta-band:before { animation: none }
  .wa-float { animation: none }
}


/* ── FINAL PASS: scroll progress + photo parallax depth ──────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  z-index: 200;
  pointer-events: none;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright, var(--gold)));
  box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 45%, transparent);
  transition: width .08s linear;
}
.hero-panel.photo {
  background-size: cover;
  background-position: center calc(50% + var(--motion-offset, 0px));
  transition: background-position .12s linear;
}
.hero-panel.photo .panel-inner,
.hero-panel.photo > span {
  position: relative;
  z-index: 1;
}
.hero-panel.photo:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(0,0,0,.28), rgba(0,0,0,.55) 70%);
  pointer-events: none;
  z-index: 0;
}
.visual-strip img,
.card-media img,
.reference-card img {
  transition: transform .7s cubic-bezier(.22,1,.36,1), filter .4s;
}
.visual-strip figure:hover img,
.reference-card:hover img,
.premium-card:hover .card-media img {
  transform: scale(1.05);
  filter: brightness(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none }
  .hero-panel.photo { background-position: center; transition: none }
}