<?php
$year = date("Y");
$mail_user = "bojory111";
$mail_domain = "gmail.com";
$mail = $mail_user . "@" . $mail_domain;
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مطوّر ومختص أمن سيبراني وحوسبة سحابية</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@600;700;800;900&family=Tajawal:wght@300;400;500;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root{
  --void:#050810;
  --panel:#0C111F;
  --panel-glass:rgba(16,22,38,.55);
  --line:rgba(255,255,255,.09);
  --line-bright:rgba(255,255,255,.2);
  --text-1:#F3F6FC;
  --text-2:#95A1B8;
  --text-3:#5A6479;
  --cyan:#00E8FF;
  --violet:#8B5CF6;
  --pink:#FF3D81;
  --grad:linear-gradient(115deg,var(--cyan),var(--violet) 55%,var(--pink));
  --radius:18px;
  --display:'Cairo',sans-serif;
  --body:'Tajawal',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--void);color:var(--text-1);
  font-family:var(--body);overflow-x:hidden;
  cursor:none;
}
body.touch{cursor:auto;}
::selection{background:var(--cyan);color:#02121A;}
a{color:inherit;}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}

/* cursor + progress */
.cursor-glow{
  position:fixed;top:0;left:0;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,232,255,.10),rgba(139,92,246,.06) 45%,transparent 70%);
  pointer-events:none;z-index:9999;transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-dot{
  position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;
  background:var(--cyan);pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);box-shadow:0 0 12px var(--cyan);
}
.progress{
  position:fixed;top:0;right:0;left:0;height:3px;z-index:9998;
  background:var(--grad);transform-origin:right;transform:scaleX(0);
}

/* topbar */
.topbar{
  position:fixed;top:0;right:0;left:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;
  background:linear-gradient(to bottom,rgba(5,8,16,.85),rgba(5,8,16,0));
  backdrop-filter:blur(10px);
}
.brand{display:flex;align-items:center;gap:10px;}
.brand svg{width:32px;height:32px;}
.brand-name{font-family:var(--mono);font-size:13.5px;color:var(--text-2);}
.brand-name b{color:var(--cyan);font-weight:500;}
.nav-links{display:flex;gap:30px;font-family:var(--mono);font-size:13px;color:var(--text-2);}
.nav-links a{text-decoration:none;position:relative;transition:.25s;}
.nav-links a:hover{color:var(--text-1);}
.nav-links a::after{
  content:'';position:absolute;right:0;bottom:-6px;width:0;height:1px;background:var(--grad);transition:.3s;
}
.nav-links a:hover::after{width:100%;}
.topbar .cta{
  font-family:var(--mono);font-size:12.5px;color:var(--text-1);
  border:1px solid var(--line-bright);border-radius:9px;padding:9px 16px;text-decoration:none;
  transition:.25s;background:var(--panel-glass);backdrop-filter:blur(6px);
}
.topbar .cta:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 18px rgba(0,232,255,.25);}
@media(max-width:800px){.nav-links{display:none;}}

/* hero */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:90px;border-bottom:1px solid var(--line);overflow:hidden;
}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.55;}
.hero-inner{position:relative;z-index:2;text-align:center;width:100%;}
.eyebrow{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;color:var(--cyan);
  display:inline-flex;align-items:center;gap:10px;margin-bottom:24px;
  border:1px solid var(--line-bright);padding:7px 16px;border-radius:30px;background:var(--panel-glass);
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);animation:blink 1.8s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.2;}}

h1{
  font-family:var(--display);font-weight:900;
  font-size:clamp(38px,7vw,84px);line-height:1.15;margin-bottom:26px;
  letter-spacing:-.02em;
}
h1 .grad{
  background:var(--grad);background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shine 6s linear infinite;
}
@keyframes shine{to{background-position:220% center;}}

