/* ==========================================================================
   Kazemi AI Agency — design tokens
   Palette: paper / ink / cobalt / amber
   Type: Space Grotesk (display) + Inter (body)
   ========================================================================== */

:root{
  --paper:       #F8F9FA;
  --paper-2:     #EDEFF3;
  --ink:         #0F172A;
  --ink-70:      #334155;
  --muted:       #64748B;
  --line:        #E2E8F0;
  --cobalt:      #2563EB;
  --cobalt-dim:  #EFF6FF;
  --amber:       #F59E0B;
  --white:       #FFFFFF;
  --radius-s:    6px;
  --radius-m:    12px;
  --maxw:        1180px;
  --space-1:     8px;
  --space-2:     16px;
  --space-3:     24px;
  --space-4:     40px;
  --space-5:     64px;
  --space-6:     96px;
  font-size: 17px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: "Space Grotesk", "Inter", sans-serif;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; }
h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700; }
h3{ font-size: 1.25rem; font-weight: 600; color: var(--ink); }
p{ margin: 0 0 var(--space-2); color: var(--ink-70); max-width: 62ch; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }
ul{ padding: 0; margin: 0; list-style: none; }
button{ font-family: inherit; cursor: pointer; }

.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-3); }
.section{ padding: var(--space-6) 0; }
.section--tight{ padding: var(--space-5) 0; }
.section--alt{ background: var(--paper-2); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 26px; border-radius: var(--radius-s);
  font-weight: 600; font-size: 0.95rem; border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--ink); color: var(--white); }
.btn-primary:hover{ background: var(--cobalt); }
.btn-outline{ border-color: var(--ink); color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color: var(--white); }
.btn-accent{ background: var(--cobalt); color: var(--white); }
.btn-accent:hover{ background: var(--ink); }
.btn-block{ width: 100%; }
.btn-sm{ padding: 9px 16px; font-size: 0.85rem; }

/* ---------- header / nav ---------- */
.site-header{
  position: sticky; top: 0; z-index: 40;
  background: rgba(248,249,250,0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height: 76px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1.15rem; color: var(--ink); }
.brand-mark{ width: 30px; height: 30px; border-radius: 8px; background: var(--ink);
  display:flex; align-items:center; justify-content:center; color: var(--amber); font-size: 0.85rem; font-weight:700; flex-shrink:0; }
.nav-links{ display:flex; align-items:center; gap: var(--space-4); }
.nav-links a{ font-size: 0.95rem; color: var(--ink-70); font-weight:500; position:relative; padding: 4px 0; }
.nav-links a:hover, .nav-links a.active{ color: var(--ink); font-weight: 600; }
.nav-links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--cobalt); }
.nav-cta{ display:flex; align-items:center; gap: var(--space-2); }
.nav-toggle{ display:none; background:none; border:none; width:32px; height:24px; position:relative; }
.nav-toggle span{ position:absolute; left:0; right:0; height:2px; background:var(--ink); transition: all .2s ease; }
.nav-toggle span:nth-child(1){ top:0; } .nav-toggle span:nth-child(2){ top:11px; } .nav-toggle span:nth-child(3){ bottom:0; }

@media (max-width: 860px){
  .nav-links{ position:fixed; top:76px; left:0; right:0; background:var(--paper); flex-direction:column; align-items:flex-start;
    padding: var(--space-3); border-bottom:1px solid var(--line); transform: translateY(-8px); opacity:0; pointer-events:none; transition: all .2s ease; gap: var(--space-2); }
  .nav-links.open{ transform: translateY(0); opacity:1; pointer-events:auto; }
  .nav-toggle{ display:block; }
  .nav-cta .btn-outline{ display:none; }
}

/* ---------- hero schematic ---------- */
.hero{ padding: var(--space-6) 0 var(--space-5); }
.hero-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-5); align-items:center; }
.eyebrow{ color: var(--cobalt); font-weight: 600; font-size: 0.9rem; margin-bottom: var(--space-2); display:block; }
.hero p.lead{ font-size: 1.15rem; max-width: 46ch; color: var(--ink-70); }
.hero-actions{ display:flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap:wrap; }
.hero-stats{ display:flex; gap: var(--space-4); margin-top: var(--space-5); }
.hero-stats div strong{ display:block; font-family:"Space Grotesk",sans-serif; font-size:1.6rem; color: var(--ink); }
.hero-stats div span{ color: var(--muted); font-size: 0.85rem; }

