/* ============================================================
   AITIZER feature-page components — self-contained, brand-scoped.
   Harvested/rebuilt from the AITIZER product site so the marketing
   pages can show real product UI (WhatsApp agent chat, permission
   matrix, view tabs, live tables, endpoints) instead of stock art.
   Tokens reuse aitizer-showcase.css (--az-grad, --az-border…) with
   safe fallbacks so this file works on its own.
   ============================================================ */
:root{
  --azc-violet:#8B5CF6; --azc-cyan:#22D3EE; --azc-pink:#EC4899; --azc-emerald:#28C840;
  --azc-ink:#E8E6F0; --azc-dim:#A8A2BE; --azc-mute:#7E8597;
  --azc-surface:rgba(18,16,30,.9); --azc-line:rgba(139,92,246,.18);
  --azc-mono:ui-monospace,Menlo,Consolas,monospace;
}

/* window frame */
.azc-win{position:relative;border:1px solid var(--az-border,var(--azc-line));border-radius:18px;
  background:linear-gradient(180deg,rgba(18,16,30,.92),rgba(10,8,20,.86));
  box-shadow:0 44px 110px -45px rgba(0,0,0,.85),0 0 0 1px rgba(139,92,246,.06);overflow:hidden}
.azc-win__bar{display:flex;align-items:center;gap:.7rem;padding:.75rem 1rem;border-bottom:1px solid var(--az-border,var(--azc-line));background:rgba(255,255,255,.02)}
.azc-win__dots{display:flex;gap:.42rem}
.azc-win__dots i{width:11px;height:11px;border-radius:50%;background:#3a3550;display:inline-block}
.azc-win__dots i:nth-child(1){background:#ff5f57}.azc-win__dots i:nth-child(2){background:#febc2e}.azc-win__dots i:nth-child(3){background:#28c840}
.azc-win__title{font-size:.82rem;color:#cdd2e0;font-weight:600;display:flex;align-items:center;gap:.45rem}
.azc-win__meta{margin-left:auto;font-size:.72rem;color:var(--azc-mute);font-family:var(--azc-mono)}
.azc-live{width:8px;height:8px;border-radius:50%;background:var(--azc-emerald);box-shadow:0 0 10px var(--azc-emerald);animation:azc-pulse 1.6s infinite}
.azc-win__foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.6rem 1rem;border-top:1px solid var(--az-border,var(--azc-line));font-size:.72rem;color:var(--azc-mute)}
.azc-win__foot .mono{font-family:var(--azc-mono)}
.azc-spin{width:11px;height:11px;border-radius:50%;border:2px solid rgba(139,92,246,.3);border-top-color:var(--azc-violet);display:inline-block;animation:azc-spin .8s linear infinite;vertical-align:-1px;margin-right:.35rem}
@keyframes azc-spin{to{transform:rotate(360deg)}}
@keyframes azc-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* split body (chat + perms) */
.azc-split{display:grid;grid-template-columns:1.1fr .9fr;gap:0}
.azc-split>*+*{border-left:1px solid var(--az-border,var(--azc-line))}
@media(max-width:680px){.azc-split{grid-template-columns:1fr}.azc-split>*+*{border-left:0;border-top:1px solid var(--az-border,var(--azc-line))}}

/* whatsapp chat */
.azc-chat{padding:1rem;display:flex;flex-direction:column;gap:.55rem;min-height:330px;background:radial-gradient(120% 70% at 50% 0,rgba(139,92,246,.06),transparent)}
.azc-chat__head{display:flex;align-items:center;gap:.7rem;padding-bottom:.7rem;border-bottom:1px solid var(--az-border,var(--azc-line))}
.azc-chat__av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#25D366,#128C7E);flex:0 0 auto;display:grid;place-items:center;color:#fff}
.azc-chat__who strong{display:block;font-size:.9rem;color:#fff;line-height:1.1}
.azc-chat__who em{font-size:.72rem;color:var(--azc-mute);font-style:normal}
.azc-chat__badge{margin-left:auto;font-size:.66rem;padding:.2rem .55rem;border-radius:999px;background:rgba(37,211,102,.14);color:#4ade80;border:1px solid rgba(37,211,102,.3)}
.azc-chat__body{display:flex;flex-direction:column;gap:.5rem;flex:1}
.azc-msg{max-width:80%;padding:.5rem .75rem;border-radius:14px;font-size:.84rem;line-height:1.42;animation:azc-pop .35s ease;color:var(--azc-ink)}
.azc-msg.in{align-self:flex-start;background:#1b1b27;border:1px solid rgba(255,255,255,.06);border-bottom-left-radius:4px}
.azc-msg.out{align-self:flex-end;background:linear-gradient(135deg,#1f6f4a,#178a55);border-bottom-right-radius:4px;color:#fff}
.azc-msg code{background:rgba(0,0,0,.28);padding:.05rem .3rem;border-radius:5px;font-size:.78rem;font-family:var(--azc-mono)}
@keyframes azc-pop{from{opacity:0;transform:translateY(7px) scale(.98)}to{opacity:1;transform:none}}

/* permission matrix */
.azc-perms{padding:1rem 1.1rem}
.azc-perms__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.azc-perms__head strong{font-size:.88rem;color:#fff}
.azc-perms__head .mono{font-size:.72rem;color:var(--azc-mute);font-family:var(--azc-mono)}
.azc-prow{display:grid;grid-template-columns:1fr 26px 26px 26px 26px;gap:.25rem;align-items:center;padding:.38rem .15rem;border-bottom:1px solid rgba(255,255,255,.045);font-size:.82rem;color:#cdd2e0}
.azc-prow.head{color:var(--azc-mute);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--az-border,var(--azc-line))}
.azc-prow i{text-align:center;font-style:normal}
.azc-prow i.y{color:#4ade80}.azc-prow i.n{color:#44485a}
.azc-pfoot{display:flex;gap:.4rem;margin-top:.7rem}
.azc-chip{font-size:.65rem;padding:.22rem .55rem;border-radius:999px;font-weight:600}
.azc-chip.violet{background:rgba(139,92,246,.16);color:#c4b5fd}
.azc-chip.cyan{background:rgba(6,182,212,.16);color:#67e8f9}

/* view tabs + panels */
.azc-viewbar{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1rem}
.azc-viewtab{display:inline-flex;align-items:center;gap:.42rem;padding:.5rem .85rem;border-radius:10px;border:1px solid var(--az-border,var(--azc-line));background:rgba(255,255,255,.03);color:var(--azc-dim);font-size:.84rem;font-weight:600;cursor:pointer;transition:.2s}
.azc-viewtab svg{width:16px;height:16px}
.azc-viewtab:hover{color:#fff;border-color:var(--azc-violet)}
.azc-viewtab.active{background:linear-gradient(135deg,rgba(139,92,246,.95),rgba(6,182,212,.88));color:#fff;border-color:transparent;box-shadow:0 10px 26px -10px rgba(139,92,246,.6)}
.azc-viewpanel{display:none}
.azc-viewpanel.active{display:block;animation:azc-fade .35s ease}
@keyframes azc-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* live table */
.azc-tblwrap{padding:.4rem .2rem}
.azc-tbl{width:100%;font-size:.8rem;border-collapse:collapse}
.azc-tbl th{text-align:left;color:var(--azc-mute);font-weight:600;padding:.5rem .7rem;border-bottom:1px solid var(--az-border,var(--azc-line));font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.azc-tbl td{padding:.55rem .7rem;border-bottom:1px solid rgba(255,255,255,.045);color:#cdd2e0;white-space:nowrap}
.azc-aichip{font-size:.64rem;padding:.12rem .45rem;border-radius:6px;background:rgba(139,92,246,.18);color:#c4b5fd;font-weight:600;display:inline-flex;align-items:center;gap:.2rem}
.azc-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:.35rem;vertical-align:0}
.azc-score{font-weight:700}

/* kanban / gallery / form / calendar mocks */
.azc-kb{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;padding:.5rem .3rem}
.azc-kb__col>span{font-size:.7rem;color:var(--azc-mute);text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:.5rem;font-weight:600}
.azc-kb__card{background:rgba(255,255,255,.03);border:1px solid var(--az-border,var(--azc-line));border-radius:10px;padding:.55rem .6rem;margin-bottom:.5rem;font-size:.76rem;color:#cdd2e0}
.azc-kb__card b{display:block;color:#fff;font-weight:600;margin-bottom:.15rem}
.azc-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;padding:.5rem .3rem}
.azc-gal__card{border:1px solid var(--az-border,var(--azc-line));border-radius:12px;overflow:hidden;background:rgba(255,255,255,.02)}
.azc-gal__img{height:62px;background:linear-gradient(135deg,rgba(139,92,246,.4),rgba(6,182,212,.32))}
.azc-gal__img.b{background:linear-gradient(135deg,rgba(236,72,153,.4),rgba(139,92,246,.32))}
.azc-gal__img.c{background:linear-gradient(135deg,rgba(6,182,212,.4),rgba(16,185,129,.32))}
.azc-gal__b{padding:.5rem .6rem;font-size:.74rem;color:#cdd2e0}
.azc-form{padding:.6rem .5rem;display:flex;flex-direction:column;gap:.6rem}
.azc-form label{font-size:.72rem;color:var(--azc-mute);display:block;margin-bottom:.25rem}
.azc-form .f{border:1px solid var(--az-border,var(--azc-line));border-radius:9px;background:rgba(255,255,255,.03);height:34px}
.azc-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem;padding:.5rem .3rem}
.azc-cal__d{aspect-ratio:1;border-radius:7px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);font-size:.66rem;color:var(--azc-mute);display:flex;align-items:flex-start;justify-content:flex-start;padding:.22rem .3rem}
.azc-cal__d.ev{background:linear-gradient(135deg,rgba(139,92,246,.3),rgba(6,182,212,.22));color:#fff;border-color:transparent}

/* stat cards (number callouts replacing stock images) */
.azc-statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
.azc-stat{position:relative;border:1px solid var(--az-border,var(--azc-line));border-radius:18px;padding:1.5rem 1.4rem;background:radial-gradient(130% 120% at 100% 0,rgba(139,92,246,.1),transparent 55%),rgba(255,255,255,.02);overflow:hidden}
.azc-stat::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.55),rgba(6,182,212,.5),transparent)}
.azc-stat__n{font-size:2.5rem;font-weight:800;line-height:1;background:var(--az-grad,linear-gradient(135deg,#8B5CF6,#22D3EE));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.azc-stat__l{margin-top:.5rem;font-size:.86rem;color:var(--azc-dim);line-height:1.4}

/* code / endpoint mock */
.azc-code{font-family:var(--azc-mono);font-size:.78rem;padding:1.1rem 1.2rem;color:#cdd2e0;line-height:1.75;white-space:pre;overflow:auto}
.azc-code .k{color:#c4b5fd}.azc-code .s{color:#67e8f9}.azc-code .c{color:var(--azc-mute)}.azc-code .m{color:#4ade80}.azc-code .p{color:#f472b6}
.azc-endpts{display:flex;flex-direction:column;gap:.5rem;padding:1rem}
.azc-ep{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border:1px solid var(--az-border,var(--azc-line));border-radius:10px;background:rgba(255,255,255,.02);font-family:var(--azc-mono);font-size:.78rem;color:#cdd2e0}
.azc-ep__m{font-size:.64rem;font-weight:700;padding:.16rem .45rem;border-radius:6px}
.azc-ep__m.get{background:rgba(16,185,129,.16);color:#4ade80}
.azc-ep__m.post{background:rgba(139,92,246,.18);color:#c4b5fd}
.azc-ep__m.mcp{background:rgba(6,182,212,.16);color:#67e8f9}

/* diagram (white-label resell tree) */
.azc-tree{display:flex;flex-direction:column;align-items:center;gap:0;padding:1.4rem 1rem}
.azc-node{border-radius:14px;padding:.7rem 1.1rem;text-align:center;border:1px solid var(--az-border,var(--azc-line));background:rgba(255,255,255,.03);min-width:150px}
.azc-node.top{border-color:var(--azc-violet);background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(20,18,32,.6));box-shadow:0 0 0 1px rgba(139,92,246,.25),0 20px 50px -24px rgba(139,92,246,.5)}
.azc-node strong{display:block;color:#fff;font-size:.95rem}
.azc-node em{font-style:normal;font-size:.72rem;color:var(--azc-mute)}
.azc-conn{width:2px;height:26px;background:linear-gradient(180deg,var(--azc-violet),var(--azc-cyan))}
.azc-clients{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}
.azc-clients .azc-node{min-width:110px;border-color:rgba(6,182,212,.35)}

/* generic spacing helper used in heroes */
.azc-hero-media{position:relative}
.azc-hero-media .gradient-blob{opacity:.6}