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

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:#05070a;
  color:#f5f5f5;
  line-height:1.75;
}

p{
  margin:0.35rem 0 1rem;
  text-align:justify;
  font-size:1rem;
}

a{
  color:inherit;
  text-decoration:none;
}

/* HEADER */
header{
  position:sticky;
  top:0;
  background:rgba(5,7,10,.9);
  backdrop-filter:blur(10px);
  padding:1rem 1.2rem;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.nav{
  max-width:1150px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.12em;
}

.logo-box{
  width:30px;
  height:30px;
  border:1px solid #fff;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.75rem;
}

/* MAIN */
main{
  max-width:1150px;
  margin:auto;
  padding:3rem 1.5rem 4rem;
}

section{
  padding:3rem 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* HERO SECTION */
.hero{
  padding-top:3rem;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.3fr 0.7fr; 
  gap:1.5rem; 
  align-items:center;
}

h1{
  font-size:2.55rem;
  margin-bottom:1rem;
  font-weight:700;
  line-height:1.25;
}

.hero p{
  max-width:780px;
}

/* HERO PHOTO */
.hero-photo{
  width:30%; 
  margin-left:auto;
  margin-right:auto;
  aspect-ratio:4/5;
  border-radius:1.2rem;
  background:url('../assets/hero.jpg') center/cover;
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:0 24px 60px rgba(0,0,0,0.7);
}

/* BUTTONS */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.65rem 1.5rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.3);
  background:transparent;
  color:#fff;
  margin:0.4rem 0.5rem 0 0;
  font-size:.92rem;
}

.btn-primary{
  background:#f5f5f5;
  color:#05070a;
  border:none;
  font-weight:600;
}

/* SECTION TITLES */
h2{
  font-size:1.45rem;
  margin-bottom:0.4rem;
  font-weight:700;
}

.section-sub{
  font-size:.95rem;
  opacity:.8;
  margin-bottom:1.6rem;
}

/* CARDS */
.card{
  background:radial-gradient(circle at top left,rgba(255,255,255,0.08),rgba(5,7,10,0.96));
  border-radius:1rem;
  border:1px solid rgba(255,255,255,0.12);
  padding:1.4rem 1.5rem;
  margin-bottom:1.3rem;
  font-size:1rem;
  line-height:1.7;
}

.card-title{
  font-weight:700;
  margin-bottom:0.5rem;
}

/* FOOTER */
footer{
  text-align:center;
  padding:3rem 1.5rem 3.5rem;
  opacity:.6;
  font-size:.85rem;
}

/* MOBILE */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-photo{
    order:-1;
    width:55%;
    margin-bottom:1.5rem;
  }
}