@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');


:root {

  --black: #080808;
  --dark: #101010;
  --dark-two: #161616;

  --white: #f5f5f2;
  --grey: #898989;
  --light-grey: #b8b8b8;

  --line: rgba(255,255,255,.11);

  --accent: #b7ff45;
  --accent-dark: #8dcc25;

}


* {

  box-sizing: border-box;

  margin: 0;
  padding: 0;

}


html {

  scroll-behavior: smooth;

}


body {

  background: var(--black);

  color: var(--white);

  font-family:
    "DM Sans",
    sans-serif;

  line-height: 1.6;

  overflow-x: hidden;

}


a {

  color: inherit;

  text-decoration: none;

}


button {

  font-family: inherit;

}


.container {

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

  margin: auto;

}


h1,
h2,
h3 {

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

  line-height: 1;

}


h1 {

  font-size:
    clamp(4rem, 9vw, 8rem);

  letter-spacing:
    -.075em;

}


h2 {

  font-size:
    clamp(3rem, 6vw, 6rem);

  letter-spacing:
    -.065em;

}


h1 span,
h2 span {

  color: var(--accent);

}


p {

  color: var(--grey);

}


.eyebrow {

  color:
    var(--accent);

  font-size: .63rem;

  font-weight: 700;

  letter-spacing: .18em;

  text-transform: uppercase;

  margin-bottom: 15px;

}


.section-number {

  display: block;

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

  font-size: .65rem;

  font-weight: 700;

  letter-spacing: .12em;

  margin-bottom: 12px;

}


/* =========================
   FICTIONAL BAR
========================= */


.fictional-bar {

  height: 30px;

  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  z-index: 300;

  background:
    var(--accent);

  color:
    #111;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 16px;

  font-size: .58rem;

  font-weight: 700;

  letter-spacing: .1em;

  text-transform: uppercase;

}


.fictional-bar a {

  color: #111;

  text-decoration: underline;

}


/* =========================
   NAVIGATION
========================= */


.site-header {

  position: fixed;

  top: 30px;

  left: 0;
  right: 0;

  z-index: 200;

  padding: 21px 0;

  transition: .3s;

}


.site-header.scrolled {

  background:
    rgba(8,8,8,.9);

  backdrop-filter:
    blur(16px);

  border-bottom:
    1px solid
    var(--line);

}


.navbar {

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

  margin: auto;

  display: flex;

  justify-content: space-between;

  align-items: center;

}


.logo {

  font:

    700 1.35rem
    "Space Grotesk",
    sans-serif;

  letter-spacing:
    -.06em;

}


.logo span {

  color:
    var(--accent);

}


.nav-links {

  display: flex;

  align-items: center;

  gap: 28px;

  font-size: .7rem;

  font-weight: 600;

}


.nav-links a {

  transition: .2s;

}


.nav-links a:hover {

  color:
    var(--accent);

}


.nav-studio {

  border:
    1px solid
    var(--line);

  padding:
    8px 14px;

  border-radius:
    999px;

}


.menu-toggle {

  display: none;

  border: 0;

  background: transparent;

  color: #fff;

  cursor: pointer;

}


.menu-toggle span {

  display: block;

  width: 23px;

  height: 2px;

  background: currentColor;

  margin: 5px;

}


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


.hero {

  min-height: 100vh;

  position: relative;

  overflow: hidden;

  display: flex;

  align-items: center;

  padding:
    150px 0 80px;

}


.hero-bg {

  position: absolute;

  inset: 0;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 80% 25%,
      #202d13,
      transparent 30%
    ),

    radial-gradient(
      circle at 10% 80%,
      #161f10,
      transparent 30%
    );

}


.grid-pattern {

  position: absolute;

  inset: 0;

  opacity: .35;

  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:
    60px 60px;

  mask-image:
    linear-gradient(
      90deg,
      black,
      transparent
    );

}


.hero-glow {

  position: absolute;

  border-radius: 50%;

  filter:
    blur(100px);

  opacity: .5;

}


.glow-one {

  width: 450px;
  height: 450px;

  right: 3%;

  top: 10%;

  background:
    rgba(183,255,69,.14);

}


.glow-two {

  width: 300px;
  height: 300px;

  left: 20%;

  bottom: -20%;

  background:
    rgba(183,255,69,.08);

}


.hero-shape {

  position: absolute;

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

  transform:
    rotate(25deg);

}


