/* ==========================================================================
   36. Services page (Services: Overview)
   Glass and 3D style. Its own colours: aqua #5ee7f0, lavender #b8a1ff and peach #ffb36b
   glowing on deep midnight #070b1e. Sections live in template-parts/services-overview/.
   ========================================================================== */

body.page-template-services-page { --g-bg: #070b1e; --g-aqua: #5ee7f0; --g-lav: #b8a1ff; --g-peach: #ffb36b; --g-text: #eef1ff; --g-muted: #a9b0d0; --g-dark: #0a0f24; --c1: var(--g-aqua); --c2: var(--g-lav); background: var(--g-bg); background-image: none; }

/* Animated gradient mesh behind the whole page */
body.page-template-services-page::before { content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none; background: radial-gradient(40% 35% at 20% 20%, rgba(94, 231, 240, .22), transparent 70%), radial-gradient(38% 34% at 80% 30%, rgba(184, 161, 255, .26), transparent 70%), radial-gradient(40% 36% at 60% 85%, rgba(255, 179, 107, .18), transparent 70%); filter: blur(30px); animation: gmesh 26s ease-in-out infinite alternate; }
@keyframes gmesh { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-4%, 3%) rotate(8deg); } 100% { transform: translate(3%, -2%) rotate(-6deg); } }

