/* Home page: richer graphic treatments. Brand palette only; motion additive and reduced-motion safe. */
.hero--rich { position: relative; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; background-image: url("../img/pattern-light.png"); background-size: 260px 240px; opacity: 0.9; -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent 85%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent 85%); }
html[dir="rtl"] .hero-bg { -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.7), transparent 60%); mask-image: linear-gradient(to left, rgba(0,0,0,0.7), transparent 60%); }
html[dir="ltr"] .hero-bg { -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.7), transparent 60%); mask-image: linear-gradient(to right, rgba(0,0,0,0.7), transparent 60%); }
.hero--rich .wrap { position: relative; }

/* Marquee */
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--white); padding-block: 0.7rem; font-family: var(--font-en); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--fs-0); color: var(--muted); }
html[lang="fa"] .marquee { font-family: var(--font-fa); letter-spacing: 0; text-transform: none; }
.marquee-track { display: flex; gap: 3rem; width: max-content; }
.marquee-track span { white-space: nowrap; }
html.js:not(.reduce-motion) .marquee-track { animation: marquee 40s linear infinite; }
html[dir="rtl"].js:not(.reduce-motion) .marquee-track { animation-name: marquee-rtl; }
@keyframes marquee { to { transform: translateX(-25%); } }
@keyframes marquee-rtl { to { transform: translateX(25%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none !important; } }

/* Challenge graph upgrades */
.cgraph-fig { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-2); box-shadow: var(--shadow); }
.cgraph .g-hub-glow { fill: var(--soft); opacity: 0.35; }
.cgraph .g-hub-ring { fill: var(--white); stroke: var(--blue); stroke-width: 2; }
.cgraph .g-path--out { stroke: var(--blue); opacity: 1 !important; }
html.js:not(.reduce-motion) .cgraph .g-path.is-active { stroke-dasharray: 10 8; animation: flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -36; } }
html.js:not(.reduce-motion) .cgraph .g-hub-glow { animation: pulse 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.25); opacity: 0.5; } }

/* Story visual upgrades */
.story-visual { background: var(--soft-100); border-radius: var(--radius-lg); padding: var(--space-2); }
.story-visual .s-ring--2 { stroke-dasharray: 4 6; }
.story-visual .s-node-bg { fill: var(--white); stroke: var(--soft-300); stroke-width: 2; transition: stroke var(--dur-3), fill var(--dur-3); }
.story-visual .s-icon { color: var(--muted); transition: color var(--dur-3); }
.story-visual .s-hub { opacity: 0; transition: opacity var(--dur-3); }
.story-visual[data-stage="3"] .s-node-bg, .story-visual[data-stage="4"] .s-node-bg { stroke: var(--blue); }
.story-visual[data-stage="4"] .s-node-bg { fill: var(--soft-100); }
.story-visual[data-stage="3"] .s-icon, .story-visual[data-stage="4"] .s-icon { color: var(--blue); }
.story-visual[data-stage="2"] .s-hub, .story-visual[data-stage="3"] .s-hub, .story-visual[data-stage="4"] .s-hub { opacity: 1; }
.story-visual .s-node { fill: none; }

/* Pillars */
.pillars { display: grid; gap: 1px; background: rgba(143,168,199,0.25); border: 1px solid rgba(143,168,199,0.25); border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 700px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar-card { position: relative; display: grid; gap: 0.6rem; padding: var(--space-3); background: var(--blue); color: var(--soft-200); text-decoration: none; transition: background var(--dur-2); min-height: 240px; align-content: start; }
.pillar-card:hover { background: var(--blue-ink); color: var(--white); }
.pillar-card h3 { color: var(--white); font-size: var(--fs-2); margin: 0; }
.pillar-card p { margin: 0; font-size: var(--fs-0); color: var(--soft-200); }
.pillar-num { font-family: var(--font-en); font-weight: 800; font-size: var(--fs-4); color: var(--soft); line-height: 1; }
html[lang="fa"] .pillar-num { font-family: var(--font-fa); }
.pillar-icon { width: 36px; height: 36px; color: var(--soft); }
.pillar-line { position: absolute; inset-inline: var(--space-3); bottom: var(--space-2); height: 2px; background: var(--soft); transform: scaleX(0); transform-origin: var(--origin, left); transition: transform var(--dur-3) var(--ease-out); }
html[dir="rtl"] .pillar-line { --origin: right; }
.pillar-card:hover .pillar-line, .pillar-card.is-in .pillar-line { transform: scaleX(1); transition-delay: calc(var(--i, 0) * 120ms + 300ms); }

/* Tool cards with mini art */
.tool-cards { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.tool-card { display: grid; gap: 0.4rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-2); text-decoration: none; color: inherit; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2); }
.tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--soft); }
.tool-card h3 { font-size: var(--fs-2); margin: 0; }
.tool-card:hover h3 { color: var(--blue); }
.tool-art { background: var(--soft-100); border-radius: var(--radius); padding: 0.5rem; }
.tool-art svg { width: 100%; height: auto; }
.tool-art .ta-ring { fill: none; stroke: var(--soft-300); stroke-width: 2; }
.tool-art .ta-ring--in { stroke-dasharray: 3 5; }
.tool-art .ta-needle { fill: var(--blue); transform-box: fill-box; transform-origin: 0% 100%; transition: transform var(--dur-4) var(--ease-inout); }
.tool-card:hover .ta-needle { transform: rotate(40deg); }
.tool-art .ta-dot { fill: var(--blue); }
.tool-art .ta-t { font-size: 11px; font-weight: 700; fill: var(--muted); font-family: var(--font-en); }
.tool-art .ta-bars rect { fill: var(--soft); transition: transform var(--dur-3) var(--ease-out); transform-box: fill-box; transform-origin: bottom; }
.tool-art .ta-bars rect:last-child { fill: var(--blue); }
.tool-card:hover .ta-bars rect { transform: scaleY(1.12); }
.tool-art .ta-bars--mixed rect { transform-origin: top; }
.tool-art .ta-bars--mixed rect:first-child { fill: var(--blue); transform-origin: bottom; }
.tool-art .ta-bars--mixed rect.neg { fill: var(--danger); }
.tool-art .ta-line { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; }
.tool-art .ta-axis { stroke: var(--soft-300); stroke-width: 2; }
.tool-art .ta-steps circle { fill: var(--white); stroke: var(--blue); stroke-width: 2.5; }
.tool-art .ta-check { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity var(--dur-2); }
.tool-card:hover .ta-check { opacity: 1; }
.tool-card:hover .ta-steps circle:first-child { fill: var(--blue); }

