/* ============================================================
   sections.css — GSV Sales Marketing Site
   Covers: hero, problem, system, assessment, platform,
           advisory, cta-final, footer
   ============================================================ */

/* ── HERO ──────────────────────────────────────────────────── */
.hero {
  height:      100vh;
  background:  var(--white);
  padding-top: var(--nav-h);
  position:    relative;
  overflow:    hidden;
  display:     flex;
  align-items: center;
}

/* Hero with background image (dark theme) */
.hero--dark {
  background: var(--black);
}

/* Background image container */
.hero__bg-image {
  position:    absolute;
  inset:       0;
  background-image: url('assets/hero-images/hero_1.jpeg');
  background-size: cover;
  background-position: center;
  z-index:     0;
}

/* Dark overlay on top of background image */
.hero__overlay {
  position:    absolute;
  inset:       0;
  background:  rgba(0, 0, 0, 0.65);
  z-index:     1;
}

/* Bouncing scroll indicator pinned to hero bottom */
.hero__scroll-cue {
  position:   absolute;
  bottom:     30px;
  left:       50%;
  transform:  translateX(-50%);
  z-index:    2;
  color:      var(--gray-1);
  opacity:    0;
  transition: opacity 0.6s ease, transform 0.6s ease;
  cursor:     pointer;
  display:    flex;
  flex-direction: column;
  align-items:    center;
}
.hero__scroll-cue.visible       { opacity: 0.45; }
.hero__scroll-cue:hover         { opacity: 0.85; }
.hero__scroll-cue svg           { animation: bounce-down 1.8s ease-in-out infinite; }

/* Light variant for dark backgrounds */
.hero__scroll-cue--light {
  color: rgba(255, 255, 255, 0.6);
}
.hero__scroll-cue--light.visible { opacity: 0.6; }
.hero__scroll-cue--light:hover   { opacity: 1; }

@keyframes bounce-down {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(9px); }
}

