/* Reference-login redesign based on the supplied screenshot.
   The background Swiper is intentionally kept and remains fully functional. */

.reference-login-page {
    min-height: 100vh;
    margin: 0;
    background: #062d45;
    color: #fff;
}

.reference-hero {
    --ref-navy: #062f49;
    --ref-navy-deep: #03263d;
    --ref-blue: #0a5278;
    --ref-gold: #f1b93d;
    --ref-gold-soft: #ffd36b;
    --ref-white: #fff;
    direction: ltr;
    position: relative;
    display: grid;
    grid-template-columns: minmax(360px, 430px) minmax(0, 1fr);
    grid-template-rows: 92px minmax(0, 1fr);
    grid-template-areas:
        "header header"
        "login content";
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
    background: #052c43;
}

.reference-hero > * { min-width: 0; }

.reference-hero .hero-bg-swiper {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.reference-hero .hero-bg-swiper .swiper-slide {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center 42%;
    transform: scale(1.035);
}

.reference-hero .hero-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(4, 34, 52, .80) 0%, rgba(5, 39, 60, .72) 27%, rgba(5, 43, 66, .78) 58%, rgba(2, 35, 55, .91) 100%),
        linear-gradient(180deg, rgba(2, 31, 49, .22) 0%, rgba(2, 31, 49, .18) 66%, rgba(2, 31, 49, .90) 100%);
    backdrop-filter: saturate(108%) contrast(102%);
}

.reference-header {
    grid-area: header;
    direction: rtl;
    position: relative;
    inset: auto;
    z-index: 10;
    min-height: 92px;
    padding: 0 44px;
    background: linear-gradient(90deg, rgba(2, 35, 54, .52), rgba(4, 43, 65, .40));
    border-bottom: 2px solid rgba(241, 185, 61, .72);
    box-shadow: 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(5px);
}

.reference-header .brand { gap: 13px; }
.reference-header .brand-logo-wrap {
    width: 56px;
    height: 56px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.reference-header .brand-logo { width: 48px; height: 48px; filter: brightness(0) invert(1) drop-shadow(0 4px 8px rgba(0,0,0,.2)); }
.reference-header .brand-text h2 {
    color: #fff;
    background: none;
    -webkit-text-fill-color: #fff;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.1;
}
.reference-header .brand-text p {
    margin-top: 4px;
    color: var(--ref-gold);
    font-size: 12px;
    font-weight: 800;
}
.reference-header .header-tools { direction: rtl; gap: 15px; }
.reference-header .tool-link,
.reference-header .lang-switch {
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    opacity: .96;
}
.reference-header .tool-link i,
.reference-header .lang-switch i { color: var(--ref-gold); font-size: 20px; }
.reference-header .tool-link:hover,
.reference-header .lang-switch:hover { color: var(--ref-gold-soft); transform: none; }
.reference-header .header-separator { width: 1px; height: 22px; background: rgba(255,255,255,.42); }

.reference-login-side {
    grid-area: login;
    direction: rtl;
    position: relative;
    z-index: 6;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    padding: 50px 18px 118px 46px;
}

.reference-login-card,
.reference-login-side .login-card {
    width: min(100%, 365px);
    max-width: 365px;
    margin: 0;
    padding: 31px 28px 26px;
    overflow: hidden;
    border-radius: 35px;
    border: 1.5px solid rgba(255,255,255,.90);
    background:
        radial-gradient(circle at 9% 0%, rgba(255, 223, 142, .43) 0%, rgba(255, 243, 212, .22) 21%, transparent 43%),
        linear-gradient(145deg, rgba(255,255,255,.985), rgba(246,250,253,.97));
    box-shadow: 0 28px 70px rgba(0, 18, 32, .33), inset 0 1px 0 rgba(255,255,255,.98);
    backdrop-filter: blur(20px) saturate(145%);
    transform: none;
}

.reference-login-side .login-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(130deg, rgba(255, 224, 152, .12), transparent 42%);
}
.reference-login-side .login-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 39px;
    right: 39px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, #f3c55e, transparent);
}
.reference-login-side .login-card:hover { transform: none; box-shadow: 0 28px 70px rgba(0, 18, 32, .33), inset 0 1px 0 rgba(255,255,255,.98); }

