/* ─────────────────────────────────────────────────────────────
   YA ABATI · LANDING V2 — éditorial-marchand
   Conversion structure, Calligramina aesthetic.
   ───────────────────────────────────────────────────────────── */

:root{
  --check: var(--emerald);
  --line: rgba(26,22,18,.14);
  --line-cream: rgba(234,224,196,.22);
}

body{ background: var(--paper); }

/* ─────────── Announcement ticker ─────────── */
.tick{
  background: var(--emerald-deep);
  color: var(--cream);
  overflow: hidden;
  border-bottom: 1px solid rgba(234,224,196,.14);
}
.tick-track{
  display: flex;
  gap: 64px;
  white-space: nowrap;
  padding: 11px 0;
  animation: tick 42s linear infinite;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  align-items: center;
}
.tick-track span{ display: inline-flex; align-items: center; gap: 14px; opacity: .9; }
.tick-track .sep{ opacity: .35; font-family: var(--serif); font-style: italic; letter-spacing: 0; text-transform: none; font-size: 14px; }
@keyframes tick {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─────────── Top nav ─────────── */
.topnav{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(6px);
}
.topnav .menu{ display: flex; gap: 28px; font-family: var(--sans); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); }
.topnav .menu a{ color: inherit; text-decoration: none; transition: color .2s; }
.topnav .menu a:hover{ color: var(--emerald); }
.topnav .brand{ display: flex; align-items: center; gap: 12px; }
.topnav .brand img{ width: 28px; height: 28px; }
.topnav .brand .word{ font-family: var(--serif); font-style: italic; font-size: 22px; letter-spacing: -0.005em; color: var(--ink); }
.topnav .right{ display: flex; justify-content: flex-end; align-items: center; gap: 20px; font-family: var(--sans); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); }
.topnav .right .lang{ opacity: .7; }
.topnav .right .cart{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--emerald); color: var(--cream);
  padding: 11px 18px; border-radius: 999px;
  letter-spacing: .2em; font-size: 10.5px;
  text-decoration: none;
}
.topnav .right .cart .bag{ width: 12px; height: 14px; border: 1.4px solid var(--cream); border-top: 0; border-radius: 0 0 2px 2px; position: relative; }
.topnav .right .cart .bag::before{ content: ""; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border: 1.4px solid var(--cream); border-bottom: 0; border-radius: 4px 4px 0 0;}

/* ─────────── HERO (product split) ─────────── */
.hero2{
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  padding: clamp(40px, 6vh, 80px) var(--gutter) clamp(60px, 8vh, 100px);
  align-items: center;
  position: relative;
}
.hero2-visual{
  position: relative;
  background: linear-gradient(150deg, #EFE5CE 0%, #DDD0B1 100%);
  aspect-ratio: 5/4.4;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 2px;
}
.hero2-visual::after{
  content:"";
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.15  0 0 0 0 0.10  0 0 0 0 0.05  0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .5; mix-blend-mode: multiply; pointer-events: none;
}
.hero2-visual img{
  width: 70%;
  max-width: 480px;
  display: block;
  filter: drop-shadow(0 30px 50px rgba(30,30,20,.18)) drop-shadow(0 10px 18px rgba(30,30,20,.12));
  position: relative; z-index: 2;
  transform: rotate(-2.5deg);
}
.hero2-visual .badge{
  position: absolute; top: 20px; left: 20px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--emerald);
  background: var(--cream);
  padding: 8px 12px;
  border-radius: 999px;
}
.hero2-visual .badge::before{ content:""; width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); }
.hero2-visual .thumbs{
  position: absolute; bottom: 18px; left: 18px; z-index: 3;
  display: flex; gap: 8px;
}
.hero2-visual .thumb{
  width: 44px; height: 44px; border-radius: 4px;
  background: var(--paper-warm);
  border: 1px solid rgba(26,22,18,.15);
  display: grid; place-items: center;
  font-family: var(--arabic-display); font-size: 18px; color: var(--emerald);
}
.hero2-visual .thumb.active{ outline: 2px solid var(--emerald); outline-offset: 2px; }
.hero2-visual .corner-stamp{
  position: absolute; bottom: 22px; right: 24px; z-index: 3;
  font-family: var(--serif); font-style: italic; font-size: 13px;
  color: var(--ink-soft);
  text-align: right;
}
.hero2-visual .corner-stamp em{ display: block; font-size: 22px; color: var(--emerald); font-style: italic; }

