/* ============================================================
   POLISETTY SARVESWARA RAO — Financial Protection & Investment
   BASE: tokens, reset, typography, layout, buttons
   ============================================================ */

:root {
  --navy-950: #081a36;
  --navy-900: #0a1f3d;
  --navy-800: #0e2a52;
  --navy-700: #14355f;
  --blue-700: #1a45b4;
  --blue-600: #1d4ed8;
  --blue-500: #2563eb;
  --blue-400: #4f83f0;
  --sky-100: #e3edfb;
  --sky-050: #f2f7fd;
  --gray-050: #f7f8fa;
  --gray-100: #eef1f5;
  --gray-200: #dfe4ec;
  --gray-300: #c3cad6;
  --gray-500: #7a8496;
  --gray-600: #5b6577;
  --gray-700: #3d4759;
  --gray-800: #2a3344;
  --gold-600: #a97b1f;
  --gold-500: #c9962e;
  --gold-400: #dcb34a;
  --gold-100: #f6ecd3;
  --green-600: #128c4b;
  --green-500: #22a75d;
  --green-100: #e2f6ea;
  --white: #ffffff;

  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Sora", "Inter", ui-sans-serif, system-ui, sans-serif;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(10,31,61,.06), 0 4px 12px rgba(10,31,61,.06);
  --shadow-md: 0 6px 18px rgba(10,31,61,.09), 0 2px 6px rgba(10,31,61,.06);
  --shadow-lg: 0 18px 40px rgba(10,31,61,.13), 0 4px 12px rgba(10,31,61,.06);
  --shadow-blue: 0 10px 24px rgba(29,78,216,.28);
  --container: 1180px;
  --gutter: 24px;
  --header-h: 76px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--gray-700);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--blue-600); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--blue-700); }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  color: var(--navy-900);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 4.6vw, 3.25rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.3rem); }
h3 { font-size: 1.18rem; }
h4 { font-size: 1.02rem; }

.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 1000;
  background: var(--navy-900); color: #fff;
  padding: 10px 16px; border-radius: 8px;
}
.skip-link:focus { left: 8px; }

.container {
  width: 100%; max-width: var(--container);
  margin: 0 auto; padding: 0 var(--gutter);
}

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: var(--blue-600); margin-bottom: 14px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--gold-500);
}
.eyebrow-center { justify-content: center; }
.eyebrow-center::before { display: none; }
.eyebrow-center::after {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--gold-500);
}

.section-title { max-width: 760px; }
.text-accent { color: var(--blue-600); }
.text-gold { color: var(--gold-600); }
.text-large { font-size: 1.13rem; line-height: 1.7; }

.section-sub { margin-top: 14px; max-width: 680px; color: var(--gray-600); font-size: 1.03rem; }
.section-head { margin-bottom: 44px; }
.section-head.center { text-align: center; }
.section-head.center .section-title,
.section-head.center .section-sub { margin-left: auto; margin-right: auto; }

/* ---------- Sections ---------- */
.section { padding: 88px 0; }
.section-tight { padding: 64px 0; }
.section-alt { background: var(--sky-050); }
.section-soft { background: var(--sky-100); }
.section-navy { background: var(--navy-900); color: #c8d6ec; }
.section-navy h2, .section-navy h3 { color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-head); font-size: .92rem; font-weight: 600;
  letter-spacing: .02em; padding: 14px 24px; border-radius: var(--radius-pill);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease,
              color .18s ease, border-color .18s ease;
  white-space: nowrap; line-height: 1.2;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn-primary { background: var(--blue-600); color: #fff; box-shadow: var(--shadow-blue); }
.btn-primary:hover { background: var(--blue-700); color: #fff; transform: translateY(-2px); }

.btn-navy { background: var(--navy-900); color: #fff; }
.btn-navy:hover { background: var(--navy-800); color: #fff; transform: translateY(-2px); }

.btn-gold { background: var(--gold-500); color: #fff; }
.btn-gold:hover { background: var(--gold-600); color: #fff; transform: translateY(-2px); }

.btn-outline {
  border: 1.5px solid var(--gray-200); color: var(--navy-900); background: #fff;
}
.btn-outline:hover {
  border-color: var(--blue-500); color: var(--blue-600);
  background: var(--sky-050); transform: translateY(-2px);
}

.btn-outline-light {
  border: 1.5px solid rgba(255,255,255,.4); color: #fff; background: transparent;
}
.btn-outline-light:hover {
  border-color: #fff; color: #fff;
  background: rgba(255,255,255,.08); transform: translateY(-2px);
}

.btn-whatsapp { background: var(--green-500); color: #fff; box-shadow: 0 10px 24px rgba(34,167,93,.3); }
.btn-whatsapp:hover { background: var(--green-600); color: #fff; transform: translateY(-2px); }

.btn-sm { padding: 10px 18px; font-size: .84rem; }
.btn-lg { padding: 17px 32px; font-size: 1rem; }
.btn-block { width: 100%; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }