/* ═══════════════════════════════════════════════════════════
   CUSTOM AI DEVELOPMENT PAGE — page-ai-custom.css
   Hero: Dark navy + floating pipeline blocks canvas
   Primary: Teal #00C2A8 · Multi-accent build aesthetic
════════════════════════════════════════════════════════════ */
:root { --cai-teal: #00C2A8; }

/* HERO */
.cai-hero { position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; background:var(--color-midnight); padding-top:var(--header-h); }
.cai-hero__bg { position:absolute; inset:0; z-index:0; }
.cai-hero__canvas { width:100%; height:100%; display:block; }
.cai-hero__overlay { position:absolute; inset:0;
   background: linear-gradient(135deg, rgb(255 255 255 / 93%) 0%,
 rgb(255 255 255 / 75%) 50%,
 rgb(255 255 255 / 90%) 100%); }

.cai-hero__code { position:absolute; inset:0; z-index:1; pointer-events:none; }
.cai-code-chip { position:absolute; font-family:'Courier New',monospace; font-size:.72rem; background:rgba(0,194,168,.06); border:1px solid rgba(0,194,168,.18); padding:5px 12px; border-radius:6px; animation:codeFloat 7s ease-in-out infinite; white-space:nowrap; }
.cai-cc--1{top:16%;left:4%;animation-delay:0s} .cai-cc--2{top:22%;right:5%;animation-delay:1s} .cai-cc--3{top:62%;left:3%;animation-delay:2s}
.cai-cc--4{top:70%;right:4%;animation-delay:.5s} .cai-cc--5{top:42%;left:2%;animation-delay:1.8s} .cai-cc--6{top:48%;right:3%;animation-delay:3s}
@keyframes codeFloat { 0%,100%{transform:translateY(0);opacity:.5} 50%{transform:translateY(-10px);opacity:.9} }
.cai-cc-kw{color:#8b5cf6} .cai-cc-str{color:#00C2A8} .cai-cc-p{color:rgba(255,255,255,.5)} .cai-cc-num{color:#f59e0b}

.cai-hero__inner { position:relative; z-index:3; display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; padding-block:80px 64px; width:100%; }
.cai-hero__copy  { display:flex; flex-direction:column; gap:0; }

.cai-hero__eyebrow { display:flex; align-items:center; gap:10px; font-family:var(--font-heading); font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--color-teal); margin-bottom:20px; }
.cai-pulse-dot { width:8px; height:8px; border-radius:50%; background:var(--color-teal); animation:pulseDot 2s ease-in-out infinite; }
@keyframes pulseDot { 0%,100%{box-shadow:0 0 0 0 rgba(0,194,168,.4)} 50%{box-shadow:0 0 0 10px rgba(0,194,168,0)} }

.cai-hero__h1 { font-family:var(--font-heading); font-size:clamp(2.2rem,4.2vw,3.8rem); font-weight:900; line-height:1.08; letter-spacing:-.03em; color:#3d4755; margin-bottom:18px; }
.cai-hero__accent { color:var(--color-teal); text-shadow:0 0 40px rgba(0,194,168,.3); }
.cai-hero__sub { font-size:.92rem; line-height:1.75; color: #57595c; max-width:520px; margin-bottom:26px; }

.cai-hero__badges { display:flex; flex-direction:column; gap:9px; margin-bottom:28px; }
.cai-badge-item { display:flex; align-items:center; gap:10px; font-family:var(--font-heading); font-size:.78rem; font-weight:600; color:#57595c; }
.cai-badge-item i { width:28px; text-align:center; color:var(--color-teal); font-size:.85rem; }

.cai-hero__ctas { display:flex; gap:12px; flex-wrap:wrap; }
.cai-btn-primary { background:var(--color-teal)!important; color:var(--color-navy)!important; border-color:var(--color-teal)!important; font-weight:700!important; }
.cai-btn-primary:hover { background:#00a891!important; border-color:#00a891!important; box-shadow:0 8px 32px rgba(0,194,168,.4)!important; transform:translateY(-2px); }
.cai-btn-outline { background:transparent!important; color:rgba(255,255,255,.8)!important; border:1.5px solid rgba(255,255,255,.25)!important; }
.cai-btn-outline:hover { border-color:var(--color-teal)!important; color:var(--color-teal)!important; background:rgba(0,194,168,.08)!important; }

/* Spec card */
.cai-spec-card { background:rgba(8,15,30,.92); border:1px solid rgba(0,194,168,.2); border-radius:16px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5); backdrop-filter:blur(12px); }
.cai-spec-card__bar { display:flex; align-items:center; gap:8px; padding:12px 16px; background:rgba(255,255,255,.03); border-bottom:1px solid rgba(255,255,255,.06); }
.cai-spec-dots { display:flex; gap:5px; }
.cai-spec-dots span { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.12); }
.cai-spec-title { font-family:var(--font-heading); font-size:.76rem; font-weight:700; color:rgba(255,255,255,.7); display:flex; align-items:center; gap:8px; }
.cai-spec-title i { color:var(--color-teal); }
.cai-spec-body { padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
.cai-spec-section { display:flex; flex-direction:column; gap:4px; }
.cai-spec-label { font-family:var(--font-heading); font-size:.58rem; font-weight:700; letter-spacing:.1em; color:rgba(255,255,255,.35); }
.cai-spec-value { font-family:var(--font-heading); font-size:.78rem; font-weight:600; color:rgba(255,255,255,.75); }
.cai-sv--teal { color:var(--color-teal); }
.cai-spec-tags { display:flex; gap:6px; flex-wrap:wrap; }
.cai-spec-tags span { font-family:var(--font-heading); font-size:.66rem; font-weight:600; padding:3px 9px; border-radius:100px; background:rgba(0,194,168,.1); color:var(--color-teal); border:1px solid rgba(0,194,168,.2); }
.cai-spec-meter { display:flex; align-items:center; gap:10px; }
.cai-meter-bar { flex:1; height:7px; background:rgba(255,255,255,.08); border-radius:4px; overflow:hidden; }
.cai-meter-fill { height:100%; background:linear-gradient(90deg,var(--color-teal),#00e5c8); border-radius:4px; }
.cai-meter-val { font-family:var(--font-heading); font-size:.8rem; font-weight:900; color:var(--color-teal); white-space:nowrap; }
.cai-meter-val small { font-size:.62rem; font-weight:500; color:rgba(255,255,255,.4); }
.cai-spec-status { display:flex; align-items:center; gap:0; }
.cai-ss-step { display:flex; align-items:center; gap:5px; font-family:var(--font-heading); font-size:.64rem; font-weight:600; }
.cai-ss--done{color:#10b981} .cai-ss--active{color:#f59e0b}
.cai-ss-sep { width:14px; height:1px; background:rgba(255,255,255,.15); margin:0 4px; flex-shrink:0; }
.cai-spin { width:8px; height:8px; border-radius:50%; border:1.5px solid #f59e0b; border-top-color:transparent; animation:spin .8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.cai-spec-card__footer { display:flex; align-items:center; gap:16px; padding:9px 16px; border-top:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02); font-family:var(--font-heading); font-size:.67rem; color:rgba(255,255,255,.4); }
.cai-spec-card__footer span { display:flex; align-items:center; gap:5px; }

/* CAPABILITIES */
.cai-eyebrow { color:var(--color-teal)!important; }
.cai-section-sub { font-size:.9rem; color:var(--color-slate); max-width:620px; margin:0 auto; line-height:1.75; text-align:center; }
.cai-cap-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; }
.cai-cap-card { background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:26px 22px; display:flex; flex-direction:column; gap:12px; transition:all var(--transition); }
.cai-cap-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:var(--color-teal); }
.cai-cap-icon { width:66px; height:66px; border-radius:16px; display:flex; align-items:center; justify-content:center; }
.cai-cap-icon svg { width:56px; height:56px; }
.cai-cap-icon--teal{background:rgba(0,194,168,.08)} .cai-cap-icon--purple{background:rgba(139,92,246,.08)} .cai-cap-icon--blue{background:rgba(59,130,246,.08)}
.cai-cap-icon--amber{background:rgba(245,158,11,.08)} .cai-cap-icon--orange{background:rgba(249,115,22,.08)} .cai-cap-icon--rose{background:rgba(225,29,72,.08)}
.cai-cap-card h4 { font-family:var(--font-heading); font-size:.92rem; font-weight:800; color:var(--color-navy); }
.cai-cap-card p  { font-size:.81rem; line-height:1.7; color:var(--color-slate); flex:1; }
.cai-cap-tags { display:flex; gap:5px; flex-wrap:wrap; }
.cai-cap-tags span { font-family:var(--font-heading); font-size:.62rem; font-weight:600; padding:3px 9px; border-radius:100px; background:rgba(14,42,94,.05); color:var(--color-navy); border:1px solid var(--color-border); }

/* PROCESS */
.cai-process { background:#fff; }
.cai-process-track { position:relative; margin-top:52px; }
.cai-track-line { position:absolute; top:68px; left:calc(8.33% + 20px); right:calc(8.33% + 20px); height:2px; background:linear-gradient(90deg,#00C2A8,#8b5cf6,#f59e0b,#3b82f6,#10b981,#00C2A8); z-index:0; }
.cai-process-steps { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; position:relative; z-index:1; }
.cai-ps { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.cai-ps__num { font-family:var(--font-heading); font-size:2.4rem; font-weight:900; color:rgba(14,42,94,.06); line-height:1; margin-bottom:-12px; }
.cai-ps__icon { width:60px; height:60px; background:#fff; border:2px solid var(--color-border); border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; z-index:1; transition:all var(--transition); }
.cai-ps__icon svg { width:44px; height:44px; }
.cai-ps:hover .cai-ps__icon { box-shadow:0 0 0 6px rgba(0,194,168,.08); transform:scale(1.08); }
.cai-ps--1 .cai-ps__icon{border-color:#00C2A8} .cai-ps--2 .cai-ps__icon{border-color:#8b5cf6} .cai-ps--3 .cai-ps__icon{border-color:#f59e0b}
.cai-ps--4 .cai-ps__icon{border-color:#3b82f6} .cai-ps--5 .cai-ps__icon{border-color:#10b981} .cai-ps--6 .cai-ps__icon{border-color:#00C2A8}
.cai-ps h4 { font-family:var(--font-heading); font-size:.84rem; font-weight:800; color:var(--color-navy); }
.cai-ps p  { font-family:var(--font-heading); font-size:.72rem; color:var(--color-slate); line-height:1.6; }
.cai-ps__duration { font-family:var(--font-heading); font-size:.64rem; font-weight:700; padding:3px 10px; border-radius:100px; background:rgba(0,194,168,.08); color:var(--color-teal); border:1px solid rgba(0,194,168,.2); }

/* WHY CUSTOM */
.cai-why-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.cai-why__left h2 { font-size:clamp(1.5rem,3vw,2.2rem); font-weight:900; color:var(--color-navy); margin-bottom:14px; line-height:1.2; }
.cai-why__left p  { font-size:.88rem; line-height:1.75; color:var(--color-slate); margin-bottom:28px; }
.cai-why-compare { border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; }
.cai-wc-row { display:grid; grid-template-columns:1.2fr 1fr 1fr; font-family:var(--font-heading); font-size:.76rem; }
.cai-wc-row--header { background:var(--color-navy); }
.cai-wc-row--header span { color:rgba(255,255,255,.6); font-size:.64rem; font-weight:700; letter-spacing:.08em; padding:8px 12px; }
.cai-wc-row--header span:last-child { color:var(--color-teal); }
.cai-wc-row:not(.cai-wc-row--header) { border-bottom:1px solid var(--color-border); transition:background var(--transition); }
.cai-wc-row:not(.cai-wc-row--header):hover { background:var(--color-off-white); }
.cai-wc-row:not(.cai-wc-row--header) span { padding:9px 12px; }
.cai-wc-row:not(.cai-wc-row--header) span:first-child { color:var(--color-navy); font-weight:600; }
.cai-wc-no{color:var(--color-slate)} .cai-wc-yes{color:var(--color-teal);font-weight:700}

.cai-accuracy-chart { background:var(--color-off-white); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:24px; }
.cai-ac-title { font-family:var(--font-heading); font-size:.72rem; font-weight:700; color:var(--color-navy); margin-bottom:18px; }
.cai-ac-bars  { display:flex; flex-direction:column; gap:12px; }
.cai-acb-row  { display:flex; align-items:center; gap:12px; font-family:var(--font-heading); font-size:.72rem; }
.cai-acb-label { min-width:140px; color:var(--color-slate); font-size:.68rem; }
.cai-acb-track { flex:1; height:26px; background:rgba(14,42,94,.04); border-radius:6px; overflow:hidden; }
.cai-acb-fill  { height:100%; border-radius:6px; display:flex; align-items:center; justify-content:flex-end; padding-right:8px; }
.cai-acb-fill--generic { background:rgba(100,116,139,.35); }
.cai-acb-fill--custom  { background:linear-gradient(90deg,var(--color-teal),#00e5c8); }
.cai-acb-fill span { font-family:var(--font-heading); font-size:.68rem; font-weight:700; color:rgba(255,255,255,.9); }
.cai-ac-legend { display:flex; gap:20px; margin-top:14px; }
.cai-acl { display:flex; align-items:center; gap:7px; font-family:var(--font-heading); font-size:.72rem; color:var(--color-slate); }
.cai-acl span { width:14px; height:8px; border-radius:3px; }
.cai-acl--generic span { background:rgba(100,116,139,.35); }
.cai-acl--custom  span { background:var(--color-teal); }

/* TECH STACK */
.cai-tech { background:var(--color-off-white); }
.cai-tech-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:48px; }
.cai-tg { display:flex; flex-direction:column; gap:12px; }
.cai-tg__label { font-family:var(--font-heading); font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--color-navy); padding-bottom:8px; border-bottom:2px solid rgba(0,194,168,.25); }
.cai-tg__items { display:flex; flex-direction:column; gap:7px; }
.cai-tb { padding:9px 14px; border-radius:10px; background:#fff; border:1px solid var(--color-border); transition:all var(--transition); cursor:default; }
.cai-tb:hover { background:rgba(0,194,168,.06); border-color:rgba(0,194,168,.3); }
.cai-tb span { font-family:var(--font-heading); font-size:.78rem; font-weight:600; color:var(--color-navy); }

/* CTA */
.cai-cta { position:relative; background:var(--color-midnight); padding:80px 0; overflow:hidden; }
.cai-cta__bg { position:absolute; inset:0; background:radial-gradient(ellipse at 10% 50%,rgba(0,194,168,.08) 0%,transparent 60%),radial-gradient(ellipse at 90% 50%,rgba(139,92,246,.06) 0%,transparent 60%); }
.cai-cta__inner { position:relative; z-index:1; display:grid; grid-template-columns:120px 1fr; gap:48px; align-items:center; }
.cai-cta__left { flex-shrink:0; }
.cai-cta__icon { width:110px; height:110px; }
.cai-cta__icon svg { width:100%; height:100%; }
.cai-cta__right { display:flex; flex-direction:column; gap:14px; }
.cai-cta__right h2 { font-family:var(--font-heading); font-size:clamp(1.6rem,3vw,2.4rem); font-weight:900; color:#fff; line-height:1.15; }
.cai-cta__right p  { font-size:.9rem; color:rgba(255,255,255,.6); line-height:1.75; max-width:580px; }
.cai-cta__btns { display:flex; gap:12px; flex-wrap:wrap; }

/* RESPONSIVE */
@media(max-width:1200px){.cai-cap-grid{grid-template-columns:repeat(2,1fr)}.cai-process-steps{grid-template-columns:repeat(3,1fr)}.cai-track-line{display:none}.cai-tech-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1024px){.cai-hero__inner{grid-template-columns:1fr}.cai-hero__spec{display:none}.cai-why-grid{grid-template-columns:1fr}.cai-cta__inner{grid-template-columns:1fr}.cai-cta__left{display:none}}
@media(max-width:768px){.cai-hero__code{display:none}.cai-cap-grid{grid-template-columns:1fr}.cai-process-steps{grid-template-columns:repeat(2,1fr)}.cai-tech-grid{grid-template-columns:1fr}}