@font-face { font-family:'IRANSansX'; src:url('/landing/assets/fonts/IRANSansXFaNum-Light.woff2')     format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'IRANSansX'; src:url('/landing/assets/fonts/IRANSansXFaNum-Regular.woff2')   format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'IRANSansX'; src:url('/landing/assets/fonts/IRANSansXFaNum-Medium.woff2')    format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'IRANSansX'; src:url('/landing/assets/fonts/IRANSansXFaNum-DemiBold.woff2')  format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'IRANSansX'; src:url('/landing/assets/fonts/IRANSansXFaNum-Bold.woff2')      format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'IRANSansX'; src:url('/landing/assets/fonts/IRANSansXFaNum-ExtraBold.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'IRANSansX'; src:url('/landing/assets/fonts/IRANSansXFaNum-Black.woff2')     format('woff2'); font-weight:900; font-style:normal; font-display:swap; }

:root {
  --blue:       #06A2FF;
  --blue-dot:   #00B4FF;

  --ink:        #121212;
  --body:       #525252;
  --label:      #989898;
  --muted:      #7C7C7C;

  --line:       #E1E1E1;
  --edge:       #DCDCDC;
  --bg:         #F7F7F7;
  --card:       #FFFFFF;
  --hero-plate: #F2F2F5;
  --tab-idle:   #F0F0F0;
  --dark:       #121212;
  --dark-rule:  #BCBCBC;

  --wrap:      920px;
  --wrap-wide: 1256px;
  --gutter:     20px;
  --sec-gap:    48px;
  --sec-pad:    32px;

  --r-hero:     24px;
  --r-card:     20px;
  --r-course:   12px;
  --r-btn:      12px;
  --r-btn-md:   10px;
  --r-btn-sm:    7px;
  --r-pill:    999px;

  --t-xs:  11px;
  --t-sm:  13px;
  --t-md:  15px;
  --t-lg:  24px;
  --t-h1:  38px;
  --t-num: 72px;

  --sh-card: 0 2px 4px rgba(0,0,0,.06), 0 0 10px 1px rgba(227,227,224,.5);
  --sh-tab:  0 2px 4px rgba(0,0,0,.02);

  --footer-bg: #121212;
  --cta-overlap: 48px;
  --elev-3: 0 24px 60px rgba(18,30,60,.22);
  --fs-body: 15px;  --lh-body: 24px;
  --fs-h2:   24px;  --lh-h2:   32px;
  --fs-small:13px;  --lh-small:22px;
  --w-reg:  400;    --w-demi:  600;
  --t-disabled: #BDBDBD;
  --t-heading:  #121212;
  --ease-out: cubic-bezier(.22, .8, .3, 1);
}

@media (max-width: 760px) {
  :root { --cta-overlap: 90px; }

  :root { --sec-gap: 32px; }
}

:root {

  --azk-brand:            #06A2FF;
  --azk-brand-hover:      #1EBEFF;
  --azk-brand-active:     #008FFF;
  --azk-brand-bg:         #F5FDFF;
  --azk-brand-bg-hover:   #D6F5FF;
  --azk-brand-border:     #B5F0FF;
  --azk-brand-text:       #086CC5;
  --azk-brand-text-active:#0E385D;

  --azk-ink:              #121212;
  --azk-ink-hover:        #989898;
  --azk-ink-active:       #656565;
  --azk-ink-pressed-text: #3D3D3D;
  --azk-text-disabled:    #7C7C7C;
  --azk-text-light:       #F7F7F7;
  --azk-border:           #BDBDBD;
  --azk-border-secondary: #DCDCDC;
  --azk-bg-container:     #FFFFFF;

  --azk-fill-quaternary:  rgba(0, 0, 0, .02);
  --azk-fill-tertiary:    rgba(0, 0, 0, .04);
  --azk-fill-secondary:   rgba(0, 0, 0, .06);

  --azk-error:            #FF4D4F;
  --azk-error-hover:      #FF7875;
  --azk-error-active:     #F5222D;
  --azk-error-bg:         #FFF1F0;
  --azk-error-border-hover:#FFA39E;

  --azk-space-1:  4px;
  --azk-space-2:  8px;
  --azk-space-3: 12px;
  --azk-space-4: 16px;
  --azk-space-5: 20px;
  --azk-space-6: 24px;
  --azk-space-7: 32px;
  --azk-space-8: 48px;

  --azk-radius-sm:   7px;
  --azk-radius:     10px;
  --azk-radius-lg:  12px;
  --azk-radius-card:20px;
  --azk-radius-xl:  24px;
  --azk-radius-pill:999px;

  --azk-line:        1px;

  --azk-t-xs-size:   11px; --azk-t-xs-line:   20px;
  --azk-t-sm-size:   13px; --azk-t-sm-line:   22px;
  --azk-t-md-size:   15px; --azk-t-md-line:   24px;
  --azk-t-lg-size:   20px; --azk-t-lg-line:   28px;
  --azk-t-xl-size:   24px; --azk-t-xl-line:   32px;
  --azk-t-2xl-size:  30px; --azk-t-2xl-line:  38px;
  --azk-t-3xl-size:  38px; --azk-t-3xl-line:  46px;
  --azk-w-regular:   400;
  --azk-w-demi:      600;
  --azk-w-bold:      700;

  --azk-color-accent:        var(--azk-brand);
  --azk-color-text:          var(--azk-ink);
  --azk-color-text-muted:    var(--azk-text-disabled);
  --azk-color-surface:       var(--azk-bg-container);
  --azk-color-border:        var(--azk-border-secondary);

  --azk-focus-ring: 3px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'IRANSansX', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-sm);
  line-height: 22px;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px;
}

@media print {
  body { background: #fff; }
}

main { display: flex; flex-direction: column; gap: var(--sec-gap); }
main > section { padding-block: var(--sec-pad); }

.azk-wrap {
  width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto; padding-inline: var(--gutter);
}
.azk-wrap-wide { max-width: calc(var(--wrap-wide) + 2 * var(--gutter)); }

.azk-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

.azk-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--t-md); line-height: 24px; color: var(--label);
  margin-block-end: 12px;
}
.azk-eyebrow::before {
  content: ''; flex: none; width: 5px; height: 5px;
  border-radius: 50%; background: var(--blue-dot);
}

