/* ═══════════════════════════════════════════════════════════
   ROAD TRIAGE — Page-Specific Visual Treatments
   Each page gets its own hero image, color accent,
   and section rhythm. Shared "Infrastructure Noir" foundation.
   ═══════════════════════════════════════════════════════════ */

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

/* ─── Shared: Outfit headings on all pages ──────────────── */
body:not([data-page="/"]) h1,
body:not([data-page="/"]) h2,
body:not([data-page="/"]) h3,
body:not([data-page="/"]) .section__label,
body:not([data-page="/"]) .section__title {
    font-family: 'Outfit', var(--font-sans);
}
body:not([data-page="/"]) .section__title {
    font-weight: 800;
}

/* ─── Shared: Hero image treatment for all subpages ─────── */
body:not([data-page="/"]) .hero {
    isolation: isolate;
}
body:not([data-page="/"]) .hero .hero__bg {
    display: none;
}

/* ═══════════════════════════════════════════════════════════
   TECHNOLOGY — Cyan wireframe AI, the most technical page
   ═══════════════════════════════════════════════════════════ */
body[data-page="/technology"] .hero {
    background: none;
}
body[data-page="/technology"] .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/static/images/backgrounds/AutonomousDigital-1280.jpg') center/cover no-repeat;
    z-index: -2;
}
body[data-page="/technology"] .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(5,15,30,0.7) 0%,
        rgba(0,40,60,0.6) 40%,
        rgba(5,15,30,0.85) 100%
    );
    z-index: -1;
}
/* Teal-tinted glow on hero */
body[data-page="/technology"] .hero .hero__title em {
    background: linear-gradient(90deg, #00d4ff, #00e5ff, #00d4ff);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmerText 4s linear infinite;
}
@keyframes shimmerText {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}
/* Light distress section */
body[data-page="/technology"] .section--light {
    background: #fff;
}
body[data-page="/technology"] .section--light .section__title {
    color: var(--navy);
}
body[data-page="/technology"] .section--light .section__subtitle {
    color: #1e293b;
}
/* Pipeline section: visible background */
body[data-page="/technology"] #pipeline-section {
    border-top: 3px solid var(--cyan);
}
/* Scanning line on tech hero */
body[data-page="/technology"] .hero .hero__content::after {
    content: '';
    position: absolute;
    left: -20%;
    right: -20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,212,255,0.5), transparent);
    bottom: -40px;
    animation: techScanH 5s ease-in-out infinite;
}
@keyframes techScanH {
    0%, 100% { transform: translateX(-10%); opacity: 0; }
    50% { transform: translateX(10%); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   SERVICES — Highway, warm tones, professional/premium
   ═══════════════════════════════════════════════════════════ */
body[data-page="/services"] .hero {
    background: none;
}
body[data-page="/services"] .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/static/images/backgrounds/artificial-intelligence-3382507_640.jpg') center/cover no-repeat;
    z-index: -2;
}
body[data-page="/services"] .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(5,12,24,0.75) 0%,
        rgba(20,15,5,0.6) 40%,
        rgba(5,12,24,0.85) 100%
    );
    z-index: -1;
}
body[data-page="/services"] .hero .hero__title em {
    background: linear-gradient(90deg, var(--amber), #ffca28, var(--amber));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmerText 4s linear infinite;
}
/* Light tiers section */
body[data-page="/services"] #tiers-overview {
    background: #fff;
}
body[data-page="/services"] #tiers-overview .section__title {
    color: var(--navy);
}
body[data-page="/services"] #tiers-overview .section__subtitle {
    color: #1e293b;
}
/* Dark feature comparison with warm accent */
body[data-page="/services"] #feature-compare {
    border-top: 3px solid var(--amber);
}
/* Warm line under hero */
body[data-page="/services"] .hero .hero__content::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,160,0,0.4), transparent);
}

/* ═══════════════════════════════════════════════════════════
   ABOUT — Bridge infrastructure, cool blue, trustworthy
   ═══════════════════════════════════════════════════════════ */
