/* Page styles: services.html */
/* alternating big feature rows with giant index */
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,70px); align-items: center; max-width: var(--maxw); margin: 0 auto; }
.frow + .frow { margin-top: clamp(60px,8vw,110px); }
.frow.rev .frow-media { order: -1; }
.frow-index { font-family: 'Sora', sans-serif; font-size: clamp(60px,9vw,120px); font-weight: 800; line-height: .9; color: transparent; -webkit-text-stroke: 1.5px var(--line-2); margin-bottom: 14px; }
.frow h2 { font-size: clamp(24px,3.4vw,40px); font-weight: 700; line-height: 1.14; color: var(--text); }
.frow h2 span { background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.frow p { margin-top: 16px; color: var(--text-soft); font-size: 15.5px; line-height: 1.7; }
@media (max-width: 840px){ .frow { grid-template-columns: 1fr; } .frow.rev .frow-media { order: 0; } }
/* comparison */
.cmp { max-width: 900px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.cmp-row { display: grid; grid-template-columns: 2fr 1fr 1fr; }
.cmp-row > div { padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.cmp-row:last-child > div { border-bottom: none; }
.cmp-head > div { background: var(--surface-2); font-weight: 600; color: var(--text); }
.cmp-row .col-c { text-align: center; }
.cmp .yes { color: var(--green); } .cmp .no { color: var(--text-dim); }
.cmp-row div:first-child { color: var(--text-soft); }
@media (max-width:560px){ .cmp-row { grid-template-columns: 1.6fr .7fr .7fr; } .cmp-row > div { padding: 13px 12px; font-size: 13px; } }
/* ============================================================
SERVICES — light Apple — Linear (scoped .svx) — white/black/blue
============================================================ */
.svx { --bg:#F6F8FC; --card:#ffffff; --ink:#0A1220; --dim:#5B6577; --soft:#8A93A6;
--blue:#0046FF; --blue2:#2E6BFF; --blue-ghost:rgba(0,70,255,0.08); --navy:#0B1B44;
--line:rgba(12,21,38,0.09); --line2:rgba(12,21,38,0.14);
--glass:linear-gradient(160deg, rgba(255,255,255,0.9), rgba(255,255,255,0.66));
--sh:0 1px 2px rgba(12,21,38,0.04), 0 26px 54px -30px rgba(12,21,38,0.28);
position: relative; background: var(--bg); color: var(--ink); overflow-x: clip; isolation: isolate; font-family: var(--font-body); }
.svx * { box-sizing: border-box; }
.svx-bg { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.svx-bg .grid { position:absolute; inset:0; opacity:.55; background-image:linear-gradient(rgba(12,21,38,0.045) 1px,transparent 1px),linear-gradient(90deg,rgba(12,21,38,0.045) 1px,transparent 1px); background-size:52px 52px; -webkit-mask-image:radial-gradient(120% 60% at 50% 0%,#000,transparent 76%); mask-image:radial-gradient(120% 60% at 50% 0%,#000,transparent 76%); }
.svx-bg .o1 { position:absolute; width:44vmax; height:44vmax; top:-24%; left:-14%; border-radius:50%; filter:blur(90px); background:radial-gradient(circle,rgba(0,70,255,0.16),transparent 62%); animation:svxOrb 30s ease-in-out infinite alternate; }
.svx-bg .o2 { position:absolute; width:38vmax; height:38vmax; bottom:-20%; right:-12%; border-radius:50%; filter:blur(90px); background:radial-gradient(circle,rgba(90,140,255,0.12),transparent 62%); animation:svxOrb 36s ease-in-out infinite alternate-reverse; }
@keyframes svxOrb { to { transform:translate(6%,5%) scale(1.15);} }
.svx-inner { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 clamp(20px,5vw,64px); }
.svx-sec { position:relative; z-index:1; padding:clamp(56px,7vw,104px) 0; }
.svx-eyebrow { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-head); font-size:12px; font-weight:700; letter-spacing:2.6px; text-transform:uppercase; color:var(--blue); background:var(--blue-ghost); border:1px solid rgba(0,70,255,0.16); border-radius:999px; padding:7px 15px; }
.svx-eyebrow i { width:6px; height:6px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px rgba(0,70,255,0.14); }
.svx-h2 { font-family:var(--font-head); font-weight:700; font-size:clamp(28px,4.2vw,50px); line-height:1.05; letter-spacing:-1.6px; color:var(--ink); margin-top:20px; }
.svx-h2 em { font-style:normal; color:var(--blue); }
.svx-lead { margin-top:18px; font-size:16.5px; line-height:1.66; color:var(--dim); max-width:600px; }
.svx-head { text-align:center; max-width:760px; margin:0 auto 52px; }
.svx-head .svx-lead { margin-inline:auto; }
/* buttons */
.svx-cta-row { display:flex; gap:14px; flex-wrap:wrap; }
.svx-btn { position:relative; display:inline-flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:600; font-size:15px; padding:14px 24px; border-radius:14px; cursor:pointer; text-decoration:none; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background .3s ease, border-color .3s ease; overflow:hidden; }
.svx-btn svg { width:18px; height:18px; }
.svx-btn-primary { color:#fff; background:linear-gradient(120deg,var(--blue),#1F58E6); box-shadow:0 12px 30px -8px rgba(0,70,255,0.5); }
.svx-btn-primary::after { content:""; position:absolute; top:0; left:-70%; width:45%; height:100%; transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,0.45),transparent); animation:svxSweep 4.6s ease-in-out infinite; }
@keyframes svxSweep { 0%{left:-70%;} 55%,100%{left:130%;} }
.svx-btn-primary:hover { transform:translateY(-3px); box-shadow:0 18px 40px -8px rgba(0,70,255,0.6); }
.svx-btn-ghost { color:var(--ink); background:#fff; border:1px solid var(--line2); }
.svx-btn-ghost:hover { transform:translateY(-3px); border-color:rgba(0,70,255,0.45); background:var(--blue-ghost); }
/* hero */
.svx-hero { padding:clamp(128px,15vh,178px) 0 clamp(20px,3vw,40px); text-align:center; }
.svx-hero .svx-eyebrow { margin:0 auto; }
.svx-hero h1 { font-family:var(--font-head); font-weight:700; font-size:clamp(38px,6vw,74px); line-height:1.02; letter-spacing:-2.6px; color:var(--ink); margin:22px auto 0; max-width:14ch; }
.svx-hero h1 em { font-style:normal; color:var(--blue); }
.svx-hero p { margin:22px auto 0; font-size:17.5px; line-height:1.6; color:var(--dim); max-width:600px; }
.svx-hero .svx-cta-row { justify-content:center; margin-top:32px; }
/* moving service benefits */
.svx-marq { --mq-gap:18px; position:relative; z-index:1; margin-top:clamp(44px,5vw,72px); overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.mq-row { display:flex; gap:var(--mq-gap); width:max-content; padding:6px 0; will-change:transform; }
.mq-row.a { animation:mqL 46s linear infinite; }
.mq-row.b { margin-top:18px; animation:mqR 52s linear infinite; }
.svx-marq:hover .mq-row { animation-play-state:paused; }
@keyframes mqL { to { transform:translateX(calc(-50% - 9px)); } }
@keyframes mqR { from { transform:translateX(calc(-50% - 9px)); } to { transform:translateX(0); } }
.mq-card { flex:0 0 auto; width:clamp(280px,80vw,310px); min-height:96px; display:flex; align-items:center; gap:14px; padding:18px 22px; border-radius:20px; background:var(--card); border:1px solid var(--line); box-shadow:var(--sh); transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.mq-card > div { min-width:0; }
.mq-card:hover { transform:translateY(-5px); border-color:rgba(0,70,255,0.28); box-shadow:0 30px 60px -34px rgba(0,70,255,0.4); }
.mq-ic { flex:0 0 auto; width:44px; height:44px; border-radius:13px; display:grid; place-items:center; line-height:0; color:#fff; background:linear-gradient(160deg,var(--blue2),var(--blue)); box-shadow:0 10px 20px -8px rgba(0,70,255,0.5); }
.mq-ic.ink { background:linear-gradient(160deg,#1B2740,#0A1220); }
.mq-ic.soft { background:var(--blue-ghost); color:var(--blue); box-shadow:none; border:1px solid rgba(0,70,255,0.18); }
.mq-ic svg { display:block; width:22px; height:22px; }
.mq-card b { font-family:var(--font-head); font-size:15px; font-weight:700; color:var(--ink); display:block; letter-spacing:-.01em; }
.mq-card span { display:block; margin-top:3px; font-size:12.8px; line-height:1.45; color:var(--dim); }
@media (max-width:560px){ .svx-marq { --mq-gap:12px; margin-top:36px; } .mq-row { padding:4px 0; } .mq-row.b { margin-top:12px; } .mq-card { min-height:82px; padding:16px; } }
/* service detail sections */
.svc-row { display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,76px); align-items:center; padding:clamp(46px,5.5vw,86px) 0; border-top:1px solid var(--line); }
.svc-row.rev .svc-media { order:2; }
.svc-copy .svc-num { font-family:var(--font-head); font-size:13px; font-weight:800; letter-spacing:1px; color:var(--blue); }
.svc-copy .svx-eyebrow { margin-top:10px; }
.svc-copy h2 { font-family:var(--font-head); font-size:clamp(24px,3vw,38px); font-weight:700; letter-spacing:-1.2px; line-height:1.08; color:var(--ink); margin-top:14px; }
.svc-copy > p { margin-top:14px; font-size:15.5px; line-height:1.66; color:var(--dim); max-width:460px; }
.svc-feats { margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:11px 18px; }
.svc-feats li { list-style:none; display:flex; align-items:flex-start; gap:9px; font-size:13.6px; line-height:1.4; color:#33405c; }
.svc-feats li svg { flex:0 0 auto; width:17px; height:17px; color:var(--blue); margin-top:1px; }
.svc-more { margin-top:24px; display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-size:14px; font-weight:600; color:var(--blue); text-decoration:none; }
.svc-more svg { width:17px; height:17px; transition:transform .3s ease; }
.svc-more:hover svg { transform:translateX(4px); }
/* media stage */
.svc-media { position:relative; }
.svc-stage { position:relative; aspect-ratio:1/1; max-width:440px; margin:0 auto; border-radius:30px; overflow:hidden;
background:radial-gradient(120% 100% at 50% 0%, #ffffff, #eef2fb 70%, #e7edf9); border:1px solid var(--line); box-shadow:var(--sh); }
.svc-stage::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(12,21,38,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(12,21,38,0.05) 1px,transparent 1px); background-size:34px 34px; -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent 72%); mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent 72%); }
/* premium bg-image stage */
.svc-stage.has-bg { background:#0b1628; }
.svc-stage-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; pointer-events:none;
transition: transform .75s cubic-bezier(.2,.8,.2,1); display:block; }
.svc-stage.has-bg:hover .svc-stage-bg { transform:scale(1.08); }
.svc-stage-grad { position:absolute; inset:0; z-index:2; pointer-events:none;
background:linear-gradient(145deg, rgba(2,10,50,0.62) 0%, rgba(0,28,120,0.24) 48%, rgba(0,4,28,0.55) 100%); }
.svc-bigic { position:absolute; inset:0; margin:auto; width:112px; height:112px; border-radius:30px; display:grid; place-items:center; color:#fff; z-index:3;
background:linear-gradient(160deg,var(--blue2),var(--blue)); border:1px solid rgba(255,255,255,0.4);
box-shadow:0 26px 50px -14px rgba(0,70,255,0.55), inset 0 1px 0 rgba(255,255,255,0.5); animation:svcBob 6s ease-in-out infinite; }
.svc-bigic.ink { background:linear-gradient(160deg,#1B2740,#0A1220); box-shadow:0 26px 50px -14px rgba(11,27,68,0.55); }
.svc-bigic.soft { background:#fff; color:var(--blue); box-shadow:0 24px 46px -16px rgba(12,21,38,0.3); border:1px solid var(--line2); }
.svc-bigic svg { width:54px; height:54px; }
@keyframes svcBob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} }
.svc-chip { position:absolute; z-index:4; display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; letter-spacing:.2px; color:var(--ink); background:rgba(255,255,255,0.86); border:1px solid var(--line); border-radius:11px; padding:7px 11px; box-shadow:0 14px 30px -14px rgba(12,21,38,0.4); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:svcBob 7s ease-in-out infinite; }
.svc-chip .d { width:7px; height:7px; border-radius:50%; background:#0046FF; box-shadow:0 0 8px rgba(0,70,255,0.7); }
.svc-chip .d.g { background:#22C58B; box-shadow:0 0 8px rgba(34,197,139,0.7); }
.svc-chip.tl { top:12%; left:8%; } .svc-chip.br { bottom:13%; right:7%; animation-delay:1s; }
/* decorations */
.deco { position:absolute; inset:0; z-index:2; pointer-events:none; }
.deco.rings i { position:absolute; inset:0; margin:auto; width:60%; height:60%; border-radius:50%; border:1px solid rgba(0,70,255,0.28); animation:svcRing 3s ease-out infinite; }
.deco.rings i:nth-child(2){ animation-delay:1s; } .deco.rings i:nth-child(3){ animation-delay:2s; }
@keyframes svcRing { 0%{transform:scale(.5);opacity:.8;} 100%{transform:scale(1.4);opacity:0;} }
.deco.scan i { position:absolute; left:14%; right:14%; height:2px; top:22%; background:linear-gradient(90deg,transparent,var(--blue),transparent); box-shadow:0 0 14px rgba(0,70,255,0.6); animation:svcScan 3.4s ease-in-out infinite; }
@keyframes svcScan { 0%,100%{ top:24%; } 50%{ top:74%; } }
.deco.wave { display:flex; align-items:center; justify-content:center; gap:6px; }
.deco.wave i { width:5px; height:22%; border-radius:6px; background:linear-gradient(180deg,var(--blue2),var(--blue)); opacity:.5; align-self:center; animation:svcWave 1.1s ease-in-out infinite; }
.deco.wave i:nth-child(2){animation-delay:.15s;} .deco.wave i:nth-child(3){animation-delay:.3s;} .deco.wave i:nth-child(4){animation-delay:.45s;} .deco.wave i:nth-child(5){animation-delay:.6s;} .deco.wave i:nth-child(6){animation-delay:.3s;} .deco.wave i:nth-child(7){animation-delay:.15s;}
@keyframes svcWave { 0%,100%{ transform:scaleY(.5);} 50%{ transform:scaleY(1.7);} }
.deco.orbit i { position:absolute; top:50%; left:50%; width:8px; height:8px; margin:-4px; border-radius:50%; background:var(--blue); box-shadow:0 0 10px rgba(0,70,255,0.7); transform-origin:-90px 0; animation:svcOrbit 5s linear infinite; }
.deco.orbit i:nth-child(2){ transform-origin:-130px 0; animation-duration:7s; background:#22C58B; box-shadow:0 0 10px rgba(34,197,139,0.7);}
@keyframes svcOrbit { to { transform:rotate(360deg);} }
.deco.bars { display:flex; align-items:flex-end; justify-content:center; gap:8px; padding:26%; }
.deco.bars i { width:12px; border-radius:5px 5px 0 0; background:linear-gradient(180deg,var(--blue2),rgba(0,70,255,0.25)); animation:svcBars 1.8s ease-in-out infinite; }
.deco.bars i:nth-child(1){height:40%;} .deco.bars i:nth-child(2){height:66%;animation-delay:.2s;} .deco.bars i:nth-child(3){height:52%;animation-delay:.4s;} .deco.bars i:nth-child(4){height:80%;animation-delay:.6s;}
@keyframes svcBars { 0%,100%{ transform:scaleY(.7); } 50%{ transform:scaleY(1.05);} }
@media (max-width:900px){ .svc-row, .svc-row.rev { grid-template-columns:1fr; } .svc-row.rev .svc-media { order:0; } .svc-stage { max-width:340px; } .svc-feats { grid-template-columns:1fr 1fr; } }
/* comparison (light) */
.svx-vs { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch; }
.svx-vs-col { border-radius:26px; padding:30px; background:var(--card); border:1px solid var(--line); box-shadow:var(--sh); }
.svx-vs-col.nexo { background:linear-gradient(160deg,#fff,#f2f6ff); border-color:rgba(0,70,255,0.35); box-shadow:0 30px 66px -34px rgba(0,70,255,0.4); }
.svx-vs-head { display:flex; align-items:center; gap:12px; padding-bottom:20px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.svx-vs-head .ic { width:44px; height:44px; border-radius:13px; display:grid; place-items:center; flex:0 0 auto; }
.svx-vs-head .ic svg { width:24px; height:24px; }
.svx-vs-col.trad .ic { background:#eef1f6; color:var(--soft); }
.svx-vs-col.nexo .ic { background:linear-gradient(160deg,var(--blue2),var(--blue)); color:#fff; box-shadow:0 10px 22px -6px rgba(0,70,255,0.5); }
.svx-vs-head b { font-family:var(--font-head); font-size:18px; font-weight:700; color:var(--ink); display:block; }
.svx-vs-head span { font-size:12px; color:var(--dim); }
.svx-vs-col ul { list-style:none; display:flex; flex-direction:column; gap:14px; }
.svx-vs-col li { display:flex; align-items:flex-start; gap:11px; font-size:14.4px; line-height:1.45; }
.svx-vs-col li svg { flex:0 0 auto; width:20px; height:20px; margin-top:1px; }
.svx-vs-col.trad li { color:var(--dim); } .svx-vs-col.trad li svg { color:#B4BBC7; }
.svx-vs-col.nexo li { color:var(--ink); } .svx-vs-col.nexo li svg { color:var(--blue); }
@media (max-width:720px){ .svx-vs { grid-template-columns:1fr; } }
/* process (light) */
.svx-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.svx-step { position:relative; border-radius:22px; padding:26px 20px; background:var(--card); border:1px solid var(--line); box-shadow:var(--sh); transition:transform .5s cubic-bezier(.2,.7,.2,1), border-color .4s ease; }
.svx-step:hover { transform:translateY(-7px); border-color:rgba(0,70,255,0.4); }
.svx-step .num { font-family:var(--font-head); font-size:13px; font-weight:800; letter-spacing:1px; color:var(--blue); }
.svx-step .sic { width:46px; height:46px; margin:14px 0 16px; border-radius:13px; display:grid; place-items:center; color:#fff; background:linear-gradient(160deg,var(--blue2),var(--blue)); box-shadow:0 12px 24px -8px rgba(0,70,255,0.45); }
.svx-step .sic svg { width:24px; height:24px; }
.svx-step h4 { font-family:var(--font-head); font-size:15.5px; font-weight:700; color:var(--ink); }
.svx-step p { margin-top:8px; font-size:12.8px; line-height:1.5; color:var(--dim); }
.svx-step:not(:last-child)::after { content:""; position:absolute; top:50%; right:-11px; width:10px; height:10px; border-top:2px solid rgba(0,70,255,0.4); border-right:2px solid rgba(0,70,255,0.4); transform:translateY(-50%) rotate(45deg); z-index:2; }
@media (max-width:900px){ .svx-steps { grid-template-columns:1fr 1fr; } .svx-step::after{ display:none; } }
@media (max-width:520px){ .svx-steps { grid-template-columns:1fr; } }
/* industries */
.svx-inds { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.svx-ind { display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:500; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:14px; padding:13px 18px; box-shadow:var(--sh); transition:transform .3s ease, border-color .3s ease, background .3s ease; }
.svx-ind svg { width:18px; height:18px; color:var(--blue); }
.svx-ind:hover { transform:translateY(-4px); border-color:rgba(0,70,255,0.4); background:var(--blue-ghost); }
/* cta (light, blue) */
.svx-final { position:relative; border-radius:34px; overflow:hidden; text-align:center; padding:clamp(48px,6vw,84px) clamp(24px,5vw,64px); color:#fff;
background:radial-gradient(120% 140% at 50% -10%, #2E6BFF, #0046FF 55%, #0032B4); box-shadow:0 40px 90px -40px rgba(0,70,255,0.6); }
.svx-final::before { content:""; position:absolute; inset:0; opacity:.4; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,0.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.14) 1px,transparent 1px); background-size:40px 40px; -webkit-mask-image:radial-gradient(80% 80% at 50% 0%,#000,transparent 75%); mask-image:radial-gradient(80% 80% at 50% 0%,#000,transparent 75%); }
.svx-final h2 { position:relative; font-family:var(--font-head); font-size:clamp(28px,4.2vw,48px); font-weight:700; letter-spacing:-1.5px; line-height:1.06; color:#fff; }
.svx-final p { position:relative; margin:18px auto 0; max-width:560px; font-size:16px; line-height:1.6; color:rgba(255,255,255,0.86); }
.svx-final .svx-cta-row { position:relative; justify-content:center; margin-top:30px; }
.svx-final .svx-btn-primary { background:#fff; color:var(--blue); box-shadow:0 16px 34px -10px rgba(0,0,0,0.35); }
.svx-final .svx-btn-primary::after { background:linear-gradient(90deg,transparent,rgba(0,70,255,0.25),transparent); }
.svx-final .svx-btn-ghost { background:rgba(255,255,255,0.1); color:#fff; border-color:rgba(255,255,255,0.4); }
/* ---- VIDEO HERO ---- */
.svx-hero-wrap { position:relative; min-height:100vh; display:flex; flex-direction:column; align-items:stretch; justify-content:center; overflow:hidden; isolation:isolate; }
.svx-hero-vbg { position:absolute; inset:0; z-index:0; }
.svx-hero-vid { width:100%; height:100%; object-fit:cover; display:block; animation:heroVidIn 2.2s cubic-bezier(.2,.8,.2,1) forwards; transform-origin:center; }
@keyframes heroVidIn { from{transform:scale(1.14);opacity:0;} 40%{opacity:1;} to{transform:scale(1);opacity:1;} }
.svx-hero-overlay { position:absolute; inset:0; background:linear-gradient(160deg,rgba(3,9,40,0.84) 0%,rgba(0,26,90,0.56) 48%,rgba(2,7,30,0.80) 100%); }
.svx-hero-particles { position:absolute; inset:0; pointer-events:none; }
.svx-hero-particles span { position:absolute; border-radius:50%; background:rgba(90,150,255,0.38); animation:hPFloat 12s ease-in-out infinite; }
.svx-hero-particles span:nth-child(1){width:6px;height:6px;top:18%;left:12%;animation-delay:0s;animation-duration:14s;}
.svx-hero-particles span:nth-child(2){width:4px;height:4px;top:72%;left:22%;animation-delay:2s;animation-duration:18s;}
.svx-hero-particles span:nth-child(3){width:8px;height:8px;top:38%;left:78%;animation-delay:4s;animation-duration:16s;}
.svx-hero-particles span:nth-child(4){width:5px;height:5px;top:82%;left:68%;animation-delay:1s;animation-duration:20s;}
.svx-hero-particles span:nth-child(5){width:7px;height:7px;top:24%;left:54%;animation-delay:3s;animation-duration:15s;}
.svx-hero-particles span:nth-child(6){width:4px;height:4px;top:58%;left:90%;animation-delay:5s;animation-duration:13s;}
.svx-hero-particles span:nth-child(7){width:6px;height:6px;top:8%;left:88%;animation-delay:7s;animation-duration:17s;}
.svx-hero-particles span:nth-child(8){width:5px;height:5px;top:90%;left:44%;animation-delay:2.5s;animation-duration:19s;}
@keyframes hPFloat{0%,100%{transform:translateY(0) scale(1);opacity:.3;}50%{transform:translateY(-22px) scale(1.4);opacity:.72;}}
.svx-hero-wrap .svx-hero { position:relative; z-index:1; padding:clamp(130px,16vh,190px) 0 clamp(70px,8vw,110px); }
.svx-hero-wrap .svx-eyebrow { color:rgba(255,255,255,0.92); background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.22); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.svx-hero-wrap .svx-eyebrow i { background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,0.2); }
.svx-hero-wrap h1 { color:#fff; }
.svx-hero-wrap h1 em { color:#7AADFF; }
.svx-hero-wrap p { color:rgba(255,255,255,0.78); }
.svx-btn-glass { color:#fff !important; background:rgba(255,255,255,0.1) !important; border-color:rgba(255,255,255,0.32) !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.svx-btn-glass:hover { transform:translateY(-3px); background:rgba(255,255,255,0.2) !important; border-color:rgba(255,255,255,0.55) !important; }
.svx-he-1 { animation:heroUp 0.85s 0.55s cubic-bezier(.2,.8,.2,1) both; }
.svx-he-2 { animation:heroUp 0.9s 0.75s cubic-bezier(.2,.8,.2,1) both; }
.svx-he-3 { animation:heroUp 0.9s 0.95s cubic-bezier(.2,.8,.2,1) both; }
.svx-he-4 { animation:heroUp 0.9s 1.15s cubic-bezier(.2,.8,.2,1) both; }
.svx-he-5 { animation:heroUp 1s 1.5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes heroUp { from{opacity:0;transform:translateY(32px);} to{opacity:1;transform:translateY(0);} }
.svx-hero-scroll { position:absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; }
.svx-hero-scroll span { font-family:var(--font-head); font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,0.44); }
.svx-hero-scroll-line { width:1px; height:44px; background:linear-gradient(to bottom,rgba(255,255,255,0.55),transparent); animation:scrollPulse 2.2s ease-in-out 2s infinite; transform-origin:top; }
@keyframes scrollPulse { 0%,100%{opacity:.4;transform:scaleY(1);} 50%{opacity:1;transform:scaleY(.55);} }
/* ---- END VIDEO HERO ---- */
/* ============================================================
SERVICES HUB — Interactive "What We Do" Section
============================================================ */
.svc-hub-section{
position:relative;
overflow:hidden;
background:#061328;
}
.svc-hub-section::before{
content:"";
position:absolute;
inset:0;
background:url("../../img/contact-hero.webp") right center/cover no-repeat;
filter:blur(8px);
transform:scale(1.05);
opacity:.55;
}
.svc-hub-section::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
to right,
#061328 0%,
rgba(6,19,40,.98) 22%,
rgba(6,19,40,.85) 50%,
rgba(6,19,40,.35) 78%,
rgba(6,19,40,.05) 100%
),
linear-gradient(
to bottom,
rgba(6,19,40,.45),
rgba(6,19,40,.15),
rgba(6,19,40,.45)
);
}
.svc-hub-section > *{
position:relative;
z-index:3;
}
.svc-hub-head{text-align:center;max-width:680px;margin:0 auto 48px;}
.svc-hub-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
@media(max-width:1100px){.svc-hub-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px){.svc-hub-grid{grid-template-columns:repeat(2,1fr);}}
.svc-hub-btn{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 18px 46px;background:var(--card);border:1.5px solid var(--line);border-radius:20px;cursor:pointer;text-align:left;font-family:inherit;width:100%;transition:all .35s cubic-bezier(.2,.8,.2,1);overflow:hidden;}
.svc-hub-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(0,70,255,.07),transparent);opacity:0;transition:opacity .3s;}
.svc-hub-btn:hover{border-color:rgba(0,70,255,.4);transform:translateY(-5px);box-shadow:0 20px 44px -16px rgba(0,70,255,.3);}
.svc-hub-btn:hover::after,.svc-hub-btn.active::after{opacity:1;}
.svc-hub-btn.active{border-color:var(--blue);background:linear-gradient(160deg,#e6eeff,#f4f6ff);box-shadow:0 20px 44px -16px rgba(0,70,255,.35);}
.shb-num{font-family:var(--font-head);font-size:10.5px;font-weight:800;letter-spacing:1.5px;color:var(--blue);}
.shb-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;background:linear-gradient(160deg,#2E6BFF,#0046FF);box-shadow:0 8px 18px -6px rgba(0,70,255,.5);}
.shb-ic svg{width:21px;height:21px;}
.shb-txt b{display:block;font-family:var(--font-head);font-size:13px;font-weight:700;color:var(--ink);line-height:1.25;}
.shb-txt span{display:block;font-size:11px;color:var(--dim);margin-top:2px;}
.shb-arr{position:absolute;bottom:14px;right:14px;width:26px;height:26px;border-radius:8px;background:rgba(0,70,255,.1);color:var(--blue);display:grid;place-items:center;transition:all .3s;}
.shb-arr svg{width:13px;height:13px;transition:transform .3s;}
.svc-hub-btn.active .shb-arr{background:var(--blue);color:#fff;}
.svc-hub-btn.active .shb-arr svg{transform:rotate(90deg);}
.svc-hub-det-outer{overflow:hidden;max-height:0;opacity:0;scroll-margin-top:120px;transition:max-height .75s cubic-bezier(.2,.85,.2,1),opacity .4s ease;}
.svc-hub-det-outer.open{opacity:1;}
.svc-hub-detail{display:grid;grid-template-columns:42% 58%;min-height:560px;border-radius:28px;overflow:hidden;margin-top:14px;box-shadow:0 50px 100px -50px rgba(0,30,100,.3);border:1px solid rgba(0,70,255,.14);}
@media(max-width:860px){.svc-hub-detail{grid-template-columns:1fr;}}
.svc-det-art{position:relative;overflow:hidden;min-height:380px;}
.sda-blobs{position:absolute;inset:0;z-index:0;}
.sda-b{position:absolute;border-radius:50%;filter:blur(56px);}
.sda-b.b1{animation:sdaB1 10s ease-in-out infinite;}
.sda-b.b2{animation:sdaB2 14s ease-in-out infinite;}
@keyframes sdaB1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(14%,-10%) scale(1.18);}}
@keyframes sdaB2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-10%,12%) scale(1.12);}}
.sda-grid-ov{position:absolute;inset:0;opacity:.14;z-index:1;background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);background-size:42px 42px;}
.sda-rings{position:absolute;inset:0;z-index:1;overflow:hidden;}
.sda-r{position:absolute;top:50%;left:50%;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);animation:sdaRing 5s ease-in-out infinite;}
.sda-r:nth-child(2){animation-delay:1.7s;}.sda-r:nth-child(3){animation-delay:3.4s;}
@keyframes sdaRing{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.5;}50%{transform:translate(-50%,-50%) scale(1.1);opacity:.2;}}
.sda-center{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;}
.sda-icon{width:92px;height:92px;border-radius:26px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.38);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:svcBob 6s ease-in-out infinite;}
.sda-icon svg{width:48px;height:48px;}
.sda-svc-label{font-family:var(--font-head);font-size:11.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.85);background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:7px 18px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.sda-floats{position:absolute;inset:0;z-index:4;pointer-events:none;}
.sda-fl{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:14px;padding:10px 14px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:svcBob 7s ease-in-out infinite;}
.sda-fl:nth-child(2){animation-delay:1.5s;}.sda-fl:nth-child(3){animation-delay:3s;}
.sda-fl b{font-family:var(--font-head);font-size:21px;font-weight:800;color:#fff;line-height:1;}
.sda-fl small{font-size:9.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:rgba(255,255,255,.7);}
.svc-det-body{position:relative;background:#fff;padding:clamp(28px,3.5vw,50px);display:flex;flex-direction:column;overflow-y:auto;max-height:700px;}
.sdb-close{position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:10px;border:1.5px solid var(--line2);background:var(--bg);color:var(--dim);cursor:pointer;display:grid;place-items:center;transition:all .2s;}
.sdb-close svg{width:16px;height:16px;}
.sdb-close:hover{background:var(--blue);color:#fff;border-color:var(--blue);}
.sdb-num{font-family:var(--font-head);font-size:10.5px;font-weight:800;letter-spacing:1.5px;color:var(--blue);margin-bottom:6px;}
.sdb-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--blue);background:rgba(0,70,255,.08);border:1px solid rgba(0,70,255,.16);border-radius:999px;padding:5px 12px;margin-bottom:12px;}
.sdb-eyebrow i{width:5px;height:5px;border-radius:50%;background:var(--blue);flex-shrink:0;}
.svc-det-body h2{font-family:var(--font-head);font-size:clamp(22px,2.5vw,32px);font-weight:700;letter-spacing:-.8px;color:var(--ink);line-height:1.1;}
.svc-det-body h2 em{font-style:normal;color:var(--blue);}
.sdb-lead{margin-top:11px;font-size:14.8px;line-height:1.73;color:var(--dim);}
.sdb-div{height:1px;background:var(--line);margin:20px 0;}
.sdb-section-ttl{font-family:var(--font-head);font-size:10.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--soft);margin-bottom:12px;}
.sdb-steps{list-style:none;display:flex;flex-direction:column;gap:10px;padding:0;}
.sdb-steps li{display:flex;align-items:flex-start;gap:10px;font-size:13.8px;color:var(--dim);line-height:1.6;}
.sdb-sn{flex-shrink:0;width:23px;height:23px;border-radius:7px;background:linear-gradient(160deg,#2E6BFF,#0046FF);color:#fff;font-family:var(--font-head);font-weight:800;font-size:10px;display:grid;place-items:center;margin-top:1px;}
.sdb-feats{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-top:14px;padding:0;}
.sdb-feat{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:#33405c;line-height:1.4;}
.sdb-feat svg{flex-shrink:0;width:16px;height:16px;color:var(--blue);margin-top:1px;}
.sdb-stats-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;}
.sdb-stat-card{flex:1;min-width:66px;text-align:center;padding:13px 10px;background:var(--bg);border:1px solid var(--line);border-radius:13px;}
.sdb-stat-card b{display:block;font-family:var(--font-head);font-size:19px;font-weight:800;color:var(--blue);line-height:1;}
.sdb-stat-card small{display:block;margin-top:3px;font-size:10px;color:var(--dim);}
.sdb-cta-row{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;}
@keyframes detSlideIn{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
.svc-hub-det-outer.open .svc-hub-detail{animation:detSlideIn .55s .05s cubic-bezier(.2,.8,.2,1) both;}
@media(max-width:580px){.sdb-feats{grid-template-columns:1fr;}}
/* ============================================================ */
@media (prefers-reduced-motion: reduce){ .svx *, .svx-bg * { animation:none !important; } }
/* ---- service rows: full-viewport height + dramatic scroll entrance ---- */
.svc-row { min-height: 96vh; align-content: center; }
.svc-row .svc-media.reveal { filter:blur(5px); transition:opacity .95s cubic-bezier(.22,.84,.2,1),transform .95s cubic-bezier(.22,.84,.2,1),filter .95s ease; }
.svc-row .svc-media.reveal.right { transform:translateX(90px) scale(.93); }
.svc-row .svc-media.reveal.left { transform:translateX(-90px) scale(.93); }
.svc-row .svc-copy.reveal { filter:blur(5px); transform:translateY(60px) scale(.97); transition:opacity .95s cubic-bezier(.22,.84,.2,1) .18s,transform .95s cubic-bezier(.22,.84,.2,1) .18s,filter .95s ease .18s; }
.svc-row .svc-media.reveal.in,.svc-row .svc-copy.reveal.in { opacity:1; transform:none; filter:blur(0); }
/* side progress */
.svc-side-prog { position:fixed; right:28px; top:50%; transform:translateY(-50%); z-index:200; display:flex; flex-direction:column; align-items:center; gap:10px; opacity:0; pointer-events:none; transition:opacity .5s ease; }
.svc-side-prog.show { opacity:1; }
.svc-sp-num { font-family:'Sora',sans-serif; font-size:20px; font-weight:800; color:#0046FF; letter-spacing:-1px; line-height:1; }
.svc-sp-bar { width:2px; height:70px; background:rgba(0,70,255,0.12); border-radius:2px; position:relative; overflow:hidden; }
.svc-sp-fill { position:absolute; top:0; left:0; width:100%; background:linear-gradient(to bottom,#0046FF,#5A8CFF); border-radius:2px; transition:height .5s cubic-bezier(.2,.8,.2,1); }
.svc-sp-tot { font-size:10px; font-weight:700; color:rgba(0,70,255,0.4); letter-spacing:1.5px; }
.svc-sp-dots { display:flex; flex-direction:column; gap:6px; }
.svc-sp-dot { width:4px; height:4px; border-radius:50%; background:rgba(0,70,255,0.15); transition:background .3s,transform .3s; }
.svc-sp-dot.on { background:#0046FF; transform:scale(1.9); }
@media (max-width:860px){ .svc-side-prog { display:none; } }
.svc-stack { position: relative; max-width: 1120px; margin: clamp(28px,4vw,52px) auto 0; padding: 0 clamp(20px,5vw,64px); }
.stk-card { position: sticky; top: 100px; display: grid; grid-template-columns: 1.02fr 1fr; min-height: 460px; margin-bottom: 34px; border-radius: 28px; overflow: hidden; background:#fff; border:1px solid var(--line); box-shadow: 0 44px 90px -42px rgba(9,26,74,0.45); }
.stk-card.rev .stk-art { order: 2; }
.stk-art { position: relative; overflow: hidden; min-height: 300px; }
.stk-body { padding: clamp(28px,3.4vw,50px); display: flex; flex-direction: column; justify-content: center; }
.stk-num { font-family:'Sora',sans-serif; font-size:13px; font-weight:800; color:var(--blue); letter-spacing:1px; }
.stk-body .svx-eyebrow { margin-top:10px; }
.stk-body h3 { font-family:'Sora',sans-serif; font-size:clamp(22px,2.6vw,33px); font-weight:700; letter-spacing:-1px; line-height:1.08; color:var(--ink); margin-top:12px; }
.stk-body h3 em { font-style:normal; color:var(--blue); }
.stk-body > p { margin-top:13px; font-size:14.6px; line-height:1.6; color:var(--dim); max-width:520px; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.stk-feats { list-style:none; margin-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; }
.stk-feats li { display:flex; gap:8px; font-size:12.8px; line-height:1.4; color:#33405c; }
.stk-feats li svg { flex:0 0 auto; width:15px; height:15px; color:var(--blue); margin-top:1px; }
.stk-more { margin-top:24px; align-self:flex-start; display:inline-flex; align-items:center; gap:9px; font-family:'Sora',sans-serif; font-size:14px; font-weight:600; color:#fff; background:var(--blue); border:none; border-radius:999px; padding:13px 24px; cursor:pointer; transition:transform .3s ease, background .3s ease, box-shadow .3s ease; box-shadow:0 14px 30px -10px rgba(0,70,255,0.55); }
.stk-more svg { width:16px; height:16px; transition:transform .3s ease; }
.stk-more:hover { transform:translateY(-2px); background:var(--blue-deep); }
.stk-more:hover svg { transform:translateX(3px); }
@supports (animation-timeline: view()) {
.stk-card { animation: stkExit linear both; animation-timeline: view(); animation-range: exit 2% exit 96%; }
@keyframes stkExit { to { transform: scale(.93) translateY(-16px); filter: brightness(.92); } }
}
@media (max-width: 860px) { .stk-card, .stk-card.rev { grid-template-columns:1fr; position:relative; top:auto; } .stk-card.rev .stk-art { order:0; } .stk-art { min-height:220px; } .stk-feats { grid-template-columns:1fr 1fr; } }
/* full-screen detail modal */
.svc-modal { position: fixed; inset: 0; z-index: 220; display: none; }
.svc-modal.open { display: block; }
.svm-backdrop { position:absolute; inset:0; background:rgba(6,12,26,0.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:svmFade .3s ease; }
.svm-panel { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(1040px,94vw); height:min(88vh,880px); display:grid; grid-template-columns:.92fr 1.08fr; background:#fff; border-radius:28px; overflow:hidden; box-shadow:0 60px 120px -30px rgba(0,0,0,0.5); animation:svmPop .42s cubic-bezier(.2,.9,.3,1.1); }
@keyframes svmFade { from { opacity:0; } }
@keyframes svmPop { from { opacity:0; transform:translate(-50%,-46%) scale(.96); } }
.svm-art { position:relative; overflow:hidden; }
.svm-body { padding:clamp(26px,3vw,46px); overflow-y:auto; }
.svm-close { position:absolute; top:16px; right:16px; z-index:6; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; border:none; cursor:pointer; color:#0A1220; background:rgba(255,255,255,0.92); box-shadow:0 8px 20px rgba(0,0,0,0.25); transition:transform .2s ease; }
.svm-close:hover { transform:rotate(90deg); }
.svm-close svg { width:20px; height:20px; }
.svm-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; border:none; cursor:pointer; color:#fff; background:var(--blue); box-shadow:0 14px 30px -8px rgba(0,70,255,0.6); transition:transform .2s ease, background .2s ease; }
.svm-nav:hover { background:var(--blue-deep); }
.svm-nav svg { width:20px; height:20px; }
.svm-nav.prev { left:-24px; } .svm-nav.prev svg { transform:rotate(180deg); }
.svm-nav.next { right:-24px; }
.svm-count { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:6; font-family:'Sora',sans-serif; font-size:12px; font-weight:700; letter-spacing:1px; color:#fff; background:rgba(0,70,255,0.9); padding:6px 14px; border-radius:999px; }
@media (max-width: 860px) { .svm-panel { grid-template-columns:1fr; grid-template-rows:200px 1fr; height:92vh; } .svm-nav.prev { left:8px; } .svm-nav.next { right:8px; } .svm-nav { width:42px; height:42px; } }
/* concave-lens carousel */
.carousel { position:relative; width:100%; margin: clamp(28px,4vw,52px) 0 0; overflow:hidden; }
.c-stage { position:relative; height: clamp(360px,42vw,500px); perspective:1900px; transform-style:preserve-3d; }
.c-item { position:absolute; top:50%; left:50%; width:clamp(300px,30vw,430px); height:clamp(330px,38vw,470px); border-radius:26px; overflow:hidden; cursor:pointer; opacity:0; pointer-events:none;
transform:translate(-50%,-50%); transition:transform .85s cubic-bezier(.2,.8,.2,1), opacity .7s ease, box-shadow .7s ease; will-change:transform,opacity; box-shadow:0 40px 84px -30px rgba(9,26,74,0.55); background:#00081E; }
.c-item.center { pointer-events:auto; box-shadow:0 60px 110px -30px rgba(0,70,255,0.55); }
.c-imgph { position:absolute; inset:0; background:linear-gradient(150deg,#00081E 0%,#00227A 52%,#0046FF 100%); display:grid; place-items:center; }
.c-imgph::before { content:""; position:absolute; inset:0; opacity:.5; background-image:linear-gradient(rgba(255,255,255,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.06) 1px,transparent 1px); background-size:30px 30px; -webkit-mask-image:radial-gradient(70% 70% at 50% 45%,#000,transparent 75%); mask-image:radial-gradient(70% 70% at 50% 45%,#000,transparent 75%); }
.c-imgph .ph-ic { position:relative; width:88px; height:88px; border-radius:24px; display:grid; place-items:center; color:#fff; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.28); }
.c-imgph .ph-ic svg { width:44px; height:44px; }
.c-imgph .ph-hint { position:absolute; bottom:96px; font-family:'Sora',sans-serif; font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.5); }
.c-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.c-veil { position:absolute; inset:0; z-index:2; background:linear-gradient(180deg,transparent 38%,rgba(3,8,22,0.9) 100%); }
.c-cap { position:absolute; left:0; right:0; bottom:0; z-index:3; padding:26px; }
.c-cap .c-num { font-family:'Sora',sans-serif; font-size:12px; font-weight:800; letter-spacing:1px; color:#9DB8FF; }
.c-cap h3 { font-family:'Sora',sans-serif; font-size:clamp(18px,1.55vw,24px); font-weight:700; letter-spacing:-.02em; color:#fff; margin-top:6px; line-height:1.12; }
.c-more { margin-top:16px; display:inline-flex; align-items:center; gap:8px; font-family:'Sora',sans-serif; font-size:13.5px; font-weight:600; color:#0A1220; background:#fff; border:none; border-radius:999px; padding:11px 20px; cursor:pointer; opacity:0; transform:translateY(10px); transition:opacity .45s ease .1s, transform .45s ease .1s; }
.c-item.center .c-more { opacity:1; transform:none; }
.c-item:not(.center) .c-more { pointer-events:none; }
.c-more svg { width:15px; height:15px; }
.c-ctrl { display:flex; align-items:center; justify-content:center; gap:20px; margin-top:28px; }
.c-arrow { width:50px; height:50px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; box-shadow:var(--sh); transition:transform .2s ease, background .2s ease, color .2s ease; }
.c-arrow:hover { background:var(--blue); color:#fff; transform:translateY(-2px); }
.c-arrow svg { width:20px; height:20px; } .c-arrow.prev svg { transform:rotate(180deg); }
.c-dots { display:flex; gap:8px; }
.c-dot { width:9px; height:9px; border-radius:50%; background:rgba(12,21,38,0.18); border:none; cursor:pointer; padding:0; transition:all .35s ease; }
.c-dot.on { width:28px; border-radius:6px; background:var(--blue); }
/* inline detail */
.c-detail { max-height:0; overflow:hidden; opacity:0; transition:max-height .7s cubic-bezier(.4,0,.2,1), opacity .5s ease; }
.c-detail.open { max-height:2200px; opacity:1; margin-top:clamp(30px,4vw,52px); }
.c-detail-inner { display:grid; grid-template-columns:.9fr 1.1fr; border-radius:28px; overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:0 46px 96px -44px rgba(9,26,74,0.42); }
.c-det-art { position:relative; min-height:340px; overflow:hidden; }
.c-det-body { padding:clamp(26px,3vw,46px); position:relative; }
.c-det-close { position:absolute; top:16px; right:16px; z-index:4; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; transition:transform .2s ease; }
.c-det-close:hover { transform:rotate(90deg); }
.c-det-close svg { width:18px; height:18px; }
@media (max-width:860px){ .c-detail-inner { grid-template-columns:1fr; } .c-det-art { min-height:210px; } }
/* process — sticky heading (right) + animated node/wire steps (left) */
.proc2 { display:grid; grid-template-columns:1fr .72fr; gap:clamp(36px,5vw,84px); align-items:start; }
.proc2-head { position:sticky; top:118px; }
.proc2-steps { position:relative; padding-left:56px; }
.proc2-steps .wire { position:absolute; left:19px; top:16px; bottom:20px; width:2px; background:rgba(0,70,255,0.14); border-radius:2px; overflow:hidden; }
.proc2-steps .wire::after { content:""; position:absolute; left:0; top:0; width:100%; height:var(--fill,0%); background:linear-gradient(180deg,#5A8CFF,#0046FF); box-shadow:0 0 14px rgba(0,70,255,0.6); transition:height .7s cubic-bezier(.4,0,.2,1); }
.p2-step { position:relative; padding-bottom:clamp(34px,4.5vw,60px); opacity:0; transform:translateX(-34px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.p2-step:last-child { padding-bottom:0; }
.p2-step.in { opacity:1; transform:none; }
.p2-node { position:absolute; left:-56px; top:-2px; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-family:'Sora',sans-serif; font-weight:800; font-size:13px; color:var(--blue); background:#fff; border:2px solid rgba(0,70,255,0.28); z-index:2; transition:all .55s cubic-bezier(.2,.8,.2,1); }
.p2-step.in .p2-node { color:#fff; background:linear-gradient(160deg,#5A8CFF,#0046FF); border-color:transparent; box-shadow:0 0 0 7px rgba(0,70,255,0.12), 0 14px 26px -8px rgba(0,70,255,0.55); }
.p2-card { position:relative; border-radius:22px; padding:24px 28px; background:#fff; border:1px solid var(--line); box-shadow:var(--sh); overflow:hidden; }
.p2-card::before { content:""; position:absolute; inset:0; background:radial-gradient(130% 130% at 0% 0%, rgba(0,70,255,0.09), transparent 58%); opacity:0; transition:opacity .7s ease; }
.p2-step.in .p2-card::before { opacity:1; }
.p2-ic { position:relative; width:46px; height:46px; border-radius:13px; display:grid; place-items:center; color:#fff; background:linear-gradient(160deg,#5A8CFF,#0046FF); box-shadow:0 12px 24px -8px rgba(0,70,255,0.45); margin-bottom:15px; }
.p2-ic svg { width:23px; height:23px; }
.p2-tag { position:relative; font-family:'Sora',sans-serif; font-size:12px; font-weight:800; letter-spacing:1px; color:var(--blue); }
.p2-card h4 { position:relative; font-family:'Sora',sans-serif; font-size:19px; font-weight:700; letter-spacing:-.01em; color:var(--ink); margin-top:2px; }
.p2-card p { position:relative; margin-top:9px; font-size:14px; line-height:1.6; color:var(--dim); }
@media (max-width:900px){ .proc2 { grid-template-columns:1fr; } .proc2-head { position:static; margin-bottom:34px; } }
/* ============================================================
SERVICES v2 — refinements
Appended deliberately: these override the rules above, so the
original blocks stay readable and diffable.
============================================================ */
/* ---------- 1. marquee icon centring ----------
`display:grid; place-items:center` was leaving the