/* ============================================================
   AITIZER showcase — live column builder + column-type gallery
   Self-contained; layered on top of the Ruboz template styles.
   Brand: violet #8B5CF6 · cyan #06B6D4 · pink #EC4899
   ============================================================ */

:root {
  --az-violet: #8B5CF6;
  --az-cyan: #06B6D4;
  --az-pink: #EC4899;
  --az-grad: linear-gradient(135deg, #8B5CF6, #06B6D4, #EC4899);
  --az-surface: rgba(255, 255, 255, 0.03);
  --az-surface-2: rgba(255, 255, 255, 0.05);
  --az-border: rgba(255, 255, 255, 0.10);
  --az-border-strong: rgba(255, 255, 255, 0.18);
  --az-text-dim: rgba(255, 255, 255, 0.55);
}

/* ---------- shared ---------- */
.az-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .9rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 999px;
  border: 1px solid var(--az-border);
  background: var(--az-surface-2);
  color: #fff;
}
.az-eyebrow .az-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--az-grad);
  box-shadow: 0 0 10px rgba(139, 92, 246, .8);
}
.az-grad-text {
  background: var(--az-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   1) LIVE COLUMN BUILDER
   ============================================================ */
.az-builder {
  position: relative;
  border: 1px solid var(--az-border);
  border-radius: 24px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(139, 92, 246, .14), transparent 55%),
    radial-gradient(120% 120% at 100% 0%, rgba(6, 182, 212, .12), transparent 55%),
    rgba(10, 10, 20, .55);
  backdrop-filter: blur(8px);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
  overflow: hidden;
}
.az-builder__bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--az-border);
  background: rgba(255, 255, 255, .02);
}
.az-builder__dots { display: flex; gap: .4rem; }
.az-builder__dots span {
  width: 11px; height: 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .15);
}
.az-builder__title {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .92rem; color: #fff;
  margin-left: .4rem;
}
.az-builder__title svg { width: 16px; height: 16px; color: var(--az-violet); }
.az-builder__pill {
  margin-left: auto;
  font-size: .72rem;
  color: var(--az-text-dim);
  border: 1px solid var(--az-border);
  border-radius: 999px;
  padding: .25rem .7rem;
  display: inline-flex; align-items: center; gap: .35rem;
}
.az-builder__pill i, .az-builder__pill svg { width: 13px; height: 13px; }

/* table */
.az-grid { width: 100%; border-collapse: collapse; font-size: .86rem; }
.az-grid th, .az-grid td {
  text-align: left;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--az-border);
  border-right: 1px solid rgba(255, 255, 255, .04);
  white-space: nowrap;
  color: rgba(255, 255, 255, .85);
}
.az-grid th {
  font-weight: 600;
  font-size: .78rem;
  color: var(--az-text-dim);
  background: rgba(255, 255, 255, .015);
}
.az-grid th .az-th { display: inline-flex; align-items: center; gap: .45rem; }
.az-grid th .az-th i, .az-grid th .az-th svg { width: 14px; height: 14px; color: var(--az-violet); }
.az-grid td:first-child, .az-grid th:first-child { padding-left: 1.1rem; }
.az-grid tr:last-child td { border-bottom: none; }
.az-rowidx { color: rgba(255,255,255,.28); width: 1%; font-variant-numeric: tabular-nums; }
.az-avatar {
  width: 22px; height: 22px; border-radius: 999px; display: inline-grid; place-items: center;
  font-size: .68rem; font-weight: 700; color: #fff; margin-right: .5rem; vertical-align: middle;
}

