/* =========================================================================
   أبوبكر البكار — Personal Brand
   Design system: Performance Dashboard Noir — deep navy + gold + live cyan
   RTL-first, Arabic-first. Author: design lead.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root{
  /* color */
  --ink:#090D17;            /* page base */
  --ink-2:#0C1120;          /* alt base */
  --panel:#121A2C;          /* card surface */
  --panel-2:#172037;        /* raised surface */
  --panel-3:#1E2A45;        /* hover surface */
  --line:rgba(201,162,75,.16);
  --line-soft:rgba(245,242,234,.08);
  --gold:#C9A24B;
  --gold-2:#E7CD86;
  --gold-deep:#A07E2E;
  --cyan:#4FE3CC;           /* "live data" signal, used sparingly */
  --cyan-dim:rgba(79,227,204,.16);
  --text:#F5F2EA;
  --muted:#98A2B6;
  --muted-2:#7E899D;
  --danger:#FF6B6B;
  --ok:#5BD17F;

  /* type */
  --f-display:"Cairo","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-body:"Cairo","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-data:"Space Grotesk","Cairo",monospace;

  /* scale (8pt) */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:48px;
  --sp-6:64px; --sp-7:96px; --sp-8:128px;

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --container:1200px;
  --header-h:74px;

  --shadow-1:0 2px 8px rgba(0,0,0,.25);
  --shadow-2:0 18px 50px rgba(0,0,0,.45);
  --shadow-gold:0 14px 50px rgba(201,162,75,.18);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%} /* smooth scrolling scoped to JS calls only - global smooth + long page = seconds of unrevealed content */
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--f-body);font-size:16px;line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;line-height:1.18;margin:0;letter-spacing:0}
p{margin:0}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:6px}
::selection{background:rgba(201,162,75,.3);color:#fff}

/* ---------- Background atmosphere ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 600px at 88% -8%, rgba(201,162,75,.10), transparent 60%),
    radial-gradient(800px 620px at 6% 4%, rgba(79,227,204,.06), transparent 60%),
    linear-gradient(180deg,#0A0F1B 0%, #090D17 40%, #080B14 100%);
}
body::after{ /* faint grid like a dashboard */
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(245,242,234,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(245,242,234,.022) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 75%);
}

