:root {

  --bg: #0d0d0d;

  --surface: #151515;

  --surface-light: #1c1c1c;



  --text: #f5f5f5;

  --muted: #a9a9a9;



  --accent: #ff8c1a;

  --accent-light: #ffb65c;



  --border: rgba(255, 255, 255, 0.1);

}





* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}





html {

  scroll-behavior: smooth;

}





body {

  min-height: 100vh;



  font-family:

    Inter,

    system-ui,

    -apple-system,

    BlinkMacSystemFont,

    "Segoe UI",

    sans-serif;



  color: var(--text);



  background:

    radial-gradient(

      circle at 20% 20%,

      rgba(255, 140, 26, 0.08),

      transparent 30%

    ),

    radial-gradient(

      circle at 80% 80%,

      rgba(255, 140, 26, 0.06),

      transparent 30%

    ),

    var(--bg);



  overflow-x: hidden;

}





/* =========================================

   NAVBAR

========================================= */



.nav {

  position: relative;

  z-index: 20;



  height: 85px;

  padding: 10px 5%;



  display: flex;

  align-items: center;



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

}





/* LOGO */



.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo img {
  height: 64px;
  width: 200px;
  object-fit: cover;
}





/* NAVIGATION */



.nav ul {

  position: absolute;



  left: 50%;

  top: 50%;



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



  display: flex;

  align-items: center;



  gap: 35px;



  margin: 0;

  padding: 0;



  list-style: none;

}





.nav a {

  color: var(--muted);



  text-decoration: none;



  font-size: 0.95rem;



  transition: color 0.25s ease;

}





.nav a:hover {

  color: white;

}



/* =========================================================

   ANIMATED GEOMETRIC BACKGROUND

========================================================= */



.hiring-art {

  position: fixed;

  pointer-events: none;

  z-index: 0;



  width: 360px;

  height: 360px;



  opacity: 0.18;



  user-select: none;



  will-change: transform;

}





/* =========================================================

   COMMON GEOMETRY

========================================================= */



.hiring-art span {

  position: absolute;

  display: block;

}





/* =========================================================

   ORANGE CIRCLE

========================================================= */



.geo-circle {

  width: 190px;

  height: 190px;



  border-radius: 50%;



  background: rgba(255, 140, 26, 0.10);



  border: 2px solid rgba(255, 140, 26, 0.45);



  top: 75px;

  left: 75px;

}





/* =========================================================

   RING

========================================================= */



.geo-ring {

  width: 120px;

  height: 120px;



  border-radius: 50%;



  border: 2px solid rgba(255, 182, 92, 0.55);



  top: 110px;

  left: 110px;

}





/* =========================================================

   SMALL DOT

========================================================= */



.geo-dot {

  width: 18px;

  height: 18px;



  border-radius: 50%;



  background: var(--accent);



  top: 45px;

  left: 220px;



  box-shadow:

    0 0 25px rgba(255, 140, 26, 0.35);

}





/* =========================================================

   DIAGONAL LINE

========================================================= */



.geo-line {

  width: 180px;

  height: 2px;



  background: rgba(255, 140, 26, 0.4);



  top: 180px;

  left: 90px;



  transform: rotate(45deg);

}





/* =========================================================

   SQUARE

========================================================= */



.geo-square {

  width: 170px;

  height: 170px;



  border: 2px solid rgba(255, 140, 26, 0.35);



  background: rgba(255, 140, 26, 0.05);



  top: 75px;

  left: 85px;



  transform: rotate(25deg);



  border-radius: 20px;

}





/* =========================================================

   TRIANGLE

========================================================= */



.geo-triangle {

  width: 0;

  height: 0;



  border-left: 105px solid transparent;

  border-right: 105px solid transparent;

  border-bottom: 180px solid rgba(255, 140, 26, 0.10);



  top: 65px;

  left: 75px;



  transform: rotate(-12deg);

}





/* =========================================================

   GEOMETRY — ART 1

========================================================= */



.art-1 {

  width: 360px;

  height: 360px;



  left: -100px;

  top: 120px;



  transform: rotate(-8deg);

}





/* =========================================================

   GEOMETRY — ART 2

========================================================= */



.art-2 {

  width: 360px;

  height: 360px;



  right: -100px;

  top: 180px;



  transform: rotate(10deg);

}





/* =========================================================

   GEOMETRY — ART 3

========================================================= */



.art-3 {

  width: 390px;

  height: 360px;



  left: 50%;

  bottom: -170px;



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

}





/* =========================================================

   ART 3 VARIATION

========================================================= */



.art-3 .geo-circle {

  width: 150px;

  height: 150px;



  left: 110px;

  top: 100px;

}



.art-3 .geo-ring {

  width: 220px;

  height: 220px;



  left: 75px;

  top: 65px;



  border-color: rgba(255, 140, 26, 0.25);

}



