/* getkhatm.com home page, design v4. Generated pages: landing.py. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:#FAFAF7;color:#0B1220;font-family:'Readex Pro',system-ui,sans-serif;-webkit-text-size-adjust:100%}
html[lang=en] body{font-family:'Plus Jakarta Sans','Readex Pro',system-ui,sans-serif}
a{color:#0B1220}a:hover{color:#C2321F}
img,video{max-width:100%}
.kp{position:relative;overflow-x:clip}
.wm{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;letter-spacing:-0.058em;font-size:24px;line-height:32px;text-decoration:none;color:#0B1220}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.h1{font-size:60px;line-height:1.15;font-weight:700;margin:0;text-wrap:balance;max-width:680px}
.h2{font-size:48px;line-height:1.2;font-weight:700;margin:0;text-wrap:balance}
.h5{font-size:24px;line-height:32px;font-weight:600;margin:0}
.t2{font-size:18px;line-height:28px;font-weight:500;margin:0}
.b3{font-size:18px;line-height:28px;font-weight:400;margin:0;color:#475569;text-wrap:pretty}
.b6{font-size:14px;line-height:20px;color:#475569;margin:0}
.cap{font-size:12px;line-height:16px;font-weight:600}
.red{color:#C2321F}.muted{color:#475569}.fw5{font-weight:500}.center{text-align:center}.mt8{margin-top:8px}
.on-ink{color:#C5CBD6}.on-ink2{color:#E3E7EE}
.narrow{max-width:680px}
.row{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.row-wrap{display:flex;flex-wrap:wrap;gap:12px}
.center-row{justify-content:center}
.col4,.col8,.col12,.col16,.col24,.col48{display:flex;flex-direction:column}
.col4{gap:4px}.col8{gap:8px}.col12{gap:12px}.col16{gap:16px}.col24{gap:24px}.col48{gap:48px}
.col24.center,.col12.center{align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:12px;font-size:16px;line-height:24px;font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .3s cubic-bezier(.22,1,.36,1),background-color .3s cubic-bezier(.22,1,.36,1);font-family:inherit;user-select:none}
.btn:active{transform:scale(.98)}
.btn:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,label:has(input:focus-visible),video:focus-visible{outline:3px solid #E0402E;outline-offset:2px}
.bp{background:#C2321F;color:#fff}.bp:hover{background:#A82A19;color:#fff}
.bs{background:transparent;color:#0B1220;border-color:#0B1220}.bs:hover{background:#0B1220;color:#fff}
.bw{background:#fff;color:#0B1220}.bw:hover{background:#EDE8DF;color:#0B1220}
.btn-sm{min-height:44px;padding:8px 16px;font-size:14px;line-height:20px}
.btn-lg{min-height:56px;padding:14px 32px;font-size:18px}
.sec{padding:112px 0}
.sand{background:#EDE8DF}.ink{background:#0B1220;color:#FAFAF7}
.ink a:not(.btn){color:#FAFAF7}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.skip{position:absolute;inset-inline-start:-9999px;top:8px;z-index:100;background:#fff;padding:8px 12px;border-radius:8px}
.skip:focus{inset-inline-start:8px}
@supports (animation-timeline:view()){
.reveal{animation:up both cubic-bezier(.22,1,.36,1);animation-timeline:view();animation-range:entry 0% entry 55%}
}
@keyframes up{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}

/* NAV */
.topnav{position:sticky;top:16px;z-index:50;display:flex;justify-content:center;padding:0 16px;margin-top:16px}
.navbar{display:flex;align-items:center;gap:20px;padding-block:8px;padding-inline:24px 8px;border-radius:16px;background:rgba(250,250,247,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(11,18,32,.08);max-width:100%}
.navl{display:flex;gap:24px;font-size:14px;line-height:20px;font-weight:500}
.navl a,.navlogin,.navlang{text-decoration:none}
.navlogin,.navlang{font-size:14px;font-weight:600;min-height:44px;display:inline-flex;align-items:center;padding:0 4px}
.navlang{display:none}

/* HERO + interactive card */
.hero{padding:72px 0 112px}
.hg{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"t c" "b c";gap:32px 48px;align-items:center}
.ht{grid-area:t;display:flex;flex-direction:column;gap:24px;align-self:end}
.hb{grid-area:b;display:flex;flex-direction:column;gap:16px;align-self:start}
.pill{align-self:flex-start;padding:8px 12px;border-radius:9999px;background:#EDE8DF;color:#0B1220}
.lead{max-width:560px}
.checks{display:flex;flex-wrap:wrap;gap:16px}
.hcw{grid-area:c;display:flex;flex-direction:column;align-items:center;gap:20px}
.hp{position:relative;width:300px;height:600px;border-radius:46px;background:#000;border:10px solid #1F1F1F;box-shadow:0 32px 64px rgba(11,18,32,.18)}
.hs{position:absolute;inset:0;border-radius:36px;overflow:hidden;background:#F2F2F2;padding:56px 14px 14px;display:flex;flex-direction:column;gap:12px}
.wallet-t{margin:0;font-size:22px;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif}
.wc{border-radius:18px;background:#0B1220;color:#fff;padding:16px;display:flex;flex-direction:column;gap:14px;transition:background-color .4s cubic-bezier(.22,1,.36,1)}
.hc:has(#c2:checked) .wc{background:#1F3A5F}
.hc:has(#c3:checked) .wc{background:#3E2A1E}
.hc:has(#c4:checked) .wc{background:#134E3A}
.wc-top{display:flex;justify-content:space-between;align-items:center}
.wc-shop{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.wc-ini{width:32px;height:32px;border-radius:8px;background:#E0402E;display:grid;place-items:center;font-weight:700}
.wc-count{text-align:end}.wc-count .n{font-size:18px;font-weight:700}
.lbl{font-size:10px;color:#9AA3B2}
.wc-dots{background:#EDE8DF;border-radius:10px;padding:14px 12px;display:grid;grid-template-columns:repeat(5,36px);justify-content:space-between;row-gap:10px}
.wc-foot{display:flex;justify-content:space-between;font-size:12px;line-height:16px}.wc-foot .end{text-align:end}
.wc-qr{align-self:center;width:84px;height:84px;background:#fff;border-radius:10px;display:grid;place-items:center}
.sw{width:44px;height:44px;border-radius:9999px;border:3px solid #FAFAF7;box-shadow:0 0 0 1px #C9C2B5;cursor:pointer;display:block}
.sw:has(input:checked){box-shadow:0 0 0 3px #E0402E}
.hd{width:36px;height:36px;border-radius:9999px;border:2px dashed #C9C2B5;display:grid;place-items:center}
.hd-gift{border-color:#E0402E}
.x{display:none!important}
.hc:has(#s0:checked) .x0,.hc:has(#s1:checked) .x1,.hc:has(#s2:checked) .x2,.hc:has(#s3:checked) .x3,.hc:has(#s4:checked) .x4,.hc:has(#s5:checked) .x5,.hc:has(#s6:checked) .x6,.hc:has(#s7:checked) .x7,.hc:has(#s8:checked) .x8,.hc:has(#s9:checked) .x9,.hc:has(#s10:checked) .x10{display:flex!important}
.hc:has(:is(#s1,#s2,#s3,#s4,#s5,#s6,#s7,#s8,#s9):checked) .d1,
.hc:has(:is(#s2,#s3,#s4,#s5,#s6,#s7,#s8,#s9):checked) .d2,
.hc:has(:is(#s3,#s4,#s5,#s6,#s7,#s8,#s9):checked) .d3,
.hc:has(:is(#s4,#s5,#s6,#s7,#s8,#s9):checked) .d4,
.hc:has(:is(#s5,#s6,#s7,#s8,#s9):checked) .d5,
.hc:has(:is(#s6,#s7,#s8,#s9):checked) .d6,
.hc:has(:is(#s7,#s8,#s9):checked) .d7,
.hc:has(:is(#s8,#s9):checked) .d8,
.hc:has(#s9:checked) .d9{background:#E0402E;border:2px solid #E0402E}
.hc:has(#s1:checked) .d1,.hc:has(#s2:checked) .d2,.hc:has(#s3:checked) .d3,.hc:has(#s4:checked) .d4,.hc:has(#s5:checked) .d5,.hc:has(#s6:checked) .d6,.hc:has(#s7:checked) .d7,.hc:has(#s8:checked) .d8,.hc:has(#s9:checked) .d9{animation:pop .5s cubic-bezier(.22,1,.36,1) both}
@keyframes pop{0%{transform:scale(1.8) rotate(-12deg);opacity:0}100%{transform:none;opacity:1}}
.hn{position:absolute;top:10px;left:8px;right:8px;z-index:3;border-radius:16px;background:rgba(255,255,255,.97);box-shadow:0 8px 24px rgba(0,0,0,.16);padding:10px 12px;gap:10px;align-items:center;animation:hn 3.4s cubic-bezier(.22,1,.36,1) both}
.hn-t{font-size:12px;line-height:16px}
.ki{flex:none;width:32px;height:32px;border-radius:8px;color:#fff;display:grid;place-items:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:14px}
@keyframes hn{0%{opacity:0;transform:translateY(-120%)}10%,78%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-120%)}}
.rw{border-radius:10px;background:#E0402E;color:#fff;padding:10px 12px;gap:8px;align-items:center;font-size:14px;font-weight:600}
.demo-ctl{display:flex;flex-direction:column;align-items:center;gap:14px}

/* FOR */
.for{padding:24px 0;border-top:1px solid #E4DED2;border-bottom:1px solid #E4DED2}
.for-row{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:center;align-items:center}

/* VIDEO */
.intro-video{max-width:960px;width:100%;margin:0 auto}
.intro-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:16px;background:#111A2C}

/* cards */
.grid4{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:24px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:24px}
.card-s{display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:20px;background:#EDE8DF}
.card-p{display:flex;flex-direction:column;gap:16px;padding:32px;border-radius:24px;background:#FAFAF7}
.num{font-size:40px;line-height:1;font-weight:700;color:#C2321F}
.card-w{display:flex;flex-direction:column;gap:12px;padding:32px;border-radius:24px;border:1px solid #E4DED2;background:#fff}
.roi{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:32px;align-items:center;padding:40px;border-radius:24px;background:#EDE8DF}
.roi-t{font-size:36px;line-height:1.3}
.roi-box{padding:24px;border-radius:16px;background:#FAFAF7;border:1px solid #E4DED2;display:flex;flex-direction:column;gap:10px}
.roi-line{font-size:18px;line-height:28px;font-weight:500}
.roi-sum{font-size:24px;line-height:32px;font-weight:700;color:#C2321F;padding-top:10px;border-top:1px solid #E4DED2}

/* PRICING */
.price-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.toggle{display:inline-flex;gap:4px;padding:4px;border-radius:9999px;background:#FAFAF7}
.tg{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:9999px;cursor:pointer;font-weight:500}
.tg input{position:absolute;opacity:0;pointer-events:none}
.tg:has(input:checked){background:#0B1220;color:#fff}
.yr{display:none}
.pricing:has(#yr:checked) .yr{display:block}
.pricing:has(#yr:checked) .mo{display:none}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px;align-items:stretch}
.plan{display:flex;flex-direction:column;gap:24px;padding:32px;border-radius:24px;border:1px solid #E4DED2;background:#fff}
.plan.featured{padding:36px 32px;border:2px solid #C2321F}
@media (min-width:1100px){.plan.featured{transform:scale(1.03)}}
.plan-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.plan .sub{margin-top:-16px}
.badge{padding:4px 8px;border-radius:9999px;background:#C2321F;color:#fff}
.amt{margin:0;font-size:48px;line-height:1;font-weight:700}
.amt span{font-size:16px;font-weight:500;color:#475569}
.feats{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;flex:1}
.note{text-align:center;color:#475569;font-weight:500}
.plan.ent{background:#0B1220;color:#FAFAF7;border-color:#0B1220}
.ent-price{margin:0;font-size:30px;line-height:36px;font-weight:700}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:48px;align-items:start}
details{border:1px solid #D9D2C5;border-radius:16px;background:#FAFAF7;padding:0 24px}
summary{list-style:none;cursor:pointer;padding:24px 0;font-size:18px;line-height:28px;font-weight:500;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary span{transition:transform .5s cubic-bezier(.22,1,.36,1)}
details[open] summary span{transform:rotate(45deg)}
.faq-a{padding-bottom:24px}

/* SIGNUP + FINAL */
.join{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:48px;align-items:center}
.join-box{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:32px;border-radius:24px;background:#fff;border:1px solid #E4DED2}
.join-box a:not(.btn){font-weight:600}
.final{padding:112px 0}

/* FOOTER */
.foot{padding:48px 0 112px}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px;line-height:20px}
.foot-links a{min-height:44px;display:inline-flex;align-items:center}

.mcta{display:none}
@media (max-width:900px){
.navl{display:none}.navlang{display:inline-flex}
}
@media (max-width:760px){
.h1{font-size:36px;line-height:1.25}.h2{font-size:30px;line-height:1.3}.roi-t{font-size:26px}.sec{padding:72px 0}
.hero{padding:40px 0 72px}
.hg{grid-template-columns:1fr;grid-template-areas:"t" "c" "b"}
.hp{transform:scale(.9);margin:-30px 0}
.navbar{gap:12px;padding-inline:16px 8px}
.btn-sm{display:none}
.mcta{display:flex;position:sticky;bottom:16px;padding:0 16px;justify-content:center;z-index:40}
.mcta .btn{width:100%;box-shadow:0 8px 24px rgba(11,18,32,.25)}
.roi,.card-p,.card-w,.plan{padding:24px}
.join-box{align-items:stretch}
}
@media (prefers-reduced-motion:reduce){.reveal{animation:none!important;opacity:1!important}.hn,.hd{animation:none!important}html{scroll-behavior:auto}}