/* ============================================================
   ProfitSleuth AI — Design System v2
   Both briefs reconciled. Phase 2 fixes applied.
   ============================================================ */

/* font-display:swap prevents FOUT */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cormorant+Garant:ital,wght@0,600;0,700;1,400;1,600&family=Syne:wght@600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,400&display=swap');

:root {
  /* ── Palette ── */
  --forest:        #1a3a2a;
  --forest-deep:   #0f2318;
  --forest-light:  #2a5a3a;
  --forest-mid:    #1a2e1a;
  --gold:          #c8963e;
  --gold-light:    #e8b96a;
  --gold-pale:     #f5d48a;
  --cream:         #f5f0e8;
  --cream-dark:    #ede7d8;
  --black:         #080c0a;
  --offwhite:      #f4f8f2;
  --mist:          #7a9a82;
  --text-on-cream: #1a3a2a;
  --border-gold:   rgba(200,150,62,0.28);
  --border-mist:   rgba(122,154,130,0.2);

  /* ── Typography ── */
  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-serif:   'Cormorant Garant', Georgia, serif;
  --font-sub:     'Syne', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* ── Scale ── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;
  --text-8xl:  6rem;

  /* ── Spacing ── */
  --sp-1:0.25rem; --sp-2:0.5rem;  --sp-3:0.75rem;
  --sp-4:1rem;    --sp-5:1.25rem; --sp-6:1.5rem;
  --sp-8:2rem;    --sp-10:2.5rem; --sp-12:3rem;
  --sp-14:3.5rem; --sp-16:4rem;   --sp-20:5rem;
  --sp-24:6rem;   --sp-28:7rem;   --sp-32:8rem;

  /* ── Radius ── */
  --r-sm:4px; --r-md:8px; --r-lg:12px;
  --r-xl:16px; --r-2xl:24px; --r-full:9999px;

  /* ── Shadows — upgraded ── */
  --shadow-glow:   0 0 60px rgba(200,150,62,0.15);
  --shadow-glow-sm:0 0 24px rgba(200,150,62,0.1);
  --shadow-lg:     0 28px 72px rgba(0,0,0,0.5);
  --shadow-md:     0 12px 40px rgba(0,0,0,0.35);
  --shadow-sm:     0 4px 16px rgba(0,0,0,0.2);
  --shadow-card:   0 8px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(200,150,62,0.06);
  --shadow-btn:    0 6px 20px rgba(200,150,62,0.32);

  /* ── Motion ── */
  --ease:     cubic-bezier(0.16,1,0.3,1);
  --ease-in:  cubic-bezier(0.4,0,1,1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 560ms;

  /* ── Layout ── */
  --container:    1120px;
  --container-sm: 760px;
  --container-xs: 560px;
  --nav-h:        70px;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.65;
  color:var(--offwhite);
  background:var(--black);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit;}
ul,ol{list-style:none;}
input,textarea,select{font-family:var(--font-body);font-size:var(--text-base);color:var(--offwhite);}

/* ── Container ── */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-6);}
.container--sm{max-width:var(--container-sm);margin-inline:auto;padding-inline:var(--sp-6);}
.container--xs{max-width:var(--container-xs);margin-inline:auto;padding-inline:var(--sp-6);}

/* ── Buttons — Phase 3 upgrade ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--sp-2);
  font-family:var(--font-sub);font-size:var(--text-sm);font-weight:700;
  letter-spacing:0.05em;
  padding:var(--sp-3) var(--sp-6);
  border-radius:var(--r-md);
  transition:
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-base) var(--ease),
    border-color var(--dur-fast) var(--ease);
  white-space:nowrap;cursor:pointer;text-decoration:none;
  position:relative;overflow:hidden;
}
/* Shimmer on hover */
.btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.12) 50%,transparent 60%);
  transform:translateX(-100%);
  transition:transform 0.5s var(--ease);
}
.btn:hover::after{transform:translateX(100%);}

.btn--primary{background:var(--gold);color:var(--black);}
.btn--primary:hover{
  background:var(--gold-light);
  transform:translateY(-2px);
  box-shadow:var(--shadow-btn);
}
.btn--primary:active{transform:translateY(0);box-shadow:none;}

.btn--ghost{border:1px solid var(--border-gold);color:var(--gold-light);}
.btn--ghost:hover{border-color:var(--gold);background:rgba(200,150,62,0.09);color:var(--gold);}

.btn--dark{background:var(--forest-deep);color:var(--gold);border:1px solid var(--border-gold);}
.btn--dark:hover{background:var(--forest);transform:translateY(-1px);}

.btn--cream{background:var(--forest);color:var(--offwhite);border:2px solid var(--forest);}
.btn--cream:hover{background:var(--forest-light);transform:translateY(-2px);box-shadow:0 8px 24px rgba(26,58,42,0.4);}

