/* ============================================================
   NOQTA — نقطة  ·  Portfolio of Saeed Amani
   Design system: dot-motif brand, light/dark, AR/EN (RTL/LTR)
   ============================================================ */

/* Palette: "ذهب على لازورد" — gold dot on lapis night, manuscript paper in light.
   In Arabic calligraphy the dot (نقطة) is the unit that measures every letter;
   gold on lapis is the language of illuminated manuscripts. */
:root{
  --accent:#f23000;         /* noqta vermilion (Domestika-clean) */
  --accent2:#ff7a45;
  --on-accent:#ffffff;
  --radius:18px;
  --font-en:'Sora',system-ui,sans-serif;
  --font-ar:'Cairo','Sora',system-ui,sans-serif;

  --bg:#fafaf9;
  --bg2:#ffffff;
  --card:#ffffff;
  --text:#17181a;
  --muted:#6b6e73;
  --line:rgba(23,24,26,.09);
  --shadow:0 10px 40px -12px rgba(23,24,26,.14);
  --nav-bg:rgba(250,250,249,.85);
  --chip:#f2f1ef;
  --code:#f5f4f2;
  --hero-dot:rgba(23,24,26,.25);
  --cta:#17181a;            /* product CTA: ink, not a wall of orange */
  --cta-on:#ffffff;
  --cta-hover:#2b2d31;
}
[data-theme="dark"]{
  --accent:#ff4a26;         /* vermilion for dark */
  --accent2:#ff8a5c;
  --on-accent:#ffffff;
  --bg:#101214;
  --bg2:#16181b;
  --card:#1b1e22;
  --text:#f4f3f1;
  --muted:#9aa0a6;
  --line:rgba(244,243,241,.09);
  --shadow:0 12px 44px -14px rgba(4,5,7,.65);
  --nav-bg:rgba(16,18,20,.8);
  --chip:#22262b;
  --code:#1f2328;
  --hero-dot:rgba(244,243,241,.3);
  --cta:#f4f3f1;
  --cta-on:#101214;
  --cta-hover:#ffffff;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html[lang="ar"] body{font-family:var(--font-ar)}
body{
  font-family:var(--font-en);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .35s ease,color .35s ease;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--accent);color:var(--on-accent)}

.container{width:min(1160px,92%);margin-inline:auto}
section[id],div[id="home"]{scroll-margin-top:92px}
body.with-ann section[id]{scroll-margin-top:138px}

/* ---------- Preloader — the dot becomes the word ---------- */
#preloader{
  position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:var(--bg);
  transition:opacity .6s ease,visibility .6s;
}
#preloader.hide{opacity:0;visibility:hidden}
.pre-stage{display:flex;flex-direction:column;align-items:center;gap:30px}
.pre-dot{
  width:26px;height:26px;border-radius:50%;position:relative;
  background:radial-gradient(circle at 35% 30%, #ff7a45, #f23000 75%);
  animation:pdDrop .72s cubic-bezier(.34,1.56,.64,1) both, pdMelt .5s ease 1.28s forwards;
}
.pre-dot::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:2px solid var(--accent);opacity:0;
  animation:pdRing .8s ease .6s;
}
@keyframes pdDrop{
  from{transform:translateY(-80px) scale(.5);opacity:0}
  62%{transform:translateY(7px) scale(1.12,.86);opacity:1}
  82%{transform:translateY(-3px) scale(.96,1.05)}
  to{transform:none;opacity:1}
}
@keyframes pdRing{from{opacity:.85;transform:scale(.5)}to{opacity:0;transform:scale(2.6)}}
@keyframes pdMelt{to{opacity:0;transform:scale(.25)}}
.pre-word{width:min(250px,62vw);height:auto;color:var(--text);overflow:visible}
.pw-letters path{
  opacity:0;transform:translateY(16px);
  transform-box:fill-box;transform-origin:center;
  animation:plIn .6s cubic-bezier(.2,.7,.3,1) forwards;
}
.pw-letters path:nth-child(1){animation-delay:.92s}
.pw-letters path:nth-child(2){animation-delay:1.04s}
.pw-letters path:nth-child(3){animation-delay:1.16s}
@keyframes plIn{to{opacity:1;transform:translateY(0)}}
.pw-dots circle{
  opacity:0;transform:scale(0);
  transform-box:fill-box;transform-origin:center;
  animation:pdPop .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
.pw-dots circle:nth-child(1){animation-delay:1.3s}
.pw-dots circle:nth-child(2){animation-delay:1.39s}
.pw-dots circle:nth-child(3){animation-delay:1.48s}
.pw-dots circle:nth-child(4){animation-delay:1.57s}
.pw-dots circle:nth-child(5){animation-delay:1.66s}
@keyframes pdPop{60%{opacity:1;transform:scale(1.35)}to{opacity:1;transform:scale(1)}}
[data-noanim] #preloader *{animation-duration:.01s!important;animation-delay:0s!important}
@media (prefers-reduced-motion:reduce){#preloader *{animation-duration:.01s!important;animation-delay:0s!important}}

/* ---------- Announcement bar ---------- */
.ann-bar{
  position:fixed;top:0;inset-inline:0;z-index:930;height:46px;
  display:flex;align-items:center;justify-content:center;gap:14px;padding-inline:14px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));color:var(--on-accent);
  font-weight:700;font-size:.88rem;box-shadow:0 6px 24px -8px var(--accent);
}
.ann-kind{
  display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:999px;
  background:rgba(0,0,0,.22);font-size:.72rem;font-weight:800;letter-spacing:.05em;
  white-space:nowrap;
}
.ann-kind .blink{width:7px;height:7px;border-radius:50%;background:var(--on-accent);animation:logoPulse 1.2s infinite}
.ann-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ann-cta{
  flex:none;padding:6px 16px;border-radius:999px;background:rgba(15,15,8,.82);color:var(--accent2);
  font-weight:800;font-size:.8rem;transition:transform .2s;white-space:nowrap;
}
.ann-cta:hover{transform:scale(1.06)}
.ann-close{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.22);color:var(--on-accent);font-size:.85rem}
.ann-close:hover{background:rgba(0,0,0,.4)}
body.with-ann header.site-header{top:46px}
body.with-ann .hero{padding-top:112px}
@media (max-width:640px){
  .ann-bar{font-size:.74rem;gap:8px}
  .ann-kind{display:none}
  /* two short lines instead of one clipped line — the bar keeps its 46px height */
  .ann-title{white-space:normal;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-align:start}
}

/* ---------- Header / nav ---------- */
header.site-header{
  position:fixed;top:0;inset-inline:0;z-index:900;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  background:var(--nav-bg);border-bottom:1px solid var(--line);
  transition:background .35s;
}
.nav{display:flex;align-items:center;gap:20px;height:66px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.3rem;letter-spacing:.06em}
.logo .mark{width:27px;height:27px;color:var(--text);flex:none}
.logo .mark-dot{
  transform-box:fill-box;transform-origin:center;
  animation:logoPulse 2.4s ease infinite;
}
.logo .dot{
  width:10px;height:10px;border-radius:50%;background:var(--accent);
  margin-inline-start:4px;animation:logoPulse 2.4s ease infinite;
}
@keyframes logoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.55)}}
.nav-links{display:flex;gap:2px;margin-inline-start:auto;flex-wrap:nowrap;min-width:0}
.nav-links a{
  padding:8px 12px;border-radius:999px;font-size:.9rem;font-weight:600;color:var(--muted);
  white-space:nowrap;transition:color .2s,background .2s;
}
@media (max-width:1140px){.nav-links a{padding:8px 9px;font-size:.85rem}}
@media (max-width:1000px){.nav-links{display:none}.menu-btn{display:grid}}
.nav-links a:hover,.nav-links a.active{color:var(--text);background:var(--chip)}
.nav-actions{display:flex;align-items:center;gap:8px}
.icon-btn{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--chip);color:var(--text);transition:transform .2s,background .2s;
  border:1px solid var(--line);
}
.icon-btn:hover{transform:translateY(-2px)}
.icon-btn svg{width:19px;height:19px}
.lang-btn{width:auto;padding-inline:13px;font-weight:700;font-size:.86rem;letter-spacing:.02em}

/* ---------- Mobile drawer menu ---------- */
.menu-btn{display:none}
.drawer-backdrop{
  position:fixed;inset:0;z-index:945;background:rgba(4,7,18,.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.drawer-backdrop.open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(320px,84vw);
  background:var(--bg2);border-inline-start:1px solid var(--line);
  padding:24px 20px calc(24px + env(safe-area-inset-bottom));
  transform:translateX(100%);transition:transform .38s cubic-bezier(.2,.7,.3,1);
  display:flex;flex-direction:column;gap:5px;overflow-y:auto;
}
[dir="rtl"] .drawer{transform:translateX(-100%)}
.drawer-backdrop.open .drawer{transform:none}
.d-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.d-head .logo{font-size:1.15rem}
.d-close{width:36px;height:36px;border-radius:11px;background:var(--chip);display:grid;place-items:center}
.d-link{
  display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:13px;
  font-weight:700;font-size:.98rem;color:var(--muted);transition:background .2s,color .2s;
}
.d-link svg{width:20px;height:20px}
.d-link.active,.d-link:hover{background:var(--chip);color:var(--text)}
.d-link.active{color:var(--accent)}
.d-foot{
  margin-top:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  padding-top:18px;border-top:1px solid var(--line);
}
@media (max-width:820px){.menu-btn{display:grid}}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:92vh;display:flex;align-items:center;
  padding-top:66px;overflow:hidden;
}
#dots-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-inner{position:relative;z-index:2;padding-block:70px}
.hero-kicker{
  display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:999px;
  background:var(--chip);border:1px solid var(--line);font-weight:600;font-size:.88rem;color:var(--muted);
}
.hero-kicker .pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:logoPulse 1.8s infinite}
.hero h1{
  font-size:clamp(2.5rem,6.4vw,4.6rem);font-weight:800;line-height:1.12;
  margin-block:22px 18px;letter-spacing:-.015em;
}
.hero h1 .accent{color:var(--accent)}
.hero p.lead{max-width:600px;color:var(--muted);font-size:1.12rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;
  font-weight:700;font-size:.98rem;transition:transform .2s,box-shadow .2s,background .2s;
}
.btn:hover{transform:translateY(-3px)}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 10px 28px -10px var(--accent)}
.btn-ghost{background:var(--chip);border:1px solid var(--line)}
.hero-stats{display:flex;flex-wrap:wrap;gap:34px;margin-top:56px}
.stat b{font-size:1.7rem;font-weight:800;display:block;letter-spacing:-.02em}
.stat b i{color:var(--accent);font-style:normal}
.stat span{color:var(--muted);font-size:.9rem}

/* ---------- Sections ---------- */
section.block{padding-block:90px}
/* full-page views (courses …) — hash routed */
body.paged .hero,
body.paged section.block:not(#page-view),
body.paged footer.site-footer{display:none!important}
body.paged #page-view{display:block!important;padding-top:120px;min-height:92vh}
.page-back{
  display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:.92rem;
  color:var(--muted);margin-bottom:22px;padding:9px 18px;border-radius:999px;
  background:var(--chip);border:1px solid var(--line);transition:color .2s,transform .2s;
}
.page-back:hover{color:var(--text);transform:translateX(0) translateY(-2px)}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:42px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800;letter-spacing:-.015em}
.sec-head h2::after{content:"";display:inline-block;width:.35em;height:.35em;border-radius:50%;background:var(--accent);margin-inline-start:.18em}
.sec-head p{color:var(--muted);max-width:520px}

/* ---------- Filter chips ---------- */
/* ---------- work toolbar: built for a catalogue that keeps growing ----------
   chips wrap on a wide screen and turn into one swipeable row on a phone,
   so twenty categories never push the grid off the fold */
.chips-wrap{position:relative}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip-n{
  display:inline-block;margin-inline-start:8px;padding:1px 8px;border-radius:999px;
  background:rgba(23,24,26,.08);font-size:.72rem;font-weight:800;line-height:1.6;
}
[data-theme="dark"] .chip-n{background:rgba(244,243,241,.12)}
.chip.active .chip-n{background:rgba(255,255,255,.25)}

.work-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:22px 0 26px;
}
.work-search-box{
  position:relative;display:flex;align-items:center;flex:1;min-width:220px;
}
.ws-ic{
  position:absolute;inset-inline-start:14px;display:flex;color:var(--muted);
  pointer-events:none;
}
.ws-ic svg{width:18px;height:18px}
.work-search{
  width:100%;height:46px;border-radius:13px;
  padding-inline-start:44px;padding-inline-end:14px;
  background:var(--card);border:1px solid var(--line);color:var(--text);
  font-family:inherit;font-size:.92rem;
  transition:border-color .18s,box-shadow .18s;
}
.work-search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
.work-search::-webkit-search-cancel-button{cursor:pointer}
.work-sort{
  height:46px;border-radius:13px;padding:0 14px;
  background:var(--card);border:1px solid var(--line);color:var(--text);
  font-family:inherit;font-weight:700;font-size:.88rem;cursor:pointer;
}
.work-sort:focus{outline:none;border-color:var(--accent)}
.work-count{font-size:.85rem;color:var(--muted);font-weight:700;white-space:nowrap}
.work-empty{
  grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:56px 20px;color:var(--muted);text-align:center;
}
.work-more{display:flex;justify-content:center;margin-top:32px}
.work-more-btn{padding:13px 30px}

