/* Phynex — الموقع التعريفي. الجرأة في الهيرو فقط، والباقي هادئ ومنضبط */
.dark { background: var(--ink); color: var(--on-dark); }
.dark p { color: var(--on-dark-2); }
.skip { position: absolute; inset-inline-start: 1rem; inset-block-start: -4rem; z-index: 200; background: #fff; color: var(--indigo); padding: .6rem 1rem; border-radius: 10px; font-weight: 600; }
.skip:focus { inset-block-start: 1rem; }
section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.sec-head { margin-block-end: 2rem; }
.sec-head p { font-size: 1.1rem; }

/* ================= الهيرو ================= */
.hero { position: relative; min-block-size: 100svh; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; isolation: isolate; background: radial-gradient(120% 90% at 20% 110%, #20206e 0%, var(--ink) 60%); }
.field-canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: -2; opacity: 0; transition: opacity 1.4s var(--ease); }
.hero.field-on .field-canvas { opacity: 1; }
/* تعتيم ناعم خلف النص حتى يبقى مقروءاً فوق الحقل */
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to left, rgba(13, 13, 58, .88) 0%, rgba(13, 13, 58, .55) 45%, rgba(13, 13, 58, 0) 75%); }
@media (max-width: 760px) { .hero::after { background: linear-gradient(to bottom, rgba(13, 13, 58, .82) 0%, rgba(13, 13, 58, .6) 55%, rgba(13, 13, 58, .1) 100%); } }
.intro-waves { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding-block: 1rem; position: relative; z-index: 3; }
.topbar ul { display: flex; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.topbar a { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: .7rem; text-decoration: none; color: var(--on-dark-2); font-weight: 600; border-radius: 10px; }
.topbar a:hover { color: #fff; }
.top-code { min-block-size: 44px; padding-inline: 1rem; border-radius: var(--r-pill); border: 1.5px solid rgba(255, 255, 255, .35); background: transparent; color: #fff; font: 600 .95rem var(--f-body); cursor: pointer; margin-inline-start: .3rem; }
.top-mark img { inline-size: 34px; block-size: 34px; }
@media (max-width: 560px) { .topbar li:nth-child(-n+2) { display: none; } }
.hero-inner { align-self: center; position: relative; z-index: 3; padding-block: 1rem 2rem; max-inline-size: 72rem; }
.lockup { inline-size: clamp(230px, 52vw, 470px); aspect-ratio: 3 / 1; margin-block-end: .5rem; }
.lockup svg { inline-size: 100%; block-size: 100%; overflow: visible; }
.name-meaning { font-size: .9rem; color: var(--on-dark-2); margin-block-end: 1.6rem; letter-spacing: .01em; }
.name-meaning bdi { font-family: ui-monospace, Consolas, monospace; color: var(--cyan); font-weight: 600; }
.hero-title { font-size: clamp(2.5rem, 1.4rem + 5.2vw, 5.2rem); line-height: 1.1; font-weight: 800; color: #fff; margin-block-end: 1.1rem; max-inline-size: 14ch; }
.lede { font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem); color: var(--on-dark-2); max-inline-size: 36ch; }
.cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 1.6rem; }
.hero .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
/* عناصر تظهر بعد التسلسل الافتتاحي (opacity/transform فقط) */
.hero [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.hero.revealed [data-reveal] { opacity: 1; transform: none; }
.field-ui { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.4rem; padding-block: 0 1.4rem; color: var(--on-dark-2); font-size: .9rem; opacity: 0; transition: opacity .8s var(--ease); }
.hero.field-on .field-ui { opacity: 1; }
.field-hint { margin: 0; inline-size: 100%; font-size: .85rem; }
.field-ui label { display: inline-flex; align-items: center; gap: .6rem; min-block-size: 44px; }
.field-ui input[type="range"] { inline-size: 8.5rem; accent-color: var(--cyan); block-size: 28px; }
.field-ui output { inline-size: 3ch; display: inline-block; direction: ltr; }
.src-handle { position: absolute; inset-block-start: 0; left: 0; z-index: 4; inline-size: 44px; block-size: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85);
  background: radial-gradient(circle, #fff 0 4px, rgba(79, 216, 242, .35) 5px, transparent 70%); cursor: grab; touch-action: none; opacity: 0; transition: opacity .6s; will-change: transform; }
.src-handle[data-src="1"] { background: radial-gradient(circle, #fff 0 4px, rgba(199, 155, 255, .4) 5px, transparent 70%); }
.hero.field-on .src-handle { opacity: 1; }
.src-handle:active { cursor: grabbing; }

/* ================= جرّب الآن ================= */
.try { background: var(--ink-2); }
.free-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 1rem; }
.free-tabs button { min-block-size: 44px; padding: .4rem 1rem; border-radius: var(--r-pill); border: 1.5px solid var(--on-dark-line); background: transparent; color: var(--on-dark-2); font: 600 .95rem var(--f-body); cursor: pointer; }
.free-tabs button[aria-selected="true"] { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.projector { margin: 0; }
.screen { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #070722; border: 10px solid #22225c; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .06); }
@media (max-width: 600px) { .screen { aspect-ratio: 3 / 4; border-width: 6px; } }
.screen iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.screen-play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem; border: 0; color: #fff; font: 600 1.1rem var(--f-body); cursor: pointer;
  background: repeating-radial-gradient(circle at 50% 55%, rgba(79, 216, 242, .1) 0 2px, transparent 2px 26px), #070722; }
.play-ring { inline-size: 84px; block-size: 84px; border-radius: 50%; border: 2px solid var(--cyan); display: grid; place-items: center; transition: transform .2s var(--ease); }
.play-ring::after { content: ""; border-inline-start: 22px solid var(--cyan); border-block: 14px solid transparent; margin-inline-start: -6px; transform: scaleX(-1); }
.screen-play:hover .play-ring { transform: scale(1.06); }
.screen-cap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block-start: .9rem; color: var(--on-dark-2); }
.screen-cap .btn-ghost { color: var(--on-dark); }

/* ================= المنهج ================= */
.curriculum { background: var(--paper); }
.cur-stats { font-weight: 600; color: var(--muted); }
.cur-stats b { color: var(--indigo); font-family: var(--f-head); font-size: 1.2em; }
.cur-tools { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; margin-block-end: 1.4rem; }
.tabs { display: inline-flex; padding: 4px; border-radius: var(--r-pill); background: var(--paper-2); gap: 2px; }
.tabs button { min-block-size: 42px; padding: .35rem 1.1rem; border: 0; border-radius: var(--r-pill); background: transparent; font: 600 1rem var(--f-body); color: var(--muted); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--indigo); color: #fff; }
.search { flex: 1 1 14rem; }
.search input { inline-size: 100%; min-block-size: 48px; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: #fff; padding: .4rem 1.1rem; font: 400 1rem var(--f-body); color: var(--text); }
.free-only { display: inline-flex; align-items: center; gap: .5rem; min-block-size: 44px; font-weight: 600; color: var(--muted); }
.free-only input { inline-size: 20px; block-size: 20px; accent-color: var(--indigo); }
.cur-panel { display: grid; gap: .6rem; }
.chap { border-radius: var(--r-m); background: #fff; border: 1px solid var(--line); overflow: hidden; }
.chap > h3 { margin: 0; font-size: 1.05rem; }
.chap-btn { inline-size: 100%; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .9rem; padding: .85rem 1.1rem; min-block-size: 60px; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; text-align: start; }
.chap-n { inline-size: 2.2rem; block-size: 2.2rem; border-radius: 10px; display: grid; place-items: center; background: var(--paper-2); color: var(--indigo); font-family: var(--f-head); font-weight: 700; }
.chap-title { font-family: var(--f-head); font-weight: 600; font-size: 1.08rem; }
.chap-count { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.chev { inline-size: 12px; block-size: 12px; border-inline-end: 2.5px solid var(--muted); border-block-end: 2.5px solid var(--muted); transform: rotate(45deg); transition: transform .3s var(--ease); margin-inline: .3rem; }
.chap-btn[aria-expanded="true"] .chev { transform: rotate(-135deg); }
.exp-list { list-style: none; margin: 0; padding: 0 1.1rem 1rem; display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.exp-item { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-block-size: 52px; padding: .45rem .8rem; border-radius: 12px; background: var(--paper); border: 1px solid transparent; text-decoration: none; color: inherit; cursor: pointer; font: inherit; text-align: start; inline-size: 100%; }
.exp-item:hover { border-color: var(--line); }
.exp-item .t { font-weight: 600; line-height: 1.4; }
.exp-item.soon { opacity: .7; cursor: default; }
.lock { display: inline-block; inline-size: 10px; block-size: 8px; border-radius: 2px; background: currentColor; position: relative; margin-inline-end: 2px; }
.lock::before { content: ""; position: absolute; inset-inline-start: 1.5px; inset-block-start: -5px; inline-size: 7px; block-size: 7px; border: 1.6px solid currentColor; border-block-end: 0; border-radius: 4px 4px 0 0; box-sizing: border-box; }
.search-results { display: grid; gap: .4rem; }
.search-results .exp-item { background: #fff; border-color: var(--line); }
.search-results .where { font-size: .8rem; color: var(--muted); display: block; font-weight: 400; }
.empty { color: var(--muted); padding: 1rem 0; }

/* ================= القاعة ================= */
.classroom { background: var(--ink); }
.cls-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); }
@media (min-width: 700px) { .cls-grid { grid-template-columns: 1fr 1fr; } }
.cls-cell { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-m); background: var(--ink-2); border: 1px solid var(--on-dark-line); overflow: hidden; }
.cls-text { padding: 1rem 1.1rem 1.2rem; }
.cls-text h3 { font-size: 1.12rem; margin-block-end: .3rem; }
.cls-text p { font-size: .95rem; margin-block-end: .9rem; }
.mini { position: relative; aspect-ratio: 16 / 9; background: #070722; overflow: hidden; transition: transform .5s var(--ease), filter .5s; }
.mini canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.mini-bar { position: absolute; inset-inline: 10px; inset-block-end: 10px; display: flex; gap: 6px; padding: 6px; border-radius: 10px; background: rgba(30, 30, 98, .9); transition: transform .35s var(--ease), opacity .35s; }
.mini-bar span { flex: 1; block-size: 10px; border-radius: 6px; background: rgba(174, 182, 230, .35); }
.mini.bar-hidden .mini-bar { transform: translateY(140%); opacity: 0; }
.tiny-text { position: absolute; inset-block-start: 8px; inset-inline-start: 10px; font-size: 9px; color: rgba(174, 182, 230, .8); transition: opacity .4s; }
.mini.far { transform: scale(.42); filter: blur(.6px); }
.mini.far .tiny-text { opacity: .25; }
.net-badge { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; font-size: .75rem; font-weight: 600; padding: .1rem .55rem; border-radius: var(--r-pill); background: rgba(14, 138, 95, .9); color: #fff; }
.mini.off .net-badge { background: rgba(180, 84, 10, .95); }
.mini:fullscreen { aspect-ratio: auto; }

/* ================= الأسعار ================= */
.pricing { background: var(--paper); }
.pr-sub { font-size: 1.05rem; color: var(--muted); margin-block: 2rem .9rem; }
.plans-ind { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); align-items: stretch; }
.plan { position: relative; display: grid; grid-template-rows: auto auto auto auto 1fr auto; gap: .2rem; padding: 1.4rem 1.3rem 1.3rem; border-radius: var(--r-l); background: #fff; border: 1.5px solid var(--line); min-block-size: 18.5rem; min-inline-size: 0; }
.plan-features { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; align-content: start; gap: .6rem; font-size: .92rem; }
.plan-features li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .4rem; overflow-wrap: anywhere; }
.plan-features li::before { content: '✓'; color: var(--blue); font-weight: 700; }
.plan.best .plan-features li::before { color: var(--cyan); }
.plan-free { border-color: var(--blue); }
.plan-free .price { color: var(--blue); }
.plan .btn { white-space: normal; text-align: center; }
.plan h4 { font-family: var(--f-head); font-size: 1.15rem; margin: 0; }
.plan .price { font-family: var(--f-head); font-size: 2.1rem; font-weight: 700; color: var(--indigo); line-height: 1.2; margin-block-start: .4rem; }
.plan .price small { font-size: .9rem; font-weight: 600; color: var(--muted); }
.plan .eq { font-size: .92rem; color: var(--muted); }
.plan .note { font-size: .95rem; color: var(--muted); margin-block-start: .6rem; }
.plan .btn { margin-block-start: 1rem; inline-size: 100%; }
.plan.best { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.plan.best .price { color: #fff; } .plan.best .eq, .plan.best .note, .plan.best .price small { color: #C9CFF6; }
.plan.best .btn { --bg: var(--cyan); --fg: var(--ink); }
.best-badge { position: absolute; inset-block-start: -.8rem; inset-inline-start: 1.2rem; background: var(--cyan); color: var(--ink); font-size: .82rem; font-weight: 700; padding: .15rem .8rem; border-radius: var(--r-pill); }
.plans-sch { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.sch { display: flex; flex-direction: column; gap: .6rem; padding: 1.4rem 1.3rem; border-radius: var(--r-l); background: var(--paper-2); }
.sch header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.sch h4 { font-family: var(--f-head); font-size: 1.2rem; margin: 0; }
.sch .price { font-family: var(--f-head); font-size: 1.6rem; font-weight: 700; color: var(--indigo); }
.sch .price small { font-size: .85rem; color: var(--muted); }
.sch ul { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: .2rem; }
.sch .btn { align-self: flex-start; margin-top: auto; }
.sch .agree { color: var(--muted); }
.sch .agree em { font-style: normal; font-size: .82rem; font-weight: 600; background: #fff; border-radius: var(--r-pill); padding: 0 .55rem; margin-inline-start: .3rem; color: var(--indigo); }
.calc { margin-block-start: 2rem; display: grid; gap: 1.4rem; padding: 1.5rem 1.3rem; border-radius: var(--r-l); background: #fff; border: 1.5px solid var(--line); }
@media (min-width: 900px) { .calc { grid-template-columns: 1fr 1.3fr; } .quote { grid-column: 1 / -1; } }
.calc h3 { margin-block-end: .8rem; }
.calc-slider { display: grid; gap: .5rem; font-weight: 600; }
.calc-slider output { font-family: var(--f-head); font-size: 2.4rem; color: var(--indigo); line-height: 1; }
.calc-slider input { inline-size: 100%; accent-color: var(--indigo); block-size: 32px; }
.bar-row { display: grid; grid-template-columns: 9.5rem 1fr 7.5rem; align-items: center; gap: .8rem; min-block-size: 44px; font-size: .95rem; }
@media (max-width: 560px) { .bar-row { grid-template-columns: 1fr auto; } .bar-row .bar { grid-column: 1 / -1; grid-row: 2; } }
.bar { block-size: 14px; border-radius: 8px; background: var(--paper-2); overflow: hidden; }
.bar i { display: block; block-size: 100%; inline-size: 100%; border-radius: 8px; background: var(--muted); transform-origin: right center; transform: scaleX(0); transition: transform .45s var(--ease); }
#barSch { background: var(--indigo); }
.bar-row b { text-align: end; font-family: var(--f-head); }
.calc-save { font-weight: 700; color: var(--ok); margin: .4rem 0 0; min-block-size: 1.8em; }
.quote { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); align-items: end; padding-block-start: 1.2rem; border-block-start: 1px solid var(--line); }

/* ================= كيف تبدأ ================= */
.start { background: #fff; }
.steps { list-style: none; counter-reset: s; margin: 0 0 3rem; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.steps li { counter-increment: s; display: grid; gap: .2rem; padding-block-start: 3.2rem; position: relative; }
.steps li::before { content: counter(s); position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-head); font-weight: 700; color: #fff; background: var(--indigo); }
.steps li:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 1.2rem; inset-inline: 3rem 0; block-size: 2px; background: linear-gradient(to left, var(--line), var(--line) 60%, transparent); }
.steps b { font-family: var(--f-head); font-size: 1.15rem; }
.steps span { color: var(--muted); }
.install { display: grid; gap: 1rem; }
.os-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: center; min-inline-size: 0; }
@media (min-width: 820px) { .os-panel { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.os-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; counter-reset: o; }
.os-steps li { counter-increment: o; }
.os-steps button { inline-size: 100%; text-align: start; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .7rem; align-items: center; min-block-size: 56px; padding: .6rem .9rem; border-radius: 14px; border: 1.5px solid var(--line); background: var(--paper); font: inherit; color: inherit; cursor: pointer; }
.os-steps button::before { content: counter(o); inline-size: 2rem; block-size: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); font-weight: 700; color: var(--indigo); }
.os-steps button[aria-current="step"] { border-color: var(--indigo); background: var(--paper-2); }
.os-steps button[aria-current="step"]::before { background: var(--indigo); color: var(--on-dark); }
.os-steps button > span { min-inline-size: 0; overflow-wrap: anywhere; }
.os-steps button b { display: block; }
.install-step-detail { display: block; color: var(--muted); font-size: .92rem; margin-block-start: .25rem; }
.install-note { margin: 0; color: var(--muted); font-size: .9rem; max-inline-size: none; border-inline-start: 3px solid var(--line); padding-inline-start: .8rem; }
.install #osTabs { justify-self: start; max-inline-size: 100%; }
.install #osTabs button { padding-inline: .85rem; }
.device { box-sizing: border-box; min-inline-size: 0; justify-self: center; inline-size: min(310px, 100%); padding: 8px; border-radius: 26px; background: var(--ink-2); color: var(--text); }
.device-screen { line-height: 1.6; text-align: start; position: relative; block-size: 320px; border-radius: 19px; background: var(--paper); overflow: hidden; font-size: .85rem; }
.os-panel[data-os="pc"] .device { inline-size: min(410px, 100%); border-radius: 14px; }
.os-panel[data-os="pc"] .device-screen { block-size: 280px; border-radius: 8px; }
.guide-browser { min-inline-size: 0; display: flex; direction: ltr; gap: 8px; align-items: center; padding: 12px; border-block-end: 1px solid var(--line); background: var(--paper-2); }
.guide-address { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--paper); border-radius: var(--r-pill); padding: 4px 10px; color: var(--muted); font-family: var(--f-head); }
.guide-menu { font-size: 1.5rem; line-height: 1; padding: 4px; border-radius: 6px; }
.guide-site { display: grid; justify-items: center; gap: 6px; padding: 30px 16px; color: var(--indigo); }
.guide-site > b { font: 700 1.5rem var(--f-head); }
.guide-site > span { color: var(--muted); }
.guide-app-tiles { display: flex; gap: 8px; margin-block-start: 12px; }
.guide-app-tiles i { inline-size: 54px; block-size: 40px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px; }
.guide-toolbar { position: absolute; inset-inline: 0; bottom: 0; display: flex; align-items: center; justify-content: space-around; padding: 12px; background: var(--paper-2); color: var(--blue); }
.guide-share { display: grid; padding: 4px; border-radius: 4px; }
.guide-share svg { inline-size: 22px; block-size: 22px; }
.guide-dropdown { position: absolute; top: 58px; right: 12px; left: 12px; padding: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 10px; }
.guide-dropdown-title { color: var(--muted); font-size: .78rem; padding-block-end: 6px; border-block-end: 1px solid var(--line); }
.guide-muted-row { color: var(--muted); padding-inline: 8px; }
.guide-action { display: flex; align-items: center; gap: 6px; padding: 10px 8px; border-radius: 6px; font-weight: 600; }
.guide-action > span { font-size: 1.2rem; }
.guide-highlight { outline: 2px solid var(--blue); outline-offset: 1px; background: var(--paper-2); color: var(--indigo); }
.guide-sheet { top: auto; bottom: 60px; }
.guide-confirm { position: absolute; inset-inline: 18px; top: 84px; display: grid; justify-items: center; gap: 8px; padding: 18px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); text-align: center; }
.guide-confirm img { border-radius: 8px; }
.guide-confirm-action { background: var(--indigo); color: var(--on-dark); padding: 6px 28px; border-radius: var(--r-pill); font-weight: 600; }
.guide-caption { display: flex; gap: 10px; align-items: center; padding: 10px 6px 4px; color: var(--on-dark); font-size: .75rem; line-height: 1.5; min-block-size: 42px; }
.guide-caption .num { flex: none; color: var(--cyan); }
@media (max-width: 380px) { .install #osTabs button { padding-inline: .65rem; font-size: .9rem; } }
#installBtn { justify-self: start; }

/* ================= الأسئلة ================= */
.faq { background: var(--paper); }
.acc { max-inline-size: 48rem; border-block-start: 1px solid var(--line); }
.acc h3 { margin: 0; font-size: 1.08rem; }
.acc button { inline-size: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-block-size: 64px; padding: .8rem .2rem; border: 0; border-block-end: 1px solid var(--line); background: transparent; font: 600 1.06rem var(--f-head); color: var(--text); text-align: start; cursor: pointer; }
.acc button::after { content: ""; flex: none; inline-size: 14px; block-size: 14px; background: linear-gradient(var(--indigo), var(--indigo)) center / 100% 2.5px no-repeat, linear-gradient(var(--indigo), var(--indigo)) center / 2.5px 100% no-repeat; transition: transform .3s var(--ease); }
.acc button[aria-expanded="true"]::after { transform: rotate(45deg); }
.acc [role="region"] { padding: .9rem .2rem .4rem; border-block-end: 1px solid var(--line); }

/* ================= التذييل ================= */
.site-foot { padding-block: 3.5rem 0; }
.foot-in { display: grid; justify-items: start; gap: .8rem; padding-block-end: 2.5rem; }
.foot-in img { inline-size: 170px; block-size: auto; }
.copy { font-size: .9rem; }
.credit { margin: 0; max-inline-size: none; text-align: center; padding: 1rem var(--gutter) calc(5rem + env(safe-area-inset-bottom)); background: #08082a; color: var(--on-dark-2); font-size: .9rem; }
.have-code { transition: transform .3s var(--ease), opacity .3s; }
.have-code.away { transform: translateY(150%); opacity: 0; pointer-events: none; }
.have-code { position: fixed; z-index: 80; inset-inline-start: calc(var(--gutter) * .6); inset-block-end: calc(1rem + env(safe-area-inset-bottom)); box-shadow: 0 10px 28px -10px rgba(13, 13, 58, .6); --bg: var(--indigo); border-color: rgba(255, 255, 255, .25); }
.plan-free .old-price { font-size: .55em; color: var(--muted); margin-inline-end: .3em; }
.plan-headline { font-size: 1.12rem; font-weight: 500; line-height: 1.6; color: var(--ink, inherit); margin: .4rem 0 0; }