/* قناة الوصفات الزوجية — wasfatzawgia.com theme
   Brand: the logo's orange → pink gradient on a deep plum-black. Arabic first (RTL), English via the EN toggle.
   Font: DIN Next LT Arabic (the owner's licensed font). */

@font-face { font-family: DIN; src: url(../fonts/din-regular.ttf) format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: DIN; src: url(../fonts/din-medium.ttf) format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: DIN; src: url(../fonts/din-bold.ttf) format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: DIN; src: url(../fonts/din-black.ttf) format('truetype'); font-weight: 900; font-display: swap; }

:root {
  --bg: #0b090e;
  --bg2: #120e15;
  --surface: rgba(255, 255, 255, .035);
  --surface2: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .08);
  --line2: rgba(255, 255, 255, .14);
  --text: #f7f2f4;
  --muted: #b3a7ae;
  --dim: #7d727a;
  --o: #fba94b;
  --c: #f4705a;
  --p: #ee3b7c;
  --grad: linear-gradient(120deg, #fba94b 0%, #f4705a 45%, #ee3b7c 100%);
  --grad-soft: linear-gradient(120deg, rgba(251, 169, 75, .16), rgba(238, 59, 124, .16));
  --fb: #1877f2; --yt: #ff0033; --tt: #25f4ee; --ig: #e1306c;
  --radius: 22px;
  --max: 1200px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: DIN, "Segoe UI", Tahoma, sans-serif; font-weight: 400; line-height: 1.75;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: rgba(238, 59, 124, .45); }

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 20px; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-block: .08em; }

/* ---------- preloader ---------- */
#loader { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: grid; place-items: center; transition: opacity .6s var(--ease), visibility .6s; }
#loader.done { opacity: 0; visibility: hidden; }
#loader .mark { width: 74px; height: 100px; background: var(--grad); -webkit-mask: url(../img/logo_face.png) center / contain no-repeat; mask: url(../img/logo_face.png) center / contain no-repeat; animation: pulse 1.2s var(--ease) infinite; }
#loader .bar { position: absolute; bottom: 42%; width: 120px; height: 2px; margin-top: 140px; background: var(--line); border-radius: 2px; overflow: hidden; transform: translateY(80px); }
#loader .bar::after { content: ''; position: absolute; inset: 0; background: var(--grad); transform-origin: right; animation: load 1.1s var(--ease) forwards; }
@keyframes load { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pulse { 50% { transform: scale(1.06); filter: drop-shadow(0 0 22px rgba(238, 59, 124, .55)); } }

/* ---------- header ---------- */
.site-header { position: fixed; inset-inline: 0; top: 0; z-index: 50; transition: background .4s, backdrop-filter .4s, border-color .4s, transform .4s var(--ease); border-bottom: 1px solid transparent; }
.site-header.scrolled { background: rgba(11, 9, 14, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: var(--line); }
.site-header.hide { transform: translateY(-100%); }
.nav { display: flex; align-items: center; gap: 28px; height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand .face { width: 34px; height: 46px; background: var(--grad); -webkit-mask: url(../img/logo_face.png) center / contain no-repeat; mask: url(../img/logo_face.png) center / contain no-repeat; }
.brand b { font-weight: 700; font-size: 19px; line-height: 1.1; white-space: nowrap; }
.brand small { display: block; font-size: 11px; letter-spacing: .18em; color: var(--muted); font-weight: 500; direction: ltr; text-align: start; }
html[dir="rtl"] .brand small { letter-spacing: .18em; }
.menu { display: flex; gap: 26px; margin-inline-start: auto; font-size: 15.5px; color: var(--muted); }
.menu a { position: relative; padding-block: 6px; transition: color .25s; }
.menu a::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transition: transform .35s var(--ease); }
.menu a:hover, .menu a.active { color: var(--text); }
.menu a:hover::after, .menu a.active::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.lang { height: 38px; min-width: 46px; padding-inline: 12px; border-radius: 19px; border: 1px solid var(--line2); font-size: 13px; font-weight: 700; letter-spacing: .06em; transition: background .25s, border-color .25s; }
.lang:hover { background: var(--surface2); border-color: rgba(255, 255, 255, .3); }
.burger { display: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line2); position: relative; }
.burger i { position: absolute; inset-inline: 12px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .35s var(--ease), opacity .25s; }
.burger i:nth-child(1) { top: 15px; } .burger i:nth-child(2) { top: 20px; } .burger i:nth-child(3) { top: 25px; }
.menu-open .burger i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-open .burger i:nth-child(2) { opacity: 0; }
.menu-open .burger i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding-inline: 28px; border-radius: 27px; font-weight: 700; font-size: 16px; white-space: nowrap; isolation: isolate; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 10px 30px -8px rgba(238, 59, 124, .6); }
.btn-primary::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.btn-primary:hover::before { transform: translateX(120%); }
.btn-primary:hover { box-shadow: 0 16px 40px -8px rgba(238, 59, 124, .75); }
.btn-ghost { border: 1px solid var(--line2); background: var(--surface); backdrop-filter: blur(8px); }
.btn-ghost:hover { background: var(--surface2); border-color: rgba(255, 255, 255, .3); }
.btn-sm { height: 40px; padding-inline: 18px; font-size: 14px; }
html[dir="rtl"] .flip { transform: scaleX(-1); }