/* Subtle dot-grid background */
.hero__bg-grid {
  position:    absolute;
  inset:       0;
  background-image:
    radial-gradient(circle, rgba(0,0,0,0.09) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
  z-index:     0;
}

/* Hero — centered single-column layout */
.hero__inner {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  padding-top:     120px;
  padding-bottom:  120px;
  position:        relative;
  z-index:         1;
  width:           100%;
}

/* Main headline */
.hero__headline {
  font-size:     clamp(40px, 5.8vw, 80px);
  font-weight:   900;
  line-height:   1.0;
  letter-spacing:-0.03em;
  color:         var(--black);
  margin-bottom: 28px;
  max-width:     860px;
}

/* Light text variant for dark backgrounds */
.hero__headline--light {
  color: var(--white);
}

.text-accent { color: var(--orange); }

.hero__sub {
  font-size:   19px;
  color:       var(--gray-1);
  line-height: 1.75;
  max-width:   520px;
  margin-bottom: 44px;
}

.hero__subhead {
  font-size:   20px;
  color:       var(--gray-1);
  line-height: 1.6;
  max-width:   640px;
  margin-bottom: 36px;
  font-weight: 400;
}

/* Light text variant for dark backgrounds */
.hero__subhead--light {
  color: rgba(255, 255, 255, 0.85);
}

.hero__actions {
  display:         flex;
  gap:             12px;
  flex-wrap:       wrap;
  justify-content: center;
  margin-bottom:   48px;
}

.hero__proof {
  display:     flex;
  align-items: center;
  gap:         14px;
  font-size:   13px;
  color:       var(--gray-1);
  font-weight: 500;
}
.proof-divider {
  width:      1px; height: 14px;
  background: var(--gray-light);
}

/* ── IMPACT STATEMENT ──────────────────────────────────────── */
.impact-statement {
  min-height:  100vh;
  background:  var(--black-2); /* Dark background matching screenshot */
  display:     flex;
  align-items: center;
  justify-content: center;
  text-align:  center;
  padding:     var(--section-pad) 0;
  position:    relative;
}

.impact-statement__headline {
  font-size:     clamp(36px, 6vw, 84px);
  font-weight:   400; /* Thin/regular to match screenshot */
  line-height:   1.15;
  letter-spacing:-0.03em;
  color:         #bca5ff; /* Pale purple from screenshot */
  max-width:     1200px;
  margin:        0 auto;
}

/* ── PROBLEM ───────────────────────────────────────────────── */
.problem {
  position: relative;
  /* Small bottom padding gives brief pause after card 4 locks before scrolling off */
  padding: 15vh 0 100px 0; 
  background: var(--off-white);
  overflow: clip; /* Prevent large numbers from causing scrollbars */
}

/* Header scrolls naturally with the section - not sticky */
.problem-header {
  margin-bottom: 40px;
  position: relative;
  z-index: 10;
}

.problem-headline {
  font-size:     clamp(36px, 5.5vw, 68px);
  font-weight:   800;
  line-height:   1.1;
  letter-spacing:-0.03em;
  color:         var(--black);
  margin-bottom: 18px;
}

.problem-sub {
  font-size:     17px;
  color:         var(--gray-2);
  max-width:     540px;
  line-height:   1.75;
}

.problem__grid {
  display:    grid;
  grid-template-columns: repeat(4, 1fr);
  gap:        0; /* Flush together to match reference */
  /* Height = last card's margin (1350px) + card height (450px) */
  min-height: 1800px;
}

/* 
  We use the same staggered sticky approach, but they stick near the top.
  The container has enough height so they stay pinned while scrolling.
*/
.problem-card {
  padding:    60px 40px 40px 40px;
  background: var(--off-white); /* Default matching background */
  transition: transform var(--transition);
  position:   sticky;
  top:        0; /* They stick right at the top of the viewport (or slightly below nav) */
  height:     80vh; /* Fill most of the screen vertically */
  display:    flex;
  flex-direction: column;
  overflow:   hidden;
}

/* Cards stick closer to the top of viewport */
.problem-card {
  top: calc(var(--nav-h) + 100px);
  height: calc(100vh - var(--nav-h) - 100px);
  max-height: 450px;
}

/* The giant background number */
.problem-card::after {
  content: attr(data-number);
  position: absolute;
  top: -40px;
  right: -20px;
  font-size: 280px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(0,0,0,0.04);
  z-index: 0;
  pointer-events: none;
}

/* Ensure text is above background numbers */
.problem-card > * {
  position: relative;
  z-index: 1;
}

/* Specific card colors matching reference */
/* Card 1: Light Grey */
.problem-card:nth-child(1) { background: #EBEBE6; color: var(--black); }
.problem-card:nth-child(1)::after { color: rgba(0,0,0,0.05); }

/* Card 2: Green */
.problem-card:nth-child(2) { background: #3FE17A; color: var(--black); }
.problem-card:nth-child(2)::after { color: rgba(0,0,0,0.08); }

/* Card 3: Blue */
.problem-card:nth-child(3) { background: #3551FF; color: var(--white); }
.problem-card:nth-child(3)::after { color: rgba(255,255,255,0.08); }

/* Card 4: Black */
.problem-card:nth-child(4) { background: #161616; color: var(--white); }
.problem-card:nth-child(4)::after { color: rgba(255,255,255,0.05); }


/* Stagger the start positions to create the diagonal slide-up effect */
/* Each card starts where the previous one ends (450px + spacing) */
.problem-card:nth-child(1) { margin-top: 0; }
.problem-card:nth-child(2) { margin-top: 450px; }
.problem-card:nth-child(3) { margin-top: 900px; }
.problem-card:nth-child(4) { margin-top: 1350px; }


/* Typography styling within cards */
.card-number {
  font-size:   32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color:       inherit;
  margin-bottom: 4px;
}
.problem-card h3 {
  font-size:   24px;
  font-weight: 500;
  color:       inherit;
  margin-top:  0;
  margin-bottom: auto; /* Pushes paragraph to bottom */
  letter-spacing: -0.02em;
}
.problem-card p {
  font-size:   15px;
  color:       inherit;
  opacity:     0.85; /* Slightly muted text */
  line-height: 1.6;
  max-width:   90%;
}

/* ── TRUSTED BY / SOCIAL PROOF ─────────────────────────────── */
.trusted-by {
  margin-top: 100px;
  padding-top: 60px;
  border-top: 1px solid var(--gray-light);
}

.trusted-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-2);
  margin-bottom: 32px;
}

.trusted-track {
  display: flex;
  gap: 48px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 8px;
}

.trusted-track::-webkit-scrollbar {
  display: none;
}

.trusted-logo {
  flex-shrink: 0;
  width: 140px;
  height: 50px;
  color: var(--gray-2);
  opacity: 0.7;
  transition: opacity var(--transition), transform var(--transition);
}

.trusted-logo:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.trusted-logo svg {
  width: 100%;
  height: 100%;
}

/* ── SYSTEM ────────────────────────────────────────────────── */
.system__steps {
  display:     flex;
  align-items: stretch;
}
.system-step {
  flex:        1;
  display:     flex;
  gap:         18px;
  padding:     36px 28px;
  border:      1.5px solid var(--gray-light);
}
.step-num {
  width:           38px; height: 38px;
  border-radius:   50%;
  background:      var(--black);
  color:           var(--white);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       13px;
  font-weight:     800;
  flex-shrink:     0;
}
.step-content h3 {
  font-size:     17px;
  font-weight:   700;
  color:         var(--black);
  margin-bottom: 10px;
  letter-spacing:-0.01em;
}
.step-content p {
  font-size:   14px;
  color:       var(--gray-1);
  line-height: 1.75;
  margin-bottom: 14px;
}
.step-tag {
  font-size:   11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:       var(--orange);
}
.step-connector {
  width:       1px;
  background:  var(--gray-light);
  flex-shrink: 0;
}

/* ── ASSESSMENT ────────────────────────────────────────────── */
/* Radial glow */
.section-accent::before {
  content:    '';
  position:   absolute;
  top: -80px; right: -80px;
  width:      480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,90,34,0.14) 0%, transparent 68%);
  pointer-events: none;
}

.assessment__inner {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         80px;
  align-items: center;
  position:    relative;
  z-index:     1;
}
.assessment__headline {
  font-size:     clamp(28px, 3.5vw, 44px);
  font-weight:   800;
  color:         var(--white);
  letter-spacing:-0.02em;
  line-height:   1.1;
  margin-bottom: 30px;
}
.assessment__features { margin-bottom: 36px; }
.assessment__features li {
  display:       flex;
  align-items:   center;
  gap:           10px;
  font-size:     15px;
  color:         rgba(255,255,255,0.65);
  padding:       10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.assessment__features li::before {
  content:     '→';
  color:       var(--orange);
  font-weight: 700;
  flex-shrink: 0;
}

/* Report mockup card */
.report-mockup {
  background:   rgba(255,255,255,0.04);
  border:       1px solid rgba(255,255,255,0.10);
  border-radius:8px;
  padding:      28px;
}
.report-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   22px;
  padding-bottom:  16px;
  border-bottom:   1px solid rgba(255,255,255,0.07);
}
.report-header span:first-child {
  font-size:   12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:       rgba(255,255,255,0.45);
}
.report-score {
  font-size:   24px;
  font-weight: 900;
  color:       var(--white);
  letter-spacing: -0.03em;
}
.bar-item { margin-bottom: 18px; }
.bar-item span {
  display:     block;
  font-size:   12px;
  font-weight: 500;
  color:       rgba(255,255,255,0.45);
  margin-bottom: 7px;
}
.bar {
  width:        100%; height: 4px;
  background:   rgba(255,255,255,0.08);
  border-radius:2px;
  overflow:     hidden;
}
.bar-fill {
  height:       100%;
  width:        0%; /* animated via JS */
  background:   var(--orange);
  border-radius:2px;
  transition:   width 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── PLATFORM ──────────────────────────────────────────────── */
.platform__grid {
  display:    grid;
  grid-template-columns: repeat(3, 1fr);
  gap:        1px;
  background: rgba(255,255,255,0.06);
  border:     1px solid rgba(255,255,255,0.06);
}
.platform-card {
  padding:    38px 30px;
  background: var(--black-2);
  transition: background var(--transition);
}
.platform-card:hover { background: var(--black-3); }
.platform-icon {
  font-size:   22px;
  color:       var(--orange);
  margin-bottom: 16px;
}
.platform-card h3 {
  font-size:   17px;
  font-weight: 700;
  color:       var(--white);
  margin-bottom: 10px;
  letter-spacing:-0.01em;
}
.platform-card p {
  font-size:   14px;
  color:       rgba(255,255,255,0.43);
  line-height: 1.75;
}

/* ── ADVISORY ──────────────────────────────────────────────── */
.advisory__inner {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         100px;
  align-items: start;
}
.lee-quote {
  font-size:   17px;
  line-height: 1.75;
  color:       var(--gray-2);
  border-left: 3px solid var(--orange);
  padding-left:22px;
  margin:      22px 0 30px;
  font-style:  italic;
}
.lee-byline {
  display:     flex;
  align-items: center;
  gap:         14px;
  margin-bottom: 30px;
}
.lee-avatar {
  width:           44px; height: 44px;
  border-radius:   50%;
  background:      var(--black);
  color:           var(--white);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       13px;
  font-weight:     700;
  letter-spacing:  0.06em;
  flex-shrink:     0;
}
.lee-byline strong { display: block; font-size: 15px; font-weight: 700; color: var(--black); }
.lee-byline span   { display: block; font-size: 13px; color: var(--gray-1); }

.advisory__scope { margin-bottom: 34px; }
.advisory__scope li {
  display:       flex;
  align-items:   center;
  gap:           10px;
  font-size:     15px;
  color:         var(--gray-2);
  padding:       9px 0;
  border-bottom: 1px solid var(--gray-light);
}
.advisory__scope li::before { content: '→'; color: var(--orange); font-weight: 700; }

/* Advisory dark card */
.advisory-card {
  background:   var(--black);
  color:        var(--white);
  padding:      40px;
  border-radius:var(--radius);
  border:       1px solid rgba(255,255,255,0.06);
}
.ac-label {
  font-size:   11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color:       var(--orange); margin-bottom: 8px;
}
.ac-type { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 24px; }
.ac-divider { height: 1px; background: rgba(255,255,255,0.07); margin-bottom: 24px; }
.ac-list { margin-bottom: 32px; }
.ac-list li {
  display:       flex; align-items: center; gap: 10px;
  font-size:     14px; color: rgba(255,255,255,0.58);
  padding:       10px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ac-list li::before { content: '–'; color: var(--orange); }
.ac-cta {
  font-size:   11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color:       rgba(255,255,255,0.28);
}

/* ── FINAL CTA ─────────────────────────────────────────────── */
.cta-final { 
  min-height: 100vh; 
  display: flex; 
  align-items: center; 
  text-align: center; 
  position: relative; 
  overflow: hidden; 
}
.cta-final::before {
  content:   '';
  position:  absolute;
  bottom: -60px; left: 50%; transform: translateX(-50%);
  width:     640px; height: 340px;
  background:radial-gradient(ellipse, rgba(240,90,34,0.16) 0%, transparent 68%);
  pointer-events: none;
}
.cta-final__inner { padding: var(--section-pad) 0; position: relative; z-index: 1; }

.cta-final__headline {
  font-size:     clamp(30px, 4.5vw, 58px);
  font-weight:   900;
  color:         var(--white);
  letter-spacing:-0.03em;
  line-height:   1.1;
  margin:        0 auto 18px;
  max-width:     800px;
}
.cta-final__sub {
  font-size:   18px;
  color:       rgba(255,255,255,0.48);
  margin-bottom: 44px;
}
.cta-final__actions {
  display:         flex;
  gap:             16px;
  justify-content: center;
  flex-wrap:       wrap;
}

/* ── FOOTER ────────────────────────────────────────────────── */
.footer {
  background:   var(--black);
  border-top:   1px solid rgba(255,255,255,0.06);
  padding:      36px 0;
}
.footer__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             24px;
  flex-wrap:       wrap;
}
.footer__logo {
  display:     flex; align-items: center; gap: 10px;
  font-size:   15px; font-weight: 700;
  color:       rgba(255,255,255,0.5);
}
.footer__links { display: flex; gap: 22px; }
.footer__links a {
  font-size:  13px; color: rgba(255,255,255,0.32);
  transition: color var(--transition);
}
.footer__links a:hover { color: rgba(255,255,255,0.65); }
.footer__copy { font-size: 12px; color: rgba(255,255,255,0.22); }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
/* 2-column grid with diagonal scroll animation (intermediate breakpoint) */
@media (max-width: 1200px) {
  /* Problem section - 2x2 grid with diagonal scroll animation */
  .problem__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
  
  .problem-card {
    position: sticky;
    top: calc(var(--nav-h) + 100px);
    height: calc(100vh - var(--nav-h) - 100px);
    max-height: 450px;
    margin-top: 0 !important;
  }
  
  /* Diagonal cascade animation */
  /* Card 1: Top left, visible immediately, locks at upper position */
  .problem-card:nth-child(1) { 
    z-index: 2; 
    margin-top: 0 !important;
    grid-column: 1;
    grid-row: 1;
  }
  
  /* Card 2: Top right, slides up from below, locks side by side with card 1 */
  .problem-card:nth-child(2) { 
    z-index: 2; 
    margin-top: 450px !important;
    grid-column: 2;
    grid-row: 1;
  }
  
  /* Card 3: Slides up, then pauses at same vertical level as Card 1 */
  .problem-card:nth-child(3) { 
    z-index: 4; /* On top of card 1 */
    grid-column: 1;
    grid-row: 2;
    /* Start scrolling with Card 2 */
    margin-top: 450px !important;
    /* Lock at same vertical position as Card 1 (top row) */
    position: sticky;
    top: calc(var(--nav-h) + 100px) !important;
  }
  
  /* Card 4: Slides up after Card 3, locks at same level as Card 3, overlaps Card 2 */
  .problem-card:nth-child(4) { 
    z-index: 4; /* On top of card 2 */
    grid-column: 2;
    grid-row: 2;
    /* Start scrolling one card-height after Card 3 */
    margin-top: 900px !important;
    /* Lock at same lower vertical position as Card 3 */
    top: calc(var(--nav-h) + 100px + 450px - 60px) !important;
    /* Overlap into card 3 by 60px */
    margin-left: -60px;
  }
}

/* 2-column static masonry (smaller tablets) */
@media (max-width: 900px) {
  .hero__inner       { padding-top: 80px; padding-bottom: 80px; }
  .assessment__inner { grid-template-columns: 1fr; gap: 52px; }
  .advisory__inner   { grid-template-columns: 1fr; gap: 56px; }
  .system__steps     { flex-direction: column; }
  .step-connector    { width: auto; height: 1px; }
  
  /* Problem section - static 2 column masonry */
  .problem__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
  
  .problem-card {
    position: relative; /* Remove sticky */
    top: auto;
    height: auto;
    min-height: 350px;
    max-height: 500px;
    margin-top: 0 !important;
  }
  
  /* Static overlap effect */
  .problem-card:nth-child(1) { z-index: 4; }
  .problem-card:nth-child(2) { 
    z-index: 3; 
    margin-left: -40px;
    margin-top: 0 !important;
  }
  .problem-card:nth-child(3) { 
    z-index: 2; 
    margin-top: -40px !important;
  }
  .problem-card:nth-child(4) { 
    z-index: 1; 
    margin-left: -40px;
    margin-top: -40px !important;
  }
}

/* 1-column with overlap */
@media (max-width: 768px) {
  .problem__grid { 
    grid-template-columns: 1fr; 
    margin: 0;
    gap: -20px;
  }
  
  .problem-card {
    position: static; 
    margin-top: 0 !important;
    min-height: 350px;
    max-height: 500px;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Stack with vertical overlap */
  .problem-card:nth-child(2),
  .problem-card:nth-child(3),
  .problem-card:nth-child(4) {
    margin-top: -60px !important;
  }
  
  /* Z-index for proper stacking */
  .problem-card:nth-child(1) { z-index: 4; }
  .problem-card:nth-child(2) { z-index: 3; }
  .problem-card:nth-child(3) { z-index: 2; }
  .problem-card:nth-child(4) { z-index: 1; }
  
  .problem-header { position: static; margin-bottom: 40px; }
  .problem        { padding: var(--section-pad) 0; }
  
  .footer__inner  { flex-direction: column; text-align: center; }
  .hero__headline { letter-spacing: -0.02em; }
  .hero__inner    { padding-top: 60px; padding-bottom: 60px; }
}

@media (max-width: 480px) {
  .hero__actions      { flex-direction: column; width: 100%; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .cta-final__actions { flex-direction: column; align-items: center; }
}