@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");
*{box-sizing:border-box;margin:0;padding:0}
:root{--dark:#060b14;--dark2:#0b1320;--lime:#d9ff3f;--purple:#6542f4;--ink:#0b1220;--muted:#78808b;--line:#e7e8ec;--max:1280px}
html{scroll-behavior:auto}body{font-family:"DM Sans",sans-serif;color:var(--ink);overflow-x:hidden;background:#fff}.noise{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{text-decoration:none;color:inherit}.wrap{width:min(var(--max),calc(100% - 96px));margin:auto}.section{position:relative}.section-dark,.dark{background:var(--dark);color:#fff}.white{background:#fff}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:800;color:#8f98a4;margin-bottom:15px}.eyebrow.purple{color:var(--purple)}.eyebrow.lime{color:var(--lime)}
h1,h2,h3{font-family:"Manrope",sans-serif}h2{font-size:clamp(42px,5vw,65px);line-height:.98;letter-spacing:-3.2px}.center{text-align:center}.center>p{font-size:10px;color:#808792;margin-top:9px}
.hand{font-family:"Permanent Marker","Comic Sans MS",cursive;font-weight:400;line-height:1.08}
.site-nav{position:fixed;z-index:1000;top:0;left:50%;transform:translateX(-50%);width:min(1320px,calc(100% - 58px));height:72px;display:flex;align-items:center;justify-content:space-between;color:#fff;transition:.3s}.site-nav.scrolled{height:58px;padding:0 17px;background:rgba(6,11,20,.78);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(18px);border-radius:999px}.logo{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800}.logo-mark{width:23px;height:23px;border:1.5px solid #8064ff;border-radius:6px;display:grid;place-items:center;color:#927aff;font-size:12px}.desktop-nav{display:flex;gap:32px;font-size:10px;color:#adb5c0}.mini-cta,.primary-btn{display:inline-flex;align-items:center;background:var(--lime);color:#11170c;border-radius:999px;font-weight:800}.mini-cta{font-size:9px;padding:11px 17px}.mini-cta span,.primary-btn b,.dark-btn b,.outline-btn b{margin-left:8px}
.hero{min-height:760px;padding:125px 0 65px;overflow:hidden}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(to bottom,#000,transparent)}.hero-glow{position:absolute;border-radius:50%;filter:blur(120px);opacity:.15}.glow-green{width:500px;height:500px;right:-120px;top:170px;background:#78ff42}.glow-purple{width:430px;height:430px;left:-170px;top:160px;background:#6941ff}.hero-layout{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:600px;align-items:center}.hero-copy{position:relative;z-index:4}.hero-note{position:absolute}.note-one{top:-42px;left:0;font-size:13px;color:#c7cbd2}.hero h1{font-size:clamp(62px,6.5vw,92px);line-height:.9;letter-spacing:-5px}.hero h1 span{color:var(--lime);position:relative}.hero-lead{max-width:510px;color:#aab2bd;font-size:15px;line-height:1.65;margin-top:27px}.hero-actions{display:flex;align-items:center;gap:18px;margin-top:27px}.primary-btn{padding:14px 20px;font-size:12px}.price-inline{font-size:16px;color:#a2aab5}.price-inline strong{color:#fff}.price-inline del{color:#59616d;margin-left:4px}.micro-benefits{display:flex;gap:21px;margin-top:27px;color:#8b94a0;font-size:12px}.trust-row{display:flex;align-items:center;gap:9px;margin-top:23px;color:#7f8894;font-size:12px}.avatar-stack{display:flex}.avatar-stack i{font-style:normal;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#ddd;border:2px solid var(--dark);margin-left:-5px}.avatar-stack i:first-child{margin-left:0}.scroll-cue{display:flex;gap:7px;align-items:center;color:#626c78;font-size:9px;margin-top:35px}.hero-product{height:570px;position:relative}.hero-product .note-two{top:3px;left:48px;color:#d4d9ad;font-size:13px}.hero-product .note-two b{display:block;font-size:26px;margin-left:52px}.hero-side{position:absolute;right:5px;top:84px;color:#e1e4e8;font-size:12px;z-index:5}.hero-book{position:absolute;z-index:4;width:351px;left:50%;top:65px;transform:translateX(-50%) rotate(5deg);filter:drop-shadow(-20px 28px 24px rgba(0,0,0,.5))}.hero-sheet{position:absolute;z-index:3;width:245px}.sheet-left{left:-10px;top:190px;transform:rotate(5deg)}.sheet-right{right:2px;top:200px;transform:rotate(-8deg)}.hero-tag{position:absolute;z-index:6;width:141px;right:-17px;bottom:36px;transform:rotate(8deg);filter:drop-shadow(0 15px 12px rgba(0,0,0,.5))}
/* .familiar{padding:70px 0 74px}.familiar h2 span,.roadmap h2 span{color:var(--purple)}.familiar-layout{display:grid;grid-template-columns:1fr 190px;gap:68px;margin-top:38px}.pain-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.pain-grid article{display:flex;gap:15px;align-items:center;padding:18px 20px;border:1px solid #eceef1;border-radius:12px;box-shadow:0 7px 25px rgba(0,0,0,.035)}.pain-grid article>b{font-size:21px}.pain-grid strong{font-size:10px;display:block}.pain-grid small{display:block;color:#7f8790;font-size:9px;margin-top:3px}.side-note{font-size:15px;align-self:center}.side-note b{display:block;font-size:27px;margin-left:26px} */
/* .roadmap{padding:35px 0 92px}.roadmap-head{display:flex;justify-content:space-between}.roadmap-head>div:first-child{max-width:690px}.roadmap-head p{color:#7d858e;font-size:10px;line-height:1.5;margin-top:14px}.roadmap-note{margin-right:65px;font-size:14px}.roadmap-note b{display:block;font-size:27px}.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:55px}.steps article{padding:22px 20px;border-top:1px solid #e5e7eb}.step-icon{width:39px;height:39px;display:grid;place-items:center;color:var(--purple);border:1px solid #dcd7ff;border-radius:50%;font-size:17px;margin-bottom:18px}.steps small{font-size:8px;color:#9097a0}.steps h3{font-size:15px;margin-top:5px}.steps p{font-size:9px;color:#7b838d;line-height:1.45;max-width:165px;margin-top:5px} */
/* .inside{padding:86px 0 94px;overflow:hidden}.inside:after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-190px;top:100px;background:#70ff46;filter:blur(150px);opacity:.07}.inside-layout{display:grid;grid-template-columns:.88fr 1.12fr;gap:45px;align-items:center}.inside-copy h2{font-size:clamp(44px,5vw,66px)}.inside-copy h2 span{color:var(--lime)}.inside-copy>p{font-size:10px;color:#89939e;margin-top:8px}.inside-copy ul{list-style:none;margin-top:23px}.inside-copy li{font-size:9px;color:var(--lime);padding:6px 0}.inside-copy li span{color:#c0c7cf;margin-left:5px}.outline-btn{display:inline-flex;align-items:center;border:1px solid #39434e;border-radius:99px;padding:10px 15px;color:#fff;font-size:9px;font-weight:700;margin-top:14px}.inside-art{position:relative;height:430px}.inside-note{position:absolute;right:7px;top:-7px;color:#cfd5b0;font-size:12px;z-index:10}.inside-note b{display:block;font-size:25px;margin-left:-20px}.doc{position:absolute;width:155px;filter:drop-shadow(0 22px 18px rgba(0,0,0,.35))}.doc1{left:35px;top:70px;transform:rotate(-8deg)}.doc2{left:170px;top:30px;transform:rotate(1deg);z-index:3}.doc3{right:25px;top:65px;transform:rotate(8deg)}.doc4{left:75px;top:215px;transform:rotate(-5deg);z-index:4}.doc5{left:210px;top:205px;transform:rotate(4deg);z-index:5}.doc6{right:48px;top:220px;transform:rotate(8deg);z-index:4} */
/* .story{padding:0 0 75px}.story-card{height:390px;border-radius:0;position:relative;overflow:hidden;background:#09101b}.story-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.story-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,7,13,.1),rgba(3,7,13,.25) 40%,rgba(3,7,13,.85))}.story-note{position:absolute;left:38px;top:24px;color:#d3d8b2;font-size:13px}.story-note b{display:block;font-size:26px;margin-left:50px}.story-copy{position:absolute;right:7%;top:75px;color:#fff;width:42%}.quote{font-family:"Manrope";font-size:28px;line-height:1.08}.story-brand{display:flex;align-items:center;gap:8px;font-size:9px;margin-top:15px}.story-line{height:1px;background:#7e862d;width:100%;margin-top:62px}.story-metrics{display:flex;justify-content:space-between;margin-top:12px;color:#9aa3ae;font-size:8px}.story-metrics span{display:flex;flex-direction:column}.story-metrics b{color:#d8df67;font-size:7px;margin-bottom:3px} */
/* .reviews{padding:70px 0 75px}.review-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:39px}.review-grid article{background:#f7f7f6;border-radius:12px;padding:19px}.review-top{display:flex;align-items:center;gap:8px}.review-top i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#ddd;font-style:normal}.review-top span{color:#f1a800;font-size:9px;letter-spacing:1px}.review-grid p{font-size:9px;color:#626a74;line-height:1.5;min-height:82px;margin-top:15px}.review-grid b{font-size:9px;display:block}.review-grid small{font-size:8px;color:#9ba0a7} */
/* .pricing{background:#f5f1ff;padding:68px 0 78px;overflow:hidden}.pricing:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(105,65,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(105,65,255,.035) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,transparent,#000,transparent)}.pricing-layout{position:relative;display:grid;grid-template-columns:1fr 310px 1fr;gap:42px;align-items:center;margin-top:38px}.pricing-note{text-align:center;font-size:15px}.pricing-note b{display:block;font-size:28px}.price-card{background:#fff;border:1px solid #dfe4c7;border-radius:11px;padding:28px 24px 20px;box-shadow:0 24px 60px rgba(36,22,90,.12);position:relative}.price-card label{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--lime);border-radius:99px;padding:5px 32px;font-size:8px;font-weight:900;white-space:nowrap}.amount{font-family:"Manrope";font-size:43px;font-weight:800;letter-spacing:-2px}.amount del{font-family:"DM Sans";font-size:12px;color:#9ba0a6;letter-spacing:0;margin-left:5px}.price-card ul{list-style:none;margin:12px 0 20px}.price-card li{font-size:9px;color:#646d76;padding:4px 0}.dark-btn{width:100%;border:0;background:var(--dark);color:#fff;border-radius:7px;padding:12px;cursor:pointer;font-size:9px;font-weight:800}.benefits{display:grid;gap:17px}.benefits b{font-size:9px}.benefits small{display:block;color:#9198a1;font-size:8px;margin-top:2px} */
/* .faq{padding:68px 0 82px}.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px;margin-top:35px}.faq-item{border:1px solid #dedfe4;border-radius:7px;overflow:hidden}.faq-item button{width:100%;border:0;background:#fff;text-align:left;padding:12px 16px;display:flex;justify-content:space-between;cursor:pointer;font-size:9px;font-weight:700}.faq-item button b{font-size:13px;transition:.3s}.faq-item p{max-height:0;overflow:hidden;padding:0 16px;color:#707882;font-size:9px;line-height:1.5;transition:.35s}.faq-item.active p{max-height:100px;padding:0 16px 12px}.faq-item.active button b{transform:rotate(45deg)} */
/* .final-cta{min-height:420px;position:relative;display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden;background:var(--dark)}.final-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.final-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,9,15,.45),rgba(5,9,15,.35),rgba(5,9,15,.6))}.final-content{position:relative;z-index:2}.final-content h2{font-size:clamp(42px,5vw,63px)}.final-content h2 span{color:var(--lime)}.final-content p{max-width:430px;margin:14px auto 22px;color:#b0b8c2;font-size:10px;line-height:1.5}.final-note{position:absolute;z-index:2;right:8%;top:75px;font-size:14px;color:#e0e3c4;text-align:left} */
/* footer{background:var(--dark);color:#fff;border-top:1px solid #1d2630}.footer-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between}.footer-links{display:flex;gap:22px;color:#7f8792;font-size:8px}.socials{display:flex;gap:13px;color:#9ba3ae;font-size:10px}.footer-inner small{font-size:8px;color:#737c87} */

@media(max-width:1050px){.wrap{width:calc(100% - 56px)}.hero-layout{grid-template-columns:1fr}.hero-product{margin-top:30px}.inside-layout{grid-template-columns:1fr}.inside-art{margin-top:35px}.pricing-layout{grid-template-columns:1fr 310px 1fr}.familiar-layout{grid-template-columns:1fr}.side-note,.roadmap-note,.pricing-note{display:none} 

.sheet-right {
    right: -36px;
    top: 200px;
    transform: rotate(-2deg);}
  .note-right span,b {
        position: absolute;
        display: inline-block;
        bottom: 1073px;
        right: -10px;}
        .site-nav{width:calc(100% - 28px);height:64px}.desktop-nav{display:none}
      .story-image-label{display:none}
     }
/* @media(max-width:700px){.wrap{width:calc(100% - 34px)}.site-nav{width:calc(100% - 28px);height:64px}.desktop-nav{display:none}.hero{padding-top:105px;min-height:900px}.hero h1{font-size:53px;letter-spacing:-3px}.hero-lead{font-size:11px}.hero-product{height:390px}.hero-book{width:220px;top:45px}.hero-sheet{width:140px}.sheet-left{left:48px;top:145px}.sheet-right{right:0;top:140px}.hero-tag{width:82px;right:2px;bottom:10px}.hero-side{right:-2px;top:45px;font-size:9px}.hero-product .note-two{left:20px;font-size:10px}.micro-benefits{flex-direction:column;gap:6px}.pain-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.inside-art{transform:scale(.75);transform-origin:center top;height:370px;margin:5px -60px -60px}.review-grid{grid-template-columns:1fr}.pricing-layout{grid-template-columns:1fr}.faq-grid{grid-template-columns:1fr}.story-card{height:470px}.story-card>img{object-position:left center}.story-overlay{background:linear-gradient(90deg,rgba(3,7,13,.2),rgba(3,7,13,.9))}.story-copy{width:65%;right:5%;top:70px}.quote{font-size:23px}.final-note{display:none}.footer-inner{flex-wrap:wrap;gap:15px;padding:20px 0}.footer-inner small{display:none}} */
/*@media(max-width:430px){.hero h1{font-size:47px}.steps{grid-template-columns:1fr}.hero-product{transform:scale(.9);transform-origin:center top}.inside-art{transform:scale(.62);margin-left:-95px;margin-right:-95px}.story-copy{width:72%}.story-metrics{gap:10px}.footer-links{gap:12px}} */


/* =========================================
   FAMILIAR SECTION
========================================= */

.familiar-section {
  position: relative;

  min-height: 100vh;

  padding: 110px 0 70px;

  background: #fcfcfb;

  color: #0b1324;

  overflow: hidden;

  isolation: isolate;
}


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

.familiar-grid {
  position: absolute;

  inset: 0;

  z-index: -2;

  background-image:
    linear-gradient(
      rgba(92, 67, 255, 0.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(92, 67, 255, 0.055) 1px,
      transparent 1px
    );

  background-size: 150px 150px;

  pointer-events: none;

  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      black 12%,
      black 88%,
      transparent 100%
    );
}


/* subtle background glow */

.familiar-section::before {
  content: "";

  position: absolute;

  width: 500px;
  height: 500px;

  left: -250px;
  top: 150px;

  background: rgba(102, 73, 255, 0.035);

  filter: blur(100px);

  border-radius: 50%;

  pointer-events: none;
}


/* =========================================
   CONTAINER
========================================= */

.familiar-container {
  position: relative;

  width: min(1440px, calc(100% - 120px));

  margin: auto;
}


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

.familiar-header {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  position: relative;

  z-index: 5;
}


/* =========================================
   EYEBROW
========================================= */

.familiar-eyebrow {
  display: flex;

  align-items: center;

  gap: 13px;

  color: #6040f4;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: .27em;
}

.familiar-eyebrow span {
  width: 3px;

  height: 25px;

  background: #6243f5;

  display: block;
}


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

.familiar-title {
  margin-top: 24px;

  display: flex;

  flex-direction: column;

  font-family:
    "Space Grotesk",
    "Inter",
    sans-serif;

  font-size: clamp(
    75px,
    8.4vw,
    82px
  );

  line-height: .79;

  letter-spacing: -.075em;

  font-weight: 500;
}

.familiar-title span:first-child {
  color: #0b1324;
}

.familiar-title span:last-child {
  color: #6240f5;
}


/* =========================================
   HAND DRAWN UNDERLINE
========================================= */

.title-scribble {
  position: relative;

  width: 310px;

  height: 38px;

  margin-top: 23px;
}

.title-scribble i {
  position: absolute;

  display: block;

  height: 3px;

  background: #795cff;

  border-radius: 100%;

  transform-origin: left;
}

.title-scribble i:first-child {
  width: 205px;

  left: 5px;

  top: 13px;

  transform: rotate(-5deg);
}

.title-scribble i:last-child {
  width: 145px;

  left: 80px;

  top: 21px;

  transform: rotate(-1deg);
}


/* =========================================
   INTRO
========================================= */

.familiar-intro {
  margin-top: 43px;

  margin-right: 120px;

  color: #68748b;

  font-size: 17px;

  line-height: 1.55;

  letter-spacing: -.02em;
}


/* =========================================
   MAIN CONTENT
========================================= */

.familiar-content {
  position: relative;

  min-height: 530px;

  margin-top: 35px;
}


/* =========================================
   PAIN CARDS
========================================= */

.pain-card {
  position: absolute;

  width: 470px;

  height: 175px;

  display: flex;

  align-items: center;

  padding: 45px;

  background:
    rgba(255,255,255,.78);

  border: 1px solid rgba(15, 24, 43, .09);

  border-radius: 18px;

  box-shadow:
    0 20px 55px rgba(20, 30, 50, .035);

  transition:
    transform .5s cubic-bezier(.2,.8,.2,1),
    box-shadow .5s ease,
    border-color .5s ease;

  backdrop-filter: blur(4px);
}


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

.pain-card-1 {
  left: 75px;

  top: 40px;

  transform: rotate(-1.8deg);
}

.pain-card-2 {
  left: 788px;

  top: 40px;

  transform: rotate(1.3deg);
}

.pain-card-3 {
  left: 75px;

  top: 366px;

  transform: rotate(1.5deg);
}

.pain-card-4 {
  left: 788px;

  top: 366px;

  transform: rotate(-1.2deg);
}


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

.pain-card-1:hover {
  transform:
    translateY(-8px)
    rotate(-1.8deg);
}

.pain-card-2:hover {
  transform:
    translateY(-8px)
    rotate(1.3deg);
}

.pain-card-3:hover {
  transform:
    translateY(-8px)
    rotate(1.5deg);
}

.pain-card-4:hover {
  transform:
    translateY(-8px)
    rotate(-1.2deg);
}

.pain-card:hover {
  border-color:
    rgba(98, 64, 245, .18);

  box-shadow:
    0 30px 75px rgba(68, 50, 170, .08);
}


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

.card-number {
  position: absolute;

  left: 30px;

  top: 20px;

  color: #8490a4;

  font-size: 13px;

  font-family: "Space Grotesk", sans-serif;
}


/* =========================================
   ICON
========================================= */

.pain-icon {
  width: 64px;
  height: 64px;

  flex-shrink: 0;

  display: grid;

  place-items: center;

  margin-right: 25px;

  border-radius: 17px;

  background: #f0edff;

  border: 1px solid rgba(
    100,
    65,
    245,
    .08
  );

  color: #6442f4;

  font-size: 22px;

  transition:
    transform .4s ease,
    background .4s ease;
}

.pain-card:hover .pain-icon {
  transform:
    scale(1.08)
    rotate(-4deg);

  background: #e8e3ff;
}


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

.pain-text h3 {
  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 18px;

  font-weight: 600;

  letter-spacing: -.025em;

  color: #0a1324;
}

.pain-text p {
  margin-top: 7px;

  color: #718096;

  font-size: 14px;

  line-height: 1.5;
}


/* =========================================
   CENTER STATEMENT
========================================= */

.direction-statement {
  position: absolute;

  left: 50%;

  top: 190px;

  transform:
    translateX(-50%);

  width: 330px;

  text-align: center;

  z-index: 5;
}

.statement-line {
  display: block;

  width: 1px;

  height: 38px;

  margin: 0 auto 12px;

  background: #8d83d0;
}

.direction-statement h3 {
  position: relative;

  display: inline-block;

  padding: 10px 22px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 21px;

  line-height: 1.1;

  letter-spacing: -.04em;

  font-weight: 600;
}


/* purple hand drawn oval */

.direction-statement h3::before {
  content: "";

  position: absolute;

  inset: -8px -18px;

  border: 2px solid #8167ff;

  border-radius: 50%;

  transform:
    rotate(-2deg);

  pointer-events: none;
}

.direction-statement h3::after {
  content: "";

  position: absolute;

  inset: -4px -22px;

  border: 1px solid #aa9bff;

  border-radius: 50%;

  transform:
    rotate(3deg);

  pointer-events: none;
}

.direction-statement strong {
  font-weight: 700;
}

.direction-statement p {
  margin-top: 16px;

  color: #69758a;

  font-size: 14px;
}


/* =========================================
   HANDWRITTEN NOTES
========================================= */

.floating-note {
  position: absolute;

  z-index: 8;

  color: #111a2b;

  font-family:
    "Comic Sans MS",
    "Bradley Hand",
    cursive;

  font-weight: 600;

  line-height: 1.3;

  letter-spacing: -.02em;
}


/* =========================================
   LEFT NOTE
========================================= */

.note-left {
  left: -10px;

  top: 135px;

  width: 160px;

  font-size: 15px;

  color: #68748e;

  transform: rotate(-4deg);
}

.note-left b {
  display: block;

  margin-left: 90px;

  margin-top: 5px;

  font-size: 36px;

  font-weight: 400;

  transform: rotate(-15deg);
}


/* =========================================
   TOP RIGHT NOTE
========================================= */

.note-top-right {
  right: 50px;

  top: 10px;

  color: #6d7891;

  font-size: 15px;

  transform: rotate(-4deg);
}

.note-top-right b {
  display: block;

  margin-left: -25px;

  font-size: 35px;

  transform: rotate(-15deg);
}


/* =========================================
   MAIN RIGHT NOTE
========================================= */

.note-right {
  right: 0;

  top: 223px;

  width: 215px;

  font-size: 20px;

  transform: rotate(-3deg);
}

.note-right span {
  display: inline-block;
}

.note-right span::after {
  content: "";

  display: block;

  width: 125px;

  height: 2px;

  margin-top: 3px;

  margin-left: 5px;

  background: #6845f5;

  transform: rotate(-3deg);
}

.note-right b {
  display: block;

  margin-left: 35px;

  margin-top: 4px;

  font-size: 52px;

  line-height: .7;

  font-weight: 400;
}


/* =========================================
   BOTTOM LEFT NOTE
========================================= */

.note-bottom-left {
  left: -5px;
  top: 496px;


  color: #78839a;

  font-size: 15px;

  transform: rotate(-5deg);
}

.note-bottom-left b {
  position: absolute;

  right: -50px;

  top: 477px;

  font-size: 38px;

  font-weight: 400;
}


/* =========================================
   BOTTOM RIGHT NOTE
========================================= */

.note-bottom-right {
  right: 86px;

  top: 496px;

  color: #77839a;

  font-size: 15px;

  transform: rotate(3deg);
}

.note-bottom-right b {
  position: absolute;

  left: -35px;

  top: 25px;

  font-size: 38px;

  font-weight: 400;
}


/* =========================================
   FOOTER
========================================= */

.familiar-footer {
  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  margin-top: 105px;

  color: #7c879b;

  font-size: 10px;

  letter-spacing: .22em;
}


/* left footer */

.footer-message {
  display: flex;

  align-items: flex-start;

  gap: 17px;
}

.footer-message > span {
  display: block;

  width: 50px;

  height: 1px;

  margin-top: 5px;

  background: #9ca5b5;
}

.footer-message p {
  line-height: 1.6;
}


/* right */

.footer-brand {
  display: flex;

  align-items: center;

  gap: 17px;

  text-align: right;
}

.footer-brand p {
  line-height: 1.6;
}

.footer-brand > span {
  width: 50px;

  height: 1px;

  background: #9ca5b5;
}


/* =========================================
   SECTION MARKER
========================================= */

.section-marker {
  position: absolute;

  right: -35px;

  top: 210px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 15px;

  color: #735de0;
}

.section-marker strong {
  font-size: 11px;

  font-weight: 600;
}

.section-marker span {
  width: 1px;

  height: 60px;

  background: #b9b1e7;
}

.section-marker p {
  writing-mode: vertical-rl;

  font-size: 9px;

  letter-spacing: .42em;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1200px) {

  .familiar-container {
    width: calc(100% - 70px);
  }

  .pain-card {
    width: 410px;
  }

  .pain-card-2 {
    left: 440px;
  }

  .pain-card-4 {
    left: 450px;
  }

  .note-right {
    right: -10px;
  }

  .note-top-right {
    right: 150px;
  }

  .section-marker {
    display: none;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 900px) {

  .familiar-section {
    padding:
      90px 0 60px;
  }

  .familiar-container {
    width:
      calc(100% - 40px);
  }


  /* header */

  .familiar-header {
    display: block;
  }

  .familiar-title {
    font-size:
      clamp(65px, 16vw, 95px);
  }

  .familiar-intro {
    margin:
      40px 0 0;

    font-size: 14px;
  }


  /* content */

  .familiar-content {
    min-height: auto;

    margin-top: 55px;

    display: flex;

    flex-direction: column;
  }


  /* cards become normal */

  .pain-card {
    position: relative;

    left: auto !important;
    top: auto !important;

    width: 100%;

    height: auto;

    min-height: 150px;

    margin-bottom: 20px;

    padding:
      40px 25px 30px;
  }

  .pain-card-1 {
    transform: rotate(-1deg);
  }

  .pain-card-2 {
    transform: rotate(1deg);
  }

  .pain-card-3 {
    transform: rotate(1deg);
  }

  .pain-card-4 {
    transform: rotate(-1deg);
  }


  /* center statement */

  .direction-statement {
    position: relative;

    left: auto;

    top: auto;

    transform: none;

    order: 5;

    width: 100%;

    margin:
      35px 0 50px;
  }


  /* handwritten notes */

  .note-left,
  .note-top-right,
  .note-bottom-left,
  .note-bottom-right {
    display: none;
  }

  .note-right {
    position: relative;

    right: auto;

    top: auto;

    width: 100%;

    order: 6;

    margin:
      20px 0 20px;

    padding-left: 20px;
  }


  /* footer */

  .familiar-footer {
    margin-top: 40px;
  }

  .footer-brand {
    display: none;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .familiar-section {
    padding:
      75px 0 50px;
  }

  .familiar-container {
    width:
      calc(100% - 30px);
  }

  .familiar-eyebrow {
    font-size: 9px;

    letter-spacing: .2em;
  }

  .familiar-title {
    font-size: 58px;
  }

  .title-scribble {
    width: 220px;
  }

  .title-scribble i:first-child {
    width: 150px;
  }

  .title-scribble i:last-child {
    width: 105px;

    left: 55px;
  }

  .pain-icon {
    width: 52px;
    height: 52px;

    margin-right: 17px;

    font-size: 19px;

    border-radius: 14px;
  }

  .pain-text h3 {
    font-size: 15px;
  }

  .pain-text p {
    font-size: 12px;
  }

  .direction-statement h3 {
    font-size: 17px;
  }

  .note-right {
    font-size: 17px;
  }

  .footer-message {
    font-size: 8px;
  }

}
/* =========================================
   ROADMAP
========================================= */

.roadmap {
  position: relative;

  min-height: 100vh;

  padding: 120px 0 90px;

  background: #fcfcfb;

  color: #0b1324;

  overflow: hidden;

  isolation: isolate;
}


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

.roadmap-grid {
  position: absolute;

  inset: 0;

  z-index: -2;

  background-image:
    linear-gradient(
      rgba(98, 66, 245, .045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(98, 66, 245, .045) 1px,
      transparent 1px
    );

  background-size: 150px 150px;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 15%,
      black 85%,
      transparent
    );
}


/* =========================================
   WRAPPER
========================================= */

.roadmap-wrap {
  position: relative;
}


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

.roadmap-head {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  position: relative;

  z-index: 10;
}


.roadmap-heading {
  max-width: 900px;
}


.roadmap-heading h2 {
  margin-top: 25px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(65px, 7.3vw, 82px);

  line-height: .86;

  letter-spacing: -.075em;

  font-weight: 600;
}


.roadmap-heading h2 span {
  color: #6542f5;
}


.roadmap-heading p {
  max-width: 600px;

  margin-top: 30px;

  color: #6e7a90;

  font-size: 15px;

  line-height: 1.6;
}


/* =========================================
   HANDWRITTEN NOTE
========================================= */

.roadmap-note {
  position: absolute;

  right: 30px;

  top: 5px;

  width: 150px;

  color: #111827;

  font-size: 17px;

  line-height: 1.25;

  transform: rotate(-3deg);
}


.roadmap-note b {
  display: block;

  margin-top: 5px;

  margin-left: 5px;

  font-size: 40px;

  font-weight: 400;

  transform: rotate(-12deg);
}


/* =========================================
   JOURNEY
========================================= */

.roadmap-journey {
  position: relative;

  height: 600px;

  margin-top: 40px;
}


/* =========================================
   CONNECTING SVG
========================================= */

.journey-line {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  z-index: 1;
}


.journey-path {
  fill: none;

  stroke: #7659f5;

  stroke-width: 1.5;

  stroke-dasharray: 7 9;

  opacity: .35;
}


/* =========================================
   STEP
========================================= */

.roadmap-step {
  position: absolute;

  width: 260px;

  z-index: 5;
}


.step-one {
  left: 0;

  top: 80px;
}


.step-two {
  left: 27%;

  top: 315px;
}


.step-three {
  right: 27%;

  top: 315px;
}


.step-four {
  right: 0;

  top: 80px;
}


/* =========================================
   STEP TOP
========================================= */

.step-top {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 15px;
}


.step-number {
  color: #67738a;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 12px;
}


.step-days {
  color: #8c96a7;

  font-size: 8px;

  letter-spacing: .18em;
}


/* =========================================
   STEP ICON
========================================= */

.step-icon {
  width: 58px;

  height: 58px;

  display: grid;

  place-items: center;

  margin-bottom: 22px;

  color: #6542f5;

  background: #f0edff;

  border: 1px solid
    rgba(101,66,245,.14);

  border-radius: 50%;

  font-size: 18px;

  box-shadow:
    0 10px 30px
    rgba(90,65,220,.06);

  transition:
    transform .4s ease,
    background .4s ease;
}


.roadmap-step:hover .step-icon {
  transform:
    translateY(-5px)
    rotate(-5deg);

  background: #e9e4ff;
}


/* =========================================
   STEP COPY
========================================= */

.step-label {
  display: block;

  margin-bottom: 7px;

  color: #765ce7;

  font-size: 8px;

  font-weight: 600;

  letter-spacing: .2em;
}


.step-copy h3 {
  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 27px;

  line-height: 1;

  letter-spacing: -.04em;

  font-weight: 600;
}


.step-copy p {
  max-width: 240px;

  margin-top: 10px;

  color: #707c91;

  font-size: 12px;

  line-height: 1.6;
}


/* =========================================
   PRODUCT CENTER
========================================= */

.roadmap-product {
  position: absolute;

  left: 50%;

  top: 115px;

  width: 250px;

  height: 330px;

  transform:
    translateX(-50%);

  z-index: 8;

  display: flex;

  justify-content: center;
}


/* =========================================
   ORBIT
========================================= */

.product-orbit {
  position: absolute;

  width: 320px;

  height: 320px;

  top: 0;

  left: 50%;

  transform:
    translateX(-50%);

  border: 1px solid
    rgba(100,66,245,.08);

  border-radius: 50%;
}


.product-orbit::before {
  content: "";

  position: absolute;

  inset: 25px;

  border: 1px dashed
    rgba(100,66,245,.08);

  border-radius: 50%;
}


/* =========================================
   BOOK SHADOW
========================================= */

.product-shadow {
  position: absolute;

  width: 210px;

  height: 45px;

  left: 50%;

  bottom: 20px;

  transform:
    translateX(-50%);

  background:
    rgba(20,20,30,.13);

  filter: blur(22px);

  border-radius: 50%;
}


/* =========================================
   REAL BOOK PRODUCT
========================================= */

.roadmap-product {
  position: absolute;

  left: 50%;
  top: 95px;

  width: 300px;
  height: 390px;

  transform: translateX(-50%);

  display: flex;
  justify-content: center;
  align-items: flex-start;

  z-index: 8;
}


/* =========================================
   PURPLE ORBIT
========================================= */

.product-orbit {
  position: absolute;

  width: 360px;
  height: 360px;

  left: 50%;
  top: 15px;

  transform: translateX(-50%);

  border: 1px solid
    rgba(101, 66, 245, .09);

  border-radius: 50%;

  pointer-events: none;
}


.product-orbit::before {
  content: "";

  position: absolute;

  inset: 25px;

  border: 1px dashed
    rgba(101, 66, 245, .08);

  border-radius: 50%;
}


/* =========================================
   BOOK GLOW
========================================= */

.book-glow {
  position: absolute;

  width: 230px;
  height: 230px;

  left: 50%;
  top: 90px;

  transform: translateX(-50%);

  background:
    radial-gradient(
      circle,
      rgba(104, 255, 38, .16),
      transparent 68%
    );

  filter: blur(30px);

  z-index: -1;

  pointer-events: none;
}


/* =========================================
   REAL BOOK IMAGE
========================================= */

.roadmap-book-image {
  position: relative;

  width: 285px;
  height: auto;

  display: block;

  z-index: 5;

  filter:
    drop-shadow(
      -12px 18px 0 rgba(8, 13, 18, .12)
    )
    drop-shadow(
      0 30px 45px rgba(8, 12, 20, .25)
    );

  transform:
    rotateZ(-1deg);

  transition:
    transform .7s
    cubic-bezier(.2,.8,.2,1);
}


/* =========================================
   BOOK HOVER
========================================= */

.roadmap-product:hover
.roadmap-book-image {

  transform:
    translateY(-12px)
    rotateZ(1deg)
    scale(1.025);

}


/* =========================================
   CAPTION
========================================= */

.product-caption {

  position: absolute;

  left: 50%;

  bottom: -5px;

  transform:
    translateX(-50%);

  width: 200px;

  text-align: center;

  color: #8992a3;

  font-size: 8px;

  letter-spacing: .3em;

  white-space: nowrap;

}

/* =========================================
   PRODUCT CAPTION
========================================= */

.product-caption {
  position: absolute;

  bottom: -108px;

  width: 100%;

  text-align: center;

  color: #8b91a1;

  font-size: 7px;

  letter-spacing: .28em;
}


/* =========================================
   CENTER GOAL
========================================= */

.roadmap-center-message {
  position: absolute;

  left: 50%;

  top: 597px;

  transform:
    translateX(-50%);

  text-align: center;

  z-index: 10;
}


.roadmap-center-message span {
  display: block;

  color: #7e8798;

  font-size: 8px;

  letter-spacing: .25em;

  margin-bottom: 5px;
}


.roadmap-center-message strong {
  display: block;

  color: #6542f5;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 31px;

  letter-spacing: -.05em;
}


.roadmap-center-message p {
  margin-top: 3px;

  color: #747f93;

  font-size: 10px;
}


/* =========================================
   BOTTOM
========================================= */

.roadmap-bottom {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 20px;

  color: #7d8799;

  font-size: 9px;

  letter-spacing: .2em;
}


.roadmap-bottom-left {
  display: flex;

  align-items: flex-start;

  gap: 15px;
}


.roadmap-bottom-left span {
  width: 50px;

  height: 1px;

  margin-top: 5px;

  background: #a2a9b6;
}


.roadmap-bottom-left p {
  line-height: 1.6;
}


.roadmap-bottom-right {
  color: #6542f5;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

  .roadmap-wrap {
    width: calc(100% - 70px);
  }

  .roadmap-heading h2 {
    font-size: 72px;
  }

  .roadmap-step {
    width: 210px;
  }

  .step-two {
    left: 24%;
  }

  .step-three {
    right: 24%;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 800px) {

  .roadmap {
    padding: 85px 0 60px;
  }

  .roadmap-wrap {
    width: calc(100% - 40px);
  }


  /* Header */

  .roadmap-head {
    display: block;
  }

  .roadmap-heading h2 {
    font-size:
      clamp(55px, 14vw, 75px);
  }

  .roadmap-heading p {
    font-size: 13px;

    margin-top: 25px;
  }

  .roadmap-note {
    display: none;
  }


  /* Journey */

  .roadmap-journey {
    height: auto;

    margin-top: 65px;

    display: flex;

    flex-direction: column;

    gap: 25px;
  }


  .journey-line {
    display: none;
  }


  .roadmap-step {
    position: relative;

    left: auto !important;
    right: auto !important;
    top: auto !important;

    width: 100%;

    padding:
      25px 20px;

    background: rgba(255,255,255,.75);

    border:
      1px solid
      rgba(20,30,50,.08);

    border-radius: 15px;
  }


  /* Product */

  .roadmap-product {
    position: relative;

    left: auto;

    top: auto;

    transform: none;

    order: 5;

    width: 100%;

    height: 380px;

    margin: 20px 0;
  }


  .roadmap-product .product-orbit {
    display: block;
  }


  /* Goal */

  .roadmap-center-message {
    top: auto;

    bottom: 0;
  }


  /* Bottom */

  .roadmap-bottom {
    margin-top: 35px;
  }

  .roadmap-bottom-right {
    display: none;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .roadmap-heading h2 {
    font-size: 53px;
  }

  .roadmap-heading p {
    font-size: 12px;
  }

  .roadmap-step {
    padding: 23px 18px;
  }

  .step-copy h3 {
    font-size: 23px;
  }

  .roadmap-book {
    width: 190px;
    height: 270px;
  }

}
/* =====================================================
   INSIDE
===================================================== */
/* =========================================================
   NEXTYOU — WHAT'S INSIDE
   MOBILE FIRST
   NO ANIMATION
========================================================= */

.inside {
  position: relative;
  isolation: isolate;

  width: 100%;
  min-height: 100vh;

  background: #070c13;
  color: #f7f8fb;

  overflow: hidden;
}


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

.inside-grid-bg {
  position: absolute;
  inset: 0;

  z-index: -2;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );

  background-size: 72px 72px;

  pointer-events: none;
}


/* subtle dark vignette */

.inside::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

  background:
    radial-gradient(
      circle at 72% 45%,
      rgba(170, 255, 40, 0.035),
      transparent 34%
    );

  pointer-events: none;
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.inside-wrap {
  position: relative;

  width: min(
    calc(100% - 32px),
    1440px
  );

  margin-inline: auto;

  padding:
    72px 0
    45px;
}


/* =========================================================
   COPY
========================================================= */

.inside-copy {
  position: relative;
  z-index: 10;

  max-width: 600px;
}


/* =========================================================
   EYEBROW
========================================================= */

.inside .eyebrow {
  display: flex;
  align-items: center;

  gap: 11px;

  color: #caff27;

  font-size: 9px;
  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.25em;
}


.inside .eyebrow::before {
  content: "";

  width: 3px;
  height: 22px;

  flex-shrink: 0;

  background: #caff27;
}


/* =========================================================
   MAIN HEADING
========================================================= */

.inside-copy h2 {
  margin: 22px 0 0;

  font-family:
    "Space Grotesk",
    "Inter",
    sans-serif;

  font-size:
    clamp(58px, 17vw, 100px);

  font-weight: 600;

  line-height: 0.84;

  letter-spacing: -0.075em;
}


.inside-copy h2 span {
  color: #caff27;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.inside-lead {
  max-width: 340px;

  margin: 25px 0 0;

  color: #8c98aa;

  font-size: 14px;

  line-height: 1.55;
}


/* =========================================================
   DIVIDER
========================================================= */

.inside-divider {
  width: 100%;
  height: 1px;

  margin:
    30px 0 0;

  background:
    rgba(255, 255, 255, 0.10);
}


/* =========================================================
   LIST
========================================================= */

.inside-list {
  width: 100%;

  margin: 0;
  padding: 0;

  list-style: none;
}


.inside-list li {
  display: flex;
  align-items: center;

  gap: 14px;

  min-height: 53px;

  padding:
    12px 0;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.065);

  color: #dce2eb;

  font-size: 12px;

  line-height: 1.4;
}


.inside-list li:first-child {
  border-top: none;
}


/* =========================================================
   CHECK ICON
========================================================= */

.inside-list li i {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 19px;
  height: 19px;

  flex-shrink: 0;

  border-radius: 50%;

  background: #caff27;

  color: #070c13;

  font-size: 9px;
  font-weight: 800;
}


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

.inside-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  min-height: 60px;

  margin-top: 30px;

  padding:
    0 22px;

  border:
    1px solid
    rgba(202, 255, 39, 0.45);

  border-radius: 100px;

  background: transparent;

  color: #caff27;

  text-decoration: none;

  font-size: 13px;
  font-weight: 600;

  transition:
    background 0.25s ease,
    color 0.25s ease;
}


.inside-cta i {
  font-size: 16px;
}


.inside-cta:hover {
  background: #caff27;
  color: #070c13;
}


/* =========================================================
   VISUAL AREA
========================================================= */

.inside-visual {
  position: relative;

  width: 100%;
  height: 470px;

  margin-top: 55px;
}


/* =========================================================
   VISUAL LABEL
========================================================= */

.inside-label {
  position: absolute;

  top: 0;
  left: 0;

  display: flex;
  align-items: center;

  gap: 9px;

  color: #667283;

  font-size: 8px;
  font-weight: 500;

  letter-spacing: 0.22em;

  z-index: 20;
}


.inside-label span {
  color: #caff27;
}


/* =========================================================
   ALL RESOURCE IMAGES
========================================================= */

.inside-item {
  position: absolute;

  display: block;

  width: auto;
  height: auto;

  object-fit: contain;

  filter:
    drop-shadow(
      0 18px 28px
      rgba(0, 0, 0, 0.40)
    );
}


/* =========================================================
   MOBILE COLLAGE
========================================================= */

/* MAIN ROADMAP */

.item-roadmap {
  width: 180px;

  top: 42px;
  left: 50%;

  transform:
    translateX(-50%)
    rotate(2deg);

  z-index: 10;
}


/* FREELANCING */

.item-freelancing {
  width: 118px;

  top: 95px;
  left: 0;

  transform: rotate(-7deg);

  z-index: 7;
}


/* CLIENT OUTREACH */

.item-outreach {
  width: 118px;

  top: 105px;
  right: 0;

  transform: rotate(7deg);

  z-index: 7;
}


/* PORTFOLIO */

.item-portfolio {
  width: 118px;

  left: 3%;
  bottom: 52px;

  transform: rotate(5deg);

  z-index: 5;
}


/* AI */

.item-ai {
  width: 118px;

  right: 3%;
  bottom: 45px;

  transform: rotate(-5deg);

  z-index: 5;
}


/* INCOME */

.item-income {
  width: 115px;

  left: 50%;
  bottom: 0;

  transform:
    translateX(-50%)
    rotate(2deg);

  z-index: 8;
}


/* =========================================================
   HANDWRITTEN NOTE
========================================================= */

.inside-note {
  position: absolute;

  top: 15px;
  right: 97px;

  z-index: 30;

  color: #caff27;

  font-size: 12px;

  line-height: 1.25;

  text-align: right;

  transform: rotate(-3deg);
}


.inside-note b {
  display: block;

  margin-top: 3px;

  font-size: 27px;
  font-weight: 400;

  line-height: 1;
}


/* =========================================================
   BOTTOM INFORMATION
========================================================= */

.inside-bottom {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  width: 100%;

  margin-top: 25px;

  padding-top: 20px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.10);
}


.inside-bottom > div {
  display: flex;
  align-items: flex-start;

  gap: 12px;
}


.inside-bottom > div > span {
  display: block;

  width: 35px;
  height: 1px;

  margin-top: 4px;

  background: #687383;
}


.inside-bottom p {
  margin: 0;

  color: #687383;

  font-size: 7px;

  line-height: 1.65;

  letter-spacing: 0.20em;
}


.inside-bottom strong {
  color: #7f8a99;

  font-size: 8px;

  letter-spacing: 0.20em;
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 600px) {

  .inside-wrap {
    width: calc(100% - 64px);

    padding:
      90px 0
      60px;
  }


  .inside-copy h2 {
    font-size: 88px;
  }


  .inside-visual {
    height: 570px;
  }


  .item-roadmap {
    width: 225px;
  }


  .item-freelancing,
  .item-outreach,
  .item-portfolio,
  .item-ai {
    width: 145px;
  }


  .item-income {
    width: 140px;
  }

}


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

@media (min-width: 1000px) {

  .inside-wrap {

    width:
      min(
        calc(100% - 96px),
        1440px
      );

    min-height: 850px;

    padding:
      115px 0
      55px;

    display: grid;

    grid-template-columns:
      39% 61%;

    grid-template-rows:
      1fr auto;

    column-gap: 40px;
  }


  /* -------------------------------------------------------
     LEFT CONTENT
  ------------------------------------------------------- */

  .inside-copy {
    grid-column: 1;
    grid-row: 1;

    align-self: center;

    padding-bottom: 15px;
  }


  .inside-copy h2 {
    font-size:
      clamp(
        78px,
        7vw,
        108px
      );
  }


  .inside-lead {
    margin-top: 28px;

    font-size: 14px;
  }


  .inside-divider {
    margin-top: 34px;
  }


  .inside-list li {
    min-height: 51px;

    font-size: 12px;
  }


  .inside-cta {
    width: 305px;

    min-height: 62px;

    margin-top: 30px;

    padding:
      0 28px;

    font-size: 14px;
  }


  /* -------------------------------------------------------
     RIGHT VISUAL
  ------------------------------------------------------- */

  .inside-visual {
    grid-column: 2;
    grid-row: 1;

    width: 100%;
    height: 650px;

    margin-top: 0;
  }


  /* -------------------------------------------------------
     LABEL
  ------------------------------------------------------- */

  .inside-label {
    top: 10px;
    left: 20px;

    font-size: 8px;
  }


  /* -------------------------------------------------------
     MAIN ROADMAP
  ------------------------------------------------------- */

  .item-roadmap {
    width: 275px;

    top: 80px;
    left: 50%;

    transform:
      translateX(-50%)
      rotate(2deg);
  }


  /* -------------------------------------------------------
     FREELANCING
  ------------------------------------------------------- */

  .item-freelancing {
    width: 180px;

    top: 120px;
    left: 2%;

    transform: rotate(-8deg);
  }


  /* -------------------------------------------------------
     OUTREACH
  ------------------------------------------------------- */

  .item-outreach {
    width: 180px;

    top: 130px;
    right: 0;

    transform: rotate(14deg);
  }


  /* -------------------------------------------------------
     PORTFOLIO
  ------------------------------------------------------- */

  .item-portfolio {
    width: 180px;

    left: 7%;
    bottom: 70px;

    transform: rotate(-7deg);
  }


  /* -------------------------------------------------------
     AI
  ------------------------------------------------------- */

  .item-ai {
    width: 180px;

    right: 7%;
    bottom: 70px;

    transform: rotate(14deg);
  }


  /* -------------------------------------------------------
     INCOME
  ------------------------------------------------------- */

  .item-income {
    width: 170px;

    left: 47%;
    bottom: 15px;

    transform:
      translateX(-50%)
      rotate(7deg);
  }


  /* -------------------------------------------------------
     NOTE
  ------------------------------------------------------- */

  .inside-note {
    top: 0;
    right: 15px;

    font-size: 14px;
  }


  .inside-note b {
    font-size: 31px;
  }


  /* -------------------------------------------------------
     FOOTER
  ------------------------------------------------------- */

  .inside-bottom {
    grid-column: 1 / -1;
    grid-row: 2;

    margin-top: 45px;
  }

}


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

@media (min-width: 1400px) {

  .inside-wrap {
    width:
      min(
        calc(100% - 120px),
        1440px
      );

    grid-template-columns:
      40% 60%;

    column-gap: 55px;
  }


  .inside-copy h2 {
    font-size: 105px;
  }


  .inside-visual {
    height: 670px;
  }


  .item-roadmap {
    width: 300px;

    top: 80px;
  }


  .item-freelancing {
    width: 190px;

    left: 12%;
    top: 125px;
  }


  .item-outreach {
    width: 190px;

    right: 104px;
    top: 130px;
  }


  .item-portfolio {
    width: 190px;

    left: 13%;
    bottom: 109px;
  }


  .item-ai {
    width: 190px;

    right: 13%;
    bottom: 111px;
  }


  .item-income {
    width: 193px;

    bottom: 37px;
  }

}
/* =========================================================
   NEXTYOU — STORY / THE SHIFT
   MOBILE FIRST
   STATIC — NO ANIMATION
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.story {
  position: relative;

  width: 100%;

  background: #f7f7f5;

  color: #080f1d;

  overflow: hidden;
}


/* =========================================================
   WRAPPER
========================================================= */

.story-wrap {
  position: relative;

  width: min(
    calc(100% - 32px),
    1440px
  );

  margin-inline: auto;

  padding:
    60px 0
    35px;
}


/* =========================================================
   TOP BAR
========================================================= */

.story-topbar {
  display: flex;

  align-items: center;
  justify-content: space-between;

  width: 100%;

  margin-bottom: 45px;
}


.story-section-label {
  display: flex;

  align-items: center;

  gap: 9px;

  color: #667182;

  font-size: 9px;

  font-weight: 600;

  letter-spacing: .22em;
}


.story-section-label span {
  color: #9cfa00;
}


.story-section-label b {
  color: #8d96a3;

  font-weight: 400;
}


.story-top-brand {
  display: flex;

  align-items: center;

  gap: 10px;

  color: #727c8b;

  font-size: 8px;

  font-weight: 600;

  letter-spacing: .22em;
}


.story-top-brand i {
  display: block;

  width: 30px;
  height: 1px;

  background: #727c8b;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.story-layout {
  display: flex;

  flex-direction: column;

  gap: 55px;
}


/* =========================================================
   COPY
========================================================= */

.story-copy {
  position: relative;

  z-index: 5;
}


.story-copy h2,
.story-copy h3 {
  margin: 0;

  font-family:
    "Space Grotesk",
    "Inter",
    sans-serif;

  font-weight: 600;

  letter-spacing: -.075em;
}


.story-copy h2 {
  font-size:
    clamp(
      48px,
      13vw,
      85px
    );

  line-height: .88;
}


.story-copy h3 {
  margin-top: 8px;

  font-size:
    clamp(
      48px,
      13vw,
      85px
    );

  line-height: .88;
}


.story-copy h3 span {
  position: relative;

  color: #6542f5;

  z-index: 1;
}


/* underline */

.story-copy h3 span::after {
  content: "";

  position: absolute;

  left: 0;
  right: -5px;

  bottom: -1px;

  height: 7px;

  background: #6542f5;

  border-radius: 100px;

  z-index: -1;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.story-description {
  max-width: 420px;

  margin:
    28px 0 0;

  color: #697586;

  font-size: 14px;

  line-height: 1.6;
}


/* =========================================================
   STEPS
========================================================= */

.story-steps {
  display: grid;

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

  margin-top: 38px;

  border-top:
    1px solid
    rgba(8,15,29,.14);

  border-bottom:
    1px solid
    rgba(8,15,29,.14);
}


.story-step {
  min-height: 105px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 5px;

  padding:
    15px 14px;

  border-right:
    1px solid
    rgba(8,15,29,.12);

  border-bottom:
    1px solid
    rgba(8,15,29,.12);
}


.story-step:nth-child(2n) {
  border-right: none;
}


.story-step:nth-child(3),
.story-step:nth-child(4) {
  border-bottom: none;
}


.story-step-icon {
  width: 24px;
  height: 24px;

  display: flex;

  align-items: center;
  justify-content: flex-start;

  color: #080f1d;

  font-size: 15px;
}


.story-step strong {
  font-size: 10px;

  letter-spacing: .08em;
}


.story-step span {
  color: #7a8492;

  font-size: 10px;
}


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

.story-cta-row {
  display: flex;

  flex-direction: column;

  gap: 20px;

  margin-top: 30px;
}


.story-cta {
  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;
  min-height: 58px;

  padding:
    0 22px;

  border-radius: 100px;

  background: #080f1d;

  color: #fff;

  text-decoration: none;

  font-size: 13px;

  font-weight: 600;

  transition:
    background .25s ease,
    color .25s ease;
}


.story-cta i {
  font-size: 15px;
}


.story-cta:hover {
  background: #9cfa00;

  color: #080f1d;
}


.story-mini-message {
  color: #707b8b;

  font-size: 8px;

  line-height: 1.7;

  letter-spacing: .22em;
}


/* =========================================================
   VISUAL
========================================================= */

.story-visual {
  position: relative;

  width: 100%;

  height: 440px;
}


/* =========================================================
   BACK PANEL
========================================================= */

.story-image-back {
  position: absolute;

  width: 82%;
  height: 78%;

  top: 8%;
  left: 9%;

  background: #e9e9e5;

  border-radius: 12px;

  transform: rotate(-5deg);
}


/* =========================================================
   IMAGE FRAME
========================================================= */

.story-image-frame {
  position: absolute;

  top: 4%;
  left: 8%;

  width: 84%;
  height: 82%;

  overflow: hidden;

  background: #111923;

  border-radius: 8px;

  transform: rotate(2deg);

  box-shadow:
    0 25px 50px
    rgba(8,15,29,.18);
}


.story-image-frame img {
  width: 166%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center;
}


/* =========================================================
   IMAGE GRADIENT
========================================================= */

.story-image-gradient {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(0,0,0,.35)
    );
}


/* =========================================================
   IMAGE NOTE
========================================================= */

.story-image-label {
  position: absolute;

  top: 8%;

  right: 0;

  color: #111927;

  font-size: 12px;

  font-weight: 600;

  line-height: 1.25;

  transform: rotate(-6%deg);

  z-index: 10;
}


.story-image-label span {
  display: block;

  margin-top: 7px;

  font-size: 28px;

  line-height: 1;
}


/* =========================================================
   CIRCLE
========================================================= */

.story-circle {
  position: absolute;

  right: -5px;
  bottom: 8%;

  width: 105px;
  height: 105px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding-left: 22px;

  border-radius: 50%;

  background: #baff16;

  color: #080f1d;

  font-size: 8px;

  font-weight: 700;

  line-height: 1.45;

  letter-spacing: .16em;

  box-shadow:
    0 15px 35px
    rgba(8,15,29,.12);

  z-index: 15;
}


/* =========================================================
   HANDWRITTEN NOTE
========================================================= */

.story-hand-note {
  position: absolute;

  left: 2%;

  bottom: 1%;

  color: #111927;

  font-size: 13px;

  line-height: 1.2;

  transform: rotate(-4deg);

  z-index: 20;
}


.story-hand-note span {
  display: block;

  width: 70px;
  height: 4px;

  margin-top: 8px;

  background: #9cfa00;

  transform: rotate(-2deg);
}


/* =========================================================
   FOOTER
========================================================= */

.story-footer {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  margin-top: 50px;

  padding-top: 20px;

  border-top:
    1px solid
    rgba(8,15,29,.13);
}


.story-footer-left {
  display: flex;

  align-items: flex-start;

  gap: 10px;
}


.story-footer-left > span {
  width: 30px;
  height: 1px;

  margin-top: 4px;

  background: #697586;
}


.story-footer-left p {
  margin: 0;

  color: #7a8492;

  font-size: 7px;

  line-height: 1.6;

  letter-spacing: .2em;
}


.story-footer-center {
  display: none;
}


.story-footer-right {
  color: #7a8492;

  font-size: 7px;

  line-height: 1.7;

  text-align: right;

  letter-spacing: .18em;
}


.story-footer-right span {
  color: #9cfa00;

  margin-right: 5px;
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 650px) {

  .story-wrap {
    width:
      calc(100% - 70px);

    padding:
      80px 0
      50px;
  }


  .story-copy h2,
  .story-copy h3 {
    font-size: 78px;
  }


  .story-visual {
    height: 560px;
  }


  .story-image-frame {
    left: 12%;

    width: 76%;
  }


  .story-image-back {
    left: 13%;

    width: 74%;
  }


  .story-circle {
    right: 7%;

    width: 125px;
    height: 125px;
  }

}


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

@media (min-width: 950px) {

  .story-wrap {
    width:
      min(
        calc(100% - 100px),
        1440px
      );

    padding:
      90px 0
      50px;
  }


  /* -----------------------------------------
     TOP
  ----------------------------------------- */

  .story-topbar {
    margin-bottom: 5px;
  }


  /* -----------------------------------------
     TWO COLUMN
  ----------------------------------------- */

  .story-layout {

    display: grid;

    grid-template-columns:
      52% 48%;

    gap: 0;

    align-items: center;
  }


  /* -----------------------------------------
     COPY
  ----------------------------------------- */

  .story-copy {
    padding-right: 35px;
  }


  .story-copy h2,
  .story-copy h3 {
    font-size:
      clamp(
        65px,
        5.3vw,
        90px
      );
  }


  .story-description {
    max-width: 470px;

    margin-top: 30px;

    font-size: 15px;
  }


  /* -----------------------------------------
     STEPS
  ----------------------------------------- */

  .story-steps {
    grid-template-columns:
      repeat(4, 1fr);

    margin-top: 45px;

    width: 100%;
  }


  .story-step {
    min-height: 105px;

    padding:
      14px 15px;

    border-bottom: none;
  }


  .story-step:nth-child(2n) {
    border-right:
      1px solid
      rgba(8,15,29,.12);
  }


  .story-step:last-child {
    border-right: none;
  }


  /* -----------------------------------------
     CTA
  ----------------------------------------- */

  .story-cta-row {

    flex-direction: row;

    align-items: center;

    gap: 30px;

    margin-top: 35px;
  }


  .story-cta {
    width: 290px;

    min-height: 64px;

    padding:
      0 27px;

    font-size: 14px;
  }


  /* -----------------------------------------
     VISUAL
  ----------------------------------------- */

  .story-visual {
    height: 610px;

    margin-left: 15px;
  }


  .story-image-back {

    width: 77%;
    height: 77%;

    top: 9%;
    left: 11%;

    border-radius: 16px;
  }


  .story-image-frame {

    width: 78%;
    height: 79%;

    top: 5%;
    left: 10%;

    border-radius: 10px;
  }


  .story-image-label {

    top: -5%;
    right: 0;

    font-size: 14px;
  }


  .story-image-label span {
    font-size: 32px;
  }


  .story-circle {

    width: 135px;
    height: 135px;

    right: 1%;
    bottom: 9%;

    padding-left: 28px;

    font-size: 9px;
  }


  .story-hand-note {

    left: 7%;
    bottom: 3%;

    font-size: 15px;
  }


  /* -----------------------------------------
     FOOTER
  ----------------------------------------- */

  .story-footer {
    margin-top: 65px;
  }


  .story-footer-center {
    display: block;

    color: #7a8492;

    font-size: 8px;

    letter-spacing: .22em;
  }

}


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

@media (min-width: 1400px) {

  .story-wrap {
    padding:
      105px 0
      55px;
  }


  .story-layout {
    grid-template-columns:
      51% 49%;
  }


  .story-copy h2,
  .story-copy h3 {
    font-size: 67px;
  }


  .story-description {
    font-size: 15px;
  }


  .story-visual {
    height: 650px;
  }


  .story-image-frame {
    width: 77%;
    height: 80%;
  }


  .story-image-back {
    width: 75%;
    height: 78%;
  }


  .story-circle {
    width: 145px;
    height: 145px;

    font-size: 10px;
  }

}
/* =========================================================
   NEXTYOU — REVIEWS
   MOBILE FIRST
   STATIC / NO ANIMATION
========================================================= */


/* =========================================================
   NEXTYOU REVIEWS
   MOBILE FIRST
   STATIC — NO ANIMATION
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.reviews {
  position: relative;
  overflow: hidden;

  background: #f8f8f6;
  color: #080f1d;
}


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

.reviews-grid-bg {
  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(8, 15, 29, .035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(8, 15, 29, .035) 1px,
      transparent 1px
    );

  background-size: 72px 72px;
}


/* =========================================================
   WRAPPER
========================================================= */

.reviews-wrap {
  position: relative;
  z-index: 2;

  width: calc(100% - 32px);

  max-width: 1420px;

  margin: 0 auto;

  padding:
    70px 0
    35px;
}


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

.reviews-header {
  position: relative;

  display: flex;
  flex-direction: column;

  gap: 30px;
}


/* =========================================================
   EYEBROW
========================================================= */

.reviews .eyebrow {
  display: flex;
  align-items: center;

  gap: 10px;

  color: #6240ff;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: .24em;
}

.reviews .eyebrow::before {
  content: "";

  width: 3px;
  height: 21px;

  background: #6240ff;
}


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

.reviews-title h2 {

  margin:
    20px 0 0;

  font-family:
    "Space Grotesk",
    "Inter",
    sans-serif;

  font-size:
    clamp(
      52px,
      14vw,
      78px
    );

  line-height: .9;

  letter-spacing: -.075em;

  font-weight: 600;
}

.reviews-title h2 span {
  color: #6240ff;
}


/* =========================================================
   INTRO
========================================================= */

.reviews-intro {
  max-width: 360px;
}

.reviews-intro > p {

  margin: 0;

  color: #617087;

  font-size: 14px;

  line-height: 1.55;
}


/* =========================================================
   RATING
========================================================= */

.rating {

  display: flex;
  align-items: center;

  gap: 14px;

  margin-top: 20px;
}


.rating > strong {

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 42px;

  line-height: 1;

  letter-spacing: -.07em;
}


.rating-divider {

  width: 1px;
  height: 38px;

  background:
    rgba(8,15,29,.22);
}


.rating-info {
  display: flex;
  flex-direction: column;

  gap: 5px;
}


.stars {
  color: #ffb900;

  font-size: 15px;

  letter-spacing: 2px;
}


.rating-info small {

  color: #718096;

  font-size: 8px;

  letter-spacing: .18em;
}


/* =========================================================
   HAND NOTE
========================================================= */

.reviews-hand-note {

  display: none;

  color: #101827;

  font-size: 15px;

  line-height: 1.15;

  transform: rotate(-5deg);
}

.reviews-hand-note b {
  font-weight: 700;
}

.reviews-hand-note span {

  display: block;

  margin-top: 7px;

  font-size: 28px;
}


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

.reviews-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 12px;

  margin-top: 45px;
}


/* =========================================================
   FEATURED REVIEW
========================================================= */

.review-featured {

  position: relative;

  min-height: 440px;

  padding: 25px;

  overflow: hidden;

  background: #080f1d;

  color: #fff;

  border-radius: 14px;
}


/* TOP */

.featured-top {

  display: flex;

  align-items: center;

  justify-content: space-between;
}


.review-no {

  color: #8290a5;

  font-size: 9px;

  letter-spacing: .16em;
}


.lime-text {
  color: #caff27;
}


.student-story {

  color: #8290a5;

  font-size: 8px;

  letter-spacing: .2em;
}


/* PERSON */

.featured-person {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-top: 28px;
}


.person-avatar {

  width: 42px;
  height: 42px;

  display: flex;

  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border-radius: 50%;

  background: #ecece8;

  color: #080f1d;

  font-size: 13px;
}


.avatar-purple {

  background: #e6ddff;

  color: #6240ff;
}


.person-info {

  display: flex;
  flex-direction: column;

  gap: 4px;
}


.person-info strong {

  font-size: 13px;
}


.person-info span {

  color: #8390a4;

  font-size: 9px;
}


.featured-stars {

  margin-left: auto;

  color: #caff27;

  font-size: 13px;

  letter-spacing: 2px;
}


/* QUOTE */

.quote-mark {

  margin-top: 40px;

  color: #caff27;

  font-family: Georgia, serif;

  font-size: 62px;

  line-height: .35;
}


.featured-quote {

  max-width: 700px;

  margin-top: 18px;

  font-family:
    "Space Grotesk",
    "Inter",
    sans-serif;

  font-size:
    clamp(
      27px,
      6vw,
      42px
    );

  line-height: 1.06;

  letter-spacing: -.045em;
}


.featured-quote span {

  color: #caff27;

  font-weight: 600;
}


/* FEATURED BOTTOM */

.featured-bottom {

  position: absolute;

  left: 25px;
  right: 25px;
  bottom: 24px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-top: 16px;

  border-top:
    1px solid
    rgba(255,255,255,.17);
}


.income-result {

  display: flex;

  align-items: center;

  gap: 12px;
}


.income-result > i {

  color: #caff27;

  font-size: 25px;
}


.income-result div {

  display: flex;

  flex-direction: column;

  gap: 3px;
}


.income-result small {

  color: #8490a3;

  font-size: 7px;

  letter-spacing: .17em;
}


.income-result strong {

  font-size: 14px;
}


.result-pill {

  padding:
    9px 14px;

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

  border-radius: 50px;

  color: #9ba6b5;

  font-size: 7px;

  letter-spacing: .18em;
}


/* =========================================================
   SMALL REVIEW CARD
========================================================= */

.review-small {

  position: relative;

  min-height: 235px;

  padding: 23px;

  background:
    rgba(255,255,255,.72);

  border:
    1px solid
    rgba(8,15,29,.09);

  border-radius: 12px;
}


.small-top {

  display: flex;

  align-items: center;

  justify-content: space-between;
}


.small-stars {

  color: #ffb900;

  font-size: 11px;

  letter-spacing: 1px;
}


.small-person {

  display: flex;

  align-items: center;

  gap: 11px;

  margin-top: 22px;
}


.small-person .person-avatar {

  width: 40px;
  height: 40px;
}


.review-small > p {

  margin:
    22px 0 0;

  color: #101827;

  font-size: 15px;

  line-height: 1.48;

  letter-spacing: -.015em;
}


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

.community-card {

  position: relative;

  min-height: 235px;

  padding: 24px;

  overflow: hidden;

  background: #caff27;

  color: #080f1d;

  border-radius: 12px;
}


.community-label {

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .2em;
}


.community-content {

  display: flex;

  justify-content: space-between;

  margin-top: 20px;
}


.community-number {

  display: block;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 58px;

  line-height: .9;

  letter-spacing: -.075em;
}


.community-number span {

  color: #6240ff;
}


.community-content p {

  margin-top: 8px;

  font-size: 10px;

  line-height: 1.35;
}


.community-note {

  display: none;

  font-size: 14px;

  line-height: 1.1;

  transform: rotate(4deg);
}


.community-note span {

  display: block;

  margin-top: 4px;

  font-size: 22px;
}


.community-divider {

  width: 100%;

  height: 1px;

  margin-top: 20px;

  background:
    rgba(8,15,29,.25);
}


.community-people {

  display: flex;

  align-items: center;

  margin-top: 13px;
}


.mini-avatar {

  width: 32px;
  height: 32px;

  display: flex;

  align-items: center;
  justify-content: center;

  margin-right: -5px;

  border:
    2px solid
    #caff27;

  border-radius: 50%;

  background: #080f1d;

  color: #caff27;

  font-size: 9px;
}


.people-count {

  margin-left: 14px;

  padding:
    8px 12px;

  border-radius: 50px;

  background:
    rgba(255,255,255,.42);

  font-size: 9px;

  font-weight: 600;
}


/* =========================================================
   BOTTOM
========================================================= */

.reviews-bottom {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  margin-top: 30px;

  padding-top: 17px;

  border-top:
    1px solid
    rgba(8,15,29,.14);
}


.bottom-message {

  display: flex;

  align-items: flex-start;

  gap: 10px;
}


.bottom-message > span {

  width: 30px;
  height: 1px;

  margin-top: 4px;

  background: #7d8795;
}


.bottom-message p {

  margin: 0;

  color: #7b8798;

  font-size: 7px;

  line-height: 1.6;

  letter-spacing: .19em;
}


.your-turn {

  display: none;

  color: #748095;

  font-size: 8px;

  letter-spacing: .25em;
}


.nextyou-label {

  display: flex;

  align-items: center;

  gap: 8px;

  color: #748095;

  font-size: 7px;

  letter-spacing: .2em;
}


.nextyou-label i {

  color: #6240ff;

  font-size: 12px;
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 650px) {

  .reviews-wrap {

    width:
      calc(100% - 70px);

    padding:
      80px 0
      40px;
  }


  .reviews-header {

    flex-direction: row;

    align-items: flex-end;

    justify-content: space-between;
  }


  .reviews-title h2 {

    font-size: 65px;
  }


  .reviews-grid {

    grid-template-columns:
      1fr 1fr;

    gap: 14px;

    margin-top: 45px;
  }


  .review-featured {

    grid-column: span 2;
  }

}


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

@media (min-width: 950px) {

  .reviews-wrap {

    width:
      min(
        calc(100% - 100px),
        1420px
      );

    padding:
      75px 0
      38px;
  }


  /* HEADER */

  .reviews-header {

    min-height: 185px;

    align-items: flex-start;
  }


  .reviews-title h2 {

    margin-top: 20px;

    font-size:
      clamp(
        62px,
        5vw,
        76px
      );

    line-height: .88;
  }


  .reviews-intro {

    width: 330px;

    margin-top: 60px;
  }


  .reviews-hand-note {

    display: block;

    margin-top: 35px;
  }


  /* GRID */

  .reviews-grid {

    grid-template-columns:
      1.35fr
      .85fr
      .85fr;

    grid-template-rows:
      185px
      185px;

    gap: 14px;

    margin-top: 25px;
  }


  /* FEATURED */

  .review-featured {

    grid-row: span 2;

    grid-column: auto;

    min-height: 384px;

    padding: 27px;

    border-radius: 13px;
  }


  .featured-person {

    margin-top: 25px;
  }


  .quote-mark {

    margin-top: 35px;

    font-size: 60px;
  }


  .featured-quote {

    font-size:
      clamp(
        29px,
        2.5vw,
        39px
      );
  }


  /* SMALL */

  .review-small {

    min-height: 185px;

    padding: 22px;
  }


  .small-person {

    margin-top: 17px;
  }


  .review-small > p {

    margin-top: 17px;

    font-size: 13px;

    line-height: 1.45;
  }


  /* COMMUNITY */

  .community-card {

    min-height: 185px;

    padding: 22px;
  }


  .community-content {

    margin-top: 17px;
  }


  .community-number {

    font-size: 54px;
  }


  .community-note {

    display: block;
  }


  .community-divider {

    margin-top: 13px;
  }


  .community-people {

    margin-top: 9px;
  }


  .mini-avatar {

    width: 28px;
    height: 28px;
  }


  /* BOTTOM */

  .reviews-bottom {

    margin-top: 90px;

    padding-top: 17px;
  }


  .your-turn {

    display: block;
  }

}


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

@media (min-width: 1400px) {

  .reviews-wrap {

    padding:
      82px 0
      42px;
  }


  .reviews-title h2 {

    font-size: 78px;
  }


  .reviews-intro {

    width: 350px;

    margin-top: 58px;
  }


  .reviews-grid {

    grid-template-rows:
      192px
      192px;

    gap: 27px;

    margin-top: 28px;
  }


  .review-featured {

    min-height: 433px;

    padding: 30px;
  }


  .featured-quote {

    font-size: 40px;
  }


  .featured-bottom {

    left: 30px;
    right: 30px;
    bottom: 25px;
  }


  .review-small {

    min-height: 208px;

    padding: 24px;
  }


  .review-small > p {

    font-size: 14px;
  }


  .community-card {

    min-height: 208px;

    padding: 24px;
  }

}
/* =========================================================
   NEXTYOU — PRICING
   MOBILE FIRST
   STATIC / NO ANIMATION
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.pricing {

  position: relative;

  overflow: hidden;

  background: #f3efff;

  color: #080f1d;
}


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

.pricing-grid-bg {

  position: absolute;

  inset: 0;

  pointer-events: none;

  background-image:

    linear-gradient(
      rgba(98,64,255,.045) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(98,64,255,.045) 1px,
      transparent 1px
    );

  background-size: 72px 72px;
}


/* =========================================================
   WRAPPER
========================================================= */

.pricing-wrap {

  position: relative;

  z-index: 2;

  width: calc(100% - 32px);

  max-width: 1380px;

  margin-inline: auto;

  padding:
    70px 0
    35px;
}


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

.pricing-header {

  text-align: center;

  max-width: 900px;

  margin-inline: auto;
}


.pricing .eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  color: #6240ff;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .25em;
}


.pricing .eyebrow::before {

  content: "";

  width: 3px;

  height: 18px;

  background: #6240ff;
}


.pricing-header h2 {

  margin:
    20px 0 0;

  font-family:
    "Space Grotesk",
    "Inter",
    sans-serif;

  font-size:
    clamp(
      50px,
      14vw,
      82px
    );

  line-height: .88;

  letter-spacing: -.075em;

  font-weight: 600;
}


.pricing-header h2 span {

  color: #6240ff;
}


.pricing-header > p {

  max-width: 450px;

  margin:
    20px auto 0;

  color: #718096;

  font-size: 13px;

  line-height: 1.5;
}


/* =========================================================
   PRICING STAGE
========================================================= */

.pricing-stage {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 35px;

  margin-top: 45px;
}


/* =========================================================
   NOTE
========================================================= */

.pricing-note {

  display: none;

  position: absolute;

  color: #111827;

  font-size: 14px;

  line-height: 1.15;

  transform: rotate(-4deg);
}


.pricing-note span {

  display: block;

  margin-top: 7px;

  font-size: 28px;
}


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

.price-card {

  position: relative;

  width: 100%;

  max-width: 430px;

  padding:
    42px 25px 23px;

  background:
    rgba(255,255,255,.92);

  border:
    1px solid
    rgba(98,64,255,.14);

  border-radius: 15px;

  box-shadow:
    0 25px 70px
    rgba(71,45,150,.10);
}


/* =========================================================
   POPULAR BADGE
========================================================= */

.popular-badge {

  position: absolute;

  top: -13px;

  left: 50%;

  transform: translateX(-50%);

  min-width: 145px;

  padding:
    7px 20px;

  text-align: center;

  background: #caff27;

  color: #080f1d;

  border-radius: 50px;

  font-size: 14px;

  font-weight: 700;

  letter-spacing: .02em;
}


/* =========================================================
   PRICE
========================================================= */

.price {

  display: flex;

  align-items: baseline;

  gap: 12px;
}


.price strong {

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(
      55px,
      15vw,
      70px
    );

  line-height: .9;

  letter-spacing: -.075em;

  font-weight: 600;
}


.price del {

  color: #a0a6af;

  font-size: 14px;

  font-weight: 500;
}


/* =========================================================
   SAVE LINE
========================================================= */

.save-line {

  margin-top: 9px;

  color: #8993a2;

  font-size: 10px;
}


/* =========================================================
   FEATURES
========================================================= */

.price-features {

  list-style: none;

  padding: 0;

  margin:
    27px 0
    25px;
}


.price-features li {

  display: flex;

  align-items: center;

  gap: 11px;

  padding:
    7px 0;

  color: #626e7d;

  font-size: 11px;

  line-height: 1.4;
}


.price-features li i {

  display: flex;

  align-items: center;
  justify-content: center;

  width: 19px;
  height: 19px;

  flex-shrink: 0;

  border-radius: 50%;

  background: #caff27;

  color: #000000;

  font-size: 7px;
}


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

.pricing-cta {

  width: 100%;

  height: 54px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding:
    0 20px;

  border: none;

  border-radius: 9px;

  background: #080f1d;

  color: #fff;

  font-family: inherit;

  font-size: 11px;

  font-weight: 600;

  cursor: pointer;
}


.pricing-cta i {

  color: #caff27;

  font-size: 14px;
}


/* =========================================================
   PAYMENT NOTE
========================================================= */

.payment-note {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 6px;

  margin-top: 13px;

  color: #929aa6;

  font-size: 10px;
}


.payment-note i {

  font-size: 8px;
}


/* =========================================================
   BENEFITS
========================================================= */

.benefits {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  width: 100%;

  max-width: 430px;

  gap: 20px 15px;
}


.benefit {

  display: flex;

  align-items: flex-start;

  gap: 10px;
}


.benefit-icon {

  width: 30px;
  height: 30px;

  display: flex;

  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border:
    1px solid
    rgba(98,64,255,.18);

  border-radius: 50%;

  color: #6240ff;

  font-size: 16px;
}


.benefit div:last-child {

  display: flex;

  flex-direction: column;

  gap: 4px;
}


.benefit strong {

  font-size: 12px;

  font-weight: 700;
}


.benefit small {

  color: #8a94a2;

  font-size: 12px;

  line-height: 1.4;
}


/* =========================================================
   BOTTOM
========================================================= */

.pricing-bottom {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  margin-top: 45px;

  padding-top: 18px;

  border-top:
    1px solid
    rgba(8,15,29,.12);
}


.pricing-bottom-left {

  display: flex;

  align-items: flex-start;

  gap: 9px;
}


.pricing-bottom-left span {

  width: 30px;

  height: 1px;

  margin-top: 4px;

  background: #747e8d;
}


.pricing-bottom-left p {

  margin: 0;

  color: #7b8696;

  font-size: 7px;

  line-height: 1.6;

  letter-spacing: .18em;
}


.pricing-bottom-center {

  display: none;

  align-items: center;

  gap: 7px;

  color: #7b8696;

  font-size: 9px;

  letter-spacing: .18em;
}


.pricing-bottom-center i {

  color: #6240ff;
}


.pricing-bottom-right {

  display: flex;

  align-items: center;

  gap: 7px;

  color: #7b8696;

  font-size: 7px;

  letter-spacing: .18em;
}


.pricing-bottom-right i {

  color: #6240ff;

  font-size: 10px;
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 650px) {

  .pricing-wrap {

    width:
      calc(100% - 70px);

    padding:
      80px 0
      40px;
  }


  .pricing-header h2 {

    font-size: 70px;
  }


  .pricing-stage {

    margin-top: 50px;
  }


  .price-card {

    max-width: 420px;

    padding:
      43px 30px 25px;
  }


  .benefits {

    max-width: 600px;
  }

}


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

@media (min-width: 950px) {

  .pricing-wrap {

    width:
      min(
        calc(100% - 100px),
        1380px
      );

    padding:
      78px 0
      40px;
  }


  /* HEADER */

  .pricing-header h2 {

    font-size:
      clamp(
        65px,
        5.2vw,
        82px
      );
  }


  .pricing-header > p {

    margin-top: 15px;

    font-size: 13px;
  }


  /* STAGE */

  .pricing-stage {

    display: grid;

    grid-template-columns:
      minmax(180px, 1fr)
      430px
      minmax(180px, 1fr);

    align-items: center;

    gap: 45px;

    max-width: 1050px;

    margin:
      45px auto 0;
  }


  /* NOTE */

  .pricing-note {

    display: block;

    position: relative;

    left: auto;
    top: auto;

    justify-self: center;

    margin-top: 55px;
  }


  /* CARD */

  .price-card {

    width: 430px;

    min-height: 345px;

    padding:
      45px 30px 23px;
  }


  .price strong {

    font-size: 58px;
  }


  .price-features {

    margin:
      24px 0
      22px;
  }


  .price-features li {

    padding: 6px 0;

    font-size: 13px;
  }


  /* BENEFITS */

  .benefits {

    display: flex;

    flex-direction: column;

    gap: 24px;

    width: 190px;

    justify-self: start;
  }


  .benefit {

    gap: 10px;
  }


  .benefit-icon {

    width: 30px;
    height: 30px;
  }


  /* BOTTOM */

  .pricing-bottom {

    margin-top: 48px;
  }


  .pricing-bottom-center {

    display: flex;
  }

}


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

@media (min-width: 1400px) {

  .pricing-wrap {

    padding:
      85px 0
      42px;
  }


  .pricing-header h2 {

    font-size: 84px;
  }


  .pricing-stage {

    grid-template-columns:
      260px
      430px
      260px;

    max-width: 1080px;

    gap: 55px;

    margin-top: 48px;
  }


  .price-card {

    min-height: 350px;
  }


  .pricing-note {

    font-size: 15px;
  }

}
/* =====================================================
   NEXTYOU FAQ
   COMPACT PREMIUM VERSION
   MOBILE FIRST
===================================================== */

.faq {
  position: relative;
  overflow: hidden;

  background: #ffffff;
  color: #080d1b;
}


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

.faq-grid-bg {
  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(96, 64, 255, 0.04) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(96, 64, 255, 0.04) 1px,
      transparent 1px
    );

  background-size: 72px 72px;
}


/* =====================================================
   WRAPPER
===================================================== */

.faq-wrap {
  position: relative;
  z-index: 2;

  width: calc(100% - 32px);
  max-width: 1380px;

  margin: 0 auto;

  padding: 70px 0 40px;
}


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

.faq-head {
  display: flex;
  flex-direction: column;

  gap: 25px;
}


/* =====================================================
   EYEBROW
===================================================== */

.faq-heading .eyebrow {
  display: flex;
  align-items: center;

  gap: 10px;

  color: #6040ff;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: .25em;
}


.faq-heading .eyebrow::before {
  content: "";

  width: 3px;
  height: 18px;

  background: #6040ff;
}


/* =====================================================
   HEADING
===================================================== */

.faq-heading h2 {
  display: flex;
  flex-direction: column;

  margin: 18px 0 0;

  font-family:
    "Space Grotesk",
    "Inter",
    sans-serif;

  font-size:
    clamp(50px, 13vw, 82px);

  line-height: .88;

  letter-spacing: -.07em;

  font-weight: 600;
}


.faq-heading h2 span {
  color: #6040ff;
}


/* =====================================================
   INTRO
===================================================== */

.faq-intro {
  max-width: 330px;
}


.faq-intro p {
  margin: 0;

  color: #68758a;

  font-size: 13px;

  line-height: 1.55;
}


/* =====================================================
   HAND NOTE
===================================================== */

.faq-note {
  margin-top: 20px;

  color: #101625;

  font-size: 14px;

  line-height: 1.15;

  transform: rotate(-3deg);
}


.faq-note b {
  display: block;

  margin-top: 4px;

  font-size: 25px;

  font-weight: 400;
}


/* =====================================================
   FAQ LIST
===================================================== */

.faq-list {
  margin-top: 48px;

  display: grid;

  grid-template-columns: 1fr;

  border-top:
    1px solid
    rgba(8, 13, 27, .14);
}


/* =====================================================
   FAQ ITEM
===================================================== */

.faq-item {
  border-bottom:
    1px solid
    rgba(8, 13, 27, .14);
}


/* =====================================================
   QUESTION
===================================================== */

.faq-question {
  width: 100%;

  min-height: 72px;

  display: grid;

  grid-template-columns:
    32px
    1fr
    34px;

  align-items: center;

  gap: 8px;

  padding: 14px 0;

  border: none;

  background: transparent;

  color: #080d1b;

  text-align: left;

  font-family: inherit;

  cursor: pointer;
}


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

.faq-number {
  color: #6040ff;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .08em;
}


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

.faq-title {
  font-family:
    "Space Grotesk",
    "Inter",
    sans-serif;

  font-size: 14px;

  font-weight: 600;

  line-height: 1.3;
}


/* =====================================================
   PLUS
===================================================== */

.faq-icon {
  width: 32px;
  height: 32px;

  display: flex;

  align-items: center;
  justify-content: center;

  border:
    1px solid
    rgba(8, 13, 27, .16);

  border-radius: 50%;

  color: #6040ff;

  font-size: 9px;
}


/* =====================================================
   ANSWER
===================================================== */

.faq-answer {
  display: none;

  padding:
    0 40px
    20px
    40px;
}


.faq-answer p {
  max-width: 580px;

  margin: 0;

  color: #6c7789;

  font-size: 12px;

  line-height: 1.65;
}


/* =====================================================
   ACTIVE
===================================================== */

.faq-item.active {
  background:
    rgba(96, 64, 255, .025);
}


.faq-item.active .faq-icon {
  background: #6040ff;

  border-color: #6040ff;

  color: #ffffff;
}


.faq-item.active .faq-icon i {
  transform: rotate(45deg);
}


/* =====================================================
   BOTTOM
===================================================== */

.faq-bottom {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 40px;

  padding-top: 18px;

  border-top:
    1px solid
    rgba(8, 13, 27, .12);
}


.faq-bottom > div {
  display: flex;

  align-items: center;

  gap: 10px;
}


.faq-bottom > div span {
  width: 28px;

  height: 1px;

  background: #6f7888;
}


.faq-bottom p {
  margin: 0;

  color: #7a8596;

  font-size: 7px;

  letter-spacing: .2em;
}


.faq-bottom strong {
  display: flex;

  align-items: center;

  gap: 7px;

  color: #6040ff;

  font-size: 8px;

  letter-spacing: .18em;
}


.faq-bottom strong i {
  font-size: 10px;
}


/* =====================================================
   TABLET
===================================================== */

@media (min-width: 700px) {

  .faq-wrap {
    width: calc(100% - 70px);

    padding:
      85px 0
      45px;
  }


  .faq-head {
    flex-direction: row;

    align-items: flex-end;

    justify-content: space-between;
  }


  .faq-heading h2 {
    font-size: 72px;
  }


  .faq-intro {
    width: 290px;

    padding-bottom: 5px;
  }


  .faq-list {
    grid-template-columns:
      1fr 1fr;

    column-gap: 28px;

    margin-top: 60px;

    border-top: none;
  }


  .faq-item {
    border-top:
      1px solid
      rgba(8, 13, 27, .14);
  }


  .faq-question {
    min-height: 78px;
  }

}


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

@media (min-width: 1100px) {

  .faq-wrap {
    width:
      min(
        calc(100% - 120px),
        1380px
      );

    padding:
      95px 0
      50px;
  }


  .faq-heading h2 {
    font-size:
      clamp(
        70px,
        5.5vw,
        88px
      );
  }


  .faq-intro {
    width: 350px;
  }


  .faq-intro p {
    font-size: 14px;
  }


  .faq-note {
    margin-top: 25px;

    font-size: 15px;
  }


  .faq-list {
    margin-top: 65px;

    column-gap: 35px;
  }


  .faq-question {
    min-height: 82px;

    grid-template-columns:
      38px
      1fr
      38px;
  }


  .faq-title {
    font-size: 15px;
  }


  .faq-icon {
    width: 34px;
    height: 34px;
  }


  .faq-answer {
    padding:
      0 45px
      22px
      48px;
  }


  .faq-answer p {
    font-size: 13px;
  }


  .faq-bottom {
    margin-top: 45px;
  }

}


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

@media (min-width: 1500px) {

  .faq-heading h2 {
    font-size: 92px;
  }


  .faq-list {
    margin-top: 70px;
  }

}

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

.final-cta {
  position: relative;
  min-height: 680px;
  width: 100%;
  overflow: hidden;

  background: #050914;
  color: #fff;

  isolation: isolate;
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.final-bg {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  z-index: -4;
}


/* =========================================================
   DARK CINEMATIC SHADE
========================================================= */

.final-shade {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(3, 7, 17, .88) 0%,
      rgba(3, 7, 17, .48) 38%,
      rgba(3, 7, 17, .18) 70%,
      rgba(3, 7, 17, .45) 100%
    ),
    linear-gradient(
      180deg,
      rgba(3, 7, 17, .32),
      rgba(3, 7, 17, .12) 50%,
      rgba(3, 7, 17, .70)
    );

  z-index: -3;
}


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

.final-grid {
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.045) 1px,
      transparent 1px
    );

  background-size: 90px 90px;

  opacity: .45;

  pointer-events: none;

  z-index: -2;
}


