/* BITNASR Liquid Glass WordPress Theme */
:root{
  --bg:#07090d;--bg2:#0c0f14;--line:rgba(255,255,255,.105);--line2:rgba(255,255,255,.18);
  --text:#f5f7fa;--soft:#a5adb9;--muted:#66707c;--container:1420px;--pad:24px;
  --radius:42px;--pill:999px;--ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body,h1,h2,h3,p{margin:0}
body{min-height:100vh;overflow-x:hidden;background:var(--bg);color:var(--text);font-family:"Inter",Arial,sans-serif;-webkit-font-smoothing:antialiased}
html[lang=ar] body{font-family:"IBM Plex Sans Arabic",Tahoma,sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.is-loading{overflow:hidden}
.container{width:min(calc(100% - var(--pad)*2),var(--container));margin-inline:auto}
.section{padding:120px 0;position:relative}
.section-label{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;color:#838c98;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
html[lang=ar] .section-label{letter-spacing:0}
.section-label:before{content:"";width:24px;height:1px;background:linear-gradient(90deg,#fff,transparent)}
h2{font-size:clamp(44px,6vw,88px);line-height:.95;letter-spacing:-.06em;font-weight:550}
h2>span{display:block}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3{letter-spacing:-.025em}
html[lang=ar] h2{line-height:1.08}
p{color:var(--soft);line-height:1.85}
.ltr-data,.ltr-data *,a[href^="tel:"],a[href^="mailto:"]{direction:ltr!important;unicode-bidi:isolate!important;font-family:"Inter",Arial,sans-serif!important;letter-spacing:0!important}

/* background */
.global-bg{position:fixed;inset:0;z-index:-5;overflow:hidden;pointer-events:none;background:radial-gradient(circle at 50% -10%,#171d25 0,#0c0f14 35%,#07090d 72%)}
.bg-grid{position:absolute;inset:0;opacity:.11;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:90px 90px;mask-image:linear-gradient(to bottom,black,transparent 82%)}
.bg-orb{position:absolute;border-radius:50%;filter:blur(30px)}
.bg-orb-a{width:48vw;height:48vw;left:-22vw;top:10vh;background:radial-gradient(circle,rgba(190,215,244,.06),transparent 68%)}
.bg-orb-b{width:42vw;height:42vw;right:-18vw;bottom:0;background:radial-gradient(circle,rgba(255,255,255,.05),transparent 68%)}
.bg-stars{position:absolute;inset:0;opacity:.14;background-image:radial-gradient(circle at 12% 18%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 76% 24%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 41% 72%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 90% 66%,#fff 0 1px,transparent 1.5px)}

/* glass */
.glass,.glass-mini,.glass-chip{position:relative;isolation:isolate;border:1px solid var(--line);background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 55%,rgba(255,255,255,.04)),rgba(8,11,15,.56);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 22px 60px rgba(0,0,0,.27);backdrop-filter:blur(24px) saturate(125%);-webkit-backdrop-filter:blur(24px) saturate(125%)}
.glass:before,.glass-mini:before,.glass-chip:before{content:"";position:absolute;inset:1px;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 14% 0%,rgba(255,255,255,.11),transparent 24%)}

/* header */
.site-header{position:fixed;top:18px;inset-inline:0;z-index:200;pointer-events:none;transition:.5s var(--ease)}
.site-header.is-hidden{transform:translateY(-130%);opacity:0}
.nav-glass{pointer-events:auto;width:min(calc(100% - 34px),1180px);min-height:68px;margin:auto;padding:9px 10px 9px 14px;border-radius:34px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px}
.nav-logo{width:128px}.desktop-nav{display:flex;justify-content:center;gap:2px}
.desktop-nav a{padding:10px 13px;border-radius:var(--pill);color:#a3abb5;font-size:11px;transition:.25s}
.desktop-nav a:hover{color:#fff;background:rgba(255,255,255,.055)}
.nav-actions{display:flex;gap:7px;align-items:center}.glass-mini{min-height:42px;border-radius:var(--pill)}
.language{position:relative}.language-trigger{padding:0 13px;display:flex;gap:5px;align-items:center;font-size:10px;font-weight:600}.language-trigger svg{width:14px;height:14px}
.language-menu{position:absolute;top:calc(100% + 10px);inset-inline-end:0;width:170px;padding:7px;border-radius:20px;opacity:0;visibility:hidden;transform:translateY(-7px) scale(.98);transition:.25s var(--ease)}
.language.is-open .language-menu{opacity:1;visibility:visible;transform:none}
.language-menu button{width:100%;padding:10px 11px;display:flex;justify-content:space-between;border-radius:13px;font-size:11px}.language-menu button:hover{background:rgba(255,255,255,.055)}.language-menu small{color:var(--muted)}
.nav-contact{padding:0 17px;display:grid;place-items:center;font-size:11px;font-weight:600}
.menu-toggle{width:42px;display:none;place-items:center}.menu-toggle i{position:absolute;width:15px;height:1px;background:#fff;transition:.25s}.menu-toggle i:first-child{transform:translateY(-3px)}.menu-toggle i:last-child{transform:translateY(3px)}.menu-toggle.is-active i:first-child{transform:rotate(45deg)}.menu-toggle.is-active i:last-child{transform:rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:170;padding:88px 13px 13px;display:grid;place-items:center;background:rgba(3,5,8,.75);backdrop-filter:blur(24px);opacity:0;visibility:hidden;pointer-events:none;transition:.35s var(--ease)}
.mobile-menu.is-open{opacity:1;visibility:visible;pointer-events:auto}.mobile-sheet{width:min(100%,680px);height:100%;border-radius:38px;padding:28px}.mobile-lang{display:flex;gap:7px}.mobile-lang button{padding:8px 11px;border:1px solid var(--line);border-radius:999px;color:#aab1ba;font-size:10px}
.mobile-sheet nav{margin-top:28px;display:flex;flex-direction:column}.mobile-sheet nav a{min-height:74px;display:grid;grid-template-columns:42px 1fr;align-items:center;border-bottom:1px solid var(--line)}.mobile-sheet nav span{color:var(--muted);font-size:10px}.mobile-sheet nav strong{font-size:clamp(32px,9vw,54px);line-height:1}

/* loader */
.preloader{position:fixed;inset:0;z-index:9999;background:#05070a;overflow:hidden;transition:opacity .75s var(--ease),visibility .75s var(--ease)}
.preloader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}.loader-space{position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,rgba(255,255,255,.035),transparent 30%),radial-gradient(circle at 50% 50%,#11161d 0,#080b0f 42%,#040507 78%)}
.loader-aurora{position:absolute;border-radius:50%;filter:blur(50px);opacity:.22}.loader-aurora-a{width:45vw;height:45vw;left:-18vw;top:10vh;background:radial-gradient(circle,#a9cfff22,transparent 68%)}.loader-aurora-b{width:40vw;height:40vw;right:-15vw;bottom:4vh;background:radial-gradient(circle,#ffffff14,transparent 68%)}
.orbital-loader-stage{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:min(980px,92vw);height:min(680px,72vh);display:grid;place-items:center}
.orbit-line{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(224,233,244,.17)}.orbit-line-outer{width:min(760px,72vw);height:min(430px,42vw);transform:translate(-50%,-50%) rotate(-4deg)}.orbit-line-inner{width:min(570px,57vw);height:min(310px,31vw);border-style:dashed;opacity:.7;transform:translate(-50%,-50%) rotate(8deg)}
.orbit-pulse{position:absolute;width:min(450px,48vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.055),transparent 70%)}
.orbit-track{position:absolute;left:50%;top:50%;width:1px;height:1px;z-index:3}.primary-orbit{animation:orbitPrimary 18s linear infinite}.secondary-orbit{animation:orbitSecondary 25s linear infinite reverse}
.orbit-item{position:absolute;left:0;top:0;transform:rotate(var(--a)) translateX(var(--r));transform-origin:0 0}.brand-upright-secondary{animation:orbitUprightSecondary 25s linear infinite}.brand-upright-primary{animation:orbitUprightPrimary 18s linear infinite reverse}
.brand-glass{width:108px;height:108px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 28% 18%,rgba(255,255,255,.18),transparent 28%),rgba(17,22,29,.74);border:1px solid rgba(255,255,255,.16);box-shadow:0 16px 34px rgba(0,0,0,.32);backdrop-filter:blur(18px)}.brand-glass.small{width:72px;height:72px}.brand-glass img{width:68%;max-height:54px;object-fit:contain;filter:invert(1) grayscale(1) brightness(1.4)}.orbit-featured .brand-glass{width:136px;height:136px;border-color:rgba(255,255,255,.24)}
.loader-logo-shell{position:relative;z-index:8;width:min(500px,52vw);min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center}.loader-logo-glow{position:absolute;width:110%;height:130%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%)}.loader-bitnasr-logo{position:relative;z-index:2;width:100%;max-height:145px;object-fit:contain}.loader-logo-shell>span{position:relative;z-index:2;margin-top:12px;color:#818b99;font-size:9px;letter-spacing:.28em}
.preloader-meta{position:absolute;z-index:10;left:50%;bottom:30px;transform:translateX(-50%);width:min(540px,calc(100% - 40px));display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;color:#838d99;font-size:10px}.preloader-line{height:2px;overflow:hidden;border-radius:10px;background:rgba(255,255,255,.08)}.preloader-line i{display:block;width:0;height:100%;background:linear-gradient(90deg,#737d88,#fff)}
@keyframes orbitPrimary{to{transform:rotate(360deg)}}@keyframes orbitSecondary{to{transform:rotate(360deg)}}@keyframes orbitUprightPrimary{to{transform:rotate(-360deg)}}@keyframes orbitUprightSecondary{to{transform:rotate(-360deg)}}

/* hero */
.hero{min-height:100svh;padding-top:120px;display:flex;flex-direction:column;overflow:hidden}.hero-grid{flex:1;display:grid;grid-template-columns:1.03fr .97fr;gap:70px;align-items:center}
.glass-chip{display:inline-flex;align-items:center;gap:9px;padding:9px 13px;border-radius:999px;color:#8e98a5;font-size:10px;letter-spacing:.12em;text-transform:uppercase}.glass-chip i{width:6px;height:6px;border-radius:50%;background:#dfe7f0}
.hero h1{margin-top:23px;font-size:clamp(62px,8.6vw,138px);line-height:.84;letter-spacing:-.08em;font-weight:540}.hero h1 span{display:block}.silver-text{color:transparent;background:linear-gradient(105deg,#fff,#a9b1bc 43%,#f5f6f8 72%,#7f8995);-webkit-background-clip:text;background-clip:text}.hero-copy>p{max-width:690px;margin-top:30px;font-size:clamp(15px,1.45vw,20px)}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}.button{min-height:54px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;font-size:12px;font-weight:600;transition:.3s var(--ease)}.button:hover{transform:translateY(-3px)}.button-white{color:#0a0c10;background:linear-gradient(145deg,#fff,#bec6d0)}.button-glass{color:#e9edf2;border:1px solid var(--line);background:rgba(255,255,255,.045);backdrop-filter:blur(18px)}
.hero-system{min-height:610px;position:relative;display:grid;place-items:center}.hero-orbit{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.11)}.hero-orbit-outer{width:560px;height:360px;transform:rotate(-8deg)}.hero-orbit-inner{width:410px;height:250px;transform:rotate(12deg);border-style:dashed;opacity:.7}.hero-logo-glass{width:min(440px,76%);min-height:270px;padding:36px;border-radius:44px;display:flex;flex-direction:column;align-items:center;justify-content:center}.hero-logo-glass img{width:92%}.hero-logo-glass small{margin-top:14px;color:#68727f;font-size:8px;letter-spacing:.22em}
.hero-brand{position:absolute;display:grid;place-items:center;border-radius:50%;transition:.3s var(--ease)}.hero-brand:hover{transform:scale(1.06)}.hero-brand img{width:64%;max-height:48px;object-fit:contain;filter:invert(1) grayscale(1) brightness(1.45)}.hero-brand-hp{width:118px;height:118px;top:10%;right:8%}.hero-brand-dyson{width:128px;height:128px;left:0;top:22%}.hero-brand-jbl{width:76px;height:76px;right:3%;bottom:17%}.hero-brand-lexar{width:78px;height:78px;left:12%;bottom:8%}

/* bigger brand strip */
.brand-strip{margin-top:28px;padding:28px 0;overflow:hidden;border-block:1px solid var(--line);background:rgba(255,255,255,.012)}
.brand-strip-track{display:flex;align-items:center;gap:70px;width:max-content;animation:marquee 34s linear infinite}.strip-brand{width:112px;height:36px;display:grid;place-items:center;opacity:.58;transition:.25s}.strip-brand:hover{opacity:1;transform:scale(1.08)}.strip-brand img{width:100%;max-height:34px;object-fit:contain;filter:invert(1) grayscale(1) brightness(1.35)}.strip-brand.priority{width:145px;height:44px;opacity:.78}.strip-brand.priority img{max-height:42px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* section / real-photo world cards */
.section-head{display:grid;grid-template-columns:1fr .68fr;gap:70px;align-items:end;margin-bottom:54px}.section-head p{max-width:560px;font-size:15px}
.world-grid{display:grid;grid-template-columns:1.16fr .84fr;grid-template-rows:repeat(2,430px);gap:18px}
.world-card{position:relative;overflow:hidden;padding:30px;border-radius:var(--radius);display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,43%);align-items:stretch;color:inherit;transition:.45s var(--ease)}
.world-card:hover{transform:translateY(-7px);border-color:var(--line2)}
.world-card.featured-card{border-color:rgba(255,255,255,.145);background:radial-gradient(circle at 70% 28%,rgba(255,255,255,.055),transparent 35%),linear-gradient(135deg,rgba(255,255,255,.085),rgba(255,255,255,.018)),rgba(7,10,14,.66)}
.card-number{position:absolute;top:27px;inset-inline-end:30px;color:#5e6773;font-size:9px}.world-copy{position:relative;z-index:3;align-self:start}.brand-row{height:45px;display:flex;gap:16px;align-items:center;margin-bottom:17px}.brand-row img{width:62px;max-height:24px;object-fit:contain;opacity:.72;filter:invert(1) grayscale(1) brightness(1.35)}.brand-row-featured img:first-child{width:82px;max-height:34px;opacity:1}.world-card h3{font-size:clamp(42px,5vw,70px);line-height:1;letter-spacing:-.055em}.world-card p{margin-top:8px;max-width:430px;font-size:13px}.showroom-hint{display:inline-flex;margin-top:14px;color:#d7dde4;font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.62}
.world-photo{align-self:stretch;display:grid;place-items:center;min-width:0;padding:12px;position:relative;z-index:2}.world-photo img{width:100%;height:100%;max-height:340px;object-fit:contain;object-position:center;filter:none!important}.world-photo.has-image:after{content:"";position:absolute;inset:8%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%);filter:blur(20px)}.photo-placeholder{display:grid;place-items:center;gap:14px;opacity:.34}.photo-placeholder img{width:120px;height:auto;filter:invert(1) grayscale(1) brightness(1.4)!important}.photo-placeholder small{font-size:8px;letter-spacing:.13em;color:#727c88}

/* RTL card safety: image and copy use separate grid columns; no overlap */
html[dir=rtl] .world-card{grid-template-columns:minmax(250px,43%) minmax(0,1fr)}
html[dir=rtl] .world-copy{grid-column:2;text-align:right}
html[dir=rtl] .world-photo{grid-column:1;grid-row:1}
html[dir=rtl] .brand-row{justify-content:flex-start}
html[dir=rtl] .world-card p{max-width:100%;padding-inline-end:0}
html[dir=rtl] .showroom-hint{direction:rtl}

/* focus */
.focus-panel{min-height:650px;overflow:hidden;padding:56px;border-radius:58px;display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}.focus-copy p{max-width:600px;margin-top:24px}.focus-brands{display:grid;grid-template-columns:1fr 1fr;gap:14px}.focus-brand{min-height:320px;padding:30px;border:1px solid var(--line);border-radius:34px;display:flex;flex-direction:column;justify-content:flex-end;background:rgba(255,255,255,.025);transition:.4s var(--ease)}.focus-brand:hover{transform:translateY(-6px);border-color:var(--line2)}.focus-brand img{width:72%;max-height:90px;margin:auto;object-fit:contain;filter:invert(1) grayscale(1) brightness(1.45)}.focus-brand:first-child img{width:42%}.focus-brand strong{font-size:19px}.focus-brand span{margin-top:6px;color:var(--muted);font-size:10px}

/* brand universe with richer hover */
.brand-universe{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.brand-tile{--mx:50%;--my:50%;min-height:190px;padding:24px;border-radius:28px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;transform-style:preserve-3d;transition:transform .22s ease-out,border-color .3s var(--ease),box-shadow .3s var(--ease)}.brand-tile:hover{border-color:rgba(255,255,255,.25);box-shadow:0 32px 70px rgba(0,0,0,.35)}.brand-tile img{position:relative;z-index:3;width:70%;max-height:62px;margin:auto;object-fit:contain;filter:invert(1) grayscale(1) brightness(1.4);transition:transform .35s var(--ease),filter .35s var(--ease)}.brand-tile:hover img{transform:translateZ(28px) scale(1.08);filter:invert(1) grayscale(1) brightness(1.75) drop-shadow(0 0 18px rgba(255,255,255,.12))}.brand-tile>span:last-child{position:relative;z-index:3;color:var(--muted);font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.brand-light{position:absolute!important;z-index:1!important;inset:-40%;pointer-events:none;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.16),transparent 24%);opacity:0;transition:opacity .3s}.brand-tile:hover .brand-light{opacity:1}.brand-sheen{position:absolute!important;z-index:2!important;top:-25%;bottom:-25%;left:-55%;width:38%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);transition:left .75s var(--ease);pointer-events:none}.brand-tile:hover .brand-sheen{left:130%}.brand-tile-featured{grid-row:span 2;min-height:392px;border-color:rgba(255,255,255,.16)}.brand-tile-featured img{max-height:110px}

/* trade */
.trade-panel{min-height:650px;padding:58px;border-radius:58px;display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:center}.trade-copy p{max-width:620px;margin-top:24px}.trade-visual{min-height:500px;position:relative;display:grid;place-items:center}.trade-globe{width:330px;height:330px;position:relative;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:radial-gradient(circle at 30% 18%,rgba(255,255,255,.09),transparent 22%),radial-gradient(circle at 55% 64%,rgba(255,255,255,.035),transparent 52%)}.latitude,.longitude{position:absolute;display:block;border:1px solid rgba(255,255,255,.09);border-radius:50%}.latitude{left:8%;right:8%;height:34%;top:33%}.lat-a{transform:translateY(-84px)}.lat-c{transform:translateY(84px)}.longitude{top:8%;bottom:8%;width:34%;left:33%}.lon-a{transform:translateX(-84px)}.lon-c{transform:translateX(84px)}.trade-globe strong{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#d6dce3;letter-spacing:.1em}.trade-node{position:absolute;padding:10px 13px;border-radius:999px;color:#9099a5;font-size:8px;letter-spacing:.12em}.node-import{top:12%;left:9%}.node-export{right:4%;top:30%}.node-wholesale{left:15%;bottom:13%}

/* company/contact */
.company-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start}.company-logo{width:min(360px,75%);margin-bottom:36px}.company-copy p{max-width:580px;margin-top:24px}.company-card{overflow:hidden;border-radius:38px}.detail-row{padding:21px 24px;display:grid;grid-template-columns:.42fr 1fr;gap:20px;border-bottom:1px solid var(--line)}.detail-row:last-child{border:0}.detail-row>span{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.09em}.detail-row strong{color:#d3d8de;font-size:12px;line-height:1.65}
.contact-section{padding:65px 0 120px}.contact-panel{min-height:520px;padding:60px;border-radius:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.contact-logo{width:min(420px,76%);margin-bottom:28px}.contact-panel h2{max-width:900px}.contact-panel>p{max-width:650px;margin-top:22px}.contact-actions{margin-top:30px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}

/* footer */
.footer{padding:52px 0 28px;border-top:1px solid var(--line)}.footer-top{display:flex;justify-content:space-between;gap:40px;align-items:center}.footer-logo{width:190px}.footer-brand-icons{display:flex;align-items:center;gap:26px}.footer-brand-icons img{width:68px;max-height:28px;object-fit:contain;opacity:.5;filter:invert(1) grayscale(1) brightness(1.35)}.footer-brand-icons .brand-priority{width:88px;opacity:.75}.footer-brand-icons .brand-dyson-footer{width:110px}.footer-bottom{margin-top:38px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#606975;font-size:9px}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}.reveal.is-visible{opacity:1;transform:none}

/* showroom */
.showroom-page{padding-top:90px}.showroom-hero{padding:70px 0 60px}.showroom-hero-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}.showroom-brand-panel{min-height:390px;padding:50px;border-radius:48px;display:grid;place-items:center}.showroom-brand-panel img{width:min(380px,78%);max-height:150px;object-fit:contain;filter:invert(1) grayscale(1) brightness(1.45)}.showroom-brand-panel.featured img{max-height:190px}.showroom-back{display:inline-flex;margin-bottom:20px;color:#7b8591;font-size:10px}.showroom-copy h1{font-size:clamp(58px,8vw,118px);line-height:.88;letter-spacing:-.075em}.showroom-copy p{max-width:670px;margin-top:24px}
.catalog-section{padding:40px 0 110px}.catalog-toolbar{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:34px}.catalog-toolbar h2{font-size:clamp(36px,5vw,62px)}.category-pills{display:flex;gap:7px;flex-wrap:wrap}.category-pills button{min-height:38px;padding:0 13px;border:1px solid var(--line);border-radius:999px;color:#8f98a3;font-size:9px;background:rgba(255,255,255,.025)}.category-pills button.active{color:#0a0c10;background:linear-gradient(145deg,#fff,#bdc5ce)}
.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.product-card{min-height:430px;padding:18px;border-radius:30px;display:flex;flex-direction:column;transition:.4s var(--ease)}.product-card:hover{transform:translateY(-6px);border-color:var(--line2)}.product-image{flex:1;min-height:285px;padding:18px;border-radius:22px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at 50% 46%,rgba(255,255,255,.05),transparent 58%),#0b0e12;border:1px solid rgba(255,255,255,.055)}.product-image>img{width:94%;height:94%;max-width:94%;max-height:94%;object-fit:contain;object-position:center;filter:none!important;background:transparent!important;transition:transform .45s var(--ease)}.product-card:hover .product-image>img{transform:scale(1.035)}.product-info{padding:18px 4px 4px}.product-info small{color:#66707b;font-size:8px;letter-spacing:.1em;text-transform:uppercase}.product-info h3{margin-top:6px;font-size:21px;font-weight:550}.product-info p{margin-top:6px;color:#78818c;font-size:10px}.product-image-empty{display:grid;place-items:center;gap:16px;opacity:.35}.product-image-empty img{width:130px;max-height:70px;object-fit:contain;filter:invert(1) grayscale(1) brightness(1.4)}.product-image-empty span{font-size:8px;letter-spacing:.12em}.empty-catalog{min-height:340px;border-radius:34px;padding:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.empty-catalog img{width:180px;max-height:75px;object-fit:contain;filter:invert(1) grayscale(1) brightness(1.4);opacity:.55}.empty-catalog h3{margin-top:28px;font-size:28px}.empty-catalog p{max-width:620px;margin-top:10px;font-size:12px}
.single-product-section{padding:150px 0 100px}.single-product-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.single-product-image{min-height:520px;padding:30px;border-radius:42px;display:grid;place-items:center}.single-product-image img{width:100%;height:100%;max-height:470px;object-fit:contain}.single-product-copy h1{font-size:clamp(44px,6vw,86px);line-height:1}.single-description{margin-top:24px;color:var(--soft);line-height:1.8}

/* desktop Arabic */
html[dir=rtl] .hero-copy,html[dir=rtl] .section-head,html[dir=rtl] .focus-copy,html[dir=rtl] .trade-copy,html[dir=rtl] .company-copy{text-align:right}
html[dir=rtl] .detail-row{text-align:right}
html[dir=rtl] .showroom-copy{text-align:right}

/* responsive */
@media(max-width:1120px){
 .hero-grid,.focus-panel,.trade-panel,.company-grid,.showroom-hero-grid,.single-product-grid{grid-template-columns:1fr}
 .section-head{grid-template-columns:1fr;gap:24px}
 .world-grid{grid-template-columns:1fr;grid-template-rows:none}.world-card{min-height:430px}
 .brand-universe{grid-template-columns:repeat(3,1fr)}.brand-tile-featured{grid-row:auto;min-height:230px}
 .catalog-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
 :root{--pad:16px}.section{padding:90px 0}
 .desktop-nav,.nav-contact,.language{display:none}.menu-toggle{display:grid}.nav-glass{width:calc(100% - 22px);min-height:60px;grid-template-columns:1fr auto;padding:8px 9px}.nav-logo{width:110px}
 .focus-brands{grid-template-columns:1fr}.footer-brand-icons{gap:16px}
}
@media(max-width:640px){
 :root{--pad:14px;--radius:28px}
 .section{padding:64px 0}.section-label{margin-bottom:12px;font-size:8px;letter-spacing:.13em}
 h2{font-size:clamp(32px,9.6vw,44px);line-height:1.02;letter-spacing:-.045em}
 .site-header{top:10px}.nav-glass{width:calc(100% - 20px);min-height:52px;border-radius:26px;padding:6px 7px 6px 11px}.nav-logo{width:94px}.menu-toggle{width:38px;min-height:38px}
 .hero{min-height:auto;padding-top:82px}.hero-grid{display:flex;flex-direction:column;gap:18px}.hero-copy{padding-top:22px}.glass-chip{padding:7px 10px;font-size:8px}.hero h1{margin-top:17px;font-size:clamp(43px,12.8vw,58px);line-height:.92}.hero-copy>p{margin-top:20px;font-size:13px}.hero-actions{margin-top:23px;gap:8px}.hero-actions .button{width:100%;min-height:46px;font-size:10px}
 html[lang=ar] .hero h1{font-size:clamp(38px,11.4vw,50px);line-height:1.12}
 .hero-system{min-height:325px}.hero-orbit-outer{width:310px;height:205px}.hero-orbit-inner{width:230px;height:145px}.hero-logo-glass{width:76%;min-height:165px;padding:20px;border-radius:27px}.hero-logo-glass small{font-size:6px}
 .hero-brand-hp{width:67px;height:67px;right:4%}.hero-brand-dyson{width:74px;height:74px;left:2%}.hero-brand-jbl,.hero-brand-lexar{width:49px;height:49px}
 .brand-strip{margin-top:18px;padding:19px 0}.brand-strip-track{gap:38px}.strip-brand{width:78px;height:26px}.strip-brand img{max-height:24px}.strip-brand.priority{width:105px;height:32px}.strip-brand.priority img{max-height:31px}
 .section-head{gap:16px;margin-bottom:28px}.section-head p{font-size:12px}
 .world-grid{gap:12px}.world-card{min-height:320px;padding:19px;border-radius:26px;grid-template-columns:minmax(0,1fr) 42%;}.world-card h3{font-size:34px}.world-card p{font-size:11px;line-height:1.65}.brand-row{height:32px;gap:10px;margin-bottom:11px}.brand-row img{width:47px;max-height:18px}.brand-row-featured img:first-child{width:57px;max-height:24px}.world-photo{padding:5px}.world-photo img{max-height:220px}.photo-placeholder img{width:75px}.showroom-hint{margin-top:9px;font-size:7px}
 html[dir=rtl] .world-card{grid-template-columns:42% minmax(0,1fr)}html[dir=rtl] .world-copy{grid-column:2}html[dir=rtl] .world-photo{grid-column:1}
 .focus-panel,.trade-panel{min-height:auto;padding:24px 18px;border-radius:30px;gap:28px}.focus-copy p,.trade-copy p{margin-top:15px;font-size:12px}.focus-brand{min-height:190px;padding:19px;border-radius:24px}
 .brand-universe{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.brand-tile,.brand-tile-featured{min-height:132px;padding:15px;border-radius:22px}.brand-tile img,.brand-tile-featured img{max-height:48px}.brand-tile>span:last-child{font-size:6.7px}.brand-tile:active{transform:scale(.975)!important;border-color:rgba(255,255,255,.24)}
 .trade-visual{min-height:300px}.trade-globe{width:190px;height:190px}.lat-a{transform:translateY(-48px)}.lat-c{transform:translateY(48px)}.lon-a{transform:translateX(-48px)}.lon-c{transform:translateX(48px)}.trade-node{padding:7px 9px;font-size:6px}
 .company-grid{gap:22px}.company-logo{width:min(250px,70%);margin-bottom:24px}.company-copy p{font-size:12px}.company-card{border-radius:26px}.detail-row{padding:15px 16px;grid-template-columns:1fr;gap:5px}.detail-row>span{font-size:7px}.detail-row strong{font-size:10px}
 .contact-section{padding:38px 0 70px}.contact-panel{min-height:440px;padding:32px 17px;border-radius:30px}.contact-logo{width:min(260px,72%);margin-bottom:20px}.contact-panel>p{font-size:12px}.contact-actions{width:100%;margin-top:22px}.contact-actions .button{width:100%}
 .footer{padding:35px 0 22px}.footer-top,.footer-bottom{flex-direction:column;align-items:flex-start}.footer-logo{width:145px}.footer-brand-icons img{width:45px;max-height:18px}.footer-brand-icons .brand-priority{width:58px}.footer-brand-icons .brand-dyson-footer{width:75px}.footer-bottom{font-size:7px}
 .orbital-loader-stage{width:100vw;height:58vh;top:45%;transform:translate(-50%,-50%) scale(.69)}.loader-logo-shell{width:70vw;min-height:160px}.brand-glass.small{width:55px;height:55px}.orbit-featured .brand-glass{width:90px;height:90px}.preloader-meta{width:calc(100% - 28px);bottom:18px;font-size:8px}
 .showroom-page{padding-top:70px}.showroom-hero{padding:40px 0 28px}.showroom-hero-grid{gap:18px}.showroom-brand-panel{min-height:190px;padding:24px;border-radius:28px}.showroom-brand-panel img{width:min(230px,70%);max-height:90px}.showroom-copy h1{font-size:clamp(43px,13vw,58px);line-height:.92}.showroom-copy p{margin-top:16px;font-size:12px}.catalog-section{padding:25px 0 70px}.catalog-toolbar{align-items:flex-start;flex-direction:column;gap:16px;margin-bottom:22px}.catalog-toolbar h2{font-size:34px}.category-pills{gap:5px}.category-pills button{min-height:34px;padding:0 10px;font-size:7px}
 .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.product-card{min-height:280px;padding:9px;border-radius:21px}.product-image{min-height:175px;padding:10px;border-radius:16px}.product-info{padding:12px 3px 3px}.product-info small{font-size:6px}.product-info h3{font-size:13px;line-height:1.3}.product-info p{font-size:7px}.empty-catalog{min-height:260px;padding:28px}.single-product-section{padding:110px 0 70px}.single-product-image{min-height:300px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}


/* ===========================
   FINAL POLISH
=========================== */

/* Subtle floating BITNASR hero card */
.hero-logo-glass{
  --hx:50%;
  --hy:50%;
  position:relative;
  overflow:hidden;
  transform-style:preserve-3d;
  animation:heroCardFloat 6.5s ease-in-out infinite;
  transition:transform .22s ease-out,border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.hero-logo-glass:before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:
    radial-gradient(circle at calc(50% + var(--hx)/12) calc(35% + var(--hy)/16),rgba(255,255,255,.12),transparent 27%),
    linear-gradient(120deg,rgba(255,255,255,.035),transparent 35%);
  opacity:.6;
}
.hero-logo-glass:hover{
  border-color:rgba(255,255,255,.19);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 32px 72px rgba(0,0,0,.34),
    0 0 40px rgba(213,225,240,.035);
}
.hero-logo-glass img{
  position:relative;
  z-index:2;
  transition:transform .35s var(--ease),filter .35s var(--ease);
}
.hero-logo-glass:hover img{
  transform:scale(1.018);
  filter:drop-shadow(0 0 18px rgba(255,255,255,.04));
}
@keyframes heroCardFloat{
  0%,100%{translate:0 0}
  50%{translate:0 -4px}
}

/* Premium trade network */
.trade-network-visual{
  min-height:520px;
}
.trade-network{
  width:min(600px,100%);
  aspect-ratio:1.45;
  border-radius:42px;
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(circle at 50% 54%,rgba(255,255,255,.055),transparent 22%),
    linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),
    rgba(7,10,14,.58);
}
.trade-network-grid{
  position:absolute;
  inset:0;
  opacity:.13;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at center,black,transparent 78%);
}
.trade-routes{
  position:absolute;
  inset:5% 4%;
  width:92%;
  height:90%;
  overflow:visible;
}
.route{
  fill:none;
  stroke:rgba(217,226,237,.2);
  stroke-width:1.1;
  stroke-linecap:round;
  stroke-dasharray:6 9;
  animation:tradeRoute 10s linear infinite;
}
.route-2{animation-delay:-2s}.route-3{animation-delay:-4s}.route-4{animation-delay:-6s}.route-5{animation-delay:-8s}
@keyframes tradeRoute{to{stroke-dashoffset:-120}}
.network-core{
  position:absolute;
  left:50%;top:52%;
  transform:translate(-50%,-50%);
  width:132px;height:132px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  background:
    radial-gradient(circle at 35% 25%,rgba(255,255,255,.12),transparent 35%),
    rgba(13,17,23,.86);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 0 0 14px rgba(255,255,255,.018),
    0 20px 40px rgba(0,0,0,.3);
}
.network-core strong{
  position:relative;z-index:2;
  font-size:24px;
  letter-spacing:-.03em;
}
.network-core small{
  position:relative;z-index:2;
  margin-top:4px;
  color:#77818d;
  font-size:7px;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.core-halo{
  position:absolute;
  inset:-22px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.07);
  animation:corePulse 3.4s ease-in-out infinite;
}
@keyframes corePulse{0%,100%{transform:scale(.95);opacity:.35}50%{transform:scale(1.05);opacity:1}}
.market-node{
  position:absolute;
  display:flex;
  align-items:center;
  gap:7px;
  color:#89939f;
  font-size:8px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.market-node i{
  width:8px;height:8px;border-radius:50%;
  background:#d9e0e8;
  box-shadow:0 0 0 5px rgba(255,255,255,.03),0 0 16px rgba(255,255,255,.12);
}
.market-europe{left:8%;top:18%}
.market-asia{right:8%;top:17%}
.market-africa{left:10%;bottom:14%}
.market-mena{right:9%;bottom:14%}
.market-global{left:49%;top:7%;transform:translateX(-50%)}
.trade-service{
  position:absolute;
  min-width:110px;
  padding:11px 13px;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.trade-service small{color:#65707c;font-size:7px}
.trade-service strong{font-size:10px}
.service-import{left:6%;top:42%}
.service-export{right:5%;top:40%}
.service-wholesale{right:9%;bottom:31%}

/* Cleaner showroom pages: brand intro + product cards only */
.showroom-minimal-head{
  padding:120px 0 28px;
}
.showroom-minimal-row{
  border-bottom:1px solid var(--line);
  padding-bottom:34px;
}
.showroom-minimal-brand{
  display:flex;
  align-items:center;
  gap:24px;
}
.showroom-mini-logo{
  width:118px;
  height:118px;
  flex:0 0 auto;
  border-radius:28px;
  display:grid;
  place-items:center;
}
.showroom-mini-logo.featured{
  width:138px;
  height:138px;
}
.showroom-mini-logo img{
  width:72%;
  max-height:62px;
  object-fit:contain;
  filter:invert(1) grayscale(1) brightness(1.45);
}
.showroom-minimal-copy h1{
  font-size:clamp(42px,6vw,82px);
  line-height:.95;
  letter-spacing:-.055em;
}
.showroom-minimal-copy p{
  max-width:680px;
  margin-top:10px;
  font-size:13px;
}
.catalog-section-clean{
  padding-top:36px;
}
.compact-toolbar{
  margin-bottom:26px;
}
.catalog-grid-showroom .product-card{
  min-height:390px;
}
.catalog-grid-showroom .product-image{
  min-height:250px;
}
.catalog-grid-showroom .product-info h3{
  font-size:19px;
}

/* Footer credit */
.footer-credit{
  margin-top:12px;
  color:#555e69;
  font-size:8px;
  letter-spacing:.06em;
}
.footer-credit strong{
  color:#929ba6;
  font-weight:600;
}

/* Mobile final pass */
@media(max-width:640px){
  .hero-logo-glass{
    animation-duration:7.5s;
  }

  .trade-network-visual{
    min-height:310px;
  }
  .trade-network{
    width:100%;
    aspect-ratio:1.08;
    border-radius:28px;
  }
  .trade-routes{
    inset:8% 5%;
    width:90%;
    height:84%;
  }
  .network-core{
    width:96px;height:96px;
  }
  .network-core strong{font-size:18px}
  .network-core small{font-size:5px}
  .market-node{font-size:5.8px;gap:4px}
  .market-node i{width:6px;height:6px}
  .market-europe{left:6%;top:17%}
  .market-asia{right:5%;top:17%}
  .market-africa{left:7%;bottom:12%}
  .market-mena{right:5%;bottom:12%}
  .market-global{top:5%}
  .trade-service{
    min-width:77px;
    padding:8px 9px;
    border-radius:14px;
  }
  .trade-service small{font-size:5px}
  .trade-service strong{font-size:7px}
  .service-import{left:3%;top:42%}
  .service-export{right:3%;top:40%}
  .service-wholesale{right:5%;bottom:29%}

  .showroom-minimal-head{
    padding:88px 0 20px;
  }
  .showroom-minimal-row{
    padding-bottom:22px;
  }
  .showroom-minimal-brand{
    align-items:flex-start;
    gap:14px;
  }
  .showroom-mini-logo,
  .showroom-mini-logo.featured{
    width:74px;height:74px;
    border-radius:20px;
  }
  .showroom-mini-logo img{
    max-height:38px;
  }
  .showroom-minimal-copy h1{
    font-size:34px;
    line-height:1;
  }
  .showroom-minimal-copy p{
    margin-top:7px;
    font-size:10px;
    line-height:1.65;
  }
  .showroom-back{
    margin-bottom:10px;
    font-size:7px;
  }
  .catalog-section-clean{
    padding-top:24px;
  }
  .catalog-grid-showroom{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .catalog-grid-showroom .product-card{
    min-height:245px;
  }
  .catalog-grid-showroom .product-image{
    min-height:145px;
  }
  .catalog-grid-showroom .product-info h3{
    font-size:12.5px;
  }
  .footer-credit{
    font-size:7px;
  }
}

@media(max-width:390px){
  .catalog-grid-showroom{
    grid-template-columns:1fr;
  }
  .catalog-grid-showroom .product-card{
    min-height:320px;
  }
  .catalog-grid-showroom .product-image{
    min-height:220px;
  }
}


/* =========================================================
   BRAND UNIVERSE 1.2 — automatic product imagery
   ========================================================= */
.brand-universe{
  grid-auto-flow:dense;
}
.brand-tile-v2{
  min-height:226px;
  isolation:isolate;
  padding:0;
  position:relative;
}
.brand-tile-v2.brand-tile-featured{
  min-height:320px;
}
.brand-tile-v2 .brand-tile-copy{
  position:relative;
  z-index:5;
  height:100%;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  pointer-events:none;
}
.brand-tile-v2 .brand-tile-logo{
  width:44%;
  min-width:90px;
  height:74px;
  display:flex;
  align-items:center;
}
.brand-tile-v2.brand-tile-featured .brand-tile-logo{
  width:46%;
  height:100px;
}
.brand-tile-v2 .brand-tile-logo img{
  width:auto;
  max-width:100%;
  max-height:54px;
  margin:0;
  object-fit:contain;
  filter:invert(1) grayscale(1) brightness(1.5);
  transform:none;
}
.brand-tile-v2.brand-tile-featured .brand-tile-logo img{
  max-height:72px;
}
.brand-tile-v2:hover .brand-tile-logo img{
  transform:translateZ(22px) scale(1.045);
}
.brand-tile-v2 .brand-tile-label{
  position:relative;
  z-index:5;
  color:#6f7985;
  font-size:8px;
  letter-spacing:.085em;
  text-transform:uppercase;
}
.brand-product-visual{
  position:absolute;
  z-index:3;
  right:-2%;
  top:4%;
  width:62%;
  height:88%;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  transition:transform .45s var(--ease),filter .45s var(--ease),opacity .35s var(--ease);
}
.brand-tile-featured .brand-product-visual{
  width:68%;
  right:-3%;
  top:2%;
  height:94%;
}
.brand-product-visual>img{
  width:94%;
  height:94%;
  max-height:none;
  object-fit:contain;
  object-position:center;
  filter:none!important;
  opacity:1;
  margin:0!important;
  transform:translate3d(0,0,0) scale(1);
  transition:transform .5s cubic-bezier(.2,.75,.2,1),filter .5s ease;
  position:relative;
  z-index:2;
}
.brand-tile-v2:hover .brand-product-visual>img{
  transform:translate3d(-5px,-3px,22px) scale(1.055);
  filter:drop-shadow(0 24px 28px rgba(0,0,0,.45))!important;
}
.brand-product-glow{
  position:absolute;
  z-index:1;
  width:70%;
  aspect-ratio:1;
  border-radius:50%;
  right:4%;
  top:16%;
  background:radial-gradient(circle,rgba(255,255,255,.10),rgba(255,255,255,.025) 38%,transparent 70%);
  filter:blur(10px);
  opacity:.52;
}
.brand-tile-v2:after{
  content:"";
  position:absolute;
  z-index:1;
  right:-12%;
  top:-24%;
  width:76%;
  aspect-ratio:1;
  border:1px solid rgba(255,255,255,.055);
  border-radius:50%;
  box-shadow:0 0 0 35px rgba(255,255,255,.012),0 0 0 80px rgba(255,255,255,.007);
  transition:transform .65s var(--ease),opacity .4s ease;
}
.brand-tile-v2:hover:after{
  transform:scale(1.07) rotate(7deg);
  opacity:.9;
}
.brand-feature-caption{
  position:absolute;
  right:20px;
  bottom:19px;
  z-index:6;
  max-width:48%;
  text-align:right;
  opacity:0;
  transform:translateY(7px);
  transition:opacity .28s ease,transform .28s ease;
  pointer-events:none;
}
.brand-feature-caption small,
.brand-feature-caption strong{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brand-feature-caption small{
  color:#68727e;
  font-size:6px;
  text-transform:uppercase;
  letter-spacing:.09em;
}
.brand-feature-caption strong{
  margin-top:3px;
  color:#abb3bc;
  font-size:8px;
  font-weight:500;
}
.brand-tile-v2:hover .brand-feature-caption{
  opacity:.85;
  transform:translateY(0);
}

/* Elegant fallback before a brand receives its first product */
.no-product-visual .brand-product-visual{
  opacity:.55;
}
.brand-product-orbit{
  width:130px;
  height:130px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:50%;
  position:absolute;
}
.brand-product-orbit:before,
.brand-product-orbit:after{
  content:"";
  position:absolute;
  inset:18%;
  border:1px solid rgba(255,255,255,.055);
  border-radius:50%;
  transform:rotate(60deg) scaleY(.45);
}
.brand-product-orbit:after{
  transform:rotate(-55deg) scaleY(.5);
}
.brand-product-placeholder{
  display:flex;
  gap:6px;
  align-items:flex-end;
}
.brand-product-placeholder i{
  display:block;
  width:5px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
}
.brand-product-placeholder i:nth-child(1){height:18px}
.brand-product-placeholder i:nth-child(2){height:34px}
.brand-product-placeholder i:nth-child(3){height:24px}

/* Arabic keeps the product and copy in safe, separate zones */
html[dir="rtl"] .brand-tile-v2 .brand-tile-copy{
  text-align:right;
}
html[dir="rtl"] .brand-product-visual{
  right:auto;
  left:-2%;
}
html[dir="rtl"] .brand-feature-caption{
  right:auto;
  left:20px;
  text-align:left;
}

/* Tablet */
@media(max-width:980px){
  .brand-tile-v2,
  .brand-tile-v2.brand-tile-featured{
    min-height:220px;
  }
  .brand-tile-v2 .brand-product-visual,
  .brand-tile-v2.brand-tile-featured .brand-product-visual{
    width:60%;
    height:86%;
    top:7%;
  }
  .brand-tile-v2 .brand-tile-copy{
    padding:19px;
  }
}

/* Mobile: intentionally redesigned, not a desktop shrink */
@media(max-width:640px){
  .brand-universe{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .brand-tile-v2,
  .brand-tile-v2.brand-tile-featured{
    min-height:176px;
    border-radius:22px;
  }
  .brand-tile-v2 .brand-tile-copy{
    padding:14px;
  }
  .brand-tile-v2 .brand-tile-logo,
  .brand-tile-v2.brand-tile-featured .brand-tile-logo{
    width:54%;
    min-width:0;
    height:47px;
  }
  .brand-tile-v2 .brand-tile-logo img,
  .brand-tile-v2.brand-tile-featured .brand-tile-logo img{
    max-width:100%;
    max-height:34px;
  }
  .brand-tile-v2 .brand-tile-label{
    font-size:5.7px;
    max-width:72%;
    line-height:1.4;
  }
  .brand-tile-v2 .brand-product-visual,
  .brand-tile-v2.brand-tile-featured .brand-product-visual{
    width:68%;
    height:69%;
    right:-9%;
    top:23%;
  }
  html[dir="rtl"] .brand-product-visual{
    right:auto;
    left:-9%;
  }
  .brand-product-visual>img{
    width:100%;
    height:100%;
  }
  .brand-tile-v2:after{
    width:92%;
    right:-33%;
    top:-13%;
  }
  .brand-feature-caption{
    display:none;
  }
  .brand-product-orbit{
    width:76px;height:76px;
  }
  .brand-tile-v2:active{
    transform:scale(.972)!important;
    border-color:rgba(255,255,255,.22);
  }
}

/* Very narrow phones stay usable */
@media(max-width:365px){
  .brand-universe{
    grid-template-columns:1fr;
  }
  .brand-tile-v2,
  .brand-tile-v2.brand-tile-featured{
    min-height:190px;
  }
  .brand-tile-v2 .brand-product-visual,
  .brand-tile-v2.brand-tile-featured .brand-product-visual{
    width:62%;
    right:-4%;
  }
}

/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){
  .brand-tile-v2,
  .brand-product-visual,
  .brand-product-visual>img,
  .hero-logo-glass,
  .route,
  .core-halo{
    animation:none!important;
    transition:none!important;
  }
}


/* =========================================================
   FINAL 1.3 POLISH
   ========================================================= */

/* Core strength: HP + Dyson + JBL/Harman */
.focus-brands-three{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.focus-brands-three .focus-brand{
  min-width:0;
}
.focus-logo-row{
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
}
.focus-logo-row img{
  max-width:92px;
  max-height:48px;
  object-fit:contain;
}
.focus-logo-row.dual-logos img{
  max-width:72px;
  max-height:34px;
}
.focus-brand-audio{
  background:
    radial-gradient(circle at 50% 20%,rgba(255,255,255,.035),transparent 42%),
    rgba(255,255,255,.015);
}

/* World cards: soft premium float/depth */
.world-grid{
  perspective:1400px;
}
.world-card{
  --wx:50%;
  --wy:50%;
  transform-style:preserve-3d;
  will-change:transform;
  transition:
    transform .42s cubic-bezier(.2,.75,.2,1),
    opacity .35s ease,
    border-color .35s ease,
    box-shadow .42s ease,
    filter .35s ease;
}
.world-card:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:7;
  opacity:0;
  background:
    radial-gradient(circle at var(--wx) var(--wy),rgba(255,255,255,.09),transparent 30%);
  transition:opacity .35s ease;
}
.world-card.is-world-active:before{
  opacity:.75;
}
.world-card.is-world-active{
  z-index:8;
  border-color:rgba(255,255,255,.22);
  box-shadow:
    0 34px 90px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 45px rgba(255,255,255,.025);
}
.world-card.is-world-active .world-photo{
  transform:translate3d(0,-5px,34px) scale(1.035);
}
.world-card .world-photo{
  transition:transform .48s cubic-bezier(.2,.75,.2,1),filter .4s ease;
  transform-style:preserve-3d;
}
.world-card.is-world-active .world-copy{
  transform:translateZ(18px);
}
.world-copy{
  transition:transform .42s cubic-bezier(.2,.75,.2,1);
}
@media(hover:hover) and (pointer:fine){
  .world-grid.has-active-card .world-card:not(.is-world-active){
    opacity:.73;
    filter:brightness(.82);
    transform:scale(.988);
  }
}

/* Brand product image rotator */
.brand-visual-stack{
  position:absolute;
  inset:0;
}
.brand-visual-frame{
  position:absolute!important;
  inset:0;
  width:94%!important;
  height:94%!important;
  margin:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:none!important;
  opacity:0!important;
  transform:translate3d(10px,7px,0) scale(.965)!important;
  transition:
    opacity .78s cubic-bezier(.2,.65,.2,1),
    transform .9s cubic-bezier(.2,.75,.2,1),
    filter .45s ease!important;
  pointer-events:none;
}
.brand-visual-frame.is-active{
  opacity:1!important;
  transform:translate3d(0,0,0) scale(1)!important;
}
.brand-visual-frame.is-leaving{
  opacity:0!important;
  transform:translate3d(-10px,-5px,0) scale(1.035)!important;
}
.brand-tile-v2:hover .brand-visual-frame.is-active{
  transform:translate3d(-5px,-3px,22px) scale(1.055)!important;
  filter:drop-shadow(0 24px 28px rgba(0,0,0,.45))!important;
}
.brand-tile-v2.has-product-visual .brand-product-visual{
  overflow:visible;
}

/* Trade network: Americas */
.market-americas{
  left:1.5%;
  top:50%;
  transform:translateY(-50%);
}
.route-6{
  animation-delay:-5s;
}

/* JBL is now one of the primary brand cards */
.brand-tile-v2[href*="/brand/jbl"]{
  border-color:rgba(255,255,255,.13);
}

/* mobile refinement */
@media(max-width:980px){
  .focus-brands-three{
    grid-template-columns:1fr;
  }
  .focus-brands-three .focus-brand{
    min-height:180px;
  }
}

@media(max-width:640px){
  .world-card{
    will-change:auto;
  }
  .world-card:active{
    transform:translateY(-3px) scale(.985)!important;
    border-color:rgba(255,255,255,.19);
  }
  .brand-visual-frame{
    width:100%!important;
    height:100%!important;
  }
  .market-americas{
    left:0;
    top:50%;
    transform:translateY(-50%) scale(.9);
    transform-origin:left center;
  }
  .focus-logo-row{
    min-height:58px;
  }
  .focus-logo-row img{
    max-width:74px;
    max-height:34px;
  }
  .focus-logo-row.dual-logos img{
    max-width:58px;
    max-height:26px;
  }
}

/* Extra narrow phones: keep trade network legible */
@media(max-width:390px){
  .market-americas{
    top:54%;
  }
  .market-americas span{
    display:none;
  }
}


/* =========================================================
   VERSION 1.4 — FINAL DESIGN PASS
   ========================================================= */

/* Core Strength — refined copy + logos only */
.focus-panel-v2{
  grid-template-columns:minmax(0,1.05fr) minmax(520px,.95fr);
  gap:48px;
  align-items:center;
}
.focus-copy-v2{
  max-width:700px;
}
.focus-copy-v2 h2{
  max-width:760px;
  font-size:clamp(54px,6.1vw,96px);
  line-height:.94;
  letter-spacing:-.06em;
  margin-top:22px;
}
.focus-copy-v2 .focus-lead{
  max-width:670px;
  font-size:15px;
  line-height:1.75;
  margin-top:26px;
  color:#9da6b1;
}
.focus-micro{
  margin-top:26px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  color:#59636f;
  font-size:7px;
  letter-spacing:.1em;
}
.focus-micro i{
  width:3px;
  height:3px;
  border-radius:50%;
  background:#76818d;
}
.focus-logos-only{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.focus-logo-card{
  min-height:270px;
  border-radius:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  position:relative;
  overflow:hidden;
  transition:
    transform .42s cubic-bezier(.2,.75,.2,1),
    border-color .32s ease,
    box-shadow .4s ease,
    background .35s ease;
}
.focus-logo-card:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.5;
  background:
    radial-gradient(circle at 50% 20%,rgba(255,255,255,.055),transparent 35%),
    linear-gradient(140deg,rgba(255,255,255,.025),transparent 55%);
}
.focus-logo-card img{
  position:relative;
  z-index:2;
  max-width:96px;
  max-height:62px;
  object-fit:contain;
  filter:invert(1) grayscale(1) brightness(1.45);
  transition:transform .38s cubic-bezier(.2,.75,.2,1),filter .35s ease;
}
.focus-logo-card:hover{
  transform:translateY(-8px) scale(1.018);
  border-color:rgba(255,255,255,.2);
  box-shadow:0 28px 65px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12);
}
.focus-logo-card:hover img{
  transform:scale(1.07);
  filter:invert(1) grayscale(1) brightness(1.7) drop-shadow(0 10px 24px rgba(255,255,255,.06));
}
.focus-logo-card-dual{
  flex-direction:column;
  gap:20px;
}
.focus-logo-card-dual img{
  max-width:76px;
  max-height:38px;
}
.focus-logo-divider{
  width:34px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
}

/* Brand Universe — stronger interactive showroom hover */
.brand-universe{
  perspective:1500px;
}
.brand-tile-v2{
  --mx:50%;
  --my:50%;
  --orb-x:0px;
  --orb-y:0px;
  transform-style:preserve-3d;
  will-change:transform;
}
.brand-tile-v2 .brand-sheen{
  position:absolute;
  inset:-30%;
  z-index:7;
  pointer-events:none;
  opacity:0;
  background:
    linear-gradient(115deg,
      transparent 34%,
      rgba(255,255,255,.02) 43%,
      rgba(255,255,255,.15) 49%,
      rgba(255,255,255,.025) 55%,
      transparent 64%);
  transform:translateX(-24%) rotate(8deg);
  transition:opacity .28s ease,transform .75s cubic-bezier(.2,.75,.2,1);
}
.brand-tile-v2 .brand-light{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:6;
  opacity:0;
  border-radius:inherit;
  background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.12),transparent 28%);
  transition:opacity .3s ease;
}
.brand-tile-v2.is-brand-active .brand-sheen{
  opacity:.8;
  transform:translateX(22%) rotate(8deg);
}
.brand-tile-v2.is-brand-active .brand-light{
  opacity:.75;
}
.brand-tile-v2.is-brand-active{
  z-index:20;
  border-color:rgba(255,255,255,.22);
  box-shadow:
    0 34px 80px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 46px rgba(255,255,255,.028);
}
.brand-tile-v2.is-brand-active .brand-tile-logo{
  transform:translateZ(30px);
}
.brand-tile-v2 .brand-tile-logo{
  transition:transform .4s cubic-bezier(.2,.75,.2,1);
}
.brand-tile-v2.is-brand-active .brand-product-visual{
  transform:translate3d(var(--orb-x),var(--orb-y),35px);
}
.brand-tile-v2.is-brand-active:after{
  transform:translate3d(var(--orb-x),var(--orb-y),20px) scale(1.09) rotate(8deg);
}
@media(hover:hover) and (pointer:fine){
  .brand-universe.has-brand-active .brand-tile-v2:not(.is-brand-active){
    opacity:.67;
    filter:brightness(.78);
    transform:scale(.986);
  }
}

/* Trade network — balanced Americas + Retail */
.market-americas{
  left:7%;
  top:58%;
  transform:none;
}
.service-import{
  left:7%;
  top:39%;
}
.service-export{
  right:5%;
  top:38%;
}
.service-wholesale{
  right:7%;
  bottom:25%;
}
.service-retail{
  left:8%;
  bottom:24%;
}
.service-retail,
.service-import,
.service-export,
.service-wholesale{
  transition:transform .3s ease,border-color .3s ease,background .3s ease;
}
.service-retail:hover,
.service-import:hover,
.service-export:hover,
.service-wholesale:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.045);
}
.route-6{
  stroke-dasharray:6 9;
}

/* Company info typewriter */
.typewrite-value{
  position:relative;
  min-height:1.2em;
}
.typewrite-value.is-waiting-type{
  color:transparent!important;
}
.typewrite-value.is-waiting-type a{
  color:transparent!important;
}
.typewrite-value.is-typing:after{
  content:"";
  display:inline-block;
  width:1px;
  height:.95em;
  margin-left:4px;
  vertical-align:-.08em;
  background:rgba(255,255,255,.7);
  animation:typeCursor .55s steps(1) infinite;
}
@keyframes typeCursor{
  50%{opacity:0}
}
.typewrite-value.is-typed{
  animation:typeRevealGlow .45s ease both;
}
@keyframes typeRevealGlow{
  from{text-shadow:0 0 12px rgba(255,255,255,.16)}
  to{text-shadow:none}
}

/* Contact panel — premium pattern + cursor tilt */
.contact-panel-v2{
  --cx:50%;
  --cy:50%;
  overflow:hidden;
  transform-style:preserve-3d;
  will-change:transform;
  transition:
    transform .25s ease-out,
    box-shadow .38s ease,
    border-color .32s ease;
}
.contact-panel-v2:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.34;
  background:
    radial-gradient(circle at var(--cx) var(--cy),rgba(255,255,255,.09),transparent 24%),
    repeating-radial-gradient(circle at 18% 32%,rgba(255,255,255,.028) 0 1px,transparent 1px 48px),
    linear-gradient(115deg,transparent 0 42%,rgba(255,255,255,.025) 42.2% 42.7%,transparent 43% 100%),
    linear-gradient(20deg,transparent 0 62%,rgba(255,255,255,.018) 62.2% 62.7%,transparent 63% 100%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.42));
}
.contact-panel-v2:after{
  content:"";
  position:absolute;
  inset:-22%;
  pointer-events:none;
  opacity:.14;
  background:
    conic-gradient(from 20deg at 50% 50%,transparent 0 23%,rgba(255,255,255,.08) 24%,transparent 25% 48%,rgba(255,255,255,.05) 49%,transparent 50% 100%);
  filter:blur(1px);
  transform:rotate(-7deg);
}
.contact-panel-v2>*{
  position:relative;
  z-index:3;
  transform:translateZ(12px);
}
.contact-panel-v2:hover{
  border-color:rgba(255,255,255,.2);
  box-shadow:
    0 40px 90px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 54px rgba(255,255,255,.025);
}
.contact-panel-v2 .contact-logo{
  transform:translateZ(28px);
}
.contact-panel-v2 h2{
  transform:translateZ(22px);
}
.contact-panel-v2 .contact-actions{
  transform:translateZ(18px);
}

/* Mobile final */
@media(max-width:980px){
  .focus-panel-v2{
    grid-template-columns:1fr;
    gap:30px;
  }
  .focus-copy-v2 h2{
    font-size:clamp(48px,10vw,76px);
  }
  .focus-logos-only{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .focus-logo-card{
    min-height:190px;
  }
}

@media(max-width:640px){
  .focus-panel-v2{
    gap:22px;
  }
  .focus-copy-v2 h2{
    font-size:39px;
    line-height:.98;
    margin-top:16px;
  }
  .focus-copy-v2 .focus-lead{
    font-size:11px;
    line-height:1.7;
    margin-top:18px;
  }
  .focus-micro{
    gap:7px;
    margin-top:17px;
    font-size:5.5px;
  }
  .focus-logos-only{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
  }
  .focus-logo-card{
    min-height:112px;
    border-radius:22px;
    padding:14px;
  }
  .focus-logo-card img{
    max-width:54px;
    max-height:34px;
  }
  .focus-logo-card-dual{
    gap:11px;
  }
  .focus-logo-card-dual img{
    max-width:43px;
    max-height:22px;
  }
  .focus-logo-divider{
    width:22px;
  }

  .market-americas{
    left:4%;
    top:59%;
    font-size:5.6px;
  }
  .service-import{
    left:4%;
    top:38%;
  }
  .service-export{
    right:3%;
    top:37%;
  }
  .service-wholesale{
    right:5%;
    bottom:21%;
  }
  .service-retail{
    left:5%;
    bottom:21%;
  }

  .contact-panel-v2{
    will-change:auto;
    transform:none!important;
  }
  .contact-panel-v2:before{
    opacity:.26;
  }

  .brand-tile-v2{
    will-change:auto;
  }
}

@media(max-width:390px){
  .focus-logos-only{
    grid-template-columns:1fr;
  }
  .focus-logo-card{
    min-height:96px;
  }

  .market-americas span{
    display:inline;
  }
  .market-americas{
    left:3%;
    top:61%;
  }
  .service-retail{
    left:4%;
    bottom:18%;
  }
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .typewrite-value.is-waiting-type{
    color:inherit!important;
  }
  .typewrite-value.is-waiting-type a{
    color:inherit!important;
  }
  .contact-panel-v2,
  .brand-tile-v2,
  .focus-logo-card{
    transition:none!important;
    transform:none!important;
  }
}


/* =========================================================
   VERSION 1.5 — HERO TRADE / LOGISTICS MOTION
   ========================================================= */
.hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.hero>.container,
.hero .brand-strip{
  position:relative;
  z-index:3;
}
.hero-trade-motion{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.42;
  overflow:hidden;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),rgba(0,0,0,.65) 72%,transparent 100%);
}
.hero-trade-motion:before{
  content:"";
  position:absolute;
  inset:-12% -8%;
  background:
    radial-gradient(circle at 18% 28%,rgba(255,255,255,.026),transparent 30%),
    radial-gradient(circle at 80% 38%,rgba(255,255,255,.022),transparent 30%),
    linear-gradient(115deg,transparent 0 48%,rgba(255,255,255,.018) 48.2% 48.5%,transparent 48.7% 100%);
  opacity:.75;
}
.trade-lane{
  position:absolute;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),rgba(255,255,255,.025),transparent);
  transform-origin:left center;
}
.trade-lane-a{
  width:58%;
  left:7%;
  top:23%;
  transform:rotate(-7deg);
}
.trade-lane-b{
  width:49%;
  left:43%;
  top:70%;
  transform:rotate(5deg);
}
.cargo{
  position:absolute;
  width:18px;
  height:10px;
  border-radius:2px;
  border:1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
  box-shadow:0 0 18px rgba(255,255,255,.015);
}
.cargo:before,
.cargo:after{
  content:"";
  position:absolute;
  bottom:-3px;
  width:3px;height:3px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
}
.cargo:before{left:3px}
.cargo:after{right:3px}
.cargo-a1{animation:cargoMoveA 18s linear infinite}
.cargo-a2{animation:cargoMoveA 18s linear infinite -6s}
.cargo-a3{animation:cargoMoveA 18s linear infinite -12s}
.cargo-b1{animation:cargoMoveB 21s linear infinite -3s}
.cargo-b2{animation:cargoMoveB 21s linear infinite -13s}
@keyframes cargoMoveA{
  from{left:-3%;transform:translateY(-5px) scale(.82);opacity:0}
  8%{opacity:.55}
  88%{opacity:.42}
  to{left:102%;transform:translateY(-5px) scale(.82);opacity:0}
}
@keyframes cargoMoveB{
  from{left:102%;transform:translateY(-5px) scale(.72);opacity:0}
  10%{opacity:.42}
  86%{opacity:.32}
  to{left:-4%;transform:translateY(-5px) scale(.72);opacity:0}
}
.trade-route-line{
  position:absolute;
  height:1px;
  opacity:.45;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.08) 0 4px,
      transparent 4px 12px
    );
  animation:routeDrift 12s linear infinite;
}
.route-line-1{width:28%;left:19%;top:55%;transform:rotate(11deg)}
.route-line-2{width:24%;right:10%;top:31%;transform:rotate(-15deg);animation-delay:-5s}
.route-line-3{width:18%;left:57%;top:49%;transform:rotate(4deg);animation-delay:-8s}
@keyframes routeDrift{
  to{background-position:120px 0}
}
.trade-node-dot{
  position:absolute;
  width:5px;height:5px;
  border-radius:50%;
  background:rgba(232,239,247,.48);
  box-shadow:
    0 0 0 5px rgba(255,255,255,.018),
    0 0 20px rgba(255,255,255,.08);
  animation:nodePulse 3.8s ease-in-out infinite;
}
.node-dot-1{left:18%;top:54%}
.node-dot-2{right:9%;top:31%;animation-delay:-1.2s}
.node-dot-3{left:74%;top:49%;animation-delay:-2.4s}
@keyframes nodePulse{
  0%,100%{transform:scale(.85);opacity:.28}
  50%{transform:scale(1.18);opacity:.72}
}

/* abstract port-crane silhouette; deliberately faint */
.trade-crane{
  position:absolute;
  right:5%;
  bottom:8%;
  width:170px;
  height:150px;
  opacity:.16;
  transform:scale(.9);
}
.crane-mast{
  position:absolute;
  right:32px;
  bottom:0;
  width:1px;
  height:125px;
  background:linear-gradient(to top,rgba(255,255,255,.11),rgba(255,255,255,.035));
}
.crane-arm{
  position:absolute;
  right:32px;
  top:22px;
  width:120px;
  height:1px;
  background:linear-gradient(to left,rgba(255,255,255,.1),rgba(255,255,255,.025));
  transform-origin:right center;
  transform:rotate(-4deg);
}
.crane-cable{
  position:absolute;
  right:104px;
  top:19px;
  width:1px;
  height:70px;
  background:rgba(255,255,255,.07);
  animation:craneCable 5.8s ease-in-out infinite;
}
.crane-load{
  position:absolute;
  right:88px;
  top:87px;
  width:30px;
  height:15px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  animation:craneLoad 5.8s ease-in-out infinite;
}
@keyframes craneCable{
  0%,100%{height:70px}
  50%{height:55px}
}
@keyframes craneLoad{
  0%,100%{top:87px;transform:translateX(0)}
  50%{top:72px;transform:translateX(-5px)}
}

/* Keep hero content crisp */
.hero-copy,
.hero-system{
  position:relative;
  z-index:3;
}

/* Mobile: simplify motion and reduce visual noise */
@media(max-width:640px){
  .hero-trade-motion{
    opacity:.25;
  }
  .trade-crane{
    width:110px;
    height:95px;
    right:-18px;
    bottom:11%;
    transform:scale(.72);
  }
  .trade-lane-a{
    width:74%;
    left:-6%;
    top:20%;
  }
  .trade-lane-b{
    width:66%;
    left:38%;
    top:76%;
  }
  .route-line-2,
  .route-line-3,
  .node-dot-2{
    display:none;
  }
  .cargo{
    width:14px;
    height:8px;
  }
}

/* Reduced motion accessibility */
@media(prefers-reduced-motion:reduce){
  .hero-trade-motion *,
  .hero-trade-motion *:before,
  .hero-trade-motion *:after{
    animation:none!important;
  }
  .hero-trade-motion{
    opacity:.18;
  }
}


/* =========================================================
   VERSION 1.6 — VISIBLE TRADE STORY IN HERO
   ========================================================= */
.hero-trade-motion-v2{
  z-index:1!important;
  opacity:.72!important;
  mix-blend-mode:screen;
}
.hero>.container,
.hero .brand-strip{
  z-index:4!important;
}
.hero-trade-motion-v2:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 74% 34%,rgba(255,255,255,.055),transparent 19%),
    radial-gradient(circle at 25% 72%,rgba(255,255,255,.035),transparent 22%);
}

/* ghost city / port skyline */
.trade-skyline{
  position:absolute;
  right:1%;
  bottom:7%;
  width:38%;
  height:22%;
  display:flex;
  align-items:flex-end;
  gap:5%;
  opacity:.15;
}
.trade-skyline span{
  display:block;
  flex:1;
  border:1px solid rgba(255,255,255,.14);
  border-bottom:0;
  background:linear-gradient(to top,rgba(255,255,255,.02),transparent);
}
.trade-skyline span:nth-child(1){height:34%}
.trade-skyline span:nth-child(2){height:58%}
.trade-skyline span:nth-child(3){height:86%}
.trade-skyline span:nth-child(4){height:49%}
.trade-skyline span:nth-child(5){height:68%}

/* long commercial routes */
.trade-route{
  position:absolute;
  height:1px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 5px,transparent 5px 14px);
  opacity:.45;
}
.route-top{
  width:49%;
  left:5%;
  top:18%;
  transform:rotate(-4deg);
}
.route-bottom{
  width:46%;
  right:4%;
  bottom:20%;
  transform:rotate(4deg);
}
.route-dot{
  position:absolute;
  top:-2px;
  width:5px;height:5px;
  border-radius:50%;
  background:rgba(245,248,252,.72);
  box-shadow:0 0 18px rgba(255,255,255,.2);
}
.route-top .route-dot{animation:routeDotA 9s linear infinite}
.route-bottom .route-dot{animation:routeDotB 11s linear infinite}
@keyframes routeDotA{from{left:0}to{left:100%}}
@keyframes routeDotB{from{right:0}to{right:100%}}

/* truck */
.cargo-truck{
  position:absolute;
  left:-11%;
  bottom:14%;
  width:120px;
  height:45px;
  opacity:.38;
  animation:truckDrive 18s linear infinite;
}
.truck-box{
  position:absolute;
  left:0;bottom:10px;
  width:76px;height:26px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.025);
}
.truck-box:before{
  content:"BITNASR";
  position:absolute;
  left:8px;top:8px;
  font-size:5px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.32);
}
.truck-cab{
  position:absolute;
  left:77px;bottom:10px;
  width:28px;height:21px;
  border:1px solid rgba(255,255,255,.18);
  border-left:0;
  clip-path:polygon(0 25%,65% 25%,100% 100%,0 100%);
  background:rgba(255,255,255,.025);
}
.truck-wheel{
  position:absolute;
  bottom:4px;
  width:9px;height:9px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
}
.wheel-a{left:15px}
.wheel-b{left:84px}
@keyframes truckDrive{
  0%{left:-12%;opacity:0}
  9%{opacity:.38}
  88%{opacity:.34}
  100%{left:106%;opacity:0}
}

/* container ship */
.cargo-ship{
  position:absolute;
  left:8%;
  top:31%;
  width:155px;
  height:50px;
  opacity:.22;
  animation:shipDrift 22s ease-in-out infinite alternate;
}
.ship-hull{
  position:absolute;
  left:0;bottom:0;
  width:150px;height:18px;
  border:1px solid rgba(255,255,255,.16);
  border-top:0;
  clip-path:polygon(0 0,100% 0,88% 100%,12% 100%);
  background:rgba(255,255,255,.018);
}
.ship-container{
  position:absolute;
  bottom:18px;
  width:30px;height:16px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.02);
}
.ship-container.c1{left:16px}
.ship-container.c2{left:47px}
.ship-container.c3{left:78px}
.ship-container.c4{left:109px}
@keyframes shipDrift{
  from{transform:translateX(-10px)}
  to{transform:translateX(35px)}
}

/* plane */
.cargo-plane{
  position:absolute;
  right:13%;
  top:16%;
  width:80px;
  height:34px;
  opacity:.18;
  animation:planeFloat 8s ease-in-out infinite;
}
.plane-body{
  position:absolute;
  left:7px;top:15px;
  width:63px;height:2px;
  background:rgba(255,255,255,.22);
  transform:rotate(-8deg);
}
.plane-body:before{
  content:"";
  position:absolute;
  right:-7px;top:-3px;
  width:9px;height:8px;
  border-top:2px solid rgba(255,255,255,.22);
  transform:rotate(22deg);
}
.plane-wing{
  position:absolute;
  left:32px;top:8px;
  width:26px;height:15px;
  border-top:2px solid rgba(255,255,255,.17);
  transform:rotate(-17deg);
}
@keyframes planeFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(14px,-7px,0)}
}

/* port crane, clearer but still faint */
.trade-crane-v2{
  position:absolute;
  right:2%;
  bottom:11%;
  width:220px;height:180px;
  opacity:.22;
}
.crane-v2-mast{
  position:absolute;
  right:42px;bottom:0;
  width:1px;height:150px;
  background:rgba(255,255,255,.18);
}
.crane-v2-arm{
  position:absolute;
  right:42px;top:30px;
  width:150px;height:1px;
  background:rgba(255,255,255,.18);
  transform-origin:right center;
  transform:rotate(-5deg);
}
.crane-v2-cable{
  position:absolute;
  right:130px;top:25px;
  width:1px;height:85px;
  background:rgba(255,255,255,.14);
  animation:craneCableV2 6s ease-in-out infinite;
}
.crane-v2-load{
  position:absolute;
  right:113px;top:108px;
  width:34px;height:17px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.02);
  animation:craneLoadV2 6s ease-in-out infinite;
}
@keyframes craneCableV2{
  0%,100%{height:85px}
  50%{height:58px}
}
@keyframes craneLoadV2{
  0%,100%{top:108px}
  50%{top:81px}
}

/* container stack */
.container-stack{
  position:absolute;
  right:20%;
  bottom:10%;
  width:110px;height:58px;
  opacity:.2;
}
.container-stack span{
  position:absolute;
  width:52px;height:19px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.02);
}
.container-stack span:nth-child(1){left:0;bottom:0}
.container-stack span:nth-child(2){left:54px;bottom:0}
.container-stack span:nth-child(3){left:27px;bottom:20px}

/* map-style paths */
.trade-map-line{
  position:absolute;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  opacity:.34;
}
.map-line-a{width:23%;left:47%;top:44%;transform:rotate(-19deg)}
.map-line-b{width:18%;left:34%;top:63%;transform:rotate(14deg)}
.trade-map-node{
  position:absolute;
  width:5px;height:5px;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  box-shadow:0 0 0 5px rgba(255,255,255,.018),0 0 16px rgba(255,255,255,.08);
  opacity:.45;
  animation:nodePulseV2 3.4s ease-in-out infinite;
}
.map-node-a{left:46%;top:44%}
.map-node-b{left:68%;top:37%;animation-delay:-1.1s}
.map-node-c{left:52%;top:66%;animation-delay:-2.2s}
@keyframes nodePulseV2{
  0%,100%{transform:scale(.8);opacity:.28}
  50%{transform:scale(1.25);opacity:.68}
}

/* keep the animation visible, but behind all real UI */
.hero-copy,.hero-system{z-index:5!important}

@media(max-width:640px){
  .hero-trade-motion-v2{
    opacity:.46!important;
  }
  .cargo-ship{
    left:-18px;
    top:25%;
    transform:scale(.72);
  }
  .cargo-plane{
    right:2%;
    top:13%;
    transform:scale(.7);
  }
  .trade-crane-v2{
    right:-70px;
    bottom:7%;
    transform:scale(.66);
  }
  .container-stack{
    right:5%;
    bottom:7%;
    transform:scale(.7);
  }
  .trade-skyline{
    width:58%;
    height:17%;
    right:-8%;
  }
  .route-bottom,
  .map-line-b,
  .map-node-c{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-trade-motion-v2 *{
    animation:none!important;
  }
}


/* =========================================================
   VERSION 1.7 — MAKE HERO COMMERCE STORY ACTUALLY VISIBLE
   ========================================================= */

/* Previous versions were too faint on real displays. */
.hero-trade-motion,
.hero-trade-motion-v2{
  opacity:1!important;
  mix-blend-mode:normal!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
  z-index:2!important;
}
.hero-copy,
.hero-system{
  position:relative;
  z-index:5!important;
}

/* brighter but still premium */
.hero-trade-motion-v2:before{
  opacity:1!important;
  background:
    radial-gradient(circle at 77% 33%,rgba(255,255,255,.07),transparent 22%),
    radial-gradient(circle at 21% 72%,rgba(255,255,255,.05),transparent 24%),
    linear-gradient(135deg,transparent 0 48%,rgba(255,255,255,.025) 48.1% 48.5%,transparent 48.7% 100%);
}

/* explicit cargo ship */
.cargo-ship{
  left:9%!important;
  top:34%!important;
  width:180px!important;
  height:62px!important;
  opacity:.52!important;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.025));
}
.ship-hull{
  border-color:rgba(255,255,255,.34)!important;
  background:rgba(255,255,255,.035)!important;
}
.ship-container{
  border-color:rgba(255,255,255,.30)!important;
  background:rgba(255,255,255,.035)!important;
}

/* explicit truck */
.cargo-truck{
  bottom:12%!important;
  width:136px!important;
  height:52px!important;
  opacity:.62!important;
}
.truck-box,
.truck-cab{
  border-color:rgba(255,255,255,.34)!important;
  background:rgba(255,255,255,.04)!important;
}
.truck-wheel{
  border-color:rgba(255,255,255,.30)!important;
}
.truck-box:before{
  color:rgba(255,255,255,.54)!important;
}

/* plane more visible */
.cargo-plane{
  right:11%!important;
  top:14%!important;
  opacity:.42!important;
  transform:scale(1.15);
}
.plane-body{
  background:rgba(255,255,255,.36)!important;
}
.plane-body:before,
.plane-wing{
  border-color:rgba(255,255,255,.30)!important;
}

/* crane: clearly recognizable */
.trade-crane-v2{
  right:1%!important;
  bottom:7%!important;
  width:250px!important;
  height:200px!important;
  opacity:.42!important;
}
.crane-v2-mast,
.crane-v2-arm{
  background:rgba(255,255,255,.30)!important;
}
.crane-v2-cable{
  background:rgba(255,255,255,.26)!important;
}
.crane-v2-load{
  border-color:rgba(255,255,255,.30)!important;
  background:rgba(255,255,255,.04)!important;
}

/* container stack */
.container-stack{
  right:20%!important;
  bottom:8%!important;
  opacity:.42!important;
  transform:scale(1.12);
}
.container-stack span{
  border-color:rgba(255,255,255,.25)!important;
  background:rgba(255,255,255,.03)!important;
}

/* routes/nodes clearly visible */
.trade-route{
  opacity:.75!important;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.18) 0 5px,
      transparent 5px 14px
    )!important;
}
.trade-route .route-dot{
  background:rgba(255,255,255,.95)!important;
  box-shadow:0 0 18px rgba(255,255,255,.26)!important;
}
.trade-map-line{
  opacity:.7!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)!important;
}
.trade-map-node{
  opacity:.85!important;
  background:rgba(255,255,255,.82)!important;
}

