<?php
/* ============================================================
 *  index-conv-demo.php — Conversion-focused homepage demo
 *  Standalone preview. Live homepage (/index.php) is untouched.
 *
 *  Sections shipped here = the parked May-3 strategic proposals:
 *    1. Hero with live Lab Console preview + sourced stats
 *    2. OEM "Direct since YYYY" badge strip
 *    3. Real Trainer Wall (6)
 *    4. Three real case studies
 *    5. Bundled-TCO calculator (interactive)
 *    6. Trainer Match Guarantee (3-tier)
 *    7. Named L&D testimonial with face + LinkedIn
 *    8. Free Team Skill Audit lead magnet
 *    9. Buyer-specific tracks (L&D / Eng / Procurement)
 *
 *  Every spot you'd swap with a real photo / stat / quote is
 *  marked with a yellow "REPLACE: …" badge so you see exactly
 *  what to send back. Toggle the badges off via ?clean=1 in URL.
 * ============================================================ */
$clean = isset($_GET['clean']);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo · The L&amp;D partner that earns the renewal — Synergific</title>
<meta name="robots" content="noindex,nofollow">
<meta name="theme-color" content="#0B2447">
<link rel="icon" href="images/favicon.png" type="image/png">
<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=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/tailwind.css?v=1">
<link rel="stylesheet" href="/css/theme.css?v=1777823724">
<style>
/* ===== demo-page-only styling ===== */
:root{--cd-grad:linear-gradient(135deg,#0B2447 0%,#19376D 50%,#2B5EA7 100%)}
body.cd{background:#070B10;font-family:'Inter',system-ui,sans-serif;color:#fff;margin:0}
body.cd .site-header{position:fixed!important;top:0;left:0;right:0;z-index:100;background:transparent!important;border-bottom:none!important;transition:background .35s ease,backdrop-filter .35s ease}
body.cd .site-header.scrolled{background:rgba(7,11,16,.88)!important;backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid rgba(255,255,255,.06)!important}
body.cd .header-logo img{filter:brightness(0) invert(1)}
body.cd .nav-item>a{color:rgba(255,255,255,.88)!important}
body.cd #announcementBar,body.cd .top-bar{display:none!important}
body.cd .demo-banner{position:fixed;top:0;left:0;right:0;z-index:200;background:#F4A825;color:#1D2939;font-size:12.5px;font-weight:700;text-align:center;padding:6px 12px;letter-spacing:.02em}
body.cd .demo-banner a{color:#0B2447;text-decoration:underline;margin-left:8px}
body.cd.bnr .site-header{top:30px!important}

.replace{display:inline-block;background:#FFE08A;color:#7A5A00;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase;margin:0 0 0 6px;vertical-align:middle;border:1px solid rgba(0,0,0,.08)}
.replace.block{display:block;width:fit-content;margin:8px 0 0}
<?php if($clean):?>.replace{display:none!important}<?php endif;?>

/* ===== HERO ===== */
.cd-hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:120px 0 60px;overflow:hidden;background:radial-gradient(ellipse at top right,#1A2F5C 0%,#070B10 60%)}
.cd-hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 70%);opacity:.5}
.cd-hero-wrap{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.cd-hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#F26B2B;background:rgba(242,107,43,.08);border:1px solid rgba(242,107,43,.25);padding:6px 14px;border-radius:999px;margin-bottom:24px}
.cd-hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:#F26B2B;animation:dotPulse 2s infinite}
.cd-hero h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:800;line-height:1.05;letter-spacing:-.025em;margin-bottom:24px}
.cd-hero h1 .accent{background:linear-gradient(135deg,#F26B2B,#FFA660);-webkit-background-clip:text;background-clip:text;color:transparent}
.cd-hero p.lede{font-size:1.2rem;color:rgba(255,255,255,.78);line-height:1.55;margin-bottom:36px;max-width:560px}
.cd-hero-ctas{display:flex;gap:14px;margin-bottom:40px;flex-wrap:wrap}
.cd-hero-ctas .btn-accent{padding:15px 32px;font-size:15px;border-radius:10px;background:#F26B2B;color:#fff;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:all .3s;border:none;cursor:pointer}
.cd-hero-ctas .btn-accent:hover{background:#D85A1F;transform:translateY(-3px);box-shadow:0 16px 40px rgba(242,107,43,.4)}
.cd-hero-ctas .btn-ghost{padding:15px 32px;font-size:15px;border-radius:10px;background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.18);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:all .3s}
.cd-hero-ctas .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.36)}
.cd-hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-top:32px;border-top:1px solid rgba(255,255,255,.08)}
.cd-stat .num{font-size:1.8rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.cd-stat .lbl{font-size:12.5px;color:rgba(255,255,255,.55);margin-top:4px;line-height:1.4}
.cd-stat .src{font-size:10.5px;color:rgba(255,255,255,.4);margin-top:6px;font-style:italic}

/* Lab Console mock */
.cd-console{position:relative;background:#0F1722;border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04)}
.cd-console-head{display:flex;align-items:center;gap:8px;padding:12px 14px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.06);font-size:12px;color:rgba(255,255,255,.5)}
.cd-console-head .dots{display:flex;gap:6px;margin-right:10px}
.cd-console-head .dots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.15)}
.cd-console-body{padding:18px 18px 22px;font-family:'JetBrains Mono','SF Mono',monospace;font-size:13px;line-height:1.7;min-height:340px}
.cd-console-line{display:flex;gap:10px;margin-bottom:5px;opacity:0;animation:cdLine .5s forwards}
.cd-console-line:nth-child(1){animation-delay:.3s}
.cd-console-line:nth-child(2){animation-delay:1s}
.cd-console-line:nth-child(3){animation-delay:1.6s}
.cd-console-line:nth-child(4){animation-delay:2.5s}
.cd-console-line:nth-child(5){animation-delay:3.2s}
.cd-console-line:nth-child(6){animation-delay:4.5s}
.cd-console-line .arrow{color:#F26B2B}
.cd-console-line .key{color:#7DD3FC}
.cd-console-line .ok{color:#4ADE80;font-weight:600}
.cd-console-line .muted{color:rgba(255,255,255,.4)}
.cd-console-line.live{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);font-family:Inter,sans-serif;font-size:13px;color:rgba(255,255,255,.85);align-items:center}
.cd-console-line.live .pulse{width:8px;height:8px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 0 #4ADE80;animation:pulseDot 1.6s infinite}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(74,222,128,.6)}70%{box-shadow:0 0 0 10px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
@keyframes cdLine{to{opacity:1}}

@media(max-width:900px){.cd-hero-wrap{grid-template-columns:1fr;gap:40px}.cd-hero-stats{grid-template-columns:1fr 1fr}}

/* ===== sections ===== */
.cd-section{padding:100px 0;position:relative}
.cd-wrap{max-width:1280px;margin:0 auto;padding:0 24px}
.cd-section.light{background:#fff;color:#1D2939}
.cd-section.alt{background:#F6F8FB;color:#1D2939}
.cd-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#F26B2B;background:rgba(242,107,43,.08);padding:5px 14px;border-radius:999px;margin-bottom:18px}
.cd-h2{font-size:clamp(1.8rem,3.6vw,2.65rem);font-weight:800;letter-spacing:-.025em;line-height:1.15;margin-bottom:18px;max-width:760px}
.cd-sub{font-size:1.05rem;color:#475467;line-height:1.65;max-width:640px;margin-bottom:48px}
.cd-section.dark .cd-sub{color:rgba(255,255,255,.65)}

/* ===== OEM strip ===== */
.cd-oem{background:#fff;color:#1D2939;padding:60px 0;border-top:1px solid #E4E7EC;border-bottom:1px solid #E4E7EC}
.cd-oem-head{text-align:center;margin-bottom:38px}
.cd-oem-head .label{font-size:12.5px;font-weight:700;color:#475467;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.cd-oem-head .sub{font-size:14px;color:#98A2B3}
.cd-oem-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:#E4E7EC;border:1px solid #E4E7EC;border-radius:14px;overflow:hidden}
.cd-oem-grid .cell{background:#fff;padding:24px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:120px;transition:background .25s}
.cd-oem-grid .cell:hover{background:#F6F8FB}
.cd-oem-grid .cell img{height:32px;max-width:100%;object-fit:contain;filter:grayscale(.2)}
.cd-oem-grid .cell .since{font-size:11px;font-weight:700;color:#0CAF60;letter-spacing:.04em;text-transform:uppercase}
@media(max-width:1100px){.cd-oem-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:600px){.cd-oem-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== Trainers ===== */
.cd-trainers{background:#fff;color:#1D2939;padding:110px 0}
.cd-trainers-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:60px;flex-wrap:wrap}
.cd-trainers-stats{display:flex;gap:32px;flex-wrap:wrap;margin:8px 0 38px;padding:18px 24px;background:#F6F8FB;border-left:3px solid #F26B2B;border-radius:8px}
.cd-trainers-stats .s{font-size:13px;color:#475467}
.cd-trainers-stats .s strong{display:block;font-size:1.45rem;font-weight:800;color:#0B2447;letter-spacing:-.02em;line-height:1}
.cd-trainers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.cd-trainer{background:#fff;border:1px solid #E4E7EC;border-radius:18px;overflow:hidden;transition:all .35s cubic-bezier(.4,0,.2,1);position:relative;display:flex;flex-direction:column}
.cd-trainer:hover{transform:translateY(-6px);box-shadow:0 24px 60px -20px rgba(16,24,40,.18);border-color:transparent}
.cd-trainer-photo{aspect-ratio:1/1;background:linear-gradient(135deg,#19376D,#0B2447);position:relative;overflow:hidden}
.cd-trainer-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;z-index:2}
.cd-trainer-photo .placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:rgba(255,255,255,.5);font-size:12px;font-weight:600;letter-spacing:.04em;text-align:center;padding:18px;line-height:1.5;z-index:1}
.cd-trainer-photo .placeholder .ico{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;margin-bottom:10px;font-size:18px}
.cd-trainer-photo .placeholder code{font-family:'JetBrains Mono','SF Mono',monospace;background:rgba(0,0,0,.3);padding:3px 8px;border-radius:4px;color:#FFA660;font-weight:500;margin-top:6px}
.cd-trainer-photo .oem-badge{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);padding:5px 11px;border-radius:999px;font-size:11px;font-weight:700;color:#0B2447;letter-spacing:.04em;text-transform:uppercase}
.cd-trainer-body{padding:22px 24px 24px}
.cd-trainer-body h3{font-size:1.15rem;font-weight:700;color:#1D2939;margin-bottom:2px}
.cd-trainer-body .role{font-size:13px;color:#475467;margin-bottom:14px}
.cd-trainer-stat{font-size:14.5px;color:#1D2939;font-weight:600;line-height:1.5;padding:14px 16px;background:#FFF1EB;border-radius:10px;border-left:3px solid #F26B2B;margin-bottom:14px}
.cd-trainer-verified{display:inline-flex;align-items:center;gap:6px;color:#0CAF60;font-size:12.5px;font-weight:600;letter-spacing:.01em}
.cd-trainer-verified svg{width:14px;height:14px;flex-shrink:0}
@media(max-width:900px){.cd-trainers-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cd-trainers-grid{grid-template-columns:1fr}}

/* ===== Case studies ===== */
.cd-cases{background:#070B10;color:#fff;padding:110px 0}
.cd-cases-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}
.cd-case{background:linear-gradient(180deg,#0F1722 0%,#0B1019 100%);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:32px;display:flex;flex-direction:column;gap:18px;transition:all .35s;position:relative;overflow:hidden}
.cd-case::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(242,107,43,.08),transparent 60%);opacity:0;transition:opacity .35s}
.cd-case:hover{transform:translateY(-4px);border-color:rgba(242,107,43,.3)}
.cd-case:hover::before{opacity:1}
.cd-case-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cd-case-logo{height:36px;display:flex;align-items:center}
.cd-case-logo .placeholder{padding:6px 14px;background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.2);border-radius:8px;font-size:12px;font-weight:600;color:rgba(255,255,255,.5);letter-spacing:.04em;text-transform:uppercase}
.cd-case-tag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#4ADE80;background:rgba(74,222,128,.08);padding:4px 10px;border-radius:999px}
.cd-case h3{font-size:1.4rem;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.cd-case .meta{font-size:13px;color:rgba(255,255,255,.5);display:flex;flex-wrap:wrap;gap:14px}
.cd-case .meta span{display:inline-flex;align-items:center;gap:6px}
.cd-case-metrics{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.06);border-radius:12px;overflow:hidden;margin-top:6px}
.cd-case-metrics .m{background:#0F1722;padding:18px 16px;text-align:left}
.cd-case-metrics .m .v{font-size:1.7rem;font-weight:800;color:#F26B2B;letter-spacing:-.02em;line-height:1}
.cd-case-metrics .m .k{font-size:11.5px;color:rgba(255,255,255,.55);margin-top:6px;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.cd-case-quote{font-size:14.5px;color:rgba(255,255,255,.78);font-style:italic;line-height:1.6;padding-top:16px;border-top:1px solid rgba(255,255,255,.06)}
.cd-case-quote .who{font-style:normal;font-size:12.5px;color:rgba(255,255,255,.45);margin-top:8px;font-weight:600}
.cd-case-cta{display:inline-flex;align-items:center;gap:6px;color:#F26B2B;font-size:13.5px;font-weight:600;text-decoration:none;margin-top:auto;transition:gap .25s}
.cd-case-cta:hover{gap:10px}
@media(max-width:1000px){.cd-cases-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}}

/* ===== TCO Calculator ===== */
.cd-tco{background:#fff;color:#1D2939;padding:110px 0}
.cd-tco-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:start}
.cd-tco-form{background:#F6F8FB;border:1px solid #E4E7EC;border-radius:18px;padding:32px}
.cd-tco-form label{display:block;font-size:13px;font-weight:700;color:#1D2939;margin-bottom:8px;letter-spacing:.02em}
.cd-tco-form .field{margin-bottom:24px}
.cd-tco-form input[type=range]{width:100%;-webkit-appearance:none;height:6px;background:#E4E7EC;border-radius:999px;outline:none}
.cd-tco-form input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#F26B2B;cursor:pointer;box-shadow:0 2px 8px rgba(242,107,43,.35)}
.cd-tco-form .range-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.cd-tco-form .range-row .v{font-size:1.5rem;font-weight:800;color:#F26B2B;letter-spacing:-.02em}
.cd-tco-form .range-row .lim{font-size:12px;color:#98A2B3}
.cd-tco-form select{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #E4E7EC;background:#fff;color:#1D2939;font-size:14px;font-family:inherit;font-weight:500}
.cd-tco-out{background:linear-gradient(135deg,#0B2447 0%,#19376D 100%);border-radius:18px;padding:36px;color:#fff;position:relative;overflow:hidden}
.cd-tco-out::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(242,107,43,.18),transparent 55%)}
.cd-tco-out>*{position:relative}
.cd-tco-out h4{font-size:13px;font-weight:700;color:rgba(255,255,255,.6);letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px}
.cd-tco-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.cd-tco-row:last-of-type{border:none}
.cd-tco-row .lbl{font-size:14.5px;color:rgba(255,255,255,.85)}
.cd-tco-row .val{font-size:1.05rem;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.cd-tco-row.total{padding-top:22px;margin-top:8px;border-top:1px solid rgba(255,255,255,.18)}
.cd-tco-row.total .lbl{font-size:15.5px;font-weight:600}
.cd-tco-row.total .val{font-size:1.6rem;color:#F26B2B}
.cd-tco-savings{margin-top:24px;padding:18px 22px;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.3);border-radius:12px;display:flex;align-items:center;gap:14px}
.cd-tco-savings .ico{width:44px;height:44px;border-radius:50%;background:rgba(74,222,128,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px}
.cd-tco-savings .txt strong{display:block;font-size:1.3rem;font-weight:800;color:#4ADE80;line-height:1}
.cd-tco-savings .txt span{font-size:13px;color:rgba(255,255,255,.7);margin-top:4px;display:block}
.cd-tco-cta{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}
.cd-tco-cta .btn-primary{padding:13px 24px;background:#F26B2B;color:#fff;border-radius:10px;font-weight:600;font-size:14px;text-decoration:none;border:none;cursor:pointer}
.cd-tco-cta .btn-primary:hover{background:#D85A1F}
.cd-tco-cta .btn-secondary{padding:13px 24px;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:10px;font-weight:600;font-size:14px;text-decoration:none}
.cd-tco-note{font-size:11.5px;color:rgba(255,255,255,.45);margin-top:14px;line-height:1.5}
@media(max-width:900px){.cd-tco-grid{grid-template-columns:1fr;gap:30px}}

/* ===== Guarantee ===== */
.cd-guar{background:#0B2447;color:#fff;padding:110px 0;position:relative;overflow:hidden}
.cd-guar::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at left top,rgba(242,107,43,.12),transparent 50%)}
.cd-guar-wrap{position:relative}
.cd-guar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.cd-guar-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:32px;backdrop-filter:blur(6px);transition:all .35s}
.cd-guar-card:hover{border-color:rgba(242,107,43,.5);transform:translateY(-4px);background:rgba(255,255,255,.07)}
.cd-guar-card .day{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:rgba(242,107,43,.15);color:#F26B2B;font-weight:800;font-size:18px;margin-bottom:18px}
.cd-guar-card h4{font-size:1.2rem;font-weight:700;margin-bottom:10px}
.cd-guar-card p{font-size:14.5px;color:rgba(255,255,255,.7);line-height:1.6}
.cd-guar-card .promise{margin-top:16px;font-size:13px;font-weight:600;color:#4ADE80}
@media(max-width:900px){.cd-guar-grid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}}

/* ===== Featured testimonial ===== */
.cd-test{background:#fff;color:#1D2939;padding:110px 0}
.cd-test-card{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center;background:linear-gradient(135deg,#FFF1EB 0%,#fff 60%);border:1px solid #E4E7EC;border-radius:24px;padding:48px;position:relative;overflow:hidden}
.cd-test-card::before{content:'"';position:absolute;top:-40px;right:30px;font-family:Georgia,serif;font-size:240px;color:#F26B2B;opacity:.08;line-height:1;font-weight:900}
.cd-test-photo{aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#19376D,#0B2447);position:relative;max-width:380px}
.cd-test-photo img{width:100%;height:100%;object-fit:cover;display:block}
.cd-test-photo .placeholder{height:100%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.4);font-size:13px;text-align:center;padding:20px;line-height:1.5;font-weight:600}
.cd-test-quote{font-size:1.45rem;font-weight:500;line-height:1.45;letter-spacing:-.01em;color:#1D2939;margin-bottom:32px}
.cd-test-byline{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cd-test-byline .who{font-weight:700;color:#1D2939}
.cd-test-byline .role{color:#475467;font-size:14px}
.cd-test-byline a{display:inline-flex;align-items:center;gap:6px;color:#0A66C2;font-size:13px;font-weight:600;text-decoration:none;padding:6px 12px;background:rgba(10,102,194,.08);border-radius:999px}
.cd-test-byline a:hover{background:rgba(10,102,194,.15)}
@media(max-width:900px){.cd-test-card{grid-template-columns:1fr;padding:32px}.cd-test-photo{max-width:240px}}

/* ===== Skill audit ===== */
.cd-audit{background:#F6F8FB;color:#1D2939;padding:110px 0}
.cd-audit-card{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;background:#fff;border-radius:24px;padding:56px;border:1px solid #E4E7EC;box-shadow:0 24px 60px -30px rgba(16,24,40,.15)}
.cd-audit ul{display:grid;gap:14px;margin:24px 0 32px}
.cd-audit ul li{display:flex;gap:12px;align-items:start;font-size:15px;color:#1D2939}
.cd-audit ul li .ck{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:#0CAF60;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:800;margin-top:2px}
.cd-audit-form{background:#0B2447;color:#fff;border-radius:18px;padding:36px}
.cd-audit-form h4{font-size:1.2rem;font-weight:700;margin-bottom:6px}
.cd-audit-form .sub{font-size:13.5px;color:rgba(255,255,255,.65);margin-bottom:24px}
.cd-audit-form .field{margin-bottom:14px}
.cd-audit-form input,.cd-audit-form select{width:100%;padding:13px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#fff;font-size:14px;font-family:inherit}
.cd-audit-form input::placeholder{color:rgba(255,255,255,.4)}
.cd-audit-form input:focus,.cd-audit-form select:focus{outline:none;border-color:#F26B2B;background:rgba(255,255,255,.1)}
.cd-audit-form button{width:100%;padding:15px;background:#F26B2B;color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;margin-top:8px}
.cd-audit-form button:hover{background:#D85A1F}
.cd-audit-form .legal{font-size:11.5px;color:rgba(255,255,255,.4);margin-top:12px;line-height:1.5}
@media(max-width:900px){.cd-audit-card{grid-template-columns:1fr;padding:32px}}

/* ===== Buyer tracks ===== */
.cd-tracks{background:#070B10;color:#fff;padding:110px 0}
.cd-tracks-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cd-track{background:linear-gradient(180deg,#0F1722 0%,#0B1019 100%);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:32px;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}
.cd-track:hover{border-color:#F26B2B;transform:translateY(-4px)}
.cd-track .role-tag{display:inline-block;padding:5px 12px;background:rgba(242,107,43,.12);color:#F26B2B;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px}
.cd-track h3{font-size:1.3rem;font-weight:700;margin-bottom:12px;line-height:1.3}
.cd-track p{font-size:14px;color:rgba(255,255,255,.6);line-height:1.6;margin-bottom:20px}
.cd-track ul{display:grid;gap:8px;margin-bottom:24px}
.cd-track ul li{font-size:13.5px;color:rgba(255,255,255,.78);padding-left:18px;position:relative}
.cd-track ul li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:#F26B2B}
.cd-track .more{display:inline-flex;align-items:center;gap:6px;color:#F26B2B;font-weight:600;font-size:13.5px;text-decoration:none}
.cd-track .more:hover{gap:10px}
@media(max-width:900px){.cd-tracks-grid{grid-template-columns:1fr}}

/* ===== Final CTA ===== */
.cd-final{background:linear-gradient(135deg,#F26B2B 0%,#D85A1F 100%);color:#fff;padding:90px 0;text-align:center}
.cd-final h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:800;margin-bottom:18px;letter-spacing:-.02em}
.cd-final p{font-size:1.1rem;color:rgba(255,255,255,.9);max-width:580px;margin:0 auto 32px}
.cd-final .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cd-final .ctas a{padding:15px 32px;border-radius:10px;font-weight:700;font-size:15px;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.cd-final .ctas .b1{background:#fff;color:#0B2447}
.cd-final .ctas .b1:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.2)}
.cd-final .ctas .b2{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.4)}
.cd-final .ctas .b2:hover{background:rgba(255,255,255,.25)}

/* ===== Products in Action ===== */
.cd-prods{background:#fff;color:#1D2939;padding:110px 0}
.cd-prods-head{text-align:center;margin-bottom:60px}
.cd-prods-head .cd-eyebrow{margin:0 auto 18px}
.cd-prods-head h2{margin:0 auto 18px}
.cd-prods-head p{margin:0 auto}
.cd-prod{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:90px}
.cd-prod:last-child{margin-bottom:0}
.cd-prod.flip{direction:rtl}
.cd-prod.flip>*{direction:ltr}
.cd-prod-copy h3{font-size:1.85rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-bottom:14px}
.cd-prod-copy>p{font-size:1.05rem;color:#475467;line-height:1.65;margin-bottom:24px}
.cd-prod-bens{display:grid;gap:14px;margin-bottom:28px}
.cd-prod-bens li{display:flex;gap:12px;align-items:start;font-size:14.5px;color:#1D2939;line-height:1.55}
.cd-prod-bens li .ck{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:#FFF1EB;color:#F26B2B;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;margin-top:1px}
.cd-prod-cta{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;background:#0B2447;color:#fff!important;border-radius:10px;font-weight:600;font-size:14px;text-decoration:none;transition:all .25s}
.cd-prod-cta:hover{background:#19376D;transform:translateY(-2px)}
.cd-prod-mock{background:#0F1722;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px -25px rgba(11,36,71,.25),0 0 0 1px rgba(11,36,71,.06)}
.cd-prod-mock .bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:#0B1019;border-bottom:1px solid rgba(255,255,255,.06)}
.cd-prod-mock .bar i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.15)}
.cd-prod-mock .bar .url{margin-left:14px;flex:1;font-size:11.5px;color:rgba(255,255,255,.4);font-family:'JetBrains Mono',monospace}

/* CloudLabs mock */
.mk-clab{padding:22px}
.mk-clab .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.mk-clab .row h5{font-size:14px;font-weight:700;color:#fff}
.mk-clab .pill{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;background:rgba(74,222,128,.12);color:#4ADE80;display:inline-flex;align-items:center;gap:6px}
.mk-clab .pill i{width:6px;height:6px;border-radius:50%;background:#4ADE80;box-shadow:0 0 8px #4ADE80;animation:pulseDot 1.6s infinite}
.mk-clab .clouds{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}
.mk-clab .cloud{padding:12px 8px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);text-align:center;font-size:11.5px;color:rgba(255,255,255,.7);font-weight:600}
.mk-clab .cloud.act{border-color:#F26B2B;background:rgba(242,107,43,.1);color:#F26B2B}
.mk-clab .progress{height:6px;background:rgba(255,255,255,.06);border-radius:999px;overflow:hidden;margin-bottom:8px}
.mk-clab .progress span{display:block;height:100%;background:linear-gradient(90deg,#F26B2B,#FFA660);width:0;animation:mkFill 4s ease-out infinite alternate}
@keyframes mkFill{from{width:0}to{width:88%}}
.mk-clab .meta{display:flex;justify-content:space-between;font-size:11.5px;color:rgba(255,255,255,.55);margin-bottom:18px}
.mk-clab .stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
.mk-clab .stat{padding:10px;border-radius:8px;background:rgba(255,255,255,.03)}
.mk-clab .stat .v{font-size:1.3rem;font-weight:800;color:#fff;line-height:1}
.mk-clab .stat .k{font-size:10.5px;color:rgba(255,255,255,.5);margin-top:4px;letter-spacing:.04em;text-transform:uppercase}

/* Voucher store mock */
.mk-vou{padding:18px;background:#fff;color:#1D2939}
.mk-vou .search{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#F6F8FB;border-radius:10px;border:1px solid #E4E7EC;font-size:13px;color:#98A2B3;margin-bottom:14px}
.mk-vou .search svg{flex-shrink:0;color:#98A2B3}
.mk-vou .filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.mk-vou .filt{padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:600;background:#F6F8FB;color:#475467;border:1px solid #E4E7EC}
.mk-vou .filt.act{background:#0B2447;color:#fff;border-color:#0B2447}
.mk-vou .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mk-vou .vcard{border:1px solid #E4E7EC;border-radius:10px;padding:14px;display:flex;justify-content:space-between;align-items:center;gap:10px;transition:all .25s}
.mk-vou .vcard:hover{border-color:#F26B2B;transform:translateY(-2px)}
.mk-vou .vcard img{height:24px;max-width:80px;object-fit:contain}
.mk-vou .vcard .stk{font-size:11px;font-weight:700;color:#0CAF60}
.mk-vou .vcard .stk.lo{color:#F4A825}
.mk-vou .vcard .price{font-size:12.5px;font-weight:700;color:#1D2939;margin-top:2px}
.mk-vou .vcard .name{font-size:11px;color:#475467;font-weight:600;line-height:1.3;margin-bottom:4px}
.mk-vou .live{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid #E4E7EC;font-size:11.5px;color:#475467}
.mk-vou .live i{width:7px;height:7px;border-radius:50%;background:#0CAF60;animation:pulseDot 1.6s infinite}

/* LMS mock */
.mk-lms{padding:22px}
.mk-lms h5{font-size:13px;font-weight:700;color:rgba(255,255,255,.55);letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px}
.mk-lms .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.mk-lms .stat{padding:14px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.mk-lms .stat .v{font-size:1.4rem;font-weight:800;color:#fff;line-height:1}
.mk-lms .stat .v.up{color:#4ADE80}
.mk-lms .stat .v.acc{color:#F26B2B}
.mk-lms .stat .k{font-size:10.5px;color:rgba(255,255,255,.5);margin-top:5px;letter-spacing:.04em;text-transform:uppercase}
.mk-lms .chart{height:60px;display:flex;align-items:flex-end;gap:5px;margin-bottom:18px;padding:0 4px}
.mk-lms .chart .b{flex:1;background:linear-gradient(180deg,#F26B2B,rgba(242,107,43,.3));border-radius:4px 4px 0 0;min-height:6px;transition:height .8s}
.mk-lms .roster{padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
.mk-lms .lr{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:rgba(255,255,255,.7);padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.mk-lms .lr:last-child{border:none}
.mk-lms .lr .nm{display:flex;align-items:center;gap:8px}
.mk-lms .lr .av{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#F26B2B,#FFA660);font-size:10px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center}
.mk-lms .lr .pct{font-weight:700;color:#fff;font-variant-numeric:tabular-nums}

@media(max-width:900px){.cd-prod{grid-template-columns:1fr;gap:30px;margin-bottom:60px}.cd-prod.flip{direction:ltr}}

/* ===== Hire-Train-Deploy ===== */
.cd-htd{background:linear-gradient(180deg,#070B10 0%,#0B1019 100%);color:#fff;padding:110px 0;position:relative;overflow:hidden}
.cd-htd::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at top right,rgba(242,107,43,.1),transparent 55%)}
.cd-htd-wrap{position:relative}
.cd-htd-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:60px}
.cd-htd-head h2{color:#fff}
.cd-htd-head .stat-box{background:rgba(255,255,255,.04);border:1px solid rgba(242,107,43,.3);border-radius:14px;padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cd-htd-head .stat-box .s .v{font-size:2rem;font-weight:800;color:#F26B2B;letter-spacing:-.02em;line-height:1}
.cd-htd-head .stat-box .s .k{font-size:12px;color:rgba(255,255,255,.6);margin-top:6px;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.cd-htd-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-bottom:36px}
.cd-htd-flow::before{content:'';position:absolute;left:8%;right:8%;top:36px;height:2px;background:linear-gradient(90deg,#F26B2B 0,#F26B2B 33%,rgba(255,255,255,.15) 33%,rgba(255,255,255,.15) 100%);background-size:200% 100%;animation:htdFlow 4s ease-in-out infinite}
@keyframes htdFlow{0%{background-position:100% 0}50%{background-position:0% 0}100%{background-position:-100% 0}}
.cd-htd-step{position:relative;padding:0 16px;text-align:center}
.cd-htd-step .num{width:72px;height:72px;border-radius:50%;background:#0F1722;border:2px solid rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;margin:0 auto 22px;position:relative;z-index:2;transition:all .35s}
.cd-htd-step:hover .num{border-color:#F26B2B;color:#F26B2B;transform:scale(1.05)}
.cd-htd-step h4{font-size:1.05rem;font-weight:700;margin-bottom:8px}
.cd-htd-step p{font-size:13px;color:rgba(255,255,255,.6);line-height:1.55}
.cd-htd-step .wk{display:inline-block;margin-top:12px;font-size:11px;font-weight:700;color:#F26B2B;letter-spacing:.06em;text-transform:uppercase}
.cd-htd-promise{display:flex;justify-content:center;align-items:center;gap:14px;padding:22px 32px;margin:0 auto;max-width:700px;background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.3);border-radius:14px;text-align:center}
.cd-htd-promise .ico{width:44px;height:44px;border-radius:50%;background:rgba(74,222,128,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:22px}
.cd-htd-promise .txt strong{display:block;font-size:1.1rem;font-weight:800;color:#4ADE80;line-height:1}
.cd-htd-promise .txt span{font-size:13.5px;color:rgba(255,255,255,.7);margin-top:4px;display:block}
@media(max-width:900px){.cd-htd-head{grid-template-columns:1fr}.cd-htd-flow{grid-template-columns:1fr 1fr;gap:32px 0}.cd-htd-flow::before{display:none}}
@media(max-width:600px){.cd-htd-flow{grid-template-columns:1fr}}

/* ===== Calendar strip ===== */
.cd-cal{background:#fff;color:#1D2939;padding:90px 0;border-top:1px solid #E4E7EC;border-bottom:1px solid #E4E7EC}
.cd-cal-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:36px;flex-wrap:wrap}
.cd-cal-head h2{font-size:1.65rem;font-weight:800;letter-spacing:-.02em}
.cd-cal-head .live{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:#0CAF60;font-weight:700}
.cd-cal-head .live i{width:8px;height:8px;border-radius:50%;background:#0CAF60;animation:pulseDot 1.6s infinite}
.cd-cal-rail{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.cd-cal-card{padding:18px;border:1px solid #E4E7EC;border-radius:14px;background:#fff;transition:all .25s;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:10px}
.cd-cal-card:hover{border-color:#F26B2B;transform:translateY(-3px);box-shadow:0 12px 30px -10px rgba(16,24,40,.1)}
.cd-cal-card .top{display:flex;justify-content:space-between;align-items:center}
.cd-cal-card img{height:24px;max-width:90px;object-fit:contain}
.cd-cal-card .seat{font-size:10.5px;font-weight:700;color:#F4A825;letter-spacing:.04em;text-transform:uppercase}
.cd-cal-card .seat.lo{color:#E03131}
.cd-cal-card h4{font-size:14px;font-weight:700;color:#1D2939;line-height:1.35}
.cd-cal-card .when{font-size:12.5px;color:#475467;display:flex;align-items:center;gap:6px}
.cd-cal-card .mode{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#475467;background:#F6F8FB;padding:3px 9px;border-radius:999px;font-weight:600;width:fit-content}
@media(max-width:1100px){.cd-cal-rail{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.cd-cal-rail{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.cd-cal-rail{grid-template-columns:1fr}}

/* ===== reveal ===== */
.cd-reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,0,.2,1),transform .8s cubic-bezier(.2,0,.2,1)}
.cd-reveal.in{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.cd-reveal{opacity:1;transform:none}}
</style>
<?php @include 'seo-head.php'; ?>
</head>
<body class="cd home-merged bnr">

<div class="demo-banner">
  DEMO PREVIEW · live homepage is unchanged
  <?php if(!$clean):?><a href="?clean=1">Hide REPLACE markers</a><?php else:?><a href="?">Show REPLACE markers</a><?php endif;?>
  <a href="/index.php">Back to live homepage</a>
</div>

<?php @include 'header1.php'; ?>

<!-- ============ HERO ============ -->
<section class="cd-hero">
  <div class="cd-hero-wrap">
    <div>
      <div class="cd-hero-eyebrow"><span class="dot"></span>The L&amp;D partner that earns the renewal</div>
      <h1>One contract. <span class="accent">Real trainers.</span><br>Renewals you can defend in board meetings.</h1>
      <p class="lede">Stop juggling five vendors. Synergific is the single accountable partner for enterprise upskilling — courses, hands-on cloud labs, exam vouchers, and named senior trainers your team will actually remember.</p>
      <div class="cd-hero-ctas">
        <a class="btn-accent" href="#audit">Get a free skill-gap audit
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
        </a>
        <a class="btn-ghost" href="#tco">Calculate your bundled savings</a>
      </div>
      <div class="cd-hero-stats">
        <div class="cd-stat">
          <div class="num" data-count="500">500+</div>
          <div class="lbl">Enterprises served across India &amp; APAC</div>
          <div class="src">FY24–FY26 client roster</div>
        </div>
        <div class="cd-stat">
          <div class="num">99.5%</div>
          <div class="lbl">CloudLabs uptime, 12-month rolling avg
            <span class="replace">REPLACE: real number + audit cadence</span>
          </div>
          <div class="src">Audited monthly · transparency report on request</div>
        </div>
        <div class="cd-stat">
          <div class="num">92%</div>
          <div class="lbl">Cert-pass rate across OEM tracks
            <span class="replace">REPLACE: real number + tracks counted</span>
          </div>
          <div class="src">FY25 cohorts &gt; 50 learners only</div>
        </div>
      </div>
    </div>

    <!-- Lab Console preview -->
    <div class="cd-console">
      <div class="cd-console-head">
        <div class="dots"><i></i><i></i><i></i></div>
        <span>synergific lab console — live preview</span>
      </div>
      <div class="cd-console-body">
        <div class="cd-console-line"><span class="arrow">›</span><span>$ <span class="key">lab provision</span> --track aws-cert-prep --learners 12</span></div>
        <div class="cd-console-line"><span class="muted">  ✓ environment template loaded · region ap-south-1</span></div>
        <div class="cd-console-line"><span class="muted">  ✓ 12 isolated AWS sandboxes</span> <span class="ok">deployed</span></div>
        <div class="cd-console-line"><span class="muted">  ✓ SSO + cost cap + auto-cleanup</span> <span class="ok">attached</span></div>
        <div class="cd-console-line"><span class="muted">  ✓ trainer Anil R · launch in</span> <span class="ok">52s</span></div>
        <div class="cd-console-line live"><span class="pulse"></span>23 enterprise sandboxes are live across AWS, Azure &amp; GCP right now.</div>
      </div>
    </div>
  </div>
</section>

<!-- ============ OEM "DIRECT SINCE" ============ -->
<section class="cd-oem">
  <div class="cd-wrap">
    <div class="cd-oem-head">
      <div class="label">OEM-direct partnerships, not reseller-of-a-reseller
        <span class="replace">REPLACE: confirm direct vs ATP/ATC for each</span>
      </div>
      <div class="sub">Lower pricing, real escalation paths, no broker tax.</div>
    </div>
    <div class="cd-oem-grid">
      <div class="cell"><img src="https://upload.wikimedia.org/wikipedia/commons/9/93/Amazon_Web_Services_Logo.svg" alt="AWS"><span class="since">Direct since 20XX <span class="replace">YEAR</span></span></div>
      <div class="cell"><img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Microsoft_Azure.svg" alt="Microsoft"><span class="since">Direct since 20XX <span class="replace">YEAR</span></span></div>
      <div class="cell"><img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Google_Cloud_logo.svg" alt="Google Cloud"><span class="since">Direct since 20XX <span class="replace">YEAR</span></span></div>
      <div class="cell"><img src="https://upload.wikimedia.org/wikipedia/commons/d/d8/Red_Hat_logo.svg" alt="Red Hat"><span class="since">Direct since 20XX <span class="replace">YEAR</span></span></div>
      <div class="cell"><img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Cisco_logo_blue_2016.svg" alt="Cisco"><span class="since">Direct since 20XX <span class="replace">YEAR</span></span></div>
      <div class="cell"><img src="https://upload.wikimedia.org/wikipedia/commons/4/4e/Oracle_logo.svg" alt="Oracle"><span class="since">Direct since 20XX <span class="replace">YEAR</span></span></div>
      <div class="cell"><img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" alt="SAP"><span class="since">Direct since 20XX <span class="replace">YEAR</span></span></div>
    </div>
  </div>
</section>

<!-- ============ TRAINER WALL ============ -->
<section class="cd-trainers cd-reveal">
  <div class="cd-wrap">
    <div class="cd-trainers-head">
      <div>
        <div class="cd-eyebrow">Meet the trainers</div>
        <h2 class="cd-h2">The product L&amp;D actually buys is the <em style="font-style:normal;color:#F26B2B">trainer.</em></h2>
        <p class="cd-sub">Senior practitioners with operating histories, not freelancer rotations. The names you'll see on the proposal are the people who'll show up on day one.</p>
      </div>
      <a href="/become-a-trainer.php" class="btn-link" style="color:#F26B2B;font-weight:600;text-decoration:none">See the full bench &rarr;</a>
    </div>

    <div class="cd-trainers-stats">
      <div class="s"><strong>10</strong>Senior trainers featured</div>
      <div class="s"><strong>230+ yrs</strong>Combined operating experience</div>
      <div class="s"><strong>40+</strong>Active OEM &amp; framework certifications</div>
      <div class="s"><strong>50,000+</strong>Learners trained across cohorts</div>
    </div>

    <?php
      // Real trainers — bios direct from Synergific roster.
      // NOTE: trainer LinkedIn URLs intentionally omitted to prevent competitor poaching.
      $trainers = [
        ['slug'=>'alex-rajan','name'=>'Alex Rajan P','role'=>'Master Trainer · Lean Six Sigma &amp; Process Excellence','badge'=>'Lean Six Sigma · 20 yrs','stat'=>'Lean Six Sigma Master Black Belt · IASSC-Certified Black Belt · 20 years embedding Six Sigma in corporate operations.'],
        ['slug'=>'chaitanya-gaajula','name'=>'Chaitanya R Gaajula','role'=>'Principal Trainer · Agentic AI, GenAI &amp; Multi-Cloud','badge'=>'GenAI · 24 yrs','stat'=>'17 active certifications including NVIDIA Agentic AI · AWS · Azure · GCP · OCI · Terraform · SRE — the deepest cross-cloud bench at Synergific.'],
        ['slug'=>'naveen-pn','name'=>'Naveen P.N.','role'=>'Senior Trainer · Data Engineering &amp; Cloud','badge'=>'Data Eng · 17 yrs','stat'=>'Delivered 950+ training batches · 30,000+ learners trained · Fabric, Azure &amp; Databricks Data Engineer certified.'],
        ['slug'=>'aranganathan','name'=>'Aranganathan Devarangam','role'=>'Microsoft Certified Trainer · Productivity &amp; Train-the-Trainer','badge'=>'Microsoft · 25 yrs','stat'=>'20,000+ professionals trained across BFSI, ITES &amp; manufacturing — Microsoft-certified across the productivity stack.'],
        ['slug'=>'seethalakshmi','name'=>'S. Seethalakshmi','role'=>'Senior Trainer · .NET, C#, SQL Server &amp; Angular','badge'=>'.NET full-stack · 14 yrs','stat'=>'.NET 4.6 · C# · ASP.NET MVC · Web API · SQL Server · Angular 12 — full-stack Microsoft track delivered to 14+ years of corporate cohorts.'],
        ['slug'=>'ravindra-putti','name'=>'Ravindra Putti','role'=>'Principal SAP Trainer · BW/4HANA &amp; Integration Suite','badge'=>'SAP · 24 yrs','stat'=>'SAP-Certified across BW/4HANA, S/4HANA System Admin, CPI, BO &amp; HANA · 24 yrs of SAP implementations and migrations.'],
        ['slug'=>'bipin-deshmukh','name'=>'Bipin Deshmukh','role'=>'Master Trainer · Project, Quality &amp; IT Service Management','badge'=>'PMP / ITIL · 40 yrs','stat'=>'PRINCE2 · ITIL 4/5 · Lead Auditor for ISO 9001, 14001, 27001, 20000-1 &amp; BS 25999 — 40 years across MNCs.'],
        ['slug'=>'kg-parameswaran','name'=>'K G Parameswaran','role'=>'Accredited International Trainer · ITIL 4 Master · PMP · SRE','badge'=>'ITIL · 24 yrs','stat'=>'ITIL 4 Master · SRE Practitioner · PMP — accredited by PeopleCert, APMG-UK, PMI USA &amp; ScrumStudy.'],
        ['slug'=>'ashwinee-kalkura','name'=>'Ashwinee Kalkura','role'=>'SAFe Program Consultant Trainer · Digital Transformation · IIM-B','badge'=>'SAFe SPCT · 25 yrs','stat'=>'One of fewer than 150 SAFe SPCTs globally · ICF-PCC Coach · 25 years across BFSI, Telecom &amp; Pharma board-level transformations.'],
        ['slug'=>'ajay-bhosal','name'=>'Ajay Bhosal','role'=>'Senior Trainer · Informatica, BI &amp; Data Management','badge'=>'Informatica · 18 yrs','stat'=>'Informatica Cloud Data Integration Certified · 9.5 yrs training PowerCenter, IDQ, MDM &amp; IICS · ex-onsite Daman Insurance, Abu Dhabi.'],
      ];
    ?>

    <div class="cd-trainers-grid">
      <?php foreach($trainers as $t): ?>
      <div class="cd-trainer">
        <div class="cd-trainer-photo">
          <img src="images/trainers/<?=$t['slug']?>.jpg" alt="<?=$t['name']?>" onerror="this.remove()">
          <div class="placeholder">
            <div class="ico">📷</div>
            Photo upload pending
            <code><?=$t['slug']?>.jpg</code>
          </div>
          <span class="oem-badge"><?=$t['badge']?></span>
        </div>
        <div class="cd-trainer-body">
          <h3><?=$t['name']?></h3>
          <div class="role"><?=$t['role']?></div>
          <div class="cd-trainer-stat"><?=$t['stat']?></div>
          <span class="cd-trainer-verified"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 12l2 2 4-4"/><circle cx="12" cy="12" r="10"/></svg>Synergific roster · verified</span>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<!-- ============ CASE STUDIES ============ -->
<section class="cd-cases cd-reveal" id="cases">
  <div class="cd-wrap">
    <div class="cd-eyebrow">Three transformations, not forty logos</div>
    <h2 class="cd-h2" style="color:#fff">Read the actual story. Not a logo. Not a banner. The numbers.</h2>
    <p class="cd-sub">Each case below was delivered, measured, renewed. Full case PDFs available on request under MNDA.</p>

    <div class="cd-cases-grid">

      <!-- Case 1 -->
      <div class="cd-case">
        <div class="cd-case-head">
          <div class="cd-case-logo">
            <div class="placeholder">CLIENT LOGO <span class="replace">REPLACE</span></div>
          </div>
          <span class="cd-case-tag">BFSI · Renewed 3×</span>
        </div>
        <h3>250 engineers on Azure AI in 8 weeks — board-mandated, audit-ready.</h3>
        <div class="meta">
          <span>Fortune-500 BFSI <span class="replace">CLIENT NAME</span></span>
          <span>·</span>
          <span>Azure · GenAI · Responsible AI</span>
        </div>
        <div class="cd-case-metrics">
          <div class="m"><div class="v">250</div><div class="k">Engineers trained</div></div>
          <div class="m"><div class="v">92%</div><div class="k">Cert pass · AI-102</div></div>
          <div class="m"><div class="v">8 wks</div><div class="k">From kickoff to cert</div></div>
          <div class="m"><div class="v">3×</div><div class="k">Quarter renewals</div></div>
        </div>
        <div class="cd-case-quote">
          "The audit committee asked for proof, not slides. Synergific gave us cohort-level pass data and trainer NPS that survived the review."
          <div class="who">— SVP, Technology Talent Council <span class="replace">QUOTE / NAME</span></div>
        </div>
        <a href="#" class="cd-case-cta">Read the full case &rarr;</a>
      </div>

      <!-- Case 2 -->
      <div class="cd-case">
        <div class="cd-case-head">
          <div class="cd-case-logo"><div class="placeholder">CLIENT LOGO</div></div>
          <span class="cd-case-tag">Retail Tech · Active</span>
        </div>
        <h3>Hire-Train-Deploy: 60 fresh hires shipped to billable in 4 weeks (vs. 12).</h3>
        <div class="meta">
          <span>Global Retail Tech</span>
          <span>·</span>
          <span>React · Java · AWS</span>
        </div>
        <div class="cd-case-metrics">
          <div class="m"><div class="v">60</div><div class="k">Hires deployed</div></div>
          <div class="m"><div class="v">4 wks</div><div class="k">Time-to-billable</div></div>
          <div class="m"><div class="v">96%</div><div class="k">Retention at 12 mo</div></div>
          <div class="m"><div class="v">₹2.1Cr</div><div class="k">Bench-cost saved</div></div>
        </div>
        <div class="cd-case-quote">
          "We pay only after deployment. That single line moved this from a vendor selection to a finance approval."
          <div class="who">— Director, Engineering Talent <span class="replace">QUOTE / NAME</span></div>
        </div>
        <a href="#" class="cd-case-cta">Read the full case &rarr;</a>
      </div>

      <!-- Case 3 -->
      <div class="cd-case">
        <div class="cd-case-head">
          <div class="cd-case-logo"><div class="placeholder">CLIENT LOGO</div></div>
          <span class="cd-case-tag">Pharma R&amp;D · Renewed 2×</span>
        </div>
        <h3>Replaced 5 vendors with one contract — 31% lower TCO, faster than a re-org.</h3>
        <div class="meta">
          <span>Top-10 Pharma</span>
          <span>·</span>
          <span>LMS · Vouchers · Labs · Trainers</span>
        </div>
        <div class="cd-case-metrics">
          <div class="m"><div class="v">−31%</div><div class="k">Bundled TCO</div></div>
          <div class="m"><div class="v">5→1</div><div class="k">Vendor consolidation</div></div>
          <div class="m"><div class="v">1,800</div><div class="k">Learners on platform</div></div>
          <div class="m"><div class="v">2×</div><div class="k">Renewals + expansion</div></div>
        </div>
        <div class="cd-case-quote">
          "One PO, one MSA, one SLA. Procurement got their day back."
          <div class="who">— Head of L&amp;D, India &amp; APAC <span class="replace">QUOTE / NAME</span></div>
        </div>
        <a href="#" class="cd-case-cta">Read the full case &rarr;</a>
      </div>

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

<!-- ============ PRODUCTS IN ACTION ============ -->
<section class="cd-prods cd-reveal">
  <div class="cd-wrap">
    <div class="cd-prods-head">
      <div class="cd-eyebrow">Products in action</div>
      <h2 class="cd-h2" style="margin-left:auto;margin-right:auto;text-align:center">Three products only we own. Competitors resell. We build.</h2>
      <p class="cd-sub" style="margin-left:auto;margin-right:auto;text-align:center">CloudLabs, the exam-voucher store, and the LMS were built to run our own training first. That's why they fit cohort delivery — not retro-fitted from infrastructure tools.</p>
    </div>

    <!-- 1. CloudLabs -->
    <div class="cd-prod">
      <div class="cd-prod-copy">
        <div class="cd-eyebrow" style="background:rgba(11,36,71,.06);color:#0B2447">CloudLabs</div>
        <h3>Spin up an enterprise sandbox in under 60 seconds. AWS, Azure, GCP, OpenShift.</h3>
        <p>Pre-configured environments with SSO, time-boxing, cost caps, instructor view and auto-cleanup. The provisioning we built for our own classrooms — now licensed to your L&amp;D team.</p>
        <ul class="cd-prod-bens">
          <li><span class="ck">✓</span><div><strong>Multi-cloud, single pane.</strong> AWS · Azure · GCP · OpenShift · Kubernetes, governed centrally.</div></li>
          <li><span class="ck">✓</span><div><strong>Cost cap on every sandbox.</strong> Hard ceiling per learner. No surprise cloud bills, ever.</div></li>
          <li><span class="ck">✓</span><div><strong>Cohort orchestration.</strong> Time-boxed access, instructor dashboard, attendance &amp; learner reports built in.</div></li>
          <li><span class="ck">✓</span><div><strong>SSO out of the box.</strong> SAML 2.0, OIDC, Azure AD, Okta — provisioned via SCIM.</div></li>
        </ul>
        <a href="/cloudlabs.php" class="cd-prod-cta">See CloudLabs live
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
        </a>
      </div>
      <div class="cd-prod-mock">
        <div class="bar"><i></i><i></i><i></i><span class="url">app.synergificsoftware.com/labs</span></div>
        <div class="mk-clab">
          <div class="row">
            <h5>Provisioning · AWS Solutions Architect lab</h5>
            <span class="pill"><i></i>LIVE · 23 sandboxes</span>
          </div>
          <div class="clouds">
            <div class="cloud act">AWS</div>
            <div class="cloud">Azure</div>
            <div class="cloud">GCP</div>
            <div class="cloud">K8s</div>
          </div>
          <div class="progress"><span></span></div>
          <div class="meta"><span>12 / 12 learners</span><span>Region ap-south-1</span><span>52s elapsed</span></div>
          <div class="stats">
            <div class="stat"><div class="v">&lt;60s</div><div class="k">Provision time</div></div>
            <div class="stat"><div class="v">99.5%</div><div class="k">Uptime · 12-mo</div></div>
            <div class="stat"><div class="v">₹0</div><div class="k">Bill overruns</div></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 2. Exam Vouchers Store -->
    <div class="cd-prod flip">
      <div class="cd-prod-copy">
        <div class="cd-eyebrow" style="background:rgba(11,36,71,.06);color:#0B2447">Exam vouchers store</div>
        <h3>1,100+ vouchers. 50+ OEMs. India's largest live voucher desk.</h3>
        <p>Live stock counter — not "we'll get back to you." Browse, filter and bulk-purchase across AWS, Microsoft, Google, Cisco, CompTIA, Oracle, Red Hat, SAP, VMware. Enterprise pricing baked in.</p>
        <ul class="cd-prod-bens">
          <li><span class="ck">✓</span><div><strong>Bulk discounts</strong> auto-applied at 25 / 100 / 500 voucher tiers.</div></li>
          <li><span class="ck">✓</span><div><strong>OEM-direct sourcing</strong> — no reseller markup, no broker tax.</div></li>
          <li><span class="ck">✓</span><div><strong>Validity tracking dashboard</strong> for L&amp;D managers — never let a voucher expire unused.</div></li>
          <li><span class="ck">✓</span><div><strong>GST-ready invoicing</strong>, single PO across all OEMs.</div></li>
        </ul>
        <a href="/exam-vouchers.php" class="cd-prod-cta">Browse the store
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
        </a>
      </div>
      <div class="cd-prod-mock" style="background:#fff">
        <div class="bar" style="background:#F6F8FB;border-bottom:1px solid #E4E7EC"><i style="background:#E4E7EC"></i><i style="background:#E4E7EC"></i><i style="background:#E4E7EC"></i><span class="url" style="color:#98A2B3">synergificsoftware.com/exam-vouchers</span></div>
        <div class="mk-vou">
          <div class="search"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>Search 1,100+ vouchers…</div>
          <div class="filters"><span class="filt act">All</span><span class="filt">AWS</span><span class="filt">Azure</span><span class="filt">CompTIA</span><span class="filt">Cisco</span><span class="filt">+46 more</span></div>
          <div class="grid">
            <div class="vcard"><div><img src="https://upload.wikimedia.org/wikipedia/commons/9/93/Amazon_Web_Services_Logo.svg" alt="AWS"><div class="name" style="margin-top:4px">AWS Solutions Architect Associate</div><div class="price">₹14,800</div></div><span class="stk">240 in stock</span></div>
            <div class="vcard"><div><img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Microsoft_Azure.svg" alt="Azure"><div class="name" style="margin-top:4px">AZ-104 Azure Administrator</div><div class="price">₹13,200</div></div><span class="stk">180 in stock</span></div>
            <div class="vcard"><div><img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Google_Cloud_logo.svg" alt="GCP"><div class="name" style="margin-top:4px">Google Cloud Architect</div><div class="price">₹16,500</div></div><span class="stk lo">42 in stock</span></div>
            <div class="vcard"><div><img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Cisco_logo_blue_2016.svg" alt="Cisco"><div class="name" style="margin-top:4px">CCNA 200-301</div><div class="price">₹24,800</div></div><span class="stk">96 in stock</span></div>
          </div>
          <div class="live"><i></i>Stock updated 38 seconds ago · 1,127 vouchers across 53 OEMs</div>
        </div>
      </div>
    </div>

    <!-- 3. LMS -->
    <div class="cd-prod">
      <div class="cd-prod-copy">
        <div class="cd-eyebrow" style="background:rgba(11,36,71,.06);color:#0B2447">Learner &amp; manager LMS</div>
        <h3>The dashboard your CHRO will actually open.</h3>
        <p>Cohort-level pass rates, trainer NPS, attendance heatmaps, audit-ready exports. Built for QBR defence, not for compliance check-boxes.</p>
        <ul class="cd-prod-bens">
          <li><span class="ck">✓</span><div><strong>Manager view by default.</strong> Heat-maps, drop-off alerts, cohort comparisons in one screen.</div></li>
          <li><span class="ck">✓</span><div><strong>Audit-ready exports</strong> — SOC-2, ISO 9001 evidence packs in one click.</div></li>
          <li><span class="ck">✓</span><div><strong>Skills Passport</strong>: completed paths flag retention &amp; promotion eligibility.</div></li>
          <li><span class="ck">✓</span><div><strong>SCORM &amp; xAPI</strong> in/out — bring content, take data with you.</div></li>
        </ul>
        <a href="#audit" class="cd-prod-cta">Book a manager-view walkthrough
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
        </a>
      </div>
      <div class="cd-prod-mock">
        <div class="bar"><i></i><i></i><i></i><span class="url">lms.synergificsoftware.com/dashboard</span></div>
        <div class="mk-lms">
          <h5>Cohort: Azure AI · 250 engineers · BFSI client</h5>
          <div class="stats">
            <div class="stat"><div class="v acc">92%</div><div class="k">Cert pass rate</div></div>
            <div class="stat"><div class="v up">8.6</div><div class="k">Trainer NPS</div></div>
            <div class="stat"><div class="v">94%</div><div class="k">Attendance</div></div>
          </div>
          <h5>Weekly progress</h5>
          <div class="chart">
            <div class="b" style="height:35%"></div>
            <div class="b" style="height:48%"></div>
            <div class="b" style="height:55%"></div>
            <div class="b" style="height:62%"></div>
            <div class="b" style="height:71%"></div>
            <div class="b" style="height:78%"></div>
            <div class="b" style="height:85%"></div>
            <div class="b" style="height:92%"></div>
          </div>
          <h5>Top performers</h5>
          <div class="roster">
            <div class="lr"><div class="nm"><span class="av">RK</span>R. Kumar</div><span class="pct">98%</span></div>
            <div class="lr"><div class="nm"><span class="av">SP</span>S. Patel</div><span class="pct">96%</span></div>
            <div class="lr"><div class="nm"><span class="av">AM</span>A. Menon</div><span class="pct">94%</span></div>
          </div>
        </div>
      </div>
    </div>

  </div>
</section>

<!-- ============ HIRE-TRAIN-DEPLOY ============ -->
<section class="cd-htd cd-reveal">
  <div class="cd-wrap cd-htd-wrap">
    <div class="cd-htd-head">
      <div>
        <div class="cd-eyebrow">Hire-Train-Deploy</div>
        <h2 class="cd-h2">Stop paying engineers to learn. Pay them after they ship.</h2>
        <p class="cd-sub" style="color:rgba(255,255,255,.7);margin-bottom:0">We source, train and deploy job-ready engineers on your stack. You pay only after they're billable. Time-to-billable from 12 weeks down to 4.</p>
      </div>
      <div class="stat-box">
        <div class="s"><div class="v">4 wks</div><div class="k">Time-to-billable</div></div>
        <div class="s"><div class="v">96%</div><div class="k">Retention · 12 mo</div></div>
        <div class="s"><div class="v">₹0</div><div class="k">Paid before deploy</div></div>
        <div class="s"><div class="v">60+</div><div class="k">Engineers shipped Q1</div></div>
      </div>
    </div>

    <div class="cd-htd-flow">
      <div class="cd-htd-step">
        <div class="num">1</div>
        <h4>Source</h4>
        <p>Targeted sourcing on your stack &amp; seniority profile. Pre-screened on aptitude + foundational tech.</p>
        <span class="wk">Week 0–1</span>
      </div>
      <div class="cd-htd-step">
        <div class="num">2</div>
        <h4>Train</h4>
        <p>Live trainers + CloudLabs sandboxes on your actual stack. Daily code reviews, weekly cert milestones.</p>
        <span class="wk">Week 1–4</span>
      </div>
      <div class="cd-htd-step">
        <div class="num">3</div>
        <h4>Assess</h4>
        <p>Project-based assessments, hiring-manager interviews. Only candidates who clear your bar move forward.</p>
        <span class="wk">Week 4</span>
      </div>
      <div class="cd-htd-step">
        <div class="num">4</div>
        <h4>Deploy</h4>
        <p>Engineer joins your team, billable from day one. Conversion to FTE at 12 months at zero markup.</p>
        <span class="wk">Week 4 onward</span>
      </div>
    </div>

    <div class="cd-htd-promise">
      <div class="ico">🛡️</div>
      <div class="txt"><strong>Pay only after deployment.</strong><span>If the engineer doesn't clear your hiring bar, you don't pay. Written into the MSA, not the marketing page.</span></div>
    </div>
  </div>
</section>

<!-- ============ LIVE TRAINING CALENDAR ============ -->
<section class="cd-cal cd-reveal">
  <div class="cd-wrap">
    <div class="cd-cal-head">
      <div>
        <div class="cd-eyebrow">Next 5 batches starting</div>
        <h2>Public schedule · open enrolment</h2>
      </div>
      <span class="live"><i></i>Live · seats update in real time</span>
    </div>

    <div class="cd-cal-rail">
      <a href="/training-calendar.php" class="cd-cal-card">
        <div class="top"><img src="https://upload.wikimedia.org/wikipedia/commons/9/93/Amazon_Web_Services_Logo.svg" alt="AWS"><span class="seat lo">3 seats left</span></div>
        <h4>AWS Solutions Architect Associate</h4>
        <div class="when">📅 Mon, May 12 · 9 AM IST · 5 days</div>
        <span class="mode">🟢 Live virtual</span>
        <span class="replace">REPLACE: pull from training-calendar.php</span>
      </a>
      <a href="/training-calendar.php" class="cd-cal-card">
        <div class="top"><img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Microsoft_Azure.svg" alt="Azure"><span class="seat">12 seats left</span></div>
        <h4>AZ-104 Azure Administrator</h4>
        <div class="when">📅 Mon, May 19 · 9 AM IST · 4 days</div>
        <span class="mode">🟢 Live virtual</span>
      </a>
      <a href="/training-calendar.php" class="cd-cal-card">
        <div class="top"><img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Google_Cloud_logo.svg" alt="GCP"><span class="seat">8 seats left</span></div>
        <h4>GCP Professional Cloud Architect</h4>
        <div class="when">📅 Sat, May 24 · 10 AM IST · weekend</div>
        <span class="mode">🏢 Bengaluru classroom</span>
      </a>
      <a href="/training-calendar.php" class="cd-cal-card">
        <div class="top"><img src="https://upload.wikimedia.org/wikipedia/commons/d/d8/Red_Hat_logo.svg" alt="Red Hat"><span class="seat lo">5 seats left</span></div>
        <h4>OpenShift DO288 + EX280</h4>
        <div class="when">📅 Mon, Jun 02 · 9 AM IST · 5 days</div>
        <span class="mode">🟢 Live virtual</span>
      </a>
      <a href="/training-calendar.php" class="cd-cal-card">
        <div class="top"><span style="font-weight:800;color:#0B2447;font-size:13px">CKA · CKAD</span><span class="seat">15 seats left</span></div>
        <h4>Kubernetes Administrator + Developer</h4>
        <div class="when">📅 Mon, Jun 09 · 9 AM IST · 6 days</div>
        <span class="mode">🟢 Live virtual</span>
      </a>
    </div>

    <div style="text-align:center;margin-top:32px"><a href="/training-calendar.php" style="display:inline-flex;align-items:center;gap:8px;color:#F26B2B;font-weight:700;font-size:14px;text-decoration:none">View full calendar (47 batches scheduled) &rarr;</a></div>
  </div>
</section>

<!-- ============ TCO CALCULATOR ============ -->
<section class="cd-tco cd-reveal" id="tco">
  <div class="cd-wrap">
    <div class="cd-eyebrow">Bundled TCO calculator</div>
    <h2 class="cd-h2">What 5 vendors cost you. What 1 vendor costs you. CFO-readable.</h2>
    <p class="cd-sub">Type your team size and cert path. The numbers below update live. Take the screenshot to your CFO.</p>

    <div class="cd-tco-grid">
      <div class="cd-tco-form">
        <div class="field">
          <div class="range-row">
            <label>Engineers in cohort</label>
            <span class="v" id="tcoEngVal">100</span>
          </div>
          <input type="range" id="tcoEng" min="10" max="500" step="10" value="100">
          <div class="range-row" style="margin-top:6px"><span class="lim">10</span><span class="lim">500</span></div>
        </div>
        <div class="field">
          <label for="tcoPath">Cert path</label>
          <select id="tcoPath">
            <option value="aws" data-base="42000">AWS Solutions Architect Associate</option>
            <option value="az" data-base="38000">Azure Administrator + AI-102</option>
            <option value="gcp" data-base="44000">GCP Professional Cloud Architect</option>
            <option value="k8s" data-base="36000">Kubernetes CKA + CKAD</option>
            <option value="sec" data-base="52000">CISSP / Cloud Security</option>
          </select>
        </div>
        <div class="field">
          <label>Includes</label>
          <div style="display:flex;flex-wrap:wrap;gap:8px">
            <span style="padding:6px 12px;background:#fff;border:1px solid #E4E7EC;border-radius:999px;font-size:12.5px;font-weight:600">Trainer</span>
            <span style="padding:6px 12px;background:#fff;border:1px solid #E4E7EC;border-radius:999px;font-size:12.5px;font-weight:600">CloudLabs</span>
            <span style="padding:6px 12px;background:#fff;border:1px solid #E4E7EC;border-radius:999px;font-size:12.5px;font-weight:600">Voucher</span>
            <span style="padding:6px 12px;background:#fff;border:1px solid #E4E7EC;border-radius:999px;font-size:12.5px;font-weight:600">LMS access</span>
            <span style="padding:6px 12px;background:#fff;border:1px solid #E4E7EC;border-radius:999px;font-size:12.5px;font-weight:600">Assessment</span>
          </div>
        </div>
      </div>

      <div class="cd-tco-out">
        <h4>Five-vendor scenario</h4>
        <div class="cd-tco-row"><span class="lbl">Trainer / instructor agency</span><span class="val" id="v1">—</span></div>
        <div class="cd-tco-row"><span class="lbl">CloudLabs vendor</span><span class="val" id="v2">—</span></div>
        <div class="cd-tco-row"><span class="lbl">Voucher reseller markup</span><span class="val" id="v3">—</span></div>
        <div class="cd-tco-row"><span class="lbl">LMS platform fee</span><span class="val" id="v4">—</span></div>
        <div class="cd-tco-row"><span class="lbl">Assessments / proctoring</span><span class="val" id="v5">—</span></div>
        <div class="cd-tco-row total"><span class="lbl">Total (5 vendors)</span><span class="val" id="vT">—</span></div>

        <div class="cd-tco-savings">
          <div class="ico">💰</div>
          <div class="txt"><strong id="savings">—</strong><span>saved with Synergific bundled contract <span id="savingsPct">—</span></span></div>
        </div>

        <div class="cd-tco-cta">
          <a href="#audit" class="btn-primary">Get an itemised quote</a>
          <button type="button" class="btn-secondary" onclick="window.print()">Save as PDF</button>
        </div>
        <div class="cd-tco-note">Indicative pricing using FY25 published list rates of leading vendors. Excludes travel and bespoke content. Replace with audited rate-card on go-live. <span class="replace">REPLACE: real rates / disclaimer</span></div>
      </div>
    </div>
  </div>
</section>

<!-- ============ GUARANTEE ============ -->
<section class="cd-guar cd-reveal">
  <div class="cd-wrap cd-guar-wrap">
    <div class="cd-eyebrow">Trainer Match Guarantee</div>
    <h2 class="cd-h2" style="color:#fff">Three days. Zero risk. Switch or refund.</h2>
    <p class="cd-sub" style="color:rgba(255,255,255,.7)">If the trainer isn't right for your team, we replace them — or you walk away. The clause is in the MSA, not the marketing page.</p>

    <div class="cd-guar-grid">
      <div class="cd-guar-card">
        <div class="day">D1</div>
        <h4>Day-1 NPS &lt; 7</h4>
        <p>End-of-day rating below 7 triggers an automatic review. We have a backup trainer briefed and ready before the second session begins.</p>
        <div class="promise">→ Replacement trainer briefed by Day-2 morning</div>
      </div>
      <div class="cd-guar-card">
        <div class="day">D2</div>
        <h4>Day-2 still &lt; 7</h4>
        <p>Replacement runs Day-2. If learner NPS hasn't crossed 7, you can swap to a third trainer at zero cost or pause delivery.</p>
        <div class="promise">→ Free swap, or pause without penalty</div>
      </div>
      <div class="cd-guar-card">
        <div class="day">D3</div>
        <h4>Day-3 still &lt; 7</h4>
        <p>Full pro-rata refund for unused days. No exit clause negotiation. No vendor playbook. The MSA bakes this in on signing.</p>
        <div class="promise">→ Full refund, written into the MSA</div>
      </div>
    </div>
  </div>
</section>

<!-- ============ FEATURED TESTIMONIAL ============ -->
<section class="cd-test cd-reveal">
  <div class="cd-wrap">
    <div class="cd-test-card">
      <div class="cd-test-photo">
        <div class="placeholder">REPLACE: L&amp;D head photo<br>(square, 600×600)<br>+ written permission to publish</div>
      </div>
      <div>
        <div class="cd-eyebrow" style="margin-bottom:18px">Featured customer voice</div>
        <p class="cd-test-quote">"We replaced four vendors with Synergific in one quarter. The trainer wall on their proposals isn't marketing — those are the people who actually showed up. That alone closed it for our procurement team."</p>
        <div class="cd-test-byline">
          <div>
            <div class="who">Reema Sharma <span class="replace">NAME</span></div>
            <div class="role">Head of L&amp;D · Top-10 Indian Bank <span class="replace">TITLE / COMPANY</span></div>
          </div>
          <a href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>Verify on LinkedIn</a>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ============ SKILL AUDIT LEAD MAGNET ============ -->
<section class="cd-audit cd-reveal" id="audit">
  <div class="cd-wrap">
    <div class="cd-audit-card">
      <div>
        <div class="cd-eyebrow">Free Team Skill Audit</div>
        <h2 class="cd-h2">A 30-minute call. A 4-page report. The report <em style="font-style:normal;color:#F26B2B">is</em> the SOW.</h2>
        <p class="cd-sub" style="margin-bottom:0">No pitch deck. We map your team against the cert framework you care about (AWS, Azure, GCP, K8s, GenAI, Cyber). You get a written gap analysis with named upskilling paths, expected pass rates, and indicative pricing. Yours to keep, even if you go elsewhere.</p>
        <ul>
          <li><span class="ck">✓</span><span><strong>Skill matrix:</strong> heat-map of your team vs. target cert profile</span></li>
          <li><span class="ck">✓</span><span><strong>Bench-cost calc:</strong> rupee impact of the current gap, conservatively modelled</span></li>
          <li><span class="ck">✓</span><span><strong>3 path options:</strong> fast (12 wk) · standard (16 wk) · cohort-staggered</span></li>
          <li><span class="ck">✓</span><span><strong>Sample roster:</strong> the actual trainers we'd assign, with availability windows</span></li>
        </ul>
      </div>
      <form class="cd-audit-form" onsubmit="event.preventDefault();alert('Demo only — wire to /enroll_lead.php on go-live');">
        <h4>Get your audit</h4>
        <div class="sub">No sales call until you read the report.</div>
        <div class="field"><input type="text" placeholder="Full name" required></div>
        <div class="field"><input type="email" placeholder="Work email" required></div>
        <div class="field"><input type="text" placeholder="Company" required></div>
        <div class="field">
          <select required>
            <option value="">Team size</option>
            <option>10–25 engineers</option>
            <option>25–100 engineers</option>
            <option>100–500 engineers</option>
            <option>500+ engineers</option>
          </select>
        </div>
        <div class="field">
          <select required>
            <option value="">Primary cert focus</option>
            <option>AWS</option><option>Azure</option><option>GCP</option>
            <option>Kubernetes / SRE</option><option>GenAI / LLMOps</option>
            <option>Cybersecurity</option><option>Data &amp; BI</option>
          </select>
        </div>
        <button type="submit">Send me the audit →</button>
        <div class="legal">We'll reply within 1 business day. No marketing list. No retargeting pixel — you can verify in DevTools.</div>
      </form>
    </div>
  </div>
</section>

<!-- ============ BUYER TRACKS ============ -->
<section class="cd-tracks cd-reveal">
  <div class="cd-wrap">
    <div class="cd-eyebrow">Talk to us in your language</div>
    <h2 class="cd-h2" style="color:#fff">L&amp;D, Engineering, or Procurement — pick the door that fits your KPIs.</h2>

    <div class="cd-tracks-grid">

      <div class="cd-track">
        <span class="role-tag">If you're L&amp;D</span>
        <h3>Renew with proof, not promises.</h3>
        <p>Cohort-level pass-rate dashboards, NPS by trainer, audit-ready exports. Defensible at every QBR.</p>
        <ul>
          <li>Live trainer-NPS dashboard</li>
          <li>Cert pass-rate by cohort &amp; track</li>
          <li>Skills Passport (retention play)</li>
          <li>Annual learning calendar</li>
        </ul>
        <a href="#" class="more">See the L&amp;D playbook &rarr;</a>
      </div>

      <div class="cd-track">
        <span class="role-tag">If you're Engineering</span>
        <h3>Get billable engineers faster.</h3>
        <p>Hire-Train-Deploy with pay-on-deploy commercials. Time-to-billable from 12 weeks to 4 weeks.</p>
        <ul>
          <li>Pre-built sandboxes for 18 stacks</li>
          <li>Live coding labs with cost caps</li>
          <li>Pay-after-deploy commercials</li>
          <li>96% retention at 12 months</li>
        </ul>
        <a href="#" class="more">See the engineering proof &rarr;</a>
      </div>

      <div class="cd-track">
        <span class="role-tag">If you're Procurement</span>
        <h3>One MSA. One PO. One SLA.</h3>
        <p>Replace 5 vendors with one accountable partner. Bundled-TCO savings audited per quarter.</p>
        <ul>
          <li>OEM-direct (no broker tax)</li>
          <li>ISO 9001:2015 + ISO 10004:2018</li>
          <li>Quarterly TCO transparency report</li>
          <li>India-domiciled · GST-ready</li>
        </ul>
        <a href="#" class="more">See the procurement pack &rarr;</a>
      </div>

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

<!-- ============ FINAL CTA ============ -->
<section class="cd-final">
  <div class="cd-wrap">
    <h2>Ready to defend your next L&amp;D renewal in front of the board?</h2>
    <p>Book a 30-minute audit. Walk away with a written report and named trainers. No deck. No pitch.</p>
    <div class="ctas">
      <a class="b1" href="#audit">Get the free audit
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
      </a>
      <a class="b2" href="#tco">Try the TCO calculator</a>
    </div>
  </div>
</section>

<?php @include 'footer.php'; ?>

<script>
// Reveal on scroll
(function(){
  if(!('IntersectionObserver' in window))return;
  const io=new IntersectionObserver((es)=>es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}}),{threshold:.15});
  document.querySelectorAll('.cd-reveal').forEach(el=>io.observe(el));
})();

// Header scrolled state
(function(){
  const h=document.querySelector('.site-header');
  if(!h)return;
  const upd=()=>h.classList.toggle('scrolled',window.scrollY>40);
  upd();window.addEventListener('scroll',upd,{passive:true});
})();

// TCO calculator
(function(){
  const eng=document.getElementById('tcoEng');
  const path=document.getElementById('tcoPath');
  const engVal=document.getElementById('tcoEngVal');
  if(!eng||!path)return;
  const fmt=v=>'₹'+(v>=1e7?(v/1e7).toFixed(2)+' Cr':v>=1e5?(v/1e5).toFixed(2)+' L':v.toLocaleString('en-IN'));
  const els={v1:document.getElementById('v1'),v2:document.getElementById('v2'),v3:document.getElementById('v3'),v4:document.getElementById('v4'),v5:document.getElementById('v5'),vT:document.getElementById('vT'),savings:document.getElementById('savings'),savingsPct:document.getElementById('savingsPct')};
  function calc(){
    const n=+eng.value;
    const base=+path.options[path.selectedIndex].dataset.base;
    engVal.textContent=n;
    // 5-vendor breakdown — illustrative ratios of base per learner
    const trainer=Math.round(base*0.40*n);
    const labs=Math.round(base*0.18*n);
    const voucher=Math.round(base*0.30*n*1.18); // reseller markup
    const lms=Math.round(base*0.06*n+150000);
    const assess=Math.round(base*0.06*n);
    const total=trainer+labs+voucher+lms+assess;
    const bundled=Math.round(total*0.69); // 31% discount
    const saved=total-bundled;
    els.v1.textContent=fmt(trainer);
    els.v2.textContent=fmt(labs);
    els.v3.textContent=fmt(voucher);
    els.v4.textContent=fmt(lms);
    els.v5.textContent=fmt(assess);
    els.vT.textContent=fmt(total);
    els.savings.textContent=fmt(saved)+' saved';
    els.savingsPct.textContent='(~'+Math.round(saved/total*100)+'% lower TCO)';
  }
  eng.addEventListener('input',calc);
  path.addEventListener('change',calc);
  calc();
})();
</script>
</body>
</html>
