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

html{
 scroll-behavior:smooth;
 scroll-padding-top:80px;
 width:100%;
 max-width:100%;
 overflow-x:hidden
}

body{
 font-family:Arial,Helvetica,sans-serif;
 color:#17171b;
 background:#fff;
 line-height:1.6;
 width:100%;
 max-width:100%;
 overflow-x:hidden
}

a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit}

/* LOADER */
#page-loader{
 position:fixed;
 inset:0;
 background:#000;
 color:#fff;
 z-index:999999;
 display:flex;
 align-items:center;
 justify-content:center;
 transition:opacity 1s,visibility 1s
}
#page-loader.hide{opacity:0;visibility:hidden;pointer-events:none}
.loader-content{text-align:center}
.loader-logo{
 font-size:clamp(24px,7vw,48px);
 font-weight:700;
 letter-spacing:2px;
 opacity:0;
 transform:translateY(25px);
 animation:loaderName 1s .3s forwards
}
.loader-line{
 width:0;
 height:1px;
 margin:15px auto 0;
 background:#fff;
 animation:loaderLine 1s 1.1s forwards
}
.loader-circle{
 position:absolute;
 width:1px;
 height:1px;
 border-radius:50%;
 background:#fff;
 opacity:0;
 animation:loaderCircle 1.5s 1.8s forwards
}
@keyframes loaderName{to{opacity:1;transform:none}}
@keyframes loaderLine{to{width:120px}}
@keyframes loaderCircle{
 0%{width:1px;height:1px;opacity:0}
 40%{opacity:.08}
 100%{width:500px;height:500px;opacity:0}
}

