/* ==========================================================================
   ai-visual.css — Homepage-only "AI vision" visual layer for CYNRIN.
   Light, premium, restrained. Everything is scoped under .ai-home and added
   on top of the existing design (no base rules are modified). Rollback =
   remove the <link>/<script> tags from views/index.blade.php.

   Language: AI indigo #4f46e5 -> violet #7c3aed over the light base.
   Motion: transforms/opacity only; disabled under prefers-reduced-motion
   and on small screens (HUD/grid/parallax < 1100px).
   ========================================================================== */

/* Stage-3 cleanup: the --ai-* palette / gradient / easing / shadow tokens are
   now inherited from the bridge in design-tokens.css (.ai-home scope, plus the
   stage-2 11.1 elevation re-mapping). This block previously re-declared the
   same values locally; removing it keeps a single source of truth with zero
   visual change. */

/* --------------------------------------------------------------------------
   1. HERO — aurora, fine grid, HUD frame, entrance, parallax-aware image
   -------------------------------------------------------------------------- */

.ai-home .hero { isolation: isolate; }

/* Aurora colour field ------------------------------------------------------ */
.hero-aurora {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}
.hero-aurora span {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    will-change: transform;
}
.hero-aurora .b1 {
    width: 560px; height: 560px;
    top: -16%; inset-inline-end: 4%;
    background: radial-gradient(circle, rgba(124, 61, 237, .18), rgba(124, 61, 237, 0) 68%);
    animation: ai-aurora-a 26s ease-in-out infinite alternate;
}
.hero-aurora .b2 {
    width: 520px; height: 520px;
    bottom: -22%; inset-inline-start: 18%;
    background: radial-gradient(circle, rgba(79, 70, 229, .14), rgba(59, 130, 246, 0) 70%);
    animation: ai-aurora-b 32s ease-in-out infinite alternate;
}
@keyframes ai-aurora-a {
    from { transform: translate3d(-4%, -2%, 0) scale(1); }
    to   { transform: translate3d(7%, 6%, 0) scale(1.14); }
}
@keyframes ai-aurora-b {
    from { transform: translate3d(5%, 4%, 0) scale(1.08); }
    to   { transform: translate3d(-7%, -5%, 0) scale(.96); }
}

/* Fine engineering grid ---------------------------------------------------- */
.hero-gridfx {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(15, 23, 42, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, .045) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 62% 42%, #000 30%, transparent 78%);
            mask-image: radial-gradient(ellipse 90% 80% at 62% 42%, #000 30%, transparent 78%);
}

/* HUD frame over the product image (language-neutral decoration) ----------- */
.hero-hud {
    position: absolute;
    z-index: 1;
    top: 15%; bottom: 15%;
    inset-inline-end: 5%;
    width: 38%;
    pointer-events: none;
}
.hero-hud .hud-c {
    position: absolute;
    width: 26px; height: 26px;
    opacity: .55;
}
.hero-hud .hud-c::before,
.hero-hud .hud-c::after {
    content: "";
    position: absolute;
    background: var(--ai-violet);
    border-radius: 1px;
}
.hero-hud .hud-c::before { width: 26px; height: 1.5px; }
.hero-hud .hud-c::after  { width: 1.5px; height: 26px; }
.hero-hud .hud-tl { top: 0; left: 0; }
.hero-hud .hud-tl::before { top: 0; left: 0; }
.hero-hud .hud-tl::after  { top: 0; left: 0; }
.hero-hud .hud-tr { top: 0; right: 0; }
.hero-hud .hud-tr::before { top: 0; right: 0; }
.hero-hud .hud-tr::after  { top: 0; right: 0; }
.hero-hud .hud-bl { bottom: 0; left: 0; }
.hero-hud .hud-bl::before { bottom: 0; left: 0; }
.hero-hud .hud-bl::after  { bottom: 0; left: 0; }
.hero-hud .hud-br { bottom: 0; right: 0; }
.hero-hud .hud-br::before { bottom: 0; right: 0; }
.hero-hud .hud-br::after  { bottom: 0; right: 0; }
.hero-hud .hud-sweep {
    position: absolute;
    left: 4%; right: 4%;
    top: -18%;
    height: 90px;
    background: linear-gradient(180deg, transparent 55%, rgba(124, 61, 237, .10) 88%, rgba(124, 61, 237, .5) 100%);
    animation: ai-hud-sweep 7s var(--ai-ease) infinite;
}
@keyframes ai-hud-sweep {
    0%   { transform: translateY(0); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translateY(720%); opacity: 0; }
}
.hero-hud .hud-dot {
    position: absolute;
    top: 40%; left: 63%;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ai-violet);
    box-shadow: 0 0 0 4px rgba(124, 61, 237, .15);
}
.hero-hud .hud-dot::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 1px solid rgba(124, 61, 237, .55);
    animation: ai-hud-ping 2.8s ease-out infinite;
}
@keyframes ai-hud-ping {
    0%   { transform: scale(.6); opacity: .9; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* Hero image: zoomed a touch so scroll parallax never reveals an edge */
.ai-home .hero-image {
    transform: scale(1.07) translateY(var(--ai-py, 0px));
    will-change: transform;
}

/* Entrance choreography (fires once .is-ready is set by JS) */
.ai-home.is-ready .hero .orange-rule {
    transform-origin: left center;
    animation: ai-rule-in .7s var(--ai-ease) .05s both;
}
.ai-home.is-ready .hero h1 { animation: ai-rise .85s var(--ai-ease) .16s both; }
.ai-home.is-ready .hero p  { animation: ai-rise .85s var(--ai-ease) .30s both; }
.ai-home.is-ready .hero-points li { animation: ai-rise .7s var(--ai-ease) both; }
.ai-home.is-ready .hero-points li:nth-child(1) { animation-delay: .40s; }
.ai-home.is-ready .hero-points li:nth-child(2) { animation-delay: .48s; }
.ai-home.is-ready .hero-points li:nth-child(3) { animation-delay: .56s; }
.ai-home.is-ready .hero-actions { animation: ai-rise .8s var(--ai-ease) .64s both; }
@keyframes ai-rule-in {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@keyframes ai-rise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   2. BUTTONS — indigo/violet gradient CTA, light sweep, soft violet halo.
      The base theme attaches quote-flash/catalog-flash on hover; quote-flash
      animates a solid background, which would override this gradient CTA, so
      both are re-declared here (loaded later) keeping only the halo flash.
   -------------------------------------------------------------------------- */

.ai-home .button-primary {
    position: relative;
    overflow: hidden;
    background: var(--ai-grad);
    border: none;
    transition: transform .2s ease, box-shadow .35s ease, filter .35s ease;
}
.ai-home .button-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .34) 50%, transparent 68%);
    transform: translateX(-130%);
    pointer-events: none;
}
.ai-home .button-primary:hover {
    filter: brightness(1.05);
    box-shadow: 0 14px 32px rgba(99, 76, 220, .34);
}
.ai-home .button-primary:hover::before {
    transform: translateX(130%);
    transition: transform .85s var(--ai-ease);
}
.ai-home .button-secondary:hover {
    color: var(--ai-indigo);
    border-color: var(--ai-indigo);
}
/* Re-skin the base-theme hover flash animations for the AI palette */
@keyframes quote-flash {
    0%, to { box-shadow: 0 0 0 0 rgba(99, 76, 220, 0); }
    50%     { box-shadow: 0 0 0 5px rgba(124, 61, 237, .22), 0 0 26px rgba(124, 61, 237, .55); }
}
@keyframes catalog-flash {
    0%, to { color: #0a0a0a; border-color: #cfd1d4; background: #fff; box-shadow: 0 0 0 0 rgba(99, 76, 220, 0); }
    50%     { color: #4f46e5; border-color: #4f46e5; background: #f6f4ff; box-shadow: 0 0 0 5px rgba(124, 61, 237, .16), 0 0 22px rgba(124, 61, 237, .4); }
}

/* --------------------------------------------------------------------------
   3. SCROLL REVEAL — one mechanic for headings, cards and grid items
   -------------------------------------------------------------------------- */

.ai-rv {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .75s var(--ai-ease), transform .75s var(--ai-ease);
    transition-delay: var(--ai-d, 0s);
    will-change: opacity, transform;
}
.ai-rv.in {
    opacity: 1;
    transform: none;
}

/* Ambient radial glow behind centered section headings */
.ai-home .section-heading { position: relative; }
.ai-home .section-heading.in::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -46px;
    left: 50%;
    width: min(440px, 92vw);
    height: 170px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(124, 61, 237, .12), rgba(124, 61, 237, 0));
    pointer-events: none;
}
.ai-home .section-heading > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   4. CARDS / GRIDS — glass, hairline glow, restrained hover lift
   -------------------------------------------------------------------------- */

