/* ═══════════════════════════════════════════════════════════════
   BUILDAI V2 — Electric Blue accent · White + Yellow theme
   SaaS cards with expandable details, process rail, badges.
   ═══════════════════════════════════════════════════════════════ */

/* ─── PAGE-WIDE: White + Fresh Yellow theme ─── */
body[data-page="buildai"]{
  --paper-3:linear-gradient(160deg,#FFFFFF 0%,#FFFDF2 50%,#FFF8CC 100%);
}
[data-page="buildai"] .gv-section--alt{background:linear-gradient(160deg,#FFFFFF 0%,#FFFDF2 40%,#FFF8CC 80%,#FFE95A 100%)}
[data-page="buildai"] .bai-integrations{background:linear-gradient(160deg,#FFFDF5 0%,#FFFAE8 50%,#FFF8DC 100%)}
[data-page="buildai"] .bai-int-badge{background:rgba(255,255,255,0.7);border-color:rgba(0,0,0,0.08);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
[data-page="buildai"] .bai-int-badge:hover{border-color:var(--accent);background:rgba(255,255,255,0.9)}

/* ─── HERO ─── */
.bai-hero{
  background:linear-gradient(135deg,#fff 0%,#eaf5f6 40%,var(--brand-teal-light) 100%);
  position:relative;
  padding:calc(var(--nav-h) + var(--sp-6)) 0 var(--sp-5);min-height:70vh;display:flex;align-items:center;
}
.bai-hero::after{
  content:'';position:absolute;top:20%;left:50%;transform:translateX(-50%);
  width:60%;height:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(26,136,152,0.06) 0%,transparent 70%);
}
.bai-hero-inner{max-width:800px;text-align:center;margin:0 auto}
.bai-hero-inner .gv-lead{margin-bottom:var(--sp-4)}
.bai-hero-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* ─── DECRYPTED TEXT STACK ─── */
.bai-decrypt-stack{
  display:flex;flex-direction:column;align-items:center;gap:0;
  margin-bottom:var(--sp-3);
  min-height:398px;
}
@media(max-width:640px){
  .bai-decrypt-stack{min-height:200px}
}
.bai-decrypt-line{font-family:'Sora',sans-serif;font-weight:800;line-height:1.05}
.bai-decrypt-sub{
  font-size:clamp(1.2rem,2.8vw,2rem);
  color:var(--ink);letter-spacing:0.03em;font-weight:600;
}
.bai-decrypt-primary{
  font-size:var(--fs-h1);
  letter-spacing:var(--ls-tight);line-height:1.02;
}
@media(max-width:640px){
  .bai-decrypt-sub{font-size:clamp(1rem,4vw,1.4rem)}
}

/* ─── SECTION HEAD ─── */
.bai-section-head{max-width:640px;margin-bottom:var(--sp-5)}
.bai-section-head .gv-h2{margin-top:var(--sp-3)}

/* ─── SAAS-STYLE CARDS (with expandable detail) ─── */
.bai-saas-grid{gap:var(--sp-3)}
.bai-saas-card{display:flex;flex-direction:column;gap:12px;padding:var(--sp-4);transition:transform .5s var(--ease),border-color .4s var(--ease),box-shadow .5s var(--ease)}
.bai-saas-card:hover{border-color:var(--accent-tint);box-shadow:0 24px 60px -30px rgba(100,116,139,0.12)}
.bai-saas-icon{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--accent-tint);color:var(--accent);flex-shrink:0}
.bai-saas-icon svg{width:22px;height:22px}
.bai-saas-card .gv-h3{margin-top:4px}
.bai-saas-card .gv-body{flex:1}

/* ─── CARD TEASER + DETAIL TRIGGER ─── */
.bai-card-teaser{font-size:var(--fs-small);color:var(--ink-dim);line-height:1.7;padding:10px 0 2px;border-top:1px solid var(--hair);margin:0}
.bai-saas-toggle{margin-top:10px;font-size:10px;padding:10px 20px;width:fit-content;cursor:pointer;min-height:40px}
.bai-saas-toggle:hover,.bai-saas-toggle:focus-visible{color:var(--accent);border-color:var(--accent)}
.bai-saas-toggle:focus-visible{outline:none;box-shadow:var(--glass-teal-glow)}

/* ─── FEATURE DETAIL MODAL ─── */
.bai-modal-overlay{position:fixed;inset:0;z-index:9980;background:rgba(14,14,13,0.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.bai-modal-overlay.open{opacity:1;pointer-events:auto}
.bai-modal{position:fixed;top:50%;left:50%;z-index:9981;width:min(680px,92vw);max-height:82vh;
  background:var(--glass-3-bg);backdrop-filter:blur(var(--glass-3-blur)) saturate(1.4);-webkit-backdrop-filter:blur(var(--glass-3-blur)) saturate(1.4);
  border:1px solid var(--glass-3-border);border-radius:var(--r-md);box-shadow:0 40px 100px -30px rgba(18,107,120,0.28);display:flex;flex-direction:column;overflow:hidden;
  opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.96) translateY(10px);
  transition:opacity .35s var(--ease),transform .35s var(--ease);}
.bai-modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1) translateY(0)}
.bai-modal-header{display:flex;align-items:center;gap:14px;padding:20px 22px;border-bottom:1px solid var(--hair);flex-shrink:0}
.bai-modal-icon{width:40px;height:40px;border-radius:12px;background:var(--accent-tint);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bai-modal-icon svg{width:20px;height:20px}
.bai-modal-title{font-family:'Sora',sans-serif;font-weight:700;font-size:1.15rem;color:var(--ink);flex:1;letter-spacing:-.01em}
.bai-modal-close{width:34px;height:34px;border-radius:50%;border:1px solid var(--hair);background:transparent;color:var(--ink-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:all .3s var(--ease);flex-shrink:0}
.bai-modal-close:hover{border-color:var(--hair-strong);color:var(--ink);background:var(--paper-3)}
.bai-modal-body{flex:1;overflow-y:auto;padding:22px;scrollbar-width:thin;scrollbar-color:var(--hair-strong) transparent}
.bai-modal-body::-webkit-scrollbar{width:6px}
.bai-modal-body::-webkit-scrollbar-track{background:transparent}
.bai-modal-body::-webkit-scrollbar-thumb{background:var(--hair-strong);border-radius:3px}
.bai-modal-section{margin-bottom:22px}
.bai-modal-section:last-child{margin-bottom:0}
.bai-modal-section-label{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.bai-modal-section-label::before{content:'';width:16px;height:1px;background:var(--accent)}
.bai-modal-section p{font-size:var(--fs-small);color:var(--ink-dim);line-height:1.75;margin:0}
.bai-modal-section ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.bai-modal-section ul li{font-size:var(--fs-small);color:var(--ink-dim);line-height:1.6;padding-left:16px;position:relative}
.bai-modal-section ul li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.bai-modal-workflow{counter-reset:baistep}
.bai-modal-workflow li{counter-increment:baistep;padding-left:26px}
.bai-modal-workflow li::before{content:counter(baistep);width:16px;height:16px;border-radius:5px;background:var(--accent-tint);color:var(--accent);font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;top:1px}
.bai-modal-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bai-modal-compare-col{border:1px solid var(--hair);border-radius:12px;padding:14px}
.bai-modal-compare-col h5{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;margin:0 0 10px;color:var(--ink-muted)}
.bai-modal-compare-col.is-us h5{color:var(--accent)}
.bai-modal-compare-col.is-us{border-color:var(--accent-tint);background:var(--accent-tint)}
.bai-modal-compare-col ul{gap:6px}
.bai-modal-compare-col li{font-size:12px}
.bai-modal-faq{display:flex;flex-direction:column;gap:14px}
.bai-modal-faq-item dt{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:5px}
.bai-modal-faq-item dd{font-size:var(--fs-small);color:var(--ink-dim);line-height:1.7;margin:0}
@media(max-width:640px){
  .bai-modal{top:auto;left:0;right:0;bottom:0;width:100%;max-height:88vh;border-radius:20px 20px 0 0;
    transform:translateY(100%);transition:opacity .35s var(--ease),transform .4s var(--ease)}
  .bai-modal.open{transform:translateY(0)}
  .bai-modal-compare{grid-template-columns:1fr}
  .bai-modal-header{padding:16px 18px}
  .bai-modal-body{padding:18px}
}

/* ─── PROCESS (DARK SECTION) ─── */
.bai-process{padding:var(--sp-6) 0}
.bai-process-head{max-width:640px;margin-bottom:var(--sp-5)}
.bai-process-head .gv-h2{margin-top:var(--sp-3)}
.bai-process-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}
.bai-process-step{position:relative}
.bai-step-gloss{background:rgba(250,249,246,0.04);border:1px solid var(--hair-on-ink);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-3);transition:border-color .4s var(--ease),transform .5s var(--ease);height:100%}
.bai-step-gloss:hover{border-color:rgba(100,116,139,0.25);transform:translateY(-4px)}
.bai-step-num{font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(1.4rem,2.2vw,2rem);color:var(--accent-bright);margin-bottom:12px;letter-spacing:-0.02em}
.bai-step-gloss .gv-h3{color:var(--on-ink);margin-bottom:8px}
.bai-step-gloss .gv-body{color:var(--on-ink-dim);font-size:var(--fs-small)}
@media(max-width:900px){.bai-process-rail{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.bai-process-rail{grid-template-columns:1fr}}

/* ─── INTEGRATION BADGES ─── */
.bai-integrations{padding:var(--sp-5) 0}
.bai-int-head{max-width:600px;margin:0 auto var(--sp-5);text-align:center}
.bai-int-head .gv-h2{margin-top:var(--sp-3)}
.bai-int-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.bai-int-badge{font-family:'Inter',sans-serif;font-size:12px;font-weight:500;color:var(--ink-dim);border:1px solid var(--hair-strong);border-radius:999px;padding:10px 22px;background:var(--paper-2);transition:all .3s var(--ease);letter-spacing:.3px}
.bai-int-badge:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-tint);transform:translateY(-2px)}

/* ─── CTA ─── */
.bai-cta-block{max-width:620px;text-align:center;margin:0 auto}
.bai-cta-block .gv-h2{margin-bottom:var(--sp-1)}
.bai-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ─── CHAT WIDGET POLISH (scoped to buildai, styling-only override) ─── */
[data-page="buildai"] #cwpPanel{box-shadow:-24px 0 70px -10px rgba(14,14,13,0.16)}
[data-page="buildai"] .cwp-header{padding:20px 22px;gap:12px}
[data-page="buildai"] .cwp-header img{height:30px;border-radius:8px}
[data-page="buildai"] .cwp-header h3{letter-spacing:1.5px;font-size:15px}
[data-page="buildai"] .cwp-tab{padding:14px 6px;font-weight:600}
[data-page="buildai"] .cwp-msgs{padding:20px;gap:12px;background:linear-gradient(180deg,var(--paper-3) 0%,var(--paper-2) 140px)}
[data-page="buildai"] .cwp-msg{max-width:84%;padding:12px 16px;line-height:1.65;box-shadow:0 6px 20px -14px rgba(14,14,13,0.25)}
[data-page="buildai"] .cwp-msg.bot{border-radius:14px 14px 14px 4px}
[data-page="buildai"] .cwp-msg.user{border-radius:14px 14px 4px 14px}
[data-page="buildai"] .cwp-suggestions{padding:10px 20px 0}
[data-page="buildai"] .cwp-suggestions button{padding:7px 14px;font-weight:500}
[data-page="buildai"] .cwp-suggestions button:hover{background:var(--accent-tint);color:var(--accent);border-color:var(--accent-tint)}
[data-page="buildai"] .cwp-input-row{padding:14px 20px 18px;gap:10px}
[data-page="buildai"] .cwp-input{padding:13px 18px;font-size:13.5px}
[data-page="buildai"] .cwp-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
[data-page="buildai"] .cwp-send{width:44px;height:44px}
[data-page="buildai"] .cwp-send:hover{background:var(--accent)}
[data-page="buildai"] .cwp-form{padding:22px;gap:14px}
[data-page="buildai"] .cwp-form input,[data-page="buildai"] .cwp-form textarea{padding:13px 16px}
[data-page="buildai"] .cwp-form input:focus,[data-page="buildai"] .cwp-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
[data-page="buildai"] #cwpToggleBtn{width:56px;height:56px}
[data-page="buildai"] #cwpToggleBtn:hover{background:var(--accent)}
@media(max-width:640px){
  [data-page="buildai"] .cwp-msg{max-width:90%}
}
@media(prefers-reduced-motion:reduce){
  .bai-saas-card,.bai-modal-backdrop.open .bai-modal{animation:none;transition:none}
  .bai-decrypt-line{animation:none}
}