.schematic-wrap{ position:relative; }
.schematic-wrap svg{ width:100%; height:auto; }
.schem-line{ fill:none; stroke:var(--ink); stroke-width:1.4; stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 1.8s ease forwards; }
.schem-line.delay1{ animation-delay: .2s; } .schem-line.delay2{ animation-delay: .5s; } .schem-line.delay3{ animation-delay: .8s; }
.schem-block{ opacity:0; animation: fadein .6s ease forwards; }
.schem-block.delay1{ animation-delay: 1.1s; } .schem-block.delay2{ animation-delay: 1.3s; } .schem-block.delay3{ animation-delay: 1.5s; } .schem-block.delay4{ animation-delay:1.7s; }
.schem-dot{ fill: var(--amber); opacity:0; animation: fadein .4s ease forwards; animation-delay: 1.9s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fadein{ to{ opacity:1; } }

@media (max-width: 900px){ .hero-grid{ grid-template-columns:1fr; } .hero-stats{ flex-wrap:wrap; row-gap: var(--space-2); } }

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- cards ---------- */
.grid{ display:grid; gap: var(--space-3); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px){ .grid-3{ grid-template-columns: 1fr 1fr; } .grid-2{ grid-template-columns: 1fr; } }
@media (max-width: 640px){ .grid-3{ grid-template-columns: 1fr; } }

.card{ 
  background: var(--white); 
  border: 1px solid var(--line); 
  border-radius: var(--radius-m); 
  padding: var(--space-3); 
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* service / feature rows */
.feature-row{ display:grid; grid-template-columns: 40px 1fr; gap: var(--space-2); padding: var(--space-3) 0; border-top:1px solid var(--line); }
.feature-row:last-child{ border-bottom:1px solid var(--line); }
.feature-num{ font-family:"Space Grotesk",sans-serif; color: var(--muted); font-weight: 600; }

/* ---------- portfolio ---------- */
.portfolio-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-3); }
@media (max-width: 900px){ .portfolio-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .portfolio-grid{ grid-template-columns: 1fr; } }
.work-card{ 
  background: var(--white); 
  border: 1px solid var(--line); 
  border-radius: var(--radius-m); 
  overflow: hidden; 
  cursor: pointer; 
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; 
}
.work-card:hover{ 
  border-color: var(--ink); 
  transform: translateY(-4px);
  box-shadow: 0 12px 20px -5px rgba(0,0,0,0.06);
}
.work-thumb{ height: 190px; display:flex; align-items:center; justify-content:center; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:1.4rem; color: var(--white); }
.work-body{ padding: var(--space-2) var(--space-3) var(--space-3); }
.work-body h3{ color: var(--ink) !important; margin-bottom: 4px; }
.work-tag{ font-size:0.78rem; color: var(--cobalt); font-weight:600; }

/* lightbox */
.lightbox-backdrop{ position:fixed; inset:0; background: rgba(16,25,43,0.55); display:none; align-items:center; justify-content:center; z-index:100; padding: var(--space-3); }
.lightbox-backdrop.open{ display:flex; }
.lightbox{ background: var(--white); border-radius: var(--radius-m); max-width: 560px; width:100%; padding: var(--space-4); position:relative; }
.lightbox-close{ position:absolute; top: 16px; right:16px; background:none; border:none; font-size:1.3rem; color: var(--muted); }

