/* ============================================================
   RSB.ir — «معرفی شرکت» hero card  (v3 · dual-palette)
   21st.dev profile-card design language — dark card, glow band,
   live clock, glass buttons, milestone timeline — in native RTL CSS.
   · Light theme → official RSB brand palette (crimson #D31633 +
     gold #FFC156, sampled from Images/final_logo9908.webp).
   · Dark theme  → the component's ORIGINAL palette (neutral
     #1a1a1a→#0b0b0c card + lime #a3e635 accents).
   Loaded only on Company_introduction.php.
   ============================================================ */

.rsb-co{
  /* ---- theme tokens (light = site template blue palette) ---- */
  --co-accent:#5CC4FF;                       /* primary accent on navy: icons, numbers, dot */
  --co-accent-deep:#2FA9E8;
  --co-accent-2:#0088CC;                     /* secondary accent: nodes, bars */
  --co-accent-2-deep:#0056b3;                /* eyebrow/links text on light surfaces */
  --co-accent-2-border:rgba(0,136,204,.45);
  --co-pulse:rgba(92,196,255,.55);
  --co-glow-a:#0a66c2;                       /* glow band = site signature gradient */
  --co-glow-b:#0088CC;
  --co-glow-c:#0056b3;
  --co-glow-text:#ffffff;
  --co-glow-icon:#d6ecff;
  --co-glow-shadow:rgba(0,86,179,.45);
  --co-ink-0:#060f1c;                        /* card gradient stops (deep navy) */
  --co-ink-1:#0a1a30;
  --co-ink-2:#12294a;
  --co-bloom:rgba(0,136,204,.18);            /* inner accent bloom, card top corner */
  --co-hairline:rgba(92,196,255,.55);
  --co-line:rgba(190,220,245,.16);           /* hairline on navy */
  --co-line-soft:rgba(190,220,245,.08);
  --co-glass:rgba(190,220,245,.08);          /* button/chip glass */
  --co-glass-hover:rgba(190,220,245,.14);
  --co-glass-border:rgba(92,196,255,.42);
  --co-node-ring:rgba(0,136,204,.18);
  --co-tl-line:rgba(92,196,255,.05),rgba(92,196,255,.5),rgba(0,136,204,.55),rgba(92,196,255,.05);
  --co-text:#e4eef8;                         /* light blue-tinted body on navy */
  --co-muted:#9db4c9;                        /* muted on navy */
  --co-surface:#ffffff;                      /* site panel */
  --co-surface-line:#dce4ed;                 /* site panel border */
  --co-surface-text:#2c3e50;                 /* site text */
  --co-surface-muted:#6c7a89;                /* site muted */
  --co-radius:30px;
  --co-ease:cubic-bezier(.16,1,.3,1);

  position:relative;
  padding:clamp(2.5rem,7vw,4.5rem) 0 clamp(5rem,9vw,7rem);
  /* site canvas + subtle blue ambient bloom */
  background:
    radial-gradient(58% 44% at 86% -4%,rgba(0,136,204,.10),transparent 66%),
    radial-gradient(52% 40% at 8% 26%,rgba(0,86,179,.09),transparent 70%),
    linear-gradient(180deg,#f0f4f8 0%,#e3eaf2 100%);
}

/* -------------------- hero -------------------- */
.rsb-co__hero{
  position:relative;
  max-width:64rem;
  margin:0 auto;
  padding-bottom:5rem;                  /* the glow band lives in this space */
}

/* glow band peeking out under the card */
.rsb-co__glow{
  position:absolute;
  left:0;right:0;
  top:70%;bottom:0;
  border-radius:var(--co-radius);
  background:linear-gradient(135deg,var(--co-glow-a) 0%,var(--co-glow-b) 52%,var(--co-glow-c) 100%);
  box-shadow:0 44px 90px -18px var(--co-glow-shadow);
  z-index:0;
  pointer-events:none;
}
.rsb-co .rsb-co__glowtext{
  position:absolute;
  left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  height:5rem;margin:0;padding:.5rem 1rem;
  text-align:center;
  font-size:.9rem;font-weight:800;
  color:var(--co-glow-text) !important;  /* beats site-wide [data-theme=dark] p{...!important} */
  z-index:1;
}
.rsb-co__glowtext i{font-size:.95rem;color:var(--co-glow-icon)}

/* the dark card */
.rsb-co__card{
  position:relative;
  z-index:2;
  overflow:hidden;
  border-radius:var(--co-radius);
  border:1px solid var(--co-line-soft);
  background:
    radial-gradient(72% 92% at 10% 0%,var(--co-bloom),transparent 60%),
    radial-gradient(135% 140% at 25% 0%,var(--co-ink-2) 0%,var(--co-ink-1) 55%,var(--co-ink-0) 100%);
  color:#fff;
  box-shadow:
    0 44px 92px -26px rgba(6,17,32,.62),
    0 0 0 1px rgba(0,0,0,.22);
  padding:clamp(1.75rem,4.5vw,2.6rem);
}
/* accent hairline along the top edge */
.rsb-co__card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to left,transparent,var(--co-hairline),transparent);
}
/* faint logo watermark, inline-start lower corner */
.rsb-co__card::after{
  content:"";position:absolute;bottom:-36px;inset-inline-start:-32px;
  width:200px;height:200px;
  background:url('../Images/final_logo9908.webp') center/contain no-repeat;
  opacity:.05;pointer-events:none;
}

