/* =========================================================================
   HEKAYA CREATIVES — BLACK & GOLD
   PALETTE: Black (#000000 / #111111 / #181818) & Gold (#C99E58 / #D4A853)
   TYPOGRAPHY: 100% YU GOTHIC UI
   RESPONSIVE & DEVICE OPTIMIZED (Mobile, Tablet, Desktop)
   ========================================================================= */

*,
*::before,
*::after,
html,
body,
h1, h2, h3, h4, h5, h6,
p, span, a, button, input, textarea, select, label,
li, ul, ol, div, header, nav, footer, section, article,
.font-sans, .font-heading, .font-subheading, .font-body, .font-serif, .font-mono,
.heading-font, .subheading-font {
  font-family: 'Yu Gothic UI', 'Yu Gothic', 'Segoe UI', Meiryo, sans-serif !important;
}

html {
  scroll-behavior: smooth;
  background-color: #000000;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: #000000;
  color: #E5E5E3;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  width: 100%;
}

h1, h2, h3, h4, h5, h6,
.font-heading, .heading-font {
  color: #FFFFFF;
  font-weight: 700;
  line-height: 1.2;
}

/* Body & Paragraph Styling */
p, li {
  color: #E5E5E3;
  font-size: 16px;
  line-height: 1.65;
}

.text-brand-gold {
  color: #C99E58 !important;
}

.text-brand-black {
  color: #000000 !important;
}

.text-brand-cream {
  color: #E5E5E3 !important;
}

.text-brand-muted {
  color: #A3A3A3 !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #000000;
}

::-webkit-scrollbar-thumb {
  background: #2A2A2A;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #C99E58;
}

/* Hero Headline Responsive Sizing */
.hero-headline-80,
.hero-headline-50,
h1.hero-headline {
  font-size: 32px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.02em;
}

@media (min-width: 480px) {
  .hero-headline-80,
  .hero-headline-50,
  h1.hero-headline {
    font-size: 38px;
    line-height: 1.18;
  }
}

@media (min-width: 640px) {
  .hero-headline-80,
  .hero-headline-50,
  h1.hero-headline {
    font-size: 44px;
    line-height: 1.18;
  }
}

@media (min-width: 1024px) {
  .hero-headline-80,
  .hero-headline-50,
  h1.hero-headline {
    font-size: 52px !important;
    line-height: 1.14 !important;
  }
}

/* Black & Gold Cards */
.human-card {
  border-radius: 16px;
  background-color: #141414;
  border: 1px solid #2A2A2A;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.human-card:hover {
  border-color: #C99E58;
  transform: translateY(-2px);
}

/* =========================================================================
   GOLD ACTION BUTTONS — FORCED VISIBLE PITCH-BLACK TEXT
   ========================================================================= */
.btn-primary-gold,
.btn-gold,
a.btn-gold,
button.btn-gold,
a[class*="bg-[#C99E58]"],
button[class*="bg-[#C99E58]"],
a[class*="bg-brand-gold"],
button[class*="bg-brand-gold"] {
  background-color: #C99E58 !important;
  color: #000000 !important;
  border: 1px solid #C99E58 !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.btn-primary-gold:hover,
.btn-gold:hover,
a.btn-gold:hover,
button.btn-gold:hover,
a[class*="bg-[#C99E58]"]:hover,
button[class*="bg-[#C99E58]"]:hover,
a[class*="bg-brand-gold"]:hover,
button[class*="bg-brand-gold"]:hover {
  background-color: #DDB56E !important;
  border-color: #DDB56E !important;
  color: #000000 !important;
}

.btn-outline-gold {
  background-color: transparent;
  color: #C99E58;
  border: 1px solid rgba(201, 158, 88, 0.5);
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.btn-outline-gold:hover {
  border-color: #C99E58;
  color: #FFFFFF;
  background-color: rgba(201, 158, 88, 0.15);
}

/* =========================================================================
   HERO IMAGE SHOWCASE — FULLY RESPONSIVE
   ========================================================================= */
.hero-image-frame {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 300px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #2A2A2A;
  background-color: #141414;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.9);
  user-select: none;
}

@media (min-width: 480px) {
  .hero-image-frame {
    height: 360px;
    border-radius: 24px;
  }
}

@media (min-width: 640px) {
  .hero-image-frame {
    height: 390px;
    border-radius: 28px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.95);
  }
}

.hero-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: none !important;
}

/* Giant Gold Dignity Lens Headline — Fluid Responsive */
.dignity-lens-giant {
  font-size: clamp(42px, 8.5vw, 130px);
  line-height: 0.92;
  font-weight: 900;
  letter-spacing: -0.035em;
  color: #C99E58 !important;
  display: block;
  cursor: default;
  transition: all 0.3s ease;
  word-break: break-word;
}

.dignity-lens-giant:hover {
  color: #E5C27E !important;
}