:root{
    --bg:#0b0b0f;
    --bg2:#11111a;
    --card:rgba(255,255,255,.06);
    --border:rgba(255,255,255,.12);
    --text:#f3f4f6;
    --muted:#cbd5e1;
    --gold:#c9a24d;
    --gold2:#f2d37a;
    --shadow: 0 18px 45px rgba(0,0,0,.35);
  }
  
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; font-family:"Cairo", system-ui; background:var(--bg); color:var(--text); scroll-behavior:smooth; }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }
  
  .container{ width: min(1100px, 92%); margin:0 auto; }
  
  .topbar{
    position:sticky; top:0; z-index:50;
    background: rgba(11,11,15,.72);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--border);
  }
  .topbar__inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:12px; }
  
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand img{ width:42px; height:42px; border-radius:12px; border:1px solid var(--border); background:rgba(255,255,255,.06); }
  .brand__ar{ font-weight:800; font-size:16px; line-height:1.1; }
  .brand__en{ font-weight:600; font-size:12px; color:var(--muted); letter-spacing:.6px; }
  
  .nav{ display:flex; gap:18px; align-items:center; }
  .nav a{ color:var(--muted); font-weight:700; font-size:14px; padding:8px 10px; border-radius:10px; transition:.2s; }
  .nav a:hover{ background:rgba(255,255,255,.06); color:var(--text); }
  
  .nav__toggle{
    display:none; border:1px solid var(--border);
    background:rgba(255,255,255,.06); color:var(--text);
    padding:8px 12px; border-radius:12px; font-size:18px;
  }
  
  .mobile-nav{
    display:none;
    position:fixed; top:64px; left:0; right:0;
    background: rgba(11,11,15,.92);
    border-bottom:1px solid var(--border);
    backdrop-filter: blur(12px);
    z-index:49;
  }
  .mobile-nav a{
    display:block; padding:14px 18px; color:var(--muted);
    border-top:1px solid rgba(255,255,255,.06);
    font-weight:800;
  }
  .mobile-nav a:hover{ color:var(--text); background:rgba(255,255,255,.05); }
  
  .hero{ position:relative; min-height: 92vh; display:flex; align-items:center; overflow:hidden; }
  .hero__bg{
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    transform: scale(1.04);
    filter: saturate(1.05) contrast(1.05);
  }
  .hero__overlay{
    position:absolute; inset:0;
    background: radial-gradient(1200px 600px at 70% 20%, rgba(201,162,77,.18), transparent 60%),
                linear-gradient(90deg, rgba(11,11,15,.94), rgba(11,11,15,.70)),
                linear-gradient(180deg, rgba(11,11,15,.35), rgba(11,11,15,.92));
  }
  .hero__content{ position:relative; padding:80px 0; }
  
  .chip{
    display:inline-flex; gap:8px; align-items:center;
    padding:8px 12px; border-radius:999px;
    border:1px solid rgba(201,162,77,.35);
    background: rgba(201,162,77,.10);
    color: var(--gold2); font-weight:800; font-size:13px;
  }
  
  .hero h1{ margin:14px 0 10px; font-size:44px; line-height:1.2; letter-spacing:-.5px; }
  .hero p{ margin:0; max-width:650px; color:var(--muted); font-weight:600; line-height:1.9; }
  
  .gold{ color:var(--gold2); }
  
  .hero__cta{ margin-top:18px; display:flex; gap:12px; flex-wrap:wrap; }
  
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:12px 16px; border-radius:14px;
    border:1px solid var(--border);
    font-weight:900; cursor:pointer;
    transition:.2s;
  }
  .btn--primary{
    background: linear-gradient(135deg, var(--gold), var(--gold2));
    color:#121212; border-color: rgba(255,255,255,.18);
    box-shadow: 0 10px 30px rgba(201,162,77,.18);
  }
  .btn--primary:hover{ transform: translateY(-1px); }
  .btn--ghost{
    background: rgba(255,255,255,.06);
    color:var(--text);
  }
  .btn--ghost:hover{ background: rgba(255,255,255,.10); }
  
  .btn--small{ padding:10px 12px; border-radius:12px; font-size:13px; }
  
  .hero__stats{
    margin-top:22px;
    display:grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:12px; max-width:720px;
  }
  .stat{
    background: rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    padding:14px;
    box-shadow: var(--shadow);
  }
  .stat__num{ font-size:22px; font-weight:1000; color: var(--gold2); }
  .stat__label{ color:var(--muted); font-weight:700; font-size:13px; margin-top:4px; }
  
  .section{ padding:72px 0; }
  .section--alt{ background: linear-gradient(180deg, var(--bg2), var(--bg)); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
  .section__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
  .section__title{ margin:0 0 10px; font-size:28px; }
  .section__text{ margin:0; color:var(--muted); font-weight:650; line-height:1.9; }
  
  .grid-2{ display:grid; grid-template-columns: 1.1fr .9fr; gap:22px; align-items:start; }
  
  .list{ margin:14px 0 0; padding:0 18px 0 0; color:var(--muted); font-weight:700; line-height:2; }
  
  .card{
    border:1px solid rgba(255,255,255,.12);
    border-radius:20px;
    padding:18px;
    box-shadow: var(--shadow);
  }
  .glass{ background: rgba(255,255,255,.05); backdrop-filter: blur(10px); }
  .card__title{ margin:0 0 6px; }
  .card__text{ margin:0; color:var(--muted); font-weight:650; line-height:1.9; }
  .divider{ height:1px; background: rgba(255,255,255,.10); margin:14px 0; }
  
  .tabs{ display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 18px; }
  .tab{
    padding:10px 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: var(--muted);
    font-weight:900;
    cursor:pointer;
  }
  .tab.active{ background: rgba(201,162,77,.14); color: var(--gold2); border-color: rgba(201,162,77,.30); }
  
  .gallery{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:14px;
  }
  .item{
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    border-radius:18px;
    overflow:hidden;
    box-shadow: var(--shadow);
    display:flex; flex-direction:column;
  }
  .item img{ width:100%; height:180px; object-fit:cover; }
  .item__body{ padding:12px; display:flex; flex-direction:column; gap:8px; }
  .item__body h3{ margin:0; font-size:16px; }
  .item__body p{ margin:0; color:var(--muted); font-weight:650; line-height:1.7; }
  .item__btn{ margin-top:6px; }
  
  .features{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:14px;
    margin-top:18px;
  }
  .feature{
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    border-radius:18px;
    padding:16px;
    box-shadow: var(--shadow);
  }
  .icon{
    width:42px; height:42px; border-radius:14px;
    background: rgba(201,162,77,.14);
    border:1px solid rgba(201,162,77,.30);
    display:flex; align-items:center; justify-content:center;
    color: var(--gold2);
    font-weight:1000;
    margin-bottom:10px;
  }
  
  .contact-card{
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    border-radius:18px;
    padding:14px;
    box-shadow: var(--shadow);
    margin-top:14px;
  }
  .contact-row{ display:flex; gap:10px; padding:10px 0; border-top:1px solid rgba(255,255,255,.08); }
  .contact-row:first-child{ border-top:none; }
  .label{ color:var(--gold2); font-weight:900; min-width:80px; }
  .note{ color:var(--muted); font-weight:650; margin-top:10px; }
  
  .form{
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    border-radius:18px;
    padding:16px;
    box-shadow: var(--shadow);
  }
  .form h3{ margin:0 0 10px; }
  label{ display:block; margin:10px 0 6px; color:var(--muted); font-weight:800; }
  input,textarea{
    width:100%;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.25);
    padding:12px 12px;
    color:var(--text);
    outline:none;
    font-family:"Cairo", system-ui;
  }
  input:focus,textarea:focus{ border-color: rgba(201,162,77,.45); }
  .form-hint{ margin:10px 0 0; color:var(--muted); font-weight:650; }
  
  .footer{
    border-top:1px solid rgba(255,255,255,.08);
    padding:18px 0;
    background: rgba(0,0,0,.30);
  }
  .footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .muted{ color:var(--muted); font-weight:650; margin-top:6px; }
  .to-top{ color:var(--gold2); font-weight:1000; }
  
  .whats-float{
    position:fixed; left:16px; bottom:16px;
    padding:12px 14px;
    border-radius:999px;
    background: linear-gradient(135deg, var(--gold), var(--gold2));
    color:#121212;
    font-weight:1000;
    box-shadow: 0 14px 40px rgba(201,162,77,.22);
    z-index:60;
    border:1px solid rgba(255,255,255,.15);
  }
  
  @media (max-width: 980px){
    .gallery{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .features{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-2{ grid-template-columns: 1fr; }
    .hero h1{ font-size:36px; }
    .hero__stats{ grid-template-columns: 1fr; }
  }
  
  @media (max-width: 720px){
    .nav{ display:none; }
    .nav__toggle{ display:inline-flex; }
  }

  /* Fix overlap: hide back-to-top on mobile */
@media (max-width: 768px) {
    .to-top {
      display: none;
    }
  }
  
  .brand img{
    height: 44px;
    width: auto;
  }
  @media (max-width: 768px){
    .brand img{ height: 38px; }
  }
  
  .phone-number {
    direction: ltr;
    unicode-bidi: isolate;
  }