/*
 * ظاهر صفحه‌ی معرفی کانال‌یار.
 *
 * تم تیره‌ی ثابت است، نه پیرو تنظیم سیستم: صفحه‌ی فروش باید همه‌جا یک شکل دیده
 * شود، و تصویرهای محصول روی زمینه‌ی تیره بهتر می‌نشینند.
 */

:root {
  --bg:        #0b1020;
  --bg-alt:    #0e142a;
  --surface:   #141b33;
  --surface-2: #1a2340;
  --line:      #263056;
  --text:      #eef1fb;
  --muted:     #9aa5c8;
  --brand:     #4f8cff;
  --brand-2:   #7c5cff;
  --ok:        #34d399;
  --bad:       #f87171;
  --radius:    16px;
  --wrap:      1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* ارقام از IRANYekanXNum و بقیه‌ی متن از IRANSansX؛ ترتیب مهم است، چون
     مرورگر برای هر نویسه اولین خانواده‌ای را می‌گیرد که آن نویسه را دارد و
     unicode-range فونت ارقام فقط ارقام است. */
  font-family: 'IRANYekanXNum', 'IRANSansX', "Segoe UI", Tahoma, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.5; margin: 0 0 .6rem; }
p { margin: 0 0 1rem; }
s { color: var(--muted); }

.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.wrap-narrow { width: min(820px, 100% - 32px); }

/* -------------------------------------------------------------- دکمه‌ها */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.3rem;
  border: 1px solid transparent; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; font: inherit; font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 10px 24px -12px var(--brand); }
.btn-sm  { padding: .45rem 1rem; font-size: .92rem; }
.btn-lg  { padding: .9rem 1.8rem; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); box-shadow: none; }

/* ---------------------------------------------------------------- منو */

.nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; gap: 1.5rem; height: 68px; }
.brand { display: flex; align-items: center; gap: .55rem; color: var(--text); font-weight: 700; font-size: 1.15rem; }
.brand:hover { text-decoration: none; }
.brand-mark {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}
.brand-mark svg { width: 20px; height: 20px; }
.nav-links { display: flex; gap: 1.3rem; margin-inline-start: auto; font-size: .95rem; }
.nav-links a { color: var(--muted); }
.nav-links a:hover { color: var(--text); text-decoration: none; }

/* پیوند ورود مشتری: در کنار دکمه‌ی اصلی، ولی کم‌رنگ‌تر — مشتری تازه باید دکمه‌ی
   «دریافت کلید» را ببیند، مشتری قدیمی خودش دنبال «ورود» می‌گردد. */
.nav-login { color: var(--muted); font-size: .93rem; }
.nav-login:hover { color: var(--text); text-decoration: none; }

/* ---------------------------------------------------------------- هیرو */

.hero { position: relative; overflow: hidden; padding: 4.5rem 0 4rem; }
.glow {
  position: absolute; inset-block-start: -40%; inset-inline-end: -10%;
  width: 720px; height: 720px; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 32%, transparent), transparent 62%);
  filter: blur(10px);
}
.hero-in { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.eyebrow {
  display: inline-block; margin: 0 0 .8rem; padding: .25rem .8rem;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-size: .85rem;
}
.hero h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 800; letter-spacing: -.01em; }
.lead { color: var(--muted); font-size: 1.08rem; max-width: 46ch; }
.lead strong { color: var(--text); }
.lead-strong { color: var(--text); }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 1.4rem; }
.hero-badges { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.hero-badges li {
  padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--muted); font-size: .85rem;
}

