/* ===========================================================
   East Riyadh Steel Works — حدادة شرق الرياض
   Design tokens
=========================================================== */
:root{
  --ink:#111111;
  --gold:#C8A349;
  --gold-soft:#e6cd8c;
  --gold-dim:#8f7530;
  --white:#ffffff;
  --bg-light:#f6f5f2;
  --bg-light-2:#efece5;
  --card-light:rgba(255,255,255,0.62);
  --text-light:#151412;
  --muted-light:#5b564c;

  --bg-dark:#0a0a0a;
  --bg-dark-2:#131211;
  --card-dark:rgba(255,255,255,0.045);
  --text-dark:#f5f2ea;
  --muted-dark:#a89f8c;

  --radius-lg:26px;
  --radius-md:18px;
  --radius-sm:12px;
  --shadow-soft:0 20px 60px -20px rgba(17,17,17,.25);
  --shadow-gold:0 10px 40px -12px rgba(200,163,73,.45);
  --ease:cubic-bezier(.16,.84,.44,1);
}

html[data-theme="light"]{
  --bg:var(--bg-light);
  --bg-2:var(--bg-light-2);
  --card:var(--card-light);
  --text:var(--text-light);
  --muted:var(--muted-light);
  --border:rgba(17,17,17,.09);
  --nav-bg:rgba(255,255,255,.55);
}
html[data-theme="dark"]{
  --bg:var(--bg-dark);
  --bg-2:var(--bg-dark-2);
  --card:var(--card-dark);
  --text:var(--text-dark);
  --muted:var(--muted-dark);
  --border:rgba(255,255,255,.09);
  --nav-bg:rgba(10,10,10,.55);
}

/* ===== Fonts ===== */
html[lang="ar"]{ --f-display:'Almarai', sans-serif; --f-body:'Almarai', sans-serif; }
html[lang="en"]{ --f-display:'Poppins', sans-serif; --f-body:'Inter', sans-serif; }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-weight:400;
  transition:background .5s var(--ease),color .5s var(--ease);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{
  font-family:var(--f-display);
  font-weight:800;
  letter-spacing:-.01em;
  margin:0;
}
p{color:var(--muted); line-height:1.85; margin:0;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
section{position:relative;}
::selection{background:var(--gold);color:#111;}

.container-xl{max-width:1280px;margin:0 auto;padding:0 24px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-display);
  font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); font-weight:700;
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);display:inline-block;border-radius:2px;}
[dir="rtl"] .eyebrow{letter-spacing:0;}

.section-pad{padding:120px 0;}
@media(max-width:768px){.section-pad{padding:76px 0;}}

.btn-gold{
  background:linear-gradient(135deg,var(--gold) 0%, #b58f3c 100%);
  color:#141208; font-weight:700; font-family:var(--f-display);
  border:none; padding:16px 34px; border-radius:999px;
  box-shadow:var(--shadow-gold);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-size:15px;
}
.btn-gold:hover{transform:translateY(-3px) scale(1.02); box-shadow:0 18px 46px -10px rgba(200,163,73,.6); color:#141208;}

.btn-outline{
  background:transparent; border:1.5px solid var(--border);
  color:var(--text); font-weight:700; font-family:var(--f-display);
  padding:15px 32px; border-radius:999px; backdrop-filter:blur(10px);
  transition:all .35s var(--ease); display:inline-flex; align-items:center; gap:10px;
  font-size:15px;
}
.btn-outline:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-3px);}

.btn-ghost{
  background:var(--card); border:1px solid var(--border);
  color:var(--text); padding:15px 30px; border-radius:999px;
  font-family:var(--f-display); font-weight:700; backdrop-filter:blur(14px);
  transition:all .35s var(--ease); display:inline-flex; align-items:center; gap:10px; font-size:15px;
}
.btn-ghost:hover{transform:translateY(-3px); border-color:var(--gold);}

/* ===== Preloader ===== */
#preloader{
  position:fixed; inset:0; z-index:9999; background:#0a0a0a;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px;
  transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
