/* @fonts:start — generated by tools/fonts.mjs, do not edit */
@font-face{font-family:"Cairo";font-style:normal;font-weight:400 900;font-display:optional;src:url("../fonts/cairo-arabic.woff2") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"Cairo";font-style:normal;font-weight:400 900;font-display:swap;src:url("../fonts/cairo-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Cairo";font-style:normal;font-weight:400 900;font-display:swap;src:url("../fonts/cairo-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:600 700;font-display:swap;src:url("../fonts/playfair-display-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:600 700;font-display:swap;src:url("../fonts/playfair-display-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:600 800;font-display:swap;src:url("../fonts/playfair-display-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:600 800;font-display:swap;src:url("../fonts/playfair-display-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/inter-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/inter-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Aref Ruqaa";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/aref-ruqaa-700-accent.woff2") format("woff2");unicode-range:U+45, U+4a, U+54, U+61-62, U+65, U+67-68, U+6c-6f, U+72-75, U+627-628, U+62f, U+631, U+634, U+639, U+644-645, U+647-648, U+64a-64b}
/* @fonts:end */
/*
 * PUBMEDIA64 — the one stylesheet (static site + WordPress theme).
 * Tokens copied 1:1 from DESIGN/tokens. Mobile first: base rules are the phone layout, larger screens
 * are added with min-width queries only. Logical properties everywhere, so Arabic (RTL) mirrors itself.
 * Author: Abdelmalek Meskik (tech partner) — platform by MeskikCode.
 */

/* ── 1. Tokens ─────────────────────────────────────────────── */
:root {
  --pm-charcoal: #0B0F12; --pm-charcoal-800: #12181C; --pm-charcoal-700: #1A2227; --pm-charcoal-600: #252F35; --pm-charcoal-500: #3A464D;
  --pm-cream: #F9F6F0; --pm-cream-200: #F1EBDF; --pm-cream-300: #E6DCC9;
  --pm-gold: #D4AF37; --pm-gold-soft: #C5A059; --pm-gold-light: #E9CF7A; --pm-gold-deep: #9C7A23;
  --pm-gold-gradient: linear-gradient(135deg, #E9CF7A 0%, #D4AF37 45%, #9C7A23 100%);
  --pm-gold-foil: linear-gradient(115deg, #8A6A1C 0%, #E9CF7A 18%, #FFF3C4 28%, #C9A23A 42%, #8A6A1C 58%, #E2C268 74%, #FBEBB0 84%, #A9852B 100%);
  --pm-brush: #2B1A10; --pm-sunset: #F2A63B; --pm-sand-glow: #F6E3C1;
  --agro-forest: #06231A; --agro-olive: #556B2F; --agro-sand: #E6DEC9;
  --cosm-blush: #E4A4A4; --cosm-salmon: #F2D1D1; --cosm-emerald: #082F24;
  --pm-success: #4F8A3C; --pm-warning: #E0A21B; --pm-danger: #C2463A; --pm-info: #3E7C93;

  --surface-page: var(--pm-cream); --surface-raised: #FFFFFF; --surface-card: #FFFDF8; --surface-sunken: var(--pm-cream-200);
  --surface-overlay: rgba(249, 246, 240, .82);
  --text-strong: #0B0F12; --text-body: #242C31; --text-muted: #4A545A; --text-accent: #664A0C; --text-on-gold: #1A1408;
  --border-subtle: rgba(11, 15, 18, .08); --border-default: rgba(11, 15, 18, .14); --border-accent: rgba(156, 122, 35, .5);
  --accent: var(--pm-gold); --accent-hover: #C29E2B; --accent-press: var(--pm-gold-deep); --accent-tint: rgba(212, 175, 55, .14);
  --focus-ring: 0 0 0 3px rgba(212, 175, 55, .55);
  --badge-filter: none;

  --font-arabic: "Cairo", "Tajawal", system-ui, sans-serif;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-callig: "Aref Ruqaa", "Amiri", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --font-heading: var(--font-serif); --font-body: var(--font-sans);
  --lh-body: 1.7; --lh-heading: 1.2; --tracking-meta: .16em; --tracking-wide: .04em;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;
  --container: 1200px; --narrow: 760px; --gutter: 16px; --header-h: 64px; --tap: 44px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .14);
  --shadow-md: 0 10px 30px -14px rgba(90, 60, 20, .28);
  --shadow-lg: 0 24px 60px -24px rgba(90, 60, 20, .35);
  --shadow-gold: 0 0 0 1px rgba(212, 175, 55, .5), 0 10px 30px -12px rgba(212, 175, 55, .45);
  --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 150ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-reveal: 700ms;
  --texture-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.25 0 0 0 0 0.1 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --foil-text: linear-gradient(115deg, #5E440C 0%, #9C7A23 22%, #C49A2C 36%, #7A5A14 52%, #A8842A 70%, #C9A23A 84%, #6B4F12 100%);
  color-scheme: light;
}
[data-theme="dark"] {
  --surface-page: var(--pm-charcoal); --surface-raised: var(--pm-charcoal-800); --surface-card: var(--pm-charcoal-700); --surface-sunken: #070A0C;
  --surface-overlay: rgba(11, 15, 18, .78);
  --text-strong: #F9F6F0; --text-body: #D9D4CA; --text-muted: #A3ACB1; --text-accent: var(--pm-gold);
  --border-subtle: rgba(249, 246, 240, .08); --border-default: rgba(249, 246, 240, .15); --border-accent: rgba(212, 175, 55, .55);
  --accent-hover: var(--pm-gold-light); --accent-tint: rgba(212, 175, 55, .12);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, .35); --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .55);
  --badge-filter: invert(1) sepia(.5) saturate(2.4) hue-rotate(5deg) brightness(.95);
  color-scheme: dark;
}
:lang(ar) {
  --font-heading: var(--font-arabic); --font-body: var(--font-arabic); --font-mono: var(--font-arabic);
  --lh-body: 1.85; --lh-heading: 1.45; --tracking-meta: 0; --tracking-wide: 0;
}

/* Bright foil wherever the ground is dark (dark theme, footer, menu, dark bands, canvases). */
[data-theme="dark"], .site-footer, .menu, .cta, .factors, .teaser--contest, .page-hero--sunset, .canvas-agro, .canvas-coffee, .hero__frame { --foil-text: var(--pm-gold-foil); }

/* ── 2. Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; min-height: 100svh; background: var(--surface-page); color: var(--text-body);
  font-family: var(--font-body); font-size: 1rem; line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; color: var(--text-strong); font-family: var(--font-heading); line-height: var(--lh-heading); text-wrap: balance; }
p, ul, ol, dl, figure { margin: 0; }
p { text-wrap: pretty; }
a { color: var(--text-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
::selection { background: var(--accent); color: var(--text-on-gold); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: 16px; top: -100px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-pill); background: var(--accent); color: var(--text-on-gold); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .icon--flip { transform: scaleX(-1); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: var(--narrow); }
.section { padding-block: var(--space-16); }
.section--tight { padding-block: var(--space-10); }
.section--sunken { background: var(--surface-sunken); border-block: 1px solid var(--border-subtle); }
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-8); }
.center { text-align: center; }

/* texture + gold */
.grain { position: relative; isolation: isolate; }
.grain::after { content: ""; position: absolute; inset: 0; background: var(--texture-grain); opacity: .2; mix-blend-mode: multiply; pointer-events: none; z-index: -1; }
.foil { background: var(--pm-gold-foil); background-size: 200% 100%; animation: pm-foil 6s var(--ease-in-out) infinite alternate; }
.foil-text { background: var(--foil-text, var(--pm-gold-foil)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: pm-foil 6s var(--ease-in-out) infinite alternate; }
@keyframes pm-foil { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.callig { font-family: var(--font-callig); font-weight: 700; line-height: 1.2; letter-spacing: 0; }

/* ── 3. Type helpers ───────────────────────────────────────── */
.kicker { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-3); font-family: var(--font-mono); font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-accent); }
.kicker::before { content: ""; width: 22px; height: 1.5px; background: currentColor; flex: none; }
.center .kicker, .kicker--center { justify-content: center; }
:lang(ar) .kicker { font-size: .9375rem; font-weight: 700; }
.meta { font-family: var(--font-mono); font-size: .8125rem; font-weight: 500; letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--text-muted); }
:lang(ar) .meta { font-size: .875rem; }
.h1 { font-size: clamp(2.25rem, 7vw + .5rem, 4.5rem); font-weight: 900; line-height: 1.1; }
:lang(ar) .h1 { line-height: 1.35; }
.h2 { font-size: clamp(1.75rem, 3vw + 1rem, 2.625rem); font-weight: 800; }
.h3 { font-size: 1.25rem; font-weight: 700; }
.lead { font-size: 1.0625rem; color: var(--text-body); max-width: 62ch; }
.muted { color: var(--text-muted); }
.section-head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-8); max-width: 760px; }
.section-head.center { margin-inline: auto; align-items: center; }
.section-head__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); }
.section-head__row .section-head { margin-bottom: 0; }
.textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; min-height: var(--tap); }
.textlink:hover { text-decoration: underline; }

