/* ===================== Variables & Reset ===================== */
:root {
    --teal-900: #0d3d44;
    --teal-800: #0f4750;
    --teal-700: #115e6b;
    --teal-600: #1b7a89;
    --teal-500: #2aa3a6;
    --teal-400: #36c0c0;
    --accent: #f5a623;
    --accent-dark: #e8920c;
    --green: #2bb673;
    --orange: #f5a623;
    --cyan: #2aa3a6;

    --ink-900: #102a30;
    --ink-700: #34505a;
    --ink-500: #5b7079;
    --muted: #8499a1;

    --bg: #ffffff;
    --bg-soft: #f4f9fb;
    --bg-blue: #eaf3f8;
    --line: #e3edf1;
    --card: #ffffff;

    --radius: 16px;
    --radius-sm: 12px;
    --shadow-sm: 0 4px 14px rgba(16, 60, 68, 0.06);
    --shadow-md: 0 12px 30px rgba(16, 60, 68, 0.10);
    --shadow-lg: 0 24px 60px rgba(16, 60, 68, 0.16);
    --container: 1200px;
    --header-h: 78px;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
    color: var(--ink-700);
    background: var(--bg);
    line-height: 1.9;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 24px;
}

.text-accent { color: var(--accent); }

/* ===================== Buttons ===================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    border-radius: 12px;
    padding: 12px 22px;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 8px 20px rgba(245, 166, 35, .28);
}
.btn-primary:hover { background: var(--accent-dark); }

.btn-accent {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 10px 26px rgba(245, 166, 35, .35);
}
.btn-accent:hover { background: var(--accent-dark); transform: translateY(-2px); }

.btn-outline {
    background: #fff;
    color: var(--teal-700);
    border: 2px solid var(--teal-600);
}
.btn-outline:hover { background: var(--teal-700); color: #fff; }

.btn-lg { padding: 15px 30px; font-size: 16px; border-radius: 14px; }

/* ===================== Header ===================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--teal-800);
    border-bottom: 3px solid var(--teal-500);
    box-shadow: 0 4px 20px rgba(13, 61, 68, .18);
}
.header-inner {
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { width: 52px; height: 52px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.5; }
.brand-title { color: #fff; font-weight: 800; font-size: 19px; }
.brand-subtitle { color: var(--teal-400); font-size: 12px; }

.main-nav { display: flex; align-items: center; gap: 6px; }
.nav-link {
    color: #d7e9ec;
    font-weight: 600;
    font-size: 15px;
    padding: 8px 14px;
    border-radius: 8px;
    position: relative;
    transition: color .2s ease, background .2s ease;
}
.nav-link:hover { color: #fff; }
.nav-link.active { color: #fff; }
.nav-link.active::after {
    content: "";
    position: absolute;
    bottom: -2px;
    inset-inline: 14px;
    height: 3px;
    border-radius: 3px;
    background: var(--accent);
}

/* Dropdown submenu */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 7px; }
.nav-caret {
    width: 8px; height: 8px;
    border-inline-start: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(-45deg);
    transition: transform .25s ease;
    flex-shrink: 0;
}
.nav-submenu {
    position: absolute;
    top: calc(100% + 14px);
    inset-inline-end: 0;
    min-width: 230px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
    z-index: 120;
}
/* invisible bridge so hover doesn't break in the gap */
.nav-submenu::before {
    content: "";
    position: absolute;
    top: -14px;
    inset-inline: 0;
    height: 14px;
}
/* little pointer arrow */
.nav-submenu::after {
    content: "";
    position: absolute;
    top: -7px;
    inset-inline-end: 26px;
    width: 13px; height: 13px;
    background: #fff;
    border-inline-start: 1px solid var(--line);
    border-top: 1px solid var(--line);
    transform: rotate(45deg);
}
.nav-dropdown:hover .nav-submenu,
.nav-dropdown:focus-within .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear 0s;
}
.nav-dropdown:hover .nav-caret { transform: translateY(1px) rotate(135deg); }
.nav-subitem {
    position: relative;
    color: var(--ink-700);
    font-weight: 600;
    font-size: 14.5px;
    padding: 11px 16px;
    border-radius: 9px;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, padding .2s ease;
}
.nav-subitem:hover {
    background: var(--bg-blue);
    color: var(--teal-700);
    padding-inline-end: 22px;
}

.header-actions { display: flex; align-items: center; gap: 12px; }

.cart-btn {
    position: relative;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    background: var(--teal-700);
    border-radius: 12px;
    transition: background .2s ease;
}
.cart-btn:hover { background: var(--teal-600); }
.cart-badge {
    position: absolute;
    top: -7px;
    inset-inline-start: -7px;
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 2px solid var(--teal-800);
}

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 24px; height: 2.5px; background: #fff; border-radius: 2px; transition: .3s; }

/* ===================== Icons (CSS mask-free, inline shapes) ===================== */
.icon-user, .icon-cart, .icon-download, .icon-chevron,
.icon-shield-mini, .icon-bolt-mini, .icon-headset-mini,
.icon-shield-check, .icon-key, .icon-download-box, .icon-lock {
    display: inline-block;
    width: 18px; height: 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.icon-user { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); }
