/* Viscosity Services — scoped styles, matched to the Aeroland / TestDSC theme.
   All rules are namespaced under .vs-scope / .vs-* so they never touch theme markup.
   Colors come from CSS vars injected by the plugin (see class-vs-assets.php). */

.vs-scope{font-family:'Rubik',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--vs-text,#7E7E7E);line-height:1.74;-webkit-font-smoothing:antialiased}
.vs-scope *,.vs-scope *::before,.vs-scope *::after{box-sizing:border-box}
.vs-container{max-width:1200px;margin:0 auto;padding:0 24px}
.vs-section{padding:92px 0}
.vs-section--tight{padding:54px 0}
.vs-section--light{background:var(--vs-light,#F6F5F9)}
.vs-section--dark{background:#11132b;color:#c3c7e0}
.vs-h2{font-family:inherit;color:var(--vs-indigo,#2E3280);font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:500;line-height:1.18;margin:12px 0 16px;letter-spacing:-.01em}
.vs-section--dark .vs-h2{color:#fff}

.vs-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--vs-accent1,#5E61E7)}
.vs-eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--vs-grad)}
.vs-eyebrow--light{color:#fff}
.vs-eyebrow--light::before{background:#fff}

/* buttons (theme radius) */
.vs-btn{display:inline-flex;align-items:center;gap:9px;padding:14px 34px;border-radius:var(--vs-radius,5px);font-weight:500;font-size:.96rem;cursor:pointer;border:1px solid transparent;transition:.3s cubic-bezier(.22,.61,.36,1);text-decoration:none;font-family:inherit}
.vs-btn--grad{background:var(--vs-grad);color:#fff;box-shadow:0 12px 26px -12px var(--vs-accent1,#5E61E7)}
.vs-btn--grad:hover{transform:translateY(-2px);color:#fff;filter:saturate(1.1)}
.vs-btn--ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.vs-btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff}

/* hero */
.vs-hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;background:#11132b;color:#fff}
.vs-hero::before{content:"";position:absolute;inset:0;background-image:var(--vs-hero-bg);background-size:cover;background-position:center;opacity:.5;transform:scale(1.05);animation:vs-kb 22s ease-in-out infinite alternate}
@keyframes vs-kb{from{transform:scale(1.05) translate(0,0)}to{transform:scale(1.16) translate(-2%,-2%)}}
.vs-hero__veil{position:absolute;inset:0;background:linear-gradient(105deg,rgba(17,19,43,.93) 6%,rgba(17,19,43,.66) 46%,rgba(46,50,128,.30) 100%)}
.vs-hero__inner{position:relative;z-index:2;max-width:760px;padding:120px 0}
.vs-hero__title{font-family:inherit;font-weight:500;font-size:clamp(2.4rem,5.4vw,4.1rem);line-height:1.06;color:#fff;letter-spacing:-.02em;margin:18px 0 0}
.vs-hero__sub{font-size:1.18rem;color:#c9cde6;max-width:560px;margin:20px 0 30px}
.vs-hero__actions{display:flex;gap:14px;flex-wrap:wrap}

/* capability stats */
.vs-stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #ececf4;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 18px 50px -28px rgba(46,50,128,.30)}
.vs-stats__item{padding:28px 24px;border-right:1px solid #ececf4}
.vs-stats__item:last-child{border-right:0}
.vs-stats__l{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#9a9fb5;font-weight:600}
.vs-stats__v{font-family:inherit;font-size:1.45rem;font-weight:600;margin:8px 0 4px;background:var(--vs-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.vs-stats__n{font-size:.84rem;color:var(--vs-text,#7E7E7E)}

/* steps */
.vs-steps{counter-reset:vstep;list-style:none;padding:0;margin:22px 0 0;max-width:760px}
.vs-steps li{position:relative;padding:0 0 26px 60px;counter-increment:vstep}
.vs-steps li::before{content:counter(vstep,decimal-leading-zero);position:absolute;left:0;top:-2px;width:40px;height:40px;border-radius:11px;background:var(--vs-grad);color:#fff;font-weight:600;font-size:.9rem;display:grid;place-items:center}
.vs-steps li::after{content:"";position:absolute;left:19px;top:42px;bottom:4px;width:2px;background:linear-gradient(var(--vs-accent1,#5E61E7),transparent)}
.vs-steps li:last-child::after{display:none}
.vs-steps h4{font-family:inherit;color:var(--vs-indigo,#2E3280);font-size:1.08rem;font-weight:500;margin:0 0 4px}
.vs-steps p{margin:0;font-size:.97rem}

/* components */
.vs-comps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
.vs-comp{background:#fff;border:1px solid #ececf4;border-radius:16px;overflow:hidden;transition:.35s cubic-bezier(.22,.61,.36,1)}
.vs-comp:hover{transform:translateY(-4px);box-shadow:0 26px 50px -28px rgba(46,50,128,.40)}
.vs-comp__img{aspect-ratio:4/3;overflow:hidden;background:#eef0f6}
.vs-comp__img img{width:100%;height:100%;object-fit:cover;transition:.5s}
.vs-comp:hover .vs-comp__img img{transform:scale(1.06)}
.vs-comp__b{padding:24px}
.vs-comp__k{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--vs-accent1,#5E61E7);font-weight:600}
.vs-comp__b h4{font-family:inherit;color:var(--vs-indigo,#2E3280);font-size:1.12rem;font-weight:500;margin:7px 0 6px}
.vs-comp__b p{margin:0;font-size:.93rem}
a.vs-comp--link{display:block;color:inherit;text-decoration:none}
.vs-readmore{display:inline-block;margin-top:12px;font-weight:500;font-size:.9rem;background:var(--vs-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* schematic */
.vs-schematic{margin:0;background:#fff;border:1px solid #ececf4;border-radius:16px;padding:26px;box-shadow:0 18px 50px -30px rgba(46,50,128,.30)}
.vs-schematic img,.vs-schematic svg{width:100%;height:auto;display:block}
.vs-schematic--photo .vs-sch-stage{position:relative;line-height:0;border-radius:12px;overflow:hidden}
.vs-sch-photo{width:100%;height:auto;display:block}
.vs-sch-robot{position:absolute;left:13%;top:-3%;width:21%;height:auto;transform-origin:35% 8%;animation:vs-armbob 4.5s ease-in-out infinite}
@keyframes vs-armbob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(3%) rotate(1.4deg)}}
.vs-sch-tag{position:absolute;left:12%;top:34%;background:var(--vs-grad);color:#fff;font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px;line-height:1.2}
@media(max-width:640px){.vs-sch-tag{display:none}}

/* instrument / specs */
.vs-split{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
.vs-instr-img{background:#fff;border:1px solid #ececf4;border-radius:16px;padding:26px;box-shadow:0 18px 50px -30px rgba(46,50,128,.3)}
.vs-instr-img img{width:100%;height:auto;display:block}
.vs-lead{font-size:1.12rem;color:var(--vs-text);margin:6px 0 18px}
.vs-spectable{width:100%;border-collapse:collapse}
.vs-spectable th,.vs-spectable td{text-align:left;padding:12px 4px;border-bottom:1px solid #e7e9f4;font-size:.96rem;vertical-align:top}
.vs-spectable th{color:#8A90AD;font-weight:600;width:42%;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase}
.vs-spectable td{color:var(--vs-indigo);font-weight:500}

/* experiment video */
.vs-video-head{max-width:680px;margin-bottom:28px}
.vs-video{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 26px 60px -30px rgba(46,50,128,.5);background:#000;aspect-ratio:16/9}
.vs-video video{width:100%;height:100%;display:block;object-fit:cover}

/* hide the Aeroland page-title banner only on the viscosity page */
body.vs-no-pagetitle .page-title-bar,body.vs-no-pagetitle .page-breadcrumb{display:none !important}
.vs-schematic figcaption{text-align:center;color:#9a9fb5;font-size:.86rem;margin-top:12px}

/* chart */
.vs-chart-card{background:#11132b;border:1px solid #262b4d;border-radius:16px;padding:30px}
.vs-chart{width:100%;height:auto;display:block}
.vs-chart-legend{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px}
.vs-chart-legend span{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:#c3c7e0}
.vs-chart-legend i{width:14px;height:3px;border-radius:2px}

/* film */
.vs-film{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 26px 60px -30px rgba(46,50,128,.5);aspect-ratio:21/9;background:#000}
.vs-film__slide{position:absolute;inset:0;opacity:0;animation:vs-film 20s infinite}
.vs-film__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);animation:vs-kb 20s ease-in-out infinite alternate}
@keyframes vs-film{0%{opacity:0}4%{opacity:1}22%{opacity:1}28%{opacity:0}100%{opacity:0}}
.vs-film__overlay{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;padding:30px;background:linear-gradient(0deg,rgba(17,19,43,.8),transparent 55%)}
.vs-film__cap{color:#fff;font-family:inherit;font-size:1.3rem;font-weight:500}
.vs-film__badge{position:absolute;top:16px;left:16px;z-index:4;display:inline-flex;align-items:center;gap:8px;background:rgba(17,19,43,.6);color:#fff;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;padding:7px 13px;border-radius:999px}
.vs-dot{width:8px;height:8px;border-radius:50%;background:var(--vs-accent2,#9C7AF2);animation:vs-blink 1.4s infinite}
@keyframes vs-blink{50%{opacity:.25}}

/* reveal */
.vs-scope .vs-reveal{opacity:0;transform:translateY(24px);transition:.8s cubic-bezier(.22,.61,.36,1)}
.vs-scope .vs-reveal.vs-in{opacity:1;transform:none}

@media(max-width:960px){
  .vs-stats{grid-template-columns:repeat(2,1fr)}
  .vs-stats__item:nth-child(2){border-right:0}
  .vs-comps{grid-template-columns:repeat(2,1fr)}
  .vs-split{grid-template-columns:1fr;gap:30px}
}
@media(max-width:640px){
  .vs-section{padding:64px 0}
  .vs-stats,.vs-comps{grid-template-columns:1fr}
  .vs-stats__item{border-right:0;border-bottom:1px solid #ececf4}
  .vs-hero{min-height:auto}
  .vs-hero__inner{padding:120px 0 80px}
}
@media(prefers-reduced-motion:reduce){
  .vs-scope *{animation:none!important}
  .vs-scope .vs-reveal{opacity:1;transform:none}
}
