/* =====================================================
   PREMIUM UPGRADE PACK
   ===================================================== */

/* ---- Smooth scroll (Lenis) ---- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---- Page loader ---- */
.pp-loader {
  position: fixed; inset: 0; z-index: 100000;
  display: grid; place-items: center;
  background: var(--bg);
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
.pp-loader.done { opacity: 0; visibility: hidden; }
.pp-loader .mark {
  width: 74px; height: 74px; border-radius: 22px;
  display: grid; place-items: center;
  font-size: 2.2rem; font-weight: 800; color: #04101f;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  box-shadow: 0 0 60px rgba(25,227,193,0.5);
  animation: ppLogo 1.4s cubic-bezier(.2,.8,.2,1) infinite alternate;
}
.pp-loader .line {
  position: absolute; bottom: 38%; width: 160px; height: 2px;
  background: rgba(255,255,255,0.1); overflow: hidden; border-radius: 2px;
}
.pp-loader .line::after {
  content: ''; position: absolute; inset: 0; width: 40%;
  background: linear-gradient(90deg, var(--teal), var(--blue));
  animation: ppLine 1.1s ease-in-out infinite;
}
@keyframes ppLogo { from { transform: perspective(500px) rotateY(-25deg) scale(0.95); } to { transform: perspective(500px) rotateY(25deg) scale(1.05); } }
@keyframes ppLine { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* ---- Page transition curtain ---- */
.pp-curtain {
  position: fixed; inset: 0; z-index: 99999; pointer-events: none;
  background: linear-gradient(135deg, #0e1530, #070b17);
  transform: translateY(100%);
  transition: transform 0.55s cubic-bezier(.7,0,.2,1);
}
.pp-curtain.cover { transform: translateY(0); pointer-events: all; }

/* ---- Custom cursor (desktop only) ---- */
.pp-dot, .pp-ring {
  position: fixed; top: 0; left: 0; z-index: 100001; pointer-events: none;
  border-radius: 50%; transform: translate(-50%, -50%); opacity: 0;
  transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.pp-dot { width: 7px; height: 7px; background: var(--teal); box-shadow: 0 0 14px var(--teal); }
.pp-ring { width: 38px; height: 38px; border: 1.5px solid rgba(25,227,193,0.6); }
.pp-ring.hover { width: 64px; height: 64px; background: rgba(25,227,193,0.1); border-color: var(--teal); }
.pp-ring.down { width: 26px; height: 26px; background: rgba(25,227,193,0.25); }
.pp-on .pp-dot, .pp-on .pp-ring { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  body.pp-on, body.pp-on a, body.pp-on button { cursor: none; }
}
@media (hover: none), (pointer: coarse) { .pp-dot, .pp-ring { display: none; } }

/* ---- Line-by-line text reveal ---- */
.pp-split { overflow: hidden; display: block; }
.pp-split .pp-word {
  display: inline-block; transform: translateY(110%) rotate(4deg); opacity: 0;
  transition: transform 0.9s cubic-bezier(.2,.8,.2,1), opacity 0.9s ease;
  transition-delay: calc(var(--w) * 55ms);
}
.pp-split.in .pp-word { transform: none; opacity: 1; }

/* ---- Magnetic buttons ---- */
.pp-magnet { transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease; will-change: transform; }

/* ---- Shine sweep on buttons ---- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::before {
  content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-20deg); transition: left 0.7s ease;
}
.btn-primary:hover::before { left: 130%; }

/* ---- Calmer, more luxurious pulses (overrides) ---- */
.btn-primary { animation: ppSoftPulse 5s ease-in-out infinite; }
@keyframes ppSoftPulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(25,227,193,0.28); }
  50%      { box-shadow: 0 12px 38px rgba(74,125,255,0.42); }
}
.orb { animation-duration: 26s; opacity: 0.28; }
body::before { animation-duration: 60s; }
.carousel { animation-duration: 60s; }

/* ---- Section headings: animated underline ---- */
.section-head h2, .page-hero h1 { position: relative; }
.section-head h2::after {
  content: ''; display: block; width: 0; height: 3px; margin: 16px auto 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--teal), var(--blue), var(--gold));
  box-shadow: 0 0 14px rgba(25,227,193,0.6);
  transition: width 1s cubic-bezier(.2,.8,.2,1) 0.3s;
}
.section-head.reveal.show h2::after, .section-head.pp-seen h2::after { width: 90px; }

/* ---- Smoother reveals with stagger ---- */
.reveal { transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1); }
.grid > .reveal:nth-child(2), .services-grid > *:nth-child(2) { transition-delay: 0.08s; }
.grid > .reveal:nth-child(3), .services-grid > *:nth-child(3) { transition-delay: 0.16s; }
.grid > .reveal:nth-child(4), .services-grid > *:nth-child(4) { transition-delay: 0.24s; }

/* ---- Image / card soft float ---- */
.pp-float { animation: ppFloat 7s ease-in-out infinite; }
@keyframes ppFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* ---- Navbar: shrinks and gets glassier on scroll ---- */
.navbar { transition: background 0.4s ease, box-shadow 0.4s ease; }
.navbar .nav-inner { transition: height 0.4s ease; }
.navbar.pp-scrolled { background: rgba(7,11,23,0.88); box-shadow: 0 10px 40px rgba(0,0,0,0.45); }
.navbar.pp-scrolled .nav-inner { height: 62px; }
.nav-links a:not(.btn) { position: relative; }
.nav-links a:not(.btn)::after {
  content: ''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--teal), var(--blue)); transition: width 0.35s ease;
}
.nav-links a:not(.btn):hover::after, .nav-links a.active::after { width: 100%; }

