/* ============================================================
   Xioma Automotive — site3 component layer (ported from archive/site3).
   Adds the site3-style Technology page (architecture diagram, agentic
   cards, integrations, dark CTA slab, motion) and the homepage
   "Ten modules" bento. Reuses the existing design tokens verbatim.
   Loaded only on the pages that use these components.
   ============================================================ */

/* ---- scroll reveal (JS adds .is-in) ---- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.32s }
.reveal[data-d="5"]{ transition-delay:.40s }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none } }

/* ---- shared drift keyframes ---- */
@keyframes drift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(60px,40px)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-50px,50px)} }
@keyframes beamspin { to { transform: rotate(360deg); } }

/* ---- generic card grid (site3) ---- */
.feature-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.card { background: var(--bg-soft); border:1px solid var(--line); border-radius: var(--radius-lg); padding:28px;
  display:flex; flex-direction:column; gap:12px; transition: border-color .2s, transform .2s, box-shadow .2s; }
.card .card-ico { color: var(--accent); }
.card h3 { font-size: clamp(18px,1.5vw,22px); color: var(--ink); }
.card p { color: var(--mute); font-size:14.5px; line-height:1.55; }
.card--hover:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow-frame); }

/* ---- animated section art (light sections) ---- */
.has-art { position: relative; overflow: hidden; }
.has-art > .container { position: relative; z-index: 1; }
.sec-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sec-art .blob { position: absolute; border-radius: 50%; filter: blur(70px); }
.sec-art .blob.b1 { width:560px; height:560px; top:-230px; right:-150px;
  background: radial-gradient(circle, rgba(47,134,201,.17), transparent 62%); animation: drift1 24s ease-in-out infinite; }
.sec-art .blob.b2 { width:500px; height:500px; bottom:-240px; left:-170px;
  background: radial-gradient(circle, rgba(95,168,220,.13), transparent 62%); animation: drift2 30s ease-in-out infinite; }
