/* Visit Baku — Global Styles */
:root {
  --bg: #0b1224;            /* deep navy base */
  --surface: #0f1a33;       /* dark surface */
  --text: #e6eef7;          /* light text */
  --muted: #9fb0c8;         /* muted light */
  --primary: #16b1d6;       /* caspian cyan */
  --accent: #ff7a59;        /* coral accent */
  --success: #22c55e;
  --danger: #ef4444;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, #0b1224 0%, #0d152b 50%, var(--bg) 100%);
}

/* Layout */
.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.section { padding: 3rem 0; }
.grid { display: grid; gap: 1.25rem; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

/* Header */
.header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(8px);
  background: rgba(11, 18, 36, 0.85);
  border-bottom: 1px solid rgba(159, 176, 200, 0.15);
}
.nav { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; }
.brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; letter-spacing: 0.2px; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); display: inline-block; }
.nav a { color: var(--text); text-decoration: none; padding: 0.5rem 0.75rem; border-radius: 8px; }
.nav a:hover { background: rgba(22, 177, 214, 0.15); }
.nav a.active { color: white; background: linear-gradient(90deg, var(--primary), var(--accent)); }

/* Hero */
.hero {
  position: relative;
  min-height: 62vh;
  display: grid; place-items: center;
  text-align: center;
  color: white;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,18,36,0.65), rgba(11,18,36,0.88));
  z-index: 1;
}
.hero .content { position: relative; z-index: 2; padding: 3rem 1rem; }
.hero h1 { font-size: clamp(2rem, 4.5vw, 3.5rem); margin: 0 0 0.75rem; }
.hero p { font-size: clamp(1rem, 2.5vw, 1.25rem); color: var(--muted); max-width: 780px; margin: 0 auto 1.5rem; }
.hero .cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  color: #0b1022; font-weight: 700; padding: 0.75rem 1rem; border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.hero .cta:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* Hero slideshow */
.hero-slides { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-slides .slide {
  position: absolute; inset: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  opacity: 0;
  animation: heroSlide 6s infinite ease-in-out;
}
.hero-slides .s1 { background-image: url('images/Old_City.jpeg'); animation-delay: 0s; }
.hero-slides .s2 { background-image: url('images/Overview.webp'); animation-delay: 2s; }
.hero-slides .s3 { background-image: url('images/Heydar_Aliyev_Cultural_Center.jpg'); animation-delay: 4s; }

@keyframes heroSlide {
  0% { opacity: 0; }
  5% { opacity: 1; }
  30% { opacity: 1; }
  35% { opacity: 0; }
  100% { opacity: 0; }
}

/* Cards */
.card {
  background: rgba(15,26,51,0.85);
  border: 1px solid rgba(159,176,200,0.18);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.card .body { padding: 1rem; }
.card h3 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.card p { margin: 0; color: var(--muted); }

/* Typography */
.h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); margin: 0 0 0.5rem; }
.lead { color: var(--muted); max-width: 800px; }
.bullets { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.bullets li { list-style: none; padding-left: 0.75rem; border-left: 3px solid var(--primary); color: var(--muted); }

/* Form */
.form {
  background: rgba(15,26,51,0.85);
  border: 1px solid rgba(159,176,200,0.18);
  border-radius: 14px; padding: 1rem;
}
.input, .select, .textarea {
  width: 100%; padding: 0.75rem; border-radius: 10px; border: 1px solid rgba(159,176,200,0.25);
  background: rgba(2,6,23,0.5); color: var(--text);
}
.textarea { min-height: 140px; resize: vertical; }
.label { display: block; margin: 0.5rem 0; color: var(--muted); font-weight: 600; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 640px) { .row { grid-template-columns: 1fr; } }
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: linear-gradient(90deg, var(--primary), var(--accent)); color: #0b1022;
  padding: 0.75rem 1rem; border: none; border-radius: 10px; font-weight: 700;
}
.btn.secondary { background: rgba(159,176,200,0.15); color: var(--text); }
.help { color: var(--muted); font-size: 0.9rem; }
.alert { padding: 0.75rem; border-radius: 10px; margin-top: 0.75rem; }
.alert.success { background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.45); }
.alert.error { background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.45); }

/* Footer */
.footer { border-top: 1px solid rgba(159,176,200,0.18); color: var(--muted); }
.footer .inner { padding: 1rem 0; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.footer a { color: var(--muted); }

/* Utilities */
.stack { display: grid; gap: 1rem; }
.center { text-align: center; }
.kicker { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; }
.small { font-size: 0.95rem; }
 
/* Reviews */
.quote { background: rgba(15,26,51,0.85); border: 1px solid rgba(159,176,200,0.18); border-radius: 14px; padding: 1rem; }
.quote .author { margin-top: 0.5rem; color: var(--muted); font-weight: 600; }
.quote .origin { color: var(--muted); font-size: 0.9rem; }