/* ── 4. Buttons, badges, tags ──────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 20px;
  border-radius: var(--radius-pill); border: 1px solid transparent; font-family: var(--font-body); font-size: .9375rem; font-weight: 600;
  letter-spacing: .01em; text-decoration: none; cursor: pointer; white-space: nowrap; width: 100%;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background-position var(--dur-slow) var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--accent); color: var(--text-on-gold); }
.btn--secondary { background: transparent; color: var(--text-accent); border-color: var(--border-accent); }
.btn--ghost { background: transparent; color: var(--text-strong); }
.btn--foil { background: var(--pm-gold-foil); background-size: 200% 100%; background-position: 0% 50%; color: var(--pm-brush); border-color: rgba(156, 122, 35, .6); box-shadow: var(--shadow-sm); }
.btn--dark { background: var(--pm-charcoal); color: var(--pm-cream); border-color: var(--pm-charcoal-600); }
.btn--light { background: rgba(249, 246, 240, .1); color: var(--pm-cream); border-color: rgba(233, 207, 122, .45); }
.btn--sm { min-height: 36px; padding: 0 14px; font-size: .8125rem; width: auto; }
.btn--lg { min-height: 54px; padding: 0 28px; font-size: 1rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
@media (hover: hover) {
  .btn--primary:hover { background: var(--accent-hover); color: var(--text-on-gold); box-shadow: var(--shadow-gold); }
  .btn--secondary:hover, .btn--ghost:hover { background: var(--accent-tint); color: var(--text-accent); }
  .btn--foil:hover { background-position: 100% 50%; color: var(--pm-brush); box-shadow: var(--shadow-gold); }
  .btn--dark:hover { background: var(--pm-charcoal-700); color: var(--pm-cream); }
  .btn--light:hover { background: rgba(249, 246, 240, .18); color: var(--pm-cream); }
}
.actions { display: flex; flex-direction: column; gap: var(--space-3); }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: var(--radius-pill); font-size: .8125rem; font-weight: 600; letter-spacing: .02em; background: var(--accent-tint); color: var(--text-accent); border: 1px solid var(--border-accent); white-space: nowrap; }
.badge--solid { background: var(--pm-charcoal); color: var(--pm-gold-light); border-color: transparent; }
.badge--success { background: rgba(79, 138, 60, .12); color: #3B6D2B; border-color: rgba(79, 138, 60, .4); }
.badge--warning { background: rgba(224, 162, 27, .14); color: #8A5F05; border-color: rgba(224, 162, 27, .45); }
.badge--danger { background: rgba(194, 70, 58, .12); color: #9C3127; border-color: rgba(194, 70, 58, .4); }
[data-theme="dark"] .badge--success { color: #9BCB87; } [data-theme="dark"] .badge--warning { color: #F0C463; } [data-theme="dark"] .badge--danger { color: #F0968C; }
.badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tags { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.tags::-webkit-scrollbar { display: none; }
.tag { flex: none; min-height: 40px; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: transparent; color: var(--text-body); font-size: .875rem; font-weight: 500; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.tag[aria-pressed="true"] { background: var(--pm-charcoal); color: var(--pm-gold-light); border-color: var(--pm-charcoal); }
[data-theme="dark"] .tag[aria-pressed="true"] { background: var(--accent); color: var(--text-on-gold); border-color: var(--accent); }
@media (hover: hover) { .tag:hover { border-color: var(--border-accent); color: var(--text-accent); } }

/* ── 5. Header, navigation, off-canvas menu ────────────────── */
.site-header { position: sticky; top: 0; z-index: 30; height: var(--header-h); background: var(--surface-overlay); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); }
.site-header__in { height: 100%; display: flex; align-items: center; gap: var(--space-4); }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--text-strong); text-decoration: none; min-height: var(--tap); }
.brand:hover { color: var(--text-strong); }
.brand__mark { width: 40px; height: 40px; filter: var(--badge-filter); }
.brand__name { font-family: "Inter", "Cairo", sans-serif; font-weight: 800; font-size: 1.125rem; letter-spacing: -.01em; direction: ltr; }
.nav { display: none; }
.nav__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__link { white-space: nowrap; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 10px; border-radius: var(--radius-pill); color: var(--text-body); font-size: .9375rem; font-weight: 500; text-decoration: none; }
.nav__link:hover { color: var(--text-accent); }
.nav__link[aria-current="page"] { color: var(--text-accent); font-weight: 700; }
.header-tools { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.header-tools .btn { display: none; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border-radius: 50%; border: 1px solid var(--border-default); background: transparent; color: var(--text-strong); cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.icon-btn:hover { border-color: var(--border-accent); color: var(--text-accent); }
.theme-btn .i-sun { display: none; }
[data-theme="dark"] .theme-btn .i-sun { display: block; }
[data-theme="dark"] .theme-btn .i-moon { display: none; }
.lang { display: none; }
.lang__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.lang__link { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: var(--tap); padding: 0 6px; font-family: "Inter", sans-serif; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; }
.lang__link[aria-current="true"] { color: var(--text-accent); box-shadow: inset 0 -1.5px 0 var(--accent); }
.lang__link:hover { color: var(--text-accent); }

.menu { position: fixed; inset: 0; z-index: 50; visibility: hidden; }
.menu.is-open { visibility: visible; }
.menu__scrim { position: absolute; inset: 0; background: rgba(11, 15, 18, .4); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.menu.is-open .menu__scrim { opacity: 1; }
.menu__panel {
  position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: min(86vw, 360px); display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-5) var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom)); overflow-y: auto;
  background: rgba(11, 15, 18, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-inline-start: 1px solid var(--border-accent);
  transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out); color: var(--pm-cream);
}
[dir="rtl"] .menu__panel { transform: translateX(-100%); }
.menu.is-open .menu__panel { transform: none; }
.menu__top { display: flex; align-items: center; justify-content: space-between; }
.menu__accent { font-size: 2rem; }
.menu__close { border-color: rgba(212, 175, 55, .5); color: var(--pm-cream); }
.menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.menu__link { display: flex; align-items: center; min-height: 52px; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--pm-gold); text-decoration: none; border-bottom: 1px solid rgba(249, 246, 240, .08); }
.menu__link[aria-current="page"] { color: var(--pm-gold-light); }
.menu__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-4); }
.menu .lang { display: block; }
.menu .lang__link { color: rgba(249, 246, 240, .7); }
.menu .lang__link[aria-current="true"] { color: var(--pm-gold); }
body.menu-open { overflow: hidden; }

