/* ============================================================
   GO TOP — Hero Implementation v3
   Header verbatim from homepage-v11-polish-v2.
   New hero: H1 wordmark+main, video LEFT (blended, no card).
   Mobile drawer aligned with polish-v2 visual language.
   ============================================================ */

:root {
  /* Per brief: deep navy palette, not flat black */
  --ink:           #070A12;
  --ink-2:         #0B1220;
  --ink-3:         #101827;
  --ink-deep:      #04060E;
  --ink-soft:      #0B1226;
  --ink-elev:      #1A2440;

  --on-dark:       #F1F3F8;
  --on-dark-muted: #A9B1C8;
  --muted:         #8B8FA5;

  --cyan:          #5EEAFF;
  --ice:           #5EEAFF;
  --ice-bright:    #A8F2FF;

  /* FLAT hero bg — single color, no layers, no gradient, no glow */
  --gtp-hero-flat-bg: #07111F;
  /* Navy text token for use on light backgrounds — derived from existing palette,
     reads as navy-blue (not black). Fallback first, color-mix override after. */
  --gtp-navy-text-on-light: #132F3E;
  --gtp-navy-text-on-light: color-mix(in srgb, var(--gtp-hero-flat-bg) 86%, var(--cyan) 14%);
  /* Back-compat aliases used elsewhere in the file (all resolve to the flat color) */
  --gtp-hero-bg-top:    var(--gtp-hero-flat-bg);
  --gtp-hero-bg-mid:    var(--gtp-hero-flat-bg);
  --gtp-hero-bg-bottom: var(--gtp-hero-flat-bg);
  --gtp-hero-bg:        var(--gtp-hero-flat-bg);
  --ice-hover:     #36D8F2;
  --ice-glow:      rgba(94, 234, 255, 0.30);
  --ice-soft:      rgba(94, 234, 255, 0.10);

  --violet:        #7C5CFF;

  --border-dark:   rgba(255,255,255,0.06);
  --border-glass:  rgba(94, 234, 255, 0.30);

  --container:     1320px;
  --radius-sm:     8px;
  --radius:        12px;
  --radius-lg:     18px;
  --radius-xl:     22px;

  --font-head:  "Rubik", "Heebo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:  "Heebo", "Rubik", system-ui, -apple-system, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--gtp-hero-flat-bg);
  color: var(--on-dark);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
  /* BINARY DIAGNOSTIC TEST 2026-07-30 — body overflow-x TEMPORARILY REMOVED
     to isolate whether it (rather than backdrop-filter) is the iOS sticky
     killer. Expected side effect: ~7px horizontal scroll on all pages until
     the underlying overflow source is found. Restore afterward. */
  /* overflow-x: hidden; */    /* fallback: older Safari <16 */
  /* overflow-x: clip; */      /* modern */
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.skip-link {
  position: absolute; inset-inline-start: -9999px;
  background: var(--ice); color: var(--ink); padding: 10px 14px; border-radius: 8px;
}
.skip-link:focus { inset-inline-start: 16px; top: 16px; z-index: 999; }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 6px; }

/* ============================================================
   HEADER — verbatim from polish-v2
   ============================================================ */
.site-header {
  /* Duplicated block — see gotop-header.css:.site-header for canonical rule.
     backdrop-filter removed 2026-07-30 (iOS sticky bug). Do NOT re-add here. */
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 17, 31, 0.98) !important;
  border-bottom: 1px solid var(--border-dark);
}
/* Header: no dust dots (per spec — bg gradient only) */
.site-header::before,
.site-header::after { content: none !important; display: none !important; }
.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px 40px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}

/* === Brand block (icon-only PNG + HTML wordmark) === */
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-icon {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand-icon-img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}
.brand-text {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
  direction: ltr;
  text-align: start;
}
.brand-word {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  line-height: 1;
}
.brand-tag {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.30em;
  color: var(--ice);
  margin-top: 4px;
  text-transform: uppercase;
}

/* === Primary nav === */
.primary-nav { display: flex; justify-content: center; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  font-family: var(--font-head);
  font-weight: 500; font-size: 15.5px;
  color: var(--on-dark);
  border-radius: 8px;
  transition: background .2s, color .2s;
  position: relative;
}
.nav-link.is-active { color: var(--ice); }
.nav-link.is-active::after {
  content: ""; position: absolute; bottom: 4px; left: 14px; right: 14px;
  height: 1px; background: linear-gradient(90deg, transparent, var(--ice), transparent);
}
.nav-link:hover { background: rgba(255,255,255,0.05); color: var(--ice); }
.chev { transition: transform .25s; opacity: .6; }
.nav-item.has-mega:hover .chev,
.nav-item.has-mega:focus-within .chev { transform: rotate(180deg); }

.nav-item.has-mega { position: static; }
.mega {
  position: absolute; inset-inline: 0; top: 100%;
  background:
    radial-gradient(800px 280px at 30% 0%, rgba(94,234,255,0.06), transparent 70%),
    rgba(7,10,18,0.96);
  backdrop-filter: saturate(180%) blur(24px);
  border-top: 1px solid rgba(94,234,255,0.10);
  border-bottom: 1px solid rgba(94,234,255,0.10);
  box-shadow: 0 30px 80px -28px rgba(0,0,0,0.7);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .22s, transform .22s, visibility .22s;
  z-index: 60;
}
.nav-item.has-mega:hover .mega,
.nav-item.has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-inner {
  max-width: var(--container); margin: 0 auto;
  padding: 40px 40px 44px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.1fr;
  gap: 48px;
}
.mega-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ice); margin-bottom: 16px;
}
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-col a {
  display: block; padding: 10px 0;
  font-family: var(--font-head); font-weight: 500; font-size: 15.5px;
  color: var(--on-dark);
  transition: color .18s, transform .18s;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.mega-col a:hover { color: var(--ice); transform: translateX(-3px); }
.mega-col a.lead-link {
  color: var(--ice);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.01em;
  text-shadow: 0 0 16px rgba(94, 234, 255, 0.25);
}
.mega-col a.lead-link:hover { color: #A8F2FF; }
.soon {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 0;
  font-family: var(--font-head); font-weight: 500; font-size: 15.5px;
  color: var(--on-dark-muted);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.soon em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--ice-soft); color: var(--ice);
  padding: 3px 9px; border-radius: 999px;
}
.mega-aside {
  background: linear-gradient(160deg, #0E1525 0%, #1A2440 100%);
  color: var(--on-dark);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
}
.mega-aside::before {
  content: ""; position: absolute; inset: -40% -20% auto auto;
  width: 280px; height: 280px;
  background: radial-gradient(closest-side, var(--ice-glow), transparent 70%);
  filter: blur(4px); pointer-events: none;
}
.mega-aside-kicker {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ice); margin-bottom: 12px; position: relative;
}
.mega-aside p {
  font-family: var(--font-head); font-weight: 500;
  font-size: 17px; line-height: 1.5; margin: 0 0 18px;
  color: #fff; position: relative;
}
.mega-aside-cta {
  font-family: var(--font-head); font-weight: 600; font-size: 14px;
  color: var(--ice);
  align-self: flex-start;
  border-bottom: 1px solid rgba(94,234,255,0.4);
  padding-bottom: 2px;
  transition: color .18s, border-color .18s;
  position: relative;
}
.mega-aside-cta:hover { color: #fff; border-color: #fff; }

.header-cta { display: flex; justify-content: end; }
/* Enlarged phone icon inside the CTA */
.header-cta svg,
.header-cta .phone-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.btn-header svg { opacity: 0.9; }

/* === Mobile quick-action icons (phone + WhatsApp) — hidden on desktop === */
.mobile-actions { display: none; }
.mobile-actions .icon-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--on-dark);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  transition: color .18s, border-color .18s, background .18s, transform .18s;
}
.mobile-actions .icon-btn:hover,
.mobile-actions .icon-btn:focus-visible {
  color: var(--ice);
  border-color: var(--ice);
  background: rgba(94, 234, 255, 0.08);
}

.btn-header .phone-num {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 15px;
}

/* ============================================================
   BUTTONS (verbatim from polish-v2)
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  font-family: var(--font-head); font-weight: 600; font-size: 15px;
  padding: 12px 22px; border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s, background .2s, color .2s, box-shadow .25s, border-color .2s;
  white-space: nowrap;
}
.btn-header {
  background: linear-gradient(180deg, #16E3FF 0%, #36D8F2 100%);
  color: var(--ink);
  box-shadow: 0 10px 28px -12px rgba(94,234,255,0.55);
}
.btn-header:hover { transform: translateY(-1px); box-shadow: 0 14px 32px -10px rgba(94,234,255,0.7); }
.btn-header svg { transform: scaleX(-1); opacity: 0.7; }
.btn-ice {
  background: linear-gradient(180deg, #6DEEFF 0%, #36D8F2 100%);
  color: var(--ink);
  font-size: 16px; padding: 18px 32px;
  box-shadow:
    0 18px 50px -16px var(--ice-glow),
    0 0 0 1px rgba(7,10,18,0.06) inset,
    0 1px 0 0 rgba(255,255,255,0.6) inset;
}
.btn-ice:hover { transform: translateY(-1px); }
.btn-ghost {
  background: rgba(255,255,255,0.03);
  color: var(--on-dark);
  font-size: 16px; padding: 18px 28px;
  border-color: rgba(255,255,255,0.18);
  /* backdrop-filter removed — it sampled the dark blend zone behind the hero copy
     and produced an uneven half-overlay strip when hovered. */
}
.btn-ghost:hover {
  background: rgba(94,234,255,0.08);
  border-color: rgba(94,234,255,0.45);
  color: #ffffff;
}
.btn-ghost::before,
.btn-ghost::after { display: none; }

/* ============================================================
   HERO — physical LTR grid (video LEFT, copy RIGHT, deterministic)
   ============================================================ */
.hero {
  position: relative;
  color: var(--on-dark);
  overflow: hidden;
  padding: clamp(56px, 7vw, 96px) 40px clamp(72px, 9vw, 120px);
  background: var(--gtp-hero-flat-bg) !important;
  background-image: none !important;
}
/* FLAT hero — no dust dots, no glow, no overlay layers */
.hero::before,
.hero::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}
.hero-bg,
.hero-vignette {
  display: none !important;
  background: none !important;
  background-image: none !important;
}
.hero-visual,
.gotop-hero-video-wrap,
.gotop-hero-video {
  background: var(--gtp-hero-flat-bg) !important;
}
/* Wave at top of section 2 matches the same flat navy */
.gtp-platform-stack__wave path { fill: var(--gtp-hero-flat-bg) !important; }

/* Video edge feather — disabled (was creating visible blended layer) */
.gotop-hero-video-wrap { position: relative; isolation: isolate; }
.gotop-hero-video-wrap::after {
  display: none !important;
  content: none !important;
}

/* Kill any prior video-blend layers (radial halos, blur zones, cyan glows).
   NOTE: .gotop-hero-video-wrap::after is now used for edge feather (line ~381),
   so it is intentionally excluded from this kill-list. */
.hero-visual::before,
.hero-visual::after,
.gotop-hero-video-wrap::before {
  display: none !important;
  content: none !important;
}

/* Physical LTR grid so columns never flip unexpectedly */
.hero-inner {
  position: relative;
  z-index: 3;
  max-width: var(--container);
  margin: 0 auto;
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(44px, 6vw, 96px);
  background: transparent !important;
}

.hero-visual {
  grid-column: 1;          /* physically LEFT */
  direction: ltr;
  justify-self: stretch;
  background: transparent !important;
}
.hero-copy {
  grid-column: 2;          /* physically RIGHT */
  direction: rtl;          /* flip back for Hebrew text flow */
  text-align: right;
  justify-self: end;
  max-width: 620px;
  background: transparent !important;
}

.hero-copy {
  grid-column: 2;          /* physically RIGHT */
  direction: rtl;          /* flip back for Hebrew text flow */
  text-align: right;
  justify-self: end;
  max-width: 620px;
}

/* === H1 (single, with two visual spans) === */
.hero-title {
  font-family: var(--font-head);
  margin: 0 0 26px;
  line-height: 1.1;
  color: #fff;
}
.hero-title-brand {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: 0.04em;
  color: var(--ice);
  white-space: nowrap;
  direction: ltr;
  text-align: right;
  text-transform: none;
  margin-bottom: 14px;
  text-shadow: 0 0 24px rgba(94, 234, 255, 0.22);
}
.hero-title-main {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: #fff;
  text-wrap: balance;
}

.hero-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.78;
  color: var(--on-dark-muted);
  margin: 0 0 36px;
  max-width: 56ch;
  margin-inline-start: auto;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  direction: rtl;          /* in rtl context, flex-start = visual right */
  justify-content: flex-start;
}

/* ============================================================
   VIDEO — clean, no mask, no card, no frame
   ============================================================ */
.gotop-hero-video-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
  background: #09101E !important;
  overflow: hidden;
  isolation: isolate;
}
.gotop-hero-video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent !important;
  mix-blend-mode: lighten;
  filter: saturate(0.92);
}

/* ============================================================
   HAMBURGER + MOBILE DRAWER (new, aligned with polish-v2 vibe)
   ============================================================ */
.hamburger {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  transition: border-color .18s, background .18s;
  position: relative;
  z-index: 110;
}
/* Lift the hamburger above the drawer when menu is open so the X can close it.
   Site-header creates a stacking context at z-index 50, so we must elevate the
   ancestor — bumping just the hamburger isn't enough. */
