/* حاسبة توب نت: شاشة لكل سؤال، بسيطة وهادية */
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(70% 50% at 50% 0%, #2a1f0e, transparent 70%), #0a0a0b; color: #f4f2fa; font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif; overflow-x: hidden; }
a { color: inherit; }
#app { max-width: 880px; margin: 0 auto; padding: 0 16px 140px; }
.top { display: flex; justify-content: space-between; padding: 20px 0; }
.top a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid #ffffff22; text-decoration: none; font-weight: 700; }
.top a:hover { background: #ffffff12; }
#stage { position: relative; }
.scr { animation: in .5s cubic-bezier(.2, 1, .3, 1) both; }
.scr.out { position: absolute; inset: 0 0 auto; animation: out .35s ease both; pointer-events: none; }
@keyframes in { from { opacity: 0; transform: translateX(calc(var(--d, 1) * -40px)); } to { opacity: 1; transform: none; } }
@keyframes out { to { opacity: 0; transform: translateX(calc(var(--d, 1) * 40px)); } }
.kicker { color: #f1b35c; font-weight: 700; font-size: 15px; }
.muted { color: #a9a6b2; line-height: 1.8; }

/* الشخصية */
.face { position: relative; width: 92px; height: 74px; border-radius: 22px; background: linear-gradient(180deg, #fff, #e7e6f0); display: flex; justify-content: center; gap: 22px; padding-top: 22px; box-shadow: 0 0 40px #ffffff22; flex: none; animation: bob 3s ease-in-out infinite; }
.face i { width: 12px; height: 20px; border-radius: 8px; background: #111; animation: blink 4s infinite; }
.face b { position: absolute; bottom: 14px; left: 50%; width: 22px; height: 9px; margin-left: -11px; border-bottom: 3px solid #111; border-radius: 0 0 20px 20px; }
.face.think b { width: 12px; margin-left: -6px; border-radius: 0; }
.face.party b { height: 12px; background: #111; border-radius: 0 0 14px 14px; }
@keyframes bob { 50% { transform: translateY(-5px); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

.intro { text-align: center; padding: 60px 0 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.intro .face { width: 130px; height: 104px; padding-top: 30px; gap: 32px; }
.intro .face i { width: 16px; height: 28px; }
.intro h1 { margin: 0; font-size: clamp(44px, 8vw, 88px); font-weight: 900; line-height: 1.05; }
.intro p { max-width: 520px; margin: 0; color: #c9c6d2; font-size: 19px; line-height: 1.8; }

.dots { display: flex; gap: 8px; justify-content: center; margin: 10px 0 26px; }
.dots i { width: 34px; height: 6px; border-radius: 9px; background: #ffffff1a; transition: all .4s; }
.dots i.done { background: #f1b35c88; } .dots i.now { width: 56px; background: #f1b35c; }
.ask { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 14px; }
.bubble { position: relative; padding: 14px 18px; border-radius: 20px 20px 20px 6px; background: #ffffff10; border: 1px solid #ffffff1a; line-height: 1.8; color: #e6e3ee; animation: in .5s .15s both; }
[dir="rtl"] .bubble { border-radius: 20px 20px 6px 20px; }
h2 { margin: 6px 0 22px; font-size: clamp(30px, 4.5vw, 46px); font-weight: 900; }

.grid { display: grid; gap: 12px; }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.builds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 18px; border-radius: 22px; border: 1.5px solid #ffffff14; background: #ffffff08; color: inherit; font: inherit; text-align: start; cursor: pointer;
  animation: pop .5s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i) * 60ms); transition: transform .2s, border-color .2s, background .2s; }
.card:hover { transform: translateY(-4px); border-color: #f1b35c66; }
.card.on { border-color: #f1b35c; background: #f1b35c17; box-shadow: 0 0 0 3px #f1b35c22, 0 18px 40px -18px #f1b35c88; }
.card.on::after { content: "✓"; position: absolute; top: 14px; inset-inline-end: 14px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #f1b35c; color: #1a1206; font-weight: 900; animation: pop .35s both; }
.emo { font-size: 38px; line-height: 1; margin-bottom: 6px; }
.card b { font-size: 18px; } .card small { color: #a9a6b2; line-height: 1.6; }
.card ul { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; }
.card li.p { color: #8fe0b6; } .card li.c { color: #ff9b9b; }
.card li.p::before { content: "✓ "; } .card li.c::before { content: "✗ "; }
.badge { position: absolute; top: -11px; inset-inline-start: 16px; padding: 3px 12px; border-radius: 99px; background: #f1b35c; color: #1a1206; font-size: 12px; font-weight: 800; }
@keyframes pop { from { opacity: 0; transform: scale(.9) translateY(10px); } to { opacity: 1; transform: none; } }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 18px; border-radius: 999px; border: 1.5px solid #ffffff1a; background: #ffffff08; color: inherit; font: inherit; font-weight: 700; cursor: pointer; animation: pop .45s both; animation-delay: calc(var(--i) * 40ms); transition: all .2s; }
.chip span { font-size: 22px; }
.chip i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #ffffff14; font-style: normal; }
.chip:hover { border-color: #f1b35c66; }
.chip.on { border-color: #f1b35c; background: #f1b35c17; } .chip.on i { background: #f1b35c; color: #1a1206; }

.team { display: flex; justify-content: center; gap: 10px; margin: 6px 0 18px; }
.dev { width: 68px; height: 68px; border-radius: 20px; border: 1.5px solid #ffffff1a; background: #ffffff08; font-size: 34px; cursor: pointer; filter: grayscale(1); opacity: .35; transition: all .3s cubic-bezier(.2, 1.4, .4, 1); }
.dev.on { filter: none; opacity: 1; border-color: #f1b35c; background: #f1b35c17; transform: translateY(-6px); }
.range { width: 100%; accent-color: #f1b35c; height: 30px; }
.ends { display: flex; justify-content: space-between; align-items: center; color: #a9a6b2; font-weight: 700; }
.ends b { color: #f1b35c; font-size: 18px; }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.vs div { padding: 18px; border-radius: 20px; background: #ffffff08; border: 1px solid #ffffff14; }
.vs small { color: #a9a6b2; } .vs b { display: block; font-size: 24px; margin: 4px 0 10px; }
.vs i { display: block; height: 8px; width: var(--w); border-radius: 9px; background: #8fe0b6; transition: width .5s; }
.vs i.gold { background: #f1b35c; }

.nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; }
.go, .ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px; border-radius: 999px; font: inherit; font-weight: 800; font-size: 17px; cursor: pointer; text-decoration: none; transition: transform .2s, opacity .2s; }
.go { border: 0; background: #f1b35c; color: #1a1206; box-shadow: 0 14px 30px -10px #f1b35c88; }
.go:hover { transform: translateY(-2px); color: #1a1206; }
.go:disabled { opacity: .3; cursor: default; transform: none; }
.go.big { min-height: 64px; padding: 0 44px; font-size: 19px; margin-top: 10px; }
.ghost { border: 1px solid #ffffff22; background: transparent; color: inherit; }

.live { position: fixed; bottom: 16px; left: 50%; z-index: 9; display: flex; gap: 26px; padding: 12px 26px; border-radius: 999px; background: #1a160fee; border: 1px solid #f1b35c55; backdrop-filter: blur(10px); box-shadow: 0 20px 40px #0008; translate: -50% 140%; transition: translate .5s cubic-bezier(.2, 1.3, .4, 1); }
.live.on { translate: -50% 0; }
.live small { display: block; color: #a9a6b2; font-size: 12px; } .live b { color: #ffe2a2; font-size: 19px; }

.res { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 30px; }
.price { display: flex; align-items: baseline; gap: 10px; }
.price b { font-size: clamp(56px, 10vw, 104px); font-weight: 900; background: linear-gradient(90deg, #ffe2a2, #f1b35c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.price span { font-size: 22px; color: #f1b35c; font-weight: 800; }
.stats { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 10px 0; }
.stats div { min-width: 150px; padding: 16px; border-radius: 20px; background: #ffffff08; border: 1px solid #ffffff14; animation: pop .5s .5s both; }
.stats b { display: block; font-size: 22px; } .stats small { color: #a9a6b2; }
.why { max-width: 560px; padding: 14px 18px; border-radius: 16px; background: #ffffff08; cursor: pointer; }
.why summary { font-weight: 800; color: #f1b35c; } .why p { color: #c9c6d2; line-height: 1.8; margin: 10px 0 0; }
.bill { margin-top: 50px; padding: 30px; border-radius: 28px; background: #f4f2ea; color: #111; box-shadow: 0 30px 60px -30px #000; }
.bill h3 { margin: 6px 0 4px; font-size: 30px; } .bill .kicker { color: #b9771f; } .bill .muted { color: #555; }
.line { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; padding: 14px 0; border-top: 1.5px dashed #00000018; animation: pop .45s both; animation-delay: calc(.8s + var(--i) * 80ms); }
.line .emo { font-size: 28px; margin: 0; } .line b { display: block; } .line small { color: #666; font-size: 13.5px; }
.line em { font-style: normal; font-weight: 800; text-align: end; white-space: nowrap; } .line em small { display: block; font-weight: 500; }
.words { margin-top: 30px; text-align: center; }
.words > div { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; }
.word { display: inline-flex; flex-direction: column; gap: 0; padding: 12px 18px; border-radius: 18px; border: 1px solid #ffffff1a; background: #ffffff08; color: inherit; font: inherit; cursor: pointer; transition: all .3s; }
.word span { max-height: 0; overflow: hidden; color: #c9c6d2; font-size: 14px; transition: max-height .35s, margin .35s; }
.word.open { border-color: #f1b35c; } .word.open span { max-height: 60px; margin-top: 6px; }
.again { margin: 34px auto 0; display: flex; }

.boom { position: fixed; left: 50%; top: 40%; z-index: 20; pointer-events: none; }
.boom i { position: absolute; width: 10px; height: 14px; border-radius: 3px; animation: fly 1.8s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes fly { to { transform: translate(var(--x), calc(var(--y) * -1 + 400px)) rotate(var(--r)); opacity: 0; } }

@media (max-width: 760px) { .g3, .builds { grid-template-columns: 1fr 1fr; } .builds { grid-template-columns: 1fr; } .vs { grid-template-columns: 1fr; } .dev { width: 54px; height: 54px; font-size: 26px; } .ask .face { display: none; } }
@media (prefers-reduced-motion: reduce) { *, .scr, .card, .chip { animation: none !important; transition: none !important; } }

/* ============ لمسة أفخم ============ */
body { background: #07070a; }
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); opacity: .32; animation: drift 22s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { background: #f1b35c; top: -30vmax; left: -10vmax; }
.aurora i:nth-child(2) { background: #8b6cff; top: -20vmax; right: -25vmax; opacity: .22; animation-duration: 28s; }
.aurora i:nth-child(3) { background: #ff6f91; bottom: -40vmax; left: 20vmax; opacity: .14; animation-duration: 34s; }
@keyframes drift { to { transform: translate(8vmax, 6vmax) scale(1.15); } }
.stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(1px 1px at 10% 20%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 70% 15%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 40% 70%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 85% 60%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 25% 85%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 60% 40%, #fff 50%, transparent 51%);
  animation: twinkle 6s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: .2; } }

/* انتقال الشاشات: ضباب وتكبير */
@keyframes in { from { opacity: 0; transform: translateY(24px) scale(.97); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes out { to { opacity: 0; transform: translateY(-16px) scale(1.02); filter: blur(10px); } }

/* العنوان بلمعة */
.intro h1, h2 { background: linear-gradient(100deg, #fff 0%, #fff 40%, #ffe2a2 50%, #fff 60%, #fff 100%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 6s linear infinite; }
@keyframes sheen { from { background-position: 150% 0; } to { background-position: -100% 0; } }

/* الشخصية: عيون تتبع الماوس */
.face { box-shadow: 0 0 0 1px #fff3, 0 0 60px #ffffff30, 0 20px 40px #0008; }
.face i { translate: var(--ex, 0) var(--ey, 0); transition: translate .15s; }

/* فقاعة زجاجية */
.bubble { background: linear-gradient(135deg, #ffffff18, #ffffff08); backdrop-filter: blur(14px); box-shadow: 0 10px 30px #0006; }

/* الكروت: زجاج، ميلان ثلاثي الأبعاد، ونور يتبع الماوس */
.grid { perspective: 1000px; }
.card { overflow: hidden; background: linear-gradient(160deg, #ffffff12, #ffffff05); backdrop-filter: blur(16px); border-color: #ffffff1c;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .25s ease, border-color .25s, box-shadow .3s, background .3s; box-shadow: 0 20px 40px -24px #000; }
.card:hover { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }
.card .glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), #f1b35c33, transparent 60%); }
.card:hover .glow, .card.on .glow { opacity: 1; }
.card.on { background: linear-gradient(160deg, #f1b35c26, #f1b35c08); box-shadow: 0 0 0 1px #f1b35c, 0 0 40px -6px #f1b35c88, 0 24px 50px -20px #000; }
.ico3d { display: block; width: 92px; height: 92px; margin: -6px 0 4px; filter: drop-shadow(0 14px 18px #0009); transition: transform .4s cubic-bezier(.2, 1.6, .4, 1); transform: translateZ(30px); }
.ico3d img { width: 100%; height: 100%; object-fit: contain; }
.card:hover .ico3d { transform: translateZ(40px) scale(1.12) rotate(-6deg); }
.card.on .ico3d { animation: hop .7s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes hop { 40% { transform: translateZ(40px) translateY(-14px) scale(1.15) rotate(8deg); } }
.emo.big { font-size: 52px; filter: drop-shadow(0 10px 14px #0008); }
.g3 .card { align-items: center; text-align: center; padding: 26px 16px 22px; }

/* الأزرار الصغيرة */
.chip { position: relative; overflow: hidden; background: linear-gradient(160deg, #ffffff10, #ffffff04); backdrop-filter: blur(10px); }
.chip.on { box-shadow: 0 0 24px -6px #f1b35c; }
.chip.on span { animation: hop .6s; display: inline-block; }
.dev { position: relative; overflow: hidden; }
.dev.on { box-shadow: 0 0 24px -6px #f1b35c; animation: hop .5s both; animation-delay: calc(var(--i) * 70ms); }

/* موجة الضغط */
.ripple { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #ffe2a2; pointer-events: none; animation: rip .7s ease-out forwards; }
@keyframes rip { to { transform: scale(40); opacity: 0; } }

/* زرار التالي: لمعة */
.go { position: relative; overflow: hidden; background: linear-gradient(100deg, #e8992e, #ffe2a2 35%, #f1b35c 55%, #e8992e) 0 0 / 250% 100%; animation: sheen 4s linear infinite; }
.go:disabled { animation: none; background: #f1b35c; }

/* شريط التقدّم يلمع */
.dots i.now { background: linear-gradient(90deg, #f1b35c, #ffe2a2, #f1b35c) 0 0 / 200% 100%; animation: sheen 2s linear infinite; box-shadow: 0 0 14px #f1b35c; }

/* الشريط السفلي زجاج */
.live { background: linear-gradient(135deg, #2a2010e8, #120e08e8); box-shadow: 0 0 0 1px #f1b35c44, 0 20px 50px #000a, 0 0 40px -10px #f1b35c66; }

/* النتيجة */
.price b { background: linear-gradient(100deg, #e8992e, #ffe2a2 30%, #f1b35c 55%, #fff1c9 75%, #e8992e) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; animation: sheen 5s linear infinite; filter: drop-shadow(0 0 30px #f1b35c55); }
.res .face { width: 120px; height: 96px; padding-top: 28px; gap: 30px; animation: bob 3s ease-in-out infinite, party 1s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes party { 30% { transform: scale(1.25) rotate(-8deg); } 60% { transform: scale(.95) rotate(6deg); } }
.stats div { background: linear-gradient(160deg, #ffffff12, #ffffff04); backdrop-filter: blur(12px); }
.bill { background: linear-gradient(180deg, #fbf8f1, #efe9dc); transform-origin: top; animation: unroll .9s .5s cubic-bezier(.2, 1, .3, 1) both; position: relative; }
.bill::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 12px; background: radial-gradient(circle at 10px -2px, transparent 10px, #efe9dc 11px) 0 0 / 20px 12px repeat-x; }
@keyframes unroll { from { opacity: 0; transform: scaleY(.6) translateY(30px); } to { opacity: 1; transform: none; } }
.line { transition: background .2s; border-radius: 12px; padding-inline: 8px; } .line:hover { background: #00000008; }
.word { background: linear-gradient(160deg, #ffffff10, #ffffff04); }
@media (prefers-reduced-motion: reduce) { .aurora i, .stars, .card, .ico3d, .go, h2, .intro h1 { animation: none !important; } }

/* الشخصية بشكل شخصية الموقع: شاشة بيضاء، عيون بيضاوية كبيرة فيها لمعة، وخدود وردية */
.face { width: 110px; height: 88px; padding-top: 22px; gap: 26px; border-radius: 26px; background: linear-gradient(180deg, #ffffff, #e9e8f2); box-shadow: 0 0 0 1px #ffffff55, 0 0 50px #ffffff38, 0 22px 40px #000a; }
.face i { position: relative; width: 17px; height: 28px; border-radius: 12px; background: #0e0e12; }
.face i::after { content: ""; position: absolute; top: 5px; left: 4px; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.face u { position: absolute; top: 46px; width: 16px; height: 8px; border-radius: 50%; background: #ff8fa3; opacity: .45; filter: blur(2px); }
.face u:first-of-type { left: 14px; } .face u:last-of-type { right: 14px; }
.face b { bottom: 13px; width: 20px; height: 8px; margin-left: -10px; border-bottom: 3px solid #0e0e12; }
.face.think i { height: 22px; } .face.think b { width: 10px; margin-left: -5px; border-radius: 0; }
.face.party b { width: 22px; height: 12px; margin-left: -11px; background: #0e0e12; border: 0; border-radius: 0 0 12px 12px; box-shadow: inset 0 -4px 0 #ff8fa3; }
.face.party i { height: 14px; border-radius: 14px 14px 4px 4px; }
.intro .face, .res .face { width: 150px; height: 120px; padding-top: 30px; gap: 36px; border-radius: 34px; }
.intro .face i, .res .face i { width: 22px; height: 38px; border-radius: 16px; }
.intro .face i::after, .res .face i::after { top: 7px; left: 5px; width: 7px; height: 7px; }
.intro .face u, .res .face u { top: 64px; width: 22px; height: 10px; } .intro .face u:first-of-type, .res .face u:first-of-type { left: 20px; } .intro .face u:last-of-type, .res .face u:last-of-type { right: 20px; }
.intro .face b, .res .face b { bottom: 18px; }
.res .face.party i { height: 20px; }
.tech { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; direction: ltr; }
.tech span { padding: 4px 10px; border-radius: 999px; background: #ffffff10; border: 1px solid #ffffff1c; font-size: 12px; font-weight: 700; color: #ffe2a2; }
.tech.big { justify-content: center; margin: 4px 0 6px; } .tech.big span { font-size: 13px; padding: 6px 12px; }
.price b { font-size: clamp(40px, 7vw, 76px); white-space: nowrap; }
/* نطاق السعر: الرقمين بنفس اللمعة، من الشمال لليمين */
.price { direction: ltr; flex-wrap: wrap; justify-content: center; }
.price b { display: inline-flex; align-items: baseline; gap: .25em; background: none !important; filter: none; -webkit-text-fill-color: initial; }
.price b > span { background: linear-gradient(100deg, #e8992e, #ffe2a2 30%, #f1b35c 55%, #fff1c9 75%, #e8992e) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: sheen 5s linear infinite; filter: drop-shadow(0 0 24px #f1b35c55); }
.price b { color: #f1b35c; }
.price b > span { font-size: inherit !important; color: transparent; }
/* تقسيم السعر على الباك والفرونت والموبايل */
.parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; width: 100%; max-width: 760px; margin: 14px 0 4px; }
.parts div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 14px; border-radius: 20px; background: linear-gradient(160deg, #ffffff12, #ffffff04); border: 1px solid #ffffff1a; animation: pop .5s both; animation-delay: calc(.6s + var(--i) * 120ms); }
.parts span { font-size: 30px; } .parts b { font-size: 17px; } .parts small { color: #a9a6b2; font-size: 13px; }
.parts em { font-style: normal; color: #c9c6d2; font-size: 13px; margin-top: 6px; }
.parts strong { color: #ffe2a2; font-size: 19px; }
.techbox { max-width: 620px; padding: 16px 20px; border-radius: 18px; background: #f1b35c12; border: 1px dashed #f1b35c55; text-align: start; }
.techbox b { color: #f1b35c; } .techbox p { margin: 6px 0 0; color: #e6dcc6; line-height: 1.8; font-size: 14.5px; }
/* مجموعات الأجزاء */
.fgroup { margin-bottom: 18px; animation: in .5s both; animation-delay: calc(var(--i) * 70ms); }
.fgroup h4 { margin: 0 0 10px; font-size: 14px; font-weight: 800; color: #f1b35c; letter-spacing: .02em; }
.fgroup .chip { min-height: 48px; padding: 0 14px; font-size: 14.5px; }
.fgroup .chip span { font-size: 19px; }
/* سطور الثقة والضريبة تحت السعر */
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.trust span { padding: 7px 14px; border-radius: 999px; background: #8fe0b614; border: 1px solid #8fe0b655; color: #b9f0d3; font-size: 13.5px; font-weight: 700; }
.vat { margin: 2px 0 0; color: #8e8b98; font-size: 12.5px; }
.parts { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); max-width: 900px; }

/* ================= شكل أهدى وأفخم ================= */
body { background: radial-gradient(60% 45% at 50% -5%, #3a2a12 0%, transparent 70%), radial-gradient(40% 40% at 90% 30%, #1d1838 0%, transparent 70%), #07070b; }
.aurora i:nth-child(1) { background: #f1b35c; opacity: .18; } .aurora i:nth-child(2) { background: #6c5cff; opacity: .14; } .aurora i:nth-child(3) { opacity: .06; }
.floor { position: fixed; left: -50%; right: -50%; bottom: -10vh; height: 55vh; z-index: -1; pointer-events: none; transform: perspective(600px) rotateX(62deg); transform-origin: bottom;
  background-image: linear-gradient(#f1b35c22 1px, transparent 1px), linear-gradient(90deg, #f1b35c22 1px, transparent 1px); background-size: 60px 60px;
  -webkit-mask: linear-gradient(to top, #000 10%, transparent 85%); mask: linear-gradient(to top, #000 10%, transparent 85%); animation: floor 6s linear infinite; }
@keyframes floor { to { background-position: 0 60px, 0 0; } }
#app { padding-bottom: 160px; }

/* شاشة البداية */
.intro { padding-top: 24px; gap: 16px; }
.hero-stage { position: relative; display: grid; place-items: center; width: 320px; height: 260px; }
.halo { position: absolute; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, #f1b35c55, transparent 65%); filter: blur(10px); animation: pulse 3.5s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.15); opacity: .7; } }
.orbit { position: absolute; inset: 0; animation: spin 26s linear infinite; }
.orbit img { position: absolute; top: 50%; left: 50%; width: 54px; height: 54px; margin: -27px; object-fit: contain; filter: drop-shadow(0 10px 14px #0009);
  transform: rotate(var(--a)) translate(140px) rotate(calc(-1 * var(--a))); animation: counter 26s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes counter { to { rotate: -360deg; } }
.intro .face { position: relative; z-index: 2; }
.intro h1 { font-size: clamp(42px, 7vw, 80px); }
.intro p { font-size: 17px; color: #bdb9c8; max-width: 560px; }
.preview { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 8px 0 4px; padding: 0; list-style: none; }
.preview li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: 999px; background: #ffffff0d; border: 1px solid #ffffff1a; font-weight: 700; font-size: 14px; color: #e6e3ee; animation: pop .5s both; animation-delay: calc(.3s + var(--i) * 90ms); }
[dir="rtl"] .preview li { padding: 8px 8px 8px 16px; }
.preview b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #f1b35c, #e8992e); color: #1a1206; font-size: 13px; }
.cta-start { gap: 12px; padding: 0 48px; }
.cta-start .arr { display: inline-block; animation: nudge 1.4s ease-in-out infinite; }
[dir="ltr"] .cta-start .arr { transform: scaleX(-1); }
@keyframes nudge { 50% { translate: -6px 0; } }
.itrust { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; color: #8fe0b6; font-size: 13.5px; font-weight: 700; }

/* خطوات بأسماء بدل النقط */
.stepper { display: flex; justify-content: center; gap: 6px; margin: 4px 0 26px; padding: 0; list-style: none; }
.stepper li { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; color: #8e8b98; font-size: 13.5px; font-weight: 700; transition: all .4s; }
[dir="rtl"] .stepper li { padding: 6px 6px 6px 14px; }
.stepper li + li::before { content: ""; width: 22px; height: 2px; margin-inline-end: 6px; background: #ffffff1f; border-radius: 2px; }
.stepper i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #ffffff10; border: 1px solid #ffffff1f; font-style: normal; font-size: 12.5px; }
.stepper li.done { color: #c9c6d2; } .stepper li.done i { background: #8fe0b622; border-color: #8fe0b6; color: #8fe0b6; } .stepper li.done + li::before { background: #8fe0b6; }
.stepper li.now { color: #fff; background: #f1b35c1a; box-shadow: 0 0 0 1px #f1b35c66 inset; } .stepper li.now i { background: linear-gradient(135deg, #f1b35c, #e8992e); border: 0; color: #1a1206; box-shadow: 0 0 16px #f1b35c88; }

/* راحة وهدوء: مسافات أوسع وكروت أنعم */
h2 { margin: 4px 0 26px; }
.card, .chip, .vs div, .stats div, .parts div { border-radius: 24px; }
.card { border-color: #ffffff14; }
.bubble { font-size: 15px; }
@media (max-width: 760px) { .stepper span { display: none; } .stepper li.now span { display: inline; } .hero-stage { width: 260px; height: 220px; } .orbit img { transform: rotate(var(--a)) translate(110px) rotate(calc(-1 * var(--a))); width: 44px; height: 44px; margin: -22px; } }
@media (prefers-reduced-motion: reduce) { .orbit, .orbit img, .halo, .floor, .cta-start .arr { animation: none; } }

/* ================= «مشروعك يتبني قدامك» ================= */
#app { max-width: 1240px; }
.shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: start; }
.shell:has(.pv.on) { grid-template-columns: minmax(0, 1fr) 380px; }
.pv { display: none; position: sticky; top: 20px; padding: 22px; border-radius: 30px; background: linear-gradient(170deg, #1a1712f0, #0e0d12f0); border: 1px solid #f1b35c33; box-shadow: 0 40px 80px -30px #000, 0 0 70px -30px #f1b35c88, inset 0 1px 0 #ffffff14; backdrop-filter: blur(20px); }
.pv.on { display: block; animation: pv-in .7s cubic-bezier(.2, 1.2, .3, 1) both; }
@keyframes pv-in { from { opacity: 0; transform: translateX(-30px) rotateY(12deg); } }
.shell:has(.pv.on) .live { display: none; }
.pv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.pv-price { text-align: end; opacity: .3; transition: opacity .4s; } .pv-price.on { opacity: 1; }
.pv-price b { display: flex; align-items: baseline; gap: 6px; direction: ltr; font-size: 28px; font-weight: 900; color: #ffe2a2; text-shadow: 0 0 24px #f1b35c66; }
.pv-price em { font-style: normal; font-size: 14px; color: #f1b35c; }
.pv-price small { color: #a9a6b2; font-size: 12.5px; }
/* أرقام تلف */
.dg { display: inline-block; height: 1.1em; overflow: hidden; vertical-align: bottom; }
.dg > span { display: flex; flex-direction: column; transform: translateY(calc(var(--n) * -1.1em)); transition: transform .8s cubic-bezier(.2, 1, .3, 1); }
.dg i { height: 1.1em; line-height: 1.1em; font-style: normal; }
.sep { display: inline-block; }

/* الأجهزة */
.devices { display: flex; justify-content: center; align-items: flex-end; gap: 0; min-height: 300px; perspective: 900px; }
.browser { flex: 1; border-radius: 16px; background: #f7f6fb; overflow: hidden; box-shadow: 0 30px 60px -20px #000c; transform: rotateY(8deg) rotateX(4deg); animation: dev-in .8s cubic-bezier(.2, 1.3, .3, 1) both; }
.browser .bar { display: flex; align-items: center; gap: 5px; padding: 9px 10px; background: #e9e7f0; }
.browser .bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff6f6f; } .browser .bar i:nth-child(2) { background: #ffcb5c; } .browser .bar i:nth-child(3) { background: #5fd38d; }
.browser .bar span { margin-inline-start: auto; font-size: 10.5px; font-weight: 800; color: #7a7690; direction: ltr; }
.phone { position: relative; width: 132px; flex: none; padding: 26px 8px 12px; border-radius: 28px; background: #111; box-shadow: 0 0 0 3px #2a2a30, 0 30px 60px -20px #000c; animation: dev-in .8s .15s cubic-bezier(.2, 1.3, .3, 1) both; }
.devices.both .phone { margin-inline-start: -40px; margin-bottom: -16px; transform: rotate(-4deg); z-index: 2; }
.phone .notch { position: absolute; top: 9px; left: 50%; width: 46px; height: 10px; margin-left: -23px; border-radius: 9px; background: #000; }
.phone .scr-in { border-radius: 18px; min-height: 230px; grid-template-columns: 1fr 1fr; }
@keyframes dev-in { from { opacity: 0; transform: translateY(40px) scale(.8); } }
.scr-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 12px; min-height: 230px; align-content: start; background: linear-gradient(180deg, #fff, #f2f0f8); }
.tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; background: #fff; box-shadow: 0 4px 12px #2a1f5a18, 0 0 0 1px #ece9f5; color: #2b2840; }
.tile b { font-size: 20px; line-height: 1; } .tile small { font-size: 9.5px; font-weight: 700; text-align: center; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.phone .tile b { font-size: 16px; } .phone .tile small { font-size: 8.5px; }
.tile.new { animation: fly .7s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes fly { 0% { opacity: 0; transform: translateY(-60px) scale(.3) rotate(-20deg); } 60% { transform: translateY(4px) scale(1.12) rotate(4deg); } 100% { opacity: 1; transform: none; } }
.pv-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 10px; text-align: center; color: #c9c6d2; }
.pv-empty .face { animation: bob 3s ease-in-out infinite; }
.pv-team { display: flex; align-items: center; gap: 6px; margin-top: 18px; padding-top: 14px; border-top: 1px dashed #ffffff1f; }
.pv-team small { color: #a9a6b2; margin-inline-end: 6px; font-weight: 700; }
.pv-team span { font-size: 24px; animation: pop .45s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--i) * 80ms); }

@media (max-width: 1000px) { .shell:has(.pv.on) { grid-template-columns: 1fr; } .pv { position: relative; top: 0; order: -1; } .devices { min-height: 220px; } .scr-in { min-height: 160px; } .shell:has(.pv.on) .live { display: flex; } }
@media (prefers-reduced-motion: reduce) { .tile.new, .browser, .phone, .pv.on { animation: none; } .dg > span { transition: none; } }

/* ================= صفحة البداية: ستيكرات وجو برمجة ================= */
/* الستيكرات: حد أبيض سميك وظل وتمايل */
.orbit img { width: 64px; height: 64px; margin: -32px;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(1.5px 1.5px 0 #fff) drop-shadow(-1.5px -1.5px 0 #fff) drop-shadow(0 12px 14px #000b);
  animation: counter 26s linear infinite, sticker-in .7s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: 0s, calc(.6s + var(--a) / 60deg * .12s); }
@keyframes sticker-in { from { opacity: 0; scale: .2; } }
.orbit img:hover { scale: 1.2; }
.intro .face { animation: drop 1s cubic-bezier(.3, 1.6, .5, 1) both, bob 3s 1s ease-in-out infinite; }
@keyframes drop { from { opacity: 0; transform: translateY(-120px) scale(.6); } }

/* كود عايم في الخلفية */
.intro { position: relative; }
.codes { position: absolute; inset: -40px -10vw 0; z-index: -1; pointer-events: none; overflow: hidden; }
.codes code { position: absolute; left: calc(5% + var(--i) * 9.5%); top: calc(10% + (var(--i) * 37 % 80) * 1%); padding: 5px 10px; border-radius: 8px; background: #ffffff08; border: 1px solid #ffffff14;
  font: 600 13px/1 ui-monospace, Consolas, monospace; color: #f1b35caa; direction: ltr; white-space: nowrap; opacity: 0; animation: code-float 9s ease-in-out infinite; animation-delay: calc(var(--i) * -0.9s); }
.codes code:nth-child(3n) { color: #a99bffaa; } .codes code:nth-child(3n+1) { color: #8fe0b6aa; }
@keyframes code-float { 0% { opacity: 0; transform: translateY(30px) rotate(-4deg); } 20%, 75% { opacity: .9; } 100% { opacity: 0; transform: translateY(-60px) rotate(4deg); } }

/* أقواس الكود حول العنوان */
.ttl { display: flex; align-items: center; justify-content: center; gap: .15em; flex-wrap: wrap; }
.ttl .br { font-family: ui-monospace, Consolas, monospace; font-weight: 400; font-size: .7em; color: #f1b35c; -webkit-text-fill-color: #f1b35c; text-shadow: 0 0 24px #f1b35c88; animation: br-in .8s .5s cubic-bezier(.2, 1.4, .4, 1) both, blink-br 2.4s 1.4s ease-in-out infinite; }
.ttl .br:last-child { animation-delay: .7s, 1.6s; }
@keyframes br-in { from { opacity: 0; transform: scale(.4); } }
@keyframes blink-br { 50% { opacity: .45; } }

/* التيرمنال */
.term { width: min(460px, 100%); margin-top: 8px; border-radius: 14px; overflow: hidden; background: #0d0d12ee; border: 1px solid #ffffff1a; box-shadow: 0 24px 50px -20px #000, 0 0 40px -16px #8fe0b655; text-align: left; animation: pop .6s 1.2s both; }
.term-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #1a1a22; }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff6f6f; } .term-bar i:nth-child(2) { background: #ffcb5c; } .term-bar i:nth-child(3) { background: #5fd38d; }
.term-bar span { margin-inline-start: auto; font: 600 11px ui-monospace, Consolas, monospace; color: #77748a; }
#term { margin: 0; padding: 12px 14px; min-height: 118px; font: 500 13.5px/1.7 ui-monospace, Consolas, monospace; color: #e6e3ee; white-space: pre-wrap; }
#term .ln.ok { color: #8fe0b6; }
#term .cur { display: inline-block; width: 8px; height: 15px; margin-left: 2px; vertical-align: -2px; background: #f1b35c; animation: cur 1s steps(1) infinite; }
@keyframes cur { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .codes code, .orbit img, .intro .face, .ttl .br, .term { animation: none; opacity: 1; } }

/* نص البداية: واضح ومميّز */
.ip { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 720px; }
.ip .hl { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 18px; background: linear-gradient(135deg, #f1b35c22, #f1b35c08); border: 1px solid #f1b35c55; font-size: 18px; font-weight: 800; color: #fff; box-shadow: 0 10px 30px -14px #f1b35c88; animation: pop .6s .4s cubic-bezier(.2, 1.5, .4, 1) both; }
.ip .hl + .hl { animation-delay: .55s; }
.ip .hl b { font-size: 30px; font-weight: 900; line-height: 1; background: linear-gradient(180deg, #ffe7b0, #e8992e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ip .lead { flex-basis: 100%; font-size: 19px; line-height: 1.9; color: #e6e3ee; font-weight: 600; animation: in .7s .7s both; }
.ip .lead b { color: #f1b35c; font-size: 22px; }

/* ================= شاشة الأنواع أروع ================= */
/* لوحة المشروع وهي فاضية: مخطط هندسي */
.pv-empty { padding: 10px 4px 20px; gap: 16px; }
.bp { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; border: 1.5px dashed #7fb2ff66;
  background: linear-gradient(#7fb2ff14 1px, transparent 1px) 0 0 / 18px 18px, linear-gradient(90deg, #7fb2ff14 1px, transparent 1px) 0 0 / 18px 18px, #0c1a2e; }
.bp-bar { display: flex; gap: 5px; padding: 10px; border-bottom: 1.5px dashed #7fb2ff44; }
.bp-bar i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #7fb2ff88; }
.bp-body { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.bp-body span { height: 10px; border-radius: 6px; border: 1.5px dashed #7fb2ff66; }
.bp-body .w60 { width: 60%; } .bp-body .w90 { width: 90%; } .bp-body .w40 { width: 40%; }
.bp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bp-grid i { height: 46px; border-radius: 8px; border: 1.5px dashed #7fb2ff66; animation: bp-pulse 2.4s ease-in-out infinite; }
.bp-grid i:nth-child(2) { animation-delay: .3s; } .bp-grid i:nth-child(3) { animation-delay: .6s; }
@keyframes bp-pulse { 50% { background: #7fb2ff14; border-color: #7fb2ffaa; } }
.bp .scan { position: absolute; left: 0; right: 0; top: 0; height: 40px; background: linear-gradient(180deg, transparent, #7fb2ff33, transparent); animation: scan 2.6s linear infinite; }
@keyframes scan { from { transform: translateY(-40px); } to { transform: translateY(260px); } }
.pv-empty p { color: #c9c6d2; font-weight: 600; }

/* كروت الأنواع: ستيكر، لون لكل كارت، رقم */
.g3 .card { --tint: #f1b35c; }
.card.type-landing { --tint: #ffd34d; } .card.type-website { --tint: #b9a8ff; } .card.type-store { --tint: #ffb36b; }
.card.type-app { --tint: #ff6f91; } .card.type-system { --tint: #6fe3b4; } .card.type-platform { --tint: #c48bb0; }
.g3 .card { background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--tint) 14%, transparent), transparent 60%), linear-gradient(160deg, #ffffff10, #ffffff04); }
.g3 .card:hover { border-color: color-mix(in srgb, var(--tint) 60%, transparent); box-shadow: 0 24px 50px -24px color-mix(in srgb, var(--tint) 70%, #000); }
.g3 .card.on { border-color: var(--tint); box-shadow: 0 0 0 1px var(--tint), 0 0 46px -8px var(--tint), 0 24px 50px -20px #000; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--tint) 28%, transparent), transparent 65%), linear-gradient(160deg, #ffffff12, #ffffff05); }
.g3 .card.on::after { background: var(--tint); }
.ico3d img { filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 14px 14px #000a); }
.card.on .ico3d { animation: spin-hop .8s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes spin-hop { 40% { transform: translateZ(40px) translateY(-16px) scale(1.18) rotate(-12deg); } 70% { transform: translateZ(40px) rotate(372deg) scale(1.05); } 100% { transform: translateZ(30px) rotate(360deg); } }
.card .num { position: absolute; top: 14px; inset-inline-start: 16px; font: 700 12px ui-monospace, Consolas, monospace; color: color-mix(in srgb, var(--tint) 80%, #fff); opacity: .7; }
.card.on .num { opacity: 1; }
/* ستيكرات المدار أصغر */
.orbit img { width: 40px !important; height: 40px !important; margin: -20px !important; }
@media (max-width: 760px) { .orbit img { width: 32px !important; height: 32px !important; margin: -16px !important; } }
/* العنوان: مساحة تحت الحروف علشان النقاط تبان، ويرتفع شوي */
.intro h1.ttl { line-height: 1.4; padding-bottom: .12em; margin-top: -18px; }

/* ================= مشاهد طرق البناء ================= */
.scene { position: relative; width: 100%; height: 110px; margin: 4px 0 10px; border-radius: 16px; background: #0006; border: 1px solid #ffffff12; display: flex; align-items: center; justify-content: center; gap: 18px; overflow: hidden; }
/* من الصفر: جهازين، كل واحد ينبني طوبة طوبة لحاله */
.sc-native .dev { position: relative; width: 46px; height: 78px; border-radius: 10px; border: 2px solid #ffffff55; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 5px; align-content: end; }
.sc-native .dev i { height: 11px; border-radius: 3px; background: #f1b35c; opacity: 0; animation: brick 4.8s infinite; }
.sc-native .dev.and i { background: #6fe3b4; }
.sc-native .dev i:nth-child(1) { animation-delay: .1s } .sc-native .dev i:nth-child(2) { animation-delay: .35s } .sc-native .dev i:nth-child(3) { animation-delay: .6s }
.sc-native .dev i:nth-child(4) { animation-delay: .85s } .sc-native .dev i:nth-child(5) { animation-delay: 1.1s } .sc-native .dev i:nth-child(6) { animation-delay: 1.35s }
.sc-native .dev.and i { animation-name: brick2; }
.sc-native .dev b { position: absolute; bottom: -18px; left: 50%; translate: -50% 0; font: 700 10px ui-monospace, monospace; color: #c9c6d2; }
@keyframes brick { 0% { opacity: 0; transform: translateY(-40px); } 8%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes brick2 { 0%, 35% { opacity: 0; transform: translateY(-40px); } 43%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* كروس: كود واحد يتوزّع */
.sc-cross { flex-direction: column; gap: 0; }
.sc-cross .src { font: 800 22px ui-monospace, monospace; color: #ffe2a2; text-shadow: 0 0 16px #f1b35c; animation: pulse 2.4s infinite; }
.sc-cross svg { width: 120px; height: 30px; fill: none; stroke: #f1b35c; stroke-width: 2.5; stroke-dasharray: 60; stroke-dashoffset: 60; animation: flow 2.4s infinite; }
.sc-cross .row { display: flex; gap: 36px; }
.sc-cross .ph { padding: 5px 8px; border-radius: 8px; border: 2px solid #f1b35c; font: 700 10px ui-monospace, monospace; color: #fff; animation: lit 2.4s infinite; }
@keyframes flow { 0% { stroke-dashoffset: 60; } 50%, 100% { stroke-dashoffset: 0; } }
@keyframes lit { 0%, 45% { background: transparent; box-shadow: none; } 60%, 100% { background: #f1b35c33; box-shadow: 0 0 14px #f1b35c88; } }
/* قالب: نسخة جاهزة تنزل، وجنبها نسخ تشبهها */
.sc-tpl .cp { width: 52px; height: 64px; border-radius: 8px; background: linear-gradient(#c49bff 0 18%, #ffffff22 18% 30%, transparent 30%), repeating-linear-gradient(#ffffff22 0 6px, transparent 6px 12px) 0 26px / 100% 40px no-repeat, #ffffff0d; border: 2px solid #ffffff33; opacity: .35; }
.sc-tpl .cp.main { opacity: 1; border-color: #c49bff; animation: drop-in 3s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.sc-tpl::after { content: "= نفس الشكل"; position: absolute; bottom: 6px; font-size: 11px; color: #ff9b9b; font-weight: 700; animation: fade-in 3s infinite; }
[dir="ltr"] .sc-tpl::after { content: "= same look"; }
@keyframes drop-in { 0% { transform: translateY(-90px); } 30%, 100% { transform: none; } }
@keyframes fade-in { 0%, 40% { opacity: 0; } 55%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scene * { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; } }

/* مشهد البيت */
.sc-house { gap: 10px; font-size: 40px; }
.sc-house .h { display: inline-block; }
.sc-house .crane { font-size: 30px; animation: crane 2.4s ease-in-out infinite; transform-origin: bottom; }
.sc-house .build { animation: rise 4s ease-out infinite; transform-origin: bottom; }
.sc-house .build.late { animation-delay: 1.4s; }
.sc-house .plan { font-size: 30px; animation: pulse 2.4s infinite; }
.sc-house .twin { animation: rise 2.4s ease-out infinite; transform-origin: bottom; }
.sc-house .ready { animation: drop-in 3s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.sc-house .same { opacity: .45; }
@keyframes rise { 0% { transform: scaleY(0); opacity: 0; } 35%, 85% { transform: scaleY(1); opacity: 1; } 100% { opacity: 0; } }
@keyframes crane { 50% { transform: rotate(-8deg); } }
/* مقياس التكلفة والوقت */
.meter { display: flex; gap: 16px; margin: 4px 0 2px; font-size: 14px; letter-spacing: 2px; color: #f1b35c; }
.meter em { font-style: normal; color: #ffffff22; }

/* ================= شاشة الأجزاء ================= */
.ptools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.quick { min-height: 50px; padding: 0 22px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: 15.5px; color: #1a1206;
  background: linear-gradient(100deg, #e8992e, #ffe2a2 35%, #f1b35c 55%, #e8992e) 0 0 / 250% 100%; animation: sheen 4s linear infinite; box-shadow: 0 12px 30px -10px #f1b35c99; transition: transform .2s; }
.quick:hover { transform: translateY(-2px) scale(1.02); }
.picked { padding: 8px 16px; border-radius: 999px; background: #8fe0b614; border: 1px solid #8fe0b655; color: #b9f0d3; font-weight: 800; font-size: 14px; }
.ftabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: none; }
.ftab { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid #ffffff1a; background: #ffffff08; color: #c9c6d2; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; transition: all .25s; }
.ftab span { font-size: 18px; }
.ftab b { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: #f1b35c; color: #1a1206; font-size: 12px; }
.ftab:hover { color: #fff; border-color: #f1b35c55; }
.ftab.on { color: #1a1206; background: #fff; border-color: #fff; box-shadow: 0 10px 26px -10px #fff8; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 6px; }
.pcard { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 16px 16px; border-radius: 22px; border: 1.5px solid #ffffff14; background: linear-gradient(160deg, #ffffff10, #ffffff03); color: inherit; font: inherit; text-align: start; cursor: pointer;
  animation: pop .45s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i) * 55ms); transition: transform .25s, border-color .25s, box-shadow .3s, background .3s; }
.pcard:hover { transform: translateY(-4px); border-color: #f1b35c66; }
.pico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; font-size: 28px; background: radial-gradient(circle at 30% 25%, #ffffff30, #ffffff08); box-shadow: inset 0 0 0 1px #ffffff22, 0 10px 20px -8px #000; transition: transform .4s cubic-bezier(.2, 1.6, .4, 1); }
.pcard:hover .pico { transform: rotate(-8deg) scale(1.08); }
.pcard b { font-size: 16px; }
.pcard small { color: #b5b1c1; font-size: 13px; line-height: 1.7; }
.pcard small em { font-style: normal; color: #f1b35c; font-weight: 700; }
.pcard .tick { position: absolute; top: 14px; inset-inline-end: 14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #ffffff12; font-style: normal; font-weight: 900; transition: all .3s; }
.pcard.on { border-color: #f1b35c; background: radial-gradient(120% 90% at 50% 0%, #f1b35c2a, transparent 65%), linear-gradient(160deg, #ffffff12, #ffffff04); box-shadow: 0 0 0 1px #f1b35c, 0 0 40px -10px #f1b35c; }
.pcard.on .tick { background: #f1b35c; color: #1a1206; transform: scale(1.1); }
.pcard.on .pico { background: radial-gradient(circle at 30% 25%, #ffe2a2, #f1b35c55); animation: hop .6s; }
.pcard .rec { position: absolute; top: -10px; inset-inline-start: 14px; padding: 3px 10px; border-radius: 99px; background: #8fe0b6; color: #0b2a1c; font-size: 11.5px; font-weight: 800; box-shadow: 0 6px 14px -4px #8fe0b688; }
@media (max-width: 600px) { .pgrid { grid-template-columns: 1fr 1fr; } .pcard small { font-size: 12px; } }

/* ================= لمسة الواو ================= */
/* إطار نور يلف حوالين الكارت */
@property --rot { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.pcard { isolation: isolate; transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.pcard::before { content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: 23px; padding: 1.5px; opacity: 0; transition: opacity .3s;
  background: conic-gradient(from var(--rot), transparent 0 60%, #f1b35c, #fff1c9, #c49bff, transparent 95%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: rot 2.6s linear infinite; }
.pcard:hover::before, .pcard.on::before { opacity: 1; }
@keyframes rot { to { --rot: 360deg; } }
.pcard::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 22px; background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), #ffffff18, transparent 60%); opacity: 0; transition: opacity .3s; }
.pcard:hover::after { opacity: 1; }
.pcard .pico { transform: translateZ(30px); }
/* الأيقونة الطايرة والشرارات */
.ghost-fly { position: fixed; z-index: 50; display: grid; place-items: center; margin: 0; pointer-events: none; font-size: 28px; border-radius: 18px; background: radial-gradient(circle, #ffe2a2, #f1b35c); box-shadow: 0 0 30px #f1b35c; }
.spark { position: fixed; z-index: 49; width: 7px; height: 7px; border-radius: 50%; background: #ffe2a2; box-shadow: 0 0 10px #f1b35c; pointer-events: none; animation: spark .8s ease-out forwards; }
.spark:nth-child(3n) { background: #c49bff; } .spark:nth-child(3n+1) { background: #8fe0b6; }
@keyframes spark { to { transform: translate(var(--x), var(--y)) scale(0); opacity: 0; } }
/* الجهاز «يبلع» الجزء */
.pv.gulp { animation: gulp .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes gulp { 40% { transform: scale(1.04); box-shadow: 0 0 0 2px #f1b35c, 0 0 90px -10px #f1b35c; } }
/* التبويب المختار يلمع */
.ftab.on { background: linear-gradient(100deg, #fff, #fff6e0 50%, #fff) 0 0 / 200% 100%; animation: sheen 3s linear infinite; }