/*--------------------------------------------------------------
# Midnight AI theme
# Dark foundation + bright intelligence accents
# Logo cyan/mint remain accents only — not page fill colours.
# Toggle: remove this stylesheet link from header.tpl.php to revert.
--------------------------------------------------------------*/

:root {
    /* Principles panel family — dark foundation */
    --bg-main: #0f1115;
    --bg-secondary: #151820;
    --bg-card: #1a1f28;
    --bg-white: #ffffff;
    --bg-soft: #f5f7fa;
    --bg-pale: #f5f7fa; /* no cyan wash — accents only, not section fills */
    --text-primary: #f5f8fa;
    --text-muted: #a9bac8;
    --text-dark: #17212b;
    --text-dark-muted: #60717f;
    --deep-blue: #1aa3c2; /* cyan-family text/link blue — matches #31C6E8, not teal navy */
    --accent-cyan: #31c6e8;
    --accent-mint: #31e89f;
    --border-cyan: rgba(49, 198, 232, 0.18);
    --border-soft: rgba(15, 30, 48, 0.08);
    --shadow-soft: 0 12px 32px rgba(15, 17, 21, 0.08);
    --shadow-panel: 0 24px 60px rgba(15, 17, 21, 0.22);
    --radius-card: 14px;
    --panel-glow:
        radial-gradient(circle at 18% 12%, rgba(49, 232, 159, 0.14), transparent 42%),
        radial-gradient(circle at 88% 78%, rgba(49, 198, 232, 0.18), transparent 46%);
}

body {
    color: var(--text-dark-muted);
    background: var(--bg-white);
}

a {
    color: var(--deep-blue);
}

a:hover {
    color: var(--accent-cyan);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-dark);
}

/*--------------------------------------------------------------
# Preloader / chrome utilities
--------------------------------------------------------------*/
#preloader {
    background:
        var(--panel-glow),
        var(--bg-main);
}

.back-to-top {
    background: var(--bg-main);
    border: 1px solid var(--border-cyan);
}

.back-to-top:hover {
    background: var(--accent-cyan);
    color: var(--bg-main);
}

.back-to-top:hover i {
    color: var(--bg-main);
}

/*--------------------------------------------------------------
# Header / Navbar — same dark mix as AI principles panel
--------------------------------------------------------------*/
#header {
    background:
        radial-gradient(circle at 18% 0%, rgba(49, 232, 159, 0.10), transparent 42%),
        radial-gradient(circle at 88% 100%, rgba(49, 198, 232, 0.14), transparent 46%),
        rgba(15, 17, 21, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-cyan);
}

#header.header-scrolled,
#header.header-inner-pages {
    background:
        radial-gradient(circle at 18% 0%, rgba(49, 232, 159, 0.10), transparent 42%),
        radial-gradient(circle at 88% 100%, rgba(49, 198, 232, 0.14), transparent 46%),
        rgba(15, 17, 21, 0.96);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

#header .logo a {
    color: var(--text-primary);
    letter-spacing: 1px;
}

#header .logo a:hover {
    color: var(--accent-cyan);
}

.navbar a,
.navbar a:focus {
    color: var(--text-muted);
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a {
    color: var(--accent-cyan);
}

.navbar .getstarted {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: var(--bg-main);
    box-shadow: 0 0 0 0 rgba(49, 198, 232, 0.35);
}

.navbar .getstarted:hover {
    background: var(--accent-mint);
    border-color: var(--accent-mint);
    color: var(--bg-main);
    box-shadow: 0 0 24px rgba(49, 198, 232, 0.28);
}

.navbar .dropdown ul {
    background: var(--bg-secondary);
    border: 1px solid var(--border-cyan);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.navbar .dropdown ul a {
    color: var(--text-muted);
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a {
    color: var(--accent-cyan);
}

.mobile-nav-toggle {
    color: var(--text-primary);
}

.navbar-mobile {
    background:
        var(--panel-glow),
        var(--bg-main);
}

.navbar-mobile a {
    color: var(--text-primary);
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover > a {
    color: var(--accent-cyan);
}

.navbar-mobile .getstarted {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: var(--bg-main);
}

.navbar-mobile .getstarted:hover {
    background: var(--accent-mint);
    border-color: var(--accent-mint);
    color: var(--bg-main);
}

.navbar-mobile .dropdown ul {
    background: var(--bg-secondary);
}

.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover > a {
    color: var(--accent-cyan);
}

/*--------------------------------------------------------------
# Hero — Midnight AI
--------------------------------------------------------------*/
#hero {
    background:
        radial-gradient(circle at 75% 30%, rgba(49, 198, 232, 0.16), transparent 38%),
        radial-gradient(circle at 20% 80%, rgba(49, 232, 159, 0.10), transparent 35%),
        var(--bg-main);
    border-bottom: 1px solid var(--border-cyan);
}

#hero h1 {
    color: var(--text-primary);
}

#hero h2,
#hero .hero-kicker,
#hero .hero-trust {
    color: var(--text-muted);
}

#hero .hero-kicker {
    color: var(--accent-cyan);
}