body.menu-open .site-header {
  z-index: 120;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hamburger:hover { border-color: var(--ice); background: rgba(94,234,255,0.06); }
.hamburger span {
  display: block;
  width: 20px;
  height: 1.6px;
  background: var(--on-dark);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.hamburger span:nth-child(2) { width: 14px; }
body.menu-open .hamburger span:nth-child(1) {
  transform: translateY(6.6px) rotate(45deg);
}
body.menu-open .hamburger span:nth-child(2) {
  opacity: 0;
}
body.menu-open .hamburger span:nth-child(3) {
  transform: translateY(-6.6px) rotate(-45deg);
  width: 20px;
}

.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background:
    radial-gradient(900px 600px at 70% 0%, rgba(94,234,255,0.10), transparent 65%),
    linear-gradient(180deg, #060912 0%, #0A1224 60%, #050810 100%);
  backdrop-filter: blur(20px) saturate(160%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .25s ease, transform .3s ease, visibility .25s;
  display: flex;
  flex-direction: column;
  padding: 92px 22px 24px;
  overflow-y: auto;
}
body.menu-open .mobile-drawer {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.drawer-group {
  margin-bottom: 22px;
}
.drawer-group + .drawer-group { border-top: 1px solid var(--border-dark); padding-top: 18px; }
.drawer-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ice);
  margin-bottom: 10px;
}
.drawer-list {
  list-style: none;
  margin: 0; padding: 0;
}
.drawer-list a,
.drawer-list .soon {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 4px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 16.5px;
  color: var(--on-dark);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  text-align: right;
}
.drawer-list a:hover { color: var(--ice); }
.drawer-list a.lead-link {
  color: var(--ice);
  font-weight: 700;
  text-shadow: 0 0 14px rgba(94, 234, 255, 0.22);
}

.drawer-cta {
  margin-top: auto;
  display: block;
  padding: 16px 22px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  background: linear-gradient(180deg, #16E3FF 0%, #36D8F2 100%);
  color: var(--ink);
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 14px 32px -10px rgba(94,234,255,0.55);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  /* Mobile: flat navy bg, no gradient/dots/layers, no override surprises */
  .site-header {
    background: rgba(7, 17, 31, 0.96) !important;
  }
  .hero {
    background: var(--gtp-hero-flat-bg) !important;
    background-image: none !important;
  }
  .hero::before,
  .hero::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
  }
  .hero-visual,
  .gotop-hero-video-wrap,
  .gotop-hero-video {
    background: var(--gtp-hero-flat-bg) !important;
    filter: none !important;
  }
  .gtp-platform-stack__wave path {
    fill: var(--gtp-hero-flat-bg) !important;
  }
}

/* v6: at narrow desktop widths (1024-1200) the header-cta button pushed the
   whole layout right and caused document overflow. Fix: hide the phone-num
   text at ≤1200px, keep the icon so the button still works. Below 860 the
   button already hides entirely. */
@media (max-width: 1200px) {
  .btn-header .phone-num { display: none; }
  .btn-header {
    padding: 12px 14px;
    min-width: 46px;
    justify-content: center;
  }
  .btn-header svg { opacity: 1; }
}
@media (max-width: 1180px) {
  .header-inner { padding: 16px 28px; gap: 24px; }
  .nav-link { font-size: 14.5px; padding: 8px 12px; }
  .mega-inner { padding: 32px 28px 36px; }
}
@media (max-width: 1024px) {
  .nav-link { font-size: 14px; padding: 8px 10px; }
  .mega-inner { grid-template-columns: 1fr 1fr; gap: 32px; padding: 28px 22px; }
  .mega-aside { grid-column: 1 / -1; }
  /* Stack hero vertically; copy on top, video below */
  .hero-inner {
    direction: rtl;
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-visual { grid-column: 1; grid-row: 2; max-width: 720px; margin-inline: auto; direction: ltr; }
  .hero-copy   { grid-column: 1; grid-row: 1; max-width: 100%; justify-self: stretch; }
  .hero-sub    { margin-inline-start: 0; }
  .hero-actions { justify-content: flex-start; }
}

@media (max-width: 860px) {
  /* === Mobile header — quick-actions LEFT, brand CENTER, hamburger RIGHT === */
  .header-inner {
    padding: 14px 16px;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
  }
  .primary-nav { display: none; }
  .header-cta  { display: none; }

  /* Visual RIGHT (RTL inline-start) → hamburger */
  .hamburger {
    display: inline-flex;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }
  /* Visual CENTER → brand */
  .brand {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    gap: 10px;
  }
  /* Visual LEFT (RTL inline-end) → phone + WhatsApp */
  .mobile-actions {
    display: inline-flex;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    gap: 8px;
    align-items: center;
  }
  .mobile-actions .icon-btn { width: 38px; height: 38px; border-radius: 9px; }

  .brand-icon { width: 44px; height: 44px; }
  .brand-word { font-size: 20px; }
  .brand-tag { font-size: 9px; letter-spacing: 0.26em; }

  /* === Mobile hero — centered === */
  .hero { padding: 36px 18px 56px; }
  .hero-inner { gap: 30px; }
  .hero-copy {
    text-align: center;
    max-width: 100%;
    justify-self: stretch;
  }
  .hero-title { margin-bottom: 18px; }
  .hero-title-brand {
    font-size: 16px;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    white-space: nowrap;
    text-align: center;
  }
  .hero-title-main {
    font-size: 26px;
    line-height: 1.25;
    text-align: center;
  }
  .hero-sub {
    font-size: 16px;
    line-height: 1.72;
    margin: 0 auto 24px;
    text-align: center;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
  }
  .hero-actions .btn {
    padding: 14px 20px;
    font-size: 15px;
    width: 100%;
  }

  .gotop-hero-video-wrap { max-width: 100%; }
  .gotop-hero-video {
    filter: drop-shadow(0 18px 56px rgba(94, 234, 255, 0.12));
  }

  /* === Mobile drawer — centered items === */
  .mobile-drawer {
    padding: 92px 22px 28px;
    align-items: center;
    text-align: center;
  }
  .drawer-group {
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }
  .drawer-eyebrow { text-align: center; }
  .drawer-list a {
    justify-content: center;
    text-align: center;
    font-size: 17px;
  }
  .drawer-cta {
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }
}

@media (max-width: 380px) {
  .brand-icon { width: 40px; height: 40px; }
  .brand-word { font-size: 18px; }
  .hero-title-brand { font-size: 14.5px; }
  .hero-title-main { font-size: 23px; }
}

/* ============================================================
   PLATFORM STACK (v15) — restructured layers with meta header,
   asymmetric stagger, connectors. Scoped to .gtp-platform-stack__*.
   ============================================================ */
.gtp-platform-stack {
  position: relative;
  isolation: isolate;
  color: #0B1220;
  overflow: hidden;
  padding-bottom: clamp(90px, 10vw, 150px);
  background:
    radial-gradient(ellipse 80% 55% at 50% 6%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 72%),
    radial-gradient(circle at 22% 70%, rgba(94, 234, 255, 0.10), transparent 40%),
    radial-gradient(circle at 82% 22%, rgba(120, 200, 255, 0.10), transparent 38%),
    linear-gradient(180deg, #DAE7F0 0%, #EAF2F8 40%, #DCE7EF 78%, #CCDCE7 100%);
}

.gtp-platform-stack__wave {
  display: block;
  width: 100%;
  height: clamp(110px, 11vw, 170px);
  margin: 0;
}

.gtp-platform-stack__inner {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) 40px 0;
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: clamp(40px, 4vw, 64px);
  align-items: center;
}

/* === Content column (RTL natural → visually RIGHT) === */
.gtp-platform-stack__content { text-align: right; }
.gtp-platform-stack__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-inline: auto;
  margin-bottom: 22px;

  padding: 7px 14px;
  border-radius: 999px;

  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;

  color: var(--gtp-navy-text-on-light) !important;

  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(94, 234, 255, 0.38);

  box-shadow:
    0 8px 20px rgba(8, 90, 110, 0.06),
    0 0 14px rgba(94, 234, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);

  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}
.gtp-platform-stack__eyebrow::before,
.gtp-platform-stack__eyebrow::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(94, 234, 255, 0.65);
  flex: 0 0 auto;
}
.gtp-platform-stack__eyebrow::before { margin-inline-end: 10px; }
.gtp-platform-stack__eyebrow::after  { margin-inline-start: 10px; }
.gtp-platform-stack__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--gtp-navy-text-on-light);
  margin: 0 0 26px;
  text-wrap: balance;
}
.gtp-platform-stack__title-line { display: block; }
.gtp-platform-stack__title-line--accent {
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  color: var(--cyan);
  margin-top: 4px;
  text-shadow:
    0 1px 0 rgba(0, 30, 45, 0.10),
    0 0 10px rgba(94, 234, 255, 0.18);
}
.gtp-platform-stack__text {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.78;
  color: #2F3A4D;
  margin: 0 0 34px;
  max-width: 520px;
  margin-inline-start: auto;
}
.gtp-platform-stack__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--gtp-navy-text-on-light);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #7BEFFF 0%, #2BBFD9 100%);
  padding: 15px 26px 15px 22px;
  border-radius: 999px;
  border: 1px solid rgba(11, 18, 32, 0.08);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .25s ease, filter .2s ease;
  box-shadow:
    0 16px 32px -14px rgba(43, 191, 217, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.gtp-platform-stack__cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow:
    0 20px 38px -14px rgba(43, 191, 217, 0.70),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.gtp-platform-stack__cta svg { transition: transform .25s ease; opacity: 0.9; }
.gtp-platform-stack__cta:hover svg { transform: translateX(-4px); }

/* === Visual stack (RTL natural → visually LEFT) === */
.gtp-platform-stack__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;          /* RTL: layers anchor to visual RIGHT */
  gap: clamp(22px, 2vw, 30px);
  padding-block: 14px;
}

/* Ambient stage container behind the 3 layers */
.gtp-platform-stack__stage {
  position: absolute;
  inset: -4% -6%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(94, 234, 255, 0.12), transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 96%, rgba(120, 200, 255, 0.08), transparent 72%);
  filter: blur(4px);
}

/* Subtle cyan sweep across the stack */
.gtp-platform-stack__sweep {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(110deg,
    transparent 35%,
    rgba(94, 234, 255, 0.12) 50%,
    transparent 65%);
  mix-blend-mode: screen;
  transform: translateX(-30%);
  animation: gtpStackSweep 10s ease-in-out infinite;
  opacity: 0;
}
@keyframes gtpStackSweep {
  0%   { transform: translateX(-30%); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(130%); opacity: 0; }
}

/* === Layer panel === */
.gtp-platform-stack__layer {
  position: relative;
  width: min(100%, 620px);
  border-radius: 26px;
  padding: 26px 30px 24px;
  color: #DFEAF5;
  background:
    /* top glass highlight */
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 36%),
    /* navy body — layered for depth, not flat */
    linear-gradient(180deg, #0B182E 0%, #07111F 45%, #06101D 100%);
  border: 1px solid rgba(94, 234, 255, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 22px 38px -22px rgba(7, 12, 25, 0.55),
    0 0 24px -14px rgba(94, 234, 255, 0.22);
  transition: transform .25s ease, border-color .25s ease, box-shadow .3s ease;
}
.gtp-platform-stack__layer:hover {
  transform: translateY(-3px);
  border-color: rgba(94, 234, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 28px 46px -22px rgba(7, 12, 25, 0.65),
    0 0 32px -12px rgba(94, 234, 255, 0.40);
}

/* v18: stagger REMOVED — all 3 cards perfectly aligned. */
.gtp-platform-stack__layer--1,
.gtp-platform-stack__layer--2,
.gtp-platform-stack__layer--3 {
  margin-inline-start: 0;
  margin-inline-end: 0;
}

/* Meta header row — number + title across the layer */
.gtp-platform-stack__layer-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.gtp-platform-stack__layer-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(20px, 1.55vw, 23px);
  letter-spacing: -0.012em;
  color: #FFFFFF;
  margin: 0;
  text-shadow: 0 0 16px rgba(94, 234, 255, 0.18);
}
.gtp-platform-stack__number {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(22px, 1.8vw, 26px);
  letter-spacing: 0.08em;
  color: rgba(94, 234, 255, 0.50);
  flex-shrink: 0;
}

.gtp-platform-stack__layer-text {
  font-family: var(--font-body);
  font-size: clamp(14.5px, 1vw, 15.5px);
  line-height: 1.72;
  color: rgba(214, 224, 240, 0.90);
  margin: 0 0 18px;
}

/* Chips row */
.gtp-platform-stack__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gtp-platform-stack__chip {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: #E6F4F9;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 100%),
    rgba(94, 234, 255, 0.07);
  border: 1px solid rgba(94, 234, 255, 0.30);
  border-radius: 999px;
  padding: 7px 14px;
  white-space: nowrap;
}

/* Connector — short vertical line + dot in the gap below each non-last layer */
.gtp-platform-stack__connector {
  position: absolute;
  bottom: calc(-1 * clamp(22px, 2vw, 30px));
  inset-inline-end: 38px;            /* RTL: visual LEFT side */
  width: 1px;
  height: clamp(22px, 2vw, 30px);
  background: linear-gradient(180deg, rgba(94, 234, 255, 0.55) 0%, rgba(94, 234, 255, 0) 100%);
  pointer-events: none;
}
.gtp-platform-stack__connector::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5EEAFF;
  box-shadow: 0 0 10px rgba(94, 234, 255, 0.70);
}

