/* =========================================================
   AC DESIGN — PREMIUM ROBOTICS DESIGN SYSTEM
   Version: 2026-10-05
   Loaded AFTER style.css and home.css.
   Dark / black / engineering drawing / subtle robotics light.
   ========================================================= */

:root {
    --ac-black: #010204;
    --ac-black-2: #03070b;
    --ac-black-3: #071018;
    --ac-panel: rgba(7, 13, 20, 0.66);
    --ac-panel-strong: rgba(7, 13, 20, 0.86);
    --ac-white: #f7fbff;
    --ac-muted: rgba(228, 237, 245, 0.66);
    --ac-blue: #1597e5;
    --ac-cyan: #65d8ff;
    --ac-line: rgba(115, 201, 255, 0.12);
    --ac-line-soft: rgba(255, 255, 255, 0.055);
    --ac-shadow: 0 22px 55px rgba(0, 0, 0, 0.34);
}

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

html {
    background: var(--ac-black) !important;
}

body {
    position: relative !important;
    min-height: 100vh;
    overflow-x: hidden !important;
    color: var(--ac-white);
    background:
        radial-gradient(circle at 14% 13%, rgba(20, 138, 215, 0.08), transparent 25%),
        radial-gradient(circle at 86% 32%, rgba(0, 97, 166, 0.055), transparent 27%),
        linear-gradient(180deg, #010204 0%, #02060a 45%, #010204 100%) !important;
}

/* faint real engineering drawing across every page */
body::before {
    content: "";
    position: fixed;
    inset: -18px;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(1, 3, 5, 0.90), rgba(1, 3, 5, 0.95)),
        url('/img/home-engineering-drawing2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.27;
    filter: grayscale(1) contrast(1.12) brightness(.72);
    animation: acBlueprintDrift 34s ease-in-out infinite alternate;
}

/* one slow moving cyan light — no busy scan effects */
body::after {
    content: "";
    position: fixed;
    left: -18vw;
    top: 10vh;
    width: 60vw;
    height: 60vw;
    min-width: 560px;
    min-height: 560px;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(42, 181, 255, 0.105) 0%,
            rgba(17, 127, 195, 0.038) 40%,
            transparent 70%
        );
    filter: blur(46px);
    animation: acAmbientLight 20s ease-in-out infinite alternate;
}

@keyframes acBlueprintDrift {
    from {
        transform: translate3d(0, 0, 0) scale(1.02);
    }
    to {
        transform: translate3d(12px, -9px, 0) scale(1.035);
    }
}

@keyframes acAmbientLight {
    from {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: .72;
    }
    to {
        transform: translate3d(44vw, 8vh, 0) scale(1.15);
        opacity: .38;
    }
}

/* content stays over the background drawing */
nav,
.navbar,
.banner,
.main,
.main.container-fluid,
section,
footer,
.site-footer {
    position: relative;
    z-index: 1;
}

/* =========================================================
   SECTION SYSTEM — SAME DARK FAMILY ACROSS EVERY PAGE
   ========================================================= */

.main,
.main.container-fluid {
    background: transparent !important;
}

.ac-overview,
.home-capabilities,
.home-process,
.home-why,
.about-intro,
.about-capabilities,
.about-process,
.about-industrial,
.about-why,
.services-intro,
.services-list-section,
.service-process,
.services-nationwide,
.portfolio-intro,
.portfolio-section,
.capability-section,
.portfolio-highlight,
.contact-direct,
.project-inquiry,
.contact-prepare,
.contact-service-area {
    background:
        linear-gradient(
            180deg,
            rgba(2, 6, 10, 0.80),
            rgba(2, 5, 8, 0.84)
        ) !important;
    border-color: rgba(255,255,255,.035) !important;
}

/* subtle alternation creates depth without changing the theme */
.home-process,
.about-process,
.service-process,
.portfolio-highlight,
.project-inquiry {
    background:
        linear-gradient(
            180deg,
            rgba(6, 12, 18, 0.76),
            rgba(2, 6, 10, 0.84)
        ) !important;
}

