/* ============================================================
   KRIHA PAY — shared styles
   Palette: #0A0A0C ink, #FAFAF9 paper, #7B3FF2 -> #9D5CFF violet,
            #EFEBFB lilac-tint, #8B8B93 muted
   Type: 'Clash Display' (headings) + 'Inter' (body/UI)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@500;600;700;800&display=swap');

:root{
  --ink:#0A0A0C;
  --paper:#FAFAF9;
  --panel:#F1EEF9;
  --panel-2:#F6F4FB;
  --violet:#7B3FF2;
  --violet-2:#9D5CFF;
  --violet-deep:#5B21B6;
  --muted:#7A7A85;
  --line:#E7E4EF;
  --white:#FFFFFF;
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:10px;
  --shadow-soft: 0 20px 60px -25px rgba(20,10,50,0.25);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Sora', sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.08;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
.container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 32px;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600;
  color:var(--violet-deep);
  background:var(--panel);
  border-radius:999px;
  padding:6px 14px;
  letter-spacing:0.01em;
}
.section{padding:100px 0;}
.section--tight{padding:64px 0;}
.section--alt{background:var(--panel-2);}
.section-head{max-width:640px; margin:0 auto 56px; text-align:center;}
.section-head h2{font-size:clamp(28px,3.4vw,42px); margin-bottom:14px;}
.section-head p{color:var(--muted); font-size:16px;}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:999px;
  font-weight:600;
  font-size:15px;
  padding:14px 26px;
  border:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-dark{background:var(--ink); color:var(--white);}
.btn-dark:hover{box-shadow:0 14px 30px -12px rgba(0,0,0,0.45);}
.btn-violet{background:linear-gradient(135deg,var(--violet),var(--violet-2)); color:var(--white);}
.btn-violet:hover{box-shadow:0 14px 30px -12px rgba(123,63,242,0.55);}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line);}
.btn-store{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--ink); color:#fff; border-radius:14px;
  padding:11px 18px; font-size:14px;
}
.btn-store small{display:block; font-size:10px; font-weight:400; opacity:.7;}
.btn-store strong{display:block; font-size:14px; font-weight:700; letter-spacing:0.01em;}
.btn-round{
  width:44px; height:44px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--violet); color:#fff; border:none; flex-shrink:0;
}

/* Header */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(250,250,249,0.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px;
  max-width:1240px; margin:0 auto;
}
.logo{display:flex; align-items:center; gap:8px; font-family:'Sora'; font-weight:800; font-size:19px; letter-spacing:-0.02em;}
.logo-img{height:26px; width:auto; display:block;}
.logo-img--invert{filter:invert(1) brightness(1.5);}
.logo-img--lg{height:38px;}
.split-img{width:100%; max-width:380px; height:auto; display:block; margin:0 auto;}
.banner-phones-img{width:100%; max-width:340px; height:auto; display:block;}
.final-cta-img{width:100%; max-width:320px; height:auto; display:block; border-radius:20px;}
.logo .pill{
  background:var(--ink); color:#fff; font-size:12px; font-weight:700;
  border-radius:999px; padding:4px 11px;
}
.nav-links{display:flex; align-items:center; gap:34px; font-size:14.5px; font-weight:500;}
.nav-links a{color:var(--ink); opacity:.75; transition:opacity .2s;}
.nav-links a:hover{opacity:1;}
.nav-cta{display:flex; align-items:center; gap:18px;}

