/*
  File: styles.css
  Purpose: Custom styles to complement Bootstrap with v0.dev-inspired visuals
           (soft gradients, glass surfaces, elevated cards) and to highlight
           the gold chart image. Keeps styles minimal and portable.
*/

:root {
  --gold-500: #f7d778;
  --gold-600: #d7b64f;
  --accent-1: #18181b;
  --accent-2: #0f1222;
  --glow: 0 10px 30px rgba(247, 215, 120, 0.25);
}

.py-6 { padding-top: 4.5rem; padding-bottom: 1.5rem; }

/* Concept 1 hero */
.hero-gradient {
  background: radial-gradient(1200px 600px at 10% -10%, rgba(247, 215, 120, 0.25), transparent 60%),
              radial-gradient(1200px 600px at 110% 10%, rgba(111, 186, 255, 0.15), transparent 60%),
              linear-gradient(180deg, #0b0b0d 0%, #0e1117 60%, #0b0b0d 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Alt Hero 1: Centered, bold, with radial gold glow */
.hero-center {
  background:
    radial-gradient(800px 400px at 50% -10%, rgba(247, 215, 120, 0.25), transparent 60%),
    radial-gradient(600px 300px at 80% 0%, rgba(130, 196, 255, 0.15), transparent 70%),
    linear-gradient(180deg, #0b0b0d 0%, #0f1116 100%);
}
.hero-center .headline {
  font-weight: 800;
  letter-spacing: 0.3px;
}

/* Alt Hero 2: Bleed with subtle background image wash */
.hero-bleed { position: relative; overflow: hidden; }
.hero-bleed::before {
  content: ""; position: absolute; inset: -20%; z-index: -2;
  background-image: url('../images/gold_futures.jpg');
  background-size: cover; background-position: center;
  filter: blur(30px) saturate(120%) brightness(70%);
  opacity: 0.35;
}
.hero-bleed::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(600px 300px at 20% 10%, rgba(247, 215, 120, 0.25), transparent 60%),
              linear-gradient(180deg, #0b0b0d 20%, #0e1117 100%);
}

/* Alt Hero 3: Stacked phones for energy */
.stack-group { display: grid; place-items: center; gap: 1rem; }
.stack-row { position: relative; height: 0; }
.stack-card { position: relative; width: min(220px, 42vw); }
.stack-card .phone-frame { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), var(--glow); }
.stack-card:nth-child(1) { transform: rotate(-6deg) translateX(-6px); }
.stack-card:nth-child(2) { transform: rotate(0deg) translateY(-6px); z-index: 2; }
.stack-card:nth-child(3) { transform: rotate(6deg) translateX(6px); }

/* Phone frame utility */
.phone-frame {
  width: min(430px, 88vw);
  background: #0f1014;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  overflow: hidden;
}

.glass-cta {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #0d0f14;
}

.hero-image-frame { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), var(--glow); }

/* Concept 2 background highlight */
.bg-chart {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.07;
  background-image: url('../images/gold_futures.jpg');
  background-size: cover; background-position: center;
}

.chart-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

/* Utility to ensure object-fit works cross-browser */
.object-fit-cover { object-fit: cover; }

/* Desktop-only helper to align object-fit image to the top */
@media (min-width: 768px) {
  .object-position-top-md { object-position: top center !important; }
}

/* Buttons */
.btn-primary {
  background: linear-gradient(180deg, var(--gold-500), var(--gold-600));
  border: none;
  color: #111;
  box-shadow: var(--glow);
}
.btn-primary:hover { filter: brightness(0.98); }

/* Typography tweaks */
h1, h2, h3 { letter-spacing: 0.2px; }
p { line-height: 1.65; }

/* Mobile-first portrait ratios for phone screenshots */
.ratio-9x16 { aspect-ratio: 11 / 16; }
.ratio-3x4 { aspect-ratio: 3 / 4; }

/* Upgrade ratios on larger screens where horizontal space improves readability */
@media (min-width: 768px) {
  .md\:ratio-16x9 { aspect-ratio: 16 / 9; }
  .md\:ratio-4x3 { aspect-ratio: 4 / 3; }
  .stack-card { width: min(260px, 26vw); }
}

/* Override Bootstrap .p-4 spacing for LP card rhythm */
.p-4 { padding: 2.5rem 1.5rem 2.8rem 1.5rem !important; }