:root{
  --jugi-teal:#087f83;
  --jugi-teal-dark:#075e61;
  --jugi-teal-soft:#e9f6f5;
  --jugi-amber:#f6b71e;
  --jugi-ink:#173338;
  --jugi-muted:#60777a;
  --jugi-bg:#f7fbfb;
  --jugi-white:#ffffff;
  --jugi-line:#dce9e8;
  --jugi-shadow:0 20px 55px rgba(7,94,97,.12);
}

html{scroll-behavior:smooth}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--jugi-ink);
  background:#fff;
}

.navbar{
  backdrop-filter: blur(14px);
  background:rgba(255,255,255,.92)!important;
  border-bottom:1px solid rgba(220,233,232,.8);
}

.navbar-brand{
  font-weight:900;
  letter-spacing:-.04em;
  font-size:1.7rem;
  color:var(--jugi-teal-dark)!important;
}
.navbar-brand .dot{color:var(--jugi-amber)}
.nav-link{font-weight:650;color:#38575b!important}
.nav-link:hover{color:var(--jugi-teal)!important}

.btn-jugi{
  background:var(--jugi-teal);
  border-color:var(--jugi-teal);
  color:#fff;
  font-weight:750;
  border-radius:999px;
  padding:.8rem 1.25rem;
  box-shadow:0 10px 25px rgba(8,127,131,.18);
}
.btn-jugi:hover,.btn-jugi:focus{background:var(--jugi-teal-dark);border-color:var(--jugi-teal-dark);color:#fff}
.btn-jugi-outline{
  border:1.5px solid var(--jugi-line);
  background:#fff;
  color:var(--jugi-ink);
  font-weight:750;
  border-radius:999px;
  padding:.8rem 1.25rem;
}
.btn-jugi-outline:hover{border-color:var(--jugi-teal);color:var(--jugi-teal-dark);background:var(--jugi-teal-soft)}

.hero{
  min-height:88vh;
  display:flex;
  align-items:center;
  padding:8rem 0 5rem;
  background:
    radial-gradient(circle at 83% 22%, rgba(246,183,30,.16), transparent 26%),
    radial-gradient(circle at 12% 18%, rgba(8,127,131,.11), transparent 32%),
    linear-gradient(180deg,#fff 0%,#f7fbfb 100%);
  overflow:hidden;
}
.hero h1{
  font-size:clamp(2.55rem,6vw,5.15rem);
  line-height:.98;
  letter-spacing:-.055em;
  font-weight:900;
  margin-bottom:1.5rem;
}
.hero .lead{font-size:clamp(1.08rem,2vw,1.35rem);line-height:1.65;color:var(--jugi-muted);max-width:760px}
.hero-badge{
  display:inline-flex;align-items:center;gap:.55rem;
  border:1px solid var(--jugi-line);
  background:rgba(255,255,255,.84);
  color:var(--jugi-teal-dark);
  border-radius:999px;
  padding:.48rem .8rem;
  font-weight:800;
  font-size:.9rem;
  margin-bottom:1.25rem;
}
.hero-badge .pulse{width:.65rem;height:.65rem;border-radius:50%;background:var(--jugi-amber);box-shadow:0 0 0 6px rgba(246,183,30,.13)}
.hero-visual{position:relative;min-height:580px}
.hero-visual:before{
  content:"";position:absolute;inset:13% 7% 8% 11%;
  border-radius:50% 44% 48% 42%;
  background:linear-gradient(145deg,rgba(8,127,131,.12),rgba(246,183,30,.12));
  filter:blur(.2px);
}
.hero-visual img{position:relative;z-index:2;display:block;max-height:670px;max-width:100%;margin:auto;filter:drop-shadow(0 22px 28px rgba(23,51,56,.18))}

.trust-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.trust-pill{display:flex;align-items:center;gap:.55rem;color:#4f696c;font-size:.93rem;font-weight:650}
.trust-pill i{color:var(--jugi-teal)}

section{padding:6rem 0}
.section-kicker{font-size:.82rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase;color:var(--jugi-teal);margin-bottom:.75rem}
.section-title{font-weight:900;letter-spacing:-.035em;font-size:clamp(2rem,4vw,3.25rem);line-height:1.08;margin-bottom:1rem}
.section-lead{color:var(--jugi-muted);font-size:1.12rem;line-height:1.7;max-width:760px}

.card-jugi{
  border:1px solid var(--jugi-line);
  border-radius:1.35rem;
  background:#fff;
  box-shadow:0 8px 30px rgba(23,51,56,.05);
  height:100%;
  transition:.25s ease;
}
.card-jugi:hover{transform:translateY(-4px);box-shadow:var(--jugi-shadow)}
.icon-box{
  width:3.2rem;height:3.2rem;border-radius:1rem;display:grid;place-items:center;
  background:var(--jugi-teal-soft);color:var(--jugi-teal-dark);font-size:1.35rem;margin-bottom:1rem
}
.card-jugi h3{font-size:1.2rem;font-weight:850;letter-spacing:-.02em}
.card-jugi p{color:var(--jugi-muted);line-height:1.65;margin:0}

.bg-soft{background:var(--jugi-bg)}

.feature-list{list-style:none;padding:0;margin:0;display:grid;gap:.85rem}
.feature-list li{display:flex;gap:.8rem;align-items:flex-start;color:#3f5d61;line-height:1.55}
.feature-list i{color:var(--jugi-teal);font-size:1.15rem;margin-top:.12rem}

.process-step{position:relative;padding-left:4.4rem;min-height:4rem;margin-bottom:2rem}
.process-step .num{position:absolute;left:0;top:0;width:3.25rem;height:3.25rem;border-radius:1rem;display:grid;place-items:center;background:#fff;border:1px solid var(--jugi-line);font-weight:900;color:var(--jugi-teal-dark);box-shadow:0 6px 20px rgba(23,51,56,.06)}
.process-step h3{font-size:1.15rem;font-weight:850;margin-bottom:.35rem}
.process-step p{color:var(--jugi-muted);margin:0;line-height:1.6}

.reference-card{
  border-radius:1.65rem;
  padding:clamp(1.5rem,4vw,3rem);
  background:linear-gradient(135deg,#073f42 0%,#087f83 100%);
  color:#fff;
  box-shadow:0 28px 70px rgba(7,94,97,.24);
  overflow:hidden;
  position:relative;
}
.reference-card:after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;right:-100px;top:-120px;background:rgba(246,183,30,.18)}
.reference-card>*{position:relative;z-index:1}
.reference-card .section-kicker{color:#bfe9e8}
.reference-card p{color:#d7eeee}
.reference-metric{padding:1rem 0;border-top:1px solid rgba(255,255,255,.18)}
.reference-metric strong{display:block;font-size:1.05rem}
.reference-metric span{color:#c7e5e5;font-size:.95rem}

.audience-tag{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .8rem;border-radius:999px;background:#fff;border:1px solid var(--jugi-line);font-weight:700;color:#476266;margin:.3rem .25rem}

.cta-box{border-radius:1.6rem;padding:clamp(1.6rem,5vw,3.4rem);background:linear-gradient(130deg,#f1faf9,#fff7df);border:1px solid #d9ebe9}
.cta-box h2{font-weight:900;letter-spacing:-.035em}

.form-control,.form-select{border-radius:.9rem;border-color:var(--jugi-line);padding:.85rem 1rem}
.form-control:focus,.form-select:focus{border-color:var(--jugi-teal);box-shadow:0 0 0 .2rem rgba(8,127,131,.12)}

footer{padding:2.5rem 0;border-top:1px solid var(--jugi-line);color:#6b8184;background:#fff}
.footer-brand{font-weight:900;font-size:1.4rem;color:var(--jugi-teal-dark)}

.mascot-mini{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(23,51,56,.12))}

@media (max-width:991.98px){
  .hero{padding-top:7rem;min-height:auto}
  .hero-visual{min-height:440px;margin-top:1rem}
  .hero-visual img{max-height:500px}
  section{padding:4.5rem 0}
}
@media (max-width:575.98px){
  .hero h1{font-size:2.55rem}
  .hero-visual{min-height:360px}
  .hero-visual img{max-height:420px}
  .btn-jugi,.btn-jugi-outline{width:100%}
}