/* ============================================
   RESET
============================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


:root {

  --black: #020508;

  --black-2: #05090e;

  --black-3: #09101a;

  --navy: #061627;

  --deep-blue: #082a4d;

  --blue: #145da0;

  --blue-2: #237ac4;

  --bright-blue: #41a4ff;

  --white: #f4f7fa;

  --grey: #8592a2;

  --border:
    rgba(255,255,255,.09);

}


body {

  background:
    var(--black);

  color:
    var(--white);

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

  overflow-x:
    hidden;

  cursor:
    none;

}


a,
button {
  cursor: none;
}


a {
  color: inherit;
  text-decoration: none;
}


img {
  display: block;
  width: 100%;
}


.container {

  width:

    min(
      1200px,
      calc(100% - 60px)
    );

  margin: auto;

}



/* ============================================
   CREATIVE CURSOR
============================================ */

.cursor-ring {

  position: fixed;

  width: 54px;
  height: 54px;

  top: 0;
  left: 0;

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

  border:

    1px solid
    rgba(65,164,255,.55);

  border-radius: 50%;

  background:

    radial-gradient(
      circle,
      rgba(65,164,255,.08),
      transparent 70%
    );

  box-shadow:

    0 0 25px
    rgba(65,164,255,.08);

  pointer-events: none;

  z-index: 999998;

  transition:

    width .25s ease,

    height .25s ease,

    border-color .25s ease,

    background .25s ease;

}


.cursor-pointer {

  position: fixed;

  top: 0;
  left: 0;

  width: 24px;
  height: 24px;

  transform:
    translate(-5px,-4px);

  pointer-events: none;

  z-index: 999999;

  transition:
    transform .2s ease;

}


.cursor-arrow {

  width: 19px;
  height: 23px;

  background:

    linear-gradient(
      135deg,
      #ffffff,
      #9fd3ff 45%,
      #329bf5
    );

  clip-path:

    polygon(
      0 0,
      100% 44%,
      61% 55%,
      49% 100%,
      34% 93%,
      45% 57%,
      0 74%
    );

  filter:

    drop-shadow(
      0 0 7px
      rgba(65,164,255,.9)
    );

  transform:
    rotate(-7deg);

}


.cursor-ring.cursor-hover {

  width: 82px;
  height: 82px;

  border-color:
    rgba(65,164,255,.9);

  background:

    radial-gradient(
      circle,
      rgba(65,164,255,.15),
      transparent 70%
    );

}


.cursor-pointer.pointer-hover {

  transform:

    translate(-5px,-4px)
    scale(1.16);

}


.cursor-ring.cursor-click {

  width: 40px;

  height: 40px;

}



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

.header {

  position:
    absolute;

  top: 0;
  left: 0;

  width: 100%;

  height: 100px;

  z-index: 100;

}


.navbar {

  height: 100%;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

}


.logo img {

  width: 190px;

  height: auto;

}


.nav-menu {

  display: flex;

  align-items: center;

  gap: 38px;

}


.nav-menu a {

  position: relative;

  color:
    var(--grey);

  font-size: 13px;

  transition:
    color .3s ease;

}


.nav-menu a:hover,
.nav-menu a.active {

  color:
    var(--white);

}


.nav-menu a.active::after {

  content: "";

  position: absolute;

  width: 22px;
  height: 2px;

  left: 0;

  bottom: -12px;

  background:
    var(--bright-blue);

}


.nav-button {

  display: flex;

  align-items: center;

  gap: 10px;

  padding:
    12px 22px;

  border:

    1px solid
    rgba(65,164,255,.45);

  border-radius:
    50px;

  font-size:
    13px;

  transition:
    .3s ease;

}


.nav-button:hover {

  border-color:
    var(--bright-blue);

  background:
    rgba(20,93,160,.18);

}



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

.hero {

  min-height:
    100vh;

  position:
    relative;

  overflow:
    hidden;

  padding:

    145px
    0
    0;

}



/* GRID BACKGROUND */

.hero-grid-background {

  position: absolute;

  inset: 0;

  opacity: .11;

  background-image:

    linear-gradient(
      rgba(65,164,255,.06) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(65,164,255,.06) 1px,
      transparent 1px
    );

  background-size:
    75px 75px;

  mask-image:

    linear-gradient(
      to bottom,
      rgba(0,0,0,.75),
      transparent 92%
    );

}


/* BACKGROUND GLOWS */

.hero-light {

  position: absolute;

  border-radius: 50%;

  filter:
    blur(170px);

  pointer-events: none;

}