.hero2-info .eyebrow-row{
  display: flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 20px;
}
.hero2-info .stars{ display: inline-flex; gap: 2px; color: var(--cuir); }
.hero2-info .stars svg{ width: 13px; height: 13px; fill: currentColor; }
.hero2-info .reviews-link{ text-decoration: underline; text-underline-offset: 3px; opacity: .7;}
.hero2-info h1{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(44px, 5.6vw, 80px);
  line-height: 1.0;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-bottom: 18px;
}
.hero2-info h1 em{ font-style: italic; color: var(--emerald); }
.hero2-info .ar-mini{
  font-family: var(--arabic-display);
  direction: rtl;
  font-size: 44px;
  color: var(--emerald);
  margin-bottom: 22px;
  letter-spacing: -0.02em;
}
.hero2-info .tagline{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 1.5vw, 22px);
  color: var(--ink-soft);
  line-height: 1.45;
  margin-bottom: 28px;
  max-width: 44ch;
}
.hero2-info .tagline em{ color: var(--emerald); font-style: italic; }
.hero2-info .bullets{
  list-style: none; padding: 0; margin: 0 0 30px;
  display: flex; flex-direction: column; gap: 10px;
}
.hero2-info .bullets li{
  display: flex; align-items: flex-start; gap: 12px;
  font-family: var(--serif); font-size: 18px; line-height: 1.4; color: var(--ink);
}
.hero2-info .bullets li::before{
  content: "";
  width: 18px; height: 18px;
  flex: 0 0 18px;
  margin-top: 4px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10.5l3 3 7-7' stroke='%23F4ECD6' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat,
    var(--emerald);
}
.hero2-info .bullets li em{ font-style: italic; color: var(--emerald); }

.hero2-buy{
  border-top: 1px solid var(--line);
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}
.hero2-buy .price-block{
  display: flex; align-items: baseline; gap: 12px;
}
.hero2-buy .price{
  font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: -0.015em; color: var(--ink);
}
.hero2-buy .price em{ font-style: italic; font-size: 28px; color: var(--emerald); }
.hero2-buy .ttc{ font-family: var(--sans); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--mute);}
.hero2-buy .cta{
  flex: 1; min-width: 220px;
  display: inline-flex; justify-content: space-between; align-items: center;
  background: var(--emerald);
  color: var(--cream);
  padding: 18px 22px;
  font-family: var(--sans); font-size: 11.5px; letter-spacing: .28em; text-transform: uppercase;
  border-radius: 4px;
  text-decoration: none;
  border: 0; cursor: pointer;
  transition: background .2s, transform .2s;
}
.hero2-buy .cta:hover{ background: var(--emerald-deep); transform: translateY(-1px);}
.hero2-buy .cta .arr{ font-family: var(--serif); font-style: italic; font-size: 14px; letter-spacing: 0; text-transform: none; opacity: .85; }

.hero2-pay{
  margin-top: 18px;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--mute);
}
.hero2-pay .chips{ display: flex; gap: 6px; }
.hero2-pay .chip{
  height: 18px; padding: 0 7px; border-radius: 3px;
  display: inline-grid; place-items: center;
  font-family: var(--sans); font-size: 8.5px; font-weight: 600;
  letter-spacing: .08em;
  background: var(--paper-warm); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.hero2-guarantee{ margin-top: 14px; display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-soft);}
.hero2-guarantee::before{ content:""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--emerald); position: relative;}

