/* ==========================================================================
   f/cx.ai — the three areas: CX Strategy, Design Studio, Innovation Lab.
   Area pages (strategy.html, design-studio.html, innovation-lab.html) and the
   home "Three areas" section. Accent comes from .a-violet / .a-blue / .a-cyan
   (--ac, --ac-2, --ac-a, --ac-b) defined in fcx.css.
   ========================================================================== */

/* ---------- hero ---------- */
.ar-hero{padding:calc(var(--nav-h) + 26px) 0 56px;position:relative}
.ar-hero::before{content:"";position:absolute;inset:0 0 auto 0;height:620px;pointer-events:none;
  background:radial-gradient(60% 70% at 78% 30%,var(--ac-a),transparent 70%)}
.ar-hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:46px;align-items:center}
.ar-hero h1{margin:18px 0 18px;font-size:clamp(34px,4.6vw,58px);font-weight:700;letter-spacing:-.035em;line-height:1.06}
.ar-hero .lead{margin-bottom:28px}
.ar-art{margin:0;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.025);
  padding:10px;box-shadow:0 30px 80px -40px var(--ac-b)}
.ar-art svg{display:block;width:100%;height:auto}

.ar-switch{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.ar-switch a{display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 8px;border-radius:999px;
  border:1px solid var(--line);font-size:12.5px;color:var(--muted);text-decoration:none;
  transition:border-color .25s,color .25s,background .25s}
.ar-switch a i{font-style:normal;font:600 10.5px 'JetBrains Mono',monospace;color:var(--ac-2);
  background:var(--ac-a);border-radius:999px;padding:3px 7px}
.ar-switch a:hover{color:var(--text);border-color:var(--ac-b)}
.ar-switch a.on{color:var(--text);border-color:var(--ac);background:var(--ac-a)}

.ar-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:34px}
.ar-facts div{padding:14px 14px 12px;border:1px solid var(--line);border-radius:14px;background:var(--panel);
  position:relative;overflow:hidden}
.ar-facts div::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--ac);
  transform:scaleX(0);transform-origin:0 50%;animation:arGrow .9s .3s cubic-bezier(.2,.8,.2,1) forwards}
.ar-facts b{display:block;font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--ac-2)}
.ar-facts span{display:block;margin-top:6px;font-size:11.5px;color:var(--muted);line-height:1.35}
@keyframes arGrow{to{transform:scaleX(1)}}

