/* ─────────────────────────────────────────────────────────────
   DABIHATI  —  Modern Moroccan Design
   Direction: Tadelakt plaster meets contemporary editorial.
   Palette from: Fès medina walls, dried saffron, oxblood leather.
   No emoji. No icon fonts. SVG only.
   ───────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,600;1,9..144,700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Noto+Sans+Arabic:wght@300;400;500;600;700;800&display=swap");

/* ── Tokens ── */
:root {
  --ox:          #10b981;   /* primary green */
  --ox-deep:     #059669;
  --ox-mid:      #34d399;
  --ox-pale:     #d1fae5;
  --ox-tint:     #f0fdf4;

  --gold:        #C8A45A;
  --gold-deep:   #9A7835;
  --gold-pale:   #FBF4E4;
  --gold-tint:   #FDFAF2;

  --plaster:     #F5F0E8;   /* wall color — page bg */
  --plaster-mid: #EDE7DB;
  --plaster-deep:#DDD5C6;

  --ink:         #1C1209;
  --ink-60:      rgba(28,18,9,.6);
  --ink-35:      rgba(28,18,9,.35);
  --ink-12:      rgba(28,18,9,.12);
  --ink-06:      rgba(28,18,9,.06);

  --cedar-dark:  #0F2416;
  --cedar:       #1D4530;
  --cedar-pale:  #EAF2ED;

  --white:       #FFFFFF;

  --f-display: 'Fraunces', 'Noto Sans Arabic', Georgia, serif;
  --f-ui:      'DM Sans', 'Noto Sans Arabic', system-ui, sans-serif;

  --nav-h:  72px;
  --ease:   cubic-bezier(.25,.1,.25,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --slow:   cubic-bezier(.4,0,.2,1);
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  font-family: var(--f-ui);
  background: var(--plaster);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
body[dir="rtl"] { font-family: 'Noto Sans Arabic', 'DM Sans', system-ui, sans-serif }
img  { display:block; max-width:100% }
a    { text-decoration:none; color:inherit }
button { cursor:pointer; border:none; background:none; font-family:inherit }
svg  { display:block; flex-shrink:0 }

/* ── Subtle paper grain ── */
body::before {
  content:'';
  position:fixed; inset:0; z-index:9990; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* ── Flag sprites ── */
.f-ma { background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600"><rect width="900" height="600" fill="%23c1272d"/><polygon points="450,200 467,256 520,256 478,288 495,344 450,312 405,344 422,288 380,256 433,256" fill="%23006233"/></svg>'); background-size:cover }
.f-fr { background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600"><rect width="300" height="600" fill="%23002395"/><rect x="300" width="300" height="600" fill="%23fff"/><rect x="600" width="300" height="600" fill="%23ed2939"/></svg>'); background-size:cover }
.f-us { background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30"><rect width="60" height="30" fill="%23b22234"/><path d="M0,5H60M0,10H60M0,15H60M0,20H60M0,25H60" stroke="%23fff" stroke-width="4"/><rect width="24" height="16" fill="%233c3b6e"/></svg>'); background-size:cover }
.f-eg { background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600"><rect width="900" height="200" fill="%23CE1126"/><rect y="200" width="900" height="200" fill="%23fff"/><rect y="400" width="900" height="200" fill="%23000"/></svg>'); background-size:cover }


/* ═══════════════════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════════════════ */
.nav {
  position: fixed; top:0; left:0; right:0;
  height: var(--nav-h);
  z-index: 100;
}
.nav-inner {
  position: absolute; inset:0;
  transition: background .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.on .nav-inner {
  background: rgba(245,240,232,.93);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--plaster-deep);
  box-shadow: 0 1px 24px rgba(28,18,9,.06);
}
.nav-wrap {
  max-width: 1380px; margin:0 auto;
  padding: 0 48px;
  height: 100%;
  display: flex; align-items:center; justify-content:space-between;
  position: relative; z-index:1;
}
/* Logo */
.logo {
  display: flex; align-items:center; gap:10px;
  font-family: var(--f-display);
  font-size: 1.45rem; font-weight:700;
  color: var(--ink); letter-spacing:-.3px;
}
.logo-img {
  width:36px; height:36px; border-radius:8px;
  overflow:hidden; box-shadow:0 2px 8px var(--ink-12);
}
.logo-img img { width:100%; height:100%; object-fit:cover }

/* Nav links */
.nav-menu {
  display:flex; align-items:center; gap:36px;
}
.nav-menu a {
  font-size:.85rem; font-weight:500;
  color: var(--ink-60); letter-spacing:.2px;
  transition: color .2s;
  position: relative;
}
.nav-menu a::after {
  content:'';
  position:absolute; bottom:-2px; left:0;
  height:1px; width:0;
  background: var(--ox);
  transition: width .25s var(--ease);
}
.nav-menu a:hover { color:var(--ink) }
.nav-menu a:hover::after { width:100% }

/* Lang selector */
.lang-sel { position:relative }
.lang-btn {
  display:flex; align-items:center; gap:8px;
  padding: 8px 16px;
  background: var(--white);
  border: 1px solid var(--plaster-deep);
  border-radius: 40px;
  font-size:.82rem; font-weight:600;
  color: var(--ink);
  cursor:pointer;
  transition: all .2s;
}
.lang-btn:hover {
  border-color: var(--ox);
  box-shadow: 0 0 0 3px rgba(139,26,26,.08);
}
.flag-pip {
  width:18px; height:13px;
  border-radius:2px; overflow:hidden;
  background-size:cover; background-position:center;
  flex-shrink:0;
}
.lang-caret {
  width:10px; height:6px; color:var(--ink-35);
  transition: transform .2s;
}
.lang-sel.open .lang-caret { transform:rotate(180deg) }

.lang-drop {
  position:absolute; top:calc(100% + 10px); right:0;
  min-width:170px;
  background: var(--white);
  border:1px solid var(--plaster-deep);
  border-radius:14px;
  box-shadow:0 20px 60px rgba(28,18,9,.14);
  overflow:hidden;
  opacity:0; visibility:hidden;
  transform:translateY(-8px) scale(.97);
  transform-origin: top right;
  transition: all .2s var(--ease);
  z-index:200;
}
.lang-sel.open .lang-drop {
  opacity:1; visibility:visible;
  transform:translateY(0) scale(1);
}
.lang-option {
  display:flex; align-items:center; gap:11px;
  padding:12px 16px;
  font-size:.86rem; font-weight:500; color:var(--ink);
  cursor:pointer;
  border-bottom:1px solid var(--ink-06);
  transition: background .15s;
}
.lang-option:last-child { border-bottom:none }
.lang-option:hover { background:var(--ox-tint) }
.lang-option.active { background:var(--ox-pale); color:var(--ox); font-weight:700 }

/* Burger */
.burger {
  display:none; flex-direction:column; gap:5px;
  padding:8px; border-radius:8px;
  transition:background .2s; z-index:110;
}
.burger:hover { background:var(--plaster-mid) }
.bline {
  width:22px; height:2px;
  background:var(--ink); border-radius:2px;
  transition: all .28s var(--ease);
}
.burger.open .bline:nth-child(1) { transform:rotate(45deg) translate(5px,5px) }
.burger.open .bline:nth-child(2) { opacity:0; transform:scaleX(0) }
.burger.open .bline:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px) }

@media (max-width:900px) {
  .burger { display:flex }
  .nav-wrap { padding:0 24px }
  .nav-menu {
    position:fixed; top:var(--nav-h); left:0; right:0;
    flex-direction:column; align-items:stretch;
    background:var(--plaster);
    padding:24px 24px 40px;
    border-top:1px solid var(--plaster-deep);
    gap:4px;
    box-shadow:0 24px 48px rgba(28,18,9,.1);
    transform:translateY(-110%); opacity:0;
    pointer-events:none;
    transition: transform .35s var(--ease), opacity .35s var(--ease);
  }
  .nav-menu.open { transform:translateY(0); opacity:1; pointer-events:all }
  .nav-menu a {
    font-size:1rem; font-weight:600; color:var(--ink);
    padding:13px 0; border-bottom:1px solid var(--plaster-deep);
  }
  .nav-menu a::after { display:none }
  .lang-sel { padding-top:12px }
  .lang-btn { width:100%; justify-content:center }
  .lang-drop {
    position:static; transform:none; opacity:1; visibility:visible;
    box-shadow:none; border:1px solid var(--plaster-deep);
    border-radius:10px; margin-top:6px;
    display:none;
  }
  .lang-sel.open .lang-drop { display:block }
}


/* ═══════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */
.hero {
  min-height:100vh;
  padding-top: var(--nav-h);
  background: var(--plaster);
  position:relative; overflow:hidden;
  display:flex; align-items:stretch;
}

/* Background saffron wash */
.hero::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 90% at 90% 50%, rgba(200,164,90,.09) 0%, transparent 65%),
    radial-gradient(ellipse 40% 60% at 0% 100%, rgba(139,26,26,.05) 0%, transparent 55%);
  pointer-events:none;
}

/* Moroccan star watermark behind content — large, faint */
.hero-watermark {
  position:absolute;
  right:-60px; top:50%; transform:translateY(-50%);
  width:700px; height:700px;
  opacity:.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 10 L108 62 L158 38 L128 80 L178 88 L138 112 L162 158 L114 140 L100 190 L86 140 L38 158 L62 112 L22 88 L72 80 L42 38 L92 62Z' fill='%238B1A1A'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat;
  pointer-events:none;
}

.hero-layout {
  max-width:1380px; margin:0 auto; padding:0 48px;
  display:grid; grid-template-columns:1fr 1fr;
  gap:0; align-items:center;
  width:100%; position:relative; z-index:1;
  min-height:calc(100vh - var(--nav-h));
}

/* ── Left: copy ── */
.hero-copy {
  padding: 80px 60px 80px 0;
  animation: heroIn .85s var(--ease) both;
}
@keyframes heroIn {
  from { opacity:0; transform:translateY(32px) }
  to   { opacity:1; transform:translateY(0) }
}

.hero-badge {
  display:inline-flex; align-items:center; gap:9px;
  margin-bottom:32px;
  padding:7px 16px 7px 10px;
  background:var(--ox-pale);
  border:1px solid rgba(139,26,26,.15);
  border-radius:40px;
  animation: heroIn .85s var(--ease) .08s both;
}
.badge-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--ox);
  animation: dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(139,26,26,.4) }
  50%     { box-shadow:0 0 0 6px rgba(139,26,26,.0) }
}
.badge-text {
  font-size:.75rem; font-weight:700;
  color:var(--ox); letter-spacing:1.2px; text-transform:uppercase;
}

