:root {
    --public-ink: #142631;
    --public-soft: #536c79;
    --public-cyan: #1dabc3;
    --public-violet: #7569d4;
}

body.public-page {
    min-width: 320px;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--public-ink);
    background:
        radial-gradient(circle at 80% 32%, rgba(54, 190, 214, .075), transparent 23%),
        radial-gradient(circle at 92% 78%, rgba(117, 105, 212, .055), transparent 23%),
        linear-gradient(135deg, #fbfcfd 0%, #f3f8fa 58%, #edf4f7 100%);
}

.public-grid {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .68;
    background-image:
        linear-gradient(rgba(72, 126, 146, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(72, 126, 146, .07) 1px, transparent 1px);
    background-size: 88px 88px;
    mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, .45) 70%, transparent);
}

.public-spectrum {
    position: fixed;
    z-index: 0;
    top: 132px;
    right: -230px;
    width: 660px;
    height: 660px;
    pointer-events: none;
    opacity: .46;
    border: 1px solid rgba(42, 165, 190, .09);
    border-radius: 50%;
}
.public-spectrum::before,
.public-spectrum::after { content: ""; position: absolute; border: 1px solid rgba(117, 105, 212, .075); border-radius: 50%; }
.public-spectrum::before { inset: 72px; }
.public-spectrum::after { inset: 158px; border-color: rgba(42, 165, 190, .08); }
.public-spectrum i { position: absolute; width: 5px; height: 5px; border: 1px solid rgba(27, 143, 166, .38); background: rgba(255,255,255,.84); transform: rotate(45deg); }
.public-spectrum i:nth-child(1) { top: 70px; left: 165px; }
.public-spectrum i:nth-child(2) { top: 285px; left: -3px; }
.public-spectrum i:nth-child(3) { left: 195px; bottom: 54px; }

.public-header,
.public-hero,
.public-trust,
.public-footer {
    position: relative;
    z-index: 1;
    width: min(calc(100% - 48px), 1200px);
    margin-inline: auto;
}

.public-header {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(70, 123, 143, .14);
}

.public-header::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 120px; height: 1px; background: linear-gradient(90deg, var(--public-cyan), transparent); }