.hero-desc{
  color:var(--text-2);font-size:18px;line-height:2;max-width:620px;margin:0 auto 40px;
}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:56px;}
.btn-primary{
  font-family:var(--body);font-weight:700;font-size:15.5px;
  background:var(--grad);color:#04070D;padding:16px 30px;border-radius:12px;text-decoration:none;
  display:inline-flex;align-items:center;gap:10px;position:relative;isolation:isolate;
  transition:transform .25s;
}
.btn-primary:hover{transform:translateY(-3px);}
.btn-ghost{
  font-family:var(--body);font-weight:600;font-size:15.5px;color:var(--text-1);
  border:1px solid var(--line-bright);padding:16px 28px;border-radius:12px;text-decoration:none;
  background:var(--panel-glass);backdrop-filter:blur(6px);transition:.25s;
}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);}

.terminal{
  max-width:520px;margin:0 auto;text-align:right;
  background:var(--panel-glass);border:1px solid var(--line);border-radius:12px;
  padding:18px 20px;font-family:var(--mono);font-size:13px;color:var(--text-2);
  backdrop-filter:blur(8px);
}
.terminal .bar{display:flex;gap:6px;margin-bottom:12px;}
.terminal .bar span{width:9px;height:9px;border-radius:50%;background:var(--line-bright);}
.terminal .line{direction:ltr;text-align:left;color:var(--cyan);white-space:pre;}
.terminal .caret{display:inline-block;width:7px;height:14px;background:var(--cyan);margin-inline-start:2px;animation:blink 1s infinite;vertical-align:middle;}

/* sections general */
section{padding:110px 0;position:relative;}
.tag{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;color:var(--cyan);
  display:flex;align-items:center;gap:10px;margin-bottom:18px;
}
.tag::before{content:'';width:24px;height:1px;background:var(--grad);}
h2.section-title{
  font-family:var(--display);font-weight:800;font-size:clamp(28px,3.8vw,44px);margin-bottom:14px;
}
.section-sub{color:var(--text-2);font-size:16.5px;max-width:600px;margin-bottom:64px;line-height:1.9;}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* services */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.service-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 28px;transition:.35s;position:relative;overflow:hidden;
}
.service-card:hover{transform:translateY(-8px);border-color:var(--line-bright);}
.service-card .glow{
  position:absolute;inset:-2px;border-radius:var(--radius);padding:1px;background:var(--grad);
  opacity:0;transition:.35s;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.service-card:hover .glow{opacity:1;}
.service-index{font-family:var(--mono);font-size:12px;color:var(--cyan);margin-bottom:22px;}
.service-card svg{width:32px;height:32px;margin-bottom:20px;color:var(--cyan);}
.service-card h3{font-family:var(--display);font-weight:700;font-size:20px;margin-bottom:12px;}
.service-card p{color:var(--text-2);font-size:14.5px;line-height:1.9;margin-bottom:20px;}
.service-tags{display:flex;flex-wrap:wrap;gap:8px;}
.service-tags span{font-family:var(--mono);font-size:11px;color:var(--text-2);border:1px solid var(--line);padding:4px 9px;border-radius:6px;}

/* marquee */
.marquee-wrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:26px 0;background:var(--panel);}
.marquee{display:flex;gap:50px;width:max-content;animation:scroll 26s linear infinite;}
.marquee span{font-family:var(--mono);font-size:16px;color:var(--text-3);white-space:nowrap;display:flex;align-items:center;gap:12px;}
.marquee span b{color:var(--cyan);font-weight:500;}
.marquee span::after{content:'/';color:var(--line-bright);margin-right:20px;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* portfolio */
.works-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.work-card{
  position:relative;border-radius:var(--radius);padding:1px;background:var(--line);
  transition:.35s;overflow:hidden;
}
.work-card::before{
  content:'';position:absolute;inset:0;border-radius:var(--radius);opacity:0;transition:.4s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(0,232,255,.35),transparent 60%);
  z-index:1;pointer-events:none;
}
.work-card:hover::before{opacity:1;}
.work-inner{
  position:relative;z-index:2;background:var(--panel);border-radius:calc(var(--radius) - 1px);
  padding:32px;height:100%;display:flex;flex-direction:column;gap:16px;
}
.work-top{display:flex;justify-content:space-between;align-items:flex-start;}
.work-num{font-family:var(--mono);font-size:12px;color:var(--text-3);}
.work-live{
  font-family:var(--mono);font-size:10.5px;color:var(--cyan);display:flex;align-items:center;gap:6px;
  border:1px solid rgba(0,232,255,.3);padding:4px 10px;border-radius:20px;background:rgba(0,232,255,.06);
}
.work-live i{width:6px;height:6px;border-radius:50%;background:var(--cyan);animation:blink 1.6s infinite;}
.work-inner h3{font-family:var(--display);font-weight:800;font-size:22px;}
.work-inner p{color:var(--text-2);font-size:14.5px;line-height:1.9;}
.work-tags{display:flex;gap:8px;flex-wrap:wrap;}
.work-tags span{font-family:var(--mono);font-size:11px;color:var(--text-2);border:1px solid var(--line);padding:4px 9px;border-radius:6px;}
.work-link{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;
  color:var(--text-1);text-decoration:none;padding-top:12px;border-top:1px solid var(--line);
  direction:ltr;justify-content:flex-end;
}
.work-link svg{width:15px;height:15px;transition:.25s;}
.work-link:hover{color:var(--cyan);}
.work-link:hover svg{transform:translate(3px,-3px);}
@media(max-width:800px){.works-grid{grid-template-columns:1fr;}}

