:root{
  --ink:#2B3230;
  --slate:#5F6A66;
  --olive:#8A9977;
  --sage:#BACFAD;
  --mint:#C8E4DD;
  --teal:#92B4B1;
  --paper:#FCFDFB;
  --paper-alt:#F3F7F4;
  --display: 'Plus Jakarta Sans', sans-serif;
  --body: 'Inter', sans-serif;
  --radius: 14px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{ max-width:100%; height:auto; }
button{font-family:inherit;}

.wrap{
  max-width:1240px;
  margin:0 auto;
  padding:0 32px;
}

/* ---------- HEADER ---------- */
header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(252,253,251,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(95,106,102,0.12);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:76px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:0 1 auto;
}

nav.main-nav{
  display:flex;
  align-items:center;
  gap:6px;
}
.nav-item{
  position:relative;
}
.nav-item > a, .nav-item > button.nav-link{
  display:flex;
  align-items:center;
  gap:5px;
  padding:10px 14px;
  font-size:0.92rem;
  font-weight:500;
  color:var(--slate);
  border:none;
  background:none;
  cursor:pointer;
  border-radius:8px;
  transition:color .15s ease, background .15s ease;
}
.nav-item > a:hover, .nav-item > button.nav-link:hover{
  color:var(--ink);
  background:var(--paper-alt);
}
svg.chev{ width:12px; height:12px; flex:0 0 auto; transition:transform .18s ease; }

.mega{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%);
  width:640px;
  background:var(--paper);
  border:1px solid rgba(95,106,102,0.12);
  border-radius:16px;
  box-shadow:0 16px 40px rgba(43,50,48,0.12);
  padding:14px 10px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:4px;
  opacity:0;
  visibility:hidden;
  transform:translateX(-50%) translateY(6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
@media (hover:hover) and (pointer:fine){
  .nav-item:hover svg.chev{ transform:rotate(180deg); }
  .nav-item:hover .mega{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
  }
}
.mega-col{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:6px 4px;
}
.mega-col--bordered{
  border-left:1px solid rgba(95,106,102,0.14);
  padding-left:14px;
}
.mega-col-title{
  display:block;
  margin:0;
  padding:4px 8px 6px;
  font-size:0.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--slate);
  border-radius:8px;
  transition:color .15s ease;
}
a.mega-col-title:hover{ color:var(--ink); }
.mega-col-subtitle{
  display:block;
  margin-top:2px;
  font-size:0.66rem;
  font-weight:500;
  text-transform:none;
  letter-spacing:0;
  color:var(--olive);
}
.mega a{
  display:flex;
  gap:10px;
  padding:9px 8px;
  border-radius:10px;
  align-items:flex-start;
}
.mega a:hover{ background:var(--paper-alt); }
.mega .ic{
  width:30px; height:30px; flex:0 0 auto;
  border-radius:9px;
  background:var(--mint);
  display:flex; align-items:center; justify-content:center;
  color:var(--slate);
}
.mega .ic svg{ width:15px; height:15px; }
.mega .t{ font-size:0.82rem; font-weight:600; color:var(--ink); line-height:1.25; }
.mega .d{ font-size:0.76rem; color:var(--slate); margin-top:2px; line-height:1.3; }

.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--body);
  font-weight:600;
  font-size:0.9rem;
  padding:11px 20px;
  border-radius:999px;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:active{ transform:scale(0.97); }
.btn-primary{
  background:var(--olive);
  color:#fff;
}
.btn-primary:hover{ background:#75855F; box-shadow:0 8px 20px rgba(138,153,119,0.35); }
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:rgba(95,106,102,0.25);
}
.btn-ghost:hover{ border-color:var(--slate); background:var(--paper-alt); }
.link-plain{
  font-size:0.9rem;
  font-weight:500;
  color:var(--slate);
  padding:10px 6px;
}
.link-plain:hover{ color:var(--ink); }

