@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap";:root{font-family:IBM Plex Sans Arabic,system-ui,sans-serif;color:#172033;background:#f7f9fc;--primary:#5b4df6;--primary-2:#8b5cf6;--ink:#172033;--muted:#718096;--card:#fff;--soft:#f0f2ff;--line:#e7eaf2;--shadow:0 20px 60px rgba(31,41,71,.08)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:radial-gradient(circle at 85% -10%,#e9e5ff 0,transparent 35%),#f7f9fc;color:var(--ink);transition:background .25s,color .25s}.dark{--ink:#f5f7ff;--muted:#aab4ca;--card:#121a2d;--soft:#1b2340;--line:#27314b;--shadow:0 24px 70px rgba(0,0,0,.25);background:radial-gradient(circle at 85% -10%,#29204d 0,transparent 35%),#0b1020}.qr-shell{min-height:100vh}.qr-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:12px clamp(15px,5vw,72px);background:color-mix(in srgb,var(--card) 88%,transparent);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);border-bottom:1px solid var(--line)}.qr-brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:21px;font-weight:800;margin-inline-end:auto;white-space:nowrap}.qr-logo{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#4f46e5,#a855f7);box-shadow:0 8px 22px #5b4df633}.qr-nav>a:not(.qr-brand){color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;padding:10px 8px}.qr-nav>a:not(.qr-brand):hover{color:var(--primary)}.qr-control,.qr-btn{font:inherit;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:16px;padding:10px 13px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .2s,box-shadow .2s,background .2s}.qr-control{min-width:46px;white-space:nowrap}.qr-control:hover,.qr-btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px #5b4df61f}.qr-control:active,.qr-btn:active{transform:scale(.97)}.qr-control[data-icon]:before{content:attr(data-icon);font-size:16px}.qr-btn.primary{color:#fff;border:0;background:linear-gradient(135deg,var(--primary),var(--primary-2));box-shadow:0 14px 28px #5b4df633}.qr-hero{max-width:1240px;margin:auto;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;padding:clamp(58px,9vw,120px) clamp(18px,5vw,72px) 65px}.qr-kicker{display:inline-flex;padding:8px 12px;border-radius:999px;color:var(--primary);background:var(--soft);font-size:13px;font-weight:700}.qr-hero h1{font-size:clamp(42px,6vw,76px);letter-spacing:-2px;line-height:1.12;margin:18px 0}.qr-hero h1 span{background:linear-gradient(90deg,#4f46e5,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}.qr-hero p{max-width:650px;color:var(--muted);font-size:18px;line-height:2}.qr-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.qr-art{min-height:390px;border:1px solid var(--line);border-radius:36px;background:linear-gradient(145deg,#eef1ff,#fbf3ff);box-shadow:var(--shadow);display:grid;place-items:center;position:relative;overflow:hidden}.dark .qr-art{background:linear-gradient(145deg,#172447,#291b45)}.qr-art:before,.qr-art:after{content:"";position:absolute;border-radius:50%;border:1px solid #8b7cf655}.qr-art:before{width:310px;height:310px}.qr-art:after{width:220px;height:220px}.qr-orbit{width:170px;height:170px;border-radius:50%;display:grid;place-items:center;text-align:center;background:color-mix(in srgb,var(--card) 78%,transparent);border:1px solid #8b7cf688;box-shadow:0 0 60px #8b7cf633;animation:float 5s ease-in-out infinite;z-index:1}.qr-orbit strong{font-size:27px}.qr-section{max-width:1240px;margin:auto;padding:35px clamp(18px,5vw,72px)}.qr-section h2{font-size:30px;margin-bottom:24px}.qr-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.qr-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:24px;color:var(--ink);text-decoration:none;box-shadow:var(--shadow);transition:transform .25s,border-color .25s}.qr-card:hover{transform:translateY(-6px);border-color:#a79cff}.qr-card h3{margin:16px 0 7px;font-size:18px}.qr-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.8}.qr-icon{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,var(--soft),#e8e4ff);color:var(--primary);font-size:25px;font-weight:800;box-shadow:inset 0 0 0 1px #fff6}.dark .qr-icon{background:linear-gradient(145deg,#242d50,#30254c)}.qr-footer{margin-top:45px;padding:34px clamp(18px,5vw,72px);border-top:1px solid var(--line);color:var(--muted);text-align:center}.qr-modal{position:fixed;inset:0;z-index:50;display:none;place-items:center;background:#070b1899;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:20px}.qr-modal.open{display:grid}.qr-dialog{width:min(440px,100%);background:var(--card);border:1px solid var(--line);border-radius:28px;padding:30px;box-shadow:0 30px 100px #0004;animation:pop .22s ease}.qr-dialog h2,.qr-dialog h3{margin-top:8px}.qr-close{float:left;border:0;background:transparent;color:var(--muted);font-size:25px;cursor:pointer}.qr-dialog input{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--ink);font:inherit;margin:7px 0 12px}.reveal,.reveal.visible{opacity:1;transform:none}@keyframes float{50%{transform:translateY(-12px) rotate(3deg)}}@keyframes pop{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}@media(max-width:900px){.qr-nav{gap:7px}.qr-nav>a:not(.qr-brand){display:none}.qr-hero{grid-template-columns:1fr;gap:35px;padding-top:55px}.qr-art{min-height:290px}.qr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.qr-nav{padding:10px 12px}.qr-brand{font-size:18px}.qr-logo{width:38px;height:38px}.qr-control{padding:9px 10px;font-size:12px;border-radius:14px}.qr-control[data-icon]:before{font-size:14px}.qr-hero h1{font-size:43px;letter-spacing:-1px}.qr-hero p{font-size:16px}.qr-grid{grid-template-columns:1fr}.qr-actions .qr-btn{width:100%}.qr-section h2{font-size:25px}}
