:root{
  --brand-1:#0f766e;
  --brand-2:#0e7490;
  --text:#0f172a;
  --muted:#475569;
  --surface:#ffffff;
  --bg:#f5f7fb;
}

html { scroll-behavior: smooth; }

body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

/* Navbar */
.navbar .nav-link{ font-weight: 500; }
.navbar .nav-link.active{ color: var(--brand-1) !important; }

/* Hero */
.hero{
  position: relative;
  overflow: hidden;
  color: #fff;
  background: radial-gradient(1200px 600px at 70% 30%, rgba(255,255,255,.18), transparent 60%),
              linear-gradient(135deg, var(--brand-1), var(--brand-2));
}

.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  min-height: 90vh;              /* makes it tall and balanced */
  display: flex;
  align-items: center;           /* vertical center */
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,.05), rgba(0,0,0,.18));
  pointer-events:none;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero-title{
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.hero-subtitle{
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  opacity: .92;
}

.section{ padding: 3rem 0; }
.section-title{ font-weight: 700; letter-spacing: -0.01em; }

.soft-card{
  background: var(--surface);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.06);
}

.btn-brand{
  background: var(--brand-1);
  border-color: var(--brand-1);
}
.btn-brand:hover{
  background: #0b5f58;
  border-color: #0b5f58;
}

.btn-outline-brand{
  color: #fff;
  border-color: rgba(255,255,255,.7);
}
.btn-outline-brand:hover{
  color: #0b5f58;
  background: #fff;
  border-color: #fff;
}

.site-footer{
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  color: var(--muted);
  padding: 2rem 0;
  background: #fff;
}

.muted{ color: var(--muted); }

/* Hero right-side logo */
.hero-mark {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-mark svg {
  width: 320px;
  max-width: 100%;
  height: auto;
  opacity: 0.85;
}

@media (max-width: 991.98px){
  .hero-mark{
    margin-top: 1.5rem;
  }
  .hero-mark svg{
    width: min(260px, 75vw);
  }
}