<?php
define('DATA_DIR', __DIR__ . '/data/');
$pages = json_decode(file_get_contents(DATA_DIR . 'pages.json'), true) ?? [];
$allPosts = json_decode(file_get_contents(DATA_DIR . 'posts.json'), true) ?? [];
$published = array_values(array_filter($allPosts, fn($p) => ($p['status'] ?? '') === 'published'));
usort($published, fn($a, $b) => strcmp($b['date'] ?? '', $a['date'] ?? ''));
$blogPosts = array_slice($published, 0, 6);

function h($s) { return htmlspecialchars($s ?? '', ENT_QUOTES | ENT_HTML5, 'UTF-8'); }
function catSlug($cat) {
  $map = ['Digital Security'=>'ds','IT Governance'=>'itg','GRC'=>'grc',
          'Risk Management'=>'grc','Data Governance'=>'grc','AI Governance'=>'ds',
          'Compliance'=>'grc','Cybersecurity'=>'ds','ITSM'=>'itg'];
  return $map[$cat] ?? 'grc';
}
function catLabel($cat) {
  return htmlspecialchars($cat ?? 'GRC', ENT_QUOTES);
}

$hero  = $pages['hero']  ?? [];
$prof  = $pages['profile'] ?? [];
$mets  = $pages['metrics'] ?? [];
$exp   = $pages['expertise'] ?? [];
$certs = $pages['certifications'] ?? [];
$proj  = $pages['projects'] ?? [];
$collab= $pages['collab'] ?? [];
$cont  = $pages['contact'] ?? [];
$foot  = $pages['footer'] ?? [];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= h($prof['name'] ?? 'Fahmid Wasif') ?> — Digital Security &amp; GRC Professional | Auckland, NZ</title>
<meta name="description" content="Senior Digital Security, GRC and IT Governance professional with 13+ years of enterprise experience. Based in Auckland, NZ.">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0b1220">
<meta name="keywords" content="GRC, Digital Security, IT Governance, Cybersecurity, ISO 27001, AI Governance, Auckland, New Zealand">
<meta name="author" content="<?= h($prof['name'] ?? 'Md Fahmid Wasif') ?>">
<meta property="og:title" content="<?= h($prof['name'] ?? 'Fahmid Wasif') ?> — Digital Security &amp; GRC Professional">
<meta property="og:description" content="13+ years enterprise GRC, IT Governance and Digital Security expertise. Based in Auckland, NZ.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://fahmid-wasif.info">
<meta property="og:image" content="https://fahmid-wasif.info<?= h($prof['photo_url'] ?? '/data/uploads/profile.jpg') ?>">
<meta property="og:site_name" content="Fahmid Wasif">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@fahmidron">
<meta name="twitter:title" content="<?= h($prof['name'] ?? 'Fahmid Wasif') ?> — Digital Security &amp; GRC Professional">
<meta name="twitter:description" content="13+ years enterprise GRC, IT Governance and Digital Security expertise. Based in Auckland, NZ.">
<meta name="twitter:image" content="https://fahmid-wasif.info<?= h($prof['photo_url'] ?? '/data/uploads/profile.jpg') ?>">
<link rel="canonical" href="https://fahmid-wasif.info">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Person",
      "name": "<?= h($prof['name'] ?? 'Md Fahmid Wasif') ?>",
      "jobTitle": "Senior Digital Security & GRC Professional",
      "url": "https://fahmid-wasif.info",
      "image": "https://fahmid-wasif.info<?= h($prof['photo_url'] ?? '/data/uploads/profile.jpg') ?>",
      "sameAs": [
        "https://www.linkedin.com/in/fahmidwasif/",
        "https://x.com/fahmidron/"
      ],
      "address": {
        "@type": "PostalAddress",
        "addressLocality": "Auckland",
        "addressCountry": "NZ"
      }
    },
    {
      "@type": "WebSite",
      "name": "Fahmid Wasif",
      "url": "https://fahmid-wasif.info"
    }
  ]
}
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Syne:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LL4WXWQE2V"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-LL4WXWQE2V');
  gtag('config', 'GT-WB77LVJL');