.shape-one {

  width: 400px;
  height: 400px;

  right: -100px;
  top: 25%;

}


.shape-two {

  width: 220px;
  height: 220px;

  right: 10%;
  bottom: -80px;

}


.hero-content {

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

  margin: auto;

  position: relative;

  z-index: 2;

}


.creator-tag {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  border:
    1px solid
    rgba(183,255,69,.25);

  padding:
    7px 12px;

  border-radius:
    999px;

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

  font-size: .6rem;

  font-weight: 700;

  letter-spacing: .1em;

  margin-bottom: 27px;

}


.status-dot {

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--accent);

  box-shadow:
    0 0 12px
    var(--accent);

}


.hero-content h1 {

  max-width: 850px;

}


.hero-content p {

  max-width: 480px;

  margin:
    28px 0;

  font-size: .95rem;

}


.hero-buttons {

  display: flex;

  gap: 12px;

  align-items: center;

}


.primary-button,
.secondary-button {

  display: inline-flex;

  align-items: center;

  gap: 13px;

  padding:
    13px 19px;

  border-radius:
    999px;

  font-size: .72rem;

  font-weight: 700;

  transition: .25s;

}


.primary-button {

  background:
    var(--accent);

  color: #111;

}


.primary-button:hover {

  background:
    #c8ff79;

  transform:
    translateY(-2px);

}


.secondary-button {

  border:
    1px solid
    var(--line);

}


.secondary-button:hover {

  border-color:
    var(--accent);

  color:
    var(--accent);

}


.hero-video-card {

  position: absolute;

  z-index: 3;

  width: 330px;

  right:
    max(5vw, calc((100vw - 1120px) / 2));

  bottom: 16%;

  transform:
    rotate(4deg);

}


.video-screen {

  aspect-ratio: 16 / 10;

  background:
    #202020;

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

  box-shadow:
    0 30px 80px
    rgba(0,0,0,.45);

  position: relative;

  overflow: hidden;

}


.video-top,
.video-bottom {

  position: absolute;

  left: 13px;
  right: 13px;

  display: flex;

  justify-content: space-between;

  font-size: .48rem;

  letter-spacing: .1em;

  z-index: 3;

}


.video-top {

  top: 12px;

}


.video-bottom {

  bottom: 12px;

}


.fake-video-elements {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      140deg,
      #30372a,
      #0f110e
    );

}


.video-block {

  position: absolute;

  border:
    1px solid
    rgba(183,255,69,.3);

}


.block-one {

  width: 150px;
  height: 150px;

  right: -30px;
  top: -30px;

  transform:
    rotate(25deg);

}


.block-two {

  width: 90px;
  height: 90px;

  left: 30px;
  bottom: 30px;

  background:
    rgba(183,255,69,.15);

}


.block-three {

  width: 40px;
  height: 40px;

  left: 120px;
  top: 80px;

  background:
    var(--accent);

}


.play-button {

  position: absolute;

  z-index: 4;

  left: 50%;
  top: 50%;

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

  width: 58px;
  height: 58px;

  border-radius: 50%;

  background:
    var(--accent);

  color: #111;

  display: grid;

  place-items: center;

  font-size: .8rem;

  padding-left: 3px;

}


.hero-scroll {

  position: absolute;

  z-index: 3;

  bottom: 25px;

  left: max(24px, calc((100vw - 1120px) / 2));

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

  font-size: .55rem;

  letter-spacing: .13em;

}


/* =========================
   STATS
========================= */


.stats {

  background:
    var(--accent);

  color: #111;

}


.stats-inner {

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

  margin: auto;

  display: grid;

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

}


.stat {

  padding:
    28px 15px;

  border-right:
    1px solid
    rgba(0,0,0,.15);

  display: flex;

  flex-direction: column;

  align-items: center;

}


.stat:last-child {

  border-right: 0;

}


.stat strong {

  font:
    700 2rem
    "Space Grotesk";

  letter-spacing:
    -.07em;

}


.stat span {

  font-size: .58rem;

  text-transform: uppercase;

  letter-spacing: .1em;

  opacity: .55;

}


/* =========================
   SECTIONS
========================= */


.section {

  padding:
    130px 0;

}


.videos {

  background:
    var(--black);

}


.section-heading {

  display: flex;

  justify-content: space-between;

  align-items: end;

  gap: 40px;

  margin-bottom: 60px;

}


