/* Elustu Landing — styles */
:root{
  --brand:#6d28d9; --brand-600:#7c3aed; --brand-700:#5b21b6; --brand-50:#f5f3ff; --brand-100:#ede9fe;
  --accent:#f59e0b; --ink:#1e1b2e; --muted:#6b6577; --line:#eae7f1; --soft:#f7f5fb;
  --ok:#059669; --star:#f59e0b; --radius:18px; --shadow:0 8px 30px rgba(76,29,149,.10);
  --shadow-lg:0 24px 60px rgba(76,29,149,.18);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; background:#fff;}
a{color:inherit; text-decoration:none;}
h1,h2,h3{letter-spacing:-.02em; line-height:1.15;}
.container{max-width:1140px; margin:0 auto; padding:0 22px;}
.narrow{max-width:820px;}
.center{text-align:center;}
.section{padding:80px 0;}
.section.soft{background:var(--soft);}
.section-sub{color:var(--muted); font-size:1.05rem; margin:.4rem auto 42px; max-width:620px;}
h2{font-size:2.1rem; font-weight:800; margin:0 0 6px;}
.lead{font-size:1.12rem; color:#40404d;}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:13px;
  font-weight:700; font-size:1rem; padding:14px 24px; cursor:pointer; transition:.16s; font-family:inherit;}
.btn-sm{padding:9px 16px; font-size:.9rem;}
.btn-primary{background:var(--brand); color:#fff;}
.btn-primary:hover{background:var(--brand-600); transform:translateY(-1px); box-shadow:var(--shadow-lg);}
.btn-ghost{background:#fff; color:var(--brand); border:1.5px solid var(--brand-100);}
.btn-ghost:hover{border-color:var(--brand); background:var(--brand-50);}

/* Logo */
.logo{display:flex; align-items:center; gap:9px; font-weight:800; font-size:1.35rem;}
.logo-mark{width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--accent)); color:#fff; font-weight:800; font-size:1.1rem;}
.logo-mark.xs{width:20px; height:20px; font-size:.72rem; border-radius:6px; display:inline-grid;}
.logo-word{letter-spacing:-.02em;} .logo-word .dot{color:var(--brand-600);}

/* Header */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.header-inner{display:flex; align-items:center; gap:24px; height:70px;}
.nav{display:flex; gap:24px; margin-left:auto; font-weight:600; color:#4b4658;}
.nav a:hover{color:var(--brand);}
.header-actions{display:flex; align-items:center; gap:14px;}
.lang-switch{display:inline-flex; background:var(--soft); border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.lang-switch button{border:none; background:transparent; padding:7px 12px; font-weight:700; font-size:.82rem; color:var(--muted); cursor:pointer;}
.lang-switch button.on{background:var(--brand); color:#fff;}
.burger{display:none; border:none; background:transparent; font-size:1.5rem; cursor:pointer; color:var(--ink);}

/* Hero */
.hero{background:radial-gradient(1000px 460px at 78% -8%, var(--brand-100) 0%, transparent 60%),
  linear-gradient(180deg,var(--brand-50),#fff 70%); padding:64px 0 40px; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;}
.badge{display:inline-block; background:#fff; border:1px solid var(--brand-100); color:var(--brand-600);
  font-weight:700; font-size:.85rem; padding:6px 14px; border-radius:20px; margin-bottom:18px;}
.badge.alt{background:var(--brand-50);}
.hero-text h1{font-size:3.1rem; font-weight:900; margin:0 0 18px;}
.hero-sub{font-size:1.18rem; color:#413d4f; margin:0 0 28px; max-width:560px;}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px;}
.stores{display:flex; gap:12px; flex-wrap:wrap;}
.store{display:inline-flex; align-items:center; gap:10px; background:#111017; color:#fff;
  padding:9px 16px; border-radius:12px; font-size:.9rem;}
.store small{display:block; font-size:.65rem; opacity:.75; line-height:1;}
.store b{font-size:.98rem;}
.store-ico{width:22px; height:22px; border-radius:5px; background:#fff; display:inline-block; position:relative; flex:0 0 22px;}
.store-ico::after{content:""; position:absolute; inset:5px; background:#111017; border-radius:50%;}
.store-ico.gp{background:linear-gradient(135deg,#00d2ff,#3a7bd5); color:#fff; display:grid; place-items:center; font-size:.7rem;}
.store-ico.gp::after{display:none;}
.store.dark{background:#fff; color:#111017; border:1px solid var(--line);}
.store.dark .store-ico{background:#111017;} .store.dark .store-ico::after{background:#fff;}

/* Phone mockup */
.hero-phone{display:flex; justify-content:center;}
.phone{width:270px; background:#fff; border-radius:38px; padding:12px; position:relative;
  box-shadow:var(--shadow-lg), 0 0 0 9px #1c1830, 0 0 0 11px #2c2740;}
.phone-notch{position:absolute; top:14px; left:50%; transform:translateX(-50%); width:110px; height:22px; background:#1c1830; border-radius:0 0 14px 14px; z-index:2;}
.phone-screen{background:linear-gradient(180deg,#faf8fe,#fff); border-radius:28px; padding:20px 16px 16px; height:520px; overflow:hidden;}
.ps-bar{display:flex; align-items:center; justify-content:space-between; font-weight:800; font-size:.95rem; margin-top:8px;}
.ps-logo{display:flex; align-items:center; gap:5px;}
.ps-hello{color:var(--muted); font-size:.85rem; margin-top:16px;}
.ps-q{font-size:1.25rem; font-weight:800; margin-bottom:12px;}
.ps-search{display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:11px 12px; color:var(--muted); font-size:.85rem; font-style:normal; margin-bottom:16px;}
.ps-search i{font-style:normal;}
.ps-cats{display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:16px;}
.ps-cat{background:#fff; border:1px solid var(--line); border-radius:13px; padding:10px 4px; text-align:center;}
.ps-cat span{font-size:1.3rem; display:block;}
.ps-cat em{font-style:normal; font-size:.6rem; font-weight:600; color:#544f63;}
.ps-card{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:11px; box-shadow:0 3px 10px rgba(76,29,149,.06);}
.ps-av{width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#6d28d9,#a855f7); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.82rem;}
.ps-cmain{flex:1; display:flex; flex-direction:column; line-height:1.25;}
.ps-cmain b{font-size:.9rem;} .ps-cmain i{font-style:normal; font-size:.72rem; color:var(--muted);}
.ps-cmain span{font-size:.72rem; color:var(--star);}
.ps-price{font-weight:800; font-size:.9rem;}
.ps-fab{margin-top:16px; background:var(--brand); color:#fff; text-align:center; padding:12px;
  border-radius:24px; font-weight:700; font-size:.9rem; box-shadow:0 8px 18px rgba(109,40,217,.35);}

/* Trust strip */
.trust{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:44px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow);}
.trust-item{text-align:center;}
.trust-item b{display:block; font-size:1.7rem; font-weight:900; color:var(--brand);}
.trust-item span{font-size:.86rem; color:var(--muted);}

/* Steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:10px;}
.step{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 24px; text-align:center; box-shadow:var(--shadow);}
.step-num{width:52px; height:52px; margin:0 auto 16px; border-radius:50%; background:var(--brand); color:#fff;
  display:grid; place-items:center; font-weight:900; font-size:1.3rem;}
.step h3{margin:0 0 8px; font-size:1.2rem;}
.step p{margin:0; color:var(--muted);}

/* Categories */
.cat-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}
.cat{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px 14px; text-align:center;
  transition:.16s; cursor:default;}
.cat:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:transparent;}
.cat-ico{font-size:2rem; display:block; margin-bottom:10px;}
.cat b{font-size:.9rem; font-weight:700;}

/* Features */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.feat{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow);}
.feat-ico{width:52px; height:52px; border-radius:14px; background:var(--brand-50); display:grid; place-items:center; font-size:1.5rem; margin-bottom:14px;}
.feat h3{margin:0 0 8px; font-size:1.14rem;}
.feat p{margin:0; color:var(--muted);}

/* Masters */
.masters-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center;}
.ticks{list-style:none; padding:0; margin:0 0 26px; display:flex; flex-direction:column; gap:12px;}
.ticks li{position:relative; padding-left:32px; font-size:1.03rem; color:#413d4f;}
.ticks li::before{content:"✓"; position:absolute; left:0; top:0; width:22px; height:22px; border-radius:50%;
  background:var(--brand-50); color:var(--brand); font-weight:800; font-size:.78rem; display:grid; place-items:center;}
.masters-card{background:linear-gradient(160deg,var(--brand),var(--brand-700)); color:#fff;
  border-radius:24px; padding:30px; box-shadow:var(--shadow-lg);}
.mc-row{display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.15);}
.mc-row span{opacity:.85;} .mc-row b{font-size:1.4rem; font-weight:800;}
.mc-note{margin-top:16px; font-size:.78rem; opacity:.7;}

/* FAQ */
.faq{display:flex; flex-direction:column; gap:12px; margin-top:10px;}
.faq-item{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.faq-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:#fff; border:none; padding:20px 22px; font-size:1.05rem; font-weight:700; text-align:left; cursor:pointer; color:var(--ink); font-family:inherit;}
.faq-plus{font-size:1.5rem; color:var(--brand); transition:.2s; flex:0 0 auto;}
.faq-item.open .faq-plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-item.open .faq-a{max-height:260px;}
.faq-a p{margin:0; padding:0 22px 20px; color:var(--muted);}

/* CTA */
.cta-section{background:radial-gradient(800px 300px at 50% 0%, var(--brand-100), transparent 60%), var(--soft);}
.subscribe{display:flex; gap:10px; justify-content:center; max-width:480px; margin:0 auto 14px; flex-wrap:wrap;}
.subscribe input{flex:1; min-width:220px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; font-size:1rem; outline:none; font-family:inherit;}
.subscribe input:focus{border-color:var(--brand);}
.subscribe-ok{color:var(--ok); font-weight:700; margin-bottom:16px;}
.center-stores{justify-content:center; margin-top:22px;}

/* Footer */
.site-footer{background:#1a1726; color:#c9c3d9;}
.footer-inner{display:flex; justify-content:space-between; gap:40px; padding:52px 22px; flex-wrap:wrap;}
.footer-logo{color:#fff;} .footer-brand p{color:#8f88a6; max-width:260px; margin-top:12px;}
.footer-cols{display:flex; gap:60px; flex-wrap:wrap;}
.fcol h5{color:#fff; margin:0 0 14px; font-size:.95rem;}
.fcol a{display:block; color:#8f88a6; font-size:.9rem; padding:5px 0;}
.fcol a:hover{color:#fff;}
.footer-bottom{border-top:1px solid #2c2740; padding:18px 0; font-size:.83rem; color:#7a7392;}

/* Responsive */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr; text-align:center;}
  .hero-text h1{font-size:2.5rem;} .hero-sub{margin-left:auto; margin-right:auto;}
  .hero-cta,.stores{justify-content:center;}
  .hero-phone{margin-top:20px;}
  .masters-grid{grid-template-columns:1fr; gap:30px;}
  .cat-grid{grid-template-columns:repeat(4,1fr);}
  .feat-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:720px){
  .nav{display:none; position:absolute; top:70px; left:0; right:0; flex-direction:column; gap:0;
    background:#fff; border-bottom:1px solid var(--line); padding:8px 22px; margin:0;}
  .nav.open{display:flex;}
  .nav a{padding:12px 0; border-bottom:1px solid var(--line);}
  .burger{display:block; margin-left:auto;}
  .header-actions .btn{display:none;}
  .steps,.feat-grid{grid-template-columns:1fr;}
  .cat-grid{grid-template-columns:repeat(3,1fr);}
  .trust{grid-template-columns:repeat(2,1fr);}
  h2{font-size:1.7rem;}
}
@media (max-width:420px){
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .hero-text h1{font-size:2.1rem;}
  .footer-cols{gap:32px;}
}