/* ─────────── Trust strip (4 promises) ─────────── */
.promises{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper-warm);
}
.promise{
  display: flex; align-items: center; gap: 16px;
  padding: 22px 26px;
  border-right: 1px solid var(--line);
}
.promise:last-child{ border-right: 0; }
.promise .ico{
  width: 38px; height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--emerald);
  color: var(--cream);
}
.promise .ico svg{ width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.promise .t{
  font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.15; color: var(--ink);
}
.promise .s{
  font-family: var(--sans); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--mute);
  margin-top: 3px;
}

/* ─────────── Manifesto v2 ─────────── */
.manifesto2{
  padding: clamp(80px, 11vh, 140px) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  border-bottom: 1px solid var(--line);
}
.manifesto2 .left .eyebrow{ display: block; margin-bottom: 18px;}
.manifesto2 .left .ar-big{
  font-family: var(--arabic-display); direction: rtl;
  font-size: clamp(80px, 11vw, 160px);
  color: var(--emerald);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.manifesto2 .left h2{
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(36px, 4.4vw, 64px); line-height: 1.05;
  letter-spacing: -0.01em; color: var(--ink);
}
.manifesto2 .left h2 em{ font-style: italic; color: var(--emerald); }
.manifesto2 .right{ font-family: var(--serif); }
.manifesto2 .right p{ font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--ink-soft); }
.manifesto2 .right p + p{ margin-top: 1.05em; }
.manifesto2 .right p em{ color: var(--ink); font-style: italic; }
.manifesto2 .right .sig{
  margin-top: 28px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--mute);
}
.manifesto2 .right .sig .line{ width: 32px; height: 1px; background: var(--mute); opacity: .5;}

/* ─────────── Preview / chapter teaser (radio-noor inspired) ─────────── */
.preview{
  padding: clamp(80px, 11vh, 140px) var(--gutter);
  background: var(--emerald);
  color: var(--cream);
}
.preview .head2{
  text-align: center;
  margin-bottom: 56px;
}
.preview .head2 .eyebrow{ color: rgba(234,224,196,.7); display: inline-block; margin-bottom: 16px;}
.preview .head2 h2{
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(36px, 4.6vw, 68px); line-height: 1.04;
  letter-spacing: -0.01em; color: var(--cream);
  max-width: 18ch; margin: 0 auto;
}
.preview .head2 h2 em{ font-style: italic; }
.preview .head2 .lede{
  margin: 18px auto 0;
  font-family: var(--serif); font-style: italic;
  font-size: 18px; color: rgba(234,224,196,.78);
  max-width: 52ch;
}
.preview-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
}
.preview-card{
  background: var(--emerald-deep);
  border: 1px solid rgba(234,224,196,.14);
  padding: 28px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 16px;
  min-height: 320px;
  position: relative;
  overflow: hidden;
  transition: transform .3s, border-color .3s;
  cursor: pointer;
}
.preview-card:hover{ transform: translateY(-3px); border-color: rgba(234,224,196,.35);}
.preview-card .top{
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--sans); font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(234,224,196,.55);
}
.preview-card .ar{
  font-family: var(--arabic-display);
  direction: rtl;
  font-size: 32px;
  color: var(--cream);
  text-align: right;
  line-height: 1;
}
.preview-card h3{
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(24px, 1.9vw, 30px);
  line-height: 1.1;
  color: var(--cream);
  letter-spacing: -0.005em;
}
.preview-card h3 em{ font-style: italic; color: var(--cream); }
.preview-card .question{
  font-family: var(--serif); font-style: italic;
  font-size: 17px; line-height: 1.4;
  color: rgba(234,224,196,.85);
  padding: 14px 0 16px;
  border-top: 1px dotted rgba(234,224,196,.25);
  position: relative;
}
.preview-card .question::before{
  content: "« ";
  font-size: 26px; line-height: 0;
  vertical-align: -6px;
  opacity: .5;
  margin-right: 2px;
}
.preview-card .question::after{ content: " »"; opacity: .5;}
.preview-card .play{
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--sans); font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(234,224,196,.65);
}
.preview-card .play .arr{
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(234,224,196,.4);
  color: var(--cream);
  transition: background .25s, color .25s;
}
.preview-card:hover .play .arr{ background: var(--cream); color: var(--emerald); }

