:root{--bg: #FFFFFF;--bg-card: #F8FAFE;--bg-hover: #EEF4FF;--text: #153055;--text-muted: #5B7A9E;--primary: #D2EBFF;--primary-dark: #A8D4F0;--accent: #153055;--accent-light: #2A5080;--gold: #B08D57;--border: #E0E8F2;--success: #16A34A;--danger: #DC2626;--radius-sm: 8px;--radius: 14px;--radius-lg: 20px;--shadow: 0 4px 24px rgba(0,0,0,.06);--shadow-lg: 0 12px 48px rgba(0,0,0,.1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Cairo,Tajawal,Segoe UI,sans-serif;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100dvh}html[dir=rtl] body{direction:rtl}html[dir=ltr] body{direction:ltr}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{font-family:inherit}.section{max-width:1100px;margin:0 auto;padding:3rem 1.5rem}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);transition:transform .2s ease,box-shadow .2s ease}.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem 1.4rem;border-radius:999px;font-size:.9rem;font-weight:600;cursor:pointer;border:none;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){transform:translateY(-2px)}.btn-ghost{border:1.5px solid var(--border);color:var(--text);background:transparent}.btn-ghost:hover:not(:disabled){background:var(--bg-hover)}.badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:600;padding:.2rem .6rem;border-radius:999px}.navbar{position:sticky;top:0;z-index:20;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--border)}.navbar select,.navbar button{transition:transform .15s ease,box-shadow .15s ease}.navbar select:hover,.navbar button:hover{transform:translateY(-1px)}.hero,.gate-card{position:relative;overflow:hidden}.gate-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--gold);border-radius:0 0 8px 8px;opacity:0;transition:opacity .2s}.gate-card:hover:before{opacity:1}.gate-card:hover{transform:translateY(-4px);box-shadow:0 12px 36px #0000001f}.product-card{display:flex;flex-direction:column}.product-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px #0000001a}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}html[dir="ltr"] @keyframes slideIn{from{transform:translate(-100%)}to{transform:translate(0)}}.fade-up{animation:fadeUp .5s ease forwards}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}@media(max-width:768px){.navbar{padding:0 .75rem;height:56px}.navbar>div:first-child>div:last-child{display:none}.hero{padding:2rem 1rem 2.5rem}.hero h1{font-size:clamp(1.4rem,6vw,1.8rem)}.hero p{font-size:.9rem}.section{padding:1.5rem 1rem}select,input{font-size:.8rem}}@media(max-width:480px){.navbar select{max-width:120px;font-size:.7rem}.navbar button{font-size:.7rem;padding:.25rem .5rem}}