/* =========================================================
   TOP BRAND
========================================================= */

.final-brand {
  position: absolute;

  top: 38px;
  left: 4.5%;

  display: flex;
  align-items: center;
  gap: 14px;

  color: rgba(255,255,255,.85);

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 12px;
  font-weight: 600;

  letter-spacing: .35em;

  z-index: 5;
}

.final-brand span {
  width: 2px;
  height: 34px;

  background: #caff27;
}


/* =========================================================
   TOP RIGHT NOTE
========================================================= */

.final-top-note {
  position: absolute;

  top: 38px;
  right: 4.5%;

  color: rgba(255,255,255,.52);

  font-size: 9px;
  line-height: 1.7;

  letter-spacing: .22em;

  text-align: right;

  z-index: 5;
}


/* =========================================================
   CONTENT
========================================================= */

.final-content {
  position: relative;

  z-index: 5;

  min-height: 680px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;

  padding:
    100px 20px
    100px;
}


/* =========================================================
   EYEBROW
========================================================= */

.final-content .eyebrow {
  margin-bottom: 22px;

  color: #caff27;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .28em;
}


/* =========================================================
   HEADING
========================================================= */

.final-content h2 {
  margin: 0;

  max-width: 920px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(48px, 7vw, 75px);

  line-height: .94;

  letter-spacing: -.065em;

  font-weight: 600;
}