/* certs */
.cert-source{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;color:var(--text-2);margin-bottom:34px;}
.cert-source b{color:var(--text-1);font-weight:500;}
.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.cert-card{border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;background:var(--panel);display:flex;flex-direction:column;gap:14px;transition:.3s;}
.cert-card:hover{border-color:var(--line-bright);transform:translateY(-4px);}
.cert-top{display:flex;justify-content:space-between;align-items:flex-start;}
.cert-badge{width:40px;height:40px;border-radius:50%;background:rgba(0,232,255,.08);border:1px solid rgba(0,232,255,.35);display:flex;align-items:center;justify-content:center;color:var(--cyan);}
.cert-status{font-family:var(--mono);font-size:10.5px;color:var(--cyan);background:rgba(0,232,255,.08);border:1px solid rgba(0,232,255,.3);padding:3px 9px;border-radius:5px;}
.cert-card h4{font-family:var(--display);font-weight:700;font-size:17px;}
.cert-card p{color:var(--text-3);font-size:12.5px;font-family:var(--mono);direction:ltr;text-align:right;}
@media(max-width:800px){.cert-grid{grid-template-columns:1fr;}}

/* contact */
.contact-section{border-top:1px solid var(--line);}
.contact-panel{
  position:relative;border-radius:24px;padding:64px 40px;text-align:center;overflow:hidden;
  background:var(--panel);border:1px solid var(--line-bright);
}
.contact-panel::before{
  content:'';position:absolute;width:600px;height:300px;left:50%;top:-120px;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(139,92,246,.25),transparent 70%);pointer-events:none;
}
.contact-panel h2{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.6vw,38px);margin-bottom:14px;position:relative;}
.contact-panel p{color:var(--text-2);font-size:16px;margin-bottom:38px;position:relative;}
.mail-line{
  position:relative;display:inline-flex;align-items:center;gap:16px;background:var(--void);
  border:1px solid var(--line-bright);border-radius:14px;padding:18px 24px;font-family:var(--mono);direction:ltr;
}
.mail-line span{color:var(--cyan);font-size:17px;}
.copy-btn{
  background:transparent;border:1px solid var(--line-bright);color:var(--text-1);border-radius:9px;
  padding:9px 15px;font-family:var(--mono);font-size:12px;cursor:pointer;transition:.25s;display:flex;align-items:center;gap:6px;
}
.copy-btn:hover{border-color:var(--cyan);color:var(--cyan);}
.copy-btn.copied{border-color:var(--cyan);color:var(--cyan);background:rgba(0,232,255,.08);}

footer{text-align:center;padding:40px 0 50px;font-family:var(--mono);font-size:11.5px;color:var(--text-3);}
footer b{color:var(--cyan);font-weight:500;}