/* ghost skyline now actually readable */
.trade-skyline{
  opacity:.30!important;
}
.trade-skyline span{
  border-color:rgba(255,255,255,.22)!important;
  background:linear-gradient(to top,rgba(255,255,255,.035),transparent)!important;
}

/* Put some of the action in clear negative-space areas */
.route-top{
  top:11%!important;
  left:4%!important;
  width:48%!important;
}
.route-bottom{
  bottom:13%!important;
  right:2%!important;
  width:44%!important;
}

/* soften where it passes behind hero copy so text remains dominant */
.hero-trade-motion-v2{
  background:
    linear-gradient(90deg,rgba(6,9,12,.22) 0%,rgba(6,9,12,.05) 42%,transparent 65%);
}

/* mobile */
@media(max-width:640px){
  .hero-trade-motion,
  .hero-trade-motion-v2{
    opacity:.82!important;
  }

  .cargo-ship{
    left:-24px!important;
    top:27%!important;
    transform:scale(.72)!important;
    opacity:.42!important;
  }

  .cargo-truck{
    opacity:.46!important;
    bottom:10%!important;
  }

  .trade-crane-v2{
    right:-78px!important;
    bottom:5%!important;
    transform:scale(.62)!important;
    opacity:.34!important;
  }

  .cargo-plane{
    right:-4px!important;
    top:10%!important;
    transform:scale(.78)!important;
    opacity:.34!important;
  }

  .container-stack{
    right:2%!important;
    bottom:6%!important;
    transform:scale(.72)!important;
    opacity:.32!important;
  }

  .trade-skyline{
    opacity:.22!important;
  }
}


