/* INTXA v2 — "Four Orbits": افهم · ابنِ · أعِدّ · احكُم
   Layered over app.css (components, lab, modal, pricing). */

/* ---------- tokens ---------- */
:root.v2,
:root.v2[data-theme="dark"] {
  --void: #050816;
  --orbit: #0A0F2C;
  --nebula: #131A44;
  --line: #20295E;
  --x-core: #4C8DFF;
  --tone-found: #7AA8FF;
  --tone-build: #2DD4BF;
  --tone-data: #B794F6;
  --tone-gov: #FFC24B;
  --x-glass: rgba(10, 15, 44, .62);
  --x-grid: rgba(122, 168, 255, .07);
  --nav-bg: rgba(5, 8, 22, .7);
}
:root.v2[data-theme="light"] {
  --void: #F7F8FE;
  --orbit: #FFFFFF;
  --nebula: #EEF1FC;
  --line: #D8DEF3;
  --x-core: #2359D6;
  --tone-found: #2359D6;
  --tone-build: #0A7266;
  --tone-data: #6D3FC0;
  --tone-gov: #875400;
  --x-glass: rgba(255, 255, 255, .72);
  --x-grid: rgba(35, 89, 214, .07);
  --nav-bg: rgba(247, 248, 254, .8);
}
[data-tone="found"] { --tone: var(--tone-found); }
[data-tone="build"] { --tone: var(--tone-build); }
[data-tone="data"]  { --tone: var(--tone-data); }
[data-tone="gov"]   { --tone: var(--tone-gov); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.brand__gov { fill: var(--tone-gov); }
.x-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--ion)); box-shadow: 0 0 10px var(--tone, var(--ion)); flex: none; }
.x-num { font-family: var(--font-mono); font-size: .78rem; color: var(--tone, var(--ion-soft)); letter-spacing: .02em; }

/* ---------- shared section scaffolding ---------- */
.x-section { position: relative; padding-block: clamp(80px, 11vw, 136px); }
.x-section--deep { background: var(--orbit); border-block: 1px solid var(--line); }
.x-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 64px); }
.x-head--row { max-width: none; display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-end; justify-content: space-between; }
.x-head--row > div:first-child { max-width: 640px; }
.x-h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 700; }
.x-sub { margin-top: 16px; color: var(--haze); font-size: var(--fs-lg); font-family: var(--font-read); }
html[lang="ar"] .x-h2 { line-height: 1.45; }
html[lang="ar"] .x-sub { line-height: 2; }

/* ---------- HERO ---------- */
.x-hero { position: relative; overflow: hidden; isolation: isolate; }
.x-hero__bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 28% 48%, color-mix(in srgb, var(--x-core) 16%, transparent), transparent 42%),
    radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--tone-data) 12%, transparent), transparent 40%),
    radial-gradient(circle at 70% 95%, color-mix(in srgb, var(--tone-gov) 8%, transparent), transparent 40%),
    repeating-radial-gradient(circle at 28% 48%, transparent 0 79px, var(--x-grid) 79px 80px);
}
html[dir="rtl"] .x-hero__bg { transform: scaleX(-1); }
.x-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(24px, 4vw, 64px);
  align-items: center; min-height: min(900px, calc(100vh - 68px)); padding-block: 56px 72px;
}
.x-kicker {
  display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--haze);
  padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--x-glass);
}
.x-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tone-build); box-shadow: 0 0 10px var(--tone-build); }
.x-title { margin-top: 28px; font-size: clamp(2.5rem, 5.4vw, 4.6rem); font-weight: 700; line-height: 1.22; }
html[lang="ar"] .x-title { line-height: 1.5; }
html[lang="en"] .x-title { letter-spacing: -.02em; }
.x-title__line { display: flex; align-items: center; gap: .32em; animation: x-rise .8s var(--ease) both; }
.x-title__line:nth-child(2) { animation-delay: .12s; }
.x-title__line:nth-child(3) { animation-delay: .24s; }
.x-title__line:nth-child(4) { animation-delay: .36s; }
.x-title__mark {
  flex: none; width: .26em; height: .26em; border-radius: 50%; background: var(--tone);
  box-shadow: 0 0 0 .08em color-mix(in srgb, var(--tone) 25%, transparent), 0 0 .6em var(--tone);
}
@keyframes x-rise { from { opacity: 0; transform: translateY(18px); } }
.x-lead { margin-top: 28px; max-width: 46ch; color: var(--haze); font-size: var(--fs-lg); font-family: var(--font-read); }
html[lang="ar"] .x-lead { line-height: 2; }
.x-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.x-note { margin-top: 18px; font-size: var(--fs-sm); color: var(--haze); max-width: 52ch; }

