/* =========================================================

   BTAA TARJAMA — PREMIUM WEBSITE SYSTEM

   Main stylesheet

   Compatible with:

   index.php

   header.php

   footer.php

   main.js

========================================================= */





/* =========================================================

   01 — DESIGN TOKENS

========================================================= */



:root{

    --navy:#080d17;

    --navy-2:#0d1522;

    --navy-3:#152238;

    --navy-4:#1b2b43;



    --paper:#f5f2eb;

    --paper-2:#faf8f3;

    --white:#ffffff;



    --gold:#e5a93c;

    --gold-2:#f5cb73;

    --gold-3:#b9862e;



    --cyan:#65d9e6;



    --ink:#101722;

    --ink-2:#26313d;

    --muted:#697481;

    --muted-2:#8994a0;



    --line:#dce1e6;

    --line-dark:rgba(16,23,34,.09);



    --radius-sm:12px;

    --radius-md:18px;

    --radius-lg:24px;

    --radius-xl:32px;



    --shadow-sm:

        0 12px 30px rgba(8,13,23,.06);



    --shadow:

        0 26px 78px rgba(8,13,23,.13);



    --shadow-dark:

        0 30px 80px rgba(0,0,0,.28);



    --max:1180px;



    --transition:

        .28s cubic-bezier(.2,.75,.2,1);

}





/* =========================================================

   02 — RESET / RESPONSIVE FOUNDATION

========================================================= */



*,

*::before,

*::after{

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

    overflow-x:hidden;

}



body{

    margin:0;

    min-height:100vh;



    font-family:

        "IBM Plex Sans Arabic",

        "Readex Pro",

        "Tajawal",

        "Cairo",

        Arial,

        sans-serif;



    background:var(--paper);

    color:var(--ink);



    overflow-x:hidden;



    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}



body.menu-open{

    overflow:hidden;

}





/* ---------- Media ---------- */



img{

    display:block;

    max-width:100%;

    height:auto;

}



svg{

    display:block;

    max-width:100%;

}



video,

iframe{

    display:block;

    max-width:100%;

}





/* ---------- Links ---------- */



a{

    color:inherit;

    text-decoration:none;

}





/* ---------- Form controls ---------- */



button,

input,

textarea,

select{

    font:inherit;

    outline:none;

}



button{

    cursor:pointer;

}





/* ---------- Selection ---------- */



::selection{

    background:rgba(229,169,60,.28);

    color:var(--ink);

}





/* ---------- Long content ---------- */



h1,

h2,

h3,

h4,

h5,

h6,

p,

a,

button,

label,

span{

    overflow-wrap:break-word;

}



table{

    max-width:100%;

}



pre,

code{

    max-width:100%;

}



pre{

    overflow-x:auto;

}





/* ---------- Mobile tap behavior ---------- */



button,

a,

input,

textarea,

select{

    -webkit-tap-highlight-color:transparent;

}





/* ---------- Hidden attribute ---------- */



[hidden]{

    display:none!important;

}





/* ---------- Flex / Grid children ---------- */



.flex,

.grid,

[class*="-grid"],

[class*="-flex"],

.section-grid > *,

.path-grid > *,

.path-grid-new > *,

.journey > *,

.video-grid > *,

.article-grid > *,

.pricing-grid > *,

.stats-grid > *,

.form-grid > *,

.footer-main > *,

.footer-grid > *{

    min-width:0;

}





/* =========================================================

   03 — GLOBAL CONTAINER

========================================================= */



.container{

    width:min(

        calc(100% - 40px),

        var(--max)

    );



    margin-inline:auto;

}





/* =========================================================

   04 — READING PROGRESS

========================================================= */



.reading-progress{

    position:fixed;

    z-index:2000;



    top:0;

    right:0;



    width:0;

    height:3px;



    background:

        linear-gradient(

            90deg,

            var(--gold),

            var(--gold-2)

        );



    box-shadow:

        0 0 12px rgba(229,169,60,.35);



    transition:width .08s linear;

}





/* =========================================================

   05 — TOP STRIP

========================================================= */



.top-strip{

    position:relative;

    z-index:120;



    min-height:34px;



    background:var(--navy);

    color:#dfe7ef;



    font-size:11px;

    font-weight:600;

}



.top-strip-inner{

    min-height:34px;



    display:flex;

    align-items:center;

    justify-content:space-between;



    gap:20px;

}



.top-strip-inner span{

    min-width:0;

}



.top-strip-inner span:last-child{

    color:#8f9baa;

}





/* =========================================================

   06 — HEADER / NAVIGATION

========================================================= */



.site-header{

    position:relative;

    z-index:1100;



    background:

        rgba(245,242,235,.96);



    border-bottom:

        1px solid rgba(16,23,34,.08);



    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);



    transition:

        background var(--transition),

        box-shadow var(--transition),

        border-color var(--transition);

}



.site-header .nav{

    position:relative;



    min-height:78px;



    display:flex;

    align-items:center;

    justify-content:space-between;



    gap:30px;

}





/* =========================================================

   BRAND

========================================================= */



.brand{

    display:inline-flex;

    align-items:center;



    flex:0 0 auto;



    color:var(--ink);



    line-height:1;



    transition:

        transform var(--transition),

        opacity var(--transition);

}



.brand:hover{

    transform:translateY(-1px);

    opacity:.92;

}



.brand svg,

.brand img{

    display:block;



    width:auto;



    max-width:180px;

    max-height:52px;

}





/* =========================================================

   DESKTOP NAVIGATION

========================================================= */



.nav-links{

    display:flex;

    align-items:center;

    justify-content:flex-end;



    gap:21px;



    min-width:0;

}



.nav-links > a:not(.btn){

    position:relative;



    display:inline-flex;

    align-items:center;

    justify-content:center;



    min-height:42px;



    padding:0 2px;



    color:#303b47;



    font-size:13px;

    font-weight:700;



    white-space:nowrap;



    transition:

        color var(--transition);

}



.nav-links > a:not(.btn)::after{

    content:"";



    position:absolute;



    right:0;

    left:0;

    bottom:3px;



    height:2px;



    background:

        linear-gradient(

            90deg,

            transparent,

            var(--gold),

            transparent

        );



    border-radius:999px;



    transform:scaleX(0);

    transform-origin:center;



    transition:

        transform var(--transition);

}



.nav-links > a:not(.btn):hover{

    color:var(--navy);

}



.nav-links > a:not(.btn):hover::after,

.nav-links > a:not(.btn).active::after{

    transform:scaleX(1);

}



.nav-links > a:not(.btn).active{

    color:var(--navy);

}





/* =========================================================

   NAV CTA

========================================================= */



.nav-links > .btn-primary{

    flex:0 0 auto;



    min-height:43px;



    padding-inline:17px;



    border-radius:12px;



    box-shadow:

        0 10px 24px rgba(229,169,60,.18);

}



.nav-links > .btn-primary:hover{

    box-shadow:

        0 14px 30px rgba(229,169,60,.28);

}





/* =========================================================

   MOBILE MENU BUTTON

========================================================= */



.menu-toggle{

    display:none;



    width:44px;

    height:44px;



    flex:0 0 44px;



    align-items:center;

    justify-content:center;



    padding:0;



    border:

        1px solid rgba(16,23,34,.12);



    border-radius:13px;



    background:#fff;



    color:var(--navy);



    box-shadow:

        0 6px 18px rgba(8,13,23,.05);



    transition:

        background var(--transition),

        border-color var(--transition),

        color var(--transition),

        transform var(--transition),

        box-shadow var(--transition);

}



.menu-toggle:hover{

    border-color:

        rgba(229,169,60,.45);



    background:#fffaf0;



    box-shadow:

        0 9px 22px rgba(8,13,23,.08);

}



.menu-toggle:active{

    transform:scale(.96);

}



.menu-toggle:focus-visible{

    outline:3px solid rgba(229,169,60,.25);

    outline-offset:3px;

}



.menu-toggle svg{

    width:20px;

    height:20px;



    flex:none;

}





/* =========================================================

   07 — BUTTONS

========================================================= */



.btn{

    position:relative;



    min-height:48px;



    display:inline-flex;

    align-items:center;

    justify-content:center;



    gap:9px;



    padding:0 20px;



    border:1px solid transparent;

    border-radius:14px;



    font-family:

        "IBM Plex Sans Arabic",

        "Readex Pro",

        "Tajawal",

        "Cairo",

        Arial,

        sans-serif;



    font-size:13px;

    font-weight:800;

    line-height:1.2;



    text-decoration:none;

    white-space:nowrap;



    cursor:pointer;



    transition:

        transform var(--transition),

        box-shadow var(--transition),

        background var(--transition),

        border-color var(--transition),

        color var(--transition);

}



.btn svg{

    width:16px;

    height:16px;



    flex:none;

}



.btn:hover{

    transform:translateY(-2px);

}



.btn:active{

    transform:translateY(0);

}



.btn:focus-visible{

    outline:3px solid rgba(229,169,60,.30);

    outline-offset:3px;

}





/* ---------- Gold ---------- */



.btn-gold,

.btn-primary{

    color:var(--navy);



    background:

        linear-gradient(

            135deg,

            var(--gold-2),

            var(--gold)

        );



    border-color:

        var(--gold);



    box-shadow:

        0 14px 30px rgba(229,169,60,.22);

}



.btn-gold:hover,

.btn-primary:hover{

    box-shadow:

        0 18px 38px rgba(229,169,60,.32);

}





/* ---------- Dark ---------- */



.btn-dark{

    color:#fff;



    background:var(--navy);



    border-color:var(--navy);



    box-shadow:

        0 14px 30px rgba(8,13,23,.16);

}



.btn-dark:hover{

    background:#111c2d;

    border-color:#111c2d;

}





/* ---------- Ghost ---------- */



.btn-ghost{

    color:#fff;



    background:

        rgba(255,255,255,.045);



    border-color:

        rgba(255,255,255,.22);

}



.btn-ghost:hover{

    background:

        rgba(255,255,255,.08);



    border-color:

        rgba(255,255,255,.36);

}





/* ---------- Outline ---------- */



.btn-outline{

    color:var(--navy);



    background:transparent;



    border-color:

        rgba(8,13,23,.18);

}



.btn-outline:hover{

    color:var(--navy);



    background:#fff;



    border-color:

        var(--gold);



    box-shadow:

        0 10px 24px rgba(8,13,23,.08);

}





/* ---------- Sizes ---------- */



.btn-small{

    min-height:42px;



    padding:0 15px;



    border-radius:12px;



    font-size:12px;

}



.btn-large{

    min-height:54px;



    padding:0 24px;



    border-radius:15px;



    font-size:14px;

}





/* ---------- Button group ---------- */



.btn-group{

    display:flex;

    align-items:center;

    flex-wrap:wrap;



    gap:12px;



    min-width:0;

}





/* =========================================================

   08 — HERO

   Existing visual system preserved

========================================================= */



.hero{

    position:relative;

}



.hero-new{

    isolation:isolate;



    position:relative;



    min-height:720px;



    padding:76px 0 0;



    overflow:hidden;



    color:#fff;



    background:

        radial-gradient(

            circle at 75% 25%,

            rgba(229,169,60,.13),

            transparent 25%

        ),

        radial-gradient(

            circle at 10% 65%,

            rgba(101,217,230,.08),

            transparent 24%

        ),

        linear-gradient(

            135deg,

            #07101d 0%,

            #0b1422 46%,

            #111d30 100%

        );

}



.hero-new::before{

    content:"";



    position:absolute;

    inset:0;



    z-index:-2;



    pointer-events:none;



    background-image:

        linear-gradient(

            rgba(255,255,255,.025) 1px,

            transparent 1px

        ),

        linear-gradient(

            90deg,

            rgba(255,255,255,.025) 1px,

            transparent 1px

        );



    background-size:64px 64px;



    mask-image:

        linear-gradient(

            to bottom,

            rgba(0,0,0,.8),

            transparent 88%

        );

}



.hero-new::after{

    content:"";



    position:absolute;



    width:650px;

    height:650px;



    right:-260px;

    top:-250px;



    z-index:-1;



    border:

        1px solid rgba(229,169,60,.09);



    border-radius:50%;



    pointer-events:none;



    box-shadow:

        0 0 0 60px rgba(229,169,60,.025),

        0 0 0 120px rgba(229,169,60,.015);

}