/* ---------- pricing / shop (FIXED CONTRAST & VISIBILITY) ---------- */
.price-card{ 
  background: var(--white) !important; 
  border: 1px solid var(--line); 
  border-radius: var(--radius-m); 
  padding: var(--space-4); 
  display: flex; 
  flex-direction: column; 
  gap: var(--space-2); 
  position: relative; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.price-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.07);
}
.price-card h3{
  color: var(--ink) !important;
  font-size: 1.35rem;
  font-weight: 700;
}
.price-card.featured{ 
  border: 2px solid var(--cobalt) !important; 
}
.price-badge{ 
  position: absolute; 
  top: -13px; 
  right: 24px; 
  background: var(--amber); 
  color: var(--ink); 
  font-size: 0.75rem; 
  font-weight: 700; 
  padding: 4px 12px; 
  border-radius: 20px; 
}
.price-amount{ 
  font-family: "Space Grotesk", sans-serif; 
  font-size: 2.5rem; 
  font-weight: 700; 
  color: var(--ink) !important; 
}
.price-amount span{ 
  font-size: 0.95rem; 
  color: var(--muted) !important; 
  font-weight: 500; 
}
.price-list{ margin: var(--space-2) 0; }
.price-list li{ 
  display: flex; 
  gap: 10px; 
  padding: 8px 0; 
  color: var(--ink-70) !important; 
  font-size: 0.93rem; 
  font-weight: 500;
  border-bottom: 1px dashed var(--line);
}
.price-list li:last-child{ border-bottom: none; }
.price-list li::before{ 
  content: "✓"; 
  color: var(--cobalt); 
  font-weight: 700;
  flex-shrink: 0; 
}

.seo-package{ 
  background: var(--ink); 
  color: var(--white); 
  border-radius: var(--radius-m); 
  padding: var(--space-5); 
  display: grid; 
  grid-template-columns: 1.2fr 0.8fr; 
  gap: var(--space-4); 
  align-items: center; 
  margin-top: var(--space-4); 
}
.seo-package h2, .seo-package h3{ color: var(--white) !important; }
.seo-package p{ color: #C7CEDD !important; }
.seo-package .price-amount{ color: var(--amber) !important; }
@media (max-width: 860px){ .seo-package{ grid-template-columns:1fr; } }

/* ---------- product single page ---------- */
.product-layout{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items:start; }
@media (max-width: 900px){ .product-layout{ grid-template-columns:1fr; } }
.product-visual{ border-radius: var(--radius-m); aspect-ratio: 4/3; display:flex; align-items:center; justify-content:center; }
.checkout-box{ border:1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-3); margin-top: var(--space-3); background: var(--white); }
.crypto-row{ display:flex; align-items:center; gap: var(--space-2); padding: 10px 0; border-bottom:1px solid var(--line); font-size:0.9rem; color: var(--ink); }
.crypto-row:last-child{ border-bottom:none; }

/* ---------- forms ---------- */
.form-field{ margin-bottom: var(--space-2); }
.form-field label{ display:block; font-size:0.85rem; font-weight:600; margin-bottom:6px; color: var(--ink); }
.form-field input, .form-field textarea{
  width:100%; padding: 12px 14px; border-radius: var(--radius-s); border:1px solid var(--line);
  background: var(--white); font-family:inherit; font-size:0.95rem; color: var(--ink);
}
.form-field input:focus, .form-field textarea:focus{ outline: 2px solid var(--cobalt); outline-offset:1px; border-color: var(--cobalt); }
.auth-card{ max-width: 420px; margin: 0 auto; background: var(--white); border:1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-4); box-shadow: 0 4px 16px rgba(0,0,0,0.04); }
.oauth-row{ display:flex; flex-direction:column; gap: 10px; margin: var(--space-3) 0; }
.oauth-btn{ display:flex; align-items:center; justify-content:center; gap:10px; padding:11px; border:1px solid var(--line); border-radius: var(--radius-s); font-weight:600; font-size:0.9rem; background:var(--white); color: var(--ink); }
.oauth-btn:hover{ border-color: var(--ink); background: var(--paper-2); }
.divider{ display:flex; align-items:center; gap:12px; color: var(--muted); font-size:0.8rem; margin: var(--space-2) 0; }
.divider::before,.divider::after{ content:""; flex:1; height:1px; background: var(--line); }