/* ---- Back to top ---- */
.pp-top {
  position: fixed; right: 22px; bottom: 104px; z-index: 9990;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 1.2rem; color: var(--text);
  background: rgba(14,21,48,0.85); border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(20px); pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.3s;
}
.pp-top.show { opacity: 1; transform: none; pointer-events: auto; }
.pp-top:hover { border-color: var(--teal); box-shadow: 0 0 24px rgba(25,227,193,0.4); }

/* ---- Nicer text selection and scrollbar ---- */
::selection { background: rgba(25,227,193,0.35); color: #fff; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--teal), var(--blue)); border-radius: 10px; border: 2px solid var(--bg); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .pp-loader, .pp-curtain { display: none; }
  .pp-split .pp-word { transform: none; opacity: 1; }
}
/* =====================================================
   PREMIUM POLISH PACK
   ===================================================== */

/* ---- Extra gold variable ---- */
:root {
  --gold-soft: #e9c98a;
  --gold-glow: rgba(245, 194, 107, 0.35);
}

/* ---- More breathing space ---- */
section { padding: 110px 0; }
.section-head { margin-bottom: 72px; max-width: 720px; }
.section-head p { margin-top: 18px; line-height: 1.8; }
p { line-height: 1.8; }
.page-hero { padding: 110px 0 50px; }
.page-hero p { line-height: 1.8; }
.hero { padding: 100px 0 120px; }
.hero p.lead { line-height: 1.85; margin: 26px 0 40px; }
.grid { gap: 30px; }
.services-grid { gap: 34px; }
.footer-grid { gap: 56px; }
footer { padding: 70px 0 34px; margin-top: 70px; }

/* ---- Tighter, punchier headlines ---- */
h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); letter-spacing: -0.03em; line-height: 1.08; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); letter-spacing: -0.025em; }
.page-hero h1, .hero h1 { max-width: 14ch; margin-left: auto; margin-right: auto; }
.hero h1 { margin-left: 0; max-width: 15ch; }
@media (max-width: 960px) { .hero h1 { margin-left: auto; } }

/* ---- Gold accents ---- */
.eyebrow {
  color: var(--gold-soft);
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before, .eyebrow::after {
  content: ''; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow::after { background: linear-gradient(90deg, var(--gold), transparent); }

/* gold line under inner page titles */
.page-hero h1::after {
  content: ''; display: block; width: 0; height: 2px; margin: 26px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 16px var(--gold-glow);
  animation: goldLine 1.4s cubic-bezier(.2,.8,.2,1) 0.8s forwards;
}
@keyframes goldLine { to { width: 160px; } }

/* stat numbers: teal to gold */
.stat strong, .hero-stats strong {
  background: linear-gradient(90deg, var(--teal), var(--gold-soft));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* gold touch on icons and badges */
.service-icon, .card .icon, .bk-perk .ico, .book-info .perk .icon {
  border-color: rgba(245, 194, 107, 0.35);
}
.service-card:hover, .tilt:hover, .card:hover {
  border-color: rgba(245, 194, 107, 0.6);
  box-shadow: 0 30px 70px rgba(0,0,0,0.55), 0 0 44px var(--gold-glow);
}

/* primary button: thin gold ring on hover */
.btn-primary:hover {
  box-shadow: 0 16px 44px rgba(74,125,255,0.45), 0 0 0 2px rgba(245,194,107,0.55);
}

/* gold divider before the footer */
footer { position: relative; border-top: none; }
footer::before {
  content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--teal), var(--gold), transparent);
  opacity: 0.7;
}
.footer-grid h4 { color: var(--gold-soft); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.8rem; }

/* ---- 3D tilt + glow on stats, timeline, CTA, about visuals ---- */
.stats-row { perspective: 1400px; gap: 30px; }
.stat, .cta-band, .timeline-item, .about-visual {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, border-color 0.3s ease, box-shadow 0.4s ease;
}
.stat { position: relative; overflow: hidden; padding: 38px 18px; }
.stat::before, .cta-band::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(245,194,107,0.2), transparent 45%);
  transition: opacity 0.3s ease;
}
.stat:hover::before, .cta-band:hover::before { opacity: 1; }
.stat:hover { border-color: rgba(245,194,107,0.6); box-shadow: 0 26px 60px rgba(0,0,0,0.5), 0 0 40px var(--gold-glow); }
.stat strong { transform: translateZ(40px); }
.stat span { display: block; transform: translateZ(22px); }

.cta-band { position: relative; overflow: hidden; padding: 90px 30px; }
.cta-band h2, .cta-band p { transform: translateZ(30px); }
.cta-band .btn { transform: translateZ(40px); }
.cta-band:hover { border-color: rgba(245,194,107,0.5); box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 60px var(--gold-glow); }

.timeline-item { padding: 18px 22px; border-radius: 16px; border: 1px solid transparent; }
.timeline-item:hover {
  border-color: rgba(245,194,107,0.35); background: rgba(255,255,255,0.03);
  transform: translateX(8px);
}
.timeline-item::before { box-shadow: 0 0 18px rgba(245,194,107,0.8); background: linear-gradient(135deg, var(--gold), var(--teal)); }

/* about orbit: slower and gold-tinted core glow */
.orbit { animation-duration: 22s; }
.orbit .core { box-shadow: 0 0 60px rgba(25,227,193,0.55), 0 0 100px rgba(245,194,107,0.25); }

/* ---- Mobile spacing ---- */
@media (max-width: 720px) {
  section { padding: 76px 0; }
  .section-head { margin-bottom: 48px; }
  .cta-band { padding: 60px 22px; }
  .eyebrow::before, .eyebrow::after { width: 14px; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .page-hero h1::after { animation: none; width: 160px; }
}