/* =========================================================
   JAS GROUP TX - V8 COLOR TEST
   Purpose: less dark/lúgubre, more navy/blue/sky/white.
   Structure and text are unchanged from the approved version.
   ========================================================= */

:root {
  --bg: #0b1424;
  --bg-soft: #111d31;
  --panel: rgba(22, 36, 58, 0.84);
  --panel-solid: #16243a;
  --text: #f7fbff;
  --muted: #c8d4e5;
  --muted-2: #92a6bf;
  --red: #d4202a;
  --red-dark: #a9141c;
  --gold: #c9a14a;
  --blue: #35a8ff;
  --sky: #79d4ff;
  --line: rgba(175, 215, 255, 0.18);
  --shadow: 0 24px 80px rgba(3, 12, 28, 0.42);
}

body {
  background:
    radial-gradient(circle at 78% 10%, rgba(53, 168, 255, 0.24), transparent 34%),
    radial-gradient(circle at 14% 14%, rgba(121, 212, 255, 0.16), transparent 30%),
    radial-gradient(circle at 80% 78%, rgba(212, 32, 42, 0.10), transparent 28%),
    linear-gradient(180deg, #0b1424 0%, #101c30 48%, #0c1728 100%) !important;
}

.site-header {
  background: rgba(9, 20, 38, 0.88) !important;
  border-bottom: 1px solid rgba(121, 212, 255, 0.20) !important;
}

.brand {
  background: rgba(247, 251, 255, 0.045) !important;
  border: 1px solid rgba(121, 212, 255, 0.22) !important;
}

.main-nav a {
  background: rgba(255, 255, 255, 0.075) !important;
  border: 1px solid rgba(121, 212, 255, 0.18) !important;
  color: #e8f3ff !important;
}

.main-nav a:hover {
  background: rgba(53, 168, 255, 0.28) !important;
  border-color: rgba(121, 212, 255, 0.52) !important;
  color: #ffffff !important;
}

.lang {
  background: rgba(255, 255, 255, 0.075) !important;
  border: 1px solid rgba(121, 212, 255, 0.22) !important;
  color: #c9d9eb !important;
}

.lang.active {
  color: #061426 !important;
  background: linear-gradient(135deg, #79d4ff, #35a8ff) !important;
  border-color: rgba(121, 212, 255, 0.68) !important;
}

.appointment,
.primary-btn {
  box-shadow: 0 12px 30px rgba(212,32,42,0.22) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
}

.search-panel {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(121,212,255,0.18) !important;
}

.search-row input {
  border: 1px solid rgba(121,212,255,0.18) !important;
  background: rgba(5, 14, 28, 0.42) !important;
}

.search-row input:focus {
  border-color: rgba(121,212,255,0.76) !important;
  box-shadow: 0 0 0 4px rgba(53,168,255,0.15) !important;
}

.search-row button {
  background: linear-gradient(135deg, #35a8ff, #2378d8) !important;
  color: #061426 !important;
}

.quick-tags button,
.video-tags span {
  background: rgba(255,255,255,0.075) !important;
  border: 1px solid rgba(121,212,255,0.16) !important;
  color: #dcecff !important;
}

.hero-visual {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.095), rgba(255,255,255,0.035)),
    radial-gradient(circle at 50% 48%, rgba(53,168,255,0.21), transparent 45%) !important;
  border: 1px solid rgba(121,212,255,0.20) !important;
}

.hero-visual::before {
  background:
    radial-gradient(circle, rgba(255,255,255,0.055), transparent 58%),
    conic-gradient(from 110deg, transparent, rgba(121,212,255,0.18), transparent, rgba(53,168,255,0.18), transparent) !important;
}

.blue-line {
  background: linear-gradient(90deg, transparent, var(--sky), var(--blue), transparent) !important;
  opacity: 0.98 !important;
}

.video-preview {
  background:
    linear-gradient(180deg, rgba(8, 20, 38, 0.08), rgba(8, 20, 38, 0.62)),
    radial-gradient(circle at 24% 20%, rgba(121,212,255,0.34), transparent 30%),
    radial-gradient(circle at 76% 18%, rgba(53,168,255,0.30), transparent 28%),
    linear-gradient(135deg, #13243a 0%, #162d4c 42%, #1a2434 100%) !important;
  border: 1px solid rgba(121,212,255,0.22) !important;
}

.feature-card,
.clip-card,
.gallery-card,
.checklist-card,
.placeholder-section {
  background: rgba(22, 36, 58, 0.84) !important;
  border: 1px solid rgba(175, 215, 255, 0.18) !important;
}

.feature-card:hover,
.gallery-card:hover {
  border-color: rgba(121,212,255,0.56) !important;
}

.before-copy {
  background:
    linear-gradient(135deg, rgba(53,168,255,0.22), rgba(121,212,255,0.12)),
    rgba(255,255,255,0.055) !important;
  border: 1px solid rgba(121,212,255,0.18) !important;
}

.booking-band {
  background:
    linear-gradient(90deg, rgba(53,168,255,0.20), rgba(212,32,42,0.13)),
    rgba(255,255,255,0.065) !important;
  border: 1px solid rgba(121,212,255,0.20) !important;
}

.site-footer {
  border-top: 1px solid rgba(121,212,255,0.20) !important;
}

.service-card {
  background: rgba(22, 36, 58, 0.84) !important;
  border: 1px solid rgba(175, 215, 255, 0.18) !important;
}

.service-card:hover {
  border-color: rgba(121,212,255,0.56) !important;
}

.service-icon {
  background: rgba(255,255,255,0.075) !important;
  border: 1px solid rgba(121,212,255,0.18) !important;
}


.roadtrip-video-card {
  background: rgba(22, 36, 58, 0.84) !important;
  border: 1px solid rgba(175, 215, 255, 0.18) !important;
}

.roadtrip-video-preview {
  background:
    linear-gradient(180deg, rgba(8, 20, 38, 0.08), rgba(8, 20, 38, 0.62)),
    radial-gradient(circle at 24% 20%, rgba(121,212,255,0.34), transparent 30%),
    radial-gradient(circle at 76% 18%, rgba(53,168,255,0.30), transparent 28%),
    linear-gradient(135deg, #13243a 0%, #162d4c 42%, #1a2434 100%) !important;
  border-bottom: 1px solid rgba(121,212,255,0.18) !important;
}

.roadtrip-checks span {
  background: rgba(255,255,255,0.075) !important;
  border: 1px solid rgba(121,212,255,0.16) !important;
  color: #dcecff !important;
}

.roadtrip-checks span::before {
  color: #79d4ff !important;
}