:root {
    --color-bg: #090613;
    --color-surface: #110d20;
    --color-surface-elevated: #17112a;
    --color-primary: #8748ff;
    --color-primary-bright: #b686ff;
    --color-secondary: #4b237e;
    --color-accent: #72e6ff;
    --color-text: #f4f1ff;
    --color-text-muted: #b6abc9;
    --color-border: rgba(191, 160, 255, .22);
    --glow-primary: 0 0 42px rgba(137, 72, 255, .32);
    --font-display: "Syne", sans-serif;
    --font-body: "Space Grotesk", sans-serif;
    --font-mono: "DM Mono", monospace;
    --space: clamp(1.1rem, 3vw, 3rem);
    --ease: cubic-bezier(.2, .8, .2, 1);
    --duration: 650ms;
    --z-header: 20
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    overflow-x: hidden;
    line-height: 1.5
}

.shell {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 40px);
}

.noise,
.site-grid {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1
}

.noise {
    opacity: .055;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")
}

.site-grid {
    background: linear-gradient(rgba(164, 119, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(164, 119, 255, .035) 1px, transparent 1px);
    background-size: 62px 62px;
    mask-image: linear-gradient(to bottom, #000, transparent 75%)
}

a {
    color: inherit;
    text-decoration: none
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    background: var(--color-primary);
    color: #fff;
    padding: .75rem;
    z-index: 40
}

.skip-link:focus {
    top: 1rem
}

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: var(--z-header);
    transition: background .3s var(--ease), border-color .3s
}

.site-header.is-scrolled {
    background: rgba(9, 6, 19, .86);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--color-border)
}

.nav {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .72rem;
    font: 700 1rem/1 var(--font-display);
    letter-spacing: .08em
}

.brand small {
    display: block;
    font: 500 .55rem/1.4 var(--font-mono);
    letter-spacing: .26em;
    color: var(--color-primary-bright);
    margin-top: .25rem
}

.brand-mark {
    color: var(--color-primary-bright);
    font-size: 1.45rem;
    letter-spacing: -.22em;
    text-shadow: var(--glow-primary)
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.8rem;
    font: 500 .76rem var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-muted)
}

.nav-links>a:not(.nav-cta) {
    transition: color .2s
}

.nav-links>a:not(.nav-cta):hover {
    color: var(--color-primary-bright)
}

.nav-cta {
    border: 1px solid var(--color-border);
    padding: .7rem .85rem;
    color: var(--color-text);
    display: flex;
    gap: .45rem;
    align-items: center
}

.nav-cta svg {
    width: 14px
}

.menu-toggle {
    display: none
}

.hero {
    min-height: 760px;
    height: min(100vh, 960px);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center
}

.hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 76% 35%, rgba(123, 70, 255, .22), transparent 27%), linear-gradient(90deg, var(--color-bg) 8%, rgba(9, 6, 19, .78) 44%, rgba(9, 6, 19, .08) 76%, var(--color-bg) 100%);
    z-index: -1
}

.hero:after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 28%;
    background: linear-gradient(transparent, var(--color-bg));
    z-index: -1
}

.hero-art {
    position: absolute;
    inset: 0 -13% 0 22%;
    z-index: -2;
    transform: translate3d(var(--px, 0), var(--py, 0), 0);
    will-change: transform
}

.hero-art:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--color-bg) 2%, transparent 48%), linear-gradient(0deg, rgba(9, 6, 19, .42), transparent 48%)
}

.hero-art img,
.research-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-art-glow {
    position: absolute;
    right: 20%;
    top: 17%;
    width: 35vw;
    aspect-ratio: 1;
    background: rgba(155, 82, 255, .16);
    filter: blur(90px);
    z-index: 1
}

.hero-layout {
    display: grid;
    grid-template-columns: 1.1fr .6fr;
    align-items: end;
    gap: 2rem;
    padding-top: 7rem
}

.hero-copy {
    max-width: 690px
}

.eyebrow {
    font: 500 .7rem var(--font-mono);
    letter-spacing: .12em;
    color: var(--color-primary-bright);
    margin: 0 0 1.5rem
}

.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: .5rem;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 10px var(--color-accent)
}

h1,
h2,
h3,
p {
    margin-top: 0
}

h1 {
    font: 800 clamp(4.3rem, 12vw, 10.8rem)/.76 var(--font-display);
    letter-spacing: -.09em;
    margin: 0;
    text-transform: uppercase;
    text-shadow: 0 8px 28px rgba(0, 0, 0, .4)
}

h1 span {
    display: block
}

h1 em {
    display: block;
    font-style: normal;
    color: transparent;
    -webkit-text-stroke: 1px var(--color-primary-bright);
    text-shadow: 0 0 26px rgba(135, 72, 255, .25)
}

.hero-lede {
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    max-width: 450px;
    margin: 2rem 0 .75rem;
    font-weight: 500
}

.hero-body {
    max-width: 490px;
    color: var(--color-text-muted);
    font-size: 1rem
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem
}

.button {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    padding: .9rem 1rem;
    font: 500 .76rem var(--font-mono);
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: transform .3s var(--ease), box-shadow .3s
}

.button svg,
.text-link svg {
    width: 16px;
    height: 16px
}

.button-primary {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 7px 25px rgba(105, 51, 217, .24)
}

.button-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 13px 32px rgba(128, 68, 255, .46)
}

.text-link {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    font: 500 .75rem var(--font-mono);
    letter-spacing: .04em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: .25rem;
    transition: color .2s
}

.text-link:hover {
    color: var(--color-primary-bright)
}

.hero-bottom {
    position: absolute;
    inset: auto 0 1.6rem;
    display: flex;
    justify-content: space-between;
    color: rgba(220, 208, 255, .48);
    font: .56rem var(--font-mono);
    letter-spacing: .08em
}

.hero-bottom span:nth-child(2) {
    display: flex;
    gap: .5rem;
    align-items: center
}

.hero-bottom svg {
    width: 12px
}

.orbit-a,
.orbit-b {
    position: absolute;
    border: 1px solid rgba(177, 139, 255, .12);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1
}

.orbit-a {
    width: 720px;
    aspect-ratio: 1;
    right: -290px;
    top: -250px
}

.orbit-b {
    width: 450px;
    aspect-ratio: 1;
    right: -120px;
    bottom: -190px
}

.section {
    padding: clamp(6rem, 6vw, 10rem) 0
}

.intro {
    display: grid;
    grid-template-columns: .35fr 1.25fr .75fr;
    gap: var(--space);
    align-items: start
}

.section-index {
    font: .65rem var(--font-mono);
    letter-spacing: .1em;
    color: var(--color-primary-bright);
    writing-mode: vertical-rl;
    transform: rotate(180deg)
}

h2 {
    font: 600 clamp(2.6rem, 5vw, 5.2rem)/.96 var(--font-display);
    letter-spacing: -.07em;
    margin: 0
}

h2 span {
    color: var(--color-primary-bright)
}

.intro-aside {
    border-left: 1px solid var(--color-border);
    padding: 0 0 0 1.5rem;
    color: var(--color-text-muted)
}

.intro-aside p {
    margin-bottom: 1.5rem
}

.capabilities {
    position: relative;
    background: linear-gradient(180deg, transparent, rgba(77, 35, 132, .16), transparent)
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 3rem;
    margin-bottom: 4rem
}

.section-head>p {
    max-width: 360px;
    color: var(--color-text-muted);
    margin: 0
}

.capability-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem
}

.capability-card {
    grid-column: span 4;
    min-height: 300px;
    border: 1px solid var(--color-border);
    padding: 1.4rem;
    position: relative;
    background: rgba(17, 13, 32, .54);
    overflow: hidden;
    transition: border-color .35s, transform .35s var(--ease), background .35s
}

.capability-card:hover {
    transform: translateY(-5px);
    border-color: rgba(188, 149, 255, .72);
    background: rgba(33, 22, 63, .72)
}

.capability-card:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 48%, rgba(163, 110, 255, .1));
    /* opacity: 0; */
    transition: opacity .35s
}

.capability-card:hover:before {
    opacity: 1
}

.card-featured {
    grid-column: span 5;
    min-height: 365px;
    background: radial-gradient(circle at 70% 20%, rgba(117, 55, 255, .25), transparent 40%), rgba(17, 13, 32, .7)
}

.code-card {
    grid-column: span 3
}

.capability-card:nth-child(4) {
    grid-column: span 3
}

.capability-card:nth-child(5) {
    grid-column: span 4
}

.card-number {
    position: absolute;
    right: 1.1rem;
    top: 1rem;
    font: .65rem var(--font-mono);
    color: var(--color-text-muted)
}

.capability-card>svg {
    width: 28px;
    height: 28px;
    color: var(--color-primary-bright);
    margin: 1rem 0 2.rem
}

.card-kicker {
    font: .62rem var(--font-mono);
    letter-spacing: .1em;
    color: var(--color-accent);
    margin: 0 0 .65rem
}

.capability-card h3 {
    font: 700 clamp(1.3rem, 2vw, 1.8rem)/1 var(--font-display);
    margin: 0 0 .75rem;
    letter-spacing: -.05em
}

.capability-card>p:last-of-type {
    color: var(--color-text-muted);
    font-size: .9rem;
    margin: 0;
    max-width: 340px
}

.card-hud {
    position: absolute;
    left: 1.4rem;
    right: 1.4rem;
    bottom: 0.8rem;
    border-top: 1px solid rgba(191, 160, 255, .23);
    padding-top: .7rem;
    display: flex;
    justify-content: space-between;
    font: .55rem var(--font-mono);
    letter-spacing: .07em;
    color: var(--color-text-muted)
}

.card-hud b {
    font-weight: 500;
    color: var(--color-primary-bright)
}

pre {
    font: .65rem/1.8 var(--font-mono);
    color: var(--color-primary-bright);
    margin: 1.8rem 0 0;
    white-space: pre-wrap
}

.research {
    position: relative;
    min-height: 650px;
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.research-art {
    position: absolute;
    inset: 0 36% 0 -15%;
    opacity: .54;
    mask-image: linear-gradient(90deg, #000 32%, transparent 90%)
}

.research-content {
    width: min(620px, 62%);
    position: relative;
    padding: clamp(2rem, 5vw, 4rem);
    border-left: 1px solid var(--color-border);
    background: linear-gradient(90deg, rgba(9, 6, 19, .76), rgba(9, 6, 19, .2))
}

.research-content>p:not(.eyebrow) {
    margin: 1.6rem 0;
    color: var(--color-text-muted);
    max-width: 540px
}

.protocol-list {
    display: grid;
    gap: .2rem
}

.protocol-list div {
    display: grid;
    grid-template-columns: 2.3rem 1fr 2fr;
    align-items: center;
    gap: .5rem;
    border-top: 1px solid rgba(191, 160, 255, .2);
    padding: .85rem 0
}

.protocol-list span,
.protocol-list small {
    font: .58rem var(--font-mono);
    color: var(--color-text-muted)
}

.protocol-list strong {
    font-weight: 500
}

.signal {
    background: rgba(18, 12, 36, .58);
    border-top: 1px solid rgba(191, 160, 255, .12);
    border-bottom: 1px solid rgba(191, 160, 255, .12)
}

.signal-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(3rem, 8vw, 9rem)
}

.signal-console {
    border: 1px solid var(--color-border);
    background: #0d091a;
    box-shadow: var(--glow-primary)
}

.console-bar {
    height: 33px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: 0 .65rem
}

.console-bar>span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-secondary)
}

.console-bar b {
    font: 400 .55rem var(--font-mono);
    color: var(--color-text-muted);
    margin-left: .35rem
}

.console-body {
    padding: 1.35rem
}

.console-body p {
    font: .71rem var(--font-mono);
    color: var(--color-text-muted);
    margin: 0 0 .7rem
}

.console-body p span {
    color: var(--color-primary-bright);
    margin-right: .55rem
}

.console-body b {
    font-weight: 400;
    color: var(--color-accent)
}

