/* ===== Premium motion layer ===== */
:root {
  --mx: 50vw;
  --my: 20vh;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgba(185,255,34,.09), transparent 42%);
  opacity: .9;
}

.site-header,
main,
footer { position: relative; z-index: 1; }

.site-header {
  transition: transform .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.site-header.is-scrolled {
  transform: translateY(-6px) scale(.99);
  border-color: var(--line);
  box-shadow: 0 18px 60px rgba(0,0,0,.32), 0 0 0 1px rgba(185,255,34,.05) inset;
}

.reveal {
  opacity: 0;
  transform: translateY(34px) scale(.985);
  filter: blur(8px);
  transition:
    opacity .85s cubic-bezier(.2,.8,.2,1),
    transform .85s cubic-bezier(.2,.8,.2,1),
    filter .85s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.delay-1 { transition-delay: .12s; }
.delay-2 { transition-delay: .22s; }
.delay-3 { transition-delay: .32s; }

@keyframes heroFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.hero-visual {
  transform-style: preserve-3d;
  transition: transform .22s ease-out, box-shadow .3s ease;
}
.hero-visual:hover {
  box-shadow: 0 36px 110px rgba(0,0,0,.5), 0 0 55px rgba(185,255,34,.10);
  will-change: transform;
}

.feature-card,
.service-card,
.price-card,
.notice-card,
.step,
.founder-card,
.referral {
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease;
}
.feature-card:hover,
.service-card:hover,
.notice-card:hover,
.step:hover,
.founder-card:hover,
.referral:hover {
  transform: translateY(-8px);
  border-color: rgba(185,255,34,.38);
  box-shadow: 0 24px 58px rgba(0,0,0,.25), 0 0 30px rgba(185,255,34,.07);
  will-change: transform;
}

.price-card:hover {
  transform: translateY(-10px) scale(1.012);
  box-shadow: 0 30px 80px rgba(0,0,0,.34), 0 0 42px rgba(185,255,34,.10);
}
.price-card.recommended::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, transparent 20%, var(--green), transparent 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .35;
  animation: borderSweep 4s linear infinite;
  pointer-events: none;
}
@keyframes borderSweep {
  0% { filter: hue-rotate(0deg); transform: rotate(0deg); }
  100% { filter: hue-rotate(18deg); transform: rotate(360deg); }
}

.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::after {
  content: "";
  position: absolute;
  top: -120%;
  left: -40%;
  width: 34%;
  height: 340%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform: rotate(24deg);
  transition: left .65s ease;
  z-index: -1;
}
.btn:hover::after { left: 120%; }
.btn:active { transform: translateY(0) scale(.98); }

.eyebrow {
  position: relative;
  overflow: hidden;
}
.eyebrow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(185,255,34,.18), transparent);
  transform: translateX(-120%);
  animation: eyebrowSweep 4.5s ease-in-out infinite;
}
@keyframes eyebrowSweep {
  0%,55% { transform: translateX(-120%); }
  80%,100% { transform: translateX(120%); }
}

.trust-line span,
.contact-badges span {
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.trust-line span:hover,
.contact-badges span:hover {
  transform: translateY(-3px);
  border-color: rgba(185,255,34,.45);
  background: rgba(185,255,34,.09);
}

.nav a::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav a.active::after,
.nav a:hover::after { transform: scaleX(1); }

.language-switch button,
.theme-toggle { transition: transform .2s ease, background .2s ease, color .2s ease; }
.language-switch button:hover:not([disabled]),
.theme-toggle:hover { transform: translateY(-2px); }

.switch-dot { transition: transform .35s cubic-bezier(.2,.8,.2,1), background .3s ease; }
html[data-theme="light"] .switch-dot { transform: translateX(3px); }

.floating-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(1px);
  opacity: .28;
  animation: orbDrift 14s ease-in-out infinite alternate;
}
.floating-orb.one {
  width: 180px; height: 180px;
  left: -70px; top: 30%;
  background: radial-gradient(circle, rgba(185,255,34,.22), transparent 68%);
}
.floating-orb.two {
  width: 240px; height: 240px;
  right: -110px; top: 62%;
  background: radial-gradient(circle, rgba(255,162,76,.16), transparent 70%);
  animation-delay: -6s;
}
@keyframes orbDrift {
  from { transform: translate3d(0,0,0) scale(.95); }
  to { transform: translate3d(26px,-38px,0) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
}

/* ===== Extra premium layer: progress bar, count-up, FAQ, hero intro ===== */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--green), #ffe066);
  box-shadow: 0 0 14px rgba(185,255,34,.65);
  z-index: 200;
  transition: width .08s linear;
}

.hero-copy h1 {
  animation: h1Intro .8s cubic-bezier(.16,.8,.2,1) .28s both, heroFloat 6s ease-in-out infinite 1.2s;
}
@keyframes h1Intro {
  from { opacity: 0; transform: translateY(28px) scale(.98); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Choreographed page-load sequence: header frame, then hero content cascades in reading order, then the dashboard visual arrives */
.site-header {
  animation: headerIntro .6s cubic-bezier(.16,.8,.2,1) both;
}
@keyframes headerIntro {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-copy > *:not(h1) {
  opacity: 0;
  animation: heroItemIntro .7s cubic-bezier(.16,.8,.2,1) both;
}
.hero-copy > .eyebrow { animation-delay: .12s; }
.hero-copy > .lead { animation-delay: .5s; }
.hero-copy > .trust-line { animation-delay: .62s; }
.hero-copy > .hero-buttons { animation-delay: .74s; }
.hero-copy > .whatsapp-link { animation-delay: .86s; }
@keyframes heroItemIntro {
  from { opacity: 0; transform: translateY(22px) scale(.98); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.hero-visual {
  opacity: 0;
  animation: heroVisualIntro 1s cubic-bezier(.16,.8,.2,1) .5s both;
}
@keyframes heroVisualIntro {
  from { opacity: 0; transform: translateX(48px) scale(.94); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

.count-num { font-variant-numeric: tabular-nums; }

details {
  overflow: hidden;
}
summary {
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  float: right;
  color: var(--green);
  font-size: 20px;
  transition: transform .25s ease;
}
details[open] summary::after { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .hero-copy h1 { animation: none; }
  .scroll-progress { transition: none; }
}

@media (max-width: 1080px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header { justify-content: space-between; }
  .hero { grid-template-columns: 1fr; padding-top: 70px; }
  .hero-visual { min-height: 480px; }
  .why-grid, .service-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 440px)); }
  .contact-panel, .proof { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .site-header { width: calc(100% - 20px); margin-top: 10px; }
  .brand-text, .language-switch, .theme-label, .header-cta { display: none; }
  h1 { font-size: 46px; }
  .hero { min-height: auto; padding-top: 50px; }
  .hero-visual { min-height: 320px; }
  .kinetic-number { font-size: 64px; }
  .why-grid, .service-grid, .pricing-grid, .notice-grid, .process-line, .faq-grid, .resource-grid { grid-template-columns: 1fr; }
  .price { font-size: 48px; }
  fieldset { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
}
.page-view { display: none; }
.page-view.active-view { display: block; animation: viewFade .4s ease; }
@keyframes viewFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .page-view.active-view { animation: none; }
}