#preloader svg{width:140px;height:70px;}
#preloader .truss-line{fill:none; stroke:var(--gold); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:400; stroke-dashoffset:400; animation:draw 1.6s var(--ease) forwards infinite;}
@keyframes draw{ to{stroke-dashoffset:0;} }
#preloader span{font-family:'Poppins',sans-serif; color:#e6cd8c; letter-spacing:.3em; font-size:11px; text-transform:uppercase;}
#preloader.hide{opacity:0; visibility:hidden; pointer-events:none;}

/* ===== Navbar ===== */
.navbar-glass{
  position:fixed; top:0; inset-inline:0; z-index:1000;
  background:var(--nav-bg); backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--border);
  padding:16px 0; transition:padding .4s var(--ease), background .4s var(--ease);
}
.navbar-glass.scrolled{padding:10px 0; box-shadow:0 10px 30px -18px rgba(0,0,0,.25);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:20px;}
.brand{display:flex; align-items:center; gap:12px; font-family:var(--f-display); font-weight:800;}
.brand .mark{
  width:42px;height:42px;border-radius:12px;
  background:linear-gradient(135deg,var(--gold),#8f7530);
  display:flex;align-items:center;justify-content:center; color:#111; font-weight:800; font-size:18px;
  box-shadow:var(--shadow-gold);
}
.brand .name{font-size:16.5px; line-height:1.15;}
.brand .name small{display:block; font-size:10.5px; font-weight:600; letter-spacing:.14em; color:var(--muted); text-transform:uppercase;}

.nav-links{display:flex; align-items:center; gap:34px; list-style:none; margin:0; padding:0;}
.nav-links a{font-size:14.5px; font-weight:600; color:var(--text); position:relative; padding:6px 0;}
.nav-links a::after{content:"";position:absolute; bottom:0; inset-inline:0; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease);}
[dir="rtl"] .nav-links a::after{transform-origin:left;}
.nav-links a:hover::after{transform:scaleX(1);}

.nav-actions{display:flex; align-items:center; gap:10px;}
.icon-btn{
  width:42px;height:42px;border-radius:50%; border:1px solid var(--border);
  background:var(--card); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .3s var(--ease); backdrop-filter:blur(10px);
}
.icon-btn:hover{border-color:var(--gold); transform:translateY(-2px);}
.icon-btn svg{width:18px;height:18px;stroke:var(--text);}
.lang-toggle{font-family:var(--f-display); font-weight:800; font-size:12.5px;}
.navbar-toggler{border:1px solid var(--border); border-radius:10px;}