.cursor i {
    display: inline-block;
    width: 8px;
    height: 1em;
    background: var(--color-primary-bright);
    vertical-align: middle;
    animation: blink 1s step-end infinite
}

.contact-frame {
    border: 1px solid var(--color-border);
    padding: clamp(2rem, 6vw, 5rem);
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 4rem;
    position: relative;
    background: radial-gradient(circle at 76% 12%, rgba(122, 68, 255, .2), transparent 27%), var(--color-surface)
}

.contact-frame:after {
    content: "";
    position: absolute;
    right: 16px;
    top: 16px;
    width: 44px;
    height: 44px;
    border-top: 1px solid var(--color-primary-bright);
    border-right: 1px solid var(--color-primary-bright)
}

.contact-info {
    align-self: end
}

.contact-info>p:first-child {
    color: var(--color-text-muted);
    margin-bottom: 1.7rem
}

.contact-meta {
    font: .61rem/1.8 var(--font-mono);
    letter-spacing: .08em;
    color: var(--color-primary-bright);
    margin: 2.6rem 0 0
}

.footer {
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 2rem 0 2.6rem;
    color: var(--color-text-muted);
    font: .62rem var(--font-mono);
    letter-spacing: .05em
}

.footer>a:last-child {
    display: flex;
    gap: .5rem;
    align-items: center
}

.footer svg {
    width: 14px
}

.is-ready [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease)
}

.is-ready [data-reveal].is-visible {
    opacity: 1;
    transform: none
}

.is-ready [data-reveal][data-delay="120"] {
    transition-delay: 120ms
}

.is-ready [data-reveal][data-delay="160"] {
    transition-delay: 160ms
}

.is-ready [data-reveal][data-delay="70"] {
    transition-delay: 70ms
}

.is-ready [data-reveal][data-delay="80"] {
    transition-delay: 80ms
}

.is-ready [data-reveal][data-delay="140"] {
    transition-delay: 140ms
}

.is-ready [data-reveal][data-delay="150"] {
    transition-delay: 150ms
}

@keyframes scan {

    0%,
    100% {
        transform: translateY(-57px);
        opacity: .3
    }

    50% {
        transform: translateY(57px);
        opacity: 1
    }
}

@keyframes blink {
    50% {
        opacity: 0
    }
}

@media(max-width:800px) {
    .shell {
        width: min(100% - 32px, 680px)
    }

    .nav {
        min-height: 68px
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: .4rem;
        border: 0;
        background: none;
        color: var(--color-text)
    }

    .menu-toggle span {
        display: block;
        width: 24px;
        height: 1px;
        background: currentColor;
        transition: transform .25s
    }

    .menu-toggle[aria-expanded="true"] span:first-child {
        transform: translateY(3px) rotate(45deg)
    }

    .menu-toggle[aria-expanded="true"] span:last-child {
        transform: translateY(-3px) rotate(-45deg)
    }

    .nav-links {
        position: absolute;
        left: 16px;
        right: 16px;
        top: 62px;
        display: none;
        align-items: stretch;
        gap: 0;
        padding: 1rem;
        background: rgba(17, 13, 32, .98);
        border: 1px solid var(--color-border);
        box-shadow: var(--glow-primary)
    }

    .nav-links.is-open {
        display: flex
    }

    .nav-links>a {
        padding: .85rem
    }

    .hero {
        min-height: 720px;
        height: auto;
        padding: 7rem 0 5rem;
        align-items: flex-end
    }

    .hero:before {
        background: linear-gradient(90deg, rgba(9, 6, 19, .94), rgba(9, 6, 19, .64)), linear-gradient(0deg, var(--color-bg), transparent 45%)
    }

    .hero-art {
        inset: 0 -65% 0 -10%;
        opacity: .62
    }

    .hero-layout {
        grid-template-columns: 1fr;
        padding-top: 0
    }

    .hero-bottom {
        display: none
    }

    h1 {
        font-size: clamp(4rem, 19vw, 7.2rem)
    }

    .intro {
        grid-template-columns: 1fr;
        gap: 1.5rem
    }

    .section-index {
        writing-mode: initial;
        transform: none
    }

    .intro-aside {
        padding-left: 1rem
    }

    .section-head {
        display: block;
        margin-bottom: 2.5rem
    }

    .section-head>p {
        margin-top: 1.3rem
    }

    .capability-grid {
        grid-template-columns: 1fr 1fr
    }

    .capability-card,
    .card-featured,
    .code-card,
    .capability-card:nth-child(4),
    .capability-card:nth-child(5) {
        grid-column: span 1;
        min-height: 260px
    }

    .card-featured {
        grid-column: span 2
    }

    .research {
        min-height: 0;
        display: block
    }

    .research-art {
        inset: 0;
        opacity: .16;
        mask-image: linear-gradient(#000, transparent)
    }

    .research-content {
        width: 100%;
        padding: 2rem 1rem;
        background: rgba(9, 6, 19, .68)
    }

    .signal-layout,
    .contact-frame {
        grid-template-columns: 1fr;
        gap: 2.5rem
    }

    .footer {
        align-items: flex-start;
        flex-direction: column
    }

    .section {
        padding: 5.5rem 0
    }
}

@media(max-width:460px) {
    .hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem
    }

    .hero-lede {
        font-size: 1.2rem
    }

    .capability-grid {
        grid-template-columns: 1fr
    }

    .capability-card,
    .card-featured,
    .code-card,
    .capability-card:nth-child(4),
    .capability-card:nth-child(5) {
        grid-column: span 1
    }

    .protocol-list div {
        grid-template-columns: 1.7rem 1fr
    }

    .protocol-list small {
        grid-column: 2
    }

    .contact-frame {
        padding: 2rem 1.25rem
    }

    .button {
        width: 100%;
        justify-content: center
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *:before,
    *:after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }

    .is-ready [data-reveal] {
        opacity: 1;
        transform: none
    }
}

@media(max-width:800px) {
    h1 {
        font-size: clamp(3.4rem, 16.5vw, 6.25rem)
    }
}

/* Final evolution: tooling, terms and mobile system navigation. */
.drawer-backdrop,
.mobile-drawer {
    display: none
}

.tooling {
    position: relative
}

.tooling-layout {
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    gap: 1rem
}

.rat-panel {
    position: relative;
    min-height: 390px;
    overflow: hidden;
    padding: 1.7rem;
    border: 1px solid var(--color-border);
    background: radial-gradient(circle at 72% 14%, rgba(138, 70, 255, .35), transparent 32%), linear-gradient(135deg, rgba(27, 17, 53, .96), rgba(10, 7, 22, .92))
}

.rat-grid {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(190, 157, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(190, 157, 255, .08) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(125deg, #000, transparent 78%)
}

.rat-panel:after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    border: 1px solid rgba(179, 134, 255, .32);
    border-radius: 50%;
    right: -60px;
    bottom: -80px;
    box-shadow: 0 0 0 25px rgba(134, 72, 255, .05), 0 0 45px rgba(134, 72, 255, .26)
}

.rat-top,
.rat-metrics {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .55rem;
    font: .58rem var(--font-mono);
    letter-spacing: .08em;
    color: var(--color-text-muted)
}

.rat-top b {
    margin-left: auto;
    color: var(--color-accent);
    font-weight: 500
}

.rat-panel h3 {
    position: relative;
    z-index: 1;
    font: 700 clamp(3rem, 7vw, 6.8rem)/.8 var(--font-display);
    letter-spacing: -.09em;
    margin: 5rem 0 1.2rem
}

.rat-panel h3 span {
    color: transparent;
    -webkit-text-stroke: 1px var(--color-primary-bright)
}

.rat-panel>p {
    position: relative;
    z-index: 1;
    max-width: 470px;
    color: var(--color-text-muted);
    margin: 0
}

.rat-metrics {
    position: absolute;
    z-index: 1;
    bottom: 1.5rem;
    left: 1.7rem;
    right: 1.7rem;
    justify-content: space-between;
    border-top: 1px solid rgba(191, 160, 255, .24);
    padding-top: .8rem;
    color: var(--color-primary-bright)
}

.tool-list {
    display: grid;
    gap: 1rem
}

.tool-list article {
    min-height: calc((390px - 2rem)/3);
    display: grid;
    grid-template-columns: 38px 1fr;
    align-content: center;
    gap: 1rem;
    border: 1px solid var(--color-border);
    background: rgba(17, 13, 32, .54);
    padding: 1.35rem;
    transition: transform .35s var(--ease), border-color .35s
}

.tool-list article:hover {
    transform: translateX(5px);
    border-color: rgba(188, 149, 255, .7)
}

.tool-list svg {
    color: var(--color-primary-bright);
    width: 25px
}

.tool-list p {
    font: .59rem var(--font-mono);
    letter-spacing: .08em;
    color: var(--color-accent);
    margin: 0 0 .2rem
}

.tool-list h3 {
    font: 600 1.15rem var(--font-display);
    margin: 0 0 .25rem
}

.tool-list span {
    font-size: .8rem;
    color: var(--color-text-muted)
}

.terms {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: clamp(2rem, 7vw, 8rem);
    align-items: start
}

.terms-intro>p:not(.eyebrow) {
    color: var(--color-text-muted);
    margin: 1.6rem 0 0;
    max-width: 430px
}

.terms-list {
    border-top: 1px solid var(--color-border)
}

.terms-list details {
    border-bottom: 1px solid var(--color-border);
    padding: .1rem 0
}

.terms-list summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 0;
    cursor: pointer;
    list-style: none;
    font: 600 1rem var(--font-display)
}

.terms-list summary::-webkit-details-marker {
    display: none
}

.terms-list summary span {
    font: .59rem var(--font-mono);
    color: var(--color-primary-bright)
}

.terms-list summary svg {
    width: 16px;
    margin-left: auto;
    transition: transform .25s var(--ease)
}

.terms-list details[open] summary svg {
    transform: rotate(45deg)
}

.terms-list details p {
    color: var(--color-text-muted);
    font-size: .9rem;
    max-width: 570px;
    margin: 0;
    padding: 0 2rem 1.15rem
}

.contact-socials {
    display: flex;
    gap: 1.1rem;
    margin: 1.4rem 0
}

.contact-socials a,
.footer-links {
    display: flex;
    align-items: center;
    gap: .42rem;
    font: .64rem var(--font-mono);
    color: var(--color-text-muted);
    transition: color .2s
}

.contact-socials a:hover,
.footer-links a:hover {
    color: var(--color-primary-bright)
}

.contact-socials svg {
    width: 14px
}

.footer-links {
    gap: 1rem
}

.footer-links a:last-child {
    display: flex;
    gap: .4rem;
    align-items: center
}

