:root{
  --ngs-section-py: 5rem;
  --ngs-ink: #0f1f2b;
  --ngs-primary: #0b5d57;
  --ngs-primary-rgb: 11, 93, 87;
  --ngs-accent: #c99a48;
  --ngs-soft: #eef2f1;
  --ngs-sand: #f6f4f1;
  --bs-primary: var(--ngs-primary);
  --bs-primary-rgb: var(--ngs-primary-rgb);
  --bs-body-bg: var(--ngs-sand);
  --bs-body-color: var(--ngs-ink);
  --bs-secondary-color: rgba(15,31,43,.62);
  --bs-link-color: var(--ngs-primary);
  --bs-link-hover-color: #094744;
  --bs-tertiary-bg: var(--ngs-soft);
  --bs-border-color: rgba(15,31,43,.08);
  --bs-body-font-family: 'Figtree', 'Segoe UI', sans-serif;
  --bs-box-shadow-sm: 0 .6rem 1.4rem rgba(15,31,43,.08);
  --bs-box-shadow: 0 1rem 2.4rem rgba(15,31,43,.12);
}

html{scroll-padding-top: 90px;}

body{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(201,154,72,.18), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(11,93,87,.12), transparent 55%),
    var(--bs-body-bg);
  color: var(--bs-body-color);
}

h1,h2,h3,h4,h5,h6{
  font-family: 'Playfair Display', 'Figtree', serif;
  letter-spacing: .2px;
}

p{line-height: 1.7;}

.nav-blur{
  background: linear-gradient(120deg, rgba(15,31,43,.96), rgba(11,93,87,.88));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.16);
}

.navbar .navbar-brand{letter-spacing: .35px;}
.navbar .nav-link{color: rgba(255,255,255,.82); font-weight: 500;}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active{color: #fff;}

.brand-mark{
  display:inline-block;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.15) 45%, rgba(255,255,255,.05) 70%),
              linear-gradient(135deg, rgba(201,154,72,.7), rgba(11,93,87,.7));
  box-shadow: 0 0 0 2px rgba(255,255,255,.2) inset, 0 0 14px rgba(201,154,72,.25);
}
.brand-mark--sm{width:12px;height:12px;}

.hero{
  position: relative;
  color: #fff;
  background: linear-gradient(135deg, #0b5d57 0%, #0f3e3b 55%, #0a2b2a 100%);
  overflow: hidden;
}

.hero .card-soft{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
}

.hero .card-soft .text-body-secondary,
.hero .card-soft .small{
  color: rgba(255,255,255,.72) !important;
}

.hero .card-soft .icon-badge{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.2);
  color: #fff;
}

.hero::before{
  content:"";
  position:absolute;
  inset: -40% -30% auto auto;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(201,154,72,.28), rgba(255,255,255,0) 62%);
  transform: rotate(12deg);
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute;
  inset:auto auto -45% -25%;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0) 60%);
  pointer-events:none;
}

.hero-panel{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 1.5rem 3rem rgba(0,0,0,.2);
  backdrop-filter: blur(8px);
}

.section{
  padding: var(--ngs-section-py) 0;
}

.section-title{
  letter-spacing: .2px;
  position: relative;
  padding-bottom: .75rem;
}

.section-title::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ngs-accent), rgba(201,154,72,.2));
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.4rem .85rem;
  border-radius: 999px;
  background: rgba(201,154,72,.2);
  border: 1px solid rgba(201,154,72,.35);
  color: rgba(255,255,255,.95);
  text-transform: uppercase;
  font-size: .76rem;
  letter-spacing: .12em;
}

.card{
  border-radius: 1.25rem;
}

.card-soft{
  border: 1px solid rgba(11,93,87,.14);
  background: rgba(11,93,87,.03);
}

.card-hover{
  transition: transform .2s ease, box-shadow .2s ease;
}
.card-hover:hover{
  transform: translateY(-4px);
  box-shadow: 0 1rem 2.4rem rgba(15,31,43,.12);
}

.icon-badge{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(11,93,87,.14), rgba(11,93,87,.04));
  border: 1px solid rgba(11,93,87,.2);
  color: var(--bs-primary);
}

.icon-badge--sm{
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

.list-check li{
  padding-left: .35rem;
  margin-bottom: .5rem;
}

.org-steps{
  position: relative;
}
.org-steps::before{
  content:"";
  position:absolute;
  left: 18px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: rgba(11,93,87,.24);
}
.org-step{
  position: relative;
  padding-left: 56px;
}
.org-step::before{
  content:"";
  position:absolute;
  left: 10px;
  top: .25rem;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ngs-accent), var(--bs-primary));
  box-shadow: 0 0 0 4px rgba(11,93,87,.16);
}

.footer{
  border-top: 1px solid rgba(0,0,0,.06);
  background: linear-gradient(120deg, rgba(11,93,87,.06), rgba(201,154,72,.05));
}

.btn-to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  box-shadow: 0 .75rem 2rem rgba(0,0,0,.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 1030;
}

.btn-primary{
  background-image: linear-gradient(135deg, #0b5d57, #0f4a46);
  border-color: #0b5d57;
}

.btn-primary:hover,
.btn-primary:focus{
  background-image: linear-gradient(135deg, #094d49, #0b3e3b);
  border-color: #094d49;
}

.btn-light{
  background: #fdfbf7;
  border-color: rgba(255,255,255,.85);
  color: var(--ngs-ink);
}

.btn-light:hover,
.btn-light:focus{
  background: #ffffff;
  border-color: #ffffff;
  color: var(--ngs-ink);
}

.btn-outline-light{
  color: #fff;
  border-color: rgba(255,255,255,.7);
}

.btn-outline-light:hover,
.btn-outline-light:focus{
  color: var(--ngs-ink);
  background: #fff;
}

.btn-to-top.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (max-width: 991.98px){
  :root{--ngs-section-py: 4rem;}
}

@media (prefers-reduced-motion: reduce){
  .card-hover{transition:none;}
  .btn-to-top{transition:none;}
}
