/* =====================================================================
   ABU ADAMZ · "DYNASTY" design system
   Royal gold + Kick green + obsidian. Cinzel / Chakra Petch / Sora.
   ===================================================================== */

html{ overflow-x:hidden; }
.app-pad{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:clamp(18px,5vw,56px); }

/* ---------- Shared type ---------- */
.tag{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-head); font-weight:600; font-size:12px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ac);
  padding:8px 15px; border:1px solid var(--ac-soft); border-radius:999px;
  background:linear-gradient(180deg,var(--ac-soft),transparent);
}
.tag__star{ display:inline-flex; width:14px; height:14px; color:var(--ac); }
.tag__star svg{ width:100%; height:100%; }

.lead{
  font-family:var(--f-body); font-weight:400;
  font-size:clamp(15px,1.7vw,18.5px); line-height:1.72; color:var(--dim);
  max-width:60ch;
}

.h-sec{
  font-family:var(--f-disp); font-weight:800;
  font-size:clamp(30px,5.6vw,62px); line-height:1.04; letter-spacing:.015em;
  color:var(--text);
}

.sec{ position:relative; padding-block:clamp(40px,5vw,72px); }
.sec__head{ margin-bottom:18px; }
.sec__head .tag{ margin-bottom:18px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-head); font-weight:700; font-size:14.5px; letter-spacing:.04em;
  padding:14px 24px; border-radius:13px; cursor:pointer; border:1px solid transparent;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, color .25s, border-color .25s;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn-primary{
  color:#1a1206;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2) 55%,var(--gold-3));
  box-shadow:0 8px 26px rgba(233,185,73,.32), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 14px 38px rgba(233,185,73,.5), inset 0 1px 0 rgba(255,255,255,.6); }
.btn-ghost{
  color:var(--text); background:rgba(255,255,255,.02);
  border-color:var(--ac-soft);
}
.btn-ghost:hover{ transform:translateY(-3px); border-color:var(--ac); color:var(--ac); box-shadow:0 12px 30px rgba(0,0,0,.4); }

/* ---------- Live dot ---------- */
.dot{ width:8px; height:8px; border-radius:50%; background:var(--dim); position:relative; flex:none; }
[data-live="true"] .dot{ background:var(--volt); box-shadow:0 0 0 0 var(--volt); animation:pdot 1.5s ease-out infinite; }
@keyframes pdot{ 0%{ box-shadow:0 0 0 0 rgba(255,216,107,.6); } 70%{ box-shadow:0 0 0 9px rgba(255,216,107,0); } 100%{ box-shadow:0 0 0 0 rgba(255,216,107,0); } }

/* =====================================================================
   NAV
   ===================================================================== */
.nav{ position:fixed; inset:0 0 auto 0; z-index:120; transition:background .3s, box-shadow .3s, backdrop-filter .3s; }
.nav.scrolled{ background:color-mix(in oklab,var(--bg) 86%, transparent); backdrop-filter:blur(10px) saturate(1.15); box-shadow:0 1px 0 var(--line), 0 10px 30px rgba(0,0,0,.3); }
.nav__bar{ width:100%; max-width:1280px; margin-inline:auto; padding:14px clamp(16px,4vw,40px); display:flex; align-items:center; gap:18px; }
.brand{ display:inline-flex; align-items:center; gap:12px; }
.brand__mk{ width:42px; height:42px; border-radius:11px; overflow:hidden; flex:none;
  border:1.5px solid var(--ac-soft); box-shadow:0 0 18px rgba(233,185,73,.25); background:var(--bg-2); }
.brand__mk img{ width:100%; height:100%; object-fit:cover; }
.brand__wm{ font-family:var(--f-head); font-weight:700; font-size:18px; letter-spacing:.16em; color:var(--text); }
.nav__links{ display:flex; gap:6px; margin-inline-start:14px; }
.nav__links a{ font-family:var(--f-head); font-weight:500; font-size:14px; letter-spacing:.04em; color:var(--dim); padding:9px 14px; border-radius:9px; transition:color .2s, background .2s; }
.nav__links a:hover{ color:var(--ac); background:var(--ac-soft); }
.nav__right{ margin-inline-start:auto; display:flex; align-items:center; gap:10px; }
.livepill{ display:inline-flex; align-items:center; gap:9px; font-family:var(--f-head); font-weight:600; font-size:12.5px; letter-spacing:.05em;
  padding:9px 15px; border-radius:999px; border:1px solid var(--line); color:var(--text); background:rgba(255,255,255,.02); transition:border-color .2s, color .2s, background .2s; }
.livepill:hover{ border-color:var(--ac); color:var(--ac); }
.livepill[data-live="true"]{ border-color:var(--volt); color:var(--volt); background:var(--volt-soft); }
.langtog{ display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.langtog button{ font-family:var(--f-head); font-weight:600; font-size:12.5px; padding:8px 13px; color:var(--dim); background:transparent; border:0; cursor:pointer; transition:color .2s, background .2s; }
.langtog button.on{ color:#1a1206; background:linear-gradient(180deg,var(--gold-1),var(--gold-3)); }
.iconbtn{ width:40px; height:40px; display:grid; place-items:center; border-radius:11px; border:1px solid var(--line); background:rgba(255,255,255,.02); color:var(--dim); cursor:pointer; transition:color .25s, border-color .25s, transform .25s; }
.iconbtn:hover{ color:var(--ac); border-color:var(--ac); transform:rotate(35deg); }
.iconbtn svg{ width:19px; height:19px; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding-top:104px; padding-bottom:34px; }
.hero__in{ display:flex; flex-direction:column; align-items:center; gap:clamp(26px,3.5vw,44px); flex-shrink:0; }

.hero__crest{ position:relative; transform-style:preserve-3d; }
.crest__frame{
  position:relative; width:min(72vw,380px); aspect-ratio:1; border-radius:26px; overflow:hidden;
  border:2px solid transparent;
  background:linear-gradient(var(--bg-2),var(--bg-2)) padding-box,
            linear-gradient(135deg,var(--gold-1),var(--gold-3) 48%,var(--gold-1)) border-box;
  box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 36px 90px rgba(0,0,0,.65), var(--glow);
  animation:crestFloat 5.5s ease-in-out infinite;
}
@keyframes crestFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-13px); } }
.crest__frame img{ width:100%; height:100%; object-fit:cover; }
.crest__sheen{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.18) 48%,transparent 58%);
  background-size:260% 100%; animation:sheenmove 7s ease-in-out infinite; mix-blend-mode:screen; }