</script>
<style>
:root{--navy:#0b1220;--navy2:#111d2e;--navy3:#162236;--gold:#c9a84c;--gold2:#e8c876;--teal:#2dd4bf;--text:#e8e4dc;--muted:#7a8fa8;--border:rgba(255,255,255,0.07);}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Syne',sans-serif;background:var(--navy);color:var(--text);overflow-x:hidden;line-height:1.6;}
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:0;opacity:0.4;}
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1.25rem 2.5rem;display:flex;justify-content:space-between;align-items:center;background:rgba(11,18,32,0.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);}
.nav-logo{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;color:#fff;}
.nav-logo span{color:var(--gold);}
.nav-links{display:flex;gap:2rem;list-style:none;}
.nav-links a{font-size:13px;color:var(--muted);text-decoration:none;letter-spacing:0.06em;text-transform:uppercase;transition:color 0.2s;}
.nav-links a:hover{color:var(--text);}
.nav-cta{font-size:13px;font-weight:600;color:var(--navy);background:var(--gold);padding:8px 20px;border-radius:4px;text-decoration:none;transition:background 0.2s;}
.nav-cta:hover{background:var(--gold2);}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;}
.mobile-menu{display:none;position:fixed;top:60px;left:0;right:0;background:rgba(11,18,32,0.98);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);z-index:99;padding:1.5rem 2rem;}
.mobile-menu.open{display:flex;flex-direction:column;gap:1.25rem;}
.mobile-menu a{font-size:15px;color:var(--muted);text-decoration:none;text-transform:uppercase;letter-spacing:0.06em;}
.mobile-menu .mob-cta{color:var(--gold);font-weight:600;}
.hero{min-height:100vh;display:flex;align-items:center;position:relative;padding:7rem 2.5rem 5rem;overflow:hidden;}
.hero-bg-lines{position:absolute;inset:0;background:linear-gradient(90deg,var(--border) 1px,transparent 1px),linear-gradient(180deg,var(--border) 1px,transparent 1px);background-size:80px 80px;opacity:0.35;}
.hero-glow{position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(201,168,76,0.08) 0%,transparent 70%);top:10%;right:-100px;pointer-events:none;}
.hero-glow2{position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(45,212,191,0.06) 0%,transparent 70%);bottom:10%;left:-50px;pointer-events:none;}
.hero-content{position:relative;z-index:1;max-width:1100px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr 420px;gap:4rem;align-items:center;}
.hero-title{font-family:'Cormorant Garamond',serif;font-size:clamp(36px,4.5vw,62px);font-weight:300;line-height:1.1;color:#fff;margin-bottom:1.25rem;opacity:0;animation:fadeUp 0.8s 0.3s forwards;}
.hero-title em{font-style:italic;color:var(--gold);}
.hero-pro{display:block;margin-top:-0.05em;line-height:1.05;color:var(--text);}
.hero-title strong{font-weight:600;display:block;}
.hero-sub{font-size:15px;color:var(--muted);line-height:1.8;max-width:440px;margin-bottom:2rem;opacity:0;animation:fadeUp 0.8s 0.5s forwards;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;opacity:0;animation:fadeUp 0.8s 0.7s forwards;}
.btn-gold{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--navy);font-size:13px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:13px 26px;border-radius:4px;text-decoration:none;transition:all 0.2s;}
.btn-gold:hover{background:var(--gold2);transform:translateY(-1px);}
.btn-outline{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--text);font-size:13px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;padding:13px 26px;border-radius:4px;border:1px solid var(--border);text-decoration:none;transition:all 0.2s;}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);}
.hero-right{opacity:0;animation:fadeIn 1s 0.5s forwards;}
.profile-card{background:var(--navy2);border:1px solid var(--border);border-radius:16px;overflow:hidden;position:relative;transition:box-shadow 0.3s;}.profile-card:hover{box-shadow:0 0 40px rgba(201,168,76,0.12);}
.profile-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--teal));z-index:2;}
.profile-photo-wrap{position:relative;overflow:hidden;height:370px;background:var(--navy3);}
.profile-photo-wrap img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block;transition:transform 0.5s ease;}
.profile-card:hover .profile-photo-wrap img{transform:scale(1.04);}
.profile-photo-overlay{position:absolute;bottom:0;left:0;right:0;height:140px;background:linear-gradient(to top,var(--navy2) 35%,rgba(11,18,32,0.6) 65%,transparent);}
.profile-photo-badge{position:absolute;top:1rem;right:1rem;background:rgba(11,18,32,0.75);backdrop-filter:blur(8px);border:1px solid rgba(201,168,76,0.35);border-radius:20px;padding:5px 12px;font-size:11px;font-weight:600;color:var(--gold);letter-spacing:0.06em;text-transform:uppercase;}
.profile-body{padding:1.25rem 1.5rem 1.5rem;}
.profile-name{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:600;color:#fff;}
.profile-role{font-size:12px;color:var(--muted);margin-top:2px;letter-spacing:0.04em;line-height:1.5;}
.profile-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:1rem 0;}
.pstat{background:var(--navy3);border-radius:8px;padding:0.85rem 1rem;}
.pstat-num{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;color:var(--gold);line-height:1;}
.pstat-label{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.4;}
.profile-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:1rem;}
.ptag{font-size:11px;padding:4px 10px;border-radius:20px;border:1px solid var(--border);color:var(--muted);}
.ptag.gold{border-color:rgba(201,168,76,0.4);color:var(--gold);}
.ptag.teal{border-color:rgba(45,212,191,0.4);color:var(--teal);}
.location-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border);}
.loc-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);flex-shrink:0;}
section{position:relative;z-index:1;}
.container{max-width:1100px;margin:0 auto;padding:0 2.5rem;}
.sec-eyebrow{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);margin-bottom:0.75rem;display:flex;align-items:center;gap:12px;}
.sec-eyebrow::after{content:'';flex:1;max-width:40px;height:1px;background:var(--gold);opacity:0.4;}
.sec-title{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,4vw,48px);font-weight:300;color:#fff;line-height:1.15;}
.sec-title em{font-style:italic;color:var(--gold);}
.metrics-bar{background:var(--navy2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:2rem 2.5rem;}
.metrics-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);}
.metric{text-align:center;padding:1rem 0.75rem;border-right:1px solid var(--border);}
.metric:last-child{border-right:none;}
.metric-num{font-family:'Cormorant Garamond',serif;font-size:38px;font-weight:600;color:var(--gold);line-height:1;}
.metric-label{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.4;}
.expertise-section{padding:5rem 0;background:var(--navy);}
.expertise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:2.5rem;}
.exp-card{background:var(--navy2);border:1px solid var(--border);border-radius:10px;padding:1.5rem;transition:all 0.25s;}
.exp-card:hover{border-color:rgba(201,168,76,0.25);transform:translateY(-3px);}
.exp-icon{width:38px;height:38px;border-radius:8px;background:rgba(201,168,76,0.1);display:flex;align-items:center;justify-content:center;margin-bottom:0.85rem;font-size:17px;}
.exp-title{font-size:14px;font-weight:600;color:#fff;margin-bottom:0.4rem;}
.exp-desc{font-size:13px;color:var(--muted);line-height:1.65;}
.skills-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:2.5rem;}
.skill-tag{font-size:12px;padding:6px 13px;border-radius:4px;background:var(--navy2);border:1px solid var(--border);color:var(--muted);transition:all 0.2s;}
.skill-tag:hover{border-color:var(--gold);color:var(--gold);}
.certs-section{padding:5rem 0;background:var(--navy2);}
.certs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:2.5rem;}
.cert-card{background:var(--navy);border:1px solid var(--border);border-radius:10px;padding:1.1rem 1.25rem;display:flex;align-items:center;gap:0.85rem;transition:border-color 0.2s;}
.cert-card:hover{border-color:rgba(201,168,76,0.3);}
.cert-icon{width:36px;height:36px;border-radius:7px;background:rgba(201,168,76,0.1);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.cert-icon.teal{background:rgba(45,212,191,0.1);}
.cert-name{font-size:13px;font-weight:600;color:var(--text);line-height:1.3;}
.cert-issuer{font-size:11px;color:var(--muted);margin-top:2px;}
/* ── GITHUB PROJECTS ── */
.projects-section{padding:5rem 0;background:var(--navy);}
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:2.5rem;}
.project-card{background:var(--navy2);border:1px solid var(--border);border-radius:12px;padding:1.5rem;display:flex;flex-direction:column;gap:1rem;transition:all 0.25s;}
.project-card:hover{border-color:rgba(45,212,191,0.3);transform:translateY(-4px);}
.project-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;}
.project-icon{font-size:22px;line-height:1;}
.project-gh-link{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--muted);text-decoration:none;letter-spacing:0.05em;text-transform:uppercase;border:1px solid var(--border);padding:5px 12px;border-radius:4px;transition:all 0.2s;white-space:nowrap;}
.project-gh-link:hover{border-color:var(--teal);color:var(--teal);}
.project-gh-link svg{width:14px;height:14px;fill:currentColor;flex-shrink:0;}
.project-name{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:600;color:#fff;line-height:1.25;}
.project-desc{font-size:13px;color:var(--muted);line-height:1.7;flex:1;}
.project-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;}
.project-tag{font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:3px 9px;border-radius:20px;background:rgba(45,212,191,0.1);color:var(--teal);border:1px solid rgba(45,212,191,0.2);}
/* ── BLOG ── */
.blog-section{padding:5rem 0;background:var(--navy2);}
.blog-filters{display:flex;gap:8px;flex-wrap:wrap;margin:2rem 0 2.5rem;}
.filter-btn{font-size:12px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;padding:7px 18px;border-radius:4px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:all 0.2s;font-family:'Syne',sans-serif;}
.filter-btn:hover{border-color:var(--gold);color:var(--gold);}
.filter-btn.active{background:var(--gold);color:var(--navy);border-color:var(--gold);}
.filter-btn.cat-ds.active{background:var(--teal);border-color:var(--teal);color:var(--navy);}
.filter-btn.cat-itg.active{background:#818cf8;border-color:#818cf8;color:#fff;}
.filter-btn.cat-grc.active{background:var(--gold);border-color:var(--gold);color:var(--navy);}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.blog-card{background:var(--navy3);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:all 0.25s;display:flex;flex-direction:column;}
.blog-card:hover{border-color:rgba(201,168,76,0.25);transform:translateY(-4px);}
.blog-card[data-hidden]{display:none;}
.blog-card-top{padding:1.5rem 1.5rem 0;}
.blog-cat{display:inline-block;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:4px 10px;border-radius:20px;margin-bottom:0.85rem;}
.blog-cat.ds{background:rgba(45,212,191,0.12);color:var(--teal);border:1px solid rgba(45,212,191,0.25);}
.blog-cat.itg{background:rgba(129,140,248,0.12);color:#818cf8;border:1px solid rgba(129,140,248,0.25);}
.blog-cat.grc{background:rgba(201,168,76,0.12);color:var(--gold);border:1px solid rgba(201,168,76,0.25);}
.blog-title{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;color:#fff;line-height:1.3;margin-bottom:0.75rem;}
.blog-excerpt{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:1rem;}
.blog-card-foot{padding:0 1.5rem 1.5rem;margin-top:auto;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding-top:1rem;}
.blog-date{font-size:11px;color:var(--muted);}
.blog-read{font-size:12px;font-weight:600;color:var(--gold);text-decoration:none;letter-spacing:0.04em;transition:gap 0.2s;display:flex;align-items:center;gap:4px;}
.blog-read:hover{gap:8px;}
.blog-cta-row{text-align:center;margin-top:2.5rem;}
.empty-blog{text-align:center;padding:3rem;color:var(--muted);font-size:14px;grid-column:1/-1;}
/* ── COLLAB ── */
.collab-section{padding:5rem 0;background:var(--navy2);overflow:hidden;position:relative;}
.collab-glow{position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(45,212,191,0.06) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);}
.collab-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2.5rem;}
.collab-card{background:var(--navy);border:1px solid var(--border);border-radius:12px;padding:2.25rem;transition:all 0.25s;}
.collab-card:hover{border-color:rgba(201,168,76,0.25);transform:translateY(-3px);}
.collab-card.teal-accent{border-top:2px solid var(--teal);}
.collab-card.gold-accent{border-top:2px solid var(--gold);}
.collab-icon{font-size:30px;margin-bottom:1rem;}
.collab-title{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:600;color:#fff;margin-bottom:0.65rem;line-height:1.2;}
.collab-desc{font-size:13px;color:var(--muted);line-height:1.8;margin-bottom:1.25rem;}
.collab-list{list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:1.75rem;}
.collab-list li{font-size:13px;color:var(--muted);display:flex;align-items:flex-start;gap:8px;}
.collab-list li::before{content:'✓';color:var(--teal);flex-shrink:0;font-weight:700;}
/* ── CONTACT ── */
.contact-section{padding:5rem 0 4rem;background:var(--navy);}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;margin-top:2.5rem;align-items:start;}
.contact-intro{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:300;color:var(--text);line-height:1.6;margin-bottom:1.75rem;}
.contact-intro em{color:var(--gold);font-style:italic;}
.contact-links{display:flex;flex-direction:column;gap:10px;}
.contact-link{display:flex;align-items:center;gap:12px;padding:13px 16px;background:var(--navy2);border:1px solid var(--border);border-radius:8px;text-decoration:none;color:var(--text);font-size:13px;transition:all 0.2s;}
.contact-link:hover{border-color:var(--gold);color:var(--gold);}
.contact-link-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0;}
.contact-link-detail{color:var(--muted);font-size:11px;margin-top:1px;}
.avail-card{background:linear-gradient(135deg,rgba(45,212,191,0.08),rgba(201,168,76,0.05));border:1px solid rgba(45,212,191,0.2);border-radius:12px;padding:1.75rem;margin-top:1.5rem;}
.avail-title{font-size:14px;font-weight:600;color:var(--teal);margin-bottom:0.5rem;}
.avail-desc{font-size:13px;color:var(--muted);line-height:1.7;}
footer{background:var(--navy2);border-top:1px solid var(--border);padding:1.75rem 2.5rem;}
.footer-inner{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;}
.footer-name{font-family:'Cormorant Garamond',serif;font-size:16px;color:#fff;}
.footer-copy{font-size:12px;color:var(--muted);}
.footer-links{display:flex;gap:1.5rem;}
.footer-links a{font-size:12px;color:var(--muted);text-decoration:none;transition:color 0.2s;}
.footer-links a:hover{color:var(--gold);}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.7s,transform 0.7s;}
.reveal.visible{opacity:1;transform:none;}
@media(max-width:900px){
  nav{padding:1rem 1.5rem;}
  .nav-links,.nav-cta{display:none;}
  .hamburger{display:flex;}
  .hero{padding:6rem 1.5rem 4rem;min-height:auto;}
  .hero-content{grid-template-columns:1fr;gap:2.5rem;}
  .hero-right{order:-1;}
  .profile-photo-wrap{height:320px;}
  .metrics-bar{padding:1.5rem;}
  .metrics-grid{grid-template-columns:repeat(3,1fr);}
  .metric:nth-child(4),.metric:nth-child(5){border-top:1px solid var(--border);}
  .metric:nth-child(3){border-right:none;}
  .expertise-grid{grid-template-columns:1fr 1fr;}
  .certs-grid{grid-template-columns:1fr 1fr;}
  .projects-grid{grid-template-columns:1fr 1fr;}
  .blog-grid{grid-template-columns:1fr 1fr;}
  .collab-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;gap:2rem;}
  .container{padding:0 1.5rem;}
  .expertise-section,.certs-section,.projects-section,.blog-section,.collab-section,.contact-section{padding:4rem 0;}
}
@media(max-width:600px){
  nav{padding:0.9rem 1rem;}
  .nav-logo{font-size:17px;}
  .hero{padding:5rem 1rem 3rem;}
  .hero-title{font-size:clamp(30px,8vw,40px);}
  .hero-sub{font-size:14px;}
  .hero-actions{flex-direction:column;}
  .btn-gold,.btn-outline{width:100%;justify-content:center;}
  .profile-photo-wrap{height:300px;}
  .profile-stats{grid-template-columns:1fr 1fr;}
  .metrics-grid{grid-template-columns:1fr 1fr;}
  .metric{padding:0.85rem 0.5rem;border-right:none;border-bottom:1px solid var(--border);}
  .metric:nth-child(2n){border-right:none;}
  .metric:last-child{border-bottom:none;}
  .metric-num{font-size:28px;}
  .expertise-grid,.certs-grid,.projects-grid,.blog-grid,.collab-grid{grid-template-columns:1fr;}
  .collab-card{padding:1.5rem;}
  .contact-grid{grid-template-columns:1fr;}
  .footer-inner{flex-direction:column;text-align:center;gap:0.75rem;}
  .footer-links{justify-content:center;}
  .container{padding:0 1rem;}
  .sec-title{font-size:clamp(24px,7vw,34px);}
  .blog-filters{gap:6px;}
  .filter-btn{font-size:11px;padding:6px 13px;}
}
</style>
</head>
<body>