/* =========================================================
   VERSION 1.8 — WORKING CRANE + BITNASR CONTAINERS + MOBILE HERO POLISH
   ========================================================= */

/* Make the crane clearly feel "working" with a branded container */
.trade-crane-v2{
  transform-origin: right bottom;
  animation: craneBodySway 6.8s ease-in-out infinite;
}
@keyframes craneBodySway{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-2px) rotate(-0.7deg)}
}
.crane-v2-arm{
  transform-origin:right center;
  animation: craneArmSway 6.8s ease-in-out infinite;
}
@keyframes craneArmSway{
  0%,100%{transform:rotate(-5deg)}
  50%{transform:rotate(-8deg)}
}
.crane-v2-cable{
  right:129px!important;
  animation: craneCableLift 6.8s ease-in-out infinite!important;
}
.crane-v2-load{
  right:112px!important;
  width:52px!important;
  height:24px!important;
  border-radius:3px;
  border-color:rgba(255,255,255,.34)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03))!important;
  box-shadow:0 10px 26px rgba(0,0,0,.2);
  animation: craneLoadMove 6.8s ease-in-out infinite!important;
}
.crane-v2-load:before,
.crane-v2-load:after{
  content:"BITNASR";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:rgba(255,255,255,.72);
  font-size:5px;
  letter-spacing:.18em;
  font-weight:700;
  white-space:nowrap;
}
.crane-v2-load:after{
  top:auto;
  bottom:2px;
  left:5px;
  transform:none;
  content:"";
  width:42px;
  height:1px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 4px,transparent 4px 8px);
}
@keyframes craneCableLift{
  0%,100%{height:84px}
  18%{height:82px}
  38%{height:52px}
  58%{height:52px}
  78%{height:86px}
}
@keyframes craneLoadMove{
  0%,100%{top:108px;transform:translateX(0)}
  20%{top:104px;transform:translateX(0)}
  38%{top:78px;transform:translateX(-6px)}
  58%{top:78px;transform:translateX(-48px)}
  78%{top:110px;transform:translateX(-48px)}
}

