/* techNOTCH — motion, transitions and Arabic / RTL layer (loaded after styles.css) */

/* Cross-page transition (English <-> Arabic) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .45s cubic-bezier(.7,0,.3,1) both; }
::view-transition-new(root) { animation: vt-in .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.97); filter: blur(6px); } }
@keyframes vt-in { from { clip-path: polygon(0 0, 0 0, -20% 100%, 0 100%); } to { clip-path: polygon(0 0, 120% 0, 100% 100%, 0 100%); } }

/* Intro loader: logo, scan line, then a diagonal lift */
.loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--navy-950); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path 1s cubic-bezier(.77,0,.18,1); }
.loader__logo { position: relative; width: min(340px, 70vw); transition: transform .6s, opacity .4s; }
.loader__logo img { width: 100%; height: auto; opacity: 0; transform: translateY(14px); animation: loaderLogo .8s .1s cubic-bezier(.2,.8,.2,1) forwards; }
.loader__line { position: relative; height: 2px; margin-top: 26px; background: rgba(255,255,255,.08); overflow: hidden; border-radius: 2px; }
.loader__line i { position: absolute; inset: 0; background: var(--grad); transform: scaleX(0); transform-origin: left; animation: loaderLine 1s .25s cubic-bezier(.6,0,.2,1) forwards; box-shadow: 0 0 14px var(--brand-cyan); }
.loader::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 0 45%, rgba(11,224,255,.12) 50%, transparent 55% 100%); background-size: 250% 100%; animation: sweep 1.4s .2s ease-in-out forwards; }
.loader.is-done { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); pointer-events: none; }
.loader.is-done .loader__logo { transform: translateY(-40px); opacity: 0; }
@keyframes loaderLogo { to { opacity: 1; transform: none; } }
@keyframes loaderLine { to { transform: scaleX(1); } }
@keyframes sweep { from { background-position: 100% 0; } to { background-position: -50% 0; } }
html.no-loader .loader { display: none; }

/* Scroll progress */
.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; background: var(--grad); transform-origin: left; transform: scaleX(var(--p, 0)); box-shadow: 0 0 12px rgba(11,224,255,.7); }
[dir="rtl"] .progress { transform-origin: right; }

/* Hero entrance: words rise out of a mask */
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.hero h1 .w > span { display: inline-block; transform: translateY(115%) rotate(4deg); transition: transform 1s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 70ms + .15s); }
.hero h1 .grad .w > span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero h1 .grad { background: none; }
.is-ready .hero h1 .w > span { transform: none; }
.hero__copy > :not(h1) { opacity: 0; transform: translateY(20px); transition: opacity .9s, transform .9s cubic-bezier(.2,.8,.2,1); }
.is-ready .hero__copy > :not(h1) { opacity: 1; transform: none; }
.is-ready .hero__copy > .eyebrow { transition-delay: .05s; }
.is-ready .hero__copy > .lead { transition-delay: .55s; }
.is-ready .hero__copy > .hero__ctas { transition-delay: .7s; }
.is-ready .hero__copy > .hero__tags { transition-delay: .85s; }
.console-wrap { perspective: 1400px; }
.console-wrap .console { animation: none; opacity: 0; transform: rotateY(-22deg) rotateX(8deg) translateX(60px) scale(.94); transition: opacity 1.1s .5s, transform 1.4s .5s cubic-bezier(.2,.8,.2,1); }
[dir="rtl"] .console-wrap .console { transform: rotateY(22deg) rotateX(8deg) translateX(-60px) scale(.94); }
.is-ready .console-wrap .console { opacity: 1; transform: none; }
.console-wrap .console.is-floating { animation: float 7s ease-in-out infinite; transition: none; }

