/* Polices auto-hébergées (sous-ensemble latin, variables) — Geist et Kode Mono, SIL Open Font License 1.1 */
@font-face{font-family:"Geist";font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/geist-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Kode Mono";font-style:normal;font-weight:500 600;font-display:swap;src:url(/assets/fonts/kode-mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Layout: the family idiom of shamsops.com / vincilogic.com, calmer for the parent. Centered hero where three product-colored signals feed the sec41 red dot rising like the ShamsOps sun. Display set in a mono face that echoes the squarish sec41 wordmark (as VinciLogic's display does), weight 500, -.05em. Square controls, 4px surfaces, hairlines, one accent used once. Dark first, light on demand. */
:root{
  color-scheme:dark;
  --bg:#0E0F14; --bg-2:#14161D; --panel:#1A1C24; --ink:#F2F2F4; --muted:#A6A6B0; --subtle:#8D8E99;
  --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.14); --trace:rgba(255,255,255,.09);
  --accent:#E0384F; --red:#C8203F; --red-hi:#D52B49;
  --band:#F4F4F6; --band-ink:#0E0F14; --band-muted:#6A6B75; --band-line:rgba(22,20,26,.09); --band-accent:#C8203F; --band-grid:rgba(22,20,26,.05);
  --foot:#0E0F14; --foot-ink:#F2F2F4; --foot-muted:#A6A6B0; --foot-line:rgba(255,255,255,.08);
  --card-orb:#1A1C24; --hover-shadow:none;
  --wash-red:22%; --orb-core:#1B0609; --orb-glow:0 0 160px 40px rgba(200,32,63,.30); --sun-glow:0 0 110px 24px rgba(185,32,60,.26);
  --card-shadow:0 1px 0 rgba(255,255,255,.035) inset;
  --grc:#3DD598;
  --sd:#387888; --sd-hi:#8FCAD1; --sd-wash:rgba(56,120,136,.10);
  --so:#B9203C; --so-hi:#FF4156; --so-wash:rgba(185,32,60,.10);
  --vl:#974DE0; --vl-hi:#B483EA; --vl-wash:rgba(151,77,224,.10);
  --f-display:"Kode Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --f-body:"Geist","Helvetica Neue",Arial,sans-serif;
  --f-mono:"Kode Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --f-mark:"Kode Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --gutter:64px; --pad:clamp(80px,10vw,128px);
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  color-scheme:light;
  --bg:#F4F4F6; --bg-2:#FAFAFB; --panel:#FFFFFF; --ink:#0E0F14; --muted:#3A3B44; --subtle:#6A6B75;
  --line:rgba(22,20,26,.09); --line-2:rgba(22,20,26,.16); --trace:rgba(22,20,26,.10);
  --accent:#C8203F; --red:#C8203F; --red-hi:#A91A35;
  --wash-red:8%; --orb-core:#F4F4F6; --orb-glow:none; --sun-glow:0 0 60px 4px rgba(200,32,63,.08);
  --band:#1A1C24; --band-ink:#F2F2F4; --band-muted:#A6A6B0; --band-line:rgba(255,255,255,.08); --band-accent:#E0384F; --band-grid:rgba(255,255,255,.045);
  --card-orb:#FFFFFF; --hover-shadow:0 18px 40px -24px rgba(30,12,20,.25);
  --card-shadow:0 1px 1px rgba(30,12,20,.03),0 12px 28px -20px rgba(30,12,20,.16);
  --grc:#0C7F58;
  --sd-hi:#2B6676; --sd-wash:rgba(56,120,136,.06);
  --so-hi:#C8203F; --so-wash:rgba(185,32,60,.05);
  --vl-hi:#7A37C2; --vl-wash:rgba(151,77,224,.06)}}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F4F4F6; --bg-2:#FAFAFB; --panel:#FFFFFF; --ink:#0E0F14; --muted:#3A3B44; --subtle:#6A6B75;
  --line:rgba(22,20,26,.09); --line-2:rgba(22,20,26,.16); --trace:rgba(22,20,26,.10);
  --accent:#C8203F; --red:#C8203F; --red-hi:#A91A35;
  --wash-red:8%; --orb-core:#F4F4F6; --orb-glow:none; --sun-glow:0 0 60px 4px rgba(200,32,63,.08);
  --band:#1A1C24; --band-ink:#F2F2F4; --band-muted:#A6A6B0; --band-line:rgba(255,255,255,.08); --band-accent:#E0384F; --band-grid:rgba(255,255,255,.045);
  --card-orb:#FFFFFF; --hover-shadow:0 18px 40px -24px rgba(30,12,20,.25);
  --card-shadow:0 1px 1px rgba(30,12,20,.03),0 12px 28px -20px rgba(30,12,20,.16);
  --grc:#0C7F58;
  --sd-hi:#2B6676; --sd-wash:rgba(56,120,136,.06);
  --so-hi:#C8203F; --so-wash:rgba(185,32,60,.05);
  --vl-hi:#7A37C2; --vl-wash:rgba(151,77,224,.06)}

*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .3s,color .3s}
a{color:inherit}
h1,h2,h3,p,blockquote{margin:0}
h1,h2,h3,blockquote{font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;line-height:1.05;text-wrap:balance}
p{text-wrap:pretty}
.shell{width:min(1280px,100%);margin-inline:auto;padding-inline:var(--gutter)}
@media (max-width:1100px){:root{--gutter:40px}}
@media (max-width:767px){:root{--gutter:24px}}
@media (max-width:430px){:root{--gutter:20px}}
.eyebrow{font-family:var(--f-mono);font-size:13px;font-weight:500;letter-spacing:.115em;line-height:1.5;text-transform:uppercase;color:var(--subtle)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* buttons: square, mono */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:50px;padding:0 23px;border:1px solid transparent;border-radius:0;font:500 15px/1 var(--f-body);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .18s,border-color .18s,color .18s}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translate(2px,-2px)}
.btn.primary{background:var(--red);color:#fff}
.btn.primary:hover{background:var(--red-hi)}
.btn.ghost{border-color:var(--line-2);color:var(--ink);background:transparent}
.btn.ghost:hover{border-color:var(--muted)}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .shell{display:flex;align-items:center;gap:28px;min-height:76px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.nav .baseline{margin:0 auto 0 -6px;padding-left:20px;border-left:1px solid var(--line-2);font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.1em;line-height:26px;text-transform:uppercase;color:var(--subtle);white-space:nowrap}
footer .logo{margin-right:auto}
.logo{color:var(--ink)}
.logo .lockup{height:26px;width:auto;display:block}
.links{display:flex;gap:30px}
.links a{font-family:var(--f-mono);font-size:14px;font-weight:500;letter-spacing:.04em;color:var(--muted);text-decoration:none;transition:color .2s}
.links a:hover{color:var(--ink)}
.theme{display:inline-grid;place-items:center;width:42px;height:42px;border:1px solid var(--line-2);background:transparent;color:var(--ink);cursor:pointer;flex:none;transition:border-color .2s}
.theme:hover{border-color:var(--muted)}
.theme svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme .ic-moon{display:none}
:root.is-light .theme .ic-sun{display:none}
:root.is-light .theme .ic-moon{display:block}
.nav .btn{min-height:42px;padding:0 18px;font-size:14px}
@media (max-width:1180px){.nav .baseline{display:none}.logo{margin-right:auto}}
@media (max-width:900px){.links{display:none}.nav .shell{min-height:68px;gap:12px}}
@media (max-width:380px){.nav .btn{padding:0 12px}}

/* hero */
.hero{position:relative;isolation:isolate;overflow:hidden;text-align:center;border-bottom:1px solid var(--line)}
.hero-art{position:absolute;left:0;right:0;bottom:0;height:240px;z-index:-1;pointer-events:none}
.hero-art svg{position:absolute;inset:0;width:100%;height:100%}
/* story: agents work -> your expert decides -> action verified (12 s loop) */
.story .lane{fill:none;stroke:var(--trace);stroke-width:1.2;stroke-dasharray:3 5}
.story .chev{fill:none;stroke:var(--ink);stroke-width:7;stroke-linejoin:miter}
.story .core{fill:var(--red);transform-box:fill-box;transform-origin:center;animation:decideCore 12s var(--ease) infinite}
.story .ring{fill:none;stroke:var(--red);stroke-width:1.4;transform-box:fill-box;transform-origin:center;opacity:0;animation:decideRing 12s var(--ease) infinite}
.story .lbl,.story .cap{font-family:var(--f-mono);font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.story .lbl{font-size:12px}
.story .cap{font-size:13px;fill:var(--muted)}
.story .cap b{fill:var(--ink)}
.story .so{fill:var(--so-hi)} .story .vl{fill:var(--vl-hi)} .story .sd{fill:var(--sd-hi)}
.story .ck{fill:none;stroke-width:2.2;stroke-linecap:square}
.story .ck.so{stroke:var(--so-hi)} .story .ck.vl{stroke:var(--vl-hi)} .story .ck.sd{stroke:var(--sd-hi)}
.story .pk{animation:pkIn 12s var(--ease) infinite}
.story .out{animation:pkOut 12s var(--ease) infinite}
.story .lbl.in{animation:lblIn 12s linear infinite}
.story .lbl.done{animation:lblOut 12s linear infinite}
.story .c1{animation:c1 12s linear infinite}.story .c2{animation:c2 12s linear infinite}.story .c3{animation:c3 12s linear infinite}
.story .static{display:none}
.story .d1{animation-delay:-.35s}.story .d2{animation-delay:-.7s}
@keyframes pkIn{0%{transform:translateX(-400px);opacity:0}6%{opacity:1}32%{transform:translateX(0);opacity:1}54%{transform:translateX(0);opacity:1}58%,100%{transform:translateX(26px);opacity:0}}
@keyframes pkOut{0%,57%{transform:translateX(-14px);opacity:0}63%,92%{transform:translateX(0);opacity:1}97%,100%{transform:translateX(0);opacity:0}}
@keyframes lblIn{0%,4%{opacity:0}12%,52%{opacity:1}58%,100%{opacity:0}}
@keyframes lblOut{0%,60%{opacity:0}66%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes c1{0%,2%{opacity:0}6%,31%{opacity:1}35%,100%{opacity:0}}
@keyframes c2{0%,34%{opacity:0}38%,55%{opacity:1}59%,100%{opacity:0}}
@keyframes c3{0%,59%{opacity:0}63%,93%{opacity:1}97%,100%{opacity:0}}
@keyframes decideRing{0%,36%{transform:scale(1);opacity:0}38%{opacity:.9}55%,100%{transform:scale(3.4);opacity:0}}
@keyframes decideCore{0%,36%{transform:scale(1)}44%{transform:scale(1.25)}52%,100%{transform:scale(1)}}
@media (max-width:760px){.story .lbl{display:none}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 40% 30% at 50% 88%,color-mix(in srgb,var(--red) var(--wash-red),transparent),transparent 70%)}
.hero .shell{padding-block:clamp(80px,9vw,124px) 270px}
.hero h1{margin:0 auto;max-width:1080px;font-size:clamp(34px,5.6vw,80px);line-height:1}
.hero h1 > span{display:block;text-wrap:balance}
.hl{color:var(--red);font-style:normal}
:root:not(.is-light) .hl{color:var(--accent)}
.hero .lede{margin:26px auto 0;max-width:560px;font-size:17px;line-height:1.75;color:var(--muted)}
.hero .ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px}
.rise{animation:rise .8s var(--ease) both}
.hero .rise:nth-child(2){animation-delay:.16s}.hero .rise:nth-child(3){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@media (max-width:767px){.hero .shell{padding-block:72px 250px}}
@media (max-width:430px){.hero .ctas .btn{width:100%}}

/* sections */
.section{padding-block:var(--pad)}
.head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px 100px;align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.head h2{margin-top:22px;font-size:clamp(32px,4.2vw,58px)}
.head > p{color:var(--muted);max-width:475px;font-size:17px}
@media (max-width:959px){.head{grid-template-columns:1fr}}

/* company cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{--c:var(--ink);--c-hi:var(--ink);--wash:transparent;position:relative;display:flex;flex-direction:column;overflow:hidden;overflow:clip;isolation:isolate;border:1px solid var(--line);border-radius:4px;
  background:linear-gradient(180deg,var(--wash),transparent 60%),var(--panel);box-shadow:var(--card-shadow);
  transition:transform .4s var(--ease),border-color .4s}
.card::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--c);z-index:2}
.card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c) 40%,var(--line));box-shadow:var(--card-shadow),var(--hover-shadow)}
.card.sd{--c:var(--sd);--c-hi:var(--sd-hi);--wash:var(--sd-wash)}
.card.so{--c:var(--so);--c-hi:var(--so-hi);--wash:var(--so-wash)}
.card.vl{--c:var(--vl);--c-hi:var(--vl-hi);--wash:var(--vl-wash)}
.card .body{display:flex;flex-direction:column;flex:1;padding:34px 30px 0}
.card .brand{height:32px;display:flex;align-items:center}
.card .brand svg{width:auto;max-width:100%;display:block}
.card.sd .brand svg{height:27px}.card.so .brand svg{height:25px}.card.vl .brand svg{height:26px}
.card .eyebrow{margin-top:22px;color:var(--c-hi)}
.card h3{margin-top:24px;font-size:clamp(23px,2vw,28px);line-height:1.14;letter-spacing:-.035em}
.card h3 span{color:var(--c-hi)}
.card p{margin-top:14px;margin-bottom:24px;color:var(--muted);font-size:15.5px;line-height:1.7}
.go{margin-top:auto;display:inline-flex;align-items:center;gap:18px;align-self:flex-start;padding-bottom:6px;border-bottom:1px solid color-mix(in srgb,var(--c-hi) 45%,transparent);font-family:var(--f-mono);font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:gap .3s var(--ease)}
.go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card:hover .go{gap:25px}
.go::after{content:"";position:absolute;inset:0;z-index:3}
.card .art{position:relative;height:170px;margin-top:30px;flex:none}
.card .art canvas{position:absolute;inset:0;width:100%;height:100%}
.sun{position:absolute;right:-160px;bottom:-170px;width:400px;height:400px;max-width:none;pointer-events:none;animation:sunbreathe 10s ease-in-out infinite}
:root:not(.is-light) .sun{mix-blend-mode:screen}
@keyframes sunbreathe{50%{transform:scale(1.025)}}
.ink-fill{fill:var(--ink)}
.f-grc{fill:var(--grc)}.f-red{fill:var(--red)}.s-ink{stroke:var(--ink)}.s-band-ink{stroke:var(--band-ink)}
@media (max-width:1100px){.cards{grid-template-columns:1fr;gap:16px}}
@media (max-width:767px){.card .art{height:130px}.sun{width:310px;height:310px;right:-120px;bottom:-132px}}

/* GRC42: one quiet row */
.soon{margin-top:24px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 32px;padding:22px 30px;border:1px solid var(--line);border-radius:4px;background:var(--bg-2)}
.grc{display:block;opacity:.9}
.grc svg{display:block;height:26px;width:auto}
.soon p{color:var(--muted);font-size:15px}
.soon p b{color:var(--ink);font-weight:500}
.tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--subtle);white-space:nowrap}
.tag i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
@media (max-width:767px){.soon{grid-template-columns:1fr;padding:22px 24px}}

/* vision band: inverse surface (cream in dark theme, dark in light theme), like ShamsOps' paper bands */
.band{position:relative;background:var(--band);color:var(--band-ink);overflow:hidden;isolation:isolate;border-block:1px solid var(--band-line)}
.band::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(200,32,63,.6),transparent)}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--band-grid) 1px,transparent 1px),linear-gradient(90deg,var(--band-grid) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000,transparent);mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000,transparent)}
.band .shell{padding-block:var(--pad);display:grid;justify-items:center;text-align:center;gap:30px}
.band .mark{width:30px;height:30px}
.band blockquote{max-width:980px;font-size:clamp(28px,4vw,54px);line-height:1.12}
.band blockquote span{color:var(--band-accent)}
.band .eyebrow{color:var(--band-muted)}
.band h2.eyebrow{font-family:var(--f-mono);font-size:13px;font-weight:500;letter-spacing:.115em;line-height:1.5}

