/* =========================================================
   Azad Umbrella – Global RTL Theme (for index.html + about.html)
   Path: /static/css/style.css
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  --brand:#00f5d0;
  --ink:#0b1320;
  --ink-2:#1b2738;
  --muted:#6b7a90;
  --bg:#ffffff;
  --bg-soft:#f5f8fc;
  --line:#e6edf5;
  --glass:rgba(255,255,255,.6);
  --shadow:0 10px 30px rgba(10,20,32,.08);
  --radius:16px; --radius-sm:12px;
}

@media (prefers-color-scheme: dark){
  :root{
    --ink:#e8eef6; --ink-2:#d8e2f0; --muted:#9fb0c7;
    --bg:#0b1320; --bg-soft:#0f1826; --line:#1d2a3d; --glass:rgba(15,24,38,.55);
  }
}

/* ---------- Base / Reset ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html[dir="rtl"]{direction:rtl}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.9 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Vazirmatn","Vazir","Noto Naskh Arabic",Tahoma,sans-serif;
  text-wrap:pretty;
}
img{max-width:100%;height:auto}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1180px,92vw);margin-inline:auto}
.center{text-align:center}
.muted{color:var(--muted)}

/* ---------- Utilities ---------- */
.pad{padding:18px}
.card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.panel{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}
.section{padding:64px 0;border-bottom:1px solid var(--line)}
.section:last-of-type{border-bottom:0}
.section-title{margin:0 0 22px;font-size:clamp(22px,3vw,30px)}
.chip{
  display:inline-block;background:var(--bg-soft);border:1px solid var(--line);
  padding:6px 10px;border-radius:999px;color:var(--muted);font-size:.9rem
}
.tilt{transform:perspective(800px) rotateX(1deg) rotateY(-1deg)}
.grad{
  background:linear-gradient(90deg,#84fab0,#8fd3f4);
  -webkit-background-clip:text;background-clip:text;color:transparent
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:12px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);
  box-shadow:var(--shadow);transition:.2s
}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent}
.btn-cta{background:var(--brand);color:#032a23;border-color:transparent;font-weight:700}
.btn-lg{padding:14px 22px}

/* =========================================================
   HEADER & NAV (supports both index.html and about.html)
   - index.html: <header class="hdr"> ... <ul class="menu"> + #mobileMenu.mobile
   - about.html: <header class="header"> ... <nav .navlinks> + #mobileMenu.navlinks
   ========================================================= */

/* Shared top bar look */
.hdr,.header{
  position:sticky;top:0;z-index:20;
  background:linear-gradient(180deg,var(--bg) 60%,transparent);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(1.2) blur(6px);
}
.nav,.navbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 0;
}

/* Brand */
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:var(--ink)}
.brand .logo{width:36px;height:36px}
.brand .logo.sm{width:28px;height:28px}
.brand .dot{width:12px;height:12px;border-radius:50%;background:var(--brand);display:inline-block}
.brand-name{letter-spacing:.2px}

/* Desktop menus */
.menu{display:flex;gap:16px;align-items:center;list-style:none;margin:0;padding:0}
.menu a{padding:8px 12px;border-radius:10px}
.navlinks{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.navlink{padding:8px 12px;border-radius:10px}

/* Mobile toggles (both pages) */
.menu-btn,.nav-toggle{
  display:none;position:relative;width:44px;height:44px;
  border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink)
}
.hamburger, .hamburger:before, .hamburger:after{
  content:'';position:absolute;inset-inline:11px;height:2px;background:var(--ink);border-radius:2px;transition:.2s
}
.hamburger{top:21px}
.hamburger:before{top:14px}
.hamburger:after{top:28px}

/* Mobile dropdown/overlay container (two variants) */
.mobile{display:none}
.mobile.open{display:block;position:absolute;inset-inline:0;top:68px;padding:12px;background:var(--bg)}
.navlinks.open{display:flex;flex-direction:column;position:absolute;inset-inline:0;top:68px;padding:12px;background:var(--bg);border-bottom:1px solid var(--line)}

