<?php
// public/home.php — الصفحة الرئيسية (v3 Premium Identity)
require_once __DIR__.'/../config/app.php';

$dir  = (lang() === 'ar') ? 'rtl' : 'ltr';
$thm  = theme();
$user = currentUser();

if ($user) {
    redirect(BASE_URL.'/'.$user['role'].'/dashboard.php');
}
?>
<!DOCTYPE html>
<html lang="<?= e(lang()) ?>" dir="<?= $dir ?>" data-theme="<?= $thm ?>">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VehicleVerify DZ — نظام التحقق الوطني من المركبات</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&family=Sora:wght@300;400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="<?= BASE_URL ?>/css/main.css">
<style>
:root {
  --h-navy:      #0a1628;
  --h-navy-mid:  #0f2140;
  --h-navy-card: #142035;
  --h-gold:      #f5a623;
  --h-gold-deep: #c8841a;
  --h-gold-glow: rgba(245,166,35,0.22);
  --h-blue:      #1a56db;
  --h-blue-glow: rgba(26,86,219,0.28);
  --h-green:     #12805c;
  --h-text:      rgba(255,255,255,0.88);
  --h-muted:     rgba(255,255,255,0.46);
  --h-border:    rgba(255,255,255,0.09);
  --h-card-bg:   rgba(255,255,255,0.045);
  --h-glass:     rgba(14,26,50,0.72);
  --h-radius:    18px;
  --h-radius-sm: 10px;
  --h-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--h-navy);overflow-x:hidden;color:var(--h-text)}