/* Brand chevrons (motif from the company profile cover) */
.chev { position: absolute; pointer-events: none; width: 340px; height: 340px; }
.chev i { position: absolute; inset: 0; border: 26px solid rgba(10,140,255,.16); border-left: 0; border-bottom: 0; transform: rotate(45deg); animation: chevDrift 9s ease-in-out infinite; }
.chev i:nth-child(2) { inset: 70px; border-color: rgba(11,224,255,.12); animation-delay: -3s; }
.chev i:nth-child(3) { inset: 140px; border-color: rgba(255,255,255,.08); animation-delay: -6s; }
[dir="rtl"] .chev { transform: scaleX(-1); }
@keyframes chevDrift { 50% { transform: rotate(45deg) translate(14px, -14px); } }
.hero .chev { inset-inline-end: -170px; bottom: -120px; }
.solutions .chev { inset-inline-end: -150px; top: 80px; opacity: .8; }
.stripes { position: absolute; top: 0; inset-inline-end: 8%; width: 260px; height: 140px; pointer-events: none; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.08) 0 10px, transparent 10px 26px); -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); animation: stripes 6s linear infinite; }
@keyframes stripes { to { background-position: 72px 0; } }

/* Angled section edges */
.solutions { clip-path: polygon(0 0, 100% 3.5vw, 100% 100%, 0 calc(100% - 3.5vw)); margin: -3.5vw 0; padding-top: calc(clamp(80px, 10vw, 130px) + 3.5vw); padding-bottom: calc(clamp(80px, 10vw, 130px) + 3.5vw); z-index: 1; }
.cta { clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0 100%); padding-top: calc(110px + 3vw); }
[dir="rtl"] .solutions { clip-path: polygon(0 3.5vw, 100% 0, 100% calc(100% - 3.5vw), 0 100%); }
[dir="rtl"] .cta { clip-path: polygon(0 0, 100% 3vw, 100% 100%, 0 100%); }

/* Reveal variants */
.reveal[data-anim="left"] { transform: translateX(-60px); }
.reveal[data-anim="right"] { transform: translateX(60px); }
[dir="rtl"] .reveal[data-anim="left"] { transform: translateX(60px); }
[dir="rtl"] .reveal[data-anim="right"] { transform: translateX(-60px); }
.reveal[data-anim="zoom"] { transform: scale(.9); }
.reveal[data-anim="blur"] { filter: blur(12px); transform: translateY(16px); transition-property: opacity, transform, filter; }
.reveal[data-anim="flip"] { transform: perspective(900px) rotateX(-28deg) translateY(30px); transform-origin: top center; }
.reveal.is-visible[data-anim] { transform: none; filter: none; }