/* orbital system */
.x-system { display: flex; flex-direction: column; align-items: center; gap: 20px; min-width: 0; }
.x-system__stage { position: relative; width: min(100%, 640px); aspect-ratio: 1; contain: layout paint; }
.x-system__rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.x-system__rings .ring { fill: none; stroke: var(--tone); stroke-opacity: .28; stroke-width: 1.2; transition: stroke-opacity .3s var(--ease); }
.x-system__rings .ring--gov { stroke-dasharray: 2 7; stroke-width: 2; stroke-opacity: .45; }
.x-system[data-focus] .ring { stroke-opacity: .12; }
.x-system[data-focus="found"] .ring[data-tone="found"],
.x-system[data-focus="build"] .ring[data-tone="build"],
.x-system[data-focus="data"] .ring[data-tone="data"],
.x-system[data-focus="gov"] .ring[data-tone="gov"] { stroke-opacity: .85; }

.x-core {
  position: absolute; left: 50%; top: 50%; width: 17%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px solid color-mix(in srgb, var(--x-core) 60%, transparent); cursor: pointer;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--x-core) 70%, white 10%), color-mix(in srgb, var(--x-core) 35%, var(--void)) 70%);
  box-shadow: 0 0 40px color-mix(in srgb, var(--x-core) 45%, transparent), inset 0 0 20px rgba(255, 255, 255, .12);
  display: grid; place-items: center; color: #fff; z-index: 2;
}
.x-core__label { font-weight: 600; font-size: clamp(.8rem, 1.4vw, 1rem); text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
.x-core__pulse { position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--x-core); animation: x-pulse 3.2s var(--ease) infinite; }
@keyframes x-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }

.x-station {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; z-index: 3;
  background: var(--void); border: 1.5px solid var(--tone); color: var(--tone);
  box-shadow: 0 0 0 4px var(--void);
  transition: background-color .15s linear, color .15s linear, opacity .2s linear;
  will-change: transform; backface-visibility: hidden;
}
.x-station::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--tone) 45%, transparent), transparent 70%);
  opacity: .35; transition: opacity .15s linear;
}
.x-station__n { position: relative; z-index: 1; font-family: var(--font-mono); font-size: .8rem; font-weight: 500; }
.x-station:hover, .x-station:focus-visible, .x-station.is-active { background: var(--tone); color: var(--void); }
.x-station:hover::after, .x-station:focus-visible::after, .x-station.is-active::after { opacity: 1; }
.x-system[data-focus] .x-station { opacity: .35; }
.x-system[data-focus] .x-station.is-focus { opacity: 1; }

.x-motion { position: absolute; inset-block-end: 2%; inset-inline-end: 2%; z-index: 4; border: 1px solid var(--line); background: var(--x-glass); }
.x-motion .i-play { display: none; }
.x-motion[aria-pressed="true"] .i-play { display: block; }
.x-motion[aria-pressed="true"] .i-pause { display: none; }

.x-info {
  width: min(100%, 560px); min-height: 118px; padding: 18px 22px; border-radius: var(--r-panel);
  border: 1px solid var(--line); background: var(--x-glass); text-align: center;
  border-top: 2px solid var(--tone, var(--x-core));
}
.x-info__meta { font-size: var(--fs-xs); color: var(--tone, var(--ion-soft)); font-weight: 500; }
.x-info__title { font-weight: 600; margin-top: 4px; }
.x-info__out { margin-top: 6px; color: var(--haze); font-size: var(--fs-sm); font-family: var(--font-read); }
.x-info__out:empty { display: none; }
html[lang="ar"] .x-info__title, html[lang="ar"] .x-info__out { line-height: 1.9; }