/* === Reveal animation === */
.gtp-platform-stack__eyebrow,
.gtp-platform-stack__title,
.gtp-platform-stack__text,
.gtp-platform-stack__cta,
.gtp-platform-stack__layer {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.gtp-platform-stack__layer--1 { transition-delay: 0ms; }
.gtp-platform-stack__layer--2 { transition-delay: 120ms; }
.gtp-platform-stack__layer--3 { transition-delay: 240ms; }
.gtp-platform-stack__eyebrow.is-visible,
.gtp-platform-stack__title.is-visible,
.gtp-platform-stack__text.is-visible,
.gtp-platform-stack__cta.is-visible,
.gtp-platform-stack__layer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .gtp-platform-stack__sweep { animation: none !important; }
  .gtp-platform-stack__eyebrow,
  .gtp-platform-stack__title,
  .gtp-platform-stack__text,
  .gtp-platform-stack__cta,
  .gtp-platform-stack__layer {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* === Responsive ===
   > 1180   : desktop split (text right, staggered stack left)
   ≤ 1180   : stacked vertical (text first, layers below; stagger preserved)
   ≤ 767.98 : mobile (no stagger, no connector, no sweep, full-width)
*/
@media (max-width: 1180px) {
  .gtp-platform-stack__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(36px, 5vw, 52px);
    padding-inline: 28px;
    align-items: stretch;
  }
  .gtp-platform-stack__content {
    text-align: right;
    max-width: 760px;
    margin-inline-start: auto;
  }
  .gtp-platform-stack__visual {
    max-width: 760px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .gtp-platform-stack { padding-bottom: 76px; }
  .gtp-platform-stack__wave { height: 74px; }
  .gtp-platform-stack__inner {
    padding: 72px 18px 0;
    gap: 28px;
  }
  .gtp-platform-stack__content {
    text-align: center;
    max-width: 100%;
  }
  .gtp-platform-stack__title {
    font-size: clamp(30px, 8vw, 38px);
    line-height: 1.2;
    text-align: center;
  }
  .gtp-platform-stack__text {
    font-size: 16px;
    line-height: 1.75;
    max-width: 100%;
    text-align: center;
    margin-inline: auto;
    margin-bottom: 26px;
  }
  .gtp-platform-stack__cta {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 330px;
    margin-inline: auto;
    padding: 14px 22px;
  }

  /* Mobile: kill decorative layers, reset stagger, allow auto height */
  .gtp-platform-stack__visual {
    align-items: stretch;
    gap: 14px;
    padding-block: 0;
  }
  .gtp-platform-stack__stage,
  .gtp-platform-stack__sweep,
  .gtp-platform-stack__connector { display: none; }

  .gtp-platform-stack__layer {
    width: auto;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    border-radius: 20px;
    padding: 20px 20px;
    height: auto;
  }
  .gtp-platform-stack__layer-meta {
    margin-bottom: 8px;
  }
  .gtp-platform-stack__layer-title { font-size: 20px; }
  .gtp-platform-stack__number { font-size: 18px; }
  .gtp-platform-stack__layer-text {
    font-size: 14.5px;
    line-height: 1.65;
    margin-bottom: 14px;
  }
  .gtp-platform-stack__chip {
    font-size: 12px;
    padding: 6px 12px;
  }
}

/* ============================================================
   PLATFORM STACK v18 — Aligned premium system modules
   Restructured layer (index | body | chip-rail), ports, brackets,
   ambient lighting via radial masks (no rectangle), z-index
   hierarchy (paths behind cards), mobile gap-only connectors.
   ============================================================ */

/* === Flow SVG overlay container === */
.gtp-platform-stack__flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.gtp-platform-stack__flow--mobile { display: none; }

/* Base routes stay visibly drawn (static or reduced-motion friendly) */
.gtp-platform-stack__routes-base path {
  opacity: 0.55;
  filter: drop-shadow(0 0 2.5px rgba(94, 234, 255, 0.35));
}

/* Active overlay tracers start hidden; JS animates dashoffset on burst */
.gtp-platform-stack__routes-active path {
  stroke-dasharray: 0 9999;
  stroke-dashoffset: 0;
  opacity: 0.95;
  mix-blend-mode: screen;
}

/* Ambient particles — bright signal dots */
.gtp-platform-stack__particle {
  filter: drop-shadow(0 0 4px rgba(94, 234, 255, 0.95));
}

/* === Layer reception node (on inline-end edge of each card) === */
.gtp-platform-stack__node {
  position: absolute;
  top: 50%;
  inset-inline-end: -6px;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #A8F2FF 0%, #5EEAFF 45%, rgba(94, 234, 255, 0) 75%);
  box-shadow: 0 0 14px rgba(94, 234, 255, 0.65), 0 0 28px rgba(94, 234, 255, 0.30);
  z-index: 4;
  pointer-events: none;
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease;
  animation: gtpNodeIdle 3.4s ease-in-out infinite;
}
.gtp-platform-stack__layer--2 .gtp-platform-stack__node { animation-delay: 0.8s; }
.gtp-platform-stack__layer--3 .gtp-platform-stack__node { animation-delay: 1.6s; }
@keyframes gtpNodeIdle {
  0%, 100% { transform: translateY(-50%) scale(1);    opacity: 0.80; }
  50%      { transform: translateY(-50%) scale(1.15); opacity: 1; }
}

/* === Pulse halo — only when layer enters viewport (one-time settle) === */
.gtp-platform-stack__pulse {
  position: absolute;
  top: 50%;
  inset-inline-end: -6px;
  transform: translateY(-50%) scale(1);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(94, 234, 255, 0.55);
  z-index: 3;
  pointer-events: none;
  opacity: 0;
}

/* === LAYER ACTIVATION STATES — controlled by JS engine === */
.gtp-platform-stack__layer {
  --gtp-tilt: 0deg;
  --gtp-lift: 0px;
  /* allow the engine to push tilt/lift via JS-set classes */
  transform: translateY(calc(var(--gtp-lift, 0px) - 6px * var(--gtp-py, 0)))
             translateX(calc(-4px * var(--gtp-px, 0)))
             rotate(var(--gtp-tilt, 0deg));
  transform-origin: 30% 50%;
  transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.gtp-platform-stack__layer--2 {
  transform-origin: 70% 50%;
  transform: translateY(calc(var(--gtp-lift, 0px) - 4px * var(--gtp-py, 0)))
             translateX(calc(-3px * var(--gtp-px, 0)))
             rotate(var(--gtp-tilt, 0deg));
}

/* CHARGING — brief lead-in (~90ms) before activation */
.gtp-platform-stack__layer.is-charging {
  border-color: rgba(94, 234, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 22px 38px -22px rgba(7, 12, 25, 0.55),
    0 0 30px -10px rgba(94, 234, 255, 0.50);
}

/* ACTIVE — full layer reaction (~550ms hold) */
.gtp-platform-stack__layer.is-active {
  --gtp-lift: -6px;
  --gtp-tilt: 0.4deg;
  border-color: rgba(94, 234, 255, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 30px 50px -22px rgba(7, 12, 25, 0.70),
    0 0 50px -8px rgba(94, 234, 255, 0.75);
}
.gtp-platform-stack__layer--2.is-active { --gtp-tilt: -0.4deg; }

/* Border edge trace — appears with .is-active */
.gtp-platform-stack__layer::before {
  /* Reuse existing ::before (no — v15 did not set it). Use new selector. */
}
.gtp-platform-stack__layer .gtp-platform-stack__node {
  /* fire node flash on activate */
}
.gtp-platform-stack__layer.is-active .gtp-platform-stack__node {
  animation: gtpNodeFlash .55s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 22px rgba(94, 234, 255, 1), 0 0 44px rgba(94, 234, 255, 0.55);
}
@keyframes gtpNodeFlash {
  0%   { transform: translateY(-50%) scale(1);    filter: brightness(1); }
  35%  { transform: translateY(-50%) scale(1.85); filter: brightness(1.6); }
  100% { transform: translateY(-50%) scale(1.0);  filter: brightness(1); }
}
.gtp-platform-stack__layer.is-active .gtp-platform-stack__pulse {
  animation: gtpPulseRipple .85s cubic-bezier(.2,.6,.2,1);
}
@keyframes gtpPulseRipple {
  0%   { transform: translateY(-50%) scale(1);   opacity: 0.95; }
  100% { transform: translateY(-50%) scale(5.0); opacity: 0; }
}

/* Internal cyan highlight that sweeps across active card */
.gtp-platform-stack__layer::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(94, 234, 255, 0.22) 50%,
    transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-110%);
  transition: transform 0s, opacity .15s;
}
.gtp-platform-stack__layer.is-active::after {
  animation: gtpCardSweep .75s cubic-bezier(.4,0,.25,1) forwards;
}
@keyframes gtpCardSweep {
  0%   { transform: translateX(-110%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(110%);  opacity: 0; }
}

/* RELEASING — smooth settle back */
.gtp-platform-stack__layer.is-releasing {
  --gtp-lift: 0px;
  --gtp-tilt: 0deg;
}

/* === CHIP WAVE — only when parent layer is active === */
.gtp-platform-stack__chip {
  --gtp-chip-bg: rgba(94, 234, 255, 0.07);
  --gtp-chip-border: rgba(94, 234, 255, 0.30);
}
.gtp-platform-stack__layer.is-active .gtp-platform-stack__chip {
  animation: gtpChipFlash .42s cubic-bezier(.4,0,.25,1) both;
  animation-delay: calc(var(--ci, 0) * 55ms + 80ms);
}
@keyframes gtpChipFlash {
  0%   { transform: translateY(0);    background-color: rgba(94, 234, 255, 0.07); border-color: rgba(94, 234, 255, 0.30); color: #E6F4F9; }
  35%  { transform: translateY(-3px); background-color: rgba(94, 234, 255, 0.22); border-color: rgba(94, 234, 255, 0.80); color: #FFFFFF; box-shadow: 0 0 16px rgba(94, 234, 255, 0.55); }
  100% { transform: translateY(0);    background-color: rgba(94, 234, 255, 0.07); border-color: rgba(94, 234, 255, 0.30); color: #E6F4F9; }
}

/* === Ambient background sweep — diagonal pulse every 4s === */
.gtp-platform-stack__sweep {
  position: absolute;
  inset: -10% -5%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(110deg,
    transparent 35%,
    rgba(94, 234, 255, 0.28) 48%,
    rgba(255, 255, 255, 0.14) 52%,
    transparent 65%);
  mix-blend-mode: screen;
  transform: translateX(-50%);
  animation: gtpSweepMove 4.2s cubic-bezier(.4,0,.4,1) infinite;
  opacity: 0;
}
@keyframes gtpSweepMove {
  0%   { transform: translateX(-50%); opacity: 0; }
  10%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translateX(160%); opacity: 0; }
}

/* === Pool of light under stack === */
.gtp-platform-stack__energy-ring {
  position: absolute;
  left: 50%;
  bottom: -10%;
  width: 120%;
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center,
      rgba(94, 234, 255, 0.42) 0%,
      rgba(94, 234, 255, 0.12) 30%,
      rgba(94, 234, 255, 0) 65%);
  filter: blur(8px);
  animation: gtpRingBreath 4.4s ease-in-out infinite;
}
@keyframes gtpRingBreath {
  0%, 100% { opacity: 0.70; transform: translateX(-50%) scale(0.97); }
  50%      { opacity: 1;    transform: translateX(-50%) scale(1.05); }
}

/* === Light field — moving radial pools (also reacts to pointer via --gtp-px/py) === */
.gtp-platform-stack__light-field {
  position: absolute;
  inset: -8% -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at calc(70% + 60px * var(--gtp-px, 0)) calc(30% + 40px * var(--gtp-py, 0)),
      rgba(120, 200, 255, 0.32), transparent 45%),
    radial-gradient(circle at calc(25% - 50px * var(--gtp-px, 0)) calc(75% - 30px * var(--gtp-py, 0)),
      rgba(94, 234, 255, 0.26), transparent 48%);
  animation: gtpLightDrift 9s ease-in-out infinite alternate;
  transition: background-position .4s ease;
}
@keyframes gtpLightDrift {
  0%   { filter: blur(0); }
  100% { filter: blur(2px); }
}

/* === Reveal sequencing (entrance) === */
.gtp-platform-stack__layer--1 { transition-delay: 200ms; }
.gtp-platform-stack__layer--2 { transition-delay: 380ms; }
.gtp-platform-stack__layer--3 { transition-delay: 560ms; }

/* === prefers-reduced-motion: freeze, keep static composition === */
@media (prefers-reduced-motion: reduce) {
  .gtp-platform-stack__particle,
  .gtp-platform-stack__node,
  .gtp-platform-stack__pulse,
  .gtp-platform-stack__sweep,
  .gtp-platform-stack__energy-ring,
  .gtp-platform-stack__light-field { animation: none !important; }
  .gtp-platform-stack__layer { transform: none !important; transition: none !important; }
  .gtp-platform-stack__layer.is-active::after,
  .gtp-platform-stack__layer.is-active .gtp-platform-stack__node,
  .gtp-platform-stack__layer.is-active .gtp-platform-stack__pulse,
  .gtp-platform-stack__layer.is-active .gtp-platform-stack__chip { animation: none !important; }
  /* Base routes + nodes + light field all still visible statically */
}

/* === Mobile (≤767.98) — swap network for vertical spine === */
@media (max-width: 767.98px) {
  .gtp-platform-stack__flow--desktop,
  .gtp-platform-stack__sweep,
  .gtp-platform-stack__energy-ring { display: none; }

  .gtp-platform-stack__flow--mobile {
    display: block;
    inset: -30px 0 -30px 0;
    width: 100%;
    height: calc(100% + 60px);
  }

  /* Move node to TOP-center of each card */
  .gtp-platform-stack__node {
    top: -6px;
    inset-inline-end: auto;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    animation: gtpNodeIdleMobile 3.2s ease-in-out infinite;
  }
  @keyframes gtpNodeIdleMobile {
    0%, 100% { transform: translateX(-50%) scale(1);    opacity: 0.85; }
    50%      { transform: translateX(-50%) scale(1.18); opacity: 1; }
  }
  .gtp-platform-stack__pulse {
    top: -6px;
    inset-inline-end: auto;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
  }
  .gtp-platform-stack__layer.is-active .gtp-platform-stack__node {
    animation: gtpNodeFlashMobile .55s cubic-bezier(.4,0,.2,1);
  }
  @keyframes gtpNodeFlashMobile {
    0%   { transform: translateX(-50%) scale(1);    filter: brightness(1); }
    35%  { transform: translateX(-50%) scale(1.85); filter: brightness(1.6); }
    100% { transform: translateX(-50%) scale(1.0);  filter: brightness(1); }
  }
  .gtp-platform-stack__layer.is-active .gtp-platform-stack__pulse {
    animation: gtpPulseRippleMobile .85s cubic-bezier(.2,.6,.2,1);
  }
  @keyframes gtpPulseRippleMobile {
    0%   { transform: translateX(-50%) scale(1);   opacity: 0.95; }
    100% { transform: translateX(-50%) scale(4.5); opacity: 0; }
  }

  /* No pointer parallax / tilt on mobile */
  .gtp-platform-stack__layer { transform: none; }
  .gtp-platform-stack__layer.is-active {
    --gtp-lift: -5px;
    transform: translateY(var(--gtp-lift));
  }
  .gtp-platform-stack__layer.is-releasing {
    --gtp-lift: 0px;
    transform: translateY(0);
  }
}

/* ============================================================
   v18 STRUCTURAL OVERRIDES
   Restructured layer (index | body), ports, brackets, chip-rail.
   Ambient lighting fully masked. z-index hierarchy. Gap connectors.
   ============================================================ */

/* --- Ambient lighting: kill rectangle via radial mask --- */
.gtp-platform-stack__light-field {
  position: absolute;
  inset: -8% -8%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 45%, rgba(120, 200, 255, 0.18), transparent 55%),
    radial-gradient(circle at 50% 60%, rgba(94, 234, 255, 0.14), transparent 55%);
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
  animation: gtpLightDrift 9s ease-in-out infinite alternate;
}
.gtp-platform-stack__sweep {
  position: absolute;
  inset: -10% -5%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(110deg,
    transparent 38%,
    rgba(94, 234, 255, 0.22) 48%,
    rgba(255, 255, 255, 0.10) 52%,
    transparent 62%);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, #000 0%, rgba(0,0,0,0.5) 65%, transparent 100%);
          mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, #000 0%, rgba(0,0,0,0.5) 65%, transparent 100%);
  transform: translateX(-50%);
  animation: gtpSweepMove 4.6s cubic-bezier(.4,0,.4,1) infinite;
  opacity: 0;
}

/* --- z-index hierarchy: paths behind cards --- */
.gtp-platform-stack__flow { z-index: 0 !important; }
.gtp-platform-stack__visual > .gtp-platform-stack__layer {
  position: relative;
  z-index: 2;
}

/* --- Layer becomes 2-col grid (index | body) --- */
.gtp-platform-stack__layer {
  display: grid !important;
  grid-template-columns: 64px 1fr !important;
  gap: 22px !important;
  padding: 26px 28px 24px !important;
  /* Override v17 transform-origin; keep transform from v17 active states */
}

/* Index column with subtle divider on inline-end (toward body) */
.gtp-platform-stack__index {
  display: flex;
  align-items: center;
  justify-content: center;
  border-inline-end: 1px solid rgba(94, 234, 255, 0.18);
  padding-inline-end: 14px;
  margin-inline-end: 4px;
  min-height: 56px;
  position: relative;
  z-index: 1;
}
.gtp-platform-stack__index .gtp-platform-stack__number {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: 0.06em;
  color: rgba(94, 234, 255, 0.65);
  text-shadow: 0 0 14px rgba(94, 234, 255, 0.25);
}

/* Body column — title, text, chip-rail */
.gtp-platform-stack__layer-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* Chip-rail: distinct lower zone with separator */
.gtp-platform-stack__chip-rail {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.gtp-platform-stack__chip-rail .gtp-platform-stack__chips { margin: 0; }

/* --- Segmented cyan border via gradient mask trick --- */
.gtp-platform-stack__layer {
  /* keep base navy bg + reset border so segmented overlay shows clean */
  border: 1px solid rgba(94, 234, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(180deg, #0C1828 0%, #07111F 50%, #06101D 100%);
}

/* --- Corner brackets (technical detail) --- */
.gtp-platform-stack__bracket {
  position: absolute;
  width: 16px;
  height: 16px;
  z-index: 2;
  pointer-events: none;
  border-color: rgba(94, 234, 255, 0.65);
  border-style: solid;
  border-width: 0;
}
.gtp-platform-stack__bracket--tl {
  top: 10px;
  inset-inline-end: 10px;        /* RTL: visual TOP-LEFT */
  border-top-width: 1px;
  border-inline-end-width: 1px;
  border-top-right-radius: 4px;
}
.gtp-platform-stack__bracket--br {
  bottom: 10px;
  inset-inline-start: 10px;      /* RTL: visual BOTTOM-RIGHT */
  border-bottom-width: 1px;
  border-inline-start-width: 1px;
  border-bottom-left-radius: 4px;
}

/* --- Connection ports (entry/exit on inline-end edge for desktop) --- */
.gtp-platform-stack__port {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle, #A8F2FF 0%, #5EEAFF 50%, rgba(94,234,255,0) 80%);
  box-shadow: 0 0 10px rgba(94, 234, 255, 0.70);
  z-index: 3;
  pointer-events: none;
  opacity: 0.85;
}
.gtp-platform-stack__port--in {
  inset-inline-end: -5px;        /* visual LEFT edge of card */
  top: 22%;
}
.gtp-platform-stack__port--out {
  inset-inline-end: -5px;
  bottom: 22%;
}
.gtp-platform-stack__layer.is-active .gtp-platform-stack__port {
  animation: gtpPortFlash .55s cubic-bezier(.4,0,.2,1);
}
@keyframes gtpPortFlash {
  0%   { transform: scale(1);    box-shadow: 0 0 10px rgba(94,234,255,0.70); }
  35%  { transform: scale(1.7);  box-shadow: 0 0 22px rgba(94,234,255,1.0); }
  100% { transform: scale(1);    box-shadow: 0 0 10px rgba(94,234,255,0.70); }
}

/* --- Hide v17 left-edge node now that we use ports (avoid double dots) --- */
.gtp-platform-stack__node,
.gtp-platform-stack__pulse { display: none; }

/* --- Mobile connector segments (gap-only) --- */
.gtp-platform-stack__connector {
  display: none;  /* desktop: hidden; shown only at mobile breakpoint */
}

/* === RESPONSIVE — MOBILE rewrites === */
@media (max-width: 767.98px) {
  /* Hide entire desktop network on mobile */
  .gtp-platform-stack__flow--desktop { display: none !important; }
  .gtp-platform-stack__flow--mobile  { display: none !important; }
  .gtp-platform-stack__sweep         { display: none !important; }

  /* Layer becomes single column on mobile (collapse index above body) */
  .gtp-platform-stack__layer {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 20px 20px !important;
  }
  .gtp-platform-stack__index {
    border-inline-end: 0;
    padding-inline-end: 0;
    margin-inline-end: 0;
    justify-content: flex-start;
    min-height: 0;
    margin-bottom: 0;
  }
  .gtp-platform-stack__index .gtp-platform-stack__number { font-size: 18px; }

  /* Ports flip to top/bottom centered */
  .gtp-platform-stack__port--in {
    inset-inline-end: auto;
    inset-inline-start: 50%;
    top: -5px;
    transform: translateX(-50%);
  }
  .gtp-platform-stack__port--out {
    inset-inline-end: auto;
    inset-inline-start: 50%;
    bottom: -5px;
    top: auto;
    transform: translateX(-50%);
  }
  .gtp-platform-stack__layer.is-active .gtp-platform-stack__port {
    animation: gtpPortFlashMobile .55s cubic-bezier(.4,0,.2,1);
  }
  @keyframes gtpPortFlashMobile {
    0%   { transform: translateX(-50%) scale(1);   box-shadow: 0 0 10px rgba(94,234,255,0.70); }
    35%  { transform: translateX(-50%) scale(1.7); box-shadow: 0 0 22px rgba(94,234,255,1.0); }
    100% { transform: translateX(-50%) scale(1);   box-shadow: 0 0 10px rgba(94,234,255,0.70); }
  }

  /* Connector segments visible only on mobile — sit in the gap between cards */
  .gtp-platform-stack__connector {
    display: block;
    width: 80px;
    height: 40px;
    margin: -8px auto;     /* overlap slightly into gap, keeps spacing tight */
    z-index: 0;
    position: relative;
  }
  .gtp-platform-stack__connector svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }

  /* Layer 1: 4 chips → balanced 2×2 grid on mobile */
  .gtp-platform-stack__layer--1 .gtp-platform-stack__chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .gtp-platform-stack__layer--1 .gtp-platform-stack__chip {
    text-align: center;
    width: auto;
  }
  /* Light field stays masked on mobile too */
  .gtp-platform-stack__light-field {
    inset: -5% -5%;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
            mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
  }
}


/* ============================================================
   PIXEL TRIO (v20 — focused patch) — desktop: premium phones
   with proper safe-area padding (28px+), big glowing icons,
   denser brighter pixel floor. Mobile: horizontal compact
   cards (no phone shape), icon-on-side layout, brighter mini
   pixel strip per card.
   ============================================================ */

.gtp-trio {
  --gtp-cyan: #5EEAFF;
  --gtp-cyan-bright: #A8F2FF;
  --gtp-cyan-deep: #2BBFD9;
  --gtp-navy: #0B1424;
  --gtp-navy-deep: #050B16;
  --gtp-pearl: #FBFCFE;
  --gtp-pearl-deep: #D2D9E1;

  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 12px 12px;
}

/* Ambient halo (radial, masked) */
.gtp-trio__halo {
  position: absolute;
  inset: -8% -6%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 72%, rgba(94, 234, 255, 0.30), transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse 65% 55% at 50% 60%, #000 0%, rgba(0,0,0,0.55) 60%, transparent 100%);
          mask-image: radial-gradient(ellipse 65% 55% at 50% 60%, #000 0%, rgba(0,0,0,0.55) 60%, transparent 100%);
}

/* === ROW (desktop) === */
.gtp-trio__row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 620px;
}

/* === PHONES (desktop — wider to allow 28px safe-area inside) === */
.gtp-trio__phone {
  position: relative;
  flex: 0 0 auto;
  animation: gtpPhoneFloat 5.5s ease-in-out infinite;
}
.gtp-trio__phone--1 { animation-delay: 0s; }
.gtp-trio__phone--2 { animation-delay: 1.2s; }
.gtp-trio__phone--3 { animation-delay: 2.4s; }

.gtp-trio__phone--side .gtp-trio__frame {
  width: 172px;
  height: 348px;
  border-radius: 38px;
}
.gtp-trio__phone--center { z-index: 3; }
.gtp-trio__phone--center .gtp-trio__frame {
  width: 188px;
  height: 384px;
  border-radius: 42px;
}

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

/* Glass premium frame */
.gtp-trio__frame {
  position: relative;
  padding: 6px;
  background:
    linear-gradient(170deg, #FFFFFF 0%, #ECF0F5 38%, #D2D9E1 100%);
  border: 1px solid #C9D0D8;
  box-shadow:
    inset 0 1.2px 0 rgba(255, 255, 255, 1),
    inset 0 -1.5px 0 rgba(20, 40, 80, 0.08),
    inset 1px 0 0 rgba(255, 255, 255, 0.7),
    inset -1px 0 0 rgba(20, 40, 80, 0.05),
    0 26px 44px -20px rgba(20, 40, 80, 0.38),
    0 8px 18px -8px rgba(20, 40, 80, 0.20);
  overflow: hidden;
}
.gtp-trio__frame::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #B8C0C9, #9AA2AB);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  z-index: 4;
}
.gtp-trio__frame::after {
  content: "";
  position: absolute;
  inset: 12px 0;
  border-radius: inherit;
  box-shadow: inset -1px 0 0 rgba(94, 234, 255, 0.55);
  pointer-events: none;
  z-index: 3;
}

/* Dark elegant screen — DESKTOP safe-area padding 28px */
.gtp-trio__screen {
  position: relative;
  height: 100%;
  padding: 36px 28px 28px;
  border-radius: 32px;
  background:
    radial-gradient(ellipse 130% 60% at 50% -10%, rgba(94, 234, 255, 0.18), transparent 60%),
    radial-gradient(ellipse 100% 50% at 50% 110%, rgba(94, 234, 255, 0.10), transparent 60%),
    linear-gradient(180deg, #0E1A2E 0%, #08111F 45%, #04090F 100%);
  box-shadow:
    inset 0 0 0 1px rgba(94, 234, 255, 0.18),
    inset 0 24px 36px rgba(0, 0, 0, 0.55),
    inset 0 0 60px rgba(94, 234, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: hidden;
}
.gtp-trio__phone--center .gtp-trio__screen {
  padding: 40px 28px 30px;
  border-radius: 36px;
}
.gtp-trio__screen::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 38%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.015) 40%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.gtp-trio__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 1px 0 12px rgba(94, 234, 255, 0.18);
  pointer-events: none;
  z-index: 1;
}

/* === NEON ICON — big, glowing === */
.gtp-trio__icon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 25%, rgba(94, 234, 255, 0.24), rgba(94, 234, 255, 0.04) 70%);
  border: 1px solid rgba(94, 234, 255, 0.45);
  color: var(--gtp-cyan-bright);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 14px rgba(94, 234, 255, 0.30),
    0 0 20px rgba(94, 234, 255, 0.50),
    0 0 42px rgba(94, 234, 255, 0.25);
  filter: drop-shadow(0 0 6px rgba(94, 234, 255, 0.55));
  flex: 0 0 auto;
  animation: gtpIconPulse 3.4s ease-in-out infinite;
}
.gtp-trio__icon svg {
  display: block;
  width: 34px;
  height: 34px;
}
.gtp-trio__phone--center .gtp-trio__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
}
.gtp-trio__phone--center .gtp-trio__icon svg {
  width: 36px;
  height: 36px;
}
@keyframes gtpIconPulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.15),
      inset 0 0 14px rgba(94, 234, 255, 0.24),
      0 0 16px rgba(94, 234, 255, 0.40),
      0 0 34px rgba(94, 234, 255, 0.20);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 0 20px rgba(94, 234, 255, 0.42),
      0 0 26px rgba(94, 234, 255, 0.65),
      0 0 50px rgba(94, 234, 255, 0.36);
  }
}

