/* motoregitimi.com – Main Stylesheet */
:root {
  --primary:      #F97316;
  --primary-dark: #ea6c00;
  --secondary:    #111827;
  --text:         #111827;
  --text-light:   #6B7280;
  --text-muted:   #9CA3AF;
  --bg:           #ffffff;
  --bg-alt:       #F8FAFC;
  --bg-dark:      #111827;
  --border:       #E5E7EB;
  --radius:       10px;
  --radius-lg:    16px;
  --shadow:       0 2px 16px rgba(0,0,0,.08);
  --shadow-md:    0 4px 24px rgba(0,0,0,.12);
  --max-w:        1140px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 1.25rem; }

/* ── Buttons ─────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .18s;
  text-decoration: none;
  line-height: 1.3;
  white-space: nowrap;
}
.btn-primary  { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover  { background: var(--primary-dark); border-color: var(--primary-dark); text-decoration: none; }
.btn-primary:disabled { background: #d1d5db; border-color: #d1d5db; color: #9ca3af; cursor: not-allowed; opacity: 1; }
.btn-secondary{ background: var(--secondary); color: #fff; border-color: var(--secondary); }
.btn-secondary:hover{ opacity: .88; text-decoration: none; }
.btn-outline  { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-outline:hover   { border-color: #fff; background: rgba(255,255,255,.1); text-decoration: none; }
.btn-ghost    { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-ghost:hover     { background: var(--primary); color: #fff; text-decoration: none; }

/* ── Navbar ──────────────────────────────── */
.navbar {
  background: var(--bg-dark);
  padding: .75rem 0;
  position: sticky;
  top: 0;
  z-index: 300;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.navbar .container { display: flex; align-items: center; justify-content: space-between; }
.navbar-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  line-height: 1;
}
.navbar-brand:hover { opacity: .9; text-decoration: none; }
.brand-icon { display: flex; align-items: center; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-main {
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.3px;
  text-transform: lowercase;
}
.brand-accent { color: var(--primary); }
.brand-tagline {
  font-size: .6rem;
  font-weight: 500;
  color: rgba(255,255,255,.4);
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-top: 2px;
}
.navbar-links { display: flex; gap: 1.75rem; align-items: center; }
.navbar-links a { font-size: .875rem; font-weight: 500; color: rgba(255,255,255,.75); transition: color .15s; }
.navbar-links a:hover { color: #fff; text-decoration: none; }
.navbar-links .nav-cta {
  color: var(--primary);
  border: 1.5px solid var(--primary);
  padding: .35rem .85rem;
  border-radius: 6px;
  font-size: .85rem;
}
.navbar-links .nav-cta:hover { background: var(--primary); color: #fff; }
.navbar-links .nav-user {
  display: flex; align-items: center; gap: .35rem;
  font-size: .78rem; color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  padding: .28rem .7rem;
  border-radius: 20px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.navbar-links .nav-user:hover { background: rgba(255,255,255,.14); color: rgba(255,255,255,.9); text-decoration: none; }
.navbar-links .nav-user svg { flex-shrink: 0; }

/* ── Hamburger button ────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: .25rem;
  width: 36px;
  height: 36px;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile menu drawer ──────────────────── */
.mobile-menu { display: none; }
.mobile-menu.is-open { display: block; }
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 200;
}
.mobile-menu-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 75vw;
  max-width: 300px;
  height: 100dvh;
  background: var(--bg-dark);
  z-index: 201;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem;
  box-shadow: -4px 0 24px rgba(0,0,0,.35);
  animation: drawerSlideIn .22s ease;
}
@keyframes drawerSlideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.mobile-menu-title {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.mobile-menu-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.6);
  font-size: 1.1rem;
  cursor: pointer;
  padding: .25rem;
  line-height: 1;
}
.mobile-menu-close:hover { color: #fff; }
.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mobile-menu-nav a {
  display: block;
  padding: .9rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255,255,255,.8);
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: color .15s;
}
.mobile-menu-nav a:hover { color: #fff; text-decoration: none; }
.mobile-menu-nav .mobile-menu-cta {
  margin-top: 1.5rem;
  border-bottom: none;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  padding: .7rem 1rem;
  border-radius: 6px;
  text-align: center;
}
.mobile-menu-nav .mobile-menu-cta:hover { background: var(--primary); color: #fff; }
.mobile-menu-nav .mobile-menu-logout {
  color: rgba(255,255,255,.4);
  font-size: .9rem;
  border-bottom: none;
  padding: .6rem 0;
}
.mobile-menu-nav .mobile-menu-logout:hover { color: #ef4444; }

.footer-brand { font-size: 1.15rem; font-weight: 800; color: var(--primary); margin-bottom: .75rem; }
.footer-social { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.footer-social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,.15); border-radius: 50%; color: rgba(255,255,255,.55);
  transition: color .18s, border-color .18s, background .18s; }
.footer-social-link:hover { color: #fff; border-color: var(--primary); background: rgba(249,115,22,.15); text-decoration: none; }
.footer-social-link svg { width: 16px; height: 16px; stroke: currentColor; flex-shrink: 0; }

/* ── B2B Banner ──────────────────────────── */
.b2b-banner {
  background: #1a2234;
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: .65rem 0;
}
.b2b-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.b2b-banner-text {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  flex-wrap: wrap;
  font-size: .82rem;
  line-height: 1.4;
}
.b2b-banner-text strong {
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}
.b2b-banner-text span {
  color: rgba(255,255,255,.55);
}
.b2b-banner-cta {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: .78rem;
  font-weight: 700;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  padding: .3rem .85rem;
  border-radius: 6px;
  transition: background .15s, color .15s;
}
.b2b-banner-cta:hover { background: var(--primary); color: #fff; text-decoration: none; }

@media (max-width: 640px) {
  .b2b-banner-inner { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .b2b-banner-text { font-size: .8rem; }
  .b2b-banner-text strong { white-space: normal; }
}

/* ── Hero ────────────────────────────────── */
.hero {
  position: relative;
  background: var(--bg-dark);
  padding: 5.5rem 0 4.5rem;
  overflow: hidden;
}
.hero-bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .28;
}
.hero-overlay { position: relative; z-index: 1; }
.hero .container { text-align: center; }
.hero-eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(249,115,22,.12);
  padding: .3rem .85rem;
  border-radius: 50px;
  margin-bottom: 1.25rem;
}
.hero h1 {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 1rem;
  letter-spacing: -.5px;
}
.hero-subtitle {
  font-size: 1.1rem;
  color: rgba(255,255,255,.7);
  max-width: 520px;
  margin: 0 auto 2.5rem;
}
/* City shortcut buttons in hero */
.hero-cities {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
}
.hero-city-btn {
  display: inline-block;
  padding: .65rem 1.4rem;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: 50px;
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  transition: all .18s;
}
.hero-city-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  transform: translateY(-1px);
  text-decoration: none;
}
.hero-city-btn--all {
  color: var(--primary);
  border-color: var(--primary);
  background: transparent;
}
.hero-city-btn--all:hover { background: var(--primary); color: #fff; }

/* ── Hero Search ─────────────────────────── */
.hero-search-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  margin-top: 2rem;
  width: 100%;
  max-width: 600px;
}
.hero-search {
  display: flex;
  align-items: center;
  width: 100%;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 50px;
  padding: .3rem .3rem .3rem 1rem;
  backdrop-filter: blur(6px);
  gap: .5rem;
}
.hero-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: .95rem;
  min-width: 0;
}
.hero-search-input::placeholder { color: rgba(255,255,255,.5); }
.hero-search-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 40px;
  padding: .55rem 1.35rem;
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
  flex-shrink: 0;
}
.hero-search-btn:hover { background: #ea6c0a; }

.hero-search-filters {
  display: none;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: center;
  width: 100%;
  animation: fadeInDown .18s ease;
}
@keyframes fadeInDown {
  from { opacity:0; transform:translateY(-5px); }
  to   { opacity:1; transform:translateY(0); }
}
.hero-filter-select {
  padding: .42rem .85rem;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: 8px;
  color: #fff;
  font-size: .8rem;
  cursor: pointer;
  outline: none;
  transition: border-color .15s;
  flex: 1;
  min-width: 130px;
}
.hero-filter-select option { background: #1e2533; color: #fff; }
.hero-filter-select:focus { border-color: var(--primary); }

.hero-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.55);
  border-radius: 20px;
  padding: .28rem .85rem;
  font-size: .78rem;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.hero-filter-toggle:hover,
.hero-filter-toggle.active { border-color: var(--primary); color: var(--primary); }

/* ── Search Results Page ─────────────────── */
.search-page { padding: 2.5rem 0 4rem; background: var(--bg-alt); min-height: 60vh; }

.search-filter-bar {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 2rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  overflow: hidden;
}

/* Toggle button — hidden on desktop, visible on mobile */
.search-filter-toggle-btn {
  display: none;
  width: 100%;
  padding: .85rem 1.25rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
  color: #374151;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.search-filter-toggle-btn span { display: flex; align-items: center; gap: .5rem; }
.search-filter-toggle-btn.active { color: var(--primary); }
.search-filter-active-dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--primary);
  border-radius: 50%;
}

/* Body — always visible on desktop, collapsed on mobile */
.search-filter-body { padding: 1.25rem 1.5rem; }

.search-filter-actions {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  flex-shrink: 0;
}
.search-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: flex-end;
}
.search-filter-group {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 140px;
}
.search-filter-group--keyword { flex: 1; min-width: 200px; }
.search-filter-group label { font-size: .75rem; font-weight: 600; color: #6b7280; }
.search-input,
.search-select {
  padding: .55rem .85rem;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: .875rem;
  color: #0f172a;
  background: #fff;
  outline: none;
  transition: border-color .15s;
  width: 100%;
  box-sizing: border-box;
}
.search-input:focus, .search-select:focus { border-color: var(--primary); }
.search-btn {
  padding: .58rem 1.4rem;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  align-self: flex-end;
  white-space: nowrap;
}
.search-btn:hover { background: #ea6c0a; }
.search-clear-btn {
  align-self: flex-end;
  padding: .55rem .9rem;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: .8rem;
  color: #6b7280;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.search-clear-btn:hover { border-color: #ef4444; color: #ef4444; }

.search-results-header { margin-bottom: 1.25rem; }
.search-results-count { font-size: .925rem; color: #6b7280; }
.search-results-count strong { color: #0f172a; font-size: 1rem; }

.search-section-title { font-size: 1.1rem; font-weight: 800; color: #0f172a; margin: 0 0 1rem; }
.search-section-title--gap { margin-top: 2.5rem; }

.search-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}
.search-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.1rem 1.1rem 1rem;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s, border-color .15s;
  position: relative;
}
.search-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); border-color: var(--primary); }

.search-card-avatar {
  width: 52px; height: 52px;
  border-radius: 10px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem; color: #fff;
}
.search-card-avatar--center     { background: linear-gradient(135deg,#f97316,#fb923c); }
.search-card-avatar--instructor { background: linear-gradient(135deg,#3b82f6,#60a5fa); }
.search-card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.search-card-body { flex: 1; min-width: 0; }
.search-card-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .35rem; }
.search-badge {
  font-size: .7rem; font-weight: 600;
  padding: .15rem .55rem;
  border-radius: 20px;
  background: #f1f5f9; color: #475569;
}
.search-badge--motor      { background: #fff7ed; color: #c2410c; }
.search-badge--instructor { background: #eff6ff; color: #1d4ed8; }

.search-card-name { font-size: .975rem; font-weight: 700; color: #0f172a; margin: 0 0 .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-card-location { font-size: .78rem; color: #6b7280; display: flex; align-items: center; gap: .3rem; margin-bottom: .4rem; }
.search-card-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .4rem; }
.search-tag { font-size: .7rem; padding: .15rem .5rem; background: #f1f5f9; color: #374151; border-radius: 4px; }
.search-card-desc { font-size: .78rem; color: #6b7280; line-height: 1.45; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-card-arrow { font-size: 1rem; color: #d1d5db; align-self: center; flex-shrink: 0; transition: color .15s, transform .15s; }
.search-card:hover .search-card-arrow { color: var(--primary); transform: translateX(3px); }

.search-empty { text-align: center; padding: 4rem 0; color: #6b7280; }
.search-empty-icon { font-size: 2.5rem; margin-bottom: .5rem; }

@media (max-width: 768px) {
  .hero-search { max-width: 100%; }
  .search-filter-toggle-btn { display: flex; }
  .search-filter-body { display: none; padding: 0 1.25rem 1.25rem; }
  .search-filter-body.open { display: block; }
  .search-filter-row { flex-direction: column; }
  .search-filter-group, .search-filter-group--keyword { min-width: 100%; }
  .search-filter-actions { flex-direction: column; width: 100%; }
  .search-btn, .search-clear-btn { width: 100%; text-align: center; justify-content: center; }
  .search-grid { grid-template-columns: 1fr; }
}

/* ── City Grid ───────────────────────────── */
.cities-section { padding: 5rem 0; background: var(--bg-alt); }
.section-header { text-align: center; margin-bottom: 2.5rem; }
.section-header h2 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.3px; }
.section-header p { color: var(--text-light); margin-top: .4rem; }

.city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
}
.city-card {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  transition: box-shadow .2s, transform .2s, border-color .2s;
  position: relative;
  overflow: hidden;
}
.city-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--primary);
  opacity: 0;
  transition: opacity .2s;
}
.city-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: #d1d5db; text-decoration: none; }
.city-card:hover::before { opacity: 1; }
.city-card h3 { font-size: 1.2rem; font-weight: 700; color: var(--secondary); margin-bottom: .5rem; }
.city-card-meta { font-size: .82rem; color: var(--text-muted); margin-bottom: 1rem; }
.city-card-coming {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-alt);
  padding: .2rem .6rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}
.city-card-cta { font-size: .88rem; color: var(--primary); font-weight: 700; }
.city-card-tagline { font-size: .85rem; color: var(--text-muted); margin-bottom: .85rem; }

/* ── SEO Content ─────────────────────────── */
.seo-content-section { padding: 5rem 0; }
.seo-content-section .container { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.seo-content h2 { font-size: 1.6rem; font-weight: 800; margin-bottom: 1.25rem; letter-spacing: -.3px; }
.seo-content p { color: var(--text-light); line-height: 1.8; margin-bottom: 1rem; }
.seo-list { margin: 1.5rem 0; }
.seo-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-light);
  font-size: .95rem;
}
.seo-list li:last-child { border-bottom: none; }
.seo-list-icon {
  width: 28px; height: 28px;
  background: rgba(249,115,22,.1);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
  margin-top: .1rem;
}
.seo-list-content strong { display: block; color: var(--text); font-size: .95rem; margin-bottom: .15rem; }

/* ── Popular Guides ──────────────────────── */
.guides-section { padding: 5rem 0; background: var(--bg-alt); }
.article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.25rem; }
.article-card {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  transition: box-shadow .2s, transform .2s;
}
.article-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.article-card h3 { font-size: 1rem; font-weight: 700; color: var(--secondary); margin-bottom: .6rem; line-height: 1.4; }
.article-card p { font-size: .875rem; color: var(--text-light); margin-bottom: .75rem; line-height: 1.6; }
.read-more { font-size: .82rem; color: var(--primary); font-weight: 700; }

/* ── CTA Banner ──────────────────────────── */
.cta-section { padding: 4rem 0; }
.cta-box {
  background: var(--secondary);
  border-radius: var(--radius-lg);
  padding: 3.5rem 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-box::after {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 200px; height: 200px;
  background: var(--primary);
  opacity: .08;
  border-radius: 50%;
}
.cta-box h2 { font-size: 1.7rem; font-weight: 800; color: #fff; margin-bottom: .6rem; }
.cta-box p  { color: rgba(255,255,255,.65); margin-bottom: 1.75rem; max-width: 480px; margin-left: auto; margin-right: auto; }

/* ── Lead Form ───────────────────────────── */
.lead-section { padding: 4rem 0; }
.lead-box {
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid var(--border);
}
.lead-box h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 1.25rem; }
.form-inline { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }
.form-inline .form-control { flex: 1; min-width: 180px; }
.lead-success { color: #16a34a; font-weight: 600; margin-top: 1rem; }

/* ── About / Trust ───────────────────────── */
.about-section { padding: 5rem 0; border-top: 1px solid var(--border); }
.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.about-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1.25rem;
}
.about-badge::before { content: ''; display: block; width: 20px; height: 2px; background: var(--primary); }
.about-inner h2 { font-size: 1.6rem; font-weight: 800; margin-bottom: 1rem; letter-spacing: -.3px; }
.about-inner p  { color: var(--text-light); line-height: 1.8; margin-bottom: 1rem; }
.about-stats { display: flex; gap: 2rem; margin-top: 1.5rem; flex-wrap: wrap; }
.about-stat strong { display: block; font-size: 1.7rem; font-weight: 800; color: var(--primary); }
.about-stat span   { font-size: .8rem; color: var(--text-muted); font-weight: 500; }
.about-visual {
  background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  color: #fff;
}
.about-visual-item { padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.about-visual-item:last-child { border-bottom: none; }
.about-visual-item strong { display: block; font-size: .9rem; color: #fff; margin-bottom: .2rem; }
.about-visual-item span { font-size: .8rem; color: rgba(255,255,255,.5); }

/* ── Training Types ──────────────────────── */
.training-types-section { padding: 3rem 0; }
.training-types-section h2 { font-size: 1.4rem; margin-bottom: 1.5rem; font-weight: 700; }
.training-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.training-card {
  background: var(--bg-alt);
  border-left: 4px solid var(--primary);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.training-card h3 { font-size: .95rem; font-weight: 600; }

/* ── Breadcrumb ──────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: 1.25rem;
  font-size: .78rem;
}
.breadcrumb a { color: rgba(255,255,255,.5); transition: color .15s; }
.breadcrumb a:hover { color: rgba(255,255,255,.9); text-decoration: none; }
.breadcrumb span { color: rgba(255,255,255,.35); }
.breadcrumb span:last-child { color: rgba(255,255,255,.7); }
.breadcrumb-sep { color: rgba(255,255,255,.25); font-size: .7rem; }

/* ── Profile Detail Pages ────────────────── */
.profile-hero {
  background: var(--bg-dark);
  padding: 3rem 0 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.profile-hero-inner {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.profile-avatar {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.5px;
}
.profile-avatar--center  { background: linear-gradient(135deg, #F97316, #ea6c00); }
.profile-avatar--instructor { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .6rem;
}
.profile-badge {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: .2rem .6rem;
  border-radius: 4px;
}
.profile-badge--type   { background: rgba(249,115,22,.15); color: #F97316; }
.profile-badge--years  { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); }
.profile-badge--motor  { background: rgba(34,197,94,.12); color: #22c55e; }
.profile-hero-name {
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 .4rem;
  line-height: 1.2;
}
.profile-hero-location {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  color: rgba(255,255,255,.5);
}

.profile-body { padding: 3rem 0 4rem; }
.profile-body-inner {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2.5rem;
  align-items: start;
}
.profile-main { display: flex; flex-direction: column; gap: 2rem; }
.profile-section {}
.profile-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--border);
}
.profile-description {
  font-size: .95rem;
  color: var(--text-light);
  line-height: 1.8;
}
.profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.profile-tag {
  font-size: .8rem;
  font-weight: 600;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--secondary);
  padding: .3rem .75rem;
  border-radius: 20px;
}
.profile-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.profile-info-item {
  background: #fff;
  padding: .85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.profile-info-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
}
.profile-info-value {
  font-size: .9rem;
  font-weight: 600;
  color: var(--secondary);
}
.profile-cert-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.profile-cert-list li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: var(--text-light);
}
.profile-cert-list li svg { color: #16a34a; flex-shrink: 0; }

.profile-sidebar { display: flex; flex-direction: column; gap: 1rem; }
.profile-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow);
}
.profile-card-title {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.profile-contact-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .88rem;
  font-weight: 500;
  color: var(--secondary);
  padding: .55rem 0;
  border-bottom: 1px solid var(--border);
  transition: color .15s;
}
.profile-contact-row:last-child { border-bottom: none; }
.profile-contact-row:hover { color: var(--primary); text-decoration: none; }
.profile-contact-row svg { color: var(--text-muted); flex-shrink: 0; }
.profile-contact-row--whatsapp { color: #16a34a; }
.profile-contact-row--whatsapp svg { color: #16a34a; }
.profile-contact-row--whatsapp:hover { color: #15803d; }
.profile-card--cta {
  background: var(--bg-dark);
  border-color: rgba(255,255,255,.08);
}
.profile-card--cta p {
  font-size: .85rem;
  color: rgba(255,255,255,.6);
  margin-bottom: 1rem;
  line-height: 1.5;
}
.report-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  margin-top: .6rem;
  font-size: .75rem;
  color: #9ca3af;
  text-decoration: none;
}
.report-link:hover { color: #ef4444; }

/* ── Report form ─────────────────────────── */
.report-section { padding: 3rem 0 5rem; }
.report-container { max-width: 600px; }
.report-back {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: 1.5rem;
}
.report-back:hover { color: var(--primary); }
.report-title { font-size: 1.6rem; font-weight: 800; color: var(--secondary); margin: 0 0 .4rem; }
.report-subtitle { font-size: .95rem; color: var(--text-muted); margin: 0 0 2rem; }
.report-form { display: flex; flex-direction: column; gap: 1.25rem; }
.report-field { display: flex; flex-direction: column; gap: .5rem; }
.report-field-label { font-size: .9rem; font-weight: 600; color: var(--secondary); margin: 0; }
.report-optional { font-weight: 400; color: var(--text-muted); }
.report-radio-label {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .9rem;
  color: var(--text);
  cursor: pointer;
  padding: .5rem .75rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  transition: border-color .15s, background .15s;
}
.report-radio-label:hover { border-color: var(--primary); background: #fff8f5; }
.report-radio-label input[type="radio"] { accent-color: var(--primary); }
.report-field-error { font-size: .8rem; color: #ef4444; margin: 0; }
.btn-report {
  background: #ef4444;
  color: #fff;
  border: none;
  padding: .75rem 2rem;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  align-self: flex-start;
  transition: background .15s;
}
.btn-report:hover { background: #dc2626; }
.report-success-icon { color: #16a34a; margin-bottom: 1rem; }
.profile-why-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.profile-why-list li {
  font-size: .9rem;
  color: var(--secondary);
  padding: .4rem .6rem .4rem 2rem;
  background: #f0fdf4;
  border-left: 3px solid #16a34a;
  border-radius: 4px;
  position: relative;
}
.profile-why-list li::before {
  content: "✓";
  position: absolute;
  left: .6rem;
  color: #16a34a;
  font-weight: 700;
}

@media (max-width: 768px) {
  .profile-hero-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .profile-body-inner { grid-template-columns: 1fr; }
  .profile-sidebar { order: -1; }
  .profile-info-grid { grid-template-columns: 1fr; }
}

/* ── City Hero ───────────────────────────── */
.city-hero {
  background: var(--bg-dark);
  padding: 4rem 0;
}
.city-hero-eyebrow {
  font-size: .7rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--primary); margin-bottom: .5rem;
}
.city-hero h1 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; color: #fff; margin-bottom: .6rem; }
.city-subtitle { font-size: 1.05rem; color: rgba(255,255,255,.7); }
.city-cta-section { padding: 3rem 0; }
.city-links { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; }
.city-links a { padding: .4rem .9rem; background: var(--bg-alt); border-radius: 50px; font-size: .85rem; color: var(--secondary); border: 1px solid var(--border); }
.city-links a:hover { background: var(--primary); color: #fff; text-decoration: none; }

/* ── City Page Sections ──────────────────── */
.city-section { padding: 3rem 0; }
.city-section--alt { background: var(--bg-alt); }
.city-section h2 { font-size: 1.4rem; font-weight: 800; color: var(--secondary); margin-bottom: 1.5rem; letter-spacing: -.2px; }

.city-intro-section { padding: 3rem 0; border-bottom: 1px solid var(--border); }
.city-intro p { color: var(--text-light); line-height: 1.8; margin-bottom: 1rem; font-size: 1rem; max-width: 720px; }
.city-intro p:last-child { margin-bottom: 0; }

.city-training-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem;
}
.city-training-item {
  display: flex; align-items: center; gap: .6rem;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: .75rem 1rem;
  font-size: .9rem; color: var(--text-light);
  text-decoration: none;
}
.city-training-item--link { transition: border-color .15s, box-shadow .15s; cursor: pointer; }
.city-training-item--link:hover { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(234,88,12,.1); color: var(--primary); }
.city-training-item--link:hover .city-training-check { color: var(--primary); }
.city-training-arrow { margin-left: auto; font-size: .8rem; opacity: 0; transition: opacity .15s; }
.city-training-item--link:hover .city-training-arrow { opacity: 1; }
.city-training-check { color: #16a34a; font-weight: 700; font-size: 1rem; flex-shrink: 0; }

.city-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}

.city-tips-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .65rem; }
.city-tips-list li {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .92rem; color: var(--text-light); line-height: 1.5;
}
.city-tips-list li::before { content: '→'; color: var(--primary); font-weight: 700; flex-shrink: 0; }

.city-instructor-note {
  background: var(--secondary);
  border-radius: var(--radius-lg);
  padding: 2rem;
  color: #fff;
}
.city-note-label {
  font-size: .68rem; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--primary); margin-bottom: .75rem;
}
.city-instructor-note blockquote { margin: 0 0 1rem; padding: 0; border: none; }
.city-instructor-note blockquote p { color: rgba(255,255,255,.85); font-size: .93rem; line-height: 1.75; margin-bottom: .5rem; }
.city-instructor-note cite { font-size: .82rem; color: rgba(255,255,255,.45); font-style: normal; }

.city-faz0-box {
  background: #fff;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  max-width: 560px;
  display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
}
.city-faz0-placeholder {
  font-size: .82rem;
  color: var(--text-muted);
  font-style: italic;
  padding: .6rem .9rem;
  background: var(--bg-alt);
  border-radius: var(--radius);
  border-left: 3px solid var(--border);
  margin-bottom: .75rem;
}
.city-faz0-text { color: var(--text-light); font-size: .95rem; margin-bottom: .25rem; }
.city-faz0-cta-label { font-weight: 700; color: var(--secondary); font-size: .95rem; margin-bottom: .5rem; }

/* ── Listing cards (city pages) ──────────────────────────────────────────── */
.listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.listing-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--secondary);
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.listing-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
  border-color: var(--primary);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--secondary);
}
.listing-card-avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  overflow: hidden;
}
.listing-card-avatar--center  { background: linear-gradient(135deg, #F97316, #ea6c00); }
.listing-card-avatar--instructor { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.listing-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.listing-card-body { flex: 1; min-width: 0; }
.listing-card-name { font-size: .95rem; font-weight: 700; margin: 0 0 .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listing-card-meta { font-size: .78rem; color: var(--text-muted); margin: 0 0 .35rem; }
.listing-card-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 4px;
  background: #f3f4f6;
  color: var(--text-muted);
  margin-right: .3rem;
  margin-bottom: .2rem;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.listing-card-badge--green { background: #dcfce7; color: #15803d; }
.listing-card-types { font-size: .75rem; color: var(--text-muted); margin: .2rem 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listing-card-arrow { color: var(--text-muted); font-size: 1rem; flex-shrink: 0; }
.listing-cta-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: .5rem; }
.listing-cta-row p { margin: 0; font-size: .9rem; color: var(--text-muted); }
.btn-outline-primary {
  border: 2px solid var(--primary);
  color: var(--primary);
  background: transparent;
  padding: .45rem 1.1rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: .88rem;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.btn-outline-primary:hover { background: var(--primary); color: #fff; text-decoration: none; }

/* ── Notification banners ────────────────────────────────────────────────── */
.notif-banner {
  width: 100%;
  padding: .65rem 0;
  font-size: .88rem;
  line-height: 1.5;
}
.notif-banner__inner {
  padding: 0;
}
.notif-banner--info    { background: #dbeafe; color: #1e40af; border-bottom: 1px solid #bfdbfe; }
.notif-banner--warning { background: #fef9c3; color: #854d0e; border-bottom: 1px solid #fde047; }
.notif-banner--success { background: #dcfce7; color: #15803d; border-bottom: 1px solid #86efac; }
.notif-banner--neutral { background: #f3f4f6; color: #374151; border-bottom: 1px solid #d1d5db; }
/* bottom banners flip the border side */
footer + .notif-banner--info    { border-top: 1px solid #bfdbfe; border-bottom: none; }
footer + .notif-banner--warning { border-top: 1px solid #fde047; border-bottom: none; }
footer + .notif-banner--success { border-top: 1px solid #86efac; border-bottom: none; }
footer + .notif-banner--neutral { border-top: 1px solid #d1d5db; border-bottom: none; }

.city-seo-section { padding: 3rem 0; background: var(--bg-alt); border-top: 1px solid var(--border); }
.city-seo-section h2 { font-size: 1.2rem; font-weight: 800; color: var(--secondary); margin-bottom: 1.25rem; }
.city-seo-body p { font-size: .92rem; color: var(--text-muted); line-height: 1.8; margin-bottom: .9rem; max-width: 800px; }
.city-seo-body p:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
  .city-two-col { grid-template-columns: 1fr; gap: 2rem; }
  .city-training-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Forms ───────────────────────────────── */
.form-page { padding: 4rem 0; background: var(--bg-alt); min-height: 70vh; }
.form-box { background: #fff; border-radius: var(--radius-lg); padding: 2.5rem; max-width: 680px; margin: 0 auto; box-shadow: var(--shadow); }
.form-box h1 { font-size: 1.7rem; font-weight: 800; margin-bottom: .6rem; color: var(--secondary); }
.form-box > p { color: var(--text-light); margin-bottom: 2rem; }

/* ── Split Form (50/50) ──────────────────── */
.split-form-page {
  display: flex;
  min-height: calc(100vh - 60px);
}
/* no image: centre the form like the old layout */
.split-form-page:not(.has-image) .split-form-content {
  background: var(--bg-alt);
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 1.5rem;
}
/* image-left: image | form */
.split-form-page.has-image.image-left  { flex-direction: row; }
/* image-right: form | image */
.split-form-page.has-image.image-right { flex-direction: row-reverse; }

.split-form-image {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.split-form-image img {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: cover;
  display: block;
}
.split-form-content {
  flex: 1;
  background: var(--bg-alt);
  overflow-y: auto;
  padding: 3.5rem 1.5rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.split-form-inner {
  width: 100%;
  max-width: 540px;
}
.split-form-inner h1 { font-size: 1.55rem; font-weight: 800; margin-bottom: .5rem; color: var(--secondary); }
.split-form-inner > p { color: var(--text-light); margin-bottom: 2rem; }

/* Pitch block */
.form-pitch { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.form-pitch h1 { font-size: 1.4rem; font-weight: 800; color: var(--secondary); margin-bottom: .85rem; }
.pitch-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.pitch-list li { font-size: .9rem; color: var(--text-light); }
.pitch-list li::first-letter { color: #16a34a; font-weight: 700; }

/* Checkbox group */
.form-group--checkboxes label:first-child { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .5rem; }
.form-group--checkboxes ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .75rem; }
.form-group--checkboxes ul li { display: flex; align-items: center; gap: .45rem; font-size: .875rem; color: var(--text-light); }
.form-group--checkboxes ul li input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--primary); flex-shrink: 0; cursor: pointer; }

/* Radio group */
.form-group--radio label:first-child { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .5rem; }
.form-group--radio ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem .75rem; }
.form-group--radio ul li { display: flex; align-items: center; gap: .45rem; font-size: .875rem; color: var(--text-light); }
.form-group--radio ul li input[type="radio"] { width: 15px; height: 15px; accent-color: var(--primary); flex-shrink: 0; cursor: pointer; }

/* Form section divider */
.form-section-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.75rem 0 1.25rem;
}
.form-section-divider::before,
.form-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.form-section-divider span {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Trust note */
.form-trust {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  font-size: .78rem;
  color: var(--text-muted);
  margin: 1.25rem 0 1rem;
  line-height: 1.5;
}
.form-trust svg { flex-shrink: 0; margin-top: 1px; color: #6b7280; }

/* Bigger full-width submit */
.btn-lg { padding: .85rem 2rem; font-size: 1rem; }
.btn-full { width: 100%; text-align: center; }

/* Success split */
.success-split { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 60vh; }
.success-icon { width: 64px; height: 64px; border-radius: 50%; background: #dcfce7; color: #16a34a; font-size: 2rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
.success-split h1 { font-size: 1.9rem; font-weight: 800; color: var(--secondary); margin-bottom: .75rem; }
.success-split p { color: var(--text-light); margin-bottom: .5rem; max-width: 400px; }
.success-sub { font-size: .875rem; color: var(--text-muted); margin-bottom: 2rem !important; }

/* Image overlay */
.split-form-image { position: relative; }
.split-form-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  padding: 2.5rem 2rem;
  background: linear-gradient(to bottom, rgba(0,0,0,.65) 0%, rgba(0,0,0,.45) 50%, transparent 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.split-overlay-eyebrow {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .6rem;
}
.split-form-overlay h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 1rem;
}
.split-overlay-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.split-overlay-list li { font-size: .85rem; color: rgba(255,255,255,.8); padding-left: 1rem; position: relative; }
.split-overlay-list li::before { content: '—'; position: absolute; left: 0; color: var(--primary); }
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .35rem; }
.form-control {
  display: block; width: 100%;
  padding: .6rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .95rem;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(249,115,22,.15); }
.errorlist { color: #dc2626; font-size: .85rem; margin-top: .3rem; padding-left: 1rem; }
.success-box { text-align: center; }
.success-box h1 { color: #16a34a; }
.success-box p { color: var(--text-light); margin: 1rem 0 2rem; }

/* ── Consent checkboxes ──────────────────── */
.consent-block {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
}
.consent-block h4 {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  margin: 0 0 .9rem;
}
.consent-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: .6rem;
  align-items: start;
  margin-bottom: .75rem;
}
.consent-item:last-child { margin-bottom: 0; }
.consent-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: .18rem;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}
.consent-item label {
  font-size: .875rem;
  line-height: 1.55;
  color: var(--secondary);
  cursor: pointer;
}
.consent-item label a { color: var(--primary); text-decoration: underline; }
.consent-item label a:hover { color: var(--primary-dark, #ea6c00); }
.consent-item .errorlist {
  grid-column: 2;
  margin: .15rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .8rem;
  color: #dc2626;
}

/* ── Page Header ─────────────────────────── */
.page-header { background: var(--bg-dark); color: #fff; padding: 3.5rem 0; }
.page-header h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin-bottom: .5rem; }
.page-header p { color: rgba(255,255,255,.7); }

/* ── Article Detail ──────────────────────── */
.article-detail { padding: 4rem 0; }
.article-header { margin-bottom: 2rem; }
.article-header h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--secondary); margin-bottom: .5rem; }
.article-header time { font-size: .85rem; color: var(--text-muted); }
.article-body { line-height: 1.85; max-width: 720px; }
.article-body p { margin-bottom: 1.25rem; color: var(--text-light); }
.article-body h2, .article-body h3 { margin: 2rem 0 .75rem; color: var(--secondary); }
.article-cta { margin-top: 3rem; padding: 2rem; background: var(--bg-alt); border-radius: var(--radius-lg); border: 1px solid var(--border); }
.article-cta h3 { margin-bottom: 1rem; color: var(--secondary); font-size: 1.1rem; }
.article-list .article-grid .article-card h2 { font-size: 1.05rem; }

/* ── Footer ──────────────────────────────── */
.footer { background: #0b0f1a; color: #9CA3AF; padding: 3.5rem 0 1.5rem; margin-top: 4rem; }
main:has(.db-layout) ~ .footer { margin-top: 0; }
main:has(.split-form-page.has-image) ~ .footer { margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.footer h4 { color: #fff; margin-bottom: .85rem; font-size: .95rem; letter-spacing: -.2px; }
.footer ul li { margin-bottom: .45rem; }
.footer ul li a { color: #6B7280; font-size: .875rem; transition: color .15s; }
.footer ul li a:hover { color: var(--primary); text-decoration: none; }
.footer p { font-size: .875rem; line-height: 1.7; }
.footer-bottom { border-top: 1px solid #1f2937; padding-top: 1.25rem; text-align: center; font-size: .8rem; color: #4B5563; }
.footer-bottom a { color: #6b7280; text-decoration: none; }
.footer-bottom a:hover { color: var(--primary); }

/* ── Legal pages ─────────────────────────── */
.legal-page-section { padding: 3rem 0 5rem; }
.legal-page-container { max-width: 780px; }
.legal-page-header { margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.legal-page-title { font-size: 1.8rem; font-weight: 800; color: var(--secondary); margin: 0 0 .4rem; }
.legal-page-updated { font-size: .82rem; color: var(--text-muted); margin: 0; }
.legal-page-body { font-size: .95rem; line-height: 1.85; color: var(--text); }
.legal-page-body h2 { font-size: 1.15rem; font-weight: 700; color: var(--secondary); margin: 2rem 0 .6rem; }
.legal-page-body h3 { font-size: 1rem; font-weight: 700; color: var(--secondary); margin: 1.5rem 0 .5rem; }
.legal-page-body p { margin: 0 0 1rem; }
.legal-page-body ul, .legal-page-body ol { padding-left: 1.5rem; margin: 0 0 1rem; }
.legal-page-body li { margin-bottom: .4rem; }
.legal-page-body a { color: var(--primary); }
.legal-page-body strong { color: var(--secondary); }

/* ── Utility ─────────────────────────────── */
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }

/* ── Stats Bar ───────────────────────────── */
.stats-bar { background: #0d1117; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem;
  border-right: 1px solid rgba(255,255,255,.06);
}
.stat-item:last-child { border-right: none; }
.stat-item strong { font-size: 1.6rem; font-weight: 800; color: var(--primary); line-height: 1; margin-bottom: .3rem; }
.stat-item span   { font-size: .78rem; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .5px; text-align: center; }
/* label-only stat (no number): make it a bit bigger */
.stat-item:not(:has(strong)) span { font-size: .85rem; color: rgba(255,255,255,.6); }

/* ── City Card Features ──────────────────── */
.city-card-features {
  list-style: none;
  padding: 0;
  margin: .6rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.city-card-features li {
  font-size: .8rem;
  color: var(--text-muted);
  padding-left: 1rem;
  position: relative;
}
.city-card-features li::before {
  content: '·';
  position: absolute;
  left: .3rem;
  color: var(--primary);
  font-weight: 700;
}

/* ── Inline Lead Form ────────────────────── */
.lead-section--inline { padding: 2.5rem 0; background: var(--secondary); }
.lead-inline-box {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  max-width: 920px;
  margin: 0 auto;
}
.lead-inline-text { flex: 1; min-width: 0; }
.lead-inline-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--primary); margin-bottom: .35rem; white-space: nowrap; }
.lead-inline-text h2 { font-size: 1.6rem; font-weight: 800; color: #fff; margin-bottom: .25rem; }
.lead-inline-text p  { font-size: .875rem; color: rgba(255,255,255,.55); }
.lead-inline-form {
  display: flex;
  gap: .6rem;
  align-items: stretch;
  flex-shrink: 0;
  width: 420px;
  max-width: 100%;
}
.lead-inline-form .form-control {
  flex: 1;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius);
  color: #fff;
  padding: .65rem 1rem;
  font-size: .9rem;
  outline: none;
  transition: border-color .15s, background .15s;
}
.lead-inline-form .form-control::placeholder { color: rgba(255,255,255,.35); }
.lead-inline-form .form-control:focus { border-color: var(--primary); background: rgba(255,255,255,.12); }
.lead-inline-form .btn {
  white-space: nowrap;
  padding: .65rem 1.25rem;
  font-size: .9rem;
}

/* ── Training Types Section ──────────────── */
.training-section { padding: 5rem 0; background: var(--bg-alt); }
.training-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
}
.training-full-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  transition: box-shadow .2s, transform .2s;
}
.training-full-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.training-full-icon { font-size: 1.75rem; margin-bottom: .85rem; }
.training-full-card h3 { font-size: 1rem; font-weight: 700; color: var(--secondary); margin-bottom: .5rem; }
.training-full-card p  { font-size: .85rem; color: var(--text-light); line-height: 1.6; }

/* ── FAQ ─────────────────────────────────── */
.faq-section { padding: 5rem 0; }
.faq-list { max-width: 100%; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: .75rem;
  overflow: hidden;
  transition: box-shadow .15s;
}
.faq-item[open] { box-shadow: var(--shadow); }
.faq-question {
  padding: 1.1rem 1.4rem;
  font-weight: 600;
  font-size: .975rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  user-select: none;
  background: #fff;
  color: var(--text);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: '+';
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--primary);
  flex-shrink: 0;
  transition: transform .2s;
}
.faq-item[open] .faq-question::after { transform: rotate(45deg); }
.faq-answer {
  padding: 0 1.4rem 1.2rem;
  font-size: .9rem;
  color: var(--text-light);
  line-height: 1.75;
  background: #fff;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

/* ── Responsive ──────────────────────────── */
@media (max-width: 900px) {
  .lead-inline-box { flex-direction: column; align-items: stretch; gap: 1.25rem; }
  .lead-inline-form { width: 100%; }
  .lead-inline-text h2 { font-size: 1.3rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2) { border-right: none; }
}
@media (max-width: 768px) {
  .seo-content-section .container { grid-template-columns: 1fr; gap: 2rem; }
  .about-inner { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 640px) {
  .navbar-links { display: none; }
  .hamburger { display: flex; }
  .hero { padding: 3.5rem 0 3rem; }
  .form-box { padding: 1.5rem; }
  .split-form-page.has-image { flex-direction: column !important; }
  .split-form-image { flex: 0 0 auto; position: relative; height: 240px; width: 100%; }
  .split-form-image img { flex: none; height: 100%; }
  .split-form-content { overflow-y: visible; }
  .split-form-content { padding: 2.5rem 1.25rem; }
  .split-form-inner { padding-top: 0; }
  .form-inline { flex-direction: column; }
  .form-inline .form-control { min-width: auto; width: 100%; }
  .about-stats { gap: 1.25rem; }
  .city-grid { grid-template-columns: 1fr 1fr; }
  .lead-inline-form { flex-direction: column; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .training-cards-grid { grid-template-columns: 1fr 1fr; }
}

/* ── About Page ─────────────────────────────────────────────────────────── */

/* Hero + Intro: tek two-column bölüm */
.about-top { background: #111827; padding: 4.5rem 0 5rem; }
.about-top-layout { display: flex; gap: 4rem; align-items: flex-start; }
.about-top-left { flex: 1 1 0; min-width: 0; color: #fff; }
.about-top-right { flex: 0 0 42%; max-width: 460px; position: sticky; top: 2rem; }

.about-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); margin: 0 0 1rem; display: block; }
.about-h1 { font-size: clamp(2rem, 3.5vw, 2.75rem); margin: 0 0 1rem; line-height: 1.2; color: #fff; }
.about-subtitle { color: rgba(255,255,255,.6); font-size: 1rem; margin: 0 0 2.5rem; line-height: 1.7; }

.about-intro { margin-top: .5rem; }
.about-section-title { font-size: 1.2rem; font-weight: 700; color: #fff; margin: 0 0 1.1rem;
  padding-left: 1rem; border-left: 3px solid var(--primary); }
.about-intro-body { font-size: .97rem; line-height: 1.8; color: rgba(255,255,255,.75); }
.about-intro-body p { margin: 0 0 .9rem; }
.about-intro-body p:last-child { margin: 0; }
.about-quote { border-left: 3px solid var(--primary); margin: 1.5rem 0 0; padding: .85rem 1.25rem;
  font-style: italic; color: rgba(255,255,255,.55); font-size: .95rem; line-height: 1.75;
  background: rgba(249,115,22,.08); border-radius: 0 8px 8px 0; }

.about-photo { width: 100%; border-radius: 16px; display: block; box-shadow: 0 20px 60px rgba(0,0,0,.5); aspect-ratio: 4/3; object-fit: cover; }
.about-photo-caption { font-size: .75rem; color: rgba(255,255,255,.35); text-align: center; margin: .75rem 0 0; font-style: italic; }

/* 2×2 Kutular — ikon sol, metin sağ */
.about-cards-section { padding: 4rem 0 5rem; background: #f8fafc; }
.about-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.about-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; padding: 1.75rem;
  display: flex; gap: 1.1rem; align-items: flex-start; }
.about-card-icon { width: 46px; height: 46px; min-width: 46px; background: #fff7ed; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; }
.about-card-icon svg { width: 22px; height: 22px; stroke: var(--primary); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.about-card-text { flex: 1; min-width: 0; }
.about-card-title { font-size: 1rem; font-weight: 700; color: #111827; margin: 0 0 .65rem; }
.about-card-body { font-size: .88rem; line-height: 1.75; color: #6B7280; }
.about-card-body p { margin: 0 0 .55rem; }
.about-card-body p:last-child { margin: 0; }
.about-card-body strong { color: #111827; }

/* CTA kutusu */
.about-cta-section { padding: 0 0 5rem; background: #f8fafc; }
.about-cta-box { background: #fff; border: 1.5px solid #fed7aa; border-radius: 16px;
  padding: 1.75rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.about-cta-left { display: flex; align-items: flex-start; gap: 1rem; flex: 1; min-width: 0; }
.about-cta-icon { width: 44px; height: 44px; min-width: 44px; background: #fff7ed; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; }
.about-cta-icon svg { width: 20px; height: 20px; stroke: var(--primary); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.about-cta-title { font-size: 1.05rem; font-weight: 700; color: #111827; margin: 0 0 .25rem; }
.about-cta-sub { font-size: .88rem; color: #6B7280; margin: 0; }
.about-cta-actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; flex-shrink: 0; }
.btn-outline-primary { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); color: #fff; text-decoration: none; }

@media (max-width: 860px) {
  .about-top-layout { flex-direction: column; gap: 2.5rem; }
  .about-top-right { flex: none; width: 100%; max-width: 100%; position: static; }
  .about-photo { aspect-ratio: 16/9; }
  .about-cards-grid { grid-template-columns: 1fr; }
  .about-cta-box { flex-direction: column; align-items: flex-start; }
}