/* ============================================================
   Homepage. Light only, matching the rest of the site.
   The hero scene animates entirely in CSS so it costs no JS.
   ============================================================ */

.home-section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.home-section.band { background: var(--paper-2); }
.home-page .eyebrow.q { color: var(--muted); }
.section-lede { color: var(--ink-2); margin-top: .9rem; }
.home-page h2 { font-size: clamp(1.7rem, 3.8vw, 2.7rem); font-weight: 800; line-height: 1.08; }
.home-page h3 { font-size: clamp(1.05rem, 2vw, 1.22rem); font-weight: 700; }

/* ---------------- hero ---------------- */
.home-hero {
  position: relative;
  min-height: clamp(520px, 74vh, 760px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
@media (min-width: 761px) {
  /* More height means less of the artwork is sliced away, so the clouds and the
     rocket's exhaust stay in frame alongside the copy. */
  .home-hero { min-height: clamp(640px, 84vh, 880px); }
}
.hero-scene { position: absolute; inset: 0; z-index: 0; }
.hero-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-inner { position: relative; z-index: 2; width: 100%; }

.hero-h1 {
  font-size: clamp(2.4rem, 5.9vw, 4.15rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
  max-width: 16ch;
}
.hero-h1 .grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  font-size: clamp(1.02rem, 2vw, 1.22rem);
  font-weight: 600;
  color: var(--ink-2);
  margin: 1.2rem 0 1.9rem;
  max-width: 46ch;
}
.hero-chips { display: flex; flex-wrap: wrap; gap: .55rem; list-style: none; padding: 0; margin: 2rem 0 0; }
.hero-chips li {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: .45rem .95rem;
  font-size: .82rem;
  color: var(--ink-2);
  box-shadow: var(--sh-sm);
}
.hero-chips b { font-family: var(--mono); color: var(--ink); font-weight: 650; }

/* --- scene motion (CSS only) ---
   Position lives on the #tf*Pos wrappers, never on the animated element itself:
   a CSS `transform` from a keyframe REPLACES the SVG transform attribute, which
   is what previously dropped the rocket at the viewBox origin (top-left). The
   wrappers carry no animation, so they are also the safe place to reposition. */

/* The scene is `slice`-cropped, so on a narrow screen the visible band is the
   middle of the viewBox and anything past x≈990 is cut off. Pull the rocket into
   that band, smaller, low and right, so it still reads as bottom-right on a phone. */
@media (max-width: 760px) {
  #tfRocketPos { transform: translate(806px, 470px) scale(.62); }
  #tfPlanetPos { transform: translate(880px, 150px) scale(.7); }
}

#tfRocket { transform-box: fill-box; transform-origin: 50% 60%; animation: tfHover 5.5s ease-in-out infinite; }
@keyframes tfHover {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50%      { transform: translateY(-16px) rotate(1.2deg); }
}
.flame { transform-box: fill-box; transform-origin: 50% 0%; animation: tfFlicker .28s steps(2) infinite alternate; }
@keyframes tfFlicker {
  from { transform: scaleY(.9) scaleX(1); opacity: .92; }
  to   { transform: scaleY(1.12) scaleX(.94); opacity: 1; }
}
.tw { animation: tfTwinkle 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.tw:nth-of-type(2n) { animation-delay: -1.1s; }
.tw:nth-of-type(3n) { animation-delay: -2.2s; }
@keyframes tfTwinkle {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.12); }
}
.cloud { animation: tfSway 11s ease-in-out infinite; transform-box: fill-box; }
.cloud.b { animation-duration: 14s; animation-delay: -3s; }
@keyframes tfSway { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(14px); } }
#tfPlanet { animation: tfOrbit 26s linear infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes tfOrbit { to { transform: rotate(360deg); } }

/* floating music notes */
.hero-notes { position: absolute; inset: 0; pointer-events: none; }
.note { position: absolute; opacity: 0; animation: tfRise linear infinite; }
.note svg { width: 100%; height: 100%; display: block; }
@keyframes tfRise {
  0%   { opacity: 0; transform: translateY(20px) rotate(-12deg) scale(.7); }
  12%  { opacity: .85; }
  75%  { opacity: .7; }
  100% { opacity: 0; transform: translateY(-190px) rotate(16deg) scale(1.05); }
}

/* ---------------- service cards ---------------- */
.svc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.1rem; margin-top: 2.25rem; }
.svc-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1.5px solid var(--hairline);
  border-radius: var(--r);
  padding: 1.7rem 1.4rem 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, border-color .18s;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: var(--hairline-2); color: inherit; }