.hero-h1 {
  font-family: var(--f-display);
  font-size: clamp(3.2rem, 5.2vw, 6rem);
  font-weight:700; line-height:1.0;
  letter-spacing:-1.5px; color:var(--ink);
  margin-bottom:8px;
  animation: heroIn .85s var(--ease) .14s both;
}
.hero-h1 em {
  font-style:italic; color:var(--ox);
  display:block; font-weight:700;
}
.hero-h1-sub {
  font-family: var(--f-display);
  display:block;
  font-size:clamp(1.3rem,2.2vw,2.4rem);
  font-weight:400; font-style:italic;
  color:var(--ink-35); letter-spacing:-.2px;
  margin-top:8px;
  animation: heroIn .85s var(--ease) .2s both;
}

.hero-p {
  font-size:1rem; color:var(--ink-60); line-height:1.8;
  max-width:460px; margin:32px 0 44px;
  animation: heroIn .85s var(--ease) .26s both;
}
[dir="rtl"] .hero-p { max-width:100% }

/* CTA row */
.hero-actions {
  display:flex; gap:12px; flex-wrap:wrap;
  animation: heroIn .85s var(--ease) .32s both;
  margin-bottom:64px;
}

.cta-primary {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px;
  background:var(--ox); color:var(--white);
  font-size:.88rem; font-weight:600; letter-spacing:.2px;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(139,26,26,.3), 0 1px 0 rgba(255,255,255,.08) inset;
  transition: all .25s var(--ease);
}
.cta-primary:hover {
  background:var(--ox-mid);
  transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(139,26,26,.38);
}