@media (max-width:900px){
  .menu{display:none}
  .navlinks{display:none}
  .menu-btn,.nav-toggle{display:inline-block}
}

/* =========================================================
   HERO (supports both pages)
   - index.html: .hero + .glow + .hero-wrap (grid)
   - about.html: .hero.hero--about + .hero-grid
   ========================================================= */
.hero{position:relative;overflow:hidden;padding:64px 0 24px}
.hero--about{
  background:
    radial-gradient(1200px 400px at 80% -10%, rgba(0,245,208,.15), transparent 60%),
    radial-gradient(800px 360px at 10% 0%, rgba(0,245,208,.10), transparent 60%), var(--bg);
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center}
.hero-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}

.title,.hero-title{margin:0 0 10px;font-size:clamp(28px,4vw,44px)}
.subtitle,.hero-lead{margin:0 0 16px;color:var(--ink-2);font-size:clamp(16px,2.2vw,18px)}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 6px}

/* Decorative glow for index hero */
.glow{position:absolute;inset:0;background:
  radial-gradient(800px 260px at 10% 10%, rgba(0,245,208,.14), transparent 60%),
  radial-gradient(900px 300px at 90% -10%, rgba(132,243,236,.12), transparent 70%)}
.hero-points{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.point{padding:8px 12px;border:1px dashed var(--line);border-radius:999px;background:var(--bg-soft);color:var(--muted)}

/* About hero art card */
.hero-art{position:relative}
.card-hero{
  position:relative;height:320px;border-radius:var(--radius);
  box-shadow:var(--shadow);background:var(--glass);backdrop-filter:blur(10px);overflow:hidden
}
.card-hero__content{position:absolute;inset:auto 0 0 0;padding:18px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.06))}
.card-hero__content h3{margin:0 0 6px}
.hero-wave{height:36px;background:linear-gradient(180deg,transparent, var(--bg))}

/* Global stars canvas (height strip under header) */
#stars{display:block;width:100%;height:220px}

/* =========================================================
   STATS (about)
   ========================================================= */
.section--stats{background:var(--bg-soft)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat{
  background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;text-align:center;box-shadow:var(--shadow)
}
.stat__num{font-size:clamp(22px,3.2vw,28px);font-weight:900;color:var(--ink)}
.stat__label{color:var(--muted)}
@media (max-width:780px){.stats{grid-template-columns:1fr}}

/* =========================================================
   GRIDS & CARDS (shared)
   ========================================================= */
.grid{display:grid;gap:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card--h{display:flex;gap:14px;align-items:center}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--bg-soft);border:1px solid var(--line);font-weight:800;color:var(--muted)}

@media (max-width:1000px){
  .cards-4{grid-template-columns:repeat(2,1fr)}
  .hero-grid,.hero-wrap{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width:780px){
  .cards-3{grid-template-columns:1fr}
}

/* =========================================================
   DOMAINS (index)
   ========================================================= */
.domain-grid{grid-template-columns:repeat(3,1fr)}
.domain{display:grid;gap:10px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);box-shadow:var(--shadow)}
.domain .icon{width:44px;height:44px}
.img-box{margin:4px 0 0}
.img-box.photo{border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.caption{display:block;text-align:center;color:var(--muted);font-size:.9rem;padding:6px}
@media (max-width:900px){.domain-grid{grid-template-columns:1fr}}

/* =========================================================
   ABOUT GRID (index)
   ========================================================= */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:start}
.mini-cards{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr}
  .mini-cards{grid-template-columns:1fr}
}

/* =========================================================
   PROCESS STEPS (index)
   ========================================================= */
.steps{grid-template-columns:repeat(3,1fr)}
.step{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow)
}
.step .num{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg-soft);border:1px solid var(--line);font-weight:800;color:var(--muted);margin-bottom:8px
}
@media (max-width:900px){.steps{grid-template-columns:1fr}}

/* =========================================================
   FEATURES (index)
   ========================================================= */
