:root { --b-bg:#080b0d; --b-panel:rgba(20,28,29,.78); --b-line:rgba(235,255,223,.12); --b-text:#f1f8ef; --b-muted:rgba(232,247,232,.62); --b-accent:#a8ff46; }
html { background:var(--b-bg); }
.blog-page { min-width:320px; overflow-x:hidden; color:var(--b-text); background:radial-gradient(circle at 10% 7%,rgba(72,160,122,.13),transparent 28rem),radial-gradient(circle at 92% 24%,rgba(88,137,255,.1),transparent 28rem),var(--b-bg); font-family:"IRANSansX","Estedad","Inter",sans-serif; line-height:1.75; }
.blog-shell { width:min(100% - 32px,1280px); margin:auto; }
.blog-header { position:sticky; top:14px; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:70px; margin-top:14px; padding:10px 14px 10px 18px; border:1px solid var(--b-line); border-radius:20px; background:rgba(10,15,16,.78); box-shadow:0 16px 42px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.06); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.blog-brand,.blog-nav,.blog-header-actions,.blog-meta,.blog-card-footer,.blog-featured-footer,.blog-topic { display:flex; align-items:center; }
.blog-brand { gap:10px; color:var(--b-text); text-decoration:none; font-family:"Inter",sans-serif; font-size:14px; font-weight:700; letter-spacing:-.02em; white-space:nowrap; }
.blog-brand img { width:40px; height:40px; filter:drop-shadow(0 6px 12px rgba(0,0,0,.28)); }
.blog-nav { gap:6px; margin-inline:auto; }
.blog-nav a,.blog-header-actions a,.blog-read,.blog-back-home,.blog-topic { min-height:42px; border-radius:999px; color:var(--b-muted); text-decoration:none; transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease; }
.blog-nav a { padding:9px 13px; font-size:13px; font-weight:500; }
.blog-nav a:hover,.blog-nav a[aria-current="page"] { color:var(--b-text); background:rgba(255,255,255,.06); }
.blog-header-actions { gap:8px; }
.blog-header-actions a,.blog-back-home { justify-content:center; gap:8px; padding:10px 14px; border:1px solid var(--b-line); font-size:13px; font-weight:600; }
.blog-header-actions a:hover,.blog-back-home:hover { color:#0b120c; border-color:var(--b-accent); background:var(--b-accent); transform:translateY(-1px); }
.blog-hero { display:grid; grid-template-columns:minmax(0,1.28fr) minmax(260px,.72fr); gap:28px; padding:clamp(58px,9vw,120px) 0 clamp(42px,6vw,76px); }
.blog-eyebrow,.blog-card-kicker,.blog-featured-number { display:inline-flex; align-items:center; gap:8px; color:#d5ffaf; font-size:12px; font-weight:650; letter-spacing:.05em; }
.blog-eyebrow::before,.blog-card-kicker::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--b-accent); box-shadow:0 0 0 5px rgba(168,255,70,.1); }
.blog-hero h1 { max-width:850px; margin:16px 0 18px; color:var(--b-text); font-size:clamp(38px,6.2vw,82px); font-weight:700; line-height:1.1; letter-spacing:-.055em; }
.blog-hero h1 span { color:var(--b-accent); }
.blog-hero p { max-width:635px; margin:0; color:var(--b-muted); font-size:clamp(15px,1.45vw,18px); }
.blog-hero-note { align-self:end; min-height:200px; padding:24px; border:1px solid var(--b-line); border-radius:22px; background:linear-gradient(145deg,rgba(168,255,70,.12),transparent 60%),var(--b-panel); box-shadow:inset 0 1px rgba(255,255,255,.06); }
.blog-note-number { display:block; margin-bottom:12px; color:var(--b-accent); direction:ltr; font-family:"Inter",sans-serif; font-size:clamp(42px,5vw,64px); font-weight:700; line-height:1; letter-spacing:-.08em; }
.blog-hero-note p { max-width:270px; font-size:14px; }
.blog-section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:20px; }
.blog-section-heading h2 { margin:6px 0 0; color:var(--b-text); font-size:clamp(27px,3vw,42px); font-weight:650; line-height:1.2; letter-spacing:-.04em; }
.blog-section-heading p { max-width:310px; margin:0; color:var(--b-muted); font-size:14px; }
.blog-featured { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); overflow:hidden; border:1px solid var(--b-line); border-radius:26px; background:var(--b-panel); box-shadow:0 24px 60px rgba(0,0,0,.15),inset 0 1px rgba(255,255,255,.05); }
.blog-featured-image { position:relative; min-height:360px; overflow:hidden; background:#111; }
.blog-featured-image::after,.blog-card-image::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.55)); pointer-events:none; }
.blog-featured-image img,.blog-card-image img { width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.75,.2,1); }
.blog-featured:hover img,.blog-card:hover img { transform:scale(1.045); }
.blog-featured-number { position:absolute; top:22px; right:22px; z-index:1; min-height:34px; padding:7px 11px; border:1px solid rgba(235,255,224,.2); border-radius:999px; background:rgba(8,12,14,.66); color:#efffe5; direction:ltr; font-family:"Inter",sans-serif; font-size:12px; backdrop-filter:blur(10px); }
.blog-featured-body { display:flex; flex-direction:column; justify-content:center; padding:clamp(26px,5vw,54px); }
.blog-featured-body h3 { margin:12px 0; color:var(--b-text); font-size:clamp(26px,3vw,40px); font-weight:650; line-height:1.25; letter-spacing:-.04em; }
.blog-featured-body > p { margin:0 0 24px; color:var(--b-muted); font-size:15px; }
.blog-featured-footer,.blog-card-footer { justify-content:space-between; gap:12px; }
.blog-meta { gap:10px; color:var(--b-muted); font-size:12px; }
.blog-meta span + span::before { content:"•"; margin-left:10px; color:rgba(232,247,232,.35); }
.blog-read { display:inline-flex; align-items:center; gap:8px; padding:10px 13px; color:#e6ffd2; border:1px solid rgba(168,255,70,.24); background:rgba(168,255,70,.11); font-size:13px; font-weight:650; white-space:nowrap; }
.blog-read:hover { color:#0a130a; border-color:var(--b-accent); background:var(--b-accent); }
.blog-list-section { padding:clamp(72px,9vw,122px) 0; }
.blog-topics { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 18px; }
.blog-topic { padding:9px 13px; border:1px solid var(--b-line); background:rgba(255,255,255,.025); font-size:13px; }
.blog-topic:hover,.blog-topic.is-active { color:#0b120c; border-color:var(--b-accent); background:var(--b-accent); }
.blog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.blog-card { display:flex; flex-direction:column; overflow:hidden; min-height:100%; border:1px solid var(--b-line); border-radius:20px; background:var(--b-panel); box-shadow:inset 0 1px rgba(255,255,255,.045); transition:transform .25s ease,border-color .25s ease,background .25s ease; }
.blog-card:hover { border-color:rgba(168,255,70,.42); background:rgba(30,42,42,.9); transform:translateY(-5px); }
.blog-card-image { position:relative; height:198px; overflow:hidden; }
.blog-card-body { display:flex; flex:1; flex-direction:column; padding:20px; }
.blog-card-body h3 { margin:11px 0 10px; color:var(--b-text); font-size:20px; font-weight:600; line-height:1.42; letter-spacing:-.025em; }
.blog-card-body > p { flex:1; margin:0 0 18px; color:var(--b-muted); font-size:13px; }
.blog-card-footer { padding-top:16px; border-top:1px solid var(--b-line); }
.blog-cta { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:28px; margin-bottom:clamp(58px,8vw,112px); padding:clamp(26px,5vw,48px); overflow:hidden; border:1px solid rgba(168,255,70,.28); border-radius:24px; background:radial-gradient(circle at 100% 50%,rgba(168,255,70,.18),transparent 26rem),linear-gradient(130deg,rgba(20,31,23,.94),rgba(12,18,18,.92)); }
.blog-cta h2 { max-width:700px; margin:8px 0 0; color:var(--b-text); font-size:clamp(25px,3.5vw,46px); font-weight:650; line-height:1.22; letter-spacing:-.045em; }
.blog-cta .blog-read { min-height:48px; padding:12px 18px; }
.blog-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 0 36px; border-top:1px solid var(--b-line); color:var(--b-muted); font-family:"Inter",sans-serif; font-size:12px; }
.blog-footer a { color:#dfffc4; text-decoration:none; }.blog-footer a:hover { color:var(--b-accent); }
@media (max-width:900px) { .blog-header { flex-wrap:wrap; justify-content:center; }.blog-nav { order:3; width:100%; justify-content:center; }.blog-hero,.blog-featured { grid-template-columns:1fr; }.blog-hero-note { min-height:0; }.blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .blog-shell { width:min(100% - 24px,1280px); }.blog-header { top:8px; gap:10px; min-height:64px; padding:8px 10px; border-radius:16px; }.blog-brand span,.blog-header-actions a span { display:none; }.blog-header-actions a { min-width:42px; padding:10px; }.blog-nav { gap:0; justify-content:space-around; }.blog-nav a { padding:8px 7px; font-size:12px; }.blog-hero { padding-top:54px; }.blog-hero h1 { font-size:clamp(35px,12vw,54px); }.blog-section-heading,.blog-featured-footer,.blog-card-footer,.blog-cta,.blog-footer { align-items:flex-start; flex-direction:column; }.blog-section-heading { gap:8px; }.blog-featured-image { min-height:240px; }.blog-grid { grid-template-columns:1fr; }.blog-card-image { height:208px; }.blog-cta { gap:20px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } }

/* ===== Article pages (blog/*.html) — additive only, does not affect index ===== */
.blog-article { max-width:820px; margin:0 auto; padding:clamp(46px,7vw,86px) 0 clamp(42px,6vw,72px); }
.blog-article-header { margin-bottom:clamp(26px,4vw,42px); }
.blog-article-header h1 { margin:16px 0 14px; color:var(--b-text); font-size:clamp(30px,4.6vw,54px); font-weight:700; line-height:1.22; letter-spacing:-.045em; }
.blog-article-header .blog-meta { font-size:13px; }
.blog-article-hero { overflow:hidden; margin:0 0 clamp(26px,4vw,40px); border:1px solid var(--b-line); border-radius:22px; background:#111; }
.blog-article-hero img { display:block; width:100%; height:auto; }
.blog-article-hero figcaption { padding:12px 16px; border-top:1px solid var(--b-line); color:var(--b-muted); font-size:12px; text-align:center; }
.blog-article-hero figcaption a { color:#dfffc4; text-decoration:none; }
.blog-article-hero figcaption a:hover { color:var(--b-accent); }
.blog-article-body { color:var(--b-text); font-size:clamp(15px,1.4vw,17px); }
.blog-article-body p { margin:0 0 18px; color:var(--b-muted); }
.blog-article-body h2 { margin:34px 0 14px; color:var(--b-text); font-size:clamp(20px,2.2vw,26px); font-weight:650; line-height:1.35; letter-spacing:-.03em; }
.blog-article-body strong { color:var(--b-text); font-weight:600; }
.blog-article-body ul,.blog-article-body ol { margin:0 0 18px; padding-inline-start:22px; color:var(--b-muted); }
.blog-article-body li { margin-bottom:10px; }
.blog-article-body blockquote { margin:24px 0; padding:18px 22px; border-inline-start:3px solid var(--b-accent); border-radius:12px; background:var(--b-panel); color:var(--b-text); font-weight:500; }
.blog-article-body blockquote p { margin:0; color:var(--b-text); }
.blog-article-body a { color:#dfffc4; text-decoration:underline; text-underline-offset:3px; }
.blog-article-body a:hover { color:var(--b-accent); }
.blog-article-body h3 { margin:26px 0 12px; color:var(--b-text); font-size:clamp(17px,1.8vw,21px); font-weight:650; line-height:1.4; letter-spacing:-.02em; }
.blog-article-figure { overflow:hidden; max-width:440px; margin:26px auto; border:1px solid var(--b-line); border-radius:18px; background:#111; }
.blog-article-figure img { display:block; width:100%; height:auto; }
.blog-article-figure figcaption { padding:10px 14px; border-top:1px solid var(--b-line); color:var(--b-muted); font-size:12px; text-align:center; }
.blog-embed { position:relative; overflow:hidden; margin:24px 0; border:1px solid var(--b-line); border-radius:18px; background:#0c1112; aspect-ratio:16/9; }
.blog-embed iframe,.blog-embed video { position:absolute; inset:0; width:100%; height:100%; border:0; }
.blog-article-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-top:clamp(30px,5vw,48px); padding-top:22px; border-top:1px solid var(--b-line); }
.blog-editorial-hero { background:radial-gradient(circle at 18% 20%,rgba(168,255,70,.13),transparent 24rem),#090d0f; }
.blog-editorial-graphic { position:relative; display:grid; align-content:center; min-height:clamp(320px,52vw,500px); padding:clamp(28px,7vw,70px); overflow:hidden; isolation:isolate; }
.blog-editorial-graphic::before { position:absolute; inset:0; z-index:-2; content:""; background:linear-gradient(rgba(168,255,70,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(168,255,70,.055) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(90deg,#000,transparent 92%); }
.blog-editorial-graphic::after { position:absolute; width:min(52vw,480px); aspect-ratio:1; left:-12%; top:-34%; z-index:-1; content:""; border:1px solid rgba(168,255,70,.3); border-radius:50%; box-shadow:0 0 0 42px rgba(168,255,70,.035),0 0 0 86px rgba(168,255,70,.025); }
.blog-editorial-code { color:#d5ffaf; direction:ltr; font-family:"Inter",sans-serif; font-size:11px; font-weight:700; letter-spacing:.18em; text-align:right; }
.blog-editorial-graphic strong { display:block; margin:10px 0 2px; color:var(--b-accent); direction:ltr; font-family:"Inter",sans-serif; font-size:clamp(82px,18vw,176px); font-weight:780; letter-spacing:-.095em; line-height:.9; text-align:right; text-shadow:0 0 42px rgba(168,255,70,.18); }
.blog-editorial-graphic > p { margin:0; color:var(--b-text); font-size:clamp(17px,2.8vw,30px); font-weight:560; line-height:1.5; }
.blog-editorial-nodes { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.blog-editorial-nodes span { position:absolute; width:11px; height:11px; border:2px solid var(--b-accent); border-radius:50%; background:#0b1110; box-shadow:0 0 0 6px rgba(168,255,70,.08),0 0 20px rgba(168,255,70,.25); }
.blog-editorial-nodes span:nth-child(1) { top:18%; right:16%; }.blog-editorial-nodes span:nth-child(2) { top:31%; right:42%; }.blog-editorial-nodes span:nth-child(3) { top:62%; right:28%; }.blog-editorial-nodes span:nth-child(4) { top:76%; right:57%; }.blog-editorial-nodes span:nth-child(5) { top:45%; right:72%; }
.blog-source-note { margin:0 0 28px; padding:20px 22px; border:1px solid rgba(168,255,70,.24); border-radius:16px; background:linear-gradient(135deg,rgba(168,255,70,.09),rgba(20,28,29,.74)); }
.blog-source-note strong { display:block; margin-bottom:5px; color:var(--b-accent); font-size:13px; }
.blog-source-note p { margin-bottom:10px; font-size:14px; }
.blog-source-note a { font-size:13px; font-weight:650; }
@media (max-width:600px) { .blog-article-footer { align-items:flex-start; flex-direction:column; } }