/* ---------- ORBITS lifecycle ---------- */
.x-cycle { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; position: relative; }
.x-cycle::before {
  content: ""; position: absolute; inset-inline: 8%; top: 29px; height: 1px; z-index: 0;
  background: linear-gradient(to left, var(--tone-found), var(--tone-build), var(--tone-data), var(--tone-gov));
  opacity: .5;
}
html[dir="ltr"] .x-cycle::before { background: linear-gradient(to right, var(--tone-found), var(--tone-build), var(--tone-data), var(--tone-gov)); }
.x-orbit {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; padding: 0 24px 28px;
  background: var(--orbit); border: 1px solid var(--line); border-radius: var(--r-card);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.x-orbit::before {
  content: ""; align-self: flex-start; width: 16px; height: 16px; margin-top: 21px; border-radius: 50%;
  background: var(--void); border: 2px solid var(--tone); box-shadow: 0 0 14px var(--tone);
}
.x-orbit:hover, .x-orbit:focus-visible, .x-orbit.is-active { border-color: var(--tone); box-shadow: 0 18px 50px -24px var(--tone); transform: translateY(-3px); }
.x-orbit__top { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-xs); color: var(--haze); }
.x-orbit__step { font-family: var(--font-mono); color: var(--tone); }
html[lang="ar"] .x-orbit__step { font-family: var(--font); }
.x-orbit__verb { font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 700; line-height: 1.2; color: var(--tone); }
html[lang="ar"] .x-orbit__verb { line-height: 1.5; }
.x-orbit__name { font-size: var(--fs-lg); }
.x-orbit__desc { color: var(--haze); font-size: var(--fs-sm); font-family: var(--font-read); flex: 1; }
html[lang="ar"] .x-orbit__desc { line-height: 1.95; }
.x-orbit__courses { list-style: none; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.x-orbit__courses a { display: flex; align-items: center; gap: 10px; color: var(--starlight); font-size: var(--fs-sm); padding: 4px 0; }
.x-orbit__courses a:hover { color: var(--tone); text-decoration: none; }

/* ---------- CATALOG ---------- */
.x-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.x-filter__btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: transparent; color: var(--haze); cursor: pointer; font-size: var(--fs-sm);
  transition: all .2s var(--ease);
}
.x-filter__btn .x-dot { width: 7px; height: 7px; box-shadow: none; }
.x-filter__btn:hover { color: var(--starlight); border-color: var(--tone, var(--ion)); }
.x-filter__btn[aria-pressed="true"] { color: var(--starlight); background: var(--nebula); border-color: var(--tone, var(--ion)); box-shadow: inset 0 0 0 1px var(--tone, var(--ion)); }

.x-courses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.x-course {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 24px;
  background: var(--void); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease), opacity .25s var(--ease);
}
.x-course::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px; background: linear-gradient(to left, var(--tone), transparent 70%); }
html[dir="ltr"] .x-course::before { background: linear-gradient(to right, var(--tone), transparent 70%); }
.x-course::after {
  content: ""; position: absolute; inset-inline-end: -60px; top: -60px; width: 160px; height: 160px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent); box-shadow: 0 0 0 24px color-mix(in srgb, var(--tone) 4%, transparent);
  pointer-events: none; transition: transform .4s var(--ease);
}
.x-course:hover, .x-course:focus-visible, .x-course.is-active { border-color: color-mix(in srgb, var(--tone) 70%, var(--line)); box-shadow: 0 20px 50px -30px var(--tone); transform: translateY(-3px); }
.x-course:hover::after, .x-course.is-active::after { transform: scale(1.15); }
.x-course[hidden] { display: none; }
.x-course__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.x-course__n { font-family: var(--font-mono); font-size: 2.1rem; font-weight: 500; line-height: 1; color: var(--tone); }
.x-course__path { font-size: var(--fs-xs); color: var(--haze); }
.x-course__t { font-size: var(--fs-lg); position: relative; }
.x-course__o { color: var(--haze); font-size: var(--fs-sm); font-family: var(--font-read); flex: 1; }
.x-course__ol { color: var(--starlight); font-weight: 600; }
html[lang="ar"] .x-course__t { line-height: 1.6; }
html[lang="ar"] .x-course__o { line-height: 1.95; }
.x-tags { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.x-tags li { font-size: var(--fs-xs); padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--haze); line-height: 1.7; }
.x-tags__more { color: var(--tone) !important; border-color: color-mix(in srgb, var(--tone) 40%, var(--line)) !important; font-family: var(--font-mono); }