.icon-cart { width: 22px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E"); }
.icon-download { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E"); }
.icon-chevron { width: 16px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23115e6b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E"); }
.btn-outline:hover .icon-chevron { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E"); }

.badge-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--bg-blue); flex-shrink: 0; }
.icon-shield-mini { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b7a89' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpolyline points='9 12 11 14 15 9'/%3E%3C/svg%3E"); }
.icon-bolt-mini { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f5a623' stroke='%23f5a623' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10'/%3E%3C/svg%3E"); }
.icon-headset-mini { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b7a89' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='2' y='13' width='4' height='7' rx='1.5'/%3E%3Crect x='18' y='13' width='4' height='7' rx='1.5'/%3E%3Cpath d='M20 19a4 4 0 0 1-4 3h-2'/%3E%3C/svg%3E"); }

.icon-shield-check { width: 30px; height: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b7a89' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpolyline points='9 12 11 14 15 9'/%3E%3C/svg%3E"); }
.icon-key { width: 26px; height: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8920c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M10.85 12.15 19 4'/%3E%3Cpath d='M18 5l2 2'/%3E%3Cpath d='M15 8l2 2'/%3E%3C/svg%3E"); }
.icon-download-box { width: 28px; height: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b7a89' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E"); }
.icon-lock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }

/* ===================== Hero ===================== */
.hero {
    position: relative;
    background: linear-gradient(135deg, #f3f9fc 0%, #e7f1f6 100%);
    padding: 64px 0 90px;
    overflow: hidden;
}
.hero-bg-dots {
    position: absolute;
    top: 40px;
    inset-inline-start: 40px;
    width: 120px;
    height: 90px;
    background-image: radial-gradient(var(--teal-400) 1.6px, transparent 1.6px);
    background-size: 16px 16px;
    opacity: .35;
}
.hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.hero-text { order: 2; }
.hero-visual { order: 1; position: relative; }

.hero-title {
    font-size: 50px;
    font-weight: 800;
    color: var(--ink-900);
    line-height: 1.35;
    margin-bottom: 18px;
}
.hero-subtitle {
    font-size: 18px;
    color: var(--ink-500);
    margin-bottom: 30px;
}
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 34px; }

.hero-badges {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.hero-badges li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--ink-700);
}

.hero-guarantee {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
    max-width: 520px;
}
.guarantee-icon {
    width: 50px; height: 50px;
    display: grid; place-items: center;
    background: var(--bg-blue);
    border-radius: 12px;
    flex-shrink: 0;
}
.hero-guarantee strong { color: var(--ink-900); display: block; font-size: 16px; }
.hero-guarantee p { font-size: 13.5px; color: var(--ink-500); margin-top: 2px; }

/* Hero visual / dashboard */
.dashboard-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    padding: 22px;
    position: relative;
    z-index: 2;
    max-width: 460px;
    margin-inline: auto;
}
.dash-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.dash-title { font-weight: 800; color: var(--ink-900); font-size: 16px; }
.dash-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); }

.dash-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.stat-box {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
}
.stat-label { font-size: 12px; color: var(--muted); }
.stat-value { font-size: 17px; font-weight: 800; color: var(--ink-900); margin-top: 2px; }
.stat-unit { font-size: 11px; color: var(--muted); }

.dash-chart { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.chart-caption { font-size: 12px; color: var(--ink-500); font-weight: 700; }
.chart-svg { width: 100%; height: 90px; margin-top: 8px; }
.line-income { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.line-cost { fill: none; stroke: var(--cyan); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.float-card {
    position: absolute;
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    padding: 14px 16px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
}
.key-card {
    bottom: 90px;
    inset-inline-end: -20px;
    border: 1px solid #fbe7c2;
    background: #fffaf0;
    max-width: 260px;
}
.key-card code { display: block; font-size: 12px; color: var(--ink-700); direction: ltr; letter-spacing: .5px; margin: 2px 0; }
.key-card strong { font-size: 14px; color: var(--ink-900); }
.key-card small { font-size: 11px; color: var(--muted); }
.key-icon { width: 44px; height: 44px; display: grid; place-items: center; background: #fef0d6; border-radius: 10px; flex-shrink: 0; }

.download-card {
    bottom: -6px;
    inset-inline-start: -10px;
    border: 1px solid var(--line);
    max-width: 250px;
}
.download-card strong { font-size: 14px; color: var(--ink-900); display: block; }
.download-card small { font-size: 12px; color: var(--ink-500); }
.dl-note { font-size: 11px; color: var(--muted); display: block; margin-top: 2px; }
.dl-icon { width: 46px; height: 46px; display: grid; place-items: center; background: var(--bg-blue); border-radius: 10px; flex-shrink: 0; }

/* ===================== Section heads ===================== */
.section-head { text-align: center; max-width: 700px; margin: 0 auto 50px; }
.section-title {
    font-size: 36px;
    font-weight: 800;
    color: var(--ink-900);
    margin-bottom: 14px;
}
.section-subtitle {
    font-size: 16px;
    color: var(--ink-500);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.subtitle-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; }

/* ===================== Features ===================== */
.features { padding: 90px 0; background: #fff; position: relative; }
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}
.feature-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 34px 28px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--teal-400);
}
.feature-icon {
    width: 72px; height: 72px;
    margin: 0 auto 20px;
    display: grid;
    place-items: center;
    color: var(--teal-600);
    background: var(--bg-blue);
    border-radius: 18px;
}
.feature-icon svg { width: 38px; height: 38px; }
.feature-title { font-size: 19px; font-weight: 800; color: var(--ink-900); margin-bottom: 10px; }
.feature-desc { font-size: 14px; color: var(--ink-500); }

/* ===================== Softwares / Pricing ===================== */
.software { padding: 90px 0; background: #fff; }
.software-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    align-items: stretch;
}
.software-card {
    --card-color: var(--teal-700);
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 20px;
    padding: 30px 26px;
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    overflow: hidden;
}
.software-card::before {
    content: "";
    position: absolute;
    top: 0; inset-inline: 0;
    height: 6px;
    background: var(--card-color);
}
.software-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--card-color);
}
.software-card.popular {
    border-color: var(--card-color);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--card-color) 24%, transparent);
    transform: scale(1.03);
}
.software-card.popular:hover { transform: scale(1.03) translateY(-6px); }
.software-ribbon {
    position: absolute;
    top: 16px;
    inset-inline-start: -34px;
    transform: rotate(-45deg);
    background: var(--card-color);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 40px;
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
}

.software-head { text-align: center; margin-bottom: 18px; }
.software-icon {
    width: 76px;
    height: 76px;
    margin: 4px auto 14px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--card-color) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--card-color) 22%, #fff);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--card-color) 18%, transparent);
    overflow: hidden;
}
.software-icon img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.software-icon-fallback {
    font-size: 34px;
    font-weight: 800;
    color: var(--card-color);
}
.software-name {
    font-size: 22px;
    font-weight: 800;
    color: var(--ink-900);
    margin-bottom: 10px;
}
.software-type {
    display: inline-block;
    background: color-mix(in srgb, var(--card-color) 14%, #fff);
    color: var(--card-color);
    font-weight: 700;
    font-size: 13px;
    padding: 5px 14px;
    border-radius: 30px;
}
.software-price {
    text-align: center;
    margin-bottom: 6px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
}
.price-num { font-size: 30px; font-weight: 800; color: var(--card-color); }
.price-unit { font-size: 14px; color: var(--muted); font-weight: 600; }

.software-divider {
    height: 1px;
    background: var(--line);
    margin: 20px 0;
}
.software-features {
    display: flex;
    flex-direction: column;
    gap: 13px;
    flex: 1;
}
.software-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: var(--ink-700);
}
.software-features .feat-ic {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--card-color) 16%, #fff);
    position: relative;
    flex-shrink: 0;
    margin-top: 1px;
}
.software-features .feat-ic::after {
    content: "";
    position: absolute;
    top: 5px; inset-inline-start: 6px;
    width: 5px; height: 9px;
    border-inline-end: 2px solid var(--card-color);
    border-bottom: 2px solid var(--card-color);
    transform: rotate(45deg);
}
.software-features li.off { color: var(--muted); }
.software-features li.off span:last-child { text-decoration: line-through; }
.software-features li.off .feat-ic { background: #f0f0f0; }
.software-features li.off .feat-ic::after {
    width: 10px; height: 2px;
    border: none;
    background: #b9b9b9;
    top: 9px; inset-inline-start: 5px;
    transform: none;
}

.software-btn {
    display: block;
    text-align: center;
    background: var(--card-color);
    color: #fff;
    font-weight: 700;
    font-size: 15.5px;
    padding: 14px;
    border-radius: 12px;
    transition: filter .2s ease, transform .15s ease;
}
.software-btn:hover { filter: brightness(.92); transform: translateY(-2px); }

@media (max-width: 992px) {
    .software-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .software-card.popular { transform: none; }
    .software-card.popular:hover { transform: translateY(-6px); }
}
@media (max-width: 600px) {
    .software { padding: 60px 0; }
    .software-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ===================== Software detail page ===================== */
.sw-detail { padding: 50px 0 80px; }
.sw-detail-grid {
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 32px;
    align-items: start;
}
.sw-main { min-width: 0; }
.sw-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    border-inline-start: 6px solid var(--accent, var(--teal-700));
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}
.sw-hero-icon {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent, var(--teal-700)) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--accent, var(--teal-700)) 22%, #fff);
    overflow: hidden;
}
.sw-hero-icon img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.sw-hero-icon .software-icon-fallback { color: var(--accent, var(--teal-700)); font-size: 30px; font-weight: 800; }
.sw-hero h1 { font-size: 26px; font-weight: 800; color: var(--ink-900); }
.sw-hero .sw-type {
    display: inline-block;
    margin-top: 8px;
    background: color-mix(in srgb, var(--accent, var(--teal-700)) 14%, #fff);
    color: var(--accent, var(--teal-700));
    font-weight: 700;
    font-size: 13px;
    padding: 4px 12px;
    border-radius: 30px;
}
.sw-hero .sw-price { margin-inline-start: auto; text-align: center; }
.sw-hero .sw-price b { font-size: 24px; color: var(--accent, var(--teal-700)); }
.sw-hero .sw-price small { display: block; color: var(--muted); font-size: 12px; }

.sw-box {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 26px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
}
.sw-box h2 {
    font-size: 19px;
    font-weight: 800;
    color: var(--ink-900);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--line);
}
.sw-desc { line-height: 2.1; color: var(--ink-700); font-size: 15.5px; }
.sw-desc p { margin-bottom: 14px; }