/* Branded containers stacked at port */
.container-stack{
  width:138px!important;
  height:74px!important;
}
.container-stack span{
  width:64px!important;
  height:23px!important;
  border-radius:3px;
  overflow:hidden;
}
.container-stack span:before{
  content:"BITNASR";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:rgba(255,255,255,.54);
  font-size:5px;
  letter-spacing:.15em;
  font-weight:700;
  white-space:nowrap;
}
.container-stack span:after{
  content:"";
  position:absolute;
  left:4px;
  right:4px;
  bottom:4px;
  height:1px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 4px,transparent 4px 8px);
}
.container-stack span:nth-child(1){left:0;bottom:0}
.container-stack span:nth-child(2){left:67px;bottom:0}
.container-stack span:nth-child(3){left:34px;bottom:24px}

/* Branded containers on the ship as well */
.ship-container:before{
  content:"BIT";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:rgba(255,255,255,.42);
  font-size:4px;
  letter-spacing:.12em;
  font-weight:700;
}

/* little loading/transfer highlight to imply active trade */
.trade-crane-v2:before{
  content:"";
  position:absolute;
  right:104px;
  top:72px;
  width:88px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  opacity:.55;
}

/* Better mobile hero presentation */
@media(max-width:760px){
  .hero{
    padding-top:78px;
  }
  .hero-grid{
    display:flex!important;
    flex-direction:column!important;
    gap:20px!important;
    align-items:stretch!important;
  }
  .hero-system{
    order:1;
    min-height:360px!important;
    width:100%;
    margin-top:6px;
  }
  .hero-copy{
    order:2;
    padding-top:0!important;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .glass-chip{
    margin-inline:auto;
  }
  .hero-copy > p{
    max-width:32rem;
    margin-inline:auto;
  }
  .hero-actions{
    justify-content:center;
    width:100%;
  }
  .hero-actions .button{
    width:min(100%, 320px)!important;
  }
  .hero-logo-glass{
    width:min(86%,340px)!important;
    min-height:185px!important;
    border-radius:30px!important;
    padding:24px!important;
  }
  .hero-logo-glass img{
    width:90%!important;
  }
  .hero-orbit-outer{width:335px!important;height:220px!important}
  .hero-orbit-inner{width:250px!important;height:158px!important}
  .hero-brand-hp{width:66px!important;height:66px!important;right:2%!important;top:10%!important}
  .hero-brand-dyson{width:74px!important;height:74px!important;left:0!important;top:28%!important}
  .hero-brand-jbl{width:52px!important;height:52px!important;right:4%!important;bottom:10%!important}
  .hero-brand-lexar{width:50px!important;height:50px!important;left:14%!important;bottom:7%!important}

  /* keep the trade story visible but balanced on mobile */
  .hero-trade-motion,
  .hero-trade-motion-v2{
    opacity:.9!important;
  }
  .trade-route.route-top{
    width:72%!important;
    left:2%!important;
    top:17%!important;
  }
  .trade-route.route-bottom{
    width:64%!important;
    right:-3%!important;
    bottom:16%!important;
  }
  .cargo-ship{
    left:-10px!important;
    top:18%!important;
    transform:scale(.82)!important;
    opacity:.46!important;
  }
  .cargo-truck{
    width:116px!important;
    height:46px!important;
    bottom:8%!important;
    opacity:.54!important;
  }
  .cargo-plane{
    right:-6px!important;
    top:8%!important;
    transform:scale(.82)!important;
    opacity:.36!important;
  }
  .trade-crane-v2{
    right:-82px!important;
    bottom:4%!important;
    transform:scale(.62)!important;
    opacity:.38!important;
  }
  .container-stack{
    right:3%!important;
    bottom:4%!important;
    transform:scale(.74)!important;
    opacity:.36!important;
  }
  .trade-skyline{
    width:64%!important;
    right:-12%!important;
    bottom:5%!important;
    opacity:.2!important;
  }
}

@media(max-width:480px){
  .hero{
    padding-top:74px;
  }
  .hero h1{
    font-size:clamp(38px,13vw,52px)!important;
    line-height:.94!important;
  }
  html[lang=ar] .hero h1{
    font-size:clamp(34px,11.5vw,46px)!important;
  }
  .hero-copy>p{
    font-size:12px!important;
    line-height:1.8!important;
  }
  .hero-system{
    min-height:330px!important;
  }
  .hero-logo-glass{
    width:min(88%,300px)!important;
    min-height:170px!important;
  }
  .hero-brand-hp{right:-2%!important}
  .hero-brand-dyson{left:-4%!important}
  .hero-brand-jbl{right:0!important}
  .hero-brand-lexar{left:10%!important}
  .cargo-ship{
    top:20%!important;
    left:-28px!important;
    transform:scale(.68)!important;
  }
  .cargo-truck{
    transform:scale(.86);
    transform-origin:left bottom;
    bottom:7%!important;
  }
  .trade-crane-v2{
    right:-102px!important;
    bottom:3%!important;
    transform:scale(.52)!important;
  }
  .container-stack{
    right:-4%!important;
    bottom:2%!important;
    transform:scale(.62)!important;
  }
  .trade-route.route-top{
    top:19%!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .trade-crane-v2,
  .crane-v2-arm,
  .crane-v2-cable,
  .crane-v2-load{
    animation:none!important;
  }
}


/* =========================================================
   VERSION 1.9 — SHOWROOM CARD IMAGE SCALE + SOFTER HOVER
   ========================================================= */

/* Product photos should feel like the hero of each brand card */
.brand-tile-v2.has-product-visual .brand-product-visual{
  width:78%!important;
  height:88%!important;
  right:-5%!important;
  top:8%!important;
  overflow:visible!important;
}

.brand-tile-v2.brand-tile-featured.has-product-visual .brand-product-visual{
  width:84%!important;
  height:91%!important;
  right:-7%!important;
  top:6%!important;
}

.brand-visual-stack{
  inset:-4%!important;
}

.brand-visual-frame{
  width:100%!important;
  height:100%!important;
  transform:translate3d(5px,4px,0) scale(1.16)!important;
  transition:
    opacity .9s cubic-bezier(.22,.65,.25,1),
    transform 1.05s cubic-bezier(.2,.72,.2,1),
    filter .55s ease!important;
}

.brand-visual-frame.is-active{
  transform:translate3d(0,0,0) scale(1.20)!important;
}

.brand-visual-frame.is-leaving{
  transform:translate3d(-5px,-3px,0) scale(1.225)!important;
}

/* Hover is intentionally calmer now */
.brand-tile-v2{
  transition:
    transform .5s cubic-bezier(.2,.72,.2,1),
    opacity .45s ease,
    filter .45s ease,
    border-color .42s ease,
    box-shadow .5s ease!important;
}

.brand-tile-v2.is-brand-active{
  border-color:rgba(255,255,255,.17)!important;
  box-shadow:
    0 20px 50px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.11)!important;
}

.brand-tile-v2.is-brand-active .brand-product-visual{
  transform:translate3d(var(--orb-x),var(--orb-y),16px)!important;
}

.brand-tile-v2.is-brand-active .brand-visual-frame.is-active,
.brand-tile-v2:hover .brand-visual-frame.is-active{
  transform:translate3d(-2px,-2px,14px) scale(1.25)!important;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.30))!important;
}

