/* "AI that raises the standard" — Ace sections on the home page and the Connect page (October 2026). */
.ai-section { position: relative; padding: 104px 0; background: #0c2547; color: #d5deea; overflow: hidden; }
.ai-section::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(60% 50% at 85% 10%, rgba(37,150,190,.28), transparent 60%),
  radial-gradient(40% 40% at 10% 90%, rgba(27,93,171,.35), transparent 60%),
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='46' height='46'><rect x='8' y='8' width='30' height='30' transform='rotate(45 23 23)' fill='none' stroke='%239cc8f0' stroke-opacity='.08'/></svg>"); }
.ai-section > .container { position: relative; }
.ai-section .section-label { color: #fff; background: rgba(255,255,255,.12); border-left-color: var(--teal-light); opacity: 1; }
.ai-section .section-title { color: #fff; }
.ai-section .section-title .accent { color: var(--teal-light); }
.ai-section .section-lead { color: #c9d5e4; }

.ai-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; margin-bottom: 64px; }
.ai-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(127,201,234,.35); font: 700 12px/1 'Barlow Condensed', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #7fc9ea; }
.ai-kicker .ai-av { width: 26px; height: 26px; border-radius: 8px; }
.ai-av { position: relative; display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(135deg, #0c2547, #1b5dab 60%, #2596be); box-shadow: 0 10px 30px -12px rgba(37,150,190,.9), inset 0 0 0 1px rgba(255,255,255,.14); overflow: hidden; flex: none; }
.ai-av svg { width: 58%; height: 58%; }
.ai-av::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-120%); animation: ai-sheen 6s ease-in-out infinite; }
@keyframes ai-sheen { 0%, 75% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* The demo chat card */
.ai-demo { position: relative; background: #fff; border-radius: 18px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; color: var(--text-dark); }
.ai-demo::before { content: ""; position: absolute; inset: -30% -20% auto; height: 60%; background: radial-gradient(closest-side, rgba(37,150,190,.25), transparent); pointer-events: none; }
.ai-demo-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(118deg, #0a1b33, #0c2547 55%, #10396b); color: #fff; }
.ai-demo-head .ai-av { width: 40px; height: 40px; border-radius: 12px; }
.ai-demo-head b { display: block; font-size: 15px; } .ai-demo-head span { font-size: 11px; color: #9fb8d4; }
.ai-demo-head .tag { margin-left: auto; font: 700 10px/1 'Barlow Condensed', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #7fc9ea; border: 1px solid rgba(127,201,234,.5); border-radius: 999px; padding: 5px 9px; }
.ai-sweep { height: 3px; background: linear-gradient(90deg, transparent, #2596be 40%, #7fc9ea 50%, #2596be 60%, transparent); background-size: 200% 100%; animation: ai-shimmer 2.2s linear infinite; }
@keyframes ai-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ai-demo-body { padding: 16px; background: #f3f6fa; display: flex; flex-direction: column; gap: 10px; min-height: 250px; }
.ai-msg { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; opacity: 0; transform: translateY(8px); }
.ai-msg.u { align-self: flex-end; background: #0c2547; color: #fff; border-bottom-right-radius: 5px; }
.ai-msg.a { align-self: flex-start; background: #fff; border: 1px solid #e6edf5; border-bottom-left-radius: 5px; box-shadow: 0 6px 18px -14px rgba(12,37,71,.5); }
.ai-msg.a b { color: var(--blue); }
.in-view .ai-msg { animation: ai-up .5s cubic-bezier(.2,.8,.2,1) forwards; }
.in-view .ai-msg:nth-child(1) { animation-delay: .3s; } .in-view .ai-msg:nth-child(2) { animation-delay: 1.4s; } .in-view .ai-msg:nth-child(3) { animation-delay: 3.2s; } .in-view .ai-msg:nth-child(4) { animation-delay: 4.6s; }
@keyframes ai-up { to { opacity: 1; transform: none; } }
.ai-demo-foot { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #e6edf5; background: #fff; }
.ai-demo-foot span { flex: 1; border: 1px solid #d6e0ec; border-radius: 12px; padding: 10px 12px; font-size: 14px; color: #8392a6; }
.ai-demo-foot i { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, #1b5dab, #2596be); display: grid; place-items: center; }

/* Three columns: cleaners, security, clients */
.ai-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ai-col { position: relative; padding: 30px 28px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); transition: transform .3s, border-color .3s, background .3s; overflow: hidden; }
.ai-col::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #1b5dab, #2596be, #7fc9ea); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.ai-col.in-view::before { transform: none; }
.ai-col:hover { transform: translateY(-4px); border-color: rgba(127,201,234,.5); background: rgba(255,255,255,.08); }
.ai-col .ai-who { display: inline-flex; align-items: center; gap: 10px; font: 800 12px/1 'Barlow Condensed', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #7fc9ea; margin-bottom: 14px; }
.ai-col .ai-who svg { width: 18px; height: 18px; }
.ai-col h3 { color: #fff; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 14px; }
.ai-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ai-col li { position: relative; padding-left: 26px; font-size: .95rem; line-height: 1.55; color: #c9d5e4; }
.ai-col li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 8px; border-left: 2.5px solid var(--teal-light); border-bottom: 2.5px solid var(--teal-light); transform: rotate(-45deg) scale(0); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.ai-col.in-view li::before { transform: rotate(-45deg) scale(1); }
.ai-col.in-view li:nth-child(1)::before { transition-delay: .3s } .ai-col.in-view li:nth-child(2)::before { transition-delay: .45s } .ai-col.in-view li:nth-child(3)::before { transition-delay: .6s } .ai-col.in-view li:nth-child(4)::before { transition-delay: .75s } .ai-col.in-view li:nth-child(5)::before { transition-delay: .9s }

/* Guard rails strip */
.ai-rails { margin-top: 44px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.12); border-radius: 10px; overflow: hidden; }
.ai-rail { padding: 22px 22px; background: #0c2547; }
.ai-rail svg { width: 22px; height: 22px; color: var(--teal-light); margin-bottom: 10px; }
.ai-rail b { display: block; color: #fff; font: 700 1rem/1.2 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px; }
.ai-rail p { font-size: .88rem; line-height: 1.55; color: #c9d5e4; margin: 0; }

.ai-cta { margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.ai-cta .btn-ace { display: inline-flex; align-items: center; gap: 10px; padding: 0 22px 0 8px; height: 54px; border-radius: 999px; border: 0; cursor: pointer; color: #fff; font: 800 14px/1 'Barlow Condensed', sans-serif; letter-spacing: .12em; text-transform: uppercase; background: linear-gradient(135deg, #1b5dab, #2596be); box-shadow: 0 12px 30px -10px rgba(37,150,190,.9); transition: transform .2s, box-shadow .2s; }
.ai-cta .btn-ace:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(37,150,190,1); }
.ai-cta .btn-ace .ai-av { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.ai-cta .ai-built { font-size: .9rem; color: #9fb8d4; }
.ai-cta .ai-built b { color: #fff; font-weight: 600; }

@media (max-width: 960px) { .ai-hero { grid-template-columns: 1fr; gap: 36px; } .ai-cols { grid-template-columns: 1fr; } .ai-rails { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ai-section { padding: 72px 0; } .ai-rails { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ai-av::after, .ai-sweep { animation: none; } .ai-msg { opacity: 1; transform: none; animation: none !important; } .ai-col::before, .ai-col li::before { transition: none; } }