@keyframes sheenmove{ 0%{ background-position:130% 0; } 60%,100%{ background-position:-130% 0; } }
.crest__halo{ position:absolute; inset:-30%; z-index:-2; border-radius:50%;
  background:radial-gradient(closest-side, rgba(233,185,73,.28), rgba(233,185,73,.04) 60%, transparent 75%); }
.crest__rays{ position:absolute; inset:-30%; z-index:-1; border-radius:50%;
  background:repeating-conic-gradient(from 0deg, rgba(233,185,73,.12) 0deg 3.5deg, transparent 3.5deg 11deg);
  -webkit-mask:radial-gradient(closest-side, transparent 40%, #000 56%, transparent 82%);
  mask:radial-gradient(closest-side, transparent 40%, #000 56%, transparent 82%);
  animation:spin 32s linear infinite; }
.crest__cn{ position:absolute; width:22px; height:22px; border:2px solid var(--ac); opacity:.7; }
.crest__cn--tl{ top:-7px; left:-7px; border-right:0; border-bottom:0; border-top-left-radius:8px; }
.crest__cn--tr{ top:-7px; right:-7px; border-left:0; border-bottom:0; border-top-right-radius:8px; }
.crest__cn--bl{ bottom:-7px; left:-7px; border-right:0; border-top:0; border-bottom-left-radius:8px; }
.crest__cn--br{ bottom:-7px; right:-7px; border-left:0; border-top:0; border-bottom-right-radius:8px; }
.crest__live{ position:absolute; top:13px; inset-inline-start:13px;
  display:inline-flex; align-items:center; gap:7px; font-family:var(--f-head); font-weight:700; font-size:10.5px; letter-spacing:.14em;
  padding:6px 12px; border-radius:999px; backdrop-filter:blur(10px); z-index:3;
  background:rgba(10,7,3,.74); border:1px solid var(--ac-soft); color:var(--text); box-shadow:0 6px 18px rgba(0,0,0,.45); }
.crest__live[data-live="true"]{ color:var(--volt); border-color:var(--volt); box-shadow:0 0 20px var(--volt-soft); }

.hero__copy{ display:flex; flex-direction:column; align-items:center; gap:18px; max-width:760px; }
.hero__kick{ font-size:12.5px; }
.hero__name{
  font-family:var(--f-disp); font-weight:700; line-height:1; letter-spacing:.03em; white-space:nowrap; text-transform:uppercase;
  font-size:clamp(34px,9.6vw,112px);
  background:linear-gradient(100deg,#9c6f23 0%,#e9b949 24%,#fff3cf 48%,#e9b949 62%,#9c6f23 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent; animation:sheen 5s linear infinite;
  filter:drop-shadow(0 4px 22px rgba(233,185,73,.3));
}
@keyframes sheen{ 0%{ background-position:130% 0; } 100%{ background-position:-110% 0; } }
.hero__sub{ font-family:var(--f-head); font-weight:600; font-size:clamp(13px,2.1vw,17px); letter-spacing:.22em; text-transform:uppercase; color:var(--ac); }
.hero__lead{ color:var(--dim); margin:0 auto; }
.hero__rotate{ min-height:1.9em; display:flex; align-items:center; justify-content:center; max-width:640px; margin:2px auto 0; padding-inline:10px; }
.hero__rotate-i{ font-family:var(--f-body); font-weight:500; font-size:clamp(15px,1.9vw,19px); line-height:1.5; text-align:center;
  color:color-mix(in oklab, var(--text) 64%, var(--ac)); opacity:0; transform:translateY(10px); transition:opacity .44s ease, transform .44s ease; }
.hero__rotate-i.show{ opacity:1; transform:none; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:16px; }

/* scroll cue */
.scrollcue{ display:flex; flex-direction:column; align-items:center; gap:9px; cursor:pointer; z-index:5; margin-top:clamp(40px,5.5vh,66px); flex-shrink:0; }
.scrollcue__lab{ font-family:var(--f-head); font-weight:600; font-size:10px; letter-spacing:.42em; color:var(--faint); text-transform:uppercase; }
.scrollcue__mouse{ width:24px; height:38px; border:2px solid var(--ac-soft); border-radius:13px; display:flex; justify-content:center; padding-top:7px;
  box-shadow:0 0 18px rgba(233,185,73,.18); }
.scrollcue__mouse i{ width:3px; height:8px; border-radius:2px; background:var(--ac); animation:wheel 1.6s ease-in-out infinite; }
@keyframes wheel{ 0%{ transform:translateY(0); opacity:1; } 70%{ transform:translateY(11px); opacity:0; } 100%{ opacity:0; } }
.scrollcue__chev{ width:9px; height:9px; border-right:2px solid var(--ac); border-bottom:2px solid var(--ac); transform:rotate(45deg); animation:chev 1.6s ease-in-out infinite; }
@keyframes chev{ 0%,100%{ transform:rotate(45deg) translate(0,0); opacity:.4; } 50%{ transform:rotate(45deg) translate(3px,3px); opacity:1; } }

/* =====================================================================
   CHANNEL HUB
   ===================================================================== */
.hub{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.plaque{
  position:relative; display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.025), transparent);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s, background .3s; transform-style:preserve-3d;
}
.plaque__edge{ position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px; background:var(--ac); opacity:.3; transition:opacity .3s, width .3s, background .3s; }
.plaque:hover{ transform:translateY(-5px); border-color:color-mix(in oklab,var(--pc) 55%, var(--line)); background:linear-gradient(180deg, color-mix(in oklab,var(--pc) 9%, transparent), transparent); box-shadow:0 20px 46px rgba(0,0,0,.5), 0 0 34px color-mix(in oklab,var(--pc) 20%, transparent); }
.plaque:hover .plaque__edge{ opacity:1; width:5px; background:var(--pc); }
.plaque__tok{ width:54px; height:54px; flex:none; border-radius:13px; display:grid; place-items:center; color:var(--text);
  border:1px solid var(--line); background:radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.06), transparent);
  transition:color .3s, border-color .3s, box-shadow .3s; }
