/* Hegetic site, dark mode: html[data-mode="dark"] (switch in the top bar, site.js; the choice is kept in localStorage "hs-mode").
Not used by the brand options (site/b/), which have their own fixed looks. */
/* The same brand at night. --ink and --plaster keep their brand meaning (the dark sections, the ink buttons and the
sector cards already speak it); the surface tokens around them turn: ground ink, raised #161A22 / #222833,
text plaster, secondary #B7BCC4, labels light Aegean, hairlines plaster at 12 %. Ember stays the one accent.
Everything is scoped under html[data-mode="dark"]:not([data-brand]) (native CSS nesting). */
html[data-mode="dark"]:not([data-brand]) {
--paper: #161A22;
--line: rgba(237, 238, 234, .12);
--stone-text: #B7BCC4;
--aegean: #8DB7D3;
--grid: rgba(141, 183, 211, .075);
--dk-0: #0E1117; --dk-1: #161A22; --dk-2: #222833; --dk-deep: #090B0F;
--dk-text: #EDEEEA; --dk-2nd: #B7BCC4; --dk-3rd: #9EA5AF; --dk-line: rgba(237, 238, 234, .12); --dk-line-2: rgba(237, 238, 234, .22);
color-scheme: dark;
background: var(--dk-0);
body { background: var(--dk-0); color: var(--dk-text); }
body.is-dark { background: var(--dk-0); color: var(--dk-text); }
::selection { background: rgba(141, 183, 211, .32); color: var(--dk-text); }
:focus-visible { outline-color: #8DB7D3; }
.hx-soft { color: var(--dk-3rd); }
.hx-lead { color: var(--dk-2nd); }
.hx-label { color: #8DB7D3; }
/* ---------- buttons ---------- */
.hx-btn--ink { background: var(--dk-text); color: var(--dk-0); }
.hx-btn--ink:hover { background: #fff; }
.hx-btn--ghost { border-color: var(--dk-line-2); color: var(--dk-text); background: rgba(22, 26, 34, .6); }
.hx-btn--ghost:hover { border-color: var(--dk-text); }
.hx-press:focus-visible .hx-press__ring { border-color: var(--dk-text); }
.hx-press::before { box-shadow: inset 0 2px 1px rgba(255, 255, 255, .45), inset 0 -10px 18px rgba(120, 30, 0, .25), 0 9px 0 #A3300B, 0 22px 40px -8px rgba(255, 90, 43, .32); }
.hx-press:hover::before { box-shadow: inset 0 2px 1px rgba(255, 255, 255, .5), inset 0 -10px 18px rgba(120, 30, 0, .25), 0 11px 0 #A3300B, 0 28px 48px -8px rgba(255, 90, 43, .4); }
.hx-press:active::before { box-shadow: inset 0 2px 1px rgba(255, 255, 255, .3), inset 0 -6px 14px rgba(120, 30, 0, .3), 0 2px 0 #A3300B, 0 8px 18px -6px rgba(255, 90, 43, .35); }
/* ---------- top bar ---------- */
.hx-top { color: var(--dk-text); }
.hx-top.is-scrolled { background: rgba(14, 17, 23, .8); box-shadow: 0 1px 0 var(--dk-line); }
.hx-nav a:hover { background: rgba(237, 238, 234, .08); }
.hs-lang { border-color: var(--dk-line); background: rgba(22, 26, 34, .72); }
.hs-lang button[aria-pressed="true"] { background: var(--dk-text); color: var(--dk-0); }
.hx-mode { border-color: var(--dk-line); background: rgba(22, 26, 34, .72); color: var(--dk-text); }
.hx-mode:hover { border-color: rgba(237, 238, 234, .5); }
.hx-mode__moon { color: #8DB7D3; }
/* ---------- hero: the build canvas at night ---------- */
.hx-canvas { background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); }
.hx-hero::before { content: ""; position: absolute; left: 50%; top: 42%; z-index: -1; width: min(1100px, 120vw); height: 640px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(47, 93, 124, .22), transparent); pointer-events: none; }
.hx-kicker { border-color: rgba(141, 183, 211, .28); background: rgba(22, 26, 34, .72); }
.hx-hero__pre { color: var(--dk-2nd); }
.hx-hero__sub { color: var(--dk-2nd); }
.hx-hero__sub em { color: var(--dk-text); }
.hx-hero__foot { color: var(--dk-3rd); }
.hx-sel__box { border-color: #8DB7D3; }
.hx-sel__box b { background: var(--dk-0); border-color: #8DB7D3; }
.hx-sel__tag { background: #8DB7D3; color: var(--dk-0); }
.hx-card { background: rgba(22, 26, 34, .9); border-color: var(--dk-line); box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 24px 50px -20px rgba(0, 0, 0, .7); }
.hx-card__head { color: var(--dk-3rd); }
.hx-chip { background: var(--dk-1); border-color: var(--dk-line); color: var(--dk-text); }
.hx-chip--float { box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .8); }
.hx-chip--wa { background: rgba(63, 166, 114, .16); border-color: rgba(63, 166, 114, .34); color: #7FD9A6; }
.hx-chip--ok { color: #7FD9A6; }
.hx-msg--in { background: var(--dk-2); color: var(--dk-text); }
.hx-msg--out { background: var(--dk-text); color: var(--dk-0); }
.hx-msg--out .hx-msg__who { color: #5D646F; }
.hx-typing i { background: var(--dk-3rd); }
.hx-cursor--agent, .hx-cursor--you { --c: #EDEEEA; }
.hx-cursor svg { stroke: var(--dk-0); }
.hx-cursor em { color: var(--dk-0); }
/* ---------- promises strip ---------- */
.hx-proof { background: rgba(22, 26, 34, .55); }
.hx-proof li { color: var(--dk-2nd); }
/* ---------- websites showcase ---------- */
.hx-show__tabs button { color: var(--dk-text); border-color: var(--dk-line); background: rgba(22, 26, 34, .45); }
.hx-show__tabs span { color: var(--dk-3rd); }
.hx-show__tabs button:hover { border-color: rgba(237, 238, 234, .4); }
.hx-show__tabs button[aria-selected="true"] { background: var(--dk-text); border-color: var(--dk-text); color: var(--dk-0); }
.hx-show__tabs button[aria-selected="true"] span { color: #5D646F; }
.hx-show__frame { background: var(--dk-1); box-shadow: 0 0 0 1px var(--dk-line), 0 60px 100px -50px rgba(0, 0, 0, .9); }
.hx-show__bar { background: #1C212A; border-bottom: 1px solid rgba(237, 238, 234, .06); }
.hx-show__url { background: var(--dk-0); color: var(--dk-3rd); }
.hx-show__more a { color: var(--dk-text); }
/* ---------- manifesto: words light up out of the dark ---------- */
.hx-manifesto__text .w { color: rgba(237, 238, 234, .14); }
.hx-manifesto__text .w.on { color: var(--dk-text); }
.hx-manifesto__note { color: var(--dk-2nd); }
/* ---------- the four parts: raised dark cards (titles and numbers stay ember) ---------- */
.hx-part { background: var(--dk-1); box-shadow: inset 0 0 0 1px var(--dk-line); }
.hx-part:hover { box-shadow: inset 0 0 0 1px rgba(237, 238, 234, .2), 0 30px 50px -30px rgba(0, 0, 0, .9); }
.hx-part > p { color: var(--dk-2nd); }
.hx-viz-site span { background: var(--dk-0); }
.hx-meter { background: var(--dk-0); }
/* ---------- control panel (components/control) ---------- */
.hx-ctl { --c-acc: #8DB7D3; --c-auto: #3FB57D; --c-draft: #E0A23C; }
.hx-ctl__static { background: var(--dk-1); border-color: var(--dk-line); }
.hx-ctl__panel { background: var(--dk-1); border-color: var(--dk-line); color: var(--dk-text); box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 40px 80px -40px rgba(0, 0, 0, .85); }
.hx-ctl__row.is-sel { background: rgba(141, 183, 211, .08); }
.hx-seg { background: var(--dk-0); box-shadow: inset 0 0 0 1px rgba(237, 238, 234, .06); }
.hx-seg button { color: var(--dk-3rd); }
.hx-seg button[aria-checked="true"] { color: var(--dk-text); }
.hx-seg__thumb { background: #2A313D; box-shadow: 0 1px 2px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06); }
.hx-ctl__view { background: linear-gradient(180deg, #12161D, #0F1218); }
.hx-ctl__head { background: var(--dk-1); }
.hx-ctl__av { background: rgba(141, 183, 211, .16); color: #8DB7D3; }
.hx-ctl__msg--in { background: var(--dk-2); border-color: var(--dk-line); }
.hx-ctl__msg--out { background: var(--dk-text); color: var(--dk-0); }
.hx-ctl__msg--draft { background: var(--dk-2); color: var(--dk-text); }
.hx-ctl__tag { color: #E7B062; }
.hx-ctl__approve { color: var(--dk-0); }
.hx-ctl__note { background: var(--dk-2); color: var(--dk-2nd); }
.hx-ctl__note--you { background: color-mix(in srgb, var(--ember) 18%, var(--dk-1)); color: var(--dk-text); }
.hx-ctl__out.is-typing::before { background: var(--dk-2) radial-gradient(circle, #8A919C 2.5px, transparent 3px) 0 50% / 12px 100% repeat-x; background-origin: content-box; }
.hx-ctl__foot { background: color-mix(in srgb, var(--c-auto) 12%, var(--dk-1)); }
.hx-ctl__foot[data-m="draft"] { background: color-mix(in srgb, var(--c-draft) 12%, var(--dk-1)); }
.hx-ctl__foot[data-m="off"] { background: var(--dk-1); }
.hx-ctl__foot.is-taken { background: color-mix(in srgb, var(--ember) 14%, var(--dk-1)); }
.hx-ctl__take { border-color: var(--dk-line-2); background: var(--dk-2); color: var(--dk-text); }
.hx-ctl__take:hover { border-color: var(--dk-text); }
/* ---------- sectors: each card keeps its world; it just needs an edge and a deeper shadow on the night ground ---------- */
.hx-sc { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s-light) 16%, transparent), 0 -1px 0 color-mix(in srgb, var(--s-light) 22%, transparent) inset, 0 40px 80px -40px rgba(0, 0, 0, .9); }
.hx-sc[data-sector="shield"] { background: var(--dk-1); }
/* ---------- how it works: already dark; the page just goes a shade deeper while it runs ---------- */
body.is-dark { background: var(--dk-deep); }
body.is-dark .hx-top.is-scrolled { background: rgba(9, 11, 15, .82); }
.hx-journey li::before { background: var(--dk-deep); }
/* ---------- how we build ---------- */
.hx-code { background: var(--dk-1); box-shadow: 0 0 0 1px var(--dk-line), 0 40px 80px -40px rgba(0, 0, 0, .9); }
.hx-code figcaption { border-bottom-color: var(--dk-line); background: #1A1F28; }
.hx-code__dots i { background: #2E3542; }
.hx-code__lines li > i { color: #5A6270; }
.hx-ship__rail b { background: var(--dk-text); }
.hx-ship__n { background: var(--dk-1); color: var(--dk-2nd); }
.hx-ship__step.is-on .hx-ship__n { background: var(--dk-text); border-color: var(--dk-text); color: var(--dk-0); }
.hx-ship__step code { background: var(--dk-1); color: var(--dk-text); }
.hx-ship__step--merge code { background: var(--dk-text); color: var(--dk-0); border-color: var(--dk-text); }
.hx-way { background: var(--dk-1); border-color: var(--dk-line); }
.hx-way__mark { background: var(--dk-2); box-shadow: inset 0 0 0 1px var(--dk-line); color: var(--dk-text); }
/* the tool-logo bubbles (assets/bubbles.js): dark glass spheres, logos in plaster, ember on hover */
.hx-bubbles { background: radial-gradient(120% 90% at 50% 100%, rgba(47, 93, 124, .2), transparent 70%), rgba(22, 26, 34, .35); border-color: var(--dk-line); }
.hx-bubbles__hint { color: var(--dk-3rd); }
.hx-bubble { background: radial-gradient(circle at 32% 28%, #3A4250, #1E232C 58%, #12161C); border-color: rgba(237, 238, 234, .14); color: var(--dk-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -6px 12px rgba(0, 0, 0, .3), 0 12px 24px -12px rgba(0, 0, 0, .8); }
.hx-bubble:hover { border-color: var(--ember); color: var(--ember); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -6px 12px rgba(0, 0, 0, .3), 0 14px 28px -12px rgba(255, 90, 43, .5); }
.hx-bubble.is-held { border-color: var(--ember); }
/* ---------- questions ---------- */
.hs-qs details p { color: var(--dk-2nd); }
.hs-qs summary:hover { color: #A9CBE2; }
/* ---------- made to measure ---------- */
.hx-yours__pad { color: var(--dk-text); background-image: linear-gradient(rgba(237, 238, 234, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(237, 238, 234, .06) 1px, transparent 1px); background-color: rgba(22, 26, 34, .4); }
.hx-yours__id, .hx-yours__txt { background: var(--dk-1); box-shadow: inset 0 0 0 1px var(--dk-line); color: var(--dk-text); }
.hx-yours__plus { background: var(--dk-1); border-color: #8DB7D3; }
.hx-yours__plus::before, .hx-yours__plus::after { background: var(--dk-text); }
/* ---------- footer: a deeper sheet; the contact card is a raised dark card with dark fields ---------- */
.hx-foot { background: var(--dk-deep); box-shadow: inset 0 1px 0 var(--dk-line); }
.hx-fcard { background: var(--dk-1); color: var(--dk-text); box-shadow: inset 0 0 0 1px var(--dk-line), 0 40px 80px -40px rgba(0, 0, 0, .9); }
.hx-fcard__l, .hx-fcard__r { background: #1B2029; border-color: rgba(237, 238, 234, .07); }
.hx-fchip { background: var(--dk-2); box-shadow: inset 0 0 0 1px var(--dk-line); color: #8DB7D3; }
.hx-fcard__note { color: var(--dk-2nd); }
.hx-next li { color: var(--dk-2nd); }
.hx-next b { color: var(--dk-text); }
.hx-field { background: var(--dk-0); border-color: var(--dk-line); }
.hx-field:focus-within { border-color: #8DB7D3; box-shadow: 0 0 0 3px rgba(141, 183, 211, .18); }
.hx-field.is-bad { border-color: var(--ember); }
.hx-field span { color: var(--dk-text); }
.hx-field input, .hx-field textarea { color: var(--dk-text); caret-color: var(--ember); }
.hx-field input::placeholder, .hx-field textarea::placeholder { color: #7D8491; }
.hx-field input:-webkit-autofill { -webkit-text-fill-color: var(--dk-text); -webkit-box-shadow: 0 0 0 40px var(--dk-0) inset; }
.hx-form__fine { color: var(--dk-3rd); }
.hx-form__status { color: var(--dk-2nd); }
.hx-form__status.is-ok { color: #7FD9A6; }
.hx-form__status.is-err { color: #FF8A66; }
.hx-chiplogo { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 6px rgba(9, 11, 15, .9), 0 0 50px rgba(47, 93, 124, .55); }
.hx-chiplogo:hover, .hx-chiplogo:focus-visible { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 6px rgba(9, 11, 15, .9), 0 0 70px rgba(255, 90, 43, .45); }
.hx-pill { background: var(--dk-1); }
.hx-foot__base { color: #8A919C; }
@media (prefers-reduced-motion: reduce) {
.hx-manifesto__text .w { color: var(--dk-text); }
}
}