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

html,
body{
  width:100%;
  min-height:100%;
  overflow-x:hidden;
  font-family:Arial,sans-serif;
  scroll-behavior:smooth;
}

body{
  background:black;
  color:white;
}

body::after{
  content:'';
  position:fixed;
  inset:0;
  background:radial-gradient(circle, transparent 40%, rgba(0,0,0,.5) 100%);
  pointer-events:none;
  z-index:2;
}

.noise{
  position:fixed;
  inset:0;
  background:url('assets/noise.png');
  opacity:.04;
  pointer-events:none;
  z-index:1000;
}

.light{
  position:fixed;
  width:500px;
  height:500px;
  border-radius:50%;
  filter:blur(140px);
  opacity:.12;
  pointer-events:none;
}

.light1{
  background:white;
  top:-150px;
  left:-100px;
  animation:move1 10s infinite alternate;
}

.light2{
  background:#555;
  bottom:-200px;
  right:-100px;
  animation:move2 12s infinite alternate;
}

@keyframes move1{
  from{ transform:translate(0,0); }
  to{ transform:translate(100px,50px); }
}

@keyframes move2{
  from{ transform:translate(0,0); }
  to{ transform:translate(-100px,-50px); }
}

/* PAGES */

.page{
  display:none;
}

.page.active{
  display:block;
  animation:pageIn .7s ease forwards;
}

@keyframes pageIn{
  from{
    opacity:0;
    filter:blur(14px);
    transform:scale(1.02);
  }

  to{
    opacity:1;
    filter:blur(0);
    transform:scale(1);
  }
}

.page-transition{
  position:fixed;
  inset:0;
  background:black;
  opacity:0;
  pointer-events:none;
  z-index:3000;
  transition:.45s ease;
}

.page-transition.active{
  opacity:1;
}

/* NAV */

nav{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  width:90%;
  padding:22px 35px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:999;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(20px);
  border-radius:20px;
}

.logo{
  font-size:18px;
  letter-spacing:5px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:24px;
}

.nav-links a,
.nav-switch,
.lang-btn{
  color:white;
  text-decoration:none;
  font-size:13px;
  letter-spacing:3px;
  opacity:.7;
  transition:.4s;
}

.nav-links a:hover,
.nav-switch:hover,
.lang-btn:hover{
  opacity:1;
}

.nav-switch,
.lang-btn{
  padding:10px 16px;
  border-radius:100px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  cursor:pointer;
}

/* HERO */

.hero-section{
  position:relative;
  width:100%;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}

.background-video,
.photo-bg{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-3;
}

.overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.48);
  z-index:-2;
}

.photo-hero .overlay{
  background:rgba(0,0,0,.35);
}

.hero-content{
  width:85%;
  position:relative;
  z-index:5;
}

.small-title{
  font-size:12px;
  letter-spacing:6px;
  opacity:.5;
}

.hero-content h1{
  font-size:120px;
  line-height:.9;
  margin-top:20px;
  letter-spacing:-3px;
}

.hero-content p,
.section-container p{
  margin-top:30px;
  max-width:780px;
  font-size:20px;
  line-height:1.8;
  opacity:.7;
}

.main-btn{
  display:inline-block;
  margin-top:40px;
  padding:18px 35px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:white;
  text-decoration:none;
  letter-spacing:2px;
  font-size:12px;
  border-radius:100px;
  transition:.4s;
}

.main-btn:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.12);
}

/* CONTENT */

.content-section{
  min-height:100vh;
  padding:135px 0;
  position:relative;
  z-index:5;
}

.section-container,
.projects-grid{
  width:85%;
  margin:0 auto;
}

.section-container h2{
  margin-top:20px;
  font-size:80px;
  line-height:1;
}

.projects-grid{
  margin-top:65px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:25px;
}

.project-card{
  height:510px;
  position:relative;
  overflow:hidden;
  display:block;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  text-decoration:none;
  color:white;
  background:rgba(255,255,255,.03);
  transition:.5s;
}

.project-card:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 80px rgba(255,255,255,.08);
}

.project-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.7s;
}

.project-card:hover img{
  transform:scale(1.06);
}

.project-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.85), transparent 60%);
}

.project-info{
  position:absolute;
  left:30px;
  bottom:30px;
  z-index:3;
}

.project-info span{
  font-size:11px;
  letter-spacing:4px;
  opacity:.7;
}

.project-info h3{
  margin-top:10px;
  font-size:34px;
}

/* PHOTO PAGE */

#photoPage{
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.12), transparent 28%),
    linear-gradient(180deg, #111, #050505);
}

.photo-content{
  background:rgba(255,255,255,.015);
}

/* CONTACT */

