:root{
  --bg:#f5f5f7;
  --bg-panel:#ffffff;
  --ink:#1d1d1f;
  --ink-soft:#6e6e73;
  --ink-faint:#a1a1a6;
  --navy-900:#0a1930;
  --navy-800:#0b2242;
  --navy-700:#123a66;
  --blue:#0a84ff;
  --indigo:#5e5ce6;
  --green:#22c55e;
  --grad-brand: linear-gradient(135deg, #0a1930 0%, #123a66 45%, #0a84ff 100%);
  --grad-accent: linear-gradient(120deg, #0a84ff, #5e5ce6);
  --glass-bg: rgba(255,255,255,0.6);
  --glass-bg-dark: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.5);
  --glass-border-dark: rgba(255,255,255,0.14);
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --shadow-soft: 0 20px 50px -20px rgba(10,25,48,0.25);
  --shadow-card: 0 10px 30px -14px rgba(10,25,48,0.18);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Vazirmatn', system-ui, sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.85;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
.mono{font-family:'JetBrains Mono', monospace;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
.wrap-narrow{max-width:800px; margin:0 auto; padding:0 24px;}

.eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue); font-weight:600;
  display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--grad-accent); display:inline-block;}

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:100px;
  font-weight:700; font-size:14.5px; transition:transform .25s var(--ease), box-shadow .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{background:var(--grad-brand); color:#fff; box-shadow:0 12px 26px -10px rgba(10,25,48,.55);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 32px -10px rgba(10,25,48,.6);}
.btn-ghost{background:#fff; color:var(--navy-800); border:1px solid rgba(10,25,48,.14);}
.btn-ghost:hover{transform:translateY(-2px); box-shadow:0 10px 22px -10px rgba(10,25,48,.25);}
.btn-white{background:#fff; color:var(--navy-800); box-shadow:none;}
.btn-white:hover{transform:translateY(-2px); box-shadow:0 10px 22px -10px rgba(0,0,0,.25);}
.btn-sm{padding:9px 16px; font-size:13.5px;}

/* ---------- HEADER (identical system to main site) ---------- */
header{position:fixed; top:0; right:0; left:0; z-index:100; padding:14px 0;}
.nav-inner{
  max-width:1180px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
  background:var(--glass-bg); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-border); border-radius:100px; padding:10px 12px 10px 22px;
  box-shadow:0 8px 30px -14px rgba(10,25,48,.2); transition:box-shadow .3s;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:16.5px;}
.brand .mark{
  width:36px; height:36px; border-radius:11px; background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:15px;
  box-shadow:0 6px 16px -6px rgba(10,25,48,.5); flex:none;
}
.brand .txt b{display:block; font-size:15px;}
.brand .txt span{display:block; font-size:10.5px; color:var(--ink-soft); font-weight:500; letter-spacing:.02em;}

.nav-links{display:flex; align-items:center; gap:28px;}
.nav-links a{font-size:14px; font-weight:600; color:var(--ink); position:relative; padding:6px 0;}
.nav-links a::after{
  content:""; position:absolute; bottom:0; right:0; left:0; height:2px; background:var(--grad-accent);
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1);}

.nav-cta{display:flex; align-items:center; gap:10px;}
.icon-btn{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(10,25,48,.12); background:#fff; color:var(--navy-800); flex:none;
  transition:transform .25s var(--ease), box-shadow .25s;
}
.icon-btn:hover{transform:translateY(-2px); box-shadow:0 8px 18px -8px rgba(10,25,48,.3);}

.burger{display:none; width:40px; height:40px; border-radius:50%; align-items:center; justify-content:center; background:#fff; border:1px solid rgba(10,25,48,.12); flex:none;}
.burger span{display:block; width:16px; height:2px; background:var(--navy-800); position:relative;}
.burger span::before,.burger span::after{content:""; position:absolute; width:16px; height:2px; background:var(--navy-800); right:0;}
.burger span::before{top:-5px;} .burger span::after{top:5px;}

.mobile-menu{position:fixed; inset:0; z-index:99; background:rgba(10,25,48,.55); backdrop-filter:blur(6px); display:none; opacity:0; transition:opacity .3s;}
.mobile-menu.open{display:block; opacity:1;}
.mobile-menu-panel{
  position:absolute; top:88px; right:16px; left:16px; background:#fff; border-radius:24px; padding:22px;
  display:flex; flex-direction:column; gap:6px; box-shadow:0 30px 60px -20px rgba(10,25,48,.5);
  transform:translateY(-16px); transition:transform .35s var(--ease);
}
.mobile-menu.open .mobile-menu-panel{transform:translateY(0);}
.mobile-menu-panel a{padding:14px 10px; font-weight:700; border-radius:12px; font-size:16px;}
.mobile-menu-panel a:hover{background:var(--bg);}
.mobile-menu-panel .btn{justify-content:center; margin-top:10px;}

/* ---------- ARTICLE HERO (mirrors main hero blob style) ---------- */
.article-hero{
  padding:150px 0 50px;
  background:
    radial-gradient(1100px 460px at 85% -20%, rgba(94,92,230,.14), transparent 60%),
    radial-gradient(900px 440px at 5% 0%, rgba(10,132,255,.12), transparent 55%),
    var(--bg);
}
.breadcrumb{font-size:12.5px; color:var(--ink-soft); display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px;}
.breadcrumb a{font-weight:600; color:var(--blue);}
.article-hero h1{
  font-size:clamp(28px, 4vw, 44px); line-height:1.28; font-weight:800; letter-spacing:-.01em;
  margin:16px 0 16px; color:var(--ink);
}
.article-meta{display:flex; gap:16px; flex-wrap:wrap; color:var(--ink-faint); font-size:13px; margin-bottom:14px;}
.article-meta span.dot{width:4px; height:4px; border-radius:50%; background:var(--ink-faint); align-self:center;}
.lead{font-size:17.5px; color:var(--ink-soft); max-width:680px; line-height:1.9;}

/* ---------- ARTICLE BODY ---------- */
.article-body{padding:10px 0 20px;}
article h2{font-size:23px; font-weight:800; margin:38px 0 14px; color:var(--ink); letter-spacing:-.005em;}
article h3{font-size:17.5px; font-weight:800; margin:22px 0 10px; color:var(--ink);}
article p{font-size:15.5px; color:#3a3a3d; margin-bottom:14px; max-width:720px;}
article ul{margin:0 0 18px; padding-inline-start:22px; max-width:700px;}
article ul li{font-size:15px; color:#3a3a3d; margin-bottom:9px; list-style:disc;}
article strong{color:var(--ink);}

/* ---------- CTA BOX (brand gradient, matches service-card.dark) ---------- */
.cta-box{
  margin:46px 0; padding:32px; border-radius:var(--radius-lg); background:var(--grad-brand); color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  position:relative; overflow:hidden; box-shadow:0 25px 60px -22px rgba(10,25,48,.55);
}
.cta-box::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(320px 200px at 90% 0%, rgba(94,92,230,.4), transparent 60%),
             radial-gradient(260px 180px at 0% 100%, rgba(10,132,255,.3), transparent 60%);
  mix-blend-mode:screen;
}
.cta-box > *{position:relative; z-index:1;}
.cta-box h4{font-size:19px; margin-bottom:6px; font-weight:800;}
.cta-box p{color:rgba(255,255,255,.75); font-size:13.5px; margin:0;}

/* ---------- TAGS ---------- */
.tags{display:flex; gap:8px; flex-wrap:wrap; margin:28px 0;}
.tags span{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; padding:7px 14px; border-radius:100px;
  background:var(--bg-panel); border:1px solid rgba(10,25,48,.1); color:var(--ink-soft);
}

/* ---------- RELATED ARTICLES (matches service-card / learn-card style) ---------- */
.related{margin-top:54px; padding-top:40px; border-top:1px solid rgba(10,25,48,.1);}
.related h3{font-size:17px; margin-bottom:20px; font-weight:800;}
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.related-card{
  background:var(--bg-panel); border:1px solid rgba(10,25,48,.07); border-radius:var(--radius-md);
  padding:22px; transition:transform .3s var(--ease), box-shadow .3s var(--ease); position:relative;
}
.related-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-card);}
.related-card .rtag{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--blue); letter-spacing:.08em; display:block; margin-bottom:10px;}
.related-card b{font-size:14.5px; font-weight:800; line-height:1.6; display:block; color:var(--ink);}
.related-card .go{display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:12.5px; color:var(--navy-800); margin-top:12px;}