.plaque__tok svg{ width:26px; height:26px; }
.plaque:hover .plaque__tok{ color:var(--pc); border-color:color-mix(in oklab,var(--pc) 55%, transparent); background:radial-gradient(120% 120% at 30% 20%, color-mix(in oklab,var(--pc) 22%, transparent), transparent); box-shadow:0 0 26px color-mix(in oklab,var(--pc) 35%, transparent); }
.plaque__mid{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.plaque__name{ font-family:var(--f-head); font-weight:700; font-size:16.5px; letter-spacing:.08em; color:var(--text); }
.plaque__handle{ font-family:var(--f-body); font-size:13px; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plaque__act{ margin-inline-start:auto; display:inline-flex; align-items:center; gap:10px; flex:none; }
.plaque__act-txt{ font-family:var(--f-head); font-weight:600; font-size:12.5px; letter-spacing:.05em; color:var(--dim); transition:color .3s; }
.plaque:hover .plaque__act-txt{ color:var(--text); }
.plaque__arrow{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); color:var(--ac); transition:transform .3s, background .3s, color .3s, border-color .3s; }
.plaque__arrow svg{ width:16px; height:16px; }
.plaque:hover .plaque__arrow{ transform:translateX(4px); background:linear-gradient(180deg,var(--gold-1),var(--gold-3)); color:#1a1206; border-color:transparent; }

/* =====================================================================
   ABOUT / THE COMMANDER
   ===================================================================== */
.about__grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(28px,5vw,64px); align-items:center; }
.about__art{ position:relative; justify-self:center; transform-style:preserve-3d; }
.about__frame{ position:relative; width:min(82vw,400px); aspect-ratio:1; border-radius:22px; overflow:hidden;
  border:2px solid transparent;
  background:linear-gradient(var(--bg-2),var(--bg-2)) padding-box, linear-gradient(135deg,var(--gold-2),var(--gold-3) 55%,var(--gold-1)) border-box;
  box-shadow:0 30px 70px rgba(0,0,0,.55), var(--glow); }
.about__frame img{ width:100%; height:100%; object-fit:cover; }
.about__halo{ position:absolute; inset:-22%; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side, rgba(233,185,73,.22), transparent 70%); }
.about__copy{ display:flex; flex-direction:column; gap:18px; }
.about__title{ font-family:var(--f-disp); font-weight:900; font-size:clamp(34px,6vw,68px); line-height:1; letter-spacing:.02em;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2) 52%,var(--gold-3)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.creds{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:10px; }
.cred{ position:relative; padding:20px 12px 15px; border-radius:15px; overflow:hidden; text-align:center;
  border:1px solid var(--ac-soft); background:linear-gradient(180deg, rgba(233,185,73,.08), rgba(233,185,73,.012));
  transition:transform .3s, border-color .3s, box-shadow .3s; }
.cred::before{ content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:46%; height:2px;
  background:linear-gradient(90deg,transparent,var(--ac),transparent); opacity:.7; }
.cred:hover{ transform:translateY(-5px); border-color:color-mix(in oklab,var(--ac) 60%, transparent); box-shadow:0 16px 36px rgba(0,0,0,.45), 0 0 24px var(--ac-soft); }
.cred__v{ font-family:var(--f-disp); font-weight:700; font-size:clamp(18px,2.2vw,25px); line-height:1.1; letter-spacing:.01em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; min-height:2.3em;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2) 52%,var(--gold-3)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.cred__l{ font-family:var(--f-head); font-weight:600; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); margin-top:8px; line-height:1.35; }
.tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:6px; }
.tags span{ font-family:var(--f-head); font-weight:600; font-size:12px; letter-spacing:.08em; color:var(--dim); padding:8px 14px; border-radius:999px; border:1px solid var(--line); transition:color .2s, border-color .2s; }
.tags span:hover{ color:var(--ac); border-color:var(--ac-soft); }