/* contact */
.contact{position:relative;isolation:isolate;overflow:hidden}
.contact::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 70% 90% at 0 100%,color-mix(in srgb,var(--red) var(--wash-red),transparent),transparent 60%)}
.contact .shell{padding-block:var(--pad);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px 100px;align-items:end}
.contact h2{margin-top:22px;font-size:clamp(32px,4.6vw,64px);line-height:1.02}
.contact .side{display:grid;gap:14px;justify-items:stretch;width:100%;max-width:380px}
.contact .side > p{color:var(--muted);font-size:17px;max-width:420px}
.mail{display:flex;align-items:stretch;justify-content:space-between;max-width:100%;border:1px solid var(--line-2);background:var(--bg-2)}
.mail a{display:flex;align-items:center;padding:0 18px;font-family:var(--f-mono);font-size:15px;text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail button{border:0;border-left:1px solid var(--line-2);background:transparent;color:var(--muted);padding:0 16px;min-height:50px;font:500 14px/1 var(--f-body);cursor:pointer}
.mail button:hover{color:var(--ink)}
@media (max-width:959px){.contact .shell{grid-template-columns:1fr}}

/* footer: always dark (own tokens) */
footer{background:var(--foot);color:var(--foot-muted);border-top:1px solid var(--foot-line)}
footer .top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px 50px;padding-block:64px 48px}
footer .logo{color:var(--foot-ink)}
footer .tagline{margin-top:18px;max-width:300px;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.06em;line-height:1.7}
footer .foot-h{margin:0 0 16px;line-height:1.7;font-family:var(--f-mono);font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--foot-ink)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px}
footer ul a{text-decoration:none;transition:color .2s}
footer ul a:hover{color:var(--foot-ink)}
footer .soon-note{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8A8690;margin-left:8px}
footer .bottom{position:relative;padding-block:22px calc(22px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:12px}
footer .bottom::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);border-top:1px solid var(--foot-line)}
@media (max-width:767px){footer .top{grid-template-columns:1fr 1fr}footer .top > div:first-child{grid-column:1/-1}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.story .c1,.story .c2,.story .c3,.story .lbl.done{display:none}.story .static{display:inline}}