/* ---------- FOOTER (matches main site footer) ---------- */
footer{background:var(--navy-900); color:rgba(255,255,255,.7); padding:56px 0 26px; margin-top:60px; border-top:1px solid rgba(255,255,255,.08);}
.foot-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:30px; padding-bottom:34px;}
.foot-brand .brand{color:#fff;}
.foot-brand p{font-size:13.5px; margin-top:14px; max-width:320px; line-height:1.8; color:rgba(255,255,255,.6);}
.foot-social{display:flex; gap:10px; margin-top:18px;}
.foot-social a{width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; transition:.25s;}
.foot-social a:hover{background:var(--grad-accent); border-color:transparent;}
.foot-contact{display:flex; flex-direction:column; gap:10px; font-size:13.5px;}
.foot-contact b{display:block; color:#fff; font-size:13px; margin-bottom:6px;}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.1); padding-top:22px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  font-size:12.5px; color:rgba(255,255,255,.5);
}

/* ---------- FLOATING BUTTONS (same as main site) ---------- */
.float-wa{
  position:fixed; bottom:22px; left:22px; z-index:90; width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -8px rgba(37,211,102,.6); animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 14px 30px -8px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,.5);}
  70%{box-shadow:0 14px 30px -8px rgba(37,211,102,.6), 0 0 0 14px rgba(37,211,102,0);}
  100%{box-shadow:0 14px 30px -8px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,0);}
}
.float-sms{
  position:fixed; bottom:92px; left:22px; z-index:90; width:50px; height:50px; border-radius:50%;
  background:var(--grad-brand); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -8px rgba(10,25,48,.55); animation:pulse-sms 2.4s infinite;
}
.float-sms .badge{
  position:absolute; top:-4px; right:-4px; background:#ff453a; color:#fff; font-size:9px; font-weight:800;
  border-radius:100px; padding:2px 5px; font-family:'JetBrains Mono',monospace; white-space:nowrap;
}
@keyframes pulse-sms{
  0%{box-shadow:0 14px 30px -8px rgba(10,25,48,.55), 0 0 0 0 rgba(10,132,255,.45);}
  70%{box-shadow:0 14px 30px -8px rgba(10,25,48,.55), 0 0 0 12px rgba(10,132,255,0);}
  100%{box-shadow:0 14px 30px -8px rgba(10,25,48,.55), 0 0 0 0 rgba(10,132,255,0);}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .nav-links{display:none;}
  .burger{display:flex;}
  .related-grid{grid-template-columns:1fr;}
  .foot-top{flex-direction:column;}
}
@media (max-width:560px){
  .article-hero{padding-top:130px;}
  .cta-box{flex-direction:column; align-items:flex-start;}
}