@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

:root{
    --bg:#faf7f0;
    --surface:#fffdf8;
    --surface-2:#f3eee4;

    --olive-950:#292d22;
    --olive-900:#363c2d;
    --olive-800:#4c5540;
    --olive-700:#687258;
    --olive-600:#818a70;

    --copper:#b58c50;
    --copper-light:#d5b77f;
    --copper-soft:#f1dfbd;

    --text:#252821;
    --muted:#73766e;

    --line:rgba(50,56,42,.10);

    --shadow-sm:0 10px 35px rgba(42,41,33,.055);
    --shadow-md:0 24px 65px rgba(42,41,33,.09);
    --shadow-lg:0 36px 90px rgba(39,38,31,.14);

    --r1:16px;
    --r2:22px;
    --r3:30px;
}

*{
    box-sizing:border-box;
}

html{
    direction:rtl;
    scroll-behavior:smooth;
}

body{
    margin:0;
    direction:rtl;
    text-align:right;
    background:var(--bg);
    color:var(--text);
    font-family:"IBM Plex Sans Arabic",sans-serif;
    -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.btn,.kicker,.hero-kicker,nav a{
    font-family:"Alexandria",sans-serif;
}

a{
    color:inherit;
    text-decoration:none;
}

.wrap{
    width:min(1320px,calc(100% - 70px));
    margin-inline:auto;
}

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

header{
    position:relative;
    z-index:100;
    background:rgba(250,247,240,.96);
    border-bottom:1px solid rgba(54,60,45,.07);
    backdrop-filter:blur(18px);
}

header .wrap{
    min-height:80px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

nav{
    display:flex;
    align-items:center;
    gap:28px;
}

nav a{
    position:relative;
    padding:28px 0;
    font-size:13px;
    font-weight:500;
    color:var(--olive-950);
}

nav a::after{
    content:"";
    position:absolute;
    right:0;
    bottom:19px;
    width:0;
    height:2px;
    border-radius:10px;
    background:var(--copper);
    transition:.3s ease;
}

nav a:hover::after,
nav a.active::after{
    width:100%;
}

/* ===============================
   HERO
================================ */

.hero{
    position:relative;
    min-height:700px;
    display:flex;
    align-items:center;
    overflow:hidden;
    isolation:isolate;
    background-size:cover!important;
    background-position:center!important;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(
            270deg,
            rgba(38,42,31,.96) 0%,
            rgba(38,42,31,.80) 32%,
            rgba(38,42,31,.40) 60%,
            rgba(38,42,31,.06) 100%
        );
}

.hero::after{
    content:"";
    position:absolute;
    right:-230px;
    top:-260px;
    width:580px;
    height:580px;
    border:1px solid rgba(213,183,127,.18);
    border-radius:50%;
    box-shadow:
        0 0 0 80px rgba(213,183,127,.025),
        0 0 0 160px rgba(213,183,127,.015);
    z-index:1;
}

.hero-shade{
    display:none!important;
}

.hero-grid{
    position:relative;
    z-index:3;
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    padding-block:90px;
}

.hero-content{
    grid-column:1;
    max-width:700px;
    margin-left:auto;
}

.hero-kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:9px 17px;
    margin-bottom:22px;

    color:var(--copper-soft);
    background:rgba(255,255,255,.055);
    border:1px solid rgba(213,183,127,.30);
    border-radius:999px;

    font-size:11px;
    backdrop-filter:blur(12px);
}

.hero-kicker::before{
    content:"";
    width:20px;
    height:1px;
    background:var(--copper-light);
}

.hero h1{
    margin:0;
    max-width:760px;
    color:#fff;
    font-size:clamp(46px,5vw,76px);
    line-height:1.48;
    letter-spacing:-.05em;
    font-weight:600;
}

.hero h1 span,
.hero h1 strong{
    color:var(--copper-light);
}

.hero p{
    max-width:620px;
    margin:24px 0 30px;
    color:rgba(255,255,255,.76);
    font-size:17px;
    line-height:2.05;
}

.hero-actions{
    display:flex;
    gap:12px;
}

/* ===============================
   BUTTONS
================================ */

.btn{
    min-height:54px;
    padding:0 26px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    border-radius:15px;
    border:1px solid transparent;

    font-size:12px;
    font-weight:600;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.btn.primary{
    color:var(--olive-950);
    background:linear-gradient(135deg,#ebd3a3,#c69a55);
    box-shadow:0 14px 35px rgba(181,140,80,.24);
}

.btn.primary:hover{
    transform:translateY(-3px);
    box-shadow:0 21px 45px rgba(181,140,80,.32);
}

.hero .btn:not(.primary){
    color:#fff;
    border-color:rgba(255,255,255,.32);
    background:rgba(255,255,255,.04);
}

/* ===============================
   SECTION HEADINGS
================================ */

.section{
    padding-block:85px;
}

.section-soft{
    background:var(--surface-2);
}

.section-head{
    margin-bottom:34px;
}

.kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--copper);
    font-size:11px;
    font-weight:600;
}

.kicker::before{
    content:"";
    width:30px;
    height:1px;
    background:var(--copper);
}

.section-head h2,
.split-heading h2{
    margin:8px 0 0;
    color:var(--olive-950);
    font-size:clamp(30px,3vw,46px);
    line-height:1.6;
    letter-spacing:-.04em;
}

/* ===============================
   MODERN FEATURE CARDS
================================ */

.feature-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.feature-card{
    position:relative;
    min-height:235px;
    padding:27px 26px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(249,245,237,.92)
        );

    border:1px solid var(--line);
    border-radius:24px;

    box-shadow:var(--shadow-sm);

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.feature-card::before{
    content:"";
    position:absolute;
    top:-55px;
    left:-55px;
    width:145px;
    height:145px;
    background:rgba(181,140,80,.055);
    border-radius:50%;
}

.feature-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-lg);
    border-color:rgba(181,140,80,.28);
}

