/* ============================================
   BASE.CSS — TrueValueTax
   Federal Navy Theme — US Finance Style
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@600;700;800&display=swap');

:root {
  /* === MAIN COLORS === */
  --red:       #CC0000;
  --dred:      #990000;
  --yellow:    #FFD700;

  /* === FEDERAL NAVY BACKGROUNDS === */
  --navy:      #0C1426;
  --navy2:     #0F1A30;
  --navy3:     #112038;

  /* === TEXT === */
  --white:     #F4F8FF;
  --gray:      #7A90AA;
  --lgray:     #B8CCDD;

  /* === CARDS & BORDERS === */
  --card:      #112038;
  --border:    #1E3A5F;
  --border2:   #254870;

  /* === GLOWS === */
  --glow-red:    rgba(204, 0, 0, 0.4);
  --glow-yellow: rgba(255, 215, 0, 0.3);
  --glow-blue:   rgba(30, 58, 95, 0.6);

  /* === FONTS === */
  --font-head:  'Bebas Neue', sans-serif;
  --font-body:  'Barlow', sans-serif;
  --font-cond:  'Barlow Condensed', sans-serif;

  /* === SPACING === */
  --section-pad: 90px 48px;
  --max-width:   1200px;

  /* === RADIUS === */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  /* === TRANSITIONS === */
  --t-fast:   0.2s ease;
  --t-normal: 0.35s ease;
  --t-slow:   0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--navy);
  color: var(--white);
  overflow-x: hidden;
  cursor: none;
  line-height: 1.6;
}

/* === SCROLLBAR === */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: var(--navy2); }
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 2px; }

/* === SELECTION === */
::selection { background: var(--red); color: var(--white); }

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

/* === SECTION BASE === */
.section {
  padding: var(--section-pad);
  position: relative;
  z-index: 1;
}

.s-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}

/* === LABELS === */
.s-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.s-label::before {
  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--red);
}

/* === TITLES === */
.s-title {
  font-family: var(--font-head);
  font-size: clamp(38px, 5vw, 62px);
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 16px;
}
.s-title .y { color: var(--yellow); }
.s-title .r { color: var(--red); }

.s-sub {
  font-size: 16px;
  color: var(--gray);
  line-height: 1.75;
  max-width: 580px;
  margin-bottom: 52px;
}

/* === DIVIDER === */
.div-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
}

/* === ALT BG === */
.bg-alt {
  background: linear-gradient(180deg, var(--navy2) 0%, var(--navy3) 100%);
}

/* === BUTTONS === */
.btn-fire {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--red);
  color: var(--white);
  padding: 15px 30px;
  border-radius: var(--r-sm);
  font-family: var(--font-cond);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all var(--t-normal);
  border: 2px solid var(--red);
  cursor: pointer;
}
.btn-fire:hover {
  background: var(--dred);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--glow-red);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--white);
  padding: 15px 30px;
  border-radius: var(--r-sm);
  font-family: var(--font-cond);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all var(--t-normal);
  border: 2px solid var(--border2);
  cursor: pointer;
}
.btn-ghost:hover {
  border-color: var(--yellow);
  color: var(--yellow);
  transform: translateY(-2px);
}

/* === SCROLL REVEAL === */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s var(--t-slow),
              transform 0.7s var(--t-slow);
}
.reveal.in  { opacity: 1; transform: translateY(0); }
.reveal.d1  { transition-delay: 0.1s; }
.reveal.d2  { transition-delay: 0.2s; }
.reveal.d3  { transition-delay: 0.3s; }
.reveal.d4  { transition-delay: 0.4s; }

/* === ANIMATIONS === */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* === CURSOR === */
.cursor {
  position: fixed;
  width: 12px;
  height: 12px;
  background: var(--red);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.1s, opacity 0.3s;
}
.cursor-ring {
  position: fixed;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(204, 0, 0, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transition: opacity 0.3s;
}
.cursor.cursor-hover {
  transform: scale(1.5);
  background: var(--yellow);
}
.cursor-ring.cursor-hover {
  width: 50px;
  height: 50px;
  border-color: var(--yellow);
  margin-left: -7px;
  margin-top: -7px;
}
.cursor.cursor-click { transform: scale(0.8); }

/* === RESPONSIVE === */
@media (max-width: 960px) {
  :root { --section-pad: 60px 20px; }
  .s-title { font-size: 38px; }
}