/* Services Orbit — homepage services section (SA Coder)
   Default = static, no-JS-safe stacked cards.
   .svo-live (added by services-orbit.js when GSAP is ready) = pinned orbit wheel. */

.svo{
  --svo-bg:var(--dark,#140B0C);
  --svo-ink:#F6F4F1;
  --svo-muted:rgba(246,244,241,.66);
  --svo-line:rgba(246,244,241,.14);
  --svo-accent:var(--accent,#E5252A);
  --svo-coral:var(--coral,#FF7A59);
  position:relative;overflow:hidden;color:var(--svo-ink);
  background:
    radial-gradient(52% 58% at 78% 52%,rgba(229,37,42,.26),transparent 70%),
    radial-gradient(34% 40% at 6% 0%,rgba(255,122,89,.12),transparent 70%),
    var(--svo-bg);
  padding:clamp(72px,10vw,132px) 0;
}
.svo *{box-sizing:border-box}
.svo__grid{position:relative;z-index:2;max-width:var(--wrap,1240px);margin:0 auto;padding:0 var(--gutter,32px);display:grid;grid-template-columns:1fr;gap:36px;align-items:center}

.svo__eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;color:var(--svo-coral);font:600 11px/1.2 var(--f-mono,monospace);letter-spacing:.14em;text-transform:uppercase}
.svo__eyebrow:before{content:"";display:inline-block;width:24px;height:2px;background:var(--svo-accent)}
.svo__title{font-family:var(--f-head,sans-serif);font-weight:700;letter-spacing:-.025em;line-height:1.02;font-size:clamp(2.2rem,4.6vw,4rem);margin:0 0 14px;color:var(--svo-ink);max-width:14ch}
.svo__title em{font-style:normal;color:var(--svo-coral)}
.svo__lead{margin:0 0 30px;max-width:44ch;color:var(--svo-muted);font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.65}

/* panels */
.svo__detail{display:grid;gap:16px}
.svo-panel{
  border:1px solid var(--svo-line);border-radius:var(--r-md,24px);padding:clamp(20px,2.4vw,30px);
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  box-shadow:0 30px 70px -34px rgba(229,37,42,.55),inset 0 1px 0 rgba(255,255,255,.07);
}
.svo-panel__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.svo-panel__tag{font:600 11px/1.2 var(--f-mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--svo-coral)}
.svo-panel__num{font:500 13px/1 var(--f-mono,monospace);color:var(--svo-muted)}
.svo-panel h3{font-family:var(--f-head,sans-serif);font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0 0 12px;color:var(--svo-ink)}
.svo-panel p{margin:0 0 18px;color:rgba(246,244,241,.8);line-height:1.65;font-size:1rem}
.svo-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.svo-panel li{font-size:13px;font-weight:600;padding:7px 14px;border-radius:var(--pill,999px);border:1px solid var(--svo-line);background:rgba(255,255,255,.05);color:var(--svo-ink)}

.svo__foot{display:flex;align-items:center;gap:20px;margin-top:24px;flex-wrap:wrap}
.svo__count{font:500 13px/1 var(--f-mono,monospace);letter-spacing:.1em;color:var(--svo-muted);display:none}
.svo__count b{color:var(--svo-ink);font-weight:600}
.svo__hint{display:none}

/* wheel hidden in static mode */
.svo__stage{display:none}

/* ======== LIVE (orbit) MODE ======== */
.svo.svo-live{height:100vh;height:100svh;padding:0}
.svo-live .svo__grid{height:100%;grid-template-columns:1fr 1fr;gap:24px}
.svo-live .svo__detail{display:grid;gap:0;min-height:300px}
.svo-live .svo-panel{grid-area:1/1;visibility:hidden;opacity:0;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.svo-live .svo__count{display:block}
.svo-live .svo__stage{display:grid;place-items:center}
.svo-live .svo__hint{display:flex;position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;flex-direction:column;align-items:center;gap:8px;font:500 10px/1 var(--f-mono,monospace);letter-spacing:.3em;text-transform:uppercase;color:var(--svo-muted)}
.svo__hint i{width:1px;height:28px;background:linear-gradient(var(--svo-coral),transparent);animation:svoDrip 1.8s ease-in-out infinite}
@keyframes svoDrip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.svo-wheel{position:relative;--S:min(42vw,72svh,600px);width:var(--S);height:var(--S)}
.svo-prog{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.svo-ring{position:absolute;border-radius:50%;pointer-events:none}
.svo-ring--a{inset:8%;border:1px solid var(--svo-line)}
.svo-ring--b{inset:26%;border:1px dashed rgba(255,122,89,.4)}
.svo-ring--c{inset:40%;border:1px solid rgba(246,244,241,.1)}
.svo-core{
  position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,var(--svo-coral),var(--svo-accent) 58%,#5c0a0e);
  box-shadow:0 0 90px 12px rgba(229,37,42,.5),inset 0 0 30px rgba(255,255,255,.2);
}
.svo-core span{font-family:var(--f-head,sans-serif);font-weight:800;font-size:clamp(1.3rem,2.6vw,2.1rem);letter-spacing:-.03em;color:#fff}
.svo-core:after{content:"";position:absolute;inset:-14%;border-radius:50%;border:1px solid rgba(255,122,89,.45);animation:svoPulse 3.2s ease-out infinite}
@keyframes svoPulse{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.4);opacity:0}}

.svo-node{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;gap:8px;will-change:transform,opacity}
.svo-chip{width:clamp(54px,6.4vw,84px);aspect-ratio:1;border-radius:26%;display:grid;place-items:center;color:var(--svo-ink);
  background:linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.03));border:1px solid var(--svo-line);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.8);transition:border-color .3s,box-shadow .3s,background .3s,color .3s}
.svo-chip .ico{width:42%;height:42%}
.svo-node.is-active .svo-chip{color:#fff;border-color:rgba(255,160,140,.85);background:linear-gradient(150deg,var(--svo-coral),var(--svo-accent));box-shadow:0 0 0 6px rgba(229,37,42,.2),0 0 44px 4px rgba(229,37,42,.65)}
.svo-node small{font:600 12px/1 var(--f-body,sans-serif);color:var(--svo-ink);white-space:nowrap;transition:opacity .3s}

@media (min-width:901px){
  .svo:not(.svo-live) .svo__detail{grid-template-columns:1fr 1fr}
}

@media (max-width:900px){
  .svo-live .svo__grid{grid-template-columns:1fr;grid-template-rows:auto auto auto;align-content:center;gap:4px;padding:0 18px}
  .svo-live .svo__intro{text-align:center}
  .svo-live .svo__title{font-size:1.9rem;margin:6px auto 0;max-width:none}
  .svo-live .svo__eyebrow{margin-bottom:8px}
  .svo-live .svo__lead{display:none}
  .svo-live .svo__stage{order:2}
  .svo-live .svo__copy{order:3}
  .svo-live .svo-wheel{--S:min(76vw,32svh,330px)}
  .svo-live .svo__detail{min-height:0}
  .svo-live .svo-panel{padding:16px}
  .svo-live .svo-panel p{font-size:.88rem;margin-bottom:10px}
  .svo-live .svo-panel li{font-size:12px;padding:5px 10px}
  .svo-live .svo__foot{margin-top:12px;justify-content:space-between}
  .svo-live .svo__hint,.svo-live .svo-node small{display:none}
}
@media (prefers-reduced-motion:reduce){.svo-core:after,.svo__hint i{animation:none}}

/* ================= HOMEPAGE FIXES (spacing / responsive) ================= */

/* 1. "How we work" had padding-top:0 (it used to follow a light section). It now follows the dark services block. */
#process{padding-top:clamp(80px,11vw,150px)!important}

/* 2. Rounded dark block, consistent with the other dark sections */
.svo{border-radius:var(--r-lg,32px)}

/* 3. Pinned view: keep content clear of the fixed header and the bottom edge */
.svo-live .svo__grid{padding-top:92px;padding-bottom:64px}
@media (min-width:901px) and (max-height:780px){
  .svo-live .svo__title{font-size:clamp(2rem,3.6vw,2.8rem);margin:12px 0 8px}
  .svo-live .svo__lead{display:none}
  .svo-live .svo__detail{min-height:250px}
  .svo-live .svo-panel{padding:20px 22px}
  .svo-live .svo-panel p{margin-bottom:12px;font-size:.95rem}
  .svo-live .svo__foot{margin-top:16px}
}
@media (max-width:900px){
  .svo-live .svo__grid{padding:80px 18px 24px}
}
@media (max-width:900px) and (max-height:720px){
  .svo-live .svo-panel ul{display:none}
  .svo-live .svo__eyebrow{display:none}
  .svo-live .svo-wheel{--S:min(70vw,27svh,300px)}
}

/* 4. Hero: the "eCommerce" pill overlapped the first glass card on desktop */
@media (min-width:1025px){
  .gcard--1{width:58%}
  .gcard--4{right:0}
}

/* 5. Hero on tablet and mobile: absolute-positioned cards collided, so stack them in normal flow */
@media (max-width:1024px){
  .stage{display:grid;gap:14px;min-height:0;max-width:560px;margin-inline:0;width:100%}
  .stage .gcard{position:relative;top:auto;right:auto;bottom:auto;left:auto;width:100%}
  .stage .gcard--4{order:-1;justify-self:start;width:auto}
}