/* محتوای غنی ویرایشگر (CKEditor 5) در صفحه عمومی */
.sw-desc img { max-width: 100%; height: auto; border-radius: 10px; }
.sw-desc figure { margin: 16px 0; max-width: 100%; }
.sw-desc figure.image { display: table; }
.sw-desc figure.image img { display: block; margin-inline: auto; }
.sw-desc figure.image > figcaption {
    display: table-caption;
    caption-side: bottom;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    padding-top: 6px;
}
.sw-desc .image-style-align-left,
.sw-desc figure.image-style-align-left { float: left; margin-inline-end: 18px; max-width: 50%; }
.sw-desc .image-style-align-right,
.sw-desc figure.image-style-align-right { float: right; margin-inline-start: 18px; max-width: 50%; }
.sw-desc .image-style-align-center,
.sw-desc figure.image-style-align-center { margin-inline: auto; }
.sw-desc figure.image_resized { max-width: 100%; }
.sw-desc figure.image_resized img { width: 100%; }
.sw-desc h2 { font-size: 22px; font-weight: 800; color: var(--ink-900); margin: 22px 0 12px; }
.sw-desc h3 { font-size: 18px; font-weight: 800; color: var(--ink-900); margin: 18px 0 10px; }
.sw-desc h4 { font-size: 16px; font-weight: 700; color: var(--ink-900); margin: 16px 0 8px; }
.sw-desc ul, .sw-desc ol { margin: 0 0 14px; padding-inline-start: 24px; }
.sw-desc ul { list-style: disc; }
.sw-desc ol { list-style: decimal; }
.sw-desc li { margin-bottom: 6px; }
.sw-desc a { color: var(--teal-700); text-decoration: underline; }
.sw-desc blockquote {
    border-inline-start: 4px solid var(--teal-700);
    background: var(--bg-soft, #f7fafa);
    padding: 10px 16px;
    margin: 0 0 14px;
    border-radius: 8px;
    color: var(--ink-700);
}
.sw-desc figure.table { display: block; overflow-x: auto; }
.sw-desc table { border-collapse: collapse; width: 100%; margin: 8px 0; }
.sw-desc table td, .sw-desc table th {
    border: 1px solid var(--line);
    padding: 8px 10px;
    text-align: start;
}
.sw-desc table th { background: var(--bg-soft, #f7fafa); font-weight: 700; }
.sw-desc hr { border: none; border-top: 1px solid var(--line); margin: 18px 0; }

/* Comments */
.comment-list { display: flex; flex-direction: column; gap: 18px; }
.comment {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 18px;
    background: var(--bg-soft, #f7fafa);
}
.comment-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.comment-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--teal-700);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}
.comment-name { font-weight: 700; color: var(--ink-900); }
.comment-date { font-size: 12px; color: var(--muted); }
.comment-text { color: var(--ink-700); line-height: 1.9; font-size: 14.5px; }
.comment-reply {
    margin-top: 12px;
    margin-inline-start: 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-inline-start: 4px solid var(--teal-700);
    border-radius: 10px;
    padding: 12px 14px;
}
.comment-reply .reply-label {
    font-weight: 700;
    color: var(--teal-700);
    font-size: 13px;
    margin-bottom: 6px;
    display: flex; align-items: center; gap: 6px;
}
.comment-empty { color: var(--muted); padding: 10px 0; }

.comment-form { margin-top: 22px; }
.comment-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.comment-form textarea { width: 100%; }

/* Download sidebar */
.sw-sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 18px; }
.download-box {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    box-shadow: var(--shadow-sm);
}
.download-box h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--ink-900);
    margin-bottom: 6px;
}
.download-box-text {
    color: var(--ink-700);
    font-size: 14px;
    line-height: 1.9;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--line);
}
.download-list { display: flex; flex-direction: column; gap: 12px; }
.download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--btn-color, var(--teal-700));
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 13px 16px;
    border-radius: 12px;
    transition: filter .2s ease, transform .15s ease;
}
.download-btn:hover { filter: brightness(.92); transform: translateY(-2px); }
.download-btn .dl-ic {
    width: 18px; height: 18px;
    display: inline-block;
    background: currentColor;
    -webkit-mask: var(--dl-mask) center/contain no-repeat;
    mask: var(--dl-mask) center/contain no-repeat;
}
.download-empty { color: var(--muted); font-size: 14px; }