.art-3 .geo-dot {

  left: 265px;

  top: 90px;

}





/* =========================================================

   ART 2 VARIATION

========================================================= */



.art-2 .geo-ring {

  width: 210px;

  height: 210px;



  left: 70px;

  top: 70px;

}



.art-2 .geo-dot {

  left: 70px;

  top: 60px;

}





/* =========================================================

   SUBTLE CSS MOVEMENT

========================================================= */



.art-1 .geo-ring {

  animation: geometrySpin 18s linear infinite;

}



.art-1 .geo-dot {

  animation: geometryPulse 2.5s ease-in-out infinite;

}



.art-2 .geo-square {

  animation: geometryRotate 12s linear infinite;

}



.art-2 .geo-ring {

  animation: geometrySpinReverse 20s linear infinite;

}



.art-2 .geo-dot {

  animation: geometryFloat 3s ease-in-out infinite;

}



.art-3 .geo-triangle {

  animation: geometryFloat 4s ease-in-out infinite;

}



.art-3 .geo-ring {

  animation: geometrySpin 24s linear infinite;

}





/* =========================================================

   ANIMATIONS

========================================================= */



@keyframes geometrySpin {



  from {

    transform: rotate(0deg);

  }



  to {

    transform: rotate(360deg);

  }



}





@keyframes geometrySpinReverse {



  from {

    transform: rotate(360deg);

  }



  to {

    transform: rotate(0deg);

  }



}





@keyframes geometryRotate {



  from {

    transform: rotate(25deg);

  }



  to {

    transform: rotate(385deg);

  }



}





@keyframes geometryPulse {



  0%,

  100% {

    transform: scale(1);

    opacity: 0.7;

  }



  50% {

    transform: scale(1.5);

    opacity: 1;

  }



}





@keyframes geometryFloat {



  0%,

  100% {

    transform: translateY(0);

  }



  50% {

    transform: translateY(-22px);

  }



}





/* =========================================================

   TABLET

========================================================= */



@media (max-width: 950px) {



  .art-1 {

    left: -160px;

    top: 140px;

  }



  .art-2 {

    right: -150px;

    top: 400px;

  }



  .art-3 {

    display: none;

  }



}





/* =========================================================

   MOBILE

========================================================= */



@media (max-width: 600px) {



  .hiring-art {

    opacity: 0.10;

    transform: scale(0.7);

  }



  .art-1 {

    left: -190px;

    top: 130px;

  }



  .art-2 {

    right: -200px;

    top: 480px;

  }



}





/* =========================================

   MAIN

========================================= */



.hiring-page {

  position: relative;

  z-index: 2;



  min-height: calc(100vh - 85px);



  padding: 80px 5% 120px;

}





.hiring-container {



  width: min(1250px, 100%);



  margin: 0 auto;



  display: grid;



  grid-template-columns:

    minmax(350px, 0.8fr)

    minmax(500px, 1.2fr);



  gap: 100px;



  align-items: center;

}





/* =========================================

   LEFT CONTENT

========================================= */



.hiring-intro {

  max-width: 550px;

}





.tag {

  margin-bottom: 22px;



  color: var(--accent);



  font-size: 0.8rem;



  letter-spacing: 0.22em;



  font-weight: 700;

}





.hiring-intro h1 {



  font-size: clamp(

    4rem,

    7vw,

    7rem

  );



  line-height: 0.9;



  letter-spacing: -0.06em;



  font-weight: 800;



  margin-bottom: 35px;

}





.hiring-intro h1 span {

  color: var(--accent);

}





.intro-text {



  max-width: 500px;



  color: var(--muted);



  font-size: 1.05rem;



  line-height: 1.8;



  margin-bottom: 22px;

}





.intro-text.small {

  font-size: 0.95rem;

}





.hiring-note {



  display: inline-flex;



  align-items: center;



  gap: 12px;



  margin-top: 25px;



  padding: 14px 20px;



  border-radius: 999px;



  background: rgba(255,255,255,0.04);



  border: 1px solid rgba(255,140,26,0.15);



  color: #ccc;



  font-size: 0.9rem;

}





.hiring-note span {

  color: var(--accent);



  font-size: 1.2rem;

}





/* =========================================

   FORM CONTAINER

========================================= */



.hiring-form-wrapper {



  position: relative;



  padding: 45px;



  border-radius: 32px;



  background:

    linear-gradient(

      145deg,

      rgba(30,30,30,0.92),

      rgba(15,15,15,0.92)

    );



  border: 1px solid rgba(255,255,255,0.09);



  box-shadow:

    0 35px 100px rgba(0,0,0,0.45);



  backdrop-filter: blur(18px);

}





.form-header {

  margin-bottom: 35px;

}





