/* GTS hero / header — "Trading in the Zone" blue & gold design */
:root {
  --gx-bg: var(--gts-bg-950);
  --gx-navy: var(--gts-navy-800);
  --gx-deep: #071d36;
  --gx-blue: var(--gts-blue-500);
  --gx-cyan: var(--gts-cyan-400);
  --gx-gold: var(--gts-gold-500);
  --gx-gold-hi: var(--gts-gold-300);
  --gx-amber: var(--gts-amber-500);
  --gx-silver: var(--gts-silver-100);
  --gx-muted: var(--gts-silver-300);
  --gx-green: #18f28b;
  --gx-red: #ff3e56;
  --gx-thai: Kanit, "IBM Plex Sans Thai", "Noto Sans Thai", Tahoma, sans-serif;
  --gx-gold-grad: linear-gradient(180deg, #fff1c2 0%, #ffd56a 30%, #ffbf3f 58%, #e8901a 100%);
  --gx-max: 1520px;
  --gx-pad: clamp(16px, 4.4vw, 72px);
}

body { background: var(--gx-bg); }
.gx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gx-container { position: relative; z-index: 2; width: 100%; max-width: var(--gx-max); margin: 0 auto; padding: 0 var(--gx-pad); }

/* ---------- Buttons ---------- */
.gx-btn { --h: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: var(--h); padding: 0 26px; border-radius: 999px; font-family: var(--gx-thai); font-size: 17px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease, filter .25s ease; }
.gx-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.gx-btn:hover svg { transform: translateX(3px); }
.gx-btn:focus-visible { outline: 2px solid var(--gx-cyan); outline-offset: 3px; }
.gx-btn:active { transform: translateY(1px) scale(.99); }
.gx-btn-gold { color: #1a1003; background: var(--gx-gold-grad); border: 1px solid rgba(255, 236, 170, .9); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 4px rgba(170, 90, 0, .35), 0 0 0 1px rgba(255,191,63,.18), 0 8px 26px -6px rgba(255,157,28,.55); font-weight: 600; }
.gx-btn-gold:hover { filter: brightness(1.07); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 4px rgba(170,90,0,.35), 0 0 0 1px rgba(255,191,63,.3), 0 14px 34px -6px rgba(255,157,28,.7); }
.gx-btn-outline { color: var(--gx-silver); border: 1.5px solid rgba(238,244,250,.7); background: rgba(2,8,18,.35); }
.gx-btn-outline:hover { border-color: var(--gx-gold-hi); color: var(--gx-gold-hi); }
.gx-btn-blue { color: var(--gx-silver); border: 2px solid rgba(22,201,255,.75); background: linear-gradient(180deg, rgba(7,29,54,.55), rgba(2,8,18,.55)); box-shadow: inset 0 0 18px rgba(0,168,255,.18), 0 0 18px -4px rgba(0,168,255,.45); }
.gx-btn-blue:hover { transform: translateY(-2px); border-color: var(--gx-cyan); box-shadow: inset 0 0 22px rgba(0,168,255,.3), 0 0 28px -4px rgba(0,168,255,.7); }
.gx-btn-lg { --h: 62px; padding: 0 26px 0 40px; font-size: clamp(18px, 1.6vw, 24px); font-style: italic; font-weight: 600; }
.gx-btn-lg svg { width: 24px; height: 24px; }

/* ---------- Header ---------- */
.gx-header { position: sticky; top: 0; z-index: 60; height: 88px; background: linear-gradient(180deg, rgba(2,8,18,.92), rgba(2,8,18,.55)); transition: background-color .3s ease, box-shadow .3s ease; }
.gx-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(0,168,255,.35) 12%, var(--gx-cyan) 50%, rgba(0,168,255,.35) 88%, transparent 100%); box-shadow: 0 0 12px rgba(22,201,255,.7); }
.gx-header.is-scrolled { background: rgba(2,8,18,.78); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 10px 30px -10px rgba(0,0,0,.8); }
.gx-header-inner { height: 100%; max-width: var(--gx-max); margin: 0 auto; padding: 0 var(--gx-pad); display: flex; align-items: center; gap: 24px; }
.gx-logo { display: flex; align-items: center; gap: 18px; text-decoration: none; flex: none; }
.gx-logo:focus-visible { outline: 2px solid var(--gx-cyan); outline-offset: 6px; border-radius: 8px; }
.gx-logo-mark { width: 152px; height: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.gx-logo-tag { position: relative; padding-right: 26px; font-family: Inter, sans-serif; font-size: 15px; font-style: italic; color: var(--gx-silver); letter-spacing: .01em; }
.gx-logo-tag::after { content: ""; position: absolute; right: 0; top: -12px; bottom: -12px; width: 1px; background: linear-gradient(180deg, transparent, rgba(238,244,250,.45), transparent); }
.gx-nav { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 4.2vw, 68px); flex: 1; height: 100%; }
.gx-nav > a { position: relative; display: flex; align-items: center; height: 100%; color: var(--gx-silver); font-family: var(--gx-thai); font-size: 19px; font-weight: 400; white-space: nowrap; text-decoration: none; transition: color .2s ease; }
.gx-nav > a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 24px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--gx-gold-hi), transparent); box-shadow: 0 0 10px rgba(255,191,63,.8); transition: left .25s ease, right .25s ease; }
.gx-nav > a:hover { color: var(--gx-gold-hi); }
.gx-nav > a:hover::after, .gx-nav > a.is-active::after { left: -6px; right: -6px; }
.gx-nav > a.is-active { color: var(--gx-gold); font-weight: 600; text-shadow: 0 0 18px rgba(255,191,63,.45); }
.gx-nav > a:focus-visible { outline: 2px solid var(--gx-cyan); outline-offset: 4px; border-radius: 6px; }
.gx-nav-mobile-actions { display: none; }
.gx-header-actions { display: flex; gap: 16px; flex: none; }
.gx-header-actions .gx-btn { --h: 46px; font-size: 18px; padding: 0 26px; }
.gx-burger { display: none; width: 46px; height: 46px; margin-left: auto; padding: 0; border: 1px solid rgba(255,191,63,.45); border-radius: 14px; background: rgba(7,29,54,.6); cursor: pointer; }
.gx-burger span { display: block; width: 20px; height: 2px; margin: 4px auto; border-radius: 2px; background: var(--gx-gold-hi); transition: transform .25s ease, opacity .25s ease; }
.gx-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.gx-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.gx-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.gx-burger:focus-visible { outline: 2px solid var(--gx-cyan); outline-offset: 3px; }