.final-content h2 span {
  color: #caff27;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.final-content p {
  max-width: 600px;

  margin:
    28px auto 0;

  color: rgba(255,255,255,.68);

  font-size: 14px;

  line-height: 1.6;
}


/* =========================================================
   CTA BUTTON
========================================================= */

.final-button {
  margin-top: 32px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 30px;

  min-width: 205px;
  height: 58px;

  padding: 0 26px;

  border-radius: 100px;

  background: #caff27;
  color: #050914;

  text-decoration: none;

  font-size: 13px;
  font-weight: 700;

  transition:
    transform .25s ease,
    background .25s ease;
}

.final-button b {
  font-size: 18px;
  font-weight: 400;
}

.final-button:hover {
  transform: translateY(-3px);
  background: #d7ff52;
}


/* =========================================================
   HANDWRITTEN NOTE
========================================================= */

.final-note {
  position: absolute;

  right: 8%;
  top: 30%;

  z-index: 10;

  color: #fff;

  font-size: 18px;
  line-height: 1.15;

  text-align: left;

  transform: rotate(-5deg);

  text-shadow:
    0 3px 15px rgba(0,0,0,.5);
}

.final-note b {
  display: block;

  margin-top: 7px;
  margin-left: 5px;

  font-family: sans-serif;

  font-size: 32px;

  font-weight: 400;

  transform: rotate(-15deg);
}


