:root {
    color-scheme: dark;
    --ink: #eef8ff;
    --muted: #8ca4b8;
    --muted-strong: #b8cbd9;
    --bg: #040b13;
    --bg-soft: #07131f;
    --panel: rgba(8, 24, 38, .86);
    --panel-strong: #0a1b2b;
    --panel-light: #0d2336;
    --line: rgba(105, 188, 236, .18);
    --line-strong: rgba(92, 195, 255, .38);
    --cyan: #2dd4ff;
    --blue: #248cff;
    --blue-bright: #58adff;
    --violet: #886dff;
    --green: #42e3ab;
    --amber: #ffca68;
    --red: #ff7187;
    --radius-sm: .65rem;
    --radius: 1rem;
    --radius-lg: 1.5rem;
    --shadow: 0 1.5rem 5rem rgba(0, 0, 0, .28);
    --shell: min(1180px, calc(100% - 2rem));
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--bg);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body::before {
    position: fixed;
    z-index: -5;
    inset: 0;
    background:
        radial-gradient(circle at 8% 18%, rgba(30, 112, 181, .11), transparent 27%),
        radial-gradient(circle at 90% 4%, rgba(46, 96, 178, .14), transparent 28%),
        linear-gradient(180deg, #06101b 0, var(--bg) 24rem, #030a12 100%);
    content: "";
}

button,
input,
select,
textarea {
    color: inherit;
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: var(--blue-bright);
    text-decoration: none;
}

a:hover {
    color: var(--cyan);
}

img,
svg {
    max-width: 100%;
}

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

h1,
h2,
h3,
strong {
    letter-spacing: -.025em;
}

code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: .75rem;
    left: .75rem;
    padding: .7rem 1rem;
    border-radius: .5rem;
    background: var(--ink);
    color: var(--bg);
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: translateY(0);
}

.shell {
    width: var(--shell);
    margin-inline: auto;
}

.ambient-grid {
    position: fixed;
    z-index: -4;
    inset: 0;
    opacity: .14;
    background-image:
        linear-gradient(rgba(90, 174, 222, .15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(90, 174, 222, .15) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, black, transparent 75%);
    pointer-events: none;
}

.ambient-glow {
    position: fixed;
    z-index: -3;
    width: 35rem;
    height: 35rem;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .08;
    pointer-events: none;
}

.ambient-glow-one {
    top: -15rem;
    right: 5%;
    background: var(--blue);
}

.ambient-glow-two {
    top: 45rem;
    left: -18rem;
    background: var(--cyan);
}

.page-main {
    min-height: 70vh;
}

/* Header and brand */
.site-header {
    position: sticky;
    z-index: 100;
    top: 0;
    border-bottom: 1px solid transparent;
    background: rgba(4, 11, 19, .74);
    backdrop-filter: blur(18px);
    transition: border-color .2s ease, background .2s ease;
}

.site-header.is-scrolled {
    border-color: var(--line);
    background: rgba(4, 11, 19, .93);
}

.nav-shell {
    display: flex;
    min-height: 5rem;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    color: var(--ink);
}

.brand:hover {
    color: var(--ink);
}

.brand-mark {
    position: relative;
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
}

.brand-core {
    position: relative;
    z-index: 2;
    display: block;
    width: .8rem;
    height: 1.45rem;
    border: 2px solid var(--blue-bright);
    border-left: 0;
    border-radius: 0 .35rem .35rem 0;
    box-shadow: 0 0 1.1rem rgba(60, 164, 255, .6);
}

.brand-core::before,
.brand-core::after {
    position: absolute;
    left: -.55rem;
    width: .65rem;
    height: 2px;
    background: var(--cyan);
    content: "";
}

.brand-core::before { top: .18rem; }
.brand-core::after { bottom: .18rem; }

.brand-orbit {
    position: absolute;
    border: 1px solid rgba(89, 184, 246, .75);
    border-radius: 50%;
}

.brand-orbit-a {
    width: 2.4rem;
    height: 1.35rem;
    transform: rotate(55deg);
}

.brand-orbit-b {
    width: 2.4rem;
    height: 1.35rem;
    transform: rotate(-55deg);
}

.brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-copy strong {
    font-size: .94rem;
    letter-spacing: .045em;
}

.brand-copy strong span {
    color: var(--blue-bright);
}

.brand-copy small {
    margin-top: .25rem;
    color: #658095;
    font-size: .59rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.primary-nav {
    display: flex;
    align-items: center;
    gap: 1.4rem;
}

.primary-nav > a:not(.button) {
    color: #a9bdcd;
    font-size: .9rem;
    font-weight: 600;
}

.primary-nav > a:not(.button):hover {
    color: var(--ink);
}

.nav-inline-form {
    display: inline-flex;
}

.nav-toggle {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    padding: .65rem;
    border: 1px solid var(--line);
    border-radius: .7rem;
    background: var(--panel);
}

.nav-toggle span:not(.sr-only) {
    display: block;
    width: 100%;
    height: 2px;
    margin: .25rem 0;
    background: var(--ink);
}

/* Buttons and shared UI */
.button {
    display: inline-flex;
    min-height: 2.8rem;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: .72rem 1.05rem;
    border: 1px solid transparent;
    border-radius: .72rem;
    cursor: pointer;
    font-weight: 750;
    letter-spacing: -.01em;
    transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(45, 212, 255, .25);
    outline-offset: 3px;
}

.button-primary {
    background: linear-gradient(135deg, #1786f4, #35b8ff);
    color: white;
    box-shadow: 0 .8rem 2rem rgba(23, 134, 244, .2), inset 0 1px rgba(255, 255, 255, .24);
}

.button-primary:hover {
    background: linear-gradient(135deg, #2694ff, #4bc4ff);
    color: white;
    box-shadow: 0 1rem 2.2rem rgba(23, 134, 244, .3), inset 0 1px rgba(255, 255, 255, .3);
}

.button-secondary {
    border-color: var(--line-strong);
    background: rgba(20, 66, 99, .28);
    color: #d9f1ff;
}

.button-secondary:hover {
    border-color: rgba(66, 199, 255, .65);
    background: rgba(29, 93, 135, .35);
    color: white;
}

.button-ghost {
    border-color: var(--line);
    background: rgba(255, 255, 255, .025);
    color: var(--muted-strong);
}

.button-ghost:hover {
    border-color: var(--line-strong);
    color: white;
}

.button-large {
    min-height: 3.4rem;
    padding-inline: 1.35rem;
}

.button-small {
    min-height: 2.35rem;
    padding: .48rem .8rem;
    border-radius: .6rem;
    font-size: .82rem;
}

.button-block {
    width: 100%;
}

.status-pill {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: .45rem;
    padding: .32rem .58rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .025);
    color: var(--muted-strong);
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .03em;
    white-space: nowrap;
}

.status-dot {
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    background: #8294a2;
    box-shadow: 0 0 .6rem currentColor;
}

.status-positive {
    border-color: rgba(66, 227, 171, .25);
    background: rgba(66, 227, 171, .08);
    color: #7af1c5;
}

.status-warning {
    border-color: rgba(255, 202, 104, .25);
    background: rgba(255, 202, 104, .08);
    color: var(--amber);
}

.status-negative {
    border-color: rgba(255, 113, 135, .25);
    background: rgba(255, 113, 135, .08);
    color: #ff91a4;
}

/* Alerts */
.alert-stack {
    position: relative;
    z-index: 20;
    margin-top: 1rem;
}

.alert {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    margin-bottom: .7rem;
    padding: .85rem 1rem;
    border: 1px solid var(--line);
    border-radius: .8rem;
    background: rgba(7, 22, 35, .96);
    box-shadow: var(--shadow);
}

.alert p,
.alert ul {
    margin: 0;
}

.alert ul {
    padding-left: 1.15rem;
}

.alert > button {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 1.3rem;
}

.alert-icon {
    display: grid;
    flex: 0 0 1.5rem;
    height: 1.5rem;
    place-items: center;
    border-radius: 50%;
    font-weight: 900;
}

.alert-success { border-color: rgba(66, 227, 171, .3); color: #a8f8da; }
.alert-success .alert-icon { background: rgba(66, 227, 171, .16); }
.alert-warning { border-color: rgba(255, 202, 104, .3); color: #ffe3a9; }
.alert-warning .alert-icon { background: rgba(255, 202, 104, .16); }
.alert-danger { border-color: rgba(255, 113, 135, .3); color: #ffc1cb; }
.alert-danger .alert-icon { background: rgba(255, 113, 135, .16); }

.one-time-secret {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255, 202, 104, .3);
    border-radius: .9rem;
    background: rgba(42, 34, 14, .92);
    box-shadow: var(--shadow);
}

.one-time-secret > div:first-child {
    margin-bottom: .6rem;
}

.one-time-secret p {
    margin: .15rem 0 0;
    color: #b8a986;
    font-size: .72rem;
}

/* Landing hero */
.hero {
    position: relative;
    overflow: hidden;
    padding: 6.5rem 0 5.5rem;
}

.hero::after {
    position: absolute;
    z-index: -1;
    right: -12rem;
    bottom: -13rem;
    width: 40rem;
    height: 40rem;
    border: 1px solid rgba(54, 159, 226, .12);
    border-radius: 50%;
    box-shadow:
        0 0 0 6rem rgba(50, 130, 191, .025),
        0 0 0 12rem rgba(50, 130, 191, .018);
    content: "";
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
    align-items: center;
    gap: 4rem;
}

.hero h1 {
    max-width: 700px;
    margin-bottom: 1.4rem;
    font-size: clamp(3rem, 6.5vw, 5.8rem);
    line-height: .95;
}

.hero h1 span,
.section-heading h2 span,
.lifecycle-copy h2 span,
.compact-hero h1 span,
.auth-story h1 span {
    color: var(--blue-bright);
    background: linear-gradient(135deg, #82ceff, #369bff 56%, #7e7aff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-lead {
    max-width: 650px;
    margin-bottom: 2rem;
    color: #a8bdcc;
    font-size: 1.12rem;
    line-height: 1.75;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

.hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 2.2rem;
    color: #728da1;
    font-size: .78rem;
}

.hero-proof span {
    position: relative;
    padding-left: 1rem;
}

.hero-proof span::before {
    position: absolute;
    top: .56rem;
    left: 0;
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
    background: var(--cyan);
    content: "";
}

.hero-proof b {
    color: var(--ink);
}

.hero-visual {
    position: relative;
    min-height: 500px;
}

.radar-shell {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(30rem, 90%);
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid rgba(69, 188, 249, .24);
    border-radius: 50%;
    background:
        linear-gradient(90deg, transparent calc(50% - .5px), rgba(88, 183, 237, .13) 50%, transparent calc(50% + .5px)),
        linear-gradient(transparent calc(50% - .5px), rgba(88, 183, 237, .13) 50%, transparent calc(50% + .5px)),
        radial-gradient(circle, rgba(17, 77, 112, .45), rgba(4, 17, 29, .62) 62%, rgba(6, 24, 39, .25));
    box-shadow: inset 0 0 5rem rgba(21, 138, 204, .12), 0 0 6rem rgba(18, 113, 173, .12);
    transform: translate(-50%, -50%);
}

.radar-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(87, 190, 244, .18);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.radar-ring-one { width: 35%; height: 35%; }
.radar-ring-two { width: 62%; height: 62%; }
.radar-ring-three { width: 86%; height: 86%; }

.radar-sweep {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    background: conic-gradient(from 180deg at 0 0, rgba(45, 212, 255, .34), transparent 34%);
    transform-origin: 0 0;
    animation: radar 8s linear infinite;
}

@keyframes radar {
    to { transform: rotate(1turn); }
}

.shield-node {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    display: flex;
    width: 7.3rem;
    height: 8.2rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(64, 199, 255, .55);
    background: linear-gradient(160deg, rgba(24, 114, 169, .92), rgba(6, 31, 50, .97));
    clip-path: polygon(50% 0, 93% 18%, 88% 72%, 50% 100%, 12% 72%, 7% 18%);
    filter: drop-shadow(0 0 1.8rem rgba(30, 170, 235, .3));
    transform: translate(-50%, -50%);
}

.shield-glyph {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    font-weight: 900;
}

.shield-node small {
    margin-top: .6rem;
    color: #b7e9ff;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.signal-node {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: .38rem;
    padding: .22rem .5rem;
    border: 1px solid rgba(74, 179, 233, .18);
    border-radius: 999px;
    background: rgba(3, 14, 24, .8);
    color: #8caabd;
    font-size: .6rem;
    font-weight: 750;
}

.signal-node i {
    width: .35rem;
    height: .35rem;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 .6rem var(--green);
}

.signal-one { top: 14%; left: 43%; }
.signal-two { top: 47%; right: 5%; }
.signal-three { bottom: 14%; left: 38%; }
.signal-four { top: 46%; left: 5%; }

.floating-card {
    position: absolute;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 14rem;
    padding: .8rem .9rem;
    border: 1px solid rgba(77, 182, 237, .24);
    border-radius: .85rem;
    background: rgba(6, 20, 33, .9);
    box-shadow: 0 1.1rem 3rem rgba(0, 0, 0, .35);
    backdrop-filter: blur(14px);
}

.floating-card-top { top: 8%; right: -2%; }
.floating-card-bottom { bottom: 8%; left: -3%; }

.floating-card > div {
    display: flex;
    flex: 1;
    flex-direction: column;
    line-height: 1.25;
}

.floating-card small {
    color: #6e899c;
    font-size: .62rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.floating-card strong {
    margin-top: .15rem;
    font-size: .78rem;
}

.mini-icon {
    position: relative;
    display: inline-grid;
    flex: 0 0 2rem;
    height: 2rem;
    place-items: center;
    border-radius: .55rem;
    background: rgba(40, 145, 211, .15);
}

.mini-icon-pulse::before {
    width: 1rem;
    height: .6rem;
    border-bottom: 2px solid var(--cyan);
    background: linear-gradient(135deg, transparent 42%, var(--cyan) 43% 55%, transparent 56%);
    content: "";
}

.mini-icon-lock::before {
    width: .65rem;
    height: .55rem;
    border: 1px solid var(--blue-bright);
    border-radius: .15rem;
    content: "";
}

.mini-icon-lock::after {
    position: absolute;
    top: .45rem;
    width: .43rem;
    height: .45rem;
    border: 1px solid var(--blue-bright);
    border-bottom: 0;
    border-radius: .4rem .4rem 0 0;
    content: "";
}

.trust-strip {
    border-block: 1px solid var(--line);
    background: rgba(8, 25, 39, .46);
}

.trust-strip-inner {
    display: flex;
    min-height: 5.5rem;
    align-items: center;
    gap: 2rem;
}

.trust-strip p {
    flex: 0 0 auto;
    margin: 0;
    color: #6b8598;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.trust-strip-inner > div {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
}

.trust-strip span {
    color: #92aabd;
    font-size: .85rem;
    font-weight: 750;
}

.trust-strip .os-brand {
    display: grid;
    min-width: 3.15rem;
    height: 2.45rem;
    padding: .42rem;
    place-items: center;
    border: 1px solid rgba(203, 91, 255, .28);
    border-radius: .7rem;
    background: rgba(255, 255, 255, .96);
}

.trust-strip .os-brand img {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
}

.trust-strip .os-brand-wide {
    min-width: 6.1rem;
}

.trust-strip .os-brand-wide img {
    width: 5rem;
}

/* Landing sections */
.section {
    padding: 7rem 0;
}

.section-heading {
    margin-bottom: 3.2rem;
}

.section-heading h2,
.lifecycle-copy h2,
.cta-panel h2 {
    margin-bottom: 1rem;
    font-size: clamp(2.2rem, 4vw, 3.8rem);
    line-height: 1.04;
}

.section-heading p {
    color: var(--muted);
}

.split-heading {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    align-items: end;
    gap: 4rem;
}

.split-heading p {
    max-width: 510px;
    margin-bottom: .2rem;
}

.centered-heading {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}

.section-capabilities {
    background: linear-gradient(180deg, rgba(8, 26, 41, .18), rgba(3, 10, 17, .28));
}

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

.capability-card {
    position: relative;
    min-height: 18rem;
    overflow: hidden;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(14, 42, 64, .72), rgba(6, 21, 34, .72)),
        var(--panel);
    transition: border-color .2s ease, transform .2s ease;
}

.capability-card:hover {
    border-color: var(--line-strong);
    transform: translateY(-3px);
}

.capability-card::after {
    position: absolute;
    right: -4rem;
    bottom: -4rem;
    width: 9rem;
    height: 9rem;
    border: 1px solid rgba(61, 178, 237, .12);
    border-radius: 50%;
    box-shadow: 0 0 0 2.5rem rgba(61, 178, 237, .025);
    content: "";
}

.capability-card-featured {
    grid-row: span 2;
    min-height: 37rem;
    background:
        radial-gradient(circle at 50% 18%, rgba(34, 144, 214, .2), transparent 38%),
        linear-gradient(145deg, rgba(14, 42, 64, .82), rgba(5, 19, 31, .85));
}

.capability-icon {
    position: relative;
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 3rem;
    place-items: center;
    border: 1px solid rgba(56, 177, 242, .25);
    border-radius: .85rem;
    background: rgba(22, 111, 168, .12);
}

.capability-card-featured .capability-icon {
    width: 8.5rem;
    height: 9.5rem;
    margin: 3rem auto 4rem;
    border: 0;
    background: linear-gradient(160deg, rgba(26, 135, 200, .56), rgba(7, 37, 59, .76));
    clip-path: polygon(50% 0, 93% 18%, 88% 72%, 50% 100%, 12% 72%, 7% 18%);
    filter: drop-shadow(0 0 2rem rgba(32, 154, 218, .22));
}

.capability-card-featured .capability-icon::before {
    width: 2rem;
    height: 2.7rem;
    border: 2px solid #7fd6ff;
    border-radius: 50% 50% 45% 45%;
    content: "";
    clip-path: polygon(50% 0, 100% 18%, 90% 72%, 50% 100%, 10% 72%, 0 18%);
}

.icon-radar span {
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--cyan);
    border-radius: 50%;
    background: radial-gradient(circle, var(--cyan) 0 2px, transparent 3px);
}

.icon-key span {
    width: 1.5rem;
    height: .5rem;
    border-top: 2px solid var(--blue-bright);
    border-right: 2px solid var(--blue-bright);
}

.icon-key span::before {
    display: block;
    width: .55rem;
    height: .55rem;
    margin: -.4rem 0 0 -.1rem;
    border: 2px solid var(--blue-bright);
    border-radius: 50%;
    content: "";
}

.icon-update span {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--violet);
    border-right-color: transparent;
    border-radius: 50%;
}

.icon-eye span {
    width: 1.7rem;
    height: 1rem;
    border: 1px solid var(--green);
    border-radius: 50% 10%;
    transform: rotate(45deg);
}

.icon-eye span::after {
    display: block;
    width: .35rem;
    height: .35rem;
    margin: .25rem auto;
    border-radius: 50%;
    background: var(--green);
    content: "";
}

.card-number {
    position: absolute;
    top: 1.25rem;
    right: 1.35rem;
    color: #456479;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: .72rem;
}

.capability-card h3 {
    position: relative;
    z-index: 2;
    margin-bottom: .7rem;
    font-size: 1.3rem;
}

.capability-card p {
    position: relative;
    z-index: 2;
    color: var(--muted);
    font-size: .9rem;
}

.feature-list {
    position: relative;
    z-index: 2;
    display: grid;
    gap: .6rem;
    padding: 0;
    margin: 1.5rem 0 0;
    list-style: none;
}

.feature-list li {
    position: relative;
    padding-left: 1.2rem;
    color: #a8bdcb;
    font-size: .85rem;
}

.feature-list li::before {
    position: absolute;
    top: .65rem;
    left: 0;
    width: .35rem;
    height: .35rem;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 .5rem rgba(45, 212, 255, .5);
    content: "";
}

.section-workflow {
    border-block: 1px solid var(--line);
    background:
        linear-gradient(90deg, transparent calc(50% - 1px), rgba(76, 155, 207, .08) 50%, transparent calc(50% + 1px)),
        rgba(5, 18, 29, .55);
}

.workflow-grid {
    display: grid;
    padding: 0;
    margin: 0;
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
}

.workflow-card {
    position: relative;
    min-height: 18rem;
    padding: 2rem 1.5rem;
    border-block: 1px solid var(--line);
    border-right: 1px solid var(--line);
}

.workflow-card:first-child {
    border-left: 1px solid var(--line);
    border-radius: 1rem 0 0 1rem;
}

.workflow-card:last-child {
    border-radius: 0 1rem 1rem 0;
}

.workflow-index {
    color: #426077;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: .7rem;
}

.workflow-icon {
    display: grid;
    width: 4rem;
    height: 4rem;
    margin: 2rem 0 2.5rem;
    place-items: center;
    border: 1px solid rgba(57, 178, 241, .25);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(33, 133, 195, .16), transparent 70%);
    color: var(--cyan);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 1.4rem;
}

.workflow-card h3 {
    margin-bottom: .6rem;
    font-size: 1.1rem;
}

.workflow-card p {
    color: var(--muted);
    font-size: .86rem;
}

.workflow-card code {
    color: #bbdef1;
    font-size: .76rem;
}

.section-lifecycle {
    overflow: hidden;
}

.lifecycle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 6rem;
}

.lifecycle-visual {
    position: relative;
    min-height: 30rem;
}

.terminal-window {
    position: absolute;
    z-index: 3;
    top: 50%;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(79, 181, 234, .3);
    border-radius: 1rem;
    background: rgba(3, 13, 22, .92);
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, .38), inset 0 0 3rem rgba(29, 117, 173, .08);
    transform: translateY(-50%) rotate(-2deg);
}

.terminal-bar {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--line);
    background: rgba(16, 40, 58, .55);
}