/* -------------------- top status row -------------------- */
.rsb-co__top{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
  margin-bottom:1.6rem;
  font-size:.875rem;color:var(--co-muted);
}
.rsb-co__status{display:inline-flex;align-items:center;gap:.6rem;color:var(--co-text);font-weight:600}
.rsb-co__dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--co-accent);
  box-shadow:0 0 0 0 var(--co-pulse);
  animation:rsbCoPulse 2.3s ease-out infinite;
  flex:0 0 auto;
}
@keyframes rsbCoPulse{
  0%{box-shadow:0 0 0 0 var(--co-pulse)}
  70%{box-shadow:0 0 0 10px rgba(0,0,0,0)}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}
}
.rsb-co__clock{
  display:inline-flex;align-items:center;gap:.5rem;
  color:var(--co-muted);
  font-variant-numeric:tabular-nums;
}
.rsb-co__clock i{color:var(--co-accent);font-size:.9rem}

/* -------------------- identity -------------------- */
.rsb-co__id{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap}
.rsb-co__avatar{
  width:66px;height:66px;flex:0 0 auto;
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  display:grid;place-items:center;
  box-shadow:0 0 0 1px var(--co-line),0 12px 30px -12px rgba(0,0,0,.7);
}
.rsb-co__avatar img{width:84%;height:84%;object-fit:contain;display:block}
.rsb-co .rsb-co__name{
  margin:0;
  font-size:clamp(1.5rem,3.4vw,1.95rem);
  font-weight:800;letter-spacing:-.01em;line-height:1.45;
  color:#fff !important;            /* the card is dark in BOTH themes — beat site heading colours */
}
.rsb-co__role{margin:.35rem 0 0;font-size:.9rem;color:var(--co-muted);line-height:1.75}

/* -------------------- actions -------------------- */
.rsb-co__actions{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;margin-top:1.7rem;
}
.rsb-co__btn{
  display:flex;align-items:center;gap:.75rem;
  min-height:50px;padding:.8rem 1.25rem;
  border:1px solid var(--co-line);border-radius:16px;
  background:var(--co-glass);
  color:#fff;font-size:.9375rem;font-weight:600;
  text-decoration:none;cursor:pointer;
  transition:background .25s ease,border-color .25s ease,transform .25s var(--co-ease);
  -webkit-tap-highlight-color:transparent;
}
.rsb-co__btn i{font-size:1rem;color:var(--co-accent);transition:transform .25s var(--co-ease)}
.rsb-co__btn:hover,.rsb-co__btn:focus-visible{
  background:var(--co-glass-hover);
  border-color:var(--co-glass-border);
  color:#fff;
}
.rsb-co__btn:hover i{transform:scale(1.12)}
.rsb-co__btn:active{transform:translateY(1px)}
.rsb-co__btn:focus-visible{outline:2px solid var(--co-accent);outline-offset:2px}
.rsb-co__btn--primary{background:var(--co-glass-hover);border-color:var(--co-glass-border)}
.rsb-co__btn--primary:hover,.rsb-co__btn--primary:focus-visible{border-color:var(--co-accent)}
.rsb-co__btn.is-copied{background:var(--co-glass-hover);border-color:var(--co-accent)}

/* -------------------- fact chips -------------------- */
.rsb-co__chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.35rem}
.rsb-co__chip{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.5rem .92rem;
  border:1px solid var(--co-line);border-radius:999px;
  background:var(--co-glass);
  font-size:.8125rem;color:var(--co-text);line-height:1.7;
}
.rsb-co__chip i{color:var(--co-accent);font-size:.8rem}
.rsb-co__chip a{color:inherit;text-decoration:none}
.rsb-co__chip a:hover{color:var(--co-accent)}