.cta-line {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px;
  background:transparent; color:var(--ink);
  font-size:.88rem; font-weight:600; letter-spacing:.2px;
  border:1.5px solid var(--plaster-deep);
  border-radius:10px;
  transition: all .25s var(--ease);
}
.cta-line:hover {
  border-color:var(--gold);
  background:var(--gold-tint);
  color:var(--gold-deep);
}

.cta-icon {
  width:16px; height:16px;
  stroke:currentColor; fill:none;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}

/* Stats strip */
.hero-stats {
  display:grid; grid-template-columns:repeat(4,1fr);
  animation: heroIn .85s var(--ease) .4s both;
  border-top:1px solid var(--plaster-deep);
  padding-top:28px;
  gap:0;
}
.hstat {
  padding-right:24px;
  border-right:1px solid var(--plaster-deep);
}
.hstat:last-child { border-right:none; padding-right:0 }
[dir="rtl"] .hstat { padding-right:0; padding-left:24px; border-right:none; border-left:1px solid var(--plaster-deep) }
[dir="rtl"] .hstat:last-child { border-left:none; padding-left:0 }

.hstat-n {
  font-family:var(--f-display);
  font-size:1.9rem; font-weight:700; line-height:1;
  color:var(--ox); margin-bottom:4px;
}
.hstat-l {
  font-size:.7rem; font-weight:600;
  color:var(--ink-35); letter-spacing:1px; text-transform:uppercase;
}

