/* BAhar Al Momtaz Business Group — Global Styles v2.2
   Clean, responsive, multilingual-ready design.
   Palette: Ivory / Navy / Gold
*/

:root{
  --navy:#10283e;
  --navy-2:#173b59;
  --navy-3:#0b1d2d;
  --gold:#c88c2c;
  --gold-light:#e0ad55;
  --ivory:#f7f4ec;
  --white:#fffdf8;
  --text:#243545;
  --muted:#6c7780;
  --line:rgba(16,40,62,.14);
  --shadow:0 18px 50px rgba(16,40,62,.12);
  --radius:18px;
  --max:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:var(--ivory);
  line-height:1.6;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
.container{width:min(var(--max),calc(100% - 40px));margin:auto}

/* Top information bar */
.topbar{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:7px 20px;
  background:var(--navy-3);
  color:#f6ead2;
  font-size:12px;
  letter-spacing:.2px;
}
.topbar .status{color:#69bd8a}
.topbar span{white-space:nowrap}

/* Main header */
header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,253,248,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
}
header nav,
header>nav{
  width:min(var(--max),calc(100% - 40px));
  min-height:78px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:28px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-right:auto;
  color:var(--navy);
  line-height:1;
}
.brand .mark{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  color:var(--gold);
  font-size:25px;
}
.brand strong{font-family:Georgia,"Times New Roman",serif;font-size:16px;letter-spacing:.3px}
.brand small{display:block;margin-top:5px;font-size:8px;letter-spacing:2px;color:var(--muted)}

nav a{
  font-size:13px;
  font-weight:600;
  color:var(--navy);
  transition:.2s ease;
}
nav a:hover,nav a.active{color:var(--gold)}
nav a.active{border-bottom:2px solid var(--gold);padding-bottom:5px}

.lang{
  border:1px solid var(--line);
  background:transparent;
  color:var(--navy);
  padding:8px 11px;
  border-radius:9px;
  cursor:pointer;
}
.partner,.btn,.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:10px 18px;
  border-radius:8px;
  border:1px solid transparent;
  background:var(--gold);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease;
}
.partner:hover,.btn:hover,.button:hover{transform:translateY(-1px);filter:brightness(1.04)}
.btn.secondary,.button.secondary{
  background:transparent;
  color:var(--navy);
  border-color:var(--navy);
}