/* =========================================================
   BOTTOM LINE
========================================================= */

.final-bottom {
  position: absolute;

  left: 4.5%;
  right: 4.5%;
  bottom: 28px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  padding-top: 18px;

  border-top:
    1px solid
    rgba(255,255,255,.22);

  z-index: 5;
}


/* LEFT */

.final-bottom-left {
  display: flex;

  align-items: flex-start;

  gap: 14px;
}

.final-bottom-left > span {
  width: 35px;
  height: 1px;

  margin-top: 5px;

  background: rgba(255,255,255,.7);
}

.final-bottom-left p {
  margin: 0;

  color: rgba(255,255,255,.58);

  font-size: 8px;

  line-height: 1.8;

  letter-spacing: .25em;
}


/* RIGHT */

.final-bottom-right {
  display: flex;

  align-items: center;

  gap: 22px;

  color: rgba(255,255,255,.65);

  font-size: 9px;

  letter-spacing: .3em;
}

.final-bottom-right b {
  font-size: 28px;

  font-weight: 300;

  letter-spacing: 0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .final-cta {
    min-height: 620px;
  }

  .final-content {
    min-height: 620px;

    padding:
      100px 24px
      100px;
  }

  .final-note {
    right: 5%;
    top: 24%;

    font-size: 15px;
  }

  .final-top-note {
    display: none;
  }

}