/* Shared: glass, 3D icons, headings, buttons ---------------------------- */
.page-template-services-page .glass { background: linear-gradient(145deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 30px 60px -30px rgba(0, 0, 0, .75); }
.g3d { --s: 54px; position: relative; flex: none; display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: calc(var(--s) * .3); background: linear-gradient(145deg, var(--c1), var(--c2)); color: var(--g-dark); box-shadow: inset 0 2px 1px rgba(255, 255, 255, .75), inset 0 -6px 12px rgba(0, 0, 0, .22), 0 7px 0 -2px color-mix(in srgb, var(--c2) 50%, #000), 0 20px 34px -12px color-mix(in srgb, var(--c1) 75%, transparent); transform: perspective(300px) rotateX(14deg) rotateY(-14deg); }
.g3d::after { content: ""; position: absolute; left: 4px; right: 4px; top: 3px; height: 48%; border-radius: calc(var(--s) * .26) calc(var(--s) * .26) 40% 40%; background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); pointer-events: none; }
.g3d svg { position: relative; z-index: 1; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .5)); }
.g3d--sm { --s: 40px; }
.g3d--lg { --s: 68px; animation: gfloat 5s ease-in-out infinite; }
.g3d--xl { --s: 140px; animation: gfloat 6s ease-in-out infinite; }
@keyframes gfloat { 0%, 100% { transform: perspective(300px) rotateX(14deg) rotateY(-14deg) translateY(0); } 50% { transform: perspective(300px) rotateX(8deg) rotateY(-6deg) translateY(-8px); } }
.gsec { position: relative; padding-block: clamp(20px, 2.4vw, 34px); }
.ghead { max-width: 740px; margin: 0 auto clamp(16px, 2vw, 26px); text-align: center; }
.gpill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); color: var(--g-text); font-family: var(--font-display); font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.gpill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g-aqua); box-shadow: 0 0 12px var(--g-aqua); animation: pulse 2s infinite; }
.ghead__title, .ghero__title, .gcta__title { color: var(--g-text); }
.ghead__title { margin: 10px 0 0; font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.12; letter-spacing: -.02em; }
.ghead__title--left { text-align: left; }
.ghead__title span, .ghero__title span, .gcta__title span { background: linear-gradient(100deg, var(--g-aqua), var(--g-lav) 50%, var(--g-peach)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ghead__text { margin: 8px 0 0; color: var(--g-muted); font-size: 1.05rem; line-height: 1.7; }
.gbtn { border-radius: 16px; background: linear-gradient(110deg, var(--g-aqua), var(--g-lav) 55%, var(--g-peach)); color: var(--g-dark); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 16px 34px -14px rgba(184, 161, 255, .9); }
.gbtn:hover { color: var(--g-dark); transform: translateY(-2px); }
.gbtn--glass { background: rgba(255, 255, 255, .08); color: var(--g-text); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.gbtn--glass:hover { color: var(--g-text); background: rgba(255, 255, 255, .16); }
.page-template-services-page .spotlight::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .12), transparent 60%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.page-template-services-page .spotlight:hover::before { opacity: 1; }

/* Hero with 3D ring ---------------------------------------------------------- */
.ghero { position: relative; overflow: hidden; padding: calc(var(--header-h) + clamp(18px, 2.5vw, 34px)) 0 clamp(10px, 2vw, 24px); }
.ghero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; }
.ghero__text { display: flex; flex-direction: column; align-items: flex-start; }
.ghero .breadcrumbs ol { justify-content: flex-start; margin-bottom: 18px; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.ghero__title { margin: 20px 0 16px; font-size: clamp(2.4rem, 5vw, 4.1rem); line-height: 1.06; letter-spacing: -.03em; }
.ghero__subtitle { max-width: 560px; margin: 0 0 30px; color: var(--g-muted); font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.7; }
.ghero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.gstage { --r: 245px; --card: 118px; position: relative; height: 400px; perspective: 1100px; }
.gstage__floor { position: absolute; left: 8%; right: 8%; bottom: 40px; height: 110px; border-radius: 50%; background: radial-gradient(closest-side, rgba(184, 161, 255, .45), rgba(94, 231, 240, .15) 60%, transparent); filter: blur(10px); }
.gstage__orb { width: 130px; height: 130px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #ffffff, var(--g-aqua) 22%, var(--g-lav) 55%, #4b3a9c 85%); color: var(--g-dark); box-shadow: 0 0 60px 10px rgba(184, 161, 255, .55), inset -10px -14px 30px rgba(20, 10, 60, .5); }
.gring { position: absolute; left: 50%; top: 46%; width: 0; height: 0; transform-style: preserve-3d; animation: gspin 40s linear infinite; }
@keyframes gspin { from { transform: rotateX(-24deg) rotateY(0); } to { transform: rotateX(-24deg) rotateY(-360deg); } }
/* Each card sits on the ring; its face turns the other way so it always looks at you. */
.gring__card { --a: calc(var(--i) * 360deg / var(--n)); position: absolute; left: calc(var(--card) / -2); top: calc(var(--card) / -2); width: var(--card); height: var(--card); color: var(--g-text); text-align: center; text-decoration: none; transform-style: preserve-3d; transform: rotateY(var(--a)) translateZ(var(--r)); }
.gring__card--orb { --a: 0deg; left: -60px; top: -60px; width: 120px; height: 120px; transform: none; }
.gring__face { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%; padding: 10px; border-radius: 24px; background: linear-gradient(150deg, rgba(40, 48, 100, .82), rgba(16, 20, 50, .7)); border: 1px solid rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 20px 40px -20px rgba(0, 0, 0, .9); animation: gface 40s linear infinite; transition: background .3s, border-color .3s; }
.gring__card--orb .gring__face { padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #ffffff, var(--g-aqua) 22%, var(--g-lav) 55%, #4b3a9c 85%); box-shadow: 0 0 60px 10px rgba(184, 161, 255, .55), inset -10px -14px 30px rgba(20, 10, 60, .5); }
@keyframes gface { from { transform: rotateY(calc(-1 * var(--a))) rotateX(24deg); } to { transform: rotateY(calc(360deg - var(--a))) rotateX(24deg); } }
.gstage:hover .gring, .gstage:hover .gring__face { animation-play-state: paused; }
.gring__card:hover .gring__face { background: linear-gradient(150deg, rgba(94, 231, 240, .4), rgba(184, 161, 255, .35)); border-color: rgba(255, 255, 255, .5); color: #fff; }
.gring__card strong { font-family: var(--font-display); font-size: .8rem; line-height: 1.2; }

/* Intro facts bar -------------------------------------------------------------- */
.gintro { padding: 0 0 clamp(6px, 1.5vw, 16px); }
.gintro__bar { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; border-radius: 26px; }
.gintro__bar li { display: flex; align-items: center; gap: 16px; padding: 22px 26px; }
.gintro__bar li + li { border-left: 1px solid rgba(255, 255, 255, .1); }
.gintro__bar strong { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--g-text); }
.gintro__bar small { color: var(--g-muted); font-size: .86rem; }

/* Service boxes (3 per row, compact) ------------------------------------------ */
.gcards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sbox { --c1: var(--g-aqua); --c2: var(--g-lav); position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; background: linear-gradient(170deg, color-mix(in srgb, var(--c1) 12%, #10142e), #0a0e24 70%); border: 1px solid color-mix(in srgb, var(--c1) 32%, transparent); box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--c1) 60%, transparent); color: var(--g-text); text-decoration: none; transition: transform .25s ease-out, box-shadow .4s, border-color .4s; }
.sbox:hover { border-color: color-mix(in srgb, var(--c1) 70%, transparent); box-shadow: 0 46px 80px -30px color-mix(in srgb, var(--c1) 85%, transparent); }

/* Bright gradient header */
.sbox__head { position: relative; isolation: isolate; min-height: 118px; padding: 18px 96px 26px 22px; background: linear-gradient(135deg, var(--c1), var(--c2)); color: var(--g-dark); border-radius: 0 0 26px 26px; }
.sbox__pattern { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; background-image: radial-gradient(rgba(255, 255, 255, .35) 1.2px, transparent 1.6px); background-size: 14px 14px; mask-image: linear-gradient(120deg, #000, transparent 70%); -webkit-mask-image: linear-gradient(120deg, #000, transparent 70%); transition: background-position 1.2s var(--ease); }
.sbox__pattern::after { content: ""; position: absolute; right: -40px; top: -50px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.sbox:hover .sbox__pattern { background-position: 14px 14px; }
.sbox__no { position: absolute; left: 22px; bottom: 9px; font-family: var(--font-display); font-weight: 800; font-size: .72rem; letter-spacing: .14em; line-height: 1; color: rgba(10, 15, 36, .45); }
.sbox__tag { display: block; font-size: .74rem; font-weight: 700; line-height: 1.35; opacity: .8; }
.sbox__title { margin: 6px 0 0; font-size: 1.28rem; line-height: 1.2; color: var(--g-dark); }
.sbox__title a { color: inherit; text-decoration: none; }
.sbox__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sbox__icon { position: absolute; z-index: 2; right: 20px; top: 50%; width: 62px; height: 62px; margin-top: -31px; display: grid; place-items: center; border-radius: 20px; background: linear-gradient(150deg, #ffffff, color-mix(in srgb, var(--c1) 30%, #ffffff)); color: color-mix(in srgb, var(--c1) 45%, #0a0f24); box-shadow: inset 0 -4px 8px rgba(0, 0, 0, .08), 0 6px 0 -1px color-mix(in srgb, var(--c1) 55%, #0a0f24), 0 18px 30px -10px rgba(10, 15, 36, .55); transform: rotate(-8deg); transition: transform .6s var(--ease); }
.sbox:hover .sbox__icon { transform: rotate(0) scale(1.08); }

/* Short glass body */
.sbox__body { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1; padding: 18px 22px 20px; }
.sbox__text { margin: 0 0 14px; color: var(--g-muted); font-size: .9rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sbox__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.sbox__list li { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 6px; border-radius: 999px; background: color-mix(in srgb, var(--c1) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c1) 26%, transparent); font-size: .76rem; font-weight: 600; line-height: 1.3; }
.sbox__list svg { flex: none; width: 15px; height: 15px; padding: 2px; border-radius: 50%; background: var(--c1); color: var(--g-dark); }
.sbox__foot { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px dashed color-mix(in srgb, var(--c1) 35%, transparent); }
.sbox__amt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.sbox__amt small { color: var(--g-muted); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sbox__amt strong { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.2; white-space: nowrap; color: var(--c1); }
.sbox__amt em { margin-left: 4px; font-style: normal; font-family: var(--font-body); font-size: .72rem; font-weight: 600; color: var(--g-muted); }
/* Two matching buttons: "All packages" (glass outline) and "Explore" (gradient). */
.sbox__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sbox__go, .sbox__more { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; border-radius: 14px; font-weight: 700; font-size: .86rem; white-space: nowrap; text-decoration: none; transition: gap .3s, filter .3s, background .3s, color .3s, box-shadow .3s; }
.sbox__go { background: linear-gradient(120deg, var(--c1), var(--c2)); color: var(--g-dark); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 12px 24px -12px var(--c1); }
.sbox__go:hover { gap: 12px; color: var(--g-dark); filter: brightness(1.08); }
.sbox__more { background: color-mix(in srgb, var(--c1) 12%, rgba(255, 255, 255, .03)); color: var(--c1); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c1) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .15); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sbox__more:hover { background: color-mix(in srgb, var(--c1) 24%, transparent); color: #fff; box-shadow: inset 0 0 0 1.5px var(--c1), 0 12px 24px -14px var(--c1); }

/* "Not sure which one?" fills the last row as a wide box */
.sbox--ask { grid-column: span 2; flex-direction: row; }
.sbox--ask .sbox__head { flex: 0 0 44%; display: flex; flex-direction: column; justify-content: center; border-radius: 0 26px 26px 0; }
.sbox--ask .sbox__body { justify-content: center; padding: 22px 26px; }
.sbox--ask .sbox__text { -webkit-line-clamp: 3; }
.sbox--ask .sbox__go { align-self: flex-start; }

/* Goal map: goals joined to services by glowing lines (no boxes) ----------- */
.gmap { display: grid; grid-template-columns: 1fr minmax(120px, .7fr) .9fr; grid-template-rows: minmax(0, 1fr); height: 470px; }
.gmap__goals, .gmap__svcs { display: grid; margin: 0; padding: 0; list-style: none; }
.gmap__goals { grid-template-rows: repeat(var(--gn), 1fr); }
.gmap__svcs { grid-template-rows: repeat(var(--sn), 1fr); }
.gmap__goal { --gc: var(--g-aqua); position: relative; display: flex; align-items: center; gap: 14px; padding-right: 22px; outline: none; cursor: default; transition: opacity .35s, transform .4s var(--ease); }
.gmap__gicon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: linear-gradient(145deg, var(--gc), color-mix(in srgb, var(--gc) 35%, #ffffff)); color: var(--g-dark); box-shadow: inset 0 2px 1px rgba(255, 255, 255, .6), 0 5px 0 -1px color-mix(in srgb, var(--gc) 45%, #000), 0 14px 26px -12px var(--gc); transition: transform .4s var(--ease); }
.gmap__gtext { display: flex; flex-direction: column; min-width: 0; }
.gmap__gtext strong { font-family: var(--font-display); font-size: 1.1rem; color: var(--g-text); transition: color .3s; }
.gmap__gtext small { color: var(--g-muted); font-size: .84rem; }
.gmap__dot { position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--g-bg); border: 2px solid var(--gc, rgba(255, 255, 255, .4)); box-shadow: 0 0 10px var(--gc, transparent); }
.gmap__goal .gmap__dot { right: -6px; }
.gmap__chips { display: none; }
.gmap__lines { width: 100%; height: 100%; min-height: 0; overflow: visible; }
.gmap__line { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 3 7; stroke-linecap: round; opacity: .35; animation: gflow 1.6s linear infinite; transition: opacity .35s, stroke-width .35s; }
@keyframes gflow { to { stroke-dashoffset: -20; } }
.gmap__svc { position: relative; display: flex; align-items: center; gap: 12px; height: 100%; padding-left: 22px; color: var(--g-text); text-decoration: none; transition: opacity .35s, transform .4s var(--ease); }
.gmap__svc .gmap__dot { left: -6px; --gc: rgba(255, 255, 255, .45); }
.gmap__sicon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: var(--g-text); transition: background .35s, color .35s, box-shadow .35s; }
.gmap__sname { font-family: var(--font-display); font-weight: 700; font-size: .98rem; }
.gmap__svc:hover { transform: translateX(6px); }
.gmap__hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 0; color: var(--g-muted); font-size: .88rem; }
.gmap__hint svg { color: var(--g-peach); }

/* When a goal is pointed at: fade everything, then light up that goal, its lines and services. */
.gmap:has(.gmap__goal:hover, .gmap__goal:focus-visible) .gmap__goal, .gmap:has(.gmap__goal:hover, .gmap__goal:focus-visible) .gmap__svc { opacity: .35; }
.gmap:has(.gmap__goal:hover, .gmap__goal:focus-visible) .gmap__line { opacity: .06; }
.gmap__goal:hover, .gmap__goal:focus-visible { opacity: 1 !important; transform: translateX(8px); }
.gmap__goal:hover .gmap__gicon, .gmap__goal:focus-visible .gmap__gicon { transform: scale(1.1) rotate(-6deg); }
.gmap__goal:hover strong, .gmap__goal:focus-visible strong { color: var(--gc); }
.gmap:has(.gmap__goal[data-g="0"]:hover, .gmap__goal[data-g="0"]:focus-visible) .l-g0 { opacity: 1; stroke-width: 2.6; stroke-dasharray: 8 6; }
.gmap:has(.gmap__goal[data-g="0"]:hover, .gmap__goal[data-g="0"]:focus-visible) .s-g0 { --hc: #5ee7f0; opacity: 1; transform: translateX(8px); }
.gmap:has(.gmap__goal[data-g="1"]:hover, .gmap__goal[data-g="1"]:focus-visible) .l-g1 { opacity: 1; stroke-width: 2.6; stroke-dasharray: 8 6; }
.gmap:has(.gmap__goal[data-g="1"]:hover, .gmap__goal[data-g="1"]:focus-visible) .s-g1 { --hc: #b8a1ff; opacity: 1; transform: translateX(8px); }
.gmap:has(.gmap__goal[data-g="2"]:hover, .gmap__goal[data-g="2"]:focus-visible) .l-g2 { opacity: 1; stroke-width: 2.6; stroke-dasharray: 8 6; }
.gmap:has(.gmap__goal[data-g="2"]:hover, .gmap__goal[data-g="2"]:focus-visible) .s-g2 { --hc: #ffb36b; opacity: 1; transform: translateX(8px); }
.gmap:has(.gmap__goal[data-g="3"]:hover, .gmap__goal[data-g="3"]:focus-visible) .l-g3 { opacity: 1; stroke-width: 2.6; stroke-dasharray: 8 6; }
.gmap:has(.gmap__goal[data-g="3"]:hover, .gmap__goal[data-g="3"]:focus-visible) .s-g3 { --hc: #ff8fc7; opacity: 1; transform: translateX(8px); }
.gmap:has(.gmap__goal[data-g="4"]:hover, .gmap__goal[data-g="4"]:focus-visible) .l-g4 { opacity: 1; stroke-width: 2.6; stroke-dasharray: 8 6; }
.gmap:has(.gmap__goal[data-g="4"]:hover, .gmap__goal[data-g="4"]:focus-visible) .s-g4 { --hc: #7cf0a9; opacity: 1; transform: translateX(8px); }
.gmap:has(.gmap__goal[data-g="5"]:hover, .gmap__goal[data-g="5"]:focus-visible) .l-g5 { opacity: 1; stroke-width: 2.6; stroke-dasharray: 8 6; }
.gmap:has(.gmap__goal[data-g="5"]:hover, .gmap__goal[data-g="5"]:focus-visible) .s-g5 { --hc: #ffd86b; opacity: 1; transform: translateX(8px); }
/* Colours above match the goal colours in template-parts/services-overview/goal-finder.php. */
.gmap__svc .gmap__sicon { background: var(--hc, rgba(255, 255, 255, .07)); }
.gmap:has(.gmap__goal[data-g="0"]:hover, .gmap__goal[data-g="0"]:focus-visible) .s-g0 .gmap__sicon { color: var(--g-dark); border-color: transparent; box-shadow: 0 10px 24px -8px var(--hc); }
.gmap:has(.gmap__goal[data-g="0"]:hover, .gmap__goal[data-g="0"]:focus-visible) .s-g0 .gmap__dot { --gc: var(--hc); }
.gmap:has(.gmap__goal[data-g="1"]:hover, .gmap__goal[data-g="1"]:focus-visible) .s-g1 .gmap__sicon { color: var(--g-dark); border-color: transparent; box-shadow: 0 10px 24px -8px var(--hc); }
.gmap:has(.gmap__goal[data-g="1"]:hover, .gmap__goal[data-g="1"]:focus-visible) .s-g1 .gmap__dot { --gc: var(--hc); }
.gmap:has(.gmap__goal[data-g="2"]:hover, .gmap__goal[data-g="2"]:focus-visible) .s-g2 .gmap__sicon { color: var(--g-dark); border-color: transparent; box-shadow: 0 10px 24px -8px var(--hc); }
.gmap:has(.gmap__goal[data-g="2"]:hover, .gmap__goal[data-g="2"]:focus-visible) .s-g2 .gmap__dot { --gc: var(--hc); }
.gmap:has(.gmap__goal[data-g="3"]:hover, .gmap__goal[data-g="3"]:focus-visible) .s-g3 .gmap__sicon { color: var(--g-dark); border-color: transparent; box-shadow: 0 10px 24px -8px var(--hc); }
.gmap:has(.gmap__goal[data-g="3"]:hover, .gmap__goal[data-g="3"]:focus-visible) .s-g3 .gmap__dot { --gc: var(--hc); }
.gmap:has(.gmap__goal[data-g="4"]:hover, .gmap__goal[data-g="4"]:focus-visible) .s-g4 .gmap__sicon { color: var(--g-dark); border-color: transparent; box-shadow: 0 10px 24px -8px var(--hc); }
.gmap:has(.gmap__goal[data-g="4"]:hover, .gmap__goal[data-g="4"]:focus-visible) .s-g4 .gmap__dot { --gc: var(--hc); }
.gmap:has(.gmap__goal[data-g="5"]:hover, .gmap__goal[data-g="5"]:focus-visible) .s-g5 .gmap__sicon { color: var(--g-dark); border-color: transparent; box-shadow: 0 10px 24px -8px var(--hc); }
.gmap:has(.gmap__goal[data-g="5"]:hover, .gmap__goal[data-g="5"]:focus-visible) .s-g5 .gmap__dot { --gc: var(--hc); }

/* Bundles as equations: Service + Service + Service = Result ------------------ */
.gbundle__list { display: grid; gap: 16px; }
.geq { --c1: var(--g-aqua); --c2: var(--g-lav); position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(200px, .8fr) 2fr auto; align-items: center; gap: clamp(18px, 3vw, 40px); padding: 24px clamp(20px, 3vw, 34px) 24px clamp(26px, 3vw, 40px); border-radius: 24px; background: linear-gradient(100deg, color-mix(in srgb, var(--c1) 14%, rgba(14, 18, 44, .9)), rgba(10, 14, 34, .75) 45%, color-mix(in srgb, var(--c2) 8%, rgba(10, 14, 34, .75))); border: 1px solid color-mix(in srgb, var(--c1) 26%, rgba(255, 255, 255, .08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 50px -32px color-mix(in srgb, var(--c1) 70%, transparent); transition: border-color .4s, box-shadow .4s, transform .5s var(--ease); }
.geq::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--c1), var(--c2)); box-shadow: 0 0 16px var(--c1); }
.geq::after { content: ""; position: absolute; z-index: -1; right: 12%; top: 50%; width: 260px; height: 260px; margin-top: -130px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c1) 20%, transparent), transparent); opacity: .7; transition: opacity .4s, transform .8s var(--ease); }
.geq:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c1) 55%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 34px 60px -30px color-mix(in srgb, var(--c1) 85%, transparent); }
.geq:hover::after { opacity: 1; transform: scale(1.25); }
.geq__no { font-family: var(--font-display); font-size: .74rem; font-weight: 800; letter-spacing: .18em; color: var(--c1); }
.geq__name h3 { margin: 4px 0 6px; font-size: 1.45rem; color: var(--g-text); }
.geq__name p { margin: 0; color: var(--g-muted); font-size: .9rem; line-height: 1.55; }
.geq__sum { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.4vw, 16px); }
.geq__token, .geq__result { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 92px; text-align: center; text-decoration: none; }
.geq__orb { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #ffffff, color-mix(in srgb, var(--c1) 70%, #ffffff) 35%, var(--c1) 75%); color: var(--g-dark); box-shadow: inset -4px -6px 12px rgba(0, 0, 0, .18), 0 12px 26px -10px var(--c1); transition: transform .5s var(--ease); }
.geq:hover .geq__orb { animation: geqhop .7s var(--ease); animation-delay: calc(var(--k) * .1s); }
@keyframes geqhop { 40% { transform: translateY(-8px); } }
.geq__label { color: var(--g-text); font-size: .8rem; font-weight: 700; line-height: 1.25; }
.geq__token:hover .geq__label { color: var(--c1); }
.geq__op { font-family: var(--font-display); font-size: 1.5rem; font-weight: 300; color: color-mix(in srgb, var(--c1) 70%, #ffffff); margin-bottom: 26px; }
.geq__op--eq { font-weight: 600; }
.geq__result { width: 120px; }
.geq__rorb { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 20px; background: linear-gradient(135deg, var(--c1), var(--c2)); color: var(--g-dark); box-shadow: inset 0 2px 1px rgba(255, 255, 255, .6), 0 0 0 6px color-mix(in srgb, var(--c1) 16%, transparent), 0 16px 34px -10px var(--c1); transform: rotate(-6deg); }
.geq__result .geq__label { background: linear-gradient(100deg, #ffffff, var(--c1)); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: .84rem; }
.geq__cta { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.geq__btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 14px; background: linear-gradient(120deg, var(--c1), var(--c2)); color: var(--g-dark); font-weight: 700; font-size: .88rem; white-space: nowrap; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 12px 26px -12px var(--c1); transition: transform .3s, filter .3s; }
.geq__btn:hover { color: var(--g-dark); transform: translateY(-2px); filter: brightness(1.08); }
.geq__note { color: var(--g-muted); font-size: .74rem; }

/* Price tags hanging from glowing wires ------------------------------------- */
.gtags { display: grid; gap: 22px; }
.gtags__line { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: clamp(14px, 2vw, 28px); padding-top: 4px; }
.gtags__line::before { content: ""; position: absolute; left: 4%; right: 4%; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(94, 231, 240, .7), rgba(184, 161, 255, .8), rgba(255, 179, 107, .7), transparent); box-shadow: 0 0 14px rgba(184, 161, 255, .6); }
.gtag { --c1: var(--g-aqua); --c2: var(--g-lav); --len: 30px; position: relative; flex: 0 1 230px; padding-top: var(--len); color: var(--g-dark); text-decoration: none; transform-origin: 50% 0; animation: gsway 6s ease-in-out infinite; animation-delay: calc(var(--k) * -.9s); filter: drop-shadow(0 18px 26px color-mix(in srgb, var(--c1) 40%, transparent)); transition: filter .4s; }
@keyframes gsway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
.gtag:hover { animation-play-state: paused; filter: drop-shadow(0 26px 34px color-mix(in srgb, var(--c1) 65%, transparent)); }
/* The string from the wire to the tag hole */
.gtag::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: calc(var(--len) + 20px); margin-left: -1px; background: linear-gradient(180deg, rgba(255, 255, 255, .55), color-mix(in srgb, var(--c1) 80%, #ffffff)); }
.gtag::after { content: ""; position: absolute; left: 50%; top: -4px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--g-bg); border: 2px solid var(--c1); box-shadow: 0 0 10px var(--c1); }
.gtag__card { position: relative; display: flex; flex-direction: column; align-items: center; padding: 38px 18px 18px; text-align: center; background: radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .45), transparent 60%), linear-gradient(160deg, var(--c1), var(--c2)); clip-path: polygon(50% 0, 100% 34px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 34px); transition: transform .5s var(--ease); }
.gtag:hover .gtag__card { transform: translateY(-6px) rotate(2deg); }
.gtag__hole { position: absolute; left: 50%; top: 18px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--g-bg); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .5), 0 0 0 3px rgba(255, 255, 255, .5); }
.gtag__icon { display: grid; place-items: center; width: 44px; height: 44px; margin: 6px 0 10px; border-radius: 14px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 1px 0 #fff, 0 8px 18px -8px rgba(10, 15, 36, .5); }
.gtag__name { font-family: var(--font-display); font-weight: 800; font-size: 1rem; line-height: 1.2; }
.gtag__from { margin-top: 12px; font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .65; }
.gtag__price { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; white-space: nowrap; }
.gtag__bill { margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(10, 15, 36, .85); color: var(--c1); font-size: .7rem; font-weight: 700; }
.gtag__time { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: .74rem; font-weight: 600; opacity: .8; }
.gtag__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding-top: 12px; width: 100%; justify-content: center; border-top: 2px dashed rgba(10, 15, 36, .25); font-size: .82rem; font-weight: 800; transition: gap .3s; }
.gtag:hover .gtag__go { gap: 10px; }
.gprice__note { margin: 16px 0 0; color: var(--g-muted); text-align: center; }
.gprice__note a { color: var(--g-aqua); font-weight: 700; }

/* Process: compact zig-zag timeline ------------------------------------------ */
.gzig { position: relative; overflow-x: clip; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 14px; margin: 0; padding: 0; list-style: none; }
.gzig::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: linear-gradient(90deg, #5ee7f0, #b8a1ff, #ffb36b, #ff8fc7, #7cf0a9, #ffd86b); opacity: .55; }
.gzig::after { content: ""; position: absolute; left: 0; top: 50%; width: 120px; height: 4px; margin-top: -2px; border-radius: 4px; background: linear-gradient(90deg, transparent, #ffffff, transparent); box-shadow: 0 0 16px #ffffff; animation: gpulse 5s linear infinite; }
@keyframes gpulse { from { left: -120px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { left: 100%; opacity: 0; } }
.gzig__step { --zc: var(--g-aqua); display: grid; grid-template-rows: 1fr 64px 1fr; justify-items: center; text-align: center; }
.gzig__text { grid-row: 1; align-self: end; padding-bottom: 18px; max-width: 200px; }
.gzig__step--down .gzig__text { grid-row: 3; align-self: start; padding: 18px 0 0; }
.gzig__node { position: relative; grid-row: 2; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #ffffff, color-mix(in srgb, var(--zc) 65%, #ffffff) 35%, var(--zc) 75%); color: var(--g-dark); box-shadow: inset -4px -6px 12px rgba(0, 0, 0, .18), 0 0 0 6px var(--g-bg), 0 0 0 7px color-mix(in srgb, var(--zc) 45%, transparent), 0 14px 30px -8px var(--zc); transition: transform .5s var(--ease); }
.gzig__step:hover .gzig__node { transform: scale(1.12) rotate(-8deg); }
.gzig__node b { position: absolute; right: -6px; top: -6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--g-dark); border: 2px solid var(--zc); color: var(--g-text); font-size: .7rem; }
/* Short line joining the text to its icon */
.gzig__text { position: relative; }
.gzig__text::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 2px; height: 12px; margin-left: -1px; background: var(--zc); opacity: .7; }
.gzig__step--down .gzig__text::after { top: 0; bottom: auto; }
.gzig__no { display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--zc) 16%, transparent); color: var(--zc); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.gzig__text h3 { margin: 0 0 4px; font-size: 1rem; line-height: 1.25; color: var(--g-text); }
.gzig__text p { margin: 0 0 4px; color: var(--g-muted); font-size: .84rem; line-height: 1.5; }

/* Always included: bento grid ------------------------------------------------- */
.gbento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(150px, auto); gap: 14px; }
.gbento__lead { position: relative; overflow: hidden; isolation: isolate; grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 3vw, 40px); border-radius: 28px; background: linear-gradient(135deg, #5ee7f0, #b8a1ff 52%, #ffb36b); color: var(--g-dark); box-shadow: 0 34px 70px -34px rgba(184, 161, 255, .9); }
.gbento__lead::before { content: ""; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .35) 1.2px, transparent 1.6px); background-size: 16px 16px; mask-image: linear-gradient(135deg, #000, transparent 65%); -webkit-mask-image: linear-gradient(135deg, #000, transparent 65%); }
.gbento__ring { position: absolute; z-index: -1; right: -90px; bottom: -90px; width: 300px; height: 300px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); box-shadow: 0 0 0 40px rgba(255, 255, 255, .12), 0 0 0 80px rgba(255, 255, 255, .07); animation: breathe 6s ease-in-out infinite; }
.gbento__label { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: rgba(10, 15, 36, .85); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.gbento__title { max-width: 420px; margin: 14px 0 10px; font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.08; letter-spacing: -.02em; color: var(--g-dark); }
.gbento__lead > p { max-width: 440px; margin: 0; font-size: 1rem; line-height: 1.6; color: rgba(10, 15, 36, .78); }
.gbento__stat { display: flex; align-items: baseline; gap: 10px; margin-top: 22px; }
.gbento__stat strong { font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.gbento__stat span { font-weight: 700; font-size: .92rem; }
.gbento__tile { --bc: var(--g-aqua); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; border-radius: 22px; background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--bc) 24%, transparent), transparent 60%), rgba(14, 18, 44, .78); border: 1px solid color-mix(in srgb, var(--bc) 30%, transparent); transition: transform .5s var(--ease), border-color .4s, box-shadow .4s; }
.gbento__tile:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--bc) 70%, transparent); box-shadow: 0 26px 50px -26px var(--bc); }
.gbento__icon { position: absolute; left: 20px; top: 20px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: linear-gradient(145deg, var(--bc), color-mix(in srgb, var(--bc) 35%, #ffffff)); color: var(--g-dark); box-shadow: inset 0 2px 1px rgba(255, 255, 255, .6), 0 5px 0 -1px color-mix(in srgb, var(--bc) 45%, #000), 0 14px 26px -12px var(--bc); transition: transform .5s var(--ease); }
.gbento__tile:hover .gbento__icon { transform: rotate(-8deg) scale(1.08); }
.gbento__tile h3 { margin: 62px 0 4px; font-size: 1rem; line-height: 1.25; color: var(--g-text); }
.gbento__tile p { margin: 0; color: var(--g-muted); font-size: .84rem; line-height: 1.5; }
.gbento__check { position: absolute; right: 16px; top: 18px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--bc) 22%, transparent); color: var(--bc); }

/* Industries: floating glossy bubbles (no boxes) ----------------------------- */
.gbub { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 0; padding: 4px 0 24px; list-style: none; }
.gbub__item { --b1: #ff9aa2; --b2: #e0405a; --s: 220px; position: relative; width: var(--s); height: var(--s); outline: none; animation: gbob 7s ease-in-out infinite; animation-delay: calc(var(--k) * -.85s); }
.gbub__item:nth-child(even) { --s: 190px; margin-top: 30px; }
@keyframes gbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.gbub__item:hover, .gbub__item:focus-visible { animation-play-state: paused; z-index: 2; }
.gbub__ball { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #ffffff 0, var(--b1) 28%, var(--b2) 78%, color-mix(in srgb, var(--b2) 60%, #000) 100%); color: #10142a; box-shadow: inset -14px -18px 34px rgba(0, 0, 0, .25), inset 10px 10px 24px rgba(255, 255, 255, .25), 0 30px 50px -24px var(--b2), 0 0 0 1px rgba(255, 255, 255, .12); transition: transform .6s var(--ease), box-shadow .5s; }
/* Shine highlight and floor shadow */
.gbub__ball::before { content: ""; position: absolute; left: 18%; top: 10%; width: 36%; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .75), transparent); transform: rotate(-24deg); }
.gbub__item::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -26px; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--b2) 55%, transparent), transparent); filter: blur(4px); }
.gbub__front, .gbub__back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18%; text-align: center; transition: opacity .4s, transform .5s var(--ease); }
.gbub__icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 10px; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: inset 0 1px 0 #fff, 0 8px 18px -8px rgba(0, 0, 0, .4); }
.gbub__front strong { font-family: var(--font-display); font-size: 1.08rem; line-height: 1.2; }
.gbub__back { opacity: 0; transform: scale(.85); padding: 16%; }
.gbub__back small { font-size: .78rem; font-weight: 600; line-height: 1.45; }
.gbub__back em { margin-top: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(16, 20, 42, .85); color: var(--b1); font-style: normal; font-size: .66rem; font-weight: 800; }
.gbub__item:hover .gbub__ball, .gbub__item:focus-visible .gbub__ball { transform: scale(1.14); box-shadow: inset -14px -18px 34px rgba(0, 0, 0, .25), inset 10px 10px 24px rgba(255, 255, 255, .25), 0 40px 70px -20px var(--b2), 0 0 0 8px color-mix(in srgb, var(--b1) 25%, transparent); }
.gbub__item:hover .gbub__front, .gbub__item:focus-visible .gbub__front { opacity: 0; transform: scale(1.15); }
.gbub__item:hover .gbub__back, .gbub__item:focus-visible .gbub__back { opacity: 1; transform: none; }

/* Tools: app home screen ---------------------------------------------------- */
.gapps { display: grid; grid-template-columns: .75fr .75fr 1.25fr 1.25fr; gap: clamp(18px, 3vw, 40px); align-items: start; }
.gapps__title { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .1); color: var(--g-text); font-size: .82rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.gapps__title span { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--g-muted); font-size: .7rem; letter-spacing: 0; }
.gapps__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 14px 10px; margin: 0; padding: 0; list-style: none; }
.gapp { --ac: #5ee7f0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.gapp__icon { position: relative; overflow: hidden; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; background: var(--abg, var(--ac)); color: var(--afg, #fff); font-family: var(--font-display); font-weight: 800; font-size: 1.08rem; letter-spacing: -.02em; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -3px 6px rgba(0, 0, 0, .15), 0 0 0 1px rgba(255, 255, 255, .12), 0 12px 24px -12px var(--ac); transition: transform .5s var(--ease), box-shadow .4s; }
.gapp__icon::before { content: ""; position: absolute; left: 3px; right: 3px; top: 2px; height: 45%; border-radius: 16px 16px 40% 40%; background: linear-gradient(180deg, rgba(255, 255, 255, .32), transparent); pointer-events: none; }
.gapp__name { color: var(--g-muted); font-size: .76rem; font-weight: 600; line-height: 1.25; transition: color .3s; }
.gapp:hover .gapp__icon { animation: gappbounce .6s var(--ease); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 18px 34px -10px var(--ac); }
.gapp:hover .gapp__name { color: var(--g-text); }
@keyframes gappbounce { 0% { transform: none; } 35% { transform: translateY(-10px) scale(1.08); } 60% { transform: translateY(2px) scale(.97); } 100% { transform: translateY(-4px) scale(1.04); } }
.gapp:hover .gapp__icon { transform: translateY(-4px) scale(1.04); }

/* FAQ ------------------------------------------------------------------------------ */
.gfaq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
.gfaq__side { position: sticky; top: calc(var(--header-h) + 24px); }
.gfaq__ask { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 24px; padding: 26px; border-radius: 26px; background: linear-gradient(150deg, #1fae6b, #0f7a6e 55%, #0c4f5c); border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 30px 60px -30px rgba(37, 211, 102, .7); }
.gfaq__ask::before { content: ""; position: absolute; z-index: -1; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .25), transparent); }
.gfaq__wa { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 10px; border-radius: 18px; background: #25d366; color: #fff; box-shadow: inset 0 2px 1px rgba(255, 255, 255, .5), 0 12px 26px -10px #25d366; }
.gfaq__ask strong { color: #fff; font-family: var(--font-display); font-size: 1.25rem; }
.gfaq__ask > span:not(.gfaq__wa) { margin-bottom: 12px; color: rgba(255, 255, 255, .85); font-size: .92rem; }
.gfaq__btn { border-radius: 14px; background: #ffffff; color: #0c4f5c; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .5); }
.gfaq__btn:hover { color: #0c4f5c; transform: translateY(-2px); }
.gfaq__list { display: grid; gap: 10px; }
.page-template-services-page .gq { --qc: var(--g-aqua); position: relative; overflow: hidden; border-radius: 18px; background: linear-gradient(100deg, color-mix(in srgb, var(--qc) 10%, rgba(14, 18, 44, .85)), rgba(10, 14, 34, .7) 60%); border: 1px solid color-mix(in srgb, var(--qc) 28%, transparent); transition: border-color .3s, background .3s, box-shadow .3s; }
.gq::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--qc); box-shadow: 0 0 14px var(--qc); }
.gq:hover { border-color: color-mix(in srgb, var(--qc) 60%, transparent); }
.page-template-services-page .gq[open] { background: linear-gradient(100deg, color-mix(in srgb, var(--qc) 22%, rgba(14, 18, 44, .85)), rgba(10, 14, 34, .7) 70%); border-color: var(--qc); box-shadow: 0 24px 46px -28px var(--qc); }
.gq summary { display: flex; align-items: center; gap: 14px; padding: 14px 20px 14px 22px; cursor: pointer; list-style: none; }
.gq summary::-webkit-details-marker { display: none; }
.gq__no { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: color-mix(in srgb, var(--qc) 20%, transparent); color: var(--qc); font-family: var(--font-display); font-size: .78rem; font-weight: 800; transition: background .3s, color .3s; }
.gq[open] .gq__no { background: var(--qc); color: var(--g-dark); }
.gq__q { flex: 1; color: var(--g-text); font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; }
.gq[open] .gq__q { color: var(--qc); }
.gq__plus { position: relative; flex: none; width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb, var(--qc) 16%, transparent); transition: background .3s, transform .4s var(--ease); }
.gq__plus::before, .gq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--qc); transition: transform .3s, background .3s; }
.gq__plus::after { transform: rotate(90deg); }
.gq[open] .gq__plus { background: var(--qc); transform: rotate(180deg); }
.gq[open] .gq__plus::before, .gq[open] .gq__plus::after { background: var(--g-dark); }
.gq[open] .gq__plus::after { transform: rotate(0); }
.gq__a { margin: 0; padding: 0 22px 18px 70px; color: var(--g-text); opacity: .85; line-height: 1.7; }

/* Closing CTA: split banner ---------------------------------------------------- */
.gcta { padding-bottom: clamp(18px, 2vw, 28px); }
.gsplit { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); overflow: hidden; border-radius: 30px; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 40px 80px -40px rgba(184, 161, 255, .7); }
.gsplit__lead { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 3.5vw, 46px); background: linear-gradient(130deg, #5ee7f0, #b8a1ff 55%, #ffb36b); color: var(--g-dark); }
.gsplit__lead::before { content: ""; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .35) 1.2px, transparent 1.6px); background-size: 16px 16px; mask-image: linear-gradient(120deg, #000, transparent 70%); -webkit-mask-image: linear-gradient(120deg, #000, transparent 70%); }
.gsplit__lead::after { content: ""; position: absolute; z-index: -1; right: -70px; bottom: -90px; width: 240px; height: 240px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); box-shadow: 0 0 0 34px rgba(255, 255, 255, .12); }
.gsplit__label { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: rgba(10, 15, 36, .85); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.gsplit__title { margin: 12px 0 8px; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.05; letter-spacing: -.03em; color: var(--g-dark); }
.gsplit__lead p { max-width: 460px; margin: 0; font-size: .98rem; line-height: 1.6; color: rgba(10, 15, 36, .78); }
.gsplit__ways { display: flex; flex-direction: column; justify-content: center; gap: 8px; margin: 0; padding: clamp(18px, 2.5vw, 30px); list-style: none; background: rgba(10, 14, 34, .88); }
.gsplit__ways a { --wc: var(--g-aqua); min-width: 0; display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 18px; background: color-mix(in srgb, var(--wc) 8%, rgba(255, 255, 255, .03)); border: 1px solid color-mix(in srgb, var(--wc) 28%, transparent); color: var(--g-text); text-decoration: none; transition: background .3s, border-color .3s, transform .4s var(--ease); }
.gsplit__ways a:hover { transform: translateX(6px); background: color-mix(in srgb, var(--wc) 18%, transparent); border-color: var(--wc); color: var(--g-text); }
.gsplit__icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--wc); color: #fff; box-shadow: inset 0 2px 1px rgba(255, 255, 255, .45), 0 12px 24px -10px var(--wc); }
.gsplit__text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.gsplit__text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: 1.02rem; }
.gsplit__text small { color: var(--g-muted); font-size: .8rem; }
.gsplit__go { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--wc) 16%, transparent); color: var(--wc); transition: background .3s, color .3s, transform .4s var(--ease); }
.gsplit__ways a:hover .gsplit__go { background: var(--wc); color: var(--g-dark); transform: rotate(-45deg); }