/* Product cards — v1.9.0: remove the gray-card / white-inner-box "box in a box".
   The four shots are opaque product photos on baked white / light-blue sweeps with
   mixed aspect ratios, so they now fill a unified full-bleed 3:2 frame (cover).
   Clean white card, hairline divider, square corners; the brand color surfaces
   only on interaction: lift + push-in (clipped by the media frame), an
   indigo→violet accent line that sweeps in under the photo, and title / CTA
   tint. Both :hover and keyboard :focus-within get the same treatment. */
.ai-home .product-card.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    background: var(--c-white);
    transition: transform .4s var(--ai-ease), box-shadow .4s var(--ai-ease), border-color .4s var(--ai-ease);
}
.ai-home .product-card.product-card:hover,
.ai-home .product-card.product-card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--c-shadow-lg);
    border-color: var(--c-border-strong);
}
/* Full-bleed unified 3:2 stage: the product photograph IS the frame */
.ai-home .product-media.product-media {
    position: relative;
    height: auto;
    aspect-ratio: 3 / 2;
    padding: 0;
    background: var(--c-white);
    border: 0;
    border-bottom: 1px solid var(--c-border);
    overflow: hidden;
}
/* Brand accent line: parked (scaleX 0) on the hairline until the card is
   hovered / focused, then sweeps in from the left. Sits above the photo. */
.ai-home .product-media.product-media::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--ai-grad);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .5s var(--ai-ease);
    pointer-events: none;
    z-index: 2;
}
.ai-home .product-media.product-media img {
    object-fit: cover;
    object-position: center center;
    transition: transform .7s var(--ai-ease);
}
.ai-home .product-card.product-card:hover .product-media.product-media img,
.ai-home .product-card.product-card:focus-within .product-media.product-media img { transform: scale(1.05); }
.ai-home .product-card.product-card:hover .product-media.product-media::after,
.ai-home .product-card.product-card:focus-within .product-media.product-media::after { transform: scaleX(1); }
/* Text block */
.ai-home .product-card.product-card h3 {
    margin: 0;
    padding: 18px 20px 0;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--c-ink, #14151a);
    transition: color .35s var(--ai-ease);
}
.ai-home .product-card.product-card:hover h3,
.ai-home .product-card.product-card:focus-within h3 { color: var(--ai-indigo); }
.ai-home .product-card.product-card p {
    margin: 8px 0 0;
    padding: 0 20px;
    min-height: 0;
    font-size: 13px;
    line-height: 1.6;
}
.ai-home .product-card.product-card > a {
    margin: auto 0 0;
    padding: 16px 20px 20px;
    color: var(--ai-indigo);
    transition: color .35s var(--ai-ease);
}
.ai-home .product-card.product-card:hover > a,
.ai-home .product-card.product-card:focus-within > a { color: var(--ai-violet); }
.ai-home .product-card.product-card > a svg { transition: transform .3s var(--ai-ease); }
.ai-home .product-card.product-card:hover > a svg,
.ai-home .product-card.product-card:focus-within > a svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
    .ai-home .product-card.product-card,
    .ai-home .product-card.product-card:hover,
    .ai-home .product-card.product-card:focus-within { transition: none; transform: none; }
    .ai-home .product-media.product-media img,
    .ai-home .product-card.product-card:hover .product-media.product-media img,
    .ai-home .product-card.product-card:focus-within .product-media.product-media img { transition: none; transform: none; }
    .ai-home .product-media.product-media::after { transition: none; transform: scaleX(0); }
    .ai-home .product-card.product-card:hover .product-media.product-media::after,
    .ai-home .product-card.product-card:focus-within .product-media.product-media::after { transition: none; transform: scaleX(1); }
    .ai-home .product-card.product-card h3,
    .ai-home .product-card.product-card > a { transition: none; }
    .ai-home .product-card.product-card > a svg,
    .ai-home .product-card.product-card:hover > a svg,
    .ai-home .product-card.product-card:focus-within > a svg { transition: none; transform: none; }
}

/* Trust strip → floating glass bar */
.ai-home .trust-strip {
    border-radius: 16px;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    box-shadow: 0 12px 40px rgba(12, 16, 22, .06);
}

/* Process steps */
.ai-home .process-step.in:not(:last-child)::after {
    background: linear-gradient(90deg, rgba(79, 70, 229, .85), rgba(124, 61, 237, .12));
}
.ai-home .step-icon {
    transition: border-color .35s var(--ai-ease), box-shadow .35s var(--ai-ease), color .35s var(--ai-ease);
}
.ai-home .process-step.in .step-icon {
    box-shadow: 0 0 0 5px rgba(79, 70, 229, .08);
}
.ai-home .process-step:hover .step-icon {
    border-color: rgba(124, 61, 237, .55);
    color: var(--ai-indigo);
    box-shadow: 0 8px 22px rgba(99, 76, 220, .18);
}