/* ---------- section scaffolding ---------- */
section { position: relative; padding-block: 120px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding-inline: 14px; border-radius: 17px; border: 1px solid var(--line2); background: var(--surface); font-size: 13.5px; font-weight: 500; color: var(--muted); }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--p); box-shadow: 0 0 0 0 rgba(238, 59, 124, .6); animation: ping 2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(238, 59, 124, 0); } 100% { box-shadow: 0 0 0 0 rgba(238, 59, 124, 0); } }
.sec-head { max-width: 720px; margin-bottom: 56px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head h2 { font-size: clamp(30px, 4.2vw, 50px); line-height: 1.25; font-weight: 700; margin: 18px 0 14px; letter-spacing: -.01em; }
html[dir="rtl"] .sec-head h2 { letter-spacing: 0; }
.sec-head p { margin: 0; color: var(--muted); font-size: 18px; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity .75s var(--ease), transform .75s var(--ease), filter .75s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; filter: none; }

/* glass card with a cursor spotlight */
.card { position: relative; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow: hidden; isolation: isolate; transition: transform .5s var(--ease), border-color .4s, background .4s; }
.card::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(244, 112, 90, .16), transparent 60%); }
.card:hover::before { opacity: 1; }
.card:hover { border-color: var(--line2); }