@media(max-width:800px) {
    body.has-menu-open {
        overflow: hidden
    }

    .nav-links {
        display: none !important
    }

    .drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(4, 2, 10, .62);
        backdrop-filter: blur(7px);
        z-index: 29;
        opacity: 0;
        pointer-events: none;
        transition: opacity .35s var(--ease)
    }

    .mobile-drawer {
        display: flex;
        position: fixed;
        z-index: 30;
        inset: 0 0 0 auto;
        width: min(100%, 420px);
        padding: 1.25rem 1.25rem 1.45rem;
        flex-direction: column;
        background: linear-gradient(150deg, rgba(18, 11, 35, .99), rgba(8, 5, 17, .995));
        border-left: 1px solid rgba(190, 155, 255, .4);
        box-shadow: -22px 0 70px rgba(0, 0, 0, .42);
        transform: translateX(105%);
        visibility: hidden;
        transition: transform .48s var(--ease), visibility .48s;
        overflow: hidden
    }

    .mobile-drawer:before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 78% 20%, rgba(132, 71, 255, .34), transparent 28%), linear-gradient(rgba(190, 157, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(190, 157, 255, .045) 1px, transparent 1px);
        background-size: auto, 38px 38px;
        pointer-events: none
    }

    .has-menu-open .drawer-backdrop {
        opacity: 1;
        pointer-events: auto
    }

    .has-menu-open .mobile-drawer {
        transform: none;
        visibility: visible
    }

    .drawer-head,
    .drawer-brand,
    .drawer-status,
    .drawer-nav,
    .drawer-foot {
        position: relative;
        z-index: 1
    }

    .drawer-head {
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    .drawer-label {
        font: .58rem var(--font-mono);
        letter-spacing: .12em;
        color: var(--color-text-muted)
    }

    .drawer-close {
        display: grid;
        place-items: center;
        width: 39px;
        height: 39px;
        background: transparent;
        border: 1px solid var(--color-border);
        color: var(--color-primary-bright)
    }

    .drawer-close svg {
        width: 17px
    }

    .drawer-brand {
        margin: clamp(2rem, 7vh, 4.2rem) 0 1.15rem;
        font: 700 clamp(3.2rem, 13vw, 4.8rem)/.76 var(--font-display);
        letter-spacing: -.1em
    }

    .drawer-brand span,
    .drawer-brand strong {
        display: block
    }

    .drawer-brand strong {
        color: transparent;
        -webkit-text-stroke: 1px var(--color-primary-bright)
    }

    .drawer-brand small {
        display: block;
        margin-top: 1rem;
        font: 500 .57rem var(--font-mono);
        letter-spacing: .13em;
        color: var(--color-primary-bright)
    }

    .drawer-status {
        display: flex;
        align-items: center;
        gap: .45rem;
        border-top: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
        padding: .72rem 0;
        font: .57rem var(--font-mono);
        letter-spacing: .08em;
        color: var(--color-text-muted)
    }

    .drawer-status b {
        margin-left: auto;
        font-weight: 500;
        color: var(--color-accent)
    }

    .drawer-nav {
        display: grid;
        margin-top: 1rem
    }

    .drawer-nav a {
        display: grid;
        grid-template-columns: 2rem 1fr 18px;
        align-items: center;
        padding: .78rem 0;
        border-bottom: 1px solid rgba(191, 160, 255, .16);
        font: 600 1.05rem var(--font-display);
        transition: padding .25s var(--ease), color .25s
    }

    .drawer-nav a:hover,
    .drawer-nav a:focus-visible {
        padding-left: .35rem;
        color: var(--color-primary-bright)
    }

    .drawer-nav span {
        font: .55rem var(--font-mono);
        color: var(--color-primary-bright)
    }

    .drawer-nav svg {
        width: 15px
    }

    .drawer-foot {
        margin-top: auto;
        display: flex;
        align-items: end;
        justify-content: space-between;
        border-top: 1px solid var(--color-border);
        padding-top: 1rem
    }

    .drawer-foot p {
        margin: 0;
        font: .55rem/1.7 var(--font-mono);
        letter-spacing: .07em;
        color: var(--color-text-muted)
    }

    .drawer-foot div {
        display: flex;
        gap: .6rem
    }

    .drawer-foot a {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border: 1px solid var(--color-border);
        color: var(--color-primary-bright)
    }

    .drawer-foot svg {
        width: 14px
    }

    .has-menu-open .menu-toggle {
        opacity: 0;
        pointer-events: none
    }

    .tooling-layout,
    .terms {
        grid-template-columns: 1fr
    }

    .rat-panel {
        min-height: 350px
    }

    .tool-list {
        grid-template-columns: 1fr 1fr
    }

    .tool-list article:last-child {
        grid-column: span 2
    }

    .tool-list article {
        min-height: 160px
    }

    .terms {
        gap: 2.5rem
    }
}

@media(max-width:520px) {
    .hero {
        min-height: 780px;
        padding-bottom: 2.4rem;
        align-items: flex-start
    }

    .hero-art {
        inset: 0 -16% 0 -16%;
        opacity: .85
    }

    .hero-art img {
        object-position: 70% center;
    }

    .hero-art:after {
        background: linear-gradient(180deg, rgba(9, 6, 19, .32), rgba(9, 6, 19, .04) 29%, rgba(9, 6, 19, .91) 70%, var(--color-bg) 100%), linear-gradient(90deg, rgba(9, 6, 19, .33), transparent 46%, rgba(9, 6, 19, .08))
    }

    .hero-art-glow {
        right: 4%;
        top: 16%;
        width: 75vw;
        opacity: .78
    }

    .hero-layout {
        padding-top: 5.5rem;
        align-items: start
    }

    .hero-copy {
        padding-top: 0;
        position: relative;
        z-index: 1
    }

    .hero-copy .eyebrow {
        margin-bottom: 1.1rem
    }

    .hero-copy h1 {
        /* font-size: clamp(3.55rem, 17.2vw, 5.5rem); */
        text-shadow: 0 3px 22px rgba(0, 0, 0, .52)
    }

    .hero-lede {
        max-width: 300px;
        margin-top: 15.5rem;
        font-size: 1.1rem;
        text-shadow: 0 2px 11px rgba(0, 0, 0, .74)
    }

    .hero-body {
        font-size: .88rem;
        max-width: 340px;
        text-shadow: 0 2px 11px rgba(0, 0, 0, .8)
    }

    .hero-actions {
        margin-top: 1.3rem
    }

    .tool-list {
        grid-template-columns: 1fr
    }

    .tool-list article,
    .tool-list article:last-child {
        grid-column: span 1;
        min-height: 0
    }

    .rat-panel {
        min-height: 365px;
        padding: 1.25rem
    }

    .rat-panel h3 {
        margin-top: 4.3rem
    }

    .rat-metrics {
        left: 1.25rem;
        right: 1.25rem
    }

    .rat-top b {
        display: none
    }

    .footer-links {
        flex-wrap: wrap
    }

    .contact-socials {
        flex-wrap: wrap
    }
}

@media(prefers-reduced-motion:reduce) {

    .mobile-drawer,
    .drawer-backdrop {
        transition: none
    }
}

@media(max-width:520px) {
    .hero {
        min-height: 930px
    }

    .hero-lede {
        margin-top: 18rem
    }

}

/* Refinement layer: shared product pages, brand asset and quieter hero. */
.brand-image {
    display: flex;
    align-items: center
}

.brand-image img {
    display: block;
    width: 132px;
    height: auto;
    max-height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(143, 86, 255, .2))
}

.hero-layout {
    grid-template-columns: 1fr;
    align-items: center
}

.hero-copy {
    position: relative;
    z-index: 1
}

.hero-copy h1 em {
    letter-spacing: -.065em;
    -webkit-text-stroke: .9px var(--color-primary-bright);
    text-shadow: 0 0 16px rgba(135, 72, 255, .16)
}

.section-separated {
    position: relative
}

.section-separated:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: min(1180px, calc(100% - 48px));
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(190, 160, 255, .18) 15%, rgba(190, 160, 255, .42) 48%, rgba(190, 160, 255, .18) 85%, transparent)
}

.section-separated:after {
    content: "◇";
    position: absolute;
    top: -.65rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-primary-bright);
    font: 400 .72rem var(--font-mono);
    background: var(--color-bg);
    padding: 0 .7rem;
    line-height: 1
}

.capability-card,
.tool-list article,
.product-card {
    will-change: transform
}

.capability-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(63, 28, 123, .18)
}

.capability-card:hover>svg,
.tool-list article:hover>svg,
.product-card:hover>svg {
    transform: translateY(-2px) scale(1.05);
    filter: drop-shadow(0 0 9px rgba(182, 134, 255, .38))
}

.capability-card>svg,
.tool-list article>svg,
.product-card>svg {
    transition: transform .3s var(--ease), filter .3s var(--ease)
}

.rat-bottom {
    position: absolute;
    z-index: 1;
    bottom: 1.35rem;
    left: 1.7rem;
    right: 1.7rem;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem
}

.rat-panel .rat-metrics {
    position: static;
    flex: 1;
    padding-top: .8rem
}

.rat-cta {
    white-space: nowrap;
    color: var(--color-text);
    border-color: var(--color-primary-bright)
}

.nav-back {
    display: flex;
    align-items: center;
    gap: .5rem;
    font: 500 .7rem var(--font-mono);
    letter-spacing: .06em;
    color: var(--color-text-muted);
    text-transform: uppercase
}

.nav-back:hover {
    color: var(--color-primary-bright)
}

.nav-back svg {
    width: 15px
}

.product-page,
.legal-page {
    min-height: 100vh
}

.product-hero,
.legal-hero {
    min-height: 700px;
    padding-top: 10rem;
    padding-bottom: 5rem;
    position: relative;
    align-items: center;
    isolation: isolate;
    overflow: hidden
}

.product-hero:after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 36%;
    background: linear-gradient(transparent, var(--color-bg));
    z-index: -1
}

.product-hero-art {
    position: absolute;
    inset: 0 -8% 0 30%;
    z-index: -2;
    opacity: .52
}

.product-hero-art:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--color-bg) 3%, rgba(9, 6, 19, .46) 50%, transparent)
}

.product-hero-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right;
    filter: saturate(.65) brightness(.64)
}

.product-copy {
    position: relative;
    z-index: 1;
    max-width: 720px
}

.product-copy h1 {
    font-size: clamp(4.2rem, 11vw, 9.7rem)
}

.product-copy h1 em {
    letter-spacing: -.065em
}

.product-lede {
    font-size: clamp(1.2rem, 2.1vw, 1.7rem);
    font-weight: 500;
    max-width: 520px;
    margin: 1.8rem 0 .8rem
}

.product-body {
    max-width: 515px;
    color: var(--color-text-muted)
}

.product-actions {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin-top: 2rem
}

.product-status {
    position: absolute;
    z-index: 1;
    right: max(24px, calc((100vw - 1180px)/2));
    bottom: 4.6rem;
    padding: .85rem 1rem;
    border-left: 1px solid var(--color-primary-bright);
    background: rgba(16, 10, 30, .7);
    backdrop-filter: blur(8px);
    font: .59rem var(--font-mono);
    letter-spacing: .1em
}

.product-status p {
    color: var(--color-text-muted);
    margin: 0 0 .5rem
}

.product-status strong {
    display: block;
    color: var(--color-accent);
    font-weight: 500;
    margin-bottom: .2rem
}

.product-status span {
    color: var(--color-primary-bright)
}

.product-section {
    padding: clamp(6rem, 11vw, 9rem) 0
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem
}

.product-card {
    min-height: 230px;
    padding: 1.4rem;
    border: 1px solid var(--color-border);
    background: rgba(17, 13, 32, .54);
    transition: transform .35s var(--ease), border-color .35s, background .35s
}

.product-card:hover {
    transform: translateY(-4px);
    border-color: rgba(188, 149, 255, .7);
    background: rgba(33, 22, 63, .72)
}

.product-card svg {
    width: 27px;
    color: var(--color-primary-bright);
    margin: 1.1rem 0 2.3rem
}

.product-card p {
    font: .58rem var(--font-mono);
    letter-spacing: .08em;
    color: var(--color-accent);
    margin: 0 0 .35rem
}

.product-card h3 {
    font: 600 1.4rem var(--font-display);
    margin: 0 0 .5rem
}

.product-card span {
    font-size: .88rem;
    color: var(--color-text-muted)
}

.product-boundary {
    padding: clamp(5rem, 10vw, 8rem) 0;
    background: rgba(18, 12, 36, .58)
}

.boundary-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(3rem, 8vw, 9rem)
}

.boundary-console {
    border: 1px solid var(--color-border);
    padding: 1.4rem;
    background: rgba(13, 9, 26, .78);
    box-shadow: var(--glow-primary)
}

.boundary-console p {
    font: .72rem var(--font-mono);
    color: var(--color-text-muted);
    margin: 0 0 .75rem
}

.boundary-console p span {
    color: var(--color-primary-bright);
    margin-right: .55rem
}

.boundary-console b {
    color: var(--color-accent);
    font-weight: 500
}

.boundary-console .text-link {
    margin-top: 1rem
}