/* ── 6. Hero ───────────────────────────────────────────────── */
.hero { background: radial-gradient(120% 80% at 85% 10%, #FFF7E3 0%, var(--surface-page) 55%); overflow: hidden; }
[dir="rtl"] .hero { background: radial-gradient(120% 80% at 15% 10%, #FFF7E3 0%, var(--surface-page) 55%); }
[data-theme="dark"] .hero { background: radial-gradient(120% 80% at 85% 10%, #1E1A10 0%, var(--surface-page) 55%); }
.hero__ghost { position: absolute; inset-inline-start: -120px; bottom: -160px; width: 520px; opacity: .06; pointer-events: none; z-index: -1; filter: var(--badge-filter); }
.hero__grid { display: grid; gap: var(--space-12); align-items: center; padding-block: var(--space-12) var(--space-16); }
.hero__title .foil-text { font-style: italic; padding-inline-end: .06em; }
:lang(ar) .hero__title .foil-text { font-style: normal; }
.hero__lead { margin: var(--space-5) 0 var(--space-8); font-size: 1.0625rem; max-width: 540px; }
.hero__visual { position: relative; max-width: 460px; margin-inline: auto; width: 88%; }
.hero__frame { padding: 3px; border-radius: 28px; box-shadow: var(--shadow-lg); transform: rotate(-2deg); }
.hero__frame img { border-radius: 25px; aspect-ratio: 1; object-fit: cover; width: 100%; }
.hero__accent { position: absolute; bottom: -22px; inset-inline-end: -8px; font-size: clamp(3rem, 9vw, 6rem); transform: rotate(-6deg); filter: drop-shadow(0 6px 14px rgba(90, 60, 20, .25)); }

/* page hero (inner pages) */
.page-hero { padding-block: var(--space-10) var(--space-12); border-bottom: 1px solid var(--border-subtle); background: radial-gradient(90% 120% at 90% 0%, #FFF4DA 0%, var(--surface-page) 60%); }
[dir="rtl"] .page-hero { background: radial-gradient(90% 120% at 10% 0%, #FFF4DA 0%, var(--surface-page) 60%); }
[data-theme="dark"] .page-hero { background: radial-gradient(90% 120% at 90% 0%, #1E1A10 0%, var(--surface-page) 60%); }
.page-hero .h1 { font-size: clamp(2rem, 5vw + .5rem, 3.5rem); max-width: 20ch; }
.page-hero .lead { margin-top: var(--space-4); }
.page-hero.page-hero--sunset, [dir] .page-hero.page-hero--sunset { background: linear-gradient(170deg, #F2A63B -20%, #7A3E14 40%, #2B1A10 90%); border: 0; }
.page-hero--sunset .h1, .page-hero--sunset .lead { color: var(--pm-cream); }
.page-hero--sunset .lead { color: var(--pm-sand-glow); }
.page-hero--sunset .kicker { color: var(--pm-gold-light); }
.page-hero--sunset .crumbs a, .page-hero--sunset .crumbs { color: rgba(249, 246, 240, .75); }
.crumbs { margin-bottom: var(--space-5); font-size: .875rem; font-weight: 500; color: var(--text-body); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-inline-end: 6px; opacity: .5; }
.crumbs a { color: inherit; text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.crumbs a:hover { color: var(--text-accent); }

/* ── 7. Home sections ──────────────────────────────────────── */
.mission { text-align: center; }
.mission__text { font-family: var(--font-heading); font-size: clamp(1.375rem, 2.6vw + .6rem, 2.125rem); font-weight: 700; line-height: 1.55; color: var(--text-strong); text-wrap: balance; }
.mission__callig { font-size: 2.75rem; margin-top: var(--space-4); }

.cards { display: grid; gap: var(--space-4); }
.card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-subtle); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
@media (hover: hover) { .card--hover:hover { transform: translateY(-3px); border-color: var(--border-accent); box-shadow: var(--shadow-md); } }
.card--feature { border-color: var(--border-accent); box-shadow: var(--shadow-gold); }
.card p { color: var(--text-body); }
.disc { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--pm-gold-gradient); color: var(--pm-brush); flex: none; }
.disc .icon { width: 24px; height: 24px; }
.disc--sm { width: 40px; height: 40px; } .disc--sm .icon { width: 20px; height: 20px; }

.factors { background: linear-gradient(170deg, #F2A63B -30%, #7A3E14 30%, #2B1A10 75%); color: var(--pm-cream); text-align: center; }
.factors .kicker { color: var(--pm-gold-light); justify-content: center; }
.factors__title { max-width: 780px; margin: 0 auto var(--space-4); color: var(--pm-cream); font-size: clamp(1.5rem, 2.6vw + .8rem, 2.375rem); font-weight: 900; line-height: 1.75; }
.factors__title span { background: #1A0F08; padding: 4px 16px; border-radius: 6px 18px 8px 22px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.factors__p { max-width: 620px; margin: 0 auto var(--space-10); color: var(--pm-sand-glow); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); max-width: 1040px; margin-inline: auto; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 12px; border-radius: var(--radius-lg); background: rgba(255, 253, 248, .94); border: 1.5px solid rgba(212, 175, 55, .55); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .4); text-align: center; }
.tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tile__t { font-family: var(--font-heading); font-weight: 800; font-size: 1.0625rem; line-height: 1.3; color: var(--pm-brush); }
.tile__d { font-size: .875rem; line-height: 1.5; color: #3F3018; }
.factors__note { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-10); max-width: 620px; color: var(--pm-sand-glow); font-weight: 700; font-size: 1.0625rem; }
.factors__note .icon { color: var(--pm-sunset); }

/* project / work cards */
.work-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.pcard { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-card); border: 1px solid var(--border-subtle); text-decoration: none; color: inherit; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.pcard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-sunken); }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.pcard__media .badge { position: absolute; top: 12px; inset-inline-start: 12px; }
.pcard__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.pcard__title { font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
.pcard__title a { color: var(--text-strong); text-decoration: none; }
.pcard__title a::after { content: ""; position: absolute; inset: 0; }
.pcard__kind { font-size: .875rem; color: var(--text-muted); }
.pcard__more { margin-top: 4px; font-size: .8125rem; font-weight: 600; color: var(--text-accent); display: inline-flex; align-items: center; gap: 6px; }
@media (hover: hover) {
  .pcard:hover { border-color: var(--border-accent); box-shadow: var(--shadow-md); }
  .pcard:hover .pcard__media img { transform: scale(1.04); }
}
.pcard:focus-within { box-shadow: var(--focus-ring); }
.work-empty { padding: var(--space-8); text-align: center; color: var(--text-muted); border: 1px dashed var(--border-default); border-radius: var(--radius-lg); }

/* teasers */
.teasers { display: grid; gap: var(--space-5); }
.teaser { position: relative; border-radius: var(--radius-xl); overflow: hidden; min-height: 320px; }
.teaser--contest { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-10) var(--space-6); background: linear-gradient(160deg, #F2A63B, #2B1A10 85%); color: var(--pm-cream); }
.teaser--contest h3 { color: var(--pm-cream); font-size: clamp(1.5rem, 2vw + 1rem, 2rem); font-weight: 800; }
.teaser--contest p { color: var(--pm-sand-glow); }
.teaser--contest .btn { margin-top: auto; }
.teaser--case { display: grid; grid-template-columns: 1fr; background: var(--agro-forest); color: var(--agro-sand); }
.teaser--case__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8) var(--space-6); }
.teaser--case h3 { color: var(--pm-cream); font-size: 1.5rem; font-weight: 800; line-height: 1.35; }
.teaser--case .badge { background: rgba(197, 160, 89, .16); color: var(--pm-gold-light); border-color: rgba(197, 160, 89, .5); }
.teaser--case img { width: 100%; height: 260px; object-fit: cover; }
.teaser--case .btn { margin-top: auto; }

/* pipeline */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); counter-reset: step; }
.step { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-subtle); }
.step__n { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: .875rem; color: var(--text-accent); border: 1.5px solid var(--accent); background: var(--accent-tint); }
.step:first-child .step__n { background: var(--accent); color: var(--text-on-gold); }
.step__t { font-size: 1.0625rem; font-weight: 700; color: var(--text-strong); font-family: var(--font-heading); }
.step__d { font-size: .9375rem; color: var(--text-body); margin-top: 4px; }

/* faq */

/* call to action band */
.cta { background: var(--pm-charcoal); color: var(--pm-cream); border-radius: var(--radius-xl); padding: var(--space-10) var(--space-6); text-align: center; }
.cta .h2 { color: var(--pm-cream); }
.cta p { color: #C9C4BA; max-width: 560px; margin: var(--space-4) auto var(--space-8); }
.cta .kicker { color: var(--pm-gold-light); justify-content: center; }
.cta .actions { max-width: 420px; margin-inline: auto; }

/* ── 8. Inner pages ────────────────────────────────────────── */
.split { display: grid; gap: var(--space-10); }
.prose { max-width: 72ch; }
.prose h2 { font-size: 1.375rem; font-weight: 800; margin-top: var(--space-10); margin-bottom: var(--space-3); }
.prose p + p { margin-top: var(--space-4); }
.prose ul { padding-inline-start: 1.25em; }
.big-p { font-size: 1.1875rem; line-height: 1.7; color: var(--text-strong); }
.callout { font-family: var(--font-heading); font-weight: 800; font-size: 1.375rem; color: var(--text-accent); }


.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chips li { padding: 6px 14px; border-radius: var(--radius-pill); background: var(--surface-card); border: 1px solid var(--border-default); font-size: .875rem; }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.checklist li { display: flex; gap: 10px; align-items: flex-start; }
.checklist .icon { color: var(--text-accent); margin-top: 3px; }

/* case study */
.case-hero { padding-block: var(--space-10) var(--space-12); }
.canvas-agro { --surface-page: var(--agro-forest); --surface-card: #0B3326; --text-strong: var(--pm-cream); --text-body: var(--agro-sand); --text-muted: #A9B48F; --text-accent: var(--pm-gold-soft); --border-subtle: rgba(230, 222, 201, .1); --border-default: rgba(230, 222, 201, .2); background: var(--agro-forest); color: var(--agro-sand); }
.canvas-cosmetics { --surface-page: var(--cosm-salmon); --surface-card: #FBEAEA; --text-strong: var(--cosm-emerald); --text-body: #2D4A40; --text-muted: #55675F; --text-accent: #7A4A2A; --border-subtle: rgba(8, 47, 36, .1); --border-default: rgba(8, 47, 36, .18); background: var(--cosm-salmon); color: #2D4A40; }
.canvas-coffee { --surface-page: #1C130D; --surface-card: #2A1D14; --text-strong: #F4E9DA; --text-body: #D8C7B0; --text-muted: #A99379; --text-accent: var(--pm-gold-soft); --border-subtle: rgba(244, 233, 218, .1); --border-default: rgba(244, 233, 218, .2); background: #1C130D; color: #D8C7B0; }
.case-hero .crumbs, .case-hero .crumbs a { color: var(--text-muted); }
.case-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border-default); }
.case-meta dt { font-family: var(--font-mono); font-size: .75rem; font-weight: 600; letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--text-muted); }
.case-meta dd { margin: 4px 0 0; font-weight: 600; color: var(--text-strong); }
.case-cover { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.gallery { display: grid; gap: var(--space-4); align-items: start; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.gallery figure { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-sunken); border: 1px solid var(--border-subtle); }
.gallery img { width: 100%; height: auto; }
.stepper { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.stepper li { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; color: var(--text-strong); }
.stepper .disc--sm { background: var(--accent); color: var(--text-on-gold); }

/* contests */
.how { display: grid; gap: var(--space-4); counter-reset: how; list-style: none; margin: 0; padding: 0; }
.how li { counter-increment: how; position: relative; padding: var(--space-6); padding-top: var(--space-10); border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-subtle); }
.how li::before { content: counter(how, decimal-leading-zero); position: absolute; top: var(--space-4); inset-inline-start: var(--space-6); font-family: "IBM Plex Mono", monospace; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; color: var(--text-accent); }
.how h3 { font-size: 1.125rem; font-weight: 800; margin-bottom: 6px; }
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-12) var(--space-6); text-align: center; border-radius: var(--radius-xl); background: var(--surface-card); border: 1px dashed var(--border-accent); }
.empty .disc { width: 64px; height: 64px; }
.countdown { display: flex; gap: 8px; direction: ltr; }
.countdown__u { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 10px 8px; border-radius: 12px; background: rgba(26, 15, 8, .55); border: 1px solid rgba(233, 207, 122, .35); }
.countdown__u b { font-family: "Playfair Display", serif; font-size: 1.75rem; color: var(--pm-cream); line-height: 1; font-variant-numeric: tabular-nums; }
.countdown__u span { font-size: .75rem; font-weight: 600; color: var(--pm-gold-light); margin-top: 4px; }
.board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.row { display: grid; grid-template-columns: 40px 56px minmax(0, 1fr); grid-template-areas: "rank img name" "vote vote vote"; align-items: center; gap: 10px 12px; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-subtle); }
.row--top { border-color: var(--border-accent); box-shadow: var(--shadow-gold); }
.row__rank { grid-area: rank; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: "Playfair Display", serif; font-weight: 700; font-size: 1.125rem; color: var(--text-muted); border: 1px solid var(--border-default); }
.row--top .row__rank { color: var(--pm-brush); border: 0; }
.row__img { grid-area: img; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; display: block; }
.row__img img { width: 100%; height: 100%; object-fit: cover; }
.row__name { grid-area: name; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.row__title { font-family: var(--font-heading); font-weight: 800; font-size: 1.0625rem; color: var(--text-strong); }
.row__bar { height: 8px; border-radius: 4px; background: var(--surface-sunken); overflow: hidden; }
.row__bar span { display: block; height: 100%; border-radius: 4px; background: var(--accent); opacity: .75; transition: width var(--dur-reveal) var(--ease-out); }
.row--top .row__bar span { opacity: 1; background: var(--pm-gold-foil); }
.row__vote { grid-area: vote; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.row__count { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-strong); }
.vote-note { display: flex; gap: 8px; align-items: center; margin-top: var(--space-4); font-size: .875rem; color: var(--text-muted); }
.vote-note .icon { color: var(--text-accent); }
.vote-msg { margin-top: var(--space-3); font-weight: 600; color: var(--text-accent); min-height: 1.5em; }

/* sponsors */

/* forms */
.form { display: grid; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: .875rem; font-weight: 600; color: var(--text-strong); }
.field__opt { font-weight: 400; color: var(--text-muted); }
.input, .select, .textarea { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--surface-raised); color: var(--text-strong); font-size: 1rem; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--pm-danger); }
.field__err { font-size: .8125rem; color: var(--pm-danger); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239C7A23' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-inline-end: 40px; }
[dir="rtl"] .select { background-position: left 14px center; }
.radios { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0; padding: 0; }
.radios legend { margin-bottom: 6px; padding: 0; }
.radio { position: relative; }
.radio input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); font-size: .9375rem; }
.radio input:checked + span { background: var(--accent-tint); border-color: var(--accent); color: var(--text-accent); font-weight: 600; }
.radio input:focus-visible + span { box-shadow: var(--focus-ring); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--pm-gold-deep); flex: none; }
.hp { position: absolute !important; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__status { padding: 12px 16px; border-radius: var(--radius-md); font-weight: 600; }
.form__status--ok { background: rgba(79, 138, 60, .12); color: #2F5A22; border: 1px solid rgba(79, 138, 60, .35); }
.form__status--err { background: rgba(194, 70, 58, .1); color: #8E2B22; border: 1px solid rgba(194, 70, 58, .35); }
.form__status--info { background: var(--accent-tint); color: var(--text-accent); border: 1px solid var(--border-accent); }
[data-theme="dark"] .form__status--ok { color: #A8D696; } [data-theme="dark"] .form__status--err { color: #F3A79F; }
.panel { padding: var(--space-6); border-radius: var(--radius-xl); background: var(--surface-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); }

/* portal */
.features { display: grid; gap: var(--space-4); }
.login .btn { width: 100%; }
.login__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; font-size: .875rem; }

/* ── 9. Footer, quick bar, consent ─────────────────────────── */

.quickbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 25; display: flex; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--surface-overlay); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--border-subtle); }
.quickbar .btn { flex: 1; min-height: 48px; }
.quickbar .btn--icon { flex: none; width: 48px; padding: 0; }

.consent { position: fixed; inset-inline: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 60; max-width: 520px; margin-inline: auto; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--pm-charcoal); color: var(--pm-cream); box-shadow: var(--shadow-lg); border: 1px solid var(--border-accent); }
.consent p { font-size: .9375rem; margin-bottom: var(--space-4); }
.consent__actions { display: flex; gap: 8px; }
.consent__actions .btn { flex: 1; }

/* 404 */
.nf { min-height: 60svh; display: flex; flex-direction: column; justify-content: center; gap: var(--space-5); }
.nf__code { font-family: "Playfair Display", serif; font-size: clamp(5rem, 18vw, 10rem); font-weight: 800; line-height: 1; }
.nf__langs { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }

/* ── 10. Motion ────────────────────────────────────────────── */
/* Smooth "click to go": in-page links glide; the sticky header offset is already in scroll-padding-top. */
html { scroll-behavior: smooth; }
:root { interpolate-size: allow-keywords; }

/* Scroll reveals: up by default; split sections come in from their side; media zooms in softly. Delays are staggered by site.js. */
.js .reveal { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.js .split > .reveal:first-child { transform: translate3d(-28px, 0, 0); }
.js .split > .reveal:last-child:not(:first-child) { transform: translate3d(28px, 0, 0); }
.js[dir="rtl"] .split > .reveal:first-child { transform: translate3d(28px, 0, 0); }
.js[dir="rtl"] .split > .reveal:last-child:not(:first-child) { transform: translate3d(-28px, 0, 0); }
.js .case-cover.reveal, .js .gallery .reveal, .js .sponsor.reveal { transform: scale(.96); }
.js .reveal.is-in, .js .split > .reveal.is-in:first-child, .js .split > .reveal.is-in:last-child,
.js[dir] .split > .reveal.is-in:first-child, .js[dir] .split > .reveal.is-in:last-child { opacity: 1; transform: none; }

/* Scroll progress (top) and header state */
.progress { position: fixed; inset-inline: 0; top: 0; z-index: 70; height: 3px; pointer-events: none; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--pm-gold-gradient); }
[dir="rtl"] .progress { transform-origin: 100% 50%; }
.site-header { transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(43, 26, 16, .45); border-bottom-color: var(--border-accent); }
[data-theme="dark"] .site-header.is-scrolled { box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .7); }

/* Hero: gentle parallax (site.js sets --y), floating accent word, frame straightens on hover */
.hero__visual { transform: translate3d(0, calc(var(--y, 0) * -0.08px), 0); }
.hero__ghost { transform: translate3d(0, calc(var(--y, 0) * 0.15px), 0); }
.hero__accent { animation: pm-float 6s var(--ease-in-out) infinite; }
@keyframes pm-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.hero__frame { transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); }

/* Buttons and links: shine, arrow nudge, ripple on click */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn--foil::before, .btn--primary::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease-out); }
.btn .icon, .textlink .icon, .pcard__more .icon, .channel__cta .icon, .disc { transition: transform var(--dur-base) var(--ease-out); }
.tile, .pay__item, .how li, .step { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.tier, .sponsor { transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), opacity var(--dur-reveal) var(--ease-out); }
@media (hover: hover) {
  .hero__visual:hover .hero__frame { transform: rotate(0deg) scale(1.02); box-shadow: 0 30px 70px -26px rgba(90, 60, 20, .5); }
  .btn--foil:hover::before, .btn--primary:hover::before { transform: translateX(120%); }
  .btn:hover .icon:last-child:not(:first-child), .textlink:hover .icon, .pcard:hover .pcard__more .icon, .channel:hover .channel__cta .icon { transform: translateX(4px); }
  [dir="rtl"] .btn:hover .icon:last-child:not(:first-child), [dir="rtl"] .textlink:hover .icon, [dir="rtl"] .pcard:hover .pcard__more .icon, [dir="rtl"] .channel:hover .channel__cta .icon { transform: translateX(-4px); }
  .btn:hover .icon:first-child { transform: scale(1.12) rotate(-6deg); }
  .card:hover .disc, .tile:hover .disc, .pay__item:hover .disc { transform: rotate(-8deg) scale(1.06); }
  .tile:hover, .pay__item:hover, .how li:hover, .step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .tier:hover, .sponsor:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
}
.ripple { position: absolute; z-index: -1; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: currentColor; opacity: .28; pointer-events: none; animation: pm-ripple .6s var(--ease-out) forwards; }
@keyframes pm-ripple { to { transform: scale(26); opacity: 0; } }

/* Target highlight after a "go to" click */
.is-target { animation: pm-target 1.4s var(--ease-out); }
@keyframes pm-target { 0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, .45); } 40% { box-shadow: 0 0 0 10px rgba(212, 175, 55, .18); } 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); } }

