/* ==========================================================================
   Pro Growth Insider — Systems Subdomain
   style.css  |  Brand-aligned with progrowthinsider.com
   Base: Near-black · Gold primary brand · Sector accent overlays
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES
   -------------------------------------------------------------------------- */
:root {
  /* Backgrounds — near-black, matches main site */
  --clr-bg:        #09090f;
  --clr-bg-card:   #0f0f1a;
  --clr-bg-raised: #141425;
  --clr-bg-nav:    rgba(9, 9, 15, 0.92);

  /* ★ Primary Brand — Gold/Amber (from progrowthinsider.com) */
  --clr-gold:         #c9a84c;
  --clr-gold-light:   #e2c06a;
  --clr-gold-lighter: #f0d48a;
  --clr-gold-dim:     rgba(201, 168, 76, 0.15);
  --clr-gold-border:  rgba(201, 168, 76, 0.30);

  /* Sector accents (functional per industry page) */
  --clr-cyan:        #06b6d4;
  --clr-cyan-light:  #22d3ee;
  --clr-cyan-dim:    rgba(6, 182, 212, 0.15);
  --clr-blue:        #3b82f6;
  --clr-blue-light:  #60a5fa;
  --clr-blue-dim:    rgba(59, 130, 246, 0.15);
  --clr-purple:      #a855f7;
  --clr-purple-light:#c084fc;
  --clr-purple-dim:  rgba(168, 85, 247, 0.15);

  /* Borders */
  --clr-border:       rgba(255, 255, 255, 0.07);
  --clr-border-hover: rgba(255, 255, 255, 0.13);
  --clr-border-gold:  rgba(201, 168, 76, 0.30);

  /* Text */
  --clr-text-primary:   #f0ece0;
  --clr-text-secondary: #8a8a9a;
  --clr-text-muted:     #4a4a60;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* Radii */
  --radius-sm: .5rem;  --radius-md: .75rem;
  --radius-lg: 1rem;   --radius-xl: 1.5rem;  --radius-2xl: 2rem;

  /* Transitions */
  --t-fast: 150ms cubic-bezier(.4,0,.2,1);
  --t-base: 250ms cubic-bezier(.4,0,.2,1);

  /* Shadows */
  --shadow-glow-gold:  0 0 40px rgba(201,168, 76,0.18);
  --shadow-glow-cyan:  0 0 40px rgba(  6,182,212,0.15);
  --shadow-glow-blue:  0 0 40px rgba( 59,130,246,0.15);
  --shadow-glow-purp:  0 0 40px rgba(168, 85,247,0.15);
}