@media (max-width: 880px) {
    .sw-detail-grid { grid-template-columns: 1fr; }
    .sw-sidebar { position: static; order: -1; }
}
@media (max-width: 600px) {
    .comment-form .form-grid { grid-template-columns: 1fr; }
    .sw-hero { flex-wrap: wrap; }
    .sw-hero .sw-price { margin-inline-start: 0; }
}

/* ===================== Articles carousel ===================== */
.articles-carousel { padding: 80px 0; background: var(--bg-soft); }
.carousel { position: relative; display: flex; align-items: center; gap: 10px; }
.carousel-viewport { overflow: hidden; flex: 1; }
.carousel-track {
    display: flex;
    gap: 22px;
    transition: transform .45s ease;
    will-change: transform;
}
.article-card {
    flex: 0 0 calc((100% - 44px) / 3);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease;
}
.article-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.article-thumb {
    height: 180px;
    background: linear-gradient(135deg, var(--teal-700), var(--accent, #f5a623));
    overflow: hidden;
}
/* تصویر شاخص کروسل صفحه اصلی: نمایش کامل تصویر */
.articles-carousel .article-thumb {
    height: 170px;
    background: var(--bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}
.articles-carousel .article-thumb img { object-fit: contain; }
.articles-carousel .article-title { font-size: 16px; }
.articles-carousel .article-excerpt { -webkit-line-clamp: 2; }
.article-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-thumb-placeholder {
    display: block; width: 100%; height: 100%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 60%),
        linear-gradient(135deg, var(--teal-700), #1b97a9);
}
.article-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.article-title { font-size: 17px; font-weight: 800; color: var(--ink-900); line-height: 1.6; }
.article-excerpt {
    font-size: 14px; color: var(--ink-700); line-height: 1.9;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    flex: 1;
}
.article-more { color: var(--teal-700); font-weight: 700; font-size: 14px; margin-top: auto; }
.article-meta-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.article-cat {
    align-self: flex-start;
    display: inline-block;
    background: color-mix(in srgb, var(--teal-700) 12%, #fff);
    color: var(--teal-700);
    font-size: 12px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 30px;
    margin-bottom: 4px;
}

/* category filter list */
.cat-list { display: flex; flex-direction: column; gap: 6px; }
.cat-link {
    display: block;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-700);
    transition: background .2s ease, color .2s ease;
}
.cat-link:hover { background: var(--bg-soft); color: var(--teal-700); }
.cat-link.active { background: var(--teal-700); color: #fff; }

.carousel-btn {
    width: 44px; height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: background .2s ease, transform .15s ease;
}
.carousel-btn:hover { background: var(--teal-700); transform: scale(1.05); }
.carousel-btn::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 10px; height: 10px;
    border-top: 2.4px solid var(--teal-700);
    border-inline-start: 2.4px solid var(--teal-700);
    transition: border-color .2s ease;
}
.carousel-btn:hover::before { border-color: #fff; }
.carousel-prev::before { transform: translate(-50%, -50%) rotate(135deg); }
.carousel-next::before { transform: translate(-50%, -50%) rotate(-45deg); }
.carousel-btn:disabled { opacity: .4; cursor: default; }
.carousel-btn:disabled:hover { background: #fff; transform: none; }
.carousel-btn:disabled:hover::before { border-color: var(--teal-700); }
.carousel-foot { text-align: center; margin-top: 30px; }

@media (max-width: 880px) {
    .article-card { flex: 0 0 calc((100% - 22px) / 2); }
}
@media (max-width: 600px) {
    .article-card { flex: 0 0 100%; }
    .carousel-btn { width: 38px; height: 38px; }
}

/* ===================== Blog (list + detail) ===================== */
.blog-detail { padding: 50px 0 80px; }
.blog-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    align-items: start;
}
.blog-main { min-width: 0; }
.blog-hero-img {
    margin: -26px -26px 22px;
    height: 320px;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}
.blog-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-title { font-size: 28px; font-weight: 800; color: var(--ink-900); line-height: 1.6; margin-bottom: 10px; }
.blog-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; margin-bottom: 20px; }
.blog-meta .dot { opacity: .6; }
.blog-content { margin-top: 6px; }

.blog-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 22px;
}

/* صفحه فهرست بلاگ: ستون پست‌ها (۱۰) + ستون تازه‌ترین (۲) */
.blog-list-grid {
    display: grid;
    grid-template-columns: 10fr 2fr;
    gap: 28px;
    align-items: start;
}
.blog-sidebar-narrow { top: 90px; }
.side-compact { padding: 16px; }
.side-compact .side-thumb { width: 46px; height: 46px; border-radius: 8px; }
.side-compact .side-item { gap: 9px; }
.side-compact .side-title { font-size: 13px; }
.side-compact .side-date { font-size: 11px; }
@media (max-width: 880px) {
    .blog-list-grid { grid-template-columns: 1fr; }
    .blog-sidebar-narrow { position: static; }
}

/* sidebar widgets */
.blog-sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 22px; }
.side-widget {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
}
.side-widget-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--ink-900);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--line);
}
.side-list { display: flex; flex-direction: column; gap: 14px; }
.side-item { display: flex; gap: 12px; align-items: center; }
.side-thumb {
    width: 60px; height: 60px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-soft);
}
.side-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-thumb-ph {
    display: block; width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--teal-700), #1b97a9);
}
.side-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.side-title {
    font-size: 14px; font-weight: 700; color: var(--ink-900); line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    transition: color .2s ease;
}
.side-item:hover .side-title { color: var(--teal-700); }
.side-date { font-size: 12px; color: var(--muted); }

