/* =========================================================
   SHADOWHAT V26 — MOBILE CYBER CLEAN
   Mobile-only layer. The approved desktop V18 remains intact.
========================================================= */

.mobile-enquire {
    display: none;
}

@media (max-width: 768px) {
    :root {
        --m-edge: 18px;
        --m-line: rgba(255,255,255,.14);
        --m-line-soft: rgba(255,255,255,.075);
        --m-glow: rgba(255,255,255,.18);
    }

    html,
    body {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: clip;
        background: #111518;
    }

    body {
        min-height: 100svh;
    }

    .site {
        width: 100%;
        max-width: 100%;
        min-height: 100svh;
        display: block;
        overflow: clip;
    }

    /* Mobile atmosphere: keep the flag, grid and HUD texture visible. */
    .background {
        position: fixed;
        inset: 0;
        overflow: hidden;
    }

    .flag-layer {
        inset: -2%;
        opacity: .36;
        background-position: 43% center;
        filter: grayscale(100%) contrast(96%) brightness(1.06);
        transform: scale(1.04);
        animation: none !important;
    }

    .ambient-light {
        opacity: .84;
        background:
            radial-gradient(circle at 74% 22%, rgba(255,255,255,.12), transparent 31%),
            radial-gradient(circle at 18% 49%, rgba(255,255,255,.065), transparent 36%),
            linear-gradient(180deg, rgba(255,255,255,.025), transparent 34%, rgba(0,0,0,.14));
    }

    .grid-layer {
        opacity: .075;
        background-size: 48px 48px;
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.85) 68%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.85) 68%, transparent 100%);
    }

    .grain-layer {
        opacity: .016;
    }

    .mouse-light,
    .ghost-cursor {
        display: none !important;
    }

    /* One lightweight scanner gives the phone version a live HUD feel. */
    .background::before {
        display: block !important;
        content: "";
        position: absolute;
        z-index: 8;
        left: 0;
        right: 0;
        top: -9vh;
        height: 9vh;
        pointer-events: none;
        opacity: .65;
        background: linear-gradient(to bottom, transparent, rgba(255,255,255,.035), transparent);
        filter: blur(7px);
        animation: mobileViewportScan 8.5s linear infinite !important;
    }

    .background::after {
        display: block !important;
        opacity: .30;
        animation: none !important;
    }

    /* Compact sticky command bar. */
    .header {
        position: sticky;
        top: 0;
        z-index: 50;
        width: 100%;
        min-height: 68px;
        height: 68px;
        padding: 0 var(--m-edge);
        background: rgba(13,16,18,.72);
        border-bottom: 1px solid rgba(255,255,255,.10);
        backdrop-filter: blur(15px) saturate(115%);
        -webkit-backdrop-filter: blur(15px) saturate(115%);
    }

    .header::after {
        content: "";
        position: absolute;
        left: var(--m-edge);
        right: var(--m-edge);
        bottom: -1px;
        height: 1px;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.05) 36%, transparent 72%);
        opacity: .48;
    }

    .brand {
        min-width: 0;
        gap: 10px;
    }

    .brand img {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }

    .brand-wordmark {
        font-size: 14px;
        letter-spacing: .06em;
        white-space: nowrap;
    }

    .brand-wordmark::before {
        bottom: -7px;
        width: 42px;
    }

    .brand-wordmark::after,
    .header-status {
        display: none !important;
    }

    .mobile-enquire {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 36px;
        padding: 0 12px;
        border: 1px solid rgba(255,255,255,.24);
        background: rgba(255,255,255,.025);
        color: rgba(246,247,247,.84);
        font: 600 7px/1 "Chakra Petch", "Inter", sans-serif;
        letter-spacing: .15em;
        clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-enquire::before {
        content: "";
        position: absolute;
        inset: 3px;
        border-top: 1px solid rgba(255,255,255,.08);
        pointer-events: none;
    }

    .mobile-enquire:active {
        background: rgba(255,255,255,.09);
        transform: translateY(1px);
    }

    main,
    .hero,
    .hero-content,
    .services,
    .contact-area,
    .orbit,
    .contact-card,
    form {
        max-width: 100%;
        box-sizing: border-box;
    }

    .hero {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0,1fr);
        align-items: start;
        gap: 46px;
        padding: 42px var(--m-edge) 54px;
        margin: 0;
    }

    .hero::before {
        content: "";
        position: absolute;
        left: var(--m-edge);
        right: var(--m-edge);
        top: 15px;
        height: 1px;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(255,255,255,.22), transparent 62%);
    }

    .hero::after {
        content: "MOBILE NODE // ENCRYPTED";
        position: absolute;
        top: 9px;
        right: var(--m-edge);
        padding-left: 8px;
        background: #111518;
        color: rgba(255,255,255,.24);
        font: 600 5px/1 "Chakra Petch", monospace;
        letter-spacing: .17em;
        white-space: nowrap;
    }

    .hero-content {
        width: 100%;
        margin: 0;
    }

    .hero-content::before {
        display: none !important;
    }

    .eyebrow {
        margin: 0 0 18px;
        gap: 9px;
        font-size: 6px;
        letter-spacing: .22em;
    }

    .eyebrow::after {
        display: none !important;
    }

    .eyebrow-light {
        width: 5px;
        height: 5px;
        box-shadow: 0 0 8px rgba(255,255,255,.95), 0 0 20px rgba(255,255,255,.25);
    }

    .hero-title {
        width: 100%;
        max-width: 100%;
        margin: 0;
        font-size: clamp(42px, 12.8vw, 58px);
        line-height: .83;
        letter-spacing: -.055em;
    }

    .hero-title-main {
        width: 100%;
        max-width: 100%;
        display: flex !important;
        flex-wrap: wrap;
        gap: .035em .10em;
    }

    .hero-title-main::before {
        left: 0;
        top: -12px;
        width: 28px;
        height: 4px;
        opacity: .70;
    }

    .hero-title-main::after {
        display: none !important;
    }

    .hero-title-main i::after {
        opacity: .50;
    }

    .hero-title-sub {
        width: 100%;
        margin-top: 18px !important;
        gap: 9px;
        font-size: .26em !important;
        letter-spacing: .15em !important;
        white-space: nowrap;
    }

    .hero-title-sub::before {
        width: 24px;
    }

    .hero-rule {
        width: 100%;
        margin-top: 18px;
    }

    .hero-description {
        width: 100%;
        max-width: 34rem;
        margin-top: 21px;
        color: rgba(232,234,235,.78);
        font-size: 11px;
        line-height: 1.72;
    }

    /* Four compact HUD modules. */
    .services {
        width: 100%;
        margin: 27px 0 0;
        display: grid;
        grid-template-columns: 1fr;
        border-top: 1px solid var(--m-line);
        background: rgba(0,0,0,.035);
    }

    .service,
    .service:nth-child(odd),
    .service:nth-child(even) {
        width: 100%;
        min-height: 56px;
        padding: 0 10px !important;
        gap: 13px;
        border-right: 0 !important;
        border-bottom: 1px solid var(--m-line-soft);
        background: linear-gradient(90deg, rgba(255,255,255,.018), transparent 72%);
        transform: none !important;
        transition: background .16s linear, border-color .16s linear !important;
        -webkit-tap-highlight-color: transparent;
    }

    .service::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 2px;
        opacity: .45;
        transform: none;
        background: linear-gradient(to bottom, transparent 5%, rgba(255,255,255,.75) 48%, transparent 95%);
        box-shadow: 0 0 10px rgba(255,255,255,.18);
    }

    .service::after {
        content: "READY";
        position: absolute;
        top: 9px;
        right: 9px;
        width: auto;
        height: auto;
        color: rgba(255,255,255,.16);
        background: transparent;
        box-shadow: none;
        font: 600 5px/1 "Chakra Petch", monospace;
        letter-spacing: .13em;
    }

    .service:active {
        background: rgba(255,255,255,.055);
        border-bottom-color: rgba(255,255,255,.23);
    }

    .service-number {
        min-width: 34px;
        color: rgba(255,255,255,.36);
        font-size: 6.5px;
    }

    .service-name {
        color: rgba(249,250,250,.93);
        font-size: 9.5px;
        letter-spacing: .12em;
    }

    .service-arrow {
        display: block;
        margin-left: auto;
        padding-right: 2px;
        opacity: .42;
        transform: none;
        color: rgba(255,255,255,.70);
        font-size: 10px;
    }

    /* Contact section: equal gutters, transparent card, radar behind it. */
    .contact-area {
        width: 100%;
        margin: 0;
        padding: 0;
        justify-content: stretch;
    }

    .orbit {
        position: relative;
        width: 100%;
        height: auto;
        min-width: 0;
        min-height: 0;
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .orbit-inner,
    .orbit-core,
    .orbit-dot,
    .orbit-label,
    .orbit-tick {
        display: none !important;
    }

    .orbit::before {
        content: "";
        display: block !important;
        position: absolute;
        z-index: 0;
        width: min(82vw, 330px);
        height: min(82vw, 330px);
        left: 50%;
        top: 34px;
        inset: auto;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.055);
        border-left-color: rgba(255,255,255,.15);
        border-right-color: rgba(255,255,255,.09);
        background:
            radial-gradient(circle at center, transparent 0 48%, rgba(255,255,255,.024) 49% 49.5%, transparent 50%),
            radial-gradient(circle at center, rgba(255,255,255,.018), transparent 68%);
        transform: translateX(-50%);
        pointer-events: none;
        animation: mobileRadarSpin 24s linear infinite !important;
    }

    .orbit::after {
        content: "";
        display: block !important;
        position: absolute;
        z-index: 1;
        top: 82px;
        right: 10px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(255,255,255,.92);
        box-shadow: 0 0 8px rgba(255,255,255,.95), 0 0 22px rgba(255,255,255,.42);
        animation: mobileSignal 2.2s ease-in-out infinite !important;
        pointer-events: none;
    }

    .contact-card {
        position: relative;
        z-index: 2;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 25px 18px 20px;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.15);
        background: rgba(10,13,15,.12);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.035),
            0 22px 70px rgba(0,0,0,.13);
        backdrop-filter: blur(7px) saturate(108%);
        -webkit-backdrop-filter: blur(7px) saturate(108%);
    }

    .contact-card::before {
        content: "";
        position: absolute;
        inset: 7px;
        z-index: 0;
        pointer-events: none;
        background:
            linear-gradient(#fff,#fff) left top / 18px 1px no-repeat,
            linear-gradient(#fff,#fff) left top / 1px 18px no-repeat,
            linear-gradient(#fff,#fff) right bottom / 18px 1px no-repeat,
            linear-gradient(#fff,#fff) right bottom / 1px 18px no-repeat;
        opacity: .18;
    }

    .contact-card::after {
        content: "";
        position: absolute;
        z-index: 0;
        left: 10px;
        right: 10px;
        top: -42px;
        height: 42px;
        pointer-events: none;
        background: linear-gradient(to bottom, transparent, rgba(255,255,255,.045), transparent);
        animation: mobileCardScan 6.8s linear infinite !important;
    }

    .card-shine {
        display: none !important;
    }

    .card-top,
    .contact-card h2,
    .card-description,
    .contact-card form {
        position: relative;
        z-index: 2;
    }

    .card-top {
        margin-bottom: 20px;
        font-size: 5.5px;
        letter-spacing: .19em;
    }

    .contact-card h2 {
        margin: 0;
        font-size: clamp(28px, 8.4vw, 36px);
        line-height: .92;
        letter-spacing: -.035em;
    }

    .card-description {
        margin-top: 13px;
        max-width: 29rem;
        color: rgba(226,229,230,.68);
        font-size: 9.5px;
        line-height: 1.6;
    }

    form {
        width: 100%;
        margin-top: 22px;
    }

    .field {
        width: 100%;
        margin: 0 0 23px;
    }

    .field input,
    .field textarea {
        width: 100%;
        min-width: 0;
        border: 0;
        border-bottom: 1px solid rgba(255,255,255,.18);
        border-radius: 0;
        background: transparent !important;
        box-shadow: none;
        color: #fff;
        font-size: 16px;
        line-height: 1.3;
        -webkit-appearance: none;
        appearance: none;
    }

    .field input {
        min-height: 60px;
        padding: 27px 0 12px;
    }

    .field textarea {
        min-height: 100px;
        height: 100px;
        padding: 30px 0 14px;
        resize: vertical;
    }

    .field label {
        top: 8px;
        left: 0;
        color: rgba(210,214,216,.52);
        font-size: 6px;
        letter-spacing: .18em;
        line-height: 1.3;
    }

    .field input:focus + label,
    .field input:not(:placeholder-shown) + label,
    .field textarea:focus + label,
    .field textarea:not(:placeholder-shown) + label {
        top: 1px;
        color: rgba(244,246,246,.76);
        font-size: 5.5px;
    }

    .field input:focus,
    .field textarea:focus {
        border-bottom-color: rgba(255,255,255,.68);
        box-shadow: 0 8px 16px -17px rgba(255,255,255,.95);
    }

    .hp-field {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .turnstile-wrap {
        max-width: 100%;
    }

    #submitButton {
        width: 100%;
        min-height: 50px;
        height: 50px;
        margin: 4px 0 0;
        padding: 0 15px;
        border: 1px solid rgba(255,255,255,.24);
        background: rgba(0,0,0,.18);
        color: rgba(249,250,250,.92);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.015);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        font-size: 7px;
        font-weight: 600;
        letter-spacing: .19em;
        transform: none;
        -webkit-tap-highlight-color: transparent;
    }

    #submitButton::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: 0;
        bottom: 0;
        left: -42%;
        width: 28%;
        opacity: .32;
        transform: skewX(-18deg);
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
        animation: mobileButtonSweep 5.4s ease-in-out infinite !important;
    }

    #submitButton:active {
        background: rgba(255,255,255,.075);
        border-color: rgba(255,255,255,.42);
    }

    #submitButton span {
        position: relative;
        z-index: 1;
    }

    .form-message {
        margin-top: 10px;
        min-height: 12px;
        font-size: 6px;
        line-height: 1.45;
    }

    footer {
        width: 100%;
        min-height: 46px;
        height: 46px;
        padding: 0 var(--m-edge);
        border-top: 1px solid rgba(255,255,255,.075);
        background: rgba(13,16,18,.58);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        font-size: 5px;
        letter-spacing: .16em;
    }

    .footer-middle {
        display: none;
    }
}

