:root {
  --bg: #050407;
  --surface: rgba(18, 14, 24, 0.9);
  --surface-strong: rgba(31, 24, 38, 0.98);
  --text: #fbf8f2;
  --text-soft: #cfc2d2;
  --primary: #8f1d38;
  --primary-dark: #641629;
  --mystic: #6f3a8f;
  --accent: #d6a34a;
  --line: rgba(214, 163, 74, 0.2);
  --shadow: 0 22px 58px rgba(0, 0, 0, 0.45);
}

html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  background:
    linear-gradient(115deg, rgba(214, 163, 74, 0.06) 0 1px, transparent 1px 24%),
    linear-gradient(180deg, #050407 0%, #0c0710 42%, #050407 100%);
  color: var(--text);
  font-family: "Manrope", sans-serif;
  line-height: 1.6;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(214, 163, 74, 0.75) 0 1px, transparent 1.5px),
    linear-gradient(140deg, transparent 0 38%, rgba(151, 89, 188, 0.16) 38.2% 38.6%, transparent 39% 100%);
  background-size: 120px 120px, 260px 260px;
  opacity: 0.28;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2 { font-family: "Fraunces", serif; line-height: 1.08; }
h1 { color: #fff; font-size: clamp(2.5rem, 5vw, 4.2rem); }
h2 { color: #fff; font-size: clamp(2rem, 3.5vw, 2.8rem); }
h3, .card-title { color: #fff; font-size: 1rem; font-weight: 800; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 78px;
  border-bottom: 1px solid rgba(214, 163, 74, 0.12);
  background: rgba(5, 4, 7, 0.82);
  backdrop-filter: blur(18px);
}

.brand { display: inline-flex; align-items: center; gap: 0.85rem; color: #fff; }
.brand:hover { color: #fff; }
.brand-logo { width: 54px; height: 54px; border: 1px solid rgba(214, 163, 74, 0.42); border-radius: 8px; object-fit: cover; box-shadow: 0 0 34px rgba(214, 163, 74, 0.16); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.25; }
.brand-copy strong { font-size: 1.05rem; font-weight: 800; }
.brand-copy small { color: var(--text-soft); font-size: 0.78rem; }
.nav-toggle { border-color: rgba(214, 163, 74, 0.42); }
.nav-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(214, 163, 74, 0.18); }
.nav-toggle .navbar-toggler-icon { filter: invert(1); }
.main-nav .nav-link { border: 1px solid transparent; border-radius: 999px; color: var(--text-soft); font-size: 0.88rem; font-weight: 800; padding: 0.55rem 0.85rem; }
.main-nav .nav-link:hover, .main-nav .nav-link:focus, .main-nav .nav-link.is-active { border-color: rgba(214, 163, 74, 0.45); background: rgba(143, 29, 56, 0.28); color: #fff; }

.section { padding: 4.5rem 0; }
.section-light { background: rgba(214, 163, 74, 0.035); }
.section-screen { scroll-margin-top: 5.75rem; }
.hero-section { padding: 1.75rem 0 4.5rem; }
.featured-section { background: linear-gradient(180deg, rgba(143, 29, 56, 0.08), rgba(5, 4, 7, 0.18)), rgba(5, 4, 7, 0.38); }
.section-heading { margin-bottom: 1.5rem; }
.eyebrow { margin-bottom: 0.75rem; color: var(--accent); font-size: 0.76rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; }
.hero-text, .card-text, .adoption-step p, .support-box p, .footer-contact p { color: var(--text-soft); }
.hero-text { max-width: 62ch; margin-top: 1rem; }
.hero-text strong { color: #fff; }

.hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(480px, 64vh, 680px);
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid rgba(214, 163, 74, 0.24);
  border-radius: 8px;
  background-image:
    linear-gradient(90deg, rgba(7, 5, 10, 0.96) 0%, rgba(12, 7, 15, 0.84) 52%, rgba(12, 7, 15, 0.52) 100%),
    url("../img/logo.jpeg");
  background-position: center, right center;
  background-size: cover;
  box-shadow: var(--shadow);
}

.hero-copy::before, .support-box::before {
  position: absolute;
  inset: 1rem;
  content: "";
  border: 1px solid rgba(214, 163, 74, 0.12);
  border-radius: 8px;
  pointer-events: none;
}
.hero-copy > * { position: relative; z-index: 1; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  border-radius: 999px;
  padding: 0.75rem 1.25rem;
  font-weight: 900;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button-primary { border-color: transparent; background: linear-gradient(135deg, var(--primary), var(--mystic)); color: #fff; box-shadow: 0 16px 34px rgba(143, 29, 56, 0.32); }
.button-primary:hover, .button-primary:focus { border-color: rgba(214, 163, 74, 0.4); background: linear-gradient(135deg, var(--primary-dark), var(--primary)); color: #fff; }
.button-ghost { border-color: rgba(214, 163, 74, 0.65); background: transparent; color: #fff; }
.button-ghost:hover, .button-ghost:focus { border-color: var(--accent); background: rgba(214, 163, 74, 0.1); color: #fff; }
.button-accent { border-color: rgba(214, 163, 74, 0.7); background: var(--accent); color: #170d18; box-shadow: 0 14px 30px rgba(214, 163, 74, 0.2); }
.button-accent:hover, .button-accent:focus { background: #edbd63; color: #170d18; }

.hero-panel { display: grid; gap: 1rem; }
.panel-card, .about-card, .cat-card, .vibe-card, .form-card, .donation-card, .contact-card, .adoption-box { border-color: var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.panel-card { flex: 1; }
.panel-card-highlight { background: linear-gradient(160deg, #2a142d, #140d18 72%); }
.panel-label { display: block; margin-bottom: .65rem; color: var(--accent); font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.stats-card { background: rgba(17, 13, 22, 0.92); }
.stats-card strong { display: block; color: #fff; font-size: 1.42rem; line-height: 1.1; }
.stats-card span { color: var(--text-soft); font-size: .9rem; }

.about-card, .vibe-card, .contact-card, .donation-card { transition: transform .2s ease, border-color .2s ease, background-color .2s ease; }
.about-card:hover, .vibe-card:hover, .contact-card:hover, .donation-card:hover { border-color: rgba(214, 163, 74, 0.44); background: var(--surface-strong); transform: translateY(-3px); }
.vibe-card .card-title { display: inline-block; border-bottom: 1px solid rgba(214, 163, 74, 0.35); padding-bottom: .35rem; }

.cat-card { overflow: hidden; }
.cat-card .card-img-top { aspect-ratio: 4 / 3; background: #130d18; object-fit: cover; }
.cat-card-content { display: flex; flex: 1; flex-direction: column; gap: .9rem; }
.cat-age, .cat-vibe { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; padding: .38rem .62rem; font-size: .76rem; font-weight: 900; white-space: nowrap; }
.cat-age { border: 1px solid rgba(214, 163, 74, 0.32); background: rgba(214, 163, 74, 0.14); color: #f7dfb5; }
.cat-vibe { border: 1px solid rgba(151, 89, 188, 0.34); background: rgba(111, 58, 143, 0.18); color: #ead8f3; }
.cat-card-state { min-height: 260px; }
.animals-adoption-link { min-width: min(100%, 220px); }

.adoption-box { padding: 1.5rem; }
.adoption-step { height: 100%; padding-top: .25rem; }
.adoption-step span { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; margin-bottom: .75rem; border: 1px solid rgba(214, 163, 74, 0.44); border-radius: 999px; background: linear-gradient(135deg, var(--primary), var(--mystic)); color: #fff; font-weight: 900; }
.adoption-step h3 { margin-bottom: .2rem; }

.form-card { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; }
.form-card .form-label { color: #fff; font-weight: 800; }
.form-card .form-control { border-color: rgba(214, 163, 74, 0.22); background: #201b26; color: var(--text); padding: .8rem 1rem; }
.form-card .form-control::placeholder { color: rgba(207, 194, 210, 0.66); }
.form-card .form-control:focus { border-color: rgba(214, 163, 74, 0.68); background: #282130; color: var(--text); box-shadow: 0 0 0 .25rem rgba(143, 29, 56, 0.22); }
.form-feedback { border: 1px solid rgba(47, 143, 131, .38); border-radius: 8px; background: rgba(47, 143, 131, .13); padding: .9rem 1rem; color: #d9fff8; }

.support-section { padding-top: 0; }
.support-box { position: relative; overflow: hidden; padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid rgba(214, 163, 74, .26); border-radius: 8px; background: linear-gradient(135deg, #140d18, #42172a 58%, #6f3a8f 100%); box-shadow: var(--shadow); }
.support-box > .row { position: relative; z-index: 1; }
.support-box .eyebrow, .support-box p { color: rgba(255, 255, 255, .84); }
.support-box .donation-card { border-color: rgba(214, 163, 74, .16); background: rgba(5, 4, 7, .34); box-shadow: none; }

.contact-section { padding-bottom: 5rem; }
.contact-card a, .footer-links .nav-link, .footer-contact a { color: var(--accent); font-weight: 800; }
.site-footer { padding: 0 0 2.75rem; }
.footer-grid { padding: 1.5rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(12, 8, 15, .9); }
.footer-links .nav-link:hover, .footer-links .nav-link:focus { color: #fff; }
.footer-contact p { margin-bottom: .45rem; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s cubic-bezier(.22, 1, .36, 1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 767.98px) {
  .site-header .container { padding-top: .6rem; padding-bottom: .6rem; }
  .main-nav { padding-top: .75rem; }
  .main-nav .nav-link { margin-top: .35rem; text-align: center; }
  .section { padding: 3.5rem 0; }
  .hero-section { padding-top: 1rem; }
}

@media (max-width: 420px) {
  .brand-copy small { display: none; }
  .brand-logo { width: 48px; height: 48px; }
  .hero-copy { min-height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}