/* ===== Smart Finance — Landing page (индиго accent + спектр) ===== */
:root{
  --ink:#1e1b4b;
  --ink-2:#312e81;
  --emerald:#4f46e5;
  --emerald-d:#4338ca;
  --teal:#0d9488;
  --grad:linear-gradient(135deg,#6366f1,#4f46e5);
  --grad-bright:linear-gradient(135deg,#818cf8,#4f46e5);
  --text:#18181b;
  --text-2:#3f3f46;
  --muted:#71717a;
  --bg:#ffffff;
  --bg-2:#f4f4f5;
  --border:#ececec;
  --radius:18px;
  --shadow:0 1px 3px rgba(0,0,0,.06), 0 18px 50px -22px rgba(0,0,0,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Inter","Segoe UI",system-ui,sans-serif; color:var(--text); background:var(--bg); font-size:16px; line-height:1.6; letter-spacing:-.011em; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{text-decoration:none; color:inherit}
.grad-text{background:var(--grad-bright); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .grad-text{background-image:linear-gradient(135deg,#ffffff,#9ca3af)}
img,svg{display:block}

/* ===== Keyboard focus (a11y) ===== */
:focus-visible{outline:3px solid #4f46e5; outline-offset:2px; border-radius:6px}
.lbtn:focus-visible,.switch:focus-visible,.to-top:focus-visible{outline-offset:3px}
/* Skip link */
.skip-link{position:absolute; left:12px; top:-60px; z-index:200; background:var(--emerald-d); color:#fff; padding:10px 16px; border-radius:10px; font-weight:600; font-size:14px; transition:top .2s}
.skip-link:focus{top:12px}

/* ===== Reveal motion ===== */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1; transform:none}
.reveal:nth-child(2){transition-delay:.07s}
.reveal:nth-child(3){transition-delay:.14s}
.reveal:nth-child(4){transition-delay:.20s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ===== Buttons ===== */
.lbtn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; min-height:44px; border-radius:12px; font-weight:600; font-size:14.5px; cursor:pointer; border:1px solid transparent; transition:transform .18s, box-shadow .18s, background .18s, color .18s; white-space:nowrap; touch-action:manipulation}
.lbtn svg{width:18px; height:18px; flex-shrink:0}
.lbtn.primary{background:var(--grad); color:#fff; box-shadow:0 10px 26px -10px rgba(79,70,229,.7)}
.lbtn.primary:hover{transform:translateY(-2px); box-shadow:0 16px 34px -10px rgba(79,70,229,.8)}
.lbtn.ghost{background:rgba(255,255,255,.06); color:inherit; border-color:var(--border)}
.lbtn.ghost:hover{background:var(--bg-2); transform:translateY(-2px)}
.lbtn.light{background:#fff; color:var(--ink)}
.lbtn.light:hover{transform:translateY(-2px)}
.lbtn.big{padding:15px 28px; font-size:16px; border-radius:14px}
.lbtn.full{width:100%}
.lbtn.dark{background:#18181b; color:#fff; box-shadow:0 10px 26px -12px rgba(0,0,0,.5)}
.lbtn.dark:hover{transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(0,0,0,.6)}
/* Микро-анимэйшн: товч дарах feedback (Stripe) */
.lbtn:active{transform:translateY(0) scale(.96)}
.switch:active{transform:scale(.94)}
/* Хар гадаргуу (hero/CTA/нав) дээр үндсэн товч → цагаан, эс бөгөөс нүүрс хар нь арилна */
.hero .lbtn.primary,.cta-band .lbtn.primary,.lnav:not(.scrolled) .lbtn.primary{background:#fff; color:var(--ink); box-shadow:0 10px 26px -12px rgba(0,0,0,.45)}
.hero .lbtn.primary:hover,.cta-band .lbtn.primary:hover,.lnav:not(.scrolled) .lbtn.primary:hover{background:#f4f4f5; transform:translateY(-2px)}

/* ===== Nav ===== */
.lnav{position:fixed; top:0; left:0; right:0; z-index:100; transition:background .3s, box-shadow .3s, padding .3s; padding:14px 0}
.lnav.scrolled{background:rgba(255,255,255,.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 1px 0 var(--border); padding:9px 0}
.lnav-inner{max-width:1200px; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:24px}
.lbrand{display:flex; align-items:center; gap:10px; font-weight:800}
.lbrand-logo{width:38px; height:38px; border-radius:11px; background:var(--grad); color:#fff; display:grid; place-items:center; font-size:20px; font-weight:800; box-shadow:0 8px 20px -6px rgba(79,70,229,.6)}
.lbrand-logo svg{width:22px; height:22px}
.lbrand-name{font-size:20px; letter-spacing:-.03em; color:#fff}
.lnav.scrolled .lbrand-name{color:var(--ink)}
.lnav-links{display:flex; gap:28px; margin:0 auto; font-size:14.5px; font-weight:500}
.lnav-links a{color:rgba(255,255,255,.82); transition:color .2s}
.lnav-links a:hover{color:#fff}
.lnav.scrolled .lnav-links a{color:var(--text-2)}
.lnav.scrolled .lnav-links a:hover{color:var(--emerald-d)}
.lnav-cta{display:flex; align-items:center; gap:10px}
.lnav .lbtn.ghost{color:#fff; border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.08)}
.lnav.scrolled .lbtn.ghost{color:var(--text); border-color:var(--border); background:#fff}
.lnav-burger{display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:44px; height:44px; background:none; border:none; cursor:pointer; touch-action:manipulation}
.lnav-burger span{width:24px; height:2px; background:#fff; border-radius:2px; transition:.3s}
.lnav.scrolled .lnav-burger span{background:var(--ink)}

/* ===== Hero ===== */
.hero{position:relative; background:linear-gradient(180deg,var(--ink),var(--ink-2)); color:#fff; padding:160px 24px 110px; overflow:hidden}
.hero-bg{position:absolute; inset:0; overflow:hidden}
.blob{position:absolute; border-radius:50%; filter:blur(80px); opacity:.1; will-change:transform}
.hero .b1{width:560px; height:560px; background:radial-gradient(circle,#ffffff,transparent 70%); top:-200px; right:-100px; animation:drift 22s ease-in-out infinite}
.hero .b2{width:480px; height:480px; background:radial-gradient(circle,#ffffff,transparent 70%); bottom:-220px; left:-120px; animation:drift2 26s ease-in-out infinite reverse}
.hero .b3,.hero .b4,.hero .b5{display:none}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(48px,-34px) scale(1.08)}66%{transform:translate(-34px,46px) scale(.95)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(-50px,30px) scale(1.1)}75%{transform:translate(36px,-26px) scale(.92)}}
@keyframes hueShift{0%,100%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(-24deg)}}
@media (prefers-reduced-motion:reduce){.blob,.hero-bg{animation:none}}
.grid-overlay{position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:46px 46px; mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000,transparent)}
.hero-inner{position:relative; max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center}
.badge-pill{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); padding:7px 15px; border-radius:999px; font-size:13px; font-weight:600; margin-bottom:24px; color:rgba(255,255,255,.88)}
.badge-pill svg{width:15px; height:15px; color:#fff; flex-shrink:0}
.hero-copy h1{font-size:54px; line-height:1.07; font-weight:800; letter-spacing:-.035em; margin-bottom:20px}
.hero-sub{font-size:18.5px; color:rgba(255,255,255,.74); max-width:520px; margin-bottom:32px}
.hero-sub b{color:#fff; font-weight:700}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap}
.hero-actions.center{justify-content:center}
.hero-micro{display:flex; gap:20px; margin-top:20px; font-size:13.5px; color:rgba(255,255,255,.6); flex-wrap:wrap}
.hero-micro.center{justify-content:center}

/* Hero mockup */
.hero-visual{position:relative}
.mockup{background:#fff; border-radius:16px; box-shadow:0 40px 90px -30px rgba(0,0,0,.6); overflow:hidden; transform:perspective(1400px) rotateY(-9deg) rotateX(3deg); transition:transform .5s ease}
.hero-visual:hover .mockup{transform:perspective(1400px) rotateY(-4deg) rotateX(1deg)}
.mockup-bar{display:flex; align-items:center; gap:7px; padding:12px 15px; background:#f3f7f5; border-bottom:1px solid var(--border)}
.mockup-bar>span{width:11px; height:11px; border-radius:50%; background:#cbd5d2}
.mockup-bar>span:nth-child(1){background:#ff6058}.mockup-bar>span:nth-child(2){background:#ffbd2e}.mockup-bar>span:nth-child(3){background:#28ca42}
.mockup-url{margin-left:12px; flex:1; background:#fff; border:1px solid var(--border); border-radius:7px; font-size:11px; color:var(--muted); padding:4px 12px; text-align:center}
.mockup-body{padding:18px}
.mk-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px}
.mk-kpi{background:var(--bg-2); border-radius:12px; padding:12px}
.mk-kpi span{font-size:10.5px; color:var(--muted); font-weight:600}
.mk-kpi b{display:flex; align-items:baseline; gap:3px; font-size:20px; font-weight:800; margin-top:3px; letter-spacing:-.02em}
.mk-kpi b i{font-size:9px; font-weight:600; color:var(--muted); font-style:normal}
.mk-spark{height:22px; margin-top:7px; border-radius:5px; background:linear-gradient(180deg,rgba(79,70,229,.25),transparent); position:relative}
.mk-spark::after{content:""; position:absolute; left:0; right:0; bottom:6px; height:2px; background:var(--emerald); border-radius:2px; transform:skewY(-8deg)}
.mk-spark.t::after{background:var(--teal)}
.mk-spark.s::after{background:#0ea5e9}
.mk-chart{background:var(--bg-2); border-radius:12px; padding:14px}
.mk-chart-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px}
.mk-chart-head b{font-size:12.5px}
.mk-chart-head span{font-size:10.5px; color:var(--muted)}
.mk-bars{display:flex; gap:14px; align-items:flex-end; height:90px}
.mk-bars>div{flex:1; display:flex; gap:4px; align-items:flex-end; height:100%}
.mk-bars i{flex:1; background:var(--emerald); border-radius:4px 4px 0 0; animation:growbar 1s ease both}
.mk-bars i.g2{background:#d4d4d8}
@keyframes growbar{from{height:0 !important}}
.float-card{position:absolute; display:inline-flex; align-items:center; gap:9px; background:#fff; color:var(--text); border-radius:12px; padding:11px 15px; font-size:12.5px; font-weight:600; box-shadow:0 18px 40px -14px rgba(0,0,0,.45); animation:bob 4s ease-in-out infinite}
.float-card b{color:var(--emerald-d)}
.float-card svg{width:18px; height:18px; color:var(--emerald-d); flex-shrink:0}
.fc1{bottom:-18px; left:-26px; animation-delay:.5s}
.fc2{top:30px; right:-22px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ===== Logos ===== */
.logos{max-width:1100px; margin:0 auto; padding:54px 24px 10px; text-align:center}
.logos p{font-size:13px; color:var(--muted); font-weight:600; letter-spacing:.4px; margin-bottom:20px}
.logo-row{display:flex; flex-wrap:wrap; justify-content:center; gap:16px 30px; font-size:15.5px; font-weight:700; color:var(--text-2)}
.logo-row span{display:inline-flex; align-items:center; gap:9px; opacity:.78; transition:opacity .2s}
.logo-row span:hover{opacity:1}
.logo-row svg{width:20px; height:20px; color:var(--emerald-d); flex-shrink:0}

/* ===== Accountant-approved trust band ===== */
.trust-band{max-width:1100px; margin:28px auto 6px; padding:0 24px}
.trust-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; background:linear-gradient(135deg,#f4f4f5,#f3f7f5); border:1px solid #c7ecd9; border-radius:18px; padding:18px 24px}
.trust-badge{display:flex; align-items:center; gap:14px; min-width:280px; flex:1}
.trust-badge svg{width:34px; height:34px; color:var(--emerald-d); flex-shrink:0}
.trust-badge b{display:block; font-size:15px; color:var(--text)}
.trust-badge span{display:block; font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.45}
.trust-points{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--text-2); font-weight:600}
.trust-points span{white-space:nowrap}
@media(max-width:720px){.trust-inner{flex-direction:column; align-items:flex-start}.trust-points span{white-space:normal}}

/* ===== Stats ===== */
.stats{max-width:1100px; margin:50px auto; padding:34px 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; background:var(--bg-2); border-radius:24px}
.stat{text-align:center}
.stat b{display:block; font-size:42px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; background:var(--grad-bright); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat span{font-size:13.5px; color:var(--muted); font-weight:500}

/* ===== Section base ===== */
.section-pad{max-width:1180px; margin:0 auto; padding:88px 24px}
.sec-head{text-align:center; max-width:680px; margin:0 auto 50px}
.eyebrow{display:inline-block; font-size:13px; font-weight:700; color:var(--emerald-d); background:#f4f4f5; padding:5px 14px; border-radius:999px; margin-bottom:16px; letter-spacing:.3px}
.sec-head h2{font-size:40px; font-weight:800; letter-spacing:-.03em; line-height:1.12}
.sec-head p{font-size:17px; color:var(--text-2); margin-top:14px}

/* ===== Bento features ===== */
.bento{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.bento-card{background:var(--bg); border:1px solid var(--border); border-radius:20px; padding:26px; box-shadow:var(--shadow); transition:transform .25s, box-shadow .25s; position:relative; overflow:hidden}
.bento-card:hover{transform:translateY(-5px); box-shadow:0 28px 60px -24px rgba(0,0,0,.28)}
.bento-card.big{grid-row:span 2}
.bento-card.wide{grid-column:span 2}
.fico{width:50px; height:50px; border-radius:14px; background:var(--grad); display:grid; place-items:center; color:#fff; margin-bottom:18px; box-shadow:0 10px 22px -8px rgba(79,70,229,.6)}
.fico svg{width:25px; height:25px}
.bento-card h3{font-size:19px; font-weight:700; letter-spacing:-.02em; margin-bottom:8px}
.bento-card p{font-size:14.5px; color:var(--text-2)}
.mini-demo{margin-top:20px; display:flex; flex-direction:column; gap:8px}
.md-row{display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--bg-2); border-radius:10px; padding:10px 13px; font-size:12.5px; font-weight:500}
.md-row.flag{background:#fffbeb}
.md-tag{font-size:11.5px; font-weight:700; color:var(--emerald-d); background:#f4f4f5; padding:3px 9px; border-radius:7px; white-space:nowrap}
.md-tag.warn{color:#b45309; background:#fef3c7}

/* ===== How / steps ===== */
.how{text-align:center}
.steps{display:flex; align-items:flex-start; justify-content:center; gap:0; max-width:900px; margin:0 auto}
.step{flex:1; padding:0 16px}
.step-num{width:56px; height:56px; border-radius:50%; background:var(--grad); color:#fff; font-size:24px; font-weight:800; display:grid; place-items:center; margin:0 auto 18px; box-shadow:0 12px 26px -8px rgba(79,70,229,.6)}
.step h3{font-size:18px; font-weight:700; margin-bottom:6px}
.step p{font-size:14px; color:var(--text-2)}
.step-line{flex:0 0 60px; height:2px; background:linear-gradient(90deg,var(--emerald),#d4d4d8); margin-top:28px; border-radius:2px}

/* ===== Pricing ===== */
.bill-toggle{display:inline-flex; align-items:center; gap:14px; margin-top:26px; font-size:14px; font-weight:600; color:var(--muted)}
.bill-toggle .active, .bill-toggle span.on{color:var(--text)}
.bill-toggle em{font-style:normal; color:var(--emerald-d); font-size:12px; background:#f4f4f5; padding:2px 8px; border-radius:999px; margin-left:4px}
.switch{width:50px; height:28px; border-radius:999px; background:var(--emerald); border:none; cursor:pointer; position:relative; padding:0; transition:background .2s}
.switch i{position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:transform .25s cubic-bezier(.22,1,.36,1)}
.switch.year i{transform:translateX(22px)}
.price-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:start; max-width:1200px; margin:0 auto}
.price-card{background:var(--bg); border:1px solid var(--border); border-radius:20px; padding:26px 20px; box-shadow:var(--shadow); transition:transform .25s, box-shadow .25s; position:relative}
.price-card:hover{transform:translateY(-6px); box-shadow:0 30px 64px -26px rgba(0,0,0,.28)}
.price-card.popular{border:2px solid var(--emerald); box-shadow:0 30px 70px -26px rgba(79,70,229,.5); transform:scale(1.04)}
.price-card.popular:hover{transform:scale(1.04) translateY(-5px)}
.price-tag{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--grad); color:#fff; font-size:12px; font-weight:700; padding:5px 16px; border-radius:999px; box-shadow:0 8px 18px -6px rgba(79,70,229,.7)}
.price-name{font-size:15px; font-weight:700; color:var(--text-2)}
.price-amt{margin:12px 0 6px; display:flex; align-items:baseline; gap:6px}
.price-amt b{font-size:33px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; transition:opacity .18s}
.price-amt span{font-size:14px; color:var(--muted); font-weight:600}
.price-desc{font-size:13.5px; color:var(--muted); margin-bottom:20px}
.price-who{margin:4px 0 18px; padding:11px 13px; background:#eef2ff; border:1px solid #dfe3ff; border-radius:13px; font-size:13.5px; color:var(--text-2); line-height:1.5; font-weight:550}
.price-who-lbl{display:block; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--emerald-d); margin-bottom:3px}
.price-card.popular .price-who{background:#e7e9ff; border-color:#cdd2ff}
.price-feat{list-style:none; margin-top:22px; display:flex; flex-direction:column; gap:11px}
.price-feat li{font-size:14px; color:var(--text-2); padding-left:26px; position:relative}
.price-feat li::before{content:"✓"; position:absolute; left:0; top:0; width:18px; height:18px; background:#f4f4f5; color:var(--emerald-d); border-radius:50%; font-size:11px; font-weight:800; display:grid; place-items:center}

/* ===== Testimonials ===== */
.tst-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.tst-card{background:var(--bg); border:1px solid var(--border); border-radius:20px; padding:26px; box-shadow:var(--shadow); transition:transform .25s}
.tst-card:hover{transform:translateY(-4px)}
.stars{display:flex; gap:3px; color:#d97706; margin-bottom:14px}
.stars svg{width:17px; height:17px; fill:currentColor; stroke:none}
.tst-card p{font-size:15px; color:var(--text); line-height:1.65; margin-bottom:20px}
.tst-who{display:flex; align-items:center; gap:12px}
.tst-ava{width:44px; height:44px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; font-weight:800; font-size:17px}
.tst-who b{display:block; font-size:14.5px}
.tst-who span{font-size:12.5px; color:var(--muted)}

/* ===== FAQ ===== */
.faq{max-width:820px}
.faq-list{display:flex; flex-direction:column; gap:12px}
.faq-item{background:var(--bg); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:box-shadow .2s}
.faq-item.open{box-shadow:var(--shadow)}
.faq-q{width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; background:none; border:none; padding:19px 22px; font-size:16px; font-weight:600; color:var(--text); cursor:pointer; text-align:left; font-family:inherit}
.faq-ico{font-size:22px; color:var(--emerald-d); transition:transform .3s; flex-shrink:0; font-weight:400}
.faq-item.open .faq-ico{transform:rotate(45deg)}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease}
.faq-a p{padding:0 22px 20px; font-size:14.5px; color:var(--text-2)}

/* ===== CTA band ===== */
.cta-band{position:relative; margin:40px 24px 0; border-radius:28px; max-width:1180px; margin-left:auto; margin-right:auto; background:linear-gradient(135deg,var(--ink),var(--ink-2)); overflow:hidden; padding:80px 24px}
.cta-bg{position:absolute; inset:0; overflow:hidden}
.cta-bg .b1{width:400px;height:400px;background:radial-gradient(circle,#ffffff,transparent 70%);top:-150px;left:10%;filter:blur(70px);opacity:.08;animation:drift 22s ease-in-out infinite}
.cta-bg .b2{width:360px;height:360px;background:radial-gradient(circle,#ffffff,transparent 70%);bottom:-150px;right:10%;filter:blur(70px);opacity:.08;animation:drift 26s ease-in-out infinite reverse}
.cta-inner{position:relative; text-align:center; color:#fff; max-width:640px; margin:0 auto}
.cta-inner h2{font-size:40px; font-weight:800; letter-spacing:-.03em; line-height:1.12}
.cta-inner p{font-size:18px; color:rgba(255,255,255,.74); margin:14px 0 30px}

/* ===== Footer ===== */
.lfoot{background:var(--ink); color:rgba(255,255,255,.7); margin-top:80px; padding:60px 24px 0}
.lfoot-inner{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; padding-bottom:44px}
.lfoot-brand p{font-size:14px; margin-top:14px; max-width:260px}
.lfoot .lbrand-name{color:#fff}
.lfoot-col h4{font-size:13px; color:#fff; font-weight:700; margin-bottom:16px; letter-spacing:.3px}
.lfoot-col a{display:block; font-size:14px; margin-bottom:11px; color:rgba(255,255,255,.62); transition:color .2s}
.lfoot-col a:hover{color:#fff}
.lfoot-bottom{max-width:1180px; margin:0 auto; border-top:1px solid rgba(255,255,255,.08); padding:24px 0; font-size:13px; color:rgba(255,255,255,.45); text-align:center}

/* ===== Responsive ===== */
@media(max-width:980px){
  .hero-inner{grid-template-columns:1fr; gap:48px}
  .hero-copy h1{font-size:44px}
  .float-card{display:none}
  .bento,.price-grid,.tst-grid{grid-template-columns:1fr 1fr}
  .bento-card.wide{grid-column:span 2}
  .lfoot-inner{grid-template-columns:1fr 1fr}
  .section-pad{padding:72px 22px}
}

/* ===== Утас (mobile) — Supabase-style: нягт gutter (18px), жижигрүүлсэн фонт/padding ===== */
@media(max-width:720px){
  /* Нав */
  .lnav{padding:12px 0}
  .lnav-inner{padding:0 18px; gap:14px}
  .lnav-links,.lnav-cta{display:none}
  .lnav-links.open{display:flex; position:absolute; top:60px; left:14px; right:14px; flex-direction:column; background:#fff; padding:16px; border-radius:16px; box-shadow:var(--shadow); gap:12px}
  .lnav-links.open a{color:var(--text); font-size:15.5px}
  .lnav-burger{display:flex}
  .lbrand-logo{width:34px; height:34px}
  .lbrand-name{font-size:18px}

  /* Hero — нягт, товч бүтэн өргөн, mockup хавтгай */
  .hero{padding:104px 18px 60px}
  .hero-copy h1{font-size:36px; line-height:1.1; letter-spacing:-.03em; margin-bottom:16px}
  .hero-sub{font-size:16.5px; margin-bottom:26px}
  .hero-actions{gap:10px}
  .hero-actions .lbtn{flex:1 1 100%}
  .hero-micro{gap:14px; margin-top:18px}
  .mockup,.hero-visual:hover .mockup{transform:none; box-shadow:0 24px 60px -24px rgba(0,0,0,.45)}

  /* Секц ерөнхий */
  .section-pad{padding:56px 18px}
  .sec-head{margin-bottom:34px}
  .sec-head h2,.cta-inner h2{font-size:28px; line-height:1.18}
  .sec-head p{font-size:15.5px; margin-top:12px}
  .logos{padding:40px 18px 8px}
  .trust-band{padding:0 18px}

  /* Stats — 2×2 */
  .stats{grid-template-columns:1fr 1fr; gap:18px; padding:26px 18px; margin:36px auto; border-radius:20px}
  .stat b{font-size:32px}

  /* Grid-үүд нэг багана + нягт padding */
  .bento,.price-grid,.tst-grid{grid-template-columns:1fr; gap:16px}
  .bento-card.big,.bento-card.wide{grid-column:auto; grid-row:auto}
  .bento-card{padding:22px; border-radius:16px}
  .price-card{padding:24px 20px}
  .price-card.popular{transform:none}
  .price-card.popular:hover{transform:translateY(-5px)}

  /* Steps */
  .steps{flex-direction:column; gap:24px}
  .step-line{display:none}

  /* FAQ */
  .faq-q{font-size:15.5px; padding:17px 18px}
  .faq-a p{padding:0 18px 18px}

  /* CTA */
  .cta-band{padding:52px 22px; margin:32px 14px 0; border-radius:22px}
  .cta-inner p{font-size:16px; margin:12px 0 24px}

  /* Footer */
  .lfoot{padding:48px 18px 0; margin-top:60px}
  .lfoot-inner{grid-template-columns:1fr 1fr; gap:28px; padding-bottom:36px}
}

/* ===== Жижиг утас (≤400px) — фонтоо бага зэрэг хураана ===== */
@media(max-width:400px){
  .hero{padding:100px 16px 54px}
  .hero-copy h1{font-size:32px}
  .hero-sub{font-size:15.5px}
  .section-pad{padding:52px 16px}
  .sec-head h2,.cta-inner h2{font-size:25px}
  .stat b{font-size:28px}
  .price-amt b{font-size:30px}
  .lbtn.big{padding:14px 22px; font-size:15px}
  .badge-pill{font-size:12px}
}

/* ===== Anchor offset ===== */
html{scroll-padding-top:86px}

/* ===== Nav active link (scrollspy) ===== */
.lnav-links a.active{color:#fff}
.lnav.scrolled .lnav-links a.active{color:var(--emerald-d)}

/* ===== Showcase (live demo) ===== */
.showcase-frame{max-width:1120px; margin:0 auto; border-radius:18px; overflow:hidden; box-shadow:0 50px 100px -36px rgba(0,0,0,.45); border:1px solid var(--border); background:var(--bg)}
.sf-bar{display:flex; align-items:center; gap:7px; padding:12px 16px; background:var(--bg-2); border-bottom:1px solid var(--border)}
.sf-bar>span{width:11px; height:11px; border-radius:50%; background:#cbd5d2}
.sf-bar>span:nth-child(1){background:#ff6058}.sf-bar>span:nth-child(2){background:#ffbd2e}.sf-bar>span:nth-child(3){background:#28ca42}
.sf-url{margin-left:12px; flex:1; max-width:360px; display:inline-flex; align-items:center; justify-content:center; gap:7px; background:var(--bg); border:1px solid var(--border); border-radius:8px; font-size:12px; color:var(--muted); padding:5px 14px}
.sf-url svg{width:13px; height:13px; flex-shrink:0}
.sf-open{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--emerald-d); white-space:nowrap}
.sf-open svg{width:15px; height:15px; flex-shrink:0}
.sf-open:hover{text-decoration:underline}
.sf-body{height:620px; background:var(--bg)}
.sf-body iframe{width:100%; height:100%; border:none; display:block}

/* ===== Back to top ===== */
.to-top{position:fixed; bottom:26px; right:26px; width:48px; height:48px; border-radius:50%; border:none; background:var(--grad); color:#fff; display:grid; place-items:center; cursor:pointer; box-shadow:0 12px 26px -8px rgba(79,70,229,.7); opacity:0; visibility:hidden; transform:translateY(12px); transition:.3s; z-index:90; touch-action:manipulation}
.to-top svg{width:20px; height:20px}
.to-top.show{opacity:1; visibility:visible; transform:none}
.to-top:hover{transform:translateY(-3px)}

@media(max-width:720px){
  .sf-body{height:480px}
  .to-top{bottom:18px; right:18px; width:42px; height:42px}
}