/* =========================================================================
   أبوبكر البكار — 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:#6B7689;
  --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;letter-spacing:.1px;
  -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:#8A8A82;
  --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{background:none;-webkit-text-fill-color:#1A1A1A;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)}
.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)}
.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:18px;letter-spacing:-.3px}
.sec-sub{color:var(--muted);font-size:1.06rem;margin-top:16px;line-height:1.85}
.gold-text{color:var(--gold-2)}
.grad-text{background:linear-gradient(100deg,var(--gold-2),var(--gold) 55%,#fff);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 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:-.5px;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}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero-platforms{margin-top:34px}
.hero-platforms .lbl{font-family:var(--f-data);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:12px}
.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:var(--line);box-shadow:var(--shadow-2)}
.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}
.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-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 1;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:-.4px}
.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{opacity:0;transform:translateY(38px) scale(.97);filter:blur(8px);will-change:opacity,transform,filter;
  transition:opacity 1s var(--rev-ease),transform 1.05s var(--rev-ease),filter .9s var(--rev-ease)}
.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{opacity:0;transform:translateY(34px) scale(.97);filter:blur(7px);
  transition:opacity .85s var(--rev-ease),transform .9s var(--rev-ease),filter .8s var(--rev-ease);
  transition-delay:calc(var(--i,0) * 70ms)}
.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)}
  .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)}
  .section{padding-block:var(--sp-6)}
  .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}
  .footer{padding-top:var(--sp-6)}
  .footer-grid{grid-template-columns:1fr 1fr 1fr;text-align:start;gap:20px 9px;align-items:start}
  .footer-grid > div{order:1}
  .footer-grid > .foot-brand{order:2;grid-column:1 / -1;text-align:center;
    border-top:1px solid var(--line-soft);padding-top:26px;margin-top:14px}
  .foot-brand p{max-width:320px;font-size:.85rem}
  .foot-brand-soc{margin-top:18px}
  .footer-grid h4{display:block;margin-bottom:12px;font-size:.76rem}
  .footer-grid h4::after{inset-inline-start:0;transform:none}
  .footer-grid .flinks li+li{margin-top:9px}
  .footer-grid .flinks a{justify-content:flex-start;font-size:.78rem;gap:6px}
  .footer-grid .flinks a::before{width:4px;height:4px}
  .foot-contact-col{grid-column:auto;border-top:none;padding-top:0;margin-top:0}
  .ct-row{justify-content:flex-start;gap:8px;padding:8px 0}
  .ct-row .ct-ic{width:28px;height:28px;border-radius:8px}
  .ct-row .ct-ic svg{width:14px;height:14px}
  .ct-row .ct-tx b{font-size:.72rem}
  .ct-row .ct-tx i{font-size:.7rem;overflow-wrap:anywhere}
  .footer-bottom{flex-direction:column;text-align:center;gap:12px}
  .legal-links{justify-content:center}
  .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}
}
@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}
}