.art-grid .sec-art::before {
  content:""; position:absolute; inset:-60px;
  background-image:
    linear-gradient(rgba(47,134,201,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,134,201,.09) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(80% 85% at 50% 42%, #000 30%, transparent 78%);
  mask-image: radial-gradient(80% 85% at 50% 42%, #000 30%, transparent 78%);
  animation: gridpan 46s linear infinite;
}
@keyframes gridpan { to { transform: translate(46px, 46px); } }

/* inline SVG art (circuit traces) */
.art-svg { position:absolute; inset:0; width:100%; height:100%; }
.art-trace { fill:none; stroke: rgba(47,134,201,.20); stroke-width:1.5; stroke-dasharray: 7 11; animation: dashmove 3.6s linear infinite; }
@keyframes dashmove { to { stroke-dashoffset: -28; } }
.art-node { fill: var(--accent); opacity:.3; animation: nodepulse 3.4s ease-in-out infinite; }
.art-node.d1 { animation-delay: 1.1s; } .art-node.d2 { animation-delay: 2.2s; }
@keyframes nodepulse { 0%,100% { opacity:.22; } 50% { opacity:.8; } }

/* ============================================================
   Bento modules (homepage "Ten modules")
   ============================================================ */
.bento { display:grid; grid-template-columns: repeat(4,1fr); gap:14px; grid-auto-rows: 176px; grid-auto-flow: dense; }
.bento .b {
  position:relative; overflow:hidden; border:1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--bg-soft); padding:22px; display:flex; flex-direction:column; gap:8px; justify-content:flex-end;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.bento .b:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow-frame); }
.bento .b h3 { font-size:17px; color:var(--ink); }
.bento .b p { font-size:13px; line-height:1.5; color:var(--mute); }
.bento .b .mod-ico { width:38px; height:38px; }
.bento .b.wide { grid-column: span 2; }
.bento .b.tall { grid-row: span 2; }
.bento .b.photo { color:#fff; justify-content:flex-end; border:none; }
.bento .b.photo::before { content:""; position:absolute; inset:0; background:var(--pic) center/cover; z-index:0;
  animation: kenburns 22s ease-in-out infinite alternate; }
.bento .b.photo:hover::before { filter:brightness(1.12); }
.bento .b.photo::after { content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(to top, rgba(10,20,32,.92), rgba(10,20,32,.2) 60%, transparent); }
.bento .b.photo > * { position:relative; z-index:1; }
.bento .b.photo h3 { color:#fff; } .bento .b.photo p { color:rgba(255,255,255,.82); }
@keyframes kenburns { from { transform: scale(1.05); } to { transform: scale(1.14) translate(-2%,-1%); } }

.mod-ico { width:42px; height:42px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent);
  display:flex; align-items:center; justify-content:center; }
.bento .b .mod-ico { animation: floaty 3.6s ease-in-out infinite; will-change: transform; }
.bento .b:nth-child(3n) .mod-ico { animation-delay: .6s; }
.bento .b:nth-child(3n+1) .mod-ico { animation-delay: 1.2s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.bento .b:hover .mod-ico { background: var(--accent); color: #fff; }
.mod-ico, .card-ico { transition: transform .3s cubic-bezier(.2,.7,.2,1), background .25s, color .25s; }
.card--hover:hover .card-ico { transform: scale(1.15) rotate(-4deg); }

/* Featured tile grows to a wide rectangle; the rest shrink to squares (photo
   tiles included). JS adds .cycling to the grid + .is-feat on hover / auto-cycle
   timer (see site.js). Without .cycling the .wide defaults hold = current look.
   Cycling switches to flex so the square<->rectangle size change can animate
   (grid-column spans can't transition); desktop only, mobile keeps the grid. */
.bento.cycling .b { grid-column: span 1; }
.bento.cycling .b.is-feat { grid-column: span 2; }
@media (min-width:961px){
  .bento.cycling { display:flex; flex-wrap:wrap; }
  .bento.cycling .b { min-width:0; height:176px; flex:0 0 calc(25% - 10.5px);
    transition: flex-basis .55s cubic-bezier(.2,.7,.2,1), border-color .25s, transform .25s, box-shadow .25s; }
  .bento.cycling .b.is-feat { flex-basis: calc(50% - 10.5px); }
}
.bento .b:not(.photo).is-feat { border-color: var(--ink); box-shadow: var(--shadow-frame); }
.bento .b:not(.photo).is-feat .mod-ico { background: var(--accent); color:#fff; }

/* cursor spotlight (JS sets --mx/--my; scoped so untouched pages stay put) */
.bento .b:not(.photo), .card { background-image: radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(47,134,201,0), transparent 60%); }
.bento .b:not(.photo):hover, .card:hover { background-image: radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(47,134,201,.10), transparent 60%); }

/* ============================================================
   Loop-band (dark architecture band, Technology page)
   ============================================================ */
.loop-band { background: var(--studio); color:var(--studio-ink); position:relative; overflow:hidden; }
.loop-band::before { content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(95,168,220,.10) 1px, transparent 1px); background-size:30px 30px; opacity:.6; }
.loop-band .container { position:relative; z-index:1; }
.loop-band h2 { color:var(--studio-ink); background:none; -webkit-text-fill-color:currentColor; animation:none; }
.loop-band h2 .accent { color:var(--accent-bright); background:none; -webkit-text-fill-color:currentColor; }
.loop-band .eyebrow { color:var(--accent-bright); } .loop-band .eyebrow::before{ background:var(--accent-bright); }
.loop-band .section-head .right { color: var(--studio-mute); }
.loop-caps { display:grid; grid-template-columns: repeat(3,1fr); gap:14px; margin-top:16px; }
.loop-band .loop-caps { margin-top:28px; }
.loop-cap { border:1px solid var(--studio-line); border-radius:var(--radius-md); padding:18px 20px; background:rgba(255,255,255,.02);
  transition: border-color .25s, background .25s, transform .25s, box-shadow .25s; }
.loop-cap h4 { font-size:15px; color:#EAF2FA; margin:0 0 6px; display:flex; align-items:center; gap:8px; }
.loop-cap h4 .ico { color:var(--accent-bright); } .loop-cap p { font-size:13px; line-height:1.5; color:var(--studio-mute); }
.loop-cap:hover { border-color: var(--accent-bright); background-color: rgba(95,168,220,.09); transform: translateY(-3px);
  box-shadow: 0 20px 44px -20px rgba(0,0,0,.55); }
.loop-cap:hover h4 { color:#fff; }

/* ripple canvas — under content, over section backgrounds */
.hero-fx { position:absolute; inset:0; z-index:0; pointer-events:none; }
.loop-band > .hero-fx, .cta-slab > .hero-fx { z-index: 0; }
.cta-slab h2, .cta-slab p, .cta-slab .cta-actions { position: relative; z-index: 1; }

/* ============================================================
   Architecture diagram (Technology page)
   ============================================================ */
.arch { position:relative; z-index:1; margin-top:8px; }
.arch-row { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.arch-node {
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--studio-line); background:rgba(255,255,255,.04);
  border-radius: var(--radius-md); padding:12px 18px;
  color:#EAF2FA; font-size:14px; font-weight:var(--fw-medium);
  transition: border-color .25s, background-color .25s, transform .25s;
}
.arch-node .ico { color: var(--accent-bright); flex:0 0 auto; }
.arch-node small { color:var(--studio-mute); font-size:11.5px; font-weight:var(--fw-regular); }
.arch-node:hover { border-color: var(--accent-bright); background-color: rgba(95,168,220,.10); transform: translateY(-2px); }
.arch-flow { display:flex; justify-content:center; gap: clamp(60px,10vw,150px); height:52px; padding:6px 0; }
.arch-flow i { display:block; width:2px; height:100%; border-radius:2px;
  background-image: linear-gradient(to bottom, rgba(95,168,220,.65) 55%, transparent 55%);
  background-size: 2px 12px; animation: flowdown 1.15s linear infinite; opacity:.75; }
.arch-flow i:nth-child(2n) { animation-direction: reverse; opacity:.45; }
@keyframes flowdown { to { background-position: 0 12px; } }
.arch-core {
  position:relative; overflow:hidden; text-align:center;
  border:1px solid rgba(95,168,220,.42); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(47,134,201,.16), rgba(47,134,201,.04));
  padding: clamp(24px,3.4vw,38px);
  box-shadow: 0 0 70px -12px rgba(47,134,201,.4), inset 0 1px 0 rgba(255,255,255,.09);
}
.arch-core::before { content:""; position:absolute; inset:-60%; pointer-events:none;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(95,168,220,.14) 50deg, transparent 100deg);
  animation: beamspin 18s linear infinite; }
.arch-core::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  animation: corepulse 3.2s cubic-bezier(.2,.7,.3,1) infinite; }
@keyframes corepulse { from { box-shadow: 0 0 0 0 rgba(95,168,220,.30); } to { box-shadow: 0 0 0 30px rgba(95,168,220,0); } }
.arch-core > * { position:relative; }
.arch-core .eyebrow { color: var(--accent-bright); justify-content:center; }
.arch-core h3 { color:#fff; font-size: clamp(21px,2.4vw,29px); margin-top:10px; letter-spacing:-.02em; }
.arch-core p { color:var(--studio-mute); font-size:14px; margin-top:8px; }
.arch-tags { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px; }
.arch-tags span { font-family:var(--font-mono); font-size:11px; letter-spacing:.05em;
  border:1px solid rgba(95,168,220,.35); color:#CFE2F1; border-radius:var(--radius-pill);
  padding:5px 12px; background:rgba(95,168,220,.08); }

/* ============================================================
   Dark CTA slab (Technology page)
   ============================================================ */
.cta-slab { position:relative; overflow:hidden; background: var(--studio); color: var(--studio-ink);
  border-radius: var(--radius-xl); padding: clamp(40px,6vw,80px); text-align:center; }
.cta-slab::before { content:""; position:absolute; top:-40%; right:-10%; width:520px; height:520px;
  background: radial-gradient(circle, rgba(47,134,201,.35), transparent 65%); pointer-events:none; }
.cta-slab h2 { color: var(--studio-ink); background: none; -webkit-text-fill-color: currentColor; animation:none; position:relative; }
.cta-slab h2 .accent { color: var(--accent-bright); background:none; -webkit-text-fill-color: currentColor; animation:none; }
.cta-slab p { position:relative; max-width:56ch; margin:20px auto 0; color: var(--studio-mute); font-size: var(--fs-lead); line-height:1.5; }
.cta-slab .cta-actions { position:relative; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:32px; }
.cta-slab .btn-ghost { color: var(--studio-ink); border-color: var(--studio-line); }
.cta-slab .btn-ghost:hover { background: rgba(255,255,255,.06); border-color: var(--studio-ink); }

/* ---- cert badge + chip row (integrations) ---- */
.cert-badge { display:inline-flex; align-items:center; gap:6px; background:var(--accent-soft); color:var(--accent-dark);
  font-size:11px; font-weight:var(--fw-semibold); letter-spacing:.06em; text-transform:uppercase;
  border-radius:var(--radius-pill); padding:4px 10px; margin-bottom:12px; }
.chip-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.chip-row span { border:1px solid var(--line); border-radius:var(--radius-pill); padding:3px 10px; font-size:12px; color:var(--mute); }

/* ---- inner page-hero entrance (CSS-only, on load) ---- */
.page-hero > * { animation: rise .65s cubic-bezier(.2,.7,.2,1) backwards; }
.page-hero > :nth-child(2) { animation-delay: .08s; }
.page-hero > :nth-child(3) { animation-delay: .16s; }
.page-hero > :nth-child(4) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }

/* ---- responsive ---- */
@media (max-width:960px){ .bento { grid-template-columns: repeat(2,1fr); } .loop-caps { grid-template-columns:1fr 1fr; } }
@media (max-width:640px){
  .bento, .loop-caps { grid-template-columns:1fr; }
  .bento { grid-auto-rows:auto; } .bento .b.wide, .bento .b.tall, .bento .b.is-feat, .bento.cycling .b, .bento.cycling .b.is-feat{ grid-column:auto; grid-row:auto; }
  /* single-column photo tiles collapse to thin strips and white text lands on
     the light screenshot — restore tile height and deepen the scrim */
  .bento .b { min-height:170px; }
  .bento .b.photo::after { background:linear-gradient(to top, rgba(10,20,32,.94) 26%, rgba(10,20,32,.55) 64%, rgba(10,20,32,.18)); }
  .arch-flow { gap:44px; height:40px; } .arch-node { padding:10px 14px; font-size:13px; }
}

/* ---- Home outcomes — site3 2x2 layout (eyebrow, 2-col head, metric bars) ---- */
.x2-agents .eyebrow { display: inline-flex !important; color: var(--accent-dark); margin-bottom: 6px; }
.x2-agents .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.x2-agents .section-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: end; }
.x2-agents .section-head .right { margin-top: 0; align-self: end; }
.x2-agents .agent-grid { grid-template-columns: repeat(2, 1fr); }
.x2-agents .agent-metric { color: var(--accent); }
.x2-agents .agent-bar { height: 4px; border-radius: 99px; background: var(--bg-2); margin-top: 2px; overflow: hidden; }
.x2-agents .agent-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); transition: width 1.2s cubic-bezier(.2,.7,.2,1); }
.x2-agents .agent-card.is-in .agent-bar i { width: var(--fill, 70%); }
@media (max-width: 720px) { .x2-agents .section-head { grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 560px) { .x2-agents .agent-grid { grid-template-columns: 1fr; } }