body[data-page="/about"] .hero {
    background: none;
}
body[data-page="/about"] .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/static/images/backgrounds/busan-night-scene-1747130_1280.jpg') center/cover no-repeat;
    z-index: -2;
}
body[data-page="/about"] .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(5,12,24,0.6) 0%,
        rgba(5,20,50,0.55) 50%,
        rgba(5,12,24,0.85) 100%
    );
    z-index: -1;
}
/* Light story section */
body[data-page="/about"] .section--light {
    background: #fff;
}
body[data-page="/about"] .section--light .section__title,
body[data-page="/about"] .section--light h2 {
    color: var(--navy);
}
/* Expertise section with visible background */
body[data-page="/about"] .section--dark {
    border-top: 3px solid var(--blue);
}

/* ═══════════════════════════════════════════════════════════
   CONTACT — Clean gears, approachable, inviting
   ═══════════════════════════════════════════════════════════ */
body[data-page="/contact"] .hero {
    background: none;
    min-height: 45vh;
}
body[data-page="/contact"] .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/static/images/backgrounds/binary-1327493_1280.jpg') center/cover no-repeat;
    z-index: -2;
}
body[data-page="/contact"] .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(5,12,24,0.8) 0%,
        rgba(5,12,24,0.7) 50%,
        rgba(5,12,24,0.9) 100%
    );
    z-index: -1;
}
/* Contact form on white — clean and easy */
body[data-page="/contact"] .section--light {
    background: #fff;
}

/* ═══════════════════════════════════════════════════════════
   RESOURCES HUB — IoT hexagons, command center
   ═══════════════════════════════════════════════════════════ */
body[data-page="/resources"] .hero {
    background: none;
}
body[data-page="/resources"] .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/static/images/backgrounds/ai-generated-8487824_1280.jpg') center/cover no-repeat;
    z-index: -2;
}
body[data-page="/resources"] .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(5,12,24,0.7) 0%,
        rgba(5,15,35,0.6) 50%,
        rgba(5,12,24,0.8) 100%
    );
    z-index: -1;
}

/* ═══════════════════════════════════════════════════════════
   FAQ — Hexagon eye pattern, accessible
   ═══════════════════════════════════════════════════════════ */
body[data-page="/resources/faq"] .hero {
    background: none;
}
body[data-page="/resources/faq"] .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/static/images/backgrounds/iot-4085382_1280.jpg') center/cover no-repeat;
    z-index: -2;
}
body[data-page="/resources/faq"] .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(5,12,24,0.8) 0%,
        rgba(5,12,24,0.65) 40%,
        rgba(5,12,24,0.9) 100%
    );
    z-index: -1;
}
/* FAQ content on white */
body[data-page="/resources/faq"] #faq-content {
    background: #fff;
}

/* ═══════════════════════════════════════════════════════════
   GLOSSARY — AI circuit brain, reference/encyclopedia feel
   ═══════════════════════════════════════════════════════════ */
body[data-page="/resources/glossary"] .hero {
    background: none;
}
body[data-page="/resources/glossary"] .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/static/images/backgrounds/artificial-intelligence-1920.jpg') center/cover no-repeat;
    z-index: -2;
}
body[data-page="/resources/glossary"] .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(5,15,30,0.7) 0%,
        rgba(0,30,50,0.6) 50%,
        rgba(5,15,30,0.85) 100%
    );
    z-index: -1;
}
/* Glossary content section border */
body[data-page="/resources/glossary"] #glossary-content {
    border-top: 3px solid var(--cyan);
}

/* ═══════════════════════════════════════════════════════════
   SCORING — Real road with detections, analytical
   ═══════════════════════════════════════════════════════════ */
body[data-page="/resources/scoring"] .hero {
    background: none;
}
body[data-page="/resources/scoring"] .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/static/images/backgrounds/FatigueCracks02.jpg') center/cover no-repeat;
    z-index: -2;
}
body[data-page="/resources/scoring"] .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(5,12,24,0.75) 0%,
        rgba(5,12,24,0.6) 40%,
        rgba(5,12,24,0.9) 100%
    );
    z-index: -1;
}
/* Multi-color accent — each score has its color */
body[data-page="/resources/scoring"] #scoring-content {
    border-top: 3px solid;
    border-image: linear-gradient(90deg, var(--blue), var(--green), var(--cyan), var(--amber), var(--red)) 1;
}

