.ai-page { background: var(--cream); }
.ai-page .site-header nav .nav-ai.active { background: var(--coral); color: #fff; border-color: var(--coral); box-shadow: 0 3px 0 var(--navy); }
.ai-page .site-header nav .nav-ai.active span { color: var(--yellow); }
.ai-hero { padding: 170px max(28px,calc((100vw - var(--max))/2)) 90px; min-height: 760px; display: grid; grid-template-columns: 1fr .9fr; gap: 70px; align-items: center; background: radial-gradient(circle at 85% 18%,rgba(255,106,74,.18),transparent 26%),radial-gradient(circle at 8% 80%,rgba(255,213,47,.2),transparent 22%),var(--cream); }
.ai-hero h1 { margin: 24px 0; max-width: 760px; color: var(--navy); font-size: clamp(3.7rem,6.6vw,6.7rem); line-height: .93; letter-spacing: -.065em; }
.ai-hero h1 em { display: block; color: #444650; font: italic 400 .78em Georgia,serif; letter-spacing: -.045em; margin-top: 12px; }
.ai-hero-copy>p { max-width: 650px; color: #62636b; font-size: 1.17rem; }
.ai-hero .hero-badges { justify-content: flex-start; }
.ai-hero .hero-actions { justify-content: flex-start; }
.ai-hero .button.text { color: var(--navy); border: 2px solid var(--navy); padding: 13px 20px; border-radius: 9px; }
.ai-command { background: var(--navy); color: #fff; border-radius: 26px; padding: 28px; box-shadow: 18px 18px 0 var(--yellow),0 26px 60px rgba(16,42,94,.2); }
.command-head { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.18); font: 700 .72rem Manrope; letter-spacing: .08em; }
.command-head span i { display: inline-block; width: 8px; height: 8px; margin-right: 7px; background: #57dbad; border-radius: 50%; }
.command-head>b { color: var(--yellow); font-size: .62rem; }
.flow-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 11px; align-items: center; padding: 34px 0; }
.flow-row>i { color: var(--yellow); font-style: normal; font-size: 1.25rem; }
.flow-step { min-height: 145px; padding: 18px 12px; display: flex; flex-direction: column; justify-content: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; }
.flow-step small { color: var(--yellow); font-weight: 800; }
.flow-step b { font: 700 1rem Manrope; margin: 8px 0; }
.flow-step em { color: #bac8dd; font-style: normal; font-size: .76rem; line-height: 1.35; }
.command-result { display: grid; grid-template-columns: 1fr 2.2fr auto; gap: 20px; align-items: center; padding: 18px; background: #fff; color: var(--navy); border-radius: 14px; }
.command-result span { font: 800 .6rem Manrope; letter-spacing: .1em; color: #747985; }
.command-result strong { font-size: .82rem; line-height: 1.35; }
.command-result b { color: var(--coral); font-size: 1.5rem; }
.ai-split { padding: 100px max(28px,calc((100vw - var(--max))/2)); background: var(--navy); color: #fff; display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; }
.ai-split h2 { color: #fff; font-size: clamp(2.6rem,4.4vw,4.8rem); letter-spacing: -.05em; }
.ai-split h2 em { color: var(--yellow); font-family: Georgia,serif; font-weight: 400; }
.path-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.path-cards article { padding: 30px; border: 1px solid rgba(255,255,255,.2); border-radius: 18px; background: rgba(255,255,255,.06); }
.path-cards article:last-child { background: var(--coral); border-color: var(--coral); }
.path-cards b { color: var(--yellow); font: 800 .78rem Manrope; }
.path-cards h3 { margin: 40px 0 14px; color: #fff; font-size: 1.45rem; }
.path-cards p { color: #cbd4e1; margin: 0; }
.path-cards article:last-child p { color: #fff; }
.ai-solution-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.ai-card { position: relative; min-height: 430px; padding: 34px; background: #fff; border: 1px solid var(--soft-line); border-radius: 22px; }
.ai-card>span { position: absolute; top: 28px; right: 30px; color: #9799a0; font: 800 .72rem Manrope; }
.ai-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 44px; background: var(--yellow); color: var(--navy); border-radius: 50%; font-size: 1.45rem; }
.ai-card h3 { font-size: 1.6rem; }
.ai-card p { max-width: 520px; color: #666872; }
.ai-card ul { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.ai-card li { padding: 10px 0; border-bottom: 1px solid #e8e6df; font-weight: 600; font-size: .9rem; }
.ai-card li:before { content: "+"; margin-right: 9px; color: var(--coral); }
.ai-card.featured { color: #fff; background: var(--navy); border-color: var(--navy); }
.ai-card.featured h3 { color: #fff; }
.ai-card.featured p { color: #c5cfdd; }
.ai-card.featured li { border-color: rgba(255,255,255,.18); }
.ai-card.coral { background: #fff7f2; border-color: #ffc2b5; }
.assessment { padding: 105px max(28px,calc((100vw - var(--max))/2)); display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; background: var(--coral); color: #fff; }
.assessment h2 { color: #fff; font-size: clamp(2.6rem,4.2vw,4.5rem); letter-spacing: -.05em; }
.assessment-copy>p:not(.eyebrow) { max-width: 530px; }
.assessment .button { margin-top: 16px; }
.assessment-steps article { display: grid; grid-template-columns: 70px 1fr; gap: 18px; padding: 25px 0; border-top: 1px solid rgba(255,255,255,.3); }
.assessment-steps article:last-child { border-bottom: 1px solid rgba(255,255,255,.3); }
.assessment-steps article>b { color: var(--yellow); font: 800 .85rem Manrope; }
.assessment-steps h3 { color: #fff; margin-bottom: 8px; }
.assessment-steps p { margin: 0; color: #fff5f2; }
.tech-groups { border-top: 1px solid var(--soft-line); }
.tech-groups>div { display: grid; grid-template-columns: 190px 1fr; gap: 30px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--soft-line); }
.tech-groups small { color: var(--coral); font: 800 .72rem Manrope; letter-spacing: .1em; }
.tech-groups p { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.tech-groups span { padding: 9px 14px; background: #fff; border: 1px solid var(--soft-line); border-radius: 24px; color: var(--navy); font-weight: 700; }
.ai-outcomes { padding: 100px max(28px,calc((100vw - var(--max))/2)); background: var(--navy-deep); color: #fff; }
.ai-outcomes h2 { color: #fff; max-width: 750px; font-size: clamp(2.5rem,4vw,4.2rem); }
.ai-outcomes>div { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 55px; border-top: 1px solid rgba(255,255,255,.2); }
.ai-outcomes article { padding: 28px 28px 0 0; }
.ai-outcomes strong { color: var(--yellow); font-size: .8rem; }
.ai-outcomes h3 { color: #fff; margin-top: 38px; }
.ai-outcomes p { color: #aebdd0; }
.ai-faq { display: grid; grid-template-columns: .7fr 1.3fr; gap: 100px; }
.faq-list details { border-top: 1px solid var(--soft-line); }
.faq-list details:last-child { border-bottom: 1px solid var(--soft-line); }
.faq-list summary { list-style: none; display: flex; justify-content: space-between; gap: 20px; padding: 24px 0; cursor: pointer; color: var(--navy); font: 700 1.1rem Manrope; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--coral); font-size: 1.3rem; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { color: #666872; max-width: 680px; padding: 0 35px 22px 0; }
.ai-contact { border-top: 8px solid var(--yellow); }
@media(max-width:1120px) { .ai-hero { grid-template-columns: 1fr; } .ai-command { max-width: 780px; } }
@media(max-width:980px) { .ai-split,.assessment,.ai-faq { grid-template-columns: 1fr; gap: 48px; } .ai-outcomes>div { grid-template-columns: repeat(2,1fr); } }
@media(max-width:720px) { .ai-hero { padding: 135px 20px 75px; } .ai-hero h1 { font-size: 3.5rem; } .ai-hero .hero-actions { align-items: stretch; } .ai-hero .button { width: 100%; } .ai-command { padding: 20px; box-shadow: 9px 9px 0 var(--yellow); } .flow-row { grid-template-columns: 1fr; } .flow-row>i { transform: rotate(90deg); text-align: center; } .flow-step { min-height: 105px; } .command-result { grid-template-columns: 1fr; gap: 6px; } .ai-split,.assessment,.ai-outcomes { padding: 78px 20px; } .path-cards,.ai-solution-grid,.ai-card ul,.ai-outcomes>div { grid-template-columns: 1fr; } .ai-card { min-height: auto; padding: 28px; } .tech-groups>div { grid-template-columns: 1fr; gap: 12px; } }