/* ══════════════════════════════════════════
   REDESIGN — pill navbar, new footer,
   shader-dots container, gooey text
   Layers on top of tokens.css + components.css
   ══════════════════════════════════════════ */

/* ── Per-vertical accent colors ───────── */
body[data-page="hrd"]{
  --vertical:hsl(320,100%,65%);
  --vertical-2:hsl(280,100%,60%);
  --vertical-soft:rgba(236,72,153,.15);
  --vertical-grad:linear-gradient(135deg,hsl(280,100%,55%) 0%,hsl(320,100%,65%) 100%);
}
body[data-page="corpuni"]{
  --vertical:hsl(190,100%,60%);
  --vertical-2:hsl(210,100%,55%);
  --vertical-soft:rgba(6,182,212,.15);
  --vertical-grad:linear-gradient(135deg,hsl(210,100%,50%) 0%,hsl(190,100%,60%) 100%);
}
body[data-page="edu"]{
  --vertical:hsl(155,85%,55%);
  --vertical-2:hsl(175,90%,45%);
  --vertical-soft:rgba(16,185,129,.15);
  --vertical-grad:linear-gradient(135deg,hsl(175,90%,42%) 0%,hsl(155,85%,55%) 100%);
}
body[data-page="edtech"]{
  --vertical:hsl(35,100%,62%);
  --vertical-2:hsl(20,100%,58%);
  --vertical-soft:rgba(251,146,60,.15);
  --vertical-grad:linear-gradient(135deg,hsl(20,100%,55%) 0%,hsl(35,100%,62%) 100%);
}
body[data-page="it"]{
  --vertical:hsl(355,90%,60%);
  --vertical-2:hsl(15,90%,55%);
  --vertical-soft:rgba(248,113,113,.15);
  --vertical-grad:linear-gradient(135deg,hsl(345,90%,52%) 0%,hsl(15,90%,58%) 100%);
}
/* Non-vertical info pages share a cyan→blue accent */
body[data-page="methodology"],
body[data-page="about"],
body[data-page="wiki"],
body[data-page="cjm"],
body[data-page="splitter-proto"],
body[data-page="audit"]{
  --vertical:hsl(200,95%,62%);
  --vertical-2:hsl(220,90%,62%);
  --vertical-soft:rgba(56,189,248,.15);
  --vertical-grad:linear-gradient(135deg,hsl(220,90%,55%) 0%,hsl(200,95%,62%) 100%);
}
/* z-index and badge/label accent for info pages */
body[data-page="methodology"] .footer-x,
body[data-page="about"] .footer-x,
body[data-page="wiki"] .footer-x,
body[data-page="cjm"] .footer-x,
body[data-page="splitter-proto"] .footer-x,
body[data-page="audit"] .footer-x,
body[data-page="methodology"] main,
body[data-page="about"] main,
body[data-page="wiki"] main,
body[data-page="cjm"] main,
body[data-page="splitter-proto"] main,
body[data-page="audit"] main{position:relative;z-index:1}

body[data-page="methodology"] .section__label,
body[data-page="about"] .section__label,
body[data-page="wiki"] .section__label,
body[data-page="cjm"] .section__label,
body[data-page="splitter-proto"] .section__label,
body[data-page="audit"] .section__label{color:var(--vertical)}

body[data-page="methodology"] .badge,
body[data-page="about"] .badge,
body[data-page="wiki"] .badge,
body[data-page="cjm"] .badge,
body[data-page="splitter-proto"] .badge,
body[data-page="audit"] .badge{
  border-color:var(--vertical);
  background:var(--vertical-soft);
  color:var(--vertical);
}
/* Make section-level backgrounds transparent on info pages so shader-dots stays uniform */
body[data-page="methodology"],
body[data-page="about"],
body[data-page="wiki"],
body[data-page="cjm"],
body[data-page="splitter-proto"],
body[data-page="audit"]{background:#000}

body[data-page="methodology"] .section,
body[data-page="about"] .section,
body[data-page="wiki"] .section,
body[data-page="cjm"] .section,
body[data-page="splitter-proto"] .section,
body[data-page="audit"] .section,
body[data-page="methodology"] .section--alt,
body[data-page="about"] .section--alt,
body[data-page="wiki"] .section--alt,
body[data-page="cjm"] .section--alt,
body[data-page="splitter-proto"] .section--alt,
body[data-page="audit"] .section--alt,
body[data-page="methodology"] .compare-section,
body[data-page="about"] .compare-section,
body[data-page="wiki"] .compare-section,
body[data-page="cjm"] .compare-section,
body[data-page="methodology"] .cta-block,
body[data-page="about"] .cta-block,
body[data-page="wiki"] .cta-block,
body[data-page="cjm"] .cta-block,
body[data-page="splitter-proto"] .cta-block,
body[data-page="audit"] .cta-block,
body[data-page="methodology"] .content-section,
body[data-page="about"] .content-section,
body[data-page="methodology"] .axis-section,
body[data-page="about"] .axis-section,
body[data-page="methodology"] .profile-hero,
body[data-page="about"] .profile-hero,
body[data-page="methodology"] .meth-hero,
body[data-page="about"] .meth-hero{background:transparent}

/* ── Info pages: glass + warp treatment for cards ───────── */
/* Dim-bars (methodology axis bars) */
body[data-page="methodology"] .dim-bar{
  position:relative;isolation:isolate;
  background:rgba(0,0,0,.4);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.08);border-radius:14px;
  overflow:hidden;
}
body[data-page="methodology"] .dim-bar::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:conic-gradient(from 180deg at 50% 50%,
    hsl(220,90%,55%) 0deg,
    hsl(200,95%,62%) 120deg,
    rgba(56,189,248,.2) 240deg,
    hsl(220,90%,55%) 360deg);
  filter:blur(40px) saturate(1.2);opacity:.08;
}
body[data-page="methodology"] .dim-track{background:rgba(255,255,255,.06)}

/* Gap-blocks (violet-accent info callouts) → cyan-blue warp glass */
body[data-page="methodology"] .gap-block,
body[data-page="about"] .vision-list{}
body[data-page="methodology"] .gap-block{
  position:relative;isolation:isolate;
  background:rgba(0,0,0,.4);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border:1px solid rgba(56,189,248,.2);border-radius:20px;
  box-shadow:0 8px 28px rgba(0,0,0,.3);
}
body[data-page="methodology"] .gap-block::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:20px;
  background:conic-gradient(from 180deg at 50% 50%,
    hsl(220,90%,55%) 0deg,
    hsl(200,95%,62%) 140deg,
    rgba(99,102,241,.6) 260deg,
    hsl(220,90%,55%) 360deg);
  filter:blur(40px) saturate(1.3);opacity:.12;
}
body[data-page="methodology"] .gap-title{color:var(--vertical)}

/* Axis icon → cyan-blue tint */
body[data-page="methodology"] .axis-icon{
  background:var(--vertical-soft);
  border:1px solid rgba(56,189,248,.3);
  color:var(--vertical);
}

/* TOC number chips */
body[data-page="methodology"] .toc-num{
  background:var(--vertical-soft);
  border:1px solid rgba(56,189,248,.3);
  color:var(--vertical);
}
body[data-page="methodology"] .toc-list a:hover{color:var(--vertical)}