/* Image wipe: a gradient bar sweeps across and the photo settles from a slight zoom */
.wipe { position: relative; overflow: hidden; border-radius: 24px; box-shadow: var(--shadow); }
.wipe img { clip-path: inset(0 100% 0 0); transform: scale(1.18); transition: clip-path 1.2s cubic-bezier(.77,0,.18,1) .3s, transform 1.8s cubic-bezier(.2,.8,.2,1) .3s; border-radius: 0 !important; box-shadow: none !important; }
[dir="rtl"] .wipe img { clip-path: inset(0 0 0 100%); }
.wipe::after { content: ""; position: absolute; inset: 0; background: var(--grad); transform: scaleX(0); transform-origin: left; z-index: 2; pointer-events: none; }
.wipe.is-visible img { clip-path: inset(0 0 0 0); transform: scale(1); }
.wipe.is-visible::after { animation: wipeBar 1.3s cubic-bezier(.77,0,.18,1) forwards; }
[dir="rtl"] .wipe.is-visible::after { animation-name: wipeBarRtl; }
@keyframes wipeBar { 0% { transform: scaleX(0); transform-origin: left; } 45% { transform: scaleX(1); transform-origin: left; } 55% { transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
@keyframes wipeBarRtl { 0% { transform: scaleX(0); transform-origin: right; } 45% { transform: scaleX(1); transform-origin: right; } 55% { transform: scaleX(1); transform-origin: left; } 100% { transform: scaleX(0); transform-origin: left; } }

/* Kicker line draws in */
.kicker::before { transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.2,.8,.2,1) .2s; }
[dir="rtl"] .kicker::before { transform-origin: right; }
.kicker.is-visible::before { transform: scaleX(1); }

/* Solution panels: intro slides in, cards flip up one after another */
.panel.is-active { animation: none; }
.solutions.is-seen .panel.is-active .panel__intro > div { animation: panelText .7s cubic-bezier(.2,.8,.2,1) both; }
.solutions.is-seen .panel.is-active .panel__intro > img { animation: panelImg 1.1s cubic-bezier(.77,0,.18,1) both; }
.solutions.is-seen .panel.is-active .card { animation: cardIn .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 55ms + .15s); }
.solutions:not(.is-seen) .panel .card, .solutions:not(.is-seen) .panel__intro > * { opacity: 0; }
@keyframes panelText { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } }
@keyframes panelImg { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes cardIn { from { opacity: 0; transform: perspective(800px) rotateX(-35deg) translateY(40px); } }

/* Cursor spotlight + 3D tilt on cards */
.card, .exp, .value, .mv__card { --mx: 50%; --my: 50%; }
.card::after, .mv__card::after, .value .spot { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(300px circle at var(--mx) var(--my), rgba(11,224,255,.16), transparent 60%); }
.mv__card { position: relative; }
.mv__card::after { background: radial-gradient(280px circle at var(--mx) var(--my), rgba(10,140,255,.13), transparent 60%); }
.card:hover::after, .mv__card:hover::after { opacity: 1; }
.tilt-on { transition: transform .15s ease-out, box-shadow .3s, background .3s, border-color .3s !important; }

/* Process: icons pop in sequence as the line fills */
.step svg { transform: scale(.6); opacity: 0; transition: transform .6s cubic-bezier(.3,1.6,.5,1), opacity .4s, border-color .4s, background .4s, color .4s; transition-delay: calc(var(--i, 0) * .3s + .2s); }
.steps.is-on .step svg { transform: none; opacity: 1; animation: ring 1.2s calc(var(--i, 0) * .3s + .5s) ease-out; }
@keyframes ring { from { box-shadow: 0 0 0 0 rgba(11,224,255,.5); } to { box-shadow: 0 0 0 18px rgba(11,224,255,0); } }
.step:hover svg { transition-delay: 0s; }

/* Parallax targets */
[data-parallax] { will-change: transform; }

/* Stat pop */
.stat.is-visible b { animation: statPop .9s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes statPop { from { transform: translateY(20px) scale(.85); opacity: 0; } }

/* Language switch */
.lang { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); color: #fff; font: 600 .86rem/1 var(--font-head); transition: border-color .25s, background .25s; white-space: nowrap; }
.lang:hover { border-color: var(--brand-cyan); background: rgba(11,224,255,.08); }
.lang svg { width: 1.05em; height: 1.05em; }
.lang--ar { font-family: "IBM Plex Sans Arabic", sans-serif; font-size: .95rem; }
.lang--en { font-family: "Montserrat", sans-serif; }

/* ===== Arabic / RTL ===== */
html[lang="ar"] { --font-head: "IBM Plex Sans Arabic", "Montserrat", sans-serif; --font-body: "IBM Plex Sans Arabic", "Inter", sans-serif; }
html[lang="ar"] body { line-height: 1.85; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 { letter-spacing: 0; line-height: 1.4; }
html[lang="ar"] .hero h1 { line-height: 1.35; font-weight: 700; letter-spacing: 0; }
html[lang="ar"] h2 { font-weight: 700; }
html[lang="ar"] .kicker, html[lang="ar"] .hero__tags li, html[lang="ar"] .values__title, html[lang="ar"] .tech__label, html[lang="ar"] .step__n, html[lang="ar"] .eyebrow { letter-spacing: 0; text-transform: none; }
html[lang="ar"] .kicker { font-size: .95rem; }
html[lang="ar"] .hero__tags li { font-size: .92rem; }
html[lang="ar"] .stat b, html[lang="ar"] .marquee__track span { font-family: "Montserrat", sans-serif; }
[dir="rtl"] .btn svg { transform: scaleX(-1); }
[dir="rtl"] .btn:hover svg { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .about__media::before { inset: 24px 24px -24px -24px; }
[dir="rtl"] .value::after { transform-origin: right; }
[dir="rtl"] .cta__bg { background: linear-gradient(270deg, rgba(4,15,36,.96) 25%, rgba(4,15,36,.55)), var(--img) center / cover; }

@media (max-width: 1080px) {
  .nav .lang { margin-inline-start: auto; }
}
@media (max-width: 860px) {
  .chev, .stripes { display: none; }
  .nav .lang + .nav__toggle { margin-inline-start: 4px; }
  .nav .nav__links + .lang { margin-inline-start: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
  .hero h1 .w > span, .hero__copy > :not(h1), .console-wrap .console, .step svg, .solutions .panel .card, .solutions .panel__intro > * { transform: none !important; opacity: 1 !important; }
  .wipe img { clip-path: none; transform: none; }
}
.cta__bg { inset: -15% 0; }
html, body { overflow-x: clip; }
html[lang="ar"] .hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.7rem); }

/* Paragraph lead marker ">>|" (Tamer, 2026-10-18). In Arabic, bidi mirrors it to "|<<" at the right edge. */
.lead, .about__copy > p:not(.kicker), .section__head > p:not(.kicker), .panel__intro p, .ind__copy > p:not(.kicker),
.cta p, .contact__info > p:not(.kicker), .mv__card p, .exp__body > p, .footer__grid p {
  --mark: #00b4cc;
}
.lead, .panel__intro p, .cta p, .footer__grid p, .section__head--light > p:not(.kicker) { --mark: var(--brand-cyan); }
.lead::before, .about__copy > p:not(.kicker)::before, .section__head > p:not(.kicker)::before, .panel__intro p::before,
.ind__copy > p:not(.kicker)::before, .cta p::before, .contact__info > p:not(.kicker)::before,
.mv__card p::before, .exp__body > p::before, .footer__grid p::before {
  /* the two squares from the techNOTCH logo, fading vertically from brand blue to turquoise (Tamer, 2026-10-18) */
  content: "";
  display: inline-block;
  width: .78em;
  height: 1.3em;
  vertical-align: -.24em;
  margin-inline-end: .6em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 116'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='116'%3E%3Cstop offset='.1' stop-color='%230a6cff'/%3E%3Cstop offset='.42' stop-color='%230a9cff'/%3E%3Cstop offset='.9' stop-color='%2312e2d6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='15' y='0' width='55' height='56' fill='url%28%23g%29'/%3E%3Crect x='0' y='74' width='42' height='42' fill='url%28%23g%29'/%3E%3C/svg%3E") no-repeat center / contain;
  filter: drop-shadow(0 0 6px rgba(11, 224, 255, .35));
}
[dir="rtl"] .lead::before, [dir="rtl"] .about__copy > p:not(.kicker)::before, [dir="rtl"] .section__head > p:not(.kicker)::before,
[dir="rtl"] .panel__intro p::before, [dir="rtl"] .ind__copy > p:not(.kicker)::before, [dir="rtl"] .cta p::before,
[dir="rtl"] .contact__info > p:not(.kicker)::before, [dir="rtl"] .mv__card p::before, [dir="rtl"] .exp__body > p::before,
[dir="rtl"] .footer__grid p::before { transform: scaleX(-1); }

/* Product showcase in the Hardware / Telecom / Smart building panels (Tamer, 2026-10-18: pictures must show what we supply) */
.panel__intro:has(.showcase) { grid-template-columns: .9fr 1.1fr; align-items: center; }
.showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.showcase figure { margin: 0; background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 14px 30px -18px rgba(0,0,0,.8); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; position: relative; }
.showcase figure::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .3s; }
.showcase img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; display: block; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.showcase figcaption { padding: 8px 10px 10px; font: 600 .78rem/1.3 var(--font-head); color: var(--navy-800); border-top: 1px solid #e8edf4; background: linear-gradient(180deg, #f7f9fc, #fff); }
.showcase figure:hover { transform: translateY(-5px); box-shadow: 0 22px 40px -18px rgba(11,224,255,.45); }
.showcase figure:hover img { transform: scale(1.07); }
.showcase figure:hover::after { box-shadow: inset 0 0 0 2px var(--brand-cyan); }
.solutions.is-seen .panel.is-active .showcase figure { animation: cardIn .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 70ms + .2s); }
.solutions:not(.is-seen) .showcase figure { opacity: 0; }
.solutions.is-seen .panel.is-active .panel__intro .showcase { animation: none; }
@media (max-width: 860px) {
  .panel__intro:has(.showcase) { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .showcase { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .solutions .showcase figure { opacity: 1 !important; transform: none !important; } }

/* ===== Cinematic layer (Tamer, 2026-10-18; warp adapted from ThreeUI Warp Field, MIT) ===== */
.hero__warp { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 2.2s ease; pointer-events: none; }
.hero.has-warp .hero__warp { opacity: 1; }
.hero.has-warp .hero__canvas { opacity: .28; }
.hero__vignette { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 85% 75% at 50% 45%, transparent 45%, rgba(2, 6, 16, .72) 100%),
    linear-gradient(90deg, rgba(4, 15, 36, .78) 0%, rgba(4, 15, 36, .35) 38%, transparent 62%),
    linear-gradient(180deg, transparent 70%, var(--navy-900) 100%); }
[dir="rtl"] .hero__vignette { background:
    radial-gradient(ellipse 85% 75% at 50% 45%, transparent 45%, rgba(2, 6, 16, .72) 100%),
    linear-gradient(270deg, rgba(4, 15, 36, .78) 0%, rgba(4, 15, 36, .35) 38%, transparent 62%),
    linear-gradient(180deg, transparent 70%, var(--navy-900) 100%); }

/* Scroll depth: the hero content drifts back and fades as you leave */
.hero__inner { transform: translateY(calc(var(--hp, 0) * 90px)) scale(calc(1 - var(--hp, 0) * .06)); opacity: calc(1 - var(--hp, 0) * 1.15); will-change: transform, opacity; }

/* Letterbox bars that open on arrival */
.letterbox { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.letterbox::before, .letterbox::after { content: ""; position: absolute; left: 0; right: 0; height: 11vh; background: #000; transition: transform 1.3s cubic-bezier(.77, 0, .18, 1); }
.letterbox::before { top: 0; } .letterbox::after { bottom: 0; }
.letterbox.is-open::before { transform: translateY(-100%); }
.letterbox.is-open::after { transform: translateY(100%); }

/* Film grain over the whole page, very light */
.grain { position: fixed; inset: -50%; z-index: 80; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* Light sweep across the gradient words of the headline */
.hero h1 .grad .w > span { background: linear-gradient(100deg, #0a8cff 0%, #0be0ff 38%, #eafcff 50%, #0be0ff 62%, #0a8cff 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 7s ease-in-out 2.4s infinite; }
@keyframes shine { 0% { background-position: 100% 0; } 45%, 100% { background-position: -60% 0; } }

/* Slow Ken Burns push on the call-to-action photo */
.cta__bg { animation: kenburns 26s ease-in-out infinite alternate; }
@keyframes kenburns { from { scale: 1.04; } to { scale: 1.16; } }

@media (prefers-reduced-motion: reduce) {
  .grain, .letterbox, .hero__warp { display: none; }
  .hero__inner { transform: none; opacity: 1; }
}
@media (max-width: 700px), (pointer: coarse) {
  .grain { display: none; }
}

/* Standard separator: a bold "|" (Tamer, 2026-10-18) */
.sep { font: 500 1.5em/0 "Montserrat", sans-serif; color: var(--brand-cyan); margin: 0 .3em; letter-spacing: 0; vertical-align: -.08em; }
.footer__bottom .sep { color: rgba(11, 224, 255, .7); }

/* ===== 3D hover on pictures (Tamer, 2026-10-18) ===== */
.fx3d { transform-style: preserve-3d; will-change: transform; }
.fx3d.fx-ready { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .4s, filter .4s !important; transition-delay: 0s !important; }
.fx3d.fx-ready .wipe img { transition: transform .6s cubic-bezier(.2, .8, .2, 1), clip-path 1.2s; }
.fx3d.is-hover .wipe img { transform: scale(1.1) translate(var(--px, 0), var(--py, 0)); }
.fx3d .wipe { transition: box-shadow .4s; }
.fx3d.is-hover .wipe { box-shadow: 0 45px 80px -30px rgba(6, 23, 51, .6), 0 0 0 1px rgba(11, 224, 255, .4), 0 0 40px -10px rgba(11, 224, 255, .35); }
.glare { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .4s; overflow: hidden;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .38), transparent 55%); mix-blend-mode: soft-light; }
.glare::after { content: ""; position: absolute; inset: -10%; background: linear-gradient(115deg, transparent 40%, rgba(11, 224, 255, .28) 50%, transparent 60%); transform: translateX(-110%); }
.fx3d.is-hover .glare { opacity: 1; }
.fx3d.is-hover .glare::after { animation: sweepX 1.1s cubic-bezier(.2, .8, .2, 1); }
@keyframes sweepX { to { transform: translateX(110%); } }
.about__media .badge-card { transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s; }
.fx3d.is-hover .badge-card { transform: translateZ(80px) scale(1.05); box-shadow: 0 35px 55px -20px rgba(6, 23, 51, .55); }
.fx3d.is-hover::before { transform: translateZ(-50px); transition: transform .5s; }
/* the floating cards bob with "translate" so "transform" is free for depth */
.ind__visual .floating { animation-name: floatY; transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s; }
@keyframes floatY { 50% { translate: 0 -10px; } }
.fx3d.is-hover .floating--a { transform: translateZ(100px) scale(1.06); }
.fx3d.is-hover .floating--b { transform: translateZ(70px) scale(1.04); }
.panel__intro > img.fx3d.is-hover { box-shadow: 0 35px 60px -25px rgba(11, 224, 255, .45); filter: saturate(1.15) brightness(1.06); }

/* Expertise photos: parallax zoom with a light sweep */
.exp__img { transition: scale .8s cubic-bezier(.2, .8, .2, 1), translate .4s ease-out, filter .5s; transform-origin: center; }
.exp:hover .exp__img { scale: 1.14; translate: calc((50% - var(--mx, 50%)) * .1) calc((50% - var(--my, 50%)) * .06); filter: saturate(1.2) contrast(1.05); }
.exp__img::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg, transparent 40%, rgba(11, 224, 255, .3) 50%, transparent 60%); transform: translateX(-110%); }
.exp:hover .exp__img::before { animation: sweepX 1.2s cubic-bezier(.2, .8, .2, 1); }
.exp { overflow: hidden; }

/* Product tiles: product moves inside the tile, glare follows the cursor */
.showcase figure { transform-style: preserve-3d; }
.showcase figure::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .35s; border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(11, 224, 255, .22), transparent 60%); }
.showcase figure:hover::before { opacity: 1; }
.showcase figure:hover img { transform: scale(1.12); translate: calc((50% - var(--mx, 50%)) * .1) calc((50% - var(--my, 50%)) * .1); }
.showcase img { transition: transform .5s cubic-bezier(.2, .8, .2, 1), translate .3s ease-out; }
.showcase figure:hover figcaption { background: linear-gradient(90deg, #e8f7ff, #e6fcfb); color: var(--navy-900); }

@media (prefers-reduced-motion: reduce) {
  .fx3d.is-hover .wipe img, .exp:hover .exp__img, .showcase figure:hover img { transform: none; scale: 1; translate: none; }
}