.section-heading h2 {

  max-width: 700px;

}


.view-all {

  color:
    var(--accent);

  font-size: .7rem;

  font-weight: 700;

}


.video-grid {

  display: grid;

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

  gap:
    50px 24px;

}


.video-card {

  min-width: 0;

}


.thumbnail {

  aspect-ratio: 16 / 9;

  position: relative;

  overflow: hidden;

  border:
    1px solid
    var(--line);

}


.thumbnail-title {

  position: absolute;

  z-index: 3;

  left: 22px;

  bottom: 22px;

  max-width: 260px;

  font:
    700 1.8rem
    "Space Grotesk";

  line-height: .95;

  letter-spacing: -.06em;

}


.thumbnail-play {

  position: absolute;

  z-index: 4;

  top: 18px;

  right: 18px;

  width: 42px;
  height: 42px;

  border-radius: 50%;

  background:
    var(--accent);

  color: #111;

  display: grid;

  place-items: center;

  font-size: .65rem;

}


.duration {

  position: absolute;

  z-index: 4;

  right: 14px;
  bottom: 14px;

  background:
    rgba(0,0,0,.7);

  padding:
    4px 7px;

  font-size: .55rem;

}


.thumbnail-label {

  position: absolute;

  top: 18px;
  left: 18px;

  z-index: 4;

  background:
    var(--accent);

  color: #111;

  padding:
    5px 8px;

  font-size: .52rem;

  font-weight: 700;

}


.thumbnail-one {

  background:
    linear-gradient(
      135deg,
      #29341e,
      #10130d
    );

}


.thumbnail-pattern {

  position: absolute;

  inset: -50px;

  background-image:
    linear-gradient(
      45deg,
      transparent 45%,
      rgba(183,255,69,.18) 45%,
      rgba(183,255,69,.18) 55%,
      transparent 55%
    );

  background-size: 100px 100px;

  transform:
    rotate(-10deg);

}


.thumbnail-two {

  background:
    linear-gradient(
      135deg,
      #383838,
      #151515
    );

}


.thumbnail-circle {

  position: absolute;

  width: 260px;
  height: 260px;

  border-radius: 50%;

  right: -50px;
  top: -70px;

  background:
    var(--accent);

}


.thumbnail-two .thumbnail-title {

  color: #111;

}


.thumbnail-three {

  background:
    linear-gradient(
      130deg,
      #222,
      #39442b
    );

}


.thumbnail-lines {

  position: absolute;

  width: 120%;
  height: 120%;

  left: -10%;
  top: -10%;

  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 35px,
      rgba(183,255,69,.12) 35px 37px
    );

}


.thumbnail-four {

  background:
    #202020;

}


.thumbnail-squares {

  position: absolute;

  inset: 20px;

  display: grid;

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

  gap: 8px;

  opacity: .6;

}


.thumbnail-squares span {

  border:
    1px solid
    var(--accent);

}


.video-info {

  padding-top: 16px;

  display: flex;

  justify-content: space-between;

  gap: 20px;

}


.video-type {

  font-size: .55rem;

  color:
    var(--accent);

  letter-spacing: .12em;

}


.video-info h3 {

  font-size:
    clamp(1.2rem, 2vw, 1.55rem);

  margin-top: 6px;

}


.arrow {

  color:
    var(--accent);

  font-size: 1.2rem;

}


/* =========================
   ABOUT
========================= */


.about {

  background:
    var(--dark);

}


.about-grid {

  display: grid;

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

  align-items: center;

  gap: 100px;

}


.about-copy h2 {

  margin-bottom: 30px;

}


.about-copy > p:not(.eyebrow) {

  max-width: 580px;

  margin-bottom: 17px;

}


.about-links {

  display: flex;

  gap: 25px;

  margin-top: 35px;

}


.about-links a {

  color:
    var(--accent);

  font-size: .7rem;

  font-weight: 700;

}


.about-visual {

  display: flex;

  justify-content: center;

}


.creator-card {

  width: 350px;

  padding: 20px;

  background:
    #1b1b1b;

  border:
    1px solid
    var(--line);

  transform:
    rotate(-3deg);

  box-shadow:
    25px 30px 80px
    rgba(0,0,0,.35);

}


.card-top,
.creator-card-footer {

  display: flex;

  justify-content: space-between;

  font-size: .5rem;

  letter-spacing: .12em;

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

}


