@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    --bg:#050607;
    --panel:#0a0c0e;
    --panel2:#0d1013;
    --text:#f2f4f5;
    --muted:#8a9299;
    --red:#ff2638;
    --cyan:#39e7ff;
    --green:#64ff9a;
    --line:#20262b;
    --mono:'IBM Plex Mono',monospace;
    --sans:'Inter',sans-serif
}


* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

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

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

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

.scanline {
    position:fixed;
    left:0;
    right:0;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--red),transparent);
    opacity:.12;
    z-index:49;
    animation:scan 9s linear infinite;
    pointer-events:none
}

@keyframes scan {
    from {
        top:-1%
    }

    to {
        top:101%
    }


}


.site-header {
    height:76px;
    position:fixed;
    z-index:40;
    top:0;
    left:0;
    right:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 4vw;
    background:linear-gradient(#050607ef,#050607a8,transparent);
    border-top:2px solid var(--red)
}

.brand {
    font-weight:900;
    font-size:25px;
    letter-spacing:-1px;
    display:flex;
    align-items:baseline
}

.brand:before {
    content:"";
    display:block;
    flex:none;
    align-self:center;
    width:40px;
    height:40px;
    margin-right:9px;
    background:url('/assets/w1sys-shield.png') center/contain no-repeat;
    filter:drop-shadow(0 0 7px #00cfff85)
}

.brand-mark {
    color:var(--red)
}

.brand small {
    font:500 9px var(--mono);
    letter-spacing:2px;
    color:#798087;
    margin-left:9px
}

.site-header nav {
    display:flex;
    align-items:center;
    gap:26px;
    font:500 11px var(--mono);
    letter-spacing:1px;
    color:#a8afb5
}

.site-header nav a:hover {
    color:white
}

.nav-cta {
    border:1px solid #8d1722;
    padding:12px 16px;
    color:#fff!important;
    background:#19080a
}

.nav-toggle {
    display:none;
    background:none;
    border:0;
    color:white;
    font-size:25px
}


.hero {
    min-height:calc(100svh - 44px);
    position:relative;
    display:flex;
    align-items:center;
    padding:104px 8vw 54px;
    overflow:hidden;
    border-bottom:1px solid var(--line)
}

.hero:before {
    content:"";
    position:absolute;
    z-index:1;
    width:min(21vw,330px);
    aspect-ratio:1;
    top:50%;
    right:11vw;
    transform:translateY(-50%);
    background:url('/assets/w1sys-shield.png') center/contain no-repeat;
    filter:drop-shadow(0 0 20px #00aaff44);
    opacity:.78;
    pointer-events:none
}

canvas#network {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:.72;
    filter:brightness(1.35)
}

.hero-grid {
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(circle at 75% 49%,transparent 0 220px,#39e7ff20 221px,transparent 223px),
        radial-gradient(circle at 75% 49%,transparent 0 315px,#39e7ff14 316px,transparent 318px),
        radial-gradient(circle at 59% 29%,#39e7ff80 0 2px,transparent 4px),
        radial-gradient(circle at 94% 35%,#39e7ff70 0 2px,transparent 4px),
        radial-gradient(circle at 62% 72%,#ff263880 0 2px,transparent 4px),
        linear-gradient(#39e7ff0d 1px,transparent 1px),
        linear-gradient(90deg,#39e7ff0d 1px,transparent 1px);
    background-size:auto,auto,auto,auto,auto,72px 72px,72px 72px;
    mask-image:linear-gradient(90deg,transparent 35%,#000 66%)
}

.hero:after {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 72% 48%,#ff263820,transparent 31%),linear-gradient(90deg,#050607 0%,#050607ad 39%,transparent 69%);
    pointer-events:none
}

.hero-content {
    z-index:3;
    position:relative;
    max-width:760px
}

.eyebrow,.kicker {
    font:600 12px var(--mono);
    letter-spacing:3px;
    color:var(--red);
    margin-bottom:22px
}

.hero h1 {
    font-size:clamp(64px,min(7vw,12vh),120px);
    line-height:.84;
    letter-spacing:-.075em;
    margin:0;
    text-transform:uppercase;
    font-weight:900
}

.hero h1 em {
    font-style:normal;
    color:#08090a;
    -webkit-text-stroke:1.5px var(--red);
    text-shadow:0 0 1px #ff2638,0 0 22px rgba(255,38,56,.18);
    paint-order:stroke fill
}

.hero p {
    max-width:660px;
    color:#b3bac0;
    font-size:18px;
    line-height:1.7;
    margin:30px 0 26px
}

.actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap
}

.btn {
    font:600 11px var(--mono);
    letter-spacing:1px;
    padding:16px 20px;
    border:1px solid #343a3f;
    display:inline-flex;
    gap:18px;
    align-items:center;
    transition:.25s
}

.btn:hover {
    transform:translateY(-2px);
    border-color:#747b80
}

.btn.primary {
    background:var(--red);
    border-color:var(--red);
    color:white;
    box-shadow:0 0 30px #ff263820
}

.btn.primary:hover {
    background:#ff4050;
    box-shadow:0 0 45px #ff26383b
}

.btn.ghost {
    background:#080a0caa
}

.btn.big {
    padding:20px 26px
}

.hud {
    position:absolute;
    z-index:4;
    font:500 9px var(--mono);
    letter-spacing:1.5px;
    color:#626b72;
    display:flex;
    flex-direction:column;
    gap:7px
}

.hud b {
    color:var(--green);
    font-weight:500
}

.hud-left {
    left:3vw;
    bottom:22px
}

.hud-right {
    right:3vw;
    top:18vh;
    text-align:right
}

.scroll-cue {
    position:absolute;
    z-index:4;
    bottom:30px;
    right:8vw;
    font:500 9px var(--mono);
    letter-spacing:2px;
    color:#5f676d;
    display:flex;
    align-items:center;
    gap:14px
}

.scroll-cue i {
    width:70px;
    height:1px;
    background:#343a3f;
    position:relative;
    overflow:hidden
}

.scroll-cue i:after {
    content:"";
    position:absolute;
    width:20px;
    height:1px;
    background:var(--red);
    animation:cue 2s infinite
}

@keyframes cue {
    from {
        left:-20px
    }

    to {
        left:70px
    }


}


.marquee {
    overflow:hidden;
    border-bottom:1px solid var(--line);
    padding:14px 0;
    color:#70777c;
    background:#080a0b;
    font:500 10px var(--mono);
    letter-spacing:2px;
    white-space:nowrap
}

.marquee div {
    display:inline-block;
    animation:marquee 26s linear infinite
}

@keyframes marquee {
    to {
        transform:translateX(-50%)
    }


}


.section {
    padding:120px 8vw;
    border-bottom:1px solid var(--line)
}

.split,.engineering {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:8vw;
    align-items:center
}

.section h2,.products-section h2,.final-cta h2 {
    font-size:clamp(42px,5vw,80px);
    line-height:.95;
    letter-spacing:-.055em;
    margin:0 0 28px;
    font-weight:900
}

.section h2 span,.products-section h2 span,.final-cta h2 span {
    color:var(--red)
}

.section-copy p,.section-head p,.terminal-copy p {
    font-size:16px;
    line-height:1.8;
    color:#adb5bb;
    max-width:650px
}

.text-link {
    display:inline-block;
    margin-top:20px;
    font:600 11px var(--mono);
    letter-spacing:1px;
    color:#d9dcdf;
    border-bottom:1px solid var(--red);
    padding-bottom:7px
}

.topology {
    background:linear-gradient(145deg,#0c0f12,#070809);
    border:1px solid #242a2f;
    position:relative;
    padding:22px;
    box-shadow:0 25px 80px #000
}

.topo-label {
    font:500 10px var(--mono);
    color:#667078;
    letter-spacing:2px
}

.topology svg {
    width:100%;
    overflow:visible
}

.links path {
    stroke:#343c42;
    stroke-width:1;
    fill:none;
    stroke-dasharray:5 8;
    animation:dash 15s linear infinite
}

@keyframes dash {
    to {
        stroke-dashoffset:-150
    }


}

.nodes circle {
    fill:#0d1114;
    stroke:#8b969d;
    stroke-width:1
}

.nodes text {
    fill:#7f8990;
    text-anchor:middle;
    font:500 10px var(--mono);
    letter-spacing:1px
}

.nodes .warn circle {
    stroke:var(--red);
    filter:drop-shadow(0 0 9px #ff2638)
}

.topo-status {
    border-top:1px solid #242a2f;
    padding-top:15px;
    display:flex;
    justify-content:space-between;
    font:500 9px var(--mono);
    color:#687179
}

.topo-status b {
    color:var(--green);
    font-weight:500
}


.terminal-section {
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:7vw;
    align-items:center;
    background:radial-gradient(circle at 20% 50%,#10211940,transparent 32%)
}

.terminal {
    border:1px solid #28312d;
    background:#050807;
    box-shadow:0 30px 100px #000;
    min-height:560px;
    position:relative
}

.terminal-bar {
    height:48px;
    border-bottom:1px solid #252d29;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 18px;
    font:500 9px var(--mono);
    letter-spacing:1px;
    color:#536159
}

.terminal-bar b {
    color:#7c8c82
}

.terminal pre {
    padding:26px;
    color:#8dffb2;
    font:14px/1.75 var(--mono);
    white-space:pre-wrap;
    margin:0;
    text-shadow:0 0 10px #64ff9a35
}

.demo-note {
    position:absolute;
    bottom:14px;
    right:18px;
    font:500 8px var(--mono);
    letter-spacing:1px;
    color:#4f5954
}


.ops {
    background:#070809
}

.section-head {
    max-width:1000px;
    margin-bottom:60px
}

.module-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line);
    border-left:1px solid var(--line)
}

.module {
    min-height:300px;
    padding:32px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    position:relative;
    background:#080a0b;
    transition:.3s;
    overflow:hidden
}

.module:after {
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:2px;
    background:var(--red);
    transition:.35s
}

.module:hover {
    background:#0d0f11;
    transform:translateY(-3px);
    box-shadow:0 20px 45px #000
}

.module:hover:after {
    width:100%
}

.module i {
    font:500 11px var(--mono);
    color:var(--red);
    font-style:normal
}

.module small {
    float:right;
    font:500 8px var(--mono);
    color:#515a60;
    letter-spacing:1px
}

.module h3 {
    font:700 clamp(18px,2vw,27px) var(--mono);
    margin:58px 0 20px;
    letter-spacing:-1px
}

.module p {
    color:#aab2b8;
    font-size:14px;
    line-height:1.7
}

.module code {
    position:absolute;
    bottom:25px;
    color:#59635e;
    font:500 9px var(--mono)
}


.products-section {
    padding:120px 8vw;
    background:linear-gradient(#050607,#090a0c)
}

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

.product-card {
    min-height:390px;
    border:1px solid #252a2e;
    padding:30px;
    background:linear-gradient(145deg,#0d1012,#070809);
    position:relative;
    transition:.3s;
    overflow:hidden
}

.product-card:before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,transparent 60%,#ff263808);
    transition:.3s
}

.product-card:hover {
    border-color:#69303a;
    transform:translateY(-5px);
    box-shadow:0 25px 60px #000
}

.product-meta {
    font:500 9px var(--mono);
    letter-spacing:1px;
    color:#596168;
    display:flex;
    justify-content:space-between
}

.product-meta b {
    color:var(--green);
    font-weight:500
}

.product-card h3 {
    font-size:42px;
    letter-spacing:-3px;
    margin:95px 0 20px
}

.product-card h3 span {
    color:var(--red)
}

.product-card p {
    color:#aab2b8;
    line-height:1.7;
    font-size:14px
}

.product-card>div:last-child {
    position:absolute;
    bottom:30px;
    font:600 10px var(--mono);
    letter-spacing:1px
}


.skill-cloud {
    display:flex;
    flex-wrap:wrap;
    gap:10px
}

.skill-cloud span {
    border:1px solid #272d31;
    padding:15px 18px;
    background:#090b0d;
    font:500 10px var(--mono);
    letter-spacing:1px;
    color:#8b9399
}

.skill-cloud span:nth-child(3n) {
    border-color:#53222a;
    color:#c6c9cb
}


.final-cta {
    min-height:72vh;
    padding:120px 8vw;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    position:relative;
    overflow:hidden
}

.final-cta>div {
    position:relative;
    z-index:2
}

.final-cta .kicker {
    margin-bottom:30px
}

.final-cta .prompt {
    font:500 11px var(--mono);
    color:#5c666d;
    margin-top:55px
}

.final-cta .prompt b {
    color:var(--green);
    animation:blink 1s steps(1) infinite
}

@keyframes blink {
    50% {
        opacity:0
    }


}

#radar {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:.3
}


.site-footer {
    padding:45px 8vw;
    border-top:1px solid var(--line);
    font:500 10px var(--mono);
    letter-spacing:1px;
    color:#6b7379;
    display:grid;
    grid-template-columns:1fr auto;
    gap:20px
}

.site-footer strong {
    color:white;
    font-size:16px
}

.footer-links {
    display:flex;
    gap:25px
}

.site-footer .muted {
    grid-column:1/-1;
    color:#3e454a
}


.reveal {
    opacity:0;
    transform:translateY(22px);
    transition:opacity .7s ease,transform .7s ease
}

.reveal.visible {
    opacity:1;
    transform:none
}



/* interior pages */
.page-hero {
    padding:180px 8vw 90px;
    border-bottom:1px solid var(--line);
    background:radial-gradient(circle at 80% 30%,#ff263815,transparent 25%)
}

.page-hero h1 {
    font-size:clamp(55px,8vw,120px);
    line-height:.85;
    letter-spacing:-.07em;
    margin:0;
    max-width:1100px
}

.page-hero h1 span {
    color:var(--red)
}

.page-hero p {
    max-width:700px;
    color:#b0b8be;
    line-height:1.8;
    margin-top:30px
}

.content-grid {
    padding:90px 8vw;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1px;
    background:var(--line)
}

.content-block {
    background:var(--bg);
    padding:55px;
    min-height:320px
}

.content-block .num {
    font:500 10px var(--mono);
    color:var(--red)
}

.content-block h2 {
    font:700 25px var(--mono);
    margin:45px 0 20px
}

.content-block p,.content-block li {
    color:#abb4ba;
    line-height:1.8;
    font-size:14px
}

.contact-wrap {
    padding:80px 8vw;
    display:grid;
    grid-template-columns:.75fr 1.25fr;
    gap:7vw
}

.contact-form {
    display:grid;
    gap:14px
}

.contact-form label {
    font:500 10px var(--mono);
    letter-spacing:1px;
    color:#8a9298
}

.contact-form input,.contact-form textarea,.contact-form select {
    width:100%;
    background:#090b0d;
    border:1px solid #292f33;
    color:white;
    padding:15px;
    font:14px var(--sans);
    outline:none
}

.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus {
    border-color:var(--red)
}

/* Clear keyboard focus and larger click targets throughout the site. */
:where(a,button,input,select,textarea):focus-visible {
    outline:2px solid var(--cyan);
    outline-offset:4px
}

.site-header nav a:not(.nav-cta) {
    padding-block:12px
}

.nav-cta:hover {
    border-color:var(--red);
    background:#351014
}

.page-hero h1,.section h2,.products-section h2,.final-cta h2 {
    overflow-wrap:break-word
}

.content-block {
    transition:background .2s ease
}

.content-block:hover {
    background:#0c1013
}

@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto }
    .reveal { opacity:1; transform:none }
    .scanline,.scroll-cue i:after,.marquee div,.links path,.final-cta .prompt b { animation:none }
    .btn,.module,.product-card,.content-block { transition:none }
}

.contact-form textarea {
    min-height:150px;
    resize:vertical
}

.form-status {
    font:500 10px var(--mono);
    color:var(--green)
}



@media(max-width:900px) {
    .hero-grid { opacity:.45 }
    canvas#network { opacity:.55 }
    .hero:before {
        right:-10vw;
        width:55vw;
        opacity:.28
    }
    .site-header nav {
        display:none;
        position:absolute;
        top:75px;
        left:0;
        right:0;
        background:#060708f8;
        padding:25px 4vw;
        flex-direction:column;
        align-items:flex-start;
        border-bottom:1px solid #252a2e
    }

    .site-header nav.open {
        display:flex
    }

    .site-header nav a {
        width:100%;
        padding:12px 0;
        font-size:13px
    }

    .site-header nav .nav-cta {
        width:auto;
        padding:14px 18px
    }

    .nav-toggle {
        display:block
    }

    .hero {
        padding-left:6vw;
        padding-right:6vw
    }

    .hud {
        display:none
    }

    .split,.engineering,.terminal-section,.contact-wrap {
        grid-template-columns:1fr
    }

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

    .terminal {
        min-height:510px
    }

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

    .footer-links {
        flex-wrap:wrap
    }

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


}


@media(max-width:600px) {
    .brand:before {
        width:34px;
        height:34px;
        margin-right:7px
    }

    .hero:before {
        width:72vw;
        right:-26vw;
        top:45%;
        opacity:.17
    }
    .brand small {
        display:none
    }

    .hero h1 {
        font-size:clamp(48px,13.2vw,68px);
        line-height:.88
    }

    .hero {
        min-height:calc(100svh - 44px);
        padding:105px 6vw 48px
    }

    .hero p {
        margin:28px 0;
        line-height:1.55
    }

    .hero .btn {
        justify-content:center;
        min-height:48px
    }

    .scroll-cue { display:none }

    .page-hero h1 {
        font-size:clamp(42px,11vw,64px);
        line-height:.92
    }

    .page-hero p { font-size:15px; line-height:1.65 }

    .section h2,.products-section h2,.final-cta h2 {
        font-size:clamp(38px,10vw,58px)
    }

    .hero p {
        font-size:15px
    }

    .section,.products-section {
        padding:85px 6vw
    }

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

    .module {
        min-height:260px
    }

    .terminal pre {
        font-size:11px
    }

    .topo-status {
        gap:8px;
        flex-wrap:wrap
    }

    .page-hero {
        padding:145px 6vw 70px
    }

    .content-grid {
        padding:1px
    }

    .content-block {
        padding:40px 6vw
    }

    .contact-wrap {
        padding:60px 6vw
    }

    .site-footer {
        padding:40px 6vw
    }


}


/* ============================================================
   W1SYS HOMEPAGE REFINEMENT // 2026-09-27
   ============================================================ */

/* Hero: keep the first frame dense, readable and conversion-focused. */
.hero-content{width:min(760px,62vw)}
.hero-proof{display:flex;align-items:center;gap:11px;margin-top:22px;font:600 9px var(--mono);letter-spacing:1.7px;color:#77828a}
.hero-proof i{font-style:normal;color:var(--red);opacity:.8}
.hero-proof span{white-space:nowrap}

/* Right-side defensive console. Decorative interface; not presented as live monitoring. */
.hero-console{position:absolute;z-index:5;right:4vw;top:17vh;width:min(305px,25vw);border:1px solid #273238;background:linear-gradient(145deg,#090d10e8,#050708d9);box-shadow:0 24px 70px #0009,0 0 40px #39e7ff0b;backdrop-filter:blur(7px);font-family:var(--mono);overflow:hidden}
.hero-console:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#39e7ff08,transparent);transform:translateX(-100%);animation:consoleSweep 6s linear infinite;pointer-events:none}
@keyframes consoleSweep{to{transform:translateX(100%)}}
.hero-console-head{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid #253037;color:#75818a;font-size:8px;letter-spacing:1.2px}
.hero-console-head b{color:#8fdfff;font-weight:600}
.hero-console-status{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:13px 14px;border-bottom:1px solid #182126;font-size:9px;letter-spacing:1px;color:#8a969e}
.hero-console-status i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px #64ff9a}
.hero-console-status strong{color:var(--green);font-size:8px}
.hero-console-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;border-bottom:1px solid #141c20;font-size:8px;letter-spacing:.8px;color:#77838b}
.hero-console-row b{color:#d5dde2;font-size:8px}
.hero-console-feed{display:flex;flex-direction:column;gap:6px;padding:13px 14px;color:#4fcae0;font-size:8px;letter-spacing:.5px;line-height:1.45;background:#06090bbd}

/* Seamless marquee: animate the track only, never each nested div. */
.marquee{height:44px;padding:0;display:flex;align-items:center;position:relative;z-index:8}
.marquee div{animation:none}
.marquee-track{display:flex;flex:none;width:max-content;will-change:transform;animation:marquee 30s linear infinite!important}
.marquee-content{display:flex;flex:none;align-items:center;gap:28px;padding-right:28px}
.marquee-content span{display:inline-block}
.marquee-content i{font-style:normal;color:var(--red);opacity:.65}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Fast credibility / scope read directly under the marquee. */
.trust-strip{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#07090a,#050607);padding:34px 8vw 38px}
.trust-intro{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:20px}
.trust-intro span{font:600 9px var(--mono);letter-spacing:1.8px;color:var(--red)}
.trust-intro b{max-width:580px;text-align:right;font:600 12px/1.5 var(--mono);letter-spacing:.8px;color:#9aa5ac}
.trust-grid{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid #252d32;border-left:1px solid #252d32}
.trust-grid>div{min-height:86px;padding:17px;border-right:1px solid #252d32;border-bottom:1px solid #252d32;background:#080a0b;display:flex;flex-direction:column;justify-content:space-between;transition:.2s}
.trust-grid>div:hover{background:#0b1013;border-color:#344149}
.trust-grid small{font:500 8px var(--mono);color:#59656c}
.trust-grid strong{font:700 10px var(--mono);letter-spacing:1.2px;color:#d7dde1}

/* Incident response lead section. */
.incident-section{padding:115px 8vw;border-bottom:1px solid var(--line);background:radial-gradient(circle at 15% 40%,#2d080d70,transparent 31%),linear-gradient(180deg,#070809,#050607)}
.incident-shell{display:grid;grid-template-columns:1.05fr .95fr;gap:7vw;align-items:center}
.incident-copy h2{font-size:clamp(44px,5vw,82px);line-height:.91;letter-spacing:-.055em;margin:0 0 28px;font-weight:900}
.incident-copy h2 span{color:var(--red)}
.incident-copy p{max-width:700px;color:#adb5bb;font-size:16px;line-height:1.8}
.incident-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.incident-panel{border:1px solid #34252a;background:#08090b;box-shadow:0 30px 90px #000;position:relative;overflow:hidden}
.incident-panel:after{content:"";position:absolute;inset:auto -20% 0;height:1px;background:linear-gradient(90deg,transparent,var(--red),transparent);animation:incidentScan 4.5s linear infinite}
@keyframes incidentScan{from{transform:translateX(-45%)}to{transform:translateX(45%)}}
.incident-panel-head{display:flex;justify-content:space-between;padding:15px 18px;border-bottom:1px solid #2b2023;font:500 9px var(--mono);letter-spacing:1.2px;color:#6d777d}
.incident-panel-head b{color:var(--red)}
.incident-panel ul{list-style:none;margin:0;padding:0}
.incident-panel li{display:grid;grid-template-columns:48px 1fr;align-items:center;border-bottom:1px solid #201a1c;min-height:58px}
.incident-panel li i{font:500 9px var(--mono);font-style:normal;color:var(--red);text-align:center}
.incident-panel li span{font:600 10px var(--mono);letter-spacing:.8px;color:#c2c9cd}
.incident-note{padding:15px 18px;font:500 8px/1.55 var(--mono);letter-spacing:.7px;color:#737c82;background:#0b090a}

.final-copy{max-width:620px;margin:0 auto 30px;color:#aab2b8;font-size:16px;line-height:1.75}

/* Subtle premium refinements. */
.btn{position:relative;overflow:hidden}
.btn:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,#ffffff16 50%,transparent 65%);transform:translateX(-140%);transition:transform .6s ease}
.btn:hover:after{transform:translateX(140%)}
.module,.product-card,.topology,.terminal,.incident-panel{isolation:isolate}

@media(max-width:1180px){
 .hero-console{width:255px;right:3vw}
 .hero:before{right:9vw;opacity:.58}
 .hero-content{width:min(700px,64vw)}
 .trust-grid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:900px){
 .hero-console{display:none}
 .hero-content{width:100%;max-width:720px}
 .hero:before{width:44vw!important;right:-5vw!important;opacity:.20!important}
 .trust-intro{align-items:flex-start;flex-direction:column}
 .trust-intro b{text-align:left}
 .incident-shell{grid-template-columns:1fr;gap:45px}
}

@media(max-width:600px){
 .hero{padding-top:94px!important;padding-bottom:38px!important}
 .hero-proof{margin-top:18px;gap:8px;font-size:8px;letter-spacing:1.1px;flex-wrap:wrap}
 .marquee{height:42px}
 .marquee-content{gap:22px;padding-right:22px}
 .trust-strip{padding:28px 6vw 30px}
 .trust-grid{grid-template-columns:repeat(2,1fr)}
 .trust-grid>div{min-height:74px;padding:14px}
 .incident-section{padding:82px 6vw}
 .incident-copy h2{font-size:clamp(40px,11vw,58px)}
 .incident-copy p{font-size:15px;line-height:1.65}
 .incident-actions .btn{width:100%;justify-content:center}
 .incident-panel li{grid-template-columns:42px 1fr}
 .final-copy{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
 .hero-console:before,.incident-panel:after{animation:none}
 .marquee-track{animation:none!important}
}

/* ============================================================
   HERO LOGO / CONSOLE COMPOSITION FIX // 2026-09-27
   Keep the shield readable instead of burying it behind the console.
   ============================================================ */
@media(min-width:1181px){
  .hero:before{
    width:min(24vw,410px);
    right:calc(4vw + min(305px,25vw) + 22px);
    opacity:.82;
    filter:drop-shadow(0 0 24px #00aaff66) drop-shadow(0 0 55px #00d9ff1f)
  }
  .hero-console{
    right:4vw;
    top:clamp(205px,28vh,285px);
  }
}

@media(min-width:901px) and (max-width:1180px){
  .hero:before{
    width:min(25vw,360px);
    right:calc(3vw + 255px + 18px);
    opacity:.68;
  }
  .hero-console{
    top:clamp(200px,27vh,265px);
  }
}

/* Keep the console legible and the product cards concise. */
.hero-console-head,.hero-console-status,.hero-console-status strong{font-size:10px}
.hero-console-row,.hero-console-row b{font-size:10.5px}
.hero-console-feed{font-size:10px}
.hero-console-row{padding-block:11px}
.product-card{min-height:350px}
.product-card h3{margin-top:72px}

/* Sales journey additions */
.hero-price{display:inline-flex;gap:12px;margin-top:12px;color:#8ee6f0;font:600 10px var(--mono);letter-spacing:1.2px;text-decoration:none}
.hero-price:hover{color:#fff}
.offer-section,.service-section,.pricing-section,.audience-section{padding:105px 8vw;position:relative}
.offer-section{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:6vw;align-items:center;background:#0b0e11;border-bottom:1px solid #20272d}
.offer-copy h2,.service-section h2,.pricing-section h2,.audience-section h2{font-size:clamp(36px,4vw,72px);line-height:1.04;letter-spacing:-.045em;margin:15px 0 22px}
.offer-copy h2 span,.service-section h2 span,.pricing-section h2 span,.audience-section h2 span{color:var(--red)}
.offer-copy p,.section-head p{max-width:690px;color:#a2abb1;line-height:1.75}
.offer-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin:30px 0 14px}
.offer-actions strong{font:700 24px var(--mono);color:#e8f6f7}.offer-copy small,.pricing-note{color:#828e95;line-height:1.6}
.check-panel,.assessment-report{border:1px solid #2b3940;background:linear-gradient(135deg,#11191d,#080b0e);padding:28px;box-shadow:0 24px 70px #0007}
.panel-top,.assessment-report>span{display:flex;justify-content:space-between;color:#81d9eb;font:600 11px var(--mono);letter-spacing:1px;padding-bottom:18px;border-bottom:1px solid #29343a}
.check-panel ul,.service-card ul,.price-card ul{list-style:none;padding:0;margin:20px 0}.check-panel li,.service-card li,.price-card li{padding:11px 0;border-bottom:1px solid #253037;color:#c0cbd0}.check-panel li:before,.service-card li:before,.price-card li:before{content:'+';color:var(--red);margin-right:12px}.check-panel p{color:#849197;font-size:13px;line-height:1.6}
.assessment-offer{background:#101214}.assessment-report>div{padding:18px 0;border-bottom:1px solid #29343a}.assessment-report b{color:var(--red);font:600 12px var(--mono);margin-right:18px}.assessment-report strong{color:#f2f5f6}.assessment-report p{color:#8b969d;margin:8px 0 0 36px}
.service-section,.audience-section{background:#080a0d}.service-grid,.pricing-grid,.audience-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-top:44px}.service-card,.price-card,.audience-grid>div{border:1px solid #263139;background:#101418;padding:25px;min-width:0}.service-card>span,.price-card>span,.audience-grid span{font:600 11px var(--mono);color:#64dbe9;letter-spacing:1px}.service-card h3,.audience-grid h3{font-size:23px;line-height:1.2;margin:24px 0 13px}.service-card p,.audience-grid p,.price-card p{color:#9ba7ad;line-height:1.65}.service-card li,.price-card li{font-size:13px}.service-card a{font:600 11px var(--mono);letter-spacing:.5px;color:#f2f4f5;text-decoration:none}.service-card a:hover{color:var(--red)}
.pricing-section{background:#0d1114}.pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.price-card{display:flex;flex-direction:column}.price-card.featured{border-color:#ca3137;box-shadow:0 0 45px #bb19221b}.price-card h3{font-size:48px;margin:20px 0 8px}.price-card h3 small{font:500 13px var(--mono);color:#8c9aa2}.price-card ul{flex:1}.price-card .btn{align-self:flex-start}.pricing-note{margin:22px 0 0;font-size:13px}.incident-price{color:#9aa8ae;font:12px var(--mono);margin-top:20px}.audience-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.site-footer{flex-wrap:wrap;gap:16px}.footer-links{flex-wrap:wrap;gap:14px}
@media(max-width:1100px){.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.offer-section{gap:3vw}.hero-price{max-width:60vw}}
@media(max-width:760px){.offer-section,.service-section,.pricing-section,.audience-section{padding:72px 6vw}.offer-section{grid-template-columns:1fr}.pricing-grid,.audience-grid{grid-template-columns:1fr}.service-grid{grid-template-columns:1fr 1fr}.hero-price{max-width:100%;line-height:1.5}}
@media(max-width:560px){.service-grid{grid-template-columns:1fr}.offer-copy h2,.service-section h2,.pricing-section h2,.audience-section h2{font-size:38px}.offer-actions .btn{white-space:normal}.hero-proof{line-height:1.6}.hero-price{font-size:9px}}
@media(min-width:901px) and (max-height:850px){.hero{padding-top:85px!important;padding-bottom:35px!important}.hero h1{font-size:clamp(56px,6.3vw,90px)!important}.hero p{margin-block:14px!important}.hero-proof{margin-top:12px}}
.honeypot{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;overflow:hidden!important;pointer-events:none!important}
.contact-wrap h2{font-size:clamp(34px,4vw,64px);margin:14px 0}.contact-wrap p{color:#9ca8ae;line-height:1.7}.contact-form{border:1px solid #29333a;background:#101418;padding:28px}.contact-form button{justify-self:start;cursor:pointer}.page-hero p{max-width:700px}
@media(max-width:600px){.contact-form{padding:18px}}

/* Concrete managed-security deliverables and plan terms */
.deliverables-section{padding:105px 8vw;background:#080b0d;border-top:1px solid #20272d;border-bottom:1px solid #20272d}
.deliverables-section h2{font-size:clamp(36px,4vw,72px);line-height:1.04;letter-spacing:-.045em;margin:15px 0 22px}.deliverables-section h2 span{color:var(--red)}
.deliverables-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-top:44px}.deliverable{border:1px solid #263139;background:linear-gradient(145deg,#11181c,#0c1013);padding:26px;min-width:0}.deliverable b{font:600 11px var(--mono);color:#64dbe9}.deliverable h3{font-size:22px;line-height:1.2;margin:24px 0 12px}.deliverable p{color:#9ba7ad;font-size:14px;line-height:1.7;margin:0}.deliverables-note{color:#89969d;font-size:13px;line-height:1.6;margin:22px 0 0}
.price-card li strong{color:#f0f4f5;font-weight:700}.pricing-terms{display:grid;grid-template-columns:1fr 1.4fr;gap:12px 30px;border:1px solid #29343a;background:#0b1013;padding:24px;margin-top:24px}.pricing-terms p{margin:0;color:#a3afb5;font-size:13px;line-height:1.65}.pricing-terms p:last-child{grid-column:1/-1;color:#839199}.pricing-terms strong{color:#e6f0f1}.incident-price{line-height:1.7;max-width:590px}
@media(max-width:1100px){.deliverables-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.deliverables-section{padding:72px 6vw}.pricing-terms{grid-template-columns:1fr}.pricing-terms p:last-child{grid-column:auto}}
@media(max-width:560px){.deliverables-grid{grid-template-columns:1fr}.deliverables-section h2{font-size:38px}}

/* 2026-09-30: audit fixes and clearer customer journey */
.skip-link{position:fixed;top:-100px;left:15px;z-index:10000;padding:14px 20px;background:#fff;color:#050607}.skip-link:focus{top:10px}
.site-header nav{gap:20px}.nav-language{color:var(--cyan)!important}.site-header .brand small{font-size:9px}.footer-email{color:#9ce7f0;text-decoration:none}.site-footer p{margin:8px 0;max-width:650px}
.service-card{display:flex;flex-direction:column}.service-card ul{flex:1}.service-card>a{margin-top:auto;padding-top:18px}.hero-content.reveal{opacity:1;transform:none}.hero-console-head{font-size:9px;letter-spacing:.5px}
.sample-link{display:block;margin-top:18px}.sample-link:hover,.footer-email:hover{color:#fff}
.service-section,.pricing-section,.deliverables-section,.audience-section{padding-block:76px}.offer-section{padding-block:76px}.trust-strip{padding-block:32px}
.compact-technical{padding-block:68px!important}.compact-technical h2{font-size:clamp(32px,3vw,52px)!important}.compact-products{padding-block:65px!important}.compact-products h2{font-size:clamp(30px,3vw,48px)!important}.compact-products .product-card{padding:26px}.compact-products .product-card h3{font-size:32px}.compact-technical .skill-cloud{gap:8px}.final-cta{padding-block:80px!important;min-height:0!important}
.page-hero{padding:125px 8vw 55px}.page-hero h1{font-size:clamp(38px,5vw,70px);line-height:1.08;letter-spacing:-.045em}.page-hero p{max-width:760px}.contact-hero{padding-bottom:30px}.contact-wrap{padding-top:30px;gap:5vw;grid-template-columns:.8fr 1.2fr}.contact-wrap h2{font-size:clamp(28px,3vw,44px)}.contact-form textarea{min-height:115px}.form-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-pair label{display:block;margin-bottom:8px}.contact-form small,.form-privacy{color:#96a4ab;font-size:12px;line-height:1.6}.form-privacy a{color:#90ddeb}.contact-safety{font-size:13px}.steps-list{padding-left:22px;color:#b7c2c8;line-height:1.7}.steps-list li{margin-block:14px}.contact-form button:disabled{opacity:.6;cursor:wait}
.service-details{padding:20px 8vw 70px}.service-detail{display:grid;grid-template-columns:1fr 1.1fr;gap:6vw;border-top:1px solid #2a353c;padding:45px 0;scroll-margin-top:95px}.service-detail h2{font-size:clamp(30px,3vw,45px);line-height:1.12;margin:16px 0}.service-detail h3{font-size:20px;margin:16px 0 8px}.service-detail p,.about-story p,.proof-band p,.simple-cta p,.privacy-copy p,.sample-report p{color:#a7b3ba;line-height:1.75}.service-detail .btn{margin-top:18px;white-space:normal}.about-story{display:grid;grid-template-columns:1fr 1fr;gap:6vw;padding-block:55px}.principles article{padding:20px 0;border-bottom:1px solid #29343a}.principles h3{font-size:24px;margin:0 0 8px}
.proof-band{display:flex;justify-content:space-between;align-items:center;gap:35px;padding:55px 8vw;background:#11171b;border-block:1px solid #2b363e}.proof-band h2,.simple-cta h2{font-size:clamp(28px,3vw,42px);line-height:1.15;margin:14px 0}.proof-band>div{max-width:720px}.proof-band .btn{flex-shrink:0}.simple-cta{text-align:center;padding:70px 8vw}.simple-cta p{max-width:700px;margin:20px auto}.simple-cta .btn{margin-top:20px}
.privacy-copy,.sample-report{max-width:1100px;margin:0 auto;padding:30px 8vw 80px}.privacy-copy h2{font-size:26px;margin-top:35px}.sample-report{max-width:1400px}.report-summary,.report-finding{padding:28px;border:1px solid #29363d;background:#0d1317;margin-bottom:20px}.report-summary h2{font-size:30px;line-height:1.2}.report-finding h3{font-size:25px;margin:16px 0}.severity{color:#ff6973;font:600 11px var(--mono)}.severity.medium{color:#e2bd73}.report-finding strong,.report-summary strong{color:#edf1f3}
.spanish-hero{min-height:calc(100svh - 44px)}.spanish-hero .hero-content{width:min(760px,65vw)}.spanish-hero h1{font-size:clamp(55px,7vw,100px)}
@media(max-width:1180px){.site-header nav{gap:14px}.site-header .brand small{display:none}}
@media(max-width:900px){.service-detail,.about-story{grid-template-columns:1fr;gap:20px}.proof-band{flex-direction:column;align-items:flex-start}.spanish-hero .hero-content{width:100%}.contact-wrap{grid-template-columns:1fr}}
@media(max-width:760px){.service-section,.pricing-section,.deliverables-section,.audience-section,.offer-section{padding-block:55px}.page-hero{padding:110px 6vw 35px}.service-details{padding-inline:6vw}.service-detail{padding-block:32px}.proof-band,.simple-cta{padding:45px 6vw}.contact-wrap{padding:25px 6vw 55px}.privacy-copy,.sample-report{padding:20px 6vw 55px}.compact-technical{padding-block:45px!important}.form-pair{grid-template-columns:1fr}.report-finding,.report-summary{padding:20px}.hero-console-head{font-size:8px}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}}
@media print{.site-header,.site-footer,.noise,.scanline,.skip-link,.btn{display:none!important}.sample-report,.page-hero{padding:15px;color:#111;background:#fff}.sample-report p,.sample-report strong{color:#111}.report-summary,.report-finding{background:#fff;color:#111;break-inside:avoid}.page-hero h1,.page-hero h1 span{color:#111}}

.compact-engineering{padding-top:54px;padding-bottom:54px}.compact-engineering h2{font-size:clamp(28px,3vw,42px)}

/* Homepage refinement: compact proof, clear plan scope, native accessible FAQ. */
.technical-showcase,.build-strip,.faq-section{padding:60px 8vw;border-top:1px solid #222a30}.technical-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;margin-top:28px}.technical-grid .terminal{width:100%;min-width:0}.technical-grid .terminal pre{min-height:330px;font-size:12px}.technical-grid .topology{width:100%;min-width:0}.build-strip{display:grid;grid-template-columns:1.5fr 1fr;gap:36px;align-items:center}.build-strip h2{font-size:clamp(26px,3vw,40px)}.build-links{display:grid;grid-template-columns:1fr 1fr;gap:12px}.build-links a{padding:20px;border:1px solid #29343a;color:#64dbe9;font:12px var(--mono)}.faq-section details{border-bottom:1px solid #29343a;padding:20px 0}.faq-section summary{cursor:pointer;font-size:18px;font-weight:600;color:#eef2f4}.faq-section details p{max-width:850px;color:#a3afb5;line-height:1.7}.faq-section summary:focus-visible{outline:2px solid #64dbe9;outline-offset:5px}[hidden]{display:none!important}.deliverable{padding:20px}.deliverable h3{font-size:20px;margin-top:16px}.service-section,.deliverables-section,.pricing-section,.audience-section{padding-top:58px;padding-bottom:58px}.service-card{padding:26px}.incident-section{padding-top:60px;padding-bottom:60px}
@media(max-width:800px){.technical-grid,.build-strip{grid-template-columns:1fr}.technical-showcase,.build-strip,.faq-section{padding:48px 6vw}.technical-grid .terminal pre{font-size:11px}.build-links{grid-template-columns:1fr 1fr}}

.launch-services{grid-template-columns:repeat(3,minmax(0,1fr))}.launch-deliverables{grid-template-columns:repeat(4,minmax(0,1fr))}.authority-label{display:flex;gap:12px;align-items:flex-start;font:14px/1.6 var(--sans)!important;margin:18px 0}.authority-label input{width:18px!important;height:18px;flex:0 0 18px;margin-top:3px}.incident-panel p{color:#b0bac0;line-height:1.7}.service-card h3{overflow-wrap:anywhere}.site-nav{gap:15px}section[id]{scroll-margin-top:80px}
@media(max-width:1100px){.launch-services{grid-template-columns:1fr}.launch-deliverables{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.launch-deliverables{grid-template-columns:1fr}.hero .actions .btn{white-space:normal;line-height:1.5;text-align:center}.hero h1{font-size:clamp(46px,12vw,68px)}.technical-grid pre{overflow-x:auto}}

/* Keep launch copy clear of the hero shield. */
@media(min-width:1101px){.hero .hero-content>p{max-width:min(520px,40vw)}}

/* Contact feedback distinguishes delivery failures from success. */
.form-status[data-state="error"]{color:#ffb4bc;background:#251015;border:1px solid #b83d4c;padding:14px 16px;line-height:1.55;}
.form-status[data-state="sending"]{color:#a4dbe4;}
.form-status:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;}