/* ---------- Hero ---------- */
.gx-hero { position: relative; isolation: isolate; overflow: hidden; margin-top: -88px; padding: 88px 0 22px; background:
  radial-gradient(ellipse 60% 55% at 72% 38%, rgba(0,90,180,.32), transparent 70%),
  radial-gradient(ellipse 50% 60% at 10% 30%, rgba(7,40,90,.45), transparent 70%),
  linear-gradient(180deg, #020812 0%, #041024 55%, #020812 100%); }
.gx-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.gx-bg-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.gx-bg-glow { position: absolute; border-radius: 50%; filter: blur(60px); }
.gx-bg-glow-l { left: -12%; top: -14%; width: 40%; height: 32%; background: radial-gradient(closest-side, rgba(255,170,60,.28), transparent); }
.gx-bg-glow-r { right: -8%; bottom: 0; width: 46%; height: 40%; background: radial-gradient(closest-side, rgba(0,140,255,.32), transparent); }
.gx-bg-grid { position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(42,107,179,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(42,107,179,.08) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 30%, transparent 80%); }
.gx-bg-candles { position: absolute; top: 14%; width: 9%; height: 46%; opacity: .32; filter: blur(.6px);
  background:
    linear-gradient(#ff3e56,#ff3e56) 10% 40% / 8px 22% no-repeat,
    linear-gradient(#00a8ff,#00a8ff) 30% 55% / 8px 30% no-repeat,
    linear-gradient(#00a8ff,#00a8ff) 50% 35% / 8px 26% no-repeat,
    linear-gradient(#ff3e56,#ff3e56) 70% 20% / 8px 18% no-repeat,
    linear-gradient(#00a8ff,#00a8ff) 90% 10% / 8px 24% no-repeat; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.gx-bg-candles-l { left: 0; }
.gx-bg-candles-r { right: 0; top: 10%; }

.gx-hero-grid { display: grid; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); align-items: center; gap: clamp(16px, 2vw, 40px); min-height: clamp(430px, 33vw, 520px); padding-top: clamp(18px, 2vw, 36px); padding-bottom: 8px; }
.gx-hero-copy { position: relative; z-index: 3; padding-left: clamp(0px, 2.4vw, 48px); animation: gx-rise .9s cubic-bezier(.2,.7,.2,1) both; }
.gx-title { margin: 0; font-family: var(--gx-thai); font-style: italic; font-weight: 800; font-size: clamp(40px, 5.15vw, 88px); line-height: 1.14; letter-spacing: -.005em; }
.gx-title span { display: block; width: max-content; padding: .04em .22em .1em 0; white-space: nowrap; }
.gx-title-silver { color: var(--gx-silver); background: linear-gradient(180deg, #ffffff 0%, #f1f5fa 45%, #aab8c8 62%, #e9eff6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 3px 0 rgba(10,20,40,.55)) drop-shadow(0 10px 20px rgba(0,0,0,.55)); }
.gx-title-gold { color: var(--gx-gold); background: linear-gradient(180deg, #fff3c8 0%, #ffd56a 30%, #ffbf3f 55%, #f39a1f 78%, #ffd56a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 3px 0 rgba(90,45,0,.55)) drop-shadow(0 0 22px rgba(255,157,28,.35)); }
.gx-lead { position: relative; margin: clamp(18px, 2vw, 30px) 0 0; padding-left: 26px; max-width: 700px; color: var(--gx-silver); font-family: var(--gx-thai); font-size: clamp(16px, 1.36vw, 22px); font-style: italic; font-weight: 400; line-height: 1.6; }
.gx-lead::before { content: ""; position: absolute; left: 0; top: 8%; bottom: 8%; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--gx-gold-hi), var(--gx-amber)); box-shadow: 0 0 12px rgba(255,191,63,.6); }
.gx-cta { display: flex; flex-wrap: wrap; gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(26px, 2.6vw, 42px); }
.gx-cta .gx-btn-gold { min-width: clamp(230px, 18vw, 320px); }
.gx-cta .gx-btn-blue { min-width: clamp(180px, 13vw, 230px); padding-left: 34px; }

/* ---------- Dashboard ---------- */
.gx-dash-wrap { position: relative; z-index: 2; perspective: 1800px; animation: gx-rise 1s .15s cubic-bezier(.2,.7,.2,1) both; }
.gx-dash { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: 32px; padding: 3px; transform: rotateY(-11deg) rotateX(4deg) rotateZ(-2deg); transform-origin: 30% 50%;
  background: linear-gradient(135deg, #ffe7a0 0%, #ffbf3f 14%, #6b4a12 32%, #0d2a4a 50%, #00a8ff 70%, #ffbf3f 88%, #fff1c2 100%);
  box-shadow: 0 0 0 1px rgba(255,213,106,.25), 0 0 34px rgba(255,170,50,.32), 0 0 90px -10px rgba(0,140,255,.45), 0 40px 80px -20px rgba(0,0,0,.9); }
.gx-dash-inner { position: relative; height: 100%; overflow: hidden; border-radius: 29px; background: radial-gradient(ellipse 80% 70% at 60% 50%, #0a2140 0%, #05101f 70%, #030a15 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 40px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.18); }
.gx-dash-inner::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.09) 0%, transparent 28%, transparent 70%, rgba(255,255,255,.04) 100%); }
.gx-dash-badge { position: absolute; z-index: 4; left: 4.2%; top: 7.5%; display: flex; align-items: center; gap: 10px; padding: .55em 1.1em; border-radius: 999px; border: 1px solid rgba(238,244,250,.28); background: linear-gradient(180deg, rgba(20,40,70,.85), rgba(4,12,24,.85)); color: var(--gx-silver); font-family: Inter, sans-serif; font-size: clamp(11px, 1.05vw, 17px); font-style: italic; font-weight: 500; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.gx-dash-badge svg { width: 1.3em; fill: var(--gx-gold); }
.gx-chart { position: absolute; inset: 0; width: 100%; height: 100%; }
.gx-zone-edge { stroke: var(--gx-cyan); stroke-width: 3; filter: drop-shadow(0 0 6px #16c9ff); }
.gx-zone { stroke: rgba(22,201,255,.5); stroke-width: 1.5; }
.gx-l-tp { stroke: var(--gx-green); }
.gx-l-entry { stroke: var(--gx-cyan); }
.gx-l-sl { stroke: var(--gx-red); }
.gx-box-profit { stroke: rgba(24,242,139,.25); }
.gx-candles .cu line, .gx-candles .cu rect { stroke: #22e39a; fill: #18d98a; }
.gx-candles .cd line, .gx-candles .cd rect { stroke: #ff3e56; fill: #ff3e56; }
.gx-candles line { stroke-width: 2; }
.gx-candles rect { stroke-width: 0; }
.gx-candles g { filter: drop-shadow(0 0 3px currentColor); animation: gx-candle .6s calc(var(--i) * 28ms + .5s) cubic-bezier(.2,.7,.2,1) both; transform-box: fill-box; transform-origin: 50% 100%; }
.gx-candles .cu { color: rgba(24,242,139,.6); }
.gx-candles .cd { color: rgba(255,62,86,.6); }
.gx-arrow { stroke-dasharray: 420; stroke-dashoffset: 420; animation: gx-draw 1.3s 1.4s ease-out forwards; }
.gx-arrow-head { opacity: 0; animation: gx-fade .4s 2.4s ease-out forwards; }
.gx-tags { position: absolute; inset: 0; z-index: 4; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.gx-tag { position: absolute; right: 1.6%; top: calc(var(--y) / 560 * 100%); transform: translateY(-50%); min-width: 4.4em; padding: .2em .8em; border-radius: 999px; font-family: Inter, sans-serif; font-size: clamp(11px, 1.7vw, 27px); font-style: italic; font-weight: 700; line-height: 1.2; text-align: center; color: #fff; border: 2px solid; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.gx-tag-tp { color: #eafff4; border-color: #18f28b; background: linear-gradient(180deg, #0d6a40, #063c24); box-shadow: 0 0 14px rgba(24,242,139,.45), inset 0 1px 0 rgba(255,255,255,.25); }
.gx-tag-entry { color: #e8f8ff; border-color: #16c9ff; background: linear-gradient(180deg, #0a4e93, #062b55); box-shadow: 0 0 14px rgba(22,201,255,.55), inset 0 1px 0 rgba(255,255,255,.25); }
.gx-tag-sl { color: #fff0f2; border-color: #ff3e56; background: linear-gradient(180deg, #a01226, #5c0613); box-shadow: 0 0 14px rgba(255,62,86,.55), inset 0 1px 0 rgba(255,255,255,.25); }
.gx-dash-sweep { position: absolute; inset: 0; border-radius: 32px; pointer-events: none; overflow: hidden; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 3px; }
.gx-dash-sweep::before { content: ""; position: absolute; top: -50%; left: -30%; width: 30%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent); transform: rotate(20deg); animation: gx-sweep 7s 2s ease-in-out infinite; }
.gx-ridge { position: absolute; left: 2%; right: 6%; bottom: -10%; width: 92%; height: 18%; z-index: -1; opacity: .9; filter: drop-shadow(0 -6px 16px rgba(0,140,255,.25)); }

/* ---------- Trust strip ---------- */
.gx-trust { position: relative; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-evenly; align-items: center; margin: clamp(18px, 2vw, 34px) 0 0; padding: 0 2%; min-height: 62px; list-style: none; border-radius: 30px; border: 1px solid rgba(255,191,63,.28);
  background: linear-gradient(180deg, rgba(10,28,52,.62), rgba(3,10,22,.72)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(0,168,255,.12), 0 0 26px -6px rgba(0,140,255,.35), 0 18px 40px -16px rgba(0,0,0,.8); animation: gx-rise .9s .3s cubic-bezier(.2,.7,.2,1) both; }
.gx-trust::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,191,63,.9), transparent); }
.gx-trust li { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px clamp(10px, 2vw, 40px); color: var(--gx-silver); font-family: var(--gx-thai); font-size: clamp(14px, 1.3vw, 20px); font-style: italic; }
.gx-trust li + li::before { content: ""; position: absolute; left: 0; top: 30%; bottom: 30%; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--gx-gold-hi), var(--gx-amber)); }
.gx-trust svg { width: 34px; height: 34px; flex: none; fill: none; stroke: var(--gx-gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255,191,63,.45)); }
.gx-trust svg .gx-fill, .gx-trust svg .gx-fill * { fill: var(--gx-gold); stroke: none; }

/* ---------- Feature cards ---------- */
.gx-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); margin-top: clamp(18px, 2vw, 30px); scroll-margin-top: 110px; }
.gx-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: clamp(16px, 1.8vw, 28px); min-height: clamp(140px, 11vw, 170px); padding: clamp(18px, 2vw, 30px); border-radius: 26px; border: 1px solid rgba(160,190,230,.22);
  background: linear-gradient(140deg, rgba(14,36,66,.78) 0%, rgba(5,16,32,.85) 55%, rgba(4,20,44,.85) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,191,63,.08), 0 0 0 1px rgba(0,0,0,.4), 0 24px 48px -20px rgba(0,0,0,.9); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; animation: gx-rise .9s cubic-bezier(.2,.7,.2,1) both; }
.gx-card:nth-child(1) { animation-delay: .4s; } .gx-card:nth-child(2) { animation-delay: .5s; } .gx-card:nth-child(3) { animation-delay: .6s; }
.gx-card::before { content: ""; position: absolute; right: -10%; bottom: -30%; width: 75%; height: 80%; pointer-events: none; background: radial-gradient(ellipse at 70% 80%, rgba(0,168,255,.38), transparent 60%); }
.gx-card::after { content: ""; position: absolute; left: 30%; right: -5%; bottom: 14%; height: 2px; pointer-events: none; transform: rotate(-12deg); background: linear-gradient(90deg, transparent, rgba(22,201,255,.9) 60%, transparent); filter: blur(.5px); box-shadow: 0 0 12px rgba(22,201,255,.8); opacity: .8; }
.gx-card:hover { transform: translateY(-5px); border-color: rgba(255,213,106,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,191,63,.18), 0 0 30px -6px rgba(255,191,63,.3), 0 30px 54px -20px rgba(0,0,0,.95); }
.gx-card-icon { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: clamp(72px, 6vw, 100px); aspect-ratio: 1; border-radius: 22px; padding: 2px; background: linear-gradient(145deg, #fff1c2, #ffbf3f 30%, #6b4a12 60%, #ffbf3f); box-shadow: 0 0 18px rgba(255,170,50,.35), 0 10px 20px rgba(0,0,0,.6); }
.gx-card-icon::before { content: ""; position: absolute; inset: 2px; border-radius: 20px; background: radial-gradient(circle at 35% 25%, #1b2a3c, #070c14 70%); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.gx-card-icon svg { position: relative; width: 62%; height: 62%; fill: none; stroke: var(--gx-gold); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(255,191,63,.55)); }
.gx-card-icon svg .gx-fill { fill: var(--gx-gold); stroke: none; }
.gx-card-text { position: relative; z-index: 1; padding-left: clamp(16px, 1.8vw, 28px); border-left: 2px solid rgba(255,191,63,.75); }
.gx-card h2 { margin: 0; white-space: nowrap; font-family: var(--gx-thai); font-size: clamp(22px, 2.05vw, 34px); font-style: italic; font-weight: 700; line-height: 1.2; color: var(--gx-silver); letter-spacing: 0; }
.gx-card h2 em { background: var(--gx-gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gx-gold); padding-right: .08em; }
.gx-card:nth-child(3) h2 { color: var(--gx-silver); }
.gx-card:nth-child(3) h2 em { background: none; -webkit-text-fill-color: var(--gx-silver); color: var(--gx-silver); }
.gx-card p { margin: 10px 0 0; color: var(--gx-muted); font-family: var(--gx-thai); font-size: clamp(14px, 1.12vw, 18px); font-style: italic; line-height: 1.5; color: #d6e0ea; }
.gx-note { margin: 18px 0 0; text-align: center; color: rgba(170,184,200,.6); font-family: var(--gx-thai); font-size: 12px; }

/* ---------- Motion ---------- */
@keyframes gx-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes gx-candle { from { opacity: 0; transform: scaleY(.2); } to { opacity: 1; transform: none; } }
@keyframes gx-draw { to { stroke-dashoffset: 0; } }
@keyframes gx-fade { to { opacity: 1; } }
@keyframes gx-sweep { 0% { left: -40%; } 35%, 100% { left: 130%; } }
.gx-card:hover { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .gx-hero *, .gx-hero *::before, .gx-hero *::after { animation: none !important; transition: none !important; }
  .gx-arrow { stroke-dashoffset: 0; }
  .gx-arrow-head { opacity: 1; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
  .gx-logo-tag { display: none; }
  .gx-nav { gap: 30px; }
  .gx-nav > a { font-size: 17px; }
  .gx-header-actions .gx-btn { font-size: 16px; padding: 0 20px; }
  .gx-hero-copy { padding-left: 0; }
  .gx-btn-lg { padding: 0 24px 0 36px; }
}
@media (max-width: 1079px) {
  .gx-header { height: 76px; }
  .gx-hero { margin-top: -76px; padding-top: 76px; }
  .gx-header-actions { display: none; }
  .gx-burger { display: block; }
  .gx-nav { position: fixed; top: 76px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; height: auto; max-height: calc(100dvh - 76px); overflow-y: auto; padding: 10px var(--gx-pad) 24px; background: rgba(2,8,18,.97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(22,201,255,.4); box-shadow: 0 20px 40px rgba(0,0,0,.6); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease, visibility 0s .25s; }
  .gx-nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease; }
  .gx-nav > a { height: 54px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 18px; }
  .gx-nav > a::after { bottom: 10px; }
  .gx-nav > a.is-active::after, .gx-nav > a:hover::after { left: 0; right: auto; width: 48px; }
  .gx-nav-mobile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
  .gx-nav-mobile-actions .gx-btn { --h: 50px; }
  .gx-hero-grid { grid-template-columns: 1fr; gap: 40px; min-height: 0; padding-top: 40px; }
  .gx-hero-copy { text-align: left; }
  .gx-title { font-size: clamp(40px, 8.4vw, 84px); }
  .gx-dash-wrap { max-width: 860px; width: 100%; margin: 0 auto; }
  .gx-dash { transform: rotateY(-6deg) rotateX(3deg) rotateZ(-1deg); }
  .gx-trust { grid-template-columns: repeat(2, 1fr); justify-content: stretch; padding: 8px 12px; }
  .gx-trust li { padding: 14px 18px; }
  .gx-trust li + li::before { display: none; }
  .gx-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gx-features .gx-card:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .gx-header { height: 68px; }
  .gx-hero { margin-top: -68px; padding-top: 68px; }
  .gx-nav { top: 68px; max-height: calc(100dvh - 68px); }
  .gx-logo-mark { width: 116px; }
  .gx-hero-grid { padding-top: 28px; gap: 34px; }
  .gx-title { font-size: clamp(34px, 10.6vw, 60px); }
  .gx-title span { white-space: normal; }
  .gx-br { display: none; }
  .gx-lead { padding-left: 20px; font-size: 16px; }
  .gx-cta { flex-direction: column; }
  .gx-cta .gx-btn { width: 100%; min-width: 0; --h: 56px; padding: 0 24px; font-size: 18px; }
  .gx-dash { border-radius: 20px; padding: 2px; transform: none; }
  .gx-dash-inner { border-radius: 18px; }
  .gx-dash-sweep { border-radius: 20px; padding: 2px; }
  .gx-dash-badge { gap: 6px; }
  .gx-tag { border-width: 1.5px; min-width: 3.8em; font-size: 11px; }
  .gx-bg-candles, .gx-bg-glow { display: none; }
  .gx-bg-lines path[filter] { display: none; }
  .gx-ridge { display: none; }
  .gx-trust { grid-template-columns: 1fr; border-radius: 22px; }
  .gx-trust li { padding: 12px 8px; font-size: 15px; }
  .gx-trust li + li { border-top: 1px solid rgba(255,191,63,.14); }
  .gx-features { grid-template-columns: 1fr; }
  .gx-features .gx-card:nth-child(3) { grid-column: auto; }
  .gx-card { border-radius: 22px; min-height: 0; }
  .gx-card::after { display: none; }
  .gx-trust, .gx-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.gx-nw { white-space: nowrap; }
@media (min-width: 1080px) and (max-width: 1399px) {
  .gx-logo-tag { display: none; }
  .gx-nav { gap: clamp(22px, 2.6vw, 40px); }
  .gx-nav > a { font-size: 17px; }
  .gx-header-actions { gap: 12px; }
  .gx-header-actions .gx-btn { font-size: 16px; padding: 0 20px; }
}