/* SeaDirect Protect: the moving pictures.

   Two things live here, both decorative and both hidden from assistive
   technology: the client-workspace replica in the home hero, and the small
   animated pieces that fill the empty space beside every page heading.

   Rules they all follow:
   - Sized in container units (`cqw`) of their own box, so a piece is the same
     picture at every width and never reflows while it moves.
   - Animate transform and opacity only (a few SVG strokes aside), so the work
     stays on the compositor.
   - Hidden states are gated behind `html.js-showcase`, which showcase.js adds:
     without the script nothing is ever left invisible.
   - `prefers-reduced-motion` stops every one of them. That block is at the end
     and it is not optional. */

/* ======================================================================
   Home hero: copy on the left, the workspace on the right
   ====================================================================== */

.hero-visual { position: relative; margin: 2.5rem 0 0; min-width: 0; }
.hero-visual-cap {
    display: flex; align-items: center; gap: .45rem;
    margin-top: .4rem; color: var(--ink-faint); font-size: .84rem;
}
.hero-visual-cap i { color: var(--primary-2); }

@media (min-width: 1200px) {
    .hero-split {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
        column-gap: 1rem;
        align-items: center;
    }
    .hero-split > .hero-inner { grid-column: 1; grid-row: 1; }
    .hero-split > .hero-visual { grid-column: 2; grid-row: 1; margin: 0; }
    .hero-split > .hero-trust { grid-column: 1 / -1; }
    .hero-split .hero-title { font-size: clamp(2.6rem, 4.5vw, 4.05rem); }
    .hero-visual-cap { padding-left: 8%; }
}
@media (max-width: 767px) {
    .hero-visual { display: none; }
}

/* ======================================================================
   The workspace replica
   ====================================================================== */

/* The box it lives in. Wider than its grid column on a desktop, so the screen
   is big enough to read and runs off the right edge the way a product shot
   does; `body` already clips horizontal overflow. Everything inside is sized in
   `cqw` of this box. */
.pr {
    --fx: #3d9dff;
    --fx-hi: #7cbcff;
    --ink: #e9eef8;
    --ink-dim: #a7b4ca;
    --ink-faint: #6f7d96;
    --good: #2ecf9a;
    --bad: #ff6478;
    position: relative;
    width: 100%;
    aspect-ratio: 100 / 46;
    container-type: inline-size;
    perspective: 150cqw;
    perspective-origin: 38% 42%;
    pointer-events: none;
}
@media (min-width: 1200px) {
    .pr { width: 146%; margin-left: -2%; }
}

.pr-tilt {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 84cqw;
    height: 35cqw;
    margin: -17.5cqw 0 0 -42cqw;
    transform: translate3d(-9cqw, -1cqw, 0) rotateX(9deg) rotateY(-19deg) rotateZ(.8deg);
    transform-style: preserve-3d;
}
/* Two layers between the pose and the screen, each with one job: a slow
   float that never stops, and the pointer's parallax. Kept apart because one
   element can only run one transform at a time. */
.pr-drift, .pr-pointer {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}
.pr-drift { animation: pr-float 10s ease-in-out infinite alternate; }
.pr-pointer {
    transform: rotateX(calc(var(--py, 0) * -4deg)) rotateY(calc(var(--px, 0) * 6deg));
    transition: transform .7s cubic-bezier(.22, .68, .3, 1);
}
@keyframes pr-float {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, -1.2cqw, 3cqw) rotateY(-1.5deg); }
}

.pr-floor {
    position: absolute;
    left: 50%;
    top: 74%;
    width: 64cqw;
    height: 10cqw;
    margin-left: -34cqw;
    border-radius: 50%;
    filter: blur(3.4cqw);
    background: radial-gradient(ellipse at center, rgba(61, 157, 255, .34), transparent 68%);
    opacity: .7;
}

.pt-shell {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 13.4cqw 1fr;
    grid-template-rows: 3.1cqw 1fr;
    overflow: hidden;
    border-radius: 1.1cqw;
    border: 1px solid rgba(150, 190, 245, .26);
    background: #0b111c;
    box-shadow:
        0 3cqw 7cqw rgba(0, 0, 0, .75),
        0 0 0 1px rgba(0, 0, 0, .6),
        0 0 14cqw rgba(61, 157, 255, .22);
    font-family: var(--f-text);
    font-size: .78cqw;
    line-height: 1.35;
    color: var(--ink);
    text-align: left;
    transition: transform 1.6s cubic-bezier(.16, 1, .3, 1), opacity 1s ease;
}
/* The entrance: the screen swings in from further round and below. Only with
   the script present, which is what takes it back out of this state. */
html.js-showcase .pr:not(.is-live) .pt-shell {
    opacity: 0;
    transform: rotateY(16deg) rotateX(-4deg) translate3d(0, 5cqw, 0) scale(.9);
}
.pt-shell.is-nudge { transform: rotateY(-3deg); transition: transform .45s cubic-bezier(.22, .68, .3, 1); }

.pt-glass {
    position: absolute;
    inset: 0;
    z-index: 9;
    pointer-events: none;
    background: linear-gradient(104deg, transparent 30%, rgba(255, 255, 255, .06) 44%, rgba(255, 255, 255, .012) 52%, transparent 66%);
    background-size: 250% 100%;
    animation: pr-glass 9s ease-in-out infinite;
}
@keyframes pr-glass {
    0%, 55% { background-position: 120% 0; }
    85%, 100% { background-position: -40% 0; }
}

/* ---- sidebar ---- */
.pt-side {
    grid-row: 1 / span 2;
    padding: .9cqw .8cqw;
    border-right: 1px solid rgba(150, 190, 245, .14);
    background: #080d17;
    overflow: hidden;
}
.pt-brand { display: flex; align-items: center; gap: .55cqw; margin-bottom: 1.1cqw; }
.pt-brand .sd-logo { height: 2.4cqw; width: auto; }
.pt-nav { display: flex; flex-direction: column; gap: .12cqw; }
.pt-nav-group { margin: .7cqw 0 .2cqw .5cqw; font-size: .6cqw; letter-spacing: .1em; color: var(--ink-faint); }
.pt-nav-item {
    display: flex; align-items: center; gap: .5cqw;
    padding: .32cqw .5cqw; border-radius: .34cqw;
    color: var(--ink-dim); font-size: .74cqw; white-space: nowrap;
}
.pt-nav-item i.ti { font-size: .92cqw; color: var(--ink-faint); }
.pt-nav-item.is-on { background: rgba(61, 157, 255, .2); color: var(--ink); }
.pt-nav-item.is-on i.ti { color: var(--fx-hi); }