/* ─────────── Scenes (lifestyle) ─────────── */
.scenes{
  padding: clamp(80px, 11vh, 140px) var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.scenes-head{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  align-items: end;
  margin-bottom: 56px;
}
.scenes-head .num{ font-family: var(--sans); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--mute);}
.scenes-head .num em{ display: block; margin-top: 4px; font-family: var(--serif); font-style: italic; font-size: 42px; color: var(--ink);}
.scenes-head h2{
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(34px, 4.4vw, 64px); line-height: 1.04;
  letter-spacing: -0.008em;
}
.scenes-head h2 em{ font-style: italic; color: var(--emerald); }

.scenes-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.scene{
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 26px;
  color: var(--cream);
  border-radius: 2px;
}
.scene.a{ background: linear-gradient(165deg, #2E1F14 0%, #4A2E1B 50%, #7A4A2B 100%); }
.scene.b{ background: linear-gradient(170deg, #1E3D31 0%, #15291F 70%, #0E1D16 100%); }
.scene.c{ background: linear-gradient(155deg, #C9A877 0%, #A87C50 60%, #5E3D24 100%); }
.scene::after{
  content:""; position:absolute; inset:0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  opacity:.15; mix-blend-mode: overlay; pointer-events:none;
}
.scene > *{ position: relative; z-index: 2;}
.scene .top{
  display: flex; justify-content: space-between; align-items: flex-start;
  font-family: var(--sans); font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase;
  opacity: .85;
}
.scene .word{
  align-self: end;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(30px, 2.6vw, 40px); line-height: 1.05;
  max-width: 14ch;
}
.scene .word em{ font-style: italic; }
.scene .bot{
  display: flex; justify-content: space-between; align-items: end;
  font-family: var(--sans); font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase;
  opacity: .75;
}
.scene .bot .ar{ font-family: var(--arabic-display); font-size: 22px; letter-spacing: 0; text-transform: none; opacity: 1;}

/* ─────────── Specs / "what's inside" ─────────── */
.inside{
  padding: clamp(80px, 11vh, 140px) var(--gutter);
  background: var(--paper-warm);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.inside .visual{
  position: relative;
  aspect-ratio: 4/5;
  background: var(--emerald);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.inside .visual img{
  width: 76%;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.35));
  transform: rotate(3deg);
}
.inside .visual::after{
  content:""; position:absolute; inset:0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay; pointer-events: none;
}
.inside .visual .stamp{
  position: absolute; bottom: 24px; left: 24px;
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(234,224,196,.85);
}
.inside .visual .stamp em{ display: block; font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--cream); letter-spacing: 0; text-transform: none;}
.inside .text .eyebrow{ display: block; margin-bottom: 18px;}
.inside .text h2{
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(36px, 4.4vw, 64px); line-height: 1.05;
  letter-spacing: -0.008em;
  margin-bottom: 20px;
}
.inside .text h2 em{ font-style: italic; color: var(--emerald);}
.inside .text .desc{
  font-family: var(--serif); font-size: 18px; line-height: 1.5; color: var(--ink-soft);
  margin-bottom: 32px;
  max-width: 46ch;
}
.inside .text .desc em{ color: var(--ink); font-style: italic;}
.inside .specs2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 32px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.inside .specs2 .row{ display: flex; flex-direction: column; gap: 4px;}
.inside .specs2 .lbl{ font-family: var(--sans); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--mute);}
.inside .specs2 .val{ font-family: var(--serif); font-size: 19px; color: var(--ink); }
.inside .specs2 .val em{ font-style: italic; color: var(--emerald);}

/* ─────────── Reviews ─────────── */
.reviews{
  padding: clamp(80px, 11vh, 140px) var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.reviews-head{
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--gutter);
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.reviews-head .lhs h2{
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(34px, 4.4vw, 64px); line-height: 1.04;
  letter-spacing: -0.008em;
}
.reviews-head .lhs h2 em{ font-style: italic; color: var(--emerald);}
.reviews-head .rhs{
  text-align: right;
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--mute);
}
.reviews-head .rhs .big{
  display: block;
  font-family: var(--serif); font-style: italic; font-size: 28px;
  color: var(--ink); letter-spacing: 0; text-transform: none;
  margin-top: 4px;
}
.reviews-head .rhs .stars{ display: inline-flex; gap: 3px; color: var(--cuir); margin-top: 6px;}
.reviews-head .rhs .stars svg{ width: 16px; height: 16px; fill: currentColor;}
.reviews-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.review{
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 28px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  position: relative;
}
.review .stars{ display: inline-flex; gap: 2px; color: var(--cuir); }
.review .stars svg{ width: 13px; height: 13px; fill: currentColor; }
.review .copy{
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 19px; line-height: 1.4; color: var(--ink);
}
.review .copy::before{ content:"« "; opacity: .4; }
.review .copy::after{ content: " »"; opacity: .4;}
.review .by{
  display: flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mute);
  padding-top: 18px; border-top: 1px dotted var(--line);
}
.review .by .av{
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--emerald); color: var(--cream);
  display: grid; place-items: center;
  font-family: var(--serif); font-style: italic; font-size: 15px;
  letter-spacing: 0; text-transform: none;
}
.review .by .name{ color: var(--ink); }
.review .by .where{ margin-left: auto; opacity: .7;}

/* ─────────── Founder note ─────────── */
.founder{
  padding: clamp(80px, 11vh, 140px) var(--gutter);
  background: var(--emerald-deep);
  color: var(--cream);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.founder .portrait{
  position: relative;
  aspect-ratio: 4/5;
  background: linear-gradient(165deg, #2A4A3B 0%, #15291F 100%);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.founder .portrait::after{
  content:""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay; pointer-events: none;
}
.founder .portrait .stamp{
  position: relative; z-index: 2;
  text-align: center;
  color: rgba(234,224,196,.85);
}
.founder .portrait .stamp .ar{
  font-family: var(--arabic-display); font-size: 92px; color: var(--cream); line-height: 1;
}
.founder .portrait .stamp .role{
  display: block;
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase;
  margin-top: 18px;
}
.founder .portrait .corner{
  position: absolute; bottom: 18px; left: 18px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em; opacity: .6;
  color: var(--cream);
}
.founder .text .eyebrow{ display: block; color: rgba(234,224,196,.6); margin-bottom: 20px;}
.founder .text blockquote{
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(26px, 2.6vw, 38px); line-height: 1.25;
  color: var(--cream);
  letter-spacing: -0.005em;
  max-width: 32ch;
}
.founder .text blockquote::before{ content: "« "; opacity: .4;}
.founder .text blockquote::after{ content: " »"; opacity: .4;}
.founder .text .sig2{
  margin-top: 32px;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(234,224,196,.7);
}
.founder .text .sig2 strong{
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 18px; letter-spacing: 0; text-transform: none; color: var(--cream);
}
.founder .text .sig2 .ln{ width: 32px; height: 1px; background: rgba(234,224,196,.4); }

/* ─────────── Promises 2 (icon row, bigger) ─────────── */
.promises2{
  padding: clamp(80px, 10vh, 120px) var(--gutter);
  background: var(--paper);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--line);
}
.promises2 .pcell{
  padding: 0 32px;
  border-right: 1px solid var(--line);
  display: grid;
  gap: 16px;
}
.promises2 .pcell:first-child{ padding-left: 0;}
.promises2 .pcell:last-child{ border-right: 0; padding-right: 0;}
.promises2 .pico{
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper-warm);
  color: var(--emerald);
  border: 1px solid rgba(30,61,49,.18);
}
.promises2 .pico svg{ width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;}
.promises2 .pt{
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(22px, 1.7vw, 26px); line-height: 1.1; color: var(--ink);
}
.promises2 .pd{
  font-family: var(--sans); font-size: 11px; letter-spacing: .12em; line-height: 1.5;
  color: var(--ink-soft); text-transform: none;
}

/* ─────────── FAQ v2 ─────────── */
.faq2{
  padding: clamp(80px, 11vh, 140px) var(--gutter);
  background: var(--paper-warm);
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: clamp(40px, 5vw, 80px);
  border-bottom: 1px solid var(--line);
}
.faq2 .lhs .num{ font-family: var(--sans); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--mute);}
.faq2 .lhs .num em{ display: block; margin-top: 4px; font-family: var(--serif); font-style: italic; font-size: 42px; color: var(--ink);}
.faq2 .lhs h2{
  margin-top: 18px;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(34px, 3.6vw, 52px); line-height: 1.05;
  letter-spacing: -0.008em;
}
.faq2 .lhs h2 em{ font-style: italic; color: var(--emerald); }
.faq2 .lhs .ar{
  font-family: var(--arabic-display); direction: rtl;
  font-size: 56px; color: var(--emerald); margin-top: 16px;
}
.faq2 .lhs .contact{
  margin-top: 36px;
  font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.faq2 .lhs .contact a{ color: var(--emerald); text-decoration: underline; text-underline-offset: 3px;}

.faq2-list{ display: flex; flex-direction: column;}
.faq2-item{
  border-top: 1px solid var(--line);
  padding: 22px 0;
  cursor: pointer;
}
.faq2-item:last-child{ border-bottom: 1px solid var(--line);}
.faq2-item .q-row{
  display: grid;
  grid-template-columns: 36px 1fr 24px;
  align-items: center;
  gap: 16px;
}
.faq2-item .ix{ font-family: var(--mono); font-size: 12px; color: var(--mute);}
.faq2-item .q{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(18px, 1.4vw, 22px); line-height: 1.3; color: var(--ink);
}
.faq2-item .q em{ font-style: italic; color: var(--emerald);}
.faq2-item .tog{
  width: 24px; height: 24px;
  position: relative;
  justify-self: end;
}
.faq2-item .tog::before, .faq2-item .tog::after{
  content: ""; position: absolute; background: var(--ink);
  transition: transform .3s, opacity .3s;
}
.faq2-item .tog::before{ left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%);}
.faq2-item .tog::after{ top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%);}
.faq2-item.open .tog::before{ transform: translateX(-50%) scaleY(0); opacity: 0;}
.faq2-item .a{
  max-height: 0; overflow: hidden;
  padding-left: 52px; padding-right: 40px;
  opacity: 0;
  transition: max-height .35s ease, opacity .3s ease, margin-top .25s ease;
  font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--ink-soft);
}
.faq2-item .a em{ color: var(--ink); font-style: italic; }
.faq2-item.open .a{ opacity: 1; margin-top: 14px;}

