/* REBOULO® v2 — visual-first layer: cinematic hero, photo mosaics, catalogue hub, flipbook, basket. */

img.cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.ill { position: absolute; z-index: 3; inset-block-start: 10px; inset-inline-end: 10px; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; background: rgba(7,20,38,.7); color: #cfd8e6; border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(4px); }
html[lang="ar"] .ill { letter-spacing: 0; font-family: var(--f-ar); }
/* Hero photos run under the header: keep the "illustrative" label at the bottom so it never covers the menu button */
.dhero > .ill { inset-block-start: auto; inset-block-end: 14px; }

/* ---------- Header over hero ---------- */
body.on-hero .topbar { background: linear-gradient(180deg, rgba(4,12,24,.75), rgba(4,12,24,0)); border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.on-hero.scrolled .topbar { background: color-mix(in srgb, var(--deck) 92%, transparent); border-bottom-color: var(--deck-line); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
body.on-hero main { margin-top: -68px; }

/* ---------- Cinematic hero ---------- */
.hero2 { position: relative; min-height: clamp(600px, 88vh, 920px); background: var(--deck); color: #fff; overflow: hidden; isolation: isolate; display: grid; align-items: end; }
.hero2 .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); z-index: -2; }
.hero2 .slide.on { opacity: 1; }
.hero2 .slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); }
.hero2 .slide.on img { animation: kenburns 9s linear forwards; }
@keyframes kenburns { from { transform: scale(1.14) translate(1%, 1%); } to { transform: scale(1.02) translate(-1%, -1%); } }
.hero2::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(5,14,28,.94) 0%, rgba(5,14,28,.72) 38%, rgba(5,14,28,.18) 75%, rgba(5,14,28,.05) 100%), linear-gradient(0deg, rgba(5,14,28,.96) 0%, rgba(5,14,28,0) 42%); }
html[dir="rtl"] .hero2::before { background: linear-gradient(-90deg, rgba(5,14,28,.94) 0%, rgba(5,14,28,.72) 38%, rgba(5,14,28,.18) 75%, rgba(5,14,28,.05) 100%), linear-gradient(0deg, rgba(5,14,28,.96) 0%, rgba(5,14,28,0) 42%); }
.hero2 .inner { padding-block: 150px 34px; display: grid; gap: 40px; width: 100%; }
.hero2 h1 { font-size: clamp(2.5rem, 1.6rem + 4.6vw, 5.8rem); font-weight: 800; line-height: .98; max-width: 13ch; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
html[lang="ar"] .hero2 h1 { line-height: 1.22; max-width: 15ch; }
.hero2 h1 em { font-style: normal; background: linear-gradient(90deg, var(--amber-hi), var(--gold-hi)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero2 .lead { font-size: var(--step-1); color: #d6deea; max-width: 54ch; margin: 18px 0 28px; }
.hero2 .kicker { display: inline-flex; gap: 10px; align-items: center; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); padding: 7px 12px; border: 1px solid rgba(226,194,127,.35); border-radius: 999px; background: rgba(7,20,38,.45); backdrop-filter: blur(6px); }
html[lang="ar"] .hero2 .kicker { letter-spacing: 0; font-family: var(--f-ar); }
.hero2 .kicker i { width: 7px; height: 7px; border-radius: 99px; background: var(--signal); box-shadow: 0 0 0 4px rgba(56,211,159,.2); }
.hero2 .btn.glass { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); color: #fff; backdrop-filter: blur(8px); }
.hero2 .btn.glass:hover { background: rgba(255,255,255,.16); }
.hero-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.hero-tabs button { position: relative; text-align: start; background: rgba(7,20,38,.5); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 8px; display: grid; grid-template-columns: 54px 1fr; gap: 10px; align-items: center; color: #fff; backdrop-filter: blur(10px); overflow: hidden; transition: border-color .3s, background .3s; }
.hero-tabs button:hover, .hero-tabs button[aria-selected="true"] { border-color: rgba(240,138,36,.7); background: rgba(7,20,38,.75); }
.hero-tabs img { width: 54px; height: 40px; object-fit: cover; border-radius: 7px; }
.hero-tabs b { font-size: .82rem; display: block; line-height: 1.2; }
.hero-tabs small { font-family: var(--f-mono); font-size: .62rem; color: var(--gold-hi); }
.hero-tabs .bar { position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.08); }
.hero-tabs .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--amber)); }
.hero-tabs button[aria-selected="true"] .bar i { animation: tabbar 7s linear forwards; }
@keyframes tabbar { to { width: 100%; } }
@media (max-width: 1100px) { .hero-tabs { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 640px) { .hero-tabs { grid-template-columns: repeat(6, 64px); overflow-x: auto; } .hero-tabs button { grid-template-columns: 1fr; padding: 4px; } .hero-tabs button span { display: none; } .hero-tabs img { width: 100%; height: 44px; } .hero2 .inner { padding-block: 120px 24px; } }

/* ---------- Stat ribbon ---------- */
.ribbon { background: var(--deck); color: #fff; border-top: 1px solid var(--deck-line); border-bottom: 1px solid var(--deck-line); }
.ribbon .wrap { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); }
.ribbon div.s { padding: 22px 18px; border-inline-start: 1px solid var(--deck-line); }
.ribbon div.s:first-child { border-inline-start: 0; }
.ribbon b { font-family: var(--f-display); font-stretch: 118%; font-weight: 800; font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem); line-height: 1; display: block; background: linear-gradient(180deg, #fff, #b9c6da); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.ribbon span { font-size: .78rem; color: var(--deck-muted); display: block; margin-top: 6px; line-height: 1.35; }
@media (max-width: 900px) { .ribbon .wrap { grid-template-columns: repeat(3, minmax(0,1fr)); } .ribbon div.s:nth-child(4) { border-inline-start: 0; } .ribbon div.s:nth-child(n+4) { border-top: 1px solid var(--deck-line); } }
@media (max-width: 520px) { .ribbon .wrap { grid-template-columns: repeat(2, minmax(0,1fr)); } .ribbon div.s { border-inline-start: 0 !important; border-top: 1px solid var(--deck-line); } }

/* ---------- Bento mosaic ---------- */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: clamp(220px, 22vw, 300px); gap: 14px; }
.tile { position: relative; border-radius: 18px; overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; background: var(--deck); display: block; min-width: 0; }
.tile.xl { grid-column: span 2; grid-row: span 2; }
.tile.w2 { grid-column: span 2; }
.tile img.cover { position: absolute; inset: 0; z-index: -2; transition: transform 1.1s var(--ease); }
.tile:hover img.cover { transform: scale(1.07); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(4,12,24,.92) 0%, rgba(4,12,24,.35) 48%, rgba(4,12,24,.05) 100%); transition: background .4s; }
.tile:hover::after { background: linear-gradient(0deg, rgba(4,12,24,.95) 0%, rgba(4,12,24,.5) 60%, rgba(240,138,36,.12) 100%); }
.tile .tx { position: absolute; inset-inline: 0; bottom: 0; padding: 20px 22px; display: grid; gap: 6px; }
.tile .code { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .16em; color: var(--gold-hi); }
.tile h3 { font-size: clamp(1.2rem, 1rem + .8vw, 1.9rem); font-family: var(--f-display); font-stretch: 110%; }
html[lang="ar"] .tile h3 { font-family: var(--f-ar); }
.tile.xl h3 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.8rem); }
.tile p { font-size: .9rem; color: #cfd8e6; max-width: 46ch; }
.tile .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tile .chips span { font-size: .7rem; font-family: var(--f-mono); padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(6px); }
.tile .go { position: absolute; top: 16px; inset-inline-start: 16px; width: 40px; height: 40px; border-radius: 99px; display: grid; place-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(6px); transition: background .3s, transform .3s; }
.tile .go svg { width: 18px; height: 18px; }
.tile:hover .go { background: var(--amber); transform: rotate(-45deg); color: #1a0e02; }
html[dir="rtl"] .tile:hover .go { transform: rotate(45deg); }
@media (max-width: 1000px) { .bento { grid-template-columns: repeat(2, minmax(0,1fr)); } .tile.xl { grid-column: span 2; grid-row: span 1; } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; grid-auto-rows: 260px; } .tile.xl, .tile.w2 { grid-column: span 1; } }

/* ---------- Power showcase ---------- */
.series { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.series .sc { background: var(--deck-2); border: 1px solid var(--deck-line); border-radius: 16px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.series .sc .im { aspect-ratio: 4 / 3; position: relative; overflow: hidden; }
.series .sc .im img { transition: transform .9s var(--ease); }
.series .sc:hover .im img { transform: scale(1.06); }
.series .sc .b { padding: 16px 18px; display: grid; gap: 4px; }
.series .sc b { font-family: var(--f-display); font-stretch: 115%; font-size: 1.2rem; letter-spacing: .04em; }
.series .sc small { color: var(--deck-muted); font-size: .84rem; }
@media (max-width: 1000px) { .series { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .series { grid-template-columns: 1fr; } }
.brandbar { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.brandbar a { text-decoration: none; border: 1px solid var(--deck-line); border-radius: 12px; padding: 14px; background: rgba(255,255,255,.02); display: grid; gap: 2px; transition: border-color .2s, background .2s; }
.brandbar a:hover { border-color: var(--amber); background: rgba(240,138,36,.06); }
.brandbar b { font-size: 1rem; }
.brandbar span { font-family: var(--f-mono); font-size: .7rem; color: var(--deck-muted); }
.brandbar em { font-style: normal; font-family: var(--f-display); font-stretch: 115%; font-weight: 800; font-size: 1.6rem; color: var(--amber-hi); line-height: 1; }
@media (max-width: 1000px) { .brandbar { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 520px) { .brandbar { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.showsplit { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-bottom: 26px; }
.showsplit .big-im { border-radius: 18px; overflow: hidden; position: relative; aspect-ratio: 16 / 9; }
@media (max-width: 900px) { .showsplit { grid-template-columns: 1fr; } }

/* ---------- Product marquee ---------- */
.mq { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); padding-block: 6px; }
.mq .tr { display: flex; gap: 14px; width: max-content; animation: marquee 70s linear infinite; }
.mq.rev .tr { animation-direction: reverse; }
html[dir="rtl"] .mq .tr { animation-name: marquee-rtl; }
.mq:hover .tr { animation-play-state: paused; }
.pc { width: 220px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; display: block; transition: transform .3s var(--ease), box-shadow .3s; }
.pc:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pc .im { aspect-ratio: 3 / 2; position: relative; overflow: hidden; background: var(--bg-2); }
.pc .tx { padding: 10px 12px; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.pc b { font-size: .9rem; }
.pc span { font-family: var(--f-mono); font-size: .64rem; color: var(--muted); }

/* ---------- Split image feature ---------- */
.feature { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.feat { position: relative; border-radius: 20px; overflow: hidden; min-height: 480px; color: #fff; isolation: isolate; display: grid; align-content: end; padding: clamp(22px, 3vw, 36px); }
.feat img.cover { position: absolute; inset: 0; z-index: -2; transition: transform 1.2s var(--ease); }
.feat:hover img.cover { transform: scale(1.05); }
.feat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(4,12,24,.95) 10%, rgba(4,12,24,.4) 60%, rgba(4,12,24,.1)); }
.feat h3 { font-family: var(--f-display); font-stretch: 110%; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); margin: 10px 0 8px; }
html[lang="ar"] .feat h3 { font-family: var(--f-ar); }
.feat p { color: #d1dae7; max-width: 50ch; }
.feat .route { display: flex; gap: 8px; align-items: center; font-family: var(--f-mono); font-size: .76rem; color: var(--gold-hi); letter-spacing: .1em; }
.feat .route i { flex: 0 0 40px; height: 1px; background: linear-gradient(90deg, var(--gold), var(--amber)); }
.feat .docs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px; }
.feat .docs span { font-size: .74rem; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } .feat { min-height: 420px; } }

/* ---------- Industries / cities ---------- */
.ind { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.ind .ic2 { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; color: #fff; isolation: isolate; display: grid; align-content: end; padding: 16px 18px; }
.ind .ic2 img.cover { position: absolute; inset: 0; z-index: -2; transition: transform 1s var(--ease); }
.ind .ic2:hover img.cover { transform: scale(1.06); }
.ind .ic2::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(4,12,24,.9), rgba(4,12,24,0) 65%); }
.ind .ic2 b { font-size: 1.1rem; }
.ind .ic2 small { color: #cdd6e3; font-size: .8rem; }
@media (max-width: 860px) { .ind { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .ind { grid-template-columns: 1fr; } }
.cities { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.city { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; color: #fff; isolation: isolate; display: grid; align-content: end; padding: 16px 18px; text-decoration: none; }
.city img.cover { position: absolute; inset: 0; z-index: -2; transition: transform 1s var(--ease); }
.city:hover img.cover { transform: scale(1.06); }
.city::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(4,12,24,.92), rgba(4,12,24,.05) 70%); }
.city .flag { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em; color: var(--gold-hi); }
.city b { font-size: 1.15rem; }
.city small { color: #cdd6e3; font-size: .8rem; }
@media (max-width: 760px) { .cities { grid-template-columns: 1fr; } }

/* ---------- Image band ---------- */
.imgband { position: relative; color: #fff; isolation: isolate; overflow: hidden; }
.imgband > img.cover { position: absolute; inset: 0; z-index: -2; }
.imgband::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,14,28,.88), rgba(5,14,28,.78)); }
.imgband .process .dot { background: rgba(7,20,38,.85); }
.imgband .process p { color: #c8d2e0; }
.imgband .eyebrow { color: var(--gold-hi); }

/* ---------- Flipbook ---------- */
.books { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.book { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; }
.book .cv { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 18px 40px -16px rgba(0,0,0,.5); transform: perspective(600px) rotateY(-10deg); transition: transform .5s var(--ease); aspect-ratio: 1055 / 1491; background: var(--deck); }
html[dir="rtl"] .book .cv { transform: perspective(600px) rotateY(10deg); }
.book:hover .cv { transform: perspective(600px) rotateY(0); }
.book.land .cv { aspect-ratio: 1.414; }
.book h3 { font-size: 1.15rem; }
.book p { color: var(--muted); font-size: .88rem; margin: 6px 0 12px; }
@media (max-width: 860px) { .books { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .book { grid-template-columns: 1fr; } .book .cv { max-width: 180px; } }
.pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pages button { border: 1px solid var(--line); background: var(--surface); padding: 0; border-radius: 8px; overflow: hidden; aspect-ratio: var(--ar, 0.707); position: relative; transition: transform .3s var(--ease), box-shadow .3s; }
.pages button:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pages button span { position: absolute; bottom: 6px; inset-inline-start: 6px; font-family: var(--f-mono); font-size: .62rem; background: rgba(7,20,38,.8); color: #fff; padding: 2px 6px; border-radius: 4px; }
.lightbox { position: fixed; inset: 0; z-index: 97; background: rgba(2,7,15,.94); display: none; grid-template-rows: auto 1fr auto; padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px)); }
.lightbox[data-open="true"] { display: grid; animation: fade .2s; }
.lightbox .lt { display: flex; justify-content: space-between; align-items: center; color: #fff; gap: 12px; padding: 0 6px 10px; }
.lightbox .lt span { font-family: var(--f-mono); font-size: .8rem; color: #9daac0; }
.lightbox .stage { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; min-height: 0; }
.lightbox .stage img { max-height: calc(100vh - 140px); max-width: 100%; margin: auto; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.6); object-fit: contain; }
.lightbox .nav { width: 48px; height: 48px; border-radius: 99px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; display: grid; place-items: center; }
.lightbox .nav svg { width: 20px; height: 20px; }
.lightbox .prev svg { transform: scaleX(-1); }
html[dir="rtl"] .lightbox .prev svg { transform: none; } html[dir="rtl"] .lightbox .next svg { transform: scaleX(-1); }
.lightbox .close { color: #fff; border-color: rgba(255,255,255,.3); }
.lightbox .strip { display: flex; gap: 6px; overflow-x: auto; padding-top: 10px; justify-content: center; }
.lightbox .strip img { height: 54px; border-radius: 4px; opacity: .5; cursor: pointer; border: 2px solid transparent; }
.lightbox .strip img.on { opacity: 1; border-color: var(--amber); }

/* ---------- Division hero (image) ---------- */
.dhero { position: relative; min-height: clamp(460px, 70vh, 720px); color: #fff; isolation: isolate; overflow: hidden; display: grid; align-items: end; background: var(--deck); }
.dhero > img.cover { position: absolute; inset: 0; z-index: -2; animation: kenburns 14s linear forwards; }
.dhero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,14,28,.92), rgba(5,14,28,.55) 50%, rgba(5,14,28,.15)), linear-gradient(0deg, rgba(5,14,28,.95), rgba(5,14,28,0) 50%); }
html[dir="rtl"] .dhero::after { background: linear-gradient(-90deg, rgba(5,14,28,.92), rgba(5,14,28,.55) 50%, rgba(5,14,28,.15)), linear-gradient(0deg, rgba(5,14,28,.95), rgba(5,14,28,0) 50%); }
.dhero .inner { padding-block: 140px 44px; display: grid; gap: 14px; max-width: 820px; }
.dhero h1 { font-size: clamp(2.2rem, 1.5rem + 3.2vw, 4.4rem); font-weight: 800; line-height: 1.02; }
html[lang="ar"] .dhero h1 { line-height: 1.25; }
.dhero p.lead { color: #d6deea; font-size: var(--step-1); max-width: 58ch; }
.dhero .crumbs a, .dhero .crumbs { color: #b8c4d6; }
.dhero .chips .chip { color: #fff; border-color: rgba(255,255,255,.25); background: rgba(7,20,38,.4); backdrop-filter: blur(6px); }
.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 200px 200px; gap: 12px; margin-bottom: 48px; }
.gallery button { position: relative; border: 0; padding: 0; border-radius: 14px; overflow: hidden; background: var(--deck); }
.gallery button:first-child { grid-row: span 2; }
.gallery button:nth-child(4) { grid-column: span 2; }
.gallery img { transition: transform .9s var(--ease); }
.gallery button:hover img { transform: scale(1.05); }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 140px 140px; } .gallery button:first-child { grid-column: span 2; grid-row: span 1; } .gallery button:nth-child(4) { grid-column: span 2; } }

/* ---------- Catalogue hub ---------- */
.cat-hero { position: relative; color: #fff; isolation: isolate; overflow: hidden; background: var(--deck); }
.cat-hero .mosaic { position: absolute; inset: 0; z-index: -2; display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 1fr; opacity: .55; }
.cat-hero .mosaic img { width: 100%; height: 100%; object-fit: cover; }
.cat-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,14,28,.96), rgba(5,14,28,.75) 55%, rgba(5,14,28,.45)), linear-gradient(0deg, rgba(5,14,28,1), rgba(5,14,28,0) 45%); }
html[dir="rtl"] .cat-hero::after { background: linear-gradient(-90deg, rgba(5,14,28,.96), rgba(5,14,28,.75) 55%, rgba(5,14,28,.45)), linear-gradient(0deg, rgba(5,14,28,1), rgba(5,14,28,0) 45%); }
.cat-hero .inner { padding-block: 130px 30px; display: grid; gap: 14px; }
.cat-hero h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 4.2rem); font-weight: 800; }
.cat-hero p { color: #d0d9e6; font-size: var(--step-1); max-width: 60ch; }
.ctabs { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.ctabs button { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(7,20,38,.55); color: #fff; padding: 0; text-align: start; display: grid; grid-template-rows: 70px auto; backdrop-filter: blur(8px); transition: border-color .25s, transform .25s; }
.ctabs button:hover { transform: translateY(-2px); }
.ctabs button[aria-selected="true"] { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber) inset; }
.ctabs img { width: 100%; height: 70px; object-fit: cover; opacity: .85; }
.ctabs span { padding: 9px 11px; display: grid; gap: 1px; }
.ctabs b { font-size: .86rem; line-height: 1.2; }
.ctabs small { font-family: var(--f-mono); font-size: .66rem; color: var(--gold-hi); }
@media (max-width: 1000px) { .ctabs { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 560px) { .ctabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; } .ctabs button { flex: 0 0 140px; scroll-snap-align: start; } }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.toolbar .search { flex: 1 1 260px; }
.toolbar select { padding: .78em .9em; border-radius: var(--r-m); border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); font: inherit; font-size: .9rem; }
.rangebox { display: flex; gap: 10px; align-items: center; font-size: .82rem; color: var(--muted); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-m); padding: 8px 12px; flex-wrap: wrap; }
.rangebox input[type="range"] { width: 130px; }
.rangebox b { font-family: var(--f-mono); color: var(--fg); font-weight: 500; min-width: 7ch; display: inline-block; }
.seg2 { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-m); overflow: hidden; }
.seg2 button { border: 0; background: var(--surface); padding: .7em .95em; font-size: .84rem; font-weight: 700; }
.seg2 button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.gen-banner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0; border-radius: 18px; overflow: hidden; background: var(--deck); color: #fff; margin-bottom: 18px; }
.gen-banner .im { position: relative; min-height: 260px; }
.gen-banner .tx { padding: clamp(18px, 3vw, 32px); display: grid; gap: 10px; align-content: center; }
.gen-banner .tx p { color: #c8d2e0; font-size: .92rem; }
.gen-banner .tx .eyebrow { color: var(--gold-hi); }
.gen-banner .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.gen-banner .kpis div { border: 1px solid var(--deck-line); border-radius: 10px; padding: 10px; }
.gen-banner .kpis b { font-family: var(--f-display); font-stretch: 115%; font-size: 1.6rem; color: var(--amber-hi); display: block; line-height: 1; }
.gen-banner .kpis span { font-size: .72rem; color: var(--deck-muted); }
@media (max-width: 860px) { .gen-banner { grid-template-columns: 1fr; } }
.gtable td.bar { width: 34%; min-width: 160px; }
.kbar { position: relative; height: 22px; border-radius: 4px; background: var(--bg-2); overflow: hidden; }
.kbar i { position: absolute; inset-block: 0; inset-inline-start: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 70%, transparent), var(--amber)); border-radius: 4px; }
.kbar i.p { background: color-mix(in srgb, var(--fg) 30%, transparent); }
.kbar em { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); font-style: normal; font-family: var(--f-mono); font-size: .68rem; color: var(--fg); }
.gtable tbody tr:hover { background: color-mix(in srgb, var(--amber) 6%, transparent); }
.gtable .brandtag { font-family: var(--f-mono); font-size: .66rem; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line-strong); color: var(--muted); }
.gtable input[type="checkbox"] { accent-color: var(--amber); width: 16px; height: 16px; }
.gtable .model { font-family: var(--f-mono); font-weight: 600; white-space: nowrap; }
.gtable .act { white-space: nowrap; }
.fgrid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.fcard { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.fcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.fcard.in { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.fcard .im { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-2); }
.fcard .im img { transition: transform .8s var(--ease); }
.fcard:hover .im img { transform: scale(1.06); }
.fcard .code { position: absolute; top: 8px; inset-inline-start: 8px; font-family: var(--f-mono); font-size: .62rem; padding: 2px 6px; border-radius: 4px; background: rgba(7,20,38,.78); color: #fff; }
.fcard .b { padding: 10px 12px 12px; display: grid; gap: 8px; align-content: start; }
.fcard b { font-size: .95rem; }
.fcard small { color: var(--muted); font-size: .74rem; }
.fcard .add { display: flex; gap: 6px; }
.fcard .add button { flex: 1; font-size: .78rem; padding: .5em .6em; }
.chipcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.chipcloud span { border: 1px solid var(--line-strong); border-radius: 999px; padding: .45em .9em; font-size: .86rem; background: var(--surface); }
.chipcloud span small { color: var(--muted); margin-inline-start: 6px; font-size: .74rem; }
.rangeblk { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 22px; align-items: start; padding: 22px 0; border-top: 1px solid var(--line); }
.rangeblk .im { border-radius: 14px; overflow: hidden; aspect-ratio: 3 / 2; position: relative; }
.rangeblk h3 { font-size: var(--step-1); margin-bottom: 4px; }
.rangeblk p { color: var(--muted); font-size: .88rem; margin-bottom: 12px; }
@media (max-width: 760px) { .rangeblk { grid-template-columns: 1fr; } }
.photo-prod .im { aspect-ratio: 16 / 10; }

/* ---------- Basket ---------- */
.basket-fab { position: fixed; z-index: 70; inset-inline-end: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 999px; background: var(--amber); color: #1a0e02; border: 0; font-weight: 800; box-shadow: 0 18px 40px -12px rgba(240,138,36,.6); transition: transform .3s var(--ease); }
.basket-fab:hover { transform: translateY(-2px); }
.basket-fab svg { width: 20px; height: 20px; }
.basket-fab .n { background: #1a0e02; color: #fff; border-radius: 99px; min-width: 24px; height: 24px; display: grid; place-items: center; font-size: .78rem; font-family: var(--f-mono); }
.basket-list { display: grid; gap: 8px; }
.basket-list div { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.basket-list img { width: 56px; height: 40px; object-fit: cover; border-radius: 6px; }
.basket-list .ph { width: 56px; height: 40px; border-radius: 6px; background: var(--bg-2); display: grid; place-items: center; font-family: var(--f-mono); font-size: .62rem; color: var(--muted); }

/* Credits */
.credit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.credit { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 8px; background: var(--surface); font-size: .78rem; min-width: 0; }
.credit img { width: 84px; height: 60px; object-fit: cover; border-radius: 8px; }
.credit span { color: var(--muted); word-break: break-word; }
.ent-photo { position: relative; aspect-ratio: 16 / 7; overflow: hidden; }
.ent-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,20,38,.85), rgba(7,20,38,0) 60%); }
.lic-list { display: flex; flex-wrap: wrap; gap: 6px; }
.lic-list span { font-size: .74rem; border: 1px solid var(--line-strong); border-radius: 999px; padding: .3em .7em; }
.lic-list span b { font-family: var(--f-mono); font-weight: 500; color: var(--muted); margin-inline-end: 4px; }

/* ---------- Contracting showcase (large) ---------- */
.conshow { background: var(--deck); color: #fff; padding-bottom: clamp(56px, 8vw, 100px); }
.con-hero { position: relative; isolation: isolate; min-height: clamp(560px, 82vh, 860px); display: grid; align-items: center; overflow: hidden; }
.con-hero > img.cover { position: absolute; inset: 0; z-index: -2; }
.con-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,14,28,.95), rgba(5,14,28,.7) 45%, rgba(5,14,28,.1)), linear-gradient(0deg, var(--deck), rgba(5,14,28,0) 30%); }
html[dir="rtl"] .con-hero::after { background: linear-gradient(-90deg, rgba(5,14,28,.95), rgba(5,14,28,.7) 45%, rgba(5,14,28,.1)), linear-gradient(0deg, var(--deck), rgba(5,14,28,0) 30%); }
.con-tx { max-width: 640px; display: grid; gap: 18px; padding-block: 60px; }
.con-tx h2 { font-size: clamp(2.4rem, 1.5rem + 4vw, 5.2rem); font-weight: 800; line-height: 1; }
html[lang="ar"] .con-tx h2 { line-height: 1.25; }
.con-tx p { color: #d0d9e6; font-size: var(--step-1); }
.con-kpi { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.con-kpi div { border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 12px 14px; background: rgba(7,20,38,.45); backdrop-filter: blur(8px); }
.con-kpi b { display: block; font-family: var(--f-display); font-stretch: 112%; font-size: 1.05rem; color: var(--amber-hi); }
.con-kpi span { font-size: .76rem; color: #b8c4d6; }
@media (max-width: 560px) { .con-kpi { grid-template-columns: 1fr; } }
.con-fam { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; margin-top: -60px; position: relative; }
.con-fam .ic2 { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; color: #fff; isolation: isolate; display: grid; align-content: end; padding: 14px; border: 1px solid rgba(255,255,255,.1); }
.con-fam .ic2 img.cover { position: absolute; inset: 0; z-index: -2; transition: transform 1s var(--ease); }
.con-fam .ic2:hover img.cover { transform: scale(1.07); }
.con-fam .ic2::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(4,12,24,.92), rgba(4,12,24,0) 60%); }
.con-fam b { font-size: .98rem; line-height: 1.2; }
.con-fam small { font-family: var(--f-mono); font-size: .68rem; color: var(--gold-hi); }
@media (max-width: 1000px) { .con-fam { grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: -40px; } }
@media (max-width: 520px) { .con-fam { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.con-off { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--deck-line); border: 1px solid var(--deck-line); border-radius: 16px; overflow: hidden; margin-top: 22px; }
.con-off div { background: var(--deck-2); padding: 18px 20px; display: grid; gap: 4px; align-content: start; }
.con-off span { color: var(--amber-hi); width: 22px; height: 22px; } .con-off span svg { width: 22px; height: 22px; }
.con-off b { font-size: 1rem; } .con-off small { color: var(--deck-muted); font-size: .84rem; }
@media (max-width: 860px) { .con-off { grid-template-columns: 1fr; } }
.mfg { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.mfg div { border: 1px solid var(--deck-line); border-radius: 12px; padding: 12px; }
.mfg b { display: block; font-family: var(--f-display); font-stretch: 115%; font-weight: 800; font-size: 1.7rem; color: #5BE3B4; line-height: 1; }
.mfg span { font-size: .74rem; color: var(--deck-muted); }
.cities { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1000px) { .cities { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .cities { grid-template-columns: 1fr; } }
.partner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0; border-radius: 18px; overflow: hidden; background: #000; color: #fff; border: 1px solid var(--deck-line); margin-top: 22px; }
.partner .im { position: relative; min-height: 220px; background: #000; }
.partner .im img { object-fit: cover; }
.partner .tx { padding: 22px 24px; display: grid; gap: 8px; align-content: center; background: var(--deck-2); }
.partner .tx p { color: #c8d2e0; font-size: .9rem; }
@media (max-width: 860px) { .partner { grid-template-columns: 1fr; } }

/* ---------- Official REBOULO® logo lockups ---------- */
.brand { gap: 14px; align-items: center; }
.brand svg.rb-logo-h, .brand svg.rb-logo-stacked { width: auto; flex-shrink: 0; display: block; }
.topbar .brand svg.rb-logo-h { height: 46px; }
.drawer .brand svg.rb-logo-h { height: 42px; }
footer.site .brand svg.rb-logo-stacked { height: 76px; }
footer.site .brand { align-items: center; }
footer.site .brand .sub {
  font-family: var(--f-mono); font-size: .58rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold); line-height: 1.6; max-width: 8em; display: block;
  padding-inline-start: 14px; border-inline-start: 1px solid rgba(198,161,90,.45);
}
html[lang="ar"] footer.site .brand .sub { letter-spacing: 0; font-family: var(--f-ar); font-size: .68rem; max-width: 9em; }
@media (max-width: 1080px) { .topbar .brand svg.rb-logo-h { height: 40px; } }
@media (max-width: 420px) { .topbar .brand svg.rb-logo-h { height: 34px; } }
.ent-mark { display: block; width: 34px; flex-shrink: 0; opacity: .92; }
.entity .head svg.rb-logo-mark { width: 34px; height: 34px; display: block; }