/* ===== Hero ===== */
.hero{position:relative; height:100vh; min-height:640px; display:flex; align-items:flex-end; overflow:hidden;}
.hero-slider{position:absolute; inset:0; z-index:0;}
.hero-slider .swiper-slide{width:100%; height:100%; background-size:cover; background-position:center;}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.35) 35%, rgba(8,8,8,.85) 100%);
}
.hero-grain{position:absolute; inset:0; z-index:2; opacity:.05; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.hero-content{position:relative; z-index:3; color:#fff; padding-bottom:110px; width:100%;}
.hero-content .eyebrow{color:var(--gold-soft);}
.hero-title{
  font-size:clamp(38px,6.2vw,84px); line-height:1.04; font-weight:800; color:#fff;
  text-shadow:0 8px 40px rgba(0,0,0,.35);
}
.hero-sub{font-size:clamp(16px,1.6vw,20px); color:#e7e3d8; margin-top:22px; max-width:720px; font-weight:500;}
.hero-tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
.hero-tags span{
  border:1px solid rgba(255,255,255,.28); color:#f2ede0; font-size:13px; font-weight:600;
  padding:8px 18px; border-radius:999px; backdrop-filter:blur(8px); background:rgba(255,255,255,.06);
}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px;}
.hero-scroll{
  position:absolute; bottom:26px; inset-inline-end:5%; z-index:3; color:#eee2c2;
  display:flex; flex-direction:column; align-items:center; gap:8px; font-size:11px; letter-spacing:.2em;
}
.hero-scroll .line{width:1px; height:38px; background:linear-gradient(var(--gold),transparent); animation:scrollpulse 1.8s infinite;}
@keyframes scrollpulse{0%{opacity:.2;}50%{opacity:1;}100%{opacity:.2;}}
.hero-swiper-pag{position:absolute; z-index:3; bottom:26px; inset-inline-start:24px; display:flex; gap:8px;}

/* ===== Truss divider (signature element) ===== */
.truss-divider{width:100%; height:46px; overflow:hidden; opacity:.55;}
.truss-divider svg{width:100%; height:100%;}
.truss-divider path{fill:none; stroke:var(--gold); stroke-width:1.4;}

/* ===== Section headers ===== */
.section-head{max-width:680px; margin-bottom:60px;}
.section-head.center{margin-inline:auto; text-align:center;}
.section-title{font-size:clamp(28px,3.4vw,46px);}
.section-desc{margin-top:16px; font-size:16.5px;}

/* ===== Glass card base ===== */
.glass{
  background:var(--card); border:1px solid var(--border);
  backdrop-filter:blur(20px) saturate(140%); border-radius:var(--radius-lg);
}

/* ===== Services ===== */
.service-card{
  padding:38px 30px; height:100%; position:relative; overflow:hidden;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.service-card::before{
  content:""; position:absolute; inset:0; opacity:0; z-index:0;
  background:radial-gradient(420px 220px at 20% 0%, rgba(200,163,73,.18), transparent 60%);
  transition:opacity .5s var(--ease);
}
.service-card:hover{transform:translateY(-10px); border-color:var(--gold); box-shadow:var(--shadow-soft);}
.service-card:hover::before{opacity:1;}
.service-icon{
  width:60px;height:60px;border-radius:16px; margin-bottom:26px; position:relative; z-index:1;
  background:linear-gradient(135deg, rgba(200,163,73,.18), rgba(200,163,73,.04));
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  transition:transform .5s var(--ease);
}
.service-card:hover .service-icon{transform:rotate(-6deg) scale(1.08);}
.service-icon svg{width:28px;height:28px; stroke:var(--gold); fill:none;}
.service-card h3{font-size:19px; position:relative; z-index:1; margin-bottom:10px;}
.service-card p{position:relative; z-index:1; font-size:14.5px;}
.service-num{position:absolute; top:22px; inset-inline-end:26px; font-family:var(--f-display); font-weight:800; font-size:12px; color:var(--border); z-index:1;}

/* ===== Gallery / masonry ===== */
.filter-row{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px;}
.filter-btn{
  border:1px solid var(--border); background:var(--card); padding:10px 20px; border-radius:999px;
  font-family:var(--f-display); font-weight:700; font-size:13px; cursor:pointer; color:var(--text);
  transition:all .3s var(--ease);
}
.filter-btn.active,.filter-btn:hover{background:var(--gold); border-color:var(--gold); color:#141208;}
.masonry{column-count:3; column-gap:20px;}
@media(max-width:992px){.masonry{column-count:2;}}
@media(max-width:576px){.masonry{column-count:1;}}
.masonry-item{break-inside:avoid; margin-bottom:20px; border-radius:var(--radius-md); overflow:hidden; position:relative; cursor:pointer; border:1px solid var(--border);}
.masonry-item img{width:100%; display:block; transition:transform .8s var(--ease); filter:saturate(1.02);}
.masonry-item:hover img{transform:scale(1.08);}
.masonry-caption{
  position:absolute; inset:0; display:flex; align-items:flex-end; padding:22px;
  background:linear-gradient(180deg, transparent 40%, rgba(10,10,10,.82) 100%);
  opacity:0; transition:opacity .4s var(--ease);
}
.masonry-item:hover .masonry-caption{opacity:1;}
.masonry-caption span{color:#fff; font-weight:700; font-family:var(--f-display); font-size:15px;}
.masonry-caption .zoom-ic{position:absolute; top:16px; inset-inline-end:16px; width:38px;height:38px;border-radius:50%; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); display:flex;align-items:center;justify-content:center;}
.masonry-caption .zoom-ic svg{width:16px;height:16px; stroke:#fff;}

/* Lightbox */
.lightbox{position:fixed; inset:0; background:rgba(6,6,6,.94); z-index:2000; display:none; align-items:center; justify-content:center; padding:40px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:90vw; max-height:82vh; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.6);}
.lightbox .lb-close,.lightbox .lb-nav{position:absolute; color:#fff; cursor:pointer; width:48px;height:48px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(8px); transition:all .3s;}
.lightbox .lb-close:hover,.lightbox .lb-nav:hover{background:var(--gold); border-color:var(--gold); color:#141208;}
.lightbox .lb-close{top:26px; inset-inline-end:26px;}
.lightbox .lb-prev{top:50%; inset-inline-start:26px; transform:translateY(-50%);}
.lightbox .lb-next{top:50%; inset-inline-end:26px; transform:translateY(-50%);}

/* ===== Stats / Why choose us ===== */
.stats-band{
  border-radius:var(--radius-lg); padding:70px 40px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#151310 0%, #0a0906 100%); color:#fff;
}
.stats-band .truss-bg{position:absolute; inset:0; opacity:.12; z-index:0;}
.stat-item{text-align:center; position:relative; z-index:1;}
.stat-num{font-family:var(--f-display); font-weight:800; font-size:clamp(34px,4vw,56px); color:var(--gold-soft);}
.stat-label{margin-top:8px; color:#cfc7b3; font-size:14px; font-weight:600;}
.why-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.why-list li{display:flex; align-items:center; gap:12px; font-weight:600; font-size:14.5px;}
.why-list li svg{width:20px;height:20px; stroke:var(--gold); flex:none;}
@media(max-width:576px){.why-list{grid-template-columns:1fr;}}

/* ===== Booking ===== */
.booking-wrap{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border);}
.booking-form{padding:56px; background:var(--card); backdrop-filter:blur(20px);}
.booking-map{min-height:420px; height:100%;}
.booking-map iframe{width:100%; height:100%; min-height:420px; border:0; filter:grayscale(.15) contrast(1.05);}
.form-control-luxe{
  background:var(--bg); border:1px solid var(--border); color:var(--text);
  border-radius:14px; padding:15px 18px; width:100%; font-family:var(--f-body); font-size:14.5px;
  transition:all .3s var(--ease);
}
.form-control-luxe:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(200,163,73,.14);}
.form-label-luxe{font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; display:block;}
.quick-contact{display:flex; gap:14px; margin-top:26px; flex-wrap:wrap;}

/* ===== Testimonials ===== */
.testi-card{padding:40px; height:100%; text-align:center;}
.testi-stars{color:var(--gold); font-size:16px; letter-spacing:3px; margin-bottom:20px;}
.testi-avatar{width:64px;height:64px;border-radius:50%; margin:0 auto 18px; object-fit:cover; border:2px solid var(--gold);}
.testi-quote{font-size:15.5px; font-style:normal; color:var(--text); opacity:.9;}
.testi-name{margin-top:20px; font-family:var(--f-display); font-weight:800; font-size:15px;}
.testi-role{font-size:12.5px; color:var(--muted);}

/* ===== FAQ ===== */
.faq-item{border-bottom:1px solid var(--border); padding:26px 4px;}
.faq-q{display:flex; align-items:center; justify-content:space-between; cursor:pointer; gap:20px;}
.faq-q h3{font-size:16.5px; font-weight:700;}
.faq-plus{width:32px;height:32px; border-radius:50%; border:1px solid var(--border); flex:none; display:flex; align-items:center; justify-content:center; transition:transform .4s var(--ease), background .3s;}
.faq-item.active .faq-plus{transform:rotate(135deg); background:var(--gold); border-color:var(--gold);}
.faq-item.active .faq-plus svg{stroke:#141208;}
.faq-plus svg{width:14px;height:14px; stroke:var(--text);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .5s var(--ease);}
.faq-a p{padding-top:16px; font-size:14.5px;}

/* ===== Contact ===== */
.contact-card{padding:34px; display:flex; gap:18px; align-items:flex-start;}
.contact-ic{width:50px;height:50px;border-radius:14px; background:rgba(200,163,73,.12); display:flex; align-items:center; justify-content:center; flex:none;}
.contact-ic svg{width:22px;height:22px; stroke:var(--gold);}

/* ===== Footer ===== */
footer.site-footer{background:#0a0a0a; color:#cfc7b3; padding:80px 0 30px;}
footer.site-footer a{color:#cfc7b3; transition:color .3s;}
footer.site-footer a:hover{color:var(--gold);}
footer .f-title{color:#fff; font-family:var(--f-display); font-weight:800; margin-bottom:20px; font-size:15px;}
footer hr{border-color:rgba(255,255,255,.08); margin:50px 0 24px;}
.f-social{display:flex; gap:10px;}
.f-social a{width:40px;height:40px;border-radius:50%; border:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center;}
.f-social a:hover{border-color:var(--gold); background:rgba(200,163,73,.1);}
.f-social svg{width:16px;height:16px; stroke:currentColor;}

/* ===== Floating buttons ===== */
.floating-stack{position:fixed; bottom:26px; inset-inline-end:26px; z-index:900; display:flex; flex-direction:column; gap:14px; align-items:center;}
.fab{
  width:56px;height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -8px rgba(0,0,0,.4); cursor:pointer; transition:transform .3s var(--ease);
  color:#fff;
}
.fab:hover{transform:scale(1.1);}
.fab.wa{background:#25D366;}
.fab.call{background:linear-gradient(135deg,var(--gold),#8f7530); color:#141208;}
.fab.top{background:var(--card); border:1px solid var(--border); color:var(--text); width:46px;height:46px; opacity:0; pointer-events:none; transform:translateY(10px);}
.fab.top.show{opacity:1; pointer-events:auto; transform:translateY(0);}
.fab svg{width:24px;height:24px; fill:none; stroke:currentColor;}
.fab.wa svg{fill:#fff; stroke:none;}
.pulse-ring{position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:pulse 2s infinite;}
@keyframes pulse{0%{transform:scale(1); opacity:.7;}100%{transform:scale(1.7); opacity:0;}}

/* ===== Before/After ===== */
.ba-slider{position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/9; border:1px solid var(--border);}
.ba-slider img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.ba-after{clip-path:inset(0 0 0 50%);}
[dir="rtl"] .ba-after{clip-path:inset(0 50% 0 0);}
.ba-handle{position:absolute; top:0; bottom:0; inset-inline-start:50%; width:3px; background:var(--gold); cursor:ew-resize;}
.ba-handle::after{content:"⇔"; position:absolute; top:50%; inset-inline-start:50%; transform:translate(-50%,-50%); width:44px;height:44px; background:var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#141208; font-weight:800;}
.ba-range{position:absolute; inset:0; width:100%; opacity:0; cursor:ew-resize; margin:0;}
.ba-tag{position:absolute; top:18px; padding:6px 14px; border-radius:999px; background:rgba(10,10,10,.6); color:#fff; font-size:12px; font-weight:700; letter-spacing:.05em; backdrop-filter:blur(6px);}
.ba-tag.before{inset-inline-start:18px;}
.ba-tag.after{inset-inline-end:18px;}

/* ===== Reveal ===== */
[data-reveal]{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
[data-reveal].in{opacity:1; transform:translateY(0);}

/* ===== Language visibility ===== */
[data-en]{display:none;}
html[lang="en"] [data-ar]{display:none;}
html[lang="en"] [data-en]{display:block;}
html[lang="en"] span[data-en],
html[lang="en"] small[data-en]{display:inline;}
html[lang="ar"] [data-ar]{display:block;}
html[lang="ar"] span[data-ar],
html[lang="ar"] small[data-ar]{display:inline;}

/* misc */
.bg-soft{background:var(--bg-2);}
.text-gold{color:var(--gold) !important;}
.rounded-xl{border-radius:var(--radius-lg) !important;}
.badge-soft{background:rgba(200,163,73,.12); color:var(--gold); font-weight:700; font-size:12px; padding:6px 14px; border-radius:999px; border:1px solid rgba(200,163,73,.3);}