@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600;700;800&display=swap");

* { font-family: "Inter", system-ui, sans-serif; }
h1, h2, .font-display { font-family: "DM Serif Display", Georgia, serif; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { padding-bottom: env(safe-area-inset-bottom, 0); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }

@media (max-width: 767px) {
  main { padding-bottom: 3.5rem; }
}

/* Hero Section */
.hero { position: relative; min-height: 70vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: opacity 1.5s ease; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(6,16,28,0.4) 0%, rgba(6,16,28,0.7) 100%); }
.hero-content { position: relative; z-index: 10; text-align: center; color: white; padding: 2rem; }
@media (max-width: 767px) { .hero { min-height: 60vh; } }

/* Cards */
.card { background: white; border-radius: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04); transition: transform 0.25s, box-shadow 0.25s; overflow: hidden; }
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
.card-flat { background: white; border-radius: 1rem; border: 1px solid #f0f0f0; overflow: hidden; transition: border-color 0.2s; }
.card-flat:hover { border-color: #ddd; }

/* Slider */
.slider { position: relative; overflow: hidden; border-radius: 1rem; }
.slider-track { display: flex; transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); }
.slider-track > * { flex: 0 0 100%; min-width: 100%; }
.slider img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 16/7; }
@media (max-width: 767px) { .slider img { aspect-ratio: 16/9; } }
.slider-dots { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; }
.slider-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; transition: all 0.3s; }
.slider-dot.active { background: white; transform: scale(1.3); }
.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.2); color: white; border: none; padding: 0.75rem; cursor: pointer; border-radius: 50%; backdrop-filter: blur(8px); transition: background 0.3s; }
.slider-btn:hover { background: rgba(0,0,0,0.4); }
.slider-prev { left: 0.75rem; }
.slider-next { right: 0.75rem; }

/* Quick action buttons */
.quick-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 1.5rem 1rem; background: white; border-radius: 1rem; border: 1px solid #f0f0f0; text-align: center; transition: all 0.25s; cursor: pointer; text-decoration: none; color: inherit; }
.quick-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); border-color: #e0e0e0; }
.quick-btn svg { width: 2rem; height: 2rem; }
.quick-btn span { font-size: 0.75rem; font-weight: 600; line-height: 1.2; }

/* Bottom nav active */
.bottom-nav-item.active { color: #142e4a; }
.bottom-nav-item.active svg { stroke-width: 2.5; }

/* Loading spinner */
.spinner { width: 2rem; height: 2rem; border: 3px solid #e5e7eb; border-top-color: #142e4a; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Fade in */
.fade-in { animation: fadeIn 0.35s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Section headings */
.section-title { font-family: "DM Serif Display", Georgia, serif; color: #142e4a; }

/* Form inputs */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"],
select, textarea {
  width: 100%; padding: 0.75rem 1rem; border: 1px solid #e5e7eb; border-radius: 0.75rem;
  font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s; background: white;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: #142e4a; box-shadow: 0 0 0 3px rgba(20,46,74,0.08); }

/* Sponsor strip */
.sponsor-strip { display: flex; gap: 2.5rem; overflow-x: auto; padding: 1rem 0; scrollbar-width: none; align-items: center; }
.sponsor-strip::-webkit-scrollbar { display: none; }
.sponsor-strip img { height: 2.5rem; width: auto; object-fit: contain; opacity: 0.5; transition: opacity 0.3s; flex-shrink: 0; filter: grayscale(100%); }
.sponsor-strip img:hover { opacity: 1; filter: none; }

/* Tabs */
.tab-btn { padding: 0.5rem 1.25rem; font-weight: 500; border-bottom: 2px solid transparent; transition: all 0.2s; cursor: pointer; white-space: nowrap; color: #9ca3af; }
.tab-btn.active { border-bottom-color: #142e4a; color: #142e4a; }
.tab-btn:hover { color: #142e4a; }

/* Dropdown navigation */
.group:hover .group-hover\:block { display: block; }
nav .group > div { transition: opacity 0.2s; }

/* Gold accent divider */
.divider-gold { width: 60px; height: 3px; background: linear-gradient(to right, #c9a84c, #ddb63a); border-radius: 2px; }

/* Premium link style */
.link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; transition: gap 0.2s; }
.link-arrow:hover { gap: 0.75rem; }