:root {

    --bg: #111318;
    --card: #1b2028;

    --text: #f5f5f5;
    --muted: #a5a9b2;

    --line: rgba(255,255,255,.14);
    --line-hover: rgba(255,255,255,.35);

}



* {

    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {

    margin:0;

    min-height:100vh;


    background:

        radial-gradient(

            circle at 50% 0%,

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

            transparent 42%

        ),

        var(--bg);


    color:var(--text);


    font-family:

        Arial,

        Helvetica,

        sans-serif;


    -webkit-font-smoothing:antialiased;

}



/* =========================
PAGE
========================= */


.page {

    width:min(1400px,100%);

    min-height:100vh;

    margin:auto;


    padding:

        30px

        clamp(20px,4vw,60px)

        25px;


    display:flex;

    flex-direction:column;

}



/* =========================
HEADER
========================= */


.hero {

    position:relative;

    text-align:center;


    padding:

        45px

        0

        50px;

}



.brand h1 {

    margin:

        8px

        0

        14px;


    font-size:

        clamp(54px,6.7vw,80px);


    line-height:.95;


    font-weight:600;


    letter-spacing:.16em;

}



.eyebrow {

    margin:0;


    color:#d0d3d8;


    font-size:14px;


    letter-spacing:.34em;


    text-transform:uppercase;

}



.owner {

    margin:0;


    color:var(--muted);


    font-size:15px;


    letter-spacing:.06em;

}



/* =========================
LANGUAGE
========================= */


.language-switch {

    position:absolute;


    top:0;

    right:0;


    display:flex;


    align-items:center;


    gap:7px;


    color:#777b84;


    font-size:12px;


    letter-spacing:.12em;

}



.language-switch button {

    border:0;

    background:transparent;


    padding:5px 3px;


    color:#777b84;


    cursor:pointer;


    font-size:12px;


    letter-spacing:.12em;

}



.language-switch button.active {

    color:#fff;

}



/* =========================
CARDS GRID
========================= */


.cards {

    flex:1;


    display:grid;


    grid-template-columns:

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


    gap:18px;

}



/* =========================
CARD
========================= */


.card {

    position:relative;


    min-height:285px;


    overflow:hidden;


    border:

        1px solid var(--line);


    border-radius:18px;


    background-color:var(--card);


    background-size:cover;


    background-position:center;


    background-repeat:no-repeat;


    color:var(--text);


    text-decoration:none;


    isolation:isolate;


    transition:

        transform .45s ease,

        border-color .45s ease,

        box-shadow .45s ease;

}



/* overlay خیلی ملایم */

.card::before {

    content:"";


    position:absolute;


    inset:0;


    z-index:1;


    background:

        linear-gradient(

            90deg,

            rgba(0,0,0,.06),

            rgba(0,0,0,0)

        );

}



/* نور گوشه */

.card::after {

    content:"";


    position:absolute;


    width:260px;


    height:260px;


    right:-130px;


    top:-130px;


    border-radius:50%;


    background:

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


    filter:blur(18px);


    transition:

        transform .6s ease;

}

/* =========================
   CARD CONTENT
========================= */


.card-content {

    position:relative;

    z-index:2;


    min-height:285px;


    padding:

        30px

        32px;


    display:flex;


    flex-direction:column;


    align-items:flex-start;

}



.number {

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


    font-size:11px;


    letter-spacing:.2em;


    margin-bottom:auto;

}



/* =========================
   TITLE
========================= */


.card h2 {

    margin:

        0

        0

        12px;


    font-size:

        clamp(25px,2.3vw,34px);


    font-weight:600;


    letter-spacing:.06em;


    line-height:1.2;

}



/* =========================
   TEXT
========================= */


.card p {

    margin:0;


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


    font-size:15px;


    line-height:1.65;

}



.description {

    min-height:auto;

}



.description p:first-child {

    color:#fff;


    font-weight:500;

}



/* =========================
   ENTER
========================= */


.enter {

    margin-top:20px;


    color:#fff;


    font-size:12px;


    letter-spacing:.18em;


    opacity:.9;


    transition:

        opacity .35s ease,

        transform .35s ease;

}



/* =========================
   HOVER
========================= */


.card:hover {

    transform:

        translateY(-5px);


    border-color:

        var(--line-hover);


    box-shadow:

        0 20px 60px rgba(0,0,0,.20);

}



.card:hover::before {

    background:

        linear-gradient(

            90deg,

            rgba(0,0,0,.10),

            rgba(0,0,0,0)

        );

}



.card:hover::after {

    transform:scale(1.25);

}



.card:hover .enter {

    opacity:1;


    transform:

        translateX(5px);

}



/* =========================
   FOOTER
========================= */


footer {

    padding-top:32px;


    text-align:center;


    color:#70747c;


    font-size:11px;


    letter-spacing:.08em;

}



.footer-link,
.footer-link:visited,
.footer-link:hover,
.footer-link:active {

    color:#fff !important;


    text-decoration:none !important;

}



/* =========================
   RTL
========================= */


html[dir="rtl"] body {

    font-family:

        Tahoma,

        Arial,

        sans-serif;

}



html[dir="rtl"] .language-switch {

    right:auto;


    left:0;

}



html[dir="rtl"] .card-content {

    align-items:flex-start;

}



html[dir="rtl"] .enter {

    letter-spacing:0;

}



/* =========================
   MOBILE
========================= */


@media(max-width:760px){


    .page {

        padding:

            20px

            16px

            22px;

    }



    .cards {

        grid-template-columns:1fr;


        gap:14px;

    }



    .card {

        min-height:245px;


        background-position:center;

    }



    .card::before {

        background:

            linear-gradient(

                180deg,

                rgba(0,0,0,.04),

                rgba(0,0,0,.12)

            );

    }



    .card-content {

        min-height:245px;


        padding:25px;

    }



    .card h2 {

        font-size:25px;

    }



    .card p {

        font-size:14px;

    }



    .enter {

        font-size:11px;

    }

}

/* =========================
   SMALL MOBILE
========================= */


@media(max-width:420px){


    .brand h1 {

        letter-spacing:.11em;

    }



    .eyebrow {

        font-size:11px;

    }



    .owner {

        font-size:13px;

    }



    .card h2 {

        font-size:22px;

    }



    .card p {

        font-size:13px;

    }



    .enter {

        font-size:11px;

    }

}



/* =========================
   REDUCE MOTION
========================= */


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


    *,

    *::before {


        transition:none !important;


        scroll-behavior:auto !important;

    }

}