/* CISO questions: same rows as the flyer recto */
.qa-sec{padding-bottom:0}
.qa{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.qa li{--c:var(--ink);--c-hi:var(--ink);position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:16px 64px;padding:34px 0 38px;border-top:1px solid var(--line)}
.qa li::before{content:"";position:absolute;left:0;top:-1px;width:64px;height:3px;background:var(--c)}
.qa li.so{--c:var(--so);--c-hi:var(--so-hi)}.qa li.vl{--c:var(--vl);--c-hi:var(--vl-hi)}.qa li.sd{--c:var(--sd);--c-hi:var(--sd-hi)}
.qa h3{font-size:clamp(20px,2vw,26px);line-height:1.25;letter-spacing:-.01em;max-width:420px}
.qa p{color:var(--muted);font-size:17px;line-height:1.6;max-width:560px}
.qa p a{color:var(--c-hi);font-weight:500;text-decoration:none}
.qa p a:hover{text-decoration:underline;text-underline-offset:3px}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .qa li{--c-hi:var(--c)}}
:root[data-theme="light"] .qa li{--c-hi:var(--c)}
@media (max-width:767px){.qa li{grid-template-columns:1fr;padding:26px 0 30px}}
.band .sig{font-size:clamp(16px,1.6vw,19px);font-weight:500;color:var(--band-muted)}
.band .sig span{color:var(--band-accent)}

/* page 404 */
.nf{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:22px;text-align:center;padding:40px var(--gutter)}
.nf svg{width:44px;height:44px}
.nf h1{font-size:clamp(30px,5vw,52px)}
.nf p{color:var(--muted);max-width:420px}