/* ============================================================
   Strategy Page Styles
   Emerald/Teal Theme (متناسب با مفهوم استراتژی)
   ============================================================ */

   *,::after,::before{margin:0;padding:0;box-sizing:border-box}

   :root{
       /* ⭐ پالت سبز زمردی */
       --primary:#0d3b2e;
       --primary-light:#1a5c47;
       --primary-dark:#062018;
       --secondary:#d4a843;
       --secondary-light:#e6c368;
   
       /* رنگ‌های تاکیدی */
       --accent-green:#22a67e;
       --accent-red:#dc3545;
       --accent-blue:#2d7fc1;
       --accent-yellow:#e8b82a;
   
       /* متن و پس‌زمینه */
       --text-dark:#1a2e26;
       --text-light:#f0f7f4;
       --text-muted:#6b8a7d;
       --bg-light:#f4f7f5;
       --bg-card:#ffffff;
   
       /* سایه و گوشه */
       --shadow:0 12px 40px rgba(13, 59, 46, 0.10);
       --shadow-hover:0 20px 60px rgba(13, 59, 46, 0.18);
       --radius:16px;
       --radius-sm:10px;
       --transition:0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
   
   @font-face{font-family:Vazir;font-style:normal;font-weight:400;src:url(../fonts/vazir.woff2) format('woff2');font-display:swap}
   @font-face{font-family:Vazir;font-style:normal;font-weight:700;src:url(../fonts/vazir-bold.woff) format('woff');font-display:swap}
   @font-face{font-family:Yekan;font-style:normal;font-weight:400;src:url(../fonts/yekan.woff) format('woff');font-display:swap}
   @font-face{font-family:FontAwesome;font-style:normal;font-weight:400;src:url(../fonts/fontawesome-webfont.woff2) format('woff2');font-display:swap}
   
   html{scroll-behavior:smooth}
   
   body{
       font-family:Vazir,Yekan,sans-serif;
       background:var(--bg-light);
       color:var(--text-dark);
       line-height:1.8;
       overflow-x:hidden;
       -webkit-font-smoothing:antialiased;
       position:relative;
   }
   
   #neural-bg{
       position:fixed;top:0;left:0;
       width:100vw;height:100vh;
       z-index:0;pointer-events:none;
       opacity:.35;background:var(--bg-light);
   }
   
   .content-wrapper{position:relative;z-index:1}
   
   /* ============================================================
      FontAwesome Icons
      ============================================================ */
   .fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
   .fa-copy::before{content:"\f0c5"}
   .fa-check-circle::before{content:"\f058"}
   .fa-chevron-left::before{content:"\f053"}
   .fa-chevron-circle-left::before{content:"\f137"}
   .fa-bar-chart::before{content:"\f080"}
   .fa-check::before{content:"\f00c"}
   .fa-eye::before{content:"\f06e"}
   .fa-clock-o::before{content:"\f017"}
   .fa-shield::before{content:"\f132"}
   
   /* ============================================================
      Links
      ============================================================ */
   a{color:var(--secondary);text-decoration:none;font-weight:500;transition:var(--transition);position:relative;display:inline-block}
   a::after{content:'';position:absolute;bottom:-2px;right:0;width:0;height:2px;background:var(--secondary);transition:var(--transition);border-radius:2px}
   a:hover::after{width:100%;right:0}
   a:hover{color:var(--secondary-light)}
   a.btn{text-decoration:none;display:inline-flex;align-items:center;gap:10px}
   a.btn::after{display:none}
   
   .container{max-width:1200px;margin:0 auto;padding:0 24px}
   
   /* ============================================================
      Buttons
      ============================================================ */
   .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 36px;border:none;border-radius:50px;font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;transition:var(--transition);text-decoration:none;letter-spacing:.3px}
   .btn-primary{background:var(--secondary);color:var(--primary-dark);box-shadow:0 6px 24px rgba(212,168,67,.35)}
   .btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(212,168,67,.45)}
   .btn-outline{background:0 0;color:var(--text-light);border:2px solid rgba(255,255,255,.3)}
   .btn-outline:hover{background:rgba(255,255,255,.1);border-color:var(--secondary)}
   
   /* ============================================================
      Hero (سبز زمردی)
      ============================================================ */
   .hero{
       background:linear-gradient(135deg,var(--primary-dark) 0,var(--primary) 50%,var(--primary-light) 100%);
       padding:80px 0 100px;
       position:relative;
       overflow:hidden;
       min-height:600px;
       display:flex;
       align-items:center;
   }
   .hero::before{content:'';position:absolute;top:-50%;right:-20%;width:80%;height:200%;background:radial-gradient(ellipse,rgba(212,168,67,.10) 0,transparent 70%);pointer-events:none}
   .hero::after{content:'';position:absolute;bottom:-30%;left:-10%;width:60%;height:150%;background:radial-gradient(ellipse,rgba(34,166,126,.08) 0,transparent 70%);pointer-events:none}
   .hero .container{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
   .hero-content h1{font-family:Yekan,Vazir,sans-serif;font-size:48px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:16px}
   .hero-content h1 span{color:var(--secondary)}
   .hero-content .subtitle{font-size:20px;color:rgba(255,255,255,.75);margin-bottom:12px;font-weight:300}
   .hero-content .tagline{font-size:22px;color:var(--secondary-light);font-weight:700;margin-bottom:24px;font-family:Yekan,Vazir,sans-serif}
   .hero-content p{font-size:16px;color:rgba(255,255,255,.7);max-width:520px;margin-bottom:32px;line-height:1.9}
   .hero-buttons{display:flex;gap:16px;flex-wrap:wrap}
   
   /* ============================================================
      Hero Background Images (3D Floating)
      ============================================================ */
/* ============================================================
   Hero Background Images (3D Floating)
   با ابعاد متناسب و aspect-ratio
   ============================================================ */

   #HeroBgImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    z-index: -1;
}