.gtp-trio__title {
  position: relative;
  z-index: 2;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;
  color: #FFFFFF;
  margin: 6px 0 0;
  letter-spacing: -0.01em;
}
.gtp-trio__phone--center .gtp-trio__title { font-size: 16.5px; }

.gtp-trio__text {
  position: relative;
  z-index: 2;
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(214, 224, 240, 0.86);
  margin: 0;
}
.gtp-trio__phone--center .gtp-trio__text { font-size: 12px; }

.gtp-trio__chips {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: auto 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.gtp-trio__chips li {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.02em;
  color: #E6F4F9;
  background: rgba(94, 234, 255, 0.07);
  border: 1px solid rgba(94, 234, 255, 0.30);
  border-radius: 999px;
  padding: 3px 7px;
  white-space: nowrap;
  box-shadow: 0 0 8px rgba(94, 234, 255, 0.10);
}
.gtp-trio__phone--center .gtp-trio__chips li {
  font-size: 10px;
  padding: 3px 8px;
}

/* === RISER — gentle pixels into bottom of each phone === */
.gtp-trio__riser {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 32px;
  pointer-events: none;
  z-index: 1;
}
.gtp-trio__riser span {
  position: absolute;
  left: 50%;
  margin-left: -1.5px;
  bottom: 0;
  width: 3px;
  height: 3px;
  border-radius: 1px;
  background: var(--gtp-cyan-bright);
  box-shadow: 0 0 6px rgba(94, 234, 255, 0.95);
  opacity: 0;
  animation: gtpRiserPulse 3.0s cubic-bezier(.3, 0, .2, 1) infinite;
}
.gtp-trio__riser span:nth-child(1) { animation-delay: 0s; }
.gtp-trio__riser span:nth-child(2) { animation-delay: 1.0s; }
.gtp-trio__riser span:nth-child(3) { animation-delay: 2.0s; }
@keyframes gtpRiserPulse {
  0%   { transform: translateY(0); opacity: 0; }
  15%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(-34px); opacity: 0; }
}

/* === PIXEL CITY (desktop) — crisp digital squares, no fog === */
.gtp-trio__base {
  position: relative;
  z-index: 1;
  width: min(100%, 620px);
  height: 132px;
  margin-top: 4px;
  border-radius: 16px;
  background: transparent;
  overflow: visible;
}
.gtp-trio__floor {
  position: absolute;
  inset: 8px 24px 12px;
  z-index: 1;
  isolation: isolate; /* contain pixel ::before glow layer */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* CRISP front pixels — no blur, near-zero shadow */
.gtp-trio__pixel {
  position: absolute;
  bottom: var(--y, 0);
  left: var(--x, 50%);
  width: var(--s, 6px);
  height: var(--s, 6px);
  margin-left: calc(var(--s, 6px) / -2);
  border-radius: 0;
  background: #7AF6FF;
  opacity: var(--o, 0.95);
  box-shadow: 0 0 3px rgba(94, 234, 255, 0.55);
  animation: gtpPixelBreath 2.4s ease-in-out infinite;
  animation-delay: calc(var(--d, 0) * -1s);
}
/* Separate soft glow layer — sits BEHIND each crisp pixel */
.gtp-trio__pixel::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(94, 234, 255, 0.55) 0%,
    rgba(94, 234, 255, 0.18) 40%,
    transparent 70%);
  filter: blur(2.5px);
  z-index: -1;
  pointer-events: none;
}
@keyframes gtpPixelBreath {
  0%, 100% { opacity: calc(var(--o, 0.95) * 0.85); }
  50%      { opacity: var(--o, 0.95); }
}
/* Risers — pure translateY + opacity, no scale, no smear */
.gtp-trio__pixel.is-rising {
  animation: gtpPixelRise 3.4s cubic-bezier(.35, 0, .2, 1) infinite;
  animation-delay: calc(var(--d, 0) * -1s);
}
@keyframes gtpPixelRise {
  0%   { transform: translateY(0);    opacity: 0; }
  18%  { opacity: var(--o, 0.95); }
  75%  { opacity: calc(var(--o, 0.95) * 0.7); }
  100% { transform: translateY(-50px); opacity: 0; }
}

/* Mobile-only mini base (hidden on desktop) */
.gtp-trio__mini-base { display: none; }

/* === ENTRANCE REVEAL === */
.gtp-trio__phone,
.gtp-trio__base {
  opacity: 0;
  transition: opacity .8s ease, translate .8s cubic-bezier(.2,.7,.2,1);
  translate: 0 18px;
}
.gtp-trio__phone--1 { transition-delay: 280ms; }
.gtp-trio__phone--2 { transition-delay: 180ms; }
.gtp-trio__phone--3 { transition-delay: 380ms; }
.gtp-trio__base    { transition-delay: 100ms; }
.gtp-trio.is-revealed .gtp-trio__phone,
.gtp-trio.is-revealed .gtp-trio__base {
  opacity: 1;
  translate: 0 0;
}

/* === prefers-reduced-motion === */
@media (prefers-reduced-motion: reduce) {
  .gtp-trio__phone,
  .gtp-trio__icon,
  .gtp-trio__pixel,
  .gtp-trio__riser span { animation: none !important; }
  .gtp-trio__phone { opacity: 1; translate: none; transition: none; }
  .gtp-trio__base { opacity: 1; translate: none; transition: none; }
  .gtp-trio__pixel { opacity: var(--o, 0.95); }
  .gtp-trio__riser span { opacity: 0.6; transform: translateY(-20px); }
}

/* === Desktop responsive tweaks === */
@media (max-width: 1180px) {
  .gtp-trio__row { gap: 14px; max-width: 580px; }
  .gtp-trio__phone--side .gtp-trio__frame   { width: 164px; height: 332px; }
  .gtp-trio__phone--center .gtp-trio__frame { width: 178px; height: 364px; }
  .gtp-trio__base { width: min(100%, 560px); }
}
@media (max-width: 900px) {
  .gtp-trio__row { gap: 12px; max-width: 540px; }
  .gtp-trio__phone--side .gtp-trio__frame   { width: 152px; height: 314px; }
  .gtp-trio__phone--center .gtp-trio__frame { width: 168px; height: 344px; }
  .gtp-trio__screen { padding: 32px 22px 22px; }
  .gtp-trio__phone--center .gtp-trio__screen { padding: 36px 24px 24px; }
  .gtp-trio__title { font-size: 13.5px; }
  .gtp-trio__phone--center .gtp-trio__title { font-size: 15px; }
  .gtp-trio__text { font-size: 11px; }
  .gtp-trio__icon { width: 46px; height: 46px; }
  .gtp-trio__icon svg { width: 30px; height: 30px; }
  .gtp-trio__phone--center .gtp-trio__icon { width: 50px; height: 50px; }
  .gtp-trio__phone--center .gtp-trio__icon svg { width: 32px; height: 32px; }
  .gtp-trio__base { width: min(100%, 520px); height: 82px; }
}

/* === MOBILE — horizontal compact cards (NOT phones) === */
@media (max-width: 767.98px) {
  .gtp-trio { padding-block: 0 8px; }
  .gtp-trio__halo { display: none; }
  .gtp-trio__base { display: none; }
  .gtp-trio__riser { display: none; }

  .gtp-trio__row {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 100%;
  }

  .gtp-trio__phone {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: none;
    transform: none;
    width: 100%;
  }
  /* Hide sensor pill — these are cards, not phones */
  .gtp-trio__frame::before { display: none; }
  /* Override desktop dimensions — horizontal compact card */
  .gtp-trio__phone--side .gtp-trio__frame,
  .gtp-trio__phone--center .gtp-trio__frame {
    width: 100%;
    max-width: 340px;
    height: auto;
    min-height: 170px;
    max-height: 210px;
    border-radius: 26px;
    padding: 5px;
    aspect-ratio: auto;
  }
  .gtp-trio__phone--side .gtp-trio__screen,
  .gtp-trio__phone--center .gtp-trio__screen {
    min-height: 160px;
    padding: 18px 20px;
    border-radius: 22px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon  title"
      "icon  text"
      "chips chips";
    column-gap: 14px;
    row-gap: 4px;
    align-items: start;
  }
  .gtp-trio__icon {
    grid-area: icon;
    align-self: start;
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }
  .gtp-trio__icon svg { width: 30px; height: 30px; }
  .gtp-trio__phone--center .gtp-trio__icon {
    width: 50px;
    height: 50px;
    border-radius: 13px;
  }
  .gtp-trio__phone--center .gtp-trio__icon svg { width: 32px; height: 32px; }
  .gtp-trio__title {
    grid-area: title;
    margin: 0;
    align-self: end;
    font-size: 15.5px;
  }
  .gtp-trio__phone--center .gtp-trio__title { font-size: 15.5px; }
  .gtp-trio__text {
    grid-area: text;
    margin: 0;
    align-self: start;
    font-size: 12px;
    line-height: 1.45;
  }
  .gtp-trio__phone--center .gtp-trio__text { font-size: 12px; }
  .gtp-trio__chips {
    grid-area: chips;
    margin: 6px 0 0;
    gap: 5px;
  }
  .gtp-trio__chips li,
  .gtp-trio__phone--center .gtp-trio__chips li {
    font-size: 10.5px;
    padding: 3px 8px;
  }

  /* Pixel field — ONLY under the last card on mobile, crisp */
  .gtp-trio__mini-base { display: none; }
  .gtp-trio__phone--3 .gtp-trio__mini-base {
    display: block;
    position: relative;
    width: min(78vw, 320px);
    height: 78px;
    margin-top: 14px;
    border-radius: 14px;
    background: transparent;
    overflow: visible;
    isolation: isolate; /* contain pixel ::before glow layer */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  }
}

/* ============================================================
   SECTION 3 — GO TOP METHOD
   Premium dark glass-panel composition.
   Right: text content (RTL). Left: acrylic glass panel.
   ============================================================ */

.gtp-method {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(96px, 9.5vw, 150px) clamp(20px, 4vw, 64px) clamp(100px, 10vw, 150px);
  color: #E6EEF8;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(94, 234, 255, 0.07), transparent 70%),
    linear-gradient(180deg, #04060E 0%, #07111F 50%, #0B1220 100%);
}

/* Diagonal slice transition from section 2 (light) */
.gtp-method__slice {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 32px;
  background: linear-gradient(180deg, #CCDCE7 0%, #CCDCE7 38%, transparent 100%);
  clip-path: polygon(0 0, 100% 0, 100% 22%, 0 100%);
  z-index: 1;
  pointer-events: none;
}
.gtp-method__slice::after {
  content: "";
  position: absolute;
  bottom: 22%;
  left: 14%;
  width: 4px;
  height: 4px;
  background: var(--cyan);
  box-shadow: 0 0 6px rgba(94, 234, 255, 0.95), 0 0 14px rgba(94, 234, 255, 0.55);
}

/* === Background ambient === */
.gtp-method__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.gtp-method__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}
.gtp-method__glow--a {
  top: 8%;
  right: -4%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(94, 234, 255, 0.18), transparent 70%);
}
.gtp-method__glow--b {
  bottom: 6%;
  left: -4%;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(120, 200, 255, 0.12), transparent 70%);
}
/* Very subtle diagonal soft lines */
.gtp-method__lines {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(94, 234, 255, 0.035) 0 1px,
    transparent 1px 72px
  );
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, transparent 100%);
  opacity: 0.7;
}
/* Cyan dust particles */
.gtp-method__dust {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 1px;
  background: var(--cyan);
  box-shadow: 0 0 4px rgba(168, 242, 255, 0.95), 0 0 10px rgba(94, 234, 255, 0.55);
  opacity: 0.55;
  animation: gtpMethodTwinkle 3.6s ease-in-out infinite;
}
.gtp-method__dust--1 { top: 18%;  right: 10%; }
.gtp-method__dust--2 { top: 30%;  right: 28%; width: 4px; height: 4px; animation-delay: 0.9s; }
.gtp-method__dust--3 { top: 56%;  right: 6%;  animation-delay: 1.8s; }
.gtp-method__dust--4 { top: 22%;  left: 14%;  animation-delay: 0.4s; }
.gtp-method__dust--5 { top: 62%;  left: 8%;   width: 4px; height: 4px; animation-delay: 2.1s; }
.gtp-method__dust--6 { bottom: 18%; left: 30%; animation-delay: 1.3s; }
@keyframes gtpMethodTwinkle {
  0%, 100% { opacity: 0.22; }
  50%      { opacity: 0.85; }
}

/* === Inner grid === */
.gtp-method__inner {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
}
.gtp-method__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(48px, 5vw, 88px);
  align-items: center;
  direction: ltr; /* deterministic column order */
}

/* === RIGHT: content (RTL) — vertically centered === */
.gtp-method__content {
  grid-column: 2;
  grid-row: 1;
  direction: rtl;
  text-align: right;
  width: 100%;
  max-width: 600px;
  margin-inline-start: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Eyebrow — line + mono text */
.gtp-method__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.gtp-method__eyebrow-line {
  display: inline-block;
  width: 36px;
  height: 1px;
  background: linear-gradient(to left, var(--cyan), rgba(94, 234, 255, 0));
}
.gtp-method__eyebrow-text {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--cyan);
  text-transform: uppercase;
}

/* Title — two stacked lines: "למה עסקים בוחרים ב-" / "GO TOP" */
.gtp-method__title {
  margin: 0 0 26px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 600px;
}
.gtp-method__title-line {
  display: block;
  color: #F4F7FB;
}
.gtp-method__title-line:not(.gtp-method__title-line--brand) {
  white-space: nowrap; /* keep "למה עסקים בוחרים ב-" on one line on desktop */
}
.gtp-method__title-line--brand {
  color: var(--cyan);
  font-size: 1.42em;
  line-height: 1;
  margin-top: 10px;
  letter-spacing: 0.005em;
  text-shadow: 0 0 22px rgba(94, 234, 255, 0.22);
  white-space: nowrap;
}

/* Lead — emphasis sentence */
.gtp-method__lead {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.55;
  font-weight: 600;
  color: rgba(228, 236, 250, 0.95);
  margin: 0 0 18px;
  max-width: 520px;
}
.gtp-method__lead-accent {
  color: var(--cyan);
  font-weight: 700;
}

