/* ── RingAgent — Classic Light Theme ──────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&family=Inter:wght@400;500;600;700&display=swap');

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

:root {
  --paper:    #FAF8F4;
  --cream:    #F2EEE6;
  --white:    #FFFFFF;
  --border:   #D8D0C0;
  --border-dk:#B8AC98;
  --navy:     #1B3D6F;
  --navy-dk:  #122A50;
  --navy-lt:  #2E5499;
  --red:      #C0392B;
  --green:    #2E7D32;
  --text:     #1A1410;
  --muted:    #6B5E50;
  --light:    #9B8E80;
  --shadow:   rgba(0,0,0,0.08);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--paper);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ── Override Tailwind dark classes site-wide ──────────────────────────────── */
.bg-gray-950, .bg-gray-900 { background-color: var(--paper) !important; }
.bg-gray-950\/90, .bg-gray-900\/40, .bg-gray-900\/50 { background-color: rgba(250,248,244,0.95) !important; }
.text-white { color: var(--text) !important; }
.text-gray-400, .text-gray-500 { color: var(--muted) !important; }
.text-gray-300 { color: var(--muted) !important; }
.text-gray-600 { color: var(--light) !important; }
.border-gray-800, .border-gray-800\/50, .border-gray-800\/60 { border-color: var(--border) !important; }
.border-gray-700 { border-color: var(--border-dk) !important; }

/* ── Typography ────────────────────────────────────────────────────────────── */
h1, h2, h3, .serif { font-family: 'Merriweather', Georgia, serif; }

.section-title {
  font-family: 'Merriweather', Georgia, serif;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.section-subtitle { font-size: 1.05rem; color: var(--muted); line-height: 1.75; }
.section { padding: 80px 24px; }
.section-sm { padding: 56px 24px; }

/* ── Nav ───────────────────────────────────────────────────────────────────── */
#main-nav {
  background: var(--white) !important;
  border-bottom: 2px solid var(--border) !important;
  backdrop-filter: none !important;
}
.nav-link { color: var(--muted) !important; font-weight: 500; }
.nav-link:hover, .nav-link.active { color: var(--navy) !important; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.glass-card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 2px 8px var(--shadow);
}

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 2px 8px var(--shadow);
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--navy);
  color: var(--white) !important;
  font-weight: 700;
  border-radius: 5px;
  padding: 13px 26px;
  font-size: 15px;
  border: 2px solid var(--navy);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
}
.btn-primary:hover {
  background: var(--navy-dk);
  border-color: var(--navy-dk);
  box-shadow: 0 3px 10px rgba(27,61,111,0.25);
  transform: none;
}

.btn-secondary {
  background: transparent;
  color: var(--navy) !important;
  font-weight: 600;
  border-radius: 5px;
  padding: 13px 26px;
  font-size: 15px;
  border: 2px solid var(--navy);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
}
.btn-secondary:hover { background: var(--cream); }

/* ── Inputs ────────────────────────────────────────────────────────────────── */
.input-field {
  width: 100%;
  background: var(--white);
  border: 1.5px solid var(--border-dk);
  border-radius: 5px;
  padding: 11px 14px;
  color: var(--text);
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input-field::placeholder { color: var(--light); }
.input-field:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(27,61,111,0.12);
}

/* ── Feature icon (old style) ──────────────────────────────────────────────── */
.feature-icon {
  background: var(--cream);
  border: 2px solid var(--border);
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  flex-shrink: 0;
}
.feature-icon svg { color: var(--navy); }

/* ── Pill badge → classic tag style ───────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cream);
  border: 1px solid var(--border-dk);
  color: var(--navy);
  border-radius: 3px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Divider ────────────────────────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* ── Mesh/hero backgrounds → plain paper ──────────────────────────────────── */
.mesh-bg, .mesh-bg-subtle { background: var(--paper) !important; }
.grid-lines { background-image: none !important; }

/* ── Steps (how it works) ──────────────────────────────────────────────────── */
.step-number {
  width: 40px; height: 40px;
  border: 2px solid var(--navy);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Merriweather', Georgia, serif;
  font-size: 16px;
  font-weight: 900;
  color: var(--navy);
  flex-shrink: 0;
}