.terminal-bar i {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: #486174;
}

.terminal-bar i:first-child { background: var(--red); }
.terminal-bar i:nth-child(2) { background: var(--amber); }
.terminal-bar i:nth-child(3) { background: var(--green); }

.terminal-bar span {
    margin-left: auto;
    color: #617e92;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: .65rem;
}

.terminal-body {
    min-height: 20rem;
    padding: 2rem;
    color: #b8d6e7;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: .83rem;
}

.terminal-body p { margin-bottom: 1.2rem; }
.terminal-body p span { color: var(--cyan); }
.terminal-body p b { color: var(--green); }
.terminal-body .terminal-dim { color: #516e82; }

.terminal-cursor {
    display: block;
    width: .65rem;
    height: 1rem;
    background: var(--cyan);
    animation: blink 1s steps(2) infinite;
}

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

.lifecycle-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32rem;
    height: 32rem;
    border: 1px solid rgba(74, 171, 225, .12);
    border-radius: 50%;
    box-shadow: 0 0 0 4rem rgba(74, 171, 225, .025);
    transform: translate(-50%, -50%);
}

.lifecycle-copy > p {
    max-width: 520px;
    color: var(--muted);
}

.lifecycle-list {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}

.lifecycle-list div {
    display: grid;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
    grid-template-columns: 10rem 1fr;
    gap: 1.3rem;
}

.lifecycle-list strong {
    color: #d9f1ff;
}

.lifecycle-list span {
    color: var(--muted);
    font-size: .86rem;
}

.section-platforms {
    border-top: 1px solid var(--line);
    background: rgba(7, 21, 34, .45);
}

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

.platform-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.05rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: rgba(8, 26, 41, .75);
}

.platform-mark {
    display: grid;
    flex: 0 0 2.8rem;
    height: 2.8rem;
    place-items: center;
    border: 1px solid rgba(52, 179, 243, .3);
    border-radius: .75rem;
    background: rgba(26, 120, 181, .12);
    color: var(--cyan);
    font-size: .72rem;
    font-weight: 900;
}

.platform-mark img {
    display: block;
    width: 1.65rem;
    height: 1.65rem;
    object-fit: contain;
}

.platform-mark.platform-mark-wide img {
    width: 2.35rem;
    height: auto;
}

.platform-card > div {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.platform-card small {
    color: var(--muted);
    font-size: .72rem;
}

.platform-check {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    border-radius: 50%;
    background: rgba(66, 227, 171, .11);
    color: var(--green);
    font-size: .7rem;
    font-weight: 900;
}

.platform-roadmap {
    max-width: 760px;
    margin: 1.5rem 0 0;
    color: #688296;
    font-size: .8rem;
}

.cta-section {
    padding-top: 2rem;
}

.cta-panel {
    position: relative;
    overflow: hidden;
    padding: 4.5rem;
    border: 1px solid rgba(58, 179, 240, .32);
    border-radius: 1.5rem;
    background:
        radial-gradient(circle at 90% 50%, rgba(35, 126, 192, .28), transparent 32%),
        linear-gradient(130deg, rgba(12, 45, 70, .92), rgba(5, 19, 31, .92));
    box-shadow: var(--shadow);
}

.cta-panel::after {
    position: absolute;
    right: 8%;
    bottom: -12rem;
    width: 26rem;
    height: 26rem;
    border: 1px solid rgba(75, 188, 246, .22);
    border-radius: 50%;
    box-shadow: 0 0 0 4rem rgba(75, 188, 246, .03), 0 0 0 8rem rgba(75, 188, 246, .02);
    content: "";
}

.cta-panel > * {
    position: relative;
    z-index: 2;
}

.cta-panel p {
    max-width: 600px;
    color: #9db5c6;
}

.cta-scanline {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: repeating-linear-gradient(to bottom, transparent 0 8px, rgba(96, 196, 245, .025) 9px);
}

/* Footer */
.site-footer {
    padding: 3rem 0;
    border-top: 1px solid var(--line);
    background: rgba(3, 10, 17, .75);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2rem;
}

.brand-footer .brand-copy small {
    letter-spacing: .04em;
    text-transform: none;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1.3rem;
}

.footer-links a {
    color: #758ea1;
    font-size: .8rem;
}

.footer-note {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(86, 162, 211, .1);
    color: #526c80;
    font-size: .72rem;
}

/* Forms and authentication */
.auth-section {
    min-height: calc(100vh - 5rem);
    padding: 5rem 0 6rem;
}

.auth-shell {
    display: grid;
    grid-template-columns: 1fr minmax(400px, .78fr);
    align-items: center;
    gap: 6rem;
}

.auth-story h1 {
    max-width: 650px;
    font-size: clamp(2.7rem, 5vw, 4.8rem);
    line-height: .98;
}

.auth-story > p {
    max-width: 580px;
    color: var(--muted);
    font-size: 1.02rem;
}

.auth-panel {
    padding: 2rem;
    border: 1px solid var(--line-strong);
    border-radius: 1.3rem;
    background:
        linear-gradient(160deg, rgba(13, 39, 59, .94), rgba(5, 18, 29, .94));
    box-shadow: 0 2rem 6rem rgba(0, 0, 0, .36);
}

.auth-panel-heading {
    margin-bottom: 1.5rem;
}

.auth-panel-heading h2 {
    margin: 0 0 .3rem;
    font-size: 2rem;
}

.auth-panel-heading p {
    margin: 0;
    color: var(--muted);
    font-size: .88rem;
}

.button-google {
    width: 100%;
    border-color: rgba(255, 255, 255, .15);
    background: #eef6fb;
    color: #172635;
}

.button-google:hover {
    background: white;
    color: #172635;
}

.google-mark {
    display: grid;
    width: 1.4rem;
    height: 1.4rem;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(#4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0);
    color: white;
    font-size: .65rem;
    font-weight: 900;
}

.form-divider {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 1.4rem 0;
    color: #607b8f;
    font-size: .7rem;
    text-transform: uppercase;
}

.form-divider::before,
.form-divider::after {
    height: 1px;
    flex: 1;
    background: var(--line);
    content: "";
}

.stack-form {
    display: grid;
    gap: 1rem;
}

.spacious-form {
    gap: 1.4rem;
}

.form-grid {
    display: grid;
    gap: 1rem;
}

.form-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.field {
    display: grid;
    gap: .42rem;
}

.field label,
.choice-fieldset legend {
    color: #c6d8e4;
    font-size: .78rem;
    font-weight: 750;
}

.field input,
.field select,
.field textarea,
.choice-fieldset select {
    width: 100%;
    min-height: 3rem;
    padding: .7rem .8rem;
    border: 1px solid rgba(94, 158, 199, .24);
    border-radius: .68rem;
    background: rgba(2, 13, 22, .68);
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.field textarea {
    min-height: 7rem;
    resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
    border-color: rgba(94, 186, 239, .4);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(36, 140, 255, .1);
}

.field input::placeholder,
.field textarea::placeholder {
    color: #4d697d;
}

.field small {
    color: #607b8e;
    font-size: .68rem;
}

.field-error {
    color: #ff9aaa;
    font-size: .72rem;
}

.label-row {
    display: flex;
    justify-content: space-between;
}

.password-field {
    position: relative;
}

.password-field input {
    padding-right: 4rem;
}

.password-field button {
    position: absolute;
    top: 50%;
    right: .55rem;
    padding: .3rem .45rem;
    border: 0;
    background: transparent;
    color: var(--blue-bright);
    cursor: pointer;
    font-size: .7rem;
    font-weight: 750;
    transform: translateY(-50%);
}

.captcha-field {
    padding: .85rem;
    border: 1px solid rgba(76, 176, 230, .16);
    border-radius: .75rem;
    background: rgba(25, 81, 117, .09);
}

.check-row {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    color: #8ca4b7;
    cursor: pointer;
    font-size: .76rem;
}

.check-row input {
    width: 1rem;
    height: 1rem;
    margin-top: .15rem;
    accent-color: var(--blue);
}

.auth-switch {
    margin: 1.5rem 0 0;
    color: #71899a;
    font-size: .8rem;
    text-align: center;
}

.auth-signal {
    position: relative;
    width: min(28rem, 100%);
    height: 15rem;
    margin: 2rem 0 1rem;
}

.auth-signal-core {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 6rem;
    height: 6rem;
    place-items: center;
    border: 1px solid rgba(52, 184, 244, .35);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30, 135, 197, .35), rgba(6, 23, 37, .85));
    box-shadow: 0 0 0 2rem rgba(45, 159, 219, .035), 0 0 4rem rgba(35, 144, 201, .15);
    transform: translate(-50%, -50%);
}

.auth-signal-core span {
    width: 1.8rem;
    height: 2.3rem;
    border: 2px solid var(--cyan);
    clip-path: polygon(50% 0, 100% 18%, 90% 72%, 50% 100%, 10% 72%, 0 18%);
}

.auth-signal-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(44, 192, 248, .65), transparent);
    transform-origin: left;
}