/* Paragraph */
.gtp-method__text {
  font-family: var(--font-body);
  font-size: clamp(14.5px, 1.05vw, 16.5px);
  line-height: 1.75;
  color: rgba(220, 230, 245, 0.78);
  margin: 0 0 36px;
  max-width: 520px;
}

/* 3 micro pillars */
.gtp-method__pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(94, 234, 255, 0.18);
  padding-top: 20px;
}
.gtp-method__pillar {
  padding: 4px 16px;
  border-inline-start: 1px solid rgba(94, 234, 255, 0.16);
}
.gtp-method__pillar:first-child {
  border-inline-start: none;
  padding-inline-start: 0;
}
.gtp-method__pillar:last-child {
  padding-inline-end: 0;
}
.gtp-method__pillar-title {
  margin: 0 0 6px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--cyan);
}
.gtp-method__pillar-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(220, 230, 245, 0.72);
}

/* === LEFT: glass panel === */
.gtp-method__panel {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  direction: rtl;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(20, 32, 52, 0.55), rgba(8, 14, 26, 0.55)),
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(94, 234, 255, 0.10), transparent 60%);
  border: 1px solid rgba(94, 234, 255, 0.26);
  box-shadow:
    0 36px 80px -22px rgba(4, 12, 24, 0.70),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 60px rgba(94, 234, 255, 0.05),
    0 0 40px rgba(94, 234, 255, 0.08);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  overflow: hidden;
  transform: rotate(-0.6deg);
  transition: transform .35s ease;
}
.gtp-method__panel-inner {
  position: relative;
  z-index: 2;
  padding: 30px 28px 24px;
}

/* Corner bolts */
.gtp-method__bolt {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(168, 242, 255, 1) 0%, rgba(94, 234, 255, 0.55) 55%, rgba(20, 40, 70, 0.85) 95%);
  box-shadow:
    0 0 6px rgba(94, 234, 255, 0.55),
    inset 0 0 2px rgba(0, 0, 0, 0.45);
  z-index: 3;
  animation: gtpMethodBolt 3.6s ease-in-out infinite;
}
.gtp-method__bolt--tl { top: 12px; left: 12px;  }
.gtp-method__bolt--tr { top: 12px; right: 12px; animation-delay: 0.9s; }
.gtp-method__bolt--bl { bottom: 12px; left: 12px;  animation-delay: 1.8s; }
.gtp-method__bolt--br { bottom: 12px; right: 12px; animation-delay: 2.7s; }
@keyframes gtpMethodBolt {
  0%, 100% { box-shadow: 0 0 5px rgba(94, 234, 255, 0.40), inset 0 0 2px rgba(0,0,0,0.45); }
  50%      { box-shadow: 0 0 11px rgba(94, 234, 255, 0.72), inset 0 0 2px rgba(0,0,0,0.45); }
}

/* Shimmer sweep */
.gtp-method__shimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(168, 242, 255, 0.045) 47%,
    rgba(168, 242, 255, 0.10) 50%,
    rgba(168, 242, 255, 0.045) 53%,
    transparent 65%);
  background-size: 300% 100%;
  background-position: 110% 0;
  mix-blend-mode: screen;
  animation: gtpMethodShimmer 7.5s ease-in-out infinite;
  z-index: 1;
}
@keyframes gtpMethodShimmer {
  0%   { background-position: 110% 0; }
  50%  { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}

/* Panel head */
.gtp-method__panel-head {
  padding-bottom: 18px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(94, 234, 255, 0.18);
}
.gtp-method__panel-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.gtp-method__panel-sub {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(15.5px, 1.35vw, 18px);
  color: rgba(244, 248, 255, 0.94);
  letter-spacing: -0.005em;
}

/* Rows */
.gtp-method__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gtp-method__row {
  display: grid;
  grid-template-columns: 42px 36px 1fr;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid rgba(94, 234, 255, 0.12);
}
.gtp-method__row:first-of-type { border-top: none; }

.gtp-method__num {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 23px;
  letter-spacing: 0.02em;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(94, 234, 255, 0.28);
  text-align: center;
  line-height: 1;
}
.gtp-method__mark {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 30%, rgba(94, 234, 255, 0.10), rgba(94, 234, 255, 0.02) 70%);
  border: 1px solid rgba(94, 234, 255, 0.24);
  color: var(--cyan);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 10px rgba(94, 234, 255, 0.08);
  flex: 0 0 auto;
}
.gtp-method__mark svg { display: block; width: 22px; height: 22px; }

.gtp-method__row-copy { min-width: 0; }
.gtp-method__row-title {
  margin: 0 0 4px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -0.005em;
  color: #FFFFFF;
}
.gtp-method__row-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(220, 230, 245, 0.74);
}

/* Panel foot */
.gtp-method__panel-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(94, 234, 255, 0.18);
}
.gtp-method__foot-text {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  color: rgba(168, 242, 255, 0.88);
  white-space: nowrap;
}
.gtp-method__foot-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to left, rgba(94, 234, 255, 0.42), transparent);
}

/* === Responsive === */
@media (max-width: 1180px) {
  .gtp-method__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 36px; }
  .gtp-method__title { font-size: clamp(30px, 4vw, 44px); }
  .gtp-method__panel-inner { padding: 26px 22px 20px; }
}
@media (max-width: 900px) {
  .gtp-method__grid {
    grid-template-columns: 1fr;
    direction: rtl;
    gap: 48px;
    align-items: start;
  }
  .gtp-method__content,
  .gtp-method__panel {
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
    min-height: 0;
    max-width: 100%;
    margin-inline-start: 0;
  }
  .gtp-method__panel { transform: none; }
  .gtp-method__shimmer { display: none; }
  .gtp-method__bolt { animation: none; opacity: 0.85; }
}

@media (max-width: 767.98px) {
  .gtp-method { padding: 72px 18px 80px; }

  .gtp-method__eyebrow { margin-bottom: 22px; gap: 10px; }
  .gtp-method__eyebrow-line { width: 28px; }
  .gtp-method__eyebrow-text { font-size: 11px; letter-spacing: 0.20em; }

  .gtp-method__title { font-size: clamp(30px, 8vw, 40px); margin-bottom: 22px; line-height: 1.1; max-width: 100%; }
  .gtp-method__title-line:not(.gtp-method__title-line--brand) { white-space: normal; }
  .gtp-method__title-line--brand { font-size: 1.35em; margin-top: 8px; }

  .gtp-method__lead { font-size: 16px; line-height: 1.55; }
  .gtp-method__text { font-size: 14px; margin-bottom: 28px; }

  /* Pillars stack vertically with hairlines */
  .gtp-method__pillars {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 16px;
  }
  .gtp-method__pillar {
    padding: 14px 0;
    border-inline-start: none;
    border-top: 1px solid rgba(94, 234, 255, 0.14);
  }
  .gtp-method__pillar:first-child { border-top: none; padding-top: 4px; }

  /* Panel */
  .gtp-method__panel { border-radius: 18px; }
  .gtp-method__panel-inner { padding: 22px 16px 18px; }

  .gtp-method__bolt { width: 7px; height: 7px; }
  .gtp-method__bolt--tl, .gtp-method__bolt--tr { top: 10px; }
  .gtp-method__bolt--bl, .gtp-method__bolt--br { bottom: 10px; }
  .gtp-method__bolt--tl, .gtp-method__bolt--bl { left: 10px; }
  .gtp-method__bolt--tr, .gtp-method__bolt--br { right: 10px; }

  .gtp-method__panel-label { font-size: 10px; letter-spacing: 0.20em; margin-bottom: 8px; }
  .gtp-method__panel-sub { font-size: 15px; }

  .gtp-method__row {
    grid-template-columns: 32px 30px 1fr;
    gap: 11px;
    padding: 14px 0;
  }
  .gtp-method__num { font-size: 18px; }
  .gtp-method__mark { width: 30px; height: 30px; border-radius: 8px; }
  .gtp-method__mark svg { width: 18px; height: 18px; }
  .gtp-method__row-title { font-size: 14.5px; }
  .gtp-method__row-text { font-size: 12.5px; line-height: 1.5; }

  .gtp-method__foot-text { font-size: 9.5px; letter-spacing: 0.22em; }

  .gtp-method__glow--a { width: 240px; height: 240px; }
  .gtp-method__glow--b { width: 220px; height: 220px; }
  .gtp-method__dust--3, .gtp-method__dust--5 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gtp-method__shimmer,
  .gtp-method__bolt,
  .gtp-method__dust { animation: none !important; }
  .gtp-method__bolt { opacity: 0.85; }
  .gtp-method__dust { opacity: 0.55; }
}

/* ============================================================
   SECTION 4 — LEAD CAPTURE (v41 — ref-faithful rebuild)
   Stage: lens atmosphere capsule + top/bottom cyan arcs.
   Grid: 2-col desktop (copy/form right column, visual spans
   left column both rows). Mobile: copy → visual → form.
   Visual: 4 HUD layers (dot grid / radar / bars / line) BEHIND
   color-graded portrait with halo + bottom fade for integration.
   ============================================================ */

.gtp-lead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #E6EEF8;
  background: var(--gtp-hero-flat-bg);
}

.gtp-lead__stage {
  position: relative;
  padding: clamp(70px, 7vw, 110px) clamp(20px, 4vw, 64px) clamp(90px, 9vw, 140px);
  isolation: isolate;
}

/* --- Lens atmosphere (capsule glow) — radial stack creates the
   "you're looking into a lit chamber" feel. v41 baseline. --- */
.gtp-lead__lens {
  position: absolute;
  inset: clamp(20px, 3vw, 60px) clamp(30px, 5vw, 90px);
  z-index: 0;
  pointer-events: none;
  border-radius: 50% / 38%;
  background:
    radial-gradient(ellipse 70% 55% at 72% 52%, rgba(94, 234, 255, 0.20), transparent 58%),
    radial-gradient(ellipse 85% 62% at 50% 52%, rgba(7, 70, 105, 0.36), transparent 68%),
    radial-gradient(ellipse 95% 70% at 50% 52%, rgba(3, 12, 28, 0.70), transparent 76%);
  filter: blur(2px);
}

/* --- Top + bottom cyan arcs (NOT a full ellipse). v41 baseline +
   small negative offset so they sit just outside the content edge. --- */
.gtp-lead__arc {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(120px, 14vw, 200px);
  z-index: 1;
  pointer-events: none;
  filter:
    drop-shadow(0 0 6px rgba(94, 234, 255, 0.55))
    drop-shadow(0 0 18px rgba(94, 234, 255, 0.22));
}
.gtp-lead__arc--top    { top: clamp(-18px, -1.2vw, -8px); }
.gtp-lead__arc--bottom { bottom: clamp(-22px, -1.4vw, -10px); }

/* --- Inner / grid --- */
.gtp-lead__inner {
  position: relative;
  z-index: 3;
  max-width: 1320px;
  margin: 0 auto;
}
.gtp-lead__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "copy   visual"
    "form   visual";
  column-gap: clamp(36px, 4vw, 64px);
  row-gap: clamp(28px, 3vw, 44px);
  align-items: start;
}
/* RTL: column 1 = right side (copy/form), column 2 = left side (visual) */
.gtp-lead__copy       { grid-area: copy;   align-self: end; }
.gtp-lead__form-panel { grid-area: form;   align-self: start; }
.gtp-lead__visual     { grid-area: visual; align-self: center; min-height: 580px; }

/* === COPY column === */
.gtp-lead__copy {
  text-align: right;
  max-width: 540px;
  margin-inline-start: auto;
}
.gtp-lead__badge {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--cyan);
  background: rgba(8, 14, 26, 0.55);
  border: 1px solid rgba(94, 234, 255, 0.40);
  box-shadow:
    0 0 14px rgba(94, 234, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  margin-bottom: 22px;
  letter-spacing: 0.005em;
}
.gtp-lead__title {
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: #F4F7FB;
}
.gtp-lead__title-line { display: block; }
.gtp-lead__title-line--accent {
  color: var(--cyan);
  text-shadow: 0 0 22px rgba(94, 234, 255, 0.28);
  margin-top: 4px;
}
.gtp-lead__brand { color: var(--cyan); }
.gtp-lead__text {
  margin: 0 0 22px;
  font-family: var(--font-body);
  font-size: clamp(14.5px, 1vw, 16px);
  line-height: 1.7;
  color: rgba(220, 230, 245, 0.82);
}
.gtp-lead__trust {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gtp-lead__trust-icon {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan);
}
.gtp-lead__trust-text {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(220, 230, 245, 0.80);
}

/* === VISUAL column — HUD layers + portrait === */
.gtp-lead__visual {
  position: relative;
  display: block;
  isolation: isolate;
}
/* Cyan halo behind portrait */
.gtp-lead__visual::before {
  content: "";
  position: absolute;
  inset: 8% 4% 14%;
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse 65% 60% at 50% 45%,
    rgba(94, 234, 255, 0.22) 0%,
    rgba(94, 234, 255, 0.08) 38%,
    transparent 72%);
  filter: blur(6px);
}
/* Bottom dark fade — fuses portrait base into floor */
.gtp-lead__visual::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30%;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(7, 17, 31, 0.55) 60%,
    rgba(7, 17, 31, 0.92) 100%);
}

/* HUD layer 1 — dot matrix */
.gtp-lead__hud-grid {
  position: absolute;
  inset: 12% 8% 18%;
  z-index: 2;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(168, 242, 255, 0.30) 1px, transparent 1.6px);
  background-size: 18px 18px;
  background-position: 0 0;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 35%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 35%, transparent 78%);
}

/* HUD layer 2 — radar circles (renamed from .gtp-lead__radar) */
.gtp-lead__hud-radar {
  position: absolute;
  inset: 6% 6% 12%;
  z-index: 2;
  width: auto; height: auto;
  color: var(--cyan);
  opacity: 0.40;
  pointer-events: none;
}

/* HUD layer 3 — bar chart (kept original class .gtp-lead__data-bars) */
.gtp-lead__data-bars {
  position: absolute;
  left: 6%; right: 6%;
  bottom: 14%;
  width: auto;
  height: 28%;
  z-index: 2;
  color: var(--cyan);
  opacity: 0.55;
  pointer-events: none;
}

/* HUD layer 4 — trend line with nodes (kept original class .gtp-lead__data-chart) */
.gtp-lead__data-chart {
  position: absolute;
  left: 10%; right: 10%;
  top: 14%;
  width: auto;
  height: 22%;
  z-index: 2;
  color: var(--cyan);
  opacity: 0.78;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(94, 234, 255, 0.45));
}

/* Portrait — color-graded for integration */
.gtp-lead__portrait {
  position: relative;
  z-index: 4;
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 540px;
  height: auto;
  max-height: 640px;
  object-fit: contain;
  object-position: center bottom;
  filter:
    drop-shadow(0 32px 44px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 28px rgba(94, 234, 255, 0.10))
    saturate(0.92) contrast(1.05) brightness(0.88);
}

/* === FORM PANEL === */
.gtp-lead__form-panel {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 540px;
  margin-inline-start: auto;
  padding: clamp(20px, 2.2vw, 30px);
  border-radius: 18px;
  background: rgba(8, 14, 26, 0.58);
  border: 1px solid rgba(94, 234, 255, 0.22);
  box-shadow:
    0 24px 60px -20px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(94, 234, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.gtp-lead__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gtp-lead__field {
  position: relative;
  display: block;
}
.gtp-lead__field-icon {
  position: absolute;
  top: 50%;
  left: 18px;        /* physical left — icon sits on LEFT regardless of RTL */
  right: auto;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(168, 242, 255, 0.85);
  pointer-events: none;
  transition: color 0.2s ease;
}
.gtp-lead__field-icon svg { display: block; width: 100%; height: 100%; }
.gtp-lead__input {
  display: block;
  width: 100%;
  height: 52px;
  padding-right: 18px;  /* text starts here (RTL right edge) */
  padding-left: 54px;   /* leaves room for icon on physical left */
  border-radius: 12px;
  background: rgba(8, 14, 26, 0.55);
  border: 1px solid rgba(94, 234, 255, 0.30);
  color: #F4F7FB;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  -webkit-appearance: none;
  appearance: none;
  text-align: right;
  direction: rtl;
}
.gtp-lead__input::placeholder {
  color: rgba(220, 230, 245, 0.55);
  font-weight: 500;
}
.gtp-lead__input:hover { border-color: rgba(94, 234, 255, 0.55); }
.gtp-lead__input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(94, 234, 255, 0.18);
  background: rgba(8, 14, 26, 0.78);
}
.gtp-lead__field:focus-within .gtp-lead__field-icon { color: var(--cyan); }

.gtp-lead__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  cursor: pointer;
  user-select: none;
}
.gtp-lead__checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  flex: 0 0 auto;
  margin-top: 2px;
  border-radius: 4px;
  background: rgba(8, 14, 26, 0.75);
  border: 1.5px solid rgba(94, 234, 255, 0.45);
  position: relative;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.gtp-lead__checkbox:hover { border-color: var(--cyan); }
.gtp-lead__checkbox:checked {
  background: var(--cyan);
  border-color: var(--cyan);
}
.gtp-lead__checkbox:checked::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 6px; height: 11px;
  border-right: 2px solid #07111F;
  border-bottom: 2px solid #07111F;
  transform: rotate(45deg);
}
.gtp-lead__consent-text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  color: rgba(220, 230, 245, 0.82);
}

