@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');
:root{
  --color-primary:#5F7F59;
  --color-primary-dark:#425F3F;
  --color-accent:#B8D8A8;
  --color-glow:rgba(184,216,168,.38);
  --color-soft:#F0F6EC;
  --color-bg:#FAFCF7;
  --color-bg-2:#F5F8EE;
  --color-card:rgba(255,255,255,.74);
  --color-stroke:rgba(181,212,206,.58);
  --color-text:#2B392B;
  --color-muted:#6A7868;
  --font-main:'DM Sans',system-ui,sans-serif;
  --font-heading:'Montserrat',system-ui,sans-serif;
  --radius:28px;
  --shadow:0 22px 55px rgba(18,57,54,.08);
  --shadow-hover:0 28px 70px rgba(18,57,54,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#f7fbff 0%,#FAFCF7 40%,#ffffff 100%);color:var(--color-text);font-family:var(--font-main);font-weight:400;line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:500;letter-spacing:-.045em;color:#223222;margin:0 0 .45rem}
h1{font-size:clamp(3.4rem,5.3vw,5.25rem);line-height:.94}
h2{font-size:clamp(2.25rem,3.8vw,3.55rem);line-height:1.02}
h3{font-size:1.42rem;line-height:1.2}
p{color:var(--color-muted);margin-top:0}
a{transition:transform .25s ease,box-shadow .25s ease,color .25s ease,background-color .25s ease,border-color .25s ease}
.top-note{background:linear-gradient(90deg,#344E35,#5A7852);color:#d6f3ed;padding:.62rem 0;font-size:.78rem;border-bottom:1px solid rgba(255,255,255,.08)}
.top-note span{display:inline-flex;align-items:center;gap:.45rem}
.site-header{background:rgba(248,253,252,.7);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom:1px solid rgba(183,218,211,.55);box-shadow:0 10px 28px rgba(26,62,57,.04)}
.site-header nav a:hover{color:var(--color-primary)}
.brand-wrap{display:flex;align-items:center;gap:.8rem;text-decoration:none}
.brand-mark{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#82A878,#5F7F59);color:#fff;box-shadow:0 10px 30px rgba(184,216,168,.28), 0 0 0 6px rgba(255,255,255,.55)}
.brand-name{font-weight:700;color:#223222;font-size:1.12rem;letter-spacing:-.02em}
.site-header nav{font-weight:500;letter-spacing:-.01em}
.nav-cta,.btn-primary{position:relative;isolation:isolate;background:linear-gradient(135deg,#5F7F59,#82A878);color:#fff!important;border-radius:999px;padding:.88rem 1.35rem;display:inline-flex;align-items:center;gap:.55rem;box-shadow:0 16px 34px rgba(184,216,168,.22),0 0 0 1px rgba(255,255,255,.25) inset}
.nav-cta:before,.btn-primary:before{content:'';position:absolute;inset:1px;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0));z-index:-1}
.nav-cta:hover,.btn-primary:hover{transform:translateY(-2px);box-shadow:0 24px 44px rgba(184,216,168,.28),0 0 0 10px rgba(184,216,168,.14)}
.mobile-link{display:block;padding:.8rem 1rem;border-radius:16px;color:#334a44;font-weight:500}
.mobile-link:hover{background:rgba(239,251,248,.85)}
.hero-section{position:relative;overflow:hidden;padding:7rem 0 6rem;background:linear-gradient(135deg,rgba(255,255,255,.9) 0%,rgba(240,249,255,.92) 45%,rgba(240,253,250,.95) 100%)}
.hero-section:before,.hero-section:after{content:'';position:absolute;border-radius:999px;filter:blur(26px);pointer-events:none}
.hero-section:before{width:480px;height:480px;left:-110px;top:-120px;background:rgba(184,216,168,.26)}
.hero-section:after{width:360px;height:360px;right:-60px;bottom:-110px;background:rgba(174,212,255,.26)}
.hero-lead{font-size:1.13rem;max-width:700px;color:#58706b}
.hero-media{position:relative;padding:18px;border-radius:38px;background:rgba(255,255,255,.44);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.65);box-shadow:var(--shadow)}
.hero-media:before{content:'';position:absolute;inset:auto -22px -22px auto;width:64%;height:66%;background:radial-gradient(circle,rgba(184,216,168,.52) 0%,rgba(184,216,168,0) 70%);border-radius:999px;z-index:0}
.hero-media:after{content:'';position:absolute;inset:14px;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0));border-radius:28px;pointer-events:none;z-index:2}
.hero-media img{position:relative;z-index:1;width:100%;height:560px;object-fit:cover;border-radius:28px;box-shadow:0 16px 42px rgba(20,40,38,.16)}
.eyebrow{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .82rem;border-radius:999px;background:rgba(223,244,239,.9);backdrop-filter:blur(12px);color:#52704E;font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.11em;margin-bottom:1.05rem;border:1px solid rgba(188,224,216,.75)}
.eyebrow.light{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.18)}
.btn-secondary{border:1px solid rgba(191,211,208,.9);color:#425F3F;border-radius:999px;padding:.85rem 1.25rem;font-weight:600;background:rgba(255,255,255,.82);backdrop-filter:blur(12px)}
.btn-secondary:hover{border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-1px)}
.section-shell{position:relative;padding:5.4rem 0}
.section-shell.soft{background:linear-gradient(180deg,rgba(239,248,245,.72),rgba(255,255,255,0))}
.section-shell.green{background:linear-gradient(180deg,rgba(232,248,244,.9),rgba(247,255,253,.55))}
.section-heading{max-width:820px;margin:0 auto 2.8rem;text-align:center}
.section-heading p{font-size:1.05rem}
.card-grid{display:grid;gap:1.5rem}
.card-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.info-card,.article-card,.mini-card,.form-card,.check-item,.faq-item,.stat-card,.step,.notice,.quote-card{background:var(--color-card);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--color-stroke);border-radius:var(--radius);box-shadow:var(--shadow)}
.info-card,.article-card,.mini-card,.form-card,.faq-item,.stat-card,.step,.notice{position:relative;overflow:hidden}
.info-card:before,.article-card:before,.form-card:before,.faq-item:before,.step:before,.notice:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0));pointer-events:none}
.info-card{padding:1.65rem}
.info-card:hover,.article-card:hover,.mini-card:hover,.faq-item:hover,.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.icon-badge{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(184,216,168,.14),rgba(184,216,168,.24));color:var(--color-primary);font-size:1.12rem;margin-bottom:1rem;box-shadow:inset 0 0 0 1px rgba(145,213,201,.45)}
.article-card img,.fixed-photo{width:100%;height:250px;object-fit:cover;display:block}
.article-card .content{padding:1.4rem}
.article-card .font-bold{color:#587A52}
.chip{display:inline-flex;padding:.36rem .68rem;border-radius:999px;background:rgba(237,244,240,.92);color:#425F3F;font-size:.72rem;font-weight:700;margin-bottom:.75rem;border:1px solid rgba(198,223,215,.8)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.15rem;align-items:center}
.split img{width:100%;height:440px;object-fit:cover;border-radius:32px;box-shadow:var(--shadow);border:1px solid rgba(192,219,212,.45)}
.check-list{display:grid;gap:.95rem;margin-top:1.5rem}
.check-item{display:flex;gap:.8rem;align-items:flex-start;padding:1rem 1.1rem}
.check-item i{color:var(--color-primary);margin-top:.35rem}
.notice{padding:1.4rem 1.5rem;background:linear-gradient(180deg,rgba(255,250,244,.82),rgba(255,255,255,.78));border-color:rgba(243,213,182,.72);color:#604126}
.notice p{color:#6a5039;margin:.3rem 0 0}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.stat-card{padding:1.28rem}
.stat-card strong{display:block;color:var(--color-primary);font-size:1.64rem;font-family:var(--font-heading);font-weight:600;letter-spacing:-.04em}
.timeline{max-width:880px;margin:auto;display:grid;gap:1rem}
.step{display:grid;grid-template-columns:58px 1fr;gap:1rem;padding:1.3rem}
.step-num{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#5F7F59,#82A878);color:#fff;display:grid;place-items:center;font-weight:700;box-shadow:0 12px 25px rgba(184,216,168,.24)}
.faq-list{max-width:900px;margin:auto;display:grid;gap:1rem}
.faq-item{padding:1.4rem}
.faq-item h3{font-size:1.16rem;margin:0 0 .48rem;font-family:var(--font-main);font-weight:600;letter-spacing:-.02em}
.quote-card{padding:2rem;background:linear-gradient(135deg,#344A35,#52704E);color:#fff;border-color:rgba(255,255,255,.08)}
.quote-card h3,.quote-card p{color:#fff}
.footer-cta{position:relative;overflow:hidden;padding:5.6rem 0;background:linear-gradient(135deg,#466343,#66865C,#84A777);color:#fff}
.footer-cta:before{content:'';position:absolute;inset:auto auto -120px -60px;width:360px;height:360px;border-radius:999px;background:rgba(255,255,255,.08);filter:blur(12px)}
.footer-cta h2,.footer-cta p{color:#fff}
.footer-cta p{max-width:740px;margin:0 auto 1.5rem;opacity:.9}
.btn-light{display:inline-flex;background:rgba(255,255,255,.94);color:#425F3F;border-radius:999px;padding:.9rem 1.35rem;font-weight:700;box-shadow:0 14px 32px rgba(10,35,32,.14)}
.btn-light:hover{transform:translateY(-2px)}
.site-footer{background:#263B2B;color:#c9d8d3}
.site-footer h3{color:#fff;font-family:var(--font-main);font-weight:700;font-size:.95rem;letter-spacing:-.01em}
.site-footer p{color:#b9ccc6}
.site-footer a{display:block;color:#c9d8d3;margin:.45rem 0}
.site-footer a:hover{color:#fff}
.footer-brand .brand-name{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:1rem 0;font-size:.8rem}
.prose-block{max-width:900px;margin:auto}
.prose-block h2{margin-top:2.1rem}
.prose-block h3{font-family:var(--font-main);font-weight:700;margin-top:1.55rem;letter-spacing:-.02em}
.prose-block ul{padding-left:1.25rem;color:var(--color-muted)}
.prose-block li{margin:.5rem 0}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:2rem}
.form-card{padding:1.7rem}
label{font-weight:600;font-size:.9rem;color:#4B6149}
.field{width:100%;border:1px solid rgba(195,215,211,.95);border-radius:16px;padding:.9rem 1rem;margin-top:.4rem;background:rgba(251,253,252,.9);transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease}
.field:focus{outline:none;box-shadow:0 0 0 4px rgba(184,216,168,.16);border-color:rgba(184,216,168,.7);background:#fff}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.source-note{font-size:.82rem;color:#77847f}
.article-body{max-width:820px;margin:auto}.article-body p{font-size:1.03rem}.article-body h2{margin-top:2.5rem}.article-body .notice{margin:1.6rem 0}.article-hero-img{width:100%;height:480px;object-fit:cover;border-radius:32px;box-shadow:var(--shadow);margin-top:2rem;border:1px solid rgba(192,219,212,.45)}
.hero-section h1{font-size:clamp(3.65rem,5.6vw,5.5rem)!important;line-height:.93!important;letter-spacing:-.052em!important;font-weight:500!important;max-width:820px;text-wrap:balance}
@media(min-width:1440px){.hero-section h1{font-size:clamp(4.75rem,5.2vw,5.75rem)!important}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.hero-media,.brand-mark{animation:floaty 8s ease-in-out infinite}
@media(max-width:900px){.card-grid.three,.stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}.split,.contact-grid{grid-template-columns:1fr}.hero-media img{height:420px}.split img{height:360px}.hero-section{padding:5rem 0}.site-header nav{gap:1rem}.hero-section h1{font-size:clamp(3.25rem,7.5vw,4.55rem)!important;line-height:.94!important}h2{font-size:clamp(2.15rem,5.4vw,3.15rem)}}
@media(max-width:640px){.card-grid.three,.card-grid.two,.stat-row,.form-row{grid-template-columns:1fr}.section-shell{padding:3.8rem 0}.hero-media{padding:14px;border-radius:30px}.hero-media img{height:340px;border-radius:24px}.article-card img,.fixed-photo{height:220px}.hero-section{padding:3.7rem 0 4rem}.hero-section h1{font-size:clamp(2.75rem,11vw,3.65rem)!important;line-height:.96!important;letter-spacing:-.048em!important}.top-note{font-size:.7rem}.top-note .max-w-7xl{gap:.55rem}.article-hero-img{height:300px}.split img{height:300px}.brand-name{font-size:1.04rem}}

/* 2026-09-07: align major section headings with balanced hero scale */
.section-heading h2,
.section-shell > .max-w-7xl > .split h2,
.section-shell .split h2,
.footer-cta h2 {
  font-size:clamp(3.65rem,5.6vw,5.5rem)!important;
  line-height:.93!important;
  letter-spacing:-.052em!important;
  font-weight:500!important;
  text-wrap:balance;
}
.info-card h3,
.article-card h3,
.mini-card h3 {
  font-size:clamp(1.55rem,1.8vw,2rem);
  line-height:1.12;
  letter-spacing:-.035em;
}
@media(min-width:1440px){
  .section-heading h2,
  .section-shell .split h2,
  .footer-cta h2 {font-size:clamp(4.75rem,5.2vw,5.75rem)!important;}
}
@media(max-width:900px){
  .section-heading h2,
  .section-shell .split h2,
  .footer-cta h2 {font-size:clamp(3.25rem,7.5vw,4.55rem)!important;line-height:.94!important;}
  .info-card h3,.article-card h3,.mini-card h3{font-size:clamp(1.45rem,2.8vw,1.8rem);}
}
@media(max-width:640px){
  .section-heading h2,
  .section-shell .split h2,
  .footer-cta h2 {font-size:clamp(2.75rem,11vw,3.65rem)!important;line-height:.96!important;letter-spacing:-.048em!important;}
  .info-card h3,.article-card h3,.mini-card h3{font-size:1.45rem;}
}

/* Unique brand skin: Ritme Sehat Pria */
.brand-mark{border-radius:18px;}
.brand-mark img{width:30px;height:30px;display:block}
.top-note{background:linear-gradient(90deg,#344E35,#5A7852)}
.hero-section{background:linear-gradient(135deg,rgba(255,255,255,.94) 0%,#F5F8EE 50%,#F0F6EC 100%)}
.section-shell.green{background:linear-gradient(180deg,#F0F6EC,rgba(255,255,255,.55))}
.footer-cta{background:linear-gradient(135deg,#466343,#66865C,#84A777)}
.site-footer{background:#263B2B}
