:root {
    --landing-dark: #0d1f33;
    --landing-dark-2: #123451;
    --landing-navy: #173f68;
    --landing-primary: #2877d9;
    --landing-primary-light: #5a9be8;
    --landing-accent: #f28a27;
    --landing-success: #1baa80;
    --landing-text: #17263a;
    --landing-muted: #6f7f93;
    --landing-border: #e1e8f0;
    --landing-surface: #ffffff;
    --landing-background: #f5f8fc;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.landing-body {
    min-height: 100vh;
    margin: 0;
    color: var(--landing-text);
    background: var(--landing-background);
    font-family: var(--guardlink-ui-font, Tahoma, Arial, sans-serif);
    -webkit-font-smoothing: antialiased;
}

.landing-page {
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 7% 8%, rgba(40, 119, 217, .10), transparent 25%),
        radial-gradient(circle at 94% 20%, rgba(242, 138, 39, .09), transparent 23%),
        linear-gradient(180deg, #ffffff 0%, #f7f9fc 56%, #f2f5f9 100%);
}

.landing-header {
    position: relative;
    z-index: 30;
    padding: 18px 0;
    background: rgba(255, 255, 255, .74);
    border-bottom: 1px solid rgba(225, 232, 240, .72);
    backdrop-filter: blur(16px);
}

.landing-nav,
.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.landing-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--landing-dark);
    text-decoration: none;
}
.landing-brand:hover { color: var(--landing-dark); }
.landing-logo { display: block; width: 48px; height: 48px; object-fit: contain; }
.brand-text-wrap { display: flex; flex-direction: column; line-height: 1.12; }
.brand-text-wrap strong { direction: ltr; font-size: 18px; font-weight: 900; letter-spacing: -.025em; }
.brand-text-wrap small { margin-top: 5px; color: var(--landing-accent); font-size: 10px; font-weight: 900; direction: ltr; text-align: right; }

.landing-nav-links { display: flex; align-items: center; gap: 7px; }
.landing-nav-links > a {
    padding: 9px 12px;
    color: #506075;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}
.landing-nav-links > a:hover { color: var(--landing-dark); background: #eef3f8; transform: translateY(-1px); }
.landing-nav-links .nav-login { color: #fff; background: var(--landing-dark); padding-inline: 15px; }
.landing-nav-links .nav-login:hover { color: #fff; background: #183b60; }

.landing-hero { position: relative; padding: 76px 0 94px; }
.command-hero::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    left: -280px;
    bottom: -310px;
    border: 1px solid rgba(13, 31, 51, .06);
    border-radius: 50%;
    box-shadow: 0 0 0 55px rgba(13, 31, 51, .015), 0 0 0 110px rgba(13, 31, 51, .01);
    pointer-events: none;
}

.hero-content { position: relative; z-index: 4; max-width: 690px; }
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 8px 13px;
    color: #0d6e54;
    background: rgba(27, 170, 128, .08);
    border: 1px solid rgba(27, 170, 128, .14);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}
.hero-badge i { color: var(--landing-success); }
.command-wordmark { margin-bottom: 8px; color: #8c98a8; font-size: 15px; font-weight: 900; letter-spacing: -.02em; }
.command-wordmark span { color: var(--landing-accent); }
.hero-content h1 {
    margin: 0 0 22px;
    color: var(--landing-dark);
    font-size: clamp(38px, 5vw, 61px);
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: -.04em;
}
.hero-content h1 span { display: block; color: var(--landing-primary); }
.hero-content > p { margin: 0; color: var(--landing-muted); font-size: clamp(14px, 1.65vw, 17px); line-height: 2.05; }

.hero-actions,
.cta-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 31px; }
.hero-actions .btn,
.cta-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding-inline: 22px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 900;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.hero-actions .btn-primary,
.cta-actions .btn-primary {
    background: linear-gradient(135deg, var(--landing-primary), #4b92e5);
    border: 0;
    box-shadow: 0 15px 32px rgba(40, 119, 217, .22);
}
.hero-actions .btn-primary:hover,
.cta-actions .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(40, 119, 217, .28); }
.hero-actions .btn-outline-secondary { color: #46586d; background: #fff; border-color: #dce5ef; }
.hero-actions .btn-outline-secondary:hover { color: var(--landing-dark); background: #f7f9fb; border-color: #ccd8e4; }
.hero-points { display: flex; flex-wrap: wrap; gap: 14px 20px; margin-top: 26px; color: #55677b; font-size: 12px; }
.hero-points span { display: inline-flex; align-items: center; gap: 7px; }
.hero-points i { color: var(--landing-success); }

.command-dashboard-visual {
    position: relative;
    min-height: 500px;
    padding: 25px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 12% 8%, rgba(83, 151, 234, .24), transparent 27%),
        radial-gradient(circle at 90% 92%, rgba(242, 138, 39, .16), transparent 26%),
        linear-gradient(145deg, #0b2036, #143f67 68%, #18517f);
    border-radius: 31px;
    box-shadow: 0 32px 75px rgba(13, 31, 51, .21);
}
.command-dashboard-visual::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -145px;
    bottom: -135px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    box-shadow: 0 0 0 35px rgba(255,255,255,.025), 0 0 0 70px rgba(255,255,255,.015);
}
.command-visual-head { position: relative; z-index: 2; display: flex; align-items: center; gap: 11px; }
.visual-brand-dot { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 42px; color: #fff; background: linear-gradient(145deg, var(--landing-accent), #f6aa5b); border-radius: 13px; box-shadow: 0 11px 25px rgba(242,138,39,.22); }
.command-visual-head > div:nth-child(2) strong,
.command-visual-head > div:nth-child(2) span { display: block; }
.command-visual-head > div:nth-child(2) strong { font-size: 11px; font-weight: 900; direction: ltr; }
.command-visual-head > div:nth-child(2) span { margin-top: 3px; color: rgba(255,255,255,.54); font-size: 9px; direction: ltr; }
.visual-online { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; padding: 7px 9px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); border-radius: 999px; font-size: 8px; direction: ltr; }
.visual-online i { width: 6px; height: 6px; background: #55d7ad; border-radius: 50%; box-shadow: 0 0 0 4px rgba(85,215,173,.12); }

.visual-system-card { position: relative; z-index: 2; margin-top: 29px; padding: 20px; background: rgba(255,255,255,.085); border: 1px solid rgba(255,255,255,.09); border-radius: 20px; backdrop-filter: blur(14px); }
.system-card-title { display: flex; align-items: center; gap: 11px; }
.system-icon { width: 42px; height: 42px; display: grid; place-items: center; color: #8ec4ff; background: rgba(40,119,217,.18); border: 1px solid rgba(99,166,242,.18); border-radius: 12px; }
.system-card-title strong,
.system-card-title small { display: block; }
.system-card-title strong { font-size: 11px; }
.system-card-title small { margin-top: 3px; color: rgba(255,255,255,.49); font-size: 8px; }
.armed-badge { margin-right: auto; padding: 6px 8px; color: #72ddb7; background: rgba(27,170,128,.11); border: 1px solid rgba(87,216,174,.14); border-radius: 999px; font-size: 7px; font-weight: 900; direction: ltr; }
.control-buttons { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-top: 18px; }
.control-buttons span { min-height: 75px; display: grid; place-items: center; align-content: center; gap: 7px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; }
.control-buttons i { color: #9ac9ff; font-size: 17px; }
.control-buttons small { font-size: 8px; }

.voice-command-card { position: relative; z-index: 2; display: flex; align-items: center; gap: 11px; margin-top: 12px; padding: 14px; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; }
.voice-icon { width: 39px; height: 39px; display: grid; place-items: center; flex: 0 0 39px; color: #fff; background: linear-gradient(145deg, var(--landing-accent), #f5a95a); border-radius: 12px; }
.voice-command-card small,
.voice-command-card strong { display: block; }
.voice-command-card small { margin-bottom: 3px; color: rgba(255,255,255,.45); font-size: 7px; }
.voice-command-card strong { font-size: 9px; font-weight: 800; }
.voice-wave { display: flex; align-items: center; gap: 3px; margin-right: auto; height: 25px; }
.voice-wave i { width: 3px; background: #f4a158; border-radius: 999px; }
.voice-wave i:nth-child(1) { height: 9px; }.voice-wave i:nth-child(2) { height: 19px; }.voice-wave i:nth-child(3) { height: 13px; }.voice-wave i:nth-child(4) { height: 22px; }
.visual-stats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.visual-stats span { padding: 11px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; }
.visual-stats strong,
.visual-stats small { display: block; direction: ltr; text-align: right; }
.visual-stats strong { font-size: 10px; }.visual-stats small { margin-top: 2px; color: rgba(255,255,255,.42); font-size: 7px; }

.command-features { padding: 92px 0 102px; background: rgba(255,255,255,.78); border-top: 1px solid rgba(225,232,240,.75); border-bottom: 1px solid rgba(225,232,240,.75); }
.section-heading { max-width: 760px; margin: 0 auto 43px; text-align: center; }
.section-kicker { display: inline-block; margin-bottom: 10px; color: var(--landing-primary); font-size: 11px; font-weight: 900; }
.section-heading h2,
.workflow-copy h2,
.command-final-cta h2 { margin: 0 0 13px; color: var(--landing-dark); font-size: clamp(28px, 4vw, 40px); font-weight: 900; line-height: 1.48; letter-spacing: -.025em; }
.section-heading p,
.workflow-copy > p { margin: 0; color: var(--landing-muted); font-size: 14px; line-height: 2; }
.command-feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.command-feature-grid article { min-height: 230px; padding: 24px; background: #fff; border: 1px solid var(--landing-border); border-radius: 21px; box-shadow: 0 16px 42px rgba(20,44,76,.055); }
.command-feature-grid article > span { width: 47px; height: 47px; display: grid; place-items: center; margin-bottom: 16px; color: var(--landing-primary); background: #eff6ff; border: 1px solid #dcecff; border-radius: 14px; font-size: 18px; }
.command-feature-grid h3 { margin: 0 0 9px; color: #253c55; font-size: 14px; font-weight: 900; }
.command-feature-grid p { margin: 0; color: var(--landing-muted); font-size: 11px; line-height: 2; }

.command-workflow { padding: 96px 0; }
.workflow-shell { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; padding: 45px; color: #fff; background: linear-gradient(135deg, #0b2036, #15466f); border-radius: 31px; box-shadow: 0 29px 70px rgba(13,31,51,.18); }
.section-kicker-light { color: #8ec5ff; }
.workflow-copy h2 { color: #fff; }
.workflow-copy > p { color: rgba(255,255,255,.65); }
.workflow-steps { display: grid; gap: 10px; }
.workflow-steps article { display: flex; gap: 13px; padding: 14px; background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.08); border-radius: 15px; }
.workflow-steps article > span { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 38px; color: #ffbd7b; background: rgba(242,138,39,.11); border: 1px solid rgba(242,138,39,.16); border-radius: 11px; font-size: 9px; font-weight: 900; direction: ltr; }
.workflow-steps h3 { margin: 0 0 4px; color: #fff; font-size: 11px; font-weight: 900; }
.workflow-steps p { margin: 0; color: rgba(255,255,255,.53); font-size: 9px; line-height: 1.8; }

.command-users { padding: 0 0 96px; }
.user-types-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; }
.user-types-grid article { display: flex; gap: 15px; padding: 25px; background: #fff; border: 1px solid var(--landing-border); border-radius: 22px; box-shadow: 0 16px 40px rgba(20,44,76,.055); }
.user-type-icon { width: 51px; height: 51px; display: grid; place-items: center; flex: 0 0 51px; color: #fff; background: linear-gradient(145deg, var(--landing-dark-2), #2a628f); border-radius: 15px; }
.user-types-grid h3 { margin: 1px 0 7px; color: #263e57; font-size: 14px; font-weight: 900; }
.user-types-grid p { margin: 0; color: var(--landing-muted); font-size: 11px; line-height: 1.95; }

.command-final-cta { display: flex; align-items: center; justify-content: space-between; gap: 34px; margin-top: 26px; padding: 31px; background: #fff; border: 1px solid var(--landing-border); border-radius: 23px; box-shadow: 0 18px 48px rgba(20,44,76,.065); }
.command-final-cta small { color: var(--landing-accent); font-size: 9px; font-weight: 900; direction: ltr; }
.command-final-cta h2 { margin-top: 5px; margin-bottom: 8px; font-size: clamp(22px,3vw,31px); }
.command-final-cta p { margin: 0; color: var(--landing-muted); font-size: 11px; }
.command-final-cta .cta-actions { margin-top: 0; flex: 0 0 auto; }
.command-final-cta .btn-light { color: #4b5d71; background: #f4f7fa; border: 1px solid #e1e8ef; }

.landing-footer { padding: 27px 0 33px; background: #fff; border-top: 1px solid var(--landing-border); }
.footer-brand-content { display: flex; align-items: center; gap: 18px; }
.landing-brand-footer .landing-logo { width: 42px; height: 42px; }
.footer-copy p { margin: 0 0 3px; color: #647487; font-size: 10px; }
.footer-copy small { color: #9aa6b3; font-size: 9px; direction: ltr; }
.footer-trust-seals { display: flex; align-items: center; gap: 10px; }
.trust-seal-card { display: grid; place-items: center; min-width: 91px; min-height: 91px; padding: 7px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 8px 22px rgba(20,44,76,.05); overflow: hidden; }
.trust-seal-card img { display: block; max-width: 76px; max-height: 76px; object-fit: contain; }
#zarinpal { min-height: 74px; display: grid; place-items: center; }

@media (max-width: 991.98px) {
    .landing-hero { padding-top: 58px; }
    .command-dashboard-visual { max-width: 700px; margin: 0 auto; }
    .command-feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .workflow-shell { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 767.98px) {
    .landing-header { padding: 13px 0; }
    .landing-nav-links > a:not(.nav-login) { display: none; }
    .landing-nav-links .nav-login { padding: 8px 11px; font-size: 10px; }
    .landing-logo { width: 42px; height: 42px; }
    .brand-text-wrap strong { font-size: 16px; }
    .landing-hero { padding: 48px 0 66px; }
    .hero-content h1 { font-size: clamp(32px, 10vw, 45px); }
    .command-dashboard-visual { min-height: 450px; padding: 20px; border-radius: 24px; }
    .command-features { padding: 70px 0 76px; }
    .command-feature-grid { grid-template-columns: 1fr; }
    .command-feature-grid article { min-height: auto; }
    .workflow-shell { padding: 27px 21px; border-radius: 24px; }
    .user-types-grid { grid-template-columns: 1fr; }
    .command-final-cta { align-items: flex-start; flex-direction: column; padding: 24px; }
    .command-final-cta .cta-actions { width: 100%; }
    .command-final-cta .cta-actions .btn { flex: 1 1 160px; }
    .footer-inner { align-items: flex-start; flex-direction: column; }
    .footer-trust-seals { width: 100%; }
}

@media (max-width: 480px) {
    .container { --bs-gutter-x: 1.35rem; }
    .landing-nav { gap: 10px; }
    .hero-actions,
    .hero-actions .btn { width: 100%; }
    .control-buttons { gap: 6px; }
    .control-buttons span { min-height: 67px; }
    .visual-stats { grid-template-columns: 1fr; }
    .visual-stats span { display: flex; align-items: center; justify-content: space-between; }
    .command-dashboard-visual { min-height: 500px; }
    .voice-wave { display: none; }
    .footer-brand-content { align-items: flex-start; flex-direction: column; gap: 10px; }
    .footer-trust-seals { flex-wrap: wrap; }
}