.brand-tile-v2.is-brand-active .brand-tile-logo{
  transform:translateZ(12px)!important;
}

.brand-tile-v2.is-brand-active:after{
  transform:translate3d(var(--orb-x),var(--orb-y),8px) scale(1.025) rotate(2deg)!important;
}

/* quieter cursor light/sheen */
.brand-tile-v2.is-brand-active .brand-sheen{
  opacity:.35!important;
}

.brand-tile-v2.is-brand-active .brand-light{
  opacity:.38!important;
}

/* Other cards stay visible; only a very small focus shift */
@media(hover:hover) and (pointer:fine){
  .brand-universe.has-brand-active .brand-tile-v2:not(.is-brand-active){
    opacity:.93!important;
    filter:brightness(.96)!important;
    transform:scale(.997)!important;
  }
}

/* Better scale on medium/small cards */
@media(max-width:980px){
  .brand-tile-v2.has-product-visual .brand-product-visual,
  .brand-tile-v2.brand-tile-featured.has-product-visual .brand-product-visual{
    width:76%!important;
    height:84%!important;
    right:-6%!important;
    top:10%!important;
  }

  .brand-visual-frame.is-active{
    transform:translate3d(0,0,0) scale(1.14)!important;
  }
}

@media(max-width:640px){
  .brand-tile-v2.has-product-visual .brand-product-visual,
  .brand-tile-v2.brand-tile-featured.has-product-visual .brand-product-visual{
    width:72%!important;
    height:72%!important;
    right:-7%!important;
    top:22%!important;
  }

  .brand-visual-frame.is-active{
    transform:translate3d(0,0,0) scale(1.12)!important;
  }

  .brand-tile-v2:active{
    transform:translateY(-2px) scale(.988)!important;
  }
}