/* Solution cards */
.ai-home .solution-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    transition: transform .4s var(--ai-ease), box-shadow .4s var(--ai-ease), border-color .4s var(--ai-ease);
}
.ai-home .solution-card::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0; bottom: 0; inset-inline-start: 0;
    width: 3px;
    background: var(--ai-grad);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .4s var(--ai-ease);
}
.ai-home .solution-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ai-shadow);
    border-color: rgba(124, 61, 237, .32);
}
.ai-home .solution-card:hover::before { transform: scaleY(1); }
.ai-home .solution-card a svg { transition: transform .3s var(--ai-ease); }
.ai-home .solution-card:hover a svg { transform: translateX(4px); }
/* Card content must sit above the accent bar */
.ai-home .solution-card > * { position: relative; z-index: 1; }

/* Application motion rail: 9:16 fast-flash tiles, horizontal snap scroll */
.ai-home .application-rail {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    margin-top: 36px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 2px 14px;
    cursor: grab;
}
.ai-home .application-rail::-webkit-scrollbar { display: none; }
.ai-home .application-rail.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }

.ai-home .application-rail article {
    flex: 0 0 auto;
    position: relative;
    width: clamp(204px, 20vw, 268px);
    height: auto;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #0d0d12;
    border-radius: 14px;
    scroll-snap-align: start;
    outline: 1px solid transparent;
    outline-offset: -1px;
    transition: transform .45s var(--ai-ease), box-shadow .45s var(--ai-ease), outline-color .45s var(--ai-ease);
}
.ai-home .application-rail article img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ai-ease);
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
/* Multi-frame live-motion tile: three AI frames cross-fade in a loop with a
   slow Ken Burns push. Frames are stacked in .apps-motion; f0 shows by
   default, animation only starts once JS marks the tile .is-live. */
.ai-home .application-rail article .apps-motion {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.ai-home .application-rail article .apps-motion img { opacity: 0; }
.ai-home .application-rail article .apps-motion img.apps-f0 { opacity: 1; }
.ai-home .application-rail article .apps-motion.is-live img {
    opacity: 0;
    animation-name: apps-frame-fade;
    animation-duration: 9s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    will-change: opacity;
}
.ai-home .application-rail article .apps-motion.is-live img.apps-f0 { animation-delay: 0s; }
.ai-home .application-rail article .apps-motion.is-live img.apps-f1 { animation-delay: -3s; }
.ai-home .application-rail article .apps-motion.is-live img.apps-f2 { animation-delay: -6s; }
.ai-home .application-rail article .apps-motion.is-live {
    animation: apps-ken-burns 18s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes apps-frame-fade {
    0%      { opacity: 1; }
    26.667% { opacity: 1; }
    33.333% { opacity: 0; }
    93.333% { opacity: 0; }
    100%    { opacity: 1; }
}
@keyframes apps-ken-burns {
    from { transform: scale(1); }
    to   { transform: scale(1.07); }
}
/* Bottom title zone: gradient veil with a faint brand glow, title with a
   gradient accent bar, and a circular -> CTA carried by the .tile-link so
   the whole tile stays clickable. Pure-CSS overlay, no markup changes. */
.ai-home .application-rail article::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 52%;
    background:
        linear-gradient(180deg, transparent 18%, rgba(5, 5, 12, .55) 62%, rgba(5, 5, 12, .86)),
        radial-gradient(120% 90% at 18% 100%, rgba(79, 70, 229, .28), transparent 60%);
    z-index: 1;
    transition: opacity .45s var(--ai-ease);
}
.ai-home .application-rail span {
    position: absolute;
    z-index: 2;
    bottom: 18px;
    left: 18px;
    right: 60px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .01em;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}
.ai-home .application-rail span::after {
    content: "";
    display: block;
    width: 26px;
    height: 3px;
    margin-top: 8px;
    border-radius: 2px;
    background: var(--ai-grad);
    transition: width .4s var(--ai-ease);
}
/* The anchor stays a transparent full-card fill (set in patch.css) so the
   whole tile remains clickable; its ::after draws the circular -> CTA. */
.ai-home .application-rail article .tile-link { z-index: 2; }
.ai-home .application-rail article .tile-link::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .14);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    border: 1px solid rgba(255, 255, 255, .3);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background-color .35s var(--ai-ease), border-color .35s var(--ai-ease), transform .35s var(--ai-ease);
}
.ai-home .application-rail.application-rail article:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--ai-shadow-deep);
    outline-color: rgba(124, 61, 237, .55);
}
.ai-home .application-rail article:hover::after { opacity: .92; }
.ai-home .application-rail article:hover span::after { width: 40px; }
.ai-home .application-rail article:hover .tile-link::after {
    background-color: transparent;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"),
        var(--ai-grad);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: 16px 16px, cover;
    border-color: transparent;
    transform: translateX(3px);
}
.ai-home .application-rail.application-rail article:hover img { transform: scale(1.06); }

/* desktop arrow controls (injected by JS) */
.ai-home .applications .application-nav {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin: 6px 2px 0;
}
.ai-home .applications .application-nav button {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .14);
    background: #fff;
    color: #1f2233;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .08);
    transition: background .3s var(--ai-ease), color .3s var(--ai-ease), border-color .3s var(--ai-ease), opacity .3s var(--ai-ease);
}
.ai-home .applications .application-nav button:hover {
    background: var(--ai-indigo);
    border-color: var(--ai-indigo);
    color: #fff;
}
.ai-home .applications .application-nav button:disabled { opacity: .35; cursor: default; }
.ai-home .applications .application-nav button:disabled:hover { background: #fff; border-color: rgba(15, 23, 42, .14); color: #1f2233; }
.ai-home .applications .application-nav svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
    .ai-home .application-rail article { width: clamp(150px, 30vw, 196px); }
}
@media (max-width: 600px) {
    .ai-home .application-rail { gap: 12px; margin-top: 28px; padding: 4px 0 12px; }
    .ai-home .application-rail article { width: 62vw; max-width: 260px; border-radius: 12px; }
    .ai-home .applications .application-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-home .application-rail { scroll-behavior: auto; }
    .ai-home .application-rail article,
    .ai-home .application-rail.application-rail article:hover { transition: none; transform: none; }
    .ai-home .application-rail article img,
    .ai-home .application-rail.application-rail article:hover img { transition: none; transform: none; }
    .ai-home .application-rail article .tile-link,
    .ai-home .application-rail article .tile-link::after,
    .ai-home .application-rail article span::after,
    .ai-home .application-rail article::after { transition: none; }
    .ai-home .application-rail article:hover .tile-link::after { transform: none; }
    .ai-home .application-rail article .apps-motion.is-live,
    .ai-home .application-rail article .apps-motion.is-live img { animation: none; will-change: auto; }
    .ai-home .application-rail article .apps-motion img,
    .ai-home .application-rail article .apps-motion.is-live img { opacity: 0; }
    .ai-home .application-rail article .apps-motion img.apps-f0,
    .ai-home .application-rail article .apps-motion.is-live img.apps-f0 { opacity: 1; }
}