.feature-icon{
    width:60px;
    height:60px;

    display:grid;
    place-items:center;

    margin-bottom:21px;

    border-radius:18px;

    color:var(--olive-700);

    background:
        linear-gradient(
            145deg,
            #f1eadf,
            #f9f5ed
        );

    border:1px solid rgba(54,60,45,.07);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9);

    transition:.35s ease;
}

.feature-icon svg{
    width:27px;
    height:27px;
    stroke-width:1.7;
}

.feature-card:hover .feature-icon{
    transform:translateY(-4px) rotate(-2deg);
    color:var(--copper);
    background:#f1e1c4;
}

.feature-card h3{
    margin:0 0 9px;
    color:var(--olive-950);
    font-size:17px;
}

.feature-card p{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.95;
}

/* ===============================
   ABOUT / STORY
================================ */

.image-story{
    position:relative;
    overflow:hidden;
    border-radius:30px;
    background:var(--surface);
    box-shadow:var(--shadow-md);
}

.image-story-grid{
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    min-height:540px;
}

.image-story-copy{
    position:relative;
    padding:62px 58px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    background:
        linear-gradient(
            145deg,
            #f2ebdf,
            #fffaf2
        );
}

.image-story-copy h2{
    margin:8px 0 18px;
    color:var(--olive-950);
    font-size:clamp(31px,3vw,47px);
    line-height:1.65;
}

.image-story-copy p{
    color:var(--muted);
    font-size:15px;
    line-height:2.1;
}

/* ===============================
   STATS AS MINI CARDS
================================ */

.stats,
.stats-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:30px;
}

.stat,
.stat-card{
    padding:21px 18px;
    background:rgba(255,255,255,.67);
    border:1px solid var(--line);
    border-radius:16px;
}

.stat strong,
.stat-card strong{
    display:block;
    color:var(--olive-950);
    font-family:"Alexandria",sans-serif;
    font-size:25px;
}

.stat span,
.stat-card span{
    color:var(--muted);
    font-size:12px;
}

/* ===============================
   ARTICLE / STORY CARDS
================================ */

.story-grid,
.content-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.story-card,
.content-card{
    position:relative;
    overflow:hidden;

    background:var(--surface);
    border:1px solid var(--line);
    border-radius:22px;

    box-shadow:var(--shadow-sm);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.story-card:hover,
.content-card:hover{
    transform:translateY(-7px);
    box-shadow:var(--shadow-lg);
}

.story-card img,
.content-card img{
    width:100%;
    height:245px;
    object-fit:cover;
    display:block;
    transition:transform .7s ease;
}

.story-card:hover img,
.content-card:hover img{
    transform:scale(1.04);
}

.story-card-body,
.content-card-body{
    padding:22px 24px 26px;
}

.story-card h3,
.content-card h3{
    margin:0 0 7px;
    color:var(--olive-950);
    font-size:16px;
}

.story-card p,
.content-card p{
    color:var(--muted);
    font-size:13px;
    line-height:1.9;
}

/* ===============================
   PRODUCT CARDS
================================ */

.product-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.product-card{
    overflow:hidden;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:22px;
    box-shadow:var(--shadow-sm);
    transition:.35s ease;
}

.product-card:hover{
    transform:translateY(-7px);
    box-shadow:var(--shadow-lg);
}

.product-image{
    position:relative;
    overflow:hidden;
}

.product-image img{
    width:100%;
    height:235px;
    object-fit:cover;
    display:block;
}

.product-body{
    padding:18px 19px 20px;
}

.product-body h3{
    font-size:14px;
    color:var(--olive-950);
}

.product-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:13px;
}

.product-foot strong{
    color:var(--copper);
    font-size:17px;
}

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

footer{
    padding:35px 0 16px;
    background:var(--olive-950);
    color:rgba(255,255,255,.68);
}

footer h3,
footer h4{
    color:#fff;
}

footer a{
    color:rgba(255,255,255,.65);
}

footer a:hover{
    color:var(--copper-light);
}

/* ===============================
   RESPONSIVE
================================ */

@media(max-width:1100px){

    .feature-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .image-story-grid{
        grid-template-columns:1fr;
    }

    .story-grid,
    .content-grid,
    .product-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .wrap{
        width:calc(100% - 26px);
    }

    .hero{
        min-height:650px;
        background-position:35% center!important;
    }

    .hero::before{
        background:
            linear-gradient(
                0deg,
                rgba(38,42,31,.97),
                rgba(38,42,31,.72) 45%,
                rgba(38,42,31,.10)
            );
    }

    .hero-grid{
        display:block;
        padding-top:210px;
        padding-bottom:55px;
    }

    .hero h1{
        font-size:35px;
    }

    .hero-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .hero-actions .btn{
        width:100%;
    }

    .section{
        padding-block:55px;
    }

    .feature-grid,
    .story-grid,
    .content-grid,
    .product-grid,
    .stats,
    .stats-grid{
        grid-template-columns:1fr;
    }

    .image-story{
        border-radius:20px;
    }

    .image-story-copy{
        padding:38px 22px;
    }

    .story-card img,
    .content-card img,
    .product-image img{
        height:215px;
    }
}