/* 34K Player · design 2: the TV box front panel */
:root {
  --night: #0A1230;      /* zellij lapis, the ground */
  --lapis: #13235E;      /* fields */
  --lapis-2: #1B2F78;    /* raised field */
  --panel: #05070F;      /* black front panel */
  --gold: #E7B74B;       /* lit segments and actions */
  --gold-hi: #F6CF6A;
  --gold-ghost: rgba(231, 183, 75, .075);
  --bone: #F3EBDD;       /* text on lapis */
  --bone-2: #C5CBE3;     /* secondary text on lapis */
  --ink: #0A1230;        /* text on gold */
  --ink-2: #2B2410;
  --ok: #7BE0B0;

  --kufi: 'Reem Kufi', 'Readex Pro', system-ui, sans-serif;
  --display: var(--kufi);
  --body: 'Readex Pro', system-ui, sans-serif;
  --t-xs: 14px;
  --t-s: 15px;
  --t-b: 17px;
  --t-h3: 20px;
  --t-h2: clamp(32px, 4.2vw, 58px);
  --t-h1: clamp(40px, 6vw, 92px);

  --m: clamp(16px, 4vw, 56px);
  --r: 14px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: var(--gold) var(--night); }
body { margin: 0; background: var(--night); color: var(--bone); font: 400 var(--t-b)/1.6 var(--body); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; color: #fff; }
[dir=rtl] h1, [dir=rtl] h2 { letter-spacing: 0; line-height: 1.25; }
/* Arabic headings: IBM Plex Sans Arabic; Latin marks keep the Kufi face */
:root:lang(ar) { --display: 'IBM Plex Sans Arabic', 'Readex Pro', sans-serif; }
:lang(ar) h1, :lang(ar) h2 { line-height: 1.3; }
h3 { font-family: var(--display); font-weight: 600; font-size: var(--t-h3); line-height: 1.3; }
a { color: inherit; text-underline-offset: .2em; }
button { font: inherit; color: inherit; cursor: pointer; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
input { caret-color: var(--gold); }

.skip { position: absolute; inset-inline-start: var(--m); top: -60px; z-index: 50; background: var(--gold); color: var(--ink); padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.skip:focus { top: 12px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--gold); color: var(--ink); font-weight: 600; font-size: var(--t-b); text-decoration: none; transition: transform .2s var(--ease), background-color .2s, box-shadow .2s; }
.btn:hover { background: var(--gold-hi); transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .55); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: var(--t-s); }
.btn-ghost { background: transparent; color: var(--bone); box-shadow: inset 0 0 0 2px rgba(243, 235, 221, .35); }
.btn-ghost:hover { background: rgba(243, 235, 221, .08); box-shadow: inset 0 0 0 2px var(--bone); }
.btn-ghost.done { box-shadow: inset 0 0 0 2px var(--ok); color: var(--ok); }
.btn-lapis { background: var(--ink); color: var(--gold); }
.btn-lapis:hover { background: var(--lapis); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .45); }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-line:hover { background: rgba(10, 18, 48, .08); box-shadow: inset 0 0 0 2px var(--ink); }

/* ---------- bar ---------- */
.bar { position: absolute; inset: 0 0 auto; z-index: 10; display: flex; align-items: center; gap: 28px; padding: 22px var(--m); }
.mark { display: flex; align-items: center; gap: 10px; font-family: var(--kufi); font-weight: 700; font-size: 20px; color: #fff; text-decoration: none; }
.links { display: flex; gap: 28px; margin-inline-start: auto; }
.links a { font-size: var(--t-s); text-decoration: none; color: var(--bone); padding: 8px 0; background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 100% / 0 2px; transition: background-size .3s var(--ease), color .2s; }
.links a:hover { color: #fff; background-size: 100% 2px; }
.bar-manage { color: var(--bone); }
.langs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(5, 7, 15, .55); }
.langs a { min-width: 40px; height: 36px; display: grid; place-items: center; border-radius: 999px; font-size: var(--t-xs); font-weight: 600; text-decoration: none; transition: background-color .2s; }
.langs a:hover { background: rgba(243, 235, 221, .1); }
.langs a[aria-current] { background: var(--gold); color: var(--ink); }

/* ---------- hero: the front panel ---------- */
.hero { position: relative; isolation: isolate; padding: 150px var(--m) 0; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; animation: breathe 30s ease-in-out infinite alternate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 18, 48, .72) 0%, rgba(10, 18, 48, .55) 45%, var(--night) 96%); } /* scrim under text */
@keyframes breathe { from { transform: scale(1.03); } to { transform: scale(1.1) translateY(-1.5%); } }
.hero-in { max-width: 980px; }
.hero h1 { font-size: var(--t-h1); }
.lede { margin-top: 28px; max-width: 54ch; font-size: 19px; color: var(--bone); }

.panel { margin-top: clamp(40px, 6vh, 72px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: clamp(18px, 3vw, 36px) clamp(18px, 3vw, 40px); border-radius: 22px; background: var(--panel); box-shadow: inset 0 1px 0 rgba(243, 235, 221, .12), 0 40px 80px -30px rgba(0, 0, 0, .8); }
.panel-side { display: flex; align-items: center; gap: 12px; font-size: var(--t-s); color: var(--bone-2); }
.panel-side img { width: 44px; height: 44px; border-radius: 10px; }
.panel-end { justify-content: flex-end; text-align: end; }
.panel-hint { max-width: 22ch; }
.lamp { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); flex: none; } /* power LED, steady like the real box */

.hero-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }

.doors { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 24px); margin-top: clamp(56px, 8vh, 96px); }
.door { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 320px; padding: 120px clamp(20px, 3vw, 40px) 32px; border-radius: 50% 50% 0 0 / 46% 46% 0 0; background: var(--lapis); color: #fff; text-decoration: none; transition: transform .35s var(--ease), background-color .3s; }
.door:hover { transform: translateY(-8px); background: var(--lapis-2); }
.door-h { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.15; }
.door-p { color: var(--bone-2); font-size: var(--t-b); }
.door-arrow { position: absolute; inset-inline-end: clamp(20px, 3vw, 40px); bottom: 32px; width: 28px; height: 28px; transition: transform .3s var(--ease); }
.door:hover .door-arrow { transform: translateY(4px); }
.door-gold { background: var(--gold); color: var(--ink); }
.door-gold .door-p { color: var(--ink-2); }
.door-gold:hover { background: var(--gold-hi); }

/* ---------- seven-segment LED ---------- */
.led { --t: .1em; display: inline-flex; align-items: center; gap: .16em; direction: ltr; line-height: 1; }
.led-xl { font-size: clamp(64px, 13vw, 200px); }
.led-md { font-size: clamp(36px, 4.4vw, 60px); }
.step .led-md { font-size: clamp(24px, 2.3vw, 40px); }
.led-idle .s.on { background: rgba(231, 183, 75, .38); filter: none; }
.led-sm { font-size: 30px; --t: .11em; }
.led-mac { font-size: clamp(30px, 3.6vw, 48px); }
.d { position: relative; width: .56em; height: 1em; transform: skewX(-7deg); }
.s { position: absolute; background: var(--gold-ghost); transition: background-color .25s, filter .25s; }
.s.on { background: var(--gold); filter: drop-shadow(0 0 .06em rgba(246, 207, 106, .55)); } /* LED bloom */
.s-a, .s-g, .s-d { left: calc(var(--t) * .6); right: calc(var(--t) * .6); height: var(--t); clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%); }
.s-a { top: 0; }
.s-g { top: calc(50% - var(--t) / 2); }
.s-d { bottom: 0; }
.s-b, .s-c, .s-e, .s-f { width: var(--t); height: calc(50% - var(--t) * .2); clip-path: polygon(50% 0, 100% 14%, 100% 86%, 50% 100%, 0 86%, 0 14%); }
.s-f, .s-b { top: calc(var(--t) * .3); }
.s-e, .s-c { bottom: calc(var(--t) * .3); }
.s-f, .s-e { left: 0; }
.s-b, .s-c { right: 0; }
.colon { display: inline-flex; flex-direction: column; justify-content: center; gap: .26em; height: 1em; }
.colon i { width: var(--t); height: var(--t); border-radius: 2px; background: var(--gold); opacity: .8; }

