:root{
  --teal:#176B68; --teal-dark:#104d4b; --soft-teal:#70BDB5;
  --sage:#B8D2C5; --sage-2:#DDF0E8; --ivory:#F6F3EA; --sand:#E9DFCF;
  --ink:#293B38; --muted:#667572; --line:#e5e8df; --white:#fff;
  --coral:#d98e72; --radius:26px; --shadow:0 22px 65px rgba(24,65,59,.10);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none} img{max-width:100%}
.container{width:min(1160px,calc(100% - 44px));margin:auto}
header{position:sticky;top:0;z-index:10;background:rgba(251,250,245,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(228,233,227,.8)}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:750;letter-spacing:-.04em;font-size:1.45rem;color:var(--teal-dark)}
.brand-mark{width:34px;height:34px;border:2px solid var(--teal);border-radius:50%;position:relative;display:inline-block}
.brand-mark:before,.brand-mark:after{content:"";position:absolute;border:1.5px solid var(--teal);border-radius:50%;inset:5px}
.brand-mark:after{inset:11px;background:var(--teal)}
.navlinks{display:flex;align-items:center;gap:25px;font-size:.91rem;color:#40524f}
.navlinks a:hover{color:var(--teal)}
.nav-cta,.button{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:12px 20px;background:var(--teal);color:white;font-weight:650;border:1px solid var(--teal);transition:.2s}
.nav-cta:hover,.button:hover{background:var(--teal-dark);transform:translateY(-1px)}
.button.secondary{background:transparent;color:var(--teal);border-color:#9dbbb1}
.menu-btn{display:none;background:none;border:0;font-size:1.5rem;color:var(--teal)}
.hero{padding:86px 0 74px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:65px}
.eyebrow{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);font-weight:750}
h1,h2,h3{line-height:1.12;letter-spacing:-.045em;margin:0 0 20px}
h1{font-size:clamp(3rem,6vw,5.35rem);max-width:720px}
h2{font-size:clamp(2.15rem,4vw,3.35rem)}
h3{font-size:1.35rem}
.lead{font-size:1.18rem;color:#536460;max-width:590px;line-height:1.75}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero-art{min-height:470px;position:relative;border-radius:48% 48% 30px 30px;background:linear-gradient(145deg,#e5eee5,#c9ded5);display:grid;place-items:center;overflow:hidden}
.orb{width:290px;height:290px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#f9f7e9 0 10%,#b7d2c5 45%,#78a99b 100%);box-shadow:inset -25px -30px 55px rgba(26,91,80,.13),0 35px 80px rgba(36,91,78,.16);position:relative}
.orb:before,.orb:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.7);border-radius:50%;inset:-34px}
.orb:after{inset:-67px}
.float-card{position:absolute;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);padding:15px 18px;border-radius:16px;box-shadow:var(--shadow);font-size:.88rem}
.float-card.one{top:70px;left:8%}.float-card.two{bottom:62px;right:5%}
.section{padding:82px 0}.section.soft{background:var(--sage-2)}
.section-head{max-width:680px;margin-bottom:42px}.section-head p{color:var(--muted);font-size:1.08rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:0 6px 24px rgba(24,65,59,.035)}
.icon{width:46px;height:46px;border-radius:15px;background:var(--sage-2);display:grid;place-items:center;color:var(--teal);font-size:1.3rem;margin-bottom:22px}
.card p{color:var(--muted);margin-bottom:0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.quote-panel{background:var(--teal-dark);color:white;border-radius:30px;padding:42px;min-height:300px;display:flex;flex-direction:column;justify-content:center}
.quote-panel p{font-size:1.65rem;line-height:1.4;letter-spacing:-.025em;margin:0 0 20px}
.quote-panel small{color:#c9ded5}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:step}
.step{padding:25px;border-top:1px solid #b8ccc1}
.step:before{counter-increment:step;content:"0" counter(step);color:var(--coral);font-weight:800;display:block;margin-bottom:20px}
.cta-band{background:var(--sage);border-radius:30px;padding:48px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.cta-band h2{font-size:2.4rem;max-width:650px;margin:0}
.page-hero{padding:78px 0 56px;background:linear-gradient(130deg,#f5f6ee,#e4eee6)}
.page-hero h1{font-size:clamp(2.7rem,5vw,4.5rem);max-width:850px}
.page-hero .lead{max-width:760px}
.content-narrow{max-width:820px}
.content-narrow p{color:#566762;font-size:1.05rem}
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:45px;padding:30px 0;border-bottom:1px solid var(--line)}
.feature-row:last-child{border:0}
.pill{display:inline-block;background:#e6efe8;color:var(--teal-dark);border-radius:99px;padding:6px 12px;font-size:.78rem;font-weight:700;margin-bottom:14px}
.faq{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary:after{content:"+";color:var(--teal);font-size:1.3rem}
.faq[open] summary:after{content:"−"}
.faq p{color:var(--muted);max-width:800px}
footer{background:#123f3d;color:#edf4ef;padding:55px 0 25px;margin-top:70px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
footer .brand{color:white}footer .brand-mark,footer .brand-mark:before{border-color:#d6e7dc}footer .brand-mark:after{background:#d6e7dc}
footer p,footer a{color:#c2d4cb}footer a:hover{color:white}
.footer-links{display:grid;gap:9px;font-size:.92rem}
.copyright{border-top:1px solid rgba(255,255,255,.16);margin-top:35px;padding-top:20px;color:#a9c1b6;font-size:.82rem}
.note{font-size:.85rem;color:var(--muted)}
@media(max-width:850px){.hero-grid,.split{grid-template-columns:1fr;gap:38px}.hero{padding-top:58px}.hero-art{min-height:360px}.grid-3,.steps{grid-template-columns:1fr 1fr}.navlinks{display:none;position:absolute;top:78px;left:0;right:0;background:var(--ivory);padding:20px 24px 25px;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}.navlinks.open{display:flex}.menu-btn{display:block}.nav-cta{display:none}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}}
@media(max-width:560px){.container{width:min(100% - 32px,1160px)}.grid-3,.steps,.feature-row,.footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}.section{padding:60px 0}.cta-band{padding:30px;display:block}.cta-band .button{margin-top:22px}.hero-art{min-height:310px}.orb{width:205px;height:205px}.float-card.one{top:35px}.float-card.two{bottom:30px}}


/* Refinement pass: editorial warmth + confident health-tech clarity */
body{font-family:"DM Sans",Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.012em}
.container{width:min(1200px,calc(100% - 56px))}
.nav{height:84px}
.brand{font-size:1.52rem;letter-spacing:-.055em}
.brand-mark{width:36px;height:36px}
.navlinks{gap:27px;font-size:.88rem;font-weight:550}
.nav-cta,.button{padding:13px 22px;box-shadow:0 7px 18px rgba(23,107,104,.12);font-size:.92rem}
.button.secondary{box-shadow:none;background:rgba(255,255,255,.35)}
.hero{padding:100px 0 92px}
.hero-grid{gap:74px}
.hero h1{font-weight:600;line-height:1.015;letter-spacing:-.065em}
.eyebrow{font-size:.72rem;letter-spacing:.19em}
.lead{font-size:1.16rem;line-height:1.82;letter-spacing:-.01em}
.hero-art{min-height:520px;border-radius:48% 48% 34px 34px;background:
 radial-gradient(circle at 52% 43%,rgba(255,255,255,.7),transparent 39%),
 linear-gradient(145deg,#edf1e8 0%,#d9e8dd 48%,#bdd6ca 100%)}
.orb{width:315px;height:315px;background:
 radial-gradient(circle at 34% 26%,#fffdf0 0 5%,#e4eadb 19%,#b7d2c4 51%,#6fa196 100%);
 box-shadow:inset -28px -35px 60px rgba(26,91,80,.12),0 35px 85px rgba(36,91,78,.17)}
.float-card{border:1px solid rgba(255,255,255,.8);box-shadow:0 16px 42px rgba(24,65,59,.10);font-weight:600;color:#35534d}
.float-card.one{top:78px;left:5%}.float-card.two{bottom:72px;right:4%}
.section{padding:100px 0}
.section-head{max-width:720px;margin-bottom:48px}
h2{font-weight:600;letter-spacing:-.06em;line-height:1.08}
h3{font-weight:650;letter-spacing:-.04em}
.card{padding:32px;border-radius:24px;box-shadow:0 10px 35px rgba(24,65,59,.045);transition:transform .22s ease,box-shadow .22s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(24,65,59,.09)}
.icon{width:48px;height:48px;border-radius:16px}
.quote-panel{border-radius:32px;background:
 radial-gradient(circle at 85% 10%,rgba(116,171,151,.25),transparent 34%),#124e4b;padding:50px}
.quote-panel p{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.045em;line-height:1.32}
.step{padding:30px 28px 28px 0}
.cta-band{padding:58px;border-radius:32px;background:linear-gradient(110deg,#e7eee5,#d9e8dd)}
.page-hero{padding:94px 0 74px;background:
 radial-gradient(circle at 84% 18%,rgba(189,214,202,.55),transparent 28%),
 linear-gradient(130deg,#f8f7ef,#e6efe7)}
.page-hero h1{font-weight:600;letter-spacing:-.065em;line-height:1.04}
.page-hero .lead{max-width:760px}
footer{padding:66px 0 28px}
footer .brand{font-size:1.45rem}
@media(max-width:850px){
 .container{width:min(100% - 40px,1200px)}
 .hero{padding:70px 0 62px}
 .hero-grid{gap:45px}
 .hero-art{min-height:410px}
 .section{padding:74px 0}
 .page-hero{padding:72px 0 58px}
}
@media(max-width:560px){
 .container{width:calc(100% - 34px)}
 .hero{padding-top:54px}
 .hero-art{min-height:320px}
 .orb{width:220px;height:220px}
 .section{padding:62px 0}
 .card{padding:25px}
 .quote-panel{padding:32px}
 .cta-band{padding:32px}
 .page-hero{padding:60px 0 48px}
}


/* Official Kua Health brand-guideline alignment */
body{background:var(--ivory);color:var(--ink);font-family:"DM Sans",Arial,sans-serif}
h1,h2,h3{font-family:"Manrope","DM Sans",Arial,sans-serif;color:var(--ink)}
.brand{display:inline-flex;align-items:center;line-height:0}
.brand-logo{display:block;width:226px;height:auto;max-height:64px;object-fit:contain}
.nav{min-height:84px}
.nav-cta,.button{background:var(--teal);border-color:var(--teal);color:#fff}
.button:hover,.nav-cta:hover{background:var(--teal-dark);border-color:var(--teal-dark)}
.button.secondary{color:var(--teal);border-color:var(--soft-teal);background:transparent}
.eyebrow{color:var(--teal)}
.hero-art{background:
 radial-gradient(circle at 52% 43%,rgba(255,255,255,.72),transparent 39%),
 linear-gradient(145deg,var(--ivory) 0%,var(--sage-2) 48%,var(--sage) 100%)}
.orb{background:radial-gradient(circle at 34% 26%,#fffdf0 0 5%,var(--sage-2) 19%,var(--sage) 51%,var(--soft-teal) 100%)}
.float-card{color:var(--ink)}
.section.soft{background:var(--sage-2)}
.icon{background:var(--sage-2);color:var(--teal)}
.page-hero{background:radial-gradient(circle at 84% 18%,rgba(184,210,197,.55),transparent 28%),linear-gradient(130deg,var(--ivory),var(--sage-2))}
.cta-band{background:linear-gradient(110deg,var(--sage-2),var(--sage))}
.quote-panel{background:radial-gradient(circle at 85% 10%,rgba(112,189,181,.25),transparent 34%),var(--ink)}
footer{background:var(--ink)}
footer .brand-logo{filter:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--soft-teal);outline-offset:4px;border-radius:8px}
@media(max-width:850px){.brand-logo{width:205px}}
@media(max-width:560px){.brand-logo{width:185px;max-height:54px}}


/* Real-product showcase */
.hero-product{height:500px;position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate}
.hero-product:before{content:"";position:absolute;width:390px;height:390px;border-radius:50%;background:var(--sage-2);z-index:-1}
.phone-shot{position:absolute;width:218px;padding:7px;border-radius:31px;background:#172d36;box-shadow:0 28px 65px rgba(28,56,54,.22);overflow:hidden}
.phone-shot img{display:block;width:100%;height:auto;border-radius:25px}
.phone-back{transform:rotate(8deg) translate(85px,12px);z-index:1;opacity:.96}
.phone-front{transform:rotate(-5deg) translate(-55px,-5px);z-index:2}
.product-caption{position:absolute;bottom:14px;right:0;background:white;border:1px solid var(--line);padding:12px 18px;border-radius:99px;font-size:.84rem;font-weight:650;color:var(--teal-dark);box-shadow:var(--shadow);z-index:3}
.app-showcase{background:var(--ivory)}
.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.app-feature{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:0 12px 38px rgba(24,65,59,.055)}
.app-screen{height:430px;overflow:hidden;background:#f0f4f2;display:flex;justify-content:center;align-items:flex-start;padding:16px 18px 0}
.app-screen img{width:min(100%,230px);height:auto;border-radius:23px;box-shadow:0 12px 32px rgba(27,48,55,.13)}
.app-feature-copy{padding:25px 26px 29px}
.app-feature-copy h3{margin-bottom:10px}
.app-feature-copy p{color:var(--muted);margin:0}
.app-secondary-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}
.app-secondary{display:flex;align-items:center;gap:20px;background:var(--sage-2);border-radius:22px;padding:16px;min-width:0}
.app-secondary img{width:96px;height:145px;object-fit:cover;object-position:top;border-radius:14px;box-shadow:0 8px 22px rgba(27,48,55,.12)}
.app-secondary div{display:grid;gap:7px}
.app-secondary strong{font-family:"Manrope",sans-serif;font-size:1.04rem;line-height:1.3}
.app-secondary span{font-size:.9rem;color:var(--muted)}
@media(max-width:850px){
 .hero-product{height:430px}
 .phone-shot{width:190px}
 .app-grid{grid-template-columns:1fr 1fr}
 .app-feature:last-child{grid-column:1/-1}
 .app-feature:last-child .app-screen{height:390px}
}
@media(max-width:560px){
 .hero-product{height:350px;margin-top:4px}
 .hero-product:before{width:270px;height:270px}
 .phone-shot{width:150px;padding:5px;border-radius:23px}
 .phone-shot img{border-radius:19px}
 .phone-back{transform:rotate(8deg) translate(57px,8px)}
 .phone-front{transform:rotate(-5deg) translate(-38px,-4px)}
 .product-caption{bottom:0;font-size:.76rem}
 .app-grid,.app-secondary-grid{grid-template-columns:1fr}
 .app-feature:last-child{grid-column:auto}
 .app-screen,.app-feature:last-child .app-screen{height:390px}
 .app-screen img{width:min(100%,210px)}
}

/* First-draft homepage CTA and footer refinements */
.hero-invite{max-width:560px;margin-top:18px;line-height:1.75;color:var(--muted)}
.hero .actions .button:first-child{min-width:168px}
.cta-band>div{max-width:690px}
.cta-band p{max-width:650px;margin:14px 0 0;line-height:1.75;color:#405650}
footer .brand-logo{width:226px;max-height:76px;object-fit:contain}
@media(max-width:560px){footer .brand-logo{width:190px;max-height:64px}.cta-band .button{width:100%;text-align:center}}

/* Legal footer links */
.footer-legal{display:flex;flex-wrap:wrap;gap:10px 24px;padding:22px 0 18px;margin-top:24px;border-top:1px solid rgba(237,244,239,.18);font-size:.88rem}.footer-legal a{color:#d6e7dc;text-decoration:none}.footer-legal a:hover{color:#fff;text-decoration:underline}.copyright{border-top:1px solid rgba(237,244,239,.12);padding-top:18px}