/* ============================================================
   AI-account sale pages — dedicated layout.
   TraPay design tokens (brand #0d3e7e, amber accent, Estedad/Vazirmatn).
   Distinct from the generic service-page wrapper: tech-grid hero,
   plan cards, animated 4-step flow, closing CTA band.
   ============================================================ */
.ai{
  --brand:   var(--colors-primary-DEFAULT, #0d3e7e);
  --brand-600: var(--colors-primary-600, #1f3d64);
  --brand-50: var(--colors-primary-50, #eef4fc);
  --accent:  var(--colors-semantic-warning-base, #F59E0B);
  --green:   var(--colors-semantic-success-base, #10B981);
  --ink:     var(--colors-surface-foreground, #111827);
  --muted:   var(--colors-neutral-500, #6B7280);
  --line:    var(--colors-neutral-200, #E5E7EB);
  --tp-ease: cubic-bezier(.2,.7,.2,1);
  --pbrand: #1e40af;   /* product brand color — overridden inline per page */
  font-family: var(--typography-fontFamily-sans, 'Vazirmatn', sans-serif);
}

/* page-load reveal */
.ai .rise{ animation: ai-rise .6s var(--tp-ease) both; }
@keyframes ai-rise{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion:reduce){ .ai .rise{animation:none;opacity:1} }

/* ---------- shared heading ---------- */
.ai .ai-h2{ text-align:center; color:var(--ink); }

/* ---------- buttons ---------- */
.ai .ai-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  border-radius:14px; padding:.9rem 1.75rem; font-weight:600;
  font-size:1rem; line-height:1; transition:transform .25s var(--tp-ease), box-shadow .25s, background .25s;
  text-decoration:none;
}
.ai .ai-btn svg{ width:1.15rem; height:1.15rem; }
.ai .ai-btn--primary{ background:var(--brand); color:#fff; box-shadow:0 10px 26px -12px color-mix(in srgb, var(--brand) 60%, transparent); }
.ai .ai-btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -14px color-mix(in srgb, var(--brand) 65%, transparent); }
.ai .ai-btn--ghost{ background:#fff; color:var(--brand); border:2px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.ai .ai-btn--ghost:hover{ background:var(--brand); color:#fff; border-color:var(--brand); }
.ai .ai-btn--lg{ padding:1.05rem 2.25rem; font-size:1.0625rem; }

/* ---------- HERO (dark AI-product, always — matches Claude/dev-tool vibe) ---------- */
.ai-hero{ position:relative; overflow:hidden; padding:5rem 1.5rem 4rem;
  /* --pbrand inherited from .ai inline style (per product: Claude coral, Copilot purple…) */
  background:
    radial-gradient(1100px 480px at 82% -10%, color-mix(in srgb, var(--pbrand) 45%, transparent), transparent 60%),
    radial-gradient(820px 380px at 8% 118%, rgba(245,158,11,.14), transparent 55%),
    linear-gradient(180deg,#0a1020,#0d1528); }
.ai-hero__bg{ position:absolute; inset:0; color:#7896ff; pointer-events:none; }
.ai-hero__grid{ position:absolute; inset:0; width:100%; height:100%; opacity:.12;
  -webkit-mask:radial-gradient(760px 420px at 72% 22%,#000,transparent); mask:radial-gradient(760px 420px at 72% 22%,#000,transparent); }
.ai-hero__glow{ position:absolute; border-radius:50%; filter:blur(90px); }
.ai-hero__glow--brand{ width:440px; height:440px; background:var(--pbrand); opacity:.42; inset-inline-end:-90px; top:-140px; }
.ai-hero__glow--amber{ width:320px; height:320px; background:var(--accent); opacity:.12; inset-inline-start:-70px; bottom:-110px; }
.ai-hero__inner{ position:relative; max-width:64rem; margin:0 auto; }
/* split layout on spoke pages: copy + terminal */
.ai-hero--split .ai-hero__inner{ display:grid; grid-template-columns:1.12fr .88fr; gap:3rem; align-items:center; }
.ai-hero__copy{ text-align:center; }
.ai-hero--split .ai-hero__copy{ text-align:start; }

.ai-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem;
  font-size:.8125rem; color:#7e8ca8; margin-bottom:1.1rem; justify-content:center; }
.ai-hero--split .ai-crumbs{ justify-content:flex-start; }
.ai-crumbs a{ color:#7e8ca8; text-decoration:none; }
.ai-crumbs a:hover{ color:#a9c2ff; }
.ai-crumbs__cur{ color:#c7d3e6; font-weight:600; }

.ai-eyebrow{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem 1rem;
  border-radius:9999px; background:color-mix(in srgb, var(--pbrand) 18%, transparent);
  color:color-mix(in srgb, var(--pbrand) 55%, #ffffff); font-weight:600;
  border:1px solid color-mix(in srgb, var(--pbrand) 35%, transparent); }
.ai-eyebrow__dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--pbrand); box-shadow:0 0 12px var(--pbrand); }

.ai-hero__title{ margin-top:1.15rem; color:#fff; letter-spacing:-.02em; }
.ai-hero__lead{ margin:1rem 0 0; max-width:34rem; color:#9fb0c8; line-height:2; }
.ai-hero--split .ai-hero__lead{ margin-inline:0; }
.ai-hero:not(.ai-hero--split) .ai-hero__lead{ margin-inline:auto; }

.ai-hero__chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; justify-content:center; }
.ai-hero--split .ai-hero__chips{ justify-content:flex-start; }
.ai-chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .9rem;
  border-radius:9999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  font-size:.8125rem; font-weight:600; color:#dbe6f7; }
.ai-chip svg{ width:1rem; height:1rem; color:var(--green); }

.ai-hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; justify-content:center; }
.ai-hero--split .ai-hero__actions{ justify-content:flex-start; }
.ai-hero__edit{ display:inline-block; margin-top:1.15rem; font-size:.8125rem; color:#a9c2ff; }

/* hero primary btn gets a product-tinted gradient on the dark hero */
.ai-hero .ai-btn--primary{ background:linear-gradient(135deg, color-mix(in srgb, var(--pbrand) 78%, white), var(--pbrand));
  box-shadow:0 12px 30px -10px color-mix(in srgb, var(--pbrand) 70%, transparent); }
.ai-hero .ai-btn--ghost{ background:rgba(255,255,255,.06); color:#dbe6f7; border-color:rgba(255,255,255,.15); }
.ai-hero .ai-btn--ghost:hover{ background:rgba(255,255,255,.12); color:#fff; }

/* terminal visual */
.ai-hero__term{ display:flex; justify-content:center; }
.ai-term-svg{ width:100%; max-width:30rem; height:auto; }
@media(max-width:820px){ .ai-hero--split .ai-hero__inner{ grid-template-columns:1fr; gap:2rem; }
  .ai-hero__copy, .ai-hero--split .ai-hero__copy{ text-align:center; }
  .ai-hero--split .ai-crumbs, .ai-hero--split .ai-hero__chips, .ai-hero--split .ai-hero__actions{ justify-content:center; }
  .ai-hero--split .ai-hero__lead{ margin-inline:auto; } }

/* ---------- TRUST BAND ---------- */
.ai-trust{ padding:2.5rem 1.25rem 0; position:relative; z-index:2; }
/* overlap the hero ONLY when trust sits directly under it (not when a section is between) */
.ai-hero + .ai-trust{ margin-top:-2rem; padding-top:0; }
.ai-trust__inner{ max-width:72rem; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr);
  gap:1rem; background:#fff; border:1px solid var(--line); border-radius:24px;
  padding:1.75rem 1.5rem; box-shadow:0 20px 44px -28px color-mix(in srgb, var(--brand) 30%, transparent); }
.ai-trust__item{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.ai-trust__ic{ display:inline-flex; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem; border-radius:14px; margin-bottom:.7rem;
  background:color-mix(in srgb, var(--pbrand) 12%, transparent);
  color:var(--pbrand);
  border:1px solid color-mix(in srgb, var(--pbrand) 22%, transparent); }
.ai-trust__ic svg{ width:1.4rem; height:1.4rem; }
.ai-trust__k{ display:block; color:var(--brand); }
.ai-trust__v{ display:block; margin-top:.35rem; color:var(--muted); }

/* ---------- TOOL GRID (hub) ---------- */
.ai-tools{ padding:5rem 1.25rem 1rem; }
.ai-tools__inner{ max-width:72rem; margin:0 auto; }
.ai-tools__grid{ margin-top:3rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.ai-tool-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:20px; padding:1.75rem; text-decoration:none; color:inherit;
  transition:transform .35s var(--tp-ease), box-shadow .35s, border-color .35s; }
.ai-tool-card:hover{ transform:translateY(-6px);
  box-shadow:0 22px 46px -20px color-mix(in srgb, var(--brand) 30%, transparent);
  border-color:color-mix(in srgb, var(--brand) 32%, transparent); }
.ai-tool-card h3{ color:var(--ink); }
.ai-tool-card p{ margin-top:.5rem; color:var(--muted); flex:1; }
.ai-tool-card__go{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1.25rem;
  color:var(--brand); font-weight:600; font-size:.9375rem; }
.ai-tool-card__go svg{ width:1.1rem; height:1.1rem; }

/* ---------- PLAN CARDS (spoke) ---------- */
.ai-plans{ padding:5rem 1.25rem 1rem; }
.ai-plans__inner{ max-width:60rem; margin:0 auto; }
.ai-plans__lead{ text-align:center; margin:.75rem auto 0; max-width:34rem; color:var(--muted); }
.ai-plans__grid{ margin-top:3rem; display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; align-items:stretch; }
.ai-plan-card{ position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:24px; padding:2rem 1.75rem;
  transition:transform .35s var(--tp-ease), box-shadow .35s, border-color .35s; }
.ai-plan-card:hover{ transform:translateY(-6px);
  box-shadow:0 22px 46px -20px color-mix(in srgb, var(--brand) 28%, transparent); }
.ai-plan-card--best{ border-color:color-mix(in srgb, var(--brand) 45%, transparent);
  box-shadow:0 16px 40px -20px color-mix(in srgb, var(--brand) 40%, transparent); }
.ai-plan-card__badge{ position:absolute; top:-.85rem; inset-inline-end:1.5rem;
  background:var(--accent); color:#3a2a00; font-size:.75rem; font-weight:700;
  padding:.3rem .8rem; border-radius:9999px; }
.ai-plan-card__name{ color:var(--ink); }
.ai-plan-card__for{ margin-top:.25rem; color:var(--muted); }
.ai-plan-card__items{ list-style:none; margin:1.5rem 0 0; padding:0; flex:1; }
.ai-plan-card__items li{ display:flex; align-items:flex-start; gap:.6rem; margin-bottom:.85rem;
  color:var(--ink); font-size:.9375rem; }
.ai-plan-card__items svg{ width:1.1rem; height:1.1rem; color:var(--green); flex:none; margin-top:.15rem; }
.ai-plan-card__cta{ width:100%; justify-content:center; margin-top:1.5rem; }
.ai-plans__note{ text-align:center; margin-top:1.75rem; color:var(--muted); }

/* ---------- BODY (DB prose) ---------- */
.ai-body{ padding:4rem 1.25rem 1rem; }
.ai-body__inner{ max-width:48rem; margin:0 auto; color:var(--ink); line-height:2; }
.ai-body__inner h2{ margin:2.5rem 0 1rem; font-size:1.5rem; font-weight:800;
  color:var(--ink); letter-spacing:-.01em; }
.ai-body__inner h3{ margin:1.75rem 0 .75rem; font-size:1.125rem; font-weight:600; color:var(--ink); }
.ai-body__inner p{ margin:0 0 1rem; color:#374151; }
.ai-body__inner ul, .ai-body__inner ol{ margin:0 0 1.25rem; padding-inline-start:1.25rem; }
.ai-body__inner li{ margin-bottom:.5rem; color:#374151; }
.ai-body__inner strong{ color:var(--ink); font-weight:600; }
.ai-body__inner a{ color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
.ai-body__inner table{ width:100%; border-collapse:collapse; margin:1.25rem 0; font-size:.9375rem; }
.ai-body__inner th, .ai-body__inner td{ border:1px solid var(--line); padding:.7rem .85rem; text-align:start; }
.ai-body__inner thead th{ background:var(--brand-50); color:var(--brand); font-weight:600; }

/* FAQ accordion — style the raw <details> so it doesn't look like a browser default */
.ai-body__inner details{ border:1px solid var(--line); border-radius:14px; margin-bottom:.75rem;
  background:#fff; overflow:hidden; transition:border-color .25s; }
.ai-body__inner details[open]{ border-color:color-mix(in srgb, var(--brand) 30%, transparent); }
.ai-body__inner summary{ cursor:pointer; list-style:none; padding:1.05rem 1.25rem;
  font-weight:600; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.ai-body__inner summary::-webkit-details-marker{ display:none; }
.ai-body__inner summary::after{ content:"+"; color:var(--brand); font-size:1.4rem; line-height:1; transition:transform .25s; }
.ai-body__inner details[open] summary::after{ transform:rotate(45deg); }
.ai-body__inner details p{ margin:0; padding:0 1.25rem 1.15rem; color:#374151; }

/* ---------- FLOW STEPS ---------- */
.ai-flow{ padding:5rem 1.25rem 1rem; }
.ai-flow__inner{ max-width:72rem; margin:0 auto; }
.ai-flow__steps{ list-style:none; margin:3rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.ai-step{ position:relative; background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:1.75rem 1.5rem; transition:transform .35s var(--tp-ease), box-shadow .35s; }
.ai-step:hover{ transform:translateY(-6px); box-shadow:0 20px 42px -22px color-mix(in srgb, var(--brand) 26%, transparent); }
.ai-step__n{ display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem;
  border-radius:12px; font-weight:800; font-size:1.1rem; color:#fff; margin-bottom:1rem; }
.ai-step--brand .ai-step__n{ background:var(--brand); }
.ai-step--amber .ai-step__n{ background:var(--accent); color:#3a2a00; }
.ai-step--green .ai-step__n{ background:var(--green); }
.ai-step h3{ color:var(--ink); }
.ai-step p{ margin-top:.4rem; color:var(--muted); }

/* ---------- CLOSING CTA ---------- */
.ai-cta{ padding:4rem 1.25rem 5rem; }
.ai-cta__inner{ max-width:60rem; margin:0 auto; text-align:center; border-radius:28px;
  padding:3.5rem 2rem; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--brand), var(--brand-600)); }
.ai-cta__h{ color:#fff !important; }
.ai-cta__p{ color:rgba(255,255,255,.85); margin:1rem auto 0; max-width:34rem; }
.ai-cta .ai-btn--primary{ margin-top:2rem; background:#fff; color:var(--brand); }
.ai-cta .ai-btn--primary:hover{ background:var(--accent); color:#3a2a00; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .ai-trust__inner{ grid-template-columns:repeat(2,1fr); }
  .ai-tools__grid{ grid-template-columns:1fr; }
  .ai-flow__steps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .ai-hero{ padding:3.5rem 1.1rem 3rem; }
  .ai-plans__grid{ grid-template-columns:1fr; }
  .ai-flow__steps{ grid-template-columns:1fr; }
  .ai-cta__inner{ padding:2.5rem 1.25rem; }
}

/* ---------- DARK MODE ---------- */
.dark .ai-hero{ background:linear-gradient(180deg, #0f172a, #020617); }
.dark .ai-hero__title, .dark .ai-body__inner h2, .dark .ai-body__inner h3,
.dark .ai-body__inner strong, .dark .ai-trust__item .tp-h3, .dark .ai-plan-card__name,
.dark .ai-tool-card h3, .dark .ai-step h3,
.dark .ai .ai-h2,
.dark .ai-cap__row h3, .dark .cp-feat__card h3, .dark .cu-mode h3,
.dark .hub-tool h3, .dark .hub-why__item h3{ color:#e5e7eb; }
.dark .ai-hero__lead, .dark .ai-body__inner p, .dark .ai-body__inner li{ color:#94a3b8; }
.dark .ai-plan-card__items li, .dark .ai-plan-card__for, .dark .ai-tool-card p,
.dark .ai-step p, .dark .ai-trust__v, .dark .ai-plans__note, .dark .ai-plans__lead{ color:#94a3b8; }
.dark .ai-eyebrow{ background:color-mix(in srgb, var(--brand) 22%, #0f172a); color:#cfe0ff; }
.dark .ai-chip{ background:#0f172a; border-color:#1f2937; color:#e5e7eb; }
.dark .ai-trust__inner, .dark .ai-tool-card, .dark .ai-plan-card, .dark .ai-step,
.dark .ai-body__inner details{ background:#0f172a; border-color:#1f2937; }
.dark .ai-trust__k, .dark .ai-tool-card__go{ color:#cfe0ff; }
.dark .ai-body__inner summary{ color:#e5e7eb; }
.dark .ai-body__inner thead th{ background:color-mix(in srgb, var(--brand) 30%, #0f172a); color:#cfe0ff; }
.dark .ai-body__inner th, .dark .ai-body__inner td{ border-color:#1f2937; color:#cbd5e1; }
.dark .ai-body__inner details p, .dark .ai-body__inner td{ color:#cbd5e1; }
.dark .ai-body__inner a{ color:#93c5fd; }
.dark .ai-btn--ghost{ background:#0f172a; color:#cfe0ff; border-color:#334155; }

/* ============================================================
   BESPOKE per-product sections (Copilot editor, Cursor split,
   Hub dashboard, Claude capabilities). All inherit --pbrand.
   ============================================================ */

/* ---- Claude capability rows ---- */
.ai-cap{ padding:4rem 1.25rem 1rem; }
.ai-cap__inner{ max-width:52rem; margin:0 auto; }
.ai-cap__grid{ margin-top:2.5rem; display:grid; gap:1rem; }
.ai-cap__row{ display:flex; gap:1rem; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:18px; padding:1.4rem 1.5rem; transition:transform .3s var(--tp-ease), box-shadow .3s; }
.ai-cap__row:hover{ transform:translateY(-4px); box-shadow:0 18px 38px -22px color-mix(in srgb,var(--pbrand) 30%,transparent); }
.ai-cap__k{ flex:none; width:2.6rem; height:2.6rem; border-radius:12px; display:grid; place-items:center;
  font-family:ui-monospace,monospace; font-weight:800; font-size:1.2rem;
  background:color-mix(in srgb,var(--pbrand) 12%,transparent); color:var(--pbrand); }
.ai-cap__row h3{ color:var(--ink); }
.ai-cap__row p{ margin-top:.3rem; color:var(--muted); }

/* ---- Copilot: code editor hero pane ---- */
.cp-editor{ background:#0b1222; border:1px solid rgba(137,87,229,.3); border-radius:16px; overflow:hidden;
  box-shadow:0 30px 60px -30px #000; width:100%; max-width:30rem; }
.cp-editor__bar{ display:flex; align-items:center; justify-content:space-between; padding:.6rem .9rem;
  background:rgba(255,255,255,.03); border-bottom:1px solid rgba(255,255,255,.07); }
.cp-tab{ color:#c7d3e6; font-size:.78rem; font-family:ui-monospace,monospace; }
.cp-badge{ font-size:.68rem; font-weight:700; color:#fff; background:var(--pbrand); border-radius:6px; padding:.15rem .5rem; }
.cp-editor__body{ padding:1rem 1.1rem; font-family:ui-monospace,monospace; font-size:.82rem; line-height:1.9; }
.cp-line{ color:#c7d3e6; white-space:pre; }
.cp-ln{ display:inline-block; width:1.4rem; color:#3d4a63; }
.cp-kw{ color:#c792ea; } .cp-fn{ color:#82aaff; } .cp-ind{ white-space:pre; }
.cp-ghost{ color:#6b7d99; font-style:italic; background:rgba(137,87,229,.12); border-radius:4px; padding:0 2px; }
.cp-cur{ display:inline-block; width:7px; height:14px; background:var(--pbrand); vertical-align:-2px; animation:cpbl 1s steps(2) infinite; }
@keyframes cpbl{ 50%{opacity:0} }
.cp-hint{ display:flex; align-items:center; gap:.4rem; margin-top:.9rem; color:#a78bda; font-size:.72rem; font-family:inherit; }
.cp-hint svg{ width:.9rem; height:.9rem; }

/* Copilot feature grid */
.cp-feat{ padding:5rem 1.25rem 1rem; }
.cp-feat__inner{ max-width:72rem; margin:0 auto; }
.cp-feat__grid{ margin-top:3rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.cp-feat__card{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:1.75rem;
  transition:transform .35s var(--tp-ease), box-shadow .35s, border-color .35s; }
.cp-feat__card:hover{ transform:translateY(-6px); border-color:color-mix(in srgb,var(--pbrand) 32%,transparent);
  box-shadow:0 22px 46px -20px color-mix(in srgb,var(--pbrand) 30%,transparent); }
.cp-feat__ic{ width:3rem; height:3rem; border-radius:14px; display:grid; place-items:center; margin-bottom:1rem;
  background:color-mix(in srgb,var(--pbrand) 12%,transparent); color:var(--pbrand); }
.cp-feat__ic svg{ width:1.5rem; height:1.5rem; }
.cp-feat__card h3{ color:var(--ink); } .cp-feat__card p{ margin-top:.4rem; color:var(--muted); }

/* ---- Cursor: editor + chat split ---- */
.cu-split{ width:100%; max-width:30rem; display:grid; gap:.9rem; }
.cu-code{ background:#0b1222; border:1px solid rgba(14,165,233,.3); border-radius:14px; overflow:hidden; box-shadow:0 24px 50px -28px #000; }
.cu-code__bar{ display:flex; align-items:center; gap:.5rem; padding:.55rem .9rem; background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.07); color:#c7d3e6; font-size:.76rem; font-family:ui-monospace,monospace; }
.cu-dot{ width:.6rem; height:.6rem; border-radius:50%; background:var(--pbrand); }
.cu-code__body{ padding:.9rem 1rem; font-family:ui-monospace,monospace; font-size:.8rem; line-height:1.9; color:#c7d3e6; }
.cu-code__body > div{ white-space:pre; }
.cu-ln{ display:inline-block; width:1.3rem; color:#3d4a63; }
.cu-kw{ color:#c792ea; } .cu-fn{ color:#7dd3fc; }
.cu-hl{ background:color-mix(in srgb,var(--pbrand) 16%,transparent); border-inline-start:2px solid var(--pbrand); }
.cu-chat{ display:grid; gap:.5rem; }
.cu-msg{ border-radius:12px; padding:.7rem .95rem; font-size:.82rem; line-height:1.7; }
.cu-msg--me{ background:rgba(255,255,255,.06); color:#dbe6f7; border:1px solid rgba(255,255,255,.1); justify-self:end; }
.cu-msg--ai{ background:color-mix(in srgb,var(--pbrand) 14%,#0b1222); color:#bfe6fb; border:1px solid color-mix(in srgb,var(--pbrand) 30%,transparent); display:flex; align-items:center; gap:.5rem; }
.cu-ai-dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--pbrand); box-shadow:0 0 10px var(--pbrand); }

/* Cursor modes */
.cu-modes{ padding:5rem 1.25rem 1rem; }
.cu-modes__inner{ max-width:72rem; margin:0 auto; }
.cu-modes__grid{ margin-top:3rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.cu-mode{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:1.75rem;
  transition:transform .35s var(--tp-ease), box-shadow .35s; }
.cu-mode:hover{ transform:translateY(-6px); box-shadow:0 22px 46px -20px color-mix(in srgb,var(--pbrand) 30%,transparent); }
.cu-mode__tag{ display:inline-block; font-size:.72rem; font-weight:700; color:var(--pbrand);
  background:color-mix(in srgb,var(--pbrand) 12%,transparent); border-radius:8px; padding:.25rem .7rem; margin-bottom:.9rem; }
.cu-mode h3{ color:var(--ink); } .cu-mode p{ margin-top:.35rem; color:var(--muted); }

/* ---- Hub: centered hero (no split) ---- */
.hub-hero .ai-hero__inner{ max-width:44rem; text-align:center; }
.hub-hero .ai-hero__copy{ text-align:center; }
.hub-hero .ai-crumbs, .hub-hero .ai-hero__chips, .hub-hero .ai-hero__actions{ justify-content:center; }
.hub-hero .ai-hero__lead{ margin-inline:auto; }

/* Hub: big color-coded tool cards */
.hub-tools{ padding:5rem 1.25rem 1rem; }
.hub-tools__inner{ max-width:72rem; margin:0 auto; }
.hub-tools__grid{ margin-top:3rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.hub-tool{ position:relative; display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:#fff; border:1px solid var(--line); border-radius:22px; padding:2rem 1.75rem; overflow:hidden;
  transition:transform .35s var(--tp-ease), box-shadow .35s, border-color .35s; }
.hub-tool::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--tc); }
.hub-tool:hover{ transform:translateY(-8px); border-color:color-mix(in srgb,var(--tc) 40%,transparent);
  box-shadow:0 26px 52px -22px color-mix(in srgb,var(--tc) 40%,transparent); }
.hub-tool__glyph{ width:3.4rem; height:3.4rem; border-radius:16px; display:grid; place-items:center;
  font-family:ui-monospace,monospace; font-weight:800; font-size:1.5rem; margin-bottom:1.1rem;
  background:color-mix(in srgb,var(--tc) 14%,transparent); color:var(--tc); }
.hub-tool h3{ color:var(--ink); } .hub-tool p{ margin-top:.5rem; color:var(--muted); flex:1; }
.hub-tool__go{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1.25rem; color:var(--tc); font-weight:600; font-size:.9375rem; }
.hub-tool__go svg{ width:1.1rem; height:1.1rem; }

/* Hub: why-TraPay band */
.hub-why{ padding:4rem 1.25rem 1rem; }
.hub-why__inner{ max-width:66rem; margin:0 auto; }
.hub-why__grid{ margin-top:2.5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.hub-why__item{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.6rem; }
.hub-why__item h3{ color:var(--ink); } .hub-why__item p{ margin-top:.4rem; color:var(--muted); }

/* ---- responsive for bespoke sections ---- */
@media(max-width:900px){
  .cp-feat__grid, .cu-modes__grid, .hub-tools__grid, .hub-why__grid{ grid-template-columns:1fr; }
}

/* ---- dark mode for bespoke sections ---- */
.dark .ai-cap__row, .dark .cp-feat__card, .dark .cu-mode, .dark .hub-tool, .dark .hub-why__item{ background:#0f172a; border-color:#1f2937; }
.dark .ai-cap__row h3, .dark .cp-feat__card h3, .dark .cu-mode h3, .dark .hub-tool h3, .dark .hub-why__item h3{ color:#e5e7eb; }
.dark .ai-cap__row p, .dark .cp-feat__card p, .dark .cu-mode p, .dark .hub-tool p, .dark .hub-why__item p{ color:#94a3b8; }

/* ---- Hero side visual: big brand logo + tagline (replaces code visuals) ---- */
.ai-herologo{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.35rem; }
.ai-herologo__ring{ position:relative; width:11rem; height:11rem; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 50% 40%, color-mix(in srgb,var(--pbrand) 22%,transparent), transparent 70%);
  border:1px solid color-mix(in srgb,var(--pbrand) 25%,transparent); }
.ai-herologo__glow{ position:absolute; inset:0; border-radius:50%; filter:blur(30px);
  background:radial-gradient(circle, color-mix(in srgb,var(--pbrand) 45%,transparent), transparent 65%); opacity:.6; }
/* inline SVG → currentColor paints in the product color */
.ai-herologo__mark{ position:relative; display:grid; place-items:center; width:5.5rem; height:5.5rem;
  color:var(--pbrand); filter:drop-shadow(0 6px 20px color-mix(in srgb,var(--pbrand) 55%,transparent)); }
.ai-herologo__mark svg{ width:100%; height:100%; }
.ai-herologo__name{ margin-top:1.1rem; font-weight:800; font-size:1.5rem; color:#fff;
  font-family:var(--tp-font-heading,'Estedad','Vazirmatn',sans-serif); letter-spacing:-.01em; }
.ai-herologo__sub{ color:#9fb0c8; font-size:.9rem; }
.ai-herologo__badges{ display:flex; gap:.5rem; margin-top:.9rem; flex-wrap:wrap; justify-content:center; }
.ai-herologo__badges span{ font-size:.78rem; font-weight:600; color:#dbe6f7;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:9999px; padding:.4rem .85rem; }

/* ============================================================
   Motifs for the 5 added services. All inherit --pbrand.
   ============================================================ */
.el-wave, .gpt-chat, .mj-gallery, .gm-panel, .cy-panel{ width:100%; max-width:30rem;
  background:#0b1222; border:1px solid color-mix(in srgb,var(--pbrand) 30%,transparent); border-radius:18px;
  padding:1.4rem 1.5rem; box-shadow:0 30px 60px -30px #000; }
.el-wave__mark svg, .mj-prompt__logo svg, .gpt-chat__logo svg, .gm-spark svg, .cy-logo svg{ color:var(--pbrand); }

/* ElevenLabs — waveform */
.el-wave{ display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
.el-wave__mark{ width:2.6rem; height:2.6rem; color:var(--pbrand); }
.el-wave__mark svg{ width:100%; height:100%; }
.el-wave__bars{ display:flex; align-items:center; gap:3px; height:4.5rem; }
.el-wave__bars span{ width:5px; border-radius:3px; background:var(--pbrand);
  height:calc(18% + (var(--i) % 5) * 18%); opacity:.55;
  animation:elw 1.1s ease-in-out infinite; animation-delay:calc(var(--i) * .045s); }
@keyframes elw{ 0%,100%{ transform:scaleY(.4); opacity:.4 } 50%{ transform:scaleY(1); opacity:.9 } }
.el-wave__cap{ color:#9fb0c8; font-size:.85rem; }
@media(prefers-reduced-motion:reduce){ .el-wave__bars span{ animation:none } }

/* ChatGPT — chat */
.gpt-chat{ display:flex; flex-direction:column; gap:.55rem; }
.gpt-chat__bar{ display:flex; align-items:center; gap:.5rem; color:#c7d3e6; font-size:.82rem; font-weight:600; padding-bottom:.7rem; border-bottom:1px solid rgba(255,255,255,.07); margin-bottom:.4rem; }
.gpt-chat__logo{ width:1.4rem; height:1.4rem; display:grid; place-items:center; }
.gpt-chat__logo svg{ width:100%; height:100%; }
.gpt-msg{ border-radius:12px; padding:.65rem .9rem; font-size:.82rem; line-height:1.7; max-width:85%; }
.gpt-msg--me{ background:rgba(255,255,255,.06); color:#dbe6f7; border:1px solid rgba(255,255,255,.1); align-self:flex-end; }
.gpt-msg--ai{ background:color-mix(in srgb,var(--pbrand) 14%,#0b1222); color:#cfeee5; border:1px solid color-mix(in srgb,var(--pbrand) 30%,transparent); align-self:flex-start; display:flex; align-items:center; gap:.5rem; }
.gpt-msg--done{ color:#7ee7c7; }
.gpt-typing{ display:inline-flex; gap:3px; }
.gpt-typing i{ width:5px; height:5px; border-radius:50%; background:var(--pbrand); animation:gptt 1s infinite; }
.gpt-typing i:nth-child(2){ animation-delay:.15s } .gpt-typing i:nth-child(3){ animation-delay:.3s }
@keyframes gptt{ 0%,100%{ opacity:.3 } 50%{ opacity:1 } }

/* Midjourney — gallery */
.mj-gallery{ display:flex; flex-direction:column; gap:1rem; }
.mj-prompt{ display:flex; align-items:center; gap:.5rem; color:#c7d3e6; font-size:.8rem; font-family:ui-monospace,monospace; direction:rtl; }
.mj-prompt__logo{ width:1.4rem; height:1.4rem; } .mj-prompt__logo svg{ width:100%; height:100%; }
.mj-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.mj-grid span{ aspect-ratio:1; border-radius:12px;
  background:linear-gradient(135deg, color-mix(in srgb,var(--pbrand) 55%,#0b1222), color-mix(in srgb,var(--pbrand) 15%,#0b1222));
  border:1px solid color-mix(in srgb,var(--pbrand) 25%,transparent); animation:mjf .8s ease both; }
.mj-grid span:nth-child(2){ animation-delay:.1s } .mj-grid span:nth-child(3){ animation-delay:.2s } .mj-grid span:nth-child(4){ animation-delay:.3s }
@keyframes mjf{ from{ opacity:0; transform:scale(.9) } to{ opacity:1; transform:none } }

/* Gemini — multimodal spark */
.gm-panel{ display:flex; flex-direction:column; align-items:center; gap:1.1rem; text-align:center; }
.gm-spark{ width:3.4rem; height:3.4rem; color:var(--pbrand); filter:drop-shadow(0 0 20px color-mix(in srgb,var(--pbrand) 60%,transparent)); }
.gm-spark svg{ width:100%; height:100%; }
.gm-modes{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.gm-modes span{ font-size:.78rem; font-weight:600; color:#dbe6f7; background:rgba(255,255,255,.05);
  border:1px solid color-mix(in srgb,var(--pbrand) 25%,transparent); border-radius:9999px; padding:.4rem .85rem; }
.gm-cap{ color:#9fb0c8; font-size:.85rem; }

/* Copy.ai — text generation */
.cy-panel{ display:flex; flex-direction:column; gap:.9rem; }
.cy-bar{ display:flex; align-items:center; gap:.5rem; color:#c7d3e6; font-size:.82rem; font-weight:600; }
.cy-logo{ width:1.4rem; height:1.4rem; } .cy-logo svg{ width:100%; height:100%; }
.cy-lines{ display:flex; flex-direction:column; gap:.6rem; }
.cy-lines span{ height:.7rem; border-radius:6px; background:rgba(255,255,255,.08); }
.cy-lines .cy-typing{ background:color-mix(in srgb,var(--pbrand) 40%,transparent); animation:cyt 1.4s ease-in-out infinite; }
@keyframes cyt{ 0%,100%{ opacity:.4 } 50%{ opacity:1 } }
.cy-cap{ color:#9fb0c8; font-size:.85rem; }

/* dark-mode: panels already dark; no override needed (they use #0b1222) */

/* ---- Perplexity — search answer ---- */
.px-panel{ width:100%; max-width:30rem; background:#0b1222; border:1px solid color-mix(in srgb,var(--pbrand) 30%,transparent);
  border-radius:18px; padding:1.4rem 1.5rem; box-shadow:0 30px 60px -30px #000; display:flex; flex-direction:column; gap:.9rem; }
.px-bar{ display:flex; align-items:center; gap:.5rem; color:#c7d3e6; font-size:.82rem; font-weight:600; }
.px-logo{ width:1.5rem; height:1.5rem; color:var(--pbrand); } .px-logo svg{ width:100%; height:100%; }
.px-q{ color:#dbe6f7; font-size:.9rem; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:.7rem .9rem; }
.px-lines{ display:flex; flex-direction:column; gap:.5rem; }
.px-lines i{ height:.7rem; border-radius:6px; background:rgba(255,255,255,.08); display:block; }
.px-lines i:first-child{ background:color-mix(in srgb,var(--pbrand) 35%,transparent); }
.px-src{ display:flex; gap:.5rem; }
.px-src span{ font-size:.72rem; color:#9fb0c8; background:rgba(255,255,255,.05); border:1px solid color-mix(in srgb,var(--pbrand) 25%,transparent); border-radius:9999px; padding:.25rem .6rem; }

/* ---- D-ID — talking avatar video preview ---- */
.did-panel{ width:100%; max-width:27rem; background:#140a1e; border:1px solid color-mix(in srgb,var(--pbrand) 30%,transparent);
  border-radius:18px; padding:1rem; box-shadow:0 30px 60px -30px #000; display:flex; flex-direction:column; gap:.85rem; }
.did-screen{ position:relative; width:100%; aspect-ratio:16/10; border-radius:14px; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 20%, color-mix(in srgb,var(--pbrand) 22%,#140a1e), #100816);
  border:1px solid color-mix(in srgb,var(--pbrand) 22%,transparent); display:grid; place-items:center; }
.did-face{ width:66%; height:66%; margin-top:6%; }
.did-rec{ position:absolute; top:.55rem; inset-inline-start:.6rem; display:inline-flex; align-items:center; gap:.35rem;
  font-size:.66rem; font-weight:700; letter-spacing:.04em; color:#ffd7df; background:rgba(0,0,0,.35);
  border-radius:9999px; padding:.2rem .55rem; }
.did-rec i{ width:.5rem; height:.5rem; border-radius:50%; background:#ff4d6d; animation:didrec 1.4s ease-in-out infinite; }
@keyframes didrec{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
.did-sub{ position:absolute; bottom:.6rem; inset-inline:0; margin:0 auto; width:max-content; max-width:88%;
  font-size:.8rem; color:#fff; background:rgba(0,0,0,.5); border-radius:8px; padding:.3rem .7rem; }
.did-lip{ position:absolute; bottom:2.4rem; inset-inline:0; margin:0 auto; width:max-content;
  display:flex; align-items:center; gap:3px; height:1.1rem; }
.did-lip i{ width:4px; border-radius:3px; background:var(--pbrand); opacity:.7; animation:didl 1s ease-in-out infinite; }
.did-lip i:nth-child(1){ height:30%; animation-delay:0s } .did-lip i:nth-child(2){ height:65%; animation-delay:.08s }
.did-lip i:nth-child(3){ height:100%; animation-delay:.16s } .did-lip i:nth-child(4){ height:80%; animation-delay:.24s }
.did-lip i:nth-child(5){ height:100%; animation-delay:.32s } .did-lip i:nth-child(6){ height:55%; animation-delay:.4s } .did-lip i:nth-child(7){ height:35%; animation-delay:.48s }
@keyframes didl{ 0%,100%{ transform:scaleY(.45); opacity:.45 } 50%{ transform:scaleY(1); opacity:.95 } }
.did-controls{ display:flex; align-items:center; gap:.7rem; padding:0 .2rem; }
.did-play{ flex:none; width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center; background:var(--pbrand); color:#fff; }
.did-play svg{ width:.9rem; height:.9rem; margin-inline-start:1px; }
.did-track{ flex:1; height:.35rem; border-radius:9999px; background:rgba(255,255,255,.12); position:relative; overflow:hidden; }
.did-track b{ position:absolute; inset-inline-start:0; top:0; bottom:0; width:42%; border-radius:9999px; background:var(--pbrand); }
.did-time{ flex:none; font-size:.72rem; color:#c9b6d6; font-variant-numeric:tabular-nums; }
.did-cap{ color:#b7a3c6; font-size:.82rem; text-align:center; }
@media(prefers-reduced-motion:reduce){ .did-lip i,.did-rec i{ animation:none } }

/* ---- Poe — multi-bot switcher ---- */
.poe-panel{ width:100%; max-width:30rem; background:#0b1222; border:1px solid color-mix(in srgb,var(--pbrand) 30%,transparent);
  border-radius:18px; padding:1.4rem 1.5rem; box-shadow:0 30px 60px -30px #000; display:flex; flex-direction:column; gap:1rem; }
.poe-bar{ display:flex; align-items:center; gap:.5rem; color:#c7d3e6; font-size:.82rem; font-weight:600; }
.poe-logo{ width:1.5rem; height:1.5rem; color:var(--pbrand); } .poe-logo svg{ width:100%; height:100%; }
.poe-bots{ display:flex; gap:.5rem; flex-wrap:wrap; }
.poe-bot{ display:inline-flex; align-items:center; gap:.45rem; font-size:.8rem; font-weight:600; color:#dbe6f7;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:.4rem .7rem; }
.poe-bot--on{ background:color-mix(in srgb,var(--bc) 18%,transparent); border-color:color-mix(in srgb,var(--bc) 45%,transparent); }
.poe-av{ width:1.05rem; height:1.05rem; display:grid; place-items:center; color:var(--bc); }
.poe-av svg{ width:100%; height:100%; }
.poe-bot--more{ color:#9fb0c8; }
.poe-thread{ display:flex; flex-direction:column; gap:.5rem; }
.poe-line{ border-radius:11px; padding:.55rem .85rem; font-size:.8rem; line-height:1.6; max-width:88%; }
.poe-line--me{ background:rgba(255,255,255,.06); color:#dbe6f7; border:1px solid rgba(255,255,255,.1); align-self:flex-end; }
.poe-line--ai{ background:rgba(255,255,255,.03); color:#c7d3e6; border:1px solid rgba(255,255,255,.08); align-self:flex-start; display:flex; align-items:center; gap:.45rem; }
.poe-dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--bc); box-shadow:0 0 8px var(--bc); }
.poe-msg{ color:#9fb0c8; font-size:.85rem; }