/* ── Right: Arch frame with photo ── */
.hero-visual {
  position:relative;
  height:100%; min-height:600px;
  display:flex; align-items:center; justify-content:center;
  animation: archIn .9s var(--ease) .2s both;
}
@keyframes archIn {
  from { opacity:0; transform:translateX(40px) }
  to   { opacity:1; transform:translateX(0) }
}

/* The arch — signature Moroccan pointed arch shape via clip-path */
.arch-window {
  width:340px; height:530px;
  position:relative; overflow:hidden;
  /* Pointed Moroccan arch: rectangle bottom, arch top */
  clip-path: polygon(
    0% 100%,
    0% 42%,
    2% 32%,
    6% 23%,
    12% 15%,
    20% 9%,
    29% 4%,
    38% 1%,
    50% 0%,
    62% 1%,
    71% 4%,
    80% 9%,
    88% 15%,
    94% 23%,
    98% 32%,
    100% 42%,
    100% 100%
  );
  box-shadow:0 40px 100px rgba(28,18,9,.3);
}
.arch-photo {
  width:100%; height:100%;
  background-image: url("https://media.istockphoto.com/id/1470677566/photo/curious-cow-looking-to-the-camera-at-cattle-farm.jpg?s=612x612&w=0&k=20&c=leVnEFagOV6s5yPUO7EIKoDqcj2tKCayziZppeikwN8=");
  background-size:cover; background-position:center;
  transform:scale(1.04);
  transition: transform 8s linear;
}
.arch-photo:hover { transform:scale(1.08) }
/* Warm overlay on photo */
.arch-overlay {
  position:absolute; inset:0;
  background: linear-gradient(175deg, rgba(139,26,26,.15) 0%, rgba(28,18,9,.5) 100%);
}

/* Arch border ring — drawn outside the clipped area */
.arch-ring {
  position:absolute;
  width:354px; height:544px;
  top:50%; left:50%; transform:translate(-50%,-50%);
  pointer-events:none;
}
.arch-ring svg { width:100%; height:100% }