.hero-light-1 {

  width: 550px;
  height: 550px;

  background:
    rgba(20,93,160,.15);

  top: 12%;

  left: 40%;

}


.hero-light-2 {

  width: 350px;
  height: 350px;

  background:
    rgba(65,164,255,.06);

  top: 22%;

  right: -100px;

}



/* HERO LAYOUT */

.hero-layout {

  display: grid;

  grid-template-columns:

    1.05fr
    .95fr
    .55fr;

  align-items: center;

  gap: 35px;

  min-height: 650px;

}



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

.small-title {

  display: block;

  margin-bottom: 24px;

  color:
    var(--bright-blue);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 2px;

}


.hero-left h1 {

  font-family:
    "Anton",
    sans-serif;

  font-size:

    clamp(
      70px,
      7vw,
      108px
    );

  line-height:
    .91;

  font-weight:
    400;

  letter-spacing:
    -1px;

}


.hero-left h1 span {

  display: block;

  color:
    var(--bright-blue);

  text-shadow:

    0 0 45px
    rgba(65,164,255,.08);

}


.hero-description {

  max-width: 430px;

  margin-top: 28px;

  color:
    var(--grey);

  font-size: 14px;

  line-height: 1.8;

}


.hero-buttons {

  display: flex;

  align-items: center;

  gap: 28px;

  margin-top: 35px;

}


.primary-button {

  display:
    inline-flex;

  align-items:
    center;

  gap: 14px;

  padding:
    15px 23px;

  border-radius: 5px;

  background:

    linear-gradient(
      135deg,
      #145da0,
      #237ac4
    );

  font-size: 13px;

  box-shadow:

    0 14px 35px
    rgba(20,93,160,.18);

  transition:
    .3s ease;

}


.primary-button:hover {

  transform:
    translateY(-3px);

  box-shadow:

    0 20px 45px
    rgba(65,164,255,.20);

}


.showreel-button {

  display: flex;

  align-items: center;

  gap: 12px;

  font-size: 13px;

}


.play-button {

  width: 38px;
  height: 38px;

  display: grid;

  place-items: center;

  border:

    1px solid
    rgba(65,164,255,.35);

  border-radius: 50%;

  background:
    rgba(20,93,160,.08);

  font-size: 8px;

}



/* ============================================
   HERO CREATIVE ART
============================================ */

.hero-art {

  position: relative;

  height: 585px;

  display: flex;

  align-items: center;

  justify-content: center;

}



/* ============================================
   NEW GLASS DISC
============================================ */

.creative-disc {

  position: relative;

  width: 375px;
  height: 375px;

  border-radius: 50%;

  display: grid;

  place-items: center;

  isolation: isolate;

  animation:

    discFloat
    7s
    ease-in-out
    infinite;

}



/* OUTER BLUE GLOW */

.disc-outer-glow {

  position: absolute;

  inset: -35px;

  border-radius: 50%;

  background:

    radial-gradient(
      circle,
      rgba(65,164,255,.18),
      rgba(20,93,160,.06) 50%,
      transparent 72%
    );

  filter:
    blur(25px);

  z-index: -4;

}



/* MAIN GLASS SURFACE */

.disc-glass {

  position: absolute;

  inset: 0;

  border-radius: 50%;

  background:

    radial-gradient(
      circle at 34% 28%,
      rgba(75,175,255,.46) 0%,
      rgba(20,93,160,.40) 17%,
      rgba(8,42,77,.82) 43%,
      rgba(3,12,23,.96) 74%,
      #010307 100%
    );

  border:

    1px solid
    rgba(110,195,255,.28);

  box-shadow:

    inset 28px 28px 60px
    rgba(92,182,255,.10),

    inset -35px -40px 90px
    rgba(0,0,0,.85),

    0 0 0 10px
    rgba(9,35,62,.20),

    0 25px 80px
    rgba(0,0,0,.50),

    0 0 80px
    rgba(20,93,160,.15);

}



/* INNER RINGS */

.disc-ring {

  position: absolute;

  border-radius: 50%;

  pointer-events: none;

}


.disc-ring-1 {

  width: 76%;
  height: 76%;

  border:

    1px solid
    rgba(100,190,255,.18);

  box-shadow:

    inset 0 0 35px
    rgba(65,164,255,.07);

}


.disc-ring-2 {

  width: 57%;
  height: 57%;

  border:

    1px solid
    rgba(150,215,255,.10);

}



/* CENTRAL CONTENT */