/* Footer */
footer{background:var(--ink); color:#fff; padding:72px 0 28px;}
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px;
  padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.12);
}
.footer-grid h4{font-size:14px; margin-bottom:16px; color:#fff;}
.footer-grid p{color:#9C9CA6; font-size:14px; max-width:280px;}
.footer-links{list-style:none; display:flex; flex-direction:column; gap:11px;}
.footer-links a{color:#B8B8C2; font-size:14px; transition:color .2s;}
.footer-links a:hover{color:#fff;}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:24px; font-size:13px; color:#8C8C96; flex-wrap:wrap; gap:12px;
}
.store-badges{display:flex; flex-direction:column; gap:10px; margin-top:6px;}

@media(max-width:860px){
  .nav-links{display:none;}
  .footer-grid{grid-template-columns:1fr 1fr; row-gap:32px;}
}

/* ===================== HERO ===================== */
.hero{padding:88px 0 40px; text-align:center; position:relative; overflow:hidden;}
.hero::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background-image:radial-gradient(circle,#E5DFF8 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 60% 50% at 50% 20%, black 40%, transparent 90%);
}
.hero h1{font-size:clamp(34px,5.2vw,58px); max-width:820px; margin:0 auto 18px;}
.hero p.lead{color:var(--muted); max-width:520px; margin:0 auto 32px; font-size:17px;}
.hero-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:64px;}

.phones-stage{position:relative; max-width:640px; margin:0 auto 56px;}
.hero-phones-img{width:100%; height:auto; display:block; margin:0 auto;}
.phone{background:var(--ink); border-radius:38px; padding:10px; box-shadow:var(--shadow-soft);}
.phone .screen{width:100%; height:100%; border-radius:28px; overflow:hidden; background:var(--white); display:flex; flex-direction:column;}
.pay-card{padding:20px 16px; display:flex; flex-direction:column; gap:16px; height:100%;}
.pay-card .amt-label{font-size:11px; color:var(--muted);}
.pay-card .amt{font-family:'Sora'; font-size:26px; font-weight:800;}
.qr-block{flex:1; background:var(--panel); border-radius:16px; display:flex; align-items:center; justify-content:center;}
.qr-mock{width:110px; height:110px; background:
  repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 12px),
  repeating-linear-gradient(0deg, var(--ink) 0 6px, transparent 6px 12px);
  background-blend-mode:multiply; opacity:.85; border-radius:8px;}

.rating-badge{
  position:absolute; top:8%; right:2%;
  background:#fff; border-radius:20px; padding:16px 20px;
  box-shadow:var(--shadow-soft); text-align:left; max-width:190px;
}
.rating-badge .stars{color:#F5A623; font-size:14px; letter-spacing:2px;}
.rating-badge strong{display:block; font-family:'Sora'; font-size:22px;}
.rating-badge span{font-size:12px; color:var(--muted);}

.trust-row{color:var(--muted); font-size:13px; margin-bottom:20px;}
.logo-row{
  display:flex; justify-content:center; align-items:center; gap:48px;
  flex-wrap:wrap; opacity:.5; font-weight:700; font-size:14px;
}

/* ===================== CARDS / STATS ===================== */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.stat-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-md);
  padding:26px; display:flex; align-items:center; gap:16px;
}
.stat-card strong{display:block; font-family:'Sora'; font-size:26px;}
.stat-card span{font-size:13px; color:var(--muted);}
.stat-card .icon{
  width:44px; height:44px; border-radius:50%; background:var(--violet);
  color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

.insight-block{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
}
.insight-block h2{font-size:clamp(26px,3vw,36px); margin-bottom:12px;}
.insight-block p{color:var(--muted); margin-bottom:22px; max-width:420px;}

.feature-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:34px; display:flex; flex-direction:column; gap:20px;
}
.feature-card h3{font-size:22px; margin-bottom:6px;}
.feature-card p{color:var(--muted); font-size:14.5px;}
.feature-visual{
  background:var(--panel); border-radius:var(--radius-md); padding:24px; min-height:190px;
  display:flex; align-items:center; justify-content:center;
}
.credit-card{
  width:100%; max-width:280px; aspect-ratio:1.58; border-radius:16px;
  background:linear-gradient(135deg,#1E293B,#0F172A);
  color:#fff; padding:20px; display:flex; flex-direction:column; justify-content:space-between;
  box-shadow:0 20px 40px -20px rgba(0,0,0,0.5);
}
.credit-card .chip{width:34px; height:24px; border-radius:5px; background:linear-gradient(135deg,#D9C27A,#B08F45);}
.credit-card .num{font-size:15px; letter-spacing:2px; font-weight:600;}
.credit-card .row{display:flex; justify-content:space-between; font-size:11px; opacity:.8;}

.donut{
  width:150px; height:150px; border-radius:50%;
  background:conic-gradient(var(--violet) 0 65%, var(--panel) 0);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.donut::after{content:''; position:absolute; inset:18px; background:#fff; border-radius:50%;}
.donut-label{position:relative; z-index:1; text-align:center;}
.donut-label strong{font-family:'Sora'; font-size:24px; display:block;}
.donut-label span{font-size:10px; color:var(--muted);}
.payment-row{width:100%; display:flex; justify-content:space-between; font-size:12.5px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line);}
.payment-row span:last-child{font-weight:700;}

/* ===================== FEATURE SPLIT SECTIONS ===================== */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; margin-bottom:110px;}
.split.reverse .visual{order:2;}
.split .eyebrow{margin-bottom:16px;}
.split h3{font-size:clamp(24px,2.8vw,34px); margin-bottom:14px;}
.split p{color:var(--muted); margin-bottom:24px; max-width:420px;}
.check-list{list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:26px;}
.check-list li{display:flex; gap:10px; font-size:14.5px; color:var(--ink);}
.check-list li::before{content:'✓'; color:var(--violet); font-weight:800;}

.budget-card{
  background:linear-gradient(135deg,var(--violet),var(--violet-2)); border-radius:24px; color:#fff; padding:26px;
  max-width:340px; box-shadow:var(--shadow-soft);
}
.budget-card .label{font-size:12px; opacity:.85;}
.budget-card .amt{font-family:'Sora'; font-size:28px; font-weight:800; margin:4px 0 20px;}
.bar-row{margin-bottom:14px;}
.bar-row .top{display:flex; justify-content:space-between; font-size:12px; margin-bottom:6px; opacity:.9;}
.bar-track{background:rgba(255,255,255,0.25); border-radius:99px; height:8px; overflow:hidden;}
.bar-fill{background:#fff; height:100%; border-radius:99px;}

.bars-card{
  background:linear-gradient(135deg,var(--violet),var(--violet-2)); color:#fff;
  border-radius:24px; padding:26px; max-width:360px; box-shadow:var(--shadow-soft);
}
.bars-card .top-row{display:flex; justify-content:space-between; font-size:12px; opacity:.9; margin-bottom:6px;}
.bars-card .amt{font-family:'Sora'; font-size:26px; font-weight:800; margin-bottom:18px;}
.bar-chart{display:flex; align-items:flex-end; gap:10px; height:100px;}
.bar-chart .bar{flex:1; background:rgba(255,255,255,0.9); border-radius:6px 6px 0 0;}
.bars-card .bottom-row{display:flex; justify-content:space-between; font-size:11px; opacity:.85; margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.25);}

.overview-card{background:#fff; border:1px solid var(--line); border-radius:24px; padding:28px; max-width:340px;}
.overview-card h4{font-size:13px; color:var(--muted); font-weight:600; margin-bottom:16px;}
.breakdown-item{display:flex; justify-content:space-between; align-items:center; font-size:13px; padding:10px 0; border-top:1px solid var(--line);}
.breakdown-item .name{display:flex; align-items:center; gap:8px; color:var(--ink); font-weight:600;}
.breakdown-item .date{display:block; font-weight:400; color:var(--muted); font-size:11px;}
.dot{width:8px; height:8px; border-radius:50%; background:var(--violet);}

/* ===================== CURRENCY ===================== */
.currency-grid{display:grid; grid-template-columns:1fr 1.3fr; gap:20px;}
.currency-dark{
  background:var(--ink); color:#fff; border-radius:24px; padding:32px;
  display:flex; flex-direction:column; justify-content:space-between; min-height:280px;
}
.currency-dark h3{font-size:22px; margin-bottom:10px;}
.currency-dark p{color:#B8B8C2; font-size:14px; margin-bottom:20px;}
.currency-panel{background:#fff; border:1px solid var(--line); border-radius:24px; padding:32px;}
.currency-panel h3{font-size:20px; margin-bottom:20px;}
.transfer-row{display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-top:1px solid var(--line);}
.transfer-row:last-child{border-bottom:1px solid var(--line);}
.transfer-row .side span{display:block; font-size:11px; color:var(--muted);}
.transfer-row .side strong{font-family:'Sora'; font-size:20px;}
.currency-tag{background:var(--panel); border-radius:8px; padding:4px 10px; font-size:12px; font-weight:600;}

/* ===================== RECEIPT PHONE ===================== */
.receipt-phone{
  width:260px; margin-left:auto; background:var(--ink); border-radius:38px; padding:10px;
  box-shadow:var(--shadow-soft);
}
.receipt-screen{background:#fff; border-radius:28px; padding:20px 18px; font-size:11px;}
.receipt-screen .rbrand{font-family:'Sora'; font-weight:800; font-size:13px; margin-bottom:4px;}
.receipt-screen .rsub{color:var(--muted); font-size:10px; margin-bottom:16px;}
.receipt-title{font-weight:700; font-size:12px; margin-bottom:2px;}
.receipt-sub{color:var(--muted); font-size:10px; margin-bottom:12px;}
.receipt-line{display:flex; justify-content:space-between; padding:6px 0; border-top:1px dashed var(--line); color:var(--muted);}
.receipt-line strong{color:var(--ink);}
.receipt-total{display:flex; justify-content:space-between; padding-top:12px; margin-top:6px; border-top:2px solid var(--ink); font-weight:800; font-size:13px;}

/* ===================== DARK BANNER ===================== */
.dark-banner{
  background:var(--ink); border-radius:32px; padding:56px; color:#fff;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:32px;
  position:relative; overflow:hidden;
}
.dark-banner::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:radial-gradient(circle at 50% 50%, rgba(123,63,242,0.35), transparent 65%);
}
.dark-banner > *{position:relative; z-index:1;}
.dark-banner h3{font-size:26px; margin-bottom:8px;}
.dark-banner p{color:#B8B8C2; font-size:14px; max-width:260px;}
.banner-phones{display:flex; gap:-20px;}
.banner-phones .mini-phone{width:130px; height:270px; background:#1a1a1e; border-radius:22px; padding:6px; box-shadow:0 20px 40px rgba(0,0,0,0.4);}
.banner-phones .mini-phone + .mini-phone{margin-left:-30px; transform:translateY(20px);}
.mini-screen{width:100%; height:100%; border-radius:16px; background:linear-gradient(135deg,var(--violet),var(--violet-2)); padding:14px; color:#fff;}
.mini-screen .amt{font-family:'Sora'; font-size:18px; font-weight:800; margin-top:10px;}
.arrow-controls{display:flex; gap:10px; margin-top:20px;}
.arrow-btn{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.12); color:#fff; border:none; display:flex; align-items:center; justify-content:center;}

/* ===================== TESTIMONIALS ===================== */
.testi-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.testi-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:30px;}
.testi-card .stars{color:#F5A623; font-size:14px; letter-spacing:2px; margin-bottom:14px;}
.testi-card p{font-size:15px; margin-bottom:22px;}
.testi-person{display:flex; align-items:center; gap:12px;}
.avatar{width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--violet),var(--violet-2)); flex-shrink:0;}
.testi-person strong{display:block; font-size:14px;}
.testi-person span{font-size:12px; color:var(--muted);}

/* ===================== FINAL CTA ===================== */
.final-cta{
  background:var(--ink); border-radius:32px; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch; color:#fff;
}
.final-cta .copy{padding:56px; display:flex; flex-direction:column; justify-content:center; gap:16px;}
.final-cta .copy p{color:#B8B8C2; max-width:340px;}
.final-cta .visual{
  background:linear-gradient(135deg,var(--violet),var(--violet-2));
  display:flex; align-items:center; justify-content:center; padding:40px; min-height:280px;
}
.final-cta .visual .phone{position:static; transform:rotate(-4deg); width:190px; height:380px;}
.avatars-row{display:flex; align-items:center; gap:10px; margin-top:8px;}
.avatars-row .stack{display:flex;}
.avatars-row .stack .avatar{width:32px; height:32px; border:2px solid var(--ink); margin-left:-8px;}
.avatars-row .stack .avatar:first-child{margin-left:0;}

@media(max-width:900px){
  .grid-2, .split, .split.reverse, .insight-block, .currency-grid, .final-cta{grid-template-columns:1fr;}
  .split.reverse .visual{order:0;}
  .dark-banner{grid-template-columns:1fr; text-align:center;}
  .banner-phones{justify-content:center;}
  .rating-badge{position:static; margin:0 auto 20px; max-width:none; display:inline-flex; align-items:center; gap:10px;}
}

/* ===================== TERMS / PRIVACY PAGE ===================== */
.legal-hero{text-align:center; padding:72px 0 40px;}
.legal-hero h1{font-size:clamp(32px,4.6vw,48px); max-width:760px; margin:0 auto 20px;}
.legal-hero p{color:var(--muted); max-width:520px; margin:0 auto;}
.legal-badge{
  display:inline-block; background:var(--violet); color:#fff; font-size:13px; font-weight:600;
  border-radius:999px; padding:7px 18px; margin-bottom:22px;
}
.legal-body{max-width:800px; margin:0 auto; padding:20px 0 80px;}
.legal-section{padding:28px 0; border-top:1px solid var(--line);}
.legal-section:first-child{border-top:none;}
.legal-section h2{font-size:21px; margin-bottom:12px;}
.legal-section p{color:var(--muted); font-size:15px; margin-bottom:12px;}
.legal-section p:last-child{margin-bottom:0;}
.legal-toc{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:56px;
}
.legal-toc a{
  font-size:13px; font-weight:600; background:var(--panel); border-radius:999px;
  padding:8px 16px; color:var(--violet-deep);
}