.gtp-lead__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
  padding: 16px 26px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: #06121E;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, #7BEFFF 0%, #38D6F0 60%, #2BBFD9 100%);
  border: 1px solid rgba(11, 18, 32, 0.10);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .25s ease, filter .2s ease;
  box-shadow:
    0 16px 32px -8px rgba(43, 191, 217, 0.40),
    0 0 24px rgba(94, 234, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.70);
}
.gtp-lead__submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 20px 40px -8px rgba(43, 191, 217, 0.55),
    0 0 32px rgba(94, 234, 255, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.gtp-lead__submit:active { transform: translateY(0); }

/* === Responsive === */
@media (max-width: 1180px) {
  .gtp-lead__grid { column-gap: 32px; }
  .gtp-lead__visual { min-height: 520px; }
  .gtp-lead__portrait { max-width: 460px; max-height: 560px; }
}

@media (max-width: 900px) {
  /* Mobile order: copy → visual → form */
  .gtp-lead__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "copy"
      "visual"
      "form";
    row-gap: 28px;
  }
  .gtp-lead__copy       { align-self: start; max-width: 100%; margin: 0; }
  .gtp-lead__visual     { min-height: 440px; align-self: center; }
  .gtp-lead__form-panel { max-width: 100%; margin: 0; }
}

@media (max-width: 767.98px) {
  .gtp-lead__stage { padding: 54px 18px 80px; }
  .gtp-lead__badge { font-size: 12px; padding: 7px 14px; margin-bottom: 18px; }
  .gtp-lead__title { font-size: clamp(22px, 6.5vw, 28px); margin-bottom: 14px; }
  .gtp-lead__text  { font-size: 13.5px; line-height: 1.65; margin-bottom: 18px; }
  .gtp-lead__trust-text { font-size: 12.5px; line-height: 1.5; }

  .gtp-lead__visual { min-height: 360px; }
  .gtp-lead__portrait { max-width: 300px; max-height: 400px; }
  .gtp-lead__hud-grid,
  .gtp-lead__hud-radar,
  .gtp-lead__data-bars,
  .gtp-lead__data-chart { opacity: 0.45; }

  .gtp-lead__form-panel {
    z-index: 4;
    padding: 18px;
    border-radius: 14px;
  }
  .gtp-lead__input { height: 46px; font-size: 14px; padding-right: 16px; padding-left: 48px; }
  .gtp-lead__field-icon { left: 14px; width: 18px; height: 18px; }
  .gtp-lead__submit { padding: 14px 22px; font-size: 15px; }

  /* Arcs — visible but constrained, small negative offset to clear content */
  .gtp-lead__arc {
    width: 170vw;
    left: 50%;
    transform: translateX(-50%);
    height: 140px;
    opacity: 0.55;
    z-index: 1;
  }
  .gtp-lead__arc--top    { top: -26px; }
  .gtp-lead__arc--bottom { bottom: -34px; }

  /* Lens — v41-style on mobile, gentle */
  .gtp-lead__lens {
    inset: 20px 12px;
    opacity: 0.72;
  }
}

/* ============================================================
   SECTION 5 — CLIENTS / TRUSTED BY (light premium panel)
   Dark-to-light wave intro, logo grid grayscale → color on hover.
   ============================================================ */
.gtp-clients {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 10% 18%, rgba(94, 234, 255, .12), transparent 30%),
    radial-gradient(circle at 90% 20%, rgba(94, 234, 255, .10), transparent 32%),
    linear-gradient(180deg, #F7FCFF 0%, #EEF8FC 100%);
  color: #07111F;
}

.gtp-clients::before,
.gtp-clients::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 1px solid rgba(24, 207, 232, .16);
  opacity: .55;
  pointer-events: none;
  z-index: 1;
}

.gtp-clients::before {
  left: -110px;
  top: 170px;
}

.gtp-clients::after {
  right: -110px;
  top: 210px;
}

.gtp-clients__wave {
  position: absolute;
  inset: -1px 0 auto 0;
  height: 95px;
  z-index: 1;
  pointer-events: none;
  background: #07111F;
  clip-path: ellipse(82% 62% at 50% 0%);
}

.gtp-clients__wave::after {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 4px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(94, 234, 255, .9), transparent);
  opacity: .75;
  transform: rotate(-1.4deg);
}

.gtp-clients__inner {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 128px 0 86px;
  text-align: center;
}

.gtp-clients__eyebrow {
  margin: 0 0 16px;
  font-size: 13px;
  letter-spacing: .28em;
  font-weight: 800;
  color: #18CFE8;
  text-transform: uppercase;
}

.gtp-clients__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.05;
  font-weight: 800;
  color: #07111F;
  letter-spacing: -0.04em;
}

.gtp-clients__brand {
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
  color: #18CFE8;
}

.gtp-clients__subtitle {
  max-width: 800px;
  margin: 16px auto 0;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.75;
  color: rgba(7, 17, 31, .74);
}

.gtp-clients__grid {
  margin-top: 42px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.gtp-clients__logo-card {
  min-height: 132px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(7, 17, 31, .10);
  box-shadow:
    0 16px 38px rgba(7, 17, 31, .10),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 26px;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease;
}

.gtp-clients__logo-card img,
.gtp-clients__logo-img {
  display: block;
  max-width: 92%;
  max-height: 78px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) contrast(1.08);
  opacity: .9;
  transform: scale(var(--logo-scale, 1));
  transition:
    filter .25s ease,
    opacity .25s ease,
    transform .25s ease;
}

.gtp-clients__logo-img--deby     { --logo-scale: 1.08; }
.gtp-clients__logo-img--shashka  { --logo-scale: 1.22; }
.gtp-clients__logo-img--lby      { --logo-scale: 1.20; }
.gtp-clients__logo-img--louiz    { --logo-scale: 1.22; }
.gtp-clients__logo-img--buybuy   { --logo-scale: 1.20; }
.gtp-clients__logo-img--lait     { --logo-scale: 1.22; }
.gtp-clients__logo-img--alonmor  { --logo-scale: 1.34; }
.gtp-clients__logo-img--hasod    { --logo-scale: 1.16; }
.gtp-clients__logo-img--oligarch { --logo-scale: 1.20; }

.gtp-clients__logo-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, .96);
  border-color: rgba(24, 207, 232, .35);
  box-shadow:
    0 24px 60px rgba(7, 17, 31, .12),
    0 0 0 1px rgba(24, 207, 232, .10);
}

.gtp-clients__logo-card:hover img,
.gtp-clients__logo-card:hover .gtp-clients__logo-img {
  filter: grayscale(0) contrast(1);
  opacity: 1;
  transform: scale(calc(var(--logo-scale, 1) * 1.025));
}

.gtp-clients__note {
  margin: 34px auto 0;
  max-width: 820px;
  font-size: clamp(17px, 1.25vw, 21px);
  line-height: 1.55;
  font-weight: 600;
  color: rgba(7, 17, 31, .82);
}

.gtp-clients__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  min-height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  background: linear-gradient(180deg, #5EEAFF 0%, #18CFE8 100%);
  color: #07111F;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  box-shadow:
    0 16px 34px rgba(24, 207, 232, .24),
    inset 0 1px 0 rgba(255, 255, 255, .55);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease;
}

.gtp-clients__cta::after {
  content: "←";
  display: inline-block;
  margin-inline-start: 8px;
  font-size: 17px;
  line-height: 1;
  transform: translateY(-1px);
}

.gtp-clients__cta:hover {
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow:
    0 20px 46px rgba(24, 207, 232, .32),
    inset 0 1px 0 rgba(255, 255, 255, .65);
}

@media (max-width: 1024px) {
  .gtp-clients__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .gtp-clients__wave {
    height: 78px;
    clip-path: ellipse(105% 62% at 50% 0%);
  }

  .gtp-clients__inner {
    width: min(100% - 32px, 520px);
    padding: 106px 0 64px;
  }

  .gtp-clients::before,
  .gtp-clients::after {
    display: none;
  }

  .gtp-clients__eyebrow {
    font-size: 11px;
    letter-spacing: .18em;
    line-height: 1.5;
  }

  .gtp-clients__title {
    font-family: var(--font-head);
    font-size: clamp(31px, 9vw, 42px);
    line-height: 1.12;
    letter-spacing: -0.045em;
  }

  .gtp-clients__brand {
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    unicode-bidi: isolate;
  }

  .gtp-clients__subtitle {
    font-size: 17px;
    line-height: 1.75;
    margin-top: 16px;
  }

  .gtp-clients__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 30px;
  }

  .gtp-clients__logo-card {
    min-height: 108px;
    padding: 18px;
  }

  .gtp-clients__logo-card img,
  .gtp-clients__logo-img {
    max-height: 62px;
    max-width: 92%;
    opacity: .92;
  }

  .gtp-clients__logo-img--shashka { --logo-scale: 1.26; }
  .gtp-clients__logo-img--buybuy  { --logo-scale: 1.24; }
  .gtp-clients__logo-img--lait    { --logo-scale: 1.26; }
  .gtp-clients__logo-img--alonmor { --logo-scale: 1.38; }

  .gtp-clients__note {
    margin-top: 28px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.65;
  }

  .gtp-clients__cta {
    margin-top: 22px;
    min-height: 50px;
    padding: 0 24px;
    font-size: 15px;
    width: auto;
    max-width: 100%;
  }
}

/* ============================================================
   SECTION 6 — FAQ (objections before contact)
   Dark navy premium · 2-col glass accordions · CTA glass card.
   ============================================================ */
.gtp-faq {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 60% 50% at 12% 12%, rgba(94, 234, 255, 0.10), transparent 55%),
    radial-gradient(ellipse 70% 55% at 90% 90%, rgba(94, 234, 255, 0.08), transparent 60%),
    linear-gradient(180deg, #050D1A 0%, #07111F 60%, #050B16 100%);
  color: #E6EEF8;
  padding: clamp(80px, 8vw, 130px) clamp(20px, 4vw, 64px) clamp(96px, 9vw, 140px);
}

.gtp-faq::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(94, 234, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 234, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 30%, transparent 75%);
  opacity: 0.55;
}

.gtp-faq__inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

.gtp-faq__eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
}
.gtp-faq__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #F4F7FB;
}
.gtp-faq__subtitle {
  max-width: 760px;
  margin: 16px auto 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.1vw, 17.5px);
  line-height: 1.75;
  color: rgba(220, 230, 245, 0.78);
}

.gtp-faq__grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  text-align: right;
}

.gtp-faq__item {
  position: relative;
  align-self: start;
  border-radius: 16px;
  background: rgba(10, 18, 32, 0.62);
  border: 1px solid rgba(94, 234, 255, 0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.gtp-faq__item:hover {
  border-color: rgba(94, 234, 255, 0.34);
}
.gtp-faq__item:has(.gtp-faq__button[aria-expanded="true"]) {
  border-color: rgba(94, 234, 255, 0.48);
  background: rgba(12, 22, 38, 0.78);
  box-shadow:
    0 18px 44px -18px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(94, 234, 255, 0.10);
}

.gtp-faq__button {
  display: grid;
  grid-template-columns: 34px 1fr 20px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  border: 0;
  background: transparent;
  color: #F4F7FB;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  text-align: right;
  cursor: pointer;
  border-radius: 16px;
}
.gtp-faq__button:focus-visible {
  outline: 2px solid rgba(94, 234, 255, 0.55);
  outline-offset: 2px;
}

.gtp-faq__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(94, 234, 255, .35);
  background:
    radial-gradient(circle at 50% 20%, rgba(94, 234, 255, .18), transparent 65%),
    rgba(94, 234, 255, .06);
  color: #5EEAFF;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  box-shadow:
    0 0 18px rgba(94, 234, 255, .08),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  flex: 0 0 auto;
}
.gtp-faq__button[aria-expanded="true"] .gtp-faq__icon {
  background:
    radial-gradient(circle at 50% 20%, rgba(94, 234, 255, .32), transparent 65%),
    rgba(94, 234, 255, .10);
  border-color: rgba(94, 234, 255, .62);
  color: #A8F2FF;
}

.gtp-faq__question {
  font-family: var(--font-head);
  font-size: 16px;
  line-height: 1.45;
  color: #F4F7FB;
  font-weight: 600;
}

.gtp-faq__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: rgba(168, 242, 255, 0.78);
  transition: transform .25s ease, color .25s ease;
}
.gtp-faq__chevron svg { width: 100%; height: 100%; display: block; }
.gtp-faq__button[aria-expanded="true"] .gtp-faq__chevron {
  transform: rotate(180deg);
  color: var(--cyan);
}

.gtp-faq__panel {
  padding: 0 22px 18px 56px;
}
.gtp-faq__panel[hidden] { display: none; }

.gtp-faq__answer {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(220, 230, 245, 0.82);
}

/* CTA card */
.gtp-faq__cta {
  position: relative;
  margin: 58px auto 0;
  max-width: 880px;
  padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 52px);
  border-radius: 22px;
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(94, 234, 255, 0.10), transparent 60%),
    rgba(10, 18, 32, 0.65);
  border: 1px solid rgba(94, 234, 255, 0.28);
  box-shadow:
    0 28px 64px -28px rgba(0, 0, 0, 0.65),
    0 0 34px rgba(94, 234, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-align: center;
}
.gtp-faq__cta-title {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.3;
  font-weight: 800;
  color: #F4F7FB;
  letter-spacing: -0.01em;
}
.gtp-faq__cta-text {
  margin: 0 auto 22px;
  max-width: 640px;
  font-family: var(--font-body);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.7;
  color: rgba(220, 230, 245, 0.80);
}
.gtp-faq__cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 32px;
  border-radius: 999px;
  background: linear-gradient(180deg, #5EEAFF 0%, #18CFE8 100%);
  color: #07111F;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  box-shadow:
    0 18px 38px rgba(24, 207, 232, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.gtp-faq__cta-button:hover {
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow:
    0 22px 48px rgba(24, 207, 232, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

@media (max-width: 900px) {
  .gtp-faq__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 767px) {
  .gtp-faq {
    padding: 62px 18px 80px;
  }
  .gtp-faq__title { font-size: clamp(26px, 7.5vw, 34px); letter-spacing: -0.03em; }
  .gtp-faq__subtitle { font-size: 14.5px; line-height: 1.7; }
  .gtp-faq__grid { margin-top: 32px; }

  .gtp-faq__button {
    grid-template-columns: 32px 1fr 18px;
    gap: 12px;
    padding: 16px 16px;
    font-size: 15px;
  }
  .gtp-faq__icon { width: 32px; height: 32px; border-radius: 11px; font-size: 11px; }
  .gtp-faq__chevron { width: 18px; height: 18px; }
  .gtp-faq__question { font-size: 15px; line-height: 1.4; }
  .gtp-faq__panel { padding: 0 18px 16px 50px; }
  .gtp-faq__answer { font-size: 13.5px; line-height: 1.7; }

  .gtp-faq__cta { margin-top: 36px; padding: 24px 20px; border-radius: 18px; }
  .gtp-faq__cta-title { font-size: 19px; }
  .gtp-faq__cta-text  { font-size: 13.5px; line-height: 1.65; margin-bottom: 18px; }
  .gtp-faq__cta-button { min-height: 50px; padding: 0 26px; font-size: 15px; width: 100%; }
}

/* ============================================================
   FOOTER — premium dark continuation
   ============================================================ */
.gtp-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 55% 80% at 50% 0%, rgba(94, 234, 255, .08), transparent 62%),
    linear-gradient(180deg, #050B16 0%, #07111F 48%, #040A13 100%);
  color: #E6EEF8;
  border-top: 1px solid rgba(94, 234, 255, .14);
}
.gtp-footer__glow {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(94, 234, 255, .78), transparent);
  box-shadow: 0 0 24px rgba(94, 234, 255, .22);
}
.gtp-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(94, 234, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 234, 255, .035) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 0%, #000 20%, transparent 76%);
          mask-image: radial-gradient(ellipse 72% 70% at 50% 0%, #000 20%, transparent 76%);
  opacity: .5;
}

.gtp-footer__inner {
  position: relative;
  z-index: 2;
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
  padding: 56px 0 24px;
}

/* === Top strip — 3 equal service groups, centered === */
.gtp-footer__services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  justify-items: center;
  text-align: center;
  padding-bottom: 34px;
  margin-bottom: 34px;
  border-bottom: 0;
  position: relative;
}
.gtp-footer__services::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230, 238, 248, .12), transparent);
  opacity: .65;
  pointer-events: none;
}

.gtp-footer__svc-col {
  width: min(100%, 300px);
  text-align: center;
}

.gtp-footer__svc-title {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--cyan);
  text-transform: uppercase;
  text-align: center;
}

/* === Info row — 3 equal centered columns === */
.gtp-footer__info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  justify-items: center;
  text-align: center;
}

.gtp-footer__brand,
.gtp-footer__nav,
.gtp-footer__contact {
  width: min(100%, 300px);
}

.gtp-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.gtp-footer__nav,
.gtp-footer__contact { text-align: center; }

.gtp-footer__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin-bottom: 14px;
}
.gtp-footer__logo img {
  display: block;
  width: clamp(145px, 12vw, 165px);
  height: auto;
  object-fit: contain;
}

.gtp-footer__brand-text {
  max-width: 280px;
  margin: 0 auto 18px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: rgba(230, 238, 248, .68);
}