/* engineering grid inside major sections */
.ac-overview,
.home-capabilities,
.home-process,
.home-why,
.about-intro,
.about-capabilities,
.about-process,
.about-industrial,
.about-why,
.services-intro,
.services-list-section,
.service-process,
.services-nationwide,
.portfolio-intro,
.portfolio-section,
.capability-section,
.portfolio-highlight,
.contact-direct,
.project-inquiry,
.contact-prepare,
.contact-service-area {
    background-image:
        linear-gradient(rgba(66, 162, 221, .032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(66, 162, 221, .026) 1px, transparent 1px),
        linear-gradient(
            180deg,
            rgba(2, 6, 10, 0.82),
            rgba(2, 5, 8, 0.86)
        ) !important;
    background-size:
        96px 96px,
        96px 96px,
        100% 100% !important;
}

/* =========================================================
   HERO / TOP SECTIONS
   ========================================================= */

.banner,
.about-hero,
.services-hero,
.portfolio-hero,
.contact-premium-hero {
    background-color: #010305 !important;
    box-shadow:
        inset 0 -1px 0 rgba(255,255,255,.05),
        0 24px 65px rgba(0,0,0,.28) !important;
}

/* keep actual hero photography, only improve overlay */
.banner .cover::before,
.about-hero-cover::before,
.services-hero-cover::before,
.portfolio-hero-cover::before {
    background:
        linear-gradient(
            90deg,
            rgba(1,3,5,.94) 0%,
            rgba(2,7,11,.80) 37%,
            rgba(2,7,11,.43) 72%,
            rgba(2,7,11,.26) 100%
        ) !important;
}

/* Glass effect only around hero text; no boxy frame */
.hero-content,
.about-hero-content,
.services-hero-content,
.portfolio-hero-content,
.contact-hero-content {
    text-shadow: 0 12px 32px rgba(0,0,0,.62);
}

/* =========================================================
   TYPOGRAPHY / TECH DETAILS
   ========================================================= */

h1,
h2,
h3,
h4 {
    color: #f9fcff !important;
    text-shadow:
        0 8px 30px rgba(0,0,0,.50),
        0 0 22px rgba(21,151,229,.035) !important;
}

p {
    color: var(--ac-muted);
}

/* blue micro-labels */
.home-section-kicker,
.overview-label,
.portfolio-section-label,
.portfolio-kicker,
.about-kicker,
.about-heading > span,
.services-kicker,
.services-heading > span,
.services-intro-left > span,
.contact-kicker,
.contact-section-heading > span,
.contact-prepare-heading > span,
.project-inquiry-left > span,
.service-area-content > span {
    color: var(--ac-cyan) !important;
    text-shadow: 0 0 13px rgba(42,181,255,.12);
}

/* small technical line under important headings */
.home-section-heading,
.process-heading,
.portfolio-heading,
.about-heading,
.services-heading,
.contact-section-heading,
.contact-prepare-heading {
    position: relative;
}

.home-section-heading::after,
.process-heading::after,
.portfolio-heading::after,
.about-heading::after,
.services-heading::after,
.contact-section-heading::after,
.contact-prepare-heading::after {
    content: "";
    display: block;
    width: 52px;
    height: 2px;
    margin-top: 20px;
    background: linear-gradient(90deg, var(--ac-blue), transparent);
    box-shadow: 0 0 14px rgba(21,151,229,.18);
}

/* =========================================================
   CARDS — ROBOT / INDUSTRIAL, NOT GAMING
   ========================================================= */

.home-capability-card,
.process-step,
.why-item,
.about-capability-item,
.about-process-item,
.about-why-item,
.service-card,
.process-item,
.capability-item,
.contact-info-card,
.project-support-item,
.prepare-item {
    position: relative;
    background:
        linear-gradient(
            145deg,
            rgba(10, 18, 27, .72),
            rgba(5, 10, 16, .62)
        ) !important;
    border: 1px solid rgba(255,255,255,.055) !important;
    box-shadow:
        0 18px 42px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.025) !important;
    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease,
        background .28s ease !important;
}

/* mechanical corner highlight */
.home-capability-card::after,
.process-step::after,
.why-item::after,
.about-capability-item::after,
.about-process-item::after,
.about-why-item::after,
.service-card::after,
.process-item::after,
.capability-item::after,
.contact-info-card::after,
.project-support-item::after,
.prepare-item::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 42px;
    height: 42px;
    pointer-events: none;
    border-top: 1px solid rgba(75,190,255,.22);
    border-right: 1px solid rgba(75,190,255,.22);
    opacity: .55;
}

.home-capability-card:hover,
.process-step:hover,
.why-item:hover,
.about-capability-item:hover,
.about-process-item:hover,
.about-why-item:hover,
.service-card:hover,
.process-item:hover,
.capability-item:hover,
.contact-info-card:hover,
.project-support-item:hover,
.prepare-item:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(58,178,245,.20) !important;
    background:
        linear-gradient(
            145deg,
            rgba(11, 21, 31, .82),
            rgba(5, 11, 18, .70)
        ) !important;
    box-shadow:
        0 24px 52px rgba(0,0,0,.31),
        0 0 28px rgba(21,151,229,.055) !important;
}

/* numbers become small robot interface accents */
.capability-number,
.home-capability-card > span,
.process-step > span,
.why-item > span,
.about-capability-item > span,
.about-process-item > span,
.about-why-item > span,
.service-number,
.process-item > span,
.project-support-item > span,
.prepare-item > span,
.contact-number {
    color: var(--ac-cyan) !important;
    text-shadow: 0 0 10px rgba(66,200,255,.16);
}

/* =========================================================
   PRODUCTS / PROJECTS — 3 COLUMNS, NO BOX FRAME
   ========================================================= */

.portfolio-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 52px 34px !important;
    align-items: start !important;
    width: 100% !important;
}

