/* ==========================================================================
   Stratgik V2 — Homepage motion & graphics layer
   Loaded only on the homepage. Pure CSS + IntersectionObserver; no libraries.
   Everything degrades to a static, readable page under prefers-reduced-motion.
   ========================================================================== */

/* Icons inside homepage components never stretch to fill a flex line. */
.sgx-btn svg,.sgx-cat__ic svg,.sgx-float__ic svg,.sgx-marquee__item svg,
.sgx-poster__go svg,.sgx-ba__row svg,.sgx-ba__arrow svg{flex:none;height:auto}
.sgx-cta-row{align-items:center}

/* ---------- Shared atmospheric backgrounds ---------- */
.sgx-stage{position:relative;isolation:isolate;overflow:clip}

.sgx-aurora{position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;filter:blur(60px);opacity:.85}
.sgx-aurora span{
  position:absolute;display:block;border-radius:50%;
  mix-blend-mode:screen;will-change:transform;
}
.sgx-aurora span:nth-child(1){width:46vw;height:46vw;left:52%;top:-12%;background:radial-gradient(circle at 35% 35%,rgba(221,73,66,.75),transparent 62%);animation:sgx-drift-a 22s ease-in-out infinite}
.sgx-aurora span:nth-child(2){width:40vw;height:40vw;left:-8%;top:38%;background:radial-gradient(circle at 60% 40%,rgba(23,140,171,.75),transparent 62%);animation:sgx-drift-b 27s ease-in-out infinite}
.sgx-aurora span:nth-child(3){width:32vw;height:32vw;left:28%;top:62%;background:radial-gradient(circle at 50% 50%,rgba(255,138,110,.5),transparent 64%);animation:sgx-drift-c 19s ease-in-out infinite}
@keyframes sgx-drift-a{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-6%,7%,0) scale(1.14)}}
@keyframes sgx-drift-b{0%,100%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(9%,-6%,0) scale(.92)}}
@keyframes sgx-drift-c{0%,100%{transform:translate3d(0,0,0) scale(.95)}50%{transform:translate3d(5%,-9%,0) scale(1.18)}}

.sgx-grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 78% 68% at 50% 34%,#000 20%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 78% 68% at 50% 34%,#000 20%,transparent 76%);
  animation:sgx-grid-pan 34s linear infinite;
}
@keyframes sgx-grid-pan{to{background-position:72px 72px,72px 72px}}

.sgx-noise{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.sgx-glow-line{
  position:absolute;left:0;right:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28) 18%,rgba(221,73,66,.75) 50%,rgba(255,255,255,.28) 82%,transparent);
}
.sgx-glow-line--top{top:0}
.sgx-glow-line--bottom{bottom:0}

.sgx-inner{position:relative;z-index:3}

/* ---------- HERO ---------- */
.sgx-hero{
  position:relative;min-height:clamp(620px,90svh,940px);
  display:flex;align-items:center;
  background:linear-gradient(168deg,#0A3949 0%,#093442 55%,#093442 100%);
  color:var(--sg-text-inv-2);padding-block:var(--sg-13) var(--sg-11);
}
.sgx-hero__grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:var(--sg-12);align-items:center}

.sgx-badge{
  display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;margin-bottom:var(--sg-6);
  border-radius:var(--sg-r-pill);font-size:.78rem;font-weight:560;letter-spacing:.01em;color:#F4FAFC;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);position:relative;overflow:hidden;
}
.sgx-badge::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--a,0deg),transparent 0deg,rgba(221,73,66,.9) 55deg,transparent 120deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:sgx-spin 4.5s linear infinite;
}
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes sgx-spin{to{--a:360deg}}
.sgx-badge .dot{width:7px;height:7px;border-radius:50%;background:#3DDC97;box-shadow:0 0 0 4px rgba(61,220,151,.18);flex:none;animation:sgx-pulse 2.2s ease-in-out infinite}
@keyframes sgx-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.82)}}

.sgx-title{
  font-family:var(--sg-font-display);font-weight:700;letter-spacing:-.038em;line-height:1.02;color:#fff;
  font-size:clamp(2.05rem,1.25rem + 2.25vw,3.3rem);margin:0;
}
.sgx-title .w{display:inline-block;opacity:0;transform:translateY(.5em) rotate(2deg);filter:blur(6px)}
.sgx-title.is-in .w{animation:sgx-word .78s cubic-bezier(.16,1,.3,1) forwards}
@keyframes sgx-word{to{opacity:1;transform:none;filter:blur(0)}}
.sgx-title .grad{
  background:linear-gradient(100deg,#FF8A7E 0%,#DD4942 45%,#FFB4A2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.sgx-hero__sub{font-size:clamp(1.02rem,.96rem + .35vw,1.2rem);line-height:1.6;color:#E8F2F6;max-width:46ch;margin-top:var(--sg-8)}

.sgx-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:var(--sg-8)}
.sgx-btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:17px 30px;border-radius:12px;font-size:1rem;font-weight:640;letter-spacing:-.01em;
  color:#fff;background:linear-gradient(135deg,#C63A33,#A62E28);border:0;cursor:pointer;text-decoration:none;
  box-shadow:0 10px 30px rgba(221,73,66,.32),inset 0 1px 0 rgba(255,255,255,.22);
  overflow:hidden;transition:transform .22s var(--sg-ease-out),box-shadow .22s var(--sg-ease-out);
}
.sgx-btn::before{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);animation:sgx-sheen 4.2s ease-in-out infinite;
}
@keyframes sgx-sheen{0%,62%{left:-120%}88%,100%{left:150%}}
.sgx-btn:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(221,73,66,.42),inset 0 1px 0 rgba(255,255,255,.24);color:#fff}
.sgx-btn svg{width:17px;height:17px;position:relative;transition:transform .22s var(--sg-ease)}
.sgx-btn:hover svg{transform:translateX(4px)}

