:root{
  --green:#62c957;
  --green2:#42b939;
  --green3:#8ef073;
  --black:#030807;
  --dark:#07110f;
  --dark2:#0b1714;
  --muted:#b7c6bd;
  --line:rgba(115,224,93,.24);
  --card:rgba(7,18,16,.88);
  --white:#fff;
  --shadow:0 24px 70px rgba(0,0,0,.45)
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:auto
}
body{
  margin:0;
  font-family:Inter,Arial,sans-serif;
  background:var(--black);
  color:var(--white);
  overflow-x:hidden
}
img{
  max-width:100%;
  display:block
}
a{
  text-decoration:none;
  color:inherit
}
.container{
  width:min(1260px,calc(100% - 120px));
  margin-inline:auto
}
@media(min-width:1101px){
  .container{
    width:calc(100% - 80px);
    max-width:none
  }
  .footer .copyright{
    padding-right:72px;
    font-size:11px
  }
  .footer .copyright span:last-child{
    white-space:nowrap
  }
  .footer .copyright a{
    display:inline;
    margin:0;
    font-size:inherit;
    line-height:inherit
  }
  .footer .top-btn{
    bottom:72px
  }
  .hero .whats{
    right:40px;
    bottom:56px;
    width:54px;
    height:54px;
    border-width:5px
  }
  .hero .whats svg{
    width:27px;
    height:27px
  }
}
.center{
  text-align:center
}
.eyebrow{
  margin:0 0 10px;
  text-transform:uppercase;
  color:var(--green3);
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em
}
.dark-section{
  position:relative;
  background:linear-gradient(180deg,#030807,#07120f);
  overflow:hidden
}
.dark-section:before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 15% 12%,rgba(75,205,72,.13),transparent 25%),radial-gradient(circle at 75% 60%,rgba(45,195,45,.10),transparent 28%),linear-gradient(115deg,transparent,rgba(82,245,89,.035),transparent);
  pointer-events:none
}
.header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:86px;
  z-index:50;
  background:linear-gradient(180deg,rgba(1,5,4,.82),rgba(1,5,4,.22));
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  transition:.35s ease
}
.header-container{
  display:flex;
  align-items:center;
  gap:32px;
  height:100%
}
.header.scrolled{
  height:70px;
  background:rgba(2,8,7,.9);
  box-shadow:0 12px 35px rgba(0,0,0,.35)
}
.brand img{
  width:156px
}
.nav{
  display:flex;
  align-items:center;
  gap:34px;
  margin-left:auto
}
.nav a{
  font-size:14px;
  font-weight:800;
  opacity:.96;
  padding:34px 0 26px;
  border-bottom:2px solid transparent;
  transition:.25s
}
.nav a:hover,.nav .is-active{
  color:var(--green3);
  border-color:var(--green3)
}
.portal{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--green3);
  border-radius:8px;
  padding:15px 24px;
  color:var(--green3);
  font-weight:900;
  background:rgba(53,170,47,.08);
  box-shadow:inset 0 0 0 1px rgba(142,240,115,.04),0 0 28px rgba(78,215,68,.12)
}
.portal svg{
  width:18px;
  height:18px;
  fill:currentColor
}
.hamb{
  display:none;
  background:none;
  border:0;
  cursor:pointer;
  gap:6px
}
.hamb span{
  display:block;
  width:30px;
  height:2px;
  background:#fff
}
.mobile-menu{
  display:none
}
.hero{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.1);
  isolation:isolate
}
.hero-photo{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#020706 0%,rgba(2,7,6,.93) 27%,rgba(2,7,6,.42) 52%,rgba(2,7,6,.1) 100%),linear-gradient(0deg,rgba(1,5,4,.18),rgba(1,5,4,.18)),url('../../bgsite.jpg') center right/cover no-repeat;
  transform:scale(1.06);
  filter:contrast(1.07) saturate(1.09) brightness(.88);
  z-index:-3
}
.network{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 13% 42%,rgba(66,219,71,.35),transparent 26%),radial-gradient(circle at 78% 52%,rgba(88,244,90,.16),transparent 31%),repeating-linear-gradient(115deg,rgba(63,255,80,.035) 0 1px,transparent 1px 76px);
  mix-blend-mode:screen;
  opacity:.78;
  z-index:-2
}
#hero-canvas{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-2;
  opacity:.42
}
.green-arc{
  position:absolute;
  width:700px;
  height:700px;
  border:2px solid rgba(104,250,82,.58);
  border-left-color:transparent;
  border-bottom-color:transparent;
  border-radius:50%;
  right:-120px;
  top:95px;
  filter:drop-shadow(0 0 18px rgba(87,238,80,.55));
  z-index:-1
}
.hero-inner{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center
}
.hero-copy{
  max-width:500px;
  padding-top:62px
}
.hero h1{
  margin:0 0 22px;
  font-size:clamp(46px,5vw,74px);
  line-height:.98;
  font-weight:900;
  letter-spacing:-.07em;
  text-shadow:0 8px 32px rgba(0,0,0,.34)
}
h1 span,h2 span{
  color:var(--green3)
}
.hero-sub{
  font-size:18px;
  margin:0 0 30px
}
.hero-sub strong{
  color:var(--green3)
}
.button-row{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:50px;
  border-radius:7px;
  padding:14px 27px;
  border:1px solid var(--line);
  font-size:14px;
  font-weight:900;
  transition:.3s ease;
  position:relative;
  overflow:hidden
}
.btn:before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.18),transparent);
  transform:translateX(-120%);
  transition:.5s
}
.btn:hover:before{
  transform:translateX(120%)
}
.btn:hover{
  transform:translateY(-3px)
}
.btn-solid{
  background:linear-gradient(135deg,#35b735,#6ad055);
  color:#fff;
  box-shadow:0 18px 38px rgba(45,190,47,.22)
}
.btn-dark{
  background:rgba(1,9,8,.66);
  border-color:var(--green2);
  color:#fff
}
.btn-outline{
  color:var(--green2);
  border-color:var(--green2);
  background:#fff
}
.scroll-down{
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:36px;
  color:#e7f0eb;
  font-size:13px
}
.scroll-down b{
  width:18px;
  height:30px;
  border:2px solid #fff;
  border-radius:18px;
  position:relative
}
.scroll-down b:after{
  content:'';
  position:absolute;
  top:6px;
  left:50%;
  width:3px;
  height:8px;
  background:#fff;
  border-radius:5px;
  transform:translateX(-50%);
  animation:wheel 1.2s infinite
}
@keyframes wheel{
  50%{
    transform:translate(-50%,6px);
    opacity:.4
  }
}
.whats{
  position:absolute;
  right:52px;
  bottom:40px;
  width:60px;
  height:60px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  color:#27b842;
  border:6px solid #27b842;
  box-shadow:0 20px 45px rgba(0,0,0,.35);
  font-size:28px;
  z-index:3
}
.about{
  background:linear-gradient(180deg,#030807,#07120f);
  color:var(--white);
  padding:clamp(90px,10vw,150px) 0 clamp(80px,9vw,130px);
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(97,210,77,.11)
}
.about-bg-pattern{
  position:absolute;
  top:-15%;
  left:0;
  width:100%;
  height:130%;
  background:url('../img/vector-bg.svg') center center/cover no-repeat;
  opacity:.03;
  pointer-events:none;
  z-index:0
}
.about-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:.72fr .9fr .92fr;
  gap:18px;
  align-items:center
}
.about-text .eyebrow{
  font-weight:400
}
.about h2,.section-title h2,.jobs h2,.resume-text h2,.proposal-text h2{
  font-size:clamp(30px,3.2vw,42px);
  line-height:1.08;
  letter-spacing:-.05em;
  margin:0 0 18px;
  font-weight:900
}
.about p,.resume-text p,.proposal-text p,.section-subtitle{
  font-size:15px;
  line-height:1.68;
  color:var(--muted);
  margin-top:10px
}
.about p{
  margin-bottom:17px
}
.office img{
  height:322px;
  width:100%;
  object-fit:cover;
  border-radius:15px;
  box-shadow:0 20px 55px rgba(0,0,0,.18)
}
.quality-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  padding:12px;
  border-radius:18px;
  background:rgba(0,0,0,.04)
}
.quality{
  background:linear-gradient(145deg,rgba(14,29,26,.92),rgba(4,12,11,.96));
  border:1px solid var(--line);
  border-radius:13px;
  padding:24px 22px;
  min-height:143px;
  box-shadow:inset 0 0 38px rgba(81,255,91,.055),0 16px 40px rgba(0,0,0,.34)
}
.quality .icon{
  font-size:36px;
  line-height:1;
  color:var(--green2);
  filter:drop-shadow(0 10px 14px rgba(63,184,55,.22))
}
.quality h3{
  font-size:18px;
  margin:10px 0 6px
}
.quality p{
  font-size:12px;
  line-height:1.45;
  margin:0;
  color:#bdcac3
}
.quality h3{
  color:var(--white);
  margin-top:0
}
.values{
  padding:clamp(70px,8vw,120px) 0;
  border-block:1px solid rgba(97,210,77,.11)
}
.values-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.info-card,.service,.testimonial,.hire-card,.job,.instagram-card,.form{
  background:linear-gradient(145deg,rgba(14,29,26,.92),rgba(4,12,11,.96));
  border:1px solid var(--line);
  border-radius:15px;
  box-shadow:inset 0 0 38px rgba(81,255,91,.055),0 20px 55px rgba(0,0,0,.34)
}
.info-card{
  display:grid;
  grid-template-columns:78px 1fr;
  gap:18px;
  align-items:center;
  padding:26px 34px;
  min-height:140px
}
.big-icon{
  font-size:58px;
  color:var(--green2);
  text-shadow:0 0 20px rgba(81,255,91,.26)
}
.info-card h3{
  font-size:24px;
  margin:0 0 7px
}
.info-card p,.service p,.testimonial blockquote,.hire-card p,.resume-text p{
  color:#d5dfda;
  line-height:1.56;
  margin:0;
  font-size:14px
}
.services{
  padding:clamp(80px,10vw,140px) 0
}
.services-bg-pattern{
  position:absolute;
  top:-15%;
  left:0;
  width:100%;
  height:130%;
  background:linear-gradient(180deg,rgba(3,8,7,.85) 0%,rgba(3,8,7,.92) 100%),url('../img/servicos-bg.png') center center/cover no-repeat;
  pointer-events:none;
  z-index:0
}
.services .container{
  position:relative;
  z-index:1
}
.section-title{
  text-align:center;
  margin-bottom:23px
}
.section-subtitle{
  color:var(--muted);
  font-size:15px;
  max-width:600px;
  margin:12px auto 0;
  line-height:1.6
}
.section-title h2{
  margin:0
}
.service-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px
}
.service{
  position:relative;
  min-height:242px;
  padding:29px 30px 24px;
  overflow:hidden
}
.service:after{
  content:'';
  position:absolute;
  right:-38px;
  top:-40px;
  width:120px;
  height:120px;
  border-radius:50%;
  background:rgba(100,255,93,.12);
  filter:blur(24px)
}
.service-icon{
  width:78px;
  height:66px;
  margin-bottom:22px;
  position:relative;
  filter:drop-shadow(0 15px 10px rgba(0,0,0,.35))
}
.service-icon:before,.service-icon:after{
  content:'';
  position:absolute;
  background:linear-gradient(#96f07c,#2faa31);
  box-shadow:inset -8px -9px 15px rgba(0,0,0,.18),0 0 18px rgba(81,225,70,.18)
}
.people:before{
  width:32px;
  height:32px;
  border-radius:50%;
  left:20px
}
.people:after{
  width:76px;
  height:34px;
  border-radius:30px 30px 12px 12px;
  left:0;
  bottom:0
}
.calendar:before{
  width:64px;
  height:54px;
  border-radius:10px;
  left:5px;
  bottom:0
}
.calendar:after{
  width:28px;
  height:28px;
  border-radius:50%;
  right:0;
  bottom:-5px;
  border:5px solid #174216
}
.team:before{
  width:34px;
  height:34px;
  border-radius:50%;
  left:22px
}
.team:after{
  width:78px;
  height:36px;
  border-radius:34px 34px 12px 12px;
  left:0;
  bottom:0
}
.search:before{
  width:48px;
  height:48px;
  border-radius:50%;
  left:6px;
  border:11px solid #52c548;
  background:transparent
}
.search:after{
  width:13px;
  height:38px;
  border-radius:8px;
  right:7px;
  bottom:0;
  transform:rotate(-45deg)
}
.service h3{
  font-size:24px;
  line-height:1.08;
  margin:0 0 14px
}
.service a{
  position:absolute;
  left:28px;
  bottom:22px;
  width:35px;
  height:35px;
  border:1px solid rgba(255,255,255,.75);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff
}
.clients{
  padding:clamp(60px,7vw,100px) 0 clamp(80px,9vw,130px)
}
.client-shell{
  display:grid;
  grid-template-columns:40px 1fr 40px;
  align-items:center;
  gap:10px;
  border-radius:17px;
  padding:15px
}
.client-shell button{
  background:none;
  border:0;
  color:var(--green3);
  font-size:44px;
  line-height:1;
  cursor:pointer
}
.marquee{
  overflow:hidden;
  mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent)
}
.marquee-track{
  display:flex;
  width:max-content;
  gap:18px;
  animation:marquee 24s linear infinite
}
.marquee-track img{
  height:78px;
  width:auto;
  border-radius:8px;
  background:#fff;
  padding:10px 18px;
  object-fit:contain;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  filter:grayscale(1) opacity(.75);
  transition:filter .3s ease,opacity .3s ease,transform .3s ease
}
.marquee-track img:hover{
  filter:grayscale(0) opacity(1);
  transform:scale(1.08)
}
@keyframes marquee{
  to{
    transform:translateX(-50%)
  }
}
.proof{
  padding:clamp(80px,10vw,140px) 0
}
.proof-bg-pattern{
  position:absolute;
  top:-15%;
  left:0;
  width:100%;
  height:130%;
  background:linear-gradient(180deg,rgba(3,8,7,.85) 0%,rgba(3,8,7,.92) 100%),url('../img/proof-bg.png') center center/cover no-repeat;
  pointer-events:none;
  z-index:0
}
.proof-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:28px;
  align-items:stretch;
  position:relative;
  z-index:1
}
.testimonial{
  padding:44px 36px;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.testimonial-carousel{
  position:relative;
  min-height:110px;
  display:flex;
  align-items:center;
  justify-content:center
}
.testimonial-slide{
  display:none
}
.testimonial-slide.active{
  display:block;
  animation:fadeInTestimonial .5s ease-in-out forwards
}
.testimonial blockquote{
  font-size:18px;
  line-height:1.68;
  margin:0;
  font-style:italic;
  font-weight:500;
  color:#e7f0eb;
  text-align:center;
  position:relative
}
.testimonial blockquote::before{
  content:'“';
  position:absolute;
  top:-32px;
  left:50%;
  transform:translateX(-50%);
  font-size:64px;
  color:rgba(115,224,93,.15);
  font-family:serif;
  line-height:1
}
@keyframes fadeInTestimonial{
  from{
    opacity:0;
    transform:translateY(8px)
  }
  to{
    opacity:1;
    transform:translateY(0)
  }
}
.dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:24px
}
.dots .dot{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.35);
  cursor:pointer;
  transition:.3s ease
}
.dots .dot.active{
  background:var(--green3);
  width:20px;
  border-radius:5px
}
.hand{
  border-radius:17px;
  background:radial-gradient(circle,rgba(51,217,66,.26),transparent 62%),linear-gradient(145deg,#0c1714,#06100e);
  display:grid;
  place-items:center;
  min-height:220px
}
.hand span{
  font-size:104px;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.5))
}
.hire-card{
  display:grid;
  grid-template-columns:1fr 210px;
  align-items:center;
  padding:34px 36px;
  background:linear-gradient(135deg,rgba(12,31,24,.96),rgba(24,116,36,.78));
  overflow:hidden
}
.hire-card h2{
  font-size:38px;
  line-height:1.04;
  letter-spacing:-.05em;
  margin:0 0 15px
}
.hire-photo{
  width:100%;
  height:190px;
  object-fit:cover;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.1);
  transition:transform .4s ease
}
.hire-card:hover .hire-photo{
  transform:scale(1.03)
}
.jobs{
  padding:clamp(80px,10vw,140px) 0;
  background:linear-gradient(180deg,#020605 0%,#051612 50%,#020605 100%);
  border-top:1px solid rgba(105,224,91,.08);
  border-bottom:1px solid rgba(105,224,91,.08)
}
.jobs h2,.resume-text h2{
  margin:0 0 18px
}
.job-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
  margin-bottom:24px;
  align-items:stretch
}
.job{
  height:300px;
  padding:20px 18px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  overflow:hidden;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  text-decoration:none;
  transition:border-color .35s ease
}
.job:hover{
  border-color:var(--green3)
}
.job-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1)
}
.job:hover .job-bg-img {
  transform: scale(1.08)
}
.job-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(3,8,7,.15) 0%, rgba(3,8,7,.92) 100%);
  z-index: 1
}
.job-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end
}
.job b {
  text-transform: uppercase;
  font-size: 15px;
  line-height: 1.2;
  margin-bottom: 4px;
  font-weight: 900;
  color: #fff
}
.job small {
  color: #bdcac3;
  font-size: 12px;
  margin-bottom: 12px;
  display: block
}
.job-btn{
  align-self:flex-start;
  background:rgba(105,224,91,.15);
  border:1px solid rgba(105,224,91,.3);
  color:var(--green3);
  padding:5px 11px;
  font-size:11px;
  font-weight:800;
  border-radius:4px;
  text-transform:uppercase;
  transition:all .3s ease;
  display:flex;
  align-items:center;
  gap:4px
}
.job:hover .job-btn{
  background:var(--green3);
  color:#030807;
  border-color:var(--green3);
  box-shadow:0 0 10px rgba(105,224,91,.4)
}
.instagram-card{
  height:300px;
  padding:20px 18px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
  backdrop-filter:blur(8px);
  gap:12px;
  width:100%
}
.instagram-header{
  display:flex;
  justify-content:space-between;
  align-items:center
}
.instagram-header h3{
  font-size:15px;
  line-height:1.2;
  margin:4px 0 0;
  font-weight:900;
  text-transform:uppercase
}
.instagram-header h3 span{
  color:var(--green3)
}
.insta-post-wrapper{
  position:relative;
  width:100%;
  border-radius:8px;
  overflow:hidden;
  background:#fff
}
.insta-post-wrapper iframe{
  border:none;
  width:100%;
  height:100%
}
.resume{
  padding:clamp(80px,10vw,140px) 0;
  border-top:1px solid rgba(105,224,91,.14)
}
.resume-grid{
  display:grid;
  grid-template-columns:1.1fr 1.2fr;
  gap:48px;
  align-items:center
}
.resume-bg-pattern{
  position:absolute;
  top:-15%;
  left:0;
  width:100%;
  height:130%;
  background:linear-gradient(180deg,rgba(3,8,7,.82) 0%,rgba(3,8,7,.94) 100%),url('../img/career-bg.png') center center/cover no-repeat;
  opacity:.16;
  pointer-events:none;
  z-index:0
}
.resume-text{
  padding:28px 0 24px
}
.resume-text ul{
  padding:0;
  margin:24px 0 20px;
  list-style:none
}
.resume-text li{
  margin:13px 0;
  color:#e4eee8;
  line-height:1.5
}
.attendant{
  align-self:end;
  max-height:335px;
  object-fit:contain;
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.42))
}
.proposal{
  padding:clamp(80px,10vw,140px) 0;
  border-top:1px solid rgba(105,224,91,.14)
}
.proposal-grid{
  display:grid;
  grid-template-columns:1.1fr 1.2fr;
  gap:48px;
  align-items:center
}
.proposal-bg-pattern{
  position:absolute;
  top:-15%;
  left:0;
  width:100%;
  height:130%;
  background:radial-gradient(circle at 80% 20%,rgba(104,250,82,.22),transparent 45%),url('../img/vector-bg.svg') center center/cover no-repeat;
  opacity:.08;
  pointer-events:none;
  z-index:0
}
.proposal-text{
  padding:28px 0 24px
}
.proposal-image{
  align-self:end;
  max-height:335px;
  object-fit:contain;
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.42))
}
.form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
  padding:24px;
  align-self:center
}
.form input,.form textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.08);
  background:#303a39;
  color:#fff;
  border-radius:6px;
  padding:15px 16px;
  font:inherit;
  outline:none
}
.form input:focus,.form textarea:focus{
  border-color:var(--green2);
  box-shadow:0 0 0 3px rgba(78,200,65,.08)
}
.form textarea{
  grid-column:1/-1;
  min-height:118px;
  resize:vertical
}
.form button{
  grid-column:1/-1;
  border:0
}
.footer{
  position:relative;
  background:#050b0a;
  border-top:1px solid rgba(255,255,255,.08);
  padding:38px 0 24px
}
.footer-grid{
  display:grid;
  grid-template-columns:1.15fr .9fr 1.1fr 1.18fr 1.1fr;
  gap:30px
}
.footer img{
  width:140px
}
.footer h4{
  margin:0 0 14px;
  text-transform:uppercase;
  font-size:13px;
  color:#fff
}
.footer p,.footer a{
  display:block;
  color:#c6d0ca;
  font-size:13px;
  line-height:1.75;
  margin:0 0 8px
}
.social{
  display:flex;
  gap:9px;
  margin-top:15px
}
.social a{
  width:32px;
  height:32px;
  border:1px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff
}
.copyright{
  border-top:1px solid rgba(255,255,255,.07);
  padding-top:18px;
  margin-top:25px;
  color:#a8b4ad;
  font-size:12px;
  display:flex;
  justify-content:space-between
}
.top-btn{
  position:absolute;
  right:50px;
  bottom:22px;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid var(--green2);
  display:grid;
  place-items:center;
  color:var(--green3)
}
.preloader{
  position:fixed;
  inset:0;
  z-index:999;
  background:#020605;
  display:grid;
  place-items:center;
  transition:.75s
}
.preloader img{
  width:240px;
  animation:pulse 1.2s ease-in-out infinite alternate
}
.preloader span{
  position:absolute;
  bottom:38%;
  width:240px;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--green3),transparent)
}
.preloader.hide{
  opacity:0;
  pointer-events:none
}
@keyframes pulse{
  to{
    filter:drop-shadow(0 0 22px var(--green3));
    transform:scale(1.035)
  }
}
.cursor{
  position:fixed;
  z-index:100;
  width:22px;
  height:22px;
  border:1px solid var(--green3);
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
  transition:width .2s,height .2s,background .2s;
  mix-blend-mode:difference
}
.cursor.big{
  width:60px;
  height:60px;
  background:rgba(115,224,93,.12)
}
.reveal{
  opacity:0;
  transform:translateY(54px)
}
.reveal-hero>*{
  opacity:0;
  transform:translateY(38px)
}
.quality .icon svg{
  display:block;
  width:36px;
  height:36px
}
.big-icon svg{
  display:block;
  width:58px;
  height:58px
}
.job i svg{
  display:block;
  width:18px;
  height:18px
}
.whats svg{
  display:block;
  width:30px;
  height:30px
}
.top-btn svg{
  display:block;
  width:20px;
  height:20px
}
@media(max-width:1100px){
  .container{
    width:calc(100% - 44px)
  }
  .nav,.portal{
    display:none
  }
  .hamb{
    display:grid;
    margin-left:auto
  }
  .mobile-menu{
    position:fixed;
    z-index:44;
    inset:84px 22px auto;
    display:none;
    padding:18px;
    border:1px solid var(--line);
    border-radius:16px;
    background:rgba(2,8,7,.95);
    backdrop-filter:blur(16px)
  }
  .mobile-menu.open{
    display:grid
  }
  .mobile-menu a{
    padding:14px;
    border-bottom:1px solid rgba(255,255,255,.07);
    font-weight:800
  }
  .about-grid,.proof-grid,.jobs-grid,.resume-grid,.proposal-grid,.footer-grid{
    grid-template-columns:1fr
  }
  .quality-grid,.values-grid,.service-grid,.job-grid{
    grid-template-columns:1fr 1fr
  }
  .hire-card{
    grid-template-columns:1fr
  }
  .hire-photo{
    max-width:320px;
    height:180px;
    margin:20px auto 0;
    display:block
  }
  .attendant,.proposal-image{
    display:none
  }
  .hero-photo{
    background:linear-gradient(90deg,#020706 0%,rgba(2,7,6,.76) 100%),url('../../bgsite.jpg') center right/cover no-repeat
  }
  .hero,.hero-inner{
    min-height:100vh;
    min-height:100dvh
  }
  .hero-copy{
    padding-top:120px
  }
  .whats{
    right:22px
  }
}
@media(max-width:640px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden
  }
  main,
  .about,
  .services,
  .clients,
  .proof,
  .jobs,
  .resume,
  .proposal,
  .footer{
    max-width:100%;
    overflow-x:hidden
  }
  .container{
    width:calc(100% - 28px)
  }
  .header{
    height:72px
  }
  .brand img{
    width:128px
  }
  .mobile-menu{
    inset:74px 14px auto
  }
  .hero-photo{
    background:linear-gradient(180deg,rgba(2,7,6,0.1) 0%,rgba(2,7,6,0.25) 45%,rgba(2,7,6,0.85) 100%),url('../../bgsite.jpg') center right/cover no-repeat !important;
    height:100vh !important;
    height:100dvh !important;
    position:absolute !important;
    transform:scale(1.02) !important
  }
  .hero{
    height:auto !important;
    min-height:100vh !important;
    min-height:100dvh !important;
    overflow:hidden !important
  }
  .green-arc{
    display:none !important
  }
  .hero-inner{
    height:auto !important;
    min-height:100vh !important;
    min-height:100dvh !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    padding-top:0 !important;
    padding-bottom:0 !important
  }
  .hero-copy{
    max-width:100% !important;
    padding-top:0 !important;
    display:flex !important;
    flex-direction:column !important;
    width:100% !important
  }
  .hero-main-viewport{
    height:calc(100vh - 100px) !important;
    height:calc(100dvh - 100px) !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;
    padding-bottom:40px !important;
    box-sizing:border-box !important
  }
  .hero h1{
    font-size:32px !important;
    line-height:1.25 !important;
    margin:0 !important;
    text-align:left !important
  }
  .hero-main-viewport .eyebrow{
    margin-bottom:8px !important;
    text-align:left !important
  }
  .hero-extra-viewport{
    padding-top:40px !important;
    padding-bottom:80px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:20px !important
  }
  .hero-extra-viewport .hero-sub{
    font-size:16px !important;
    margin:0 !important;
    line-height:1.52 !important;
    color:#cbd8d1 !important
  }
  .hero-extra-viewport .button-row{
    margin-top:10px !important;
    width:100% !important
  }
  .hero-extra-viewport .btn{
    width:100% !important
  }
  .quality-grid,.values-grid,.service-grid,.job-grid,.form{
    grid-template-columns:1fr
  }
  .form{
    width:100%;
    max-width:100%;
    padding:20px 16px
  }
  .form button{
    width:100% !important
  }
  .form input,
  .form textarea,
  .file-upload-wrapper{
    min-width:0
  }
  .office img{
    height:240px
  }
  .info-card{
    grid-template-columns:1fr
  }
  .instagram-card{
    min-height:520px
  }
  .hire-photo{
    max-width:100%;
    height:160px
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .footer-grid > div:not(.footer-brand) {
    display: none;
  }
  .footer-brand p,
  .footer-brand .social,
  .copyright,
  .top-btn {
    display: none !important;
  }
  .footer {
    padding: 32px 0;
  }
  .footer-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
  }
}

/* SPOTLIGHT CARD GLOW EFFECT */
.quality, .service, .job, .instagram-card, .testimonial, .hire-card {
  position: relative;
}
.quality::before,
.service::before,
.job::before,
.instagram-card::before,
.testimonial::before,
.hire-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(
    380px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
    rgba(115, 224, 93, 0.12),
    transparent 80%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}
.quality:hover::before,
.service:hover::before,
.job:hover::before,
.instagram-card:hover::before,
.testimonial:hover::before,
.hire-card:hover::before {
  opacity: 1;
}

/* Scroll Progress Bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green2), var(--green3));
  z-index: 1000;
  width: 0%;
  pointer-events: none;
}

/* Micro-interactions for Icons */
.quality .icon svg,
.service-icon {
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), filter 0.45s ease;
}
.quality:hover .icon svg {
  transform: scale(1.15) rotate(8deg);
  filter: drop-shadow(0 0 12px rgba(115, 224, 93, 0.65));
}
.service:hover .service-icon {
  transform: scale(1.1) translateY(-4px) rotate(-3deg);
  filter: drop-shadow(0 8px 16px rgba(115, 224, 93, 0.45));
}