/* Extracted from template-parts/draft-home-page.php. */
/* ---------------------------- GAMETREE DRAFT ---------------------------- */
.gt-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.orange { color: #ff6b35; }

/* --- Hero photo box: stack below the text instead of floating beside it ---
   style.css: .hero .hero__union .hero__photo_box (same specificity as this
   rule) sets position:absolute; right:10px; top:-141px — depending on
   stylesheet load order that can still win and pin the photo to the right
   edge of .hero__union instead of letting it center, which is what was
   throwing the whole hero visually off-center (the CTA row below it was
   actually already centered on the page). !important forces this to win
   regardless of order. */
.hero .hero__union .hero__photo_box {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  opacity: 1 !important;
  width: 1100px !important;
  max-width: 100%;
  margin: 40px auto 0 !important;
  display: block;
}

.hero__photo_box a { display: block; }
.hero__photo_box .gt-hero-picture { display:block; }
.hero__photo_box .hero__photo {
  width: 1100px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  box-sizing: border-box;
}
.hero__photo_box .gt-hero-picture__image {
  display:block !important;
  width:100%;
  height:auto;
}
@media (max-width: 1280px) { .hero__photo_box { width: 900px; } .hero__photo_box .hero__photo { width: 900px; } }
@media (max-width: 1080px) { .hero__photo_box { width: 750px; } .hero__photo_box .hero__photo { width: 750px; } }
@media (max-width: 990px)  { 
  .hero__photo_box { 
    position: relative; top: auto; right: auto; left: auto;
    width: 100%; max-width: 430px; margin: 0 auto; 
    display: block; z-index: -1;
  } 
  .hero__photo_box .hero__photo { width: 100%; }
}
.hero { position: relative; }
.hero .hero__union { position: relative; }

@media (max-width: 990px) {
  .hero__photo_box.gt-in-view {
    transform: none !important;
  }
}

/* --- Reset the legacy .mob-fix .hero__photo_mobile rotation/overflow
   styling from mobile-fix.css — this page reuses that class name for a
   plain screenshot, not the original homepage's angled photo effect. --- */
@media (max-width: 990px) {
  .hero__photo_mobile.hero__photo_mobile.hero__photo_mobile {
    width: 100% !important;
    max-width: 430px !important;
    height: auto !important;
    margin: 24px auto 0 !important;
    transform: none !important;
    display: block;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 12px;
    box-sizing: border-box;
  }
}

/* --- Glow behind the LFG (Scout Discord) screenshot, matching the
   purple glow already used on the "01/02/03" step cards below it.
   .benefits__photo is already absolutely positioned by the theme, so it
   already establishes a containing block for this ::before — no need
   to (and don't) touch its `position`. */

/* Per request: the scroll-reveal animation on this element kept sliding
   in from an incorrect/leftover offset (a stuck inline transform from
   the reveal script) regardless of scoped overrides. Removing the
   animation entirely instead of continuing to fight it — this element
   is excluded from the reveal system's slide/fade and just displays
   normally at rest. !important beats both the base translateX(-60px)
   rule below and any inline transform/opacity the reveal script sets. */
.benefits__photo,
.benefits__photo.gt-reveal,
.benefits__photo.gt-in-view {
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
}

/* Same class-name collision as .hero__photo_mobile / .btn-up: mobile-fix.css
   has ".benefits .benefits__union .benefits__photo { width: 75%; }" at
   max-width:780px, written for the original homepage's photo — not this
   redesigned card. That leftover width, combined with whatever
   position/right the theme applies, is what's pushing this off-center.
   Reset it to fill its container and center via auto margins.
   Widened to max-width:990px (from 780px) — the theme's base rule
   (position:absolute; right:250px;) was winning unopposed in the
   781–990px gap between this fix and the existing desktop (min-width:
   991px) "right: calc(...)" fix below, confirmed via devtools. */
@media (max-width: 990px) {
  .benefits .benefits__union .benefits__photo {
    width: 100% !important;
    position: relative !important;
    right: auto !important;
    left: auto !important;
    margin: 0 auto !important;
  }
}


.benefits__photo { z-index: 1; }
.benefits__photo::before {
  content: "";
  position: absolute;
  inset: -24px -250px;
  background: radial-gradient(ellipse 50% 100% at 50% 55%, rgba(124,77,255,0.45) 0%, rgba(124,77,255,0.18) 45%, transparent 72%);
  filter: blur(28px);
  z-index: -1;
  border-radius: 28px;
  pointer-events: none;
}

/* The theme forces .benefits__photo img to a fixed 734.784 x 485.453px
   box regardless of the actual uploaded photo's aspect ratio, squishing
   it. Keep the width, let height follow the image's real proportions. */
.benefits .benefits__union .benefits__photo img {
  width: 734.784px !important; height: auto !important;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  box-sizing: border-box;
}
@media (max-width: 990px) {
  .benefits .benefits__union .benefits__photo img { width: 100% !important; height: auto !important; }
}
@media (max-width: 480px) {
  .benefits .benefits__union .benefits__photo img { width: 330px !important; height: auto !important; }
}

/* The real bug behind "too far right": .benefits__photo positions
   absolute relative to .benefits (full page width), not the centered
   .container the cards live in, so "right: 250px" was measured from
   the browser edge and flung the photo past the cards on wide screens.
   Make .container the positioning context and align the photo's right
   edge with the 3rd card's edge via calc(), so it stays aligned as the
   container narrows at smaller breakpoints. */
@media (min-width: 991px) {
  .benefits .container { position: relative; }
  .benefits .benefits__union .benefits__photo { right: calc((100% - 1420px) / 2) !important; }
}

/* --- CTA buttons styled like the Google Play / App Store badges --- */
.gt-cta-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:28px; }
.gt-cta-btn {
  display:inline-flex; align-items:center; gap:10px;
  height:49px !important; padding:0 22px; border-radius:10px;
  box-sizing:border-box;
  font-weight:600; font-size:14.5px; line-height:1; white-space:nowrap;
  text-decoration:none; color:#fff !important;
  border:1.5px solid rgba(255,255,255,0.13);
  transition:transform .15s ease, opacity .15s ease, border-color .15s ease;
}
.gt-cta-btn:visited { color:#fff !important; }
.gt-cta-btn:hover { transform:translateY(-2px); opacity:0.92; }
.gt-cta-btn svg, .gt-cta-btn .gt-discord-icon { flex-shrink:0; }
.gt-cta-btn--discord { background:#5865F2; }
.gt-cta-btn--webapp { background:linear-gradient(135deg,#7c4dff,#9b6dff); }
.gt-cta-btn--outline { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.18); }
@media (max-width:480px){ .gt-cta-btn { flex:1 1 auto; justify-content:center; padding:0 16px; } }

/* --- Store / Web App badges (Available on: Web App, Google Play, App Store) ---
   Give every instance of these badges (hero, features section, installing
   section) the same hover-lift animation as the Discord CTA buttons above,
   and make sure the "Available on" label is actually visible. */
.action__buttons,
.installing__call-to-action { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.action__buttons > span,
.installing__call-to-action > span {
  color:rgba(255,255,255,0.65);
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
}
.action__buttons .block__wraper,
.installing__call-to-action .block__wraper { display:flex; }
.action__buttons .block__wraper > a,
.action__buttons > a.action,
.installing__call-to-action .block__wraper > a,
.installing__call-to-action > a.action,
.webapp-badge-link {
  display:inline-flex;
  transition:transform .15s ease, opacity .15s ease;
}
.action__buttons .block__wraper > a svg,
.action__buttons > a.action svg,
.installing__call-to-action .block__wraper > a svg,
.installing__call-to-action > a.action svg,
.webapp-badge-link svg,
.action__buttons .block__wraper > a .gt-cached-svg,
.action__buttons > a.action .gt-cached-svg,
.installing__call-to-action .block__wraper > a .gt-cached-svg,
.installing__call-to-action > a.action .gt-cached-svg,
.webapp-badge-link .gt-cached-svg {
  display:block;
  width:100%;
  height:100%;
}
/* Hero + Features section: Web App / Google Play / App Store are all natively
   drawn at 161×49, so they already line up — just lock the box to that size. */
.hero__call-to-action .action__buttons .block__wraper > a,
.hero__call-to-action .action__buttons > a.action,
.gt-features-section .action__buttons .block__wraper > a,
.gt-features-section .action__buttons > a.action {
  width:161px; height:49px;
}
/* Installing section: Google Play / App Store are natively drawn at 201×49.
   Now that the Web App badge's viewBox has been corrected to match its own
   161-wide artwork (it was mistakenly declared as 201×49 with ~40 units of
   empty canvas), locking all three to 201×49 scales it up cleanly instead
   of leaving that empty gap. */
.installing__call-to-action .block__wraper > a,
.installing__call-to-action > a.action {
  width:201px !important; height:49px !important;
}
.installing__call-to-action .block__wraper > a svg,
.installing__call-to-action > a.action svg,
.installing__call-to-action .block__wraper > a .gt-cached-svg,
.installing__call-to-action > a.action .gt-cached-svg {
  width:100% !important; height:100% !important;
}
.action__buttons .block__wraper > a:hover,
.action__buttons > a.action:hover,
.installing__call-to-action .block__wraper > a:hover,
.installing__call-to-action > a.action:hover,
.webapp-badge-link:hover {
  transform:translateY(-2px);
  opacity:0.92;
}

/* Shrink both button rows on small screens — 161px/201px wide badges
   don't leave much breathing room on a phone width. */
@media (max-width: 480px) {
  .hero__call-to-action .action__buttons .block__wraper > a,
  .hero__call-to-action .action__buttons > a.action,
  .gt-features-section .action__buttons .block__wraper > a,
  .gt-features-section .action__buttons > a.action {
    width: 130px; height: 40px;
  }
  .installing__call-to-action .block__wraper > a,
  .installing__call-to-action > a.action {
    width: 150px !important; height: 40px !important;
  }
}

/* Mobile-only duplicate Google Play / App Store badges (installing__call-to-action_mobile
   and hero__call-to-action_mobile): were hardcoded to 142×60, taller than every
   other badge on the page (49px). Resized their width/height attributes to
   116×49 (same aspect ratio) up above; this just guards that against any
   theme override. */
.mob-store-btn__google svg,
.mob-store-btn__app svg,
.mob-store-btn__google .gt-cached-svg,
.mob-store-btn__app .gt-cached-svg { width:116px !important; height:49px !important; display:block; }
@media (max-width: 480px) {
  .mob-store-btn__google svg,
  .mob-store-btn__app svg,
  .mob-store-btn__google .gt-cached-svg,
  .mob-store-btn__app .gt-cached-svg { width:100px !important; height:42px !important; }
}

/* --- "Use Scout in Discord:" label above the Discord CTA buttons --- */
.gt-cta-label {
  display:block;
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,0.65);
  margin-bottom:6px;
}

/* --- Hero only: put "Add Scout to Server / Join GameTree Server" and the
   "Available on" badges on one shared row (Discord left, badges right),
   matching the design reference. Stacks and centers on small screens. --- */
.hero .hero__call-to-action {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end !important; /* style.css: .hero .hero__call-to-action sets align-items:center */
  justify-content:space-between;
  gap:16px 28px;
}
.hero .hero__call-to-action .gt-cta-row { margin-bottom:0; }
.hero .hero__call-to-action .action__buttons {
  margin:0;
  row-gap:6px;
  column-gap:14px;
}
.hero .hero__call-to-action .action__buttons > span {
  /* style.css: .hero .hero__call-to-action .action__buttons span sets
     position:absolute; top:-31px; left:0; which pulls this label out of
     the flex flow entirely, so it can't add height above the badges the
     way the Discord label does — that's the actual source of the
     mismatched box heights. */
  position:static !important;
  top:auto !important;
  left:auto !important;
  flex-basis:100%;
  margin-bottom:0;
}
.hero .hero__call-to-action .action__buttons a {
  /* style.css: .hero .hero__call-to-action .action__buttons a sets
     margin-right:10px and width:171px, fighting our gap + 161px sizing */
  margin-right:0 !important;
  max-width:161px !important;
  width:161px !important;
  height:49px !important;
}
@media (max-width:900px) {
  .hero .hero__call-to-action { justify-content:center; }
  .hero .hero__call-to-action .gt-cta-block,
  .hero .hero__call-to-action .gt-cta-row,
  .hero .hero__call-to-action .action__buttons { justify-content:center; width:100%; }
}

/* --- Scout video section: push the whole "Use Scout in Discord:" + buttons
   group further down, away from the game-logo marquee above it. The gap
   lives above the label (not above the row), so the label stays snug
   against its own buttons. --- */
.scout-video-section .gt-cta-label { margin-top:40px; }
.scout-video-section .gt-cta-row { margin-top:0; }

/* --- Features section ("Gaming Friends Done Right"): push the Available-on
   badges further down, away from the feature tab cards above --- */
.gt-features-section .action__buttons { margin-top:48px; }

/* --- Video Section --- */
.scout-video-section { padding: 60px 0; text-align: center; }
/* style.css: the generic ".container" rule is a fixed width:1300px, which is
   wider than the ".gt-container" (max-width:1180px) it's nested in here.
   A fixed-width box wider than its containing block can't be centered by
   margin:auto (auto margins collapse to 0 in that case), so everything was
   getting shoved flush to the left and overflowing off the right edge
   instead of sitting in the middle of the page. Scope it back down so it
   centers inside its actual parent. */
.scout-video-section .gt-container .container { width:100%; max-width:100%; margin:0 auto; }
.scout-video-section h2 { font-family:"Khand",sans-serif; font-size: clamp(60px,10vw,140px); font-weight: 700; text-transform: uppercase; color:#fff; margin-bottom:10px; line-height:1; letter-spacing:-1.4px; }
.scout-video-section p { color: rgba(255,255,255,0.75); font-size: clamp(18px,2.5vw,32px); font-weight:500; margin-bottom:32px; line-height:1.4; }
.video-wrapper { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; max-width:1080px; margin:0 auto; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,0.6); }
.video-wrapper iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; border-radius:16px; }
.gt-youtube-facade__trigger { position:absolute; inset:0; display:block; overflow:hidden; border-radius:16px; background:#080b12; }
.gt-youtube-facade__poster { display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s ease, filter .3s ease; }
.gt-youtube-facade__trigger::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0.04),rgba(0,0,0,0.22)); transition:background .2s ease; }
.gt-youtube-facade__play { position:absolute; z-index:1; top:50%; left:50%; display:grid; width:82px; height:58px; place-items:center; border-radius:16px; background:#ff0033; box-shadow:0 12px 35px rgba(0,0,0,.45); transform:translate(-50%,-50%); transition:transform .2s ease, background .2s ease; }
.gt-youtube-facade__play-icon { width:0; height:0; margin-left:5px; border-top:12px solid transparent; border-bottom:12px solid transparent; border-left:20px solid #fff; }
.gt-youtube-facade__trigger:hover .gt-youtube-facade__poster { transform:scale(1.015); filter:brightness(1.05); }
.gt-youtube-facade__trigger:hover .gt-youtube-facade__play { background:#e6002e; transform:translate(-50%,-50%) scale(1.05); }
.gt-youtube-facade__trigger:focus-visible { outline:4px solid #fff; outline-offset:-6px; }
.gt-youtube-facade__trigger:focus-visible .gt-youtube-facade__play { box-shadow:0 0 0 5px #5797d1,0 12px 35px rgba(0,0,0,.45); }

@media (max-width:600px) {
  .gt-youtube-facade__play { width:68px; height:48px; border-radius:13px; }
  .gt-youtube-facade__play-icon { border-top-width:10px; border-bottom-width:10px; border-left-width:17px; }
}

@media (prefers-reduced-motion:reduce) {
  .gt-youtube-facade__poster,
  .gt-youtube-facade__play { transition:none; }
}

/* --- Logo marquee under the video (matches the home page "find" section look) --- */
.scout-video-section .marquee-container-top {
  overflow:hidden; margin-top:40px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.scout-video-section .marquee-content-top { display:flex; width:max-content; animation: gt-marquee 45s linear infinite; }
.scout-video-section .marquee-container-top:hover .marquee-content-top { animation-play-state:paused; }
.scout-video-section .find__logos { display:flex; align-items:center; flex-shrink:0; gap:26px; padding-right:46px; }
.scout-video-section .logos__block a { display:block; }
.scout-video-section .logos__block img { height:84px; width:auto; opacity:0.55; filter:grayscale(100%) brightness(1.4); transition:opacity .2s, filter .2s; }
.scout-video-section .logos__block:hover img { opacity:1; filter:grayscale(0%) brightness(1); }
@keyframes gt-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* --- Marquee seam fix ---
   Within one set of logos, items are spaced with .find__logos's own
   gap:26px. But the gap where the first copy hands off to the
   duplicate copy (the loop's "seam") is set by that same element's
   padding-right:46px, so the seam ends up nearly twice as wide as
   every other gap in the strip and reads as a jump when it scrolls
   past. Match it to the same 26px used everywhere else. */
.scout-video-section .find__logos { padding-right: 26px; }

/* --- Marquee hover squish fix ---
   .marquee-container-top clips vertically (overflow:hidden, needed so
   the looping duplicate copy stays hidden off-screen), so its height
   is exactly the resting size of the logos. When a logo scales up
   1.12x on hover its top/bottom edges grow past that boundary and get
   cropped flush against the container, which reads as "squished"
   rather than popping up. Add vertical breathing room so the
   scaled-up logo has somewhere to grow into. */
.scout-video-section .marquee-container-top { padding-top: 10px; padding-bottom: 10px; }

/* --- Plink-style Features Section --- */
.gt-features-section { padding: 80px 0;}
.gt-features-head { text-align:center; margin-bottom:48px; }
.gt-features-head h2 { font-family:"Khand",sans-serif; font-size:clamp(60px,10vw,140px); font-weight:700; text-transform:uppercase; color:#fff; margin-bottom:10px; line-height:1; letter-spacing:-1.4px; }
.gt-features-head p { color:rgba(255,255,255,0.75); font-size:clamp(18px,2.5vw,32px); font-weight:500; max-width:700px; margin:0 auto; line-height:1.4; }
/* The .benefits__prompt badge is a full-width flex row in its original
   (left-aligned) context. Reused here inside a centered head, it was
   stretching edge-to-edge and leaving a big blank strip above the
   heading. Force it to hug its content and sit centered instead. */
.gt-features-head .benefits__prompt { display:inline-flex !important; width:auto !important; align-items:center; margin:0 auto 18px !important; padding-right:15px; }

/* --- Web App image badge — styled as a pill to match the Google Play / App Store buttons --- */
.webapp-badge-link {
  display:inline-flex; align-items:center; justify-content:center;
  height:49px; width:161px;
  transition:transform .15s ease, opacity .15s ease;
}
.webapp-badge-link:hover { opacity:0.92; }
.webapp-badge-link svg,
.webapp-badge-link .gt-cached-svg { display:block; height:100%; width:100%; }
.gt-section-eyebrow { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#ff6b35; margin-bottom:14px; }
.gt-section-eyebrow::before { content:'•'; font-size:16px; }

.gt-features-layout { display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:stretch; }
@media(max-width:900px){ .gt-features-layout { grid-template-columns:1fr; } .gt-feature-preview { display:none; } }

/* --- Feature tabs (left column) —
   Sized up (padding, icon, type) from the original so the tab list's natural
   height is in the right ballpark for the preview panel below, now that the
   panel keeps its own true phone-screenshot proportions instead of being
   stretched to match whatever height this column happened to be. */
.gt-feature-tabs { display:flex; flex-direction:column; gap:12px; }
.gt-feature-tab {
  background:#1a1a2e; border:1.5px solid rgba(124,77,255,0.18); border-radius:14px;
  padding:16px 20px; cursor:pointer; transition:all 0.2s; text-align:left;
  display:flex; gap:16px; align-items:center; width:100%;
}
.gt-feature-tab:hover { border-color:rgba(124,77,255,0.45); background:#1f1f38; }
.gt-feature-tab.active { border-color:#7c4dff; background:linear-gradient(135deg,rgba(124,77,255,0.18),rgba(124,77,255,0.05)); }
.gt-tab-icon {
  font-size:24px; flex-shrink:0;
  width:72px; height:72px;
  display:flex; align-items:center; justify-content:flex-start;
}
.gt-tab-icon img { width:72px; height:72px; object-fit:contain; display:block; }
.gt-tab-title { font-size:18px; font-weight:700; color:#fff; margin-bottom:7px; }
.gt-feature-tab.active .gt-tab-title { color:#9b6dff; }
.gt-tab-desc { font-size:15px; color:rgba(255,255,255,0.55); line-height:1.65; }

/* --- Feature preview panel image —
   The panel now uses a real phone-screenshot aspect ratio (matching the
   actual uploaded app screenshots, ~1178x2440) instead of height:100%. The
   old height:100% stretched the box to match the tab list's arbitrary
   height, which is a different shape than an actual phone screen — so
   object-fit:cover had to crop a portrait screenshot into a squatter,
   more-horizontal-than-vertical frame. `align-self:start` stops the grid
   from re-stretching it back to the tab column's height; the tab column
   above has been sized up so the two sides land in the same rough
   ballpark, but they're no longer forced to match exactly. */
.gt-feature-preview { position:sticky; top:100px; align-self:start; }
.gt-feature-preview-inner {
  background:#13131f; border:1px solid rgba(124,77,255,0.18); border-radius:20px;
  overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.5);
  width:100%; max-width:460px; margin:0 auto; position:relative;
  aspect-ratio: 1178 / 2440;
}
.gt-feature-panel { position:absolute; inset:0; opacity:0; transition:opacity 0.35s ease; }
.gt-feature-panel.active { opacity:1; }
.gt-feature-panel img {
  width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:top;
  display:block;
}

/* --- Extra padding for Installing & Questions sections --- */
.installing { padding: 100px 0; margin-top: 0; }
.questions { padding: 100px 0; }
@media (max-width: 900px) { .installing { padding: 70px 0; } .questions { padding: 70px 0; } }
@media (max-width: 600px) { .installing { padding: 50px 0; } .questions { padding: 50px 0; } }

/* Reviews grid */
.reviews__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  align-items: start; /* don't force-stretch cards to match the tallest one */
}
@media (max-width: 1100px) { .reviews__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .reviews__grid { grid-template-columns: 1fr; } }
.review { height: auto !important; max-height: none !important; overflow: visible; }
.reviews__grid { margin-bottom: 24px; }
/* ------------------------ ARTISTIC ANIMATION SYSTEM ------------------------ */

/* --- Scroll reveal ----------------------------------------------------
   Content is visible by default. JavaScript adds .gt-reveal-pending only
   after a working IntersectionObserver has been created, then .gt-in-view
   as the element enters the viewport. This preserves the motion without
   making content availability depend on animation code. */
.gt-reveal {
  opacity: 1;
  transform: none;
}
.gt-reveal.gt-reveal-pending {
  opacity: 0 !important;
  transform: translateY(24px) !important;
  transition:
    opacity 0.65s cubic-bezier(.16,1,.3,1),
    transform 0.65s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform !important;
}
.gt-reveal.gt-reveal-pending.gt-in-view {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.gt-reveal.gt-reveal-complete { will-change: auto; }
/* Staggered children (cards, faq items, feature tabs) fan in one after another */
.gt-reveal-stack > .gt-reveal:nth-child(1) { transition-delay: 0s; }
.gt-reveal-stack > .gt-reveal:nth-child(2) { transition-delay: .08s; }
.gt-reveal-stack > .gt-reveal:nth-child(3) { transition-delay: .16s; }
.gt-reveal-stack > .gt-reveal:nth-child(4) { transition-delay: .24s; }
.gt-reveal-stack > .gt-reveal:nth-child(5) { transition-delay: .32s; }
.gt-reveal-stack > .gt-reveal:nth-child(6) { transition-delay: .4s; }

/* --- Ambient glow orbs: soft, slow-breathing color blobs pinned to the
   viewport (like .gt-global-spotlight) so they drift behind whatever
   content is on screen at any scroll position, instead of being
   confined to the hero section's box. z-index: -1 keeps them behind
   normal page content, same layer as the body's own background glow. --- */
.gt-glow-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: -1;
  opacity: 0.35;
  animation: gt-glow-pulse 10s ease-in-out infinite;
}
.gt-glow-orb--1 { width: 480px; height: 480px; top: -160px; left: -120px; background: radial-gradient(circle, #7c4dff 0%, transparent 70%); }
.gt-glow-orb--2 { width: 420px; height: 420px; top: 60px; right: -140px; background: radial-gradient(circle, #ff6b35 0%, transparent 70%); animation-delay: 3s; }
.gt-glow-orb--3 { width: 360px; height: 360px; bottom: -180px; left: 30%; background: radial-gradient(circle, #5865F2 0%, transparent 70%); animation-delay: 6s; }
@keyframes gt-glow-pulse {
  0%, 100% { transform: scale(1) translateY(0); opacity: 0.28; }
  50% { transform: scale(1.15) translateY(-20px); opacity: 0.42; }
}

/* --- Prompts-behind-header fix ---
   style.css sets .hero { margin-top: 78px } to clear the header, but the
   header actually renders at 90px tall, so the top of .hero__box (including
   the .prompts badges) pokes up underneath it. Match the offset to the
   header's real height instead of guessing. */
.hero { margin-top: 90px; }
@media (max-width: 780px) {
  /* Mobile header is a single row (hamburger + logo), shorter than the
     90px desktop header the value above was sized for. Adjust this to
     match your actual mobile header height if it differs. */
  .hero { margin-top: 60px; }
}

/* --- Floating hint bubbles above the hero title ---
   style.css bakes opacity:0 onto .prompt_1 and .prompt_2 (only), expecting
   some other animation library to fade them in via inline style once
   triggered. That trigger isn't firing reliably, which is what read as
   these badges "animating in from behind the header" — they were sitting
   invisible and then popping in later rather than being visible from the
   start like .prompt_3 already is. Force them visible so our own gt-float
   idle animation is the only thing moving them. */
.hero .hero__union .hero__box .prompts .prompt_1,
.hero .hero__union .hero__box .prompts .prompt_2 {
  opacity: 1 !important;
}
.prompt { animation: gt-float 4.5s ease-in-out infinite; }
.prompt_1 { animation-delay: 0s; }
.prompt_2 { animation-delay: .6s; }
.prompt_3 { animation-delay: 1.2s; }
@keyframes gt-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* --- Button shine sweep on hover, layered on top of the existing lift --- */
.gt-cta-btn, .action__buttons .block__wraper > a, .action__buttons > a.action {
  position: relative;
  overflow: hidden;
}
.gt-cta-btn::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.gt-cta-btn:hover::after { left: 130%; }

/* --- Card hover lift + glow: benefit cards, reviews, feature tabs --- */
.benefits__cart, .review, .gt-feature-tab {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.benefits__cart:hover, .review:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(124,77,255,0.18);
}
.gt-feature-tab:hover { transform: translateX(4px); }

/* --- Fix: the 3rd (rightmost) step card's hover glow was getting cut
   off. The card sits inside .benefits__carts / .benefits__union /
   .container, and if any of those clip overflow the box-shadow — which
   extends past the card's own box — gets sliced off at that ancestor's
   edge. Force the whole chain to allow the glow to render past the
   card's bounds, and lift the hovered card above its siblings so its
   glow isn't drawn underneath the next card. */
.benefits, .benefits .container, .benefits__union,
.benefits__carts, .benefits__cart {
  overflow: visible;
}
.benefits__cart { position: relative; z-index: 1; }
.benefits__cart:hover { z-index: 2; }

/* --- FAQ items: gentle expand-in already exists via .item__content;
   just add a soft hover cue on the question row --- */
.faqs__lists .item__btn { transition: color .2s ease; }
.faqs__lists .item:hover .item__btn { color: #fff; }

/* --- Subtle shimmer on the orange "mark" text --- */
.hero__title_mark .mark {
  background: linear-gradient(90deg, #ff6b35, #ffb85e, #ff6b35);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-shimmer-sweep 5s linear infinite;
}
@keyframes gt-shimmer-sweep {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

@media (prefers-reduced-motion: reduce) {
  .gt-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .gt-glow-orb, .prompt, .hero__title_mark .mark { animation: none !important; }
  .gt-cta-btn::after { display: none !important; }
  .benefits__cart, .review, .gt-feature-tab { transition: none !important; }
}

/* -------------------- ARTISTIC ANIMATION SYSTEM — PART 2 -------------------- */

/* --- Scroll progress bar: thin gradient line pinned to the very top,
   filled by JS via a CSS custom property as the page is scrolled --- */
#gt-scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  z-index: 9999; pointer-events: none;
  background: linear-gradient(90deg, #7c4dff, #ff6b35, #5865F2);
  background-size: 300% 100%;
  transform: scaleX(var(--gt-scroll, 0));
  transform-origin: left center;
  animation: gt-progress-hue 8s linear infinite;
}
@keyframes gt-progress-hue {
  0% { background-position: 0% 0; }
  100% { background-position: 300% 0; }
}

/* --- Cursor spotlight: a soft radial highlight that follows the pointer
   everywhere on the page, giving scrolling depth without moving any content.
   Previously wired up per-section, so the glow visibly cut out in the gaps
   between sections. One overlay pinned to the viewport and tracked at the
   document level removes that seam entirely. --- */
.gt-global-spotlight {
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(600px circle at var(--gt-x, 50%) var(--gt-y, 30%),
    rgba(124,77,255,0.14), transparent 55%);
  opacity: 0; transition: opacity .5s ease;
}
.gt-global-spotlight.gt-active { opacity: 1; }

/* --- Magnetic tilt on the hero screenshot: subtle 3D rotation that
   follows the cursor, spring-back to flat on mouse leave --- */
.hero__photo_box { transition: transform .5s cubic-bezier(.16,.8,.3,1); transform-style: preserve-3d; }
.hero__photo_box .hero__photo { transition: box-shadow .4s ease; }
.hero__photo_box.gt-tilting { transition: transform .08s linear; will-change: transform; }
.hero__photo_box:hover .hero__photo { box-shadow: 0 30px 70px rgba(124,77,255,0.35); }

/* --- Glow orbs: add slow horizontal drift on top of the existing pulse,
   nudged further by scroll position via a JS-set CSS variable --- */
.gt-glow-orb { transform: translate(var(--gt-parallax, 0px), 0); }
.gt-glow-orb--1 { animation: gt-glow-pulse 10s ease-in-out infinite, gt-drift-1 16s ease-in-out infinite; }
.gt-glow-orb--2 { animation: gt-glow-pulse 10s ease-in-out infinite 3s, gt-drift-2 19s ease-in-out infinite; }
.gt-glow-orb--3 { animation: gt-glow-pulse 10s ease-in-out infinite 6s, gt-drift-3 22s ease-in-out infinite; }
@keyframes gt-drift-1 { 0%,100% { margin-left: 0; } 50% { margin-left: 40px; } }
@keyframes gt-drift-2 { 0%,100% { margin-left: 0; } 50% { margin-left: -50px; } }
@keyframes gt-drift-3 { 0%,100% { margin-left: 0; } 50% { margin-left: 30px; } }

/* --- FAQ accordion: rotate the +/- swap instead of a hard cut, and
   give the row a soft left-edge accent when open --- */
.faqs__lists .item__btn .icon { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.faqs__lists .item.active .item__btn .icon { transform: rotate(180deg); }
.faqs__lists .item { border-left: 2px solid transparent; transition: border-color .3s ease, background .3s ease; }
.faqs__lists .item.active { border-left-color: #7c4dff; }

/* --- Feature preview panel: cross-fade with a touch of scale + blur
   instead of a flat opacity cut, so switching tabs feels less abrupt --- */
.gt-feature-panel {
  transition: opacity .45s ease, transform .45s ease, filter .45s ease;
  transform: scale(0.97);
  filter: blur(4px);
}
.gt-feature-panel.active { transform: scale(1); filter: blur(0); }

/* --------------------- CONTENT VISIBILITY SAFEGUARD ---------------------
   The production stylesheet contains opacity:0 starting states for the old
   GSAP timelines. The optimized homepage deliberately does not load GSAP, so
   critical navigation and page content must never depend on those timelines
   to become readable. Keep decorative/inactive states (dropdowns, inactive
   feature panels and hover icons) untouched. */
.gt-reveal,
.gt-reveal.gt-in-view,
.home > footer,
.home > footer .footer__description,
.home > footer .footer__logo_mobile,
.home header .header__union .header__menu,
.home header .header__union .header__logo,
.home header .header__union .header__navigation,
.home header .header__union .header__box,
.header__sticky .header__logo,
.header__sticky .header__logo_mobile,
.header__sticky .header__menu,
.header__sticky .header__navigation,
.header__sticky .header__box,
.benefits__prompt,
.benefits__title,
.benefits__photo,
.benefits__cart,
.gt-features-head,
.gt-feature-tab,
.gt-feature-preview,
.reviews__title,
.review,
.questions__title,
.questions__information,
.faqs__lists .item,
footer .footer__block,
footer .footer__box {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  will-change: auto !important;
}

/* Keep the mobile logo visible without resetting the translateX(-50%) that
   centres its absolutely positioned wrapper. */
.home header .header__union .header__logo_mobile {
  opacity: 1 !important;
  visibility: visible !important;
  will-change: auto !important;
}

/* The mobile logo is absolutely centred with a horizontal translation.
   Preserve that translation after the legacy visibility safeguards above. */
@media (max-width: 780px) {
  .container.container-head {
    width: calc(100% - 30px);
    max-width: none;
    margin-right: 15px;
    margin-left: 15px;
  }

  .container-head .header__union {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .header__sticky .header__logo_mobile {
    transform: translateX(-50%) !important;
  }
}

/* --- Logo marquee: pop each logo slightly on hover in addition to the
   existing opacity/grayscale fade, so the strip feels more alive --- */
.scout-video-section .logos__block { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.scout-video-section .logos__block:hover { transform: scale(1.12); }

@media (prefers-reduced-motion: reduce) {
  #gt-scroll-progress { animation: none !important; }
  .gt-global-spotlight { display: none !important; }
  .header__logo, .header__logo_mobile, .header__navigation, .header__box {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
  }
  .hero__photo_box { transition: none !important; transform: none !important; }
  .gt-glow-orb { animation: none !important; }
  .faqs__lists .item__btn .icon,
  .gt-feature-panel,
  .scout-video-section .logos__block { transition: none !important; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 780px) {
  .header__logo_mobile { transform: translateX(-50%) !important; }
}