:root {
  --background: 38 45% 97%;
  --foreground: 24 28% 16%;
  --primary: 17 92% 56%;
  --secondary: 146 54% 34%;
  --muted: 30 25% 92%;
  --destructive: 0 72% 54%;
  --border: 24 24% 82%;
  --card: 0 0% 100%;
  --shadow-sm: 0 8px 20px rgba(22, 17, 10, 0.08);
  --shadow-md: 0 16px 40px rgba(22, 17, 10, 0.14);
  --shadow-lg: 0 28px 70px rgba(22, 17, 10, 0.18);
  --transition-fast: 180ms ease;
  --transition-smooth: 360ms cubic-bezier(0.22, 1, 0.36, 1);
  --radius-sm: 0.8rem;
  --radius-md: 1.2rem;
  --radius-lg: 1.8rem;
}

.dark {
  --background: 24 20% 8%;
  --foreground: 36 30% 94%;
  --primary: 18 95% 60%;
  --secondary: 150 50% 46%;
  --muted: 24 14% 16%;
  --destructive: 0 78% 60%;
  --border: 24 12% 24%;
  --card: 24 18% 12%;
  --shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 18px 42px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.5);
}

* {
  box-sizing: border-box;
}

html, body, #root {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

.heading-font {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -0.03em;
}

.section-kicker {
  font-size: 0.84rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: hsl(var(--primary));
  font-weight: 800;
  margin-bottom: 0.7rem;
}

.section-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  font-weight: 900;
}

.section-copy {
  margin-top: 0.8rem;
  color: hsl(var(--foreground) / 0.74);
  font-size: 1rem;
  line-height: 1.75;
}

.glass-card {
  background: linear-gradient(180deg, hsl(var(--card) / 0.82), hsl(var(--card) / 0.55));
  border: 1px solid hsl(var(--border) / 0.7);
  backdrop-filter: blur(14px);
}

.feature-box {
  border-radius: var(--radius-lg);
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.7);
  box-shadow: var(--shadow-sm);
  padding: 1rem;
}

.card-hover {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-fast);
}

.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: hsl(var(--primary) / 0.35);
}

.reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.shimmer {
  background: linear-gradient(90deg, hsl(var(--muted)), hsl(var(--card)), hsl(var(--muted)));
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

.animate-float {
  animation: float 3.2s ease-in-out infinite;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

a, button {
  transition: all var(--transition-fast);
}

button {
  cursor: pointer;
}

::selection {
  background: hsl(var(--primary) / 0.22);
}

@media (max-width: 640px) {
  .section-copy {
    font-size: 0.96rem;
  }
}