.line-a { transform: rotate(-25deg); }
.line-b { transform: rotate(28deg); }
.line-c { transform: rotate(157deg); }

.auth-signal-label {
    position: absolute;
    padding: .3rem .55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-soft);
    color: #91b2c7;
    font-size: .65rem;
    font-weight: 700;
}

.label-a { top: 15%; right: 4%; }
.label-b { right: 1%; bottom: 13%; }
.label-c { top: 40%; left: 0; }

.auth-points {
    display: grid;
    gap: .6rem;
    padding: 0;
    list-style: none;
}

.auth-points li {
    color: #8ca5b8;
    font-size: .8rem;
}

.auth-points span {
    margin-right: .5rem;
    color: var(--green);
}

.trial-timeline {
    display: grid;
    max-width: 560px;
    gap: .8rem;
    margin: 2rem 0;
}

.trial-timeline > div {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .8rem;
    border: 1px solid var(--line);
    border-radius: .75rem;
    background: rgba(9, 30, 47, .5);
}

.trial-timeline > div > span {
    display: grid;
    flex: 0 0 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid rgba(55, 183, 245, .35);
    border-radius: 50%;
    color: var(--cyan);
    font-size: .75rem;
    font-weight: 900;
}

.trial-timeline p {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.trial-timeline small {
    color: var(--muted);
}

.first-phase-note {
    padding-left: 1rem;
    border-left: 2px solid var(--amber);
    color: #8ba1b1 !important;
    font-size: .78rem !important;
}

/* Pricing */
.page-hero {
    padding: 5rem 0 3.5rem;
    border-bottom: 1px solid var(--line);
}

.compact-hero-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4rem;
}

.compact-hero h1 {
    margin-bottom: .9rem;
    font-size: clamp(2.6rem, 5vw, 4.6rem);
    line-height: 1;
}

.compact-hero p {
    max-width: 690px;
    margin-bottom: 0;
    color: var(--muted);
}

.price-anchor {
    display: flex;
    min-width: 13rem;
    flex-direction: column;
    align-items: center;
    padding: 1.4rem;
    border: 1px solid var(--line-strong);
    border-radius: 1.2rem;
    background: rgba(10, 36, 56, .65);
}

.price-anchor small,
.price-anchor span {
    color: var(--muted);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.price-anchor strong {
    margin: .2rem 0;
    color: var(--blue-bright);
    font-size: 2.7rem;
    line-height: 1;
}

.price-anchor sup {
    font-size: 1rem;
}

.pricing-section {
    padding-top: 4rem;
}

.pricing-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 23rem;
    align-items: start;
    gap: 1.5rem;
}

.pricing-builder {
    display: grid;
    gap: 1rem;
}

.builder-step {
    padding: 1.6rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--panel);
}

.builder-step-heading {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.builder-step-heading > span {
    display: grid;
    flex: 0 0 2.4rem;
    height: 2.4rem;
    place-items: center;
    border: 1px solid rgba(58, 183, 245, .3);
    border-radius: .7rem;
    color: var(--cyan);
    font-size: .7rem;
    font-weight: 900;
}

.builder-step-heading h2 {
    margin: 0;
    font-size: 1.2rem;
}

.builder-step-heading p {
    margin: .2rem 0 0;
    color: var(--muted);
    font-size: .78rem;
}

.bundle-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .6rem;
}

.bundle-option {
    position: relative;
    cursor: pointer;
}

.bundle-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bundle-option > span {
    display: flex;
    min-height: 5rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(82, 151, 194, .2);
    border-radius: .75rem;
    background: rgba(3, 16, 27, .55);
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.bundle-option:hover > span {
    border-color: var(--line-strong);
    transform: translateY(-1px);
}

.bundle-option input:checked + span {
    border-color: var(--blue);
    background: rgba(31, 133, 204, .13);
    box-shadow: inset 0 0 1.6rem rgba(27, 144, 211, .07);
}

.bundle-option strong {
    font-size: 1.2rem;
}

.bundle-option small {
    color: var(--muted);
    font-size: .68rem;
}

.bundle-custom {
    position: relative;
}

.bundle-custom-link {
    position: absolute;
    z-index: 3;
    inset: 0;
    color: transparent;
}

.term-options {
    display: grid;
    gap: .6rem;
}

.term-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem;
    border: 1px solid rgba(82, 151, 194, .2);
    border-radius: .75rem;
    background: rgba(3, 16, 27, .45);
    cursor: pointer;
}

.term-option:has(input:checked) {
    border-color: var(--blue);
    background: rgba(31, 133, 204, .12);
}

.term-option input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--blue);
}

.term-main {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.term-main small {
    color: var(--muted);
    font-size: .68rem;
}

.discount-badge {
    padding: .25rem .5rem;
    border-radius: 999px;
    background: rgba(66, 227, 171, .1);
    color: var(--green);
    font-size: .68rem;
    font-weight: 750;
}

.choice-fieldset {
    display: grid;
    gap: .55rem;
    padding: 0;
    border: 0;
}

.choice-fieldset legend {
    margin-bottom: .45rem;
}

.radio-card {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: .72rem;
    background: rgba(3, 16, 27, .45);
    cursor: pointer;
}

.radio-card:has(input:checked) {
    border-color: var(--blue);
    background: rgba(31, 133, 204, .12);
}

.radio-card input {
    accent-color: var(--blue);
}

.radio-card span {
    display: flex;
    flex-direction: column;
}

.radio-card small {
    color: var(--muted);
    font-size: .68rem;
}

.radio-card.is-disabled {
    opacity: .45;
    pointer-events: none;
}

.price-summary {
    position: sticky;
    top: 6.5rem;
    padding: 1.5rem;
    border: 1px solid var(--line-strong);
    border-radius: 1rem;
    background:
        radial-gradient(circle at 100% 0, rgba(36, 140, 255, .17), transparent 36%),
        var(--panel-strong);
    box-shadow: var(--shadow);
}

.price-summary h2 {
    margin: .8rem 0 1.3rem;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 0;
    border-bottom: 1px solid rgba(86, 162, 211, .1);
    color: var(--muted);
    font-size: .8rem;
}

.summary-line strong {
    color: #c9dbe6;
}

.summary-total {
    display: flex;
    flex-direction: column;
    padding: 1.4rem 0;
}

.summary-total span {
    color: var(--muted);
    font-size: .75rem;
}

.summary-total strong {
    margin: .2rem 0;
    color: var(--blue-bright);
    font-size: 2.4rem;
}

.summary-total small {
    color: #6f8799;
}

.summary-note {
    margin: .85rem 0;
    color: #60798c;
    font-size: .68rem;
    text-align: center;
}

.summary-assurance {
    display: grid;
    gap: .65rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.summary-assurance > div {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.summary-assurance > div > span {
    color: var(--green);
    font-weight: 900;
}

.summary-assurance p {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.summary-assurance strong {
    font-size: .74rem;
}

.summary-assurance small {
    color: var(--muted);
    font-size: .63rem;
}

.custom-quote-section {
    padding-top: 0;
}

.custom-quote-panel {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 4rem;
    padding: 2rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: rgba(8, 26, 41, .65);
}

.custom-quote-panel > div p {
    color: var(--muted);
}

.optional {
    color: var(--muted);
    font-weight: 400;
}

/* Account layouts */
.account-body .site-footer {
    margin-top: 4rem;
}

.account-shell {
    display: grid;
    padding-top: 2rem;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 2rem;
}

.account-sidebar {
    position: sticky;
    top: 7rem;
    display: flex;
    height: calc(100vh - 9rem);
    min-height: 33rem;
    flex-direction: column;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: rgba(7, 22, 35, .72);
}

.sidebar-heading {
    display: flex;
    flex-direction: column;
    padding: .7rem .65rem 1.2rem;
    border-bottom: 1px solid var(--line);
}

.sidebar-heading strong {
    overflow: hidden;
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-nav {
    display: grid;
    gap: .25rem;
    margin-top: 1rem;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .65rem .7rem;
    border-radius: .62rem;
    color: #829caf;
    font-size: .8rem;
    font-weight: 650;
}

.sidebar-nav a > span {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    color: #5d7c91;
}

.sidebar-nav a:hover,
.sidebar-nav a.is-active {
    background: rgba(37, 135, 199, .12);
    color: #d5efff;
}

.sidebar-nav a.is-active > span {
    color: var(--cyan);
}

.sidebar-support {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    padding: .75rem;
    border: 1px solid rgba(61, 169, 225, .14);
    border-radius: .7rem;
    background: rgba(18, 66, 95, .11);
}

.sidebar-support small {
    color: #617d91;
    font-size: .65rem;
}

.sidebar-support a {
    font-size: .73rem;
}

.account-content {
    min-width: 0;
}

.account-heading {
    display: flex;
    min-height: 7rem;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.6rem;
}

.account-heading h1 {
    margin-bottom: .25rem;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
}

.account-heading p {
    margin: 0;
    color: var(--muted);
}

.back-link {
    display: inline-flex;
    margin-bottom: 1rem;
    color: #7692a6;
    font-size: .75rem;
    font-weight: 700;
}

.metric-grid {
    display: grid;
    margin-bottom: 1.2rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
}

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

.metric-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: rgba(8, 27, 42, .78);
}

.metric-card p {
    margin: 0;
    color: var(--muted);
    font-size: .7rem;
}

.metric-card strong {
    display: block;
    overflow: hidden;
    margin: .3rem 0 .1rem;
    font-size: 1.55rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metric-card small {
    display: block;
    overflow: hidden;
    color: #607b8e;
    font-size: .63rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metric-spark {
    position: absolute;
    top: -.8rem;
    right: -.8rem;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    opacity: .13;
    filter: blur(10px);
}

.metric-blue .metric-spark { background: var(--blue); }
.metric-violet .metric-spark { background: var(--violet); }
.metric-green .metric-spark { background: var(--green); }
.metric-amber .metric-spark { background: var(--amber); }

.content-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.content-grid-wide {
    grid-template-columns: minmax(0, 1.65fr) minmax(16rem, .75fr);
}

.panel {
    min-width: 0;
    margin-bottom: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--panel);
    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .08);
}

.panel-span-two {
    min-width: 0;
}

.panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.panel-heading h2 {
    margin: 0;
    font-size: 1.15rem;
}

.panel-heading p {
    margin: .25rem 0 0;
    color: var(--muted);
    font-size: .76rem;
}

.text-link,
.table-action {
    font-size: .72rem;
    font-weight: 750;
    white-space: nowrap;
}

.license-stack {
    display: grid;
    gap: .65rem;
}

.license-row {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem;
    border: 1px solid rgba(86, 162, 211, .12);
    border-radius: .75rem;
    background: rgba(3, 15, 25, .35);
}

.license-mark {
    display: grid;
    flex: 0 0 2.6rem;
    height: 2.9rem;
    place-items: center;
    border: 1px solid rgba(49, 183, 244, .34);
    background: linear-gradient(150deg, rgba(29, 139, 204, .25), rgba(8, 35, 56, .4));
    color: var(--cyan);
    clip-path: polygon(50% 0, 100% 18%, 90% 72%, 50% 100%, 10% 72%, 0 18%);
    font-size: .62rem;
    font-weight: 900;
}

.license-main {
    min-width: 0;
    flex: 1;
}

.license-title {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
}

.license-title > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.license-title strong {
    overflow: hidden;
    font-size: .85rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.license-title small {
    color: #5d788c;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: .62rem;
}

.seat-usage {
    display: grid;
    align-items: center;
    margin-top: .6rem;
    grid-template-columns: auto minmax(5rem, 1fr);
    gap: .8rem;
    color: #768fa2;
    font-size: .65rem;
}

.seat-usage b {
    color: #bcd2df;
}

progress {
    width: 100%;
    height: .35rem;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
}

progress::-webkit-progress-bar {
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
}

progress::-webkit-progress-value {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
}

progress::-moz-progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.license-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: .4rem;
    color: #526d80;
    font-size: .6rem;
}

.icon-link {
    display: grid;
    flex: 0 0 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--muted-strong);
}

.action-illustration {
    position: relative;
    display: grid;
    width: 100%;
    height: 8rem;
    margin: .5rem 0 1rem;
    place-items: center;
    border: 1px solid rgba(61, 169, 225, .12);
    border-radius: .8rem;
    background: radial-gradient(circle, rgba(28, 116, 172, .18), transparent 64%);
}

.dns-illustration {
    grid-template-columns: 1fr 1fr;
}

.dns-illustration span,
.dns-illustration b {
    display: grid;
    width: 2.7rem;
    height: 2.7rem;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: .6rem;
    color: var(--cyan);
}

.dns-illustration i {
    position: absolute;
    width: 35%;
    height: 1px;
    background: var(--blue);
}

.server-illustration {
    align-content: center;
    gap: .35rem;
}

.server-illustration span {
    display: block;
    width: 5rem;
    height: 1rem;
    border: 1px solid var(--line-strong);
    border-radius: .3rem;
    background: rgba(31, 134, 196, .13);
}

.shield-illustration span {
    display: grid;
    width: 4.5rem;
    height: 5rem;
    place-items: center;
    background: rgba(31, 134, 196, .25);
    color: var(--green);
    clip-path: polygon(50% 0, 100% 18%, 90% 72%, 50% 100%, 10% 72%, 0 18%);
}

.panel > h3 {
    margin-bottom: .4rem;
    font-size: 1rem;
}

.panel > p {
    color: var(--muted);
    font-size: .78rem;
}

.responsive-table {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: .78rem .65rem;
    border-bottom: 1px solid rgba(85, 158, 204, .11);
    text-align: left;
    vertical-align: middle;
}

th {
    color: #607c90;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

td {
    color: #9bb0bf;
    font-size: .73rem;
}

td > strong,
td > small {
    display: block;
}

td > strong {
    color: #d7e8f2;
}

td > small {
    color: #587386;
}

.empty-state {
    display: flex;
    min-height: 18rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.empty-state-large {
    min-height: 31rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--panel);
}

.empty-state h2 {
    margin-bottom: .4rem;
}

.empty-state p {
    max-width: 520px;
    color: var(--muted);
}

.empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
}

.empty-radar {
    position: relative;
    display: grid;
    width: 6rem;
    height: 6rem;
    margin-bottom: 1.5rem;
    place-items: center;
    border: 1px solid rgba(52, 184, 244, .28);
    border-radius: 50%;
    box-shadow: 0 0 0 1.4rem rgba(52, 184, 244, .025);
}

.empty-radar span {
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 1rem var(--cyan);
}

.empty-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem;
    border: 1px dashed rgba(87, 167, 216, .2);
    border-radius: .8rem;
}

.empty-inline p {
    margin: 0;
    color: var(--muted);
    font-size: .78rem;
}

/* License cards */
.license-card {
    margin-bottom: .8rem;
    padding: 1.2rem;
    border: 1px solid rgba(83, 163, 213, .16);
    border-radius: .85rem;
    background: rgba(3, 16, 27, .34);
}

.license-card-top {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.license-card-top > div:nth-child(2) {
    flex: 1;
}

.license-card-top h2 {
    margin: 0;
    font-size: 1rem;
}

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

.detail-grid > div {
    padding: .7rem;
    border: 1px solid rgba(86, 162, 211, .1);
    border-radius: .65rem;
    background: rgba(4, 18, 29, .35);
}

.detail-grid dt {
    color: #5f7b8f;
    font-size: .6rem;
    text-transform: uppercase;
}

.detail-grid dd {
    margin: .2rem 0 0;
    color: #c4d6e2;
    font-size: .76rem;
    font-weight: 700;
}

.license-card-actions,
.command-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.license-page-heading,
.server-page-heading {
    min-height: auto;
}

/* Server cards and wizard */
.server-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .8rem;
}

.server-card {
    padding: 1rem;
    border: 1px solid rgba(85, 158, 204, .14);
    border-radius: .8rem;
    background: rgba(4, 17, 28, .4);
}

.server-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.server-machine {
    display: grid;
    gap: .15rem;
}

.server-machine i {
    display: block;
    width: 2rem;
    height: .4rem;
    border: 1px solid rgba(50, 178, 240, .35);
    border-radius: .15rem;
    background: rgba(30, 130, 192, .12);
}

.server-card h2 {
    margin: 0;
    font-size: 1rem;
}

.server-card > p {
    color: var(--muted);
    font-size: .7rem;
}

.server-card dl {
    display: grid;
    gap: .4rem;
    margin: 1rem 0;
}

.server-card dl > div {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid rgba(86, 162, 211, .08);
    font-size: .68rem;
}

.server-card dt { color: #617d90; }
.server-card dd { margin: 0; color: #b3c7d4; }

.wizard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(16rem, .7fr);
    align-items: start;
    gap: 1rem;
}

.wizard-panel {
    padding: 1.6rem;
}

.wizard-progress {
    display: grid;
    margin-bottom: 2rem;
    grid-template-columns: repeat(4, 1fr);
}

.wizard-progress > div {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    color: #536f82;
    font-size: .62rem;
    text-align: center;
}

.wizard-progress > div::after {
    position: absolute;
    z-index: -1;
    top: 1rem;
    left: 50%;
    width: 100%;
    height: 1px;
    background: rgba(84, 159, 206, .18);
    content: "";
}

.wizard-progress > div:last-child::after {
    display: none;
}

.wizard-progress span {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid rgba(81, 153, 198, .25);
    border-radius: 50%;
    background: var(--panel-strong);
    font-size: .68rem;
    font-weight: 850;
}

.wizard-progress .is-current,
.wizard-progress .is-complete {
    color: #b9d0de;
}

.wizard-progress .is-current span {
    border-color: var(--blue);
    color: var(--cyan);
    box-shadow: 0 0 1rem rgba(36, 140, 255, .18);
}

.wizard-progress .is-complete span {
    border-color: rgba(66, 227, 171, .5);
    background: rgba(66, 227, 171, .1);
    color: var(--green);
}

.wizard-progress .is-complete::after {
    background: rgba(66, 227, 171, .35);
}

.wizard-progress-wide {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: var(--panel);
}

.guide-panel {
    position: sticky;
    top: 6.5rem;
}

.guide-panel h2 {
    margin: .8rem 0 .5rem;
    font-size: 1.15rem;
}

.guide-panel > p {
    color: var(--muted);
    font-size: .78rem;
}

.dns-example {
    display: grid;
    align-items: center;
    margin: 1rem 0;
    grid-template-columns: 1fr auto 1fr;
    gap: .5rem;
}

.dns-example > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: .65rem;
    border: 1px solid var(--line);
    border-radius: .6rem;
    background: rgba(3, 15, 25, .4);
}

.dns-example small {
    color: #5c778a;
    font-size: .58rem;
}

.dns-example strong {
    overflow: hidden;
    color: #c1d6e2;
    font-size: .68rem;
    text-overflow: ellipsis;
}

.input-prefix,
.input-suffix {
    display: flex;
    align-items: stretch;
}

.input-prefix > span,
.input-suffix > span {
    display: flex;
    align-items: center;
    padding: 0 .7rem;
    border: 1px solid rgba(94, 158, 199, .24);
    background: rgba(20, 56, 79, .35);
    color: #7692a6;
    font-size: .75rem;
}

.input-prefix > span {
    border-right: 0;
    border-radius: .68rem 0 0 .68rem;
}

.input-prefix input {
    border-radius: 0 .68rem .68rem 0;
}

.input-suffix input {
    border-radius: .68rem 0 0 .68rem;
}

.input-suffix > span {
    border-left: 0;
    border-radius: 0 .68rem .68rem 0;
}

.info-box {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .8rem;
    border: 1px solid rgba(67, 175, 231, .16);
    border-radius: .7rem;
    background: rgba(29, 101, 143, .09);
}

.info-box > span:first-child {
    display: grid;
    flex: 0 0 1.4rem;
    height: 1.4rem;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--cyan);
    font-size: .65rem;
    font-weight: 900;
}

.info-box p {
    display: flex;
    flex-direction: column;
    margin: 0;
    color: var(--muted);
    font-size: .72rem;
}

.info-box strong {
    color: #c3d9e5;
}

.setup-stage {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1.5rem;
}

.setup-stage-number {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: .7rem;
    color: var(--cyan);
    font-size: .72rem;
    font-weight: 900;
}

.stage-complete .setup-stage-number {
    border-color: rgba(66, 227, 171, .4);
    background: rgba(66, 227, 171, .08);
    color: var(--green);
}

.stage-locked {
    opacity: .6;
}

.setup-stage-content {
    min-width: 0;
}

.stage-lead {
    max-width: 700px;
    color: var(--muted);
    font-size: .8rem;
}

.lock-label {
    display: inline-flex;
    align-items: center;
    color: #6a8293;
    font-size: .68rem;
}

.lock-label::before {
    margin-right: .35rem;
    content: "◇";
}

.dns-record {
    display: grid;
    margin: 1rem 0;
    border: 1px solid rgba(89, 164, 211, .15);
    border-radius: .8rem;
    background: rgba(3, 15, 25, .4);
}

.dns-record > div {
    display: grid;
    align-items: center;
    padding: .75rem;
    border-bottom: 1px solid rgba(89, 164, 211, .1);
    grid-template-columns: 8rem minmax(0, 1fr) auto;
    gap: .8rem;
}

.dns-record > div:last-child {
    border-bottom: 0;
}

.dns-record dt {
    color: #607b8f;
    font-size: .66rem;
    text-transform: uppercase;
}

.dns-record dd {
    overflow: hidden;
    margin: 0;
    color: #c7dae5;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: .75rem;
    text-overflow: ellipsis;
}

.dns-record button {
    border: 0;
    background: transparent;
    color: var(--blue-bright);
    cursor: pointer;
    font-size: .65rem;
    font-weight: 750;
}

.dns-waiting {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .9rem;
}

.dns-waiting > div {
    display: flex;
    flex-direction: column;
}

.dns-waiting strong {
    font-size: .8rem;
}

.dns-waiting small,
.last-checked {
    color: #637f92;
    font-size: .66rem;
}

.spinner {
    display: inline-block;
    flex: 0 0 1.5rem;
    height: 1.5rem;
    border: 2px solid rgba(52, 183, 245, .15);
    border-top-color: var(--cyan);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.os-options {
    display: grid;
    margin-bottom: 1rem;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
}

.os-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: .7rem;
    background: rgba(3, 15, 25, .38);
    cursor: pointer;
}

.os-option:has(input:checked) {
    border-color: var(--blue);
    background: rgba(28, 125, 188, .12);
}

.os-option input {
    position: absolute;
    opacity: 0;
}

.os-mark {
    display: grid;
    flex: 0 0 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid rgba(57, 178, 241, .24);
    border-radius: .5rem;
    color: var(--cyan);
    font-size: .6rem;
    font-weight: 900;
}

.os-option > span:nth-of-type(2) {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.os-option strong {
    overflow: hidden;
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.os-option small {
    color: var(--muted);
    font-size: .58rem;
}

.os-option i {
    display: none;
    color: var(--green);
    font-size: .7rem;
    font-style: normal;
}

.os-option:has(input:checked) i {
    display: block;
}

.command-warning {
    display: flex;
    gap: .8rem;
    margin-bottom: 1.5rem;
    padding: .9rem;
    border: 1px solid rgba(255, 202, 104, .24);
    border-radius: .75rem;
    background: rgba(255, 202, 104, .06);
}

.command-warning > span {
    display: grid;
    flex: 0 0 1.6rem;
    height: 1.6rem;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 202, 104, .12);
    color: var(--amber);
    font-weight: 900;
}

.command-warning strong {
    color: #ffe1a4;
}

.command-warning p {
    margin: .2rem 0 0;
    color: #aa956c;
    font-size: .7rem;
}

.install-steps {
    display: grid;
    gap: .65rem;
    padding: 0;
    margin: 0 0 1.3rem;
    list-style: none;
}

.install-steps li {
    display: flex;
    gap: .75rem;
}

.install-steps li > span {
    display: grid;
    flex: 0 0 1.8rem;
    height: 1.8rem;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--cyan);
    font-size: .65rem;
    font-weight: 850;
}

.install-steps p {
    margin: .1rem 0 0;
    color: var(--muted);
    font-size: .7rem;
}

.command-box {
    overflow: hidden;
    margin: 1rem 0;
    border: 1px solid rgba(58, 179, 240, .3);
    border-radius: .8rem;
    background: #020b12;
}

.command-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--line);
    background: rgba(14, 45, 66, .5);
}

