:root {
    color-scheme: light;
    --ink: #10234e;
    --muted: #687995;
    --blue: #2451d2;
    --blue-deep: #102d83;
    --cyan: #72d5ee;
    --line: #e1e8f5;
    --ease: cubic-bezier(.2, .75, .25, 1);
}

* { box-sizing: border-box; }
html { min-width: 0; scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--ink);
    background:
        radial-gradient(ellipse at 73% 4%, rgba(109, 164, 255, .15), transparent 35%),
        radial-gradient(ellipse at 13% 84%, rgba(103, 213, 238, .13), transparent 32%),
        linear-gradient(135deg, #f7f9ff 0%, #eef3ff 52%, #f8fbff 100%);
    font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
a { color: inherit; }
.ambient { position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(1px); }
.ambient-one { width: 340px; height: 340px; inset: -185px auto auto 14%; background: rgba(120, 167, 255, .19); }
.ambient-two { width: 280px; height: 280px; inset: auto -160px 7% auto; background: rgba(92, 207, 230, .15); }

.page-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(350px, .78fr);
    grid-template-areas: "intro login";
    gap: clamp(38px, 7vw, 108px);
    align-items: center;
    width: min(1240px, 100%);
    min-height: 100vh;
    margin-inline: auto;
    padding: 42px clamp(24px, 5vw, 72px);
}
.intro { grid-area: intro; min-width: 0; padding-block: 8px; }
.login-column { grid-area: login; min-width: 0; perspective: 1200px; }
.brand-lockup { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.brand-mark { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(46, 88, 192, .12); border-radius: 16px; background: linear-gradient(145deg, #fff, #edf3ff); box-shadow: 7px 8px 18px rgba(33, 68, 142, .11), inset 1px 1px 0 #fff; }
.brand-mark img { width: 33px; height: 33px; object-fit: contain; }
.brand-name { color: #112b72; font-size: 16px; font-weight: 800; }
.brand-caption { padding-right: 13px; border-right: 1px solid #cbd6e9; color: #7988a2; font-size: 11px; }
.hero-copy { max-width: 650px; margin-top: clamp(22px, 4vh, 42px); }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #4463a0; font-size: 12px; font-weight: 600; }
.eyebrow i, .secure-label i { width: 7px; height: 7px; border-radius: 50%; background: #27b996; box-shadow: 0 0 0 4px rgba(39, 185, 150, .11); }
h1 { margin: 14px 0 12px; max-width: 650px; color: #10265f; font-size: clamp(28px, 3.2vw, 43px); font-weight: 800; line-height: 1.55; letter-spacing: -.7px; }
h1 em { color: #2d58c8; font-style: normal; }
.hero-copy p { max-width: 590px; margin: 0; color: #61728f; font-size: 14px; line-height: 2.1; }

/* The product illustration is drawn from lightweight CSS surfaces. */
.visual-stage { position: relative; height: clamp(230px, 28vw, 330px); margin: 6px 0 3px; perspective: 1050px; isolation: isolate; }
.visual-glow { position: absolute; z-index: -1; inset: 22% 19% 2%; border-radius: 50%; background: rgba(74, 120, 224, .2); filter: blur(40px); }
.orbit { position: absolute; z-index: -1; border: 1px solid rgba(53, 89, 176, .12); border-radius: 50%; transform: rotate(-17deg); }
.orbit-a { width: 82%; height: 56%; top: 24%; right: 8%; }
.orbit-b { width: 68%; height: 42%; top: 30%; right: 15%; transform: rotate(19deg); }
.dashboard-object { position: absolute; z-index: 2; top: 18%; right: 15%; width: min(70%, 420px); min-width: 260px; height: 65%; overflow: hidden; border: 1px solid rgba(255,255,255,.86); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(239,245,255,.92)); box-shadow: 18px 28px 55px rgba(20, 52, 127, .18), 4px 8px 20px rgba(32, 71, 154, .09), inset 0 1px 0 white; transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) rotateX(4deg) rotateY(-8deg); transition: transform .3s var(--ease), box-shadow .3s var(--ease); transform-style: preserve-3d; }
.object-topbar { display: flex; height: 32px; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid #e9eef8; color: #8491a8; font-size: 8px; }
.window-dots { display: flex; gap: 4px; direction: ltr; }
.window-dots i { width: 5px; height: 5px; border-radius: 50%; background: #d9e1ef; }
.window-dots i:first-child { background: #8da9ed; }
.topbar-mark { color: #2853c2; font-size: 10px; font-weight: 900; }
.object-content { display: flex; height: calc(100% - 32px); padding: 11px; gap: 10px; }
.object-sidebar { display: flex; flex: 0 0 20px; flex-direction: column; align-items: center; gap: 12px; padding-top: 3px; border-left: 1px solid #e9eef8; }
.object-sidebar b, .object-sidebar i { display: block; width: 9px; height: 9px; border-radius: 3px; background: #cbd7f1; }
.object-sidebar b { background: #3e68d1; box-shadow: 0 3px 7px rgba(45,83,188,.24); }
.object-main { flex: 1; min-width: 0; }
.object-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; }
.object-heading span:first-child { display: grid; gap: 4px; }
.object-heading b, .object-heading i, .chart-label { display: block; height: 4px; border-radius: 8px; background: #aebbd2; }
.object-heading b { width: 61px; background: #576e9f; }.object-heading i { width: 39px; height: 3px; }
.object-avatar { width: 17px; height: 17px; border-radius: 50%; background: linear-gradient(135deg, #b3dafa, #637fe2); }
.object-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.object-cards i { height: 29px; border: 1px solid #ebf0f9; border-radius: 6px; background: linear-gradient(145deg, #fff, #f5f8ff); box-shadow: 0 2px 4px rgba(30,61,122,.035); }
.object-chart { height: 52px; padding: 7px 8px 5px; border: 1px solid #ebf0f9; border-radius: 7px; background: rgba(255,255,255,.8); }
.chart-label { width: 39px; height: 3px; background: #d3dced; }
.chart-bars { display: flex; height: 30px; align-items: end; justify-content: space-around; gap: 5px; padding-top: 5px; }
.chart-bars i { width: 9%; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg,#93b4ff,#4774df); }
.chart-bars i:nth-child(1){height:36%}.chart-bars i:nth-child(2){height:60%}.chart-bars i:nth-child(3){height:45%}.chart-bars i:nth-child(4){height:78%}.chart-bars i:nth-child(5){height:54%}.chart-bars i:nth-child(6){height:90%}.chart-bars i:nth-child(7){height:68%}
.object-list { display: flex; flex-direction: column; gap: 5px; padding-top: 7px; }
.object-list i { display: block; width: 100%; height: 4px; border-radius: 6px; background: linear-gradient(90deg, #e0e8f7 0 76%, #eef2fa 76%); }
.floating-token, .orbit-chip { position: absolute; z-index: 3; display: flex; align-items: center; border: 1px solid rgba(255,255,255,.82); background: rgba(255,255,255,.82); box-shadow: 0 12px 28px rgba(32,68,151,.12), inset 0 1px 0 white; backdrop-filter: blur(8px); }
.floating-token { gap: 8px; padding: 9px 13px; border-radius: 12px; color: #526687; font-size: 10px; animation: drift 7s ease-in-out infinite; }
.token-search { top: 8%; right: 1%; }.token-secure { bottom: 11%; left: 3%; animation-delay: -3.1s; }
.token-glyph { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 7px; background: #edf2ff; color: #3260cf; font-size: 18px; }
.secure-dot { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; background: #e5faf4; color: #14886d; font-size: 11px; }
.orbit-chip { gap: 6px; padding: 6px 10px; border-radius: 10px; color: #41609e; font-size: 9px; font-weight: 700; }
.chip-services { top: 45%; left: 1%; transform: rotate(-7deg); }.chip-services span { color: #e3a542; }.chip-finance { top: 22%; left: 13%; transform: rotate(6deg); }.chip-finance span { color: #3eae94; }
.platform { position: absolute; z-index: 1; right: 13%; width: 74%; height: 17%; border-radius: 50%; transform: rotateX(58deg) rotateZ(-8deg); }
.platform-back { bottom: 0; background: linear-gradient(145deg, #dae5ff, #b8c9f0); box-shadow: 0 23px 30px rgba(28, 61, 137, .13); }
.platform-front { bottom: 3%; right: 18%; width: 65%; height: 13%; border: 1px solid rgba(255,255,255,.9); background: linear-gradient(145deg, #f9fbff, #dce7ff); box-shadow: 0 9px 18px rgba(28, 61, 137, .11), inset 0 1px 0 #fff; }
@keyframes drift { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }

.features { margin-top: 1px; }
.section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; color: #425679; font-size: 11px; font-weight: 700; }
.section-heading i { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, #d9e2f2); }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; perspective: 900px; }
.feature-card { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 61px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.95); border-radius: 13px; background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(245,248,255,.8)); box-shadow: 0 7px 18px rgba(39,65,120,.045), inset 0 1px 0 white; transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s; transform-style: preserve-3d; }
.feature-card:hover { border-color: #cddaf7; box-shadow: 0 12px 24px rgba(39,65,120,.09), inset 0 1px 0 white; }
.feature-icon { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(73,108,191,.1); border-radius: 11px; background: linear-gradient(145deg,#fff,#edf2ff); color: #3861c3; font-size: 17px; box-shadow: 3px 4px 8px rgba(45,76,146,.08); }
.icon-finance { color: #168b7c; background: linear-gradient(145deg,#fff,#eaf8f5); }.icon-toll { color: #c38730; background: linear-gradient(145deg,#fff,#fff6e9); }.icon-report { color: #7758bf; background: linear-gradient(145deg,#fff,#f2eeff); }
.feature-card h2, .role-note h2 { margin: 0 0 2px; color: #24395f; font-size: 11px; font-weight: 700; }
.feature-card p, .role-note p { margin: 0; color: #73819b; font-size: 9px; line-height: 1.8; }
.role-note { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.role-note article { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; border-right: 2px solid #a9bdf0; border-radius: 7px 12px 12px 7px; background: rgba(255,255,255,.42); }
.role-note article + article { border-right-color: #a6dace; }
.role-icon { display: grid; flex: 0 0 34px; height: 26px; place-items: center; border-radius: 8px; background: #e9efff; color: #3156af; font-size: 9px; font-weight: 700; }
.role-staff { background: #e7f7f3; color: #258673; }
.intro-footer { margin-top: 17px; color: #8290a8; font-size: 9px; }.intro-footer span:not(.footer-mark) { padding-inline: 4px; color: #bdc8d9; }.footer-mark { color: #4d70d2; font-size: 8px; }

.login-panel { position: relative; padding: clamp(27px, 3vw, 38px); border: 1px solid rgba(255,255,255,.95); border-radius: 25px; background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(249,251,255,.92)); box-shadow: 22px 30px 64px rgba(24, 51, 119, .14), 5px 8px 20px rgba(24, 51, 119, .06), inset 0 1px 0 #fff; transform: rotateY(2deg) translateZ(0); }
.login-panel::before { position: absolute; inset: 9px; z-index: -1; border: 1px solid rgba(219,228,246,.66); border-radius: 19px; content: ""; pointer-events: none; }
.panel-topline { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid #edf1f8; color: #57709f; font-size: 10px; font-weight: 700; }
.secure-label { display: inline-flex; align-items: center; gap: 7px; color: #8795aa; font-size: 9px; font-weight: 500; }.secure-label i { width: 6px; height: 6px; }
.panel-heading { display: flex; align-items: center; gap: 13px; margin: 24px 0 22px; }
.panel-icon { display: grid; flex: 0 0 47px; width: 47px; height: 47px; place-items: center; border: 1px solid #dfe7fb; border-radius: 15px; background: linear-gradient(145deg,#fff,#e9efff); box-shadow: 5px 7px 14px rgba(40,75,161,.1), inset 0 1px 0 white; color: #3159c1; font-size: 22px; }
.panel-heading h2 { margin: 0 0 4px; color: #152d68; font-size: 17px; font-weight: 800; }.panel-heading p { margin: 0; color: #8190a8; font-size: 11px; line-height: 1.8; }
.field { margin-bottom: 18px; }.field label { display: block; margin-bottom: 8px; color: #35496f; font-size: 12px; font-weight: 700; }
.input-shell { position: relative; display: flex; align-items: center; min-height: 50px; border: 1px solid #dfe6f2; border-radius: 12px; background: #f8faff; transition: border-color .2s, background .2s, box-shadow .2s, transform .2s; }
.input-shell:focus-within { border-color: #718fe2; background: #fff; box-shadow: 0 0 0 4px rgba(53,91,202,.1), 0 7px 16px rgba(42,71,145,.05); transform: translateY(-1px); }
.input-icon { display: grid; flex: 0 0 43px; place-items: center; color: #8396bd; font-size: 18px; }
.input-shell input { width: 100%; min-width: 0; height: 48px; padding: 0 2px 0 13px; border: 0; outline: 0; background: transparent; color: #20375f; direction: ltr; text-align: left; font-size: 12px; }
.input-shell input::placeholder { color: #a0acc0; direction: rtl; text-align: right; font-size: 11px; }.password-shell input { padding-left: 78px; }
.toggle-password { position: absolute; left: 7px; top: 50%; padding: 6px 8px; transform: translateY(-50%); border: 0; border-radius: 7px; background: transparent; color: #365dbd; cursor: pointer; font-size: 10px; }.toggle-password:hover { background: #edf2ff; }
.has-error .input-shell { border-color: #e99898; background: #fffafa; }
.caps-warning { margin-top: 7px; color: #a96815; font-size: 10px; }.caps-warning[hidden] { display: none; }
.submit-btn { position: relative; display: flex; width: 100%; min-height: 51px; align-items: center; justify-content: center; gap: 9px; margin-top: 7px; border: 1px solid rgba(255,255,255,.25); border-radius: 13px; background: linear-gradient(120deg, #163a9e, #315ed3 58%, #4773df); box-shadow: 0 9px 18px rgba(35,75,180,.2), inset 0 1px 0 rgba(255,255,255,.22); color: white; cursor: pointer; font-size: 13px; font-weight: 700; transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s; }
.submit-btn:hover { transform: translateY(-2px); filter: saturate(1.08); box-shadow: 0 13px 24px rgba(35,75,180,.26), inset 0 1px 0 rgba(255,255,255,.24); }.submit-btn:active { transform: translateY(0); }.submit-btn:disabled { cursor: wait; opacity: .82; transform: none; }
.button-arrow { position: absolute; left: 17px; font-size: 17px; }.spinner { display: none; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.42); border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite; }.loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.signup-cta { position: relative; display: flex; min-height: 48px; align-items: center; justify-content: center; gap: 9px; margin-top: 11px; padding: 9px 42px; border: 1px solid #cbd8f5; border-radius: 12px; background: linear-gradient(135deg, #f9fbff, #edf3ff); box-shadow: 0 5px 12px rgba(37,72,154,.07), inset 0 1px 0 white; color: #254ba9; font-size: 12px; font-weight: 800; text-align: center; text-decoration: none; transition: transform .2s var(--ease), border-color .2s, box-shadow .2s, background .2s; }
.signup-cta:hover { transform: translateY(-1px); border-color: #9db4ed; background: linear-gradient(135deg, #fff, #e8efff); box-shadow: 0 9px 18px rgba(37,72,154,.12), inset 0 1px 0 white; color: #17398e; }
.signup-icon { display: grid; position: absolute; right: 12px; width: 24px; height: 24px; place-items: center; border-radius: 8px; background: #e0eaff; color: #315ac4; font-size: 18px; line-height: 1; }
.signup-arrow { position: absolute; left: 14px; color: #6e88c8; font-size: 15px; }
.panel-links { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 17px; color: #7e8ca5; font-size: 10px; }.panel-links a { color: #3159b9; font-weight: 700; text-decoration: none; }.panel-links a:hover { color: #173a98; text-decoration: underline; }.panel-links span { font-size: 9px; }
.panel-footnote { display: flex; align-items: center; gap: 7px; margin-top: 24px; padding-top: 15px; border-top: 1px solid #edf1f7; color: #97a3b5; font-size: 9px; }.footnote-lock { color: #6d87c6; font-size: 14px; }
.alert { margin: 0 0 15px; padding: 10px 12px; border: 1px solid #c8efdf; border-radius: 10px; background: #effbf6; color: #187557; font-size: 11px; line-height: 1.9; }.alert.error, .alert.danger { border-color: #f3d0d0; background: #fff5f5; color: #ad4545; }
:focus-visible { outline: 3px solid rgba(49,91,210,.42); outline-offset: 3px; }

@media (max-width: 980px) {
    .page-shell { grid-template-columns: minmax(0, 1fr) minmax(330px, .78fr); gap: 30px; padding-inline: 28px; }
    .visual-stage { height: 235px; }.dashboard-object { right: 12%; width: 76%; }.role-note p { font-size: 8px; }
}
@media (max-width: 760px) {
    .page-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "login" "intro"; gap: 25px; width: min(520px, 100%); padding: 24px 20px 30px; }
    .login-panel { padding: 25px 23px 22px; border-radius: 21px; transform: none; }
    .panel-heading { margin: 18px 0; }.panel-footnote { margin-top: 18px; }
    .intro { padding: 8px 2px; }.brand-lockup { min-height: 45px; }.brand-mark { width: 40px; height: 40px; border-radius: 13px; }.brand-mark img { width: 28px; height: 28px; }
    .hero-copy { margin-top: 20px; }h1 { margin-top: 10px; font-size: clamp(26px, 7vw, 35px); line-height: 1.55; }.hero-copy p { font-size: 12px; }
    .visual-stage { height: 220px; margin-top: 10px; }.dashboard-object { top: 18%; right: 12%; width: 76%; min-width: 0; height: 67%; }
    .feature-card { min-height: 59px; }.role-note { grid-template-columns: 1fr; }.role-note p { font-size: 9px; }
}
@media (max-width: 390px) {
    .page-shell { padding-inline: 14px; }.login-panel { padding-inline: 18px; }.panel-links { align-items: flex-start; flex-direction: column; }
    .brand-caption { font-size: 9px; }.feature-grid { gap: 7px; }.feature-card { gap: 7px; padding-inline: 8px; }.feature-icon { flex-basis: 30px; width: 30px; height: 30px; }.feature-card h2 { font-size: 10px; }.feature-card p { font-size: 8px; }
    .visual-stage { height: 190px; }
}
@media (hover: none), (max-width: 760px) {
    .dashboard-object, .feature-card { transform: none; }
    .floating-token, .orbit-chip { backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}