/* ===== DTBourse Calculation Center — Design System v4 ===== */
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn-ExtraBold.woff2') format('woff2');font-weight:800 900;font-display:swap}

.dtbcc-app{--ink:#14213d;--muted:#5b6b87;--line:#e3ecf6;--card:#ffffff;--soft:#f4f8fd;--r:20px;
  --sh-sm:0 2px 10px rgba(18,52,95,.06);--sh-md:0 14px 34px rgba(18,52,95,.12);--sh-lg:0 24px 54px rgba(11,92,173,.20);
  font-family:'Vazirmatn',Tahoma,system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.dtbcc-app ::selection{background:var(--dtbcc-accent);color:#231a00}
.dtbcc-app h2,.dtbcc-app h3{font-weight:800;letter-spacing:-.2px}
.dtbcc-result td,.dtbcc-card,.dtbcc-field input{font-variant-numeric:tabular-nums}

/* --- Hero: گرادیان زنده و گوی‌های نور --- */
.dtbcc-hero{position:relative;overflow:hidden;border-radius:28px;padding:46px 28px 40px;isolation:isolate}
.dtbcc-hero.is-dark{background:linear-gradient(120deg,var(--dtbcc-primary),#144a86 38%,#0a2c57 72%,#081f42);background-size:180% 180%;animation:dtbcc-grad 14s ease infinite;box-shadow:var(--sh-lg)}
@keyframes dtbcc-grad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.dtbcc-hero.is-dark::before,.dtbcc-hero.is-dark::after{content:'';position:absolute;border-radius:50%;filter:blur(46px);z-index:-1;opacity:.55}
.dtbcc-hero.is-dark::before{width:340px;height:340px;background:#38bdf8;top:-140px;left:-80px;animation:dtbcc-float 11s ease-in-out infinite}
.dtbcc-hero.is-dark::after{width:300px;height:300px;background:var(--dtbcc-accent);bottom:-160px;right:-60px;animation:dtbcc-float 13s ease-in-out infinite reverse}
@keyframes dtbcc-float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-26px,22px) scale(1.08)}}
.dtbcc-hero h2{font-size:clamp(27px,4.4vw,42px);line-height:1.35;text-wrap:balance}
.dtbcc-hero.is-dark h2{text-shadow:0 4px 30px rgba(0,0,0,.35)}
.dtbcc-badge{backdrop-filter:blur(8px);letter-spacing:.2px}
.dtbcc-search{border-radius:18px;transition:box-shadow .3s,transform .3s}
.dtbcc-search:focus-within{box-shadow:0 0 0 4px rgba(245,158,11,.35),0 18px 38px rgba(0,0,0,.22);transform:translateY(-2px)}
.dtbcc-search input{font-family:inherit;font-size:15px}
.dtbcc-search button,.dtbcc-btn{position:relative;overflow:hidden}
.dtbcc-search button::after,.dtbcc-btn::after{content:'';position:absolute;top:0;bottom:0;width:36px;right:-60px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:right .55s ease}
.dtbcc-search button:hover::after,.dtbcc-btn:hover::after{right:115%}
.dtbcc-unit-toggle button{transition:.25s}
.dtbcc-unit-toggle button:hover{transform:translateY(-1px)}

/* --- دسته‌بندی چسبان شیشه‌ای --- */
.dtbcc-cats{position:sticky;top:10px;z-index:30;background:rgba(255,255,255,.82);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:var(--sh-sm)}
.dtbcc-cats button{transition:.25s;font-weight:500}
.dtbcc-cats button:hover{transform:translateY(-1px);border-color:#bcd6f5;color:var(--dtbcc-primary)}
.dtbcc-cats button.is-active{box-shadow:0 8px 20px rgba(11,92,173,.30)}

/* --- کارت ابزار: ورود پلکانی، قاب گرادیانی، آیکن رنگی خانواده --- */
@keyframes dtbcc-fadeUp{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.dtbcc-card{border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh-sm);padding:22px 20px;animation:dtbcc-fadeUp .55s cubic-bezier(.22,.8,.32,1) both;overflow:hidden}
.dtbcc-card::before{content:'';position:absolute;top:0;right:0;left:0;height:4px;background:linear-gradient(90deg,var(--dtbcc-primary),var(--dtbcc-accent));transform:scaleX(0);transform-origin:right;transition:transform .35s ease}
.dtbcc-card:hover{transform:translateY(-6px);box-shadow:var(--sh-md)}
.dtbcc-card:hover::before{transform:scaleX(1)}
.dtbcc-card-icon{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;font-size:28px;background:linear-gradient(135deg,#e3f0ff,#f4f9ff);box-shadow:inset 0 0 0 1px #d7e8fa;transition:transform .3s}
.dtbcc-card:hover .dtbcc-card-icon{transform:scale(1.1) rotate(-5deg)}
.dtbcc-card[data-cat="bank"] .dtbcc-card-icon{background:linear-gradient(135deg,#dbeafe,#eff6ff)}
.dtbcc-card[data-cat="legal"] .dtbcc-card-icon{background:linear-gradient(135deg,#ede9fe,#f5f3ff)}
.dtbcc-card[data-cat="invest"] .dtbcc-card-icon,.dtbcc-card[data-cat="lab"] .dtbcc-card-icon{background:linear-gradient(135deg,#d1fae5,#ecfdf5)}
.dtbcc-card[data-cat="estate"] .dtbcc-card-icon,.dtbcc-card[data-cat="housing"] .dtbcc-card-icon{background:linear-gradient(135deg,#ffedd5,#fff7ed)}
.dtbcc-card[data-cat="wealth"] .dtbcc-card-icon{background:linear-gradient(135deg,#ccfbf1,#f0fdfa)}
.dtbcc-card[data-cat="tax"] .dtbcc-card-icon,.dtbcc-card[data-cat="payroll"] .dtbcc-card-icon{background:linear-gradient(135deg,#e0e7ff,#eef2ff)}
.dtbcc-card[data-cat="business"] .dtbcc-card-icon{background:linear-gradient(135deg,#fef3c7,#fffbeb)}
.dtbcc-card[data-cat="datalab"] .dtbcc-card-icon,.dtbcc-card[data-cat="stats"] .dtbcc-card-icon{background:linear-gradient(135deg,#fce7f3,#fdf2f8)}
.dtbcc-card[data-cat="energy"] .dtbcc-card-icon{background:linear-gradient(135deg,#fef9c3,#fefce8)}
.dtbcc-card h3{font-size:16.5px}
.dtbcc-fav{transition:.25s}.dtbcc-fav:hover{transform:scale(1.18) rotate(12deg)}
.dtbcc-open{background:linear-gradient(120deg,var(--dtbcc-primary),#1877c9);box-shadow:0 10px 22px rgba(11,92,173,.28);transition:.25s;font-weight:700}
.dtbcc-open:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(11,92,173,.36)}
.dtbcc-open:active{transform:scale(.98)}

/* --- محصولات ستاره و مسیر شروع --- */
.dtbcc-flag-card{border-radius:22px;padding:22px;transition:.3s;position:relative;overflow:hidden}
.dtbcc-flag-card::after{content:'';position:absolute;inset:0;background:radial-gradient(420px 160px at 85% -10%,rgba(255,255,255,.35),transparent 60%);opacity:0;transition:.35s}
.dtbcc-flag-card:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(10,30,60,.32)}
.dtbcc-flag-card:hover::after{opacity:1}
.dtbcc-journey-grid button{border-radius:18px;box-shadow:var(--sh-sm)}
.dtbcc-how{border-radius:22px;background:linear-gradient(180deg,#f8fbff,#f1f7fe)}
.dtbcc-faq details{transition:.25s}
.dtbcc-faq details:hover{border-color:#bcd6f5}
.dtbcc-faq details[open ]{box-shadow:var(--sh-sm)}
.dtbcc-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:8px}
.dtbcc-faq summary::-webkit-details-marker{display:none}
.dtbcc-faq summary::after{content:'+';font-size:20px;color:var(--dtbcc-primary);transition:transform .3s}
.dtbcc-faq details[open ] summary::after{transform:rotate(45deg)}
.dtbcc-faq details[open ] p{animation:dtbcc-fadeUp .35s ease both}

/* --- صفحه ابزار و فرم --- */
.dtbcc-tool-view{border-radius:26px;box-shadow:var(--sh-md);padding:28px;animation:dtbcc-fadeUp .45s ease both}
.dtbcc-tool-head .ic{width:70px;height:70px;border-radius:20px;background:linear-gradient(135deg,#e3f0ff,#fff7e6);display:grid;place-items:center;font-size:36px;box-shadow:var(--sh-sm);flex:none}
.dtbcc-back{transition:.25s}.dtbcc-back:hover{transform:translateX(3px);border-color:#bcd6f5}
.dtbcc-basis{border-radius:14px;background:linear-gradient(180deg,#f7fbff,#f0f7ff)}
.dtbcc-field label{font-weight:700}
.dtbcc-field input,.dtbcc-field select,.dtbcc-field textarea{background:#f8fbff;border:1.5px solid #d8e4f2;border-radius:13px;padding:11px 13px;transition:border-color .25s,box-shadow .25s,background .25s;font-family:inherit}
.dtbcc-field input:hover,.dtbcc-field select:hover,.dtbcc-field textarea:hover{border-color:#b8d2ee}
.dtbcc-field input:focus,.dtbcc-field select:focus,.dtbcc-field textarea:focus{outline:0;background:#fff;border-color:var(--dtbcc-primary);box-shadow:0 0 0 4px rgba(11,92,173,.14)}
.dtbcc-btn{background:linear-gradient(120deg,var(--dtbcc-primary),#1877c9);box-shadow:0 12px 24px rgba(11,92,173,.30);transition:.25s;border-radius:13px}
.dtbcc-btn:hover{transform:translateY(-2px)}
.dtbcc-btn:active{transform:scale(.97)}
.dtbcc-btn.gold{background:linear-gradient(120deg,#fbbf24,var(--dtbcc-accent));box-shadow:0 12px 24px rgba(245,158,11,.35)}
.dtbcc-btn.alt{box-shadow:none}
.dtbcc-related button{transition:.25s}.dtbcc-related button:hover{transform:translateY(-1px)}

/* --- نتیجه: ورود سینمایی، سطرهای طلایی، نمودار زنده --- */
@keyframes dtbcc-resultIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.dtbcc-result{border-radius:20px;box-shadow:var(--sh-md);animation:dtbcc-resultIn .5s cubic-bezier(.22,.8,.32,1) both}
.dtbcc-result-head{background:linear-gradient(90deg,var(--dtbcc-primary),#1b7ed6 60%,#38a3e8)}
.dtbcc-result tbody tr{transition:background .2s}
.dtbcc-result tbody tr:hover{background:#f4f9ff}
.dtbcc-result tr.hl td{background:linear-gradient(90deg,#fff6d9,#ffedb0);font-size:15.5px}
.dtbcc-chart svg polyline{stroke-linecap:round;stroke-linejoin:round;animation:dtbcc-draw 1.1s ease both}
@keyframes dtbcc-draw{from{opacity:0}to{opacity:1}}
.dtbcc-chart{animation:dtbcc-fadeUp .6s .1s ease both}
.tbl-wrap{scrollbar-width:thin;scrollbar-color:#bcd6f5 transparent}
.tbl-wrap::-webkit-scrollbar{height:8px;width:8px}.tbl-wrap::-webkit-scrollbar-thumb{background:#bcd6f5;border-radius:99px}

/* --- اسکرول‌ریویل (با JS فعال می‌شود) --- */
.dtbcc-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.8,.32,1)}
.dtbcc-reveal.inview{opacity:1;transform:none}

@media(max-width:640px){.dtbcc-hero{padding:34px 18px 30px;border-radius:22px}.dtbcc-tool-view{padding:18px}.dtbcc-cats{top:6px}}
@media (prefers-reduced-motion: reduce){.dtbcc-app *, .dtbcc-app *::before,.dtbcc-app *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.dtbcc-noanim *,.dtbcc-noanim *::before,.dtbcc-noanim *::after{animation:none!important;transition:none!important}
.dtbcc-app.dtbcc-font-system{font-family:Tahoma,system-ui,sans-serif}
@media print{.dtbcc-hero.is-dark::before,.dtbcc-hero.is-dark::after{display:none}.dtbcc-card,.dtbcc-result{animation:none!important}}