/* ---------- dashboard ---------- */
.dash-layout{ display:grid; grid-template-columns: 230px 1fr; gap: var(--space-4); }
@media (max-width: 800px){ .dash-layout{ grid-template-columns:1fr; } }
.dash-side{ border-right:1px solid var(--line); padding-right: var(--space-3); }
.dash-side a{ display:block; padding: 10px 12px; border-radius: var(--radius-s); font-size:0.92rem; color: var(--ink-70); font-weight:500; margin-bottom:4px; }
.dash-side a.active, .dash-side a:hover{ background: var(--cobalt-dim); color: var(--cobalt); font-weight: 600; }
.dash-stat{ background:var(--white); border:1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-3); }
.dash-stat strong{ font-family:"Space Grotesk",sans-serif; font-size:1.7rem; display:block; color: var(--ink); }
table.orders{ width:100%; border-collapse: collapse; background: var(--white); border:1px solid var(--line); border-radius: var(--radius-m); overflow:hidden; }
table.orders th, table.orders td{ text-align:left; padding: 12px 16px; font-size:0.9rem; border-bottom:1px solid var(--line); color: var(--ink); }
table.orders th{ color: var(--muted); font-weight:600; background: var(--paper-2); }
.status-pill{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:0.78rem; font-weight:600; }
.status-live{ background:#E4F6EA; color:#1E8E4A; }
.status-progress{ background:#FFF3DC; color:#9A6A00; }

/* ---------- blog (FIXED CONTRAST & CARDS) ---------- */
.article-card,
.blog-card,
.post-card { 
  background: var(--white) !important; 
  border: 1px solid var(--line) !important; 
  border-radius: var(--radius-m) !important; 
  padding: var(--space-3) !important; 
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.article-card:hover,
.blog-card:hover,
.post-card:hover {
  transform: translateY(-4px);
  border-color: var(--cobalt) !important;
  box-shadow: 0 10px 20px -4px rgba(0,0,0,0.08);
}
.article-card h2, .article-card h3,
.blog-card h2, .blog-card h3,
.post-card h2, .post-card h3 {
  color: var(--ink) !important;
  font-weight: 700 !important;
  margin-top: 6px;
  line-height: 1.35;
}
.article-card p, .blog-card p, .post-card p {
  color: var(--ink-70) !important;
  font-size: 0.93rem;
}
.article-card .work-tag,
.blog-card .tag,
.post-card .category { 
  display: inline-block; 
  color: var(--cobalt) !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
}
.article-meta,
.blog-card time,
.post-card .meta { 
  color: var(--muted) !important; 
  font-size: 0.82rem !important; 
  margin-top: 10px; 
  display: block;
}
.article-body{ max-width: 68ch; margin: 0 auto; color: var(--ink-70); }
.article-body h2{ margin-top: var(--space-4); color: var(--ink); }
.article-body p{ max-width:none; color: var(--ink-70); }
.toc{ border:1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-3); margin: var(--space-4) 0; background: var(--white); }
.toc a{ display:block; padding: 4px 0; color: var(--cobalt); font-size:0.9rem; font-weight: 500; }

/* ---------- about / person schema page ---------- */
.about-hero{ display:grid; grid-template-columns: 200px 1fr; gap: var(--space-4); align-items:center; }
@media (max-width: 700px){ .about-hero{ grid-template-columns:1fr; } }
.avatar{ width:200px; height:200px; border-radius: 50%; background: var(--ink); display:flex; align-items:center; justify-content:center; color:var(--amber); font-family:"Space Grotesk",sans-serif; font-size:2.6rem; font-weight:700; }
.social-row{ display:flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap:wrap; }
.social-row a{ border:1px solid var(--line); border-radius: 20px; padding: 6px 14px; font-size:0.85rem; font-weight:600; color: var(--ink); }
.social-row a:hover{ border-color: var(--ink); background: var(--paper-2); }
.timeline{ border-left:2px solid var(--line); padding-left: var(--space-3); margin-top: var(--space-3); }
.timeline-item{ position:relative; padding-bottom: var(--space-4); }
.timeline-item::before{ content:""; position:absolute; left:-29px; top:4px; width:10px; height:10px; border-radius:50%; background: var(--cobalt); }
.timeline-year{ color: var(--cobalt); font-weight:700; font-size:0.85rem; }

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--line); padding: var(--space-5) 0 var(--space-3); background: var(--paper); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-4); }
@media (max-width: 800px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-grid h4{ font-size:0.85rem; text-transform: none; margin-bottom: var(--space-2); color: var(--ink); font-weight: 700; }
.footer-grid a{ display:block; color: var(--muted); font-size:0.9rem; padding: 4px 0; }
.footer-grid a:hover{ color: var(--cobalt); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; margin-top: var(--space-5); padding-top: var(--space-3); border-top:1px solid var(--line); color: var(--muted); font-size:0.85rem; flex-wrap:wrap; gap: var(--space-2); }

/* ---------- preloader ---------- */
.preloader{
  position:fixed; inset:0; z-index: 200; background: var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.preloader-word{
  font-family:"Space Grotesk",sans-serif; color: var(--white); font-size: 1.1rem; letter-spacing: 0.02em;
  opacity: 0.85;
}
@media (prefers-reduced-motion: reduce){ .preloader{ display:none; } }

/* ---------- marquee strip ---------- */
.marquee-strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding: 18px 0; background: var(--paper-2); }
.marquee-track{ display:flex; gap: 48px; white-space:nowrap; width: max-content; }
.marquee-track span{ font-family:"Space Grotesk",sans-serif; font-size: 1.05rem; color: var(--ink-70); font-weight:500; }
.marquee-track span em{ color: var(--cobalt); font-style: normal; font-weight: 600; }

/* ---------- magnetic buttons ---------- */
.magnetic{ display:inline-block; will-change: transform; }

/* ---------- admin panel ---------- */
.admin-layout{ display:grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 76px); }
@media (max-width: 800px){ .admin-layout{ grid-template-columns: 1fr; } }
.admin-side{ background: var(--ink); color: var(--white); padding: var(--space-3) var(--space-2); }
.admin-side .brand{ color: var(--white); padding: 0 8px; margin-bottom: var(--space-4); }
.admin-tab{ display:flex; align-items:center; gap:10px; padding: 11px 14px; border-radius: var(--radius-s); color: #B9C0D0; font-weight:500; font-size:0.92rem; cursor:pointer; margin-bottom:4px; }
.admin-tab:hover{ background: rgba(255,255,255,0.06); color: var(--white); }
.admin-tab.active{ background: var(--cobalt); color: var(--white); }
.admin-main{ padding: var(--space-4); background: var(--paper); }
.admin-panel{ display:none; }
.admin-panel.active{ display:block; }
.admin-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom: var(--space-3); flex-wrap:wrap; gap:12px; }
.admin-table{ width:100%; border-collapse:collapse; background: var(--white); border:1px solid var(--line); border-radius: var(--radius-m); overflow:hidden; }
.admin-table th, .admin-table td{ text-align:left; padding: 12px 16px; font-size:0.88rem; border-bottom:1px solid var(--line); vertical-align: middle; color: var(--ink); }
.admin-table th{ background: var(--paper-2); color: var(--muted); font-weight:600; }
.admin-table select{ padding:6px 10px; border-radius: var(--radius-s); border:1px solid var(--line); font-family:inherit; font-size:0.85rem; }
.link-btn{ background:none; border:none; color: var(--cobalt); font-weight:600; font-size:0.85rem; padding:0; }
.link-btn.danger{ color:#C0392B; }
.modal-backdrop{ position:fixed; inset:0; background:rgba(16,25,43,0.5); display:none; align-items:center; justify-content:center; z-index:100; padding:var(--space-3); }
.modal-backdrop.open{ display:flex; }
.modal{ background: var(--white); border-radius: var(--radius-m); max-width: 560px; width:100%; padding: var(--space-4); max-height:85vh; overflow-y:auto; }

/* ---------- chatbot widget ---------- */
.chat-toggle{
  position:fixed; bottom: 24px; right: 24px; width:58px; height:58px; border-radius:50%;
  background: var(--ink); color: var(--amber); border:none; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 24px rgba(16,25,43,0.25); z-index: 90; transition: transform .15s ease;
}
.chat-toggle:hover{ transform: scale(1.06); }
.chat-panel{
  position:fixed; bottom: 94px; right: 24px; width: 340px; max-width: calc(100vw - 32px); height: 440px;
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-m); box-shadow: 0 16px 40px rgba(16,25,43,0.18);
  display:none; flex-direction:column; overflow:hidden; z-index: 91;
}
.chat-panel.open{ display:flex; }
.chat-head{ background: var(--ink); color: var(--white); padding: 14px 16px; display:flex; align-items:center; justify-content:space-between; }
.chat-head span{ font-weight:600; font-size:0.95rem; }
.chat-head button{ background:none; border:none; color: var(--white); font-size:1.1rem; }
.chat-body{ flex:1; overflow-y:auto; padding: 14px 16px; display:flex; flex-direction:column; gap:10px; }
.chat-msg{ padding: 9px 13px; border-radius: 12px; font-size: 0.87rem; max-width: 85%; line-height:1.4; }
.chat-msg.bot{ background: var(--paper-2); color: var(--ink); align-self:flex-start; border-bottom-left-radius:2px; }
.chat-msg.user{ background: var(--cobalt); color:var(--white); align-self:flex-end; border-bottom-right-radius:2px; }
.chat-suggest{ display:flex; flex-wrap:wrap; gap:6px; padding: 0 16px 10px; }
.chat-suggest button{ border:1px solid var(--line); background:none; border-radius: 14px; padding: 5px 10px; font-size: 0.76rem; color: var(--ink-70); }
.chat-suggest button:hover{ border-color: var(--cobalt); color: var(--cobalt); }
.chat-input-row{ display:flex; border-top:1px solid var(--line); padding: 10px; gap: 8px; }
.chat-input-row input{ flex:1; border:1px solid var(--line); border-radius: 20px; padding: 9px 14px; font-family:inherit; font-size:0.87rem; color: var(--ink); }
.chat-input-row button{ background: var(--ink); color:var(--white); border:none; border-radius:50%; width:36px; height:36px; flex-shrink:0; }
/* FIX OVERRIDE FOR BLOG & CARDS */
.grid > div,
.grid > article,
[class*="card"] {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 24px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.grid h1, .grid h2, .grid h3, .grid h4,
[class*="card"] h1, [class*="card"] h2, [class*="card"] h3, [class*="card"] h4 {
  color: #0F172A !important;
  font-weight: 700 !important;
}

.grid p, .grid span, .grid time, .grid div,
[class*="card"] p, [class*="card"] span, [class*="card"] time, [class*="card"] div {
  color: #334155 !important;
  opacity: 1 !important;
}

.grid a, [class*="card"] a {
  color: #2563EB !important;
}

/* ==========================================================================
   FORCE FIX: Blog Card Visibility Override
   ========================================================================== */

/* 1. اجبار پس‌زمینه کارت‌ها به سفید و ایجاد مرز مشخص */
.grid > *,
main .grid > *,
section .grid > * {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 24px !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

/* 2. اجبار رنگ عناوین بلاگ (مثل Why your corporate site...) به سرمه‌ای/مشکی کاملاً تیره */
.grid h1, .grid h2, .grid h3, .grid h4,
.grid a,
.grid [class*="title"],
.grid strong {
  color: #0f172a !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  -webkit-text-fill-color: #0f172a !important; /* برای خنثی کردن گریدینت‌ها یا افکت‌های شفافیت */
}

/* 3. اجبار رنگ دسته‌بندی‌ها (مثل SEO, Design, Payments) به آبی پررنگ */
.grid span,
.grid small,
.grid .tag,
.grid [class*="category"],
.grid [class*="tag"] {
  color: #2563eb !important;
  opacity: 1 !important;
  font-weight: 600 !important;
  -webkit-text-fill-color: #2563eb !important;
}

/* 4. اجبار رنگ تاریخ و زمان مطالعه (مثل Aug 2026 · 5 min read) به طوسی خوانا */
.grid time,
.grid p,
.grid [class*="meta"],
.grid [class*="date"] {
  color: #475569 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #475569 !important;
}
/* ==========================================================================
   BUTTON HOVER & CONTRAST FIX
   ========================================================================== */

/* 1. دکمه‌های اصلی و تیره (btn-primary / btn-accent) */
.btn-primary, 
.btn-accent,
button[type="submit"] {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
  border: 1px solid #0F172A !important;
}

/* هاور دکمه‌های تیره: پس‌زمینه آبی، متن سفید کاملاً خوانا */
.btn-primary:hover, 
.btn-accent:hover,
button[type="submit"]:hover {
  background-color: #2563EB !important;
  color: #FFFFFF !important;
  border-color: #2563EB !important;
}

/* 2. دکمه‌های دورخط‌دار و روشن (btn-outline) */
.btn-outline {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #0F172A !important;
}

/* هاور دکمه‌های روشن: پس‌زمینه مشکی، متن اجباراً سفید */
.btn-outline:hover {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
  border-color: #0F172A !important;
}

/* 3. اطمینان از خوانایی تمام تگ‌های داخل دکمه‌ها در حالت هاور (مثل a, span, svgs) */
.btn:hover,
.btn:hover *,
a.btn:hover,
a.btn:hover * {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}
/* ==========================================================================
   FORCE FIX: PRICE CARDS & BUTTON HOVER
   ========================================================================== */

/* ۱. تنظیم وضعیت عادی دکمه وسط (Business Card Button) */
.price-card.featured button,
.price-card.featured a,
.price-card:nth-child(2) button,
.price-card:nth-child(2) a {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
  border: 1px solid #0F172A !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 12px 20px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* ۲. رفع مشکل هاور دکمه وسط (تغییر پس‌زمینه به آبی و اجبار متن به سفید) */
.price-card.featured button:hover,
.price-card.featured a:hover,
.price-card:nth-child(2) button:hover,
.price-card:nth-child(2) a:hover {
  background-color: #2563EB !important;
  color: #FFFFFF !important;
  border-color: #2563EB !important;
}

/* ۳. تنظیم دکمه‌های کناری ($100 و $300) در حالت عادی */
.price-card:nth-child(1) button, .price-card:nth-child(1) a,
.price-card:nth-child(3) button, .price-card:nth-child(3) a {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #0F172A !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 12px 20px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* ۴. رفع مشکل هاور دکمه‌های کناری (پس‌زمینه مشکی و متن اجباراً سفید) */
.price-card:nth-child(1) button:hover, .price-card:nth-child(1) a:hover,
.price-card:nth-child(3) button:hover, .price-card:nth-child(3) a:hover {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
  border-color: #0F172A !important;
}
/* ==========================================================================
   GLOBAL EMERGENCY FIX FOR BUTTON HOVER & TEXT VISIBILITY
   ========================================================================== */

/* ۱. اجبار رنگ متن داخل تمام دکمه‌های با پس‌زمینه تیره به سفید */
[class*="price"] button,
[class*="price"] a,
.btn-primary,
.btn-accent {
  position: relative !important;
  z-index: 1 !important;
}

/* ۲. هدف قرار دادن تمام المان‌های متنی درون دکمه‌های تیره در حالت عادی */
.price-card.featured button *,
.price-card.featured a *,
.price-card:nth-child(2) button *,
.price-card:nth-child(2) a *,
.btn-primary *,
.btn-accent * {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  opacity: 1 !important;
}

/* ۳. رفع کامل مشکل هاور تمام دکمه‌های کارت‌ها */
.price-card button:hover,
.price-card a:hover,
.btn:hover {
  background-color: #2563EB !important; /* رنگ پس‌زمینه در حالت هاور به آبی تغییر می‌کند */
  border-color: #2563EB !important;
}

/* ۴. اجبار رنگ متن همه دکمه‌ها در حالت هاور به سفید کاملاً درخشان */
.price-card button:hover *,
.price-card a:hover *,
.btn:hover *,
.btn-outline:hover,
.btn-outline:hover * {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  opacity: 1 !important;
}

/* ==========================================================================
   FINAL FIX FOR BUTTON HOVER & TEXT COLOR
   ========================================================================== */

/* 1. دکمه کارت وسط (Business - $200): وضعیت عادی */
.price-card.featured .btn-primary,
a.btn-primary {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
  border-color: #0F172A !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* 2. دکمه کارت وسط (Business - $200): وضعیت هاور */
.price-card.featured .btn-primary:hover,
a.btn-primary:hover {
  background-color: #2563EB !important;
  color: #FFFFFF !important;
  border-color: #2563EB !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* 3. دکمه‌های کارت‌های کناری (Starter & Premium): وضعیت عادی */
.price-card .btn-outline,
a.btn-outline {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
}

/* 4. دکمه‌های کارت‌های کناری (Starter & Premium): وضعیت هاور */
.price-card .btn-outline:hover,
a.btn-outline:hover {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
  border-color: #0F172A !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* 5. اطمینان از اعمال رنگ روی تمامی المان‌های زیرمجموعه دکمه‌ها در حالت هاور */
a.btn:hover *,
.btn:hover * {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}