/* home-overrides.css - shared EN+HE layer that used to be 27 inline <style> blocks in each page (moved 21.10.2026,
   same order, same content). Loads after home-<lang>.css and before the premium fx layer. Edit here, then run
   Tools/externalize_home_assets.py to restamp ?v=. */

/* ── 2026-07-07 audit: Hebrew heading font + small-text contrast ── */
[dir="rtl"] .heading,[dir="rtl"] h2.heading{font-family:var(--font-display-he);}
:root:not([data-theme="light"]) .label{color:#6B93FF;}
:root:not([data-theme="light"]) .offer-card .offer-cta{color:#6B93FF;}

/* ---- */
/* ── 2026-07-07 content protection ── */
*{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;}
input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text;}
img,video{-webkit-user-drag:none;user-drag:none;}
@media print{html:root{display:none !important;}}

/* ---- */
/* ═══ PREMIUM EFFECTS (2026-07-08 · GPU-only, motion/pointer-gated) ═══ */
@media (prefers-reduced-motion: no-preference) and (pointer: fine) {
  .offer-card, .cube-front, .pillar, .portfolio-card { --mx: 50%; --my: 50%; }
  /* cursor spotlight overlay via a dedicated layer so we never fight existing ::before/::after */
  .spotlight-host { position: relative; }
  .spotlight-host > .spotlight {
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity .45s ease; z-index: 1;
    background: radial-gradient(340px circle at var(--mx) var(--my), rgba(0,71,255,0.14), transparent 60%);
    }
  .spotlight-host:hover > .spotlight { will-change: opacity; }
  .spotlight-host:hover > .spotlight { opacity: 1; }
  /* sheen sweep across primary CTAs on hover */
  .offer-cta, .direct-btn-primary, .btn-fill { position: relative; overflow: hidden; }
  .offer-cta::after, .btn-fill::after {
    content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.18), transparent);
    transform: skewX(-18deg); transition: left .6s var(--easing); pointer-events: none;
  }
  .offer-cta:hover::after, .btn-fill:hover::after { left: 130%; }
  /* very slow ambient aurora behind the hero (opacity-only, cheap) */
  .hero::after {
    content: ""; position: absolute; inset: -20% -10% auto -10%; height: 70%; z-index: 0; pointer-events: none;
    background: radial-gradient(50% 60% at 30% 20%, rgba(0,71,255,0.10), transparent 70%),
                radial-gradient(45% 55% at 75% 15%, rgba(209,209,214,0.08), transparent 70%);
    filter: blur(30px); opacity: .0; animation: aioAurora 14s ease-in-out infinite alternate; will-change: opacity, transform;
  }
  @keyframes aioAurora {
    0%   { opacity: .35; transform: translate3d(0,0,0) scale(1); }
    100% { opacity: .7;  transform: translate3d(2%, 1%, 0) scale(1.06); }
  }
}

/* ---- */
/* mobile tap-targets 2026-07-08 */@media (max-width:768px){.offer-cta{display:inline-block;padding:8px 2px;min-height:40px;line-height:24px;}.footer-links a{padding:6px 2px;display:inline-block;}}