.hero-bg-orb{

    position:absolute;



    border-radius:50%;



    pointer-events:none;



    filter:blur(2px);

}



.hero-bg-orb-one{

    width:380px;

    height:380px;



    right:4%;

    top:15%;



    background:

        radial-gradient(

            circle,

            rgba(229,169,60,.10),

            transparent 70%

        );

}



.hero-bg-orb-two{

    width:320px;

    height:320px;



    left:-100px;

    bottom:10%;



    background:

        radial-gradient(

            circle,

            rgba(101,217,230,.08),

            transparent 70%

        );

}



.hero-new .container{

    position:relative;

    z-index:2;

}



.hero-grid{

    min-height:570px;



    display:grid;



    grid-template-columns:

        minmax(0,1fr)

        minmax(480px,590px);



    align-items:center;



    gap:52px;

}



.hero-copy{

    position:relative;

    z-index:5;



    padding-bottom:18px;

}



.hero-copy .eyebrow{

    display:inline-flex;

    align-items:center;



    gap:9px;



    min-height:34px;



    margin:0;



    padding:0 13px;



    border:

        1px solid rgba(229,169,60,.26);



    border-radius:999px;



    background:

        rgba(229,169,60,.07);



    color:var(--gold-2);



    font-size:12px;

    font-weight:800;



    letter-spacing:normal;

    text-transform:none;



    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.04),

        0 10px 28px rgba(0,0,0,.10);

}



.hero-copy .eyebrow::before{

    display:none;

}



.hero-copy .eyebrow svg{

    width:15px;

    height:15px;

}



.hero-copy h1{

    margin:22px 0 18px;



    max-width:650px;



    font-size:clamp(42px,5vw,72px);

    line-height:1.04;



    letter-spacing:-.045em;



    font-weight:950;

}



.hero-copy h1 .accent{

    display:inline-block;



    color:var(--gold-2);



    text-shadow:

        0 4px 30px rgba(229,169,60,.12);

}



.hero-copy .lead{

    max-width:620px;



    margin:0;



    color:#b8c3cf;



    font-size:17px;

    line-height:1.95;

}



.hero-actions{

    display:flex;

    align-items:center;

    flex-wrap:wrap;



    gap:12px;



    margin-top:28px;

}



.hero-trust{

    display:flex;

    align-items:center;

    flex-wrap:wrap;



    gap:0;



    margin-top:34px;

    padding-top:20px;



    border-top:

        1px solid rgba(255,255,255,.08);

}



.hero-trust-item{

    min-width:90px;



    padding:0 18px;



    border-left:

        1px solid rgba(255,255,255,.08);

}



.hero-trust-item:first-child{

    padding-right:18px;

    padding-left:0;



    border-left:0;

}



.hero-trust-item strong{

    display:block;



    color:#f3f6f9;



    font-size:14px;

    font-weight:900;

}



.hero-trust-item span{

    display:block;



    margin-top:3px;



    color:#7f8c9b;



    font-size:11px;

}





/* ---------- Hero visual ---------- */



.hero-visual{

    position:relative;



    width:100%;

    max-width:590px;

    min-height:570px;



    margin-inline:auto;



    display:flex;

    align-items:center;

    justify-content:center;



    padding:32px;



    border:

        1px solid rgba(255,255,255,.16);



    border-radius:38px;



    background:

        radial-gradient(

            circle at 50% 0%,

            rgba(229,169,60,.09),

            transparent 38%

        ),

        linear-gradient(

            145deg,

            rgba(255,255,255,.10),

            rgba(255,255,255,.035) 44%,

            rgba(255,255,255,.015)

        ),

        linear-gradient(

            145deg,

            rgba(25,39,62,.88),

            rgba(8,13,23,.68)

        );



    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.11),

        inset 0 -1px 0 rgba(0,0,0,.42),

        0 0 0 1px rgba(229,169,60,.045),

        0 30px 75px rgba(0,0,0,.34),

        0 55px 120px rgba(0,0,0,.18);



    transform-style:preserve-3d;

    perspective:1600px;

}



.hero-visual::before{

    content:"";



    position:absolute;

    inset:11px;



    border:

        1px solid rgba(229,169,60,.22);



    border-radius:27px;



    pointer-events:none;

    z-index:0;



    box-shadow:

        inset 0 0 45px rgba(229,169,60,.045),

        0 0 28px rgba(229,169,60,.025);

}



.hero-visual::after{

    content:"";



    position:absolute;



    width:180px;

    height:180px;



    right:0;

    top:0;



    border-radius:

        0 35px 0 100%;



    background:

        radial-gradient(

            circle at 100% 0,

            rgba(229,169,60,.16),

            transparent 68%

        );



    pointer-events:none;

    z-index:0;

}





/* ---------- Device ---------- */



.hero-device{

    position:relative;

    z-index:4;



    width:100%;

    max-width:500px;

    min-height:390px;



    padding:17px;



    border:

        1px solid rgba(255,255,255,.16);



    border-radius:27px;



    background:

        linear-gradient(

            145deg,

            #263953 0%,

            #16263c 46%,

            #0c1625 100%

        );



    transform:

        rotateY(-8deg)

        rotateX(3deg)

        rotateZ(-2.5deg)

        translateZ(20px);



    transform-style:preserve-3d;



    box-shadow:

        0 45px 75px rgba(0,0,0,.43),

        0 18px 32px rgba(0,0,0,.24),

        0 0 0 7px rgba(255,255,255,.018),

        0 0 0 8px rgba(229,169,60,.055),

        0 0 32px rgba(229,169,60,.055),

        inset 0 1px 0 rgba(255,255,255,.13);



    transition:

        transform .55s cubic-bezier(.2,.75,.2,1),

        box-shadow .55s ease;

}



.hero-device::before{

    content:"";



    position:absolute;



    left:12px;

    right:12px;

    top:-1px;



    height:4px;



    border-radius:999px;



    background:

        linear-gradient(

            90deg,

            transparent 0%,

            rgba(229,169,60,.35) 18%,

            var(--gold-2) 50%,

            rgba(229,169,60,.35) 82%,

            transparent 100%

        );



    box-shadow:

        0 0 18px rgba(229,169,60,.16);



    z-index:5;

}



.hero-device::after{

    content:"";



    position:absolute;

    inset:1px;



    border-radius:26px;



    pointer-events:none;



    background:

        linear-gradient(

            115deg,

            rgba(255,255,255,.07),

            transparent 20%,

            transparent 72%,

            rgba(255,255,255,.018)

        );



    z-index:5;

}



.hero-device:hover{

    transform:

        rotateY(-3deg)

        rotateX(1deg)

        rotateZ(-1deg)

        translate3d(0,-7px,30px);



    box-shadow:

        0 55px 90px rgba(0,0,0,.47),

        0 22px 38px rgba(0,0,0,.25),

        0 0 0 7px rgba(255,255,255,.022),

        0 0 0 8px rgba(229,169,60,.055),

        inset 0 1px 0 rgba(255,255,255,.12);

}



.device-top{

    min-height:28px;



    display:flex;

    align-items:center;



    gap:7px;



    padding:

        0 3px 12px;

}



.device-dot{

    width:8px;

    height:8px;



    border-radius:50%;



    background:#677487;



    box-shadow:

        inset 0 1px 1px rgba(255,255,255,.3);

}



.device-dot:nth-child(1){

    background:#d77d72;

}



.device-dot:nth-child(2){

    background:#d9b15f;

}



.device-dot:nth-child(3){

    background:#73b88d;

}



.device-title{

    margin-right:auto;



    color:#8795a7;



    font-size:10px;



    letter-spacing:.08em;

    text-transform:uppercase;

}



.device-screen{

    position:relative;



    min-height:325px;



    overflow:hidden;



    padding:34px 30px 27px;



    border:

        1px solid rgba(255,255,255,.10);



    border-radius:18px;



    background:

        linear-gradient(

            145deg,

            rgba(30,48,74,.99),

            rgba(13,24,40,.99)

        );



    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.085),

        inset 0 -18px 35px rgba(0,0,0,.12),

        inset 0 0 45px rgba(0,0,0,.12),

        0 0 0 1px rgba(255,255,255,.025);

}



.device-screen::before{

    content:"";



    position:absolute;

    inset:0;



    pointer-events:none;



    background-image:

        linear-gradient(

            rgba(255,255,255,.025) 1px,

            transparent 1px

        ),

        linear-gradient(

            90deg,

            rgba(255,255,255,.025) 1px,

            transparent 1px

        );



    background-size:34px 34px;



    mask-image:

        linear-gradient(

            to bottom,

            rgba(0,0,0,.8),

            transparent

        );

}



.screen-label{

    position:relative;

    z-index:2;



    margin-bottom:25px;



    color:#7f91a5;



    font-size:10px;

    font-weight:900;



    letter-spacing:.17em;

}



.screen-title{

    position:relative;

    z-index:2;



    display:flex;

    align-items:center;

    justify-content:space-between;



    padding:15px 0;



    color:#f4f7fa;



    font-size:22px;

    font-weight:850;



    border-bottom:

        1px solid rgba(255,255,255,.075);

}



.screen-title span{

    color:var(--gold-2);



    font-size:18px;



    text-shadow:

        0 0 18px rgba(229,169,60,.2);

}



.screen-progress{

    position:relative;

    z-index:2;



    width:100%;

    height:7px;



    margin-top:30px;



    overflow:hidden;



    border-radius:999px;



    background:

        rgba(255,255,255,.08);

}



.screen-progress span{

    display:block;



    height:100%;



    border-radius:inherit;



    background:

        linear-gradient(

            90deg,

            var(--gold),

            var(--gold-2)

        );



    box-shadow:

        0 0 18px rgba(229,169,60,.28);

}



.screen-footer{

    position:relative;

    z-index:2;



    display:flex;

    align-items:center;

    justify-content:space-between;



    margin-top:25px;



    color:#8290a0;



    font-size:10px;

    font-weight:800;



    letter-spacing:.08em;

    text-transform:uppercase;

}





/* ---------- Floating cards ---------- */



.hero-floating{

    position:absolute;

    z-index:8;



    display:flex;

    align-items:center;



    gap:11px;



    padding:14px 16px;



    border:

        1px solid rgba(255,255,255,.13);



    border-radius:16px;



    background:

        linear-gradient(

            145deg,

            rgba(38,55,78,.98),

            rgba(12,22,36,.96)

        );



    box-shadow:

        0 25px 50px rgba(0,0,0,.35),

        0 8px 18px rgba(0,0,0,.16),

        inset 0 1px 0 rgba(255,255,255,.075);



    backdrop-filter:blur(12px);



    transform-style:preserve-3d;

}



.hero-floating strong{

    display:block;



    color:#f3f6f9;



    font-size:13px;

    font-weight:900;

}



.hero-floating small{

    display:block;



    margin-top:2px;



    color:#8996a5;



    font-size:10px;

    font-weight:600;

}



.hero-floating-one{

    left:-2px;

    top:110px;



    animation:

        heroFloatOne 5.5s ease-in-out infinite;



    background:

        linear-gradient(

            145deg,

            #fbf8f0,

            #e9e3d7

        );



    color:var(--ink);



    border-color:

        rgba(255,255,255,.75);



    box-shadow:

        0 28px 55px rgba(0,0,0,.30),

        0 8px 0 rgba(229,169,60,.10),

        inset 0 1px 0 rgba(255,255,255,.9);

}



.hero-floating-one strong{

    color:var(--ink);

}



.hero-floating-one small{

    color:#737a80;

}



.hero-floating-two{

    right:-4px;

    bottom:125px;



    animation:

        heroFloatTwo 6s ease-in-out infinite;



    border-color:

        rgba(101,217,230,.20);

}



.hero-floating-three{

    right:26px;

    top:72px;



    padding:11px 14px;



    border-color:

        rgba(229,169,60,.26);



    transform:

        translateZ(42px)

        rotate(2deg);



    box-shadow:

        0 20px 40px rgba(0,0,0,.30),

        0 0 25px rgba(229,169,60,.06);

}



.hero-floating-three strong{

    color:var(--gold-2);

}



.floating-icon,

.floating-number{

    width:31px;

    height:31px;



    display:grid;

    place-items:center;



    border-radius:10px;



    flex:none;

}