/* Responsive ---------------------------------------------------------------------- */

@media (max-width: 1200px) {
}
@media (max-width: 900px) {
	.gzig { grid-template-columns: 1fr; gap: 18px; padding-left: 4px; }
	.gzig::before { left: 35px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; margin: 0; background: linear-gradient(180deg, #5ee7f0, #b8a1ff, #ffb36b, #ff8fc7, #7cf0a9, #ffd86b); }
	.gzig::after { display: none; }
	.gzig__step, .gzig__step--down { grid-template-rows: auto; grid-template-columns: 64px 1fr; justify-items: start; align-items: center; gap: 16px; text-align: left; }
	.gzig__node { grid-row: 1; grid-column: 1; }
	.gzig__text, .gzig__step--down .gzig__text { grid-row: 1; grid-column: 2; align-self: center; max-width: none; padding: 0; }
	.gzig__text::after { display: none; }
}
@media (max-width: 1024px) {
	.ghero__grid, .gfaq__grid { grid-template-columns: 1fr; }
	.gsplit { grid-template-columns: minmax(0, 1fr); }
	.gbento { grid-template-columns: repeat(2, 1fr); }
	.gfaq__side { position: static; }
	.gcards__grid { grid-template-columns: repeat(2, 1fr); }
	.gapps { grid-template-columns: 1fr 1fr; }
	.gmap { grid-template-columns: 1fr minmax(80px, .5fr) .9fr; }
	.sbox--ask { grid-column: 1 / -1; }
	.geq { grid-template-columns: 1fr; text-align: center; }
	.geq__name p { max-width: 460px; margin-inline: auto; }
	.gstage { height: 440px; }
}
@media (max-width: 640px) {
	.gstage { --r: 140px; --card: 84px; height: 300px; }
	.gring__card--orb { left: -38px; top: -38px; width: 76px; height: 76px; }
	.gring__card--orb svg { width: 28px; height: 28px; }
	.gring__face { gap: 8px; border-radius: 20px; }
	.gring__card .g3d { --s: 34px; }
	.gring__card .g3d svg { width: 18px; height: 18px; }
	.gring__card strong { font-size: .64rem; }
	.gintro__bar { grid-template-columns: 1fr; }
	.gintro__bar li + li { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
	.gcards__grid { grid-template-columns: 1fr; }
	.gbub { gap: 14px 10px; }
	.gsplit__text strong { white-space: normal; overflow-wrap: anywhere; font-size: .95rem; }
	.gq__a { padding-left: 22px; }
	.gapps { grid-template-columns: 1fr; }
	.gapps__grid { grid-template-columns: repeat(4, 1fr); }
	.gapp__icon { width: 54px; height: 54px; border-radius: 16px; font-size: 1.05rem; }
	.gbub__item, .gbub__item:nth-child(even) { --s: calc(50vw - 26px); margin-top: 0; }
	.gbub__item:nth-child(4n+2), .gbub__item:nth-child(4n+3) { margin-top: 0; }
	.gbub__front strong { font-size: .9rem; }
	.gbub__icon { width: 42px; height: 42px; margin-bottom: 6px; }
	.gbub__icon svg { width: 20px; height: 20px; }
	.gbento { gap: 10px; grid-auto-rows: auto; }
	.gbento__tile { padding: 16px; }
	.gbento__icon { left: 16px; top: 16px; width: 40px; height: 40px; }
	.gbento__tile h3 { margin-top: 52px; font-size: .92rem; }
	.gbento__tile p { font-size: .78rem; }
	.gmap { display: block; height: auto; }
	.gmap__lines, .gmap__svcs, .gmap__dot, .gmap__hint { display: none; }
	.gmap__goals { gap: 0; }
	.gmap__goal { flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
	.gmap__chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; padding-left: 60px; }
	.gmap__chips a { padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--gc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gc) 40%, transparent); color: var(--g-text); font-size: .78rem; font-weight: 600; text-decoration: none; }
	.sbox--ask { flex-direction: column; }
	.sbox--ask .sbox__head { flex: none; border-radius: 0 0 26px 26px; }
	.gtags { gap: 14px; }
	.gtags__line { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 0; }
	.gtags__line::before, .gtag::before, .gtag::after { display: none; }
	.gtag { padding-top: 0; animation: none; }
	.gtag:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px); }
	.gtag__card { padding: 34px 10px 14px; }
	.gtag__price { font-size: 1.3rem; }
	.gtag__name { font-size: .88rem; }
	.geq__sum { flex-wrap: wrap; gap: 4px; }
	.geq__token { width: 72px; }
	.geq__orb { width: 48px; height: 48px; }
	.geq__op { font-size: 1.2rem; }
	.geq__op--eq { flex-basis: 100%; margin: 4px 0; }
}
@media (prefers-reduced-motion: reduce) {
	body.page-template-services-page::before, .gring, .gring__face, .gmap__line, .gtag, .gzig::after, .gbento__ring, .gbub__item, .g3d--lg, .g3d--xl { animation: none; }
}