.command-heading > span {
    color: #6f8ca0;
    font-size: .65rem;
    font-weight: 750;
    text-transform: uppercase;
}

.copy-button {
    padding: .3rem .5rem;
    border: 1px solid var(--line);
    border-radius: .45rem;
    background: rgba(32, 112, 165, .15);
    color: var(--blue-bright);
    cursor: pointer;
    font-size: .65rem;
    font-weight: 750;
}

.command-box code {
    display: block;
    overflow-x: auto;
    padding: 1.2rem;
    color: #b9e4f8;
    font-size: .72rem;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.token-expiry {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1rem 0;
    color: #a9c0cf;
}

.token-expiry > div {
    display: flex;
    flex-direction: column;
}

.token-expiry small {
    color: var(--muted);
    font-size: .68rem;
}

/* Administration */
.admin-phase-notice {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1rem;
    padding: .8rem 1rem;
    border: 1px solid rgba(255, 202, 104, .2);
    border-radius: .75rem;
    background: rgba(255, 202, 104, .055);
}

.admin-phase-notice > span {
    padding: .25rem .5rem;
    border-radius: 999px;
    background: rgba(255, 202, 104, .11);
    color: var(--amber);
    font-size: .65rem;
    font-weight: 850;
    white-space: nowrap;
}

.admin-phase-notice p {
    margin: 0;
    color: #a99a7d;
    font-size: .72rem;
}

.admin-checklist {
    display: grid;
    gap: .55rem;
}

.admin-checklist a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem;
    border: 1px solid rgba(82, 154, 199, .12);
    border-radius: .65rem;
    color: #99b2c2;
    background: rgba(3, 16, 26, .35);
}

.admin-checklist a:hover {
    border-color: var(--line-strong);
}

.checklist-icon {
    display: grid;
    flex: 0 0 2rem;
    height: 2rem;
    place-items: center;
    border-radius: .5rem;
    background: rgba(29, 128, 190, .13);
    color: var(--cyan);
}

