/* =========================================================
   YES COMPUTING — DARK TECH BRAND 2026
   Palette inspired by YES FIT reference
   ========================================================= */

:root {
    --yes-bg: #081c34;
    --yes-bg-deep: #06172b;
    --yes-bg-soft: #0d2b55;
    --yes-bg-card: #0b2442;

    --yes-blue: #71a3f2;
    --yes-blue-strong: #5b8ff5;
    --yes-cyan: #63c8ff;

    --yes-white: #f4f7fb;
    --yes-text: #dbe6f4;
    --yes-muted: #91a6bf;

    --yes-line: rgba(113,163,242,.20);
    --yes-line-soft: rgba(255,255,255,.08);

    --yes-shadow:
        0 25px 70px rgba(0,0,0,.28);

    --yes-radius: 24px;
}


/* =========================================================
   GLOBAL
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body,
.yesc-site {
    background:
        var(--yes-bg) !important;

    color:
        var(--yes-text) !important;

    font-family:
        "Heebo",
        Arial,
        sans-serif !important;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}

body {
    overflow-x: hidden;
}

.yesc-site {
    position: relative;
}


/* faint technical grid */

.yesc-site::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    opacity: .20;

    background-image:
        linear-gradient(
            rgba(113,163,242,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(113,163,242,.035) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.9),
            transparent 95%
        );

    z-index: 0;
}

.yesc-site > * {
    position: relative;
    z-index: 1;
}


/* =========================================================
   FONT / TYPOGRAPHY
   ========================================================= */

.yesc-site h1,
.yesc-site h2,
.yesc-site h3,
.yesc-site h4,
.yesc-site strong {

    font-family:
        "Heebo",
        Arial,
        sans-serif !important;

    letter-spacing:
        -.035em;
}

.yesc-site h1,
.yesc-site h2,
.yesc-site h3 {

    color:
        var(--yes-white) !important;
}

.yesc-site p {
    color:
        var(--yes-text);
}

.yesc-kicker,
.yesc-section-heading > span {

    color:
        var(--yes-blue) !important;

    font-weight:
        800;

    letter-spacing:
        .035em;
}


/* =========================================================
   HEADER
   ========================================================= */

.yesc-header {

    background:
        rgba(8,28,52,.86) !important;

    border-bottom:
        1px solid var(--yes-line-soft) !important;

    box-shadow:
        0 10px 35px rgba(0,0,0,.13);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);
}

.yesc-logo {

    color:
        var(--yes-white) !important;
}

.yesc-logo-mark {

    background:
        linear-gradient(
            135deg,
            var(--yes-blue-strong),
            var(--yes-cyan)
        ) !important;

    box-shadow:
        0 0 35px rgba(91,143,245,.28);
}

.yesc-logo-text small {

    color:
        var(--yes-muted) !important;
}

.yesc-nav a {

    color:
        #c9d6e6 !important;
}

.yesc-nav a:hover {

    color:
        var(--yes-blue) !important;
}

.yesc-header-cta {

    color:
        var(--yes-white) !important;

    background:
        rgba(113,163,242,.11) !important;

    border:
        1px solid rgba(113,163,242,.32);

    transition:
        .22s ease;
}

.yesc-header-cta:hover {

    background:
        rgba(113,163,242,.19) !important;

    border-color:
        var(--yes-blue);

    transform:
        translateY(-1px);
}


/* =========================================================
   HERO
   ========================================================= */

.yesc-hero {

    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(50,104,189,.28),
            transparent 38%
        ),
        radial-gradient(
            circle at 10% 70%,
            rgba(27,77,145,.25),
            transparent 35%
        ),
        linear-gradient(
            115deg,
            #071a31 0%,
            #081c34 46%,
            #0d2b55 100%
        ) !important;

    min-height:
        720px;
}

.yesc-hero h1 {

    font-size:
        clamp(3.3rem, 6.6vw, 6.3rem);

    line-height:
        .95;

    font-weight:
        900;

    letter-spacing:
        -.06em;

    animation:
        yesHeroText .85s
        cubic-bezier(.2,.75,.25,1)
        both;
}

.yesc-hero h1 span {

    background:
        linear-gradient(
            90deg,
            #75a9ff,
            #5b8ff5
        ) !important;

    -webkit-background-clip:
        text !important;

    background-clip:
        text !important;

    color:
        transparent !important;
}

.yesc-hero-lead {

    color:
        #b7c8dc !important;

    font-size:
        20px;

    animation:
        yesHeroText 1s
        .10s
        cubic-bezier(.2,.75,.25,1)
        both;
}


/* HERO tech glow */

.yesc-glow-one {

    background:
        rgba(91,143,245,.22) !important;

    animation:
        yesGlow 8s ease-in-out
        infinite alternate;
}