.btn--lg{font-size:var(--text-base);padding:var(--sp-4) var(--sp-8);border-radius:var(--r-lg);}
.btn--xl{font-size:var(--text-lg);padding:var(--sp-5) var(--sp-10);border-radius:var(--r-lg);}
.btn--full{width:100%;justify-content:center;}

/* ── Sections ── */
.section{padding-block:var(--sp-24);}
.section--sm{padding-block:var(--sp-16);}
.section--dark{background:var(--forest-deep);position:relative;}
.section--forest{background:var(--forest);position:relative;}
.section--mid{background:var(--forest-mid);position:relative;}
.section--black{background:var(--black);position:relative;}
.section--cream{background:var(--cream);position:relative;}

/* Grid texture — FIXED: scoped z-index to prevent stacking issues */
.grid-texture{position:relative;isolation:isolate;}
.grid-texture::before{
  content:'';position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(rgba(200,150,62,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(200,150,62,0.04) 1px,transparent 1px);
  background-size:48px 48px;
  pointer-events:none;
}
.grid-texture > .container,
.grid-texture > .container--sm,
.grid-texture > .container--xs,
.grid-texture > [class*="container"] {position:relative;z-index:1;}

/* ── Typography helpers ── */
.eyebrow{
  font-family:var(--font-sub);font-size:var(--text-xs);font-weight:700;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);
  margin-bottom:var(--sp-4);display:block;
}
.eyebrow--dark{color:var(--forest);}
.headline{
  font-family:var(--font-display);
  font-size:clamp(var(--text-4xl),6vw,var(--text-7xl));
  line-height:0.93;letter-spacing:0.02em;color:var(--offwhite);
}
.headline--dark{color:var(--text-on-cream);}
.headline--gold{color:var(--gold);}
.subhead{
  font-family:var(--font-serif);font-style:italic;
  font-size:clamp(var(--text-xl),2.5vw,var(--text-3xl));
  color:var(--mist);line-height:1.45;
}
.subhead--dark{color:rgba(26,58,42,0.7);}
.body-lg{font-size:var(--text-lg);color:var(--mist);line-height:1.75;max-width:60ch;}

/* ── Cards — Phase 3 upgrade ── */
.card{
  background:rgba(26,58,42,0.5);
  border:1px solid var(--border-mist);
  border-radius:var(--r-xl);
  padding:var(--sp-8);
  transition:
    border-color var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}
.card:hover{border-color:var(--border-gold);transform:translateY(-3px);box-shadow:var(--shadow-card);}
.card--gold{background:rgba(200,150,62,0.07);border-color:var(--border-gold);}
.card--dark{background:rgba(15,35,24,0.85);border-color:var(--border-mist);}
.card--glass{
  background:rgba(255,255,255,0.07);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--r-xl);
}

/* ── Price display ── */
.price-display{
  font-family:var(--font-display);
  font-size:clamp(var(--text-6xl),10vw,var(--text-8xl));
  line-height:1;color:var(--gold);letter-spacing:0.02em;
}
.price-reg{
  font-family:var(--font-body);font-size:var(--text-xl);
  color:var(--mist);text-decoration:line-through;margin-left:var(--sp-3);
}

/* ── Checklist ── */
.checklist{display:flex;flex-direction:column;gap:var(--sp-3);}
.checklist li{
  display:flex;align-items:flex-start;gap:var(--sp-3);
  font-size:var(--text-base);color:var(--offwhite);line-height:1.55;
}
.checklist li::before{
  content:'✓';color:var(--gold);font-weight:700;
  flex-shrink:0;margin-top:2px;font-family:var(--font-sub);
}

/* ── Stars ── */
.stars{display:flex;gap:2px;margin-bottom:var(--sp-3);}
.stars span{color:var(--gold);font-size:16px;line-height:1;}

/* ── Testimonial — upgraded ── */
.testimonial{
  background:rgba(15,35,24,0.75);
  border:1px solid var(--border-gold);
  border-radius:var(--r-xl);
  padding:var(--sp-8);
  position:relative;
  transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.testimonial:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow-sm),var(--shadow-card);}
.testimonial::before{
  content:'\201C';
  position:absolute;top:-10px;left:var(--sp-6);
  font-family:var(--font-serif);font-size:80px;line-height:1;
  color:rgba(200,150,62,0.18);
}
.testimonial__quote{
  font-family:var(--font-serif);font-style:italic;
  font-size:var(--text-xl);color:var(--offwhite);
  line-height:1.65;margin-bottom:var(--sp-5);
  position:relative;
}
.testimonial__author{font-family:var(--font-sub);font-size:var(--text-sm);font-weight:700;color:var(--gold);letter-spacing:0.05em;}
.testimonial__role{font-size:var(--text-xs);color:var(--mist);margin-top:var(--sp-1);}

/* ── Guarantee badge ── */
.guarantee{
  display:flex;align-items:center;justify-content:center;
  gap:var(--sp-2);font-size:var(--text-sm);color:var(--mist);
  margin-top:var(--sp-4);
}

