
:root{
  --black:#0A0A0A;--lime:#C8F542;--white:#FFFFFF;--off:#F5F5F2;
  --b04:rgba(10,10,10,.04);--b08:rgba(10,10,10,.08);--b12:rgba(10,10,10,.12);
  --b24:rgba(10,10,10,.24);--b40:rgba(10,10,10,.40);--b60:rgba(10,10,10,.60);
  --font:"Poppins",ui-sans-serif,sans-serif;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s6:48px;--s8:64px;--s10:80px;--s15:120px;
  --pill:100px;--r:12px;--r-sm:6px
}

/* TOGETHER */
.together{padding:var(--s10) 0;border-bottom:1px solid var(--b08)}
.together-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s8)}
@media(max-width:900px){.together-grid{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.together-grid{grid-template-columns:1fr}}
.together-card{padding:var(--s4);border:1px solid var(--b08);border-radius:var(--r);transition:border-color .25s,background .25s;position:relative;overflow:hidden}
.together-card::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.together-card:hover{border-color:var(--b24);background:var(--off)}
.together-card:hover::after{transform:scaleX(1)}
.together-num{font-size:32px;font-weight:800;letter-spacing:-0.04em;color:var(--lime);line-height:1;margin-bottom:var(--s2);opacity:.25}
.together-title{font-weight:700;font-size:16px;color:var(--black);margin-bottom:var(--s1);letter-spacing:-0.01em}
.together-body{font-size:14px;font-weight:400;line-height:1.7;color:var(--b60)}


/* html{scroll-behavior:smooth} */
/* body{font-family:var(--font);font-size:16px;background:var(--white);color:var(--black);-webkit-font-smoothing:antialiased;overflow-x:hidden} */
/* a{color:inherit;text-decoration:none} */
/* img,video{display:block;max-width:100%;height:auto} */

.t-display{font-weight:800;font-size:clamp(56px,8vw,96px);letter-spacing:-0.04em;line-height:.92}
.t-h2{font-weight:700;font-size:clamp(32px,4vw,52px);letter-spacing:-0.03em;line-height:1.02}
.t-card{font-weight:600;font-size:18px;line-height:1.3}
.t-body{font-weight:400;font-size:17px;line-height:1.75;color:var(--b60)}
.t-eye{font-weight:300;font-size:11px;letter-spacing:5px;text-transform:uppercase}

.stats-band{background:var(--lime);display:grid;grid-template-columns:repeat(3,1fr)}
@media(max-width:640px){.stats-band{grid-template-columns:1fr}}
.stat-cell{padding:var(--s10) var(--s6);border-right:1px solid rgba(10,10,10,.12)}
.stat-cell:last-child{border-right:none}
@media(max-width:768px){.stat-cell{padding:var(--s6) var(--s3)}}
.stat-num{font-weight:800;font-size:clamp(48px,6vw,80px);letter-spacing:-0.04em;line-height:1;color:var(--black)}
.stat-label{font-size:11px;font-weight:300;letter-spacing:5px;text-transform:uppercase;color:rgba(10,10,10,.5);margin-top:var(--s1)}

.btn{display:inline-flex;align-items:center;gap:var(--s1);
  /* font-family:var(--font); */
  font-size:14px;padding:12px 28px;border-radius:var(--pill);cursor:pointer;transition:opacity .2s,transform .15s;white-space:nowrap;border:none}
.btn:hover{opacity:.85;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--lime);color:var(--black);font-weight:700}
.btn-ghost{background:transparent;border:1px solid var(--black);color:var(--black);font-weight:600}
.btn-ghost-inv{background:transparent;border:1px solid rgba(255,255,255,.25);color:var(--white);font-weight:600}
.btn-ghost-inv:hover{border-color:var(--lime);color:var(--lime);opacity:1}
.btn-dark{background:var(--black);color:var(--white);font-weight:700}







/*  */

.stack-section {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #f2f2f2;
  perspective: 1200px;
}

/* The content that blurs out */
.intro-content {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-0%, -50%) !important;
  /* text-align: center; */
  z-index: 1;
  width: 100%;
}

.intro-content h1 {
  font-size: clamp(40px, 8vw, 90px);
  line-height: 1;
  margin-bottom: 1rem;
  color: #111;
}

.intro-content p {
  font-size: 1.2rem;
  color: #555;
}

.stack {
  position: relative;
  width: min(520px, 88vw);
  height: min(600px, 70vh);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  z-index: 2; /* Sits above the intro content */
}

.card {
  min-height: 450px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 28px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  backface-visibility: hidden;
  will-change: transform, opacity;
  transform-origin: 50% 90%;
  background: #dfe7ef;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.card h2 {
  font-size: clamp(30px, 4vw, 50px);
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: #111;
  max-width: 10ch;
}

.card p {
  font-size: 18px;
  line-height: 1.4;
  color: #333;
  max-width: 25ch;
}

.num {
  align-self: flex-end;
  font-size: clamp(40px, 6vw, 70px);
  font-weight: 700;
  color: #111;
}

/* Card Colors */
.card:nth-child(odd) {
  background: #dfe7ef;
}
.card:nth-child(even) {
  background: #e5ecf3;
}

