/* =========================================================================
   أبوبكر البكار — 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{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
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"] .mobile-cta{background:rgba(255,255,255,.95)}
[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}
.mobile-cta{position:fixed;inset-block-end:0;inset-inline:0;z-index:95;display:none;gap:10px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  background:rgba(9,13,23,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.mobile-cta .btn{flex:1;padding:14px;min-height:50px;font-size:.96rem}

/* ---------- 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)}
.reveal{will-change:opacity,transform,filter;
  transition:opacity 1s var(--rev-ease),transform 1.05s var(--rev-ease),filter .9s var(--rev-ease)}
.js .reveal{opacity:0;transform:translateY(38px) scale(.97);filter:blur(8px)}
.reveal.in{opacity:1;transform:none;filter:blur(0)}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}
/* auto-stagger for grid/list children (set by JS via --i) */
.stagger-child{transition:opacity .85s var(--rev-ease),transform .9s var(--rev-ease),filter .8s var(--rev-ease);
  transition-delay:calc(var(--i,0) * 70ms)}
.js .stagger-child{opacity:0;transform:translateY(34px) scale(.97);filter:blur(7px)}
.stagger-child.in{opacity:1;transform:none;filter:blur(0)}

/* 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 */
  .mobile-cta{display:flex}
  .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:.68rem;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);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:right;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:left center;display:block}
.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 ---- */
.hero--home .hero-photo img{object-position:left 44%}      /* raise the subject; paired with the proportional min-height below so the head is never cropped on any screen */
.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:nowrap;gap:6px;overflow:visible}
.hero--banner .chip{flex:0 0 auto;padding:5px 9px;font-size:.66rem;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}
.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)}
/* شريط إثبات مصغّر (صفحة تواصل) */
.proof-strip{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;padding:8px 16px;
  border:1px solid var(--line);border-radius:var(--r-pill);font-size:.84rem;font-weight:700;
  color:var(--text);background:rgba(201,162,75,.07);transition:border-color .2s}
.proof-strip:hover{border-color:var(--gold)}
.proof-strip .ps-stars{color:var(--gold);letter-spacing:1px;font-size:.8rem}
[data-theme="light"] .proof-strip .ps-stars{color:#A07E2E}
/* توسيط حقيقي لوصف الأقسام الموسّطة (كان يلتصق يمينًا بسبب 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-watermark{position:absolute;bottom:-14px;left:0;right:0;text-align:center;pointer-events:none;
  font-family:var(--f-data);font-weight:700;font-size:clamp(64px,11vw,150px);letter-spacing:.06em;
  line-height:1;color:var(--text);opacity:.028;white-space:nowrap;user-select:none}
[data-theme="light"] .foot-watermark{opacity:.045}

.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}

.to-top{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(140deg,var(--gold-2),var(--gold));color:#1a1304;border:0;
  box-shadow:0 10px 24px -8px rgba(201,162,75,.5);transition:transform .22s var(--ease)}
.to-top:hover{transform:translateY(-4px)}
.to-top svg{width:18px;height:18px}
.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}
  .to-top{margin-top:2px}
  .foot-watermark{font-size:15vw;bottom:calc(140px + env(safe-area-inset-bottom))}
}

/* ============================================================
   تحديث: فوتر جوال بشبكة متوازية + أسهم تصنيفات بمستوى الرقائق وقابلة للنقر
   ============================================================ */
@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}
  .to-top{order:3}
}
@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}}

/* ============================================================
   زر العودة لأعلى: أنيق شفاف بإطار ذهبي، في أقصى اليسار
   ============================================================ */
.to-top{width:46px;height:46px;border-radius:50%;
  background:transparent;border:1.5px solid var(--gold);color:var(--gold-2);
  box-shadow:none;display:grid;place-items:center;cursor:pointer;
  transition:background .25s var(--ease),color .25s,transform .25s var(--ease),box-shadow .25s}
.to-top:hover{background:linear-gradient(140deg,var(--gold-2),var(--gold));color:#1a1304;
  transform:translateY(-4px);box-shadow:0 12px 26px -10px rgba(201,162,75,.55)}
.to-top svg{width:17px;height:17px}
[data-theme="light"] .to-top{border-color:#1a1a1a;color:#1a1a1a}
[data-theme="light"] .to-top:hover{background:#141414;color:#fff;box-shadow:0 12px 26px -10px rgba(0,0,0,.35)}

/* الديسكتوب: صف سفلي - الحقوق يمينًا، الروابط وسطًا، الزر أقصى اليسار */
@media(min-width:761px){
  .footer-bottom{justify-content:space-between}
  .footer-bottom .to-top{margin-inline-start:auto;order:3}
}
/* الجوال: الروابط ثم الحقوق، والزر بأقصى يسار سطر الحقوق */
@media(max-width:760px){
  .footer-bottom{position:relative}
  .to-top{position:absolute;left:0;bottom:0;order:0;margin:0;width:44px;height:44px}
  .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}
}
/* إلغاء العلامة المائية نهائيًا */
.foot-watermark{display:none!important}

/* الجوال: إلغاء شريط الأزرار الثابت والاكتفاء بالشريط العائم + تصغيره */
@media(max-width:760px){
  .mobile-cta{display:none!important}
  .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))}
}

/* حذف زر العودة لأعلى نهائيًا + محاذاة واتساب مع الشريط الذهبي + تصغير الجوال */
.to-top{display:none!important}
.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.3rem,5.6vw,1.62rem);
    line-height:1.34;
    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:4px 8px;font-size:.62rem}
}

/* ============================================================
   بنر الرئيسية: تجاوب حقيقي على جميع الأجهزة — 2026-07-07
   على الشاشات العادية (حتى ~1950px) لا يتغير شيء إطلاقًا.
   على الشاشات الكبيرة جدًا (32"/4K/64" TV) يكبر ارتفاع البنر
   تناسبيًا مع العرض، فتبقى نسبة قص الصورة ثابتة والرأس لا يُقص أبدًا.
   ============================================================ */
@media(min-width:761px){
  .hero--home{min-height:min(max(min(90vh,780px), 40vw), 94vh)}
}