.disc-center {

  position: relative;

  z-index: 4;

  text-align: center;

  display: flex;

  flex-direction: column;

  align-items: center;

}


.disc-center span {

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

  font-size: 8px;

  letter-spacing: 4px;

  margin-bottom: 4px;

}


.disc-center strong {

  font-family:
    "Anton",
    sans-serif;

  font-size: 43px;

  line-height: 1;

  letter-spacing: 2px;

  font-weight: 400;

  color:
    #ffffff;

  text-shadow:

    0 0 30px
    rgba(65,164,255,.22);

}


.disc-center small {

  color:
    var(--bright-blue);

  font-size: 9px;

  letter-spacing: 5px;

  margin-top: 8px;

}



/* GLASS REFLECTION */

.disc-reflection {

  position: absolute;

  width: 155px;
  height: 230px;

  top: 25px;
  left: 58px;

  border-radius: 50%;

  transform:
    rotate(28deg);

  background:

    linear-gradient(
      120deg,
      rgba(255,255,255,.16),
      rgba(120,205,255,.05) 45%,
      transparent 70%
    );

  filter:
    blur(15px);

  pointer-events: none;

}



/* TEXTURE */

.disc-noise {

  position: absolute;

  inset: 0;

  border-radius: 50%;

  opacity: .07;

  background-image:

    repeating-radial-gradient(
      circle at center,
      rgba(255,255,255,.18) 0px,
      rgba(255,255,255,.18) 1px,
      transparent 1px,
      transparent 7px
    );

}



/* DISC FLOAT */

@keyframes discFloat {

  0%,
  100% {

    transform:
      translateY(0)
      rotate(0deg);

  }

  50% {

    transform:
      translateY(-12px)
      rotate(1.5deg);

  }

}



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

.orbit {

  position: absolute;

  border-radius: 50%;

  pointer-events: none;

}


.orbit-a {

  width: 465px;
  height: 465px;

  border:

    1px solid
    rgba(65,164,255,.16);

  animation:

    orbitSpin
    24s
    linear
    infinite;

}


.orbit-b {

  width: 515px;
  height: 315px;

  border:

    1px solid
    rgba(65,164,255,.12);

  transform:
    rotate(29deg);

}


.orbit-c {

  width: 330px;
  height: 520px;

  border:

    1px solid
    rgba(65,164,255,.09);

  transform:
    rotate(-26deg);

}


@keyframes orbitSpin {

  from {

    transform:
      rotate(0deg);

  }

  to {

    transform:
      rotate(360deg);

  }

}



/* ============================================
   FLOATING SKILL TAGS
============================================ */

.skill-tag {

  position: absolute;

  z-index: 20;

  display: flex;

  align-items: center;

}


.tag-dot {

  width: 13px;
  height: 13px;

  flex:
    0 0 13px;

  border-radius: 50%;

  background:
    var(--white);

  box-shadow:

    0 0 15px
    rgba(65,164,255,.40);

  position: relative;

  z-index: 2;

}


.tag-pill {

  margin-left: -5px;

  padding:

    10px
    18px
    10px
    20px;

  border-radius:
    50px;

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

  font-size: 11px;

  white-space: nowrap;

  background:

    linear-gradient(
      90deg,
      rgba(15,58,100,.72),
      rgba(5,20,36,.70)
    );

  border:

    1px solid
    rgba(65,164,255,.24);

  backdrop-filter:
    blur(16px);

  box-shadow:

    0 10px 30px
    rgba(0,0,0,.32),

    inset 0 0 18px
    rgba(65,164,255,.025);

  transition:

    transform .3s ease,

    border-color .3s ease,

    box-shadow .3s ease,

    background .3s ease;

}


.skill-tag:hover
.tag-pill {

  transform:
    translateX(4px)
    scale(1.04);

  border-color:
    rgba(65,164,255,.65);

  background:

    linear-gradient(
      90deg,
      rgba(20,93,160,.85),
      rgba(5,22,40,.78)
    );

  box-shadow:

    0 14px 35px
    rgba(0,0,0,.40),

    0 0 25px
    rgba(65,164,255,.13);

}



/* ============================================
   TAG POSITIONS
============================================ */

.tag-video {

  top: 70px;

  left: -12px;

  animation:

    tagFloatA
    6s
    ease-in-out
    infinite;

}


.tag-motion {

  top: 80px;

  right: -16px;

  animation:

    tagFloatB
    7s
    ease-in-out
    infinite;

}