/* Engineering / factory big media */
.ai-home .engineering-card > img {
    transition: transform 1.2s var(--ai-ease);
}
.ai-home .engineering-card:hover > img { transform: scale(1.05); }
.ai-home .factory-media img {
    transition: transform .9s var(--ai-ease);
}
.ai-home .factory-media:hover img { transform: scale(1.05); }

/* --------------------------------------------------------------------------
   4b. DARK HERO — full-bleed looping product video behind a dark scrim.
      The <video> is injected by ai-visual.js (decorative, aria-hidden,
      desktop + motion allowed only); below 1100px the hero falls back to a
      solid cinematic dark gradient, so no video bytes load on mobile.
      Layering (all positioned children of .hero):
        0 video / dark base      (.hero-media-video, .hero-image hidden)
        1 scrim + aurora + grid  (.hero-scrim, .hero-aurora, .hero-gridfx)
        2 copy                   (.hero-inner)
      -------------------------------------------------------------------------- */

/* Cinematic dark base replaces the light #f2f5f7 in every case (video or
   not), so copy contrast never depends on the image decoding.
   Taller, viewport-driven hero (desktop only; ≤1100px keeps the base
   fixed-height stacked layout) for a bigger first impression. */
@media (min-width: 1101px) {
    .ai-home .hero {
        height: 88vh;
        min-height: 720px;
        max-height: 960px;
    }
}
.ai-home .hero {
    background: #07070c;
}

/* Kill the legacy light left/top wash (::after); the dark scrim replaces it. */
.ai-home .hero::after { content: none; }

/* Looping video, cropped to cover like the static image it replaces. */
.ai-home .hero-media-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    /* Lift the black-on-black product footage just enough to read the frame
       and gold details; the scrim still carries all copy contrast. */
    filter: brightness(1.12) contrast(1.04);
}

/* Dark scrim: keeps left copy readable while the product stays visible.
   A faint indigo->violet glow at the edges preserves the AI gradient accent. */
.ai-home .hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(7, 7, 12, .95) 0%, rgba(7, 7, 12, .78) 34%, rgba(7, 7, 12, .26) 60%, rgba(7, 7, 12, .48) 100%),
        radial-gradient(120% 140% at 16% 50%, rgba(79, 70, 229, .30), rgba(124, 61, 237, 0) 55%);
}

/* The static product image is replaced by the video on desktop. On mobile the
   video is never injected and the static image stays hidden in favour of the
   solid dark gradient (a light product photo cannot sit behind white copy). */
.ai-home .hero-image { display: none; }

/* Decorative layers sit above the video/scrim but below the copy. */
.ai-home .hero-aurora { z-index: 1; }
.ai-home .hero-gridfx {
    z-index: 1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
}
.ai-home .hero-hud { z-index: 1; }

/* Copy over the video. */
.ai-home .hero-inner { z-index: 2; }
.ai-home .hero h1 { color: #ffffff; }
.ai-home .hero p { color: rgba(237, 240, 247, .84); }
.ai-home .hero-points { color: rgba(237, 240, 247, .92); }
.ai-home .hero-points svg { color: #8b8cf6; }

/* Accent rule keeps the indigo->violet identity. */
.ai-home .hero .orange-rule {
    background: linear-gradient(90deg, var(--ai-indigo), var(--ai-violet));
}

/* Ghost button readable on dark (base theme styles it white-on-white). */
.ai-home .hero .button-secondary {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .34);
    color: #ffffff;
}
.ai-home .hero .button-secondary:hover {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .62);
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   4c. DARK ENGINEERING BAND — a second dark beat lower the page so the top
      half alternates light / dark / light instead of reading as one flat
      light block. Re-skins the existing image card: dark surface + dark
      image scrim + inverse copy, with a static indigo/violet glow.
      -------------------------------------------------------------------------- */
.ai-home .engineering {
    background: #0c0c12;
    padding-top: 70px;
    padding-bottom: 70px;
}
.ai-home .engineering-card {
    background: #14141d;
    border: 1px solid rgba(255, 255, 255, .07);
}
/* Dim the product photo so white copy holds; keep it visible on the right. */
.ai-home .engineering-card > img {
    filter: brightness(.52) saturate(1.05);
}
.ai-home .engineering-card::after {
    background:
        linear-gradient(90deg, rgba(12, 12, 18, .97) 0%, rgba(12, 12, 18, .82) 36%, rgba(12, 12, 18, .30) 66%, rgba(12, 12, 18, .55) 100%),
        radial-gradient(90% 130% at 12% 50%, rgba(79, 70, 229, .32), rgba(124, 61, 237, 0) 60%);
}
.ai-home .engineering-copy h2 { color: #ffffff; }
.ai-home .engineering-copy p { color: rgba(237, 240, 247, .80); }
.ai-home .engineering-copy li { color: rgba(237, 240, 247, .90); }
.ai-home .engineering-copy li::before { color: #8b8cf6; }

/* Foreground product video: a compact 16:9 player window on the right of the
   engineering card. Reuses the .factory-video UI (poster, gradient play
   button, tag, duration, click-to-play) and only overrides its placement,
   turning the card-filling factory block into a small framed window above
   the dimmed product photo (z-index above the ::after scrim and copy). */
.ai-home .engineering-promo.factory-video {
    inset: auto;
    top: 50%;
    right: 56px;
    transform: translateY(-50%);
    width: 44%;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 4px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
    z-index: 3;
}
@media (max-width: 680px) {
    .ai-home .engineering-promo.factory-video {
        top: auto;
        right: 24px;
        bottom: 26px;
        left: 24px;
        width: auto;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   4d. CORE TECHNOLOGIES BENTO — JS (ai-visual.js) replaces the four-value
      .trust-strip under the products section with a dark, asymmetric bento
      grid of six concrete product technologies. Fine hairline borders, line
      icons, restrained hover only (no heavy glow). Container-bound panel so
      it needs no DOM/section changes.
      -------------------------------------------------------------------------- */
.ai-home .core-tech {
    position: relative;
    margin-top: 44px;
    padding: 48px 40px 44px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 18px;
    background:
        radial-gradient(110% 130% at 88% -10%, rgba(124, 61, 237, .14), rgba(124, 61, 237, 0) 56%),
        radial-gradient(90% 120% at -6% 110%, rgba(79, 70, 229, .12), rgba(79, 70, 229, 0) 55%),
        #0c0c12;
    overflow: hidden;
    isolation: isolate;
}
/* Very faint engineering grid, masked toward the upper-right corner. */
.ai-home .core-tech::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 88% 0%, #000 0%, transparent 70%);
            mask-image: radial-gradient(ellipse 60% 70% at 88% 0%, #000 0%, transparent 70%);
}
@media (min-width: 1101px) {
    .ai-home .core-tech::before { animation: ct-grid-drift 14s linear infinite; }
}

/* Header ------------------------------------------------------------------- */
.ai-home .core-tech__head {
    max-width: 720px;
    margin-bottom: 34px;
}
.ai-home .core-tech__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #8b8cf6;
}
.ai-home .core-tech__heading {
    margin: 12px 0 0;
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.01em;
    color: #ffffff;
    background: linear-gradient(100deg, #ffffff 30%, #b7b9fb 50%, #ffffff 70%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media (min-width: 1101px) {
    .ai-home .core-tech__head.in .core-tech__heading {
        animation: ct-heading-sheen 5.5s ease-in-out 1.1s infinite;
    }
}
@keyframes ct-heading-sheen {
    0%, 55%, 100% { background-position: 120% 0; }
    20%           { background-position: -20% 0; }
}

/* Bento grid: 12-col track, two wide features, three standard cells, then a
   full-width differentiation cell (child distance protection). */
.ai-home .core-tech__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
}
.ai-home .core-tech__cell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    grid-column: span 4;
    min-height: 196px;
    padding: 24px 24px 22px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background: #14141d;
    color: #ffffff;
    text-decoration: none;
    overflow: hidden;
    transition:
        transform .4s cubic-bezier(.16, 1, .3, 1),
        border-color .4s var(--ai-ease),
        background-color .4s var(--ai-ease),
        box-shadow .4s var(--ai-ease);
}
.ai-home .core-tech__cell--ct-waveguide { grid-column: span 5; }
.ai-home .core-tech__cell--ct-voice     { grid-column: span 7; }
.ai-home .core-tech__cell--ct-video,
.ai-home .core-tech__cell--ct-translate,
.ai-home .core-tech__cell--ct-touch     { grid-column: span 4; }
.ai-home .core-tech__cell--ct-child     { grid-column: 1 / -1; }

/* Quiet indigo/violet wash on the two feature cells + the differentiation
   cell so emphasis reads without glow. */
.ai-home .core-tech__cell--ct-waveguide {
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(79, 70, 229, .16), rgba(79, 70, 229, 0) 60%),
        #14141d;
}
.ai-home .core-tech__cell--ct-voice {
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(124, 61, 237, .18), rgba(124, 61, 237, 0) 60%),
        #14141d;
}
.ai-home .core-tech__cell--ct-child {
    background:
        radial-gradient(90% 160% at 0% 50%, rgba(79, 70, 229, .14), rgba(79, 70, 229, 0) 55%),
        radial-gradient(90% 160% at 100% 50%, rgba(124, 61, 237, .14), rgba(124, 61, 237, 0) 55%),
        #14141d;
}

.ai-home .core-tech__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 12px;
    color: #a5a8f8;
    background: rgba(255, 255, 255, .03);
    flex: none;
    transition:
        color .35s var(--ai-ease),
        border-color .35s var(--ai-ease),
        background .35s var(--ai-ease),
        transform .5s cubic-bezier(.16, 1, .3, 1),
        box-shadow .35s var(--ai-ease);
}
.ai-home .core-tech__icon svg { display: block; width: 26px; height: 26px; }

