/* ============================================================
   Cloud Online — Brand Color System
   Primary:  Dark Navy  #0f2557  (logo dark blue)
   Accent:   Orange     #f97316  (logo orange)
   Mid Blue: #1d4ed8    (interactive blue)
   Light:    #e8f0fe    (tinted backgrounds)
   ============================================================ */

:root {
  --brand-navy:       #0f2557;
  --brand-navy-dark:  #091a3e;
  --brand-navy-mid:   #1a3a7a;
  --brand-blue:       #1d4ed8;
  --brand-blue-light: #3b82f6;
  --brand-orange:     #f97316;
  --brand-orange-dark:#ea6c0a;
  --brand-orange-light:#fff7ed;
  --brand-white:      #ffffff;
  --brand-bg:         #f8faff;
  --brand-text:       #1e293b;
  --brand-muted:      #64748b;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--brand-bg); }
::-webkit-scrollbar-thumb { background: var(--brand-blue-light); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-blue); }

/* ── Body ──────────────────────────────────────────────────── */
body { background-color: var(--brand-bg); color: var(--brand-text); }

/* ── Utility overrides for brand colors ────────────────────── */

/* Backgrounds */
.bg-brand-navy        { background-color: var(--brand-navy) !important; }
.bg-brand-navy-dark   { background-color: var(--brand-navy-dark) !important; }
.bg-brand-orange      { background-color: var(--brand-orange) !important; }
.bg-brand-orange-light{ background-color: var(--brand-orange-light) !important; }
.bg-brand-blue        { background-color: var(--brand-blue) !important; }
.bg-brand-light       { background-color: var(--brand-bg) !important; }

/* Text */
.text-brand-navy      { color: var(--brand-navy) !important; }
.text-brand-orange    { color: var(--brand-orange) !important; }
.text-brand-blue      { color: var(--brand-blue) !important; }

/* Borders */
.border-brand-orange  { border-color: var(--brand-orange) !important; }
.border-brand-navy    { border-color: var(--brand-navy) !important; }
.border-brand-blue    { border-color: var(--brand-blue) !important; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--brand-orange);
  color: #fff;
  font-weight: 700;
  border-radius: 0.75rem;
  padding: 0.875rem 2rem;
  transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 14px rgba(249,115,22,0.35);
}
.btn-primary:hover {
  background-color: var(--brand-orange-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(249,115,22,0.45);
}

.btn-secondary {
  background-color: var(--brand-navy);
  color: #fff;
  font-weight: 700;
  border-radius: 0.75rem;
  padding: 0.875rem 2rem;
  transition: background-color 0.2s, transform 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-secondary:hover {
  background-color: var(--brand-navy-mid);
  transform: translateY(-1px);
}

/* ── Section accent line ───────────────────────────────────── */
.section-accent {
  width: 4rem;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-blue));
  border-radius: 9999px;
  margin: 1rem auto 0;
}

/* ── Hero gradient overlay ─────────────────────────────────── */
.hero-overlay {
  background: linear-gradient(135deg, rgba(15,37,87,0.92) 0%, rgba(15,37,87,0.55) 100%);
}

/* ── Card hover accent ─────────────────────────────────────── */
.card-brand:hover {
  border-color: var(--brand-orange) !important;
  box-shadow: 0 20px 40px rgba(249,115,22,0.12);
}

/* ── Partner tab active ────────────────────────────────────── */
.partner-tab.active-tab {
  background-color: var(--brand-orange) !important;
  color: #fff !important;
  border-color: var(--brand-orange) !important;
}

/* ── Topbar ────────────────────────────────────────────────── */
#topbar {
  background: linear-gradient(90deg, var(--brand-navy-dark) 0%, var(--brand-navy) 100%) !important;
}

/* ── Navbar active link ────────────────────────────────────── */
#navbar a.nav-link.font-bold,
#mobile-menu a.text-blue-600 {
  color: var(--brand-orange) !important;
}
#navbar a.nav-link:hover,
#mobile-menu a:hover {
  color: var(--brand-orange) !important;
}

