:root{--f-disp:"Montserrat","IBM Plex Sans",system-ui,sans-serif}
.s-eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  font-family:var(--f-en);color:var(--cyan);
}
.s-eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--cyan)}
/* =========================================================
   DESIGNS 13–18 — SECTION LAYOUTS (2 variants per section)
   ========================================================= */
.sxd{display:flex;flex-direction:column;gap:30px}
.sxd-head{text-align:center;max-width:780px;margin:0 auto}
.sxd-head h3{font-size:clamp(22px,2.8vw,33px);font-weight:800;color:var(--head);margin:12px 0 10px;letter-spacing:-.012em;line-height:1.18}
.sxd-head h3::after{content:"";display:block;width:54px;height:4px;border-radius:4px;margin:15px auto 0;background:linear-gradient(90deg,var(--violet-2),var(--cyan))}
.sxd-head p{font-size:14.5px;line-height:1.75;color:var(--t2);margin:0;text-wrap:pretty}
.sgrid{display:grid;gap:16px}
.sgrid.c2{grid-template-columns:1fr 1fr}
.sgrid.c3{grid-template-columns:repeat(3,1fr)}
.scard{position:relative;overflow:hidden;border-radius:18px;padding:24px;border:1px solid transparent;
  background:linear-gradient(165deg,color-mix(in srgb,var(--c) 9%,transparent),color-mix(in srgb,var(--panel-2) 54%,transparent)) padding-box,
            linear-gradient(150deg,color-mix(in oklab,var(--c) 46%,transparent),color-mix(in srgb,var(--line) 60%,transparent) 55%) border-box;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);box-shadow:0 24px 52px -40px #000;transition:transform .18s ease,box-shadow .18s ease}