/* ═══════════════════════════════════════════════════════════
   STANDARDS — Autonomous wireframe, authoritative
   ═══════════════════════════════════════════════════════════ */
body[data-page="/resources/standards"] .hero {
    background: none;
}
body[data-page="/resources/standards"] .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/static/images/backgrounds/AutonomousDigital-1280.jpg') center/cover no-repeat;
    z-index: -2;
}
body[data-page="/resources/standards"] .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(5,12,24,0.8) 0%,
        rgba(0,20,40,0.65) 50%,
        rgba(5,12,24,0.85) 100%
    );
    z-index: -1;
}
body[data-page="/resources/standards"] .hero .hero__title em {
    background: linear-gradient(90deg, var(--amber), #ffca28);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* Gold accent for authority */
body[data-page="/resources/standards"] .section--dark {
    border-top: 3px solid var(--amber);
}

/* ═══════════════════════════════════════════════════════════
   WHITE PAPERS — Asphalt texture, academic/research
   ═══════════════════════════════════════════════════════════ */
body[data-page="/resources/papers"] .hero {
    background: none;
}
body[data-page="/resources/papers"] .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/static/images/backgrounds/background-asphalt-91821_640.jpg') center/cover no-repeat;
    z-index: -2;
}
body[data-page="/resources/papers"] .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(15,15,15,0.8) 0%,
        rgba(15,15,15,0.65) 40%,
        rgba(10,10,10,0.9) 100%
    );
    z-index: -1;
}
body[data-page="/resources/papers"] .hero .hero__title em {
    background: linear-gradient(90deg, var(--green), #69f0ae);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* Green accent for knowledge/growth */
body[data-page="/resources/papers"] #papers-content {
    border-top: 3px solid var(--green);
}

/* ═══════════════════════════════════════════════════════════
   PRIVACY & TERMS — Minimal, clean
   ═══════════════════════════════════════════════════════════ */
body[data-page="/privacy"] .hero,
body[data-page="/terms"] .hero {
    background: none;
    min-height: 40vh;
}
body[data-page="/privacy"] .hero::before,
body[data-page="/terms"] .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0a1628, #132847);
    z-index: -2;
}
body[data-page="/privacy"] .hero::after,
body[data-page="/terms"] .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(0,168,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,168,255,0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: -1;
}

/* ═══════════════════════════════════════════════════════════
   SHARED ENHANCEMENTS — All subpages
   ═══════════════════════════════════════════════════════════ */

/* Hero title entrance on all pages */
body:not([data-page="/"]) .hero .hero__title {
    animation: pageHeroIn 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
    font-weight: 900;
    text-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
body:not([data-page="/"]) .hero .hero__subtitle {
    animation: pageHeroIn 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s both;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
body:not([data-page="/"]) .hero .hero__badge {
    animation: pageHeroIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0s both;
}
@keyframes pageHeroIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Light sections: ensure black text */
body:not([data-page="/"]) .section--light .section__title {
    color: var(--navy);
}
body:not([data-page="/"]) .section--light .section__subtitle {
    color: #1e293b;
}

/* Dark sections: ensure readable text */
body:not([data-page="/"]) .section--dark .section__subtitle,
body:not([data-page="/"]) .section--dark-alt .section__subtitle {
    color: rgba(255,255,255,0.85);
}

/* CTA sections on all subpages — unique per page would be too much,
   but a subtle background keeps them interesting */
body:not([data-page="/"]) .cta-section {
    background:
        linear-gradient(135deg, rgba(0,77,204,0.85), rgba(0,168,255,0.8)),
        url('/static/images/backgrounds/highwayInterchange-1280.jpg') center/cover no-repeat;
    border-top: 3px solid var(--cyan);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    body:not([data-page="/"]) .hero .hero__content::after {
        display: none;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    body:not([data-page="/"]) .hero .hero__title,
    body:not([data-page="/"]) .hero .hero__subtitle,
    body:not([data-page="/"]) .hero .hero__badge {
        animation: none !important;
        opacity: 1;
    }
}