/* FAQ: answers open and close with a smooth height (Chromium); other browsers keep the fade-in */
.faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size var(--dur-slow) var(--ease-out), content-visibility var(--dur-slow) allow-discrete; }
.faq__item[open]::details-content { block-size: auto; }

/* Off-canvas menu: links slide in one after another */
.menu__list li, .menu__foot { opacity: 0; transform: translateX(24px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
[dir="rtl"] .menu__list li, [dir="rtl"] .menu__foot { transform: translateX(-24px); }
.menu.is-open .menu__list li, .menu.is-open .menu__foot { opacity: 1; transform: none; }
.menu.is-open .menu__list li:nth-child(1) { transition-delay: 80ms; } .menu.is-open .menu__list li:nth-child(2) { transition-delay: 120ms; }
.menu.is-open .menu__list li:nth-child(3) { transition-delay: 160ms; } .menu.is-open .menu__list li:nth-child(4) { transition-delay: 200ms; }
.menu.is-open .menu__list li:nth-child(5) { transition-delay: 240ms; } .menu.is-open .menu__list li:nth-child(6) { transition-delay: 280ms; }
.menu.is-open .menu__list li:nth-child(7) { transition-delay: 320ms; } .menu.is-open .menu__list li:nth-child(8) { transition-delay: 360ms; }
.menu.is-open .menu__list li:nth-child(9) { transition-delay: 400ms; } .menu.is-open .menu__foot { transition-delay: 440ms; }

/* Back to top with a progress ring (appears after one screen) */
.to-top { position: fixed; z-index: 24; inset-inline-end: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1px solid var(--border-subtle); background: var(--surface-overlay); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--text-accent); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-md); opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--accent); color: var(--text-on-gold); }
.to-top .ring { position: absolute; inset: -1px; width: 48px; height: 48px; transform: rotate(-90deg); }
.to-top circle { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 144.5; stroke-dashoffset: calc(144.5 * (1 - var(--p, 0))); }
.to-top .icon { position: relative; transform: rotate(-90deg); }
@media (min-width: 768px) { .to-top { bottom: 24px; inset-inline-end: 24px; } }