/* ---------- hero art: strategy ---------- */
.as-cap,.ad-cap,.al-cap{fill:var(--dim);font:600 9.5px 'JetBrains Mono',monospace;letter-spacing:.16em;text-anchor:middle}
.as-sig rect{fill:rgba(255,255,255,.04);stroke:rgba(154,127,245,.45)}
.as-sig text{fill:#c9cce0;font-size:10.5px;text-anchor:middle}
.as-sig{opacity:0;animation:arIn .6s var(--d) ease forwards}
.as-flow{fill:none;stroke:rgba(154,127,245,.35);stroke-width:1.2;stroke-dasharray:4 5;animation:arDash 1.6s linear infinite}
.as-pk{fill:#c4b5fd}
.as-core{fill:#7b5cf0;stroke:#c4b5fd;stroke-width:2}
.as-halo{transform-box:fill-box;transform-origin:center;animation:arBreathe 3.4s ease-in-out infinite}
.as-link{stroke:#9a7ff5;stroke-width:2;fill:none}
.as-bar{fill:#7b5cf0;opacity:.85;transform-box:fill-box;transform-origin:0 50%;
  transform:scaleX(0);animation:arBar .8s var(--d) cubic-bezier(.2,.8,.2,1) forwards}
.as-rk{fill:var(--dim);font:600 10px 'JetBrains Mono',monospace;text-anchor:end}
.as-bl{fill:#c9cce0;font-size:10.5px}
.as-doc rect{fill:rgba(123,92,240,.12);stroke:#9a7ff5}
.as-doc{opacity:0;animation:arIn .7s 1.7s ease forwards}
.as-dt{fill:#e9e5ff;font:600 9.5px 'JetBrains Mono',monospace;letter-spacing:.12em;text-anchor:middle}
.as-sign{fill:none;stroke:#c4b5fd;stroke-width:1.8;stroke-dasharray:140;stroke-dashoffset:140;animation:arDraw 1.4s 2.2s ease forwards}
.as-seal{fill:#7b5cf0}
.as-tick{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:24;stroke-dashoffset:24;animation:arDraw .5s 3.3s ease forwards}

/* ---------- hero art: studio ---------- */
.ad-note{opacity:0;transform-box:fill-box;transform-origin:center;animation:arPop .5s var(--d) cubic-bezier(.3,1.4,.5,1) forwards;fill-opacity:.85}
.ad-flow{fill:none;stroke:rgba(95,171,238,.6);stroke-width:2;stroke-dasharray:4 5;animation:arDash 1.4s linear infinite}
.ad-frame{fill:rgba(255,255,255,.03);stroke:rgba(95,171,238,.55)}
.ad-wf{fill:none;stroke:rgba(255,255,255,.35);stroke-dasharray:4 4;animation:adFill 7s ease-in-out infinite}
.ad-wf.w2{animation-delay:.3s}.ad-wf.w3{animation-delay:.5s}.ad-wf.w4{animation-delay:.6s}
.ad-wf.w5{animation-delay:.8s}.ad-wf.w6{animation-delay:.9s}.ad-wf.w7{animation-delay:1.1s}
@keyframes adFill{0%,12%{fill:rgba(255,255,255,0);stroke:rgba(255,255,255,.35);stroke-dasharray:4 4}
  35%,82%{fill:rgba(43,139,230,.32);stroke:#5fabee;stroke-dasharray:0}
  100%{fill:rgba(255,255,255,0);stroke:rgba(255,255,255,.35);stroke-dasharray:4 4}}
.ad-btn{fill:#e8f2fd;font-size:10.5px;font-weight:600;text-anchor:middle;opacity:0;animation:adTxt 7s 1.1s ease-in-out infinite}
@keyframes adTxt{0%,30%{opacity:0}40%,82%{opacity:1}100%{opacity:0}}
.ad-cursor path{fill:#fff;stroke:#06060b;stroke-width:1}
.ad-cursor{animation:adCur 7s ease-in-out infinite}
@keyframes adCur{0%{transform:translate(330px,320px)}30%{transform:translate(262px,206px)}
  45%{transform:translate(250px,292px)}50%{transform:translate(250px,296px)}70%{transform:translate(300px,140px)}100%{transform:translate(330px,320px)}}
.ad-test rect:first-child,.ad-spec rect:first-child{fill:rgba(255,255,255,.035);stroke:rgba(95,171,238,.4)}
.ad-tl{fill:#c9cce0;font-size:10px}
.ad-tr{fill:rgba(255,255,255,.08)}
.ad-tf{fill:#34d399;transform-box:fill-box;transform-origin:0 50%;animation:adBar 7s ease-in-out infinite}
.ad-tf.f2{fill:#5fabee;animation-delay:.3s}
@keyframes adBar{0%,40%{transform:scaleX(0)}60%,90%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.ad-chip{fill:rgba(43,139,230,.25);stroke:#5fabee;opacity:0;animation:adChip 7s ease-in-out infinite}
.ad-chip.c2{animation-delay:.15s}.ad-chip.c3{animation-delay:.3s}.ad-chip.c4{animation-delay:.45s}
@keyframes adChip{0%,55%{opacity:0}65%,92%{opacity:1}100%{opacity:0}}
.ad-sw.s1{fill:#7b5cf0}.ad-sw.s2{fill:#2b8be6}.ad-sw.s3{fill:#22d3ee}.ad-sw.s4{fill:#eceef6}
.ad-foot{fill:var(--dim);font:600 9.5px 'JetBrains Mono',monospace;letter-spacing:.14em;text-anchor:middle}

/* ---------- hero art: lab ---------- */
.al-lane{fill:rgba(255,255,255,.02);stroke:rgba(103,226,244,.25);stroke-dasharray:3 6}
.al-gate{stroke:rgba(103,226,244,.45);stroke-width:1.4;stroke-dasharray:2 5}
.al-gq{fill:#06060b;stroke:#67e2f4}
.al-gt{fill:#a5f3fc;font:600 9.5px 'JetBrains Mono',monospace;letter-spacing:.14em;text-anchor:middle}
.al-cap.r{text-anchor:middle}
.al-scale rect{fill:rgba(34,211,238,.14);stroke:#22d3ee}
.al-st{fill:#e6fbff;font:700 12px 'JetBrains Mono',monospace;letter-spacing:.14em;text-anchor:middle}
.al-ss{fill:#8be9f6;font-size:10px;text-anchor:middle}
.al-scale{animation:alGlow 5s ease-in-out infinite}
@keyframes alGlow{0%,80%{filter:none}88%{filter:drop-shadow(0 0 10px rgba(34,211,238,.8))}100%{filter:none}}
.al-dot{fill:#22d3ee;opacity:0;animation-duration:5s;animation-iteration-count:infinite;animation-delay:var(--d);animation-timing-function:ease-in-out}
.al-dot.s150{animation-name:alS1;fill:#67e2f4}
.al-dot.s260{animation-name:alS2;fill:#67e2f4}
.al-dot.s370{animation-name:alS3;fill:#67e2f4}
.al-dot.go{animation-name:alGo;fill:#a5f3fc}
@keyframes alS1{0%{opacity:0;transform:translate(0,0)}8%{opacity:1}40%{opacity:1;transform:translate(100px,0)}
  60%{opacity:0;transform:translate(104px,40px)}100%{opacity:0;transform:translate(104px,40px)}}
@keyframes alS2{0%{opacity:0;transform:translate(0,0)}8%{opacity:1}55%{opacity:1;transform:translate(210px,0)}
  72%{opacity:0;transform:translate(214px,40px)}100%{opacity:0;transform:translate(214px,40px)}}
@keyframes alS3{0%{opacity:0;transform:translate(0,0)}8%{opacity:1}65%{opacity:1;transform:translate(320px,0)}
  82%{opacity:0;transform:translate(324px,40px)}100%{opacity:0;transform:translate(324px,40px)}}
@keyframes alGo{0%{opacity:0;transform:translate(0,0)}8%{opacity:1}80%{opacity:1;transform:translate(422px,var(--dy))}
  92%{opacity:0;transform:translate(422px,var(--dy))}100%{opacity:0}}

/* shared keyframes */
@keyframes arIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes arPop{from{opacity:0;transform:scale(.4) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes arDash{to{stroke-dashoffset:-18}}
@keyframes arDraw{to{stroke-dashoffset:0}}
@keyframes arBar{to{transform:scaleX(1)}}
@keyframes arBreathe{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.35);opacity:.35}}

/* ---------- settles ---------- */
.ar-settle{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)}
.ar-settle-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:46px;align-items:start}
.ar-kick{font-size:clamp(19px,2vw,24px);font-weight:300;line-height:1.45;margin:0 0 24px;color:var(--text)}
.ar-hand{display:grid;gap:12px}
.ar-hand div{padding:12px 16px;border-left:2px solid var(--ac);background:var(--ac-a);border-radius:0 12px 12px 0}
.ar-hand span{display:block;font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ac-2)}
.ar-hand p{margin:4px 0 0;font-size:14px;color:var(--muted);font-weight:300}
.ar-qs{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ar-qs li{display:flex;gap:16px;align-items:center;padding:18px 20px;border:1px solid var(--line);border-radius:16px;
  background:var(--panel);transition-delay:var(--d)}
.ar-qs i{font:600 12px 'JetBrains Mono',monospace;color:var(--ac-2);flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--ac-b)}
.ar-qs span{font-size:17px;line-height:1.4}

/* ---------- tabs (shared) ---------- */
[data-ar-p]{display:none}
[data-ar-p].on{display:block;animation:arIn .45s ease}

/* ---------- mechanism ---------- */
.ar-mstage{border:1px solid var(--line);border-radius:22px;background:var(--panel);padding:22px;overflow:hidden}
.ar-rail{position:relative;display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.ar-railfill{position:absolute;left:0;bottom:-11px;height:2px;width:0;background:var(--ac);transition:width .5s ease}
.ar-step{flex:1 1 0;min-width:120px;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;
  border:1px solid var(--line);background:transparent;color:var(--muted);font:inherit;cursor:pointer;text-align:left;
  transition:all .25s}
.ar-step i{font:600 11px 'JetBrains Mono',monospace;font-style:normal;color:var(--ac-2)}
.ar-step b{font-weight:600;font-size:15px}
.ar-step:hover{color:var(--text);border-color:var(--ac-b)}
.ar-step.on{color:var(--text);border-color:var(--ac);background:var(--ac-a);box-shadow:0 10px 30px -18px var(--ac)}
.ar-gate{align-self:center;flex:0 0 auto;font:600 9.5px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ac-2);padding:5px 8px;border:1px dashed var(--ac-b);border-radius:8px;max-width:96px;text-align:center;line-height:1.3}
.ar-mpanel{padding:6px 4px 2px}
.ar-mq{font-size:clamp(20px,2.2vw,27px);font-weight:300;margin:0 0 12px;letter-spacing:-.01em}
.ar-mb{margin:0 0 16px;color:var(--muted);font-weight:300;max-width:70ch;line-height:1.65}
.ar-ml,.ar-gatep{margin:0 0 16px;font-size:14px}
.ar-ml span,.ar-gatep b,.ar-sols>span{display:inline-block;margin-right:10px;font:600 10.5px 'JetBrains Mono',monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ac-2)}
.ar-gatep{padding:10px 14px;border:1px dashed var(--ac-b);border-radius:12px;color:var(--muted)}
.ar-sols{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ar-sol{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;border:1px solid var(--ac-b);
  background:transparent;color:var(--text);font:inherit;font-size:13px;cursor:pointer;transition:background .2s}
.ar-sol i{font:600 10px 'JetBrains Mono',monospace;font-style:normal;color:var(--ac-2)}
.ar-sol:hover{background:var(--ac-a)}

/* ---------- offerings console ---------- */
.ar-console{display:grid;grid-template-columns:minmax(260px,.82fr) minmax(0,1.6fr);gap:20px;align-items:start}
.ar-list{display:grid;gap:8px;position:sticky;top:calc(var(--nav-h) + 16px)}
.ar-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);
  background:var(--panel);color:var(--muted);font:inherit;text-align:left;cursor:pointer;transition:all .22s}
.ar-row i{font:600 11px 'JetBrains Mono',monospace;font-style:normal;color:var(--ac-2);flex:0 0 auto}
.ar-row span{flex:1;min-width:0}
.ar-row b{display:block;font-size:14px;font-weight:600;color:var(--text);line-height:1.3}
.ar-row em{display:block;font-style:normal;font-size:12px;line-height:1.4;margin-top:3px;color:var(--dim)}
.ar-row svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;opacity:.4;transition:transform .2s,opacity .2s}
.ar-row:hover{border-color:var(--ac-b)}
.ar-row.on{border-color:var(--ac);background:var(--ac-a)}
.ar-row.on svg{opacity:1;transform:translateX(3px);color:var(--ac-2)}
.ar-panes{border:1px solid var(--line);border-radius:22px;background:var(--panel);padding:28px 30px;min-height:520px}
.ar-pn{margin:0 0 6px;font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ac-2)}
.ar-pane h3{margin:0 0 10px;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;line-height:1.2}
.ar-pl{margin:0 0 22px;color:var(--muted);font-weight:300;line-height:1.65}
.ar-pane h4{margin:0 0 10px;font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ar-pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.ar-gets{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:g}
.ar-gets li{counter-increment:g;position:relative;padding:12px 14px 12px 44px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.02);animation:arIn .45s var(--d) ease both}
.ar-gets li::before{content:counter(g,decimal-leading-zero);position:absolute;left:14px;top:13px;
  font:600 11px 'JetBrains Mono',monospace;color:var(--ac-2)}
.ar-gets b{display:block;font-size:14px;font-weight:600}
.ar-gets span{display:block;font-size:12.6px;color:var(--muted);font-weight:300;line-height:1.45;margin-top:2px}
.ar-proves,.ar-when{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:8px}
.ar-proves li{display:flex;gap:10px;font-size:13.6px;line-height:1.45}
.ar-proves svg{flex:0 0 18px;width:18px;height:18px;fill:none;stroke:var(--ac-2);stroke-width:2.4;margin-top:1px}
.ar-when li{font-size:13.4px;color:var(--muted);font-weight:300;padding-left:14px;position:relative;line-height:1.45}
.ar-when li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--ac-b)}
.ar-shape{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 20px}
.ar-shape span{font-size:12.6px;padding:7px 12px;border-radius:10px;border:1px solid var(--line);color:var(--text)}
.ar-shape em{display:block;font-style:normal;font:600 9.5px 'JetBrains Mono',monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);margin-bottom:2px}
.ar-pcta{display:flex;flex-wrap:wrap;gap:10px}
.ar-pcta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}

/* ---------- studio model ---------- */
.ar-smgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ar-sm{padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--panel);transition-delay:var(--d);position:relative;overflow:hidden}
.ar-sm::before{content:"";position:absolute;inset:auto -30% -60% auto;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(var(--ac-a),transparent 70%);transition:transform .5s}
.ar-sm:hover::before{transform:scale(1.5)}
.ar-sm i{font:600 11px 'JetBrains Mono',monospace;font-style:normal;color:var(--ac-2)}
.ar-sm h3{margin:10px 0 8px;font-size:18px}
.ar-sm p{margin:0;color:var(--muted);font-size:14px;font-weight:300;line-height:1.6}
.ar-lineage{margin-top:46px}
.ar-lineage ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative}
.ar-lineage ol::before{content:"";position:absolute;left:8px;right:8px;top:8px;height:2px;
  background:linear-gradient(90deg,var(--line),var(--ac))}
.ar-lineage li{position:relative;padding:28px 18px 0 0;transition-delay:var(--d)}
.ar-ld{position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:var(--ink);border:2px solid var(--ac)}
.ar-lineage li:last-child .ar-ld{background:var(--ac);box-shadow:0 0 0 6px var(--ac-a)}
.ar-lineage b{display:block;font-size:15px}
.ar-lineage em{display:block;font-style:normal;font-size:13px;color:var(--muted);font-weight:300;margin-top:4px;line-height:1.5}

/* ---------- formats ---------- */
.ar-fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ar-fmt{padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--panel);display:flex;flex-direction:column;
  transition:border-color .25s,transform .25s;transition-delay:var(--d)}
.ar-fmt:hover{border-color:var(--ac-b);transform:translateY(-3px)}
.ar-ff{margin:0;font:600 10px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ac-2)}
.ar-fmt h3{margin:10px 0 8px;font-size:18px;line-height:1.25}
.ar-fmt>p:not(.ar-ff):not(.ar-fl){margin:0 0 16px;font-size:14px;color:var(--muted);font-weight:300;line-height:1.6;flex:1}
.ar-fl{margin:0;padding-top:12px;border-top:1px solid var(--line);font-size:13px}
.ar-fl span{display:block;font:600 9.5px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:3px}

/* ---------- outcomes ---------- */
.ar-ogrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ar-out{padding:22px 22px 20px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(160deg,var(--ac-a),transparent 55%),var(--panel);transition-delay:var(--d)}
.ar-oi{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--ac-a);border:1px solid var(--ac-b)}
.ar-oi svg{width:18px;height:18px;fill:none;stroke:var(--ac-2);stroke-width:2.4}
.ar-out h3{margin:14px 0 6px;font-size:18px}
.ar-out p{margin:0;font-size:14px;color:var(--muted);font-weight:300;line-height:1.6}

/* ---------- deliverables wall ---------- */
.ar-wall-in{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:36px;align-items:center}
.ar-wall h3{margin:0 0 8px;font-size:22px;font-weight:400}
.ar-wall h3 b{font-size:40px;font-weight:700;color:var(--ac-2);letter-spacing:-.03em;margin-right:6px}
.ar-wall-in>div>p:not(.eyebrow){margin:0;color:var(--muted);font-weight:300;font-size:14.5px}
.ar-chips{display:flex;flex-wrap:wrap;gap:7px}
.ar-chip{font-size:12.6px;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.025);
  opacity:0;transform:translateY(6px)}
.rv.in .ar-chip{animation:arIn .4s var(--d) ease forwards}
.ar-chip:hover{border-color:var(--ac-b);background:var(--ac-a)}

/* ---------- patterns ---------- */
.ar-pgrid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px}
.ar-pat{padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--panel);transition-delay:var(--d);
  border-top:2px solid var(--ac)}
.ar-pi{margin:0 0 10px;font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ac-2)}
.ar-pd{margin:0 0 14px;font-size:14.4px;line-height:1.55}
.ar-pg{margin:0;font-size:13.4px;color:var(--muted);font-weight:300;line-height:1.5}
.ar-pg span{display:block;font:600 9.5px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.ar-note{margin-top:18px;max-width:80ch}

/* ---------- next ---------- */
.ar-nxgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ar-nx{display:flex;flex-direction:column;gap:6px;padding:22px;border:1px solid var(--line);border-radius:18px;
  background:var(--panel);text-decoration:none;transition:border-color .25s,transform .25s}
.ar-nx:hover{border-color:var(--ac-b,rgba(255,255,255,.25));transform:translateY(-3px)}
.ar-nx i{font:600 11px 'JetBrains Mono',monospace;font-style:normal;color:var(--ac-2,var(--muted))}
.ar-nx b{font-size:19px}
.ar-nx span{font-size:13.6px;color:var(--muted);font-weight:300;line-height:1.5;flex:1}
.ar-nx em{font-style:normal;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;color:var(--ac-2,var(--text))}
.ar-nx em svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}

/* ==========================================================================
   HOME - three areas
   ========================================================================== */
.ha-head{text-align:center}
.ha-head .eyebrow{justify-content:center}
.ha-head .eyebrow::after{display:none}
.ha-head .lead{margin-left:auto;margin-right:auto;margin-bottom:24px}
.ha-flow{position:relative;height:70px;margin:0 0 6px}
.ha-flow svg{width:100%;height:70px;display:block}
.ha-line{stroke:url(#hag);stroke-width:2;fill:none}
.ha-loop{stroke:rgba(255,255,255,.18);stroke-width:1.4;fill:none;stroke-dasharray:3 6;animation:arDash 1.8s linear infinite}
.ha-pk{fill:#fff;filter:drop-shadow(0 0 6px #22d3ee)}
.ha-node{stroke:#06060b;stroke-width:3}
.ha-node.n1{fill:#7b5cf0}.ha-node.n2{fill:#2b8be6}.ha-node.n3{fill:#22d3ee}
.ha-fl{position:absolute;top:6px;font:600 10px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  transform:translateX(-50%)}
.ha-fl.l1{left:33.3%}.ha-fl.l2{left:50%}.ha-fl.l3{left:66.6%}
.ha-fl.l4{top:auto;bottom:-6px;left:50%;color:var(--muted);letter-spacing:.1em;text-transform:none;font-family:inherit;font-weight:400;font-size:12px}
.ha-fl.l1{left:16.6%}.ha-fl.l3{left:83.4%}
.ha-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
.ha-card{position:relative;display:flex;flex-direction:column;padding:26px 24px 22px;border-radius:22px;border:1px solid var(--line);
  background:linear-gradient(170deg,var(--ac-a),transparent 45%),var(--panel);text-decoration:none;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s;transition-delay:var(--d)}
.ha-card::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--ac);transform:scaleX(.18);
  transform-origin:0 50%;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ha-card:hover{transform:translateY(-6px);border-color:var(--ac-b);box-shadow:0 30px 60px -36px var(--ac)}
.ha-card:hover::after{transform:scaleX(1)}
.ha-top{display:flex;justify-content:space-between;align-items:center}
.ha-top i{font:600 12px 'JetBrains Mono',monospace;font-style:normal;color:var(--ac-2)}
.ha-top em{font-style:normal;font:600 10px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ac-2);padding:4px 9px;border-radius:999px;background:var(--ac-a)}
.ha-name{display:block;margin:14px 0 8px;font-size:clamp(24px,2.4vw,30px);letter-spacing:-.02em}
.ha-card-l{font-size:14.4px;color:var(--muted);font-weight:300;line-height:1.55;margin-bottom:16px}
.ha-k{font:600 9.5px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:6px 0 8px}
.ha-offers,.ha-outs{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:5px}
.ha-offers li{font-size:13.4px;padding-left:12px;position:relative;line-height:1.4}
.ha-offers li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--ac)}
.ha-offers .ha-more{color:var(--dim);font-size:12.6px}
.ha-offers .ha-more::before{display:none}
.ha-outs li{display:flex;gap:8px;font-size:13.4px;line-height:1.4}
.ha-outs svg{flex:0 0 15px;width:15px;height:15px;fill:none;stroke:var(--ac-2);stroke-width:2.6;margin-top:2px}
.ha-meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font:500 11px 'JetBrains Mono',monospace;color:var(--dim)}
.ha-go{margin-top:12px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ac-2)}
.ha-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .25s}
.ha-card:hover .ha-go svg{transform:translateX(4px)}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .ar-hero-in,.ar-settle-in,.ar-console,.ar-wall-in{grid-template-columns:1fr}
  .ar-list{position:static}
  .ar-fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ar-smgrid,.ar-ogrid,.ha-grid,.ar-nxgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ha-flow{display:none}
}
@media (max-width:640px){
  .ar-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ar-fgrid,.ar-smgrid,.ar-ogrid,.ha-grid,.ar-nxgrid,.ar-pgrid{grid-template-columns:1fr}
  .ar-lineage ol{grid-template-columns:1fr 1fr;row-gap:24px}
  .ar-panes{padding:22px 18px}
  .ar-gate{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ar-hero *,.ha *{animation:none!important}
  .as-sig,.as-doc,.ad-note,.ad-btn,.ad-chip{opacity:1}
  .as-bar,.ad-tf{transform:none}
  .al-dot{opacity:0}
}

/* ---------- home: Design Studio, the eleven offerings (orbit) ---------- */
.so-wrap{margin-top:64px;--c:#5468f2}
.so-head{text-align:center;margin-bottom:22px}
.so-head .eyebrow{justify-content:center}
.so-head .eyebrow::after{display:none}
.so-h{margin:0 0 10px;font-size:clamp(26px,3vw,38px);font-weight:300;letter-spacing:-.025em;line-height:1.15}
.so-lead{margin:0 auto 18px;color:var(--muted);font-weight:300;font-size:15.5px}
.so-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.so-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--muted);font:inherit;font-size:13px;cursor:pointer;transition:all .22s}
.so-chip i{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.so-chip em{font:600 10.5px 'JetBrains Mono',monospace;font-style:normal;color:var(--dim)}
.so-chip:hover,.so-chip.on{color:var(--text);border-color:var(--c);background:rgba(255,255,255,.04)}

.so{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:24px;align-items:center;padding:26px 30px 26px 8px;
  border:1px solid var(--line);border-radius:28px;position:relative;overflow:hidden;
  background:radial-gradient(70% 90% at 28% 50%,rgba(84,104,242,.10),transparent 70%),var(--panel)}
.so::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--grad);opacity:.7}
.so-svg{width:100%;height:auto;display:block;overflow:visible}

/* rings, arcs, spokes */
.so-ring{fill:none;stroke:rgba(255,255,255,.1);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1}
.so-ring2{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1;stroke-dasharray:2 7;
  transform-origin:320px 320px;animation:soSpin 60s linear infinite}
.so-arc{fill:none;stroke-width:4;stroke-linecap:round;opacity:0;transition:opacity .3s,stroke-width .3s}
.so-sp{fill:none;stroke:var(--c);stroke-width:1.2;opacity:0;stroke-dasharray:3 5;transition:opacity .35s,stroke-width .35s}
.so-sp.on{opacity:.95;stroke-width:2;stroke-dasharray:none;filter:drop-shadow(0 0 6px var(--c))}
.so-pk{fill:#fff;opacity:0;filter:drop-shadow(0 0 8px #22d3ee)}
.so-glow{animation:soBreath 5s ease-in-out infinite;transform-origin:320px 320px}
.so-hubc{fill:#0b0b14;stroke:url(#soGrad);stroke-width:2}
.so-big{fill:var(--text);font:200 52px Inter,system-ui,sans-serif;letter-spacing:-.04em;text-anchor:middle}
.so-hubl{fill:var(--dim);font:600 9.5px 'JetBrains Mono',monospace;letter-spacing:.2em;text-anchor:middle}
.so-hub{opacity:0;transform-origin:320px 320px;transform:scale(.6)}

/* nodes */
.so-n{cursor:pointer;outline:none}
.so-nb{transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(.3);transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.so-halo{fill:var(--c);opacity:0;transition:opacity .3s}
.so-core{fill:#0b0b14;stroke:var(--c);stroke-width:2;transition:fill .3s,stroke-width .3s}
.so-num{fill:var(--text);font:600 13px 'JetBrains Mono',monospace;text-anchor:middle;pointer-events:none;transition:fill .3s}
.so-n:hover .so-core,.so-n:focus-visible .so-core{stroke-width:3}
.so-n:focus-visible .so-halo{opacity:.35}
.so-n.on .so-core{fill:var(--c);stroke:#fff;stroke-width:2}
.so-n.on .so-num{fill:#06060b}
.so-n.on .so-halo{opacity:.28;animation:soPulse 1.8s ease-out infinite}
.so-l{fill:var(--muted);font:400 15px Inter,system-ui,sans-serif;opacity:0;cursor:pointer;transition:fill .3s}
.so-l.on{fill:var(--text);font-weight:600}

/* phase highlight */
.so.ph .so-n:not(.hl) .so-nb,.so.ph .so-l:not(.hl){opacity:.22!important;transition:opacity .25s}
.so.ph .so-arc.hl{opacity:1!important;stroke-width:6}

/* entrance, once the section is revealed */
.so-wrap.in:not(.ready) .so-ring{animation:soDraw 1.4s .1s cubic-bezier(.6,.1,.2,1) forwards}
.so-wrap.in:not(.ready) .so-hub{animation:soHub .7s .2s cubic-bezier(.3,1.4,.5,1) forwards}
.so-wrap.in:not(.ready) .so-sp{animation:soFade .5s var(--d) ease forwards}
.so-wrap.in:not(.ready) .so-sp.on{animation:none}
.so-wrap.in:not(.ready) .so-nb{animation:soPop .55s var(--d) cubic-bezier(.3,1.5,.5,1) forwards}
.so-wrap.in:not(.ready) .so-l{animation:soFadeL .6s var(--d) ease forwards}
.so-wrap.in:not(.ready) .so-arc{animation:soArc .6s 1.3s ease forwards}
.so-wrap.in .so-pk{opacity:1;transition:opacity .4s 1.4s}
.so-core,.so-num{transform-box:fill-box;transform-origin:center;transition:transform .35s cubic-bezier(.3,1.5,.5,1),fill .3s,stroke-width .3s}
.so-n.on .so-core,.so-n.on .so-num{transform:scale(1.18)}
.so-wrap.ready .so-ring{stroke-dashoffset:0}
.so-wrap.ready .so-hub{opacity:1;transform:none}
.so-wrap.ready .so-sp{opacity:.35}
.so-wrap.ready .so-sp.on{opacity:.95}
.so-wrap.ready .so-nb,.so-wrap.ready .so-l{opacity:1;transform:none}
.so-wrap.ready .so-arc{opacity:.55}

@keyframes soDraw{to{stroke-dashoffset:0}}
@keyframes soHub{to{opacity:1;transform:scale(1)}}
@keyframes soFade{to{opacity:.35}}
@keyframes soFadeL{to{opacity:1}}
@keyframes soArc{to{opacity:.55}}
@keyframes soPop{to{opacity:1;transform:scale(1)}}
@keyframes soSpin{to{transform:rotate(360deg)}}
@keyframes soBreath{0%,100%{opacity:.7;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@keyframes soPulse{0%{opacity:.4;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
.so-halo{transform-box:fill-box;transform-origin:center}

/* panel */
.so-panel{min-width:0}
.so-ctl{display:flex;align-items:center;gap:8px;margin-bottom:18px}
.so-b{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--muted);
  font:inherit;font-size:15px;cursor:pointer;display:grid;place-items:center;transition:all .2s;flex:0 0 auto}
.so-b:hover{color:var(--text);border-color:var(--c)}
.so-b svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linejoin:round}
.so-play .i-play{display:none}.so-play[data-on="0"] .i-play{display:block;fill:currentColor;stroke:none}
.so-play[data-on="0"] .i-pause{display:none}
.so-bar{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden;margin-left:6px}
.so-bar i{display:block;height:100%;width:100%;background:var(--c);transform-origin:0 50%;transform:scaleX(0);transition:background .3s}
.so-ps{display:grid}
.so-p{grid-area:1/1;opacity:0;visibility:hidden;transform:translateX(14px);
  transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1),visibility 0s .4s}
.so-p.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease,transform .5s cubic-bezier(.2,.8,.2,1),visibility 0s}
.so-k{display:flex;justify-content:space-between;gap:10px;margin:0 0 10px;font:600 10.5px 'JetBrains Mono',monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.so-ph{color:var(--c)}
.so-p h3{margin:0 0 10px;font-size:clamp(22px,2.2vw,28px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.so-one{margin:0 0 18px;color:var(--muted);font-weight:300;font-size:15px;line-height:1.6}
.so-sub{margin:0 0 8px;font:600 9.5px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.so-gets{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:7px}
.so-gets li{display:flex;gap:12px;align-items:flex-start;padding:9px 12px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.02);opacity:0;transform:translateY(8px)}
.so-p.on .so-gets li{animation:soLi .45s calc(.12s + var(--k)*.08s) cubic-bezier(.2,.8,.2,1) forwards}
.so-gets i{font:600 10.5px 'JetBrains Mono',monospace;font-style:normal;color:var(--c);margin-top:2px;flex:0 0 auto}
.so-gets b{display:block;font-size:14px;font-weight:600;line-height:1.3}
.so-gets em{display:block;font-style:normal;font-size:12.5px;color:var(--dim);line-height:1.45;margin-top:2px}
@keyframes soLi{to{opacity:1;transform:none}}
.so-shape{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:0 0 16px;padding-top:14px;border-top:1px solid var(--line)}
.so-shape dt{font:600 9px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.so-shape dd{margin:3px 0 0;font-size:12.8px;color:var(--muted);line-height:1.4}
.so-go{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--text);text-decoration:none;
  padding:9px 16px;border-radius:999px;border:1px solid var(--c);transition:background .2s}
.so-go:hover{background:rgba(255,255,255,.06)}
.so-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .25s}
.so-go:hover svg{transform:translateX(4px)}

@media (max-width:980px){
  .so{grid-template-columns:1fr;padding:18px 18px 22px}
  .so-stage{max-width:620px;margin:0 auto;width:100%}
}
@media (max-width:600px){
  .so-l{display:none}
  .so-num{font-size:17px}
  .so-shape{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .so-ring{stroke-dashoffset:0}.so-hub,.so-nb,.so-l{opacity:1;transform:none}.so-sp{opacity:.35}.so-arc{opacity:.55}
  .so-ring2,.so-glow,.so-n.on .so-halo{animation:none}
  .so-wrap.in *{animation:none!important}
  .so-gets li{opacity:1;transform:none}.so-p{transition:none}
}