/* -------------------- divider + prose -------------------- */
.rsb-co__rule{
  height:1px;margin:1.9rem 0;border:0;
  background:linear-gradient(to left,transparent,var(--co-line),transparent);
}
.rsb-co__prose p{
  margin:0 0 1.15rem;
  font-size:.9688rem;line-height:2.15;color:var(--co-text);
  text-align:justify;
}
.rsb-co__prose p:first-child{font-size:1rem;color:#eef5fc}
.rsb-co__prose p:last-child{margin-bottom:0}
.rsb-co__prose strong{color:#fff;font-weight:700}

/* -------------------- milestone timeline -------------------- */
.rsb-co__timeline{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;margin:0;padding:0;
  list-style:none;position:relative;
}
.rsb-co__timeline::before{            /* the horizontal connector */
  content:"";position:absolute;top:11px;left:0;right:0;height:2px;border-radius:2px;
  background:linear-gradient(to left,var(--co-tl-line));
}
.rsb-co__tl-item{position:relative;padding-top:2rem}
.rsb-co__tl-node{
  position:absolute;top:6px;inset-inline-start:0;
  width:12px;height:12px;border-radius:50%;
  background:var(--co-accent-2);
  box-shadow:0 0 0 5px var(--co-node-ring),0 0 16px var(--co-accent);
}
.rsb-co__tl-year{
  display:block;
  font-size:1.15rem;font-weight:800;color:var(--co-accent);
  font-variant-numeric:tabular-nums;line-height:1.4;
}
.rsb-co__tl-title{display:block;margin-top:.2rem;font-size:.95rem;font-weight:700;color:#fff}
.rsb-co__tl-desc{display:block;margin-top:.2rem;font-size:.8125rem;color:var(--co-muted);line-height:1.8}

/* ============================================================
   Supporting sections (same design language)
   ============================================================ */
.rsb-co__block{margin-top:clamp(2.6rem,6vw,4.25rem)}

.rsb-co__head{text-align:center;margin-bottom:1.9rem}
.rsb-co__eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.75rem;font-weight:800;letter-spacing:.07em;
  color:var(--co-accent-2-deep);
}
.rsb-co__eyebrow::before{
  content:"";width:22px;height:2px;border-radius:2px;
  background:linear-gradient(to left,var(--co-accent),var(--co-accent-2));
}
.rsb-co__title{
  margin:.55rem 0 0;
  font-size:clamp(1.25rem,2.6vw,1.75rem);font-weight:800;
  color:var(--co-surface-text);
}
.rsb-co__sub{margin:.55rem auto 0;max-width:44rem;font-size:.9375rem;line-height:1.9;color:var(--co-surface-muted)}

/* ---- company e-mail block (hosts the AnimatedText address) ---- */
.rsb-co-mail{
  position:relative;
  max-width:46rem;
  margin:0 auto;
  padding:clamp(1.8rem,4.5vw,2.7rem) clamp(1.2rem,4vw,2.4rem);
  border-radius:26px;
  background:var(--co-surface);
  border:1px solid var(--co-surface-line);
  box-shadow:0 18px 46px -20px rgba(0,86,179,.22);
  text-align:center;
  overflow:hidden;
}
.rsb-co-mail::before{                 /* soft accent wash behind the address */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(62% 92% at 50% -12%,rgba(0,136,204,.10),transparent 72%);
}
.rsb-co-mail__eyebrow{
  position:relative;
  display:block;width:fit-content;margin:0 auto;
  font-size:.72rem;font-weight:800;letter-spacing:.08em;
  color:var(--co-accent-2-deep);
}
.rsb-co .rsb-co-mail__addr{
  position:relative;
  display:flex;width:fit-content;
  margin:.9rem auto .2rem;
  color:var(--co-surface-text) !important;
}
.rsb-co-mail__hint{
  position:relative;
  margin:1.5rem auto .2rem;max-width:34rem;
  font-size:.875rem;line-height:1.95;
  color:var(--co-surface-muted) !important;
}
.rsb-co-mail__actions{
  position:relative;
  display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;
  margin-top:1.5rem;
}
.rsb-co-mail__btn{
  display:inline-flex;align-items:center;gap:.55rem;
  min-height:46px;padding:.7rem 1.35rem;
  border:1px solid var(--co-surface-line);border-radius:14px;
  background:#fff;color:var(--co-surface-text);
  font-size:.9rem;font-weight:700;text-decoration:none;cursor:pointer;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s var(--co-ease);
  -webkit-tap-highlight-color:transparent;
}
.rsb-co-mail__btn i{color:var(--co-accent-2)}
.rsb-co-mail__btn:hover,.rsb-co-mail__btn:focus-visible{
  border-color:var(--co-accent-2-border);
  box-shadow:0 10px 26px -12px rgba(0,86,179,.35);
  transform:translateY(-2px);
  color:var(--co-surface-text);
}
.rsb-co-mail__btn:focus-visible{outline:2px solid var(--co-accent-2);outline-offset:2px}
.rsb-co-mail__btn--primary{
  background:linear-gradient(135deg,#0056b3 0%,#0088CC 100%);
  border-color:transparent;color:#fff;
}
.rsb-co-mail__btn--primary i{color:#fff}
.rsb-co-mail__btn--primary:hover,.rsb-co-mail__btn--primary:focus-visible{
  color:#fff;
  box-shadow:0 14px 32px -12px rgba(0,86,179,.55);
}
.rsb-co-mail__btn.is-copied{border-color:var(--co-accent-2-border)}

[data-theme="dark"] .rsb-co-mail{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 18px 46px -22px rgba(0,0,0,.7);
}
[data-theme="dark"] .rsb-co-mail::before{background:radial-gradient(62% 92% at 50% -12%,rgba(92,196,255,.12),transparent 72%)}
[data-theme="dark"] .rsb-co-mail__eyebrow{color:var(--co-accent)}
[data-theme="dark"] .rsb-co .rsb-co-mail__addr{color:#fff !important}
[data-theme="dark"] .rsb-co .rsb-co-mail__hint{color:var(--co-muted) !important}
[data-theme="dark"] .rsb-co-mail__btn{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
  color:#fff;
}
[data-theme="dark"] .rsb-co-mail__btn:hover,[data-theme="dark"] .rsb-co-mail__btn:focus-visible{color:#fff}
[data-theme="dark"] .rsb-co-mail__btn--primary{
  background:linear-gradient(135deg,#0056b3 0%,#0088CC 100%);
  border-color:transparent;color:#fff;
}

/* stats strip (dark, matches the hero card) */
.rsb-co-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--co-line-soft);border-radius:22px;overflow:hidden;
  background:
    radial-gradient(120% 170% at 20% 0%,var(--co-ink-2),var(--co-ink-0));
  box-shadow:0 28px 56px -22px rgba(6,17,32,.5);
}
.rsb-co-stat{
  padding:clamp(1.2rem,2.6vw,1.7rem) 1rem;
  text-align:center;
  border-inline-start:1px solid var(--co-line-soft);
}
.rsb-co-stat:first-child{border-inline-start:0}
.rsb-co-stat__num{
  display:block;
  font-size:clamp(1.55rem,3.4vw,2.1rem);font-weight:800;
  color:var(--co-accent);line-height:1.25;
  font-variant-numeric:tabular-nums;
}
.rsb-co-stat__label{display:block;margin-top:.3rem;font-size:.8125rem;color:var(--co-muted)}

/* services — reuse the homepage course-cards component
   (Css/rsb-course-cards.css). This page shows 5 cards as 3+2 centred
   rows (flex instead of the homepage's 2-col grid), and the extra
   accent for the 5th card lives here — all scoped to this page. */
.rsb-co .rsb-course-grid{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:30px 28px;
  margin:26px auto 0;
}
.rsb-co .rsb-course-grid .card{flex:0 1 300px;width:300px;max-width:100%}
.rsb-co .rsb-course-grid .card.violet{--card-accent:#9b6dff;--card-rgb:155,109,255}

/* customers */
.rsb-co-customers{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.rsb-co-customer{
  display:flex;align-items:center;justify-content:center;
  width:156px;height:84px;padding:1rem;border-radius:16px;
  background:var(--co-surface);
  border:1px solid var(--co-surface-line);
  box-shadow:0 6px 20px -8px rgba(0,86,179,.10);
  filter:grayscale(1);opacity:.78;
  transition:filter .3s ease,opacity .3s ease,transform .35s var(--co-ease),border-color .3s ease;
}
.rsb-co-customer:hover,.rsb-co-customer:focus-visible{
  filter:grayscale(0);opacity:1;transform:translateY(-4px);
  border-color:var(--co-glass-border);
}
.rsb-co-customer img{max-width:100%;max-height:100%;object-fit:contain}

/* ============================================================
   Dark theme → the component's ORIGINAL lime palette
   (neutral #1a1a1a→#0b0b0c card + lime-400 #a3e635 accents)
   ============================================================ */
[data-theme="dark"] .rsb-co{
  --co-accent:#a3e635;
  --co-accent-deep:#84cc16;
  --co-accent-2:#a3e635;
  --co-accent-2-deep:#bef264;              /* readable lime on dark surfaces */
  --co-accent-2-border:rgba(163,230,53,.4);
  --co-pulse:rgba(163,230,53,.55);
  --co-glow-a:#b0ef42;
  --co-glow-b:#a3e635;
  --co-glow-c:#7fb816;
  --co-glow-text:#142303;
  --co-glow-icon:#3f6212;
  --co-glow-shadow:rgba(163,230,53,.38);
  --co-ink-0:#0b0b0c;
  --co-ink-1:#141416;
  --co-ink-2:#1e1e21;
  --co-bloom:rgba(163,230,53,.07);
  --co-hairline:rgba(163,230,53,.5);
  --co-line:rgba(255,255,255,.13);
  --co-line-soft:rgba(255,255,255,.06);
  --co-glass:rgba(255,255,255,.07);
  --co-glass-hover:rgba(255,255,255,.13);
  --co-glass-border:rgba(163,230,53,.38);
  --co-node-ring:rgba(163,230,53,.16);
  --co-tl-line:rgba(163,230,53,.05),rgba(163,230,53,.55),rgba(163,230,53,.05);
  --co-text:#e9e9ec;
  --co-muted:#9b9ba3;
  --co-surface:rgba(255,255,255,.04);
  --co-surface-line:rgba(255,255,255,.09);
  --co-surface-text:#f0f0f2;
  --co-surface-muted:#9b9ba3;

  background:
    radial-gradient(58% 44% at 86% -4%,rgba(163,230,53,.10),transparent 66%),
    radial-gradient(52% 40% at 8% 26%,rgba(163,230,53,.06),transparent 70%),
    linear-gradient(180deg,#131315 0%,#0b0b0d 100%);
}
[data-theme="dark"] .rsb-co__prose p:first-child{color:#f4f4f5}
/* the site ships a blanket [data-theme=dark] p{...!important} (0,1,1) —
   scope ours to .rsb-co (0,2,x) so the card keeps its own text colours */
[data-theme="dark"] .rsb-co .rsb-co__prose p{color:var(--co-text) !important}
[data-theme="dark"] .rsb-co .rsb-co__role{color:var(--co-muted) !important}
[data-theme="dark"] .rsb-co .rsb-co__prose p:first-child{color:#f4f4f5 !important}
[data-theme="dark"] .rsb-co-customer{
  background:#fff;                          /* keep logos readable */
  border-color:var(--co-surface-line);
}
[data-theme="dark"] .rsb-co__card{
  box-shadow:
    0 44px 92px -26px rgba(0,0,0,.85),
    0 0 0 1px rgba(0,0,0,.4);
}

/* -------------------- responsive -------------------- */
@media (max-width:767.98px){
  .rsb-co-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rsb-co-stat:nth-child(odd){border-inline-start:0}
  .rsb-co-stat:nth-child(n+3){border-top:1px solid var(--co-line-soft)}
  .rsb-co__actions{grid-template-columns:1fr}
  .rsb-co__top{font-size:.8125rem}
  .rsb-co__prose p{text-align:start}
  /* timeline becomes a vertical rail on the inline-start edge */
  .rsb-co__timeline{grid-template-columns:1fr;gap:1.4rem}
  .rsb-co__timeline::before{
    top:8px;bottom:8px;left:auto;right:auto;width:2px;height:auto;
    inset-inline-start:5px;
    background:linear-gradient(to bottom,var(--co-accent),var(--co-accent-2));
  }
  .rsb-co__tl-item{padding-top:0;padding-inline-start:1.9rem}
  .rsb-co__tl-node{top:.55rem;inset-inline-start:0}
}
@media (max-width:575.98px){
  .rsb-co-customer{width:calc(50% - .5rem);height:76px}
  .rsb-co__glow{top:74%}
  .rsb-co__avatar{width:56px;height:56px;border-radius:16px}
}

/* -------------------- reduced motion -------------------- */
@media (prefers-reduced-motion:reduce){
  .rsb-co__dot{animation:none}
  .rsb-co-customer,.rsb-co__btn{transition:none}
  .rsb-co-customer:hover{transform:none}
}