.ai-home .core-tech__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ai-home .core-tech__index {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    color: rgba(237, 240, 247, .42);
}
.ai-home .core-tech__title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
}
.ai-home .core-tech__cell--ct-waveguide .core-tech__title,
.ai-home .core-tech__cell--ct-voice .core-tech__title { font-size: 21px; }
.ai-home .core-tech__desc {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(237, 240, 247, .66);
}

.ai-home .core-tech__go {
    position: absolute;
    top: 22px;
    inset-inline-end: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 8px;
    color: rgba(237, 240, 247, .62);
    transition: transform .32s var(--ai-ease), color .32s var(--ai-ease), border-color .32s var(--ai-ease);
}
.ai-home .core-tech__go svg { width: 15px; height: 15px; }

/* High-impact hover: lift, indigo light-edge, soft halo + sweeping sheen. */
.ai-home .core-tech__cell:hover {
    transform: translateY(-6px);
    border-color: rgba(139, 140, 246, .55);
    background-color: #171722;
    box-shadow:
        0 22px 44px -18px rgba(8, 8, 16, .85),
        0 0 0 1px rgba(139, 140, 246, .14),
        0 12px 40px -10px rgba(99, 102, 241, .42);
}
.ai-home .core-tech__cell:hover .core-tech__icon {
    color: #dfe0ff;
    border-color: rgba(139, 140, 246, .55);
    background: rgba(99, 102, 241, .16);
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 8px 22px -6px rgba(99, 102, 241, .55);
}
.ai-home .core-tech__cell:hover .core-tech__go {
    color: #ffffff;
    border-color: rgba(139, 140, 246, .45);
    transform: translateX(3px);
}

/* Diagonal light sweep across the cell on hover. */
.ai-home .core-tech__cell::after {
    content: "";
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: 0;
    width: 42%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(165, 168, 248, .16) 45%, rgba(199, 201, 255, .28) 50%, rgba(165, 168, 248, .16) 55%, transparent);
    transform: translateX(-200%) skewX(-18deg);
}
.ai-home .core-tech__cell:hover::after {
    animation: ct-sheen .9s cubic-bezier(.16, 1, .3, 1);
}
@keyframes ct-sheen {
    from { transform: translateX(-200%) skewX(-18deg); }
    to   { transform: translateX(380%) skewX(-18deg); }
}
.ai-home .core-tech__cell:focus-visible {
    outline: 2px solid var(--ai-indigo);
    outline-offset: 3px;
}

/* Child protection: horizontal feature row with its own rhythm. */
.ai-home .core-tech__cell--ct-child {
    flex-direction: row;
    align-items: center;
    gap: 22px;
    min-height: 0;
    padding: 26px 72px 26px 28px;
}
.ai-home .core-tech__cell--ct-child .core-tech__text { gap: 4px; }
.ai-home .core-tech__cell--ct-child .core-tech__index { display: none; }
.ai-home .core-tech__cell--ct-child .core-tech__title { font-size: 20px; }

/* High-impact motion -------------------------------------------------------
   1) Staggered spring entrance for the six cells. fill-mode: backwards only
      fills the START frame during --ai-d (from the existing reveal stagger),
      so once the animation ends it never locks transform and hover lift keeps
      working. The base .ai-rv opacity/transform transition must not fight the
      keyframes, so it is disabled on these cells. */