.azk-h2 { font-size: var(--t-lg); line-height: 32px; font-weight: 600; color: var(--ink); }
.azk-h2 b, .azk-accent { color: var(--blue); font-weight: inherit; }

.azk-button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--azk-space-1);
  height: 40px;
  padding-inline: var(--azk-space-4);
  border-radius: var(--azk-radius);
  border: var(--azk-line) solid transparent;
  font-size: var(--azk-t-md-size); line-height: var(--azk-t-md-line);
  font-weight: var(--azk-w-regular);
  white-space: nowrap; text-align: center;
  background: var(--azk-button-bg, transparent);
  border-color: var(--azk-button-border, transparent);
  color: var(--azk-button-fg, var(--azk-ink));
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.azk-button-label { padding-inline: var(--azk-space-1); }

.azk-button-icon-glyph { flex: none; width: 16px; height: 16px; }

.azk-button--sm {
  height: 32px; padding-inline: var(--azk-space-3);
  border-radius: var(--azk-radius-sm);
  font-size: var(--azk-t-sm-size); line-height: var(--azk-t-sm-line);
}
.azk-button--lg {
  height: 48px;
  border-radius: var(--azk-radius-lg);
}

.azk-button--icon-only { width: 40px; padding-inline: 0; }
.azk-button--icon-only.azk-button--sm { width: 32px; }
.azk-button--icon-only.azk-button--lg { width: 48px; }

.azk-button--primary               { --azk-button-bg: var(--azk-ink);        --azk-button-fg: #FFFFFF; }
.azk-button--primary:hover         { --azk-button-bg: var(--azk-ink-hover);  --azk-button-fg: var(--azk-text-light); }
.azk-button--primary:active        { --azk-button-bg: var(--azk-ink-active); --azk-button-border: var(--azk-ink-active);
                                  --azk-button-fg: var(--azk-text-light); }

.azk-button--outline               { --azk-button-bg: var(--azk-bg-container); --azk-button-border: var(--azk-ink);
                                  --azk-button-fg: var(--azk-ink); }
.azk-button--outline:hover         { --azk-button-bg: var(--azk-fill-quaternary); }
.azk-button--outline:active        { --azk-button-bg: var(--azk-fill-tertiary); --azk-button-border: var(--azk-ink-active);
                                  --azk-button-fg: var(--azk-ink-pressed-text); }

.azk-button--brand                 { --azk-button-bg: var(--azk-brand);        --azk-button-fg: #FFFFFF; }
.azk-button--brand:hover           { --azk-button-bg: var(--azk-brand-hover);  --azk-button-fg: var(--azk-text-light); }
.azk-button--brand:active          { --azk-button-bg: var(--azk-brand-active); --azk-button-fg: var(--azk-text-light); }

.azk-button--text                  { --azk-button-fg: var(--azk-ink); }
.azk-button--text:hover            { --azk-button-fg: var(--azk-ink-hover); }
.azk-button--text:active           { --azk-button-fg: var(--azk-text-disabled); }

.azk-button--primary.azk-button--ghost        { --azk-button-bg: var(--azk-fill-quaternary); --azk-button-fg: var(--azk-ink); }
.azk-button--primary.azk-button--ghost:hover  { --azk-button-bg: var(--azk-fill-tertiary); }
.azk-button--primary.azk-button--ghost:active { --azk-button-bg: var(--azk-fill-secondary); }

.azk-button--outline.azk-button--ghost        { --azk-button-border: var(--azk-border-secondary); }
.azk-button--outline.azk-button--ghost:hover  { --azk-button-bg: var(--azk-fill-quaternary); --azk-button-border: var(--azk-border-secondary);
                                          --azk-button-fg: var(--azk-ink); }
.azk-button--outline.azk-button--ghost:active { --azk-button-bg: var(--azk-fill-tertiary); --azk-button-border: var(--azk-ink-active);
                                          --azk-button-fg: var(--azk-ink-active); }

.azk-button--brand.azk-button--ghost          { --azk-button-bg: var(--azk-brand-bg); --azk-button-fg: var(--azk-brand-active); }
.azk-button--brand.azk-button--ghost:hover    { --azk-button-bg: var(--azk-brand-bg-hover); --azk-button-fg: var(--azk-brand-active); }
.azk-button--brand.azk-button--ghost:active   { --azk-button-bg: var(--azk-brand-bg-hover); --azk-button-fg: var(--azk-brand-text-active); }

.azk-button--primary.azk-button--danger        { --azk-button-bg: var(--azk-error);        --azk-button-fg: var(--azk-text-light); }
.azk-button--primary.azk-button--danger:hover  { --azk-button-bg: var(--azk-error-hover); }
.azk-button--primary.azk-button--danger:active { --azk-button-bg: var(--azk-error-active); --azk-button-border: transparent; }

.azk-button--outline.azk-button--danger        { --azk-button-bg: var(--azk-bg-container); --azk-button-border: var(--azk-error);
                                           --azk-button-fg: var(--azk-error); }
.azk-button--outline.azk-button--danger:hover  { --azk-button-bg: var(--azk-error-bg); --azk-button-border: var(--azk-error-border-hover); }
.azk-button--outline.azk-button--danger:active { --azk-button-bg: var(--azk-bg-container); --azk-button-border: var(--azk-error-border-hover);
                                           --azk-button-fg: var(--azk-error-active); }

.azk-button--text.azk-button--danger           { --azk-button-fg: var(--azk-error); }
.azk-button--text.azk-button--danger:hover     { --azk-button-bg: var(--azk-error-bg); --azk-button-fg: var(--azk-error-hover); }
.azk-button--text.azk-button--danger:active    { --azk-button-bg: transparent; --azk-button-fg: var(--azk-error-active); }

.azk-button[disabled],
.azk-button[aria-disabled="true"] {
  --azk-button-bg: var(--azk-fill-quaternary);
  --azk-button-border: var(--azk-border-secondary);
  --azk-button-fg: var(--azk-border);
  cursor: not-allowed; pointer-events: none;
}
.azk-button--text[disabled],
.azk-button--text[aria-disabled="true"] { --azk-button-bg: transparent; --azk-button-border: transparent; }

.azk-button[data-loading="true"] { position: relative; pointer-events: none; }
.azk-button[data-loading="true"] > * { visibility: hidden; }
.azk-button[data-loading="true"]::after {
  content: ''; position: absolute; inset: 50% auto auto 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid currentColor; border-inline-start-color: transparent;
  border-radius: 50%;
  animation: azk-button-spin .7s linear infinite;
}
@keyframes azk-button-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .azk-button[data-loading="true"]::after { animation-duration: 2.4s; }
}

.azk-closing-cta { padding-block: 0; }
.azk-closing-cta .azk-closing-cta-band { margin-block-start: 0; }

.azk-closing-cta-band {
  position: relative; z-index: 2; overflow: hidden; max-width: 920px;
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  background-color: #FDFDFD;
  background-image: var(--azk-cta-glow,
                    radial-gradient(266px 271px at 33.3% -59.8%,
                                    rgba(0,181,255,.089) 0%, rgba(255,255,255,.47) 100%));
  border: 0; box-shadow: inset 0 0 0 0.5px #FFFFFF, var(--elev-3); border-radius: 20px;
  padding: 32px; margin: 48px auto 0;
}
.azk-closing-cta-band > * { position: relative; z-index: 1; }
.azk-closing-cta-band h3 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--w-demi); color: var(--t-heading); }