<nav>
  <div class="nav-logo">Fahmid <span>Wasif</span></div>
  <ul class="nav-links">
    <li><a href="#expertise">Expertise</a></li>
    <li><a href="#certifications">Credentials</a></li>
    <li><a href="#projects">Projects</a></li>
    <li><a href="#blog">Blog</a></li>
    <li><a href="#collaborate">Collaborate</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
  <a href="/contact" class="nav-cta">Get in Touch</a>
  <div class="hamburger" onclick="toggleMenu()" id="hamburger">
    <span></span><span></span><span></span>
  </div>
</nav>
<div class="mobile-menu" id="mobileMenu">
  <a href="#expertise" onclick="closeMenu()">Expertise</a>
  <a href="#certifications" onclick="closeMenu()">Credentials</a>
  <a href="#projects" onclick="closeMenu()">Projects</a>
  <a href="#blog" onclick="closeMenu()">Blog</a>
  <a href="#collaborate" onclick="closeMenu()">Collaborate</a>
  <a href="/contact" onclick="closeMenu()">Contact</a>
  <a href="/contact" class="mob-cta" onclick="closeMenu()">Get in Touch &#8599;</a>
</div>

<!-- HERO -->
<section class="hero">
  <div class="hero-bg-lines"></div>
  <div class="hero-glow"></div>
  <div class="hero-glow2"></div>
  <div class="hero-content">
    <div class="hero-left">
      <h1 class="hero-title">
        <em><?= h($hero['title_line1'] ?? 'Digital Security') ?></em><br>
        <strong><?= h($hero['title_line2'] ?? '& Governance, Risk') ?></strong>
        <span class="hero-pro"><?= h($hero['title_line3'] ?? 'Professional.') ?></span>
      </h1>
      <p class="hero-sub"><?= h($hero['subtitle'] ?? '') ?></p>
      <div class="hero-actions">
        <a href="<?= h($hero['cta_primary_url'] ?? 'mailto:me@fahmid-wasif.info') ?>" class="btn-gold"><?= h($hero['cta_primary_label'] ?? 'Hire Me') ?> &#8599;</a>
        <a href="<?= h($hero['cta_secondary_url'] ?? '#collaborate') ?>" class="btn-outline"><?= h($hero['cta_secondary_label'] ?? 'Collaborate') ?></a>
        <a href="<?= h($hero['cta_cv_url'] ?? '/Fahmid_Wasif_CV.pdf') ?>" class="btn-outline" style="border-color:rgba(201,168,76,0.4);color:var(--gold)"><?= h($hero['cta_cv_label'] ?? 'Download CV') ?></a>
      </div>
    </div>
    <div class="hero-right">
      <div class="profile-card">
        <div class="profile-photo-wrap">
          <img src="<?= h($prof['photo_url'] ?? '/data/uploads/profile.jpg') ?>" alt="<?= h($prof['name'] ?? 'Fahmid Wasif') ?>" loading="lazy">
          <div class="profile-photo-overlay"></div>
          <div class="profile-photo-badge"><?= h($prof['badge_text'] ?? 'Available') ?></div>
        </div>
        <div class="profile-body">
          <div class="profile-name"><?= h($prof['name'] ?? 'Md Fahmid Wasif') ?></div>
          <div class="profile-role"><?= nl2br(h($prof['role'] ?? '')) ?></div>
          <div class="profile-stats">
            <?php foreach ($prof['stats'] ?? [] as $stat): ?>
            <div class="pstat">
              <div class="pstat-num"><?= h($stat['value']) ?></div>
              <div class="pstat-label"><?= h($stat['label']) ?></div>
            </div>
            <?php endforeach; ?>
          </div>
          <div class="profile-tags">
            <?php foreach ($prof['tags'] ?? [] as $tag): ?>
            <span class="ptag <?= h($tag['style'] ?? '') ?>"><?= h($tag['label']) ?></span>
            <?php endforeach; ?>
          </div>
          <div class="location-row">
            <div class="loc-dot"></div>
            <?= h($prof['location'] ?? 'Auckland, New Zealand') ?>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- METRICS -->
