@import url('brand-fonts.css');
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 400; src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 700; src: url('../fonts/Vazirmatn-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; src: url('../fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; src: url('../fonts/Inter-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; src: url('../fonts/Inter-SemiBold.woff2') format('woff2'); }

:root {
    --bg-main: #f0f4f8; --text-main: #0f172a; --text-muted: #475569;
    --nav-bg: rgba(255, 255, 255, 0.85); --card-bg: rgba(255, 255, 255, 0.9);
    --border-light: rgba(0, 0, 0, 0.08); --accent: #0088ff; --accent-glow: rgba(0, 136, 255, 0.25);
    /* Both aliases resolve to the project stack, so the landing page and
       the panel cannot drift apart typographically. */
    --font-fa: var(--font-ui); --font-en: var(--font-ui);
    --mockup-header: #e2e8f0; --step-bg: #ffffff; --step-border: #e2e8f0;


    --mk-bg-root: #f6f8fa; --mk-bg-sidebar: #ffffff; --mk-bg-card: #ffffff;
    --mk-border: #d0d7de; --mk-text-main: #24292f; --mk-text-dim: #57606a;
    --mk-accent: #0969da; --mk-success: #1a7f37; --mk-danger: #cf222e; --mk-warn: #9a6700;

    /* A SECOND set of hues. The whole page was one blue on white on grey, which
       is what made it read as flat no matter how many cards were added: with a
       single hue there is nothing for the eye to use to tell one block from
       another. Each accent is used as a soft tint behind an icon, never as body
       text, so contrast is unaffected. */
    --c-violet: #7c3aed; --c-violet-soft: rgba(124, 58, 237, 0.12);
    --c-cyan:   #0891b2; --c-cyan-soft:   rgba(8, 145, 178, 0.12);
    --c-emerald:#059669; --c-emerald-soft:rgba(5, 150, 105, 0.12);
    --c-amber:  #d97706; --c-amber-soft:  rgba(217, 119, 6, 0.12);
    --c-rose:   #e11d48; --c-rose-soft:   rgba(225, 29, 72, 0.12);
    --c-indigo: #4f46e5; --c-indigo-soft: rgba(79, 70, 229, 0.12);

    /* Three depths instead of one. Every card carried the same shadow, so
       nothing sat in front of anything else and the page looked printed. */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 10px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(15, 23, 42, 0.07);
    --shadow-lg: 0 10px 20px rgba(15, 23, 42, 0.08), 0 30px 60px rgba(15, 23, 42, 0.12);
    --surface-2: #ffffff;
}

body.dark-theme {
    --bg-main: #0b1120; --text-main: #f8fafc; --text-muted: #94a3b8;
    --nav-bg: rgba(15, 23, 42, 0.85); --card-bg: rgba(30, 41, 59, 0.7);
    --border-light: rgba(255, 255, 255, 0.1); --accent: #38bdf8; --accent-glow: rgba(56, 189, 248, 0.25);
    --mockup-header: #1e293b; --step-bg: rgba(15, 23, 42, 0.6); --step-border: rgba(255, 255, 255, 0.1);


    --mk-bg-root: #0d1117; --mk-bg-sidebar: #010409; --mk-bg-card: #161b22;
    --mk-border: #30363d; --mk-text-main: #c9d1d9; --mk-text-dim: #8b949e;
    --mk-accent: #58a6ff; --mk-success: #238636; --mk-danger: #da3633; --mk-warn: #d29922;

    --c-violet: #a78bfa; --c-violet-soft: rgba(167, 139, 250, 0.16);
    --c-cyan:   #22d3ee; --c-cyan-soft:   rgba(34, 211, 238, 0.16);
    --c-emerald:#34d399; --c-emerald-soft:rgba(52, 211, 153, 0.16);
    --c-amber:  #fbbf24; --c-amber-soft:  rgba(251, 191, 36, 0.16);
    --c-rose:   #fb7185; --c-rose-soft:   rgba(251, 113, 133, 0.16);
    --c-indigo: #818cf8; --c-indigo-soft: rgba(129, 140, 248, 0.16);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.38);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);
    --surface-2: #101a2e;
}


/* ===================================================== the page ground =====
 * ONE ground family for every public page.
 *
 * WHY IT LIVES HERE: body was painted from one palette (#f0f4f8) and the
 * landing sections from another (#f4f7fc). The difference showed through the
 * translucent navbar and in the over-scroll strip, which reads to a visitor as
 * a panel floating on top of the page rather than as the page itself. Two
 * palettes for one surface is the bug; putting the surface in the sheet every
 * public page already loads is the fix.
 *
 * --pg-page is what the browser paints behind everything, so it is deliberately
 * the SAME value as the first section on top of it: the navbar's alpha then
 * blends into that section instead of stepping away from it.
 *
 * Taken from the product's own site (test.gsmgpt.com) so the whole front end -
 * this app and that site - stands on one ground.
 */
:root {
    --pg-page:     #f4f7fc;   /* body, and the section that meets the navbar */
    --pg-deeper:   #ffffff;
    --pg-band:     #eef3fa;
    --pg-surface:  #ffffff;
    --pg-surface2: #f5f8fd;
    --pg-navbar:   rgba(255, 255, 255, 0.86);
    --pg-footer:   #e8eef7;
    --pg-hairline: #e2e8f0;
    --pg-ink:      #06172e;
    /* #5b6a80, not the reference's #64748b: that measures 4.27:1 on its own
       band ground, under the 4.5 minimum. This is the lightest slate that
       clears 4.5 on all four light grounds. */
    --pg-haze:     #5b6a80;
}
body.dark-theme {
    --pg-page:     #06162c;
    --pg-deeper:   #07162a;
    --pg-band:     #0d1a2c;
    --pg-surface:  #0d1b2f;
    --pg-surface2: #162234;
    --pg-navbar:   rgba(6, 12, 29, 0.86);
    --pg-footer:   #030a17;
    --pg-hairline: #1c2a42;
    --pg-ink:      #e4e8ff;
    --pg-haze:     #8fa3bf;
}

* { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
body { background-color: var(--pg-page); color: var(--text-main); font-family: var(--font-fa); transition: background-color 0.4s, color 0.4s; overflow-x: hidden; opacity: 0; animation: fadePageIn 0.6s ease forwards; }
body[lang="en"] { font-family: var(--font-en); }

@keyframes fadePageIn { from { opacity: 0; } to { opacity: 1; } }

.navbar { display: flex; justify-content: space-between; align-items: center; padding: 15px 5%; background: var(--pg-navbar); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-light); position: sticky; top: 0; z-index: 100; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); transition: all 0.4s ease; }
.logo { font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.logo-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 6px 12px var(--accent-glow); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.logo-icon img { width: 100%; height: 100%; object-fit: cover; }
.logo:hover .logo-icon { transform: scale(1.15) rotate(10deg); box-shadow: 0 10px 20px var(--accent-glow); }

.controls { display: flex; gap: 12px; align-items: center; }
.btn-icon { background: var(--card-bg); border: 1px solid var(--border-light); color: var(--text-main); width: 40px; height: 40px; border-radius: 12px; cursor: pointer; font-family: inherit; font-weight: 700; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.btn-icon:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 15px var(--accent-glow); }

.btn-primary { padding: 12px 24px; background: linear-gradient(135deg, var(--accent), #4facfe); color: #fff; text-decoration: none; border-radius: 12px; font-weight: bold; font-size: 14px; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 8px 20px var(--accent-glow); display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer; }
.btn-primary:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 15px 25px rgba(0, 136, 255, 0.35); }
.btn-outline { padding: 12px 24px; background: transparent; border: 2px solid var(--accent); color: var(--text-main); text-decoration: none; border-radius: 12px; font-weight: bold; font-size: 14px; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.btn-outline:hover { background: rgba(0, 136, 255, 0.05); transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 20px var(--accent-glow); }

.hero-split { display: flex; align-items: stretch; justify-content: space-between; max-width: 1450px; margin: 0 auto; padding: 60px 5% 40px; min-height: calc(100vh - 80px); gap: 40px; position: relative; }
.hero-split::before { content: ''; position: absolute; top: -10%; left: 20%; width: 600px; height: 600px; background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%); z-index: -1; filter: blur(50px); }

.hero-content { flex: 0 0 400px; display: flex; flex-direction: column; justify-content: center; animation: slideUp 0.6s ease forwards; }
.hero-content h1 { font-size: clamp(32px, 4vw, 48px); font-weight: 900; line-height: 1.3; margin-bottom: 20px; }
.hero-content h1 span { color: var(--accent); background: linear-gradient(135deg, var(--accent), #4facfe); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-content p { font-size: 16px; color: var(--text-muted); line-height: 1.8; margin-bottom: 35px; }
.hero-buttons { display: flex; gap: 15px; }
.hero-buttons .btn-primary, .hero-buttons .btn-outline { padding: 15px 35px; font-size: 15px; }


.hero-visual { flex: 1; min-width: 0; display: flex; justify-content: flex-end; align-items: center; position: relative; animation: slideUp 0.8s ease forwards; perspective: 1500px; }
.mockup-wrapper { position: relative; width: 100%; max-width: 1050px; transform: rotateY(-3deg) rotateX(1deg); transition: transform 0.5s ease; }
.mockup-wrapper:hover { transform: rotateY(0deg) rotateX(0deg) scale(1.01); }
body[dir="ltr"] .mockup-wrapper { transform: rotateY(3deg) rotateX(1deg); }
body[dir="ltr"] .mockup-wrapper:hover { transform: rotateY(0deg) rotateX(0deg) scale(1.01); }


.mockup-window {
    width: 100%; height: 600px;
    background: var(--mk-bg-root); border-radius: 12px;
    box-shadow: 0 30px 60px -15px rgba(0,0,0,0.5); border: 1px solid var(--border-light);
    display: flex; flex-direction: column; overflow: hidden;
    transition: box-shadow 0.5s ease, background 0.4s;


    --accent: var(--mk-accent);
    --text-main: var(--mk-text-main);
    --text-dim: var(--mk-text-dim);
    --border: var(--mk-border);
    --success: var(--mk-success);
    --warn: var(--mk-warn);
    --danger: var(--mk-danger);
}
.mockup-wrapper:hover .mockup-window { box-shadow: 0 40px 70px -10px var(--accent-glow); }

.mockup-header { height: 32px; background: var(--mockup-header); display: flex; align-items: center; padding: 0 15px; gap: 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; transition: background 0.4s, border-color 0.4s; }
.mockup-dot { width: 10px; height: 10px; border-radius: 50%; }
.mockup-dot.red { background: #ff5f56; }
.mockup-dot.yellow { background: #ffbd2e; }
.mockup-dot.green { background: #27c93f; }


.mockup-body { display: flex; flex: 1; overflow: hidden; background: var(--mk-bg-root); font-family: 'Inter', Tahoma, sans-serif; font-size: 11px; color: var(--text-main); text-align: left; direction: ltr; transition: background 0.4s, color 0.4s; }


.mockup-window .sidebar-left { width: 20%; min-width: 180px; max-width: 220px; background: var(--mk-bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 15px; flex-shrink: 0; overflow-y: auto; }
.mockup-window .app-brand { font-size: 13px; font-weight: 800; margin-bottom: 15px; color: var(--text-main); }
.mockup-window .status-pill { text-align: center; padding: 6px; border-radius: 4px; font-size: 9px; font-weight: bold; margin-bottom: 15px; border: 1px solid transparent; }
.mockup-window .status-pill.adb { background: rgba(35, 134, 54, 0.15); color: var(--success); border-color: rgba(35, 134, 54, 0.4); }
.mockup-window .group-label { font-size: 9px; color: var(--text-dim); text-transform: uppercase; font-weight: 700; margin-bottom: 8px; }
.mockup-window button { font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.mockup-window .sidebar-left button { width: 100%; padding: 8px 10px; border-radius: 4px; border: 1px solid var(--border); background: var(--mk-bg-card); color: var(--text-main); margin-bottom: 8px; font-weight: 600; font-size: 11px; justify-content: flex-start; }
.mockup-window .sidebar-left .btn-connect-special { justify-content: center; text-transform: uppercase; background: rgba(218,54,51,0.1); color: var(--danger); border-color: rgba(218,54,51,0.3); font-weight: 700; }
.mockup-window .sidebar-left button:disabled { opacity: 0.5; filter: grayscale(1); cursor: not-allowed; }
.mockup-window .sidebar-user-profile { margin-top: auto; background: var(--mk-bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 8px; }
.mockup-window .user-info { display: flex; justify-content: space-between; align-items: center; font-size: 10px; font-weight: 600; }
.mockup-window .user-credit { color: var(--success); background: rgba(35, 134, 54, 0.1); padding: 2px 4px; border-radius: 3px; font-size: 9px; }


.mockup-window .main { flex: 1; width: 55%; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.mockup-window .main-scroll { flex: 1; padding: 20px 25px; overflow-y: auto; }
.mockup-window .dashboard-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 15px; }
.mockup-window .section-title { font-size: 14px; font-weight: 700; color: var(--text-main); }
.mockup-window .btn-small-action { padding: 4px 8px; font-size: 9px; background: transparent; border: 1px solid var(--border); color: var(--text-main); border-radius: 4px; font-weight: 600; }
.mockup-window .dashboard-header .icon-btn { font-size: 14px; background: transparent; border: none; padding: 4px; }
.mockup-window .sub-title { font-size: 10px; color: var(--accent); text-transform: uppercase; margin: 0 0 10px 0; font-weight: 700; display: flex; justify-content: space-between; }


.mockup-window .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 25px; }
.mockup-window .info-card { background: var(--mk-bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mockup-window .info-card .label { font-size: 9px; color: var(--text-dim); text-transform: uppercase; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mockup-window .info-card .value { font-size: 11px; font-weight: 700; color: var(--text-main); font-family: 'Consolas', monospace; word-break: break-all; line-height: 1.3; }


.mockup-window .process-footer { height: 50px; background: var(--mk-bg-sidebar); border-top: 1px solid var(--border); padding: 0 25px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.mockup-window .footer-left { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.mockup-window .progress-meta { display: flex; justify-content: space-between; font-size: 10px; font-weight: 600; color: var(--text-dim); }
.mockup-window .progress-track { width: 100%; height: 5px; background: var(--bg-main); border-radius: 3px; border: 1px solid var(--border); overflow: hidden; }
.mockup-window .progress-fill { height: 100%; background: linear-gradient(90deg, #1f6feb, #58a6ff); }
.mockup-window .btn-stop { padding: 6px 15px; background: rgba(218,54,51,0.1); border: 1px solid rgba(218,54,51,0.3); color: #da3633; border-radius: 4px; font-size: 9px; font-weight: 700; }


.mockup-window .sidebar-right { width: 25%; min-width: 220px; max-width: 280px; background: var(--mk-bg-sidebar); border-left: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; }
.mockup-window .log-header { padding: 10px 15px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: 10px; font-weight: 700; color: var(--text-dim); height: 40px; }
.mockup-window .log-actions { display: flex; gap: 5px; }
.mockup-window .log-actions .icon-btn { font-size: 12px; background: transparent; border: none; padding: 2px; }
.mockup-window .log-container { flex: 1; padding: 15px; overflow-y: auto; font-family: 'Consolas', monospace; display: flex; flex-direction: column; gap: 8px; }
.mockup-window .log-item { display: flex; flex-direction: column; gap: 3px; border-bottom: 1px dashed rgba(48, 54, 61, 0.4); padding-bottom: 8px; }
.mockup-window .log-time { color: var(--text-dim); font-size: 9px; font-weight: bold; }
.mockup-window .log-msg { font-size: 10px; line-height: 1.4; word-break: break-word; color: var(--text-main); }
.mockup-window .log-msg span { font-family: 'Inter', sans-serif !important; }


.mockup-window .dropdown-content { display: none; }
.mockup-window .toast { display: none; }


.floating-badge { position: absolute; bottom: -20px; right: -20px; background: var(--nav-bg); backdrop-filter: blur(10px); padding: 15px 25px; border-radius: 16px; border: 1px solid var(--border-light); box-shadow: 0 15px 30px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 10px; font-weight: bold; font-size: 14px; z-index: 10; animation: float 3s ease-in-out infinite; }
body[dir="ltr"] .floating-badge { right: auto; left: -20px; }


.section-header { text-align: center; margin-bottom: 50px; }
.section-header h2 { font-size: 32px; font-weight: 800; margin-bottom: 15px; }
.section-header p { color: var(--text-muted); font-size: 16px; max-width: 600px; margin: 0 auto; line-height: 1.8; }

.steps-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; position: relative; }
.step-card { background: var(--step-bg); border: 1px solid var(--step-border); padding: 35px 25px; border-radius: 20px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.02); transition: all 0.4s ease; position: relative; z-index: 2; }
.step-card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 20px 40px var(--accent-glow); }
.step-number { width: 50px; height: 50px; background: linear-gradient(135deg, var(--accent), #4facfe); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; margin: 0 auto 20px; box-shadow: 0 5px 15px var(--accent-glow); }
.step-card h4 { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.step-card p { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: 20px; }

.dl-btn { background: rgba(0, 136, 255, 0.1); color: var(--accent); padding: 10px 20px; border-radius: 10px; font-size: 13px; font-weight: bold; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all 0.3s; }
.dl-btn:hover { background: var(--accent); color: #fff; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; padding: 40px 5% 100px; max-width: 1250px; margin: 0 auto; scroll-margin-top: 80px; }
.feature-card { background: var(--card-bg); border: 1px solid var(--border-light); padding: 40px 30px; border-radius: 24px; text-align: center; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; }
.feature-card:hover { transform: translateY(-8px); border-color: var(--accent); box-shadow: 0 20px 40px var(--accent-glow); }
.feature-icon { font-size: 36px; margin-bottom: 20px; display: inline-flex; align-items: center; justify-content: center; width: 70px; height: 70px; background: rgba(0, 136, 255, 0.1); border-radius: 20px; color: var(--accent); transition: transform 0.3s; }
.feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }
.feature-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 15px; }
.feature-card p { color: var(--text-muted); font-size: 14px; line-height: 1.8; }

@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@media (max-width: 1200px) {
    .hero-split { flex-direction: column; text-align: center; gap: 40px; padding-top: 40px; }
    .hero-content { max-width: 100%; align-items: center; flex: none; }
    .hero-buttons { justify-content: center; width: 100%; }
    .hero-visual { width: 100%; max-width: 100%; }
    .mockup-wrapper { transform: none !important; width: 100%; max-width: 1000px; }
    body[dir="ltr"] .mockup-wrapper { transform: none !important; }
    .mockup-wrapper:hover { transform: translateY(-5px) !important; }
    .floating-badge { right: 10px; bottom: -10px; }
}
@media (max-width: 900px) {
    .mockup-window .sidebar-right { display: none; }
    .mockup-window .sidebar-left { width: 220px; }
}
@media (max-width: 650px) {
    .mockup-window .sidebar-left { display: none; }
    .mockup-window { height: 500px; }
    .hero-content h1 { font-size: 28px; }
}
@media (max-width: 480px) {
    .hero-buttons { flex-direction: column; }
    .btn-primary, .btn-outline { width: 100%; }
    .floating-badge { display: none; }
}

/* ==========================================================================
   LANDING PAGE, REBUILT
   Answers, in order, the report's points: a headline that says what the
   product does, buttons with different weights and a named destination, a
   visible user flow, requirement cards with a real download button, a titled
   features section that looks different from the one above it, bigger icons
   and type, more than one hue, more than one shadow, and an ending.
   ========================================================================== */

/* ------------------------------------------------------------------ type ---
   Everything was a size or two too small to read comfortably at arm's length
   and the headings were not heavy enough to lead the eye down the page. */
.section-header { text-align: center; margin: 0 auto 46px; max-width: 720px; }
.section-header h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 900; letter-spacing: -0.02em; margin-bottom: 14px; }
.section-header p  { color: var(--text-muted); font-size: clamp(15px, 1.5vw, 17px); line-height: 1.9; }

/* ------------------------------------------------------------------ hero ---
   Copy above, screenshot below, both centred: the visitor reads what it does
   before seeing what it looks like, and the screenshot gets the full width it
   needs to be legible instead of a squeezed column beside the text. */
.hero { max-width: 1280px; margin: 0 auto; padding: clamp(40px, 6vh, 80px) 5% 30px; position: relative; }
.hero::before {
    content: ''; position: absolute; top: -140px; left: 50%; transform: translateX(-50%);
    width: min(900px, 90vw); height: 520px; z-index: -1; filter: blur(60px);
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
}
.hero-copy { text-align: center; max-width: 860px; margin: 0 auto 46px; animation: slideUp 0.6s ease forwards; }
.hero-eyebrow {
    display: inline-block; margin-bottom: 20px; padding: 7px 16px; border-radius: 999px;
    background: var(--c-violet-soft); color: var(--c-violet);
    font-size: 13px; font-weight: 800; letter-spacing: 0.01em;
}
.hero-copy h1 {
    font-size: clamp(30px, 5vw, 56px); font-weight: 900; line-height: 1.25;
    letter-spacing: -0.03em; margin-bottom: 20px;
}
.hero-copy h1 span { background: linear-gradient(135deg, var(--accent), var(--c-violet)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-copy p { font-size: clamp(16px, 1.7vw, 19px); color: var(--text-muted); line-height: 1.9; max-width: 680px; margin: 0 auto 34px; }

.hero-buttons { display: flex; gap: 14px; justify-content: center; align-items: stretch; flex-wrap: wrap; }

/* The one action the page wants: taller, heavier, and it says where it goes
   and what it costs in time. The other is a quiet text-weight link-button, so
   the pair no longer reads as two equal choices. */
.btn-cta { flex-direction: column; gap: 2px; padding: 14px 34px; border-radius: 16px; box-shadow: var(--shadow-md); }
.btn-cta .cta-main { font-size: 16px; font-weight: 800; line-height: 1.4; }
.btn-cta .cta-sub  { font-size: 11.5px; font-weight: 600; opacity: 0.85; }
.btn-ghost {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 26px; border-radius: 16px; text-decoration: none; cursor: pointer;
    background: transparent; border: 1px solid var(--border-light); color: var(--text-muted);
    font-family: inherit; font-size: 15px; font-weight: 700; transition: all 0.3s ease;
}
.btn-ghost:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-glow); }

/* ----------------------------------------------------------------- trust ---
   Four plain facts, before the fold. */
.trust-strip {
    list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px; margin-top: 38px;
}
.trust-strip li {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 150px; flex: 0 1 auto; padding: 14px 20px;
    background: var(--card-bg); border: 1px solid var(--border-light);
    border-radius: 16px; box-shadow: var(--shadow-sm);
}
.trust-strip strong { font-size: 20px; font-weight: 900; color: var(--text-main); letter-spacing: -0.01em; }
.trust-strip span   { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }

/* The screenshot: centred, full width, flat on the page rather than tilted
   away from the reader. */
.hero-visual { display: flex; justify-content: center; perspective: none; animation: slideUp 0.8s ease forwards; }
.hero .mockup-wrapper { max-width: 1180px; width: 100%; transform: none !important; }
.hero .mockup-window { height: clamp(420px, 62vh, 640px); box-shadow: var(--shadow-lg); border-radius: 16px; }
.hero .mockup-wrapper:hover .mockup-window { box-shadow: 0 30px 70px -10px var(--accent-glow); }

/* ------------------------------------------------------------------ flow ---
   The missing answer to "what am I actually supposed to do?". */
.flow { max-width: 1280px; margin: 0 auto; padding: clamp(40px, 6vh, 80px) 5%; }
.flow-track {
    list-style: none; display: grid; gap: 18px; position: relative;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.flow-step {
    position: relative; text-align: center; padding: 28px 22px 24px;
    background: var(--card-bg); border: 1px solid var(--border-light);
    border-radius: 22px; box-shadow: var(--shadow-sm); transition: transform .35s ease, box-shadow .35s ease;
}
.flow-step:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.flow-dot {
    /* left, not inset-inline-start: paired with a physical translate, a logical
       offset does not centre in RTL (see the tooltip note further down). */
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--accent); color: #fff; font-size: 14px; font-weight: 900;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px var(--accent-glow);
}
.flow-ico {
    width: 62px; height: 62px; border-radius: 20px; margin: 14px auto 16px;
    display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.flow-step h4 { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.flow-step p  { font-size: 14.5px; color: var(--text-muted); line-height: 1.8; }

/* Icon tints. Same shape, six hues — this is what stops six identical cards
   from reading as one grey block. */
.ico-violet  { background: var(--c-violet-soft);  color: var(--c-violet); }
.ico-cyan    { background: var(--c-cyan-soft);    color: var(--c-cyan); }
.ico-emerald { background: var(--c-emerald-soft); color: var(--c-emerald); }
.ico-amber   { background: var(--c-amber-soft);   color: var(--c-amber); }
.ico-rose    { background: var(--c-rose-soft);    color: var(--c-rose); }
.ico-indigo  { background: var(--c-indigo-soft);  color: var(--c-indigo); }

/* --------------------------------------------------------- requirements ---
   The requirement cards' own shape used to live here: a 132px picture panel,
   three gradient tints for it, and a square number badge pinned in its corner.
   landing.css draws them as the page's ordinary card now - tinted tile, corner
   pill, rail - so none of that is reachable and none of it is kept. */
.prerequisites { padding-inline: 5%; }

/* One button size for the whole row: they used to be text-sized links that
   carried no weight and did not line up with each other. */
.dl-btn {
    margin: 0 24px; min-height: 46px; padding: 12px 20px; border-radius: 14px;
    font-size: 14px; font-weight: 800; justify-content: center; gap: 10px;
    background: var(--accent); color: #fff; box-shadow: var(--shadow-sm);
}
.dl-btn:hover { background: var(--accent); filter: brightness(1.07); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.dl-btn-alt { background: var(--c-emerald); }
.dl-btn-alt:hover { background: var(--c-emerald); }

/* -------------------------------------------------------------- features ---
   A band with its own background and its own card shape, so it cannot be
   mistaken for a continuation of the section above it. */
.features-section {
    background: var(--surface-2); border-block: 1px solid var(--border-light);
    padding: clamp(46px, 7vh, 90px) 0; margin-top: 30px; scroll-margin-top: 80px;
}
.features { max-width: 1280px; margin: 0 auto; padding: 0 5%; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.feature-card {
    text-align: start; padding: 30px 28px; border-radius: 20px;
    background: var(--bg-main); border: 1px solid var(--border-light);
    box-shadow: none; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--border-light); }
.feature-icon {
    width: 64px; height: 64px; border-radius: 18px; font-size: 32px;
    margin-bottom: 18px; background: var(--accent-glow); color: var(--accent);
}
.feature-card h3 { font-size: 19.5px; font-weight: 800; margin-bottom: 10px; line-height: 1.5; }
.feature-card p  { font-size: 15px; color: var(--text-muted); line-height: 1.9; }

/* ------------------------------------------------------------------- faq ---*/
/* Row 166 moved requirements below the features band, which left requirements
   and the FAQ as two untinted sections in a row — the same "where does one end"
   problem the features band was given its own tone to solve. The page alternates
   again: flow plain, features tinted, requirements plain, FAQ tinted. */
.faq.faq-band { max-width: none; }
.faq-band { background: var(--surface-2); border-block: 1px solid var(--border-light); }
/* The tint runs edge to edge like the features band; the reading width stays at
   900px, on the children rather than on the section. */
.faq.faq-band > * { max-width: 900px; margin-inline: auto; }
.faq { max-width: 900px; margin: 0 auto; padding: clamp(46px, 7vh, 90px) 5%; scroll-margin-top: 80px; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
    background: var(--card-bg); border: 1px solid var(--border-light);
    border-radius: 16px; box-shadow: var(--shadow-sm); overflow: hidden;
}
.faq-item summary {
    cursor: pointer; list-style: none; padding: 18px 22px;
    font-size: 16px; font-weight: 800; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 22px; font-weight: 700; color: var(--accent); flex: none; transition: transform .25s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 22px 20px; font-size: 15px; color: var(--text-muted); line-height: 1.95; }

/* ---------------------------------------------------------------- footer ---
   The page used to end mid-air after the last card. */
.site-footer { background: var(--pg-footer); border-top: 1px solid var(--pg-hairline); padding: 54px 5% 0; }
.footer-grid { max-width: 1280px; margin: 0 auto; display: grid; gap: 34px; grid-template-columns: minmax(240px, 1.6fr) repeat(auto-fit, minmax(160px, 1fr)); }
.footer-brand p { color: var(--text-muted); font-size: 14.5px; line-height: 1.9; margin-top: 14px; max-width: 420px; }
.footer-col h5 { font-size: 15px; font-weight: 800; margin-bottom: 14px; }
.footer-col a { display: block; color: var(--text-muted); text-decoration: none; font-size: 14.5px; padding: 5px 0; transition: color .25s ease; }
.footer-col a:hover { color: var(--accent); }
.brand-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.brand-chips span { padding: 6px 12px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--border-light); font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.footer-bottom { max-width: 1280px; margin: 40px auto 0; padding: 20px 0; border-top: 1px solid var(--border-light); text-align: center; color: var(--text-muted); font-size: 13.5px; }

/* Bigger nav type to match the rest. */
.navbar .btn-primary { padding: 12px 26px; font-size: 15px; }
.btn-icon { width: 42px; height: 42px; font-size: 15px; }

@media (max-width: 720px) {
    .trust-strip li { flex: 1 1 44%; min-width: 0; }
    .hero-buttons { flex-direction: column; align-items: stretch; }
    .btn-ghost, .btn-cta { width: 100%; }
    .footer-grid { grid-template-columns: 1fr; }
}

/* ---- the navbar on a phone ------------------------------------------------
   The bar could not fit inside 390px and could not shrink either: the brand
   name is one unbreakable run, and a flex item will not go below its content
   width unless it is told it may. So the whole document was wider than the
   screen, and because these pages are right-to-left the extra width went off
   the RIGHT edge - where the brand and the login button are. body carries
   overflow-x: hidden, which turned an ugly sideways scroll into something
   worse: the two things a first-time visitor needs, silently clipped.

   min-width: 0 lets the name give way, and it truncates rather than wrapping
   the bar to two rows. The controls keep their full size, because they are the
   touch targets. */
@media (max-width: 560px) {
    .navbar { padding-inline: 4%; gap: 10px; }
    .logo { min-width: 0; font-size: 17px; gap: 6px; }
    .logo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .logo-icon { width: 32px; height: 32px; flex: none; }
    .controls { flex: none; gap: 8px; }
    .navbar .btn-primary { padding: 10px 14px; font-size: 13px; white-space: nowrap; }
    .btn-icon { width: 38px; height: 38px; font-size: 14px; flex: none; }
}

/* --------------------------------------------------------------- tooltips ---
   The theme and language buttons used the browser's own title= bubble: a grey
   OS rectangle in a different font, in a different place, after a delay the
   page does not control — and, being an attribute, it also carried untranslated
   English on a Persian page. This is the site's own bubble, driven by data-tip,
   so the text comes from the page dictionary like every other string.
   aria-label carries the same words for screen readers. */
[data-tip] { position: relative; }
/* Centred with a PHYSICAL offset and a physical transform on purpose. Written
   as `inset-inline-start: 50%` (logical) plus `translateX(-50%)` (physical), the
   pair only centres in LTR: in RTL the logical offset becomes `right: 50%` and
   the transform then pulls the bubble a further half-width the same way, leaving
   it a full width to the side. `left` needs no direction-specific override. */
[data-tip]::after {
    content: attr(data-tip);
    position: absolute; top: calc(100% + 4px); left: 50%;
    transform: translateX(-50%) translateY(-4px);
    padding: 6px 11px; border-radius: 9px; white-space: nowrap;
    background: var(--text-main); color: var(--bg-main);
    font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.4;
    box-shadow: var(--shadow-md); pointer-events: none; z-index: 200;
    opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* ========================================================== inner pages ====
   About and Contact used to be styled here, and that is exactly why they
   stopped looking like the landing page: two sheets each held half an opinion
   about what a card is. Both pages load landing.css now, and every shape they
   need - .page-head, .page-body, .prose, .fact-card, .values, .cta-band and the
   contact channels - is defined there, once, beside the cards they match. */


/* ==================================================== depth and separation ===
   Rows 138 and 139. Every card had the same shadow, so nothing was above
   anything else and the eye had no order to follow — the page read as one flat
   sheet of blue, white and grey.

   Three levels, used for what they mean rather than for decoration:
     resting  — cards that are just content
     raised   — the ones you can act on (requirements, features)
     floating — the hero panel, which sits above the page

   And a tone change between sections, so a new block announces itself without
   needing a new colour. */
:root {
    --lift-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
    --lift-2: 0 4px 10px rgba(15, 23, 42, .07), 0 2px 4px rgba(15, 23, 42, .05);
    --lift-3: 0 18px 40px rgba(15, 23, 42, .12), 0 6px 12px rgba(15, 23, 42, .06);
}

.feature-card, .faq-item { box-shadow: var(--lift-1); }
.req-card { box-shadow: var(--lift-2); }
.hero-shot, .hero-panel, .hero img { box-shadow: var(--lift-3); }

.feature-card:hover, .req-card:hover { box-shadow: var(--lift-3); transform: translateY(-3px); }
.feature-card, .req-card { transition: box-shadow .25s ease, transform .25s ease; }

/* The alternating tone used to be done here, positionally:
       section:nth-of-type(even) { background: var(--surface-alt, rgba(...)); }
   Removed, for two reasons. --surface-alt was never defined anywhere, so the
   hardcoded slate fallback applied in BOTH themes and simply did not belong to
   the page's own background. And a positional rule does not know which sections
   it is painting: reordering them (row 166 moved the features above the
   requirements) silently repaints different ones.
   The tone now belongs to the sections that want it, by name — .features-section
   and .faq-band — so it survives reordering and follows the theme tokens. */
section { padding-block: 56px; }

/* ---- icons --------------------------------------------------------------
   Row 136 asked for bigger icon boxes, and .feature-icon / .flow-ico were sized
   up here to answer it. Both class names are gone: landing.css draws one tile,
   .ln-tile, for every card on every public page. */
.info-card i, .step-card i { font-size: 1.12em; }

/* ---- the one thing to do in a requirement card --------------------------
   Row 134: the download button was the same weight as the paragraph above it,
   although it is the only action the card offers. */
.req-card .btn-primary, .req-card a.download, .req-card .btn-download {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 44px; margin-top: 14px;
    border-radius: 12px; font-size: 14px; font-weight: 800;
    box-shadow: 0 6px 16px var(--accent-glow, rgba(0, 136, 255, .25));
}


/* ---- the closing invitation ---------------------------------------------
   Row 167. Deliberately the only band on the page with a filled button below
   the hero: two equally loud calls to action would just split the decision. */
.end-cta {
    text-align: center; padding: 64px 5%;
    background: linear-gradient(135deg, var(--accent-glow, rgba(0,136,255,.10)), transparent);
}
.end-cta h2 { font-size: 26px; font-weight: 900; margin-bottom: 10px; }
.end-cta p { color: var(--text-muted); font-size: 15px; line-height: 1.9; max-width: 520px; margin: 0 auto 22px; }
.end-cta .btn-primary { min-height: 52px; padding-inline: 34px; font-size: 15.5px; }

/* ---- one hue for ornament ------------------------------------------------
   Row 171: the feature icons came in six colours, which is a lot of meaning for
   marks that only label a card. They share the brand hue; the SHAPE already
   tells them apart.

   Row 173: green was doing three jobs — the main call to action, a validation
   tick, and step 3 of the purchase flow. It is reserved for the call to action
   here, so that when it appears the reader knows what it is asking. */
/* The !important override that used to sit here flattened the value and
   contact icons to a single accent, and its whole justification was that
   about.php and contact.php did NOT load landing.css. They do now, they draw
   .ln-tile like every other card, and a rule written against a premise that
   stopped being true is worse than no rule. */

/* Row 172: the driver download buttons each had their own colour, so a row of
   equivalent choices looked like a row of different decisions. */
.info-card .btn-primary, .info-card a.btn, .prerequisites a.btn-primary {
    background: var(--accent, #0088ff) !important; color: #fff !important;
    border-color: transparent !important;
}

/* Row 174: the manufacturer marks needed a caption. Without one, four logos in
   a row imply an endorsement nobody gave us. */
.brand-chips { position: relative; }
.brand-chips::before {
    content: attr(data-caption);
    /* flex-basis, not width:100% — the parent is a wrapping flex row with a
       gap, and a 100%-wide item there adds the gap on top of the full width and
       pushes the whole page 12px sideways on a phone. */
    flex: 1 0 100%; width: auto; margin-bottom: 8px;
    font-size: 11.5px; line-height: 1.8; color: var(--text-muted); opacity: .85;
}

/* ---- the hero on a phone -------------------------------------------------
   Rows 163 and 168: the dark console mock was the heaviest thing on the screen
   and pushed the call to action below the fold, and the little status table
   inside it was unreadable at that size anyway. On a phone the mock steps back
   and the table drops to the three lines that carry the point. */
@media (max-width: 720px) {
    .hero-shot, .hero-mock, .console-mock {
        transform: none; max-width: 92%; margin-inline: auto; opacity: .92;
    }
    .hero-shot table, .console-mock table { font-size: 11.5px; }
    .hero-shot tr:nth-child(n+4), .console-mock tr:nth-child(n+4) { display: none; }
    .hero .btn-primary { width: 100%; justify-content: center; }
}

/* ---- no hover tooltips on a touch screen --------------------------------
   The bubble is absolutely positioned, but an absolutely-positioned descendant
   still counts toward its ancestor's SCROLLABLE overflow — so on a 380px screen
   the nowrap Persian label inside the navbar's icon buttons pushed the whole
   page 12px sideways. On a touch device there is no hover to reveal it anyway,
   so below the phone breakpoint the bubble is not rendered at all; aria-label
   still carries the same words for assistive tech. */
@media (max-width: 720px), (hover: none) {
    [data-tip]::after { content: none !important; display: none !important; }
}