/* KedaiPabz Kit UI/UX v2 — additive overrides, no framework dependency */
:root{
  --kp-v2-glass:rgba(19,13,35,.70);
  --kp-v2-glass-strong:rgba(14,9,27,.90);
  --kp-v2-glow:rgba(139,92,246,.28);
  --kp-v2-glow2:rgba(217,70,239,.22);
  --kp-v2-gold:rgba(255,200,61,.22);
  --kp-v2-shadow:0 28px 90px rgba(0,0,0,.38);
}
html{scroll-behavior:smooth}
body{min-height:100vh;background:
  radial-gradient(900px 600px at 8% 0%,rgba(124,58,237,.12),transparent 62%),
  radial-gradient(760px 580px at 92% 12%,rgba(217,70,239,.10),transparent 64%),
  #0B0816}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,black,transparent 72%)}
main,header,footer{position:relative;z-index:1}

/* top progress */
.kp-scroll-progress{position:fixed;left:0;top:0;width:100%;height:2px;z-index:100;pointer-events:none}
.kp-scroll-progress>i{display:block;height:100%;width:0;background:var(--grad);box-shadow:0 0 18px rgba(217,70,239,.65);transition:width .08s linear}

/* premium header */
.kbar{border-bottom-color:rgba(255,255,255,.075);background:rgba(9,6,18,.70);box-shadow:0 10px 40px rgba(0,0,0,.12)}
.kbar .wrap{max-width:1240px}
.kbrand i{position:relative;overflow:hidden}
.kbrand i::after{content:"";position:absolute;inset:-120% -40%;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.55),transparent 65%);transform:translateX(-140%) rotate(18deg);animation:kpShine 7s ease-in-out infinite}
.knav a{transition:background .2s ease,color .2s ease,transform .2s ease}
.knav a:hover{transform:translateY(-1px)}
.kbar .kbtn{box-shadow:0 12px 34px -14px rgba(255,200,61,.85)}

/* hero */
.kp-v2-hero{position:relative;isolation:isolate;overflow:hidden;padding-top:92px}
.kp-v2-hero::before,.kp-v2-hero::after{content:"";position:absolute;border-radius:999px;filter:blur(70px);pointer-events:none;z-index:-1}
.kp-v2-hero::before{width:430px;height:430px;left:-170px;top:30px;background:rgba(139,92,246,.22);animation:kpFloat 10s ease-in-out infinite alternate}
.kp-v2-hero::after{width:390px;height:390px;right:-140px;top:90px;background:rgba(217,70,239,.16);animation:kpFloat 13s ease-in-out -3s infinite alternate-reverse}
.hero h1{font-size:clamp(46px,7vw,86px);text-wrap:balance;text-shadow:0 8px 36px rgba(0,0,0,.22)}
.hero .lead{font-size:clamp(17px,2vw,20px);line-height:1.75}
.pill{background:rgba(255,255,255,.055);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.hero-ctas .kbtn{min-height:52px}
.hero-ticks span{background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.05);padding:8px 10px;border-radius:12px}

/* studio / phone preview */
.studio{position:relative;filter:drop-shadow(0 32px 70px rgba(0,0,0,.28));transform-style:preserve-3d}
.studio::before{content:"";position:absolute;inset:8% 4%;border-radius:38px;background:var(--grad);filter:blur(60px);opacity:.16;z-index:-1}
.phone{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.studio:hover .phone{transform:translateY(-4px) rotateX(1.3deg) rotateY(-1.3deg)}
.screen{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 28px 70px rgba(0,0,0,.34)}

/* glass cards */
.card,.stats,.tabs,.panel,.faq details,.buy,.demo-card,.compare,.ticket{backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}
.card{background:linear-gradient(145deg,rgba(255,255,255,.048),rgba(255,255,255,.022));border-color:rgba(255,255,255,.085);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.tile,.step,.plan,.demo-card,.faq details{transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s ease,box-shadow .28s ease,background .28s ease}
.tile:hover,.step:hover,.plan:hover,.demo-card:hover{transform:translateY(-5px);border-color:rgba(167,139,250,.28);box-shadow:0 22px 60px rgba(0,0,0,.22),0 0 0 1px rgba(139,92,246,.08)}
.tile .ico{transition:transform .3s cubic-bezier(.2,.8,.2,1),filter .3s ease}
.tile:hover .ico{transform:translateY(-3px) scale(1.04);filter:drop-shadow(0 10px 20px rgba(139,92,246,.25))}

/* sections */
section{position:relative}
.sec-head h2{text-wrap:balance}
.eyebrow{padding:7px 11px;border-radius:999px;background:rgba(139,92,246,.08);border:1px solid rgba(167,139,250,.14);width:max-content}
.stats{border:1px solid rgba(255,255,255,.075);background:rgba(255,255,255,.028);box-shadow:var(--kp-v2-shadow)}
.stats>div{position:relative}
.stats>div b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* tabs */
.tabs{padding:6px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.075);border-radius:18px;gap:6px}
.tabs button{border-radius:13px;transition:background .2s ease,color .2s ease,transform .2s ease}
.tabs button[aria-selected=true]{box-shadow:0 10px 26px rgba(124,58,237,.20)}

/* pricing */
.plans{align-items:stretch}
.plan{position:relative;overflow:hidden;background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.018))}
.plan::after{content:"";position:absolute;inset:auto -30% -65% -30%;height:70%;background:radial-gradient(circle,rgba(139,92,246,.12),transparent 68%);pointer-events:none}
.plan.popular{box-shadow:0 28px 80px rgba(124,58,237,.16),inset 0 1px 0 rgba(255,255,255,.07)}
.plan[data-lifetime],.plan.lifetime{background:linear-gradient(160deg,rgba(255,200,61,.075),rgba(255,255,255,.022));border-color:rgba(255,200,61,.23)}
.price{letter-spacing:-.045em}
.period{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}