<div class="metrics-bar">
  <div class="metrics-grid">
    <?php foreach ($mets as $m): ?>
    <div class="metric">
      <div class="metric-num"><?= h($m['value']) ?></div>
      <div class="metric-label"><?= h($m['label']) ?></div>
    </div>
    <?php endforeach; ?>
  </div>
</div>

<!-- EXPERTISE -->
<section class="expertise-section" id="expertise">
  <div class="container">
    <div class="sec-eyebrow reveal"><?= h($exp['eyebrow'] ?? 'Core Expertise') ?></div>
    <h2 class="sec-title reveal"><?= h($exp['title'] ?? 'What I bring to your') ?><br><em><?= h($exp['title_em'] ?? 'organisation.') ?></em></h2>
    <div class="expertise-grid">
      <?php foreach ($exp['cards'] ?? [] as $card): ?>
      <div class="exp-card reveal">
        <div class="exp-icon"><?= h($card['icon']) ?></div>
        <div class="exp-title"><?= h($card['title']) ?></div>
        <div class="exp-desc"><?= h($card['desc']) ?></div>
      </div>
      <?php endforeach; ?>
    </div>
    <div class="skills-row reveal">
      <?php foreach (explode(',', $exp['skills'] ?? '') as $skill): ?>
      <?php if (trim($skill)): ?>
      <span class="skill-tag"><?= h(trim($skill)) ?></span>
      <?php endif; ?>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<!-- CERTIFICATIONS -->
