/* ===========================================================
   VeriFashion brand styling
   Serif headings (Baskervville) · gold accent · square corners
   =========================================================== */

:root {
  --vf-gold: #c79f39;
  --vf-gold-dark: #a8842a;
  --vf-ink: #181818;
  --vf-black: #000000;
  --vf-text: #313131;
  --vf-muted: #84899f;
  --vf-serif: "Baskervville", Georgia, "Times New Roman", serif;
  --vf-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[x-cloak] { display: none !important; }

/* ---- Base typography ---- */
html, body {
  font-family: var(--vf-sans);
  color: var(--vf-text);
  font-weight: 300;
}

h1, h2, h3, .title, .subtitle {
  font-family: var(--vf-serif) !important;
  color: var(--vf-ink);
}

/* Square corners everywhere — matches the brand site */
.button, .box, .card, .input, .notification, .tag {
  border-radius: 0 !important;
}

/* ---- Navbar ---- */
.vf-nav {
  border-bottom: 1px solid #ececec;
}
.brand-text {
  font-family: var(--vf-serif);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--vf-ink) !important;
}
.brand-text:hover { color: var(--vf-gold) !important; background: transparent; }

.vf-navlink {
  font-family: var(--vf-serif);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--vf-gold) !important;
  font-weight: 500;
}
.vf-navlink:hover {
  background: transparent !important;
  color: var(--vf-gold-dark) !important;
}

/* ---- Hero ---- */
.vf-hero {
  background: var(--vf-ink);
  background-image:
    radial-gradient(ellipse at 70% 20%, rgba(199, 159, 57, 0.18), transparent 55%),
    linear-gradient(160deg, #000000 0%, #1d1d1d 55%, #111 100%);
  position: relative;
}
.vf-hero .title,
.vf-hero .subtitle { color: #ffffff !important; }

.vf-hero-kicker {
  font-family: var(--vf-serif);
  color: #ffffff;
  font-weight: 100;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.2;
}
.vf-hero-gold {
  color: var(--vf-gold) !important;
  font-weight: 400;
}
.vf-hero-sub {
  font-family: var(--vf-sans);
  color: #d9d9d9 !important;
  font-weight: 300;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Buttons ---- */
.vf-btn-gold {
  background: var(--vf-gold);
  border: 1px solid var(--vf-gold);
  color: #ffffff;
  font-family: var(--vf-sans);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  padding: 1.4rem 2.2rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.vf-btn-gold:hover {
  background: var(--vf-gold-dark);
  border-color: var(--vf-gold-dark);
  color: #ffffff;
}
.vf-btn-outline {
  background: transparent;
  border: 1px solid var(--vf-gold);
  color: var(--vf-gold);
  font-family: var(--vf-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
}
.vf-btn-outline:hover {
  background: var(--vf-gold);
  color: #ffffff;
  border-color: var(--vf-gold);
}

.app-store-badge img { transition: transform 0.15s ease; }
.app-store-badge:hover img { transform: scale(1.04); }

/* ---- Feature section ---- */
.vf-feature-num {
  font-family: var(--vf-sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--vf-gold);
}
.feature-emoji { font-size: 2.6rem; line-height: 1; }

.vf-section-title {
  font-family: var(--vf-serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--vf-ink);
  font-weight: 400;
}

.vf-rule {
  width: 60px;
  height: 2px;
  background: var(--vf-gold);
  margin: 1.2rem auto;
  border: none;
}

/* ---- Privacy page ---- */
.vf-prose h2 { color: var(--vf-ink); margin-top: 2rem; }
.vf-prose h3 { color: var(--vf-gold-dark); }
.vf-prose a { color: var(--vf-gold-dark); }

/* ---- Footer ---- */
.vf-footer {
  background: var(--vf-ink);
  color: #cfcfcf;
}
.vf-footer a { color: var(--vf-gold); }
.vf-footer a:hover { color: #fff; }
.brand-text-footer {
  font-family: var(--vf-serif);
  font-size: 1.4rem;
  color: #fff;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}
.vf-dot { color: var(--vf-gold); margin: 0 0.5rem; }
.vf-muted { color: var(--vf-muted) !important; }