#hero .btn-get-started {
    background: var(--accent-cyan);
    color: var(--bg-main);
    border: 2px solid var(--accent-cyan);
}

#hero .btn-get-started:hover {
    background: var(--accent-mint);
    border-color: var(--accent-mint);
    color: var(--bg-main);
}

#hero .btn-learn-more {
    border-color: rgba(245, 248, 250, 0.35);
    color: var(--text-primary);
}

#hero .btn-learn-more:hover {
    background: rgba(245, 248, 250, 0.08);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

#hero .hero-img img {
    filter: drop-shadow(0 18px 40px rgba(49, 198, 232, 0.18));
    opacity: 0.92;
}

/*--------------------------------------------------------------
# Section rhythm
--------------------------------------------------------------*/
.section-bg {
    background-color: var(--bg-soft);
}

.section-pale {
    background-color: var(--bg-soft);
}

.section-dark {
    background:
        var(--panel-glow),
        var(--bg-main);
    color: var(--text-muted);
}

.section-dark .section-title h2,
.section-dark h1,
.section-dark h2,
.section-dark h3 {
    color: var(--text-primary);
}

.section-dark .section-title p,
.section-dark p {
    color: var(--text-muted);
}

.section-dark .section-title h2::after {
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-mint));
}

.section-title h2 {
    color: var(--text-dark);
}

.section-title h2::after {
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-mint));
}

.section-title p {
    color: var(--text-dark-muted);
}

/*--------------------------------------------------------------
# Homepage content blocks
--------------------------------------------------------------*/
#ai-workflow.ai-workflow-section {
    background: var(--bg-soft);
}

.ai-workflow-layout {
    background: var(--bg-white);
    border-top: 3px solid var(--accent-cyan);
    border: 1px solid var(--border-soft);
    border-top: 3px solid var(--accent-cyan);
    box-shadow: var(--shadow-soft);
}

.ai-node {
    background: rgba(49, 198, 232, 0.08);
    border-color: var(--border-cyan);
    color: var(--deep-blue);
}

.ai-workflow-steps li:not(:last-child)::after {
    background: linear-gradient(to bottom, var(--accent-mint), var(--accent-cyan));
}

.ai-workflow-steps .step-index {
    background: var(--bg-main);
    color: var(--accent-cyan);
    box-shadow: 0 0 0 1px var(--border-cyan);
}

.ai-workflow-steps strong {
    color: var(--text-dark);
}

#ai-use-cases {
    background: var(--bg-soft);
}

.ai-use-card {
    background: var(--bg-white);
    border: 1px solid var(--border-soft);
    border-top: 3px solid var(--accent-cyan);
}

.ai-use-card .icon i {
    color: var(--accent-cyan);
}

.ai-use-card,
.ai-principle-card,
.founder-experience-card,
.positioning-point,
.problem-card,
.case-card,
.services .icon-box,
.service-teaser,
.delivery-practice-card,
.operating-principle-card,
.detail-panel,
.detail-side,
.not-found-card {
    border-top-color: var(--accent-cyan);
    box-shadow: var(--shadow-soft);
}

.ai-use-card .icon i,
.ai-principle-card .icon i,
.positioning-point h3 i,
.problem-card i,
.services .icon-box .icon i,
.differentiation-item i {
    color: var(--accent-cyan);
}