/* ---------- LABS tabs ---------- */
.x-tabs { display: flex; gap: 10px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.x-tab {
  flex: 1 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 200px;
  padding: 14px 18px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--orbit);
  cursor: pointer; text-align: start; transition: all .2s var(--ease);
}
.x-tab__c { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--haze); }
.x-tab__t { font-weight: 600; }
.x-tab:hover { border-color: var(--ion); }
.x-tab[aria-selected="true"] { border-color: var(--ion); background: var(--nebula); box-shadow: var(--glow); }
.x-tab[aria-selected="true"] .x-tab__c { color: var(--ion-soft); }
.x-panel { padding: clamp(18px, 3vw, 32px); border-radius: var(--r-panel); border: 1px solid var(--line); background: var(--orbit); }
.x-panel[hidden] { display: none; }
.x-panel__intro { color: var(--haze); margin-bottom: 20px; font-family: var(--font-read); max-width: 80ch; }
html[lang="ar"] .x-panel__intro { line-height: 1.95; }
.x-panel .lab__play, .x-panel .code, .x-panel .check { background: var(--void); }

/* prompt anatomy */
.pa { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 24px; align-items: start; }
.pa__parts { display: flex; flex-direction: column; gap: 8px; }
.pa__part {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border-radius: var(--r-card);
  border: 1px solid var(--line); background: var(--void); cursor: pointer; text-align: start; font-weight: 500;
  transition: all .2s var(--ease);
}
.pa__part:hover:not([disabled]) { border-color: var(--pc); }
.pa__check { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line); display: grid; place-items: center; flex: none; transition: all .2s var(--ease); }
.pa__check .icon { width: 14px; height: 14px; opacity: 0; color: var(--void); }
.pa__part[aria-pressed="true"] { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 10%, var(--void)); }
.pa__part[aria-pressed="true"] .pa__check { background: var(--pc); border-color: var(--pc); }
.pa__part[aria-pressed="true"] .pa__check .icon { opacity: 1; }
.pa__part[disabled] { cursor: default; opacity: .85; }
.pa__part[data-part="role"], .pa__seg[data-part="role"] { --pc: var(--tone-found); }
.pa__part[data-part="context"], .pa__seg[data-part="context"] { --pc: var(--tone-data); }
.pa__part[data-part="task"], .pa__seg[data-part="task"] { --pc: var(--starlight); }
.pa__part[data-part="examples"], .pa__seg[data-part="examples"] { --pc: var(--tone-build); }
.pa__part[data-part="format"], .pa__seg[data-part="format"] { --pc: var(--tone-gov); }
.pa__part[data-part="limits"], .pa__seg[data-part="limits"] { --pc: var(--flare); }
.pa__label { font-size: var(--fs-xs); color: var(--haze); margin-bottom: 8px; }
.pa__prompt { padding: 18px 20px; border-radius: var(--r-card); background: var(--void); border: 1px solid var(--line); min-height: 140px; display: flex; flex-direction: column; gap: 8px; }
.pa__seg { position: relative; padding-inline-start: 14px; font-family: var(--font-read); animation: x-rise .35s var(--ease) both; }
.pa__seg::before { content: ""; position: absolute; inset-inline-start: 0; top: .35em; bottom: .35em; width: 3px; border-radius: 3px; background: var(--pc); }
html[lang="ar"] .pa__seg { line-height: 1.95; }
.pa__meter { margin-top: 20px; }
.pa__dims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.pa__dim { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); }
.pa__bar { height: 6px; border-radius: 6px; background: var(--nebula); overflow: hidden; }
.pa__fill { display: block; height: 100%; width: calc(var(--v, 0) * 100%); border-radius: 6px; background: linear-gradient(to left, var(--tone-build), var(--x-core)); transition: width .45s var(--ease); }
html[dir="ltr"] .pa__fill { background: linear-gradient(to right, var(--x-core), var(--tone-build)); }
.pa__verdict { margin-top: 14px; font-weight: 600; min-height: 1.9em; }
.pa__verdict[data-level="3"] { color: var(--tone-build); }