.contact-links{
  margin-top:50px;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.contact-links a{
  color:white;
  text-decoration:none;
  font-size:24px;
  opacity:.7;
  transition:.3s;
}

.contact-links a:hover{
  opacity:1;
  transform:translateX(8px);
}

/* TABLET */

@media(max-width:1024px){
  .projects-grid{
    grid-template-columns:1fr 1fr;
  }

  .project-card{
    height:420px;
  }
}

/* MOBILE */

@media(max-width:768px){

  nav{
    top:12px;
    width:92%;
    padding:16px 18px;
    border-radius:16px;
    flex-direction:column;
    gap:14px;
  }

  .logo{
    font-size:14px;
    letter-spacing:3px;
  }

  .nav-links{
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
  }

  .nav-links a,
  .nav-switch,
  .lang-btn{
    font-size:10px;
    letter-spacing:1.4px;
  }

  .nav-switch,
  .lang-btn{
    padding:8px 12px;
  }

  .hero-content,
  .section-container,
  .projects-grid{
    width:88%;
  }

  .hero-content h1{
    font-size:56px;
    letter-spacing:-1px;
  }

  .section-container h2{
    font-size:46px;
  }

  .hero-content p,
  .section-container p{
    font-size:16px;
    line-height:1.7;
  }

  .content-section{
    padding:115px 0;
  }

  .projects-grid{
    grid-template-columns:1fr;
    gap:20px;
  }

  .project-card{
    height:310px;
  }

  .project-info h3{
    font-size:27px;
  }
}

@media(max-width:480px){

  .hero-content h1{
    font-size:46px;
  }

  .small-title{
    font-size:10px;
    letter-spacing:4px;
  }

  .main-btn{
    padding:15px 24px;
    font-size:10px;
  }
}
/* PHOTO LIGHTBOX */

.photo-lightbox{
  position:fixed;
  inset:0;
  z-index:5000;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:.35s ease;
}

.photo-lightbox.active{
  opacity:1;
  pointer-events:all;
}

.photo-lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.92);
  backdrop-filter:blur(20px);
}

.photo-lightbox-inner{
  position:relative;
  z-index:2;
  max-width:92vw;
  max-height:90vh;
  transform:scale(0.92) translateY(20px);
  transition:.4s cubic-bezier(0.34,1.56,0.64,1);
}

.photo-lightbox.active .photo-lightbox-inner{
  transform:scale(1) translateY(0);
}

.photo-lightbox-inner img{
  display:block;
  max-width:92vw;
  max-height:90vh;
  border-radius:16px;
  box-shadow:0 40px 120px rgba(0,0,0,0.8);
  object-fit:contain;
}

.photo-lightbox-close{
  position:absolute;
  top:-18px;
  right:-18px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.2);
  color:white;
  font-size:20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.3s;
  backdrop-filter:blur(10px);
  z-index:3;
}

.photo-lightbox-close:hover{
  background:rgba(255,255,255,0.2);
  transform:rotate(90deg);
}

.photo-lightbox-caption{
  position:absolute;
  bottom:-42px;
  left:0;
  right:0;
  text-align:center;
  font-size:11px;
  letter-spacing:4px;
  opacity:0.5;
}

/* MORE PHOTOS */

.more-photos-btn{
  width:85%;
  margin:55px auto 0;
  display:flex;
  justify-content:center;
}

.more-photos-gallery{
  width:100%;
  margin-top:35px;
  display:none;
  animation:fadeIn .7s ease;
}

.more-photos-gallery.active{
  display:block;
}

@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(30px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}
.video-card{
  position:relative;
  overflow:hidden;
  cursor:pointer;
}

.video-card video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
}

.video-card .play-btn{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:70px;
  height:70px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  border:2px solid rgba(255,255,255,0.5);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
  transition:.3s;
}

.video-card .play-btn svg{
  width:24px;
  height:24px;
  fill:white;
  margin-left:4px;
}

.video-card:hover .play-btn{
  transform:translate(-50%,-50%) scale(1.12);
  background:rgba(255,255,255,0.25);
}

.video-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.25);
  z-index:5;
  transition:.3s;
}

.video-card:hover::before{
  background:rgba(0,0,0,0.1);
}

/* VIDEO MODAL */

.video-modal{
  position:fixed;
  inset:0;
  z-index:5000;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:.35s ease;
}

.video-modal.active{
  opacity:1;
  pointer-events:all;
}

.video-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.88);
  backdrop-filter:blur(16px);
}

.video-modal-inner{
  position:relative;
  z-index:2;
  width:90%;
  max-width:1000px;
  transform:scale(0.92) translateY(20px);
  transition:.4s cubic-bezier(0.34,1.56,0.64,1);
}

.video-modal.active .video-modal-inner{
  transform:scale(1) translateY(0);
}

