@charset "UTF-8";

.site-header{
    height:92px;
    padding:11px 0;
    background:
        radial-gradient(circle at 72% -70%,rgba(52,211,194,.17),transparent 36%),
        linear-gradient(180deg,rgba(4,17,29,.98),rgba(6,22,36,.96));
    border-bottom:0;
    box-shadow:0 12px 36px rgba(0,8,17,.18);
    backdrop-filter:blur(24px);
    isolation:isolate;
}

.site-header::before,
.site-header::after{
    content:"";
    position:absolute;
    pointer-events:none;
}

.site-header::before{
    inset:0;
    z-index:-1;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.025),transparent);
}

.site-header::after{
    right:8%;
    bottom:0;
    left:8%;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(72,222,207,.42),transparent);
}

.nav-shell{
    width:calc(100% - 32px);
    height:70px;
    padding:0 22px;
    gap:24px;
    position:relative;
    z-index:2;
    border:1px solid rgba(152,215,219,.12);
    border-radius:21px;
    background:linear-gradient(115deg,rgba(11,39,57,.86),rgba(5,21,34,.72));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 14px 32px rgba(0,8,16,.2);
}

.brand{
    gap:12px;
    min-width:205px;
    padding:4px;
    border-radius:15px;
    color:#fff;
}

.brand>span:last-child{
    line-height:1.12;
}

.brand strong{
    font-size:1.35rem;
    font-weight:900;
    letter-spacing:-.035em;
}

.brand small{
    margin-top:6px;
    color:#8fa7b6;
    font-size:.61rem;
    font-weight:700;
    letter-spacing:.01em;
}

.brand-mark{
    width:48px;
    height:48px;
    display:block;
    flex:0 0 48px;
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.16);
    border-radius:14px;
    background:#000;
    box-shadow:
        0 10px 22px rgba(0,0,0,.3),
        inset 0 0 0 1px rgba(80,224,209,.05);
    transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}

.brand-mark::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(145deg,rgba(255,255,255,.08),transparent 34%);
    pointer-events:none;
}

.brand-mark img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.brand:hover .brand-mark{
    transform:translateY(-2px);
    border-color:rgba(100,231,217,.42);
    box-shadow:0 13px 26px rgba(0,0,0,.34),0 0 0 3px rgba(55,211,194,.06);
}

.desktop-nav{
    height:48px;
    gap:3px;
    justify-content:center;
    padding-inline:18px;
}

.desktop-nav>a,
.nav-drop>button{
    min-height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 11px;
    position:relative;
    border-radius:12px;
    color:#b9c8d1;
    font-size:.84rem;
    font-weight:750;
    transition:color .2s ease,background-color .2s ease,transform .2s ease;
}

.desktop-nav>a:hover,
.desktop-nav>a.is-active,
.nav-drop>button:hover,
.nav-drop.is-active>button{
    color:#fff;
    background:rgba(255,255,255,.065);
}

.desktop-nav>a:focus-visible,
.nav-drop>button:focus-visible,
.nav-cta:focus-visible,
.menu-toggle:focus-visible{
    outline:2px solid var(--teal2);
    outline-offset:3px;
}

.desktop-nav>a.is-active::after,
.nav-drop.is-active>button::after{
    content:"";
    position:absolute;
    right:50%;
    bottom:3px;
    width:18px;
    height:2px;
    border-radius:99px;
    background:var(--teal2);
    transform:translateX(50%);
    box-shadow:0 0 11px rgba(65,219,203,.65);
}

.nav-drop{
    height:48px;
}

.nav-drop>button span{
    margin-right:5px;
    color:#5ee3d4;
    font-size:.75rem;
    transition:transform .2s ease;
}

.nav-drop:hover>button span,
.nav-drop:focus-within>button span{
    transform:rotate(180deg);
}

.drop-panel{
    top:calc(100% + 9px);
    border-color:rgba(10,44,60,.12);
    box-shadow:0 24px 65px rgba(0,18,30,.22);
}