/* ===================== LIGHT THEME ===================== */
:root[data-theme="light"]{
  /* identity flips to BLACK on CREAM to match the black logo */
  --ink:#F4F1E9; --ink-2:#FFFFFF; --panel:#FFFFFF; --panel-2:#F1EDE4; --panel-3:#E6E2D7;
  --line:rgba(20,20,20,.16); --line-soft:rgba(20,20,20,.08);
  --gold:#262626; --gold-2:#121212; --gold-deep:#000000;
  --cyan:#2E2E2E; --cyan-dim:rgba(30,30,30,.12);
  --text:#121212; --muted:#56564F; --muted-2:#6E6E68;
  --shadow-2:0 18px 50px rgba(0,0,0,.16);
  --shadow-gold:0 14px 40px rgba(0,0,0,.2);
}
[data-theme="light"] body::before{
  background:radial-gradient(900px 600px at 88% -8%, rgba(20,20,20,.05), transparent 60%),
    radial-gradient(800px 620px at 6% 4%, rgba(20,20,20,.03), transparent 60%),
    linear-gradient(180deg,#FAF8F2 0%, #F4F1E9 45%, #EFEBE1 100%);}
[data-theme="light"] body::after{
  background-image:linear-gradient(rgba(22,27,38,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(22,27,38,.04) 1px,transparent 1px);opacity:.6}
[data-theme="light"] .header.scrolled{background:rgba(255,255,255,.86);border-bottom-color:var(--line)}
[data-theme="light"] .nav a.active{background:rgba(20,20,20,.07)}
[data-theme="light"] .drawer{background:rgba(20,20,20,.4)}
[data-theme="light"] .trust{background:rgba(255,255,255,.6)}
[data-theme="light"] .grad-text{color:#1A1A1A}
[data-theme="light"] .btn--ghost{background:rgba(20,20,20,.04);color:var(--text);border-color:var(--line)}
[data-theme="light"] .btn--ghost:hover{background:rgba(20,20,20,.08)}
[data-theme="light"] .btn--primary{color:#fff}
[data-theme="light"] .tag,[data-theme="light"] .chip,[data-theme="light"] .svc-tags span{background:#FAF7F1}
[data-theme="light"] .card{background:#fff}
[data-theme="light"] .card--feature{background:linear-gradient(150deg,rgba(20,20,20,.05),#fff)}
[data-theme="light"] .float-card{background:rgba(255,255,255,.94)}
[data-theme="light"] .float-card .fc-num{color:#121212}
[data-theme="light"] .engine{background:linear-gradient(180deg,#fff,#F8F5EE)}
[data-theme="light"] .engine::before{background:radial-gradient(700px 200px at 50% 0,rgba(20,20,20,.05),transparent 70%)}
[data-theme="light"] .audit{background:linear-gradient(120deg,rgba(20,20,20,.05),#fff)}
[data-theme="light"] .audit::before{background:radial-gradient(circle at 70% 50%,rgba(20,20,20,.04),transparent 60%)}
[data-theme="light"] .final{background:linear-gradient(180deg,#fff,#F8F5EE)}
[data-theme="light"] .final::before{background:radial-gradient(600px 300px at 50% 0,rgba(20,20,20,.06),transparent 65%)}
[data-theme="light"] .partner{background:linear-gradient(120deg,rgba(20,20,20,.045),#fff)}
[data-theme="light"] .pack--feature{background:linear-gradient(160deg,rgba(20,20,20,.05),#fff)}
[data-theme="light"] .prob{background:rgba(180,40,40,.045)}
[data-theme="light"] .footer{background:linear-gradient(180deg,#F8F5EE,#F2EEE4)}
[data-theme="light"] .input,[data-theme="light"] .textarea,[data-theme="light"] select.input{background:#fff}
[data-theme="light"] .input:focus,[data-theme="light"] .textarea:focus{background:#fff;border-color:#121212}

[data-theme="light"] ::selection{background:rgba(20,20,20,.18);color:#fff}
/* neutralize gold/cyan accent chips -> charcoal to match black identity */
[data-theme="light"] .eyebrow{background:rgba(20,20,20,.05)}
[data-theme="light"] .card-ico,[data-theme="light"] .node .n-ico,[data-theme="light"] .qual .q-ico,
[data-theme="light"] .svc-block .sb-ico,[data-theme="light"] .cmethod .cm-ico,[data-theme="light"] .ct-row .ct-ic,
[data-theme="light"] .tl-dot,[data-theme="light"] .step .s-num,[data-theme="light"] .value .v-ico,
[data-theme="light"] .ind .i-ico,[data-theme="light"] .partner .p-mark,[data-theme="light"] .foot-chip svg{
  background:rgba(20,20,20,.05);border-color:var(--line);color:#121212}
[data-theme="light"] .ind .i-ico{color:#121212}
[data-theme="light"] .scroll-progress{background:linear-gradient(90deg,#121212,#454545,#121212);box-shadow:0 0 10px rgba(0,0,0,.25)}
[data-theme="light"] .frame-glow{background:radial-gradient(60% 60% at 50% 40%,rgba(20,20,20,.16),transparent 70%)}
[data-theme="light"] .photo-frame{border-color:rgba(20,20,20,.3)}
[data-theme="light"] .photo-frame::after{background:linear-gradient(180deg,transparent 55%,rgba(20,20,20,.4)),linear-gradient(115deg,rgba(20,20,20,.08),transparent 45%)}
[data-theme="light"] .portrait-disc{background:conic-gradient(from 200deg,rgba(20,20,20,0),rgba(20,20,20,.16),rgba(20,20,20,.08),rgba(20,20,20,0))}
[data-theme="light"] .p-flag{background:#121212;color:#fff}
[data-theme="light"] .pack .btn--primary{color:#fff}
[data-theme="light"] .pack-tier{background:rgba(20,20,20,.05);color:#121212}
[data-theme="light"] .pack-tier--hot{background:linear-gradient(100deg,#1a1a1a,#3a3a3a);color:#fff;border-color:transparent}
[data-theme="light"] .pk-check{background:rgba(20,20,20,.07);color:#121212}
[data-theme="light"] .pack--feature .pk-check{background:rgba(20,20,20,.1)}
/* content cards (المحتوى) in light: distinct cover + readable tag */
[data-theme="light"] .post .p-cover{background:linear-gradient(135deg,#E8E3D6,#F3EFE6);color:#3a3a3a}
[data-theme="light"] .post .p-cover .p-tag{background:rgba(255,255,255,.92);color:#121212;border-color:rgba(20,20,20,.18)}
[data-theme="light"] .post .p-meta{color:#8A8A82}
/* logo turns to the black version on light backgrounds (header, drawer, footer). Ribbon stays gold. */
[data-theme="light"] .brand img,
[data-theme="light"] .drawer-top img,
[data-theme="light"] .foot-logo{filter:brightness(0)}
[data-theme="light"] .theme-toggle:hover{border-color:rgba(20,20,20,.4);color:#121212}
[data-theme="light"] .btn--primary:hover{box-shadow:0 18px 50px rgba(0,0,0,.3)}
[data-theme="light"] .chip:hover,[data-theme="light"] .ind:hover,[data-theme="light"] .soc:hover,
[data-theme="light"] .cmethod:hover,[data-theme="light"] .work:hover,[data-theme="light"] .post:hover,
[data-theme="light"] .card:hover,[data-theme="light"] .qual:hover,[data-theme="light"] .svc-block:hover,
[data-theme="light"] .step:hover,[data-theme="light"] .pack:hover{border-color:rgba(20,20,20,.35)}
[data-theme="light"] .faq-flow span{background:rgba(20,20,20,.05);color:#121212}
[data-theme="light"] .faq details[open]{border-color:rgba(20,20,20,.3)}
[data-theme="light"] .more,[data-theme="light"] .node:hover,[data-theme="light"] .foot-social:hover{border-color:rgba(20,20,20,.3)}
[data-theme="light"] .card:hover{box-shadow:var(--shadow-2),0 0 0 1px rgba(20,20,20,.1)}
[data-theme="light"] .card:hover .card-ico{background:rgba(20,20,20,.07);border-color:rgba(20,20,20,.3)}
[data-theme="light"] .nav a:hover{background:rgba(20,20,20,.06)}
.theme-toggle{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;flex:none;
  border:1px solid var(--line);background:rgba(245,242,234,.04);color:var(--text);transition:.2s}
.theme-toggle:hover{border-color:rgba(201,162,75,.45);color:var(--gold-2)}
.theme-toggle svg{width:21px;height:21px}
.theme-toggle .ic-sun{display:none}
[data-theme="light"] .theme-toggle .ic-sun{display:block}
[data-theme="light"] .theme-toggle .ic-moon{display:none}

/* ---------- Layout helpers ---------- */
.container{width:min(100% - 40px,var(--container));margin-inline:auto}
.section{padding-block:var(--sp-7);position:relative}
.section--tight{padding-block:var(--sp-6)}
.section--liftup{padding-top:var(--sp-3)}
.grid{display:grid;gap:var(--sp-3)}
.center{text-align:center}
.stack>*+*{margin-top:var(--sp-2)}

/* ---------- Eyebrow / section heads ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-data);font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2);
  padding:7px 14px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:rgba(201,162,75,.06);
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 0 4px var(--cyan-dim);animation:pulse 2.4s var(--ease) infinite}
.sec-head{max-width:720px;margin-bottom:var(--sp-5)}
.sec-head.center{margin-inline:auto}
.sec-title{font-size:clamp(1.5rem,3.2vw,2.5rem);margin-top:8px;letter-spacing:normal;text-wrap:balance;line-height:1.3}
.sec-sub{color:var(--muted);font-size:1.06rem;margin-top:16px;line-height:1.85;max-width:65ch;text-wrap:pretty}
.gold-text{color:var(--gold-2)}
.grad-text{color:var(--gold-2)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-display);font-weight:700;font-size:1rem;
  padding:15px 26px;border-radius:var(--r-pill);border:1px solid transparent;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .25s,border-color .25s;
  min-height:52px;line-height:1;white-space:nowrap;
}
.btn svg{width:19px;height:19px;flex:none}
.btn--primary{background:linear-gradient(100deg,var(--gold-2),var(--gold));color:#1a1304;
  box-shadow:var(--shadow-gold)}
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 20px 60px rgba(201,162,75,.34)}
.btn--ghost{background:rgba(245,242,234,.04);color:var(--text);border-color:var(--line)}
.btn--ghost:hover{background:rgba(245,242,234,.09);border-color:rgba(201,162,75,.4);transform:translateY(-3px)}
.btn--wa{background:#1FAE54;color:#fff;box-shadow:0 12px 36px rgba(31,174,84,.28)}
.btn--wa:hover{transform:translateY(-3px);background:#1cbf5b}
.btn--block{width:100%}
.btn--lg{padding:18px 34px;font-size:1.08rem;min-height:60px}

/* ---------- Header ---------- */
.header{position:fixed;top:0;inset-inline:0;z-index:100;height:var(--header-h);
  display:flex;align-items:center;transition:background .3s,border-color .3s,backdrop-filter .3s;
  border-bottom:1px solid transparent}
.header.scrolled{background:rgba(9,13,23,.82);backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line)}
.header .container{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:44px;width:auto}
.nav{display:flex;align-items:center;gap:4px}
.nav a{font-size:.97rem;color:var(--muted);padding:9px 14px;border-radius:var(--r-pill);
  transition:color .2s,background .2s;font-weight:500}
.nav a:hover{color:var(--text)}
.nav a.active{color:var(--gold-2);background:rgba(201,162,75,.08)}
.header-cta{display:flex;align-items:center;gap:12px}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:12px;
  width:46px;height:46px;color:var(--text);align-items:center;justify-content:center}
.menu-btn svg{width:22px;height:22px}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:120;background:rgba(6,9,16,.6);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.drawer.open{opacity:1;visibility:visible}
.drawer-panel{position:absolute;inset-block:0;inset-inline-start:0;width:min(82vw,360px);
  background:var(--ink-2);border-inline-end:1px solid var(--line);
  transform:translateX(-100%);transition:transform .35s var(--ease);
  padding:24px;display:flex;flex-direction:column;gap:8px}
[dir=rtl] .drawer-panel{inset-inline-start:auto;inset-inline-end:0;
  border-inline-end:none;border-inline-start:1px solid var(--line);transform:translateX(100%)}
.drawer.open .drawer-panel{transform:translateX(0)}
.drawer-panel a{padding:14px 16px;border-radius:14px;color:var(--text);font-size:1.06rem;font-weight:600}
.drawer-panel a:hover,.drawer-panel a.active{background:var(--panel);color:var(--gold-2)}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.drawer-top img{height:40px}

/* ---------- Hero ---------- */
.hero{position:relative;padding-top:calc(var(--header-h) + 56px);padding-bottom:72px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:var(--sp-5);align-items:center}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:var(--muted);
  padding:7px 13px;border:1px solid var(--line-soft);border-radius:var(--r-pill);background:rgba(255,255,255,.02)}
.tag .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan)}
.hero-kicker{display:flex;align-items:center;gap:12px;margin-top:22px;
  font-family:var(--f-display);font-weight:800;font-size:clamp(.85rem,1.2vw,1rem);
  letter-spacing:.01em;color:var(--gold-2)}
.hero-kicker .kd{height:2px;width:32px;flex:0 0 auto;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold-2))}
.hero-kicker .kd:last-child{background:linear-gradient(90deg,var(--gold-2),transparent)}
.hero h1{font-size:clamp(1.5rem,3.2vw,2.5rem);font-weight:900;letter-spacing:normal;line-height:1.25;margin-top:12px;white-space:nowrap}
.hero h1 .grad-text{display:inline}
.hero-sub{font-size:clamp(.95rem,1.3vw,1.05rem);color:var(--muted);margin-top:18px;max-width:520px;line-height:1.85;text-wrap:pretty}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero-platforms{margin-top:34px}
.hero-platforms .lbl{font-family:var(--f-display);font-size:.86rem;font-weight:600;
  letter-spacing:normal;color:var(--muted);margin-bottom:14px}
.plat-row{display:flex;gap:10px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text);
  padding:8px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);
  font-weight:500;transition:border-color .2s,transform .2s}
.chip:hover{border-color:rgba(201,162,75,.4);transform:translateY(-2px)}
.chip svg,.chip img{width:16px;height:16px}

/* hero portrait + signature */
.hero-visual{position:relative;display:flex;justify-content:center}
.portrait-wrap{position:relative;width:min(100%,430px)}
.portrait-glow{position:absolute;inset:-6% -4% -2% -4%;z-index:0;border-radius:50% 50% 46% 46%/60% 60% 40% 40%;
  background:radial-gradient(60% 60% at 50% 38%,rgba(201,162,75,.5),rgba(201,162,75,0) 70%);
  filter:blur(20px)}
.portrait-disc{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);
  width:104%;aspect-ratio:1;z-index:0;border-radius:50%;
  background:conic-gradient(from 200deg,rgba(201,162,75,.0),rgba(201,162,75,.22),rgba(79,227,204,.12),rgba(201,162,75,0));
  -webkit-mask:radial-gradient(circle,transparent 56%,#000 57%,#000 63%,transparent 64%);
          mask:radial-gradient(circle,transparent 56%,#000 57%,#000 63%,transparent 64%);
  animation:spin 26s linear infinite}
.portrait-img{position:relative;z-index:1;width:100%;filter:drop-shadow(0 30px 50px rgba(0,0,0,.5))}

/* floating dashboard cards */
.float-card{position:absolute;z-index:3;background:rgba(18,26,44,.86);
  border:1px solid var(--line);border-radius:16px;padding:13px 15px;
  backdrop-filter:blur(10px);box-shadow:var(--shadow-2);min-width:150px}
.float-card .fc-top{display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--muted)}
.float-card .fc-top .live{width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 0 4px var(--cyan-dim);animation:pulse 2s infinite}
.float-card .fc-num{font-family:var(--f-data);font-weight:700;font-size:1.5rem;color:#fff;margin-top:3px}
.float-card .fc-num .up{color:var(--ok);font-size:.85rem}
.fc-roas{inset-block-start:6%;inset-inline-start:-8%}
.fc-spark{inset-block-end:12%;inset-inline-end:-9%}
.spark{display:flex;align-items:flex-end;gap:3px;height:34px;margin-top:6px}
.spark span{width:7px;background:linear-gradient(var(--gold-2),var(--gold));border-radius:3px;opacity:.85;
  animation:bar 2.6s var(--ease) infinite}
.float-card.fc-spark .fc-top .live{background:var(--gold-2);box-shadow:0 0 0 4px rgba(201,162,75,.18)}

/* ---------- Marquee trust bar ---------- */
.trust{border-block:1px solid var(--line);background:rgba(12,17,32,.55);padding-block:20px}
.trust .container{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:center}
.trust-item{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.92rem;font-weight:500}
.trust-item svg{width:20px;height:20px;color:var(--gold-2)}
.trust-sep{width:5px;height:5px;border-radius:50%;background:var(--muted-2);opacity:.5}

/* ---------- Cards / generic ---------- */
.card{background:linear-gradient(180deg,var(--panel),rgba(18,26,44,.6));
  border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:var(--sp-3);
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-6px);border-color:rgba(201,162,75,.42);
  box-shadow:var(--shadow-2),0 0 0 1px rgba(201,162,75,.1)}
.card-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:rgba(201,162,75,.1);border:1px solid var(--line);color:var(--gold-2);margin-bottom:18px;
  transition:transform .3s var(--ease),background .3s,border-color .3s}
.card:hover .card-ico{transform:translateY(-2px) scale(1.07);background:rgba(201,162,75,.16);border-color:rgba(201,162,75,.5)}
.card-ico svg{width:25px;height:25px}
.card h3{font-size:1.22rem;margin-bottom:10px}
.card p{color:var(--muted);font-size:.97rem;line-height:1.8}
.card .more{display:inline-flex;align-items:center;gap:7px;margin-top:16px;color:var(--gold-2);
  font-weight:600;font-size:.92rem;font-family:var(--f-display)}
.card .more svg{width:16px;height:16px;transition:transform .2s}
.card:hover .more svg{transform:translateX(-5px)}
[dir=rtl] .card:hover .more svg{transform:translateX(-5px)}

/* problems */
.prob-grid{grid-template-columns:repeat(3,1fr)}
.prob{display:flex;gap:14px;padding:20px;border:1px solid var(--line-soft);border-radius:var(--r-md);
  background:rgba(255,107,107,.025)}
.prob .x{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,107,107,.12);color:var(--danger)}
.prob .x svg{width:18px;height:18px}
.prob p{color:var(--muted);font-size:.96rem;line-height:1.75}
.prob b{color:var(--text);font-weight:600;display:block;font-family:var(--f-display)}

/* ---------- Growth Engine (signature) ---------- */
.engine{position:relative;border:1px solid var(--line);border-radius:var(--r-xl);
  background:linear-gradient(180deg,rgba(18,26,44,.8),rgba(10,15,27,.6));padding:34px;overflow:hidden}
.engine::before{content:"";position:absolute;inset:0;
  background:radial-gradient(700px 200px at 50% 0,rgba(201,162,75,.1),transparent 70%)}
.engine-track{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;z-index:1}
.node{position:relative;text-align:center;padding:22px 12px;border:1px solid var(--line-soft);
  border-radius:var(--r-md);background:var(--panel);transition:border-color .3s,transform .3s}
.node:hover{border-color:rgba(201,162,75,.45);transform:translateY(-4px)}
.node .n-ico{width:48px;height:48px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;
  background:rgba(201,162,75,.1);border:1px solid var(--line);color:var(--gold-2)}
.node .n-ico svg{width:23px;height:23px}
.node h4{font-size:1.04rem;margin-bottom:6px}
.node p{font-size:.82rem;color:var(--muted);line-height:1.6}
.node .n-idx{position:absolute;inset-block-start:10px;inset-inline-start:12px;font-family:var(--f-data);
  font-size:.72rem;color:var(--gold-deep);font-weight:700}
.engine-flow{position:absolute;top:50%;inset-inline:6%;height:2px;z-index:0;
  background:linear-gradient(90deg,transparent,var(--line),transparent)}
.engine-pulse{position:absolute;top:calc(50% - 4px);width:9px;height:9px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 14px var(--cyan);z-index:0;
  animation:flow 5s linear infinite}
.engine-foot{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center;
  margin-top:26px;position:relative;z-index:1;color:var(--muted);font-size:.95rem}

/* ---------- Services grid ---------- */
.svc-grid{grid-template-columns:repeat(3,1fr)}
.svc-grid>.card:first-child{grid-column:span 2}
.svc-grid>.card:first-child h3{font-size:1.35rem}
.svc-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.svc-tags span{font-size:.74rem;color:var(--muted);padding:4px 10px;border:1px solid var(--line-soft);
  border-radius:var(--r-pill);background:rgba(255,255,255,.02)}
.card--feature{grid-column:span 2;background:linear-gradient(150deg,rgba(201,162,75,.14),rgba(18,26,44,.7));
  border-color:var(--line)}

/* ---------- Industries ---------- */
.ind-grid{grid-template-columns:repeat(4,1fr);gap:14px}
.ind{display:flex;flex-direction:column;gap:12px;padding:22px 18px;border:1px solid var(--line-soft);
  border-radius:var(--r-md);background:var(--panel);transition:transform .3s,border-color .3s,background .3s}
.ind:hover{transform:translateY(-5px);border-color:rgba(201,162,75,.4);background:var(--panel-2)}
.ind .i-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(79,227,204,.08);border:1px solid var(--line-soft);color:var(--cyan)}
.ind .i-ico svg{width:22px;height:22px}
.ind b{font-family:var(--f-display);font-weight:700;font-size:1.02rem}
.ind span{font-size:.84rem;color:var(--muted)}

/* ---------- Process steps ---------- */
.steps{counter-reset:s;display:grid;gap:16px}
.step{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
  padding:24px;border:1px solid var(--line-soft);border-radius:var(--r-lg);background:var(--panel);
  transition:border-color .3s,transform .3s}
.step:hover{border-color:var(--line);transform:translateX(-6px)}
[dir=rtl] .step:hover{transform:translateX(6px)}
.step .s-num{font-family:var(--f-data);font-weight:700;font-size:1.5rem;color:var(--gold-2);
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1px solid var(--line);background:rgba(201,162,75,.07)}
.step h3{font-size:1.2rem;margin-bottom:7px}
.step p{color:var(--muted);font-size:.97rem;line-height:1.8}

/* ---------- Content creator ---------- */
.creator{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--sp-5);align-items:center}
.creator-photo{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);
  background:var(--panel)}
.creator-photo img{width:100%;display:block;mix-blend-mode:luminosity;opacity:.92}
.creator-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(9,13,23,.7)),
  linear-gradient(100deg,rgba(201,162,75,.18),transparent 60%)}
.soc-grid{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px}
.soc{display:flex;align-items:center;gap:13px;padding:15px;border:1px solid var(--line-soft);
  border-radius:var(--r-md);background:var(--panel);transition:transform .25s,border-color .25s}
.soc:hover{transform:translateY(-3px);border-color:rgba(201,162,75,.4)}
.soc .s-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.04);color:var(--text)}
.soc .s-ico svg{width:21px;height:21px}
.soc b{display:block;font-family:var(--f-display);font-size:.98rem}
.soc span{font-size:.8rem;color:var(--muted)}

/* ---------- Lead magnet / audit ---------- */
.audit{position:relative;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(120deg,rgba(201,162,75,.12),rgba(18,26,44,.85));padding:clamp(28px,5vw,56px)}
.audit::before{content:"";position:absolute;inset-block:0;inset-inline-end:-10%;width:50%;
  background:radial-gradient(circle at 70% 50%,rgba(79,227,204,.12),transparent 60%)}
.audit-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp-5);align-items:center;position:relative;z-index:1}
.audit ul.checks{display:grid;gap:12px;margin-top:22px}
.audit ul.checks li{display:flex;gap:11px;align-items:flex-start;color:var(--muted);font-size:.97rem}
.audit ul.checks svg{width:21px;height:21px;color:var(--ok);flex:none;margin-top:2px}

/* ---------- Forms ---------- */
.form{display:grid;gap:14px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:24px}
.field{display:grid;gap:7px}
.field label{font-size:.86rem;color:var(--text);font-weight:600;font-family:var(--f-display)}
.field .req{color:var(--gold-2)}
.input,.textarea,select.input{
  width:100%;background:var(--ink-2);border:1px solid var(--line-soft);border-radius:12px;
  color:var(--text);font-family:inherit;font-size:1rem;padding:14px 15px;transition:border-color .2s,background .2s;min-height:52px}
.textarea{min-height:120px;resize:vertical;line-height:1.7}
.input:focus,.textarea:focus,select.input:focus{outline:none;border-color:var(--gold);background:#0b1120}
.input::placeholder,.textarea::placeholder{color:var(--muted-2)}
.field .hint{font-size:.78rem;color:var(--muted-2)}
.form-note{font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:8px}
.form-note svg{width:16px;height:16px;color:var(--ok)}
.form-msg{display:none;padding:14px 16px;border-radius:12px;font-size:.95rem;border:1px solid}
.form-msg.ok{display:block;background:rgba(91,209,127,.1);border-color:rgba(91,209,127,.4);color:#bff5cd}

/* ---------- Final CTA ---------- */
.final{position:relative;text-align:center;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(36px,6vw,80px) clamp(20px,5vw,40px);overflow:hidden;
  background:linear-gradient(180deg,rgba(18,26,44,.8),rgba(10,15,27,.55))}
.final::before{content:"";position:absolute;inset:0;
  background:radial-gradient(600px 300px at 50% 0,rgba(201,162,75,.16),transparent 65%)}
.final>*{position:relative;z-index:1}
.final h2{font-size:clamp(1.9rem,4.5vw,3.1rem);max-width:780px;margin-inline:auto;line-height:1.25}
.final p{color:var(--muted);max-width:560px;margin:18px auto 0;font-size:1.08rem}
.final .hero-cta{justify-content:center;margin-top:32px}

/* ---------- Stats strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{padding:24px;border:1px solid var(--line-soft);border-radius:var(--r-lg);background:var(--panel);text-align:center}
.stat .num{font-family:var(--f-data);font-weight:700;font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--gold-2);line-height:1}
.stat .lbl{color:var(--muted);font-size:.92rem;margin-top:10px}

/* ---------- Testimonials / proof ---------- */
.quote{padding:28px;border:1px solid var(--line-soft);border-radius:var(--r-lg);background:var(--panel)}
.quote .q{font-size:1.05rem;line-height:1.9;color:var(--text)}
.quote .q::before{content:"”";font-family:var(--f-display);font-size:2.4rem;color:var(--gold);
  display:block;line-height:.4;margin-bottom:14px}
.quote .who{display:flex;align-items:center;gap:12px;margin-top:20px}
.quote .who .av{width:42px;height:42px;border-radius:50%;background:rgba(201,162,75,.14);
  display:grid;place-items:center;color:var(--gold-2);font-family:var(--f-display);font-weight:700}
.quote .who b{font-family:var(--f-display);font-size:.96rem}
.quote .who span{font-size:.82rem;color:var(--muted)}

/* ---------- Footer (structured, professional) ---------- */
.footer{position:relative;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(10,14,24,.5),rgba(7,10,18,.95));
  padding-block:var(--sp-6) 0;margin-top:var(--sp-7)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1.1fr 1.3fr;gap:var(--sp-4) var(--sp-6);padding-bottom:var(--sp-5)}
.footer-grid h4{position:relative;font-family:var(--f-display);font-weight:700;color:var(--gold-2);font-size:1.02rem;
  letter-spacing:0;text-transform:none;margin-bottom:20px;padding-bottom:13px}
.footer-grid h4::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;width:36px;height:2px;
  background:linear-gradient(90deg,var(--gold-2),transparent)}
/* brand column */
.foot-brand .foot-brandname{font-family:var(--f-display);font-weight:800;font-size:1.2rem;color:var(--gold-2);margin-bottom:14px}
.foot-brand{text-align:center}
.foot-brand .foot-logo{height:38px;width:auto;margin:0 auto 18px;display:block}
.foot-brand p{color:var(--muted);font-size:.9rem;line-height:2.05;max-width:320px;margin-inline:auto;
  text-align:center;letter-spacing:.1px;text-wrap:pretty}
.foot-brand-soc{display:flex;gap:11px;margin-top:24px;justify-content:center}
.foot-brand-soc a{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;
  border:1px solid var(--line-soft);color:var(--muted);background:var(--panel);transition:transform .2s,border-color .2s,background .2s,color .2s}
.foot-brand-soc a:hover{transform:translateY(-3px)}
.foot-brand-soc svg{width:18px;height:18px}
.foot-brand-soc .s-tiktok:hover{color:#fff;border-color:#69C9D0;background:rgba(105,201,208,.14)}
.foot-brand-soc .s-youtube:hover{color:#fff;border-color:#FF0000;background:rgba(255,0,0,.14)}
.foot-brand-soc .s-instagram:hover{color:#fff;border-color:#E1306C;background:rgba(225,48,108,.14)}
.foot-brand-soc .s-x:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.1)}
.foot-brand-soc .s-snapchat:hover{color:#1a1304;border-color:#FFFC00;background:#FFFC00}
/* link columns */
.footer-grid .flinks li+li{margin-top:13px}
.footer-grid .flinks a{color:#cdd3df;font-size:.95rem;display:inline-flex;align-items:center;gap:8px;transition:color .2s,gap .2s}
.footer-grid .flinks a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold-deep);flex:none;transition:background .2s}
.footer-grid .flinks a:hover{color:var(--gold-2);gap:11px}
.footer-grid .flinks a:hover::before{background:var(--gold-2)}
/* contact column */
.ct-row{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px dashed var(--line-soft);
  color:var(--text);transition:transform .2s}
.ct-row:last-of-type{border-bottom:0}
.ct-row:hover{transform:translateX(4px)}
[dir=rtl] .ct-row:hover{transform:translateX(-4px)}
.ct-row .ct-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:rgba(201,162,75,.1);border:1px solid var(--line);color:var(--gold-2)}
.ct-row .ct-ic svg{width:18px;height:18px}
.ct-row .ct-tx{display:flex;flex-direction:column;min-width:0}
.ct-row .ct-tx b{font-family:var(--f-display);font-size:.82rem;color:var(--muted);font-weight:500}
.ct-row .ct-tx i{font-style:normal;font-size:.95rem;color:var(--text);direction:ltr;text-align:start;overflow-wrap:anywhere}
.foot-contact-col .btn{margin-top:18px;width:100%}
/* bottom bar */
.footer-bottom{border-top:1px solid var(--line-soft);margin-top:0;padding-block:var(--sp-3) var(--sp-3);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;color:var(--muted-2);font-size:.86rem}
.footer::before{content:"";position:absolute;inset-inline:0;inset-block-start:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,162,75,.5),transparent)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:var(--sp-4)}
.footer .brand img{height:50px;margin-bottom:16px}

/* pre-footer CTA band */
.footer-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:calc(-1 * var(--sp-6));margin-bottom:var(--sp-5);padding:32px 36px;border-radius:var(--r-xl);
  border:1px solid rgba(201,162,75,.35);position:relative;overflow:hidden;
  background:linear-gradient(120deg,rgba(201,162,75,.16),rgba(18,26,44,.92))}
.footer-cta::before{content:"";position:absolute;inset-block:0;inset-inline-end:-8%;width:46%;
  background:radial-gradient(circle at 70% 50%,rgba(79,227,204,.14),transparent 62%);pointer-events:none}
.footer-cta h3{font-size:clamp(1.3rem,2.6vw,1.7rem);position:relative;z-index:1}
.footer-cta p{color:var(--muted);margin-top:6px;position:relative;z-index:1;font-size:1rem}
.footer-cta-btns{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:1}

/* brand column */
.foot-brand .foot-logo{height:58px;width:auto;margin-bottom:18px}
.foot-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.foot-chip{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:var(--muted);
  padding:7px 13px;border:1px solid var(--line-soft);border-radius:var(--r-pill);background:rgba(255,255,255,.02)}
.foot-chip svg{width:15px;height:15px;color:var(--gold-2)}
.foot-chip .pip{width:8px;height:8px;border-radius:50%;background:#33d17a;box-shadow:0 0 0 0 rgba(51,209,122,.5);animation:ring 2.4s infinite}

/* contact rows */
.foot-contact-row{display:flex;align-items:center;gap:12px;padding:9px 0;transition:transform .2s}
.foot-contact-row:hover{transform:translateX(-4px)}
[dir=rtl] .foot-contact-row:hover{transform:translateX(4px)}
.foot-contact-row .fc-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:rgba(201,162,75,.1);border:1px solid var(--line);color:var(--gold-2)}
.foot-contact-row .fc-ic svg{width:18px;height:18px}
.foot-contact-row b{font-family:var(--f-display);font-size:.92rem;display:block;line-height:1.3}
.foot-contact-row i{font-style:normal;font-size:.82rem;color:var(--muted);direction:ltr;display:block;text-align:start}

/* social bar with full names */
.foot-social-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--line-soft)}
.foot-follow{color:var(--muted);font-size:.95rem}
.foot-follow strong{color:var(--gold-2);font-family:var(--f-data);font-weight:600}
.foot-socials{display:flex;gap:10px;flex-wrap:wrap}
.foot-social{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:var(--r-pill);
  border:1px solid var(--line-soft);background:var(--panel);color:var(--text);font-size:.88rem;font-weight:500;
  transition:transform .2s,border-color .2s,background .2s,color .2s}
.foot-social svg{width:17px;height:17px;flex:none}
.foot-social:hover{transform:translateY(-3px)}
.foot-social.s-tiktok:hover{border-color:#69C9D0;background:rgba(105,201,208,.12)}
.foot-social.s-youtube:hover{border-color:#FF0000;background:rgba(255,0,0,.12)}
.foot-social.s-instagram:hover{border-color:#E1306C;background:rgba(225,48,108,.12)}
.foot-social.s-x:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.foot-social.s-snapchat:hover{border-color:#FFFC00;background:rgba(255,252,0,.12)}
.foot-social.s-whatsapp:hover{border-color:#1FAE54;background:rgba(31,174,84,.14)}
.footer p{color:var(--muted);font-size:.94rem;line-height:1.85;max-width:320px}
.footer h4{font-size:.84rem;font-family:var(--f-data);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:16px}
.footer ul.flinks li+li{margin-top:11px}
.footer ul.flinks a{color:var(--muted);font-size:.96rem;transition:color .2s}
.footer ul.flinks a:hover{color:var(--gold-2)}
.foot-soc{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.foot-soc a{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--line-soft);color:var(--muted);transition:.2s;background:var(--panel)}
.foot-soc a:hover{color:var(--gold-2);border-color:rgba(201,162,75,.4);transform:translateY(-3px)}
.foot-soc svg{width:19px;height:19px}
.foot-contact a{display:flex;align-items:center;gap:10px;color:var(--text);font-size:.96rem;margin-bottom:12px}
.foot-contact a svg{width:18px;height:18px;color:var(--gold-2)}
.footer-bottom{border-top:1px solid var(--line-soft);margin-top:var(--sp-4);padding-top:var(--sp-3);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;color:var(--muted-2);font-size:.85rem}
.legal-links{display:flex;gap:20px;flex-wrap:wrap}
.legal-links a{color:var(--muted);transition:color .2s}
.legal-links a:hover{color:var(--gold-2)}

/* ---------- Floating WhatsApp + mobile sticky ---------- */
.wa-float{position:fixed;inset-block-end:24px;inset-inline-start:24px;z-index:90;
  width:58px;height:58px;border-radius:50%;background:#1FAE54;display:grid;place-items:center;
  box-shadow:0 14px 36px rgba(31,174,84,.4);color:#fff;transition:transform .25s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px}
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 rgba(31,174,84,.5);animation:ring 2.6s infinite}



/* ---------- Page hero (inner pages) ---------- */
.phero{padding-top:calc(var(--header-h) + 60px);padding-bottom:40px;text-align:center}
.phero h1{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:900;letter-spacing:normal}
.phero p{color:var(--muted);max-width:640px;margin:18px auto 0;font-size:1.1rem;line-height:1.85}
.phero .phero-role{color:var(--gold-2);font-family:var(--f-display);font-weight:600;font-size:1.02rem;
  margin-top:14px;letter-spacing:.3px}
.breadcrumb{display:inline-flex;gap:8px;color:var(--muted-2);font-size:.82rem;margin-bottom:18px;
  font-family:var(--f-data)}
.breadcrumb a:hover{color:var(--gold-2)}

/* ---------- About specifics ---------- */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--sp-5);align-items:start}
.about-photo{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(160deg,var(--panel-2),var(--ink-2))}
.about-photo img{width:100%}
.about-photo .ribbon{position:absolute;inset-block-end:0;inset-inline:0;padding:20px;
  background:linear-gradient(0deg,rgba(9,13,23,.95),transparent);display:flex;align-items:center;gap:12px}
.about-photo .ribbon img{height:30px;width:auto}
.prose p{color:var(--muted);line-height:1.95;margin-bottom:16px;font-size:1.04rem}
.prose strong{color:var(--text)}
.values{grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px}
.value{padding:18px;border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--panel)}
.value .v-ico{color:var(--gold-2);margin-bottom:10px}
.value .v-ico svg{width:24px;height:24px}
.value b{font-family:var(--f-display);display:block;margin-bottom:4px}
.value p{color:var(--muted);font-size:.9rem}

/* timeline */
.tl{display:grid;gap:0;position:relative;margin-top:10px}
.tl-item{display:grid;grid-template-columns:auto 1fr;gap:20px;padding-bottom:26px;position:relative}
.tl-item::before{content:"";position:absolute;inset-inline-start:23px;inset-block:8px -4px;width:2px;
  background:var(--line)}
.tl-item:last-child::before{display:none}
.tl-dot{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;z-index:1;flex:none;
  background:rgba(201,162,75,.1);border:1px solid var(--line);color:var(--gold-2);font-family:var(--f-data);font-weight:700}
.tl-item h4{font-size:1.08rem;margin-bottom:5px}
.tl-item p{color:var(--muted);font-size:.95rem}

/* ---------- Services page detail ---------- */
.svc-detail{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.svc-block{padding:28px;border:1px solid var(--line-soft);border-radius:var(--r-lg);background:var(--panel);
  transition:border-color .3s,transform .3s}
.svc-block:hover{border-color:var(--line);transform:translateY(-5px)}
.svc-block .sb-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.svc-block .sb-ico{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
  background:rgba(201,162,75,.1);border:1px solid var(--line);color:var(--gold-2);flex:none}
.svc-block .sb-ico svg{width:25px;height:25px}
.svc-block h3{font-size:1.2rem}
.svc-block .sb-list{display:grid;gap:9px;margin-top:8px}
.svc-block .sb-list li{display:flex;gap:9px;color:var(--muted);font-size:.94rem;align-items:flex-start}
.svc-block .sb-list svg{width:18px;height:18px;color:var(--gold-2);flex:none;margin-top:3px}

/* ---------- Work / case studies ---------- */
.work-grid{grid-template-columns:repeat(2,1fr);gap:20px}
.work{display:block;border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;
  background:var(--panel);transition:transform .3s,border-color .3s}
.work:hover{transform:translateY(-6px);border-color:rgba(201,162,75,.4)}
.work .w-top{padding:24px;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.work .w-cat{font-family:var(--f-data);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2)}
.work h3{font-size:1.22rem;margin-top:8px}
.work .w-badge{font-size:.74rem;color:var(--muted);padding:5px 10px;border:1px solid var(--line-soft);
  border-radius:var(--r-pill);white-space:nowrap}
.work .w-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.work .w-metric{padding:20px;text-align:center;border-inline-start:1px solid var(--line-soft)}
.work .w-metric:first-child{border-inline-start:none}
.work .w-metric .m-num{font-family:var(--f-data);font-weight:700;font-size:1.5rem;color:#fff}
.work .w-metric .m-lbl{font-size:.76rem;color:var(--muted);margin-top:4px}
.work .w-foot{padding:16px 24px;color:var(--muted);font-size:.88rem;display:flex;align-items:center;gap:8px}
.note-box{display:flex;gap:12px;padding:16px 20px;border:1px dashed var(--line);border-radius:var(--r-md);
  background:rgba(201,162,75,.04);color:var(--muted);font-size:.9rem;align-items:flex-start;margin-top:24px}
.note-box svg{width:20px;height:20px;color:var(--gold-2);flex:none;margin-top:2px}

/* ---------- Content hub ---------- */
.post-grid{grid-template-columns:repeat(3,1fr);gap:20px}
.post{display:flex;flex-direction:column;border:1px solid var(--line-soft);border-radius:var(--r-lg);
  overflow:hidden;background:var(--panel);transition:transform .3s,border-color .3s}
.post:hover{transform:translateY(-5px);border-color:rgba(201,162,75,.4)}
.post .p-cover{aspect-ratio:16/10;background:linear-gradient(135deg,var(--panel-2),var(--ink-2));
  position:relative;display:grid;place-items:center;color:var(--gold);overflow:hidden}
.post .p-cover svg{width:46px;height:46px;opacity:.5}
.post .p-cover .p-tag{position:absolute;inset-block-start:12px;inset-inline-start:12px;font-size:.72rem;
  padding:5px 10px;border-radius:var(--r-pill);background:rgba(9,13,23,.7);border:1px solid var(--line);color:var(--gold-2)}
.post .p-body{padding:20px;display:flex;flex-direction:column;flex:1}
.post h3{font-size:1.1rem;margin-bottom:8px;line-height:1.4}
.post p{color:var(--muted);font-size:.9rem;line-height:1.7;flex:1}
.post .p-meta{display:flex;gap:8px;align-items:center;color:var(--muted-2);font-size:.8rem;margin-top:14px;font-family:var(--f-data)}

/* ---------- Contact page ---------- */
.contact-grid{display:grid;grid-template-columns:1fr .9fr;gap:var(--sp-5);align-items:start}
.contact-methods{display:grid;gap:14px}
.cmethod{display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px solid var(--line-soft);
  border-radius:var(--r-md);background:var(--panel);transition:transform .25s,border-color .25s}
.cmethod:hover{transform:translateY(-3px);border-color:rgba(201,162,75,.4)}
.cmethod .cm-ico{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:rgba(201,162,75,.1);border:1px solid var(--line);color:var(--gold-2)}
.cmethod .cm-ico svg{width:23px;height:23px}
.cmethod>div{min-width:0}
.cmethod b{font-family:var(--f-display);display:block;font-size:1rem}
.cmethod span{font-size:.88rem;color:var(--muted);direction:ltr;text-align:start;
  display:block;overflow-wrap:anywhere}
.faq{display:grid;gap:12px;margin-top:8px}
.faq details{border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--panel);overflow:hidden}
.faq summary{padding:18px 20px;cursor:pointer;font-family:var(--f-display);font-weight:600;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:11px;height:11px;flex:none;margin-top:-3px;
  border-right:2px solid var(--gold-2);border-bottom:2px solid var(--gold-2);
  transform:rotate(45deg);transition:transform .28s var(--ease)}
.faq details[open] summary{color:var(--gold-2)}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.faq details[open]{border-color:rgba(201,162,75,.4)}
.faq-body{padding:2px 20px 20px}
.faq-body p{color:var(--muted);font-size:.96rem;line-height:1.85;margin-bottom:10px}
.faq-body p:last-child{margin-bottom:0}
.faq-body strong{color:var(--text);font-weight:700}
.faq-lead{color:var(--text);font-weight:600;font-family:var(--f-display);margin-bottom:10px}
.faq-list{display:grid;gap:9px;margin:4px 0 6px}
.faq-list li{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:.95rem;line-height:1.6}
.faq-list li svg{width:18px;height:18px;color:var(--gold-2);flex:none;margin-top:2px}
.faq-list.neg li svg{color:var(--danger)}
.faq-flow{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 2px}
.faq-flow span{font-family:var(--f-data);font-size:.78rem;color:var(--gold-2);background:rgba(201,162,75,.08);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 11px;white-space:nowrap}
.faq-flow i{color:var(--muted-2);font-style:normal}
.faq-note{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft);
  color:var(--gold-2);font-family:var(--f-display);font-weight:600;font-size:.95rem}

/* ---------- Availability badge ---------- */
.avail{display:inline-flex;align-items:center;gap:9px;font-size:.86rem;font-weight:600;color:var(--text);
  padding:9px 16px;border:1px solid rgba(91,209,127,.32);border-radius:var(--r-pill);
  background:rgba(91,209,127,.08)}
.avail .pip{width:9px;height:9px;border-radius:50%;background:#33d17a;
  box-shadow:0 0 0 0 rgba(51,209,122,.5);animation:ring 2.4s infinite}

/* ---------- Framed photo ---------- */
.photo-frame{position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid rgba(201,162,75,.35);background:var(--panel);
  box-shadow:0 30px 70px rgba(0,0,0,.5), inset 0 0 0 1px rgba(245,242,234,.04);aspect-ratio:4/5}
.photo-frame img{width:100%;height:100%;object-fit:cover;display:block}
.photo-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(9,13,23,.55)),
  linear-gradient(115deg,rgba(201,162,75,.12),transparent 45%)}
.frame-glow{position:absolute;inset:-8% -6%;z-index:-1;border-radius:50%;
  background:radial-gradient(60% 60% at 50% 40%,rgba(201,162,75,.34),transparent 70%);filter:blur(26px)}
.frame-cap{position:absolute;inset-block-end:0;inset-inline:0;z-index:2;padding:18px 20px;
  display:flex;align-items:center;gap:10px}
.frame-cap .fc-name{font-family:var(--f-display);font-weight:700;color:#fff;font-size:1.02rem;line-height:1.2}
.frame-cap .fc-role{font-size:.8rem;color:var(--gold-2)}

/* ---------- Client brands ---------- */
.brands-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.brand-chip{display:grid;place-items:center;padding:20px 14px;border:1px solid var(--line-soft);
  border-radius:var(--r-md);background:var(--panel);min-height:84px;text-align:center;
  transition:transform .25s,border-color .25s,background .25s}
.brand-chip:hover{transform:translateY(-4px);border-color:rgba(201,162,75,.4);background:var(--panel-2)}
.brand-chip b{font-family:var(--f-display);font-weight:700;font-size:1rem;color:var(--text)}
.brand-chip span{display:block;font-size:.72rem;color:var(--muted-2);margin-top:3px;font-family:var(--f-data)}

/* ---------- Qualification (before we start) ---------- */
.qual-grid{grid-template-columns:repeat(3,1fr);gap:18px}
.qual{position:relative;padding:30px 24px 26px;border:1px solid var(--line-soft);border-radius:var(--r-lg);
  background:var(--panel);overflow:hidden;transition:border-color .3s,transform .3s}
.qual:hover{border-color:var(--line);transform:translateY(-5px)}
.qual .q-no{font-family:var(--f-data);font-weight:700;font-size:3rem;line-height:1;color:rgba(201,162,75,.28);
  position:absolute;inset-block-start:14px;inset-inline-end:18px}
.qual .q-ico{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
  background:rgba(201,162,75,.1);border:1px solid var(--line);color:var(--gold-2);margin-bottom:16px}
.qual .q-ico svg{width:25px;height:25px}
.qual h3{font-size:1.18rem;margin-bottom:8px}
.qual p{color:var(--muted);font-size:.96rem;line-height:1.8}

/* ---------- Packages ---------- */
.pack-grid{grid-template-columns:repeat(2,1fr);gap:22px;align-items:stretch}
.pack{position:relative;padding:36px 34px;border:1px solid var(--line-soft);border-radius:var(--r-xl);
  background:var(--panel);display:flex;flex-direction:column;transition:transform .3s,border-color .3s,box-shadow .3s}
.pack:hover{transform:translateY(-6px);border-color:var(--line);box-shadow:var(--shadow-2)}
.pack--feature{background:linear-gradient(160deg,rgba(201,162,75,.14),rgba(18,26,44,.85));border-color:rgba(201,162,75,.4);
  box-shadow:0 24px 60px rgba(0,0,0,.32)}
.pack-tier{display:inline-flex;align-items:center;font-family:var(--f-data);font-size:.72rem;font-weight:600;
  letter-spacing:.08em;color:var(--gold-2);background:rgba(201,162,75,.1);border:1px solid var(--line);
  padding:6px 13px;border-radius:var(--r-pill);margin-bottom:16px}
.pack-tier--hot{color:#1a1304;background:linear-gradient(100deg,var(--gold-2),var(--gold));border-color:transparent;font-weight:700}
.pack .p-name{font-family:var(--f-display);font-weight:800;font-size:1.5rem;margin:0 0 8px}
.pack .p-desc{color:var(--muted);font-size:.96rem;line-height:1.7}
.pack-divider{height:1px;background:var(--line-soft);margin:22px 0 24px}
.pack-list{display:grid;gap:15px;margin:0 0 28px;flex:1}
.pack-list li{display:flex;gap:12px;align-items:flex-start;color:var(--text);font-size:.97rem;line-height:1.65}
.pk-check{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;margin-top:1px;
  background:rgba(201,162,75,.14);color:var(--gold-2)}
.pack--feature .pk-check{background:rgba(201,162,75,.22)}
.pk-check svg{width:14px;height:14px}
.pack .btn{margin-top:auto}

/* ---------- Partner positioning banner ---------- */
.partner{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;padding:28px 32px;
  border:1px solid var(--line);border-radius:var(--r-xl);
  background:linear-gradient(120deg,rgba(79,227,204,.08),rgba(18,26,44,.8))}
.partner .p-mark{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;flex:none;
  background:rgba(201,162,75,.12);border:1px solid var(--line);color:var(--gold-2)}
.partner .p-mark svg{width:32px;height:32px}
.partner h3{font-size:1.3rem;margin-bottom:6px}
.partner p{color:var(--muted);font-size:1rem;line-height:1.8}

/* ---------- Legal pages ---------- */
.legal-doc{max-width:840px;margin-inline:auto}
.legal-doc .updated{display:inline-block;font-family:var(--f-data);font-size:.78rem;color:var(--gold-2);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 14px;margin-bottom:30px}
.legal-doc h2{font-family:var(--f-display);font-size:1.32rem;font-weight:800;margin:36px 0 12px;color:var(--text)}
.legal-doc h2:first-of-type{margin-top:0}
.legal-doc p{color:var(--muted);line-height:1.95;font-size:1.02rem;margin-bottom:12px}
.legal-doc ul{display:grid;gap:9px;margin:10px 0 16px}
.legal-doc li{display:flex;gap:11px;color:var(--muted);line-height:1.85;font-size:1rem}
.legal-doc li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none;margin-top:12px}
.legal-doc a{color:var(--gold-2);text-decoration:underline;text-underline-offset:3px}

/* ---------- Reveal animation (smooth, premium) ---------- */
:root{--rev-ease:cubic-bezier(.16,.84,.34,1)}
/* fast + cheap: no blur (GPU-heavy on mobile with 57 nodes), short travel, elements
   revealed BEFORE entering the viewport (rootMargin in main.js) so fast scrollers never see voids */
.reveal{will-change:opacity,transform;
  transition:opacity .55s var(--rev-ease),transform .6s var(--rev-ease)}
.js .reveal{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.07s}
.reveal[data-d="2"]{transition-delay:.14s}
.reveal[data-d="3"]{transition-delay:.21s}
.reveal[data-d="4"]{transition-delay:.28s}
/* auto-stagger for grid/list children (set by JS via --i) */
.stagger-child{transition:opacity .5s var(--rev-ease),transform .55s var(--rev-ease);
  transition-delay:calc(var(--i,0) * 60ms)}
.js .stagger-child{opacity:0;transform:translateY(16px)}
.stagger-child.in{opacity:1;transform:none}

/* scroll progress bar */
.scroll-progress{position:fixed;top:0;inset-inline:0;height:3px;z-index:200;transform-origin:0 50%;
  transform:scaleX(0);background:linear-gradient(90deg,var(--gold-2),var(--gold),var(--cyan));
  box-shadow:0 0 12px rgba(201,162,75,.5);pointer-events:none}
[dir=rtl] .scroll-progress{transform-origin:100% 50%}

/* button shine sweep */
.btn--primary{position:relative;overflow:hidden}
.btn--primary::after{content:"";position:absolute;top:0;inset-inline-start:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);transition:inset-inline-start .7s var(--ease);pointer-events:none}
.btn--primary:hover::after{inset-inline-start:130%}

/* hero entrance sequence */
.hero-load .hero-copy>*{opacity:0;transform:translateY(26px);animation:heroIn .9s var(--rev-ease) forwards}
.hero-load .hero-copy>*:nth-child(1){animation-delay:.05s}
.hero-load .hero-copy>*:nth-child(2){animation-delay:.15s}
.hero-load .hero-copy>*:nth-child(3){animation-delay:.25s}
.hero-load .hero-copy>*:nth-child(4){animation-delay:.35s}
.hero-load .hero-copy>*:nth-child(5){animation-delay:.45s}
@keyframes heroIn{to{opacity:1;transform:none}}

/* parallax targets get smooth transform via JS */
.float-card,.portrait-wrap .photo-frame{will-change:transform}

/* ---------- Reveal animation (legacy anchor kept) ---------- */

/* ---------- Keyframes ---------- */
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--cyan-dim)}50%{box-shadow:0 0 0 6px transparent}}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes flow{0%{inset-inline-start:6%;opacity:0}10%{opacity:1}90%{opacity:1}100%{inset-inline-start:94%;opacity:0}}
@keyframes bar{0%,100%{height:30%}50%{height:100%}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(31,174,84,.5)}70%{box-shadow:0 0 0 16px rgba(31,174,84,0)}100%{box-shadow:0 0 0 0 rgba(31,174,84,0)}}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:var(--sp-4)}
  .hero-visual{order:-1;max-width:380px;margin-inline:auto}
  .hero-copy{text-align:center}
  .hero h1{white-space:normal}
  .hero-sub{margin-inline:auto}
  .hero-cta{justify-content:center}
  .hero-platforms .lbl{text-align:center}
  .plat-row{justify-content:center}
  .prob-grid,.svc-grid,.post-grid{grid-template-columns:repeat(2,1fr)}
  .svc-grid>.card:first-child,.svc-grid>.card--feature{grid-column:auto}
  .svc-grid>.card:first-child h3{font-size:1.1rem}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .creator,.audit-grid,.about-grid,.contact-grid{grid-template-columns:1fr;gap:var(--sp-4)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp-4)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .svc-detail,.work-grid,.pack-grid{grid-template-columns:1fr}
  .brands-grid{grid-template-columns:repeat(4,1fr)}
  .qual-grid{grid-template-columns:1fr}
  .hero-visual{max-width:420px}
}
@media (max-width:760px){
  :root{--header-h:64px}
  .nav,.header-cta .btn{display:none}
  .menu-btn{display:flex}
  .hero{padding-top:calc(var(--header-h) + 26px);padding-bottom:48px}
  .hero-visual{max-width:300px}
  .hero h1,.sec-title{font-size:clamp(1.6rem,7vw,2rem)}
  /* tighter top, breathing line spacing for two-line headings → consistent vertical rhythm */
  .section{padding-block:var(--sp-5) var(--sp-6)}
  .section--tight{padding-block:var(--sp-4) var(--sp-5)}
  .section--liftup{padding-top:var(--sp-2)}
  .sec-head{margin-bottom:var(--sp-4)}
  .sec-title{margin-top:4px;line-height:1.5}
  .sec-sub{margin-top:12px}
  .trust{padding-block:16px}
  .trust .container{flex-direction:column;align-items:stretch;gap:10px}
  .trust-sep{display:none}
  .trust-item{justify-content:flex-start;gap:12px;padding:13px 14px;font-size:.9rem;
    border:1px solid var(--line-soft);border-radius:12px;background:var(--panel)}
  .trust-item:last-child{border-bottom:1px solid var(--line-soft)}
  .trust-item svg{flex:none}
  .hero-platforms .lbl{text-align:center}
  .plat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .chip{justify-content:center;padding:11px 4px;font-size:.76rem}
  .engine-track{grid-template-columns:1fr 1fr;gap:12px}
  .engine-flow,.engine-pulse{display:none}
  .prob-grid,.svc-grid,.post-grid,.values,.soc-grid{grid-template-columns:1fr}
  .ind-grid{grid-template-columns:1fr 1fr}
  .brands-grid{grid-template-columns:repeat(2,1fr)}
  .partner{grid-template-columns:1fr;text-align:center;justify-items:center;gap:14px}
  .brand img{height:38px}
  /* ===== Mobile footer — spacious & balanced ===== */
  .footer{padding-top:48px;padding-bottom:98px}  /* bottom space clears the sticky CTA bar */
  .footer-grid{grid-template-columns:1fr 1fr;text-align:center;gap:34px 18px;align-items:start;padding-bottom:30px}
  .footer-grid > div{order:1}
  .footer-grid > .foot-brand{order:0;grid-column:1 / -1;text-align:center;padding-bottom:10px}
  .foot-brand .foot-logo{height:64px;margin:0 auto 18px}
  .foot-brand p{max-width:360px;font-size:.95rem;line-height:2.05;margin-inline:auto}
  .foot-brand-soc{margin-top:24px;gap:14px;justify-content:center}
  .foot-brand-soc a{width:48px;height:48px;border-radius:14px}
  .foot-brand-soc svg{width:21px;height:21px}
  .footer-grid h4{display:block;margin-bottom:16px;font-size:1rem;text-align:center}
  .footer-grid h4::after{inset-inline-start:auto;left:50%;transform:translateX(-50%);width:30px}
  .footer-grid .flinks{text-align:center}
  .footer-grid .flinks li+li{margin-top:14px}
  .footer-grid .flinks a{justify-content:center;font-size:.96rem;gap:8px}
  .footer-grid .flinks a::before{width:5px;height:5px}
  .foot-contact-col{grid-column:1 / -1;border-top:1px solid var(--line-soft);padding-top:30px;margin-top:6px}
  .foot-contact-col h4{text-align:center}
  .ct-row{justify-content:flex-start;gap:13px;padding:15px 0;max-width:340px;margin-inline:auto}
  .ct-row .ct-ic{width:44px;height:44px;border-radius:13px}
  .ct-row .ct-ic svg{width:21px;height:21px}
  .ct-row .ct-tx b{font-size:.82rem}
  .ct-row .ct-tx i{font-size:.98rem;overflow-wrap:anywhere}
  .footer-bottom{flex-direction:column;text-align:center;gap:14px;padding-block:24px 4px;margin-top:8px}
  .footer-bottom>span{font-size:.9rem;color:var(--muted)}
  .legal-links{display:none}                 /* declutter — keep only on desktop */
  
  .wa-float{inset-block-end:84px;width:52px;height:52px}
  .wa-float svg{width:26px;height:26px}
  body{padding-bottom:0}
  .float-card{transform:scale(.82)}
  .fc-roas{inset-inline-start:-4%}
  .fc-spark{inset-inline-end:-4%}
  .step{grid-template-columns:1fr;gap:12px}
  .step .s-num{width:52px;height:52px;font-size:1.25rem}
}
@media (max-width:600px){
  .hero h1{white-space:normal;text-wrap:balance}
}
@media (max-width:420px){
  .engine-track{grid-template-columns:1fr}
  .ind-grid{grid-template-columns:1fr}
  .hero-cta{flex-direction:column}.hero-cta .btn{width:100%}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal,.stagger-child{opacity:1!important;transform:none!important;filter:none!important}
  .hero-load .hero-copy>*{opacity:1!important;transform:none!important;animation:none!important}
}

/* ---------- Results section (work) ---------- */
.proofbtn{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;color:var(--gold-2);font-weight:600;
  border:1px solid var(--line);background:rgba(201,162,75,.06);padding:8px 14px;border-radius:var(--r-pill);cursor:pointer;
  transition:background .2s,transform .2s;font-family:var(--f-body)}
.proofbtn:hover{background:rgba(201,162,75,.14);transform:translateY(-1px)}
.proofbtn svg{width:14px;height:14px}
.rhero{display:grid;grid-template-columns:1.15fr .85fr;background:linear-gradient(150deg,rgba(201,162,75,.16),rgba(18,26,44,.75));
  border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;margin-bottom:18px}
.rhero-l{padding:30px 32px;display:flex;flex-direction:column;justify-content:center}
.rhero-r{padding:30px 24px;border-inline-start:1px solid var(--line-soft);display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:center;background:rgba(9,13,23,.3)}
.rbadge{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-weight:700;font-size:.85rem;padding:6px 13px;border-radius:var(--r-pill);color:#1a1304;background:#FFFC00;margin-bottom:14px}
.rbadge svg{width:15px;height:15px}
.rhero h3{font-size:1.3rem;margin:0 0 6px}
.rhero .rcat{color:var(--muted);font-size:.9rem}
.rhuge{font-family:var(--f-data);font-weight:700;font-size:clamp(2.8rem,6vw,3.6rem);color:var(--gold-2);line-height:1;margin:18px 0 4px}
.rhuge small{font-size:.32em;color:var(--muted);font-weight:500}
.rhuge-lbl{color:var(--text);font-size:1rem}
.rinsight{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;color:var(--gold-2);background:rgba(201,162,75,.1);border:1px solid var(--line);padding:9px 15px;border-radius:12px;align-self:flex-start}
.rinsight svg,.rins svg{width:15px;height:15px;flex:none}
.rmini{text-align:center}
.rmini b{font-family:var(--f-data);font-weight:700;font-size:1.5rem;display:block;line-height:1;color:var(--text)}
.rmini b small{font-size:.6em;color:var(--muted);font-weight:500}
.rmini span{color:var(--muted);font-size:.76rem;display:block;margin-top:6px}
.rhero-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 32px;border-top:1px solid var(--line-soft);color:var(--muted);font-size:.85rem;flex-wrap:wrap}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rcard{background:linear-gradient(180deg,var(--panel),rgba(18,26,44,.6));border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:22px;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.rcard:hover{transform:translateY(-6px);border-color:rgba(201,162,75,.42);box-shadow:var(--shadow-2),0 0 0 1px rgba(201,162,75,.1)}
.rcard-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.rplat{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.82rem;padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--line)}
.rplat svg{width:15px;height:15px}
.rplat--tt{color:var(--text);background:rgba(255,255,255,.04)}
.rplat--sc{color:#1a1304;background:#FFFC00;border-color:transparent}
.rtag{font-size:.76rem;color:var(--muted)}
.rbig{font-family:var(--f-data);font-weight:700;font-size:2.3rem;color:var(--gold-2);line-height:1;margin:6px 0 2px}
.rbig small{font-size:.34em;color:var(--muted);font-weight:500}
.rbig-lbl{color:var(--text);font-size:.92rem;margin-bottom:14px}
.rrow{display:flex;gap:8px;margin-bottom:14px}
.rrow>div{flex:1;text-align:center;background:rgba(255,255,255,.02);border:1px solid var(--line-soft);border-radius:11px;padding:9px 4px}
.rrow b{font-family:var(--f-data);font-weight:700;font-size:.98rem;display:block;line-height:1;color:var(--text)}
.rrow b small{font-size:.66em;color:var(--muted);font-weight:500}
.rrow span{color:var(--muted);font-size:.75rem;display:block;margin-top:4px}
.rins{display:flex;align-items:center;gap:7px;color:var(--gold-2);font-size:.82rem;font-weight:600;margin-bottom:14px}
.rcard .proofbtn{width:100%;justify-content:center}
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(5,8,14,.92);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:90vh;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow-2)}
.lb-close{position:absolute;top:18px;inset-inline-end:18px;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.08);color:#fff;font-size:1.1rem;cursor:pointer}
.lb-close:hover{background:rgba(255,255,255,.16)}
[data-theme="light"] .rhero{background:linear-gradient(150deg,rgba(20,20,20,.05),#fff)}
[data-theme="light"] .rhero-r{background:rgba(20,20,20,.02)}
[data-theme="light"] .rcard:hover{border-color:rgba(20,20,20,.35);box-shadow:var(--shadow-2),0 0 0 1px rgba(20,20,20,.1)}
[data-theme="light"] .proofbtn{background:rgba(20,20,20,.04)} [data-theme="light"] .proofbtn:hover{background:rgba(20,20,20,.09)}
[data-theme="light"] .rinsight{background:rgba(20,20,20,.05)}
[data-theme="light"] .rrow>div,[data-theme="light"] .rplat--tt{background:#FAF7F1}
@media (max-width:1024px){.rgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.rhero{grid-template-columns:1fr}.rhero-r{border-inline-start:0;border-top:1px solid var(--line-soft)}}
@media (max-width:560px){.rgrid{grid-template-columns:1fr}.rhero-l,.rhero-foot{padding-inline:22px}}

.rplat--meta{color:#5b9dff;background:rgba(24,119,242,.14);border-color:rgba(24,119,242,.3)}
[data-theme="light"] .rplat--meta{color:#1463d6;background:rgba(24,119,242,.1)}

/* ===== Designs gallery (work) ===== */
.dfilter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 28px}
.dfilter button{font-family:var(--f-body);font-size:.92rem;font-weight:700;color:var(--muted);
  background:rgba(255,255,255,.03);border:1px solid var(--line-soft);border-radius:999px;
  padding:9px 18px;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.dfilter button:hover{color:var(--text);border-color:rgba(201,162,75,.4)}
.dfilter button.is-on{color:#0b0e16;background:var(--gold-2);border-color:transparent}
.dmasonry{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
@media(max-width:900px){.dmasonry{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.dmasonry{grid-template-columns:1fr}.dfilter button{padding:8px 14px;font-size:.86rem}}
.dcard{display:flex;flex-direction:column;width:100%;margin:0;padding:0;cursor:pointer;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:18px;overflow:hidden;
  text-align:start;transition:transform .3s,border-color .3s,box-shadow .3s}
.dcard:hover{transform:translateY(-5px);border-color:rgba(201,162,75,.45);
  box-shadow:0 16px 44px rgba(0,0,0,.45)}
.dcard img{display:block;width:100%;aspect-ratio:9/16;height:auto;object-fit:cover;object-position:center top}
/* captions hidden for a clean gallery look — text kept in DOM (alt/SEO/accessibility) */
.dcap{display:none}
:root[data-theme="light"] .dfilter button{background:rgba(0,0,0,.03);color:var(--muted)}
:root[data-theme="light"] .dfilter button.is-on{color:#fff;background:#11110f;border-color:transparent}
:root[data-theme="light"] .dcard{background:#fff;border-color:rgba(0,0,0,.08)}

/* ===== Show-more (collapse to 2 rows) — work page ===== */
.rcard.clp-out,.rcard.flt-out,.dcard.clp-out,.dcard.flt-out{display:none!important}
.moreWrap{display:flex;justify-content:center;margin-top:26px}
.morebtn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:1rem;letter-spacing:.2px;
  color:var(--ink,#0c1322);padding:13px 30px;border:0;border-radius:var(--r-pill,999px);
  background:linear-gradient(180deg,var(--gold-2,#E7CD86),var(--gold,#C9A24B));
  box-shadow:0 10px 26px -10px rgba(201,162,75,.6),0 0 0 1px rgba(201,162,75,.25) inset;
  transition:transform .25s var(--ease,ease),box-shadow .25s,filter .25s}
.morebtn:hover{transform:translateY(-3px);box-shadow:0 16px 34px -12px rgba(201,162,75,.75)}
.morebtn:active{transform:translateY(-1px)}
.morebtn::after{content:"";width:9px;height:9px;border-right:2.4px solid currentColor;border-bottom:2.4px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .25s}
.morebtn[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:3px}

/* ===== Aggregate stats bar — work page ===== */
.aggbar{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:6px 0 14px}
.agg{padding:22px 16px;text-align:center;border-radius:var(--r-lg,18px);
  background:linear-gradient(180deg,rgba(201,162,75,.12),rgba(18,26,44,.5));
  border:1px solid rgba(201,162,75,.28)}
.agg b{display:block;font-family:"Space Grotesk",inherit;font-size:clamp(1.8rem,3.4vw,2.6rem);
  font-weight:700;line-height:1;color:var(--gold-2,#E7CD86)}
.agg b small{font-size:.5em;font-weight:700;margin-inline-start:2px}
.agg span{display:block;margin-top:8px;font-size:.86rem;color:var(--muted)}
.aggnote{text-align:center;font-size:.82rem;color:var(--muted);margin:0 0 22px}
@media(max-width:680px){.aggbar{grid-template-columns:repeat(2,1fr)}}

/* results platform filter spacing */
.rfilter{margin-bottom:22px}

/* ===== Brand wall (logo grid) — work page ===== */
.brandwall{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.bcard{display:flex;align-items:center;justify-content:center;min-height:132px;padding:18px 20px;
  background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:16px;
  box-shadow:0 8px 26px -16px rgba(0,0,0,.5);
  transition:transform .28s var(--ease,ease),box-shadow .28s,border-color .28s}
.bcard:hover{transform:translateY(-5px);border-color:rgba(201,162,75,.55);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.6),0 0 0 1px rgba(201,162,75,.18)}
.bcard img{max-width:100%;max-height:84px;width:auto;object-fit:contain;
  opacity:.92;transition:opacity .28s,transform .28s}
.bcard:hover img{opacity:1;transform:scale(1.04)}
.bcard--txt{font-weight:800;font-size:1.06rem;letter-spacing:.2px;color:#161b27;text-align:center;line-height:1.35}
@media(max-width:900px){.brandwall{grid-template-columns:repeat(3,1fr)}}
@media(max-width:540px){.brandwall{grid-template-columns:repeat(2,1fr)}.bcard{min-height:98px}.bcard img{max-height:50px}}

/* ===== Brand marquee (homepage) ===== */
.brandmarquee{overflow:hidden;position:relative;direction:ltr;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.bmtrack{display:flex;flex-wrap:nowrap;gap:0;width:max-content;will-change:transform;
  animation:bmscroll 48s linear infinite}
.brandmarquee:hover .bmtrack{animation-play-state:paused}
.bcard--m{flex:0 0 auto;width:206px;min-height:120px;margin-inline-end:16px}
@keyframes bmscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.bmtrack{animation:none}}
@media(max-width:540px){.bcard--m{width:168px;min-height:104px}.bcard--m img{max-height:66px}}

/* ===== Heading: balanced wrap + optional single line on desktop ===== */
.sec-title{text-wrap:balance}
@media(min-width:768px){.sec-title--1line{white-space:nowrap}}
@media(max-width:767px){.sec-title--1line{white-space:normal}}

/* ===== Filter rows: swipe affordance wrapper ===== */
.fwrap{position:relative}
.fhint{display:none}

/* ===== Mobile filter chips → professional horizontal swipe row ===== */
@media(max-width:760px){
  .dfilter,.rfilter{
    flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    gap:10px;margin-bottom:22px;padding:2px 4px 12px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .dfilter::-webkit-scrollbar,.rfilter::-webkit-scrollbar{display:none}
  .dfilter button,.rfilter button{
    flex:0 0 auto;scroll-snap-align:center;white-space:nowrap;
    font-size:.92rem;padding:10px 18px;border-radius:999px}
  .dfilter button.is-on,.rfilter button.is-on{box-shadow:0 6px 18px -8px rgba(201,162,75,.6)}

  /* directional edge fades — applied only on the side(s) that still have hidden chips */
  .fwrap.more-left:not(.more-right) [data-scrollrow]{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 100%)}
  .fwrap.more-right:not(.more-left) [data-scrollrow]{
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 87%,transparent 100%);
            mask-image:linear-gradient(90deg,#000 0,#000 87%,transparent 100%)}
  .fwrap.more-left.more-right [data-scrollrow]{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%)}

  /* swipe hint: glassy gold chevron that winks; points toward the hidden chips */
  .fhint{
    display:grid;place-items:center;
    position:absolute;top:50%;
    width:34px;height:34px;border-radius:50%;
    color:var(--gold-2);
    background:rgba(18,18,22,.5);
    -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
    border:1px solid rgba(231,205,134,.5);
    pointer-events:none;z-index:4;
    opacity:0;visibility:hidden;transform:translateY(-50%);
    transition:opacity .4s ease,visibility .4s ease}
  .fhint--left{left:5px}
  .fhint--right{right:5px}
  .fwrap.more-left  .fhint--left{
    opacity:1;visibility:visible;
    animation:fhintGlow 1.9s ease-in-out infinite, fhintNudgeL 1.9s ease-in-out infinite}
  .fwrap.more-right .fhint--right{
    opacity:1;visibility:visible;
    animation:fhintGlow 1.9s ease-in-out infinite, fhintNudgeR 1.9s ease-in-out infinite}
}
@keyframes fhintGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(231,205,134,.35),0 0 0 5px rgba(13,13,15,.45),0 0 10px rgba(201,162,75,.18)}
  50%{box-shadow:0 0 0 1px rgba(231,205,134,.8),0 0 0 5px rgba(13,13,15,.45),0 0 22px rgba(201,162,75,.55)}
}
@keyframes fhintNudgeL{
  0%,100%{transform:translateY(-50%) translateX(0)}
  50%{transform:translateY(-50%) translateX(-4px)}
}
@keyframes fhintNudgeR{
  0%,100%{transform:translateY(-50%) translateX(0)}
  50%{transform:translateY(-50%) translateX(4px)}
}
@media(prefers-reduced-motion:reduce){
  .fwrap .fhint{animation:none!important}
}

/* ===================== FEATURE BAND (creator) — full-width dark band, full framed photo ===================== */
.feature-band{position:relative;overflow:hidden;
  background:radial-gradient(120% 110% at 88% 0%, #18181d 0%, #0e0e11 58%, #0b0b0d 100%);
  --gold:#C9A24B;--gold-2:#E7CD86;--gold-deep:#A07E2E}
.feature-band .fb-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-5);
  align-items:center;direction:ltr;padding-block:var(--sp-7)}
.feature-band .fb-copy{direction:rtl;text-align:right;max-width:600px}
.feature-band .sec-title{color:#fff;margin-top:0}
.feature-band .sec-sub{color:rgba(246,243,236,.82)}
.feature-band .soc{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);color:#f6f3ec}
.feature-band .soc:hover{border-color:rgba(231,205,134,.5);background:rgba(255,255,255,.09)}
.feature-band .soc b{color:#fff}
.feature-band .soc>div span,.feature-band .soc span:not(.s-ico){color:rgba(246,243,236,.68)}
.feature-band .soc .s-ico{color:#E7CD86}
.feature-band .btn--ghost{color:#f6f3ec;border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.04)}
.feature-band .btn--ghost:hover{border-color:#E7CD86;color:#fff}
/* framed full photo on the right */
.feature-band .fb-figure{position:relative;display:flex;justify-content:center}
.feature-band .fb-figure::before{content:"";position:absolute;inset:-6% -4% -2% -4%;z-index:0;
  border-radius:50% 50% 46% 46%/58% 58% 42% 42%;
  background:radial-gradient(62% 60% at 50% 42%, rgba(201,162,75,.26), transparent 70%);filter:blur(32px)}
.feature-band .fb-figure img{position:relative;z-index:1;width:100%;max-width:430px;
  aspect-ratio:4/5;object-fit:cover;object-position:center top;display:block;
  border-radius:22px;border:1px solid rgba(231,205,134,.3);
  box-shadow:0 34px 80px -28px rgba(0,0,0,.78)}
@media(max-width:820px){
  .feature-band .fb-grid{grid-template-columns:1fr;gap:var(--sp-4);text-align:center}
  .feature-band .fb-figure{order:-1}
  .feature-band .fb-figure img{max-width:330px}
  .feature-band .fb-copy{max-width:none}
}

/* ===================== FULL-WIDTH HERO BANNER ===================== */
/* the banner is always dark → restore the REAL gold palette inside it (light theme turns gold dark) */
.hero--banner{--gold:#C9A24B;--gold-2:#E7CD86;--gold-deep:#A07E2E}

/* transparent header sitting OVER a dark hero → force gold palette + light contents in BOTH themes */
body.has-dark-hero .header:not(.scrolled){--gold:#C9A24B;--gold-2:#E7CD86;--gold-deep:#A07E2E}
body.has-dark-hero .header:not(.scrolled) .brand img{filter:none}
body.has-dark-hero .header:not(.scrolled) .nav a{color:rgba(246,243,236,.82)}
body.has-dark-hero .header:not(.scrolled) .nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
body.has-dark-hero .header:not(.scrolled) .nav a.active{color:#E7CD86;background:rgba(201,162,75,.14)}
body.has-dark-hero .header:not(.scrolled) .theme-toggle,
body.has-dark-hero .header:not(.scrolled) .menu-btn{color:#f6f3ec;border-color:rgba(255,255,255,.26)}
body.has-dark-hero .header:not(.scrolled) .theme-toggle:hover,
body.has-dark-hero .header:not(.scrolled) .menu-btn:hover{border-color:rgba(231,205,134,.55);color:#fff}
body.has-dark-hero .header:not(.scrolled) .btn--primary{
  background:linear-gradient(100deg,#E7CD86,#C9A24B);color:#1a1304}

.hero--banner{padding:0;min-height:min(90vh,780px);display:flex;align-items:center;
  overflow:hidden;background:#0d0d0f}
.hero--banner .hero-photo{position:absolute;inset:0;z-index:0;display:block}
.hero--banner .hero-photo img{width:100%;height:100%;object-fit:cover;
  object-position:0% 82%;display:block}
@media (max-width:760px){.hero--banner .hero-photo img{object-position:50% 18%}}
.hero--banner .hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to left, rgba(13,13,15,.95) 0%, rgba(13,13,15,.88) 22%, rgba(13,13,15,.5) 44%, rgba(13,13,15,.1) 62%, transparent 74%),
    linear-gradient(to top, rgba(13,13,15,.55), transparent 44%)}
.hero--banner .container{position:relative;z-index:2}
.hero--banner .hero-copy{max-width:560px;margin-left:auto;text-align:right}
.hero--banner .phero-role{color:var(--gold-2);font-family:var(--f-display);font-weight:600;
  font-size:1.02rem;margin-top:10px}
.hero--about{min-height:min(90vh,800px)}
.hero--about .hero-photo img{object-position:left top}   /* headroom baked in → head sits lower */
.hero--about h1{font-size:clamp(2.2rem,4.6vw,3.4rem)}
.hero--about .phero-role{font-size:1.08rem}

/* smooth transition: fade the banner's bottom edge into the section below (both themes) */
.hero--banner::after,.feature-band::after,.hero--cut::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--ink))}

/* ===================== CUT-OUT HERO ON BLACK (about) ===================== */
.hero--cut{position:relative;overflow:hidden;background:#000;display:flex;align-items:center;
  min-height:clamp(440px,86vh,820px);--gold:#C9A24B;--gold-2:#E7CD86;--gold-deep:#A07E2E}
.hero--cut .cut-photo{position:absolute;top:0;bottom:0;right:0;z-index:1;width:46%;
  display:flex;align-items:flex-end;justify-content:center;padding:0 3%;pointer-events:none;
  opacity:0;transform:translateY(30px) scale(1.01);
  animation:cutRise 1.15s .15s cubic-bezier(.2,.7,.2,1) forwards}
/* warm spotlight glow behind the subject (like the reference) */
.hero--cut .cut-photo::before{content:"";position:absolute;z-index:0;left:50%;top:48%;
  transform:translate(-50%,-50%);width:76%;height:80%;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(150,96,52,.34) 0%, rgba(90,58,34,.16) 44%, transparent 70%);
  filter:blur(26px)}
.hero--cut .cut-photo img{position:relative;z-index:1;width:auto;height:auto;
  max-height:92%;max-width:90%;object-fit:contain;
  transform:scaleX(-1);          /* mirror → face turns toward the text on the left */
  filter:drop-shadow(0 22px 44px rgba(0,0,0,.6));
  /* long, gradual dissolve so the lower body melts into the page with no hard edge */
  -webkit-mask-image:linear-gradient(to bottom,#000 46%,rgba(0,0,0,.4) 74%,rgba(0,0,0,.12) 90%,transparent 99%);
          mask-image:linear-gradient(to bottom,#000 46%,rgba(0,0,0,.4) 74%,rgba(0,0,0,.12) 90%,transparent 99%)}
.hero--cut .container{position:relative;z-index:2}
/* copy is locked to the left column at every width so it never sits over the photo/face */
.hero--cut .cut-copy{width:50%;max-width:600px;margin-right:auto;text-align:right}
.hero--cut h1{margin:0;line-height:1.14;font-weight:900;letter-spacing:normal}
.hero--cut .cut-name{display:block;color:var(--gold-2);font-size:clamp(1.35rem,4.6vw,4rem);
  text-shadow:0 2px 30px rgba(201,162,75,.28)}
.hero--cut .cut-welcome{display:block;color:var(--gold);font-size:clamp(1rem,3.1vw,2.7rem);
  font-weight:800;margin-top:2px}
.hero--cut .phero-role{color:rgba(231,205,134,.92);margin-top:clamp(10px,2.2vw,20px);
  font-family:var(--f-display);font-weight:600;font-size:clamp(.72rem,1.9vw,1.05rem)}
.hero--cut .hero-sub{color:rgba(246,243,236,.82);max-width:none;margin-inline:0;margin-top:clamp(9px,1.8vw,16px);
  font-size:clamp(.78rem,1.9vw,1rem);line-height:1.8}
.hero--cut .hero-cta{display:flex;gap:clamp(8px,1.4vw,14px);flex-wrap:wrap;justify-content:flex-start;margin-top:clamp(16px,3vw,30px)}
.hero--cut .hero-cta .btn{padding:clamp(9px,1.5vw,14px) clamp(14px,2.4vw,26px);font-size:clamp(.78rem,1.7vw,1rem)}
.hero--cut .btn--primary,[data-theme="light"] .hero--cut .btn--primary{
  background:linear-gradient(100deg,#E7CD86,#C9A24B);color:#1a1304}
.hero--cut .btn--ghost,[data-theme="light"] .hero--cut .btn--ghost{
  color:#f6f3ec;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.04)}
.hero--cut .btn--ghost:hover{border-color:#E7CD86;color:#fff}
.hero--cut .cut-copy>*{opacity:0;transform:translateY(18px);
  animation:cutFade .8s cubic-bezier(.2,.7,.2,1) forwards}
.hero--cut .cut-copy>*:nth-child(1){animation-delay:.4s}
.hero--cut .cut-copy>*:nth-child(2){animation-delay:.54s}
.hero--cut .cut-copy>*:nth-child(3){animation-delay:.66s}
.hero--cut .cut-copy>*:nth-child(4){animation-delay:.8s}
@keyframes cutRise{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cutFade{to{opacity:1;transform:translateY(0)}}
/* MOBILE: professional single-banner hero — the cut-out fills the whole slide (large, centered, bottom-anchored),
   the name & copy sit above it over the clean themed background. One banner, image on the full slide. */
@media(max-width:820px){
  /* MOBILE: natural flow — smaller portrait on top (its bottom edge dissolves into the background),
     then the NAME + role + BUTTONS grouped right below it; the page copy follows immediately after. */
  .hero--cut{display:flex;flex-direction:column;align-items:stretch;min-height:auto;padding:0;position:relative;
    padding-top:calc(var(--header-h) + 10px);padding-bottom:20px}
  .hero--cut .cut-photo{position:static;order:1;width:100%;height:auto;margin:0;padding:0;
    display:flex;align-items:flex-end;justify-content:center}
  .hero--cut .cut-photo img{width:auto;height:auto;max-height:46vh;max-width:78%;object-fit:contain;object-position:bottom center;
    filter:none;-webkit-mask-image:none;mask-image:none}   /* no fade — clean natural cut-out edge */
  html[data-theme="light"] .hero--cut .cut-photo img{filter:none;-webkit-mask-image:none;mask-image:none}
  .hero--cut .cut-photo::before,.hero--cut .cut-photo::after{content:none}   /* no glow/scrim on mobile */
  .hero--cut .container{order:2;position:relative;z-index:3;padding-top:16px;padding-bottom:0}
  .hero--cut .cut-copy{width:100%;max-width:none;margin:0;text-align:center}
  .hero--cut .cut-name{font-size:clamp(2rem,8.8vw,3rem)}
  .hero--cut .cut-welcome{font-size:clamp(1.3rem,6vw,2rem)}
  .hero--cut .phero-role{margin-top:10px;font-size:clamp(.82rem,3.3vw,1rem)}
  .hero--cut .hero-sub{display:none}   /* streamlined mobile hero; full intro is in the page body below */
  .hero--cut .hero-cta{justify-content:center;flex-direction:row;flex-wrap:nowrap;gap:9px;margin-top:18px}
  .hero--cut .hero-cta .btn{flex:0 1 auto;padding:12px 16px;font-size:clamp(.78rem,3.3vw,.95rem);white-space:nowrap}
  /* keep the copy that follows the hero close (continuous with the buttons) */
  .hero--cut + .section,.hero--cut + .section--tight{padding-top:22px}
}
@media(prefers-reduced-motion:reduce){
  .hero--cut .cut-photo,.hero--cut .cut-copy>*{animation:none;opacity:1;transform:none}
  .hero--cut .cut-photo img{transform:scaleX(-1)}
}
/* LIGHT theme: WHITE banner + dark readable text */
[data-theme="light"] .hero--cut{background:#ffffff}
.hero--cut::after{display:none}   /* no section bottom band */
[data-theme="light"] .hero--cut::before{display:none}   /* remove the moving ambient light (visual noise on white) */
[data-theme="light"] .hero--cut .cut-name{color:#997327;text-shadow:none}
[data-theme="light"] .hero--cut .cut-welcome{color:#7d5f1f}
[data-theme="light"] .hero--cut .phero-role{color:#6f6a5c}
[data-theme="light"] .hero--cut .hero-sub{color:#2f2f2f}
/* light theme: soft studio-backdrop glow behind the subject (clearly visible, feathered, no hard edge) */
/* light theme: soft GREY silhouette glow (behind head/neck/shoulders) — no clipping since the img has no mask here;
   the bottom is faded by a separate white overlay so the glow never gets cut into a box */
[data-theme="light"] .hero--cut .cut-photo::before{display:none}
[data-theme="light"] .hero--cut .cut-photo img{
  -webkit-mask-image:none;mask-image:none;
  filter:drop-shadow(0 0 40px rgba(110,110,110,.62)) drop-shadow(0 0 16px rgba(110,110,110,.4))}
[data-theme="light"] .hero--cut .cut-photo::after{display:none}   /* no bottom fade under the image */

/* ---- auto-slider: alternate mirror layout every few seconds ---- */
.hero--cut.flip .cut-photo{right:auto;left:0}
.hero--cut.flip .cut-photo img{transform:scaleX(1)}   /* face turns to the text on the right */
.hero--cut.flip .cut-copy{margin-right:0;margin-left:auto}

/* ---- moving ambient light behind the hero ---- */
.hero--cut::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 48% at 26% 36%, rgba(201,162,75,.20), transparent 62%),
    radial-gradient(42% 52% at 78% 66%, rgba(201,162,75,.11), transparent 60%);
  animation:cutGlow 11s ease-in-out infinite alternate}
[data-theme="light"] .hero--cut::before{opacity:.14}
@keyframes cutGlow{0%{transform:translate(-2%,-1%) scale(1)}100%{transform:translate(3%,2.5%) scale(1.14)}}
@media(prefers-reduced-motion:reduce){.hero--cut::before{animation:none}}
[data-theme="light"] .hero--cut .btn--ghost{
  color:#1a1a1a;border-color:rgba(0,0,0,.28);background:transparent}
[data-theme="light"] .hero--cut .btn--ghost:hover{border-color:#C9A24B;color:#111}

/* ---- Home hero fine-tuning ---- */
/* framing: subject raised with crossed arms + hands in view. The wider the container, the more
   vertical crop cover() takes, so Y steps DOWN as width grows to keep the head clear of the top.
   ≤1750px: little crop → 86% shows the hands fully. 1751-1949px: 78%. ≥1950px the proportional
   min-height (bottom of file) locks the container at ~2.5:1, so 74% is constant for TVs/4K. */
.hero--home .hero-photo img{object-position:left 86%}
.hero--home .container{max-width:1460px}                    /* push the copy further to the right edge */
.hero--home .hero-copy{max-width:600px}
.hero--home h1{text-wrap:normal}                            /* honour the manual <br> */
/* platform chips on a single tidy line */
.hero--banner .hero-platforms{max-width:none}
.hero--banner .hero-platforms .lbl{margin-bottom:11px}
.hero--banner .plat-row{flex-wrap:wrap;gap:7px;overflow:visible}
.hero--banner .chip{flex:0 0 auto;padding:6px 11px;font-size:.76rem;border-radius:9px;gap:5px}
@media(max-width:760px){
  .hero--banner .plat-row{flex-wrap:wrap;justify-content:center}
  .hero--banner .chip{font-size:.72rem;padding:7px 12px}
}

/* ---- Hero nameplate (animated) ---- */
.hero-nameplate{position:absolute;bottom:52px;left:46px;z-index:3;display:flex;align-items:center;gap:14px;
  padding:13px 20px;border-radius:14px;
  background:rgba(13,13,15,.42);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border:1px solid rgba(231,205,134,.28);box-shadow:0 14px 44px -14px rgba(0,0,0,.65);
  opacity:0;transform:translateY(16px);animation:hnpIn .8s .45s cubic-bezier(.2,.7,.2,1) forwards}
.hnp-bar{width:3px;height:42px;border-radius:2px;flex:none;
  background:linear-gradient(180deg,#E7CD86,#C9A24B);animation:hnpGlow 2.6s ease-in-out infinite}
.hnp-txt{display:flex;flex-direction:column;line-height:1.4;text-align:right}
.hnp-txt b{color:#fff;font-size:1.06rem;font-weight:800;letter-spacing:.2px}
.hnp-txt i{color:#E7CD86;font-style:normal;font-size:.82rem;font-family:var(--f-display);font-weight:600}
@keyframes hnpIn{to{opacity:1;transform:translateY(0)}}
@keyframes hnpGlow{0%,100%{box-shadow:0 0 8px rgba(201,162,75,.4)}50%{box-shadow:0 0 20px rgba(201,162,75,.9)}}
@media(max-width:900px){.hero-nameplate{bottom:40px;left:28px;padding:11px 16px}}
@media(max-width:760px){.hero-nameplate{display:none}}
@media(prefers-reduced-motion:reduce){
  .hero-nameplate{animation:none;opacity:1;transform:none}
  .hnp-bar{animation:none}
}
.about-grid--solo{grid-template-columns:1fr;max-width:820px;margin-inline:auto}
.hero--banner h1{white-space:normal;text-wrap:balance}
.hero--banner .hero-sub{max-width:520px;margin-inline-start:auto}
.hero--banner .hero-platforms .lbl{text-align:right}

/* banner sits on a dark photo in BOTH themes → force light, readable text/controls */
.hero--banner .hero-copy,
[data-theme="light"] .hero--banner .hero-copy{color:#f6f3ec}
.hero--banner h1,
[data-theme="light"] .hero--banner h1{color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.55)}
.hero--banner h1 .grad-text{color:#F0DCA0;text-shadow:0 2px 22px rgba(0,0,0,.55)}
.hero--banner .hero-sub{text-shadow:0 1px 14px rgba(0,0,0,.45)}
.hero--banner .hero-sub,
[data-theme="light"] .hero--banner .hero-sub{color:rgba(246,243,236,.84)}
.hero--banner .hero-platforms .lbl,
[data-theme="light"] .hero--banner .hero-platforms .lbl{color:rgba(246,243,236,.72)}
.hero--banner .chip,
[data-theme="light"] .hero--banner .chip{
  background:rgba(255,255,255,.07);color:#f6f3ec;border-color:rgba(255,255,255,.18)}
.hero--banner .chip:hover,
[data-theme="light"] .hero--banner .chip:hover{border-color:rgba(231,205,134,.55)}
.hero--banner .btn--ghost,
[data-theme="light"] .hero--banner .btn--ghost{
  color:#f6f3ec;border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.04)}

@media(max-width:900px){
  .hero--banner .hero-copy{max-width:500px}
}
@media(max-width:760px){
  /* mobile: one banner — full-bleed portrait with the copy overlaid at the bottom (same as desktop).
     Face sits high & clear at the top; a strong scrim darkens the lower half where the copy lives. */
  .hero--banner{min-height:94vh;display:flex;align-items:flex-end;padding:0;background:#0d0d0f}
  .hero--banner .hero-photo{position:absolute;inset:0;display:block;height:100%}
  .hero--banner .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
  .hero--banner .hero-scrim{position:absolute;inset:0;top:0;bottom:0;height:100%;min-height:0;
    background:linear-gradient(to top, rgba(6,6,8,.97) 0%, rgba(6,6,8,.94) 34%, rgba(6,6,8,.66) 52%, rgba(6,6,8,.22) 70%, transparent 88%)}
  .hero--banner .container{position:relative;z-index:2;padding-top:0;padding-bottom:92px;margin-top:0}
  .hero--banner .hero-copy{max-width:none;margin:0;text-align:right}
  .hero--banner h1{margin-top:0;font-size:clamp(1.7rem,7.4vw,2.3rem)}
  .hero--banner .hero-sub{margin-inline:0;font-size:.92rem;margin-top:12px}
  .hero--banner .hero-cta{justify-content:flex-start;gap:10px;margin-top:22px}
  .hero--banner .hero-cta .btn{flex:1 1 auto}
  /* declutter: platform chips are shown on desktop; hidden on the mobile hero so the headline clears the face */
  .hero--banner .hero-platforms{display:none}
}


/* ---------- Skip link (accessibility) ---------- */
.skip-link{position:absolute;top:-60px;right:16px;z-index:2000;background:var(--gold);color:#0B0F1A;
  padding:10px 18px;border-radius:10px;font-weight:800;transition:top .2s}
.skip-link:focus{top:12px;outline:2px solid var(--gold-2)}

/* ============================================================
   إضافات تحويلية — 2026-07-07 (شهادات، رسالة، مناسب/غير مناسب، مرساة سعر، فيديو)
   ============================================================ */

/* ===== Testimonials wall ===== */
.tstm-wall{display:flex;flex-direction:column;gap:18px}
.tstm-row{overflow:hidden;position:relative;direction:ltr;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.tstm-track{display:flex;flex-wrap:nowrap;gap:16px;width:max-content;will-change:transform;
  animation:bmscroll 60s linear infinite}
.tstm-row--rev .tstm-track{animation-direction:reverse;animation-duration:72s}
.tstm-row:hover .tstm-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.tstm-track{animation:none}}
.tstm{flex:0 0 auto;width:320px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-md);padding:18px 20px;direction:rtl;text-align:right;
  display:flex;flex-direction:column;gap:10px}
.tstm-txt{color:var(--text);font-size:.95rem;line-height:1.8}
.tstm-txt::before{content:"“";color:var(--gold);font-size:1.6rem;line-height:0;margin-inline-end:4px}
.tstm-who{display:flex;align-items:center;gap:10px;margin-top:auto}
.tstm-av{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--gold-2),var(--gold-deep));color:#0B0F1A;font-weight:800;font-size:.9rem}
/* light theme flips gold vars to near-black -> dark letter on dark disc. Explicit readable override */
[data-theme="light"] .tstm-av{background:rgba(20,20,20,.08);color:#121212}
.tstm-who b{display:block;font-size:.88rem;color:var(--text)}
.tstm-who i{font-style:normal;font-size:.76rem;color:var(--muted)}
.tstm-src{margin-inline-start:auto;color:var(--ok);opacity:.9}
.tstm-src svg{width:18px;height:18px}
@media(max-width:540px){.tstm{width:270px;padding:15px 16px}}

/* ===== Letter from Abobakr ===== */
.letter{max-width:760px;margin:0 auto;background:linear-gradient(150deg,rgba(201,162,75,.07),var(--panel));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,5vw,48px);position:relative;overflow:hidden}
.letter::before{content:"”";position:absolute;top:-30px;left:14px;font-size:9rem;font-weight:800;
  color:var(--gold);opacity:.12;line-height:1;pointer-events:none}
.letter .lt-lbl{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;color:var(--gold-2);
  letter-spacing:.14em;margin-bottom:16px}
.letter p{color:var(--text);font-size:1.02rem;line-height:2;margin-bottom:14px}
.letter p strong{color:var(--gold-2)}
.lt-sign{display:flex;align-items:center;gap:14px;margin-top:22px;padding-top:18px;border-top:1px dashed var(--line)}
.lt-sign img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.lt-sign b{display:block;font-size:1rem}
.lt-sign a{font-size:.82rem;color:var(--muted);transition:color .2s}
.lt-sign a:hover{color:var(--gold-2)}

/* ===== Fit / Not-fit columns ===== */
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
@media(max-width:820px){.fit-grid{grid-template-columns:1fr}}
.fit-card{border-radius:var(--r-md);padding:24px 26px;border:1px solid var(--line);background:var(--panel)}
.fit-card--ok{border-color:rgba(91,209,127,.28);background:linear-gradient(160deg,rgba(91,209,127,.06),var(--panel))}
.fit-card--no{border-color:rgba(255,107,107,.22);background:linear-gradient(160deg,rgba(255,107,107,.05),var(--panel))}
.fit-card h3{font-size:1.05rem;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.fit-card--ok h3{color:var(--ok)}
.fit-card--no h3{color:var(--danger)}
.fit-card li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;color:var(--muted);font-size:.95rem;line-height:1.75}
.fit-card li svg{width:18px;height:18px;flex:none;margin-top:5px}
.fit-card--ok li svg{color:var(--ok)}
.fit-card--no li svg{color:var(--danger)}
[data-theme="light"] .fit-card--ok{background:linear-gradient(160deg,rgba(40,140,80,.06),#fff)}
[data-theme="light"] .fit-card--no{background:linear-gradient(160deg,rgba(180,40,40,.05),#fff)}

/* ===== Price anchor badge ===== */
.price-anchor{display:inline-flex;align-items:center;gap:10px;background:var(--cyan-dim);
  border:1px solid rgba(79,227,204,.3);color:var(--text);border-radius:var(--r-pill);
  padding:7px 16px;font-size:.85rem;font-weight:700;margin-bottom:14px}
.price-anchor s{color:var(--muted);font-weight:600}
.price-anchor b{color:var(--cyan)}
[data-theme="light"] .price-anchor{border-color:rgba(30,30,30,.2)}
[data-theme="light"] .price-anchor b{color:#0A7B5C}

/* ===== Hero intro video ===== */
.hero-video-btn{display:inline-flex;align-items:center;gap:12px;margin-top:18px;
  background:rgba(13,13,15,.45);border:1px solid rgba(231,205,134,.35);color:var(--text);
  border-radius:var(--r-pill);padding:10px 20px 10px 12px;font-size:.9rem;font-weight:700;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .25s var(--ease),border-color .25s}
.hero-video-btn:hover{transform:translateY(-2px);border-color:var(--gold-2)}
.hvb-play{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--gold-2),var(--gold));color:#0B0F1A;
  box-shadow:0 0 0 0 rgba(201,162,75,.5);animation:hvbPulse 2.4s infinite}
.hvb-play svg{width:16px;height:16px;margin-inline-start:2px}
@keyframes hvbPulse{0%{box-shadow:0 0 0 0 rgba(201,162,75,.45)}70%{box-shadow:0 0 0 14px rgba(201,162,75,0)}100%{box-shadow:0 0 0 0 rgba(201,162,75,0)}}
@media(prefers-reduced-motion:reduce){.hvb-play{animation:none}}
.vmodal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
  background:rgba(5,7,12,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:20px}
.vmodal.open{display:flex}
.vmodal-box{width:min(880px,100%);aspect-ratio:16/9;background:#000;border-radius:var(--r-md);
  overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-2);position:relative}
.vmodal-box video,.vmodal-box iframe{width:100%;height:100%;display:block;border:0}
.vmodal-close{position:absolute;top:-46px;left:0;background:none;border:0;color:#fff;font-size:1rem;
  display:flex;align-items:center;gap:8px;opacity:.85}
.vmodal-close:hover{opacity:1}
.vmodal-wrap{position:relative;width:min(880px,100%)}
.fit-card h3 svg{width:22px;height:22px;flex:none}

/* ===== إصلاحات وتحسينات البانر (النسختين) — 2026-07-07 ===== */
/* زر الفيديو: احترام الإخفاء + نص فاتح دائمًا (الهيرو صورة داكنة في الثيمين) */
.hero-video-btn[hidden]{display:none!important}
.hero-video-btn{color:#F5F2EA}

/* الشعار: نسخة داكنة تظهر فقط عند التمرير في الثيم الفاتح (وضوح فوق الهيدر الأبيض) */
.brand img.brand-logo--dark{display:none}
[data-theme="light"] .header.scrolled .brand img.brand-logo--gold{display:none}
[data-theme="light"] .header.scrolled .brand img.brand-logo--dark{display:block}

/* الثيم الفاتح: هيدر متمرّر أبيض → روابط داكنة واضحة */
[data-theme="light"] .header.scrolled .nav a{color:#2b2b28}
[data-theme="light"] .header.scrolled .nav a:hover{color:#000;background:rgba(20,20,20,.06)}
[data-theme="light"] .header.scrolled .nav a.active{color:#000;background:rgba(20,20,20,.08)}
[data-theme="light"] .header.scrolled .theme-toggle,
[data-theme="light"] .header.scrolled .menu-btn{color:#2b2b28;border-color:rgba(20,20,20,.25)}

/* الثيم الفاتح: تحسين وضوح نص الهيرو فوق الصورة (تعميق خفيف للتظليل خلف النص) */
[data-theme="light"] .hero--banner .hero-scrim{
  background:
    linear-gradient(to left, rgba(13,13,15,.96) 0%, rgba(13,13,15,.9) 24%, rgba(13,13,15,.55) 46%, rgba(13,13,15,.12) 64%, transparent 76%),
    linear-gradient(to top, rgba(13,13,15,.6), transparent 46%)}

/* الهيرو: النص الثانوي فاتح ثابت في الثيمين (فوق الصورة الداكنة) */
.hero--banner .hero-sub{color:rgba(246,243,236,.88)}
.hero--banner .hero-platforms .lbl{color:rgba(246,243,236,.75)}
/* رقائق المنصات فوق الصورة: زجاجية داكنة متناسقة في الثيمين */
.hero--banner .chip,[data-theme="light"] .hero--banner .chip{
  background:rgba(13,13,15,.5);border:1px solid rgba(246,243,236,.22);color:#F5F2EA;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* زر «شاهد أعمالي» فوق الصورة: حدود أوضح في الثيمين */
.hero--banner .btn--ghost,[data-theme="light"] .hero--banner .btn--ghost{
  color:#F5F2EA;border-color:rgba(246,243,236,.38);background:rgba(255,255,255,.05)}
.hero--banner .btn--ghost:hover{border-color:#E7CD86;color:#fff}
/* زر «احجز استشارة» فوق الصورة: ذهبي في الثيمين (بدل الأسود في الفاتح) */
.hero--banner .btn--primary,[data-theme="light"] .hero--banner .btn--primary{
  background:linear-gradient(100deg,#E7CD86,#C9A24B);color:#1a1304}
/* «أرقام» بالذهبي في الثيمين فوق الصورة */
[data-theme="light"] .hero--banner .grad-text{color:#E7CD86}

/* ============================================================
   البانر — الحل النهائي (خبرة: الهيدر فوق الصورة = هوية ذهبية/فاتحة دائمًا،
   وعند التمرير = هوية الثيم. + تظليل علوي يضمن الوضوح + حافة سفلية نظيفة)
   ============================================================ */

/* تظليل علوي خفيف خلف الهيدر فوق الصورة (الثيمان) — وضوح مضمون للشعار والروابط */
.hero--banner .hero-scrim{
  background:
    linear-gradient(to bottom, rgba(13,13,15,.62), rgba(13,13,15,.18) 12%, transparent 20%),
    linear-gradient(to left, rgba(13,13,15,.95) 0%, rgba(13,13,15,.88) 22%, rgba(13,13,15,.5) 44%, rgba(13,13,15,.1) 62%, transparent 74%),
    linear-gradient(to top, rgba(13,13,15,.55), transparent 44%)}
[data-theme="light"] .hero--banner .hero-scrim{
  background:
    linear-gradient(to bottom, rgba(13,13,15,.62), rgba(13,13,15,.18) 12%, transparent 20%),
    linear-gradient(to left, rgba(13,13,15,.96) 0%, rgba(13,13,15,.9) 24%, rgba(13,13,15,.55) 46%, rgba(13,13,15,.12) 64%, transparent 76%),
    linear-gradient(to top, rgba(13,13,15,.6), transparent 46%)}

/* فوق الصورة (غير متمرّر): هوية ذهبية/فاتحة في الثيمين — تضمنها قواعد has-dark-hero الأصلية.
   نتأكد فقط أن الشعار الذهبي هو الظاهر والداكن مخفي */
body.has-dark-hero .header:not(.scrolled) .brand img.brand-logo--gold{display:block}
body.has-dark-hero .header:not(.scrolled) .brand img.brand-logo--dark{display:none}

/* التلاشي أسفل الأقسام الداكنة:
   الداكن → تلاشٍ تونالي قصير. الفاتح → حافة معمارية نظيفة بخيط ذهبي */
.hero--banner::after,.feature-band::after,.hero--cut::after{height:80px}
[data-theme="light"] .hero--banner::after,
[data-theme="light"] .feature-band::after,
[data-theme="light"] .hero--cut::after{display:none}
[data-theme="light"] .hero--banner,
[data-theme="light"] .feature-band,
[data-theme="light"] .hero--cut{border-bottom:2px solid rgba(160,126,46,.45)}
.tstm-stars{margin-inline-start:auto;color:var(--gold);font-size:.78rem;letter-spacing:1px;white-space:nowrap}
[data-theme="light"] .tstm-stars{color:#A07E2E}
.tstm-verify{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:9px 18px;
  border:1px solid var(--line);border-radius:var(--r-pill);font-size:.84rem;font-weight:700;
  color:var(--gold-2);background:rgba(201,162,75,.07);transition:border-color .2s,background .2s}
.tstm-verify:hover{border-color:var(--gold);background:rgba(201,162,75,.14)}
.tstm-verify svg{width:17px;height:17px}
[data-theme="light"] .tstm-verify{color:#7d5f1f;border-color:rgba(160,126,46,.4);background:rgba(160,126,46,.07)}
/* توسيط حقيقي لوصف الأقسام الموسّطة (كان يلتصق يمينًا بسبب max-width بلا margin auto) */
.sec-head.center .sec-sub{margin-inline:auto}

/* ============================================================
   أيقونات السوشال ميديا بألوان هوياتها الرسمية (الثيمان)
   ============================================================ */
/* فوتر: أيقونات ملونة دائمًا */
.foot-brand-soc .s-tiktok{color:#fff;background:#010101;border-color:#2e2e2e;
  box-shadow:1.5px 1.5px 0 rgba(254,44,85,.55),-1.5px -1.5px 0 rgba(37,244,238,.55)}
.foot-brand-soc .s-youtube{color:#FF0000;background:rgba(255,0,0,.1);border-color:rgba(255,0,0,.35)}
.foot-brand-soc .s-instagram{color:#fff;border-color:transparent;
  background:radial-gradient(circle at 30% 110%,#FDF497 0%,#FD5949 45%,#D6249F 60%,#285AEB 90%)}
.foot-brand-soc .s-x{color:#fff;background:#000;border-color:#3a3a3a}
.foot-brand-soc .s-snapchat{color:#1a1a1a;background:#FFFC00;border-color:#e6e300}
.foot-brand-soc .s-whatsapp{color:#fff;background:#25D366;border-color:#1FAE54}
.foot-brand-soc a:hover{filter:brightness(1.12)}
[data-theme="light"] .foot-brand-soc .s-youtube{background:rgba(255,0,0,.08)}

/* بطاقات المنصات (الرئيسية وصفحة المحتوى): مربع الأيقونة بلون المنصة */
.soc.s-tiktok .s-ico,.soc.reveal.s-tiktok .s-ico{color:#fff;background:#010101;
  box-shadow:2px 2px 0 rgba(254,44,85,.5),-2px -2px 0 rgba(37,244,238,.5)}
.soc.s-youtube .s-ico{color:#FF0000;background:rgba(255,0,0,.12)}
.soc.s-instagram .s-ico{color:#fff;
  background:radial-gradient(circle at 30% 110%,#FDF497 0%,#FD5949 45%,#D6249F 60%,#285AEB 90%)}
.soc.s-x .s-ico{color:#fff;background:#000;border:1px solid #3a3a3a}
.soc.s-tiktok:hover{border-color:#69C9D0}
.soc.s-youtube:hover{border-color:rgba(255,0,0,.55)}
.soc.s-instagram:hover{border-color:#E1306C}
.soc.s-x:hover{border-color:#777}
[data-theme="light"] .soc.s-youtube .s-ico{background:rgba(255,0,0,.09)}

/* طرق التواصل (صفحة تواصل): واتساب أخضر وإنستغرام متدرج */
.cmethod.c-whatsapp .cm-ico{color:#fff;background:#25D366}
.cmethod.c-instagram .cm-ico{color:#fff;
  background:radial-gradient(circle at 30% 110%,#FDF497 0%,#FD5949 45%,#D6249F 60%,#285AEB 90%)}

/* ============================================================
   فوتر الجوال - إعادة بناء احترافية (2026-07-07)
   ============================================================ */
@media(max-width:760px){
  /* مساحة سفلية تضمن عدم تغطية الحقوق بشريط الأزرار وزر واتساب العائم */
  .footer{padding-top:44px;padding-bottom:calc(150px + env(safe-area-inset-bottom))}

  /* الروابط: شبكة بطاقات مرتبة بدل القوائم المنقّطة */
  .footer-grid{grid-template-columns:1fr;gap:30px;padding-bottom:8px}
  .footer-grid > .foot-brand{grid-column:auto}
  .footer-grid h4{text-align:center;margin-bottom:14px}
  .footer-grid h4::after{inset-inline-start:50%;transform:translateX(50%);width:28px}
  .footer-grid .flinks{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .footer-grid .flinks li+li{margin-top:0}
  .footer-grid .flinks a{display:flex;align-items:center;justify-content:center;text-align:center;
    min-height:44px;padding:10px 8px;border:1px solid var(--line-soft);border-radius:12px;
    background:var(--panel);font-size:.9rem;width:100%}
  .footer-grid .flinks a::before{display:none}
  .footer-grid .flinks a:active{border-color:var(--gold);color:var(--gold-2)}
  /* عنصر أخير فردي يمتد على العرض كامل */
  .footer-grid .flinks li:last-child:nth-child(odd) a{grid-column:1/-1}
  .footer-grid .flinks li:last-child:nth-child(odd){grid-column:1/-1}

  /* تواصل معنا: صفوف بطاقات متلاصقة، الأيقونة بجانب النص مباشرة */
  .ct-row,.foot-contact-row{display:flex;align-items:center;justify-content:flex-start;gap:14px;
    padding:13px 16px;border:1px solid var(--line-soft);border-radius:14px;background:var(--panel);
    border-bottom:1px solid var(--line-soft);text-align:right;margin-bottom:10px}
  .ct-row .ct-tx,.foot-contact-row > span:last-child{flex:1;text-align:right}
  .ct-row b,.foot-contact-row b{font-size:.95rem}
  .ct-row i,.foot-contact-row i{text-align:end}

  /* سطر الحقوق والروابط القانونية: مكدّس وواضح */
  .footer-bottom{flex-direction:column;gap:14px;text-align:center;padding-top:22px}
  .footer-bottom span{font-size:.86rem}
  .legal-links{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
  .legal-links a{padding:8px 14px;border:1px solid var(--line-soft);border-radius:999px;
    font-size:.84rem;background:var(--panel)}
}

/* ============================================================
   جوال: رفع صورة الهيرو + تظليل أقوى خلف النص + فوتر أكثر إحكامًا
   ============================================================ */
@media(max-width:760px){
  /* الوجه في الثلث الأعلى بعيدًا عن النص */
  .hero--home .hero-photo img{object-position:center 10%}
  .hero--banner .hero-scrim{
    background:
      linear-gradient(to top, rgba(13,13,15,.94) 0%, rgba(13,13,15,.72) 30%, rgba(13,13,15,.28) 52%, transparent 68%),
      linear-gradient(to bottom, rgba(13,13,15,.55), transparent 22%)}

  /* فوتر مضغوط ومتوازن */
  .footer{padding-top:38px}
  .footer-grid{gap:24px}
  .foot-brand p{font-size:.9rem;line-height:1.9;max-width:330px}
  .foot-brand .foot-logo{height:54px;margin-bottom:14px}
  .foot-brand-soc{margin-top:18px;gap:11px}
  .foot-brand-soc a{width:44px;height:44px;border-radius:12px}
  .footer-grid h4{font-size:.95rem;margin-bottom:12px;padding-bottom:10px}
  .footer-grid .flinks{gap:8px}
  .footer-grid .flinks a{min-height:42px;padding:9px 6px;border-radius:10px;font-size:.86rem}
  .ct-row,.foot-contact-row{padding:11px 14px;border-radius:12px;margin-bottom:8px;gap:12px}
  .ct-row .ct-ic{width:36px;height:36px}
  .ct-row b{font-size:.9rem}
  .ct-row i{font-size:.78rem}
  .footer-bottom{padding-top:18px;gap:11px}
  .legal-links a{padding:7px 12px;font-size:.8rem}
}

/* ============================================================
   جوال: هيرو من طبقتين - الصورة فوق كاملة والنص تحتها بلا تغطية
   ============================================================ */
@media(max-width:760px){
  .hero--banner{display:block;min-height:auto;padding:0;background:#0d0d0f}
  .hero--banner .hero-photo{position:relative;inset:auto;display:block;height:56vh;min-height:340px;max-height:520px}
  .hero--banner .hero-photo img{object-position:center 12%}
  /* التدرج: يذوّب أسفل الصورة في الخلفية الداكنة فقط */
  .hero--banner .hero-scrim{
    background:
      linear-gradient(to top, #0d0d0f 4%, rgba(13,13,15,.72) 22%, rgba(13,13,15,.18) 40%, transparent 55%),
      linear-gradient(to bottom, rgba(13,13,15,.45), transparent 16%)}
  /* النص يركب على نهاية التدرج وينزل تحت الصورة */
  .hero--banner .container{margin-top:-58px;padding-bottom:30px}
  .hero--banner .hero-copy{max-width:none;margin:0;text-align:center}
  .hero--home .hero-copy{max-width:none}
  .hero--banner .hero-cta{justify-content:center}
  .hero--banner .hero-platforms .lbl{text-align:center}
  .hero-nameplate{display:none}
}

/* ============================================================
   جوال v2: هيرو بهرمية خطوط نظيفة (النص تحت الصورة بالكامل)
   + فوتر بأزرار كبسولية متوازنة
   ============================================================ */
.hero-role-m{display:none}
@media(max-width:760px){
  /* الصورة: كتلة أقصر تترك مساحة للنص فوق الطية */
  .hero--banner .hero-photo{height:46vh;min-height:300px;max-height:430px}
  .hero--banner .hero-scrim{
    background:
      linear-gradient(to top, #0d0d0f 0%, rgba(13,13,15,.6) 12%, transparent 30%),
      linear-gradient(to bottom, rgba(13,13,15,.45), transparent 16%)}
  /* النص تحت الصورة بالكامل - لا تداخل مع الوجه أو الجاكيت */
  .hero--banner .container{margin-top:0;padding-top:4px;padding-bottom:26px}
  .hero-role-m{display:block;color:var(--gold-2);font-size:.78rem;font-weight:700;
    letter-spacing:.08em;text-align:center;margin-bottom:10px}
  .hero--banner h1{font-size:clamp(1.65rem,7.4vw,2.1rem);line-height:1.45;letter-spacing:0}
  .hero--banner .hero-sub{font-size:.94rem;line-height:1.95;max-width:32ch;
    margin-inline:auto;margin-top:12px;color:rgba(246,243,236,.78)}
  .hero--banner .hero-cta{margin-top:20px;gap:10px;flex-direction:column}
  .hero--banner .hero-cta .btn{width:100%;justify-content:center;padding:13px 20px;font-size:.97rem}
  .hero--banner .hero-platforms{margin-top:22px}
  .hero--banner .hero-platforms .lbl{font-size:.78rem}

  /* الفوتر: روابط كبسولية تلتف بشكل طبيعي بدل بطاقات فارغة */
  .footer-grid{gap:22px}
  .footer-grid h4{margin-bottom:12px}
  .footer-grid .flinks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:340px;margin-inline:auto}
  .footer-grid .flinks li{display:contents;margin:0}
  .footer-grid .flinks li:last-child:nth-child(odd){grid-column:auto}
  .footer-grid .flinks li:last-child:nth-child(odd) a{grid-column:auto}
  .footer-grid .flinks a{width:auto;min-height:0;padding:9px 16px;border-radius:999px;
    font-size:.85rem;border:1px solid var(--line-soft);background:var(--panel)}
  .ct-row,.foot-contact-row{max-width:340px;margin-inline:auto;margin-bottom:8px}
}

/* ============================================================
   جوال v3: النص فوق الصورة نفسها - الوجه أعلى واضح والنص أسفل فوق تدرج قوي
   ============================================================ */
@media(max-width:760px){
  .hero--banner{display:flex;align-items:flex-end;min-height:92vh;padding:0}
  .hero--banner .hero-photo{position:absolute;inset:0;height:auto;min-height:0;max-height:none}
  .hero--banner .hero-photo img{object-position:center 6%}
  .hero--banner .hero-scrim{
    background:
      linear-gradient(to top,
        rgba(13,13,15,.97) 0%,
        rgba(13,13,15,.9) 20%,
        rgba(13,13,15,.62) 36%,
        rgba(13,13,15,.18) 52%,
        transparent 66%),
      linear-gradient(to bottom, rgba(13,13,15,.5), transparent 15%)}
  .hero--banner .container{margin-top:0;padding-top:0;padding-bottom:26px;position:relative;z-index:2}
}

/* جوال v4: محاذاة يمين + سطر الدور تحت العنوان + رفع الصورة */
@media(max-width:760px){
  .hero--banner .hero-photo img{object-position:center 0%}
  .hero--banner .hero-copy,
  .hero--banner .hero-copy h1,
  .hero--banner .hero-sub{text-align:right}
  .hero--banner .hero-sub{margin-inline:0;max-width:none}
  .hero-role-m{text-align:right;margin:10px 0 0;font-size:.8rem;color:var(--gold-2);opacity:.95}
  .hero--banner .hero-platforms .lbl{text-align:right}
  .hero--banner .plat-row{justify-content:flex-start}
}

/* ============================================================
   فوتر v3: أعمدة متوازية + خط ذهبي متحرك بطول العنوان
   ============================================================ */
/* الخط المتحرك تحت عناوين الفوتر (الثيمان، ديسكتوب وجوال) */
.footer-grid h4{width:fit-content}
.footer-grid h4::after{
  width:100%;height:2px;border-radius:2px;
  background:linear-gradient(90deg, transparent 0%, var(--gold) 35%, var(--gold-2) 50%, var(--gold) 65%, transparent 100%);
  background-size:220% 100%;
  animation:goldSweep 2.8s linear infinite}
@keyframes goldSweep{0%{background-position:220% 0}100%{background-position:-220% 0}}
@media(prefers-reduced-motion:reduce){.footer-grid h4::after{animation:none}}

@media(max-width:760px){
  /* عمودان متوازيان: روابط سريعة | خدماتنا */
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px 12px}
  .footer-grid > .foot-brand{grid-column:1/-1}
  .footer-grid > div:last-child{grid-column:1/-1}
  .footer-grid h4{margin-inline:auto}
  /* روابط متساوية العرض داخل كل عمود = اصطفاف متوازٍ تام */
  .footer-grid .flinks{display:flex;flex-direction:column;gap:8px;max-width:none;margin:0}
  .footer-grid .flinks li{display:block}
  .footer-grid .flinks a{display:flex;width:100%;justify-content:center;align-items:center;
    min-height:42px;padding:9px 8px;border-radius:11px;font-size:.84rem}
  /* بطاقات التواصل بعرض مريح وموسّطة */
  .ct-row,.foot-contact-row{max-width:420px}
}

/* ===== بطاقة «شريك نموّ»: نقاط واضحة بدل الفقرة الطويلة ===== */
.partner .p-lead{color:var(--muted);margin-bottom:12px}
.partner .p-points{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.partner .p-points li{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;
  border:1px solid var(--line);border-radius:999px;background:rgba(201,162,75,.07);
  color:var(--text);font-size:.88rem;font-weight:600}
.partner .p-points li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.partner .p-close{color:var(--gold-2);font-weight:700;font-size:.98rem}
[data-theme="light"] .partner .p-points li{background:rgba(20,20,20,.05)}
[data-theme="light"] .partner .p-close{color:#1a1a1a}
@media(max-width:760px){
  .partner{grid-template-columns:1fr;text-align:right;padding:22px 18px}
  .partner .p-mark{margin-bottom:4px}
  .partner .p-points li{font-size:.82rem;padding:7px 12px}
}

/* بطاقة «شريك نموّ»: حذف النقاط + ترتيب عمودي موحد في الجوال */
.partner .p-points li::before{display:none}
@media(max-width:760px){
  .partner .p-points{flex-direction:column;gap:8px}
  .partner .p-points li{width:100%;justify-content:center;text-align:center;padding:11px 12px;font-size:.87rem}
  .partner .p-lead,.partner .p-close{text-align:center}
  .partner h3{text-align:center}
  .partner .p-mark{margin-inline:auto}
}

/* ============================================================
   فوتر فاخر: خيط ذهبي متوهج + علامة مائية + زر واتساب + عودة لأعلى
   ============================================================ */
.footer{overflow:hidden}
.foot-topline{position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg, transparent 0%, var(--gold) 30%, var(--gold-2) 50%, var(--gold) 70%, transparent 100%);
  background-size:200% 100%;animation:goldSweep 5s linear infinite}



.foot-wa-btn{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;
  padding:13px 18px;border-radius:14px;font-weight:800;font-size:.95rem;color:#fff;
  background:linear-gradient(120deg,#25D366,#1FAE54);box-shadow:0 10px 26px -10px rgba(31,174,84,.55);
  transition:transform .22s var(--ease),box-shadow .22s}
.foot-wa-btn:hover{transform:translateY(-3px);box-shadow:0 16px 32px -10px rgba(31,174,84,.65)}
.foot-wa-btn svg{width:19px;height:19px;flex:none}




.footer-bottom{display:flex;align-items:center;gap:16px}

/* حركة خفيفة لروابط الفوتر عند المرور (ديسكتوب) */
@media(min-width:761px){
  .footer-grid .flinks a{transition:color .2s,transform .2s}
  .footer-grid .flinks a:hover{transform:translateX(-4px)}
  .ct-row{border-radius:12px;padding-inline:8px;transition:background .2s,transform .2s}
  .ct-row:hover{background:rgba(201,162,75,.06);transform:translateX(-4px)}
}
@media(max-width:760px){
  .foot-wa-btn{max-width:420px;margin-inline:auto}
  .footer-bottom{flex-direction:column}
  
  
}

/* ============================================================
   تحديث: فوتر جوال بشبكة متوازية + أسهم تصنيفات بمستوى الرقائق وقابلة للنقر
   ============================================================ */
@media(max-width:760px){
  /* كل قسم بعرض كامل، وعناصره أزواج متوازية متساوية */
  .footer-grid{grid-template-columns:1fr}
  .footer-grid > div:last-child{grid-column:auto}
  .footer-grid .flinks{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:420px;margin-inline:auto}
  .footer-grid .flinks li{display:block;width:100%}
  .footer-grid .flinks a{display:flex;width:100%;min-height:44px;justify-content:center;align-items:center;
    padding:10px 8px;border-radius:11px;font-size:.85rem}
  /* العنصر الأخير الفردي يمتد على العرض الكامل ليبقى التوازن */
  .footer-grid .flinks li:last-child:nth-child(odd){grid-column:1/-1}

  /* سهم التصفية: بنفس مستوى منتصف الرقائق تمامًا + قابل للنقر */
  .fhint{top:23px;pointer-events:auto;cursor:pointer}
}
@keyframes fhintNudgeL2{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(-4px)}}

/* اللمسة الأخيرة: توازي تام لعناصر الفوتر + ترتيب سطر الحقوق */
@media(max-width:760px){
  /* إلغاء الهامش القديم الذي كان يكسر التوازي بين كل زر وجاره */
  .footer-grid .flinks li+li{margin-top:0}
  .footer-grid .flinks li{margin:0}
  /* الترتيب: الروابط القانونية أولًا ثم سطر الحقوق في نهاية الصفحة تمامًا */
  .footer-bottom{flex-direction:column}
  .legal-links{order:1}
  .footer-bottom > span{order:2}
  
}
@media(max-width:760px){
  .footer ul.flinks li+li,.footer .footer-grid .flinks li+li{margin-top:0}
}

/* إصلاح تمدد صفحة المحتوى في الجوال: أعمدة متجاوبة بدل الستايل المضمن */
.soc-grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){.soc-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.soc-grid--4{grid-template-columns:repeat(2,1fr)}}
.sb-list--2{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
@media(max-width:760px){.sb-list--2{grid-template-columns:1fr}}

/* ============================================================
   زر العودة لأعلى: أنيق شفاف بإطار ذهبي، في أقصى اليسار
   ============================================================ */






/* الديسكتوب: صف سفلي - الحقوق يمينًا، الروابط وسطًا، الزر أقصى اليسار */
@media(min-width:761px){
  .footer-bottom{justify-content:space-between}
  
}
/* الجوال: الروابط ثم الحقوق، والزر بأقصى يسار سطر الحقوق */
@media(max-width:760px){
  .footer-bottom{position:relative}
  
  .footer-bottom > span{order:2;padding-inline-start:52px;text-align:center;width:100%;
    display:block;padding-inline-end:0}
}

/* ============================================================
   الشريط العائم أسفل اليسار (بأسلوب المرجع، بهوية ذهبية)
   ============================================================ */
.live-pill{position:fixed;left:22px;bottom:22px;z-index:96;
  display:flex;align-items:center;gap:10px;padding:9px 8px 9px 18px;direction:rtl;
  background:linear-gradient(110deg,#E7CD86,#C9A24B);color:#1a1304;
  border-radius:999px;font-size:.86rem;font-weight:800;white-space:nowrap;
  box-shadow:0 14px 34px -10px rgba(201,162,75,.55);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s}
.live-pill.show{opacity:1;visibility:visible;transform:translateY(0)}
.live-pill:hover{transform:translateY(-3px)}
.lp-dot{width:8px;height:8px;border-radius:50%;background:#1a1304;flex:none;
  animation:lpPulse 1.6s ease-in-out infinite}
@keyframes lpPulse{0%,100%{opacity:1}50%{opacity:.35}}
.lp-sep{width:1px;height:16px;background:rgba(26,19,4,.3);flex:none}
.lp-cta{font-weight:800}
.lp-arrow{width:30px;height:30px;border-radius:50%;background:#1a1304;color:#E7CD86;
  display:grid;place-items:center;flex:none;transition:transform .25s var(--ease)}
.lp-arrow svg{width:14px;height:14px}
.live-pill:hover .lp-arrow{transform:rotate(45deg)}
[data-theme="light"] .live-pill{background:#141414;color:#fff;box-shadow:0 14px 34px -10px rgba(0,0,0,.4)}
[data-theme="light"] .lp-dot{background:#E7CD86}
[data-theme="light"] .lp-sep{background:rgba(255,255,255,.3)}
[data-theme="light"] .lp-arrow{background:#E7CD86;color:#141414}
@media(max-width:760px){.live-pill{display:none}} /* الجوال عنده شريط الأزرار الثابت */
@media(prefers-reduced-motion:reduce){.lp-dot{animation:none}}

/* الشريط العائم في الجوال: فوق شريط الأزرار الثابت */
@media(max-width:760px){
  .live-pill{display:flex;left:12px;bottom:calc(88px + env(safe-area-inset-bottom));
    padding:8px 7px 8px 14px;font-size:.78rem;gap:8px}
  .lp-sep{height:14px}
  .lp-arrow{width:26px;height:26px}
  .lp-arrow svg{width:12px;height:12px}
}
/* إلغاء العلامة المائية نهائيًا */


/* الجوال: إلغاء شريط الأزرار الثابت والاكتفاء بالشريط العائم + تصغيره */
@media(max-width:760px){
  
  .live-pill{bottom:calc(14px + env(safe-area-inset-bottom));left:10px;
    font-size:.73rem;padding:7px 6px 7px 12px;gap:7px}
  .lp-dot{width:6px;height:6px}
  .lp-sep{height:12px}
  .lp-arrow{width:24px;height:24px}
  .lp-arrow svg{width:11px;height:11px}
  /* الفوتر لم يعد يحتاج المساحة الكبيرة لشريط الأزرار */
  .footer{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}

/* حذف زر العودة لأعلى نهائيًا + محاذاة واتساب مع الشريط الذهبي + تصغير الجوال */

.wa-float{inset-block-end:22px}
@media(max-width:760px){
  .wa-float{inset-block-end:14px;width:46px;height:46px}
  .wa-float svg{width:23px;height:23px}
  .live-pill{font-size:.7rem;padding:6px 5px 6px 11px;gap:6px;bottom:calc(14px + env(safe-area-inset-bottom))}
  .lp-arrow{width:22px;height:22px}
  .footer-bottom > span{padding-inline-start:0}
  .footer{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}

/* ============================================================
   صمام أمان: لو تعطل JavaScript (اتصال ضعيف/حجب) يظهر المحتوى
   تلقائيًا بعد 3 ثوانٍ بدل بقاء الصفحة سوداء
   ============================================================ */
.js:not(.js-ready) .reveal{animation:revealFallback 0s 3s forwards}
@keyframes revealFallback{to{opacity:1;transform:none;filter:none}}

/* ============================================================
   جوال: تصغير عنوان الهيرو وزر «احجز استشارة» ليظهر جزء أكبر
   من الصورة (الوجه) مع تباين أوضح بين النص والصورة — 2026-07-07
   ============================================================ */
@media(max-width:760px){
  .hero--banner h1{
    font-size:clamp(1.55rem,6.4vw,1.9rem);
    line-height:1.4;
    letter-spacing:0;
  }
  .hero--banner .hero-sub{
    font-size:.86rem;
    line-height:1.85;
    margin-top:10px;
    max-width:34ch;
  }
  .hero--banner .hero-cta{margin-top:16px;gap:9px}
  .hero--banner .hero-cta .btn{
    padding:11px 18px;
    font-size:.88rem;
  }
  .hero--banner .hero-cta .btn svg{width:17px;height:17px}
  .hero-role-m{font-size:.74rem;margin-top:8px}
  .hero--banner .hero-platforms{margin-top:18px}
  .hero--banner .hero-platforms .lbl{font-size:.74rem}
  .hero--banner .chip{padding:6px 10px;font-size:.72rem}
}

/* ============================================================
   بنر الرئيسية: تجاوب حقيقي على جميع الأجهزة — 2026-07-07
   على الشاشات العادية (حتى ~1950px) لا يتغير شيء إطلاقًا.
   على الشاشات الكبيرة جدًا (32"/4K/64" TV) يكبر ارتفاع البنر
   تناسبيًا مع العرض، فتبقى نسبة قص الصورة ثابتة والرأس لا يُقص أبدًا.
   ============================================================ */
@media(min-width:761px){
  .hero--home{min-height:min(max(min(90vh,780px), 40vw), 94vh)}
}
/* wider containers crop more vertically - lower Y keeps head headroom while hands stay visible */
@media(min-width:1751px){
  .hero--home .hero-photo img{object-position:left 78%}
}
@media(min-width:1950px){
  .hero--home .hero-photo img{object-position:left 74%}
}

/* ============================================================
   جوال v5 - 2026-07-12: الشخص كامل (الرأس واليدين) مرفوع أعلى الهيرو،
   والنص تحته في مساحته الخاصة بدون ما يغطي الوجه أو الصدر.
   ارتفاع الصورة مقفول على نسبة البورتريه نفسها (999x1240) فلا يُقص
   منها شيء تقريبًا على أي مقاس جوال.
   ============================================================ */
@media(max-width:760px){
  .hero--banner{display:block;min-height:auto;padding:0;background:#0d0d0f}
  .hero--banner .hero-photo{position:relative;inset:auto;display:block;
    height:auto;min-height:0;max-height:none}
  .hero--banner .hero-photo img{width:100%;display:block;
    height:min(66vh,122vw);min-height:340px;   /* 122vw ≈ نسبة البورتريه: الصورة كلها ظاهرة تقريبًا */
    object-fit:cover;object-position:center top}
  /* التظليل القديم كان يدفن اليدين - نلغيه ونكتفي بتدرجين خفيفين */
  .hero--banner .hero-scrim{display:none}
  .hero--banner .hero-photo::before{content:"";position:absolute;inset-inline:0;top:0;height:92px;z-index:1;
    background:linear-gradient(to bottom,rgba(13,13,15,.55),transparent);pointer-events:none}
  .hero--banner .hero-photo::after{content:"";position:absolute;inset-inline:0;bottom:0;height:110px;z-index:1;
    background:linear-gradient(to top,#0d0d0f 6%,transparent);pointer-events:none}
  .hero--banner .container{margin-top:-10px;padding-top:0;padding-bottom:28px;position:relative;z-index:2}
}

/* ============================================================
   الشريط العائم v2 - 2026-07-12: بنفس حجم أيقونة الواتساب،
   وفي الجوال أضيق (نص مختصر) عشان ما يمتد لعرض الشاشة
   ============================================================ */
.lp-mini{display:none}
.live-pill{min-height:52px;padding:8px 8px 8px 18px}
.lp-arrow{width:36px;height:36px}
.lp-arrow svg{width:16px;height:16px}
@media(max-width:760px){
  .lp-full{display:none}
  .lp-mini{display:inline}
  .live-pill{min-height:46px;font-size:.76rem;padding:5px 5px 5px 14px;gap:7px;
    left:10px;bottom:calc(14px + env(safe-area-inset-bottom))}
  .lp-dot{width:6px;height:6px}
  .lp-sep{height:14px}
  .lp-arrow{width:36px;height:36px}
  .lp-arrow svg{width:15px;height:15px}
}

/* ============================================================
   حماية المحتوى - 2026-07-12
   الصور: لا سحب، لا تحديد، لا قائمة حفظ باللمس الطويل (iOS/Android)
   النصوص تبقى قابلة للتحديد (مهم للـ SEO وتجربة القراءة)
   ============================================================ */
img, picture, .hero-photo, .dcard, .photo-frame, .fb-figure, .about-photo{
  -webkit-user-drag:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

/* ============================================================
   معرض الأعمال v2 - 2026-07-12
   كابشن ظاهر (عنوان + وسم قسم) + طبقة hover بوصف وزر
   + مودال مشروع كامل + حركات FLIP للفلترة
   ============================================================ */
.dcard{position:relative} /* مرجع تموضع طبقة الكابشن */
.dov{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:flex-start;gap:5px;padding:14px;text-align:right;pointer-events:none;
  background:linear-gradient(to top, rgba(9,10,14,.88) 0%, rgba(9,10,14,.32) 32%, transparent 58%);
  transition:background .35s var(--ease)}
.dov-tag{display:inline-flex;align-self:flex-start;padding:4px 11px;border-radius:999px;
  font-size:.68rem;font-weight:800;color:#1a1304;background:#E7CD86}
.dov-title{color:#fff;font-weight:800;font-size:.96rem;line-height:1.35;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.dov-desc,.dov-btn{opacity:0;transform:translateY(10px);
  transition:opacity .28s var(--ease),transform .34s var(--ease)}
.dov-desc{color:rgba(246,243,236,.88);font-size:.8rem;line-height:1.65}
.dov-btn{display:inline-flex;align-items:center;gap:7px;margin-top:5px;padding:8px 16px;border-radius:999px;
  font-size:.78rem;font-weight:800;color:#1a1304;background:linear-gradient(100deg,#E7CD86,#C9A24B)}
.dov-btn svg{width:13px;height:13px}
.dcard:hover .dov,.dcard:focus-visible .dov{
  background:linear-gradient(to top, rgba(9,10,14,.94) 0%, rgba(9,10,14,.66) 46%, rgba(9,10,14,.2) 100%)}
.dcard:hover .dov-desc,.dcard:hover .dov-btn,
.dcard:focus-visible .dov-desc,.dcard:focus-visible .dov-btn{opacity:1;transform:none}
@media (hover:none){.dov-desc,.dov-btn{display:none}} /* الجوال: النقرة تفتح المشروع مباشرة */
@media (prefers-reduced-motion:reduce){.dov,.dov-desc,.dov-btn{transition:none}}

/* --- مودال المشروع --- */
.pmodal{position:fixed;inset:0;z-index:320;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(5,8,14,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pmodal[hidden]{display:none}
.pm-box{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr);
  width:min(980px,100%);max-height:92vh;background:var(--panel);border:1px solid var(--line);
  border-radius:22px;overflow:hidden;box-shadow:var(--shadow-2);
  animation:pmIn .35s cubic-bezier(.16,.84,.34,1)}
@keyframes pmIn{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
.pm-media{position:relative;background:#0a0d15;display:flex;align-items:center;justify-content:center;min-height:340px}
.pm-media img{width:100%;height:100%;max-height:92vh;object-fit:contain;display:block}
.pm-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--line);cursor:pointer;
  background:rgba(9,13,23,.74);color:#fff;transition:background .2s,border-color .2s}
.pm-nav:hover{background:rgba(201,162,75,.32);border-color:var(--gold)}
.pm-nav svg{width:18px;height:18px}
.pm-prev{inset-inline-start:12px}
.pm-next{inset-inline-end:12px}
.pm-count{position:absolute;bottom:12px;inset-inline-start:14px;font-family:var(--f-data);font-size:.74rem;
  color:#fff;background:rgba(9,13,23,.72);padding:4px 11px;border-radius:999px}
.pm-close{position:absolute;top:12px;inset-inline-end:12px;z-index:5;width:40px;height:40px;border-radius:12px;
  border:1px solid var(--line);background:rgba(9,13,23,.72);color:#fff;font-size:1rem;cursor:pointer;
  transition:background .2s}
.pm-close:hover{background:rgba(255,255,255,.15)}
.pm-side{padding:26px 24px 22px;display:flex;flex-direction:column;gap:11px;overflow-y:auto;min-width:0}
.pm-tag{align-self:flex-start;padding:5px 13px;border-radius:999px;font-size:.7rem;font-weight:800;
  color:var(--gold-2);border:1px solid var(--line);background:rgba(201,162,75,.08)}
.pm-title{font-size:1.28rem;font-weight:800;line-height:1.4;margin:0}
.pm-desc{color:var(--muted);font-size:.94rem;line-height:1.85;margin:0}
.pm-meta{display:grid;gap:8px;padding:13px 0;border-block:1px dashed var(--line-soft);font-size:.85rem}
.pm-meta div{display:flex;justify-content:space-between;gap:10px}
.pm-meta span{color:var(--muted)}
.pm-meta b{color:var(--text);font-weight:600;text-align:start}
.pm-thumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.pm-thumbs::-webkit-scrollbar{display:none}
.pm-thumbs button{flex:0 0 auto;width:50px;height:64px;border-radius:10px;overflow:hidden;cursor:pointer;
  border:2px solid transparent;padding:0;background:none;opacity:.6;transition:opacity .2s,border-color .2s}
.pm-thumbs button.on{border-color:var(--gold);opacity:1}
.pm-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.pm-links{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:8px}
.pm-links .btn{width:100%;justify-content:center;font-size:.92rem;padding:13px 18px;min-height:48px}
[data-theme="light"] .pm-media{background:#EDEAE1}
[data-theme="light"] .pm-close,[data-theme="light"] .pm-nav{background:rgba(255,255,255,.85);color:#111}
[data-theme="light"] .pm-nav:hover{background:rgba(20,20,20,.12)}
@media(max-width:820px){
  .pmodal{padding:0;align-items:flex-end}
  .pm-box{grid-template-columns:1fr;max-height:96svh;border-radius:22px 22px 0 0;overflow-y:auto;display:block}
  .pm-media{min-height:0}
  .pm-media img{max-height:54svh;height:auto}
  .pm-side{padding:18px 18px 28px;overflow:visible}
}
@media(prefers-reduced-motion:reduce){.pm-box{animation:none}}

/* ============================================================
   نظام التواصل v2 - 2026-07-13
   تحقق فوري برسائل واضحة + أنيميشن نجاح + خريطة بكرت براند
   ============================================================ */
/* رسائل الخطأ تحت الحقول */
.field .ferr{display:none;color:#FF8A8A;font-size:.8rem;line-height:1.5;margin:2px 2px 0}
.field.invalid .ferr{display:block;animation:ferrIn .25s ease-out}
.field.invalid .input,.field.invalid .textarea{border-color:rgba(255,107,107,.7)}
.field.invalid label{color:#FF9A9A}
[data-theme="light"] .field .ferr{color:#C03030}
[data-theme="light"] .field.invalid label{color:#B02A2A}
[data-theme="light"] .field.invalid .input,[data-theme="light"] .field.invalid .textarea{border-color:rgba(180,40,40,.55)}
@keyframes ferrIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* رسالة النجاح المتحركة (علامة صح ترسم نفسها) */
.form-msg.ok{display:flex;align-items:center;gap:13px;text-align:right;
  animation:fmIn .5s cubic-bezier(.16,.84,.34,1)}
.form-msg.ok b{color:#CFF5DA}
.fm-check{width:42px;height:42px;flex:none;border-radius:50%;background:rgba(91,209,127,.16);
  display:grid;place-items:center}
.fm-check svg{width:26px;height:26px;fill:none;stroke:#5BD17F;stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round}
.fm-check circle{stroke-dasharray:145;stroke-dashoffset:145;animation:fmDraw .55s .1s ease-out forwards}
.fm-check path{stroke-dasharray:34;stroke-dashoffset:34;animation:fmDraw .35s .55s ease-out forwards}
@keyframes fmIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes fmDraw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .form-msg.ok,.field.invalid .ferr{animation:none}
  .fm-check circle,.fm-check path{animation:none;stroke-dashoffset:0}
}

/* الخريطة */
.map-wrap{position:relative;border:1px solid var(--line);border-radius:var(--r-xl);
  overflow:hidden;box-shadow:var(--shadow-2);background:var(--panel)}
.map-wrap iframe{display:block;width:100%;height:min(440px,58vh);border:0}
.map-card{position:absolute;inset-block-start:14px;inset-inline-start:14px;z-index:2;
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;
  background:rgba(9,13,23,.9);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 14px 40px -14px rgba(0,0,0,.6);max-width:min(94%,380px)}
.map-card img{height:28px;width:auto;flex:none}
.map-card .mc-tx{min-width:0}
.map-card b{display:block;font-size:.94rem;color:#fff;line-height:1.35}
.map-card span{display:block;font-size:.76rem;color:var(--muted)}
.map-card .btn{padding:9px 15px;min-height:0;font-size:.8rem;margin-inline-start:auto;flex:none}
[data-theme="light"] .map-card{background:rgba(255,255,255,.94)}
[data-theme="light"] .map-card b{color:#121212}
@media(max-width:600px){
  .map-wrap iframe{height:340px}
  .map-card{inset-inline:10px;inset-block-start:10px;gap:10px;padding:10px 12px}
  .map-card .btn{padding:8px 12px;font-size:.76rem}
}

/* ============================================================
   المدونة - 2026-07-13
   تايبوغرافي قراءة مريح + هيرو مقال مميز + فلاتر + فهرس + نشرة
   ============================================================ */
/* --- هيرو المقال المميز --- */
.bfeat{display:grid;grid-template-columns:1.1fr .9fr;border:1px solid var(--line);border-radius:var(--r-xl);
  overflow:hidden;background:linear-gradient(150deg,rgba(201,162,75,.13),rgba(18,26,44,.8));margin-bottom:34px}
.bfeat-cover{position:relative;min-height:280px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--panel-2),var(--ink-2))}
.bfeat-cover svg{width:84px;height:84px;color:var(--gold);opacity:.5}
.bfeat-cover .bcat{position:absolute;inset-block-start:16px;inset-inline-start:16px}
.bfeat-body{padding:clamp(24px,4vw,44px);display:flex;flex-direction:column;justify-content:center;gap:14px}
.bfeat h2{font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.45;text-wrap:balance;margin:0}
.bfeat p{color:var(--muted);line-height:1.9;margin:0;text-wrap:pretty}
.bfeat .bmeta{margin-top:4px}
.bcat{display:inline-flex;padding:5px 13px;border-radius:999px;font-size:.72rem;font-weight:800;
  color:#1a1304;background:#E7CD86}
.bmeta{display:flex;align-items:center;gap:8px;color:var(--muted-2);font-size:.8rem;font-family:var(--f-data);flex-wrap:wrap}
@media(max-width:860px){.bfeat{grid-template-columns:1fr}.bfeat-cover{min-height:190px}}

/* --- شريط البحث والفلاتر --- */
.btools{display:flex;flex-direction:column;gap:14px;margin-bottom:26px}
.bsearch-wrap{position:relative;max-width:460px}
.bsearch-wrap .input{padding-inline-start:48px}
.bsearch-wrap svg{position:absolute;inset-inline-start:15px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;color:var(--gold-2);pointer-events:none}
.btags{display:flex;gap:8px;flex-wrap:wrap}
.btags button{font-family:var(--f-body);font-size:.78rem;color:var(--muted);cursor:pointer;
  background:rgba(255,255,255,.03);border:1px dashed var(--line);border-radius:999px;padding:6px 13px;
  transition:color .2s,border-color .2s}
.btags button:hover{color:var(--text);border-color:rgba(201,162,75,.45)}
.btags button.is-on{color:#0b0e16;background:var(--gold-2);border:1px solid transparent;font-weight:700}
[data-theme="light"] .btags button{background:rgba(0,0,0,.03)}
[data-theme="light"] .btags button.is-on{color:#fff;background:#11110f}
.bempty{text-align:center;color:var(--muted);padding:40px 0;font-size:1rem}

/* --- بطاقة مقال (تمديد لنمط .post الموجود) --- */
.bpost .p-cover{cursor:pointer}
.bpost .bmeta{margin-top:10px}

/* --- صفحة المقال --- */
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:44px;align-items:start}
@media(max-width:960px){.article-grid{grid-template-columns:1fr}}
.post-head{max-width:760px;margin-bottom:8px}
.post-head h1{font-size:clamp(1.65rem,4vw,2.5rem);line-height:1.4;text-wrap:balance;margin:14px 0 12px}
.post-head .bmeta{font-size:.85rem}
.post-body{max-width:70ch;font-size:1.06rem;line-height:2;color:var(--text)}
.post-body p{margin:0 0 18px;text-wrap:pretty;color:rgba(245,242,234,.88)}
[data-theme="light"] .post-body p{color:#2b2b28}
.post-body h2{font-size:1.42rem;margin:40px 0 14px;line-height:1.5;scroll-margin-top:calc(var(--header-h) + 20px)}
.post-body h3{font-size:1.12rem;margin:26px 0 10px}
.post-body ul,.post-body ol{margin:0 0 18px;padding-inline-start:22px;display:grid;gap:8px}
.post-body ul{list-style:disc}.post-body ol{list-style:decimal}
.post-body li{color:rgba(245,242,234,.88);line-height:1.9}
[data-theme="light"] .post-body li{color:#2b2b28}
.post-body li::marker{color:var(--gold)}
.post-body strong{color:var(--gold-2)}
[data-theme="light"] .post-body strong{color:#7d5f1f}
.post-body blockquote{margin:24px 0;padding:18px 22px;border:1px solid var(--line);border-radius:var(--r-md);
  background:rgba(201,162,75,.06);font-weight:600;color:var(--text)}
.post-body a{color:var(--gold-2);text-decoration:underline;text-underline-offset:3px}
.post-tags{display:flex;gap:8px;flex-wrap:wrap;margin:30px 0 0;padding-top:22px;border-top:1px dashed var(--line-soft)}
.post-tags span{font-size:.76rem;color:var(--muted);border:1px solid var(--line-soft);border-radius:999px;padding:5px 12px}

/* فهرس المحتويات */
.toc-card{position:sticky;top:calc(var(--header-h) + 18px);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);padding:18px 18px 14px}
.toc-card h4{font-size:.92rem;color:var(--gold-2);margin:0 0 10px;font-family:var(--f-display)}
.toc-card ul{display:grid;gap:2px}
.toc-card a{display:block;padding:7px 10px;border-radius:10px;font-size:.86rem;color:var(--muted);
  line-height:1.5;transition:color .2s,background .2s}
.toc-card a:hover{color:var(--text);background:rgba(201,162,75,.07)}
.toc-card a.on{color:var(--gold-2);background:rgba(201,162,75,.1);font-weight:700}
@media(max-width:960px){
  .toc-card{position:static;margin-bottom:6px}
  .article-aside{order:-1}
}

/* بطاقة الكاتب */
.author-card{display:flex;gap:16px;align-items:center;margin-top:34px;padding:20px 22px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(150deg,rgba(201,162,75,.08),var(--panel))}
.author-card img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--gold)}
.author-card b{display:block;font-size:1.05rem}
.author-card p{color:var(--muted);font-size:.88rem;line-height:1.75;margin:4px 0 8px}
.author-card .asoc{display:flex;gap:10px}
.author-card .asoc a{color:var(--gold-2);font-size:.8rem;font-weight:700}
@media(max-width:560px){.author-card{flex-direction:column;text-align:center}.author-card .asoc{justify-content:center}}

/* مقالات ذات صلة */
.brel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:860px){.brel-grid{grid-template-columns:1fr}}
.brel{display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid var(--line-soft);
  border-radius:var(--r-md);background:var(--panel);transition:transform .25s,border-color .25s}
.brel:hover{transform:translateY(-4px);border-color:rgba(201,162,75,.45)}
.brel-cat{font-size:.7rem;font-weight:800;color:var(--gold-2)}
.brel b{font-size:.95rem;line-height:1.6}
.brel-meta{font-size:.75rem;color:var(--muted-2);font-family:var(--f-data)}

/* التعليقات */
.bcomments{max-width:70ch;margin-top:38px}
.bcomments .form{margin-top:14px}

/* نافذة النشرة */
.nlmodal{position:fixed;inset:0;z-index:340;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(5,8,14,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.nl-box{position:relative;width:min(480px,100%);border:1px solid var(--line);border-radius:22px;
  background:var(--panel);padding:30px 26px 24px;text-align:right;box-shadow:var(--shadow-2);
  animation:pmIn .4s cubic-bezier(.16,.84,.34,1)}
.nl-badge{display:inline-flex;padding:5px 13px;border-radius:999px;font-size:.72rem;font-weight:800;
  color:#1a1304;background:linear-gradient(100deg,#E7CD86,#C9A24B);margin-bottom:12px}
.nl-box h3{font-size:1.25rem;line-height:1.5;margin:0 0 8px;text-wrap:balance}
.nl-box p{color:var(--muted);font-size:.92rem;line-height:1.85;margin:0 0 16px}
.nl-row{display:flex;gap:10px}
.nl-row .input{flex:1;min-height:50px}
.nl-row .btn{flex:none;min-height:50px;padding:12px 20px;font-size:.92rem}
.nl-note{display:block;margin-top:12px;font-size:.76rem;color:var(--muted-2)}
.nl-close{position:absolute;top:12px;inset-inline-end:12px;width:36px;height:36px;border-radius:11px;
  border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer;font-size:.9rem}
.nl-close:hover{color:var(--text);background:rgba(255,255,255,.06)}
@media(max-width:520px){.nl-row{flex-direction:column}}
@media(prefers-reduced-motion:reduce){.nl-box{animation:none}}

/* ============================================================
   Footer v3 (2026-07-13): newsletter strip + legal column + to-top
   ============================================================ */
.foot-nl{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;
  padding:26px 30px;margin-block:38px 42px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(135deg,rgba(201,168,106,.10),rgba(201,168,106,.02))}
.foot-nl-tx h4{font-family:var(--f-display);font-weight:700;color:var(--gold-2);font-size:1.08rem;margin-bottom:7px}
.foot-nl-tx p{color:var(--muted);font-size:.9rem;line-height:1.9;max-width:460px}
.foot-nl-form{display:flex;gap:10px;flex:1 1 300px;max-width:470px}
.foot-nl-form input{flex:1;min-width:0;height:50px;padding-inline:16px;border-radius:13px;
  border:1px solid var(--line);background:rgba(8,11,19,.55);color:var(--text);font:inherit;font-size:.92rem;
  transition:border-color .2s}
.foot-nl-form input::placeholder{color:var(--muted)}
.foot-nl-form input:focus{outline:none;border-color:var(--gold-deep)}
.foot-nl-form .btn{height:50px;white-space:nowrap;flex:none}
[data-theme="light"] .foot-nl{background:linear-gradient(135deg,rgba(20,20,20,.05),rgba(20,20,20,.01))}
[data-theme="light"] .foot-nl-form input{background:#fff}

@media (min-width:1025px){
  .footer-grid.footer-grid--v2{grid-template-columns:1.45fr .85fr 1fr .8fr 1.25fr}
}
@media (max-width:1024px){
  .footer-grid.footer-grid--v2{grid-template-columns:1fr 1fr}
  .footer-grid--v2 .foot-brand,.footer-grid--v2 .foot-contact-col{grid-column:1/-1}
}
@media (max-width:760px){
  .foot-nl{padding:22px 18px;margin-block:30px 34px}
  .foot-nl-form{flex-direction:column}
  .foot-nl-form .btn{width:100%}
  .footer-grid.footer-grid--v2{grid-template-columns:1fr 1fr;text-align:start}
  .footer-grid--v2 .foot-brand{text-align:center}
}
.fb-tag{color:var(--muted);font-size:.82rem}

.to-top{position:fixed;inset-inline-start:24px;inset-block-end:94px;z-index:95;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);cursor:pointer;
  display:grid;place-items:center;background:rgba(12,16,26,.85);backdrop-filter:blur(8px);color:var(--gold-2);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s,transform .25s,visibility .25s,border-color .2s,background .2s,color .2s}
.to-top svg{width:19px;height:19px}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{border-color:var(--gold-deep);background:rgba(201,168,106,.16);transform:translateY(-3px)}
[data-theme="light"] .to-top{background:rgba(255,255,255,.92);color:#141414;border-color:rgba(0,0,0,.14);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.3)}
@media (max-width:760px){
  .to-top{width:42px;height:42px;inset-block-end:148px;inset-inline-start:14px}
}
@media (prefers-reduced-motion:reduce){
  .to-top{transition:opacity .2s,visibility .2s;transform:none}
}

/* ============================================================
   Footer v3.2 (2026-07-13): mobile — عمودان، عنصر لكل سطر،
   ارتفاعات موحدة وحواف متساوية رياضيًا
   الصفحات 7×52+6×10=424 == خدماتنا 5×52+114+5×10=424
   قانوني 4×64+3×10=286 == تواصل 4×64+3×10=286
   ============================================================ */
.fl-cta{display:none}
@media (max-width:760px){
  .footer-grid.footer-grid--v2{grid-template-columns:1fr 1fr;gap:32px 10px;align-items:start}
  .footer-grid--v2 .foot-brand{grid-column:1/-1;text-align:center}
  .footer-grid--v2 .foot-contact-col{grid-column:auto}
  .footer-grid--v2 h4{text-align:center;width:100%}
  .footer-grid--v2 h4::after{inset-inline-start:50%;transform:translateX(-50%)}

  /* عمود واحد داخل كل قسم: عنصر لكل سطر بارتفاع ثابت */
  .footer-grid.footer-grid--v2 .flinks{display:grid;grid-template-columns:1fr;gap:10px;max-width:none;margin:0}
  .footer-grid--v2 .flinks li{display:block;width:100%;margin:0}
  .footer-grid--v2 .flinks li+li{margin-top:0}
  .footer-grid--v2 .flinks a{display:flex;width:100%;height:52px;min-height:0;box-sizing:border-box;
    justify-content:center;align-items:center;text-align:center;padding:4px 8px;
    border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);
    font-size:.82rem;line-height:1.35;color:#cdd3df}
  .footer-grid--v2 .flinks a::before{display:none}
  .footer-grid--v2 .flinks a:active{border-color:var(--gold);color:var(--gold-2)}
  .footer-grid--v2 .flinks li:last-child:nth-child(odd),
  .footer-grid--v2 .flinks li:last-child:nth-child(odd) a{grid-column:auto}

  /* بطاقة CTA تسد فراغ عمود خدماتنا (تعادل صفين: 52+10+52=114) */
  .fl-cta{display:block}
  .footer-grid--v2 .flinks .fl-cta a{height:114px;flex-direction:column;gap:7px;font-weight:700;
    font-family:var(--f-display);font-size:.9rem;color:var(--gold-2);border-color:var(--gold-deep);
    background:linear-gradient(150deg,rgba(201,168,106,.16),rgba(201,168,106,.04))}
  .fl-cta .fc-sub{font-weight:400;font-size:.7rem;color:var(--muted);font-family:var(--f-body,inherit)}

  /* قانوني: 4 صناديق بارتفاع بطاقات التواصل لتطابق الحواف */
  .footer-grid--v2 > div:nth-child(4) .flinks a{height:64px}

  /* بطاقات التواصل: نفس الشكل والارتفاع 64px */
  .footer-grid--v2 .foot-contact-col{margin:0;padding:0;border:0;background:none}
  .footer-grid--v2 .foot-contact-col .ct-row{height:64px;box-sizing:border-box;display:flex;align-items:center;
    gap:8px;padding:6px 9px;margin:0;border:1px solid var(--line);border-radius:12px;
    background:rgba(255,255,255,.03);border-bottom:1px solid var(--line)}
  .footer-grid--v2 .foot-contact-col .ct-row+.ct-row{margin-top:10px}
  .footer-grid--v2 .foot-contact-col .ct-row:hover,[dir=rtl] .footer-grid--v2 .foot-contact-col .ct-row:hover{transform:none}
  .footer-grid--v2 .foot-contact-col .ct-ic{width:30px;height:30px;border-radius:9px;flex:none}
  .footer-grid--v2 .foot-contact-col .ct-ic svg{width:15px;height:15px}
  .footer-grid--v2 .foot-contact-col .ct-tx{min-width:0;text-align:start}
  .footer-grid--v2 .foot-contact-col .ct-tx b{font-size:.64rem;line-height:1.25}
  .footer-grid--v2 .foot-contact-col .ct-tx i{font-size:.72rem;line-height:1.3;overflow-wrap:anywhere}
}

/* ============================================================
   Footer v3.3 (2026-07-13): خط موحد قصير تحت كل عناوين الفوتر (جوال)
   الصفحات 5 == خدماتنا 5 (بعد حذف المحتوى وتواصل وبطاقة CTA)
   ============================================================ */
@media (max-width:760px){
  .footer-grid.footer-grid--v2 h4{border-bottom:0;padding-bottom:10px;margin-bottom:12px}
  .footer-grid.footer-grid--v2 h4::after{width:44px;height:2px;
    inset-inline-start:50%;transform:translateX(-50%)}
}

/* ============================================================
   v3.4 (2026-07-13): خط العنوان بطول الكلمة + إلغاء وميض اللمس
   + ترتيب فلاتر المدونة على الجوال
   ============================================================ */
a,button,input,textarea,select,summary,[role="button"]{-webkit-tap-highlight-color:transparent}

.footer-grid--v2 h4{display:inline-block;width:auto}
.footer-grid--v2 h4::after{width:100%;inset-inline-start:0;transform:none}

@media (max-width:760px){
  .footer-grid.footer-grid--v2 h4{display:inline-block;width:auto;text-align:center}
  .footer-grid.footer-grid--v2 h4::after{width:100%;inset-inline-start:0;transform:none}

  /* توسيط عناوين الفوتر وعناصرها */
  .footer-grid.footer-grid--v2 > div{text-align:center}

  /* وسوم المدونة: سطران منتظمان بتمرير أفقي سلس */
  .btags{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,36px);
    gap:8px;justify-content:flex-start;align-items:stretch;
    overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none;-ms-overflow-style:none}
  .btags::-webkit-scrollbar{display:none}
  .btags button{height:36px;padding:0 14px;display:inline-flex;align-items:center;
    white-space:nowrap;width:max-content;font-size:.78rem}

  /* استجابة لمس هادئة بدون وميض */
  .dfilter button:active,.btags button:active{border-color:var(--gold-deep);
    color:var(--gold-2);background:rgba(201,168,106,.12);transform:scale(.97)}
  .dfilter button.is-on:active,.btags button.is-on:active{color:#0b0e16;background:var(--gold-2)}
}