.ai-home .core-tech__cell.ai-rv {
    opacity: 1;
    transform: none;
    transition: none;
}
.ai-home .core-tech__head.ai-rv {
    opacity: 1;
    transform: none;
    transition: none;
}
.ai-home .core-tech__cell.ai-rv.in {
    animation: ct-pop .8s cubic-bezier(.2, .9, .25, 1.15) backwards;
    animation-delay: var(--ai-d, 0ms);
}
.ai-home .core-tech__head.ai-rv.in .core-tech__eyebrow,
.ai-home .core-tech__head.ai-rv.in .core-tech__heading {
    animation: ct-head-rise .75s cubic-bezier(.16, 1, .3, 1) backwards;
}
.ai-home .core-tech__head.ai-rv.in .core-tech__heading { animation-delay: .08s; }
.ai-home .core-tech__cell.ai-rv.in .core-tech__icon {
    animation: ct-icon-in .9s cubic-bezier(.2, .9, .25, 1.2) backwards;
    animation-delay: calc(var(--ai-d, 0ms) + 140ms);
}
@keyframes ct-pop {
    0%   { opacity: 0; transform: translateY(56px) scale(.9); }
    58%  { opacity: 1; transform: translateY(-8px) scale(1.025); }
    78%  { transform: translateY(3px) scale(.995); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ct-icon-in {
    0%   { opacity: 0; transform: scale(.4) rotate(-10deg); }
    60%  { opacity: 1; transform: scale(1.16) rotate(3deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes ct-head-rise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 2) Ambient aurora drifting behind the whole panel (desktop only, the grid
      cells' own washes carry the energy on smaller screens). */
.ai-home .core-tech__aurora {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.ai-home .core-tech__aurora span {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    will-change: transform;
}
.ai-home .core-tech__aurora .a1 {
    width: 460px;
    height: 460px;
    top: -28%;
    inset-inline-end: -6%;
    background: radial-gradient(circle, rgba(124, 61, 237, .20), rgba(124, 61, 237, 0) 68%);
    animation: ct-aurora-a 24s ease-in-out infinite alternate;
}
.ai-home .core-tech__aurora .a2 {
    width: 420px;
    height: 420px;
    bottom: -30%;
    inset-inline-start: 8%;
    background: radial-gradient(circle, rgba(79, 70, 229, .18), rgba(79, 70, 229, 0) 70%);
    animation: ct-aurora-b 30s ease-in-out infinite alternate;
}
@keyframes ct-aurora-a {
    from { transform: translate3d(-6%, 4%, 0) scale(1); }
    to   { transform: translate3d(6%, -4%, 0) scale(1.16); }
}
@keyframes ct-aurora-b {
    from { transform: translate3d(6%, -3%, 0) scale(1.1); }
    to   { transform: translate3d(-7%, 6%, 0) scale(.94); }
}

/* 3) Slow engineering-grid drift, looping seamlessly on the 46px tile. */
@keyframes ct-grid-drift {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 46px 46px, 46px 46px; }
}

/* 4) Child-distance full-width row: pulsing accent rail signals the
      differentiated module without adding more glow. */
.ai-home .core-tech__cell--ct-child::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--ai-indigo), var(--ai-violet));
    box-shadow: 0 0 18px rgba(124, 58, 237, .55);
}
@keyframes ct-rail-pulse {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}
@media (min-width: 1101px) {
    .ai-home .core-tech__cell--ct-child::before { animation: ct-rail-pulse 2.6s ease-in-out infinite; }
}

/* 5) Per-technology animated visualizers -----------------------------------
   Standard cells show a framed "demo window" on top; the two wide feature
   cells and the full-width child cell float the visualizer at the inline-end
   with copy kept clear. Every animation is transform/opacity only. */
.ai-home .core-tech__viz {
    position: relative;
    order: -1;
    margin: 0 0 2px;
    border-radius: 10px;
    border: 1px solid rgba(139, 140, 246, .14);
    background:
        radial-gradient(120% 140% at 80% 0%, rgba(99, 102, 241, .10), transparent 60%),
        rgba(10, 10, 17, .55);
    overflow: hidden;
}
.ai-home .core-tech__viz::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, #14141d 0%, transparent 8%, transparent 92%, #14141d 100%);
    opacity: .55;
}
.ai-home .core-tech__viz .ctv {
    display: block;
    width: 100%;
    height: 104px;
}
.ai-home .core-tech__viz .ctv--wide { height: 96px; }

/* The animated visualizer supersedes the small glyph; keep the DOM for a11y
   fallback but drop the duplicate icon from the composed card. */
.ai-home .core-tech__cell .core-tech__icon { display: none; }

/* Feature cells (waveguide / voice) + child: visualizer floats at the end. */
@media (min-width: 1101px) {
    .ai-home .core-tech__cell--ct-waveguide,
    .ai-home .core-tech__cell--ct-voice { min-height: 236px; }
    .ai-home .core-tech__cell--ct-waveguide .core-tech__viz,
    .ai-home .core-tech__cell--ct-voice .core-tech__viz {
        position: absolute;
        top: 0;
        bottom: 0;
        inset-inline-end: 18px;
        width: 46%;
        margin: 0;
        display: flex;
        align-items: center;
        background: transparent;
        border-color: transparent;
    }
    .ai-home .core-tech__cell--ct-waveguide .core-tech__viz::after,
    .ai-home .core-tech__cell--ct-voice .core-tech__viz::after { content: none; }
    .ai-home .core-tech__cell--ct-waveguide .core-tech__viz .ctv,
    .ai-home .core-tech__cell--ct-voice .core-tech__viz .ctv { height: 150px; }
    .ai-home .core-tech__cell--ct-waveguide .core-tech__text,
    .ai-home .core-tech__cell--ct-voice .core-tech__text { padding-inline-end: 48%; }
    .ai-home .core-tech__cell--ct-child .core-tech__viz {
        order: 0;
        margin: 0;
        width: 300px;
        flex: none;
        align-self: stretch;
        display: flex;
        align-items: center;
        background: transparent;
        border-color: transparent;
    }
    .ai-home .core-tech__cell--ct-child .core-tech__viz::after { content: none; }
    .ai-home .core-tech__cell--ct-child .core-tech__viz .ctv--wide { height: 110px; }
    .ai-home .core-tech__cell--ct-child .core-tech__text { flex: 1; }
}
@media (min-width: 681px) and (max-width: 1100px) {
    .ai-home .core-tech__cell--ct-child .core-tech__viz {
        order: 0;
        margin: 0;
        width: 240px;
        flex: none;
        display: flex;
        align-items: center;
        background: transparent;
        border-color: transparent;
    }
    .ai-home .core-tech__cell--ct-child .core-tech__viz::after { content: none; }
    .ai-home .core-tech__cell--ct-child .core-tech__viz .ctv--wide { height: 92px; }
    .ai-home .core-tech__cell--ct-child .core-tech__text { flex: 1; }
}
/* Fade the visualizer in together with its cell's spring entrance. */
.ai-home .core-tech__cell.ai-rv:not(.in) .core-tech__viz { opacity: 0; }
.ai-home .core-tech__cell.ai-rv.in .core-tech__viz {
    animation: ct-viz-in .7s cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: calc(var(--ai-d, 0ms) + 220ms);
}
@keyframes ct-viz-in {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Visualizer animation library -------------------------------------------- */
.ai-home .ctv [class*="ctv-"] { transform-box: fill-box; }

/* Travelling light / signal / data (stroke-dashoffset march). */
.ai-home .ctv .ctv-flow {
    stroke-dashoffset: 0;
    animation: ctv-dash 1.15s linear infinite;
}
.ai-home .ctv .ctv-flow--slow { animation-duration: 1.9s; }
.ai-home .ctv .ctv-flow--rev { animation-direction: reverse; }
@keyframes ctv-dash { to { stroke-dashoffset: -24; } }

/* Bright node pulse along the waveguide. */
.ai-home .ctv .ctv-node {
    transform-box: fill-box;
    transform-origin: center;
    animation: ctv-node 1.6s ease-in-out infinite;
}
@keyframes ctv-node {
    0%, 100% { opacity: .35; transform: scale(.7); }
    50%      { opacity: 1; transform: scale(1.25); }
}

/* Voice equalizer bars (--h = half excursion). */
.ai-home .ctv .ctv-eq line {
    transform-box: fill-box;
    transform-origin: center;
    animation: ctv-eq 1s ease-in-out infinite;
}
@keyframes ctv-eq {
    0%, 100% { transform: scaleY(.32); }
    50%      { transform: scaleY(1.25); }
}

/* Camera scan line sweeping top-to-bottom. */
.ai-home .ctv .ctv-scan {
    transform-box: fill-box;
    transform-origin: center;
    animation: ctv-scan 2.6s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes ctv-scan {
    0%   { transform: translateY(4px); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translateY(40px); opacity: 0; }
}

/* Lens camera dot soft pulse. */
.ai-home .ctv .ctv-cam {
    transform-box: fill-box;
    transform-origin: center;
    animation: ctv-cam 2s ease-in-out infinite;
}
@keyframes ctv-cam {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .55; transform: scale(1.35); }
}

/* Voice arcs emitted by the temple microphone capsule. */
.ai-home .ctv .ctv-wave path {
    transform-box: fill-box;
    transform-origin: left center;
    opacity: 0;
    animation: ctv-wave 1.8s ease-out infinite;
}
@keyframes ctv-wave {
    0%   { opacity: .9; transform: scale(.55); }
    70%  { opacity: .25; }
    100% { opacity: 0; transform: scale(1.35); }
}

/* REC dot + label blink. */
.ai-home .ctv .ctv-rec { animation: ctv-blink 1.3s steps(1, end) infinite; }
.ai-home .ctv .ctv-blink { animation: ctv-blink 1.3s steps(1, end) infinite; }
@keyframes ctv-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .2; } }