.floating-icon{

    background:

        rgba(229,169,60,.13);



    color:var(--gold);

}



.floating-number{

    background:

        rgba(101,217,230,.10);



    color:var(--cyan);



    font-size:10px;

    font-weight:900;

}



.hero-bottom-line{

    position:relative;

    z-index:4;



    margin-top:55px;



    border-top:

        1px solid rgba(255,255,255,.07);



    background:

        rgba(5,10,18,.28);

}



.hero-bottom-line .container{

    min-height:58px;



    display:flex;

    align-items:center;

    justify-content:space-between;



    gap:20px;



    color:#738195;



    font-size:10px;

    font-weight:900;



    letter-spacing:.15em;

}



.hero-bottom-line i{

    width:4px;

    height:4px;



    border-radius:50%;



    background:var(--gold);



    opacity:.7;

}



@keyframes heroFloatOne{

    0%,100%{

        transform:

            translate3d(0,0,42px)

            rotate(-2deg);

    }



    50%{

        transform:

            translate3d(0,-9px,55px)

            rotate(-1deg);

    }

}



@keyframes heroFloatTwo{

    0%,100%{

        transform:

            translate3d(0,0,35px)

            rotate(2deg);

    }



    50%{

        transform:

            translate3d(0,-10px,48px)

            rotate(3deg);

    }

}





/* =========================================================

   09 — GENERIC SECTIONS

========================================================= */



.section{

    position:relative;

    padding-block:96px;

}



.section-dark{

    background:#080b11;

    color:#fff;

}



.section-light{

    background:#f7f7f5;

    color:#111827;

}





/* ---------- Section header ---------- */



.section-head{

    max-width:760px;

    margin-bottom:48px;

}



.section-head.center{

    margin-inline:auto;

    text-align:center;

}





/*

 * IMPORTANT:

 * .eyebrow الخاص بالـHero منفصل.

 * هنا نستخدم .section-kicker فقط حتى لا

 * يتعارض شكل Badge الـHero مع عناوين الأقسام.

 */



.section-kicker{

    display:inline-flex;

    align-items:center;

    gap:8px;



    margin-bottom:14px;



    color:#f59e0b;



    font-size:.78rem;

    font-weight:700;

    line-height:1.4;



    letter-spacing:.08em;

    text-transform:uppercase;

}



.section-kicker::before{

    content:"";



    width:22px;

    height:2px;



    background:#f59e0b;



    border-radius:999px;

}



.kicker-dark,

.page-kicker{

    display:inline-flex;

    align-items:center;



    color:#a27524;



    font-size:11px;

    font-weight:900;



    letter-spacing:.13em;

    text-transform:uppercase;

}



.page-kicker{

    color:var(--gold);

}





/* ---------- Section headings ---------- */



.section-head h2{

    margin:0;



    font-family:

        "Readex Pro",

        "IBM Plex Sans Arabic",

        "Tajawal",

        "Cairo",

        Arial,

        sans-serif;



    font-size:clamp(

        2rem,

        3.5vw,

        3.25rem

    );



    font-weight:700;

    line-height:1.18;



    letter-spacing:-.035em;

}



.section-head p{

    max-width:680px;



    margin:18px 0 0;



    color:#667085;



    font-size:1.02rem;

    line-height:1.9;

}



.section-dark .section-head p{

    color:#aab2c0;

}





/* ---------- Section title row ---------- */



.section-title-row{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;



    gap:30px;



    margin-bottom:42px;

}



.section-title-row .section-head{

    margin-bottom:0;

}



.section-title-row > a{

    flex:0 0 auto;



    display:inline-flex;

    align-items:center;



    gap:8px;



    color:#111827;



    font-size:.9rem;

    font-weight:700;



    text-decoration:none;



    transition:

        color .2s ease,

        transform .2s ease;

}



.section-title-row > a:hover{

    color:#f59e0b;

    transform:translateX(-3px);

}





/* ---------- Generic grid ---------- */



.section-grid{

    display:grid;



    grid-template-columns:

        repeat(12,minmax(0,1fr));



    gap:24px;



    min-width:0;

}





/* ---------- Generic card ---------- */



.card{

    min-width:0;



    background:#fff;



    border:1px solid #e7e9ee;

    border-radius:22px;



    box-shadow:

        0 12px 35px rgba(15,23,42,.05);



    overflow:hidden;



    transition:

        transform .25s ease,

        border-color .25s ease,

        box-shadow .25s ease;

}



.card:hover{

    transform:translateY(-4px);



    border-color:#d9dde5;



    box-shadow:

        0 20px 45px rgba(15,23,42,.09);

}





/* ---------- Dark card ---------- */



.section-dark .card,

.card-dark{

    background:#111722;



    border-color:#202938;



    box-shadow:

        0 18px 45px rgba(0,0,0,.22);

}



.section-dark .card:hover,

.card-dark:hover{

    border-color:#303b4e;



    box-shadow:

        0 24px 55px rgba(0,0,0,.30);

}





/* ---------- Card content ---------- */



.card-body{

    padding:28px;

}



.card-title{

    margin:0;



    color:#111827;



    font-family:

        "Readex Pro",

        "IBM Plex Sans Arabic",

        "Tajawal",

        "Cairo",

        Arial,

        sans-serif;



    font-size:1.15rem;

    font-weight:700;

    line-height:1.45;

}



.section-dark .card-title,

.card-dark .card-title{

    color:#fff;

}



.card-text{

    margin:10px 0 0;



    color:#667085;



    font-size:.95rem;

    line-height:1.85;

}



.section-dark .card-text,

.card-dark .card-text{

    color:#aab2c0;

}





/* ---------- Meta ---------- */



.meta{

    display:flex;

    align-items:center;

    flex-wrap:wrap;



    gap:8px 14px;



    color:#8a93a3;



    font-size:.78rem;

    line-height:1.5;

}



.meta strong{

    color:#475467;

    font-weight:700;

}





/* ---------- Badge ---------- */



.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;



    min-height:30px;



    padding:5px 11px;



    border-radius:999px;



    background:#fff7e6;

    color:#b45309;



    border:1px solid #fde7b2;



    font-size:.75rem;

    font-weight:700;



    line-height:1.3;

}



.section-dark .badge{

    background:rgba(245,158,11,.10);

    color:#fbbf24;

    border-color:rgba(245,158,11,.20);

}





/* ---------- Divider ---------- */



.section-divider{

    width:100%;

    height:1px;



    margin-block:0;



    background:#e7e9ee;

}



.section-dark .section-divider{

    background:#202938;

}





/* =========================================================

   PREMIUM INTERACTIVE PATH CARDS

   ========================================================= */



.path-section{

    position:relative;

    overflow:hidden;

    padding-top:110px;

    padding-bottom:110px;

    background:#fff;

}



.path-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    top:8%;

    left:-280px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(229,169,60,.07) 0%,

        rgba(229,169,60,0) 70%

    );

    pointer-events:none;

}



.path-section-head{

    position:relative;

    z-index:2;

    margin-bottom:48px;

}



.path-section-head h2{

    max-width:700px;

}



.path-section-head h2 span{

    color:var(--gold-2);

}





/* =========================================================

   GRID

   ========================================================= */



.path-grid{

    position:relative;

    z-index:2;



    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));



    gap:18px;



    perspective:1200px;

}





/* =========================================================

   CARD

   ========================================================= */



.path-card{

    --path-accent:229,169,60;



    position:relative;



    display:flex;

    flex-direction:column;



    min-height:475px;



    padding:25px;



    overflow:hidden;



    isolation:isolate;



    color:#fff;

    text-decoration:none;



    border:1px solid rgba(255,255,255,.09);

    border-radius:26px;



    background:

        radial-gradient(

            circle at 80% 15%,

            rgba(var(--path-accent),.16),

            transparent 31%

        ),

        linear-gradient(

            145deg,

            #101d2f 0%,

            #07101c 72%

        );



    box-shadow:

        0 22px 55px rgba(8,13,23,.13),

        inset 0 1px 0 rgba(255,255,255,.045);



    transform:

        translateY(0)

        rotateX(0deg);



    transition:

        transform .45s cubic-bezier(.2,.8,.2,1),

        box-shadow .45s ease,

        border-color .45s ease;



    animation-delay:calc(var(--path-index) * 80ms);

}



.path-card:hover{

    transform:

        translateY(-10px)

        rotateX(1deg);



    border-color:

        rgba(var(--path-accent),.38);



    box-shadow:

        0 30px 70px rgba(8,13,23,.22),

        0 0 0 1px rgba(var(--path-accent),.06),

        inset 0 1px 0 rgba(255,255,255,.07);

}





/* =========================================================

   CARD ACCENTS

   ========================================================= */



.path-card-one{

    --path-accent:229,169,60;

}



.path-card-two{

    --path-accent:205,154,76;

}



.path-card-three{

    --path-accent:126,164,180;

}



.path-card-four{

    --path-accent:179,145,219;

}





/* =========================================================

   CARD GLOW

   ========================================================= */



.path-card-glow{

    position:absolute;



    width:240px;

    height:240px;



    top:-100px;

    right:-90px;



    border-radius:50%;



    background:

        radial-gradient(

            circle,

            rgba(var(--path-accent),.22) 0%,

            rgba(var(--path-accent),.07) 35%,

            rgba(var(--path-accent),0) 72%

        );



    filter:blur(5px);



    opacity:.75;



    pointer-events:none;



    transition:

        transform .65s cubic-bezier(.2,.8,.2,1),

        opacity .45s ease;

}



.path-card:hover .path-card-glow{

    transform:scale(1.35) translate(-18px,18px);

    opacity:1;

}





/* =========================================================

   BACKGROUND GRID

   ========================================================= */



.path-card-grid{

    position:absolute;

    inset:0;



    opacity:.17;



    background-image:

        linear-gradient(

            rgba(255,255,255,.045) 1px,

            transparent 1px

        ),

        linear-gradient(

            90deg,

            rgba(255,255,255,.045) 1px,

            transparent 1px

        );



    background-size:30px 30px;



    mask-image:

        linear-gradient(

            to bottom,

            #000 0%,

            transparent 75%

        );



    pointer-events:none;



    transition:

        transform .7s cubic-bezier(.2,.8,.2,1),

        opacity .45s ease;

}



.path-card:hover .path-card-grid{

    transform:translate3d(-12px,10px,0);

    opacity:.28;

}





/* =========================================================

   TOP ROW

   ========================================================= */



.path-card-top{

    position:relative;

    z-index:3;



    display:flex;

    align-items:center;

    justify-content:space-between;



    gap:15px;

}



.path-number{

    display:inline-flex;

    align-items:center;

    justify-content:center;



    width:34px;

    height:34px;



    border:1px solid rgba(255,255,255,.12);

    border-radius:50%;



    color:rgba(255,255,255,.6);



    font-size:10px;

    font-weight:800;

    letter-spacing:.08em;



    background:rgba(255,255,255,.025);

}



.path-tag{

    color:rgba(255,255,255,.38);



    font-size:9px;

    font-weight:900;



    letter-spacing:.14em;

}





/* =========================================================

   ICON

   ========================================================= */



.path-icon-wrap{

    position:relative;

    z-index:3;



    display:flex;

    align-items:center;

    justify-content:center;



    width:82px;

    height:82px;



    margin-top:40px;

    margin-bottom:32px;



    border-radius:24px;



    background:

        linear-gradient(

            145deg,

            rgba(255,255,255,.08),

            rgba(255,255,255,.025)

        );



    border:1px solid rgba(255,255,255,.1);



    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.06),

        0 15px 35px rgba(0,0,0,.13);



    transition:

        transform .5s cubic-bezier(.2,.8,.2,1),

        border-color .45s ease,

        box-shadow .45s ease;

}



.path-card:hover .path-icon-wrap{

    transform:translateY(-5px) scale(1.04);



    border-color:

        rgba(var(--path-accent),.42);



    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.08),

        0 18px 42px rgba(0,0,0,.18),

        0 0 35px rgba(var(--path-accent),.08);

}



.path-icon-ring{

    position:absolute;

    inset:-8px;



    border:1px solid rgba(var(--path-accent),.16);



    border-radius:29px;



    opacity:.7;



    transition:

        transform .6s cubic-bezier(.2,.8,.2,1),

        opacity .45s ease;

}