/* Solutions grid */
.sol-grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.sol-card { position: relative; display: grid; gap: 0.5rem; padding: var(--space-3); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; color: inherit; overflow: hidden; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2); }
.sol-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.sol-card h3 { font-size: var(--fs-2); margin: 0; }
.sol-card:hover h3 { color: var(--blue); }
.sol-card p { margin: 0; font-size: var(--fs-0); color: var(--muted); }
.sol-num { position: absolute; top: 0.5rem; inset-inline-end: 0.9rem; font-family: var(--font-en); font-weight: 800; font-size: 3.2rem; color: var(--soft-100); line-height: 1; }
html[lang="fa"] .sol-num { font-family: var(--font-fa); }
.sol-card:hover .sol-num { color: var(--soft-200); }
.sol-icon { width: 36px; height: 36px; color: var(--blue); position: relative; }
.sol-pillar { font-size: var(--fs-0); color: var(--blue); font-weight: 600; }

/* Cycle diagram */
.cycle svg { width: 100%; max-width: 440px; height: auto; margin-inline: auto; display: block; }
.cycle .cy-track { fill: none; stroke: var(--line); stroke-width: 2; }
.cycle .cy-arc { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-dasharray: 240; stroke-dashoffset: 240; }
html.js:not(.reduce-motion) .cycle.is-in .cy-arc { animation: cy-draw 0.9s var(--ease-draw) forwards; }
.cycle.is-in .cy-arc:nth-of-type(2) { animation-delay: 0.9s; } .cycle.is-in .cy-arc:nth-of-type(3) { animation-delay: 1.8s; } .cycle.is-in .cy-arc:nth-of-type(4) { animation-delay: 2.7s; }
html.reduce-motion .cycle .cy-arc, html.no-js .cycle .cy-arc { stroke-dashoffset: 0; }
@keyframes cy-draw { to { stroke-dashoffset: 0; } }
.cycle .cy-node circle { fill: var(--white); stroke: var(--blue); stroke-width: 2; }
.cycle .cy-n { font-family: var(--font-en); font-weight: 800; fill: var(--soft); font-size: 12px; }
html[lang="fa"] .cycle .cy-n { font-family: var(--font-fa); }
.cycle .cy-t { font-size: 12px; font-weight: 700; fill: var(--blue); }
.cycle .cy-center { font-size: 11px; fill: var(--muted); font-weight: 600; }
.how-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); }
.how-list li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-2); align-items: start; }
.how-list h3 { font-size: var(--fs-2); margin: 0 0 0.2rem; }
.how-list p { margin: 0; color: var(--muted); font-size: var(--fs-0); }
.how-n { font-family: var(--font-en); font-weight: 800; color: var(--white); background: var(--blue); width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-0); }
html[lang="fa"] .how-n { font-family: var(--font-fa); }

/* Scenario & article cards */
.scenario-art svg, .article-art { display: block; width: 100%; height: 64px; border-radius: var(--radius); }
.scenario-art { display: block; background: var(--soft-100); border-radius: var(--radius); padding: 0.4rem 0.8rem; }
.scenario-art svg { height: 48px; } .scenario-art .sc-line { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; } .scenario-art circle { fill: var(--blue); }
.article-art { background-color: var(--soft-100); background-size: 18px 18px; }
.article-art.art-1 { background-image: linear-gradient(90deg, var(--soft-200) 1px, transparent 1px); }
.article-art.art-2 { background-image: linear-gradient(var(--soft-200) 1px, transparent 1px); }
.article-art.art-3 { background-image: linear-gradient(45deg, var(--soft-200) 25%, transparent 25%, transparent 50%, var(--soft-200) 50%, var(--soft-200) 75%, transparent 75%); }

/* Final CTA */
.final-cta { position: relative; overflow: hidden; }
.final-mark { position: absolute; inset-inline-end: -40px; top: 50%; transform: translateY(-50%); width: 320px; height: auto; opacity: 0.12; pointer-events: none; }
.final-cta .wrap { position: relative; }