@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300..700&family=IBM+Plex+Sans+Arabic:wght@400;600&family=Open+Sans:wght@400;600&display=swap");

/* VCL AI Adoption: component styles, prefix va-. Glass scenes, frosted panels, the VCL point. */
html, body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { padding: 24px; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.va-muted { color: var(--ink-2); }

/* Lockup: official VCL wordmark, hairline, AI Adoption */
.va-lockup { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-display); color: var(--ink); line-height: 1; white-space: nowrap; }
.va-lockup__logo { height: 26px; width: auto; display: block; }
.va-lockup i { width: 1px; height: 22px; background: var(--rule-strong); }
.va-lockup span { font-weight: 500; font-size: 19px; letter-spacing: -.01em; }
.va-lockup--on-dark { color: var(--bone); }
.va-lockup--on-dark i { background: rgba(242, 240, 235, .45); }
.va-lockup-stack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.va-tagline { display: inline-flex; align-items: center; font: 500 13px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: inherit; white-space: nowrap; }
.va-tagline i { width: 7px; height: 7px; border-radius: 999px; background: var(--vcl-red); margin: 0 10px; flex: none; }

/* Buttons: pill with a round arrow dot, as in the reference */
.va-btn { display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 8px 0 22px; border: 0; border-radius: 10px; cursor: pointer; text-decoration: none;
  font: 500 15px/1 var(--font-display); letter-spacing: -.005em; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.va-btn__dot { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; transition: transform 380ms var(--ease-out); }
.va-btn__dot svg { width: 14px; height: 14px; }
.va-btn:hover .va-btn__dot { transform: translateX(3px); }
.va-btn:active { transform: scale(.98); }
.va-btn--primary { background: var(--action); color: var(--on-action); }
.va-btn--primary .va-btn__dot { background: var(--on-action); color: var(--action); }
.va-btn--primary:hover { background: var(--action-hover); }
.va-btn--carbon { background: var(--carbon); color: var(--bone); }
.va-btn--carbon .va-btn__dot { background: var(--bone); color: var(--carbon); }
.va-btn--carbon:hover { background: #000000; }
.va-btn--light { background: var(--bone); color: var(--carbon); }
.va-btn--light .va-btn__dot { background: var(--carbon); color: var(--bone); }
.va-btn--light:hover { background: #ffffff; }
.va-btn--red { background: var(--vcl-red); color: #ffffff; }
.va-btn--red .va-btn__dot { background: #ffffff; color: var(--vcl-red); }
.va-link { position: relative; display: inline-flex; align-items: center; height: 48px; font: 500 15px/1 var(--font-display); color: var(--ink); text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; }
.va-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 13px; height: 1px; background: currentColor; transform-origin: left; transition: transform 420ms var(--ease-out); }
.va-link:hover::after { transform: scaleX(.35); }
.va-link--light { color: var(--bone); }

/* KSB marks */
.va-mark { display: inline-block; flex: none; color: inherit; vertical-align: middle; overflow: visible; }
.va-mark__core { fill: var(--vcl-red); }
.va-ksb { display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1.2 var(--font-display); color: inherit; }
.va-ksb em { font-style: normal; font-weight: 400; opacity: .7; }

/* Competence */
.va-comp__cols { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid currentColor; }
.va-comp__cols > div { padding: 40px 40px 40px 0; }
.va-comp__cols > div + div { padding-left: 40px; border-left: 1px solid var(--rule); }
.va-comp__cols h3 { font: 500 44px/1.05 var(--font-display); letter-spacing: -.035em; margin: 28px 0 8px; }
.va-comp__cols .verb { font: 400 15px/24px var(--font-display); opacity: .7; }
.va-comp__cols p { font: 400 18px/28px var(--font-display); margin: 18px 0 0; max-width: 300px; }
.va-comp__sum { display: flex; align-items: center; gap: 20px; padding: 20px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font: 400 16px/26px var(--font-display); opacity: .9; }

/* Engagement orbit */
.va-orbit { position: relative; width: 560px; max-width: 100%; aspect-ratio: 1; color: inherit; margin: 40px; }
.va-orbit__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.va-orbit .track { fill: none; stroke: var(--rule); stroke-width: 1; }
.va-orbit .seg { fill: none; stroke: currentColor; stroke-opacity: .35; stroke-width: 3; stroke-linecap: round; cursor: pointer; transition: stroke-opacity 400ms, stroke-width 400ms; }
.va-orbit .seg.on { stroke-opacity: 1; stroke-width: 5; }
.va-orbit .name { font: 500 20px/1 var(--font-display); letter-spacing: -.02em; fill: currentColor; opacity: .55; cursor: pointer; transition: opacity 400ms; }
.va-orbit .name.on { opacity: 1; }
.va-orbit .sub { color: inherit; }
.va-orbit .subl { font: 400 12px/1 var(--font-display); fill: currentColor; opacity: .7; }
.va-orbit .pt { fill: var(--vcl-red); }
.va-orbit__centre { position: absolute; left: 50%; top: 50%; width: 270px; transform: translate(-50%, -46%); text-align: center; opacity: 0; transition: opacity 400ms var(--ease-out); }
.va-orbit__centre.in { opacity: 1; }
.va-orbit__centre .time { font: 400 13px/20px var(--font-display); opacity: .7; }
.va-orbit__centre h3 { font: 500 40px/1.05 var(--font-display); letter-spacing: -.035em; margin: 4px 0 10px; }
.va-orbit__centre .text { font: 400 14px/22px var(--font-display); opacity: .85; margin: 0 0 12px; }
.va-orbit__centre .get { font: 400 13px/20px var(--font-display); margin: 0; padding-top: 10px; border-top: 1px solid var(--rule); }
.va-orbit__centre .get b { font-weight: 600; }

/* Fluencies: two circles */
.va-flu__venn svg { width: 100%; height: auto; display: block; overflow: visible; }
.va-flu .c { fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 1200ms var(--ease-out), stroke-opacity 400ms; }
.va-flu .c1 { transform: translateX(-60px); } .va-flu .c2 { transform: translateX(60px); }
.va-flu.is-in .c1, .va-flu.is-in .c2 { transform: none; }
.va-flu .lens { fill: var(--vcl-red); opacity: 0; transition: opacity 800ms 900ms; }
.va-flu.is-in .lens { opacity: 1; }
.va-flu .t { font: 500 22px/1 var(--font-display); letter-spacing: -.02em; fill: currentColor; }
.va-flu .s { font: 400 14px/1 var(--font-display); fill: currentColor; opacity: .7; }
.va-flu .k { font: 500 13px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; fill: currentColor; opacity: .75; }
.va-flu .m { font: 600 22px/1 var(--font-display); fill: #ffffff; opacity: 0; transition: opacity 600ms 1300ms; }
.va-flu.is-in .m { opacity: 1; }
.va-flu__venn[data-hl="0"] .c2, .va-flu__venn[data-hl="1"] .c1 { stroke-opacity: .25; }
.va-flu__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 32px; }
.va-flu__cols h3 { font: 500 26px/1.1 var(--font-display); letter-spacing: -.02em; margin: 0 0 10px; }
.va-flu__cols .lead { font: 400 16px/26px var(--font-display); opacity: .85; margin: 0 0 14px; }
.va-flu__cols ul { list-style: none; margin: 0; padding: 0; }
.va-flu__cols li { font: 400 15px/22px var(--font-display); padding: 10px 0; border-top: 1px solid var(--rule); }
.va-flu__meet { margin: 28px 0 0; padding: 18px 0; border-top: 1px solid var(--rule); font: 400 15px/24px var(--font-display); opacity: .9; }
.va-flu__meet b { font-weight: 600; }

/* Tier list */
.va-tiers { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid currentColor; }
.va-tiers > div { padding: 28px 32px 0 0; }
.va-tiers > div + div { padding-left: 32px; border-left: 1px solid var(--rule); }
.va-tiers h3 { font: 500 34px/1.1 var(--font-display); letter-spacing: -.025em; margin: 0 0 14px; }
.va-tiers p { font: 400 16px/26px var(--font-display); opacity: .8; margin: 0; max-width: 300px; }
.va-tiers .who { display: block; font: 400 13px/20px var(--font-display); opacity: .7; margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--rule); }

/* Type motion */
.va-fade { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-fade) var(--ease-out), transform var(--dur-fade) var(--ease-out); }
.va-fade.is-in { opacity: 1; transform: none; }
.va-lines .va-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.va-lines .va-line > span { display: block; transform: translateY(104%); transition: transform 1100ms var(--ease-out); }
.va-lines.is-in .va-line > span { transform: none; }

/* Glass scenes */
.va-glass { position: relative; overflow: hidden; background: linear-gradient(160deg, #ff8a66 0%, #e0412f 22%, #ce2823 42%, #7a1216 70%, #2a0a0c 100%); }
.va-glass > canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; opacity: 0; transition: opacity 700ms var(--ease-out); }
.va-glass.is-ready > canvas { opacity: 1; } /* the gradient paints first; the canvas fades in on its first frame */
.va-glass.is-frozen { background-size: cover; background-position: center; } /* a still kept as an image, no WebGL context */
.va-panel { position: relative; background: var(--glass-fill); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--glass-edge); border-radius: 10px; color: var(--bone); }
.va-panel--solid { background: #1b1c1f; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: rgba(255, 255, 255, .08); }
.va-on-scene { color: var(--bone); }

/* Adoption story (3D Venn) */
.va-story { position: relative; }
.va-story__stage { position: relative; height: 100%; min-height: 560px; overflow: hidden; background: #141517; color: var(--bone); }
.va-story--scroll .va-story__stage { position: sticky; top: 0; height: 100vh; }
.va-story__labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.va-story__lbl { position: absolute; transform: translate(-50%, -50%); text-align: center; opacity: 0; white-space: nowrap; }
.va-story__lbl b { display: block; font: 500 26px/1.1 var(--font-display); letter-spacing: -.02em; }
.va-story__lbl span { font: 400 14px/22px var(--font-display); opacity: .7; }
.va-story__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; text-align: center; }
.va-story__core b { display: block; margin-top: 96px; font: 500 26px/1 var(--font-display); letter-spacing: -.025em; text-shadow: 0 2px 14px rgba(0,0,0,.65); }
.va-story__head { position: absolute; left: 64px; top: 56px; max-width: 560px; }
.va-story__head h2 { margin: 0; font: 500 52px/1.02 var(--font-display); letter-spacing: -.04em; }
.va-story__head p { margin: 16px 0 0; font: 400 17px/27px var(--font-display); opacity: .75; }
.va-story__bar { position: absolute; left: 64px; right: 64px; bottom: 24px; height: 1px; background: rgba(242, 240, 235, .18); }
.va-story__bar i { display: block; height: 100%; background: var(--bone); transform-origin: left; transform: scaleX(0); }

@media (prefers-reduced-motion: reduce) {
  .va-lines .va-line > span, .va-fade { transform: none; transition: none; opacity: 1; }
  .va-flu .c, .va-flu .lens, .va-flu .m { transition: none; }
  .va-glass > canvas { transition: none; }
}