/* marquee */
.mq{ margin-top:clamp(30px,4vw,52px); border-block:1px solid var(--line); padding-block:16px; overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.mq__track{ display:inline-flex; white-space:nowrap; animation:mqscroll 26s linear infinite; }
[dir="rtl"] .mq__track{ animation-direction:reverse; }
.mq__track i{ display:inline-flex; align-items:center; }
.mq__track i, .mq__track i b{ font-style:normal; }
.mq__track i{ font-family:var(--f-disp); font-weight:800; font-size:clamp(20px,2.8vw,32px); letter-spacing:.05em; color:var(--text); }
.mq__track i > *{ }
.mq__track b{ display:inline-flex; width:16px; height:16px; margin-inline:26px; color:var(--ac); }
.mq__track b svg{ width:100%; height:100%; }
@keyframes mqscroll{ to{ transform:translateX(-50%); } }

/* =====================================================================
   COMMUNITY
   ===================================================================== */
.comm__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.panel{ --pc:var(--ac); position:relative; padding:34px 30px; border-radius:20px; overflow:hidden; transform-style:preserve-3d;
  border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  transition:transform .3s, border-color .3s, box-shadow .3s; }
.panel:hover{ transform:translateY(-4px); border-color:color-mix(in oklab,var(--pc) 45%, var(--line)); box-shadow:0 22px 50px rgba(0,0,0,.45); }
.panel::before{ content:''; position:absolute; inset:0 0 auto 0; height:3px; background:var(--pc); opacity:.6; }
.panel__ic{ width:58px; height:58px; border-radius:15px; display:grid; place-items:center; color:var(--pc);
  border:1px solid color-mix(in oklab,var(--pc) 40%, transparent); background:color-mix(in oklab,var(--pc) 12%, transparent); margin-bottom:18px; }
.panel__ic svg{ width:28px; height:28px; }
.panel h3{ font-family:var(--f-head); font-weight:700; font-size:22px; letter-spacing:.05em; color:var(--text); margin-bottom:8px; }
.panel p{ font-family:var(--f-body); font-size:15px; line-height:1.65; color:var(--dim); margin-bottom:22px; max-width:42ch; }
.panel__cta{ margin-top:2px; box-shadow:0 8px 24px var(--ac-soft); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{ position:relative; padding-block:clamp(56px,7vw,96px) 40px; border-top:1px solid var(--line); overflow:hidden; }
.footer__ghost{ position:absolute; top:-8px; left:50%; transform:translateX(-50%); font-family:var(--f-disp); font-weight:900;
  font-size:clamp(60px,17vw,240px); letter-spacing:.04em; line-height:1; white-space:nowrap; pointer-events:none;
  color:transparent; -webkit-text-stroke:1px rgba(233,185,73,.08); opacity:.55; }
.footer__in{ position:relative; display:flex; flex-direction:column; align-items:center; gap:24px; text-align:center; }
.footer__tag{ font-family:var(--f-disp); font-weight:700; font-size:clamp(20px,3vw,30px); color:var(--text); letter-spacing:.02em; }
.footer__soc{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.footer__soc a{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; color:var(--dim);
  border:1px solid var(--line); background:rgba(255,255,255,.02); transition:color .25s, border-color .25s, transform .25s, background .25s; }
.footer__soc a svg{ width:20px; height:20px; }
.footer__soc a:hover{ color:var(--ac); border-color:var(--ac); transform:translateY(-4px); background:var(--ac-soft); }
.credit{ display:inline-flex; align-items:center; gap:14px; padding:11px 12px 11px 18px; border-radius:999px;
  border:1px solid var(--ac-soft); background:linear-gradient(180deg, var(--ac-soft), transparent);
  transition:transform .25s, box-shadow .25s, border-color .25s; }
.credit:hover{ transform:translateY(-3px); border-color:var(--ac); box-shadow:0 14px 36px rgba(0,0,0,.4); }
.credit__mk{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; flex:none; color:#1a1206;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-3)); box-shadow:0 0 18px rgba(233,185,73,.4); }
.credit__mk svg{ width:20px; height:20px; }
.credit__txt{ display:flex; flex-direction:column; text-align:start; line-height:1.2; }
.credit__txt b{ font-family:var(--f-head); font-weight:700; font-size:15px; letter-spacing:.1em; color:var(--text); }
.credit__txt small{ font-family:var(--f-body); font-size:11.5px; color:var(--dim); }
.credit__go{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:var(--ac); border:1px solid var(--ac-soft); }
.credit__go svg{ width:15px; height:15px; }
.footer__bottom{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center; margin-top:6px;
  font-family:var(--f-body); font-size:12.5px; color:var(--faint); }
.footer__bottom a{ color:var(--dim); transition:color .2s; }
.footer__bottom a:hover{ color:var(--ac); }

/* =====================================================================
   CUSTOMIZER PANEL
   ===================================================================== */
.tw{ position:fixed; z-index:200; top:74px; inset-inline-end:clamp(12px,3vw,28px); width:min(320px,92vw);
  border-radius:18px; border:1px solid var(--ac-soft); overflow:hidden;
  background:color-mix(in oklab,var(--bg-2) 92%, transparent); backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 30px 70px rgba(0,0,0,.6); animation:twin .3s cubic-bezier(.2,.8,.2,1); }
@keyframes twin{ from{ opacity:0; transform:translateY(-10px) scale(.98); } to{ opacity:1; transform:none; } }
.tw__hd{ display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--line);
  font-family:var(--f-head); font-weight:700; font-size:13px; letter-spacing:.16em; color:var(--ac); }
.tw__x{ width:28px; height:28px; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--dim); cursor:pointer; transition:color .2s, border-color .2s; }
.tw__x:hover{ color:var(--ac); border-color:var(--ac); }
.tw__bd{ padding:16px 18px; display:flex; flex-direction:column; gap:16px; }
.tw__row{ display:flex; flex-direction:column; gap:9px; }
.tw__lab{ font-family:var(--f-head); font-weight:600; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.seg{ display:flex; gap:6px; }
.seg button{ flex:1; font-family:var(--f-head); font-weight:600; font-size:12.5px; padding:9px; border-radius:9px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--dim); transition:all .2s; }
.seg button.on{ color:#1a1206; background:linear-gradient(180deg,var(--gold-1),var(--gold-3)); border-color:transparent; }
.themes{ display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }
.themes button{ display:flex; align-items:center; gap:8px; font-family:var(--f-head); font-weight:600; font-size:11px; letter-spacing:.08em;
  padding:8px 10px; border-radius:10px; cursor:pointer; border:1px solid var(--line); background:transparent; color:var(--dim); transition:all .2s; }
.themes button.on{ color:var(--text); border-color:var(--ac); }
.themes button i{ width:18px; height:18px; border-radius:6px; flex:none; }
.sw{ display:flex; flex-wrap:wrap; gap:8px; }
.sw button{ width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:transform .2s, border-color .2s; }
.sw button:hover{ transform:scale(1.12); }
.sw button.on{ border-color:var(--text); box-shadow:0 0 0 2px var(--bg); }

/* =====================================================================
   POINTER LIGHT + REVEALS
   ===================================================================== */
#goldlight{ position:fixed; top:0; left:0; width:520px; height:520px; margin:-260px 0 0 -260px; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, rgba(233,185,73,.10), transparent 70%); mix-blend-mode:screen; }
[data-fx="low"] #goldlight{ display:none; }

.rv{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); will-change:opacity, transform; }
.rv.rv-s{ transform:translateY(20px) scale(.96); }
.rv.rv-l{ transform:translateX(-30px); }
.rv.rv-r{ transform:translateX(30px); }
.rv.in{ opacity:1; transform:none; }
html:not(.ready) .rv{ opacity:0; }

/* =====================================================================
   LIVE NOW (Kick status banner)
   ===================================================================== */
.live{ padding-block:clamp(24px,3.5vw,44px); }
.liveband{ position:relative; overflow:hidden; border-radius:20px; padding:clamp(18px,2.6vw,26px);
  border:1px solid var(--ac-soft); background:linear-gradient(135deg, color-mix(in oklab,var(--ac) 7%, var(--bg-2)), var(--bg-2) 62%);
  box-shadow:0 22px 54px rgba(0,0,0,.5); transition:border-color .3s, box-shadow .3s; }
.liveband.is-live{ border-color:color-mix(in oklab,var(--ac) 45%, transparent); box-shadow:0 22px 54px rgba(0,0,0,.5), 0 0 34px var(--ac-soft); }
.liveband__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.6;
  background:radial-gradient(120% 140% at 100% 0%, var(--ac-soft), transparent 55%),
             repeating-linear-gradient(115deg, transparent 0 22px, rgba(233,185,73,.025) 22px 23px); }
.liveband > *{ position:relative; z-index:1; }

.liveband__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.livestat{ display:inline-flex; align-items:center; gap:9px; font-family:var(--f-head); font-weight:700; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:rgba(0,0,0,.25); }
[dir="rtl"] .livestat{ font-family:var(--f-ar); letter-spacing:0; }
.livestat.on{ color:#ff5a5a; border-color:rgba(255,90,90,.4); }
.livestat__dots{ display:inline-flex; gap:4px; }
.livestat__dots i{ width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.4; }
.livestat.on .livestat__dots i{ background:#ff3b3b; opacity:1; animation:liveblink 1.4s ease-in-out infinite; }
.livestat.on .livestat__dots i:nth-child(2){ animation-delay:.5s; }
@keyframes liveblink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.liveband__url{ font-family:var(--f-head); font-weight:500; font-size:12.5px; letter-spacing:.06em; color:var(--dim); transition:color .2s; white-space:nowrap; }
.liveband__url:hover{ color:var(--ac); }

/* LIVE: grid of embedded player + info */
.liveband__grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(16px,2.4vw,24px); align-items:stretch; margin-bottom:18px; }
.livestage{ position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000; border:1px solid var(--line); box-shadow:0 12px 30px rgba(0,0,0,.5); }
.livestage iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.livestage__badge{ position:absolute; top:11px; inset-inline-start:11px; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--f-head); font-weight:800; font-size:11px; letter-spacing:.14em; color:#fff;
  padding:6px 11px; border-radius:7px; background:#e01b1b; box-shadow:0 4px 14px rgba(224,27,27,.5); }
.dot2{ width:7px; height:7px; border-radius:50%; background:#fff; animation:liveblink 1.2s ease-in-out infinite; }
.livestage__vc{ position:absolute; top:11px; inset-inline-end:11px; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-head); font-weight:700; font-size:12.5px; color:#fff; padding:6px 11px; border-radius:7px;
  background:rgba(10,7,3,.7); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.14); }
.livestage__vc svg{ width:14px; height:14px; }

.liveband__info{ display:flex; flex-direction:column; justify-content:center; gap:14px; }
.liveband__lab{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-head); font-weight:700; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ac); }
[dir="rtl"] .liveband__lab{ font-family:var(--f-ar); letter-spacing:0; }
.livedot{ width:8px; height:8px; border-radius:50%; background:#ff3b3b; box-shadow:0 0 8px #ff3b3b; animation:liveblink 1.2s ease-in-out infinite; flex:none; }
.liveband__title{ font-family:var(--f-disp); font-weight:700; font-size:clamp(21px,2.8vw,30px); line-height:1.18; letter-spacing:.01em;
  background:linear-gradient(100deg,var(--gold-3),var(--gold-1) 48%,var(--gold-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
[dir="rtl"] .liveband__title{ font-family:var(--f-ar); font-weight:900; }
.liveband__meta{ display:flex; flex-wrap:wrap; gap:10px; }
.livepill2{ display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border-radius:999px;
  border:1px solid var(--line); background:rgba(0,0,0,.25); font-family:var(--f-head); font-size:13px; color:var(--text); }
[dir="rtl"] .livepill2{ font-family:var(--f-ar); }
.livepill2 svg{ width:16px; height:16px; color:var(--ac); flex:none; }
.livepill2 b{ font-weight:700; }
.livepill2 span{ color:var(--dim); font-size:12.5px; }
.liveband__cta{ padding:12px 20px; align-self:flex-start; }
[dir="rtl"] .liveband__cta{ align-self:flex-end; }
.liveband__cta svg:last-child{ width:14px; height:14px; opacity:.7; }

/* OFFLINE / loading card */
.liveband__off{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:13px; padding:clamp(26px,4vw,46px) 16px; margin-bottom:6px; }
.liveband__offic{ width:62px; height:62px; display:grid; place-items:center; border-radius:16px; color:var(--ac);
  border:1px solid var(--ac-soft); background:linear-gradient(180deg, var(--ac-soft), transparent); }
.liveband__offic svg{ width:30px; height:30px; }
.liveband.is-load .liveband__offic svg{ animation:spin 1s linear infinite; }
.liveband__title--off{ font-size:clamp(22px,3.2vw,32px); }
.liveband__sub{ font-family:var(--f-body); font-size:14.5px; line-height:1.65; color:var(--dim); max-width:48ch; }
[dir="rtl"] .liveband__sub{ font-family:var(--f-ar); }
.liveband__off .liveband__cta{ align-self:center; margin-top:4px; }

.liveband__foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:16px; border-top:1px solid var(--line); }
.liveband__auto{ display:inline-flex; align-items:center; gap:9px; font-family:var(--f-head); font-weight:600; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
[dir="rtl"] .liveband__auto{ font-family:var(--f-ar); letter-spacing:0; }
.liveband__pulse{ width:7px; height:7px; border-radius:50%; background:var(--faint); flex:none; }
.liveband__pulse.on{ background:var(--ac); box-shadow:0 0 0 0 var(--ac); animation:pdot 1.6s ease-out infinite; }
.refreshbtn{ display:inline-flex; align-items:center; gap:7px; font-family:var(--f-head); font-weight:600; font-size:12.5px; letter-spacing:.04em;
  padding:8px 14px; border-radius:10px; cursor:pointer; border:1px solid var(--line); background:transparent; color:var(--dim); transition:color .2s, border-color .2s; }
[dir="rtl"] .refreshbtn{ font-family:var(--f-ar); }
.refreshbtn:hover{ color:var(--ac); border-color:var(--ac); }
.refreshbtn svg{ width:15px; height:15px; }
.refreshbtn.spin svg{ animation:spin .9s linear infinite; }

@media (max-width:760px){
  .liveband__grid{ grid-template-columns:1fr; }
  .liveband__info{ gap:12px; }
  .liveband__cta, [dir="rtl"] .liveband__cta{ align-self:stretch; justify-content:center; }
}

/* =====================================================================
   ON DUTY (cinematic city band)
   ===================================================================== */
.duty__frame{ position:relative; border-radius:20px; overflow:hidden; border:2px solid transparent; aspect-ratio:1919/721;
  background:linear-gradient(var(--bg-2),var(--bg-2)) padding-box, linear-gradient(120deg,var(--gold-1),var(--gold-3) 50%,var(--gold-1)) border-box;
  box-shadow:0 30px 80px rgba(0,0,0,.6), var(--glow); transform-style:preserve-3d; }
.duty__frame img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.06) contrast(1.04); }
.duty__grad{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,7,3,.12) 0%, transparent 30%, rgba(10,7,3,.12) 62%, rgba(10,7,3,.8) 100%),
             radial-gradient(130% 90% at 50% 122%, rgba(233,185,73,.18), transparent 60%); }