/* ─────────── Closing CTA ─────────── */
.closing{
  padding: clamp(80px, 12vh, 160px) var(--gutter);
  background: var(--emerald);
  color: var(--cream);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.closing .ar-bg{
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  font-family: var(--arabic-display);
  direction: rtl;
  font-size: clamp(280px, 38vw, 580px);
  line-height: 1;
  color: var(--emerald-deep);
  opacity: .55;
  pointer-events: none;
  user-select: none;
}
.closing .inner{ position: relative; z-index: 2; max-width: 720px; margin: 0 auto;}
.closing .eyebrow{ color: rgba(234,224,196,.7); display: inline-block; margin-bottom: 20px;}
.closing h2{
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(40px, 5.4vw, 84px); line-height: 1.0;
  letter-spacing: -0.012em;
}
.closing h2 em{ font-style: italic; }
.closing p{
  margin-top: 20px;
  font-family: var(--serif); font-style: italic; font-size: 19px;
  color: rgba(234,224,196,.85);
  max-width: 50ch; margin-left: auto; margin-right: auto;
}
.closing .cta-row2{
  margin-top: 38px;
  display: inline-flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center;
}
.closing .cta-btn{
  display: inline-flex; align-items: center; gap: 16px;
  background: var(--cream); color: var(--emerald);
  padding: 18px 28px;
  font-family: var(--sans); font-size: 11.5px; letter-spacing: .28em; text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: background .2s;
}
.closing .cta-btn:hover{ background: var(--ivory);}
.closing .cta-btn .arr{ font-family: var(--serif); font-style: italic; font-size: 15px; letter-spacing: 0; text-transform: none;}
.closing .micro{
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(234,224,196,.65);
}

/* ─────────── Footer v2 ─────────── */
.foot2{
  padding: 56px var(--gutter) 32px;
  background: var(--emerald-ink);
  color: var(--cream);
}
.foot2-top{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--gutter);
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(234,224,196,.14);
}
.foot2-top .brand .ar{ font-family: var(--arabic-display); direction: rtl; font-size: 44px; line-height: 1; color: var(--cream);}
.foot2-top .brand .by{
  margin-top: 18px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(234,224,196,.7);
}
.foot2-top .brand .by img{ width: 22px; height: 22px;}
.foot2-top h4{
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(234,224,196,.55);
  margin-bottom: 16px;
}
.foot2-top ul{ list-style: none; padding: 0; margin: 0;}
.foot2-top li{
  font-family: var(--serif); font-style: italic; font-size: 17px;
  color: var(--cream); opacity: .9;
  padding: 4px 0;
  cursor: pointer;
}
.foot2-top li:hover{ color: var(--cream); opacity: 1;}
.foot2-bot{
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gutter);
  align-items: center;
}
.foot2-bot .l{ font-family: var(--sans); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgba(234,224,196,.55);}
.foot2-bot .c{ text-align: center; font-family: var(--serif); font-style: italic; font-size: 14px; color: rgba(234,224,196,.7);}
.foot2-bot .r{ text-align: right; display: flex; justify-content: flex-end; gap: 14px;}
.foot2-bot .r .pay{
  height: 22px; padding: 0 10px;
  display: inline-grid; place-items: center;
  font-family: var(--sans); font-size: 8.5px; font-weight: 600; letter-spacing: .1em;
  background: rgba(234,224,196,.08); color: rgba(234,224,196,.7);
  border: 1px solid rgba(234,224,196,.14);
  border-radius: 3px;
}