/* ---- */
/* ═══ PREMIUM EFFECTS V2 (2026-07-08) ═══ */
.spotlight{position:absolute;inset:0;pointer-events:none;opacity:0;}
@property --aio-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@media (prefers-reduced-motion: no-preference) {
  /* rotating conic halo border on the Events feature card */
  .offer-card.offer-wide {
    --aio-ang: 0deg;
    border: 1px solid transparent;
    background:
      linear-gradient(rgba(14,14,14,0.95), rgba(14,14,14,0.95)) padding-box,
      conic-gradient(from var(--aio-ang, 0deg),
        rgba(209,209,214,0) 0deg, rgba(209,209,214,0.75) 40deg,
        rgba(0,71,255,0.55) 90deg, rgba(209,209,214,0) 150deg,
        rgba(209,209,214,0) 360deg) border-box;
    animation: aioSpin 12s linear infinite; animation-play-state: paused;
  }
  [data-theme="light"] .offer-card.offer-wide {
    background:
      linear-gradient(#ffffff, #ffffff) padding-box,
      conic-gradient(from var(--aio-ang, 0deg),
        rgba(209,209,214,0) 0deg, rgba(209,209,214,0.55) 40deg,
        rgba(0,71,255,0.4) 90deg, rgba(209,209,214,0) 150deg,
        rgba(209,209,214,0) 360deg) border-box;
  }
  @keyframes aioSpin { to { --aio-ang: 360deg; } }
  .offer-card.offer-wide:hover, [data-theme="light"] .offer-card.offer-wide:hover { border-color: transparent; }
  .offer-card.offer-wide.spin-live { animation-play-state: running; }
  /* pause marquees on hover - lets people actually read */
  @media (hover: hover) { .industries-marquee:hover *, .marquee-wrap:hover * { animation-play-state: paused; } }
}
/* animated nav underline (RTL-aware origin) */
.nav-links a { position: relative; }
.nav-links a::after {
  content: ""; position: absolute; right: 0; left: 0; bottom: -6px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: scaleX(0); transform-origin: center; transition: transform .45s var(--easing);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }
.nav-lang::after { display: none; } /* keep the pill clean */

/* ---- */
/* ═══ PREMIUM EFFECTS V3 · 21st-inspired: hero text shimmer + 3D card tilt (2026-07-08) ═══ */
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
@media (prefers-reduced-motion: no-preference) {
  .hero-overline {
    background: linear-gradient(100deg, var(--cream-muted) 0%, var(--cream-muted) 38%, #F5F5F0 50%, var(--cream-muted) 62%, var(--cream-muted) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fadeUp 1s 0.2s forwards, aioShimmer 6.5s ease-in-out 3;
  }
  [data-theme="light"] .hero-overline {
    background: linear-gradient(100deg, rgba(28,28,30,0.55) 0%, rgba(28,28,30,0.55) 38%, #0A0A0B 50%, rgba(28,28,30,0.55) 62%, rgba(28,28,30,0.55) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  @keyframes aioShimmer { 0% { background-position: 140% 0; } 100% { background-position: -40% 0; } }
}
}

/* ---- */
/* ═══ PREMIUM V4 · museum duotone + signature footer (2026-07-11) ═══ */
/* duotone: hover-capable devices only - touch keeps full color */
@media (hover: hover) {
  .portfolio-bg, .portfolio-bg-video { filter: grayscale(1) contrast(1.06) sepia(0.10) brightness(0.94); transition: filter .6s var(--easing); }
  .portfolio-card:hover .portfolio-bg, .portfolio-card:hover .portfolio-bg-video, .portfolio-card:focus-within .portfolio-bg, .portfolio-card:focus-within .portfolio-bg-video { filter: none; }
}
/* signature footer */
.footer-signature { margin-top: 56px; }
.footer-status { display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--cream-muted); }
.footer-status .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .footer-status .pulse-dot { animation: aioPulse 2.6s ease-in-out infinite; }
  @keyframes aioPulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0,71,255,0.5); } 50% { opacity: 0.55; box-shadow: 0 0 0 7px rgba(0,71,255,0); } }
}
.footer-clock { font-variant-numeric: tabular-nums; }
.footer-wordmark { position: relative; margin-top: 34px; overflow: hidden; background: #000; border-radius: 4px; }
.footer-wordmark .wm-text { font-family: var(--font-display); font-weight: 300; text-align: center;
  font-size: clamp(120px, 27vw, 400px); line-height: 0.88; letter-spacing: 0.04em;
  color: #fff; padding: 0.05em 0 0; margin-bottom: -0.06em; user-select: none; }
.footer-wordmark .wm-video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; mix-blend-mode: darken; pointer-events: none; opacity: 0.92; }
@supports (-webkit-touch-callout: none) {
  .footer-wordmark .wm-video { display: none; }
  .footer-wordmark { background: transparent; }
  .footer-wordmark .wm-text { color: var(--cream, #F5F5F0); }
}
@media (prefers-reduced-motion: reduce) {
  .footer-wordmark .wm-video { display: none; }
  .footer-wordmark .wm-text { color: var(--cream); }
  .footer-wordmark { background: transparent; }
}
[data-theme="light"] .footer-wordmark { background: #000; } /* cinema block stays dark by design */

/* ---- */
/* ═══ A11Y WIDGET · IS 5568 user-preference layer (CSS classes on <html> only) ═══ */
/* trigger + panel - brand language */
.a11y-trigger { position: fixed; right: 24px; bottom: 96px; z-index: 9989;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(245,245,240,0.22);
  background: rgba(20,20,22,0.92); color: var(--cream, #F5F5F0); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .3s, transform .3s; }
.a11y-trigger:hover, .a11y-trigger:focus-visible { border-color: var(--accent, #4D7CFF); transform: scale(1.06); }
.a11y-trigger:focus-visible { outline: 2px solid var(--accent, #4D7CFF); outline-offset: 3px; }
.a11y-trigger svg { width: 24px; height: 24px; fill: currentColor; }
body.cookie-open .a11y-trigger { bottom: 178px; }
html[lang="en"] .a11y-trigger { left: 24px; right: auto; }
html[lang="en"] .a11y-panel { left: 24px; right: auto; }
@media (max-width: 600px) { html[lang="en"] .a11y-trigger { left: 18px; right: auto; } html[lang="en"] .a11y-panel { left: 18px; right: auto; } }
.a11y-panel { position: fixed; right: 24px; bottom: 152px; z-index: 9991;
  width: min(340px, calc(100vw - 48px)); max-height: min(72vh, calc(100vh - 176px), 560px); overflow-y: auto;
  background: #141416; border: 1px solid rgba(245,245,240,0.14); border-radius: 6px;
  padding: 18px 18px 14px; box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  color: #F5F5F0; }
.a11y-panel[hidden] { display: none; }
.a11y-panel h2 { font-family: var(--font-display, Georgia, serif); font-weight: 400;
  font-size: 20px; margin: 0 0 4px; color: #F5F5F0; }
.a11y-panel .a11y-sub { font-size: 11px; color: #98989D; margin: 0 0 14px; letter-spacing: .4px; }
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 10px 12px; border-radius: 4px; border: 1px solid rgba(245,245,240,0.14);
  background: rgba(28,28,30,0.6); color: #F5F5F0; cursor: pointer; text-align: start;
  font-family: inherit; font-size: 12.5px; line-height: 1.35; min-height: 56px;
  transition: border-color .25s, background .25s; }
.a11y-btn:hover { border-color: rgba(77,124,255,0.6); }
.a11y-btn:focus-visible { outline: 2px solid var(--accent, #4D7CFF); outline-offset: 2px; }
.a11y-btn[aria-pressed="true"], .a11y-btn.a11y-active { border-color: var(--accent, #4D7CFF);
  background: rgba(0,71,255,0.16); }
.a11y-btn .a11y-val { font-size: 10.5px; color: #98989D; }
.a11y-btn[aria-pressed="true"] .a11y-val, .a11y-btn.a11y-active .a11y-val { color: #9DB8FF; }
.a11y-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(245,245,240,0.1); }
.a11y-reset { background: none; border: 1px solid rgba(245,245,240,0.2); color: #F5F5F0;
  border-radius: 4px; padding: 7px 14px; font-size: 12px; cursor: pointer; font-family: inherit; }
.a11y-reset:hover, .a11y-reset:focus-visible { border-color: #E86A5A; color: #FFB4A8; }
.a11y-reset:focus-visible { outline: 2px solid var(--accent, #4D7CFF); outline-offset: 2px; }
.a11y-foot a { font-size: 11.5px; color: #9DB8FF; text-decoration: underline; }
.a11y-kbd { font-size: 10.5px; color: #6E6E73; letter-spacing: 1px; }
.a11y-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 600px) { .a11y-trigger { bottom: 150px; right: 18px; } .a11y-panel { right: 18px; bottom: 204px; } }

/* ═══ preference effect classes (on <html>) - never touch content DOM ═══ */
html.a11y-links body a { text-decoration: underline !important; text-underline-offset: 3px; }
html.a11y-links body a:not(.a11y-btn) { box-shadow: 0 0 0 1px rgba(77,124,255,0.55); border-radius: 2px; }
html.a11y-heads body :is(h1,h2,h3,h4) { background: rgba(0,71,255,0.22) !important; outline: 1px solid rgba(77,124,255,0.6); outline-offset: 2px; }
html.a11y-font body, html.a11y-font body :not(svg):not(path) { font-family: -apple-system, "Segoe UI", Arial, sans-serif !important; }
/* 21.10.2026 (IS 5568 audit): text-size zooms the text elements, not the whole body - body zoom pushed the RTL page off-screen on phones */
html[class*="a11y-text-"] body { zoom: 1 !important; }
html.a11y-text-115 :is(p,li,label,dd,dt,blockquote,figcaption,input,textarea,select,button,.body-text,.cube-title,.cube-detail,.offer-name,.offer-desc,.faq-question,.faq-answer,.portfolio-client,.portfolio-type,.label,.heading,.hero-overline,.manifesto-body,.manifesto-quote,.mf-sign,.footer-services,.footer-copy,.footer-links a,.nav-links a,.proof-headline,.proof-sub,.cta-heading,.cta-body,.hero-cta-label,.direct-btn span,.step p,.step h3,.pillar p,.pillar h3) { zoom: 1.15; }
html.a11y-text-115 :is(p,li,label,dd,dt,blockquote,figcaption,input,textarea,select,button,.body-text,.cube-title,.cube-detail,.offer-name,.offer-desc,.faq-question,.faq-answer,.portfolio-client,.portfolio-type,.label,.heading,.hero-overline,.manifesto-body,.manifesto-quote,.mf-sign,.footer-services,.footer-copy,.footer-links a,.nav-links a,.proof-headline,.proof-sub,.cta-heading,.cta-body,.hero-cta-label,.direct-btn span,.step p,.step h3,.pillar p,.pillar h3) { max-width: calc(100% / 1.15) !important; }
html.a11y-text-130 :is(p,li,label,dd,dt,blockquote,figcaption,input,textarea,select,button,.body-text,.cube-title,.cube-detail,.offer-name,.offer-desc,.faq-question,.faq-answer,.portfolio-client,.portfolio-type,.label,.heading,.hero-overline,.manifesto-body,.manifesto-quote,.mf-sign,.footer-services,.footer-copy,.footer-links a,.nav-links a,.proof-headline,.proof-sub,.cta-heading,.cta-body,.hero-cta-label,.direct-btn span,.step p,.step h3,.pillar p,.pillar h3) { zoom: 1.3; }
html.a11y-text-130 :is(p,li,label,dd,dt,blockquote,figcaption,input,textarea,select,button,.body-text,.cube-title,.cube-detail,.offer-name,.offer-desc,.faq-question,.faq-answer,.portfolio-client,.portfolio-type,.label,.heading,.hero-overline,.manifesto-body,.manifesto-quote,.mf-sign,.footer-services,.footer-copy,.footer-links a,.nav-links a,.proof-headline,.proof-sub,.cta-heading,.cta-body,.hero-cta-label,.direct-btn span,.step p,.step h3,.pillar p,.pillar h3) { max-width: calc(100% / 1.3) !important; }
html.a11y-text-150 :is(p,li,label,dd,dt,blockquote,figcaption,input,textarea,select,button,.body-text,.cube-title,.cube-detail,.offer-name,.offer-desc,.faq-question,.faq-answer,.portfolio-client,.portfolio-type,.label,.heading,.hero-overline,.manifesto-body,.manifesto-quote,.mf-sign,.footer-services,.footer-copy,.footer-links a,.nav-links a,.proof-headline,.proof-sub,.cta-heading,.cta-body,.hero-cta-label,.direct-btn span,.step p,.step h3,.pillar p,.pillar h3) { zoom: 1.5; }
html.a11y-text-150 :is(p,li,label,dd,dt,blockquote,figcaption,input,textarea,select,button,.body-text,.cube-title,.cube-detail,.offer-name,.offer-desc,.faq-question,.faq-answer,.portfolio-client,.portfolio-type,.label,.heading,.hero-overline,.manifesto-body,.manifesto-quote,.mf-sign,.footer-services,.footer-copy,.footer-links a,.nav-links a,.proof-headline,.proof-sub,.cta-heading,.cta-body,.hero-cta-label,.direct-btn span,.step p,.step h3,.pillar p,.pillar h3) { max-width: calc(100% / 1.5) !important; }
html[class*="a11y-text-"] :is(p,li,label,dd,dt,blockquote,figcaption,input,textarea,select,button,.body-text,.cube-title,.cube-detail,.offer-name,.offer-desc,.faq-question,.faq-answer,.portfolio-client,.portfolio-type,.label,.heading,.hero-overline,.manifesto-body,.manifesto-quote,.mf-sign,.footer-services,.footer-copy,.footer-links a,.nav-links a,.proof-headline,.proof-sub,.cta-heading,.cta-body,.hero-cta-label,.direct-btn span,.step p,.step h3,.pillar p,.pillar h3) :is(p,li,label,dd,dt,blockquote,figcaption,input,textarea,select,button,.body-text,.cube-title,.cube-detail,.offer-name,.offer-desc,.faq-question,.faq-answer,.portfolio-client,.portfolio-type,.label,.heading,.hero-overline,.manifesto-body,.manifesto-quote,.mf-sign,.footer-services,.footer-copy,.footer-links a,.nav-links a,.proof-headline,.proof-sub,.cta-heading,.cta-body,.hero-cta-label,.direct-btn span,.step p,.step h3,.pillar p,.pillar h3) { zoom: 1; max-width: none !important; }
html.a11y-lines-18 body :is(p, li, dd, blockquote, .faq-answer, .offer-desc, .body-text) { line-height: 1.9 !important; }
html.a11y-lines-22 body :is(p, li, dd, blockquote, .faq-answer, .offer-desc, .body-text) { line-height: 2.3 !important; }
html.a11y-cursor, html.a11y-cursor body, html.a11y-cursor body * { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path d="M4 2l16 11h-8l4.9 8.4-3 1.6-4.7-8.5L4 20z" fill="black" stroke="white" stroke-width="1.6"/></svg>') 4 2, auto !important; }
/* contrast: token-level high contrast, filter invert/mono with media counter-filter */
html.a11y-contrast-high { --cream: #FFFFFF; --cream-muted: #EDEDED; --cream-dim: #D6D6D6; --bg-base: #000000; --accent: #6E95FF; }
html.a11y-contrast-high body { background: #000 !important; }
html.a11y-contrast-invert { filter: invert(1) hue-rotate(180deg); background: #F5F5F0; }
html.a11y-contrast-invert :is(img, video, picture, iframe, .portfolio-bg, .niche-card, .wm-video) { filter: invert(1) hue-rotate(180deg); }
html.a11y-contrast-mono { filter: grayscale(1); }
/* counter-invert the widget so it stays operable */
html.a11y-contrast-invert .a11y-panel, html.a11y-contrast-invert .a11y-trigger { filter: invert(1) hue-rotate(180deg); }
/* stop animations: kill motion incl. our premium effects; static-complete reveals */
html.a11y-stop-motion *, html.a11y-stop-motion *::before, html.a11y-stop-motion *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
html.a11y-stop-motion .spotlight, html.a11y-stop-motion .hero::after, html.a11y-stop-motion .wm-video { display: none !important; }
html.a11y-stop-motion .hero-overline { transition: none !important; animation: none !important; background: none !important;
  -webkit-text-fill-color: #D1D1D6 !important; color: #D1D1D6 !important; opacity: 1 !important; }
html.a11y-stop-motion :is(.offer-card, .portfolio-card, .pillar, .direct-btn-primary, .btn) { transform: none !important; }
html.a11y-stop-motion .footer-wordmark { background: transparent; }
html.a11y-stop-motion .footer-wordmark .wm-text { color: var(--cream, #F5F5F0); }
/* print: preferences never follow to paper */
@media print {
  html[class*="a11y-"] body { filter: none !important; zoom: 1 !important; }
  .a11y-trigger, .a11y-panel { display: none !important; }
}

/* ---- */
/* ═══ V5 · tablet nav squeeze 769-899px (logo overlapped first nav item; measured 13-32px) ═══ */
@media (min-width: 769px) and (max-width: 899px) {
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 10.5px; letter-spacing: 1px; }
  .nav-logo { font-size: 26px; letter-spacing: 4px; }
}

/* ---- */
/* lightbox structure (restored 11.07) */
.lightbox-inner { position: relative; z-index: 2; width: min(1080px, 94vw); margin: auto; display: flex; flex-direction: column; gap: 10px; }
.video-lightbox { display: flex; align-items: center; justify-content: center; }
.video-lightbox[hidden] { display: none; }
.lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lightbox-controls { display: flex; align-items: center; gap: 6px; }
.lightbox-video-wrap video { width: 100%; display: block; border-radius: 6px; background: #000; }
.lightbox-inner > .lightbox-close { position: absolute !important; top: -46px !important; right: 0 !important; left: auto !important; bottom: auto !important;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(245,245,240,0.25); border-radius: 50%; background: rgba(20,20,22,0.85);
  color: #F5F5F0; font-size: 22px; z-index: 3; }
.lightbox-inner .lightbox-close:hover { border-color: var(--accent, #4D7CFF); color: #fff; }
.lightbox-inner .lightbox-bar { position: static; padding-inline-end: 52px; }

/* ---- */
/* 7th service cube placement */
.services-grid > .service-cube.cube-also { grid-column: 1 / -1; } /* 21.10.2026: events = full-width extra row */

/* ---- */
/* services-header stacked (2026-07-11): explainer sits below the heading */
#services .services-header { display: block; }
#services .services-header .body-text { margin-top: 18px; max-width: 560px; }

/* ---- */
/* ═══ SERVICE CUBE LIVE ICONS (2026-07-11): GPT still + Kling loop on hover ═══ */
.cube-front { overflow: hidden; } /* stays position:absolute inset:0 so it fills the cube; absolute parent is a valid containing block for .cube-media */
.cube-front.spotlight-host { position: absolute; } /* the spotlight engine's .spotlight-host{position:relative} must not collapse the face to content height */
.cube-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--easing); pointer-events: none; }
.cube-media.ready { opacity: 0.55; }
.service-cube.has-media .cube-icon { display: none; }
.service-cube.has-media .cube-title { color: #F5F5F0; text-shadow: 0 0 6px rgba(0,0,0,0.95), 0 2px 16px rgba(0,0,0,0.9), 0 0 34px rgba(0,0,0,0.75), 0 0 60px rgba(0,0,0,0.5); }
[data-theme="light"] .service-cube.has-media .cube-title { color: #F5F5F0; } /* the media visual is dark in both themes - light-theme dark-text rule must not apply over it */
@media (hover: hover) and (pointer: fine) {
  .service-cube:hover .cube-media.ready, .service-cube:focus-visible .cube-media.ready { opacity: 1; transform: scale(1.04); }
.cube-media { transition: opacity .5s var(--easing), transform 1.2s var(--easing); }
}
.cube-front .cube-icon, .cube-front .cube-title { position: relative; z-index: 2; }
html.a11y-stop-motion .cube-media { display: none !important; }
@media (prefers-reduced-motion: reduce) { .cube-media { display: none !important; } }

/* ---- */
/* ═══ PILLAR LIVE VISUALS (2026-07-13): GPT still + Kling loop, IO-gated ambient behind the copy ═══ */
.pillar { isolation: isolate; }
.pillar::before { z-index: 4; }
.pillar-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; z-index: 0; pointer-events: none; transition: opacity .6s var(--easing); }
.pillar-media.ready { opacity: 0.4; }
.pillar.has-media > *:not(.pillar-media) { position: relative; z-index: 2; }
.pillar.has-media h3, .pillar.has-media p { text-shadow: 0 1px 10px rgba(0,0,0,0.9), 0 0 26px rgba(0,0,0,0.6); }
.pillar.has-media .pillar-num { color: rgba(0,71,255,0.32); text-shadow: 0 0 26px rgba(0,71,255,0.5); }
/* the visual is dark in both themes - keep the card dark + text cream where media sits */
[data-theme="light"] .pillar.has-media,
[data-theme="light"] .pillar.has-media:hover { background: #0A0A0B; }
[data-theme="light"] .pillar.has-media h3 { color: #F5F5F0; }
[data-theme="light"] .pillar.has-media p { color: rgba(245,245,240,0.72); }
[data-theme="light"] .pillar.has-media .pillar-num { color: rgba(0,71,255,0.32); }
@media (hover: hover) and (pointer: fine) {
  .pillar:hover .pillar-media.ready { opacity: 0.75; transform: scale(1.05); }
  .pillar-media { transition: opacity .6s var(--easing), transform 1.4s var(--easing); }
}
@media (hover: none) { .pillar-media.ready { opacity: 0.52; } }
html.a11y-stop-motion .pillar-media.ready { opacity: 0.34 !important; }
@media (prefers-reduced-motion: reduce) { .pillar-media.ready { opacity: 0.34; } }

/* ---- */
/* ═══ STEP LIVE VISUALS (2026-07-13): same IO-gated ambient loop system as pillars ═══ */
.step { overflow: hidden; isolation: isolate; }
.step-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; z-index: 0; pointer-events: none; transition: opacity .6s var(--easing); }
.step-media.ready { opacity: 0.34; }
.step.has-media > *:not(.step-media) { position: relative; z-index: 2; }
.step.has-media::before { position: relative; z-index: 2; color: rgba(0,71,255,0.36); text-shadow: 0 0 22px rgba(0,71,255,0.5); }
.step.has-media h3, .step.has-media p { text-shadow: 0 1px 10px rgba(0,0,0,0.9), 0 0 24px rgba(0,0,0,0.6); }
[data-theme="light"] .step.has-media,
[data-theme="light"] .step.has-media:hover { background: #0A0A0B; }
[data-theme="light"] .step.has-media h3 { color: #F5F5F0; }
[data-theme="light"] .step.has-media p { color: rgba(245,245,240,0.72); }
@media (hover: hover) and (pointer: fine) {
  .step:hover .step-media.ready { opacity: 0.62; transform: scale(1.05); }
  .step-media { transition: opacity .6s var(--easing), transform 1.4s var(--easing); }
}
@media (hover: none) { .step-media.ready { opacity: 0.46; } }
html.a11y-stop-motion .step-media.ready { opacity: 0.3 !important; }
@media (prefers-reduced-motion: reduce) { .step-media.ready { opacity: 0.3; } }

/* ---- */
/* ═══ OFFER LIVE VISUALS (2026-07-13): subtle ambient loops behind the package cards ═══ */
.offer-card { isolation: isolate; }
.offer-card::before { z-index: 3; }
.offer-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; z-index: 0; pointer-events: none; transition: opacity .6s var(--easing); }
.offer-media.ready { opacity: 0.4; }
.offer-card.has-media { background: #08080A; }
.offer-card.has-media > *:not(.offer-media) { position: relative; z-index: 2; }
/* AIO Events (offer-wide): ambient media behind (z0), copy front (z2).
   position:absolute is re-forced here because .offer-card.offer-wide > *{position:relative}
   would otherwise drop the media into flow and blow up the card height. */
.offer-card.offer-wide.has-media .offer-media { position: absolute; z-index: 0; }
.offer-card.offer-wide.has-media > *:not(.offer-media) { position: relative; z-index: 2; }
.offer-card.has-media .offer-name { text-shadow: 0 1px 12px rgba(0,0,0,0.95), 0 0 26px rgba(0,0,0,0.7); }
.offer-card.has-media .offer-desc { color: rgba(245,245,240,0.82); text-shadow: 0 1px 8px rgba(0,0,0,0.95), 0 0 18px rgba(0,0,0,0.75); }
[data-theme="light"] .offer-card.has-media,
[data-theme="light"] .offer-card.has-media:hover { background: #08080A; }
[data-theme="light"] .offer-card.has-media .offer-name { color: #F5F5F0; }
[data-theme="light"] .offer-card.has-media .offer-desc { color: rgba(245,245,240,0.82); }
@media (hover: hover) and (pointer: fine) {
  .offer-card:hover .offer-media.ready { opacity: 0.62; transform: scale(1.05); }
  .offer-media { transition: opacity .6s var(--easing), transform 1.4s var(--easing); }
}
@media (hover: none) { .offer-media.ready { opacity: 0.46; } }
html.a11y-stop-motion .offer-media.ready { opacity: 0.3 !important; }
@media (prefers-reduced-motion: reduce) { .offer-media.ready { opacity: 0.3; } }

/* ---- */
/* ═══ MOBILE DECLUTTER (2026-07-13): calm, compact ambient section cards on mobile ═══
   Turns the loops into a quiet top-anchored accent, keeps copy on clean charcoal, quiets the
   ghost numbers, compacts + separates cards. Loops keep playing (no display:none). RTL-safe
   (vertical/symmetric gradients only). A11y-safe (all mobile opacities <= the reduced-motion /
   a11y-stop-motion values, no !important). Workflow-designed + adversarially verified. */
/* light-theme CTA legibility on media cards (all widths): forced-dark card needs a lighter CTA */
[data-theme="light"] .offer-card.has-media .offer-cta { color: #6B93FF; }
@media (max-width: 600px) {
  .pillar-media, .step-media, .offer-media {
    object-position: center 30%;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0,0,0,0.5) 80%, transparent 96%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0,0,0,0.5) 80%, transparent 96%);
  }
  .pillar-media.ready { opacity: 0.44; }  /* visible top accent; mask keeps the lower text zone clean */
  .step-media.ready   { opacity: 0.40; }
  .offer-media.ready  { opacity: 0.42; }
  /* AIO Events wide card on mobile: the joystick's glowing base is centered in the portrait, and the
     top-anchored declutter mask fights it. Drop the mask here + center the crop so the joystick reads. */
  .offer-card.offer-wide .offer-media {
    object-position: 50% 50%;
    -webkit-mask-image: none; mask-image: none;
  }
  .offer-card.offer-wide .offer-media.ready { opacity: 0.5; }
  .pillars-grid, .process-grid { grid-template-columns: 1fr; gap: 14px; background: transparent; }
  .offers-grid { grid-template-columns: 1fr; gap: 14px; }
  .pillar { padding: 28px 22px; border: 1px solid rgba(245,245,240,0.08); border-radius: 14px; }
  .step { padding: 24px 20px; border: 1px solid rgba(245,245,240,0.08); border-radius: 14px; }
  .offer-card { padding: 24px 20px; gap: 10px; border-radius: 14px; }
  .pillar-num { font-size: 40px; top: 12px; }
  .pillar.has-media .pillar-num { color: rgba(0,71,255,0.20); text-shadow: 0 0 12px rgba(0,71,255,0.28); }
  .step::before { font-size: 34px; margin-bottom: 12px; }
  .step.has-media::before { color: rgba(0,71,255,0.22); text-shadow: 0 0 11px rgba(0,71,255,0.28); }
  .pillar h3 { font-size: 20px; margin-bottom: 10px; }
  .pillar p { font-size: 14px; line-height: 1.6; }
  .step h3 { font-size: 18px; margin-bottom: 8px; }
  .step p { font-size: 13px; line-height: 1.6; }
  .offer-name { font-size: 18px; }
  .offer-desc { font-size: 13.5px; line-height: 1.6; }
}
@media (max-width: 480px) {
  .pillar { padding: 24px 18px; }
  .step { padding: 22px 18px; }
  .offer-card { padding: 22px 18px; }
  .pillar-num { font-size: 34px; }
  .step::before { font-size: 30px; margin-bottom: 10px; }
  .pillar p, .step p, .offer-desc { font-size: 13px; line-height: 1.55; }
}

/* ---- */
/* ═══ OFFERS cards (2026-07-13): REVERTED the display-case back to the full-bleed ambient loop
   behind the copy (how it was before) - just ENLARGED the cards + nudged the loop opacity up a
   little so the visual reads better. Desktop only; mobile declutter + Events banner untouched. */
@media (min-width:601px){
  .offer-card.has-media:not(.offer-wide){ min-height: 340px; padding: 44px 32px; }
  .offer-card.has-media:not(.offer-wide) .offer-media.ready{ opacity: 0.5; }
}
@media (hover:hover) and (pointer:fine) and (min-width:601px){
  .offer-card.has-media:not(.offer-wide):hover .offer-media.ready{ opacity: 0.72; transform: scale(1.04); }
}

/* ---- */
/* ═══ "LIT REEL" (2026-07-13): niches marquee + 4 proof cubes premium upgrade. Workflow-designed +
   adversarially verified. Dark-first · RTL-safe · light-theme-scoped · viewport-gated · reduced-motion
   + a11y-stop-motion + a11y-contrast-high aware · mobile 2-col layout untouched. */
@keyframes aioMarqueeSheen { 0% { transform: translateX(-120%); } 100% { transform: translateX(260%); } }
@keyframes aioDotPulse { 0%,100% { opacity: 0.4; } 50% { opacity: 0.85; } }
.industries-marquee {
  isolation: isolate;
  background-image:
    linear-gradient(90deg, transparent 6%, rgba(0,71,255,0.55) 50%, transparent 94%),
    linear-gradient(to top, rgba(0,71,255,0.13), transparent 16px);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 1px, 100% 16px;
  background-position: center bottom, center bottom;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .ind-item {
    background: linear-gradient(180deg, var(--cream) 0%, #EAF0FF 52%, #A9C4FF 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 0.01em;
  }
  .ind-item:hover { -webkit-text-fill-color: var(--cream); }
  [data-theme="light"] .ind-item {
    background: linear-gradient(180deg, #16181C 0%, #223A72 60%, #16357C 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
}
.ind-dot {
  color: var(--accent-light); opacity: 0.55; font-size: clamp(12px, 1.15vw, 17px);
  text-shadow: 0 0 10px rgba(0,71,255,0.6), 0 0 20px rgba(0,71,255,0.3); transform: translateY(-0.06em);
}
@media (min-width: 601px) {
  .ind-sheen {
    position: absolute; top: 0; bottom: 0; left: 0; width: 42vw; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, rgba(120,170,255,0.10) 38%, rgba(205,226,255,0.24) 50%, rgba(120,170,255,0.10) 62%, transparent 100%);
    mix-blend-mode: screen; transform: translateX(-120%); will-change: transform; animation: aioMarqueeSheen 7s ease-in-out infinite;
  }
  .ind-item { transition: color 0.4s, -webkit-text-fill-color 0.4s, text-shadow 0.4s; }
  .ind-item:hover { color: var(--cream); text-shadow: 0 0 30px rgba(0,71,255,0.4), 0 0 60px rgba(0,71,255,0.18); }
  .ind-dot { animation: aioDotPulse 2.6s ease-in-out infinite; }
}
.industries-marquee.is-offscreen .ind-sheen,
.industries-marquee.is-offscreen .ind-dot { animation-play-state: paused; }
[data-theme="light"] .ind-sheen { display: none; }
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .proof-number {
    background: linear-gradient(180deg, var(--cream) 0%, #EAF0FF 46%, #A9C4FF 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  }
  .proof-number .accent { -webkit-text-fill-color: var(--accent); color: var(--accent); text-shadow: 0 0 22px rgba(0,71,255,0.5); }
  [data-theme="light"] .proof-number {
    background: linear-gradient(180deg, #0A0A0B 0%, #16357C 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  }
  [data-theme="light"] .proof-number .accent { -webkit-text-fill-color: var(--accent); color: var(--accent); }
}
.proof-card { isolation: isolate; }
@media (min-width: 601px) {
  .proof-number { position: relative; display: inline-block; }
  .proof-number::before {
    content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 150%; height: 220%; transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(0,71,255,0.22), rgba(0,71,255,0.06) 55%, transparent 72%);
    opacity: 0.5; transition: opacity 0.45s var(--easing); pointer-events: none;
  }
  [data-theme="light"] .proof-number::before { background: radial-gradient(closest-side, rgba(0,71,255,0.14), transparent 72%); }
  .proof-card:hover .proof-number::before, .proof-number.is-counting::before { opacity: 1; }
  .proof-number.is-counting { filter: drop-shadow(0 0 10px rgba(0,71,255,0.4)); }
  .proof-card:hover {
    border-color: rgba(0,71,255,0.40); background: rgba(0,71,255,0.045); transform: translateY(-6px);
    box-shadow: 0 20px 50px -14px rgba(0,71,255,0.38), inset 0 0 0 1px rgba(0,71,255,0.14);
  }
  .proof-card::before { z-index: 3; }
  .proof-card:hover::before { opacity: 1; box-shadow: 0 0 14px rgba(0,71,255,0.55); }
  .proof-card::after {
    content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
    background: linear-gradient(115deg, transparent 34%, rgba(190,214,255,0.10) 46%, rgba(225,236,255,0.20) 50%, rgba(190,214,255,0.10) 54%, transparent 66%);
    mix-blend-mode: screen; opacity: 0; transform: translateX(-110%);
  }
  .proof-card:hover::after { opacity: 1; transform: translateX(110%); transition: transform 0.9s var(--easing), opacity 0.25s ease; }
  [data-theme="light"] .proof-card::after { display: none; }
}
html.a11y-contrast-high .ind-item, html.a11y-contrast-high .proof-number {
  background: none !important; -webkit-text-fill-color: var(--cream) !important; color: var(--cream) !important;
}
html.a11y-contrast-high .proof-number .accent { -webkit-text-fill-color: var(--accent) !important; color: var(--accent) !important; }
@media (prefers-reduced-motion: reduce) {
  .ind-sheen { display: none !important; }
  .ind-dot { animation: none !important; opacity: 0.5 !important; }
}
.a11y-stop-motion .ind-sheen { display: none; }
.a11y-stop-motion .ind-dot { animation: none; opacity: 0.5; }
.a11y-stop-motion .ind-item, .a11y-stop-motion .proof-number {
  background: none !important; -webkit-text-fill-color: var(--cream) !important; color: var(--cream) !important;
}
.a11y-stop-motion .proof-number .accent { -webkit-text-fill-color: var(--accent) !important; color: var(--accent) !important; }
.a11y-stop-motion .proof-number.is-counting { filter: none !important; }

/* ---- */
/* Events card structural positioning (arcade strip removed 2026-07-19 - it read as a blurry gaming band; the joystick ambient loop carries the visual cleanly) */
.offer-card.offer-wide { position: relative; }
.offer-card.offer-wide > *:not(.offer-media) { position: relative; z-index: 1; }

/* ---- */
/* mobile polish (2026-07-11): overline 2-line + a11y trigger aligned with bot bubble */
.ov-sep { display: inline; }
.ov-last { display: inline; white-space: nowrap; }
@media (max-width: 700px) {
  .ov-sep { display: none; }
  .ov-last { display: block; margin-top: 6px; }
}
@media (max-width: 600px) {
  .a11y-trigger { bottom: 30px !important; }
  .a11y-panel { bottom: 86px !important; }
  body.cookie-open .a11y-trigger { bottom: 178px !important; }
}

/* ---- */
/* cube size upgrade (2026-07-11): cinematic service cards */
.service-cube { min-height: 400px !important; }
.cube-title { font-size: 32px; line-height: 1.25; }
.cube-media.ready { opacity: 0.62; }
@media (max-width: 1100px) { .service-cube { min-height: 330px !important; } .cube-title { font-size: 28px; } }
@media (max-width: 900px) { .service-cube { min-height: 280px !important; } .cube-title { font-size: 26px; } }
@media (max-width: 600px) {
  .services-grid { grid-template-columns: 1fr; gap: 14px; }
  .service-cube { min-height: 250px !important; }
  .cube-title { font-size: 26px; }
}
/* touch devices have no hover state - keep the visual strongly present at rest */
@media (hover: none) { .cube-media.ready { opacity: 0.8; } }
/* cube back copy: bigger + full-contrast in both themes (2026-07-11) */
.cube-detail { font-size: 19px; line-height: 1.65; color: var(--cream); }
@media (max-width: 900px) { .cube-detail { font-size: 17px; line-height: 1.55; } }
@media (max-width: 480px) { .cube-detail { font-size: 16px; line-height: 1.5; } }

/* ---- */
/* floating buttons stack (2026-07-11): back-to-top sits above the a11y trigger on mobile */
@media (max-width: 600px) {
  .back-to-top { bottom: 92px; left: 18px; }
  [dir="rtl"] .back-to-top { left: auto; right: 18px; }
  .a11y-panel { z-index: 10000; }
}

/* ---- */
/* mobile bubble symmetry + footer clearance + agency credit (2026-07-11) */
.footer-madeby { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; font-size: 12px; letter-spacing: 1px; color: var(--cream-dim); }
.footer-madeby img { height: 40px; width: auto; border-radius: 6px; border: 1px solid var(--divider); opacity: 0.92; }
@media (max-width: 600px) {
  /* right column mirrors the left: chat aligns with a11y (30), Instagram with back-to-top (92), WhatsApp crowns the stack */
  .chat-engage-bubble { bottom: 30px; right: 18px; }
  [dir="rtl"] .chat-engage-bubble { right: auto; left: 18px; }
  .floating-socials { bottom: 92px; right: 18px; gap: 14px; }
  [dir="rtl"] .floating-socials { right: auto; left: 18px; }
  body.cookie-open .floating-socials { bottom: 152px; }
  .footer-status { flex-direction: column; gap: 8px; padding: 0 72px; }
  .footer-madeby { flex-direction: column; gap: 10px; }
  footer[role="contentinfo"] { padding-bottom: 40px; }
}

/* ---- */
/* ═══ AIO ADVISOR - LIQUID GLASS (2026-07-11) ═══ */
.chatbot-container {
  background: linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02) 40%, rgba(0,71,255,0.05));
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  backdrop-filter: blur(26px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.14);
}
.chatbot-container::before { /* specular top light + refracted accent glow, Liquid Glass signature */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background:
    radial-gradient(120% 60% at 50% -20%, rgba(255,255,255,0.10), transparent 55%),
    radial-gradient(80% 50% at 85% 115%, rgba(0,71,255,0.10), transparent 60%);
}
.chatbot-header { padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); }
.chatbot-messages { padding: 16px 18px; }
.chat-msg.msg-bot {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.chat-msg.msg-user {
  background: linear-gradient(140deg, rgba(0,71,255,0.22), rgba(0,71,255,0.10));
  border: 1px solid rgba(77,124,255,0.35);
  color: var(--cream);
}
.chat-opt-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  color: var(--cream);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.chat-opt-btn:hover { background: rgba(0,71,255,0.22); border-color: rgba(77,124,255,0.6); transform: translateY(-1px); }
.chatbot-restart { border-radius: 999px; background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); }
/* real advisor avatar + brand-blue presence pulse */
.chatbot-avatar { background: transparent; position: relative; overflow: visible; }
.chatbot-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; border: 1px solid rgba(255,255,255,0.18); }
.chatbot-presence { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); border: 2px solid rgba(10,10,11,0.9); }
[dir="rtl"] .chatbot-presence { right: auto; left: -1px; }
@media (prefers-reduced-motion: no-preference) { .chatbot-presence { animation: aioPulse 2.6s ease-in-out infinite; } }
/* light theme: milky glass */
[data-theme="light"] .chatbot-container {
  background: linear-gradient(160deg, rgba(255,255,255,0.65), rgba(255,255,255,0.35) 40%, rgba(0,71,255,0.08));
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 24px 60px rgba(20,30,60,0.14), inset 0 1px 0 rgba(255,255,255,0.8);
}
[data-theme="light"] .chatbot-header { border-bottom-color: rgba(0,0,0,0.07); background: rgba(255,255,255,0.30); }
[data-theme="light"] .chat-msg.msg-bot { background: rgba(255,255,255,0.55); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .chat-opt-btn { background: rgba(255,255,255,0.50); border-color: rgba(0,0,0,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9); }
[data-theme="light"] .chatbot-restart { background: rgba(255,255,255,0.50); border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .chatbot-presence { border-color: rgba(255,255,255,0.95); }
/* accessibility + performance guards: solid surfaces when contrast tools or reduced transparency are on */
html.a11y-contrast-high .chatbot-container, html.a11y-contrast-invert .chatbot-container, html.a11y-contrast-mono .chatbot-container,
html.a11y-contrast-high .chat-msg.msg-bot, html.a11y-contrast-invert .chat-msg.msg-bot, html.a11y-contrast-mono .chat-msg.msg-bot {
  -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg-elevated);
}
@media (prefers-reduced-transparency: reduce) {
  .chatbot-container, .chat-msg.msg-bot, .chat-opt-btn { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .chatbot-container { background: var(--bg-elevated); }
}
/* tighter walls on mobile */
@media (max-width: 600px) {
  .chatbot-container { border-radius: 20px; }
  .chatbot-header { padding: 12px 14px; }
  .chatbot-messages { padding: 12px; gap: 12px; }
  .chat-msg { max-width: 94%; padding: 12px 14px; }
}

/* ---- */
/* ═══ ADVISOR UPGRADES (2026-07-11): input bar · progress · brief card · specular · haptics ═══ */
.chatbot-inputbar { display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); position: relative; z-index: 4; }
.chatbot-inputbar input { flex: 1; min-width: 0; font-family: var(--font-body); font-size: 14px; padding: 12px 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; color: var(--cream); outline: none; }
.chatbot-inputbar input::placeholder { color: var(--cream-dim); }
.chatbot-inputbar input:focus { border-color: rgba(77,124,255,0.6); }
.chatbot-inputbar button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(77,124,255,0.5); background: linear-gradient(140deg, rgba(0,71,255,0.35), rgba(0,71,255,0.15)); color: var(--cream); font-size: 15px; cursor: pointer; flex: none; transition: transform .2s var(--easing), background .3s; }
.chatbot-inputbar button:hover { background: var(--accent); }
.chatbot-inputbar button:disabled { opacity: .4; }
[dir="rtl"] .chatbot-inputbar button { transform: scaleX(-1); }
[dir="rtl"] .chatbot-inputbar button:active { transform: scaleX(-1) scale(0.95); }
[data-theme="light"] .chatbot-inputbar { background: rgba(255,255,255,0.30); border-top-color: rgba(0,0,0,0.07); }
[data-theme="light"] .chatbot-inputbar input { background: rgba(255,255,255,0.5); border-color: rgba(0,0,0,0.12); }
.chat-step { display: inline-block; font-size: 11px; letter-spacing: 1px; color: var(--cream-dim); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); border-radius: 999px; padding: 2px 10px; margin-inline-start: 8px; vertical-align: middle; }
.chat-progress { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.08); margin-top: 8px; overflow: hidden; }
.chat-progress i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.chat-brief { border: 1px solid rgba(77,124,255,0.35); background: linear-gradient(160deg, rgba(0,71,255,0.12), rgba(255,255,255,0.03)); border-radius: 14px; padding: 16px 18px; margin-top: 8px; max-width: 92%; font-size: 13px; }
.chat-brief h4 { font-family: var(--font-display); font-size: 15px; color: var(--cream); margin: 0 0 10px; }
.chat-brief .row { display: flex; gap: 8px; padding: 3px 0; color: var(--cream-muted); }
.chat-brief .row b { color: var(--cream); font-weight: 500; }
[data-theme="light"] .chat-brief { background: linear-gradient(160deg, rgba(0,71,255,0.08), rgba(255,255,255,0.45)); }
@media (hover: hover) and (pointer: fine) {
  .chatbot-container::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .5s;
    background: radial-gradient(220px circle at var(--sx, 50%) var(--sy, 0%), rgba(255,255,255,0.09), transparent 65%); }
  .chatbot-container:hover::after { opacity: 1; }
}
.chat-opt-btn:active, .chatbot-restart:active { transform: scale(0.95); }
.chatbot-inputbar button:active { transform: scale(0.95); }
/* voice mic button: idle glass · listening pulse · speaking glow */
#chatMicBtn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); color: var(--cream); font-size: 15px; cursor: pointer; flex: none; transition: transform .2s var(--easing), background .3s, box-shadow .3s, border-color .3s; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#chatMicBtn.listening { transform: scale(1.12); }
#chatMicBtn:hover { border-color: rgba(77,124,255,0.6); }
#chatMicBtn.listening { background: var(--accent); border-color: var(--accent); animation: aioPulse 1.6s ease-in-out infinite; }
#chatMicBtn.speaking { border-color: var(--accent); box-shadow: 0 0 18px rgba(0,71,255,0.45); }
[dir="rtl"] #chatMicBtn { transform: none; }
[data-theme="light"] #chatMicBtn { background: rgba(255,255,255,0.5); border-color: rgba(0,0,0,0.12); }
/* voice-output mute toggle in the header */
.chatbot-voicetoggle { margin-inline-end: 8px; width: 34px; height: 34px; border-radius: 50%; flex: none; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); color: var(--cream); font-size: 15px; line-height: 1; cursor: pointer; transition: background .3s, border-color .3s, opacity .3s; }
.chatbot-voicetoggle:hover { border-color: rgba(77,124,255,0.6); }
.chatbot-voicetoggle.muted { opacity: 0.55; }
[data-theme="light"] .chatbot-voicetoggle { background: rgba(255,255,255,0.5); border-color: rgba(0,0,0,0.12); }