.duty__cap{ position:absolute; inset-inline-start:18px; bottom:16px; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-head); font-weight:700; font-size:clamp(11px,2.6vw,13px); letter-spacing:.16em; color:var(--text);
  padding:9px 16px; border-radius:999px; background:rgba(10,7,3,.62); backdrop-filter:blur(8px); border:1px solid var(--ac-soft); }
.duty__badge{ width:16px; height:16px; color:var(--ac); display:inline-flex; }
.duty__badge svg{ width:100%; height:100%; }
.duty__cn{ position:absolute; width:26px; height:26px; border:2px solid var(--ac); opacity:.8; z-index:2; }
.duty__cn--tl{ top:12px; left:12px; border-right:0; border-bottom:0; border-top-left-radius:6px; }
.duty__cn--br{ bottom:12px; right:12px; border-left:0; border-top:0; border-bottom-right-radius:6px; }
.duty__body{ margin:26px auto 0; text-align:center; }

/* =====================================================================
   KICK HOVER PREVIEW
   ===================================================================== */
.kpv{ position:fixed; z-index:300; width:480px; max-width:92vw; border-radius:16px; overflow:hidden;
  background:#0a0703; border:1px solid var(--ac-soft); box-shadow:0 30px 70px rgba(0,0,0,.7), var(--glow);
  opacity:0; transform:translateY(8px) scale(.98); pointer-events:none; transition:opacity .2s, transform .2s; }
