/* ================================
   Root tokens
   ================================ */
:root{
  /* Brand (Blue) */
  --brand-50:#eef5ff; --brand-100:#dae7ff; --brand-200:#b4ceff; --brand-300:#86b1ff;
  --brand-400:#5894ff; --brand-500:#2D7FF9; --brand-600:#1F6AE5; --brand-700:#1B56BE;
  --brand-800:#164395; --brand-900:#112f6a;

  /* Accent & Status (base) */
  --accent:#00B7FF;
  --success:#0BA360; --warning:#F59E0B; --danger:#EF4444;

  /* Surfaces & Text */
  --bg:#F7FAFC;
  --surface:#FFFFFF;
  --surface-2:#F2F6FA;
  --text:#0B1220;
  --muted:#5A667A;
  --line:rgba(15,23,42,.08);
  --ring:0 0 0 3px rgba(45,127,249,.25);

  /* Radii & Shadows */
  --radius:16px; --radius-sm:12px; --radius-lg:24px;
  --shadow-sm:0 2px 8px rgba(17,24,39,.06);
  --shadow-md:0 10px 30px rgba(11,18,32,.08);

  /* Focus */
  --focus-ring:#2D7FF9; /* = brand-500 */

  /* Status dark shades for ≥4.5:1 contrast on white */
  --success-600:#16A34A; --success-700:#15803D;
  --warning-600:#D97706; --warning-700:#B45309;
  --danger-600:#E5484D;  --danger-700:#B91C1C;

  /* Aliases for legacy usage */
  --fg: var(--text);
  --primary: var(--brand-500);
  --card: var(--surface);
  --bg-soft: var(--surface-2);

  /* Type scale (responsive) */
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-900: clamp(2.2rem, 2vw + 1.6rem, 3.2rem);
  --fs-800: clamp(1.8rem, 1.5vw + 1.2rem, 2.4rem);
  --fs-700: clamp(1.4rem, 1vw + 1rem, 1.8rem);
  --fs-600: 1.25rem; --fs-500: 1.125rem; --fs-400: 1rem;
}

/* ================================
   Base / Reset
   ================================ */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family:var(--font-sans); line-height:1.6;
}
img{max-width:100%; display:block}

a {
  transition: color .2s ease-out, text-decoration-thickness .2s ease-out;
}

a {
  color: var(--accent);
  text-decoration: none; /* delete under-line */
  text-underline-offset: 2px; /* اadd under-line if needed */
}
a:hover{ text-decoration-thickness:2px }

/* Layout helpers */
.container{max-width:1160px; margin:0 auto; padding:0 18px}
.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.tiny{font-size:.8rem}

/* ================================
   Accessibility
   ================================ */
/* Skip link (one canonical version) */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:16px; top:16px; width:auto; height:auto;
  background:#fff; color:var(--text);
  padding:10px 14px; border-radius:10px; box-shadow:var(--shadow-sm);
}

/* Visually hidden but SR-readable */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Keyboard focus (single authoritative rule) */
:where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:2px;
  border-radius:10px;
}
:where(button[disabled], a[aria-disabled="true"]){
  pointer-events:none; opacity:.55;
}

/* ================================
   Global Micro-interactions
   ================================ */
* {
  transition: 
    color .2s ease-out,
    background-color .2s ease-out,
    border-color .2s ease-out,
    box-shadow .2s ease-out,
    transform .2s ease-out;
}