/* Compare + maturity tables → glass */
body[data-page="methodology"] .compare-table,
body[data-page="methodology"] .maturity-table{
  background:rgba(0,0,0,.4);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08);
}
body[data-page="methodology"] .compare-table th,
body[data-page="methodology"] .maturity-table th{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
}
body[data-page="methodology"] .compare-table td,
body[data-page="methodology"] .maturity-table td{
  border:1px solid rgba(255,255,255,.06);
}
body[data-page="methodology"] .compare-table tr:hover td,
body[data-page="methodology"] .maturity-table tr:hover td{background:rgba(255,255,255,.03)}

/* Download block (PDF callout) */
body[data-page="methodology"] .download-block{
  position:relative;isolation:isolate;
  background:rgba(0,0,0,.4);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border:1px solid rgba(56,189,248,.2);border-radius:20px;
  box-shadow:0 8px 28px rgba(0,0,0,.3);
}
body[data-page="methodology"] .download-block::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:20px;
  background:conic-gradient(from 180deg at 50% 50%,
    hsl(220,90%,55%) 0deg,
    hsl(200,95%,62%) 140deg,
    rgba(99,102,241,.6) 260deg,
    hsl(220,90%,55%) 360deg);
  filter:blur(40px) saturate(1.3);opacity:.14;
}
body[data-page="methodology"] .download-icon{
  background:var(--vertical-soft);color:var(--vertical);
}
body[data-page="methodology"] .download-icon svg{stroke:var(--vertical) !important}