.creator-avatar {

  height: 280px;

  margin:
    20px 0;

  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #38412d,
      #171a15
    );

}


.avatar-head {

  position: absolute;

  width: 90px;
  height: 90px;

  border-radius: 50%;

  background: #272927;

  left: 50%;
  top: 24%;

  transform:
    translateX(-50%);

}


.avatar-body {

  position: absolute;

  width: 170px;
  height: 170px;

  border-radius:
    80px 80px 0 0;

  background: #202220;

  left: 50%;
  bottom: -35px;

  transform:
    translateX(-50%);

}


.creator-avatar span {

  position: absolute;

  z-index: 3;

  left: 50%;
  top: 50%;

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

  color:
    var(--accent);

  font:
    700 3rem
    "Space Grotesk";

  opacity: .5;

}


.creator-card-info h3 {

  font-size: 1.7rem;

}


.creator-card-info p {

  font-size: .65rem;

  margin:
    3px 0 22px;

}


/* =========================
   PROJECTS
========================= */


.projects {

  background:
    var(--black);

}


.project-list {

  border-top:
    1px solid
    var(--line);

}


.project {

  display: grid;

  grid-template-columns:
    70px 1fr 40px;

  align-items: center;

  gap: 30px;

  padding:
    35px 0;

  border-bottom:
    1px solid
    var(--line);

  transition: .25s;

}


.project:hover {

  padding-left: 15px;

  padding-right: 15px;

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

}


.project-number {

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

  font-size: .65rem;

}


.project-main > span {

  color:
    var(--accent);

  font-size: .55rem;

  letter-spacing: .14em;

  font-weight: 700;

}


.project-main h3 {

  font-size:
    clamp(1.7rem, 3vw, 2.5rem);

  margin:
    5px 0;

}


.project-main p {

  font-size: .7rem;

}


.project-arrow {

  color:
    var(--accent);

  font-size: 1.2rem;

}


/* =========================
   SOCIALS
========================= */


.socials {

  background:
    var(--dark-two);

}


.social-heading {

  margin-bottom: 50px;

}


.social-heading h2 {

  max-width: 600px;

}


.social-grid {

  display: grid;

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

  gap: 12px;

}


.social-card {

  min-height: 150px;

  padding: 22px;

  border:
    1px solid
    var(--line);

  display: flex;

  align-items: center;

  gap: 18px;

  position: relative;

  transition: .25s;

}


.social-card:hover {

  border-color:
    var(--accent);

  transform:
    translateY(-5px);

}


.social-icon {

  width: 48px;
  height: 48px;

  border:
    1px solid
    var(--line);

  border-radius: 50%;

  display: grid;

  place-items: center;

  color:
    var(--accent);

}


.social-card small {

  display: block;

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

  font-size: .52rem;

  letter-spacing: .12em;

}


.social-card strong {

  display: block;

  font-size: .9rem;

  margin-top: 4px;

}


.social-arrow {

  position: absolute;

  top: 20px;
  right: 20px;

  color:
    var(--accent);

}


/* =========================
   CONTACT
========================= */


.contact {

  position: relative;

  overflow: hidden;

  background:
    var(--accent);

  color: #111;

  padding:
    140px max(24px, calc((100vw - 1120px) / 2));

}


.contact-grid {

  display: grid;

  grid-template-columns:
    1fr .8fr;

  align-items: center;

  gap: 80px;

}


.contact .section-number {

  color:
    rgba(0,0,0,.3);

}


.contact .eyebrow {

  color:
    rgba(0,0,0,.55);

}


.contact-content h2 {

  max-width: 750px;

}


.contact-content h2 span {

  color: #111;

}


.contact-content > p:not(.eyebrow) {

  max-width: 550px;

  color:
    rgba(0,0,0,.55);

  margin:
    25px 0 30px;

}


.contact-button {

  display: inline-flex;

  align-items: center;

  gap: 15px;

  padding:
    14px 20px;

  background:
    #111;

  color:
    #fff;

  border-radius:
    999px;

  font-size: .7rem;

  font-weight: 700;

  transition: .25s;

}


.contact-button:hover {

  background:
    #fff;

  color: #111;

}


.contact-decoration {

  height: 400px;

  position: relative;

  display: grid;

  place-items: center;

}


.orbit {

  position: absolute;

  border:
    2px solid
    rgba(0,0,0,.18);

  border-radius: 50%;

}