.path-card:hover .path-icon-ring{

    transform:rotate(7deg) scale(1.06);

    opacity:1;

}



.path-icon{

    position:relative;

    z-index:2;



    display:flex;

    align-items:center;

    justify-content:center;



    width:42px;

    height:42px;



    border-radius:14px;



    color:rgb(var(--path-accent));



    background:

        rgba(var(--path-accent),.08);



    box-shadow:

        0 0 30px rgba(var(--path-accent),.09);

}



.path-icon svg{

    width:22px;

    height:22px;



    min-width:22px;

    min-height:22px;



    max-width:22px;

    max-height:22px;



    flex:0 0 22px;



    color:currentColor;



    stroke:currentColor;



    transition:

        transform .5s cubic-bezier(.2,.8,.2,1);

}



.path-card:hover .path-icon svg{

    transform:scale(1.12) rotate(-4deg);

}





/* =========================================================

   CONTENT

   ========================================================= */



.path-card-content{

    position:relative;

    z-index:3;



    margin-top:auto;



    padding-right:3px;

}



.path-overline{

    display:block;



    margin-bottom:7px;



    color:

        rgba(var(--path-accent),.9);



    font-size:9px;

    font-weight:900;



    letter-spacing:.16em;

}



.path-card-content h3{

    margin:0;



    color:#fff;



    font-size:27px;

    line-height:1.35;

    font-weight:800;

}



.path-card-content p{

    max-width:260px;



    margin:12px 0 0;



    color:rgba(255,255,255,.58);



    font-size:12px;

    line-height:1.9;

}





/* =========================================================

   ARROW

   ========================================================= */



.path-arrow{

    position:absolute;



    left:23px;

    bottom:23px;



    z-index:4;



    display:flex;

    align-items:center;

    justify-content:center;



    width:38px;

    height:38px;



    border:1px solid rgba(255,255,255,.12);

    border-radius:50%;



    color:rgba(255,255,255,.78);



    background:rgba(255,255,255,.035);



    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.05);



    transition:

        transform .45s cubic-bezier(.2,.8,.2,1),

        background .35s ease,

        border-color .35s ease,

        color .35s ease;

}



.path-arrow svg{

    width:14px;

    height:14px;



    min-width:14px;

    min-height:14px;



    max-width:14px;

    max-height:14px;



    flex:0 0 14px;



    stroke:currentColor;



    color:currentColor;

}



.path-card:hover .path-arrow{

    transform:translateX(-4px);



    color:#fff;



    border-color:

        rgba(var(--path-accent),.48);



    background:

        rgba(var(--path-accent),.16);

}





/* =========================================================

   BOTTOM ACCENT LINE

   ========================================================= */



.path-card-line{

    position:absolute;



    right:25px;

    bottom:39px;



    width:0;

    height:1px;



    background:

        linear-gradient(

            90deg,

            rgba(var(--path-accent),0),

            rgba(var(--path-accent),.55)

        );



    opacity:0;



    transition:

        width .5s cubic-bezier(.2,.8,.2,1),

        opacity .35s ease;

}



.path-card:hover .path-card-line{

    width:calc(100% - 85px);

    opacity:1;

}





/* =========================================================

   REVEAL / STAGGER

   ========================================================= */



.path-card.reveal{

    transition:

        opacity .65s ease,

        transform .65s cubic-bezier(.2,.8,.2,1),

        box-shadow .45s ease,

        border-color .45s ease;

}



.path-card.reveal.visible{

    transition-delay:

        calc(var(--path-index) * 90ms);

}





/* =========================================================

   ACCESSIBILITY

   ========================================================= */



@media (prefers-reduced-motion:reduce){

    .bt-path-card,
    .bt-path-card *,
    .bt-path-card::after{

        transition:none !important;
        animation:none !important;

    }

}


/* =========================================================

   TABLET

   ========================================================= */



@media (max-width:1100px){



    .path-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }



    .path-card{

        min-height:440px;

    }



}





/* =========================================================

   MOBILE

   ========================================================= */



@media (max-width:600px){



    .path-section{

        padding-top:80px;

        padding-bottom:80px;

    }



    .path-section-head{

        margin-bottom:32px;

    }



    .path-grid{

        grid-template-columns:1fr;

        gap:14px;

    }



    .path-card{

        min-height:405px;

        padding:22px;

        border-radius:23px;

    }



    .path-icon-wrap{

        width:74px;

        height:74px;



        margin-top:34px;

        margin-bottom:28px;

    }



    .path-icon{

        width:38px;

        height:38px;

    }



    .path-card-content h3{

        font-size:25px;

    }



    .path-card-content p{

        max-width:290px;

        font-size:12px;

    }



    .path-arrow{

        left:20px;

        bottom:20px;



        width:36px;

        height:36px;

    }



    .path-card-line{

        right:22px;

        bottom:38px;

    }



    .path-card:hover{

        transform:translateY(-5px);

    }



}





/* =========================================================

   SMALL MOBILE

   ========================================================= */



@media (max-width:380px){



    .path-card{

        min-height:390px;

    }



    .path-card-content h3{

        font-size:23px;

    }



    .path-card-content p{

        line-height:1.8;

    }

}



/* =========================================================

   18 — STATS

========================================================= */



.stats{

    background:var(--navy);

    color:#fff;

}



.stats-grid{

    display:grid;



    grid-template-columns:

        repeat(4,minmax(0,1fr));



    gap:0;

}



.stat{

    padding:30px;



    border-left:

        1px solid rgba(255,255,255,.08);

}



.stat:last-child{

    border-left:0;

}



.stat strong{

    display:block;



    color:var(--gold-2);



    font-size:38px;

    line-height:1;



    font-weight:950;

}



.stat span{

    display:block;



    margin-top:10px;



    color:#96a3b2;



    font-size:13px;

}





/* =========================================================

   19 — FORMS

========================================================= */



.form-grid{

    display:grid;



    grid-template-columns:

        repeat(2,minmax(0,1fr));



    gap:18px;

}



.form-group{

    display:flex;

    flex-direction:column;



    gap:8px;



    min-width:0;

}



.form-group.full{

    grid-column:1/-1;

}



.form-group label{

    color:var(--ink);



    font-size:12px;

    font-weight:800;

}

.form-group input,

.form-group textarea,

.form-group select{

    width:100%;

    min-width:0;



    border:

        1px solid var(--line);



    border-radius:13px;



    background:#fff;



    color:var(--ink);



    padding:14px 15px;



    transition:

        border-color var(--transition),

        box-shadow var(--transition);

}



.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus{

    border-color:

        rgba(229,169,60,.70);



    box-shadow:

        0 0 0 4px rgba(229,169,60,.10);

}



.form-group textarea{

    min-height:150px;

    resize:vertical;

}





/* =========================================================

   20 — PAGE HERO

========================================================= */



.page-hero{

    padding:80px 0;



    background:

        radial-gradient(

            circle at 80% 20%,

            rgba(229,169,60,.10),

            transparent 30%

        ),

        var(--navy);



    color:#fff;

}



.page-hero h1{

    max-width:800px;



    margin:0;



    font-size:

        clamp(38px,5vw,64px);



    line-height:1.1;



    letter-spacing:-.04em;

}



.page-hero p{

    max-width:680px;



    margin:20px 0 0;



    color:#aab5c2;



    font-size:15px;

    line-height:1.9;

}





/* =========================================================

   21 — FILTERS

========================================================= */



.filters{

    display:flex;

    flex-wrap:wrap;



    gap:9px;



    margin-bottom:30px;

}



.filter-btn,

.filter-tab{

    min-height:38px;



    padding:0 14px;



    border:

        1px solid var(--line);



    border-radius:999px;



    background:#fff;



    color:#4c5967;



    font-size:11px;

    font-weight:800;



    transition:

        background var(--transition),

        border-color var(--transition),

        color var(--transition),

        transform var(--transition);

}



.filter-btn:hover,

.filter-tab:hover{

    transform:translateY(-1px);



    border-color:

        rgba(229,169,60,.35);

}



.filter-btn.active,

.filter-tab.is-active{

    background:var(--navy);



    border-color:var(--navy);



    color:#fff;

}



.hide{

    display:none!important;

}





/* =========================================================

   22 — ARTICLE PAGE

========================================================= */



.article-page{

    max-width:820px;



    margin-inline:auto;

}



.article-page h1{

    margin:0 0 22px;



    font-size:

        clamp(34px,5vw,58px);



    line-height:1.15;



    letter-spacing:-.035em;

}



.article-page .article-intro{

    color:#687481;



    font-size:17px;

    line-height:1.9;

}



.article-content{

    margin-top:45px;

}



.article-content h2{

    margin:45px 0 16px;



    font-size:30px;

    line-height:1.25;

}



.article-content h3{

    margin:34px 0 12px;



    font-size:22px;

}



.article-content p,

.article-content li{

    color:#3d4854;



    font-size:16px;

    line-height:2;

}



.article-content ul,

.article-content ol{

    padding-right:22px;

}



.article-content img{

    border-radius:18px;

    margin:30px 0;

}





/* =========================================================

   23 — PRICING

========================================================= */



.pricing-grid{

    display:grid;



    grid-template-columns:

        repeat(3,minmax(0,1fr));



    gap:20px;

}



.price-card{

    padding:30px;



    border:

        1px solid var(--line);



    border-radius:24px;



    background:#fff;



    box-shadow:

        0 14px 35px rgba(8,13,23,.04);

}



.price-card.featured{

    border-color:

        rgba(229,169,60,.45);



    box-shadow:

        0 25px 60px rgba(229,169,60,.10);

}



.price-card .price{

    margin:15px 0;



    font-size:40px;

    font-weight:950;

}



.price-card ul{

    margin:20px 0;

    padding:0;



    list-style:none;

}



.price-card li{

    padding:9px 0;



    color:#697481;



    border-bottom:

        1px solid #eef0f2;



    font-size:13px;

}





/* =========================================================

   24 — FAQ

========================================================= */



.faq-list{

    display:grid;

    gap:12px;

}



.faq-item{

    overflow:hidden;



    border:

        1px solid var(--line);



    border-radius:17px;



    background:#fff;



    transition:

        border-color var(--transition),

        box-shadow var(--transition);

}



.faq-item.open{

    border-color:

        rgba(229,169,60,.32);



    box-shadow:

        0 15px 35px rgba(8,13,23,.05);

}



.faq-question,

.faq-q{

    width:100%;



    padding:20px;



    display:flex;

    align-items:center;

    justify-content:space-between;



    gap:20px;



    border:0;



    background:none;



    color:var(--ink);



    text-align:right;



    font-weight:850;

}



.faq-question:focus-visible,

.faq-q:focus-visible{

    outline:3px solid rgba(229,169,60,.25);

    outline-offset:-3px;

}



.faq-answer{

    padding:0 20px 20px;



    color:var(--muted);



    line-height:1.9;

}





/* =========================================================

   25 — SUCCESS

========================================================= */



.success-box{

    padding:45px;



    border-radius:28px;



    background:#fff;



    border:

        1px solid var(--line);



    text-align:center;



    box-shadow:var(--shadow);

}



.success-box h1{

    margin:0 0 12px;

}





/* =========================================================

   26 — MODAL GENERIC

========================================================= */



.modal{

    position:fixed;

    inset:0;



    z-index:1000;



    display:none;



    place-items:center;



    padding:20px;



    background:

        rgba(4,8,14,.72);



    backdrop-filter:blur(8px);

}



.modal.active{

    display:grid;

}



.modal-box{

    width:min(100%,600px);



    max-height:90vh;



    overflow:auto;



    padding:30px;



    border-radius:24px;



    background:#fff;



    box-shadow:

        0 30px 90px rgba(0,0,0,.30);

}





/* =========================================================

   27 — FOOTER

========================================================= */



.footer,

.site-footer{

    position:relative;



    padding:65px 0 25px;



    background:#060b13;



    color:#fff;

}



.footer-main,

.footer-grid{

    display:grid;



    grid-template-columns:

        1.5fr

        repeat(3,minmax(0,1fr));



    gap:40px;

}



.footer-brand{

    max-width:360px;

}



.footer-brand .brand{

    margin-bottom:18px;

}



.footer-brand p{

    margin:0;



    color:#8996a5;



    font-size:12px;

    line-height:1.9;

}



.footer h3,