/* Hero */
.hero{
  position:relative;
  min-height:610px;
  overflow:hidden;
  background:
    radial-gradient(circle at 76% 45%,rgba(45,103,143,.42),transparent 29%),
    linear-gradient(115deg,#f7f4ec 0%,#f7f4ec 48%,#e7edf0 100%);
}
.hero-copy{
  position:relative;
  z-index:2;
  padding:105px 0 80px;
  width:min(650px,100%);
}
.eyebrow{
  margin:0 0 18px;
  color:var(--gold);
  font-size:11px;
  font-weight:800;
  letter-spacing:3px;
  text-transform:uppercase;
}
.hero h1{
  margin:0;
  color:var(--navy);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(48px,6vw,82px);
  line-height:.96;
  letter-spacing:-2px;
}
.hero h1 span{color:var(--gold)}
.hero .lead{
  max-width:610px;
  margin:25px 0;
  color:#66727b;
  font-size:16px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}

.hero-orbit{
  position:absolute;
  right:-55px;
  top:55px;
  width:min(560px,52vw);
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle at center,rgba(224,173,85,.9) 0 4px,transparent 5px),
    repeating-radial-gradient(circle at center,transparent 0 58px,rgba(255,255,255,.18) 59px 60px),
    linear-gradient(145deg,#255879,#0c263c);
  box-shadow:inset 0 0 70px rgba(0,0,0,.18),0 30px 80px rgba(16,40,62,.18);
}
.hero-orbit:before,.hero-orbit:after{
  content:"";
  position:absolute;
  inset:13%;
  border:1px solid rgba(255,255,255,.17);
  border-radius:50%;
  transform:rotate(35deg) scaleX(1.25);
}
.hero-orbit:after{inset:24%;transform:rotate(-25deg) scaleX(1.35)}

.hero-status{
  position:absolute;
  right:12%;
  top:80px;
  z-index:4;
  min-width:180px;
  padding:17px 20px;
  border-radius:13px;
  background:rgba(255,253,248,.94);
  box-shadow:var(--shadow);
  border:1px solid rgba(16,40,62,.08);
}
.hero-status small{display:block;color:var(--muted);font-size:10px;letter-spacing:1px}
.hero-status strong{display:block;margin:3px 0;color:var(--navy);font-size:21px}
.hero-status .live{color:#32965d;font-size:11px}

/* Home sections */
section{padding:78px 0}
.section-head{max-width:720px;margin:0 auto 38px;text-align:center}
.section-head h2{
  margin:0 0 10px;
  color:var(--navy);
  font:700 clamp(30px,4vw,48px)/1.08 Georgia,"Times New Roman",serif;
}
.section-head p{margin:0;color:var(--muted)}

.business-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.business-card{
  min-height:270px;
  padding:0 24px 25px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 35px rgba(16,40,62,.06);
  transition:.25s ease;
}
.business-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.business-card .icon{
  height:125px;
  margin:0 -24px 22px;
  display:grid;
  place-items:center;
  color:#fff;
  background:
    radial-gradient(circle at 25% 25%,rgba(224,173,85,.45),transparent 35%),
    linear-gradient(135deg,#295b7b,#12344e);
  font-size:44px;
}
.business-card h3{
  margin:0 0 7px;
  color:var(--navy);
  font:700 22px Georgia,"Times New Roman",serif;
}
.business-card p{margin:0 0 15px;color:var(--muted);font-size:13px}
.explore{color:var(--gold);font-weight:800;font-size:12px;letter-spacing:.5px}

/* Feature / CTA blocks */
.split-cta{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:18px;
}
.cta-panel{
  padding:42px;
  border-radius:16px;
  color:#fff;
  background:var(--navy);
  overflow:hidden;
  position:relative;
}
.cta-panel.gold{background:linear-gradient(135deg,#d4932c,#b86f08)}
.cta-panel h2{margin:0 0 10px;font:700 38px/1.08 Georgia,"Times New Roman",serif}
.cta-panel p{max-width:650px;color:rgba(255,255,255,.78)}
.cta-panel .btn{background:#fff;color:var(--navy);margin-top:10px}

/* Generic inner pages */
.page-hero{
  padding:105px 0 80px;
  background:linear-gradient(135deg,var(--navy),#1c4b6b);
  color:#fff;
}
.page-hero h1{
  margin:0;
  font:700 clamp(42px,6vw,70px)/1.05 Georgia,"Times New Roman",serif;
}
.page-hero p{max-width:720px;color:rgba(255,255,255,.76);font-size:16px}
.page-content{background:var(--ivory)}
.content-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.content-card{
  padding:28px;
  border-radius:15px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(16,40,62,.05);
}
.content-card h3{margin-top:0;color:var(--navy);font-family:Georgia,"Times New Roman",serif}

/* Product grids */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.product-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(16,40,62,.06);
}
.product-card .product-image{
  min-height:260px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#f1ede2,#dce8ef);
}
.product-card .product-body{padding:22px}
.product-card h3{margin:0 0 7px;color:var(--navy);font:700 23px Georgia,"Times New Roman",serif}
.product-card p{margin:0;color:var(--muted);font-size:13px}
.product-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.tag{padding:5px 9px;border-radius:20px;background:#f0ece3;color:var(--navy);font-size:11px;font-weight:700}

/* Trading page */
.market-ticker{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  padding:14px;
  background:var(--navy-3);
  color:#fff;
}
.market-item{padding:8px 12px;border-right:1px solid rgba(255,255,255,.1)}
.market-item small{display:block;color:#aebbc6;font-size:10px}
.market-item strong{font-size:15px}
.market-item .up{color:#5cc48a}
.market-item .down{color:#e47d72}

.dashboard-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px}
.chart-box,.trading-panel{
  min-height:380px;
  padding:22px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
}
.chart-box{background:#0f263a;color:#fff}

/* Footer */
footer{
  padding:55px 0 25px;
  background:var(--navy-3);
  color:#fff;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:35px;
}
footer h4{margin:0 0 14px;color:#fff;font-size:13px}
footer p,footer a{color:#b8c4ce;font-size:12px}
footer a{display:block;margin:7px 0}
footer a:hover{color:var(--gold-light)}
.footer-bottom{
  margin-top:35px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.12);
  color:#82909b;
  font-size:11px;
}

/* RTL / Arabic */
html[dir="rtl"] body,
body.rtl{font-family:Arial,Tahoma,sans-serif}
html[dir="rtl"] .hero-copy,
body.rtl .hero-copy{text-align:right}
html[dir="rtl"] .brand,
body.rtl .brand{margin-right:0;margin-left:auto}
html[dir="rtl"] nav a.active{border-bottom:2px solid var(--gold)}
html[dir="rtl"] .hero-orbit{right:auto;left:-55px}
html[dir="rtl"] .hero-status{right:auto;left:12%}

/* Mobile navigation fallback */
@media (max-width:980px){
  header nav,header>nav{gap:15px}
  nav a{font-size:11px}
  .business-grid{grid-template-columns:repeat(2,1fr)}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .content-grid{grid-template-columns:repeat(2,1fr)}
  .hero-orbit{right:-120px;width:520px}
  .hero-status{right:6%}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .container{width:min(100% - 28px,var(--max))}
  .topbar{font-size:10px;gap:8px;overflow:hidden}
  header nav,header>nav{min-height:68px;flex-wrap:wrap;padding:10px 0}
  header nav a{display:none}
  .brand{margin-right:auto}
  .partner{min-height:36px;padding:8px 12px;font-size:11px}
  .hero{min-height:720px}
  .hero-copy{padding:70px 0 50px}
  .hero h1{font-size:50px}
  .hero-orbit{right:-155px;top:370px;width:470px}
  .hero-status{top:auto;right:20px;bottom:30px}
  section{padding:58px 0}
  .business-grid,.product-grid,.content-grid,.split-cta,.dashboard-grid{grid-template-columns:1fr}
  .market-ticker{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:430px){
  .hero h1{font-size:43px}
  .hero-orbit{right:-190px;width:420px}
  .footer-grid{grid-template-columns:1fr}
}