/* ── Payment bar ── */
.payment-bar{
  background:var(--forest-mid);
  border-top:1px solid var(--border-gold);
  border-bottom:1px solid var(--border-gold);
  padding:var(--sp-4) 0;
}
.payment-bar__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);flex-wrap:wrap;
}
.payment-bar__text{font-family:var(--font-sub);font-size:var(--text-sm);font-weight:700;color:var(--offwhite);letter-spacing:0.04em;}
.payment-bar__sub{font-size:var(--text-xs);color:var(--mist);}
.payment-bar__price{font-family:var(--font-display);font-size:var(--text-4xl);color:var(--gold);letter-spacing:0.03em;}

/* ── Bump box ── */
.bump-box{
  background:rgba(200,150,62,0.07);
  border:1.5px solid rgba(200,150,62,0.4);
  border-radius:var(--r-xl);
  padding:var(--sp-6) var(--sp-8);
}
.bump-tag{font-family:var(--font-sub);font-size:var(--text-xs);font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--gold-light);margin-bottom:var(--sp-3);}
.bump-header{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-3);}
.bump-title{font-family:var(--font-sub);font-size:var(--text-xl);font-weight:700;color:var(--offwhite);}
.bump-price{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--gold);letter-spacing:0.03em;}

/* ── Divider ── */
hr.divider{height:1px;background:var(--border-gold);border:none;margin-block:var(--sp-12);}

/* ── OTO skip bar ── */
.oto-skip{background:var(--black);border-bottom:1px solid var(--border-mist);padding:var(--sp-2) 0;text-align:center;}
.oto-skip a{font-size:var(--text-xs);color:rgba(122,154,130,0.4);text-decoration:underline;transition:color var(--dur-fast);}
.oto-skip a:hover{color:var(--mist);}

/* ── Reveal — Phase 2 fix ── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.65s var(--ease),transform 0.65s var(--ease);}
.reveal.visible{opacity:1;transform:none;}
/* FIXED delays in milliseconds */
.reveal[data-delay="100"]{transition-delay:100ms;}
.reveal[data-delay="200"]{transition-delay:200ms;}
.reveal[data-delay="300"]{transition-delay:300ms;}
.reveal[data-delay="400"]{transition-delay:400ms;}
.reveal[data-delay="500"]{transition-delay:500ms;}
.reveal[data-delay="600"]{transition-delay:600ms;}

/* ── Footer ── */
.footer{background:var(--forest-deep);border-top:1px solid var(--border-gold);padding-block:var(--sp-12);}
.footer__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:var(--sp-8);}
.footer__logo{font-family:var(--font-sub);font-size:var(--text-lg);font-weight:800;color:var(--offwhite);}
.footer__logo span{color:var(--gold);}
.footer__tagline{font-size:var(--text-sm);color:var(--mist);margin-top:var(--sp-2);max-width:28ch;}
.footer__nav{display:flex;gap:var(--sp-6);justify-content:center;}
.footer__nav a{font-family:var(--font-sub);font-size:var(--text-sm);color:var(--mist);transition:color var(--dur-fast);}
.footer__nav a:hover{color:var(--gold);}
.footer__contact{text-align:right;font-size:var(--text-sm);color:var(--mist);}
.footer__contact a{color:var(--gold-light);transition:color var(--dur-fast);}
.footer__contact a:hover{color:var(--gold);}
.footer__bottom{border-top:1px solid var(--border-mist);margin-top:var(--sp-8);padding-top:var(--sp-6);text-align:center;font-size:var(--text-xs);color:rgba(122,154,130,0.45);}

/* ── SVG Icon circles ── */
.icon-circle{
  width:48px;height:48px;border-radius:50%;
  background:var(--forest);border:1px solid var(--border-gold);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background var(--dur-base),border-color var(--dur-base);
}
.icon-circle svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.card:hover .icon-circle{background:rgba(200,150,62,0.12);border-color:var(--gold);}

/* ── Responsive — Phase 4 mobile fixes ── */
@media (max-width:1024px){
  .container{padding-inline:var(--sp-5);}
}
@media (max-width:768px){
  :root{--nav-h:64px;}
  .container,.container--sm{padding-inline:var(--sp-4);}
  .section{padding-block:var(--sp-16);}
  .section--sm{padding-block:var(--sp-12);}
  .btn--xl{font-size:var(--text-base);padding:var(--sp-4) var(--sp-6);}
  .footer__inner{grid-template-columns:1fr;text-align:center;}
  .footer__contact{text-align:center;}
  .footer__nav{flex-wrap:wrap;justify-content:center;}
  .payment-bar__inner{justify-content:center;text-align:center;}
}
@media (max-width:480px){
  .container,.container--sm{padding-inline:var(--sp-3);}
  .section{padding-block:var(--sp-12);}
  .headline{font-size:clamp(2.5rem,8vw,var(--text-5xl));}
  .btn--xl{font-size:var(--text-sm);padding:var(--sp-3) var(--sp-5);}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;}
  *{transition-duration:0.01ms!important;animation-duration:0.01ms!important;}
}