/* ================= AZE Trade — Dark Royal Theme =================
   Palette (inspired by your sample, with a royal touch):
   - Surfaces: deep navy/ink
   - Accent: royal gold
   - Secondary accent: electric cyan (for subtle highlights)
   ================================================================= */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  /* Core colors */
  --bg:#0b1220;           /* page background */
  --bg-soft:#0e1626;      /* soft section background */
  --panel:#101a2d;        /* cards, header, footer */
  --panel-2:#0f182a;      /* alternate panels */
  --line:rgba(255,255,255,.08);

  --ink:#e6edf7;          /* primary text */
  --muted:#9aa5b1;        /* secondary text */

  /* Brand accents */
  --primary:#dcb451;      /* royal gold */
  --primary-2:#f1d17b;    /* lighter gold */
  --accent:#59d0ff;       /* cyan sparkle for micro-highlights */

  /* Elevation */
  --radius:20px;
  --radius-sm:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --shadow-2:0 16px 50px rgba(0,0,0,.5);

  /* Layout */
  --container: min(1200px, 92vw);
  --header-h:86px;

  /* Motion */
  --ease:cubic-bezier(.4,0,.2,1);
  --t:.28s var(--ease);
}

html,body{height:100%}
body{
  background:radial-gradient(1200px 900px at 10% -10%,rgba(92,165,255,.05),transparent 60%),
             radial-gradient(900px 700px at 110% -20%,rgba(220,180,81,.06),transparent 60%),
             var(--bg);
  color:var(--ink);
  font:16px/1.7 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  padding-top:var(--header-h);
  overflow-x:hidden;
}

/* Containers & section titles */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 22px}
.section-title{
  font-size:2.1rem;font-weight:800;letter-spacing:.5px;
  color:var(--ink); text-align:center; margin:8px auto 28px;
  position:relative; display:inline-block
}
.section-title:after{
  content:"";display:block;height:3px;width:84px;margin:10px auto 0;
  background:linear-gradient(90deg,var(--primary),transparent);
  border-radius:999px; filter:drop-shadow(0 0 8px rgba(220,180,81,.45));
}

/* ================= Header ================= */
.main-header{
  position:fixed;top:0;left:0;right:0;height:var(--header-h);z-index:1000;
  backdrop-filter:saturate(130%) blur(8px);
  background:linear-gradient(180deg,rgba(16,26,45,.9),rgba(16,26,45,.78));
  border-bottom:1px solid var(--line);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.header-flex{height:100%;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;text-decoration:none;color:var(--ink);font-weight:900;letter-spacing:.6px}
.logo img{height:42px;width:auto;margin-right:10px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}
.nav-menu{list-style:none;display:flex;gap:26px}
.nav-menu a{
  color:var(--muted); text-decoration:none; font-weight:700; letter-spacing:.3px;
  padding:10px 14px; border-radius:999px; transition:color var(--t), background var(--t), transform var(--t);
}
.nav-menu a:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.nav-menu a.active{
  color:#111; background:linear-gradient(90deg,var(--primary),var(--primary-2));
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.2), 0 6px 18px rgba(220,180,81,.22);
}
.header-actions{display:flex;align-items:center;gap:12px}
.btn-small{padding:9px 18px;font-size:.95rem}
.menu-toggle{display:none;border:0;border-radius:999px;background:var(--primary);color:#111;
  padding:10px 14px;font-weight:800;cursor:pointer;box-shadow:var(--shadow)}