.video-modal-inner video{
  width:100%;
  border-radius:18px;
  display:block;
  max-height:80vh;
  background:black;
  box-shadow:0 40px 120px rgba(0,0,0,0.7);
}

.video-modal-close{
  position:absolute;
  top:-18px;
  right:-18px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.2);
  color:white;
  font-size:20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.3s;
  backdrop-filter:blur(10px);
  z-index:3;
}

.video-modal-close:hover{
  background:rgba(255,255,255,0.2);
  transform:rotate(90deg);
}
/* REVIEWS PAGE */

.reviews-nav-btn{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.25);
}

.reviews-hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:0;
  position:relative;
  background:
    radial-gradient(ellipse at 70% 50%, rgba(255,255,255,.04) 0%, transparent 60%),
    linear-gradient(135deg, #080808 0%, #111 50%, #0a0a0a 100%);
}

.reviews-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 80px,
      rgba(255,255,255,.015) 80px,
      rgba(255,255,255,.015) 81px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 80px,
      rgba(255,255,255,.015) 80px,
      rgba(255,255,255,.015) 81px
    );
  pointer-events:none;
}

.reviews-hero-content{
  width:85%;
  margin:0 auto;
  position:relative;
  z-index:5;
  padding-top:120px;
}

.reviews-hero-content h1{
  font-size:120px;
  line-height:.9;
  margin-top:20px;
  letter-spacing:-3px;
}

.reviews-hero-content p{
  margin-top:30px;
  max-width:600px;
  font-size:20px;
  line-height:1.8;
  opacity:.7;
}

.reviews-section{
  background:rgba(255,255,255,.015);
}

.reviews-grid{
  margin-top:60px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
}

.review-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  padding:40px 35px;
  display:flex;
  flex-direction:column;
  gap:24px;
  transition:.4s;
}

.review-card:hover{
  transform:translateY(-8px);
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.2);
}

.review-card--featured{
  border-color:rgba(255,255,255,.25);
  background:rgba(255,255,255,.07);
}

.review-card--dim{
  opacity:.45;
}

.review-stars{
  font-size:20px;
  letter-spacing:4px;
  color:rgba(255,255,255,.6);
}

.review-card--featured .review-stars{
  color:white;
}

.review-text{
  font-size:17px;
  line-height:1.75;
  opacity:.75;
  font-style:italic;
  flex:1;
}

.review-author{
  display:flex;
  align-items:center;
  gap:14px;
}

.review-avatar{
  width:46px;
  height:46px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  opacity:.6;
  flex-shrink:0;
}

.review-avatar--dim{
  opacity:.3;
}

.review-name{
  font-size:14px;
  font-weight:600;
  letter-spacing:2px;
}

.review-role{
  font-size:12px;
  letter-spacing:3px;
  opacity:.5;
  margin-top:4px;
}

.reviews-cta{
  margin-top:80px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:30px;
}

.reviews-cta p{
  font-size:20px;
  line-height:1.8;
  opacity:.7;
  max-width:500px;
}

@media(max-width:1024px){
  .reviews-grid{
    grid-template-columns:1fr 1fr;
  }
  .review-card--dim:last-child{
    display:none;
  }
}

@media(max-width:768px){
  .reviews-hero-content h1{
    font-size:56px;
    letter-spacing:-1px;
  }
  .reviews-grid{
    grid-template-columns:1fr;
  }
  .review-card--dim{
    display:none;
  }
}

/* CONTACT FORM */

.contact-form{
  margin-top:40px;
  display:flex;
  flex-direction:column;
  gap:20px;
  max-width:560px;
}

.contact-form--centered{
  max-width:480px;
  margin:0 auto;
}

.form-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.form-group label{
  font-size:11px;
  letter-spacing:4px;
  opacity:.5;
}

.form-group input,
.form-group textarea{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:14px 18px;
  color:white;
  font-size:15px;
  font-family:inherit;
  outline:none;
  transition:.3s;
  resize:none;
}

.form-group input::placeholder,
.form-group textarea::placeholder{
  opacity:.3;
}

.form-group input:focus,
.form-group textarea:focus{
  border-color:rgba(255,255,255,.35);
  background:rgba(255,255,255,.07);
}

.form-submit-btn{
  align-self:flex-start;
  cursor:pointer;
  border:none;
  font-family:inherit;
  letter-spacing:2px;
  font-size:12px;
}

.form-success{
  font-size:14px;
  opacity:.7;
  letter-spacing:1px;
  color:white;
}

.contact-links--small{
  margin-top:30px;
}

.contact-links--small a{
  font-size:16px;
}

@media(max-width:768px){
  .contact-form{
    max-width:100%;
  }
  .form-submit-btn{
    align-self:stretch;
    text-align:center;
  }
}