@media (max-width:720px){
  /* one swipeable row instead of a wall of wrapped chips */
  .chips{
    flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    padding-bottom:4px;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;scroll-snap-align:center}
  .chips-wrap::after{
    content:'';position:absolute;top:0;bottom:4px;inset-inline-start:0;width:34px;
    background:linear-gradient(to var(--fade-dir,right),var(--bg),transparent);
    pointer-events:none;
  }
  .work-bar{gap:10px}
  .work-search-box{flex:1 1 100%}
  .work-sort{flex:1}
  .work-count{flex:0 0 auto}
}
html[dir="rtl"] .chips-wrap::after{--fade-dir:left}
.chip{
  padding:9px 18px;border-radius:999px;background:var(--chip);border:1px solid var(--line);
  font-weight:600;font-size:.9rem;color:var(--muted);transition:all .2s;
}
.chip.active,.chip:hover{background:var(--accent);color:var(--on-accent);border-color:transparent}

/* ---------- Cards grid ---------- */
/* two cards per row on a phone keeps a long catalogue scannable */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
@media (max-width:720px){
  .grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .card-body{padding:14px}
  .card-body h3{font-size:.95rem}
  .card-body p{font-size:.82rem;-webkit-line-clamp:2}
  .cta-main{height:44px;font-size:.84rem;padding:0 12px}
  .cta-where{display:none}
  .cta-icon{width:40px;height:40px}
  .price-ribbon{font-size:.8rem;padding:5px 11px}
  .badge{font-size:.72rem}
}
@media (max-width:420px){ .grid{grid-template-columns:1fr} }
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s;
}
.card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.card-media{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,var(--chip),var(--bg2));overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card-media img{transform:scale(1.05)}
.card-media .ph{
  position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);
}
.card-media .ph .dot-ph{width:34px;height:34px;border-radius:50%;background:var(--accent);opacity:.25}
.badge{
  position:absolute;top:12px;inset-inline-start:12px;z-index:2;
  padding:5px 13px;border-radius:999px;font-size:.74rem;font-weight:700;letter-spacing:.04em;
  background:rgba(13,14,18,.72);color:#fff;backdrop-filter:blur(8px);
  display:inline-flex;align-items:center;gap:6px;
}
.badge svg{width:13px;height:13px}
.card-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-body h3{font-size:1.12rem;font-weight:700;line-height:1.35}
.card-body p{color:var(--muted);font-size:.93rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--muted)}
.price-tag{font-weight:800;color:var(--accent);font-size:.95rem}
.card-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:auto;padding-top:8px}
.store-btn{
  display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:12px;
  background:var(--chip);border:1px solid var(--line);font-weight:700;font-size:.83rem;
  transition:transform .2s,background .2s,color .2s;
}
.store-btn:hover{transform:translateY(-2px)}
.store-btn img,.store-btn svg{width:17px;height:17px;object-fit:contain}
.store-btn.cgtrader:hover{background:#19bcc9;color:#fff}
.store-btn.turbosquid:hover{background:#ff8135;color:#fff}
.store-btn.gumroad:hover{background:#ff90e8;color:#111}
.store-btn.superhive:hover{background:#5a4fff;color:#fff}
.store-btn.fab:hover{background:#111;color:#fff}
.store-btn.youtube:hover{background:#ff0000;color:#fff}
.store-btn.instagram:hover{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff}
.store-btn.paypal:hover{background:#0070ba;color:#fff}

/* ---------- product card CTA ----------
   the primary button is always full width so every card matches, and the
   secondary links sit on their own row underneath */
.card-cta{
  display:grid;gap:10px;margin-top:auto;padding-top:14px;
  grid-template-columns:1fr;
}
.cta-main{
  position:relative;
  width:100%;min-width:0;display:flex;justify-content:center;gap:8px;
  height:48px;padding:0 18px;border-radius:13px;
  align-items:center;
  background:var(--cta);color:var(--cta-on);font-weight:800;font-size:.92rem;
  border:1px solid transparent;
  transition:transform .18s,background .18s,box-shadow .18s;
}
.cta-main::before{
  content:'';position:absolute;inset-inline-start:0;top:22%;bottom:22%;
  width:3px;border-radius:3px;background:var(--accent);
  opacity:0;transition:opacity .18s;
}
.cta-main:hover{transform:translateY(-2px);background:var(--cta-hover);box-shadow:var(--shadow)}
.cta-main:hover::before{opacity:1}
.cta-where{font-weight:600;font-size:.78rem;opacity:.62;white-space:nowrap}
.cta-more{display:flex;gap:8px;flex-wrap:wrap}
.cta-icon{
  width:44px;height:44px;border-radius:13px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--chip);border:1px solid var(--line);color:var(--fg);
  transition:transform .18s,background .18s,border-color .18s;
}
.cta-icon:hover{transform:translateY(-2px);border-color:var(--accent)}
.cta-icon svg{width:18px;height:18px;fill:currentColor}
.cta-icon img{width:18px;height:18px;object-fit:contain}
.cta-icon.cta-detail{cursor:pointer}
.cta-icon.cta-detail svg{fill:none;stroke:currentColor}
html[dir="rtl"] .cta-icon.cta-detail svg{transform:scaleX(-1)}

/* ---------- Addon marketplace cards (Superhive / Blender Market style) ---------- */
.card.addon-card .card-media{aspect-ratio:16/10}
.price-ribbon{
  position:absolute;top:12px;inset-inline-end:12px;z-index:2;
  padding:6px 14px;border-radius:10px;font-weight:800;font-size:.92rem;
  background:#fff;color:#141517;box-shadow:0 6px 20px -6px rgba(0,0,0,.45);
}
/* each price kind gets its own colour so it reads before the text does */
.price-ribbon.free{background:#27ae60;color:#fff}
.price-ribbon.pwyw{background:linear-gradient(135deg,#7c5cff,#a855f7);color:#fff}
.price-ribbon.paid{background:#fff;color:#141517}
[data-theme="dark"] .price-ribbon.paid{background:#f4f3f1;color:#101214}
.addon-title-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ver-chip{
  font-size:.68rem;font-weight:800;padding:2px 9px;border-radius:999px;
  background:var(--chip);color:var(--muted);letter-spacing:.02em;
}
.rating-row{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted)}
.stars{display:inline-flex;gap:1px;color:#f5a623}
.stars svg{width:14px;height:14px;fill:currentColor}
.stars svg.off{fill:var(--chip);stroke:var(--muted);stroke-width:1}
.compat-chip{
  display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;
  padding:3px 10px;border-radius:999px;background:rgba(56,189,248,.13);color:#38bdf8;
}
.market-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:12px 18px;border-radius:13px;font-weight:800;font-size:.92rem;color:#fff;
  transition:transform .2s,filter .2s;
}
.market-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.market-btn img,.market-btn svg{width:19px;height:19px;object-fit:contain}
.market-btn.superhive{background:#5a4fff}
.market-btn.gumroad{background:#ff90e8;color:#111}
.market-btn.cgtrader{background:#19bcc9}
.market-btn.turbosquid{background:#ff8135}
.market-btn.fab{background:#1b1b22}
.market-btn.paypal{background:#0070ba}
.market-btn.youtube{background:var(--chip);color:var(--text);border:1px solid var(--line)}

/* ---------- Films — Netflix-style ---------- */
.films-block{
  --f-bg:#0a0b10;--f-text:#f4f4f6;--f-muted:#9aa0ab;
  background:var(--f-bg);color:var(--f-text);overflow:hidden;
}
.films-block .sec-head h2{color:var(--f-text)}
.billboard{
  position:relative;border-radius:calc(var(--radius) + 6px);overflow:hidden;
  aspect-ratio:21/9;display:flex;align-items:flex-end;margin-bottom:44px;
  background:#14161d;
}
.billboard .bb-bg{position:absolute;inset:0}
.billboard .bb-bg img{width:100%;height:100%;object-fit:cover}
.billboard .bb-grad{
  position:absolute;inset:0;
  background:linear-gradient(12deg,rgba(10,11,16,.96) 12%,rgba(10,11,16,.35) 55%,transparent 90%),
             linear-gradient(90deg,rgba(10,11,16,.8),transparent 60%);
}
[dir="rtl"] .billboard .bb-grad{
  background:linear-gradient(12deg,rgba(10,11,16,.96) 12%,rgba(10,11,16,.35) 55%,transparent 90%),
             linear-gradient(270deg,rgba(10,11,16,.8),transparent 60%);
}
.bb-content{position:relative;z-index:2;padding:clamp(22px,4.5vw,54px);max-width:620px}
.bb-tag{
  display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:800;
  letter-spacing:.14em;color:var(--accent);margin-bottom:12px;text-transform:uppercase;
}
.bb-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.bb-content h3{font-size:clamp(1.6rem,4.4vw,3.2rem);font-weight:800;line-height:1.12;margin-bottom:12px;color:#fff}
.bb-content p{color:var(--f-muted);font-size:1rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bb-actions{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.bb-play{
  display:inline-flex;align-items:center;gap:10px;padding:13px 30px;border-radius:11px;
  background:#fff;color:#0a0b10;font-weight:800;font-size:1rem;transition:transform .2s;
}
.bb-play:hover{transform:scale(1.05)}
.bb-play svg{width:20px;height:20px;fill:#0a0b10}
.bb-sec{
  display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:11px;
  background:rgba(255,255,255,.14);color:#fff;font-weight:700;backdrop-filter:blur(8px);
  transition:background .2s;
}
.bb-sec:hover{background:rgba(255,255,255,.25)}
.bb-sec svg{width:18px;height:18px}
.film-row-wrap{position:relative}
.film-row-title{font-weight:800;font-size:1.05rem;margin-bottom:16px;color:var(--f-text);display:flex;align-items:center;gap:9px}
.film-row-title::before{content:"";width:4px;height:19px;border-radius:3px;background:var(--accent)}
.film-row{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:14px;scrollbar-width:none;
}
.film-row::-webkit-scrollbar{display:none}
.film-card{
  flex:0 0 min(300px,72vw);scroll-snap-align:start;position:relative;
  aspect-ratio:16/9;border-radius:12px;overflow:hidden;cursor:pointer;background:#14161d;
  transition:transform .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s;
}
.film-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.film-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(5,6,10,.92));
}
.film-card:hover{transform:scale(1.06);box-shadow:0 18px 50px -12px rgba(0,0,0,.8);z-index:3}
.film-card:hover img{transform:scale(1.08)}
.fc-info{position:absolute;bottom:0;inset-inline:0;padding:14px 16px;z-index:2}
.fc-info b{color:#fff;font-size:.95rem;display:block;line-height:1.3}
.fc-info span{color:#9aa0ab;font-size:.74rem}
.fc-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.7);z-index:2;
  width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);
  display:grid;place-items:center;opacity:0;transition:all .28s;
}
.fc-play svg{width:20px;height:20px;fill:#0a0b10;margin-inline-start:2px}
.film-card:hover .fc-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.row-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:42px;height:42px;border-radius:50%;background:rgba(10,11,16,.8);color:#fff;
  border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;font-size:1.1rem;
  backdrop-filter:blur(6px);transition:background .2s;
}
.row-arrow:hover{background:var(--accent)}
.row-arrow.prev{inset-inline-start:-8px}
.row-arrow.next{inset-inline-end:-8px}
@media (max-width:820px){.row-arrow{display:none}.billboard{aspect-ratio:4/5}}

/* cinema player */
.cinema-backdrop{
  position:fixed;inset:0;z-index:980;background:rgba(0,0,0,.94);
  display:none;align-items:center;justify-content:center;padding:4vh 3vw;
}
.cinema-backdrop.open{display:flex;animation:fadeIn .3s}
.cinema{
  width:min(1100px,100%);aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:#000;box-shadow:0 30px 90px -20px rgba(0,0,0,.9);position:relative;
}
.cinema iframe{width:100%;height:100%;border:0}
.cinema-close{
  position:absolute;top:-2px;inset-inline-end:0;transform:translateY(-115%);
  width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  display:grid;place-items:center;font-size:1.15rem;backdrop-filter:blur(8px);
}
.cinema-close:hover{background:var(--accent)}
.cinema-wrap{position:relative;width:min(1100px,100%)}

/* ---------- YouTube lite embed ---------- */
.yt-lite{
  position:absolute;inset:0;cursor:pointer;background-size:cover;background-position:center;
}
.yt-lite::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.45));
}
.yt-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:64px;height:46px;border-radius:14px;background:rgba(255,0,0,.92);
  display:grid;place-items:center;transition:transform .2s;
}
.yt-lite:hover .yt-play{transform:translate(-50%,-50%) scale(1.12)}
.yt-play svg{width:22px;height:22px;fill:#fff}
.card-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Slider (featured) ---------- */
.slider{position:relative;overflow:hidden;border-radius:calc(var(--radius) + 6px)}
.slider-track{display:flex;transition:transform .65s cubic-bezier(.6,.05,.25,1)}
.slide{
  min-width:100%;position:relative;aspect-ratio:21/9;background:var(--card);
  display:flex;align-items:flex-end;overflow:hidden;
}
.slide .slide-bg{position:absolute;inset:0}
.slide .slide-bg img{width:100%;height:100%;object-fit:cover}
.slide .slide-bg .grad{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(8,8,12,.92) 0%,rgba(8,8,12,.55) 42%,transparent 78%),
    linear-gradient(to right,rgba(8,8,12,.88) 0%,rgba(8,8,12,.35) 46%,transparent 72%);
}
html[dir="rtl"] .slide .slide-bg .grad{
  background:
    linear-gradient(to top,rgba(8,8,12,.92) 0%,rgba(8,8,12,.55) 42%,transparent 78%),
    linear-gradient(to left,rgba(8,8,12,.88) 0%,rgba(8,8,12,.35) 46%,transparent 72%);
}
.slide-content{position:relative;z-index:2;padding:clamp(20px,4vw,48px);color:#fff;max-width:640px}
.slide-content .badge{position:static;margin-bottom:14px}
.slide-content h3{font-size:clamp(1.3rem,3vw,2rem);font-weight:800;margin-bottom:8px}
.slide-content p{opacity:.85;font-size:.98rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* CTA sitting on the dark slide: accent button + glass icon chips */
.slide-content .card-cta{margin-top:20px;padding-top:0;justify-content:flex-start}
.slide-content .cta-main{flex:0 0 auto;min-width:190px;background:#fff;color:#101214}
.slide-content .cta-main:hover{background:#fff;transform:translateY(-2px)}
.slide-content .cta-icon{
  background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.26);color:#fff;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.slide-content .cta-icon:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.45)}
.slide-content .card-actions{margin-top:18px}
.slide-content .store-btn{
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.26);
  color:#fff;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.slide-content .store-btn svg{width:18px;height:18px;fill:currentColor}
.slide-content .store-btn img{
  width:18px;height:18px;
  filter:brightness(0) invert(1);
  opacity:.96;
}
.slide-content .store-btn:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.4)}
.slide-content .badge{background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);color:#fff}
.slide-content h3{text-shadow:0 2px 18px rgba(0,0,0,.55)}
.slide-content p{text-shadow:0 1px 12px rgba(0,0,0,.5)}
.slider-nav{position:absolute;bottom:18px;inset-inline-end:22px;display:flex;gap:8px;z-index:3}
.slider-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4);transition:all .3s}
.slider-dot.active{background:var(--accent);width:26px;border-radius:999px}

/* ---------- Skills — animated marquee ---------- */
.skills-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.skills-marquee{
  display:flex;flex-direction:column;gap:16px;overflow:hidden;padding-block:8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.sk-row{display:flex;gap:16px;width:max-content;animation:skScroll linear infinite;will-change:transform}
.sk-row.reverse{animation-direction:reverse}
.sk-row:hover{animation-play-state:paused}
@keyframes skScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[dir="rtl"] .sk-row{animation-name:skScrollR}
@keyframes skScrollR{from{transform:translateX(0)}to{transform:translateX(50%)}}
.skill{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 16px;text-align:center;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s;
}
.sk-row .skill{flex:none;width:158px}
.skill:hover{
  transform:translateY(-7px) scale(1.04);
  box-shadow:0 18px 44px -14px rgba(242,48,0,.3);
  border-color:var(--accent);
}
.skill .sk-icon{
  width:56px;height:56px;margin:0 auto 12px;display:grid;place-items:center;
  animation:skFloat 3.6s ease-in-out infinite;
  transition:transform .3s;
}
.sk-row .skill:nth-child(2n) .sk-icon{animation-delay:-1.2s}
.sk-row .skill:nth-child(3n) .sk-icon{animation-delay:-2.4s}
.sk-row .skill:nth-child(5n) .sk-icon{animation-delay:-.7s}
@keyframes skFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.skill:hover .sk-icon{animation-play-state:paused;transform:scale(1.15) rotate(-5deg)}
.skill .sk-icon svg,.skill .sk-icon img{width:52px;height:52px;border-radius:13px}
.skill b{font-size:.92rem;font-weight:700;display:block}
.skill span{font-size:.76rem;color:var(--muted)}
[data-noanim] .sk-row,[data-noanim] .skill .sk-icon{animation:none}
@media (prefers-reduced-motion:reduce){.sk-row,.skill .sk-icon{animation:none}}

/* ---------- Projects / milestones ---------- */
.project{
  background:var(--card);border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);
  padding:clamp(22px,3.5vw,40px);margin-bottom:30px;
}
.project-head{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-bottom:8px}
.project-head h3{font-size:1.35rem;font-weight:800}
.status-pill{padding:6px 16px;border-radius:999px;font-size:.8rem;font-weight:700}
.status-active{background:rgba(242,48,0,.11);color:var(--accent)}
.status-done{background:rgba(46,204,113,.14);color:#27ae60}
.status-paused{background:rgba(150,150,150,.16);color:var(--muted)}
.project > p{color:var(--muted);max-width:720px}
.progress-row{display:flex;align-items:center;gap:14px;margin-block:22px}
.progress-bar{flex:1;height:9px;border-radius:999px;background:var(--chip);overflow:hidden}
.progress-fill{
  height:100%;border-radius:999px;width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width 1.2s cubic-bezier(.2,.7,.3,1);
}
.progress-row b{font-size:.9rem;color:var(--accent);min-width:44px;text-align:end}
.timeline{position:relative;margin-top:10px;padding-inline-start:30px}
.timeline::before{
  content:"";position:absolute;top:6px;bottom:6px;inset-inline-start:9px;width:2px;
  background:var(--line);border-radius:2px;
}
.ms{position:relative;padding-block:13px;padding-inline-start:14px}
.ms::before{
  content:"";position:absolute;inset-inline-start:-27px;top:20px;width:14px;height:14px;border-radius:50%;
  background:var(--bg2);border:3px solid var(--muted);transition:all .3s;
}
.ms.done::before{background:var(--accent);border-color:var(--accent)}
.ms.active::before{border-color:var(--accent);animation:msPulse 1.6s infinite}
@keyframes msPulse{0%,100%{box-shadow:0 0 0 0 rgba(242,48,0,.35)}50%{box-shadow:0 0 0 8px rgba(242,48,0,0)}}
.ms-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ms-head b{font-weight:700}
.ms-head time{font-size:.78rem;color:var(--muted)}
.ms-tag{font-size:.7rem;font-weight:800;letter-spacing:.05em;padding:3px 10px;border-radius:999px}
.ms.done .ms-tag{background:rgba(46,204,113,.14);color:#27ae60}
.ms.active .ms-tag{background:rgba(242,48,0,.11);color:var(--accent)}
.ms.todo .ms-tag{background:var(--chip);color:var(--muted)}
.ms p{color:var(--muted);font-size:.88rem;margin-top:3px}

/* ---------- Project explorer (Blender Studio style) ---------- */
.project-cover{border-radius:14px;overflow:hidden;aspect-ratio:21/8;margin-bottom:20px;background:var(--chip)}
.project-cover img{width:100%;height:100%;object-fit:cover}
.next-ms{
  display:flex;align-items:center;gap:10px;margin-top:6px;font-size:.9rem;color:var(--muted);
}
.next-ms b{color:var(--text)}
.next-ms .dot-now{width:9px;height:9px;border-radius:50%;background:var(--accent);animation:logoPulse 1.6s infinite}
.folders{margin-top:30px;display:flex;flex-direction:column;gap:28px}
.folder-head{display:flex;align-items:center;gap:10px;font-weight:800;margin-bottom:13px}
.folder-head svg{width:19px;height:19px;color:var(--accent)}
.folder-head .count{
  font-size:.7rem;font-weight:800;color:var(--muted);background:var(--chip);
  padding:2px 11px;border-radius:999px;
}
.folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.media-tile{
  position:relative;aspect-ratio:16/10;border-radius:11px;overflow:hidden;cursor:pointer;
  background:var(--chip);border:1px solid var(--line);
}
.media-tile img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.media-tile:hover img{transform:scale(1.07)}
.media-tile .mt-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.6);display:grid;place-items:center;
}
.media-tile .mt-play svg{width:15px;height:15px;fill:#fff;margin-inline-start:2px}
.media-tile .cap{
  position:absolute;bottom:0;inset-inline:0;padding:16px 10px 7px;font-size:.7rem;font-weight:700;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.75));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cinema img.lightbox-img{width:100%;height:100%;object-fit:contain}

/* ---------- Course player (Teachable-style) ---------- */
.course{display:grid;grid-template-columns:1fr 320px;gap:22px;margin-top:18px}
.course-main{min-width:0}
.course-video{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}
.course-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lesson-title{font-size:1.25rem;font-weight:800;margin:16px 0 6px}
.lesson-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:.82rem}
.lesson-nav{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.curriculum{
  border:1px solid var(--line);border-radius:16px;background:var(--card);
  overflow:hidden;align-self:start;max-height:70vh;overflow-y:auto;
}
.curriculum-head{
  padding:16px 18px;border-bottom:1px solid var(--line);font-weight:800;font-size:.95rem;
  position:sticky;top:0;background:var(--card);z-index:2;
}
.curriculum-head span{display:block;font-weight:600;font-size:.76rem;color:var(--muted);margin-top:2px}
.sec-title{
  padding:11px 18px;font-size:.76rem;font-weight:800;letter-spacing:.06em;color:var(--muted);
  background:var(--chip);text-transform:uppercase;
}
.lesson-row{
  display:flex;align-items:center;gap:11px;width:100%;text-align:start;
  padding:12px 18px;border-bottom:1px solid var(--line);transition:background .18s;
}
.lesson-row:hover{background:var(--chip)}
.lesson-row.active{background:var(--chip)}
.lesson-row.active .l-name{color:var(--accent)}
.l-num{
  width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:.7rem;font-weight:800;background:var(--chip);color:var(--muted);
  border:1px solid var(--line);
}
.lesson-row.active .l-num{background:var(--accent);color:var(--on-accent);border-color:transparent}
.lesson-row.done .l-num{background:rgba(39,174,96,.16);color:#27ae60;border-color:transparent}
.l-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.l-name{font-size:.88rem;font-weight:700;line-height:1.35;display:block}
.l-dur{font-size:.72rem;color:var(--muted);display:block;font-variant-numeric:tabular-nums}
.l-lock{width:15px;height:15px;color:var(--muted);flex:none}
.lesson-row.locked{opacity:.6;cursor:not-allowed}
.course-progress{padding:14px 18px;border-bottom:1px solid var(--line)}
@media (max-width:900px){
  .course{grid-template-columns:1fr}
  .curriculum{max-height:none;order:2}
}

/* ---------- Tutorials ---------- */
.tut-meta{display:flex;gap:8px;flex-wrap:wrap}
.tut-meta .mini{
  font-size:.72rem;font-weight:700;padding:4px 11px;border-radius:999px;
  background:var(--chip);color:var(--muted);
}
.mini.free{background:rgba(46,204,113,.14);color:#27ae60}
.mini.paid{background:rgba(242,48,0,.11);color:var(--accent)}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.about-text p{color:var(--muted);font-size:1.05rem;margin-bottom:18px}
.about-visual{position:relative;aspect-ratio:1;display:grid;place-items:center}
.orbit{
  position:absolute;border-radius:50%;border:1.5px dashed var(--line);
  animation:spin 40s linear infinite;
}
.orbit.o1{width:88%;height:88%}
.orbit.o2{width:62%;height:62%;animation-duration:28s;animation-direction:reverse}
.orbit .planet{
  position:absolute;top:-7px;left:50%;width:14px;height:14px;border-radius:50%;
  background:var(--accent2);
}
.orbit.o2 .planet{background:var(--accent)}
@keyframes spin{to{transform:rotate(360deg)}}
.about-core{
  width:38%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,var(--accent2),var(--accent) 70%);
  box-shadow:0 20px 70px -18px var(--accent);
  display:grid;place-items:center;color:var(--on-accent);font-weight:800;font-size:clamp(1rem,2.4vw,1.6rem);letter-spacing:.1em;
}

/* ---------- About full page + team ---------- */
.about-hero{display:flex;gap:34px;align-items:center;flex-wrap:wrap}
.about-avatar{
  width:158px;height:158px;border-radius:50%;flex:none;overflow:hidden;
  display:grid;place-items:center;background:var(--chip);
  border:4px solid transparent;
  background-image:linear-gradient(var(--card),var(--card)),linear-gradient(135deg,var(--accent),var(--accent2));
  background-origin:border-box;background-clip:content-box,border-box;
  box-shadow:0 18px 50px -16px rgba(242,48,0,.32);
}
.about-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.about-hero-info h1{font-size:clamp(1.7rem,4vw,2.6rem);font-weight:800}
.about-hero-info .role-line{color:var(--accent);font-weight:700;margin-bottom:10px}
.avatar-core{padding:0;overflow:hidden}
.avatar-core img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.team-title{font-size:1.5rem;font-weight:800;margin:52px 0 22px}
.team-title::after{content:"";display:inline-block;width:.32em;height:.32em;border-radius:50%;background:var(--accent);margin-inline-start:.2em}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}
.member{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 18px;text-align:center;transition:transform .3s,box-shadow .3s,border-color .3s;
}
.member:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--accent)}
.member-photo{
  width:92px;height:92px;border-radius:50%;margin:0 auto 14px;overflow:hidden;
  display:grid;place-items:center;background:var(--chip);border:3px solid var(--line);
}
.member-photo img{width:100%;height:100%;object-fit:cover}
.member b{display:block;font-size:1rem;font-weight:800}
.member span{font-size:.8rem;color:var(--muted)}
.member .small-link{font-size:.76rem;padding:6px 12px}
@media (max-width:640px){
  .about-hero{flex-direction:column;text-align:center}
  .about-hero .social-row{justify-content:center}
}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.contact-info h3{font-size:1.35rem;font-weight:800;margin-bottom:10px}
.contact-info > p{color:var(--muted);margin-bottom:26px}
.social-row{display:flex;flex-wrap:wrap;gap:10px}
.form{display:flex;flex-direction:column;gap:14px}
.form input,.form textarea{
  width:100%;padding:15px 18px;border-radius:14px;border:1px solid var(--line);
  background:var(--card);color:var(--text);font-family:inherit;font-size:.95rem;
  transition:border-color .2s,box-shadow .2s;
}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(242,48,0,.16)}
.form textarea{min-height:140px;resize:vertical}
.form-note{font-size:.8rem;color:var(--muted)}
#form-status{font-weight:700;font-size:.9rem}
#form-status.ok{color:#27ae60}
#form-status.err{color:var(--accent)}

/* ---------- Subscribe ---------- */
.sub-card{
  position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:calc(var(--radius) + 8px);padding:clamp(36px,6vw,64px);color:var(--on-accent);
}
.sub-dot{
  position:absolute;width:340px;height:340px;border-radius:50%;
  background:rgba(255,255,255,.12);top:-160px;inset-inline-end:-120px;
}
.sub-card::after{
  content:"";position:absolute;width:200px;height:200px;border-radius:50%;
  background:rgba(0,0,0,.1);bottom:-100px;inset-inline-start:-70px;
}
.sub-card h3{font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:800;position:relative;z-index:2}
.sub-card p{opacity:.92;margin-top:8px;position:relative;z-index:2;max-width:520px;margin-inline:auto}
.sub-form{
  position:relative;z-index:2;display:flex;gap:10px;max-width:480px;margin:26px auto 0;
}
.sub-form input{
  flex:1;padding:14px 18px;border-radius:999px;border:none;font-family:inherit;font-size:.95rem;
  background:rgba(255,255,255,.96);color:#141517;min-width:0;
}
.sub-form input:focus{outline:3px solid rgba(0,0,0,.2)}
.sub-form .btn{background:#141517;color:#fff;box-shadow:none}
.sub-status{position:relative;z-index:2;display:none;margin:12px auto 0;max-width:480px;padding:9px 14px;border-radius:12px;
  font-weight:700;font-size:.86rem;background:rgba(0,0,0,.22);color:#fff}
.sub-status.show{display:block;animation:subIn .35s ease both}
.sub-form.shake{animation:subShake .4s ease}
@keyframes subShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes subIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* success state: form folds away, animated check takes its place */
.sub-done{position:relative;z-index:2;max-width:480px;margin:26px auto 0;padding:26px 24px;border-radius:22px;
  background:rgba(255,255,255,.14);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.28);
  opacity:0;transform:translateY(14px) scale(.98);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.sub-done.in{opacity:1;transform:none}
.sub-check{display:block;width:72px;height:72px;margin:0 auto 12px;color:#fff}
.sub-check svg{width:100%;height:100%;overflow:visible}
.sub-check .sc-ring{stroke-dasharray:176;stroke-dashoffset:176}
.sub-check .sc-tick{stroke-dasharray:40;stroke-dashoffset:40}
.sub-done.in .sc-ring{animation:scDraw .7s .1s cubic-bezier(.4,0,.2,1) forwards}
.sub-done.in .sc-tick{animation:scDraw .45s .7s cubic-bezier(.4,0,.2,1) forwards}
.sub-done.in .sub-check{animation:scPop .5s 1.05s cubic-bezier(.34,1.56,.64,1)}
@keyframes scDraw{to{stroke-dashoffset:0}}
@keyframes scPop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.sub-done h4{font-size:1.35rem;font-weight:800;margin:0 0 6px}
.sub-done p{opacity:.92;font-size:.92rem;line-height:1.75;margin:0 auto}
.sub-again{margin-top:16px;font:inherit;font-size:.82rem;font-weight:700;color:#fff;background:rgba(0,0,0,.2);
  border:0;border-radius:999px;padding:8px 16px;cursor:pointer}
.sub-again:hover{background:rgba(0,0,0,.32)}
@media (prefers-reduced-motion:reduce){.sub-done{transition:none}.sub-check .sc-ring,.sub-check .sc-tick{stroke-dashoffset:0;animation:none}}
.wa-btn{
  position:relative;z-index:2;display:inline-flex;align-items:center;gap:10px;
  margin-top:34px;padding:13px 26px;border-radius:999px;background:#25D366;color:#fff;
  font-weight:800;font-size:.95rem;box-shadow:0 10px 30px -8px rgba(0,0,0,.35);
  transition:transform .2s;
}
.wa-btn:hover{transform:translateY(-3px)}
.wa-btn svg{width:20px;height:20px}
@media (max-width:560px){.sub-form{flex-direction:column}.sub-form .btn{justify-content:center}}

/* ---------- follow row inside the subscribe card ---------- */
.sub-sep{
  position:relative;z-index:2;display:block;height:1px;width:min(420px,72%);
  margin:36px auto 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
}
.sub-follow-lbl{
  position:relative;z-index:2;display:block;margin-top:20px;
  font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.8;
}
html[lang="ar"] .sub-follow-lbl{text-transform:none;letter-spacing:.01em;font-size:.84rem}
.follow-grid{
  position:relative;z-index:2;
  display:grid;gap:12px;margin-top:16px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  max-width:640px;margin-inline:auto;
}
.follow-card{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:16px;
  background:#fff;color:#17181a;text-align:start;
  box-shadow:0 10px 26px -18px rgba(0,0,0,.6);
  opacity:0;transform:translateY(16px);
  animation:followIn .6s cubic-bezier(.2,.8,.25,1) forwards;
  transition:transform .28s cubic-bezier(.2,.8,.25,1),box-shadow .28s;
}
.fc-mark{
  flex:0 0 auto;width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--brand) 14%,#fff);
  color:var(--brand);
  transition:background .28s,color .28s,transform .35s cubic-bezier(.2,.8,.25,1);
}
.fc-mark svg{width:19px;height:19px}
.fc-mark img{width:19px;height:19px;object-fit:contain}
.fc-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.fc-txt b{font-size:.85rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-txt i{
  font-style:normal;font-size:.76rem;color:#6b6e73;direction:ltr;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fc-go{
  margin-inline-start:auto;flex:0 0 auto;
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  color:#b6b8bc;opacity:0;transform:translateX(-6px);
  transition:opacity .28s,transform .28s,color .28s;
}
html[dir="rtl"] .fc-go svg{transform:scaleX(-1)}
.follow-card:hover{transform:translateY(-4px);box-shadow:0 20px 34px -18px rgba(0,0,0,.62)}
.follow-card:hover .fc-mark{background:var(--brand);color:#fff;transform:rotate(-6deg) scale(1.06)}
.follow-card:hover .fc-go{opacity:1;transform:translateX(0);color:var(--brand)}
.follow-card:focus-visible{outline:3px solid #fff;outline-offset:3px}
.follow-card:nth-child(1){animation-delay:.06s}
.follow-card:nth-child(2){animation-delay:.14s}
.follow-card:nth-child(3){animation-delay:.22s}
.follow-card:nth-child(4){animation-delay:.30s}
.follow-card:nth-child(5){animation-delay:.38s}
.follow-card:nth-child(6){animation-delay:.46s}
.follow-card:nth-child(n+7){animation-delay:.54s}
@keyframes followIn{
  0%{opacity:0;transform:translateY(16px)}
  100%{opacity:1;transform:translateY(0)}
}
@media (max-width:560px){
  .follow-grid{grid-template-columns:1fr 1fr;gap:10px;max-width:none}
  .follow-card{padding:11px;gap:10px;border-radius:14px}
  .fc-mark{width:34px;height:34px;border-radius:11px}
  .fc-txt b{font-size:.8rem}
  .fc-txt i{font-size:.71rem}
  .fc-go{display:none}
}
@media (max-width:360px){ .follow-grid{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  .follow-card{animation:none;opacity:1;transform:none}
}

/* ---------- Footer ---------- */
footer.site-footer{
  border-top:1px solid var(--line);padding-block:38px;color:var(--muted);font-size:.9rem;
}
.footer-inner{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}

/* ---------- Modal (tutorial / post reader) ---------- */
.modal-backdrop{
  position:fixed;inset:0;z-index:950;background:rgba(8,8,12,.62);backdrop-filter:blur(6px);
  display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:5vh 4% 6vh;
}
.modal-backdrop.open{display:flex;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--bg2);border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);
  width:min(820px,100%);padding:clamp(24px,4vw,46px);position:relative;
  animation:slideUp .35s cubic-bezier(.2,.7,.3,1);
}
@keyframes slideUp{from{transform:translateY(26px);opacity:0}to{transform:none;opacity:1}}
.modal-close{
  position:absolute;top:16px;inset-inline-end:16px;width:38px;height:38px;border-radius:11px;
  background:var(--chip);display:grid;place-items:center;font-size:1.1rem;
}
.modal h2{font-size:1.6rem;font-weight:800;margin-bottom:8px}
.modal .md{margin-top:20px}
.md h2,.md h3{margin:22px 0 8px;font-weight:800}
.md p{margin-bottom:12px;color:var(--text)}
.md img{border-radius:12px;margin-block:10px}
.md a{color:var(--accent);font-weight:600}
.md ul,.md ol{padding-inline-start:22px;margin-bottom:12px}
.md code{background:var(--code);padding:2px 7px;border-radius:6px;font-size:.88em}
.md pre{background:var(--code);padding:16px;border-radius:12px;overflow-x:auto;margin-bottom:14px}
.modal .video-wrap{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;margin-top:18px;background:#000}

/* ---------- Maintenance mode ---------- */
.mnt-screen{
  position:fixed;inset:0;z-index:1100;background:var(--bg);color:var(--text);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;text-align:center;padding:8vw 6vw;
}
.mnt-screen .pre-mark{width:112px;height:112px}
.mnt-screen h1{font-size:clamp(1.7rem,5vw,2.8rem);font-weight:800}
.mnt-screen p{color:var(--muted);max-width:520px;font-size:1.05rem}
.mnt-screen .social-row{justify-content:center;margin-top:14px}
.mnt-owner-bar{
  position:fixed;bottom:16px;inset-inline-start:50%;transform:translateX(-50%);z-index:960;
  display:flex;align-items:center;gap:10px;max-width:92vw;
  background:var(--card);border:1.5px solid var(--accent);color:var(--text);
  padding:10px 22px;border-radius:999px;font-size:.8rem;font-weight:700;box-shadow:var(--shadow);
}
.mnt-owner-bar .blink{width:9px;height:9px;border-radius:50%;background:var(--accent);animation:logoPulse 1.4s infinite;flex:none}

/* ---------- App-like motion (Instagram feel) ---------- */
@keyframes navPop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1.1)}}
body.paged #page-view > .container{animation:pageIn .38s cubic-bezier(.2,.7,.3,1)}
@keyframes pageIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media (hover:none){
  .card,.film-card,.member,.skill,.project{transition:transform .15s ease,box-shadow .3s,border-color .3s}
  .card:active,.film-card:active,.member:active,.project:active{transform:scale(.97)}
  .btn:active,.market-btn:active,.store-btn:active,.chip:active,.icon-btn:active{transform:scale(.93)}
  .lesson-row:active{background:var(--chip)}
}
[data-noanim] .bottom-nav a.active svg,[data-noanim] body.paged #page-view > .container{animation:none}
@media (prefers-reduced-motion:reduce){
  .bottom-nav a.active svg,body.paged #page-view > .container{animation:none}
}

/* ---------- Reveal animations ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
[data-noanim] .reveal{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- Mobile: app-like ---------- */
.bottom-nav{display:none}
@media (max-width:820px){
  .hero{min-height:86vh}
  .hero-stats{gap:22px}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:34px}
  .about-visual{max-width:320px;margin-inline:auto}
  .slide{aspect-ratio:4/3}
  section.block{padding-block:56px}
  #featured-wrap{padding-block:18px 6px}
  body{padding-bottom:76px}
  .bottom-nav{
    position:fixed;bottom:0;inset-inline:0;z-index:920;display:flex;
    background:var(--nav-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .bottom-nav a{
    flex:1;display:grid;place-items:center;
    padding:12px 2px;color:var(--muted);border-radius:12px;
    transition:color .2s;
  }
  .bottom-nav a svg{
    width:26px;height:26px;
    transition:transform .18s cubic-bezier(.34,1.56,.64,1);
  }
  .bottom-nav a:active svg{transform:scale(.78)}
  .bottom-nav a.active{color:var(--accent)}
  .bottom-nav a.active svg{animation:navPop .4s cubic-bezier(.34,1.56,.64,1)}
  .modal-backdrop{padding:0}
  .modal{border-radius:22px 22px 0 0;min-height:100vh;width:100%}
}
@media (max-width:480px){
  .grid{grid-template-columns:1fr}
  .skills-wrap{grid-template-columns:repeat(3,1fr)}
  .skill{padding:16px 8px}
  .skill .sk-icon{width:36px;height:36px}
  .skill .sk-icon svg{width:32px;height:32px}
}

/* RTL fine-tuning */
[dir="rtl"] .slider-track{direction:ltr}
[dir="rtl"] .slide-content{direction:rtl}
[dir="rtl"] body,[dir="rtl"] .hero h1{letter-spacing:0}

/* ---- rich content blocks (منشئ المحتوى) ---- */
.blocks{margin-top:26px;max-width:780px}
.blocks .blk-h{font-size:1.3rem;font-weight:800;margin:28px 0 10px}
.blocks .blk-p{color:var(--text);margin-bottom:14px;line-height:1.9}
.blk-img{margin:20px 0}
.blk-img img{width:100%;border-radius:14px;cursor:zoom-in;display:block;border:1px solid var(--line)}
.blk-img figcaption{font-size:.8rem;color:var(--muted);margin-top:8px;text-align:center}
.blk-video{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;margin:20px 0}
.blk-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.blk-steps{margin:20px 0}
.blk-steps h3{font-weight:800;margin-bottom:12px;font-size:1.05rem}
.blk-steps ol{list-style:none;counter-reset:st;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.blk-steps li{counter-increment:st;display:flex;gap:13px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:13px 16px;line-height:1.75}
.blk-steps li::before{content:counter(st);flex:none;width:27px;height:27px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:.82rem;display:grid;place-items:center;margin-top:1px}
.blk-note{border-inline-start:4px solid var(--accent);background:rgba(242,48,0,.06);border-radius:11px;padding:14px 18px;margin:20px 0;font-size:.94rem;line-height:1.8}
.blk-hr{border:0;border-top:1px solid var(--line);margin:26px 0}

/* uploaded custom menu icons */
#bottom-nav img.nav-img{width:24px;height:24px;object-fit:contain;display:block}
.d-link img.nav-img{width:20px;height:20px;object-fit:contain}
#nav-links img.nav-img{width:18px;height:18px;object-fit:contain;vertical-align:-3px}

/* announcement popup */
.ann-pop-overlay{
  position:fixed;inset:0;z-index:960;display:grid;place-items:center;padding:20px;
  background:rgba(10,10,12,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:apFade .3s ease;
}
@keyframes apFade{from{opacity:0}to{opacity:1}}
.ann-pop{
  position:relative;width:min(480px,100%);background:var(--card);color:var(--text);
  border:1px solid var(--line);border-radius:22px;padding:34px 30px 28px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.5);
  animation:apPop .42s cubic-bezier(.34,1.45,.64,1);
}
@keyframes apPop{from{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:none}}
.ann-pop .ap-kind{
  display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.6px;
  background:var(--accent);color:var(--on-accent);border-radius:999px;padding:4px 13px;margin-bottom:14px;
}
.ann-pop h3{font-size:1.35rem;font-weight:800;margin-bottom:10px;line-height:1.4}
.ann-pop p{color:var(--muted);font-size:.95rem;line-height:1.85;margin-bottom:20px}
.ap-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ap-later{font-size:.85rem;font-weight:700;color:var(--muted);background:none;border:none;cursor:pointer;font-family:inherit}
.ap-later:hover{color:var(--text)}
.ap-close{
  position:absolute;top:14px;inset-inline-end:14px;width:32px;height:32px;border-radius:50%;
  background:var(--chip);border:none;color:var(--muted);cursor:pointer;font-size:.85rem;font-family:inherit;
}
.ap-close:hover{background:var(--accent);color:var(--on-accent)}

/* related products (cross-sell) */
.related-wrap{margin-top:44px;border-top:1px solid var(--line);padding-top:30px}
.related-title{font-size:1.2rem;font-weight:800;margin-bottom:20px}
.related-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}

/* subscribe channel buttons row + youtube subscribe */
.sub-channels{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.sub-channels .wa-btn{margin-top:34px}
.yt-sub-btn{
  position:relative;z-index:2;display:inline-flex;align-items:center;gap:10px;
  margin-top:34px;padding:13px 26px;border-radius:999px;background:#FF0000;color:#fff;
  font-weight:800;font-size:.95rem;box-shadow:0 10px 30px -8px rgba(0,0,0,.35);
  transition:transform .2s;
}
.yt-sub-btn:hover{transform:translateY(-3px)}
.yt-sub-btn svg{width:20px;height:20px}

/* categorized skills */
.sk-cats{display:flex;flex-direction:column;gap:30px}
.sk-cat-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sk-cat-head h4{font-size:1.02rem;font-weight:800}
.sk-cat-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(242,48,0,.14);flex:none}
.sk-cat-count{font-size:.68rem;font-weight:800;background:var(--chip);color:var(--muted);border-radius:999px;padding:2px 10px}
.sk-static{display:flex;flex-wrap:wrap;gap:16px}
.sk-static .skill{width:158px;animation:skPop .5s cubic-bezier(.34,1.45,.64,1) both}
@keyframes skPop{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
@media (max-width:560px){.sk-static .skill{width:calc(50% - 8px)}}
[data-noanim] .sk-static .skill{animation:none}
@media (prefers-reduced-motion:reduce){.sk-static .skill{animation:none}}

/* brand wordmark in header & drawer */
.logo .mark-dot-only{width:20px;height:20px}
#logo-text .wordmark{height:24px;width:auto;display:block;color:var(--text)}
#logo-text .wordmark-en{height:20px;margin-top:2px}
.d-head .logo .wordmark{height:26px;width:auto;display:block;color:var(--text)}

/* ---------- share sheet ----------
   a link on its own looks bare in a chat, so this offers the native sheet,
   the big apps, and a ready-made story image for the apps that only take images */
.share-btn{cursor:pointer}
.share-wide{
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:48px;padding:0 20px;border-radius:13px;cursor:pointer;
  background:var(--chip);border:1px solid var(--line);color:var(--text);
  font-family:inherit;font-weight:800;font-size:.92rem;
  transition:transform .18s,border-color .18s,background .18s;
}
.share-wide:hover{transform:translateY(-2px);border-color:var(--accent)}
.share-wide svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2}

.share-back{
  position:fixed;inset:0;z-index:1200;
  background:rgba(8,8,12,.62);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;transition:opacity .22s ease;
}
.share-back.open{opacity:1}
@media (min-width:721px){ .share-back{align-items:center} }
.share-sheet{
  width:min(560px,100%);
  background:var(--bg2);color:var(--text);
  border:1px solid var(--line);
  border-radius:26px 26px 0 0;
  padding:22px clamp(18px,4vw,28px) calc(26px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -20px 60px -20px rgba(0,0,0,.5);
  transform:translateY(26px);transition:transform .28s cubic-bezier(.2,.8,.25,1);
  max-height:92vh;overflow-y:auto;
}
.share-back.open .share-sheet{transform:none}
@media (min-width:721px){
  .share-sheet{border-radius:24px;transform:translateY(14px) scale(.98)}
  .share-back.open .share-sheet{transform:none}
}
.share-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.share-head h3{font-size:1.08rem;font-weight:800}
/* الشعار في ترويسة المشاركة — نفس شعار الموقع */
.share-brand{display:flex;align-items:center;gap:12px;min-width:0}
.share-logo{display:inline-flex;align-items:center;color:var(--text)}
.share-logo .wordmark{height:22px;width:auto;display:block}
.share-logo .wordmark-en{height:19px}
.share-brand h3{
  padding-inline-start:12px;border-inline-start:1px solid var(--line);
  color:var(--muted);font-size:.95rem;font-weight:700;white-space:nowrap;
}
.share-x{
  width:34px;height:34px;border-radius:10px;cursor:pointer;
  background:var(--chip);border:1px solid var(--line);color:var(--muted);
  font-size:.95rem;line-height:1;
}
.share-x:hover{color:var(--text)}
.share-native{margin-bottom:14px}
.share-native-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  height:50px;border-radius:14px;cursor:pointer;border:none;font-family:inherit;
  background:var(--accent);color:var(--on-accent);font-weight:800;font-size:.95rem;
  box-shadow:0 12px 28px -14px var(--accent);
  transition:transform .18s,filter .18s;
}
.share-native-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.share-native-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2}

.share-grid{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
}
.share-app{
  --fg:#fff;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:13px 6px;border-radius:15px;cursor:pointer;
  background:var(--chip);border:1px solid var(--line);color:var(--text);
  font-family:inherit;
  transition:transform .18s,border-color .18s,background .18s;
}
.share-app:hover{transform:translateY(-3px);border-color:var(--c)}
.sa-ic{
  width:40px;height:40px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:var(--c);color:var(--fg);
  transition:transform .3s cubic-bezier(.2,.8,.25,1);
}
.share-app:hover .sa-ic{transform:scale(1.07) rotate(-5deg)}
.sa-ic svg{width:20px;height:20px}
.sa-lb{font-size:.74rem;font-weight:700;color:var(--muted);text-align:center}
.share-app:hover .sa-lb{color:var(--text)}
.share-app.small{padding:10px 6px}
.share-app.small .sa-ic{width:34px;height:34px;border-radius:11px}
.share-app.small .sa-ic svg{width:17px;height:17px}

.share-sep{height:1px;background:var(--line);margin:20px 0 18px}
.share-story{display:flex;flex-direction:column;gap:12px}
.share-story-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:50px;border-radius:14px;cursor:pointer;font-family:inherit;
  background:linear-gradient(135deg,#7c5cff,#dc2743);color:#fff;
  border:none;font-weight:800;font-size:.94rem;
  box-shadow:0 12px 28px -14px rgba(124,92,255,.8);
  transition:transform .18s,filter .18s;
}
.share-story-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.share-story-btn .sa-ic{width:26px;height:26px;border-radius:9px;background:rgba(255,255,255,.2)}
.share-story-btn .sa-ic svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2}
.share-hint{font-size:.79rem;color:var(--muted);line-height:1.75}
.share-story-apps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:420px){
  .share-grid{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .share-back,.share-sheet,.share-app,.sa-ic{transition:none}
}

/* story preview inside the share sheet — see the card before you post it */
.story-row{display:flex;gap:16px;align-items:stretch}
.story-preview{
  flex:0 0 100px;width:100px;aspect-ratio:9/16;border-radius:14px;overflow:hidden;
  background:var(--chip);border:1px solid var(--line);
}
.story-preview img{width:100%;height:100%;object-fit:cover;display:block}
.story-skel{
  width:100%;height:100%;
  background:linear-gradient(100deg,var(--chip) 30%,rgba(255,255,255,.14) 50%,var(--chip) 70%);
  background-size:220% 100%;animation:storyShine 1.3s linear infinite;
}
@keyframes storyShine{from{background-position:180% 0}to{background-position:-40% 0}}
.story-copy{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:0}
.story-copy .share-story-btn{width:100%}
@media (max-width:420px){
  .story-preview{flex-basis:78px;width:78px}
}
@media (prefers-reduced-motion:reduce){ .story-skel{animation:none} }

/* toast — used when a story image lands on the device instead of a share sheet */
.nq-toast{
  position:fixed;z-index:1400;
  inset-inline:16px;bottom:calc(22px + env(safe-area-inset-bottom,0px));
  margin-inline:auto;max-width:420px;
  padding:14px 18px;border-radius:14px;
  background:#17181a;color:#f4f3f1;
  font-size:.87rem;font-weight:700;line-height:1.7;text-align:center;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.7);
  opacity:0;transform:translateY(14px);
  transition:opacity .25s,transform .25s cubic-bezier(.2,.8,.25,1);
}
.nq-toast.on{opacity:1;transform:none}
[data-theme="dark"] .nq-toast{background:#f4f3f1;color:#101214}
@media (prefers-reduced-motion:reduce){ .nq-toast{transition:none} }

/* ===== product media stage — images / GIF / video / YouTube ===== */
.media-stage{margin:0 0 18px}
.ms-stage{
  position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,var(--chip),var(--bg2));
  border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(20,10,4,.20), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.ms-media{width:100%;height:100%;object-fit:contain;display:block;border:0;background:transparent}
/* a still is letterboxed over its own blurred backdrop — painting an opaque
   panel behind it just framed a white render in black. video keeps the
   dark panel, where the bars are the convention. */
video.ms-media,iframe.ms-media{background:#0b0c0e}
.ms-stage img.ms-media{cursor:zoom-in}
.ms-poster{position:absolute;inset:0;background-size:cover;background-position:center;cursor:pointer}
.ms-poster::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.42))}
.ms-play{
  position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%;
  border:0;cursor:pointer;z-index:2;display:grid;place-items:center;
  background:var(--accent);color:#fff;
  box-shadow:0 12px 34px rgba(242,48,0,.45);transition:transform .25s
}
.ms-play:hover{transform:scale(1.08)}
.ms-play svg{width:26px;height:26px;fill:#fff;margin-inline-start:4px}
.ms-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(12,10,9,.55);color:#fff;display:grid;place-items:center;
  opacity:0;transition:opacity .2s,background .2s;backdrop-filter:blur(6px)
}
.ms-nav svg{width:20px;height:20px}
.ms-nav.prev{inset-inline-start:12px}
.ms-nav.next{inset-inline-end:12px}
.ms-stage:hover .ms-nav{opacity:1}
.ms-nav:hover{background:var(--accent)}
.ms-count{
  position:absolute;inset-inline-end:12px;bottom:12px;z-index:3;
  font-size:.76rem;font-weight:700;letter-spacing:.4px;color:#fff;
  background:rgba(12,10,9,.6);padding:5px 10px;border-radius:999px;backdrop-filter:blur(6px)
}
.ms-cap{margin:10px 2px 0;color:var(--muted);font-size:.9rem}
.ms-rail{display:flex;gap:10px;overflow-x:auto;padding:12px 2px 4px;scrollbar-width:thin}
.ms-rail::-webkit-scrollbar{height:6px}
.ms-rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.ms-thumb{
  position:relative;flex:0 0 auto;width:112px;aspect-ratio:16/10;border-radius:11px;overflow:hidden;
  border:2px solid transparent;background:var(--chip);cursor:pointer;padding:0;
  transition:border-color .2s,transform .2s,opacity .2s;opacity:.72
}
.ms-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ms-thumb:hover{opacity:1;transform:translateY(-2px)}
.ms-thumb.active{border-color:var(--accent);opacity:1}
.ms-tp{
  position:absolute;inset:0;margin:auto;width:26px;height:26px;border-radius:50%;
  background:rgba(12,10,9,.66);display:grid;place-items:center
}
.ms-tp svg{width:11px;height:11px;fill:#fff;margin-inline-start:2px}
@media(max-width:640px){
  .ms-thumb{width:88px}
  .ms-play{width:58px;height:58px}
  .ms-play svg{width:20px;height:20px}
  .ms-nav{opacity:1;width:36px;height:36px}
}

/* ===== product sections: details + how-to ===== */
.prod-sec{margin-top:26px}
.prod-h{
  font-size:1.05rem;font-weight:800;margin:0 0 12px;display:flex;align-items:center;gap:10px
}
.prod-h::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.spec-box{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg2)
}
.spec-row{
  display:flex;gap:14px;align-items:baseline;justify-content:space-between;
  padding:11px 14px;border-bottom:1px solid var(--line);font-size:.92rem
}
.spec-row:last-child{border-bottom:0}
.spec-row span{color:var(--muted)}
.spec-row b{font-weight:700;text-align:end}
.howto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.howto-card{
  margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg2);
  position:relative;transition:transform .25s,box-shadow .25s
}
.howto-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(20,10,4,.16)}
.howto-n{
  position:absolute;top:10px;inset-inline-start:10px;z-index:2;
  min-width:26px;height:26px;padding:0 8px;border-radius:999px;
  background:var(--accent);color:#fff;font-size:.8rem;font-weight:800;
  display:grid;place-items:center;box-shadow:0 6px 16px rgba(242,48,0,.35)
}
.howto-media{position:relative;aspect-ratio:16/10;background:var(--chip);cursor:pointer}
.howto-media img,.howto-media video{width:100%;height:100%;object-fit:cover;display:block}
.howto-card figcaption{padding:10px 12px;font-size:.86rem;color:var(--muted);line-height:1.5}

/* stage: keep it cinematic, not page-swallowing */
.ms-stage{max-height:min(60vh,540px)}
.ms-count{direction:ltr}
/* mixed Arabic/Latin values must not get re-ordered by the RTL container */
.spec-row b,.compat-chip,.ver-chip{unicode-bidi:plaintext}

.ms-bg{
  position:absolute;inset:-8%;z-index:0;background-size:cover;background-position:center;
  filter:blur(34px) saturate(1.2) brightness(.9);transform:scale(1.08);pointer-events:none
}
.ms-stage>.ms-media{position:relative;z-index:1}
.ms-stage>.ms-poster{z-index:1}

/* ===== product hero: media + sticky purchase card ===== */
.prod-hero{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:26px;align-items:start}
.prod-media{min-width:0}
.buy-card{
  position:sticky;top:86px;border:1px solid var(--line);border-radius:20px;padding:20px;
  background:linear-gradient(180deg,var(--bg2),var(--bg));
  box-shadow:0 20px 48px rgba(20,10,4,.12);overflow:hidden
}
.buy-card::before{
  content:'';position:absolute;inset-inline-start:0;inset-block-start:0;width:100%;height:3px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent)
}
.buy-title{font-size:1.12rem;line-height:1.55;margin:0 0 10px;font-weight:800}
.buy-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.buy-price{font-size:2.1rem;font-weight:900;letter-spacing:-1px;margin:2px 0 14px;direction:ltr;text-align:start}
.buy-price.paid,.buy-price.pwyw{color:var(--accent)}
.buy-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.buy-actions{display:flex;flex-direction:column;gap:10px}
.prod-sec.in-card{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.prod-sec.in-card .prod-h{font-size:.95rem;margin-bottom:10px}
.prod-sec.in-card .spec-box{border:0;background:transparent;border-radius:0}
.prod-sec.in-card .spec-row{padding:8px 0;font-size:.87rem}
.prod-lower{margin-top:34px}
.prod-lede{color:var(--muted);font-size:1.04rem;line-height:1.9;max-width:72ch;margin:0}
@media(max-width:980px){
  .prod-hero{grid-template-columns:1fr;gap:18px}
  .buy-card{position:static}
  .prod-lower{margin-top:24px}
}

/* ==========================================================================
   Motion layer — 2026-08-31
   Staggered entrances, a word-by-word headline, counting stats and a scroll
   progress bar. Everything here is additive: remove this block and the site
   still looks and works exactly the same, just without the movement.
   ========================================================================== */

/* every .reveal can carry its own delay; JS sets --d per element */
.reveal{transition-delay:var(--d,0ms)}

/* ---- headline: words rise out of their own mask, one after another ----
   Each word carries the mask (not the whole h1) so Arabic descenders — ج ح خ ي —
   are never clipped by the overflow. */
.hero h1.hero-h1{opacity:1;transform:none;transition:none}
.hero h1.hero-h1 .w{
  display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.18em;margin-bottom:-.18em;
}
.hero h1.hero-h1 .w > i{
  display:inline-block;font-style:normal;
  opacity:0;transform:translateY(1.05em);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .72s cubic-bezier(.2,.7,.3,1);
}
.hero h1.hero-h1.in .w > i{opacity:1;transform:none}
/* each word waits a beat longer than the one before it */
.hero h1.hero-h1 .w:nth-of-type(1) > i{transition-delay:.06s}
.hero h1.hero-h1 .w:nth-of-type(2) > i{transition-delay:.13s}
.hero h1.hero-h1 .w:nth-of-type(3) > i{transition-delay:.20s}
.hero h1.hero-h1 .w:nth-of-type(4) > i{transition-delay:.27s}
.hero h1.hero-h1 .w:nth-of-type(5) > i{transition-delay:.34s}
.hero h1.hero-h1 .w:nth-of-type(6) > i{transition-delay:.41s}
.hero h1.hero-h1 .w:nth-of-type(n+7) > i{transition-delay:.48s}
/* the brand dot lands with a small pop instead of just sliding in */
.hero h1.hero-h1.in .w.accent > i{animation:dotLand .8s cubic-bezier(.2,1.5,.4,1) both;animation-delay:.52s}
@keyframes dotLand{
  0%{transform:translateY(.5em) scale(.5);opacity:0}
  60%{transform:translateY(0) scale(1.16);opacity:1}
  100%{transform:translateY(0) scale(1);opacity:1}}

/* the hero must never be taller than the screen — the first thing a visitor
   sees should be the whole message, not the middle of it */
.hero-inner{padding-block:clamp(34px,6vh,70px)}
@media (max-height:820px){
  .hero{min-height:auto;padding-bottom:40px}
  .hero h1{font-size:clamp(2.1rem,5.2vw,3.5rem);margin-block:16px 14px}
  .hero-stats{margin-top:34px}
  .hero-cta{margin-top:26px}
}

/* ---- counting numbers ---- */
.stat b u.cnt{
  text-decoration:none;font-variant-numeric:tabular-nums;
  direction:ltr;display:inline-block;min-width:1.1ch;
}

/* ---- the primary call to action gets a slow sheen so the eye lands on it ---- */
.hero-cta .btn-primary{position:relative;overflow:hidden}
.hero-cta .btn-primary::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.42) 48%,transparent 66%);
  transform:translateX(-120%);animation:ctaSheen 4.6s ease-in-out 1.8s infinite;
}
@keyframes ctaSheen{0%{transform:translateX(-120%)}22%,100%{transform:translateX(120%)}}

/* ---- reading progress along the top edge ---- */
.scroll-prog{
  position:fixed;inset-inline:0;top:0;height:2px;z-index:120;pointer-events:none;
  background:linear-gradient(90deg,var(--accent),#ff8a52);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .12s linear,opacity .3s;opacity:0;
}
[dir="rtl"] .scroll-prog{transform-origin:right center}
.scroll-prog.on{opacity:1}

/* ---- section headings draw a short rule as they arrive ---- */
.block .sec-head .reveal,.block h2.reveal{will-change:opacity,transform}

@media (prefers-reduced-motion:reduce){
  .hero h1.hero-h1 .w > i{opacity:1;transform:none;transition:none;animation:none}
  .hero-cta .btn-primary::after{animation:none;display:none}
  .scroll-prog{display:none}
  .reveal{transition-delay:0ms}
}

/* ---- consent bar: only ever shown once an ad pixel is switched on -------- */
.consent{
  position:fixed;inset-inline:14px;bottom:14px;z-index:190;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  max-width:660px;margin-inline:auto;padding:16px 18px;
  background:var(--bg);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.42);
  opacity:0;transform:translateY(18px);transition:opacity .4s,transform .45s cubic-bezier(.2,.7,.3,1);
}
.consent.in{opacity:1;transform:none}
.consent p{flex:1 1 260px;margin:0;font-size:.9rem;color:var(--muted);line-height:1.55}
.consent-btns{display:flex;gap:10px;margin-inline-start:auto}
.consent-btns .btn{padding:10px 20px;font-size:.9rem}
@media (max-width:560px){
  .consent{inset-inline:10px;bottom:calc(10px + env(safe-area-inset-bottom))}
  .consent-btns{width:100%}
  .consent-btns .btn{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.consent{transition:none;opacity:1;transform:none}}

/* ---- brand wordmark buttons ---------------------------------------------
   Gumroad's round mark is a pink circle, so on their pink button it simply
   vanishes. Their own widget solves this with the wordmark — same here, in
   black, at the size their brand uses. */
.market-btn.has-wordmark{gap:9px}
.market-btn.has-wordmark img.wordmark{
  width:auto;height:17px;object-fit:contain;display:block;flex:none;
  transform:translateY(0.5px);
}
.market-btn.gumroad{background:#ff90e8;color:#000;font-weight:800}
.market-btn.gumroad:hover{filter:brightness(1.04);box-shadow:0 10px 26px -12px rgba(255,144,232,.9)}

/* ---- cards send people into the post, not straight to a checkout -------- */
.card-cta .cta-stores{display:inline-flex;align-items:center;gap:6px}
.card-cta .cta-stores .cta-icon{
  pointer-events:none;opacity:.72;
  width:26px;height:26px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--chip);border:1px solid var(--line);
}
.card-cta .cta-stores .cta-icon img,.card-cta .cta-stores .cta-icon svg{
  width:14px;height:14px;object-fit:contain;
}

/* Snapchat's mark is a white ghost on their yellow — a thin ring keeps it
   readable when the sheet is on a light background */
.share-app.small[style*="fffc00"] .sa-ic,.sa-ic[style*="fffc00"]{box-shadow:inset 0 0 0 1px rgba(0,0,0,.10)}

/* ---- share sheet: the tiles arrive one after another, and the story card
        fades up once it has been drawn --------------------------------- */
.share-app{
  opacity:0;transform:translateY(12px) scale(.96);
  animation:shareTileIn .42s cubic-bezier(.2,.8,.3,1) forwards;
  animation-delay:calc(var(--i,0) * 34ms + 90ms);
}
@keyframes shareTileIn{to{opacity:1;transform:none}}
.share-app:hover{transform:translateY(-3px)}

.story-preview .story-img{
  opacity:0;transform:scale(1.04);
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.3,1);
}
.story-preview .story-img.in{opacity:1;transform:none}

/* the story button belongs to this brand, not to a generic purple gradient */
.share-story-btn{
  background:linear-gradient(135deg,#FF6A2B,#F23000 62%,#C92700);
  box-shadow:0 12px 28px -14px rgba(242,48,0,.85);
}

@media (prefers-reduced-motion:reduce){
  .share-app{opacity:1;transform:none;animation:none}
  .story-preview .story-img{opacity:1;transform:none;transition:none}
}

/* ---- Snapchat on iOS: the two steps that actually work -------------------
   Snapchat's own help page says browser sharing is Android-only, so on an
   iPhone we show the picture and the route into Memories instead of firing a
   share sheet that quietly drops the image. */
.snap-back{
  /* must sit above the share sheet (z-index 1200), it opens from inside it */
  position:fixed;inset:0;z-index:1400;display:flex;align-items:flex-end;justify-content:center;
  /* it opens on top of the share sheet, which is already blurred — a second
     backdrop-filter here just costs a phone frames for nothing */
  background:rgba(12,10,9,.66);
  opacity:0;transition:opacity .26s;
}
.snap-back.open{opacity:1}
.snap-card{
  position:relative;width:min(520px,100%);max-height:92vh;overflow:auto;
  padding:24px 22px calc(24px + env(safe-area-inset-bottom));
  background:var(--bg);border:1px solid var(--line);
  border-radius:24px 24px 0 0;
  transform:translateY(26px);transition:transform .34s cubic-bezier(.2,.8,.3,1);
}
.snap-back.open .snap-card{transform:none}
@media (min-width:620px){
  .snap-back{align-items:center}
  .snap-card{border-radius:24px}
}
.snap-x{
  position:absolute;inset-inline-end:16px;top:16px;
  width:34px;height:34px;border-radius:50%;cursor:pointer;color:var(--text);
  background:var(--chip);border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;
}
.snap-card h3{font-size:1.15rem;font-weight:800;margin-bottom:6px;padding-inline-end:44px}
.snap-why{font-size:.86rem;color:var(--muted);line-height:1.7;margin-bottom:18px}
.snap-row{display:flex;gap:16px;align-items:flex-start}
.snap-img{
  flex:0 0 116px;width:116px;aspect-ratio:9/16;object-fit:cover;
  border-radius:14px;border:1px solid var(--line);background:var(--chip);
  /* long-press on iOS offers "Add to Photos" — do not block it */
  -webkit-touch-callout:default;
}
.snap-steps{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:14px}
.snap-steps li{font-size:.9rem;line-height:1.7;font-weight:600}
.snap-steps li span{display:block;font-weight:400;font-size:.82rem;color:var(--muted);margin-top:4px}
.snap-acts{display:flex;gap:10px;margin-top:20px}
.snap-act{flex:1;justify-content:center;padding:13px 18px}
@media (prefers-reduced-motion:reduce){
  .snap-back,.snap-card{transition:none}
}

/* ---- support & requests page -------------------------------------------
   A report form that looks like part of the site, not a bolted-on Google
   Form. Two columns on a desktop, one on a phone, and the fields that only
   matter for a bug report hide themselves for the other request types. */
.sup-wrap{max-width:820px;margin-inline:auto;padding-block:8px 60px}
.sup-title{font-size:clamp(1.9rem,4.4vw,2.9rem);font-weight:800;letter-spacing:-.015em;margin-bottom:12px}
.sup-title .accent{color:var(--accent)}
.sup-lede{color:var(--muted);font-size:1.02rem;line-height:1.85;max-width:640px;margin-bottom:34px}

.sup-form{display:flex;flex-direction:column;gap:20px}
.sup-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.sup-f{display:flex;flex-direction:column;gap:8px}
.sup-l{font-size:.86rem;font-weight:700}
.sup-h{font-style:normal;font-size:.78rem;color:var(--muted)}
.sup-f input,.sup-f select,.sup-f textarea{
  width:100%;padding:13px 15px;border-radius:13px;
  background:var(--bg2);border:1px solid var(--line);color:var(--text);
  font-family:inherit;font-size:.94rem;line-height:1.6;
  transition:border-color .18s,box-shadow .18s;
}
.sup-f textarea{resize:vertical;min-height:110px}
.sup-f select{
  appearance:none;cursor:pointer;padding-inline-end:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%236E747A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 7 7.5 13 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:calc(100% - 16px) center;background-size:13px 9px;
}
[dir="rtl"] .sup-f select{padding-inline-end:44px;background-position:16px center}
.sup-f input:focus,.sup-f select:focus,.sup-f textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(242,48,0,.12);
}
.sup-tech{font-size:.78rem;color:var(--muted);line-height:1.7}
.sup-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.sup-send{min-width:170px;justify-content:center}
.sup-send:disabled{opacity:.6;cursor:progress}
.sup-status{font-size:.86rem;font-weight:700}
.sup-status.err{color:#c0392b}

/* the confirmation is the last thing they see — make it feel handled */
.sup-done{
  text-align:center;padding:46px 26px;border-radius:22px;
  background:var(--bg2);border:1px solid var(--line);
  animation:supIn .5s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes supIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.sup-tick{
  width:66px;height:66px;border-radius:50%;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(30,158,87,.12);color:#1E9E57;
  animation:supPop .55s cubic-bezier(.2,1.5,.4,1) .12s both;
}
@keyframes supPop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.sup-tick svg{width:30px;height:30px}
.sup-done h2{font-size:1.4rem;font-weight:800;margin-bottom:10px}
.sup-done p{color:var(--muted);line-height:1.85;max-width:460px;margin-inline:auto}
.sup-ref{
  display:inline-flex;align-items:center;gap:12px;margin:24px 0 18px;
  padding:12px 20px;border-radius:999px;background:var(--chip);border:1px solid var(--line);
}
.sup-ref span{font-size:.8rem;color:var(--muted);font-weight:700}
.sup-ref b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.98rem;direction:ltr}
.sup-mailline{margin-bottom:22px}
.sup-mailline a{color:var(--accent);font-weight:700;direction:ltr;display:inline-block}

.sup-fail{
  margin-top:6px;padding:20px;border-radius:16px;
  background:rgba(192,57,43,.07);border:1px solid rgba(192,57,43,.28);
}
.sup-fail b{display:block;margin-bottom:6px}
.sup-fail p{color:var(--muted);font-size:.9rem;line-height:1.8}
.sup-fail-acts{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}

.sup-cta{margin:18px 0 20px;gap:9px}
.buy-support{
  display:block;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.84rem;font-weight:700;color:var(--muted);text-align:center;
}
.buy-support:hover{color:var(--accent)}
@media (prefers-reduced-motion:reduce){
  .sup-done,.sup-tick{animation:none}
}
.sup-mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;
  font-size:.82rem!important;line-height:1.65!important;
}

/* ---- support form as a three-step flow -------------------------------- */
.sup-bar{
  position:relative;display:flex;justify-content:space-between;
  margin:0 0 34px;padding-bottom:20px;
}
.sup-bar::before{
  content:"";position:absolute;inset-inline:14px;bottom:0;height:2px;
  background:var(--line);border-radius:2px;
}
.sup-bar-fill{
  position:absolute;inset-inline-start:14px;bottom:0;height:2px;width:0;
  background:var(--accent);border-radius:2px;transition:width .45s cubic-bezier(.2,.8,.3,1);
  max-width:calc(100% - 28px);
}
.sup-dot{display:flex;align-items:center;gap:9px;background:var(--bg);padding-inline:2px}
.sup-n{
  width:28px;height:28px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:.82rem;font-weight:800;direction:ltr;
  background:var(--chip);border:1px solid var(--line);color:var(--muted);
  transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.sup-dot em{font-style:normal;font-size:.84rem;font-weight:700;color:var(--muted);transition:color .25s}
.sup-dot.on .sup-n{background:var(--accent);border-color:transparent;color:var(--on-accent);transform:scale(1.06)}
.sup-dot.on em{color:var(--text)}
.sup-dot.done .sup-n{background:rgba(242,48,0,.12);border-color:rgba(242,48,0,.3);color:var(--accent)}
@media (max-width:620px){ .sup-dot em{display:none} }

.sup-step{display:none;flex-direction:column;gap:20px}
.sup-step.on{display:flex;animation:supStep .42s cubic-bezier(.2,.8,.3,1) both}
@keyframes supStep{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.sup-kinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.sup-kind{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:20px 18px;border-radius:18px;cursor:pointer;text-align:start;
  background:var(--bg2);border:1px solid var(--line);color:var(--text);
  font-family:inherit;transition:transform .2s,border-color .2s,box-shadow .2s;
}
.sup-kind:hover{transform:translateY(-3px);border-color:var(--accent)}
.sup-kind.on{border-color:var(--accent);box-shadow:0 0 0 3px rgba(242,48,0,.12)}
.sup-kic{
  width:42px;height:42px;border-radius:13px;margin-bottom:6px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(242,48,0,.10);color:var(--accent);
}
.sup-kic svg{width:22px;height:22px}
.sup-kind b{font-size:.98rem;font-weight:800}
.sup-kind span{font-size:.83rem;color:var(--muted);line-height:1.65}

.sup-extras{border:1px solid var(--line);border-radius:16px;background:var(--bg2)}
.sup-extras summary{
  cursor:pointer;padding:15px 18px;font-size:.88rem;font-weight:700;
  list-style:none;display:flex;align-items:center;gap:10px;
}
.sup-extras summary::-webkit-details-marker{display:none}
.sup-extras summary::before{
  content:"+";width:22px;height:22px;border-radius:7px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--chip);border:1px solid var(--line);font-weight:800;
}
.sup-extras[open] summary::before{content:"−"}
.sup-extras-in{padding:4px 18px 20px;display:flex;flex-direction:column;gap:18px}

.sup-recap{margin-top:4px;padding:18px;border-radius:16px;background:var(--bg2);border:1px solid var(--line)}
.sup-recap > b{display:block;font-size:.86rem;margin-bottom:12px}
.sup-recap-in{display:flex;flex-direction:column;gap:8px}
.sup-recap-in > div{display:flex;gap:12px;font-size:.86rem}
.sup-recap-in span{color:var(--muted);min-width:96px}
.sup-recap-in i{font-style:normal;font-weight:700;unicode-bidi:plaintext}

.sup-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.sup-nav .btn{min-width:140px;justify-content:center}
@media (max-width:520px){
  .sup-nav{flex-direction:column-reverse;align-items:stretch}
  .sup-nav .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .sup-step.on{animation:none}
  .sup-bar-fill{transition:none}
}

/* ---- screenshot attachments on the support form ---- */
.sup-shots{display:flex;flex-wrap:wrap;gap:10px}
.sup-shots:empty{display:none}
.sup-shot{
  position:relative;width:96px;height:96px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:var(--chip);
}
.sup-shot img{width:100%;height:100%;object-fit:cover;display:block}
.sup-shot-x{
  position:absolute;top:5px;inset-inline-end:5px;width:22px;height:22px;border-radius:50%;
  border:0;cursor:pointer;background:rgba(12,10,9,.72);color:#fff;font-size:.7rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.sup-add{
  align-self:flex-start;padding:11px 20px;border-radius:12px;cursor:pointer;
  background:var(--chip);border:1px dashed var(--line);color:var(--text);
  font-family:inherit;font-weight:700;font-size:.88rem;
  transition:border-color .18s,color .18s;
}
.sup-add:hover{border-color:var(--accent);color:var(--accent)}
.sub-note{margin-top:12px;font-size:.8rem;color:rgba(255,255,255,.82);line-height:1.7;text-align:center}

/* ---- contact: one clear way in ---- */
.contact-grid.contact-solo{align-items:start}
.contact-invite{
  padding:28px;border-radius:20px;
  background:var(--bg2);border:1px solid var(--line);
}
.contact-points{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:14px}
.contact-points li{display:flex;flex-direction:column;gap:3px}
.contact-points b{font-size:.95rem;font-weight:800}
.contact-points span{font-size:.85rem;color:var(--muted);line-height:1.6}
.contact-cta{width:100%;justify-content:center}
.contact-note{margin-top:16px;font-size:.8rem;color:var(--muted);line-height:1.75}

/* secondary platform button (e.g. the product video): quiet, so the store CTA stays the hero */
.market-btn.ghost{background:var(--chip);color:var(--text);box-shadow:none}
.market-btn.ghost svg,.market-btn.ghost img{color:#ff0000}
.market-btn.ghost:hover{background:var(--line)}

/* private draft banner — only ever seen by whoever holds the direct link */
.draft-ribbon{
  display:flex;align-items:center;gap:.6rem;
  margin:0 0 22px;padding:12px 16px;border-radius:14px;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  color:var(--accent);font-weight:650;font-size:.92rem;line-height:1.5;
  unicode-bidi:plaintext;
}
.draft-ribbon::before{content:"";flex:0 0 9px;height:9px;border-radius:50%;background:var(--accent)}

/* parameter reference — one <details> per panel section, so a long list is
   scannable first and readable second. native <details> keeps it keyboard-
   accessible and it costs nothing on a phone. */
.params-tools{
  display:flex;gap:8px;flex-wrap:wrap;margin:34px 0 12px;
}
.pt-btn{
  appearance:none;cursor:pointer;
  font:inherit;font-size:.82rem;font-weight:650;
  padding:.42em 1em;border-radius:999px;
  border:1px solid var(--line);background:transparent;color:var(--muted);
  transition:color .16s,border-color .16s,background .16s;
}
.pt-btn:hover{color:var(--text);border-color:var(--muted)}
.pt-btn:active{transform:translateY(1px)}

details.blk-params{
  margin:0 0 10px;border:1px solid var(--line);border-radius:16px;
  background:var(--card);overflow:hidden;
  transition:border-color .18s;
}
details.blk-params:hover{border-color:color-mix(in srgb,var(--muted) 42%,transparent)}
details.blk-params[open]{border-color:color-mix(in srgb,var(--accent) 30%,transparent)}

details.blk-params > summary{
  display:flex;align-items:center;gap:.7rem;
  padding:16px 20px;cursor:pointer;list-style:none;
  font-weight:700;font-size:1.02rem;color:var(--text);
  unicode-bidi:plaintext;
  -webkit-tap-highlight-color:transparent;
}
details.blk-params > summary::-webkit-details-marker{display:none}
details.blk-params > summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:-2px;border-radius:16px;
}
.blk-params .bp-title{flex:1 1 auto;min-width:0;direction:ltr;unicode-bidi:plaintext}
.blk-params .bp-count{
  flex:0 0 auto;font-size:.75rem;font-weight:700;
  min-width:1.9em;text-align:center;
  padding:.2em .5em;border-radius:999px;
  background:var(--chip);color:var(--muted);
  direction:ltr;unicode-bidi:isolate;
}
.blk-params .bp-chev{
  flex:0 0 auto;width:9px;height:9px;
  border-inline-end:2px solid var(--muted);border-block-end:2px solid var(--muted);
  transform:rotate(45deg);margin-block-end:3px;
  transition:transform .2s ease,border-color .2s;
}
details.blk-params[open] > summary .bp-chev{
  transform:rotate(-135deg);margin-block-end:-2px;border-color:var(--accent);
}

.blk-params .bp-body{
  padding:0 20px 6px;
  animation:bpOpen .22s ease both;
}
@keyframes bpOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .blk-params .bp-body{animation:none}
  .blk-params .bp-chev{transition:none}
}

/* the strip of panel these controls live in, at the size Blender draws it —
   floated beside the list on a desktop, stacked above it on a phone */
.blk-params .bp-shot{
  margin:0 0 10px;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;background:var(--bg2);max-width:340px;
}
.blk-params .bp-shot img{display:block;width:100%;height:auto;cursor:zoom-in}
@media (min-width:760px){
  .blk-params .bp-shot{
    float:inline-end;margin-inline-start:20px;margin-block:2px 12px;
    /* a definite width, not just a cap: a float shrink-wraps to its content,
       and a lazy image has no intrinsic size before it loads — so the box
       measured 0x0, never intersected the viewport, and the loader never
       fired. every panel screenshot stayed invisible because of it. */
    width:min(300px,38%);max-width:min(300px,38%);
  }
  .blk-params dl{clear:none}
  .blk-params .bp-body::after{content:'';display:block;clear:both}
}
/* the result of the section's sliders, wide enough to compare the variants */
.blk-params .bp-render{
  margin:14px 0 4px;clear:both;
}
.blk-params .bp-render img{
  display:block;width:100%;height:auto;border-radius:12px;
  border:1px solid var(--line);background:var(--bg2);cursor:zoom-in;
}
.blk-params .bp-render figcaption{
  margin-block-start:8px;color:var(--muted);font-size:.86rem;line-height:1.7;
  unicode-bidi:plaintext;
}
.blk-params .bp-intro{
  margin:0 0 4px;color:var(--muted);font-size:.93rem;line-height:1.75;
  unicode-bidi:plaintext;
}
.blk-params dl{margin:0;padding:0}
.blk-params dt{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .75rem;
  padding:15px 0 0;border-block-start:1px solid var(--line);
  unicode-bidi:plaintext;
}
.blk-params dl > dt:first-child{border-block-start:0;padding-block-start:10px}
.blk-params dd{
  margin:0;padding:5px 0 15px;
  color:var(--muted);font-size:.93rem;line-height:1.75;
  unicode-bidi:plaintext;
}
.blk-params .bp-name{
  font-weight:700;font-size:.99rem;color:var(--text);
  direction:ltr;unicode-bidi:isolate;
}
.blk-params .bp-meta{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.78rem;letter-spacing:.01em;
  padding:.16em .55em;border-radius:7px;
  background:var(--chip);color:var(--muted);
  direction:ltr;unicode-bidi:isolate;white-space:nowrap;
}
@media (max-width:520px){
  details.blk-params > summary{padding:15px 15px;font-size:.97rem;gap:.5rem}
  .blk-params .bp-body{padding-inline:15px}
}

/* ===== an Instagram post that belongs to a product, in its own section =====
   not in the gallery, and nothing loads from instagram.com until asked. */
.blk-ig{
  margin:38px 0;padding:18px;border-radius:20px;
  border:1px solid var(--line);background:var(--card);
}
.ig-head{
  display:flex;align-items:center;gap:.6rem;
  margin:0 0 14px;padding-inline:2px;
}
.ig-glyph{
  flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:linear-gradient(45deg,#f9ce34,#ee2a7b 48%,#6228d7);color:#fff;
}
.ig-glyph svg{width:17px;height:17px}
.ig-label{font-weight:700;font-size:.98rem;flex:1 1 auto;min-width:0;unicode-bidi:plaintext}
.ig-open{
  flex:0 0 auto;font-size:.82rem;font-weight:650;color:var(--muted);
  text-decoration:none;padding:.34em .85em;border-radius:999px;
  border:1px solid var(--line);transition:color .16s,border-color .16s;
}
.ig-open:hover{color:var(--text);border-color:var(--muted)}

.ig-frame{
  position:relative;margin-inline:auto;max-width:540px;
  border-radius:14px;overflow:hidden;background:var(--chip);
  aspect-ratio:54/85;
}
.ig-frame.is-live{background:#fff;aspect-ratio:auto;height:min(78vh,720px)}
.ig-frame iframe{width:100%;height:100%;border:0;display:block}

.ig-facade{
  position:absolute;inset:0;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  appearance:none;border:0;cursor:pointer;font:inherit;text-align:center;padding:24px;
  background:
    radial-gradient(120% 90% at 30% 8%, rgba(249,206,52,.20), transparent 58%),
    radial-gradient(120% 90% at 78% 96%, rgba(98,40,215,.22), transparent 58%),
    var(--chip);
  transition:filter .18s;
}
.ig-facade:hover{filter:brightness(1.04)}
.ig-facade:active{transform:translateY(1px)}
.ig-fg{
  display:grid;place-items:center;width:62px;height:62px;border-radius:19px;
  background:linear-gradient(45deg,#f9ce34,#ee2a7b 48%,#6228d7);color:#fff;
  box-shadow:0 14px 34px -10px rgba(238,42,123,.5);
}
.ig-fg svg{width:32px;height:32px}
.ig-play{font-weight:700;font-size:1rem;color:var(--text)}
.ig-hint{font-size:.8rem;color:var(--muted);max-width:26ch;line-height:1.6}
.ig-cap{
  margin:14px 2px 0;color:var(--muted);font-size:.9rem;line-height:1.7;
  text-align:center;unicode-bidi:plaintext;
}
@media (max-width:520px){
  .blk-ig{padding:14px;border-radius:18px;margin:30px 0}
  .ig-frame.is-live{height:min(82vh,640px)}
  .ig-open{font-size:.78rem;padding:.32em .7em}
}
@media (prefers-reduced-motion:reduce){.ig-facade{transition:none}}

/* ---------- discount display ----------
   One rule everywhere: the price they pay is the loud one, the old price is a
   quiet struck number beside it, and the percentage is a small hard badge.
   Mixed currency + Latin numerals inside Arabic text need plaintext bidi or
   the "$" jumps to the wrong end of the number. */
.price-line{display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap;unicode-bidi:plaintext}
.price-line .pl-now{font-weight:800;direction:ltr;unicode-bidi:plaintext}
.price-line .pl-was{
  color:var(--muted);font-weight:600;font-size:.78em;opacity:.75;
  direction:ltr;unicode-bidi:plaintext;text-decoration-thickness:1.5px;
}
.price-line .pl-off{
  font-size:.62em;font-weight:800;letter-spacing:.02em;line-height:1;
  padding:4px 8px;border-radius:999px;direction:ltr;
  background:var(--accent);color:#fff;
}
.price-line.tag{font-size:.95rem;color:var(--accent)}
.price-line.tag .pl-was{color:var(--muted)}
.price-line.big{gap:12px}
.price-line.big .pl-off{font-size:.34em;padding:6px 11px;transform:translateY(-4px)}
.buy-price.on-sale{margin-bottom:8px}
/* the row itself follows the page: in Arabic the price they pay sits on the
   right where the eye starts, while each number keeps its own LTR "$39" */
html[dir="rtl"] .buy-price{direction:rtl}
html[dir="rtl"] .price-line.tag,html[dir="rtl"] .cta-where .price-line{direction:rtl}
.cta-where .price-line{gap:6px}
/* inside the CTA the old price is enough — the % badge already sits on the image */
.cta-where .pl-off{display:none}

/* the ribbon keeps its old price on a second line so the card still reads at a glance */
.price-ribbon.sale{display:flex;align-items:center;gap:7px;padding:6px 12px}
.price-ribbon.sale s{font-size:.78em;font-weight:600;opacity:.55;direction:ltr}
.off-badge{
  position:absolute;inset-inline-end:12px;top:52px;z-index:2;
  padding:4px 10px;border-radius:8px;font-size:.76rem;font-weight:800;direction:ltr;
  background:var(--accent);color:#fff;box-shadow:0 6px 18px -8px rgba(242,48,0,.8);
}
.off-badge.urgent{animation:offPulse 2.4s ease-in-out infinite}
@keyframes offPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){.off-badge.urgent{animation:none}}

/* the deadline, stated once, quietly — a countdown that shouts is a red flag */
.offer-note{
  display:flex;align-items:center;gap:8px;margin:0 0 14px;
  font-size:.82rem;font-weight:700;color:var(--muted);unicode-bidi:plaintext;
}
.offer-note .offer-dot{
  width:7px;height:7px;border-radius:50%;background:#27ae60;flex:none;
  box-shadow:0 0 0 3px rgba(39,174,96,.18);
}
.offer-note.urgent{color:var(--accent)}
.offer-note.urgent .offer-dot{background:var(--accent);box-shadow:0 0 0 3px rgba(242,48,0,.16)}
@media(max-width:640px){
  .price-line.big .pl-off{font-size:.36em}
  .off-badge{top:48px;font-size:.7rem}
}