/* ==========================================================================
   A Pool's Gold  |  apoolsgold.com corporate one-pager
   Static flatten of the "Corporate One-Pager" design (A Pool's Gold Design
   System). Dark field only, charcoal #1A1A1A + Pool's Gold. No build step.
   ========================================================================== */

/* Webfonts: Bricolage Grotesque (display) + Hanken Grotesk (body/UI) */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap");

/* --------------------------------------------------------------------------
   TOKENS  (from design-system tokens/*.css)
   -------------------------------------------------------------------------- */
:root {
  --font-display: "Bricolage Grotesque", -apple-system, "Segoe UI", sans-serif;
  --font-body: "Hanken Grotesk", -apple-system, "Segoe UI", sans-serif;

  --charcoal-700: #1A1A1A;
  --pools-gold:   #C9A84C;
  --ivory-cream:  #F2ECD8;
  --aqua-teal:    #4DB8C8;

  --charcoal-900: #0F0F10;
  --charcoal-600: #212121;
  --gold-bright:  #E7CD7A;
  --gold-deep:    #A98A38;
  --ivory-muted:  #B4AE9C;

  --surface-glass:    rgba(38, 38, 40, 0.55);
  --surface-glass-hi: rgba(52, 52, 56, 0.62);

  --text-primary: var(--ivory-cream);
  --text-heading: #FFFFFF;
  --text-muted:   var(--ivory-muted);
  --text-accent:  var(--pools-gold);
  --text-on-gold: #241d07;

  --accent:       var(--pools-gold);
  --link:         var(--pools-gold);
  --link-hover:   var(--gold-bright);

  --border:        rgba(242, 236, 216, 0.14);
  --border-strong: rgba(242, 236, 216, 0.30);
  --border-gold:   rgba(201, 168, 76, 0.55);
  --gyzer-blue:    #0089D6;

  --grad-gold:      linear-gradient(135deg, #E7CD7A 0%, #C9A84C 46%, #A98A38 100%);
  --grad-gold-soft: linear-gradient(135deg, rgba(231,205,122,0.22), rgba(169,138,56,0.10));
  --grad-aqua-gold: linear-gradient(115deg, #C9A84C 0%, #4DB8C8 100%);
  --grad-sheen:     linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 40%);

  --radius-sm: 4px; --radius: 8px; --radius-lg: 14px; --radius-xl: 22px; --radius-badge: 999px;

  --edge-hi:      inset 0 1px 0 rgba(255,255,255,0.12);
  --shadow-lg:    0 28px 64px -16px rgba(0,0,0,0.72);
  --glow-gold-sm: 0 0 22px -8px rgba(201,168,76,0.5);
  --glow-aqua:    0 0 0 3px rgba(77,184,200,0.22);
  --blur-glass:   saturate(160%) blur(18px);

  --container: 1120px; --gutter: 24px;
  --ease: cubic-bezier(0.33, 0.0, 0.15, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 130ms; --dur: 220ms; --dur-slow: 420ms;
}

/* --------------------------------------------------------------------------
   RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Hard guardrail: whole page is exactly #1A1A1A, flat, no light sections. */
html, body {
  margin: 0;
  background: #1A1A1A;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--link); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--link-hover); }
::selection { background: rgba(201,168,76,0.28); }
:focus-visible { outline: none; box-shadow: var(--glow-aqua); border-radius: var(--radius-sm); }
h1, h2 { color: var(--text-heading); margin: 0; }

.gold-text {
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Buttons ------------------------------------------------------------------ */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px; letter-spacing: 0.01em;
  padding: 14px 27px; border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; user-select: none; text-decoration: none;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease),
              color var(--dur) var(--ease), filter var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-primary {
  background: var(--grad-gold); color: var(--text-on-gold);
  box-shadow: var(--edge-hi), 0 6px 18px -10px rgba(0,0,0,.6);
}
.btn-primary:hover {
  color: var(--text-on-gold); filter: brightness(1.06); transform: translateY(-1px);
  box-shadow: var(--edge-hi), var(--glow-gold-sm), 0 8px 22px -10px rgba(0,0,0,.6);
}
.btn-primary:active { transform: translateY(1px); }
.btn .arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-ghost {
  background: transparent; color: var(--text-accent);
  font-weight: 700; font-size: 14px; padding: 9px 10px; text-decoration: none;
}
.btn-ghost:hover { color: var(--gold-bright); }

/* Standalone gold link with arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; color: var(--text-accent); font-size: 15px;
}
.link-arrow .arrow { transition: transform var(--dur) var(--ease); }
.link-arrow:hover { color: var(--gold-bright); }
.link-arrow:hover .arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   HEADER (sticky glass)
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(26,26,26,0.82);
  -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
  border-bottom: 1px solid var(--border);
}
.site-header .bar {
  max-width: 1080px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.site-header .brand { display: flex; align-items: center; gap: 12px; }
.site-header .brand img { width: 38px; height: 38px; }
.site-header .brand span {
  font-family: var(--font-display); font-weight: 500; font-size: 19px; color: var(--text-heading);
}

/* --------------------------------------------------------------------------
   1. MASTHEAD
   -------------------------------------------------------------------------- */
.masthead { max-width: 900px; margin: 0 auto; padding: clamp(64px,10vw,96px) 24px 72px; text-align: center; }
.masthead .logo {
  width: 360px; max-width: 78vw; height: auto; margin: 0 auto;
  /* Sits seamlessly on #1A1A1A: no box, ring, halo, or shadow. */
}
.masthead h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(30px, 5.4vw, 52px); line-height: 1.12; letter-spacing: -0.01em;
  color: var(--text-heading); margin: 16px auto 0; max-width: 16ch;
}

/* --------------------------------------------------------------------------
   2. POSITIONING
   -------------------------------------------------------------------------- */
.positioning { max-width: 760px; margin: 0 auto; padding: 8px 24px 84px; text-align: center; }
.positioning .lead {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(24px, 4vw, 34px); line-height: 1.28; letter-spacing: -0.005em;
  color: var(--text-primary); margin: 0 0 20px;
}
.positioning .support {
  font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 0; display: inline-block;
}

/* --------------------------------------------------------------------------
   3. FLAGSHIP (The GYZER): frosted glass card + stat cards
   -------------------------------------------------------------------------- */
.flagship { max-width: 1000px; margin: 0 auto; padding: 0 24px 96px; }
.flagship .card {
  position: relative; overflow: hidden; border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 52px);
  background:
    linear-gradient(180deg, var(--surface-glass-hi), var(--surface-glass)) padding-box,
    linear-gradient(135deg, rgba(231,205,122,0.65), rgba(77,184,200,0.22)) border-box;
  border: 1px solid transparent;
  -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
  box-shadow: var(--edge-hi), var(--shadow-lg);
}
.flagship .card::before {
  content: ""; position: absolute; inset: 0; background: var(--grad-sheen); pointer-events: none;
}
.flagship .card > * { position: relative; }
.flagship .intro { max-width: 640px; }
.flagship .eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 0 0 16px;
}
.flagship h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(30px, 4.4vw, 46px); line-height: 1.1; letter-spacing: -0.008em;
  color: var(--text-heading); margin: 0 0 20px;
}
.flagship h2 .gyzer { color: var(--gyzer-blue); }
.flagship .lede { font-size: 17.5px; line-height: 1.62; color: var(--text-primary); margin: 0 0 32px; }