/* the dynamic (animated) column */
.az-col-dynamic { position: relative; }
.az-col-dynamic.az-adding { animation: azColIn .5s ease both; }
@keyframes azColIn {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.az-th-new {
  display: inline-flex; align-items: center; gap: .45rem;
  color: #fff;
}
.az-th-new i, .az-th-new svg { width: 14px; height: 14px; color: var(--az-cyan); }
.az-th-typebadge {
  font-size: .62rem; font-weight: 600; letter-spacing: .03em;
  padding: .1rem .4rem; border-radius: 5px;
  background: rgba(139,92,246,.18); color: #c4b5fd; text-transform: uppercase;
}

/* cell states */
.az-cell-compute { display: inline-flex; align-items: center; gap: .45rem; color: var(--az-text-dim); }
.az-spinner {
  width: 13px; height: 13px; border-radius: 999px;
  border: 2px solid rgba(255,255,255,.2);
  border-top-color: var(--az-cyan);
  animation: azSpin .7s linear infinite;
}
@keyframes azSpin { to { transform: rotate(360deg); } }
.az-cell-value { animation: azFade .35s ease both; display: inline-flex; align-items: center; gap: .4rem; }
@keyframes azFade { from { opacity: 0; transform: translateY(3px);} to {opacity:1; transform:none;} }

/* badges */
.az-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; font-weight: 600;
  padding: .15rem .55rem; border-radius: 999px;
  border: 1px solid transparent;
}
.az-badge::before { content:""; width:6px; height:6px; border-radius:999px; background: currentColor; opacity:.9; }
.az-b-green { color:#34d399; background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.25); }
.az-b-amber { color:#fbbf24; background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.25); }
.az-b-red   { color:#f87171; background:rgba(248,113,113,.12); border-color:rgba(248,113,113,.25); }
.az-b-blue  { color:#60a5fa; background:rgba(96,165,250,.12); border-color:rgba(96,165,250,.25); }
.az-b-violet{ color:#a78bfa; background:rgba(167,139,250,.12); border-color:rgba(167,139,250,.25); }
.az-chip-rel {
  display:inline-flex; align-items:center; gap:.3rem; font-size:.74rem;
  padding:.12rem .5rem; border-radius:7px;
  background:rgba(6,182,212,.12); border:1px solid rgba(6,182,212,.28); color:#67e8f9;
}
.az-ok { color:#34d399; }

/* the type-picker popover */
.az-picker {
  position: absolute;
  top: 52px; right: 14px;
  width: 248px;
  border: 1px solid var(--az-border-strong);
  border-radius: 14px;
  background: rgba(17, 17, 30, .96);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.85);
  padding: .5rem;
  opacity: 0; transform: translateY(-8px) scale(.97);
  pointer-events: none;
  z-index: 5;
  transition: opacity .25s ease, transform .25s ease;
}
.az-picker.az-open { opacity: 1; transform: translateY(0) scale(1); }
.az-picker__search {
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .6rem; margin-bottom:.4rem;
  border:1px solid var(--az-border); border-radius:9px;
  color:var(--az-text-dim); font-size:.8rem;
}
.az-picker__search i, .az-picker__search svg { width:14px; height:14px; }
.az-picker__cursor { width:1px; height:14px; background:var(--az-cyan); animation: azBlink 1s steps(1) infinite; }
@keyframes azBlink { 50% { opacity:0; } }
.az-picker__opt {
  display:flex; align-items:center; gap:.6rem;
  padding:.45rem .55rem; border-radius:9px;
  font-size:.84rem; color:rgba(255,255,255,.82);
  transition: background .15s ease;
}
.az-picker__opt i, .az-picker__opt svg { width:16px; height:16px; color:var(--az-violet); flex:0 0 auto; }
.az-picker__opt.az-hot { background: rgba(139,92,246,.22); color:#fff; }
.az-picker__opt small { margin-left:auto; color:rgba(255,255,255,.3); font-size:.68rem; }

/* floating cursor */
.az-cursor {
  position:absolute; z-index:7; width:20px; height:20px; pointer-events:none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
  transition: top .55s cubic-bezier(.5,0,.2,1), left .55s cubic-bezier(.5,0,.2,1);
  opacity:0;
}
.az-cursor.az-show { opacity:1; }
.az-cursor.az-click { animation: azClick .3s ease; }
@keyframes azClick { 40% { transform: scale(.8);} }

/* add-column header button */
.az-addcol {
  display:inline-flex; align-items:center; gap:.4rem;
  color:var(--az-text-dim); font-weight:600; font-size:.8rem;
  border:1px dashed var(--az-border-strong); border-radius:8px;
  padding:.3rem .6rem; transition: all .2s ease;
}
.az-addcol.az-hot { color:#fff; border-color:var(--az-violet); background:rgba(139,92,246,.15); }
.az-addcol i, .az-addcol svg { width:14px; height:14px; }

/* caption under builder */
.az-builder__caption {
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding: .8rem 1.1rem; border-top:1px solid var(--az-border);
  font-size:.82rem; color:var(--az-text-dim);
  background: rgba(255,255,255,.015);
}
.az-builder__caption strong { color:#fff; font-weight:600; }
.az-builder__caption .az-now { color: var(--az-cyan); }
.az-builder__caption code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: .76rem; color: #c4b5fd;
  background: rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.2);
  padding: .05rem .35rem; border-radius: 5px;
}
i[data-lucide].az-now { width:16px; height:16px; }

/* ============================================================
   2) COLUMN-TYPE GALLERY
   ============================================================ */
.az-types__groups { display: grid; gap: 2rem; }
.az-group__head {
  display:flex; align-items:baseline; gap:.7rem; margin-bottom:1rem;
}
.az-group__head h5 { margin:0; color:#fff; font-size:1.05rem; }
.az-group__count {
  font-size:.72rem; color:var(--az-text-dim);
  border:1px solid var(--az-border); border-radius:999px; padding:.1rem .55rem;
}
.az-group__line { flex:1; height:1px; background:linear-gradient(90deg,var(--az-border),transparent); }

.az-typecards {
  display:grid; gap:.8rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.az-typecard {
  position:relative;
  display:flex; gap:.8rem; align-items:flex-start;
  padding:1rem;
  border:1px solid var(--az-border);
  border-radius:14px;
  background: var(--az-surface);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  overflow:hidden;
}
.az-typecard:hover {
  transform: translateY(-3px);
  border-color: var(--az-border-strong);
  background: var(--az-surface-2);
}
.az-typecard::after {
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background: var(--az-grad); opacity:0; transition:opacity .2s ease;
}
.az-typecard:hover::after { opacity:1; }
.az-typecard__icon {
  flex:0 0 auto; width:38px; height:38px; border-radius:10px;
  display:grid; place-items:center;
  background: rgba(139,92,246,.12);
  border:1px solid rgba(139,92,246,.25);
  color: #c4b5fd;
}
.az-typecard__icon i, .az-typecard__icon svg { width:19px; height:19px; }
.az-typecard.az-computed .az-typecard__icon {
  background: rgba(6,182,212,.12); border-color: rgba(6,182,212,.28); color:#67e8f9;
}
.az-typecard__body { min-width:0; }
.az-typecard__name {
  display:flex; align-items:center; gap:.5rem;
  font-weight:600; color:#fff; font-size:.92rem; margin-bottom:.2rem;
}
.az-tag {
  font-size:.6rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:.08rem .35rem; border-radius:5px;
}
.az-tag-data { background:rgba(139,92,246,.18); color:#c4b5fd; }
.az-tag-auto { background:rgba(6,182,212,.16); color:#67e8f9; }
.az-typecard__desc { font-size:.79rem; line-height:1.5; color:var(--az-text-dim); margin:0; white-space:normal; }

/* gallery legend */
.az-legend { display:flex; gap:1.2rem; flex-wrap:wrap; font-size:.8rem; color:var(--az-text-dim); }
.az-legend span { display:inline-flex; align-items:center; gap:.4rem; }
.az-legend .az-key { width:12px; height:12px; border-radius:4px; }
.az-key-data { background:rgba(139,92,246,.5); }
.az-key-auto { background:rgba(6,182,212,.5); }

@media (max-width: 575.98px) {
  .az-builder__pill { display:none; }
  .az-grid { font-size:.78rem; }
  .az-grid th, .az-grid td { padding:.55rem .6rem; }
  .az-picker { right: 8px; width: 210px; }
}

/* ============================================================
   3) MULTI-VIEW SHOWCASE — tabs + per-view animated stages
   ============================================================ */
.az-views { display: grid; gap: 1rem; }
.az-viewtabs {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
}
.az-viewtab {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem; border-radius: 999px;
  border: 1px solid var(--az-border); background: var(--az-surface);
  color: var(--az-text-dim); font-weight: 600; font-size: .86rem;
  cursor: pointer; transition: all .2s ease; white-space: nowrap;
}
.az-viewtab i, .az-viewtab svg { width: 16px; height: 16px; }
.az-viewtab:hover { color: #fff; border-color: var(--az-border-strong); }
.az-viewtab.az-active {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, rgba(139,92,246,.9), rgba(6,182,212,.85));
  box-shadow: 0 8px 24px -8px rgba(139,92,246,.6);
}
.az-stage { position: relative; min-height: 360px; padding: 0; overflow: hidden; }
.az-stage__bar {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1.1rem; border-bottom: 1px solid var(--az-border);
  background: rgba(255,255,255,.02); font-size: .88rem; color: #fff; font-weight: 600;
}
.az-stage__bar i, .az-stage__bar svg { width: 15px; height: 15px; color: var(--az-cyan); }
.az-stage__bar .az-stage__pill {
  margin-left: auto; font-size: .72rem; color: var(--az-text-dim);
  border: 1px solid var(--az-border); border-radius: 999px; padding: .2rem .6rem; font-weight: 500;
}
.az-stage__body { padding: 1.1rem; opacity: 1; }

/* ---- Kanban ---- */
.az-kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.az-lane { border: 1px solid var(--az-border); border-radius: 12px; background: rgba(255,255,255,.015); padding: .6rem; min-height: 280px; }
.az-lane__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; font-size: .78rem; font-weight: 600; }
.az-lane__dot { width: 8px; height: 8px; border-radius: 999px; margin-right: .4rem; display:inline-block; }
.az-lane__count { color: var(--az-text-dim); font-variant-numeric: tabular-nums; }
.az-kcard {
  border: 1px solid var(--az-border); border-radius: 9px; background: rgba(255,255,255,.04);
  padding: .55rem .6rem; margin-bottom: .5rem; font-size: .78rem; color: rgba(255,255,255,.88);
  box-shadow: 0 4px 14px -8px rgba(0,0,0,.6);
}
.az-kcard__tag { font-size: .64rem; padding: .08rem .4rem; border-radius: 5px; display:inline-block; margin-top:.35rem; }
.az-kcard.az-moving { animation: azCardMove 1.1s cubic-bezier(.5,0,.2,1) both; position: relative; z-index: 3; }
@keyframes azCardMove { 0%{ transform: translate(0,0) scale(1);} 60%{ transform: translate(60%, -6px) scale(1.04); box-shadow:0 12px 28px -8px rgba(139,92,246,.6);} 100%{ transform: translate(115%,0) scale(1);} }
.az-kcard.az-enter { animation: azFade .4s ease both; }

/* ---- Gallery ---- */
.az-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.az-gcard { border: 1px solid var(--az-border); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.02); opacity: 0; }
.az-gcard.az-in { animation: azPop .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes azPop { from{ opacity:0; transform: translateY(12px) scale(.96);} to{opacity:1; transform:none;} }
.az-gcard__img { height: 84px; background-size: cover; background-position: center; position: relative; }
.az-gcard__body { padding: .6rem .65rem; }
.az-gcard__title { font-size: .8rem; font-weight: 600; color: #fff; margin-bottom: .3rem; }
.az-gcard__meta { font-size: .68rem; color: var(--az-text-dim); display:flex; justify-content:space-between; align-items:center; }

/* ---- Form ---- */
.az-form { max-width: 460px; margin: 0 auto; display: grid; gap: .8rem; }
.az-field { border: 1px solid var(--az-border); border-radius: 10px; background: rgba(255,255,255,.03); padding: .55rem .75rem; }
.az-field.az-focus { border-color: var(--az-violet); box-shadow: 0 0 0 3px rgba(139,92,246,.15); }
.az-field__label { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--az-text-dim); margin-bottom: .2rem; }
.az-field__val { font-size: .9rem; color: #fff; min-height: 1.2em; }
.az-field__caret { display:inline-block; width:1px; height:.95em; background: var(--az-cyan); vertical-align:-2px; animation: azBlink 1s steps(1) infinite; }
.az-formchips { display:flex; gap:.4rem; flex-wrap:wrap; }
.az-formchip { font-size:.76rem; padding:.25rem .6rem; border-radius:999px; border:1px solid var(--az-border); color:var(--az-text-dim); }
.az-formchip.az-sel { background: rgba(139,92,246,.2); color:#fff; border-color: var(--az-violet); }
.az-submit { text-align:center; padding:.7rem; border-radius:10px; font-weight:600; font-size:.9rem; background: linear-gradient(135deg,#8B5CF6,#06B6D4); color:#fff; transition: all .3s ease; }
.az-submit.az-done { background: rgba(52,211,153,.18); color:#34d399; border:1px solid rgba(52,211,153,.3); }

/* ---- Calendar ---- */
.az-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; }
.az-cal__dow { text-align:center; font-size:.66rem; color: var(--az-text-dim); padding-bottom:.2rem; }
.az-cal__cell { border: 1px solid var(--az-border); border-radius: 8px; min-height: 52px; padding: .3rem; background: rgba(255,255,255,.012); position: relative; }
.az-cal__num { font-size:.66rem; color: rgba(255,255,255,.4); }
.az-cal__cell.az-muted { opacity: .4; }
.az-evt { font-size:.6rem; padding:.1rem .3rem; border-radius:4px; margin-top:.18rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; }
.az-evt.az-in { animation: azDrop .4s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes azDrop { from{opacity:0; transform: translateY(-8px) scale(.9);} to{opacity:1; transform:none;} }

/* ---- Timeline ---- */
.az-timeline { display: grid; gap: .55rem; }
.az-tlhead { display:flex; gap:.5rem; font-size:.64rem; color: var(--az-text-dim); padding-left: 120px; }
.az-tlhead span { flex:1; text-align:center; }
.az-tlrow { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: .6rem; }
.az-tllabel { font-size:.78rem; color: rgba(255,255,255,.82); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.az-tltrack { position: relative; height: 22px; border-radius: 6px; background: rgba(255,255,255,.03); border:1px solid var(--az-border); overflow:hidden; }
.az-tlbar {
  position: absolute; top: 3px; bottom: 3px; border-radius: 5px;
  background: linear-gradient(90deg, rgba(139,92,246,.9), rgba(6,182,212,.85));
  width: 0; transform-origin: left center;
  display:flex; align-items:center; padding:0 .5rem; font-size:.62rem; color:#fff; font-weight:600;
  transition: width .9s cubic-bezier(.5,0,.2,1);
}

@media (max-width: 700px){
  .az-kanban, .az-gallery { grid-template-columns: repeat(2, 1fr); }
  .az-stage { min-height: 320px; }
}

/* ============================================================
   4) POWER EXPLORER — searchable field types + integrations
   ============================================================ */
.az-explorer { display: grid; gap: 1.1rem; align-content: start; }
.az-search {
  position: relative; display: flex; align-items: center;
  border: 1px solid var(--az-border-strong); border-radius: 14px;
  background: rgba(255,255,255,.04); padding: .2rem .9rem;
  max-width: 560px; margin: 0 auto; width: 100%;
}
.az-search__ico { display: inline-flex; color: var(--az-text-dim); }
.az-search__ico i, .az-search__ico svg { width: 18px; height: 18px; }
.az-search__input {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: #fff; font-size: .95rem; padding: .7rem .7rem;
}
.az-search__input::placeholder { color: var(--az-text-dim); }
.az-search__hint { font-size: .72rem; color: var(--az-text-dim); white-space: nowrap; }

.az-chips { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; align-items: center; }
.az-chip {
  flex: 0 0 auto; appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--az-border); background: var(--az-surface);
  color: var(--az-text-dim); border-radius: 10px; padding: .5rem .95rem;
  font-size: .82rem; font-weight: 600; line-height: 1.1; white-space: nowrap;
  cursor: pointer; transition: all .18s ease;
}
.az-chip:hover { color: #fff; border-color: var(--az-border-strong); }
.az-chip.az-on { color: #fff; border-color: transparent; background: linear-gradient(135deg, rgba(139,92,246,.9), rgba(6,182,212,.85)); }

.az-exgroup.az-hide { display: none; }
.az-exgroup__head { display: flex; align-items: center; gap: .55rem; margin: .4rem 0 .9rem; }
.az-exgroup__head i, .az-exgroup__head svg { width: 17px; height: 17px; color: var(--az-violet); }
.az-exgroup__head h6 { margin: 0; color: #fff; font-size: 1rem; }
.az-exgroup__count { font-size: .72rem; color: var(--az-text-dim); border: 1px solid var(--az-border); border-radius: 999px; padding: .1rem .55rem; }
.az-unlimited {
  margin-left: auto; display: inline-flex; align-items: center; gap: .4rem;
  font-size: .74rem; font-weight: 600; color: #67e8f9;
  background: rgba(6,182,212,.1); border: 1px solid rgba(6,182,212,.28);
  border-radius: 999px; padding: .25rem .7rem;
}
.az-unlimited i, .az-unlimited svg { width: 14px; height: 14px; }

.az-excards { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }
.az-excard {
  display: flex; gap: .75rem; align-items: flex-start; padding: .85rem;
  border: 1px solid var(--az-border); border-radius: 13px; background: var(--az-surface);
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.2,.64,1), border-color .2s ease, background .2s ease;
}
.az-excard.az-in { opacity: 1; transform: none; }
.az-excard.az-hide { display: none; }
.az-excard:hover { border-color: var(--az-border-strong); background: var(--az-surface-2); transform: translateY(-2px); }
.az-excard__ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.25); color: #c4b5fd;
}
.az-excard__ico.az-computed { background: rgba(6,182,212,.12); border-color: rgba(6,182,212,.28); color: #67e8f9; }
.az-excard__ico i, .az-excard__ico svg { width: 20px; height: 20px; }
.az-excard__logo {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: #fff; padding: 6px; overflow: hidden;
}
.az-excard__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.az-excard__body { min-width: 0; }
.az-excard__name { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-weight: 600; color: #fff; font-size: .9rem; margin-bottom: .2rem; }
.az-excard__desc { font-size: .78rem; line-height: 1.45; color: var(--az-text-dim); margin: 0; }
.az-actcount { color: #a78bfa; font-weight: 600; }
.az-add { border-style: dashed; }
.az-add .az-add__plus { background: linear-gradient(135deg, rgba(139,92,246,.25), rgba(6,182,212,.2)); border: 1px solid var(--az-border-strong); color: #fff; }
.az-add:hover { border-color: var(--az-violet); }
.az-exempty { text-align: center; color: var(--az-text-dim); font-size: .9rem; padding: 1.2rem; border: 1px dashed var(--az-border); border-radius: 12px; }

/* Fixed neon arc anchored to the bottom of the explorer section — no longer
   reflows when filtering; fades out to transition into the next section. */
#integrations .az-section-glow {
  position: absolute;
  left: 50%; bottom: -40px;
  transform: translateX(-50%);
  width: min(1500px, 130%);
  height: 560px;
  z-index: -1;
  pointer-events: none;
  background: url(../img/backgrounds/neon-bg.webp) center bottom / contain no-repeat;
  opacity: .5;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 72%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 72%, transparent 100%);
}
/* Keep the explorer tall enough on desktop so filtering does not collapse the
   section (which is what made the arc jump around). */


/* Guard: GSAP autoAlpha on the pricing toggle can leave amounts at visibility:hidden — force them visible so prices never vanish. */
#pricing .pricing-amount,#pricing .pricing-period{visibility:visible!important}


/* === AZ polish: capabilities cards + pricing highlights === */
.az-cap{position:relative;height:100%;padding:2.1rem 1.7rem;border-radius:20px;border:1px solid var(--az-border);
  background:radial-gradient(130% 120% at 100% 0%,rgba(139,92,246,.10),transparent 55%),var(--az-surface-2);
  backdrop-filter:blur(6px);overflow:hidden;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .4s ease,box-shadow .5s ease}
.az-cap::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.6),rgba(6,182,212,.5),transparent);
  opacity:.4;transition:opacity .4s ease}
.az-cap:hover{transform:translateY(-6px);border-color:rgba(139,92,246,.4);box-shadow:0 30px 70px -34px rgba(139,92,246,.5)}
.az-cap:hover::before{opacity:1}
.az-cap__icon{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,rgba(139,92,246,.95),rgba(6,182,212,.9));
  box-shadow:0 14px 32px -12px rgba(139,92,246,.65),inset 0 1px 0 rgba(255,255,255,.25);
  margin-bottom:1.2rem;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.az-cap:hover .az-cap__icon{transform:translateY(-2px) scale(1.06) rotate(-3deg)}
.az-cap__icon i,.az-cap__icon svg{width:25px;height:25px}
.az-cap__title{font-weight:600;color:#fff;font-size:1.02rem;line-height:1.3;margin:0 0 .5rem;letter-spacing:-.01em}
.az-cap__desc{color:rgba(255,255,255,.55);font-size:.9rem;line-height:1.55;margin:0}
.az-cap--feature{border-color:rgba(139,92,246,.45);
  background:radial-gradient(130% 120% at 0% 0%,rgba(139,92,246,.18),transparent 55%),
    radial-gradient(130% 120% at 100% 100%,rgba(6,182,212,.12),transparent 55%),rgba(20,18,32,.6);
  box-shadow:0 0 0 1px rgba(139,92,246,.22),0 30px 70px -34px rgba(139,92,246,.42)}
.az-cap--feature::before{opacity:1}
.az-cap__pin{position:absolute;top:1.05rem;right:1.15rem;font-size:.66rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#c4b5fd}
.az-pill{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.3rem .7rem;border-radius:999px;color:#fff;background:var(--az-grad);
  box-shadow:0 8px 22px -8px rgba(139,92,246,.7)}
.az-price-feature{border-color:rgba(139,92,246,.5)!important;
  background:linear-gradient(180deg,rgba(139,92,246,.08),rgba(20,18,32,.4))!important;
  box-shadow:0 0 0 1px rgba(139,92,246,.20),0 34px 80px -42px rgba(139,92,246,.45)}

/* === AZ polish: code block (api page) === */
.az-code{border:1px solid var(--az-border);border-radius:16px;background:rgba(10,10,20,.6);backdrop-filter:blur(6px);overflow:hidden}
.az-code__bar{display:flex;gap:.45rem;padding:.7rem .9rem;border-bottom:1px solid var(--az-border)}
.az-code__bar span{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.14)}
.az-code pre{margin:0;padding:1.15rem 1.35rem;overflow-x:auto;font-size:.82rem;line-height:1.75;color:#c9d1d9;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.az-code .tk-k{color:#c4b5fd}.az-code .tk-s{color:#7ee787}.az-code .tk-c{color:#7b8190}.az-code .tk-f{color:#67e8f9}

/* === AZ v13: docs reference + enterprise rows + cta fix === */
/* CTA band — generous responsive padding so text never touches edges */
.az-cta{padding:clamp(3rem,7vw,5.5rem) clamp(1.75rem,6vw,5rem)!important}
.az-cta h2{max-width:18ch;margin-left:auto!important;margin-right:auto!important}
.az-cta p{max-width:52ch;margin-left:auto!important;margin-right:auto!important}

/* stat band */
.az-stats{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--az-border);border-radius:20px;overflow:hidden;background:var(--az-surface-2);backdrop-filter:blur(6px)}
@media(min-width:768px){.az-stats{grid-template-columns:repeat(4,1fr)}}
.az-stat{padding:1.9rem 1.6rem;border-right:1px solid var(--az-border);border-bottom:1px solid var(--az-border)}
.az-stat:last-child{border-right:0}
@media(max-width:767px){.az-stat:nth-child(2n){border-right:0}.az-stat:nth-child(n+3){border-bottom:0}}
@media(min-width:768px){.az-stat{border-bottom:0}}
.az-stat__n{font-size:2rem;font-weight:700;line-height:1;background:var(--az-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.45rem}
.az-stat__l{font-size:.82rem;color:rgba(255,255,255,.55)}

/* enterprise numbered rows (Linear/Vercel style) */
.az-rows{border-top:1px solid var(--az-border)}
.az-row{display:grid;grid-template-columns:1fr;gap:.5rem 2.5rem;padding:1.9rem .35rem;border-bottom:1px solid var(--az-border);position:relative;transition:background .35s ease}
@media(min-width:768px){.az-row{grid-template-columns:88px 280px 1fr auto;align-items:baseline;padding:2.1rem .6rem}}
.az-row:hover{background:linear-gradient(90deg,rgba(139,92,246,.06),transparent 70%)}
.az-row__num{font-size:.78rem;font-weight:700;letter-spacing:.14em;color:#7c6fd1;font-family:ui-monospace,Menlo,Consolas,monospace}
.az-row__title{font-weight:600;color:#fff;font-size:1.05rem;letter-spacing:-.01em}
.az-row__desc{color:rgba(255,255,255,.55);font-size:.92rem;line-height:1.65;max-width:62ch}
.az-row__link{font-size:.82rem;font-weight:600;color:#c4b5fd;text-decoration:none;white-space:nowrap;transition:color .25s ease}
.az-row__link:hover{color:#fff}

/* Q&A minimal */
.az-qa{border:1px solid var(--az-border);border-radius:18px;padding:1.7rem 1.6rem;background:var(--az-surface-2);height:100%}
.az-qa h5{font-size:1rem;margin-bottom:.5rem;color:#fff}
.az-qa p{font-size:.9rem;line-height:1.65;color:rgba(255,255,255,.55);margin:0}

/* ---------- docs reference ---------- */
.az-doc-nav{font-size:.86rem}
.az-doc-nav__group{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.38);margin:1.5rem 0 .55rem;padding-left:.85rem}
.az-doc-nav__group:first-child{margin-top:0}
.az-doc-nav a{display:block;padding:.34rem .85rem;color:rgba(255,255,255,.62);text-decoration:none;border-left:1px solid var(--az-border);transition:color .2s ease,border-color .2s ease;line-height:1.45}
.az-doc-nav a:hover{color:#fff}
.az-doc-nav a.on{color:#fff;border-left:2px solid transparent;border-image:linear-gradient(180deg,#8B5CF6,#06B6D4) 1;background:linear-gradient(90deg,rgba(139,92,246,.10),transparent)}
.az-doc-chips{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.5rem;-webkit-overflow-scrolling:touch}
.az-doc-chips a{flex:0 0 auto;font-size:.78rem;font-weight:600;color:rgba(255,255,255,.7);text-decoration:none;border:1px solid var(--az-border);border-radius:999px;padding:.4rem .85rem;background:var(--az-surface-2)}
.az-doc-chips a.on{color:#fff;border-color:rgba(139,92,246,.5)}

.az-doc{color:rgba(255,255,255,.7)}
.az-doc section.az-sec{padding:2.6rem 0;border-top:1px solid var(--az-border)}
.az-doc section.az-sec:first-child{border-top:0;padding-top:0}
.az-doc h2{font-size:1.55rem;letter-spacing:-.02em;color:#fff;margin-bottom:1rem}
.az-doc h3{font-size:1.05rem;color:#fff;margin:1.9rem 0 .75rem}
.az-doc p{font-size:.93rem;line-height:1.75;max-width:72ch}
.az-doc code:not(pre code){font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82em;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.2);color:#d6c8ff;border-radius:6px;padding:.08rem .38rem}
.az-doc .az-code{margin:1.1rem 0 1.4rem}
.az-doc ul{font-size:.93rem;line-height:1.8;color:rgba(255,255,255,.65)}

.az-method{display:inline-block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.66rem;font-weight:700;letter-spacing:.08em;border-radius:7px;padding:.28rem .55rem;line-height:1;vertical-align:middle}
.az-m-get{background:rgba(6,182,212,.14);color:#67e8f9;border:1px solid rgba(6,182,212,.3)}
.az-m-post{background:rgba(139,92,246,.16);color:#c4b5fd;border:1px solid rgba(139,92,246,.32)}
.az-m-patch{background:rgba(245,158,11,.14);color:#fcd34d;border:1px solid rgba(245,158,11,.3)}
.az-m-put{background:rgba(245,158,11,.14);color:#fcd34d;border:1px solid rgba(245,158,11,.3)}
.az-m-delete{background:rgba(239,68,68,.13);color:#fca5a5;border:1px solid rgba(239,68,68,.3)}
.az-m-ws{background:rgba(34,197,94,.13);color:#86efac;border:1px solid rgba(34,197,94,.3)}
.az-m-rpc{background:rgba(236,72,153,.13);color:#f9a8d4;border:1px solid rgba(236,72,153,.3)}

.az-endpoint{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;border:1px solid var(--az-border);border-radius:12px;background:rgba(255,255,255,.025);padding:.7rem .95rem;margin:1.3rem 0 .8rem}
.az-endpoint code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.84rem;color:#e7e3ff;background:none;border:none;padding:0}

.az-params{width:100%;border-collapse:collapse;font-size:.86rem;margin:.6rem 0 1.2rem}
.az-params th{text-align:left;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);padding:.55rem .75rem;border-bottom:1px solid var(--az-border)}
.az-params td{padding:.62rem .75rem;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top;color:rgba(255,255,255,.62);line-height:1.55}
.az-params td:first-child{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;color:#c4b5fd;white-space:nowrap}
.az-params .t{color:rgba(255,255,255,.4);font-size:.76rem;font-family:ui-monospace,Menlo,Consolas,monospace;white-space:nowrap}
.az-params .req{color:#fca5a5;font-size:.68rem;font-weight:700;letter-spacing:.05em}

.az-typegrid{display:grid;grid-template-columns:1fr;gap:.5rem;margin:.8rem 0 1rem}
@media(min-width:768px){.az-typegrid{grid-template-columns:1fr 1fr}}
.az-type{display:flex;gap:.7rem;align-items:baseline;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:.6rem .8rem;background:rgba(255,255,255,.02)}
.az-type code{flex:0 0 auto}
.az-type span{font-size:.82rem;color:rgba(255,255,255,.55);line-height:1.5}


/* === AZ v14: engine feature chips + comparison table === */
.az-fchips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.15rem}
.az-fchip{font-size:.72rem;font-weight:600;letter-spacing:.01em;color:rgba(255,255,255,.78);
  border:1px solid rgba(139,92,246,.28);border-radius:999px;padding:.3rem .68rem;line-height:1;
  background:linear-gradient(180deg,rgba(139,92,246,.10),rgba(255,255,255,.02))}
.az-compare{width:100%;border-collapse:separate;border-spacing:0;font-size:.9rem;
  border:1px solid var(--az-border);border-radius:18px;overflow:hidden;background:var(--az-surface-2)}
.az-compare th,.az-compare td{padding:.95rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.06);text-align:center;white-space:nowrap}
.az-compare th:first-child,.az-compare td:first-child{text-align:left;white-space:normal;color:rgba(255,255,255,.78);font-weight:500}
.az-compare thead th{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);background:rgba(255,255,255,.025)}
.az-compare thead th.az-us{color:#fff;background:linear-gradient(180deg,rgba(139,92,246,.28),rgba(139,92,246,.10))}
.az-compare td.az-us{background:rgba(139,92,246,.07)}
.az-compare tbody tr:last-child td{border-bottom:0}
.az-yes{color:#86efac;font-weight:700}
.az-no{color:rgba(255,255,255,.25)}
.az-part{color:#fcd34d;font-size:.78rem;font-weight:600}
.az-compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:18px}

/* ============================================================
   Hero floating power chips + integration marquee
   ============================================================ */
.az-float{position:absolute;width:54px;height:54px;border-radius:15px;display:grid;place-items:center;
  background:rgba(20,18,32,.55);backdrop-filter:blur(10px);
  border:1px solid rgba(139,92,246,.28);
  box-shadow:0 16px 36px -16px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.08);z-index:1}
.az-float>*{animation:az-bob 6s ease-in-out infinite}
.az-float img{width:28px;height:28px;object-fit:contain;display:block}
.az-float i,.az-float svg{width:26px;height:26px;color:#c4b5fd}
.az-float--grad{background:linear-gradient(135deg,rgba(139,92,246,.92),rgba(6,182,212,.85));border-color:transparent;box-shadow:0 18px 40px -16px rgba(139,92,246,.7)}
.az-float--grad i,.az-float--grad svg{color:#fff}
.az-float--sm{width:44px;height:44px;border-radius:12px}
.az-float--sm img{width:22px;height:22px}.az-float--sm i,.az-float--sm svg{width:20px;height:20px}
@keyframes az-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

.az-marquee{overflow:hidden;position:relative;padding:.4rem 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.az-marquee__track{display:flex;gap:1rem;width:max-content;animation:az-marq 46s linear infinite}
.az-marquee:hover .az-marquee__track{animation-play-state:paused}
.az-mlogo{flex:0 0 auto;width:60px;height:60px;border-radius:15px;display:grid;place-items:center;
  background:rgba(255,255,255,.04);border:1px solid var(--az-border);transition:.25s}
.az-mlogo:hover{background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.4);transform:translateY(-3px)}
.az-mlogo img{width:32px;height:32px;object-fit:contain}
@keyframes az-marq{to{transform:translateX(calc(-50% - .5rem))}}

/* ============================================================
   Story / card visuals — branded panels replacing stock photos
   ============================================================ */
.az-storyviz{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  background:radial-gradient(120% 120% at 28% 18%,rgba(139,92,246,.38),transparent 60%),radial-gradient(120% 120% at 82% 92%,rgba(6,182,212,.32),transparent 60%),#0c0a18;overflow:hidden}
.az-storyviz::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 40px),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 40px);opacity:.6}
.az-storyviz__icon{position:relative;z-index:1;width:66px;height:66px;border-radius:19px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#8B5CF6,#22D3EE);box-shadow:0 20px 44px -16px rgba(139,92,246,.7),inset 0 1px 0 rgba(255,255,255,.25)}
.az-storyviz__icon svg,.az-storyviz__icon i{width:30px;height:30px}
.az-storyviz__cap{position:relative;z-index:1;font-size:.84rem;font-weight:600;color:#fff;letter-spacing:.02em;
  padding:.34rem .85rem;border-radius:999px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px)}
.az-storyviz--2{background:radial-gradient(120% 120% at 28% 18%,rgba(6,182,212,.36),transparent 60%),radial-gradient(120% 120% at 82% 92%,rgba(16,185,129,.3),transparent 60%),#0a1016}
.az-storyviz--2 .az-storyviz__icon{background:linear-gradient(135deg,#06B6D4,#10B981)}
.az-storyviz--3{background:radial-gradient(120% 120% at 28% 18%,rgba(236,72,153,.34),transparent 60%),radial-gradient(120% 120% at 82% 92%,rgba(139,92,246,.3),transparent 60%),#140a16}
.az-storyviz--3 .az-storyviz__icon{background:linear-gradient(135deg,#EC4899,#8B5CF6)}