/* =========================================
   HOME PAGE
========================================= */


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


.hero{

  min-height:100vh;

  display:flex;

  align-items:center;

  padding-top:140px;

  padding-bottom:120px;

  position:relative;

  overflow:hidden;

}



.hero::before{

  content:"";

  position:absolute;

  width:900px;

  height:900px;


  background:

  radial-gradient(
    circle,
    rgba(212,175,55,.14),
    transparent 70%
  );


  top:-300px;

  right:-300px;


  z-index:-1;

}




.hero-content{

  max-width:850px;

}



.eyebrow{

  display:flex;

  align-items:center;

  gap:18px;

  margin-bottom:35px;

}



.line{

  width:70px;

  height:2px;

  background:var(--accent);

}



.eyebrow span:last-child{

  color:var(--accent);

  text-transform:uppercase;

  letter-spacing:.2em;

  font-size:.72rem;

}





.hero h1{

  font-family:'Merriweather',serif;

  font-weight:900;

  font-size:clamp(3.5rem,8vw,7rem);

  line-height:.95;

  letter-spacing:-.04em;

  margin-bottom:35px;

}



.gold{

  color:var(--accent);

}



.hero p{

  max-width:650px;

  color:var(--muted);

  margin-bottom:45px;

  font-size:1.05rem;

  line-height:1.8;

}



.hero-buttons{

  display:flex;

  gap:20px;

  flex-wrap:wrap;

}




/* HERO TRUST TAGS */

.hero-trust{

  display:flex;

  gap:15px;

  flex-wrap:wrap;

  margin-top:35px;

}



.hero-trust span{

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

  padding:10px 16px;

  border-radius:100px;

  color:var(--muted);

  font-size:.68rem;

  letter-spacing:.14em;

  text-transform:uppercase;

}



/* =========================================
   STATS
========================================= */


.stats{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:1px;

  background:var(--line);

  margin:120px auto;

  width:min(1400px,92%);

}




.stat-box{

  padding:55px;


  background:

  linear-gradient(
    145deg,
    #102F86,
    #081F6A
  );


  position:relative;

  overflow:hidden;

  transition:.35s ease;

  border:1px solid transparent;

}




.stat-box:hover{

  transform:translateY(-8px);

  border-color:var(--accent);

  box-shadow:

  0 20px 40px rgba(212,175,55,.15);

}




.stat-box h2{

  font-family:'Merriweather',serif;

  font-size:3.5rem;

  margin-bottom:15px;

  color:white;

}




.stat-box p{

  color:var(--muted);

  font-size:.72rem;

  letter-spacing:.18em;

}





/* =========================================
   SERVICES PREVIEW
========================================= */


.services{

  padding:140px 0 180px;

}




.section-top h2{

  font-family:'Merriweather',serif;

  font-size:clamp(2rem,5vw,4rem);

  margin:20px 0 40px;

}




.services-grid{

  display:grid;

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

  gap:30px;

}




.service-card{


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


  border-radius:26px;


  padding:50px;


  background:


  linear-gradient(

  145deg,

  rgba(255,255,255,.07),

  rgba(255,255,255,.02)

  );


  backdrop-filter:blur(12px);


  transition:.35s ease;


}




.service-card:hover{


  transform:translateY(-12px);


  border-color:rgba(212,175,55,.5);


  box-shadow:


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


}





.service-card h3{


  font-family:'Merriweather',serif;


  font-size:2rem;


  margin:25px 0;


}





.service-card p{


  color:var(--muted);

  line-height:1.8;


}




.service-card.full{

  grid-column:span 2;

}





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


@media(max-width:1000px){


.services-grid{

grid-template-columns:1fr;

}


.service-card.full{

grid-column:span 1;

}



.stats{

grid-template-columns:1fr 1fr;

}


}





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


@media(max-width:700px){


.hero{

padding-top:110px;

padding-bottom:70px;

}



.hero h1{

font-size:2.2rem;

line-height:1.1;

}



.hero p{

font-size:.95rem;

}



.hero-buttons{

flex-direction:column;

}



.hero-buttons a{

width:100%;

}



.hero-trust{

gap:10px;

}



.stats{

grid-template-columns:1fr;

margin:70px auto;

}



.stat-box{

padding:35px;

}



.stat-box h2{

font-size:2.5rem;

}



.services{

padding:80px 0;

}



.service-card{

padding:25px;

border-radius:20px;

}



.service-card h3{

font-size:1.5rem;

}


}