.burger{
  display:none;
  border:none;
  padding:0;
  font:inherit;
  color:inherit;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:88px 0 76px;
}
.hero-bg-blob{
  position:absolute;
  top:-220px; right:-180px;
  width:640px; height:640px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--mint) 0%, rgba(200,228,221,0) 70%);
  z-index:0;
}
.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:48px;
  align-items:center;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--mint);
  color:#3E5148;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.09em;
  padding:7px 14px 7px 10px;
  border-radius:999px;
  margin-bottom:22px;
}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--olive);
  flex:0 0 auto;
}

h1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.5rem, 4.6vw, 3.85rem);
  line-height:1.05;
  letter-spacing:-0.02em;
  margin:0 0 22px;
  color:var(--ink);
}
h2{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.7rem, 2.8vw, 2.3rem);
  line-height:1.15;
  letter-spacing:-0.01em;
  margin:0 0 14px;
  color:var(--ink);
}
.accent{ color:var(--olive); }

.hero-sub{
  font-size:1.08rem;
  line-height:1.6;
  color:var(--slate);
  max-width:480px;
  margin:0 0 32px;
}

.hero-cta-row{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
  margin-bottom:28px;
}
.hero-cta-row .btn-primary{ padding:14px 26px; font-size:0.96rem; }
.hero-arrow-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:600;
  font-size:0.95rem;
  color:var(--ink);
  border-bottom:1.5px solid var(--sage);
  padding-bottom:2px;
  transition:border-color .15s ease, gap .15s ease;
}
.hero-arrow-link:hover{ border-color:var(--olive); gap:9px; }
.hero-arrow-link svg{ width:14px; height:14px; flex:0 0 auto; }

