@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');

:root { --bg: #111114; --surface: #1a1a1f; --surface-2: #222228; --line: rgba(255,255,255,.1); --text: #f7f6f3; --muted: #a8a7af; --lime: #d8ff66; --purple: #9275ff; --orange: #ff9d69; --green: #7ee2ac; --blue: #78b9ff; --shell: min(1180px, calc(100% - 56px)); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Vazirmatn', Tahoma, sans-serif; line-height: 1.6; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
.shell { width: var(--shell); margin-inline: auto; }
.top-strip { background: #17171b; border-bottom: 1px solid rgba(255,255,255,.06); color: #d4d2db; font-size: 12px; }
.top-strip__inner { min-height: 34px; display: flex; align-items: center; gap: 12px; }
.top-strip a { margin-right: auto; color: var(--lime); }
.top-strip__divider { height: 13px; width: 1px; background: #4b4a52; }
.live-dot, .eyebrow-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(216,255,102,.1); }
.site-header { height: 88px; display: flex; align-items: center; gap: 45px; }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 132px; }
.brand > span:last-child { display: flex; flex-direction: column; line-height: 1; }
.brand strong { font: 800 19px/1 'DM Mono', monospace; letter-spacing: 2px; }
.brand small { color: #85848d; font: 10px/1.5 'DM Mono', monospace; letter-spacing: .7px; margin-top: 5px; }
.brand-mark { width: 30px; height: 30px; border: 2px solid var(--lime); border-radius: 10px 15px 10px 15px; display: grid; place-items: center; transform: rotate(45deg); }
.brand-mark span { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); transform: rotate(-45deg); }
.main-nav { display: flex; align-items: center; gap: 34px; font-size: 14px; color: #a9a8b0; }
.main-nav a { position: relative; padding: 10px 0; transition: color .2s ease; }
.main-nav a:hover, .main-nav a.active { color: var(--text); }
.main-nav a.active::after { content: ''; position: absolute; right: 0; left: 0; bottom: 0; margin: auto; height: 2px; width: 16px; background: var(--lime); border-radius: 2px; }
.header-actions { margin-right: auto; display: flex; gap: 10px; align-items: center; }
.icon-button, .close-button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); background: transparent; color: #dedde3; border-radius: 50%; cursor: pointer; transition: .2s ease; }
.icon-button:hover, .close-button:hover { background: var(--surface-2); border-color: rgba(255,255,255,.22); }
.icon-button svg, .search-field svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.cart-button { border: 0; background: var(--lime); color: #161716; padding: 10px 14px 10px 11px; border-radius: 9px; display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer; font-weight: 700; transition: transform .2s ease, filter .2s ease; }
.cart-button:hover, .primary-button:hover { filter: brightness(1.05); transform: translateY(-2px); }
.cart-button b { font: 11px 'DM Mono', monospace; border-radius: 5px; background: rgba(0,0,0,.12); min-width: 20px; padding: 1px 5px; text-align: center; }
.cart-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.hero { min-height: 535px; border: 1px solid rgba(255,255,255,.11); border-radius: 22px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; background: radial-gradient(circle at 12% 0%, rgba(144,116,255,.2), transparent 36%), linear-gradient(135deg, #17171c 0%, #222127 100%); position: relative; }
.hero::before { content: ''; pointer-events: none; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to left, transparent 0%, black 50%, transparent 100%); }
.hero-copy { position: relative; z-index: 1; padding: 77px 73px 55px 48px; display: flex; flex-direction: column; align-items: flex-start; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--lime); font: 11px 'DM Mono', 'Vazirmatn', monospace; letter-spacing: .3px; }
.hero h1 { margin: 20px 0 15px; font-size: clamp(44px, 5vw, 68px); line-height: 1.2; letter-spacing: -2px; font-weight: 800; }
h1 em, h2 em, .footer-brand em { color: var(--lime); font-style: normal; }
.hero-copy > p { max-width: 395px; color: #b0afb8; font-size: 15px; line-height: 2; margin: 0 0 25px; }
.hero-cta { display: flex; align-items: center; gap: 25px; }
.primary-button { display: inline-flex; justify-content: center; align-items: center; gap: 28px; border: 0; border-radius: 9px; background: var(--lime); color: #191a18; font-size: 13px; font-weight: 800; padding: 14px 17px 14px 12px; cursor: pointer; transition: .2s ease; }
.primary-button span { font-size: 18px; line-height: 1; }
.text-button { border: 0; background: transparent; color: #bab8c1; cursor: pointer; font-size: 12px; padding: 9px 0; }
.text-button span { color: var(--lime); margin-right: 6px; }
.text-button:hover { color: var(--text); }
.hero-meta { display: flex; align-items: center; gap: 11px; margin-top: 58px; color: #b1afb9; }
.hero-meta strong, .hero-meta small { display: block; line-height: 1.5; }
.hero-meta strong { font: 14px 'DM Mono', monospace; color: var(--text); }
.hero-meta small { font-size: 11px; }
.avatar-stack { display: flex; direction: ltr; padding-left: 7px; }
.avatar-stack span { display: grid; place-items: center; width: 27px; height: 27px; margin-left: -7px; color: #151519; background: #d9a1ff; border: 2px solid #292731; border-radius: 50%; font-size: 10px; font-weight: 800; }
.avatar-stack span:nth-child(2) { background: #ffcfa1; }.avatar-stack span:nth-child(3) { background: #9bf2ce; }.avatar-stack span:nth-child(4) { background: #8e84ff; color: #fff; }
.hero-showcase { position: relative; z-index: 1; padding: 68px 64px 50px 25px; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 44% 58%, rgba(194,113,255,.22), transparent 39%); }
.showcase-glow { position: absolute; width: 260px; height: 260px; right: 17%; top: 25%; border-radius: 50%; background: rgba(198,117,255,.15); filter: blur(70px); }
.showcase-header, .showcase-footer { position: relative; display: flex; justify-content: space-between; align-items: center; color: #b0aeb8; font-size: 11px; margin-bottom: 13px; }
.live-label { display: flex; align-items: center; gap: 6px; color: var(--lime); font: 10px 'DM Mono', monospace; }.live-label i { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }
.showcase-main-card { position: relative; display: flex; align-items: center; gap: 14px; min-height: 119px; border-radius: 12px; padding: 20px; background: rgba(39,38,47,.8); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 20px 60px rgba(0,0,0,.23); }
.service-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; font-size: 22px; font-weight: 800; }
.spotify-icon { color: #111; background: #a5f36d; font-size: 29px; line-height: 10px; padding-bottom: 8px; }
.openai-icon { color: #16161a; background: #d5ceff; }.claude-icon { color: #221817; background: #ffb092; }
.showcase-card-copy { display: flex; flex-direction: column; gap: 1px; }.showcase-card-copy small { color: #a6a3ae; font-size: 10px; }.showcase-card-copy strong { font-size: 15px; }.showcase-card-copy span { color: #8d8b94; font-size: 10px; }
.showcase-price { margin-right: auto; text-align: left; display: flex; flex-direction: column; }.showcase-price strong { color: var(--lime); font: 800 26px/1 'DM Mono', monospace; }.showcase-price small { color: #9e9ca6; font-size: 10px; margin-top: 4px; }
.showcase-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }.mini-offer { min-height: 74px; padding: 12px; display: flex; align-items: center; gap: 8px; background: rgba(36,35,43,.65); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; }.mini-offer .service-icon { width: 30px; height: 30px; border-radius: 8px; font-size: 15px; }.mini-offer div:nth-child(2) { display: flex; flex-direction: column; line-height: 1.4; }.mini-offer strong { font-size: 10px; white-space: nowrap; }.mini-offer small { color: #98959f; font-size: 8px; }.mini-offer > b { margin-right: auto; align-self: flex-start; color: var(--lime); font: 10px 'DM Mono', monospace; }
.showcase-footer { margin: 17px 0 0; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.1); font-size: 9px; }.showcase-footer span:last-child { color: var(--lime); }.showcase-footer b { font-size: 14px; margin-right: 4px; }
.trust-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; padding: 45px 32px 42px; border-bottom: 1px solid var(--line); }.trust-item { display: flex; align-items: center; gap: 11px; }.trust-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; }.trust-icon.purple { background: rgba(151,122,255,.17); color: var(--purple); }.trust-icon.orange { background: rgba(255,157,105,.15); color: var(--orange); }.trust-icon.green { background: rgba(126,226,172,.14); color: var(--green); }.trust-icon.blue { background: rgba(120,185,255,.14); color: var(--blue); }.trust-item strong, .trust-item small { display: block; }.trust-item strong { font-size: 12px; }.trust-item small { color: #88868f; font-size: 10px; margin-top: 2px; }
.partner-strip { display: flex; align-items: center; gap: 65px; min-height: 97px; border-bottom: 1px solid var(--line); color: #77757d; font-size: 10px; }.partner-logos { display: flex; justify-content: space-between; align-items: center; flex: 1; color: #77757d; font-size: 13px; direction: ltr; }.partner-logos b { white-space: nowrap; font-weight: 600; opacity: .75; }.partner-logos .partner-spotify { color: #8baf72; }.partner-logos .partner-apple { color: #9d9ba4; }.partner-logos .partner-openai { color: #a39fe3; }.partner-logos .partner-claude { color: #bc8776; }.partner-logos .partner-youtube { color: #af7776; }.partner-logos .partner-canva { color: #6ca5ac; font-style: italic; }
.catalog { padding: 94px 0 110px; }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; }.section-heading h2, .process h2, .faq h2 { margin: 10px 0 0; font-size: 34px; line-height: 1.35; letter-spacing: -.7px; }.section-heading > p { color: #99979f; font-size: 12px; line-height: 2; margin: 0; }.catalog-toolbar { margin-top: 38px; padding-bottom: 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; }.category-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }.category-tab, .filter-button { border: 1px solid transparent; background: transparent; color: #8e8c95; padding: 9px 12px; border-radius: 7px; cursor: pointer; font-size: 11px; transition: .2s ease; }.category-tab span { font: 9px 'DM Mono', monospace; color: #65636b; margin-right: 4px; }.category-tab:hover { color: var(--text); }.category-tab.active { color: #191a18; background: var(--lime); font-weight: 800; }.category-tab.active span { color: #4d5a2c; }.catalog-tools { display: flex; gap: 10px; }.search-field { height: 38px; width: 190px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 7px; padding: 0 11px; color: #8b8991; }.search-field input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 11px; }.search-field input::placeholder { color: #77757d; }.filter-button { width: 118px; border-color: var(--line); display: flex; justify-content: space-between; align-items: center; }.filter-button span { color: var(--lime); font-size: 16px; }.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-top: 20px; }.product-card { min-width: 0; position: relative; border: 1px solid rgba(255,255,255,.09); background: #18181c; border-radius: 11px; padding: 14px; transition: transform .22s ease, border-color .22s ease, background .22s ease; }.product-card:hover { transform: translateY(-5px); background: #1e1e24; border-color: rgba(216,255,102,.35); }.product-top { display: flex; justify-content: space-between; align-items: start; }.product-badge { color: #1a1a1a; background: var(--lime); border-radius: 4px; padding: 3px 6px; font-size: 8px; font-weight: 800; }.product-badge.muted { color: #a9a7ae; background: #27272d; }.product-card .service-icon { width: 44px; height: 44px; border-radius: 12px; font-size: 22px; }.product-card h3 { margin: 17px 0 2px; font-size: 13px; }.product-card .product-desc { color: #85838b; min-height: 34px; margin: 0; font-size: 10px; }.product-divider { height: 1px; background: rgba(255,255,255,.08); margin: 13px 0; }.product-bottom { display: flex; justify-content: space-between; align-items: end; gap: 8px; }.product-price small { color: #817f87; display: block; font-size: 9px; }.product-price strong { color: var(--text); font: 800 18px/1.2 'DM Mono', monospace; }.product-price strong::after { content: ' تومان'; color: #918f97; font: 9px 'Vazirmatn', sans-serif; margin-right: 3px; }.old-price { color: #6f6d75; text-decoration: line-through; font-size: 9px; margin-right: 5px; }.add-button { border: 1px solid rgba(216,255,102,.4); color: var(--lime); background: rgba(216,255,102,.06); border-radius: 7px; padding: 8px 10px; font-size: 10px; cursor: pointer; white-space: nowrap; transition: .2s ease; }.add-button:hover { color: #171717; background: var(--lime); }.add-button.added { background: var(--lime); color: #171717; }.empty-state { text-align: center; padding: 65px 20px; color: #8c8994; }.empty-state span { font-size: 38px; color: var(--lime); }.empty-state h3 { color: var(--text); margin: 10px 0 4px; }.empty-state p { font-size: 12px; margin: 0; }
.process { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 82px 0 86px; display: grid; grid-template-columns: .75fr 1.8fr; gap: 70px; }.process-heading h2 { font-size: 31px; }.process-steps { display: flex; align-items: start; gap: 18px; padding-top: 10px; }.process-step { flex: 1; }.process-step > span { color: var(--lime); font: 12px 'DM Mono', monospace; }.process-step h3 { margin: 20px 0 8px; font-size: 14px; }.process-step p { color: #8d8a94; margin: 0; font-size: 11px; line-height: 1.9; }.process-line { width: 34px; height: 1px; background: #48474e; margin-top: 21px; position: relative; }.process-line::after { content: '↤'; color: #7d7a86; position: absolute; left: -1px; top: -11px; font-size: 13px; }
.faq { padding: 95px 0 110px; }.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 70px; margin-top: 42px; }.faq details { border-top: 1px solid var(--line); padding: 20px 0; }.faq details:last-child, .faq details:nth-last-child(2) { border-bottom: 1px solid var(--line); }.faq summary { cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; }.faq summary::-webkit-details-marker { display: none; }.faq summary span { color: var(--lime); font-size: 20px; line-height: 1; transition: transform .2s ease; }.faq details[open] summary span { transform: rotate(45deg); }.faq details p { color: #8e8b95; font-size: 11px; line-height: 2; margin: 13px 0 0; max-width: 430px; }
.site-footer { border-top: 1px solid var(--line); background: #0d0d10; }.footer-main { display: grid; grid-template-columns: 1.05fr 1.6fr .8fr; gap: 50px; padding: 68px 0 61px; }.footer-brand > p { color: #b0adb7; font-size: 17px; line-height: 1.8; margin: 30px 0 20px; }.socials { display: flex; gap: 8px; direction: ltr; }.socials a { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: #9c99a3; font-size: 13px; }.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }.footer-links div { display: flex; flex-direction: column; gap: 11px; }.footer-links strong { color: #e8e6ed; font-size: 11px; margin-bottom: 6px; }.footer-links a { color: #82808a; font-size: 10px; transition: color .2s ease; }.footer-links a:hover { color: var(--lime); }.footer-contact { padding: 19px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; border: 1px solid rgba(216,255,102,.24); border-radius: 11px; background: rgba(216,255,102,.04); }.footer-contact span { color: var(--lime); font-size: 10px; }.footer-contact strong { font-size: 15px; margin-bottom: 10px; }.footer-contact a { color: #191a18; background: var(--lime); border-radius: 6px; padding: 8px 11px; width: 100%; text-align: center; font-size: 10px; font-weight: 800; }.footer-contact a span { color: #191a18; font-size: 15px; margin-right: 8px; }.footer-bottom { min-height: 52px; border-top: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; justify-content: space-between; color: #63616b; font-size: 9px; }.heart { color: #f47f94; }
.cart-drawer, .modal-wrap { position: fixed; inset: 0; z-index: 20; pointer-events: none; visibility: hidden; }.cart-drawer.open, .modal-wrap.open { pointer-events: auto; visibility: visible; }.drawer-backdrop, .modal-backdrop { position: absolute; inset: 0; background: rgba(5,5,7,.72); opacity: 0; transition: opacity .3s ease; }.drawer-panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(425px, 100%); background: #18181c; border-right: 1px solid var(--line); padding: 32px 28px; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); box-shadow: 20px 0 50px rgba(0,0,0,.3); }.cart-drawer.open .drawer-backdrop, .modal-wrap.open .modal-backdrop { opacity: 1; }.cart-drawer.open .drawer-panel { transform: translateX(0); }.drawer-header { display: flex; justify-content: space-between; align-items: start; border-bottom: 1px solid var(--line); padding-bottom: 22px; }.drawer-header h2 { margin: 6px 0 0; font-size: 25px; }.close-button { font-size: 23px; line-height: 1; }.cart-items { overflow: auto; padding: 16px 0; }.cart-item { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.07); }.cart-item .service-icon { width: 39px; height: 39px; border-radius: 10px; font-size: 17px; }.cart-item-copy { flex: 1; display: flex; flex-direction: column; }.cart-item-copy strong { font-size: 11px; }.cart-item-copy small { color: #8a8790; font-size: 9px; }.cart-item-price { color: var(--lime); font: 11px 'DM Mono', monospace; }.remove-item { color: #77747e; background: none; border: 0; cursor: pointer; font-size: 18px; padding: 5px; }.cart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #88858e; }.cart-empty > span { color: var(--lime); font-size: 46px; }.cart-empty strong { color: var(--text); font-size: 14px; margin-top: 10px; }.cart-empty p { font-size: 11px; margin: 4px 0 10px; }.cart-summary { border-top: 1px solid var(--line); padding-top: 18px; }.cart-summary > div { display: flex; justify-content: space-between; align-items: center; margin-bottom: 17px; font-size: 11px; color: #aaa7b1; }.cart-summary strong { color: var(--lime); font: 16px 'DM Mono', monospace; }.full-button { width: 100%; }.cart-summary small { color: #74727a; display: block; font-size: 9px; text-align: center; margin-top: 10px; }.modal-wrap { display: grid; place-items: center; padding: 20px; }.checkout-modal { position: relative; width: min(470px, 100%); padding: 34px; background: #1b1b20; border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 25px 90px rgba(0,0,0,.5); transform: translateY(15px); opacity: 0; transition: .3s ease; }.modal-wrap.open .checkout-modal { transform: translateY(0); opacity: 1; }.checkout-modal > .close-button { position: absolute; top: 20px; left: 20px; }.checkout-head { margin-bottom: 22px; }.checkout-head h2 { margin: 8px 0 4px; font-size: 26px; }.checkout-head p { color: #96939d; font-size: 11px; margin: 0; }.checkout-modal form { display: flex; flex-direction: column; gap: 13px; }.checkout-modal label { color: #b8b6be; display: flex; flex-direction: column; gap: 6px; font-size: 10px; }.checkout-modal input, .checkout-modal textarea { width: 100%; border: 1px solid var(--line); outline: 0; background: #131316; color: var(--text); border-radius: 7px; padding: 10px 11px; font-size: 11px; resize: vertical; }.checkout-modal input:focus, .checkout-modal textarea:focus { border-color: var(--lime); }.demo-note { color: #aaa1e3; background: rgba(146,117,255,.09); border: 1px solid rgba(146,117,255,.25); border-radius: 7px; padding: 10px; font-size: 9px; line-height: 1.8; }.success-state { text-align: center; padding: 25px 0 10px; }.success-icon { margin: 0 auto 14px; width: 54px; height: 54px; display: grid; place-items: center; background: var(--lime); color: #151515; border-radius: 50%; font-size: 28px; }.success-state h3 { font-size: 19px; margin: 0 0 5px; }.success-state p { color: #99969f; font-size: 11px; line-height: 2; }.success-state strong { color: var(--lime); font-family: 'DM Mono', monospace; }.toast { position: fixed; z-index: 30; left: 25px; bottom: 24px; min-width: 240px; display: flex; align-items: center; gap: 9px; padding: 11px 13px; transform: translateY(20px); opacity: 0; pointer-events: none; background: #26262b; border: 1px solid rgba(216,255,102,.35); border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.3); transition: .3s ease; }.toast.show { transform: translateY(0); opacity: 1; }.toast > span { width: 20px; height: 20px; display: grid; place-items: center; background: var(--lime); color: #171717; border-radius: 50%; font-size: 12px; }.toast p { margin: 0; color: #e4e2e7; font-size: 10px; }
@media (max-width: 980px) { :root { --shell: min(100% - 38px, 750px); }.site-header { gap: 25px; }.main-nav { gap: 18px; }.hero { grid-template-columns: 1fr; }.hero-copy { padding: 58px 47px 35px; }.hero-showcase { padding: 30px 47px 45px; }.trust-row { grid-template-columns: repeat(2, 1fr); padding-inline: 15px; }.partner-strip { gap: 30px; }.partner-logos { flex-wrap: wrap; gap: 17px; }.products-grid { grid-template-columns: repeat(3, 1fr); }.process { grid-template-columns: 1fr; gap: 40px; }.footer-main { grid-template-columns: 1fr 1.8fr; }.footer-contact { grid-column: span 2; }.footer-brand { grid-row: span 2; } }
@media (max-width: 680px) { :root { --shell: calc(100% - 28px); }.top-strip__inner { gap: 7px; font-size: 9px; }.top-strip a { display: none; }.top-strip__divider { height: 10px; }.site-header { height: 74px; justify-content: space-between; }.main-nav { display: none; }.header-actions { margin-right: 0; }.icon-button { display: none; }.cart-button { padding: 9px; font-size: 10px; }.hero { min-height: auto; border-radius: 16px; }.hero-copy { padding: 44px 25px 30px; }.hero h1 { font-size: 46px; }.hero-copy > p { font-size: 12px; }.hero-cta { gap: 16px; }.primary-button { font-size: 11px; padding: 12px 13px 12px 10px; gap: 15px; }.hero-meta { margin-top: 35px; }.hero-showcase { padding: 24px 20px 30px; }.showcase-row { grid-template-columns: 1fr; }.showcase-main-card { padding: 14px; }.showcase-price strong { font-size: 20px; }.trust-row { grid-template-columns: 1fr 1fr; gap: 23px 8px; padding: 30px 0; }.trust-item { gap: 7px; }.trust-icon { width: 32px; height: 32px; font-size: 15px; }.trust-item strong { font-size: 10px; }.trust-item small { font-size: 8px; }.partner-strip { display: block; padding: 24px 0; }.partner-logos { margin-top: 18px; justify-content: flex-start; gap: 15px 25px; }.partner-logos b { font-size: 11px; }.catalog { padding: 65px 0 75px; }.section-heading { align-items: start; flex-direction: column; }.section-heading h2, .process h2, .faq h2 { font-size: 28px; }.section-heading > p { font-size: 10px; }.catalog-toolbar { align-items: stretch; flex-direction: column; margin-top: 28px; }.category-tabs { flex-wrap: nowrap; overflow: auto; padding-bottom: 2px; }.category-tab { white-space: nowrap; font-size: 10px; padding: 8px 9px; }.catalog-tools { width: 100%; }.search-field { flex: 1; width: auto; }.filter-button { width: 110px; }.products-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }.product-card { padding: 11px; }.product-card h3 { font-size: 11px; margin-top: 13px; }.product-card .product-desc { font-size: 9px; min-height: 39px; }.product-card .service-icon { width: 38px; height: 38px; font-size: 18px; }.product-price strong { font-size: 14px; }.product-price strong::after { font-size: 8px; }.add-button { padding: 7px 7px; font-size: 9px; }.process { padding: 64px 0; }.process-steps { flex-direction: column; gap: 23px; }.process-line { width: 1px; height: 22px; margin-right: 15px; margin-top: 0; }.process-line::after { top: -5px; left: -6px; transform: rotate(-90deg); }.process-step { width: 100%; }.process-step h3 { margin: 9px 0 3px; font-size: 12px; }.process-step p { font-size: 10px; }.faq { padding: 67px 0 78px; }.faq-grid { grid-template-columns: 1fr; gap: 0; margin-top: 26px; }.faq details:nth-last-child(2) { border-bottom: 0; }.faq summary { font-size: 11px; }.footer-main { grid-template-columns: 1fr 1fr; gap: 36px 18px; padding: 48px 0; }.footer-brand { grid-column: span 2; grid-row: auto; }.footer-links { grid-column: span 2; gap: 8px; }.footer-contact { grid-column: span 2; }.footer-bottom { align-items: start; flex-direction: column; justify-content: center; gap: 5px; padding: 14px 0; font-size: 8px; }.drawer-panel { padding: 25px 20px; }.checkout-modal { padding: 27px 20px; } }

/* Keep compact catalog prices easy to scan on every screen. */
.product-price strong::after { content: ' هزار تومان'; }

.login-button { border: 1px solid rgba(216,255,102,.35); color: var(--lime); background: rgba(216,255,102,.05); border-radius: 8px; padding: 9px 12px; font-size: 11px; cursor: pointer; transition: .2s ease; }
.login-button:hover { background: var(--lime); color: #191a18; }
.auth-modal { max-width: 430px; }
.auth-back-button { display: block; margin: 8px auto 0; }
.auth-error { min-height: 18px; color: #ff9aa8; font-size: 10px; text-align: center; margin: 13px 0 0; }
@media (max-width: 680px) { .login-button { padding: 8px 9px; font-size: 9px; } }

.product-price strong::after { content: ''; }
.price-cadence { color: #918f97; font-size: 9px; margin-right: 4px; }
.brand-icon { width: 23px; height: 23px; display: block; object-fit: contain; }
.cart-item .brand-icon { width: 20px; height: 20px; }
.showcase-main-card .brand-icon { width: 24px; height: 24px; }
.mini-offer .brand-icon { width: 16px; height: 16px; }
.pricing-note { display: block; margin-top: 11px; color: #77747d; font-size: 10px; }
.pricing-note a { color: var(--lime); }
.partner-logos img { width: 17px; height: 17px; object-fit: contain; vertical-align: middle; margin-left: 5px; }

/* Production checkout and the white storefront theme. */
.hero { grid-template-columns: 1fr; }
.hero-copy { max-width: 760px; }
.hero-proof { display: flex; align-items: center; gap: 10px; }
.hero-proof > span { width: 34px; height: 34px; display: grid; place-items: center; color: #171717; background: var(--lime); border-radius: 50%; font-weight: 800; }
.hero-proof strong, .hero-proof small { display: block; }
.hero-proof strong { font-size: 12px; }
.hero-proof small { color: #aaa7b1; font-size: 10px; }
.theme-toggle span { font-size: 16px; line-height: 1; }
.payment-box { border: 1px solid rgba(216,255,102,.35); background: rgba(216,255,102,.06); border-radius: 10px; padding: 14px; }
.payment-box-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.payment-box-head > span:last-child { color: var(--lime); font-size: 9px; }
.payment-box > strong { display: block; margin-top: 8px; font-size: 11px; }
.payment-card-number { direction: ltr; letter-spacing: 1.2px; color: var(--lime); font: 800 18px/1.5 'DM Mono', monospace; margin-top: 4px; }
.payment-box small { color: #9c99a3; font-size: 9px; }
.payment-box p { margin: 10px 0 0; color: #aaa7b1; font-size: 10px; }
.payment-box p b { color: var(--lime); font-family: 'DM Mono', monospace; }
.file-field input[type='file'] { padding: 8px; }
.file-field small { color: #8d8a94; font-size: 9px; }

html[data-theme='light'] {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #eef2f7;
  --line: #e1e6ef;
  --text: #17202e;
  --muted: #667085;
  --lime: #a5d94f;
  --purple: #7861e9;
  --orange: #e78751;
  --green: #43a875;
  --blue: #4d91dc;
}
html[data-theme='light'] body { background: var(--bg); color: var(--text); }
html[data-theme='light'] .top-strip { background: #eef2f7; border-bottom-color: var(--line); color: #667085; }
html[data-theme='light'] .top-strip__divider { background: #c4ccd8; }
html[data-theme='light'] .top-strip a { color: #568b1c; }
html[data-theme='light'] .brand-mark { border-color: #8fc63f; }
html[data-theme='light'] .brand-mark span { background: #8fc63f; }
html[data-theme='light'] .main-nav a { color: #667085; }
html[data-theme='light'] .main-nav a:hover, html[data-theme='light'] .main-nav a.active { color: var(--text); }
html[data-theme='light'] .icon-button, html[data-theme='light'] .close-button { color: #475467; border-color: var(--line); }
html[data-theme='light'] .icon-button:hover, html[data-theme='light'] .close-button:hover { background: var(--surface-2); border-color: #c7d0dd; }
html[data-theme='light'] .login-button { color: #5d8a1c; border-color: #cfe7a8; background: #f3fae9; }
html[data-theme='light'] .cart-button { color: #17202e; background: var(--lime); }
html[data-theme='light'] .hero { border-color: #dfe5ee; background: radial-gradient(circle at 10% 0%, rgba(120,97,233,.12), transparent 35%), linear-gradient(135deg, #ffffff 0%, #edf5ff 100%); box-shadow: 0 18px 60px rgba(53,72,105,.09); }
html[data-theme='light'] .hero::before { background-image: linear-gradient(rgba(100,116,139,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(100,116,139,.08) 1px, transparent 1px); }
html[data-theme='light'] .hero-copy > p, html[data-theme='light'] .hero-meta { color: #667085; }
html[data-theme='light'] .hero-meta strong { color: var(--text); }
html[data-theme='light'] .hero-proof small { color: #667085; }
html[data-theme='light'] .trust-row, html[data-theme='light'] .partner-strip, html[data-theme='light'] .process, html[data-theme='light'] .faq, html[data-theme='light'] .catalog-toolbar { border-color: var(--line); }
html[data-theme='light'] .trust-item small, html[data-theme='light'] .partner-strip, html[data-theme='light'] .section-heading > p, html[data-theme='light'] .process-step p, html[data-theme='light'] .faq details p { color: #667085; }
html[data-theme='light'] .partner-logos { color: #667085; }
html[data-theme='light'] .category-tab, html[data-theme='light'] .filter-button { color: #667085; }
html[data-theme='light'] .category-tab:hover { color: var(--text); }
html[data-theme='light'] .category-tab span { color: #98a2b3; }
html[data-theme='light'] .search-field { border-color: var(--line); color: #98a2b3; background: #fff; }
html[data-theme='light'] .search-field input { color: var(--text); }
html[data-theme='light'] .search-field input::placeholder { color: #98a2b3; }
html[data-theme='light'] .filter-button { border-color: var(--line); }
html[data-theme='light'] .product-card { border-color: var(--line); background: #fff; box-shadow: 0 7px 22px rgba(37,55,82,.05); }
html[data-theme='light'] .product-card:hover { background: #fff; border-color: #b9dc7f; box-shadow: 0 14px 30px rgba(37,55,82,.1); }
html[data-theme='light'] .product-card .product-desc, html[data-theme='light'] .product-price small, html[data-theme='light'] .pricing-note { color: #667085; }
html[data-theme='light'] .product-divider { background: var(--line); }
html[data-theme='light'] .product-price strong { color: var(--text); }
html[data-theme='light'] .add-button { color: #5d8a1c; border-color: #c6e596; background: #f4faea; }
html[data-theme='light'] .add-button:hover, html[data-theme='light'] .add-button.added { color: #17202e; background: var(--lime); }
html[data-theme='light'] .empty-state, html[data-theme='light'] .process-line::after { color: #667085; }
html[data-theme='light'] .process-line { background: #c7d0dd; }
html[data-theme='light'] .faq summary { color: var(--text); }
html[data-theme='light'] .site-footer { background: #eaf0f7; border-color: var(--line); }
html[data-theme='light'] .footer-brand > p { color: #667085; }
html[data-theme='light'] .footer-links strong { color: var(--text); }
html[data-theme='light'] .footer-links a, html[data-theme='light'] .socials a { color: #667085; }
html[data-theme='light'] .socials a { border-color: #d4dce7; }
html[data-theme='light'] .footer-contact { border-color: #cfe7a8; background: #f3fae9; }
html[data-theme='light'] .footer-bottom { border-color: var(--line); color: #98a2b3; }
html[data-theme='light'] .drawer-backdrop, html[data-theme='light'] .modal-backdrop { background: rgba(23,32,46,.35); }
html[data-theme='light'] .drawer-panel, html[data-theme='light'] .checkout-modal { background: #fff; border-color: var(--line); box-shadow: 0 25px 90px rgba(37,55,82,.18); }
html[data-theme='light'] .cart-item { border-color: var(--line); }
html[data-theme='light'] .cart-item-copy small, html[data-theme='light'] .cart-empty, html[data-theme='light'] .cart-summary > div, html[data-theme='light'] .cart-summary small, html[data-theme='light'] .checkout-head p, html[data-theme='light'] .checkout-modal label { color: #667085; }
html[data-theme='light'] .cart-empty strong, html[data-theme='light'] .drawer-header h2, html[data-theme='light'] .checkout-head h2 { color: var(--text); }
html[data-theme='light'] .checkout-modal input, html[data-theme='light'] .checkout-modal textarea { background: #f8fafc; color: var(--text); border-color: var(--line); }
html[data-theme='light'] .checkout-modal input:focus, html[data-theme='light'] .checkout-modal textarea:focus { border-color: #9dcc54; }
html[data-theme='light'] .payment-box { background: #f3fae9; border-color: #cfe7a8; }
html[data-theme='light'] .payment-box p, html[data-theme='light'] .payment-box small { color: #667085; }
html[data-theme='light'] .payment-card-number { color: #568b1c; }
html[data-theme='light'] .payment-box-head > span:last-child, html[data-theme='light'] .payment-box p b { color: #568b1c; }
html[data-theme='light'] .toast { background: #fff; border-color: #cfe7a8; box-shadow: 0 12px 40px rgba(37,55,82,.16); }
html[data-theme='light'] .toast p { color: var(--text); }