.site-footer h3{

    margin:0 0 15px;



    color:#f3f6f9;



    font-size:13px;

    font-weight:900;

}



.footer a:not(.brand),

.site-footer a{

    display:flex;

    align-items:center;



    gap:7px;



    margin:10px 0;



    color:#8d9aaa;



    font-size:11px;



    transition:

        color var(--transition),

        transform var(--transition);

}



.footer a:not(.brand):hover,

.site-footer a:hover{

    color:var(--gold-2);

}



.footer-channel{

    margin-top:20px!important;



    color:var(--gold-2)!important;



    font-weight:800;

}



.footer-channel svg{

    width:15px;

    height:15px;

}



.footer-bottom{

    display:flex;

    align-items:center;

    justify-content:space-between;



    gap:20px;



    margin-top:50px;

    padding-top:20px;



    border-top:

        1px solid rgba(255,255,255,.08);



    color:#657181;



    font-size:10px;

}





/* =========================================================

   28 — REVEAL ANIMATIONS

========================================================= */



.reveal{

    opacity:0;



    transform:

        translateY(18px);



    transition:

        opacity .7s ease,

        transform .7s cubic-bezier(.2,.75,.2,1);

}



.reveal.visible{

    opacity:1;



    transform:

        translateY(0);

}





/* =========================================================

   29 — LEGACY CALCULATOR SUPPORT

   Kept for inner pages only.

========================================================= */



.calculator{

    position:relative;



    padding:34px;



    border-radius:28px;



    background:var(--navy);



    color:#fff;



    box-shadow:var(--shadow);

}



.calculator-grid,

.calc-grid{

    display:grid;



    grid-template-columns:

        1fr 1fr;



    gap:40px;

}



.calc-copy h2{

    margin:12px 0 15px;



    font-size:

        clamp(28px,4vw,45px);



    line-height:1.15;

}



.calc-copy p{

    margin:0;



    color:#9eabb9;



    font-size:14px;

    line-height:1.9;

}



.calc-result{

    margin-top:28px;



    padding:24px;



    border:

        1px solid rgba(229,169,60,.20);



    border-radius:20px;



    background:

        rgba(229,169,60,.06);

}



.calc-price{

    color:var(--gold-2);



    font-size:38px;

    font-weight:950;

}



.calc-meta{

    display:flex;

    flex-direction:column;



    gap:5px;



    margin-top:7px;



    color:#8f9cab;



    font-size:11px;

}



.calc-form{

    display:flex;

    flex-direction:column;



    gap:17px;



    justify-content:center;

}



.form-row{

    display:grid;



    grid-template-columns:

        1fr 1fr;



    gap:15px;

}



.field{

    display:flex;

    flex-direction:column;



    gap:8px;



    min-width:0;

}



.field label,

.calculator label{

    color:#aab5c2;



    font-size:11px;

    font-weight:800;

}



.field input,

.field select,

.calculator input,

.calculator select{

    width:100%;

    min-width:0;



    min-height:52px;



    padding:0 15px;



    border:

        1px solid rgba(255,255,255,.12);



    border-radius:13px;



    background:

        rgba(255,255,255,.05);



    color:#fff;



    outline:none;



    transition:

        border-color var(--transition),

        box-shadow var(--transition);

}



.field input:focus,

.field select:focus,

.calculator input:focus,

.calculator select:focus{

    border-color:

        rgba(229,169,60,.55);



    box-shadow:

        0 0 0 4px rgba(229,169,60,.08);

}



.field select option,

.calculator select option{

    color:#111;

}





/* =========================================================

   30 — UTILITY CLASSES

========================================================= */



.text-center{

    text-align:center;

}



.hidden{

    display:none!important;

}





/* =========================================================

   31 — LARGE SCREENS

========================================================= */



@media (min-width:1400px){



    .container{

        width:min(

            calc(100% - 64px),

            1240px

        );

    }

}





/* =========================================================

   32 — TABLET

========================================================= */



@media (max-width:1100px){



    .container{

        width:min(

            calc(100% - 34px),

            var(--max)

        );

    }



    .site-header .nav{

        gap:20px;

    }



    .nav-links{

        gap:13px;

    }



    .nav-links > a:not(.btn){

        font-size:12px;

    }



    .nav-links > .btn-primary{

        padding-inline:14px;

        font-size:11px;

    }



    .brand svg,

    .brand img{

        max-width:165px;

    }



    .hero-grid{

        grid-template-columns:

            minmax(0,1fr)

            minmax(400px,520px);



        gap:35px;

    }



    .hero-visual{

        min-height:540px;

        padding:25px;

    }



    .hero-device{

        max-width:460px;

    }



    .path-grid,

    .path-grid-new{

        grid-template-columns:

            repeat(2,minmax(0,1fr));

    }



    .journey{

        grid-template-columns:

            repeat(2,minmax(0,1fr));



        row-gap:45px;

    }



    .journey-line{

        display:none;

    }



    .tools-showcase{

        gap:45px;

        padding:50px;

    }



    .footer-main,

    .footer-grid{

        grid-template-columns:

            repeat(2,minmax(0,1fr));

    }

}





/* =========================================================

   33 — TABLET / MOBILE

========================================================= */



@media (max-width:900px){



    /* ---------- Header ---------- */



    .site-header .nav{

        min-height:70px;

    }



    .menu-toggle{

        display:flex;

    }



    .nav-links{

        position:absolute;



        top:calc(100% + 1px);



        right:0;

        left:0;



        display:flex;

        flex-direction:column;

        align-items:stretch;



        gap:4px;



        min-width:0;



        padding:10px;



        border:

            1px solid rgba(16,23,34,.10);



        border-top:0;



        border-radius:

            0 0 20px 20px;



        background:

            rgba(250,248,243,.985);



        box-shadow:

            0 25px 50px rgba(8,13,23,.14);



        opacity:0;

        visibility:hidden;



        pointer-events:none;



        transform:

            translateY(-8px);



        transition:

            opacity var(--transition),

            transform var(--transition),

            visibility var(--transition);

    }



    .nav-links.open{

        opacity:1;



        visibility:visible;



        pointer-events:auto;



        transform:

            translateY(0);

    }



    .nav-links > a:not(.btn){

        width:100%;



        min-height:47px;



        justify-content:flex-start;



        padding:

            0 13px;



        border-radius:11px;



        font-size:13px;



        text-align:right;

    }



    .nav-links > a:not(.btn)::after{

        display:none;

    }



    .nav-links > a:not(.btn):hover,

    .nav-links > a:not(.btn).active{

        background:

            rgba(229,169,60,.09);



        color:var(--navy);

    }



    .nav-links > .btn-primary{

        width:100%;



        min-height:46px;



        margin-top:5px;



        justify-content:center;

    }





    /* ---------- Generic sections ---------- */



    .section{

        padding-block:76px;

    }



    .section-head{

        margin-bottom:38px;

    }



    .section-head h2{

        font-size:clamp(

            1.85rem,

            6vw,

            2.5rem

        );

    }



    .section-title-row{

        align-items:flex-start;



        flex-direction:column;



        gap:18px;



        margin-bottom:34px;

    }



    .section-grid{

        grid-template-columns:

            repeat(6,minmax(0,1fr));

    }





    /* ---------- Hero ---------- */



    .hero-new{

        padding-top:60px;

    }



    .hero-grid{

        grid-template-columns:1fr;



        min-height:auto;

    }



    .hero-copy{

        text-align:center;

        padding-bottom:0;

    }



    .hero-copy h1{

        margin-inline:auto;

    }



    .hero-copy .lead{

        margin-inline:auto;

    }



    .hero-actions{

        justify-content:center;

    }



    .hero-trust{

        justify-content:center;

    }



    .hero-visual{

        margin-top:20px;

    }





    /* ---------- Section links ---------- */



    .section-head{

        display:block;

    }



    .section-head > a{

        margin-top:18px;

    }



    .section-head > p{

        margin-top:15px;

    }





    /* ---------- Grids ---------- */



    .video-grid,

    .article-grid,

    .pricing-grid{

        grid-template-columns:

            repeat(2,minmax(0,1fr));

    }





    /* ---------- Tools ---------- */



    .tools-showcase{

        grid-template-columns:1fr;

    }



    .tools-showcase-copy{

        max-width:650px;

    }



    .tools-stack{

        min-height:320px;

    }





    /* ---------- CTA ---------- */



    .split-cta{

        align-items:flex-start;



        flex-direction:column;

    }



    .final-cta-action{

        align-items:flex-start;

    }





    /* ---------- Calculator ---------- */



    .calculator-grid,

    .calc-grid{

        grid-template-columns:1fr;

    }

}





/* =========================================================

   34 — MOBILE

========================================================= */