.product-legal {
    padding: clamp(6rem, 10vw, 8rem) 0;
    display: grid;
    grid-template-columns: 1fr .82fr;
    gap: clamp(3rem, 8vw, 8rem)
}

.product-legal>div:last-child {
    color: var(--color-text-muted)
}

.product-legal .button {
    margin-top: 1.1rem
}

.legal-hero {
    min-height: 490px;
    padding-bottom: 3.5rem
}

.legal-hero h1 {
    font-size: clamp(3.6rem, 8.5vw, 7.8rem)
}

.legal-hero>p:last-child {
    max-width: 560px;
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin: 1.6rem 0 0
}

.legal-notice {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 1.4rem;
    padding: clamp(2rem, 5vw, 4rem);
    background: linear-gradient(120deg, rgba(91, 43, 161, .18), rgba(17, 13, 32, .68));
    border: 1px solid var(--color-border)
}

.legal-notice>svg {
    width: 29px;
    color: var(--color-primary-bright)
}

.legal-notice .eyebrow {
    margin-bottom: .7rem
}

.legal-notice h2 {
    font-size: clamp(1.8rem, 3vw, 3rem);
    margin-bottom: 1rem
}

.legal-notice p:last-child {
    margin: 0;
    color: var(--color-text-muted);
    max-width: 780px
}

.legal-layout {
    padding: clamp(5rem, 9vw, 8rem) 0;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(3rem, 8vw, 10rem)
}

.legal-index {
    position: sticky;
    top: 110px;
    height: max-content;
    border-left: 1px solid var(--color-border);
    display: grid
}

.legal-index p {
    font: .58rem var(--font-mono);
    letter-spacing: .1em;
    color: var(--color-primary-bright);
    padding-left: 1rem;
    margin: 0 0 .7rem
}

.legal-index a {
    padding: .45rem 1rem;
    font: .65rem var(--font-mono);
    letter-spacing: .03em;
    color: var(--color-text-muted);
    border-left: 1px solid transparent;
    transition: color .2s, border-color .2s
}

.legal-index a:hover {
    color: var(--color-text);
    border-left-color: var(--color-primary-bright)
}

.legal-content {
    display: grid;
    gap: 4rem
}

.legal-content article {
    scroll-margin-top: 120px
}

.legal-number {
    font: .6rem var(--font-mono);
    letter-spacing: .1em;
    color: var(--color-primary-bright);
    margin: 0 0 .9rem
}

.legal-content h2 {
    font-size: clamp(1.8rem, 3.3vw, 3.4rem);
    margin-bottom: 1.25rem
}

.legal-content p,
.legal-content li {
    font-size: .96rem;
    color: var(--color-text-muted);
    max-width: 820px
}

.legal-content li {
    margin: .5rem 0
}

.legal-content ul {
    margin: 1.2rem 0;
    padding-left: 1.15rem
}

.legal-content li::marker {
    color: var(--color-primary-bright)
}

.legal-emphasis {
    border-left: 1px solid var(--color-primary-bright);
    padding-left: 1rem;
    color: var(--color-text) !important
}

.consent-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .7rem;
    margin: 1.5rem 0
}

.consent-grid div {
    padding: 1rem;
    border: 1px solid var(--color-border);
    background: rgba(17, 13, 32, .52)
}

.consent-grid strong {
    display: block;
    font: .68rem var(--font-mono);
    letter-spacing: .07em;
    color: var(--color-primary-bright);
    margin-bottom: .5rem
}

.consent-grid span {
    font-size: .78rem;
    color: var(--color-text-muted)
}

@media(max-width:800px) {
    .brand-image img {
        width: 112px;
        max-height: 42px
    }

    .section-separated:before {
        width: min(100% - 32px, 680px)
    }

    .section-separated:after {
        padding: 0 .5rem
    }

    .section {
        padding: 4.5rem 0
    }

    .tooling.section,
    .terms.section {
        padding-top: 4.8rem
    }

    .product-hero {
        min-height: 640px;
        padding-top: 8.5rem
    }

    .product-hero-art {
        inset: 0 -35% 0 17%;
        opacity: .38
    }

    .product-status {
        right: 16px;
        bottom: 2rem
    }

    .product-grid {
        grid-template-columns: 1fr
    }

    .product-card {
        min-height: 195px
    }

    .boundary-layout,
    .product-legal {
        grid-template-columns: 1fr;
        gap: 2.5rem
    }

    .legal-hero {
        min-height: 430px;
        padding-top: 8rem
    }

    .legal-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem
    }

    .legal-index {
        position: static;
        grid-template-columns: repeat(2, 1fr);
        border: 0;
        border-top: 1px solid var(--color-border);
        padding-top: .8rem
    }

    .legal-index p {
        grid-column: 1/-1;
        padding-left: 0
    }

    .legal-index a {
        padding: .55rem 0
    }

    .consent-grid {
        grid-template-columns: 1fr
    }

    .drawer-brand {
        margin-top: 2.3rem
    }

    .drawer-brand img {
        display: block;
        width: 190px;
        height: auto;
        object-fit: contain
    }

    .drawer-brand span,
    .drawer-brand strong {
        display: none !important
    }

    .rat-bottom {
        left: 1.25rem;
        right: 1.25rem
    }

    .rat-panel .rat-metrics {
        font-size: .49rem
    }
}

@media(max-width:520px) {
    .hero {
        min-height: 800px;
        padding: 0 0 2.5rem
    }

    .hero-layout {
        padding-top: 5.8rem
    }

    .hero-lede {
        margin-top: 13rem
    }

    .hero-art {
        inset: 0 -12% 0 -12%;
        opacity: .86
    }

    .hero-art img {
        object-position: 65% center
    }

    .hero-actions {
        gap: 1rem
    }

    .section {
        padding: 4rem 0
    }

    .tooling.section,
    .terms.section {
        padding-top: 4.2rem
    }

    .rat-panel {
        min-height: 390px
    }

    .rat-bottom {
        display: block;
        bottom: 1.15rem
    }

    .rat-panel .rat-metrics {
        margin-bottom: 1rem
    }

    .rat-cta {
        display: inline-flex
    }

    .product-hero {
        min-height: 660px;
        padding: 7.4rem 0 3rem
    }

    .product-hero-art {
        inset: 0 -45% 0 3%;
        opacity: .45
    }

    .product-copy h1 {
        font-size: clamp(3.7rem, 18vw, 5.6rem)
    }

    .product-lede {
        font-size: 1.12rem;
        margin-top: 12rem
    }

    .product-status {
        display: none
    }

    .product-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem
    }

    .legal-hero {
        min-height: 410px;
        padding: 7.5rem 0 2.6rem
    }

    .legal-hero h1 {
        font-size: clamp(3rem, 15vw, 4.6rem)
    }

    .legal-notice {
        grid-template-columns: 1fr;
        padding: 1.4rem
    }

    .legal-layout {
        padding: 4.2rem 0
    }

    .legal-index {
        grid-template-columns: 1fr
    }

    .legal-index a {
        border-bottom: 1px solid rgba(191, 160, 255, .12)
    }

    .legal-content {
        gap: 3rem
    }

    .nav-back {
        font-size: .6rem
    }

    .footer {
        gap: 1.2rem
    }
}

@media(prefers-reduced-motion:reduce) {

    .capability-card:hover,
    .tool-list article:hover,
    .product-card:hover {
        transform: none
    }
}

.brand-image img {
    width: 100px;
    max-height: 100px
}

@media(max-width:800px) {
    .brand-image img {
        width: 65px;
        max-height: 65px
    }
}

@media(max-width:520px) {
    .product-copy {
        max-width: 100%
    }

    .product-copy h1 {
        font-size: clamp(2.8rem, 15vw, 5.6rem)
    }
}

@media(max-width:520px) {
    .product-page main {
        overflow: hidden
    }

    .product-legal h2 {
        font-size: clamp(2rem, 11vw, 2.6rem);
        overflow-wrap: anywhere
    }
}

:root {
    --purple-primary: #8620f6;
    --purple-bright: #a85cff;
    --page-gutter: clamp(1rem, 3.6vw, 4.5rem);
    --content-max: 88rem;
    --measure: 68ch;
    --section-space: clamp(3.5rem, 7vw, 7.5rem);
    --section-space-compact: clamp(2.5rem, 5vw, 5rem);
    --grid-gap: clamp(.75rem, 1.7vw, 1.4rem);
    --text-xs: clamp(.7rem, .66rem + .18vw, .8rem);
    --text-sm: clamp(.82rem, .77rem + .25vw, .98rem);
    --text-base: clamp(.96rem, .91rem + .28vw, 1.1rem);
    --text-lg: clamp(1.15rem, 1rem + .65vw, 1.55rem);
    --text-display: clamp(3.5rem, 10vw, 10.5rem);
    --color-primary: var(--purple-primary);
    --color-primary-bright: var(--purple-bright);
    --glow-primary: 0 0 38px rgba(134, 32, 246, .28)
}

html,
body {
    inline-size: 100%;
    max-inline-size: 100%;
    overflow-x: clip
}

body {
    font-size: var(--text-base)
}

img {
    max-inline-size: 100%;
    block-size: auto
}

.shell {
    inline-size: 100%;
    max-inline-size: none;
    margin: 0;
    padding-inline: var(--page-gutter)
}

.nav.shell,
.footer.shell {
    /* max-inline-size: var(--content-max); */
    /* margin-inline: auto */
}

.section {
    padding-block: var(--section-space)
}

.section-separated:before {
    inline-size: calc(100% - (var(--page-gutter) * 2));
    max-inline-size: var(--content-max)
}

.section-separated:after {
    background: var(--color-bg)
}

.hero {
    min-block-size: min(56rem, 100svh);
    block-size: auto
}

.hero-layout {
    inline-size: 100%;
    max-inline-size: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--page-gutter)
}

.hero-copy {
    max-inline-size: min(100%, 43rem)
}

h1 {
    font-size: var(--text-display);
    line-height: .8;
    max-inline-size: 100%;
    /* overflow-wrap: anywhere */
}

h1 em {
    letter-spacing: -.055em
}

.hero-lede {
    font-size: var(--text-lg);
    max-inline-size: 30rem
}

.hero-body,
.intro-aside,
.section-head>p {
    font-size: var(--text-base)
}

.section-head {
    max-inline-size: var(--content-max);
    margin-inline: auto;
    gap: clamp(1.5rem, 5vw, 5rem)
}

.capability-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--grid-gap);
    container-type: inline-size
}

.capability-card,
.card-featured,
.code-card,
.capability-card:nth-child(4),
.capability-card:nth-child(5) {
    grid-column: auto;
    min-block-size: clamp(16rem, 24vw, 22.5rem)
}

.card-featured {
    grid-column: span 2
}

.tooling-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(17rem, .8fr);
    gap: var(--grid-gap);
    container-type: inline-size
}

.tool-list {
    gap: var(--grid-gap)
}

.rat-panel {
    min-block-size: clamp(22rem, 34vw, 26rem)
}

.rat-panel h3 {
    font-size: clamp(3rem, 7vw, 6.5rem)
}

.research {
    min-block-size: clamp(32rem, 52vw, 42rem)
}

.research-content {
    inline-size: min(100%, 40rem)
}

.contact-frame {
    gap: clamp(2rem, 6vw, 6rem)
}

.contact-socials a {
    color: var(--color-text);
    font-size: var(--text-sm)
}

.contact-socials a svg {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    color: var(--purple-bright)
}

.footer {
    font-size: var(--text-sm);
    padding-block: clamp(1.5rem, 3vw, 2.5rem)
}

.footer-links {
    font-size: var(--text-sm)
}

.mobile-drawer {
    block-size: 100dvh
}

.drawer-scan {
    display: none !important
}

.product-hero {
    min-block-size: min(48rem, 100svh);
    block-size: auto;
    padding-block: clamp(7rem, 13svh, 10rem) clamp(3rem, 8svh, 6rem)
}

.product-hero-art {
    inset: 0;
    inline-size: 100%;
    opacity: .62
}