/* EU AI Act classifier */
.eu { max-width: 820px; }
.eu__progress { height: 4px; border-radius: 4px; background: var(--nebula); overflow: hidden; }
.eu__progress span { display: block; height: 100%; width: 0; background: var(--tone-gov); transition: width .4s var(--ease); }
.eu__count { margin-top: 14px; font-size: var(--fs-xs); color: var(--haze); font-family: var(--font-mono); }
.eu__case { margin-top: 8px; font-size: var(--fs-xl); font-weight: 600; min-height: 3.2em; }
html[lang="ar"] .eu__case { line-height: 1.7; }
.eu__tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.eu__tier {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border-radius: var(--r-card);
  border: 1px solid var(--line); background: var(--void); cursor: pointer; font-weight: 500; text-align: start;
  transition: all .2s var(--ease);
}
.eu__sw { width: 12px; height: 12px; border-radius: 3px; background: var(--tc); flex: none; }
.eu__tier[data-tier="prohibited"] { --tc: var(--flare); }
.eu__tier[data-tier="high"] { --tc: var(--tone-gov); }
.eu__tier[data-tier="limited"] { --tc: var(--x-core); }
.eu__tier[data-tier="minimal"] { --tc: var(--tone-build); }
.eu__tier:hover:not([disabled]) { border-color: var(--tc); }
.eu__tier[disabled] { cursor: default; }
.eu__tier.is-right { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 16%, var(--void)); box-shadow: 0 0 0 1px var(--tc); }
.eu__tier.is-wrong { border-color: var(--flare); opacity: .7; }
.eu__fb { margin-top: 16px; min-height: 1.9em; font-family: var(--font-read); }
html[lang="ar"] .eu__fb { line-height: 1.95; }
.eu__fb b { color: var(--tone-build); }
.eu__fb.is-wrong b { color: var(--flare); }
.eu__foot { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 16px; }
.eu__foot .icon { width: 16px; height: 16px; }
.eu__score { font-size: var(--fs-2xl); font-weight: 700; color: var(--tone-gov); }

/* ---------- METHOD ---------- */
.x-method { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.x-principle { margin-top: 28px; padding-inline-start: 18px; border-inline-start: 2px solid var(--line); }
.x-principle:nth-of-type(1) { border-color: var(--tone-found); }
.x-principle:nth-of-type(2) { border-color: var(--tone-build); }
.x-principle:nth-of-type(3) { border-color: var(--tone-gov); }
.x-principle h3 { font-size: var(--fs-lg); }
.x-principle p { margin-top: 6px; color: var(--haze); font-family: var(--font-read); }
html[lang="ar"] .x-principle p { line-height: 1.95; }
.x-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.x-steps::before { content: ""; position: absolute; inset-inline-start: 23px; top: 24px; bottom: 24px; width: 1px; background: linear-gradient(var(--tone-found), var(--tone-build), var(--tone-data), var(--tone-gov)); opacity: .6; }
.x-step { position: relative; display: flex; gap: 20px; padding-block: 16px; }
.x-step__n {
  flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--void); border: 1px solid var(--line); font-family: var(--font-mono); color: var(--ion-soft); z-index: 1;
}
.x-step h3 { font-size: var(--fs-lg); margin-top: 8px; }
.x-step p { margin-top: 4px; color: var(--haze); font-family: var(--font-read); }
html[lang="ar"] .x-step p { line-height: 1.95; }