.reference-login-side .login-logo {
    width: 78px;
    height: 78px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    border: 1px solid rgba(232, 219, 190, .95);
    background: linear-gradient(145deg, #fff, #f8fbfd);
    box-shadow: 0 9px 24px rgba(4, 37, 56, .10), 0 0 0 6px rgba(241,185,61,.08);
}
.reference-login-side .login-logo::before { display: none; }
.reference-login-side .login-logo img { width: 50px; height: 50px; filter: none; }
.reference-login-side .login-card h2 {
    margin: 0 0 23px;
    color: #062f49;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.25;
}

.reference-login-side .login-validation {
    margin: -5px 0 12px;
    color: #b42318;
    font-size: 12px;
    font-weight: 800;
}
.reference-login-side .form-group { margin-bottom: 17px; }
.reference-login-side .form-group label {
    display: block;
    margin-bottom: 8px;
    color: #13384e;
    font-size: 13px;
    font-weight: 900;
}
.reference-login-side .input-wrap { position: relative; border-radius: 14px; }
.reference-login-side .input-wrap input {
    width: 100%;
    height: 52px;
    padding: 0 49px 0 50px !important;
    border: 1px solid #d9e0e5;
    border-radius: 13px;
    outline: none;
    background: rgba(255,255,255,.88);
    color: #0f2e43;
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 3px 11px rgba(5,40,60,.035);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.reference-login-side .input-wrap input::placeholder { color: #a8b1bd; font-weight: 700; }
.reference-login-side .input-wrap input:hover { border-color: #cfd9df; box-shadow: 0 4px 14px rgba(5,40,60,.05); }
.reference-login-side .input-wrap input:focus {
    border-color: #d8aa42;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(241,185,61,.16), 0 6px 16px rgba(5,40,60,.06);
}
.reference-login-side .input-icon-box {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff5df;
    color: #074463;
    font-size: 15px;
}
.reference-login-side .toggle-password {
    position: absolute;
    right: 8px !important;
    left: auto !important;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #28526b;
    font-size: 15px;
}
.reference-login-side .toggle-password:hover { background: #eef4f7; color: #063a56; }

.login-options {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 3px 0 17px;
}
.remember-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #27485b;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.remember-option input {
    width: 18px;
    height: 18px;
    accent-color: #0a4f73;
}
.reference-login-side .submit-btn {
    width: 100%;
    height: 57px;
    margin: 0;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 15px;
    background: linear-gradient(100deg, #053550 0%, #075477 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    box-shadow: 0 12px 26px rgba(2, 45, 69, .22), inset 0 1px 0 rgba(255,255,255,.12);
    transition: transform .2s ease, box-shadow .2s ease;
}
.reference-login-side .submit-btn::before { display: none; }
.reference-login-side .submit-btn i { color: var(--ref-gold); font-size: 17px; }
.reference-login-side .submit-btn:hover {
    transform: translateY(-1px);
    background: linear-gradient(100deg, #063b59 0%, #086083 100%);
    box-shadow: 0 15px 30px rgba(2,45,69,.27);
}
.reference-login-side .submit-btn:active { transform: translateY(0); }

.forgot-divider {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
}
.forgot-divider span { height: 1px; background: #dce4e8; }
.forgot-divider a { color: #174b6a; font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.forgot-divider a:hover { color: #bd8d27; }

.reference-content-side {
    grid-area: content;
    direction: rtl;
    position: relative;
    z-index: 5;
    width: 100%;
    padding: 64px 48px 110px 22px;
    overflow: visible;
    display: flex;
    align-items: flex-start;
}
.reference-content-wrap {
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
    direction: ltr;
    display: grid;
    grid-template-columns: minmax(390px, .92fr) minmax(510px, 1.08fr);
    grid-template-areas:
        "copy devices"
        "features features";
    gap: 34px 46px;
    align-items: center;
}
.reference-hero-copy { grid-area: copy; direction: rtl; min-width: 0; padding-top: 78px; }
.reference-hero-copy .logos-row { display: flex; gap: 12px; margin: 0 0 27px; flex-wrap: wrap; }
.reference-hero-copy .badge {
    height: 43px;
    min-width: 137px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid rgba(207, 227, 238, .46);
    border-radius: 22px;
    background: rgba(11,72,103,.28);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(5px);
}
.reference-hero-copy .badge i { color: var(--ref-gold); font-size: 15px; }
.reference-hero-copy h1 {
    margin: 0 0 18px;
    max-width: 590px;
    color: #fff;
    font-size: clamp(33px, 2.35vw, 50px);
    font-weight: 900;
    line-height: 1.27;
    letter-spacing: -1px;
    text-shadow: 0 3px 16px rgba(0,0,0,.18);
}
.reference-hero-copy h1 span,
.reference-hero-copy h1 strong { display: block; }
.reference-hero-copy h1 strong { color: var(--ref-gold-soft); font-weight: 900; }
.reference-hero-copy p {
    margin: 0 0 27px;
    max-width: 570px;
    color: rgba(255,255,255,.85);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.9;
}
.reference-hero-copy .hero-actions { display: flex; gap: 17px; flex-wrap: wrap; }
.reference-hero-copy .hero-btn {
    min-width: 185px;
    height: 56px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border-radius: 17px;
    font-size: 15px;
    font-weight: 900;
    box-shadow: none;
}
.reference-hero-copy .hero-btn.primary {
    color: #173142;
    background: linear-gradient(180deg, #ffd36c, #efb33c);
    border: 1px solid #f5c35a;
    box-shadow: 0 11px 26px rgba(238, 175, 48, .22);
}
.reference-hero-copy .hero-btn.primary:hover { color: #112e40; background: linear-gradient(180deg, #ffda7c, #f4bd4d); transform: translateY(-2px); }
.reference-hero-copy .hero-btn.outline {
    color: #fff;
    background: rgba(2,35,55,.22);
    border: 1.4px solid rgba(255,255,255,.82);
}
.reference-hero-copy .hero-btn.outline i { color: var(--ref-gold); }
.reference-hero-copy .hero-btn.outline:hover { background: rgba(255,255,255,.10); border-color: #fff; transform: translateY(-2px); }

.reference-devices {
    grid-area: devices;
    direction: rtl;
    position: relative;
    width: 100%;
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
.reference-laptop {
    position: relative;
    z-index: 2;
    width: min(100%, 590px);
    margin-right: 4%;
    padding: 10px;
    border-radius: 23px 23px 8px 8px;
    border: 2px solid rgba(221,229,234,.74);
    background: #20282e;
    box-shadow: 0 31px 56px rgba(0, 12, 24, .42);
}
.reference-laptop .laptop-screen {
    min-height: 335px;
    padding: 0;
    overflow: hidden;
    border-radius: 15px 15px 4px 4px;
    background: #f8fafc;
}
.screen-topbar {
    height: 58px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
    border-bottom: 1px solid #e6ebef;
    background: #fff;
}
.screen-topbar-brand { display: flex; align-items: center; gap: 8px; }
.screen-topbar-brand img { width: 28px; height: 28px; object-fit: contain; }
.screen-topbar-brand div { display: grid; }
.screen-topbar-brand strong { color: #133a52; font-size: 10px; line-height: 1.2; }
.screen-topbar-brand small { color: #d6a133; font-size: 6px; font-weight: 800; }
.screen-topbar-tools { display: flex; gap: 9px; color: #8fa4b1; font-size: 16px; }
.screen-layout { min-height: 277px; display: grid; grid-template-columns: 118px 1fr; direction: rtl; }
.screen-menu {
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #073650;
}
.screen-menu span {
    min-height: 36px;
    padding: 0 9px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 7px;
    color: #e9f1f5;
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
}
.screen-menu span i { width: 13px; text-align: center; }
.screen-menu span.active { color: #f4c454; background: rgba(241,185,61,.12); border-right: 2px solid #f1b93d; }
.screen-main { padding: 22px 18px 16px; background: #fbfcfd; }
.screen-title { margin-bottom: 14px; color: #123a52; font-size: 12px; font-weight: 900; text-align: right; }
.reference-laptop .screen-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 9px;
}
.reference-laptop .screen-card {
    min-height: 78px;
    padding: 12px 7px;
    display: grid;
    place-items: center;
    gap: 6px;
    border: 1px solid #e1e8ec;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 3px 9px rgba(6,44,66,.025);
}
.reference-laptop .screen-card i { margin: 0; color: #e7ad38; font-size: 22px; }
.reference-laptop .screen-card:nth-child(3) i { color: #145c7c; }
.reference-laptop .screen-card:nth-child(4) i { color: #145c7c; }
.reference-laptop .screen-card span { color: #153b50; font-size: 8px; font-weight: 900; }
.screen-updates { margin-top: 17px; display: grid; gap: 7px; }
.screen-updates span { color: #294c5e; font-size: 8px; font-weight: 900; }
.screen-updates i { display: block; width: 86%; height: 7px; border-radius: 5px; background: #e4e9ec; }
.screen-updates i:last-child { width: 70%; }
.reference-devices .laptop-base {
    position: absolute;
    z-index: 1;
    left: 51%;
    bottom: 28px;
    width: min(96%, 635px);
    height: 15px;
    transform: translateX(-50%);
    border-radius: 0 0 22px 22px;
    background: linear-gradient(180deg, #b8c2c9, #7f8d96);
    box-shadow: 0 13px 22px rgba(0,0,0,.25);
}
.reference-mobile {
    position: absolute;
    z-index: 4;
    left: 1.5%;
    bottom: 23px;
    width: 146px;
    max-width: none;
    padding: 7px;
    overflow: hidden;
    border: 3px solid #20272d;
    border-radius: 28px;
    background: #111a20;
    box-shadow: 0 24px 38px rgba(0,0,0,.40);
}
.reference-mobile .mobile-notch {
    position: absolute;
    top: 7px;
    left: 50%;
    z-index: 2;
    width: 54px;
    height: 13px;
    transform: translateX(-50%);
    border-radius: 0 0 10px 10px;
    background: #111a20;
}
.reference-mobile .mobile-screen {
    min-height: 300px;
    padding: 25px 9px 8px;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    text-align: center;
}
.reference-mobile .mobile-logo { width: 30px; height: 30px; object-fit: contain; margin: 0 auto 3px; }
.reference-mobile .mobile-screen > strong { display: block; color: #113d56; font-size: 9px; }
.reference-mobile .mobile-welcome { margin-top: 18px; color: #193e53; font-size: 9px; font-weight: 900; }
.reference-mobile .mobile-screen > small { display: block; margin-top: 4px; color: #8b9aa4; font-size: 6px; }
.reference-mobile .mini-grid { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.reference-mobile .mini-grid div {
    min-height: 49px;
    padding: 6px 3px;
    display: grid;
    place-items: center;
    gap: 3px;
    border: 1px solid #e4eaee;
    border-radius: 10px;
    background: #fbfcfd;
    color: #15425b;
}
.reference-mobile .mini-grid i { color: #18597a; font-size: 13px; }
.reference-mobile .mini-grid span { font-size: 6px; font-weight: 900; line-height: 1.2; }
.reference-mobile .mobile-nav {
    margin: 14px -9px -8px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: 1px solid #e9edef;
    color: #8a9aa4;
    font-size: 8px;
}
.reference-mobile .mobile-nav i:first-child { color: #d9a432; }

.platform-features {
    grid-area: features;
    width: min(100%, 900px);
    margin: 62px auto 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    direction: rtl;
    border-radius: 10px;
}
.platform-feature {
    min-height: 82px;
    padding: 8px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    border-left: 1px solid rgba(255,255,255,.18);
}
.platform-feature:last-child { border-left: 0; }
.platform-feature > i { color: var(--ref-gold); font-size: 28px; }
.platform-feature div { display: grid; gap: 3px; }
.platform-feature strong { color: #fff; font-size: 13px; font-weight: 900; white-space: nowrap; }
.platform-feature span { color: rgba(255,255,255,.72); font-size: 10px; font-weight: 600; white-space: nowrap; }

.reference-wave {
    position: absolute;
    z-index: 2;
    left: -5%;
    right: -5%;
    bottom: -205px;
    height: 330px;
    border-top: 2px solid rgba(241,185,61,.82);
    border-radius: 52% 48% 0 0 / 35% 35% 0 0;
    background: linear-gradient(180deg, rgba(3,45,69,.87), rgba(2,34,54,.97));
    transform: rotate(1.4deg);
    pointer-events: none;
}
.reference-dots {
    position: absolute;
    z-index: 2;
    width: 150px;
    height: 130px;
    opacity: .18;
    background-image: radial-gradient(circle, #4d88a9 2px, transparent 2.5px);
    background-size: 15px 15px;
    pointer-events: none;
}
.reference-dots-top { top: 115px; right: 40px; }
.reference-dots-bottom { right: 42px; bottom: 45px; }
.hero-slogan {
    position: absolute;
    z-index: 5;
    left: 38px;
    bottom: 28px;
    direction: rtl;
    display: flex;
    align-items: center;
    gap: 15px;
    color: rgba(255,255,255,.84);
    font-size: 12px;
    font-weight: 800;
}
.hero-slogan span { width: 38px; height: 4px; border-radius: 4px; background: var(--ref-gold); }

.reference-hero .assist-tools {
    position: absolute;
    z-index: 8;
    right: 26px;
    bottom: 31px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.reference-hero .assist-btn {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
    background: rgba(2,38,58,.70);
    color: var(--ref-gold);
    font-size: 20px;
    box-shadow: 0 9px 22px rgba(0,0,0,.18);
    backdrop-filter: blur(6px);
}
.reference-hero .assist-btn:hover { background: rgba(8,70,99,.92); color: #ffd66d; transform: translateY(-1px); }

/* Medium desktop */
@media (max-width: 1500px) {
    .reference-hero { grid-template-columns: minmax(330px, 385px) minmax(0, 1fr); }
    .reference-login-side { padding-left: 30px; padding-right: 14px; }
    .reference-login-card, .reference-login-side .login-card { width: min(100%, 340px); padding: 26px 24px 23px; }
    .reference-content-side { padding-right: 32px; padding-left: 10px; }
    .reference-content-wrap { grid-template-columns: minmax(360px,.9fr) minmax(460px,1.1fr); gap: 28px 30px; }
    .reference-devices { min-height: 390px; }
    .reference-laptop { width: min(100%, 515px); }
    .reference-laptop .laptop-screen { min-height: 305px; }
    .screen-layout { min-height: 247px; }
    .reference-mobile { width: 132px; }
    .reference-mobile .mobile-screen { min-height: 270px; }
    .platform-feature { padding-inline: 13px; }
}

/* Tablet / compact laptop */
@media (max-width: 1180px) {
    .reference-hero {
        grid-template-columns: 360px minmax(0,1fr);
        grid-template-rows: 84px minmax(0,1fr);
    }
    .reference-header { min-height: 84px; padding-inline: 24px; }
    .reference-header .brand-text h2 { font-size: 21px; }
    .reference-content-side { padding: 36px 28px 110px 10px; }
    .reference-content-wrap { grid-template-columns: 1fr; grid-template-areas: "copy" "features"; gap: 26px; }
    .reference-devices { display: none; }
    .reference-hero-copy { align-self: center; padding-top: 22px; }
    .reference-hero-copy h1 { font-size: 42px; }
    .platform-features { grid-template-columns: repeat(2, 1fr); max-width: 610px; margin-inline: 0 auto; }
    .platform-feature:nth-child(2) { border-left: 0; }
    .platform-feature { justify-content: flex-start; }
}

/* Mobile */
@media (max-width: 820px) {
    .reference-hero {
        display: block;
        min-height: 100vh;
        overflow-y: auto;
        padding-top: 76px;
    }
    .reference-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        min-height: 76px;
        padding: 0 16px;
    }
    .reference-header .brand-logo-wrap { width: 43px; height: 43px; }
    .reference-header .brand-logo { width: 38px; height: 38px; }
    .reference-header .brand-text h2 { font-size: 17px; }
    .reference-header .brand-text p { font-size: 9px; }
    .reference-header .header-center { display: none; }
    .reference-header .header-tools { gap: 10px; }
    .reference-header .tool-link span { display: none; }
    .reference-header .lang-switch span { font-size: 11px; }
    .reference-header .header-separator { display: none; }

    .reference-login-side {
        width: 100%;
        padding: 30px 18px 18px;
    }
    .reference-login-card, .reference-login-side .login-card { width: min(100%, 430px); max-width: 430px; }

    .reference-content-side {
        width: 100%;
        padding: 12px 18px 120px;
    }
    .reference-content-wrap { display: block; }
    .reference-hero-copy { padding-top: 0; text-align: center; }
    .reference-hero-copy .logos-row,
    .reference-hero-copy .hero-actions { justify-content: center; }
    .reference-hero-copy h1 { max-width: 620px; margin-inline: auto; font-size: clamp(30px, 8vw, 40px); }
    .reference-hero-copy p { margin-inline: auto; font-size: 14px; }
    .reference-hero-copy .badge { min-width: auto; height: 38px; padding-inline: 12px; font-size: 11px; }
    .reference-hero-copy .hero-btn { min-width: 160px; height: 52px; }
    .platform-features { margin: 30px auto 0; grid-template-columns: 1fr 1fr; width: min(100%, 560px); }
    .platform-feature { min-height: 72px; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.12); }
    .platform-feature > i { font-size: 22px; }
    .platform-feature strong { font-size: 11px; }
    .platform-feature span { font-size: 8px; }
    .hero-slogan { display: none; }
    .reference-wave { bottom: -250px; }
    .reference-dots-top { display: none; }
}

@media (max-width: 480px) {
    .reference-login-side { padding-inline: 12px; }
    .reference-login-card, .reference-login-side .login-card { padding: 24px 18px 22px; border-radius: 28px; }
    .reference-login-side .login-logo { width: 68px; height: 68px; border-radius: 21px; }
    .reference-login-side .login-logo img { width: 43px; height: 43px; }
    .reference-login-side .login-card h2 { font-size: 23px; }
    .reference-login-side .input-wrap input { height: 50px; font-size: 12px; }
    .reference-login-side .submit-btn { height: 53px; }
    .reference-hero-copy .badge { flex: 1 1 30%; }
    .reference-hero-copy .hero-actions { flex-direction: column; }
    .reference-hero-copy .hero-btn { width: 100%; }
    .platform-features { grid-template-columns: 1fr; }
    .platform-feature { border-left: 0; justify-content: flex-start; }
    .reference-hero .assist-tools { right: 12px; bottom: 16px; }
    .reference-hero .assist-btn { width: 44px; height: 44px; }
}

/* Localization direction override: keep the existing Arabic design unchanged,
   while allowing the same login markup to read LTR when English is selected. */
html[dir="ltr"] .reference-header,
html[dir="ltr"] .reference-header .header-tools,
html[dir="ltr"] .reference-login-side,
html[dir="ltr"] .reference-content-side,
html[dir="ltr"] .reference-hero-copy,
html[dir="ltr"] .reference-devices,
html[dir="ltr"] .screen-topbar,
html[dir="ltr"] .screen-layout,
html[dir="ltr"] .platform-features,
html[dir="ltr"] .hero-slogan {
    direction: ltr;
}

html[dir="ltr"] .screen-main,
html[dir="ltr"] .screen-title {
    text-align: left;
}

/* Language-aware layout mirroring.
   Only positions/direction are mirrored; visual styling remains unchanged. */
html[dir="ltr"] .reference-hero {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
    grid-template-areas:
        "header header"
        "content login";
}

html[dir="rtl"] .reference-hero {
    grid-template-columns: minmax(360px, 430px) minmax(0, 1fr);
    grid-template-areas:
        "header header"
        "login content";
}

html[dir="ltr"] .reference-content-wrap {
    grid-template-columns: minmax(510px, 1.08fr) minmax(390px, .92fr);
    grid-template-areas:
        "devices copy"
        "features features";
}

html[dir="rtl"] .reference-content-wrap {
    grid-template-columns: minmax(390px, .92fr) minmax(510px, 1.08fr);
    grid-template-areas:
        "copy devices"
        "features features";
}

/* Mirror the existing asymmetric spacing with the section positions. */
html[dir="ltr"] .reference-login-side { padding: 50px 46px 118px 18px; }
html[dir="rtl"] .reference-login-side { padding: 50px 18px 118px 46px; }
html[dir="ltr"] .reference-content-side { padding: 64px 22px 110px 48px; }
html[dir="rtl"] .reference-content-side { padding: 64px 48px 110px 22px; }

/* Mirror controls that use fixed left/right positioning. */
html[dir="ltr"] .reference-login-side .input-icon-box {
    left: auto;
    right: 10px;
}
html[dir="ltr"] .reference-login-side .toggle-password {
    left: 8px !important;
    right: auto !important;
}
html[dir="rtl"] .reference-login-side .input-icon-box {
    left: 10px;
    right: auto;
}
html[dir="rtl"] .reference-login-side .toggle-password {
    right: 8px !important;
    left: auto !important;
}

/* Directional decorative anchors follow the selected language too. */
html[dir="ltr"] .hero-slogan { left: 38px; right: auto; }
html[dir="rtl"] .hero-slogan { right: 38px; left: auto; }

@media (max-width: 1500px) {
    html[dir="ltr"] .reference-hero {
        grid-template-columns: minmax(0, 1fr) minmax(330px, 385px);
    }
    html[dir="rtl"] .reference-hero {
        grid-template-columns: minmax(330px, 385px) minmax(0, 1fr);
    }

    html[dir="ltr"] .reference-login-side { padding-left: 14px; padding-right: 30px; }
    html[dir="rtl"] .reference-login-side { padding-left: 30px; padding-right: 14px; }
    html[dir="ltr"] .reference-content-side { padding-right: 10px; padding-left: 32px; }
    html[dir="rtl"] .reference-content-side { padding-right: 32px; padding-left: 10px; }
}

@media (max-width: 1180px) {
    html[dir="ltr"] .reference-hero {
        grid-template-columns: minmax(0, 1fr) 360px;
    }
    html[dir="rtl"] .reference-hero {
        grid-template-columns: 360px minmax(0, 1fr);
    }

    html[dir="ltr"] .reference-content-wrap,
    html[dir="rtl"] .reference-content-wrap {
        grid-template-columns: 1fr;
        grid-template-areas:
            "copy"
            "features";
    }

    html[dir="ltr"] .reference-content-side { padding: 36px 10px 110px 28px; }
    html[dir="rtl"] .reference-content-side { padding: 36px 28px 110px 10px; }
}

@media (max-width: 820px) {
    html[dir="ltr"] .reference-login-side,
    html[dir="rtl"] .reference-login-side {
        padding: 30px 18px 18px;
    }

    html[dir="ltr"] .reference-content-side,
    html[dir="rtl"] .reference-content-side {
        padding: 12px 18px 120px;
    }
}

@media (max-width: 480px) {
    html[dir="ltr"] .reference-login-side,
    html[dir="rtl"] .reference-login-side {
        padding-inline: 12px;
    }
}