.kpv.show{ opacity:1; transform:none; pointer-events:auto; }
.kpv__v{ position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.kpv__v iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.kpv__ft{ display:flex; align-items:center; gap:9px; padding:10px 13px; font-family:var(--f-head); font-weight:600; font-size:11px; letter-spacing:.08em; color:var(--dim); border-top:1px solid var(--line); }
.kpv__dot{ width:7px; height:7px; border-radius:50%; flex:none; background:var(--volt); box-shadow:0 0 8px var(--volt); animation:pdot 1.5s ease-out infinite; }
.kpv__au{ margin-inline-start:auto; display:inline-flex; align-items:center; gap:8px; }
.kpv__mute{ width:26px; height:26px; display:grid; place-items:center; border-radius:7px; border:1px solid var(--line); background:transparent; color:var(--dim); cursor:pointer; transition:color .2s, border-color .2s; }
.kpv__mute:hover{ color:var(--ac); border-color:var(--ac); }
.kpv__mute svg{ width:15px; height:15px; }
.kpv__vol{ width:74px; accent-color:var(--ac); cursor:pointer; }

/* =====================================================================
   MUSIC PLAYER (floating launcher + expandable panel, bottom-left)
   ===================================================================== */
.mp{ position:fixed; bottom:20px; left:20px; z-index:210; }

/* shared equalizer bars */
.mp__eq{ display:inline-flex; align-items:flex-end; gap:2px; height:13px; }
.mp__eq i{ display:block; width:3px; background:currentColor; border-radius:1px; height:30%; animation:eqbar .9s ease-in-out infinite; }
.mp__eq i:nth-child(2){ animation-delay:.18s; } .mp__eq i:nth-child(3){ animation-delay:.36s; } .mp__eq i:nth-child(4){ animation-delay:.5s; }
@keyframes eqbar{ 0%,100%{ height:25%; } 50%{ height:100%; } }
.mp[data-playing="false"] .mp__eq i{ animation-play-state:paused; height:28%; opacity:.5; }

/* launcher FAB */
.mp__fab{ position:relative; width:56px; height:56px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center;
  color:#1a1206; background:linear-gradient(180deg,var(--gold-1),var(--gold-2) 55%,var(--gold-3));
  box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 22px rgba(233,185,73,.4); transition:transform .25s, box-shadow .25s; }
.mp__fab:hover{ transform:scale(1.07); box-shadow:0 14px 38px rgba(0,0,0,.55), 0 0 30px rgba(233,185,73,.6); }
.mp__fab::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--ac); opacity:0; }
.mp[data-playing="true"] .mp__fab::after{ animation:fabPulse 2s ease-out infinite; }
@keyframes fabPulse{ 0%{ opacity:.5; transform:scale(1); } 100%{ opacity:0; transform:scale(1.35); } }
.mp__fab .mp__eq{ height:18px; gap:2.5px; }
.mp__fab .mp__eq i{ width:3.5px; }
.mp.is-open .mp__fab{ transform:scale(.9); opacity:.85; }