@media (max-width:600px){



    .container{

        width:calc(100% - 28px);

    }





    /* ---------- Top strip ---------- */



    .top-strip-inner{

        justify-content:center;

    }



    .top-strip-inner span:last-child{

        display:none;

    }





    /* ---------- Header ---------- */



    .site-header .nav{

        min-height:68px;



        gap:12px;

    }



    .brand{

        min-width:0;

    }



    .brand svg,

    .brand img{

        max-width:145px;

        max-height:42px;

    }



    .menu-toggle{

        width:42px;

        height:42px;



        flex-basis:42px;

    }



    .nav-links{

        right:0;

        left:0;



        border-radius:

            0 0 17px 17px;

    }





    /* ---------- Hero ---------- */



    .hero-new{

        min-height:auto;



        padding:

            48px 0 0;

    }



    .hero-new::after{

        width:420px;

        height:420px;



        right:-260px;

        top:-120px;

    }



    .hero-copy h1{

        font-size:42px;



        letter-spacing:-.04em;

    }



    .hero-copy .lead{

        font-size:15px;

        line-height:1.85;

    }



    .hero-actions{

        flex-direction:column;

        align-items:stretch;

    }



    .hero-actions .btn{

        width:100%;

    }



    .hero-trust{

        display:grid;



        grid-template-columns:

            repeat(2,minmax(0,1fr));



        gap:15px 0;

    }



    .hero-trust-item,

    .hero-trust-item:first-child{

        min-width:0;



        padding:

            0 10px;



        border-left:

            1px solid rgba(255,255,255,.08);

    }



    .hero-trust-item:nth-child(odd){

        border-left:0;

    }



    .hero-visual{

        min-height:445px;



        margin-top:25px;



        padding:17px;



        border-radius:27px;

    }



    .hero-visual::before{

        inset:7px;

        border-radius:20px;

    }



    .hero-device{

        min-height:320px;



        padding:12px;



        border-radius:20px;



        transform:

            rotateY(-5deg)

            rotateX(2deg)

            rotateZ(-1.5deg)

            translateZ(10px);

    }



    .device-screen{

        min-height:270px;



        padding:

            25px 19px 20px;



        border-radius:14px;

    }



    .screen-title{

        font-size:17px;



        padding:12px 0;

    }



    .screen-label{

        margin-bottom:15px;



        font-size:8px;

    }



    .screen-footer{

        margin-top:18px;



        font-size:8px;

    }



    .hero-floating{

        padding:10px 11px;



        gap:8px;



        border-radius:12px;

    }



    .hero-floating-one{

        left:-5px;

        top:85px;

    }



    .hero-floating-two{

        right:-5px;

        bottom:85px;

    }



    .hero-floating-three{

        right:12px;

        top:48px;

    }



    .floating-icon,

    .floating-number{

        width:26px;

        height:26px;

    }



    .hero-floating strong{

        font-size:11px;

    }



    .hero-floating small{

        font-size:8px;

    }



    .hero-bottom-line{

        margin-top:35px;

    }



    .hero-bottom-line .container{

        min-height:48px;



        overflow:hidden;



        justify-content:flex-start;



        gap:13px;



        white-space:nowrap;



        font-size:8px;

    }



    .hero-bottom-line span:nth-of-type(n+4),

    .hero-bottom-line i:nth-of-type(n+4){

        display:none;

    }





    /* ---------- Sections ---------- */



    .section{

        padding:65px 0;

    }



    .section-head{

        margin-bottom:30px;

    }



    .section-kicker{

        margin-bottom:11px;



        font-size:.7rem;

    }



    .section-kicker::before{

        width:17px;

    }



    .section-head h2{

        font-size:31px;



        line-height:1.28;



        letter-spacing:-.025em;

    }



    .section-head p{

        margin-top:13px;



        font-size:.92rem;

        line-height:1.85;

    }



    .section-title-row{

        margin-bottom:28px;

    }



    .section-title-row > a{

        font-size:.84rem;

    }





    /* ---------- Generic cards ---------- */



    .section-grid{

        grid-template-columns:

            minmax(0,1fr);



        gap:16px;

    }



    .card{

        border-radius:18px;

    }



    .card-body{

        padding:22px;

    }



    .card-title{

        font-size:1.05rem;

    }



    .card-text{

        font-size:.9rem;

        line-height:1.8;

    }





    /* ---------- Path ---------- */



    .path-grid,

    .path-grid-new,

    .article-grid,

    .video-grid,

    .pricing-grid,

    .form-grid{

        grid-template-columns:1fr;

    }



    .path-card{

        min-height:0;

        padding:24px;

    }



    .path-icon{

        margin-top:24px;

    }





    /* =====================================================

       JOURNEY — MOBILE REBUILT

       يمنع مشكلة الفراغات والتوزيع الغلط القديمة

    ===================================================== */



    .journey{

        grid-template-columns:1fr;



        gap:0;



        padding-top:0;

    }



    .journey-step{

        position:relative;



        display:block;



        min-height:0;



        padding:

            0 0 30px 64px;



        text-align:right;

    }



    .journey-step:last-child{

        padding-bottom:0;

    }



    .journey-number{

        position:absolute;



        top:0;

        left:0;



        width:48px;

        height:48px;



        margin:0;



        box-shadow:none;



        background:

            linear-gradient(

                145deg,

                #faf7ef,

                #eee8db

            );



        z-index:2;

    }



    .journey-step:not(:last-child)::after{

        content:"";



        position:absolute;



        left:23px;

        top:56px;

        bottom:0;



        width:1px;



        background:

            linear-gradient(

                180deg,

                rgba(229,169,60,.35),

                rgba(229,169,60,.08)

            );

    }



    .journey-step small{

        display:block;



        padding-top:3px;



        font-size:9px;

    }



    .journey-step h3{

        margin:7px 0 7px;



        font-size:18px;

        line-height:1.45;

    }



    .journey-step p{

        max-width:none;



        margin:0;



        font-size:13px;

        line-height:1.85;

    }





    /* ---------- Videos ---------- */



    .video-card{

        border-radius:18px;

    }



    .play{

        width:52px;

        height:52px;

    }



    .video-modal{

        padding:12px;

    }



    .video-modal-dialog{

        padding:7px;

        border-radius:16px;

    }



    .video-close{

        top:-12px;

        left:-6px;



        width:38px;

        height:38px;

    }





    /* ---------- Articles ---------- */



    .article-body{

        padding:20px;

    }





    /* ---------- Tools ---------- */



    .tools-showcase{

        min-height:auto;



        padding:35px 24px;



        border-radius:24px;

    }



    .tools-showcase-copy h2{

        font-size:34px;

    }



    .tools-stack{

        min-height:275px;

    }



    .tool-window{

        min-height:215px;



        transform:

            rotateY(-4deg)

            rotateZ(-1deg);

    }



    .tool-window-content{

        padding:30px 20px;

    }



    .tool-window-content strong{

        font-size:16px;

    }



    .tool-badge{

        min-width:80px;



        padding:10px 12px;

    }



    .tool-badge strong{

        font-size:15px;

    }



    .tool-badge-ai{

        right:0;

        top:7%;

    }



    .tool-badge-qa{

        left:0;

        bottom:8%;

    }





    /* ---------- CTA ---------- */



    .final-cta-section{

        padding-top:25px;

        padding-bottom:65px;

    }



    .split-cta{

        min-height:auto;



        padding:38px 25px;



        border-radius:24px;



        gap:30px;

    }



    .split-cta h2{

        font-size:32px;

    }



    .final-cta-action{

        width:100%;

    }



    .final-cta-action .btn{

        width:100%;

    }





    /* ---------- Stats ---------- */



    .stats-grid{

        grid-template-columns:

            repeat(2,minmax(0,1fr));

    }



    .stat{

        padding:20px;

    }



    .stat strong{

        font-size:30px;

    }



    .stat span{

        font-size:12px;

    }





    /* ---------- Footer ---------- */



    .footer,

    .site-footer{

        padding-top:52px;

    }



    .footer-main,

    .footer-grid{

        grid-template-columns:

            repeat(2,minmax(0,1fr));



        gap:25px;

    }



    .footer-brand{

        grid-column:1/-1;



        max-width:none;

    }



    .footer-bottom{

        align-items:flex-start;



        flex-direction:column;



        gap:8px;

    }





    /* ---------- Forms ---------- */



    .form-group.full{

        grid-column:auto;

    }



    .form-row{

        grid-template-columns:1fr;

    }



    .calculator{

        padding:24px 18px;

    }



    .calc-price{

        font-size:30px;

    }





    /* ---------- Page hero ---------- */



    .page-hero{

        padding:60px 0;

    }



    .page-hero h1{

        font-size:40px;

    }



    .page-hero p{

        font-size:14px;

    }





    /* ---------- Article page ---------- */



    .article-page h1{

        font-size:36px;

    }



    .article-page .article-intro{

        font-size:15px;

    }



    .article-content{

        margin-top:35px;

    }



    .article-content h2{

        margin-top:36px;



        font-size:26px;

    }



    .article-content h3{

        font-size:20px;

    }



    .article-content p,

    .article-content li{

        font-size:15px;

        line-height:1.95;

    }





    /* ---------- Success ---------- */



    .success-box{

        padding:30px 20px;



        border-radius:22px;

    }





    /* ---------- Modal ---------- */



    .modal{

        padding:12px;

    }



    .modal-box{

        padding:22px 18px;



        border-radius:20px;

    }





    /* ---------- Calculator ---------- */



    .calculator{

        border-radius:22px;

    }

}





/* =========================================================

   35 — VERY SMALL MOBILE

========================================================= */



@media (max-width:380px){



    .container{

        width:calc(100% - 24px);

    }



    .site-header .nav{

        min-height:64px;

    }



    .brand svg,

    .brand img{

        max-width:132px;

        max-height:39px;

    }



    .menu-toggle{

        width:40px;

        height:40px;



        flex-basis:40px;



        border-radius:12px;

    }



    .btn{

        padding-inline:14px;

    }



    .btn-group{

        gap:8px;

    }



    .section{

        padding-block:54px;

    }



    .card-body{

        padding:19px;

    }



    .hero-copy h1{

        font-size:37px;

    }



    .hero-visual{

        min-height:410px;

        padding:13px;

    }



    .hero-device{

        min-height:290px;

    }



    .device-screen{

        min-height:245px;



        padding:

            20px 15px 17px;

    }



    .screen-title{

        font-size:15px;

    }



    .hero-floating-one{

        left:-7px;

    }



    .hero-floating-two{

        right:-7px;

    }



    .hero-floating-three{

        right:5px;

    }



    .tools-showcase-copy h2,

    .split-cta h2{

        font-size:29px;

    }



    .journey-step{

        padding-left:58px;

    }



    .journey-number{

        width:44px;

        height:44px;

    }



    .journey-step:not(:last-child)::after{

        left:21px;

        top:52px;

    }



    .page-hero h1{

        font-size:36px;

    }



    .stat{

        padding:17px 14px;

    }



    .stat strong{

        font-size:27px;

    }

}





/* =========================================================

   36 — REDUCED MOTION

========================================================= */



@media (prefers-reduced-motion:reduce){



    html{

        scroll-behavior:auto;

    }



    *,

    *::before,

    *::after{

        animation-duration:.01ms!important;

        animation-iteration-count:1!important;

        transition-duration:.01ms!important;

    }



    .reveal{

        opacity:1;

        transform:none;

    }

}

/* Hero / buttons */

.btn .icon {

    width: 16px;

    height: 16px;

    min-width: 16px;

    min-height: 16px;

    max-width: 16px;

    max-height: 16px;

    flex-basis: 16px;

}





/* Path cards */

.path-link .icon {

    width: 14px;

    height: 14px;

    min-width: 14px;

    min-height: 14px;

    max-width: 14px;

    max-height: 14px;

    flex-basis: 14px;

}





/* Article links */

.card-read .icon {

    width: 14px;

    height: 14px;

    min-width: 14px;

    min-height: 14px;

    max-width: 14px;

    max-height: 14px;

    flex-basis: 14px;

}





/* Text links */

.text-link .icon {

    width: 14px;

    height: 14px;

    min-width: 14px;

    min-height: 14px;

    max-width: 14px;

    max-height: 14px;

    flex-basis: 14px;

}





/* Section heading links */

.section-head > a .icon {

    width: 15px;

    height: 15px;

    min-width: 15px;

    min-height: 15px;

    max-width: 15px;

    max-height: 15px;

    flex-basis: 15px;

}





/* Hero floating icon */

.floating-icon .icon {

    width: 18px;

    height: 18px;

    min-width: 18px;

    min-height: 18px;

    max-width: 18px;

    max-height: 18px;

    flex-basis: 18px;

}





/* Never allow inline SVGs inside cards to become layout-sized */

.article-card svg,

.video-card svg,

.path-card svg,

.hero-copy svg,

.final-cta-action svg,

.tools-showcase-copy svg {

    flex-shrink: 0;

}





/* Keep arrow icons visually consistent */

.path-link,

.card-read,

.text-link,

.section-head > a,

.btn {

    align-items: center;

}





/* =========================================================

   JOURNEY LINE

========================================================= */



.journey {

    position: relative;

}



.journey-line {

    z-index: 0;

}



.journey-step {

    position: relative;

    z-index: 1;

}



.journey-number {

    position: relative;

    z-index: 2;

}





/* =========================================================

   TOOLS CARD — RTL/LTR CONTROL

========================================================= */



.path-card[href="/tools"] p {

    direction: rtl;

    text-align: right;

}



.path-card[href="/tools"] p {

    unicode-bidi: plaintext;

}





/* English technical terms remain visually natural */

.path-card[href="/tools"] {

    text-align: right;

}





/* =========================================================

   ARTICLE / VIDEO CARD OVERFLOW SAFETY

========================================================= */



.article-card,

.video-card {

    overflow: hidden;

}



.article-thumb,

.video-thumb {

    overflow: hidden;

}



.article-thumb svg,

.video-thumb svg {

    max-width: 100%;

}





/* =========================================================

   RESPONSIVE ICON SAFETY

========================================================= */



@media (max-width: 700px) {



    .icon {

        width: 18px;

        height: 18px;

        min-width: 18px;

        min-height: 18px;

        max-width: 18px;

        max-height: 18px;

    }



    .path-link .icon,

    .card-read .icon,

    .text-link .icon {

        width: 14px;

        height: 14px;

        min-width: 14px;

        min-height: 14px;

        max-width: 14px;

        max-height: 14px;

    }
}

/* =========================================================

   BTAA TARJAMA — PREMIUM PATH v2

   Fully isolated from old .path-* styles

========================================================= */



.bt-path-section{

    position:relative;

    overflow:hidden;

    padding-top:105px;

    padding-bottom:105px;

    background:#fff;

}



.bt-path-section .container{

    position:relative;

    z-index:2;

}



.bt-path-head{

    position:relative;

    z-index:3;

    margin-bottom:42px;

}



.bt-path-head h2 span{

    color:var(--gold-2);

}





/* =========================================================

   GRID

========================================================= */



.bt-path-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:16px;

}





/* =========================================================

   CARD

========================================================= */



.bt-path-card{

    --accent:229,169,60;



    position:relative;



    display:flex;

    flex-direction:column;



    min-height:445px;



    padding:25px 24px 24px;



    overflow:hidden;



    isolation:isolate;



    color:#fff;

    text-decoration:none;



    border:1px solid rgba(255,255,255,.08);

    border-radius:25px;



    background:

        radial-gradient(

            circle at 100% 0%,

            rgba(var(--accent),.16),

            transparent 34%

        ),

        linear-gradient(

            145deg,

            #132238 0%,

            #08111e 72%

        );



    box-shadow:

        0 18px 45px rgba(8,13,23,.11),

        inset 0 1px 0 rgba(255,255,255,.045);



    transform:translateY(0);



    transition:

        transform .4s cubic-bezier(.2,.8,.2,1),

        box-shadow .4s ease,

        border-color .4s ease;

}