/* Translation bubbles exchange emphasis. */
.ai-home .ctv .ctv-bub {
    transform-box: fill-box;
    transform-origin: center;
    animation: ctv-bub 2.6s ease-in-out infinite;
}
.ai-home .ctv .ctv-bub--b { animation-delay: 1.3s; }
@keyframes ctv-bub {
    0%, 38% { opacity: .45; transform: scale(.96); }
    50%, 62% { opacity: 1; transform: scale(1.04); }
    100%    { opacity: .45; transform: scale(.96); }
}

/* Touch track: handle slides, tap rings ripple. */
.ai-home .ctv .ctv-track {
    stroke-dashoffset: 0;
    animation: ctv-dash 1.4s linear infinite;
}
.ai-home .ctv .ctv-finger {
    transform-box: fill-box;
    transform-origin: center;
    animation: ctv-finger 2.4s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes ctv-finger {
    0%   { transform: translateX(-34px); }
    42%  { transform: translateX(0); }
    58%  { transform: translateX(0); }
    100% { transform: translateX(30px); }
}
.ai-home .ctv .ctv-ripple {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: ctv-ripple 2.4s ease-out infinite;
}
@keyframes ctv-ripple {
    0%, 46% { opacity: 0; transform: scale(.5); }
    54%     { opacity: .8; }
    78%     { opacity: 0; transform: scale(2.4); }
    100%    { opacity: 0; transform: scale(2.4); }
}

/* Distance sonar: ellipses expand outward from the child's face. */
.ai-home .ctv .ctv-sonar ellipse {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: ctv-sonar 2.4s ease-out infinite;
}
@keyframes ctv-sonar {
    0%   { opacity: 0; transform: scale(.5, .5); }
    25%  { opacity: .8; }
    100% { opacity: 0; transform: scale(6, 1.3); }
}
.ai-home .ctv .ctv-book { animation: ctv-book 2.4s ease-in-out infinite; }
@keyframes ctv-book {
    0%, 100% { opacity: .75; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.05); }
}
.ai-home .ctv .ctv-alert { animation: ctv-alert 1.2s ease-in-out infinite; }
@keyframes ctv-alert {
    0%, 100% { opacity: 1; }
    50%      { opacity: .15; }
}

/* --------------------------------------------------------------------------
   5. DARK CONTACT SECTION — aurora + grid work harder on dark surfaces
   -------------------------------------------------------------------------- */

.ai-home .contact-section {
    position: relative;
    overflow: hidden;
}
.dark-fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.dark-fx .df-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 75% 90% at 72% 50%, #000 20%, transparent 75%);
            mask-image: radial-gradient(ellipse 75% 90% at 72% 50%, #000 20%, transparent 75%);
}
.dark-fx .df-b {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
}
.dark-fx .df-b1 {
    width: 480px; height: 480px;
    top: -30%; inset-inline-end: 8%;
    background: radial-gradient(circle, rgba(124, 61, 237, .24), rgba(124, 61, 237, 0) 68%);
    animation: ai-aurora-a 30s ease-in-out infinite alternate;
}
.dark-fx .df-b2 {
    width: 420px; height: 420px;
    bottom: -34%; inset-inline-start: 4%;
    background: radial-gradient(circle, rgba(79, 70, 229, .16), rgba(59, 130, 246, 0) 70%);
    animation: ai-aurora-b 34s ease-in-out infinite alternate;
}
.ai-home .contact-grid { position: relative; z-index: 1; }
.ai-home .contact-item {
    transition: transform .3s var(--ai-ease);
}
.ai-home .contact-item:hover { transform: translateX(4px); }
.ai-home .contact-item svg { transition: filter .35s var(--ai-ease); }
.ai-home .contact-item:hover svg { filter: drop-shadow(0 0 10px rgba(124, 61, 237, .6)); }
.ai-home .inquiry-form input:focus,
.ai-home .inquiry-form textarea:focus {
    border-color: var(--ai-indigo);
    box-shadow: 0 0 0 3px rgba(99, 76, 220, .22);
}