/* NAV */
.vv-nav{position:fixed;top:0;inset-inline:0;z-index:1000;height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 52px;background:rgba(10,22,40,0.82);backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid var(--h-border);transition:var(--h-transition)}
.vv-nav.solid{background:rgba(10,22,40,0.97);box-shadow:0 4px 40px rgba(0,0,0,0.4)}
.nav-logo{display:flex;align-items:center;gap:13px;text-decoration:none}
.logo-emblem{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--h-blue) 0%,#0f3fa8 100%);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px var(--h-blue-glow),inset 0 1px 0 rgba(255,255,255,0.18);position:relative;overflow:hidden}
.logo-emblem::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.12) 0%,transparent 60%)}
.logo-emblem svg{position:relative;z-index:1}
.logo-name{font-family:'Sora',sans-serif;font-weight:800;font-size:15px;color:#fff;letter-spacing:-0.01em;line-height:1}
.logo-name em{color:var(--h-gold);font-style:normal}
.logo-tagline{font-family:'Cairo',sans-serif;font-size:10px;color:var(--h-muted);margin-top:2px;display:block}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{color:var(--h-muted);font-family:'Cairo',sans-serif;font-size:13.5px;font-weight:600;padding:7px 15px;border-radius:8px;text-decoration:none;transition:var(--h-transition)}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,0.07)}
.nav-cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--h-blue);color:#fff !important;padding:8px 20px;border-radius:8px;font-family:'Cairo',sans-serif;font-size:13.5px;font-weight:700;text-decoration:none;transition:var(--h-transition);box-shadow:0 4px 16px var(--h-blue-glow)}
.nav-cta-btn:hover{background:#1545b8;transform:translateY(-1px)}
.nav-controls{display:flex;align-items:center;gap:8px}
.lang-pill{display:flex;gap:3px;background:rgba(255,255,255,0.06);border-radius:8px;padding:3px}
.lang-pill a{padding:4px 9px;border-radius:6px;font-size:11px;font-weight:700;font-family:'Sora',sans-serif;color:var(--h-muted);text-decoration:none;transition:var(--h-transition)}
.lang-pill a.active,.lang-pill a:hover{background:var(--h-blue);color:#fff}
.theme-toggle{width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,0.07);border:1px solid var(--h-border);color:var(--h-muted);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:var(--h-transition)}
.theme-toggle:hover{background:rgba(255,255,255,0.14);color:#fff}

/* HERO */
.vv-hero{min-height:100vh;position:relative;overflow:hidden;display:flex;flex-direction:column;background:var(--h-navy);padding-top:68px}
.hero-mesh{position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 80% 60% at 110% 0%,rgba(26,86,219,0.22) 0%,transparent 60%),radial-gradient(ellipse 50% 40% at -10% 60%,rgba(245,166,35,0.10) 0%,transparent 55%),radial-gradient(ellipse 40% 35% at 55% 110%,rgba(18,128,92,0.08) 0%,transparent 50%),linear-gradient(175deg,#0a1628 0%,#0f2140 45%,#081018 100%)}
.hero-grid{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(255,255,255,0.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.018) 1px,transparent 1px);background-size:64px 64px}
.hero-glow{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(72px)}
.glow-a{width:560px;height:560px;background:rgba(26,86,219,0.20);top:-140px;right:-80px;animation:glowDrift 8s ease-in-out infinite alternate}
.glow-b{width:320px;height:320px;background:rgba(245,166,35,0.13);bottom:60px;left:5%;animation:glowDrift 10s ease-in-out infinite alternate-reverse}
.glow-c{width:200px;height:200px;background:rgba(18,128,92,0.10);top:40%;right:30%;animation:glowDrift 12s ease-in-out infinite alternate}
@keyframes glowDrift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(20px,15px) scale(1.08)}}
#particles{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-body{position:relative;z-index:2;flex:1;display:flex;align-items:center;max-width:1240px;margin:0 auto;padding:60px 52px;gap:72px;width:100%}
.hero-left{flex:1.05;min-width:0}
.official-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(245,166,35,0.10);border:1px solid rgba(245,166,35,0.28);padding:7px 18px;border-radius:50px;margin-bottom:28px;animation:slideUp 0.6s ease both}
.badge-dot{width:8px;height:8px;border-radius:50%;background:var(--h-gold);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.8)}}
.badge-text{font-family:'Cairo',sans-serif;font-size:12px;font-weight:700;color:var(--h-gold)}
.badge-flag{font-size:16px}
.hero-headline{font-family:'Cairo',sans-serif;font-size:clamp(34px,4.2vw,58px);font-weight:900;color:#fff;line-height:1.18;margin-bottom:22px;animation:slideUp 0.7s ease 0.1s both}
.hero-headline .hl-gold{color:var(--h-gold);text-shadow:0 0 48px rgba(245,166,35,0.35)}
.hero-headline .hl-line2{display:block}
.hero-sub{font-family:'Cairo',sans-serif;font-size:16px;color:var(--h-muted);line-height:1.85;max-width:520px;margin-bottom:40px;animation:slideUp 0.7s ease 0.2s both}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:52px;animation:slideUp 0.7s ease 0.3s both}
.btn-primary-hero{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--h-blue) 0%,#1040c0 100%);color:#fff;padding:14px 34px;border-radius:10px;font-family:'Cairo',sans-serif;font-size:15px;font-weight:700;text-decoration:none;transition:var(--h-transition);box-shadow:0 8px 28px var(--h-blue-glow),inset 0 1px 0 rgba(255,255,255,0.15)}
.btn-primary-hero:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(26,86,219,0.48);color:#fff}
.btn-ghost-hero{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,0.06);border:1.5px solid rgba(255,255,255,0.18);color:rgba(255,255,255,0.82);padding:14px 28px;border-radius:10px;font-family:'Cairo',sans-serif;font-size:15px;font-weight:700;text-decoration:none;transition:var(--h-transition)}
.btn-ghost-hero:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.36);color:#fff}
.hero-stats{display:flex;gap:0;border-top:1px solid var(--h-border);padding-top:36px;animation:slideUp 0.7s ease 0.4s both}
.hstat{flex:1;padding:0 28px 0 0;border-inline-end:1px solid var(--h-border)}
.hstat:last-child{border-inline-end:none;padding-inline:28px 0}
.hstat:first-child{padding-inline-start:0}
.hstat-num{font-family:'Sora',sans-serif;font-size:32px;font-weight:800;color:#fff;line-height:1;margin-bottom:5px}
.hstat-label{font-family:'Cairo',sans-serif;font-size:12px;color:var(--h-muted)}

/* MOCKUP */
.hero-right{flex:0.9;animation:slideUp 0.8s ease 0.2s both}
.mockup-wrap{position:relative;padding-bottom:28px}
.mockup-frame{background:linear-gradient(145deg,var(--h-navy-card),#0c1f3a);border:1px solid rgba(255,255,255,0.11);border-radius:22px;padding:26px;box-shadow:0 40px 100px 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.09);position:relative;overflow:hidden}
.mockup-frame::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.04) 0%,transparent 45%);pointer-events:none}
.mf-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,0.07)}
.mf-topbar-brand{display:flex;align-items:center;gap:10px}
.mf-icon{width:32px;height:32px;border-radius:8px;background:var(--h-blue);display:flex;align-items:center;justify-content:center;font-size:15px}
.mf-title{font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;color:#fff}
.mf-sub{font-family:'Cairo',sans-serif;font-size:10px;color:var(--h-muted)}
.mf-verified{display:flex;align-items:center;gap:6px;background:rgba(16,185,129,0.14);border:1px solid rgba(16,185,129,0.3);padding:4px 12px;border-radius:50px;font-family:'Cairo',sans-serif;font-size:11px;font-weight:700;color:#34d399}
.mf-verified-dot{width:6px;height:6px;border-radius:50%;background:#34d399;animation:pulse 1.8s ease-in-out infinite}
.mf-plate{background:linear-gradient(135deg,rgba(255,255,255,0.07),rgba(255,255,255,0.04));border:2px solid rgba(255,255,255,0.13);border-radius:12px;padding:16px 0;text-align:center;margin-bottom:20px;position:relative;overflow:hidden}
.mf-plate::before{content:'الجزائر · Algérie';position:absolute;top:4px;inset-inline:0;font-family:'Cairo',sans-serif;font-size:9px;color:rgba(255,255,255,0.25);text-align:center;letter-spacing:0.06em}
.mf-plate-number{font-family:'Sora',sans-serif;font-size:30px;font-weight:800;color:#fff;letter-spacing:0.14em;text-shadow:0 0 28px rgba(255,255,255,0.25)}
.mf-plate-stripe{height:4px;margin-top:12px;background:linear-gradient(90deg,#12805c 33%,#fff 33%,#fff 66%,#ef4444 66%);opacity:0.6}
.mf-rows{display:flex;flex-direction:column;gap:0;margin-bottom:20px}
.mf-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.05)}
.mf-row:last-child{border-bottom:none}
.mf-key{font-family:'Cairo',sans-serif;font-size:11.5px;color:var(--h-muted)}
.mf-val{font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;color:rgba(255,255,255,0.88)}
.mf-docs{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:18px}
.mf-doc{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:10px;padding:11px 12px;transition:var(--h-transition)}
.mf-doc:hover{background:rgba(255,255,255,0.07)}
.mf-doc-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.mf-doc-icon{font-size:16px}
.mf-doc-name{font-family:'Cairo',sans-serif;font-size:11px;color:var(--h-muted)}
.status-chip{font-family:'Cairo',sans-serif;font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px}
.chip-valid{background:rgba(52,211,153,0.15);color:#34d399}
.chip-expired{background:rgba(248,113,113,0.15);color:#f87171}
.chip-warn{background:rgba(251,191,36,0.15);color:#fbbf24}
.mf-scan-btn{width:100%;background:linear-gradient(135deg,var(--h-gold-deep) 0%,var(--h-gold) 100%);color:var(--h-navy);border:none;border-radius:10px;padding:12px;font-family:'Cairo',sans-serif;font-size:13px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 6px 20px rgba(245,166,35,0.32);transition:var(--h-transition)}
.mf-scan-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(245,166,35,0.45)}
.scan-pulse{width:8px;height:8px;border-radius:50%;background:var(--h-navy);animation:pulse 1.5s ease-in-out infinite}
.mock-float{position:absolute;bottom:0;inset-inline-end:-16px;background:var(--h-glass);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.12);border-radius:14px;padding:12px 18px;display:flex;align-items:center;gap:10px;box-shadow:0 16px 48px rgba(0,0,0,0.4);animation:floatBounce 4s ease-in-out infinite}
@keyframes floatBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.mock-float-icon{font-size:22px}
.mock-float-main{font-family:'Cairo',sans-serif;font-size:12px;font-weight:700;color:#fff}
.mock-float-sub{font-family:'Cairo',sans-serif;font-size:10px;color:var(--h-muted);margin-top:1px}
@keyframes slideUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

/* TRUST STRIP */
.trust-strip{background:rgba(255,255,255,0.025);border-top:1px solid var(--h-border);border-bottom:1px solid var(--h-border);padding:20px 52px;display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap;position:relative;z-index:2}
.trust-item{display:flex;align-items:center;gap:10px;font-family:'Cairo',sans-serif;font-size:12.5px;color:var(--h-muted);font-weight:600}
.trust-icon{font-size:18px}
.trust-divider{width:1px;height:20px;background:var(--h-border)}

/* SECTIONS */
.vv-section{padding:108px 0}
.vv-inner{max-width:1240px;margin:0 auto;padding:0 52px}
.sec-eyebrow{font-family:'Sora',sans-serif;font-size:11px;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:var(--h-gold);margin-bottom:14px;display:block}
.sec-title{font-family:'Cairo',sans-serif;font-size:clamp(28px,3.2vw,44px);font-weight:900;color:#fff;line-height:1.22;margin-bottom:16px}
.sec-desc{font-family:'Cairo',sans-serif;font-size:16px;color:var(--h-muted);line-height:1.85;max-width:540px}

/* FEATURES */
.sec-features{background:rgba(255,255,255,0.018)}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px}
.feat-card{background:var(--h-card-bg);border:1px solid var(--h-border);border-radius:var(--h-radius);padding:32px 28px;position:relative;overflow:hidden;transition:var(--h-transition)}
.feat-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(26,86,219,0.05) 0%,transparent 55%);opacity:0;transition:var(--h-transition);pointer-events:none}
.feat-card:hover{transform:translateY(-6px);border-color:rgba(26,86,219,0.4)}
.feat-card:hover::after{opacity:1}
.feat-icon{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:22px;transition:var(--h-transition)}
.fi-blue{background:rgba(26,86,219,0.18)}.fi-green{background:rgba(16,185,129,0.18)}.fi-gold{background:rgba(245,166,35,0.18)}.fi-red{background:rgba(239,68,68,0.18)}.fi-teal{background:rgba(20,184,166,0.18)}.fi-purple{background:rgba(139,92,246,0.18)}
.feat-title{font-family:'Cairo',sans-serif;font-size:17px;font-weight:800;color:#fff;margin-bottom:10px}
.feat-desc{font-family:'Cairo',sans-serif;font-size:13.5px;color:var(--h-muted);line-height:1.78}

/* ROLES */
.roles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px}
.role-card{border-radius:22px;padding:42px 34px;position:relative;overflow:hidden;transition:var(--h-transition);cursor:default}
.role-card::before{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,0.04);pointer-events:none}
.role-card::after{content:'';position:absolute;bottom:-40px;left:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,0.03);pointer-events:none}
.role-card:hover{transform:translateY(-8px)}
.rc-owner{background:linear-gradient(145deg,#0b1e40 0%,#1a3870 100%);box-shadow:0 20px 60px rgba(15,33,64,0.6)}
.rc-driver{background:linear-gradient(145deg,#062f21 0%,#0d6e52 100%);box-shadow:0 20px 60px rgba(6,47,33,0.6)}
.rc-officer{background:linear-gradient(145deg,#3d1c08 0%,#b55f10 100%);box-shadow:0 20px 60px rgba(61,28,8,0.6)}
.role-emoji-wrap{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:30px;background:rgba(255,255,255,0.1);margin-bottom:22px;position:relative;z-index:1}
.role-name{font-family:'Cairo',sans-serif;font-size:22px;font-weight:900;color:#fff;margin-bottom:12px;position:relative;z-index:1}
.role-about{font-family:'Cairo',sans-serif;font-size:14px;color:rgba(255,255,255,0.65);line-height:1.78;margin-bottom:26px;position:relative;z-index:1}
.role-list{list-style:none;display:flex;flex-direction:column;gap:9px;position:relative;z-index:1}
.role-list li{display:flex;align-items:center;gap:10px;font-family:'Cairo',sans-serif;font-size:13px;color:rgba(255,255,255,0.82)}
.role-list li::before{content:'';width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.4);flex-shrink:0}
.role-cta-link{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;color:rgba(255,255,255,0.7);text-decoration:none;transition:var(--h-transition);position:relative;z-index:1}
.role-cta-link:hover{color:#fff;gap:12px}

/* HOW IT WORKS */
.sec-how{background:rgba(255,255,255,0.018)}
.steps-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:70px;position:relative}
.steps-timeline::before{content:'';position:absolute;top:44px;inset-inline-start:calc(12.5% + 22px);inset-inline-end:calc(12.5% + 22px);height:2px;background:linear-gradient(90deg,var(--h-blue) 0%,rgba(26,86,219,0.2) 100%);z-index:0}
[dir="rtl"] .steps-timeline::before{background:linear-gradient(270deg,var(--h-blue) 0%,rgba(26,86,219,0.2) 100%)}
.step-item{text-align:center;padding:0 16px;position:relative;z-index:1}
.step-num-wrap{width:88px;height:88px;border-radius:50%;background:var(--h-navy);border:2px solid rgba(26,86,219,0.4);display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 24px;box-shadow:0 0 0 6px rgba(26,86,219,0.08);transition:var(--h-transition);cursor:default}
.step-num-wrap:hover{border-color:var(--h-blue);box-shadow:0 0 0 8px rgba(26,86,219,0.14),0 0 28px var(--h-blue-glow);transform:scale(1.06)}
.step-num-icon{font-size:26px}
.step-num-n{font-family:'Sora',sans-serif;font-size:11px;font-weight:800;color:var(--h-blue);margin-top:2px}
.step-label{font-family:'Cairo',sans-serif;font-size:15px;font-weight:800;color:#fff;margin-bottom:8px}
.step-detail{font-family:'Cairo',sans-serif;font-size:13px;color:var(--h-muted);line-height:1.65}

/* NUMBERS */
.vv-numbers{background:linear-gradient(145deg,var(--h-navy-mid),#112060);border-top:1px solid var(--h-border);border-bottom:1px solid var(--h-border)}
.numbers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.num-item{padding:60px 32px;text-align:center;border-inline-end:1px solid var(--h-border);position:relative}
.num-item:last-child{border-inline-end:none}
.num-value{font-family:'Sora',sans-serif;font-size:48px;font-weight:800;color:#fff;line-height:1;margin-bottom:8px}
.num-value .num-suffix{color:var(--h-gold);font-size:36px}
.num-label{font-family:'Cairo',sans-serif;font-size:13px;color:var(--h-muted)}
.num-icon{font-size:28px;margin-bottom:14px;opacity:0.7}

/* CTA */
.vv-cta{background:var(--h-navy);position:relative;overflow:hidden;padding:120px 0}
.vv-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(26,86,219,0.16) 0%,transparent 65%),linear-gradient(180deg,rgba(245,166,35,0.05) 0%,transparent 40%)}
.cta-inner{position:relative;z-index:1;text-align:center;max-width:680px;margin:0 auto;padding:0 52px}
.cta-pre{font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;color:var(--h-gold);margin-bottom:18px;letter-spacing:0.06em}
.cta-headline{font-family:'Cairo',sans-serif;font-size:clamp(30px,4vw,52px);font-weight:900;color:#fff;line-height:1.2;margin-bottom:18px}
.cta-sub{font-family:'Cairo',sans-serif;font-size:16px;color:var(--h-muted);line-height:1.8;margin-bottom:44px}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-gold-hero{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--h-gold-deep) 0%,var(--h-gold) 100%);color:var(--h-navy);padding:15px 36px;border-radius:10px;font-family:'Cairo',sans-serif;font-size:15px;font-weight:800;text-decoration:none;transition:var(--h-transition);box-shadow:0 8px 28px var(--h-gold-glow)}
.btn-gold-hero:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(245,166,35,0.38);color:var(--h-navy)}

/* FOOTER */
.vv-footer{background:rgba(6,12,22,0.96);border-top:1px solid var(--h-border)}
.footer-top{max-width:1240px;margin:0 auto;padding:56px 52px 40px;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px}
.footer-logo{display:flex;align-items:center;gap:12px;margin-bottom:16px;text-decoration:none}
.footer-tagline{font-family:'Cairo',sans-serif;font-size:13.5px;color:var(--h-muted);line-height:1.75;max-width:300px;margin-bottom:22px}
.footer-social{display:flex;gap:10px}
.social-btn{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,0.07);border:1px solid var(--h-border);display:flex;align-items:center;justify-content:center;font-size:15px;text-decoration:none;color:var(--h-muted);transition:var(--h-transition)}
.social-btn:hover{background:var(--h-blue);border-color:var(--h-blue);color:#fff}
.footer-col-title{font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;color:rgba(255,255,255,0.7);margin-bottom:18px;text-transform:uppercase;letter-spacing:0.08em}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-links a{font-family:'Cairo',sans-serif;font-size:13.5px;color:var(--h-muted);text-decoration:none;transition:var(--h-transition)}
.footer-links a:hover{color:#fff}
.footer-bottom{border-top:1px solid var(--h-border);padding:20px 52px;max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.footer-copy{font-family:'Cairo',sans-serif;font-size:12px;color:var(--h-muted)}
.footer-dz-badge{display:flex;align-items:center;gap:7px;font-family:'Cairo',sans-serif;font-size:12px;color:var(--h-muted)}

/* REVEAL */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 0.6s ease,transform 0.6s ease}
[data-reveal].revealed{opacity:1;transform:translateY(0)}

/* RESPONSIVE */
@media(max-width:1024px){
  .hero-body{flex-direction:column;gap:48px;padding:48px 28px;text-align:center}
  .hero-left,.hero-right{width:100%}
  .hero-sub{max-width:100%;margin-inline:auto}
  .hero-cta{justify-content:center}
  .hero-stats{justify-content:center}
  .hstat{flex:0 0 auto;padding:0 24px}
  .mock-float{inset-inline-end:0}
  .features-grid,.roles-grid{grid-template-columns:1fr 1fr}
  .steps-timeline{grid-template-columns:1fr 1fr;gap:40px}
  .steps-timeline::before{display:none}
  .numbers-grid{grid-template-columns:1fr 1fr}
  .num-item{border-inline-end:none;border-bottom:1px solid var(--h-border)}
  .footer-top{grid-template-columns:1fr;gap:32px}
  .vv-nav{padding:0 24px}
  .vv-inner{padding:0 28px}
  .trust-strip{padding:18px 28px;gap:24px}
}
@media(max-width:640px){
  .features-grid,.roles-grid,.steps-timeline{grid-template-columns:1fr}
  .numbers-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .hero-stats{flex-direction:column;gap:20px;align-items:center}
  .hstat{border-inline-end:none;padding:0}
  .trust-strip{gap:16px}
  .trust-divider{display:none}
  .footer-bottom{flex-direction:column;text-align:center}
}
</style>
</head>
<body>

<!-- ══════════════ NAV ══════════════ -->
<nav class="vv-nav" id="vvNav">
  <a class="nav-logo" href="<?= BASE_URL ?>/home.php">
    <div class="logo-emblem">
      <svg width="26" height="26" viewBox="0 0 26 26" fill="none">
        <path d="M13 2L4 6V13C4 18 8.2 22.5 13 24C17.8 22.5 22 18 22 13V6L13 2Z" fill="rgba(255,255,255,0.15)" stroke="rgba(255,255,255,0.4)" stroke-width="1.5"/>
        <path d="M9 13L11.5 15.5L17 10" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
    <div>
      <span class="logo-name">Vehicle<em>Verify</em> <span style="font-size:11px;font-weight:600;color:rgba(255,255,255,0.5)">DZ</span></span>
      <span class="logo-tagline"><?= t('home_logo_tagline') ?></span>
    </div>
  </a>

  <div class="nav-links">
    <a href="#features"><?= t('home_nav_features') ?></a>
    <a href="#roles"><?= t('home_nav_roles') ?></a>
    <a href="#how"><?= t('home_nav_how') ?></a>
    <a href="#numbers"><?= t('home_nav_numbers') ?></a>
    <a href="<?= BASE_URL ?>/index.php?tab=login" class="nav-cta-btn">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
      <?= t('login') ?>
    </a>
  </div>

  <div class="nav-controls">
    <div class="lang-pill">
      <?php foreach(['ar','en','fr'] as $l): ?>
      <a href="<?= BASE_URL ?>/lang.php?set=<?= $l ?>&back=<?= urlencode($_SERVER['REQUEST_URI']) ?>"
         class="<?= lang()===$l?'active':'' ?>">
        <?= $l==='ar'?'ع':strtoupper($l) ?>
      </a>
      <?php endforeach; ?>
    </div>
    <?php $thm=theme(); ?>
    <a href="<?= BASE_URL ?>/theme.php?set=<?= $thm==='dark'?'light':'dark' ?>&back=<?= urlencode($_SERVER['REQUEST_URI']) ?>"
       class="theme-toggle"><?= $thm==='dark'?'☀️':'🌙' ?></a>
  </div>
</nav>

<!-- ══════════════ HERO ══════════════ -->
<section class="vv-hero">
  <canvas id="particles"></canvas>
  <div class="hero-mesh"></div>
  <div class="hero-grid"></div>
  <div class="hero-glow glow-a"></div>
  <div class="hero-glow glow-b"></div>
  <div class="hero-glow glow-c"></div>

  <div class="hero-body">
    <div class="hero-left">
      <div class="official-badge">
        <span class="badge-dot"></span>
        <span class="badge-text"><?= t('home_official_badge') ?></span>
        <span class="badge-flag">🇩🇿</span>
      </div>

      <h1 class="hero-headline">
        <?= t('home_headline1') ?><br>
        <span class="hl-gold"><?= t('home_headline2') ?></span>
        <span class="hl-line2"><?= t('home_headline3') ?></span>
      </h1>

      <p class="hero-sub">
        <?= t('home_sub') ?>
      </p>

      <div class="hero-cta">
        <a href="<?= BASE_URL ?>/index.php?tab=register" class="btn-primary-hero">
          <?= t('home_start_free') ?>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
        </a>
        <a href="<?= BASE_URL ?>/index.php?tab=login" class="btn-ghost-hero"><?= t('home_login_btn') ?></a>
      </div>

      <div class="hero-stats">
        <div class="hstat">
          <div class="hstat-num"><span class="count-num" data-target="3">0</span></div>
          <div class="hstat-label"><?= t('home_stat_roles') ?></div>
        </div>
        <div class="hstat">
          <div class="hstat-num"><span class="count-num" data-target="4">0</span></div>
          <div class="hstat-label"><?= t('home_stat_docs') ?></div>
        </div>
        <div class="hstat">
          <div class="hstat-num">QR</div>
          <div class="hstat-label"><?= t('home_stat_verify') ?></div>
        </div>
        <div class="hstat">
          <div class="hstat-num"><span class="count-num" data-target="3">0</span>x</div>
          <div class="hstat-label"><?= t('home_stat_langs') ?></div>
        </div>
      </div>
    </div>

    <div class="hero-right">
      <div class="mockup-wrap">
        <div class="mockup-frame">
          <div class="mf-topbar">
            <div class="mf-topbar-brand">
              <div class="mf-icon">🛡️</div>
              <div>
                <div class="mf-title">VehicleVerify DZ</div>
                <div class="mf-sub"><?= t('home_verify_result') ?></div>
              </div>
            </div>
            <div class="mf-verified">
              <span class="mf-verified-dot"></span>
              <?= t('home_verified') ?>
            </div>
          </div>

          <div class="mf-plate">
            <div class="mf-plate-number">123456 · 26 · 16</div>
            <div class="mf-plate-stripe"></div>
          </div>

          <div class="mf-rows">
            <div class="mf-row"><span class="mf-key"><?= t('home_mock_owner') ?></span><span class="mf-val">Ahmed Ben Ali</span></div>
            <div class="mf-row"><span class="mf-key"><?= t('home_mock_vehicle') ?></span><span class="mf-val">Toyota Corolla 2022</span></div>
            <div class="mf-row"><span class="mf-key"><?= t('home_mock_fuel') ?></span><span class="mf-val"><?= t('home_mock_fuel_val') ?></span></div>
            <div class="mf-row"><span class="mf-key"><?= t('home_mock_driver') ?></span><span class="mf-val">Mohammed Saidi</span></div>
          </div>

          <div class="mf-docs">
            <div class="mf-doc">
              <div class="mf-doc-row"><span class="mf-doc-icon">📄</span><span class="status-chip chip-valid"><?= t('home_chip_valid') ?></span></div>
              <div class="mf-doc-name"><?= t('home_mock_insurance') ?></div>
            </div>
            <div class="mf-doc">
              <div class="mf-doc-row"><span class="mf-doc-icon">🪪</span><span class="status-chip chip-valid"><?= t('home_chip_valid') ?></span></div>
              <div class="mf-doc-name"><?= t('home_mock_graycard') ?></div>
            </div>
            <div class="mf-doc">
              <div class="mf-doc-row"><span class="mf-doc-icon">🔧</span><span class="status-chip chip-expired"><?= t('home_chip_expired') ?></span></div>
              <div class="mf-doc-name"><?= t('home_mock_technical') ?></div>
            </div>
            <div class="mf-doc">
              <div class="mf-doc-row"><span class="mf-doc-icon">📋</span><span class="status-chip chip-warn"><?= t('home_chip_warn') ?></span></div>
              <div class="mf-doc-name"><?= t('home_mock_license_doc') ?></div>
            </div>
          </div>

          <button class="mf-scan-btn">
            <span class="scan-pulse"></span>
            <?= t('home_mock_scan') ?>
          </button>
        </div>

        <div class="mock-float">
          <span class="mock-float-icon">📡</span>
          <div>
            <div class="mock-float-main"><?= t('home_mock_complete') ?></div>
            <div class="mock-float-sub"><?= t('home_mock_time') ?></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ══════════════ TRUST STRIP ══════════════ -->
<div class="trust-strip">
  <div class="trust-item"><span class="trust-icon">🔒</span> <?= t('home_trust1') ?></div>
  <div class="trust-divider"></div>
  <div class="trust-item"><span class="trust-icon">📡</span> <?= t('home_trust2') ?></div>
  <div class="trust-divider"></div>
  <div class="trust-item"><span class="trust-icon">🇩🇿</span> <?= t('home_trust3') ?></div>
  <div class="trust-divider"></div>
  <div class="trust-item"><span class="trust-icon">🌙</span> <?= t('home_trust4') ?></div>
  <div class="trust-divider"></div>
  <div class="trust-item"><span class="trust-icon">⚡</span> <?= t('home_trust5') ?></div>
</div>

<!-- ══════════════ FEATURES ══════════════ -->
<section class="vv-section sec-features" id="features">
  <div class="vv-inner">
    <span class="sec-eyebrow" data-reveal><?= t('home_feat_eyebrow') ?></span>
    <h2 class="sec-title" data-reveal><?= t('home_feat_title') ?></h2>
    <p class="sec-desc" data-reveal><?= t('home_feat_desc') ?></p>
    <div class="features-grid">
      <div class="feat-card" data-reveal>
        <div class="feat-icon fi-blue">📱</div>
        <h3 class="feat-title"><?= t('home_feat1_title') ?></h3>
        <p class="feat-desc"><?= t('home_feat1_desc') ?></p>
      </div>
      <div class="feat-card" data-reveal>
        <div class="feat-icon fi-green">📄</div>
        <h3 class="feat-title"><?= t('home_feat2_title') ?></h3>
        <p class="feat-desc"><?= t('home_feat2_desc') ?></p>
      </div>
      <div class="feat-card" data-reveal>
        <div class="feat-icon fi-gold">⚠️</div>
        <h3 class="feat-title"><?= t('home_feat3_title') ?></h3>
        <p class="feat-desc"><?= t('home_feat3_desc') ?></p>
      </div>
      <div class="feat-card" data-reveal>
        <div class="feat-icon fi-teal">🔍</div>
        <h3 class="feat-title"><?= t('home_feat4_title') ?></h3>
        <p class="feat-desc"><?= t('home_feat4_desc') ?></p>
      </div>
      <div class="feat-card" data-reveal>
        <div class="feat-icon fi-purple">👥</div>
        <h3 class="feat-title"><?= t('home_feat5_title') ?></h3>
        <p class="feat-desc"><?= t('home_feat5_desc') ?></p>
      </div>
      <div class="feat-card" data-reveal>
        <div class="feat-icon fi-red">📋</div>
        <h3 class="feat-title"><?= t('home_feat6_title') ?></h3>
        <p class="feat-desc"><?= t('home_feat6_desc') ?></p>
      </div>
    </div>
  </div>
</section>

<!-- ══════════════ ROLES ══════════════ -->
<section class="vv-section" id="roles">
  <div class="vv-inner">
    <span class="sec-eyebrow" data-reveal><?= t('home_roles_eyebrow') ?></span>
    <h2 class="sec-title" data-reveal><?= t('home_roles_title') ?></h2>
    <p class="sec-desc" data-reveal><?= t('home_roles_desc') ?></p>
    <div class="roles-grid">
      <div class="role-card rc-owner" data-reveal>
        <div class="role-emoji-wrap">👤</div>
        <h3 class="role-name"><?= t('home_owner_name') ?></h3>
        <p class="role-about"><?= t('home_owner_about') ?></p>
        <ul class="role-list">
          <li><?= t('home_owner_li1') ?></li>
          <li><?= t('home_owner_li2') ?></li>
          <li><?= t('home_owner_li3') ?></li>
          <li><?= t('home_owner_li4') ?></li>
          <li><?= t('home_owner_li5') ?></li>
        </ul>
        <a href="<?= BASE_URL ?>/index.php?tab=register" class="role-cta-link"><?= t('home_owner_cta') ?></a>
      </div>
      <div class="role-card rc-driver" data-reveal>
        <div class="role-emoji-wrap">🚗</div>
        <h3 class="role-name"><?= t('home_driver_name') ?></h3>
        <p class="role-about"><?= t('home_driver_about') ?></p>
        <ul class="role-list">
          <li><?= t('home_driver_li1') ?></li>
          <li><?= t('home_driver_li2') ?></li>
          <li><?= t('home_driver_li3') ?></li>
          <li><?= t('home_driver_li4') ?></li>
          <li><?= t('home_driver_li5') ?></li>
        </ul>
        <a href="<?= BASE_URL ?>/index.php?tab=register" class="role-cta-link"><?= t('home_driver_cta') ?></a>
      </div>
      <div class="role-card rc-officer" data-reveal>
        <div class="role-emoji-wrap">👮</div>
        <h3 class="role-name"><?= t('home_officer_name') ?></h3>
        <p class="role-about"><?= t('home_officer_about') ?></p>
        <ul class="role-list">
          <li><?= t('home_officer_li1') ?></li>
          <li><?= t('home_officer_li2') ?></li>
          <li><?= t('home_officer_li3') ?></li>
          <li><?= t('home_officer_li4') ?></li>
          <li><?= t('home_officer_li5') ?></li>
        </ul>
        <a href="<?= BASE_URL ?>/index.php?tab=login" class="role-cta-link"><?= t('home_officer_cta') ?></a>
      </div>
    </div>
  </div>
</section>

<!-- ══════════════ HOW IT WORKS ══════════════ -->
<section class="vv-section sec-how" id="how">
  <div class="vv-inner">
    <span class="sec-eyebrow" data-reveal><?= t('home_how_eyebrow') ?></span>
    <h2 class="sec-title" data-reveal><?= t('home_how_title') ?></h2>
    <p class="sec-desc" data-reveal><?= t('home_how_desc') ?></p>
    <div class="steps-timeline">
      <div class="step-item" data-reveal>
        <div class="step-num-wrap"><span class="step-num-icon">👤</span><span class="step-num-n">01</span></div>
        <h4 class="step-label"><?= t('home_step1_label') ?></h4>
        <p class="step-detail"><?= t('home_step1_detail') ?></p>
      </div>
      <div class="step-item" data-reveal>
        <div class="step-num-wrap"><span class="step-num-icon">🚗</span><span class="step-num-n">02</span></div>
        <h4 class="step-label"><?= t('home_step2_label') ?></h4>
        <p class="step-detail"><?= t('home_step2_detail') ?></p>
      </div>
      <div class="step-item" data-reveal>
        <div class="step-num-wrap"><span class="step-num-icon">📱</span><span class="step-num-n">03</span></div>
        <h4 class="step-label"><?= t('home_step3_label') ?></h4>
        <p class="step-detail"><?= t('home_step3_detail') ?></p>
      </div>
      <div class="step-item" data-reveal>
        <div class="step-num-wrap"><span class="step-num-icon">✅</span><span class="step-num-n">04</span></div>
        <h4 class="step-label"><?= t('home_step4_label') ?></h4>
        <p class="step-detail"><?= t('home_step4_detail') ?></p>
      </div>
    </div>
  </div>
</section>

<!-- ══════════════ NUMBERS ══════════════ -->
<section class="vv-numbers" id="numbers">
  <div style="max-width:1240px;margin:0 auto">
    <div class="numbers-grid">
      <div class="num-item" data-reveal>
        <div class="num-icon">🚗</div>
        <div class="num-value"><span class="count-num" data-target="3">0</span><span class="num-suffix">+</span></div>
        <div class="num-label"><?= t('home_num_roles') ?></div>
      </div>
      <div class="num-item" data-reveal>
        <div class="num-icon">📄</div>
        <div class="num-value"><span class="count-num" data-target="4">0</span><span class="num-suffix">+</span></div>
        <div class="num-label"><?= t('home_num_docs') ?></div>
      </div>
      <div class="num-item" data-reveal>
        <div class="num-icon">🌍</div>
        <div class="num-value"><span class="count-num" data-target="3">0</span><span class="num-suffix">x</span></div>
        <div class="num-label"><?= t('home_num_langs') ?></div>
      </div>
      <div class="num-item" data-reveal>
        <div class="num-icon">⚡</div>
        <div class="num-value">&lt;<span class="count-num" data-target="1">0</span><span class="num-suffix">s</span></div>
        <div class="num-label"><?= t('home_num_speed') ?></div>
      </div>
    </div>
  </div>
</section>

<!-- ══════════════ CTA ══════════════ -->
<section class="vv-cta">
  <div class="cta-inner" data-reveal>
    <div class="cta-pre"><?= t('home_cta_pre') ?></div>
    <h2 class="cta-headline"><?= t('home_cta_headline') ?></h2>
    <p class="cta-sub"><?= t('home_cta_sub') ?></p>
    <div class="cta-btns">
      <a href="<?= BASE_URL ?>/index.php?tab=register" class="btn-gold-hero"><?= t('home_cta_register') ?></a>
      <a href="<?= BASE_URL ?>/index.php?tab=login" class="btn-ghost-hero"><?= t('home_login_btn') ?></a>
    </div>
  </div>
</section>

<!-- ══════════════ FOOTER ══════════════ -->
<footer class="vv-footer">
  <div class="footer-top">
    <div>
      <a class="footer-logo" href="<?= BASE_URL ?>/home.php">
        <div class="logo-emblem" style="width:36px;height:36px;border-radius:10px">
          <svg width="20" height="20" viewBox="0 0 26 26" fill="none">
            <path d="M13 2L4 6V13C4 18 8.2 22.5 13 24C17.8 22.5 22 18 22 13V6L13 2Z" fill="rgba(255,255,255,0.15)" stroke="rgba(255,255,255,0.4)" stroke-width="1.5"/>
            <path d="M9 13L11.5 15.5L17 10" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="logo-name" style="font-size:14px">Vehicle<em>Verify</em> <span style="font-size:10px;font-weight:600;color:rgba(255,255,255,0.4)">DZ</span></span>
      </a>
      <p class="footer-tagline"><?= t('home_footer_tagline') ?></p>
      <div class="footer-social">
        <a href="#" class="social-btn">📘</a>
        <a href="#" class="social-btn">🐦</a>
        <a href="#" class="social-btn">📸</a>
      </div>
    </div>
    <div>
      <div class="footer-col-title"><?= t('home_footer_roles') ?></div>
      <ul class="footer-links">
        <li><a href="<?= BASE_URL ?>/index.php?tab=register"><?= t('home_owner_name') ?></a></li>
        <li><a href="<?= BASE_URL ?>/index.php?tab=register"><?= t('home_driver_name') ?></a></li>
        <li><a href="<?= BASE_URL ?>/index.php?tab=login"><?= t('home_officer_name') ?></a></li>
      </ul>
    </div>
    <div>
      <div class="footer-col-title"><?= t('home_footer_platform') ?></div>
      <ul class="footer-links">
        <li><a href="#features"><?= t('home_nav_features') ?></a></li>
        <li><a href="#how"><?= t('home_nav_how') ?></a></li>
        <li><a href="<?= BASE_URL ?>/verify.php"><?= t('home_footer_verify') ?></a></li>
        <li><a href="<?= BASE_URL ?>/index.php?tab=login"><?= t('login') ?></a></li>
      </ul>
    </div>
  </div>
  <div class="footer-bottom">
    <div class="footer-copy">© <?= date('Y') ?> VehicleVerify DZ — <?= t('home_footer_rights') ?></div>
    <div class="footer-dz-badge"><span>🇩🇿</span><span><?= t('home_footer_made_dz') ?></span></div>
  </div>
</footer>

<script>
// Nav scroll
const nav=document.getElementById('vvNav');
window.addEventListener('scroll',()=>nav.classList.toggle('solid',window.scrollY>30),{passive:true});

// Smooth scroll
document.querySelectorAll('a[href^="#"]').forEach(a=>{
  a.addEventListener('click',e=>{
    const t=document.querySelector(a.getAttribute('href'));
    if(t){e.preventDefault();t.scrollIntoView({behavior:'smooth',block:'start'})}
  });
});

// Reveal
const rObs=new IntersectionObserver((entries)=>{
  entries.forEach(entry=>{
    if(entry.isIntersecting){
      const el=entry.target;
      const par=el.closest('.features-grid,.roles-grid,.steps-timeline,.numbers-grid');
      const delay=par?Array.from(par.children).indexOf(el)*90:0;
      setTimeout(()=>el.classList.add('revealed'),delay);
      rObs.unobserve(el);
    }
  });
},{threshold:0.1,rootMargin:'0px 0px -40px 0px'});
document.querySelectorAll('[data-reveal]').forEach(el=>rObs.observe(el));

// Counter
function animCount(el,target,dur=1400){
  let start=0;
  const step=ts=>{
    if(!start)start=ts;
    const p=Math.min((ts-start)/dur,1);
    const e=1-Math.pow(1-p,3);
    el.textContent=Math.round(e*target);
    if(p<1)requestAnimationFrame(step);
  };
  requestAnimationFrame(step);
}
const cObs=new IntersectionObserver((entries)=>{
  entries.forEach(entry=>{
    if(entry.isIntersecting){
      animCount(entry.target,parseInt(entry.target.dataset.target));
      cObs.unobserve(entry.target);
    }
  });
},{threshold:0.5});
document.querySelectorAll('.count-num[data-target]').forEach(el=>cObs.observe(el));

// Particle canvas
(function(){
  const canvas=document.getElementById('particles');
  if(!canvas)return;
  const ctx=canvas.getContext('2d');
  let W,H,particles=[];
  function resize(){W=canvas.width=canvas.offsetWidth;H=canvas.height=canvas.offsetHeight}
  class P{
    constructor(){this.reset()}
    reset(){this.x=Math.random()*W;this.y=Math.random()*H;this.r=Math.random()*1.4+0.3;this.vx=(Math.random()-0.5)*0.3;this.vy=(Math.random()-0.5)*0.3;this.o=Math.random()*0.4+0.08}
    update(){this.x+=this.vx;this.y+=this.vy;if(this.x<0||this.x>W||this.y<0||this.y>H)this.reset()}
    draw(){ctx.beginPath();ctx.arc(this.x,this.y,this.r,0,Math.PI*2);ctx.fillStyle=`rgba(255,255,255,${this.o})`;ctx.fill()}
  }
  function drawLines(){
    for(let i=0;i<particles.length;i++)for(let j=i+1;j<particles.length;j++){
      const dx=particles[i].x-particles[j].x,dy=particles[i].y-particles[j].y,d=Math.sqrt(dx*dx+dy*dy);
      if(d<90){ctx.beginPath();ctx.strokeStyle=`rgba(26,86,219,${0.12*(1-d/90)})`;ctx.lineWidth=0.6;ctx.moveTo(particles[i].x,particles[i].y);ctx.lineTo(particles[j].x,particles[j].y);ctx.stroke()}
    }
  }
  function loop(){ctx.clearRect(0,0,W,H);drawLines();particles.forEach(p=>{p.update();p.draw()});requestAnimationFrame(loop)}
  resize();
  particles=Array.from({length:80},()=>new P());
  window.addEventListener('resize',resize,{passive:true});
  loop();
})();
</script>
</body>
</html>
