/* tech.css — couche "tech & dynamique" (style Glido) par-dessus site.css
   Conserve la palette Leadymap (encre #14141C, violet #6C5DD3, pastels).
   Chargé APRÈS site.css : ces règles priment. */

:root {
  --glow-purple: rgba(108, 93, 211, 0.55);
  --grid-line: rgba(255, 255, 255, 0.05);
}

/* ─────────────────────────────────────────────
   HEADER réactif au scroll (home : transparent → glass)
   ───────────────────────────────────────────── */
body[data-page="home"] .site-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background 0.3s var(--ease, ease), border-color 0.3s;
}
body[data-page="home"] .site-header .nav-links a,
body[data-page="home"] .site-header .header-cta .login {
  color: rgba(255, 255, 255, 0.78);
}
body[data-page="home"] .site-header .nav-links a:hover,
body[data-page="home"] .site-header .header-cta .login:hover { color: #fff; }
body[data-page="home"] .site-header .brand-logo { filter: brightness(0) invert(1); transition: filter 0.3s; }

/* bouton "Commencer" sur fond sombre */
body[data-page="home"] .site-header .btn-primary {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
  color: #fff;
}
body[data-page="home"] .site-header .btn-primary:hover { background: rgba(255,255,255,0.2); }

/* état "scrollé" : fond sombre OPAQUE (plus de backdrop-filter, qui recalculait
   un flou sur tout le contenu défilant à chaque frame). */
body[data-page="home"] .site-header.scrolled {
  background: rgba(14, 14, 21, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* ─────────────────────────────────────────────
   HERO sombre, glow + grille (full-bleed)
   ───────────────────────────────────────────── */
.hero-center {
  background: #0E0E15;
  margin-top: -69px;            /* passe sous le header sticky */
  padding-top: 150px;
  padding-bottom: 0;
  border-radius: 0 0 36px 36px;
  overflow: hidden;             /* clippe le bas du screen : effet "tuck" */
  isolation: isolate;
}
/* halos mesh STATIQUES : les dégradés radiaux sont déjà doux, donc plus besoin
   de `filter: blur()` animé en boucle infinie — c'était le principal coupable du
   freeze (recomposition GPU d'un flou sur une surface > viewport, à chaque frame). */
.hero-center::before {
  content: ""; position: absolute; inset: -10% -10% 30% -10%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(46% 50% at 18% 8%, rgba(108, 93, 211, 0.50), transparent 60%),
    radial-gradient(40% 46% at 82% 4%, rgba(120, 110, 230, 0.36), transparent 60%),
    radial-gradient(50% 50% at 50% -6%, rgba(150, 130, 255, 0.28), transparent 62%);
}
/* lignes fluides convergentes (remplace la grille) */
.hero-center::after { content: none; }
.hero-lines {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(150% 130% at 50% 42%, #000 62%, transparent 97%);
  mask-image: radial-gradient(150% 130% at 50% 42%, #000 62%, transparent 97%);
}
.hero-lines path { fill: none; }
/* Lignes du hero : 100 % STATIQUES, AUCUNE animation au chargement.
   Le tracé animé (stroke-dashoffset) repeignait 12 chemins SVG par frame pendant
   6,5 s pile à l'ouverture → lenteur perçue. On ne garde que les traits convergents,
   rendus un peu plus lumineux (dégradé blanc statique via le mask radial), et le
   halo violet statique derrière (une seule passe de peinture, coût nul ensuite). */
.hl-base use { stroke: rgba(255,255,255,0.13); fill: none; }
.hl-spark, .hl-core { display: none; }

/* textes hero en clair */
.hero-center .wrap { position: relative; z-index: 2; }
body[data-page="home"] .hero-center h1 { color: #fff; max-width: 16ch; }
body[data-page="home"] .hero-center .h1 .accent-word {
  background: linear-gradient(120deg, #C9BEFF 0%, #8C79F0 55%, #C6FFBC 130%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
body[data-page="home"] .hero-center .lead { color: rgba(255,255,255,0.66); }

/* pill de preuve sur fond sombre (glass) */
.hero-center .proof-pill {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.82);
  box-shadow: none;
}
.hero-center .proof-pill .av { border-color: #14141C; }

/* CTA principal lumineux */
.hero-center .btn-primary {
  background: linear-gradient(180deg, #7E6FE0, #6C5DD3);
  border-color: transparent; color: #fff;
  box-shadow: 0 10px 30px -10px var(--glow-purple), inset 0 1px 0 rgba(255,255,255,0.25);
}
.hero-center .btn-primary:hover {
  background: linear-gradient(180deg, #8B7CEC, #5A4CC5);
  box-shadow: 0 16px 40px -10px var(--glow-purple), inset 0 1px 0 rgba(255,255,255,0.3);
}
.hero-center .btn-ghost {
  background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #fff;
}
.hero-center .btn-ghost:hover { background: rgba(255,255,255,0.12); }

/* ─── Screenshot produit + cartes glass flottantes ─── */
.hero-shot { margin-top: 56px; padding-bottom: 0; transform: none; }
.hero-shot .glow { display: none; }
.hero-shot .shot-frame {
  border: 1px solid rgba(255,255,255,0.10);
  border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 50px 90px -40px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04);
  background: #14141C;
}
.hero-shot .shot-frame .mock-bar { background: #1B1B26; border-bottom-color: rgba(255,255,255,0.07); }
.hero-shot .shot-frame .mock-bar .url { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.45); }

/* cartes flottantes */
.float-card {
  position: absolute; z-index: 3;
  background: #fff;
  border: 1.5px solid var(--pastel-mint-ink);
  border-radius: var(--r-pill);
  box-shadow: 0 22px 50px -18px rgba(20,20,28,0.5);
  padding: 6px 14px 6px 7px; display: flex; align-items: center; gap: 9px;
  animation: floaty 6s ease-in-out infinite;
}
.float-card .fc-ic {
  width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: var(--pastel-mint); color: var(--pastel-mint-ink);
}
.float-card .fc-ic.lav { background: var(--pastel-lavender); color: var(--pastel-lavender-ink); }
.float-card .fc-ic.sky { background: var(--pastel-sky); color: var(--pastel-sky-ink); }
.float-card .fc-ic svg { width: 14px; height: 14px; }
.float-card .fc-txt { font-size: 12.5px; font-weight: 600; color: var(--pastel-mint-ink); white-space: nowrap; letter-spacing: -0.01em; }
.float-card.fc-2 { border-color: var(--pastel-lavender-ink); }
.float-card.fc-2 .fc-txt { color: var(--pastel-lavender-ink); }
.float-card.fc-3 { border-color: var(--pastel-sky-ink); }
.float-card.fc-3 .fc-txt { color: var(--pastel-sky-ink); }
.float-card.fc-1 { bottom: 9%; left: 4%; animation-delay: 0s; border-color: #C5FFBC; }
.float-card.fc-2 { top: 54%; right: 4%; animation-delay: 1.2s; }
.float-card.fc-round { padding: 10px; border-radius: 50%; }
.float-card.fc-round .fc-ic { width: 40px; height: 40px; }
.float-card.fc-round .fc-ic svg { width: 19px; height: 19px; }
.float-card.fc-3 { top: 14%; left: -5%; animation-delay: 2.4s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ─── Bandeau de logos (proof) repensé sombre/clair ─── */
.proof { background: transparent; border: 0; padding: 96px 0 8px; }
.proof .wrap { gap: 10px 30px; }
.proof .label { color: var(--ink-mute); }
.proof .logos span {
  color: var(--ink-soft); opacity: 0.7; transition: opacity 0.2s, color 0.2s;
}
.proof .logos span:hover { opacity: 1; color: var(--purple); }

/* ─────────────────────────────────────────────
   FEATURES en bento grid (cartes + glow au survol)
   ───────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bento-card {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 40px 32px;
  box-shadow: var(--shadow-sm); text-align: center;
  transition: transform 0.22s var(--ease, ease), box-shadow 0.22s, border-color 0.22s;
}
/* lumière violette qui parcourt la bordure au survol */
.bento-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--bd-angle, 0deg),
    transparent 0deg, transparent 70deg,
    rgba(108,93,211,0.9) 90deg, #C6BFFF 100deg,
    rgba(108,93,211,0.9) 110deg, transparent 130deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.3s;
}
.bento-card:hover::after { opacity: 1; animation: borderRun 0.9s linear 1 forwards; }
@property --bd-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes borderRun { from { --bd-angle: 0deg; } to { --bd-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .bento-card:hover::after { animation: none; opacity: 0.6; }
}

/* mini graphique d'évolution des revenus (carte Revenus) */
.rev-chart { margin-top: 22px; text-align: left; }
.rev-area { width: 100%; height: 130px; display: block; overflow: visible; }
.rev-grid { stroke: rgba(20,20,28,0.07); stroke-width: 1; stroke-dasharray: 4 4; }
.rev-fill { fill: url(#revFill); }
.rev-line {
  fill: none; stroke: var(--purple); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 640; stroke-dashoffset: 640; transition: stroke-dashoffset 1.2s var(--ease, ease);
}
.bento-card:hover .rev-line,
.reveal.in .rev-line { stroke-dashoffset: 0; }
.rev-axis {
  display: flex; justify-content: space-between; margin-top: 8px; padding: 0 4px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-mute); text-transform: lowercase;
}
@media (prefers-reduced-motion: reduce) {
  .rev-line { stroke-dashoffset: 0; transition: none; }
}

/* jauge de scoring prospect (carte Scraping) — flat */
.score-gauge { margin: 24px auto 0; max-width: 300px; text-align: center; }
.score-gauge svg { width: 100%; height: auto; display: block; overflow: visible; }
.score-needle { transform-box: fill-box; transform-origin: 150px 150px; transform: rotate(-60deg); transition: transform 1.1s var(--ease, ease); }
.bento-card:hover .score-needle, .reveal.in .score-needle { transform: rotate(0deg); }
.score-meta { margin-top: 2px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.score-val { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.score-cap { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
@media (prefers-reduced-motion: reduce) {
  .score-needle { transition: none; transform: rotate(0deg); }
}
.bento-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--glow, rgba(108,93,211,0.16));
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.bento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(108,93,211,0.3); }
.bento-card:hover::before { opacity: 0.5; }
.bento-card .ftile { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; margin: 0 auto 18px; }
.bento-card .ftile svg { width: 21px; height: 21px; }
.bento-card h4 { font-size: 24px; margin-bottom: 10px; letter-spacing: -0.025em; line-height: 1.12; }
.bento-card p { margin: 0; font-size: 15px; color: var(--ink-soft); line-height: 1.55; max-width: 46ch; margin-left: auto; margin-right: auto; }
.bento-card .mono-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--purple); display: block; margin-bottom: 12px;
}
/* spans */
.bento-wide { grid-column: span 1; }
.bento-third { grid-column: span 1; }
.bento-card.dark {
  background: linear-gradient(150deg, #1B1B26, #14141C); color: #fff; border-color: transparent;
}
.bento-card.dark h4 { color: #fff; }
.bento-card.dark p { color: rgba(255,255,255,0.62); }
.bento-card.dark .mono-tag { color: #C6FFBC; }
.bento-card.dark .shot-inset {
  margin: 18px auto 0; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.6); max-width: 620px;
}
.bento-card.dark .shot-inset img { width: 100%; display: block; }

/* conversation IA dans la carte bento sombre */
.bento-card.dark .bento-convo {
  border: 0; box-shadow: none; background: transparent; overflow: visible;
  margin: 22px auto 0; max-width: 560px;
}
.bento-card.dark .bento-convo .ai-bubble { margin-bottom: 16px; }
.bento-card.dark .bento-convo .ai-bubble:last-child { margin-bottom: 4px; }

/* survol : retour au fondu blanc + transition douce */
.bento-card:has(.search-shot) {
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}

.shotcard img { transition: opacity 0.2s var(--ease, ease); }

/* quad : 4 colonnes full-width, sans fond, séparées par des filets fins */
.quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; width: 100%; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quad-card {
  position: relative;
  background: transparent; border: 0;
  border-radius: 0; padding: 56px 30px;
  box-shadow: none;
  transition: none;
  display: flex; flex-direction: column;
}
.quad-card p { margin-top: auto; }
.quad-card + .quad-card { border-left: 1px solid var(--line); }
.quad-card::after { display: none; }
.quad-card:hover { transform: none; box-shadow: none; border-color: var(--line); }
.quad-ico { width: 40px; height: 40px; border-radius: 0; display: grid; place-items: center; margin: 0 0 16px -2px; background: transparent; color: var(--purple); font-family: var(--font-mono, monospace); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.quad-ico svg { width: 21px; height: 21px; }
.quad-card h4 { font-size: 17px; margin-bottom: 8px; letter-spacing: -0.02em; line-height: 1.25; }
.quad-card p { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 940px) { .quad { grid-template-columns: 1fr 1fr; } .quad-card:nth-child(3) { border-left: 0; } .quad-card:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 560px) { .quad { grid-template-columns: 1fr; } .quad-card + .quad-card { border-left: 0; border-top: 1px solid var(--line); } }

.search-shot {
  position: relative; margin: 22px auto 0; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 18px 40px -22px rgba(20,20,28,0.4);
  max-width: 560px;
}
.search-shot img { width: 100%; display: block; margin-top: -4px; }
/* fondu sombre lié à la carte (couvre tout le bas, devient blanc au survol) */
.card-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(to bottom, rgba(30,27,53,0), #1E1B35 90%);
  pointer-events: none; z-index: 1;
  transition: background 0.35s var(--ease, ease);
}
.bento-card:hover .card-fade {
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 90%);
}
/* la carte sombre (Reporting) garde un fondu sombre, sans virer au blanc */
.bento-card.dark .card-fade {
  background: linear-gradient(to bottom, rgba(20,20,28,0), #14141C 90%);
}
.bento-card.dark:hover .card-fade {
  background: linear-gradient(to bottom, rgba(20,20,28,0), #14141C 90%);
}
.search-loupe {
  position: absolute; right: 44px; bottom: 52px; z-index: 2;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--purple); color: #fff;
  box-shadow: 0 12px 28px -8px rgba(108,93,211,0.7), 0 0 0 6px rgba(108,93,211,0.16);
}
.search-loupe svg { width: 24px; height: 24px; }

@media (max-width: 940px) {
  .hero-center { margin-top: -69px; padding-top: 130px; }
  .float-card { display: none; }
  .hero-shot { transform: translateY(40px); }
  .bento { grid-template-columns: 1fr; }
  .bento-wide, .bento-third { grid-column: span 1; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-center::before, .float-card { animation: none; }
}

/* ─────────────────────────────────────────────
   AI ASSISTANT — section full-bleed sombre
   ───────────────────────────────────────────── */
.ai-band {
  position: relative;
  width: 100vw; left: 50%; transform: translateX(-50%);
  background:
    radial-gradient(60% 70% at 12% 8%, rgba(108,93,211,0.34), transparent 60%),
    radial-gradient(54% 64% at 88% 96%, rgba(150,130,255,0.20), transparent 60%),
    linear-gradient(165deg, #16161F 0%, #0E0E15 70%);
  color: #fff; padding: clamp(64px, 8vw, 112px) 24px; overflow: hidden;
}
.ai-band::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(110% 80% at 50% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(110% 80% at 50% 0%, #000 30%, transparent 75%);
}
.ai-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }
.ai-head { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.ai-head .tag-pill { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: #fff; }
.ai-head h2 { color: #fff; margin: 18px 0 14px; }
.ai-head .lead { color: rgba(255,255,255,0.64); }

.ai-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 36px; align-items: center; }

/* live call card */
.ai-call {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px; padding: 22px;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.7);
}
.ai-call-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ai-live { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #C6FFBC; }
.ai-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #C6FFBC; box-shadow: 0 0 0 0 rgba(198,255,188,0.6); animation: aiPulse 1.8s ease-out infinite; }
@keyframes aiPulse { 0%{box-shadow:0 0 0 0 rgba(198,255,188,0.55)} 70%{box-shadow:0 0 0 9px rgba(198,255,188,0)} 100%{box-shadow:0 0 0 0 rgba(198,255,188,0)} }
.ai-call-time { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.5); }
.ai-bubble { position: relative; border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; }
.ai-bubble.client, .ai-bubble.assist { max-width: 88%; }
.ai-bubble.assist { margin-left: auto; }

/* Bulle PROSPECT (gauche) : pointe = carré pivoté de la MÊME couleur opaque,
   fusionnée à la bulle = une seule forme continue */
.ai-bubble.client::after {
  content: ""; position: absolute; left: 16px; bottom: -7px;
  width: 18px; height: 18px; background: #21242C;
  border-right: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  border-radius: 0 0 3px 0; transform: rotate(45deg);
}

/* Bulle IA (droite) : même principe, pointe à droite */
.ai-bubble.assist::after {
  content: ""; position: absolute; right: 16px; bottom: -7px;
  width: 18px; height: 18px; background: #322C52;
  border-right: 1px solid rgba(140,121,240,0.4);
  border-bottom: 1px solid rgba(140,121,240,0.4);
  border-radius: 0 0 3px 0; transform: rotate(45deg);
}
.ai-bubble .ai-who { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px; }
.ai-bubble .ai-who svg { width: 13px; height: 13px; }
.ai-bubble p { margin: 0; font-size: 14px; line-height: 1.5; }
.ai-bubble.client { background: #21242C; border: 1px solid rgba(255,255,255,0.10); }
.ai-bubble.client .ai-who { color: rgba(255,255,255,0.5); }
.ai-bubble.client p { color: rgba(255,255,255,0.82); }
.ai-bubble.assist { background: #322C52; border: 1px solid rgba(140,121,240,0.4); }
.ai-bubble.assist .ai-who { color: #C9BEFF; }
.ai-bubble.assist p { color: #fff; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.ai-chip { font-size: 11px; font-weight: 500; padding: 5px 11px; border-radius: var(--r-pill); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.13); color: rgba(255,255,255,0.72); }
.ai-chip.ok { background: rgba(198,255,188,0.14); border-color: rgba(198,255,188,0.35); color: #C6FFBC; }

/* pillars */
.ai-pillars { display: flex; flex-direction: column; gap: 16px; }
.ai-pillar {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px; padding: 22px 24px;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.ai-pillar:hover { border-color: rgba(140,121,240,0.45); background: rgba(108,93,211,0.1); transform: translateY(-2px); }
.ai-pill-n { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: #8C79F0; line-height: 1; }
.ai-pillar h3 { font-size: 18px; margin: 0 0 6px; letter-spacing: -0.02em; color: #fff; }
.ai-pillar p { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.62); }

@media (max-width: 940px) {
  .ai-grid { grid-template-columns: 1fr; gap: 24px; }
}