@media(max-width:640px){
  .services-grid{grid-template-columns:1fr;}
  .contact-panel{padding:40px 22px;}
  .mail-line{flex-direction:column;padding:22px;}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
}
</style>
</head>
<body>

<div class="progress" id="progress"></div>
<div class="cursor-glow" id="cursorGlow"></div>
<div class="cursor-dot" id="cursorDot"></div>

<div class="topbar">
  <div class="brand">
    <svg viewBox="0 0 40 40" fill="none">
      <path d="M20 3L34 9V19C34 27.5 28 33.5 20 37C12 33.5 6 27.5 6 19V9L20 3Z" stroke="#00E8FF" stroke-width="1.6"/>
      <path d="M14 20L18 24L27 15" stroke="#00E8FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    <span class="brand-name">مطوّر<b> // </b>أمن سيبراني<b> // </b>سحابة</span>
  </div>
  <nav class="nav-links">
    <a href="#services">الخدمات</a>
    <a href="#works">الأعمال</a>
    <a href="#certs">الشهادات</a>
    <a href="#contact">تواصل</a>
  </nav>
  <a class="cta" href="mailto:<?php echo $mail; ?>">راسلني</a>
</div>

<section class="hero">
  <canvas id="net"></canvas>
  <div class="wrap hero-inner">
    <div class="eyebrow"><i class="dot"></i> SECURE · DEPLOY · BUILD</div>
    <h1>أبني الأنظمة<br>وأتـولّى <span class="grad">حمايتها بالكامل</span></h1>
    <p class="hero-desc">
      مختص في الأمن السيبراني والحوسبة السحابية وتطوير البرمجيات، أحوّل الأفكار إلى منتجات رقمية تعمل بكفاءة، تتحمّل الضغط، وتبقى محمية من أي تهديد.
    </p>
    <div class="hero-actions">
      <a class="btn-primary" href="#works">شاهد أعمالي</a>
      <a class="btn-ghost" href="#contact">تواصل معي</a>
    </div>
    <div class="terminal">
      <div class="bar"><span></span><span></span><span></span></div>
      <div class="line" id="typeLine"></div>
    </div>
  </div>
</section>

<section id="services">
  <div class="wrap reveal">
    <div class="tag">الخدمات</div>
    <h2 class="section-title">ثلاثة مجالات، خبرة واحدة متكاملة</h2>
    <p class="section-sub">من كتابة الكود إلى نشره على السحابة وتأمينه، أغطي دورة حياة المشروع التقني كاملة.</p>
    <div class="services-grid">
      <div class="service-card">
        <div class="glow"></div>
        <div class="service-index">01 / PROTECT</div>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 2L20 6V12C20 17 16.5 20.5 12 22C7.5 20.5 4 17 4 12V6L12 2Z"/><path d="M9 12L11 14L15 9"/></svg>
        <h3>الأمن السيبراني والحماية</h3>
        <p>فحص الأنظمة واكتشاف الثغرات، تصميم سياسات حماية، وتقوية البنية التقنية ضد الاختراقات والتهديدات.</p>
        <div class="service-tags"><span>Vulnerability Assessment</span><span>Hardening</span><span>Incident Response</span></div>
      </div>
      <div class="service-card">
        <div class="glow"></div>
        <div class="service-index">02 / SCALE</div>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M7 18C4.8 18 3 16.2 3 14C3 12 4.4 10.4 6.3 10.1C6.9 7.2 9.4 5 12.5 5C15.7 5 18.3 7.3 18.8 10.3C20.6 10.7 22 12.3 22 14.2C22 16.3 20.3 18 18.2 18H7Z"/></svg>
        <h3>الحوسبة السحابية</h3>
        <p>تصميم بنية سحابية مرنة وقابلة للتوسّع، إدارة الخوادم والنشر، وتحسين الأداء والتكلفة.</p>
        <div class="service-tags"><span>Cloud Architecture</span><span>Deployment</span><span>Server Management</span></div>
      </div>
      <div class="service-card">
        <div class="glow"></div>
        <div class="service-index">03 / BUILD</div>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M8 9L4 12L8 15"/><path d="M16 9L20 12L16 15"/><path d="M13 6L11 18"/></svg>
        <h3>تطوير البرمجيات</h3>
        <p>بناء أدوات وتطبيقات ومتاجر وبوتات مخصصة بلغات برمجة متعددة، مع كتابة كود نظيف وقابل للتوسّع.</p>
        <div class="service-tags"><span>Backend</span><span>Automation</span><span>Custom Tools</span></div>
      </div>
    </div>
  </div>