/* ---------- PROJECTS ---------- */
.x-projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.x-project {
  display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; border-radius: var(--r-card);
  background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 7%, var(--orbit)), var(--orbit) 55%);
  border: 1px solid var(--line); transition: border-color .25s var(--ease);
}
.x-project:hover { border-color: color-mix(in srgb, var(--tone) 60%, var(--line)); }
.x-project__path { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--tone); }
.x-project__t { font-size: var(--fs-lg); }
.x-project__d { color: var(--haze); font-size: var(--fs-sm); font-family: var(--font-read); }
html[lang="ar"] .x-project__t { line-height: 1.6; }
html[lang="ar"] .x-project__d { line-height: 1.95; }
#projects .honest { background: var(--orbit); }

/* ---------- BUSINESS ---------- */
.x-biz { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.x-biz .checks { margin-block: 28px 32px; }
.x-biz .btn .icon { width: 18px; height: 18px; }
.x-biz__aside { padding: 28px; border-radius: var(--r-panel); border: 1px solid var(--line); background: var(--void); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.x-biz__aside h3 { font-size: var(--fs-xl); }
.x-biz__aside p { color: var(--haze); font-family: var(--font-read); }
html[lang="ar"] .x-biz__aside p { line-height: 1.95; }
.x-biz__aside .icon { width: 16px; height: 16px; }

/* ---------- PRICING (reuses app.css .plans) ---------- */
.x-pricing .section__title { font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 700; }
.x-pricing .plan { background: var(--orbit); }
.x-pricing .plan--featured { background: linear-gradient(170deg, color-mix(in srgb, var(--x-core) 12%, var(--orbit)), var(--orbit) 60%); }

/* ---------- FINAL CTA ---------- */
.x-final { padding-block: clamp(80px, 10vw, 128px); border-top: 1px solid var(--line); background:
  radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--x-core) 18%, transparent), transparent 60%); }
.x-final__inner { display: flex; flex-direction: column; align-items: center; gap: 36px; text-align: center; }
.x-final__lines { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px clamp(16px, 3vw, 40px); font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 700; line-height: 1.4; }
.x-final__lines span { color: var(--tone); }
.x-final__lines span + span::before { content: "·"; color: var(--line); margin-inline-end: clamp(16px, 3vw, 40px); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .x-cycle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .x-cycle::before { display: none; }
  .x-courses, .x-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .x-hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: 40px 56px; }
  .x-system__stage { width: min(100%, 520px); }
  .x-method, .x-biz { grid-template-columns: minmax(0, 1fr); }
  .pa { grid-template-columns: minmax(0, 1fr); }
  .pa__parts { flex-direction: row; flex-wrap: wrap; }
  .pa__part { flex: 1 1 140px; }
  .eu__tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .x-cycle, .x-courses, .x-projects { grid-template-columns: minmax(0, 1fr); }
  .x-station { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
  .x-station__n { font-size: .68rem; }
  .x-head--row { align-items: flex-start; }
  .x-tab { min-width: 170px; }
  .pa__dims { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .x-title__line, .pa__seg { animation: none; }
  .x-core__pulse { display: none; }
}
.x-info__link { display: inline-block; margin-inline-start: 6px; color: var(--tone, var(--ion-soft)); font-weight: 600; white-space: nowrap; }
.x-info__link::after { content: " ←"; }
html[dir="ltr"] .x-info__link::after { content: " →"; }
.eu__tiers[hidden] { display: none; }
.x-course__link { color: inherit; }
.x-course__link::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.x-course__link:hover { text-decoration: none; color: var(--tone); }
.x-course__link:focus-visible { outline: none; }
.x-course:has(.x-course__link:focus-visible) { outline: 2px solid var(--ion); outline-offset: 2px; }
@media (max-width: 720px) { .nav__login { display: none; } }

.x-more { text-align: center; margin-top: 36px; }
#courses .cc { background: var(--void); }