.bt-path-card:hover{

    transform:translateY(-8px);



    border-color:

        rgba(var(--accent),.32);



    box-shadow:

        0 28px 60px rgba(8,13,23,.19),

        inset 0 1px 0 rgba(255,255,255,.07);

}





/* =========================================================

   CARD VARIANTS

========================================================= */



.bt-path-card-1{

    --accent:229,169,60;

}



.bt-path-card-2{

    --accent:198,151,77;

}



.bt-path-card-3{

    --accent:110,157,177;

}



.bt-path-card-4{

    --accent:164,133,201;

}





/* =========================================================

   NUMBER

========================================================= */



.bt-path-number{

    position:relative;

    z-index:3;



    display:flex;

    align-items:center;

    justify-content:center;



    width:34px;

    height:34px;



    border:1px solid rgba(255,255,255,.11);

    border-radius:50%;



    color:rgba(255,255,255,.55);



    font-size:10px;

    font-weight:800;

    letter-spacing:.08em;



    background:rgba(255,255,255,.025);

}





/* =========================================================

   LABEL

========================================================= */



.bt-path-label{

    position:absolute;

    top:31px;

    right:24px;



    color:rgba(255,255,255,.3);



    font-size:8px;

    font-weight:900;



    letter-spacing:.15em;

}





/* =========================================================

   CUSTOM SYMBOLS

   No generic SVG icons

========================================================= */



.bt-path-symbol{

    position:relative;



    display:flex;

    align-items:center;

    justify-content:center;



    width:68px;

    height:68px;



    margin-top:42px;

    margin-bottom:30px;



    border:1px solid rgba(var(--accent),.22);

    border-radius:20px;



    background:

        rgba(var(--accent),.055);



    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.04),

        0 12px 30px rgba(0,0,0,.12);



    transition:

        transform .45s cubic-bezier(.2,.8,.2,1),

        border-color .4s ease,

        background .4s ease;

}



.bt-path-card:hover .bt-path-symbol{

    transform:translateY(-4px);



    border-color:

        rgba(var(--accent),.42);



    background:

        rgba(var(--accent),.09);

}

/* LANGUAGE */



.bt-path-symbol-language{

    gap:5px;

}



.bt-path-symbol-language span{

    display:block;



    width:4px;



    border-radius:10px;



    background:rgb(var(--accent));



    box-shadow:

        0 0 12px rgba(var(--accent),.22);



    transition:

        height .35s ease,

        transform .35s ease;

}



.bt-path-symbol-language span:nth-child(1){

    height:19px;

}



.bt-path-symbol-language span:nth-child(2){

    height:29px;

}



.bt-path-symbol-language span:nth-child(3){

    height:22px;

}



.bt-path-card:hover

.bt-path-symbol-language span:nth-child(1){

    height:25px;

}



.bt-path-card:hover

.bt-path-symbol-language span:nth-child(2){

    height:21px;

}



.bt-path-card:hover

.bt-path-symbol-language span:nth-child(3){

    height:30px;

}





/* TRANSLATION */



.bt-path-symbol-translation{

    flex-direction:column;

    gap:7px;

}



.bt-path-symbol-translation span{

    display:block;



    width:30px;

    height:4px;



    border-radius:10px;



    background:rgb(var(--accent));



    box-shadow:

        0 0 12px rgba(var(--accent),.2);



    transition:

        width .4s ease,

        transform .4s ease;

}



.bt-path-symbol-translation span:first-child{

    width:23px;

    transform:translateX(-5px);

}



.bt-path-symbol-translation span:last-child{

    width:31px;

    transform:translateX(4px);

}



.bt-path-card:hover

.bt-path-symbol-translation span:first-child{

    width:31px;

    transform:translateX(0);

}



.bt-path-card:hover

.bt-path-symbol-translation span:last-child{

    width:23px;

    transform:translateX(0);

}





/* CAREER */



.bt-path-symbol-career{

    flex-direction:column;

    gap:5px;

}



.bt-path-symbol-career span{

    display:block;



    width:27px;

    height:4px;



    border-radius:10px;



    background:rgb(var(--accent));



    box-shadow:

        0 0 12px rgba(var(--accent),.18);

}



.bt-path-symbol-career span:nth-child(1){

    width:17px;

}



.bt-path-symbol-career span:nth-child(3){

    width:21px;

}





/* AI */



.bt-path-symbol-ai{

    display:grid;



    grid-template-columns:repeat(2,8px);

    grid-template-rows:repeat(2,8px);



    gap:5px;

}



.bt-path-symbol-ai span{

    display:block;



    width:8px;

    height:8px;



    border-radius:2px;



    background:rgb(var(--accent));



    box-shadow:

        0 0 14px rgba(var(--accent),.25);



    transition:

        transform .4s ease,

        opacity .4s ease;

}



.bt-path-card:hover

.bt-path-symbol-ai span:nth-child(1){

    transform:translate(-3px,-3px);

}



.bt-path-card:hover

.bt-path-symbol-ai span:nth-child(2){

    transform:translate(3px,-3px);

}



.bt-path-card:hover

.bt-path-symbol-ai span:nth-child(3){

    transform:translate(-3px,3px);

}



.bt-path-card:hover

.bt-path-symbol-ai span:nth-child(4){

    transform:translate(3px,3px);

}





/* =========================================================

   CONTENT

========================================================= */



.bt-path-content{

    position:relative;

    z-index:3;



    margin-top:auto;



    padding-bottom:45px;

}



.bt-path-overline{

    display:block;



    margin-bottom:9px;



    color:rgba(var(--accent),.9);



    font-size:9px;

    font-weight:900;



    line-height:1.5;



    letter-spacing:.16em;

}



.bt-path-content h3{

    margin:0 0 13px;



    color:#fff;



    font-size:26px;

    font-weight:800;



    line-height:1.45;

}



.bt-path-content p{

    max-width:285px;



    margin:0;



    color:rgba(255,255,255,.57);



    font-size:12px;

    font-weight:400;



    line-height:2;



    letter-spacing:0;

}





/* =========================================================

   ARROW

========================================================= */



.bt-path-arrow{

    position:absolute;



    left:23px;

    bottom:23px;



    z-index:5;



    display:flex;

    align-items:center;

    justify-content:center;



    width:36px;

    height:36px;



    border:1px solid rgba(255,255,255,.12);

    border-radius:50%;



    color:rgba(255,255,255,.72);



    background:rgba(255,255,255,.035);



    transition:

        transform .4s cubic-bezier(.2,.8,.2,1),

        color .3s ease,

        border-color .3s ease,

        background .3s ease;

}



.bt-path-arrow svg{

    width:13px !important;

    height:13px !important;



    min-width:13px !important;

    min-height:13px !important;



    max-width:13px !important;

    max-height:13px !important;



    flex:0 0 13px !important;



    stroke:currentColor !important;

}



.bt-path-card:hover .bt-path-arrow{

    transform:translateX(-4px);



    color:#fff;



    border-color:

        rgba(var(--accent),.42);



    background:

        rgba(var(--accent),.12);

}





/* =========================================================

   SUBTLE CARD LIGHT

========================================================= */



.bt-path-card::after{

    content:"";



    position:absolute;



    width:170px;

    height:170px;



    right:-90px;

    bottom:-100px;



    border-radius:50%;



    background:

        radial-gradient(

            circle,

            rgba(var(--accent),.13),

            transparent 70%

        );



    pointer-events:none;



    transition:

        transform .6s ease,

        opacity .4s ease;

}



.bt-path-card:hover::after{

    transform:scale(1.4);

}





/* =========================================================

   RESPONSIVE

========================================================= */



@media (max-width:1100px){



    .bt-path-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }



    .bt-path-card{

        min-height:430px;

    }



}





@media (max-width:600px){



    .bt-path-section{

        padding-top:80px;

        padding-bottom:80px;

    }



    .bt-path-head{

        margin-bottom:30px;

    }



    .bt-path-grid{

        grid-template-columns:1fr;

        gap:14px;

    }



    .bt-path-card{

        min-height:395px;



        padding:22px;

        border-radius:22px;

    }



    .bt-path-label{

        top:28px;

        right:22px;

    }



    .bt-path-symbol{

        width:64px;

        height:64px;



        margin-top:36px;

        margin-bottom:25px;

    }



    .bt-path-content{

        padding-bottom:43px;

    }



    .bt-path-content h3{

        font-size:24px;

        line-height:1.45;

    }



    .bt-path-content p{

        max-width:100%;



        font-size:12px;

        line-height:1.95;

    }



    .bt-path-arrow{

        left:20px;

        bottom:20px;

    }



    .bt-path-card:hover{

        transform:translateY(-5px);

    }



}





@media (prefers-reduced-motion:reduce){



    .bt-path-card,

    .bt-path-card *,

    .bt-path-card::after{

        transition:none !important;

        animation:none !important;

    }
}

/* =========================================================
   BTAA TARJAMA — PATH + SVG ISOLATION FIX

   Fixes oversized arrows and prevents Path styles
   from affecting sections below it.
========================================================= */

.bt-path-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}



.bt-path-section .path-arrow,

.bt-path-section .path-icon,

.bt-path-section .path-icon-wrap,

.bt-path-section .path-card {

    all: unset;

}





/* =========================================================

   IMPORTANT:

   The current HTML uses the original .path-* classes.

   Lock every Path arrow SVG to a small fixed size.

========================================================= */



.path-section .path-arrow {

    position: absolute !important;

    width: 42px !important;

    height: 42px !important;

    min-width: 42px !important;

    min-height: 42px !important;

    max-width: 42px !important;

    max-height: 42px !important;



    display: flex !important;

    align-items: center !important;

    justify-content: center !important;



    overflow: hidden !important;

    box-sizing: border-box !important;



    flex: 0 0 42px !important;

}



.path-section .path-arrow svg {

    display: block !important;



    width: 14px !important;

    height: 14px !important;



    min-width: 14px !important;

    min-height: 14px !important;



    max-width: 14px !important;

    max-height: 14px !important;



    flex: 0 0 14px !important;



    overflow: hidden !important;

}





/* =========================================================

   Lock ALL Path SVGs

========================================================= */



.path-section .path-icon svg {

    display: block !important;



    width: 28px !important;

    height: 28px !important;



    min-width: 28px !important;

    min-height: 28px !important;



    max-width: 28px !important;

    max-height: 28px !important;



    flex: 0 0 28px !important;

}



.path-section .path-icon {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;



    width: 28px !important;

    height: 28px !important;

}





/* =========================================================

   Prevent global SVG rules from expanding Path elements

========================================================= */



.path-section svg {

    box-sizing: border-box !important;

}



.path-section .path-arrow,

.path-section .path-icon {

    line-height: 0 !important;

}





/* =========================================================

   PROTECT EVERYTHING AFTER PATH

========================================================= */



.quick-path-section,

.video-section,

.tools-showcase-section,

.final-cta-section {

    position: relative;

    isolation: isolate;

    clear: both;

}



.quick-path-section::before,

.video-section::before,

.tools-showcase-section::before,

.final-cta-section::before {

    content: none !important;

}





/* =========================================================

   Protect section links/icons from old Path rules

========================================================= */



.quick-path-section .section-head > a,

.video-section .section-head > a,

.tools-showcase-section a,

.final-cta-section a {

    position: relative !important;

    z-index: 2 !important;

}



.quick-path-section .section-head > a svg,

.video-section .section-head > a svg,

.tools-showcase-section a svg,

.final-cta-section a svg {

    width: 16px !important;

    height: 16px !important;



    min-width: 16px !important;

    min-height: 16px !important;



    max-width: 16px !important;

    max-height: 16px !important;



    flex: 0 0 16px !important;

}





/* =========================================================

   FINAL SVG SAFETY

========================================================= */



.quick-path-section svg,

.video-section svg,

.tools-showcase-section svg,

.final-cta-section svg {

    overflow: hidden !important;

    box-sizing: border-box !important;

}

/* =========================================================

   BTAA TARJAMA — PREMIUM ARTICLES SECTION

   Scoped only to the homepage Articles section

========================================================= */



.quick-path-section .article-grid-new{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:22px;



    margin-top:38px;

}





/* =========================================================

   ARTICLE CARD

========================================================= */