@media (max-width: 760px) {

  .azk-closing-cta-band { padding: 32px 20px; text-align: center; justify-content: center; }
  .azk-closing-cta-band h3 { font-size: 24px; }
}
@media (max-width: 980px) {
  .azk-closing-cta { padding-block-start: 32px; }
  .azk-closing-cta-band { flex-direction: column; align-items: stretch; gap: 24px; text-align: center; }
  .azk-closing-cta-band .azk-button { align-self: center; }
}

@media (max-width: 720px) {

  .azk-closing-cta-band { flex-direction: column; text-align: center; }
}

.azk-closing-cta-btn { min-width: 160px; }

.azk-closing-cta-btn .azk-button-icon-glyph { display: var(--azk-cta-icon, block); }
@media (max-width: 760px) { .azk-closing-cta-btn { min-width: 152px; } }

.azk-closing-cta-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.azk-closing-cta-lede {
  font-size: var(--azk-t-md-size); line-height: var(--azk-t-md-line);
  color: var(--body);
}
.azk-closing-cta-lede:empty { display: none; }

.azk-footer {
  background: var(--footer-bg); color: #C7CAD3;
  margin-top: calc(var(--cta-overlap) * -1);
  padding: calc(37px + var(--cta-overlap)) 0 32px;
}
.azk-footer-wrap { max-width: 1280px; padding: 0 32px; }

.azk-footer-top { display: grid; grid-template-columns: 279.5fr 150fr 150fr 279.5fr; gap: 119px; padding-bottom: 32px; }
@media (max-width: 1200px) { .azk-footer-top { gap: 48px; } }

.azk-footer-mark { display: inline-block; line-height: 0; }
.azk-footer-mark img { width: 132px; height: 26px; }