</section>

<div class="marquee-wrap">
  <div class="marquee" id="marquee">
    <span><b>Python</b> lang</span><span><b>JavaScript</b> lang</span><span><b>C++</b> lang</span><span><b>PHP</b> lang</span><span><b>Bash</b> shell</span><span><b>SQL</b> data</span><span><b>Linux</b> os</span><span><b>AWS</b> cloud</span><span><b>Docker</b> infra</span><span><b>Git</b> tool</span>
    <span><b>Python</b> lang</span><span><b>JavaScript</b> lang</span><span><b>C++</b> lang</span><span><b>PHP</b> lang</span><span><b>Bash</b> shell</span><span><b>SQL</b> data</span><span><b>Linux</b> os</span><span><b>AWS</b> cloud</span><span><b>Docker</b> infra</span><span><b>Git</b> tool</span>
  </div>
</div>

<section id="works">
  <div class="wrap reveal">
    <div class="tag">الأعمال</div>
    <h2 class="section-title">مشاريع قمت ببنائها</h2>
    <p class="section-sub">نماذج حية من أعمال منشورة وتعمل الآن، تجمع بين البرمجة والحوسبة السحابية.</p>

    <div class="works-grid">

      <div class="work-card" data-tilt>
        <div class="work-inner">
          <div class="work-top">
            <span class="work-num">01</span>
            <span class="work-live"><i></i> Live</span>
          </div>
          <h3>RayStore</h3>
          <p>متجر إلكتروني متكامل لعرض المنتجات وإدارة الطلبات بواجهة سريعة وتجربة شراء سلسة.</p>
          <div class="work-tags"><span>E-Commerce</span><span>Web App</span></div>
          <a class="work-link" href="https://jko-place.site/pro" target="_blank" rel="noopener">
            jko-place.site/pro
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 17L17 7"/><path d="M8 7H17V16"/></svg>
          </a>
        </div>
      </div>

      <div class="work-card" data-tilt>
        <div class="work-inner">
          <div class="work-top">
            <span class="work-num">02</span>
            <span class="work-live"><i></i> Live</span>
          </div>
          <h3>بوت رفع وحفظ الملفات</h3>
          <p>بوت تيليجرام مخصص لرفع الملفات وتخزينها ومشاركتها عبر روابط مباشرة وسريعة.</p>
          <div class="work-tags"><span>Telegram Bot</span><span>Storage</span></div>
          <a class="work-link" href="https://jkostore.tech" target="_blank" rel="noopener">
            jkostore.tech
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 17L17 7"/><path d="M8 7H17V16"/></svg>
          </a>
        </div>
      </div>

      <div class="work-card" data-tilt>
        <div class="work-inner">
          <div class="work-top">
            <span class="work-num">03</span>
            <span class="work-live"><i></i> Live</span>
          </div>
          <h3>منصة المشاهدة الخاصة</h3>
          <p>منصة بث ومشاهدة خاصة مبنية بأداء عالٍ وواجهة مرنة تدعم استهلاك المحتوى بسلاسة.</p>
          <div class="work-tags"><span>Streaming</span><span>Platform</span></div>
          <a class="work-link" href="https://jko-tv.live" target="_blank" rel="noopener">
            jko-tv.live
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 17L17 7"/><path d="M8 7H17V16"/></svg>
          </a>
        </div>
      </div>

      <div class="work-card" data-tilt>
        <div class="work-inner">
          <div class="work-top">
            <span class="work-num">04</span>
            <span class="work-live"><i></i> Live</span>
          </div>
          <h3>Cloud Chat</h3>
          <p>أداة دردشة ذكية قابلة لتضمينها في أي موقع، تقدّم ردودًا فورية وتحسّن تجربة الزوار.</p>
          <div class="work-tags"><span>AI Chat</span><span>Widget</span></div>
          <a class="work-link" href="https://cloud-chat.top" target="_blank" rel="noopener">
            cloud-chat.top
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 17L17 7"/><path d="M8 7H17V16"/></svg>
          </a>
        </div>
      </div>

    </div>
  </div>