<section class="certs-section" id="certifications">
  <div class="container">
    <div class="sec-eyebrow reveal"><?= h($certs['eyebrow'] ?? 'Credentials') ?></div>
    <h2 class="sec-title reveal"><?= h($certs['title'] ?? 'Certified across') ?><br><em><?= h($certs['title_em'] ?? 'security & governance.') ?></em></h2>
    <div class="certs-grid">
      <?php foreach ($certs['cards'] ?? [] as $card): ?>
      <div class="cert-card reveal">
        <div class="cert-icon <?= $card['icon_style'] === 'teal' ? 'teal' : '' ?>"><?= h($card['icon']) ?></div>
        <div>
          <div class="cert-name"><?= h($card['name']) ?></div>
          <div class="cert-issuer"><?= h($card['issuer']) ?></div>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
    <?php if (!empty($certs['affiliations'])): ?>
    <div style="margin-top:1.75rem;padding:1.25rem 1.5rem;background:var(--navy);border-radius:10px;border:1px solid var(--border);display:flex;align-items:center;gap:1rem" class="reveal">
      <span style="font-size:18px">&#127963;</span>
      <div>
        <div style="font-size:13px;font-weight:600;color:var(--text)">Professional Affiliations</div>
        <div style="font-size:12px;color:var(--muted);margin-top:2px"><?= h($certs['affiliations']) ?></div>
      </div>
    </div>
    <?php endif; ?>
  </div>