/* panel */
.mp__panel{ position:absolute; bottom:calc(100% + 12px); left:0; width:312px; max-width:calc(100vw - 40px);
  border-radius:20px; overflow:hidden; padding:16px;
  background:linear-gradient(180deg, color-mix(in oklab,var(--bg-2) 96%, transparent), color-mix(in oklab,var(--bg) 96%, transparent));
  backdrop-filter:blur(16px) saturate(1.15); border:1px solid var(--ac-soft);
  box-shadow:0 26px 64px rgba(0,0,0,.62), 0 0 26px rgba(233,185,73,.14);
  opacity:0; transform:translateY(14px) scale(.96); transform-origin:bottom left; pointer-events:none;
  transition:opacity .3s cubic-bezier(.2,.8,.2,1), transform .3s cubic-bezier(.2,.8,.2,1); }
.mp.is-open .mp__panel{ opacity:1; transform:none; pointer-events:auto; }

.mp__hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.mp__hdlab{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-head); font-weight:700; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ac); }
.mp__hdlab .mp__eq{ color:var(--ac); height:11px; }
.mp__x{ width:28px; height:28px; display:grid; place-items:center; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--dim); cursor:pointer; transition:color .2s, border-color .2s; }
.mp__x:hover{ color:var(--ac); border-color:var(--ac); }
.mp__x svg{ width:15px; height:15px; }

.mp__now{ display:flex; align-items:center; gap:13px; padding:13px; border-radius:14px; margin-bottom:14px;
  background:linear-gradient(135deg, var(--ac-soft), transparent); border:1px solid var(--line); }
.mp__cover{ width:50px; height:50px; flex:none; border-radius:11px; display:grid; place-items:center; color:#1a1206;
  background:linear-gradient(150deg,var(--gold-1),var(--gold-3)); box-shadow:0 6px 16px rgba(0,0,0,.4); }