html[dir="rtl"] .brand-tile-v2.has-product-visual .brand-product-visual,
html[dir="rtl"] .brand-tile-v2.brand-tile-featured.has-product-visual .brand-product-visual{
  right:auto!important;
  left:-5%!important;
}


/* =========================================================
   VERSION 2.0 — BRAND UNIVERSE PRODUCT VISUALS: MUCH LARGER
   ========================================================= */

/* Let the product dominate the card visually. */
.brand-tile-v2.has-product-visual .brand-product-visual,
.brand-tile-v2.brand-tile-featured.has-product-visual .brand-product-visual{
  width:92%!important;
  height:92%!important;
  right:-7%!important;
  top:7%!important;
  overflow:visible!important;
  pointer-events:none!important;
}

.brand-tile-v2.has-product-visual .brand-visual-stack{
  inset:-10%!important;
  display:grid!important;
  place-items:center!important;
}

/* Stronger default scale compensates for transparent padding in uploaded PNG/WebP images. */
.brand-tile-v2.has-product-visual .brand-visual-frame{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  transform-origin:center center!important;
  transform:translate3d(0,0,0) scale(1.72)!important;
  transition:
    opacity .95s cubic-bezier(.22,.65,.25,1),
    transform .75s cubic-bezier(.2,.72,.2,1),
    filter .5s ease!important;
}