.product-hero-art:after {
    background: linear-gradient(90deg, rgba(9, 6, 19, .92) 0%, rgba(9, 6, 19, .64) 38%, rgba(9, 6, 19, .14) 72%, rgba(9, 6, 19, .28) 100%), linear-gradient(0deg, var(--color-bg), transparent 35%)
}

.product-hero-art img {
    object-fit: cover;
    object-position: 68% center;
    filter: saturate(.78) brightness(.76)
}

.product-copy {
    max-inline-size: min(100%, 45rem)
}

.product-copy h1 {
    font-size: clamp(3.7rem, 9vw, 9.4rem)
}

.product-lede {
    font-size: var(--text-lg)
}

.product-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--grid-gap);
    container-type: inline-size
}

.product-card {
    min-block-size: clamp(12rem, 17vw, 15rem)
}

.legal-hero {
    min-block-size: min(34rem, 70svh);
    padding-block: clamp(7rem, 12svh, 9rem) clamp(3rem, 7svh, 5rem)
}

.legal-layout {
    grid-template-columns: minmax(11rem, .25fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 7rem)
}

.legal-content {
    max-inline-size: var(--measure)
}

.legal-content p,
.legal-content li {
    font-size: var(--text-base)
}

.legal-index {
    font-size: var(--text-sm)
}

.consent-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr))
}

.button {
    font-size: var(--text-xs);
    min-block-size: 2.8rem;
    padding-block: .78rem;
    padding-inline: clamp(.9rem, 2vw, 1.35rem)
}

@container (max-width:38rem) {
    .card-featured {
        grid-column: auto
    }

    .capability-card {
        min-block-size: 15rem
    }

    .rat-bottom {
        align-items: flex-start;
        flex-direction: column
    }
}

@media (max-width:52rem) {
    .nav.shell {
        padding-inline: var(--page-gutter)
    }

    .nav-links {
        display: none !important
    }

    .mobile-drawer {
        inline-size: min(86vw, 25rem);
        inset-inline: auto 0;
        block-size: 100dvh
    }

    .drawer-backdrop {
        background: rgba(5, 3, 12, .52);
        backdrop-filter: blur(4px)
    }

    .section-head,
    .intro,
    .terms,
    .signal-layout,
    .contact-frame,
    .product-legal,
    .boundary-layout {
        gap: var(--section-space-compact)
    }

    .section-head {
        align-items: start
    }

    .research-art {
        /* inset: 0 25% 0 -20%; */
        opacity: .35
    }

    .legal-layout {
        grid-template-columns: 1fr
    }

    .legal-index {
        position: static;
        grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
        inline-size: 100%;
        border-inline: 0;
        border-block-start: 1px solid var(--color-border)
    }
}

@media (max-width:34rem) {
    .hero {
        min-block-size: clamp(42rem, 100svh, 50rem);
        padding-block-end: clamp(2.5rem, 6svh, 4rem)
    }

    .hero-art {
        inset: 0 -8% 0 -8%;
        opacity: .9
    }

    .hero-art:after {
        background: linear-gradient(90deg, rgba(9, 6, 19, .72), rgba(9, 6, 19, .12) 68%, rgba(9, 6, 19, .24)), linear-gradient(0deg, var(--color-bg), rgba(9, 6, 19, .2) 58%, rgba(9, 6, 19, .12))
    }

    .hero-art img {
        object-position: 64% center;
        filter: saturate(.83) brightness(.82)
    }

    .hero-layout {
        padding-block-start: clamp(5rem, 11svh, 7rem)
    }

    .hero-lede {
        margin-block-start: clamp(9rem, 20svh, 13rem);
        max-inline-size: 19rem
    }

    .hero-actions {
        inline-size: 100%;
        align-items: stretch;
        flex-wrap: wrap
    }

    .button-primary {
        justify-content: center
    }

    .section {
        padding-block: var(--section-space-compact)
    }

    .capability-grid,
    .product-grid {
        grid-template-columns: 1fr
    }

    .card-featured {
        grid-column: auto
    }

    .tooling-layout {
        grid-template-columns: 1fr
    }

    .tool-list {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr))
    }

    .tool-list article:last-child {
        grid-column: auto
    }

    .research {
        min-block-size: 0
    }

    .research-content {
        /* padding: clamp(1.25rem, 5vw, 2rem) 0 0; */
        border: 0;
        background: linear-gradient(90deg, rgba(9, 6, 19, .84), rgba(9, 6, 19, .25))
    }

    .footer {
        align-items: flex-start
    }

    .footer-links {
        gap: .85rem
    }

    .product-hero {
        min-block-size: 100svh;
        padding-block: clamp(6rem, 12svh, 8rem) 3rem
    }

    .product-hero-art {
        opacity: .76
    }

    .product-hero-art:after {
        background: linear-gradient(90deg, rgba(9, 6, 19, .82), rgba(9, 6, 19, .32) 64%, rgba(9, 6, 19, .1)), linear-gradient(0deg, var(--color-bg), transparent 42%)
    }

    .product-hero-art img {
        object-position: 66% center;
        filter: saturate(.85) brightness(.84)
    }

    .product-copy h1 {
        font-size: clamp(3rem, 15.4vw, 5.5rem)
    }

    .product-lede {
        margin-block-start: clamp(8rem, 18svh, 12rem);
        max-inline-size: 20rem
    }

    .product-actions {
        align-items: stretch;
        flex-wrap: wrap
    }

    .legal-hero h1 {
        font-size: clamp(2.8rem, 14vw, 4.4rem)
    }

    .legal-notice {
        padding: clamp(1.25rem, 5vw, 2rem)
    }

    .legal-content {
        gap: clamp(2.5rem, 8vw, 4rem)
    }
}

.tools-cta {
    display: inline-flex;
    margin-top: clamp(1.35rem, 3vw, 2.25rem);
    color: var(--color-primary-bright);
    font: 500 var(--text-sm) var(--font-mono);
    letter-spacing: .06em
}

.tools-cta:hover {
    color: #d8c1ff
}

.product-showcase .section-head {
    margin-bottom: clamp(1.6rem, 4vw, 3.5rem)
}

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--grid-gap)
}

.showcase-card {
    position: relative;
    display: block;
    min-inline-size: 0;
    aspect-ratio: 1.55;
    overflow: hidden;
    border: 1px solid rgba(187, 156, 255, .28);
    background: #120c24;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    isolation: isolate
}

.showcase-card--lead {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto
}

.showcase-card:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(7, 5, 16, .03) 42%, rgba(7, 5, 16, .78));
    pointer-events: none;
    transition: background .35s var(--ease)
}

.showcase-card:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border: 1px solid transparent;
    transition: border-color .35s var(--ease);
    pointer-events: none
}

.showcase-card img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: top;
    filter: saturate(.75) brightness(.82);
    transition: transform .6s var(--ease), filter .35s var(--ease)
}

.showcase-card span {
    position: absolute;
    inset: auto 1rem .8rem;
    z-index: 3;
    color: #f0eaff;
    font: 500 var(--text-xs) var(--font-mono);
    letter-spacing: .11em
}

.showcase-card:hover {
    border-color: rgba(168, 92, 255, .78);
    box-shadow: 0 0 0 1px rgba(134, 32, 246, .26), 0 18px 45px rgba(0, 0, 0, .3)
}

.showcase-card:hover img {
    transform: scale(1.035);
    filter: saturate(.92) brightness(.98)
}

.showcase-card:hover:before {
    background: linear-gradient(180deg, rgba(7, 5, 16, .01) 36%, rgba(7, 5, 16, .58))
}

.showcase-card:hover:after {
    border-color: rgba(207, 182, 255, .42)
}

.directory-feature {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: end;
    min-block-size: clamp(17rem, 30vw, 24rem);
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid rgba(187, 156, 255, .3);
    background: radial-gradient(circle at 82% 12%, rgba(134, 32, 246, .2), transparent 26%), linear-gradient(135deg, rgba(27, 17, 52, .82), rgba(13, 9, 28, .72));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    overflow: hidden
}

.directory-feature h3 {
    margin: .4rem 0 1rem;
    font: 600 clamp(3.2rem, 7vw, 7rem)/.82 var(--font-display);
    letter-spacing: -.07em
}

.directory-feature h3 span {
    color: var(--color-primary-bright)
}

.directory-feature>div:first-child {
    position: relative;
    z-index: 1;
    max-inline-size: 34rem
}

.directory-feature>div:first-child>p:not(.eyebrow) {
    max-inline-size: 34rem;
    color: var(--color-text-muted)
}

.directory-status {
    display: grid;
    gap: .35rem;
    justify-items: end;
    text-align: end;
    font-family: var(--font-mono);
    letter-spacing: .1em
}

.directory-status span {
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: .8;
    color: rgba(168, 92, 255, .72)
}

.directory-status b {
    font-size: var(--text-xs);
    color: #f0eaff
}

.directory-status small {
    font-size: var(--text-xs);
    color: var(--color-text-muted)
}

@media (max-width:52rem) {
    .showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .showcase-card--lead {
        grid-column: span 2;
        aspect-ratio: 1.55
    }

    .directory-feature {
        align-items: flex-start;
        flex-direction: column
    }

    .directory-status {
        justify-items: start;
        text-align: start
    }
}

@media (max-width:34rem) {
    .showcase-grid {
        grid-template-columns: 1fr
    }

    .showcase-card,
    .showcase-card--lead {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: 1.52
    }

    .showcase-card--lead {
        aspect-ratio: 1.45
    }

    .showcase-card span {
        inset-inline: .8rem;
        inset-block-end: .65rem
    }

    .directory-feature {
        min-block-size: 0
    }

    .directory-feature h3 {
        font-size: clamp(3.2rem, 18vw, 5rem)
    }
}

@media (prefers-reduced-motion:reduce) {

    .showcase-card img,
    .showcase-card:before,
    .showcase-card:after {
        transition: none
    }
}

.hero-art img {
    filter: saturate(.9) brightness(.9) contrast(1.02)
}

.hero:before {
    background: radial-gradient(circle at 76% 35%, rgba(134, 32, 246, .28), transparent 30%), linear-gradient(90deg, var(--color-bg) 5%, rgba(9, 6, 19, .72) 42%, rgba(9, 6, 19, .05) 76%, rgba(9, 6, 19, .82) 100%)
}

.showcase-card img {
    filter: saturate(.88) brightness(.94) contrast(1.02)
}

@media (max-width:34rem) {
    .hero-art {
        opacity: .96
    }

    .hero-art img {
        filter: saturate(.95) brightness(.98) contrast(1.03)
    }

    .hero-art:after {
        background: linear-gradient(90deg, rgba(9, 6, 19, .6), rgba(9, 6, 19, .06) 68%, rgba(9, 6, 19, .18)), linear-gradient(0deg, var(--color-bg), rgba(9, 6, 19, .16) 58%, rgba(9, 6, 19, .08))
    }
}

@media (max-width:340px) {
    .hero-copy h1 {
        font-size: clamp(2.65rem, 14.4vw, 3rem)
    }

    .hero-copy h1 span {
        white-space: nowrap
    }
}
/* Legal reading system: calm hierarchy, compact summaries and reduced-motion-safe reveals. */
.legal-hero h1 {
    max-inline-size: min(100%, 10ch);
    overflow-wrap: normal;
    word-break: normal;
}

.legal-hero h1 > span,
.legal-hero h1 > em {
    white-space: nowrap;
}

.legal-notice {
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 50px rgba(0, 0, 0, .15);
}

.legal-notice:after {
    content: "";
    position: absolute;
    inset: auto -8% -60% auto;
    inline-size: 18rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(134, 32, 246, .2), transparent 68%);
    pointer-events: none;
}

.legal-notice > * {
    position: relative;
    z-index: 1;
}

.legal-quick {
    display: grid;
    grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr);
    align-items: end;
    gap: clamp(1.5rem, 5vw, 5rem);
    padding-block: var(--section-space-compact);
}