/* ── Pricing card ──────────────────────────────────────────────────────────── */
.pricing-popular {
  background: var(--navy) !important;
  border: 2px solid var(--navy) !important;
  color: var(--white) !important;
}
.pricing-popular .text-gray-400,
.pricing-popular .text-gray-500,
.pricing-popular .section-subtitle { color: rgba(255,255,255,0.7) !important; }
.pricing-popular .text-white { color: var(--white) !important; }

/* ── Testimonial card ──────────────────────────────────────────────────────── */
.testimonial-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: border-color 0.15s;
  box-shadow: 0 2px 6px var(--shadow);
}
.testimonial-card:hover { border-color: var(--navy); }

/* ── Phone mockup → classic card ──────────────────────────────────────────── */
.phone-mockup {
  background: var(--white) !important;
  border: 2px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: 4px 4px 0 var(--border), 8px 8px 0 var(--border-dk) !important;
}

/* ── Gradient text → plain navy ───────────────────────────────────────────── */
.gradient-text, .gradient-text-blue {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: var(--navy) !important;
  background-clip: unset !important;
  color: var(--navy) !important;
}

/* ── Glow effects → off ───────────────────────────────────────────────────── */
.glow-blue, .glow-blue-sm, .btn-glow:hover { box-shadow: none !important; }
.gradient-border::before { display: none; }

/* ── Sidebar (dashboard) ───────────────────────────────────────────────────── */
.sidebar-link { color: var(--muted) !important; }
.sidebar-link:hover, .sidebar-link.active {
  background: var(--cream) !important;
  color: var(--navy) !important;
  border-left-color: var(--navy) !important;
}

/* ── Status colors ─────────────────────────────────────────────────────────── */
.text-green-400 { color: var(--green) !important; }
.text-blue-400 { color: var(--navy-lt) !important; }
.text-red-400 { color: var(--red) !important; }
.text-yellow-400 { color: #8B6914 !important; }
.text-purple-400 { color: #5B3F8A !important; }
.bg-green-500\/10, .bg-green-500\/15 { background: #E8F5E9 !important; }
.border-green-500\/20 { border-color: #A5D6A7 !important; }
.bg-blue-600\/10, .bg-blue-500\/15 { background: #E3EAF6 !important; }
.border-blue-500\/20, .border-blue-500\/25 { border-color: #90A4C4 !important; }
.bg-red-500\/5 { background: #FBE9E7 !important; }
.border-red-500\/15 { border-color: #EF9A9A !important; }

/* ── Scrollbar ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--border-dk); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--navy); }

/* ── Tab pills (dashboard) ─────────────────────────────────────────────────── */
.tab-pill { padding: 7px 14px; border-radius: 4px; font-size: 13px; font-weight: 600; border: 1.5px solid transparent; cursor: pointer; }
.tab-pill.active { background: var(--navy); color: white !important; border-color: var(--navy); }
.tab-pill.inactive { color: var(--muted) !important; }
.tab-pill.inactive:hover { background: var(--cream); color: var(--navy) !important; }

/* ── Footer ────────────────────────────────────────────────────────────────── */
footer { background: var(--cream) !important; border-top: 2px solid var(--border) !important; }

/* ── Animation — subtler ───────────────────────────────────────────────────── */
.fade-up { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-up.animate-in { opacity: 1; transform: translateY(0); }
.animate-float { animation: none !important; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.5} }
.status-dot { animation: blink 2.5s ease-in-out infinite; }

/* ── Misc overrides ────────────────────────────────────────────────────────── */
.bg-blue-600 { background-color: var(--navy) !important; }
.bg-blue-600:hover, .hover\:bg-blue-500:hover { background-color: var(--navy-dk) !important; }
.text-blue-300 { color: var(--navy-lt) !important; }
.border-blue-500\/40 { border-color: #90A4C4 !important; }
.bg-gray-800, .bg-gray-900\/80, .bg-gray-900\/60, .bg-gray-900\/50 { background-color: var(--cream) !important; }
.border-gray-700 { border-color: var(--border) !important; }
.bg-gradient-to-r { background: var(--cream) !important; }
.bg-gradient-to-br { background: var(--navy) !important; }
pre { background: var(--cream) !important; color: var(--text) !important; border: 1px solid var(--border); }