.yesc-glow-two {

    background:
        rgba(64,148,255,.18) !important;

    animation:
        yesGlow 10s ease-in-out
        infinite alternate-reverse;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.yesc-btn {

    position:
        relative;

    overflow:
        hidden;

    font-family:
        "Heebo",
        sans-serif !important;

    font-weight:
        800;

    border-radius:
        13px !important;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.yesc-btn-primary {

    background:
        linear-gradient(
            135deg,
            #5b8ff5,
            #3b78e7
        ) !important;

    box-shadow:
        0 15px 38px rgba(66,123,224,.26) !important;
}

.yesc-btn-primary::after {

    content: "";

    position:
        absolute;

    top:
        -40%;

    left:
        -70%;

    width:
        35%;

    height:
        180%;

    transform:
        rotate(24deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.28),
            transparent
        );

    transition:
        left .6s ease;
}

.yesc-btn-primary:hover::after {

    left:
        140%;
}

.yesc-btn:hover {

    transform:
        translateY(-3px);
}

.yesc-btn-ghost {

    color:
        var(--yes-white) !important;

    background:
        rgba(255,255,255,.035) !important;

    border:
        1px solid rgba(113,163,242,.28) !important;
}

.yesc-btn-ghost:hover {

    background:
        rgba(113,163,242,.10) !important;
}


/* =========================================================
   COMMAND CARD
   ========================================================= */

.yesc-command-card {

    border:
        1px solid rgba(113,163,242,.22) !important;

    background:
        linear-gradient(
            145deg,
            rgba(17,52,95,.80),
            rgba(7,27,52,.92)
        ) !important;

    box-shadow:
        0 30px 90px rgba(0,0,0,.32);

    animation:
        yesFloat 6s ease-in-out
        infinite;
}

.yesc-command-grid > div {

    background:
        rgba(113,163,242,.055) !important;

    border:
        1px solid rgba(113,163,242,.08);
}

.yesc-command-grid strong {

    color:
        var(--yes-blue) !important;
}

.yesc-score-number {

    color:
        var(--yes-white) !important;
}


/* =========================================================
   TECH STRIP
   ========================================================= */

.yesc-tech-strip {

    background:
        #091e38 !important;

    border-top:
        1px solid var(--yes-line-soft);

    border-bottom:
        1px solid var(--yes-line-soft) !important;
}

.yesc-tech-strip .yesc-shell {

    color:
        #8299b4 !important;
}


/* =========================================================
   ALL SECTIONS — DARK
   ========================================================= */

.yesc-section,
.yesc-section:nth-of-type(even),
.yesc-readiness,
.yesc-contact {

    background:
        var(--yes-bg) !important;

    color:
        var(--yes-text);
}

.yesc-section:nth-of-type(even) {

    background:
        var(--yes-bg-deep) !important;
}

.yesc-section-heading h2,
.yesc-contact-copy h2 {

    color:
        var(--yes-white) !important;
}

.yesc-section-heading p,
.yesc-contact-copy p {

    color:
        var(--yes-muted) !important;
}


/* =========================================================
   SERVICE CARDS
   ========================================================= */

.yesc-service-card {

    background:
        linear-gradient(
            145deg,
            rgba(13,43,85,.72),
            rgba(7,28,52,.95)
        ) !important;

    border:
        1px solid var(--yes-line) !important;

    box-shadow:
        none !important;

    position:
        relative;

    overflow:
        hidden;
}

.yesc-service-card::before {

    content: "";

    position:
        absolute;

    inset:
        0;

    opacity:
        0;

    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(113,163,242,.17),
            transparent 42%
        );

    transition:
        opacity .3s ease;
}

.yesc-service-card:hover {

    transform:
        translateY(-8px) !important;

    border-color:
        rgba(113,163,242,.42) !important;

    box-shadow:
        0 22px 60px rgba(0,0,0,.28) !important;
}

.yesc-service-card:hover::before {

    opacity:
        1;
}

.yesc-service-card > * {

    position:
        relative;

    z-index:
        1;
}

.yesc-service-card h3 {

    color:
        var(--yes-white) !important;
}

.yesc-service-card p {

    color:
        #9db0c7 !important;
}

.yesc-service-card li {

    color:
        #c0cede !important;
}

.yesc-icon {

    color:
        var(--yes-blue) !important;

    background:
        rgba(113,163,242,.10) !important;

    border:
        1px solid rgba(113,163,242,.20);
}


/* =========================================================
   SECURITY
   ========================================================= */

.yesc-security {

    background:
        linear-gradient(
            120deg,
            #06172b,
            #0d2b55
        ) !important;

    border-top:
        1px solid var(--yes-line-soft);

    border-bottom:
        1px solid var(--yes-line-soft);
}

.yesc-security-panel {

    background:
        rgba(8,28,52,.72) !important;

    border:
        1px solid var(--yes-line) !important;

    box-shadow:
        var(--yes-shadow);
}

.yesc-security-panel > div {

    border-color:
        rgba(113,163,242,.12) !important;
}

.yesc-security-panel strong {

    color:
        var(--yes-white) !important;
}

.yesc-security-panel span {

    color:
        var(--yes-muted) !important;
}

.yesc-security-pills span {

    color:
        #cad8e8 !important;

    border-color:
        rgba(113,163,242,.22) !important;

    background:
        rgba(113,163,242,.06);
}