.hero-meta{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:0.85rem;
  color:var(--slate);
}
.hero-meta .pulse{
  width:8px; height:8px; border-radius:50%;
  background:#7BAE8F;
  position:relative;
}
.hero-meta .pulse::after{
  content:'';
  position:absolute; inset:-4px;
  border-radius:50%;
  border:1.5px solid #7BAE8F;
  animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{
  0%{ transform:scale(0.6); opacity:0.8; }
  100%{ transform:scale(1.8); opacity:0; }
}

/* signature circular badge */
.hero-visual{
  position:relative;
  height:460px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.backdrop-circle{
  position:absolute;
  width:400px; height:400px;
  border-radius:50%;
  background:linear-gradient(160deg, var(--mint) 0%, var(--paper-alt) 100%);
}
.badge-wrap{
  position:relative;
  width:350px; height:350px;
}
.badge-ring{
  position:absolute;
  inset:0;
  animation:spin 34s linear infinite;
}
.badge-ring text{
  font-family:var(--body);
  font-size:16px;
  font-weight:600;
  letter-spacing:0.19em;
  fill:var(--slate);
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.badge-core{
  position:absolute;
  inset:56px;
  border-radius:50%;
  overflow:hidden; /* important */
  background:var(--paper);
  box-shadow:0 20px 44px rgba(43,50,48,0.14);
  display:flex;
  align-items:center;
  justify-content:center;
}

.badge-core img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.float-dot{
  position:absolute;
  border-radius:50%;
  opacity:0.9;
  animation:float 6s ease-in-out infinite;
}
.float-dot.d1{ width:22px; height:22px; background:var(--teal); top:26px; right:44px; animation-delay:0s; }
.float-dot.d2{ width:14px; height:14px; background:var(--olive); bottom:60px; left:10px; animation-delay:1.4s; }
.float-dot.d3{ width:10px; height:10px; background:var(--sage); bottom:20px; right:70px; animation-delay:2.6s; }
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}

/* ---------- CONTENT SECTIONS ---------- */
.section{
  padding:72px 0;
}
.section--alt{
  background:var(--paper-alt);
}
.section-head{
  max-width:600px;
  margin:0 0 40px;
}
.section-head p{
  font-size:1rem;
  line-height:1.6;
  color:var(--slate);
  margin:0;
}

.prose{
  max-width:680px;
}
.prose p{
  font-size:1rem;
  line-height:1.65;
  color:var(--slate);
  margin:0 0 16px;
}
.prose p:last-child{ margin-bottom:0; }
.prose strong{ color:var(--ink); }

.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:28px;
}
.icon-card{
  text-align:center;
  padding:32px 24px;
  background:var(--paper);
  border:1px solid rgba(95,106,102,0.12);
  border-radius:var(--radius);
}
.icon-card__icon, .icon-row__icon{
  width:56px; height:56px;
  border-radius:16px;
  background:var(--mint);
  color:var(--olive);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.icon-card__icon{ margin:0 auto 18px; }
.icon-card__icon svg, .icon-row__icon svg{ width:26px; height:26px; }
.icon-card__title{
  font-family:var(--display);
  font-weight:700;
  font-size:1.05rem;
  color:var(--ink);
  margin:0 0 10px;
}
.icon-card__text{
  font-size:0.92rem;
  line-height:1.55;
  color:var(--slate);
  margin:0;
}
.icon-card .hero-arrow-link{
  margin-top:16px;
}

.icon-row-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:28px;
}
.icon-row{
  display:flex;
  align-items:flex-start;
  gap:18px;
}
.icon-row__title{
  font-family:var(--display);
  font-weight:700;
  font-size:1.02rem;
  color:var(--ink);
  margin:0 0 6px;
}
.icon-row__text{
  font-size:0.92rem;
  line-height:1.55;
  color:var(--slate);
}
.icon-row__text p{ margin:0 0 12px; }
.icon-row__text p:last-child{ margin-bottom:0; }

/* ---------- FAQ ---------- */
.faq-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:760px;
}
.faq-item{
  border:1px solid rgba(95,106,102,0.12);
  border-radius:var(--radius);
  background:var(--paper);
  overflow:hidden;
}
.faq-item summary{
  cursor:pointer;
  font-weight:600;
  font-size:0.98rem;
  color:var(--ink);
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 22px;
  transition:background .15s ease;
}
.faq-item summary:hover{ background:var(--paper-alt); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary svg.chev{ color:var(--olive); }
.faq-item[open] summary svg.chev{ transform:rotate(180deg); }
.faq-item__body{
  padding:0 22px 18px;
  font-size:0.92rem;
  line-height:1.6;
  color:var(--slate);
}
.faq-item__body p{ margin:0 0 12px; }
.faq-item__body p:last-child{ margin-bottom:0; }
.faq-item__body ul{ margin:0 0 12px; padding-left:20px; }

/* ---------- MODAL ---------- */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(43,50,48,0.55);
  backdrop-filter:blur(4px);
  z-index:200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.modal-overlay.active{ display:flex; }
.modal{
  position:relative;
  width:100%;
  max-width:640px;
  max-height:85vh;
  overflow-y:auto;
  background:var(--paper);
  border-radius:var(--radius);
  box-shadow:0 20px 60px rgba(43,50,48,0.25);
  padding:40px;
}
.modal__close{
  position:absolute;
  top:16px; right:16px;
  width:32px; height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  line-height:1;
  color:var(--slate);
  border-radius:50%;
  transition:background .15s ease, color .15s ease;
}
.modal__close:hover{ background:var(--paper-alt); color:var(--ink); }
.modal__title{
  font-family:var(--display);
  font-weight:800;
  font-size:1.4rem;
  color:var(--ink);
  margin:0 0 20px;
  padding-right:32px;
}
.modal__subtitle{
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--olive);
  margin:0 0 8px;
}
.modal__text{
  font-size:0.95rem;
  line-height:1.65;
  color:var(--slate);
  margin:0 0 20px;
}
.modal__list{
  list-style:disc;
  padding-left:20px;
  margin:0 0 16px;
}
.modal__list li{
  font-size:0.92rem;
  line-height:1.5;
  color:var(--slate);
  margin-bottom:6px;
}