.orbit-one {

  width: 350px;
  height: 350px;

  transform:
    rotate(25deg);

}


.orbit-two {

  width: 250px;
  height: 250px;

  transform:
    rotate(-35deg);

}


.orbit-three {

  width: 150px;
  height: 150px;

}


.orbit-center {

  width: 75px;
  height: 75px;

  border-radius: 50%;

  background:
    #111;

  color:
    var(--accent);

  display: grid;

  place-items: center;

  font-size: 1.5rem;

}


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


.footer {

  background:
    #050505;

}


.footer-top {

  padding:
    55px 0;

  display: grid;

  grid-template-columns:
    1fr auto auto;

  align-items: center;

  gap: 60px;

}


.footer-brand > a {

  font:
    700 1.3rem
    "Space Grotesk";

  letter-spacing:
    -.06em;

}


.footer-brand > a span {

  color:
    var(--accent);

}


.footer-brand p {

  font-size: .6rem;

  margin-top: 4px;

}


.footer-links {

  display: flex;

  gap: 22px;

  font-size: .65rem;

}


.footer-links a:hover {

  color:
    var(--accent);

}


.studio-link {

  font-size: .65rem;

  color:
    var(--accent);

}


.footer-bottom {

  padding:
    18px 0;

  border-top:
    1px solid
    var(--line);

  display: flex;

  justify-content: space-between;

  font-size: .55rem;

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

}


/* =========================
   REVEAL
========================= */


.reveal {

  opacity: 0;

  transform:
    translateY(25px);

  transition:
    opacity .7s ease,
    transform .7s ease;

}


.reveal.visible {

  opacity: 1;

  transform:
    translateY(0);

}


.delay-1 {

  transition-delay: .1s;

}


.delay-2 {

  transition-delay: .2s;

}


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


@media (max-width: 850px) {

  .menu-toggle {

    display: block;

  }


  .nav-links {

    position: absolute;

    top: 65px;

    left: 15px;
    right: 15px;

    padding: 14px;

    background:
      #151515;

    border:
      1px solid
      var(--line);

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 2px;

    opacity: 0;

    visibility: hidden;

    transform:
      translateY(-8px);

    transition: .25s;

  }


  .nav-links.open {

    opacity: 1;

    visibility: visible;

    transform:
      translateY(0);

  }


  .nav-links a {

    padding: 10px;

  }


  .hero-video-card {

    width: 270px;

    right: 8%;

    bottom: 8%;

    opacity: .45;

  }


  .hero-content {

    padding-bottom: 100px;

  }


  .video-grid {

    grid-template-columns: 1fr;

  }


  .about-grid {

    grid-template-columns: 1fr;

    gap: 70px;

  }


  .social-grid {

    grid-template-columns: 1fr;

  }


  .contact-grid {

    grid-template-columns: 1fr;

  }


  .contact-decoration {

    display: none;

  }


  .footer-top {

    grid-template-columns: 1fr;

    gap: 30px;

  }

}


@media (max-width: 600px) {

  .container,
  .navbar,
  .hero-content {

    width:
      calc(100% - 30px);

  }


  .fictional-bar {

    justify-content: flex-end;

    padding: 0 12px;

  }


  .fictional-bar span {

    display: none;

  }


  .hero {

    padding-top: 130px;

  }


  .hero-content h1 {

    font-size:
      clamp(3.5rem, 17vw, 5rem);

  }


  .hero-video-card {

    display: none;

  }


  .hero-scroll {

    left: 15px;

  }


  .stats-inner {

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

  }


  .stat {

    border-bottom:
      1px solid
      rgba(0,0,0,.15);

  }


  .section {

    padding:
      90px 0;

  }


  .section-heading {

    display: block;

  }


  .view-all {

    display: inline-block;

    margin-top: 20px;

  }


  .thumbnail-title {

    font-size: 1.4rem;

  }


  .project {

    grid-template-columns:
      35px 1fr 25px;

    gap: 15px;

  }


  .about-links {

    flex-direction: column;

    gap: 12px;

  }


  .creator-card {

    width: 100%;

  }


  .footer-bottom {

    flex-direction: column;

    gap: 7px;

  }

}


@media (prefers-reduced-motion: reduce) {

  * {

    scroll-behavior: auto !important;

    animation: none !important;

    transition: none !important;

  }

}