/* ================= Buttons ================= */
.btn{
  --bg:var(--primary); --fg:#111;
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 28px; border-radius:999px; border:0; cursor:pointer;
  font-weight:800; text-decoration:none; color:var(--fg); background:var(--bg);
  box-shadow:0 8px 24px rgba(220,180,81,.22); transition:transform var(--t), box-shadow var(--t), background var(--t), color var(--t)
}
.btn:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 14px 30px rgba(220,180,81,.3)}
.btn-primary{--bg:linear-gradient(90deg,var(--primary),var(--primary-2)); --fg:#0b0f17}
.btn-secondary{--bg:#1b2740; --fg:var(--ink); box-shadow:0 8px 22px rgba(0,0,0,.35); border:1px solid var(--line)}
.btn-large{padding:15px 40px;font-size:1.08rem}

/* ================= Hero ================= */
.hero-modern.hero-boosted{
  position:relative; min-height:560px; display:flex; align-items:center; overflow:hidden;
  background:
    radial-gradient(700px 480px at 80% 10%, rgba(89,208,255,.14), transparent 60%),
    radial-gradient(600px 420px at 10% 20%, rgba(220,180,81,.12), transparent 60%);
}
.hero-bg-animated{position:absolute;inset:0;z-index:1;opacity:.5;
  background:
   conic-gradient(from 180deg at 30% 40%, rgba(220,180,81,.08), transparent),
   radial-gradient(800px 800px at -10% -20%, rgba(89,208,255,.06), transparent 60%)}
.hero-content-boosted{position:relative;z-index:2;display:flex;gap:48px;justify-content:space-between;align-items:center;min-height:420px}
.hero-text-boosted{max-width:560px}
.hero-text-boosted h1{font-size:2.6rem;line-height:1.15;margin:0 0 16px}
.highlight{color:var(--primary-2);letter-spacing:2px;font-weight:900;font-size:1.1em}
.hero-gradient-word{
  background:linear-gradient(90deg,#7be0ff 0%, var(--primary-2) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:none
}
.hero-text-boosted p{font-size:1.14rem;color:var(--muted);margin:12px 0 24px}
.hero-visual-boosted{flex:1;min-width:280px;display:flex;justify-content:center;align-items:center;position:relative}
.hero-visual-boosted img{width:360px;max-width:100%;filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}
.hero-svg-shape{position:absolute;left:-26px;bottom:-26px;opacity:.9}

/* ================= Quick Stats ================= */
.quick-stats{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.00));
  margin-top:-56px;border-top:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);position:relative;z-index:3;padding:32px 0;
}
.about-stats{margin-top:22px !important;margin-bottom:36px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:26px;justify-items:center}
.stat-card{
  background:linear-gradient(180deg,#0f182a,#0b1424);
  border:1px solid var(--line); border-radius:16px; padding:24px 0; width:100%; text-align:center;
  box-shadow:var(--shadow); transition:transform var(--t), box-shadow var(--t)
}
.stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.stat-card h2{font-size:2.1rem;color:var(--primary-2);font-weight:900;margin-bottom:8px;text-shadow:0 0 22px rgba(220,180,81,.25)}
.stat-card p{color:var(--muted)}

/* ================= Services (home tiles) ================= */
.services-modern{padding:72px 0 40px}
.services-grid-modern{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px}
.service-tile{
  position:relative;display:block;text-decoration:none;color:#fff;border-radius:var(--radius);
  overflow:hidden;min-height:280px;box-shadow:var(--shadow);isolation:isolate;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.00));
  transform:translateZ(0);transition:transform var(--t), box-shadow var(--t), filter var(--t)
}
.service-tile::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.6) 65%),
    var(--bg-img);
  background-size:cover;background-position:center;transform:scale(1.04);
  filter:saturate(1.05) contrast(1.05); transition:transform .6s var(--ease), filter .4s var(--ease)
}
.service-tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);filter:brightness(1.03)}
.service-tile:hover::before{transform:scale(1.08);filter:saturate(1.2) contrast(1.15)}
.service-tile-content{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:22px}
.service-tile .service-icon{font-size:1.3rem;background:rgba(0,0,0,.25);width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;border:1px solid rgba(255,255,255,.18)}
.service-tile h3{font-size:1.14rem;font-weight:900;letter-spacing:.3px;text-shadow:0 4px 14px rgba(0,0,0,.4)}
.service-tile p{font-size:.98rem;opacity:.92;color:#eaf3ff}

/* ================= Generic service cards (services page) ================= */
.services-full-modern{padding:56px 0 40px}
.services-grid-full{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.service-modern-card{
  background:linear-gradient(180deg,#101a2d,#0c1526); border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 24px;text-align:center;
  transition:transform var(--t), box-shadow var(--t)
}
.service-modern-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--shadow-2)}
.service-icon{font-size:2.2rem;color:var(--primary-2);margin-bottom:12px}
.service-modern-card h3{font-size:1.12rem;color:var(--ink);font-weight:800;margin-bottom:8px}
.service-modern-card p{color:var(--muted);font-size:1rem;margin-bottom:14px}
.btn-service{margin-top:auto}

/* Service thumbnails */
.service-figure{width:100%;margin:0 0 14px}
.service-thumb{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:16px;border:1px solid var(--line);display:block}

/* ================= About ================= */
.about-modern{padding:56px 0 40px}
.about-flex{display:flex;align-items:center;gap:42px;flex-wrap:wrap}
.about-img{flex:1;min-width:260px;max-width:420px}
.about-img img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line)}
.about-text{flex:2;min-width:260px}
.about-text h2{font-size:1.8rem;color:var(--ink);margin-bottom:14px;font-weight:900}
.about-text p{color:var(--muted)}
.about-features{list-style:none;display:flex;flex-wrap:wrap;gap:14px 28px;margin:14px 0}
.about-features li{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:700}
.about-features i{color:var(--primary-2)}