/* ---------- hero ---------- */
.hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-block: 120px 80px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
/* soft colour fields: radial gradients (no blur filter — cheap to animate) */
.blob { position: absolute; border-radius: 50%; opacity: .55; will-change: transform; }
.blob.b1 { width: 900px; height: 900px; background: radial-gradient(closest-side, rgba(244, 112, 90, .7), rgba(244, 112, 90, .25) 45%, transparent); top: -380px; inset-inline-end: -320px; animation: drift1 22s ease-in-out infinite alternate; }
.blob.b2 { width: 860px; height: 860px; background: radial-gradient(closest-side, rgba(238, 59, 124, .6), rgba(238, 59, 124, .2) 45%, transparent); bottom: -460px; inset-inline-end: 22%; opacity: .5; animation: drift2 26s ease-in-out infinite alternate; }
.blob.b3 { width: 640px; height: 640px; background: radial-gradient(closest-side, rgba(251, 169, 75, .5), rgba(251, 169, 75, .15) 45%, transparent); top: 20%; inset-inline-start: -300px; opacity: .35; animation: drift3 20s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(-120px, 140px) scale(1.15); } }
@keyframes drift2 { to { transform: translate(160px, -120px) scale(.9); } }
@keyframes drift3 { to { transform: translate(120px, -80px) scale(1.2); } }
.grid-lines { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%); opacity: .55; }
.hero-mark { position: absolute; width: 620px; height: 840px; top: 50%; inset-inline-start: -140px; transform: translateY(-50%); opacity: .045; background: #fff; -webkit-mask: url(../img/logo_face.png) center / contain no-repeat; mask: url(../img/logo_face.png) center / contain no-repeat; }
.hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 40px; }
.hero h1 { font-size: clamp(38px, 5.6vw, 74px); line-height: 1.18; font-weight: 900; margin: 22px 0 22px; letter-spacing: -.02em; }
html[dir="rtl"] .hero h1 { letter-spacing: 0; line-height: 1.3; }
.hero h1 .w { display: inline-block; opacity: 0; transform: translateY(40px) rotate(2deg); filter: blur(10px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.ready .hero h1 .w { opacity: 1; transform: none; filter: none; }
.hero .lead { font-size: clamp(16.5px, 1.5vw, 19px); color: var(--muted); max-width: 560px; margin: 0 0 34px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-platforms { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 38px; }
.pf-chip { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding-inline: 10px 13px; border-radius: 21px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; color: var(--muted); white-space: nowrap; transition: transform .35s var(--ease), border-color .3s, background .3s; }
.pf-chip:hover { transform: translateY(-3px); border-color: var(--line2); background: var(--surface2); }
.pf-chip svg { width: 20px; height: 20px; flex: none; }
.pf-chip b { color: var(--text); font-weight: 700; font-size: 15px; direction: ltr; }

/* phones */
.stage { position: relative; height: 640px; perspective: 1400px; }
.phone { position: absolute; width: 270px; aspect-ratio: 9 / 19.2; border-radius: 42px; padding: 9px; background: linear-gradient(145deg, #2b2730, #0d0b10 55%, #26222b); box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 0 0 1px rgba(0, 0, 0, .6); will-change: transform; }
.phone .screen { position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: #000; }
.phone video, .phone .screen > img { width: 100%; height: 100%; object-fit: cover; }
.phone .screen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 32%); pointer-events: none; }
.phone .island { position: absolute; top: 18px; left: 50%; width: 84px; height: 24px; margin-left: -42px; border-radius: 12px; background: #000; z-index: 2; }
.stage .phone.p1 { left: 50%; top: 20px; margin-left: -135px; z-index: 3; }
.stage .phone.p2 { left: 50%; top: 70px; margin-left: -330px; z-index: 2; --r: -9deg; }
.stage .phone.p3 { left: 50%; top: 70px; margin-left: 60px; z-index: 2; --r: 9deg; }
.stage .phone.p2, .stage .phone.p3 { width: 236px; }
/* side phones sit back: a dark veil instead of a CSS filter on playing video */
.stage .phone.p2 .screen::before, .stage .phone.p3 .screen::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(8, 6, 10, .3); transition: opacity .4s; pointer-events: none; }
.stage .phone.p2:hover .screen::before, .stage .phone.p3:hover .screen::before { opacity: 0; }
.stage .phone { transform: rotate(var(--r, 0deg)); opacity: 0; scale: .82; transition: opacity 1.1s var(--ease), scale 1.4s var(--ease), filter .5s; }
.stage .phone.p1 { transition-delay: .25s; } .stage .phone.p2 { transition-delay: .45s; } .stage .phone.p3 { transition-delay: .6s; }
.ready .stage .phone { opacity: 1; scale: 1; }
.phone video { transform: translateZ(0); }
.stage .float-chip, .stage .ing { opacity: 0; scale: .6; transition: opacity .7s var(--ease), scale .9s cubic-bezier(.3, 1.6, .5, 1); }
.ready .stage .float-chip, .ready .stage .ing { opacity: 1; scale: 1; }
.stage .fc1 { transition-delay: 1s; } .stage .fc2 { transition-delay: 1.15s; } .stage .fc3 { transition-delay: 1.3s; }
.stage .ing { transition-delay: 1.2s; }
.float-chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: linear-gradient(140deg, rgba(36, 28, 40, .95), rgba(18, 14, 22, .95)); border: 1px solid var(--line2); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .7); white-space: nowrap; animation: bob 6s ease-in-out infinite; will-change: transform; }
.float-chip img { width: 30px; height: 30px; }
.float-chip b { display: block; font-size: 17px; font-weight: 900; line-height: 1.3; }
.float-chip span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.fc1 { top: 64px; inset-inline-end: -6px; }
.fc2 { bottom: 120px; inset-inline-start: -16px; animation-delay: -2s; }
.fc3 { bottom: 26px; inset-inline-end: 40px; animation-delay: -4s; }
@keyframes bob { 50% { transform: translateY(-12px); } }
.ing { position: absolute; z-index: 1; width: 56px; opacity: .95; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .55)); animation: bob 7s ease-in-out infinite; will-change: transform; }
.scroll-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); width: 26px; height: 42px; border-radius: 13px; border: 1.5px solid var(--line2); }
.scroll-hint::after { content: ''; position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--text); animation: wheel 1.8s var(--ease) infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- ticker ---------- */
.ticker { padding-block: 26px; border-block: 1px solid var(--line); background: var(--bg2); overflow: hidden; }
.ticker .track { display: flex; width: max-content; gap: 0; animation: marquee 40s linear infinite; }
html[dir="ltr"] .ticker .track { animation-name: marqueeL; }
@keyframes marqueeL { to { transform: translateX(-50%); } }
.ticker:hover .track { animation-play-state: paused; }
.ticker .item { display: flex; align-items: center; gap: 12px; padding-inline: 28px; font-size: 22px; font-weight: 700; color: rgba(247, 242, 244, .82); white-space: nowrap; }
.ticker .item img { width: 34px; height: 34px; }
.ticker .item::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--grad); margin-inline-start: 44px; }
@keyframes marquee { to { transform: translateX(50%); } }

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.about-statement { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.45; font-weight: 700; margin: 18px 0 0; }
.about-statement .soft { color: var(--dim); }
.about-text p { color: var(--muted); font-size: 18px; margin: 0 0 18px; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 64px; }
.value { padding: 30px 26px 28px; }
.value .ico { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--line); margin-bottom: 20px; }
.value .ico img { width: 34px; height: 34px; transition: transform .6s var(--ease); }
.value:hover .ico img { transform: scale(1.18) rotate(-8deg); }
.value h3 { font-size: 21px; margin: 0 0 8px; font-weight: 700; }
.value p { margin: 0; color: var(--muted); font-size: 16px; }