/* استایل پایه برای همه تصاویر */
#HeroBgImg > div {
    position: absolute;
    background-size: contain;      /* ← به جای 100% 100% */
    background-position: center;
    background-repeat: no-repeat;
    transition: all .6s cubic-bezier(.4, 0, .2, 1);
    backface-visibility: hidden;
    border-radius: 5px;
    box-shadow: 0px 0px 5px rgb(255 212 0 / 30%);
    
}

/* ============================================================
   HeroBgImg1: 893×390 (نسبت ~2.29:1) — تصویر اصلی
   ============================================================ */
#HeroBgImg1 {
    width: 90%;
    aspect-ratio: 890 / 393;       /* ← نسبت اصلی */
    top: 7.5%;
    left: 4.5%;
    background-image: url(../images/strategyHeroBgImg1.webp);
    animation: float3D1 6s ease-in-out infinite;
    z-index: 10;
    box-shadow: 20px 30px 60px rgba(0, 0, 0, .4);
}

/* ============================================================
   HeroBgImg2: 40×40 (مربع 1:1) — آیکون کوچک
   ============================================================ */
#HeroBgImg2 {
    width: 5%;                     /* ← کوچک نگه‌دار */
    aspect-ratio: 1 / 1;           /* ← مربع */
    top: 7.5%;
    left: 68%;
    background-image: url(../images/strategyHeroBgImg2.webp);
    animation: float3D2 7s ease-in-out infinite;
    z-index: 15;
    box-shadow: -10px 20px 50px rgba(0, 0, 0, .4);
}

/* ============================================================
   HeroBgImg3: 58×58 (مربع 1:1) — آیکون کوچک
   ============================================================ */
#HeroBgImg3 {
    width: 7%;                     /* ← کمی بزرگ‌تر از 2 */
    aspect-ratio: 1 / 1;           /* ← مربع */
    top: 25%;
    left: 68%;
    background-image: url(../images/strategyHeroBgImg3.webp);
    animation: float3D3 8s ease-in-out infinite;
    z-index: 12;
    box-shadow: -15px 25px 55px rgba(0, 0, 0, .45);
}

/* ============================================================
   HeroBgImg4: 302×229 (نسبت ~1.32:1) — کارت متوسط
   ============================================================ */
