/*
Theme Name: BACKBEYA
Theme URI: https://backbeya.com
Author: BACKBEYA
Description: Arabic RTL digital-marketing agency theme (BACKBEYA Creative & Tech) with a scroll-driven 3D monogram hero. Editable from Appearance → Customize and the Services / Works menus. No audio.
Version: 1.2.0
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: backbeya
*/
:root{--red:#e0101a;--bg:#000;--bg2:#0a0a0b;--mut:#9a9a9f;--line:rgba(255,255,255,.08)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg);color:#fff;font-family:"Tajawal","Segoe UI",Tahoma,system-ui,sans-serif;line-height:1.7;overflow-x:clip}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
.bb-wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.bb-ico{display:inline-block;vertical-align:middle;flex:none}
/* header */
.bb-header{position:absolute;inset:0 0 auto 0;z-index:30;direction:ltr;border-bottom:1px solid var(--line)}
.bb-header__in{max-width:1240px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.bb-logo img{height:40px;width:auto}.bb-logo{display:block;line-height:0}
.bb-nav{direction:rtl}.bb-menu{display:flex;gap:clamp(14px,2.4vw,34px);list-style:none;margin:0;padding:0;font-size:14px}
.bb-menu a{position:relative;display:block;padding:6px 0;color:#e8e8ea}
.bb-menu .current-menu-item>a,.bb-menu .is-current>a,.bb-menu a:hover{color:var(--red)}
.bb-menu .current-menu-item>a::after,.bb-menu .is-current>a::after{content:"";position:absolute;inset:auto 0 -6px 50%;width:22px;height:2px;margin-left:-11px;background:var(--red)}
.bb-burger{width:42px;height:42px;background:none;border:0;cursor:pointer;display:grid;place-content:center;gap:5px}
.bb-burger i{display:block;width:24px;height:2px;background:#fff}.bb-burger i:nth-child(2){width:18px;margin-left:auto}
.bb-drawer{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.96);display:none;align-items:center;justify-content:center;direction:rtl}
.bb-menu-open .bb-drawer{display:flex}.bb-drawer .bb-menu{flex-direction:column;align-items:center;font-size:22px;gap:22px}
.bb-drawer__close{position:absolute;top:18px;left:24px;background:none;border:0;color:#fff;font-size:34px;cursor:pointer}
/* hero (3D) — art on the physical right, copy on the left, as in the design */
.bb-hero3d{background:radial-gradient(ellipse 60% 55% at 72% 42%,rgba(224,16,26,.22),transparent 70%),#000}
.bb-hero3d__sticky{direction:ltr}.bb-hero3d__copy{direction:rtl;text-align:right;padding:96px 24px 40px max(24px,calc((100vw - 1240px)/2))}
.bb-eyebrow{display:flex;align-items:center;gap:12px;color:#d6d6d8;font-size:14px;margin:0 0 14px}
.bb-eyebrow i{width:52px;height:1px;background:var(--red)}
.bb-title{font-size:clamp(26px,3.6vw,50px);line-height:1.3;margin:0 0 16px;font-weight:800}.bb-title span{display:block;color:var(--red)}
.bb-lead{color:#cfcfd2;font-size:clamp(14px,1.3vw,16px);max-width:30em;margin:0 0 26px}
.bb-btns{display:flex;flex-wrap:wrap;gap:12px}
.bb-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;border-radius:99px;font-size:14px;font-weight:500;border:1px solid rgba(255,255,255,.45);transition:.2s}
.bb-btn--red{background:var(--red);border-color:var(--red)}.bb-btn--red:hover{background:#ff2630}
.bb-btn--ghost{border-color:var(--red)}.bb-btn--ghost:hover{background:var(--red)}
.bb-more{display:inline-flex;align-items:center;gap:10px;margin-top:34px;font-size:13px;color:#aaa}
.bb-hero-tags{position:absolute;z-index:2;inset:34% 24px auto auto;direction:ltr;text-align:right;font-size:12.5px;line-height:1.9;color:#cfcfd2;padding-right:14px;border-right:2px solid var(--red)}
/* sections */
.bb-sec{padding:64px 0;border-top:1px solid var(--line);background:linear-gradient(180deg,#09090a,#050506)}
.bb-split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:center;direction:ltr}
.bb-split>*{direction:rtl;min-width:0}.bb-side{text-align:right}
.bb-kicker{color:var(--red);font-size:13px;margin:0 0 6px}
.bb-h2{font-size:clamp(22px,2.6vw,34px);line-height:1.35;margin:0 0 14px;font-weight:800}
.bb-desc{color:var(--mut);font-size:14px;margin:0 0 20px}
.bb-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;direction:rtl}
.bb-cards>:last-child:nth-child(4n+1){grid-column:4}
.bb-card{padding:20px 12px;text-align:center;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03)}
.bb-card .bb-ico{color:var(--red);margin-bottom:8px}.bb-card h3{margin:0;font-size:15px}.bb-card p{margin:2px 0 0;font-size:12.5px;color:var(--mut)}
.bb-carousel{direction:ltr;min-width:0}
.bb-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.bb-track::-webkit-scrollbar{display:none}
.bb-work{flex:0 0 calc((100% - 36px)/4);scroll-snap-align:start;aspect-ratio:5/6;border-radius:10px;overflow:hidden;background:#111}
.bb-work img{width:100%;height:100%;object-fit:cover}
.bb-ctl{display:flex;justify-content:space-between;align-items:center;margin-top:14px;color:var(--mut);font-size:14px}
.bb-ctl button{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:none;color:#fff;cursor:pointer;margin-right:8px}
.bb-ctl b{color:var(--red);font-weight:500}
.bb-stats{display:grid;grid-template-columns:repeat(3,1fr);direction:rtl;text-align:center}
.bb-stat+.bb-stat{border-right:1px solid var(--line)}.bb-stat b{display:block;color:var(--red);font-size:clamp(26px,3vw,38px);font-weight:800;line-height:1.2}.bb-stat span{color:#cfcfd2;font-size:15px}
.bb-why{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:40px;align-items:center;direction:ltr}
.bb-why__img{align-self:stretch;min-height:240px;margin-left:-24px;clip-path:polygon(0 0,100% 0,84% 100%,0 100%)}
.bb-why__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) brightness(.8)}
.bb-why__txt{direction:rtl;text-align:right}
.bb-feats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:24px}
.bb-feat{text-align:center;padding:0 10px}.bb-feat+.bb-feat{border-right:1px solid var(--line)}
.bb-feat .bb-ico{color:var(--red)}.bb-feat h3{margin:6px 0 0;font-size:14px}.bb-feat p{margin:0;font-size:12.5px;color:var(--mut)}
/* footer */
.bb-footer{border-top:1px solid var(--line);background:#050506;padding:46px 0 0}
.bb-foot{display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px;align-items:center;direction:ltr}
.bb-foot>*{direction:rtl}.bb-foot__brand{direction:ltr}.bb-foot__brand img{height:44px;width:auto;margin-bottom:10px}
.bb-foot__brand p{margin:0 0 12px;color:var(--mut);font-size:13px;direction:rtl}
.bb-social{display:flex;gap:10px;direction:ltr}.bb-social a{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center}.bb-social a:hover{border-color:var(--red);color:var(--red)}
.bb-foot__cta{text-align:center}.bb-foot__cta small{color:var(--red);font-size:12px}.bb-foot__cta h3{margin:4px 0 14px;font-size:20px}
.bb-contact{list-style:none;margin:0;padding:0;font-size:13.5px;color:#d6d6d8;display:grid;gap:10px;direction:ltr;text-align:left;justify-self:end}
.bb-contact li{display:flex;gap:10px;align-items:center;direction:ltr}.bb-contact .bb-ico{color:var(--mut)}.bb-contact span[dir=rtl]{direction:rtl}
.bb-copy{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;direction:ltr;margin-top:32px;padding:16px 0;border-top:1px solid var(--line);color:#777;font-size:12px}
.bb-copy nav{direction:rtl;display:flex;gap:14px}
.bb-top{position:fixed;right:20px;bottom:20px;z-index:20;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.7);color:#fff;cursor:pointer;display:none;place-items:center}
.bb-top.is-on{display:grid}
.bb-page{padding:120px 0 64px}.bb-page h1{font-size:clamp(24px,3vw,38px)}
@media (max-width:900px){
 .bb-split,.bb-why{grid-template-columns:1fr;gap:28px}.bb-split .bb-side{order:-1}
 .bb-work{flex-basis:62%}.bb-foot{grid-template-columns:1fr;text-align:center;justify-items:center}.bb-contact{justify-self:center}
 .bb-why__img{margin-left:0;clip-path:none;min-height:200px;order:2}
}
@media (max-width:768px){
 .bb-nav{display:none}.bb-hero-tags{display:none}.bb-hero3d__copy{padding:84px 20px 0}
 .bb-cards{grid-template-columns:repeat(2,1fr)}.bb-cards>:last-child:nth-child(4n+1){grid-column:auto}
 .bb-feats{grid-template-columns:repeat(2,1fr);row-gap:20px}.bb-feat:nth-child(odd){border-right:0}
 .bb-stat span{font-size:13px}.bb-sec{padding:48px 0}
}
/* ---- banner hero (default) ---- */
.bb-hero{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);direction:ltr;overflow:clip;background:radial-gradient(ellipse 60% 55% at 72% 42%,rgba(224,16,26,.2),transparent 70%),#000}
.bb-hero__copy{direction:rtl;text-align:right;align-self:center;position:relative;z-index:2;padding:110px 24px 60px max(24px,calc((100vw - 1240px)/2))}
.bb-hero__art{position:relative;min-height:60svh}
.bb-hero__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right bottom;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);mask-image:linear-gradient(90deg,transparent 0,#000 24%)}
.bb-hero__art::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 40% 40% at 45% 62%,rgba(255,20,30,.18),transparent 70%);mix-blend-mode:screen;animation:bbpulse 5s ease-in-out infinite;pointer-events:none}
@keyframes bbpulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.bb-hero__art::after{animation:none}}
@media (max-width:768px){.bb-hero{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);min-height:0}.bb-hero__copy{padding:90px 20px 0}.bb-hero__art{min-height:56vw}.bb-hero__art img{-webkit-mask-image:linear-gradient(0deg,#000 70%,transparent);mask-image:linear-gradient(0deg,#000 70%,transparent);object-position:center bottom}}
/* ---- inner pages ---- */
a.bb-card{display:block;transition:.2s}a.bb-card:hover{border-color:var(--red);transform:translateY(-3px)}
.bb-phead{padding:120px 0 36px;border-bottom:1px solid var(--line);background:radial-gradient(ellipse 60% 120% at 80% 0,rgba(224,16,26,.16),transparent 70%),#050506;text-align:right}
.bb-phead h1{font-size:clamp(24px,3.2vw,40px);margin:0 0 6px;font-weight:800}
.bb-prose{color:#d6d6d8;font-size:15px;max-width:46em;margin:0 0 24px}.bb-prose p{margin:0 0 14px}.bb-prose .bb-ico{color:var(--red);margin-bottom:10px}
.bb-wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bb-wcard{position:relative;display:block;aspect-ratio:5/6;border-radius:12px;overflow:hidden;background:#111}
.bb-wcard img{width:100%;height:100%;object-fit:cover;transition:.4s}.bb-wcard:hover img{transform:scale(1.05)}
.bb-wcard span{position:absolute;inset:auto 0 0 0;padding:28px 14px 12px;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);font-weight:700;font-size:15px}
.bb-work-hero{width:100%;max-height:560px;object-fit:cover;border-radius:12px;margin-bottom:24px}
.bb-form{display:grid;gap:14px;direction:rtl}.bb-form label{display:grid;gap:6px;font-size:14px;color:#d6d6d8}
.bb-form input,.bb-form select,.bb-form textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:#0d0d0f;color:#fff;font:inherit}
.bb-form input:focus,.bb-form select:focus,.bb-form textarea:focus{outline:0;border-color:var(--red)}
.bb-form .bb-btn{justify-self:start;cursor:pointer}.bb-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.bb-note{margin:0;padding:12px 14px;border-radius:10px;font-size:14px}.bb-note--ok{background:rgba(40,160,80,.15);border:1px solid #28a050}.bb-note--err{background:rgba(224,16,26,.12);border:1px solid var(--red)}
.bb-contact--page{justify-self:start;margin:0 0 16px;direction:rtl}.bb-contact--page li{direction:rtl}.bb-contact--page a{color:#fff}
@media (max-width:900px){.bb-wgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.bb-wgrid{grid-template-columns:1fr}.bb-form .bb-btn{justify-self:stretch;justify-content:center}}