</section>

<!-- GITHUB PROJECTS -->
<section class="projects-section" id="projects">
  <div class="container">
    <div class="sec-eyebrow reveal"><?= h($proj['eyebrow'] ?? 'Open Source & Projects') ?></div>
    <h2 class="sec-title reveal"><?= h($proj['title'] ?? "Things I've built") ?><br><em><?= h($proj['title_em'] ?? '& contributed to.') ?></em></h2>
    <div class="projects-grid">
      <?php foreach ($proj['items'] ?? [] as $item): ?>
      <div class="project-card reveal">
        <div class="project-card-top">
          <span class="project-icon"><?= h($item['icon']) ?></span>
          <a href="<?= h($item['url']) ?>" class="project-gh-link" target="_blank" rel="noopener">
            <svg viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
            View on GitHub
          </a>
        </div>
        <div class="project-name"><?= h($item['name']) ?></div>
        <div class="project-desc"><?= h($item['desc']) ?></div>
        <div class="project-tags">
          <?php foreach ($item['tags'] ?? [] as $tag): ?>
          <span class="project-tag"><?= h($tag) ?></span>
          <?php endforeach; ?>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<!-- BLOG -->
<section class="blog-section" id="blog">
  <div class="container">
    <div class="sec-eyebrow reveal">Latest Writing</div>
    <h2 class="sec-title reveal">Insights on <em>security,</em><br>governance &amp; AI.</h2>
    <?php if (!empty($blogPosts)): ?>
    <div class="blog-filters reveal">
      <button class="filter-btn active" data-filter="all">All Posts</button>
      <button class="filter-btn cat-ds" data-filter="ds">Digital Security</button>
      <button class="filter-btn cat-itg" data-filter="itg">IT Governance</button>
      <button class="filter-btn cat-grc" data-filter="grc">GRC</button>
    </div>
    <div class="blog-grid" id="blogGrid">
      <?php foreach ($blogPosts as $post): ?>
      <?php $slug = catSlug($post['category'] ?? ''); ?>
      <div class="blog-card reveal" data-cat="<?= h($slug) ?>">
        <div class="blog-card-top">
          <span class="blog-cat <?= h($slug) ?>"><?= h($post['category'] ?? 'GRC') ?></span>
          <div class="blog-title"><?= h($post['title'] ?? '') ?></div>
          <div class="blog-excerpt"><?= h($post['excerpt'] ?? '') ?></div>
        </div>
        <div class="blog-card-foot">
          <span class="blog-date"><?= h(date('M j, Y', strtotime($post['date'] ?? 'now'))) ?></span>
          <a href="/blog/<?= h($post['slug'] ?? '') ?>" class="blog-read">Read more &#8594;</a>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
    <div class="blog-cta-row reveal">
      <a href="/blog" class="btn-outline">View All Articles &#8599;</a>
    </div>
    <?php else: ?>
    <div class="blog-grid" style="margin-top:2.5rem">
      <div class="empty-blog">No posts published yet. <a href="/admin/" style="color:var(--gold)">Add your first post &#8599;</a></div>
    </div>
    <?php endif; ?>
  </div>