/* ─────────── Reveal ─────────── */
[data-reveal]{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
}
[data-reveal].in{ opacity: 1; transform: none; }

/* ─────────── Responsive ─────────── */
@media (max-width: 980px){
  .hero2{ grid-template-columns: 1fr; gap: 40px;}
  .promises{ grid-template-columns: 1fr 1fr;}
  .promise{ border-bottom: 1px solid var(--line);}
  .promise:nth-child(2){ border-right: 0;}
  .manifesto2{ grid-template-columns: 1fr; gap: 32px;}
  .preview-grid{ grid-template-columns: 1fr; }
  .scenes-head{ grid-template-columns: 1fr;}
  .scenes-grid{ grid-template-columns: 1fr;}
  .inside{ grid-template-columns: 1fr; gap: 32px;}
  .reviews-grid{ grid-template-columns: 1fr;}
  .founder{ grid-template-columns: 1fr; gap: 32px;}
  .promises2{ grid-template-columns: 1fr 1fr; gap: 24px 0;}
  .promises2 .pcell{ padding: 0 20px; }
  .promises2 .pcell:nth-child(2n){ border-right: 0;}
  .faq2{ grid-template-columns: 1fr; gap: 32px;}
  .foot2-top{ grid-template-columns: 1fr 1fr; gap: 32px;}
  .foot2-bot{ grid-template-columns: 1fr; gap: 14px; text-align: left;}
  .foot2-bot .c, .foot2-bot .r{ text-align: left; justify-content: flex-start;}
  .topnav{ grid-template-columns: auto 1fr auto;}
  .topnav .menu{ display: none;}
}