/* Card floating outside arch */
.arch-card {
  position:absolute;
  background:var(--white);
  border:1px solid var(--plaster-deep);
  border-radius:14px;
  padding:14px 18px;
  box-shadow:0 16px 48px rgba(28,18,9,.14);
  display:flex; align-items:center; gap:12px;
  animation: cardBob 5s ease-in-out infinite;
  white-space:nowrap;
}
.arch-card.card-tl { top:48px; left:-48px; animation-delay:0s }
.arch-card.card-br { bottom:72px; right:-48px; animation-delay:2.5s }
@keyframes cardBob {
  0%,100% { transform:translateY(0) }
  50%     { transform:translateY(-7px) }
}
.card-icon-box {
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.card-icon-box.red  { background:var(--ox-pale) }
.card-icon-box.gold { background:var(--gold-pale) }
.card-icon-box svg {
  width:17px; height:17px;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.card-icon-box.red  svg { stroke:var(--ox) }
.card-icon-box.gold svg { stroke:var(--gold-deep) }
.card-title { font-size:.8rem; font-weight:700; color:var(--ink); line-height:1.2 }
.card-sub   { font-size:.7rem; color:var(--ink-35); font-weight:500; margin-top:1px }

@media (max-width:1100px) {
  .hero-layout { padding:0 32px }
  .hero-copy   { padding:60px 40px 60px 0 }
  .arch-window { width:300px; height:470px }
  .arch-ring   { width:314px; height:484px }
  .arch-card.card-tl { left:-24px }
  .arch-card.card-br { right:-24px }
}
@media (max-width:860px) {
  .hero-layout { grid-template-columns:1fr; min-height:auto }
  .hero-visual { order:-1; min-height:380px; padding-top:48px }
  .hero-copy   { padding:0 0 80px }
  .arch-window { width:260px; height:400px }
  .arch-ring   { width:274px; height:414px }
  .arch-card.card-tl,.arch-card.card-br { display:none }
  .hero-watermark { display:none }
}
@media (max-width:560px) {
  .hero-layout { padding:0 20px }
  .hero-actions { flex-direction:column }
  .cta-primary,.cta-line { width:100%; justify-content:center }
  .hero-stats { grid-template-columns:1fr 1fr; row-gap:24px }
  .hstat:nth-child(2) { border-right:none }
  .hstat:nth-child(3) { border-top:1px solid var(--plaster-deep); padding-top:24px }
  .hstat:nth-child(4) { border-top:1px solid var(--plaster-deep); padding-top:24px; border-right:none }
  [dir="rtl"] .hstat:nth-child(2) { border-left:none }
  [dir="rtl"] .hstat:nth-child(4) { border-left:none }
}


/* ═══════════════════════════════════════════════════════════
   SECTION DIVIDER — diamond zellige strip
═══════════════════════════════════════════════════════════ */
.divider-zellige {
  height:20px; width:100%;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--gold)          0px, var(--gold)          1px,
      transparent          1px, transparent           14px,
      var(--ox)            14px, var(--ox)            15px,
      transparent          15px, transparent           28px
    );
  opacity:.22;
}


/* ═══════════════════════════════════════════════════════════
   SECTION SHARED
═══════════════════════════════════════════════════════════ */
.section { padding:120px 48px }
.s-inner  { max-width:1380px; margin:0 auto }

.eyebrow {
  display:flex; align-items:center; gap:12px;
  margin-bottom:18px;
}
.eyebrow-bar { width:24px; height:2px; background:var(--ox); flex-shrink:0 }
.eyebrow-text {
  font-size:.72rem; font-weight:700;
  letter-spacing:2.5px; text-transform:uppercase; color:var(--ox);
}

.s-title {
  font-family:var(--f-display);
  font-size:clamp(2rem,3.5vw,3.4rem);
  font-weight:700; letter-spacing:-.5px; line-height:1.1;
  color:var(--ink); margin-bottom:16px;
}
.s-title em { font-style:italic; color:var(--ox) }