</section>

<!-- COLLABORATE -->
<section class="collab-section" id="collaborate">
  <div class="collab-glow"></div>
  <div class="container" style="position:relative;z-index:1">
    <div class="sec-eyebrow reveal"><?= h($collab['eyebrow'] ?? 'How I Can Help') ?></div>
    <h2 class="sec-title reveal"><?= h($collab['title'] ?? 'For employers &') ?><br><em><?= h($collab['title_em'] ?? 'collaborators alike.') ?></em></h2>
    <div class="collab-grid">
      <?php foreach (['card1' => 'gold-accent', 'card2' => 'teal-accent'] as $key => $accentClass): ?>
      <?php $card = $collab[$key] ?? []; if (empty($card)) continue; ?>
      <div class="collab-card <?= $accentClass ?> reveal">
        <div class="collab-icon"><?= h($card['icon'] ?? '') ?></div>
        <div class="collab-title"><?= h($card['title'] ?? '') ?></div>
        <div class="collab-desc"><?= h($card['desc'] ?? '') ?></div>
        <ul class="collab-list">
          <?php foreach ($card['list_items'] ?? [] as $item): ?>
          <li><?= h($item) ?></li>
          <?php endforeach; ?>
        </ul>
        <?php $style = $card['cta_style'] ?? 'btn-gold'; ?>
        <?php if ($style === 'btn-gold'): ?>
        <a href="<?= h($card['cta_url'] ?? '#') ?>" class="btn-gold" style="display:inline-flex"><?= h($card['cta_label'] ?? 'Contact') ?> &#8599;</a>
        <?php else: ?>
        <a href="<?= h($card['cta_url'] ?? '#') ?>" class="btn-outline" style="display:inline-flex;border-color:var(--teal);color:var(--teal)"><?= h($card['cta_label'] ?? 'Collaborate') ?> &#8599;</a>
        <?php endif; ?>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<!-- CONTACT -->
