/* ========== Base ========== */
:root{
  --bg: #f7faf9;
  --ink: #0e2b28;
  --muted: #5d6d6a;
  --surface: #ffffff;
  --card: #eef7f5;
  --primary-600: #2b7a78;
  --primary-700: #1f6a67;
  --primary-800: #155e5b;
  --gradient-start: #0f6d66;
  --gradient-end: #0a3e3a;
  --radius: 14px;
  --radius-lg: 18px;
  --shadow-1: 0 6px 18px rgba(0,0,0,.08);
  --shadow-2: 0 20px 50px rgba(0,0,0,.14);
  --control-height: 48px;
  --control-min-width: 160px;
  --control-padding-inline: 1.25rem;
  --control-font-size: .9rem;
  --control-font-weight: 500;
  --control-radius: 10px;
  --btn-cta-bg: #69A2A8;
  --btn-cta-bg-hover: #5B9399;
  --btn-cta-border: #88CFD7;
  --btn-cta-text: #ffffff;
  --btn-cta-shadow: 0px 2px 6px rgba(0,0,0,.16);
  --feature-card-bg: rgba(192, 238, 241, 0.4);
  --feature-icon-size: 72px;
  --feature-icon-offset: -64px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}

.nowrap { white-space: nowrap; }

.container{
  width: min(1120px, 100% - 48px);
  margin-inline: auto;
}