.s-body {
  font-size:1rem; color:var(--ink-60); line-height:1.8; max-width:540px;
}

.centered { text-align:center }
.centered .s-body  { margin:0 auto }
.centered .eyebrow { justify-content:center }

@media (max-width:560px) { .section { padding:80px 20px } }


/* ═══════════════════════════════════════════════════════════
   FEATURES
═══════════════════════════════════════════════════════════ */
.features-section { background:var(--white) }

.feat-head { margin-bottom:64px }

/* Offset mosaic grid — NOT a uniform 3-col */
.feat-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap:2px;
  border:1px solid var(--plaster-mid);
  border-radius:20px;
  overflow:hidden;
  background:var(--plaster-mid);
}

/* First card is larger — editorial break */
.feat-card:first-child {
  grid-column:1/3;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
}
.feat-card:first-child .feat-body { border-right:1px solid var(--plaster-mid) }
[dir="rtl"] .feat-card:first-child .feat-body { border-right:none; border-left:1px solid var(--plaster-mid) }

.feat-card {
  background:var(--white);
  padding:0;
  position:relative; overflow:hidden;
  transition: background .25s;
}
.feat-body {
  padding:40px 36px;
  display:flex; flex-direction:column; justify-content:flex-end;
  height:100%; position:relative; z-index:1;
}
.feat-card:hover { background:var(--plaster) }

/* Number label — editorial style */
.feat-num {
  font-family:var(--f-display);
  font-size:4rem; font-weight:700; line-height:1;
  color:var(--plaster-mid);
  position:absolute; top:24px; right:28px;
  transition: color .25s;
  user-select:none;
}
[dir="rtl"] .feat-num { right:auto; left:28px }
.feat-card:hover .feat-num { color:var(--plaster-deep) }

/* SVG icon box */
.feat-icon {
  width:46px; height:46px;
  background:var(--ox-pale);
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
  transition: all .3s var(--spring);
  color:var(--ox);
}
.feat-icon svg {
  width:22px; height:22px;
  stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.feat-card:hover .feat-icon {
  background:var(--ox);
  color:var(--white);
  transform:rotate(-8deg) scale(1.1);
}

.feat-name {
  font-family:var(--f-display);
  font-size:1.15rem; font-weight:700;
  color:var(--ink); margin-bottom:8px;
}
.feat-desc {
  font-size:.88rem; color:var(--ink-60); line-height:1.7;
}

/* Photo side of first card */
.feat-photo {
  background-image:url("https://media.istockphoto.com/id/1470677566/photo/curious-cow-looking-to-the-camera-at-cattle-farm.jpg?s=612x612&w=0&k=20&c=leVnEFagOV6s5yPUO7EIKoDqcj2tKCayziZppeikwN8=");
  background-size:cover; background-position:center;
  min-height:280px;
  position:relative;
}
.feat-photo::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(139,26,26,.2), transparent);
}

@media (max-width:960px) {
  .feat-grid { grid-template-columns:1fr 1fr }
  .feat-card:first-child { grid-column:1/-1; grid-template-columns:1fr; }
  .feat-photo { min-height:220px }
}
@media (max-width:580px) {
  .feat-grid { grid-template-columns:1fr; border-radius:14px }
  .feat-card:first-child { grid-template-columns:1fr }
  .feat-body { padding:28px 24px }
  .feat-num  { font-size:3rem }
}


/* ═══════════════════════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════════════════════ */
.about-section { background:var(--plaster) }

.about-layout {
  display:grid; grid-template-columns:1fr 1fr;
  gap:80px; align-items:center;
}