.sc-icon {
  width: 50px; height: 50px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--grad-soft); color: var(--violet);
  margin-bottom: 1rem;
}
.sc-icon svg { width: 24px; height: 24px; }
.svc-card h3 { margin: 0 0 .45rem; }
.svc-card p { font-size: .93rem; color: var(--ink-2); margin: 0; }
.sc-from { font-size: .8rem; color: var(--muted); margin-top: .9rem; }
.sc-price {
  font-family: var(--mono);
  font-size: 1.7rem; font-weight: 650; letter-spacing: -.03em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* wc_price() nests <bdi> and a currency <span>; WooCommerce's own stylesheet is
   dequeued on this page, so the few rules the markup actually needs live here. */
.sc-price bdi { unicode-bidi: isolate; }
.sc-price .woocommerce-Price-currencySymbol { font-size: .62em; vertical-align: .38em; margin-right: .04em; }

.sc-cta { margin-top: 1.15rem; font-weight: 650; color: var(--violet); font-size: .95rem; }
.svc-card:hover .sc-cta { color: var(--magenta); }
.svc-more { margin: 1.4rem 0 0; font-size: .95rem; color: var(--ink-2); }

/* ---------------- counters ---------------- */
.counters {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 1px; background: var(--hairline);
  border: 1px solid var(--hairline); border-radius: var(--r); overflow: hidden;
  margin-top: 2rem;
}
.cnt { background: var(--surface); padding: 1.6rem 1.2rem; text-align: center; }
.cnt .n {
  display: block;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(1.6rem, 3.4vw, 2.15rem); font-weight: 650;
  letter-spacing: -.035em; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cnt .l { display: block; font-size: .84rem; color: var(--muted); margin-top: .5rem; }

/* ---------------- steps / why / features ---------------- */
.steps { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 1.2rem; }
.step { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r); padding: 1.5rem; transition: transform .18s, box-shadow .18s; }
.step:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.step .num {
  display: grid; place-items: center;
  width: 2.15rem; height: 2.15rem; border-radius: 999px;
  background: var(--grad); color: #fff;
  font-family: var(--mono); font-size: .82rem; font-weight: 650;
  margin-bottom: .95rem;
}
.step h3 { margin: 0 0 .4rem; }
.step p { margin: 0; font-size: .93rem; color: var(--ink-2); }

/* The original /tiktok/ step animations. Square source, so the aspect-ratio box
   reserves the space before the GIF loads and nothing shifts underneath it. */
.step { text-align: center; }
.step .num { margin-inline: auto; }
.step-anim {
  display: block; width: min(190px, 72%); height: auto; aspect-ratio: 1;
  margin: .5rem auto .2rem; object-fit: contain;
}
@media (min-width: 700px) { .step-anim { width: min(200px, 80%); } }

.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.1rem; margin-top: 2rem; }
.why {
  position: relative; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r); padding: 1.7rem 1.5rem;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.why:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: color-mix(in srgb, var(--violet) 28%, var(--hairline)); }
.why h3 { margin: 0 0 .55rem; font-size: 1.22rem; }
.why p { margin: 0 0 .8rem; font-size: .93rem; color: var(--ink-2); }
.why p:last-child { margin-bottom: 0; }
.why p:first-of-type { font-size: 1rem; color: var(--ink); }

.why-ico {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--grad-soft); color: var(--violet); margin-bottom: .9rem;
}
.why-ico svg { width: 24px; height: 24px; }
.why:hover .why-ico { color: var(--magenta); }

.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.1rem; margin-top: 2rem; }
.feat { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r); padding: 1.4rem; transition: transform .18s, box-shadow .18s; }
.feat:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.feat h3 { margin: 0 0 .4rem; font-size: 1.02rem; }
.feat p { margin: 0; font-size: .91rem; color: var(--ink-2); }

/* ---------------- prose ---------------- */
.home-prose h2 { margin-top: 2.6rem; }
.home-prose h2:first-child { margin-top: 0; }
.home-prose h3 { margin-top: 1.9rem; }
.home-prose blockquote {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.12rem, 2.3vw, 1.42rem); line-height: 1.45; color: var(--ink);
  border-left: 3px solid var(--violet); padding: .3rem 0 .3rem 1.3rem; margin: 2rem 0;
}
.home-prose blockquote p { margin: 0; }