@media (max-width: 880px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-sidebar { position: static; }
    .blog-hero-img { height: 240px; }
}
@media (max-width: 600px) {
    .blog-cards { grid-template-columns: 1fr; }
}

/* ===================== Error page (404) ===================== */
.error-section { padding: 90px 0; background: var(--bg-soft); }
.error-box {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 48px 30px;
    box-shadow: var(--shadow-sm);
}
.error-code {
    font-size: 96px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--teal-700), var(--accent, #f5a623));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.error-title { font-size: 24px; font-weight: 800; color: var(--ink-900); margin: 16px 0 10px; }
.error-text { color: var(--ink-700); line-height: 2; margin-bottom: 26px; }
.error-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ===================== Steps ===================== */
.steps { padding: 90px 0; background: linear-gradient(180deg, #f6fafc 0%, #eef5f8 100%); }
.steps-wrap { position: relative; }
.steps-line {
    position: absolute;
    top: 28px;
    inset-inline: 9%;
    height: 3px;
    background: linear-gradient(90deg, var(--teal-500), var(--teal-300, #7fd1d1));
    z-index: 0;
}
.steps-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    position: relative;
    z-index: 1;
}
.step-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 44px 18px 24px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    position: relative;
    margin-top: 28px;
    transition: transform .25s ease, box-shadow .25s ease;
}
.step-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.step-number {
    position: absolute;
    top: -28px;
    inset-inline-start: 50%;
    transform: translateX(50%);
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--teal-600);
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 18px rgba(27, 122, 137, .35);
    border: 4px solid #fff;
}
.step-title { font-size: 16px; font-weight: 800; color: var(--ink-900); margin-bottom: 8px; }
.step-desc { font-size: 13px; color: var(--ink-500); }

.steps-note {
    margin: 46px auto 0;
    max-width: max-content;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--teal-800);
    color: #fff;
    font-weight: 600;
    font-size: 14.5px;
    padding: 14px 26px;
    border-radius: 30px;
    box-shadow: var(--shadow-md);
}

/* ===================== Footer ===================== */
.site-footer { background: var(--teal-900); color: #cfe2e6; margin-top: 0; }
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
    gap: 36px;
    padding: 60px 24px 40px;
}
.brand-footer .brand-title { font-size: 18px; }
.footer-desc { font-size: 14px; color: #a9c6cc; margin-top: 16px; max-width: 320px; }
.footer-title { color: #fff; font-size: 16px; font-weight: 800; margin-bottom: 18px; }
.footer-links li, .footer-contact li { margin-bottom: 11px; font-size: 14px; color: #a9c6cc; }
.footer-links a { transition: color .2s ease; }
.footer-links a:hover { color: var(--accent); }
.footer-trust { border-top: 1px solid rgba(255,255,255,.08); padding: 22px 0; }
.footer-trust .container { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.footer-trust-title { font-size: 14px; font-weight: 700; color: #cfe3e7; }
.trust-badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; }
.trust-badges img { max-height: 96px; border-radius: 8px; background: #fff; padding: 4px; }
.trust-placeholder {
    border: 1.5px dashed rgba(255,255,255,.22);
    color: #8fb0b6;
    font-size: 13px;
    padding: 22px 40px;
    border-radius: 12px;
}

.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 18px 0; }
.footer-bottom p { text-align: center; font-size: 13px; color: #8fb0b6; }

/* Off-canvas mobile menu backdrop */
.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(13, 61, 68, .5);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 90;
}
.nav-backdrop.show { opacity: 1; visibility: visible; }

/* ===================== Responsive ===================== */
@media (max-width: 992px) {
    .main-nav {
        position: fixed;
        top: var(--header-h);
        inset-inline-end: 0;
        width: 300px;
        max-width: 84vw;
        height: calc(100vh - var(--header-h));
        height: calc(100dvh - var(--header-h));
        background: var(--teal-800);
        flex-direction: column;
        align-items: stretch;
        padding: 20px;
        gap: 4px;
        overflow-y: auto;
        transform: translateX(110%);
        visibility: hidden;
        transition: transform .3s ease, visibility 0s linear .3s;
        box-shadow: -10px 0 30px rgba(0,0,0,.25);
        z-index: 95;
    }
    .main-nav.open {
        transform: translateX(0);
        visibility: visible;
        transition: transform .3s ease, visibility 0s linear 0s;
    }
    .main-nav .nav-link { padding: 12px 14px; border-radius: 10px; text-align: start; }
    .main-nav .nav-link:hover { background: var(--teal-700); }
    .nav-link.active::after { display: none; }

    /* Submenu becomes a smooth accordion on mobile */
    .nav-dropdown { width: 100%; }
    .nav-dropdown-toggle { justify-content: space-between; }
    .nav-submenu {
        position: static;
        visibility: visible;
        transform: none;
        background: rgba(0, 0, 0, .14);
        border: none;
        border-radius: 10px;
        box-shadow: none;
        min-width: 0;
        max-height: 0;
        opacity: 0;
        padding: 0 4px;
        margin: 0 8px;
        overflow: hidden;
        transition: max-height .32s ease, opacity .28s ease, padding .32s ease, margin .32s ease;
    }
    .nav-dropdown.open .nav-submenu {
        max-height: 70vh;
        opacity: 1;
        padding: 4px;
        margin: 2px 8px 6px;
    }
    .nav-submenu::before,
    .nav-submenu::after { display: none; }
    .nav-subitem {
        color: #cfe2e6;
        padding: 10px 16px;
        white-space: normal;
        text-align: start;
    }
    .nav-subitem::before {
        content: "–";
        margin-inline-end: 8px;
        opacity: .6;
    }
    .nav-subitem:hover { background: var(--teal-700); color: #fff; padding-inline-end: 16px; }

    /* Caret indicates open/close state */
    .nav-caret {
        display: inline-block;
        transform: translateY(-2px) rotate(-45deg);
        transition: transform .3s ease;
    }
    .nav-dropdown.open .nav-caret { transform: translateY(2px) rotate(135deg); }
    .nav-toggle { display: flex; }

    /* دکمه ورود فقط آیکونی در موبایل */
    .btn-login { padding: 0; width: 46px; height: 46px; border-radius: 12px; gap: 0; }
    .btn-login-text { display: none; }
    .btn-login .icon-user { width: 20px; height: 20px; }

    /* Hamburger -> X animation */
    .nav-toggle.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
    .nav-toggle.active span:nth-child(2) { opacity: 0; }
    .nav-toggle.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

    /* Lock background scroll when menu is open */
    body.nav-open { overflow: hidden; }

    .hero-inner { grid-template-columns: 1fr; gap: 60px; }
    .hero-text { order: 1; text-align: center; }
    .hero-visual { order: 2; }
    .hero-buttons, .hero-badges { justify-content: center; }
    .hero-guarantee { margin-inline: auto; }
    .hero-title { font-size: 40px; }

    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .steps-grid { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
    .steps-line { display: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .header-inner { gap: 10px; }
    .brand-subtitle { display: none; }
    .brand-logo { width: 44px; height: 44px; }
    .hero-title { font-size: 32px; }
    .hero-subtitle { font-size: 16px; }
    .section-title { font-size: 28px; }
    .features-grid { grid-template-columns: 1fr; }
    .steps-grid { grid-template-columns: 1fr; }
    .dash-stats { grid-template-columns: 1fr; }
    .key-card, .download-card { position: static; max-width: 100%; margin-top: 16px; }
    .footer-grid { grid-template-columns: 1fr; }
    .float-card { inset-inline: auto; }
}

/* ===================== Messages / Alerts ===================== */
.messages-wrap { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.alert {
    padding: 13px 18px;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 600;
    border: 1px solid transparent;
}
.alert-success { background: #e6f7ef; color: #1a7f53; border-color: #b9ead2; }
.alert-error, .alert-danger { background: #fdecec; color: #c0392b; border-color: #f5c6c2; }
.alert-info { background: #e9f3fb; color: #1b6fa8; border-color: #c3e0f3; }
.alert-warning { background: #fff5e6; color: #b9770e; border-color: #f7e0b5; }

/* ===================== Forms ===================== */
.form-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.form-field label { font-weight: 700; font-size: 14px; color: var(--ink-900); }
.form-field input,
.form-field textarea,
.form-field select {
    font-family: inherit;
    font-size: 15px;
    color: var(--ink-900);
    background: var(--bg-soft);
    border: 1.5px solid var(--line);
    border-radius: 11px;
    padding: 12px 14px;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    width: 100%;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    outline: none;
    border-color: var(--teal-500);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(42, 163, 166, .12);
}
.form-field input:disabled { opacity: .7; cursor: not-allowed; }
.form-field textarea { resize: vertical; min-height: 80px; }
.field-error { color: #c0392b; font-size: 12.5px; font-weight: 600; }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 16px; font-size: 14px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-field-full { grid-column: 1 / -1; }

/* ===================== Auth pages ===================== */
.auth-section {
    background: linear-gradient(135deg, #eef5f8 0%, #e3eef3 100%);
    padding: 60px 0;
    min-height: calc(100vh - var(--header-h));
    display: flex;
    align-items: center;
}
.auth-card {
    background: #fff;
    max-width: 440px;
    margin: 0 auto;
    width: 100%;
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    padding: 38px 34px;
    border: 1px solid var(--line);
}
.auth-card-wide { max-width: 620px; }
.auth-head { text-align: center; margin-bottom: 26px; }
.auth-logo { width: 64px; height: 64px; object-fit: contain; margin: 0 auto 14px; }
.auth-title { font-size: 24px; font-weight: 800; color: var(--ink-900); margin-bottom: 6px; }
.auth-subtitle { font-size: 14px; color: var(--ink-500); }
.auth-foot { text-align: center; margin-top: 20px; font-size: 14px; color: var(--ink-500); }
.auth-foot a { color: var(--teal-700); font-weight: 700; }
.auth-foot a:hover { color: var(--accent-dark); }

/* ===================== User panel ===================== */
.panel-section { background: var(--bg-soft); padding: 40px 0 60px; min-height: calc(100vh - var(--header-h)); }
.panel-layout { display: grid; grid-template-columns: 270px 1fr; gap: 26px; align-items: start; }

.panel-sidebar {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 22px;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: calc(var(--header-h) + 20px);
}
.panel-user { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.panel-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--teal-700); display: grid; place-items: center; flex-shrink: 0;
}
.panel-user-info { display: flex; flex-direction: column; overflow: hidden; }
.panel-user-info strong { color: var(--ink-900); font-size: 15px; }
.panel-user-info span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.panel-nav { display: flex; flex-direction: column; gap: 4px; }
.panel-link {
    display: flex; align-items: center; gap: 11px;
    padding: 12px 14px; border-radius: 11px;
    color: var(--ink-700); font-weight: 600; font-size: 14.5px;
    transition: background .2s ease, color .2s ease;
}
.panel-link:hover { background: var(--bg-blue); color: var(--teal-700); }
.panel-link.active { background: var(--teal-700); color: #fff; }
.panel-link-danger { color: #c0392b; }
.panel-link-danger:hover { background: #fdecec; color: #c0392b; }
.pnav-icon { width: 19px; height: 19px; background-repeat: no-repeat; background-position: center; background-size: contain; flex-shrink: 0; }

.panel-content { min-width: 0; }
.panel-head { margin-bottom: 22px; }
.panel-title { font-size: 26px; font-weight: 800; color: var(--ink-900); margin-bottom: 6px; }
.panel-desc { font-size: 14px; color: var(--ink-500); }

.panel-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.pstat-card {
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    padding: 20px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-sm);
}
.pstat-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--bg-blue); background-repeat: no-repeat; background-position: center; background-size: 22px; flex-shrink: 0; }
.pstat-green .pstat-icon { background-color: #e6f7ef; }
.pstat-orange .pstat-icon { background-color: #fff5e6; }
.pstat-num { display: block; font-size: 24px; font-weight: 800; color: var(--ink-900); }
.pstat-label { font-size: 13px; color: var(--muted); }

.panel-box {
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    padding: 24px; box-shadow: var(--shadow-sm); margin-bottom: 22px;
}
.panel-box-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.panel-box-head h2, .panel-box-title { font-size: 18px; font-weight: 800; color: var(--ink-900); }
.panel-box-title { margin-bottom: 18px; }

.table-wrap { overflow-x: auto; }
.panel-table { width: 100%; border-collapse: collapse; }
.panel-table th, .panel-table td { padding: 13px 14px; text-align: start; border-bottom: 1px solid var(--line); font-size: 14px; }
.panel-table th { color: var(--muted); font-weight: 700; font-size: 13px; }
.panel-table td { color: var(--ink-700); }

.code-pill { background: var(--bg-blue); color: var(--teal-700); font-weight: 700; padding: 5px 10px; border-radius: 8px; font-size: 13px; letter-spacing: .5px; }
.badge { display: inline-block; padding: 5px 12px; border-radius: 30px; font-size: 12.5px; font-weight: 700; }
.badge-green { background: #e6f7ef; color: #1a7f53; }
.badge-orange { background: #fff5e6; color: #b9770e; }

.empty-state { text-align: center; padding: 30px 16px; color: var(--ink-500); display: flex; flex-direction: column; align-items: center; gap: 14px; }

.activation-form { max-width: 560px; display: flex; flex-direction: column; gap: 4px; }
.activation-list { display: flex; flex-direction: column; gap: 12px; }
.activation-item {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); flex-wrap: wrap;
}
.activation-meta { display: flex; flex-direction: column; gap: 3px; }
.activation-meta strong { color: var(--ink-900); }
.activation-date { font-size: 12.5px; color: var(--muted); }
.activation-result { display: flex; align-items: center; gap: 10px; }
.copy-btn { background: var(--teal-700); color: #fff; border: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 8px; transition: background .2s ease; }
.copy-btn:hover { background: var(--teal-600); }

/* panel icons */
.icon-user-lg { width: 26px; height: 26px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); }
.icon-grid { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23115e6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E"); }
.icon-key2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23115e6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M10.85 12.15 19 4'/%3E%3Cpath d='M18 5l2 2'/%3E%3Cpath d='M15 8l2 2'/%3E%3C/svg%3E"); }
.icon-user2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23115e6b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); }
.icon-dl2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23115e6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E"); }
.icon-out { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E"); }
.icon-check2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7f53' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.icon-clock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9770e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 14'/%3E%3C/svg%3E"); }

@media (max-width: 992px) {
    .panel-layout { grid-template-columns: 1fr; }
    .panel-sidebar { position: static; }
    .panel-nav { flex-direction: row; flex-wrap: wrap; }
    .panel-link { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 600px) {
    .form-grid { grid-template-columns: 1fr; }
    .panel-stats { grid-template-columns: 1fr; }
    .auth-card { padding: 28px 22px; }
}