/* --------------------------------------------------------------------------
   6. RTL (Arabic) — mirror the hero fade so copy stays on white, flip
   logical-side decorations and micro-translations.
   -------------------------------------------------------------------------- */

/* RTL: the legacy light hero wash is removed entirely (dark hero), so only
   the scrim/mask direction needs mirroring. */
html[dir="rtl"] .ai-home .hero-scrim {
    background:
        linear-gradient(270deg, rgba(7, 7, 12, .94) 0%, rgba(7, 7, 12, .80) 38%, rgba(7, 7, 12, .38) 64%, rgba(7, 7, 12, .62) 100%),
        radial-gradient(120% 140% at 84% 50%, rgba(79, 70, 229, .30), rgba(124, 61, 237, 0) 55%);
}
html[dir="rtl"] .ai-home .engineering-card::after {
    background:
        linear-gradient(270deg, rgba(12, 12, 18, .97) 0%, rgba(12, 12, 18, .82) 36%, rgba(12, 12, 18, .30) 66%, rgba(12, 12, 18, .55) 100%),
        radial-gradient(90% 130% at 88% 50%, rgba(79, 70, 229, .32), rgba(124, 61, 237, 0) 60%);
}
html[dir="rtl"] .ai-home .hero-gridfx {
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 38% 42%, #000 30%, transparent 78%);
            mask-image: radial-gradient(ellipse 90% 80% at 38% 42%, #000 30%, transparent 78%);
}
html[dir="rtl"] .ai-home.is-ready .hero .orange-rule {
    transform-origin: right center;
}
html[dir="rtl"] .ai-home .dark-fx .df-grid {
    -webkit-mask-image: radial-gradient(ellipse 75% 90% at 28% 50%, #000 20%, transparent 75%);
            mask-image: radial-gradient(ellipse 75% 90% at 28% 50%, #000 20%, transparent 75%);
}
html[dir="rtl"] .ai-home .contact-item:hover { transform: translateX(-4px); }
html[dir="rtl"] .ai-home .core-tech__cell:hover .core-tech__go { transform: translateX(-3px); }
html[dir="rtl"] .ai-home .core-tech__cell::after {
    transform: translateX(380%) skewX(-18deg);
}
html[dir="rtl"] .ai-home .core-tech__cell:hover::after {
    animation-name: ct-sheen-rtl;
}
@keyframes ct-sheen-rtl {
    from { transform: translateX(380%) skewX(-18deg); }
    to   { transform: translateX(-200%) skewX(-18deg); }
}
html[dir="rtl"] .ai-home .core-tech::before {
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 12% 0%, #000 0%, transparent 70%);
            mask-image: radial-gradient(ellipse 60% 70% at 12% 0%, #000 0%, transparent 70%);
}
html[dir="rtl"] .ai-home .product-card:hover > a svg,
html[dir="rtl"] .ai-home .solution-card:hover a svg { transform: translateX(-4px); }

/* --------------------------------------------------------------------------
   7. RESPONSIVE — drop the heavy/positioned layers below 1100px
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .hero-gridfx,
    .hero-hud { display: none; }
    .hero-aurora .b1 { width: 380px; height: 380px; opacity: .7; }
    .hero-aurora .b2 { width: 320px; height: 320px; opacity: .7; }
    /* No video on mobile (JS never injects it): give the dark hero a subtle
       indigo/violet depth gradient so it does not read as flat black. */
    .ai-home .hero {
        background:
            radial-gradient(120% 90% at 85% 12%, rgba(79, 70, 229, .28), rgba(79, 70, 229, 0) 55%),
            radial-gradient(120% 110% at 0% 100%, rgba(124, 61, 237, .20), rgba(124, 61, 237, 0) 60%),
            #07070c;
    }
    /* The mobile hero stacks copy over the top; use a bottom-up dark scrim. */
    .ai-home .hero-scrim {
        background: linear-gradient(180deg, rgba(7, 7, 12, .82) 0%, rgba(7, 7, 12, .62) 42%, rgba(7, 7, 12, .92) 100%);
    }
    /* Engineering: keep the dark beat, but the tall stacked card needs its own
       top-down scrim (the base theme switches to a vertical white wash). */
    .ai-home .engineering-card::after {
        background:
            linear-gradient(180deg, rgba(12, 12, 18, .96) 0%, rgba(12, 12, 18, .78) 46%, rgba(12, 12, 18, .42) 72%, rgba(12, 12, 18, .82) 100%);
    }
    /* Core technologies bento: tighten the panel and let the two feature
       cells share one row; the three standard cells stay three-up. */
    .ai-home .core-tech { padding: 36px 24px 32px; margin-top: 36px; }
    .ai-home .core-tech__cell--ct-waveguide,
    .ai-home .core-tech__cell--ct-voice { grid-column: span 6; }
}

@media (max-width: 680px) {
    .ai-home .core-tech { padding: 30px 18px 26px; border-radius: 14px; }
    .ai-home .core-tech__head { margin-bottom: 24px; }
    .ai-home .core-tech__grid { gap: 12px; }
    .ai-home .core-tech__cell,
    .ai-home .core-tech__cell--ct-waveguide,
    .ai-home .core-tech__cell--ct-voice,
    .ai-home .core-tech__cell--ct-video,
    .ai-home .core-tech__cell--ct-translate,
    .ai-home .core-tech__cell--ct-touch,
    .ai-home .core-tech__cell--ct-child { grid-column: 1 / -1; }
    .ai-home .core-tech__cell { min-height: 0; }
    .ai-home .core-tech__cell--ct-child {
        flex-wrap: wrap;
        gap: 14px;
        padding: 22px 60px 22px 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai-home *,
    .ai-home *::before,
    .ai-home *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .ai-rv { opacity: 1 !important; transform: none !important; }
    .ai-home .hero-image { transform: none !important; }
    .ai-home .core-tech__cell,
    .ai-home .core-tech__head,
    .ai-home .core-tech__eyebrow,
    .ai-home .core-tech__heading,
    .ai-home .core-tech__icon,
    .ai-home .core-tech__cell::before,
    .ai-home .core-tech__cell::after,
    .ai-home .core-tech::before,
    .ai-home .core-tech__aurora span,
    .ai-home .core-tech__viz,
    .ai-home .ctv [class*="ctv-"],
    .ai-home .ctv .ctv-sonar ellipse,
    .ai-home .ctv .ctv-wave path {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}