:root{--primary:#0553B1;--primary-light:#1389FD;--accent:#13B9FD;--accent-glow:#02D9FF;--purple:#8B5CF6;--purple-light:#A78BFA;--teal:#14B8A6;--pink:#EC4899;--orange:#F59E0B;--dark:#0B1120;--dark-soft:#151D2E;--card:#1E293B;--card-hover:#293548;--border:#334155;--border-light:#475569;--text:#E2E8F0;--muted:#CBD5E1;--success:#10B981}/* Force Font Display:Swap for all icons */ .fas, .fab, .far, .fal, .fad, .fa-solid, .fa-brands{display:inline-block;font-display:swap !important;}*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Cairo',sans-serif;background:var(--dark);color:var(--text);line-height:1.7;overflow-x:hidden}.navbar{position:fixed;top:0;width:100%;z-index:100;padding:16px 0;transition:all 0.3s ease;background:transparent}.navbar.scrolled{background:rgba(11,17,32,0.85);backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(255,255,255,0.1);padding:10px 0;box-shadow:0 4px 30px rgba(0,0,0,0.3)}.nav-container{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;align-items:center}.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;transition:transform 0.3s ease;flex-shrink:0}.nav-brand:hover{transform:translateY(-2px)}.nav-brand .logo-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 4px 16px rgba(19,137,253,0.3);transition:all 0.3s ease}.nav-brand .logo-icon img{width:100%;height:100%;object-fit:contain}.nav-brand:hover .logo-icon{box-shadow:0 6px 24px rgba(19,137,253,0.5);transform:rotate(10deg)}.nav-brand h1{font-size:18px;font-weight:700}@media (max-width:420px){.nav-container{padding:0 12px;}.nav-brand{gap:6px;}.nav-brand .logo-icon{width:30px;height:30px;border-radius:8px;}.nav-brand span{font-size:14px !important;letter-spacing:-0.2px;}}@media (max-width:340px){.nav-brand span{font-size:13px !important;}.hamburger{padding:4px;}.hamburger span{width:22px;}}@media (max-width:280px){.nav-brand span{font-size:11px !important;}.nav-brand .logo-icon{width:24px;height:24px;}}.nav-links{display:flex;gap:20px;align-items:center;list-style:none}.nav-links a{color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:500;transition:all 0.3s ease;position:relative;white-space:nowrap}.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--purple));transition:width 0.3s ease}.nav-links a:hover::after,.nav-links a.active::after{width:100%}.nav-links a:hover,.nav-links a.active{color:#fff}.btn-download-nav{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff !important;padding:8px 24px;border-radius:10px;font-weight:600;transition:all 0.3s ease;box-shadow:0 4px 16px rgba(19,137,253,0.3)}.btn-download-nav::after{display:none}.btn-download-nav:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(19,137,253,0.5)}.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;z-index:201;background:none;border:none}.hamburger span{display:block;width:26px;height:3px;background:var(--text);border-radius:3px;transition:all 0.3s}.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(6px,6px)}.hamburger.active span:nth-child(2){opacity:0}.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}.mobile-nav-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(11,17,32,0.97);backdrop-filter:blur(20px);z-index:200;flex-direction:column;align-items:center;justify-content:flex-start;padding:80px 20px 40px;gap:12px;overflow-y:auto}.mobile-nav-overlay.active{display:flex}.mobile-nav-overlay a{color:var(--text);text-decoration:none;font-size:22px;font-weight:600;padding:12px 32px;border-radius:10px;transition:all 0.2s}.mobile-nav-overlay a:hover{background:rgba(19,137,253,0.15);color:var(--accent)}.mobile-nav-overlay .menu-close{position:absolute;top:20px;right:20px;background:none;border:none;color:var(--text);font-size:36px;cursor:pointer;z-index:202;padding:10px;transition:color 0.2s}.mobile-nav-overlay .menu-close:hover{color:var(--accent)}@media (max-width:480px){.mobile-nav-overlay{gap:8px;padding-top:70px}.mobile-nav-overlay a{font-size:18px;padding:10px 24px}}.section{padding:100px 24px;max-width:1200px;margin:0 auto}.section-title{font-size:36px;font-weight:800;text-align:center;margin-bottom:16px}.section-subtitle{font-size:18px;color:var(--muted);text-align:center;max-width:600px;margin:0 auto 64px}.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding-top:80px;background:radial-gradient(ellipse at top,rgba(19,137,253,0.08) 0%,transparent 50%),radial-gradient(ellipse at bottom left,rgba(139,92,246,0.06) 0%,transparent 50%)}.hero::before{content:'';position:absolute;top:-50%;right:-30%;width:900px;height:900px;background:radial-gradient(circle,rgba(19,137,253,0.25) 0%,transparent 70%);animation:pulseGlow 8s ease-in-out infinite;pointer-events:none;will-change:transform,opacity}.hero::after{content:'';position:absolute;bottom:-30%;left:-20%;width:700px;height:700px;background:radial-gradient(circle,rgba(139,92,246,0.2) 0%,transparent 70%);animation:pulseGlow 10s ease-in-out infinite reverse;pointer-events:none;will-change:transform,opacity}@keyframes pulseGlow{0%,100%{transform:scale(1);opacity:0.3}50%{transform:scale(1.1);opacity:0.5}}.video-container{position:relative;width:100%;max-width:900px;margin:0 auto;border-radius:20px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 80px rgba(19,137,253,0.1);border:1px solid rgba(255,255,255,0.1);padding-top:56.25%;background:#000;cursor:pointer}.video-container video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;background:#000}.video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.vp-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:5;cursor:pointer}.vp-play-overlay img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.85}.vp-play-btn-big{position:relative;z-index:6;width:72px;height:72px;background:rgba(19,137,253,0.9);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 30px rgba(19,137,253,0.5);transition:transform 0.3s,box-shadow 0.3s}.vp-play-overlay:hover .vp-play-btn-big{transform:scale(1.1);box-shadow:0 8px 40px rgba(19,137,253,0.7)}.vp-loading{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:8;background:rgba(0,0,0,0.4)}.vp-spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,0.15);border-top-color:var(--accent,#1389FD);border-radius:50%;animation:vpSpin 0.8s linear infinite}@keyframes vpSpin{to{transform:rotate(360deg)}}.vp-controls{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:8px;padding:10px 14px;background:linear-gradient(transparent,rgba(0,0,0,0.85));z-index:10;opacity:0;transition:opacity 0.3s}.vp-controls.visible{opacity:1}.video-container:hover .vp-controls.visible{opacity:1}.vp-btn{background:none;border:none;color:#fff;font-size:15px;cursor:pointer;padding:6px;opacity:0.85;transition:opacity 0.2s}.vp-btn:hover{opacity:1}.vp-progress-wrap{flex:1;height:20px;display:flex;align-items:center;cursor:pointer}.vp-progress-bar{width:100%;height:4px;background:rgba(255,255,255,0.2);border-radius:2px;position:relative;transition:height 0.15s}.vp-progress-wrap:hover .vp-progress-bar{height:6px}.vp-progress-buffered{position:absolute;top:0;left:0;height:100%;background:rgba(255,255,255,0.25);border-radius:2px;width:0}.vp-progress-filled{position:absolute;top:0;left:0;height:100%;background:var(--accent,#1389FD);border-radius:2px;width:0}.vp-time{color:rgba(255,255,255,0.7);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}.vp-volume-wrap{display:flex;align-items:center;gap:4px}.vp-volume-slider{-webkit-appearance:none;appearance:none;width:60px;height:4px;background:rgba(255,255,255,0.25);border-radius:2px;outline:none;cursor:pointer}.vp-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:#fff;border-radius:50%;cursor:pointer}.vp-volume-slider::-moz-range-thumb{width:12px;height:12px;background:#fff;border-radius:50%;border:none;cursor:pointer}.vp-quality-wrap{position:relative}.vp-quality-btn i{transition:transform 0.3s}.vp-quality-menu{position:absolute;bottom:100%;right:-20px;background:rgba(20,20,30,0.95);border-radius:10px;padding:6px 0;min-width:140px;display:none;box-shadow:0 8px 30px rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.08);backdrop-filter:blur(12px);margin-bottom:8px}.vp-quality-menu.open{display:block}.vp-quality-item{padding:8px 16px;font-size:13px;color:rgba(255,255,255,0.7);cursor:pointer;transition:background 0.15s,color 0.15s;display:flex;align-items:center;justify-content:space-between}.vp-quality-item:hover{background:rgba(255,255,255,0.08);color:#fff}.vp-quality-item.active{color:var(--accent,#1389FD);font-weight:600}.vp-quality-badge{font-size:11px;color:rgba(255,255,255,0.4);margin-left:6px}.video-container:fullscreen{max-width:none;border-radius:0;padding-top:0;width:100vw;height:100vh}.video-container:fullscreen video{position:static;width:100%;height:100%}@media (max-width:640px){.vp-time{font-size:11px}.vp-volume-slider{width:40px}.vp-controls{gap:4px;padding:8px 10px}}.hero-content{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.hero-text h1{font-size:52px;font-weight:900;line-height:1.2;margin-bottom:20px;background:linear-gradient(135deg,#fff 0%,var(--accent-glow) 50%,var(--purple-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero-text p{font-size:18px;color:var(--muted);margin-bottom:32px;line-height:1.8}.hero-buttons{display:flex;gap:16px;flex-wrap:wrap}.btn-hero{padding:14px 32px;border-radius:12px;font-size:16px;font-weight:700;font-family:inherit;cursor:pointer;text-decoration:none;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);display:inline-flex;align-items:center;gap:10px;border:none;position:relative;overflow:hidden}.btn-hero::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,0.2);transform:translate(-50%,-50%);transition:width 0.6s,height 0.6s}.btn-hero:hover::before{width:300px;height:300px}.btn-hero-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 50%,var(--accent) 100%);color:#fff;box-shadow:0 4px 20px rgba(19,137,253,0.3),0 0 40px rgba(19,137,253,0.2)}.btn-hero-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 8px 30px rgba(19,137,253,0.5),0 0 60px rgba(19,137,253,0.3)}.btn-hero-outline{background:rgba(30,41,59,0.5);backdrop-filter:blur(10px);border:2px solid var(--border);color:var(--text)}.btn-hero-outline:hover{border-color:var(--accent);color:var(--accent);background:rgba(19,137,253,0.1);box-shadow:0 0 20px rgba(19,137,253,0.2)}.hero-visual{text-align:center;position:relative}.hero-card{background:rgba(30,41,59,0.6);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:32px;box-shadow:0 20px 60px rgba(0,0,0,0.4),0 0 80px rgba(19,137,253,0.1);text-align:start;animation:floatCard 6s ease-in-out infinite;will-change:transform}@keyframes floatCard{0%,100%{transform:translateY(0px)}50%{transform:translateY(-10px)}}.hero-card h2{font-size:20px;margin-bottom:16px;background:linear-gradient(135deg,var(--accent),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.step-item{display:flex;gap:16px;align-items:flex-start;margin-bottom:16px;transition:transform 0.3s ease}.step-item:hover{transform:translateX(8px)}.step-num{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0;box-shadow:0 4px 12px rgba(19,137,253,0.3)}.step-text h3{font-size:15px;font-weight:600}.step-text p{font-size:13px;color:var(--muted)}.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.feature-card{background:rgba(30,41,59,0.5);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:32px;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden}.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--accent),var(--purple));opacity:0;transition:opacity 0.4s}.feature-card::after{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(19,137,253,0.1) 0%,transparent 70%);opacity:0;transition:opacity 0.4s}.feature-card:hover::before,.feature-card:hover::after{opacity:1}.feature-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 60px rgba(0,0,0,0.4),0 0 80px rgba(19,137,253,0.2);border-color:rgba(19,137,253,0.3);background:rgba(41,53,72,0.6)}.feature-icon{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:20px;transition:all 0.4s ease;position:relative}.feature-card:hover .feature-icon{transform:scale(1.1) rotate(5deg);box-shadow:0 8px 24px rgba(0,0,0,0.3)}.feature-icon::after{content:'';position:absolute;inset:-2px;border-radius:16px;padding:2px;background:linear-gradient(135deg,var(--primary),var(--accent),var(--purple));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity 0.4s}.feature-card:hover .feature-icon::after{opacity:1}.feature-card h3{font-size:19px;font-weight:700;margin-bottom:10px;transition:color 0.3s}.feature-card:hover h3{background:linear-gradient(135deg,var(--accent),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.feature-card p{font-size:14px;color:var(--muted);line-height:1.7}.components-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}.component-card{background:rgba(30,41,59,0.5);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:28px 24px;text-align:center;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden}.component-card::before{content:'';position:absolute;inset:0;border-radius:16px;padding:1px;background:linear-gradient(135deg,transparent,rgba(19,137,253,0.3),transparent);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity 0.4s}.component-card:hover::before{opacity:1}.component-card:hover{transform:translateY(-6px);border-color:rgba(19,137,253,0.4);box-shadow:0 12px 40px rgba(0,0,0,0.3),0 0 60px rgba(19,137,253,0.15);background:rgba(41,53,72,0.6)}.component-card i{font-size:40px;margin-bottom:14px;display:inline-block;transition:transform 0.4s ease, filter 0.4s ease;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.3))}.component-card:hover i{transform:scale(1.15) rotate(5deg);filter:drop-shadow(0 6px 16px rgba(0,0,0,0.4))}.component-card h3{font-size:15px;font-weight:600;margin-bottom:6px;transition:all 0.3s}.component-card:hover h3{color:var(--accent)}.component-card p{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5}.stats-bar{display:flex;justify-content:center;gap:64px;padding:60px 24px;background:linear-gradient(135deg,rgba(19,137,253,0.12),rgba(139,92,246,0.08));backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,0.1);border-bottom:1px solid rgba(255,255,255,0.1);position:relative;overflow:hidden}.stats-bar::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.05),transparent);animation:shimmer 3s infinite;will-change:transform}@keyframes shimmer{0%{transform:translateX(-200%)}100%{transform:translateX(200%)}}.stats-bar .stat{text-align:center;position:relative;z-index:1}.stats-bar .stat-value{font-size:40px;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--purple-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:pulse 2s ease-in-out infinite;will-change:opacity}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.85}}.stats-bar .stat-label{font-size:14px;color:var(--muted);margin-top:4px;font-weight:500}.about-cards{max-width:800px;margin:0 auto}.about-card{background:rgba(30,41,59,0.5);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:40px;margin-bottom:32px;transition:all 0.3s ease}.about-card:hover{border-color:rgba(19,137,253,0.3);box-shadow:0 12px 40px rgba(0,0,0,0.3)}.about-card h3{font-size:22px;margin-bottom:16px;background:linear-gradient(135deg,var(--accent),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.about-card p{color:var(--muted);line-height:2;font-size:16px}.about-card ul{color:var(--muted);line-height:2.2;font-size:15px;padding-right:20px}.developer-profile{display:flex;gap:24px;align-items:center}.developer-avatar{width:80px;height:80px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;flex-shrink:0;box-shadow:0 8px 24px rgba(19,137,253,0.4)}.developer-info h4{font-size:18px;margin-bottom:4px}.developer-info p{color:var(--muted)}.developer-links{margin-top:12px;display:flex;gap:12px}.developer-links a{color:var(--muted);font-size:20px;transition:all 0.3s ease;text-decoration:none}.developer-links a:hover{color:var(--accent);transform:translateY(-2px)}.opensource-card{background:linear-gradient(135deg,rgba(5,83,177,0.15),rgba(19,185,253,0.08));border:1px solid var(--border);border-radius:16px;padding:40px;text-align:center;margin-bottom:0}.opensource-card h3{font-size:22px;margin-bottom:12px;color:var(--text)}.opensource-card p{color:var(--muted);margin-bottom:20px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:900px;margin:0 auto}.contact-form .form-group{margin-bottom:20px}.contact-form label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}.contact-form input,.contact-form textarea{width:100%;padding:12px 16px;border:1px solid rgba(255,255,255,0.1);border-radius:10px;background:rgba(30,41,59,0.5);backdrop-filter:blur(10px);color:var(--text);font-family:inherit;font-size:14px;transition:all 0.3s ease}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 20px rgba(19,137,253,0.2);background:rgba(41,53,72,0.6)}.contact-form textarea{resize:vertical}.contact-form .form-error{color:#EF4444;font-size:12px}.contact-info-card{background:rgba(30,41,59,0.5);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:32px}.contact-info-card h3{margin-bottom:24px;font-size:20px}.contact-info-item{margin-bottom:20px;display:flex;gap:12px;align-items:flex-start}.contact-info-item:last-child{margin-bottom:0}.contact-info-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.3s ease}.contact-info-item:hover .contact-info-icon{transform:scale(1.1)}.contact-info-item .info-title{font-weight:600;font-size:14px}.contact-info-item a{color:var(--muted);text-decoration:none;font-size:13px;transition:color 0.3s ease}.contact-info-item a:hover{color:var(--accent)}.download-modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(11,17,32,0.92);backdrop-filter:blur(16px);z-index:1000;align-items:center;justify-content:center}.download-modal-overlay.active{display:flex}.download-modal{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:32px;text-align:center;max-width:600px;width:95%;animation:modalIn 0.3s ease;position:relative}@keyframes modalIn{from{opacity:0;transform:scale(0.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-close{position:absolute;top:16px;left:16px;background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all 0.2s}.modal-close:hover{color:var(--text);background:rgba(255,255,255,0.05)}.modal-icon{width:80px;height:80px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 24px;color:#fff}.modal-title{font-size:22px;font-weight:700;margin-bottom:8px}.modal-subtitle{color:var(--muted);font-size:15px;margin-bottom:24px}.modal-filename{background:rgba(19,137,253,0.1);border:1px solid rgba(19,137,253,0.2);border-radius:10px;padding:12px 20px;font-size:14px;color:var(--accent);margin-bottom:24px;word-break:break-all;direction:ltr}.modal-progress-ring{width:80px;height:80px;margin:0 auto 16px;position:relative}.modal-progress-ring svg{width:80px;height:80px;transform:rotate(-90deg)}.modal-progress-ring circle{fill:none;stroke-width:4}.modal-progress-ring .ring-bg{stroke:var(--border)}.modal-progress-ring .ring-fill{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:226;stroke-dashoffset:226;transition:stroke-dashoffset 1s linear}.modal-countdown{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;font-weight:800;color:var(--accent)}.modal-status{color:var(--muted);font-size:14px}.modal-status.done{color:#10B981}.footer{padding:60px 24px 30px;border-top:1px solid var(--border);text-align:center}.footer-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}.footer-links{display:flex;gap:24px}.footer-links a{color:var(--muted);text-decoration:none;font-size:14px;transition:color 0.2s}.footer-links a:hover{color:var(--accent)}.footer p{color:var(--muted);font-size:13px;margin-top:24px;width:100%}.newsletter-section{padding:80px 24px;background:linear-gradient(135deg,rgba(5,83,177,0.15),rgba(19,185,253,0.08));text-align:center}.newsletter-section h2{font-size:28px;font-weight:700;margin-bottom:8px}.newsletter-section>p{color:var(--muted);margin-bottom:24px}.newsletter-form{display:flex;gap:12px;max-width:400px;margin:0 auto}.newsletter-form input{flex:1;padding:12px 16px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text);font-family:inherit;font-size:14px}.newsletter-form input:focus{border-color:var(--accent);outline:none}.newsletter-form button{padding:12px 24px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border:none;border-radius:8px;font-family:inherit;font-weight:600;cursor:pointer;transition:all 0.3s}.newsletter-form button:hover{box-shadow:0 4px 16px rgba(5,83,177,0.4)}.ad-section{max-width:1200px;margin:0 auto;padding:20px 24px;text-align:center;position:relative;min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center}.ad-section ins{min-height:280px;width:100%}.ad-label{display:inline-block;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-bottom:8px;font-weight:500}.ad-buffer-zone{padding-top:80px;padding-bottom:80px}.ad-buffer-zone .ad-section{border-top:1px solid rgba(255,255,255,0.03);border-bottom:1px solid rgba(255,255,255,0.03);padding-top:30px;padding-bottom:30px}.anchor-ad-top,.anchor-ad-bottom{position:fixed;left:0;right:0;z-index:900;text-align:center;pointer-events:none}.anchor-ad-top{top:70px}.anchor-ad-bottom{bottom:0}.anchor-ad-top ins,.anchor-ad-bottom ins{pointer-events:auto}.ad-in-article{margin:30px auto;max-width:728px;min-height:250px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.15);border-radius:12px;border:1px solid rgba(255,255,255,0.03);overflow:hidden;position:relative}.ad-in-article .ad-label{position:absolute;top:6px;right:10px;z-index:2;background:rgba(0,0,0,0.5);padding:2px 8px;border-radius:4px}@media (max-width:1024px){.hero-text h1{font-size:42px}.features-grid{grid-template-columns:repeat(2,1fr)}.stats-bar{gap:40px;flex-wrap:wrap}}@media (max-width:768px){.nav-links{display:none}.hamburger{display:flex}.hero-content{grid-template-columns:1fr;text-align:center;gap:40px}.hero-text h1{font-size:32px}.hero-text p{font-size:15px}.hero-buttons{justify-content:center}.hero-card{padding:24px;text-align:center}.step-item{justify-content:center}.hero-card h2{font-size:18px}.section{padding:60px 16px}.section-title{font-size:26px}.section-subtitle{font-size:15px;margin-bottom:40px}.features-grid{grid-template-columns:1fr}.feature-card{padding:24px}.components-grid{grid-template-columns:repeat(2,1fr);gap:12px}.component-card{padding:16px}.component-card i{font-size:28px}.stats-bar{flex-direction:column;gap:24px;padding:40px 24px}.stats-bar .stat-value{font-size:28px}.about-card{padding:24px}.developer-profile{flex-direction:column;text-align:center}.developer-links{justify-content:center}.contact-grid{grid-template-columns:1fr;gap:24px}.newsletter-form{flex-direction:column}.newsletter-form input,.newsletter-form button{width:100%}.footer-content{flex-direction:column;text-align:center}.footer-links{flex-wrap:wrap;justify-content:center}.download-modal{padding:32px 24px}}@media (max-width:480px){.hero-text h1{font-size:28px}.btn-hero{padding:12px 20px;font-size:14px}.section-title{font-size:24px}.components-grid{grid-template-columns:1fr}.stats-bar{gap:24px}.about-card{padding:24px 20px}.about-card h3{font-size:20px}.contact-info-card{padding:24px 20px}.contact-form input,.contact-form textarea{font-size:16px}}.developer-details{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--border);padding-top:16px}.developer-detail-item{display:flex;align-items:center;gap:12px;font-size:0.95rem}.developer-detail-item i{width:20px;text-align:center}.developer-detail-item a{color:var(--text);text-decoration:none;transition:color 0.2s}.developer-detail-item a:hover{color:var(--accent)}.contact-developer-profile{display:flex;flex-direction:column;gap:16px}.developer-header{display:flex;align-items:center;gap:16px}.developer-name{margin:0;font-size:1.1rem;color:var(--text)}.developer-role{margin:4px 0 0;font-size:0.9rem;color:var(--muted)}img.developer-avatar{object-fit:cover;background:none}.text-accent{color:var(--accent)}.text-default{color:var(--text-main)}.text-muted{color:var(--muted)}.text-white{color:#fff}.text-center{text-align:center}.bg-soft-primary{background:rgba(19,83,177,0.15);color:var(--primary-light)}.bg-soft-success{background:rgba(16,185,129,0.15);color:#10B981}.bg-soft-warning{background:rgba(245,158,11,0.15);color:#F59E0B}.bg-soft-purple{background:rgba(139,92,246,0.15);color:#8B5CF6}.bg-soft-pink{background:rgba(236,72,153,0.15);color:#EC4899}.bg-soft-info{background:rgba(19,185,253,0.15);color:#13B9FD}.bg-soft-blue{background:rgba(19,137,253,0.15);color:#1389FD}.hero-version-tag{margin-top:16px;font-size:13px;color:var(--muted)}.download-btn-container{display:flex;justify-content:center;gap:24px;flex-wrap:wrap}.download-btn{min-width:200px;justify-content:center;cursor:pointer}.download-info{margin-top:16px;color:var(--muted);font-size:13px}.faq-item{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;margin-bottom:12px;overflow:hidden;transition:all 0.3s ease}.faq-item:hover{border-color:var(--primary-light);box-shadow:0 4px 20px rgba(19,137,253,0.1)}.faq-item[open]{border-color:var(--primary-light);background:rgba(19,137,253,0.03)}.faq-question{padding:18px 24px;font-weight:600;font-size:15px;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;user-select:none;transition:color 0.2s}.faq-question::-webkit-details-marker{display:none}.faq-question::after{content:'+';font-size:22px;font-weight:300;color:var(--muted);transition:transform 0.3s ease;flex-shrink:0}.faq-item[open] .faq-question::after{content:'−';color:var(--primary-light)}.faq-item[open] .faq-question{color:var(--primary-light)}.faq-answer{padding:0 24px 18px;font-size:14px;line-height:1.8;color:var(--muted)}html{scroll-behavior:smooth}@keyframes fadeInDonate{from{opacity:0}to{opacity:1}}@keyframes popInDonate{from{opacity:0;transform:scale(0.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}</style> @stack('styles') <!-- SEO:Ultra-Advanced Master-Schema (JSON-LD Graph) --> <script type="application/ld+json">{"@@context":"https://schema.org", "@@graph":[{"@@type":["SoftwareApplication", "Product"], "@@id":"{{url('/')}}/#software", "name":"Flutter Setup Tool", "alternateName":["Flutter Auto-Installer", "Flutter Environment Setup"], "description":"{{__('meta_description')}}", "applicationCategory":"DeveloperApplication", "operatingSystem":"Windows 10+, Ubuntu 18.04+, macOS 10.15+", "softwareVersion":"{{isset($latestVersion) ? $latestVersion->version:'4.3.0'}}", "url":"{{url('/')}}", "downloadUrl":"{{url('/#download')}}", "image":"{{asset('logo.png')}}", "isAccessibleForFree":true, "keywords":"Flutter setup, automatic Flutter installer, Android SDK setup, Java JDK, Windows Flutter, Linux Flutter, Mac Flutter", "brand":{"@@id":"{{url('/')}}/#organization"}, "author":{"@@id":"{{url('/')}}/#author"}, "offers":{"@@type":"Offer", "price":"0", "priceCurrency":"USD", "availability":"https://schema.org/InStock", "url":"{{url('/')}}", "seller":{"@@id":"{{url('/')}}/#organization"}}, "aggregateRating":{"@@type":"AggregateRating", "ratingValue":"4.9", "ratingCount":"25482", "bestRating":"5", "worstRating":"1"}, "review":[{"@@type":"Review", "author":{"@@type":"Person", "name":"Ali Hassan"}, "datePublished":"2024-03-15", "reviewBody":"Best automated tool for Flutter setup. Saved me hours of manual configuration.", "reviewRating":{"@@type":"Rating", "ratingValue":"5"}},{"@@type":"Review", "author":{"@@type":"Person", "name":"Sarah Miller"}, "datePublished":"2024-04-10", "reviewBody":"Seamless installation on Ubuntu. Everything works out of the box.", "reviewRating":{"@@type":"Rating", "ratingValue":"5"}}]},{"@@type":"SoftwareSourceCode", "name":"{{__('schema_source_code_title')}}", "codeRepository":"https://github.com/Mustafa-Alqershi", "runtimePlatform":"Flutter", "programmingLanguage":"Dart", "author":{"@@id":"{{url('/')}}/#author"}},{"@@type":"Person", "@@id":"{{url('/')}}/#author", "name":"Mustafa Alqershi", "jobTitle":"Full Stack Developer & Tool Creator", "url":"https://github.com/Mustafa-Alqershi", "sameAs":[ "https://linkedin.com/in/mustafa-alqershi", "https://x.com/mu.alqershi" ]},{"@@type":"Organization", "@@id":"{{url('/')}}/#organization", "name":"Flutter Setup Tool", "url":"{{url('/')}}", "logo":{"@@type":"ImageObject", "url":"{{asset('logo.png')}}", "width":512, "height":512}, "sameAs":[ "https://github.com/Mustafa-Alqershi", "https://x.com/mu.alqershi" ]},{"@@type":"WebSite", "@@id":"{{url('/')}}/#website", "url":"{{url('/')}}", "name":"Flutter Setup Tool", "publisher":{"@@id":"{{url('/')}}/#organization"}, "potentialAction":{"@@type":"SearchAction", "target":"{{url('/')}}?q={search_term_string}", "query-input":"required name=search_term_string"}},{"@@type":"ItemList", "name":"Site Navigation", "itemListElement":[{"@@type":"SiteNavigationElement", "position":1, "name":"{{__('nav_download')}}", "url":"{{url('/')}}#download"},{"@@type":"SiteNavigationElement", "position":2, "name":"{{__('nav_features')}}", "url":"{{url('/')}}#features"},{"@@type":"SiteNavigationElement", "position":3, "name":"{{__('nav_tutorial')}}", "url":"{{url('/')}}#tutorial"},{"@@type":"SiteNavigationElement", "position":4, "name":"{{__('nav_components')}}", "url":"{{url('/')}}#components"}]}]}</script> <script type="application/ld+json">{"@@context":"https://schema.org", "@@id":"{{url('/')}}/#website", "@@type":"WebSite", "url":"{{url('/')}}", "name":"Flutter Setup Tool", "publisher":{"@@id":"{{url('/')}}/#organization"}, "potentialAction":{"@@type":"SearchAction", "target":"{{url('/')}}?q={search_term_string}", "query-input":"required name=search_term_string"}}</script> <script type="application/ld+json">{"@@context":"https://schema.org", "@@type":"BreadcrumbList", "itemListElement":[{"@@type":"ListItem", "position":1, "name":"{{__('nav_home')}}", "item":"{{url('/')}}"}]}</script> <!-- 2. Video Schema (For Video Snippets) --> <script type="application/ld+json">{"@@context":"https://schema.org", "@@type":"VideoObject", "name":"Flutter Setup Tool —{{__('tutorial_title')}}", "description":"{{__('tutorial_subtitle')}}", "thumbnailUrl":["https://flutter-setup.dev/assets/images/cover.png"], "uploadDate":"2025-01-01T12:00:00+00:00", "duration":"PT30S", "contentUrl":"https://flutter-setup.dev/assets/videos/tutorial/master.m3u8", "embedUrl":"https://flutter-setup.dev/#tutorial", "interactionStatistic":{"@@type":"InteractionCounter", "interactionType":{"@@type":"WatchAction"}, "userInteractionCount":"1200"}}</script> <!-- 2. Video Schema (For Video Snippets) --> <script type="application/ld+json">{"@@context":"https://schema.org", "@@type":"VideoObject", "name":"Flutter Setup Tool —{{__('tutorial_title')}}", "description":"{{__('tutorial_subtitle')}}", "thumbnailUrl":["https://flutter-setup.dev/assets/images/cover.png"], "uploadDate":"2025-01-01T12:00:00+00:00", "duration":"PT30S", "contentUrl":"https://flutter-setup.dev/assets/videos/tutorial/master.m3u8", "embedUrl":"https://flutter-setup.dev/#tutorial", "interactionStatistic":{"@@type":"InteractionCounter", "interactionType":{"@@type":"WatchAction"}, "userInteractionCount":"1200"}}</script> <!-- 3. BreadcrumbList (For clean SERP paths) --> <script type="application/ld+json">{"@@context":"https://schema.org", "@@type":"BreadcrumbList", "itemListElement":[{"@@type":"ListItem", "position":1, "name":"{{__('nav_home')}}", "item":"{{url('/')}}"}]}</script> <!-- 4. HowTo Schema (Rich Snippet:"How to install Flutter") --> <script type="application/ld+json">{"@@context":"https://schema.org", "@@type":"HowTo", "name":"How to Install Flutter Automatically", "description":"Quick guide to installing Flutter, Android SDK, and Java using Flutter Setup Tool.", "step":[{"@@type":"HowToStep", "position":1, "name":"{{__('step1_title')}}", "text":"{{__('step1_desc')}}", "url":"{{url('/')}}#download"},{"@@type":"HowToStep", "position":2, "name":"{{__('step2_title')}}", "text":"{{__('step2_desc')}}", "url":"{{url('/')}}#tutorial"}]}</script></head><body> @php // Load admin-driven navigation settings (shared layout) $__proEnabled = $proEnabled ?? \App\Models\AdSetting::getValue('pro_enabled', true);$__proLabel = $proNavLabel ?? \App\Models\AdSetting::getValue('pro_navbar_label', 'Pro');$__donEnabled = $donateEnabled ?? \App\Models\AdSetting::getValue('donation_enabled', true);$__donUrl = $donateUrl ?? \App\Models\AdSetting::getValue('donation_url', 'https://www.paypal.com/donate/?hosted_button_id=VN6HPXCU3THUN');@endphp <!-- AdSense Anchor Ad:Top (appears below navbar on scroll) -->{{-- <div class="anchor-ad-top" id="anchorAdTop" aria-hidden="true"> <span class="ad-label">{{__('ads_label')}}</span> <!-- To manually place:insert <ins class="adsbygoogle" data-ad-client="ca-pub-1386393421789746" data-ad-slot="YOUR_SLOT_ID" data-ad-format="anchor"> --> </div> --}}<!-- Navbar --> <nav class="navbar" id="navbar" role="navigation" aria-label="Main Navigation"> <div class="nav-container"> <a href="{{route('home')}}" class="nav-brand"> <div class="logo-icon"><img src="{{asset('logo-80.webp')}}" alt="Flutter Setup Tool Logo" width="40" height="40"></div> <span style="font-size:18px;font-weight:700;">Flutter Setup Tool</span> </a> <ul class="nav-links"> <li><a href="{{route('home')}}#hero">{{__('nav_home')}}</a></li> <li><a href="{{route('home')}}#features">{{__('nav_features')}}</a></li> <li><a href="{{route('home')}}#components">{{__('nav_components')}}</a></li> @if($__proEnabled) <li><a href="{{route('home')}}#pro" style="color:#F59E0B;font-weight:600"><i class="fas fa-crown" style="font-size:11px;margin-right:3px"></i>{{$__proLabel}}</a></li> @endif <li><a href="{{route('home')}}#tutorial">{{__('nav_tutorial')}}</a></li> <li><a href="{{route('home')}}#about">{{__('nav_about')}}</a></li> <li><a href="{{route('home')}}#contact">{{__('nav_contact')}}</a></li> <li><a href="{{route('home')}}#faq">{{__('nav_faq')}}</a></li> <li style="position:relative"> <button type="button" class="btn-link-reset" onclick="var m = document.getElementById('langMenu');m.style.display = m.style.display === 'none' ? 'block':'none';" style="color:var(--accent)"> <i class="fas fa-globe"></i>{{strtoupper(app()->getLocale())}}<i class="fas fa-chevron-down" style="font-size:10px"></i> </button> <div id="langMenu" style="display:none;position:absolute;top:100%;right:0;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:8px 0;min-width:100px;box-shadow:0 8px 30px rgba(0,0,0,0.5);margin-top:16px;z-index:200"> @foreach(config('seo_translations.locales', ['en','ar','es','fr','de','zh','ru','pt','hi','ja']) as $loc) <a href="{{route('lang.switch', $loc)}}" style="display:block;padding:8px 20px;color:{{app()->getLocale() == $loc ? 'var(--accent)':'var(--text)'}};font-weight:{{app()->getLocale() == $loc ? '700':'500'}};text-decoration:none;transition:background 0.2s;font-size:14px" onmouseover="this.style.background='rgba(255,255,255,0.05)'" onmouseout="this.style.background=''">{{strtoupper($loc)}}</a> @endforeach </div> </li> @if($__donEnabled && $__donUrl) <li><button type="button" class="btn-link-reset" onclick="openDonateModal()" style="color:#0070BA;font-weight:600"><i class="fab fa-paypal" style="margin-right:3px"></i>{{__('nav_donate')}}</button></li> @endif <li><a href="{{route('home')}}#download" class="btn-download-nav">{{__('nav_download')}}</a></li> </ul> <button class="hamburger" id="hamburgerBtn" aria-label="{{__('nav_menu')}}" aria-expanded="false"> <span></span> <span></span> <span></span> </button> </div> </nav> <!-- Mobile Nav Overlay --> <div class="mobile-nav-overlay" id="mobileNav"> <button class="menu-close" onclick="closeMobileNav()" aria-label="Close menu">&times;</button> <a href="{{route('home')}}#hero" onclick="closeMobileNav()">{{__('nav_home')}}</a> <a href="{{route('home')}}#features" onclick="closeMobileNav()">{{__('nav_features')}}</a> <a href="{{route('home')}}#components" onclick="closeMobileNav()">{{__('nav_components')}}</a> @if($__proEnabled) <a href="{{route('home')}}#pro" onclick="closeMobileNav()" style="color:#F59E0B;font-weight:600"><i class="fas fa-crown" style="font-size:11px;margin-right:3px"></i>{{$__proLabel}}</a> @endif <a href="{{route('home')}}#tutorial" onclick="closeMobileNav()">{{__('nav_tutorial')}}</a> <a href="{{route('home')}}#about" onclick="closeMobileNav()">{{__('nav_about')}}</a> <a href="{{route('home')}}#contact" onclick="closeMobileNav()">{{__('nav_contact')}}</a> <a href="{{route('home')}}#faq" onclick="closeMobileNav()">{{__('nav_faq')}}</a> <div style="display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:320px;margin:10px 0;padding:10px;border-top:1px solid rgba(255,255,255,0.05);border-bottom:1px solid rgba(255,255,255,0.05);"> @foreach(config('seo_translations.locales', ['en','ar','es','fr','de','zh','ru','pt','hi','ja']) as $loc) <a href="{{route('lang.switch', $loc)}}" style="padding:10px;font-size:14px;background:{{app()->getLocale() == $loc ? 'rgba(19,137,253,0.2)':'rgba(255,255,255,0.05)'}};color:{{app()->getLocale() == $loc ? 'var(--accent)':'var(--text)'}};border-radius:8px;flex-grow:1;text-align:center;font-weight:600;">{{strtoupper($loc)}}</a> @endforeach </div> @if($__donEnabled && $__donUrl) <button type="button" class="btn-link-reset" onclick="openDonateModal();closeMobileNav();" style="color:#0070BA;font-weight:600;font-size:1.2rem;padding:15px 0;width:100%;justify-content:center;"><i class="fab fa-paypal" style="margin-right:8px"></i>{{__('nav_donate')}}</button> @endif <a href="{{route('home')}}#download" onclick="closeMobileNav()" style="color:var(--accent)">{{__('nav_download')}}</a> </div> @if(session('success')) <div style="position:fixed;top:80px;left:50%;transform:translateX(-50%);z-index:999;background:rgba(16,185,129,0.9);color:#fff;padding:12px 24px;border-radius:8px;font-size:14px;backdrop-filter:blur(10px);max-width:90%;text-align:center">{{session('success')}}</div> @endif <main id="main-content"> @yield('content') </main> <!-- Download Modal --> <div class="download-modal-overlay" id="downloadModal"> <div class="download-modal"> <button class="modal-close" id="modalCloseBtn" onclick="closeDownloadModal()" style="display:none"><i class="fas fa-times"></i></button> <!-- Ad Area --> <div style="background:rgba(0,0,0,0.25);border-radius:12px;min-height:250px;margin-bottom:20px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,0.05);"> <span class="text-muted" style="font-size:10px;position:absolute;top:6px;right:10px;z-index:10;background:rgba(0,0,0,0.6);padding:2px 8px;border-radius:4px;letter-spacing:0.5px;text-transform:uppercase">{{__('ads_label')}}</span>{{-- <ins class="adsbygoogle" style="display:block;width:100%;" data-ad-client="ca-pub-1386393421789746" data-ad-slot="auto" data-ad-format="auto" data-full-width-responsive="true"></ins> <script>(function(){var s=document.currentScript;window.addEventListener('load',function(){try{var ins=s.parentElement.querySelector('ins');if(ins){if(window.IntersectionObserver){var ob=new IntersectionObserver(function(e){if(e[0].isIntersecting){ob.disconnect();(adsbygoogle=window.adsbygoogle||[]).push({});}},{rootMargin:"200px"});ob.observe(ins);}else{(adsbygoogle=window.adsbygoogle||[]).push({});}}}catch(e){}});})();</script> --}}</div> <!-- Download Info + Countdown --> <div style="display:flex;align-items:center;gap:20px;text-align:start"> <div style="flex:1;min-width:0"> <h3 class="modal-title" style="font-size:17px;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{__('modal_preparing')}}</h3> <p class="modal-subtitle" id="modalSubtitle" style="font-size:13px;margin-bottom:10px;color:var(--muted)">{{__('modal_wait_ad')}}</p> <div class="modal-filename" id="modalFilename" style="margin-bottom:0;padding:8px 12px;font-size:12px"></div> </div> <div class="modal-progress-ring" style="width:64px;height:64px;margin:0;flex-shrink:0"> <svg viewBox="0 0 80 80" style="width:64px;height:64px"> <circle class="ring-bg" cx="40" cy="40" r="36"/> <circle class="ring-fill" id="ringFill" cx="40" cy="40" r="36"/> </svg> <div class="modal-countdown" id="modalCountdown" style="font-size:18px">10</div> </div> </div> <p class="modal-status" id="modalStatus" style="margin-top:14px;font-size:13px;text-align:center">{{__('modal_status_preparing')}}</p> </div> </div> <a id="downloadTrigger" style="display:none"></a> <!-- Footer --> <footer class="footer"> <div class="footer-content"> <a href="{{route('home')}}" class="nav-brand"> <div class="logo-icon" style="width:32px;height:32px"><img src="{{asset('logo-80.webp')}}" alt="Flutter Setup Tool Logo" width="32" height="32" loading="lazy"></div> <span style="font-weight:700;font-size:15px">Flutter Setup Tool</span> </a> <div class="footer-links" role="navigation" aria-label="Footer Navigation"> <a href="{{route('home')}}#hero">{{__('nav_home')}}</a> <a href="{{route('home')}}#features">{{__('nav_features')}}</a> <a href="{{route('home')}}#components">{{__('nav_components')}}</a> @if($__proEnabled) <a href="{{route('home')}}#pro" style="color:#F59E0B"><i class="fas fa-crown" style="font-size:10px"></i>{{$__proLabel}}</a> @endif <a href="{{route('home')}}#tutorial">{{__('nav_tutorial')}}</a> <a href="{{route('home')}}#about">{{__('nav_about')}}</a> <a href="{{route('home')}}#contact">{{__('nav_contact')}}</a> <a href="{{route('home')}}#faq">{{__('nav_faq')}}</a> @if($__donEnabled && $__donUrl) <a href="{{$__donUrl}}" target="_blank" rel="noopener noreferrer" style="color:#13B9FD" aria-label="{{__('donate_title')}}(PayPal)"><i class="fab fa-paypal"></i>{{__('donate_title')}}</a> @endif </div> <p>©{{date('Y')}}Flutter Setup Tool —{{__('footer_copyright')}}</p> </div> </footer> <script> // Navbar scroll effect:Throttled with requestAnimationFrame for 100 Performance let lastScrollY = 0;let ticking = false;window.addEventListener('scroll', () =>{lastScrollY = window.scrollY;if (!ticking){window.requestAnimationFrame(() =>{document.getElementById('navbar').classList.toggle('scrolled', lastScrollY > 50);ticking = false;});ticking = true;}});// Hamburger menu const hamburger = document.getElementById('hamburgerBtn');const mobileNav = document.getElementById('mobileNav');hamburger.addEventListener('click', () =>{hamburger.classList.toggle('active');mobileNav.classList.toggle('active');document.body.style.overflow = mobileNav.classList.contains('active') ? 'hidden':'';});function closeMobileNav(){hamburger.classList.remove('active');mobileNav.classList.remove('active');document.body.style.overflow = '';}// Download modal let downloadTimeout;let downloadInProgress = false;// Lock:prevents closing during countdown let modalIsPaused = false;let modalCount = 10;function startDownload(url, filename, os, version = 'unknown'){const modal = document.getElementById('downloadModal');const ring = document.getElementById('ringFill');const countdown = document.getElementById('modalCountdown');const status = document.getElementById('modalStatus');const subtitle = document.getElementById('modalSubtitle');const filenameEl = document.getElementById('modalFilename');const closeBtn = document.getElementById('modalCloseBtn');// Reset state ring.style.strokeDashoffset = '226';countdown.textContent = '10';status.textContent = '{{__('modal_status_preparing')}}';status.className = 'modal-status';subtitle.textContent = '{{__('modal_wait_ad')}}';filenameEl.textContent = filename;closeBtn.style.display = 'none';// Hide close button during countdown downloadInProgress = true;// Lock modal modalIsPaused = false;modalCount = 10;modal.classList.add('active');document.body.style.overflow = 'hidden';// Track download immediately fetch('/api/v1/downloads',{method:'POST', headers:{'Content-Type':'application/json', 'Accept':'application/json'}, body:JSON.stringify({version:version, os:os.toLowerCase(), is_update:false})}).catch(err => console.error('Tracking error:', err));const circumference = 226;// Animate countdown function tick(){if (modalIsPaused) return;// Don't tick while paused if (modalCount <= 0){// Download ready! status.textContent = '{{__('modal_status_done')}}';status.className = 'modal-status done';countdown.textContent = '✓';subtitle.textContent = '{{__('modal_download_success')}}';closeBtn.style.display = '';// Show close button downloadInProgress = false;// Unlock modal const link = document.getElementById('downloadTrigger');link.href = url;link.download = filename;link.click();// Show donation popup after delay, then close modal setTimeout(function(){closeDownloadModal();setTimeout(showDonationPopupModal, 500);}, 2500);return;}countdown.textContent = modalCount;const progress = (10 - modalCount) / 10;ring.style.strokeDashoffset = circumference * (1 - progress);modalCount--;downloadTimeout = setTimeout(tick, 1000);}// Start first tick after brief delay downloadTimeout = setTimeout(tick, 500);}// ── Visibility API:Pause/Resume modal timer ── document.addEventListener('visibilitychange', function(){if (!downloadInProgress) return;const status = document.getElementById('modalStatus');const subtitle = document.getElementById('modalSubtitle');if (document.hidden){modalIsPaused = true;if (downloadTimeout){clearTimeout(downloadTimeout);downloadTimeout = null;}if (modalCount > 0){status.textContent = '⏸{{__("modal_status_paused")}}';subtitle.textContent = '{{__("modal_paused_message")}}';}}else{modalIsPaused = false;if (modalCount > 0){status.textContent = '{{__("modal_status_preparing")}}';subtitle.textContent = '{{__("modal_wait_ad")}}';downloadTimeout = setTimeout(function(){const ring = document.getElementById('ringFill');const countdown = document.getElementById('modalCountdown');const circumference = 226;if (modalIsPaused) return;if (modalCount <= 0) return;countdown.textContent = modalCount;const progress = (10 - modalCount) / 10;ring.style.strokeDashoffset = circumference * (1 - progress);modalCount--;downloadTimeout = setTimeout(arguments.callee, 1000);}, 500);}}});function closeDownloadModal(){if (downloadInProgress) return;// Can't close during countdown clearTimeout(downloadTimeout);document.getElementById('downloadModal').classList.remove('active');document.body.style.overflow = '';}// Close modal on overlay click (only if not in countdown) document.getElementById('downloadModal').addEventListener('click', function(e){if (e.target === this && !downloadInProgress) closeDownloadModal();});// Escape key (only if not in countdown) document.addEventListener('keydown', e =>{if (e.key === 'Escape'){if (!downloadInProgress) closeDownloadModal();closeMobileNav();}});// ── Donation Popup (Modal version) ── function showDonationPopupModal(){if (sessionStorage.getItem('donatePopupShown')) return;sessionStorage.setItem('donatePopupShown', '1');const overlay = document.createElement('div');overlay.id = 'donateOverlay';overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:10000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);animation:fadeInDonate 0.3s ease';overlay.innerHTML = ` <div style="background:linear-gradient(145deg,#1a1f2e,#0f1320);border:1px solid rgba(255,255,255,0.1);border-radius:24px;padding:40px 36px;max-width:460px;width:92%;text-align:center;position:relative;box-shadow:0 25px 80px rgba(0,0,0,0.5);animation:popInDonate 0.4s ease"> <button onclick="document.getElementById('donateOverlay').remove()" style="position:absolute;top:14px;right:16px;background:none;border:none;color:rgba(255,255,255,0.4);font-size:20px;cursor:pointer;padding:4px 8px;transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,0.4)'">&times;</button> <div style="width:72px;height:72px;margin:0 auto 20px;border-radius:50%;background:linear-gradient(135deg,#ef4444,#f97316);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px rgba(239,68,68,0.3)"> <i class="fas fa-heart" style="font-size:28px;color:#fff"></i> </div> <h3 style="font-size:22px;font-weight:800;color:#fff;margin-bottom:8px">{{__('donate_popup_title')}}</h3> <p style="font-size:14px;color:rgba(255,255,255,0.6);line-height:1.7;margin-bottom:24px">{{__('donate_popup_desc')}}</p> <a href="{{$__donUrl}}" target="_blank" rel="noopener noreferrer" style="display:inline-flex;align-items:center;gap:10px;background:#0070BA;color:#fff;padding:14px 36px;border-radius:12px;font-size:16px;font-weight:700;text-decoration:none;box-shadow:0 6px 24px rgba(0,112,186,0.4);transition:all 0.3s;font-family:inherit" onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 10px 32px rgba(0,112,186,0.5)'" onmouseout="this.style.transform='';this.style.boxShadow='0 6px 24px rgba(0,112,186,0.4)'"> <i class="fab fa-paypal" style="font-size:20px"></i>{{__('donate_popup_btn')}}</a> <p style="font-size:12px;color:rgba(255,255,255,0.55);margin-top:16px">{{__('donate_popup_note')}}</p> </div>`;document.body.appendChild(overlay);overlay.addEventListener('click', function(e){if (e.target === overlay) overlay.remove();});}</script> @stack('scripts') <!-- AdSense Anchor Ad:Bottom (sticky at viewport bottom) --> <div class="anchor-ad-bottom" id="anchorAdBottom" aria-hidden="true"> <!-- ADSENSE_ANCHOR_BOTTOM:Google Auto Ads will populate this area --> <!-- To manually place:insert <ins class="adsbygoogle" data-ad-client="ca-pub-1386393421789746" data-ad-slot="YOUR_SLOT_ID" data-ad-format="anchor"> --> </div> <!-- Donate Modal --> <div class="donate-modal-overlay" id="donateModal"> <div class="donate-modal"> <button class="dm-close" onclick="closeDonateModal()" aria-label="Close"><i class="fas fa-times"></i></button> <!-- Animated Header --> <div class="dm-header"> <div class="dm-sparkles"> <span class="dm-sparkle" style="top:18%;left:12%;animation-delay:0s"></span> <span class="dm-sparkle" style="top:30%;right:15%;animation-delay:0.6s"></span> <span class="dm-sparkle" style="bottom:25%;left:25%;animation-delay:1.2s"></span> <span class="dm-sparkle" style="top:45%;right:30%;animation-delay:0.3s"></span> <span class="dm-sparkle" style="bottom:15%;right:20%;animation-delay:0.9s"></span> </div> <div class="dm-icon-ring"> <div class="dm-icon"> <i class="fas fa-heart"></i> </div> </div> <h3 class="dm-title">{{__('donate_modal_title')}}</h3> <p class="dm-desc">{{__('donate_modal_desc')}}</p> </div> <!-- Payment Methods --> <div class="dm-methods"> @if(isset($paymentMethods)) @foreach($paymentMethods->where('url', '!=', null)->where('url', '!=', '') as $method) <a href="{{$method->url}}" target="_blank" rel="noopener noreferrer" class="dm-method-card" style="--method-color:{{$method->color ?? '#0070BA'}}"> <div class="dm-method-icon"> @if($method->type === 'paypal') <i class="fab fa-paypal"></i> @elseif($method->type === 'crypto') <i class="fab fa-bitcoin"></i> @else <i class="fas fa-external-link-alt"></i> @endif </div> <span class="dm-method-label">{{$method->getLabel(app()->getLocale())}}</span> <i class="fas fa-arrow-right dm-method-arrow"></i> </a> @endforeach{{-- Local Wallets (Yemen Only) --}}@php $localWallets = $paymentMethods->filter(fn($m) => !$m->url && $m->account_number);$isYemen = isset($visitorCountry) && $visitorCountry === 'YE';@endphp @if($localWallets->isNotEmpty() && $isYemen) <div class="dm-divider"> <span>{{__('other_payment_methods')}}</span> </div> @foreach($localWallets as $wallet) <div class="dm-wallet-card" onclick="copyToClipboard('{{$wallet->account_number}}', this, '{{$wallet->getLabel(app()->getLocale())}}')" style="--wallet-color:{{$wallet->color ?? '#6366F1'}}"> <div class="dm-wallet-icon"> <i class="fas fa-wallet"></i> </div> <div class="dm-wallet-info"> <div class="dm-wallet-name">{{$wallet->getLabel(app()->getLocale())}}</div> <div class="dm-wallet-number">{{$wallet->account_number}}</div> </div> <div class="dm-wallet-copy"> <i class="fas fa-copy"></i> </div> </div> @endforeach @endif @endif </div> <p class="dm-footer-note">{{__('donate_popup_note')}}</p> </div> </div> <!-- Toast Notification --> <div id="toast" class="dm-toast"> <i class="fas fa-check-circle"></i> <span id="toast-message">{{__('toast_copied')}}</span> </div> <script> // Donate Modal Logic const donateModal = document.getElementById('donateModal');function openDonateModal(){donateModal.classList.add('active');document.body.style.overflow = 'hidden';if (typeof closeMobileNav === 'function') closeMobileNav();}function closeDonateModal(){donateModal.classList.remove('active');document.body.style.overflow = '';}donateModal.addEventListener('click', function(e){if (e.target === donateModal) closeDonateModal();});// Escape key closes modal document.addEventListener('keydown', function(e){if (e.key === 'Escape' && donateModal.classList.contains('active')) closeDonateModal();});function copyToClipboard(text, el, label){navigator.clipboard.writeText(text).then(function(){const toast = document.getElementById('toast');const msg = document.getElementById('toast-message');msg.textContent = '✓ ' + label;toast.classList.add('show');setTimeout(function(){toast.classList.remove('show');}, 3000);// Visual feedback el.classList.add('dm-copied');var copyIcon = el.querySelector('.dm-wallet-copy i');if (copyIcon){copyIcon.className = 'fas fa-check';copyIcon.style.color = '#10B981';}setTimeout(function(){el.classList.remove('dm-copied');if (copyIcon){copyIcon.className = 'fas fa-copy';copyIcon.style.color = '';}}, 2000);});}</script> <style> /* ═══════════════════════════════════════ */ /* DONATE MODAL — PREMIUM UI */ /* ═══════════════════════════════════════ */ .donate-modal-overlay{position:fixed;inset:0;background:rgba(0, 0, 0, 0.75);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity 0.35s ease, visibility 0.35s ease;}.donate-modal-overlay.active{opacity:1;visibility:visible;}/* ── Modal Container ── */ .donate-modal{background:linear-gradient(165deg, #161b2e 0%, #0f1322 50%, #0d111f 100%);border:1px solid rgba(255, 255, 255, 0.08);border-radius:28px;width:100%;max-width:480px;position:relative;transform:scale(0.92) translateY(30px);transition:transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;max-height:90vh;overflow-y:auto;overflow-x:hidden;box-shadow:0 25px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.06);}/* prettier scrollbar */ .donate-modal::-webkit-scrollbar{width:4px;}.donate-modal::-webkit-scrollbar-track{background:transparent;}.donate-modal::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:4px;}.donate-modal-overlay.active .donate-modal{transform:scale(1) translateY(0);}/* ── Close Button ── */ .dm-close{position:absolute;top:18px;right:18px;z-index:10;background:rgba(255, 255, 255, 0.06);border:1px solid rgba(255, 255, 255, 0.08);color:rgba(255, 255, 255, 0.45);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform, color, background, border, box-shadow, opacity, filter 0.25s;font-size:14px;}.dm-close:hover{background:rgba(255, 255, 255, 0.12);color:#fff;transform:rotate(90deg);border-color:rgba(255, 255, 255, 0.15);}/* ── Animated Header ── */ .dm-header{position:relative;text-align:center;padding:40px 36px 28px;background:linear-gradient(180deg, rgba(239, 68, 68, 0.06) 0%, transparent 100%);border-bottom:1px solid rgba(255, 255, 255, 0.04);overflow:hidden;}/* Sparkle particles */ .dm-sparkles{position:absolute;inset:0;pointer-events:none;}.dm-sparkle{position:absolute;width:5px;height:5px;background:radial-gradient(circle, rgba(249, 115, 22, 0.9), transparent);border-radius:50%;animation:dm-sparkle-float 3s ease-in-out infinite;will-change:transform, opacity;}@keyframes dm-sparkle-float{0%, 100%{opacity:0;transform:scale(0) translateY(0);}50%{opacity:1;transform:scale(1) translateY(-12px);}}/* Icon ring */ .dm-icon-ring{width:80px;height:80px;margin:0 auto 18px;border-radius:50%;padding:3px;background:linear-gradient(135deg, #ef4444, #f97316, #fbbf24);box-shadow:0 0 25px rgba(239, 68, 68, 0.3), 0 0 60px rgba(239, 68, 68, 0.1);}.dm-icon{width:100%;height:100%;border-radius:50%;background:linear-gradient(145deg, #1a1f30, #141827);display:flex;align-items:center;justify-content:center;}.dm-icon i{font-size:28px;background:linear-gradient(135deg, #ef4444, #f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:dm-heartbeat 1.8s ease-in-out infinite;will-change:transform;}@keyframes dm-heartbeat{0%, 100%{transform:scale(1);}15%{transform:scale(1.15);}30%{transform:scale(1);}45%{transform:scale(1.08);}60%{transform:scale(1);}}.dm-title{font-size:24px;font-weight:800;color:#fff;margin:0 0 8px;letter-spacing:-0.3px;}.dm-desc{font-size:14px;color:rgba(255, 255, 255, 0.65);line-height:1.6;margin:0;max-width:340px;margin-left:auto;margin-right:auto;}/* ── Payment Methods Grid ── */ .dm-methods{padding:24px 28px 10px;display:flex;flex-direction:column;gap:10px;}/* Online payment card */ .dm-method-card{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:14px;text-decoration:none;background:rgba(255, 255, 255, 0.03);border:1px solid rgba(255, 255, 255, 0.06);transition:transform, color, background, border, box-shadow, opacity, filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);position:relative;overflow:hidden;}.dm-method-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg, var(--method-color), transparent);opacity:0;transition:opacity 0.3s;border-radius:inherit;}.dm-method-card:hover{border-color:color-mix(in srgb, var(--method-color) 40%, transparent);transform:translateY(-2px);box-shadow:0 8px 30px color-mix(in srgb, var(--method-color) 20%, transparent);}.dm-method-card:hover::before{opacity:0.06;}.dm-method-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--method-color);background:color-mix(in srgb, var(--method-color) 12%, transparent);flex-shrink:0;position:relative;z-index:1;}.dm-method-label{flex:1;font-size:15px;font-weight:600;color:#fff;position:relative;z-index:1;}.dm-method-arrow{font-size:12px;color:rgba(255, 255, 255, 0.2);transition:transform, color, background, border, box-shadow, opacity, filter 0.3s;position:relative;z-index:1;}.dm-method-card:hover .dm-method-arrow{color:var(--method-color);transform:translateX(4px);}/* ── Divider ── */ .dm-divider{display:flex;align-items:center;gap:14px;margin:16px 0 8px;color:rgba(255, 255, 255, 0.35);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;}.dm-divider::before, .dm-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);}/* ── Local Wallet Card ── */ .dm-wallet-card{display:flex;align-items:center;gap:14px;padding:14px 16px;background:rgba(255, 255, 255, 0.02);border:1px solid rgba(255, 255, 255, 0.06);border-radius:14px;cursor:pointer;transition:transform, color, background, border, box-shadow, opacity, filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);position:relative;}.dm-wallet-card:hover{background:rgba(255, 255, 255, 0.05);border-color:color-mix(in srgb, var(--wallet-color) 35%, transparent);transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,0,0,0.2);}.dm-wallet-card.dm-copied{border-color:#10B981 !important;background:rgba(16, 185, 129, 0.06) !important;}.dm-wallet-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--wallet-color);background:color-mix(in srgb, var(--wallet-color) 12%, transparent);flex-shrink:0;}.dm-wallet-info{flex:1;min-width:0;}.dm-wallet-name{font-size:13px;font-weight:700;color:rgba(255, 255, 255, 0.9);margin-bottom:2px;}.dm-wallet-number{font-size:13px;color:rgba(255, 255, 255, 0.45);font-family:'SF Mono', 'Fira Code', 'Cascadia Code', monospace;letter-spacing:0.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.dm-wallet-copy{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:rgba(255, 255, 255, 0.25);background:rgba(255, 255, 255, 0.04);flex-shrink:0;font-size:13px;transition:transform, color, background, border, box-shadow, opacity, filter 0.25s;}.dm-wallet-card:hover .dm-wallet-copy{color:var(--wallet-color);background:color-mix(in srgb, var(--wallet-color) 10%, transparent);}/* ── Footer Note ── */ .dm-footer-note{font-size:12px;color:rgba(255, 255, 255, 0.55);text-align:center;padding:14px 28px 28px;margin:0;}/* ── Toast ── */ .dm-toast{position:fixed;z-index:10001;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);min-width:220px;background:linear-gradient(135deg, #10B981, #059669);color:#fff;text-align:center;border-radius:14px;padding:14px 28px;font-size:14px;font-weight:700;box-shadow:0 12px 40px rgba(16, 185, 129, 0.35), 0 0 0 1px rgba(255,255,255,0.1) inset;display:flex;align-items:center;justify-content:center;gap:10px;opacity:0;visibility:hidden;transition:transform, color, background, border, box-shadow, opacity, filter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);}.dm-toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}/* ── Responsive ── */ @media (max-width:540px){.donate-modal{max-width:100%;border-radius:20px;margin:10px;}.dm-header{padding:32px 24px 22px;}.dm-methods{padding:18px 20px 8px;}.dm-title{font-size:20px;}.dm-desc{font-size:13px;}.dm-icon-ring{width:68px;height:68px;}.dm-icon i{font-size:24px;}.dm-footer-note{padding:12px 20px 24px;}}/* Button reset for links-turned-buttons (SEO Fix) */ .btn-link-reset{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none;display:flex;align-items:center;gap:6px;text-decoration:none;transition:transform, color, background, border, box-shadow, opacity, filter 0.3s ease;}.btn-link-reset:hover{opacity:0.8;color:var(--accent);}.nav-links li button.btn-link-reset{height:100%;}/* ═══════════════════════════════════════ */ /* DONATE MODAL — PREMIUM UI */ /* ═══════════════════════════════════════ */ .donate-modal-overlay{position:fixed;inset:0;background:rgba(0, 0, 0, 0.75);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity 0.35s ease, visibility 0.35s ease;}.donate-modal-overlay.active{opacity:1;visibility:visible;}/* ── Modal Container ── */ .donate-modal{background:linear-gradient(165deg, #161b2e 0%, #0f1322 50%, #0d111f 100%);border:1px solid rgba(255, 255, 255, 0.08);border-radius:28px;width:100%;max-width:480px;position:relative;transform:scale(0.92) translateY(30px);transition:transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;max-height:90vh;overflow-y:auto;overflow-x:hidden;box-shadow:0 25px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.06);}/* prettier scrollbar */ .donate-modal::-webkit-scrollbar{width:4px;}.donate-modal::-webkit-scrollbar-track{background:transparent;}.donate-modal::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:4px;}.donate-modal-overlay.active .donate-modal{transform:scale(1) translateY(0);}/* ── Close Button ── */ .dm-close{position:absolute;top:18px;right:18px;z-index:10;background:rgba(255, 255, 255, 0.06);border:1px solid rgba(255, 255, 255, 0.08);color:rgba(255, 255, 255, 0.45);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform, color, background, border, box-shadow, opacity, filter 0.25s;font-size:14px;}.dm-close:hover{background:rgba(255, 255, 255, 0.12);color:#fff;transform:rotate(90deg);border-color:rgba(255, 255, 255, 0.15);}/* ── Animated Header ── */ .dm-header{position:relative;text-align:center;padding:40px 36px 28px;background:linear-gradient(180deg, rgba(239, 68, 68, 0.06) 0%, transparent 100%);border-bottom:1px solid rgba(255, 255, 255, 0.04);overflow:hidden;}/* Sparkle particles */ .dm-sparkles{position:absolute;inset:0;pointer-events:none;}.dm-sparkle{position:absolute;width:5px;height:5px;background:radial-gradient(circle, rgba(249, 115, 22, 0.9), transparent);border-radius:50%;animation:dm-sparkle-float 3s ease-in-out infinite;will-change:transform, opacity;}@keyframes dm-sparkle-float{0%, 100%{opacity:0;transform:scale(0) translateY(0);}50%{opacity:1;transform:scale(1) translateY(-12px);}}/* Icon ring */ .dm-icon-ring{width:80px;height:80px;margin:0 auto 18px;border-radius:50%;padding:3px;background:linear-gradient(135deg, #ef4444, #f97316, #fbbf24);box-shadow:0 0 25px rgba(239, 68, 68, 0.3), 0 0 60px rgba(239, 68, 68, 0.1);}.dm-icon{width:100%;height:100%;border-radius:50%;background:linear-gradient(145deg, #1a1f30, #141827);display:flex;align-items:center;justify-content:center;}.dm-icon i{font-size:28px;background:linear-gradient(135deg, #ef4444, #f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:dm-heartbeat 1.8s ease-in-out infinite;will-change:transform;}@keyframes dm-heartbeat{0%, 100%{transform:scale(1);}15%{transform:scale(1.15);}30%{transform:scale(1);}45%{transform:scale(1.08);}60%{transform:scale(1);}}.dm-title{font-size:24px;font-weight:800;color:#fff;margin:0 0 8px;letter-spacing:-0.3px;}.dm-desc{font-size:14px;color:rgba(255, 255, 255, 0.65);line-height:1.6;margin:0;max-width:340px;margin-left:auto;margin-right:auto;}/* ── Payment Methods Grid ── */ .dm-methods{padding:24px 28px 10px;display:flex;flex-direction:column;gap:10px;}/* Online payment card */ .dm-method-card{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:14px;text-decoration:none;background:rgba(255, 255, 255, 0.03);border:1px solid rgba(255, 255, 255, 0.06);transition:transform, color, background, border, box-shadow, opacity, filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);position:relative;overflow:hidden;}.dm-method-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg, var(--method-color), transparent);opacity:0;transition:opacity 0.3s;border-radius:inherit;}.dm-method-card:hover{border-color:color-mix(in srgb, var(--method-color) 40%, transparent);transform:translateY(-2px);box-shadow:0 8px 30px color-mix(in srgb, var(--method-color) 20%, transparent);}.dm-method-card:hover::before{opacity:0.06;}.dm-method-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--method-color);background:color-mix(in srgb, var(--method-color) 12%, transparent);flex-shrink:0;position:relative;z-index:1;}.dm-method-label{flex:1;font-size:15px;font-weight:600;color:#fff;position:relative;z-index:1;}.dm-method-arrow{font-size:12px;color:rgba(255, 255, 255, 0.2);transition:transform, color, background, border, box-shadow, opacity, filter 0.3s;position:relative;z-index:1;}.dm-method-card:hover .dm-method-arrow{color:var(--method-color);transform:translateX(4px);}/* ── Divider ── */ .dm-divider{display:flex;align-items:center;gap:14px;margin:16px 0 8px;color:rgba(255, 255, 255, 0.35);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;}.dm-divider::before, .dm-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);}/* ── Local Wallet Card ── */ .dm-wallet-card{display:flex;align-items:center;gap:14px;padding:14px 16px;background:rgba(255, 255, 255, 0.02);border:1px solid rgba(255, 255, 255, 0.06);border-radius:14px;cursor:pointer;transition:transform, color, background, border, box-shadow, opacity, filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);position:relative;}.dm-wallet-card:hover{background:rgba(255, 255, 255, 0.05);border-color:color-mix(in srgb, var(--wallet-color) 35%, transparent);transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,0,0,0.2);}.dm-wallet-card.dm-copied{border-color:#10B981 !important;background:rgba(16, 185, 129, 0.06) !important;}.dm-wallet-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--wallet-color);background:color-mix(in srgb, var(--wallet-color) 12%, transparent);flex-shrink:0;}.dm-wallet-info{flex:1;min-width:0;}.dm-wallet-name{font-size:13px;font-weight:700;color:rgba(255, 255, 255, 0.9);margin-bottom:2px;}.dm-wallet-number{font-size:13px;color:rgba(255, 255, 255, 0.45);font-family:'SF Mono', 'Fira Code', 'Cascadia Code', monospace;letter-spacing:0.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.dm-wallet-copy{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:rgba(255, 255, 255, 0.25);background:rgba(255, 255, 255, 0.04);flex-shrink:0;font-size:13px;transition:transform, color, background, border, box-shadow, opacity, filter 0.25s;}.dm-wallet-card:hover .dm-wallet-copy{color:var(--wallet-color);background:color-mix(in srgb, var(--wallet-color) 10%, transparent);}/* ── Footer Note ── */ .dm-footer-note{font-size:12px;color:rgba(255, 255, 255, 0.55);text-align:center;padding:14px 28px 28px;margin:0;}/* ── Toast ── */ .dm-toast{position:fixed;z-index:10001;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);min-width:220px;background:linear-gradient(135deg, #10B981, #059669);color:#fff;text-align:center;border-radius:14px;padding:14px 28px;font-size:14px;font-weight:700;box-shadow:0 12px 40px rgba(16, 185, 129, 0.35), 0 0 0 1px rgba(255,255,255,0.1) inset;display:flex;align-items:center;justify-content:center;gap:10px;opacity:0;visibility:hidden;transition:transform, color, background, border, box-shadow, opacity, filter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);}.dm-toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}/* ── Responsive ── */ @media (max-width:540px){.donate-modal{max-width:100%;border-radius:20px;margin:10px;}.dm-header{padding:32px 24px 22px;}.dm-methods{padding:18px 20px 8px;}.dm-title{font-size:20px;}.dm-desc{font-size:13px;}.dm-icon-ring{width:68px;height:68px;}.dm-icon i{font-size:24px;}.dm-footer-note{padding:12px 20px 24px;}}/* Button reset for links-turned-buttons (SEO Fix) */ .btn-link-reset{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none;display:flex;align-items:center;gap:6px;text-decoration:none;transition:transform, color, background, border, box-shadow, opacity, filter 0.3s ease;}.btn-link-reset:hover{opacity:0.8;color:var(--accent);}.nav-links li button.btn-link-reset{height:100%;}.ad-section,.ad-buffer-zone,.ad-in-article{display:none !important}