.features{grid-template-columns:repeat(3,1fr)}
.feat{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow)
}
@media (max-width:900px){.features{grid-template-columns:1fr}}

/* =========================================================
   PROJECTS (index)
   ========================================================= */
.projects{grid-template-columns:repeat(3,1fr)}
.proj .thumb{
  height:140px;border-radius:12px;background:linear-gradient(135deg,#eaf2ff,#f0fff8);
  border:1px solid var(--line);position:relative;overflow:hidden
}
.proj .thumb .overlay{position:absolute;inset:0;background:radial-gradient(400px 120px at 80% -10%, rgba(0,245,208,.18), transparent)}
.tags{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.tag{display:inline-block;padding:4px 10px;border:1px dashed var(--line);border-radius:999px;color:var(--muted);background:var(--bg-soft)}
@media (max-width:900px){.projects{grid-template-columns:1fr}}

/* =========================================================
   TIMELINE (about)
   ========================================================= */
.timeline{list-style:none;padding:0;margin:0;border-inline-start:2px solid var(--line)}
.timeline li{position:relative;padding-inline-start:18px;padding-block:14px}
.timeline .t-bullet{position:absolute;inset-inline-start:-8px;top:22px;width:12px;height:12px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(0,245,208,.15)}
.timeline .t-body h3{margin:0 0 6px;font-size:18px}

/* =========================================================
   FAQ (both)
   ========================================================= */
.faq{display:grid;gap:10px}
.faq .q{
  width:100%;text-align:inherit;padding:14px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg);box-shadow:var(--shadow);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px
}
.faq .a{
  display:none;padding:14px 16px;border:1px dashed var(--line);
  border-radius:12px;background:var(--bg-soft)
}
/* when JS toggles aria-expanded to true */
.faq .q[aria-expanded="true"] + .a{display:block}

/* =========================================================
   LOGOS (about)
   ========================================================= */
.logo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.logo-skel{height:50px;border-radius:10px;background:linear-gradient(90deg, var(--bg-soft), #eaf2fa, var(--bg-soft));border:1px solid var(--line)}
@media (max-width:1000px){.logo-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.logo-grid{grid-template-columns:repeat(2,1fr)}}

/* =========================================================
   CONTACT FORM (index)
   ========================================================= */
.form input,.form select,.form textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)
}
.form label{display:block;margin:0 0 6px;color:var(--muted);font-size:.95rem}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form button.btn{margin-top:8px}
@media (max-width:780px){.form .row{grid-template-columns:1fr}}

/* =========================================================
   CTA Banner (both)
   ========================================================= */
.cta-banner{background:radial-gradient(800px 220px at 10% 10%, rgba(0,245,208,.18), transparent 60%), var(--bg-soft);border-top:1px solid var(--line)}
.cta-banner__inner{display:grid;gap:10px;place-items:center;text-align:center;padding:40px 0}

/* =========================================================
   FOOTER (supports both .ftr and .footer)
   ========================================================= */
.ftr,.footer{border-top:1px solid var(--line);background:var(--bg);padding:28px 0}
.foot-grid,.footer__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:start}
.foot{display:grid;gap:8px}
.list{list-style:none;margin:0;padding:0}
.list li{margin:6px 0}
.social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--line);border-radius:10px;margin-inline:4px}
.copy{padding-top:10px}
.footer-links{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:780px){
  .foot-grid,.footer__grid{grid-template-columns:1fr}
}

/* =========================================================
   ACCESSIBILITY FOCUS
   ========================================================= */
:focus-visible{
  outline:3px solid var(--brand);
  outline-offset:2px;border-radius:6px
}

/* =========================================================
   PRINT (polite)
   ========================================================= */
@media print{
  header,.hdr,canvas,#heroParticles,.cta-banner{display:none !important}
  .section{padding:20px 0;border:0}
}
/* Vazir self-hosted */
@font-face{
  font-family: "Vazir";
  src: url("../fonts/vazir/Vazir-Regular.woff2") format("woff2"),
       url("../fonts/vazir/Vazir-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Vazir";
  src: url("../fonts/vazir/Vazir-Medium.woff2") format("woff2"),
       url("../fonts/vazir/Vazir-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Vazir";
  src: url("../fonts/vazir/Vazir-Bold.woff2") format("woff2"),
       url("../fonts/vazir/Vazir-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* استک فونت را طوری بچین که Vazir مقدم باشد */
body{
  font-family: "Vazir", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Naskh Arabic", Tahoma, sans-serif;
}
/* Stars strip should not push the layout */
#stars{
  position: fixed;     /* خارج از فلو */
  inset: 0 0 auto 0;   /* بالا بچسبد */
  height: 180px;       /* می‌تونی 0–220px تغییر بدی */
  width: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 780px){
  #stars{ height: 140px; }
}

/* مطمئن شو هدر روی ستاره‌هاست */
.header,.hdr{ z-index: 20; }
/* ===================== UPGRADE PACK: Background + Card Contrast + Readability ===================== */

/* 1) کمی تقویت توکن‌ها */
:root{
  --bg-soft: #f2f7fb;                  /* نرم‌تر برای پس‌زمینه‌های سکشن‌ها */
  --line: rgba(20,40,60,.12);          /* خط حاشیه خواناتر */
  --shadow: 0 12px 36px rgba(10,20,32,.10); /* سایه عمیق‌تر برای کارت‌ها */
}

/* دارک‌مود هم‌خوان */
@media (prefers-color-scheme: dark){
  :root{
    --bg-soft:#0f1826;
    --line: rgba(255,255,255,.08);
    --shadow: 0 12px 36px rgba(0,0,0,.30);
  }
}

/* 2) پس‌زمینهٔ محیطی جذاب (بدون فشار به layout) */
body::before{
  content:"";
  position:fixed;
  inset:-20% -10% auto -10%;
  height:55vh;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(900px 300px at 15% 10%, rgba(0,245,208,.18), transparent 60%),
    radial-gradient(700px 260px at 90% -10%, rgba(132,243,236,.14), transparent 65%);
  filter: blur(40px) saturate(1.05);
  opacity:.9;
}
/* مطمئن شو لایه‌های اصلی بالاترند */
.header,.hdr, main, footer { position: relative; z-index: 1; }

/* اگر #stars داری، فضا نگیرد و فقط جلوه بدهد */
#stars{
  position: fixed; inset: 0 0 auto 0; height: 160px; width: 100%;
  display:block; pointer-events:none; z-index:0; opacity:.9;
}
@media (max-width:780px){ #stars{ height:120px } }

/* 3) تیتر هیرو خواناتر و درخشان‌تر */
.hero-title{
  font-weight: 800;
  letter-spacing: -.2px;
  text-shadow:
    0 1px 0 rgba(255,255,255,.70),
    0 10px 30px rgba(0,245,208,.25);
}
@media (prefers-color-scheme: dark){
  .hero-title{
    text-shadow:
      0 1px 0 rgba(0,0,0,.35),
      0 10px 30px rgba(0,245,208,.25);
  }
}

/* 4) کارت‌ها و پنل‌ها: کنتراست و عمق بیشتر */
.card,
.panel,
.stat,
.domain,
.feat,
.step{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.94));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
@media (prefers-color-scheme: dark){
  .card,
  .panel,
  .stat,
  .domain,
  .feat,
  .step{
    background: linear-gradient(180deg, rgba(18,28,45,.92), rgba(14,22,36,.90));
    backdrop-filter: blur(6px);
  }
}

/* کارت شیشه‌ای هیرو زیباتر */
.card-hero{
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid var(--line);
}
@media (prefers-color-scheme: dark){
  .card-hero{ background: rgba(15,24,38,.55); }
}

/* 5) قرص‌های متریک و تگ‌ها خواناتر */
.pill-metrics li,
.point,
.tag{
  background: color-mix(in srgb, var(--bg-soft) 85%, white);
  border: 1px solid var(--line);
  color: #4a5a70;
}
@supports not (color-mix: in srgb, red 50%, white){
  .pill-metrics li, .point, .tag{ background: #f3f7fb; }
}
@media (prefers-color-scheme: dark){
  .pill-metrics li, .point, .tag{ color:#a9b7cb; }
}

/* 6) متن‌ها کمی شارپ‌تر و خواناتر */
.hero-lead { color: var(--ink-2); }
.muted { color: #71839a; }
@media (prefers-color-scheme: dark){
  .hero-lead { color: #d6e1f0; }
  .muted { color: #9fb0c7; }
}

/* 7) دکمه CTA با وضوح بیشتر روی هر پس‌زمینه */
.btn-cta{
  background: linear-gradient(180deg, #00f5d0, #5df0e0);
  color: #052a23;
  border: none;
  box-shadow: 0 10px 28px rgba(0,245,208,.28);
}
.btn-cta:hover{ transform: translateY(-2px) scale(1.01); }

/* 8) سکشن‌های مهم کمی تفکیک بصری بگیرند */
.section--stats{ 
  background:
    radial-gradient(800px 220px at 10% 10%, rgba(0,245,208,.18), transparent 60%),
    var(--bg-soft);
}

/* 9) فوکوس قابل‌دید (دسترسی + زیبایی) */
:focus-visible{
  outline: 3px solid rgba(0,245,208,.9);
  outline-offset: 2px;
  border-radius: 10px;
}
/* ================= MENTORS: center + prettier cards ================= */

/* تیتر و متن زیرتیتر وسط‌چین */
#mentors .section-title,
#mentors + .muted,
.mentors-center { text-align: center; }

/* گرید وسط‌چین و واکنش‌گرا (fallback: روی همهٔ .cards-4) */
#mentors .cards-4,
.cards-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  justify-content: center;   /* خود گرید وسط */
  justify-items: center;     /* آیتم‌ها وسط در هر سلول */
}

/* کارت‌های منتورها — شیشه‌ای، عمیق، چشم‌نواز */
#mentors .card,
.cards-4 .card{
  width: min(100%, 320px);
  text-align: center;
  position: relative;
  padding: 22px 22px 26px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.94));
  box-shadow: 0 16px 40px rgba(10,20,32,.10);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@media (prefers-color-scheme: dark){
  #mentors .card, .cards-4 .card{
    background: linear-gradient(180deg, rgba(18,28,45,.92), rgba(14,22,36,.90));
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
    backdrop-filter: blur(6px);
  }
}

/* هِدر کارت و متن */
#mentors .card h3, .cards-4 .card h3{ margin: 0 0 8px; font-weight: 800; }
#mentors .card p,  .cards-4 .card p{ margin: 0; color: var(--muted); }

/* تبدیل کارت افقی (.card--h) به کارت مینیمالِ وسط‌چین */
#mentors .card--h, .cards-4 .card--h{
  display: block;           /* به‌جای فلکس افقی */
  padding-inline-end: 56px; /* جا برای بج کناری */
}

/* بج حرف (A/C/D/P) به‌صورت دایره فیکس کنار کارت */
#mentors .card .avatar, .cards-4 .card .avatar{
  position: absolute;
  inset-inline-end: 14px;
  top: 14px;
  width: 38px; height: 38px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: #eef4fa;
  border: 1px solid var(--line);
  color: #5b6b80;
  font-weight: 800;
}

/* هاور چشم‌نواز */
#mentors .card:hover, .cards-4 .card:hover{
  transform: translateY(-4px);
  border-color: rgba(0,245,208,.35);
  box-shadow: 0 18px 44px rgba(10,20,32,.14);
}

/* لینکِ "پروفایل کامل…" وسط‌چین و کمی برجسته‌تر */
#mentors .muted, .mentors-note{
  text-align: center;
  margin-top: 10px;
  font-size: .98rem;
}
#mentors .muted a{ font-weight: 700 }
/* ================= FLOW CARDS with ARROWS ================= */

/* گرید 5ستونی: کارت-فلش-کارت-فلش-کارت */
.flow{
  display:grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap:14px;
  align-items:stretch;
  margin-top:14px;
  position:relative;
  z-index:2; /* روی بک‌گراندهای تزئینی بماند */
}

/* کارت‌ها: جمع‌وجور، خوانا، با عمق مناسب */
.flow-card{
  text-align:center;
  padding:16px 14px 18px;
  border-radius:16px;
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.94));
  box-shadow: var(--shadow);
  display:grid; place-items:center;
}
.flow-title{
  margin:0 0 6px;
  font-size: clamp(15px, 2.2vw, 18px);
  font-weight:800;
  letter-spacing:-.2px;
}
.flow-sub{
  margin:0; color:var(--muted); font-size:.95rem;
}