/* checkout */
.buy{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(139,92,246,.065),rgba(255,255,255,.022));border:1px solid rgba(167,139,250,.13);box-shadow:0 30px 90px rgba(0,0,0,.24)}
.buy::before{content:"";position:absolute;width:360px;height:360px;right:-170px;top:-190px;border-radius:999px;background:rgba(217,70,239,.10);filter:blur(35px);pointer-events:none}
.summary{position:sticky;top:104px;background:rgba(12,8,24,.84);box-shadow:0 24px 70px rgba(0,0,0,.28)}
.f-input,.f-select{transition:border-color .2s ease,box-shadow .2s ease,background .2s ease,transform .2s ease}
.f-input:focus,.f-select:focus{background:rgba(0,0,0,.34);transform:translateY(-1px)}
.opt{transition:border-color .2s ease,background .2s ease,transform .2s ease}
.opt:hover{transform:translateY(-2px);background:rgba(255,255,255,.05)}

/* FAQ */
.faq details{overflow:hidden}
.faq summary{transition:color .2s ease,background .2s ease}
.faq details[open]{border-color:rgba(167,139,250,.22);box-shadow:0 18px 46px rgba(0,0,0,.14)}
.faq details[open] summary{color:#fff}
.faq details p{animation:kpFadeUp .28s ease both}

/* footer — fixes mobile collision shown on production */
.kfoot{position:relative;padding:64px 0 calc(54px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,transparent,rgba(0,0,0,.11));overflow:hidden}
.kfoot::before{content:"";position:absolute;left:50%;top:0;width:min(860px,90vw);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(139,92,246,.6),rgba(217,70,239,.55),transparent)}
.kfoot .wrap{display:grid;grid-template-columns:minmax(260px,1.1fr) minmax(320px,.9fr);gap:44px 70px;align-items:start}
.kfoot nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;align-content:start}
.kfoot nav a{display:block;min-width:0;line-height:1.35}

/* sticky mobile purchase */
.mbar{background:rgba(13,8,27,.91);box-shadow:0 18px 60px rgba(0,0,0,.48);border-color:rgba(167,139,250,.18)}
.mbar.kp-footer-near{transform:translateY(150%)!important}

/* reveal v2 */
[data-reveal]{will-change:opacity,transform;transition-duration:.75s;transition-timing-function:cubic-bezier(.2,.8,.2,1)}
[data-reveal].in{will-change:auto}
.kp-reveal-stagger>*{transition-delay:calc(var(--kp-i,0) * 55ms)}

/* tiny status chip for setup center link */
.kp-setup-cta{border-color:rgba(52,211,153,.18)!important}
.kp-setup-cta::before{content:"";width:7px;height:7px;border-radius:50%;background:#34D399;box-shadow:0 0 14px rgba(52,211,153,.7)}

@keyframes kpFloat{to{transform:translate3d(42px,20px,0) scale(1.06)}}
@keyframes kpShine{0%,55%{transform:translateX(-150%) rotate(18deg)}70%,100%{transform:translateX(150%) rotate(18deg)}}
@keyframes kpFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:860px){
  body{padding-bottom:0}
  .kp-v2-hero{padding-top:48px}
  .hero h1{font-size:clamp(44px,12.6vw,68px)}
  .hero-ctas{display:grid;grid-template-columns:1fr}
  .hero-ctas .kbtn{width:100%;min-height:54px}
  .hero-ticks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hero-ticks span{align-items:flex-start}
  .kfoot{padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}
  .kfoot .wrap{display:grid;grid-template-columns:1fr;gap:34px}
  .kfoot nav{grid-template-columns:1fr 1fr;width:100%;gap:14px 18px;padding:18px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.025)}
  .kfoot nav a{font-size:14px;overflow-wrap:anywhere}
  .summary{position:relative;top:auto}
}
@media (max-width:520px){
  .wrap{padding-left:18px;padding-right:18px}
  section{padding:74px 0}
  .hero-ticks{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr!important}
  .kfoot nav{grid-template-columns:1fr}
  .knav-m{padding-left:18px;padding-right:18px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .kp-v2-hero::before,.kp-v2-hero::after{display:none}
}


/* v2.1 hotfix: keep the Pro popularity badge fully inside the card */
.plan.pick .tag{
  top:18px !important;
  left:auto !important;
  right:22px !important;
  z-index:3 !important;
  max-width:calc(100% - 44px);
  white-space:nowrap;
  box-shadow:0 10px 28px rgba(124,58,237,.22);
}
@media (max-width:560px){
  .plan.pick .tag{top:16px !important;right:18px !important;font-size:11px !important;padding:5px 10px !important}
}