/* Mediwego — light SaaS layout: airy white sections, soft pink/teal shapes, rounded product frames, dark teal footer */
:root{
  --bg:#FFFFFF; --soft:#F6F8FB; --soft-2:#FFF4F8; --ink:#0F2233; --ink-2:#4D5E70; --ink-3:#8392A3; --line:#E4E9F0;
  --pink:#E2006A; --pink-2:#B70056; --pink-tint:#FFE7F1; --teal:#00627D; --teal-2:#004658; --teal-tint:#E2F2F6;
  --ok:#13A26B; --ok-tint:#E2F6EE; --warn:#D98A12; --warn-tint:#FDF1DD;
  --card:#FFFFFF; --deep:#00303F; --on-deep:#FFFFFF; --on-deep-2:#A7C6D0;
  --shadow:0 30px 70px -30px rgba(15,34,51,.28); --shadow-sm:0 8px 24px -12px rgba(15,34,51,.2);
  --head:"Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --sans:"DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme:light; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0A1720; --soft:#0F202B; --soft-2:#1A1420; --ink:#E9F1F5; --ink-2:#A9BAC6; --ink-3:#7D8E9B; --line:#1E3341;
    --pink:#FF3D8F; --pink-2:#FF6DA9; --pink-tint:#3A1027; --teal:#3DBAD6; --teal-2:#6FD0E6; --teal-tint:#0E3442;
    --ok:#3CCB8F; --ok-tint:#0F3326; --warn:#F2B04F; --warn-tint:#3A2C12;
    --card:#112532; --deep:#061219; --shadow:0 30px 70px -30px rgba(0,0,0,.8); --shadow-sm:0 8px 24px -12px rgba(0,0,0,.6); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A1720; --soft:#0F202B; --soft-2:#1A1420; --ink:#E9F1F5; --ink-2:#A9BAC6; --ink-3:#7D8E9B; --line:#1E3341;
  --pink:#FF3D8F; --pink-2:#FF6DA9; --pink-tint:#3A1027; --teal:#3DBAD6; --teal-2:#6FD0E6; --teal-tint:#0E3442;
  --ok:#3CCB8F; --ok-tint:#0F3326; --warn:#F2B04F; --warn-tint:#3A2C12;
  --card:#112532; --deep:#061219; --shadow:0 30px 70px -30px rgba(0,0,0,.8); --shadow-sm:0 8px 24px -12px rgba(0,0,0,.6); color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none!important}
html{scroll-behavior:smooth; scroll-padding-top:calc(100px + env(safe-area-inset-top,0px))}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:41; background:var(--bg)}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--pink); outline-offset:3px; border-radius:6px}
.wrap{max-width:1220px; margin:0 auto; padding-left:max(24px,env(safe-area-inset-left,0px)); padding-right:max(24px,env(safe-area-inset-right,0px))}
h1,h2,h3,h4{margin:0; line-height:1.15; font-family:var(--head); font-weight:800; letter-spacing:-.025em; text-wrap:balance}
h2{font-size:clamp(30px,4vw,48px)}
h3{font-size:21px; font-weight:700; letter-spacing:-.015em}
p{margin:0}
.lead{color:var(--ink-2); font-size:18px; max-width:60ch}
.hl{color:var(--pink)}
.kicker{display:inline-flex; align-items:center; gap:10px; font:700 14px var(--head); color:var(--pink); letter-spacing:.04em}
.kicker::before{content:""; width:28px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--pink),var(--teal))}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font:700 16px/1 var(--head); padding:17px 30px; border-radius:999px; text-decoration:none; border:2px solid transparent; cursor:pointer; white-space:nowrap; transition:transform .15s, box-shadow .15s, background .15s, border-color .15s, color .15s}
.btn-primary{background:var(--pink); color:#fff; box-shadow:0 12px 28px -12px rgba(226,0,106,.75)}
.btn-primary:hover{background:var(--pink-2); transform:translateY(-2px)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:var(--card)}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal)}
.btn-teal{background:var(--teal); color:#fff}
.btn-teal:hover{background:var(--teal-2); transform:translateY(-2px)}
.btn-white{background:#fff; color:var(--pink-2)}
.btn-white:hover{transform:translateY(-2px)}
.btn-outline-white{border-color:rgba(255,255,255,.5); color:#fff}
.btn-outline-white:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.link-more{display:inline-flex; align-items:center; gap:8px; font:700 16px var(--head); color:var(--pink); text-decoration:none}
.link-more::after{content:""; width:22px; height:2px; background:currentColor; transition:width .2s}
.link-more:hover::after{width:34px}

/* topbar + header */
.topbar{background:var(--teal-2); color:#fff; font-size:14px}
.topbar .wrap{display:flex; justify-content:space-between; gap:16px; padding-top:9px; padding-bottom:9px; flex-wrap:wrap}
.topbar a{text-decoration:none}.topbar a:hover{text-decoration:underline}
.topbar b{color:#FFB3D3}
header.site{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; height:84px; gap:20px}
.logo{display:flex; align-items:center; text-decoration:none}
.logo img{height:52px; width:auto; display:block}
nav.main ul{list-style:none; display:flex; gap:4px; margin:0; padding:0}
nav.main a{text-decoration:none; font:600 16px var(--head); color:var(--ink); padding:10px 15px; border-radius:999px}
nav.main a:hover{color:var(--pink)}
nav.main a[aria-current="page"]{color:var(--pink); background:var(--pink-tint)}
.header-cta{display:flex; gap:10px; align-items:center}
.header-cta .btn{padding:13px 22px; font-size:15px}
.menu-btn{display:none; background:var(--card); border:1.5px solid var(--line); border-radius:12px; width:46px; height:46px; color:var(--ink); cursor:pointer}

/* hero */
.hero{position:relative; overflow:hidden; padding:80px 0 100px; background:linear-gradient(180deg,var(--soft-2),var(--bg) 70%)}
.hero::before{content:""; position:absolute; width:620px; height:620px; right:-160px; top:-180px; border-radius:50%; background:radial-gradient(circle,rgba(0,98,125,.16),transparent 65%)}
.hero::after{content:""; position:absolute; width:420px; height:420px; left:-180px; bottom:-160px; border-radius:50%; background:radial-gradient(circle,rgba(226,0,106,.12),transparent 65%)}
.hero .wrap{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.08fr; gap:60px; align-items:center}
.hero h1{font-size:clamp(40px,5.4vw,68px); line-height:1.06; letter-spacing:-.035em; margin:20px 0 22px}
.hero .lead{margin-bottom:34px}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap}
.hero-trust{display:flex; gap:22px; flex-wrap:wrap; margin:30px 0 0; padding:0; list-style:none; color:var(--ink-2); font-size:15px; font-weight:500}
.hero-trust li{display:flex; align-items:center; gap:8px}
.hero-trust li::before{content:""; width:20px; height:20px; border-radius:50%; background:var(--ok-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%2313A26B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
.hero-vis{position:relative}
.hero-vis .app{box-shadow:var(--shadow)}
.ring{position:absolute; border-radius:50%; border:2px dashed color-mix(in srgb,var(--teal) 35%,transparent); pointer-events:none}
.ring.r1{width:140px; height:140px; right:-40px; top:-46px}
.dotgrid{position:absolute; width:120px; height:100px; left:-40px; bottom:-34px; background-image:radial-gradient(var(--pink) 2px,transparent 2px); background-size:16px 16px; opacity:.35; pointer-events:none}
.float{position:absolute; z-index:3; background:var(--card); color:var(--ink); border-radius:16px; box-shadow:var(--shadow); padding:13px 16px; display:flex; gap:12px; align-items:center; font-size:14px; border:1px solid var(--line)}
.float small{display:block; color:var(--ink-3); font-size:12px}
.float .fi{width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex:none}
.float.f1{left:-46px; top:30%} .float.f2{right:-28px; bottom:-26px}
.float.f1 .fi{background:var(--pink-tint); color:var(--pink)} .float.f2 .fi{background:var(--teal-tint); color:var(--teal)}
@media (prefers-reduced-motion:no-preference){
  .float{animation:bob 6s ease-in-out infinite}.float.f2{animation-delay:-3s}
  .hero-copy > *{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy > *:nth-child(2){animation-delay:.08s}.hero-copy > *:nth-child(3){animation-delay:.16s}.hero-copy > *:nth-child(4){animation-delay:.24s}.hero-copy > *:nth-child(5){animation-delay:.3s}
  .hero-vis{animation:rise 1s .3s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes rise{from{opacity:0; transform:translateY(26px)}to{opacity:1; transform:none}}

/* trusted strip */
.trusted{padding:46px 0; border-bottom:1px solid var(--line)}
.trusted p{text-align:center; color:var(--ink-2); font:600 16px var(--head); margin-bottom:24px}
.trusted p b{color:var(--pink)}
.trust-row{display:grid; grid-template-columns:repeat(5,1fr); gap:16px}
.trust-row div{display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 10px; border-radius:18px; text-align:center; font:700 15px var(--head); color:var(--ink-2)}
.trust-row div:hover{background:var(--soft)}
.trust-row span{width:56px; height:56px; border-radius:16px; display:grid; place-items:center; background:var(--teal-tint); color:var(--teal)}
.trust-row div:nth-child(even) span{background:var(--pink-tint); color:var(--pink)}

section{padding:110px 0}
.sec-head{max-width:740px; margin-bottom:56px; display:grid; gap:16px; justify-items:start}
.sec-head.center{text-align:center; margin-left:auto; margin-right:auto; justify-items:center}
.center .lead{margin-left:auto; margin-right:auto}
.alt{background:var(--soft)}

/* about */
.about{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center}
.collage{position:relative; min-height:480px}
.collage .c1{position:absolute; left:0; top:0; width:78%}
.collage .c2{position:absolute; right:0; bottom:0; width:58%; z-index:2}
.collage .app{box-shadow:var(--shadow)}
.collage .blob{position:absolute; width:240px; height:240px; right:6%; top:8%; border-radius:42% 58% 63% 37% / 41% 44% 56% 59%; background:linear-gradient(135deg,var(--pink),var(--teal)); opacity:.12}
.badge-exp{position:absolute; left:6%; bottom:6%; z-index:3; background:var(--pink); color:#fff; border-radius:20px; padding:18px 22px; box-shadow:0 18px 40px -16px rgba(226,0,106,.7); max-width:190px}
.badge-exp b{display:block; font:800 30px/1 var(--head)}
.badge-exp span{font-size:14px; opacity:.9}
.about h2{margin:16px 0 18px}
.counters{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:34px 0 36px}
.counters div{border-radius:18px; background:var(--soft); padding:20px; border:1px solid var(--line)}
.counters b{display:block; font:800 32px/1 var(--head); color:var(--teal); letter-spacing:-.02em}
.counters div:nth-child(2) b{color:var(--pink)}
.counters span{display:block; margin-top:8px; color:var(--ink-2); font-size:14px; line-height:1.4}

/* what we offer */
.offer{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.oc{position:relative; background:var(--card); border:1px solid var(--line); border-radius:24px; padding:34px 28px; display:flex; flex-direction:column; gap:14px; overflow:hidden; transition:transform .25s, box-shadow .25s, border-color .25s}
.oc::after{content:""; position:absolute; right:-50px; top:-50px; width:120px; height:120px; border-radius:50%; background:var(--pink-tint); transition:transform .4s}
.oc:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent}
.oc:hover::after{transform:scale(1.6)}
.oc > *{position:relative; z-index:1}
.oc p{color:var(--ink-2); font-size:16px}
.ico{width:60px; height:60px; border-radius:18px; background:linear-gradient(135deg,var(--pink),#FF5AA0); color:#fff; display:grid; place-items:center; flex:none; box-shadow:0 12px 24px -12px rgba(226,0,106,.8)}
.oc:nth-child(even) .ico{background:linear-gradient(135deg,var(--teal),#1E9AB8); box-shadow:0 12px 24px -12px rgba(0,98,125,.8)}

/* how it works */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:34px; position:relative; counter-reset:s}
.steps::before{content:""; position:absolute; top:44px; left:16%; right:16%; border-top:2px dashed color-mix(in srgb,var(--teal) 40%,transparent)}
.step{position:relative; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; padding:0 10px}
.step .num{width:88px; height:88px; border-radius:50%; display:grid; place-items:center; background:var(--card); border:2px solid var(--line); box-shadow:var(--shadow-sm); position:relative; color:var(--pink)}
.step .num::after{counter-increment:s; content:"0" counter(s); position:absolute; top:-6px; right:-10px; background:var(--teal); color:#fff; font:800 13px var(--head); padding:5px 9px; border-radius:999px}
.step:nth-child(2) .num{color:var(--teal)}
.step h3{margin-top:12px}
.step p{color:var(--ink-2); max-width:32ch}

/* key features */
.kf{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center}
.kf + .kf{margin-top:110px}
.kf.rev .kf-vis{order:2}
.kf h2{margin:16px 0 18px}
.kf .checks{margin:24px 0 30px}
.kf-vis{position:relative; padding:28px; border-radius:30px; background:linear-gradient(150deg,var(--teal-tint),var(--soft-2))}
.kf-vis .app{box-shadow:var(--shadow)}
.checks{margin:14px 0 0; padding:0; list-style:none; display:grid; gap:12px; font-size:16.5px}
.checks li{padding-left:34px; position:relative}
.checks li::before{content:""; position:absolute; left:0; top:2px; width:23px; height:23px; border-radius:50%; background:var(--pink-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23E2006A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}

/* app mockups */
.app{background:var(--card); color:var(--ink); border-radius:20px; overflow:hidden; text-align:left; font-size:13px; border:1px solid var(--line)}
.app-top{display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--soft)}
.dots{display:flex; gap:6px}.dots i{width:10px; height:10px; border-radius:50%; background:#FF6159}.dots i:nth-child(2){background:#FFBD2E}.dots i:nth-child(3){background:#28C941}
.search{flex:1; max-width:360px; margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:6px 14px; color:var(--ink-3); display:flex; gap:8px; align-items:center; font-size:12.5px; white-space:nowrap; overflow:hidden}
.av{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:11px; color:#fff; background:linear-gradient(135deg,var(--pink),var(--teal)); flex:none}
.main{padding:18px; display:grid; gap:14px; min-width:0}
.main-head{display:flex; justify-content:space-between; align-items:center; gap:12px}
.main-head h4{font:700 16px var(--head)}
.main-head span{color:var(--ink-3); font-size:12px}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.kpi{border:1px solid var(--line); border-radius:14px; padding:13px; min-width:0}
.kpi small{color:var(--ink-3); display:block; font-size:11.5px}
.kpi b{display:block; font:800 22px var(--head); letter-spacing:-.02em; margin-top:2px; white-space:nowrap; font-variant-numeric:tabular-nums}
.kpi em{font-style:normal; font-size:11.5px; font-weight:600; color:var(--ok)}
.kpi.pk{background:var(--pink); border-color:var(--pink); color:#fff}.kpi.pk small,.kpi.pk em{color:#FFD3E6}
.panel{border:1px solid var(--line); border-radius:14px; padding:13px; min-width:0}
.panel h5{margin:0 0 10px; font-size:13px; display:flex; justify-content:space-between; color:var(--ink)}
.panel h5 span{color:var(--ink-3); font-weight:500}
.chart{width:100%; height:120px; display:block}
.hbar{display:grid; grid-template-columns:90px 1fr 26px; gap:8px; align-items:center; margin:8px 0; font-size:12px; color:var(--ink-2)}
.hbar i{height:8px; border-radius:6px; background:linear-gradient(90deg,var(--teal),#1E9AB8)}
.hbar:nth-child(odd) i{background:linear-gradient(90deg,var(--pink),#FF5AA0)}
.hbar b{text-align:right; color:var(--ink)}
.tbl{width:100%; border-collapse:collapse; font-size:12.5px}
.tbl th{text-align:left; color:var(--ink-3); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--line)}
.tbl td{padding:8px; border-bottom:1px solid var(--line); white-space:nowrap}
.tbl tr:last-child td{border-bottom:none}
.tag{font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:999px; white-space:nowrap; display:inline-block}
.tag.in{background:var(--teal-tint); color:var(--teal)} .tag.wait{background:var(--warn-tint); color:var(--warn)} .tag.paid{background:var(--ok-tint); color:var(--ok)}
.rx{display:grid; gap:8px}
.rx-row{display:grid; grid-template-columns:1fr auto auto; gap:10px; padding:9px 11px; border-radius:10px; background:var(--soft); font-size:12.5px}
.rx-row b{font-weight:600}
.rx-row span{color:var(--ink-3)}
.receipt{border:1px dashed var(--line); border-radius:12px; padding:13px}
.rrow{display:flex; justify-content:space-between; gap:10px; padding:5px 0; font-size:12.5px}
.rrow.tot{border-top:1px solid var(--line); margin-top:6px; padding-top:9px; font-weight:700; font-size:14px}
.vbars{display:flex; align-items:flex-end; gap:8px; height:110px}
.vbars div{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:3px; height:100%; font-size:10.5px; color:var(--ink-3)}
.vbars i{width:100%; border-radius:6px 6px 2px 2px; background:var(--teal-tint)}
.vbars i.n{background:linear-gradient(180deg,#FF5AA0,var(--pink))}
.legend{display:flex; gap:14px; font-size:11.5px; color:var(--ink-3); margin-top:8px}
.legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px}

/* pricing */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:stretch}
.plan{border:1px solid var(--line); border-radius:28px; padding:38px; display:flex; flex-direction:column; gap:18px; background:var(--card); position:relative; transition:transform .25s, box-shadow .25s}
.plan:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.plan.pop{background:linear-gradient(160deg,var(--teal-2),var(--teal)); color:#fff; border:none; box-shadow:var(--shadow)}
.plan.pop .for,.plan.pop .checks li{color:#D5EEF4}
.plan.pop .checks li::before{background-color:rgba(255,255,255,.16); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.plan.pop .btn-primary{background:#fff; color:var(--pink-2); box-shadow:none}
.badge{position:absolute; top:-15px; left:38px; background:var(--pink); color:#fff; font:700 13px var(--head); padding:6px 15px; border-radius:999px}
.plan h3{font-size:24px}
.plan .for{color:var(--ink-2); font-size:15px}
.price{font:800 40px var(--head); letter-spacing:-.03em}
.price small{font:500 15px var(--sans)}
.plan .checks{margin:0; flex:1}

/* testimonials */
.tests{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.test{margin:0; background:var(--card); border:1px solid var(--line); border-radius:26px; padding:34px; display:flex; flex-direction:column; gap:24px; position:relative}
.test::before{content:""; width:46px; height:36px; background:var(--pink-tint); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 36'%3E%3Cpath d='M0 36V22C0 10 6 2 18 0l2 5c-6 2-9 6-9 12h8v19zm26 0V22c0-12 6-20 18-22l2 5c-6 2-9 6-9 12h8v19z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 36'%3E%3Cpath d='M0 36V22C0 10 6 2 18 0l2 5c-6 2-9 6-9 12h8v19zm26 0V22c0-12 6-20 18-22l2 5c-6 2-9 6-9 12h8v19z'/%3E%3C/svg%3E") center/contain no-repeat; background:var(--pink)}
.test p{font-size:17px; color:var(--ink-2); flex:1}
.who{display:flex; gap:14px; align-items:center; padding-top:20px; border-top:1px solid var(--line)}
.who .av{width:50px; height:50px; font-size:15px}
.who b{font-family:var(--head)}
.who small{display:block; color:var(--ink-3); font-size:14px}

/* faq */
.faq-wrap{display:grid; grid-template-columns:1fr 1.3fr; gap:70px; align-items:start}
.faq{display:grid; gap:14px}
details{border:1px solid var(--line); border-radius:18px; padding:20px 24px; background:var(--card)}
details[open]{border-color:color-mix(in srgb,var(--pink) 40%,var(--line)); box-shadow:var(--shadow-sm)}
summary{cursor:pointer; font:700 17px var(--head); list-style:none; display:flex; justify-content:space-between; gap:20px; align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; flex:none; width:32px; height:32px; border-radius:50%; background:var(--pink-tint); color:var(--pink); display:grid; place-items:center; font-size:20px; transition:transform .2s, background .2s}
details[open] summary::after{transform:rotate(45deg); background:var(--pink); color:#fff}
details p{color:var(--ink-2); margin-top:12px; max-width:68ch}

/* blog */
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.posts.two{grid-template-columns:repeat(2,1fr)}
.post-card{border:1px solid var(--line); border-radius:24px; text-decoration:none; display:flex; flex-direction:column; background:var(--card); overflow:hidden; transition:transform .25s, box-shadow .25s}
.post-card:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.post-card .thumb{height:170px; position:relative; overflow:hidden; background:linear-gradient(135deg,var(--teal-2),var(--teal))}
.post-card:nth-child(even) .thumb{background:linear-gradient(135deg,var(--pink-2),var(--pink))}
.post-card .thumb::before{content:""; position:absolute; width:200px; height:200px; right:-60px; top:-70px; border-radius:50%; border:28px solid rgba(255,255,255,.12)}
.post-card .thumb span{position:absolute; left:22px; bottom:18px; background:#fff; color:var(--ink); font:700 13px var(--head); padding:6px 12px; border-radius:999px}
.post-card .body{padding:24px 26px 28px; display:flex; flex-direction:column; gap:10px; flex:1}
.post-card h3{font-size:20px; line-height:1.3}
.post-card p{color:var(--ink-2); font-size:15.5px}
.post-card .more{margin-top:auto; padding-top:8px; color:var(--pink); font:700 15px var(--head)}
.meta{font-size:14px; color:var(--ink-3)}

/* CTA */
.cta-band{position:relative; overflow:hidden; background:linear-gradient(120deg,var(--pink-2),var(--pink) 55%,#FF4E98); color:#fff; border-radius:34px; padding:70px; display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap}
.cta-band::before{content:""; position:absolute; width:320px; height:320px; right:-90px; top:-120px; border-radius:50%; border:50px solid rgba(255,255,255,.1)}
.cta-band::after{content:""; position:absolute; width:180px; height:180px; left:40%; bottom:-110px; border-radius:50%; background:rgba(255,255,255,.08)}
.cta-band > *{position:relative; z-index:1}
.cta-band h2{color:#fff; font-size:clamp(28px,3.4vw,42px); max-width:20ch}
.cta-band p{color:#FFE1EE; margin-top:12px; max-width:50ch}
.cta-band .acts{display:flex; gap:12px; flex-wrap:wrap}

/* demo section + forms */
.demo-sec{background:linear-gradient(150deg,var(--teal-2),var(--teal)); color:#fff; position:relative; overflow:hidden}
.demo-sec::before{content:""; position:absolute; width:500px; height:500px; left:-200px; top:-200px; border-radius:50%; border:70px solid rgba(255,255,255,.05)}
.demo{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; position:relative}
.demo h2{color:#fff}
.demo .lead{color:#CFE7EE; margin-top:16px}
.demo .kicker{color:#FFB3D3}
.demo-points{margin:28px 0 0; padding:0; list-style:none; display:grid; gap:14px; font-weight:500}
.demo-points li{display:flex; gap:12px; align-items:center}
.demo-points li::before{content:"✓"; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--pink); color:#fff; font-weight:700; flex:none}
form.card{background:var(--card); color:var(--ink); border-radius:26px; padding:36px; box-shadow:var(--shadow); display:grid; gap:16px; border:1px solid var(--line)}
form.card h3{font-size:24px}
.field{display:grid; gap:7px; min-width:0}
.field label{font:600 14px var(--head)}
.field input,.field select,.field textarea{font:inherit; font-size:16px; padding:14px 16px; border-radius:14px; border:1.5px solid var(--line); background:var(--soft); color:var(--ink); width:100%}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--pink); background:var(--card); box-shadow:0 0 0 4px var(--pink-tint)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form-note{font-size:13px; color:var(--ink-3)}
.form-note a{color:var(--teal)}
.form-msg{font-size:14px; font-weight:600; min-height:1em}
.form-msg a{color:var(--teal); text-decoration:underline}
.form-msg.ok{color:var(--ok)} .form-msg.err{color:#C93838}
button[disabled]{opacity:.65; cursor:wait}
.hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}

/* inner page banner */
.page-hero{position:relative; overflow:hidden; padding:90px 0 96px; text-align:center; background:linear-gradient(135deg,var(--teal-tint),var(--soft-2))}
.page-hero::before{content:""; position:absolute; width:300px; height:300px; left:-100px; top:-120px; border-radius:50%; border:40px solid color-mix(in srgb,var(--pink) 10%,transparent)}
.page-hero::after{content:""; position:absolute; width:220px; height:180px; right:4%; bottom:-30px; background-image:radial-gradient(var(--teal) 2px,transparent 2px); background-size:18px 18px; opacity:.25}
.page-hero .wrap{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center}
.page-hero h1{font-size:clamp(36px,5vw,60px); margin:16px 0; max-width:20ch}
.page-hero .lead{margin:0 auto}
.page-hero .meta{margin-top:14px}
.crumbs{display:inline-flex; gap:8px; font:600 14px var(--head); color:var(--ink-2); background:var(--card); padding:8px 18px; border-radius:999px; border:1px solid var(--line)}
.crumbs a{text-decoration:none; color:var(--pink)}

/* features page */
.feat{display:grid; grid-template-columns:1fr 1.1fr; gap:72px; align-items:center; padding:70px 0; border-bottom:1px solid var(--line)}
.feat:last-child{border-bottom:none}
.feat:nth-child(even) .feat-vis{order:-1}
.feat h2{font-size:clamp(28px,3.2vw,40px); margin:22px 0 14px}
.feat-vis{background:linear-gradient(150deg,var(--teal-tint),var(--soft-2)); border-radius:28px; padding:32px}
.mini{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; font-size:14px; box-shadow:var(--shadow-sm)}
.mini + .mini{margin-top:14px}
.mini h4{margin:0 0 12px; font:700 13px var(--head); color:var(--ink-3); letter-spacing:0}
.kv{display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid var(--line)}
.kv:first-of-type{border-top:none}
.bars{display:flex; align-items:flex-end; gap:8px; height:54px}
.bars span{flex:1; background:var(--teal-tint); border-radius:6px 6px 2px 2px}
.bars span.hi{background:linear-gradient(180deg,#FF5AA0,var(--pink))}

/* compare table */
.scroll-x{overflow-x:auto; border:1px solid var(--line); border-radius:24px; background:var(--card)}
.compare{width:100%; border-collapse:collapse; font-size:16px; min-width:620px}
.compare th,.compare td{padding:17px 22px; text-align:left; border-bottom:1px solid var(--line)}
.compare tr:last-child td{border-bottom:none}
.compare thead th{font:700 16px var(--head); background:var(--soft)}
.compare td:not(:first-child),.compare th:not(:first-child){text-align:center}
.yes{color:var(--ok); font-weight:800} .no{color:var(--ink-3)}

/* about page */
.split{display:grid; grid-template-columns:1fr 1.2fr; gap:72px; align-items:start}
.prose p{color:var(--ink-2); margin-top:18px; max-width:62ch; font-size:18px}
.prose p:first-child{margin-top:0}
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.value{background:var(--card); border:1px solid var(--line); border-radius:24px; padding:32px}
.value::before{content:""; display:block; width:48px; height:6px; border-radius:6px; background:linear-gradient(90deg,var(--pink),var(--teal)); margin-bottom:20px}
.value p{color:var(--ink-2); margin-top:10px}
.facts{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.fact{background:var(--soft); border:1px solid var(--line); border-radius:22px; padding:26px}
.fact b{display:block; font:800 32px var(--head); color:var(--teal); letter-spacing:-.02em}
.fact:nth-child(even) b{color:var(--pink)}
.fact span{color:var(--ink-2); font-size:15px}

/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 1.2fr; gap:56px; align-items:start}
.cinfo{display:grid; gap:14px}
.citem{display:grid; grid-template-columns:60px 1fr; gap:16px; align-items:center; border:1px solid var(--line); border-radius:20px; padding:18px; text-decoration:none; background:var(--card); transition:border-color .2s, transform .2s}
a.citem:hover{border-color:var(--pink); transform:translateX(4px)}
.citem small{display:block; color:var(--ink-3); font-size:14px}
.citem b{font:700 17px var(--head)}

/* article */
.article{max-width:760px; margin:0 auto}
.article h2{font-size:clamp(25px,2.8vw,32px); margin:48px 0 12px}
.article p,.article li{font-size:18.5px; line-height:1.8; color:var(--ink-2)}
.article p{margin-top:18px}
.article ul,.article ol{padding-left:24px; margin:16px 0 0; display:grid; gap:8px}
.article .note{background:var(--pink-tint); border-radius:20px; padding:24px 28px; margin-top:36px}
.article .note p{margin:0; font-size:17px; color:var(--ink)}
.article .note a{color:var(--pink); font-weight:700}
.legal h2{font-size:24px; margin:40px 0 10px}
.legal p,.legal li{font-size:16.5px; line-height:1.7}
.legal p{margin-top:12px}
.legal ul{padding-left:22px; margin:12px 0 0; display:grid; gap:6px}
.legal a{color:var(--pink)}

/* 404 */
.notfound{text-align:center; padding:130px 0}
.notfound h1{font-size:clamp(40px,6vw,64px); margin:16px 0}
.notfound .lead{margin:0 auto 32px}
.notfound .big{font:800 130px/1 var(--head); color:var(--pink)}
.notfound .hero-actions{justify-content:center}

/* footer */
footer{background:var(--deep); color:#fff; padding:90px 0 32px; position:relative; overflow:hidden}
footer::before{content:""; position:absolute; width:420px; height:420px; right:-160px; top:-200px; border-radius:50%; border:60px solid rgba(255,255,255,.03)}
footer .wrap{position:relative}
.foot{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:44px}
footer h4{margin:0 0 20px; font:700 18px var(--head); color:#fff; letter-spacing:-.01em}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:12px}
footer a{text-decoration:none; color:var(--on-deep-2)}
footer a:hover{color:#fff}
footer .logo img{height:58px; margin-bottom:20px}
.foot p{color:var(--on-deep-2); font-size:15px; max-width:34ch}
.copy{margin-top:64px; padding-top:26px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:14px; color:var(--on-deep-2)}
.copy a{color:var(--on-deep-2)}

.wa{position:fixed; right:calc(20px + env(safe-area-inset-right,0px)); bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:30; width:58px; height:58px; border-radius:50%; background:#25D366; display:grid; place-items:center; box-shadow:0 12px 30px -8px rgba(0,0,0,.45); transition:transform .2s}
.wa:hover{transform:scale(1.06)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{animation:none!important; transition:none!important}}

/* responsive */
@media (max-width:1120px){
  nav.main{display:none; position:absolute; top:84px; left:0; right:0; background:var(--bg); border-bottom:1px solid var(--line); padding:12px 24px 20px; box-shadow:var(--shadow-sm)}
  nav.main.open{display:block}
  nav.main ul{flex-direction:column; gap:2px}
  nav.main a{display:block; padding:12px 16px; font-size:17px}
  .menu-btn{display:grid; place-items:center}
  .header-cta .btn-ghost{display:none}
  .offer{grid-template-columns:repeat(2,1fr)}
  .float.f1{left:-10px}
}
@media (max-width:980px){
  .hero .wrap,.about,.kf,.demo,.split,.contact-grid,.feat,.faq-wrap{grid-template-columns:1fr}
  .kf.rev .kf-vis{order:0}
  .feat:nth-child(even) .feat-vis{order:0}
  .about{gap:50px}
  .collage{min-height:420px}
  .tests,.plans,.values,.posts{grid-template-columns:1fr}
  .posts.two{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr; gap:44px}
  .steps::before{display:none}
  .trust-row{grid-template-columns:repeat(3,1fr)}
  .foot{grid-template-columns:1fr 1fr}
  .cta-band{padding:46px 30px}
  .float{display:none}
}
@media (max-width:640px){
  section{padding:76px 0}
  .hero{padding:56px 0 70px}
  .offer{grid-template-columns:1fr}
  .trust-row{grid-template-columns:repeat(2,1fr)}
  .counters{grid-template-columns:1fr 1fr 1fr; gap:8px}
  .counters div{padding:14px 10px}
  .counters b{font-size:24px}
  .collage{min-height:330px}
  .collage .c1{width:92%}.collage .c2{width:72%}
  .badge-exp{display:none}
  .search{display:none}
  .kpis{grid-template-columns:1fr 1fr}
  .kpis .kpi:nth-child(3){display:none}
  .two,.facts{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .topbar .hide-sm{display:none}
  .logo img{height:42px}
  header.site .wrap{height:74px}
  nav.main{top:74px}
  .header-cta .btn-primary{padding:11px 16px; font-size:14px}
  .kf-vis,.feat-vis{padding:16px}
  .wrap{padding-left:max(18px,env(safe-area-inset-left,0px)); padding-right:max(18px,env(safe-area-inset-right,0px))}
}
.kf.rev .kf-vis{order:-1}
.float.f1{top:auto; bottom:30%; left:-64px}
.plan .checks{align-content:start}
@media (max-width:980px){.kf.rev .kf-vis{order:0}}
@media (max-width:640px){
  .collage{min-height:0}
  .collage .c1{position:static; width:100%}
  .collage .c2,.collage .blob,.ring,.dotgrid{display:none}
  .trust-row{display:flex; flex-wrap:wrap; justify-content:center}
  .trust-row div{width:46%}
}

/* ---- modules dropdown ---- */
nav.main .has-sub{position:relative}
nav.main .has-sub > a{display:inline-flex; align-items:center; gap:6px}
nav.main .sub{position:absolute; top:100%; left:0; min-width:250px; display:none; flex-direction:column; gap:2px; padding:10px; margin:0; list-style:none; background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow)}
nav.main .has-sub:hover .sub, nav.main .has-sub:focus-within .sub{display:flex}
nav.main .sub a{display:block; padding:10px 14px; border-radius:12px; font-size:15px}
nav.main .sub a:hover{background:var(--soft)}
@media (max-width:1120px){
  nav.main .sub{position:static; display:flex; box-shadow:none; border:none; padding:0 0 6px 16px; min-width:0; background:transparent}
  nav.main .has-sub > a svg{display:none}
  nav.main{max-height:calc(100vh - 90px); overflow-y:auto}
}

/* ---- module cards ---- */
.mods{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.mc{position:relative; background:var(--card); border:1px solid var(--line); border-radius:24px; padding:30px 26px; display:flex; flex-direction:column; gap:12px; text-decoration:none; overflow:hidden; transition:transform .25s, box-shadow .25s, border-color .25s}
.mc::after{content:""; position:absolute; right:-50px; top:-50px; width:120px; height:120px; border-radius:50%; background:var(--pink-tint); transition:transform .4s}
.mc:nth-child(even)::after{background:var(--teal-tint)}
.mc > *{position:relative; z-index:1}
.mc:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent}
.mc:hover::after{transform:scale(1.6)}
.mc:nth-child(even) .ico{background:linear-gradient(135deg,var(--teal),#1E9AB8); box-shadow:0 12px 24px -12px rgba(0,98,125,.8)}
.mc p{color:var(--ink-2); font-size:15.5px; flex:1}
.mc.static{background:var(--soft)}

/* ---- real screenshots ---- */
.shot{margin:0; background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); align-self:start}
.shot-bar{display:flex; gap:6px; padding:11px 14px; background:var(--soft); border-bottom:1px solid var(--line)}
.shot-bar i{width:10px; height:10px; border-radius:50%; background:#FF6159}.shot-bar i:nth-child(2){background:#FFBD2E}.shot-bar i:nth-child(3){background:#28C941}
.shot img{display:block; width:100%; height:auto}
.shot figcaption{padding:12px 16px; font:600 14px var(--head); color:var(--ink-2); border-top:1px solid var(--line)}
.gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; align-items:start}
.gallery .shot:has(img[width="324"]){max-width:340px; justify-self:center}
.tabs{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:34px}
.tab{font:700 15px var(--head); border:1.5px solid var(--line); background:var(--card); color:var(--ink-2); padding:12px 22px; border-radius:999px; cursor:pointer}
.tab:hover{border-color:var(--pink); color:var(--pink)}
.tab[aria-selected="true"]{background:var(--pink); border-color:var(--pink); color:#fff}
.tabpanel{max-width:1100px; margin:0 auto}
@media (prefers-reduced-motion:no-preference){.tabpanel:not([hidden]){animation:rise .45s ease both}}

/* ---- module page ---- */
.mod-intro{display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center}
.mod-intro h2{margin:16px 0 8px}
.mod-intro .shot:has(img[width="324"]){max-width:360px; justify-self:center}
.pts{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.pt{display:flex; gap:16px; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:26px}
.pti{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--pink-tint); color:var(--pink); flex:none}
.pt:nth-child(even) .pti{background:var(--teal-tint); color:var(--teal)}
.pt h3{font-size:18px}
.pt p{color:var(--ink-2); font-size:15.5px; margin-top:6px}

@media (max-width:1120px){.mods{grid-template-columns:repeat(2,1fr)} .pts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:980px){.mod-intro,.gallery{grid-template-columns:1fr}}
@media (max-width:640px){.mods,.pts{grid-template-columns:1fr} .tab{padding:10px 15px; font-size:14px}}
.tests{grid-template-columns:repeat(2,1fr)}
@media (max-width:980px){.tests{grid-template-columns:1fr}}
.plans.four{grid-template-columns:repeat(4,1fr); gap:20px}
.plans.four .plan{padding:32px 26px}
.plans.four .plan.pop{transform:translateY(-10px)}
.plan .btn{width:100%}
.plan-note{text-align:center; margin-top:34px; color:var(--ink-2)}
.plan-note a{color:var(--pink); font-weight:600}
.compare th small{font:500 13px var(--sans); color:var(--ink-3)}
@media (max-width:1120px){.plans.four{grid-template-columns:repeat(2,1fr)} .plans.four .plan.pop{transform:none}}
@media (max-width:640px){.plans.four{grid-template-columns:1fr}}
/* nav alignment fix */
nav.main > ul{align-items:center}
nav.main > ul > li{display:flex; align-items:center}
nav.main > ul > li > a{display:inline-flex; align-items:center; gap:6px; line-height:1.2}
@media (max-width:1120px){nav.main > ul > li{display:block} nav.main > ul > li > a{display:flex}}
@media (max-width:1120px){nav.main > ul{align-items:stretch}}

/* ---- SEO footer ---- */
footer{padding:84px 0 30px}
.foot-cta{border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:70px; background:linear-gradient(120deg,rgba(226,0,106,.18),rgba(0,98,125,.25))}
.foot-cta .wrap{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; padding-top:40px; padding-bottom:40px}
.foot-cta h3{font-size:clamp(22px,2.4vw,30px); color:#fff}
.foot-cta p{color:var(--on-deep-2); margin-top:6px}
.foot-cta .acts{display:flex; gap:12px; flex-wrap:wrap}
.foot{grid-template-columns:1.6fr 1fr 1fr 1fr .8fr; gap:36px}
footer h4{font-size:16px; margin-bottom:18px}
footer nav ul, .foot-blog ul, .foot-contact{list-style:none; margin:0; padding:0; display:grid; gap:11px; font-size:15px}
.foot-brand p{margin-bottom:20px}
.foot-contact a{color:#fff; font-weight:500}
.foot-blog{margin-top:54px; padding-top:30px; border-top:1px solid rgba(255,255,255,.1)}
.foot-blog ul{grid-template-columns:repeat(4,1fr); gap:20px}
.foot-blog a{display:block; line-height:1.5}
.foot-seo{margin-top:34px; font-size:13.5px; line-height:1.7; color:#7FA0AC; max-width:110ch}
.copy{margin-top:30px}
@media (max-width:1120px){.foot{grid-template-columns:1fr 1fr 1fr} .foot-brand{grid-column:1/-1} .foot-blog ul{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.foot{grid-template-columns:1fr 1fr} .foot-blog ul{grid-template-columns:1fr} .foot-cta .acts .btn{flex:1}}

/* ---- vaccination reminders ---- */
.remind{display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:center}
.remind h2{margin:16px 0 16px}
.tl{list-style:none; margin:30px 0 32px; padding:0; display:grid; gap:0; position:relative}
.tl li{display:grid; grid-template-columns:44px 1fr; gap:16px; padding-bottom:18px; position:relative}
.tl li:not(:last-child)::before{content:""; position:absolute; left:21px; top:44px; bottom:0; border-left:2px dashed color-mix(in srgb,#25D366 50%,transparent)}
.tl-dot{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:#E6F9EE; color:#1DA851; flex:none}
.tl li.tl-call .tl-dot{background:var(--pink-tint); color:var(--pink)}
.tl b{font:700 17px var(--head)}
.tl p{color:var(--ink-2); font-size:15.5px; margin-top:2px}
.phone{width:100%; max-width:360px; justify-self:center; border-radius:36px; background:#0F2233; padding:12px; box-shadow:var(--shadow); position:relative}
.ph-head{display:flex; gap:10px; align-items:center; background:#075E54; color:#fff; padding:14px 16px; border-radius:26px 26px 0 0}
.ph-head small{display:block; color:#B9E5DD; font-size:12px}
.ph-head .av{width:36px; height:36px}
.ph-body{background:#ECE5DD; padding:16px 14px 20px; border-radius:0 0 26px 26px; display:grid; gap:10px; font-size:13.5px; line-height:1.45; color:#1B2B2A}
.bub{background:#fff; border-radius:4px 14px 14px 14px; padding:9px 12px; box-shadow:0 1px 1px rgba(0,0,0,.08); max-width:92%}
.bub small{display:block; color:#7A8B88; font-size:11px; margin-bottom:2px}
.ph-call{justify-self:center; display:flex; gap:8px; align-items:center; background:#fff; color:var(--pink); font-weight:700; font-size:13px; padding:8px 14px; border-radius:999px; box-shadow:0 1px 1px rgba(0,0,0,.08)}
@media (max-width:980px){.remind{grid-template-columns:1fr; gap:44px}}

/* ---- tighter spacing ---- */
section,.demo-sec{padding:72px 0}
.sec-head{margin-bottom:36px; gap:12px}
.hero{padding:56px 0 70px}
.page-hero{padding:60px 0 64px}
.trusted{padding:34px 0}
.kf + .kf{margin-top:72px}
.feat{padding:48px 0}
.counters{margin:26px 0 28px}
.tl{margin:22px 0 26px}
.foot-blog{margin-top:40px}
footer{padding:64px 0 28px}
.plan-note{margin-top:26px}
.tabs{margin-bottom:26px}
@media (max-width:640px){section,.demo-sec{padding:52px 0} .hero{padding:40px 0 52px} .page-hero{padding:44px 0 48px} .sec-head{margin-bottom:28px}}

/* ---- Maira WhatsApp widget ---- */
.maira{position:fixed; right:calc(20px + env(safe-area-inset-right,0px)); bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:50; display:flex; flex-direction:column; align-items:flex-end; gap:12px}
.maira-fab{display:flex; align-items:center; gap:10px; border:none; background:none; padding:0; cursor:pointer; font:inherit}
.maira-hi{background:var(--card); color:var(--ink); font:700 14px var(--head); padding:10px 16px; border-radius:999px; box-shadow:var(--shadow); border:1px solid var(--line)}
.maira-ic{width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 12px 30px -8px rgba(0,0,0,.45); transition:transform .2s}
.maira-fab:hover .maira-ic{transform:scale(1.06)}
.maira-fab.open .maira-hi{display:none}
.maira-card{width:310px; max-width:calc(100vw - 40px); background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:20px; padding:18px; box-shadow:var(--shadow); position:relative}
.maira-x{position:absolute; top:8px; right:10px; border:none; background:none; font-size:24px; line-height:1; color:var(--ink-3); cursor:pointer}
.maira-top{display:flex; gap:12px; align-items:center; padding-right:20px}
.maira-av{width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--pink),var(--teal)); color:#fff; font:800 18px var(--head); flex:none}
.maira-top b{font:700 16px var(--head)}
.maira-top small{display:block; color:var(--ink-3); font-size:12.5px}
.maira-card p{font-size:14.5px; color:var(--ink-2); margin:12px 0 14px; line-height:1.55}
.maira-btn{display:flex; align-items:center; justify-content:center; gap:10px; background:#25D366; color:#fff; text-decoration:none; font:700 15px var(--head); padding:13px; border-radius:12px}
.maira-btn:hover{background:#1EBE5A}
@media (prefers-reduced-motion:no-preference){.maira-card:not([hidden]){animation:rise .3s ease both}}
@media (max-width:640px){.maira-hi{font-size:13px; padding:8px 12px}}
.maira-num{text-align:center; margin:10px 0 0!important; font:600 13.5px var(--head)!important; color:var(--ink-3)!important}

/* ---- team ---- */
.team{display:grid; grid-template-columns:repeat(2,minmax(0,420px)); gap:24px; justify-content:center}
.tm{display:flex; gap:20px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:24px; padding:28px}
.tm-av{width:84px; height:84px; border-radius:24px; display:grid; place-items:center; background:linear-gradient(135deg,var(--pink),var(--teal)); color:#fff; font:800 26px var(--head); flex:none}
.tm h3{font-size:22px}
.tm-role{color:var(--pink); font:700 14.5px var(--head); margin:4px 0 10px}
.tm p:last-child{color:var(--ink-2); font-size:15.5px}
@media (max-width:760px){.team{grid-template-columns:1fr}}
img.tm-av{object-fit:cover; border-radius:50%; padding:0; background:var(--soft); box-shadow:0 0 0 4px var(--pink-tint)}

/* ---- ABDM ---- */
.abdm-band{padding:34px 0; background:linear-gradient(120deg,#FFF1F7,#E3F3F7)}
.abdm-band .wrap{display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap}
.ab-l{display:flex; gap:20px; align-items:center; max-width:760px}
.ab-l h2{font-size:clamp(22px,2.6vw,30px)}
.ab-l p{color:var(--ink-2); margin-top:6px}
.ab-r{display:flex; gap:12px; flex-wrap:wrap}
.fa-badge-lg{flex:none; width:84px; height:84px; border-radius:22px; display:grid; place-items:center; background:linear-gradient(135deg,#F37021,#E2006A 55%,#00627D); color:#fff; font:800 18px var(--head); letter-spacing:.04em; box-shadow:var(--shadow-sm)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .abdm-band{background:linear-gradient(120deg,#2A1020,#0E3442)}}
:root[data-theme="dark"] .abdm-band{background:linear-gradient(120deg,#2A1020,#0E3442)}
.abdm-flow{display:grid; gap:14px; position:relative}
.af{display:grid; grid-template-columns:52px 1fr; grid-template-rows:auto auto; column-gap:16px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px 20px; box-shadow:var(--shadow-sm); position:relative}
.af span{grid-row:1/3; width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:var(--pink-tint); color:var(--pink)}
.af:nth-child(even) span{background:var(--teal-tint); color:var(--teal)}
.af b{font:700 17px var(--head)}
.af small{color:var(--ink-3); font-size:14px}
.af:not(:last-child)::after{content:""; position:absolute; left:45px; bottom:-15px; height:14px; border-left:2px dashed var(--line)}
.foot-abdm{margin-top:44px; padding:22px 24px; border-radius:20px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); display:flex; gap:28px; align-items:center; flex-wrap:wrap}
.fa-badge{display:flex; gap:12px; align-items:center}
.fa-badge > span{width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg,#F37021,#E2006A 55%,#00627D); color:#fff; font:800 13px var(--head)}
.fa-badge b{color:#fff; font:700 16px var(--head); display:block}
.fa-badge small{color:var(--on-deep-2); font-size:13px}
.foot-abdm ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 26px; font-size:15px}
@media (max-width:640px){.ab-l{flex-direction:column; align-items:flex-start}}
.pts.four{grid-template-columns:repeat(4,1fr)}
.foot-abdm ul{flex:1; min-width:260px}
@media (max-width:1120px){.pts.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.pts.four{grid-template-columns:1fr}}
.abdm-logo{display:block; flex:none; width:60px; height:60px; border-radius:14px; background:#fff; padding:4px; object-fit:contain}
.abdm-logo.lg{width:96px; height:96px; border-radius:22px; padding:6px; box-shadow:var(--shadow-sm)}
.abdm-logo.xl{width:120px; height:120px; border-radius:26px; padding:8px; border:1px solid var(--line); box-shadow:var(--shadow-sm)}

/* ---- offices ---- */
.offices{display:grid; grid-template-columns:repeat(2,minmax(0,520px)); gap:24px; justify-content:center}
.office{display:grid; grid-template-columns:150px 1fr; background:var(--card); border:1px solid var(--line); border-radius:24px; overflow:hidden}
.off-art{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:22px 12px; color:#fff; text-align:center}
.off-art span{font:600 12.5px var(--head); opacity:.9}
.office.ranchi .off-art{background:linear-gradient(160deg,var(--teal-2),var(--teal))}
.office.egra .off-art{background:linear-gradient(160deg,var(--pink-2),var(--pink))}
.off-body{padding:26px 28px; display:flex; flex-direction:column; gap:8px}
.off-tag{align-self:flex-start; font:700 12.5px var(--head); color:var(--teal); background:var(--teal-tint); padding:4px 11px; border-radius:999px}
.office.egra .off-tag{color:var(--pink); background:var(--pink-tint)}
.off-body h3{font-size:24px}
.off-body h3 small{font:500 15px var(--sans); color:var(--ink-3); margin-left:4px}
.off-body address{font-style:normal; color:var(--ink-2); line-height:1.6}
.off-body .link-more{margin-top:6px}
.foot-addr a{color:var(--on-deep-2)!important; font-weight:400!important; font-size:14px}
@media (max-width:980px){.offices{grid-template-columns:1fr}}
@media (max-width:520px){.office{grid-template-columns:1fr} .off-art{flex-direction:row; padding:16px}}
.nav-yt svg{color:#FF0000}
/* ABDM band with illustration */
.abdm-band .wrap{display:grid; grid-template-columns:1.25fr .75fr; gap:40px; align-items:center}
.ab-main{display:grid; gap:24px}
.ab-art{width:100%; max-width:460px; height:auto; justify-self:end; display:block}
@media (max-width:980px){.abdm-band .wrap{grid-template-columns:1fr} .ab-art{justify-self:center; max-width:380px}}
.who-l{display:grid; gap:14px; justify-items:start}
.who-art{width:100%; max-width:480px; height:auto; margin-top:16px}
nav.main a{white-space:nowrap}
@media (min-width:1121px) and (max-width:1400px){nav.main ul{gap:0} nav.main a{padding:9px 11px; font-size:15.5px}}
.dept-title{text-align:center; font-size:22px; margin:46px 0 22px}
.depts{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:1100px; margin:0 auto}
.dept{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:22px; display:flex; flex-direction:column; gap:10px}
.dept:nth-child(even) .pti{background:var(--teal-tint); color:var(--teal)}
.dept h4{font:700 17px var(--head)}
.dept p{color:var(--ink-2); font-size:14.5px; flex:1}
.dept .link-more{font-size:14.5px}
@media (max-width:1000px){.depts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.depts{grid-template-columns:1fr}}
/* ---- header alignment v2 ---- */
header.site .wrap{gap:24px}
nav.main{flex:1; display:flex; justify-content:center}
nav.main > ul{gap:2px; align-items:center}
nav.main > ul > li > a{height:42px; padding:0 14px; display:inline-flex; align-items:center; gap:6px; border-radius:999px; line-height:1}
nav.main > ul > li > a:hover{background:var(--soft); color:var(--pink)}
nav.main > ul > li > a[aria-current="page"]{background:var(--pink-tint); color:var(--pink)}
.header-cta{flex:none}
.header-cta .btn{height:46px; padding:0 22px}
.logo{flex:none}
@media (min-width:1121px) and (max-width:1440px){
  .logo img{height:44px}
  nav.main > ul > li > a{padding:0 11px; font-size:15.5px}
  .header-cta .btn{padding:0 18px; font-size:14.5px}
}
@media (max-width:1120px){
  nav.main{display:none; flex:none}
  nav.main.open{display:block}
  nav.main > ul > li > a{height:auto; padding:12px 16px; display:flex}
}
@media (max-width:1120px){
  nav.main > ul{align-items:stretch}
  nav.main.open{display:block}
}
@media (max-width:640px){
  .header-cta .btn{height:40px; padding:0 14px; font-size:14px}
  header.site .wrap{gap:10px}
  .menu-btn{width:42px; height:42px}
}
@media (max-width:380px){.logo img{height:36px} .header-cta .btn{padding:0 11px; font-size:13px}}
/* OTP step */
.otp-box input{font:700 22px var(--head); letter-spacing:.5em; text-align:center}
.otp-actions{display:flex; justify-content:space-between; gap:10px; margin-top:4px}
.otp-actions button{background:none; border:none; padding:4px 0; color:var(--pink); font:600 14px var(--sans); cursor:pointer}
.otp-actions button:disabled{color:var(--ink-3); cursor:default}
.otp-actions .otp-change{color:var(--ink-3)}
input[readonly]{background:var(--soft); color:var(--ink-2)}