.tag-graphic {

  left: -52px;

  top: 245px;

  animation:

    tagFloatB
    6.5s
    ease-in-out
    infinite;

}


.tag-social {

  right: -70px;

  top: 260px;

  animation:

    tagFloatA
    7.5s
    ease-in-out
    infinite;

}


.tag-print {

  left: 15px;

  bottom: 75px;

  animation:

    tagFloatA
    8s
    ease-in-out
    infinite;

}


.tag-book {

  right: 10px;

  bottom: 70px;

  animation:

    tagFloatB
    6.8s
    ease-in-out
    infinite;

}



@keyframes tagFloatA {

  0%,
  100% {

    transform:
      translateY(0);

  }

  50% {

    transform:
      translateY(-9px);

  }

}


@keyframes tagFloatB {

  0%,
  100% {

    transform:
      translateY(0);

  }

  50% {

    transform:
      translateY(10px);

  }

}



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

.curved-text {

  position: absolute;

  width: 505px;

  height: 505px;

  pointer-events: none;

  opacity: .48;

  animation:

    curvedSpin
    35s
    linear
    infinite;

}


.curved-text text {

  fill:
    rgba(65,164,255,.75);

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

  font-size:
    10px;

  letter-spacing:
    5px;

  text-transform:
    uppercase;

}


@keyframes curvedSpin {

  from {

    transform:
      rotate(0deg);

  }

  to {

    transform:
      rotate(360deg);

  }

}



/* ============================================
   FREELANCE BADGE
============================================ */

.floating-badge {

  position: absolute;

  right: 20px;

  bottom: 18px;

  z-index: 30;

  padding:

    14px
    18px;

  border-radius:
    12px;

  background:

    rgba(
      3,
      11,
      20,
      .84
    );

  border:

    1px solid
    rgba(65,164,255,.20);

  backdrop-filter:
    blur(14px);

  box-shadow:

    0 15px 45px
    rgba(0,0,0,.45);

}


.floating-badge span {

  display: block;

  margin-bottom: 5px;

  color:
    var(--grey);

  font-size: 7px;

  letter-spacing:
    1.4px;

}


.floating-badge strong {

  color:
    white;

  font-size: 12px;

}



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

.hero-right {

  position: relative;

  z-index: 10;

}


.mini-title {

  display: block;

  margin-bottom: 14px;

  color:
    var(--bright-blue);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 2px;

}


.hero-right p {

  color:
    var(--grey);

  font-size: 13px;

  line-height: 1.8;

}


.hero-link {

  display: inline-block;

  margin-top: 17px;

  font-size: 12px;

}


.hero-divider {

  height: 1px;

  margin:
    30px 0;

  background:
    var(--border);

}


.hero-right ul {

  list-style: none;

}


.hero-right li {

  margin-bottom: 8px;

  color:
    var(--grey);

  font-size: 12px;

}



/* ============================================
   SOFTWARE STRIP
============================================ */

.software-strip {

  height: 95px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  border-top:

    1px solid
    var(--border);

  color:
    #687481;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 1.5px;

}



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

.section-label {

  display: block;

  margin-bottom: 20px;

  color:
    var(--bright-blue);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 2.5px;

}


.simple-section {

  padding:
    150px 0;

}


.dark-section {

  background:
    var(--navy);

}


.simple-section h2,
.portfolio-heading h2,
.contact h2 {

  font-family:
    "Anton",
    sans-serif;

  font-size:

    clamp(
      50px,
      6vw,
      82px
    );

  line-height: .95;

  font-weight: 400;

}


.simple-section h2 span,
.portfolio-heading h2 span,
.contact h2 span {

  color:
    var(--bright-blue);

}



/* ============================================
   PORTFOLIO
============================================ */

.portfolio-section {

  padding:

    130px
    0
    150px;

  overflow: hidden;

  background:
    var(--black-2);

}


.portfolio-heading {

  display: flex;

  align-items: flex-end;

  justify-content:
    space-between;

  margin-bottom:
    65px;

}


.portfolio-heading > p {

  width: 330px;

  color:
    var(--grey);

  font-size: 13px;

  line-height: 1.8;

}



/* ============================================
   PORTFOLIO SLIDER
============================================ */

.portfolio-slider {

  position: relative;

  width: 100%;

  padding:
    35px 0 55px;

  overflow: hidden;

}


.portfolio-track {

  display: flex;

  align-items: center;

  width: max-content;

  gap: 30px;

  animation:

    portfolioScroll
    28s
    linear
    infinite;

}