.scard::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 75% at 84% 8%,color-mix(in oklab,var(--c) 12%,transparent),transparent 60%)}
.scard:hover{transform:translateY(-4px);box-shadow:0 32px 60px -34px color-mix(in oklab,var(--c) 42%,#000)}
.scard>*{position:relative;z-index:1}
.scard .sic{display:grid;place-items:center;color:var(--c);background:color-mix(in oklab,var(--c) 15%,transparent);border:1px solid color-mix(in oklab,var(--c) 32%,var(--line));box-shadow:0 0 22px -7px color-mix(in oklab,var(--c) 60%,transparent)}
.scard b{font-weight:700;color:var(--head)}
.scard p{margin:0;font-size:13.5px;line-height:1.62;color:var(--t2);text-wrap:pretty}
.scard.top{text-align:center}
.scard.top .sic{width:56px;height:56px;border-radius:16px;margin:0 auto 16px}
.scard.top .sic svg{width:27px;height:27px}
.scard.top b{display:block;font-size:16.5px;margin-bottom:9px}
.scard.side{display:flex;align-items:flex-start;gap:16px;text-align:start}
.scard.side .sic{width:50px;height:50px;border-radius:14px;flex:none}
.scard.side .sic svg{width:24px;height:24px}
.scard.side b{display:block;font-size:16px;margin-bottom:7px}
.scard.tb{border-top:3px solid var(--c)}
.scard .snum{position:absolute;top:16px;inset-inline-end:18px;font-family:var(--f-en);font-size:13px;font-weight:700;color:color-mix(in oklab,var(--c) 72%,var(--t3));z-index:1}
@media(max-width:820px){.sgrid.c3{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sgrid.c2,.sgrid.c3{grid-template-columns:1fr}}


/* ===== 13–18 v2: NOVEL layouts (orbital · editorial · tabbed · timeline · accordion · vault) ===== */
/* orbital */
.orb{position:relative;width:100%;max-width:740px;margin:18px auto 6px;min-height:460px}
.orb-svg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.orb-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:126px;height:126px;border-radius:50%;display:grid;place-items:center;text-align:center;z-index:2;background:radial-gradient(circle at 50% 34%,rgba(23,209,198,.32),rgba(9,4,84,.92));border:1px solid rgba(23,209,198,.5);box-shadow:0 0 64px -10px rgba(23,209,198,.5),inset 0 0 30px rgba(23,209,198,.16)}
.orb-core b{font-family:var(--f-disp),system-ui;font-size:23px;color:#fff;font-weight:800;letter-spacing:.02em}
.orb-core span{display:block;font-size:11px;color:var(--cyan-t);margin-top:3px}
.orb-node{position:absolute;width:210px;transform:translate(-50%,-50%);z-index:2;text-align:center}
.orb-node .on-ic{width:62px;height:62px;border-radius:18px;margin:0 auto 11px;display:grid;place-items:center;color:var(--c);background:radial-gradient(120% 120% at 50% 20%,color-mix(in oklab,var(--c) 28%,transparent),color-mix(in oklab,var(--bg-1) 80%,#000));border:1px solid color-mix(in oklab,var(--c) 52%,var(--line));box-shadow:0 14px 32px -14px color-mix(in oklab,var(--c) 75%,#000),0 0 0 6px var(--bg-0)}
.orb-node b{display:block;font-size:15px;color:var(--head);font-weight:700;margin-bottom:5px}
.orb-node p{margin:0 auto;font-size:11.5px;line-height:1.5;color:var(--t3);max-width:24ch}
@media(max-width:680px){.orb{min-height:0;display:flex;flex-direction:column;gap:14px}.orb-svg,.orb-core{display:none}.orb-node{position:static;transform:none;width:auto;display:flex;align-items:center;gap:14px;text-align:start}.orb-node .on-ic{margin:0;flex:none}.orb-node p{margin:0;max-width:none}}

/* editorial index */
.edl{max-width:880px;margin:0 auto;display:flex;flex-direction:column}
.edl-row{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;padding:26px 10px;border-top:1px solid var(--line);transition:background .18s}
.edl-row:last-child{border-bottom:1px solid var(--line)}
.edl-row:hover{background:color-mix(in oklab,var(--c) 6%,transparent)}
.edl-n{font-family:var(--f-disp),system-ui;font-size:40px;font-weight:800;color:color-mix(in oklab,var(--c) 78%,var(--t3));line-height:1;min-width:66px}
.edl-tx b{display:block;font-size:19px;color:var(--head);font-weight:700;margin-bottom:7px}
.edl-tx p{margin:0;font-size:14px;color:var(--t2);line-height:1.6;max-width:62ch}
.edl-ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;color:var(--c);background:color-mix(in oklab,var(--c) 12%,transparent);border:1px solid color-mix(in oklab,var(--c) 28%,var(--line))}
@media(max-width:620px){.edl-row{grid-template-columns:auto 1fr;gap:16px;padding:20px 4px}.edl-ic{display:none}.edl-n{font-size:32px;min-width:48px}}

/* tabbed showcase */
.tbx{display:grid;grid-template-columns:.82fr 1.18fr;gap:18px;align-items:stretch}
.tbx-tabs{display:flex;flex-direction:column;gap:9px}
.tbx-tab{display:flex;align-items:center;gap:13px;padding:15px 16px;border-radius:14px;border:1px solid var(--line);background:color-mix(in oklab,var(--panel-2) 50%,transparent);cursor:pointer;transition:.16s;text-align:start}
.tbx-tab .tt-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:var(--c);background:color-mix(in oklab,var(--c) 14%,transparent);border:1px solid color-mix(in oklab,var(--c) 28%,transparent);flex:none}
.tbx-tab b{font-size:14.5px;color:var(--t1);font-weight:600}
.tbx-tab.on{border-color:color-mix(in oklab,var(--c) 55%,transparent);background:color-mix(in oklab,var(--c) 13%,transparent);transform:translateX(-3px)}
[dir=ltr] .tbx-tab.on{transform:translateX(3px)}
.tbx-tab.on b{color:var(--head)}
.tbx-panel{position:relative;overflow:hidden;border-radius:20px;padding:36px;border:1px solid color-mix(in oklab,var(--c) 42%,var(--line));background:linear-gradient(160deg,color-mix(in oklab,var(--c) 13%,transparent),color-mix(in oklab,var(--panel-2) 55%,transparent));display:flex;flex-direction:column;justify-content:center}
.tbx-panel .tp-ic{width:88px;height:88px;border-radius:24px;display:grid;place-items:center;color:var(--c);background:color-mix(in oklab,var(--c) 16%,transparent);border:1px solid color-mix(in oklab,var(--c) 32%,transparent);margin-bottom:22px;box-shadow:0 0 46px -8px color-mix(in oklab,var(--c) 58%,transparent)}
.tbx-panel h4{margin:0 0 13px;font-size:25px;color:var(--head);font-weight:800;letter-spacing:-.01em}
.tbx-panel p{margin:0;font-size:15px;line-height:1.8;color:var(--t2);max-width:48ch}
@media(max-width:760px){.tbx{grid-template-columns:1fr}.tbx-panel{padding:26px}}

/* vertical alternating timeline */
.vtl{position:relative;max-width:900px;margin:6px auto 0;padding:6px 0}
.vtl::before{content:"";position:absolute;top:6px;bottom:6px;left:50%;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,#17d1c6,#b07cc6,#52d999,#feb602,#ff8a6b);opacity:.55;border-radius:2px}
.vtl-row{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-bottom:24px}
.vtl-card{border-radius:16px;padding:18px 20px;border:1px solid color-mix(in oklab,var(--c) 34%,var(--line));background:linear-gradient(165deg,color-mix(in oklab,var(--c) 11%,transparent),color-mix(in oklab,var(--panel-2) 52%,transparent));width:calc(100% - 34px)}
.vtl-row.l .vtl-card{grid-column:1;justify-self:end}
.vtl-row.r .vtl-card{grid-column:2;justify-self:start}
.vtl-dot{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--c);background:var(--bg-0);border:1px solid color-mix(in oklab,var(--c) 52%,var(--line));z-index:1;box-shadow:0 0 0 5px var(--bg-0),0 10px 22px -12px color-mix(in oklab,var(--c) 70%,#000)}
.vtl-card b{display:block;font-size:15px;color:var(--head);font-weight:700;margin-bottom:6px}
.vtl-card p{margin:0;font-size:12.5px;line-height:1.55;color:var(--t2)}
@media(max-width:640px){.vtl::before{left:20px}.vtl-row{grid-template-columns:1fr}.vtl-card{width:auto;margin-inline-start:52px;justify-self:stretch!important;grid-column:1!important}.vtl-dot{left:20px}}

/* accordion */
.acc{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.acc-item{border-radius:14px;border:1px solid color-mix(in oklab,var(--c) 30%,var(--line));background:color-mix(in oklab,var(--c) 7%,transparent);overflow:hidden;transition:border-color .18s}
.acc-item.open{border-color:color-mix(in oklab,var(--c) 50%,var(--line))}
.acc-head{display:flex;align-items:center;gap:14px;padding:17px 18px;cursor:pointer}
.acc-head .ah-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--c);background:color-mix(in oklab,var(--c) 15%,transparent);border:1px solid color-mix(in oklab,var(--c) 28%,transparent);flex:none}
.acc-head b{flex:1;font-size:16px;color:var(--head);font-weight:700}
.acc-head .ah-ch{color:var(--t3);transition:transform .22s;flex:none}
.acc-item.open .ah-ch{transform:rotate(180deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.acc-item.open .acc-body{max-height:240px}
.acc-body p{margin:0;padding:0 76px 18px;font-size:13.5px;line-height:1.65;color:var(--t2)}
@media(max-width:560px){.acc-body p{padding:0 18px 18px}}

/* vault columns */
.vlt{display:grid;grid-template-columns:repeat(3,1fr);border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.vlt-col{position:relative;padding:24px 20px 22px;background:color-mix(in oklab,var(--c) 7%,transparent);border-inline-end:1px dashed color-mix(in oklab,var(--c) 34%,var(--line));border-bottom:1px dashed color-mix(in oklab,var(--c) 22%,var(--line))}
.vlt-col:nth-child(3n){border-inline-end:0}
.vlt-col:nth-last-child(-n+3){border-bottom:0}
.vlt-col .vc-lock{position:absolute;top:18px;inset-inline-start:18px;color:color-mix(in oklab,var(--c) 72%,var(--t3));opacity:.6}
.vlt-col .vc-ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;color:var(--c);background:color-mix(in oklab,var(--c) 15%,transparent);border:1px solid color-mix(in oklab,var(--c) 30%,transparent);margin-bottom:15px;box-shadow:0 0 24px -8px color-mix(in oklab,var(--c) 60%,transparent)}
.vlt-col b{display:block;font-size:15px;color:var(--head);font-weight:700;margin-bottom:9px}
.vlt-col p{margin:0;font-size:12.5px;line-height:1.58;color:var(--t2)}
@media(max-width:820px){.vlt{grid-template-columns:1fr 1fr}.vlt-col:nth-child(3n){border-inline-end:1px dashed color-mix(in oklab,var(--c) 34%,var(--line))}.vlt-col:nth-child(2n){border-inline-end:0}}
@media(max-width:540px){.vlt{grid-template-columns:1fr}.vlt-col{border-inline-end:0!important;border-bottom:1px dashed color-mix(in oklab,var(--c) 28%,var(--line))}.vlt-col:last-child{border-bottom:0}}

/* =========================================================
   LIGHT MODE — keep these section designs legible on the cream
   surface. Bright per-card --c accents (icons/numbers/borders) are
   already deepened at runtime by vj-light-recolor.js; here we only
   fix the few HARD-CODED dark fills / heavy black glows that don't
   adapt through theme tokens, so nothing looks muddy on light.
   ========================================================= */
[data-theme="light"] .scard{box-shadow:0 18px 40px -34px rgba(20,18,58,.55)}
[data-theme="light"] .scard:hover{box-shadow:0 26px 50px -32px color-mix(in oklab,var(--c) 28%,rgba(20,18,58,.4))}
[data-theme="light"] .scard .sic{box-shadow:0 0 18px -8px color-mix(in oklab,var(--c) 45%,transparent)}
/* orbital core: dark navy orb → light glass with dark text */
[data-theme="light"] .orb-core{
  background:radial-gradient(circle at 50% 34%,color-mix(in oklab,var(--cyan) 22%,#fff),color-mix(in oklab,var(--panel-2) 86%,#fff));
  border-color:color-mix(in oklab,var(--cyan) 45%,var(--line));
  box-shadow:0 0 46px -16px color-mix(in oklab,var(--cyan) 42%,transparent),inset 0 0 24px color-mix(in oklab,var(--cyan) 10%,transparent);
}
[data-theme="light"] .orb-core b{color:var(--head)}
[data-theme="light"] .orb-node .on-ic{box-shadow:0 12px 26px -16px color-mix(in oklab,var(--c) 48%,rgba(20,18,58,.35)),0 0 0 6px var(--bg-0)}
[data-theme="light"] .tbx-panel .tp-ic{box-shadow:0 0 36px -12px color-mix(in oklab,var(--c) 45%,transparent)}
[data-theme="light"] .vtl-dot{box-shadow:0 0 0 5px var(--bg-0),0 8px 18px -12px color-mix(in oklab,var(--c) 45%,rgba(20,18,58,.35))}
[data-theme="light"] .vlt-col .vc-ic{box-shadow:0 0 20px -10px color-mix(in oklab,var(--c) 48%,transparent)}