/* ====================================================== */
/* HERO SECTION */
/* Bagian pertama yang dilihat pengunjung */
/* ====================================================== */

.hero{

/* gradient background */
background:linear-gradient(
160deg,
var(--primary-900),
var(--primary-700),
var(--primary-500)
);

/* spacing */
padding:100px 0;

/* text color */
color:white;

position:relative;

overflow:hidden;

}

/* pattern overlay */

.hero::before{

content:"";

position:absolute;

inset:0;

/* hex / network pattern */

background-image:url("/assets/img/pattern-science.svg");

background-size:600px;

background-repeat:repeat;

/* sangat halus */

opacity:0.06;

pointer-events:none;

}


/* ====================================================== */
/* GRID HERO */
/* layout 2 kolom */
/* ====================================================== */

.hero-grid{

display:grid;

grid-template-columns:1.1fr 0.9fr;

align-items:center;

gap:60px;

}


/* ====================================================== */
/* BADGE */
/* ====================================================== */

.hero-badge{

display:inline-block;

padding:6px 16px;

border-radius:50px;

opacity:1;

background:rgba(0,200,180,0.15);
border:1px solid rgba(0,200,180,0.4);

font-size:24px;

color:var(--accent-400);

margin-bottom:20px;

}


/* ====================================================== */
/* HEADLINE */
/* ====================================================== */

.hero h1{

font-size:46px;

line-height:1.2;

margin-bottom:20px;

/* font-family:var(--font-heading); */
color: white;
}

.hero h1 span{

color:var(--accent-400);

}


/* ====================================================== */
/* DESCRIPTION */
/* ====================================================== */

.hero p{

font-size:18px;

max-width:520px;

opacity:0.8;

margin-bottom:30px;

}


/* ====================================================== */
/* CTA BUTTONS */
/* ====================================================== */

.hero-buttons{

display:flex;

flex-wrap:wrap;

gap:16px;

}


/* ====================================================== */
/* HERO VISUAL CARD */
/* ====================================================== */

.hero-visual{

display:flex;

justify-content:center;
max-width:420px;

}

.hero-card{
padding:40px;
width:320px;

height:260px;

border-radius:24px;

background:rgba(255,255,255,0.08);

backdrop-filter:blur(10px);

border:1px solid rgba(255,255,255,0.2);

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

}

.hero-icon{

font-size:46px;

margin-bottom:10px;

}

.hero-text{

max-width:560px;

}


/* ====================================================== */
/* RESPONSIVE - TABLET */
/* ====================================================== */

@media (max-width: 992px) {

  .hero {
    padding: 70px 0;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .hero-text {
    max-width: 100%;
  }

  .hero h1 {
    font-size: 36px;
  }

  .hero p {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons {
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero-visual {
    max-width: 300px;
    margin: 0 auto;
  }

}

/* ====================================================== */
/* RESPONSIVE - MOBILE */
/* ====================================================== */

@media (max-width: 576px) {

  .hero {
    padding: 50px 0;
  }

  .hero h1 {
    font-size: 28px;
  }

  .hero p {
    font-size: 15px;
  }

  .hero-badge {
    font-size: 18px;
    padding: 5px 12px;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .hero-visual {
    display: none;
  }

  .hero-card {
    width: 100%;
    height: auto;
    padding: 30px;
  }

}