.stat-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 34px; }
.stat {
  flex: 1 1 180px; min-width: 160px; border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  box-shadow: var(--edge-hi); padding: 18px 20px;
}
.stat .stat-value { font-family: var(--font-display); font-size: 20px; color: var(--text-heading); margin: 0 0 4px; }
.stat .stat-value.gold {
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat .stat-label { font-size: 13px; letter-spacing: 0.02em; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   4. THE PROSPECTOR
   -------------------------------------------------------------------------- */
.prospector { max-width: 640px; margin: 0 auto; padding: 0 24px 96px; text-align: center; }
.prospector .portrait { width: 96px; height: 96px; margin: 0 auto 22px; border-radius: var(--radius-lg); }
.prospector h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(26px, 3.6vw, 36px); line-height: 1.15; letter-spacing: -0.006em;
  color: var(--text-heading); margin: 0 0 16px;
}
.prospector p {
  font-size: 17px; line-height: 1.6; color: var(--text-muted);
  margin: 0 auto 20px; max-width: 52ch;
}

/* --------------------------------------------------------------------------
   5. EMAIL CAPTURE
   -------------------------------------------------------------------------- */
.signup { max-width: 720px; margin: 0 auto; padding: 0 24px 104px; text-align: center; }
.signup h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(28px, 4vw, 40px); line-height: 1.12; letter-spacing: -0.008em;
  color: var(--text-heading); margin: 0 0 16px;
}
.signup .sub { font-size: 17px; line-height: 1.6; color: var(--text-muted); margin: 0 auto 32px; max-width: 54ch; }
.signup-form {
  max-width: 480px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.signup-form label { font-size: 13px; font-weight: 600; color: var(--text-muted); align-self: center; }
.signup-form input[type="email"] {
  width: 100%; max-width: 440px; min-width: 0;
  font-family: var(--font-body); font-size: 16px; color: var(--text-primary);
  background: var(--surface-glass);
  -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: var(--edge-hi); padding: 13px 16px; outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.signup-form input[type="email"]::placeholder { color: var(--ivory-muted); opacity: 0.7; }
.signup-form input[type="email"]:focus { border-color: var(--accent); box-shadow: var(--glow-aqua), var(--edge-hi); }
.signup-hp { position: absolute; left: -5000px; }
.signup-msg { font-size: 17px; color: var(--text-primary); margin: 16px 0 0; min-height: 1.6em; }
.signup-msg .gold-text { font-weight: 700; }
.signup-msg.error { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   6. FOOTER  (flat #1A1A1A, gold/aqua hairline, faint badge watermark)
   -------------------------------------------------------------------------- */
.site-footer { position: relative; overflow: hidden; background: #1A1A1A; color: var(--text-muted); }
.site-footer .rule { height: 2px; background: var(--grad-aqua-gold); opacity: 0.85; }
.site-footer .watermark {
  position: absolute; right: -60px; bottom: -90px; width: 340px; height: 340px;
  opacity: 0.05; pointer-events: none;
}
.footer-top {
  position: relative; max-width: var(--container); margin: 0 auto; padding: 58px 24px 28px;
  display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between;
}
.footer-brand { max-width: 420px; }
.footer-brand img { width: 72px; height: 72px; }
.footer-brand .tagline {
  margin: 16px 0 0; font-size: clamp(9px, 1.4vw, 12px); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
  display: inline-block;
}
.footer-cols { display: flex; flex-wrap: wrap; gap: 48px; }
.footer-cols nav { display: flex; flex-direction: column; gap: 12px; }
.footer-cols .col-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-primary);
}
.footer-cols a { font-size: 15px; color: var(--text-muted); }
.footer-cols a:hover { color: var(--gold-bright); }
.footer-legal {
  position: relative; max-width: var(--container); margin: 0 auto;
  padding: 20px 24px 40px; border-top: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.6; color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   COOKIE CONSENT BANNER
   -------------------------------------------------------------------------- */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  max-width: 720px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
  padding: 16px 20px; border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, var(--surface-glass-hi), var(--surface-glass)) padding-box,
    var(--grad-gold-soft) border-box;
  border: 1px solid transparent;
  -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
  box-shadow: var(--edge-hi), var(--shadow-lg);
  transform: translateY(150%); transition: transform var(--dur-slow) var(--ease-out);
}
.consent.show { transform: translateY(0); }
.consent p { margin: 0; flex: 1 1 260px; font-size: 14px; color: var(--text-primary); }
.consent .actions { display: flex; gap: 10px; flex: 0 0 auto; }
.consent .btn { padding: 10px 20px; font-size: 14px; }
.consent .btn-ghost { border: 1px solid var(--border-strong); color: var(--text-primary); padding: 10px 20px; }
.consent .btn-ghost:hover { color: var(--gold-bright); border-color: var(--border-gold); }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 640px) { .footer-top, .footer-cols { gap: 32px; } }
@media (max-width: 420px) { .site-header .brand span { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}