/* ── FTP button in nav ─────────────────────────────────────── */
#navbar .bg-gradient-to-b,
#mobile-menu .bg-gradient-to-b {
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-blue) 100%) !important;
}

/* ── Hero section dark bg ──────────────────────────────────── */
.hero-dark {
  background: linear-gradient(135deg, var(--brand-navy-dark) 0%, var(--brand-navy) 100%);
}

/* ── Packages section dark bg ─────────────────────────────── */
.packages-dark {
  background: linear-gradient(135deg, var(--brand-navy-dark) 0%, #1a2f6e 100%);
}

/* ── Orange accent divider ─────────────────────────────────── */
.divider-orange {
  width: 4rem;
  height: 4px;
  background-color: var(--brand-orange);
  border-radius: 9999px;
  margin: 1rem auto 0;
}

/* ── Slide badge ───────────────────────────────────────────── */
.slide-badge {
  background: rgba(249,115,22,0.25) !important;
  border-color: rgba(249,115,22,0.4) !important;
  color: #fed7aa !important;
}
.slide-badge .pulse-dot {
  background-color: var(--brand-orange) !important;
}

/* ── Popup border ──────────────────────────────────────────── */
.popup-content {
  border-top-color: var(--brand-orange) !important;
}
.close-popup:hover { color: var(--brand-orange) !important; }

/* ── Footer ────────────────────────────────────────────────── */
footer {
  background: linear-gradient(180deg, var(--brand-navy-dark) 0%, #060f2a 100%) !important;
}
footer .hover\:bg-blue-600:hover { background-color: var(--brand-orange) !important; }
footer a:hover { color: #fdba74 !important; }

/* ── Contact card top accent ───────────────────────────────── */
.contact-card-accent { background-color: var(--brand-orange) !important; }

/* ── Form focus ring ───────────────────────────────────────── */
input:focus, select:focus, textarea:focus {
  border-color: var(--brand-orange) !important;
  box-shadow: 0 0 0 4px rgba(249,115,22,0.12) !important;
}

/* ── Submit button ─────────────────────────────────────────── */
#submitBtn {
  background-color: var(--brand-navy) !important;
}
#submitBtn:hover {
  background-color: var(--brand-orange) !important;
  box-shadow: 0 6px 20px rgba(249,115,22,0.35) !important;
}

/* ── Stats / infra cards ───────────────────────────────────── */
.infra-card {
  background-color: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.1) !important;
}

/* ── About decorative circles ──────────────────────────────── */
.deco-circle-1 { background-color: rgba(249,115,22,0.15) !important; }
.deco-circle-2 { background-color: rgba(29,78,216,0.12) !important; }

/* ── Experience badge ──────────────────────────────────────── */
.exp-badge-icon {
  background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-dark) 100%) !important;
}

/* ── Testimonial section bg ────────────────────────────────── */
.testimonial-bg {
  background: linear-gradient(135deg, #eef2ff 0%, #fff7ed 100%) !important;
}

/* ── Testimonial card quote icon ───────────────────────────── */
.testimonial-quote { color: var(--brand-orange) !important; }

/* ── Package popular badge ─────────────────────────────────── */
.popular-badge {
  background-color: var(--brand-orange) !important;
}

/* ── Package price color ───────────────────────────────────── */
.price-color { color: var(--brand-navy) !important; }

/* ── CTA section ───────────────────────────────────────────── */
.cta-section {
  background: linear-gradient(135deg, var(--brand-navy-dark) 0%, var(--brand-navy) 100%) !important;
}

/* ── Core values icon bg ───────────────────────────────────── */
.value-icon-orange { background-color: rgba(249,115,22,0.15) !important; color: var(--brand-orange) !important; }
.value-icon-blue   { background-color: rgba(29,78,216,0.12) !important; color: var(--brand-blue) !important; }
.value-icon-navy   { background-color: rgba(15,37,87,0.1) !important; color: var(--brand-navy) !important; }