/* فلش بین کارت‌ها (RTL → ← به چپ) */
.flow-arrow{
  align-self:center;
  width:48px; height:20px; position:relative;
}
.flow-arrow::before{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  inset-inline:0 auto;  /* برای RTL: خط از راست به چپ */
  height:2px;
  background: linear-gradient(270deg, var(--brand), rgba(0,245,208,.25));
  border-radius:2px;
}
.flow-arrow::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  left:-2px; /* سرِ فلش در چپ (جهت ←) */
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:8px solid var(--brand);
}

/* دارک‌مود هماهنگ */
@media (prefers-color-scheme: dark){
  .flow-card{
    background: linear-gradient(180deg, rgba(18,28,45,.92), rgba(14,22,36,.90));
    backdrop-filter: blur(6px);
  }
  .flow-arrow::before{ background: linear-gradient(270deg, rgba(0,245,208,.8), rgba(0,245,208,.15)); }
  .flow-arrow::after{ border-left-color: rgba(0,245,208,.85); }
}

/* موبایل: کارت‌ها زیر هم + فلش رو به پایین */
@media (max-width: 900px){
  .flow{
    grid-template-columns: 1fr;
    gap:10px;
  }
  .flow-arrow{
    width:16px; height:26px; margin:2px auto;
  }
  .flow-arrow::before{ width:2px; height:100%; left:50%; transform:translateX(-50%); background: linear-gradient(180deg, var(--brand), rgba(0,245,208,.25)); }
  .flow-arrow::after{
    left:50%; transform:translateX(-50%); top:auto; bottom:-2px;
    border-left:6px solid transparent; border-right:6px solid transparent;
    border-top:8px solid var(--brand);
  }
}
/* ===== Diagonal gradient slogan over hero card ===== */
.card-hero{ position:relative; overflow:hidden; }
.slogan-ribbon{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  display:grid; place-items:center;
}

