/* Upward Technologies: homepage (clean rebuild v5) */
@font-face{font-family:'Diodrum';font-weight:300;src:url(source/fonts/DiodrumArabic-Light.woff2) format('woff2'),url(https://www.preweb.site/projects/upwardai/wp-content/uploads/2025/09/DiodrumArabic-Light.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Diodrum';font-weight:400;src:url(source/fonts/DiodrumArabic-Regular.woff2) format('woff2'),url(https://www.preweb.site/projects/upwardai/wp-content/uploads/2025/09/DiodrumArabic-Regular.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Diodrum';font-weight:500;src:url(source/fonts/DiodrumArabic-Medium.woff2) format('woff2'),url(https://www.preweb.site/projects/upwardai/wp-content/uploads/2025/09/DiodrumArabic-Medium.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Diodrum';font-weight:600;src:url(source/fonts/DiodrumArabic-Semibold.woff2) format('woff2'),url(https://www.preweb.site/projects/upwardai/wp-content/uploads/2025/09/DiodrumArabic-Semibold.ttf) format('truetype');font-display:swap}
/* metric-matched local fallback so the late Diodrum swap barely reflows the hero (CLS): Arial scaled to Diodrum's width (size-adjust 95%), Diodrum's ascent/descent (798/202 per 1000) divided by that scale */
@font-face{font-family:'Diodrum Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Arial');font-weight:700;size-adjust:95%;ascent-override:84%;descent-override:21.3%;line-gap-override:0%}
@font-face{font-family:'Diodrum Fallback';src:local('Arial'),local('ArialMT');font-weight:400;size-adjust:95%;ascent-override:84%;descent-override:21.3%;line-gap-override:0%}
@font-face{font-family:'Diodrum';font-weight:700;src:url(source/fonts/DiodrumArabic-Bold.woff2) format('woff2'),url(https://www.preweb.site/projects/upwardai/wp-content/uploads/2025/09/DiodrumArabic-Bold.ttf) format('truetype');font-display:swap}

:root{
  --navy:#0F1E3C;--navy-2:#0D122B;--navy-3:#16264a;
  --cyan:#43BDED;--cyan-deep:#00B8D9;--gold:#D4A851;--gold-2:#E6C074;
  --ai-m:#A23983;--ai-md:#7B005A;--ai-g:#FDBF27;
  --ink:#0F1E3C;--body:#56657A;--muted:#7E8CA0;--line:#E6ECF3;
  --bg:#FFFFFF;--bg-soft:#F4F7FB;--bg-grad:linear-gradient(180deg,#EEF3FA,#E4ECF6);
  --on-dark:#AEBBCE;
  --shadow:0 24px 60px -24px rgba(15,30,60,.26);
  --shadow-lg:0 36px 80px -28px rgba(8,16,32,.5);
  --r:20px;--r-lg:28px;--ease:.3s cubic-bezier(.4,0,.2,1);--wrap:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Manrope',Arial,sans-serif;color:var(--body);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:'Diodrum','Diodrum Fallback','Manrope',sans-serif;color:var(--ink);line-height:1.14;font-weight:700;letter-spacing:-.005em}
a{text-decoration:none;color:inherit}
img,svg{display:block;max-width:100%}img{width:auto;height:auto}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding:104px 0;position:relative}
.section.dark{background:var(--navy);color:var(--on-dark)}
.section.soft{background:var(--bg-soft)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--gold);background:rgba(212,168,81,.12);padding:7px 16px;border-radius:999px}
.s-head{max-width:680px;margin:0 auto 54px;text-align:center}
.s-head h2{font-family:'Diodrum','Diodrum Fallback','Manrope',sans-serif;font-size:clamp(24px,3vw,38px);margin:16px 0 12px;font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:1.08}
/* Diodrum kerns L-T and L-Y about 4x tighter than any other pair, so they touch in uppercase; .kfix wraps that L */
.kfix{font-kerning:none}
.s-head h2 .accent{color:var(--cyan-deep)}
.section.dark h2,.section.dark h3,.section.dark h4,.section.dark .s-head h2{color:#fff}
.s-head p{font-size:17px;color:var(--body)}
.dark .s-head p{color:#9fb0c4}
.upward-w{height:.62em;width:auto;display:inline-block;vertical-align:baseline;margin:0 .14em;transform:translateY(.01em)}
/* odoo logo replaces the word "Odoo" everywhere */
.odoo-w{height:.92em;width:auto;display:inline-block;vertical-align:baseline;transform:translateY(.1em);margin:0 .12em}
.odoo-w.inv{filter:brightness(0) invert(1)}
.ai-mark{height:1.02em;width:auto;display:inline-block;vertical-align:-2px;margin:0 .1em}

.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;padding:14px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:var(--ease)}
.btn svg{width:17px;height:17px}.btn .odoo-w{filter:brightness(0) invert(1);height:.9em}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#2a1f08;box-shadow:0 12px 26px -10px rgba(212,168,81,.6)}
.btn-gold .odoo-w{filter:none}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 18px 34px -10px rgba(212,168,81,.7)}
.btn .btn-arrow{width:15px;flex:none;transition:transform .25s}.btn:hover .btn-arrow{transform:translateX(4px)}
.btn-ghost{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.26)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn-line{background:transparent;color:var(--cyan-deep);border-color:rgba(0,184,217,.4)}
.btn-line:hover{background:rgba(0,184,217,.08)}
/* lock button text color across every state (defensive vs any external :hover rule) */
.btn-gold,.btn-gold:hover,.btn-gold:focus{color:#2a1f08}
.btn-ghost,.btn-ghost:hover,.btn-ghost:focus{color:#fff}
.btn-line,.btn-line:hover,.btn-line:focus{color:var(--cyan-deep)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:#d6ecf6}
.link-arrow svg{width:16px;transition:var(--ease)}.link-arrow:hover svg{transform:translateX(4px)}

/* ---- Header: Variation C (utility bar scrolls away, sticky glass nav, morphing logo, underline, progress) ---- */
.upw-header{position:fixed;top:0;left:0;right:0;z-index:1000;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.ubar{height:40px;display:flex;align-items:center;justify-content:space-between;max-width:var(--wrap);margin:0 auto;padding:0 24px;font-size:12.5px;color:#aebbce}
.ubar .l{display:flex;gap:18px}.ubar a{color:#cfe9f4;text-decoration:none;margin-left:14px}
/* country flags as inline SVG (emoji flags render differently per OS, and not at all on Windows) */
svg.flag{display:inline-block;width:1.36em;height:.92em;vertical-align:-.12em;margin-right:6px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.18);overflow:hidden}
.mainnav{position:relative;transition:background .3s,box-shadow .3s,border-color .3s}
.mainnav-in{display:flex;align-items:center;justify-content:space-between;height:72px;max-width:var(--wrap);margin:0 auto;padding:0 24px;transition:height .3s}
/* Brand: the official wordmark is layered as seven clipped copies of the same image (U P W, the A
   triangle, its bar, R D). On scroll the letters fold into the triangle, then the triangle and bar
   glide into the tile and become the compact mark. The box keeps its size, so nothing else moves.
   Only transform and opacity animate. Clip and origin values are measured from logo-white-1 (800x204). */
.brand{position:relative;display:block;flex:none;width:118px;height:38px}
.brand .lt{position:absolute;left:0;top:4px;width:118px;height:30px;max-width:none;transition:transform .42s cubic-bezier(.65,0,.35,1),opacity .34s cubic-bezier(.5,0,.75,0)}
.brand .l-u{clip-path:inset(0 83.4% 0 0);transform-origin:8.5% 52%}
.brand .l-p{clip-path:inset(0 68.5% 0 16.6%);transform-origin:24.4% 52%}
.brand .l-w{clip-path:inset(0 48.8% 0 31.5%);transform-origin:41.5% 52%}
.brand .l-r{clip-path:inset(0 17.3% 0 67.4%);transform-origin:75.2% 52%}
.brand .l-d{clip-path:inset(0 0 0 82.8%);transform-origin:90.7% 52%}
.brand .l-t{clip-path:inset(0 32.6% 25% 51.2%)}/* left edge between the W's tip (51.12%) and the triangle (51.25%) */
.brand .l-b{clip-path:inset(75% 32.6% 0 51.2%)}
.brand .l-t,.brand .l-b{transform-origin:58.6% 52%;transition:transform .5s cubic-bezier(.16,1,.3,1)}
/* letters fold up beside the triangle (never over it) and fade with an ease-in, so no letter overlaps the mark.
   Way back (top of page): the mark returns first, then the letters unfold outward */
.brand .l-w,.brand .l-r{transition-delay:.16s}.brand .l-p{transition-delay:.2s}.brand .l-u,.brand .l-d{transition-delay:.24s}
.uicon{position:absolute;left:0;top:0;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);opacity:0;transform:scale(.6);transition:opacity .25s ease,transform .35s cubic-bezier(.16,1,.3,1)}
.menu{display:flex;align-items:center;gap:2px;list-style:none}
.menu>li>a{display:flex;align-items:center;gap:6px;color:#dbe6f3;font-weight:600;font-size:15px;padding:10px 14px;text-decoration:none;position:relative;transition:color .2s}
.menu>li>a::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .25s;border-radius:2px}
.menu>li>a:hover,.has-mega:has(>.mega-tg:hover)>a{color:#fff}.has-mega:is(:hover,:focus-within)>a::after,.menu>li>a:hover::after{transform:scaleX(1)}
.chev{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6;transition:var(--ease)}
.has-mega:is(:hover,.open):not(.hush)>a .chev{transform:rotate(-135deg)}
/* disclosure button for each mega panel: a transparent hit area laid over the link's chevron (negative margin = its own width),
   so the menu looks the same; keyboard users reach it right after the link and open the panel with Enter or Space */
.mega-tg{flex:none;width:34px;margin-left:-34px;padding:0;border:0;border-radius:8px;background:none;cursor:pointer}
.mega-tg:focus-visible{outline:2px solid var(--cyan);outline-offset:-4px}
.nav-cta{display:flex;align-items:center;gap:14px}
.cta-min{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-weight:600;font-size:14px;padding:9px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;text-decoration:none;transition:.25s}
.cta-min svg{width:14px;transition:.25s}.cta-min,.cta-min:hover,.cta-min:focus{color:#fff}.cta-min:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55)}.cta-min:hover svg{transform:translateX(3px)}
/* small phones: logo (118) + CTA (~135) + burger (46) + gaps no longer fit, so the CTA used to wrap onto two lines and touch the logo.
   Under 381px the CTA drops its arrow and some padding; under 341px it leaves the bar (the drawer and the hero both carry Contact Us) */
@media(max-width:380px){.nav-cta{gap:10px}.nav-cta .cta-min{padding:9px 14px}.nav-cta .cta-min svg{display:none}}
@media(max-width:340px){.nav-cta .cta-min{display:none}}
.prog{position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,var(--cyan),var(--gold));transition:width .1s;opacity:0}
.upw-header.scrolled{transform:translateY(-40px)}
.upw-header.scrolled .mainnav{background:rgba(13,18,43,.74);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 10px 30px -16px rgba(0,0,0,.6)}
.upw-header.scrolled .mainnav-in{height:56px}
.upw-header.scrolled .brand .lt{opacity:0;transition-property:transform,opacity;transition-duration:.42s,.2s;transition-timing-function:cubic-bezier(.65,0,.35,1),ease-out}
.upw-header.scrolled .l-u{transform:translateX(40.5%) scale(.2);transition-delay:.06s}
.upw-header.scrolled .l-p{transform:translateX(24.6%) scale(.2);transition-delay:.03s}
.upw-header.scrolled .l-w{transform:translateX(7.5%) scale(.2);transition-delay:0s}
.upw-header.scrolled .l-r{transform:translateX(-6.2%) scale(.2);transition-delay:0s}
.upw-header.scrolled .l-d{transform:translateX(-21.7%) scale(.2);transition-delay:.06s}
.upw-header.scrolled .brand .l-t,.upw-header.scrolled .brand .l-b{opacity:1;transform:translate(-42.5%,-2%) scale(1.2);transition:transform .5s cubic-bezier(.16,1,.3,1) .2s}
.upw-header.scrolled .uicon{opacity:1;transform:none;transition-delay:.2s}
/* entrance: the header opens with the same mark-to-wordmark move as scrolling back up (JS adds .intro-done after load) */
@media(prefers-reduced-motion:no-preference){
.js .upw-header:not(.intro-done) .brand .lt{opacity:0;transition-property:transform,opacity;transition-duration:.42s,.2s;transition-timing-function:cubic-bezier(.65,0,.35,1),ease-out}
.js .upw-header:not(.intro-done) .l-u{transform:translateX(40.5%) scale(.2);transition-delay:.06s}
.js .upw-header:not(.intro-done) .l-p{transform:translateX(24.6%) scale(.2);transition-delay:.03s}
.js .upw-header:not(.intro-done) .l-w{transform:translateX(7.5%) scale(.2);transition-delay:0s}
.js .upw-header:not(.intro-done) .l-r{transform:translateX(-6.2%) scale(.2);transition-delay:0s}
.js .upw-header:not(.intro-done) .l-d{transform:translateX(-21.7%) scale(.2);transition-delay:.06s}
.js .upw-header:not(.intro-done) .brand .l-t,.js .upw-header:not(.intro-done) .brand .l-b{opacity:1;transform:translate(-42.5%,-2%) scale(1.2);transition:transform .5s cubic-bezier(.16,1,.3,1) .2s}
.js .upw-header:not(.intro-done) .uicon{opacity:1;transform:none;transition-delay:.2s}
}

/* idle: every 6s the triangle lifts off its bar for a moment (individual `translate`, so it composes with the scroll transform) */
@media(prefers-reduced-motion:no-preference){
  .brand .l-t{animation:markLift 6s cubic-bezier(.45,0,.25,1) 2.5s infinite}
  @keyframes markLift{0%,78%,100%{translate:0 0}86%{translate:0 -9%}92%{translate:0 1%}}
}
.upw-header.scrolled .menu>li>a{font-size:14px}
.upw-header.scrolled .prog{opacity:1}
/* mega menu #3 (spotlight + list) */
.has-mega{position:static;display:flex;align-items:stretch}
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid #eef1f5;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(8px);transition:var(--ease);z-index:90}
.has-mega:is(:hover,.open):not(.hush) .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-in{max-width:var(--wrap);margin:0 auto;padding:24px;display:grid;grid-template-columns:300px 1fr;gap:24px}
.spot{border-radius:14px;overflow:hidden;position:relative;color:#fff;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;min-height:236px;background:var(--navy) center/cover no-repeat;text-decoration:none}
/* spotlight photos load only when their menu first opens: the script adds .bg-on on first hover or focus */
.spot.bg-on.sp-sol{background-image:url(source/mega-solutions.webp)}
.spot.bg-on.sp-res{background-image:url(source/mega-resources.webp)}
.spot.bg-on.sp-abt{background:url(source/saudi/mega-masmak.webp) right 14px top 16px/50% auto no-repeat,radial-gradient(240px 180px at 78% 24%,rgba(46,160,90,.30),transparent 70%),linear-gradient(160deg,#16264a,var(--navy-2))}/* new Saudi look: navy card + porcelain Masmak (same art as the About section) */
/* Products spotlight: no photo, navy with a brand-blue glow and the Upward AI mark */
.spot.sp-ai{background:radial-gradient(260px 200px at 78% 18%,rgba(67,189,237,.34),transparent 70%),linear-gradient(160deg,#16264a,var(--navy-2))}
.spot.sp-ai .ai-big{width:74px;height:auto;margin-bottom:auto;padding:12px;border-radius:16px;background:#fff;box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.mlist.c3{grid-template-columns:repeat(3,1fr)}
/* 360 product icons are detailed line art: give them a bigger white tile */
.mega-link .mi.pi{background:#fff;border:1px solid var(--line)}.mega-link .mi.pi img{width:26px}
.spot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,30,60,.2),rgba(13,18,43,.9))}
.spot>*{position:relative;z-index:2}
.spot .k{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);font-weight:700}
.spot h4{font-family:'Diodrum','Diodrum Fallback','Manrope',sans-serif;color:#fff;font-size:21px;margin:6px 0 8px}.spot p{color:#cdd9e8;font-size:13px;margin-bottom:14px}
.spot .sbtn{align-self:flex-start;background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#2a1f08;font-weight:700;font-size:13px;padding:9px 16px;border-radius:999px}
.mlist{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;align-content:center}
.mega-link{display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border-radius:11px;text-decoration:none;transition:.2s}
.mega-link:hover{background:var(--bg-soft)}
.mega-link .mi{flex:none;width:32px;height:32px;border-radius:9px;background:rgba(67,189,237,.12);color:var(--cyan-deep);display:flex;align-items:center;justify-content:center}
.mega-link .mi svg{width:16px}.mega-link .mi img{width:17px}
.mega-link b{display:block;color:var(--ink);font-size:14px;font-weight:700;line-height:1.25}.mega-link span{font-size:12px;color:var(--muted)}
/* burger + drawer */
.burger{display:none;flex-direction:column;gap:5px;width:46px;height:46px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.06);cursor:pointer;align-items:center;justify-content:center}
.burger span{width:20px;height:2px;background:#fff;border-radius:2px}
.scrim{position:fixed;inset:0;background:rgba(8,16,32,.6);opacity:0;visibility:hidden;transition:var(--ease);z-index:1100}.scrim.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(380px,87vw);background:var(--navy);transform:translateX(100%);visibility:hidden;transition:transform .4s cubic-bezier(.4,0,.2,1),visibility 0s linear .4s;z-index:1110;overflow-y:auto;padding:22px}.drawer.open{transform:translateX(0);visibility:visible;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.drawer-top img{height:28px}
.close-x{width:42px;height:42px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.06);color:#fff;font-size:24px;cursor:pointer}
.m-item{border-bottom:1px solid rgba(255,255,255,.1)}
.m-item>button,.m-item>a{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:none;color:#e6eef8;font-family:'Diodrum','Diodrum Fallback','Manrope',sans-serif;font-weight:600;font-size:16px;padding:16px 4px;cursor:pointer;text-align:left}
.m-sub{max-height:0;overflow:hidden;transition:max-height .35s}.m-sub a{display:block;color:#9fb0c4;font-size:14px;padding:9px 14px}
.m-item.open .m-sub{max-height:460px}.m-item.open .m-plus{transform:rotate(45deg)}.m-plus{color:var(--cyan);font-size:20px;transition:var(--ease)}

/* ---- Hero (v9 "Upward Engine", round 2 2026-10-19) ---- */
/* v8 background (calmer) + left copy; the right side is a motion-graphic video choreographed so one thing moves at a time,
   with real product links under it. Motion language: soft ease-out (--hv-ease), clear sequence, scroll-linked settle. */
.hero{--hv-ease:cubic-bezier(.16,1,.3,1);--hv-p:0;position:relative;background:var(--navy);color:#fff;overflow:hidden;padding:160px 0 120px;isolation:isolate}

/* background: drifting aurora + masked grid + particle canvas */
.hv-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hv-aurora{position:absolute;border-radius:50%;will-change:transform}
.hv-aurora.a1{width:1100px;height:760px;right:-260px;top:-300px;background:radial-gradient(closest-side,rgba(67,189,237,.26),transparent);}
.hv-aurora.a2{width:820px;height:640px;left:-300px;top:-80px;background:radial-gradient(closest-side,rgba(162,57,131,.18),transparent);}
.hv-aurora.a3{width:760px;height:520px;right:8%;bottom:-360px;background:radial-gradient(closest-side,rgba(212,168,81,.12),transparent);}
@keyframes hvDrift1{to{transform:translate3d(-60px,40px,0) scale(1.05)}}
@keyframes hvDrift2{to{transform:translate3d(70px,30px,0) scale(1.07)}}
.hv-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(circle at 72% 40%,#000,transparent 72%);mask-image:radial-gradient(circle at 72% 40%,#000,transparent 72%)}
.hv-field{position:absolute;inset:0;width:100%;height:100%;display:block}
.hv-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(180deg,transparent,var(--navy))}

.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:center}

/* ---- left column ---- */
/* declutter: headline first, one lead line, CTAs, then the credentials as one quiet proof row */
.gold-badge{font-weight:700;font-size:15px;color:var(--ink);letter-spacing:.01em}
.gold-badge .odoo-w{height:1.05em}

.hero h1{color:#fff;font-size:clamp(36px,4.4vw,58px);line-height:1.06;letter-spacing:-.012em;margin-bottom:34px;font-weight:700;max-width:11.5em}
.hero h1 .grad{background:linear-gradient(90deg,#43BDED,#8ad8f5 45%,#43BDED);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* each word rises out of its own clip box */
.hv-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .28em;margin:0 -.02em -.28em}/* Diodrum descenders reach ~.2em below the baseline: .14em clipped the p in Operations */
.hv-w>span{display:inline-block}

.hero-lead{font-size:17px;line-height:1.65;color:var(--on-dark);max-width:30em;margin-bottom:30px}
.hero h1 .odoo-w{height:.66em;transform:translateY(.02em)}
/* industries in the lead are live-linked to the product lit in the video */
.hv-ind{position:relative;white-space:nowrap;cursor:default}
.hv-ind::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--cyan),var(--gold));transform:scaleX(0);transform-origin:left}
.hv-ind.on{color:#fff}
.hv-ind.on::after{transform:scaleX(1)}

.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-cta .btn{padding:13px 24px}
/* credentials: one compact proof row under the CTAs */
.hv-proof{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;list-style:none;margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.09);max-width:34rem;font-size:13px;font-weight:600;color:#aebbce;line-height:1.3}
.hv-proof li{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.hv-proof .em{height:26px;width:auto}
.hv-proof .odoo-w{height:.95em;transform:translateY(.06em);margin:0}
.hv-proof svg{width:15px;flex:none}
.hero .btn-gold{position:relative;overflow:hidden}
.hero .btn-gold::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-160%) skewX(-18deg);pointer-events:none}
@keyframes hvSheen{from{transform:translateX(-160%) skewX(-18deg)}to{transform:translateX(330%) skewX(-18deg)}}

/* ---- right column: motion-graphic stage + product links, one composed group ---- */
.hv-visual{position:relative;min-width:0}
/* 3:2 frame with the AI core 45.8% from the top. The WebM and the poster carry alpha, so the background and particles show through.
   WebKit plays the MP4 (baked on a matched navy gradient) instead (.is-opaque): its edges are feathered away. */
.hv-stage{position:relative;width:116%;margin:0 -8%;aspect-ratio:3/2}
.hv-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;background:transparent;pointer-events:none}
.hv-video.is-opaque{-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 99%);mask-image:radial-gradient(closest-side,#000 70%,transparent 99%)}
/* invisible anchor at the AI core in the video: the particle field orbits around it */
.hv-stage .core{position:absolute;left:50%;top:45.8%;width:23%;aspect-ratio:1/1;transform:translate(-50%,-50%);pointer-events:none}
/* product links: real text + the official icon in white, synced to the product lit in the video */
.hv-prods{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:500px;margin:-9% auto 0}
.hv-prods a{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;overflow:hidden;font-size:13px;font-weight:600;line-height:1.2;color:#d5e2ef;white-space:nowrap;
  padding:8px 12px 8px 9px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hv-prods .pi{flex:none;width:18px;height:18px;object-fit:contain;opacity:.92}/* white line versions p360/*-w.webp (official art, navy lines recoloured white, fills transparent) */
.hv-prods a::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--cyan),var(--gold));transform:scaleX(0);transform-origin:left}
.hv-prods a:hover,.hv-prods a:focus-visible,.hv-prods a.on{color:#fff;border-color:rgba(230,192,116,.55);background:linear-gradient(180deg,rgba(67,189,237,.18),rgba(67,189,237,.08))}
.hv-prods a:hover .pi,.hv-prods a.on .pi{opacity:1}
.hv-prods a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ---- responsive ---- */
@media(max-width:992px){
  .hero{padding:120px 0 80px}
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .hv-stage{width:100%;max-width:620px;margin:0 auto}
  .hv-prods{margin-top:-7%}
}
@media(max-width:560px){
  .hero{padding:118px 0 72px}
  .hv-stage{width:calc(100% + 48px);margin:0 -24px}
  .hv-prods{gap:6px;margin-top:-6%}
  .hv-prods a{font-size:11.5px;min-height:40px;padding:8px 3px;gap:4px}.hv-prods .pi{width:14px;height:14px}
  .hv-aurora.a1{width:700px;height:560px}
  .hero-lead{font-size:16px;line-height:1.6;margin-bottom:24px}
  .hero-cta .btn{padding:13px 22px}
  .hv-proof{margin-top:26px;padding-top:16px;gap:8px 18px;font-size:12.5px}
}
@media(max-width:380px){.hv-prods a{font-size:11.5px;padding:8px 4px}.hv-prods .pi{display:none}}

/* ---- motion: only for visitors who have not asked for reduced motion.
   With reduce, the hero is the calm static frame above (no loops, no intro, canvas drawn once, video poster only). ---- */
@media(prefers-reduced-motion:no-preference){
  .hv-aurora.a1{animation:hvDrift1 34s ease-in-out infinite alternate}
  .hv-aurora.a2{animation:hvDrift2 40s ease-in-out infinite alternate}
  .hv-aurora.a3{animation:hvDrift1 46s ease-in-out infinite alternate-reverse}
  /* the button sheen plays once, after the intro has settled */
  .hero .btn-gold::after{animation:hvSheen 1.3s var(--hv-ease) 2.6s both}
  .hv-ind{transition:color .4s}.hv-ind::after{transition:transform .6s var(--hv-ease)}
  .hv-prods a{transition:color .4s,border-color .4s,background .4s,transform .45s cubic-bezier(.34,1.56,.64,1)}
  .hv-prods a:hover{transform:translate3d(0,-2px,0)}
  .hv-prods .pi{transition:opacity .4s}
  /* the active link fills a progress line for the 2 s its product is in the spotlight */
  .hv-prods a.on::after{animation:hvProg 2s linear both}
  @keyframes hvProg{to{transform:scaleX(1)}}
  /* intro choreography (CSS only, runs before JS): headline word by word (rise + focus), lead, buttons, proof row, then the visual */
  .js .hv-rise{animation:hvRise 1s var(--hv-ease) both}/* entrance only when JS runs: without JS the content shows at once */
  .hero-lead.hv-rise{animation-delay:.62s}.hero-cta.hv-rise{animation-delay:.76s}.hv-proof.hv-rise{animation-delay:.95s}
  @keyframes hvRise{from{opacity:0;transform:translate3d(0,16px,0)}}
  .hv-w>span{animation:hvLift 1.1s var(--hv-ease) both;animation-delay:calc(.18s + var(--i)*70ms)}
  @keyframes hvLift{from{transform:translate3d(0,70%,0);opacity:0;filter:blur(6px)}}
  .hero h1 .grad{animation:hvShine 2.4s ease-out 1s both}
  @keyframes hvShine{from{background-position:100% 0}to{background-position:-100% 0}}
  .hv-stage{animation:hvStageIn 1.6s var(--hv-ease) .45s both}
  @keyframes hvStageIn{from{opacity:0;transform:translate3d(0,28px,0) scale(.96)}}
  .js .hv-prods a{animation:hvRise .9s var(--hv-ease) backwards}   /* backwards fill: the hover lift transition stays free after the intro */
  .hv-prods a:nth-child(1){animation-delay:1s}.hv-prods a:nth-child(2){animation-delay:1.05s}.hv-prods a:nth-child(3){animation-delay:1.1s}
  .hv-prods a:nth-child(4){animation-delay:1.15s}.hv-prods a:nth-child(5){animation-delay:1.2s}.hv-prods a:nth-child(6){animation-delay:1.25s}
  /* scroll-linked settle (--hv-p 0..1, set by the hero script): the visual eases up and softens, the copy follows more slowly */
  .hv-visual{transform:translate3d(0,calc(var(--hv-p)*-56px),0) scale(calc(1 - var(--hv-p)*.05));opacity:calc(1 - var(--hv-p)*.55)}
  .hv-copy{transform:translate3d(0,calc(var(--hv-p)*-22px),0)}
}


/* ---- Stats ---- */
.stats{position:relative;z-index:5;margin-top:-58px}
.stats-card{background:#fff;border-radius:24px;box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:38px 40px}
.stat{text-align:center}
.stat b{display:block;font-family:'Diodrum','Diodrum Fallback','Manrope',sans-serif;font-weight:700;font-size:42px;color:var(--cyan-deep);line-height:1;margin-bottom:9px}
.stat span{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:#56657a;font-weight:700}

/* ---- Marquee (contained, seamless) ---- */
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;align-items:center;gap:72px;width:max-content;animation:marquee 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.client-logo{height:60px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.62;transition:var(--ease)}
.client-logo:hover{filter:none;opacity:1}

/* ---- Quick Access ---- */
.quick-grid{display:flex;flex-wrap:wrap;gap:10px}
.quick-tile{flex:1 1 92px;display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px 6px;text-align:center;background:none;border:none;border-radius:14px;text-decoration:none;transition:var(--ease)}
.quick-tile:hover{transform:translateY(-5px)}
.quick-tile .qi{height:46px;color:var(--cyan-deep);display:flex;align-items:center;justify-content:center;transition:var(--ease)}
.quick-tile .qi svg{width:38px}.quick-tile .qi img{height:40px;width:auto}
.quick-tile:hover .qi svg{filter:drop-shadow(0 8px 12px rgba(67,189,237,.5))}
.quick-tile span{font-family:'Diodrum','Diodrum Fallback','Manrope',sans-serif;font-weight:600;font-size:14.5px;color:var(--ink);position:relative}
.quick-tile>span:last-child::after{content:"";position:absolute;left:50%;right:50%;bottom:-6px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--gold));transition:var(--ease);border-radius:2px}
.quick-tile:hover>span:last-child::after{left:10%;right:10%}

/* ---- Cards ---- */
.grid{display:grid;gap:22px}.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}
.card{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;transition:var(--ease)}
.card h3{color:var(--ink)}.card p{color:var(--body)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.card .ico{height:48px;display:inline-flex;align-items:center;color:var(--cyan-deep);margin-bottom:14px;transition:var(--ease)}
.card:hover .ico{transform:translateY(-2px) scale(1.08)}
.card .ico svg{width:32px}.card .ico img{width:46px;height:46px;object-fit:contain}
.card h3{font-size:18px;margin-bottom:8px}.card p{font-size:14.5px}

/* ---- Odoo section (Option 1, high contrast) ---- */
.odoo-section{background:var(--bg-grad)}
.odoo-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:54px;border:1px solid #e9eef5}
.odoo-card .head{max-width:620px;margin-bottom:34px}
.odoo-card h2{font-size:clamp(28px,3.6vw,40px);margin:14px 0 10px}
.odoo-grid{display:grid;grid-template-columns:1fr 64px 1.05fr;gap:24px;align-items:stretch}
.scattered{background:var(--bg-soft);border:1px dashed #c9d4e2;border-radius:18px;padding:28px}
.scattered h4{color:#8a99ad;font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px;font-family:'Manrope',sans-serif;font-weight:700}
.scattered .chip2{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #e1e7ef;border-radius:10px;padding:9px 13px;font-size:13px;font-weight:600;color:#8493a6;margin:5px}
.scattered .chip2:nth-child(3){transform:rotate(-3deg)}.scattered .chip2:nth-child(5){transform:rotate(2.5deg)}.scattered .chip2:nth-child(7){transform:rotate(-1.5deg)}.scattered .chip2:nth-child(4){transform:rotate(2deg)}.scattered .chip2:nth-child(9){transform:rotate(-2.5deg)}.scattered .chip2:nth-child(11){transform:rotate(3deg)}.scattered .chip2:nth-child(12){transform:rotate(-1.5deg)}
.odoo-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--cyan-deep)}
.odoo-arrow svg{width:40px}.odoo-arrow small{font-size:11px;font-weight:700;color:#8a99ad;text-align:center;line-height:1.3}
.unified{background:var(--navy);border-radius:18px;padding:28px;color:#fff;position:relative;overflow:hidden}
.unified::before{content:"";position:absolute;inset:0;background:radial-gradient(360px 200px at 85% 0,rgba(67,189,237,.28),transparent 60%)}
.unified>*{position:relative;z-index:2}
.unified .uhead{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-family:'Diodrum','Diodrum Fallback','Manrope',sans-serif;font-weight:700;color:#fff;font-size:17px}
.umods{display:grid;grid-template-columns:1fr 1fr;gap:10px}@container (max-width:235px){.umods{grid-template-columns:1fr}}
.umod{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:11px 13px;font-size:14px;font-weight:600;color:#eaf1f8;transition:var(--ease)}
.umod img{width:18px}
.unified:hover .umod{border-color:rgba(67,189,237,.45)}
.umod:hover{background:rgba(67,189,237,.14);transform:translateY(-2px)}
.uband{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);flex-wrap:wrap}
.uband .g{display:flex;gap:26px}.uband b{display:block;font-family:'Diodrum','Diodrum Fallback','Manrope',sans-serif;font-size:22px;color:var(--gold)}.uband span{font-size:11px;color:#9fb0c4;text-transform:uppercase;letter-spacing:.05em}
/* Tier 3: elevated "Powered by Upward" band */
.upw-band{margin-top:22px;border-radius:18px;padding:22px 26px;background:linear-gradient(120deg,#12233f,#0d1a30);border:1px solid rgba(212,168,81,.42);display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;position:relative;overflow:hidden}
.upw-band::before{content:"";position:absolute;inset:0;background:radial-gradient(440px 170px at 0% 0,rgba(212,168,81,.18),transparent 60%);pointer-events:none}
.upw-band>*{position:relative;z-index:1}
.upw-tag{display:inline-block;font-family:'Diodrum','Diodrum Fallback','Manrope',sans-serif;font-weight:800;font-size:17px;background:linear-gradient(100deg,#F5DE9C,#D4A851);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.upw-band-l p{color:#c8d4e4;font-size:13.5px;margin-top:2px}
.upw-band-chips{display:flex;gap:10px;flex-wrap:wrap}
.ub-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);border:1px solid rgba(212,168,81,.35);color:#f0d49a;border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:700}
.ub-chip img{width:15px}
.upw-proof{text-align:center}.upw-proof b{display:block;font-family:'Diodrum','Diodrum Fallback','Manrope',sans-serif;font-size:26px;color:var(--gold);line-height:1}.upw-proof span{font-size:11px;color:#9fb0c4}
@media(max-width:700px){.upw-band{flex-direction:column;align-items:flex-start}}
/* three-tier flow (Before -> Odoo core -> Powered by Upward) */
.tier-flow{display:grid;grid-template-columns:1fr 46px 1fr 46px 1.05fr;gap:8px;align-items:stretch;margin-top:8px}
.tcard{border-radius:18px;padding:22px;display:flex;flex-direction:column}
.tc-before{background:var(--bg-soft);border:1px dashed #c9d4e2}
.tc-core{background:var(--navy);color:#fff;position:relative;overflow:hidden;container-type:inline-size}
.tc-core::before{content:"";position:absolute;inset:0;background:radial-gradient(320px 160px at 85% 0,rgba(67,189,237,.24),transparent 60%)}
.tc-upw{background:linear-gradient(125deg,#12233f,#0c1830);border:1px solid rgba(212,168,81,.5);color:#fff;position:relative;overflow:hidden}
.tc-upw::before{content:"";position:absolute;inset:0;background:radial-gradient(320px 170px at 12% 0,rgba(212,168,81,.2),transparent 60%)}
.tc-core>*,.tc-upw>*{position:relative;z-index:1}
.tcap{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.tc-core .tcap,.tc-upw .tcap{color:#9fb0c4}
.tnum{width:22px;height:22px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.tc-before .tnum{background:var(--navy);color:#fff}.tc-core .tnum{background:#fff;color:var(--navy)}.tc-upw .tnum{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#2a1f08}
.tcard h4{font-family:'Diodrum','Diodrum Fallback','Manrope',sans-serif;font-size:19px;margin-bottom:14px;display:flex;align-items:center;gap:6px}
.tc-before h4{color:var(--ink)}
/* "odoo core": inline flow, so the word sits on the baseline the .odoo-w rule calibrates for the wordmark (flex centering lifted it) */
.tc-core h4{display:block;color:#fff}
/* "Powered by" + logo: inline flow so the logo's letters sit on the text baseline (logo file has 36/204 empty px under the letters) */
.tcard h4.pw-h{display:block;color:#fff}
.pw-h img{display:inline;height:1em;width:auto;vertical-align:-.176em}
.tc-upw h4.gold-h{background:linear-gradient(100deg,#F5DE9C,#D4A851);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sc-chips{display:flex;flex-wrap:wrap;gap:7px}
.sc-chips .chip2{display:inline-flex;align-items:center;background:#fff;border:1px solid #e1e7ef;border-radius:10px;padding:8px 12px;font-size:12.5px;font-weight:600;color:#8493a6}
.tstats{display:flex;gap:22px;margin-top:auto;padding-top:16px}
.tstats b{display:block;font-family:'Diodrum','Diodrum Fallback','Manrope',sans-serif;font-size:22px;color:var(--gold);line-height:1}
.tstats span{font-size:10.5px;color:#9fb0c4;text-transform:uppercase;letter-spacing:.04em}
.ub-list{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.tproof{margin-top:auto;padding-top:16px}
.tproof b{font-family:'Diodrum','Diodrum Fallback','Manrope',sans-serif;font-size:26px;color:var(--gold);display:block;line-height:1}
.tproof span{font-size:11px;color:#9fb0c4}
.tarrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--cyan-deep)}
.tarrow svg{width:32px}.tarrow small{font-size:9.5px;font-weight:700;color:#8a99ad;text-align:center;line-height:1.3}
@media(max-width:900px){.tier-flow{grid-template-columns:1fr}.tarrow{padding:2px 0}.tarrow svg{transform:rotate(90deg)}}

/* ---- Upward AI (Option 3, boxed on light bg) ---- */
.ai-section{background:var(--bg-soft)}
/* navy panel with a brand-blue glow; the AI mark keeps its own colors, the panel does not borrow them */
.ai-card{position:relative;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(160deg,#0c1830,#101f37);border:1px solid rgba(67,189,237,.22);padding:56px;text-align:center}
.ai-card::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(67,189,237,.36),rgba(0,184,217,.12) 50%,transparent 72%);filter:blur(80px);opacity:.7;top:-180px;right:-120px}
.ai-card>*{position:relative;z-index:2}
.ai-tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);margin-bottom:14px}
.ai-card h2{color:#fff;font-family:'Manrope',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(26px,3.4vw,38px);margin-bottom:10px;letter-spacing:.01em}
.ai-card .lead{color:#c2cdda;font-size:17px;max-width:560px;margin:0 auto}
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:18px;align-items:center;margin-top:40px}
.stage{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:30px;text-align:center;transition:var(--ease)}
.stage:hover{transform:translateY(-6px);border-color:rgba(67,189,237,.45);box-shadow:0 24px 46px -24px #000}
.stage.mid{border-color:rgba(67,189,237,.42);background:rgba(67,189,237,.08)}
.stage.mid:hover{border-color:rgba(67,189,237,.7);box-shadow:0 0 60px -10px rgba(67,189,237,.45)}
.stage .ic{width:56px;height:56px;border-radius:15px;background:rgba(67,189,237,.14);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--cyan);transition:var(--ease)}
.stage:hover .ic{transform:scale(1.08)}
.stage.mid .ic{background:#fff;padding:8px}.stage.mid .ic img{width:100%}
.stage h4{color:#fff;font-size:18px;margin-bottom:6px}.stage p{color:#94a3b6;font-size:13px}
.flow-arrow{width:56px;height:2px;background:linear-gradient(90deg,rgba(67,189,237,.25),var(--cyan));position:relative}
.flow-arrow::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#bfeaf9;top:-3px;left:0;box-shadow:0 0 10px var(--cyan);animation:slide 2.2s linear infinite}
@keyframes slide{to{left:100%}}
@keyframes slideY{to{top:100%}}
.ai-chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:36px}
.aic{background:rgba(255,255,255,.04);border:1px solid rgba(67,189,237,.3);border-radius:11px;padding:11px 16px;font-size:14px;font-weight:600;color:#e8edf4;display:flex;gap:8px;align-items:center;transition:.25s;cursor:default}
.aic:hover{border-color:rgba(67,189,237,.6);background:rgba(67,189,237,.1);transform:translateY(-2px)}
.aic i{width:7px;height:7px;border-radius:50%;background:var(--cyan);display:inline-block}

/* ---- 360 industry products: invisible cards on white, uniform 3D models ---- */
.eco{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.e{position:relative;border-radius:var(--r);padding:32px 24px 28px;background:linear-gradient(180deg,#F7FAFE,#FFFFFF);border:1px solid var(--line);overflow:hidden;text-align:center;display:flex;flex-direction:column;align-items:center;text-decoration:none;transition:var(--ease)}
.e::before{content:"";position:absolute;top:5%;left:50%;width:74%;height:52%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(67,189,237,.30),transparent 68%);filter:blur(10px);z-index:0;transition:var(--ease)}
.e.g2::before{background:radial-gradient(circle,rgba(212,168,81,.34),transparent 68%)}
.e.g3::before{background:radial-gradient(circle,rgba(52,224,208,.32),transparent 68%)}
.e.g4::before{background:radial-gradient(circle,rgba(37,99,190,.24),transparent 68%)}
.e.g5::before{background:radial-gradient(circle,rgba(108,140,255,.30),transparent 68%)}
.e.g6::before{background:radial-gradient(circle,rgba(224,137,74,.30),transparent 68%)}
.e img.m{position:relative;z-index:1;width:auto;max-width:158px;max-height:150px;height:auto;display:block;margin:8px auto 18px;object-fit:contain;transition:transform .45s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 12px 18px rgba(15,30,60,.12))}
.e .ec{position:relative;z-index:1}
.e .et{font-family:'Manrope',sans-serif;font-weight:800;font-size:11.5px;letter-spacing:.13em;color:var(--cyan-deep);margin-bottom:5px}
.e h3{color:var(--ink);font-size:20px;margin-bottom:7px}
.e p{font-size:13.5px;color:var(--body);max-width:290px;margin:0 auto;line-height:1.55}
.e:hover{border-color:transparent;box-shadow:0 28px 52px -26px rgba(15,30,60,.5);transform:translateY(-6px)}
.e:hover::before{filter:blur(14px);top:2%}
.e:hover img.m{transform:translateY(-9px) scale(1.05)}
.e .gu-wrap{margin-top:10px}
.e .gu-badge{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:4px 11px;cursor:pointer;user-select:none}
.e .gu-badge img{height:15px;width:auto}
.gu-logo{height:13px;width:auto;flex:none}
.gu-chev{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--muted);transition:transform .25s;margin-left:1px}
.e .gu-wrap.open .gu-chev{transform:rotate(180deg)}
.e .gu-note{font-size:11.5px;color:var(--muted);max-width:290px;line-height:1.5;overflow:hidden;margin:8px auto 0;transition:max-height .3s ease,opacity .25s,margin-top .25s}
.js .e .gu-wrap:not(.open) .gu-note{max-height:0;opacity:0;margin-top:0}
.e .gu-wrap.open .gu-note{max-height:100px;opacity:1;margin-top:8px}

/* ---- Journey ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:34px 24px 26px;text-align:center;position:relative}
.step .num{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;font-family:'Manrope',sans-serif;font-weight:800;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;text-align:center;box-shadow:0 0 0 6px var(--bg-soft)}
.step .si{height:42px;margin:8px auto 14px;color:var(--gold);display:flex;align-items:center;justify-content:center;transition:var(--ease)}.step:hover .si{transform:translateY(-2px) scale(1.08)}.step .si svg{width:34px}
.step h4{font-size:17px;margin-bottom:8px}.step p{font-size:14px}

/* ---- Values ---- */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.value{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:32px}
.value .vi{height:40px;color:var(--cyan);display:inline-flex;align-items:center;margin-bottom:14px;transition:var(--ease)}.value:hover .vi{transform:translateY(-2px) scale(1.08)}.value .vi svg{width:32px}
.value h4{color:#fff;font-size:19px;margin-bottom:8px}.value p{font-size:14.5px;color:#9fb0c4}

/* industries pills */
.ind-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:1000px;margin:0 auto}
.ind-pill{display:inline-flex;align-items:center;gap:9px;padding:12px 19px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:700;font-size:14.5px;color:var(--ink);text-decoration:none;transition:var(--ease)}
.ind-pill svg{width:18px;height:18px;color:var(--cyan-deep);flex:none}
.ind-pill:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent;color:var(--cyan-deep)}
.ind-pill .t360{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.01em;padding:2px 7px;border-radius:999px;background:linear-gradient(180deg,rgba(212,168,81,.2),rgba(212,168,81,.08));border:1px solid rgba(212,168,81,.45);color:#a9802f}
.ind-cat+.ind-cat{margin-top:26px}
.ind-cat-h{text-align:center;font-family:'Diodrum','Diodrum Fallback','Manrope',sans-serif;font-weight:800;font-size:14px;letter-spacing:.03em;color:var(--ink);text-transform:uppercase;margin-bottom:16px}
.ind-cat-h span{display:block;text-transform:none;font-family:'Manrope',sans-serif;font-weight:500;font-size:12.5px;color:var(--muted);letter-spacing:0;margin-top:3px}
.ind-pill .gu{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.02em;padding:2px 6px;border-radius:999px;background:rgba(67,189,237,.12);border:1px solid rgba(67,189,237,.4);color:var(--cyan-deep)}
/* two-panel industries layout */
.ind-panels{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1000px;margin:0 auto}
.ind-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.ind-panel.prod{border-color:rgba(212,168,81,.4);background:linear-gradient(180deg,#fffdf8,#fff)}
.ind-rows{display:flex;flex-direction:column;gap:9px}
.ind-row{display:flex;align-items:center;gap:11px;padding:12px 15px;border-radius:12px;background:var(--bg-soft);font-weight:700;font-size:14.5px;color:var(--ink);text-decoration:none;transition:var(--ease)}
.ind-row:hover{background:#fff;box-shadow:var(--shadow);transform:translateX(3px)}
.ind-row>svg,.ind-row>img{width:24px;height:24px;color:var(--cyan-deep);flex:none;object-fit:contain}
.ind-row .rsp{margin-left:auto;display:flex;gap:6px;align-items:center;flex:none}
@media(max-width:820px){.ind-panels{grid-template-columns:1fr}}

/* ---- Locations v2: route story (presence-v2) ----
   Static by default (no JS, reduced motion): every skyline, label and the route line are fully visible.
   JS adds .loc2-ready (measured, mark placed) and, when motion is allowed, .loc2-motion (ghost states).
   Phones (vertical route): scroll-linked. Desktop (row): a guided tour plays by itself when the section is in view.
   Only opacity, transform, mask and a registered custom property animate: no layout shift. */
@property --l2d{syntax:'<percentage>';inherits:false;initial-value:-18%}
.loc2{--l2-ease:cubic-bezier(.16,1,.3,1);--l2-gap:28px;overflow:hidden}
.loc2 .s-head{margin-bottom:44px}
.loc2-stage{position:relative;max-width:1080px;margin:0 auto}
.loc2-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--l2-gap);position:relative}
.loc2-city{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:14px;outline:none}
.loc2-city:focus-visible{box-shadow:0 0 0 2px var(--navy-2),0 0 0 4px var(--cyan)}

/* skyline: the source art carries its own name + pin in the top 45%, so the frame shows only the skyline (bottom 230 of 426 rows) */
.loc2-sky{position:relative;width:100%;aspect-ratio:426/230;overflow:hidden;pointer-events:none}
.loc2-sky img{position:absolute;left:0;bottom:0;width:100%;height:auto;max-width:none}
.loc2-sky .base{opacity:.92}
.loc2-sky .lit{opacity:0;filter:drop-shadow(0 0 2px rgba(67,189,237,.95)) drop-shadow(0 0 9px rgba(67,189,237,.6))}

/* route: one segment per city, from its node to the next node */
.loc2-node{position:relative;width:100%;height:40px;display:flex;align-items:center;justify-content:center}
.loc2-node i{position:relative;z-index:1;width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 5px rgba(67,189,237,.14)}
.loc2-city.is-hq .loc2-node i{width:13px;height:13px;background:var(--gold);box-shadow:0 0 0 6px rgba(212,168,81,.16),0 0 22px rgba(212,168,81,.4)}
.loc2-seg{position:absolute;left:50%;top:50%;width:calc(100% + var(--l2-gap));height:2px;margin-top:-1px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.loc2-seg b{position:absolute;inset:0;background:linear-gradient(90deg,var(--cyan),rgba(67,189,237,.55));transform-origin:0 50%}

/* the official mark travels the route (decorative; hidden until JS has measured the nodes) */
.loc2-mark{position:absolute;left:0;top:0;z-index:2;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;display:none;align-items:center;justify-content:center;background:var(--navy-2);border:1px solid rgba(67,189,237,.5);box-shadow:0 0 0 6px rgba(67,189,237,.07),0 8px 28px rgba(67,189,237,.32);will-change:transform;pointer-events:none}
.loc2-mark img{width:20px;height:20px}
.loc2-ready .loc2-mark{display:flex}

/* one label per city: city, country, live local time */
.loc2-txt{display:flex;flex-direction:column;align-items:center}
.loc2-name{display:flex;align-items:center;gap:8px;font-size:17px;line-height:1.25;margin:0;color:#fff}
.loc2-hq{font-family:'Manrope',sans-serif;font-weight:800;font-size:9.5px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(212,168,81,.5);border-radius:999px;padding:4px 7px 3px}
.loc2-country{font-size:13px;line-height:1.4;color:#9fb0c4;margin:3px 0 0}
.loc2-time{display:block;min-height:1.45em;margin-top:5px;font-size:12px;line-height:1.45;color:#7f93ad;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.loc2-time b{color:#cfe3f4;font-weight:700}

/* motion states (only with JS and prefers-reduced-motion: no-preference) */
@media (prefers-reduced-motion:no-preference){
  .loc2-motion .loc2-sky .base{-webkit-mask-image:linear-gradient(to top,#000 var(--l2d),rgba(0,0,0,.13) calc(var(--l2d) + 18%));mask-image:linear-gradient(to top,#000 var(--l2d),rgba(0,0,0,.13) calc(var(--l2d) + 18%))}
  .loc2-motion .is-drawn .loc2-sky .base{animation:l2rise 1.35s var(--l2-ease) forwards}
  .loc2-motion .is-drawn .loc2-sky .lit{-webkit-mask-image:linear-gradient(100deg,transparent 38%,#000 50%,transparent 62%);mask-image:linear-gradient(100deg,transparent 38%,#000 50%,transparent 62%);-webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:l2light 1.5s cubic-bezier(.45,0,.25,1) .55s both}
  .loc2-motion .loc2-node i{transform:scale(.55);background:#33466b;box-shadow:0 0 0 0 rgba(67,189,237,0);transition:transform .6s var(--l2-ease),background-color .4s,box-shadow .6s var(--l2-ease)}
  .loc2-motion .is-reached .loc2-node i{transform:none;background:var(--cyan);box-shadow:0 0 0 5px rgba(67,189,237,.14)}
  .loc2-motion .is-hq.is-reached .loc2-node i{background:var(--gold);box-shadow:0 0 0 6px rgba(212,168,81,.16),0 0 22px rgba(212,168,81,.4)}
  .loc2-motion .loc2-txt{opacity:.45;transition:opacity .7s var(--l2-ease)}
  .loc2-motion .is-reached .loc2-txt,.loc2-motion .loc2-city:focus-visible .loc2-txt{opacity:1}
  /* desktop: after the guided tour the arrow rests at Berlin with a slow breathing glow */
  .loc2-motion.loc2-rest .loc2-mark{animation:l2glow 3.6s ease-in-out infinite}
}
@keyframes l2rise{to{--l2d:100%}}
@keyframes l2glow{0%,100%{box-shadow:0 0 0 6px rgba(67,189,237,.07),0 8px 28px rgba(67,189,237,.32)}50%{box-shadow:0 0 0 11px rgba(67,189,237,.13),0 8px 34px rgba(67,189,237,.5)}}
@keyframes l2light{0%{opacity:1;-webkit-mask-position:100% 0;mask-position:100% 0}80%{opacity:1}100%{opacity:0;-webkit-mask-position:0 0;mask-position:0 0}}

/* tablet: same composed row, tighter */
@media (max-width:1000px){.loc2{--l2-gap:16px}.loc2-name{font-size:15.5px}.loc2-country{font-size:12.5px}}

/* phones: vertical route down the left; each row = node | label | skyline */
@media (max-width:719px){
  .loc2{--l2-gap:10px}
  .loc2 .s-head{margin-bottom:30px}
  .loc2-list{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .loc2-city{display:grid;grid-template-columns:26px minmax(0,1fr) 46%;align-items:center;column-gap:14px;text-align:left}
  .loc2-node{grid-column:1;grid-row:1;align-self:stretch;width:auto;height:auto}
  .loc2-txt{grid-column:2;grid-row:1;align-items:flex-start}
  .loc2-sky{grid-column:3;grid-row:1}
  .loc2-seg{left:50%;top:50%;width:2px;height:calc(100% + var(--l2-gap));margin:0 0 0 -1px}
  .loc2-seg b{background:linear-gradient(180deg,var(--cyan),rgba(67,189,237,.55));transform-origin:50% 0}
  .loc2-name{font-size:16px}
  .loc2-country{margin-top:1px}
  .loc2-time{margin-top:2px}
  .loc2-mark{width:34px;height:34px;margin:-17px 0 0 -17px}
  .loc2-mark img{width:18px;height:18px}
}

/* ---- Trust ---- */
.trust-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:stretch}
.trust-photo{border-radius:var(--r);overflow:hidden;position:relative;min-height:340px}
.trust-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
/* award motion video (build/design/award-video) */
.trust-photo{background:#0D122B}
.award-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;display:block}/* the card is wider than 16:10 on desktop: crop only the empty top, the captions sit low */
.trust-photo .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px;background:linear-gradient(180deg,transparent,rgba(13,18,43,.9));color:#fff}
.trust-photo .cap b{font-family:'Diodrum','Diodrum Fallback','Manrope',sans-serif;font-size:18px;display:block}
.trust-photo .cap span{font-size:13px;color:#cdd9e8}
.iso-wrap{display:flex;flex-direction:column;gap:18px}
.iso-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.iso-badge{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 10px 11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:104px}
.iso-badge img{max-height:46px;width:auto;object-fit:contain}
.cert-cap{font-size:10.5px;font-weight:700;color:var(--body);text-align:center;line-height:1.3}
.awards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.awards-grid .ab{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 10px 11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:104px}
.awards-grid .ab img{max-height:46px;width:auto;object-fit:contain}

/* ---- Events CTA ---- */
.events-cta{position:relative;border-radius:var(--r-lg);overflow:hidden;color:#fff;padding:54px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:34px}
.events-cta{background:linear-gradient(125deg,var(--navy-2),#1a3a5e)}
.events-cta::after{content:"";position:absolute;inset:0;background:radial-gradient(520px 300px at 90% 10%,rgba(67,189,237,.22),transparent 60%)}
.events-cta>*{position:relative;z-index:2}
.events-cta h3{color:#fff;font-size:26px}.events-cta p{color:#cdd9e8;margin-top:6px;max-width:520px}

/* ---- Final CTA ---- */
.final{background:var(--navy);text-align:center;color:#fff;position:relative;overflow:hidden;padding-bottom:34px}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 400px at 50% 0,rgba(67,189,237,.2),transparent 60%)}
.final .wrap{position:relative;z-index:2}
.final h2{color:#fff;font-size:clamp(28px,4vw,46px);max-width:760px;margin:0 auto 18px}
.final p{color:var(--on-dark);max-width:560px;margin:0 auto 30px;font-size:18px}

/* ---- Footer (modern, big wordmark) ---- */
.footer{background:var(--navy-2);color:#9fb0c4;padding:0 0 28px;overflow:hidden}
.faq{max-width:840px;margin:0 auto;padding:90px 0 74px}
.faq h3{color:#fff;text-align:center;font-size:26px;margin-bottom:28px}
.faq-item{border:1px solid rgba(255,255,255,.1);border-radius:14px;margin-bottom:12px;overflow:hidden;background:rgba(255,255,255,.02)}
.faq-q{width:100%;background:none;border:none;color:#fff;font-family:'Diodrum','Diodrum Fallback','Manrope',sans-serif;font-weight:600;font-size:16px;text-align:left;padding:18px 22px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq-q .p{color:var(--cyan);font-size:22px;transition:var(--ease)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s}
.faq-a p{padding:6px 22px 22px;font-size:14.5px;line-height:1.7}
.faq-item.open{background:rgba(67,189,237,.06);border-color:rgba(67,189,237,.32)}
.faq-item.open .faq-q{color:#fff}
.faq-item.open .faq-a{max-height:260px}.faq-item.open .p{transform:rotate(45deg)}
.foot-cta{border-top:1px solid rgba(255,255,255,.08);padding:54px 0}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:30px;padding:48px 0 36px;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.foot-about>img{height:32px;margin-bottom:14px}.foot-about p{font-size:14px;max-width:280px}
.goldword{font-weight:700;background:linear-gradient(100deg,#B8862F,#F5DE9C 42%,#D4A851 58%,#EBCB7E);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.foot-trust{display:flex;gap:10px;margin-top:18px}
.foot-trust .ft{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px 12px;display:flex;align-items:center;justify-content:center}
.foot-trust img{height:38px;width:auto}
.footer h5{color:#fff;font-size:14px;margin-bottom:16px}
.footer ul{list-style:none}.footer li{margin-bottom:10px}.footer a{font-size:14px;transition:var(--ease)}.footer a:hover{color:var(--cyan)}
.social{display:flex;gap:10px;margin-top:18px}
.social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:#cbd6e6}
.social a:hover{background:var(--cyan);color:#fff}.social svg{width:18px}
.copy{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:22px;font-size:13px;color:#6f8298}.copy a:hover,.copy a:focus-visible{color:#fff}
/* Footer wordmark: UPW + the brand triangle as the A + RD. Letters are faint white, the mark is brand blue.
   On first view (motion allowed): letters rise, the bar draws, the triangle lifts onto it, then one light pass
   crosses the word. Hover lifts the triangle. Only transform/opacity animate, plus one background-position pass. */
.bigmark{display:flex;justify-content:center;align-items:baseline;font-family:'Diodrum','Diodrum Fallback','Manrope',sans-serif;font-weight:700;font-size:clamp(60px,11.5vw,220px);line-height:1.04;letter-spacing:.02em;white-space:nowrap;margin-top:16px;user-select:none;cursor:default}
.bm-w,.bm-a i{background-image:linear-gradient(105deg,transparent 42%,rgba(214,240,251,.55) 50%,transparent 58%),var(--bm-fill);background-size:260% 100%,100% 100%;background-position:130% 0,0 0;background-repeat:no-repeat}
.bm-w{padding-bottom:.22em;margin-bottom:-.22em;--bm-fill:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* the mark spans the cap height like the logo does (ico.png content is 93% of its height); .63em is the fallback */
.bm-a{position:relative;display:inline-block;width:.63em;height:.63em;width:1.07cap;height:1.07cap;margin:0 .02em}
.bm-a i{--bm-fill:linear-gradient(180deg,rgba(67,189,237,.62),rgba(67,189,237,.22));position:absolute;inset:0;-webkit-mask:url(source/ico.png) center/contain no-repeat;mask:url(source/ico.png) center/contain no-repeat}
.bm-a .bm-tri{clip-path:inset(0 0 13% 0);transition:translate .5s cubic-bezier(.34,1.56,.64,1)}
.bm-a .bm-bar{clip-path:inset(87% 0 0 0);transform-origin:50% 93%}
.bigmark:hover .bm-tri{translate:0 -7%}
@media(prefers-reduced-motion:no-preference){
  .js .bigmark:not(.in) .bm-w,.js .bigmark:not(.in) .bm-tri{opacity:0}
  .js .bigmark:not(.in) .bm-bar{transform:scaleX(0)}
  .bigmark.in .bm-w{animation:bmRise .9s cubic-bezier(.16,1,.3,1) both,bmPass 1.6s ease-in-out 1.15s both}
  .bigmark.in .bm-w:last-child{animation-delay:.12s,1.5s}
  .bigmark.in .bm-bar{animation:bmBar .55s cubic-bezier(.16,1,.3,1) .2s both,bmPass 1.6s ease-in-out 1.3s both}
  .bigmark.in .bm-tri{animation:bmLift .95s cubic-bezier(.34,1.4,.64,1) .42s both,bmPass 1.6s ease-in-out 1.3s both}
  @keyframes bmRise{from{opacity:0;transform:translateY(22%)}}
  @keyframes bmBar{from{transform:scaleX(0)}}
  @keyframes bmLift{from{opacity:0;transform:translateY(60%)}40%{opacity:1}}
  @keyframes bmPass{from{background-position:130% 0,0 0}to{background-position:-30% 0,0 0}}
}

/* hidden state only until revealed, so a revealed card's own :hover transform still applies */
.js [data-reveal]:not(.in):not(:focus-within){opacity:0;transform:translateY(22px);animation:revealUp .7s ease .05s both}
@keyframes revealUp{to{opacity:1;transform:none}}
/* perf: skip rendering + animating off-screen sections */
.section,.faq{content-visibility:auto;contain-intrinsic-size:auto 720px}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---- Responsive ---- */
@media(max-width:992px){
  .menu,.nav-cta .btn{display:none}.burger{display:flex}
  .values{gap:40px}
  .g4,.g3,.steps{grid-template-columns:repeat(2,1fr)}.values{grid-template-columns:repeat(2,1fr)}
  .quick-grid{grid-template-columns:repeat(3,1fr)}.stats-card{grid-template-columns:repeat(2,1fr);gap:28px}
  .odoo-card{padding:32px}.odoo-grid{grid-template-columns:1fr;gap:18px}.odoo-arrow svg{transform:rotate(90deg)}
  .flow{grid-template-columns:1fr}.flow-arrow{width:2px;height:44px;margin:6px auto;background:linear-gradient(180deg,rgba(67,189,237,.25),var(--cyan))}.flow-arrow::after{top:0;left:-3px;animation:slideY 2.2s linear infinite}
  .ai-card{padding:34px}
  .trust-grid{grid-template-columns:1fr}.trust-photo{aspect-ratio:16/10;min-height:0}.iso-grid{grid-template-columns:repeat(4,1fr)}
  .eco{grid-template-columns:1fr 1fr;grid-auto-rows:auto}.e1,.e2,.e3,.e4,.e5,.e6{grid-column:auto;grid-row:auto;min-height:200px}
  .foot-grid{grid-template-columns:1fr 1fr}.mega-in{grid-template-columns:1fr 1fr}.mega-feat{display:none}
}
/* card grids keep two columns down to 460px: one column at 461-560 made product/sector/case grids very tall */
@media(max-width:460px){.g4,.g3{grid-template-columns:1fr}}
@media(max-width:560px){
  .section{padding:64px 0}.steps,.quick-grid,.stats-card,.eco,.values{grid-template-columns:1fr}
  .iso-grid{grid-template-columns:repeat(2,1fr)}
  .events-cta{padding:32px}.awards-grid{grid-template-columns:repeat(2,1fr)}
  .ubar .r{display:none}.ubar .l{white-space:nowrap;gap:12px}.ubar .l .u-email{display:none}
}