@font-face {
    font-family: "IRANSans Behnico";
    src: url("../fonts/iransans/IRANSansWebFaNum-Light.woff2") format("woff2");
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "IRANSans Behnico";
    src: url("../fonts/iransans/IRANSansWebFaNum-Regular.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "IRANSans Behnico";
    src: url("../fonts/iransans/IRANSansWebFaNum-Medium.woff2") format("woff2");
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "IRANSans Behnico";
    src: url("../fonts/iransans/IRANSansWebFaNum-Bold.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
}

:root {
    --brand-navy: #091A2A;
    --brand-blue: #006FDD;
    --brand-cyan: #16BFE8;
    --energy-yellow: #FFBF2E;
    --surface: #F5F7FA;
    --surface-white: #FFFFFF;
    --surface-dark-soft: #102437;
    --text-primary: #13202D;
    --text-secondary: #5C6873;
    --text-on-dark: #F8FBFF;
    --border: #DDE4EA;
    --success: #16845B;
    --danger: #B13A3A;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --container: 1180px;
    --shadow-soft: 0 18px 50px rgba(9, 26, 42, .08);
    --font-sans: "IRANSans Behnico", "IRANSans", Tahoma, Arial, sans-serif;
    --text-xs: .76rem;
    --text-sm: .86rem;
    --text-md: 1rem;
    --text-lg: clamp(1.08rem, 1.2vw, 1.18rem);
    --text-xl: clamp(1.3rem, 1.8vw, 1.58rem);
    --title-sm: clamp(1.55rem, 2.2vw, 2.05rem);
    --title-md: clamp(2rem, 3.3vw, 3rem);
    --title-lg: clamp(2.65rem, 5.4vw, 5.4rem);
    --tracking-tight: -.035em;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--surface-white);
    color: var(--text-primary);
    font-family: var(--font-sans);
    line-height: 1.8;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
img { max-width: 100%; height: auto; }
.container { width: min(calc(100% - 32px), var(--container)); margin-inline: auto; }
.section { padding: 88px 0; }
.section-soft { background: var(--surface); }
.section-dark { background: var(--brand-navy); color: var(--text-on-dark); }
.muted { color: var(--text-secondary); }
.skip-link { position: fixed; inset: 10px auto auto 10px; transform: translateY(-160%); background: white; padding: 8px 12px; z-index: 1000; }
.skip-link:focus { transform: none; }

.site-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(221,228,234,.9); backdrop-filter: blur(10px); }
.header-inner { min-height: 76px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { width: 42px; height: 42px; border-radius: var(--radius-md); display: grid; place-items: center; background: linear-gradient(145deg, var(--brand-blue), var(--brand-cyan)); color: white; font-weight: 900; box-shadow: 0 8px 20px rgba(0,111,221,.18); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.3; }
.brand-copy strong { font-size: 1.05rem; }
.brand-copy small { color: var(--text-secondary); font-size: .72rem; margin-top: 3px; }
.main-nav { display: flex; justify-content: center; gap: 22px; font-size: .94rem; }
.main-nav a { padding: 24px 0; border-bottom: 2px solid transparent; }
.main-nav a:hover { color: var(--brand-blue); border-color: var(--brand-blue); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-link { font-size: .9rem; color: var(--text-secondary); }
.mobile-menu-button { display: none; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; font-weight: 700; transition: .2s ease; }
.button:hover { transform: translateY(-1px); }
.button[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.button-primary { background: var(--brand-blue); color: white; }
.button-energy { background: var(--energy-yellow); color: var(--brand-navy); }
.button-ghost { border-color: rgba(255,255,255,.32); color: white; background: transparent; }
.button-outline { border-color: var(--border); color: var(--text-primary); background: white; }
.button-sm { min-height: 40px; padding: 0 16px; }
.button-block { width: 100%; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.text-link { color: var(--brand-blue); font-weight: 700; }

.eyebrow { display: inline-block; margin-bottom: 14px; color: var(--brand-cyan); font-size: .78rem; font-weight: 900; letter-spacing: .08em; }
.eyebrow-blue { color: var(--brand-blue); }
.section-heading { max-width: 760px; margin-bottom: 34px; }
.section-heading h2 { margin: 0 0 10px; font-size: clamp(1.7rem, 3vw, 2.45rem); line-height: 1.45; }
.section-heading p { color: var(--text-secondary); margin: 0; }
.section-heading-row { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 20px; }

.hero { position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; width: 520px; height: 520px; left: -180px; top: -220px; background: radial-gradient(circle, rgba(22,191,232,.18), transparent 70%); }
.hero-grid { min-height: 640px; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 72px; padding-top: 36px; padding-bottom: 36px; }
.hero h1 { margin: 0; max-width: 760px; font-size: clamp(2.4rem, 5.7vw, 4.9rem); line-height: 1.22; letter-spacing: -.035em; }
.hero-text { max-width: 680px; color: #C7D4DF; font-size: 1.08rem; }
.hero-text p { margin: 22px 0 0; }
.hero-metrics { margin-top: 40px; display: flex; align-items: center; gap: 20px; }
.hero-metrics div:not(.metric-arrow) { display: flex; flex-direction: column; }
.hero-metrics strong { font-size: 1.8rem; color: white; }
.hero-metrics span { font-size: .78rem; color: #91A5B5; }
.metric-arrow { color: var(--energy-yellow); font-size: 1.8rem; }
.energy-visual { min-height: 430px; display: grid; place-items: center; position: relative; }
.energy-orbit { position: absolute; border: 1px solid rgba(22,191,232,.25); border-radius: 50%; }
.orbit-one { width: 420px; height: 420px; }
.orbit-two { width: 320px; height: 320px; border-color: rgba(255,191,46,.24); }
.device-card { position: relative; z-index: 2; width: 245px; min-height: 315px; padding: 28px; border-radius: 22px; display: flex; flex-direction: column; align-items: start; justify-content: end; background: linear-gradient(145deg, #15344C, #0C2031); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 36px 80px rgba(0,0,0,.35); transform: perspective(800px) rotateY(-8deg) rotateX(3deg); }
.device-card::before { content: ''; position: absolute; inset: 16px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; }
.device-card > * { position: relative; z-index: 1; }
.device-card strong { font-size: 1.35rem; margin-top: 8px; }
.device-card > span:not(.device-label) { color: #8EA8BA; font-size: .78rem; }
.device-label { color: var(--brand-cyan); font-size: .68rem; letter-spacing: .15em; font-weight: 900; }
.device-screen { margin-top: 24px; width: 100%; padding: 14px 16px; border-radius: 10px; background: #06121D; display: flex; align-items: center; justify-content: space-between; color: var(--brand-cyan); }
.device-screen strong { margin: 0; color: var(--energy-yellow); }
.device-card-large { width: 280px; min-height: 360px; }

.trust-strip { border-bottom: 1px solid var(--border); background: white; }
.trust-grid { min-height: 112px; display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-grid > div { display: flex; flex-direction: column; justify-content: center; padding: 20px 28px; border-left: 1px solid var(--border); }
.trust-grid > div:last-child { border-left: 0; }
.trust-grid strong { font-size: 1rem; }
.trust-grid span { color: var(--text-secondary); font-size: .8rem; }

.analysis-shell { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: center; }
.analysis-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-soft); background: white; }
.analysis-tabs { display: flex; gap: 4px; background: var(--surface); padding: 4px; border-radius: var(--radius-md); margin-bottom: 24px; }
.analysis-tabs button { flex: 1; border: 0; background: transparent; padding: 12px; border-radius: 8px; }
.analysis-tabs .active { background: white; box-shadow: 0 2px 10px rgba(9,26,42,.06); font-weight: 700; }
.analysis-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.analysis-form-grid label { font-size: .82rem; color: var(--text-secondary); }
.analysis-form-grid label span { margin-top: 7px; min-height: 48px; border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; align-items: center; padding: 0 10px; background: white; color: var(--text-secondary); }
.analysis-form-grid input { width: 100%; border: 0; outline: 0; background: transparent; direction: ltr; text-align: right; }

.solution-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feature-card { background: white; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; min-height: 230px; }
.feature-card > span { color: var(--brand-blue); font-weight: 900; font-size: .8rem; }
.feature-card h3 { margin: 34px 0 10px; }
.feature-card p { color: var(--text-secondary); font-size: .92rem; }

.family-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.family-card { min-height: 180px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; justify-content: end; transition: .2s ease; }
.family-card:hover { border-color: var(--brand-blue); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.family-card small { color: var(--brand-blue); font-size: .66rem; font-weight: 900; letter-spacing: .08em; }
.family-card strong { font-size: 1.45rem; margin: 8px 0 3px; }
.family-card span { color: var(--text-secondary); font-size: .84rem; }
.empty-state { padding: 30px; border: 1px dashed #B7C4CE; border-radius: var(--radius-lg); color: var(--text-secondary); background: var(--surface); grid-column: 1 / -1; }

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.homepage-products { margin-top: 26px; }
.product-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: white; }
.product-art { min-height: 220px; display: grid; place-items: center; background: linear-gradient(145deg, #ECF5FC, #F7FAFC); position: relative; overflow: hidden; }
.product-art::before { content: ''; width: 140px; height: 180px; border-radius: 18px; background: linear-gradient(145deg, #15344C, #0C2031); box-shadow: 0 24px 40px rgba(9,26,42,.18); transform: rotate(-4deg); }
.product-art span { position: absolute; color: white; font-weight: 900; letter-spacing: .06em; }
.product-card-body { padding: 22px; }
.product-card-body small { color: var(--brand-blue); }
.product-card-body h2, .product-card-body h3 { margin: 5px 0 8px; }
.product-card-body p { color: var(--text-secondary); min-height: 52px; }
.status-pill { display: inline-flex; padding: 6px 10px; border-radius: 999px; background: var(--surface); font-size: .75rem; margin: 0 0 14px; }
.status-in_stock { background: #E8F7F0; color: var(--success); }
.status-low_stock { background: #FFF5D7; color: #8B6600; }
.status-out_of_stock { background: #FCEAEA; color: var(--danger); }

.split-callout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split-callout h2 { margin: 0; font-size: clamp(1.7rem, 3.2vw, 2.7rem); line-height: 1.55; }
.industry-tags, .tag-list { display: flex; flex-wrap: wrap; gap: 10px; }
.industry-tags span { border: 1px solid rgba(255,255,255,.18); padding: 10px 14px; border-radius: 999px; color: #D6E2EB; }
.tag-list span { border: 1px solid var(--border); padding: 7px 10px; border-radius: 999px; font-size: .78rem; }

.result-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.result-panel h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 0 0 10px; }
.result-panel p { color: var(--text-secondary); }
.pf-compare { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.pf-compare > div:not(.pf-line) { display: flex; flex-direction: column; align-items: center; }
.pf-compare strong { font-size: 2.3rem; color: var(--brand-navy); }
.pf-compare span { color: var(--text-secondary); font-size: .75rem; }
.pf-line { height: 2px; background: linear-gradient(90deg, var(--brand-blue), var(--energy-yellow)); position: relative; }
.pf-line i { width: 10px; height: 10px; border-radius: 50%; background: var(--energy-yellow); position: absolute; left: 0; top: -4px; }

.cta-panel { padding: 42px; border-radius: var(--radius-lg); background: var(--brand-navy); color: white; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.cta-panel h2 { margin: 0 0 8px; font-size: clamp(1.6rem, 3vw, 2.35rem); }
.cta-panel p { color: #B8C9D5; margin: 0; }

.page-hero { padding: 90px 0 70px; }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 4.2rem); margin: 0 0 12px; }
.page-hero p { max-width: 780px; color: #BDCDD8; }
.product-hero { padding: 54px 0 70px; }
.product-hero-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 70px; align-items: center; }
.product-stage { min-height: 420px; display: grid; place-items: center; position: relative; }
.model-code { position: absolute; inset: 24px auto auto 24px; color: rgba(255,255,255,.08); font-size: clamp(5rem, 12vw, 11rem); font-weight: 900; }
.product-summary h1 { margin: 0 0 12px; font-size: clamp(2.2rem, 4.7vw, 4rem); }
.product-summary .lead { color: #C4D1DB; max-width: 620px; font-size: 1.05rem; }
.breadcrumb { color: #8FA7B7; font-size: .8rem; display: inline-block; margin-bottom: 22px; }
.product-content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.spec-card { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 18px; }
.spec-card-head { display: flex; justify-content: space-between; gap: 20px; padding: 18px 22px; background: var(--surface); border-bottom: 1px solid var(--border); }
.spec-card-head h3 { margin: 0; }
.spec-card-head code { direction: ltr; color: var(--brand-blue); }
.spec-list { margin: 0; }
.spec-list > div { display: grid; grid-template-columns: 1fr 1fr; padding: 13px 22px; border-bottom: 1px solid #EDF1F4; }
.spec-list > div:last-child { border-bottom: 0; }
.spec-list dt { color: var(--text-secondary); }
.spec-list dd { margin: 0; font-weight: 700; text-align: left; direction: ltr; }
.product-sidebar { display: grid; gap: 16px; position: sticky; top: 96px; }
.side-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.side-card h3 { margin: 0 0 14px; }
.side-card > a { display: block; color: var(--brand-blue); padding: 8px 0; border-bottom: 1px solid var(--border); }

.site-footer { background: #06131F; color: white; padding: 68px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 42px; }
.footer-grid h3 { font-size: .95rem; margin: 0 0 14px; }
.footer-grid > div > a { display: block; color: #9FB2C0; padding: 4px 0; font-size: .86rem; }
.brand-footer { margin-bottom: 16px; }
.brand-footer .brand-copy small, .site-footer .muted { color: #8DA3B2; }
.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; color: #7D93A2; font-size: .75rem; }
.mobile-bottom-nav { display: none; }

@media (max-width: 980px) {
    .header-inner { grid-template-columns: auto auto 1fr; }
    .mobile-menu-button { display: inline-flex; justify-self: start; border: 1px solid var(--border); background: white; border-radius: 8px; padding: 7px 10px; }
    .main-nav { display: none; position: absolute; top: 76px; right: 16px; left: 16px; padding: 14px; background: white; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); flex-direction: column; gap: 0; }
    .main-nav.is-open { display: flex; }
    .main-nav a { padding: 10px 8px; }
    .header-actions .header-link { display: none; }
    .hero-grid, .analysis-shell, .split-callout, .result-panel, .product-hero-grid, .product-content-grid { grid-template-columns: 1fr; }
    .energy-visual { min-height: 360px; }
    .solution-grid, .family-grid { grid-template-columns: repeat(2, 1fr); }
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-grid > div { border-bottom: 1px solid var(--border); }
    .analysis-form-grid { grid-template-columns: 1fr; }
    .product-sidebar { position: static; }
    .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
    .footer-grid > div:last-child { display: none; }
}

@media (max-width: 640px) {
    body { padding-bottom: 64px; }
    .section { padding: 64px 0; }
    .site-header .button-sm { display: none; }
    .brand-copy small { display: none; }
    .hero-grid { min-height: auto; gap: 20px; padding-top: 72px; padding-bottom: 54px; }
    .hero h1 { font-size: 2.55rem; }
    .energy-visual { min-height: 300px; }
    .orbit-one { width: 300px; height: 300px; }
    .orbit-two { width: 230px; height: 230px; }
    .device-card { width: 210px; min-height: 270px; }
    .trust-grid, .solution-grid, .family-grid, .product-grid, .footer-grid { grid-template-columns: 1fr; }
    .trust-grid > div { border-left: 0; }
    .section-heading-row, .cta-panel, .footer-bottom { align-items: stretch; flex-direction: column; }
    .cta-panel { padding: 28px; }
    .pf-compare { grid-template-columns: 1fr; text-align: center; }
    .pf-line { width: 2px; height: 50px; margin-inline: auto; background: linear-gradient(var(--brand-blue), var(--energy-yellow)); }
    .pf-line i { top: auto; bottom: 0; left: -4px; }
    .spec-list > div { grid-template-columns: 1fr; gap: 3px; }
    .spec-list dd { text-align: right; }
    .mobile-bottom-nav { position: fixed; z-index: 80; bottom: 0; left: 0; right: 0; min-height: 62px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; background: white; border-top: 1px solid var(--border); box-shadow: 0 -10px 30px rgba(9,26,42,.08); }
    .mobile-bottom-nav a { text-align: center; font-size: .7rem; color: var(--text-secondary); }
    .mobile-bottom-nav .mobile-analysis { width: 54px; height: 54px; margin: -24px auto 0; border-radius: 50%; display: grid; place-items: center; background: var(--energy-yellow); color: var(--brand-navy); font-weight: 900; box-shadow: 0 10px 30px rgba(255,191,46,.35); }
}

/* Stage 2: CMS, navigation, SEO surfaces, gallery and comparison */
.brand-logo-image { width: auto; height: 44px; object-fit: contain; }
.nav-highlight { color: var(--brand-blue) !important; font-weight: 800; }
.compare-header-link { display: inline-flex !important; align-items: center; gap: 6px; }
.compare-header-link span { min-width: 20px; height: 20px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--energy-yellow); color: var(--brand-navy); font-size: .7rem; font-weight: 900; }
.global-messages { margin-top: 18px; }
.message-stack { display: grid; gap: 10px; }
.message { border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; background: white; }
.message.success { border-color: #86d3a3; }
.message.warning { border-color: #f2c96b; }
.message.info { border-color: #8fc9e8; }

.catalog-hero { padding: 88px 0 58px; }
.catalog-hero h1 { margin: 10px 0 12px; font-size: clamp(2.3rem, 5vw, 4.2rem); }
.catalog-toolbar { display: grid; grid-template-columns: minmax(220px, 1.6fr) minmax(170px, .7fr) auto auto auto; gap: 12px; align-items: end; margin-bottom: 28px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: white; }
.catalog-toolbar label { display: grid; gap: 6px; color: var(--text-secondary); font-size: .8rem; }
.catalog-toolbar input, .catalog-toolbar select { width: 100%; min-height: 45px; border: 1px solid var(--border); border-radius: 8px; background: white; padding: 0 12px; color: var(--text-primary); font: inherit; }
.compare-link { min-height: 45px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border-radius: 8px; background: var(--surface); color: var(--brand-navy); font-weight: 800; white-space: nowrap; }
.compare-link strong { min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-blue); color: white; font-size: .7rem; }
.product-card-pro { overflow: hidden; }
.product-media { display: block; aspect-ratio: 4/3; background: linear-gradient(145deg, #eef3f7, #fff); overflow: hidden; }
.product-media > img { width: 100%; height: 100%; object-fit: contain; padding: 18px; transition: transform .25s ease; }
.product-card-pro:hover .product-media > img { transform: scale(1.025); }
.product-card-body h2 { margin: 8px 0; font-size: 1.1rem; }
.product-card-body h2 a { color: inherit; }
.product-card-meta { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-top: 14px; }
.product-card-actions { display: flex; gap: 8px; align-items: center; margin-top: 16px; }
.button-quiet { border: 1px solid var(--border); background: white; color: var(--brand-navy); }
.button-secondary { border: 1px solid #b8c9d7; background: #f7fafc; color: var(--brand-navy); }
.button-ghost-dark { border: 1px solid rgba(255,255,255,.22); color: white; background: transparent; }

.product-gallery { min-width: 0; }
.product-gallery-main { min-height: 520px; display: grid; place-items: center; border-radius: 24px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.product-gallery-main > img { width: 100%; height: 100%; max-height: 620px; object-fit: contain; padding: 28px; }
.product-gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; }
.product-gallery-thumbs button, .video-thumb { width: 82px; height: 68px; flex: 0 0 82px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: rgba(255,255,255,.06); padding: 4px; color: white; cursor: pointer; }
.product-gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.video-thumb { display: grid; place-items: center; font-size: .72rem; }
.product-price-box { margin: 18px 0; display: flex; align-items: baseline; gap: 8px; }
.product-price-box strong { font-size: 1.55rem; }
.product-price-box span { color: #a8bdca; font-size: .78rem; }
.inline-compare-form { margin-top: 12px; }
.text-button { border: 0; background: transparent; color: #bcd1df; padding: 0; cursor: pointer; font: inherit; }
.product-body { margin-top: 26px; padding: 24px; background: var(--surface); border-radius: var(--radius-lg); }
.migration-note { background: #fff9e9; border-color: #f2d788; }
.side-card > a small { display: block; color: var(--text-secondary); font-size: .68rem; margin-top: 3px; }

.compare-actions { display: flex; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.compare-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: white; }
.compare-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 15px 16px; border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); vertical-align: middle; }
.compare-table th:first-child { position: sticky; right: 0; z-index: 2; min-width: 180px; background: #f8fafc; text-align: right; }
.compare-table thead th { background: var(--brand-navy); color: white; }
.compare-table thead th:first-child { background: var(--brand-navy); }
.compare-table thead a { color: white; }
.compare-table th small, .compare-table td small { display: block; margin-top: 4px; opacity: .68; font-size: .68rem; }

.cms-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cms-stat { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-md); background: white; }
.cms-stat strong { display: block; font-size: 2rem; color: var(--brand-blue); }
.cms-stat span { color: var(--text-secondary); font-size: .8rem; }
.cms-rich-section { max-width: 940px; }
.rich-content { line-height: 2; color: var(--text-primary); }
.rich-content p:first-child { margin-top: 0; }
.faq-list { display: grid; gap: 10px; }
.faq-item { border: 1px solid var(--border); background: white; border-radius: var(--radius-md); padding: 0 18px; }
.faq-item summary { padding: 17px 0; cursor: pointer; font-weight: 800; }
.faq-item .rich-content { padding: 0 0 18px; color: var(--text-secondary); }
.cms-image-text { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.cms-image-text.image-first .cms-image-text-copy { order: 2; }
.cms-image-text-media img, .media-placeholder { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 24px; }
.media-placeholder { display: grid; place-items: center; background: var(--brand-navy); color: white; font-size: 2rem; font-weight: 900; letter-spacing: .2em; }
.hero-product-image { max-width: 90%; max-height: 580px; object-fit: contain; filter: drop-shadow(0 30px 50px rgba(0,0,0,.35)); }

@media (max-width: 980px) {
    .catalog-toolbar { grid-template-columns: 1fr 1fr; }
    .catalog-toolbar .button, .catalog-toolbar .text-link, .catalog-toolbar .compare-link { min-height: 44px; }
    .cms-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .cms-image-text { grid-template-columns: 1fr; gap: 28px; }
    .cms-image-text.image-first .cms-image-text-copy { order: initial; }
}

@media (max-width: 640px) {
    .catalog-toolbar { grid-template-columns: 1fr; }
    .catalog-grid { grid-template-columns: 1fr; }
    .product-card-actions { align-items: stretch; flex-direction: column; }
    .product-card-actions form, .product-card-actions .button { width: 100%; }
    .product-card-actions form button { width: 100%; }
    .product-gallery-main { min-height: 320px; }
    .compare-actions { align-items: stretch; flex-direction: column; }
    .compare-actions form, .compare-actions .button { width: 100%; }
    .cms-stats-grid { grid-template-columns: 1fr 1fr; }
}
.analysis-result { margin-top: 18px; padding: 18px; border: 1px solid #8bc7a4; border-radius: var(--radius-md); background: #f2fbf5; display: grid; gap: 4px; }
.analysis-result[hidden] { display: none; }
.analysis-result strong { font-size: 1.7rem; color: #146a38; direction: ltr; justify-self: start; }
.analysis-result span, .analysis-result small { color: var(--text-secondary); }
.analysis-result.is-error { border-color: #e6aaa5; background: #fff4f3; }
.analysis-result.is-error strong { color: #9c2f25; font-size: 1rem; }
.analysis-disclaimer { margin: 14px 0 0; color: var(--text-secondary); font-size: .75rem; line-height: 1.8; }

/* Stage 3: marketing pages, technical filters, server-side power analysis */
.feature-card-link { display: block; color: inherit; transition: transform .2s ease, border-color .2s ease; }
.feature-card-link:hover { transform: translateY(-3px); border-color: #b8cfe0; }
.feature-card-link div p { color: var(--text-secondary); font-size: .92rem; }
.section-more { margin-top: 24px; }
.industry-tags a { border: 1px solid rgba(255,255,255,.18); padding: 10px 14px; border-radius: 999px; color: #D6E2EB; transition: background .2s ease, border-color .2s ease; }
.industry-tags a:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.38); }
.analysis-button-row { margin-top: 2px; flex-wrap: wrap; }

.marketing-hero { padding: 94px 0 74px; }
.marketing-hero-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(320px,.9fr); gap: 64px; align-items: center; }
.marketing-hero h1 { margin: 12px 0 20px; font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: 1.07; }
.marketing-hero .lead { max-width: 760px; color: #bfd0dc; line-height: 2; }
.marketing-hero .lead p { margin: 0; }
.marketing-hero-image { width: 100%; max-height: 500px; object-fit: cover; border-radius: 24px; border: 1px solid rgba(255,255,255,.1); }
.marketing-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.marketing-card { min-height: 240px; padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: white; color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
.marketing-card:hover { transform: translateY(-3px); box-shadow: 0 18px 50px rgba(9,26,42,.07); }
.marketing-card > small { color: var(--brand-blue); font-weight: 900; letter-spacing: .06em; }
.marketing-card h3 { margin: 32px 0 10px; font-size: 1.35rem; }
.marketing-card div { color: var(--text-secondary); line-height: 1.9; }
.marketing-card div p { margin: 0 0 18px; }
.marketing-card > span { display: inline-block; margin-top: 12px; color: var(--brand-blue); font-weight: 800; }
.problem-outcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.problem-outcome-grid article { padding: 32px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: white; }
.problem-outcome-grid article small { color: var(--brand-blue); font-weight: 900; }
.problem-outcome-grid article p { color: var(--text-secondary); line-height: 2; }
.industry-loads { margin-top: 28px; display: grid; gap: 7px; padding: 17px 20px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-md); background: rgba(255,255,255,.05); }
.industry-loads small { color: #91a9b8; }
.industry-loads strong { color: white; line-height: 1.8; }

.catalog-layout { display: grid; grid-template-columns: 290px minmax(0,1fr); gap: 30px; align-items: start; }
.catalog-filter-panel { position: sticky; top: 92px; }
.technical-filter-form { display: grid; gap: 16px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: white; }
.filter-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.filter-panel-head small, .catalog-result-head small { display: block; color: var(--brand-blue); font-weight: 800; }
.filter-panel-head h2 { margin: 4px 0 0; font-size: 1.18rem; }
.filter-panel-head a { font-size: .76rem; color: var(--text-secondary); }
.filter-field, .technical-filter-item { display: grid; gap: 7px; }
.filter-field > span, .technical-filter-item > strong { font-size: .78rem; color: var(--text-secondary); }
.technical-filter-item > strong { display: flex; justify-content: space-between; gap: 8px; color: var(--text-primary); }
.technical-filter-item > strong small { color: var(--text-secondary); font-weight: 500; }
.technical-filter-form input, .technical-filter-form select { width: 100%; min-height: 43px; border: 1px solid var(--border); border-radius: 8px; padding: 0 11px; background: white; color: var(--text-primary); font: inherit; }
.filter-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filter-range label { display: grid; gap: 4px; }
.filter-range label span { font-size: .68rem; color: var(--text-secondary); }
.filter-submit { width: 100%; margin-top: 4px; }
.catalog-result-head { min-height: 56px; display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 18px; }
.catalog-result-head strong { display: block; margin-top: 2px; }
.catalog-results { min-width: 0; }
.pagination { margin-top: 30px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.pagination a, .pagination span { padding: 9px 13px; border: 1px solid var(--border); border-radius: 8px; background: white; }
.pagination span { color: var(--text-secondary); }

.analysis-page-hero { padding: 92px 0 70px; }
.analysis-page-hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 64px; align-items: center; }
.analysis-page-hero h1, .analysis-result-hero h1 { margin: 12px 0 20px; font-size: clamp(2.5rem, 5vw, 4.8rem); line-height: 1.1; }
.analysis-page-hero .lead { max-width: 780px; color: #bed0dc; line-height: 2; }
.analysis-trust { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.analysis-trust span { padding: 8px 11px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; color: #d7e3eb; font-size: .75rem; }
.analysis-formula-card { padding: 28px; border: 1px solid rgba(255,255,255,.11); border-radius: 20px; background: rgba(255,255,255,.05); direction: ltr; text-align: left; }
.analysis-formula-card small { color: #8ca8b8; }
.analysis-formula-card strong { display: block; margin: 14px 0; color: var(--energy-yellow); font-size: 1.35rem; }
.analysis-formula-card p { direction: rtl; text-align: right; color: #b9cad5; line-height: 1.9; }
.analysis-page-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 32px; align-items: start; }
.analysis-pro-form { padding: 30px; border: 1px solid var(--border); border-radius: 22px; background: white; }
.form-section-heading { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 24px; }
.form-section-heading > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-navy); color: white; font-size: .75rem; font-weight: 900; }
.form-section-heading h2 { margin: 0 0 5px; }
.form-section-heading p { margin: 0; color: var(--text-secondary); }
.analysis-input-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.analysis-input-grid label, .lead-form > label, .form-two-col label { display: grid; gap: 7px; color: var(--text-secondary); font-size: .8rem; }
.analysis-input-grid label > span small { color: #82919b; }
.analysis-pro-form input, .analysis-pro-form select, .lead-form input, .lead-form textarea, .lead-form select { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid var(--border); border-radius: 9px; background: #fff; color: var(--text-primary); font: inherit; }
.lead-form textarea { min-height: 100px; padding-top: 12px; resize: vertical; }
.errorlist { margin: 0; padding: 0; list-style: none; color: #b52c25; font-size: .72rem; }
.form-errors { margin-bottom: 16px; padding: 12px; border: 1px solid #efb2ae; border-radius: 8px; background: #fff4f3; color: #8b2d27; }
.advanced-analysis { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 20px; }
.advanced-analysis summary { display: flex; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; }
.advanced-analysis summary span { color: var(--text-secondary); font-size: .78rem; }
.advanced-grid { margin-top: 18px; }
.analysis-submit-row { margin-top: 24px; display: flex; gap: 18px; align-items: center; }
.analysis-submit-row p { margin: 0; color: var(--text-secondary); font-size: .75rem; line-height: 1.8; }
.analysis-guide-card { position: sticky; top: 92px; padding: 26px; border-radius: var(--radius-lg); background: var(--brand-navy); color: white; }
.analysis-guide-card h2 { margin: 8px 0 20px; }
.analysis-guide-card ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.analysis-guide-card li { display: grid; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.analysis-guide-card li span, .analysis-guide-card > p { color: #adc0cc; font-size: .82rem; line-height: 1.85; }

.analysis-result-hero { padding: 80px 0 58px; }
.pf-result-strip { display: grid; grid-template-columns: auto auto auto 1fr; gap: 18px; align-items: center; max-width: 850px; margin-top: 28px; }
.pf-result-strip > div { padding: 14px 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.05); }
.pf-result-strip small { display: block; color: #9cb3c1; }
.pf-result-strip strong { font-size: 1.7rem; }
.pf-result-strip > span { color: var(--energy-yellow); font-size: 1.6rem; }
.pf-result-strip .kvar-result { justify-self: end; min-width: 260px; border-color: rgba(255,191,46,.4); }
.kvar-result strong { color: var(--energy-yellow); }
.kvar-result em { font-size: .85rem; font-style: normal; }
.analysis-result-layout { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 34px; align-items: start; }
.result-summary-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.result-summary-grid article { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-md); background: white; }
.result-summary-grid small { display: block; margin-bottom: 7px; color: var(--text-secondary); }
.result-heading { margin-top: 46px; }
.recommendation-list { display: grid; gap: 14px; }
.recommendation-card { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 20px; align-items: center; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: white; }
.recommendation-card.recommended-best { border-color: #91c3dd; box-shadow: inset 4px 0 0 var(--brand-blue); }
.recommendation-card small { color: var(--brand-blue); font-weight: 800; }
.recommendation-card h3 { margin: 5px 0; }
.recommendation-card p { margin: 0; color: var(--text-secondary); font-size: .8rem; line-height: 1.8; }
.recommendation-metrics { display: flex; gap: 8px; flex-wrap: wrap; max-width: 290px; }
.recommendation-metrics span { padding: 8px 10px; border-radius: 8px; background: var(--surface); color: var(--text-secondary); font-size: .72rem; }
.recommendation-metrics b { color: var(--text-primary); }
.engineering-warning { margin-top: 22px; padding: 18px 20px; border-right: 4px solid var(--energy-yellow); background: #fff9e8; border-radius: 8px; }
.engineering-warning p { margin: 4px 0 0; color: var(--text-secondary); line-height: 1.9; }
.lead-capture-card { position: sticky; top: 92px; padding: 26px; border: 1px solid var(--border); border-radius: 20px; background: white; }
.lead-capture-card h2 { margin: 8px 0 10px; }
.lead-capture-card > p { color: var(--text-secondary); line-height: 1.9; }
.lead-form { display: grid; gap: 13px; margin-top: 20px; }
.form-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consent-field { display: flex !important; grid-template-columns: auto 1fr; flex-direction: row; align-items: flex-start; gap: 9px !important; }
.consent-field input { width: 18px; min-height: 18px; margin-top: 2px; }
.lead-success-mark { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: #e9f7ed; color: #18713a; font-size: 2rem; font-weight: 900; }

@media (max-width: 1100px) {
    .catalog-layout { grid-template-columns: 240px minmax(0,1fr); gap: 20px; }
    .analysis-page-layout, .analysis-result-layout { grid-template-columns: 1fr; }
    .analysis-guide-card, .lead-capture-card { position: static; }
    .recommendation-card { grid-template-columns: 1fr; }
    .recommendation-metrics { max-width: none; }
}
@media (max-width: 980px) {
    .marketing-hero-grid, .analysis-page-hero-grid, .problem-outcome-grid { grid-template-columns: 1fr; }
    .catalog-layout { grid-template-columns: 1fr; }
    .catalog-filter-panel { position: static; }
    .technical-filter-form { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .filter-panel-head, .filter-submit { grid-column: 1 / -1; }
    .result-summary-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
    .marketing-card-grid, .analysis-input-grid, .technical-filter-form { grid-template-columns: 1fr; }
    .filter-panel-head, .filter-submit { grid-column: auto; }
    .catalog-result-head, .analysis-submit-row { flex-direction: column; align-items: stretch; }
    .pf-result-strip { grid-template-columns: 1fr auto 1fr; }
    .pf-result-strip .kvar-result { grid-column: 1 / -1; justify-self: stretch; min-width: 0; }
    .result-summary-grid { grid-template-columns: 1fr 1fr; }
    .form-two-col { grid-template-columns: 1fr; }
}

/* Stage 4 — projects, knowledge, selector, quotes and customer portal */
.marketing-hero h1, .tool-hero h1, .article-hero h1 { margin: 0; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.3; }
.narrow-container { width: min(calc(100% - 32px), 820px); margin-inline: auto; }
.tool-hero-grid { min-height: 360px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 48px; }
.tool-badge { width: 180px; aspect-ratio: 1; display: grid; place-items: center; text-align: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: radial-gradient(circle at 30% 30%, rgba(22,191,232,.25), rgba(255,255,255,.03)); color: var(--energy-yellow); font-weight: 900; letter-spacing: .12em; box-shadow: inset 0 0 0 24px rgba(255,255,255,.025); }
.form-card { border: 1px solid var(--border); border-radius: 20px; padding: 28px; background: white; box-shadow: var(--shadow-soft); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 24px; }
.field-group { display: flex; flex-direction: column; gap: 7px; }
.field-group label { font-weight: 800; font-size: .86rem; }
.field-group input:not([type="checkbox"]), .field-group select, .field-group textarea { width: 100%; min-height: 48px; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; background: white; color: var(--text-primary); font: inherit; }
.field-group textarea { min-height: 120px; resize: vertical; }
.field-group input[type="checkbox"] { width: 18px; height: 18px; }
.field-span-2 { grid-column: 1 / -1; }
.field-error, .errorlist { color: var(--danger); font-size: .78rem; margin: 0; padding: 0; list-style: none; }

.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.project-card { border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: white; }
.project-card-media { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--surface); }
.project-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.project-card:hover .project-card-media img { transform: scale(1.025); }
.project-card-body { padding: 22px; }
.project-card-body h2 { font-size: 1.18rem; line-height: 1.6; margin: 8px 0 16px; }
.project-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--text-secondary); font-size: .78rem; }
.project-meta span { padding: 4px 8px; border-radius: 6px; background: var(--surface); }
.project-meta-light span { background: rgba(255,255,255,.08); color: #c7d4df; }
.project-metric-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; }
.project-metric-row > div { border-top: 1px solid var(--border); padding-top: 10px; }
.project-metric-row small { display: block; color: var(--text-secondary); font-size: .7rem; }
.project-metric-row strong { font-size: 1.05rem; }
.iran-project-map { position: relative; min-height: 520px; border: 1px solid var(--border); border-radius: 24px; overflow: hidden; background: linear-gradient(145deg, #edf4f8, white); }
.iran-map-shape { position: absolute; inset: 7% 10%; width: 80%; height: 86%; }
.iran-map-shape path { fill: #d9e8f1; stroke: #9ab5c7; stroke-width: 3; }
.project-map-marker { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; z-index: 2; }
.project-map-marker span { width: 15px; height: 15px; border-radius: 50%; background: var(--brand-blue); border: 3px solid white; box-shadow: 0 0 0 5px rgba(0,111,221,.16); }
.project-map-marker b { margin-top: 8px; padding: 2px 7px; border-radius: 5px; background: rgba(9,26,42,.9); color: white; font-size: .68rem; white-space: nowrap; }
.map-empty { position: absolute; inset: auto 50% 24px auto; transform: translateX(50%); color: var(--text-secondary); }
.project-detail-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.project-hero-image { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 22px; }
.project-result-strip { background: white; border-bottom: 1px solid var(--border); }
.project-result-grid { min-height: 126px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
.project-result-grid > div { padding: 20px; border-left: 1px solid var(--border); }
.project-result-grid > div:last-child { border-left: 0; }
.project-result-grid small { color: var(--text-secondary); }
.metric-before-after { display: flex; align-items: center; gap: 9px; margin-top: 5px; }
.metric-before-after span { text-decoration: line-through; color: var(--text-secondary); }
.metric-before-after strong { color: var(--success); }
.case-study-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; }
.case-study-body > section { margin-bottom: 54px; }
.case-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.case-gallery figure { margin: 0; }
.case-gallery img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 14px; }
.case-gallery figcaption { color: var(--text-secondary); font-size: .78rem; margin-top: 5px; }
.customer-quote { margin: 40px 0 0; padding: 28px; border-right: 4px solid var(--energy-yellow); background: var(--surface); font-size: 1.08rem; }
.customer-quote footer { margin-top: 12px; color: var(--text-secondary); font-size: .8rem; }

.knowledge-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.knowledge-filters a { padding: 8px 12px; border: 1px solid var(--border); border-radius: 7px; font-size: .78rem; }
.knowledge-filters a.active { background: var(--brand-navy); color: white; border-color: var(--brand-navy); }
.knowledge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.knowledge-card { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: white; }
.knowledge-card > a { display: block; aspect-ratio: 16/9; overflow: hidden; }
.knowledge-card img { width: 100%; height: 100%; object-fit: cover; }
.knowledge-card > div { padding: 20px; }
.knowledge-card h2 { font-size: 1.12rem; line-height: 1.7; }
.article-hero-inner { max-width: 900px; }
.article-byline { display: flex; gap: 14px; margin-top: 24px; color: #9cb2c1; font-size: .78rem; }
.article-cover-wrap { margin-top: -34px; position: relative; z-index: 2; }
.article-cover { width: 100%; border-radius: 20px; box-shadow: var(--shadow-soft); }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; align-items: start; }
.article-review-card { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.article-review-card h3 { margin: 0 0 8px; }
.article-review-card span, .article-review-card small { color: var(--text-secondary); }

.selector-summary, .portal-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 42px; }
.selector-summary > div, .portal-stats > div { padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: white; }
.selector-summary small, .portal-stats small { display: block; color: var(--text-secondary); font-size: .72rem; }
.selector-summary strong, .portal-stats strong { display: block; margin-top: 6px; font-size: 1.1rem; }
.recommendation-card { position: relative; border: 1px solid var(--border); border-radius: 16px; padding: 24px; background: white; }
.score-pill { position: absolute; left: 16px; top: 16px; padding: 4px 8px; border-radius: 99px; background: #eaf6ef; color: var(--success); font-size: .68rem; font-weight: 800; }
.success-panel { text-align: center; border: 1px solid var(--border); border-radius: 20px; padding: 48px 30px; background: white; box-shadow: var(--shadow-soft); }
.success-icon { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 50%; background: #e8f6ef; color: var(--success); font-size: 2rem; font-weight: 900; }
.success-panel code { display: inline-block; padding: 8px 12px; background: var(--surface); border-radius: 7px; direction: ltr; }
.quote-success-item { display: flex; justify-content: space-between; margin: 20px auto 0; max-width: 520px; padding: 12px 0; border-top: 1px solid var(--border); }

.account-section { min-height: 70vh; display: flex; align-items: center; background: var(--surface); }
.auth-container { width: min(calc(100% - 32px), 480px); }
.auth-card { padding: 32px; border: 1px solid var(--border); border-radius: 20px; background: white; box-shadow: var(--shadow-soft); }
.auth-card h1 { margin-top: 0; }
.auth-card form { display: grid; gap: 18px; }
.auth-back { display: inline-block; margin-top: 16px; }
.portal-head-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.portal-head h1 { margin: 0; }
.portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.portal-panel { border: 1px solid var(--border); border-radius: 16px; padding: 22px; background: white; }
.panel-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 10px; }
.panel-head h2 { margin: 0; font-size: 1.05rem; }
.panel-head a { color: var(--brand-blue); font-size: .76rem; font-weight: 800; }
.portal-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid #edf0f3; }
.portal-row:last-child { border-bottom: 0; }
.portal-row strong, .portal-row small { display: block; }
.portal-row small { color: var(--text-secondary); font-size: .7rem; }

@media (max-width: 980px) {
    .project-grid, .knowledge-grid { grid-template-columns: repeat(2, 1fr); }
    .project-detail-hero-grid, .case-study-layout, .article-layout { grid-template-columns: 1fr; }
    .article-review-card { position: static; }
    .project-result-grid, .selector-summary, .portal-stats { grid-template-columns: repeat(2, 1fr); }
    .portal-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .tool-hero-grid { grid-template-columns: 1fr; min-height: 0; }
    .tool-badge { width: 120px; }
    .form-grid, .project-grid, .knowledge-grid, .case-gallery, .selector-summary, .portal-stats { grid-template-columns: 1fr; }
    .field-span-2 { grid-column: auto; }
    .project-result-grid { grid-template-columns: 1fr 1fr; }
    .iran-project-map { min-height: 380px; }
    .portal-head-row { align-items: flex-start; flex-direction: column; }
}