/* ---- top bar ---- */
.pt-top {
    display: flex; align-items: center; gap: .6cqw;
    padding: 0 .9cqw;
    border-bottom: 1px solid rgba(150, 190, 245, .14);
    background: #080d17;
    white-space: nowrap;
}
.pt-org { display: flex; flex-direction: column; line-height: 1.1; margin-right: .4cqw; }
.pt-org i { font-style: normal; font-size: .56cqw; letter-spacing: .12em; color: var(--ink-faint); }
.pt-org b { font-size: .8cqw; }
.pt-search {
    flex: 1; display: flex; align-items: center; gap: .45cqw; max-width: 22cqw;
    padding: .34cqw .6cqw; border: 1px solid rgba(150, 190, 245, .16); border-radius: .4cqw;
    color: var(--ink-faint); font-size: .72cqw;
}
.pt-search em {
    margin-left: auto; font-style: normal; font-family: var(--f-data); font-size: .58cqw;
    padding: .1cqw .3cqw; border: 1px solid rgba(150, 190, 245, .2); border-radius: .22cqw;
}
.pt-live { display: inline-flex; align-items: center; gap: .35cqw; font-size: .7cqw; color: var(--good); }
.pt-live i { width: .5cqw; height: .5cqw; border-radius: 50%; background: var(--good); animation: pr-pulse 1.8s ease-in-out infinite; }
@keyframes pr-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.pt-pill { display: inline-flex; align-items: center; gap: .3cqw; padding: .3cqw .62cqw; border-radius: 999px; font-size: .7cqw; font-weight: 500; }
.pt-pill.is-cta { background: var(--fx); color: #06101f; font-weight: 600; }
.pt-pill.is-plan { background: rgba(237, 179, 57, .16); color: #f0c46b; }
.pt-user { font-size: .76cqw; color: var(--ink-dim); }

/* ---- body ---- */
.pt-main { padding: 1.1cqw 1.3cqw; overflow: hidden; }
.pt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1cqw; }
.pt-h1 { margin: 0; font-family: var(--f-display); font-size: 1.85cqw; font-weight: 700; letter-spacing: -.02em; transition: opacity .3s; }
.pt-lede { margin: .18cqw 0 0; font-size: .8cqw; color: var(--ink-dim); transition: opacity .3s; }
.pt-head.is-changing .pt-h1, .pt-head.is-changing .pt-lede { opacity: 0; }

.pt-switch { position: relative; flex: 0 0 auto; }
.pt-switch-btn {
    display: inline-flex; align-items: center; gap: .42cqw;
    padding: .44cqw .74cqw; border: 1px solid rgba(61, 157, 255, .55); border-radius: .42cqw;
    font-size: .84cqw; color: var(--ink);
}
.pt-switch-btn i.ti { color: var(--fx-hi); font-size: .95cqw; }
.pt-menu {
    position: absolute; right: 0; top: 2.4cqw; z-index: 8; width: 17.5cqw;
    padding: .45cqw; border: 1px solid rgba(150, 190, 245, .2); border-radius: .62cqw;
    background: rgba(9, 14, 24, .97); box-shadow: 0 1.2cqw 3cqw rgba(0, 0, 0, .7);
    opacity: 0; transform: translate3d(0, -.8cqw, 0) scale(.96); transform-origin: 90% 0;
    transition: opacity .3s ease, transform .35s cubic-bezier(.22, .68, .3, 1);
}
.pt-menu.is-open { opacity: 1; transform: none; }
.pt-menu-item {
    display: flex; align-items: center; gap: .5cqw; padding: .42cqw .5cqw; border-radius: .4cqw; color: var(--ink-dim);
    opacity: 0; transform: translate3d(1cqw, 0, 0); transition: opacity .25s, transform .3s;
}
.pt-menu.is-open .pt-menu-item { opacity: 1; transform: none; }
.pt-menu.is-open .pt-menu-item:nth-child(2) { transition-delay: .05s; }
.pt-menu.is-open .pt-menu-item:nth-child(3) { transition-delay: .1s; }
.pt-menu.is-open .pt-menu-item:nth-child(4) { transition-delay: .15s; }
.pt-menu.is-open .pt-menu-item:nth-child(5) { transition-delay: .2s; }
.pt-menu.is-open .pt-menu-item:nth-child(6) { transition-delay: .25s; }
.pt-menu-item > i.ti { color: var(--vc); font-size: 1.05cqw; }
.pt-menu-item span { display: flex; flex-direction: column; line-height: 1.2; }
.pt-menu-item b { font-size: .84cqw; color: var(--ink); font-weight: 600; }
.pt-menu-item em { font-style: normal; font-size: .66cqw; color: var(--ink-faint); }
.pt-menu-tick { margin-left: auto; opacity: 0; color: var(--fx-hi); font-size: .9cqw; }
.pt-menu-item.is-on { background: rgba(150, 190, 245, .09); }
.pt-menu-item.is-on .pt-menu-tick { opacity: 1; }

.pt-chips { display: flex; gap: .5cqw; margin: .8cqw 0; }
.pt-chips span {
    display: inline-flex; align-items: center; gap: .32cqw; padding: .3cqw .62cqw;
    border: 1px solid rgba(150, 190, 245, .16); border-radius: .4cqw; font-size: .7cqw; color: var(--ink-dim);
}

/* The views are stacked in one box and cross over: the outgoing lifts away,
   the incoming rises into place a beat later. */
.pt-views { position: relative; height: 20cqw; }
.pt-view {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden; transform: translate3d(0, 1.6cqw, 0);
    transition: opacity .4s ease, transform .45s ease, visibility 0s linear .45s;
}
.pt-view.is-on {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .5s ease .28s, transform .65s cubic-bezier(.22, .68, .3, 1) .28s, visibility 0s;
}
.pt-view.is-out { transform: translate3d(0, -1.4cqw, 0); }

.pt-banner {
    display: flex; align-items: center; gap: .5cqw; padding: .7cqw .9cqw; margin-bottom: .8cqw;
    border: 1px solid rgba(61, 157, 255, .3); border-radius: .55cqw; background: rgba(61, 157, 255, .08);
    font-size: .76cqw; color: var(--ink-dim);
}
.pt-banner b { color: var(--ink); }
.pt-btn { margin-left: auto; flex: 0 0 auto; padding: .35cqw .7cqw; border-radius: .38cqw; background: var(--fx); color: #06101f; font-weight: 600; font-size: .72cqw; }

.pt-row { display: flex; gap: .8cqw; margin-bottom: .8cqw; }
.pt-grow { flex: 1 1 auto; min-width: 0; }
.pt-narrow { flex: 0 0 13.5cqw; }
.pt-card { padding: .85cqw; border: 1px solid rgba(150, 190, 245, .15); border-radius: .6cqw; background: rgba(16, 24, 38, .8); }
.pt-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.pt-cap { display: block; font-family: var(--f-data); font-size: .6cqw; letter-spacing: .14em; color: var(--ink-faint); margin-bottom: .5cqw; }
.pt-big { font-family: var(--f-display); font-size: 2.5cqw; font-weight: 700; line-height: 1; }
.pt-big i { font-style: normal; font-size: 1.1cqw; color: var(--ink-dim); }
.pt-note { margin: .5cqw 0 .8cqw; font-size: .7cqw; color: var(--ink-faint); }

.pt-bar { height: .34cqw; border-radius: 999px; background: rgba(150, 185, 235, .16); overflow: hidden; }
.pt-bar i { display: block; height: 100%; width: var(--w); background: var(--fx); transform-origin: left center; }
.pt-bar.sm { height: .26cqw; }
.pt-bar.sm i { background: #edb339; }
.pt-regs { display: grid; grid-template-columns: 7.4cqw 1fr 2cqw; align-items: center; gap: .42cqw .6cqw; font-size: .72cqw; color: var(--ink-dim); }
.pt-regs em { font-style: normal; font-size: .68cqw; color: var(--ink-faint); text-align: right; }

.pt-spark { height: 4.6cqw; }
.pt-spark svg { width: 100%; height: 100%; }
.pt-spark-line { fill: none; stroke: var(--fx); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pt-spark-fill { fill: rgba(61, 157, 255, .12); }

.pt-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8cqw; margin-bottom: .8cqw; }
.pt-tile { padding: .7cqw .8cqw; border: 1px solid rgba(150, 190, 245, .15); border-radius: .55cqw; background: rgba(16, 24, 38, .8); display: flex; flex-direction: column; }
.pt-tile b { font-family: var(--f-display); font-size: 1.7cqw; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pt-tile em { font-style: normal; font-size: .68cqw; color: var(--ink-faint); }
.pt-tile.is-good b { color: var(--good); }
.pt-tile.is-warn b { color: #edb339; }

.pt-list { display: flex; flex-direction: column; }
.pt-li { display: flex; align-items: center; gap: .5cqw; padding: .42cqw 0; border-bottom: 1px solid rgba(150, 190, 245, .08); font-size: .74cqw; }
.pt-li em { font-style: normal; color: var(--ink-faint); font-size: .68cqw; }
.pt-li b { margin-left: auto; font-weight: 500; color: var(--ink-dim); font-size: .7cqw; }
.pt-dot { width: .44cqw; height: .44cqw; border-radius: 50%; background: var(--ink-faint); flex: 0 0 auto; }
.pt-dot.is-bad { background: var(--bad); }
.pt-dot.is-warn { background: #edb339; }
.pt-dot.is-ok { background: var(--good); }

.pt-bars { display: flex; align-items: flex-end; gap: .28cqw; height: 4.4cqw; }
.pt-bars i { flex: 1; height: var(--h); background: rgba(61, 157, 255, .6); border-radius: .12cqw .12cqw 0 0; transform-origin: bottom center; }
.pt-bars.is-steady i { background: rgba(46, 207, 154, .55); }

.pt-ring { position: relative; display: grid; place-items: center; height: 6.4cqw; }
.pt-ring svg { height: 100%; }
.pt-ring-arc { stroke: var(--fx); stroke-dasharray: var(--p) 100; }
.pt-ring b { position: absolute; font-family: var(--f-display); font-size: 1.5cqw; font-weight: 700; }
.pt-ring b i { font-style: normal; font-size: .8cqw; color: var(--ink-dim); }

.pt-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45cqw; }
.pt-cell { display: flex; flex-direction: column; gap: .12cqw; padding: .42cqw .5cqw; border-radius: .38cqw; border: 1px solid rgba(150, 190, 245, .14); font-size: .62cqw; color: var(--ink-faint); }
.pt-cell b { font-size: .8cqw; color: var(--ink); }
.pt-cell.is-ok { border-color: rgba(46, 207, 154, .38); background: rgba(46, 207, 154, .08); }
.pt-cell.is-warn { border-color: rgba(237, 179, 57, .38); background: rgba(237, 179, 57, .08); }

.pt-table { display: flex; flex-direction: column; }
.pt-tr { display: grid; grid-template-columns: 1.4fr 1.2fr .7fr .7fr .9fr; gap: .5cqw; padding: .45cqw 0; border-bottom: 1px solid rgba(150, 190, 245, .08); font-size: .74cqw; align-items: center; }
.pt-tr em { font-style: normal; color: var(--ink-faint); font-size: .7cqw; }
.pt-tr.is-head b { font-size: .62cqw; letter-spacing: .1em; color: var(--ink-faint); font-weight: 500; text-transform: uppercase; }
.pt-tag { font-style: normal; font-size: .64cqw; padding: .16cqw .45cqw; border-radius: 999px; justify-self: start; }
.pt-tag.is-ok { background: rgba(46, 207, 154, .16); color: var(--good); }
.pt-tag.is-warn { background: rgba(237, 179, 57, .16); color: #f0c46b; }

/* What a view does as it arrives: its bars grow, its line draws, its ring
   fills and its rows deal in. Only on a live replica, so the resting overview
   is complete without the script. */
.pr.is-live .pt-view.is-on .pt-bar i { animation: pr-grow-x .9s cubic-bezier(.22, .68, .3, 1) .35s both; }
.pr.is-live .pt-view.is-on .pt-bars i { animation: pr-grow-y .8s cubic-bezier(.22, .68, .3, 1) both; }
.pr.is-live .pt-view.is-on .pt-bars i:nth-child(2n) { animation-delay: .42s; }
.pr.is-live .pt-view.is-on .pt-bars i:nth-child(2n+1) { animation-delay: .5s; }
.pr.is-live .pt-view.is-on .pt-spark-line { animation: pr-draw 1.4s ease-out .4s both; }
.pr.is-live .pt-view.is-on .pt-ring-arc { animation: pr-ring 1.2s cubic-bezier(.22, .68, .3, 1) .4s both; }
.pr.is-live .pt-view.is-on .pt-li,
.pr.is-live .pt-view.is-on .pt-tr:not(.is-head),
.pr.is-live .pt-view.is-on .pt-cell { animation: pr-deal .5s cubic-bezier(.22, .68, .3, 1) both; }
.pr.is-live .pt-view.is-on .pt-li:nth-child(1), .pr.is-live .pt-view.is-on .pt-tr:nth-child(2), .pr.is-live .pt-view.is-on .pt-cell:nth-child(-n+3) { animation-delay: .45s; }
.pr.is-live .pt-view.is-on .pt-li:nth-child(2), .pr.is-live .pt-view.is-on .pt-tr:nth-child(3), .pr.is-live .pt-view.is-on .pt-cell:nth-child(n+4):nth-child(-n+6) { animation-delay: .55s; }
.pr.is-live .pt-view.is-on .pt-li:nth-child(3), .pr.is-live .pt-view.is-on .pt-tr:nth-child(4), .pr.is-live .pt-view.is-on .pt-cell:nth-child(n+7) { animation-delay: .65s; }
.pr.is-live .pt-view.is-on .pt-li:nth-child(4), .pr.is-live .pt-view.is-on .pt-tr:nth-child(5) { animation-delay: .75s; }
@keyframes pr-grow-x { from { transform: scaleX(0); } }
@keyframes pr-grow-y { from { transform: scaleY(.05); } }
@keyframes pr-draw { from { stroke-dashoffset: 1; } }
@keyframes pr-ring { from { stroke-dasharray: 0 100; } }
@keyframes pr-deal { from { opacity: 0; transform: translate3d(1.2cqw, 0, 0); } }

/* ======================================================================
   The pieces beside page headings
   ====================================================================== */

/* The heading column keeps its reading width; on a desktop the head itself
   spans the container so the piece has somewhere to stand. */
.page-head { position: relative; }
.page-art { display: none; }
@media (min-width: 1200px) {
    /* Tall enough for the piece to stand beside the heading without running
       up under the header or down into the first section. */
    .container.page-head:has(> .page-art) { max-width: 1140px; min-height: 400px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
    .page-head:has(> .page-art) > :not(.page-art) { max-width: 700px; }
    .page-art {
        display: block;
        position: absolute;
        right: calc(var(--bs-gutter-x, 1.5rem) * .5);
        top: 50%;
        width: clamp(260px, calc(100% - 760px), 380px);
        aspect-ratio: 1;
        transform: translateY(-50%);
        container-type: inline-size;
        pointer-events: none;
        z-index: 0;
    }
}
@media (min-width: 1400px) {
    .container.page-head:has(> .page-art) { max-width: 1320px; }
    .page-head:has(> .page-art) > :not(.page-art) { max-width: 780px; }
}

/* A label floating beside a piece: what the piece is showing, in words. */
.art-tag {
    position: absolute;
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .32rem .55rem;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(11, 16, 24, .92);
    box-shadow: 0 14px 30px -18px #000;
    font-size: .74rem; white-space: nowrap; color: var(--ink);
    animation: art-tag 7s ease-in-out infinite alternate;
}
.art-tag b { font-weight: 500; }
.art-tag em, .dv-card em {
    font-style: normal; font-size: .64rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    padding: .06rem .4rem; border-radius: 6px;
    color: var(--primary-2); background: rgba(61, 157, 255, .14);
}
.art-tag .is-bad, .dv-card .is-bad { color: #ff8b9c; background: rgba(255, 100, 120, .14); }
.art-tag .is-warn, .dv-card .is-warn { color: #f0c46b; background: rgba(237, 179, 57, .14); }
.art-tag .is-ok { color: #5fe0b3; background: rgba(46, 207, 154, .14); }
@keyframes art-tag { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -8px, 0); } }
@keyframes art-bob { from { transform: var(--bob-from); } to { transform: var(--bob-to); } }

/* ---- radar: the IP scan, threat intelligence ---- */
.art-radar { perspective: 160cqw; }
.rd-stage { position: absolute; inset: 9%; transform: rotateX(56deg) rotateZ(-16deg); transform-style: preserve-3d; }
.rd-disc {
    position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
    background: radial-gradient(circle, rgba(61, 157, 255, .2), rgba(61, 157, 255, .04) 60%, rgba(61, 157, 255, 0) 71%);
    border: 1px solid rgba(124, 188, 255, .4);
    box-shadow: 0 0 60px rgba(61, 157, 255, .2) inset, 0 0 80px rgba(61, 157, 255, .15);
}
.rd-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(124, 188, 255, .22); }
.rd-r1 { inset: 16%; } .rd-r2 { inset: 32%; } .rd-r3 { inset: 45%; }
.rd-axis { position: absolute; background: rgba(124, 188, 255, .18); }
.rd-ax { left: 0; right: 0; top: 50%; height: 1px; }
.rd-ay { top: 0; bottom: 0; left: 50%; width: 1px; }
.rd-sweep {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(124, 188, 255, 0) 0deg, rgba(124, 188, 255, 0) 280deg, rgba(124, 188, 255, .55) 360deg);
    animation: art-spin 4s linear infinite;
}
@keyframes art-spin { to { transform: rotate(360deg); } }
.rd-blip {
    position: absolute; width: 2.6cqw; height: 2.6cqw; margin: -1.3cqw; border-radius: 50%;
    background: var(--c, #7cbcff); box-shadow: 0 0 3cqw var(--c, #7cbcff);
    opacity: 0; animation: rd-blip 4s linear infinite;
}
/* Each blip lights as the sweep crosses its bearing: delay = bearing / 360 x 4s. */
.rd-b1 { left: 70%; top: 28%; --c: #ff6478; animation-delay: .5s; }
.rd-b2 { left: 78%; top: 62%; --c: #edb339; animation-delay: 1.3s; }
.rd-b3 { left: 38%; top: 74%; --c: #7cbcff; animation-delay: 2.3s; }
.rd-b4 { left: 24%; top: 40%; --c: #2ecf9a; animation-delay: 3.2s; }
.rd-b5 { left: 52%; top: 18%; --c: #7cbcff; animation-delay: .1s; }
@keyframes rd-blip { 0% { opacity: 1; transform: scale(1.5); } 55% { opacity: .3; transform: scale(1); } 100% { opacity: 0; } }
.rd-t1 { top: 12%; left: 0; }
.rd-t2 { top: 46%; right: 0; animation-delay: -2s; }
.rd-t3 { bottom: 10%; left: 10%; animation-delay: -4s; }

/* ---- scan: the vulnerability lookup ---- */
.art-scan { perspective: 180cqw; }
.sc-card {
    position: absolute; inset: 7% 5%;
    padding: 4cqw;
    border-radius: 3.4cqw;
    border: 1px solid rgba(124, 188, 255, .22);
    background: #0b1018;
    box-shadow: 0 8cqw 14cqw -8cqw #000, 0 0 12cqw rgba(61, 157, 255, .12);
    overflow: hidden;
    --bob-from: rotateY(-18deg) rotateX(8deg);
    --bob-to: rotateY(-10deg) rotateX(4deg) translateY(-2cqw);
    animation: art-bob 8s ease-in-out infinite alternate;
}
.sc-head { display: block; font-size: 2.8cqw; color: var(--ink-faint); margin-bottom: 2cqw; }
.sc-row {
    display: grid; grid-template-columns: 1fr auto 15cqw; align-items: center; gap: 2cqw;
    padding: 1.6cqw 2cqw; border-radius: 1.8cqw; font-size: 3.1cqw; color: var(--ink-muted);
}
.sc-row em { font-style: normal; color: var(--ink-faint); }
.sc-chip {
    justify-self: end; font-size: 2.4cqw; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    padding: .4cqw 1.4cqw; border-radius: 1.2cqw; opacity: 0;
}
.sc-chip.is-critical { color: #ff8b9c; background: rgba(255, 100, 120, .16); }
.sc-chip.is-high { color: #f6a066; background: rgba(239, 108, 46, .16); }
.sc-chip.is-medium { color: #f0c46b; background: rgba(237, 179, 57, .16); }
.sc-row.is-hit { animation: sc-hit 5s ease-out infinite; animation-delay: .8s; }
.sc-row.is-hit .sc-chip { animation: sc-chip 5s ease-out infinite; animation-delay: .8s; }
.sc-row.sc-h2, .sc-row.sc-h2 .sc-chip { animation-delay: 1.45s; }
.sc-row.sc-h3, .sc-row.sc-h3 .sc-chip { animation-delay: 2.05s; }
@keyframes sc-hit { 0% { background: rgba(255, 100, 120, .28); color: #fff; } 40% { background: rgba(255, 100, 120, .1); } 90%, 100% { background: rgba(255, 100, 120, 0); } }
@keyframes sc-chip { 0% { opacity: 0; transform: scale(.6); } 6% { opacity: 1; transform: scale(1.08); } 12%, 82% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; } }
.sc-beam {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 78%, rgba(124, 188, 255, .18) 96%, rgba(124, 188, 255, .75) 100%);
    animation: sc-beam 5s linear infinite;
}
@keyframes sc-beam { from { transform: translateY(-100%); } to { transform: translateY(100%); } }

/* ---- fingerprint: the malware lookup and file scan ---- */
.fp-stage { position: absolute; inset: 2% 16% 30%; display: grid; place-items: center; overflow: hidden; }
.fp-glyph { position: absolute; font-size: 56cqw; line-height: 1; color: rgba(124, 188, 255, .14); }
.fp-lit {
    color: #7cbcff; filter: drop-shadow(0 0 2cqw rgba(61, 157, 255, .6));
    clip-path: inset(0 0 100% 0); animation: fp-reveal 4.4s ease-in-out infinite;
}
@keyframes fp-reveal {
    0% { clip-path: inset(0 0 100% 0); }
    48% { clip-path: inset(0 0 0 0); }
    52% { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(100% 0 0 0); }
}
.fp-beam {
    position: absolute; inset: 0 6%;
    background: linear-gradient(180deg, transparent calc(100% - 3px), #9bd0ff calc(100% - 3px));
    filter: drop-shadow(0 0 6px #3d9dff);
    animation: fp-beam 4.4s ease-in-out infinite;
}
@keyframes fp-beam {
    0% { transform: translateY(-100%); }
    48% { transform: translateY(0); }
    52% { transform: translateY(-100%); }
    100% { transform: translateY(0); }
}
.fp-hashes { position: absolute; left: 6%; right: 6%; bottom: 4%; display: grid; gap: 1.4cqw; font-size: 3cqw; color: var(--ink-faint); }
.fp-hashes span { overflow: hidden; white-space: nowrap; text-overflow: clip; animation: fp-line 4.4s ease-in-out infinite; }
.fp-hashes span:nth-child(2) { animation-delay: .3s; }
.fp-hashes span:nth-child(3) { animation-delay: .6s; }
.fp-hashes span:nth-child(4) { animation-delay: .9s; }
.fp-hashes .is-hit { color: #ff8b9c; }
.fp-hashes .is-hit::after { content: "  MATCH"; font-weight: 600; letter-spacing: .08em; }
@keyframes fp-line { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ---- devices: the User-Agent lookup ---- */
.dv-stage { position: absolute; inset: 6%; perspective: 160cqw; }
.dv-card {
    position: absolute; width: 46cqw;
    display: flex; flex-direction: column; gap: 1cqw; padding: 4cqw;
    border-radius: 3.6cqw; border: 1px solid rgba(255, 255, 255, .1);
    background: #0b1018; box-shadow: 0 8cqw 12cqw -8cqw #000;
    font-size: 3.4cqw;
    --bob-from: rotateY(-14deg) rotateX(6deg);
    --bob-to: rotateY(-6deg) rotateX(2deg) translateY(-3cqw);
    animation: art-bob 7s ease-in-out infinite alternate, dv-focus 12s ease-in-out infinite;
}
.dv-card i { font-size: 8cqw; color: #7cbcff; }
.dv-card b { font-family: var(--f-display); font-size: 4.2cqw; }
.dv-card em { align-self: flex-start; }
.dv-c1 { top: 0; left: 0; animation-delay: 0s, 0s; }
.dv-c2 { top: 16%; right: 0; animation-delay: -2s, -9s; }
.dv-c3 { bottom: 14%; left: 4%; animation-delay: -4s, -6s; }
.dv-c4 { bottom: 0; right: 6%; animation-delay: -6s, -3s; }
@keyframes dv-focus { 0%, 20%, 100% { border-color: rgba(255, 255, 255, .1); } 6%, 14% { border-color: rgba(124, 188, 255, .6); box-shadow: 0 0 8cqw rgba(61, 157, 255, .25); } }

/* ---- beacon: the event report ---- */
.bc-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.bc-core {
    position: relative; z-index: 2;
    width: 26cqw; height: 26cqw; border-radius: 7cqw; display: grid; place-items: center;
    font-size: 12cqw; color: #fff;
    background: linear-gradient(150deg, #f3c35a, #d9820b);
    box-shadow: 0 0 12cqw rgba(237, 179, 57, .45);
}
.bc-wave {
    position: absolute; width: 26cqw; height: 26cqw; border-radius: 50%;
    border: 2px solid rgba(237, 179, 57, .6);
    animation: bc-wave 3.6s ease-out infinite;
}
.bc-w2 { animation-delay: 1.2s; }
.bc-w3 { animation-delay: 2.4s; }
@keyframes bc-wave { from { transform: scale(1); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
.bc-t1 { top: 14%; left: 2%; }
.bc-t2 { bottom: 14%; right: 2%; animation-delay: -3s; }

/* ---- appliance: the network appliance, as a real box ---- */
.ap-stage { position: absolute; inset: 0; perspective: 240cqw; display: grid; place-items: center; }
.ap-box {
    --w: 74cqw; --h: 15cqw; --d: 46cqw;
    position: relative; width: var(--w); height: var(--h);
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(-30deg);
    animation: ap-turn 14s ease-in-out infinite alternate;
}
@keyframes ap-turn {
    from { transform: rotateX(-22deg) rotateY(-38deg); }
    to { transform: rotateX(-14deg) rotateY(-10deg) translateY(-2cqw); }
}
.ap-face { position: absolute; left: 0; top: 0; border: 1px solid rgba(150, 190, 245, .28); backface-visibility: hidden; }
.ap-front, .ap-back { width: var(--w); height: var(--h); }
.ap-front {
    transform: translateZ(calc(var(--d) / 2));
    display: flex; align-items: center; gap: 2.4cqw; padding: 0 3cqw;
    background: linear-gradient(180deg, #1c2739, #0e1522);
    border-radius: .6cqw;
}
.ap-back { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); background: #0c121d; }
.ap-top, .ap-bottom { width: var(--w); height: var(--d); top: calc((var(--h) - var(--d)) / 2); }
.ap-top {
    transform: rotateX(90deg) translateZ(calc(var(--h) / 2));
    background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .28) 0 .6cqw, transparent .6cqw 2.4cqw) 12% 30% / 34% 40% no-repeat,
        linear-gradient(135deg, #26344c, #111a28);
}
.ap-bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); background: #070b12; }
.ap-left, .ap-right { width: var(--d); height: var(--h); left: calc((var(--w) - var(--d)) / 2); background: linear-gradient(90deg, #151f30, #0f1724); }
.ap-left { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.ap-right { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.ap-brand { display: flex; align-items: center; gap: 1cqw; font-family: var(--f-display); font-weight: 700; font-size: 2.6cqw; color: #cfe0ff; white-space: nowrap; }
.ap-brand .sd-logo { height: 5cqw; width: auto; }
.ap-ports { display: flex; gap: 1.2cqw; margin-left: auto; }
.ap-port { position: relative; width: 4.6cqw; height: 3.8cqw; border-radius: .6cqw; border: 1px solid rgba(150, 190, 245, .45); background: #04060b; }
.ap-port b { position: absolute; top: .45cqw; right: .45cqw; width: .9cqw; height: .9cqw; border-radius: 50%; background: #2ecf9a; box-shadow: 0 0 1cqw #2ecf9a; animation: ap-led 1.1s steps(2, jump-none) infinite; }
.ap-port:nth-child(2) b { animation-delay: -.3s; }
.ap-port:nth-child(3) b { animation-delay: -.7s; background: #edb339; box-shadow: 0 0 1cqw #edb339; }
.ap-port:nth-child(4) b { animation-delay: -.2s; }
.ap-port:nth-child(5) b { animation-delay: -.9s; }
.ap-port:nth-child(6) b { animation-delay: -.5s; }
.ap-port:nth-child(7) b { animation-delay: -.1s; }
@keyframes ap-led { 0% { opacity: 1; } 100% { opacity: .2; } }
.ap-status { display: flex; flex-direction: column; gap: .8cqw; }
.ap-status i { width: 1cqw; height: 1cqw; border-radius: 50%; background: #3d9dff; box-shadow: 0 0 1.2cqw #3d9dff; }
.ap-status i + i { background: #2ecf9a; box-shadow: 0 0 1.2cqw #2ecf9a; animation: pr-pulse 2s ease-in-out infinite; }
.ap-shadow { position: absolute; left: 14%; right: 14%; top: 64%; height: 12cqw; border-radius: 50%; background: radial-gradient(ellipse, rgba(61, 157, 255, .32), transparent 70%); filter: blur(2.4cqw); }

/* ---- layers: the platform, one plane per capability heading ---- */
.ly-stage { position: absolute; inset: 0; perspective: 220cqw; transform-style: preserve-3d; display: grid; place-items: center; }
.ly-plane {
    position: absolute; width: 66cqw; height: 34cqw;
    display: flex; align-items: center; gap: 2.6cqw; padding: 0 5cqw;
    border-radius: 3cqw; border: 1px solid rgba(124, 188, 255, .42);
    background: linear-gradient(135deg, rgba(61, 157, 255, .26), rgba(11, 16, 24, .94) 70%);
    box-shadow: 0 0 10cqw rgba(61, 157, 255, .14);
    font-size: 3.8cqw; color: var(--ink);
    --z: calc((1.5 - var(--i)) * 15cqw);
    transform: rotateX(60deg) rotateZ(-38deg) translateZ(var(--z));
    animation: ly-float 6s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * -1.1s);
}
@keyframes ly-float { to { transform: rotateX(60deg) rotateZ(-38deg) translateZ(calc(var(--z) + 3cqw)); } }
.ly-ico { flex: 0 0 auto; width: 8cqw; height: 8cqw; border-radius: 2.4cqw; display: grid; place-items: center; font-size: 4.6cqw; color: #7cbcff; background: rgba(61, 157, 255, .2); }
.ly-label { font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; }
.ly-count { margin-left: auto; color: var(--ink-faint); }

/* ---- module: one capability's own mark ---- */
.md-stage { position: absolute; inset: 0; display: grid; place-items: center; perspective: 200cqw; }
.md-tile {
    position: relative; z-index: 2;
    width: 36cqw; height: 36cqw; border-radius: 10cqw; display: grid; place-items: center;
    font-size: 17cqw; color: #fff;
    background: linear-gradient(150deg, color-mix(in srgb, var(--ico) 70%, #ffffff), var(--ico) 60%);
    box-shadow: 0 5cqw 12cqw -4cqw color-mix(in srgb, var(--ico) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45);
    --bob-from: rotateX(14deg) rotateY(-22deg);
    --bob-to: rotateX(6deg) rotateY(16deg) translateY(-3cqw);
    animation: art-bob 9s ease-in-out infinite alternate;
}
.md-orbit {
    position: absolute; width: 74cqw; height: 74cqw; border-radius: 50%;
    border: 1px dashed color-mix(in srgb, var(--ico) 50%, transparent);
    animation: md-orbit 16s linear infinite;
}
.md-o2 { width: 94cqw; height: 94cqw; animation-duration: 26s; animation-direction: reverse; opacity: .6; }
.md-orbit i { position: absolute; top: -1.6cqw; left: calc(50% - 1.6cqw); width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: var(--ico); box-shadow: 0 0 3cqw var(--ico); }
@keyframes md-orbit { from { transform: rotateX(68deg) rotateZ(0deg); } to { transform: rotateX(68deg) rotateZ(360deg); } }
.md-name { position: absolute; bottom: 6%; font-family: var(--f-display); font-size: 6cqw; font-weight: 700; letter-spacing: -.03em; color: color-mix(in srgb, var(--ico) 50%, #ffffff); }

/* ---- cards: the plans, fanned ---- */
.pc-stage { position: absolute; inset: 0; perspective: 200cqw; display: grid; place-items: center; }
.pc-card {
    position: absolute; width: 33cqw; height: 50cqw;
    display: flex; flex-direction: column; gap: 2.4cqw; padding: 4.6cqw 3.8cqw;
    border-radius: 4cqw; border: 1px solid color-mix(in srgb, var(--ico) 45%, transparent);
    background: linear-gradient(165deg, color-mix(in srgb, var(--ico) 26%, #0b1018), #0b1018 72%);
    box-shadow: 0 6cqw 14cqw -6cqw #000;
    --x: calc((var(--i) - 1) * 31cqw);
    --ry: calc((var(--i) - 1) * -16deg);
    --rz: calc((var(--i) - 1) * 5deg);
    transform: translateX(var(--x)) rotateY(var(--ry)) rotateZ(var(--rz));
    animation: pc-lift 9s ease-in-out infinite;
    animation-delay: calc(var(--i) * 3s - 9s);
}
.pc-card:nth-child(2) { z-index: 2; }
.pc-card.is-current { border-color: var(--ico); box-shadow: 0 0 10cqw color-mix(in srgb, var(--ico) 40%, transparent), 0 6cqw 14cqw -6cqw #000; }
@keyframes pc-lift {
    0%, 36%, 100% { transform: translateX(var(--x)) rotateY(var(--ry)) rotateZ(var(--rz)); }
    12%, 24% { transform: translateX(var(--x)) rotateY(var(--ry)) rotateZ(var(--rz)) translateY(-7cqw) scale(1.04); }
}
.pc-ico { width: 11cqw; height: 11cqw; border-radius: 3.2cqw; display: grid; place-items: center; font-size: 6cqw; color: var(--ico); background: color-mix(in srgb, var(--ico) 20%, transparent); }
.pc-card b { font-family: var(--f-display); font-size: 4.8cqw; letter-spacing: -.02em; }
.pc-lines i { display: block; height: 1.4cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .08); margin-top: 2.2cqw; }
.pc-lines i:nth-child(2) { width: 80%; }
.pc-lines i:nth-child(3) { width: 58%; }

/* ---- clock: compliance and the reporting deadlines ---- */
.ck-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.ck-dial { width: 80cqw; height: 80cqw; transform: rotate(-90deg); overflow: visible; }
.ck-track { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 11; }
.ck-seg { fill: none; stroke-width: 11; stroke-linecap: round; stroke-dasharray: 0 100; animation: ck-fill 9s ease-in-out infinite; }
.ck-s1 { stroke: #ff6478; --len: 10; }
.ck-s2 { stroke: #edb339; --len: 22; stroke-dashoffset: -13; animation-delay: .8s; }
.ck-s3 { stroke: #2ecf9a; --len: 58; stroke-dashoffset: -38; animation-delay: 1.6s; }
@keyframes ck-fill { 0% { stroke-dasharray: 0 100; } 25%, 80% { stroke-dasharray: var(--len) 100; } 100% { stroke-dasharray: 0 100; } }
.ck-hand {
    position: absolute; left: calc(50% - .7cqw); top: calc(50% - 32cqw);
    width: 1.4cqw; height: 32cqw; border-radius: 1cqw; transform-origin: 50% 100%;
    background: linear-gradient(180deg, #9bd0ff, rgba(61, 157, 255, 0));
    animation: art-spin 9s linear infinite;
}
.ck-centre {
    position: absolute; z-index: 2; display: grid; justify-items: center; text-align: center;
    padding: 7cqw; border-radius: 50%;
    background: radial-gradient(circle, #06090f 58%, rgba(6, 9, 15, 0) 72%);
}
.ck-centre b { font-family: var(--f-display); font-weight: 700; font-size: 10cqw; letter-spacing: -.03em; color: #ff8b9c; line-height: 1; }
.ck-centre em { font-style: normal; font-size: 3.2cqw; color: var(--ink-muted); margin-top: 1cqw; }
.ck-t1 { top: 6%; right: 0; }
.ck-t2 { bottom: 8%; left: 0; animation-delay: -3s; }

/* ---- ship: maritime ---- */
.sh-stage {
    position: absolute; inset: 0; overflow: hidden;
    /* The sea fades out at the edges rather than ending in a box. */
    -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 46%, #000 58%, transparent 100%);
    mask-image: radial-gradient(ellipse 72% 68% at 50% 46%, #000 58%, transparent 100%);
}
.sh-ship { position: absolute; width: 62cqw; left: 18cqw; top: 36cqw; transform-origin: 50% 85%; animation: sh-bob 5s ease-in-out infinite; }
@keyframes sh-bob { 0%, 100% { transform: translateY(0) rotate(-1.6deg); } 50% { transform: translateY(2cqw) rotate(1.6deg); } }
.sh-hull { fill: #16294a; stroke: #3d9dff; stroke-width: 1.5; }
.sh-deck { fill: #1d3252; }
.sh-bridge { fill: #243d62; stroke: rgba(124, 188, 255, .5); }
.sh-mast { stroke: #9bd0ff; stroke-width: 2.4; }
.sh-win { fill: #9bd0ff; animation: pr-pulse 3s ease-in-out infinite; }
.sh-box.b1 { fill: #b9790a; } .sh-box.b2 { fill: #0e9c6c; } .sh-box.b3 { fill: #006DCC; }
.sh-sat { position: absolute; top: 5cqw; right: 8cqw; font-size: 8cqw; color: #9bd0ff; animation: art-tag 6s ease-in-out infinite alternate; }
.sh-link {
    position: absolute; left: 63cqw; top: 36cqw; width: 10cqw; height: 10cqw; margin: -5cqw;
    border-radius: 50%; border: 2px solid rgba(124, 188, 255, .7);
    border-left-color: transparent; border-bottom-color: transparent;
    animation: sh-signal 2.7s ease-out infinite;
}
.sh-l2 { animation-delay: .9s; } .sh-l3 { animation-delay: 1.8s; }
@keyframes sh-signal { from { transform: rotate(-45deg) scale(.4); opacity: 1; } to { transform: rotate(-45deg) scale(3.2); opacity: 0; } }
.sh-wave {
    position: absolute; left: 0; width: 200%; height: 14cqw;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'><path d='M0 8 Q 25 0 50 8 T 100 8 T 150 8 T 200 8 V 20 H 0 Z' fill='%233d9dff'/></svg>") repeat-x;
    background-size: 50% 100%;
    animation: sh-wave 8s linear infinite;
}
.sh-wv1 { top: 58cqw; opacity: .14; animation-duration: 11s; }
.sh-wv2 { top: 62cqw; opacity: .2; animation-duration: 8s; animation-direction: reverse; }
.sh-wv3 {
    top: 66cqw; height: 30cqw; opacity: .3; animation-duration: 6s;
    -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 90%);
    mask-image: linear-gradient(180deg, #000 20%, transparent 90%);
}
@keyframes sh-wave { to { transform: translateX(-50%); } }

/* ---- plant: industry and energy ---- */
.pl-stage { position: absolute; inset: 0; }
.pl-stage::after { content: ""; position: absolute; left: 4cqw; right: 4cqw; bottom: 13cqw; height: 1px; background: rgba(124, 188, 255, .3); }
.pl-factory { position: absolute; left: 6cqw; bottom: 13cqw; width: 58cqw; }
.pl-factory path { fill: #14223a; stroke: rgba(61, 157, 255, .6); stroke-width: 1; }
.pl-light { fill: #edb339; animation: pr-pulse 2.4s ease-in-out infinite; }
.pl-light.l2 { animation-delay: -.6s; } .pl-light.l3 { animation-delay: -1.2s; } .pl-light.l4 { animation-delay: -1.8s; }
.pl-turbine { position: absolute; left: 72cqw; bottom: 13cqw; width: 2.4cqw; height: 48cqw; }
.pl-small { left: 88cqw; transform: scale(.66); transform-origin: 50% 100%; }
.pl-tower { position: absolute; inset: 0; background: linear-gradient(#b7c6db, #3b4d68); clip-path: polygon(32% 0, 68% 0, 100% 100%, 0 100%); }
.pl-rotor { position: absolute; left: 50%; top: 0; width: 0; height: 0; animation: art-spin 5s linear infinite; }
.pl-small .pl-rotor { animation-duration: 3.8s; }
.pl-rotor::after { content: ""; position: absolute; left: -1.6cqw; top: -1.6cqw; width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: #e9eef8; }
.pl-rotor i { position: absolute; left: -1.1cqw; bottom: 0; width: 2.2cqw; height: 21cqw; transform-origin: 50% 100%; border-radius: 1.2cqw 1.2cqw 40% 40%; background: linear-gradient(#e9eef8, #97a9c2); }
.pl-rotor i:nth-child(2) { transform: rotate(120deg); }
.pl-rotor i:nth-child(3) { transform: rotate(240deg); }
.pl-pulse { position: absolute; left: 6cqw; bottom: 12cqw; width: 2cqw; height: 2cqw; border-radius: 50%; background: #2ecf9a; box-shadow: 0 0 2.4cqw #2ecf9a; animation: pl-travel 3.2s linear infinite; }
@keyframes pl-travel { from { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { transform: translateX(80cqw); opacity: 0; } }
.pl-shield { position: absolute; right: 3cqw; bottom: 3cqw; font-size: 8cqw; color: #2ecf9a; }

/* ---- team: the organisation, and the network around it ---- */
.tm-net { position: absolute; inset: 4%; width: 92%; height: 92%; overflow: visible; }
.tm-lines path { stroke: rgba(124, 188, 255, .22); stroke-width: 1.2; fill: none; }
.tm-pulses path { stroke: #9bd0ff; stroke-width: 3; stroke-linecap: round; fill: none; stroke-dasharray: .08 1; stroke-dashoffset: 1.08; animation: tm-pulse 3s linear infinite; }
.tm-pulses path:nth-child(2) { animation-delay: .6s; }
.tm-pulses path:nth-child(3) { animation-delay: 1.2s; }
.tm-pulses path:nth-child(4) { animation-delay: 1.8s; }
.tm-pulses path:nth-child(5) { animation-delay: 2.4s; }
@keyframes tm-pulse { to { stroke-dashoffset: 0; } }
.tm-nodes circle { fill: #0b1018; stroke: #3d9dff; stroke-width: 2; }
.tm-core { fill: #1a6ade; stroke: #7cbcff; stroke-width: 2; filter: drop-shadow(0 0 12px rgba(61, 157, 255, .6)); }
.tm-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 9cqw; color: #fff; }

/* ---- target: penetration testing ---- */
.tg-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.tg-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(124, 188, 255, .35); }
.tg-r1 { width: 80cqw; height: 80cqw; border-style: dashed; animation: art-spin 30s linear infinite; }
.tg-r2 { width: 56cqw; height: 56cqw; border-width: 2px; border-color: rgba(124, 188, 255, .5) transparent; animation: art-spin 8s linear infinite reverse; }
.tg-r3 { width: 26cqw; height: 26cqw; border-color: #ff6478; box-shadow: 0 0 6cqw rgba(255, 100, 120, .35); }
.tg-cross { position: absolute; width: 90cqw; height: 90cqw; background: linear-gradient(rgba(124, 188, 255, .3), rgba(124, 188, 255, .3)) center / 1px 100% no-repeat, linear-gradient(rgba(124, 188, 255, .3), rgba(124, 188, 255, .3)) center / 100% 1px no-repeat; }
.tg-hit { position: absolute; width: 3cqw; height: 3cqw; border-radius: 50%; background: #ff6478; box-shadow: 0 0 3cqw #ff6478; animation: rd-blip 3.6s linear infinite; }
.tg-h1 { left: 62%; top: 34%; }
.tg-h2 { left: 30%; top: 58%; animation-delay: 1.2s; background: #edb339; box-shadow: 0 0 3cqw #edb339; }
.tg-h3 { left: 56%; top: 70%; animation-delay: 2.4s; }
.tg-t1 { top: 12%; right: 0; }
.tg-t2 { bottom: 12%; left: 0; animation-delay: -3s; }

/* ---- contact: a request on its way ---- */
.ct-stage { position: absolute; inset: 0; }
.ct-path { position: absolute; inset: 6% 2% 18%; width: 96%; height: 76%; overflow: visible; }
.ct-path path { fill: none; stroke: rgba(124, 188, 255, .35); stroke-width: 2; stroke-dasharray: 6 8; animation: ct-dash 3s linear infinite; }
@keyframes ct-dash { to { stroke-dashoffset: -28; } }
.ct-plane {
    position: absolute; left: 70%; top: 18%; font-size: 12cqw; color: #9bd0ff;
    filter: drop-shadow(0 0 3cqw rgba(61, 157, 255, .6));
    animation: ct-fly 6s ease-in-out infinite;
}
@keyframes ct-fly {
    0% { transform: translate(-44cqw, 40cqw) rotate(-10deg) scale(.7); opacity: 0; }
    15% { opacity: 1; }
    60% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
    80%, 100% { transform: translate(18cqw, -16cqw) rotate(8deg) scale(.8); opacity: 0; }
}
.ct-bubble {
    position: absolute; display: inline-flex; align-items: center; gap: .4rem;
    padding: .38rem .65rem; border-radius: 12px 12px 12px 4px;
    background: rgba(11, 16, 24, .94); border: 1px solid rgba(124, 188, 255, .3);
    font-size: .76rem; white-space: nowrap; color: var(--ink);
    box-shadow: 0 14px 30px -18px #000;
    animation: ct-pop 6s ease-in-out infinite;
}
.ct-bubble i { color: #2ecf9a; }
.ct-b1 { left: 0; top: 56%; }
.ct-b2 { left: 12%; top: 70%; animation-delay: .5s; }
.ct-b3 { left: 4%; top: 84%; animation-delay: 1s; }
@keyframes ct-pop { 0%, 8% { opacity: 0; transform: translateY(8px) scale(.96); } 16%, 70% { opacity: 1; transform: none; } 84%, 100% { opacity: 0; transform: translateY(-6px); } }

/* ---- eu: where the data stays ---- */
.eu-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.eu-ring { position: absolute; inset: 10%; animation: art-spin 60s linear infinite; }
.eu-star {
    position: absolute; left: 50%; top: 50%; width: 6cqw; height: 6cqw; margin: -3cqw;
    display: grid; place-items: center; font-size: 5cqw; color: #f3c35a;
    transform: rotate(calc(var(--i) * 30deg)) translateY(-35cqw);
    filter: drop-shadow(0 0 1.4cqw rgba(243, 195, 90, .5));
}
.eu-star i { animation: eu-twinkle 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.25s); }
@keyframes eu-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.eu-core {
    position: relative; width: 30cqw; height: 30cqw; border-radius: 50%; display: grid; place-items: center;
    font-size: 13cqw; color: #fff;
    background: radial-gradient(circle at 35% 30%, #4aa3ff, #1a4fb3);
    box-shadow: 0 0 14cqw rgba(61, 157, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.eu-t1 { top: 6%; left: 0; }
.eu-t2 { bottom: 8%; right: 0; animation-delay: -3s; }

/* ======================================================================
   Reduced motion: everything here stops, and the replica rests complete.
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
    .pr *, .pr, .page-art, .page-art * { animation: none !important; transition: none !important; }
    .pt-view:not([data-view="overview"]) { display: none; }
    .pt-view[data-view="overview"] { opacity: 1; visibility: visible; transform: none; }
    .fp-lit { clip-path: none; }
    .sc-chip { opacity: 1; }
    .ck-seg { stroke-dasharray: var(--len) 100; }
}

/* ======================================================================
   The portal showcase page
   ====================================================================== */

.showcase-hero { padding-top: clamp(3rem, 7vw, 5.5rem); text-align: center; }
.showcase-hero .hero-title { margin-left: auto; margin-right: auto; max-width: 18ch; }
.showcase-hero .hero-lead { margin-left: auto; margin-right: auto; }
.showcase-portal { margin: 2.5rem auto 0; max-width: 1180px; }
/* Larger than its column on a wide screen only: on a phone the same bleed
   would widen the page past the screen. */
@media (min-width: 992px) {
    .showcase-portal .pr { width: 118%; margin-left: -6%; }
}
.showcase-portal .pr-tilt { transform: translate3d(0, 0, 0) rotateX(12deg) rotateY(-14deg) rotateZ(.6deg); }

/* One feature: the words on one side, its screen on the other, swapping sides
   down the page. */
.sf {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
    padding: clamp(2rem, 5vw, 4rem) 0;
}
.sf + .sf { border-top: 1px solid var(--line-soft); }
.sf.is-flip .sf-copy { order: 2; }
@media (max-width: 991px) {
    .sf { grid-template-columns: 1fr; }
    .sf.is-flip .sf-copy { order: 0; }
}
.sf-kicker { display: inline-flex; align-items: center; gap: .6rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-2); font-weight: 600; }
.sf-kicker b { color: var(--ink-faint); font-weight: 500; }
.sf-copy h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.1; margin: .7rem 0 .8rem; }
.sf-copy p { color: var(--ink-muted); font-size: 1.02rem; max-width: 52ch; }
.sf-points { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: .5rem; }
.sf-points li { display: flex; gap: .55rem; align-items: flex-start; color: var(--ink-muted); }
.sf-points i { color: var(--success); margin-top: .2rem; }

/* The stage: a perspective box, square-ish, sized in its own width. */
.sf-stage { position: relative; aspect-ratio: 16 / 11; container-type: inline-size; perspective: 160cqw; }
.sf-screen, .sf-stack {
    position: absolute; inset: 6% 5%;
    transform-style: preserve-3d;
    transform: rotateY(-16deg) rotateX(8deg);
    transition: transform 1.2s cubic-bezier(.16, 1, .3, 1), opacity .8s ease;
}
.sf.is-flip .sf-screen, .sf.is-flip .sf-stack { transform: rotateY(16deg) rotateX(8deg); }
.sf-screen {
    border-radius: 2.4cqw; padding: 4cqw;
    background: linear-gradient(160deg, #111a2a, #0a0f19 70%);
    border: 1px solid rgba(150, 190, 245, .24);
    box-shadow: 0 6cqw 12cqw -6cqw #000, 0 0 12cqw rgba(61, 157, 255, .14);
    overflow: hidden;
    font-size: 2.6cqw; color: var(--ink);
}
/* Before it is reached, a screen waits turned further away; reaching it swings
   it into its pose. Only with the script present, so the page is whole without. */
html.js-showcase .sf:not(.is-live) .sf-screen,
html.js-showcase .sf:not(.is-live) .sf-stack { opacity: 0; transform: rotateY(-38deg) rotateX(14deg) translate3d(6cqw, 4cqw, -10cqw); }
html.js-showcase .sf.is-flip:not(.is-live) .sf-screen,
html.js-showcase .sf.is-flip:not(.is-live) .sf-stack { transform: rotateY(38deg) rotateX(14deg) translate3d(-6cqw, 4cqw, -10cqw); }
.sf.is-live .sf-screen, .sf.is-live .sf-stack { animation: sf-float 8s ease-in-out 1.3s infinite alternate; }
@keyframes sf-float { to { translate: 0 -1.4cqw; } }
/* On a narrow screen a screen turned 16 degrees projects past the page edge:
   turn it less, and clip what is left. `clip`, not `hidden`, because only
   `clip` keeps the 3D context and creates no scroll box. */
.showcase-list { overflow-x: clip; }
@media (max-width: 991px) {
    .sf-screen, .sf-stack { transform: rotateY(-8deg) rotateX(6deg); }
    .sf.is-flip .sf-screen, .sf.is-flip .sf-stack { transform: rotateY(8deg) rotateX(6deg); }
}
.sf-screen-head { display: flex; align-items: baseline; gap: 1.6cqw; font-family: var(--f-data); font-size: 2.1cqw; letter-spacing: .14em; color: var(--ink-faint); margin-bottom: 3cqw; }
.sf-screen-head em { font-style: normal; letter-spacing: 0; color: var(--ink-muted); }

/* 01 dashboards: three screens stacked in depth */
.sf-card {
    position: absolute; width: 74%; height: 70%;
    border-radius: 2.4cqw; padding: 3.4cqw;
    background: linear-gradient(160deg, #121c2d, #0a0f19 75%);
    border: 1px solid rgba(150, 190, 245, .24);
    box-shadow: 0 5cqw 10cqw -5cqw #000;
    display: flex; flex-direction: column; gap: 2.4cqw;
}
.sf-c1 { left: 0; bottom: 0; transform: translateZ(8cqw); }
.sf-c2 { left: 13%; bottom: 15%; transform: translateZ(0); opacity: .82; }
.sf-c3 { left: 26%; bottom: 30%; transform: translateZ(-8cqw); opacity: .64; }
.sf.is-live .sf-c2 { animation: sf-spread-2 1.4s cubic-bezier(.16, 1, .3, 1) .3s both; }
.sf.is-live .sf-c3 { animation: sf-spread-3 1.4s cubic-bezier(.16, 1, .3, 1) .3s both; }
@keyframes sf-spread-2 { from { transform: translate3d(-13%, 15%, 8cqw); } }
@keyframes sf-spread-3 { from { transform: translate3d(-26%, 30%, 8cqw); } }
.sf-card-head { display: flex; align-items: center; gap: 1.4cqw; font-family: var(--f-display); font-weight: 700; font-size: 3cqw; }
.sf-card-head i { color: var(--primary-2); }
.sf-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.sf-tiles span { display: flex; flex-direction: column; padding: 1.6cqw; border-radius: 1.4cqw; border: 1px solid rgba(150, 190, 245, .15); background: rgba(16, 24, 38, .8); }
.sf-tiles b { font-family: var(--f-display); font-size: 4cqw; line-height: 1.1; }
.sf-tiles em { font-style: normal; font-size: 1.9cqw; color: var(--ink-faint); }
.sf-tiles .is-good b { color: var(--success); }
.sf-line { flex: 1; min-height: 0; }
.sf-line svg { width: 100%; height: 100%; }
.sf-line path { fill: none; stroke: var(--primary); stroke-width: 2.4; stroke-dasharray: 1; }
.sf.is-live .sf-line path { animation: sf-draw 1.8s ease-out .8s both; }
@keyframes sf-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.sf-bars { flex: 1; display: flex; align-items: flex-end; gap: 1.2cqw; }
.sf-bars i { flex: 1; height: var(--h); border-radius: .6cqw .6cqw 0 0; background: rgba(61, 157, 255, .6); transform-origin: bottom; }
.sf.is-live .sf-bars i { animation: sf-grow-y 1s cubic-bezier(.22, .68, .3, 1) .9s both; }
@keyframes sf-grow-y { from { transform: scaleY(.05); } }
.sf-ring { position: relative; flex: 1; display: grid; place-items: center; }
.sf-ring svg { height: 100%; max-height: 22cqw; transform: rotate(-90deg); }
.sf-ring-track { fill: none; stroke: rgba(150, 185, 235, .16); stroke-width: 10; }
.sf-ring-arc { fill: none; stroke: #edb339; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 86 100; }
.sf.is-live .sf-ring-arc { animation: sf-ring 1.4s cubic-bezier(.22, .68, .3, 1) 1s both; }
@keyframes sf-ring { from { stroke-dasharray: 0 100; } }
.sf-ring b { position: absolute; font-family: var(--f-display); font-size: 4cqw; }

/* 02 the voyage */
.sf-voyage { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; }
.sf-node { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; }
.sf-node i { width: 9cqw; height: 9cqw; border-radius: 2.6cqw; display: grid; place-items: center; font-size: 4.6cqw; color: var(--primary-2); background: #0d1626; border: 1px solid rgba(124, 188, 255, .4); }
.sf-node em { font-style: normal; font-size: 2cqw; color: var(--ink-muted); text-align: center; }
.sf-pipe { position: absolute; left: 12%; right: 12%; top: 42%; height: .5cqw; border-radius: 1cqw; background: linear-gradient(90deg, rgba(124, 188, 255, .15), rgba(124, 188, 255, .5), rgba(124, 188, 255, .15)); }
.sf-packet { position: absolute; z-index: 3; left: 11%; top: calc(42% - 1.3cqw); width: 3cqw; height: 3cqw; border-radius: 50%; }
.sf-packet.is-good { background: #2ecf9a; box-shadow: 0 0 2.4cqw #2ecf9a; }
.sf-packet.is-bad { background: #ff6478; box-shadow: 0 0 2.4cqw #ff6478; }
.sf.is-live .sf-packet.is-good { animation: sf-travel 4.5s ease-in-out infinite; }
.sf.is-live .sf-p2 { animation-delay: 2.2s !important; }
.sf.is-live .sf-packet.is-bad { animation: sf-blocked 4.5s ease-in-out 1.1s infinite; }
@keyframes sf-travel { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(70cqw); opacity: 0; } }
@keyframes sf-blocked { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 40% { transform: translateX(34cqw) scale(1); opacity: 1; } 50%, 100% { transform: translateX(34cqw) scale(2.2); opacity: 0; } }
.sf-stop { position: absolute; left: 40%; top: 62%; display: inline-flex; align-items: center; gap: 1cqw; padding: .8cqw 1.8cqw; border-radius: 1.4cqw; font-size: 2.2cqw; color: #ff8b9c; background: rgba(255, 100, 120, .14); }
.sf.is-live .sf-stop { animation: sf-pop 4.5s ease-in-out 1.1s infinite; }
@keyframes sf-pop { 0%, 38% { opacity: 0; transform: translateY(1cqw); } 45%, 80% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }

/* 03 constellation */
.sf-map svg { position: absolute; inset: 6%; width: 88%; height: 88%; overflow: visible; }
.sf-orbits ellipse { fill: none; stroke: rgba(124, 188, 255, .14); stroke-dasharray: 3 5; }
.sf-links path { stroke: rgba(124, 188, 255, .45); stroke-width: 1.4; fill: none; stroke-dasharray: 1; }
.sf.is-live .sf-links path { animation: sf-draw 1.2s ease-out both; }
.sf.is-live .sf-links path:nth-child(2) { animation-delay: .2s; }
.sf.is-live .sf-links path:nth-child(3) { animation-delay: .4s; }
.sf.is-live .sf-links path:nth-child(4) { animation-delay: .6s; }
.sf.is-live .sf-links path:nth-child(5) { animation-delay: .8s; }
.sf-core { fill: #1a6ade; stroke: #9bd0ff; stroke-width: 2; filter: drop-shadow(0 0 8px rgba(61, 157, 255, .7)); }
.sf-sites circle { fill: #0b1018; stroke: #2ecf9a; stroke-width: 2.4; }
.sf-sites circle.is-warn { stroke: #edb339; animation: pr-pulse 1.8s ease-in-out infinite; }
.sf-label { position: absolute; display: inline-flex; align-items: center; gap: .9cqw; padding: .7cqw 1.4cqw; border-radius: 1.2cqw; font-size: 2.1cqw; background: rgba(11, 16, 24, .92); border: 1px solid rgba(255, 255, 255, .12); white-space: nowrap; }
.sf-label i { color: var(--primary-2); }
.sf-label.is-warn i { color: #edb339; }

/* 04 bandwidth */
.sf-chart svg { width: 100%; height: 62%; }
.sf-area.a1 { fill: rgba(61, 157, 255, .14); }
.sf-trace { fill: none; stroke-width: 2.2; stroke-dasharray: 1; vector-effect: non-scaling-stroke; }
.sf-trace.t1 { stroke: #3d9dff; } .sf-trace.t2 { stroke: #2ecf9a; } .sf-trace.t3 { stroke: #edb339; }
.sf.is-live .sf-trace { animation: sf-draw 2s ease-out both; }
.sf.is-live .sf-trace.t2 { animation-delay: .3s; }
.sf.is-live .sf-trace.t3 { animation-delay: .6s; }
.sf-legend { display: flex; align-items: center; gap: 1.2cqw; margin-top: 2cqw; font-size: 2.1cqw; color: var(--ink-muted); }
.sf-legend i { display: inline-block; width: 2.6cqw; height: .6cqw; border-radius: 1cqw; margin-left: 1.6cqw; }
.sf-legend .l1 { background: #3d9dff; margin-left: 0; } .sf-legend .l2 { background: #2ecf9a; } .sf-legend .l3 { background: #edb339; }

/* 05 registers */
.sf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqw; }
.sf-grid span { padding: 1.8cqw 1.4cqw; border-radius: 1.2cqw; font-size: 2.1cqw; color: var(--ink); border: 1px solid rgba(46, 207, 154, .38); background: rgba(46, 207, 154, .1); }
.sf.is-live .sf-grid span { animation: sf-cell 5s ease-in-out infinite; }
.sf-grid span:nth-child(3n+2) { animation-delay: .5s !important; }
.sf-grid span:nth-child(3n) { animation-delay: 1s !important; }
@keyframes sf-cell { 0% { border-color: rgba(237, 179, 57, .45); background: rgba(237, 179, 57, .1); } 25%, 100% { border-color: rgba(46, 207, 154, .38); background: rgba(46, 207, 154, .1); } }
.sf-meter { display: block; height: 1.2cqw; margin-top: 4cqw; border-radius: 1cqw; background: rgba(150, 185, 235, .14); overflow: hidden; }
.sf-meter i { display: block; width: 86%; height: 100%; background: linear-gradient(90deg, #3d9dff, #2ecf9a); transform-origin: left; }
.sf.is-live .sf-meter i { animation: sf-grow-x 2s cubic-bezier(.22, .68, .3, 1) .4s both; }
@keyframes sf-grow-x { from { transform: scaleX(.3); } }
.sf-meter-cap { display: block; margin-top: 1.4cqw; font-size: 2.2cqw; color: var(--ink-muted); }
.sf-meter-cap b { color: var(--ink); font-family: var(--f-display); }

/* 06 incident clock */
.sf-track { position: relative; height: 1.6cqw; margin: 8cqw 2cqw 13cqw; border-radius: 1cqw; background: rgba(150, 185, 235, .14); }
.sf-progress { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; border-radius: 1cqw; background: linear-gradient(90deg, #ff6478, #edb339); transform-origin: left; }
.sf.is-live .sf-progress { animation: sf-grow-x 3s cubic-bezier(.22, .68, .3, 1) .5s both; }
.sf-mark { position: absolute; top: 2.6cqw; display: flex; flex-direction: column; transform: translateX(-50%); text-align: center; }
.sf-mark::before { content: ""; position: absolute; left: 50%; top: -3.6cqw; width: 2.2cqw; height: 2.2cqw; margin-left: -1.1cqw; border-radius: 50%; background: #0b1018; border: .4cqw solid var(--primary-2); }
.sf-mark b { font-family: var(--f-display); font-size: 3cqw; }
.sf-mark em { font-style: normal; font-size: 1.9cqw; color: var(--ink-faint); }
.sf-mark.m1 { left: 12%; } .sf-mark.m1::before { border-color: #ff6478; }
.sf-mark.m2 { left: 40%; } .sf-mark.m2::before { border-color: #edb339; }
.sf-mark.m3 { left: 88%; } .sf-mark.m3::before { border-color: #2ecf9a; }
.sf-draft { display: flex; align-items: center; gap: 2cqw; padding: 2.4cqw; border-radius: 1.8cqw; border: 1px solid rgba(61, 157, 255, .35); background: rgba(61, 157, 255, .08); }
.sf-draft > i { font-size: 4.6cqw; color: var(--primary-2); }
.sf-draft span { display: flex; flex-direction: column; }
.sf-draft b { font-size: 2.6cqw; }
.sf-draft em { font-style: normal; font-size: 2cqw; color: var(--ink-faint); }
.sf-btn { margin-left: auto; padding: 1cqw 2cqw; border-radius: 1.2cqw; background: var(--primary); color: #06101f; font-weight: 600; font-size: 2.2cqw; }
.sf.is-live .sf-draft { animation: sf-rise .8s cubic-bezier(.22, .68, .3, 1) 1.6s both; }
@keyframes sf-rise { from { opacity: 0; transform: translate3d(0, 3cqw, 0); } }

/* 07 backups */
.sf-job { display: grid; grid-template-columns: 30% 1fr 14%; align-items: center; gap: 2cqw; padding: 1.4cqw 0; font-size: 2.3cqw; border-bottom: 1px solid rgba(150, 190, 245, .08); }
.sf-job em { font-style: normal; color: var(--ink-muted); }
.sf-job i { display: block; height: 1cqw; width: var(--w); border-radius: 1cqw; background: #2ecf9a; transform-origin: left; }
.sf-job b { font-weight: 500; text-align: right; color: var(--ink-muted); font-size: 2.1cqw; }
.sf-job.is-warn i { background: #edb339; }
.sf-job.is-warn b { color: #f0c46b; }
.sf.is-live .sf-job i { animation: sf-grow-x 1.6s cubic-bezier(.22, .68, .3, 1) both; }
.sf.is-live .sf-job:nth-of-type(2) i { animation-delay: .25s; }
.sf.is-live .sf-job:nth-of-type(3) i { animation-delay: .5s; }
.sf.is-live .sf-job:nth-of-type(4) i { animation-delay: .75s; }
.sf-vault { display: inline-flex; align-items: center; gap: 1.2cqw; margin-top: 3cqw; padding: 1.2cqw 2cqw; border-radius: 1.4cqw; font-size: 2.3cqw; color: #5fe0b3; background: rgba(46, 207, 154, .12); }
.sf-vault em { font-style: normal; color: var(--ink-faint); }

/* 08 vCISO */
.sf-chat { display: flex; flex-direction: column; gap: 2.4cqw; }
.sf-msg { max-width: 80%; padding: 2cqw 2.6cqw; border-radius: 2.4cqw 2.4cqw 2.4cqw .6cqw; font-size: 2.4cqw; line-height: 1.4; background: #16233a; }
.sf-msg.is-me { align-self: flex-end; border-radius: 2.4cqw 2.4cqw .6cqw 2.4cqw; background: #1a4fb3; }
.sf.is-live .sf-msg { animation: sf-rise .7s cubic-bezier(.22, .68, .3, 1) both; }
.sf.is-live .sf-msg:not(.is-me) { animation-delay: 1.1s; }
.sf-status { align-self: flex-start; display: inline-flex; align-items: center; gap: 1cqw; padding: 1cqw 2cqw; border-radius: 999px; font-size: 2.2cqw; color: #5fe0b3; background: rgba(46, 207, 154, .12); }
.sf.is-live .sf-status { animation: sf-rise .6s ease 1.9s both; }

@media (prefers-reduced-motion: reduce) {
    .sf *, .sf-screen, .sf-stack { animation: none !important; transition: none !important; }
}