/* Small/regular cards get slightly more scale because their visual area is shorter. */
.brand-tile-v2:not(.brand-tile-featured).has-product-visual .brand-visual-frame{
  transform:translate3d(0,0,0) scale(1.88)!important;
}

.brand-tile-v2.has-product-visual .brand-visual-frame.is-active{
  opacity:1!important;
}

.brand-tile-v2.has-product-visual .brand-visual-frame.is-leaving{
  opacity:0!important;
  transform:translate3d(-3px,-2px,0) scale(1.78)!important;
}
.brand-tile-v2:not(.brand-tile-featured).has-product-visual .brand-visual-frame.is-leaving{
  transform:translate3d(-3px,-2px,0) scale(1.94)!important;
}

/* Hover: only a tiny zoom, not a jump. */
.brand-tile-v2.has-product-visual.is-brand-active .brand-visual-frame.is-active,
.brand-tile-v2.has-product-visual:hover .brand-visual-frame.is-active{
  transform:translate3d(-1px,-1px,10px) scale(1.78)!important;
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.24))!important;
}
.brand-tile-v2:not(.brand-tile-featured).has-product-visual.is-brand-active .brand-visual-frame.is-active,
.brand-tile-v2:not(.brand-tile-featured).has-product-visual:hover .brand-visual-frame.is-active{
  transform:translate3d(-1px,-1px,10px) scale(1.94)!important;
}

/* Keep image behind logo/copy but in front of decorative rings. */
.brand-tile-v2 .brand-product-visual{z-index:3!important}
.brand-tile-v2 .brand-tile-copy{z-index:8!important}
.brand-tile-v2 .brand-feature-caption{z-index:9!important}

/* Reduce glow so large product remains crisp. */
.brand-product-glow{
  opacity:.24!important;
  filter:blur(16px)!important;
}

/* RTL symmetry */
html[dir="rtl"] .brand-tile-v2.has-product-visual .brand-product-visual,
html[dir="rtl"] .brand-tile-v2.brand-tile-featured.has-product-visual .brand-product-visual{
  right:auto!important;
  left:-7%!important;
}

@media(max-width:980px){
  .brand-tile-v2.has-product-visual .brand-product-visual,
  .brand-tile-v2.brand-tile-featured.has-product-visual .brand-product-visual{
    width:90%!important;
    height:90%!important;
    top:8%!important;
    right:-8%!important;
  }
  .brand-tile-v2.has-product-visual .brand-visual-frame{
    transform:translate3d(0,0,0) scale(1.62)!important;
  }
  .brand-tile-v2:not(.brand-tile-featured).has-product-visual .brand-visual-frame{
    transform:translate3d(0,0,0) scale(1.72)!important;
  }
}

@media(max-width:640px){
  .brand-tile-v2.has-product-visual .brand-product-visual,
  .brand-tile-v2.brand-tile-featured.has-product-visual .brand-product-visual{
    width:82%!important;
    height:74%!important;
    right:-9%!important;
    top:22%!important;
  }
  .brand-tile-v2.has-product-visual .brand-visual-stack{
    inset:-8%!important;
  }
  .brand-tile-v2.has-product-visual .brand-visual-frame,
  .brand-tile-v2:not(.brand-tile-featured).has-product-visual .brand-visual-frame{
    transform:translate3d(0,0,0) scale(1.50)!important;
  }
  .brand-tile-v2.has-product-visual:active .brand-visual-frame.is-active{
    transform:translate3d(0,-1px,0) scale(1.54)!important;
  }
}


/* =========================================================
   VERSION 2.1 — CORE STRENGTH SHIP / CARGO PATTERN
   ========================================================= */

.focus-panel-v2{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.focus-copy-v2,
.focus-logos-only{
  position:relative;
  z-index:3;
}
.focus-ship-pattern{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
}
.focus-ship-pattern:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 78% 84%, rgba(255,255,255,.035), transparent 15%),
    radial-gradient(circle at 72% 88%, rgba(255,255,255,.018), transparent 24%),
    linear-gradient(180deg, transparent 62%, rgba(255,255,255,.02) 82%, transparent 100%);
  opacity:.9;
}

/* dark luxury waves */
.focus-wave{
  position:absolute;
  left:42%;
  right:3%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  opacity:.55;
}
.focus-wave.wave-a{
  bottom:78px;
}
.focus-wave.wave-b{
  bottom:60px;
  opacity:.32;
}

/* port crane */
.focus-port-crane{
  position:absolute;
  right:26%;
  bottom:92px;
  width:168px;
  height:166px;
  opacity:.62;
  animation:focusCraneIdle 6.2s ease-in-out infinite;
}
.crane-mast,
.crane-arm,
.crane-cable{
  position:absolute;
  display:block;
  background:rgba(54,60,68,.92);
  box-shadow:0 0 0 1px rgba(255,255,255,.035);
}
.crane-mast{
  width:3px;
  height:132px;
  right:22px;
  bottom:0;
}
.crane-arm{
  width:106px;
  height:2px;
  right:22px;
  top:28px;
  transform:rotate(-4deg);
  transform-origin:right center;
}
.crane-cable{
  width:2px;
  height:62px;
  right:92px;
  top:23px;
  animation:focusCableMove 6.2s ease-in-out infinite;
}
.crane-load{
  position:absolute;
  right:65px;
  top:84px;
  width:56px;
  height:24px;
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:5px;
  letter-spacing:.18em;
  font-weight:700;
  color:rgba(255,255,255,.52);
  background:linear-gradient(180deg, rgba(27,31,37,.95), rgba(15,18,22,.98));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  animation:focusLoadMove 6.2s ease-in-out infinite;
}
@keyframes focusCraneIdle{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}
@keyframes focusCableMove{
  0%,100%{height:62px}
  26%{height:58px}
  48%{height:34px}
  68%{height:34px}
  86%{height:64px}
}
@keyframes focusLoadMove{
  0%,100%{top:84px;transform:translateX(0)}
  26%{top:78px;transform:translateX(0)}
  48%{top:56px;transform:translateX(-8px)}
  68%{top:56px;transform:translateX(-52px)}
  86%{top:86px;transform:translateX(-52px)}
}

/* dock stacks */
.focus-container-stack{
  position:absolute;
  bottom:78px;
  display:flex;
  gap:8px;
  align-items:flex-end;
}
.focus-container-stack span{
  position:relative;
  width:64px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  color:rgba(255,255,255,.46);
  font-size:5px;
  letter-spacing:.15em;
  font-weight:700;
  background:linear-gradient(180deg, rgba(26,31,37,.95), rgba(14,17,21,.98));
  border:1px solid rgba(255,255,255,.05);
}
.focus-container-stack span:after{
  content:"";
  position:absolute;
  left:6px;
  right:6px;
  bottom:4px;
  height:1px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 4px, transparent 4px 8px);
}
.focus-container-stack.stack-a{
  right:5%;
}
.focus-container-stack.stack-b{
  right:15%;
}
.focus-container-stack.stack-a span:nth-child(2){
  transform:translateY(-28px);
}
.focus-container-stack.stack-b span:nth-child(2){
  transform:translateY(-28px);
}
.focus-container-stack.stack-b span:nth-child(3){
  transform:translateY(-56px);
}

/* container ship */
.focus-ship{
  position:absolute;
  left:52%;
  bottom:32px;
  width:298px;
  height:130px;
  opacity:.96;
  animation:focusShipFloat 8s ease-in-out infinite;
}
.ship-top{
  position:absolute;
  left:42px;
  bottom:48px;
  display:flex;
  gap:8px;
}
.ship-top.second-row{
  left:78px;
  bottom:74px;
}
.ship-top i{
  width:58px;
  height:22px;
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-style:normal;
  font-size:5px;
  letter-spacing:.16em;
  font-weight:700;
  color:rgba(255,255,255,.48);
  background:linear-gradient(180deg, rgba(25,30,35,.96), rgba(12,15,19,.99));
  border:1px solid rgba(255,255,255,.05);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.ship-body{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:54px;
  background:linear-gradient(180deg, rgba(20,23,27,.98), rgba(8,10,13,1));
  clip-path:polygon(0 18%, 89% 18%, 100% 72%, 90% 100%, 8% 100%, 0 72%);
  border:1px solid rgba(255,255,255,.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02), 0 18px 45px rgba(0,0,0,.34);
}
.ship-body:before{
  content:"";
  position:absolute;
  left:26px;
  right:32px;
  top:14px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}
.ship-body:after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:-14px;
  height:20px;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.035), transparent 68%);
  opacity:.55;
}
@keyframes focusShipFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

@media(max-width:1100px){
  .focus-panel-v2{
    grid-template-columns:1fr;
    gap:26px;
    padding-bottom:220px;
  }
  .focus-ship{
    left:auto;
    right:26px;
    width:260px;
    bottom:24px;
  }
  .focus-port-crane{
    right:190px;
    bottom:76px;
    transform:scale(.9);
    transform-origin:right bottom;
  }
  .focus-container-stack.stack-a{
    right:12px;
  }
  .focus-container-stack.stack-b{
    right:116px;
  }
  .focus-wave{
    left:24px;
    right:24px;
  }
}

@media(max-width:640px){
  .focus-panel-v2{
    padding-bottom:188px;
  }
  .focus-copy-v2 h2{
    max-width:100%;
  }
  .focus-copy-v2 .focus-lead{
    max-width:100%;
  }
  .focus-ship{
    width:198px;
    height:92px;
    right:8px;
    bottom:18px;
    opacity:.92;
  }
  .ship-top{
    left:26px;
    bottom:34px;
    gap:5px;
  }
  .ship-top.second-row{
    left:50px;
    bottom:56px;
  }
  .ship-top i{
    width:38px;
    height:16px;
    font-size:4px;
    letter-spacing:.12em;
  }
  .ship-body{
    height:38px;
  }
  .focus-port-crane{
    width:120px;
    height:128px;
    right:132px;
    bottom:54px;
    opacity:.5;
  }
  .crane-mast{
    height:96px;
    right:18px;
  }
  .crane-arm{
    width:72px;
    right:18px;
    top:20px;
  }
  .crane-cable{
    right:63px;
    top:18px;
  }
  .crane-load{
    right:38px;
    width:40px;
    height:18px;
    font-size:4px;
    top:62px;
  }
  .focus-container-stack{
    bottom:56px;
    gap:5px;
  }
  .focus-container-stack span{
    width:42px;
    height:16px;
    font-size:4px;
  }
  .focus-container-stack.stack-a{
    right:6px;
  }
  .focus-container-stack.stack-b{
    right:82px;
  }
  .focus-container-stack.stack-a span:nth-child(2),
  .focus-container-stack.stack-b span:nth-child(2){
    transform:translateY(-20px);
  }
  .focus-container-stack.stack-b span:nth-child(3){
    transform:translateY(-40px);
  }
  .focus-wave.wave-a{
    bottom:52px;
  }
  .focus-wave.wave-b{
    bottom:40px;
  }
}

@media(prefers-reduced-motion:reduce){
  .focus-ship,
  .focus-port-crane,
  .crane-cable,
  .crane-load{
    animation:none!important;
  }
}


/* =========================================================
   VERSION 2.2 — RICHER GLOBAL BACKGROUND
   ========================================================= */

body{
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.025), transparent 26%),
    radial-gradient(circle at 84% 16%, rgba(183,203,230,.03), transparent 20%),
    linear-gradient(180deg, #06080b 0%, #05070a 100%)!important;
}

.global-bg{
  background:
    radial-gradient(circle at 50% -10%, #171d25 0, #0c0f14 35%, #07090d 72%),
    linear-gradient(180deg, rgba(255,255,255,.01) 0%, rgba(255,255,255,0) 28%)!important;
}

.global-bg:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.03), transparent 22%),
    radial-gradient(circle at 76% 12%, rgba(255,255,255,.025), transparent 18%),
    radial-gradient(circle at 88% 82%, rgba(255,255,255,.025), transparent 22%),
    linear-gradient(115deg, transparent 0 46%, rgba(255,255,255,.015) 46.2%, transparent 47%, transparent 100%);
  opacity:.95;
}

.global-bg:after{
  content:"";
  position:absolute;
  inset:-5%;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.02), transparent 62%);
  filter:blur(24px);
  opacity:.45;
}

.bg-grid{
  opacity:.075!important;
  background-size:96px 96px!important;
}

.bg-diagonal{
  position:absolute;
  inset:-5%;
  opacity:.12;
  background:
    repeating-linear-gradient(
      115deg,
      transparent 0 44px,
      rgba(255,255,255,.018) 44px 45px,
      transparent 45px 92px
    );
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.75), transparent 88%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.75), transparent 88%);
}