.gtp-footer__social {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.gtp-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(94, 234, 255, .24);
  background: rgba(94, 234, 255, .04);
  color: rgba(230, 238, 248, .80);
  text-decoration: none;
  transition: color .22s ease, border-color .22s ease, background .22s ease, transform .22s ease;
}
.gtp-footer__social a:hover {
  color: var(--cyan);
  border-color: rgba(94, 234, 255, .55);
  background: rgba(94, 234, 255, .10);
  transform: translateY(-2px);
}
.gtp-footer__social svg {
  width: 16px;
  height: 16px;
  display: block;
}

.gtp-footer__title {
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 800;
  color: #F4F7FB;
}

.gtp-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
}
.gtp-footer__contact-list a { justify-content: center; }
.gtp-footer__list a,
.gtp-footer__legal a {
  color: rgba(230, 238, 248, .70);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.55;
  transition: color .2s ease, opacity .2s ease;
}
.gtp-footer__list a:hover,
.gtp-footer__legal a:hover { color: var(--cyan); }

.gtp-footer__contact-list a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.gtp-footer__mini-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(94, 234, 255, .24);
  color: var(--cyan);
  background: rgba(94, 234, 255, .06);
  flex: 0 0 auto;
}
.gtp-footer__mini-icon svg { width: 14px; height: 14px; display: block; }
.gtp-footer__mini-icon--wa svg { width: 16px; height: 16px; }

/* === Bottom legal row === */
.gtp-footer__bottom {
  margin-top: 36px;
  padding-top: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.gtp-footer__bottom::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230, 238, 248, .12), transparent);
  pointer-events: none;
}
.gtp-footer__copyright {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: rgba(230, 238, 248, .58);
}
.gtp-footer__legal {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.gtp-footer__legal a { font-size: 13.5px; color: rgba(230, 238, 248, .58); }

@media (max-width: 1024px) {
  .gtp-footer__services { row-gap: 36px; }
}

@media (max-width: 767px) {
  .gtp-footer__inner {
    width: min(100% - 32px, 540px);
    padding: 52px 0 26px;
    text-align: center;
  }
  .gtp-footer__services,
  .gtp-footer__info {
    grid-template-columns: 1fr;
    gap: 26px;
    justify-items: center;
    text-align: center;
  }
  .gtp-footer__services {
    padding-bottom: 28px;
    margin-bottom: 28px;
  }
  .gtp-footer__brand,
  .gtp-footer__nav,
  .gtp-footer__contact,
  .gtp-footer__svc-col {
    width: min(100%, 340px);
    text-align: center;
  }
  .gtp-footer__brand { align-items: center; }
  .gtp-footer__logo img { width: clamp(120px, 34vw, 140px); }
  .gtp-footer__brand-text { font-size: 14px; line-height: 1.75; max-width: 280px; }

  .gtp-footer__list { justify-items: center; }
  .gtp-footer__contact-list a { justify-content: center; }

  .gtp-footer__bottom {
    margin-top: 28px;
    padding-top: 20px;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
  }
  .gtp-footer__legal {
    justify-content: center;
    gap: 14px;
  }
}

/* ============================================================
   SINGLE POST TEMPLATE  (scoped .gtp-post*)
   Preview-only here; CSS ships verbatim to mu-plugin in prod.
   ============================================================ */
.gtp-post {
  position: relative;
  background:
    radial-gradient(ellipse 60% 50% at 12% 8%, rgba(94, 234, 255, .08), transparent 55%),
    linear-gradient(180deg, #050B16 0%, #07111F 50%, #040A13 100%);
  color: #E6EEF8;
  padding-bottom: clamp(48px, 6vw, 80px);
  isolation: isolate;
}

/* ---- HERO ---- */
.gtp-post__hero {
  position: relative;
  padding: clamp(48px, 6vw, 88px) clamp(20px, 4vw, 64px) clamp(28px, 3vw, 44px);
}
.gtp-post__hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.gtp-post__hero-meta { text-align: right; }

.gtp-post__category {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(94, 234, 255, .06);
  border: 1px solid rgba(94, 234, 255, .28);
  text-decoration: none;
}
.gtp-post__category:hover { background: rgba(94, 234, 255, .12); }

.gtp-post__title {
  margin: 0 0 16px;
  font-family: var(--font-head);
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #F4F7FB;
}

.gtp-post__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(220, 230, 245, .72);
}
.gtp-post__sep { opacity: .55; }
.gtp-post__date { color: rgba(220, 230, 245, .82); }

.gtp-post__excerpt {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.1vw, 17.5px);
  line-height: 1.75;
  color: rgba(220, 230, 245, .80);
}

.gtp-post__featured {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 3;
  background: rgba(8, 14, 26, .55);
  border: 1px solid rgba(94, 234, 255, .18);
  box-shadow:
    0 28px 60px -28px rgba(0, 0, 0, .65),
    0 0 30px rgba(94, 234, 255, .06);
}
.gtp-post__featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- BODY wrapper ---- */
.gtp-post__body {
  max-width: 860px;
  margin-inline: auto;
  padding: clamp(24px, 3vw, 36px) clamp(20px, 4vw, 32px) 0;
}

/* ---- TOC ---- */
.gtp-post__toc {
  margin-bottom: clamp(28px, 3vw, 40px);
}
.gtp-post__toc[hidden] { display: none; }

.gtp-post__toc-disclosure {
  border-radius: 14px;
  background: rgba(10, 18, 32, .62);
  border: 1px solid rgba(94, 234, 255, .18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.gtp-post__toc-disclosure[open] {
  border-color: rgba(94, 234, 255, .35);
  box-shadow: 0 0 24px rgba(94, 234, 255, .08);
}
.gtp-post__toc-disclosure > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 22px 1fr 18px;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: #F4F7FB;
  border-radius: 14px;
}
.gtp-post__toc-disclosure > summary::-webkit-details-marker { display: none; }
.gtp-post__toc-icon,
.gtp-post__toc-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan);
}
.gtp-post__toc-icon svg,
.gtp-post__toc-chevron svg { width: 100%; height: 100%; display: block; }
.gtp-post__toc-icon { width: 22px; height: 22px; }
.gtp-post__toc-chevron {
  width: 18px; height: 18px;
  transition: transform .25s ease;
}
.gtp-post__toc-disclosure[open] .gtp-post__toc-chevron { transform: rotate(180deg); }

.gtp-post__toc-nav {
  padding: 6px 22px 18px;
  border-top: 1px solid rgba(230, 238, 248, .07);
}
.gtp-post__toc-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: gtp-toc;
  display: grid;
  gap: 8px;
}
.gtp-post__toc-item { position: relative; }
.gtp-post__toc-item--h2 { counter-increment: gtp-toc; padding-inline-start: 0; }
.gtp-post__toc-item--h2 > a::before {
  content: counter(gtp-toc, decimal-leading-zero) ".";
  margin-inline-end: 8px;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}
.gtp-post__toc-item--h3 { padding-inline-start: 20px; }
.gtp-post__toc-item--h3 > a::before {
  content: "—";
  margin-inline-end: 8px;
  color: rgba(94, 234, 255, .55);
}
.gtp-post__toc-list a {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(220, 230, 245, .82);
  text-decoration: none;
  transition: color .2s ease;
}
.gtp-post__toc-list a:hover { color: var(--cyan); }

/* ---- POST CONTENT ---- */
.gtp-post__content {
  direction: rtl;
  text-align: right;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.85;
  color: rgba(230, 238, 248, .88);
}
.gtp-post__content > * + * { margin-top: 1em; }
.gtp-post__content h2,
.gtp-post__content h3 {
  font-family: var(--font-head);
  color: #F4F7FB;
  letter-spacing: -0.015em;
  line-height: 1.25;
  scroll-margin-top: 100px;
}
.gtp-post__content h2 {
  margin-top: 2em;
  margin-bottom: 0.6em;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 800;
}
.gtp-post__content h2 span[dir="ltr"],
.gtp-post__content h3 span[dir="ltr"] { color: var(--cyan); }
.gtp-post__content h3 {
  margin-top: 1.6em;
  margin-bottom: 0.4em;
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 700;
  color: var(--ice-bright, #A8F2FF);
}
.gtp-post__content p { margin: 0; }
.gtp-post__content a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(94, 234, 255, .45);
}
.gtp-post__content a:hover {
  text-decoration-color: var(--cyan);
}
.gtp-post__content strong { color: #F4F7FB; font-weight: 700; }
.gtp-post__content em { color: rgba(168, 242, 255, .92); font-style: italic; }
.gtp-post__content ul,
.gtp-post__content ol {
  margin: 0;
  padding-inline-start: 1.4em;
}
.gtp-post__content li { margin-top: .35em; }
.gtp-post__content ul li::marker { color: var(--cyan); }
.gtp-post__content ol li::marker { color: var(--cyan); font-weight: 700; }

.gtp-post__content blockquote {
  margin: 1.6em 0;
  padding: 18px 22px;
  border-inline-start: 3px solid var(--cyan);
  background: rgba(94, 234, 255, .05);
  border-radius: 0 12px 12px 0;
  color: #F4F7FB;
  font-size: 1.02em;
  font-style: italic;
}
.gtp-post__content blockquote p { margin: 0; }

/* ---- Pull-quote (visual emphasis; not a heading, not in TOC) ---- */
.gtp-post__pullquote {
  margin: 2em 0;
  padding: 22px 26px;
  border: 0;
  border-inline-start: 0;
  border-radius: 16px;
  background:
    radial-gradient(ellipse 60% 100% at 0% 50%, rgba(94, 234, 255, .12), transparent 70%),
    rgba(10, 18, 32, .55);
  font-family: var(--font-head);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  font-weight: 700;
  font-style: normal;
  color: #F4F7FB;
  letter-spacing: -0.01em;
  position: relative;
}
.gtp-post__pullquote::before {
  content: "“";
  position: absolute;
  inset-inline-start: 18px;
  top: 0;
  font-family: var(--font-head);
  font-size: 56px;
  line-height: 1;
  color: var(--cyan);
  opacity: .35;
  pointer-events: none;
}
.gtp-post__pullquote p { margin: 0; }

/* ---- CTA (inline + final) ----
   Title intentionally uses <p class="gtp-post__cta-title"> so it does
   NOT appear in the TOC. */
.gtp-post__inline-cta,
.gtp-post__final-cta {
  margin: 2em 0;
  padding: clamp(20px, 2vw, 26px);
  border-radius: 16px;
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(94, 234, 255, .10), transparent 60%),
    rgba(10, 18, 32, .62);
  border: 1px solid rgba(94, 234, 255, .26);
  box-shadow:
    0 22px 52px -28px rgba(0, 0, 0, .50),
    inset 0 1px 0 rgba(255, 255, 255, .04);
  text-align: right;
}
.gtp-post__inline-cta { max-width: 720px; margin-inline: auto; }
.gtp-post__final-cta {
  margin-top: clamp(40px, 4vw, 64px);
  margin-bottom: 0;
  padding: clamp(26px, 3vw, 36px);
  border-radius: 18px;
}
.gtp-post__cta-title {
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.35;
  font-weight: 800;
  color: #F4F7FB;
  letter-spacing: -0.01em;
}
.gtp-post__cta-text {
  margin: 0 0 18px;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(220, 230, 245, .78);
}
.gtp-post__cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, #5EEAFF 0%, #18CFE8 100%);
  color: #07111F;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  box-shadow:
    0 14px 30px rgba(24, 207, 232, .26),
    inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
}
.gtp-post__cta-button:hover {
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow:
    0 20px 42px rgba(24, 207, 232, .34),
    inset 0 1px 0 rgba(255, 255, 255, .65);
}

/* CTA button — kill any inherited link styles from .gtp-post__content a
   that would tint text cyan / underline / smudge the glyph on the gradient. */
.gtp-post .gtp-post__cta-button,
.gtp-post__content .gtp-post__cta-button,
.gtp-post__inline-cta .gtp-post__cta-button,
.gtp-post__final-cta .gtp-post__cta-button {
  opacity: 1 !important;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: none !important;
  color: #07111F !important;
  font-family: var(--font-head);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.gtp-post .gtp-post__cta-button *,
.gtp-post__content .gtp-post__cta-button * {
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  color: #07111F !important;
  text-decoration: none !important;
}
/* Re-enable hover saturate without affecting text rendering */
.gtp-post .gtp-post__cta-button:hover,
.gtp-post__content .gtp-post__cta-button:hover {
  filter: saturate(1.08);
}

.gtp-post__content figure,
.gtp-post__content .wp-block-image {
  margin: 1.8em 0;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(94, 234, 255, .18);
  background: rgba(8, 14, 26, .55);
}
.gtp-post__content figure img,
.gtp-post__content .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
}
.gtp-post__content figcaption {
  padding: 10px 16px;
  font-size: 13px;
  color: rgba(220, 230, 245, .65);
  border-top: 1px solid rgba(94, 234, 255, .12);
  background: rgba(7, 17, 31, .55);
  text-align: center;
}

.gtp-post__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.8em 0;
  border: 1px solid rgba(94, 234, 255, .18);
  border-radius: 12px;
  overflow: hidden;
}
.gtp-post__content th,
.gtp-post__content td {
  padding: 10px 14px;
  border: 1px solid rgba(94, 234, 255, .12);
  text-align: right;
}
.gtp-post__content th {
  background: rgba(94, 234, 255, .06);
  color: #F4F7FB;
  font-weight: 700;
}

.gtp-post__content code,
.gtp-post__content pre {
  font-family: var(--font-mono);
  font-size: .92em;
}
.gtp-post__content code {
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(94, 234, 255, .08);
  color: var(--ice-bright, #A8F2FF);
}
.gtp-post__content pre {
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(7, 17, 31, .8);
  border: 1px solid rgba(94, 234, 255, .18);
  overflow-x: auto;
}
.gtp-post__content pre code {
  padding: 0;
  background: transparent;
  color: inherit;
}

/* ---- FAQ (optional; appears only if author adds Details/Accordion) ---- */
.gtp-post__faq {
  margin-top: 2.4em;
  padding-top: 1.2em;
  border-top: 1px solid rgba(230, 238, 248, .08);
}
.gtp-post__faq > h2 {
  margin-top: 0;
  margin-bottom: 1em;
}
.gtp-post__faq-item {
  margin-top: 10px;
  border-radius: 14px;
  background: rgba(10, 18, 32, .62);
  border: 1px solid rgba(94, 234, 255, .16);
}
.gtp-post__faq-item[open] {
  border-color: rgba(94, 234, 255, .42);
  background: rgba(12, 22, 38, .78);
  box-shadow: 0 0 24px rgba(94, 234, 255, .08);
}
.gtp-post__faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 1fr 20px;
  align-items: center;
  gap: 14px;
  font-family: var(--font-head);
  font-size: 15.5px;
  font-weight: 600;
  color: #F4F7FB;
  border-radius: 14px;
}
.gtp-post__faq-item > summary::-webkit-details-marker { display: none; }
.gtp-post__faq-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  color: rgba(168, 242, 255, .78);
  transition: transform .25s ease, color .25s ease;
}
.gtp-post__faq-chevron svg { width: 100%; height: 100%; display: block; }
.gtp-post__faq-item[open] .gtp-post__faq-chevron {
  transform: rotate(180deg);
  color: var(--cyan);
}
.gtp-post__faq-a {
  padding: 0 18px 16px 46px;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(220, 230, 245, .82);
}
.gtp-post__faq-a p { margin: 0; }

/* ---- AUTHOR BOX ---- */
.gtp-post__author {
  margin-top: clamp(40px, 4vw, 64px);
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: 18px;
  background:
    radial-gradient(ellipse 60% 100% at 80% 0%, rgba(94, 234, 255, .08), transparent 60%),
    rgba(10, 18, 32, .62);
  border: 1px solid rgba(94, 234, 255, .22);
  box-shadow:
    0 28px 60px -28px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .04);
  display: grid;
  grid-template-columns: clamp(112px, 9vw, 128px) 1fr;
  gap: 22px;
  align-items: center;
}
.gtp-post__author-avatar {
  width: clamp(112px, 9vw, 128px);
  height: clamp(112px, 9vw, 128px);
  border-radius: 50%;
  border: 1px solid rgba(94, 234, 255, .35);
  background: rgba(7, 17, 31, .9);
  overflow: hidden;
  box-shadow: 0 0 24px rgba(94, 234, 255, .14);
  flex: 0 0 auto;
}
.gtp-post__author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}
.gtp-post__author-name {
  margin: 0;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 800;
  color: #F4F7FB;
}
.gtp-post__author-role {
  margin: 2px 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--cyan);
  text-transform: uppercase;
}
.gtp-post__author-bio {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(220, 230, 245, .80);
}