/* موکاپ کانال */
.hero-art { position: relative; }
.phone {
  border: 1px solid var(--line); border-radius: 24px; padding: 14px;
  background: linear-gradient(180deg, var(--surface), var(--bg-alt));
  box-shadow: 0 40px 80px -50px #000;
}
.phone-top { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .9rem; padding-bottom: .8rem; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.post { display: flex; gap: .8rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: .8rem; margin-bottom: .7rem; }
.post-dim { opacity: .45; }
.post-img {
  flex: 0 0 76px; height: 76px; border-radius: 10px;
  background: linear-gradient(135deg, #2a3564, #47407e);
}
.post-body { min-width: 0; }
.post-title { margin: 0 0 .25rem; font-weight: 700; }
.post-meta, .post-price { margin: 0 0 .35rem; font-size: .88rem; color: var(--muted); }
.post-price b { color: var(--text); font-size: 1rem; }
.post-btn { display: inline-block; padding: .2rem .7rem; border-radius: 999px; background: var(--brand); color: #fff; font-size: .8rem; }
.chips { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; }
.chip { padding: .3rem .9rem; border-radius: 999px; font-size: .85rem; border: 1px solid var(--line); background: var(--surface); }
.chip-tg { color: #63b3ff; }
.chip-ba { color: #4ad3a2; }
.chip-ru { color: #ff8fb1; }

/* ------------------------------------------------------------- بخش‌ها */

.section { padding: 4.5rem 0; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.strip { padding: 2rem 0 0; }
.sec-title { font-size: clamp(1.5rem, 3vw, 2.1rem); text-align: center; }
.sec-sub { color: var(--muted); text-align: center; max-width: 62ch; margin: 0 auto 2.5rem; }
.sec-title-right, .sec-sub-right { text-align: start; margin-inline: 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }

.pane { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; background: var(--surface); }
.pane h3 { margin-bottom: 1rem; }
.pane-problem { background: color-mix(in srgb, var(--bad) 7%, var(--surface)); }
.pane-solution { background: color-mix(in srgb, var(--ok) 7%, var(--surface)); }

.check { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.check li { position: relative; padding-inline-start: 1.9rem; color: var(--muted); }
.check li strong { color: var(--text); }
.check li::before {
  content: "✓"; position: absolute; inset-inline-start: 0; top: 0;
  color: var(--ok); font-weight: 700;
}
.check-bad li::before { content: "✕"; color: var(--bad); }

/* کارت‌ها */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 1.5rem;
  transition: transform .15s ease, border-color .15s ease;
}
.card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.card h3 { font-size: 1.1rem; }
.card p { color: var(--muted); margin: 0; font-size: .96rem; }
.ico {
  display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: .9rem;
  border-radius: 11px; font-weight: 700;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 25%, transparent), color-mix(in srgb, var(--brand-2) 25%, transparent));
  color: var(--text);
}

/* قدم‌ها */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.steps li { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 1.4rem; }
.steps h3 { font-size: 1.02rem; }
.steps p { color: var(--muted); font-size: .94rem; margin: 0; }
.step-n {
  display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: .8rem;
  border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line);
  color: var(--brand); font-weight: 700;
}

.security { gap: 3rem; }

/* پلن‌ها */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 1.7rem 1.5rem;
}
.plan-featured {
  border-color: color-mix(in srgb, var(--brand) 60%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, var(--surface)), var(--surface));
  box-shadow: 0 30px 60px -45px var(--brand);
}
.plan-tag {
  position: absolute; top: -12px; inset-inline-start: 50%; transform: translateX(50%);
  padding: .15rem .8rem; border-radius: 999px; font-size: .78rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff;
}
.plan h3 { font-size: 1.15rem; }
.plan-price { margin: .3rem 0 1.1rem; }
.plan-price b { font-size: 1.9rem; font-weight: 800; }
.plan-price span { color: var(--muted); font-size: .9rem; }
.plan-ask { color: var(--muted); font-size: 1.05rem; }
.plan-feat { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .5rem; color: var(--muted); font-size: .95rem; }
.plan-feat li { padding-inline-start: 1.4rem; position: relative; }
.plan-feat li::before { content: "•"; position: absolute; inset-inline-start: 0; color: var(--brand); }
.plan .btn { margin-top: auto; }
.plans-note { color: var(--muted); text-align: center; max-width: 66ch; margin: 2rem auto 0; font-size: .95rem; }

/* ---------------------------------------------------------------- فرم */

.get { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.get-alt { color: var(--muted); }
.get-form {
  display: grid; gap: .9rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 1.7rem;
}
.get-form label { display: grid; gap: .35rem; font-size: .93rem; color: var(--muted); }
.opt { font-size: .82rem; opacity: .75; }
.get-form input, .get-form textarea {
  padding: .7rem .9rem; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg-alt); color: var(--text);
  font: inherit; font-size: .98rem;
}
.get-form input:focus, .get-form textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
.get-form textarea { resize: vertical; }
.form-note { color: var(--muted); font-size: .85rem; text-align: center; margin: 0; }
.hp { position: absolute; inset-inline-start: -9999px; height: 0; overflow: hidden; }

.alert { margin: 0; padding: .7rem 1rem; border-radius: 12px; font-size: .95rem; }
.alert-ok  { background: color-mix(in srgb, var(--ok) 16%, transparent);  color: var(--ok);  border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); }
.alert-err { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent); }

/* ------------------------------------------------------------- سؤال‌ها */

details {
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); padding: 1rem 1.2rem; margin-bottom: .8rem;
}
details[open] { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
summary { cursor: pointer; font-weight: 600; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; float: left; color: var(--brand); font-weight: 700; }
details[open] summary::after { content: "−"; }
details p { color: var(--muted); margin: .8rem 0 0; }

/* -------------------------------------------------------------- فوتر */

.foot { border-top: 1px solid var(--line); padding: 2rem 0; background: var(--bg-alt); }
.foot-in { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; color: var(--muted); }
.foot p { margin: 0; }
.foot-links { display: flex; gap: 1.2rem; }


/* نماد اعتماد: روی زمینه‌ی تیره، لوگوی اینماد سفید-پس‌زمینه است، پس داخل یک کارت
   روشن می‌نشیند تا وصله به نظر نرسد. */
.enamad {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px; border-radius: 12px; background: #fff;
  border: 1px solid var(--line); line-height: 0;
}
.enamad img { display: block; width: 84px; height: auto; }

/* ------------------------------------------------------------- واکنش‌گرا */

@media (max-width: 960px) {
  .hero-in, .grid-2, .get { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .nav-links { display: none; }
  /* در موبایل عنوان اول می‌آید و موکاپ بعد از آن؛ پیام باید پیش از تصویر خوانده شود. */
  .hero-art { max-width: 420px; margin-inline: auto; }
}

@media (max-width: 620px) {
  .cards, .steps { grid-template-columns: 1fr; }
  .section { padding: 3rem 0; }
  .lead { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover, .card:hover { transform: none; }
}