.legal-quick-heading h2 {
    margin: .55rem 0 0;
}

.legal-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.legal-quick-grid article,
.legal-content article {
    position: relative;
    border: 1px solid rgba(193, 164, 255, .22);
    background: linear-gradient(145deg, rgba(32, 22, 61, .7), rgba(12, 8, 27, .66));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}

.legal-quick-grid article {
    min-block-size: 12.5rem;
    padding: clamp(1.1rem, 2.2vw, 1.5rem);
    transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}

.legal-quick-grid article > span {
    display: block;
    margin-block-end: clamp(1.2rem, 3vw, 2.3rem);
    color: var(--color-primary-bright);
    font: 500 var(--text-xs) var(--font-mono);
    letter-spacing: .12em;
}

.legal-quick-grid h3 {
    margin: 0 0 .55rem;
    font: 600 clamp(1rem, 1.2vw, 1.22rem) var(--font-display);
}

.legal-quick-grid p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.legal-content {
    gap: clamp(1.1rem, 2.8vw, 2.15rem);
}

.legal-content article {
    padding: clamp(1.35rem, 3.4vw, 2.6rem);
    scroll-margin-top: 7rem;
    transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}

.legal-content article:target,
.legal-content article:hover,
.legal-quick-grid article:hover {
    transform: translateY(-3px);
    border-color: rgba(168, 92, 255, .72);
    background: linear-gradient(145deg, rgba(43, 28, 83, .76), rgba(15, 10, 32, .78));
    box-shadow: 0 14px 36px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.legal-content h2 {
    max-inline-size: 22ch;
    margin-block-end: .95rem;
}

.legal-content p,
.legal-content li {
    line-height: 1.72;
}

.legal-content ul {
    display: grid;
    gap: .2rem;
    margin-block: 1.35rem;
    padding: 0;
    list-style: none;
}

.legal-content li {
    position: relative;
    margin: 0;
    padding: .62rem .75rem .62rem 1.9rem;
    border-left: 1px solid rgba(168, 92, 255, .42);
    background: rgba(7, 4, 16, .26);
}

.legal-content li:before {
    content: "›";
    position: absolute;
    inset: .56rem auto auto .72rem;
    color: var(--color-primary-bright);
    font: 500 1rem var(--font-mono);
}

.legal-content li::marker {
    content: "";
}

.legal-emphasis {
    margin-block-start: 1.4rem;
    padding: .95rem 1.1rem;
    border: 1px solid rgba(168, 92, 255, .35);
    border-left: 2px solid var(--color-primary-bright);
    background: rgba(134, 32, 246, .09);
    line-height: 1.62 !important;
}

.consent-grid div {
    border-color: rgba(193, 164, 255, .25);
    transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}

.consent-grid div:hover {
    transform: translateY(-2px);
    border-color: rgba(168, 92, 255, .68);
    background: rgba(41, 25, 80, .55);
}

.legal-index a {
    min-block-size: 2.35rem;
    display: flex;
    align-items: center;
    border-left-width: 2px;
}

.legal-index a:focus-visible,
.legal-quick-grid article:focus-within,
.legal-content article:focus-within {
    outline: 2px solid var(--color-primary-bright);
    outline-offset: 3px;
}

@media (max-width:52rem) {
    .legal-quick {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .legal-quick-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width:34rem) {
    .legal-hero {
        min-block-size: min(34rem, 72svh);
    }

    .legal-hero h1 {
        font-size: clamp(2.45rem, 10.8vw, 3.35rem);
        line-height: .86;
        letter-spacing: -.07em;
    }

    .legal-hero > p:last-child {
        max-inline-size: 28ch;
        font-size: var(--text-base);
        line-height: 1.55;
    }

    .legal-notice {
        gap: .8rem;
    }

    .legal-notice h2 {
        margin-block-end: .7rem;
    }

    .legal-quick-grid {
        grid-template-columns: 1fr;
    }

    .legal-quick-grid article {
        min-block-size: 0;
    }

    .legal-quick-grid article > span {
        margin-block-end: .8rem;
    }

    .legal-content article {
        padding: 1.2rem;
    }

    .legal-content h2 {
        font-size: clamp(1.65rem, 8.5vw, 2.25rem);
    }

    .legal-content p,
    .legal-content li {
        font-size: var(--text-sm);
        line-height: 1.64;
    }

    .legal-content li {
        padding: .62rem .65rem .62rem 1.65rem;
    }

    .consent-grid {
        gap: .6rem;
    }
}

@media (hover:none) {
    .legal-content article:hover,
    .legal-quick-grid article:hover,
    .consent-grid div:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion:reduce) {
    .legal-quick-grid article,
    .legal-content article,
    .consent-grid div {
        transition: none;
    }
}
@media (max-width:34rem){.legal-hero h1 > em{font-size:.72em;letter-spacing:-.06em}}
@media (max-width:340px){.legal-hero h1 > em{font-size:.63em}}
/* GOSHT RAT product viewer and transparent licensing state. */
.showcase-card {
    inline-size: 100%;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: zoom-in;
}

.showcase-card:focus-visible,
.gallery-close:focus-visible,
.gallery-controls button:focus-visible {
    outline: 2px solid #f0eaff;
    outline-offset: 3px;
}

.product-gallery {
    inline-size: min(94vw, 82rem);
    max-inline-size: none;
    max-block-size: min(92dvh, 60rem);
    margin: auto;
    padding: 0;
    overflow: visible;
    border: 1px solid rgba(193, 164, 255, .5);
    background: linear-gradient(145deg, rgba(24, 15, 47, .99), rgba(7, 5, 16, .99));
    box-shadow: 0 28px 90px rgba(0, 0, 0, .66), 0 0 0 1px rgba(134, 32, 246, .18);
    color: var(--color-text);
}

.product-gallery::backdrop {
    background: rgba(4, 3, 11, .78);
    backdrop-filter: blur(9px);
}

.product-gallery[open] {
    animation: gallery-in .32s var(--ease) both;
}

.gallery-frame {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-block-size: inherit;
}

.gallery-top,
.gallery-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    border-color: rgba(193, 164, 255, .2);
    background: rgba(12, 8, 28, .72);
}

.gallery-top {
    border-bottom: 1px solid rgba(193, 164, 255, .2);
}

.gallery-top p,
.gallery-controls p {
    margin: 0;
    color: var(--color-primary-bright);
    font: 500 var(--text-xs) var(--font-mono);
    letter-spacing: .1em;
}

.gallery-close,
.gallery-controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-block-size: 2.4rem;
    padding: .55rem .7rem;
    border: 1px solid rgba(193, 164, 255, .3);
    background: rgba(30, 20, 58, .72);
    color: var(--color-text);
    font: 500 var(--text-xs) var(--font-mono);
    letter-spacing: .04em;
    cursor: pointer;
    transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}

.gallery-close {
    inline-size: 2.4rem;
    padding: 0;
}

.gallery-close:hover,
.gallery-controls button:hover {
    transform: translateY(-1px);
    border-color: var(--color-primary-bright);
    background: rgba(54, 31, 106, .85);
    color: #fff;
}

.gallery-close svg,
.gallery-controls svg {
    inline-size: 1rem;
}

.product-gallery figure {
    position: relative;
    display: grid;
    place-items: center;
    min-block-size: 0;
    margin: 0;
    overflow: hidden;
    background: radial-gradient(circle at center, rgba(134, 32, 246, .17), transparent 62%), #070510;
}

.product-gallery figure:after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, .03);
    pointer-events: none;
}

.product-gallery figure img {
    display: block;
    inline-size: 100%;
    block-size: min(68dvh, 47rem);
    object-fit: contain;
    object-position: center;
    transition: opacity .2s var(--ease), transform .35s var(--ease);
}

.product-gallery figcaption {
    position: absolute;
    inset: auto 1rem 1rem;
    z-index: 1;
    padding: .4rem .6rem;
    border: 1px solid rgba(193, 164, 255, .28);
    background: rgba(7, 5, 16, .76);
    color: #f0eaff;
    font: 500 var(--text-xs) var(--font-mono);
    letter-spacing: .1em;
}

.gallery-controls {
    border-top: 1px solid rgba(193, 164, 255, .2);
}

@keyframes gallery-in {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: none; }
}

.product-licensing .section-head {
    margin-bottom: clamp(1.6rem, 4vw, 3.5rem);
}

.licensing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(17rem, .88fr);
    gap: var(--grid-gap);
}

.license-card,
.license-notice {
    position: relative;
    padding: clamp(1.35rem, 3.2vw, 2.4rem);
    border: 1px solid rgba(193, 164, 255, .28);
    overflow: hidden;
}

.license-card {
    background: radial-gradient(circle at 88% 8%, rgba(134, 32, 246, .2), transparent 28%), linear-gradient(145deg, rgba(36, 22, 70, .82), rgba(12, 8, 27, .74));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
}

.license-notice {
    background: linear-gradient(145deg, rgba(25, 17, 49, .84), rgba(10, 7, 23, .74));
}

.license-card-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(193, 164, 255, .17);
}

.license-card-top p,
.license-card-top span {
    margin: 0;
    font: 500 var(--text-xs) var(--font-mono);
    letter-spacing: .1em;
}

.license-card-top p {
    color: var(--color-primary-bright);
}

.license-card-top span {
    color: var(--color-text-muted);
}

.license-card h3,
.license-notice h3 {
    margin: clamp(1.3rem, 3vw, 2rem) 0 1rem;
    font: 600 clamp(1.45rem, 2.2vw, 2.3rem) var(--font-display);
}

.license-card dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    border-block: 1px solid rgba(193, 164, 255, .17);
}

.license-card dl div {
    padding: .9rem .8rem;
    border-right: 1px solid rgba(193, 164, 255, .17);
}

.license-card dl div:last-child {
    border-right: 0;
}

.license-card dt,
.license-card dd {
    margin: 0;
}

.license-card dt {
    margin-bottom: .35rem;
    color: var(--color-primary-bright);
    font: 500 var(--text-xs) var(--font-mono);
    letter-spacing: .08em;
}

.license-card dd {
    color: var(--color-text);
    font-size: var(--text-sm);
}

.license-note,
.license-notice > p:not(.eyebrow) {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.65;
}

.license-card .text-link,
.license-notice .text-link {
    display: inline-flex;
    margin-top: 1rem;
}

.license-notice > svg {
    inline-size: 1.8rem;
    color: var(--color-primary-bright);
}

.license-notice .eyebrow {
    margin: 1.25rem 0 0;
}

@media (max-width:52rem) {
    .licensing-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width:34rem) {
    .product-gallery {
        inline-size: calc(100vw - 1rem);
        max-block-size: calc(100dvh - 1rem);
    }

    .gallery-top,
    .gallery-controls {
        padding: .7rem;
    }

    .gallery-frame {
        grid-template-rows: auto auto auto;
    }

    .gallery-top p {
        max-inline-size: 17rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .gallery-controls button span {
        display: none;
    }

    .product-gallery figure img {
        block-size: auto;
        max-block-size: min(54dvh, 30rem);
    }

    .product-gallery figcaption {
        inset: auto .7rem .7rem;
    }

    .license-card dl {
        grid-template-columns: 1fr;
    }

    .license-card dl div {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        border-right: 0;
        border-bottom: 1px solid rgba(193, 164, 255, .17);
    }

    .license-card dl div:last-child {
        border-bottom: 0;
    }

    .license-card dd {
        text-align: end;
    }
}

@media (prefers-reduced-motion:reduce) {
    .product-gallery[open] {
        animation: none;
    }

    .showcase-card,
    .gallery-close,
    .gallery-controls button {
        transition: none;
    }
}
/* Tools directory: compact category cards with controlled illumination. */
.tool-catalog .section-head {
    margin-bottom: clamp(1.75rem, 4vw, 3.5rem);
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.catalog-card {
    position: relative;
    display: flex;
    min-block-size: 16rem;
    padding: clamp(1.15rem, 2.4vw, 1.65rem);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(193, 164, 255, .24);
    background: linear-gradient(145deg, rgba(30, 20, 57, .76), rgba(10, 7, 23, .72));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
    isolation: isolate;
    transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}

.catalog-card:before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -30% -40% auto auto;
    inline-size: 11rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(134, 32, 246, .2), transparent 68%);
    opacity: .45;
    transform: translate3d(28%, -22%, 0);
    transition: opacity .35s var(--ease), transform .55s var(--ease);
}

