/* عنوان الواجهة الأولى: «اجعل الذكاء الاصطناعي … يصنع لك دخلاً إضافياً» */
.hx-kicker { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; margin: 26px 0 22px; padding: 8px 16px 8px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: #e9e6f5; background: #ffffff0a; border: 1px solid #ffffff1f; backdrop-filter: blur(6px);
  animation: hx-up .9s cubic-bezier(.16,1,.3,1) .2s both; }
.hx-kicker i { width: 8px; height: 8px; border-radius: 50%; background: #5ad19a; box-shadow: 0 0 0 0 #5ad19a99; animation: hx-ping 2s infinite; }
@keyframes hx-ping { 70% { box-shadow: 0 0 0 9px #5ad19a00; } 100% { box-shadow: 0 0 0 0 #5ad19a00; } }
@keyframes hx-up { from { opacity: 0; translate: 0 16px; filter: blur(8px); } }

.vo-hero-muse { gap: .08em !important; font-size: clamp(38px, 4.6vw, 70px) !important; line-height: 1.22 !important; }
.hx-lead { color: #f4f2fa; animation: hx-up 1s cubic-bezier(.16,1,.3,1) .35s both; }

/* السطر المتبدّل: ذهبي، وكلماته تصعد من الضباب واحدة بعد الأخرى */
.vo-hero-rotate { min-height: 1.3em; gap: .25em !important; animation: none !important; white-space: nowrap !important; flex-wrap: nowrap !important; }
.vo-hero-rotate .w { display: inline-block; padding: 0 .02em .12em;
  background: linear-gradient(100deg, #fff1cf 0%, #ffd27a 30%, #f2a93b 60%, #ffe3a6 100%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 22px #f2a93b40);
  animation: hx-word-in .8s cubic-bezier(.16,1,.3,1) calc(var(--k) * 90ms) both, hx-shine 5s linear infinite; }
.vo-hero-rotate.out .w { animation: hx-word-out .38s cubic-bezier(.7,0,.84,0) calc(var(--k) * 40ms) both; }
@keyframes hx-word-in { from { opacity: 0; translate: 0 .5em; filter: blur(12px); } to { opacity: 1; translate: 0 0; filter: drop-shadow(0 6px 22px #f2a93b40); } }
@keyframes hx-word-out { to { opacity: 0; translate: 0 -.45em; filter: blur(10px); } }
@keyframes hx-shine { to { background-position: -220% 0; } }
.vo-hero-rotate svg { height: 1.25em !important; margin-block: -.2em !important; animation: hx-icon .9s cubic-bezier(.34,1.56,.64,1) .25s both, hx-bob 3.6s ease-in-out 1.2s infinite !important; }
.vo-hero-rotate.out svg { animation: hx-word-out .3s ease both !important; }
@keyframes hx-icon { from { opacity: 0; scale: .3; rotate: -25deg; } }
@keyframes hx-bob { 50% { translate: 0 -6px; rotate: 6deg; } }

/* أشرطة تقدّم بدل النقاط */
.vo-hero-steps { gap: 8px; margin-top: 18px !important; }
.voice-os .vo-hero-steps button { width: auto; height: 20px; }
.vo-hero-steps button > span { width: 34px !important; height: 3px !important; border-radius: 3px; background: #ffffff22 !important; }
.vo-hero-steps button[aria-pressed=true] > span { width: 34px !important; }
.vo-hero-steps i { width: 0; background: linear-gradient(90deg, #ffd27a, #f2a93b) !important; animation: hx-fill var(--ms) linear both !important; inset-inline-start: 0; left: auto; right: 0; }
@keyframes hx-fill { to { width: 100%; } }

.vo-hero-free { color: #a9a6b8 !important; font-size: 14.5px !important; letter-spacing: .01em; }

/* شريط أفكار الدخل */
.hx-ideas { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(760px, 92vw); margin-top: 26px;
  animation: hx-up 1s cubic-bezier(.16,1,.3,1) 1.1s both; }
.hx-ideas-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #8f8ba0; }
.hx-track { width: 100%; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.hx-row { display: flex; gap: 10px; width: max-content; animation: hx-marquee 38s linear infinite; }
.hx-row span { flex: none; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #e4e1ef; white-space: nowrap;
  background: linear-gradient(#ffffff0f, #ffffff06); border: 1px solid #ffffff1a; }
.hx-ideas:hover .hx-row { animation-play-state: paused; }
@keyframes hx-marquee { to { translate: 50% 0; } }

/* الكوكب أنزل قليلاً حتى لا يزاحم الشريط */
.lx-scene { --crest: 90%; }
.vo-hero-down { margin-top: 18px !important; }

@media (max-width: 699px) {
  .hx-kicker { font-size: 12.5px; margin-bottom: 16px; }
  .vo-hero-muse { font-size: clamp(30px, 8.6vw, 44px) !important; }
  .vo-hero-rotate { white-space: normal !important; flex-wrap: wrap !important; justify-content: center; }
  .hx-ideas { margin-top: 18px; }
  .lx-scene { --crest: 92%; }
}
@media (prefers-reduced-motion: reduce) {
  .vo-hero-rotate .w, .vo-hero-rotate svg, .hx-row, .hx-kicker, .hx-lead, .hx-ideas { animation: none !important; }
}
.vo-hero-get { margin-top: 56px !important; }
.vo-hero-muse { font-size: clamp(30px, 3.4vw, 50px) !important; }
.vo-hero-rotate { font-size: .72em; }
.vo-hero-get { margin-top: clamp(90px, 20svh, 210px) !important; }
.vo-hero-steps { margin-top: clamp(70px, 17svh, 180px) !important; } .vo-hero-get { margin-top: 26px !important; }
.vo-hero-muse { margin-top: clamp(60px, 15svh, 160px) !important; } .vo-hero-steps { margin-top: 18px !important; }
/* شعار loooooop: خط عرضٍ هندسي بدوائر o متطابقة، تدرّج فضي ولمعة */
.hx-lead { font-family: "Unbounded", sans-serif; font-weight: 500; font-size: 1.12em; letter-spacing: -.045em; line-height: 1.1;
  background: linear-gradient(100deg, #ffffff 0%, #d9d6e4 35%, #ffffff 50%, #bdb8cc 70%, #ffffff 100%) 0 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 24px #ffffff22);
  animation: hx-up 1s cubic-bezier(.16,1,.3,1) .35s both, hx-shine 7s linear infinite; }
.vo-hero-rotate { margin-top: .2em; }

/* ===== شعار حيّ: حروف o حلقات حقيقية، موجة ذهبية تمرّ عليها، ونقطة تدور داخل كل حلقة ===== */
.hx-mark { display: inline-flex !important; align-items: center; gap: .035em; background: none !important; color: #f4f2fa !important; -webkit-text-fill-color: currentColor; filter: drop-shadow(0 6px 30px #ffffff1c); }
.hx-mark .ch { font: 500 1em/1 "Unbounded", sans-serif; letter-spacing: 0; }
.hx-mark .o { position: relative; display: inline-block; width: .62em; height: .62em; margin-top: .14em; border-radius: 50%;
  border: .13em solid #f4f2fa; box-sizing: border-box; animation: hx-o 3.6s cubic-bezier(.34,1.56,.64,1) calc(var(--k) * .14s + 1s) infinite; }
/* نقطة ذهبية تدور داخل الحلقة، كل واحدة متأخرة قليلاً فتبدو موجة */
.hx-mark .o b { position: absolute; inset: 0; animation: hx-spin 3.6s linear calc(var(--k) * -.3s) infinite; }
.hx-mark .o b::after { content: ""; position: absolute; top: -.02em; left: 50%; width: .1em; height: .1em; translate: -50% 0; border-radius: 50%;
  background: #ffd27a; box-shadow: 0 0 .12em #f2a93b; opacity: 0; animation: hx-dot 3.6s ease calc(var(--k) * .14s + 1s) infinite; }
@keyframes hx-o { 0%, 34%, 100% { border-color: #f4f2fa; translate: 0 0; scale: 1; box-shadow: none; }
  10% { border-color: #ffd27a; translate: 0 -.12em; scale: 1.08; box-shadow: 0 0 .35em #f2a93b66, inset 0 0 .2em #f2a93b55; }
  20% { border-color: #f6c56a; translate: 0 0; scale: .98; } }
@keyframes hx-dot { 0%, 30%, 100% { opacity: 0; } 8%, 22% { opacity: 1; } }
@keyframes hx-spin { to { rotate: 360deg; } }
.hx-mark:hover .o { animation-duration: 1.4s; }
@media (prefers-reduced-motion: reduce) { .hx-mark .o, .hx-mark .o b, .hx-mark .o b::after { animation: none; } }

/* ===== الشعار كملصق: حروف ممتلئة بحدّ أبيض سميك، ميلان خفيف لكل حرف، وظل كأنه ملصوق ===== */
.hx-mark { gap: .02em; filter: drop-shadow(0 .06em 0 #00000080) drop-shadow(0 .18em .3em #000000a0); }
.hx-mark .ch { font-weight: 800; color: #17161c; -webkit-text-fill-color: #17161c;
  text-shadow: .045em 0 #fff, -.045em 0 #fff, 0 .045em #fff, 0 -.045em #fff, .032em .032em #fff, -.032em .032em #fff, .032em -.032em #fff, -.032em -.032em #fff; }
.hx-mark .ch:first-child { rotate: -6deg; } .hx-mark .ch:last-child { rotate: 5deg; }
.hx-mark .o { width: .66em; height: .66em; border: .15em solid #17161c; background: #fff0;
  box-shadow: 0 0 0 .045em #fff, inset 0 0 0 .045em #fff; }
.hx-mark .o:nth-of-type(odd) { rotate: -4deg; } .hx-mark .o:nth-of-type(even) { rotate: 3deg; }
@keyframes hx-o { 0%, 34%, 100% { border-color: #17161c; translate: 0 0; scale: 1; }
  10% { border-color: #f5b13e; translate: 0 -.14em; scale: 1.1; }
  20% { border-color: #f5b13e; translate: 0 0; scale: .97; } }
.hx-mark .o::before { content: ""; position: absolute; top: -.1em; left: .02em; width: .14em; height: .07em; border-radius: 50%; background: #fff; opacity: .9; rotate: -35deg; }
.hx-mark { font-size: 1.4em !important; margin-bottom: .1em; }
/* المجموعة كلها (الشعار، السطر الذهبي، الأشرطة، الزر) مثبّتة أسفل الشاشة فوق حافة الكوكب مباشرة */
.vo-hero-first { justify-content: flex-end !important; padding-bottom: calc(10svh + 46px) !important; }
.vo-hero-muse { margin-top: auto !important; }
.vo-hero-steps { margin-top: 16px !important; }
.vo-hero-get { margin-top: 22px !important; }
.vo-hero-down { position: absolute; bottom: -2px; left: 50%; translate: -50% 0; margin: 0 !important; }