.mp__cover .mp__eq{ height:20px; gap:3px; color:#1a1206; }
.mp__cover .mp__eq i{ width:3.5px; }
.mp__nowtxt{ min-width:0; flex:1; text-align:right; }
.mp__title{ font-family:var(--f-ar); font-weight:700; font-size:16px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp__artist{ font-family:var(--f-head); font-weight:500; font-size:11.5px; letter-spacing:.08em; color:var(--dim); margin-top:3px; }

.mp__seek{ margin-bottom:14px; }
.mp__bar{ position:relative; height:6px; border-radius:999px; background:var(--line); cursor:pointer; }
.mp__fill{ position:absolute; inset-block:0; left:0; border-radius:999px; background:linear-gradient(90deg,var(--gold-3),var(--gold-1)); }
.mp__knob{ position:absolute; top:50%; width:13px; height:13px; border-radius:50%; transform:translate(-50%,-50%); background:var(--gold-1); box-shadow:0 0 10px rgba(233,185,73,.7); }
.mp__time{ display:flex; justify-content:space-between; margin-top:7px; font-family:var(--f-head); font-size:10.5px; letter-spacing:.04em; color:var(--faint); font-variant-numeric:tabular-nums; }

.mp__ctrls{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:16px; }
.mp__btn{ width:34px; height:34px; display:grid; place-items:center; border-radius:50%; cursor:pointer; border:1px solid var(--line); background:transparent; color:var(--text); transition:color .2s, border-color .2s, background .2s; }
.mp__btn:hover{ color:var(--ac); border-color:var(--ac); background:var(--ac-soft); }
.mp__btn svg{ width:16px; height:16px; }
.mp__pp{ width:48px; height:48px; flex:none; border-radius:50%; display:grid; place-items:center; cursor:pointer; border:0; color:#1a1206;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2) 55%,var(--gold-3)); box-shadow:0 0 20px rgba(233,185,73,.45); transition:transform .2s, box-shadow .2s; }
.mp__pp:hover{ transform:scale(1.07); box-shadow:0 0 28px rgba(233,185,73,.65); }
.mp__pp svg{ width:21px; height:21px; }
.mp__vol{ display:inline-flex; align-items:center; gap:7px; margin-inline-start:2px; }
.mp__volbar{ width:58px; height:4px; accent-color:var(--ac); cursor:pointer; }

.mp__list{ display:flex; flex-direction:column; gap:5px; max-height:158px; overflow-y:auto; margin-inline:-4px; padding-inline:4px; }
.mp__list::-webkit-scrollbar{ width:5px; } .mp__list::-webkit-scrollbar-thumb{ background:var(--ac-2); border-radius:5px; }
.mp__row{ display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; border-radius:11px; cursor:pointer; text-align:start;
  border:1px solid transparent; background:transparent; color:var(--dim); transition:background .2s, color .2s, border-color .2s; }
.mp__row:hover{ background:rgba(255,255,255,.04); color:var(--text); }
.mp__row.on{ background:var(--ac-soft); border-color:color-mix(in oklab,var(--ac) 40%, transparent); color:var(--text); }
.mp__num{ font-family:var(--f-head); font-weight:700; font-size:11px; letter-spacing:.05em; color:var(--faint); flex:none; width:20px; }
.mp__row.on .mp__num{ color:var(--ac); }
.mp__rowtitle{ font-family:var(--f-ar); font-weight:700; font-size:14px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp__rowplay{ width:16px; height:16px; flex:none; color:var(--faint); opacity:0; transition:opacity .2s; }
.mp__row:hover .mp__rowplay{ opacity:1; }
.mp__rowplay svg{ width:100%; height:100%; }
.mp__eq--row{ color:var(--ac); height:14px; flex:none; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:900px){
  .nav__links{ display:none; }
  .about__grid{ grid-template-columns:1fr; text-align:center; }
  .about__copy{ align-items:center; }
  .creds{ max-width:460px; margin-inline:auto; }
  .tags{ justify-content:center; }
  .lead{ margin-inline:auto; }
  .kpv{ display:none; }
}
@media (max-width:680px){
  .hub{ grid-template-columns:1fr; }
  .comm__grid{ grid-template-columns:1fr; }
  .brand__wm{ font-size:16px; letter-spacing:.12em; }
  .nav__right .livepill{ display:none; }
  .sec{ padding-block:clamp(34px,7vw,52px); }
  .duty__frame{ aspect-ratio:3/2; }
  .duty__body{ margin-top:18px; }
  .mq{ margin-top:30px; }
}
@media (max-width:480px){
  .creds{ grid-template-columns:repeat(2,1fr); }
  .plaque{ padding:15px 16px; gap:13px; }
  .plaque__tok{ width:48px; height:48px; }
  .plaque__act-txt{ display:none; }
  .footer__soc a{ width:42px; height:42px; }
  .nav__bar{ gap:10px; }
  .livepill{ padding:8px 12px; }
  .mp{ bottom:14px; left:14px; }
  .mp__fab{ width:50px; height:50px; }
  .mp__panel{ width:288px; max-width:calc(100vw - 28px); padding:14px; }
}
@media (max-width:380px){
  .langtog button{ padding:7px 10px; }
  .brand__mk{ width:38px; height:38px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .crest__sheen, .crest__rays, .crest__frame, .hero__name, .scrollcue__mouse i, .scrollcue__chev, .mq__track{ animation:none !important; }
  .rv{ transition-duration:.001s; }
  .hero__rotate-i{ transition-duration:.001s; }
}

/* ===== Arabic / RTL: Arabic face for display + no Latin letter-spacing (it breaks cursive joins) ===== */
[dir="rtl"] .tag, [dir="rtl"] .hero__sub, [dir="rtl"] .hero__rotate-i, [dir="rtl"] .lead,
[dir="rtl"] .h-sec, [dir="rtl"] .about__title, [dir="rtl"] .cred__v, [dir="rtl"] .cred__l,
[dir="rtl"] .tags span, [dir="rtl"] .btn, [dir="rtl"] .nav__links a, [dir="rtl"] .livepill,
[dir="rtl"] .scrollcue__lab, [dir="rtl"] .crest__live, [dir="rtl"] .duty__cap,
[dir="rtl"] .footer__tag, [dir="rtl"] .footer__bottom, [dir="rtl"] .mq__track i,
[dir="rtl"] .panel p, [dir="rtl"] .tw__hd, [dir="rtl"] .tw__lab, [dir="rtl"] .seg button,
[dir="rtl"] .themes button{
  font-family:var(--f-ar);
  letter-spacing:0;
}
[dir="rtl"] .h-sec, [dir="rtl"] .about__title, [dir="rtl"] .footer__tag,
[dir="rtl"] .cred__v, [dir="rtl"] .mq__track i{ font-weight:900; }