/* Page to page: a soft cross-fade (View Transitions, where supported); the header stays put */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: pm-page-out .2s var(--ease-in-out) both; }
::view-transition-new(root) { animation: pm-page-in .36s var(--ease-out) both; }
@keyframes pm-page-out { to { opacity: 0; } }
@keyframes pm-page-in { from { opacity: 0; transform: translateY(10px); } }
.site-header { view-transition-name: pm-header; }

.lazy-fade { transition: opacity var(--dur-reveal) var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal, .js .split > .reveal, .menu__list li, .menu__foot { opacity: 1; transform: none; }
  .hero__visual, .hero__ghost { transform: none; }
  .progress { display: none; }
}

/* ── 11. Larger screens (min-width only) ───────────────────── */
@media (min-width: 480px) {
  .btn { width: auto; }
  .actions { flex-direction: row; flex-wrap: wrap; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile:last-child:nth-child(odd) { grid-column: auto; }
  .case-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 600px) {
  :root { --gutter: 24px; }
  .header-tools .lang { display: block; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row { grid-template-columns: 44px 64px minmax(0, 1fr) auto; grid-template-areas: "rank img name vote"; padding: 12px 16px; gap: 16px; }
  .row__img { width: 64px; height: 64px; }
  .row__vote { justify-content: flex-end; }
  .teaser--contest { padding: var(--space-10) var(--space-8); }
}
@media (min-width: 768px) {
  :root { --header-h: 72px; }
  .section { padding-block: var(--space-20); }
  .header-tools .btn { display: inline-flex; }
  .quickbar { display: none; }
  .consent { bottom: 16px; inset-inline: auto 16px; }
  [dir="rtl"] .consent { inset-inline: auto 16px; }
  .teasers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teaser--case { grid-template-columns: 1fr 1fr; }
  .teaser--case img { height: 100%; }
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .step { grid-template-columns: 1fr; align-content: start; }
  .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cta { padding: var(--space-16) var(--space-10); }
  .form--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form--2 .field--full { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1.1fr .9fr; padding-block: var(--space-16) var(--space-20); }
  .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split { grid-template-columns: 1.1fr .9fr; align-items: start; }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--aside { grid-template-columns: 1.4fr 1fr; }
  .how { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .features { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sticky { position: sticky; top: calc(var(--header-h) + 24px); }
}
@media (min-width: 1200px) {
  .nav { display: block; }
  .menu-btn { display: none; }
}
@media (min-width: 1360px) {
  .nav__link { padding: 0 12px; }
}

/* ── 13. Team, services, payment, FAQ, sponsors, contact, portal, footer (v2, 23/10/2026) ── */
/* team: 1 → 2 → 3 per row, last row centred (5 = 3 + 2) */
.team { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); --cols: 1; }
.person { position: relative; flex: 0 0 calc((100% - (var(--cols) - 1) * var(--space-4)) / var(--cols)); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-subtle); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
@media (hover: hover) { .person:hover { border-color: var(--border-accent); box-shadow: var(--shadow-md); transform: translateY(-3px); } }
.person__top { display: flex; align-items: center; gap: var(--space-4); }
.person__avatar { width: 64px; height: 64px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--pm-gold-gradient); color: var(--pm-brush); font-family: "Playfair Display", serif; font-weight: 800; font-size: 1.25rem; direction: ltr; box-shadow: 0 0 0 4px var(--accent-tint); }
.person--tech .person__avatar { background: var(--pm-charcoal); color: var(--pm-gold-light); }
.person__name { font-size: 1.1875rem; font-weight: 800; text-align: start; }
.person__name[lang="en"] { font-family: "Playfair Display", "Cairo", serif; }
.person__role { font-size: .875rem; font-weight: 700; color: var(--text-accent); margin-top: 2px; line-height: 1.4; }
.person__tag { align-self: flex-start; }
.person__d { font-size: .9375rem; color: var(--text-body); flex: 1; }
.person__link { display: flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-accent); color: var(--text-accent); font-size: .875rem; font-weight: 600; text-decoration: none; align-self: flex-start; }
.person__link .icon { width: 18px; height: 18px; }
.person__label { color: var(--text-muted); font-weight: 500; }
.person__ext { opacity: .6; width: 14px !important; height: 14px !important; }
.person__link:hover { background: var(--accent-tint); color: var(--text-accent); }

/* services by group */
.sgroup + .sgroup { margin-top: var(--space-12); }
.sgroup__head { display: flex; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-default); }
.sgroup__n { font-family: "IBM Plex Mono", monospace; font-size: .8125rem; font-weight: 600; color: var(--text-accent); border: 1.5px solid var(--accent); border-radius: var(--radius-pill); padding: 4px 10px; flex: none; }
.sgroup .cards { grid-template-columns: 1fr; }
.service .disc { transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) { .service:hover .disc { transform: rotate(-8deg) scale(1.06); } }