.catalog-card:after {
    content: "";
    position: absolute;
    inset: auto 1.2rem 0;
    block-size: 1px;
    background: linear-gradient(90deg, transparent, rgba(168, 92, 255, .7), transparent);
    opacity: .35;
    transition: opacity .35s var(--ease), inset .35s var(--ease);
}

.catalog-card--wide {
    grid-column: span 2;
    min-block-size: 18rem;
}

.catalog-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
    color: var(--color-primary-bright);
}

.catalog-card-top svg {
    inline-size: 1.35rem;
    transition: transform .35s var(--ease), filter .35s var(--ease);
}

.catalog-card-top span,
.catalog-card small {
    color: var(--color-text-muted);
    font: 500 var(--text-xs) var(--font-mono);
    letter-spacing: .1em;
}

.catalog-card h3 {
    max-inline-size: 16ch;
    margin: auto 0 .55rem;
    font: 600 clamp(1.25rem, 1.7vw, 1.75rem) var(--font-display);
}

.catalog-card p {
    max-inline-size: 38ch;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.catalog-card small {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: 1.25rem;
}

.catalog-card small b {
    inline-size: .38rem;
    block-size: .38rem;
    border-radius: 50%;
    background: var(--color-primary-bright);
    box-shadow: 0 0 10px rgba(168, 92, 255, .75);
}

.catalog-card:hover,
.catalog-card:focus-within {
    transform: translateY(-3px);
    border-color: rgba(168, 92, 255, .72);
    background: linear-gradient(145deg, rgba(47, 29, 91, .8), rgba(14, 9, 31, .8));
    box-shadow: 0 16px 36px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.catalog-card:hover:before,
.catalog-card:focus-within:before {
    opacity: 1;
    transform: translate3d(5%, -8%, 0);
}

.catalog-card:hover:after,
.catalog-card:focus-within:after {
    inset-inline: .8rem;
    opacity: .85;
}

.catalog-card:hover .catalog-card-top svg,
.catalog-card:focus-within .catalog-card-top svg {
    transform: translateY(-2px) scale(1.08);
    filter: drop-shadow(0 0 9px rgba(168, 92, 255, .6));
}

.license-card--available {
    background: radial-gradient(circle at 88% 8%, rgba(134, 32, 246, .3), transparent 29%), linear-gradient(145deg, rgba(41, 24, 82, .86), rgba(12, 8, 27, .78));
    border-color: rgba(168, 92, 255, .5);
}

.license-card--available .license-card-top span {
    color: #d9c5ff;
}

.license-card--available h3 {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    color: var(--color-text);
    font-size: clamp(1.3rem, 2vw, 1.95rem);
    letter-spacing: .03em;
}

.license-card--available h3 strong {
    color: #f6f1ff;
    font: 600 clamp(3rem, 5vw, 5.1rem)/.82 var(--font-display);
    letter-spacing: -.07em;
    text-shadow: 0 0 24px rgba(134, 32, 246, .24);
}

@media (max-width:52rem) {
    .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .catalog-card--wide {
        grid-column: span 2;
    }
}

@media (max-width:34rem) {
    .catalog-grid {
        grid-template-columns: 1fr;
    }

    .catalog-card,
    .catalog-card--wide {
        grid-column: auto;
        min-block-size: 13.5rem;
    }

    .catalog-card h3 {
        max-inline-size: none;
    }
}

@media (hover:none) {
    .catalog-card:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion:reduce) {
    .catalog-card,
    .catalog-card:before,
    .catalog-card:after,
    .catalog-card-top svg {
        transition: none;
    }
}
/* Product-card pass for the Tools directory. */
.directory-feature--product {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(22rem, 1.1fr);
    align-items: stretch;
    min-block-size: clamp(25rem, 37vw, 32rem);
    padding: 0;
    background: linear-gradient(135deg, rgba(25, 15, 52, .92), rgba(9, 6, 20, .78));
}

.directory-feature-copy {
    display: flex;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    flex-direction: column;
    align-items: flex-start;
}

.product-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    inline-size: 100%;
    color: var(--color-text-muted);
    font: 500 var(--text-xs) var(--font-mono);
    letter-spacing: .09em;
}

.product-state > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #d9c5ff;
}

.product-state b {
    inline-size: .4rem;
    block-size: .4rem;
    border-radius: 50%;
    background: var(--color-primary-bright);
    box-shadow: 0 0 12px rgba(168, 92, 255, .8);
}

.directory-feature-copy .eyebrow {
    margin: clamp(1.25rem, 3vw, 2.6rem) 0 .45rem;
}

.directory-feature-copy h3 {
    margin: 0 0 1rem;
}

.directory-feature-copy > p:not(.eyebrow) {
    max-inline-size: 34rem;
    color: var(--color-text-muted);
}

.directory-metadata,
.tool-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.directory-metadata {
    margin: auto 0 1.35rem;
}

.directory-metadata span,
.tool-tags span {
    padding: .34rem .52rem;
    border: 1px solid rgba(193, 164, 255, .24);
    background: rgba(9, 6, 20, .32);
    color: var(--color-text-muted);
    font: 500 var(--text-xs) var(--font-mono);
    letter-spacing: .07em;
}

.directory-metadata strong {
    padding: .34rem .52rem;
    border: 1px solid rgba(168, 92, 255, .5);
    color: #f3edff;
    font: 500 var(--text-xs) var(--font-mono);
    letter-spacing: .08em;
}

.directory-feature-preview {
    position: relative;
    min-block-size: 17rem;
    overflow: hidden;
    border-left: 1px solid rgba(193, 164, 255, .22);
    background: radial-gradient(circle at 55% 35%, rgba(134, 32, 246, .23), transparent 38%), #090613;
}

.directory-feature-preview:before,
.directory-feature-preview:after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.directory-feature-preview:before {
    inset: 0;
    background: linear-gradient(90deg, rgba(12, 8, 28, .6), transparent 38%), linear-gradient(0deg, rgba(8, 5, 18, .75), transparent 38%);
}

.directory-feature-preview:after {
    inset: 1rem;
    border: 1px solid rgba(193, 164, 255, .22);
}

.directory-feature-preview img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: top center;
    filter: saturate(.85) brightness(.72);
    transition: transform .75s var(--ease), filter .45s var(--ease);
}

.feature-preview-hud {
    position: absolute;
    z-index: 2;
    inset: auto 1.6rem 1.45rem;
    display: flex;
    justify-content: space-between;
    color: #f1eaff;
    font: 500 var(--text-xs) var(--font-mono);
    letter-spacing: .09em;
}

.feature-preview-hud b {
    color: var(--color-primary-bright);
    font-weight: 500;
}

.directory-feature--product:hover .directory-feature-preview img {
    transform: scale(1.035);
    filter: saturate(.98) brightness(.9);
}

.tool-catalog .section-head {
    margin-bottom: clamp(1.8rem, 4vw, 3.3rem);
}

.catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tool-product {
    position: relative;
    display: grid;
    min-block-size: 22rem;
    overflow: hidden;
    border: 1px solid rgba(193, 164, 255, .24);
    background: linear-gradient(145deg, rgba(28, 18, 55, .78), rgba(9, 6, 20, .82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
    isolation: isolate;
    transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease);
}

.tool-product:before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: auto -25% -45% auto;
    inline-size: 14rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(134, 32, 246, .28), transparent 68%);
    opacity: .45;
    transform: translate3d(20%, 15%, 0);
    transition: transform .55s var(--ease), opacity .4s var(--ease);
}

.tool-product--wide {
    grid-column: span 2;
    grid-template-columns: minmax(13rem, .75fr) minmax(0, 1.25fr);
    min-block-size: 18.5rem;
}

.tool-preview {
    position: relative;
    display: flex;
    min-block-size: 9.4rem;
    padding: 1rem;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    border-bottom: 1px solid rgba(193, 164, 255, .18);
    background: radial-gradient(circle at 50% 38%, rgba(134, 32, 246, .28), transparent 25%), linear-gradient(135deg, rgba(49, 28, 97, .62), rgba(8, 5, 19, .15)), repeating-linear-gradient(90deg, rgba(193, 164, 255, .075) 0 1px, transparent 1px 24px);
}

.tool-preview:after {
    content: "";
    position: absolute;
    inset: .75rem;
    border: 1px solid rgba(193, 164, 255, .22);
    pointer-events: none;
}

.tool-preview svg {
    position: relative;
    z-index: 1;
    inline-size: 2rem;
    color: var(--color-primary-bright);
    filter: drop-shadow(0 0 12px rgba(168, 92, 255, .5));
    transition: transform .4s var(--ease), filter .4s var(--ease);
}

.tool-preview > span {
    position: absolute;
    z-index: 1;
    inset: auto .9rem .55rem auto;
    color: rgba(221, 202, 255, .23);
    font: 600 clamp(3.5rem, 8vw, 6.5rem)/.7 var(--font-display);
    letter-spacing: -.08em;
    transition: transform .55s var(--ease), color .4s var(--ease);
}

.tool-preview small {
    position: relative;
    z-index: 1;
    color: #e7dbff;
    font: 500 var(--text-xs) var(--font-mono);
    letter-spacing: .09em;
}

.tool-product--wide .tool-preview {
    min-block-size: auto;
    border-right: 1px solid rgba(193, 164, 255, .18);
    border-bottom: 0;
}

.tool-product-body {
    display: flex;
    padding: 1.05rem 1.1rem 1rem;
    flex-direction: column;
}

.tool-product-body h3 {
    margin: 1.1rem 0 .5rem;
    font: 600 clamp(1.3rem, 1.8vw, 1.9rem) var(--font-display);
}

.tool-product-body > p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.58;
}

.tool-tags {
    margin-top: 1.1rem;
}

.tool-product-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: auto;
    padding-top: 1rem;
    color: var(--color-text-muted);
    font: 500 var(--text-xs) var(--font-mono);
    letter-spacing: .08em;
}

.tool-product-foot svg {
    inline-size: 1rem;
    color: var(--color-primary-bright);
    transition: transform .3s var(--ease);
}