/* ---------- viewers ---------- */
.watch-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 48px; }
.watch-act-url { font-size: var(--t-s); color: var(--bone-2); }
.watch { padding: clamp(120px, 14vw, 200px) var(--m) 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 24px 48px; align-items: end; }
.sec-head h2 { font-size: var(--t-h2); }
.sec-head p { color: var(--bone-2); }
.steps { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); counter-reset: none; }
.step h3 { margin-top: 22px; color: #fff; }
.step p { margin-top: 8px; color: var(--bone-2); font-size: var(--t-s); }
.screen { aspect-ratio: 16 / 10; border-radius: var(--r); background: var(--panel); display: flex; align-items: center; justify-content: center; padding: 18px; box-shadow: inset 0 1px 0 rgba(243, 235, 221, .08); overflow: hidden; }
.screen-pair { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px 14px; justify-content: stretch; }
.screen-pair .led { font-size: clamp(14px, 1.35vw, 20px); gap: .12em; }
.cap { font-size: 13px; font-weight: 600; color: var(--bone-2); }
.url { text-decoration: none; font-family: var(--kufi); font-size: clamp(18px, 1.8vw, 26px); color: var(--gold); direction: ltr; padding: 12px 18px; border-radius: 999px; background: rgba(231, 183, 75, .1); }
.screen-engine { flex-direction: column; gap: 12px; }
.engines { display: flex; gap: 10px; direction: ltr; }
.eng { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(243, 235, 221, .06); font-weight: 600; font-size: var(--t-s); color: var(--bone-2); transition: background-color .3s, color .3s; }
.eng i { width: 9px; height: 9px; border-radius: 50%; background: rgba(243, 235, 221, .25); transition: background-color .3s; }
.screen-engine[data-state=media3] [data-eng=media3], .screen-engine[data-state=vlc] [data-eng=vlc] { background: rgba(231, 183, 75, .16); color: var(--gold); }
.screen-engine[data-state=media3] [data-eng=media3] i, .screen-engine[data-state=vlc] [data-eng=vlc] i { background: var(--ok); }
.eng-status { font-size: 13px; color: var(--bone); text-align: center; }
.chip { border: 0; border-radius: 999px; padding: 8px 14px; background: var(--gold); color: var(--ink); font-size: 13px; font-weight: 600; min-height: 36px; transition: background-color .2s, transform .15s; }
.chip:hover { background: var(--gold-hi); }
.chip:active { transform: scale(.96); }

.feats { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px 64px; margin-top: clamp(96px, 10vw, 160px); }
.feats-h { font-size: var(--t-h2); position: sticky; top: 40px; align-self: start; }
.feat-list { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 48px; }
.feat-list dt { font-family: var(--display); font-weight: 600; font-size: 24px; color: var(--gold); }
.feat-list dd { margin: 8px 0 0; color: var(--bone); }

/* ---------- resellers: the gold chapter ---------- */
.sell { margin-top: clamp(120px, 14vw, 200px); background: var(--gold); color: var(--ink); padding: clamp(80px, 10vw, 140px) var(--m); }
.sell h2 { color: var(--ink); font-size: var(--t-h2); }
.sell ::selection { background: var(--ink); color: var(--gold); }
.sell :focus-visible { outline-color: var(--ink); }
.sell-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px 64px; align-items: center; }
.sell-copy p { margin-top: 24px; max-width: 46ch; font-size: 19px; color: var(--ink); }
.sell-act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.mac-panel { background: var(--panel); color: var(--bone); border-radius: 22px; padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; gap: 14px; box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .55); }
.mac-panel label { font-size: var(--t-s); font-weight: 600; color: var(--bone-2); }
.mac-panel input { height: 52px; border: 0; border-radius: 12px; background: #11172A; color: #fff; font: 500 18px var(--body); letter-spacing: .06em; padding: 0 16px; box-shadow: inset 0 0 0 1px rgba(243, 235, 221, .14); transition: box-shadow .2s; }
.mac-panel input::placeholder { color: #8C93AE; }
.mac-panel input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--gold); }
.mac-panel input[aria-invalid=true] { box-shadow: inset 0 0 0 2px #F09595; }
.led-mac { margin: 10px 0 4px; justify-content: center; flex-wrap: nowrap; }
.plan { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #11172A; align-self: flex-start; }
.plan button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--bone-2); font-weight: 600; font-size: var(--t-s); transition: background-color .2s, color .2s; }
.plan button[aria-checked=true] { background: var(--gold); color: var(--ink); }
.mac-note { font-size: var(--t-xs); color: var(--bone-2); }
.mac-note.bad { color: #F4A6A6; }
.perks { list-style: none; margin: clamp(72px, 8vw, 112px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.perks h3 { font-size: 24px; color: var(--ink); }
.perks p { margin-top: 10px; color: var(--ink); }

/* ---------- faq ---------- */
.faq { padding: clamp(120px, 14vw, 200px) var(--m) 0; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px 64px; align-items: start; }
.faq h2 { font-size: var(--t-h2); position: sticky; top: 40px; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq details { border-radius: var(--r); background: var(--lapis); transition: background-color .25s; }
.faq details[open] { background: var(--lapis-2); }
.faq summary { list-style: none; display: flex; align-items: center; gap: 20px; min-height: 72px; padding: 18px 24px; font-size: 19px; font-weight: 500; color: #fff; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold); }
.faq details p { padding: 0 24px 24px; max-width: 60ch; color: var(--bone); }
.pm { position: relative; flex: 0 0 16px; height: 16px; margin-inline-start: auto; }
.pm::before, .pm::after { content: ""; position: absolute; inset: 6.5px 0 auto; height: 3px; border-radius: 2px; background: var(--gold); transition: transform .3s var(--ease); }
.pm::after { transform: rotate(90deg); }
details[open] .pm::after { transform: rotate(0); }

/* ---------- footer ---------- */
.foot { margin-top: clamp(120px, 14vw, 200px); position: relative; }
.foot-art { margin: 0; height: clamp(180px, 22vw, 320px); overflow: hidden; }
.foot-art img { width: 100%; height: 100%; object-fit: cover; }
.foot-in { padding: 48px var(--m) 56px; display: grid; grid-template-columns: auto 1fr; gap: 24px 48px; align-items: center; }
.foot-mark { display: flex; align-items: center; gap: 18px; font-family: var(--kufi); font-weight: 700; font-size: clamp(40px, 7vw, 104px); color: #fff; line-height: 1; direction: ltr; }
.foot-mark img { width: clamp(48px, 6vw, 88px); height: auto; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 28px; }
.foot-links a { text-decoration: none; color: var(--bone); }
.foot-links a:hover { color: var(--gold); }
.foot-note { grid-column: 1 / -1; font-size: var(--t-xs); color: var(--bone-2); max-width: 90ch; }

/* ---------- download window ---------- */
.dl { width: min(820px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 22px; background: var(--night); color: var(--bone); box-shadow: 0 50px 120px -20px rgba(0, 0, 0, .8); }
.dl::backdrop { background: rgba(3, 5, 14, .72); backdrop-filter: blur(6px); } /* the page recedes behind the window */
.dl[open] { animation: rise .45s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(28px) scale(.97); } }
.dl-head { display: flex; align-items: center; gap: 16px; padding: 24px 28px 8px; }
.dl-head h2 { font-size: 30px; flex: 1; }
.x { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--lapis); display: grid; place-items: center; transition: background-color .2s; }
.x:hover { background: var(--lapis-2); }
.dl-body { display: grid; grid-template-columns: 1fr 1.25fr; gap: 12px; padding: 16px; }
.dl-card { border-radius: 16px; background: var(--lapis); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.dl-card p { color: var(--bone-2); font-size: var(--t-s); }
.dl-apk { background: var(--gold); color: var(--ink); }
.dl-apk h3 { color: var(--ink); }
.dl-apk p { color: var(--ink-2); }
.dl-apk .btn { margin-top: auto; background: var(--ink); color: var(--gold); }
.dl-dh { display: flex; align-items: center; gap: 12px; }
.dl-dh img { border-radius: 10px; }
.dl-steps { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 6px; }
.dl-code { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: 12px; background: var(--panel); }
.dl-note { padding: 0 28px 24px; font-size: var(--t-xs); color: var(--bone-2); }

/* ---------- motion ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal.in { opacity: 1; transform: none; filter: none; }
/* the panel powers on: segments light from left to right */
.hero .led-xl .s.on { animation: power .5s var(--ease) both; }
.hero .led-xl .d:nth-child(1) .s.on { animation-delay: .35s; }
.hero .led-xl .d:nth-child(2) .s.on { animation-delay: .45s; }
.hero .led-xl .d:nth-child(3) .s.on { animation-delay: .55s; }
.hero .led-xl .d:nth-child(4) .s.on { animation-delay: .65s; }
.hero .led-xl .d:nth-child(5) .s.on { animation-delay: .75s; }
.hero .led-xl .d:nth-child(6) .s.on { animation-delay: .85s; }
.hero .led-xl .d:nth-child(7) .s.on { animation-delay: .95s; }
@keyframes power { 0% { background: var(--gold-ghost); filter: none; } 40% { background: #fff; } 100% { background: var(--gold); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; filter: none; }
}

/* ---------- tablet ---------- */
@media (max-width: 1080px) {
  .links { display: none; }
  .langs { margin-inline-start: auto; }
  .panel { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .panel-side, .panel-end { justify-content: center; text-align: center; }
  .panel-hint { max-width: none; }
  .steps { grid-template-columns: 1fr 1fr; }
  .feats, .faq, .sell-grid { grid-template-columns: 1fr; }
  .feats-h, .faq h2 { position: static; }
  .perks { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
  .bar { gap: 10px; padding: 16px; }
  .mark span { display: none; }
  .bar-manage { padding: 0; width: 42px; }
  .bar-manage span { display: none; }
  .hero { padding-top: 104px; }
  .lede { font-size: var(--t-b); }
  .panel { padding: 22px 12px; gap: 16px; }
  .led-xl { font-size: 15vw; gap: .1em; }
  .hero-act .btn { flex: 1 1 100%; }
  .doors { grid-template-columns: 1fr; }
  .door { min-height: 220px; padding-top: 96px; }
  .sec-head { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .feat-list { grid-template-columns: 1fr; gap: 28px; }
  .led-mac { font-size: 5vw; gap: .1em; }
  .step .led-md { font-size: 11vw; }
  .faq summary { font-size: 17px; padding: 16px 18px; }
  .faq details p { padding: 0 18px 20px; }
  .foot-in { grid-template-columns: 1fr; }
  .foot-links { justify-content: flex-start; }
  .dl-body { grid-template-columns: 1fr; padding: 10px; }
  .dl-head { padding: 18px 18px 4px; }
  .dl-head h2 { font-size: 24px; }
}