/* ===== Reset & base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
:root{
  --navy:#12132b;
  --ink:#1c1f3a;
  --muted:#666a86;
  --bg:#f6f6fb;
  --card:#ffffff;
  --violet:#6d28d9;
  --violet-2:#4338ca;
  --blue:#2563eb;
  --gold:#f59e0b;
  --line:#e6e6f2;
  --radius:18px;
  --radius-sm:12px;
  --shadow: 0 20px 50px -22px rgba(20,22,58,.28);
  --shadow-sm: 0 8px 24px -12px rgba(20,22,58,.22);
}
body{
  font-family:'Vazirmatn', Tahoma, sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.85;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
button, input, select, textarea{ font-family:inherit; font-size:1rem; }
.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}
h1,h2,h3,h4{ font-weight:700; color:var(--navy); line-height:1.4; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 26px; border-radius:999px; font-weight:700; font-size:.95rem;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  border:1.5px solid transparent; cursor:pointer;
}
.btn-primary{
  background:linear-gradient(135deg, var(--violet), var(--blue));
  color:#fff;
  box-shadow:0 14px 30px -12px rgba(109,40,217,.55);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -12px rgba(109,40,217,.65); }
.btn-ghost{
  background:rgba(255,255,255,.08);
  color:#fff;
  border-color:rgba(255,255,255,.35);
  backdrop-filter:blur(4px);
}
.btn-ghost:hover{ background:rgba(255,255,255,.18); transform:translateY(-2px); }
.btn-lg{ padding:15px 32px; font-size:1rem; }
.btn-block{ width:100%; }

/* ===== Topbar ===== */
.topbar{
  background:var(--navy);
  color:#cfd0ef;
  text-align:center;
  font-size:.82rem;
  padding:8px 16px;
}

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.logo{ display:flex; align-items:center; gap:10px; }
.logo-mark svg{ width:38px; height:38px; }
.logo-text{ font-size:1.15rem; font-weight:500; color:var(--navy); }
.logo-text b{ font-weight:900; color:var(--violet-2); }
.logo-text.light{ color:#fff; }
.logo-text.light b{ color:#a78bfa; }

.nav-toggle-input{ display:none; }
.nav-toggle-btn{
  display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:120;
}
.nav-toggle-btn span{ width:24px; height:2px; background:var(--navy); border-radius:2px; transition:.3s; }

.nav-menu{ display:flex; align-items:center; gap:30px; }
.nav-menu a{ font-size:.95rem; color:var(--ink); font-weight:500; transition:color .2s; }
.nav-menu a:hover{ color:var(--violet-2); }
.nav-cta{ margin-inline-start:6px; padding:10px 22px; font-size:.9rem; }

/* ===== Section shared ===== */
main section{ padding:92px 0; position:relative; }
.section-head{ max-width:680px; margin:0 auto 52px; text-align:center; }
.section-head.light h2, .section-head.light .section-sub{ color:#fff; }
.eyebrow{
  display:inline-block; font-size:.82rem; font-weight:700; color:var(--violet-2);
  background:rgba(109,40,217,.08); padding:6px 16px; border-radius:999px; margin-bottom:16px;
}
.section-head h2{ font-size:clamp(1.6rem, 3vw, 2.3rem); margin-bottom:14px; }
.section-sub{ color:var(--muted); font-size:1.02rem; }
.chip{
  display:inline-block; font-size:.85rem; font-weight:600; padding:8px 18px;
  border-radius:999px; margin-bottom:24px;
}
.chip-light{ background:rgba(255,255,255,.12); color:#e7e5ff; border:1px solid rgba(255,255,255,.25); }

/* ===== Hero ===== */
.hero{
  position:relative; padding:130px 0 100px; overflow:hidden; color:#fff;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg svg{ width:100%; height:100%; }
.hero-inner{ position:relative; z-index:1; max-width:820px; }
.hero h1{ color:#fff; font-size:clamp(1.9rem, 4vw, 3rem); margin-bottom:22px; }
.hero-lead{ color:#d6d5f5; font-size:1.08rem; max-width:680px; margin-bottom:34px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px; }
.hero-stats{ display:flex; flex-wrap:wrap; gap:36px; }
.stat{ display:flex; flex-direction:column; gap:4px; }
.stat-num{ font-size:1.8rem; font-weight:900; color:#fff; }
.stat-label{ font-size:.85rem; color:#b9b8e6; }

/* ===== Approach ===== */
.approach-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
}
.approach-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 24px; box-shadow:var(--shadow-sm); transition:transform .25s ease, box-shadow .25s ease;
}
.approach-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.approach-card h3{ font-size:1.05rem; margin:18px 0 10px; }
.approach-card p{ color:var(--muted); font-size:.92rem; }
.a-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:14px; color:#fff;
}
.a-icon svg{ width:26px; height:26px; }
.a-icon-1{ background:linear-gradient(135deg,#7c3aed,#4338ca); }
.a-icon-2{ background:linear-gradient(135deg,#2563eb,#06b6d4); }
.a-icon-3{ background:linear-gradient(135deg,#f59e0b,#ea580c); }
.a-icon-4{ background:linear-gradient(135deg,#ec4899,#7c3aed); }

/* ===== Process ===== */
.process{ background:#fff; }
.process-steps{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:22px;
}
.p-step{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 20px; position:relative;
}
.p-num{
  display:block; font-size:1.6rem; font-weight:900;
  background:linear-gradient(135deg, var(--violet), var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:14px;
}
.p-step h3{ font-size:1rem; margin-bottom:8px; }
.p-step p{ color:var(--muted); font-size:.88rem; }

/* ===== Stores ===== */
.store-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:24px;
}
.store-card{
  background:var(--card); border-radius:var(--radius); padding:28px 24px;
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease; position:relative; overflow:hidden;
}
.store-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:5px;
  background:linear-gradient(90deg, var(--c1,#7c3aed), var(--c2,#2563eb));
}
.store-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.store-top{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.store-icon{
  width:46px; height:46px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg, var(--c1,#7c3aed), var(--c2,#2563eb));
}
.store-icon svg{ width:24px; height:24px; }
.store-tag{ font-size:.8rem; color:var(--muted); font-weight:600; }
.store-card h3{ font-size:1.25rem; margin-bottom:8px; }
.store-card p{ color:var(--muted); font-size:.9rem; margin-bottom:18px; min-height:64px; }
.store-meta{ display:flex; margin-bottom:16px; }
.store-price{
  font-size:.82rem; font-weight:700; color:var(--navy);
  background:var(--bg); padding:6px 14px; border-radius:999px; border:1px solid var(--line);
}
.store-swatch{ display:flex; gap:8px; }
.store-swatch i{ width:22px; height:22px; border-radius:7px; display:block; }
.store-swatch i:nth-child(1){ background:var(--c1,#7c3aed); }
.store-swatch i:nth-child(2){ background:var(--c2,#2563eb); }
.store-swatch i:nth-child(3){ background:var(--c3,#fbbf24); }

.store-1{ --c1:#06b6d4; --c2:#2563eb; --c3:#e0f2fe; }
.store-2{ --c1:#db2777; --c2:#1f2937; --c3:#fce7f3; }
.store-3{ --c1:#f5b6a3; --c2:#c2410c; --c3:#fde8de; }
.store-4{ --c1:#ef4444; --c2:#111827; --c3:#fee2e2; }
.store-5{ --c1:#b45309; --c2:#78350f; --c3:#fde68a; }
.store-6{ --c1:#dc2626; --c2:#1f2937; --c3:#fecaca; }
.store-7{ --c1:#7c3aed; --c2:#0f172a; --c3:#22d3ee; }
.store-8{ --c1:#fb923c; --c2:#92400e; --c3:#fed7aa; }
.store-9{ --c1:#eab308; --c2:#18181b; --c3:#fef08a; }
.store-10{ --c1:#3b82f6; --c2:#1e293b; --c3:#bfdbfe; }

/* ===== UI Kit mock ===== */
.uikit{ background:#fff; }
.mock-window{
  max-width:900px; margin:0 auto; border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow); border:1px solid var(--line);
}
.mock-bar{
  background:#eceefb; display:flex; align-items:center; gap:8px; padding:10px 16px;
}
.mock-bar i{ width:10px; height:10px; border-radius:50%; background:#c9cbe8; display:block; }
.mock-bar span{ margin-inline-start:12px; font-size:.78rem; color:var(--muted); }
.mock-body{ background:#fbfbfe; padding:18px; display:flex; flex-direction:column; gap:14px; }
.mock-header{
  display:flex; align-items:center; justify-content:space-between; padding:10px 14px;
  background:#fff; border:1px solid var(--line); border-radius:10px;
}
.mock-logo{ width:70px; height:14px; border-radius:6px; background:linear-gradient(90deg,var(--violet),var(--blue)); }
.mock-nav{ display:flex; gap:10px; }
.mock-nav i{ width:34px; height:8px; border-radius:4px; background:var(--line); display:block; }
.mock-btn{ width:64px; height:20px; border-radius:999px; background:var(--gold); }
.mock-hero{
  height:150px; border-radius:12px;
  background:linear-gradient(120deg, #3730a3, #2563eb);
  display:flex; align-items:center; padding:0 28px;
}
.mock-hero-text{ display:flex; flex-direction:column; gap:10px; }
.mock-hero-text span{ display:block; height:12px; width:220px; background:rgba(255,255,255,.5); border-radius:6px; }
.mock-hero-text span:nth-child(2){ width:150px; background:rgba(255,255,255,.3); }
.mock-cta{ width:110px !important; height:24px !important; background:#fff !important; border-radius:999px !important; margin-top:6px; }
.mock-cats{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.mock-cats i{ height:44px; border-radius:10px; background:linear-gradient(135deg,#ede9fe,#dbeafe); display:block; }
.mock-products{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.mock-products b{ height:76px; border-radius:10px; background:#fff; border:1px solid var(--line); display:block; }
.mock-banner{ height:56px; border-radius:10px; background:linear-gradient(90deg,#f59e0b,#ec4899); }
.mock-footer{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:14px; background:var(--navy); border-radius:10px; }
.mock-footer i{ height:8px; border-radius:4px; background:rgba(255,255,255,.25); display:block; }
.uikit-labels{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin-top:26px;
}
.uikit-labels span{
  font-size:.82rem; color:var(--muted); position:relative; padding-inline-start:16px;
}
.uikit-labels span::before{
  content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%; background:var(--violet);
}

/* ===== Features ===== */
.feature-cols{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
}
.feature-col{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; box-shadow:var(--shadow-sm);
}
.feature-col h3{ font-size:1.1rem; margin-bottom:16px; color:var(--violet-2); }
.feature-col li{
  color:var(--ink); font-size:.92rem; padding-inline-start:22px; position:relative; margin-bottom:12px;
}
.feature-col li::before{
  content:""; position:absolute; right:0; top:8px; width:8px; height:8px; border-radius:2px;
  background:linear-gradient(135deg,var(--violet),var(--blue));
}

/* ===== Responsive devices ===== */
.responsive{ background:#fff; }
.devices{ display:flex; align-items:flex-end; justify-content:center; gap:40px; flex-wrap:wrap; }
.device{ background:var(--navy); border-radius:20px; padding:10px; box-shadow:var(--shadow); }
.device-screen{ background:#fbfbfe; border-radius:12px; overflow:hidden; padding:10px; display:flex; flex-direction:column; gap:8px; }
.device-desktop{ width:340px; }
.device-desktop .device-screen{ height:200px; }
.device-desktop .device-screen i{ height:26px; border-radius:6px; background:linear-gradient(90deg,var(--violet),var(--blue)); display:block; }
.device-desktop .device-screen b{ height:36px; border-radius:6px; background:#eceefb; display:block; }
.device-tablet{ width:220px; }
.device-tablet .device-screen{ height:280px; }
.device-tablet .device-screen i{ height:60px; border-radius:8px; background:linear-gradient(120deg,#3730a3,#2563eb); display:block; }
.device-tablet .device-screen b{ height:40px; border-radius:8px; background:#eceefb; display:block; }
.device-mobile{ width:140px; }
.device-mobile .device-screen{ height:280px; position:relative; }
.device-mobile .device-screen i{ height:70px; border-radius:8px; background:linear-gradient(120deg,#3730a3,#2563eb); display:block; }
.device-mobile .device-screen b{ height:110px; border-radius:8px; background:#eceefb; display:block; }
.sticky-buy{
  position:absolute; bottom:0; left:0; right:0; height:26px; border-radius:8px;
  background:var(--gold);
}

/* ===== Trust ===== */
.trust{ background:var(--bg); }
.trust-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
}
.trust-item{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:26px 22px;
}
.t-icon{
  display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:12px; background:rgba(37,99,235,.1); color:var(--blue); margin-bottom:14px;
}
.t-icon svg{ width:24px; height:24px; }
.trust-item h4{ font-size:1rem; margin-bottom:8px; }
.trust-item p{ color:var(--muted); font-size:.88rem; }

/* ===== Testimonials ===== */
.testimonials{ background:var(--navy); }
.t-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.t-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius); padding:28px 24px;
}
.t-card p{ color:#d6d5f5; font-size:.94rem; margin-bottom:18px; }
.t-card cite{ color:#a78bfa; font-size:.85rem; font-style:normal; font-weight:600; }

/* ===== Contact ===== */
.contact{ background:#fff; }
.contact-grid{
  display:grid; grid-template-columns:1fr 1.2fr; gap:60px; align-items:start;
}
.contact-info h2{ font-size:clamp(1.5rem,3vw,2.1rem); margin:14px 0 16px; }
.contact-info p{ color:var(--muted); margin-bottom:24px; }
.contact-points li{ display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:.94rem; }
.c-dot{ width:9px; height:9px; border-radius:50%; background:linear-gradient(135deg,var(--violet),var(--blue)); flex:none; }
.contact-form{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px; display:flex; flex-direction:column; gap:18px;
}
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-form label{ display:flex; flex-direction:column; gap:8px; font-size:.88rem; color:var(--muted); font-weight:600; }
.contact-form input, .contact-form select, .contact-form textarea{
  border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:#fff; color:var(--ink);
  resize:vertical;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
  outline:2px solid var(--violet); outline-offset:1px;
}

/* ===== Footer ===== */
.site-footer{ background:var(--navy); color:#c7c8e8; padding-top:64px; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-about p{ font-size:.88rem; margin:16px 0 20px; color:#9fa0c9; }
.footer-col h4{ color:#fff; font-size:.95rem; margin-bottom:16px; }
.footer-col a, .footer-col span{ display:block; font-size:.88rem; margin-bottom:10px; color:#b3b4dd; }
.footer-col a:hover{ color:#fff; }
.social-row{ display:flex; gap:12px; }
.social-row a{
  width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
}
.social-row svg{ width:18px; height:18px; }
.trust-badge{
  display:inline-block; margin-top:6px; padding:8px 14px; border:1px dashed rgba(255,255,255,.3);
  border-radius:8px; font-size:.78rem;
}
.footer-bottom{ padding:24px; text-align:center; font-size:.82rem; color:#8385b8; }

/* ===== Responsive breakpoints ===== */
@media (max-width: 1024px){
  .approach-grid{ grid-template-columns:repeat(2,1fr); }
  .process-steps{ grid-template-columns:repeat(2,1fr); }
  .feature-cols{ grid-template-columns:1fr; }
  .trust-grid{ grid-template-columns:repeat(2,1fr); }
  .t-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 760px){
  main section{ padding:64px 0; }
  .nav-toggle-btn{ display:flex; }
  .nav-menu{
    position:fixed; inset:0 0 0 auto; width:78%; max-width:320px;
    background:#fff; flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:100px 28px 28px; gap:22px; transform:translateX(100%); transition:transform .3s ease;
    box-shadow:-10px 0 30px rgba(0,0,0,.1);
  }
  .nav-toggle-input:checked ~ .nav-menu{ transform:translateX(0); }
  .nav-cta{ width:100%; text-align:center; }
  .hero{ padding:96px 0 70px; }
  .hero-actions{ flex-direction:column; }
  .approach-grid{ grid-template-columns:1fr; }
  .process-steps{ grid-template-columns:1fr; }
  .store-grid{ grid-template-columns:1fr; }
  .trust-grid{ grid-template-columns:1fr; }
  .f-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .devices{ gap:24px; }
  .device-desktop{ width:100%; max-width:300px; }
  .mock-cats{ grid-template-columns:repeat(3,1fr); }
  .mock-products{ grid-template-columns:repeat(2,1fr); }
  .mock-footer{ grid-template-columns:repeat(2,1fr); }
}