</section>

<section id="certs">
  <div class="wrap reveal">
    <div class="tag">الشهادات</div>
    <h2 class="section-title">شهادات معتمدة</h2>
    <div class="cert-source"><b>منصة دروب</b> — الصندوق السعودي لتنمية الموارد البشرية (هدف)</div>
    <div class="cert-grid">
      <div class="cert-card">
        <div class="cert-top">
          <div class="cert-badge"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L20 6V12C20 17 16.5 20.5 12 22C7.5 20.5 4 17 4 12V6L12 2Z"/></svg></div>
          <span class="cert-status">معتمدة</span>
        </div>
        <h4>الأمن السيبراني</h4>
        <p>DOROOB · CYBERSECURITY</p>
      </div>
      <div class="cert-card">
        <div class="cert-top">
          <div class="cert-badge"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 18C4.8 18 3 16.2 3 14C3 12 4.4 10.4 6.3 10.1C6.9 7.2 9.4 5 12.5 5C15.7 5 18.3 7.3 18.8 10.3C20.6 10.7 22 12.3 22 14.2C22 16.3 20.3 18 18.2 18H7Z"/></svg></div>
          <span class="cert-status">معتمدة</span>
        </div>
        <h4>الحوسبة السحابية</h4>
        <p>DOROOB · CLOUD COMPUTING</p>
      </div>
      <div class="cert-card">
        <div class="cert-top">
          <div class="cert-badge"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12L11 14L15 9"/><rect x="4" y="4" width="16" height="16" rx="3"/></svg></div>
          <span class="cert-status">معتمدة</span>
        </div>
        <h4>الحماية الرقمية</h4>
        <p>DOROOB · DIGITAL PROTECTION</p>
      </div>
    </div>
  </div>
</section>

<section id="contact" class="contact-section">
  <div class="wrap reveal">
    <div class="contact-panel">
      <div class="tag" style="justify-content:center;">نقطة التواصل</div>
      <h2>لديك مشروع تحتاج بناءه أو تأمينه؟</h2>
      <p>راسلني عبر البريد الإلكتروني وسأرد عليك في أقرب وقت.</p>
      <div class="mail-line">
        <span id="mailText"><?php echo $mail; ?></span>
        <button class="copy-btn" id="copyBtn">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4C3 15 3 14 3 14V4C3 3 4 3 4 3H14C15 3 15 4 15 4V5"/></svg>
          نسخ
        </button>
      </div>
    </div>
  </div>
</section>

<footer>SECURE BY DESIGN — © <?php echo $year; ?> جميع الحقوق محفوظة</footer>

<script>
/* ---------- cursor ---------- */
const isTouch = matchMedia('(hover:none)').matches;
if(isTouch){ document.body.classList.add('touch'); }
else{
  const glow = document.getElementById('cursorGlow');
  const dot = document.getElementById('cursorDot');
  let mx=innerWidth/2, my=innerHeight/2, gx=mx, gy=my;
  addEventListener('mousemove', e=>{ mx=e.clientX; my=e.clientY; dot.style.transform=`translate(${mx}px,${my}px) translate(-50%,-50%)`; });
  (function loop(){ gx += (mx-gx)*0.12; gy += (my-gy)*0.12; glow.style.transform=`translate(${gx}px,${gy}px) translate(-50%,-50%)`; requestAnimationFrame(loop); })();
}

/* ---------- scroll progress ---------- */
const progress = document.getElementById('progress');
addEventListener('scroll', ()=>{
  const h = document.documentElement;
  const p = (h.scrollTop)/(h.scrollHeight-h.clientHeight);
  progress.style.transform = `scaleX(${p})`;
});

