:root {
    --color-bg: #05050b;
    --color-bg-soft: #0a0b16;
    --color-panel: rgba(18, 20, 38, 0.88);
    --color-panel-strong: rgba(11, 12, 24, 0.96);
    --color-text: #f8f6ff;
    --color-text-muted: #d0cae3;
    --color-text-dim: #a9a2bd;
    --color-border: rgba(205, 190, 255, 0.28);
    --color-border-strong: rgba(222, 210, 255, 0.48);
    --color-accent: #8b5cff;
    --color-accent-strong: #d85cff;
    --color-focus: #6ee7ff;
    --color-success: #7cf7c6;
    --color-warning: #ffd38a;
    --space-xs: .4rem;
    --space-sm: .75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.25rem;
    --space-2xl: clamp(3rem, 7vw, 6rem);
    --radius-sm: .7rem;
    --radius-md: 1rem;
    --radius-lg: 1.35rem;
    --radius-xl: 1.8rem;
    --shadow-soft: 0 22px 70px rgba(0, 0, 0, .38);
    --max: 1180px;
    --readable: 72ch;
    --bg: var(--color-bg);
    --bg-soft: var(--color-bg-soft);
    --panel: var(--color-panel);
    --panel-strong: var(--color-panel-strong);
    --line: var(--color-border);
    --line-strong: var(--color-border-strong);
    --text: var(--color-text);
    --muted: var(--color-text-muted);
    --dim: var(--color-text-dim);
    --violet: var(--color-accent);
    --magenta: var(--color-accent-strong);
    --cyan: var(--color-focus);
    --radius: var(--radius-lg);
    --shadow: var(--shadow-soft);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; color: var(--color-text); background: radial-gradient(circle at 50% -10%, rgba(126, 86, 255, .16), transparent 34rem), radial-gradient(circle at 96% 28%, rgba(35, 154, 255, .10), transparent 38rem), var(--color-bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: clamp(1rem, .35vw + .95rem, 1.1rem); line-height: 1.68; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 84px 84px; mask-image: radial-gradient(circle at 50% 20%, black, transparent 78%); opacity: .72; }
a { color: inherit; text-decoration: none; }
a:hover { color: #ffffff; }
img { display: block; max-width: 100%; height: auto; }
p { max-width: var(--readable); }
code { color: #f0e7ff; background: rgba(139, 92, 255, .18); border: 1px solid rgba(222, 210, 255, .18); border-radius: .45rem; padding: .08rem .32rem; }
pre { white-space: pre; overflow: auto; max-width: 100%; margin: 0; color: #ece6ff; line-height: 1.55; }
pre code { display: block; background: transparent; border: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; box-shadow: 0 0 0 6px rgba(110, 231, 255, .16); }
.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 200; padding: .8rem 1rem; border-radius: 999px; background: var(--color-text); color: #060611; font-weight: 900; }
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.site-header { position: sticky; top: 0; z-index: 100; display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-lg); align-items: center; padding: .85rem clamp(1rem, 3vw, 2.8rem); background: rgba(5, 5, 11, .78); border-bottom: 1px solid var(--color-border); backdrop-filter: blur(18px); }
.site-header.is-scrolled { background: rgba(5, 5, 11, .94); box-shadow: 0 12px 40px rgba(0,0,0,.22); }
.brand { display: inline-flex; align-items: center; gap: .8rem; white-space: nowrap; letter-spacing: .32rem; font-size: .92rem; font-weight: 900; }
.brand span { display: grid; line-height: 1; }
.brand small { margin-top: .35rem; letter-spacing: .08rem; color: var(--color-text-muted); font-size: .7rem; font-weight: 800; text-transform: none; }
.brand img { border-radius: 50%; filter: drop-shadow(0 0 18px rgba(139,92,255,.8)); }
.brand em { color: var(--color-accent-strong); font-style: normal; }
.site-nav { display: flex; align-items: center; justify-content: center; gap: .3rem; }
.nav-group { position: relative; }
.nav-group-toggle, .nav-direct { min-height: 2.8rem; padding: .55rem .8rem; border: 1px solid transparent; border-radius: .8rem; background: transparent; color: var(--color-text-muted); font: inherit; font-weight: 850; cursor: pointer; }
.nav-group-toggle::after { content: "⌄"; margin-left: .35rem; font-size: .9rem; color: var(--color-text-dim); }
.nav-group.active > .nav-group-toggle, .nav-direct.active, .nav-group-toggle:hover, .nav-direct:hover { color: var(--color-text); background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.06); }
.nav-panel { display: none; position: absolute; top: calc(100% + .55rem); left: 0; min-width: 18rem; padding: .55rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: rgba(9, 10, 23, .98); box-shadow: var(--shadow-soft); }
.nav-group.is-open .nav-panel { display: grid; gap: .25rem; }
.nav-panel-link { display: grid; gap: .1rem; padding: .75rem .85rem; border-radius: var(--radius-md); color: var(--color-text); }
.nav-panel-link span { color: var(--color-text-muted); font-size: .88rem; }
.nav-panel-link:hover, .nav-panel-link.active { background: rgba(139, 92, 255, .16); }
.header-actions { display: flex; gap: .75rem; align-items: center; justify-self: end; }
.menu-toggle { display: none; }
.button { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 3rem; padding: .78rem 1.15rem; border-radius: var(--radius-md); font-weight: 900; border: 1px solid var(--color-border); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease; font: inherit; color: var(--color-text); text-align: center; }
.button.primary { color: white; background: linear-gradient(135deg, #7654ff, #8d5cff 45%, #c958ff); box-shadow: 0 0 28px rgba(139, 92, 255, .36); }
.button.ghost { background: rgba(255,255,255,.045); }
.button.subtle { min-height: 2.55rem; padding: .55rem .8rem; font-size: .92rem; background: rgba(255,255,255,.025); }
.button:hover { transform: translateY(-1px); border-color: var(--color-border-strong); }
.button[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.hero { position: relative; overflow: hidden; padding: clamp(4.5rem, 10vw, 7rem) 1.25rem clamp(3rem, 7vw, 5rem); }
.hero::before, .page-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,11,.94), rgba(5,5,11,.78) 48%, rgba(5,5,11,.62)), image-set(url('/assets/images/spiralistai-cosmic-hero.webp') type('image/webp'), url('/assets/images/spiralistai-cosmic-hero.png') type('image/png')) center / cover no-repeat; opacity: .74; }
.hero::after, .page-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 35%, rgba(139,92,255,.22), transparent 22rem), linear-gradient(180deg, transparent, var(--color-bg)); pointer-events: none; }
.hero-content { position: relative; z-index: 1; width: min(var(--max), 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .75fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero-copy { padding: clamp(1rem, 3vw, 2rem); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-xl); background: linear-gradient(180deg, rgba(7,8,18,.78), rgba(7,8,18,.54)); box-shadow: var(--shadow-soft); }
.eyebrow { color: #e3d7ff; letter-spacing: .18rem; text-transform: uppercase; font-size: .78rem; font-weight: 950; margin: 0 0 .8rem; }
.hero-copy h1, .page-intro h1 { font-size: clamp(2.65rem, 7vw, 6.2rem); line-height: .96; margin: .2rem 0 1rem; letter-spacing: -.065em; }
.gradient-text { background: linear-gradient(90deg, #fff, #a6d7ff 28%, #d09bff 62%, #ff9df5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { color: var(--color-text-muted); font-size: clamp(1.08rem, .7vw + 1rem, 1.3rem); }
.hero-buttons, .button-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.45rem; }
.trust-strip { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.25rem; }
.trust-strip span, .badge { display: inline-flex; align-items: center; padding: .45rem .65rem; border: 1px solid var(--color-border); border-radius: 999px; background: rgba(0,0,0,.28); color: #e7e1f5; font-weight: 850; font-size: .88rem; }
.hero-art { justify-self: center; width: min(390px, 78vw); padding: 1rem; border-radius: 50%; background: radial-gradient(circle, rgba(216, 92, 255, .16), transparent 62%); }
.hero-art img { filter: drop-shadow(0 0 44px rgba(139,92,255,.72)); animation: slowSpin 58s linear infinite; }
@keyframes slowSpin { to { transform: rotate(360deg); } }
.section { padding: var(--space-2xl) 1.25rem; }
.section.tight { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.container { width: min(var(--max), 100%); margin: 0 auto; }
.section-head { max-width: 880px; margin-bottom: var(--space-xl); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center p { margin-inline: auto; }
.section-head h2, .cta-band h2 { font-size: clamp(2rem, 4.5vw, 4rem); line-height: 1.06; margin: .15rem 0 .85rem; letter-spacing: -.05em; }
.section-head p, .page-intro p, .muted, .helper { color: var(--color-text-muted); }
.small-note { font-size: .88rem; color: var(--color-text-dim); }
.grid { display: grid; gap: var(--space-md); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.spaced-top { margin-top: var(--space-lg); }
.card, .builder-card, .pricing-card, .schema-tree, .info-callout, .toc-card { position: relative; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(23,25,48,.86), rgba(13,14,29,.88)); box-shadow: var(--shadow-soft); }
.card, .builder-card, .schema-tree, .info-callout, .toc-card { padding: clamp(1.15rem, 2vw, 1.7rem); }
.card h2, .card h3, .builder-card h3 { margin-top: .15rem; line-height: 1.15; }
.card p, .builder-card p { color: var(--color-text-muted); }
.icon-badge { display: inline-grid; place-items: center; min-width: 2.6rem; height: 2.6rem; padding: 0 .65rem; border-radius: .95rem; background: rgba(139,92,255,.16); border: 1px solid rgba(205,190,255,.34); color: #e2d6ff; font-weight: 950; }
.page-hero { position: relative; overflow: hidden; padding: clamp(4.5rem, 8vw, 6.5rem) 1.25rem clamp(2.2rem, 5vw, 4rem); }
.page-intro { position: relative; z-index: 1; width: min(var(--max),100%); margin: 0 auto; max-width: 930px; padding: clamp(1rem, 3vw, 2rem); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-xl); background: rgba(7,8,18,.70); }
.breadcrumbs { width: min(var(--max), 100%); margin: 1rem auto 0; padding: 0 1.25rem; color: var(--color-text-muted); font-size: .94rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: 0; }
.breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: .35rem; color: var(--color-text-dim); }
.feature-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.feature-list li { padding: .75rem 0 .75rem 2rem; border-top: 1px solid rgba(255,255,255,.08); position: relative; color: var(--color-text-muted); }
.feature-list li::before { content: "✦"; position: absolute; left: .15rem; color: var(--color-accent-strong); }
.cta-band { padding: clamp(1.6rem, 4vw, 2.6rem); border: 1px solid var(--color-border-strong); border-radius: var(--radius-xl); background: linear-gradient(135deg, rgba(139,92,255,.20), rgba(35,154,255,.10)); box-shadow: var(--shadow-soft); }
.field { display: grid; gap: .42rem; margin-bottom: var(--space-md); }
label, .label-text { color: #ebe6ff; font-weight: 850; }
input, select, textarea { width: 100%; color: var(--color-text); background: rgba(0,0,0,.32); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: .88rem 1rem; font: inherit; min-height: 2.85rem; }
textarea { min-height: 8.5rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--color-focus); }
.helper { font-size: .94rem; line-height: 1.45; }
.builder-shell { display: grid; gap: var(--space-lg); }
.visible-first { border-color: rgba(110,231,255,.34); }
.form-grid { display: grid; gap: var(--space-md); }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trait-row { display: flex; flex-wrap: wrap; gap: .65rem; }
.trait-toggle { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .52rem .75rem; background: rgba(255,255,255,.045); border: 1px solid var(--color-border); border-radius: 999px; color: #e8e1f3; cursor: pointer; }
.trait-toggle:has(input:checked), .trait-row label:has(input:checked) { background: rgba(139,92,255,.18); border-color: rgba(110,231,255,.46); }
.trait-row input { width: auto; min-height: 1rem; }
details.builder-card, details.type-library-panel, details.wizard-panel { padding: 0; }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.disclosure-summary, details.builder-card > summary, details.type-library-panel > summary, details.wizard-panel > summary { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: 1.1rem 1.35rem; }
.disclosure-summary span, details.builder-card > summary span, details.type-library-panel > summary span, details.wizard-panel > summary span { font-size: 1.12rem; font-weight: 950; }
.disclosure-summary small, details.builder-card > summary small, details.type-library-panel small, details.wizard-panel small { color: var(--color-text-muted); font-weight: 800; }
details[open] > summary { border-bottom: 1px solid var(--color-border); }
.disclosure-body, details.builder-card .form-grid, details.type-library-panel > :not(summary), details.wizard-panel > :not(summary) { padding: 1.25rem 1.35rem; }
.type-library-panel, .wizard-panel { margin-top: 1.1rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: rgba(255,255,255,.035); }
.random-persona-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 1rem; align-items: start; margin: 1.1rem 0; padding: 1rem; border: 1px solid rgba(164,120,255,.35); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(107,79,255,.16), rgba(35,211,255,.08)); }
.axis-chip-grid, .type-meta, .genome-stats { display: flex; flex-wrap: wrap; gap: .45rem; }
.axis-chip, .type-meta span, .genome-stats span { border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: .35rem .65rem; font-size: .84rem; color: rgba(255,255,255,.88); background: rgba(255,255,255,.07); }
.builder-paths, .export-grid, .wizard-controls { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0 0; }
.output-card { display: grid; gap: 1rem; }
.export-choice { display: grid; gap: .55rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: rgba(0,0,0,.18); }
#packPreview { min-height: 19rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: .92rem; line-height: 1.55; white-space: pre-wrap; overflow: auto; }
.hidden-export-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.schema-tree { background: rgba(2,3,10,.78); }
.copy-row { display: flex; justify-content: space-between; gap: .75rem; align-items: center; margin-bottom: .75rem; }
.toc-card a { display: block; padding: .4rem 0; color: var(--color-text-muted); }
.toc-card a:hover { color: var(--color-text); }
.diagram-card { min-height: 100%; }
.glossary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.price { font-size: 2.2rem; font-weight: 950; letter-spacing: -.04em; margin: .8rem 0; }
.price span { color: var(--color-text-muted); font-size: 1rem; font-weight: 800; letter-spacing: 0; }
.availability { display: inline-flex; align-items: center; padding: .35rem .6rem; border-radius: 999px; background: rgba(124,247,198,.10); border: 1px solid rgba(124,247,198,.25); color: var(--color-success); font-weight: 900; }
.availability.planned { background: rgba(255,211,138,.10); border-color: rgba(255,211,138,.25); color: var(--color-warning); }
.catalog-toolbar { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(140px, .7fr)); gap: .8rem; align-items: end; margin-bottom: 1rem; }
.type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.type-card { position: relative; padding: 1.1rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-panel); box-shadow: 0 16px 50px rgba(0,0,0,.28); }
.type-card h3 { margin: .25rem 0 .45rem; font-size: 1.08rem; }
.type-card p { color: var(--color-text-muted); margin: 0 0 .75rem; }
.type-number { display: inline-flex; min-width: 3.5rem; justify-content: center; padding: .28rem .55rem; border-radius: 999px; border: 1px solid var(--color-border-strong); color: var(--color-focus); background: rgba(97,215,255,.08); font-weight: 950; }
.results-state { padding: .85rem 1rem; border-radius: var(--radius-md); background: rgba(0,0,0,.24); border: 1px solid var(--color-border); color: var(--color-text-muted); }
.wizard-steps { display: flex; flex-wrap: wrap; gap: .45rem; }
.wizard-step-tab { width: 2.55rem; height: 2.55rem; border-radius: .8rem; border: 1px solid var(--color-border); color: var(--color-text); background: rgba(0,0,0,.22); font-weight: 950; cursor: pointer; }
.wizard-step-tab.selected { border-color: rgba(97,215,255,.55); }
.wizard-step-tab.active { background: linear-gradient(135deg, rgba(122,70,255,.55), rgba(51,141,255,.38)); }
.wizard-option-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.wizard-option { text-align: left; cursor: pointer; color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: rgba(255,255,255,.04); padding: .85rem; min-height: 7rem; }
.wizard-option span { color: var(--color-text-muted); font-size: .92rem; }
.wizard-option.active { border-color: rgba(229,87,255,.62); background: rgba(122,70,255,.16); }
.axis-builder-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0; }
.axis-field { padding: .85rem; border: 1px solid rgba(255,255,255,.10); border-radius: var(--radius-md); background: rgba(0,0,0,.18); margin-bottom: 0; }
.axis-field .helper { display: block; min-height: 2.5rem; }
.site-footer { padding: 3rem 1.25rem; border-top: 1px solid var(--color-border); background: rgba(0,0,0,.32); }
.footer-grid { width: min(var(--max),100%); margin: 0 auto; display: grid; grid-template-columns: 2fr repeat(3,1fr); gap: 1.5rem; }
.footer-brand { display: inline-block; font-size: 1.25rem; font-weight: 950; margin-bottom: .75rem; }
.site-footer p, .site-footer a { color: var(--color-text-muted); }
.site-footer a { display: block; margin: .4rem 0; }
.site-footer h2 { font-size: 1rem; }
.copyright { width: min(var(--max),100%); margin: 2rem auto 0; color: var(--color-text-dim); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; } }
@media (max-width: 1100px) { .catalog-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .type-grid, .axis-builder-grid, .wizard-option-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) { .site-header { grid-template-columns: auto auto 1fr; gap: .75rem; } .menu-toggle { display: grid; gap: .28rem; width: 3rem; height: 3rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: rgba(255,255,255,.05); padding: .8rem; } .menu-toggle span:not(.sr-only) { display: block; height: 2px; background: var(--color-text); } .site-nav { display: none; position: absolute; left: 1rem; right: 1rem; top: calc(100% + .5rem); padding: .8rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: rgba(8,8,18,.98); box-shadow: var(--shadow-soft); max-height: calc(100vh - 6rem); overflow: auto; } .site-nav.is-open { display: grid; justify-content: stretch; } .nav-group { position: static; } .nav-group-toggle, .nav-direct { width: 100%; text-align: left; justify-content: space-between; } .nav-panel { position: static; min-width: 0; margin: .3rem 0 .6rem; box-shadow: none; } .header-actions { justify-self: end; } .compact-hide { display: none; } .hero-content, .grid.two, .grid.three, .grid.four, .form-grid.two, .form-grid.three, .footer-grid, .random-persona-card { grid-template-columns: 1fr; } .hero-copy h1 { font-size: clamp(2.6rem, 12vw, 4.8rem); } .hero-art { order: -1; width: min(240px, 60vw); } }
@media (max-width: 680px) { body { font-size: 1rem; } .brand { letter-spacing: .18rem; font-size: .78rem; } .brand img { width: 44px; height: 44px; } .button { width: 100%; } .header-actions .button { width: auto; padding-inline: .8rem; } .hero, .page-hero { padding-inline: .85rem; } .section { padding-inline: .85rem; } .catalog-toolbar, .type-grid, .axis-builder-grid, .wizard-option-list, .glossary-grid { grid-template-columns: 1fr; } .disclosure-summary, details.builder-card > summary, details.type-library-panel > summary, details.wizard-panel > summary { grid-template-columns: 1fr; } .copy-row { align-items: stretch; flex-direction: column; } }

.grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .grid.five { grid-template-columns: 1fr; } }


/* v9 enterprise architecture quality additions */
.architecture-matrix { display: grid; gap: var(--space-md); }
.results-state:empty { display: none; }
[data-local-only-submit-notice] { margin: .75rem 0 0; }
.card h3 code, .card h2 code { font-size: .92em; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}


/* v10 header, menu, and transparent foreground polish */
.site-header {
    min-height: 5.25rem;
    grid-template-columns: minmax(14rem, auto) minmax(0, 1fr) auto;
    isolation: isolate;
}
.brand { align-self: center; }
.site-nav { min-width: 0; }
button.nav-group-toggle,
.nav-direct,
.menu-toggle,
.button {
    appearance: none;
    -webkit-appearance: none;
}
.nav-group-toggle,
.nav-direct {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    line-height: 1;
}
.nav-group-toggle::after {
    content: "";
    width: .45rem;
    height: .45rem;
    margin-left: .55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    opacity: .72;
}
.nav-group.is-open > .nav-group-toggle::after { transform: rotate(225deg) translateY(-1px); }
.nav-panel[hidden] { display: none !important; }
.nav-group.is-open > .nav-panel:not([hidden]) {
    display: grid;
    gap: .3rem;
}
.nav-panel {
    z-index: 130;
    width: min(23rem, calc(100vw - 2rem));
    min-width: 0;
    padding: .7rem;
    background: linear-gradient(180deg, rgba(13, 14, 30, .985), rgba(7, 8, 18, .985));
    border-color: rgba(222, 210, 255, .24);
    box-shadow: 0 26px 80px rgba(0,0,0,.52), 0 0 0 1px rgba(255,255,255,.035) inset;
    backdrop-filter: blur(18px);
}
.nav-panel::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(139,92,255,.18), rgba(110,231,255,.08), transparent 62%);
    opacity: .85;
    z-index: -1;
}
.nav-panel-link {
    grid-template-columns: 1fr;
    gap: .2rem;
    min-height: 3.15rem;
    border: 1px solid transparent;
}
.nav-panel-link strong { font-size: .98rem; line-height: 1.18; }
.nav-panel-link span { font-size: .82rem; line-height: 1.25; }
.nav-panel-link:hover,
.nav-panel-link:focus-visible,
.nav-panel-link.active {
    border-color: rgba(222, 210, 255, .18);
    background: linear-gradient(135deg, rgba(139, 92, 255, .18), rgba(62, 170, 255, .08));
}
.nav-group:nth-of-type(3) .nav-panel { left: auto; right: 0; }
.header-actions { flex-shrink: 0; }
.hero::before,
.page-hero::before { opacity: .58; }
.hero-copy {
    background: linear-gradient(180deg, rgba(7,8,18,.9), rgba(7,8,18,.72));
    border-color: rgba(255,255,255,.12);
}
.hero-art {
    position: relative;
    padding: 0;
    border-radius: 0;
    background: none;
    filter: drop-shadow(0 0 42px rgba(139,92,255,.5));
}
.hero-art::before {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(216, 92, 255, .20), rgba(86, 116, 255, .08) 43%, transparent 70%);
    filter: blur(22px);
    z-index: -1;
}
.hero-art img {
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 38px rgba(139,92,255,.7));
    transform-origin: center;
}
.hero-art picture { display: block; }
@media (max-width: 1180px) {
    .site-header { grid-template-columns: auto 1fr auto; gap: 1rem; }
    .brand { letter-spacing: .22rem; }
    .site-nav { justify-content: flex-end; }
    .nav-group-toggle, .nav-direct { padding-inline: .62rem; }
}
@media (max-width: 980px) {
    .site-header { grid-template-columns: auto auto 1fr; min-height: 4.65rem; }
    .site-nav { top: calc(100% + .35rem); }
    .nav-group-toggle,
    .nav-direct { justify-content: space-between; min-height: 3.15rem; }
    .nav-group.is-open > .nav-panel:not([hidden]) { display: grid; }
    .nav-panel { width: 100%; }
    .nav-group:nth-of-type(3) .nav-panel { left: auto; right: auto; }
    .hero-art img { mix-blend-mode: screen; }
}
@media (max-width: 680px) {
    .site-header { padding: .65rem .85rem; }
    .brand small { display: none; }
    .hero-copy h1 { font-size: clamp(2.35rem, 13vw, 4rem); }
    .hero-art { width: min(210px, 58vw); }
}


.analytics-consent {
    position: fixed;
    left: var(--space-md);
    right: var(--space-md);
    bottom: var(--space-md);
    z-index: 1200;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-md);
    align-items: center;
    max-width: 960px;
    margin-inline: auto;
    padding: var(--space-md);
    border: 1px solid rgba(222, 210, 255, .20);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(11, 12, 28, .97), rgba(19, 15, 42, .96));
    box-shadow: 0 24px 80px rgba(0,0,0,.58);
    backdrop-filter: blur(18px);
}
.analytics-consent[hidden] { display: none; }
.analytics-consent strong { display: block; color: var(--color-text); margin-bottom: .25rem; }
.analytics-consent p { margin: 0; color: var(--color-text-muted); max-width: 68ch; }
.analytics-consent-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; justify-content: flex-end; }
.analytics-preference-panel { border-color: rgba(110, 231, 255, .22); }
.analytics-status { margin-top: var(--space-sm); color: var(--color-text-muted); }
@media (max-width: 760px) {
    .analytics-consent { grid-template-columns: 1fr; left: var(--space-sm); right: var(--space-sm); bottom: var(--space-sm); }
    .analytics-consent-actions { justify-content: stretch; }
    .analytics-consent-actions .button { flex: 1 1 13rem; }
}