/* pages/genai.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; }

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

.mobile-nav { display: none; position: absolute; top: 72px; 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); }

.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%; }
            .wwd-grid { grid-template-columns: 1fr 1fr; }
            .navbar-inner { padding: 0 32px; }
            .step-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
            .step-col:nth-child(3) { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }
        }

@media (max-width:768px) {
            .container { padding: 0 20px; }
            .nav-links { display: none; }
            .nav-toggle { display: flex; }
            .navbar-inner { padding: 0 20px; height: 64px; }
            .mobile-nav { top: 64px; }
            .hero { padding: 100px 0 70px; }
            .hero-btns { flex-direction: column; align-items: flex-start; gap: 10px; }
            .btn { width: 100%; justify-content: center; }
            .wwd-grid { grid-template-columns: 1fr; }
            .wwd { padding: 80px 0 90px; }
            .wwd-card { padding: 40px 32px 36px; }
            .step-grid { grid-template-columns: 1fr; gap: 48px; }
            .step-col:nth-child(3) { max-width: 100%; }
            .bg-clean-step { padding: 80px 0 100px; }
            .footer-top, .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
            .footer-bottom-links { justify-content: center; }
            .hero{ padding-top: calc(var(--nav-h) + 28px); padding-bottom: 56px; }
        }

@media (max-width:480px) {
            .container { padding: 0 16px; }
            .hero { padding: 90px 0 56px; }
            .wwd-card { padding: 32px 24px 28px; }
            .step-col { padding: 32px 24px; }
            .alliance-logo-grid { grid-template-columns: 1fr; }
        }