/* ---------- reveal on scroll ---------- */
const revealEls = document.querySelectorAll('.reveal');
const obs = new IntersectionObserver((entries)=>{
  entries.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('in'); obs.unobserve(e.target);} });
},{threshold:0.12});
revealEls.forEach(el=>obs.observe(el));

/* ---------- typing terminal ---------- */
const lines = [
  'status: available_for_projects = true',
  'scan: no active threats detected',
  'deploy: production-ready ✓'
];
const typeEl = document.getElementById('typeLine');
let li=0, ci=0, deleting=false;
function type(){
  const current = lines[li];
  typeEl.textContent = deleting ? current.slice(0,ci--) : current.slice(0,ci++);
  typeEl.innerHTML += '<span class="caret"></span>';
  let delay = deleting ? 25 : 45;
  if(!deleting && ci===current.length+1){ delay=1400; deleting=true; }
  else if(deleting && ci<0){ deleting=false; li=(li+1)%lines.length; ci=0; delay=300; }
  setTimeout(type, delay);
}
type();

/* ---------- particle network ---------- */
const canvas = document.getElementById('net');
const ctx = canvas.getContext('2d');
let particles = [];
function resize(){ canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; }
function initParticles(){
  const count = Math.min(70, Math.floor(canvas.width/22));
  particles = Array.from({length:count},()=>({
    x:Math.random()*canvas.width, y:Math.random()*canvas.height,
    vx:(Math.random()-0.5)*0.35, vy:(Math.random()-0.5)*0.35
  }));
}
function drawNet(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
  for(const p of particles){
    p.x+=p.vx; p.y+=p.vy;
    if(p.x<0||p.x>canvas.width) p.vx*=-1;
    if(p.y<0||p.y>canvas.height) p.vy*=-1;
  }
  for(let i=0;i<particles.length;i++){
    for(let j=i+1;j<particles.length;j++){
      const a=particles[i], b=particles[j];
      const d=Math.hypot(a.x-b.x,a.y-b.y);
      if(d<130){
        ctx.strokeStyle = `rgba(0,232,255,${0.16*(1-d/130)})`;
        ctx.lineWidth=1;
        ctx.beginPath(); ctx.moveTo(a.x,a.y); ctx.lineTo(b.x,b.y); ctx.stroke();
      }
    }
  }
  for(const p of particles){
    ctx.beginPath(); ctx.arc(p.x,p.y,1.8,0,Math.PI*2);
    ctx.fillStyle='rgba(0,232,255,.7)'; ctx.fill();
  }
  requestAnimationFrame(drawNet);
}
if(!matchMedia('(prefers-reduced-motion: reduce)').matches){
  resize(); initParticles(); drawNet();
  addEventListener('resize', ()=>{ resize(); initParticles(); });
}

/* ---------- work card tilt + spotlight ---------- */
document.querySelectorAll('[data-tilt]').forEach(card=>{
  const inner = card.querySelector('.work-inner');
  card.addEventListener('mousemove', e=>{
    const r = card.getBoundingClientRect();
    const x = e.clientX-r.left, y = e.clientY-r.top;
    card.style.setProperty('--mx', x+'px');
    card.style.setProperty('--my', y+'px');
    const rx = ((y/r.height)-0.5) * -6;
    const ry = ((x/r.width)-0.5) * 6;
    inner.style.transform = `perspective(700px) rotateX(${rx}deg) rotateY(${ry}deg)`;
  });
  card.addEventListener('mouseleave', ()=>{ inner.style.transform = 'perspective(700px) rotateX(0) rotateY(0)'; });
});

/* ---------- copy email ---------- */
const copyBtn = document.getElementById('copyBtn');
const mailText = document.getElementById('mailText').textContent.trim();
copyBtn.addEventListener('click', ()=>{
  navigator.clipboard.writeText(mailText).then(()=>{
    const original = copyBtn.innerHTML;
    copyBtn.classList.add('copied');
    copyBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12L10 17L19 8"/></svg> تم النسخ';
    setTimeout(()=>{ copyBtn.classList.remove('copied'); copyBtn.innerHTML = original; }, 1800);
  });
});
</script>
</body>
</html>
