/* BiSSMiXi — site design system · v2.0 · September 2026
   Palette taken directly from the BiSSMiXi Brand Guideline (Colour, page 04):
     #FFFFFF · #F9F0FE · #DFCCF9 · #8974C0 (primary)
   Typography per the same document: Optima primary, Montserrat secondary —
   "the font family for BiSSMiXi across websites and digital platforms".
   Optima has no reliable web licence, so Fraunces carries the display line and
   Montserrat carries everything else, as agreed 10 Sep 2026.

   One addition the guideline does not cover: #8974C0 measures 3.55:1 against
   the paper tint, below the 4.5:1 WCAG AA needs for text under 24px. The same
   hue darkened — --violet-ink — is used wherever the colour becomes small type
   or a background behind white text. The brand colour itself is unchanged and
   still carries every fill, gradient, graphic and display figure. */

:root{
  /* ---- from the brand guideline, exactly ---- */
  --violet:#8974C0;        /* primary        RGB 137,116,192 */
  --lav:#DFCCF9;           /* light tint     RGB 223,204,249 */
  --paper:#F9F0FE;         /* lightest tint  RGB 249,240,254 */
  --white:#FFFFFF;

  /* ---- derived from the primary, for contrast and depth ---- */
  --violet-ink:#6C52B1;    /* small text and solid fills · 5.44:1 on paper */
  --violet-deep:#4D3A7F;   /* deepest — dark fields */
  --violet-soft:#A995D6;   /* lighter — glows and haze */
  --pale:#EFE4FB;          /* between the tint and the paper */
  --lav-2:#B9A3E4;
  --lav-3:#CBB8EF;

  --grad:linear-gradient(90deg,#DFCCF9 0%,#B9A3E4 79%,#CBB8EF 100%);
  --grad-deep:linear-gradient(90deg,#A995D6 0%,#7B63B8 60%,#9880CC 100%);

  /* ---- neutrals (not brand colours; carry the reading) ---- */
  --ink:#221E33;
  --muted:#5F5980;
  --faint:#645E80;
  --rule:rgba(34,30,51,.12);
  --rule-strong:rgba(34,30,51,.22);
  --on-violet-muted:rgba(255,255,255,.72);
  --on-violet-rule:rgba(255,255,255,.22);

  --serif:"Fraunces","Optima","Instrument Serif","Amiri",Georgia,serif;
  --sans:"Montserrat","IBM Plex Sans Arabic","Helvetica Neue",Arial,sans-serif;

  --w:1200px;
  --gutter:clamp(20px,4vw,48px);
  --r:20px;
  --r-sm:12px;
  --shadow:0 20px 60px -20px rgba(77,58,127,.25);
  --ease:cubic-bezier(.2,.7,.2,1);
}

html[lang="ar"]{
  --serif:"Amiri","Instrument Serif",serif;
  --sans:"IBM Plex Sans Arabic","Montserrat",Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;font-variation-settings:"opsz" 14;font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}
html[lang="ar"] body{font-size:17.5px;line-height:1.85}
img,video,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:var(--lav);color:var(--ink)}

/* ---------- Type ---------- */
h1,h2,h3,.display{font-family:var(--serif);font-weight:380;letter-spacing:-.022em;line-height:1.02;margin:0;font-variation-settings:"opsz" 144,"SOFT" 40,"WONK" 1;font-optical-sizing:auto}
h3{font-variation-settings:"opsz" 72,"SOFT" 40,"WONK" 1;font-weight:400}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] .display{font-weight:700;line-height:1.35;letter-spacing:0}
h1{font-size:clamp(44px,6.4vw,88px)}
h2{font-size:clamp(34px,4.4vw,58px)}
h3{font-size:clamp(24px,2.4vw,32px)}
h4{font-family:var(--sans);font-weight:600;font-size:17px;margin:0 0 6px;letter-spacing:-.01em}
p{margin:0 0 1em}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--muted);max-width:62ch}
html[lang="ar"] .lede{line-height:1.9}
.acc{font-style:italic;font-weight:420;font-variation-settings:"opsz" 144,"SOFT" 60,"WONK" 1;background:var(--grad-deep);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-inline:.02em}
.on-violet .acc{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;opacity:1}
html[lang="ar"] .acc{font-style:normal}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:12px;font-weight:600;font-stretch:90%;letter-spacing:.18em;text-transform:uppercase;color:var(--violet-ink);margin:0 0 20px;
}
html[lang="ar"] .eyebrow{letter-spacing:0;font-size:13.5px}
.eyebrow::before{content:"✦";font-size:11px}
.on-violet .eyebrow{color:var(--lav)}
.muted{color:var(--muted)}
.small{font-size:14.5px}
.num{font-family:var(--serif);font-size:clamp(40px,5vw,64px);line-height:1;color:var(--violet)}
.on-violet .num{color:#fff}
.center{text-align:center}
.mx{margin-inline:auto}
.max-60{max-width:60ch}
.max-70{max-width:70ch}
hr.rule{border:0;border-top:1px solid var(--rule);margin:0}

/* ---------- Layout ---------- */
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:860px;margin:0 auto;padding:0 var(--gutter)}
section{padding:clamp(72px,9vw,128px) 0;position:relative}
section.tight{padding:clamp(48px,6vw,80px) 0}
.grid{display:grid;gap:clamp(20px,3vw,40px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.split-3-2{display:grid;grid-template-columns:3fr 2fr;gap:clamp(32px,6vw,96px);align-items:start}
.section-head{max-width:760px;margin-bottom:clamp(40px,5vw,64px)}
.section-head.center{margin-inline:auto}
@media (max-width:980px){
  .g3,.g4,.g5{grid-template-columns:repeat(2,1fr)}
  .split,.split-3-2{grid-template-columns:1fr}
}
@media (max-width:600px){
  .g2,.g3,.g4,.g5{grid-template-columns:1fr}
}

/* ---------- Fields (backgrounds) ---------- */
.field-light{
  background:
    radial-gradient(55% 60% at 20% 30%, rgba(223,204,249,.9) 0%, rgba(223,204,249,0) 65%),
    radial-gradient(50% 55% at 80% 20%, rgba(185,163,228,.75) 0%, rgba(185,163,228,0) 65%),
    radial-gradient(40% 50% at 60% 90%, rgba(169,149,214,.45) 0%, rgba(169,149,214,0) 65%),
    #F9F0FE;
}
.field-pale{background:var(--pale)}
.field-violet,.on-violet{
  background:
    radial-gradient(60% 70% at 15% 20%, rgba(169,149,214,.55) 0%, rgba(169,149,214,0) 65%),
    radial-gradient(50% 60% at 85% 80%, rgba(137,116,192,.7) 0%, rgba(137,116,192,0) 65%),
    #221E33;
  color:#fff;
}
.on-violet .muted{color:var(--on-violet-muted)}
.on-violet .lede{color:var(--on-violet-muted)}
.on-violet hr.rule{border-color:var(--on-violet-rule)}
.field-ink{background:var(--ink);color:#fff}

/* sparkle pattern */
.pattern{
  position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:radial-gradient(circle at center, currentColor 1.1px, transparent 1.6px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 70%);
          mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 70%);
  color:var(--violet);
}
.on-violet .pattern{color:#fff;opacity:.16}
.star{position:absolute;pointer-events:none;color:var(--violet);opacity:.9}
.star svg{width:100%;height:100%}
.on-violet .star{color:#fff}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  background:rgba(249,240,254,.78);border-bottom:1px solid var(--rule);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.brand{display:flex;align-items:center;gap:12px;color:var(--violet)}
.brand .wm{height:22px;width:auto}
.brand .wm svg{height:22px;width:auto}
.brand sup{font-size:9px;vertical-align:top;margin-inline-start:2px}
.menu{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.menu .m-only{display:none}
.menu a{
  display:inline-block;padding:8px 12px;border-radius:999px;font-size:14.5px;font-weight:500;font-stretch:95%;color:var(--ink);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.menu a:hover{background:var(--pale);color:var(--violet-ink)}
.menu a[aria-current="page"]{color:var(--violet-ink);font-weight:600}
.nav-actions{display:flex;align-items:center;gap:10px}
.lang{
  font-size:13px;font-weight:600;letter-spacing:.06em;padding:8px 12px;border-radius:999px;border:1px solid var(--rule-strong);
  color:var(--ink);transition:.2s var(--ease);
}
.lang:hover{border-color:var(--violet-ink);color:var(--violet-ink)}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer;color:var(--ink)}
.burger span{display:block;width:22px;height:2px;background:currentColor;margin:5px 0;border-radius:2px;transition:.25s}
@media (max-width:1080px){
  .menu{display:none;position:absolute;top:72px;inset-inline:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--rule);padding:12px var(--gutter) 20px}
  .menu.open{display:flex}
  .menu .m-only{display:block}
  .menu a{padding:12px 8px;font-size:17px;border-radius:10px}
  .burger{display:block}
  .nav .btn{display:none}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  padding:14px 24px;border-radius:999px;font-weight:600;font-stretch:95%;font-size:15px;line-height:1;
  border:1px solid transparent;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s,color .2s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 10px 30px -12px rgba(34,30,51,.5)}
.btn-primary:hover{background:var(--violet-ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn-ghost:hover{border-color:var(--violet-ink);color:var(--violet-ink)}
.on-violet .btn-primary{background:#fff;color:var(--ink);box-shadow:0 10px 30px -12px rgba(0,0,0,.4)}
.on-violet .btn-primary:hover{background:var(--pale)}
.on-violet .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.on-violet .btn-ghost:hover{border-color:#fff;color:#fff}
.btn .arr{transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
html[dir="rtl"] .btn .arr{transform:scaleX(-1)}
html[dir="rtl"] .btn:hover .arr{transform:scaleX(-1) translateX(3px)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.link{color:var(--violet-ink);font-weight:600;border-bottom:1px solid transparent;transition:.2s}
.link:hover{border-color:var(--violet-ink)}
.on-violet .link{color:#fff}

/* ---------- Hero ---------- */
.hero{padding:clamp(56px,8vw,120px) 0 clamp(64px,8vw,120px);overflow:hidden;position:relative}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,4vw,64px);align-items:center;position:relative}
.hero .hero-text{position:relative;z-index:2;padding-inline-end:16px;min-width:0}
.hero h1{max-width:12ch}
html[lang="ar"] .hero h1{max-width:20ch}
.hero .lede{margin:28px 0 36px;max-width:46ch}
.hero-glass{
  position:relative;width:min(54vw,740px);max-width:none;justify-self:end;margin-inline-end:-34%;pointer-events:none;
  filter:drop-shadow(0 40px 80px rgba(77,58,127,.25));
  animation:float 9s ease-in-out infinite;
}
html[dir="rtl"] .hero-glass{transform:scaleX(-1)}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -14px}}
.hero-meta{display:grid;grid-template-columns:repeat(4,auto);gap:20px;margin-top:40px;padding-top:28px;border-top:1px solid var(--rule)}
.hero-meta div{min-width:120px}
.hero-meta .k{font-family:var(--serif);font-size:28px;line-height:1;color:var(--violet-ink)}
.hero-meta .v{font-size:12.5px;color:var(--muted);margin-top:6px;letter-spacing:.04em}
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-meta{grid-template-columns:repeat(2,1fr)}
  .hero-glass{width:min(80vw,460px);margin:24px auto 0;margin-inline-end:auto;justify-self:center}
  .hero .hero-text{padding-inline-end:0}
}

/* Page hero (inner pages) */
.page-hero{padding:clamp(56px,7vw,96px) 0 clamp(40px,5vw,64px)}
.page-hero h1{max-width:16ch}
.page-hero .answer{
  margin-top:28px;padding:22px 26px;border-inline-start:3px solid var(--violet);
  background:rgba(255,255,255,.55);border-radius:0 var(--r-sm) var(--r-sm) 0;max-width:72ch;font-size:17px;line-height:1.65;
}
html[dir="rtl"] .page-hero .answer{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.page-hero .answer strong{color:var(--violet-ink)}
.dateline{font-size:13px;color:var(--faint);letter-spacing:.04em;margin-top:14px}

/* ---------- Cards ---------- */
.card{
  background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:clamp(24px,3vw,36px);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(137,116,192,.35)}
.card h3{font-size:26px;margin-bottom:10px}
.card p{color:var(--muted);margin-bottom:0}
.card .idx{font-family:var(--serif);font-size:15px;color:var(--violet-ink);letter-spacing:.1em;margin-bottom:14px;display:block}
.on-violet .card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.card.card-violet{background:var(--violet);border-color:var(--violet);color:#fff}
.card.card-violet p{color:rgba(255,255,255,.8)}
.card.card-violet .more{color:#fff}
.card.card-violet .badge{background:rgba(255,255,255,.14);color:#fff}
.card.card-violet .btn-primary{background:#fff;color:var(--violet)}
.card.card-violet h3,.card.card-violet h4{color:#fff}
.on-violet .card p{color:var(--on-violet-muted)}
.on-violet .card .idx{color:var(--lav)}
.card-link{display:flex;flex-direction:column;gap:12px}
.card-link .more{margin-top:auto;color:var(--violet-ink);font-weight:600;font-size:14px}
.on-violet .card-link .more{color:#fff}

/* service tiles on home */
.svc{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--rule)}
.svc a{
  display:grid;grid-template-columns:80px 1.2fr 2fr auto;gap:28px;align-items:center;
  padding:30px 0;border-bottom:1px solid var(--rule);transition:.25s var(--ease);
}
.svc a:hover{padding-inline-start:12px}
.svc .n{font-family:var(--serif);font-size:22px;color:var(--violet-ink)}
.svc h3{font-size:30px}
.svc p{margin:0;color:var(--muted)}
.svc .go{width:44px;height:44px;border-radius:50%;border:1px solid var(--rule-strong);display:grid;place-items:center;color:var(--violet-ink);transition:.25s}
.svc a:hover .go{background:var(--violet);color:#fff;border-color:var(--violet)}
html[dir="rtl"] .svc .go svg{transform:scaleX(-1)}
@media (max-width:900px){.svc a{grid-template-columns:1fr;gap:10px}.svc .go{display:none}}

/* ---------- Pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:16px;align-items:stretch}
.plan{
  background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:28px 22px;display:flex;flex-direction:column;gap:14px;position:relative;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.plan.hi{background:var(--ink);color:#fff;border-color:var(--ink)}
.plan.hi .muted,.plan.hi .price small,.plan.hi li,.plan.hi .desc{color:rgba(255,255,255,.82)}
.plan.hi li.no{color:rgba(255,255,255,.45)}
.plan.hi li.no::before{color:rgba(255,255,255,.45)}
.plan .tag{position:absolute;top:-12px;inset-inline-start:22px;background:var(--ink);color:#fff;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:999px;font-weight:600}
html[lang="ar"] .plan .tag{letter-spacing:0;font-size:12.5px}
.plan.hi .tag{background:#fff;color:var(--violet-ink)}
.plan h3{font-size:28px}
.plan .price{font-family:var(--serif);font-size:32px;line-height:1;margin:6px 0 2px}
.plan .price small{font-family:var(--sans);font-size:13px;color:var(--muted);display:block;margin-top:8px;letter-spacing:.04em}
.plan .desc{color:var(--muted);font-size:15px;min-height:3.2em}
.plan ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px;font-size:14.5px}
.plan li{display:flex;gap:10px;align-items:flex-start;color:var(--ink)}
.plan li::before{content:"✦";color:var(--violet);font-size:10px;margin-top:6px;flex:none}
.plan.hi li::before{color:#fff}
.plan li.no{color:var(--faint)}
.plan li.no::before{content:"—";color:var(--faint);margin-top:0}
.plan .btn{margin-top:auto;width:100%}

/* Comparison table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);background:#fff}
table.cmp{border-collapse:collapse;width:100%;min-width:720px;font-size:14.5px}
table.cmp th,table.cmp td{padding:14px 18px;border-bottom:1px solid var(--rule);text-align:start;vertical-align:middle}
table.cmp thead th{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--ink);background:var(--pale);position:sticky;top:0}
html[lang="ar"] table.cmp thead th{font-weight:700;font-size:20px}
table.cmp thead th:first-child{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-ink);font-weight:600}
html[lang="ar"] table.cmp thead th:first-child{letter-spacing:0;font-size:13px}
table.cmp tbody th{font-weight:500;color:var(--ink);width:32%}
table.cmp td{color:var(--muted);text-align:center}
table.cmp td.y{color:var(--violet-ink);font-size:16px}
table.cmp td.n{color:var(--lav)}
table.cmp tr.price td{font-family:var(--serif);font-size:22px;color:var(--ink)}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp tbody tr:hover td,table.cmp tbody tr:hover th{background:var(--paper)}

/* Add-ons */
.addons{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.addon{background:#fff;border:1px solid var(--rule);border-radius:var(--r-sm);padding:16px 18px;display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:15px}
.addon span{color:var(--faint);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
html[lang="ar"] .addon span{letter-spacing:0;text-transform:none}

/* ---------- Process / steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:0;counter-reset:step;position:relative}
.step{padding:28px 24px 28px 0;border-top:1px solid var(--rule);position:relative}
html[dir="rtl"] .step{padding:28px 0 28px 24px}
.step::before{
  content:"";position:absolute;top:-5px;inset-inline-start:0;width:9px;height:9px;border-radius:50%;background:var(--violet);
}
.on-violet .step{border-color:var(--on-violet-rule)}
.on-violet .step::before{background:#fff}
.step .k{font-family:var(--serif);font-size:15px;letter-spacing:.12em;color:var(--violet-ink);margin-bottom:12px}
.on-violet .step .k{color:var(--lav)}
.step h3{font-size:24px;margin-bottom:8px}
.step p{color:var(--muted);font-size:15px;margin:0}
.on-violet .step p{color:var(--on-violet-muted)}

/* Stat row */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px}
.stat .num{margin-bottom:8px}
.stat .lbl{font-size:14px;color:var(--muted);letter-spacing:.02em}
.on-violet .stat .lbl{color:var(--on-violet-muted)}

/* Two-column bilingual quote */
.quote{font-family:var(--serif);font-size:clamp(28px,3.6vw,46px);line-height:1.2;max-width:24ch}
html[lang="ar"] .quote{line-height:1.5}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 0;font-family:var(--serif);font-size:clamp(20px,2vw,25px);line-height:1.25;
}
html[lang="ar"] .faq summary{font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-size:24px;color:var(--violet-ink);flex:none;transition:transform .25s var(--ease);width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--rule-strong);border-radius:50%}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 24px;color:var(--muted);max-width:75ch;font-size:16px}
.faq .a p:last-child{margin:0}

/* ---------- Gallery ---------- */
.frames{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.frame{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:9/16;background:var(--ink);isolation:isolate}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.frame:hover img{transform:scale(1.04)}
.frame .cap{
  position:absolute;inset:auto 0 0 0;padding:44px 16px 16px;color:#fff;
  background:linear-gradient(to top, rgba(34,30,51,.85), rgba(34,30,51,0));font-size:13.5px;line-height:1.4;
}
.frame .cap b{display:block;font-family:var(--serif);font-size:17px;font-weight:400;margin-bottom:2px}
html[lang="ar"] .frame .cap b{font-weight:700}
.frame .pill{position:absolute;top:12px;inset-inline-start:12px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.55);padding:5px 9px;border-radius:999px;backdrop-filter:blur(6px)}
html[lang="ar"] .frame .pill{letter-spacing:0;font-size:11.5px}
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.vid{background:#fff;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.vid .thumb{aspect-ratio:16/9;background:var(--pale);position:relative;display:grid;place-items:center;color:var(--violet)}
.vid .thumb iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid .body{padding:18px 20px 20px}
.vid h3{font-size:22px;margin-bottom:6px}
.vid p{font-size:14.5px;color:var(--muted);margin:0}
.vid .meta{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
html[lang="ar"] .vid .meta{letter-spacing:0}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filters button{background:#fff;border:1px solid var(--rule-strong);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:500;cursor:pointer;color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--violet);color:#fff;border-color:var(--violet-ink)}
.empty{padding:40px;border:1px dashed var(--rule-strong);border-radius:var(--r);text-align:center;color:var(--muted)}

/* ---------- Forms ---------- */
.form{display:grid;gap:16px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.form .row{grid-template-columns:1fr}}
.form label{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--muted);margin-bottom:6px}
.form input,.form select,.form textarea{
  width:100%;padding:14px 16px;border:1px solid var(--rule-strong);border-radius:12px;background:#fff;font:inherit;font-size:16px;color:var(--ink);
  transition:border-color .2s,box-shadow .2s;
}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--violet);box-shadow:0 0 0 4px rgba(137,116,192,.12)}
.form textarea{min-height:130px;resize:vertical}
.form .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.form .msg{display:none;padding:14px 18px;border-radius:12px;font-size:15px}
.form .msg.ok{display:block;background:#E7F7EE;color:#0F5132}
.form .msg.err{display:block;background:#FDECEC;color:#7A1F1F}
.form-card{background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:clamp(24px,4vw,44px);box-shadow:var(--shadow)}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.checks label{display:flex;gap:10px;align-items:center;font-size:15px;font-weight:500;color:var(--ink);padding:12px 14px;border:1px solid var(--rule);border-radius:12px;cursor:pointer;margin:0;letter-spacing:0}
.checks input{width:auto;accent-color:var(--violet)}

/* ---------- CTA band ---------- */
.cta{padding:clamp(64px,8vw,110px) 0;position:relative;overflow:hidden}
.cta h2{max-width:18ch}
.cta .btn-row{margin-top:32px}
.cta .glass{position:absolute;inset-inline-end:-10%;bottom:-30%;width:min(46vw,620px);opacity:.9;pointer-events:none}
@media (max-width:900px){.cta .glass{display:none}}

/* ---------- Footer ---------- */
footer{background:#0F1018;color:#fff;padding:clamp(56px,7vw,88px) 0 36px}
footer .top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:56px}
@media (max-width:900px){footer .top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){footer .top{grid-template-columns:1fr}}
footer .wm{color:#fff;height:26px}
footer .wm svg{height:26px;width:auto}
footer .tag{font-family:var(--serif);font-size:20px;margin:16px 0 8px;color:var(--lav)}
footer p{color:rgba(255,255,255,.7);font-size:14.5px;max-width:40ch}
footer h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--lav);margin-bottom:14px}
html[lang="ar"] footer h4{letter-spacing:0;font-size:13.5px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:15px}
footer li a{color:rgba(255,255,255,.85);transition:.2s}
footer li a:hover{color:#fff}
footer .bottom{border-top:1px solid rgba(255,255,255,.15);padding-top:24px;display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.6)}
footer .social{display:flex;gap:10px;flex-wrap:wrap}
footer .social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;color:#fff;transition:.2s}
footer .social a:hover{background:#fff;color:var(--ink)}
footer .social svg{width:16px;height:16px;fill:currentColor}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.hero-glass{animation:none}}

/* ---------- Misc ---------- */
.badge{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--pale);color:var(--violet-deep)}
html[lang="ar"] .badge{letter-spacing:0;font-size:12.5px}
.on-violet .badge{background:rgba(255,255,255,.14);color:#fff}
.note{font-size:14px;color:var(--faint);margin-top:16px}
.list{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.list li{display:flex;gap:12px;align-items:flex-start}
.list li::before{content:"✦";color:var(--violet);font-size:11px;margin-top:8px;flex:none}
.on-violet .list li::before{color:var(--lav)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;font-size:15.5px}
.kv dt{color:var(--faint);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;padding-top:3px}
html[lang="ar"] .kv dt{letter-spacing:0;font-size:13.5px}
.kv dd{margin:0}
.prose{max-width:70ch}
.prose h2{font-size:clamp(28px,3.2vw,40px);margin:48px 0 16px}
.prose h3{font-size:24px;margin:32px 0 10px}
.prose p,.prose li{color:var(--ink);font-size:17px;line-height:1.7}
.prose ul{padding-inline-start:22px}
.prose table{border-collapse:collapse;width:100%;font-size:15px;margin:20px 0}
.prose th,.prose td{border-bottom:1px solid var(--rule);padding:10px 12px;text-align:start}
.prose th{font-weight:600;color:var(--violet)}
.prose blockquote{margin:28px 0;padding-inline-start:22px;border-inline-start:3px solid var(--violet);font-family:var(--serif);font-size:24px;line-height:1.3;color:var(--ink)}
.breadcrumb{font-size:13px;color:var(--faint);margin-bottom:24px;display:flex;gap:8px;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--violet-ink)}
.two-lang{display:grid;grid-template-columns:1fr 1fr;gap:32px}
@media (max-width:760px){.two-lang{grid-template-columns:1fr}}
.wa{display:inline-flex;align-items:center;gap:8px}
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{width:auto;height:auto;clip:auto;inset-inline-start:16px;top:16px;background:#fff;padding:10px 14px;z-index:100;border-radius:8px}