/* =========================================================
   CYBER INSURANCE
   ========================================================= */

.yesc-readiness-box {

    background:
        linear-gradient(
            125deg,
            #0d2b55,
            #153e77
        ) !important;

    border:
        1px solid rgba(113,163,242,.28);

    box-shadow:
        0 30px 90px rgba(0,0,0,.25) !important;
}

.yesc-readiness-box h2 {

    color:
        var(--yes-white) !important;
}

.yesc-readiness-box p {

    color:
        #b9c9db !important;
}

.yesc-btn-light {

    background:
        var(--yes-white) !important;

    color:
        #0d2b55 !important;
}


/* =========================================================
   INDUSTRIES
   ========================================================= */

.yesc-industries > div {

    background:
        var(--yes-bg-card) !important;

    border:
        1px solid var(--yes-line) !important;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}

.yesc-industries > div:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(113,163,242,.45) !important;

    background:
        #0e2d53 !important;
}

.yesc-industries strong {

    color:
        var(--yes-white) !important;
}

.yesc-industries span {

    color:
        var(--yes-muted) !important;
}


/* =========================================================
   PROCESS
   ========================================================= */

.yesc-process {

    background:
        linear-gradient(
            120deg,
            #06172b,
            #0a2342
        ) !important;

    border-top:
        1px solid var(--yes-line-soft);

    border-bottom:
        1px solid var(--yes-line-soft);
}

.yesc-process-grid > div {

    background:
        rgba(113,163,242,.045) !important;

    border:
        1px solid rgba(113,163,242,.14) !important;

    transition:
        .25s ease;
}

.yesc-process-grid > div:hover {

    transform:
        translateY(-5px);

    background:
        rgba(113,163,242,.08) !important;

    border-color:
        rgba(113,163,242,.35) !important;
}


/* =========================================================
   FAQ
   ========================================================= */

.yesc-faq details {

    border-color:
        rgba(113,163,242,.15) !important;
}

.yesc-faq summary {

    color:
        var(--yes-white) !important;
}

.yesc-faq p {

    color:
        var(--yes-muted) !important;
}


/* =========================================================
   CONTACT AREA
   ========================================================= */

.yesc-contact {

    background:
        linear-gradient(
            135deg,
            #081c34,
            #0d2b55
        ) !important;

    border-top:
        1px solid var(--yes-line-soft);
}

.yesc-contact-copy h2 {

    color:
        var(--yes-white) !important;
}

.yesc-contact-points {

    color:
        #c2d0e0 !important;
}

.yesc-form-card {

    background:
        rgba(7,27,51,.86) !important;

    border:
        1px solid rgba(113,163,242,.25) !important;

    box-shadow:
        0 30px 80px rgba(0,0,0,.30) !important;

    backdrop-filter:
        blur(20px);
}

.yesc-form-card label > span {

    color:
        #cbd8e7 !important;
}

.yesc-form-card input,
.yesc-form-card select,
.yesc-form-card textarea {

    color:
        var(--yes-white) !important;

    background:
        #0c2749 !important;

    border:
        1px solid rgba(113,163,242,.20) !important;

    font-family:
        "Heebo",
        sans-serif !important;
}

.yesc-form-card input:focus,
.yesc-form-card select:focus,
.yesc-form-card textarea:focus {

    border-color:
        var(--yes-blue) !important;

    box-shadow:
        0 0 0 4px rgba(113,163,242,.09) !important;
}

.yesc-form-note {

    color:
        #748ca8 !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

.yesc-footer {

    background:
        #041223 !important;

    border-top:
        1px solid var(--yes-line-soft);
}

.yesc-footer strong {

    color:
        var(--yes-white) !important;
}

.yesc-footer a {

    color:
        #a7b8cc !important;
}

.yesc-floating {

    background:
        linear-gradient(
            135deg,
            #5b8ff5,
            #3d79e7
        ) !important;

    box-shadow:
        0 16px 45px rgba(41,96,191,.40) !important;
}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.yesc-reveal {

    opacity:
        0;

    transform:
        translateY(24px);

    transition:
        opacity .7s
        cubic-bezier(.2,.7,.2,1),
        transform .7s
        cubic-bezier(.2,.7,.2,1);
}

.yesc-reveal.yesc-visible {

    opacity:
        1;

    transform:
        translateY(0);
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes yesHeroText {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes yesFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes yesGlow {

    from {
        transform:
            translate3d(-15px,-10px,0)
            scale(.95);
    }

    to {
        transform:
            translate3d(18px,12px,0)
            scale(1.08);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .yesc-hero {

        min-height:
            auto;
    }

    .yesc-hero h1 {

        font-size:
            clamp(2.8rem, 13vw, 4.3rem);
    }

    .yesc-hero-lead {

        font-size:
            17px;
    }

    .yesc-service-card {

        border-radius:
            18px;
    }
}


/* Respect accessibility setting */

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

    *,
    *::before,
    *::after {

        animation:
            none !important;

        transition-duration:
            .001ms !important;
    }

    .yesc-reveal {

        opacity:
            1 !important;

        transform:
            none !important;
    }
}