/* ---------- numbers ---------- */
.numbers { background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(244, 112, 90, .12), transparent 70%), var(--bg); }
.total { text-align: center; margin-bottom: 64px; }
.total .big { font-size: clamp(56px, 10vw, 132px); font-weight: 900; line-height: 1; letter-spacing: -.03em; direction: ltr; display: inline-block; }
.total .label { color: var(--muted); font-size: 19px; margin-top: 14px; }
.platforms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pf { display: block; padding: 26px 24px 24px; transform-style: preserve-3d; }
.pf .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.pf .logo { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--c1); box-shadow: 0 12px 26px -10px var(--c1); }
.pf .logo svg { width: 28px; height: 28px; color: #fff; }
.pf .go { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line2); display: grid; place-items: center; transition: background .3s, transform .4s var(--ease); }
.pf .go svg { width: 16px; height: 16px; }
.pf:hover .go { background: var(--c1); border-color: transparent; transform: rotate(-45deg); }
html[dir="rtl"] .pf:hover .go { transform: rotate(45deg); }
.pf .n { font-size: 46px; font-weight: 900; line-height: 1; }
.pf .n small { font-size: 22px; font-weight: 700; color: var(--muted); margin-inline-start: 4px; }
.pf .name { font-size: 18px; font-weight: 700; margin-top: 12px; }
.pf .handle { font-size: 14px; color: var(--dim); direction: ltr; text-align: start; }
html[dir="rtl"] .pf .handle { text-align: end; }
.pf .share { height: 4px; border-radius: 4px; background: var(--line); margin-top: 22px; overflow: hidden; }
.pf .share i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--c1); transition: width 1.6s var(--ease) .3s; }
.pf.in .share i { width: var(--w); }
.pf.fb { --c1: var(--fb); } .pf.yt { --c1: var(--yt); } .pf.tt { --c1: #111; } .pf.ig { --c1: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5); }
.pf.tt .logo { background: #000; border: 1px solid var(--line2); box-shadow: 0 12px 26px -10px rgba(37, 244, 238, .5); }
.pf.tt .share i { background: linear-gradient(90deg, #25f4ee, #fe2c55); }
.pf.ig .logo { box-shadow: 0 12px 26px -10px #d62976; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.stat { padding: 30px 26px; }
.stat + .stat { border-inline-start: 1px solid var(--line); }
.stat b { display: block; font-size: 36px; font-weight: 900; line-height: 1.1; margin-bottom: 6px; }
.stat b small { font-size: 20px; font-weight: 700; color: var(--muted); }
.stat > span { color: var(--muted); font-size: 15.5px; }
.note { color: var(--dim); font-size: 13px; margin-top: 16px; text-align: center; }

/* ---------- services ---------- */
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.svc { display: grid; grid-template-columns: auto 1fr; gap: 22px; padding: 32px 30px; align-items: start; }
.svc .ico { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--line); }
.svc .ico img { width: 42px; height: 42px; transition: transform .6s var(--ease); }
.svc:hover .ico img { transform: translateY(-4px) scale(1.12); }
.svc h3 { font-size: 22px; margin: 4px 0 8px; font-weight: 700; }
.svc p { margin: 0; color: var(--muted); font-size: 16.5px; }
.svc .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.svc .tags span { font-size: 13px; padding: 4px 12px; border-radius: 14px; background: var(--surface2); color: var(--muted); }

/* ---------- work ---------- */
.work { background: var(--bg2); overflow: hidden; }
.work-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; justify-items: center; }
.reel { width: 100%; max-width: 320px; text-align: center; }
.reel .phone { position: relative; width: 100%; transition: transform .6s var(--ease); }
.reel:hover .phone { transform: translateY(-10px) rotate(-1.5deg); }
.reel .phone .play { position: absolute; inset: 9px; border-radius: 34px; display: grid; place-items: center; background: rgba(0, 0, 0, .25); opacity: 0; transition: opacity .35s; z-index: 3; }
.reel .phone .play span { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.reel .phone .play svg { width: 22px; height: 22px; color: #111; margin-left: 4px; }
.reel:hover .phone .play { opacity: 1; }
.reel h3 { font-size: 20px; margin: 26px 0 4px; font-weight: 700; }
.reel p { margin: 0; color: var(--dim); font-size: 14.5px; }
.work-cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 56px; }

/* ---------- process ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.steps .line { position: absolute; top: 34px; inset-inline: 10%; height: 2px; background: var(--line); }
.steps .line i { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; background: var(--grad); border-radius: 2px; box-shadow: 0 0 16px rgba(238, 59, 124, .6); }
.step { position: relative; text-align: center; padding-inline: 6px; }
.step .num { position: relative; z-index: 1; width: 68px; height: 68px; margin: 0 auto 22px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line2); transition: border-color .5s, box-shadow .5s, transform .5s var(--ease); }
.step .num img { width: 32px; height: 32px; }
.step.on .num { border-color: transparent; box-shadow: 0 0 0 2px var(--p), 0 0 30px rgba(238, 59, 124, .45); transform: scale(1.06); }
.step small { display: block; font-size: 12.5px; letter-spacing: .14em; color: var(--p); font-weight: 700; margin-bottom: 6px; direction: ltr; }
.step h3 { font-size: 19px; margin: 0 0 6px; font-weight: 700; }
.step p { margin: 0; font-size: 15px; color: var(--muted); }

/* ---------- audience map ---------- */
.map-wrap { position: relative; width: 100%; max-width: 1080px; margin-inline: auto; aspect-ratio: 2 / 1; }
.map-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 46%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 58% 62% at 50% 46%, #000 62%, transparent 100%); }
.map-labels { position: absolute; inset: 0; pointer-events: none; }
.map-label { position: absolute; transform: translate(-50%, calc(-100% - 14px)); padding: 4px 11px; border-radius: 12px; font-size: 13.5px; font-weight: 700; white-space: nowrap; background: rgba(18, 14, 22, .9); border: 1px solid rgba(244, 112, 90, .45); box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .7); opacity: 0; scale: .7; transition: opacity .5s var(--ease), scale .6s cubic-bezier(.3, 1.6, .5, 1); transition-delay: var(--d, 0s); }
.map-label.below { transform: translate(-50%, 14px); }
.in .map-label { opacity: 1; scale: 1; }
.country-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.country-chips span { padding: 6px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); font-size: 14.5px; color: var(--muted); }

/* ---------- copyright / legal ---------- */
.legal-card { position: relative; display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: center; padding: 56px; border-radius: 34px; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, #15111a, #0f0c13); border: 1px solid var(--line2); }
.legal-card::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask-image: radial-gradient(ellipse 50% 70% at 20% 50%, #000, transparent 75%); mask-image: radial-gradient(ellipse 50% 70% at 20% 50%, #000, transparent 75%); }
html[dir="rtl"] .legal-card::before { -webkit-mask-image: radial-gradient(ellipse 50% 70% at 80% 50%, #000, transparent 75%); mask-image: radial-gradient(ellipse 50% 70% at 80% 50%, #000, transparent 75%); }
.legal-visual { display: grid; place-items: center; }
.shield { width: 100%; max-width: 300px; overflow: visible; filter: drop-shadow(0 24px 40px rgba(238, 59, 124, .25)); }
.shield .orbit { fill: none; stroke: rgba(244, 112, 90, .35); stroke-width: 1.4; stroke-dasharray: 3 9; transform-origin: 120px 120px; animation: rot 30s linear infinite; }
.shield .orbit.o2 { stroke: rgba(251, 169, 75, .25); stroke-dasharray: 60 40 6 40; animation-duration: 18s; animation-direction: reverse; }
@keyframes rot { to { transform: rotate(360deg); } }
.shield .sh-fill { fill: rgba(244, 112, 90, .07); }
.shield .sh-line { fill: none; stroke: url(#shG); stroke-width: 5; stroke-linejoin: round; stroke-dasharray: 560; stroke-dashoffset: 560; transition: stroke-dashoffset 2s var(--ease) .2s; }
.in .shield .sh-line { stroke-dashoffset: 0; }
.shield .scan { fill: url(#shG); opacity: .22; animation: scan 3.2s ease-in-out infinite; }
@keyframes scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(170px); } }
.shield .sh-c { font-family: DIN, sans-serif; font-weight: 900; font-size: 92px; fill: #fff; opacity: 0; transition: opacity .8s var(--ease) 1s; }
.in .shield .sh-c { opacity: 1; }
.shield .sh-badge { opacity: 0; transform-origin: 176px 178px; scale: .3; transition: opacity .4s 1.6s, scale .7s cubic-bezier(.3, 1.8, .5, 1) 1.6s; }
.in .shield .sh-badge { opacity: 1; scale: 1; }
.shield .sh-badge circle { fill: #1f9d62; stroke: #0f0c13; stroke-width: 4; }
.shield .sh-badge path { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.legal-copy h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.25; margin: 18px 0 14px; font-weight: 900; }
.legal-copy > p { color: var(--muted); font-size: 18px; margin: 0 0 24px; }
.legal-points { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.legal-points li { display: flex; align-items: center; gap: 8px; padding: 8px 15px 8px 13px; border-radius: 18px; background: var(--surface2); border: 1px solid var(--line); font-size: 15px; font-weight: 500; }
.legal-points li::before { content: ''; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--grad) ; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-1.6 15.6-4.5-4.5 1.6-1.6 2.9 2.9 6.2-6.2 1.6 1.6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-1.6 15.6-4.5-4.5 1.6-1.6 2.9 2.9 6.2-6.2 1.6 1.6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.legal-mail > span { display: block; color: var(--muted); font-size: 15px; margin-bottom: 12px; }
.legal-mail .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.legal-mail .btn b { font-weight: 700; direction: ltr; }
.legal-mail .copy { height: 44px; padding-inline: 16px; border-radius: 22px; border: 1px solid var(--line2); font-size: 13.5px; color: var(--muted); transition: background .3s, color .3s; }
.legal-mail .copy:hover { background: var(--surface2); color: var(--text); }
.legal-mail .copy.ok { background: #1f7a4d; color: #fff; border-color: transparent; }

/* ---------- contact ---------- */
.cta-band { position: relative; border-radius: 34px; padding: 72px 56px; overflow: hidden; isolation: isolate; background: linear-gradient(120deg, #2a1420, #1a0f1c 55%, #2b1612); border: 1px solid var(--line2); }
.cta-band::before, .cta-band::after { content: ''; position: absolute; z-index: -1; width: 720px; height: 720px; border-radius: 50%; will-change: transform; }
.cta-band::before { top: -360px; inset-inline-start: -200px; background: radial-gradient(closest-side, rgba(244, 112, 90, .4), transparent); animation: drift2 16s ease-in-out infinite alternate; }
.cta-band::after { bottom: -380px; inset-inline-end: -160px; background: radial-gradient(closest-side, rgba(238, 59, 124, .38), transparent); animation: drift1 18s ease-in-out infinite alternate; }
.cta-band h2 { font-size: clamp(30px, 4.4vw, 54px); line-height: 1.25; margin: 18px 0 14px; font-weight: 900; max-width: 760px; }
.cta-band > p { color: var(--muted); font-size: 18px; max-width: 620px; margin: 0 0 40px; }
.mails { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.mail { display: flex; align-items: center; gap: 18px; padding: 22px 24px; background: rgba(11, 9, 14, .7); }
.mail .ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--grad); flex: none; }
.mail .ico img { width: 30px; height: 30px; }
.mail span { display: block; color: var(--muted); font-size: 14.5px; }
.mail b { display: block; font-size: 19px; font-weight: 700; direction: ltr; text-align: start; word-break: break-all; }
html[dir="rtl"] .mail b { text-align: end; }
.mail .copy { margin-inline-start: auto; flex: none; height: 38px; padding-inline: 14px; border-radius: 19px; border: 1px solid var(--line2); font-size: 13px; color: var(--muted); transition: background .3s, color .3s; }
.mail .copy:hover { background: var(--surface2); color: var(--text); }
.mail .copy.ok { background: #1f7a4d; color: #fff; border-color: transparent; }
.socials { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.soc { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line2); background: rgba(11, 9, 14, .5); transition: transform .4s var(--ease), background .3s, border-color .3s; }
.soc svg { width: 22px; height: 22px; }
.soc:hover { transform: translateY(-4px); border-color: transparent; }
.soc.fb:hover { background: var(--fb); } .soc.yt:hover { background: var(--yt); } .soc.tt:hover { background: #000; box-shadow: -2px -2px 0 #25f4ee, 2px 2px 0 #fe2c55; } .soc.ig:hover { background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf); }

/* ---------- footer ---------- */
footer { padding-block: 56px 40px; border-top: 1px solid var(--line); }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot .links { display: flex; gap: 22px; flex-wrap: wrap; color: var(--muted); font-size: 15px; }
.foot .links a:hover { color: var(--text); }
.copy-line { margin-top: 30px; color: var(--dim); font-size: 13.5px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* back to top */
#top { position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 40; width: 50px; height: 50px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; box-shadow: 0 12px 30px -8px rgba(238, 59, 124, .7); opacity: 0; transform: translateY(20px) scale(.8); transition: opacity .4s, transform .4s var(--ease); pointer-events: none; }
#top.show { opacity: 1; transform: none; pointer-events: auto; }
#top svg { width: 20px; height: 20px; color: #fff; }
#top .ring { position: absolute; inset: -4px; width: 58px; height: 58px; transform: rotate(-90deg); }
#top .ring circle { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 2; stroke-dasharray: 170; stroke-dashoffset: var(--off, 170); }

/* mobile menu sheet */
.sheet { position: fixed; inset: 0; z-index: 45; background: rgba(11, 9, 14, .96); backdrop-filter: blur(14px); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.menu-open .sheet { opacity: 1; visibility: visible; }
.sheet a { font-size: 30px; font-weight: 700; padding: 10px; opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.menu-open .sheet a { opacity: 1; transform: none; }
.menu-open .sheet a:nth-child(2) { transition-delay: .05s; } .menu-open .sheet a:nth-child(3) { transition-delay: .1s; } .menu-open .sheet a:nth-child(4) { transition-delay: .15s; } .menu-open .sheet a:nth-child(5) { transition-delay: .2s; } .menu-open .sheet a:nth-child(6) { transition-delay: .25s; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .menu { display: none; }
  .burger { display: block; }
  .nav-actions { margin-inline-start: auto; }
  .nav-actions .btn { display: none; }
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero .lead { margin-inline: auto; }
  .hero-ctas, .hero-platforms { justify-content: center; }
  .stage { height: 600px; max-width: 640px; margin-inline: auto; width: 100%; }
  .platforms { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-inline-start: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .legal-card { grid-template-columns: 1fr; gap: 24px; padding: 44px 32px; text-align: center; }
  .legal-visual .shield { max-width: 220px; }
  .legal-points, .legal-mail .row { justify-content: center; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps .line { top: 34px; bottom: 34px; height: auto; width: 2px; inset-inline: auto; inset-inline-start: 33px; }
  .steps .line i { width: 100%; height: 0; inset-inline: 0; }
  .step { display: grid; grid-template-columns: 68px 1fr; gap: 20px; text-align: start; padding: 0 0 34px; }
  .step .num { margin: 0; }
  .step small { direction: inherit; }
}
@media (max-width: 760px) {
  section { padding-block: 84px; }
  .nav { height: 66px; }
  .brand b { font-size: 17px; }
  .hero { padding-top: 104px; }
  .stage { height: 520px; }
  .phone { width: 220px; border-radius: 36px; }
  .phone .screen { border-radius: 28px; }
  .stage .phone.p1 { margin-left: -110px; }
  .stage .phone.p2, .stage .phone.p3 { width: 190px; top: 64px; }
  .stage .phone.p2 { margin-left: -232px; }
  .stage .phone.p3 { margin-left: 42px; }
  .float-chip { padding: 8px 11px; border-radius: 13px; }
  .float-chip b { font-size: 15px; }
  .float-chip img { width: 24px; height: 24px; }
  .fc1 { top: 20px; inset-inline-end: 0; }
  .fc2 { bottom: 70px; inset-inline-start: 0; }
  .fc3 { display: none; }
  .ing { width: 40px; }
  .values, .services-grid, .mails { grid-template-columns: 1fr; }
  .values { gap: 12px; margin-top: 44px; }
  .value { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; padding: 20px 18px; align-items: start; }
  .value .ico { width: 52px; height: 52px; border-radius: 16px; margin: 0; grid-row: span 2; }
  .value .ico img { width: 30px; height: 30px; }
  .value h3 { font-size: 18px; margin: 2px 0 2px; }
  .value p { font-size: 15px; }
  .svc { grid-template-columns: 56px 1fr; gap: 16px; padding: 22px 18px; }
  .svc .ico { width: 56px; height: 56px; border-radius: 17px; }
  .svc .ico img { width: 32px; height: 32px; }
  .svc h3 { font-size: 19px; margin-top: 2px; }
  .svc p { font-size: 15.5px; }
  .blob { opacity: .38; }
  .sec-head { margin-bottom: 40px; }
  .sec-head p { font-size: 16.5px; }
  .about-text p { font-size: 16.5px; }
  .work-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 18px; padding-inline: 20px; margin-inline: -20px; scrollbar-width: none; }
  .work-row::-webkit-scrollbar { display: none; }
  .reel { flex: 0 0 72%; scroll-snap-align: center; }
  .pf { padding: 20px 18px; }
  .pf .n { font-size: 36px; }
  .stat { padding: 22px 18px; }
  .stat b { font-size: 28px; }
  .cta-band { padding: 48px 22px; border-radius: 26px; }
  .mail { padding: 18px; gap: 14px; }
  .mail .copy { display: none; }
  .mail b { font-size: 14.5px; word-break: normal; white-space: nowrap; }
  .mail .ico { width: 46px; height: 46px; border-radius: 14px; }
  .mail .ico img { width: 26px; height: 26px; }
  .cta-band { padding: 44px 16px; }
  .map-wrap { aspect-ratio: 1.25 / 1; margin-inline: -20px; width: calc(100% + 40px); }
  .map-label { font-size: 11px; padding: 2px 7px; border-radius: 9px; transform: translate(-50%, calc(-100% - 9px)); }
  .map-label.below { transform: translate(-50%, 9px); }
  .map-label.minor { display: none; }
  .country-chips span { font-size: 13px; padding: 5px 11px; }
  .legal-card { padding: 36px 18px; border-radius: 26px; }
  .legal-copy > p { font-size: 16px; }
  .legal-points li { font-size: 13.5px; }
  .legal-mail .btn { height: 50px; padding-inline: 18px; font-size: 14px; }
  .legal-mail .copy { display: none; }
  .ticker .item { font-size: 18px; padding-inline: 20px; }
  .ticker .item::after { margin-inline-start: 34px; }
}
@media (max-width: 420px) {
  .platforms { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pf .top { margin-bottom: 18px; }
  .pf .logo { width: 44px; height: 44px; border-radius: 14px; }
  .pf .go { display: none; }
  .pf .n { font-size: 30px; }
  .pf .n small { font-size: 16px; }
  .pf .name { font-size: 16px; }
  .pf .handle { font-size: 12px; }
  .stage { height: 470px; }
  .phone { width: 200px; }
  .stage .phone.p1 { margin-left: -100px; }
  .stage .phone.p2, .stage .phone.p3 { width: 168px; }
  .stage .phone.p2 { margin-left: -196px; }
  .stage .phone.p3 { margin-left: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal, .hero h1 .w, .stage .phone, .stage .float-chip, .stage .ing { opacity: 1 !important; scale: 1 !important; filter: none !important; }
  .reveal, .hero h1 .w { transform: none !important; }
}

/* ---------- WordPress: admin bar, inner pages ---------- */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.page-hero { position: relative; padding-block: 170px 70px; overflow: hidden; text-align: center; }
.page-hero h1 { font-size: clamp(34px, 5vw, 60px); line-height: 1.25; font-weight: 900; margin: 20px 0 10px; }
.page-hero .lead { color: var(--muted); font-size: 18px; margin: 0 auto 30px; max-width: 560px; }
.page-hero.not-found { min-height: 80vh; display: grid; place-items: center; }
.page-body { padding-block: 10px 110px; }
.page-content { max-width: 860px; font-size: 18px; color: #e3d9de; }
.page-content > * { margin-block: 0 22px; }
.page-content h2, .page-content h3 { color: var(--text); line-height: 1.35; margin-top: 40px; }
.page-content a { color: var(--o); text-decoration: underline; text-underline-offset: 4px; }
.page-content img { border-radius: 18px; height: auto; }
.page-content .wp-block-cover, .page-content .wp-block-group.has-background { border-radius: 24px; overflow: hidden; }
.page-content .wp-block-cover__inner-container { color: #fff; }
.page-content .alignfull, .page-content .alignwide { margin-inline: 0; max-width: 100%; }
.post-card { padding: 26px; margin-bottom: 16px; }
.post-card h2 { margin: 0 0 8px; font-size: 22px; }
.post-card a { color: var(--text); text-decoration: none; }