@keyframes portfolioScroll {

  from {

    transform:
      translateX(0);

  }

  to {

    transform:
      translateX(
        calc(-50% - 15px)
      );

  }

}



/* ============================================
   DESIGN CARDS
============================================ */

.design-card {

  position: relative;

  flex:
    0 0 auto;

  width: 360px;

  padding: 12px;

  border:

    1px solid
    rgba(65,164,255,.18);

  border-radius: 36px;

  background:

    linear-gradient(
      145deg,
      rgba(13,25,38,.98),
      rgba(3,7,11,.98)
    );

  box-shadow:

    0 30px 80px
    rgba(0,0,0,.48);

  transition:

    transform .45s ease,

    border-color .4s ease,

    box-shadow .4s ease;

}


.design-card:hover {

  transform:

    translateY(-12px)
    scale(1.018);

  border-color:
    rgba(65,164,255,.55);

  box-shadow:

    0 40px 100px
    rgba(0,0,0,.58),

    0 0 40px
    rgba(65,164,255,.10);

}


.design-image {

  width: 100%;

  height: 455px;

  overflow: hidden;

  border-radius: 27px;

}


.design-image img {

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:

    transform .7s ease,

    filter .5s ease;

}


.design-card:hover
.design-image img {

  transform:
    scale(1.045);

  filter:
    brightness(1.05);

}



/* ============================================
   SLIDER SIDE FADES
============================================ */

.slider-fade {

  position: absolute;

  top: 0;
  bottom: 0;

  width: 150px;

  z-index: 5;

  pointer-events: none;

}


.slider-fade-left {

  left: 0;

  background:

    linear-gradient(
      90deg,
      var(--black-2),
      transparent
    );

}


.slider-fade-right {

  right: 0;

  background:

    linear-gradient(
      -90deg,
      var(--black-2),
      transparent
    );

}



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

.contact {

  padding:
    160px 0;

  text-align: center;

}


.contact h2 {

  max-width: 760px;

  margin: auto;

}


.contact-email {

  display: inline-block;

  margin-top: 45px;

  padding-bottom: 8px;

  font-size: 25px;

  border-bottom:

    1px solid
    var(--blue);

}



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

.footer {

  padding:
    30px 0;

  border-top:

    1px solid
    var(--border);

}


.footer-content {

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  color:
    var(--grey);

  font-size: 11px;

}


.footer-content div {

  display: flex;

  gap: 25px;

}



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

@media
(max-width: 1000px) {


  .nav-menu {
    display: none;
  }


  .hero-layout {

    grid-template-columns:
      1fr 1fr;

  }


  .hero-right {
    display: none;
  }


  .hero-art {

    transform:
      scale(.88);

  }


}



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

@media
(max-width: 700px) {


  body,
  a,
  button {

    cursor: auto;

  }


  .cursor-ring,
  .cursor-pointer {

    display: none;

  }


  .container {

    width:
      calc(100% - 34px);

  }


  .header {

    height: 80px;

  }


  .logo img {

    width: 145px;

  }


  .nav-button {

    display: none;

  }


  .hero {

    padding-top: 120px;

  }


  .hero-layout {

    display: flex;

    flex-direction: column;

    gap: 35px;

  }


  .hero-left {

    width: 100%;

  }


  .hero-left h1 {

    font-size: 63px;

  }


  .hero-art {

    width: 100%;

    height: 500px;

    transform:
      scale(.73);

  }


  .creative-disc {

    width: 350px;

    height: 350px;

  }


  .tag-video {

    left: 0;

  }


  .tag-motion {

    right: 0;

  }


  .tag-graphic {

    left: -15px;

  }


  .tag-social {

    right: -20px;

  }


  .software-strip {

    overflow-x: auto;

    justify-content:
      flex-start;

    gap: 45px;

  }


  .portfolio-heading {

    display: block;

  }


  .portfolio-heading > p {

    width: 100%;

    margin-top: 25px;

  }


  .portfolio-section {

    padding:

      90px
      0
      110px;

  }


  .portfolio-track {

    gap: 18px;

    animation-duration:
      24s;

  }


  .design-card {

    width: 275px;

    padding: 8px;

    border-radius: 28px;

  }


  .design-image {

    height: 350px;

    border-radius: 21px;

  }


  .slider-fade {

    width: 45px;

  }


  .simple-section {

    padding:
      100px 0;

  }


  .contact {

    padding:
      110px 0;

  }


  .contact-email {

    font-size: 17px;

  }


  .footer-content {

    flex-direction:
      column;

    gap: 18px;

  }


}