/* ============ RIVET — AWARD-GRADE POLISH LAYER ============ */

/* ============ RIVET — AWARD-GRADE POLISH LAYER ============ */

/* ---- Counter pop ---- */
.counting { font-variant-numeric:tabular-nums; }

/* ---- Brand art illustrations (animated) ---- */
.artfloat { display:block; width:100%; max-width:300px; height:auto; margin-inline:auto;
  filter:drop-shadow(0 18px 40px rgba(255,0,212,0.22)); animation:artfloat 6s ease-in-out infinite; }
@keyframes artfloat { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
.artwrap { position:relative; display:grid; place-items:center; padding:clamp(16px,3vw,40px); }
.artwrap::before { content:""; position:absolute; width:62%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, color-mix(in oklab,var(--ac,var(--magenta)) 26%, transparent), transparent 70%); filter:blur(20px); z-index:0; }
.artwrap .artfloat { position:relative; z-index:1; }
.phero__grid > .crumb { grid-column:1 / -1; }
.phero__grid .phero__copy { max-width:none; }
.art-strip { width:100%; max-width:760px; height:auto; margin:clamp(12px,2vw,24px) auto 0; display:block; }
@media (prefers-reduced-motion: reduce){ .artfloat { animation:none; } }

/* ---- OS explorer: scroll-assembly of the 8 model tiles ---- */
.osx__tab { opacity:1; }
html.js .osx.assemble .osx__tab { opacity:0; transform:translateY(26px) scale(.9); }
html.js .osx.assemble.in .osx__tab { opacity:1; transform:none; transition:opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1); }
html.js .osx.assemble.in .osx__tab:nth-child(1){transition-delay:.00s}
html.js .osx.assemble.in .osx__tab:nth-child(2){transition-delay:.06s}
html.js .osx.assemble.in .osx__tab:nth-child(3){transition-delay:.12s}
html.js .osx.assemble.in .osx__tab:nth-child(4){transition-delay:.20s}
html.js .osx.assemble.in .osx__tab:nth-child(5){transition-delay:.26s}
html.js .osx.assemble.in .osx__tab:nth-child(6){transition-delay:.32s}
html.js .osx.assemble.in .osx__tab:nth-child(7){transition-delay:.38s}
html.js .osx.assemble.in .osx__tab:nth-child(8){transition-delay:.44s}
html.js .osx.assemble .osx__panel { opacity:0; transition:opacity .5s ease .5s; }
html.js .osx.assemble.in .osx__panel { opacity:1; }
@media (prefers-reduced-motion: reduce){ html.js .osx.assemble .osx__tab, html.js .osx.assemble .osx__panel { opacity:1 !important; transform:none !important; } }

/* ---- Hero ---- */
.hero > .wrap { position:relative; z-index:1; }

/* ---- Layered OS stack (home "everything connects") ---- */
.oslayers { display:grid; grid-template-columns:0.95fr 1.05fr; gap:clamp(28px,4vw,64px); align-items:center; }
.oslayers__copy { display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.oslayers__copy .formula { margin-top:4px; }
.oslayers__stack { position:relative; perspective:1400px; padding:10px 0; }
.oslayers__deck { position:relative; transform-style:preserve-3d; transform:rotateX(52deg) rotateZ(-42deg); margin:0 auto; width:min(86%,360px); }
.oslayer { position:relative; height:62px; border-radius:14px; margin-bottom:-20px;
  background:linear-gradient(150deg, color-mix(in oklab,var(--lc,var(--violet)) 30%, #1a0838), #12032b);
  border:1px solid color-mix(in oklab,var(--lc,var(--violet)) 45%, transparent);
  box-shadow:0 22px 30px -18px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.14);
  display:flex; align-items:center; gap:13px; padding:0 18px; color:#fff;
  transform:translateZ(var(--lz,0)); transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }
html.js .oslayers:not(.in) .oslayer { opacity:0; transform:translateZ(var(--lz,0)) translateY(40px); }
.oslayer__ico { width:30px; height:30px; flex:none; border-radius:8px; display:grid; place-items:center; color:var(--lc,var(--cyan));
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); }
.oslayer__ico svg { width:17px; height:17px; }
.oslayer b { font-size:0.92rem; font-weight:600; }
.oslayer small { display:block; font-size:0.68rem; color:rgba(255,255,255,0.6); font-family:var(--font-mono); letter-spacing:0.02em; }
.oslayer--kernel { height:74px; margin-top:14px; border-radius:16px;
  background:linear-gradient(150deg, rgba(255,0,212,0.32), #1c0540);
  border-color:rgba(255,0,212,0.5); box-shadow:0 28px 40px -18px rgba(255,0,212,0.45), inset 0 1px 0 rgba(255,255,255,0.2); }
.oslayer--kernel b { font-size:1rem; }
.oslayers__deck:hover .oslayer { transform:translateZ(var(--lz,0)) translateY(-2px); }
@media (max-width:820px){ .oslayers{ grid-template-columns:1fr; } .oslayers__deck{ transform:rotateX(46deg) rotateZ(-38deg); width:min(78%,320px); margin-top:20px; } }
@media (prefers-reduced-motion: reduce){ html.js .oslayers:not(.in) .oslayer { opacity:1; transform:translateZ(var(--lz,0)); } }

@media (prefers-reduced-motion: reduce) {
}

/* ============ LIQUID-GLASS ENHANCEMENT (buttons + menu) ============ */
/* Buttons: specular top-edge highlight + soft inner glow, sheen sweep on hover */
.btn { position:relative; overflow:hidden; isolation:isolate;
  box-shadow:0 1px 1px rgba(15,0,37,0.04), inset 0 1px 0 rgba(255,255,255,0.35); }
.btn::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0) 42%); opacity:.9; }
/* sheen sweep */
.btn::after { content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%; z-index:1; pointer-events:none;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,0.45), transparent);
  transform:skewX(-18deg); opacity:0; transition:none; }