/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; font-size:16px; }
body {
  background-color: var(--clr-bg);
  color: var(--clr-text-secondary);
  font-family: var(--font-sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img,svg,video { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
nav ul,nav ol { list-style:none; }


/* --------------------------------------------------------------------------
   3. SCROLLBAR
   -------------------------------------------------------------------------- */
::-webkit-scrollbar              { width:5px; height:5px; }
::-webkit-scrollbar-track        { background:var(--clr-bg); }
::-webkit-scrollbar-thumb        { background:#2a2a3a; border-radius:3px; }
::-webkit-scrollbar-thumb:hover  { background:var(--clr-gold); }


/* --------------------------------------------------------------------------
   4. FOCUS
   -------------------------------------------------------------------------- */
:focus-visible { outline:2px solid var(--clr-gold); outline-offset:3px; border-radius:var(--radius-sm); }
:focus:not(:focus-visible) { outline:none; }


/* --------------------------------------------------------------------------
   5. TYPOGRAPHY
   -------------------------------------------------------------------------- */

/* Gold gradient — primary brand keyword (matches main site hero) */
.text-gradient,
.text-gradient-gold {
  background: linear-gradient(135deg, var(--clr-gold-lighter) 0%, var(--clr-gold) 55%, #a07830 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Sector gradients */
.text-gradient-cyan {
  background: linear-gradient(to right, var(--clr-cyan-light), var(--clr-blue-light));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.text-gradient-blue {
  background: linear-gradient(to right, var(--clr-blue-light), #818cf8);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.text-gradient-purple {
  background: linear-gradient(to right, var(--clr-purple-light), #f472b6);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* Section heading with gold underline accent — matches main site */
.section-heading {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: var(--clr-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
  margin-bottom: .5rem;
}
.section-heading::after {
  content: '';
  display: block;
  width: 3rem;
  height: 3px;
  background: linear-gradient(to right, var(--clr-gold), transparent);
  border-radius: 2px;
  margin: .75rem auto 0;
}


/* --------------------------------------------------------------------------
   6. GLASS / PANELS
   -------------------------------------------------------------------------- */

/* Nav — gold-tinted border matches main site nav treatment */
.glass-panel {
  background: var(--clr-bg-nav);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(201,168,76,0.12);
}

.glass-card {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-2xl);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.glass-card:hover { border-color:var(--clr-border-hover); }
.glass-card--gold:hover   { border-color:var(--clr-border-gold);          box-shadow:var(--shadow-glow-gold); }
.glass-card--cyan:hover   { border-color:rgba(6,182,212,.3);              box-shadow:var(--shadow-glow-cyan); }
.glass-card--blue:hover   { border-color:rgba(59,130,246,.3);             box-shadow:var(--shadow-glow-blue); }
.glass-card--purple:hover { border-color:rgba(168,85,247,.3);             box-shadow:var(--shadow-glow-purp); }


/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero-bg {
  background-color: var(--clr-bg);
  background-image:
    radial-gradient(at 30% 20%, rgba(201,168,76,.06) 0px, transparent 55%),
    radial-gradient(at 80% 80%, rgba(201,168,76,.04) 0px, transparent 55%);
}
.noise-overlay::before {
  content:''; position:absolute; inset:0;
  background-image:url('https://grainy-gradients.vercel.app/noise.svg');
  opacity:.08; pointer-events:none; z-index:0;
}
.glow-orb { position:absolute; border-radius:50%; pointer-events:none; filter:blur(120px); }
.glow-orb--gold   { background:rgba(201,168,76,.10); }
.glow-orb--cyan   { background:rgba(6,182,212,.12); }
.glow-orb--blue   { background:rgba(59,130,246,.10); }
.glow-orb--purple { background:rgba(168,85,247,.10); }


/* --------------------------------------------------------------------------
   8. NAV ACTIVE
   -------------------------------------------------------------------------- */
.nav-link-active { color:var(--clr-gold-light) !important; position:relative; }
.nav-link-active::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:2px; border-radius:1px; background:var(--clr-gold);
}


/* --------------------------------------------------------------------------
   9. BADGES / PILLS
   -------------------------------------------------------------------------- */
.badge {
  display:inline-flex; align-items:center; gap:.375rem;
  padding:.25rem .75rem; border-radius:9999px;
  font-size:.6875rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  border:1px solid;
}
.badge--default { background:#18182a; color:#8a8a9a; border-color:#2a2a40; }
.badge--gold    { background:rgba(201,168,76,.12); color:var(--clr-gold-light); border-color:var(--clr-border-gold); }
.badge--cyan    { background:var(--clr-cyan-dim);  color:#67e8f9; border-color:rgba(6,182,212,.3); }
.badge--blue    { background:var(--clr-blue-dim);  color:#93c5fd; border-color:rgba(59,130,246,.3); }
.badge--purple  { background:var(--clr-purple-dim);color:#d8b4fe; border-color:rgba(168,85,247,.3); }

.pulse-dot {
  width:.5rem; height:.5rem; border-radius:50%;
  background:var(--clr-gold);
  animation:pulse-dot 2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes pulse-dot {
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.45; transform:scale(.82); }
}


/* --------------------------------------------------------------------------
   10. BUTTONS — brand-aligned with main site
   -------------------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.875rem 1.75rem; border-radius:var(--radius-lg);
  font-weight:700; font-size:.9375rem; line-height:1;
  transition: background-color var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
}
.btn:disabled { opacity:.55; cursor:not-allowed; transform:none !important; }

/* Gold outline — matches main site primary CTA */
.btn--gold {
  background:transparent; color:var(--clr-gold-light); border-color:var(--clr-gold);
}
.btn--gold:hover:not(:disabled) {
  background:var(--clr-gold-dim); color:var(--clr-gold-lighter);
  border-color:var(--clr-gold-light);
  box-shadow:0 4px 20px rgba(201,168,76,.25);
}

/* Gold filled — high-emphasis */
.btn--gold-filled {
  background:var(--clr-gold); color:#0a0a0f;
  border-color:var(--clr-gold); font-weight:800;
}
.btn--gold-filled:hover:not(:disabled) {
  background:var(--clr-gold-light); border-color:var(--clr-gold-light);
  transform:translateY(-2px); box-shadow:0 6px 24px rgba(201,168,76,.4);
}

/* Sector buttons */
.btn--cyan   { background:#0e7490; color:#fff; border-color:#0e7490; }
.btn--cyan:hover:not(:disabled)   { background:#0891b2; transform:translateY(-2px); box-shadow:var(--shadow-glow-cyan); }
.btn--blue   { background:#1d4ed8; color:#fff; border-color:#1d4ed8; }
.btn--blue:hover:not(:disabled)   { background:#2563eb; transform:translateY(-2px); box-shadow:var(--shadow-glow-blue); }
.btn--purple { background:#7e22ce; color:#fff; border-color:#7e22ce; }
.btn--purple:hover:not(:disabled) { background:#9333ea; transform:translateY(-2px); box-shadow:var(--shadow-glow-purp); }

.btn--ghost { background:#18182a; color:var(--clr-text-primary); border-color:#2a2a40; }
.btn--ghost:hover:not(:disabled) { background:#20203a; border-color:#3a3a55; }


/* --------------------------------------------------------------------------
   11. FORMS
   -------------------------------------------------------------------------- */
.form-input {
  width:100%;
  background:rgba(9,9,15,.95);
  border:1px solid #1e1e35;
  border-radius:var(--radius-md);
  padding:.8125rem 1rem;
  color:var(--clr-text-primary);
  font-family:var(--font-sans); font-size:.9375rem; line-height:1.5;
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-input::placeholder { color:var(--clr-text-muted); }
.form-input:focus {
  outline:none;
  border-color:var(--clr-gold);
  box-shadow:0 0 0 3px rgba(201,168,76,.12);
}
.form-label {
  display:block; font-size:.6875rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--clr-text-muted); margin-bottom:.375rem;
}


/* --------------------------------------------------------------------------
   12. FAQ ACCORDION
   -------------------------------------------------------------------------- */
details>summary { list-style:none; }
details>summary::-webkit-details-marker { display:none; }

.faq-item {
  background:var(--clr-bg-card);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-xl);
  overflow:hidden;
  transition:border-color var(--t-base);
}
.faq-item[open]           { border-color:var(--clr-border-gold); }
.faq-item[open] .faq-icon { transform:rotate(45deg); color:var(--clr-gold) !important; }

.faq-summary {
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.25rem 1.5rem;
  font-weight:600; font-size:1rem; color:var(--clr-text-primary);
  cursor:pointer; user-select:none;
}
.faq-summary:hover { color:var(--clr-gold-lighter); }

.faq-icon {
  flex-shrink:0; color:var(--clr-text-muted);
  transition:transform var(--t-base), color var(--t-base);
  font-size:1.25rem; line-height:1;
}
.faq-body {
  padding:1rem 1.5rem 1.25rem;
  font-size:.9375rem; color:var(--clr-text-secondary); line-height:1.7;
  border-top:1px solid var(--clr-border);
}
details[open] .faq-body { animation:faq-open 200ms ease-out both; }
@keyframes faq-open {
  from { opacity:0; transform:translateY(-5px); }
  to   { opacity:1; transform:translateY(0); }
}


/* --------------------------------------------------------------------------
   13. MODAL
   -------------------------------------------------------------------------- */
.modal-overlay { background:rgba(9,9,15,.93); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.modal-panel {
  background:var(--clr-bg-card);
  border:1px solid var(--clr-border-gold);
  border-radius:var(--radius-xl);
  box-shadow:0 24px 80px rgba(0,0,0,.7), var(--shadow-glow-gold);
}
@keyframes modal-in {
  from { opacity:0; transform:scale(.92) translateY(8px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}


/* --------------------------------------------------------------------------
   14. BREADCRUMB
   -------------------------------------------------------------------------- */
.breadcrumb { display:flex; align-items:center; gap:.5rem; font-size:.75rem; color:var(--clr-text-muted); }
.breadcrumb a:hover { color:var(--clr-gold-light); }
.breadcrumb-sep { color:#2a2a3a; }


/* --------------------------------------------------------------------------
   15. OUTCOME BOXES
   -------------------------------------------------------------------------- */
.outcome-box { padding:1rem 1.25rem; border-radius:var(--radius-lg); font-size:.8125rem; line-height:1.6; border:1px solid; }
.outcome-box--gold   { background:rgba(201,168,76,.06); border-color:rgba(201,168,76,.22); color:var(--clr-gold-light); }
.outcome-box--cyan   { background:rgba(6,182,212,.06);  border-color:rgba(6,182,212,.2);   color:rgba(103,232,249,.8); }
.outcome-box--blue   { background:rgba(59,130,246,.06); border-color:rgba(59,130,246,.2);  color:rgba(147,197,253,.8); }
.outcome-box--purple { background:rgba(168,85,247,.06); border-color:rgba(168,85,247,.2);  color:rgba(216,180,254,.8); }
.outcome-box--slate  { background:rgba(20,20,37,.6);    border-color:#2a2a40;              color:var(--clr-text-secondary); }


/* --------------------------------------------------------------------------
   16. TRUST BAR & STATS  — gold numbers match main site
   -------------------------------------------------------------------------- */
.trust-bar {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.5rem 1.5rem; font-size:.8125rem; font-weight:500; color:var(--clr-text-muted);
}
.trust-bar-sep { width:4px; height:4px; border-radius:50%; background:#2a2a3a; }
.stat-number { font-size:clamp(2rem,4vw,3rem); font-weight:900; color:var(--clr-gold-light); letter-spacing:-.03em; line-height:1; }
.stat-label  { font-size:.875rem; color:var(--clr-text-secondary); margin-top:.25rem; }


/* --------------------------------------------------------------------------
   17. PRICE
   -------------------------------------------------------------------------- */
.price-amount { font-size:clamp(2.5rem,5vw,3.5rem); font-weight:900; color:var(--clr-text-primary); line-height:1; letter-spacing:-.03em; }
.price-suffix { font-size:.875rem; font-weight:400; color:var(--clr-text-muted); }


/* --------------------------------------------------------------------------
   18. FEATURE LIST
   -------------------------------------------------------------------------- */
.feature-list  { display:flex; flex-direction:column; gap:1rem; }
.feature-item  { display:flex; gap:.75rem; font-size:.9375rem; color:#b0b0c8; line-height:1.55; }
.feature-icon  { flex-shrink:0; width:1.25rem; height:1.25rem; margin-top:.1rem; }
.feature-icon--gold   { color:var(--clr-gold); }
.feature-icon--cyan   { color:var(--clr-cyan); }
.feature-icon--blue   { color:var(--clr-blue-light); }
.feature-icon--purple { color:var(--clr-purple-light); }


/* --------------------------------------------------------------------------
   19. SECTION DIVIDER — gold tint
   -------------------------------------------------------------------------- */
.section-divider {
  width:100%; height:1px;
  background:linear-gradient(to right, transparent, rgba(201,168,76,.15), transparent);
  margin:4rem 0;
}


/* --------------------------------------------------------------------------
   20. ANIMATIONS
   -------------------------------------------------------------------------- */
.animate-fade-up { animation:fade-up .5s ease-out both; }
@keyframes fade-up {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
.delay-100{animation-delay:100ms} .delay-200{animation-delay:200ms}
.delay-300{animation-delay:300ms} .delay-400{animation-delay:400ms}

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


/* --------------------------------------------------------------------------
   21. CONTAINER
   -------------------------------------------------------------------------- */
.container { width:100%; margin-inline:auto; padding-inline:1.5rem; }
@media(min-width:640px)  { .container { max-width:640px; } }
@media(min-width:768px)  { .container { max-width:768px; } }
@media(min-width:1024px) { .container { max-width:1024px; padding-inline:2rem; } }
@media(min-width:1280px) { .container { max-width:1280px; } }


/* --------------------------------------------------------------------------
   22. PRINT
   -------------------------------------------------------------------------- */
@media print {
  body { background:#fff; color:#000; }
  nav,#checkoutModal { display:none !important; }
  a[href]::after { content:" (" attr(href) ")"; font-size:.75em; color:#555; }
}