/* ======== CHICAGO CHARCOAL + AMBER THEME ======== */
:root{
  --bg:#0f1114;           /* خلفية أساسية */
  --bg-2:#15191f;         /* خلفية أقسام */
  --card:#181d24;         /* خلفية البطاقات */
  --text:#e6e9ee;         /* نص أساسي */
  --muted:#a7b0bc;        /* نص ثانوي */
  --accent:#f5b301;       /* كهرماني أساسي */
  --accent-2:#ffd166;     /* كهرماني فاتح */
  --border:#232b35;       /* حدود هادئة */
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

html,body{height:100%}
body{
  font-family: "Inter", "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  background: linear-gradient(180deg, var(--bg) 0%, #0c0e11 100%);
  color:var(--text);
  line-height:1.7;
  margin:0;
}

/* ====== Helpers ====== */
.section{ padding:72px 0; }
.text-muted{ color:var(--muted)!important; }
.container-narrow{ max-width:980px; margin-inline:auto; }

/* ====== Navbar ====== */
.navbar{
  background: linear-gradient(180deg,#11151a,#0f1114);
  border-bottom:1px solid var(--border);
  box-shadow: var(--shadow);
}
.navbar-brand{ display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.3px; }
.navbar-brand img{ height:44px; border-radius:10px; }
.navbar-dark .navbar-nav .nav-link{
  color:var(--muted); margin-right:.75rem; transition:.2s;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active{ color:#fff; }

/* ====== Hero ====== */
.hero-section{
  min-height:86vh; position:relative; display:grid; place-items:center; text-align:center;
  background:
    linear-gradient(180deg, rgba(245,179,1,.12), rgba(0,0,0,.35)),
    url('/images/tampa-hero.jpg') center/cover no-repeat;
}
.hero-section::after{
  content:""; position:absolute; inset:auto 0 0 0; height:40%;
  background: linear-gradient(180deg, transparent, var(--bg));
}
.hero-content{ position:relative; z-index:1; padding:0 18px; }
.hero-content h1{
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight:900; letter-spacing:.4px; margin-bottom:.6rem;
}
.hero-content p.lead{ color:var(--muted); font-size: clamp(1rem,2.2vw,1.25rem); }

/* ====== Buttons ====== */
.custom-call-btn{
  background: linear-gradient(180deg, var(--accent), #e09a00);
  color:#1a1300; border:none; border-radius:999px;
  padding:12px 28px; font-weight:800; letter-spacing:.3px;
  box-shadow: 0 8px 25px rgba(245,179,1,.25);
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.custom-call-btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 32px rgba(245,179,1,.35); color:#1a1300; }

.floating-btn{
  position:fixed; right:20px; bottom:22px; z-index:1030;
  background:#8b5147; color:#fff; border:1px solid var(--border);
  border-radius:999px; padding:12px 18px; box-shadow: var(--shadow);
}
.floating-btn:hover{ background:#202633; }

/* ====== Headings ====== */
h2{
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  text-transform:none; text-align:center; margin-bottom:10px;
  font-weight:900; letter-spacing:.4px; color:#fff;
}
.section .subtitle{ text-align:center; color:var(--muted); margin-bottom:28px; }

/* ====== Cards ====== */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius:14px; overflow:hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{ transform: translateY(-4px); border-color: rgba(245,179,1,.35); box-shadow: 0 12px 40px rgba(245,179,1,.08); }
.card img{ max-height:370px; object-fit:cover; }
.card-title{ color:#fff; font-weight:800; letter-spacing:.3px; }
.card-text{ color:var(--muted); }

/* ====== Sections ====== */
#services{ background: var(--bg-2); }
#about{ background: linear-gradient(180deg, var(--bg-2), var(--bg)); }

/* ====== Footer ====== */
footer{
  background:#0f141a; color:#cfd6de; text-align:center; padding:20px;
  border-top:1px solid var(--border);
}

/* ====== Forms ====== */
form .form-control{
  background:#0e1318; border:1px solid var(--border); color:#e9edf3;
}
form .form-control::placeholder{ color:#7e8896; }
form .form-control:focus{
  border-color:var(--accent-2);
  box-shadow:0 0 0 .2rem rgba(255,209,102,.18);
}
form button.btn-primary{
  background: linear-gradient(180deg, var(--accent), #e09a00);
  border:none; font-weight:800;
}
form button.btn-primary:hover{ filter: brightness(1.02); }

/* ====== Links ====== */
a{ color:var(--accent-2); text-decoration:none; }
a:hover{ color:#ffe08a; }

/* ====== Spacing tweaks ====== */
.navbar .container-fluid, .navbar .container{ gap:12px; }
.section .row.g-4{ row-gap:1.5rem; }

/* ====== Accessibility ====== */
*:focus-visible{ outline:2px solid var(--accent-2); outline-offset:2px; }

/* ====== Reduce Motion ====== */
@media (prefers-reduced-motion: reduce){
  .custom-call-btn,.card{ transition:none }
}