/* hero.css — VANGUARD GAMING FONT + ANIMATIONS */
        .page { display:none; } .page.active{ display:block; animation:pageIn 0.4s ease; }
        @keyframes pageIn{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
        .section-head{ text-align:center; padding:56px 0 32px; }
        .section-head .eyebrow{ display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--red);background:var(--red-dim);border:1px solid var(--red-border);padding:5px 12px;border-radius:999px;margin-bottom:14px; }
        .section-head h2{ font-family:var(--font-display);font-size:42px;font-weight:800;line-height:1.1;letter-spacing:-0.5px;background:linear-gradient(135deg,#fff 30%,#b05050 70%,var(--red) 100%);-webkit-background-clip:text;background-clip:text;color:transparent; animation: orbitGlow 3s ease-in-out infinite; }
        .section-head p{ font-family:var(--font-body);font-size:15px;color:var(--muted);margin-top:12px;max-width:560px;margin-left:auto;margin-right:auto;}

        .hero-desktop{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center; padding:72px 0 36px; min-height:560px; }
        .hero-left{ text-align:left; }
        .hero-eyebrow{
            display:inline-flex;align-items:center;gap:10px;
            font-family:var(--font-display); font-size:10px; font-weight:800; letter-spacing:2.2px; text-transform:uppercase;
            color:#c8c8c8; background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border:1px solid rgba(122,0,0,0.25);
            padding:8px 14px; border-radius:999px; margin-bottom:18px;
            box-shadow:0 4px 16px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
            animation: fadeSlideIn 0.6s ease both, eyebrowPulse 2.5s ease-in-out infinite 1s;
        }
        @keyframes eyebrowPulse{ 0%,100%{ border-color:rgba(255,255,255,0.07)} 50%{ border-color:rgba(122,0,0,0.4)}}
        .hero-eyebrow-dot{width:8px;height:8px;border-radius:50%;background:#2ecc71;box-shadow:0 0 10px rgba(46,204,113,0.7);display:inline-block; animation: dotBlink 1.2s ease-in-out infinite; }
        @keyframes dotBlink{ 0%,100%{opacity:1} 50%{opacity:0.5}}
        .hero-eyebrow-badge{margin-left:6px;background:var(--red);color:#fff;padding:2px 7px;border-radius:999px;font-size:9px;letter-spacing:1px;font-weight:800; animation: badgePulse 1.5s ease-in-out infinite; }
        @keyframes badgePulse{ 0%,100%{box-shadow:0 0 0 0 rgba(122,0,0,0.4)} 50%{box-shadow:0 0 0 6px rgba(122,0,0,0)}}

        /* ——— VANGUARD — HERO TITLE — BEBAS + ORBITRON + ANIMATIONS ——— */
        .hero-title{
            font-family:var(--font-hero);
            font-size:88px; font-weight:400; line-height:0.88;
            letter-spacing:2px; text-transform:uppercase;
            color:#fff; margin:0 0 14px;
            animation: fadeSlideIn 0.6s ease 0.08s both;
            position:relative;
        }
        .hero-title-line{
            display:block; position:relative;
            background: linear-gradient(100deg, #fff 0%, #fff 35%, #ff2b2b 55%, #7a0000 75%, #fff 100%);
            background-size:200% 100%;
            -webkit-background-clip:text; background-clip:text; color:transparent;
            animation: titleGradient 3.5s linear infinite, titleFloat 4s ease-in-out infinite;
            filter: drop-shadow(0 0 18px rgba(122,0,0,0.45)) drop-shadow(0 2px 0 rgba(0,0,0,0.8));
        }
        .hero-title-line:nth-child(1){ animation-delay:0s, 0s; }
        .hero-title-line.accent{
            background: linear-gradient(100deg, #ff3b3b 0%, #7a0000 35%, #ff6b6b 60%, #7a0000 85%, #ff3b3b 100%);
            background-size:200% 100%;
            -webkit-background-clip:text; background-clip:text; color:transparent;
            animation: titleGradient 2.8s linear infinite reverse, titleFloat 4s ease-in-out infinite 0.3s, titleGlitch 7s ease-in-out infinite;
            letter-spacing:4px;
        }
        @keyframes titleGradient{ 0%{background-position:0% 50%} 100%{background-position:200% 50%}}
        @keyframes titleFloat{ 0%,100%{transform:translateY(0) skewX(0deg)} 25%{transform:translateY(-2px) skewX(-0.3deg)} 75%{transform:translateY(1px) skewX(0.3deg)}}
        @keyframes titleGlitch{
            0%,94%,100%{ transform:translateY(0) skewX(0deg); filter:drop-shadow(0 0 18px rgba(122,0,0,0.45)); }
            95%{ transform:translateY(-1px) skewX(-1deg); filter:drop-shadow(2px 0 0 rgba(255,0,0,0.6)) drop-shadow(-2px 0 0 rgba(0,255,255,0.3)); }
            96%{ transform:translateY(1px) skewX(1deg); }
        }
        @keyframes orbitGlow{ 0%,100%{ filter:drop-shadow(0 0 6px rgba(122,0,0,0.2))} 50%{ filter:drop-shadow(0 0 14px rgba(122,0,0,0.4))}}
        /* small chrome line under title */
        .hero-title::after{
            content:''; position:absolute; left:0; bottom:-6px; width:88px; height:2px;
            background:linear-gradient(90deg, var(--red), transparent);
            border-radius:2px; opacity:0.9;
        }

        .hero-tagline{ font-family:var(--font-body); font-size:15px; font-weight:400; line-height:1.7; color:#8a8a8a; max-width:520px; margin:18px 0 26px; animation: fadeSlideIn 0.6s ease 0.14s both; }
        .hero-actions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:18px; animation: fadeSlideIn 0.6s ease 0.20s both; }
        .hero-actions .btn-ghost{ padding:13px 18px; font-size:13px; letter-spacing:0.6px; }
        .hero-meta{ display:flex; gap:10px; flex-wrap:wrap; color:#777; font-size:11px; letter-spacing:0.6px; animation: fadeSlideIn 0.6s ease 0.26s both; }
        .hero-meta-item{ display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); padding:7px 12px; border-radius:999px; font-family:var(--font-display); font-weight:700; font-size:10px; letter-spacing:1px; text-transform:uppercase; transition:all 0.2s; }
        .hero-meta-item:hover{ border-color:var(--red-border); color:#aaa; transform:translateY(-1px); }
        .hero-meta-item i{ color:var(--red); font-size:11px; }
        .hero-meta-item b{ color:#ddd; font-weight:700; }

        .btn-hero, .btn-hero .sb-label{
            font-family:var(--font-playful) !important; letter-spacing:0.6px;
        }
        .btn-hero{
            display:inline-flex;align-items:center;justify-content:center;gap:10px;position:relative;overflow:hidden;
            background:linear-gradient(135deg, #7a0000 0%, #9a0000 50%, #7a0000 100%);background-size:200% 100%;
            color:#fff;padding:14px 24px;border-radius:12px;
            font-size:14px;font-weight:400;text-transform:uppercase;border:none;cursor:pointer;
            transition:background-position 0.4s, box-shadow 0.25s, transform 0.2s; text-decoration:none;
            animation: btnShimmer 3s linear infinite;
        }
        @keyframes btnShimmer{ 0%{background-position:0% 50%} 100%{background-position:200% 50%}}
        .btn-hero:hover{ box-shadow:0 8px 30px rgba(122,0,0,0.55); transform:translateY(-2px) scale(1.02); }
        .btn-hero.btn-hero-dash{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); color:#fff; backdrop-filter:blur(6px); animation:none; }
        .btn-hero.btn-hero-dash:hover{ background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.14);}

        .hero-right{ position:relative; display:flex; justify-content:center; align-items:center; }
        .hero-glow{ position:absolute; inset:-40px; background:radial-gradient(ellipse 60% 50% at 50% 50%, rgba(122,0,0,0.22) 0%, transparent 70%); filter:blur(12px); pointer-events:none; z-index:0; animation: glowPulse 4s ease-in-out infinite; }
        @keyframes glowPulse{ 0%,100%{ opacity:0.8; transform:scale(1)} 50%{ opacity:1; transform:scale(1.05)}}
        .hero-window{
            position:relative; z-index:1; width:100%; max-width:520px;
            background:rgba(12,12,12,0.96); border:1px solid rgba(122,0,0,0.18); border-radius:18px; overflow:hidden;
            box-shadow:0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03) inset;
            animation: fadeSlideIn 0.7s ease 0.18s both, windowFloat 6s ease-in-out infinite 1s;
        }
        @keyframes windowFloat{ 0%,100%{ transform:translateY(0)} 50%{ transform:translateY(-6px)}}
        .hero-window-bar{ display:flex;align-items:center;gap:10px; padding:12px 14px; background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border-bottom:1px solid rgba(255,255,255,0.06); font-family:var(--font-mono);font-size:11px;color:#888; }
        .hero-window-dots{ display:flex;gap:6px;}
        .hero-window-dots span{width:10px;height:10px;border-radius:50%;display:inline-block; animation: dotPulse 2s ease-in-out infinite;}
        .hero-window-dots span:nth-child(2){ animation-delay:0.2s} .hero-window-dots span:nth-child(3){ animation-delay:0.4s}
        @keyframes dotPulse{ 0%,100%{opacity:1} 50%{opacity:0.6}}
        .hero-window-dots span:nth-child(1){background:#ff5f56;border:1px solid rgba(0,0,0,0.2);}
        .hero-window-dots span:nth-child(2){background:#ffbd2e;border:1px solid rgba(0,0,0,0.2);}
        .hero-window-dots span:nth-child(3){background:#27c93f;border:1px solid rgba(0,0,0,0.2);}
        .hero-window-title{ flex:1; text-align:center; letter-spacing:0.6px; color:#bbb; display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-display); }
        .hero-window-title i{ color:var(--red); animation: iconSpin 8s linear infinite; }
        @keyframes iconSpin{ 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)}}
        .hero-window-body{ padding:16px; background: radial-gradient(ellipse at 50% 0%, rgba(122,0,0,0.10) 0%, transparent 60%), #0a0a0a;}
        .hero-window-nav{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
        .hero-window-nav span{ font-family:var(--font-mono);font-size:11px;letter-spacing:0.5px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);color:#777;display:inline-flex;align-items:center;gap:6px; transition:all 0.2s;}
        .hero-window-nav span.active{ background:var(--red-dim);border-color:var(--red-border);color:#fff; animation: navActive 2s ease-in-out infinite;}
        @keyframes navActive{ 0%,100%{box-shadow:0 0 0 0 rgba(122,0,0,0.3)} 50%{box-shadow:0 0 0 4px rgba(122,0,0,0)}}
        .hero-window-card{ background:rgba(18,18,18,0.98); border:1px solid rgba(255,255,255,0.06); border-radius:14px; padding:14px;}
        .hero-window-card-head{ display:flex; gap:12px; align-items:center; margin-bottom:14px;}
        .hero-window-avatar{ width:42px; height:42px; border-radius:50%; background:#111; border:1.5px solid var(--red); box-shadow:0 0 12px var(--red-glow); overflow:hidden; flex-shrink:0; animation: avatarPulse 3s ease-in-out infinite;}
        @keyframes avatarPulse{ 0%,100%{box-shadow:0 0 12px var(--red-glow)} 50%{box-shadow:0 0 20px var(--red-glow)}}
        .hero-window-avatar img{ width:100%; height:100%; object-fit:cover;}
        .hero-window-name{ font-family:var(--font-display); font-weight:800; font-size:14px; color:#fff;}
        .hero-window-name span{ font-family:var(--font-mono); font-size:9px; background:var(--red); color:#fff; padding:2px 5px; border-radius:4px; margin-left:6px; vertical-align:middle; letter-spacing:0.6px; animation: botBadge 2s ease-in-out infinite;}
        @keyframes botBadge{ 0%,100%{background:var(--red)} 50%{background:#ff1a1a}}
        .hero-window-sub{ font-size:11px; color:#666; font-family:var(--font-mono);}
        .hero-window-status{ margin-left:auto; width:10px; height:10px; background:#2ecc71; border-radius:50%; box-shadow:0 0 10px rgba(46,204,113,0.7); border:2px solid #0a0a0a; animation: statusBlink 1.5s ease-in-out infinite;}
        @keyframes statusBlink{ 0%,100%{opacity:1} 50%{opacity:0.6}}
        .hero-window-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px;}
        .hero-window-stats div{ background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.05); border-radius:10px; padding:10px; text-align:center; transition:all 0.2s;}
        .hero-window-stats div:hover{ background:rgba(122,0,0,0.08); border-color:var(--red-border); transform:translateY(-2px);}
        .hero-window-stats b{ display:block; font-family:var(--font-display); font-size:18px; color:var(--red); line-height:1; animation: statCount 0.8s ease both;}
        .hero-window-stats span{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.8px; text-transform:uppercase; color:#666;}
        /* ——— MARQUEE FEATURES BAR — يتحرك زي البروتفوليو ——— */
        .hero-marquee{ overflow:hidden; background:rgba(122,0,0,0.08); border:1px solid rgba(122,0,0,0.18); border-radius:10px; padding:7px 0; margin-bottom:12px; position:relative; }
        .hero-marquee::before, .hero-marquee::after{ content:''; position:absolute; top:0; bottom:0; width:28px; z-index:1; pointer-events:none; }
        .hero-marquee::before{ left:0; background:linear-gradient(90deg, rgba(10,10,10,1), transparent); }
        .hero-marquee::after{ right:0; background:linear-gradient(270deg, rgba(10,10,10,1), transparent); }
        .hero-marquee-track{ display:flex; gap:18px; width:max-content; animation: marqueeScroll 18s linear infinite; }
        .hero-marquee-track span{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#b0b0b0; white-space:nowrap; flex-shrink:0; }
        .hero-marquee-track span i{ color:var(--red); font-size:10px; }
        @keyframes marqueeScroll{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
        .hero-marquee:hover .hero-marquee-track{ animation-play-state:paused; }

        .hero-window-log{ background:#080808; border:1px solid rgba(255,255,255,0.05); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:7px; margin-bottom:12px; min-height:78px; }
        .hwl-line{ font-family:var(--font-mono); font-size:11px; color:#aaa; display:flex; gap:8px; align-items:center; animation: logSlide 0.4s ease both;}
        @keyframes logSlide{ from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:translateX(0)}}
        .hwl-time{ color:#444; font-size:10px;}
        .hwl-ok{ color:#2ecc71; font-weight:700;}
        .hwl-warn{ color:#ffb300; font-weight:700;}
        .hwl-info{ color:#5dade2; }
        .hero-window-cta{ display:flex; align-items:center; gap:10px; background:#0f0f0f; border:1px solid rgba(122,0,0,0.18); border-radius:10px; padding:8px 10px; font-family:var(--font-mono); font-size:11px; color:#777;}
        .hero-window-nav span{ cursor:pointer; user-select:none; }
        .hero-window-nav span:hover{ background:rgba(255,255,255,0.06); color:#bbb; }
        .hero-window-cta-btn{ width:30px; height:30px; border-radius:8px; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; animation: ctaPulse 2s ease-in-out infinite;}
        @keyframes ctaPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)}}
        .hero-window-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:12px; font-family:var(--font-mono); font-size:10px; color:#555; letter-spacing:0.4px;}

        .desktop-features-preview{ padding:18px 0 10px;}
        .dfp-head{ text-align:center; max-width:680px; margin:0 auto 26px;}
        .dfp-head .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:2px; color:var(--red); background:var(--red-dim); border:1px solid var(--red-border); padding:5px 12px; border-radius:999px; margin-bottom:12px;}
        .dfp-head h3{ font-family:var(--font-display); font-size:30px; font-weight:800; line-height:1.15; letter-spacing:-0.5px; background:linear-gradient(135deg,#fff 0%,#c07070 60%, var(--red) 100%); -webkit-background-clip:text; background-clip:text; color:transparent;}
        .dfp-head p{ font-family:var(--font-body); font-size:14px; color:#666; margin-top:10px; line-height:1.6;}
        .dfp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px;}
        .dfp-card{ background:rgba(12,12,12,0.9); border:1px solid rgba(255,255,255,0.06); border-radius:16px; padding:20px; transition:all 0.25s; position:relative; overflow:hidden;}
        .dfp-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--red), transparent); opacity:0; transition:opacity 0.3s;}
        .dfp-card:hover{ border-color:var(--red-border); transform:translateY(-4px) scale(1.01); box-shadow:0 12px 30px rgba(0,0,0,0.5);}
        .dfp-card:hover::before{ opacity:1;}
        .dfp-icon{ width:44px; height:44px; border-radius:10px; background:var(--red-dim); border:1px solid var(--red-border); display:flex; align-items:center; justify-content:center; color:var(--red); margin-bottom:12px; transition:all 0.3s;}
        .dfp-card:hover .dfp-icon{ background:var(--red); color:#fff; transform:rotate(5deg) scale(1.08); box-shadow:0 6px 16px var(--red-glow);}
        .dfp-card h4{ font-family:var(--font-display); font-size:15px; font-weight:700; color:#fff; margin-bottom:6px;}
        .dfp-card p{ font-family:var(--font-body); font-size:13px; color:#777; line-height:1.6;}

        @keyframes fadeSlideIn{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)}}
        .btn-ghost{ display:inline-flex; align-items:center; gap:9px; background:transparent; color:var(--text); padding:14px 28px; border-radius:10px; font-weight:600; font-size:15px; border:1.5px solid var(--red-border); cursor:pointer; transition:all var(--transition); font-family:var(--font-body); text-decoration:none;}
        .btn-ghost:hover{ border-color:var(--red); color:var(--red); background:var(--red-dim); transform:translateY(-1px);}
        .btn-primary{ display:inline-flex; align-items:center; gap:9px; background:var(--red); color:#fff; padding:14px 28px; border-radius:10px; font-weight:700; font-size:15px; border:none; cursor:pointer; transition:all var(--transition); font-family:var(--font-body);}
        .btn-primary:hover{ background:#8a0000; transform:translateY(-2px); box-shadow:0 8px 25px var(--red-glow);}

        @media(max-width:980px){
            .hero-desktop{grid-template-columns:1fr;gap:28px;padding:48px 0 24px;min-height:auto;}
            .hero-title{ font-size:64px; }
            .hero-left{ text-align:center;}
            .hero-tagline{ margin-left:auto; margin-right:auto;}
            .hero-actions{ justify-content:center;}
            .hero-meta{ justify-content:center;}
            .dfp-grid{ grid-template-columns:repeat(2,1fr);}
        }
        @media(max-width:600px){
            .hero-title{ font-size:48px; letter-spacing:1px;}
            .dfp-grid{ grid-template-columns:1fr;}
            .dfp-head h3{ font-size:24px;}
            .hero-window{ max-width:100%;}
        }