/* payment: centred */
.pay .h2 { margin-inline: auto; }
.pay__lead { margin: var(--space-4) auto 0; text-align: center; }
.pay__grid { list-style: none; margin: var(--space-10) auto 0; padding: 0; display: grid; gap: var(--space-4); max-width: 1040px; }
.pay__item { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-5); border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-subtle); text-align: center; }
.pay__item strong { font-family: var(--font-heading); font-size: 1.0625rem; color: var(--text-strong); margin-top: var(--space-2); }
.pay__item span:last-child { font-size: .9375rem; color: var(--text-body); }
.pay__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: var(--space-8) 0 var(--space-6); }

/* FAQ: closed by default, one open at a time (site.js + <details name>) */
.faq { max-width: 860px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.faq__item { border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-subtle); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.faq__item[open] { border-color: var(--border-accent); box-shadow: var(--shadow-md); }
.faq__q { display: flex; align-items: center; gap: var(--space-4); min-height: 64px; padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none; font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 700; color: var(--text-strong); border-radius: var(--radius-lg); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--text-accent); }
.faq__n { font-family: "IBM Plex Mono", monospace; font-size: .8125rem; font-weight: 600; color: var(--text-accent); flex: none; }
.faq__t { flex: 1; }
.faq__toggle { width: 36px; height: 36px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-accent); color: var(--text-accent); transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.faq__item[open] .faq__toggle { transform: rotate(45deg); background: var(--accent); color: var(--text-on-gold); border-color: var(--accent); }
.faq__a { padding: 0 var(--space-5) var(--space-5); padding-inline-start: calc(var(--space-5) + 2.6em); max-width: 76ch; }
.faq__item[open] .faq__a { animation: faq-in var(--dur-slow) var(--ease-out); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* tier colours: platinum (cool, bluish metal) · gold · silver (neutral grey) · technical (charcoal + gold) */
.tier-platinum { --tier-bg: linear-gradient(135deg, #FBFCFD 0%, #DCE3E8 35%, #A9B6BF 70%, #E9EEF1 100%); --tier-ink: #23323B; --tier-line: #8FA2AE; }
.tier-gold { --tier-bg: linear-gradient(135deg, #FFF3C4 0%, #E9CF7A 30%, #D4AF37 60%, #9C7A23 100%); --tier-ink: #2B1A10; --tier-line: #C29E2B; }
.tier-silver { --tier-bg: linear-gradient(135deg, #F7F7F7 0%, #D2D2D2 40%, #A6A6A6 75%, #C9C9C9 100%); --tier-ink: #2E2E2E; --tier-line: #9A9A9A; }
.tier-technical { --tier-bg: linear-gradient(135deg, #2A353C 0%, #12181C 60%, #0B0F12 100%); --tier-ink: #E9CF7A; --tier-line: #D4AF37; }
.tier-badge { display: inline-flex; align-items: center; gap: 6px; align-self: center; padding: 5px 14px; border-radius: var(--radius-pill); background: var(--tier-bg); color: var(--tier-ink); font-size: .8125rem; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 2px 8px -4px rgba(0, 0, 0, .35); }
.tier-badge .icon { width: 16px; height: 16px; }

/* sponsors: centred grid — 1 centred, 2, 3, then 4 per row with the last row centred */
.sgrid { --cols: 1; --gap: var(--space-5); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.sgrid > * { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); }
.sgrid[data-n="1"] > * { flex-basis: 100%; max-width: 720px; }
.sponsor { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8) var(--space-6) var(--space-6); border-radius: var(--radius-xl); background: var(--surface-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); text-align: center; }
.sponsor::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 6px; background: var(--tier-bg); }
.sponsor__logo { display: flex; align-items: center; justify-content: center; height: 120px; margin-inline: auto; padding: var(--space-4) var(--space-6); border-radius: var(--radius-lg); background: #fff; box-shadow: inset 0 0 0 1px rgba(11, 15, 18, .06); min-width: 220px; }
.sponsor__logo img { max-height: 84px; width: auto; }
.sponsor__name { font-size: 1.75rem; font-weight: 800; }
.sponsor__kind { font-weight: 700; color: var(--text-accent); }
.sponsor__tagline { font-family: "Playfair Display", serif; font-style: italic; color: var(--text-muted); }
.sponsor__d { max-width: 60ch; margin-inline: auto; }
.sponsor__h { margin-top: var(--space-3); font-family: var(--font-mono); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-body); }
:lang(ar) .sponsor__h { font-size: .875rem; font-weight: 700; }
.sponsor .checklist { display: inline-grid; margin-inline: auto; text-align: start; }
.sponsor__visit { align-self: center; margin-top: var(--space-3); }

/* sponsorship levels */
.tiers { display: grid; gap: var(--space-5); max-width: 1120px; margin-inline: auto; }
.tier { display: flex; flex-direction: column; border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); }
.tier__head { padding: var(--space-6); background: var(--tier-bg); color: var(--tier-ink); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.tier__icon { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .55); color: var(--tier-ink); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.tier__icon .icon { width: 26px; height: 26px; }
.tier__name { font-family: var(--font-heading); font-weight: 900; font-size: 1.5rem; color: var(--tier-ink); }
.tier__head p { font-size: .9375rem; font-weight: 500; color: var(--tier-ink); }
.tier__perks { padding: var(--space-6); }
.tier__perks .icon { color: var(--tier-line); }
.how--3 { max-width: 1040px; margin-inline: auto; }

/* contact: where + channel cards */
.where { display: flex; gap: var(--space-3); align-items: flex-start; }
.channels { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); max-width: 1040px; margin-inline: auto; }
.channels > .channel { flex: 1 1 100%; max-width: 520px; }
.channel { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-subtle); color: var(--text-body); text-decoration: none; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.channel:hover { color: var(--text-body); border-color: var(--border-accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.channel__icon { width: 56px; height: 56px; flex: none; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: var(--pm-gold-gradient); color: var(--pm-brush); }
.channel--instagram .channel__icon { background: linear-gradient(45deg, #F9CE34 0%, #EE2A7B 50%, #6228D7 100%); color: #fff; }
.channel--whatsapp .channel__icon { background: #25D366; color: #fff; }
.channel__icon .icon { width: 26px; height: 26px; }
.channel__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.channel__body strong { font-family: var(--font-heading); font-size: 1.125rem; color: var(--text-strong); }
.channel__body > span { font-size: .875rem; color: var(--text-muted); }
.channel__value { font-weight: 600; color: var(--text-accent) !important; text-align: start; }
.channel__cta { display: none; align-items: center; gap: 6px; font-weight: 700; font-size: .875rem; color: var(--text-accent); white-space: nowrap; }

/* portal: preview + login */
.portal-top { align-items: center; }
.panel--login { box-shadow: var(--shadow-lg); border-color: var(--border-accent); }
.login__head { display: flex; align-items: center; gap: var(--space-3); }
.login .btn--lg { width: 100%; }
.login__secure { display: flex; gap: 10px; align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--accent-tint); font-size: .875rem; }
.login__secure .icon { color: var(--text-accent); flex: none; margin-top: 2px; }
.login__help { font-size: .875rem; }
.preview { margin-top: var(--space-4); border-radius: var(--radius-xl); background: var(--surface-card); border: 1px solid var(--border-default); box-shadow: var(--shadow-lg); overflow: hidden; position: relative; }
.preview__cap { position: absolute; top: 6px; inset-inline-end: 12px; }
.preview__cap .badge { height: 22px; }
.preview__bar { display: flex; gap: 6px; padding: 12px 16px; background: var(--surface-sunken); border-bottom: 1px solid var(--border-subtle); direction: ltr; }
.preview__bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-default); }
.preview__body { padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }
.preview__title { font-family: var(--font-heading); font-weight: 800; font-size: 1.125rem; color: var(--text-strong); }
.preview__rows { display: grid; gap: var(--space-2); }
.preview__rows p { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-sunken); font-size: .875rem; }
.preview__rows .icon { color: var(--text-accent); }
.pipeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.pipeline li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.pipeline li::before { content: ""; position: absolute; top: 15px; inset-inline-start: calc(-50% + 18px); width: calc(100% - 36px); height: 2px; background: var(--border-default); }
.pipeline li:first-child::before { display: none; }
.pipeline li.is-done::before, .pipeline li.is-on::before { background: var(--accent); }
.pipeline__dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: "IBM Plex Mono", monospace; font-size: .8125rem; font-weight: 600; border: 1.5px solid var(--border-default); background: var(--surface-card); color: var(--text-muted); }
.pipeline__dot .icon { width: 16px; height: 16px; }
.is-done .pipeline__dot { background: var(--accent); border-color: var(--accent); color: var(--text-on-gold); }
.is-on .pipeline__dot { background: var(--accent-tint); border-color: var(--accent); color: var(--text-accent); box-shadow: var(--focus-ring); }
.pipeline__label { font-size: .6875rem; font-weight: 500; line-height: 1.3; color: var(--text-body); }
.is-on .pipeline__label { color: var(--text-strong); font-weight: 700; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.kpi { padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-subtle); border-inline-start: 3px solid var(--accent); }
.kpi span { display: block; font-size: .875rem; font-weight: 600; color: var(--text-body); }
.kpi strong { display: block; font-family: var(--font-heading); font-size: 1.375rem; color: var(--text-strong); direction: ltr; text-align: start; }

/* footer */
.site-footer { position: relative; overflow: hidden; margin-top: var(--space-16); padding: var(--space-10) 0 calc(var(--space-6) + 64px + env(safe-area-inset-bottom)); background: radial-gradient(90% 60% at 50% 0%, #1A2227 0%, var(--pm-charcoal) 70%); color: #C2C8CC; }
.site-footer a { color: #D9D4CA; text-decoration: none; }
.site-footer a:hover { color: var(--pm-gold); }
.site-footer .btn--foil, .site-footer .btn--foil:hover { color: var(--pm-brush); }
.footer__brand .btn { align-self: flex-start; margin-top: var(--space-2); }
.footer__cta { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-8) var(--space-6); margin-bottom: var(--space-12); border-radius: var(--radius-xl); background: linear-gradient(160deg, #F2A63B -20%, #7A3E14 45%, #2B1A10 100%); }
.footer__cta-h { font-family: var(--font-heading); font-size: clamp(1.375rem, 2vw + .9rem, 2rem); font-weight: 900; color: var(--pm-cream); line-height: 1.3; }
.footer__cta-p { color: var(--pm-sand-glow); margin-top: 6px; }
.footer__top { display: grid; gap: var(--space-10); }
.footer__brand { display: flex; flex-direction: column; gap: var(--space-4); }
.footer__id { display: flex; align-items: center; gap: var(--space-4); }
.footer__badge { width: 88px; height: 88px; filter: invert(1) sepia(.6) saturate(2.4) hue-rotate(5deg) brightness(.92); flex: none; }
.footer__name { font-family: "Inter", sans-serif; font-weight: 800; font-size: 1.375rem; color: var(--pm-cream); direction: ltr; text-align: start; }
.footer__tag { font-size: 1.5rem; text-align: start; }
.footer__about { max-width: 42ch; font-size: .9375rem; line-height: 1.7; }
.footer__loc { display: inline-flex; align-items: center; gap: 8px; color: var(--pm-gold-light); font-size: .875rem; font-weight: 600; }
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
.footer__h { font-family: var(--font-mono); font-size: .8125rem; font-weight: 700; letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--pm-gold-light); margin-bottom: var(--space-3); }
:lang(ar) .footer__h { font-size: .875rem; font-weight: 700; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer__list a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: .9375rem; }
.follow { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-3); }
.follow__card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: rgba(249, 246, 240, .04); border: 1px solid rgba(212, 175, 55, .3); transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.follow__card:hover { background: rgba(212, 175, 55, .08); border-color: var(--pm-gold); }
.follow__icon { width: 44px; height: 44px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(45deg, #F9CE34 0%, #EE2A7B 50%, #6228D7 100%); color: #fff; }
.follow__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.follow__txt strong { color: var(--pm-cream); text-align: start; }
.follow__txt small { font-size: .8125rem; color: #C9CFD2; line-height: 1.45; }
.follow__btn { flex: none; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--pm-gold); color: var(--pm-brush); font-size: .8125rem; font-weight: 700; }
.follow__team-h { font-size: .875rem; font-weight: 600; color: #C9CFD2; margin-top: var(--space-2); }
.follow__team { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.follow__team a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 4px; border-radius: var(--radius-pill); border: 1px solid rgba(249, 246, 240, .1); font-size: .8125rem; }
.follow__avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--pm-gold-gradient); color: var(--pm-brush); font-size: .6875rem; font-weight: 800; direction: ltr; }
.footer__skyline { display: block; width: 100%; max-width: 720px; height: auto; margin: var(--space-10) auto 0; color: rgba(212, 175, 55, .22); }
.footer__bottom { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid rgba(249, 246, 240, .08); font-size: .875rem; }
.footer__credit { display: inline-flex; align-items: center; gap: 8px; color: var(--pm-gold-soft) !important; font-weight: 600; letter-spacing: .02em; }
.footer__top-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.icon--up { transform: rotate(-90deg); }

@media (min-width: 600px) {
  .sgroup .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team, .sgrid { --cols: 2; }
  .sgrid[data-n="1"] { --cols: 1; }
  .pay__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .channels > .channel { flex-basis: calc(50% - var(--space-4)); }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pipeline__label { font-size: .8125rem; }
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .follow { grid-column: auto; }
}
@media (min-width: 768px) {
  .site-footer { padding-bottom: var(--space-6); }
  .footer__cta { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--space-8) var(--space-10); }
  .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
  .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .how.how--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .channel__cta { display: inline-flex; }
}
@media (min-width: 1024px) {
  .team { --cols: 3; }
  .sgroup .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sgrid[data-n="3"] { --cols: 3; }
  .sgrid[data-n="many"] { --cols: 4; }
  .pay__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: 1fr 2fr; align-items: start; }
  .footer__cols { grid-template-columns: 1fr 1fr 1.6fr; }
}

/* ── 12. Print (invoices and statements from the portal) ───── */
@media print {
  .site-header, .site-footer, .quickbar, .consent, .menu, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: none; }
}