/* ======================================================
   PAGE
====================================================== */

body{
  background:#151518;
  color:#fff;
  overflow-x:hidden;
}


/* ======================================================
   TESTIMONIAL HERO
====================================================== */

.testimonial-hero{
  padding:320px 8% 260px;
  background:#151518;
  position:relative;
  overflow:hidden;
}

.testimonial-hero-content{
  max-width:820px;
  margin:0;
}

.testimonial-label{
  display:inline-block;
  margin-bottom:22px;
  font-family:'Inter',sans-serif;
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  opacity:.4;
}

.testimonial-hero h1{
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-weight:500;
  font-size:96px;
  line-height:1.1;
  margin-bottom:38px;
}

.testimonial-hero p{
  font-family:'Inter',sans-serif;
  font-size:18px;
  opacity:.6;
  line-height:1.8;
}


/* ======================================================
   TESTIMONIAL HERO — IPHONE
====================================================== */

@media(max-width:600px){

  .testimonial-hero{
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:110px 7% 90px;
    text-align:center;
  }

  .testimonial-hero-content{
    max-width:100%;
    margin:0 auto;
  }

  .testimonial-label{
    font-size:12px;
    letter-spacing:3px;
    margin-bottom:24px;
  }

  .testimonial-hero h1{
    font-size:50px;
    line-height:1.02;
    margin-bottom:30px;
  }

  .testimonial-hero p{
    font-size:17px;
    line-height:1.75;
    max-width:360px;
    margin:0 auto;
  }

}


/* ======================================================
   TESTIMONIAL HERO — IPAD PRO PORTRAIT
====================================================== */

@media (min-width:601px) and (max-width:1024px){

  .testimonial-hero{
    min-height:84svh;
    display:flex;
    align-items:center;
    padding:140px 7% 120px;
  }

  .testimonial-hero-content{
    max-width:760px;
    margin:0;
  }

  .testimonial-hero h1{
    font-size:82px;
    line-height:1.05;
    margin-bottom:28px;
  }

  .testimonial-hero p{
    font-size:20px;
    line-height:1.75;
    max-width:650px;
  }

}


/* ======================================================
   TESTIMONIAL HERO — IPAD PRO LANDSCAPE
====================================================== */

@media (min-width:1025px) and (max-width:1400px){

  .testimonial-hero{
    min-height:86svh;
    display:flex;
    align-items:center;
    padding:350px 7%;
  }

  .testimonial-hero-content{
    max-width:800px;
    margin:0;
  }

  .testimonial-hero h1{
    font-size:90px;
    line-height:1.05;
    margin-bottom:30px;
  }

  .testimonial-hero p{
    font-size:20px;
    line-height:1.75;
    max-width:680px;
  }

}


/* ======================================================
   FEATURED TESTIMONIAL
====================================================== */

.featured-testimonial{
  padding:0 8% 220px;
}

.featured-testimonial-inner{
  max-width:1100px;
}

.featured-tag{
  display:inline-block;
  margin-bottom:24px;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  opacity:.4;
}

.featured-testimonial blockquote{
  max-width:900px;
  font-size:38px;
  line-height:1.4;
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-weight:300;
  color:rgba(255,255,255,.92);
  margin-bottom:40px;
}

.featured-client h3{
  font-size:18px;
  font-weight:600;
  margin-bottom:6px;
}

.featured-client span{
  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}


/* ======================================================
   TESTIMONIAL GRID
====================================================== */

.testimonial-grid-section{
  padding:120px 8% 220px;
}

.testimonial-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}

.testimonial-card{
  position:relative;
  overflow:hidden;

  padding:50px;

  border-radius:28px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.01)
    );

  border:1px solid rgba(255,255,255,.08);

  transition:
    all .4s cubic-bezier(.22,.61,.36,1);
}

.testimonial-card::before{
  content:"";

  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at top left,
      rgba(255,255,255,.05),
      transparent 45%
    );

  opacity:0;

  transition:.4s ease;
}

.testimonial-card:hover{
  transform:translateY(-10px);

  border-color:rgba(255,255,255,.18);

  box-shadow:0 40px 80px rgba(0,0,0,.6);
}

.testimonial-card:hover::before{
  opacity:1;
}

.testimonial-rating{
  margin-bottom:24px;

  font-size:13px;

  letter-spacing:4px;

  color:rgba(255,255,255,.75);
}

.testimonial-card p{
  font-size:18px;

  line-height:1.9;

  opacity:.85;

  margin-bottom:40px;
}

.testimonial-meta h4{
  font-size:18px;
  font-weight:600;

  margin-bottom:8px;
}

.testimonial-meta span{
  font-size:12px;

  letter-spacing:2px;

  text-transform:uppercase;

  opacity:.45;
}

/* ======================================================
   WHY CLIENTS CHOOSE VOID GROWTH
====================================================== */

.values-section{
  padding:220px 8%;
}


/* ================= HEADER ================= */

.values-header{
  max-width:900px;

  margin-bottom:100px;
}

.values-label{
  display:inline-block;

  margin-bottom:24px;

  font-size:12px;

  letter-spacing:3px;

  text-transform:uppercase;

  opacity:.45;
}

.values-header h2{
  font-family:'Playfair Display',serif;

  font-size:64px;

  line-height:1;
}


/* ================= GRID ================= */

.values-grid{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:30px;
}


/* ================= CARD ================= */

.value-card{
  padding:50px;

  border-radius:28px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.01)
    );

  border:1px solid rgba(255,255,255,.08);

  opacity:.35;

  transform:translateY(20px);

  transition:
    opacity .8s ease,
    transform .8s ease,
    border-color .4s ease,
    box-shadow .4s ease;
}