.portfolio-card,
.portfolio-grid > .portfolio-card {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.portfolio-card::before,
.portfolio-card::after {
    display: none !important;
    content: none !important;
}

.portfolio-image,
.portfolio-card .portfolio-image {
    width: 100% !important;
    height: 220px !important;
    min-height: 220px !important;
    padding: 8px 6px 4px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.portfolio-image a {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.portfolio-image img,
.portfolio-card .portfolio-image img {
    width: auto !important;
    max-width: 89% !important;
    height: 194px !important;
    max-height: 194px !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter:
        drop-shadow(0 22px 22px rgba(0,0,0,.38))
        drop-shadow(0 0 12px rgba(29,159,231,.055));
    transition:
        transform .30s ease,
        filter .30s ease !important;
}

.portfolio-card:hover .portfolio-image img {
    transform: translateY(-5px) scale(1.018) !important;
    filter:
        drop-shadow(0 28px 26px rgba(0,0,0,.43))
        drop-shadow(0 0 18px rgba(29,159,231,.10));
}

.portfolio-card-content {
    position: relative;
    padding: 18px 6px 24px !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* small illuminated technical separator instead of a rectangle */
.portfolio-card-content::before {
    content: "";
    display: block;
    width: 42px;
    height: 1px;
    margin: 0 0 16px;
    background: linear-gradient(90deg, var(--ac-blue), transparent);
    box-shadow: 0 0 11px rgba(21,151,229,.15);
}

.portfolio-card-content h3 {
    font-size: 18px !important;
    line-height: 1.36 !important;
}

.portfolio-card-content p {
    color: rgba(225,235,243,.66) !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
}

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

.hero-btn,
.overview-btn,
.premium-cta,
.contact-btn,
.services-cta > a,
.about-cta > a,
.portfolio-card-content a {
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease,
        color .25s ease !important;
}

.hero-btn-primary,
.contact-btn-primary {
    background:
        linear-gradient(135deg, #0f79bb, #149add) !important;
    border-color: rgba(79,196,255,.44) !important;
    box-shadow:
        0 12px 28px rgba(0,0,0,.26),
        0 0 22px rgba(21,151,229,.10) !important;
}

.hero-btn:hover,
.overview-btn:hover,
.premium-cta:hover,
.contact-btn:hover,
.services-cta > a:hover,
.about-cta > a:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        0 16px 34px rgba(0,0,0,.31),
        0 0 20px rgba(21,151,229,.11) !important;
}

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

nav.navbar,
nav.navbar.scroll,
.navbar {
    background: rgba(1,4,7,.90) !important;
    border-bottom: 1px solid rgba(255,255,255,.045) !important;
    box-shadow:
        0 14px 36px rgba(0,0,0,.32),
        inset 0 -1px 0 rgba(56,174,239,.025) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: #ffffff !important;
    text-shadow: 0 0 13px rgba(41,177,249,.14);
}

.site-footer,
.footer,
footer {
    background:
        linear-gradient(
            180deg,
            rgba(2,5,8,.97),
            rgba(1,2,4,.995)
        ) !important;
    border-top: 1px solid rgba(255,255,255,.045) !important;
    box-shadow: inset 0 1px 0 rgba(29,159,231,.025);
}

/* =========================================================
   VISIBILITY / MOTION SAFETY
   ========================================================= */

.reveal-up,
.scroll-reveal,
.reveal-up.is-visible,
.scroll-reveal.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* preserve page JS transitions without hiding content */
.reveal-up,
.scroll-reveal {
    transform: translateY(0) !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media screen and (max-width: 1180px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media screen and (max-width: 700px) {
    body::before {
        opacity: .18;
        animation: none;
    }

    body::after {
        opacity: .44;
    }

    .portfolio-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .portfolio-image,
    .portfolio-card .portfolio-image {
        height: 205px !important;
        min-height: 205px !important;
    }

    .portfolio-image img,
    .portfolio-card .portfolio-image img {
        height: 182px !important;
        max-height: 182px !important;
        max-width: 92% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after {
        animation: none !important;
    }

    * {
        scroll-behavior: auto !important;
    }
}
/* =========================================================
   FOOTER LINE QR
   ========================================================= */

.footer-connect {
    min-width: 0;
}

.footer-line-qr {
    margin-top: 22px;
    width: 150px;
}

.footer-line-qr-title {
    display: block;
    margin-bottom: 10px;
    color: #65d8ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.footer-line-qr img {
    display: block;
    width: 132px;
    height: 132px;
    object-fit: contain;
    padding: 7px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid rgba(101,216,255,.15);
    box-shadow:
        0 12px 26px rgba(0,0,0,.28),
        0 0 18px rgba(21,151,229,.07);
    transition: transform .25s ease, box-shadow .25s ease;
}

.footer-line-qr a:hover img {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 16px 32px rgba(0,0,0,.34),
        0 0 22px rgba(21,151,229,.11);
}

@media screen and (max-width: 650px) {
    .footer-line-qr {
        margin-top: 18px;
    }

    .footer-line-qr img {
        width: 120px;
        height: 120px;
    }
}