.nav-cta{
    min-height:48px;
    padding:0 17px;
    gap:9px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:15px;
    background:linear-gradient(135deg,#59e0d2,#2bc5b5);
    color:#032821;
    box-shadow:0 10px 25px rgba(30,193,176,.18),inset 0 1px 0 rgba(255,255,255,.34);
    transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}

.nav-cta:hover{
    color:#021f1b;
    transform:translateY(-2px);
    filter:saturate(1.06);
    box-shadow:0 14px 30px rgba(30,193,176,.28),inset 0 1px 0 rgba(255,255,255,.42);
}

.nav-cta svg{
    width:17px;
    height:17px;
}

.lang-switch{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    flex:0 0 42px;
    border:1px solid rgba(132,211,215,.2);
    border-radius:12px;
    color:#b9d1d8;
    background:rgba(255,255,255,.04);
    font:900 .68rem/1 var(--font);
    letter-spacing:.08em;
}

.lang-switch:hover{
    color:#fff;
    border-color:rgba(89,224,210,.42);
    background:rgba(55,211,194,.1);
}

.menu-toggle{
    width:48px;
    height:48px;
    border-radius:15px;
    border-color:rgba(142,204,211,.2);
    background:rgba(255,255,255,.045);
    transition:background-color .2s ease,border-color .2s ease;
}

.menu-toggle:hover,
.menu-toggle[aria-expanded="true"]{
    background:rgba(55,211,194,.12);
    border-color:rgba(78,226,211,.36);
}

.floating-lease{
    right:22px;
    left:auto;
}

/* الصفحة الرئيسية تستخدم عرض الشاشة بدل حاوية 1180px الضيقة */
.hero-premium>.hero-grid.container,
.hero-premium .hero-market-rail-inner.container,
.scope-strip>.scope-grid.container{
    width:calc(100% - clamp(32px,4vw,96px));
}

.hero-premium .hero-grid{
    gap:clamp(42px,4vw,82px);
}

.hero-premium .hero-copy h1{
    max-width:850px;
}

.hero-premium .hero-copy>p{
    max-width:800px;
}

.hero-command{
    min-height:640px;
    display:grid;
    grid-template-rows:minmax(470px,1fr) auto;
}

.hero-command::before,
.hero-command::after{
    content:none;
}

.hero-command-stage{
    min-height:470px;
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.hero-command-stage::before,
.hero-command-stage::after{
    content:"";
    position:absolute;
    pointer-events:none;
}

.hero-command-stage::before{
    inset:0;
    z-index:1;
    background:
        linear-gradient(180deg,rgba(4,18,29,.18),rgba(4,18,29,.1) 56%,rgba(4,18,29,.58)),
        linear-gradient(90deg,rgba(5,20,31,.08),rgba(5,20,31,.32));
}

.hero-command-stage::after{
    inset:14px;
    z-index:2;
    border:1px solid rgba(255,255,255,.09);
    border-radius:26px;
}

.hero-command-panel{
    width:auto;
    position:relative;
    right:auto;
    bottom:auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
        "kicker route"
        "title link";
    align-items:center;
    gap:5px 24px;
    padding:20px 24px 22px;
    border:0;
    border-top:1px solid rgba(116,230,216,.18);
    border-radius:0;
    background:linear-gradient(135deg,#092234,#071b2a);
    box-shadow:none;
    backdrop-filter:none;
}

.hero-command-panel .command-kicker{
    grid-area:kicker;
}

.hero-command-panel h2{
    grid-area:title;
    max-width:480px;
    margin:5px 0 0;
    font-size:1.08rem;
}

.hero-command-panel .hero-route-mini{
    grid-area:route;
    min-width:260px;
}

.hero-command-panel>a{
    grid-area:link;
    justify-self:start;
    margin-top:6px;
    white-space:nowrap;
}

@media(max-width:1240px){
    .nav-shell{
        width:calc(100% - 24px);
        padding-inline:14px;
        gap:12px;
    }

    .brand{
        min-width:185px;
    }

    .desktop-nav>a,
    .nav-drop>button{
        padding-inline:9px;
        font-size:.8rem;
    }

    .desktop-nav{
        padding-inline:4px;
    }

    .nav-cta{
        padding-inline:13px;
        font-size:.75rem;
    }
}

@media(max-width:1100px){
    .site-header{
        height:84px;
        padding:7px 0;
    }

    .nav-shell{
        width:calc(100% - 24px);
        height:70px;
    }

    .brand{
        min-width:0;
    }

    .mobile-panel{
        inset:84px 12px auto;
        max-height:calc(100vh - 96px);
        padding:14px 16px 18px;
        border:1px solid rgba(129,202,209,.15);
        border-radius:0 0 19px 19px;
        background:rgba(5,22,36,.98);
        box-shadow:0 22px 48px rgba(0,8,16,.34);
        backdrop-filter:blur(22px);
    }

    .mobile-panel nav a{
        padding:13px 12px;
        border-radius:10px;
        color:#c9d6dd;
    }

    .mobile-panel nav a:hover{
        color:#fff;
        background:rgba(255,255,255,.05);
    }

    .hero-premium>.hero-grid.container,
    .hero-premium .hero-market-rail-inner.container,
    .scope-strip>.scope-grid.container{
        width:calc(100% - 32px);
    }

    .hero-command{
        min-height:620px;
        grid-template-rows:minmax(450px,1fr) auto;
    }

    .hero-command-stage{
        min-height:450px;
    }

    .hero-command-panel{
        grid-template-columns:1fr;
        grid-template-areas:"kicker" "title" "route" "link";
        gap:7px;
    }

    .hero-command-panel .hero-route-mini{
        width:min(100%,330px);
        margin-top:7px;
    }
}

@media(max-width:640px){
    .site-header{
        height:74px;
        padding:6px 0;
    }

    .nav-shell{
        width:calc(100% - 16px);
        height:62px;
        padding:0 9px;
        gap:8px;
        border-radius:17px;
    }

    .brand{
        gap:8px;
        padding:2px;
    }

    .brand-mark{
        width:44px;
        height:44px;
        flex-basis:44px;
        border-radius:12px;
    }

    .brand strong{
        font-size:1.18rem;
    }

    .nav-cta{
        min-height:42px;
        padding-inline:12px;
        border-radius:12px;
    }

    .menu-toggle{
        width:42px;
        height:42px;
        border-radius:12px;
    }

    .mobile-panel{
        inset:74px 8px auto;
        max-height:calc(100vh - 82px);
        border-radius:0 0 17px 17px;
    }

    .hero-premium>.hero-grid.container,
    .hero-premium .hero-market-rail-inner.container,
    .scope-strip>.scope-grid.container{
        width:calc(100% - 24px);
    }

    .hero-command{
        min-height:auto;
        grid-template-rows:420px auto;
    }

    .hero-command-stage{
        min-height:420px;
    }

    .hero-command-stage::after{
        inset:10px;
        border-radius:18px;
    }

    .hero-command-panel{
        padding:18px;
    }

    .hero-command-panel h2{
        font-size:1rem;
    }

    .floating-lease{
        right:14px;
        left:auto;
        width:max-content;
        max-width:calc(100% - 28px);
    }
}