<section class="contact-section" id="contact">
  <div class="container">
    <div class="sec-eyebrow reveal"><?= h($cont['eyebrow'] ?? 'Get in Touch') ?></div>
    <h2 class="sec-title reveal"><?= h($cont['title'] ?? 'Ready to make') ?><br><em><?= h($cont['title_em'] ?? 'governance work for you.') ?></em></h2>
    <div class="contact-grid">
      <div class="reveal">
        <p class="contact-intro"><?= h($cont['intro'] ?? '') ?></p>
        <div class="contact-links">
          <?php if (!empty($cont['email'])): ?>
          <a href="mailto:<?= h($cont['email']) ?>" class="contact-link">
            <span class="contact-link-icon">✉</span>
            <div><div><?= h($cont['email']) ?></div><div class="contact-link-detail">Primary — best for professional enquiries</div></div>
          </a>
          <?php endif; ?>
          <?php if (!empty($cont['phone'])): ?>
          <a href="tel:<?= h(preg_replace('/\s+/', '', $cont['phone'])) ?>" class="contact-link">
            <span class="contact-link-icon">📞</span>
            <div><div><?= h($cont['phone']) ?></div><div class="contact-link-detail"><?= h($cont['location'] ?? '') ?></div></div>
          </a>
          <?php endif; ?>
          <?php if (!empty($cont['linkedin'])): ?>
          <a href="<?= h($cont['linkedin']) ?>" target="_blank" class="contact-link">
            <span class="contact-link-icon" style="font-weight:700;font-size:13px">in</span>
            <div><div><?= h(parse_url($cont['linkedin'], PHP_URL_HOST) . parse_url($cont['linkedin'], PHP_URL_PATH)) ?></div><div class="contact-link-detail">Connect professionally</div></div>
          </a>
          <?php endif; ?>
        </div>
      </div>
      <div class="reveal">
        <?php if (!empty($cont['avail_title'])): ?>
        <div class="avail-card">
          <div class="avail-title"><?= h($cont['avail_title']) ?></div>
          <div class="avail-desc"><?= nl2br(h($cont['avail_desc'] ?? '')) ?></div>
        </div>
        <?php endif; ?>
        <?php if (!empty($cont['education'])): ?>
        <div style="margin-top:1.5rem;padding:1.5rem;background:var(--navy2);border:1px solid var(--border);border-radius:12px">
          <div style="font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:1rem">Education</div>
          <div style="display:flex;flex-direction:column;gap:0.9rem">
            <?php foreach ($cont['education'] as $edu): ?>
            <div>
              <div style="font-size:14px;font-weight:600;color:var(--text)"><?= h($edu['degree']) ?></div>
              <div style="font-size:12px;color:<?= $edu['style'] === 'teal' ? 'var(--teal)' : 'var(--muted)' ?>"><?= h($edu['school']) ?> &middot; <?= h($edu['period']) ?></div>
            </div>
            <?php endforeach; ?>
          </div>
        </div>
        <?php endif; ?>
      </div>
    </div>
  </div>
</section>

<footer>
  <div class="footer-inner">
    <div class="footer-name"><?= h($foot['name'] ?? 'Fahmid Wasif') ?></div>
    <div class="footer-copy"><?= h($foot['copyright'] ?? '© 2026 · Auckland, New Zealand') ?></div>
    <div class="footer-links">
      <?php foreach ($foot['links'] ?? [] as $link): ?>
      <a href="<?= h($link['url']) ?>"><?= h($link['label']) ?></a>
      <?php endforeach; ?>
    </div>
  </div>
</footer>

<script>
// Scroll reveal
const obs = new IntersectionObserver(entries => {
  entries.forEach(e => { if(e.isIntersecting){e.target.classList.add('visible');obs.unobserve(e.target);} });
},{threshold:0.08});
document.querySelectorAll('.reveal').forEach(el=>obs.observe(el));
['.expertise-grid .reveal','.certs-grid .reveal','.blog-grid .blog-card','.projects-grid .reveal'].forEach(sel=>{
  document.querySelectorAll(sel).forEach((el,i)=>{ el.style.transitionDelay=(i*70)+'ms'; });
});

// Counter animation
function animateCounter(el,target,suffix){
  let c=0;const inc=target/40;
  const t=setInterval(()=>{c+=inc;if(c>=target){c=target;clearInterval(t);}el.textContent=Math.floor(c)+suffix;},30);
}
const metricsData = <?= json_encode(array_map(fn($m) => [$m['counter_target'] ?? 0, $m['counter_suffix'] ?? ''], $mets)) ?>;
const mo=new IntersectionObserver(entries=>{
  entries.forEach(e=>{
    if(e.isIntersecting){
      metricsData.forEach((item,i)=>{
        const el=e.target.querySelectorAll('.metric-num')[i];
        if(el)animateCounter(el,item[0],item[1]);
      });
      mo.unobserve(e.target);
    }
  });
},{threshold:0.3});
const mg=document.querySelector('.metrics-grid');if(mg)mo.observe(mg);

// Blog filter
document.querySelectorAll('.filter-btn').forEach(btn=>{
  btn.addEventListener('click',()=>{
    document.querySelectorAll('.filter-btn').forEach(b=>b.classList.remove('active'));
    btn.classList.add('active');
    const filter=btn.dataset.filter;
    document.querySelectorAll('.blog-card').forEach(card=>{
      if(filter==='all'||card.dataset.cat===filter){
        card.removeAttribute('data-hidden');
      } else {
        card.setAttribute('data-hidden','1');
      }
    });
  });
});

// Mobile menu
function toggleMenu(){
  const m=document.getElementById('mobileMenu');
  const h=document.getElementById('hamburger');
  m.classList.toggle('open');
  h.classList.toggle('open');
}
function closeMenu(){
  document.getElementById('mobileMenu').classList.remove('open');
  document.getElementById('hamburger').classList.remove('open');
}
document.querySelectorAll('.mobile-menu a').forEach(a=>{
  a.addEventListener('click',closeMenu);
});
</script>
</body>
</html>