/* Image side — 2x2 organic mosaic */
.img-mosaic {
  display:grid;
  grid-template-columns:55% 45%;
  grid-template-rows:280px 200px;
  gap:12px;
}
.m-img {
  border-radius:16px;
  background-size:cover; background-position:center;
  box-shadow:0 8px 32px rgba(28,18,9,.1);
  overflow:hidden; position:relative;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.m-img::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(165deg, transparent 50%, rgba(28,18,9,.18));
  transition:opacity .4s;
}
.m-img:hover { transform:scale(1.025) rotate(.3deg); box-shadow:0 20px 60px rgba(28,18,9,.18) }
.m-img.full { grid-column:1/-1; grid-row:2 }
/* Arch-top on first image */
.m-img.arch {
  border-radius: 50% 50% 16px 16px / 35% 35% 16px 16px;
}
.m-cattle { background-image:url("https://media.istockphoto.com/id/1470677566/photo/curious-cow-looking-to-the-camera-at-cattle-farm.jpg?s=612x612&w=0&k=20&c=leVnEFagOV6s5yPUO7EIKoDqcj2tKCayziZppeikwN8=") }
.m-sheep  { background-image:url("https://e2.hespress.com/wp-content/uploads/2024/06/moutons-aid-adha.jpg") }
.m-farm   { background-image:url("https://i.redd.it/52wnin9pxl671.jpg") }

/* Benefits list */
.benefits { list-style:none; display:flex; flex-direction:column; gap:10px; margin-top:40px }
.benefit {
  display:grid; grid-template-columns:44px 1fr;
  align-items:start; gap:16px;
  padding:18px 20px;
  background:var(--white);
  border:1px solid var(--plaster-mid);
  border-radius:12px;
  transition: all .22s var(--ease);
}
.benefit:hover {
  border-color:rgba(139,26,26,.18);
  box-shadow:0 4px 20px rgba(28,18,9,.07);
  transform:translateX(4px);
}
[dir="rtl"] .benefit:hover { transform:translateX(-4px) }
.ben-icon {
  width:44px; height:44px;
  background:var(--ox-pale);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ox);
}
.ben-icon svg {
  width:21px; height:21px;
  stroke:currentColor; fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.ben-name { font-size:.93rem; font-weight:700; color:var(--ink); margin-bottom:4px }
.ben-desc { font-size:.84rem; color:var(--ink-60); line-height:1.6 }

@media (max-width:960px) {
  .about-layout { grid-template-columns:1fr; gap:48px }
  .img-mosaic { grid-template-rows:240px 180px }
}
@media (max-width:560px) {
  .img-mosaic { grid-template-rows:200px 150px; gap:8px }
  .benefit    { grid-template-columns:36px 1fr; gap:12px }
}


/* ═══════════════════════════════════════════════════════════
   DOWNLOAD  CTA
═══════════════════════════════════════════════════════════ */
.dl-section {
  background:var(--cedar-dark);
  padding:128px 48px;
  position:relative; overflow:hidden;
}

/* Star tessellation — authentic Moroccan 8-point */
.dl-section::before {
  content:'';
  position:absolute; inset:0; pointer-events:none;
  opacity:.1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M60 8 L64 44 L96 28 L76 56 L112 60 L76 64 L96 92 L64 76 L60 112 L56 76 L24 92 L44 64 L8 60 L44 56 L24 28 L56 44Z' stroke='%23C8A45A' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-size:120px 120px;
}

/* Gold arc glow top-right */
.dl-section::after {
  content:'';
  position:absolute; top:-200px; right:-200px;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(200,164,90,.1) 0%, transparent 70%);
  pointer-events:none;
}

.dl-inner {
  position:relative; z-index:1;
  max-width:700px; margin:0 auto; text-align:center;
}

.dl-eyebrow {
  display:flex; justify-content:center; align-items:center; gap:12px;
  margin-bottom:28px;
}
.dl-eyebrow .eyebrow-bar { background:var(--gold); opacity:.5 }
.dl-eyebrow .eyebrow-text { color:var(--gold); opacity:.7 }

.dl-title {
  font-family:var(--f-display);
  font-size:clamp(2.2rem,4.5vw,4.2rem);
  font-weight:700; line-height:1.08;
  color:var(--white); letter-spacing:-.5px;
  margin-bottom:18px;
}
.dl-title em { font-style:italic; color:var(--gold) }