/* ---------------- testimonials ---------------- */
.tst-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1.1rem; margin-top: 2rem; }
.tst { margin: 0; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r); padding: 1.5rem; transition: transform .18s, box-shadow .18s; }
.tst:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.tst blockquote { margin: 0 0 1rem; font-family: var(--serif); font-style: italic; font-size: 1.01rem; line-height: 1.5; color: var(--ink); }
.tst figcaption { display: flex; align-items: center; gap: .85rem; font-size: .88rem; color: var(--muted); }
.tst figcaption b { color: var(--ink); display: block; }

/* Real reviewer portraits, cropped round with a gradient ring. */
.tst .av {
  width: 56px; height: 56px; flex: none; border-radius: 50%;
  object-fit: cover; background: var(--grad-soft);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--violet), 0 4px 12px -4px rgba(0,0,0,.25);
}
.tst-who { display: flex; flex-direction: column; gap: .12rem; }
.tst-place { display: flex; align-items: center; gap: .35rem; }
.tst-place .flag { font-size: 1.05rem; line-height: 1; }

/* ---------------- faq ---------------- */
.faq { margin-top: 1.6rem; border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 2.5rem 1.1rem 0; font-weight: 650; font-size: 1.01rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 1.35rem; color: var(--violet); }
.faq details[open] summary::after { content: "\2212"; }
.faq-body { padding: 0 0 1.25rem; color: var(--ink-2); font-size: .96rem; }
.faq-body p:last-child { margin-bottom: 0; }

/* ---------------- final ----------------
   Rebuilds the original homepage's closing block: the #e056fd -> #d82d77
   gradient with three white price cards sitting on it. */
.home-final {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(135deg, #e056fd 0%, #d82d77 100%);
  border-radius: calc(var(--r) * 1.4); color: #fff;
  padding: clamp(2.4rem, 5vw, 3.8rem) clamp(1.3rem, 4vw, 3rem);
  text-align: center; box-shadow: 0 24px 60px -22px rgba(216, 45, 119, .55);
}
/* Slow-drifting highlight so the panel is not a flat fill. */
.hf-glow {
  position: absolute; inset: -40%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 42% at 22% 26%, rgba(255,255,255,.28), transparent 70%),
    radial-gradient(32% 36% at 80% 74%, rgba(255,214,102,.22), transparent 70%);
  animation: hfDrift 18s ease-in-out infinite alternate;
}
@keyframes hfDrift { to { transform: translate3d(4%, -3%, 0) scale(1.08); } }

.home-final h2 { color: #fff; font-size: clamp(1.9rem, 4.2vw, 2.6rem); }
.hf-head p { color: #fff; opacity: .95; margin: .8rem auto 0; max-width: 46ch; font-size: 1.05rem; }

.hf-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1rem; margin-top: 2.2rem; text-align: left;
}
.hf-card {
  display: flex; flex-direction: column; gap: .18rem;
  background: #fff; border-radius: var(--r); padding: 1.4rem 1.3rem;
  text-decoration: none; color: var(--ink);
  box-shadow: 0 10px 26px -14px rgba(60, 8, 45, .45);
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s;
}
.hf-card:hover, .hf-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -16px rgba(60, 8, 45, .55);
}
.hf-ico {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--grad-soft); color: var(--violet); margin-bottom: .7rem;
}
.hf-ico svg { width: 21px; height: 21px; }
.hf-title { font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.hf-from { font-size: .78rem; color: var(--muted); margin-top: .5rem; }
.hf-price {
  font-family: var(--mono); font-size: 1.5rem; font-weight: 650; letter-spacing: -.03em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hf-price bdi { unicode-bidi: isolate; }
.hf-price .woocommerce-Price-currencySymbol { font-size: .62em; vertical-align: .38em; margin-right: .04em; }
.hf-go { margin-top: .9rem; font-weight: 650; font-size: .9rem; color: var(--violet); }
.hf-card:hover .hf-go { color: var(--magenta); }

@media (prefers-reduced-motion: reduce) {
  .hf-glow { animation: none; }
  .hf-card { transition: none; }
}
.home-fine { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline); font-size: .82rem; color: var(--muted); max-width: 72ch; }

/* ---------------- entrance ---------------- */
html.js .enter { opacity: 0; transform: translateY(16px); animation: tfEnter .8s cubic-bezier(.2,.8,.3,1) forwards; }
html.js .enter.d1 { animation-delay: .05s; }
html.js .enter.d2 { animation-delay: .14s; }
html.js .enter.d3 { animation-delay: .24s; }
html.js .enter.d4 { animation-delay: .34s; }
@keyframes tfEnter { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #tfRocket, .flame, .tw, .cloud, #tfPlanet, .note { animation: none !important; }
  html.js .enter { opacity: 1; transform: none; animation: none; }
}