.positioning-point {
    border-left: 3px solid var(--accent-cyan);
    background: var(--bg-white);
}

.services .icon-box,
.service-teaser,
.case-card {
    background: var(--bg-white);
    border: 1px solid var(--border-soft);
    border-top: 3px solid var(--accent-cyan);
}

.services .icon-box:hover,
.service-teaser:hover,
.case-card:hover,
.service-card-link:hover,
.case-card-link:hover {
    border-color: rgba(49, 198, 232, 0.35);
    box-shadow: 0 18px 40px rgba(49, 198, 232, 0.12);
}

.service-card-cta,
.service-price,
.relationship-label {
    color: var(--accent-cyan);
}

.service-card-link:hover .service-card-cta,
.case-card-link:hover .service-card-cta {
    color: var(--deep-blue);
}

.btn-outline-dark-pill {
    border-color: var(--deep-blue);
    color: var(--deep-blue);
}

.btn-outline-dark-pill:hover {
    background: var(--deep-blue);
    border-color: var(--deep-blue);
    color: #fff;
}

/* Dark differentiation band */
#differentiation.section-dark .differentiation-item {
    background: rgba(18, 37, 54, 0.92);
    border: 1px solid var(--border-cyan);
}

#differentiation.section-dark .differentiation-item span {
    color: var(--text-primary);
}

#differentiation.section-dark .differentiation-item i {
    color: var(--accent-mint);
}

/* AI principles — reference mix: dark panel on light page + mint/cyan accents */
.ai-principles {
    background: var(--bg-soft);
}

.ai-principles-panel {
    background:
        var(--panel-glow),
        var(--bg-main);
    border: 1px solid var(--border-cyan);
    box-shadow: var(--shadow-panel);
}

.ai-principles-panel .section-title h2::after {
    background: linear-gradient(90deg, var(--accent-mint), var(--accent-cyan));
}

.ai-principle-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(49, 198, 232, 0.12);
    border-top: 3px solid var(--accent-mint);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ai-principle-card .icon i {
    color: var(--accent-cyan);
}

.ai-principle-card h3 {
    color: var(--text-primary);
}

.ai-principle-card p {
    color: rgba(245, 248, 250, 0.78);
}

/* Differentiation — same panel language as AI principles */
.diff-panel {
    background:
        var(--panel-glow),
        var(--bg-main);
    border: 1px solid var(--border-cyan);
    border-radius: 16px;
    padding: 42px 36px;
    box-shadow: var(--shadow-panel);
    color: var(--text-muted);
}

.diff-panel .section-title h2 {
    color: var(--text-primary);
    text-transform: none;
}

.diff-panel .section-title h2::after {
    background: linear-gradient(90deg, var(--accent-mint), var(--accent-cyan));
    left: 0;
}

.diff-panel > .row > .col-lg-6 > p {
    color: rgba(245, 248, 250, 0.78);
    margin-top: 12px;
}

.diff-panel .differentiation-item {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(49, 198, 232, 0.12);
    border-top: 3px solid var(--accent-mint);
}

.diff-panel .differentiation-item span {
    color: var(--text-primary);
}

.diff-panel .differentiation-item i {
    color: var(--accent-cyan);
}

.tech-chip {
    background: var(--bg-white);
    border-color: rgba(12, 60, 83, 0.12);
    color: var(--deep-blue);
}

.tech-chip:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.founder-avatar {
    background: linear-gradient(135deg, var(--accent-mint), var(--accent-cyan));
}

.founder-avatar-photo {
    box-shadow: 0 10px 28px rgba(49, 198, 232, 0.22);
    border: 2px solid rgba(49, 198, 232, 0.35);
}

.founder-name {
    color: var(--text-dark);
}

.founder-points li i {
    color: var(--accent-cyan);
}

/*--------------------------------------------------------------
# CTA band — same dark-panel mix as AI principles
--------------------------------------------------------------*/
.cta-band {
    background: var(--bg-soft);
}

.cta-band-inner {
    background:
        var(--panel-glow),
        var(--bg-main);
    border: 1px solid var(--border-cyan);
    box-shadow: var(--shadow-panel);
}

.cta-band-text h2 {
    color: var(--text-primary);
}

.cta-band-text p {
    color: rgba(245, 248, 250, 0.78);
}