#HeroBgImg4 {
    width: 30%;
    aspect-ratio: 302 / 229;       /* ← نسبت اصلی */
    top: 42%;
    left: 58%;
    background-image: url(../images/strategyHeroBgImg4.webp);
    animation: float3D4 7.5s ease-in-out infinite;
    z-index: 14;
    box-shadow: -20px 30px 60px rgba(0, 0, 0, .5);
}
   @keyframes float3D1{0%,100%{transform:perspective(1200px) rotateY(8deg) rotateX(-3deg) translateZ(40px) translateY(0)}50%{transform:perspective(1200px) rotateY(5deg) rotateX(-5deg) translateZ(60px) translateY(-15px)}}
   @keyframes float3D2{0%,100%{transform:perspective(1200px) rotateX(-10deg) rotateY(5deg) translateZ(60px) translateY(0)}50%{transform:perspective(1200px) rotateX(-15deg) rotateY(8deg) translateZ(80px) translateY(-12px)}}
   @keyframes float3D3{0%,100%{transform:perspective(1200px) rotateX(5deg) rotateY(10deg) translateZ(80px) scale(.95) translateY(0)}50%{transform:perspective(1200px) rotateX(8deg) rotateY(15deg) translateZ(100px) scale(.98) translateY(-10px)}}
   @keyframes float3D4{0%,100%{transform:perspective(1200px) rotateX(-8deg) rotateY(12deg) translateZ(50px) translateY(0)}50%{transform:perspective(1200px) rotateX(-12deg) rotateY(18deg) translateZ(70px) translateY(-8px)}}
   
   /* ============================================================
      Banner Bar
      ============================================================ */
   .banner-bar{
       background:var(--bg-card);
       padding:30px 0;
       box-shadow:0 4px 20px rgba(0,0,0,.04);
       margin-top:-40px;
       position:relative;
       z-index:3;
       border-radius:var(--radius);
       max-width:1100px;
       margin-left:auto;
       margin-right:auto;
       border-top:4px solid var(--secondary);
   }
   
   .banner-content{
       display:flex;
       align-items:center;
       gap:24px;
       padding:0 40px;
   }
   
   .banner-icon{
       font-size:48px;
       flex-shrink:0;
       filter:drop-shadow(0 4px 8px rgba(212,168,67,.3));
   }
   
   .banner-text h3{
       font-family:Yekan,Vazir,sans-serif;
       font-size:22px;
       font-weight:700;
       color:var(--primary-dark);
       margin-bottom:6px;
   }
   
   .banner-text h3 span{
       color:var(--secondary);
   }
   
   .banner-text p{
       font-size:14px;
       color:var(--text-muted);
       line-height:1.8;
       margin:0;
   }
   
   /* ============================================================
      Section Base
      ============================================================ */
   .section{padding:80px 0;position:relative}
   .section-header{text-align:center;max-width:700px;margin:0 auto 56px}
   .section-header h2{font-family:Yekan,Vazir,sans-serif;font-size:36px;font-weight:700;color:var(--primary-dark);margin-bottom:12px}
   .section-header h2 span{color:var(--secondary)}
   .section-header p{font-size:16px;color:var(--text-muted);line-height:1.9}
   .section-header .badge{display:inline-block;background:rgba(212,168,67,.15);color:var(--secondary);padding:4px 16px;border-radius:50px;font-size:13px;font-weight:700;margin-bottom:12px;letter-spacing:.5px}
   
   .bg-light{background:var(--bg-light)}
   
   /* ============================================================
      Intro Grid
      ============================================================ */
   .intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
   .intro-image img,
   .language-image img{max-width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow)}
   .intro-text h3{font-size:28px;font-weight:700;color:var(--primary-dark);margin-bottom:12px;font-family:Yekan,Vazir,sans-serif}
   .intro-text h3 span{color:var(--secondary)}
   .intro-text p{color:var(--text-muted);margin-bottom:16px;line-height:2}
   .intro-features{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px;list-style:none}
   .intro-features li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-dark);padding:8px 12px;background:var(--bg-card);border-radius:var(--radius-sm)}
   .intro-features li .fa{color:var(--accent-green);font-size:16px;width:20px}
   
   /* ============================================================
      Message Grid
      ============================================================ */
   .message-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
   .message-card{background:var(--bg-card);padding:28px 32px;border-radius:var(--radius);box-shadow:var(--shadow);transition:var(--transition);display:flex;gap:16px;align-items:flex-start}
   .message-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
   .message-card .msg-icon{font-size:28px;color:var(--secondary);flex-shrink:0;width:48px;text-align:center}
   .message-card .msg-content h4{font-family:Yekan,Vazir,sans-serif;font-size:18px;font-weight:700;margin-bottom:4px}
   .message-card .msg-content p{font-size:14px;color:var(--text-muted);line-height:1.8}
   
   /* ============================================================
      Language Section
      ============================================================ */
   .language-intro > p {
       text-align: center;
       max-width: 800px;
       margin: 0 auto 40px;
       color: var(--text-muted);
       font-size: 16px;
       line-height: 2;
   }
   
   .structure-diagram {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 16px;
       margin-bottom: 48px;
   }
   
   .structure-item {
       background: var(--bg-card);
       padding: 20px;
       border-radius: var(--radius-sm);
       text-align: center;
       box-shadow: var(--shadow);
       transition: var(--transition);
       border-top: 3px solid var(--secondary);
   }
   
   .structure-item:hover {
       transform: translateY(-4px);
       box-shadow: var(--shadow-hover);
   }
   
   .structure-badge {
       display: inline-block;
       background: var(--primary);
       color: #fff;
       padding: 4px 14px;
       border-radius: 50px;
       font-size: 12px;
       font-weight: 700;
       font-family: 'Consolas', monospace;
       letter-spacing: 1px;
       margin-bottom: 10px;
   }
   
   .structure-desc {
       display: block;
       color: var(--text-muted);
       font-size: 13px;
   }
   
   .components-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 24px;
   }
   
   .component-card {
       background: var(--bg-card);
       padding: 24px;
       border-radius: var(--radius);
       box-shadow: var(--shadow);
       transition: var(--transition);
   }
   
   .component-card:hover {
       transform: translateY(-4px);
       box-shadow: var(--shadow-hover);
   }
   
   .component-card h4 {
       font-family: Yekan, Vazir, sans-serif;
       font-size: 16px;
       font-weight: 700;
       color: var(--primary-dark);
       margin-bottom: 14px;
       padding-bottom: 10px;
       border-bottom: 2px solid rgba(212,168,67,.25);
   }
   
   .component-card ul {
       list-style: none;
   }
   
   .component-card ul li {
       font-size: 13px;
       color: var(--text-muted);
       padding: 5px 0;
       line-height: 1.7;
   }
   
   .component-card ul li b {
       color: var(--primary);
       font-family: 'Consolas', monospace;
       font-size: 12px;
   }
   
   .dot {
       display: inline-block;
       width: 10px;
       height: 10px;
       border-radius: 50%;
       margin-left: 4px;
       vertical-align: middle;
   }
   
   .dot.green { background: var(--accent-green); }
   .dot.red { background: var(--accent-red); }
   .dot.blue { background: var(--accent-blue); }
   .dot.yellow { background: var(--accent-yellow); }
   
   /* ============================================================
      Example Cards
      ============================================================ */
   .example-card {
       background: var(--bg-card);
       border-radius: var(--radius);
       box-shadow: var(--shadow);
       overflow: hidden;
       margin-bottom: 40px;
       transition: var(--transition);
   }
   
   .example-card:hover {
       box-shadow: var(--shadow-hover);
   }
   
   .example-header {
       display: flex;
       align-items: center;
       gap: 20px;
       padding: 24px 28px;
       border-bottom: 1px solid #e8f0eb;
       background: linear-gradient(135deg, #fafcfb, #f4f8f5);
   }
   
   .example-num {
       width: 48px;
       height: 48px;
       border-radius: 50%;
       background: var(--primary);
       color: #fff;
       display: flex;
       align-items: center;
       justify-content: center;
       font-family: Yekan, Vazir, sans-serif;
       font-size: 22px;
       font-weight: 700;
       flex-shrink: 0;
       box-shadow: 0 4px 12px rgba(13,59,46,.25);
   }
   
   .example-title h3 {
       font-family: Yekan, Vazir, sans-serif;
       font-size: 20px;
       font-weight: 700;
       color: var(--primary-dark);
       margin-bottom: 4px;
   }
   
   .example-title p {
       font-size: 14px;
       color: var(--text-muted);
   }
   
   /* ============================================================
      IDE Box (شبیه محیط کدنویسی - تم روشن)
      ============================================================ */
   .ide-box {
       background: #ffffff;
       border-top: 1px solid #e2e6eb;
       border-bottom: 1px solid #e2e6eb;
       font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
       direction: ltr;
       overflow: hidden;
       margin: 0;
   }
   
   /* ===== هدر IDE ===== */
   .ide-header {
       background: #eef1f5;
       padding: 8px 15px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       border-bottom: 1px solid #dfe3e8;
       user-select: none;
       position: relative;
   }
   
   .ide-header-left {
       display: flex;
       align-items: center;
       gap: 8px;
   }
   
   .ide-dot {
       width: 12px;
       height: 12px;
       border-radius: 50%;
       display: inline-block;
       flex-shrink: 0;
   }
   
   .ide-dot.red { background: #ff5f56; }
   .ide-dot.yellow { background: #ffbd2e; }
   .ide-dot.green { background: #27c93f; }
   
   .ide-title {
       color: #555;
       font-size: 12px;
       margin-right: 10px;
       font-weight: 500;
       font-family: 'Consolas', monospace;
   }
   
   .ide-header-right {
       display: flex;
       align-items: center;
       gap: 10px;
   }
   
   .ide-lang-badge {
       color: #1a5c47;
       font-size: 11px;
       background: #ffffff;
       padding: 2px 8px;
       border-radius: 4px;
       border: 1px solid #d0d7de;
       font-family: 'Consolas', monospace;
   }
   
   /* ===== بدنه IDE ===== */
   .ide-body {
       display: flex;
       position: relative;
       background: #ffffff;
       min-height: 180px;
       max-height: 400px;
       overflow: auto;
   }
   
   /* ===== شماره خطوط ===== */
   .ide-line-numbers {
       background: #f0f2f5;
       color: #9ca3af;
       padding: 15px 10px;
       text-align: right;
       font-size: 13px;
       line-height: 1.7;
       user-select: none;
       min-width: 42px;
       border-right: 1px solid #e2e6eb;
       font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
       white-space: pre;
       flex-shrink: 0;
   }
   
   /* ===== کد ===== */
   .ide-code {
       flex: 1;
       padding: 15px 18px;
       overflow-x: auto;
       background: #ffffff;
   }
   
   .ide-code pre {
       margin: 0;
       direction: ltr;
       text-align: left;
   }
   
   .ide-code code {
       font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
       font-size: 13px;
       line-height: 1.7;
       color: #1e1e1e;
       white-space: pre;
       display: block;
       background: transparent;
   }
   
   /* ============================================================
      Syntax Highlighting (تم روشن)
      ============================================================ */
   .ide-code .kw {
       color: #af00db;
       font-weight: 700;
   }
   
   .ide-code .var {
       color: #001080;
   }
   
   .ide-code .fn {
       color: #795e26;
   }
   
   .ide-code .num {
       color: #098658;
   }
   
   .ide-code .act-buy {
       color: #16825d;
       font-weight: 700;
   }
   
   .ide-code .act-sell {
       color: #c72e2e;
       font-weight: 700;
   }
   
   .ide-code .sig-green {
       color: #1a7f4e;
       font-weight: 700;
   }
   
   .ide-code .sig-red {
       color: #c72e2e;
       font-weight: 700;
   }
   
   .ide-code .sig-blue {
       color: #0066cc;
       font-weight: 700;
   }
   
   .ide-code .sig-yellow {
       color: #b8860b;
       font-weight: 700;
   }
/* ============================================================
   Backtest Button (دکمه شبیه‌سازی)
   ============================================================ */
   .backtest-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid #d0d7de;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.25s ease;
    padding: 0;
    outline: none;
    font-family: inherit;
    margin-right: 4px;
}

.backtest-btn:hover {
    background: #eef7ff;
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(45, 127, 193, 0.2);
}

.backtest-btn:active {
    transform: translateY(0);
}

.backtest-btn.sent {
    background: #e8f5e9;
    border-color: var(--accent-green);
    color: var(--accent-green);
}

/* آیکون flask */
.fa-flask::before {
    content: "\f0c3";
}

/* در حالت موبایل */
@media (max-width: 640px) {
    .backtest-btn {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }
}   
   /* ============================================================
      Copy Button
      ============================================================ */
   .copy-btn {
       width: 28px;
       height: 28px;
       border-radius: 6px;
       background: #ffffff;
       border: 1px solid #d0d7de;
       color: #666;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 13px;
       transition: all 0.25s ease;
       padding: 0;
       outline: none;
       font-family: inherit;
   }
   
   .copy-btn:hover {
       background: #f0f7f4;
       border-color: var(--primary-light);
       color: var(--primary-light);
       transform: translateY(-1px);
   }
   
   .copy-btn:active {
       transform: translateY(0);
   }
   
   .copy-btn.copied {
       background: #e8f5e9;
       border-color: var(--accent-green);
       color: var(--accent-green);
   }
   
   /* ============================================================
      Example Description
      ============================================================ */
   .example-desc {
       padding: 24px 28px;
   }
   
   .example-desc h4 {
       font-family: Yekan, Vazir, sans-serif;
       font-size: 16px;
       font-weight: 700;
       color: var(--primary-dark);
       margin-bottom: 10px;
   }
   
   .example-desc p {
       font-size: 14px;
       color: var(--text-muted);
       line-height: 1.9;
       margin-bottom: 12px;
   }
   
   .example-desc b {
       color: var(--primary);
   }
   
   .example-use {
       background: rgba(212,168,67,.10);
       border-right: 3px solid var(--secondary);
       padding: 10px 14px;
       border-radius: 6px;
       font-size: 13px !important;
       color: var(--text-dark) !important;
       margin-top: 10px !important;
   }
   
   .example-use b {
       color: var(--secondary);
   }
   
   /* ============================================================
      Scenario Grid (مزایا)
      ============================================================ */
   .scenario-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
   .scenario-card{background:var(--bg-card);padding:32px 28px;border-radius:var(--radius);box-shadow:var(--shadow);transition:var(--transition);border-bottom:4px solid transparent;text-align:center}
   .scenario-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
   .scenario-card .scenario-icon{font-size:40px;display:block;margin-bottom:8px}
   .scenario-card h4{font-family:Yekan,Vazir,sans-serif;font-size:20px;font-weight:700;margin-bottom:8px}
   .scenario-card p{font-size:14px;color:var(--text-muted);line-height:1.9}
   .scenario-card .scenario-tag{display:inline-block;padding:2px 14px;border-radius:50px;font-size:12px;font-weight:700;margin-bottom:12px}
   .scenario-card.conservative{border-bottom-color:var(--accent-green)}
   .scenario-card.conservative .scenario-tag{background:rgba(34,166,126,.15);color:var(--accent-green)}
   .scenario-card.balanced{border-bottom-color:var(--secondary)}
   .scenario-card.balanced .scenario-tag{background:rgba(212,168,67,.15);color:var(--secondary)}
   .scenario-card.active{border-bottom-color:var(--primary-light)}
   .scenario-card.active .scenario-tag{background:rgba(26,92,71,.15);color:var(--primary-light)}
   
   /* ============================================================
      CTA Section (سبز زمردی)
      ============================================================ */
   .cta-section{
       background:linear-gradient(135deg,var(--primary-dark),var(--primary-light));
       padding:80px 0;
       text-align:center;
       color:#fff;
       position:relative;
       overflow:hidden;
   }
   .cta-section::before{
       content:'';
       position:absolute;
       top:-50%;
       right:-20%;
       width:80%;
       height:200%;
       background:radial-gradient(ellipse,rgba(212,168,67,.10) 0,transparent 70%);
       pointer-events:none;
   }
   .cta-section h2{font-family:Yekan,Vazir,sans-serif;font-size:38px;font-weight:700;margin-bottom:12px;position:relative;z-index:1}
   .cta-section h2 span{color:var(--secondary)}
   .cta-section p{font-size:18px;color:rgba(255,255,255,.7);max-width:600px;margin:0 auto 32px;position:relative;z-index:1}
   .cta-section .btn-group{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
   
   /* ============================================================
      Footer (سبز تیره)
      ============================================================ */
   .footer{
       background:var(--primary-dark);
       padding:32px 0;
       text-align:center;
       color:rgba(255,255,255,.4);
       font-size:13px;
       border-top:1px solid rgba(255,255,255,.05);
   }
   
   /* ============================================================
      Scrollbar (برای IDE Body)
      ============================================================ */
   .ide-body::-webkit-scrollbar {
       width: 8px;
       height: 8px;
   }
   
   .ide-body::-webkit-scrollbar-track {
       background: #f0f2f5;
   }
   
   .ide-body::-webkit-scrollbar-thumb {
       background: #c5cbd3;
       border-radius: 4px;
   }
   
   .ide-body::-webkit-scrollbar-thumb:hover {
       background: #a8b0ba;
   }
   
   .ide-code::-webkit-scrollbar {
       width: 6px;
       height: 6px;
   }
   
   .ide-code::-webkit-scrollbar-track {
       background: transparent;
   }
   
   .ide-code::-webkit-scrollbar-thumb {
       background: #d0d7de;
       border-radius: 3px;
   }
   
   .ide-code::-webkit-scrollbar-thumb:hover {
       background: #b8c0c9;
   }
   
   /* ============================================================
      Responsive - Tablet (max 1024px)
      ============================================================ */
   @media (max-width:1024px){
       #HeroBgImg{width:100%;filter:blur(5px)}
       .hero .container{grid-template-columns:1fr;text-align:center}
       .hero-content p{max-width:100%}
       .hero-buttons{justify-content:center}
       .intro-grid{grid-template-columns:1fr;text-align:center}
       .intro-features{justify-content:center}
       .intro-features li{justify-content:center}
       .message-grid{grid-template-columns:1fr}
       .scenario-grid{grid-template-columns:1fr 1fr}
       .structure-diagram{grid-template-columns:repeat(2,1fr)}
       .components-grid{grid-template-columns:repeat(2,1fr)}
   }
   
   /* ============================================================
      Responsive - Mobile (max 640px)
      ============================================================ */
   @media (max-width:640px){
       .hero{padding:60px 0 80px;min-height:auto}
       .hero-content h1{font-size:30px}
       .hero-content .tagline{font-size:18px}
       .hero-content .subtitle{font-size:16px}
       .section{padding:50px 0}
       .section-header h2{font-size:26px}
       .scenario-grid{grid-template-columns:1fr}
       .structure-diagram{grid-template-columns:1fr}
       .components-grid{grid-template-columns:1fr}
       .btn{padding:12px 24px;font-size:14px}
       .message-card{flex-direction:column;align-items:center;text-align:center}
       .container{padding:0 16px}
   
       /* Banner */
       .banner-bar{
           margin-top:-20px;
           padding:20px 0;
       }
       .banner-content{
           flex-direction:column;
           text-align:center;
           gap:12px;
           padding:0 20px;
       }
       .banner-icon{font-size:36px}
       .banner-text h3{font-size:17px}
       .banner-text p{font-size:13px}
   
       /* Example Card */
       .example-header{padding:18px 20px;gap:14px}
       .example-num{width:40px;height:40px;font-size:18px}
       .example-title h3{font-size:16px}
       .example-title p{font-size:12px}
       .example-desc{padding:18px 20px}
   
       /* IDE */
       .ide-header{padding:6px 10px}
       .ide-title{font-size:11px;display:none}
       .ide-body{min-height:140px;max-height:300px}
       .ide-line-numbers{
           padding:12px 6px;
           font-size:13px;
           min-width:32px;
       }
       .ide-code{padding:12px 10px}
       .ide-code code{font-size:13px;line-height:1.6}
       .ide-lang-badge{font-size:10px;padding:1px 6px}
   
       /* Copy Button */
       .copy-btn{width:24px;height:24px;font-size:11px}
   
       .language-intro > p{font-size:14px}
   }
   
   /* ============================================================
      Responsive - Small Mobile (max 400px)
      ============================================================ */
   @media (max-width:400px){
       .hero-content h1{font-size:26px}
       .section-header h2{font-size:22px}
       .ide-code code{font-size:13px;line-height:1.5}
       .ide-line-numbers{font-size:13px;min-width:28px}
       .ide-dot{width:10px;height:10px}
       .example-num{width:34px;height:34px;font-size:16px}
       .example-title h3{font-size:14px}
   }

/* ============================================================
      Code Sample Card (کارت نمونه کد ساده)
      ============================================================ */
      .code-sample-card {
        width: 100%;
        margin: 0 auto;
        background: var(--bg-card);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        overflow: hidden;
        transition: var(--transition);
    }
    
    .code-sample-card:hover {
        box-shadow: var(--shadow-hover);
        transform: translateY(-4px);
    }
    
    .code-sample-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 24px;
        background: linear-gradient(135deg, var(--primary-dark), var(--primary));
        color: #fff;
        border-bottom: 2px solid var(--secondary);
    }
    
    .code-sample-icon {
        font-size: 22px;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
    }
    
    .code-sample-title {
        font-family: Yekan, Vazir, sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: #fff;
    }
    
    .code-sample-body {
        background: #ffffff;
        padding: 10px;
        direction: ltr;
        text-align: left;
    }
    
    .code-sample-body pre {
        margin: 0;
        direction: ltr;
        text-align: left;
    }
    
    .code-sample-body code {
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        font-size: 15px;
        line-height: 1.9;
        color: #1e1e1e;
        white-space: pre;
        display: block;
        background: transparent;
    }
    
    /* رنگ‌بندی Syntax */
    .code-sample-body .kw {
        color: #af00db;
        font-weight: 700;
    }