/* HEADER */
.header{
 min-height:72px;
 width:100%;
 max-width:100%;
 padding:0 6%;
 background:#29292d;
 display:flex;
 align-items:center;
 justify-content:space-between;
 position:sticky;
 top:0;
 z-index:1000;
 box-shadow:0 4px 20px #00000014;
 transition:.3s
}
.header.scrolled{background:#202024;box-shadow:0 8px 25px #0000002e}

.logo{
 color:#fff;
 font-size:17px;
 font-weight:800;
 letter-spacing:1px;
 white-space:nowrap
}
.logo span{color:#9b7cff}

.nav{
 display:flex;
 align-items:center;
 gap:30px;
 min-width:0
}
.nav a{
 position:relative;
 color:#fff;
 font-size:15px;
 transition:.3s
}
.nav a:after{
 content:"";
 position:absolute;
 left:0;
 bottom:-7px;
 width:0;
 height:2px;
 background:#9b7cff;
 transition:.3s
}
.nav a:hover,.nav a.active{color:#9b7cff}
.nav a:hover{transform:translateY(-1px)}
.nav a:hover:after,.nav a.active:after{width:100%}

.menu-btn{
 display:none;
 border:0;
 background:transparent;
 color:#fff;
 font-size:27px;
 cursor:pointer;
 padding:5px;
 line-height:1;
 transition:.3s
}
.menu-btn:hover{color:#9b7cff}
.menu-btn:active{transform:scale(.9)}

/* HERO */
.hero{
 min-height:calc(100vh - 72px);
 width:100%;
 max-width:100%;
 padding:80px 7%;
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 align-items:center;
 gap:70px;
 overflow:hidden
}

.hero-photo-wrapper{
 width:100%;
 min-width:0;
 opacity:0;
 transform:translateX(-40px);
 animation:heroPhotoIn 1s 2.5s forwards
}

.profile-photo{
 width:100%;
 max-width:560px;
 max-height:700px;
 object-fit:cover;
 margin:auto;
 border-radius:8px;
 box-shadow:0 25px 60px #0000001f;
 transition:.5s
}
.profile-photo:hover{
 transform:translateY(-8px);
 box-shadow:0 35px 70px #00000029
}

.hero-content{
 width:100%;
 max-width:550px;
 min-width:0;
 overflow-wrap:break-word;
 opacity:0;
 transform:translateX(40px);
 animation:heroContentIn 1s 2.7s forwards
}

.eyebrow{
 color:#8d72d9;
 font-size:11px;
 font-weight:700;
 letter-spacing:3px;
 margin-bottom:18px
}

.hero h1{
 font-size:clamp(42px,5vw,72px);
 line-height:1.02;
 letter-spacing:-2px;
 margin-bottom:25px;
 overflow-wrap:break-word
}

.hero h1 span,.section-heading h2 span{color:#9274df}

.hero-subtitle{
 color:#333338;
 font-size:18px;
 font-weight:600;
 margin-bottom:10px;
 overflow-wrap:break-word
}

.hero-text{
 color:#66666d;
 max-width:480px;
 font-size:16px;
 margin-bottom:30px;
 overflow-wrap:break-word
}

.buttons{
 display:flex;
 gap:12px;
 flex-wrap:wrap;
 width:100%;
 max-width:100%
}

.btn{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 min-height:48px;
 padding:12px 24px;
 border-radius:4px;
 font-size:14px;
 font-weight:700;
 transition:.3s;
 max-width:100%
}
.btn:hover{transform:translateY(-3px)}
.btn.primary{
 background:#29292d;
 color:#fff;
 box-shadow:0 10px 25px #0000001f
}
.btn.primary:hover{
 background:#9274df;
 box-shadow:0 15px 30px #9274df40
}
.btn.secondary{
 border:1px solid #29292d;
 color:#29292d;
 background:transparent
}
.btn.secondary:hover{background:#29292d;color:#fff}

/* SECTIONS */
.section{
 padding:110px 7%;
 position:relative;
 width:100%;
 max-width:100%;
 min-width:0
}

.section-heading{
 max-width:700px;
 margin-bottom:55px;
 min-width:0
}

.section-heading .eyebrow{margin-bottom:12px}

.section-heading h2{
 font-size:clamp(34px,4vw,55px);
 line-height:1.1;
 letter-spacing:-1px;
 margin-bottom:18px;
 overflow-wrap:break-word
}

.section-heading>p:last-child{
 color:#66666d;
 font-size:16px;
 max-width:650px;
 overflow-wrap:break-word
}

/* ABOUT */
.about-grid{
 display:grid;
 grid-template-columns:1.4fr 1fr 1fr;
 gap:25px;
 align-items:stretch;
 width:100%;
 max-width:100%;
 min-width:0
}

.about-text{
 padding:30px 0;
 font-size:17px;
 color:#4f4f55;
 min-width:0;
 overflow-wrap:break-word
}
.about-text p{margin-bottom:20px}
.about-text strong{color:#17171b}

.feature-card{
 padding:35px;
 background:#f5f5f7;
 border-radius:8px;
 border:1px solid #eeeeef;
 transition:.3s;
 min-width:0;
 overflow-wrap:break-word
}
.feature-card:hover{
 transform:translateY(-7px);
 box-shadow:0 20px 40px #00000014
}
.feature-card>strong{
 display:block;
 color:#9274df;
 font-size:13px;
 letter-spacing:2px;
 margin-bottom:20px
}
.feature-card h3{font-size:22px;margin-bottom:12px}
.feature-card p{color:#66666d;font-size:15px}

/* DARK */
.section.dark{background:#202024;color:#fff}
.section.dark .section-heading>p:last-child{color:#a8a8ae}

/* CARDS */
.cards{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:25px;
 width:100%;
 max-width:100%;
 min-width:0
}

.card{
 padding:40px 32px;
 background:#29292d;
 border:1px solid #3a3a40;
 border-radius:8px;
 transition:.3s;
 min-width:0;
 overflow-wrap:break-word
}
.card:hover{
 transform:translateY(-8px);
 border-color:#9274df;
 box-shadow:0 20px 45px #00000040
}

.icon{
 width:48px;
 height:48px;
 display:flex;
 align-items:center;
 justify-content:center;
 margin-bottom:25px;
 border-radius:50%;
 background:#9274df;
 color:#fff;
 font-size:20px;
 flex-shrink:0
}
.card h3{font-size:23px;margin-bottom:12px}
.card p{color:#b5b5ba;font-size:15px}

/* CONTACT */
.contact{background:#fff}

.contact-box{
 max-width:900px;
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:18px;
 margin-bottom:40px;
 min-width:0
}

.contact-item{
 display:flex;
 align-items:center;
 gap:18px;
 padding:22px;
 background:#f7f7f8;
 border:1px solid #eeeeef;
 border-radius:8px;
 transition:.3s;
 min-width:0
}
.contact-item:hover{
 transform:translateY(-4px);
 box-shadow:0 15px 30px #00000012
}
.contact-icon{
 width:45px;
 height:45px;
 min-width:45px;
 display:flex;
 align-items:center;
 justify-content:center;
 background:#29292d;
 color:#fff;
 border-radius:50%;
 font-size:19px
}
.contact-item small{
 display:block;
 color:#9274df;
 font-size:10px;
 font-weight:700;
 letter-spacing:2px;
 margin-bottom:3px
}
.contact-item h3{font-size:17px}
.contact-item a{
 color:#333338;
 font-size:15px;
 word-break:break-word;
 transition:.3s
}
.contact-item a:hover{color:#9274df}

.contact-buttons{
 display:flex;
 flex-wrap:wrap;
 gap:12px
}
.contact-btn{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 min-height:45px;
 padding:11px 18px;
 border:1px solid #29292d;
 border-radius:4px;
 color:#29292d;
 background:#fff;
 font-size:14px;
 font-weight:600;
 transition:.3s;
 max-width:100%
}
.contact-btn:hover{
 background:#29292d;
 color:#fff;
 transform:translateY(-3px)
}

/* PHOTOS */
.photo-gallery{
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:28px;
 max-width:1000px;
 width:100%;
 margin:50px auto 0;
 min-width:0
}

.gallery-photo{
 position:relative;
 overflow:hidden;
 border-radius:24px;
 background:#111;
 aspect-ratio:4/5;
 box-shadow:0 15px 40px #00000026;
 min-width:0
}
.gallery-photo img{
 width:100%;
 height:100%;
 object-fit:cover;
 transition:.6s
}
.gallery-photo:hover img{
 transform:scale(1.06);
 filter:brightness(1.05)
}
.gallery-photo:after{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(to top,#00000059,transparent 45%);
 opacity:0;
 transition:.4s;
 pointer-events:none
}
.gallery-photo:hover:after{opacity:1}

.photo-label{
 position:absolute;
 left:20px;
 bottom:20px;
 z-index:2;
 padding:8px 14px;
 border-radius:50px;
 background:#ffffffe6;
 color:#111;
 font-size:12px;
 font-weight:700;
 letter-spacing:1px;
 text-transform:uppercase;
 max-width:calc(100% - 40px)
}

/* FOOTER */
footer{
 padding:30px 7%;
 background:#202024;
 color:#a8a8ae;
 text-align:center;
 font-size:13px;
 width:100%;
 max-width:100%;
 overflow:hidden
}
footer span{color:#fff}

/* ANIMATIONS */
@keyframes heroPhotoIn{to{opacity:1;transform:none}}
@keyframes heroContentIn{to{opacity:1;transform:none}}

/* TABLET */
@media(max-width:900px){

 .hero{
  grid-template-columns:1fr;
  gap:50px;
  padding-top:60px
 }

 .hero-photo-wrapper{order:1}
 .hero-content{
  order:2;
  max-width:700px
 }

 .profile-photo{max-width:500px}

 .about-grid{
  grid-template-columns:1fr 1fr
 }

 .about-text{
  grid-column:1/-1
 }

 .cards{
  grid-template-columns:repeat(2,minmax(0,1fr))
 }

 .contact-box{
  grid-template-columns:1fr
 }
}

/* MOBILE */
@media(max-width:700px){

 .header{
  min-height:68px;
  padding:0 5%;
  z-index:5000
 }

 .logo{font-size:15px}

 .menu-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:12px;
  background:#ffffff0f;
  border:1px solid #ffffff1a;
  color:#fff;
  font-size:27px
 }

 .menu-btn:hover{
  background:#9b7cff26;
  border-color:#9b7cffa0
 }

 .nav{
  position:fixed;
  top:78px;
  right:5%;
  width:min(88%,340px);
  max-width:340px;
  padding:12px;
  background:linear-gradient(145deg,#303035,#1f1f23);
  border:1px solid #ffffff1f;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  gap:4px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-15px) scale(.96);
  transform-origin:top right;
  transition:.28s;
  box-shadow:0 25px 70px #00000073;
  z-index:6000;
  overflow:hidden
 }

 .nav.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none
 }

 .nav a{
  width:100%;
  min-height:52px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  border-radius:11px;
  color:#fff;
  font-size:16px;
  font-weight:600
 }

 .nav a:after{display:none}
 .nav a:hover{
  background:#9b7cff21;
  color:#b49cff;
  transform:none;
  padding-left:21px
 }

 .nav a.active{
  background:linear-gradient(90deg,#9b7cff33,#9b7cff0d);
  color:#b49cff
 }

 .nav a.active:before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:10px;
  background:#9b7cff
 }

 .nav a+a{border-top:1px solid #ffffff0b}

 .hero{
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:auto;
  padding:55px 5% 75px;
  gap:45px
 }

 .hero>*{
  min-width:0;
  max-width:100%
 }

 .hero-content{
  width:100%;
  max-width:100%;
  min-width:0
 }

 .hero h1{
  font-size:clamp(40px,12vw,60px);
  letter-spacing:-1.5px;
  max-width:100%
 }

 .hero-subtitle{
  font-size:17px;
  max-width:100%
 }

 .hero-text{
  font-size:15px;
  max-width:100%
 }

 .buttons{
  width:100%;
  max-width:100%
 }

 .btn{
  max-width:100%
 }

 .section{
  width:100%;
  max-width:100%;
  min-width:0;
  padding:80px 5%
 }

 .section-heading{
  width:100%;
  max-width:100%;
  min-width:0;
  margin-bottom:40px
 }

 .section-heading h2{
  font-size:clamp(32px,10vw,48px);
  max-width:100%
 }

 .section-heading>p{
  max-width:100%;
  overflow-wrap:break-word
 }

 .about-grid,
 .cards,
 .contact-box{
  width:100%;
  max-width:100%;
  min-width:0;
  grid-template-columns:1fr
 }

 .about-text{
  grid-column:auto;
  padding:10px 0
 }

 .feature-card,
 .card{
  width:100%;
  max-width:100%;
  min-width:0
 }

 .contact-buttons{
  flex-direction:column
 }

 .contact-btn{
  width:100%;
  max-width:100%
 }

 .photo-gallery{
  width:100%;
  max-width:100%;
  grid-template-columns:1fr;
  gap:20px;
  margin-top:35px
 }

 .gallery-photo{
  width:100%;
  max-width:100%;
  aspect-ratio:4/5;
  border-radius:20px
 }

 footer{
  width:100%;
  max-width:100%;
  padding:25px 5%
 }
}

/* SMALL PHONES */
@media(max-width:420px){

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

 .menu-btn{
  width:43px;
  height:43px;
  font-size:25px;
  border-radius:11px
 }

 .nav{
  top:75px;
  right:4%;
  width:92%;
  max-width:92%;
  border-radius:16px;
  padding:10px
 }

 .nav a{
  min-height:50px;
  font-size:15px;
  padding:13px 14px
 }

 .hero{
  width:100%;
  max-width:100%;
  padding-top:45px
 }

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

 .buttons{
  flex-direction:column;
  width:100%
 }

 .btn{
  width:100%;
  max-width:100%
 }

 .feature-card{padding:28px}
 .card{padding:32px 25px}

 .contact-item{
  align-items:flex-start;
  padding:18px
 }

 .contact-icon{
  width:40px;
  height:40px;
  min-width:40px
 }

 .photo-label{
  left:15px;
  bottom:15px;
  max-width:calc(100% - 30px)
 }
}

/* EXTRA MOBILE SAFETY */
@media(max-width:700px){

 html,body{
  overflow-x:hidden!important;
  width:100%!important;
  max-width:100%!important
 }

 main,
 section,
 header,
 footer{
  max-width:100%;
  min-width:0
 }

 h1,h2,h3,p,a{
  overflow-wrap:break-word;
  word-wrap:break-word
 }
}

/* ACCESSIBILITY */
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*:before,*:after{
  animation-duration:.01ms!important;
  animation-iteration-count:1!important;
  transition-duration:.01ms!important
 }
}