/* Shared MAX - AI bots app mockup (sky panel, window, phone, tiles). Used by index.html and bots.html */
.stage{--acc:#1f6bff;--acc2:#29b6f6;font-family:Inter,system-ui,sans-serif;color:#0b1220;line-height:1.55}
.stage{position:relative;margin:36px auto 0;max-width:1180px;border-radius:32px;padding:56px 56px;background:linear-gradient(160deg,#dcebff 0%,#a9cdfd 45%,#7fb2fb 100%);overflow:hidden;text-align:left}
.stage:before{content:"";position:absolute;inset:0;background:radial-gradient(500px 260px at 20% 10%,rgba(255,255,255,.7),transparent),radial-gradient(400px 300px at 90% 90%,rgba(255,255,255,.35),transparent)}
.comp{position:relative;display:flex;gap:32px;align-items:center;justify-content:center}
.win{flex:1;min-width:0;max-width:860px;background:#fff;border-radius:16px;box-shadow:0 40px 90px -30px rgba(15,50,130,.45),0 0 0 1px rgba(15,50,130,.06);display:grid;grid-template-columns:230px 1fr 210px;height:520px;overflow:hidden;font-size:12px}
.side{border-right:1px solid #eef1f6;background:#fbfcfe;display:flex;flex-direction:column;min-width:0}
.tl{display:flex;gap:6px;padding:14px 14px 10px}.tl i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.tl i:nth-child(2){background:#febc2e}.tl i:nth-child(3){background:#28c840}
.srch{margin:0 12px 8px;background:#eef2f8;border-radius:8px;padding:6px 10px;color:#8b95a8}
.bl{flex:1;overflow:hidden;padding:0 6px}.bi{display:flex;gap:9px;padding:7px 8px;border-radius:9px;align-items:center}.bi.on{background:#e8f0ff}
.bi b{display:block;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bi small{display:block;color:#7b8598;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bi div{min-width:0;flex:1}.bi em{font-style:normal;color:#9aa3b5;font-size:10px;align-self:flex-start;margin-top:2px}
.av{flex:none;width:28px;height:28px;border-radius:50% 50% 46% 54%/58% 52% 48% 42%;position:relative;background:var(--c)}
.av:after{content:"";position:absolute;left:30%;top:36%;width:14%;height:22%;background:#fff;border-radius:3px;box-shadow:6px 0 0 #fff}
.av.l{width:52px;height:52px}.av.l:after{box-shadow:11px 0 0 #fff}
.me{border-top:1px solid #eef1f6;padding:10px 14px;display:flex;gap:8px;align-items:center;color:#5a6478}.me i{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#ffd29d,#ff8a65)}
.main{display:flex;flex-direction:column;min-width:0}.top{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #eef1f6;font-weight:600}.top .av{width:20px;height:20px}.top .av:after{box-shadow:3px 0 0 #fff}
.thr{flex:1;padding:14px 18px;display:flex;flex-direction:column;gap:9px;overflow:hidden}.when{align-self:center;color:#9aa3b5;font-size:10px}
.m{max-width:78%;padding:9px 12px;border-radius:14px;line-height:1.45}.m.u{align-self:flex-end;background:#0b1220;color:#fff;border-bottom-right-radius:4px}.m.a{align-self:flex-start;background:#f0f2f6;border-bottom-left-radius:4px}.m.a a{color:var(--acc);font-weight:600}
.fc{align-self:flex-start;display:flex;gap:10px;align-items:center;border:1px solid #e6eaf2;border-radius:12px;padding:8px 12px;background:#fff}.fc i{width:26px;height:30px;border-radius:5px;background:#e8f0ff;color:var(--acc);font-style:normal;font-size:9px;font-weight:800;display:grid;place-items:center}.fc small{display:block;color:#8b95a8;font-size:10px}
.tc{align-self:flex-start;border:1px solid #e6eaf2;border-radius:12px;padding:9px 12px;background:#fff;min-width:220px}.tc p{display:flex;gap:7px;align-items:center;padding:2px 0}.tc p:before{content:"✓";width:14px;height:14px;border-radius:50%;background:#22c55e;color:#fff;font-size:9px;display:grid;place-items:center}
.inp{margin:10px 14px 14px;border:1px solid #e6eaf2;border-radius:999px;padding:8px 12px;color:#9aa3b5;display:flex;justify-content:space-between}.inp b{width:20px;height:20px;border-radius:50%;background:#0b1220}
.rt{border-left:1px solid #eef1f6;padding:14px;display:flex;flex-direction:column;gap:10px;background:#fbfcfe}.rt h5{font-size:11px;color:#8b95a8;text-transform:uppercase;letter-spacing:.06em;margin-top:4px}
.mini{border-radius:10px;height:100px;background:linear-gradient(#fff,#fff) padding-box;border:1px solid #e6eaf2;padding:8px;display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.mini span{border-radius:3px;background:#e8f0ff}.mini span:nth-child(3n){background:#bfe0ff}.mini span:nth-child(4n){background:#c9f2df}.mini span:nth-child(7n){background:#1f6bff}
.r{display:flex;gap:8px}.r:before{content:"";flex:none;width:12px;height:12px;margin-top:2px;border-radius:50%;border:2px solid var(--acc)}.r small{display:block;color:#8b95a8;font-size:10px}.r.off:before{border-color:#c2c9d6}
.iph{flex:none;width:250px;border-radius:40px;background:#0b1220;padding:9px;box-shadow:0 40px 80px -30px rgba(15,50,130,.55)}
.iph .s{background:#fff;border-radius:32px;overflow:hidden;height:500px;padding:12px 14px;font-size:11px;position:relative}
.sb{display:flex;justify-content:space-between;font-weight:700;font-size:11px;padding:2px 8px 10px}.sb:after{content:"▮▮ ◔";letter-spacing:1px;font-size:8px}
.isl{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:70px;height:20px;border-radius:999px;background:#0b1220}
.ih{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.ih i{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#ffd29d,#ff8a65)}.ih span{color:#5a6478;font-size:14px;letter-spacing:6px}
.ig{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center;margin-bottom:12px}.ig div{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:9px;color:#5a6478}
.il .bi{padding:6px 2px;border-radius:0;border-bottom:1px solid #f0f2f6}
.tile{position:absolute;width:58px;height:58px;border-radius:16px;background:#fff;box-shadow:0 18px 36px -14px rgba(15,50,130,.45);display:grid;place-items:center;z-index:2;animation:fl 6s ease-in-out infinite}
.tile svg{width:30px;height:30px}.t1{left:18px;top:28px}.t2{left:6px;bottom:90px;animation-delay:-2s}.t3{right:290px;top:14px;animation-delay:-1s}.t4{right:18px;bottom:24px;animation-delay:-3s}.t5{right:22px;top:40px;animation-delay:-4s}
@keyframes fl{50%{transform:translateY(-8px)}}
@media(max-width:1100px){.rt{display:none}.win{grid-template-columns:210px 1fr}.t3{right:270px}}
@media(max-width:900px){.stage{padding:40px 18px;border-radius:24px}.comp{flex-direction:column;gap:36px}.win{width:100%;height:auto}.thr{overflow:visible}.t3{right:auto;left:50%;top:auto;bottom:520px}}
@media(min-width:901px){.stage{margin-top:24px;padding:26px 56px}.win{height:430px}.iph{width:215px}.iph .s{height:418px}.thr{gap:7px;padding:10px 16px}.m{padding:7px 11px}}
@media(max-width:640px){.win{grid-template-columns:1fr}.side{display:none}.m{max-width:88%}.tc{min-width:0}.tile{width:44px;height:44px;border-radius:12px}.tile svg{width:22px;height:22px}.t1{left:8px;top:8px}.t5{right:8px;top:8px}.t2{left:8px;bottom:120px}.t4{right:8px;bottom:12px}.t3{display:none}.stage{padding:58px 12px 30px;margin-left:-12px;margin-right:-12px}.tl{position:absolute}.main .top{padding-left:64px}.win{position:relative}}
@media(min-width:901px) and (min-height:880px){.win{height:470px}.iph .s{height:456px}.iph{width:230px}.stage{padding:34px 56px}}
@media(max-width:640px){.t2,.t4{display:none}}

/* Window-frame product shot rows (index, email) */
.crow{display:grid;grid-template-columns:.8fr 1.4fr;gap:48px;align-items:center}.crow+.crow{margin-top:88px}.crow.rev{grid-template-columns:1.4fr .8fr}.crow.rev .ctxt{order:2}
.ctxt .h2,.ctxt .lead{text-align:left;margin-left:0}.ctxt .lead{margin:14px 0 20px;font-size:17px}.ctxt ul{list-style:none}.ctxt li{padding:5px 0}.ctxt li:before{content:"✓ ";color:#1f6bff;font-weight:700}
.cstage{margin:0!important;padding:40px!important;border-radius:28px}.cwin{position:relative;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(15,50,130,.45),0 0 0 1px rgba(15,50,130,.06)}
.cbar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-bottom:1px solid #eef1f6;background:#fbfcfe}.cbar i{width:10px;height:10px;border-radius:50%;background:#ff5f57}.cbar i:nth-child(2){background:#febc2e}.cbar i:nth-child(3){background:#28c840}.cbar span{flex:1;text-align:center;font-size:11px;color:#8b95a8;margin-right:46px}
.cwin img{display:block;width:100%;height:auto}.ct1{right:10px;top:10px}.ct2{left:10px;bottom:10px;animation-delay:-2s}
@media(max-width:900px){.crow,.crow.rev{grid-template-columns:1fr;gap:28px}.crow.rev .ctxt{order:0}.ctxt .h2,.ctxt .lead{text-align:center;margin-left:auto;margin-right:auto}.ctxt ul{max-width:340px;margin:0 auto}.crmx{padding:64px 0 24px}.crow+.crow{margin-top:64px}}
@media(max-width:640px){.cstage{padding:22px 12px!important;border-radius:20px;margin:0 -4px!important}.cstage .tile{display:none}.cbar{height:22px}.cbar i{width:7px;height:7px}.cbar span{font-size:9px}}

/* Ad-style promo cards (index, email) */
.ads{padding:40px 0 72px}.adrow{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:18px}
.ad{position:relative;overflow:hidden;border-radius:24px;background:radial-gradient(420px 260px at 75% 70%,rgba(41,182,246,.28),transparent 70%),linear-gradient(160deg,#141b2b 0%,#0a0f1a 60%,#05080f 100%);color:#fff;min-height:420px;padding:26px 26px 22px;display:flex;flex-direction:column;box-shadow:0 30px 70px -30px rgba(5,10,30,.6);isolation:isolate}
.ad:before{content:"";position:absolute;inset:auto -10% 0 -10%;height:34%;background:linear-gradient(180deg,#3a2a1e,#1f150e);transform:perspective(400px) rotateX(55deg);transform-origin:bottom;opacity:.55;z-index:-1}
.ad .lap{position:absolute;right:-4%;bottom:12%;width:62%;max-width:360px;z-index:-1;opacity:.9;filter:drop-shadow(0 20px 30px rgba(0,0,0,.6))}
.ad .k{font:600 11px/1 Inter,system-ui,sans-serif;letter-spacing:.18em;color:#9fb3d1;text-transform:uppercase}
.ad h3{font-family:Anton,"Bebas Neue",Impact,"Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.005em;margin:14px 0 12px;font-size:clamp(40px,4.4vw,64px)}
.ad h3 span{display:block;color:#38c6ff}.ad.sm h3{font-size:clamp(34px,3vw,44px)}
.ad p{font-size:15px;color:#c9d4e6;max-width:300px}
.ad .af{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:18px}
.ad .af .lg{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;letter-spacing:-.01em}.ad .af .lg img{width:28px;height:28px}
.ad .af a{font-size:13px;font-weight:600;padding:9px 14px;border-radius:999px;background:#fff;color:#0b1220;white-space:nowrap}.ad .af a:hover{background:#38c6ff}
@media(max-width:1000px){.adrow{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:10px;-webkit-overflow-scrolling:touch}.adrow .ad{flex:0 0 min(420px,86%);scroll-snap-align:center;aspect-ratio:1/1;min-height:0}.ad h3,.ad.sm h3{font-size:clamp(38px,11vw,58px)}}
.ad .af .lg{white-space:nowrap}.ad.sm .af .lg span{display:none}
@media(max-width:1000px){.ad h3,.ad.sm h3{font-size:clamp(30px,9vw,48px)}.ad .lap{width:52%;bottom:16%;opacity:.55}.ad p{font-size:14px;max-width:72%}.ad .af a{font-size:12px;padding:8px 12px}}
.tile img{width:30px;height:30px;display:block}@media(max-width:640px){.tile img{width:22px;height:22px}}
.tmnote{font-size:12px;color:var(--mut);margin-top:14px;flex-basis:100%}

/* integrations: works strip, connect + create cards (shared by index & leads) */
.works{padding:36px 0 0;text-align:center}.works p{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--mut);margin-bottom:16px}
.wl{display:flex;justify-content:center;flex-wrap:wrap;gap:14px 34px}.wl span{display:flex;align-items:center;gap:10px;padding:6px;white-space:nowrap}.wl img{width:26px;height:26px}.wl b{font-weight:600;color:#33415c;font-size:15px}
#connect .card,#create .card{background:#fff;border:1px solid var(--line);border-radius:22px;transition:.25s;box-shadow:0 1px 2px rgba(15,50,130,.04)}
#connect .card:hover,#create .card:hover{transform:translateY(-4px);box-shadow:0 24px 48px -24px rgba(15,50,130,.25)}
#connect .card h3,#create .card h3{margin:12px 0 8px;letter-spacing:-.02em}#create .crh h3{margin:0}
#connect .card p,#create .card p{color:var(--mut);font-size:15px}
.conn{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.conn .card{display:flex;flex-direction:column;padding:22px}.conn .card h3{font-size:16px}
.ci{width:48px;height:48px;border-radius:14px;background:#fff;box-shadow:0 10px 24px -12px rgba(15,50,130,.4);display:grid;place-items:center}.ci svg{width:30px;height:30px}.ci img{width:28px;height:28px}
.cb{align-self:flex-start;margin-top:auto;padding-top:0;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;background:#0b1220;color:#fff}.conn .cb{margin-top:16px}.cb.done{background:#e7f8f0;color:#059669}
#create .card{padding:22px}.crg{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}.crh{display:flex;align-items:center;gap:12px;margin-bottom:10px}.crh img{width:40px;height:40px;border-radius:10px}.crh div{flex:1}.crh small{color:var(--mut);font-size:13px}
.sendr{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}.thumb{padding:10px 12px;border-radius:10px;font-size:13px;font-weight:600;color:#fff}.t-cv{background:linear-gradient(135deg,#2563eb,#60a5fa)}.t-hf{background:#111827}.arr{color:#2563eb;font-weight:700}.dest{padding:8px 12px;border:1px solid #cfe0ff;background:#eef5ff;border-radius:10px;font-size:13px;color:#1e3a8a;font-weight:600}
@media(max-width:900px){.conn{grid-template-columns:1fr 1fr}}@media(max-width:700px){.crg{grid-template-columns:1fr}}@media(max-width:640px){.conn{grid-template-columns:1fr}}
#connect .h2,#create .h2{max-width:none}