.azk-footer-desc { font-size: var(--fs-body); line-height: var(--lh-body); margin-top: 24px; color: #fff; }
@media (max-width: 980px) {
  .azk-footer-desc { margin-top: 16px; }
}
.azk-footer h4 { color: #fff; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-demi); margin-bottom: 24px; }
@media (max-width: 980px) { .azk-footer h4 { margin-bottom: 16px; } }
.azk-footer ul { list-style: none; display: grid; gap: 0; }
.azk-footer ul a { color: #fff; font-size: var(--fs-body); line-height: var(--lh-body);
  display: flex; align-items: center; justify-content: flex-start; min-height: 40px;
  border-radius: 10px; transition: color .18s; }
.azk-footer ul a:hover { color: #fff; opacity: .75; }

.azk-footer-addr { display: flex; flex-direction: column; gap: 12px;
  font-size: var(--fs-body); line-height: var(--lh-body); color: #fff; }
.azk-footer-addr a { color: var(--blue); direction: ltr; display: inline-block;
                     font-size: var(--fs-small); line-height: var(--lh-small); }

.azk-footer-bottom {
  box-shadow: inset 0 1px 0 var(--t-disabled); padding: 16px 0 0;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  text-align: start; font-size: var(--fs-small); line-height: var(--lh-small); color: #fff;
}
.azk-footer-socials { display: flex; gap: 8px; }
.azk-footer-socials a {
  width: 40px; height: 40px; border: 0; border-radius: 12px; background: none;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .15s var(--ease-out);
}
.azk-footer-socials img { width: 40px; height: 40px; }
.azk-footer-socials a:hover { background: rgba(255,255,255,.06); transform: translateY(-2px); }

@media (max-width: 860px) {
  .azk-footer-top {

    grid-template-columns: repeat(2, min(150px, calc((100% - 64px) / 2))) minmax(0, 1fr);

    justify-content: start;
    gap: 24px 32px;
  }
  .azk-footer-top > :nth-child(1),
  .azk-footer-top > :nth-child(4) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {

  .azk-footer { padding-block-start: 120px; padding-block-end: 24px; }
  .azk-footer-wrap { padding-inline: var(--gutter); }
  .azk-footer-top { padding-bottom: 24px; }

  .azk-footer-bottom {
    flex-direction: column; align-items: center; gap: 0;
    box-shadow: none; padding: 0; text-align: center;
  }
  .azk-footer-bottom .azk-footer-socials { order: 1; justify-content: center; }
  .azk-footer-bottom > span {
    order: 2; width: 100%; margin-block-start: 24px; padding-block-start: 24px;
    box-shadow: inset 0 1px 0 var(--t-disabled);
    color: var(--label);
  }
}

@media (prefers-reduced-motion: reduce) {
  .azk-footer-socials a { transition: none; }
  .azk-footer-socials a:hover { transform: none; }
}

.azk-header { position: sticky; top: 0; z-index: 100; padding-block: 32px 0; }

.azk-header-pill {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 760px; max-width: calc(100% - 2 * var(--gutter)); height: 48px;
  margin-inline: auto; padding: 8px 12px;
  background: rgba(255,255,255,.6); border-radius: var(--r-btn);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.azk-header-brand img { width: 112px; height: 22px; }

.azk-header-nav { display: flex; }
.azk-header-nav a {
  display: inline-flex; align-items: center; height: 32px; padding-inline: 12px;
  border-radius: var(--r-btn-sm); font-size: var(--t-sm); line-height: 22px; color: var(--ink);
  transition: background-color .18s ease;
}
.azk-header-nav a:hover { background: rgba(18,18,18,.05); }

.azk-header-burger { display: none; width: 32px; height: 32px; padding: 7px 4px; }
.azk-header-burger span { display: block; height: 2px; border-radius: 2px; background: #5A5A5A; }
.azk-header-burger span + span { margin-block-start: 5px; }
.azk-header-drawer { display: none; }

#azkHeaderData { display: none; }

@media (max-width: 980px) {
  .azk-header { padding-block-start: 12px; }
  .azk-header { transition: transform .26s var(--ease-out, ease); will-change: transform; }
  .azk-header.azk-header-away { transform: translateY(calc(-100% - 12px)); }

  .azk-header-pill { width: 100%; height: 48px; padding-inline: 8px; }
  .azk-header-nav { display: none; }

  .azk-header-burger { display: block; order: 1; width: 26px; height: 26px; }
  .azk-header-brand { order: 2; }
  .azk-header-cta, #azkHeaderCta { order: 3; }
  .azk-header-brand img { width: 92px; height: 18px; }

  .azk-header-drawer {
    display: block; position: absolute; inset-inline: var(--gutter); top: 68px;
    padding: 8px; background: #fff; border-radius: var(--r-card);
    box-shadow: 0 12px 32px rgba(18,18,18,.12);
  }
  .azk-header-drawer[hidden] { display: none; }
  .azk-header-drawer a { display: block; padding: 14px 12px; font-size: var(--t-md); }
  .azk-header-drawer a + a { border-block-start: 1px solid #F0F0F0; }
}

@media (prefers-reduced-motion: reduce) {
  .azk-header { transition: none; }
  .azk-header.azk-header-away { transform: none; }
}

@media print {
  .azk-header { display: none; }
}

.azk-skip-link {
  position: absolute; top: 0; inset-inline-start: 0; z-index: 200;
  padding: 12px 20px;
  background: var(--ink); color: #fff;
  border-radius: 0 0 12px 0;
  font-size: var(--t-md); line-height: 24px;
}

.azk-skip-link:not(:focus) {
  width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.azk-skip-link:focus {
  outline: 2px solid var(--blue); outline-offset: 2px;
}

/* ==========================================================================
   جشنواره فروش بیمه بدنه — قواعد مخصوص این صفحه
   بالای این فایل، پوسته مشترک سایت است (از landing/home/styles.*.css خطوط ۱–۵۵۶،
   منهای back-to-top و contact-modal که در این صفحه markup ندارند).
   مرجع اعداد: campaign-body-plan/reference/{desktop,mobile}/*.txt
   دسکتاپ ۱۲۸۰ / موبایل ۳۷۵ — نقطه شکست ۹۸۰|۹۸۱
   ========================================================================== */

:root {
  --sec-gap: 72px;          /* فاصله بین بلوک‌های سطح اول (طرح: gap ریشه ۷۲) */
  --sec-pad: 0px;           /* پدینگ عمودی سکشن‌ها را خودمان می‌دهیم */
  --cb-tex: url(assets/img/texture.webp);
  --cb-tex-size: 200px 200px;
}

html { overflow-x: clip; }
body { position: relative; overflow-x: clip; }
main { margin-block-start: var(--sec-gap); }

/* تصویر پس‌زمینه بالای صفحه — زیر هدر و هیرو */
/* z-index منفی: پشت همه‌ی محتوای در جریان می‌نشیند ولی روی پس‌زمینه‌ی صفحه.
   با این کار نه لازم است هدر را position بدهیم (که sticky را می‌کشد) و نه
   main/footer را (که کارت پایانی را زیر فوتر تیره می‌برد). */
.cb-topbg {
  position: absolute; inset-block-start: 0; inset-inline: 0; height: 372px; z-index: -1;
  pointer-events: none;
  background: url(assets/img/bg-desktop.webp) center top / cover no-repeat;
}

/* ---- اجزای تکرارشونده --------------------------------------------------- */

/* بافت نویز روی کارت‌ها (در فیگما IMAGE(TILE) روی همه‌ی کارت‌ها، تایل ۲۰۰×۲۰۰) */
.cb-tex { background-image: var(--cb-tex); background-size: var(--cb-tex-size); background-repeat: repeat; }

.cb-eyebrow { margin: 0; }

.cb-sec-head { display: flex; flex-direction: column; gap: 32px; }
.cb-sec-head-text { display: flex; flex-direction: column; gap: 16px; }
.cb-sec-head-text p { font-size: 15px; line-height: 24px; color: var(--body); }
.cb-sec-head--center { text-align: center; }

.cb-alert {
  background: #F5FDFF; box-shadow: inset 0 0 0 1px #B5F0FF; border-radius: 12px;
  padding: 12px 16px;
  font-size: 13px; line-height: 22px; color: var(--ink); text-align: right;
}
.cb-alert--center { text-align: center; }

.cb-only-mobile { display: none; }

/* ---- ۱ ــ هیرو ---------------------------------------------------------- */

/* طرح: ستون متن ۵۱۲ سمت راست، تصویر ۳۷۴ سمت چپ، و ردیف کارت‌ها تمام‌عرض ۹۲۰
   زیر هر دو. مختصات طرح: پیل y=۶۴، عنوان y=۱۲۸، دکمه y=۳۲۴، کارت‌ها y=۴۰۴. */
.cb-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 32px;
  padding-block-start: 64px;
}
/* پیل و ستون متن ۵۱۲ و چسبیده به راست؛ ردیف کارت‌ها تمام‌عرض ۹۲۰ می‌ماند. */
.cb-hero-inner > .cb-pill,
.cb-hero-copy { width: 512px; justify-self: start; }
/* تصویر از جریان گرید بیرون است: در طرح ارتفاعش (۳۴۲) از مجموع ردیف‌های
   کنارش بیشتر است، پس اگر داخل گرید بماند ردیف‌ها را کش می‌دهد. */
.cb-hero-art { position: absolute; left: var(--gutter); top: 92px; width: 374px; margin: 0; }

.cb-hero-copy {
  display: flex; flex-direction: column; gap: 32px; align-items: flex-start;
}

.cb-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: 12px; background: var(--bg);
  font-size: 13px; line-height: 22px; color: var(--body);
}
.cb-pill img { flex: none; width: 24px; height: 24px; }

.cb-hero-head { display: flex; flex-direction: column; gap: 24px; width: 389px; }
.cb-hero-head h1 { font-size: 38px; line-height: 46px; font-weight: 600; color: var(--ink); }
.cb-hero-head p { font-size: 15px; line-height: 24px; color: var(--body); }

.cb-hero-btn { min-width: 176px; }

.cb-hero-cards { display: flex; gap: 16px; align-items: flex-start; min-height: 134px; }
.cb-hcard {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: 32px; border-radius: 20px; box-shadow: inset 0 0 0 1.5px #FFFFFF;
  background-color: var(--bg);
  background-image: var(--cb-tex); background-size: var(--cb-tex-size); background-repeat: repeat;
}
.cb-hcard strong { font-size: 30px; line-height: 38px; font-weight: 600; color: var(--ink); }
.cb-hcard span   { font-size: 15px; line-height: 24px; font-weight: 600; color: var(--ink); }
.cb-hcard-medal  { position: absolute; left: 4px; top: 2px; width: 57px; height: 57px; }

.cb-hero-art picture { display: block; }
.cb-hero-art img { width: 100%; height: auto; }

/* ---- ۲ ــ پاداش پلکانی -------------------------------------------------- */

.cb-ladder-inner { position: relative; }
.cb-ladder-body  { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 32px; }

.cb-glow { position: absolute; z-index: 0; pointer-events: none; max-width: none; }
.cb-glow--a { left: 15.3px;  top: 76px; width: 720px; height: 720px; }
.cb-glow--b { left: 375.3px; top: 73px; width: 496px; height: 496px; }

.cb-ladder .cb-sec-head { width: 472.6px; margin-inline: auto; }

.cb-steps { display: flex; align-items: flex-end; gap: 12px; list-style: none; }
.cb-step {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 32px 12px; border-radius: 20px; box-shadow: inset 0 0 0 1.5px #FFFFFF; overflow: hidden;
  background-image: var(--cb-tex),
                    linear-gradient(180deg, rgba(241,241,241,.70) 0%, rgba(241,241,241,.40) 100%);
  background-size: var(--cb-tex-size), auto;
  background-repeat: repeat, no-repeat;
}
.cb-step-body { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.cb-step b    { font-size: 15px; line-height: 24px; font-weight: 600; color: var(--ink); }
.cb-step span { font-size: 13px; line-height: 24px; font-weight: 600; color: var(--muted); white-space: nowrap; }

.cb-step:nth-child(1) { height: 355px; }
.cb-step:nth-child(2) { height: 310px; }
.cb-step:nth-child(3) { height: 260px; }
.cb-step:nth-child(4) { height: 216px; }
.cb-step:nth-child(5) { height: 148px; }
.cb-step:nth-child(6) { height: 99px;  justify-content: center; }
/* پدینگ افقی ۱۱ به‌جای ۱۲: «۵۰۰ هزار تومان پاداش» در مرورگر ۱۱۵٫۷ عرض دارد
   و در ۱۱۵ پیکسلِ طرح می‌شکست. */
.cb-step:nth-child(7) { height: 76px;  justify-content: center; flex: 0 0 139px; padding: 16px 11px; }
.cb-step:nth-child(1) .cb-step-body,
.cb-step:nth-child(2) .cb-step-body { gap: 16px; }
.cb-step:nth-child(1) b { font-size: 13px; }

/* ---- ۳ ــ جوایز برندگان ------------------------------------------------- */

.cb-winners .azk-wrap { display: flex; flex-direction: column; gap: 32px; }

.cb-winners-top { position: relative; height: 361px; }
.cb-winners-art { position: absolute; left: 40.6px; top: 22px; width: 339px; height: 339px; }
.cb-winners-art img { width: 100%; height: 100%; }
.cb-winners-copy {
  position: absolute; left: 498px; top: 90px; width: 422px;
  display: flex; flex-direction: column; gap: 24px;
}
.cb-winners-copy .cb-sec-head-text { gap: 16px; }

.cb-medals { display: flex; gap: 24px; align-items: stretch; list-style: none; }
.cb-medal {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  height: 232px; padding: 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--edge); text-align: center;
}
.cb-medal img { flex: none; width: 80px; height: 80px; max-width: none; }
.cb-medal-text { display: flex; flex-direction: column; gap: 8px; align-self: stretch; }
.cb-medal-text span { font-size: 13px; line-height: 22px; color: var(--body); }
.cb-medal-text b    { font-size: 15px; line-height: 24px; font-weight: 400; color: var(--ink); }

.cb-medal--bronze { background: radial-gradient(140.98% 74.18% at 43.26% 7.08%, #FFF2E8 0%, rgba(255,255,255,0) 100%); }
.cb-medal--silver { background: radial-gradient(140.98% 74.18% at 43.26% 7.08%, #EFEFEF 0%, rgba(255,255,255,0) 100%); }
.cb-medal--first  {
  background-color: var(--ink);
  background-image: var(--cb-tex); background-size: var(--cb-tex-size); background-repeat: repeat;
}
.cb-medal--first .cb-medal-text span { color: var(--label); }
.cb-medal--first .cb-medal-text b    { font-size: 20px; line-height: 28px; font-weight: 600; color: #FFFFFF; }

.cb-deadline {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 24px; border-radius: 24px; background: var(--bg); overflow: hidden;
}
.cb-deadline p { font-size: 15px; line-height: 24px; color: var(--ink); }
.cb-deadline b { font-weight: 400; color: var(--blue); }
.cb-deadline-icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 10px; background: var(--azk-brand-bg);
}
.cb-deadline-icon img { width: 16px; height: 16px; }

/* ---- ۴ ــ شرایط فروش اقساطی -------------------------------------------- */

.cb-inst .azk-wrap { display: flex; flex-direction: column; gap: 32px; }
.cb-alert--narrow { width: 758px; max-width: 100%; margin-inline: auto; }

.cb-benefits { display: flex; gap: 12px; align-items: stretch; list-style: none; }
.cb-benefit {
  position: relative; flex: 1 1 0; min-width: 0; height: 88px;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 32px; border-radius: 20px; box-shadow: inset 0 0 0 1.5px #FFFFFF; overflow: hidden;
  background-color: var(--bg);
  background-image: var(--cb-tex); background-size: var(--cb-tex-size); background-repeat: repeat;
}
.cb-benefit b { font-size: 15px; line-height: 24px; font-weight: 600; color: var(--ink); }
.cb-benefit img { position: absolute; bottom: 2px; }
.cb-benefit:nth-child(1) img { left: 1px; width: 68px; height: 68px; }
.cb-benefit:nth-child(2) img { left: 3px; width: 63px; height: 63px; }
.cb-benefit:nth-child(3) img { left: 2px; width: 66px; height: 66px; }

.cb-tablecard {
  min-width: 0;
  padding: 24px; border-radius: 20px; box-shadow: inset 0 0 0 1.5px #FFFFFF; background: var(--card);
}
.cb-tablescroll { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.cb-tablescroll:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 8px; }

.cb-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cb-table th, .cb-table td { text-align: right; font-weight: 400; }
.cb-table thead th {
  position: relative; height: 52px; padding: 0 16px;
  font-size: 11px; line-height: 20px; font-weight: 600; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.cb-table thead th:not(:last-child)::after {
  content: ''; position: absolute; inset-inline-end: 0; top: 50%;
  transform: translateY(-50%); width: 1px; height: 12px; background: var(--border);
}
.cb-table tbody th, .cb-table tbody td {
  height: 64px; padding: 0 16px; background: var(--card);
  font-size: 13px; line-height: 22px; color: var(--ink);
}
.cb-co { display: flex; align-items: center; justify-content: flex-start; gap: 16px; }
.cb-co img { flex: none; width: 40px; height: 40px; }

.cb-tag {
  display: inline-flex; align-items: center; vertical-align: middle; height: 20px; padding: 0 8px;
  border-radius: 7px; border: 1px solid transparent;
  font-size: 11px; line-height: 20px; white-space: nowrap;
}
.cb-tag--up   { background: #F6FFED; border-color: #B7EB8F; color: #389E0D; }
.cb-tag--same { background: rgba(0,0,0,.02); border-color: var(--edge); color: var(--ink); }
.cb-tag--new  { background: #F5FDFF; border-color: #B5F0FF; color: #008FFF; }

/* ---- ۵ ــ شفافیت در مشاهده درآمد --------------------------------------- */

.cb-income { padding-block: 48px; }
.cb-income-inner { display: flex; gap: 32px; align-items: flex-start; }
.cb-income-copy {
  flex: 1 1 444px; min-width: 0;
  display: flex; flex-direction: column; gap: 24px; align-items: flex-start;
}
.cb-income-copy > * { align-self: stretch; }
.cb-income-text  { display: flex; flex-direction: column; gap: 16px; }
.cb-income-paras { display: flex; flex-direction: column; gap: 8px; }
.cb-income-paras p { font-size: 15px; line-height: 24px; color: var(--body); }
.cb-income-paras b { font-weight: 700; color: inherit; }

.cb-video { flex: 1 1 444px; min-width: 0; }
.cb-video-btn {
  position: relative; display: block; width: 100%; height: 283px;
  padding: 0; border: 0; border-radius: 20px; overflow: hidden; background: var(--card);
  cursor: pointer;
}
.cb-video-poster { width: 100%; height: 100%; object-fit: cover; }
/* پوستر = فریم اول خود ویدئو (رابط کاربری روشن). روکش تیره مثل طرح (#2b2b2b)
   ولی ملایم‌تر، تا دکمه‌ی سفید پخش دیده شود و صفحه‌ی محصول هم خوانا بماند. */
.cb-video-btn::before { content: ''; position: absolute; inset: 0; background: rgba(43,43,43,.35); pointer-events: none; }
.cb-video-play { z-index: 1; }
.cb-video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 50px; height: 50px; pointer-events: none;
}
.cb-video video { width: 100%; height: 283px; border-radius: 20px; background: #000; object-fit: cover; }

/* ---- ۶ ــ دعوت به جشنواره ---------------------------------------------- */

.cb-cta { padding-block: 48px; }
.cb-cta-card {
  display: flex; gap: 48px; align-items: flex-start;
  padding: 48px 48px 29px; border-radius: 20px; box-shadow: inset 0 0 0 1.5px var(--border);
  overflow: hidden;
  background-image: var(--cb-tex),
                    radial-gradient(80% 100% at 22% 0%, #FFFBE6 0%, rgba(255,251,230,0) 100%);
  background-size: var(--cb-tex-size), auto;
  background-repeat: repeat, no-repeat;
}
.cb-cta-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 48px; align-items: flex-start; }
.cb-cta-copy > * { align-self: stretch; }
.cb-cta-text { display: flex; flex-direction: column; gap: 32px; }
.cb-cta-text h2 { font-size: 30px; line-height: 38px; font-weight: 600; color: var(--ink); }
.cb-cta-text p  { font-size: 15px; line-height: 24px; color: var(--label); }
.cb-cta-btn {
  /* طرح: دکمه ۱۶۰×۴۸ و محتوا ۱۴۴ با ۸ پیکسل فاصله از هر طرف (پدینگ پیش‌فرض
     دکمه‌های سایت ۱۶ است و اینجا عرض را به ۱۶۹ می‌برد). */
  align-self: flex-start; min-width: 160px; padding-inline: 8px;
  --azk-button-bg: #FFFFFF; --azk-button-border: var(--edge); --azk-button-fg: var(--ink);
}
.cb-cta-btn:hover { --azk-button-bg: #FAFAFA; }
.cb-cta-art { flex: 0 0 234px; width: 234px; height: 234px; }

/* ---- ۷ ــ سوالات متداول ------------------------------------------------ */

.cb-faq { padding-block: 32px; }
.cb-faq-title { text-align: center; margin-block-end: 32px; }
.cb-faq-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px; border-radius: 24px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden;
}
.cb-faq-item + .cb-faq-item { border-block-start: 1px solid var(--line); padding-block-start: 12px; }
.cb-faq-q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  min-height: 48px; padding-block: 12px; cursor: pointer; list-style: none;
  font-size: 15px; line-height: 24px; font-weight: 400; color: var(--ink);
}
.cb-faq-q::-webkit-details-marker { display: none; }
.cb-faq-q img { flex: none; width: 16px; height: 16px; transition: rotate .2s ease; }
.cb-faq-item[open] .cb-faq-q img { rotate: 180deg; }
.cb-faq-a { font-size: 15px; line-height: 24px; color: var(--body); }

/* ---- اصلاح دو قاعده‌ی پوسته که با این طرح نمی‌خواند ---------------------- */

/* لوگوی فوتر inline-block با line-height ۲۲ بود و ۸ پیکسل به ارتفاع خط اضافه
   می‌کرد؛ طرح می‌گوید توضیح دقیقاً ۲۴ پیکسل بعد از لوگوی ۲۶ پیکسلی بیاید. */
.azk-footer-mark { display: block; width: 132px; height: 26px; }

/* طرح موبایل دو ستون لینک ۱۵۰ پیکسلی با فاصله‌ی ۳۲ دارد؛ قاعده‌ی پوسته
   min(150px, (100% - 64px)/2) در عرض ۳۳۵ به ۱۳۵٫۵ می‌رسید. */
@media (max-width: 860px) {
  .azk-footer-top { grid-template-columns: 150px 150px; gap: 24px 32px; }
}
/* فاصله‌ی عنوان ستون تا لینک‌ها در طرح موبایل هم ۲۴ است (پوسته ۱۶ می‌گذارد)،
   وگرنه ستون ۲۰۰ به‌جای ۲۰۸ می‌شود و کل فوتر ۸ پیکسل کوتاه می‌آید. */
@media (max-width: 980px) {
  .azk-footer h4 { margin-bottom: 24px; }
  /* ...به‌جز ستون «ارتباط با ما» که در طرح موبایل ۱۶ است. */
  .azk-footer h4.cb-h4-contact { margin-bottom: 16px; }
}
/* زیر ۳۵۲ پیکسل، ۱۵۰+۳۲+۱۵۰ جا نمی‌شود. */
@media (max-width: 351px) {
  .azk-footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- کارت پایانی: مطابق طرح، سایه فقط در موبایل ------------------------- */

.azk-closing-cta-band {
  box-shadow: inset 0 0 0 0.5px #FFFFFF;
  background-image: radial-gradient(266px 271px at 33.3% -59.8%,
                    rgba(0,181,255,.089) 0%, rgba(255,255,255,.47) 100%), var(--cb-tex);
  background-size: auto, var(--cb-tex-size);
  background-repeat: no-repeat, repeat;
}

/* ==========================================================================
   موبایل و تبلت (طرح ۳۷۵)
   ========================================================================== */

@media (max-width: 980px) {
  :root { --sec-gap: 32px; }

  .cb-only-desktop { display: none; }
  .cb-only-mobile  { display: block; }

  .cb-topbg { height: 133px; background-image: url(assets/img/bg-mobile.webp); }

  main > section { padding-block: 32px; }

  /* هیرو */
  /* طرح موبایل: پیل، تصویر فروشنده ۳۳۵×۲۱۱، عنوان، دکمه، و کارت‌ها در دو
     ردیف دوتایی. ترتیب DOM همین است، پس فقط یک ستون ساده لازم داریم. */
  .cb-hero-inner {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 32px; padding-block-start: 0;
  }
  .cb-hero-inner > .cb-pill,
  .cb-hero-copy  { width: auto; min-width: 0; }
  .cb-hero-head  { width: auto; }
  .cb-hero-art   { position: static; width: auto; margin: 0; }
  /* طرح موبایل قاب ۳۳۵×۲۱۱ است و عکس ۶۷۵×۴۲۹ را کمی کراپ می‌کند. */
  .cb-hero-art img { aspect-ratio: 335 / 211; object-fit: cover; }
  .cb-hero-cards { flex-wrap: wrap; align-items: stretch; min-height: 0; row-gap: 16px; }
  /* دو ستون در هر ردیف؛ ردیف اول ۱۴۴ و ردیف دوم ۱۲۰ بلند است. */
  .cb-hcard { flex: 1 1 calc(50% - 8px); min-height: 144px; padding: 32px; }
  .cb-hcard:nth-child(n+3) { min-height: 120px; }
  .cb-hcard strong { font-size: 20px; line-height: 28px; }
  .cb-hcard span { font-size: 13px; }
  .cb-hcard-medal { left: 4px; top: 2px; width: 57px; height: 57px; }

  /* پله‌ها */
  .cb-ladder .cb-sec-head { width: auto; }
  .cb-glow--a { left: -326.7px; top: 407px; }
  .cb-glow--b { left: 33.3px;   top: 404px; }
  .cb-steps { flex-direction: column; align-items: center; }
  .cb-step  { flex: 0 0 auto; }
  .cb-step:nth-child(1) { width: 100%;             height: 120px; }
  .cb-step:nth-child(2) { width: calc(100% - 20px);  height: 120px; }
  .cb-step:nth-child(3) { width: calc(100% - 40px);  height: 120px; }
  .cb-step:nth-child(4) { width: calc(100% - 60px);  height: 120px; }
  .cb-step:nth-child(5) { width: calc(100% - 80px);  height: 120px; }
  .cb-step:nth-child(6) { width: calc(100% - 100px); height: 120px; }
  .cb-step:nth-child(7) { width: calc(100% - 120px); height: 120px; flex: 0 0 auto; padding: 16px 12px; }
  .cb-step:nth-child(1) b { font-size: 15px; }

  /* برندگان */
  .cb-winners-top {
    position: static; height: auto;
    display: flex; flex-direction: column; gap: 20px;
  }
  .cb-winners-copy { position: static; width: auto; }
  .cb-winners-art  { position: static; width: 285px; height: 285px; margin-inline: auto; }
  .cb-medals { gap: 24px; }
  .cb-medal  { padding: 16px; justify-content: flex-start; }
  .cb-medal-text span { font-size: 11px; line-height: 20px; }
  .cb-medal--first .cb-medal-text b { font-size: 15px; line-height: 24px; }
  .cb-deadline { padding: 24px; gap: 16px; }

  /* اقساط */
  .cb-benefits { flex-direction: column; }
  .cb-benefit  { flex: 0 0 auto; height: 88px; padding: 32px; }
  .cb-tablecard { padding: 24px; }
  .cb-table { table-layout: auto; width: 774px; }
  .cb-table thead th:nth-child(1),
  .cb-table tbody th { width: 218px; }
  .cb-table thead th:nth-child(2),
  .cb-table thead th:nth-child(3) { width: 218px; }
  .cb-table thead th:nth-child(4) { width: 120px; }

  /* درآمد */
  .cb-income { padding-block: 32px; }
  .cb-income-inner { flex-direction: column; gap: 32px; }
  .cb-income-copy, .cb-video { flex: 0 0 auto; width: 100%; }

  /* دعوت */
  .cb-cta { padding-block: 32px; }
  .cb-cta-card { flex-direction: column-reverse; gap: 48px; padding: 48px 16px; align-items: center; }
  .cb-cta-copy { align-self: stretch; }
  .cb-cta-art  { flex: 0 0 auto; width: 140px; height: 140px; }

  /* FAQ */
  .cb-faq-q { min-height: 40px; padding-block: 8px; }

  /* فوتر: «ایمیل:» در طرح موبایل DemiBold است */
  .cb-mail { font-weight: 600; }
  .cb-mail a { font-weight: 400; }
  .cb-copy-mobile { color: var(--label); }
}

/* طرح موبایل این جمله را یک‌خطی نشان می‌دهد و متن کمی داخل پدینگ می‌زند
   (کارت در فیگما clip دارد). زیر ۳۶۱ پیکسل اجازه شکستن می‌دهیم تا بریده نشود. */
@media (min-width: 361px) and (max-width: 980px) {
  .cb-deadline p { white-space: nowrap; }
}
@media (max-width: 360px) {
  .cb-deadline { padding: 24px 16px; gap: 12px; }
}