.quick-path-section .article-card-new{

    position:relative;



    display:flex;

    flex-direction:column;



    min-width:0;

    min-height:100%;



    overflow:hidden;



    color:#101722;

    text-decoration:none;



    border:1px solid rgba(13,27,42,.09);

    border-radius:24px;



    background:#fff;



    box-shadow:

        0 12px 35px rgba(8,13,23,.07),

        0 2px 6px rgba(8,13,23,.035);



    transform:translateY(0);



    transition:

        transform .35s cubic-bezier(.2,.8,.2,1),

        box-shadow .35s ease,

        border-color .35s ease;

}



.quick-path-section .article-card-new:hover{

    transform:translateY(-7px);



    border-color:rgba(229,169,60,.35);



    box-shadow:

        0 24px 55px rgba(8,13,23,.13),

        0 5px 12px rgba(8,13,23,.05);

}





/* =========================================================

   ARTICLE IMAGE

========================================================= */



.quick-path-section .article-card-new .article-thumb{

    position:relative;



    width:100%;

    height:220px;



    overflow:hidden;



    background:

        linear-gradient(

            135deg,

            #132238 0%,

            #08111e 100%

        );

}



.quick-path-section .article-card-new .article-thumb img{

    display:block;



    width:100%;

    height:100%;



    object-fit:cover;



    transform:scale(1);



    transition:

        transform .6s cubic-bezier(.2,.8,.2,1);

}



.quick-path-section .article-card-new:hover .article-thumb img{

    transform:scale(1.045);

}





/* =========================================================

   IMAGE OVERLAY

========================================================= */



.quick-path-section .article-card-new .article-thumb::after{

    content:"";



    position:absolute;



    inset:0;



    pointer-events:none;



    background:

        linear-gradient(

            180deg,

            rgba(8,13,23,0) 45%,

            rgba(8,13,23,.18) 100%

        );

}





/* =========================================================

   FALLBACK VISUAL

========================================================= */



.quick-path-section .article-card-new .article-visual{

    position:relative;



    display:flex;

    flex-direction:column;

    justify-content:space-between;



    width:100%;

    height:100%;



    padding:24px;



    overflow:hidden;



    color:#fff;



    background:

        radial-gradient(

            circle at 85% 15%,

            rgba(229,169,60,.25),

            transparent 30%

        ),

        linear-gradient(

            135deg,

            #172940 0%,

            #08111e 100%

        );

}



.quick-path-section .article-card-new .article-visual::before{

    content:"";



    position:absolute;



    width:180px;

    height:180px;



    left:-70px;

    bottom:-90px;



    border-radius:50%;



    border:1px solid rgba(229,169,60,.18);



    box-shadow:

        0 0 0 25px rgba(229,169,60,.025),

        0 0 0 50px rgba(229,169,60,.018);



    pointer-events:none;

}



.quick-path-section .article-card-new .article-visual span{

    position:relative;

    z-index:1;



    color:rgba(255,255,255,.38);



    font-size:42px;

    font-weight:700;



    line-height:1;

}



.quick-path-section .article-card-new .article-visual strong{

    position:relative;

    z-index:1;



    align-self:flex-start;



    padding:7px 11px;



    color:#e5a93c;



    font-size:10px;

    font-weight:700;



    letter-spacing:.08em;



    border:1px solid rgba(229,169,60,.25);

    border-radius:999px;



    background:rgba(229,169,60,.08);

}





/* =========================================================

   VISUAL VARIATIONS

========================================================= */



.quick-path-section .article-card-new .article-visual-2{

    background:

        radial-gradient(

            circle at 15% 20%,

            rgba(110,157,177,.24),

            transparent 32%

        ),

        linear-gradient(

            135deg,

            #152a36 0%,

            #08111e 100%

        );

}



.quick-path-section .article-card-new .article-visual-3{

    background:

        radial-gradient(

            circle at 85% 20%,

            rgba(164,133,201,.24),

            transparent 32%

        ),

        linear-gradient(

            135deg,

            #242039 0%,

            #08111e 100%

        );

}





/* =========================================================

   ARTICLE BODY

========================================================= */



.quick-path-section .article-card-new .article-body{

    display:flex;

    flex-direction:column;



    flex:1;



    padding:22px 22px 21px;

}





/* =========================================================

   META

========================================================= */



.quick-path-section .article-card-new .article-meta{

    display:flex;

    align-items:center;

    gap:8px;



    min-height:20px;



    margin-bottom:12px;



    color:#8b94a1;



    font-size:11px;

    font-weight:500;



    line-height:1.5;

}



.quick-path-section .article-card-new .article-meta span:first-child{

    color:#b07c22;



    font-weight:700;

}





/* =========================================================

   TITLE

========================================================= */



.quick-path-section .article-card-new h3{

    margin:0 0 11px;



    color:#111a27;



    font-family:"Readex Pro","IBM Plex Sans Arabic",sans-serif;



    font-size:20px;

    font-weight:700;



    line-height:1.65;



    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

    overflow:hidden;



    transition:color .25s ease;

}



.quick-path-section .article-card-new:hover h3{

    color:#9a6b1d;

}





/* =========================================================

   EXCERPT

========================================================= */



.quick-path-section .article-card-new p{

    margin:0;



    color:#6f7885;



    font-size:13px;

    font-weight:400;



    line-height:1.9;



    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:3;

    overflow:hidden;

}





/* =========================================================

   READ CTA

========================================================= */



.quick-path-section .article-card-new .card-read{

    display:flex;

    align-items:center;

    gap:8px;



    margin-top:auto;

    padding-top:19px;



    color:#9a6b1d;



    font-size:12px;

    font-weight:700;



    line-height:1.5;

}



.quick-path-section .article-card-new .card-read svg{

    display:block !important;



    width:14px !important;

    height:14px !important;



    min-width:14px !important;

    min-height:14px !important;



    max-width:14px !important;

    max-height:14px !important;



    flex:0 0 14px !important;



    overflow:hidden !important;



    transition:

        transform .3s ease;

}



.quick-path-section .article-card-new:hover .card-read svg{

    transform:translateX(-4px);

}





/* =========================================================

   TABLET

========================================================= */



@media (max-width:900px){



    .quick-path-section .article-grid-new{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }



    .quick-path-section .article-card-new .article-thumb{

        height:205px;

    }



}





/* =========================================================

   MOBILE

========================================================= */



@media (max-width:600px){



    .quick-path-section .article-grid-new{

        grid-template-columns:1fr;

        gap:16px;



        margin-top:30px;

    }



    .quick-path-section .article-card-new{

        border-radius:21px;

    }



    .quick-path-section .article-card-new .article-thumb{

        height:210px;

    }



    .quick-path-section .article-card-new .article-body{

        padding:20px 19px 19px;

    }



    .quick-path-section .article-card-new h3{

        font-size:18px;

        line-height:1.7;

    }



    .quick-path-section .article-card-new p{

        font-size:13px;

        line-height:1.9;

    }



}





/* =========================================================

   REDUCED MOTION

========================================================= */



@media (prefers-reduced-motion:reduce){



    .quick-path-section .article-card-new,

    .quick-path-section .article-card-new *,

    .quick-path-section .article-card-new::before,

    .quick-path-section .article-card-new::after{

        transition:none !important;

        animation:none !important;

    }
}

/* =========================================================
   BTAA TARJAMA — FOOTER SVG SIZE FIX
   Scoped only to Footer icons
========================================================= */

.site-footer svg,
footer svg {
    display: block !important;

    width: 18px !important;
    height: 18px !important;

    min-width: 18px !important;
    min-height: 18px !important;

    max-width: 18px !important;
    max-height: 18px !important;

    flex: 0 0 18px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
}
/* =========================================================
   BTAA TARJAMA — FOOTER MAIL ICON FIX
========================================================= */

.footer a[href^="mailto:"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.footer a[href^="mailto:"] svg {
    display: block !important;

    width: 18px !important;
    height: 18px !important;

    min-width: 18px !important;
    min-height: 18px !important;

    max-width: 18px !important;
    max-height: 18px !important;

    flex: 0 0 18px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
}
/* Sponsored placements */
.sponsored-section{background:rgba(17,18,28,.02)}
.sponsored-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.sponsored-card{position:relative;display:block;padding:18px;border:1px solid rgba(17,18,28,.1);border-radius:18px;background:#fff;color:inherit;text-decoration:none;box-shadow:0 12px 34px rgba(17,18,28,.06);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.sponsored-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(17,18,28,.09);border-color:rgba(239,183,27,.38)}
.sponsored-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;margin-bottom:14px}
.sponsored-label{display:inline-flex;margin-bottom:10px;padding:5px 8px;border-radius:999px;background:rgba(239,183,27,.12);font-size:.68rem;font-weight:800}
.sponsored-card h3{margin:0 0 8px}.sponsored-card p{margin:0;color:var(--muted);line-height:1.7}
@media(max-width:900px){.sponsored-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.sponsored-grid{grid-template-columns:1fr}}

/* =========================================================
   HOTFIX — YOUTUBE VIDEO MODAL
   Prevent the empty iframe from rendering after the footer.
========================================================= */
.video-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    place-items: center;
    padding: 24px;
}

.video-modal[aria-hidden="true"] {
    display: none !important;
}

.video-modal.is-open,
.video-modal[aria-hidden="false"] {
    display: grid;
}

.video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 8, 16, .82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.video-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(960px, calc(100vw - 40px));
    padding: 8px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    background: #071321;
    box-shadow: 0 30px 90px rgba(0,0,0,.45);
}

.video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 16px;
    background: #000;
}

.video-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-close {
    position: absolute;
    top: -14px;
    left: -14px;
    z-index: 2;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: #fff;
    color: #071321;
    box-shadow: 0 12px 30px rgba(0,0,0,.24);
    cursor: pointer;
}

.video-close svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 640px) {
    .video-modal {
        padding: 14px;
    }

    .video-modal-dialog {
        width: 100%;
        padding: 6px;
        border-radius: 18px;
    }

    .video-frame {
        border-radius: 13px;
    }

    .video-close {
        top: -12px;
        left: -6px;
        width: 38px;
        height: 38px;
    }
}

/* =========================================================
   BRAND HEADER HOTFIX — 2026-09-22
   Removes the old dark utility strip and introduces the
   supplied Btaa Tarjama badge as the primary brand mark.
========================================================= */

.top-strip {
    display: none !important;
}

.site-header {
    border-top: 2px solid rgba(229, 169, 60, .72);
}

.site-header .nav {
    min-height: 84px;
}

.brand {
    gap: 12px;
}

.brand .brand-mark {
    width: 52px;
    min-width: 52px;
    height: 52px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(229, 169, 60, .55);
    border-radius: 50%;
    background-color: #0b1722;
    background-image: url('/assets/img/btaa-brand-badge.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 10px 26px rgba(7, 16, 29, .16);
    color: transparent;
    font-size: 0;
}

.brand .brand-mark > * {
    display: none !important;
}

.brand .brand-word {
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -.015em;
}

.brand .brand-word strong {
    color: #9a681b;
}

@media (max-width: 900px) {
    .site-header .nav {
        min-height: 76px;
    }

    .brand .brand-mark {
        width: 46px;
        min-width: 46px;
        height: 46px;
    }
}

@media (max-width: 560px) {
    .site-header .nav {
        min-height: 70px;
    }

    .brand {
        gap: 9px;
    }

    .brand .brand-mark {
        width: 42px;
        min-width: 42px;
        height: 42px;
    }

    .brand .brand-word {
        font-size: .94rem;
    }
}

/* =========================================================
   FINAL VISUAL QA — shared production polish
========================================================= */
html { overflow-x: hidden; }
body { overflow-x: clip; }
img, video, iframe { max-width:100%; }
button, input, select, textarea { font:inherit; }

@supports not (overflow: clip) {
    body { overflow-x:hidden; }
}

@media (max-width:900px) {
    .nav-links {
        max-height:calc(100dvh - 78px);
        overflow-y:auto;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
        padding-bottom:max(10px, env(safe-area-inset-bottom));
    }
}

@media (max-width:430px) {
    .container { width:min(calc(100% - 32px), 1180px); }
    .site-header .nav { gap:14px; }
    .nav-links > a:not(.btn) { min-height:48px; }
    .nav-links > .btn-primary { min-height:48px; }
}