/* Mission | Vision | Values */
.mission-vision-modern{background:linear-gradient(180deg,#0f182a,#0b1424);padding:56px 0;border-radius:var(--radius);margin-bottom:36px;border:1px solid var(--line)}
.mv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px}
.mv-card{background:linear-gradient(180deg,#101a2d,#0d1627);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 24px;text-align:center;border:1px solid var(--line);transition:transform var(--t), box-shadow var(--t)}
.mv-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)}
.mv-card i{font-size:2rem;color:var(--primary-2);margin-bottom:10px}
.mv-card h3{font-size:1.08rem;font-weight:800;margin-bottom:10px}
.mv-card p,.mv-values-list li{color:var(--muted)}
.mv-values-list{list-style:none;margin:12px 0 0;padding:0}
.mv-values-list i{color:var(--primary)}

/* ================= Page Header (shared) ================= */
.page-header-modern{
  background:linear-gradient(120deg,rgba(89,208,255,.08),rgba(220,180,81,.10));
  padding:50px 0 32px;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow)
}
.page-header-flex{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center}
.page-header-icon{font-size:3.2rem;color:var(--primary-2);background:linear-gradient(180deg,#0f182a,#0c1526);
  border-radius:50%;width:80px;height:80px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);box-shadow:var(--shadow)}
.page-header-modern h1{font-size:2.1rem;font-weight:900;margin-bottom:6px}
.page-header-modern .lead{color:var(--muted)}