.admin-checklist a > div {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.admin-checklist strong {
    color: #ccdee8;
    font-size: .76rem;
}

.admin-checklist small {
    color: var(--muted);
    font-size: .63rem;
}

.state-model {
    display: grid;
    gap: .6rem;
}

.state-model > div {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .6rem 0;
    border-bottom: 1px solid rgba(86, 162, 211, .08);
}

.state-node {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    box-shadow: 0 0 .8rem currentColor;
}

.state-blue { color: var(--blue); background: var(--blue); }
.state-violet { color: var(--violet); background: var(--violet); }
.state-cyan { color: var(--cyan); background: var(--cyan); }
.state-green { color: var(--green); background: var(--green); }

.state-model p {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.state-model strong { font-size: .76rem; }
.state-model small { color: var(--muted); font-size: .63rem; }
.panel-note { margin: 1rem 0 0 !important; color: #60798c !important; font-size: .7rem !important; }

.admin-form {
    display: grid;
    gap: 0;
}

.settings-section {
    padding: 1.4rem;
}

.editable-table .compact-input {
    max-width: 9rem;
}

.editable-table td > input,
.editable-table td select {
    min-height: 2.35rem;
    padding: .45rem .55rem;
    border: 1px solid rgba(94, 158, 199, .24);
    border-radius: .55rem;
    background: rgba(2, 13, 22, .68);
    color: var(--ink);
}

.editable-table td form {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.compact-input input {
    min-width: 0;
    height: 2.6rem;
    padding: .55rem .65rem;
    border: 1px solid rgba(94, 158, 199, .24);
    background: rgba(2, 13, 22, .68);
}

.sticky-save-bar {
    position: sticky;
    z-index: 10;
    bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .5rem;
    padding: .85rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: .85rem;
    background: rgba(5, 20, 32, .94);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .35);
    backdrop-filter: blur(16px);
}

.sticky-save-bar p {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-size: .72rem;
}

.sticky-save-bar span {
    color: var(--muted);
    font-size: .63rem;
}

.integration-heading {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1.2rem;
}

.integration-heading > div {
    flex: 1;
}

.integration-heading h2 {
    margin: 0;
    font-size: 1.1rem;
}

.integration-heading p {
    margin: .2rem 0 0;
    color: var(--muted);
    font-size: .7rem;
}

.integration-heading code {
    color: #a8d9f0;
}

.integration-logo {
    display: grid;
    flex: 0 0 2.7rem;
    height: 2.7rem;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: .7rem;
    font-weight: 900;
}

.google-logo { background: #eef6fb; color: #4285f4; }
.paystack-logo { background: rgba(66, 227, 171, .1); color: var(--green); }
.now-logo { background: rgba(136, 109, 255, .12); color: #a795ff; }
.mail-logo { background: rgba(36, 140, 255, .12); color: var(--blue-bright); }

.settings-launch-card {
    min-height: 15rem;
}

.settings-launch-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.5rem;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: .75rem;
    background: rgba(28, 125, 188, .11);
    color: var(--cyan);
    font-size: 1.2rem;
}

.settings-launch-card h2 {
    margin-bottom: .5rem;
}

.settings-launch-card p {
    min-height: 3.5rem;
    color: var(--muted);
    font-size: .78rem;
}

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

.guardrail-grid > div {
    padding: 1rem;
    border: 1px solid rgba(82, 154, 199, .12);
    border-radius: .75rem;
    background: rgba(3, 16, 26, .3);
}

.guardrail-grid strong {
    font-size: .8rem;
}

.guardrail-grid p {
    margin: .4rem 0 0;
    color: var(--muted);
    font-size: .68rem;
}

/* Responsive */
@media (max-width: 1080px) {
    .primary-nav { gap: .9rem; }
    .primary-nav > a:not(.button) { font-size: .82rem; }
    .hero-grid { grid-template-columns: 1fr .9fr; gap: 2rem; }
    .hero-visual { min-height: 440px; }
    .floating-card-top { right: 0; }
    .floating-card-bottom { left: 0; }
    .form-grid-four { grid-template-columns: repeat(2, 1fr); }
    .server-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 920px) {
    .nav-toggle {
        display: block;
    }

    .primary-nav {
        position: absolute;
        top: calc(100% + 1px);
        right: 1rem;
        left: 1rem;
        display: none;
        padding: 1rem;
        border: 1px solid var(--line-strong);
        border-radius: .9rem;
        background: rgba(5, 18, 29, .98);
        box-shadow: var(--shadow);
    }

    .primary-nav.is-open {
        display: grid;
    }

    .primary-nav > a,
    .nav-inline-form,
    .nav-inline-form .button {
        width: 100%;
    }

    .hero {
        padding-top: 4rem;
    }

    .hero-grid,
    .auth-shell,
    .lifecycle-grid {
        grid-template-columns: 1fr;
    }

    .hero-copy {
        text-align: center;
    }

    .hero-lead {
        margin-inline: auto;
    }

    .hero-actions,
    .hero-proof {
        justify-content: center;
    }

    .hero-visual {
        min-height: 500px;
    }

    .split-heading {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 1rem;
    }

    .capability-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .capability-card-featured {
        grid-row: auto;
        min-height: 22rem;
    }

    .capability-card-featured .capability-icon {
        width: 5rem;
        height: 5.5rem;
        margin: 1rem 0 2rem;
    }

    .workflow-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .workflow-card:nth-child(2) { border-radius: 0 1rem 0 0; }
    .workflow-card:nth-child(3) { border-left: 1px solid var(--line); border-radius: 0 0 0 1rem; }
    .workflow-card:last-child { border-radius: 0 0 1rem 0; }

    .lifecycle-grid {
        gap: 2rem;
    }

    .lifecycle-visual {
        min-height: 25rem;
    }

    .auth-story {
        text-align: center;
    }

    .auth-story > p,
    .auth-signal,
    .trial-timeline {
        margin-inline: auto;
    }

    .auth-points {
        width: max-content;
        max-width: 100%;
        margin-inline: auto;
        text-align: left;
    }

    .first-phase-note {
        margin-inline: auto;
        text-align: left;
    }

    .pricing-layout {
        grid-template-columns: 1fr;
    }

    .price-summary {
        position: static;
    }

    .account-shell {
        grid-template-columns: 1fr;
    }

    .account-sidebar {
        position: static;
        height: auto;
        min-height: 0;
    }

    .sidebar-nav {
        display: flex;
        overflow-x: auto;
        padding-bottom: .25rem;
    }

    .sidebar-nav a {
        flex: 0 0 auto;
    }

    .sidebar-support {
        display: none;
    }

    .content-grid-wide {
        grid-template-columns: 1fr;
    }

    .metric-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wizard-layout {
        grid-template-columns: 1fr;
    }

    .guide-panel {
        position: static;
    }
}

/* Two-factor account protection */
.auth-shell-single {
    max-width: 34rem;
    grid-template-columns: minmax(0, 1fr);
}

.auth-shell-single .auth-panel {
    width: 100%;
}

.two-factor-shield,
.security-enabled-mark {
    display: grid;
    width: 3.8rem;
    height: 3.8rem;
    margin-bottom: 1rem;
    place-items: center;
    border: 1px solid rgba(193, 73, 239, .48);
    border-radius: 1.15rem 1.15rem 1.55rem 1.55rem;
    background:
        radial-gradient(circle at 50% 35%, rgba(225, 104, 255, .34), transparent 48%),
        rgba(118, 30, 149, .24);
    box-shadow: 0 0 2rem rgba(174, 52, 221, .22);
    color: #f4cfff;
    font-size: 1.35rem;
    font-weight: 900;
}

.auth-cancel-form {
    margin-top: 1rem;
    text-align: center;
}

.auth-cancel-form button {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.verification-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    margin-top: 1rem;
}

.verification-actions form {
    margin: 0;
}

.verification-actions button {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.verification-deadline {
    margin: 1rem 0 0;
    padding: .8rem;
    border: 1px solid rgba(205, 93, 255, .22);
    border-radius: .7rem;
    background: rgba(128, 37, 176, .1);
    color: var(--muted-strong);
    font-size: .75rem;
    line-height: 1.55;
    text-align: center;
}

.security-intro-panel,
.setup-two-factor-panel,
.recovery-code-panel,
.danger-zone-panel {
    padding: clamp(1.2rem, 3vw, 2rem);
}

.security-feature-grid {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr);
    gap: 1.2rem;
}

.security-feature-icon {
    display: grid;
    width: 4.25rem;
    height: 4.25rem;
    place-items: center;
    border: 1px solid rgba(190, 65, 239, .35);
    border-radius: 1rem;
    background: rgba(151, 40, 191, .14);
    color: #dd7cff;
    font-size: 1.7rem;
}

.security-intro-panel h2,
.setup-two-factor-panel h2,
.recovery-code-panel h2,
.danger-zone-panel h2 {
    margin: .15rem 0 .45rem;
}

.security-intro-panel p,
.setup-two-factor-panel p,
.recovery-code-panel p,
.danger-zone-panel p,
.account-content > .content-grid .panel > p {
    color: var(--muted);
}

.security-action-form {
    max-width: 34rem;
    margin-top: 1.5rem;
}

.two-factor-setup-grid {
    display: grid;
    margin: 1rem 0 1.4rem;
    grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr);
    gap: 1.4rem;
}

.qr-code-card,
.manual-setup-card {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: rgba(4, 11, 18, .44);
}

.qr-code-card {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: .75rem;
}

.qr-code-card img {
    width: min(100%, 17.5rem);
    height: auto;
    border-radius: .65rem;
    background: #fff;
}

.qr-code-card small {
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.55;
}

.manual-setup-card {
    min-width: 0;
}

.manual-secret {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 1rem 0;
    padding: .75rem;
    border: 1px solid rgba(189, 74, 234, .3);
    border-radius: .7rem;
    background: rgba(123, 33, 158, .1);
}

.manual-secret code {
    min-width: 0;
    flex: 1;
    overflow-wrap: anywhere;
    color: #efc8ff;
    font-size: .82rem;
    letter-spacing: .12em;
}

.setup-details {
    display: grid;
    margin: 1rem 0 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
}

.setup-details div {
    padding: .65rem;
    border: 1px solid rgba(123, 78, 144, .18);
    border-radius: .6rem;
}

.setup-details dt {
    color: var(--muted);
    font-size: .62rem;
    text-transform: uppercase;
}

.setup-details dd {
    margin: .18rem 0 0;
    overflow-wrap: anywhere;
    font-size: .75rem;
}

.confirm-two-factor-form {
    max-width: 28rem;
}

.cancel-setup-form {
    margin-top: .75rem;
}

.recovery-code-panel {
    margin-bottom: 1rem;
    border-color: rgba(74, 214, 166, .35);
}

.recovery-code-grid {
    display: grid;
    margin: 1rem 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.recovery-code-grid code {
    padding: .65rem .75rem;
    border: 1px solid rgba(74, 214, 166, .2);
    border-radius: .55rem;
    background: rgba(24, 109, 80, .1);
    color: #bfffe6;
    font-size: .8rem;
    letter-spacing: .06em;
}

.security-policy-note {
    display: grid;
    gap: .25rem;
    margin-top: 1rem;
    padding: .85rem;
    border: 1px solid rgba(196, 75, 237, .24);
    border-radius: .7rem;
    background: rgba(135, 32, 171, .1);
}

.security-policy-note span {
    color: var(--muted);
    font-size: .72rem;
}

.danger-zone-panel {
    display: grid;
    align-items: end;
    margin-top: 1rem;
    grid-template-columns: minmax(0, .8fr) minmax(22rem, 1.2fr);
    gap: 1.5rem;
    border-color: rgba(255, 111, 137, .25);
}

.danger-zone-panel .button {
    align-self: end;
}

[data-theme="day"] .qr-code-card,
[data-theme="day"] .manual-setup-card {
    border-color: var(--line);
    background: #fcf9fd;
}

[data-theme="day"] .manual-secret {
    border-color: rgba(125, 35, 158, .25);
    background: rgba(139, 46, 172, .07);
}

[data-theme="day"] .manual-secret code {
    color: #5e1d76;
}

[data-theme="day"] .recovery-code-grid code {
    border-color: rgba(29, 139, 98, .2);
    background: rgba(29, 139, 98, .07);
    color: #166546;
}

@media (max-width: 760px) {
    .two-factor-setup-grid,
    .danger-zone-panel {
        grid-template-columns: 1fr;
    }

    .security-feature-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .recovery-code-grid,
    .setup-details {
        grid-template-columns: 1fr;
    }

    .manual-secret {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 680px) {
    :root {
        --shell: min(100% - 1.1rem, 1180px);
    }

    .nav-shell {
        min-height: 4.3rem;
    }

    .brand-copy small {
        display: none;
    }

    .hero {
        padding: 3.5rem 0;
    }

    .hero h1 {
        font-size: clamp(2.7rem, 13vw, 4rem);
    }

    .hero-lead {
        font-size: .98rem;
    }

    .hero-actions .button {
        width: 100%;
    }

    .hero-proof {
        display: grid;
        gap: .5rem;
        text-align: left;
    }

    .hero-visual {
        min-height: 365px;
    }

    .floating-card {
        min-width: 11rem;
        padding: .6rem;
    }

    .floating-card-top { top: 0; }
    .floating-card-bottom { bottom: 0; }
    .floating-card .status-pill { display: none; }

    .trust-strip-inner {
        display: block;
        padding-block: 1.3rem;
    }

    .trust-strip p {
        margin-bottom: .8rem;
    }

    .trust-strip-inner > div {
        justify-content: flex-start;
    }

    .section {
        padding: 4.5rem 0;
    }

    .capability-grid,
    .platform-grid,
    .workflow-grid,
    .custom-quote-panel,
    .content-grid,
    .guardrail-grid,
    .server-card-grid {
        grid-template-columns: 1fr;
    }

    .workflow-card,
    .workflow-card:first-child,
    .workflow-card:nth-child(2),
    .workflow-card:nth-child(3),
    .workflow-card:last-child {
        min-height: auto;
        border: 1px solid var(--line);
        border-radius: .8rem;
    }

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

    .workflow-icon {
        margin: 1rem 0;
    }

    .lifecycle-list div {
        grid-template-columns: 1fr;
        gap: .2rem;
    }

    .cta-panel {
        padding: 2rem 1.2rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-links {
        justify-content: flex-start;
    }

    .auth-section {
        padding: 3rem 0;
    }

    .auth-shell {
        gap: 3rem;
    }

    .auth-story h1 {
        font-size: 2.7rem;
    }

    .auth-panel {
        padding: 1.2rem;
    }

    .form-grid-two,
    .form-grid-three,
    .form-grid-four {
        grid-template-columns: 1fr;
    }

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

    .price-anchor {
        width: 100%;
    }

    .bundle-options {
        grid-template-columns: repeat(2, 1fr);
    }

    .custom-quote-panel {
        gap: 2rem;
    }

    .account-shell {
        padding-top: 1rem;
    }

    .account-heading {
        min-height: auto;
        flex-direction: column;
        gap: 1rem;
    }

    .account-heading > .button {
        width: 100%;
    }

    .metric-grid,
    .metric-grid-three {
        grid-template-columns: 1fr 1fr;
    }

    .license-row {
        align-items: flex-start;
    }

    .license-mark {
        display: none;
    }

    .seat-usage {
        grid-template-columns: 1fr;
        gap: .3rem;
    }

    .license-meta {
        display: grid;
        gap: .1rem;
    }

    .detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wizard-progress small {
        display: none;
    }

    .wizard-progress > div::after {
        top: 1rem;
    }

    .setup-stage {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .dns-record > div {
        grid-template-columns: 1fr auto;
    }

    .dns-record dt {
        grid-column: 1 / -1;
    }

    .os-options {
        grid-template-columns: 1fr;
    }

    .integration-heading {
        align-items: flex-start;
    }

    .integration-heading .status-pill {
        display: none;
    }

    .sticky-save-bar {
        position: static;
        align-items: stretch;
        flex-direction: column;
    }
}

/* Appearance control and high-visibility scan clock */
.primary-nav {
    margin-left: auto;
}

.header-controls {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .6rem;
}

.theme-toggle {
    display: inline-flex;
    min-height: 2.55rem;
    align-items: center;
    gap: .55rem;
    padding: .35rem .7rem .35rem .38rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .035);
    color: var(--muted-strong);
    cursor: pointer;
    font-size: .72rem;
    font-weight: 800;
    transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

.theme-toggle:hover {
    border-color: var(--line-strong);
    background: rgba(149, 51, 204, .14);
    color: #fff;
    transform: translateY(-1px);
}

.theme-toggle-icon {
    position: relative;
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(218, 132, 255, .38);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(137, 40, 188, .45), rgba(37, 12, 49, .7));
    box-shadow: inset 0 0 1rem rgba(219, 126, 255, .12), 0 0 1rem rgba(166, 55, 217, .15);
}

.theme-sun,
.theme-moon {
    position: absolute;
    line-height: 1;
    transition: opacity .2s ease, transform .25s ease;
}

.theme-sun {
    color: #f0b4ff;
}

.theme-moon {
    color: #7224a0;
    opacity: 0;
    transform: translateY(1rem) rotate(30deg);
}

[data-theme="day"] .theme-sun {
    opacity: 0;
    transform: translateY(-1rem) rotate(-30deg);
}

[data-theme="day"] .theme-moon {
    opacity: 1;
    transform: translateY(0) rotate(0);
}

.radar-shell::after {
    position: absolute;
    z-index: 1;
    inset: 4%;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(224, 151, 255, .72) 0deg 1deg,
        transparent 1deg 15deg
    );
    content: "";
    filter: drop-shadow(0 0 .35rem rgba(201, 86, 255, .55));
    mask: radial-gradient(circle, transparent 0 91%, #000 91.5% 100%);
    pointer-events: none;
}

.radar-sweep {
    z-index: 2;
    background: conic-gradient(
        from 180deg at 0 0,
        rgba(238, 180, 255, .82) 0deg,
        rgba(204, 82, 255, .48) 28deg,
        transparent 58deg
    );
    filter: drop-shadow(0 0 .55rem rgba(214, 105, 255, .65));
    animation-duration: 4.5s;
}

.scan-clock {
    position: absolute;
    z-index: 5;
    right: 13%;
    bottom: 18%;
    display: flex;
    min-width: 5.2rem;
    flex-direction: column;
    padding: .48rem .62rem;
    border: 1px solid rgba(221, 131, 255, .46);
    border-radius: .7rem;
    background: rgba(8, 3, 11, .9);
    box-shadow: 0 0 1.6rem rgba(186, 67, 236, .25);
    line-height: 1.1;
    text-align: center;
}

.scan-clock b {
    color: #f0c4ff;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: .86rem;
    letter-spacing: .05em;
}

.scan-clock small {
    margin-top: .28rem;
    color: #a990b2;
    font-size: .48rem;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* Readable day presentation across public, client and administration areas. */
[data-theme="day"] {
    color-scheme: light;
    --ink: #211426;
    --muted: #6e5f74;
    --muted-strong: #4e3c55;
    --bg: #f8f3fb;
    --bg-soft: #f1e8f5;
    --panel: rgba(255, 255, 255, .94);
    --panel-strong: #fff;
    --panel-light: #f4eaf8;
    --line: rgba(115, 37, 151, .18);
    --line-strong: rgba(132, 43, 173, .38);
    --cyan: #8d25bb;
    --blue: #7d23ae;
    --blue-bright: #9d32ca;
    --violet: #7f2db4;
    --shadow: 0 1.3rem 4rem rgba(65, 24, 80, .12);
}

.brand-logo-day {
    display: none;
}

[data-theme="day"] .brand-logo-night {
    display: none;
}

[data-theme="day"] .brand-logo-day {
    display: block;
}

button:focus-visible {
    outline: 3px solid rgba(201, 91, 255, .35);
    outline-offset: 3px;
}

[data-theme="day"] .hero h1 span,
[data-theme="day"] .section-heading h2 span,
[data-theme="day"] .lifecycle-copy h2 span,
[data-theme="day"] .compact-hero h1 span,
[data-theme="day"] .auth-story h1 span,
[data-theme="day"] .strengths-copy h2 span,
[data-theme="day"] .pricing-callout h2 span {
    background: linear-gradient(135deg, #6a1d8b, #922aba 58%, #54206a);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="day"] .status-positive {
    border-color: rgba(12, 116, 75, .22);
    background: rgba(12, 116, 75, .08);
    color: #08704a;
}

[data-theme="day"] .status-warning {
    border-color: rgba(142, 91, 4, .22);
    background: rgba(142, 91, 4, .08);
    color: #805300;
}

[data-theme="day"] .status-negative {
    border-color: rgba(168, 36, 64, .22);
    background: rgba(168, 36, 64, .08);
    color: #a32440;
}

[data-theme="day"] .builder-step-heading > span,
[data-theme="day"] .trial-timeline > div > span {
    border-color: rgba(119, 34, 153, .25);
    background-color: rgba(137, 43, 175, .1);
    color: #651d84;
}

[data-theme="day"] .summary-total strong {
    color: #6d1c91;
}

[data-theme="day"] .ticket-message > header strong,
[data-theme="day"] .ticket-meta dd {
    color: #2d1b33;
}

[data-theme="day"] .ticket-message > header span,
[data-theme="day"] .ticket-message > header time,
[data-theme="day"] .ticket-meta dt {
    color: #6f5d75;
}

.radar-sweep {
    background: conic-gradient(
        from 180deg at 0 0,
        rgba(238, 180, 255, .82) 0deg,
        rgba(204, 82, 255, .48) 28deg,
        transparent 58deg
    );
}

.scan-clock b {
    font-size: 1rem;
}

.scan-clock small {
    font-size: .62rem;
}

[data-theme="day"] body {
    background: #f8f3fb;
    color: var(--ink);
}

[data-theme="day"] body::before {
    background:
        radial-gradient(circle at 8% 12%, rgba(186, 102, 222, .16), transparent 29%),
        radial-gradient(circle at 92% 5%, rgba(219, 158, 242, .22), transparent 31%),
        linear-gradient(180deg, #fff 0, #faf6fc 25rem, #f5eef8 100%);
}

[data-theme="day"] .ambient-grid {
    opacity: .22;
    background-image:
        linear-gradient(rgba(122, 48, 153, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(122, 48, 153, .08) 1px, transparent 1px);
}

[data-theme="day"] .ambient-glow {
    opacity: .06;
}

[data-theme="day"] a {
    color: #8125ae;
}

[data-theme="day"] a:hover {
    color: #5d137e;
}

[data-theme="day"] .site-header,
[data-theme="day"] .site-header.is-scrolled {
    border-color: var(--line);
    background: rgba(255, 255, 255, .88);
}

[data-theme="day"] .primary-nav > a:not(.button) {
    color: #5f5066;
}

[data-theme="day"] .primary-nav > a:not(.button):hover {
    color: #321c3a;
}

[data-theme="day"] .nav-toggle {
    border-color: var(--line);
    background: #fff;
}

[data-theme="day"] .nav-toggle span:not(.sr-only) {
    background: #3c2345;
}

[data-theme="day"] .theme-toggle {
    border-color: rgba(112, 34, 147, .24);
    background: rgba(255, 255, 255, .86);
    color: #4d3855;
}

[data-theme="day"] .theme-toggle:hover {
    border-color: var(--line-strong);
    background: #fff;
    color: #321c3a;
}

[data-theme="day"] .theme-toggle-icon {
    background: linear-gradient(145deg, #f4d9ff, #fff);
    box-shadow: inset 0 0 1rem rgba(139, 42, 179, .08);
}

[data-theme="day"] .button-primary {
    color: #fff;
}

[data-theme="day"] .button-secondary {
    border-color: rgba(126, 37, 165, .34);
    background: rgba(157, 66, 194, .09);
    color: #55206d;
}

[data-theme="day"] .button-secondary:hover {
    border-color: rgba(102, 25, 136, .5);
    background: rgba(150, 52, 190, .15);
    color: #35143f;
}

[data-theme="day"] .button-ghost {
    border-color: var(--line);
    background: rgba(255, 255, 255, .68);
    color: #5e4b65;
}

[data-theme="day"] .button-ghost:hover {
    border-color: var(--line-strong);
    background: #fff;
    color: #321b3a;
}

[data-theme="day"] .hero-lead,
[data-theme="day"] .hero-proof,
[data-theme="day"] .section-heading p,
[data-theme="day"] .strengths-copy > p,
[data-theme="day"] .pricing-callout p,
[data-theme="day"] .faq-list details p {
    color: var(--muted);
}

[data-theme="day"] .hero-proof b {
    color: #2a1830;
}

[data-theme="day"] .radar-shell {
    border-color: rgba(132, 37, 169, .28);
    background:
        linear-gradient(90deg, transparent calc(50% - .5px), rgba(126, 39, 162, .14) 50%, transparent calc(50% + .5px)),
        linear-gradient(transparent calc(50% - .5px), rgba(126, 39, 162, .14) 50%, transparent calc(50% + .5px)),
        radial-gradient(circle, rgba(237, 207, 247, .88), rgba(255, 255, 255, .76) 64%, rgba(242, 224, 248, .45));
    box-shadow: inset 0 0 5rem rgba(131, 35, 168, .08), 0 0 5rem rgba(83, 22, 108, .08);
}

[data-theme="day"] .radar-ring {
    border-color: rgba(123, 33, 158, .17);
}

[data-theme="day"] .shield-node {
    border-color: rgba(132, 39, 170, .36);
    background: radial-gradient(circle, rgba(255, 255, 255, .94), rgba(229, 198, 239, .88) 74%);
}

[data-theme="day"] .shield-node small {
    color: #5f2b73;
}

[data-theme="day"] .signal-node,
[data-theme="day"] .floating-card,
[data-theme="day"] .scan-clock {
    border-color: rgba(122, 34, 157, .22);
    background: rgba(255, 255, 255, .92);
    color: #5d4b64;
    box-shadow: 0 1rem 2.8rem rgba(63, 22, 79, .1);
}

[data-theme="day"] .floating-card small,
[data-theme="day"] .scan-clock small {
    color: #76657d;
}

[data-theme="day"] .scan-clock b {
    color: #6d1c91;
}

[data-theme="day"] .trust-strip,
[data-theme="day"] .section-platforms {
    background: rgba(255, 255, 255, .64);
}

[data-theme="day"] .trust-strip p {
    color: #77667e;
}

[data-theme="day"] .trust-strip span {
    color: #4f3e56;
}

[data-theme="day"] .section-capabilities {
    background: linear-gradient(180deg, rgba(236, 217, 243, .5), rgba(255, 255, 255, .16));
}

[data-theme="day"] .capability-grid-commercial .capability-card,
[data-theme="day"] .strength-grid article,
[data-theme="day"] .platform-card {
    border-color: var(--line);
    background:
        radial-gradient(circle at 100% 0, rgba(177, 85, 213, .08), transparent 38%),
        linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(248, 241, 251, .96));
    box-shadow: 0 1rem 3rem rgba(70, 25, 86, .06);
}

[data-theme="day"] .capability-card p,
[data-theme="day"] .feature-list li,
[data-theme="day"] .strength-grid p,
[data-theme="day"] .platform-card small {
    color: var(--muted);
}

[data-theme="day"] .capability-symbol,
[data-theme="day"] .platform-mark {
    border-color: rgba(131, 37, 169, .26);
    background: rgba(167, 74, 202, .1);
    color: #6c1f8f;
}

[data-theme="day"] .section-strengths {
    border-color: var(--line);
    background:
        linear-gradient(90deg, transparent calc(50% - 1px), rgba(120, 34, 151, .06) 50%, transparent calc(50% + 1px)),
        rgba(243, 232, 247, .72);
}

[data-theme="day"] .pricing-callout {
    border-color: var(--line-strong);
    background:
        radial-gradient(circle at 95% 10%, rgba(178, 78, 216, .13), transparent 35%),
        linear-gradient(130deg, #fff, #f7edf9);
}

[data-theme="day"] .faq-list summary {
    color: #2e1935;
}

[data-theme="day"] .faq-list details[open] summary {
    color: #702192;
}

[data-theme="day"] .cta-panel {
    border-color: rgba(111, 30, 145, .36);
    background:
        radial-gradient(circle at 90% 50%, rgba(185, 91, 221, .18), transparent 34%),
        linear-gradient(130deg, #fff, #f0dff6);
}

[data-theme="day"] .cta-panel p {
    color: #69566f;
}

[data-theme="day"] .site-footer {
    border-color: var(--line);
    background: rgba(255, 255, 255, .76);
}

[data-theme="day"] .footer-links a,
[data-theme="day"] .footer-note {
    color: #695a70;
}

[data-theme="day"] .alert,
[data-theme="day"] .auth-panel,
[data-theme="day"] .builder-step,
[data-theme="day"] .price-summary,
[data-theme="day"] .custom-quote-panel,
[data-theme="day"] .account-sidebar,
[data-theme="day"] .panel,
[data-theme="day"] .metric-card,
[data-theme="day"] .license-card,
[data-theme="day"] .server-card,
[data-theme="day"] .setup-stage,
[data-theme="day"] .integration-card,
[data-theme="day"] .quote-card,
[data-theme="day"] .admin-license-row,
[data-theme="day"] .empty-state-large {
    border-color: var(--line);
    background: rgba(255, 255, 255, .94);
    color: var(--ink);
    box-shadow: 0 1rem 3rem rgba(64, 23, 79, .06);
}

[data-theme="day"] .field input,
[data-theme="day"] .field select,
[data-theme="day"] .field textarea,
[data-theme="day"] .choice-fieldset select,
[data-theme="day"] .bundle-option > span,
[data-theme="day"] .term-option,
[data-theme="day"] .radio-card,
[data-theme="day"] .license-row,
[data-theme="day"] .detail-grid > div,
[data-theme="day"] .empty-inline,
[data-theme="day"] .server-card {
    border-color: var(--line);
    background: #fcf9fd;
    color: var(--ink);
}

[data-theme="day"] .field input::placeholder,
[data-theme="day"] .field textarea::placeholder {
    color: #9c8ca2;
}

[data-theme="day"] .sidebar-nav a {
    color: #65546d;
}

[data-theme="day"] .sidebar-nav a:hover,
[data-theme="day"] .sidebar-nav a.is-active {
    background: rgba(137, 43, 175, .1);
    color: #4e1b62;
}

[data-theme="day"] th {
    color: #67546f;
}

[data-theme="day"] td {
    color: #594b60;
}

[data-theme="day"] td > strong,
[data-theme="day"] .summary-line strong,
[data-theme="day"] .detail-grid dd {
    color: #2d1b33;
}

[data-theme="day"] code,
[data-theme="day"] pre,
[data-theme="day"] .command-box {
    border-color: var(--line);
    background: #f5edf8;
    color: #3d2745;
}

@media (max-width: 1080px) {
    .theme-toggle-label {
        display: none;
    }

    .theme-toggle {
        padding-right: .38rem;
    }
}

@media (max-width: 920px) {
    .primary-nav {
        margin-left: 0;
    }

    [data-theme="day"] .primary-nav {
        background: rgba(255, 255, 255, .98);
    }
}

@media (max-width: 680px) {
    .scan-clock {
        right: 9%;
        bottom: 13%;
    }
}

/* Support operations */
.ticket-ref {
    color: #df9cff;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .04em;
}

.ticket-subject-link {
    color: var(--ink);
    font-weight: 760;
}

.ticket-heading {
    min-height: auto;
    align-items: center;
}

.ticket-heading h1 {
    overflow-wrap: anywhere;
}

.ticket-heading-status {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.ticket-priority {
    display: inline-flex;
    width: max-content;
    padding: .3rem .55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ticket-priority-low {
    border-color: rgba(143, 116, 255, .28);
    color: #b8a8ff;
}

.ticket-priority-normal {
    border-color: rgba(204, 99, 255, .32);
    color: #dda1ff;
}

.ticket-priority-high {
    border-color: rgba(255, 186, 83, .34);
    color: #ffd38c;
}

.ticket-priority-urgent {
    border-color: rgba(255, 83, 115, .38);
    color: #ff9aaf;
}

.ticket-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    align-items: start;
    gap: 1rem;
}

.ticket-thread-panel {
    overflow: hidden;
}

.ticket-thread {
    display: grid;
    gap: .85rem;
}

.ticket-message {
    position: relative;
    overflow: hidden;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: rgba(8, 3, 11, .68);
}

.ticket-message::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: #8150e8;
    content: "";
}

.ticket-message-admin {
    border-color: rgba(205, 95, 255, .27);
    background:
        radial-gradient(circle at 100% 0, rgba(181, 69, 229, .1), transparent 42%),
        rgba(19, 7, 26, .88);
}

.ticket-message-admin::before {
    background: linear-gradient(#e4a5ff, #9c34d0);
    box-shadow: 0 0 .7rem rgba(207, 96, 255, .55);
}

.ticket-message header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--line);
}

.ticket-message header > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.ticket-message header strong {
    overflow: hidden;
    color: var(--ink);
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-message header span,
.ticket-message time {
    color: var(--muted);
    font-size: .62rem;
}

.ticket-message time {
    flex: 0 0 auto;
}

.ticket-message-body {
    padding-top: .85rem;
    color: #c7bacd;
    font-size: .82rem;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.ticket-meta {
    display: grid;
    gap: .7rem;
    margin: 0;
}

.ticket-meta > div {
    display: grid;
    gap: .2rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--line);
}

.ticket-meta > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.ticket-meta dt {
    color: var(--muted);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ticket-meta dd {
    margin: 0;
    color: var(--ink);
    font-size: .76rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.ticket-reply-panel,
.ticket-closed-note {
    margin-top: 1rem;
}

.ticket-reply-panel .button {
    justify-self: start;
}

.ticket-form-panel {
    max-width: 820px;
}

.ticket-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
}

.ticket-filter-bar {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) 11rem 10rem auto;
    align-items: end;
    gap: .75rem;
}

.ticket-filter-actions {
    display: flex;
    gap: .5rem;
}

.pagination-wrap {
    margin-top: 1rem;
}

[data-theme="day"] .ticket-ref {
    color: #6e208f;
}

[data-theme="day"] .ticket-subject-link {
    color: #2c1833;
}

[data-theme="day"] .ticket-message {
    background: #fbf7fc;
}

[data-theme="day"] .ticket-message-admin {
    border-color: rgba(126, 36, 161, .2);
    background:
        radial-gradient(circle at 100% 0, rgba(180, 83, 217, .08), transparent 42%),
        #f6ecf9;
}

[data-theme="day"] .ticket-message-body {
    color: #4f4055;
}

[data-theme="day"] .ticket-priority-low {
    color: #5d489a;
}

[data-theme="day"] .ticket-priority-normal {
    color: #6e208f;
}

[data-theme="day"] .ticket-priority-high {
    color: #895a0d;
}

[data-theme="day"] .ticket-priority-urgent {
    color: #a72542;
}

@media (max-width: 1080px) {
    .ticket-filter-bar {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 920px) {
    .ticket-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .ticket-heading-status,
    .ticket-form-actions,
    .ticket-filter-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .ticket-filter-bar {
        grid-template-columns: 1fr;
    }

    .ticket-form-actions .button,
    .ticket-filter-actions .button {
        width: 100%;
    }

    .ticket-message header {
        flex-direction: column;
        gap: .35rem;
    }
}

@media (max-width: 420px) {
    .metric-grid,
    .metric-grid-three,
    .detail-grid {
        grid-template-columns: 1fr;
    }

    .bundle-options {
        grid-template-columns: 1fr 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* Final light-theme pricing and form contrast layer. */
[data-theme="day"] .pricing-currency-switch,
[data-theme="day"] .price-anchor,
[data-theme="day"] .builder-step,
[data-theme="day"] .price-summary,
[data-theme="day"] .custom-quote-panel {
    border-color: rgba(150, 73, 184, .28);
    background: #ffffff;
    color: #24152a;
    box-shadow: 0 1rem 3rem rgba(77, 27, 95, .08);
}

[data-theme="day"] .price-anchor small,
[data-theme="day"] .price-anchor span,
[data-theme="day"] .pricing-currency-switch legend,
[data-theme="day"] .pricing-currency-switch > small {
    color: #6d5b73;
}

[data-theme="day"] .price-anchor strong,
[data-theme="day"] .summary-total strong {
    color: #7b239f;
}

[data-theme="day"] .builder-step-heading h2,
[data-theme="day"] .bundle-option strong,
[data-theme="day"] .term-main strong,
[data-theme="day"] .radio-card strong,
[data-theme="day"] .price-summary h2,
[data-theme="day"] .summary-assurance strong,
[data-theme="day"] .custom-quote-panel h2 {
    color: #24152a;
}

[data-theme="day"] .builder-step-heading p,
[data-theme="day"] .bundle-option small,
[data-theme="day"] .term-main small,
[data-theme="day"] .radio-card small,
[data-theme="day"] .summary-assurance small,
[data-theme="day"] .summary-note,
[data-theme="day"] .custom-quote-panel > div p,
[data-theme="day"] .field small {
    color: #68596e;
}

[data-theme="day"] .bundle-option > span,
[data-theme="day"] .term-option,
[data-theme="day"] .radio-card {
    border-color: rgba(150, 73, 184, .22);
    background: #fbf7fd;
    color: #24152a;
}

[data-theme="day"] .bundle-option input:checked + span,
[data-theme="day"] .term-option:has(input:checked),
[data-theme="day"] .radio-card:has(input:checked) {
    border-color: #a53bd1;
    background: #f0def7;
    box-shadow: inset 0 0 0 1px rgba(165, 59, 209, .08);
}

[data-theme="day"] .discount-badge {
    border: 1px solid rgba(20, 122, 80, .18);
    background: #e9f8f0;
    color: #126943;
}

[data-theme="day"] .summary-line {
    border-color: rgba(111, 52, 135, .12);
    color: #67586d;
}

[data-theme="day"] .summary-line strong,
[data-theme="day"] .summary-total span {
    color: #2c1c32;
}

[data-theme="day"] .summary-assurance {
    border-color: rgba(111, 52, 135, .16);
}

[data-theme="day"] .summary-assurance > div > span {
    color: #147a50;
}

[data-theme="day"] .field label,
[data-theme="day"] .choice-fieldset legend {
    color: #3b2941;
}

[data-theme="day"] .field input,
[data-theme="day"] .field select,
[data-theme="day"] .field textarea,
[data-theme="day"] .choice-fieldset select {
    border-color: rgba(150, 73, 184, .25);
    background: #ffffff;
    color: #24152a;
}

[data-theme="day"] .field input::placeholder,
[data-theme="day"] .field textarea::placeholder {
    color: #88788e;
    opacity: 1;
}

/* TREJJ corporate purple theme */
:root {
    --ink: #f8f4fb;
    --muted: #a99caf;
    --muted-strong: #d2c6d7;
    --bg: #030105;
    --bg-soft: #0a050d;
    --panel: rgba(15, 7, 20, .92);
    --panel-strong: #100717;
    --panel-light: #1a0c24;
    --line: rgba(179, 86, 232, .24);
    --line-strong: rgba(202, 95, 255, .48);
    --cyan: #df99ff;
    --blue: #9333ea;
    --blue-bright: #ca64ff;
    --violet: #a855f7;
    --shadow: 0 1.5rem 5rem rgba(0, 0, 0, .45);
}

body {
    background: #030105;
    color: var(--ink);
}

body::before {
    background:
        radial-gradient(circle at 8% 12%, rgba(122, 28, 183, .18), transparent 28%),
        radial-gradient(circle at 92% 5%, rgba(178, 62, 242, .15), transparent 30%),
        linear-gradient(180deg, #09030d 0, #030105 26rem, #020103 100%);
}

.ambient-grid {
    opacity: .19;
    background-image:
        linear-gradient(rgba(193, 92, 244, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(193, 92, 244, .12) 1px, transparent 1px);
}

.ambient-glow-one {
    background: #8c27dd;
}

.ambient-glow-two {
    background: #c352ff;
}

a {
    color: #d486ff;
}

a:hover {
    color: #f0c8ff;
}

.site-header {
    background: rgba(3, 1, 5, .78);
}

.site-header.is-scrolled {
    background: rgba(3, 1, 5, .95);
}

.brand-logo {
    display: block;
    width: 13.75rem;
    height: 3.2rem;
    object-fit: contain;
    object-position: left center;
}

.brand-logo-footer {
    width: 15rem;
    height: 3.45rem;
}

.primary-nav > a:not(.button) {
    color: #b8acbe;
}

.primary-nav > a:not(.button):hover {
    color: #fff;
}

.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
    outline-color: rgba(207, 105, 255, .38);
}

.button-primary {
    background: linear-gradient(135deg, #7d25d0, #b84eff 58%, #dd8bff);
    color: #fff;
    box-shadow: 0 .8rem 2rem rgba(141, 43, 211, .28), inset 0 1px rgba(255, 255, 255, .3);
}

.button-primary:hover {
    background: linear-gradient(135deg, #9135e2, #c85fff 58%, #e6a6ff);
    color: #fff;
    box-shadow: 0 1rem 2.4rem rgba(169, 67, 234, .4), inset 0 1px rgba(255, 255, 255, .34);
}

.button-secondary {
    border-color: rgba(201, 91, 255, .48);
    background: rgba(87, 26, 126, .24);
    color: #f3dcff;
}

.button-secondary:hover {
    border-color: rgba(225, 148, 255, .72);
    background: rgba(113, 35, 157, .34);
    color: #fff;
}

.button-ghost {
    border-color: var(--line);
    background: rgba(255, 255, 255, .025);
    color: #c7bacd;
}

.button-ghost:hover {
    border-color: var(--line-strong);
    background: rgba(132, 47, 178, .1);
    color: #fff;
}

.hero {
    padding-top: 7rem;
}

.hero::after {
    border-color: rgba(186, 76, 237, .16);
    box-shadow:
        0 0 0 6rem rgba(123, 34, 172, .035),
        0 0 0 12rem rgba(123, 34, 172, .02);
}

.hero h1 span,
.section-heading h2 span,
.lifecycle-copy h2 span,
.compact-hero h1 span,
.auth-story h1 span,
.strengths-copy h2 span,
.pricing-callout h2 span {
    color: #d881ff;
    background: linear-gradient(135deg, #fff 0, #e6acff 38%, #b74dff 72%, #7b27d2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-lead {
    color: #b7abbc;
}

.hero-proof {
    color: #8e8194;
}

.hero-proof span::before {
    background: #c35cff;
    box-shadow: 0 0 .6rem rgba(195, 92, 255, .55);
}

.radar-shell {
    border-color: rgba(204, 98, 255, .32);
    background:
        linear-gradient(90deg, transparent calc(50% - .5px), rgba(207, 112, 255, .16) 50%, transparent calc(50% + .5px)),
        linear-gradient(transparent calc(50% - .5px), rgba(207, 112, 255, .16) 50%, transparent calc(50% + .5px)),
        radial-gradient(circle, rgba(87, 25, 122, .5), rgba(14, 5, 19, .76) 62%, rgba(4, 1, 6, .3));
    box-shadow: inset 0 0 5rem rgba(166, 50, 224, .17), 0 0 6rem rgba(123, 31, 174, .16);
}

.radar-ring {
    border-color: rgba(218, 128, 255, .2);
}

.radar-sweep {
    background: conic-gradient(from 180deg at 0 0, rgba(212, 101, 255, .42), transparent 34%);
}

.shield-node {
    width: 9.4rem;
    height: 9.4rem;
    border-color: rgba(220, 125, 255, .5);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(109, 30, 151, .76), rgba(13, 4, 18, .97) 72%);
    clip-path: none;
    filter: drop-shadow(0 0 2rem rgba(178, 62, 237, .38));
}

.hero-protect-mark {
    width: 7rem;
    height: 6.7rem;
    object-fit: contain;
}

.shield-node small {
    margin-top: -.2rem;
    color: #e7bfff;
}

.signal-node {
    border-color: rgba(205, 100, 255, .24);
    background: rgba(8, 3, 11, .86);
    color: #b8a8c1;
}

.signal-node i {
    background: #ce73ff;
    box-shadow: 0 0 .6rem #bd51ff;
}

.floating-card {
    border-color: rgba(210, 110, 255, .3);
    background: rgba(10, 4, 14, .92);
}

.floating-card small {
    color: #8f7e98;
}

.mini-icon {
    background: rgba(150, 47, 204, .18);
}

.mini-icon-pulse::before {
    border-color: #dc8fff;
    background: linear-gradient(135deg, transparent 42%, #dc8fff 43% 55%, transparent 56%);
}

.mini-icon-lock::before,
.mini-icon-lock::after {
    border-color: #d783ff;
}

.trust-strip {
    border-color: var(--line);
    background: rgba(14, 6, 19, .68);
}

.trust-strip p {
    color: #8d7c96;
}

.trust-strip span {
    color: #c1b3c7;
}

.section-capabilities {
    background: linear-gradient(180deg, rgba(24, 9, 33, .44), rgba(3, 1, 5, .2));
}

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

.capability-grid-commercial .capability-card {
    min-height: 23rem;
    padding: 1.7rem;
    background:
        radial-gradient(circle at 100% 0, rgba(150, 49, 208, .13), transparent 38%),
        linear-gradient(145deg, rgba(24, 10, 32, .96), rgba(9, 4, 12, .96));
}

.capability-grid-commercial .capability-card::after {
    border-color: rgba(187, 72, 239, .14);
    box-shadow: 0 0 0 2.5rem rgba(160, 51, 211, .025);
}

.capability-symbol {
    display: grid;
    width: 3.7rem;
    height: 3.7rem;
    margin-bottom: 2.8rem;
    place-items: center;
    border: 1px solid rgba(211, 110, 255, .38);
    border-radius: .9rem;
    background: linear-gradient(145deg, rgba(129, 35, 180, .3), rgba(49, 13, 69, .2));
    color: #e6a9ff;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .06em;
    box-shadow: inset 0 0 1.5rem rgba(190, 75, 242, .08);
}

.capability-card h3 {
    font-size: 1.38rem;
}

.capability-card p {
    color: #aa9daf;
}

.feature-list li {
    color: #c5b7cb;
}

.feature-list li::before {
    background: #c65fff;
    box-shadow: 0 0 .5rem rgba(198, 95, 255, .6);
}

.section-strengths {
    border-block: 1px solid var(--line);
    background:
        linear-gradient(90deg, transparent calc(50% - 1px), rgba(178, 69, 229, .09) 50%, transparent calc(50% + 1px)),
        rgba(9, 3, 12, .72);
}

.strengths-layout {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items: center;
    gap: 5rem;
}

.strengths-copy h2 {
    margin-bottom: 1.2rem;
    font-size: clamp(2.2rem, 4vw, 3.8rem);
    line-height: 1.04;
}

.strengths-copy > p {
    max-width: 520px;
    color: var(--muted);
}

.text-arrow {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin-top: 1rem;
    color: #dd94ff;
    font-weight: 800;
}

.strength-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.strength-grid article {
    min-height: 12.5rem;
    padding: 1.35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(23, 9, 31, .9), rgba(8, 3, 11, .92));
}

.strength-grid article > span {
    display: block;
    margin-bottom: 2rem;
    color: #8b6999;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: .7rem;
}

.strength-grid h3 {
    margin-bottom: .55rem;
    font-size: 1.1rem;
}

.strength-grid p {
    margin: 0;
    color: var(--muted);
    font-size: .83rem;
}

.section-platforms {
    border-color: var(--line);
    background: rgba(8, 3, 11, .66);
}

.platform-card {
    border-color: var(--line);
    background: rgba(19, 8, 26, .84);
}

.platform-mark {
    border-color: rgba(203, 91, 255, .38);
    background: rgba(255, 255, 255, .96);
    color: #dc91ff;
}

.platform-roadmap {
    color: #85768c;
}

.pricing-callout-section {
    padding-bottom: 2rem;
}

.pricing-callout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3rem;
    padding: 2.4rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 95% 10%, rgba(188, 71, 242, .2), transparent 35%),
        linear-gradient(130deg, rgba(26, 10, 35, .96), rgba(7, 3, 10, .98));
    box-shadow: var(--shadow);
}

.pricing-callout h2 {
    max-width: 700px;
    margin-bottom: .8rem;
    font-size: clamp(2rem, 4vw, 3.35rem);
    line-height: 1.06;
}

.pricing-callout p {
    max-width: 680px;
    margin-bottom: 0;
    color: var(--muted);
}

.section-faq {
    padding-bottom: 3rem;
}

.faq-layout {
    display: grid;
    grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
    align-items: start;
    gap: 5rem;
}

.faq-layout .section-heading {
    position: sticky;
    top: 8rem;
    margin: 0;
}

.faq-layout .section-heading h2 {
    font-size: clamp(2.1rem, 4vw, 3.5rem);
}

.faq-list {
    border-top: 1px solid var(--line);
}

.faq-list details {
    border-bottom: 1px solid var(--line);
}

.faq-list summary {
    position: relative;
    padding: 1.35rem 3rem 1.35rem 0;
    color: #f4edf7;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 780;
    list-style: none;
}

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

.faq-list summary::after {
    position: absolute;
    top: 1.18rem;
    right: .2rem;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: #d98aff;
    content: "+";
    font-size: 1.1rem;
    transition: transform .2s ease;
}

.faq-list details[open] summary::after {
    transform: rotate(45deg);
}

.faq-list details[open] summary {
    color: #df9cff;
}

.faq-list details p {
    max-width: 680px;
    padding: 0 3rem 1.4rem 0;
    margin: 0;
    color: var(--muted);
}

.cta-panel {
    border-color: rgba(205, 92, 255, .45);
    background:
        radial-gradient(circle at 90% 50%, rgba(139, 39, 190, .32), transparent 34%),
        linear-gradient(130deg, rgba(28, 10, 38, .96), rgba(7, 3, 10, .97));
}

.cta-panel::after {
    border-color: rgba(212, 105, 255, .26);
    box-shadow: 0 0 0 4rem rgba(184, 68, 235, .035), 0 0 0 8rem rgba(184, 68, 235, .02);
}

.cta-panel p {
    color: #b9acbf;
}

.cta-scanline {
    background: repeating-linear-gradient(to bottom, transparent 0 8px, rgba(210, 115, 255, .025) 9px);
}

.site-footer {
    background: rgba(3, 1, 5, .84);
}

.footer-links a {
    color: #9d8da5;
}

.footer-note {
    border-color: var(--line);
    color: #74677a;
}

/* Carry the brand palette through authentication, pricing and account areas. */
.auth-panel,
.builder-step,
.price-summary,
.custom-quote-panel,
.account-sidebar,
.panel,
.metric-card,
.license-card,
.server-card,
.setup-stage,
.integration-card,
.quote-card,
.admin-license-row {
    border-color: var(--line);
    background-color: rgba(15, 7, 20, .92);
}

.auth-panel {
    background:
        linear-gradient(160deg, rgba(26, 11, 35, .97), rgba(8, 3, 11, .98));
}

.builder-step-heading > span,
.trial-timeline > div > span {
    border-color: rgba(205, 93, 255, .34);
    background-color: rgba(128, 37, 176, .14);
    color: #df9dff;
}

.field input,
.field select,
.field textarea,
.choice-fieldset select {
    border-color: rgba(169, 81, 211, .28);
    background: rgba(7, 3, 10, .9);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.choice-fieldset select:focus {
    border-color: #ba53ef;
    box-shadow: 0 0 0 3px rgba(186, 83, 239, .12);
}

.price-anchor,
.price-summary {
    background-color: rgba(20, 8, 27, .94);
}

.bundle-option > span,
.term-option,
.radio-card,
.license-row,
.detail-grid > div,
.empty-inline {
    border-color: var(--line);
    background-color: rgba(8, 3, 11, .76);
}

.bundle-option input:checked + span,
.term-option:has(input:checked),
.radio-card:has(input:checked) {
    border-color: var(--blue-bright);
    background-color: rgba(129, 36, 178, .18);
}

.sidebar-nav a:hover,
.sidebar-nav a.is-active {
    background: rgba(147, 51, 234, .15);
    color: #f1e8f5;
}

.sidebar-nav a.is-active > span {
    color: #d786ff;
}

.price-anchor strong,
.summary-total strong {
    color: #d984ff;
}

progress::-webkit-progress-value {
    background: linear-gradient(90deg, #8125cf, #d275ff);
}

progress::-moz-progress-bar {
    background: linear-gradient(90deg, #8125cf, #d275ff);
}

@media (max-width: 1080px) {
    .capability-grid-commercial {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .strengths-layout,
    .faq-layout {
        gap: 3rem;
    }

    .pricing-callout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 920px) {
    .brand-logo {
        width: 12rem;
        height: 2.9rem;
    }

    .strengths-layout,
    .faq-layout {
        grid-template-columns: 1fr;
    }

    .faq-layout .section-heading {
        position: static;
    }
}

@media (max-width: 680px) {
    .brand-logo {
        width: 10.75rem;
        height: 2.6rem;
    }

    .hero {
        padding-top: 4rem;
    }

    .capability-grid-commercial,
    .strength-grid {
        grid-template-columns: 1fr;
    }

    .capability-grid-commercial .capability-card {
        min-height: 0;
    }

    .pricing-callout {
        padding: 1.5rem 1.2rem;
    }
}

/* Authenticated support tickets */
.ticket-ref {
    color: #d98cff;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: .7rem;
    font-weight: 800;
    white-space: nowrap;
}

.ticket-subject-link {
    display: inline-block;
    max-width: 28rem;
    overflow: hidden;
    color: #dce8ef;
    font-weight: 700;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.ticket-heading-status {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .6rem;
}

.ticket-priority {
    display: inline-flex;
    width: max-content;
    align-items: center;
    padding: .28rem .55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted-strong);
    font-size: .68rem;
    font-weight: 750;
    white-space: nowrap;
}

.ticket-priority-high {
    border-color: rgba(255, 202, 104, .3);
    color: var(--amber);
}

.ticket-priority-urgent {
    border-color: rgba(255, 113, 135, .35);
    background: rgba(255, 113, 135, .07);
    color: #ff9bad;
}

.ticket-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    align-items: start;
    gap: 1rem;
}

.ticket-thread {
    display: grid;
    gap: .8rem;
}

.ticket-message {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: rgba(7, 3, 10, .72);
}

.ticket-message-admin {
    border-color: rgba(205, 93, 255, .3);
    background: linear-gradient(145deg, rgba(74, 21, 99, .24), rgba(8, 3, 11, .82));
}

.ticket-message > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .8rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--line);
}

.ticket-message > header > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.ticket-message > header strong {
    overflow-wrap: anywhere;
    color: #edf6fb;
    font-size: .82rem;
}

.ticket-message > header span,
.ticket-message > header time {
    color: #75677d;
    font-size: .64rem;
}

.ticket-message > header time {
    flex: 0 0 auto;
}

.ticket-message-body {
    overflow-wrap: anywhere;
    color: #b8c8d2;
    font-size: .8rem;
    line-height: 1.72;
}

.ticket-meta {
    display: grid;
    margin: 0;
}

.ticket-meta > div {
    display: grid;
    gap: .15rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--line);
}

.ticket-meta > div:last-child {
    border-bottom: 0;
}

.ticket-meta dt {
    color: #75677d;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ticket-meta dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: #cbdbe4;
    font-size: .75rem;
}

.ticket-reply-panel {
    margin-top: .2rem;
}

.ticket-form-panel {
    max-width: 54rem;
}

.ticket-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: .7rem;
}

.ticket-filter-bar {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) 12rem 11rem auto;
    align-items: end;
    gap: .7rem;
}

.ticket-filter-actions {
    display: flex;
    gap: .45rem;
}

.ticket-closed-note {
    padding-block: 1.6rem;
}

.ticket-closed-note p {
    max-width: 50rem;
}

@media (max-width: 1080px) {
    .ticket-filter-bar {
        grid-template-columns: minmax(12rem, 1fr) 11rem 10rem;
    }

    .ticket-filter-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 920px) {
    .ticket-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .ticket-heading {
        display: grid;
    }

    .ticket-heading-status {
        justify-content: flex-start;
    }

    .ticket-filter-bar {
        grid-template-columns: 1fr;
    }

    .ticket-filter-actions {
        grid-column: auto;
    }

    .ticket-filter-actions .button,
    .ticket-form-actions .button {
        flex: 1;
    }

    .ticket-message > header {
        display: grid;
    }

    .ticket-form-actions {
        flex-direction: column-reverse;
    }
}

/* Keep the selected light palette authoritative after the corporate theme layer. */
:root[data-theme="day"] {
    --ink: #211426;
    --muted: #6e5f74;
    --muted-strong: #4e3c55;
    --bg: #f8f3fb;
    --bg-soft: #f1e8f5;
    --panel: rgba(255, 255, 255, .94);
    --panel-strong: #fff;
    --panel-light: #f4eaf8;
    --line: rgba(115, 37, 151, .18);
    --line-strong: rgba(132, 43, 173, .38);
    --cyan: #8d25bb;
    --blue: #7d23ae;
    --blue-bright: #9d32ca;
    --violet: #7f2db4;
    --shadow: 0 1.3rem 4rem rgba(65, 24, 80, .12);
}

.brand-logo.brand-logo-day {
    display: none;
}

:root[data-theme="day"] .brand-logo.brand-logo-night {
    display: none;
}

:root[data-theme="day"] .brand-logo.brand-logo-day {
    display: block;
}

.radar-shell .radar-sweep {
    background: conic-gradient(
        from 180deg at 0 0,
        rgba(238, 180, 255, .82) 0deg,
        rgba(204, 82, 255, .48) 28deg,
        transparent 58deg
    );
}

/* Landing feature language is visual, not numbered. */
.feature-icon {
    flex: 0 0 auto;
}

.feature-icon svg {
    width: 1.65rem;
    height: 1.65rem;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.capability-symbol.feature-icon {
    font-family: inherit;
    letter-spacing: 0;
}

.capability-grid-commercial .capability-card-kernel {
    grid-column: 1 / -1;
    min-height: 19rem;
    background:
        radial-gradient(circle at 88% 50%, rgba(191, 72, 241, .22), transparent 31%),
        linear-gradient(145deg, rgba(29, 11, 39, .98), rgba(9, 4, 12, .98));
}

.capability-card-kernel > p {
    max-width: 53rem;
}

.capability-card-kernel .feature-list {
    display: grid;
    max-width: 58rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem 1.4rem;
}

.strength-grid article > .strength-icon {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1.45rem;
    place-items: center;
    border: 1px solid rgba(211, 110, 255, .38);
    border-radius: .85rem;
    background: linear-gradient(145deg, rgba(129, 35, 180, .3), rgba(49, 13, 69, .2));
    color: #e6a9ff;
    box-shadow: inset 0 0 1.35rem rgba(190, 75, 242, .1), 0 0 1.2rem rgba(166, 55, 217, .1);
}

.strength-icon svg {
    width: 1.55rem;
    height: 1.55rem;
}

/* A dedicated orbit keeps the active scanner unmistakable around the protected core. */
.core-scanner {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 14rem;
    aspect-ratio: 1;
    border: 1px solid rgba(226, 150, 255, .42);
    border-radius: 50%;
    box-shadow:
        0 0 1.5rem rgba(197, 72, 248, .28),
        inset 0 0 1.5rem rgba(197, 72, 248, .16);
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: core-scanner-orbit 3.2s linear infinite;
    will-change: transform;
}

.core-scanner::before {
    position: absolute;
    inset: -.3rem;
    border-radius: inherit;
    background: conic-gradient(
        from 0deg,
        transparent 0 214deg,
        rgba(189, 66, 241, .08) 234deg,
        rgba(226, 139, 255, .75) 274deg,
        #fff 302deg,
        transparent 322deg
    );
    content: "";
    filter: drop-shadow(0 0 .55rem rgba(224, 133, 255, .9));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}

.core-scanner::after {
    position: absolute;
    top: 50%;
    right: -.34rem;
    width: .68rem;
    height: .68rem;
    border: 2px solid rgba(255, 255, 255, .82);
    border-radius: 50%;
    background: #d76fff;
    box-shadow:
        0 0 .55rem #fff,
        0 0 1.2rem #d25dff,
        0 0 2rem rgba(196, 61, 249, .72);
    content: "";
    transform: translateY(-50%);
}

.core-scanner > span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent 8%, rgba(218, 118, 255, .3) 48%, rgba(247, 215, 255, .96));
    box-shadow: 0 0 .55rem rgba(218, 118, 255, .72);
    transform: translateY(-50%);
    transform-origin: 0 50%;
}

@keyframes core-scanner-orbit {
    to {
        transform: translate(-50%, -50%) rotate(1turn);
    }
}

:root[data-theme="day"] .strength-grid article > .strength-icon {
    border-color: rgba(131, 37, 169, .3);
    background: linear-gradient(145deg, rgba(184, 91, 220, .14), rgba(255, 255, 255, .88));
    color: #6c1f8f;
    box-shadow: inset 0 0 1rem rgba(139, 42, 179, .08);
}

:root[data-theme="day"] .capability-grid-commercial .capability-card-kernel {
    background:
        radial-gradient(circle at 88% 50%, rgba(165, 66, 204, .13), transparent 31%),
        linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(247, 238, 250, .98));
}

:root[data-theme="day"] .core-scanner {
    border-color: rgba(119, 28, 158, .52);
    box-shadow:
        0 0 1.4rem rgba(122, 34, 158, .19),
        inset 0 0 1.3rem rgba(122, 34, 158, .12);
}

:root[data-theme="day"] .core-scanner::before {
    background: conic-gradient(
        from 0deg,
        transparent 0 214deg,
        rgba(111, 26, 146, .06) 234deg,
        rgba(127, 35, 166, .72) 274deg,
        #57116f 302deg,
        transparent 322deg
    );
    filter: drop-shadow(0 0 .45rem rgba(104, 22, 139, .5));
}

:root[data-theme="day"] .core-scanner::after {
    border-color: rgba(255, 255, 255, .92);
    background: #7f23a9;
    box-shadow:
        0 0 .45rem #fff,
        0 0 1rem rgba(116, 25, 153, .62);
}

:root[data-theme="day"] .core-scanner > span {
    background: linear-gradient(90deg, transparent 8%, rgba(121, 31, 158, .2) 48%, rgba(92, 18, 121, .88));
    box-shadow: 0 0 .45rem rgba(98, 20, 130, .38);
}

@media (max-width: 680px) {
    .core-scanner {
        width: 12rem;
    }

    .capability-grid-commercial .capability-card-kernel {
        min-height: 0;
    }

    .capability-card-kernel .feature-list {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .radar-shell .radar-sweep {
        animation: none !important;
        transform: rotate(32deg);
    }

    .core-scanner {
        animation: none !important;
        transform: translate(-50%, -50%) rotate(32deg);
    }
}

/* Shared public page rhythm: copy and actions must read as separate groups. */
.public-section-hero .shell > p {
    margin-top: 1.15rem;
    line-height: 1.8;
}

.public-section-hero .hero-actions {
    margin-top: 2.15rem;
}

.public-section-body {
    padding-top: 5rem;
}

.identity-confirmed-note {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .9rem 1rem;
    border: 1px solid rgba(190, 75, 242, .28);
    border-radius: .85rem;
    background: rgba(129, 35, 180, .12);
}

.identity-confirmed-note > span {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: #8f29bd;
    color: #fff;
    font-weight: 900;
}

.identity-confirmed-note div {
    display: grid;
    gap: .1rem;
}

.identity-confirmed-note strong {
    color: var(--ink);
}

.identity-confirmed-note small {
    color: var(--muted);
}

:root[data-theme="day"] .identity-confirmed-note {
    border-color: rgba(113, 28, 145, .2);
    background: linear-gradient(135deg, rgba(238, 219, 247, .82), rgba(255, 255, 255, .94));
}

/*
 * Use large monitors as working space. Text measures inside cards remain
 * constrained, while navigation, grids, pricing and account areas gain room.
 */
@media (min-width: 1536px) {
    :root {
        --shell: min(1540px, calc(100% - 4rem));
    }

    .public-detail-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .public-detail-grid .capability-card {
        min-height: 18rem;
    }
}

@media (max-width: 680px) {
    .public-section-hero .hero-actions {
        margin-top: 1.65rem;
    }

    .public-section-body {
        padding-top: 3rem;
    }
}