.btn:hover::after { animation:btnSheen .7s ease; }
@keyframes btnSheen { 0%{ left:-60%; opacity:0 } 18%{ opacity:.8 } 100%{ left:130%; opacity:0 } }
/* dark/colored buttons: brighter top highlight + deeper inner light */
.btn--primary, .btn--magenta { box-shadow:0 8px 22px -12px rgba(15,0,37,0.5), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px -12px rgba(0,0,0,0.4); }
.btn--primary::before, .btn--magenta::before { background:linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0) 48%); }
.btn--magenta:hover { box-shadow:0 14px 30px -10px rgba(255,0,212,0.55), inset 0 1px 0 rgba(255,255,255,0.4); }
.btn--primary:hover { box-shadow:0 14px 30px -10px rgba(15,0,37,0.55), inset 0 1px 0 rgba(255,255,255,0.34); }
/* ghost buttons: true frosted glass */
.btn--ghost { background:rgba(255,255,255,0.55); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-color:rgba(15,0,37,0.16); box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 14px -10px rgba(15,0,37,0.3); }
.btn--ghost:hover { background:rgba(255,255,255,0.78); border-color:rgba(15,0,37,0.32); }
/* ghost on dark/ink surfaces (finale, ctaband) */
.finale .btn--ghost, .ctaband .btn--ghost, .roi__out .btn--ghost {
  background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.22), 0 4px 16px -10px rgba(0,0,0,0.5); }
.finale .btn--ghost:hover, .ctaband .btn--ghost:hover { background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.5); }

/* Header bar: layered glass — brighter rim light + saturated frost */
.site-header__inner {
  background:linear-gradient(110deg, color-mix(in oklab,var(--cyan-bright) 7%,#fff) 0%, rgba(255,255,255,0.84) 45%, color-mix(in oklab,var(--magenta) 6%,#fff) 100%) !important;
  border-color:rgba(255,255,255,0.6) !important;
  box-shadow:0 1px 2px rgba(15,0,37,0.05), inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(15,0,37,0.05) !important; }
.site-header.is-scrolled .site-header__inner {
  box-shadow:0 10px 34px -16px rgba(15,0,37,0.28), inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(15,0,37,0.06) !important; }

/* Mega panel: frosted glass card with gradient rim + top sheen */
.mega__card {
  background:linear-gradient(155deg, color-mix(in oklab,var(--cyan-bright) 6%,#fff) 0%, #fff 38%, color-mix(in oklab,var(--violet) 4%,#fff) 78%, color-mix(in oklab,var(--magenta) 5%,#fff) 100%) !important;
  backdrop-filter:blur(26px) saturate(180%); -webkit-backdrop-filter:blur(26px) saturate(180%);
  border:1px solid transparent !important;
  background-clip:padding-box;
  box-shadow:0 34px 70px -30px rgba(15,0,37,0.45), 0 2px 8px rgba(15,0,37,0.05),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
  position:relative; }
.mega__card::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(140deg, rgba(76,243,254,0.5), rgba(59,6,212,0.18) 40%, rgba(255,0,212,0.42));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; }
.mega__ico { box-shadow:inset 0 1px 0 rgba(255,255,255,0.8); }

/* (split into separate Academy + Membership megas — both short, no flatten needed) */

/* Academy mega — three persona columns (Revenue team ICs · Managers · Architects) */
.mega__card--academy { grid-template-columns:2.55fr 0.95fr !important; }
.mega__cols--3 { grid-template-columns:1fr 1fr 1fr; }
.mega__cols--3 .mega__link { padding:8px 11px; }
.mega__cols--3 .mega__link small { font-size:0.78rem; }

/* Mobile nav panel: same frosted rim */
.mobile-nav { background:linear-gradient(155deg, color-mix(in oklab,var(--cyan-bright) 6%,#fff), #fff 42%, color-mix(in oklab,var(--magenta) 5%,#fff)) !important; backdrop-filter:blur(22px) saturate(170%); -webkit-backdrop-filter:blur(22px) saturate(170%); }

/* Currency / country glass menus: add rim sheen */
.ccy__menu, .fccy__menu { box-shadow:0 30px 60px -24px rgba(15,0,37,0.4), inset 0 1px 0 rgba(255,255,255,0.7); }