/* ========== Header ========== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: saturate(160%) blur(8px);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 0;
}
.brand{
  font-weight: 700;
  font-size: clamp(20px, 2vw, 24px);
  text-decoration: none;
  color: var(--ink);
  letter-spacing: .3px;
}
.header-actions .btn{ white-space: nowrap; }

/* ========== Buttons & Inputs ========== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:0 var(--control-padding-inline, 1.25rem);
  border-radius: var(--control-radius, 10px);
  border: 1px solid transparent;
  font-weight: var(--control-font-weight, 500);
  font-size: var(--control-font-size, .9rem);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .06s ease, background .2s ease, box-shadow .2s ease;
  user-select: none;
  height: var(--control-height, 48px);
  min-width: var(--control-min-width, 160px);
}
.btn:active{ transform: translateY(1px); }
.btn-cta,
.btn-primary{
  background: var(--btn-cta-bg, #69A2A8);
  border: 1px solid var(--btn-cta-border, #88CFD7);
  box-shadow: var(--btn-cta-shadow, 0px 2px 6px rgba(0,0,0,.16));
  color: var(--btn-cta-text, #ffffff);
}
.btn-cta:hover,
.btn-primary:hover{
  background: var(--btn-cta-bg-hover, #5B9399);
  border-color: var(--btn-cta-border, #88CFD7);
  color: var(--btn-cta-text, #ffffff);
}
.btn-secondary{
  background: #cfe8e5;
  color: var(--primary-800);
  border-color: #b9d8d4;
}
.btn-secondary:hover{ background:#badbd6; }
.btn.full{ width: 100%; }

.btn-icon{
  width: 18px;
  height: 18px;
  filter: brightness(0) saturate(100%) invert(17%) sepia(15%) saturate(1225%) hue-rotate(133deg) brightness(95%) contrast(88%);
}

.input,
.textarea{
  width: 100%;
  border: 1px solid #d7e4e1;
  background: #fff;
  border-radius: var(--control-radius, 10px);
  font-size: 1rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.input:focus, .textarea:focus{
  border-color: #9ccac5;
  box-shadow: 0 0 0 3px rgba(21,94,91,.12);
}
.input{
  padding: 0 .95rem;
  height: var(--control-height, 48px);
}
.textarea{
  padding: .9rem .95rem;
  resize: vertical;
  min-height: 150px;
}

/* ========== Hero ========== */
.section.hero{
  padding: 40px 0 20px;
}
.hero-card{
  background: var(--Dark-Gradient, linear-gradient(27deg, #083032 8.33%, #23575A 91.67%));
  color: #ecfffd;
  border-radius: 24px;
  padding: clamp(28px, 6vw, 56px);
  box-shadow: var(--shadow-2);
  text-align: center;
}
.hero-title{
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.05;
  font-weight: 600;
  margin: 0 auto 16px;
  letter-spacing: .2px;
  text-align: center;
}
.hero-title .nowrap{
  color: #C0EEF1;
}
.lead{
  max-width: 48ch;
  color: #cff3ee;
  margin: 0 auto 24px;
  font-size: clamp(16px, 2.2vw, 18px);
  text-align: center;
}
.inline-form{
  display:flex;
  gap: .75rem;
  flex-wrap: wrap;
  max-width: 560px;
  justify-content: center;
  margin: 0 auto;
}
.inline-form .input{
  flex: 1 1 260px;
}
.inline-form .input[type="email"]{
  background-image: url("../images/icon_email.svg");
  background-repeat: no-repeat;
  background-position: 18px 50%;
  background-size: 18px;
  padding-left: 52px;
}

/* ========== Logos ========== */
.section.logos{
  padding: 28px 0 0;
}
.eyebrow{
  color: var(--muted);
  text-align:center;
  margin: 22px 0 10px;
  font-size: .95rem;
}
.logo-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 28px;
  align-items:center;
  text-align:center;
}
.logo-item{
  background: #fff;
  border-radius: 12px;
  padding: 22px;
  color: #7b8a87;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: var(--shadow-1);
}
.logo-item img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ========== Tools / Cards ========== */
.section.tools{ padding: 40px 0 16px; }
.section-title{
  text-align:center;
  font-size: clamp(28px, 3.4vw, 40px);
  margin: 10px 0 6px;
}
.section-lead{
  text-align:center;
  color: var(--muted);
  max-width: 60ch;
  margin: 0 auto 60px;
}

.cards-grid{
  display:grid;
  gap: 26px;
  margin-block: 60px 20px;
  justify-items: center;
}
.cards-grid.three{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-grid.two{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card.feature{
  background: var(--feature-card-bg, #C0EEF1);
  border-radius: 14px;
  padding: 32px 24px 26px;
  box-shadow: var(--shadow-1);
  max-width: min(100%, 350px);
  width: 100%;
}
.feature-icon{
  width: var(--feature-icon-size, 72px);
  height: auto;
  display: block;
  margin: var(--feature-icon-offset, -64px) auto 18px;
}
.card.feature h3{
  text-align:center;
  font-size: 22px;
  margin: 6px 0 4px;
}
.card .subhead{
  text-align:center;
  margin: 0 0 10px;
  color: var(--muted);
  font-weight: 600;
}
.card .body{
  color:#3a4745;
  font-size: 15.5px;
}

/* ========== CTA ========== */
.section.cta{
  padding: 42px 0 60px;
}
.cta-card{
  background: linear-gradient(150deg, var(--gradient-start), var(--gradient-end));
  color: #eafffd;
  border-radius: 18px;
  padding: clamp(24px, 5.4vw, 48px);
  box-shadow: var(--shadow-2);
}
.cta-title{
  margin: 0 0 8px;
  font-size: clamp(28px, 3.6vw, 40px);
}
.cta-lead{
  margin: 0 0 22px;
  color: #cfeceb;
}
.cta-layout{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 22px;
}
.form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.contact-boxes{
  display:grid;
  gap: 16px;
}
.contact-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  background: rgba(255,255,255,.94);
  color: var(--ink);
  border-radius: 16px;
  padding: 18px 22px;
  text-decoration: none;
  box-shadow: 0 18px 36px rgba(10, 62, 58, .14);
  border: 1px solid rgba(255,255,255,.6);
  transition: transform .2s ease, box-shadow .2s ease;
  min-height: 92px;
}
.contact-box:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 48px rgba(10, 62, 58, .18);
}
.contact-box-text{
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.contact-box .label{
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(14,43,40,.6);
}
.contact-box .value{
  font-weight: 600;
  font-size: 1.014rem;
  color: #23575A;
}
.contact-box .arrow{
  font-size: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: #23575A;
  transition: transform .2s ease;
}
.contact-box:hover .arrow{
  transform: translate(3px, -3px);
}

/* ========== Footer ========== */
.site-footer{
  padding: 24px 0 34px;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.footer-brand{
  display:flex;
  justify-content:center;
}
.footer-brand img{
  max-width: 128px;
  height: auto;
}
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding-top: 16px;
}
.footer-right{
  display:flex;
  align-items:center;
  gap: 14px;
}
.footer-right a{
  color: var(--primary-800);
  text-decoration: none;
}
.footer-right a:hover{ text-decoration: underline; }

.legal{
  color: var(--muted);
  font-size: 14px;
}

/* ========== Responsive ========== */
@media (max-width: 1000px){
  .cards-grid.three{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-layout{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .cards-grid.three{ grid-template-columns: 1fr; }
  .cards-grid.two{ grid-template-columns: 1fr; }
  .logo-row{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .form-row{ grid-template-columns: 1fr; }
  .header-inner{ padding: 14px 0; }
  .footer-bottom{
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .footer-right{
    justify-content: center;
    flex-wrap: wrap;
  }
}