.value-card.active{
  opacity:1;

  transform:translateY(0);
}

.value-card:hover{
  transform:translateY(-10px);

  border-color:rgba(255,255,255,.18);

  box-shadow:0 40px 80px rgba(0,0,0,.6);
}


/* ================= NUMBER ================= */

.pillar-number{
  display:block;

  margin-bottom:24px;

  font-size:13px;

  letter-spacing:3px;

  opacity:.35;
}


/* ================= TITLE ================= */

.value-card h3{
  font-size:24px;

  margin-bottom:20px;
}


/* ================= TEXT ================= */

.value-card p{
  font-size:15px;

  line-height:1.9;

  opacity:.65;
}


/* ================= STAGGER ================= */

.value-card:nth-child(1){
  transition-delay:0s;
}

.value-card:nth-child(2){
  transition-delay:.15s;
}

.value-card:nth-child(3){
  transition-delay:.3s;
}


/* ================= RESPONSIVE ================= */

@media(max-width:1000px){

  .values-grid{
    grid-template-columns:1fr;
  }

  .values-header h2{
    font-size:52px;
  }

}


/* ======================================================
   FINAL CTA
====================================================== */

.final-cta{
  position:relative;

  padding:240px 8%;

  text-align:center;

  overflow:hidden;
}

.cta-glow{
  position:absolute;

  left:50%;
  top:50%;

  width:700px;
  height:700px;

  transform:translate(-50%,-50%);

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.08),
      transparent 70%
    );
}

.final-cta-content{
  position:relative;
  z-index:2;
}

.cta-label{
  display:inline-block;

  margin-bottom:24px;

  font-size:12px;
  letter-spacing:3px;

  opacity:.45;
}

.final-cta h2{
  font-family:'Playfair Display',serif;

  font-size:92px;

  line-height:.95;

  margin-bottom:50px;
}

.final-cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:62px;

  padding:0 34px;

  border-radius:999px;

  border:1px solid rgba(255,255,255,.12);

  color:#fff;
  text-decoration:none;

  transition:.4s ease;
}

.final-cta-btn:hover{
  background:#fff;
  color:#000;

  transform:translateY(-3px);
}


/* ======================================================
   RESPONSIVE
====================================================== */


/* ======================================================
   IPHONE
====================================================== */

@media (max-width:600px){

  .testimonial-label{
    margin-bottom:28px;
    font-size:11px;
    letter-spacing:3px;
  }

  .testimonial-grid{
    grid-template-columns:1fr;
  }

  .featured-testimonial{
    padding:0 8% 180px;
  }

  .featured-testimonial blockquote{
    font-size:38px;
  }

  .values-grid{
    grid-template-columns:1fr;
  }

  .values-header h2{
    font-size:52px;
  }

  .client-values{
    grid-template-columns:1fr;
  }

  .trust-strip{
    grid-template-columns:1fr;
    gap:100px;
  }

  .trust-item h2{
    font-size:72px;
  }

  .final-cta h2{
    font-size:48px;
  }

}


/* ======================================================
   IPAD PRO PORTRAIT
====================================================== */

@media (min-width:601px) and (max-width:1024px){

  .testimonial-label{
    margin-bottom:32px;
    font-size:12px;
    letter-spacing:4px;
  }

  .featured-testimonial{
    padding:0 64px 200px;
  }

  .featured-testimonial blockquote{
    font-size:52px;
  }

  .testimonial-grid{
    grid-template-columns:1fr 1fr;
  }

  .values-grid{
    grid-template-columns:1fr;
  }

  .values-header h2{
    font-size:52px;
  }

  .client-values{
    grid-template-columns:1fr;
  }

  .trust-strip{
    grid-template-columns:1fr;
    gap:100px;
  }

  .final-cta h2{
    font-size:62px;
  }

}


/* ======================================================
   IPAD PRO LANDSCAPE
====================================================== */

@media (min-width:1025px) and (max-width:1400px){

  .testimonial-label{
    margin-bottom:32px;
  }

  .featured-testimonial{
    padding:0 88px 220px;
  }

  .featured-testimonial blockquote{
    font-size:52px;
  }

  .testimonial-grid{
    grid-template-columns:1fr 1fr;
  }

  .values-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .client-values{
    grid-template-columns:1fr;
  }

  .trust-strip{
    grid-template-columns:1fr;
    gap:100px;
  }

  .final-cta h2{
    font-size:62px;
  }

}


/* ======================================================
   MACBOOK / LAPTOP
====================================================== */

@media (min-width:1401px) and (max-height:900px){

  .testimonial-label{
    margin-bottom:30px;
  }

  .featured-testimonial{
    padding:0 94px 220px;
  }

  .featured-testimonial blockquote{
    font-size:52px;
  }

  .testimonial-grid{
    grid-template-columns:1fr 1fr;
  }

  .values-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .client-values{
    grid-template-columns:1fr;
  }

  .trust-strip{
    grid-template-columns:1fr;
    gap:100px;
  }

  .final-cta h2{
    font-size:62px;
  }

}


/* ======================================================
   LARGE DESKTOP
====================================================== */

@media (min-width:1401px) and (min-height:901px){

  .featured-testimonial blockquote{
    font-size:38px;
  }

  .testimonial-grid{
    grid-template-columns:1fr 1fr;
  }

  .values-grid{
    grid-template-columns:repeat(3,1fr);
  }

}