@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap");

:root{
  --bg:#061A12;
  --text:#ffffff;
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.58);
  --green:#32D06B;
  --green2:#2ac764;
  --cardBorder:rgba(255,255,255,.12);
  --radius:28px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth;font-family:"Noto Sans",sans-serif}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Noto Sans",sans-serif;
}

button,input,textarea,select{
  font-family:inherit;
}

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

.container{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:0 24px;
}

/* Header */
.site-header{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:50;
  background:rgba(6,26,18,.55);
  backdrop-filter:blur(10px);
}
.site-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  max-width:1100px;
  margin:0 auto;
}
.site-header-inner img{
  background:rgba(255,255,255,.92);
  border-radius:999px;
  padding:6px 10px;
}
.nav{
  display:none;
  gap:24px;
  align-items:center;
}
.nav a{
  font-size:14px;
  font-weight:600;
  color:rgba(255,255,255,.86);
  transition:color .2s ease;
}
.nav a:hover{color:#fff}

.header-cta{
  display:none;
  align-items:center;
  gap:12px;
}

.hamburger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.05);
  color:#fff;
  font-weight:600;
  cursor:pointer;
}

.mobile-menu{
  display:none;
  border-top:1px solid rgba(255,255,255,.10);
  background:rgba(6,26,18,.70);
  backdrop-filter:blur(10px);
}
.mobile-menu.open{display:block}
.mobile-menu-inner{
  max-width:1100px;
  margin:0 auto;
  padding:16px 24px;
}
.mobile-links{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:10px 18px;
  font-size:14px;
  font-weight:700;
  border:0;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.btn-primary{
  background:var(--green);
  color:#fff;
  box-shadow:0 8px 22px rgba(50,208,107,.28);
}
.btn-primary:hover{background:var(--green2)}
.btn-ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,.20);
  color:#fff;
}
.btn-ghost:hover{background:rgba(255,255,255,.06)}

/* Hero */
.hero{
  position:relative;
  min-height:560px;
  overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  will-change:transform;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.58), rgba(0,0,0,.28), rgba(0,0,0,.10));
}
.hero-content{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  padding:120px 0 48px;
  text-align:center;
}
.hero-title{
  font-family:"Noto Sans",sans-serif;
  font-size:44px;
  line-height:1.05;
  font-weight:700;
  margin:0;
}
.hero-subtitle{
  margin:16px auto 0;
  max-width:720px;
  font-size:16px;
  line-height:1.55;
  color:rgba(255,255,255,.86);
}
.hero-cta{
  margin-top:22px;
}

/* Sections */
.section{
  padding:56px 0;
}
.section-title{
  font-family:"Noto Sans",sans-serif;
  font-size:28px;
  font-weight:700;
  margin:0;
}
.muted{color:var(--muted)}
.muted2{color:var(--muted2)}

/* Cards */
.image-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background:#061a12;
  min-height:320px;
  display:flex;
}
.image-card .card-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:translateZ(0);
}
.image-card .card-grad{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(6,26,18,.95), rgba(6,26,18,.45), rgba(6,26,18,0));
}
.image-card .card-body{
  position:relative;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:28px;
  gap:8px;
}
.image-card:hover{transform:translateY(-1px)}
.image-card .card-kicker{
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  color:#79f2a5;
}
.image-card .card-title{
  font-family:"Noto Sans",sans-serif;
  font-size:30px;
  font-weight:700;
}
.image-card .card-text{
  font-size:14px;
  line-height:1.55;
  color:rgba(255,255,255,.80);
}
.image-card .card-link{
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:700;
}

/* Plan form */
.duration-btn{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  border-radius:22px;
  padding:14px 18px;
  text-align:left;
  cursor:pointer;
  color:#fff;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.duration-btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.08);
}
.duration-btn.active{
  border-color:rgba(50,208,107,.45);
  background:rgba(50,208,107,.12);
}

/* Layout helpers */
.grid{
  display:grid;
  gap:24px;
}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.span-2{grid-column:span 2}
.lg-col-2{grid-column:span 2}

/* Content boxes */
.box{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  padding:22px;
}
.box strong{font-weight:700}
.list-ol{
  margin:14px 0 0;
  padding-left:20px;
  color:rgba(255,255,255,.78);
  line-height:1.6;
  font-size:14px;
}
.list-ul{
  margin:14px 0 0;
  padding-left:20px;
  color:rgba(255,255,255,.78);
  line-height:1.6;
  font-size:14px;
}

/* Footer */
.footer{
  border-top:1px solid rgba(255,255,255,.10);
  padding:36px 0 42px;
}
.footer .kicker{
  font-weight:700;
  letter-spacing:.12em;
  color:var(--green);
  font-size:13px;
}

/* Reveal */
[data-reveal]{
  opacity:0;
  transform:translateY(16px);
}
.reveal-ready{
  transition:opacity 650ms ease, transform 650ms ease;
  will-change:opacity,transform;
}

/* Responsive */
@media (min-width: 900px){
  .nav{display:flex}
  .header-cta{display:flex}
  .hamburger{display:none}
}

@media (max-width: 899px){
  .site-header{
    position:sticky;
    top:0;
    background:rgba(6,26,18,.34);
    backdrop-filter:blur(10px);
  }
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .lg-col-2,.span-2{grid-column:span 1}
  .hero-title{font-size:34px}
  .hero{
    min-height:70vh;
  }
  .hero-content{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:40px 18px 52px;
  }
  .container{padding:0 18px}
  .section{padding:42px 0}
  .image-card{min-height:280px}
  .site-header-inner{padding:14px 18px}
  .mobile-menu-inner{padding:14px 18px}
  .btn{min-height:42px}
}

@media (max-width: 1099px) and (min-width: 900px){
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}