@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/vazirmatn-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/vazirmatn-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/vazirmatn-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/vazirmatn-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/vazirmatn-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #07111f;
  --ink-2: #0e1c2e;
  --navy: #0a2540;
  --blue: #246bfe;
  --blue-2: #4b8aff;
  --cyan: #2ed3c6;
  --mint: #c9fff3;
  --cream: #f6f8fb;
  --white: #fff;
  --text: #10233c;
  --muted: #66758a;
  --line: #e5eaf1;
  --danger: #e34d59;
  --success: #07966b;
  --shadow: 0 20px 60px rgba(9, 29, 54, .11);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: "Vazirmatn", Tahoma, "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
body.layer-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
.container { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
  opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
}

.announcement { background: var(--ink); color: #dfe9f5; font-size: 12px; }
.announcement__inner { min-height: 36px; display: flex; align-items: center; justify-content: space-between; }
.announcement button { border: 0; background: transparent; color: #9fb8d3; font-size: 11px; }
.announcement button span { margin-right: 6px; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(46,211,198,.12); }

.site-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.88); border-bottom: 1px solid rgba(226,232,240,.78); backdrop-filter: blur(16px); }
.nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand__mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: white; background: linear-gradient(145deg, var(--blue), #1743b8); box-shadow: 0 9px 24px rgba(36,107,254,.24); transform: rotate(-2deg); }
.brand__mark svg { width: 29px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.brand b, .brand small { display: block; }
.brand b { font-size: 18px; line-height: 1.2; letter-spacing: -.4px; }
.brand small { color: var(--muted); font-size: 10px; letter-spacing: 2px; line-height: 1.3; }
.main-nav { display: flex; align-items: center; gap: 27px; font-size: 13px; }
.main-nav a { position: relative; color: #40516a; transition: .2s; }
.main-nav a::after { content:""; position:absolute; right:0; left:100%; bottom:-10px; height:2px; background:var(--blue); transition:.25s; }
.main-nav a:hover { color: var(--blue); }
.main-nav a:hover::after { left:0; }
.nav__actions { display: flex; align-items: center; gap: 8px; }
.icon-button, .cart-button, .menu-button { border: 0; background: transparent; }
.text-button { display: inline-flex; align-items: center; gap: 7px; color: #526277; font-size: 12px; }
.button-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 10px; color: var(--blue); }
.cart-button { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 13px; border-radius: 12px; background: var(--ink); color: white; }
.cart-button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cart-button b { font-size: 11px; font-weight: 500; }
.cart-button em { display:grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:7px; background:var(--blue); font-size:10px; font-style:normal; }
.menu-button { display: none; width: 42px; height: 42px; border-radius: 12px; background: #f2f5f9; padding: 11px; }
.menu-button i { display:block; height:2px; margin:4px 0; background:var(--ink); border-radius:3px; }

.hero { position: relative; min-height: 640px; padding: 76px 0 65px; overflow: hidden; background:
  linear-gradient(180deg, #fbfdff 0%, #fff 100%); }
.hero::before { content:""; position:absolute; inset:0; opacity:.55; background-image:linear-gradient(#e8eef6 1px, transparent 1px),linear-gradient(90deg,#e8eef6 1px,transparent 1px); background-size:70px 70px; mask-image:linear-gradient(to left,black,transparent 75%); }
.hero__grid { position:relative; display:grid; grid-template-columns: 1.02fr .98fr; align-items:center; gap:70px; z-index:1; }
.hero__content { padding-top: 5px; }
.eyebrow, .section-kicker { display:inline-flex; align-items:center; gap:7px; color:var(--blue); font-size:12px; font-weight:700; letter-spacing:.2px; }
.eyebrow { padding:7px 11px; border:1px solid #dbe8ff; border-radius:999px; background:#f3f7ff; }
.eyebrow span { color:#13bfa9; }
.hero h1 { margin:20px 0 18px; color:var(--ink); font-size:clamp(45px,5.2vw,70px); font-weight:800; line-height:1.22; letter-spacing:-2px; }
.hero h1 span { position:relative; color:var(--blue); }
.hero h1 span::after { content:""; position:absolute; right:2%; left:0; bottom:-4px; height:9px; opacity:.55; border-radius:100%; border-top:3px solid var(--cyan); transform:rotate(-1deg); }
.hero__content > p { max-width:550px; margin:0; color:var(--muted); font-size:16px; line-height:2; }
.hero__actions { display:flex; align-items:center; gap:20px; margin-top:28px; }
.primary-button, .secondary-button, .light-button, .ghost-button {
  display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:48px; padding:0 20px; border-radius:13px; border:0; font-weight:700; font-size:13px; transition:.22s;
}
.primary-button { background:linear-gradient(135deg,var(--blue),#1650d8); color:white; box-shadow:0 12px 26px rgba(36,107,254,.23); }
.primary-button:hover { transform:translateY(-2px); box-shadow:0 15px 32px rgba(36,107,254,.3); }
.primary-button--wide { width:100%; }
.secondary-button { background:white; color:var(--blue); border:1px solid #cbdcff; }
.secondary-button:hover { background:#f5f8ff; }
.ghost-button { background:#f2f5f8; color:#506176; }
.play-button { display:inline-flex; align-items:center; gap:10px; border:0; background:transparent; color:#45566d; font-size:12px; }
.play-button i { display:grid; place-items:center; width:39px; height:39px; border-radius:50%; color:var(--blue); background:white; box-shadow:0 7px 22px rgba(8,31,61,.12); font-size:10px; font-style:normal; }
.hero__proof { display:flex; align-items:center; gap:13px; margin-top:34px; }
.avatars { display:flex; direction:ltr; }
.avatars span { display:grid; place-items:center; width:29px; height:29px; margin-left:-7px; border:2px solid white; border-radius:50%; color:white; font-size:9px; background:#3c7ef8; }
.avatars span:nth-child(2) { background:#17324f; }
.avatars span:nth-child(3) { background:#17ac9f; }
.avatars span:nth-child(4) { background:#e9eef5; color:#5e6c7e; }
.hero__proof b, .hero__proof small { display:block; }
.hero__proof b { font-size:11px; }
.hero__proof small { color:#8a97a7; font-size:9px; }

.hero__visual { position:relative; min-height:470px; display:grid; place-items:center; }
.visual-glow { position:absolute; width:390px; height:390px; border-radius:50%; background:radial-gradient(circle,#bcecff 0%,#e4f4ff 45%,transparent 72%); filter:blur(5px); opacity:.95; }
.showcase-card { position:relative; width:min(390px,88%); padding:17px; border:1px solid rgba(255,255,255,.85); border-radius:28px; background:rgba(255,255,255,.83); box-shadow:0 35px 80px rgba(20,68,115,.2); backdrop-filter:blur(14px); transform:rotate(-2deg); z-index:2; }
.showcase-card__head { display:flex; align-items:center; justify-content:space-between; padding:0 4px 12px; border-bottom:1px solid var(--line); color:#738197; font-size:10px; }
.showcase-card__head i { font-style:normal; letter-spacing:2px; }
.showcase-card__body > p { margin:14px 2px 10px; color:#283c55; font-size:11px; font-weight:700; }
.mini-product { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; margin:8px 0; padding:12px; border:1px solid #edf1f6; border-radius:15px; background:white; box-shadow:0 7px 20px rgba(15,39,69,.04); }
.product-logo { display:grid; place-items:center; width:39px; height:39px; padding:8px; border:1px solid rgba(16,35,60,.08); border-radius:12px; color:white; background:white; box-shadow:0 5px 14px rgba(16,35,60,.09); font-size:12px; font-weight:800; font-family:"Segoe UI",Arial; }
.product-logo img { width:100%; height:100%; object-fit:contain; }
.logo-ai { background:linear-gradient(135deg,#111b25,#405365); }
.logo-canva { background:linear-gradient(135deg,#00c4cc,#7c2ae8); }
.logo-music { background:linear-gradient(135deg,#1ed760,#0a9b3d); }
.mini-product b,.mini-product small { display:block; }
.mini-product b { color:#20334b; font-size:10px; }
.mini-product small { color:#93a0b0; font-size:8px; }
.mini-product strong { padding:4px 7px; border-radius:7px; background:#eef4ff; color:var(--blue); font-size:8px; }
.showcase-card__footer { display:flex; justify-content:space-between; padding:12px 4px 1px; color:#8a98aa; font-size:8px; }
.showcase-card__footer i { display:inline-block; width:6px; height:6px; border-radius:50%; background:#0ec49e; margin-left:4px; }
.floating-chip { position:absolute; display:flex; align-items:center; gap:10px; min-width:160px; padding:12px 14px; border:1px solid rgba(255,255,255,.9); border-radius:16px; background:rgba(255,255,255,.93); box-shadow:0 18px 42px rgba(12,43,75,.16); z-index:4; animation:float 5s ease-in-out infinite; }
.floating-chip > i { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; color:white; background:var(--success); font-size:12px; font-style:normal; }
.floating-chip b,.floating-chip small { display:block; }
.floating-chip b { font-size:9px; }
.floating-chip small { color:#8896a8; font-size:7px; }
.floating-chip--top { top:44px; right:4px; }
.floating-chip--bottom { bottom:48px; left:-5px; animation-delay:-2s; }
.floating-chip--bottom > i { background:var(--blue); }
.spark { position:absolute; z-index:3; color:#25bba9; }
.spark--one { top:26px; left:80px; font-size:24px; }
.spark--two { right:25px; bottom:90px; color:#467cff; font-size:18px; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.hero__orb { position:absolute; border-radius:50%; filter:blur(2px); }
.hero__orb--one { width:190px; height:190px; right:-90px; top:140px; background:#e5f4ff; }
.hero__orb--two { width:100px; height:100px; left:14%; bottom:-45px; background:#e8fff9; }

.trust-row { border-top:1px solid #eef2f6; border-bottom:1px solid #eef2f6; background:#fbfcfe; }
.trust-row__grid { display:grid; grid-template-columns:repeat(4,1fr); min-height:100px; }
.trust-row__grid > div { display:flex; align-items:center; justify-content:center; gap:13px; border-left:1px solid #e8edf3; }
.trust-row__grid > div:last-child { border-left:0; }
.trust-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:#edf4ff; color:var(--blue); font-weight:700; }
.trust-row p { margin:0; }
.trust-row b,.trust-row small { display:block; }
.trust-row b { font-size:11px; }
.trust-row small { color:#8c98a8; font-size:9px; }

.section { padding:100px 0; }
.products-section { background:#fff; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:32px; }
.section-heading h2,.center-heading h2,.why-copy h2,.faq-copy h2 { margin:8px 0 5px; color:var(--ink); font-size:32px; letter-spacing:-1.2px; }
.section-heading p,.center-heading p,.why-copy > p,.faq-copy > p { margin:0; color:var(--muted); font-size:13px; }
.search-box { display:flex; align-items:center; gap:8px; width:270px; height:45px; padding:0 13px; border:1px solid var(--line); border-radius:13px; background:#fafbfd; transition:.2s; }
.search-box:focus-within { border-color:#9bbcff; box-shadow:0 0 0 4px #eff5ff; }
.search-box svg { width:18px; fill:none; stroke:#8090a3; stroke-width:1.8; }
.search-box input { width:100%; border:0; outline:0; background:transparent; color:var(--text); font-size:12px; }
.category-tabs { display:flex; align-items:center; gap:8px; margin-bottom:27px; overflow-x:auto; scrollbar-width:none; }
.category-tabs::-webkit-scrollbar { display:none; }
.category-tabs button { flex:0 0 auto; min-height:38px; padding:0 16px; border:1px solid var(--line); border-radius:11px; background:#fff; color:#66758a; font-size:11px; transition:.2s; }
.category-tabs button:hover,.category-tabs button.is-active { border-color:var(--ink); background:var(--ink); color:#fff; }
.products-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.product-card { position:relative; overflow:hidden; min-width:0; border:1px solid var(--line); border-radius:19px; background:#fff; transition:.25s; }
.product-card:hover { transform:translateY(-5px); border-color:#cad8ec; box-shadow:0 18px 48px rgba(16,44,78,.1); }
.product-card__visual { position:relative; display:grid; place-items:center; width:100%; height:145px; padding:0; overflow:hidden; border:0; appearance:none; background:var(--card-bg,#eef4ff); cursor:pointer; }
.product-card__visual::before,.product-card__visual::after { content:""; position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.56); }
.product-card__visual::before { width:130px; height:130px; }
.product-card__visual::after { width:85px; height:85px; }
.product-card__logo { position:relative; z-index:1; display:grid; place-items:center; width:70px; height:70px; overflow:hidden; border-radius:21px; color:white; background:var(--card-accent); box-shadow:0 14px 28px rgba(4,23,47,.2); font-family:"Segoe UI",Arial; font-size:20px; font-weight:800; }
.product-card__logo.has-image { padding:13px; border:1px solid rgba(12,31,55,.08); background:white; }
.product-card__logo img { display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; object-position:center; }
.product-card__badge { position:absolute; top:11px; right:11px; z-index:2; padding:5px 8px; border-radius:8px; background:rgba(255,255,255,.9); color:var(--card-accent); font-size:8px; font-weight:700; box-shadow:0 4px 14px rgba(20,30,50,.06); }
.product-card__body { padding:16px; }
.product-card__category { color:var(--blue); font-size:8px; font-weight:700; }
.product-card h3 { margin:3px 0 7px; color:var(--ink); font-size:15px; }
.product-card__desc { height:35px; margin:0; overflow:hidden; color:#788699; font-size:9px; line-height:1.9; }
.product-card__meta { display:flex; gap:8px; margin:12px 0 14px; color:#68778b; font-size:8px; }
.product-card__meta span { padding:4px 7px; border-radius:7px; background:#f4f6f9; }
.product-card__bottom { display:flex; align-items:center; justify-content:space-between; padding-top:13px; border-top:1px solid #eef1f5; }
.price small,.price b { display:block; }
.price small { color:#9aa5b3; font-size:8px; }
.price b { color:var(--ink); font-size:12px; }
.price b span { font-size:8px; font-weight:400; }
.product-card__button { display:grid; place-items:center; width:35px; height:35px; border:0; border-radius:10px; background:var(--ink); color:white; font-size:18px; transition:.2s; }
.product-card__button:hover { background:var(--blue); }
.empty-products { text-align:center; padding:65px 20px; border:1px dashed #d5dde8; border-radius:20px; background:#fafbfd; }
.empty-products > span { color:#90a1b6; font-size:40px; }
.empty-products h3 { margin:8px 0 2px; }
.empty-products p { margin:0 0 18px; color:var(--muted); font-size:12px; }

.why-section { overflow:hidden; background:var(--ink); color:white; }
.why-grid { display:grid; grid-template-columns:1fr .85fr; align-items:center; gap:95px; }
.why-copy .section-kicker { color:#62dbc9; }
.why-copy h2 { color:white; font-size:36px; line-height:1.55; }
.why-copy > p { color:#9aacbf; line-height:2; }
.why-list { margin-top:30px; }
.why-list article { display:flex; gap:16px; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.why-list article > span { color:#4f7397; font-family:"Segoe UI",Arial; font-size:11px; }
.why-list b,.why-list small { display:block; }
.why-list b { margin-bottom:3px; font-size:12px; }
.why-list small { color:#8397ab; font-size:10px; }
.why-panel { position:relative; padding:18px; border:1px solid rgba(255,255,255,.1); border-radius:25px; background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); box-shadow:0 30px 80px rgba(0,0,0,.25); }
.why-panel::before { content:""; position:absolute; width:220px; height:220px; top:-100px; left:-100px; border-radius:50%; background:rgba(35,110,254,.25); filter:blur(30px); }
.why-panel__top { position:relative; display:flex; align-items:center; justify-content:space-between; padding:2px 5px 15px; color:#d8e4f1; font-size:10px; }
.why-panel__top small { color:#7890a7; }
.order-preview { position:relative; padding:18px; border-radius:18px; background:#fff; color:var(--text); }
.order-preview__head { display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid var(--line); font-size:10px; font-weight:700; }
.order-preview__head em { padding:5px 8px; border-radius:8px; background:#fff5d9; color:#a66f00; font-size:8px; font-style:normal; }
.timeline { margin-top:13px; }
.timeline > div { position:relative; display:flex; align-items:center; gap:11px; min-height:51px; }
.timeline > div:not(:last-child)::after { content:""; position:absolute; right:13px; top:36px; height:23px; width:1px; background:#dbe2ea; }
.timeline i { display:grid; place-items:center; flex:0 0 27px; width:27px; height:27px; border:1px solid #dce3ec; border-radius:50%; color:#9aa8b8; font-size:8px; font-style:normal; background:white; }
.timeline .done i { border-color:#bceee2; background:#e8faf5; color:var(--success); }
.timeline .active i { border-color:var(--blue); background:var(--blue); color:white; box-shadow:0 0 0 5px #eaf1ff; }
.timeline b,.timeline small { display:block; }
.timeline b { font-size:9px; }
.timeline small { color:#95a1b0; font-size:8px; }
.support-bubble { position:relative; display:flex; align-items:center; gap:10px; margin-top:12px; padding:12px; border-radius:15px; background:rgba(255,255,255,.07); }
.support-bubble > span { display:grid; place-items:center; width:31px; height:31px; border-radius:10px; background:#1bc0ac; color:white; }
.support-bubble div { flex:1; }
.support-bubble b,.support-bubble small { display:block; }
.support-bubble b { font-size:9px; }
.support-bubble small { color:#7890a7; font-size:8px; }
.support-bubble a { color:#60dccb; font-size:8px; }

.center-heading { text-align:center; margin-bottom:45px; }
.steps { display:flex; align-items:flex-start; }
.steps article { position:relative; flex:1; text-align:center; }
.steps article > i { display:grid; place-items:center; width:68px; height:68px; margin:0 auto 16px; border:1px solid #dce6f4; border-radius:22px; background:#f3f7fd; color:var(--blue); font-size:22px; font-style:normal; box-shadow:inset 0 0 0 7px white; }
.step-number { position:absolute; top:-6px; right:calc(50% - 42px); z-index:2; display:grid; place-items:center; width:21px; height:21px; border-radius:50%; background:var(--ink); color:white; font-size:8px; }
.steps h3 { margin:0 0 5px; color:var(--ink); font-size:12px; }
.steps p { max-width:180px; margin:0 auto; color:#7c8a9c; font-size:9px; }
.step-line { flex:0 0 55px; height:1px; margin-top:34px; border-top:1px dashed #cdd8e5; }

.faq-section { background:#f7f9fc; }
.faq-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:90px; align-items:start; }
.faq-copy { position:sticky; top:120px; }
.faq-copy h2 { line-height:1.55; }
.faq-copy > p { margin-bottom:24px; line-height:2; }
.accordion__item { margin-bottom:10px; overflow:hidden; border:1px solid #e3e8ef; border-radius:15px; background:white; }
.accordion__item > button { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:61px; padding:0 18px; border:0; background:white; color:var(--text); text-align:right; font-size:12px; font-weight:700; }
.accordion__item > button i { display:grid; place-items:center; width:26px; height:26px; border-radius:8px; background:#f0f4fa; color:var(--blue); font-style:normal; }
.accordion__item > div { display:grid; grid-template-rows:0fr; transition:grid-template-rows .25s; }
.accordion__item > div p { min-height:0; overflow:hidden; margin:0; padding:0 18px; color:#718095; font-size:10px; line-height:2; transition:padding .25s; }
.accordion__item.is-open { border-color:#cbdcff; box-shadow:0 8px 30px rgba(15,44,78,.05); }
.accordion__item.is-open > div { grid-template-rows:1fr; }
.accordion__item.is-open > div p { padding:0 18px 17px; }

.cta-section { padding:80px 0; }
.cta-card { position:relative; display:flex; align-items:center; justify-content:space-between; min-height:220px; padding:45px 55px; overflow:hidden; border-radius:30px; background:linear-gradient(120deg,#1458ed,#2a7cff); color:white; box-shadow:0 25px 60px rgba(36,107,254,.2); }
.cta-card::before { content:""; position:absolute; inset:0; opacity:.18; background-image:radial-gradient(#fff 1px,transparent 1px); background-size:24px 24px; mask-image:linear-gradient(to left,black,transparent); }
.cta-card > * { position:relative; z-index:1; }
.cta-card > div > span { color:#c9fff3; font-size:10px; }
.cta-card h2 { margin:8px 0 3px; font-size:28px; }
.cta-card p { margin:0; color:#dbe8ff; font-size:11px; }
.light-button { min-width:150px; background:white; color:var(--blue); box-shadow:0 10px 24px rgba(0,0,0,.12); }
.light-button:hover { transform:translateY(-2px); }
.cta-card__orb { position:absolute!important; width:250px; height:250px; left:-90px; bottom:-150px; border-radius:50%; background:#56dfc7; opacity:.3; }

.site-footer { padding:60px 0 0; background:var(--ink); color:#c7d3e0; }
.footer-grid { display:grid; grid-template-columns:1.7fr repeat(3,1fr); gap:60px; padding-bottom:45px; }
.brand--footer b { color:white; }
.brand--footer small { color:#6f869e; }
.footer-brand p { max-width:290px; color:#71869b; font-size:10px; line-height:2; }
.footer-grid h3 { margin:0 0 15px; color:white; font-size:11px; }
.footer-grid > div > a,.footer-grid > div > button { display:block; margin:8px 0; padding:0; border:0; background:transparent; color:#7f93a7; font-size:10px; transition:.2s; }
.footer-grid > div > a:hover,.footer-grid > div > button:hover { color:white; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; min-height:66px; border-top:1px solid rgba(255,255,255,.07); color:#587086; font-size:9px; }
.footer-bottom div { display:flex; gap:8px; }
.footer-bottom button { padding:0; border:0; background:transparent; color:inherit; }

.backdrop { position:fixed; inset:0; z-index:100; background:rgba(3,11,21,.62); backdrop-filter:blur(4px); opacity:0; transition:opacity .25s; }
.backdrop.is-visible { opacity:1; }
.drawer { position:fixed; z-index:110; top:0; bottom:0; left:0; width:min(440px,100%); padding:25px; background:white; box-shadow:20px 0 70px rgba(0,0,0,.2); transform:translateX(-105%); transition:transform .3s; }
.drawer.is-open { transform:translateX(0); }
.drawer__head { display:flex; align-items:start; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid var(--line); }
.drawer__head h2 { margin:0; color:var(--ink); font-size:20px; }
.drawer__head p { margin:2px 0 0; color:#8b98a8; font-size:10px; }
.close-button { display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:11px; background:#f1f4f8; color:#647388; font-size:22px; line-height:1; transition:.2s; }
.close-button:hover { background:#e5eaf1; color:var(--ink); }
.cart-items { max-height:calc(100vh - 280px); overflow:auto; padding:12px 0; }
.cart-item { display:grid; grid-template-columns:auto 1fr auto; gap:11px; padding:13px 0; border-bottom:1px solid #edf1f5; }
.cart-item__logo { display:grid; place-items:center; width:48px; height:48px; padding:11px; border:1px solid #e3e9f0; border-radius:14px; background:white; color:white; font-weight:800; }
.cart-item__logo img { width:100%; height:100%; object-fit:contain; }
.cart-item h3 { margin:0; font-size:11px; }
.cart-item p { margin:1px 0 3px; color:#8d99a8; font-size:8px; }
.cart-item b { font-size:10px; }
.cart-item button { align-self:start; border:0; background:transparent; color:#a7b1be; font-size:18px; }
.cart-empty { padding:90px 25px; text-align:center; }
.cart-empty > span { display:grid; place-items:center; width:70px; height:70px; margin:0 auto 18px; border-radius:22px; background:#f1f5fb; color:#7b91aa; font-size:30px; }
.cart-empty h3 { margin:0; font-size:15px; }
.cart-empty p { margin:5px 0 20px; color:#8a97a7; font-size:10px; }
.cart-summary { position:absolute; right:25px; left:25px; bottom:25px; padding-top:18px; border-top:1px solid var(--line); }
.cart-summary > div { display:flex; justify-content:space-between; font-size:12px; }
.cart-summary > div b { color:var(--ink); }
.cart-summary > small { display:block; margin:3px 0 13px; color:#9aa6b4; font-size:8px; }

.modal { position:fixed; z-index:120; top:50%; left:50%; width:min(760px,calc(100% - 30px)); max-height:calc(100vh - 30px); overflow:auto; border-radius:24px; background:white; box-shadow:0 30px 90px rgba(0,0,0,.27); opacity:0; pointer-events:none; transform:translate(-50%,-46%) scale(.97); transition:.25s; }
.modal.is-open { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.modal-close { position:absolute; top:16px; left:16px; z-index:3; }
.product-modal { width:min(720px,calc(100% - 30px)); overflow:hidden; }
.product-detail { display:grid; grid-template-columns:.8fr 1.2fr; min-height:450px; }
.product-detail__visual { position:relative; display:grid; place-items:center; overflow:hidden; background:var(--detail-bg); }
.product-detail__visual::before { content:""; position:absolute; width:240px; height:240px; border:1px solid rgba(255,255,255,.55); border-radius:50%; box-shadow:0 0 0 35px rgba(255,255,255,.08); }
.product-detail__visual .product-card__logo { width:95px; height:95px; border-radius:28px; font-size:29px; }
.product-detail__content { padding:42px 34px 30px; }
.product-detail__content .section-kicker { font-size:9px; }
.product-detail__content h2 { margin:5px 0 8px; color:var(--ink); font-size:25px; }
.product-detail__content > p { color:#718096; font-size:10px; line-height:2; }
.detail-features { display:flex; flex-wrap:wrap; gap:7px; margin:16px 0; padding:0; list-style:none; }
.detail-features li { padding:5px 8px; border-radius:8px; background:#eff5ff; color:#3b6cb5; font-size:8px; }
.plans-title { display:block; margin-bottom:7px; font-size:9px; }
.plan-options { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.plan-option { position:relative; display:block; }
.plan-option input { position:absolute; opacity:0; }
.plan-option span { display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:0 11px; border:1px solid var(--line); border-radius:11px; color:#657589; font-size:9px; transition:.2s; }
.plan-option span b { color:var(--ink); font-size:9px; }
.plan-option input:checked + span { border-color:var(--blue); background:#f2f6ff; color:var(--blue); box-shadow:0 0 0 3px #edf3ff; }
.detail-actions { display:flex; align-items:center; gap:13px; margin-top:19px; }
.detail-price { flex:1; }
.detail-price small,.detail-price b { display:block; }
.detail-price small { color:#8b98a8; font-size:8px; }
.detail-price b { font-size:15px; }

.checkout-modal { width:min(920px,calc(100% - 30px)); }
.checkout-head { display:flex; align-items:center; justify-content:space-between; padding:20px 25px; border-bottom:1px solid var(--line); }
.checkout-head > div { display:flex; align-items:center; gap:10px; }
.brand-mini { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:var(--blue); color:white; font-family:"Segoe UI",Arial; font-size:10px; font-weight:800; }
.checkout-head h2 { margin:0; font-size:14px; }
.checkout-head p { margin:0; color:#8b98a8; font-size:8px; }
.checkout-progress { display:flex; justify-content:center; align-items:start; gap:0; padding:18px 20px 5px; background:#fafbfd; }
.checkout-progress > div { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:65px; color:#9aa5b3; font-size:8px; }
.checkout-progress i { display:grid; place-items:center; width:25px; height:25px; border:1px solid #dbe2eb; border-radius:50%; background:white; font-size:8px; font-style:normal; }
.checkout-progress b { width:85px; height:1px; margin-top:12px; background:#dfe5ec; }
.checkout-progress div.is-active { color:var(--blue); }
.checkout-progress div.is-active i,.checkout-progress div.is-done i { border-color:var(--blue); background:var(--blue); color:white; }
.checkout-progress div.is-done { color:#506b8d; }
.checkout-step { display:none; padding:27px 30px 25px; }
.checkout-step.is-active { display:block; }
.form-heading { margin-bottom:18px; }
.form-heading h3 { margin:0; color:var(--ink); font-size:15px; }
.form-heading p { margin:2px 0 0; color:#8a97a8; font-size:9px; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.field { display:block; }
.field--full { grid-column:1/-1; }
.field > span { display:block; margin-bottom:6px; color:#536277; font-size:9px; font-weight:700; }
.field > span em { color:var(--danger); font-style:normal; }
.field > span small { color:#98a4b3; font-size:8px; font-weight:400; }
.field input,.field select,.field textarea { width:100%; border:1px solid #dfe5ed; border-radius:11px; outline:0; background:#fbfcfe; color:var(--text); font-size:10px; transition:.2s; }
.field input,.field select { height:43px; padding:0 12px; }
.field textarea { padding:10px 12px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:#88adff; background:white; box-shadow:0 0 0 3px #eef4ff; }
.field.is-invalid input { border-color:#ef9ca4; background:#fffafa; }
.field-help { display:block; margin-top:4px; color:#98a5b4; font-size:7px; }
.field-error,.standalone-error { display:block; min-height:12px; margin-top:3px; color:var(--danger); font-size:7px; }
.checkout-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.payment-layout { display:grid; grid-template-columns:1.25fr .75fr; gap:27px; }
.bank-card { position:relative; overflow:hidden; max-width:440px; min-height:170px; padding:21px; border-radius:20px; background:linear-gradient(135deg,#0b1a2e,#133a65); color:white; box-shadow:0 17px 40px rgba(10,35,64,.2); }
.bank-card::after { content:""; position:absolute; width:230px; height:230px; left:-80px; top:-90px; border-radius:50%; border:35px solid rgba(59,129,255,.17); }
.bank-card__top,.bank-card__bottom { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; }
.bank-card__top { color:#9fb4ca; font-size:9px; }
.bank-chip { width:31px; height:23px; border-radius:6px; background:linear-gradient(135deg,#ffdf78,#af7a22); }
.bank-card > strong { position:relative; z-index:1; display:block; margin:28px 0 20px; color:#fff; font-family:Consolas,monospace; font-size:20px; font-weight:400; letter-spacing:1.5px; text-align:center; }
.bank-card__bottom small,.bank-card__bottom b { display:block; }
.bank-card__bottom small { color:#7890a9; font-size:7px; }
.bank-card__bottom b { font-size:10px; }
.bank-card__bottom button { position:relative; z-index:2; padding:6px 9px; border:1px solid rgba(255,255,255,.2); border-radius:8px; background:rgba(255,255,255,.07); color:#dce9f7; font-size:7px; }
.payment-note { display:flex; gap:9px; margin:12px 0; padding:9px 10px; border-radius:10px; background:#fff8e7; color:#916a18; }
.payment-note span { display:grid; place-items:center; flex:0 0 19px; width:19px; height:19px; border-radius:50%; background:#f3c85c; color:white; font-size:8px; }
.payment-note p { margin:0; font-size:8px; }
.upload-zone { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:135px; padding:15px; border:1.5px dashed #b9c9dd; border-radius:15px; background:#fafcff; text-align:center; transition:.2s; }
.upload-zone.is-dragging { border-color:var(--blue); background:#f1f6ff; }
.upload-zone input { display:none; }
.upload-zone__icon { display:grid; place-items:center; width:37px; height:37px; margin-bottom:7px; border-radius:11px; background:#eaf1ff; color:var(--blue); font-size:20px; }
.upload-zone b { font-size:9px; }
.upload-zone small { color:#98a5b4; font-size:7px; }
.receipt-preview { display:flex; align-items:center; gap:10px; margin-top:10px; padding:9px; border:1px solid #dbe6ef; border-radius:11px; }
.receipt-preview__thumb { display:grid; place-items:center; width:41px; height:41px; overflow:hidden; border-radius:8px; background:#eff3f8; color:#718197; font-size:8px; }
.receipt-preview__thumb img { width:100%; height:100%; object-fit:cover; }
.receipt-preview > div:nth-child(2) { flex:1; min-width:0; }
.receipt-preview b,.receipt-preview small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.receipt-preview b { font-size:8px; }
.receipt-preview small { color:#97a4b3; font-size:7px; }
.receipt-preview button { border:0; background:transparent; color:var(--danger); font-size:8px; }
.check-field { display:flex; align-items:flex-start; gap:8px; margin-top:10px; color:#68778a; font-size:8px; cursor:pointer; }
.check-field input { position:absolute; opacity:0; }
.check-field > i { display:grid; place-items:center; flex:0 0 17px; width:17px; height:17px; border:1px solid #ccd6e2; border-radius:5px; color:transparent; font-size:8px; font-style:normal; }
.check-field input:checked + i { border-color:var(--blue); background:var(--blue); color:white; }
.check-field button { padding:0; border:0; background:transparent; color:var(--blue); font-size:inherit; }
.checkout-summary { align-self:start; padding:16px; border:1px solid var(--line); border-radius:16px; background:#f8fafc; }
.checkout-summary h3 { margin:0 0 10px; font-size:11px; }
.checkout-line { display:grid; grid-template-columns:1fr auto; gap:10px; padding:9px 0; border-bottom:1px solid #e7ebf0; }
.checkout-line b,.checkout-line small { display:block; }
.checkout-line b { font-size:8px; }
.checkout-line small { color:#8d9aaa; font-size:7px; }
.checkout-line > span:last-child { font-size:8px; }
.checkout-summary__customer { margin-top:12px; padding:10px; border-radius:10px; background:white; color:#68778a; font-size:7px; line-height:2; }
.checkout-summary__customer b { color:var(--ink); }
.checkout-summary__total { display:flex; justify-content:space-between; align-items:center; margin-top:12px; font-size:9px; }
.checkout-summary__total b { color:var(--blue); font-size:12px; }
.success-step { padding:45px 30px; text-align:center; }
.success-icon { display:grid; place-items:center; width:76px; height:76px; margin:0 auto 15px; border-radius:50%; background:#e7faf5; box-shadow:0 0 0 10px #f3fcfa; }
.success-icon i { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--success); color:white; font-size:20px; font-style:normal; }
.success-kicker { color:var(--success); font-size:9px; font-weight:700; }
.success-step h3 { margin:5px 0 2px; color:var(--ink); font-size:22px; }
.success-step > p { margin:0; color:#8390a1; font-size:9px; }
.tracking-code { max-width:380px; margin:20px auto 12px; padding:13px; border:1px dashed #a9b9cb; border-radius:13px; background:#f8fafc; }
.tracking-code small,.tracking-code strong { display:block; }
.tracking-code small { color:#8a98a8; font-size:7px; }
.tracking-code strong { color:var(--blue); font-family:Consolas,monospace; font-size:23px; letter-spacing:1px; }
.tracking-code button { margin-top:4px; border:0; background:transparent; color:#65768b; font-size:7px; }
.success-status { display:flex; align-items:center; gap:10px; max-width:380px; margin:0 auto; padding:11px; border-radius:12px; background:#fff8e8; text-align:right; }
.success-status > span { color:#c38b13; font-size:17px; }
.success-status b,.success-status small { display:block; }
.success-status b { color:#835e10; font-size:8px; }
.success-status small { color:#a08755; font-size:7px; }
.checkout-actions--center { justify-content:center; border-top:0; }

.slim-modal,.guide-modal,.policy-modal { width:min(460px,calc(100% - 30px)); padding:35px; text-align:center; }
.slim-modal__icon { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 12px; border-radius:18px; background:#edf4ff; color:var(--blue); font-size:25px; }
.slim-modal h2,.guide-modal h2,.policy-modal h2 { margin:0; color:var(--ink); font-size:20px; }
.slim-modal > p { margin:4px 0 20px; color:#8794a5; font-size:9px; }
.slim-modal .field { margin:10px 0; text-align:right; }
.track-result { margin-top:15px; padding:14px; border-radius:13px; background:#f3f7fc; text-align:right; }
.track-result__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.track-result__head b { font-family:Consolas,monospace; font-size:11px; }
.track-result__head em { padding:4px 7px; border-radius:7px; background:#fff1c9; color:#946400; font-size:7px; font-style:normal; }
.track-result p { margin:2px 0; color:#67778b; font-size:8px; }
.guide-modal { text-align:right; }
.guide-modal h2 { margin:7px 0 18px; }
.guide-list > div { display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--line); }
.guide-list i { display:grid; place-items:center; flex:0 0 31px; width:31px; height:31px; border-radius:10px; background:#edf4ff; color:var(--blue); font-size:9px; font-style:normal; }
.guide-list p { margin:0; }
.guide-list b,.guide-list small { display:block; }
.guide-list b { font-size:9px; }
.guide-list small { color:#8d99a8; font-size:7px; }
.guide-modal .primary-button { margin-top:18px; }
.policy-modal { text-align:right; }
.policy-modal h2 { margin-bottom:15px; }
.policy-modal #policy-content { max-height:330px; overflow:auto; color:#67778a; font-size:9px; line-height:2.2; }
.policy-modal #policy-content h3 { color:var(--ink); font-size:10px; }
.policy-modal .secondary-button { margin-top:15px; }

.toast { position:fixed; z-index:200; right:50%; bottom:24px; display:flex; align-items:center; gap:8px; min-width:230px; padding:11px 14px; border-radius:12px; background:var(--ink); color:white; box-shadow:0 15px 35px rgba(0,0,0,.2); opacity:0; pointer-events:none; transform:translate(50%,20px); transition:.25s; font-size:9px; }
.toast.is-visible { opacity:1; transform:translate(50%,0); }
.toast i { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--success); font-size:8px; font-style:normal; }

@media (max-width: 1000px) {
  .main-nav { gap:15px; }
  .main-nav a:nth-child(2) { display:none; }
  .hero__grid { gap:25px; }
  .products-grid { grid-template-columns:repeat(3,1fr); }
  .why-grid { gap:50px; }
  .footer-grid { gap:30px; }
}

@media (max-width: 800px) {
  .container { width:min(100% - 28px,680px); }
  .announcement__inner { justify-content:center; }
  .announcement button { display:none; }
  .nav { min-height:66px; }
  .main-nav { position:fixed; top:102px; right:14px; left:14px; display:flex; flex-direction:column; align-items:stretch; gap:0; padding:12px; border:1px solid var(--line); border-radius:17px; background:white; box-shadow:var(--shadow); opacity:0; pointer-events:none; transform:translateY(-10px); transition:.2s; }
  .main-nav.is-open { opacity:1; pointer-events:auto; transform:none; }
  .main-nav a,.main-nav a:nth-child(2) { display:block; padding:10px; }
  .main-nav a::after { display:none; }
  .text-button { display:none; }
  .menu-button { display:block; }
  .cart-button b { display:none; }
  .hero { padding-top:55px; }
  .hero__grid { grid-template-columns:1fr; text-align:center; }
  .hero__content > p { margin-inline:auto; }
  .hero__actions,.hero__proof { justify-content:center; }
  .hero__visual { min-height:430px; }
  .hero::before { mask-image:linear-gradient(to bottom,black,transparent); }
  .trust-row__grid { grid-template-columns:repeat(2,1fr); }
  .trust-row__grid > div { min-height:85px; border-bottom:1px solid #e8edf3; }
  .section { padding:75px 0; }
  .products-grid { grid-template-columns:repeat(2,1fr); }
  .why-grid,.faq-grid { grid-template-columns:1fr; }
  .why-grid { gap:45px; }
  .faq-grid { gap:35px; }
  .faq-copy { position:static; }
  .steps { display:grid; grid-template-columns:repeat(2,1fr); gap:30px; }
  .step-line { display:none; }
  .cta-card { padding:40px; }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
  .product-detail { grid-template-columns:1fr; }
  .product-detail__visual { min-height:190px; }
  .product-detail__content { padding:28px; }
}

@media (max-width: 620px) {
  .brand__mark { width:38px; height:38px; }
  .brand b { font-size:15px; }
  .hero { min-height:0; padding-top:40px; }
  .hero h1 { font-size:40px; letter-spacing:-2px; }
  .hero__content > p { font-size:13px; }
  .hero__actions { flex-direction:column; gap:13px; }
  .hero__proof { margin-top:22px; }
  .hero__visual { min-height:390px; }
  .showcase-card { width:90%; }
  .floating-chip--top { right:-6px; top:25px; }
  .floating-chip--bottom { left:-7px; bottom:29px; }
  .trust-row__grid > div { justify-content:flex-start; padding-right:16px; }
  .section-heading { align-items:stretch; flex-direction:column; }
  .section-heading h2,.center-heading h2,.why-copy h2,.faq-copy h2 { font-size:26px; }
  .search-box { width:100%; }
  .products-grid { grid-template-columns:1fr; }
  .product-card { display:grid; grid-template-columns:125px 1fr; }
  .product-card__visual { height:100%; min-height:190px; }
  .product-card__logo { width:60px; height:60px; padding:11px; border-radius:18px; }
  .product-card__desc { height:auto; max-height:37px; }
  .why-copy h2 { font-size:29px; }
  .steps { grid-template-columns:1fr; gap:35px; }
  .cta-card { flex-direction:column; align-items:flex-start; gap:25px; padding:32px 25px; }
  .cta-card h2 { font-size:23px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px 20px; }
  .footer-brand { grid-column:1/-1; }
  .footer-bottom { flex-direction:column; justify-content:center; gap:4px; }
  .modal { max-height:calc(100vh - 14px); width:calc(100% - 14px); border-radius:20px; }
  .checkout-step { padding:22px 18px; }
  .checkout-head { padding:15px 18px; }
  .checkout-progress b { width:35px; }
  .form-grid,.payment-layout { grid-template-columns:1fr; }
  .payment-layout { gap:18px; }
  .checkout-summary { order:-1; }
  .bank-card > strong { font-size:16px; }
  .checkout-actions { align-items:stretch; flex-direction:column-reverse; }
  .checkout-actions > button,.checkout-actions > .primary-button { width:100%; }
  .product-detail__visual { min-height:150px; }
  .product-detail__visual .product-card__logo { width:75px; height:75px; }
  .product-detail__content { padding:25px 18px; }
  .plan-options { grid-template-columns:1fr; }
  .detail-actions { align-items:stretch; flex-direction:column; }
  .detail-price { width:100%; }
}