.form-header p {



  color: var(--accent);



  font-size: 0.75rem;



  letter-spacing: 0.18em;



  font-weight: 700;



  margin-bottom: 10px;

}





.form-header h2 {



  font-size: clamp(

    2rem,

    3vw,

    3rem

  );



  line-height: 1;



  letter-spacing: -0.04em;

}





.form-header h2 span {

  color: var(--accent);

}





/* =========================================

   FORM

========================================= */



.hiring-form {



  display: grid;



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



  gap: 22px;

}





.form-group {



  display: flex;



  flex-direction: column;



  gap: 8px;

}





.form-group:nth-last-of-type(2),

.form-group:last-of-type {

  grid-column: 1 / -1;

}





.form-group label {



  color: #ddd;



  font-size: 0.85rem;



  font-weight: 600;

}





.form-group label span {

  color: #777;



  font-weight: 400;

}





/* INPUTS */



.form-group input,

.form-group select,

.form-group textarea {



  width: 100%;



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



  outline: none;



  border-radius: 14px;



  background: rgba(255,255,255,0.045);



  color: white;



  padding: 15px 17px;



  font-size: 0.95rem;



  transition:

    border-color 0.25s ease,

    background 0.25s ease,

    box-shadow 0.25s ease;

}





.form-group input,

.form-group select {

  height: 52px;

}





.form-group textarea {



  resize: vertical;



  min-height: 120px;

}





.form-group input::placeholder,

.form-group textarea::placeholder {

  color: #666;

}





.form-group select {

  appearance: none;



  cursor: pointer;



  background-image:

    linear-gradient(45deg, transparent 50%, #aaa 50%),

    linear-gradient(135deg, #aaa 50%, transparent 50%);



  background-position:

    calc(100% - 20px) 22px,

    calc(100% - 14px) 22px;



  background-size:

    6px 6px,

    6px 6px;



  background-repeat: no-repeat;

}





.form-group select option {

  background: #171717;



  color: white;

}





.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {



  border-color: var(--accent);



  background: rgba(255,140,26,0.04);



  box-shadow:

    0 0 0 3px rgba(255,140,26,0.08);

}











/* =========================================

   SUBMIT BUTTON

========================================= */



.submit-button {



  grid-column: 1 / -1;



  width: 100%;



  height: 58px;



  margin-top: 5px;



  border: none;



  border-radius: 999px;



  display: flex;



  align-items: center;



  justify-content: center;



  gap: 15px;



  background:

    linear-gradient(

      135deg,

      var(--accent),

      var(--accent-light)

    );



  color: #111;



  font-weight: 800;



  cursor: pointer;



  transition:

    transform 0.25s ease,

    box-shadow 0.25s ease;

}





.submit-button:hover {



  transform: translateY(-3px);



  box-shadow:

    0 18px 45px rgba(255,140,26,0.25);

}





.submit-button .arrow {



  font-size: 1.3rem;



  transition: transform 0.25s ease;

}





.submit-button:hover .arrow {

  transform: translateX(5px);

}





.form-note {



  grid-column: 1 / -1;



  text-align: center;



  color: #555;



  font-size: 0.75rem;



  margin-top: -8px;

}





/* =========================================

   TABLET

========================================= */



@media (max-width: 950px) {



  .hiring-container {



    grid-template-columns: 1fr;



    gap: 60px;



    max-width: 700px;

  }





  .hiring-intro {



    max-width: 650px;



    text-align: center;



    margin: 0 auto;

  }





  .intro-text {



    margin-left: auto;

    margin-right: auto;

  }





  .hiring-note {

    margin-left: auto;

    margin-right: auto;

  }





 





/* =========================================

   MOBILE

========================================= */



@media (max-width: 600px) {



  .nav {



    height: 70px;



    padding: 8px 5%;

  }





  .logo img {



    width: 150px;



    height: 50px;

  }





  .nav ul {



    display: none;

  }





  .hiring-page {



    padding:

      55px 5%

      80px;

  }





  .hiring-intro h1 {



    font-size: clamp(

      3.4rem,

      16vw,

      5rem

    );

  }





  .hiring-form-wrapper {



    padding: 28px 20px;



    border-radius: 24px;

  }





  .hiring-form {



    grid-template-columns: 1fr;



    gap: 18px;

  }





  .form-group:nth-last-of-type(2),

  .form-group:last-of-type {



    grid-column: auto;

  }





  .submit-button {



    grid-column: auto;

  }





  .form-note {



    grid-column: auto;

  }





  .hiring-art {



    opacity: 0.07;



    filter:

      blur(1px)

      saturate(0.6);

  }









}

.nav,

.hiring-intro .tag,

.hiring-intro h1,

.hiring-intro .intro-text,

.hiring-note,

.form-header,

.hiring-form-wrapper {

    will-change: transform, opacity;

}