.bg-noise{
  position:absolute;
  inset:0;
  opacity:.06;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.85) 0 .6px, transparent .8px),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.75) 0 .6px, transparent .8px),
    radial-gradient(circle at 30% 75%, rgba(255,255,255,.7) 0 .6px, transparent .8px),
    radial-gradient(circle at 60% 60%, rgba(255,255,255,.55) 0 .5px, transparent .7px);
  background-size:180px 180px, 220px 220px, 200px 200px, 160px 160px;
  mix-blend-mode:screen;
}

.bg-orb{
  filter:blur(34px)!important;
}
.bg-orb-a{
  width:52vw!important;
  height:52vw!important;
  left:-18vw!important;
  top:8vh!important;
  background:radial-gradient(circle, rgba(190,215,244,.08), transparent 68%)!important;
}
.bg-orb-b{
  width:46vw!important;
  height:46vw!important;
  right:-16vw!important;
  bottom:-4vh!important;
  background:radial-gradient(circle, rgba(255,255,255,.06), transparent 68%)!important;
}
.bg-orb-c{
  position:absolute;
  width:28vw;
  height:28vw;
  left:38%;
  top:34%;
  border-radius:50%;
  filter:blur(48px);
  background:radial-gradient(circle, rgba(144,164,190,.045), transparent 72%);
}

.bg-rings{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.035);
  opacity:.55;
}
.bg-rings:before,
.bg-rings:after{
  content:"";
  position:absolute;
  inset:10%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.025);
}
.bg-rings:after{
  inset:22%;
}
.bg-rings-a{
  width:540px;
  height:540px;
  right:-120px;
  top:180px;
}
.bg-rings-b{
  width:420px;
  height:420px;
  left:-120px;
  top:520px;
}

.bg-route{
  position:absolute;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
  opacity:.58;
}
.bg-route:after{
  content:"";
  position:absolute;
  top:-2px;
  right:18%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(255,255,255,.45);
  box-shadow:0 0 12px rgba(255,255,255,.12);
}
.bg-route-a{
  width:32vw;
  left:8vw;
  top:180px;
  transform:rotate(-6deg);
}
.bg-route-b{
  width:26vw;
  right:10vw;
  top:420px;
  transform:rotate(12deg);
}
.bg-route-c{
  width:34vw;
  left:24vw;
  bottom:22vh;
  transform:rotate(5deg);
}

.bg-star-node{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.4);
  box-shadow:0 0 0 8px rgba(255,255,255,.015), 0 0 18px rgba(255,255,255,.06);
  opacity:.75;
}
.bg-star-node-a{left:48%;top:140px}
.bg-star-node-b{right:16%;top:360px}
.bg-star-node-c{left:18%;bottom:18vh}

.bg-stars{
  opacity:.11!important;
}

.section:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,.01) 50%, transparent 100%);
  opacity:.45;
  z-index:-1;
}

.glass,
.glass-mini,
.nav-glass,
.mobile-sheet,
.focus-logo-card,
.brand-tile-v2,
.focus-panel-v2,
.trade-panel-v2,
.contact-panel{
  backdrop-filter: blur(16px) saturate(115%);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
}

@media(max-width:980px){
  .bg-rings-a{
    width:360px;
    height:360px;
    right:-120px;
    top:220px;
  }
  .bg-rings-b{
    width:290px;
    height:290px;
    left:-90px;
    top:620px;
  }
  .bg-route-a{width:42vw;top:150px}
  .bg-route-b{width:36vw;top:340px}
  .bg-route-c{width:44vw;left:18vw;bottom:18vh}
  .bg-orb-c{
    width:38vw;
    height:38vw;
    left:28%;
    top:42%;
  }
}

@media(max-width:640px){
  body{
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.02), transparent 24%),
      linear-gradient(180deg, #06080b 0%, #05070a 100%)!important;
  }

  .global-bg{
    background:
      radial-gradient(circle at 50% -6%, #151a22 0, #0a0d12 34%, #07090d 75%)!important;
  }

  .bg-grid{
    opacity:.05!important;
    background-size:72px 72px!important;
  }

  .bg-diagonal{
    opacity:.08;
  }

  .bg-orb-a{
    width:86vw!important;
    height:86vw!important;
    left:-36vw!important;
    top:10vh!important;
  }

  .bg-orb-b{
    width:78vw!important;
    height:78vw!important;
    right:-34vw!important;
    bottom:10vh!important;
  }

  .bg-orb-c{
    width:64vw;
    height:64vw;
    left:18%;
    top:36%;
  }

  .bg-rings-a{
    width:260px;
    height:260px;
    right:-100px;
    top:150px;
    opacity:.38;
  }

  .bg-rings-b{
    width:220px;
    height:220px;
    left:-110px;
    top:520px;
    opacity:.28;
  }

  .bg-route-a{
    width:58vw;
    left:0;
    top:135px;
    transform:rotate(-4deg);
  }

  .bg-route-b{
    width:52vw;
    right:-10vw;
    top:320px;
    transform:rotate(10deg);
  }

  .bg-route-c{
    width:58vw;
    left:16vw;
    bottom:16vh;
  }

  .bg-star-node-a{top:118px;left:62%}
  .bg-star-node-b{top:286px;right:12%}
  .bg-star-node-c{left:14%;bottom:14vh}

  .bg-stars{
    opacity:.08!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .global-bg,
  .global-bg *{
    animation:none!important;
  }
}


/* =========================================================
   VERSION 2.3 — FINAL REQUESTED REFINEMENTS
   ========================================================= */

/* Core Strength: remove cargo artwork and replace with luxury texture only */
.focus-ship-pattern{
  display:none!important;
}
.focus-panel-v2{
  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,.075), transparent 27%),
    radial-gradient(circle at 82% 72%, rgba(141,159,181,.035), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    rgba(8,11,15,.72)!important;
}
.focus-panel-v2:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  opacity:.42;
  background:
    repeating-linear-gradient(118deg, transparent 0 58px, rgba(255,255,255,.015) 58px 59px, transparent 59px 118px),
    radial-gradient(circle at 76% 28%, rgba(255,255,255,.035) 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 62%, rgba(255,255,255,.025) 0 1px, transparent 1.5px);
  background-size:auto, 130px 130px, 170px 170px;
  mask-image:linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,.28));
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,.28));
}
.focus-panel-v2:after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  width:520px;
  height:520px;
  right:-190px;
  top:-230px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.035);
  box-shadow:
    0 0 0 70px rgba(255,255,255,.012),
    0 0 0 145px rgba(255,255,255,.007);
  opacity:.75;
}
.focus-copy-v2,
.focus-logos-only{
  z-index:2!important;
}

/* Hero brand bubbles: subtle independent floating motion */
.hero-brand{
  will-change:translate;
}
.hero-brand-hp{
  animation:heroBubbleFloatHP 6.8s ease-in-out infinite;
}
.hero-brand-dyson{
  animation:heroBubbleFloatDyson 7.6s ease-in-out infinite -.8s;
}
.hero-brand-jbl{
  animation:heroBubbleFloatJBL 6.2s ease-in-out infinite -1.7s;
}
.hero-brand-lexar{
  animation:heroBubbleFloatLexar 7.2s ease-in-out infinite -2.4s;
}
@keyframes heroBubbleFloatHP{
  0%,100%{translate:0 0}
  48%{translate:4px -8px}
  72%{translate:-2px -4px}
}
@keyframes heroBubbleFloatDyson{
  0%,100%{translate:0 0}
  42%{translate:-5px -7px}
  70%{translate:3px -3px}
}
@keyframes heroBubbleFloatJBL{
  0%,100%{translate:0 0}
  50%{translate:5px -6px}
}
@keyframes heroBubbleFloatLexar{
  0%,100%{translate:0 0}
  46%{translate:-4px -7px}
  76%{translate:2px -2px}
}
.hero-brand:hover{
  transform:scale(1.04)!important;
}

/* Brand Universe: make product photography clearly dominant */
.brand-tile-v2.has-product-visual .brand-product-visual{
  width:92%!important;
  height:96%!important;
  right:-11%!important;
  top:3%!important;
}
.brand-tile-v2.brand-tile-featured.has-product-visual .brand-product-visual{
  width:96%!important;
  height:98%!important;
  right:-13%!important;
  top:1%!important;
}
.brand-tile-v2:not(.brand-tile-featured).has-product-visual .brand-visual-frame.is-active{
  transform:translate3d(0,0,0) scale(1.92)!important;
}
.brand-tile-v2.brand-tile-featured.has-product-visual .brand-visual-frame.is-active{
  transform:translate3d(0,0,0) scale(1.68)!important;
}
.brand-tile-v2[href*="/brand/jbl"].has-product-visual .brand-visual-frame.is-active,
.brand-tile-v2[href*="/brand/harman-kardon"].has-product-visual .brand-visual-frame.is-active{
  transform:translate3d(0,0,0) scale(1.78)!important;
}
.brand-tile-v2.is-brand-active:not(.brand-tile-featured) .brand-visual-frame.is-active,
.brand-tile-v2:not(.brand-tile-featured):hover .brand-visual-frame.is-active{
  transform:translate3d(-1px,-2px,10px) scale(1.96)!important;
}
.brand-tile-v2.brand-tile-featured.is-brand-active .brand-visual-frame.is-active,
.brand-tile-v2.brand-tile-featured:hover .brand-visual-frame.is-active{
  transform:translate3d(-1px,-2px,10px) scale(1.72)!important;
}
.brand-tile-v2 .brand-tile-copy{
  z-index:8!important;
}
.brand-tile-v2 .brand-tile-logo{
  position:relative;
  z-index:9!important;
}
.brand-tile-v2 .brand-tile-label{
  position:relative;
  z-index:9!important;
}
html[dir="rtl"] .brand-tile-v2.has-product-visual .brand-product-visual,
html[dir="rtl"] .brand-tile-v2.brand-tile-featured.has-product-visual .brand-product-visual{
  right:auto!important;
  left:-11%!important;
}

/* Company: stack information and matching dark Google map in right column */
.company-side{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.company-side .company-card{
  width:100%;
}
.company-map{
  position:relative;
  width:100%;
  height:300px;
  overflow:hidden;
  border-radius:34px;
  border:1px solid var(--line);
  background:#0a0d11;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.company-map:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(7,9,12,.10), rgba(7,9,12,.2)),
    radial-gradient(circle at 55% 48%, transparent 0 18%, rgba(7,9,12,.10) 70%);
}
.company-map-frame{
  position:absolute;
  inset:-2%;
  width:104%;
  height:104%;
  border:0;
  pointer-events:none;
  filter:invert(.92) hue-rotate(180deg) saturate(.5) brightness(.58) contrast(1.15) grayscale(.12);
  opacity:.9;
}
.company-map-link{
  position:absolute;
  inset:0;
  z-index:4;
  padding:22px;
  display:flex;
  align-items:flex-end;
  gap:12px;
  background:linear-gradient(180deg, transparent 48%, rgba(5,7,10,.78) 100%);
  transition:background .35s ease;
}
.company-map-link:hover{
  background:linear-gradient(180deg, transparent 38%, rgba(5,7,10,.88) 100%);
}
.company-map-pin{
  position:absolute;
  left:50%;
  top:46%;
  width:34px;
  height:34px;
  transform:translate(-50%,-50%);
  border-radius:50% 50% 50% 0;
  rotate:-45deg;
  background:linear-gradient(145deg,#f7f9fc,#9ba5b1);
  box-shadow:0 14px 34px rgba(0,0,0,.32),0 0 0 8px rgba(255,255,255,.035);
  transition:transform .35s var(--ease),box-shadow .35s ease;
}
.company-map-pin i{
  position:absolute;
  width:10px;
  height:10px;
  left:50%;
  top:50%;
  translate:-50% -50%;
  border-radius:50%;
  background:#0a0c10;
}
.company-map-link:hover .company-map-pin{
  transform:translate(-50%,-50%) translateY(-5px);
  box-shadow:0 20px 42px rgba(0,0,0,.4),0 0 0 10px rgba(255,255,255,.04);
}
.company-map-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  position:relative;
  z-index:2;
}
.company-map-copy small{
  color:#78828e;
  font-size:7px;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.company-map-copy strong{
  font-size:11px;
  font-weight:600;
  color:#eef2f6;
}
.company-map-arrow{
  margin-inline-start:auto;
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.035);
  color:#cbd2da;
  transition:transform .3s ease,background .3s ease;
}
.company-map-link:hover .company-map-arrow{
  transform:translate(2px,-2px);
  background:rgba(255,255,255,.07);
}

@media(max-width:980px){
  .company-map{
    height:260px;
  }
  .brand-tile-v2:not(.brand-tile-featured).has-product-visual .brand-visual-frame.is-active{
    transform:translate3d(0,0,0) scale(1.72)!important;
  }
  .brand-tile-v2.brand-tile-featured.has-product-visual .brand-visual-frame.is-active{
    transform:translate3d(0,0,0) scale(1.55)!important;
  }
}

@media(max-width:640px){
  .focus-panel-v2:after{
    width:300px;
    height:300px;
    right:-150px;
    top:-120px;
  }
  .hero-brand-hp,
  .hero-brand-dyson,
  .hero-brand-jbl,
  .hero-brand-lexar{
    animation-duration:8s;
  }
  .brand-tile-v2.has-product-visual .brand-product-visual,
  .brand-tile-v2.brand-tile-featured.has-product-visual .brand-product-visual{
    width:82%!important;
    height:78%!important;
    right:-10%!important;
    top:18%!important;
  }
  .brand-tile-v2:not(.brand-tile-featured).has-product-visual .brand-visual-frame.is-active,
  .brand-tile-v2.brand-tile-featured.has-product-visual .brand-visual-frame.is-active{
    transform:translate3d(0,0,0) scale(1.48)!important;
  }
  .company-map{
    height:230px;
    border-radius:26px;
  }
  .company-map-link{
    padding:16px;
  }
  .company-map-pin{
    width:30px;
    height:30px;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-brand-hp,
  .hero-brand-dyson,
  .hero-brand-jbl,
  .hero-brand-lexar{
    animation:none!important;
    translate:0 0!important;
  }
}


/* =========================================================
   VERSION 2.3.1 — iOS MOBILE ARROW FIX
   ========================================================= */
.brand-arrow-css{
  display:none;
}

/* On mobile, prevent iOS from rendering ↗ as a blue emoji. */
@media(max-width:640px){
  .brand-arrow-text{
    display:none!important;
  }

  .brand-arrow-css{
    display:inline-block;
    width:8px;
    height:8px;
    margin-inline-start:4px;
    position:relative;
    top:1px;
    border-top:1px solid currentColor;
    border-right:1px solid currentColor;
    opacity:.85;
  }

  .brand-arrow-css:after{
    content:"";
    position:absolute;
    width:8px;
    height:1px;
    background:currentColor;
    right:-1px;
    top:3px;
    transform:rotate(-45deg);
    transform-origin:right center;
  }
}