.tool-product:hover,
.tool-product:focus-within {
    transform: translateY(-4px);
    border-color: rgba(168, 92, 255, .75);
    background: linear-gradient(145deg, rgba(47, 28, 91, .82), rgba(12, 8, 28, .86));
    box-shadow: 0 18px 38px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.tool-product:hover:before,
.tool-product:focus-within:before {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.tool-product:hover .tool-preview svg,
.tool-product:focus-within .tool-preview svg {
    transform: translateY(-3px) scale(1.1);
    filter: drop-shadow(0 0 16px rgba(168, 92, 255, .82));
}

.tool-product:hover .tool-preview > span,
.tool-product:focus-within .tool-preview > span {
    color: rgba(221, 202, 255, .42);
    transform: translateX(-.2rem);
}

.tool-product:hover .tool-product-foot svg,
.tool-product:focus-within .tool-product-foot svg {
    transform: translate(2px, -2px);
}

@media (max-width:52rem) {
    .directory-feature--product {
        grid-template-columns: 1fr;
    }

    .directory-feature-preview {
        min-block-size: 17rem;
        border-top: 1px solid rgba(193, 164, 255, .22);
        border-left: 0;
    }

    .tool-product--wide {
        grid-column: span 2;
        grid-template-columns: minmax(11rem, .7fr) minmax(0, 1.3fr);
    }
}

@media (max-width:34rem) {
    .directory-feature-copy {
        min-block-size: 23rem;
    }

    .directory-feature-preview {
        min-block-size: 14rem;
    }

    .feature-preview-hud {
        inset-inline: 1rem;
    }

    .tool-product,
    .tool-product--wide {
        grid-column: auto;
        grid-template-columns: 1fr;
        min-block-size: 0;
    }

    .tool-product--wide .tool-preview {
        min-block-size: 10.5rem;
        border-right: 0;
        border-bottom: 1px solid rgba(193, 164, 255, .18);
    }

    .tool-preview {
        min-block-size: 9.5rem;
    }

    .tool-product-body {
        min-block-size: 12.5rem;
    }
}

@media (hover:none) {
    .tool-product:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion:reduce) {
    .directory-feature-preview img,
    .tool-product,
    .tool-product:before,
    .tool-preview svg,
    .tool-preview > span,
    .tool-product-foot svg {
        transition: none;
    }
}
@media (max-width:52rem){.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:34rem){.catalog-grid{grid-template-columns:1fr}}

/* Distinct product previews for the Tools directory. These are UI compositions,
   not decorative stock art, so every concept communicates its intended context. */
.tool-preview[class*="tool-preview--"] {
    display: block;
    isolation: isolate;
    overflow: hidden;
    padding: 1rem;
    background: #090714;
}

.tool-preview[class*="tool-preview--"]:after {
    z-index: -1;
    opacity: .72;
}

.tool-preview[class*="tool-preview--"] > small {
    position: absolute;
    z-index: 3;
    right: .9rem;
    bottom: .75rem;
    margin: 0;
    color: rgba(239, 233, 255, .62);
    font-size: .57rem;
    letter-spacing: .14em;
}

.preview-terminal,
.preview-browser,
.preview-message,
.preview-analysis,
.preview-map,
.preview-workflow {
    position: relative;
    z-index: 1;
    height: 100%;
    min-height: 8.75rem;
    border: 1px solid rgba(205, 177, 255, .28);
    background: rgba(11, 8, 25, .7);
    box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 1.2rem 2.5rem rgba(27, 5, 71, .18);
    transition: transform .45s cubic-bezier(.2, .7, .2, 1), border-color .45s ease, box-shadow .45s ease;
}

.preview-terminal-head,
.preview-browser-top,
.preview-message-head,
.preview-analysis-head {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 1.95rem;
    padding: 0 .7rem;
    border-bottom: 1px solid rgba(205, 177, 255, .15);
    color: rgba(231, 217, 255, .8);
    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .1em;
}

.preview-terminal-head svg,
.preview-browser-top svg,
.preview-message-head svg,
.preview-analysis-head svg {
    width: .78rem;
    height: .78rem;
    color: #c888ff;
}

.preview-terminal-head b,
.preview-browser-top b {
    width: .33rem;
    height: .33rem;
    margin-left: auto;
    border-radius: 50%;
    background: #70e4ff;
    box-shadow: 0 0 .75rem #70e4ff;
}

.tool-preview--redteam {
    background: radial-gradient(circle at 18% 12%, rgba(172, 65, 255, .32), transparent 36%), linear-gradient(135deg, #16052a, #080713 70%);
}

.preview-terminal {
    padding-bottom: .7rem;
    background: linear-gradient(105deg, rgba(28, 8, 49, .92), rgba(7, 10, 22, .78));
}

.preview-terminal p {
    margin: .7rem .7rem 0;
    color: #c8a9ff;
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .04em;
}

.preview-terminal p::before { content: "> "; color: #79e5ff; }
.preview-terminal-bars { display: flex; gap: .28rem; margin: .85rem .7rem 0; align-items: end; height: 1.5rem; }
.preview-terminal-bars span { display: block; width: 18%; background: linear-gradient(#bd7eff, rgba(107, 38, 215, .22)); box-shadow: 0 0 .7rem rgba(168, 92, 255, .34); }
.preview-terminal-bars span:nth-child(1) { height: 43%; }
.preview-terminal-bars span:nth-child(2) { height: 82%; }
.preview-terminal-bars span:nth-child(3) { height: 60%; }

.tool-preview--web { background: radial-gradient(circle at 92% 18%, rgba(88, 197, 255, .18), transparent 36%), linear-gradient(145deg, #0d1123, #0a0615); }
.preview-browser { transform: perspective(28rem) rotateX(3deg) rotateY(-2deg); overflow: hidden; background: linear-gradient(145deg, rgba(15, 21, 44, .9), rgba(16, 8, 31, .84)); }
.preview-browser-top span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-browser-lines { display: grid; grid-template-columns: 1.15fr .7fr; gap: .42rem; padding: .8rem; }
.preview-browser-lines span { display: block; min-height: 2.1rem; border: 1px solid rgba(170, 205, 255, .18); background: linear-gradient(135deg, rgba(117, 227, 255, .15), rgba(133, 57, 240, .08)); }
.preview-browser-lines span:first-child { grid-row: span 2; min-height: 4.7rem; }
.preview-browser-chip { position: absolute; right: .7rem; bottom: .7rem; padding: .32rem .45rem; border: 1px solid rgba(115, 227, 255, .38); color: #b5efff; font-family: var(--font-mono); font-size: .52rem; letter-spacing: .08em; background: rgba(8, 28, 47, .72); }

.tool-preview--phishing { background: radial-gradient(circle at 80% 82%, rgba(255, 89, 199, .18), transparent 38%), linear-gradient(135deg, #160716, #0a0818 70%); }
.preview-message { margin-top: .45rem; min-height: 8.25rem; transform: rotate(-2deg); background: linear-gradient(145deg, rgba(42, 10, 40, .86), rgba(12, 10, 29, .92)); }
.preview-message-lines { padding: .8rem .72rem .4rem; }
.preview-message-lines span { display: block; height: .35rem; margin-bottom: .45rem; background: rgba(234, 212, 255, .22); }
.preview-message-lines span:nth-child(1) { width: 76%; }.preview-message-lines span:nth-child(2) { width: 93%; }.preview-message-lines span:nth-child(3) { width: 57%; }
.preview-message-state { display: inline-flex; align-items: center; gap: .35rem; margin: .15rem .72rem; color: #eebdff; font-family: var(--font-mono); font-size: .53rem; letter-spacing: .08em; }.preview-message-state svg { width: .75rem; height: .75rem; color: #bb82ff; }

.tool-preview--research { background: radial-gradient(circle at 24% 24%, rgba(134, 32, 246, .42), transparent 31%), linear-gradient(145deg, #130923, #070a13); }
.preview-analysis { background: repeating-linear-gradient(0deg, transparent 0 1.45rem, rgba(203, 176, 255, .08) 1.48rem 1.52rem), rgba(9, 14, 25, .9); }
.preview-analysis p { display: flex; align-items: center; gap: .5rem; margin: .58rem .7rem; color: rgba(228, 218, 255, .7); font-family: var(--font-mono); font-size: .58rem; }.preview-analysis p b { color: #b76cff; font-weight: 500; }.preview-analysis p i { display: block; flex: 1; height: .28rem; background: linear-gradient(90deg, #a950ff, rgba(168, 92, 255, .08)); }.preview-analysis p:nth-child(3) i { width: 56%; flex: none; }.preview-analysis p:nth-child(4) i { width: 78%; flex: none; }

.tool-preview--telemetry { background: radial-gradient(circle at 76% 30%, rgba(85, 223, 255, .22), transparent 18%), linear-gradient(145deg, #061421, #13082b); }
.preview-map { overflow: hidden; background-color: #0a1320; background-image: linear-gradient(rgba(127, 209, 255, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(127, 209, 255, .11) 1px, transparent 1px); background-size: 1.25rem 1.25rem; }
.preview-map > svg { position: absolute; top: 2.1rem; left: 46%; width: 1.6rem; height: 1.6rem; color: #d39bff; filter: drop-shadow(0 0 .65rem rgba(182, 92, 255, .8)); }
.preview-map > b { position: absolute; top: 3.1rem; left: 18%; width: 63%; height: 1px; transform: rotate(-13deg); transform-origin: left; background: linear-gradient(90deg, transparent, #a659ff 25%, #76e5ff 66%, transparent); }
.map-node { position: absolute; width: .46rem; height: .46rem; border: 1px solid #a76aff; border-radius: 50%; background: #e5c9ff; box-shadow: 0 0 .7rem #af67ff; }.map-node--one { top: 27%; left: 17%; }.map-node--two { top: 68%; left: 31%; }.map-node--three { top: 41%; right: 16%; background: #a9ecff; border-color: #a9ecff; box-shadow: 0 0 .8rem #72dfff; }

.tool-preview--custom { background: radial-gradient(circle at 64% 20%, rgba(184, 115, 255, .3), transparent 30%), linear-gradient(135deg, #10061f, #07111c); }
.preview-workflow { overflow: hidden; background: linear-gradient(135deg, rgba(26, 10, 45, .9), rgba(8, 19, 29, .84)); }
.workflow-node { position: absolute; z-index: 1; display: grid; place-items: center; width: 2rem; aspect-ratio: 1; border: 1px solid rgba(222, 197, 255, .54); border-radius: 50%; background: #140826; box-shadow: 0 0 1rem rgba(167, 81, 255, .42); }.workflow-node svg { width: .85rem; height: .85rem; color: #ddbcff; }.workflow-node--one { top: 28%; left: 15%; }.workflow-node--two { top: 55%; left: 45%; width: 1.45rem; }.workflow-node--three { top: 25%; right: 13%; width: 1.7rem; background: #0a2130; border-color: rgba(119, 229, 255, .62); }
.workflow-line { position: absolute; height: 1px; transform-origin: left; background: linear-gradient(90deg, #a95cff, #7ce5ff); box-shadow: 0 0 .55rem rgba(149, 90, 255, .7); }.workflow-line--one { top: 49%; left: 27%; width: 27%; transform: rotate(19deg); }.workflow-line--two { top: 55%; left: 55%; width: 27%; transform: rotate(-24deg); }.preview-workflow > small { position: absolute; left: .7rem; bottom: .65rem; color: rgba(228, 212, 255, .65); font-family: var(--font-mono); font-size: .53rem; letter-spacing: .08em; }

.tool-product--wide .tool-preview--redteam,
.tool-product--wide .tool-preview--custom { display: flex; flex-direction: column; }
.tool-product--wide .tool-preview--redteam .preview-terminal,
.tool-product--wide .tool-preview--custom .preview-workflow { flex: 1; height: auto; min-height: 0; }

.tool-product:hover .preview-terminal,
.tool-product:focus-within .preview-terminal { transform: translate(3px, -3px); border-color: rgba(209, 155, 255, .65); box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 1.5rem 2.8rem rgba(107, 31, 211, .32); }
.tool-product:hover .preview-browser,
.tool-product:focus-within .preview-browser { transform: perspective(28rem) rotateX(0) rotateY(0) translateY(-3px); border-color: rgba(127, 220, 255, .56); }
.tool-product:hover .preview-message,
.tool-product:focus-within .preview-message { transform: rotate(0) translateY(-3px); border-color: rgba(242, 163, 255, .56); }
.tool-product:hover .preview-analysis,
.tool-product:focus-within .preview-analysis { transform: translateY(-3px); border-color: rgba(202, 145, 255, .58); }
.tool-product:hover .preview-map,
.tool-product:focus-within .preview-map { transform: scale(1.025); border-color: rgba(121, 230, 255, .55); }
.tool-product:hover .preview-workflow,
.tool-product:focus-within .preview-workflow { transform: translateY(-3px); border-color: rgba(206, 157, 255, .6); }

@media (max-width:34rem) {
    .preview-terminal,
    .preview-browser,
    .preview-message,
    .preview-analysis,
    .preview-map,
    .preview-workflow { min-height: 8.1rem; }
}

@media (prefers-reduced-motion:reduce) {
    .preview-terminal,
    .preview-browser,
    .preview-message,
    .preview-analysis,
    .preview-map,
    .preview-workflow { transition: none; }
}