/* ================= Gallery ================= */
.gallery-modern{padding:56px 0 40px}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.gallery-card{background:linear-gradient(180deg,#101a2d,#0b1424);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform var(--t)}
.gallery-card:hover{transform:translateY(-6px) scale(1.01)}
.gallery-img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.gallery-caption{padding:12px 12px 16px;color:var(--primary-2);font-weight:800;text-align:center;background:#0c1424;border-top:1px solid var(--line)}
.gallery-desc{display:block;color:var(--muted);font-weight:400;margin-top:2px}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.78);display:none;align-items:center;justify-content:center;z-index:2000;padding:22px}
.lightbox.open{display:flex}
.lightbox-inner{max-width:min(1100px,92vw);max-height:90vh;background:#0a101c;color:var(--ink);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 30px 100px rgba(0,0,0,.6)}
.lightbox-img{display:block;max-width:100%;max-height:70vh;object-fit:contain;background:#000}
.lightbox-caption{padding:12px 16px;border-top:1px solid var(--line)}
.lightbox-caption h3{margin:0 0 6px;color:var(--primary-2)}
.lightbox-caption p{margin:0;color:var(--muted)}

/* ================= How It Works / FAQ ================= */
.how-it-works,.faq-modern{padding:56px 0 40px}
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.how-card{background:linear-gradient(180deg,#101a2d,#0c1526);border:1px solid var(--line);border-radius:16px;padding:22px;text-align:center;box-shadow:var(--shadow);transition:transform var(--t)}
.how-card:hover{transform:translateY(-6px)}
.how-step{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#17233b;color:var(--primary-2);font-weight:900;margin-bottom:8px;border:1px solid var(--line)}

.faq-list{max-width:900px;margin:0 auto}
.faq-item{background:linear-gradient(180deg,#101a2d,#0c1526);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:12px 18px;margin-bottom:12px}
.faq-question{width:100%;background:none;border:none;text-align:left;font-size:1.02rem;font-weight:900;color:var(--ink);display:flex;align-items:center;justify-content:space-between;padding:8px 4px;cursor:pointer}
.faq-question i{transition:transform .2s}
.faq-answer{display:none;padding:8px 4px 4px;color:var(--muted)}
.faq-item.open .faq-answer{display:block}
.faq-item.open .faq-question i{transform:rotate(180deg)}

/* ================= CTA ================= */
.cta-modern.cta-boxed{background:none;margin:56px 0;padding:0;display:flex;justify-content:center}
.cta-box{
  background:linear-gradient(90deg,var(--primary) 0%, var(--primary-2) 100%);
  color:#111;border-radius:var(--radius);box-shadow:var(--shadow-2);padding:44px 32px;max-width:520px;width:100%;
  text-align:center;border:1px solid rgba(255,255,255,.15)
}
.cta-box .cta-text h2{font-size:1.9rem;font-weight:900;margin-bottom:8px}
.cta-box .cta-text p{font-size:1.08rem;color:#2b240d;margin-bottom:18px}
.cta-box .btn{margin-top:8px}

/* ================= Contact ================= */
.contact-modern{padding:56px 0 40px}
.contact-grid-modern{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:start}
.contact-info-modern{background:linear-gradient(180deg,#101a2d,#0c1526);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 24px}
.contact-info-modern h2{font-size:1.2rem;color:var(--primary-2);font-weight:900;margin-bottom:16px}
.contact-info-modern .info-item{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.contact-info-modern .info-item i{font-size:1.2rem;color:var(--primary-2);min-width:26px;margin-top:3px}
.contact-info-modern .info-item h3{font-size:1rem;font-weight:800;margin-bottom:4px}
.contact-info-modern .info-item p{color:var(--muted);margin:0}
.map-box{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}

/* ================= Footer ================= */
.footer-modern{position:relative;background:linear-gradient(180deg,#0b1220,#0a0f1a);color:var(--ink);padding:0;border-top:1px solid var(--line);overflow:hidden}
.footer-bg{position:absolute;inset:0;z-index:1;background:radial-gradient(800px 600px at 90% -10%,rgba(220,180,81,.18),transparent 60%)}
.footer-row{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:34px 22px;min-height:64px}
.footer-logo{height:64px;width:auto;object-fit:contain;display:block;filter:drop-shadow(0 8px 18px rgba(0,0,0,.6))}
.footer-right p{margin:2px 0;color:var(--ink)}
.footer-right i{width:18px;margin-right:6px;color:var(--primary-2)}
.copyright{position:relative;z-index:2;text-align:center;padding:14px 0;border-top:1px solid var(--line);color:var(--muted);font-size:.98rem}

/* ================= Floating WhatsApp ================= */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:1200;text-decoration:none;
  display:inline-flex;align-items:center;gap:10px;
  background:#25D366;color:#0a0f1a;border-radius:999px;padding:12px 16px;font-weight:900;
  box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 0 0 rgba(37,211,102,.55);
  animation:waPulse 2.8s infinite; border:1px solid rgba(255,255,255,.15)
}
.wa-float i{font-size:1.2rem}
@keyframes waPulse{
  0%{box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 0 0 rgba(37,211,102,.55)}
  70%{box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 0 18px rgba(37,211,102,0)}
  100%{box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 0 0 rgba(37,211,102,0)}
}

/* ================= Utilities ================= */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ================= Responsive ================= */
@media (max-width:1024px){
  .hero-content-boosted{flex-direction:column;text-align:center;gap:28px;min-height:360px}
  .about-flex{flex-direction:column;gap:28px;text-align:center}
  .hero-visual-boosted{margin-top:16px}
}
@media (max-width:900px){
  .nav-menu{gap:14px}
  .contact-grid-modern{grid-template-columns:1fr;gap:22px}
}
@media (max-width:768px){
  :root{--header-h:72px}
  .header-flex{padding:0}
  .nav-menu{
    flex-direction:column;gap:0;width:100%;display:none;background:var(--panel);
    position:absolute;top:var(--header-h);left:0;border-bottom:1px solid var(--line)
  }
  .nav-menu.active{display:flex}
  .nav-menu li{width:100%;border-top:1px solid var(--line)}
  .nav-menu a{display:block;width:100%;padding:14px 18px}
  .menu-toggle{display:inline-block}
  .header-actions .header-cta{display:none}
  .hero-visual-boosted{display:none}
  .footer-row{flex-direction:column;align-items:flex-start;gap:10px}
}