/* ================================
   Buttons
   ================================ */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:12px; font-weight:600;
  line-height:1; border:1px solid transparent;
}
.btn--primary{ background:var(--brand-500); color:#fff; border-color:var(--brand-500) }
.btn--primary:hover{ background:var(--brand-600) }
.btn--primary:focus-visible{ outline-color:var(--focus-ring) }
.btn--outline{ background:#fff; color:var(--text); border-color:var(--line) }
.btn--outline:hover{ background:#F2F6FA }

/* Hover & active states – Buttons */
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}


/* ================================
   Navbar (Glass Light)
   ================================ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:background .3s ease;
}
.nav__inner{
  height:68px; display:flex; align-items:center; justify-content:space-between;
  max-width:1200px; margin:0 auto; padding:0 24px;
}
.brand{ display:flex; align-items:center; gap:10px; color:var(--text) }
.brand__logo{
  width:36px; height:36px; display:grid; place-items:center;
  background:var(--brand-500); color:#fff; border-radius:12px;
  font-weight:900; font-size:1.25rem;
}
.nav__links{ display:flex; gap:24px }
.nav__links a{
  color:var(--muted); font-weight:500; text-decoration:none; transition:color .2s ease;
}
.nav__links a:hover{ color:var(--text) }
.nav__cta{ display:flex; gap:10px }
.nav__burger{ display:none; background:none; border:0; cursor:pointer }
.nav__burger span{
  display:block; width:22px; height:2px; background:var(--text); margin:4px 0;
}

/* ================================
   Hero
   ================================ */
.hero{
  position:relative; padding:96px 0 120px;
  background:linear-gradient(180deg,#fff 0%, #F7FAFC 100%);
}
.hero__grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;
}
@media (max-width:980px){ .hero__grid{ grid-template-columns:1fr } }
.hero h1{
  font-size:var(--fs-900); line-height:1.1; letter-spacing:-.02em; color:var(--text);
}
.hero .muted{ color:var(--muted) }
.hero .lead{ font-size:var(--fs-500); color:var(--muted); margin-top:14px }
.hero__actions{ display:flex; gap:12px; margin-top:20px; flex-wrap:wrap }

/* Blue blobs */
.hero__blob{ position:absolute; border-radius:999px; pointer-events:none }
.hero__blob--tr{
  top:-120px; right:-120px; width:560px; height:560px; filter:blur(40px); opacity:.25;
  background:radial-gradient(60% 60% at 50% 50%, #2D7FF966 0%, #00B7FF44 35%, transparent 70%);
}
.hero__blob--bl{
  left:-160px; bottom:-160px; width:680px; height:680px; filter:blur(40px); opacity:.25;
  background:radial-gradient(60% 60% at 50% 50%, #00B7FF44 0%, #2D7FF933 35%, transparent 70%);
}

/* ================================
   Device (light card)
   ================================ */
.device{
  background:#fff; border:1px solid var(--line);
  border-radius:20px; box-shadow:var(--shadow-md); overflow:hidden;
}
.device__top{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--line); background:#fff;
}
.device__body{ display:flex; gap:16px; padding:16px; background:#fff }

/* ================================
   Sections & Layout
   ================================ */
.section{ padding:80px 0 }
.section--soft{ background:var(--surface-2); border-top:1px solid var(--line) }
.section--border{ background:#fff; border-block:1px solid var(--line) }
.headrow{ display:flex; align-items:center; justify-content:space-between; gap:16px }

/* Grid */
.grid4{ display:grid; gap:20px; grid-template-columns:repeat(4,minmax(0,1fr)) }
.grid3{ display:grid; gap:20px; grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:980px){
  .grid4{ grid-template-columns:repeat(2,1fr) }
  .grid3{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:640px){
  .grid4,.grid3{ grid-template-columns:1fr }
}

/* Badge */
.badge{ width:36px; height:36px; border-radius:10px; background:#2D7FF926 }

/* ================================
   Cards
   ================================ */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:24px; transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md) }

.card {
  transition: box-shadow .25s ease-out, transform .25s ease-out;
}

.card:active {
  transform: translateY(0);
}

/* ================================
   Insights posts
   ================================ */
.post{
  overflow:hidden; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease;
}
.post:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md) }
.post .thumb{
  height:180px;
  background:linear-gradient(45deg, rgba(45,127,249,.15), rgba(0,183,255,.15));
}
.post__body{ padding:20px }
.post__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:10px }

/* ================================
   Footer
   ================================ */
.footer{ padding:60px 0; color:var(--muted) }
.footer__grid{ display:grid; gap:22px; grid-template-columns:repeat(4,minmax(0,1fr)) }
.footer .brand{ display:flex; align-items:center; gap:10px; margin-bottom:8px }
.footer .brand__logo{
  width:32px; height:32px; display:grid; place-items:center;
  background:var(--primary); color:#000; border-radius:10px; font-weight:900;
}
.footer h4{ color:var(--text); margin:0 0 8px 0 }
.footer ul{ list-style:none; padding:0; margin:0 }
.footer li{ margin:6px 0 }
.footer a{ color:var(--muted) }
.footer a:hover{ color:var(--text) }

/* ================================
   📄 Footer Legal (Copy & Year)
   ================================ */
.footer__legal {
  margin-top: 36px;              
  padding-top: 24px;             
  border-top: 1px solid var(--line); 
  font-size: 0.95rem;            
  line-height: 1.6;
  text-align: center;           
  color: var(--muted);           
}
/* for mobile  */
@media (max-width: 640px) {
  .footer__legal {
    margin-top: 28px;
    font-size: 1rem;    
    padding-top: 20px;
  }
}

/* ================================
   Components: Status & Alert
   ================================ */
.status{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; line-height:1;
  padding:6px 10px; border-radius:999px;
  background:#fff; border:1px solid var(--line);
}
.status__icon{ font-size:10px } /* ● */
.status--success{ color:var(--success-700) }
.status--warning{ color:var(--warning-700) }
.status--danger { color:var(--danger-700) }

.alert{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 14px; border-radius:12px;
  border:1px solid var(--line); background:#fff;
}
.alert__icon{ font-weight:700; line-height:1; margin-top:2px }
.alert__body{ color:var(--text) }
.alert__desc{ color:var(--muted); margin-top:4px; font-weight:400 }

/* ================================
   Responsive (nav & hero extras)
   ================================ */
@media (max-width:980px){
  .hero__grid{ grid-template-columns:1fr }
  .device__body{ grid-template-columns:1fr }
  .grid4{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .grid3{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .nav__links,.nav__cta{ display:none }
  .nav__burger{ display:block }
}
@media (max-width:640px){
  .grid3{ grid-template-columns:1fr }
  .grid4{ grid-template-columns:1fr }
}

/* ---- Accessible, responsive data tables ---- */
.responsive-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}

.responsive-table:focus {
  outline: 2px solid var(--focus, #3b82f6);
  outline-offset: 2px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.table caption {
  caption-side: top;
  text-align: left;
  color: var(--muted, #6b7280);
  padding: .25rem 0 .5rem;
}

.table thead th {
  text-align: left;
  border-bottom: 2px solid var(--border, #e5e7eb);
  padding: .75rem 1rem;
  white-space: nowrap;
}

.table td,
.table th[scope="row"] {
  border-bottom: 1px solid var(--border, #e5e7eb);
  padding: .75rem 1rem;
  vertical-align: top;
}

.table th[scope="row"] { font-weight: 600; }

.table .num {
  text-align: right;
  white-space: nowrap;
}

.table tbody tr:nth-child(odd) {
  background: var(--surface-subtle, #f9fafb);
}

@media (max-width: 640px) {
  .table thead th,
  .table td,
  .table th[scope="row"] { padding: .5rem .75rem; }
}

.table thead th.num { 
  text-align: right;
}

.table .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.table { 
  table-layout: fixed; 
}

/* ===== Pro Data Table (accessible + responsive) ===== */
.responsive-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  background: var(--surface, #fff);
  box-shadow: 0 1px 0 var(--border, #e5e7eb) inset;
}

.responsive-table:focus {
  outline: 2px solid var(--focus, #3b82f6);
  outline-offset: 2px;
}

/* ستون‌بندی پایدار و هم‌تراز */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;                 /* colgroup دقیق اجرا می‌شود */
  font-variant-numeric: tabular-nums;  /* اعداد هم‌عرض */
}

.table caption {
  caption-side: top;
  text-align: left;
  color: var(--muted, #6b7280);
  padding: .25rem 0 .75rem;
  font-size: .95rem;
}

/* هدر چسبنده برای اسکرول افقی */
.table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(#fff, #fff);
  text-align: left;
  font-weight: 700;
  border-bottom: 2px solid var(--border, #e5e7eb);
  padding: .9rem 1rem;
  white-space: nowrap;
}

/* بدنه جدول */
.table tbody th[scope="row"],
.table td {
  border-bottom: 1px solid var(--border, #e5e7eb);
  padding: 1rem;
  vertical-align: middle;
}

/* ردیف‌های گورخری ملایم */
.table tbody tr:nth-child(odd) {
  background: var(--surface-subtle, #fafafa);
}

/* هم‌ترازی ستون عددی (سرستون + سلول‌ها) */
.table thead th.num,
.table td.num { text-align: right; }

/* جلوگیری از شکستن واحدها مثل 1,000 ms */
.table .num { white-space: nowrap; }

/* افکت ریز hover برای خوانایی */
.table tbody tr:hover {
  background: color-mix(in srgb, var(--surface-subtle, #fafafa) 70%, #fff 30%);
}

/* موبایل: کمی فشرده‌تر */
@media (max-width: 640px) {
  .table thead th { padding: .7rem .75rem; font-size: .95rem; }
  .table tbody th[scope="row"], .table td { padding: .7rem .75rem; }
}