/* خط محوِ قطری پشت متن (هاله‌ی زیبا) */
.slogan-ribbon::before{
  content:"";
  position:absolute; left:-12%; right:-12%; top:50%;
  height:10px; transform:translateY(-50%) rotate(-14deg);
  background: linear-gradient(90deg,
              rgba(0,245,208,.35),
              rgba(93,240,224,.25),
              rgba(0,194,255,.20),
              rgba(0,245,208,.18));
  filter: blur(10px);
  border-radius:999px;
}

/* متن گرادیانیِ قطری */
.slogan-text{
  display:inline-block;
  transform: rotate(-14deg);
  font-weight: 900;
  font-size: clamp(22px, 3.8vw, 44px);
  letter-spacing: -.2px;
  line-height: 1.1;
  background: linear-gradient(90deg, #00f5d0, #5df0e0, #00c2ff, #00f5d0);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 1px 0 rgba(255,255,255,.75),
    0 12px 30px rgba(0,245,208,.25);
  animation: sloganShift 8s linear infinite;
}

/* حرکت آرام گرادیان متن */
@keyframes sloganShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* هم‌خوان با دارک‌مود */
@media (prefers-color-scheme: dark){
  .slogan-text{
    text-shadow:
      0 1px 0 rgba(0,0,0,.35),
      0 12px 30px rgba(0,245,208,.25);
  }
}