:root{--bg:#f7fbfc;--paper:#ffffff;--ink:#102134;--muted:#6e7d8b;--teal:#10b8bf;--teal2:#34d2d2;--deep:#087b85;--ice:#e9f9fb;--warm:#fff7ea;--line:#e5eef1;--shadow:0 18px 50px rgba(18,55,70,.09);--radius:26px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Segoe UI",Tahoma,Arial,sans-serif;background:linear-gradient(180deg,#fff 0%,#f8fbfc 38%,#fff 100%);color:var(--ink);direction:rtl}button,input{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}
.page{min-height:100vh;overflow:hidden}.container{width:min(1160px,92%);margin:auto}.header{display:flex;align-items:center;justify-content:space-between;padding:22px 0 8px;position:relative;z-index:20}.logo{width:190px;max-width:44vw;height:auto;display:block;direction:ltr}.nav{display:flex;align-items:center;gap:30px;font-size:14px;color:#263847}.nav a{padding:10px 2px;position:relative}.nav a.active::after{content:"";position:absolute;right:0;left:0;bottom:2px;height:2px;background:var(--teal);border-radius:8px}.nav-cta,.primary-btn{border:0;background:linear-gradient(135deg,var(--teal),#08a6b0);color:#fff;border-radius:999px;padding:13px 24px;box-shadow:0 12px 26px rgba(16,184,191,.22);transition:.25s ease}.nav-cta:hover,.primary-btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(16,184,191,.28)}
.hero{display:grid;grid-template-columns:.93fr 1.07fr;gap:30px;align-items:center;padding:34px 0 52px;min-height:560px;position:relative}.hero-copy{padding-inline-start:24px}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--deep);font-size:13px;font-weight:700;letter-spacing:.02em;margin-bottom:12px}.eyebrow .dot{width:8px;height:8px;background:var(--teal);border-radius:50%;box-shadow:0 0 0 7px rgba(16,184,191,.10)}.hero h1{font-size:clamp(44px,6vw,78px);line-height:.98;margin:0 0 18px;font-weight:900;letter-spacing:-2px}.hero h1 .accent{color:var(--teal)}.hero h2{font-size:clamp(24px,3vw,38px);margin:0 0 14px;font-weight:800}.hero p{font-size:18px;line-height:1.9;color:var(--muted);margin:0 0 28px;max-width:540px}.hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.primary-btn{font-weight:800;font-size:18px;min-width:190px}.ghost-btn{border:0;background:transparent;color:#5b6f7d;font-weight:700;display:inline-flex;align-items:center;gap:8px;padding:12px}.play-dot{width:34px;height:34px;border-radius:50%;border:2px solid var(--teal);display:grid;place-items:center;color:var(--teal);font-size:13px}
.hero-art{position:relative;min-height:500px;display:grid;place-items:center}.hero-glow{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(65,222,224,.30) 0%,rgba(65,222,224,.08) 44%,transparent 68%);filter:blur(12px);animation:breathe 4.8s ease-in-out infinite}.vault-wrap{position:relative;width:min(620px,100%);animation:floatVault 5.8s ease-in-out infinite;filter:drop-shadow(0 30px 38px rgba(13,100,110,.12))}.vault-wrap img{width:100%;display:block;mix-blend-mode:multiply}.pass-float{position:absolute;left:4%;bottom:8%;width:120px;height:70px;border-radius:16px;background:linear-gradient(135deg,#10b8bf,#29d3d4);color:#fff;box-shadow:0 16px 32px rgba(16,184,191,.28);transform:rotate(-8deg);display:grid;place-items:center;font-weight:900;letter-spacing:.08em;animation:floatPass 3.3s ease-in-out infinite}.pass-float small{display:block;font-size:9px;font-weight:700;letter-spacing:.18em}.confetti{position:absolute;inset:0;pointer-events:none}.confetti i{position:absolute;width:12px;height:26px;border-radius:3px;background:var(--teal2);opacity:.7;animation:drift 5s ease-in-out infinite}.confetti i:nth-child(1){right:10%;top:8%;transform:rotate(18deg)}.confetti i:nth-child(2){left:9%;top:24%;transform:rotate(-20deg);animation-delay:.9s}.confetti i:nth-child(3){right:23%;bottom:7%;transform:rotate(32deg);animation-delay:1.8s}
@keyframes breathe{50%{transform:scale(1.08);opacity:.72}}@keyframes floatVault{50%{transform:translateY(-10px)}}@keyframes floatPass{50%{transform:translateY(-9px) rotate(-5deg)}}@keyframes drift{50%{transform:translateY(12px) rotate(50deg)}}@keyframes continuousSpin{to{transform:rotate(360deg)}}
.section-head{text-align:center;margin:0 auto 26px}.section-head h3{font-size:clamp(34px,4vw,54px);margin:0 0 9px;font-weight:900}.section-head h3 .accent{color:var(--teal)}.section-head p{margin:0;color:var(--muted);font-size:18px}.games{padding:28px 0 70px}.game-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.game-card{min-height:320px;border-radius:30px;padding:34px;position:relative;overflow:hidden;border:1px solid rgba(15,67,82,.05);display:grid;grid-template-columns:1fr 1fr;align-items:center;box-shadow:0 18px 45px rgba(17,70,86,.06);transition:transform .3s ease,box-shadow .3s ease}.game-card:hover{transform:translateY(-5px);box-shadow:0 24px 55px rgba(17,70,86,.11)}.game-card.wheel-card{background:linear-gradient(135deg,#eafcfd,#dff5f6)}.game-card.sort-card{background:linear-gradient(135deg,#fff9ee,#fff2df)}.game-copy h4{font-size:34px;margin:0 0 12px;font-weight:900}.game-copy p{color:#667782;line-height:1.7;margin:0 0 22px}.card-btn{border:0;background:transparent;color:var(--ink);font-weight:800;display:inline-flex;align-items:center;gap:10px;padding:0}.card-btn .round{width:42px;height:42px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center}
.wheel-preview,.puzzle-preview{display:grid;place-items:center}.preview-wheel-shell{width:235px;height:235px;position:relative;filter:drop-shadow(0 14px 26px rgba(18,62,74,.15))}.preview-wheel-rotor,.main-wheel-rotor{position:absolute;inset:0;border-radius:50%}.preview-wheel-rotor.idle,.main-wheel-rotor.idle{animation:continuousSpin 18s linear infinite}.preview-wheel-center,.main-wheel-center{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);background:#fff;border-radius:50%;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.12);overflow:hidden;z-index:2}.preview-wheel-center{width:74px;height:74px}.main-wheel-center{width:120px;height:120px}.preview-wheel-center img{width:48px;max-width:72%;height:auto}.main-wheel-center img{width:72px;max-width:72%;height:auto}.preview-wheel-pointer,.main-wheel-pointer{position:absolute;left:50%;transform:translateX(-50%);width:0;height:0;z-index:3}.preview-wheel-pointer{top:-16px;border-left:15px solid transparent;border-right:15px solid transparent;border-top:30px solid var(--teal)}.main-wheel-pointer{top:-22px;border-left:18px solid transparent;border-right:18px solid transparent;border-top:38px solid var(--teal)}
.puzzle-preview-board{width:240px;height:160px;border-radius:20px;overflow:hidden;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:6px;padding:6px;background:#fff;box-shadow:0 12px 24px rgba(18,62,74,.10)}.puzzle-preview-tile{border-radius:12px;background-image:url('assets/vault-hero.png');background-size:300% 200%;opacity:.86;position:relative}.puzzle-preview-tile::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.35);border-radius:12px}
.micro-note{text-align:center;color:#91a0aa;font-size:13px;padding:6px 0 38px}.divider{display:inline-flex;align-items:center;gap:16px}.divider::before,.divider::after{content:"";width:54px;height:1px;background:#ccd6da}
.overlay{position:fixed;inset:0;background:rgba(18,33,45,.42);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:22px;z-index:1000}.overlay.open{display:flex}.modal{width:min(560px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:30px;box-shadow:0 30px 100px rgba(7,43,54,.28);padding:30px;position:relative}.modal.wide{width:min(930px,100%)}.brand-chip{display:flex;align-items:center;justify-content:center;margin:0 auto 12px;background:transparent;border:0;padding:0}.brand-chip img{width:170px;max-width:46vw;height:auto;direction:ltr;display:block}.modal h5{font-size:34px;margin:0 0 8px;font-weight:900}.modal .sub{color:var(--muted);margin:0 0 22px;line-height:1.7}.close{position:absolute;left:18px;top:18px;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;color:#49606e;font-size:22px}.form-grid{display:grid;gap:14px}.field label{display:block;font-weight:800;font-size:13px;margin-bottom:7px}.field input{width:100%;border:1px solid #dce7ea;border-radius:15px;padding:15px 16px;outline:none;background:#fbfdfe;font-size:16px;transition:.2s}.field input:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(16,184,191,.10)}.demo-code{background:#eefafb;border:1px dashed #8fdbde;color:#31737a;padding:11px 14px;border-radius:13px;font-size:13px}.check{display:flex;gap:10px;align-items:flex-start;color:#607481;font-size:14px;line-height:1.5}.check input{margin-top:4px}.full{width:100%;margin-top:4px}.error{color:#c84d4d;font-size:13px;min-height:18px}.success-banner{display:none;margin-top:14px;background:#effaf4;color:#227447;border:1px solid #cdebd9;padding:12px 14px;border-radius:14px;font-size:14px;font-weight:700}.success-banner.show{display:block}
.game-stage{text-align:center}.main-wheel-shell{width:min(430px,84vw);height:min(430px,84vw);margin:14px auto 20px;position:relative;filter:drop-shadow(0 20px 32px rgba(18,62,74,.14))}.prize{min-height:52px;font-size:22px;font-weight:900;color:#0c7f88;display:grid;place-items:center;line-height:1.6;margin-top:8px}
.puzzle-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:start;margin-top:8px}.puzzle-board{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:10px;background:#fff;border:1px solid #dfecef;border-radius:24px;padding:10px;box-shadow:0 12px 28px rgba(18,62,74,.08);position:relative;overflow:hidden;min-height:360px}.puzzle-board::before{content:"";position:absolute;inset:10px;border-radius:18px;background-image:url('assets/vault-hero.png');background-size:300% 200%;background-position:center;opacity:.16;filter:saturate(.85)}.puzzle-slot{position:relative;border-radius:18px;border:2px dashed #bfdce0;background:rgba(255,255,255,.78);min-height:160px;overflow:hidden;z-index:1}.puzzle-slot::after{content:"قطعة ناقصة";position:absolute;inset:auto 0 10px 0;text-align:center;font-size:12px;color:#7a919b}.puzzle-slot.filled{border-style:solid;border-color:#8cdbdf;background:#fff}.puzzle-slot.filled::after{content:""}.slot-image{position:absolute;inset:0;background-size:300% 200%;border-radius:14px}
.puzzle-side{background:#fffaf0;border:1px solid #efe3c6;border-radius:24px;padding:18px}.puzzle-side h6{margin:0 0 12px;font-size:22px}.piece-tray{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.piece-item{position:relative;border:2px solid transparent;background:#fff;border-radius:16px;overflow:hidden;min-height:100px;box-shadow:0 8px 18px rgba(18,62,74,.08);transition:.18s}.piece-item:hover{transform:translateY(-2px)}.piece-item.selected{border-color:var(--teal);box-shadow:0 0 0 4px rgba(16,184,191,.12)}.piece-thumb{position:absolute;inset:0;background-size:300% 200%}.piece-label{position:absolute;left:8px;right:8px;bottom:8px;background:rgba(255,255,255,.92);border-radius:10px;padding:5px 6px;text-align:center;font-size:12px;font-weight:800;color:#254556}.piece-item.used{opacity:.38;pointer-events:none}
.timer-wrap{margin-top:16px;text-align:center}.timer-label{color:#6b7f89;font-size:14px;margin-bottom:8px}.timer-bar{height:14px;background:#edf4f5;border-radius:999px;overflow:hidden;border:1px solid #d9e7ea}.timer-fill{height:100%;width:100%;background:linear-gradient(90deg,#10b8bf,#4adecf);transition:width 1s linear}.timer-text{margin-top:8px;font-weight:900;color:#0c7f88;font-size:20px}.result-box{display:none;background:#effaf9;border:1px solid #c9ecea;border-radius:18px;padding:18px;margin-top:16px;line-height:1.8}.result-box.show{display:block}.toolbar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}.secondary{border:1px solid #cfdadd;background:#fff;color:#324b59;border-radius:999px;padding:12px 18px;font-weight:800}.status-toast{position:fixed;right:22px;bottom:22px;background:#102b34;color:#fff;padding:13px 16px;border-radius:14px;box-shadow:0 16px 35px rgba(0,0,0,.2);z-index:1200;display:none}.status-toast.show{display:block}
@media (max-width:900px){.nav{display:none}.hero{grid-template-columns:1fr;padding-top:18px}.hero-copy{text-align:center;padding:10px 0 0;order:1}.hero-copy p{margin-inline:auto}.hero-actions{justify-content:center}.hero-art{order:2;min-height:390px}.vault-wrap{width:min(540px,100%)}.game-card{grid-template-columns:1fr;min-height:0;gap:12px;text-align:center}.game-copy{order:2}.wheel-preview,.puzzle-preview{order:1}.puzzle-wrap{grid-template-columns:1fr}.piece-tray{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.container{width:min(94%,560px)}.header{padding-top:14px}.logo{width:158px}.nav-cta{padding:11px 18px;font-size:13px}.hero{padding-bottom:26px}.hero h1{font-size:48px}.hero h2{font-size:25px}.hero p{font-size:16px}.hero-art{min-height:330px}.pass-float{width:96px;height:58px;font-size:12px}.game-grid{grid-template-columns:1fr}.game-card{padding:24px}.game-copy h4{font-size:28px}.modal{padding:24px 18px}.brand-chip img{width:112px}.preview-wheel-shell{width:210px;height:210px}.main-wheel-shell{width:min(360px,88vw);height:min(360px,88vw)}.puzzle-board{min-height:260px}.piece-tray{grid-template-columns:repeat(2,1fr)}.puzzle-slot{min-height:110px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

@keyframes puzzleFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-5px) rotate(.4deg)}
}
.puzzle-preview-tile{
  animation:puzzleFloat 4.2s ease-in-out infinite;
  transform-origin:center;
}
.puzzle-preview-tile:nth-child(2){animation-delay:.25s}
.puzzle-preview-tile:nth-child(3){animation-delay:.5s}
.puzzle-preview-tile:nth-child(4){animation-delay:.75s}
.puzzle-preview-tile:nth-child(5){animation-delay:1s}
.puzzle-preview-tile:nth-child(6){animation-delay:1.25s}