/* =========================================================
   MOBILE FIRST
========================================================= */

@media (max-width: 600px) {

  .final-cta {
    min-height: 720px;
  }

  .final-bg {
    object-position:
      58% center;
  }

  .final-shade {
    background:
      linear-gradient(
        180deg,
        rgba(3,7,17,.75) 0%,
        rgba(3,7,17,.35) 35%,
        rgba(3,7,17,.65) 70%,
        rgba(3,7,17,.92) 100%
      );
  }

  .final-grid {
    background-size: 65px 65px;

    opacity: .3;
  }

  .final-brand {
    top: 24px;
    left: 20px;

    font-size: 9px;

    gap: 9px;
  }

  .final-brand span {
    height: 25px;
  }

  .final-content {
    min-height: 720px;

    padding:
      120px 20px
      120px;

    justify-content: center;
  }

  .final-content .eyebrow {
    margin-bottom: 20px;

    font-size: 8px;

    letter-spacing: .22em;
  }

  .final-content h2 {
    max-width: 370px;

    font-size:
      clamp(43px, 13vw, 65px);

    line-height: .93;

    letter-spacing: -.065em;
  }

  .final-content p {
    max-width: 320px;

    margin-top: 22px;

    font-size: 12px;

    line-height: 1.55;
  }

  .final-button {
    width: 100%;
    max-width: 230px;

    height: 54px;

    margin-top: 27px;

    font-size: 12px;
  }

  .final-note {
    top: auto;
    right: 20px;
    bottom: 145px;

    font-size: 13px;

    transform: rotate(-4deg);
  }

  .final-note b {
    font-size: 25px;
  }

  .final-bottom {
    left: 20px;
    right: 20px;

    bottom: 20px;

    padding-top: 14px;
  }

  .final-bottom-left {
    gap: 9px;
  }

  .final-bottom-left > span {
    width: 22px;
  }

  .final-bottom-left p {
    font-size: 6px;

    letter-spacing: .18em;
  }

  .final-bottom-right {
    gap: 8px;

    font-size: 6px;

    letter-spacing: .2em;
  }

  .final-bottom-right b {
    font-size: 21px;
  }
}
/* =========================================================
   FOOTER
========================================================= */