.dl-sub {
  font-size:.98rem; color:rgba(255,255,255,.55);
  line-height:1.8; margin-bottom:52px;
}

.store-row {
  display:flex; justify-content:center; gap:16px;
  flex-wrap:wrap; margin-bottom:36px;
}

.store-btn {
  display:flex; align-items:center; gap:14px;
  padding:15px 24px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  color:var(--white);
  cursor:pointer;
  transition: all .25s var(--ease);
  position:relative;
}
.store-btn:hover {
  background:rgba(255,255,255,.1);
  border-color:rgba(200,164,90,.45);
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
}

.soon-badge {
  position:absolute; top:-11px; right:-8px;
  background:var(--ox);
  color:var(--white);
  font-size:.6rem; font-weight:800;
  letter-spacing:1px; text-transform:uppercase;
  padding:3px 9px; border-radius:40px;
  box-shadow:0 4px 10px rgba(139,26,26,.4);
}

.store-icon svg { width:30px; height:30px; fill:var(--white) }
.store-text-sm  { font-size:.7rem; opacity:.55; font-weight:500; margin-bottom:2px }
.store-text-lg  { font-size:1.05rem; font-weight:700 }
.store-txt { text-align:left }
[dir="rtl"] .store-txt { text-align:right }

.dl-note { color:rgba(255,255,255,.3); font-size:.82rem }
.dl-note a { color:rgba(200,164,90,.65); transition:color .2s }
.dl-note a:hover { color:var(--gold) }

@media (max-width:560px) {
  .dl-section { padding:80px 20px }
  .store-row   { flex-direction:column; align-items:center }
  .store-btn   { width:250px; justify-content:center }
}


/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
.footer {
  background:#100B06;
  color:rgba(255,255,255,.42);
  padding:80px 48px 40px;
}
.foot-inner { max-width:1380px; margin:0 auto }
.foot-top {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:56px;
  border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:36px;
}
.foot-brand-name {
  font-family:var(--f-display);
  font-size:1.35rem; font-weight:700; color:var(--white);
  display:flex; align-items:center; gap:9px;
  margin-bottom:14px;
}
.foot-logo { width:28px; height:28px; border-radius:6px; overflow:hidden; background:var(--white); padding:2px }
.foot-logo img { width:100%; height:100%; object-fit:contain }
.foot-desc { font-size:.86rem; line-height:1.8; max-width:255px }

.foot-col h6 {
  font-size:.68rem; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  color:rgba(255,255,255,.28); margin-bottom:20px;
}
.foot-col ul { list-style:none }
.foot-col li { margin-bottom:10px }
.foot-col a { font-size:.86rem; color:rgba(255,255,255,.42); transition:color .2s }
.foot-col a:hover { color:rgba(255,255,255,.9) }

.foot-bottom {
  display:flex; align-items:center; justify-content:space-between;
  font-size:.76rem; gap:16px; flex-wrap:wrap;
}
.foot-copy   { color:rgba(255,255,255,.25) }
.foot-copy .hrt { color:var(--ox) }
.foot-links  { display:flex; gap:20px }
.foot-links a { color:rgba(255,255,255,.25); font-size:.74rem; transition:color .2s }
.foot-links a:hover { color:rgba(255,255,255,.65) }

@media (max-width:900px) { .foot-top { grid-template-columns:1fr 1fr; gap:32px } }
@media (max-width:560px) {
  .footer { padding:60px 20px 32px }
  .foot-top { grid-template-columns:1fr; gap:28px }
  .foot-bottom { flex-direction:column; text-align:center }
  .foot-desc { max-width:100% }
}


/* ═══════════════════════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════════════════════ */
.sr {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--slow), transform .7s var(--slow);
}
.sr.in { opacity:1; transform:translateY(0) }
.sr-d1 { transition-delay:.07s }
.sr-d2 { transition-delay:.14s }
.sr-d3 { transition-delay:.21s }
.sr-d4 { transition-delay:.28s }
.sr-d5 { transition-delay:.35s }
.sr-d6 { transition-delay:.42s }