.btn-cta-primary {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: var(--bg-main);
}

.btn-cta-primary:hover {
    background: var(--accent-mint);
    border-color: var(--accent-mint);
    color: var(--bg-main);
}

.btn-cta-secondary {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(49, 198, 232, 0.28);
    color: var(--text-primary);
}

.btn-cta-secondary:hover {
    background: rgba(49, 198, 232, 0.12);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.cta {
    background:
        var(--panel-glow),
        var(--bg-main);
}

.cta .cta-btn:hover {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: var(--bg-main);
}

/*--------------------------------------------------------------
# Footer — dark foundation
--------------------------------------------------------------*/
#footer {
    background:
        var(--panel-glow),
        var(--bg-main);
    color: var(--text-muted);
    border-top: 1px solid var(--border-cyan);
}

#footer .footer-top {
    background: transparent;
}

#footer .footer-top .footer-contact h3,
#footer .footer-top h4,
#footer .copyright strong,
#footer .credits a {
    color: var(--text-primary);
}

#footer .footer-top .footer-contact p,
#footer .footer-tagline,
#footer .footer-top .footer-links ul a,
#footer .copyright,
#footer .credits {
    color: var(--text-muted);
}

#footer .footer-top .footer-links ul i {
    color: var(--accent-cyan);
}

#footer .footer-top .footer-links ul a:hover {
    color: var(--accent-cyan);
}

#footer .footer-top .social-links a,
#footer .footer-contact .icon {
    background: var(--bg-card);
    color: var(--accent-cyan);
    border: 1px solid var(--border-cyan);
}

#footer .footer-top .social-links a:hover,
#footer .footer-contact a:hover .icon {
    background: var(--accent-cyan);
    color: var(--bg-main);
    border-color: var(--accent-cyan);
}

#footer .footer-bottom {
    border-top: 1px solid rgba(49, 198, 232, 0.12);
    color: var(--text-muted);
}

/*--------------------------------------------------------------
# Inner pages
--------------------------------------------------------------*/
.breadcrumbs {
    background:
        var(--panel-glow),
        var(--bg-main);
    border-bottom: 1px solid var(--border-cyan);
}

.breadcrumbs ol li,
.breadcrumbs ol li a {
    color: var(--text-muted);
}

.breadcrumbs ol li a:hover {
    color: var(--accent-cyan);
}

.breadcrumbs ol li + li::before {
    color: rgba(169, 186, 200, 0.55);
}

.inner-page .section-title h1,
.inner-page .section-title h2,
.detail-panel h2,
.detail-side h3 {
    color: var(--text-dark);
}

.detail-list li::before,
.detail-side li::before {
    background: var(--accent-cyan);
}

.about .content .btn-get-started,
.about .content .btn-learn-more {
    background: var(--deep-blue);
    border-color: var(--deep-blue);
    color: #fff;
}

.about .content .btn-get-started:hover,
.about .content .btn-learn-more:hover {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: var(--bg-main);
}

.why-us .accordion-list a span,
.faq .faq-list .icon-help {
    color: var(--accent-cyan);
}

.faq .faq-list a:hover,
.why-us .accordion-list a:hover {
    color: var(--accent-cyan);
}

.detail-faq .faq-list,
.founder-experience-card,
.delivery-practice-card,
.operating-principle-card {
    border-top-color: var(--accent-cyan);
}

.related-link-list a:hover,
.why-anytech a:hover,
.delivery-practices-link a:hover,
.case-website a:hover {
    color: var(--accent-cyan);
}

/* Contact / forms keep readable light surfaces */
.contact .info,
.php-email-form,
.contact .php-email-form {
    border-top-color: var(--accent-cyan);
}

.contact .info i {
    color: var(--accent-cyan);
}

/*--------------------------------------------------------------
# Accent keyword helpers (optional use)
--------------------------------------------------------------*/
.accent-cyan {
    color: var(--accent-cyan);
}

.accent-mint {
    color: var(--accent-mint);
}

.text-highlight-ai {
    background: linear-gradient(120deg, rgba(49, 198, 232, 0.18), rgba(49, 232, 159, 0.12));
    padding: 0 0.2em;
    border-radius: 4px;
}