/* About page: expertise items, timeline, vision checks, articles */
body[data-page="about"] .expertise-item,
body[data-page="about"] .article-item{
  position:relative;isolation:isolate;
  background:rgba(0,0,0,.4);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.08);border-radius:16px;
  overflow:hidden;
}
body[data-page="about"] .expertise-item::after,
body[data-page="about"] .article-item::after{
  content:'';position:absolute;inset:-30%;z-index:-1;pointer-events:none;
  background:conic-gradient(from 0deg at 50% 50%,
    hsl(220,90%,55%) 0deg,
    hsl(200,95%,62%) 90deg,
    rgba(99,102,241,.8) 180deg,
    hsl(200,95%,62%) 270deg,
    hsl(220,90%,55%) 360deg);
  filter:blur(30px) saturate(1.3);opacity:.22;
  animation:profile-link-spin 12s linear infinite;
}
body[data-page="about"] .expertise-item:hover::after,
body[data-page="about"] .article-item:hover::after{
  opacity:.38;filter:blur(24px) saturate(1.5);
}
@media(prefers-reduced-motion:reduce){
  body[data-page="about"] .expertise-item::after,
  body[data-page="about"] .article-item::after{animation:none}
}
body[data-page="about"] .expertise-item:hover,
body[data-page="about"] .article-item:hover{
  border-color:rgba(56,189,248,.4);transform:translateY(-2px);
}
body[data-page="about"] .vision-check{
  background:var(--vertical-soft);
  border:1px solid rgba(56,189,248,.3);
  color:var(--vertical);
}
body[data-page="about"] .timeline::before{background:rgba(255,255,255,.08)}
body[data-page="about"] .timeline-item::before{
  background:var(--vertical);
  box-shadow:0 0 0 2px rgba(56,189,248,.25);
}
body[data-page="about"] .article-tag.ai,
body[data-page="about"] .article-tag.edu{
  background:var(--vertical-soft);color:var(--vertical);
}
body[data-page="about"] .profile-title{color:var(--vertical)}
body[data-page="about"] .profile-link{
  position:relative;isolation:isolate;
  background:rgba(0,0,0,.4);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.1);
  overflow:hidden;
}
body[data-page="about"] .profile-link::before{
  content:'';position:absolute;inset:-40%;z-index:-1;pointer-events:none;
  background:conic-gradient(from 0deg at 50% 50%,
    hsl(220,90%,55%) 0deg,
    hsl(200,95%,62%) 90deg,
    rgba(99,102,241,.8) 180deg,
    hsl(200,95%,62%) 270deg,
    hsl(220,90%,55%) 360deg);
  filter:blur(18px) saturate(1.3);opacity:.35;
  animation:profile-link-spin 8s linear infinite;
}
@keyframes profile-link-spin{
  to{transform:rotate(360deg)}
}
body[data-page="about"] .profile-link:hover{border-color:var(--vertical);color:#fff}
body[data-page="about"] .profile-link:hover::before{opacity:.6;filter:blur(14px) saturate(1.5)}
@media(prefers-reduced-motion:reduce){
  body[data-page="about"] .profile-link::before{animation:none}
}
body[data-page="about"] .avatar{border-color:rgba(56,189,248,.3)}

/* ── Particles background (splitter + hrd) ───────── */
.particles-bg{
  position:fixed;top:0;left:0;right:0;bottom:0;
  z-index:-1;pointer-events:auto;
  overflow:hidden;
  background:linear-gradient(135deg,
    #000000 0%,
    #020617 40%,
    #050d1a 70%,
    #0a1628 100%);
}
.particles-bg .particles-js-canvas-el{
  position:absolute;top:0;left:0;max-width:100%;
}
.particles-bg canvas{display:block}

/* ── FAQ sections (vertical pages) ───────── */
.faq-section{padding:64px 0}
.faq-list{display:flex;flex-direction:column;gap:12px;margin-top:32px}
.faq-item{
  position:relative;isolation:isolate;overflow:hidden;
  background:rgba(0,0,0,.4);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.08);border-radius:16px;
  transition:border-color .25s var(--ease);
}
.faq-item::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:conic-gradient(from 180deg at 50% 50%,
    var(--vertical,#38bdf8) 0deg,
    var(--vertical-2,#6366f1) 140deg,
    rgba(99,102,241,.4) 260deg,
    var(--vertical,#38bdf8) 360deg);
  filter:blur(40px) saturate(1.2);opacity:.08;
}
.faq-item[open]{border-color:var(--vertical,rgba(56,189,248,.35))}
.faq-item[open]::after{opacity:.14}
.faq-item summary{
  cursor:pointer;padding:20px 24px;font-weight:600;font-size:1rem;
  color:rgba(255,255,255,.95);list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'+';font-size:1.4rem;font-weight:400;color:var(--vertical);
  transition:transform .25s var(--ease);flex-shrink:0;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{
  padding:0 24px 20px;font-size:.94rem;line-height:1.7;
  color:rgba(255,255,255,.78);margin:0;
}
@media(max-width:600px){
  .faq-item summary{padding:16px 18px;font-size:.96rem}
  .faq-item p{padding:0 18px 18px;font-size:.9rem}
}

/* ── Mobile tweaks ───────── */
@media(max-width:600px){
  /* Allow long CTA labels to wrap instead of overflowing */
  .hero-v__actions .btn,
  .cta-buttons .btn{
    white-space:normal;line-height:1.3;
    padding-left:18px;padding-right:18px;
    width:100%;max-width:360px;text-align:center;
  }
  .hero-v__actions,
  .cta-buttons{
    display:flex;flex-direction:column;gap:10px;align-items:center;
  }
}

/* ── Unified width + brighter text + radial backdrop for info pages ───── */
/* Unify container width on heroes */
body[data-page="methodology"] .meth-hero .container,
body[data-page="about"] .profile-hero .container{
  max-width:var(--max-w-narrow);
}

/* Brighter body text on info pages */
body[data-page="methodology"],
body[data-page="about"]{color:rgba(255,255,255,.92)}
body[data-page="methodology"] p,
body[data-page="methodology"] li,
body[data-page="methodology"] .section__desc,
body[data-page="methodology"] .axis-desc,
body[data-page="methodology"] .gap-block p,
body[data-page="methodology"] .subtitle,
body[data-page="methodology"] .compare-table td,
body[data-page="methodology"] .maturity-table td,
body[data-page="methodology"] .download-body p,
body[data-page="methodology"] .ip-notice,
body[data-page="about"] p,
body[data-page="about"] li,
body[data-page="about"] .expertise-item p,
body[data-page="about"] .timeline-item p,
body[data-page="about"] .vision-list li,
body[data-page="about"] .profile-intro,
body[data-page="about"] .article-body h4{color:rgba(255,255,255,.88)}

body[data-page="methodology"] .toc-list a,
body[data-page="methodology"] .dim-name,
body[data-page="about"] .expertise-item h3,
body[data-page="about"] .timeline-item h3{color:rgba(255,255,255,.95)}

body[data-page="methodology"] .meta-line,
body[data-page="methodology"] .toc-title,
body[data-page="methodology"] .axis-org,
body[data-page="methodology"] .timeline-date,
body[data-page="about"] .timeline-date,
body[data-page="about"] .section-label-sm,
body[data-page="about"] .article-body p{color:rgba(255,255,255,.6)}

/* Radial darken backdrop around text-only blocks (no card bg) */
body[data-page="methodology"] .meth-hero .container,
body[data-page="methodology"] #tldr .animate-on-scroll,
body[data-page="methodology"] #why .animate-on-scroll,
body[data-page="methodology"] #compare > .container--narrow > .animate-on-scroll:first-child,
body[data-page="methodology"] #maturity > .container--narrow > .animate-on-scroll:first-child,
body[data-page="about"] .profile-hero .container,
body[data-page="about"] .content-section{
  position:relative;isolation:isolate;
}
body[data-page="methodology"] .meth-hero .container::before,
body[data-page="methodology"] #tldr .animate-on-scroll::before,
body[data-page="methodology"] #why .animate-on-scroll::before,
body[data-page="methodology"] #compare > .container--narrow > .animate-on-scroll:first-child::before,
body[data-page="methodology"] #maturity > .container--narrow > .animate-on-scroll:first-child::before,
body[data-page="about"] .profile-hero .container::before,
body[data-page="about"] .content-section::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  inset:-120px -200px;
  background:radial-gradient(ellipse 75% 85% at 50% 50%,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.7) 30%,
    rgba(0,0,0,.45) 55%,
    rgba(0,0,0,.2) 75%,
    transparent 92%);
  filter:blur(24px);
}

/* TOC (methodology) — center align */
body[data-page="methodology"] .toc{text-align:center}
body[data-page="methodology"] .toc-list{justify-content:center}

/* ── Quote-style "Подход" (about) — no border/bg, just italic + accent label ── */
body[data-page="about"] .content-section--quote p{
  font-size:1.15rem;line-height:1.7;font-style:italic;
  color:rgba(255,255,255,.94) !important;
  margin-bottom:16px;
}
body[data-page="about"] .content-section--quote p:last-child{margin-bottom:0}
body[data-page="about"] .content-section--quote .section-label-sm{
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:8px;
  color:var(--vertical);margin-bottom:28px;
  font-size:2.5rem;font-weight:700;letter-spacing:-.01em;text-transform:none;
  line-height:1.1;
}
body[data-page="about"] .content-section--quote .underline-anim{
  display:block;color:var(--vertical);overflow:visible;
}
body[data-page="about"] .content-section--quote .underline-anim path{
  stroke-dasharray:1;stroke-dashoffset:1;
}
body[data-page="about"] .content-section--quote.visible .underline-anim path{
  animation:underline-draw 1.5s cubic-bezier(.65,0,.35,1) .2s forwards;
}
@keyframes underline-draw{
  from{stroke-dashoffset:1}
  to  {stroke-dashoffset:0}
}

/* ── Hand-written circle around hero title (about) ───────── */
body[data-page="about"] .hand-written{
  position:relative;display:inline-block;
  padding:40px 60px 30px;margin:8px auto 12px;
  color:var(--vertical);
}
body[data-page="about"] .hand-written h1{
  position:relative;z-index:1;margin:0;
}
body[data-page="about"] .hand-written__svg{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;
}
body[data-page="about"] .hand-written__svg path{
  stroke-dasharray:1;stroke-dashoffset:1;
  opacity:0;
  animation:hand-draw 2.5s cubic-bezier(.43,.13,.23,.96) .3s forwards;
}
@keyframes hand-draw{
  0%  {stroke-dashoffset:1;opacity:0}
  15% {opacity:.9}
  100%{stroke-dashoffset:0;opacity:.9}
}
@media(prefers-reduced-motion:reduce){
  body[data-page="about"] .hand-written__svg path{
    animation:none;stroke-dashoffset:0;opacity:.9;
  }
}
@media(max-width:600px){
  body[data-page="about"] .hand-written{padding:30px 30px 24px}
}
@media(prefers-reduced-motion:reduce){
  body[data-page="about"] .content-section--quote .underline-anim path{
    stroke-dashoffset:0;animation:none;
  }
}

/* Apply vertical accent across shared components on vertical pages */
body[data-page="hrd"],body[data-page="corpuni"],body[data-page="edu"],body[data-page="edtech"],body[data-page="it"]{
  /* repaint components.css tokens via grad override */
}
body[data-page="hrd"] .badge,
body[data-page="corpuni"] .badge,
body[data-page="edu"] .badge,
body[data-page="edtech"] .badge,
body[data-page="it"] .badge{
  border-color:var(--vertical);
  background:var(--vertical-soft);
  color:var(--vertical);
}
body[data-page="hrd"] .section__label,
body[data-page="corpuni"] .section__label,
body[data-page="edu"] .section__label,
body[data-page="edtech"] .section__label,
body[data-page="it"] .section__label{color:var(--vertical)}

body[data-page="hrd"] .pain-card__num,
body[data-page="corpuni"] .pain-card__num,
body[data-page="edu"] .pain-card__num,
body[data-page="edtech"] .pain-card__num,
body[data-page="it"] .pain-card__num{
  background:var(--vertical-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
body[data-page="hrd"] .sol-card__num,
body[data-page="corpuni"] .sol-card__num,
body[data-page="edu"] .sol-card__num,
body[data-page="edtech"] .sol-card__num,
body[data-page="it"] .sol-card__num{color:var(--vertical)}
body[data-page="hrd"] .sol-card:hover,
body[data-page="corpuni"] .sol-card:hover,
body[data-page="edu"] .sol-card:hover,
body[data-page="edtech"] .sol-card:hover,
body[data-page="it"] .sol-card:hover{border-color:var(--vertical)}

body[data-page="hrd"] .step__num,
body[data-page="corpuni"] .step__num,
body[data-page="edu"] .step__num,
body[data-page="edtech"] .step__num,
body[data-page="it"] .step__num{
  background:var(--vertical-soft);border-color:var(--vertical);color:var(--vertical);
}

body[data-page="hrd"] .btn--primary,
body[data-page="corpuni"] .btn--primary,
body[data-page="edu"] .btn--primary,
body[data-page="edtech"] .btn--primary,
body[data-page="it"] .btn--primary{background:var(--vertical-grad)}
body[data-page="hrd"] .btn--primary:hover,
body[data-page="corpuni"] .btn--primary:hover,
body[data-page="edu"] .btn--primary:hover,
body[data-page="edtech"] .btn--primary:hover,
body[data-page="it"] .btn--primary:hover{box-shadow:0 8px 24px var(--vertical-soft)}

body[data-page="hrd"] .btn--secondary:hover,
body[data-page="corpuni"] .btn--secondary:hover,
body[data-page="edu"] .btn--secondary:hover,
body[data-page="edtech"] .btn--secondary:hover,
body[data-page="it"] .btn--secondary:hover{border-color:var(--vertical)}

body[data-page="hrd"] .compliance-item__check,
body[data-page="corpuni"] .compliance-item__check,
body[data-page="edu"] .compliance-item__check,
body[data-page="edtech"] .compliance-item__check,
body[data-page="it"] .compliance-item__check{
  background:var(--vertical-soft);border-color:var(--vertical);color:var(--vertical);
}

body[data-page="hrd"] .it-block li::before,
body[data-page="corpuni"] .it-block li::before,
body[data-page="edu"] .it-block li::before,
body[data-page="edtech"] .it-block li::before,
body[data-page="it"] .it-block li::before{background:var(--vertical)}

/* Spec / ROI tables get glass-card treatment */
body[data-page="hrd"] .animate-on-scroll:has(.spec-table),
body[data-page="hrd"] .animate-on-scroll:has(.roi-table),
body[data-page="corpuni"] .animate-on-scroll:has(.spec-table),
body[data-page="corpuni"] .animate-on-scroll:has(.roi-table),
body[data-page="edu"] .animate-on-scroll:has(.spec-table),
body[data-page="edu"] .animate-on-scroll:has(.roi-table),
body[data-page="edtech"] .animate-on-scroll:has(.spec-table),
body[data-page="edtech"] .animate-on-scroll:has(.roi-table),
body[data-page="it"] .animate-on-scroll:has(.spec-table),
body[data-page="it"] .animate-on-scroll:has(.roi-table){
  position:relative;
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  box-shadow:0 8px 28px rgba(0,0,0,.3);
  padding:8px 24px;
}
body[data-page="hrd"] .spec-table td,
body[data-page="corpuni"] .spec-table td,
body[data-page="edu"] .spec-table td,
body[data-page="edtech"] .spec-table td,
body[data-page="it"] .spec-table td,
body[data-page="hrd"] .roi-table td,
body[data-page="corpuni"] .roi-table td,
body[data-page="edu"] .roi-table td,
body[data-page="edtech"] .roi-table td,
body[data-page="it"] .roi-table td{
  border-color:rgba(255,255,255,.08);
  color:rgba(255,255,255,.88);
}
body[data-page="hrd"] .spec-table td:first-child,
body[data-page="corpuni"] .spec-table td:first-child,
body[data-page="edu"] .spec-table td:first-child,
body[data-page="edtech"] .spec-table td:first-child,
body[data-page="it"] .spec-table td:first-child{color:#fff}
body[data-page="hrd"] .roi-table th,
body[data-page="corpuni"] .roi-table th,
body[data-page="edu"] .roi-table th,
body[data-page="edtech"] .roi-table th,
body[data-page="it"] .roi-table th{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.1);
  color:rgba(255,255,255,.85);
}

/* Integration tags use vertical accent */
body[data-page="hrd"] .integrations__tag,
body[data-page="corpuni"] .integrations__tag,
body[data-page="edu"] .integrations__tag,
body[data-page="edtech"] .integrations__tag,
body[data-page="it"] .integrations__tag{
  border-color:var(--vertical);
  color:var(--vertical);
  background:var(--vertical-soft);
}

/* Radial backdrop behind section heading area on vertical pages */
body[data-page="hrd"] .section .container--narrow,
body[data-page="corpuni"] .section .container--narrow,
body[data-page="edu"] .section .container--narrow,
body[data-page="edtech"] .section .container--narrow,
body[data-page="it"] .section .container--narrow,
body[data-page="hrd"] .section .container,
body[data-page="corpuni"] .section .container,
body[data-page="edu"] .section .container,
body[data-page="edtech"] .section .container,
body[data-page="it"] .section .container{
  position:relative;
}
body[data-page="hrd"] .section .container--narrow::before,
body[data-page="corpuni"] .section .container--narrow::before,
body[data-page="edu"] .section .container--narrow::before,
body[data-page="edtech"] .section .container--narrow::before,
body[data-page="it"] .section .container--narrow::before,
body[data-page="hrd"] .cta-block .container::before,
body[data-page="corpuni"] .cta-block .container::before,
body[data-page="edu"] .cta-block .container::before,
body[data-page="edtech"] .cta-block .container::before,
body[data-page="it"] .cta-block .container::before{
  content:'';position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  width:min(820px,95%);height:240px;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(9,9,11,.78) 0%,rgba(9,9,11,.5) 35%,rgba(9,9,11,.15) 65%,transparent 100%);
  filter:blur(14px);pointer-events:none;
}

/* Unified transparent sections on vertical pages */
body[data-page="hrd"] .section,
body[data-page="corpuni"] .section,
body[data-page="edu"] .section,
body[data-page="edtech"] .section,
body[data-page="it"] .section,
body[data-page="hrd"] .section--alt,
body[data-page="corpuni"] .section--alt,
body[data-page="edu"] .section--alt,
body[data-page="edtech"] .section--alt,
body[data-page="it"] .section--alt,
body[data-page="hrd"] .cta-block,
body[data-page="corpuni"] .cta-block,
body[data-page="edu"] .cta-block,
body[data-page="edtech"] .cta-block,
body[data-page="it"] .cta-block{
  position:relative;z-index:1;background:transparent !important;
}
/* Gradient-border glass cards (schema-card style) */
body[data-page="hrd"] .pain-card,
body[data-page="corpuni"] .pain-card,
body[data-page="edu"] .pain-card,
body[data-page="edtech"] .pain-card,
body[data-page="it"] .pain-card,
body[data-page="hrd"] .sol-card,
body[data-page="corpuni"] .sol-card,
body[data-page="edu"] .sol-card,
body[data-page="edtech"] .sol-card,
body[data-page="it"] .sol-card,
body[data-page="hrd"] .it-block,
body[data-page="corpuni"] .it-block,
body[data-page="edu"] .it-block,
body[data-page="edtech"] .it-block,
body[data-page="it"] .it-block,
body[data-page="hrd"] .steps,
body[data-page="corpuni"] .steps,
body[data-page="edu"] .steps,
body[data-page="edtech"] .steps,
body[data-page="it"] .steps,
body[data-page="hrd"] .faq,
body[data-page="corpuni"] .faq,
body[data-page="edu"] .faq,
body[data-page="edtech"] .faq,
body[data-page="it"] .faq{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:rgba(0,0,0,.4) !important;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border:1px solid transparent;
  border-radius:20px;
  box-shadow:0 8px 28px rgba(0,0,0,.3);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}

/* Warp-conic ambient tint behind card content (subtle, dots still visible) */
body[data-page="hrd"] .pain-card::after,
body[data-page="corpuni"] .pain-card::after,
body[data-page="edu"] .pain-card::after,
body[data-page="edtech"] .pain-card::after,
body[data-page="it"] .pain-card::after,
body[data-page="hrd"] .sol-card::after,
body[data-page="corpuni"] .sol-card::after,
body[data-page="edu"] .sol-card::after,
body[data-page="edtech"] .sol-card::after,
body[data-page="it"] .sol-card::after,
body[data-page="hrd"] .it-block::after,
body[data-page="corpuni"] .it-block::after,
body[data-page="edu"] .it-block::after,
body[data-page="edtech"] .it-block::after,
body[data-page="it"] .it-block::after,
body[data-page="hrd"] .steps::after,
body[data-page="corpuni"] .steps::after,
body[data-page="edu"] .steps::after,
body[data-page="edtech"] .steps::after,
body[data-page="it"] .steps::after,
body[data-page="hrd"] .faq::after,
body[data-page="corpuni"] .faq::after,
body[data-page="edu"] .faq::after,
body[data-page="edtech"] .faq::after,
body[data-page="it"] .faq::after{
  content:'';position:absolute;inset:-30%;z-index:-1;
  filter:blur(40px) saturate(130%);
  opacity:.12;
  animation:warp-spin 22s linear infinite;
  pointer-events:none;
}
body[data-page="hrd"] .pain-card::after,
body[data-page="hrd"] .sol-card::after,
body[data-page="hrd"] .it-block::after,
body[data-page="hrd"] .steps::after,
body[data-page="hrd"] .faq::after{
  background:conic-gradient(from 0deg,hsl(280,100%,30%),hsl(320,100%,60%),hsl(340,90%,40%),hsl(300,100%,70%),hsl(280,100%,30%));
}
body[data-page="corpuni"] .pain-card::after,
body[data-page="corpuni"] .sol-card::after,
body[data-page="corpuni"] .it-block::after,
body[data-page="corpuni"] .steps::after,
body[data-page="corpuni"] .faq::after{
  background:conic-gradient(from 40deg,hsl(200,100%,25%),hsl(180,100%,65%),hsl(160,90%,35%),hsl(190,100%,75%),hsl(200,100%,25%));
}
body[data-page="edu"] .pain-card::after,
body[data-page="edu"] .sol-card::after,
body[data-page="edu"] .it-block::after,
body[data-page="edu"] .steps::after,
body[data-page="edu"] .faq::after{
  background:conic-gradient(from 80deg,hsl(120,100%,25%),hsl(160,100%,55%),hsl(170,90%,35%),hsl(140,100%,65%),hsl(120,100%,25%));
}
body[data-page="edtech"] .pain-card::after,
body[data-page="edtech"] .sol-card::after,
body[data-page="edtech"] .it-block::after,
body[data-page="edtech"] .steps::after,
body[data-page="edtech"] .faq::after{
  background:conic-gradient(from 120deg,hsl(30,100%,35%),hsl(50,100%,65%),hsl(40,90%,40%),hsl(20,100%,60%),hsl(30,100%,35%));
}
body[data-page="it"] .pain-card::after,
body[data-page="it"] .sol-card::after,
body[data-page="it"] .it-block::after,
body[data-page="it"] .steps::after,
body[data-page="it"] .faq::after{
  background:conic-gradient(from 160deg,hsl(0,85%,35%),hsl(15,90%,55%),hsl(345,90%,45%),hsl(5,100%,60%),hsl(0,85%,35%));
}
@media(prefers-reduced-motion:reduce){
  body[data-page="hrd"] .pain-card::after,
  body[data-page="corpuni"] .pain-card::after,
  body[data-page="edu"] .pain-card::after,
  body[data-page="edtech"] .pain-card::after,
  body[data-page="it"] .pain-card::after{animation:none}
}
/* Gradient border on top via ::before + mask */
body[data-page="hrd"] .pain-card::before,
body[data-page="corpuni"] .pain-card::before,
body[data-page="edu"] .pain-card::before,
body[data-page="edtech"] .pain-card::before,
body[data-page="it"] .pain-card::before,
body[data-page="hrd"] .sol-card::before,
body[data-page="corpuni"] .sol-card::before,
body[data-page="edu"] .sol-card::before,
body[data-page="edtech"] .sol-card::before,
body[data-page="it"] .sol-card::before,
body[data-page="hrd"] .it-block::before,
body[data-page="corpuni"] .it-block::before,
body[data-page="edu"] .it-block::before,
body[data-page="edtech"] .it-block::before,
body[data-page="it"] .it-block::before,
body[data-page="hrd"] .steps::before,
body[data-page="corpuni"] .steps::before,
body[data-page="edu"] .steps::before,
body[data-page="edtech"] .steps::before,
body[data-page="it"] .steps::before,
body[data-page="hrd"] .faq::before,
body[data-page="corpuni"] .faq::before,
body[data-page="edu"] .faq::before,
body[data-page="edtech"] .faq::before,
body[data-page="it"] .faq::before{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  width:auto;height:auto;opacity:1;
  border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,
    rgba(255,255,255,.28) 0%,
    rgba(255,255,255,.08) 30%,
    transparent 55%,
    var(--vertical) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
  transition:opacity .3s var(--ease);
}
/* Steps + FAQ — inner padding so content doesn't kiss edges */
body[data-page="hrd"] .steps,
body[data-page="corpuni"] .steps,
body[data-page="edu"] .steps,
body[data-page="edtech"] .steps,
body[data-page="it"] .steps,
body[data-page="hrd"] .faq,
body[data-page="corpuni"] .faq,
body[data-page="edu"] .faq,
body[data-page="edtech"] .faq,
body[data-page="it"] .faq{
  padding:8px 28px;
}
/* Hover — stronger glow + lift */
body[data-page="hrd"] .pain-card:hover,
body[data-page="corpuni"] .pain-card:hover,
body[data-page="edu"] .pain-card:hover,
body[data-page="edtech"] .pain-card:hover,
body[data-page="it"] .pain-card:hover,
body[data-page="hrd"] .sol-card:hover,
body[data-page="corpuni"] .sol-card:hover,
body[data-page="edu"] .sol-card:hover,
body[data-page="edtech"] .sol-card:hover,
body[data-page="it"] .sol-card:hover{
  transform:translateY(-3px);
  box-shadow:
    0 14px 40px rgba(0,0,0,.55),
    0 0 48px var(--vertical-soft),
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 0 60px rgba(255,255,255,.04);
}
/* Ensure content above shader (don't touch .nav-pill — it is position:fixed) */
body[data-page="hrd"] .footer-x,
body[data-page="corpuni"] .footer-x,
body[data-page="edu"] .footer-x,
body[data-page="edtech"] .footer-x,
body[data-page="it"] .footer-x,
body[data-page="hrd"] main,
body[data-page="corpuni"] main,
body[data-page="edu"] main,
body[data-page="edtech"] main,
body[data-page="it"] main{position:relative;z-index:1}

body[data-page="hrd"] .path-card:hover,
body[data-page="corpuni"] .path-card:hover,
body[data-page="edu"] .path-card:hover,
body[data-page="edtech"] .path-card:hover,
body[data-page="it"] .path-card:hover{border-color:var(--vertical)}

/* Hero-shader layout for vertical pages */
.hero-v{
  position:relative;padding:140px 24px 72px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;background:transparent;text-align:center;
}
.hero-v__content{position:relative;z-index:1;width:100%;max-width:860px;margin:0 auto}
.hero-v .badge{
  margin-bottom:24px;display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:100px;font-size:.82rem;font-weight:500;
}
.hero-v__gooey{
  position:relative;margin:10px auto 32px;max-width:900px;
}
.hero-v__gooey::before{
  content:'';position:absolute;inset:-60px -160px;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(9,9,11,.9) 0%,rgba(9,9,11,.6) 45%,rgba(9,9,11,.2) 75%,transparent 100%);
  filter:blur(12px);pointer-events:none;
}
.hero-v__heading{
  position:relative;display:inline-block;padding:8px 24px;
}
.hero-v__heading::before{
  content:'';position:absolute;inset:-80px -160px;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(9,9,11,.92) 0%,rgba(9,9,11,.7) 45%,rgba(9,9,11,.3) 75%,transparent 100%);
  filter:blur(14px);pointer-events:none;
}
.hero-v h1{
  font-size:clamp(1.6rem,3.3vw,2.2rem);letter-spacing:-.03em;
  line-height:1.2;margin-bottom:16px;color:rgba(255,255,255,.95);
  text-shadow:0 2px 16px rgba(0,0,0,.6);
}
.hero-v__sub{
  font-size:1rem;color:rgba(255,255,255,.78);
  max-width:620px;line-height:1.65;margin:0 auto;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.hero-v__actions{
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center;
  position:relative;z-index:2;margin-top:36px;
}

/* Shimmer on hero buttons — both dark, primary has accent border */
body[data-page="hrd"] .btn,
body[data-page="corpuni"] .btn,
body[data-page="edu"] .btn,
body[data-page="edtech"] .btn,
body[data-page="it"] .btn{
  position:relative;overflow:hidden;
  background:linear-gradient(110deg,#0a0a0d 40%,#1f1f26 50%,#0a0a0d 60%);
  background-size:200% 100%;
  animation:shimmer2 3.2s infinite linear;
  box-shadow:none;
}
body[data-page="hrd"] .btn--primary,
body[data-page="corpuni"] .btn--primary,
body[data-page="edu"] .btn--primary,
body[data-page="edtech"] .btn--primary,
body[data-page="it"] .btn--primary{
  color:#fff;
  border:1px solid var(--vertical);
  background:#09090B;
  animation:none;
  isolation:isolate;
  box-shadow:0 0 0 1px var(--vertical-soft),0 8px 28px var(--vertical-soft);
}
/* Conic warp layer inside primary */
body[data-page="hrd"] .btn--primary::before,
body[data-page="corpuni"] .btn--primary::before,
body[data-page="edu"] .btn--primary::before,
body[data-page="edtech"] .btn--primary::before,
body[data-page="it"] .btn--primary::before{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  width:auto;height:auto;opacity:1;
  inset:-60%;z-index:-1;
  filter:blur(24px) saturate(140%);
  animation:warp-spin 14s linear infinite;
  pointer-events:none;
}
body[data-page="hrd"] .btn--primary::before{
  background:conic-gradient(from 0deg,hsl(280,100%,30%),hsl(320,100%,60%),hsl(340,90%,40%),hsl(300,100%,70%),hsl(280,100%,30%));
}
body[data-page="corpuni"] .btn--primary::before{
  background:conic-gradient(from 40deg,hsl(200,100%,25%),hsl(180,100%,65%),hsl(160,90%,35%),hsl(190,100%,75%),hsl(200,100%,25%));
}
body[data-page="edu"] .btn--primary::before{
  background:conic-gradient(from 80deg,hsl(120,100%,25%),hsl(160,100%,55%),hsl(170,90%,35%),hsl(140,100%,65%),hsl(120,100%,25%));
}
body[data-page="edtech"] .btn--primary::before{
  background:conic-gradient(from 120deg,hsl(30,100%,35%),hsl(50,100%,65%),hsl(40,90%,40%),hsl(20,100%,60%),hsl(30,100%,35%));
}
body[data-page="it"] .btn--primary::before{
  background:conic-gradient(from 160deg,hsl(0,85%,35%),hsl(15,90%,55%),hsl(345,90%,45%),hsl(5,100%,60%),hsl(0,85%,35%));
}
body[data-page="hrd"] .btn--primary:hover::before,
body[data-page="corpuni"] .btn--primary:hover::before,
body[data-page="edu"] .btn--primary:hover::before,
body[data-page="edtech"] .btn--primary:hover::before,
body[data-page="it"] .btn--primary:hover::before{
  animation-duration:7s;
  filter:blur(18px) saturate(180%);
}
@media(prefers-reduced-motion:reduce){
  body[data-page="hrd"] .btn--primary::before,
  body[data-page="corpuni"] .btn--primary::before,
  body[data-page="edu"] .btn--primary::before,
  body[data-page="edtech"] .btn--primary::before,
  body[data-page="it"] .btn--primary::before{animation:none}
}
body[data-page="hrd"] .btn--primary:hover,
body[data-page="corpuni"] .btn--primary:hover,
body[data-page="edu"] .btn--primary:hover,
body[data-page="edtech"] .btn--primary:hover,
body[data-page="it"] .btn--primary:hover{
  transform:translateY(-1px);
  box-shadow:0 0 0 1px var(--vertical),0 10px 36px var(--vertical-soft);
}
body[data-page="hrd"] .btn--secondary,
body[data-page="corpuni"] .btn--secondary,
body[data-page="edu"] .btn--secondary,
body[data-page="edtech"] .btn--secondary,
body[data-page="it"] .btn--secondary{
  color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.12);
}
body[data-page="hrd"] .btn--secondary:hover,
body[data-page="corpuni"] .btn--secondary:hover,
body[data-page="edu"] .btn--secondary:hover,
body[data-page="edtech"] .btn--secondary:hover,
body[data-page="it"] .btn--secondary:hover{border-color:rgba(255,255,255,.3);color:#fff}
@keyframes shimmer2{
  0%{background-position:0% 0%}
  100%{background-position:-200% 0%}
}
@media(prefers-reduced-motion:reduce){
  body[data-page="hrd"] .btn,
  body[data-page="corpuni"] .btn,
  body[data-page="edu"] .btn,
  body[data-page="edtech"] .btn,
  body[data-page="it"] .btn{animation:none}
}

/* Gooey text color picks vertical accent */
.hero-v__gooey .gooey-text__word{color:var(--vertical)}

/* Lift gray card text on vertical pages */
body[data-page="hrd"] .pain-card p,
body[data-page="corpuni"] .pain-card p,
body[data-page="edu"] .pain-card p,
body[data-page="edtech"] .pain-card p,
body[data-page="it"] .pain-card p,
body[data-page="hrd"] .sol-card p,
body[data-page="corpuni"] .sol-card p,
body[data-page="edu"] .sol-card p,
body[data-page="edtech"] .sol-card p,
body[data-page="it"] .sol-card p,
body[data-page="hrd"] .step p,
body[data-page="corpuni"] .step p,
body[data-page="edu"] .step p,
body[data-page="edtech"] .step p,
body[data-page="it"] .step p,
body[data-page="hrd"] .faq__a p,
body[data-page="corpuni"] .faq__a p,
body[data-page="edu"] .faq__a p,
body[data-page="edtech"] .faq__a p,
body[data-page="it"] .faq__a p,
body[data-page="hrd"] .it-block li,
body[data-page="corpuni"] .it-block li,
body[data-page="edu"] .it-block li,
body[data-page="edtech"] .it-block li,
body[data-page="it"] .it-block li,
body[data-page="hrd"] .it-block p,
body[data-page="corpuni"] .it-block p,
body[data-page="edu"] .it-block p,
body[data-page="edtech"] .it-block p,
body[data-page="it"] .it-block p{
  color:rgba(255,255,255,.88) !important;
}

/* ── Pill Navbar ──────────────────────── */
.nav-pill{
  position:fixed;top:20px;left:50%;
  z-index:var(--z-header);
  display:inline-flex;flex-direction:column;align-items:center;
  padding:8px 10px 8px 22px;
  border-radius:999px;border:1px solid var(--border);
  background:rgba(24,24,27,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:border-radius .3s var(--ease),background .3s var(--ease);
  width:auto;max-width:calc(100% - 32px);
  transform:translateX(-50%);
  animation:nav-pill-enter .8s var(--ease) backwards;
  transform-origin:center center;
}
@keyframes nav-pill-enter{
  0%{
    opacity:0;
    transform:translate(-50%,-12px) scaleX(.55);
    filter:blur(8px);
  }
  55%{
    opacity:1;
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:translate(-50%,0) scaleX(1);
    filter:blur(0);
  }
}
@media(prefers-reduced-motion:reduce){
  .nav-pill{animation:none}
}
.nav-pill.open{border-radius:20px;background:rgba(24,24,27,.9)}
.nav-pill__row{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;gap:24px;
}
.nav-pill__logo{
  font-family:var(--font-head);font-weight:700;font-size:1rem;letter-spacing:var(--ls-tight);
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  flex-shrink:0;
}
.nav-pill__links{
  display:flex;align-items:center;gap:22px;
}
.nav-pill__link{
  font-size:.85rem;color:var(--muted);white-space:nowrap;
  transition:color var(--dur) var(--ease);
}
.nav-pill__link:hover{color:var(--light)}

/* Dropdown for "Направления" */
.nav-pill__dropdown{position:relative}
.nav-pill__dropdown-toggle{
  display:inline-flex;align-items:center;gap:4px;font-size:.85rem;color:var(--muted);
  cursor:pointer;
}
.nav-pill__dropdown-toggle:hover{color:var(--light)}
.nav-pill__dropdown-toggle::after{
  content:'';width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);margin-top:-3px;transition:transform .25s var(--ease);
}
.nav-pill__dropdown.open .nav-pill__dropdown-toggle::after{transform:rotate(-135deg);margin-top:2px}
.nav-pill__dropdown-menu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  min-width:200px;padding:8px;
  border:1px solid var(--border);border-radius:14px;
  background:rgba(24,24,27,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  display:none;flex-direction:column;gap:2px;
}
.nav-pill__dropdown.open .nav-pill__dropdown-menu{display:flex}
.nav-pill__dropdown-menu a{
  padding:8px 12px;border-radius:8px;font-size:.88rem;color:var(--muted);
  transition:all var(--dur) var(--ease);
}
.nav-pill__dropdown-menu a:hover{background:rgba(255,255,255,.06);color:var(--light)}

/* Pill buttons (Audit + Call) */
.nav-pill__actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-pill__btn{
  padding:8px 16px;font-size:.82rem;font-weight:500;
  border-radius:999px;transition:all .25s var(--ease);white-space:nowrap;
}
.nav-pill__btn--ghost{
  border:1px solid var(--border);background:rgba(31,31,31,.62);color:var(--muted);
}
.nav-pill__btn--ghost:hover{border-color:rgba(255,255,255,.4);color:var(--light)}
.nav-pill__btn--primary{
  position:relative;background:linear-gradient(135deg,#f4f4f5 0%,#d4d4d8 100%);color:#000;font-weight:600;
}
.nav-pill__btn--primary:hover{background:linear-gradient(135deg,#e4e4e7 0%,#a1a1aa 100%)}
.nav-pill__btn--primary::before{
  content:'';position:absolute;inset:-8px;border-radius:999px;
  background:rgba(244,244,245,.4);filter:blur(14px);z-index:-1;
  opacity:.5;transition:opacity .3s var(--ease),filter .3s var(--ease);
  pointer-events:none;
}
.nav-pill__btn--primary:hover::before{opacity:.7;filter:blur(18px)}

/* Mobile toggle */
.nav-pill__burger{
  display:none;width:32px;height:32px;align-items:center;justify-content:center;
  color:var(--muted);
}
.nav-pill__mobile{
  display:none;flex-direction:column;gap:10px;padding-top:16px;width:100%;
  align-items:stretch;text-align:center;
}
.nav-pill.open .nav-pill__mobile{display:flex}
.nav-pill__mobile a{color:var(--muted);padding:8px 0;font-size:.95rem}
.nav-pill__mobile a:hover{color:var(--light)}
.nav-pill__mobile .nav-pill__btn{width:100%;text-align:center;justify-content:center;display:block}
.nav-pill__mobile-group{display:flex;flex-direction:column;gap:10px;margin-top:8px}

@media(max-width:720px){
  .nav-pill__links,.nav-pill__actions{display:none}
  .nav-pill__burger{display:flex}
}

/* ── Shader Dots Container ────────────── */
.shader-dots{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.shader-dots-canvas{width:100%;height:100%;display:block;opacity:.75}
.hero-v .shader-dots-canvas{opacity:.4}

/* Page-wide fixed shader for vertical pages */
.page-shader{
  position:fixed;top:0;left:0;right:0;bottom:0;inset:0;
  z-index:0;pointer-events:none;overflow:hidden;
}
.page-shader .shader-dots-canvas{opacity:.32}
.shader-dots::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 0%,rgba(9,9,11,.4) 60%,#09090B 100%);
  pointer-events:none;
}
.shader-dots__fallback{
  position:absolute;inset:0;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle at 50% 30%,rgba(124,58,237,.15) 0%,transparent 60%),var(--dark);
}
@media(prefers-reduced-motion:reduce){
  .shader-dots__fallback{opacity:1}
}

/* ── Hero with shader ─────────────────── */
.hero-shader{
  position:relative;min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:120px 24px 80px;text-align:center;overflow:hidden;
  background:var(--dark);
}
.hero-shader__content{position:relative;z-index:1;max-width:720px;width:100%}
.hero-shader h1{
  font-size:clamp(2rem,5vw,3.5rem);letter-spacing:-.04em;line-height:1.08;
  margin-bottom:18px;
}
.hero-shader__sub{
  font-size:clamp(1rem,2vw,1.15rem);color:rgba(255,255,255,.7);
  line-height:1.6;max-width:580px;margin:0 auto 32px;
}

/* ── Gooey Text ───────────────────────── */
.gooey-text{
  position:relative;height:clamp(80px,12vw,140px);
  display:flex;align-items:center;justify-content:center;
  margin:16px 0 24px;
}
.gooey-text__filter{position:absolute;height:0;width:0}
.gooey-text__stage{
  display:flex;align-items:center;justify-content:center;
  filter:url(#gooey-threshold);width:100%;height:100%;
}
/* iOS fallback: SVG <text> path — threshold applied natively on group */
.gooey-text--plain .gooey-text__stage{display:none}
.gooey-text--plain .gooey-text__svg{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block;
}
.gooey-text--plain text.gooey-text__word{
  font-family:var(--font-head);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(2.4rem,7vw,4.5rem);
  fill:var(--light);
}
body[data-page="hrd"]   .gooey-text--plain text.gooey-text__word,
body[data-page="corpuni"] .gooey-text--plain text.gooey-text__word,
body[data-page="edu"]   .gooey-text--plain text.gooey-text__word,
body[data-page="edtech"] .gooey-text--plain text.gooey-text__word,
body[data-page="it"]    .gooey-text--plain text.gooey-text__word{fill:var(--vertical)}
.gooey-text__word{
  position:absolute;display:inline-block;user-select:none;text-align:center;
  font-family:var(--font-head);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(2.4rem,7vw,4.5rem);
  color:var(--light);
}

/* ── New CTA Button (get-started) ─────── */
.btn-get-started{
  position:relative;display:inline-flex;align-items:center;
  padding:14px 28px;border-radius:999px;overflow:hidden;
  background:var(--grad);color:#fff;font-family:var(--font-head);font-weight:600;
  font-size:.95rem;transition:transform .25s var(--ease);
}
.btn-get-started:hover{transform:translateY(-2px)}
.btn-get-started__label{
  margin-right:32px;transition:opacity .5s var(--ease);
}
.btn-get-started:hover .btn-get-started__label{opacity:0}
.btn-get-started__arrow{
  position:absolute;right:4px;top:4px;bottom:4px;
  display:grid;place-items:center;width:26%;border-radius:999px;
  background:rgba(255,255,255,.18);color:#fff;
  transition:width .5s var(--ease);
}
.btn-get-started:hover .btn-get-started__arrow{width:calc(100% - 8px)}
.btn-get-started:active{transform:translateY(0) scale(.98)}

/* ── Footer (new) ─────────────────────── */
.footer-x{
  position:relative;width:100%;max-width:1120px;margin:0 auto;
  padding:64px 24px 48px;
  border-top:1px solid var(--border);border-top-left-radius:32px;border-top-right-radius:32px;
  background:
    radial-gradient(35% 120px at 50% 0%,rgba(255,255,255,.08),transparent),
    rgba(9,9,11,.15);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}
.footer-x::before{
  content:'';position:absolute;top:-1px;left:33%;right:33%;height:1px;
  background:rgba(255,255,255,.2);filter:blur(1px);
}
.footer-x__inner{
  display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px;
}
@media(max-width:900px){.footer-x__inner{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:520px){.footer-x__inner{grid-template-columns:1fr;gap:28px;text-align:left}}

.footer-x__brand-wrap{display:flex;flex-direction:column;gap:12px}
.footer-x__brand{
  font-family:var(--font-head);font-weight:700;font-size:1.1rem;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.footer-x__copy{font-size:.82rem;color:var(--dimmed);line-height:1.6}
.footer-x__col h3{
  font-family:var(--font-head);font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:16px;
}
.footer-x__col ul{display:flex;flex-direction:column;gap:8px}
.footer-x__col a{
  font-size:.88rem;color:var(--dimmed);
  transition:color var(--dur) var(--ease);
}
.footer-x__col a:hover{color:var(--light)}

/* Animated entrance for footer cols (respects reduced motion) */
@media(prefers-reduced-motion:no-preference){
  .footer-x [data-anim]{
    opacity:0;filter:blur(4px);transform:translateY(-8px);
    transition:opacity .8s var(--ease),filter .8s var(--ease),transform .8s var(--ease);
  }
  .footer-x [data-anim].in{opacity:1;filter:blur(0);transform:none}
}

/* ── Splitter on dark shader bg ───────── */
.splitter-shader{
  position:relative;min-height:100vh;
  padding:140px 24px 80px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;background:transparent;z-index:1;
}
.splitter-shader__content{position:relative;z-index:1;width:100%;max-width:1120px;text-align:center}
.splitter-shader__heading{
  position:relative;display:inline-block;padding:8px 24px;margin-bottom:56px;
}
.splitter-shader__heading::before{
  content:'';position:absolute;inset:-120px -200px;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(9,9,11,.95) 0%,rgba(9,9,11,.8) 40%,rgba(9,9,11,.4) 70%,transparent 100%);
  filter:blur(12px);pointer-events:none;
}
.splitter-shader h1{
  font-size:clamp(1.8rem,4.5vw,3rem);letter-spacing:-.04em;
  line-height:1.12;margin-bottom:14px;
  text-shadow:0 2px 20px rgba(0,0,0,.5);
}
.splitter-shader__sub{
  font-size:1.05rem;color:rgba(255,255,255,.8);
  max-width:520px;line-height:1.6;margin:0 auto;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}

/* ── Splitter hint pill ──────────────── */
.splitter-hint{
  display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;
  margin-top:48px;padding:10px 20px;
  font-size:.82rem;color:var(--muted);
  background:rgba(24,24,27,.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--border);border-radius:999px;
}
.splitter-hint a{
  color:var(--light);border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:1px;
  transition:border-color var(--dur) var(--ease);
}
.splitter-hint a:hover{border-bottom-color:var(--light)}

/* ── Splitter cards with warp-like shader bg ── */
.splitter-shader .splitter-card{
  position:relative;overflow:hidden;
  background:#000;
  border:1px solid rgba(255,255,255,.15);
  border-radius:24px;
}
/* All direct children sit above the pseudo-element layers */
.splitter-shader .splitter-card > *{
  position:relative;z-index:2;
}
/* Colorful shader layer fills entire card */
.splitter-shader .splitter-card::before{
  content:'';position:absolute;
  top:0;left:0;right:0;bottom:0;
  width:100%;height:100%;
  z-index:0;opacity:1;
  filter:blur(40px) saturate(140%);
  animation:warp-spin 18s linear infinite;
  transition:filter .4s var(--ease);
  pointer-events:none;
}
/* Dark uniform film so content is readable but color shows through */
.splitter-shader .splitter-card::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:rgba(0,0,0,.78);
  pointer-events:none;
}
.splitter-shader .splitter-card:hover{border-color:rgba(255,255,255,.3)}
.splitter-shader .splitter-card:hover::before{filter:blur(30px) saturate(160%);animation-duration:10s}

/* Per-card palettes (order matches HTML: hrd, corpuni, edu, edtech) */
.splitter-shader .splitter-card:nth-child(1)::before{
  background:conic-gradient(from 0deg,hsl(280,100%,30%),hsl(320,100%,60%),hsl(340,90%,40%),hsl(300,100%,70%),hsl(280,100%,30%));
}
.splitter-shader .splitter-card:nth-child(2)::before{
  background:conic-gradient(from 40deg,hsl(200,100%,25%),hsl(180,100%,65%),hsl(160,90%,35%),hsl(190,100%,75%),hsl(200,100%,25%));
}
.splitter-shader .splitter-card:nth-child(3)::before{
  background:conic-gradient(from 80deg,hsl(120,100%,25%),hsl(160,100%,55%),hsl(170,90%,35%),hsl(140,100%,65%),hsl(120,100%,25%));
}
.splitter-shader .splitter-card:nth-child(4)::before{
  background:conic-gradient(from 120deg,hsl(30,100%,35%),hsl(50,100%,65%),hsl(40,90%,40%),hsl(20,100%,60%),hsl(30,100%,35%));
}

@keyframes warp-spin{
  from{transform:rotate(0deg) scale(1.5)}
  50%{transform:rotate(180deg) scale(1.7)}
  to{transform:rotate(360deg) scale(1.5)}
}
@media(prefers-reduced-motion:reduce){
  .splitter-shader .splitter-card::before{animation:none}
}

/* Card content contrast */
.splitter-shader .splitter-card h2,
.splitter-shader .splitter-card .splitter-card__role,
.splitter-shader .splitter-card .splitter-card__arrow{color:#fff}
.splitter-shader .splitter-card .splitter-card__pain{
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);
  color:#e4e4e7;
}
.splitter-shader .splitter-card__icon{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);
}
.splitter-shader .splitter-card__icon svg{stroke:#fff}