:root{
  --bg:#fdfdfb;
  --ink:#121212;
  --ink-2:#55534e;
  --line:#e4e2dc;

  /* Shaqawa (from its own stylesheet) */
  --sq-paper:#fff8ef;
  --sq-paper-2:#fbefe0;
  --sq-brand:#ff5a36;
  --sq-brand-deep:#d9401f;
  --sq-sun:#ffc22e;
  --sq-sun-soft:#fff1c9;
  --sq-sky:#4fb4ff;
  --sq-rose:#ff4f87;
  --sq-ink:#1f1a3d;

  /* Qisasi */
  --qs-night:#1b2a4a;
  --qs-page:#f5ecd9;
  --qs-gold:#e9b949;

  /* Lafta (from its logo) */
  --lf-green:#1f2a24;
  --lf-cream:#f7f3ec;
  --lf-gold:#d3a453;

  --sans:"Readex Pro", "Helvetica Neue", Arial, sans-serif;
  --pad:clamp(16px, 5vw, 64px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:18px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
p{margin:0 0 1em}
h1,h2,h3{font-weight:500;margin:0}
.shell{max-width:1200px;margin:0 auto;padding:0 var(--pad)}

/* header */
.top{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-top:28px;padding-bottom:28px}
.wordmark{font-weight:600;font-size:18px;text-decoration:none;letter-spacing:-.01em}
.top nav{display:flex;gap:26px;font-size:16px;font-weight:400}
.top nav a{text-decoration:none;color:var(--ink-2)}
.top nav a:hover{color:var(--ink);text-decoration:underline}
.top nav a.lang{color:var(--ink);font-weight:500}

/* intro */
.intro{padding-top:clamp(56px,10vw,140px);padding-bottom:clamp(64px,9vw,120px)}
.intro h1{
  font-size:clamp(34px,5.4vw,72px);
  line-height:1.06;
  letter-spacing:-.03em;
  font-weight:500;
  max-width:15em;
}
.intro h1 .soft{color:#9a978f}
.intro .after{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;margin-top:clamp(36px,5vw,56px);font-size:17px;color:var(--ink-2)}
.intro .after p{margin:0;max-width:30em}
.marks{display:flex;gap:10px;align-items:center}
.marks a{display:block;width:44px;height:44px;border-radius:12px;overflow:hidden;transition:transform .2s}
.marks a:hover{transform:translateY(-3px) rotate(-4deg)}
.marks svg{display:block;width:100%;height:100%}

/* product slabs */
.product{padding:clamp(56px,8vw,112px) 0;position:relative;overflow:hidden}
.product .shell{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,96px);align-items:center}
.product.flip .shell{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.product.flip .copy{order:2}
.name{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 18px;margin-bottom:22px}
.name h2{font-size:clamp(30px,3.6vw,44px);letter-spacing:-.02em;line-height:1}
.name .ar{line-height:1}
.pitch{font-size:clamp(20px,2vw,24px);line-height:1.4;font-weight:400;margin-bottom:22px;max-width:22em}
.facts{list-style:none;margin:0 0 28px;padding:0;font-size:16.5px}
.facts li{padding:10px 0;border-top:1px solid var(--rule)}
.facts li:last-child{border-bottom:1px solid var(--rule)}
.status{display:inline-block;font-size:14px;font-weight:500;padding:5px 12px;border-radius:99px;transform:rotate(-2deg)}
/* price list: a small panel in each product's own material, with dotted leaders */
.price{margin:0 0 28px;padding:16px 20px 14px;border-radius:18px;position:relative;max-width:30em}
.price .tag{margin:0 0 4px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.price ul{list-style:none;margin:0;padding:0}
.price li{display:flex;align-items:baseline;gap:10px;padding:6px 0;font-size:16px;line-height:1.35}
.price li i{flex:1;min-width:18px;border-bottom:2px dotted currentColor;opacity:.28;align-self:center;transform:translateY(.25em)}
.price li b{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.price li.main span{font-weight:500}
.price li.main b{font-size:22px;letter-spacing:-.01em}
.price .note{margin:8px 0 0;padding-top:10px;border-top:1px solid var(--rule);font-size:14px;line-height:1.5;opacity:.78}
.links{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.links a{font-weight:500;font-size:17px}

/* --- Shaqawa --- */
.sq{background:var(--sq-paper);color:var(--sq-ink);--rule:#f0dcc6}
.sq .ar{font-family:"Lalezar", sans-serif;color:var(--sq-brand);font-weight:400;font-size:clamp(40px,4.6vw,60px)}
.sq .status{background:var(--sq-sun);color:var(--sq-ink)}
.sq .links a{color:var(--sq-brand-deep)}
.sq .price{background:#fff;border:2px solid var(--sq-ink);box-shadow:6px 7px 0 var(--sq-paper-2)}
.sq .price li.main b{color:var(--sq-brand-deep)}
.game{
  background:#fff;border-radius:28px;padding:22px 22px 26px;
  box-shadow:0 24px 48px -24px rgba(31,26,61,.25);
  max-width:400px;margin-inline:auto;width:100%;
  border:2px solid var(--sq-ink);
}
.game .bar{display:flex;justify-content:space-between;align-items:center;font-family:"Lalezar",sans-serif;font-size:22px}
.game .bar .score{background:var(--sq-sun-soft);padding:2px 12px;border-radius:99px}
.game .ask{font-family:"Lalezar",sans-serif;font-size:clamp(30px,3.4vw,40px);text-align:center;margin:18px 0 8px}
.game .ask b{color:var(--sq-brand);font-weight:400}
.field{position:relative;height:210px;border-radius:20px;background:var(--sq-paper);overflow:hidden}
.bub{
  position:absolute;width:74px;height:74px;border-radius:50%;
  display:grid;place-items:center;
  font-family:"Lalezar",sans-serif;font-size:36px;color:#fff;
  box-shadow:inset -6px -8px 0 rgba(0,0,0,.08);
  animation:bob 3.2s ease-in-out infinite;
}
.bub.a{background:var(--sq-sky);left:8%;top:22%}
.bub.b{background:var(--sq-rose);left:40%;top:48%;animation-delay:-1.1s}
.bub.c{background:var(--sq-sun);color:var(--sq-ink);right:8%;top:14%;animation-delay:-2s}
.hero-star{position:absolute;right:16%;bottom:-6px;width:70px;height:70px;animation:hop 1.6s ease-in-out infinite}
.game{position:relative}
.game .sticker{
  position:absolute;top:-40px;left:-36px;z-index:2;width:104px;height:104px;border-radius:50%;
  display:grid;place-content:center;text-align:center;line-height:1;
  background:var(--sq-sun);color:var(--sq-ink);border:2px solid var(--sq-ink);box-shadow:4px 5px 0 var(--sq-ink);
  transform:rotate(-10deg);font-family:"Lalezar",sans-serif;
}
.game .sticker + .bar .score{visibility:hidden}
.sticker b{display:block;font-weight:400;font-size:40px}
.sticker small{display:block;margin-top:3px;font-family:var(--sans);font-size:11px;font-weight:500}
@keyframes bob{50%{transform:translateY(-10px)}}
@keyframes hop{50%{transform:translateY(-8px) rotate(6deg)}}

/* --- Qisasi --- */
.qs{background:var(--qs-night);color:var(--qs-page);--rule:rgba(245,236,217,.16)}
.qs .ar{font-family:"Aref Ruqaa",serif;color:var(--qs-gold);font-weight:700;font-size:clamp(40px,4.6vw,58px)}
.qs .status{background:var(--qs-page);color:var(--qs-night)}
.qs .facts{color:rgba(245,236,217,.86)}
.qs .price{background:rgba(245,236,217,.04);border:1px solid rgba(233,185,73,.6)}
.qs .price::before{content:"";position:absolute;inset:5px;border:1px solid rgba(233,185,73,.22);border-radius:13px;pointer-events:none}
.qs .price .tag{color:var(--qs-gold);opacity:.9}
.qs .price li.main b{color:var(--qs-gold)}
.qs::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 70%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 82%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 30%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 92%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 60%, #fff 50%, transparent 51%);
}
.qs .shell{position:relative}
.book{display:flex;justify-content:center;perspective:1200px}
.cover{
  width:min(300px,72vw);aspect-ratio:3/4;
  border-radius:14px 4px 4px 14px;
  background:linear-gradient(200deg,#2f4f86 0%, #1e3360 60%, #172848 100%);
  position:relative;overflow:hidden;
  transform:rotateY(14deg) rotate(-2deg);
  box-shadow:10px 0 0 -2px var(--qs-page), 12px 2px 0 -2px #d9ccb1, -28px 34px 50px -20px rgba(0,0,0,.6);
  border-right:10px solid #14223e; /* Arabic books are bound on the right */
  transition:transform .5s;
}
.book:hover .cover{transform:rotateY(4deg) rotate(0)}
.cover .moon{position:absolute;width:90px;height:90px;border-radius:50%;background:var(--qs-page);top:16%;left:14%;box-shadow:0 0 0 14px rgba(245,236,217,.08),0 0 0 32px rgba(245,236,217,.05)}
.cover .moon::after{content:"";position:absolute;inset:0;border-radius:50%;background:#26427a;transform:translate(26px,-8px)}
.cover .hill{position:absolute;left:-20%;right:-20%;bottom:-48%;height:80%;border-radius:50%;background:#14223e}
.cover .hill.two{bottom:-58%;left:-50%;right:20%;background:#0f1a31}
.cover .title{position:absolute;left:0;right:0;bottom:22%;text-align:center;font-family:"Aref Ruqaa",serif;font-weight:700;font-size:clamp(34px,10vw,44px);color:var(--qs-gold);line-height:1.1}
.cover .by{position:absolute;left:0;right:0;bottom:12%;text-align:center;font-family:"Amiri",serif;font-size:15px;color:rgba(245,236,217,.75)}
.cover .sticker{
  position:absolute;top:16px;right:16px;z-index:2;width:70px;height:70px;border-radius:50%;
  display:grid;place-content:center;text-align:center;line-height:1;
  background:var(--qs-gold);color:var(--qs-night);transform:rotate(8deg);
  box-shadow:0 0 0 3px rgba(233,185,73,.25),0 3px 8px rgba(0,0,0,.35);
}
.cover .sticker b{font-size:23px;font-weight:600}
.cover .sticker small{font-size:10px;font-weight:600;margin-top:1px}
.cover .s{position:absolute;color:var(--qs-gold);font-size:12px}

/* --- Lafta --- */
.lf{background:var(--lf-green);color:var(--lf-cream);--rule:rgba(247,243,236,.14)}
.lf .ar{font-family:"Amiri",serif;font-weight:700;color:var(--lf-gold);font-size:clamp(40px,4.6vw,58px)}
.lf .status{background:var(--lf-gold);color:var(--lf-green)}
.lf .facts{color:rgba(247,243,236,.86)}
.chat{
  max-width:360px;width:100%;margin-inline:auto;
  background:#e9e3d6;border-radius:26px;padding:18px 16px 22px;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.6);
}
.chat .who{display:flex;align-items:center;gap:10px;padding:2px 4px 14px;border-bottom:1px solid rgba(31,42,36,.12);margin-bottom:14px;color:var(--lf-green);font-size:14px}
.chat .who .dot{width:30px;height:30px;border-radius:50%;background:var(--lf-green);display:grid;place-items:center}
.chat .who b{font-weight:500}
.msg{background:#fff;border-radius:16px 4px 16px 16px;padding:8px;margin-inline-start:auto;width:86%;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.card{
  background:var(--lf-cream);border-radius:10px;padding:26px 18px 20px;text-align:center;color:var(--lf-green);
  border:1px solid #e7dfcf;position:relative;
}
.card::before{content:"";position:absolute;inset:7px;border:1px solid var(--lf-gold);border-radius:6px;opacity:.6;pointer-events:none}
.card .diamond{width:12px;height:12px;background:var(--lf-gold);transform:rotate(45deg);margin:0 auto 14px}
.card .t1{font-family:"Amiri",serif;font-weight:700;font-size:30px;line-height:1.2}
.card .t2{font-family:"Amiri",serif;font-size:17px;margin-top:8px;opacity:.85}
.msg .time{font-size:11px;color:#8a8a80;text-align:left;margin-top:6px;padding:0 4px}
.msg-in{background:#fff;border-radius:4px 16px 16px 16px;padding:8px 12px;margin-top:12px;width:fit-content;max-width:80%;font-size:15px;color:#222}

/* client work */
.clients{padding-top:clamp(72px,10vw,140px);padding-bottom:clamp(48px,6vw,80px)}
.clients .grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,6vw,96px)}
.clients h2{font-size:clamp(30px,3.8vw,48px);line-height:1.08;letter-spacing:-.025em}
.clients .lead{font-size:clamp(19px,1.8vw,22px);font-weight:400;max-width:30em}
.clients .body p{color:var(--ink-2)}
.clients .body p.lead{color:var(--ink)}
.list{counter-reset:n;list-style:none;padding:0;margin:28px 0 0}
.list li{counter-increment:n;display:grid;grid-template-columns:44px 1fr;gap:8px;padding:16px 0;border-top:1px solid var(--line)}
.list li:last-child{border-bottom:1px solid var(--line)}
.list li::before{content:counter(n);color:#a3a097;font-weight:400}
.list b{font-weight:500;display:block}
.list span{color:var(--ink-2);font-size:16.5px}

/* contact */
.contact{padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(72px,9vw,120px)}
.contact p{font-size:clamp(19px,1.8vw,22px);max-width:28em;color:var(--ink-2)}
.contact .mail{
  display:inline-block;margin-top:8px;
  font-size:clamp(24px,4.6vw,60px);font-weight:500;letter-spacing:-.03em;line-height:1.1;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em;
  overflow-wrap:anywhere;
}
.contact .mail:hover{text-decoration-color:var(--sq-brand)}
.contact .ways{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(4px,1vw,10px)}
.contact .tel{
  font-size:clamp(22px,3.3vw,42px);font-weight:400;letter-spacing:-.02em;line-height:1.15;color:var(--ink-2);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em;white-space:nowrap;
}
.contact .tel:hover{color:var(--ink);text-decoration-color:var(--sq-brand)}
.contact p.policy{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);font-size:16px;max-width:36em}
.contact p.policy a{color:var(--ink);font-weight:500}

footer{border-top:1px solid var(--line);padding:22px 0 34px;font-size:14px;color:#8d8a82}
footer .shell{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer nav{display:flex;gap:20px}

@media (max-width:900px){
  .product .shell,.product.flip .shell,.clients .grid{grid-template-columns:1fr}
  .product.flip .copy{order:0}
  .product .visual{order:2}
}
@media (max-width:520px){
  body{font-size:17px}
  .top nav{gap:16px;font-size:15px}
  .top nav .opt{display:none}
  .field{height:180px}
  .bub{width:62px;height:62px;font-size:30px}
  .price{padding:14px 16px 12px}
  .price li{font-size:15px}
  .price li.main b{font-size:19px}
  .game .sticker{width:84px;height:84px;top:-30px;left:-8px}
  .game .sticker b{font-size:32px}
  .game .sticker small{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* Arabic pages */
html[lang="ar"] body{font-weight:400;line-height:1.8}
html[lang="ar"] *{letter-spacing:0 !important}
html[lang="ar"] .intro h1{line-height:1.35;font-size:clamp(32px,5vw,64px)}
html[lang="ar"] .pitch{line-height:1.7}
html[lang="ar"] .clients h2{line-height:1.3}
.name .lat{font-size:clamp(22px,2.4vw,30px);font-weight:500;opacity:.7;line-height:1}
html[lang="ar"] .list li::before{content:counter(n, arabic-indic)}
html[lang="ar"] .price .tag{letter-spacing:0;font-size:14px}
html[lang="ar"] .sticker small{font-family:var(--sans)}