@media (max-width: 430px) {
    :root { --m-edge: 16px; }
}

@media (max-width: 360px) {
    :root { --m-edge: 14px; }

    .brand-wordmark {
        font-size: 13px;
    }

    .mobile-enquire {
        padding: 0 9px;
        letter-spacing: .11em;
    }

    .hero-title {
        font-size: clamp(39px, 12.4vw, 48px);
    }

    .contact-card {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
    .brand img {
        animation: mobileLogoPulse 4.6s ease-in-out infinite;
    }

    .eyebrow-light {
        animation: mobileSignal 2.3s ease-in-out infinite;
    }

    .service:nth-child(1) { animation: mobileModulePulse 7s 0s ease-in-out infinite; }
    .service:nth-child(2) { animation: mobileModulePulse 7s 1.2s ease-in-out infinite; }
    .service:nth-child(3) { animation: mobileModulePulse 7s 2.4s ease-in-out infinite; }
    .service:nth-child(4) { animation: mobileModulePulse 7s 3.6s ease-in-out infinite; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .background::before,
    .orbit::before,
    .orbit::after,
    .contact-card::after,
    #submitButton::before,
    .brand img,
    .eyebrow-light,
    .service {
        animation: none !important;
    }
}

@keyframes mobileViewportScan {
    from { transform: translate3d(0,-8vh,0); }
    to   { transform: translate3d(0,122vh,0); }
}

@keyframes mobileRadarSpin {
    from { transform: translateX(-50%) rotate(0deg); }
    to   { transform: translateX(-50%) rotate(360deg); }
}

@keyframes mobileCardScan {
    0%   { transform: translateY(0); opacity: 0; }
    10%  { opacity: .55; }
    72%  { opacity: .32; }
    100% { transform: translateY(620px); opacity: 0; }
}

@keyframes mobileButtonSweep {
    0%, 58% { left: -42%; opacity: 0; }
    68%     { opacity: .34; }
    88%     { left: 122%; opacity: .12; }
    100%    { left: 122%; opacity: 0; }
}

@keyframes mobileSignal {
    0%, 100% { opacity: .55; transform: scale(.82); }
    50%      { opacity: 1; transform: scale(1); }
}

@keyframes mobileLogoPulse {
    0%, 100% { filter: drop-shadow(0 0 7px rgba(255,255,255,.10)); }
    50%      { filter: drop-shadow(0 0 12px rgba(255,255,255,.24)); }
}

@keyframes mobileModulePulse {
    0%, 84%, 100% { box-shadow: inset 0 0 0 rgba(255,255,255,0); }
    90% { box-shadow: inset 14px 0 28px -30px rgba(255,255,255,.70); }
}

/* V26.2 — iOS mobile cleanup: remove the circled Unicode arrow glyphs only. */
@media (max-width: 768px) {
    .service-arrow,
    .card-symbol {
        display: none !important;
    }
}