/* ---- RELATED ---- */
.gtp-post__related {
  margin-top: clamp(48px, 5vw, 72px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid rgba(230, 238, 248, .08);
}
.gtp-post__related-title {
  margin: 0 0 24px;
  font-family: var(--font-head);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 800;
  color: #F4F7FB;
  text-align: right;
}
.gtp-post__related-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.gtp-post__related-card {
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(10, 18, 32, .55);
  border: 1px solid rgba(94, 234, 255, .14);
  color: #F4F7FB;
  text-decoration: none;
  transition: border-color .22s ease, background .22s ease, transform .22s ease;
}
.gtp-post__related-card:hover {
  transform: translateY(-3px);
  border-color: rgba(94, 234, 255, .38);
  background: rgba(12, 22, 38, .72);
}
.gtp-post__related-thumb {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: rgba(7, 17, 31, .85);
  border: 1px solid rgba(94, 234, 255, .12);
}
.gtp-post__related-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.gtp-post__related-cat {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-top: 4px;
}
.gtp-post__related-h {
  margin: 0;
  font-family: var(--font-head);
  font-size: 15.5px;
  line-height: 1.4;
  font-weight: 700;
  color: #F4F7FB;
}
.gtp-post__related-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(220, 230, 245, .55);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .gtp-post__hero-inner {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .gtp-post__hero-meta { order: 1; }
  .gtp-post__featured  { order: 2; }
  .gtp-post__related-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}

@media (max-width: 767px) {
  .gtp-post__hero {
    padding: 36px 18px 22px;
  }
  .gtp-post__body {
    padding: 22px 18px 0;
  }
  .gtp-post__title { font-size: clamp(24px, 6vw, 30px); line-height: 1.18; }
  .gtp-post__excerpt { font-size: 15px; line-height: 1.7; }
  .gtp-post__byline { font-size: 13px; gap: 8px; }

  .gtp-post__content { font-size: 15.5px; line-height: 1.8; }
  .gtp-post__content h2 { font-size: clamp(20px, 5.5vw, 24px); }
  .gtp-post__content h3 { font-size: clamp(17px, 5vw, 19px); }

  .gtp-post__related-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .gtp-post__author {
    grid-template-columns: 84px 1fr;
    gap: 16px;
    padding: 18px;
  }
  .gtp-post__author-avatar { width: 84px; height: 84px; }

  .gtp-post__inline-cta,
  .gtp-post__final-cta { padding: 22px 18px; border-radius: 14px; }
  .gtp-post__cta-title { font-size: 17px; }
  .gtp-post__cta-text  { font-size: 14px; line-height: 1.65; }
  .gtp-post__cta-button { width: 100%; min-height: 46px; padding: 0 22px; font-size: 14.5px; }

  .gtp-post__pullquote {
    padding: 20px 20px 20px 32px;
    font-size: 17px;
  }
  .gtp-post__pullquote::before { font-size: 44px; inset-inline-start: 14px; }
}


/* ============================================================
 *  GoTop Homepage — overrides + lead-form message styling
 *  (appended on top of the prototype styles.css)
 * ============================================================ */

/* Lead-form status message (used by gotop-home.js) */
.gtp-lead__msg {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cyan, #5EEAFF);
  min-height: 1.4em;
  text-align: center;
}
.gtp-lead__msg.is-success {
  padding: 12px 16px;
  background: rgba(94, 234, 255, .10);
  border: 1px solid rgba(94, 234, 255, .35);
  border-radius: 10px;
}
.gtp-lead__msg.is-error {
  color: #ff8a8a;
  padding: 12px 16px;
  background: rgba(255, 138, 138, .08);
  border: 1px solid rgba(255, 138, 138, .35);
  border-radius: 10px;
}

/* Privacy-policy link inside consent */
.gtp-lead__consent-link {
  color: var(--cyan, #5EEAFF);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gtp-lead__consent-link:hover { opacity: .85; }

/* ============================================================
 *  GoTop Homepage — fixes batch 1
 *  Scope: hero spacing, FAQ hover/active colors, FAQ mobile clipping.
 *  Notes:
 *   - All rules use !important because Hello Elementor + theme links
 *     occasionally inject pink/red hover colors via :hover { color }.
 *   - No layout structure changes — only colors and paddings.
 * ============================================================ */

/* --- 1. Tighten Hero → Section-2 transition (desktop + mobile) --- */
.hero {
  padding-bottom: clamp(28px, 3vw, 48px) !important;
}
.gtp-platform-stack__wave {
  height: clamp(58px, 5.5vw, 88px) !important;
}
.gtp-platform-stack__inner {
  padding-top: clamp(12px, 1.5vw, 24px) !important;
}

@media (max-width: 767px) {
  .hero { padding: 36px 18px 24px !important; }
  .gtp-platform-stack__wave { height: 46px !important; }
  .gtp-platform-stack__inner { padding-top: 10px !important; }
}

/* --- 2. FAQ — force brand colors on hover/active, kill any pink/red --- */
.gtp-faq a,
.gtp-faq a:link,
.gtp-faq a:visited,
.gtp-faq a:hover,
.gtp-faq a:focus,
.gtp-faq a:active { color: #5EEAFF !important; }

.gtp-faq__button,
.gtp-faq__button:hover,
.gtp-faq__button:focus,
.gtp-faq__button:focus-visible,
.gtp-faq__button:active { color: #F4F7FB !important; background: transparent !important; }

.gtp-faq__question,
.gtp-faq__button:hover .gtp-faq__question,
.gtp-faq__item:hover .gtp-faq__question { color: #F4F7FB !important; }

.gtp-faq__button[aria-expanded="true"] .gtp-faq__question { color: #5EEAFF !important; }

.gtp-faq__icon,
.gtp-faq__button:hover .gtp-faq__icon { color: #5EEAFF !important; }

.gtp-faq__chevron,
.gtp-faq__button:hover .gtp-faq__chevron { color: rgba(168, 242, 255, .85) !important; }
.gtp-faq__button[aria-expanded="true"] .gtp-faq__chevron { color: #5EEAFF !important; }

.gtp-faq__item:hover {
  border-color: rgba(94, 234, 255, .34) !important;
}
.gtp-faq__item:has(.gtp-faq__button[aria-expanded="true"]) {
  border-color: rgba(94, 234, 255, .48) !important;
}

/* --- 3. FAQ mobile clipping fix (≤480px) --- */
@media (max-width: 480px) {
  .gtp-faq {
    padding-left: 14px !important;
    padding-right: 14px !important;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  .gtp-faq__inner,
  .gtp-faq__grid {
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    box-sizing: border-box;
  }
  .gtp-faq__item {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  .gtp-faq__button {
    grid-template-columns: 28px minmax(0, 1fr) 16px !important;
    gap: 8px !important;
    padding: 13px 12px !important;
    font-size: 14px !important;
    min-width: 0;
  }
  .gtp-faq__icon { width: 28px !important; height: 28px !important; border-radius: 9px !important; font-size: 10.5px !important; }
  .gtp-faq__chevron { width: 16px !important; height: 16px !important; }
  .gtp-faq__question {
    font-size: 14px !important;
    line-height: 1.4 !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
  }
  .gtp-faq__panel { padding: 0 12px 14px 40px !important; }
  .gtp-faq__answer {
    font-size: 13px !important;
    line-height: 1.65 !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .gtp-faq__cta { margin-top: 28px !important; padding: 20px 16px !important; }
  .gtp-faq__cta-title { font-size: 17px !important; }
  .gtp-faq__cta-text  { font-size: 13px !important; }
  .gtp-faq__cta-button { width: 100% !important; }
}

/* ============================================================
 *  GoTop Homepage — fixes batch 2 (polish)
 *  Scope: section-2 spacing, FAQ CTA button readability,
 *         FAQ mobile long-question overlap.
 *  Header phone button is handled in gotop-header.css.
 * ============================================================ */

/* --- 4. Section #2 → Section #3 spacing: tighter ending --- */
.gtp-platform-stack {
  padding-bottom: clamp(36px, 4vw, 64px) !important;
}
.gtp-method {
  padding-top: clamp(48px, 5vw, 80px) !important;
}
.gtp-method__slice { height: 20px !important; }

@media (max-width: 767px) {
  .gtp-platform-stack { padding-bottom: 36px !important; }
  .gtp-method { padding-top: 44px !important; }
}

/* --- 2. FAQ CTA button — force dark navy text, no blur --- */
.gtp-faq__cta-button,
.gtp-faq__cta-button:link,
.gtp-faq__cta-button:visited,
.gtp-faq__cta-button:hover,
.gtp-faq__cta-button:focus,
.gtp-faq__cta-button:active {
  color: #07111F !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #07111F !important;
  opacity: 1 !important;
  filter: none !important;
}
.gtp-faq__cta-button * {
  color: inherit !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #07111F !important;
}
.gtp-faq__cta-button:hover {
  /* keep lift but no blur */
  transform: translateY(-2px);
  filter: saturate(1.08) !important;
}

/* --- 1. FAQ mobile: long question must not overlap number/toggle --- */
@media (max-width: 480px) {
  .gtp-faq__button {
    /* RTL: number (badge) is at right end (start), chevron at left end.
       Give the question explicit room on both sides so it never overlaps. */
    grid-template-columns: 28px minmax(0, 1fr) 18px !important;
    column-gap: 10px !important;
    padding: 14px 14px !important;
    align-items: center !important;
  }
  .gtp-faq__icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 10.5px !important;
    flex: 0 0 28px !important;
  }
  .gtp-faq__chevron {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }
  .gtp-faq__question {
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    min-width: 0 !important;
    /* small breathing room from the number badge on the right */
    padding-inline-end: 4px !important;
    padding-inline-start: 2px !important;
    text-align: right !important;
  }
}

/* ============================================================
 *  GoTop Homepage — fixes batch 3
 *  - Lead section: arcs no longer clipped by overflow:hidden
 *  - FAQ mobile #03: stronger breathing room badge ↔ text
 * ============================================================ */

/* --- Lead section arcs: stop clipping at top/bottom edges --- */
.gtp-lead {
  /* Replace overflow:hidden with axis-specific so vertical arcs can
     extend a few px past the section edge without ever causing a
     horizontal page scroll. */
  overflow-x: clip !important;
  overflow-y: visible !important;
}
.gtp-lead__arc--top {
  /* Move the arc just barely inside the section so it always renders
     fully — no negative top + parent clip combination. */
  top: 0 !important;
}
.gtp-lead__arc--bottom {
  bottom: 0 !important;
}
@media (max-width: 767px) {
  .gtp-lead__arc--top    { top: 0 !important; }
  .gtp-lead__arc--bottom { bottom: 0 !important; }
}

/* --- FAQ mobile: enforce real gap between text and right-side badge --- */
@media (max-width: 480px) {
  .gtp-faq__button {
    grid-template-columns: 26px minmax(0, 1fr) 16px !important;
    column-gap: 14px !important;
    padding: 14px 12px !important;
    align-items: start !important;
  }
  .gtp-faq__icon {
    width: 26px !important;
    height: 26px !important;
    font-size: 10px !important;
    flex: 0 0 26px !important;
    margin-top: 1px;
  }
  .gtp-faq__chevron {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    margin-top: 4px;
  }
  .gtp-faq__question {
    font-size: 13px !important;
    line-height: 1.45 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    min-width: 0 !important;
    padding-inline-end: 10px !important;
    padding-inline-start: 4px !important;
    text-align: right !important;
  }
}

/* ============================================================
 *  GoTop Homepage — fixes batch 4 (final polish)
 *  1. Lead arcs: render BEHIND the content (badge readable).
 *  2. FAQ mobile: clean word-wrap (no break-word), reserve toggle column.
 *  These rules override anything earlier in this file by being later
 *  in the cascade + carrying !important on the load-bearing props.
 * ============================================================ */

/* --- 1. Lead section: arcs go behind, badge sits on top with opaque bg --- */
.gtp-lead__arc,
.gtp-lead__arc--top,
.gtp-lead__arc--bottom {
  z-index: 0 !important;
}
.gtp-lead__inner {
  position: relative !important;
  z-index: 5 !important;
}
.gtp-lead__copy {
  position: relative;
  z-index: 6;
}
.gtp-lead__badge {
  position: relative !important;
  z-index: 10 !important;
  background: rgba(7, 17, 31, 0.92) !important;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

/* --- 2. FAQ mobile: localhost-style clean wrap, no break-word --- */
@media (max-width: 480px) {
  .gtp-faq__button {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) 18px !important;
    column-gap: 12px !important;
    align-items: center !important;
    padding: 14px 14px !important;
  }
  .gtp-faq__icon {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    font-size: 11px !important;
  }
  .gtp-faq__chevron {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }
  .gtp-faq__question {
    /* Wrap on word boundaries like localhost — no break-word, no anywhere */
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    min-width: 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    padding-inline-end: 4px !important;
    padding-inline-start: 0 !important;
    text-align: right !important;
  }
}

/* ============================================================
 *  GoTop Homepage — fixes batch 5
 *  Lead-section badge: ensure the cyan arc never appears inside
 *  or around the badge area. Solid opaque bg + solid color outer
 *  ring that matches the section background masks any nearby curve.
 * ============================================================ */

.gtp-lead__badge {
  /* Fully opaque background — no alpha so arc cannot bleed through. */
  background: #07111F !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  /* Solid 6px halo in the section bg colour acts as a mask, so any
     part of the arc adjacent to the pill is hidden. Cyan glow kept
     subtle inside the halo for the original look. */
  box-shadow:
    0 0 0 6px #07111F,
    0 0 16px rgba(94, 234, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(94, 234, 255, 0.55) !important;
}

/* ============================================================
 *  GoTop Homepage — fixes batch 6
 *  Lead-section badge: previous 6px halo was not wide enough to
 *  catch the arc's glow filter. Two changes:
 *   1. Push the badge below the arc curve (margin-top) so the
 *      cyan stroke + its drop-shadow no longer intersect at all.
 *   2. Widen the opaque halo to 18px and shrink the arc's glow
 *      filter so any residual stroke near the badge is masked.
 * ============================================================ */

.gtp-lead__badge {
  margin-top: 40px !important;
  box-shadow:
    0 0 0 18px #07111F,
    0 0 14px rgba(94, 234, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.gtp-lead__arc {
  filter:
    drop-shadow(0 0 3px rgba(94, 234, 255, 0.40))
    drop-shadow(0 0 8px rgba(94, 234, 255, 0.14)) !important;
}

@media (max-width: 767px) {
  .gtp-lead__badge { margin-top: 28px !important; }
}

/* ============================================================
 *  GoTop Homepage — fixes batch 7
 *  Tighten the gap between .gtp-method (ends with "ONE SYSTEM.
 *  CLEAR GROWTH") and .gtp-lead (cyan arc at top). Previous
 *  override only touched method's padding-top; bottom + lead
 *  stage padding-top were still original (100-140px each).
 * ============================================================ */

.gtp-method {
  padding-bottom: clamp(36px, 4vw, 56px) !important;
}
.gtp-lead__stage {
  padding-top: clamp(28px, 3vw, 48px) !important;
}

@media (max-width: 767px) {
  .gtp-method { padding-bottom: 36px !important; }
  .gtp-lead__stage { padding-top: 28px !important; }
}

/* ============================================================
 *  GoTop Homepage — fixes batch 8
 *  Final arc-vs-badge separation: shrink the arc's vertical
 *  footprint so the curve never reaches the badge row.
 *  - Arc height halved (was 120–200px, now 70–110px).
 *  - Badge margin-top trimmed since arc no longer descends to it.
 * ============================================================ */

.gtp-lead__arc {
  height: clamp(70px, 7vw, 110px) !important;
}
.gtp-lead__badge {
  margin-top: 20px !important;
}
@media (max-width: 767px) {
  .gtp-lead__arc { height: 64px !important; }
  .gtp-lead__badge { margin-top: 16px !important; }
}

/* ============================================================
 *  GoTop Homepage — fixes batch 9 (final arc/badge)
 *  Halo masking left visible cut lines at the badge edges.
 *  Cleaner approach: shrink the arc to a thin top band so its
 *  bounding box ends ABOVE the badge — no overlap, no masking.
 * ============================================================ */

.gtp-lead__arc {
  height: clamp(40px, 4vw, 60px) !important;
}
.gtp-lead__badge {
  margin-top: 16px !important;
  box-shadow:
    0 0 0 4px #07111F,
    0 0 12px rgba(94, 234, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
@media (max-width: 767px) {
  .gtp-lead__arc { height: 36px !important; }
  .gtp-lead__badge { margin-top: 14px !important; }
}

/* ============================================================
 *  GoTop Homepage — fixes batch 10 (RESET arc + badge)
 *  Restore the arc to its original natural curve (squashing it to
 *  ~50px flattened the SVG via preserveAspectRatio="none"). Keep
 *  the badge cleanly below the arc by giving the stage enough
 *  padding-top so the cyan curve never reaches the badge.
 * ============================================================ */

/* Re-allow the arc its full shape */
.gtp-lead__arc {
  height: clamp(120px, 14vw, 200px) !important;
  filter:
    drop-shadow(0 0 6px rgba(94, 234, 255, 0.55))
    drop-shadow(0 0 18px rgba(94, 234, 255, 0.22)) !important;
}
.gtp-lead__arc--top    { top: 0 !important; }
.gtp-lead__arc--bottom { bottom: 0 !important; }

/* Push content below the arc bounding box so the curve never
   intersects the badge. This adds room inside the lead section
   but does NOT increase the gap between sections — method's
   padding-bottom remains tight. */
.gtp-lead__stage {
  padding-top: clamp(170px, 16vw, 230px) !important;
}

/* Badge: clean opaque pill — no more halo masking needed */
.gtp-lead__badge {
  margin-top: 0 !important;
  box-shadow:
    0 0 14px rgba(94, 234, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

@media (max-width: 767px) {
  .gtp-lead__arc { height: 120px !important; }
  .gtp-lead__stage { padding-top: 140px !important; }
  .gtp-lead__badge { margin-top: 0 !important; }
}

/* ============================================================
 *  GoTop Homepage — fixes batch 11
 *  Pull badge up closer to the arc. Previous padding-top of
 *  170–230px left a large dark gap because the SVG curve only
 *  occupies the upper ~70% of its bounding box.
 * ============================================================ */

.gtp-lead__stage {
  padding-top: clamp(120px, 12vw, 175px) !important;
}
@media (max-width: 767px) {
  .gtp-lead__stage { padding-top: 96px !important; }
}