.etco-shell{--primary-brand:#06c;--text-primary:#0f172a;--text-secondary:#475569;--bg-body:#fafafc;font-family:Cairo,Tajawal,-apple-system,sans-serif}.hero-visual-card{border:1px solid var(--border-light,#e2e8f0);width:100%;transform-style:preserve-3d;background:#fff;border-radius:24px;padding:24px;transition:box-shadow .4s,border-color .4s;position:relative;box-shadow:0 15px 35px #0000000a,inset 0 0 0 1px #fff6}.hero-visual-card:hover{border-color:#93c5fd80;box-shadow:0 28px 60px #0066cc38,0 8px 24px #00000014,inset 0 0 0 1.5px #93c5fd99}.stat-glass{border:1px solid var(--border-light,#e2e8f0);text-align:center;width:100%;max-width:240px;transform-style:preserve-3d;background:#fff;border-radius:24px;padding:20px 24px;transition:box-shadow .4s,border-color .4s,transform .4s cubic-bezier(.16,1,.3,1);box-shadow:0 10px 30px #00000008,inset 0 0 0 1px #ffffff4d}.stat-glass:hover{border-color:#93c5fd99;transform:translateY(-4px)scale(1.02);box-shadow:0 15px 40px #0066cc1a}.hub-tab-btn{color:var(--text-secondary);font-size:var(--fs-small);cursor:pointer;background:#fff;border:1px solid #0066cc24;border-radius:16px;align-items:center;gap:10px;padding:12px 24px;font-weight:800;transition:all .3s cubic-bezier(.16,1,.3,1);display:inline-flex;box-shadow:0 4px 12px #00000008}.hub-tab-btn:hover{color:var(--primary-brand);background:#ffffffe6;transform:translateY(-3px);box-shadow:0 8px 20px #0066cc1f}.hub-tab-btn.active{color:var(--primary-brand);background:#fff;border:1px solid #0066cc4d;box-shadow:0 8px 24px #0066cc26}.hub-tab-btn svg{transition:transform .3s cubic-bezier(.16,1,.3,1),stroke .3s}.hub-tab-btn:hover svg{transform:scale(1.15)rotate(5deg)}.hub-category-text{transition:opacity .22s,transform .22s}.hub-category-text.swapping{opacity:0;transform:translateY(-4px)}.brand-tiles-grid{flex-wrap:wrap;justify-content:center;gap:12px;max-width:95%;margin:0 auto;display:flex}.brand-glass-tile{border:1px solid var(--border-light,#e2e8f0);cursor:pointer;will-change:transform, box-shadow, opacity;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;backface-visibility:hidden;background:#fff;border-radius:12px;width:135px;height:48px;transition:all .4s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;transform:translateZ(0);box-shadow:0 4px 15px #0000000d,inset 0 1px 1px #fffc}.brand-glass-tile:hover{box-shadow:0 15px 35px rgba(var(--brand-color-rgb), .15), 0 5px 15px #0000000d, inset 0 1px 2px #ffffffe6;border-color:rgba(var(--brand-color-rgb), .5)}.brand-tile-content{justify-content:center;align-items:center;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .4s cubic-bezier(.16,1,.3,1);display:flex;position:absolute;inset:0}.brand-tile-text{color:var(--brand-color);opacity:1;text-align:center;padding:0 6px;font-size:.8rem;font-weight:800;line-height:1.15;transform:translateY(0)}.brand-tile-logo{opacity:0;transform:translateY(25px)scale(.9)}.brand-tile-logo img{object-fit:contain;max-width:85%;max-height:28px}.brand-glass-tile:hover .brand-tile-text{opacity:0;transform:translateY(-25px)scale(.9)}.brand-glass-tile:hover .brand-tile-logo{opacity:1;transform:translateY(0)scale(1)}.brand-glass-tile:before{content:"";z-index:2;pointer-events:none;background:linear-gradient(90deg,#0000,#fffc,#0000);width:50%;height:100%;transition:all .6s;position:absolute;top:0;left:-100%;transform:skew(-20deg)}.brand-glass-tile:hover:before{left:150%}.brand-glass-tile.no-page{border-style:dashed;border-color:#0066cc59}@keyframes drop-fall{0%{opacity:0;transform:translate(-50%,-140%)scale(.35)}25%{opacity:1}70%{opacity:1;transform:translate(-50%,-10%)scaleY(1.25)}85%{opacity:.85;transform:translate(-50%)scale(1.35,.55)}to{opacity:0;transform:translate(-50%)scale(1.9,.2)}}@keyframes drop-ripple{0%{opacity:0;border-width:3px;transform:translate(-50%,-50%)scale(.2)}10%{opacity:.75}to{opacity:0;border-width:.5px;transform:translate(-50%,-50%)scale(2.6)}}@keyframes tile-emerge{0%{opacity:0;filter:blur(6px);transform:scale(.1)}35%{opacity:1;filter:blur()}55%{transform:scale(1.14,.86)}72%{transform:scale(.94,1.08)}86%{transform:scale(1.04,.97)}to{opacity:1;filter:blur();transform:scale(1)}}.tile-emerging{transform-origin:top;animation:.85s cubic-bezier(.22,1,.36,1) both tile-emerge}.drop-droplet{pointer-events:none;z-index:30;background:linear-gradient(#93c5fdf2,#0066cce6);border-radius:50%/62% 62% 38% 38%;width:16px;height:20px;animation:.55s cubic-bezier(.5,0,.75,0) both drop-fall;position:absolute;top:0;left:50%;box-shadow:0 4px 10px #0066cc59,inset 0 -2px 4px #ffffff8c}.drop-ripple{pointer-events:none;z-index:1;border:3px solid #0066cc8c;border-radius:50%;width:120px;height:44px;animation:.75s cubic-bezier(.16,1,.3,1) both drop-ripple;position:absolute;top:50%;left:50%}.brand-glass-tile.tile-afloat{opacity:.4;filter:saturate(.45);border-color:#0066cc59;transform:translateZ(0)scale(.95);box-shadow:inset 0 3px 10px #0066cc38,inset 0 -1px 2px #ffffff80}.brand-glass-tile.tile-parting{border-color:rgba(var(--brand-color-rgb), .55);box-shadow:0 10px 26px rgba(var(--brand-color-rgb), .24), 0 0 0 4px #93c5fd47, inset 0 1px 2px #ffffffe6;transform:translateZ(0)scale(1.04)}.tile-wake{pointer-events:none;z-index:2;border:2px solid #0066cc73;border-radius:50%;width:130px;height:46px;animation:.85s cubic-bezier(.16,1,.3,1) both tile-wake;position:absolute;top:50%;left:50%}@keyframes tile-wake{0%{opacity:0;border-width:3px;transform:translate(-50%,-50%)scale(.15)}12%{opacity:.7}to{opacity:0;border-width:1px;transform:translate(-50%,-50%)scale(2.4)}}.brand-glass-tile.tile-settling{animation:.7s cubic-bezier(.22,1,.3,1) both tile-settle}@keyframes tile-settle{0%{box-shadow:0 0 #0066cc59,0 4px 15px #0000000d}45%{box-shadow:0 0 0 7px #93c5fd38,0 10px 24px #0066cc2e}to{box-shadow:0 0 #06c0,0 4px 15px #0000000d}}.add-brand-tile{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:135px;height:48px;color:var(--primary-brand);cursor:pointer;background:#ffffff59;border:1px dashed #0066cc73;border-radius:12px;justify-content:center;align-items:center;gap:6px;font-size:.8rem;font-weight:800;transition:translate .55s cubic-bezier(.34,1.4,.64,1),transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s,background .3s;display:inline-flex;position:relative}.add-brand-tile:hover{background:#ffffffbf;border-color:#0066ccbf;transform:translateY(-3px);box-shadow:0 10px 24px #0066cc29}.add-brand-tile.stepping-aside{translate:-18px}.add-brand-tile:disabled{cursor:default;opacity:.55}.brand-editor-backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:90;background:#0f172a73;animation:.18s both fade-in;position:fixed;inset:0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes editor-in{0%{opacity:0;transform:translateY(12px)scale(.98)}to{opacity:1;transform:none}}.brand-editor{animation:.24s cubic-bezier(.16,1,.3,1) both editor-in}@media (prefers-reduced-motion:reduce){.tile-emerging,.drop-droplet,.drop-ripple,.tile-wake,.brand-glass-tile.tile-settling,.brand-editor{animation-duration:.01ms;animation-iteration-count:1}.add-brand-tile.stepping-aside{translate:none}.brand-glass-tile.tile-afloat,.brand-glass-tile.tile-parting{transform:translateZ(0)}}.tile-delete{top:3px;color:#e11d48;cursor:pointer;opacity:0;z-index:20;background:#fff;border:1px solid #e11d4859;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;transition:opacity .18s,transform .18s cubic-bezier(.34,1.4,.64,1),background .18s;display:flex;position:absolute;inset-inline-end:3px;transform:scale(.8);box-shadow:0 2px 8px #0f172a1f}.brand-glass-tile:hover .tile-delete,.tile-delete:focus-visible{opacity:1;transform:scale(1)}.tile-delete:hover{color:#fff;background:#e11d48}