/* ---------- CONTACT FORM ---------- */
.contact-form{
  max-width:640px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.form-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.form-group label{
  font-size:0.88rem;
  font-weight:600;
  color:var(--ink);
}
.form-group label span{ color:var(--olive); }
.form-group input,
.form-group textarea{
  font-family:var(--body);
  font-size:0.95rem;
  color:var(--ink);
  background:var(--paper);
  border:1px solid rgba(95,106,102,0.25);
  border-radius:10px;
  padding:12px 14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-group input::placeholder,
.form-group textarea::placeholder{ color:var(--slate); opacity:0.7; }
.form-group input:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--olive);
  box-shadow:0 0 0 3px rgba(138,153,119,0.15);
}
.form-group textarea{ resize:vertical; min-height:140px; }
.contact-form .btn-primary{ align-self:flex-start; padding:14px 28px; }

/* ---------- WAVE DIVIDER ---------- */
.wave-divider{
  line-height:0;
  background:var(--paper);
  margin-top:-1px;
}
.wave-divider--alt{
  line-height:0;
  background:var(--paper-alt);
  margin-bottom:-1px;
}
.wave-divider svg, .wave-divider--alt svg{ display:block; width:100%; height:60px; }

/* ---------- FIT-VIEWPORT PAGES ---------- */
body.fit-screen{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
body.fit-screen .main{
  flex:1 1 auto;
  display:flex;
  align-items:center;
}
body.fit-screen .main > .section{
  width:100%;
  padding:32px 0;
}
body.fit-screen .section-head,
body.fit-screen .contact-form{
  margin-left:auto;
  margin-right:auto;
}
body.fit-screen .site-footer{
  flex:0 0 auto;
  margin-top:0;
}

/* ---------- FOOTER ---------- */
.site-footer{
  border-top:1px solid rgba(95,106,102,0.12);
  padding:28px 0;
  margin-top:40px;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  font-size:0.85rem;
  color:var(--slate);
}
.footer-nav{
  display:flex;
  gap:20px;
}
.footer-nav a:hover{ color:var(--ink); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .header-actions .btn-ghost{ display:none; }
  .brand img{ width:160px; }
  .burger{
    display:flex;
    width:38px; height:38px;
    align-items:center; justify-content:center;
    border-radius:999px;
    background:var(--paper-alt);
    cursor:pointer;
  }

  nav.main-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    background:var(--paper);
    border-bottom:1px solid rgba(95,106,102,0.12);
    box-shadow:0 16px 40px rgba(43,50,48,0.12);
    padding:10px 16px;
    max-height:calc(100vh - 76px);
    overflow-y:auto;
  }
  nav.main-nav.is-open{ display:flex; }

  .nav-item{ width:100%; }
  .nav-item > a, .nav-item > button.nav-link{ width:100%; justify-content:space-between; }
  .nav-item .mega{
    position:static;
    transform:none;
    width:100%;
    box-shadow:none;
    border:none;
    background:none;
    padding:0 0 8px 12px;
    grid-template-columns:1fr;
    gap:2px;
    opacity:1;
    visibility:visible;
    display:none;
  }
  .nav-item.mega-open .mega{ display:grid; }
  .nav-item.mega-open svg.chev{ transform:rotate(180deg); }
  .nav-item .mega-col{ padding:4px 0; }
  .nav-item .mega-col--bordered{
    border-left:none;
    border-top:1px solid rgba(95,106,102,0.14);
    padding-left:0;
    padding-top:8px;
    margin-top:4px;
  }
  .nav-item .mega-col-title{ padding:4px 4px 6px; }

  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ height:320px; order:-1; }
  .backdrop-circle{ width:280px; height:280px; }
  .badge-wrap{ width:220px; height:220px; }
  .badge-core{ inset:40px; }
  .hero-sub{ max-width:none; }
  .icon-row{ flex-direction:column; }
}
@media (max-width: 520px){
  .wrap{ padding:0 20px; }
  .wave-divider svg, .wave-divider--alt svg{ height:30px; }
  .brand img{ width:130px; }
  .header-actions{ gap:8px; }
  .header-actions .btn-primary{ padding:9px 14px; font-size:0.85rem; }
  .form-row{ grid-template-columns:1fr; }
  .modal{ padding:28px 20px; }
}

@media (prefers-reduced-motion: reduce){
  .badge-ring{ animation:none; }
  .float-dot{ animation:none; }
  .hero-meta .pulse::after{ animation:none; }
}