/* pages/ai-mlops.css — styles unique to this page (shared rules live in core.css + components.css) */

h1, h2, h3, h4 { font-family: 'DM Serif Display', serif; font-weight: 400; line-height: 1.1; letter-spacing: -.02em; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 40px; }

.navbar-inner { max-width: 1240px; margin: 0 auto; width: 100%; display: flex; align-items: center; height: var(--nav-h); padding: 0 40px; }

.has-dropdown:hover .dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); }

.mobile-nav { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0; background: rgba(255,251,247,.98); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(52,0,95,.1); padding: 12px 24px 20px; box-shadow: 0 20px 40px rgba(52,0,95,.08); }

.mobile-nav a.mob-cta { background: linear-gradient(135deg, var(--sas-orange), var(--sas-orange-dk)); color: #fff; border-radius: 9px; text-align: center; border: none; margin-top: 12px; padding: 13px; display: block; }

.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sas-orange); animation: pulseDot 2s ease-in-out infinite; flex-shrink: 0; }

.hero-text { overflow: visible; }

.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; animation: fadeUp .8s ease-out .45s both; }

.hero-visual { animation: fadeUp .8s ease-out .2s both; }

.hero-vis-card { background: rgba(255,255,255,.85); border: 1px solid rgba(52,0,95,.1); border-radius: 22px; padding: 28px; backdrop-filter: blur(16px); box-shadow: var(--sh-md); position: relative; overflow: hidden; }

.hero-vis-card::before { content: ''; position: absolute; top: 0; left: 10px; right: 10px; height: 1px; background: linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent); }

.hero-vis-card::after { content: ''; position: absolute; top: -30px; right: -30px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(52,0,95,.05) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }

.hero-img-wrap { border-radius: 14px; overflow: hidden; margin-bottom: 16px; border: 1px solid rgba(52,0,95,.08); }

.hero-img-wrap img { width: 100%; display: block; }

.hero-vis-footer { display: flex; align-items: center; gap: 14px; }

.hero-vis-icon { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; background: linear-gradient(135deg, var(--sas-orange), var(--sas-orange-lt)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; box-shadow: 0 6px 16px rgba(249,76,48,.28); position: relative; }

.hero-vis-icon::after { content: ''; position: absolute; top: 3px; left: 7px; right: 7px; height: 38%; background: linear-gradient(to bottom,rgba(255,255,255,.22),transparent); border-radius: 7px 7px 0 0; }

.hero-vis-label strong { display: block; font-family: 'DM Serif Display', serif; font-size: .95rem; color: var(--text); }

.hero-vis-label span { font-size: .78rem; color: var(--text-3); }

/* ═══════ CONTENT SECTIONS ═══════ */
        .svc-section { padding: 80px 0; position: relative; overflow: hidden; }

.bg-white { background: #ffffff; }

.sec-header { margin-bottom: 48px; position: relative; z-index: 2; text-align: center; }

.sec-kicker { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: .71rem; font-weight: 700; text-transform: uppercase; letter-spacing: 4px; color: var(--sas-purple); margin-bottom: 12px; font-family: 'Trebuchet MS', sans-serif; }

.text-module { max-width: 900px; margin: 0 auto; text-align: center; font-size: 1.05rem; color: var(--text-2); line-height: 1.8; }

.text-module p { margin-bottom: 24px; }

.text-module p:last-child { margin-bottom: 0; }

/* Two-Column Flow Layout */
        .mlops-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; align-items: start; margin-top: 40px; }

/* MLOps List Styles */
        .mlops-list { list-style: none; margin: 0; padding: 0; }

.mlops-list li {
            font-size: 1rem; color: var(--text-2); line-height: 1.6; margin-bottom: 20px;
            padding-left: 36px; position: relative;
        }

.mlops-list li::before {
            content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
            position: absolute; left: 0; top: 3px; color: var(--sas-orange); font-size: .85rem;
            background: rgba(249,76,48,.1); width: 22px; height: 22px; display: flex;
            align-items: center; justify-content: center; border-radius: 50%;
        }

.mlops-list strong { color: var(--text); font-family: 'Trebuchet MS', sans-serif; font-weight: 700; }

/* MLOps Flow Chart Styles */
        .mlops-flow-chart {
            display: flex; flex-direction: column; align-items: center; gap: 12px;
            background: #ffffff; padding: 40px; border-radius: 24px;
            border: 1px solid rgba(52,0,95,.08); box-shadow: var(--sh-md);
        }

.mlops-flow-chart__step {
            background: linear-gradient(135deg, var(--sas-purple), var(--sas-purple-lt));
            color: #ffffff; padding: 16px 24px; border-radius: 12px;
            font-family: 'Trebuchet MS', sans-serif; font-weight: 700; font-size: .95rem;
            text-align: center; width: 100%; box-shadow: var(--sh-pur); letter-spacing: .02em;
        }

.mlops-flow-chart__arrow { color: var(--sas-orange); font-size: 1.2rem; }

.conclusion-container { max-width: 900px; margin: 60px auto 0; text-align: center; }

.conclusion-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(52,0,95,.15), transparent); margin-bottom: 30px; }

.conclusion-text { font-size: 1.1rem; color: var(--sas-purple); font-weight: 600; font-family: 'Trebuchet MS', sans-serif; }

.footer-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 18px; position: relative; z-index: 2; }

.footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; color: rgba(255,255,255,.35); position: relative; z-index: 2; }

.footer-bottom-links { display: flex; gap: 16px; }

/* ═══════ RESPONSIVE ═══════ */
        @media (max-width:1100px) {
            .hero-content { grid-template-columns: 1fr; gap: 40px; }
            .hero-visual { order: -1; max-width: 540px; margin: 0 auto; width: 100%; }
            .navbar-inner { padding: 0 32px; }
            .mlops-grid { gap: 40px; }
        }

@media (max-width:900px) {
            .mlops-grid { grid-template-columns: 1fr; }
        }

@media (max-width:768px) {
            .container { padding: 0 20px; }
            .nav-links { display: none; }
            .nav-toggle { display: flex; }
            .navbar-inner { padding: 0 20px; }
            .hero { padding: 100px 0 70px; }
            .hero-btns { flex-direction: column; align-items: flex-start; gap: 10px; }
            .btn { width: 100%; justify-content: center; }
            .mlops-flow-chart { padding: 24px 16px; }
            .footer-top, .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
            .footer-bottom-links { justify-content: center; }
        }