.public-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.public-brand img { width: 42px; height: 42px; }
.public-brand span { display: flex; align-items: baseline; gap: 9px; }
.public-brand strong { font-size: 22px; letter-spacing: .01em; }
.public-brand small { color: #5d69ae; font-size: 13px; font-weight: 700; letter-spacing: .3em; }

.public-access {
    padding: 12px 17px;
    color: #166f82;
    font-size: 14px;
    font-weight: 720;
    text-decoration: none;
    border: 1px solid rgba(29, 171, 195, .25);
    border-radius: 11px;
    background: rgba(255, 255, 255, .58);
}

.public-access span { margin-left: 10px; }

.public-header-status { display: flex; align-items: center; gap: 11px; color: rgba(67, 102, 117, .58); font: 750 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; }
.public-header-status span { display: inline-flex; align-items: center; gap: 7px; }
.public-header-status i { width: 5px; height: 5px; border-radius: 50%; background: #29a989; box-shadow: 0 0 0 4px rgba(41,169,137,.08), 0 0 10px rgba(41,169,137,.22); }
.public-header-status b { width: 1px; height: 11px; background: rgba(76, 121, 139, .16); }

.public-hero {
    min-height: 620px;
    padding: 68px 0 64px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(440px, .92fr);
    align-items: center;
    gap: 62px;
}

.public-copy { max-width: 650px; }

.public-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 24px;
    color: #167f94;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
}

.public-kicker span { width: 36px; height: 1px; background: var(--public-cyan); }
.public-copy h1 { margin: 0; font-size: clamp(48px, 4.9vw, 68px); line-height: 1.08; letter-spacing: -.055em; }
.public-copy h1 em { color: #4e6875; font-style: normal; white-space: nowrap; }
.public-summary { max-width: 610px; margin: 26px 0 0; color: var(--public-soft); font-size: 15.5px; line-height: 1.86; }
.public-capabilities { max-width: 610px; margin-top: 25px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(70, 126, 147, .14); border-bottom: 1px solid rgba(70, 126, 147, .14); }
.public-capabilities > span { position: relative; min-width: 0; padding: 14px 13px 13px 0; display: grid; grid-template-columns: 25px 1fr; }
.public-capabilities > span + span { padding-left: 13px; border-left: 1px solid rgba(70, 126, 147, .12); }
.public-capabilities i { grid-row: 1 / 3; color: var(--public-cyan); font: normal 800 9px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.public-capabilities b { overflow: hidden; color: #405f6c; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.public-capabilities small { margin-top: 3px; color: #8799a2; font-size: 7px; font-weight: 800; letter-spacing: .14em; }
.public-actions { margin-top: 30px; display: flex; align-items: center; gap: 18px; }
.public-primary { display: inline-flex; align-items: center; gap: 26px; padding: 17px 22px; color: white; font-size: 14px; font-weight: 800; text-decoration: none; border-radius: 12px; background: linear-gradient(105deg, #188da5, #24b5cc 58%, #6874d7 130%); box-shadow: 0 17px 40px rgba(34, 153, 179, .2); }
.public-note { color: #728995; font-size: 12px; }

.public-system {
    position: relative;
    width: min(100%, 500px);
    min-height: 500px;
    justify-self: end;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(63, 122, 143, .17);
    border-radius: 24px;
    background:
        linear-gradient(rgba(75,132,152,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(75,132,152,.045) 1px, transparent 1px),
        linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(239, 248, 250, .58));
    background-size: 30px 30px, 30px 30px, auto;
    box-shadow: inset 0 1px 0 white, 0 34px 82px rgba(72, 110, 126, .12);
    backdrop-filter: blur(14px) saturate(122%);
}

.public-system::before { content: ""; position: absolute; z-index: 4; top: 0; left: 14%; width: 42%; height: 1px; background: linear-gradient(90deg, transparent, #fff, rgba(32, 175, 202, .64), transparent); }
.system-meta { position: absolute; z-index: 4; top: 19px; left: 21px; right: 21px; display: flex; justify-content: space-between; color: rgba(37, 113, 136, .58); font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .15em; }
.system-meta b { color: rgba(106, 92, 186, .55); font-weight: 800; }
.system-corners { position: absolute; z-index: 3; inset: 11px; pointer-events: none; }
.system-corners i { position: absolute; width: 15px; height: 15px; opacity: .52; }
.system-corners i:nth-child(1) { top: 0; left: 0; border-top: 1px solid var(--public-cyan); border-left: 1px solid var(--public-cyan); }
.system-corners i:nth-child(2) { top: 0; right: 0; border-top: 1px solid var(--public-violet); border-right: 1px solid var(--public-violet); }
.system-corners i:nth-child(3) { bottom: 0; left: 0; border-bottom: 1px solid var(--public-violet); border-left: 1px solid var(--public-violet); }
.system-corners i:nth-child(4) { right: 0; bottom: 0; border-right: 1px solid var(--public-cyan); border-bottom: 1px solid var(--public-cyan); }
.system-axis { position: absolute; z-index: 0; opacity: .28; background: linear-gradient(90deg, transparent, rgba(31, 159, 184, .38), transparent); }
.system-axis-x { left: 24px; right: 24px; top: 50%; height: 1px; }
.system-axis-y { top: 48px; bottom: 48px; left: 50%; width: 1px; background: linear-gradient(transparent, rgba(31,159,184,.32), transparent); }
.system-scan { position: absolute; z-index: 0; left: 16%; right: 16%; top: 22%; height: 1px; opacity: .36; background: linear-gradient(90deg, transparent, rgba(34,181,207,.7), transparent); animation: public-scan 7s ease-in-out infinite; }
@keyframes public-scan { 0%, 100% { transform: translateY(0); opacity: .12; } 50% { transform: translateY(255px); opacity: .42; } }

.system-orbit { position: absolute; width: 282px; height: 282px; border: 1px solid rgba(29, 171, 195, .18); border-radius: 50%; animation: public-orbit 34s linear infinite; }
.system-orbit::before, .system-orbit::after { content: ""; position: absolute; border-radius: 50%; border: 1px dashed rgba(117, 105, 212, .14); }
.system-orbit::before { inset: 31px; }
.system-orbit::after { inset: 68px; border-style: solid; }
.system-orbit i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #21afc7; box-shadow: 0 0 14px rgba(33, 175, 199, .32); }
.system-orbit i:nth-child(1) { top: 22px; left: 68px; }
.system-orbit i:nth-child(2) { right: 17px; bottom: 75px; background: #7a6ed7; }
.system-orbit i:nth-child(3) { left: 39px; bottom: 38px; width: 4px; height: 4px; }
.system-core { position: relative; z-index: 2; width: 108px; height: 108px; }
.system-core img { width: 100%; height: 100%; filter: drop-shadow(0 18px 24px rgba(47, 127, 148, .15)); }
.system-core span { position: absolute; left: 50%; bottom: -21px; color: rgba(39, 119, 141, .54); font: 800 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .22em; transform: translateX(-50%); }
@keyframes public-orbit { to { transform: rotate(360deg); } }

.system-flow { position: absolute; z-index: 2; inset: 56px 22px 60px; margin: 0; padding: 0; list-style: none; }
.system-flow li { position: absolute; min-width: 134px; padding: 11px 12px; display: grid; grid-template-columns: 30px 1fr; border: 1px solid rgba(66, 125, 146, .16); border-radius: 10px; background: rgba(255, 255, 255, .78); box-shadow: 0 8px 22px rgba(69, 109, 125, .07); }
.system-flow li:nth-child(1) { top: 0; left: 0; }
.system-flow li:nth-child(2) { top: 0; right: 0; }
.system-flow li:nth-child(3) { bottom: 0; right: 0; }
.system-flow li:nth-child(4) { bottom: 0; left: 0; }
.system-flow span { grid-row: 1 / 3; color: var(--public-cyan); font: 800 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.system-flow strong { font-size: 14px; }
.system-flow small { margin-top: 3px; color: #81939d; font-size: 8px; font-weight: 800; letter-spacing: .15em; }
.system-readout { position: absolute; z-index: 4; left: 21px; right: 21px; bottom: 20px; display: flex; align-items: center; gap: 8px; color: rgba(51, 105, 122, .59); font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; }
.system-readout i { width: 5px; height: 5px; border-radius: 50%; background: #2ca789; box-shadow: 0 0 9px rgba(44,167,137,.25); }
.system-readout b { margin-left: auto; color: rgba(106,92,186,.62); }

.public-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(67, 122, 143, .15);
    border-bottom: 1px solid rgba(67, 122, 143, .15);
}

.public-trust article { padding: 31px 34px 35px; }
.public-trust article + article { border-left: 1px solid rgba(67, 122, 143, .15); }
.public-trust article > span { color: var(--public-cyan); font: 800 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.public-trust h2 { margin: 13px 0 9px; font-size: 17px; }
.public-trust p { margin: 0; color: var(--public-soft); font-size: 13px; line-height: 1.75; }
.public-footer { padding: 25px 0 32px; display: flex; justify-content: space-between; color: #718791; font-size: 9px; font-weight: 720; letter-spacing: .13em; }

@media (max-width: 1000px) {
    .public-hero { grid-template-columns: 1fr; gap: 48px; padding-top: 64px; }
    .public-copy { max-width: 760px; }
    .public-system { width: min(100%, 520px); min-height: 470px; justify-self: start; }
    .public-header-status { display: none; }
}

@media (max-width: 650px) {
    .public-header, .public-hero, .public-trust, .public-footer { width: min(calc(100% - 28px), 1200px); }
    .public-header { min-height: 74px; }
    .public-brand strong { font-size: 19px; }
    .public-brand img { width: 36px; height: 36px; }
    .public-access { padding: 10px 12px; font-size: 12px; }
    .public-hero { min-height: auto; padding: 58px 0 52px; }
    .public-copy h1 { font-size: clamp(43px, 13vw, 60px); }
    .public-copy h1 em { white-space: normal; }
    .public-summary { font-size: 15px; }
    .public-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .public-capabilities > span:nth-child(3) { border-left: 0; }
    .public-capabilities > span:nth-child(n+3) { border-top: 1px solid rgba(70,126,147,.12); }
    .public-actions { align-items: flex-start; flex-direction: column; }
    .public-system { min-height: 410px; }
    .system-orbit { width: 220px; height: 220px; }
    .system-flow { inset: 16px; }
    .system-flow li { min-width: 108px; padding: 9px; grid-template-columns: 26px 1fr; }
    .system-flow strong { font-size: 12px; }
    .public-trust { grid-template-columns: 1fr; }
    .public-trust article + article { border-left: 0; border-top: 1px solid rgba(67, 122, 143, .15); }
    .public-footer { gap: 12px; flex-direction: column; }
}

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