.site-footer {
  position: relative;

  background: #070c13;
  color: #f7f8fb;

  overflow: hidden;

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


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

.footer-grid-bg {
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size: 90px 90px;

  pointer-events: none;
}


/* =========================================================
   WRAPPER
========================================================= */

.footer-wrap {
  position: relative;

  width: calc(100% - 32px);
  max-width: 1440px;

  margin: 0 auto;

  padding:
    70px 0 25px;

  z-index: 2;
}


/* =========================================================
   TOP
========================================================= */

.footer-top {
  display: flex;

  justify-content: space-between;
  align-items: flex-start;

  padding-bottom: 20px;

 
}


/* =========================================================
   LOGO
========================================================= */

.footer-logo {
  display: inline-flex;

  align-items: center;

  gap: 12px;

  color: #fff;

  text-decoration: none;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 18px;

  font-weight: 600;
}

.footer-logo-mark {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  border:
    1px solid
    #6945ff;

  border-radius: 10px;

  color: #6945ff;

  font-size: 16px;
}

.footer-brand-block p {
  max-width: 350px;

  margin-top: 20px;

  color: #778395;

  font-size: 12px;

  line-height: 1.7;
}


/* =========================================================
   TAGLINE
========================================================= */

.footer-tagline {
  text-align: right;
}

.footer-tagline span {
  display: block;

  margin-bottom: 12px;

  color: #caff27;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .25em;
}

.footer-tagline strong {
  color: #d7dce5;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 22px;

  line-height: 1.05;

  font-weight: 500;

  letter-spacing: -.04em;
}


/* =========================================================
   MAIN LINKS
========================================================= */

.footer-main {
  display: grid;

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

  gap: 30px;

  padding:
    55px 0 65px;
}


/* =========================================================
   COLUMN
========================================================= */

.footer-column {
  display: flex;

  flex-direction: column;

  align-items: flex-start;
}

.footer-label {
  margin-bottom: 22px;

  color: #586475;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .25em;
}

.footer-column a {
  margin-bottom: 13px;

  color: #aeb7c5;

  text-decoration: none;

  font-size: 12px;

  transition:
    color .2s ease;
}

.footer-column a:hover {
  color: #caff27;
}


/* =========================================================
   SOCIAL ICONS
========================================================= */

.footer-social a {
  display: flex;

  align-items: center;

  gap: 10px;
}

.footer-social i {
  width: 18px;

  color: #caff27;

  font-size: 12px;
}


/* =========================================================
   HUGE BRAND
========================================================= */

/* .footer-display {
  position: relative;

  margin-top: 10px;

  padding-top: 25px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(26px, 6vw, 32px);

  line-height: .72;

  letter-spacing: -.09em;

  font-weight: 600;

  white-space: nowrap;

  color: #f4f5f7;

  opacity: .96;
} */

.footer-display strong {
  color: #6945ff;

  font-weight: 600;
}


/* =========================================================
   BOTTOM
========================================================= */

.footer-bottom {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-top: -47px;

  padding-top: 30px;

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

.footer-bottom small {
  color: #596474;

  font-size: 7px;

  letter-spacing: .18em;
}


/* =========================================================
   STATUS
========================================================= */

.footer-bottom-left {
  display: flex;

  align-items: center;

  gap: 10px;
}

.footer-status {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #caff27;

  box-shadow:
    0 0 10px
    rgba(202,255,39,.45);
}


/* =========================================================
   BACK TO TOP
========================================================= */

.footer-backtop {
  display: flex;

  align-items: center;

  gap: 10px;

  color: #9ca6b5;

  text-decoration: none;

  font-size: 7px;

  letter-spacing: .18em;
}

.footer-backtop i {
  color: #caff27;

  font-size: 11px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

  .footer-top {
    gap: 40px;
  }

  .footer-main {
    grid-template-columns:
      repeat(2, 1fr);

    row-gap: 45px;
  }

  .footer-display {
    font-size:
      clamp(80px, 20vw, 170px);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .footer-wrap {
    width: calc(100% - 40px);

    padding:
      55px 0 20px;
  }


  /* TOP */

  .footer-top {
    flex-direction: column;

    gap: 35px;

    padding-bottom: 40px;
  }

  .footer-logo {
    font-size: 16px;
  }

  .footer-logo-mark {
    width: 34px;
    height: 34px;

    border-radius: 9px;
  }

  .footer-brand-block p {
    max-width: 300px;

    font-size: 11px;

    margin-top: 15px;
  }

  .footer-tagline {
    text-align: left;
  }

  .footer-tagline strong {
    font-size: 20px;
  }


  /* LINKS */

  .footer-main {
    grid-template-columns:
      repeat(2, 1fr);

    gap: 40px 20px;

    padding:
      42px 0 45px;
  }

  .footer-label {
    margin-bottom: 17px;

    font-size: 7px;
  }

  .footer-column a {
    font-size: 11px;

    margin-bottom: 11px;
  }


  /* BRAND */

  .footer-display {
    margin-top: 15px;

    font-size:
      clamp(82px, 25vw, 145px);

    line-height: .75;
  }


  /* BOTTOM */

  .footer-bottom {
    flex-wrap: wrap;

    align-items: center;

    margin-top: 35px;

    gap: 18px;
  }

  .footer-bottom-left {
    width: 100%;
  }

  .footer-bottom > small {
    font-size: 6px;
  }

  .footer-backtop {
    margin-left: auto;
  }

}