.sgx-btn--ghost{
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  backdrop-filter:blur(8px);
}
.sgx-btn--ghost::before{display:none}
.sgx-btn--ghost:hover{background:rgba(255,255,255,.11);box-shadow:inset 0 0 0 1px rgba(255,255,255,.36)}

.sgx-scrollcue{
  position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.42);
}
.sgx-scrollcue i{display:block;width:1px;height:44px;background:linear-gradient(rgba(255,255,255,.5),transparent);position:relative;overflow:hidden}
.sgx-scrollcue i::after{content:"";position:absolute;inset:0;background:#DD4942;animation:sgx-cue 2.1s ease-in-out infinite}
@keyframes sgx-cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- Hero device: live operations console ---------- */
.sgx-device{
  position:relative;border-radius:20px;overflow:hidden;
  background:linear-gradient(165deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
  box-shadow:0 50px 110px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter:blur(14px);
  transform:perspective(1400px) rotateY(-7deg) rotateX(3deg) translateZ(0);
  transition:transform .7s var(--sg-ease-out);
}
.sgx-device::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.30),transparent 42%,rgba(221,73,66,.36));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.sgx-device:hover{transform:perspective(1400px) rotateY(-2deg) rotateX(1deg)}
.sgx-device__bar{display:flex;align-items:center;gap:7px;padding:13px 18px;background:rgba(0,0,0,.30);border-bottom:1px solid rgba(255,255,255,.08)}
.sgx-device__bar b{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.sgx-device__bar span{margin-left:10px;font-family:var(--sg-font-mono);font-size:.7rem;color:#B9D0D9;letter-spacing:.02em}
.sgx-device__live{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:.66rem;color:#3DDC97;letter-spacing:.08em}
.sgx-device__live i{width:6px;height:6px;border-radius:50%;background:#3DDC97;animation:sgx-pulse 1.6s infinite}
.sgx-device__body{padding:6px 0;min-height:310px}

.sgx-ev{
  display:flex;align-items:center;gap:13px;padding:12px 18px;
  border-bottom:1px solid rgba(255,255,255,.045);
  opacity:0;transform:translateX(-14px);
}
.sgx-ev:last-child{border-bottom:0}
.sgx-device.is-in .sgx-ev{animation:sgx-ev-in .55s var(--sg-ease-out) forwards}
.sgx-device.is-in .sgx-ev:nth-child(1){animation-delay:.30s}
.sgx-device.is-in .sgx-ev:nth-child(2){animation-delay:.62s}
.sgx-device.is-in .sgx-ev:nth-child(3){animation-delay:.94s}
.sgx-device.is-in .sgx-ev:nth-child(4){animation-delay:1.26s}
.sgx-device.is-in .sgx-ev:nth-child(5){animation-delay:1.58s}
.sgx-device.is-in .sgx-ev:nth-child(6){animation-delay:1.90s}
.sgx-device.is-in .sgx-ev:nth-child(7){animation-delay:2.22s}
@keyframes sgx-ev-in{to{opacity:1;transform:none}}
.sgx-ev__tag{
  font-family:var(--sg-font-mono);font-size:.7rem;font-weight:500;letter-spacing:.02em;
  padding:5px 10px;border-radius:6px;white-space:nowrap;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);color:#EDF6F9;
}
.sgx-ev__tag[data-t="warn"]{background:rgba(224,160,32,.14);border-color:rgba(224,160,32,.35);color:#F2C36B}
.sgx-ev__tag[data-t="bad"]{background:rgba(221,73,66,.16);border-color:rgba(221,73,66,.4);color:#FF9A93}
.sgx-ev__tag[data-t="good"]{background:rgba(61,220,151,.14);border-color:rgba(61,220,151,.34);color:#6FE3B4}
.sgx-ev__tag[data-t="human"]{background:rgba(120,180,255,.14);border-color:rgba(120,180,255,.32);color:#A8CBFF}
.sgx-ev__meta{margin-left:auto;font-family:var(--sg-font-mono);font-size:.7rem;color:#AFC9D3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sgx-device__foot{
  display:flex;align-items:center;gap:10px;padding:13px 18px;
  background:rgba(0,0,0,.28);border-top:1px solid rgba(255,255,255,.08);
  font-size:.7rem;color:#AFC9D3;
}
.sgx-device__progress{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden}
.sgx-device__progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#DD4942,#3DDC97);border-radius:2px}
.sgx-device.is-in .sgx-device__progress i{animation:sgx-fill 2.6s .3s var(--sg-ease-out) forwards}
@keyframes sgx-fill{to{width:100%}}

/* Floating satellite chips around the device */
.sgx-float{position:absolute;z-index:4;display:flex;align-items:center;gap:9px;padding:11px 15px;border-radius:13px;
  background:rgba(9,44,56,.82);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);
  box-shadow:0 18px 44px rgba(0,0,0,.42);font-size:.78rem;color:#F4FAFC;white-space:nowrap}
.sgx-float b{font-weight:640;color:#fff}
.sgx-float em{font-style:normal;font-family:var(--sg-font-mono);font-size:.68rem;color:#B9D0D9;display:block;margin-top:2px}
.sgx-float__ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:rgba(221,73,66,.18);color:#FF9A93}
.sgx-float__ic svg{width:15px;height:15px}
.sgx-float--a{left:-58px;top:-54px;animation:sgx-bob 6s ease-in-out infinite}
.sgx-float--b{right:-30px;bottom:-26px;animation:sgx-bob 7.5s ease-in-out .8s infinite}
.sgx-float--b .sgx-float__ic{background:rgba(61,220,151,.16);color:#6FE3B4}
@keyframes sgx-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}

/* ---------- Marquee ---------- */
.sgx-marquee{position:relative;overflow:hidden;padding:22px 0;background:var(--sg-ink-deep);border-block:1px solid rgba(255,255,255,.07)}
.sgx-marquee::before,.sgx-marquee::after{content:"";position:absolute;top:0;bottom:0;width:130px;z-index:2;pointer-events:none}
.sgx-marquee::before{left:0;background:linear-gradient(90deg,var(--sg-ink-deep),transparent)}
.sgx-marquee::after{right:0;background:linear-gradient(270deg,var(--sg-ink-deep),transparent)}
.sgx-marquee__track{display:flex;gap:44px;width:max-content;animation:sgx-marquee 42s linear infinite}
.sgx-marquee:hover .sgx-marquee__track{animation-play-state:paused}
@keyframes sgx-marquee{to{transform:translateX(-50%)}}
.sgx-marquee__item{display:flex;align-items:center;gap:11px;font-size:.92rem;font-weight:520;color:#C2D8E0;white-space:nowrap}
.sgx-marquee__item svg{width:16px;height:16px;color:#DD4942;flex:none}

/* ---------- Stat band ---------- */
.sgx-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--sg-border);border:1px solid var(--sg-border);border-radius:var(--sg-r-lg);overflow:hidden}
.sgx-stat{background:var(--sg-surface);padding:var(--sg-8) var(--sg-7);position:relative;overflow:hidden;transition:background .3s var(--sg-ease)}
.sgx-stat::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--sg-accent),transparent);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--sg-ease-out)}
.sgx-stat:hover{background:var(--sg-surface-2)}
.sgx-stat.is-in::after{transform:scaleX(1)}
.sgx-stat__v{font-family:var(--sg-font-display);font-size:clamp(2.2rem,1.4rem + 2.2vw,3.2rem);font-weight:720;letter-spacing:-.045em;line-height:1;color:var(--sg-text);font-variant-numeric:tabular-nums}
.sgx-stat__l{font-size:var(--sg-fs-sm);color:var(--sg-text-3);margin-top:12px;line-height:1.5}

/* ---------- Scrollytelling ---------- */
.sgx-scrolly{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:var(--sg-11);align-items:start}
.sgx-scrolly__sticky{position:sticky;top:calc(var(--sg-header-h) + 40px)}
.sgx-scrolly__steps{display:flex;flex-direction:column;gap:var(--sg-6)}
.sgx-step{
  position:relative;padding:var(--sg-7) var(--sg-7) var(--sg-7) calc(var(--sg-8) + 22px);
  border-radius:var(--sg-r-lg);border:1px solid transparent;background:transparent;
  transition:background .4s var(--sg-ease),border-color .4s var(--sg-ease),transform .4s var(--sg-ease-out);
  opacity:.42;
}
.sgx-step::before{
  content:"";position:absolute;left:22px;top:var(--sg-7);bottom:calc(var(--sg-7) * -1 - var(--sg-6));
  width:2px;background:var(--sg-border);
}
.sgx-step:last-child::before{display:none}
.sgx-step::after{
  content:"";position:absolute;left:16px;top:calc(var(--sg-7) + 4px);width:14px;height:14px;border-radius:50%;
  background:var(--sg-surface);border:2px solid var(--sg-border-strong);transition:.4s var(--sg-ease);
}
.sgx-step.is-active{opacity:1;background:var(--sg-surface);border-color:var(--sg-border);box-shadow:var(--sg-sh-3);transform:translateX(4px)}
.sgx-step.is-active::after{background:var(--sg-accent);border-color:var(--sg-accent);box-shadow:0 0 0 6px rgba(221,73,66,.16)}
.sgx-step__n{font-family:var(--sg-font-mono);font-size:.7rem;color:var(--sg-accent);letter-spacing:.1em;display:block;margin-bottom:8px}
.sgx-step h3{font-size:1.24rem;margin:0 0 8px}
.sgx-step p{font-size:var(--sg-fs-sm);color:var(--sg-text-2);margin:0;max-width:52ch}

/* Stage visual for the scrolly */
.sgx-viz{
  position:relative;aspect-ratio:1/1;border-radius:var(--sg-r-xl);overflow:hidden;
  background:linear-gradient(165deg,#0A3949,#0A3949);
  box-shadow:0 40px 90px rgba(10,57,73,.35);
}
.sgx-viz svg{position:absolute;inset:0;width:100%;height:100%}
.sgx-viz__label{
  position:absolute;left:24px;bottom:24px;right:24px;z-index:3;
  font-family:var(--sg-font-mono);font-size:.74rem;color:#C2D8E0;
  display:flex;align-items:center;gap:10px;
}
.sgx-viz__label b{color:#fff;font-weight:600;font-family:var(--sg-font)}

/* ---------- Category switcher with illustration ---------- */
.sgx-cats{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--sg-9);align-items:center}
.sgx-cat-list{display:flex;flex-direction:column;gap:6px}
.sgx-cat{
  display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;cursor:pointer;
  border:1px solid transparent;background:transparent;text-align:left;font-family:inherit;
  transition:.25s var(--sg-ease);position:relative;overflow:hidden;
}
.sgx-cat:hover{background:var(--sg-surface-2)}
.sgx-cat.is-active{background:var(--sg-surface);border-color:var(--sg-border);box-shadow:var(--sg-sh-2)}
.sgx-cat.is-active::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:3px;border-radius:0 3px 3px 0;background:var(--sg-accent)}
.sgx-cat__ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--sg-surface-3);color:var(--sg-text-3);transition:.25s var(--sg-ease)}
.sgx-cat__ic svg{width:19px;height:19px}
.sgx-cat.is-active .sgx-cat__ic{background:var(--sg-accent-soft);color:var(--sg-accent)}
.sgx-cat__t{display:block;font-weight:620;font-size:1rem;color:var(--sg-text);letter-spacing:-.012em}
.sgx-cat__d{display:block;font-size:var(--sg-fs-xs);color:var(--sg-text-3);margin-top:2px}
.sgx-cat-panel{display:none}
.sgx-cat-panel.is-active{display:block;animation:sgx-panel .45s var(--sg-ease-out) both}
@keyframes sgx-panel{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.sgx-cat-card{
  border-radius:var(--sg-r-xl);padding:var(--sg-9);color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#0A3949,#0A3949);box-shadow:0 34px 80px rgba(10,57,73,.3);
}
.sgx-cat-card h3{color:#fff;font-size:1.6rem;margin:0 0 12px}
.sgx-cat-card p{color:#E8F2F6;font-size:var(--sg-fs-sm);margin:0 0 var(--sg-7);max-width:44ch}
.sgx-cat-card__tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--sg-8)}
.sgx-cat-card__tags span{
  font-size:.78rem;padding:7px 13px;border-radius:var(--sg-r-pill);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#EDF6F9;
  opacity:0;animation:sgx-tag .4s var(--sg-ease-out) forwards;
}
.sgx-cat-panel.is-active .sgx-cat-card__tags span:nth-child(1){animation-delay:.08s}
.sgx-cat-panel.is-active .sgx-cat-card__tags span:nth-child(2){animation-delay:.14s}
.sgx-cat-panel.is-active .sgx-cat-card__tags span:nth-child(3){animation-delay:.20s}
.sgx-cat-panel.is-active .sgx-cat-card__tags span:nth-child(4){animation-delay:.26s}
.sgx-cat-panel.is-active .sgx-cat-card__tags span:nth-child(5){animation-delay:.32s}
.sgx-cat-panel.is-active .sgx-cat-card__tags span:nth-child(6){animation-delay:.38s}
@keyframes sgx-tag{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sgx-cat-card__orb{position:absolute;right:-14%;top:-24%;width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(221,73,66,.45),transparent 62%);filter:blur(26px)}

/* ---------- Voice waveform ---------- */
.sgx-wave{display:flex;align-items:center;gap:3px;height:56px}
.sgx-wave i{flex:1;background:linear-gradient(180deg,#DD4942,#FF9A93);border-radius:3px;height:16%;animation:sgx-bar 1.25s ease-in-out infinite}
.sgx-wave i:nth-child(4n+1){animation-duration:1.05s}
.sgx-wave i:nth-child(4n+2){animation-duration:1.5s}
.sgx-wave i:nth-child(4n+3){animation-duration:.85s}
.sgx-wave i:nth-child(3n){animation-delay:-.4s}
.sgx-wave i:nth-child(5n){animation-delay:-.75s}
@keyframes sgx-bar{0%,100%{height:14%}50%{height:96%}}

.sgx-chat{display:flex;flex-direction:column;gap:12px}
.sgx-bubble{
  max-width:84%;padding:14px 17px;border-radius:16px;font-size:var(--sg-fs-sm);line-height:1.55;
  opacity:0;transform:translateY(12px);
}
.sgx-chat.is-in .sgx-bubble{animation:sgx-bubble .5s var(--sg-ease-out) forwards}
.sgx-chat.is-in .sgx-bubble:nth-child(1){animation-delay:.15s}
.sgx-chat.is-in .sgx-bubble:nth-child(2){animation-delay:.75s}
.sgx-chat.is-in .sgx-bubble:nth-child(3){animation-delay:1.35s}
.sgx-chat.is-in .sgx-bubble:nth-child(4){animation-delay:1.95s}
.sgx-chat.is-in .sgx-bubble:nth-child(5){animation-delay:2.55s}
@keyframes sgx-bubble{to{opacity:1;transform:none}}
.sgx-bubble--ai{align-self:flex-start;background:var(--sg-accent-soft);border:1px solid var(--sg-accent-line);border-bottom-left-radius:5px;color:var(--sg-text)}
.sgx-bubble--user{align-self:flex-end;background:var(--sg-surface-3);border:1px solid var(--sg-border);border-bottom-right-radius:5px;color:var(--sg-text)}
.sgx-bubble small{display:block;font-family:var(--sg-font-mono);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:#4E656D;margin-bottom:6px}

/* ---------- Before / after morph ---------- */
.sgx-ba{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--sg-7);align-items:center}
.sgx-ba__panel{border-radius:var(--sg-r-lg);padding:var(--sg-8);border:1px solid var(--sg-border);background:var(--sg-surface)}
.sgx-ba__panel--before{background:var(--sg-surface-2);opacity:.92}
.sgx-ba__panel--after{border-color:var(--sg-accent-line);background:linear-gradient(170deg,var(--sg-accent-soft),#fff 58%);box-shadow:var(--sg-sh-3)}
.sgx-ba__head{display:flex;align-items:center;gap:11px;font-family:var(--sg-font-display);font-weight:660;font-size:1.05rem;margin-bottom:var(--sg-6)}
.sgx-ba__row{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-top:1px solid rgba(0,0,0,.05);font-size:var(--sg-fs-sm);color:var(--sg-text-2);line-height:1.5}
.sgx-ba__row:first-of-type{border-top:0}
.sgx-ba__row svg{width:17px;height:17px;flex:none;margin-top:2px}
.sgx-ba__arrow{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--sg-accent);color:#fff;box-shadow:0 12px 30px rgba(221,73,66,.34);
  animation:sgx-nudge 2.4s ease-in-out infinite;
}
.sgx-ba__arrow svg{width:21px;height:21px}
@keyframes sgx-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}

/* ---------- Tilt cards ---------- */
.sgx-tilt{transition:transform .3s var(--sg-ease-out),box-shadow .3s var(--sg-ease-out);transform-style:preserve-3d;will-change:transform}
.sgx-tilt:hover{box-shadow:var(--sg-sh-4)}

.sgx-poster{
  position:relative;border-radius:var(--sg-r-lg);overflow:hidden;min-height:260px;
  display:flex;flex-direction:column;justify-content:flex-end;padding:var(--sg-7);
  color:#fff;text-decoration:none;isolation:isolate;
}
.sgx-poster::before{content:"";position:absolute;inset:0;z-index:-2;transition:transform .6s var(--sg-ease-out)}
.sgx-poster::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,34,45,.15) 20%,rgba(6,34,45,.88))}
.sgx-poster:hover::before{transform:scale(1.07)}
.sgx-poster:hover{color:#fff}
.sgx-poster h3{color:#fff;font-size:1.22rem;margin:0 0 8px}
.sgx-poster p{color:#E4EFF3;font-size:var(--sg-fs-xs);margin:0;line-height:1.5}
.sgx-poster__go{margin-top:14px;display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:620;color:#FFE1DE}
.sgx-poster__go svg{width:15px;height:15px;transition:transform .25s var(--sg-ease)}
.sgx-poster:hover .sgx-poster__go svg{transform:translateX(5px)}
.sgx-poster--1::before{background:radial-gradient(120% 100% at 15% 0%,#175A70,#0A3949 55%,#0A3949)}
.sgx-poster--2::before{background:radial-gradient(120% 100% at 85% 10%,#8E3A34,#4A2028 50%,#0A3949)}
.sgx-poster--3::before{background:radial-gradient(120% 100% at 20% 90%,#1E6E70,#0C4152 55%,#0A3949)}
.sgx-poster--4::before{background:radial-gradient(120% 100% at 80% 85%,#5A3B6E,#123C4C 55%,#0A3949)}

/* ---------- Orbit graphic ---------- */
.sgx-orbit{position:relative;width:100%;aspect-ratio:1;max-width:520px;margin-inline:auto}
.sgx-orbit__ring{position:absolute;inset:0;border:1px solid rgba(255,255,255,.10);border-radius:50%}
.sgx-orbit__ring:nth-child(2){inset:14%}
.sgx-orbit__ring:nth-child(3){inset:28%}
.sgx-orbit__spin{position:absolute;inset:0;animation:sgx-orbit 30s linear infinite}
.sgx-orbit__spin:nth-of-type(2){inset:14%;animation-duration:22s;animation-direction:reverse}
.sgx-orbit__spin:nth-of-type(3){inset:28%;animation-duration:16s}
@keyframes sgx-orbit{to{transform:rotate(360deg)}}
.sgx-orbit__node{
  position:absolute;top:-19px;left:50%;transform:translateX(-50%);
  padding:8px 14px;border-radius:var(--sg-r-pill);white-space:nowrap;
  background:rgba(9,44,56,.9);border:1px solid rgba(255,255,255,.15);
  font-family:var(--sg-font-mono);font-size:.7rem;color:#EDF6F9;backdrop-filter:blur(8px);
}
.sgx-orbit__spin:nth-of-type(1) .sgx-orbit__node{animation:sgx-orbit-counter 30s linear infinite}
.sgx-orbit__spin:nth-of-type(2) .sgx-orbit__node{animation:sgx-orbit-counter 22s linear infinite reverse}
.sgx-orbit__spin:nth-of-type(3) .sgx-orbit__node{animation:sgx-orbit-counter 16s linear infinite}
@keyframes sgx-orbit-counter{to{transform:translateX(-50%) rotate(-360deg)}}
.sgx-orbit__core{
  position:absolute;inset:41%;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg,#C63A33,#A62E28);color:#fff;font-weight:700;font-size:.8rem;
  box-shadow:0 0 0 10px rgba(221,73,66,.12),0 20px 50px rgba(221,73,66,.35);
}

/* ---------- Section headings ---------- */
.sgx-head{max-width:720px;margin-bottom:var(--sg-9)}
.sgx-head--c{margin-inline:auto;text-align:center}
.sgx-kicker{
  display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:660;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sg-accent);margin-bottom:var(--sg-4);
}
.sgx-kicker::before{content:"";width:24px;height:1px;background:currentColor;opacity:.6}
.sgx-head--c .sgx-kicker{justify-content:center}
.sgx-h2{font-size:clamp(1.9rem,1.25rem + 2.2vw,3rem);letter-spacing:-.035em;line-height:1.08;margin:0}
.sgx-sub{font-size:clamp(1rem,.96rem + .3vw,1.16rem);color:var(--sg-text-2);margin-top:var(--sg-5);line-height:1.55}
.sgx-dark .sgx-h2{color:#fff}
.sgx-dark .sgx-sub{color:#E8F2F6}
.sgx-dark .sgx-kicker{color:#FF9A93}

/* ---------- Reveal primitives ---------- */
.sgx-r{opacity:0;transform:translateY(28px);transition:opacity .75s var(--sg-ease-out),transform .75s var(--sg-ease-out)}
.sgx-r.is-in{opacity:1;transform:none}
.sgx-r[data-d="1"]{transition-delay:.09s}
.sgx-r[data-d="2"]{transition-delay:.18s}
.sgx-r[data-d="3"]{transition-delay:.27s}
.sgx-r[data-d="4"]{transition-delay:.36s}
.sgx-r[data-d="5"]{transition-delay:.45s}
.sgx-r--l{transform:translateX(-34px)}
.sgx-r--rt{transform:translateX(34px)}
.sgx-r--s{transform:scale(.94)}

/* Scroll-linked parallax driven by --sgx-p (0..1) set in JS */
.sgx-par{transform:translate3d(0,calc(var(--sgx-p,0) * var(--sgx-amt,-60px)),0);will-change:transform}

/* ---------- Progress rail ---------- */
.sgx-rail{position:fixed;left:0;top:0;height:3px;z-index:700;width:100%;background:transparent;pointer-events:none}
.sgx-rail i{display:block;height:100%;width:var(--sgx-scroll,0%);background:linear-gradient(90deg,#DD4942,#FF9A93,#3DDC97)}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .sgx-hero__grid{grid-template-columns:1fr;gap:var(--sg-9)}
  .sgx-device{transform:none}
  .sgx-float--a{left:-14px;top:-22px}
  .sgx-float--b{right:-10px;bottom:-22px}
  .sgx-scrolly{grid-template-columns:1fr;gap:var(--sg-8)}
  .sgx-scrolly__sticky{position:static}
  .sgx-cats{grid-template-columns:1fr;gap:var(--sg-7)}
  .sgx-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .sgx-hero{min-height:auto;padding-block:var(--sg-11) var(--sg-10)}
  .sgx-scrollcue{display:none}
  .sgx-ba{grid-template-columns:1fr}
  .sgx-ba__arrow{transform:rotate(90deg);margin-inline:auto}
  .sgx-ba__arrow{animation:none}
  .sgx-float{display:none}
  .sgx-stats{grid-template-columns:1fr}
  .sgx-ev__meta{display:none}
  .sgx-cat-card{padding:var(--sg-7)}
  .sgx-orbit{max-width:340px}
}

@media (prefers-reduced-motion:reduce){
  .sgx-aurora span,.sgx-grid,.sgx-marquee__track,.sgx-wave i,.sgx-float,.sgx-ba__arrow,
  .sgx-orbit__spin,.sgx-orbit__node,.sgx-badge::after,.sgx-btn::before,.sgx-scrollcue i::after{animation:none!important}
  .sgx-r,.sgx-title .w,.sgx-ev,.sgx-bubble{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
  .sgx-par{transform:none!important}
  .sgx-device__progress i{width:100%;animation:none}
}

/* ==========================================================================
   ACT LAYER — narrative sections, the service map, and the engagement surfaces
   ========================================================================== */

/* ---------- Act label ---------- */
.sgx-act{display:inline-flex;align-items:center;gap:12px;margin-bottom:var(--sg-5)}
.sgx-act__n{
  font-family:var(--sg-font-mono);font-size:.68rem;letter-spacing:.14em;
  padding:5px 10px;border-radius:6px;background:var(--sg-accent);color:#fff;font-weight:600;
}
.sgx-act__t{font-size:.74rem;font-weight:660;letter-spacing:.16em;text-transform:uppercase;color:var(--sg-text-3)}
.sgx-dark .sgx-act__t{color:var(--sg-text-inv-3)}

/* ---------- ACT 1 · day in the life ---------- */
.sgx-day{position:relative;display:grid;gap:0;margin-top:var(--sg-9)}
.sgx-day::before{
  content:"";position:absolute;left:96px;top:24px;bottom:24px;width:2px;
  background:linear-gradient(180deg,transparent,var(--sg-border-strong) 12%,var(--sg-border-strong) 88%,transparent);
}
.sgx-moment{
  display:grid;grid-template-columns:96px 1fr;gap:var(--sg-7);align-items:start;
  padding:var(--sg-7) 0;position:relative;
}
.sgx-moment__time{
  font-family:var(--sg-font-mono);font-size:.92rem;font-weight:500;color:var(--sg-text-3);
  text-align:right;padding-right:var(--sg-6);padding-top:3px;letter-spacing:-.02em;
}
.sgx-moment__dot{
  position:absolute;left:90px;top:calc(var(--sg-7) + 6px);width:14px;height:14px;border-radius:50%;
  background:var(--sg-surface);border:2px solid var(--sg-border-strong);z-index:1;transition:.45s var(--sg-ease);
}
.sgx-moment.is-in .sgx-moment__dot{border-color:var(--sg-accent);background:var(--sg-accent);box-shadow:0 0 0 6px rgba(221,73,66,.14)}
.sgx-moment__body{padding-left:var(--sg-6)}
.sgx-moment__q{
  font-family:var(--sg-font-display);font-size:clamp(1.2rem,1.02rem + .78vw,1.72rem);
  font-weight:640;letter-spacing:-.022em;line-height:1.3;color:var(--sg-text);margin:0;max-width:38ch;
}
.sgx-moment__a{margin:12px 0 0;font-size:.96rem;color:var(--sg-text-2);max-width:56ch;line-height:1.6}
.sgx-moment__tag{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;padding:6px 12px;border-radius:var(--sg-r-pill);
  background:var(--sg-bad-soft);color:var(--sg-bad);font-size:var(--sg-fs-xs);font-weight:600;
}
.sgx-moment__tag svg{width:13px;height:13px}

.sgx-day__close{
  margin-top:var(--sg-8);padding:var(--sg-8);border-radius:var(--sg-r-lg);
  background:var(--sg-ink);color:#fff;display:flex;flex-wrap:wrap;gap:var(--sg-6);
  align-items:center;justify-content:space-between;position:relative;overflow:hidden;
}
.sgx-day__close::after{
  content:"";position:absolute;right:-8%;top:-60%;width:44%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(221,73,66,.42),transparent 64%);filter:blur(24px);
}
.sgx-day__close p{margin:0;position:relative;font-size:clamp(1.05rem,.98rem + .4vw,1.35rem);
  font-family:var(--sg-font-display);font-weight:620;letter-spacing:-.02em;color:#fff;max-width:36ch;line-height:1.35}

/* ---------- ACT 2 · live cost meter ---------- */
.sgx-meter{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:var(--sg-10);
  align-items:center;
}
.sgx-dial{
  position:relative;border-radius:var(--sg-r-xl);padding:var(--sg-9);text-align:center;
  background:linear-gradient(165deg,#0A3949,#0A3949);color:#fff;overflow:hidden;
  box-shadow:0 34px 80px rgba(10,57,73,.32);
}
.sgx-dial::before{
  content:"";position:absolute;inset:-30% -10% auto;height:70%;
  background:radial-gradient(ellipse at 50% 0%,rgba(221,73,66,.34),transparent 66%);filter:blur(16px);
}
.sgx-dial__v{
  position:relative;font-family:var(--sg-font-display);font-weight:720;letter-spacing:-.05em;line-height:.95;
  font-size:clamp(3rem,2rem + 4.4vw,5.4rem);font-variant-numeric:tabular-nums;
  background:linear-gradient(100deg,#fff,#FFB4A2);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.sgx-dial__u{position:relative;font-size:1.02rem;color:#E8F2F6;margin-top:14px}
.sgx-dial__sub{
  position:relative;margin-top:var(--sg-7);padding-top:var(--sg-6);border-top:1px solid rgba(255,255,255,.12);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sg-5);
}
.sgx-dial__sub div span{display:block;font-family:var(--sg-font-display);font-size:1.5rem;font-weight:700;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.sgx-dial__sub div em{display:block;font-style:normal;font-size:var(--sg-fs-xs);color:#C2D8E0;margin-top:6px;line-height:1.4}

.sgx-slider{margin-bottom:var(--sg-7)}
.sgx-slider__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sg-4);margin-bottom:12px}
.sgx-slider__label{font-size:var(--sg-fs-sm);font-weight:600;color:var(--sg-text)}
.sgx-slider__val{font-family:var(--sg-font-mono);font-size:1.02rem;font-weight:500;color:var(--sg-accent);font-variant-numeric:tabular-nums}
.sgx-range{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;cursor:pointer;display:block;
}
.sgx-range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--sg-surface-3)}
.sgx-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--sg-accent);border:4px solid #fff;box-shadow:0 4px 14px rgba(221,73,66,.42);margin-top:-9px;transition:transform .15s var(--sg-ease)}
.sgx-range::-webkit-slider-thumb:hover{transform:scale(1.12)}
.sgx-range::-moz-range-track{height:6px;border-radius:3px;background:var(--sg-surface-3)}
.sgx-range::-moz-range-thumb{width:24px;height:24px;border:4px solid #fff;border-radius:50%;background:var(--sg-accent);box-shadow:0 4px 14px rgba(221,73,66,.42)}

/* ---------- THE MAP · service cards ---------- */
.sgx-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sg-5)}
.sgx-svc{
  position:relative;display:flex;flex-direction:column;min-height:300px;padding:var(--sg-8);
  border-radius:var(--sg-r-lg);overflow:hidden;text-decoration:none;color:#fff;isolation:isolate;
  transition:transform .4s var(--sg-ease-out),box-shadow .4s var(--sg-ease-out);
}
.sgx-svc::before{content:"";position:absolute;inset:0;z-index:-2;transition:transform .7s var(--sg-ease-out)}
.sgx-svc::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(175deg,rgba(4,26,34,.12) 30%,rgba(4,26,34,.86));
  transition:opacity .4s var(--sg-ease);
}
.sgx-svc:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(10,57,73,.3);color:#fff}
.sgx-svc:hover::before{transform:scale(1.09) rotate(1.5deg)}
.sgx-svc__ic{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);
  margin-bottom:auto;
}
.sgx-svc__ic svg{width:22px;height:22px;color:#fff}
.sgx-svc__h{font-size:1.3rem;font-weight:660;letter-spacing:-.024em;color:#fff;margin:var(--sg-7) 0 10px;font-family:var(--sg-font-display);line-height:1.2}
.sgx-svc__p{font-size:var(--sg-fs-sm);color:rgba(255,255,255,.9);margin:0;line-height:1.55;max-width:32ch}
.sgx-svc__go{
  display:inline-flex;align-items:center;gap:9px;margin-top:var(--sg-6);
  font-size:.88rem;font-weight:640;color:#fff;
  opacity:.75;transform:translateX(0);transition:.3s var(--sg-ease);
}
.sgx-svc:hover .sgx-svc__go{opacity:1;transform:translateX(5px)}
.sgx-svc__go svg{width:15px;height:15px}
.sgx-svc--1::before{background:radial-gradient(130% 110% at 12% 0%,#1D6C85,#0A3949 52%,#093442)}
.sgx-svc--2::before{background:radial-gradient(130% 110% at 88% 6%,#B04A41,#5C2830 46%,#0A3949)}
.sgx-svc--3::before{background:radial-gradient(130% 110% at 20% 92%,#1F7A73,#0C4152 54%,#093442)}
.sgx-svc--4::before{background:radial-gradient(130% 110% at 82% 88%,#6B4380,#173F52 52%,#093442)}
.sgx-svc--5::before{background:radial-gradient(130% 110% at 50% 0%,#A4552B,#4A2A28 46%,#0A3949)}
.sgx-svc--6::before{background:radial-gradient(130% 110% at 10% 40%,#2A5F9E,#12374B 52%,#093442)}

/* ---------- Story-led proof cards ---------- */
.sgx-story{
  display:flex;flex-direction:column;padding:var(--sg-8);border-radius:var(--sg-r-lg);
  border:1px solid var(--sg-border);background:var(--sg-surface);text-decoration:none;
  transition:border-color .3s var(--sg-ease),box-shadow .3s var(--sg-ease),transform .3s var(--sg-ease-out);
  position:relative;overflow:hidden;
}
.sgx-story::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sg-accent);
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--sg-ease-out);
}
.sgx-story:hover{border-color:var(--sg-border-strong);box-shadow:var(--sg-sh-3);transform:translateY(-3px)}
.sgx-story:hover::before{transform:scaleY(1)}
.sgx-story__hook{
  font-family:var(--sg-font-display);font-size:1.24rem;font-weight:660;letter-spacing:-.022em;
  line-height:1.28;color:var(--sg-text);margin:0 0 14px;
}
.sgx-story__meta{font-size:var(--sg-fs-xs);color:var(--sg-text-3);margin:0 0 auto;line-height:1.55}
.sgx-story__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sg-4);margin-top:var(--sg-7);padding-top:var(--sg-5);border-top:1px solid var(--sg-border)}
.sgx-story__tag{font-family:var(--sg-font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sg-text-3)}

/* ---------- Sticky conversion bar ---------- */
.sgx-dock{
  position:fixed;left:50%;bottom:var(--sgx-dock-bottom,22px);z-index:640;transform:translate(-50%,140%);
  display:flex;align-items:center;gap:var(--sg-5);padding:11px 11px 11px 22px;
  border-radius:var(--sg-r-pill);background:rgba(6,34,45,.94);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 60px rgba(0,0,0,.4);backdrop-filter:blur(16px);
  transition:transform .5s var(--sg-ease-out);max-width:calc(100vw - 32px);
}
.sgx-dock.is-up{transform:translate(-50%,0)}
.sgx-dock__t{font-size:.9rem;color:#F4FAFC;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sgx-dock__t b{color:#fff;font-weight:640}
.sgx-dock .sgx-btn{padding:12px 20px;font-size:.9rem;flex:none}
.sgx-dock__x{
  width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:#C2D8E0;
  cursor:pointer;display:grid;place-items:center;flex:none;
}
.sgx-dock__x:hover{background:rgba(255,255,255,.16);color:#fff}
.sgx-dock__x svg{width:14px;height:14px}

/* ---------- Hero quick paths ---------- */
.sgx-quick{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:var(--sg-8)}
.sgx-quick__l{font-size:var(--sg-fs-xs);color:#B9D0D9;margin-right:2px}
.sgx-quick a{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--sg-r-pill);
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
  font-size:.82rem;font-weight:540;color:#F4FAFC;transition:.2s var(--sg-ease);
}
.sgx-quick a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32);color:#fff;transform:translateY(-1px)}
.sgx-quick a svg{width:13px;height:13px;opacity:.7}

@media (max-width:1080px){
  .sgx-map{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sgx-meter{grid-template-columns:1fr;gap:var(--sg-8)}
}
@media (max-width:760px){
  .sgx-map{grid-template-columns:1fr}
  .sgx-day::before{left:8px}
  .sgx-moment{grid-template-columns:1fr;gap:6px;padding-left:34px}
  .sgx-moment__time{text-align:left;padding:0;font-size:.82rem}
  .sgx-moment__dot{left:2px;top:calc(var(--sg-7) + 2px)}
  .sgx-moment__body{padding-left:0}
  .sgx-dock{left:16px;right:16px;transform:translateY(140%);bottom:var(--sgx-dock-bottom,16px);padding:10px;gap:10px}
  .sgx-dock.is-up{transform:translateY(0)}
  .sgx-dock__t{display:none}
  .sgx-dock .sgx-btn{flex:1;justify-content:center}
  .sgx-dial{padding:var(--sg-7)}
  .sgx-dial__sub{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .sgx-dock{transition:none}
  .sgx-svc::before,.sgx-story::before{transition:none}
}

/* ---------- Client trust band ---------- */
.sgx-trust{background:var(--sg-ink-deep);border-block:1px solid rgba(255,255,255,.08);padding-block:var(--sg-11);position:relative;overflow:hidden}
.sgx-trust::after{
  content:"";position:absolute;left:50%;top:-140%;width:70%;aspect-ratio:2;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 100%,rgba(221,73,66,.20),transparent 66%);pointer-events:none;
}
.sgx-trust__inner{position:relative;z-index:2}
.sgx-trust__l{
  text-align:center;font-size:.72rem;font-weight:640;letter-spacing:.16em;text-transform:uppercase;
  color:#B9D0D9;margin:0 0 var(--sg-7);
}
.sgx-trust__row{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:var(--sg-7) var(--sg-11)}
.sgx-client{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.sgx-client__n{
  font-family:var(--sg-font-display);font-size:clamp(1.05rem,.95rem + .48vw,1.42rem);
  font-weight:680;letter-spacing:-.024em;color:#fff;line-height:1.15;white-space:nowrap;
}
.sgx-client__d{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#9FBCC7;margin-top:2px}
.sgx-trust__sep{width:1px;align-self:center;height:44px;background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.22),rgba(255,255,255,0));flex:none}
.sgx-trust__note{
  text-align:center;margin:var(--sg-10) auto 0;max-width:58ch;font-size:var(--sg-fs-sm);color:#D3E4EA;line-height:1.65;
}
.sgx-trust__note a{color:#FFC9C4;font-weight:560}
.sgx-trust__note a:hover{color:#fff}
@media (max-width:760px){
  .sgx-trust__row{gap:var(--sg-6)}
  .sgx-trust__sep{display:none}
  .sgx-client__n{white-space:normal}
}

/* ---------- Hover contrast on the narrative surfaces ---------- */
.sgx-svc:hover .sgx-svc__h,
.sgx-svc:hover .sgx-svc__p,
.sgx-svc:hover .sgx-svc__go{color:#fff}
.sgx-poster:hover h3,
.sgx-poster:hover p{color:#fff}
.sgx-story:hover .sgx-story__hook{color:var(--sg-accent-700)}
.sgx-cat:hover .sgx-cat__t{color:var(--sg-text)}
.sgx-cat.is-active .sgx-cat__t{color:var(--sg-accent-700)}
.sgx-quick a:hover{color:#fff}
.sgx-dock__x:hover{color:#fff}