<?php
require_once 'config.php';

// -- Handle Patient Modal Login --
$p_errors = [];
if ($_SERVER['REQUEST_METHOD']==='POST' && isset($_POST['patient_modal_login'])) {
    $p_email = clean($_POST['p_email'] ?? '');
    $p_pass  = $_POST['p_password'] ?? '';
    if (empty($p_email) || empty($p_pass)) {
        $p_errors[] = 'Email and password required.';
    } else {
        $s = $conn->prepare("SELECT id,full_name,email,password FROM patients WHERE email=?");
        $s->bind_param('s', $p_email);
        $s->execute();
        $pat = $s->get_result()->fetch_assoc();
        if ($pat && password_verify($p_pass, $pat['password'])) {
            $_SESSION['patient_id']    = $pat['id'];
            $_SESSION['patient_name']  = $pat['full_name'];
            $_SESSION['patient_email'] = $pat['email'];
            header('Location: ' . SITE_URL . '/patient/dashboard.php');
            exit;
        }
        $p_errors[] = 'Invalid email or password.';
    }
}

$specializations = $conn->query("SELECT id, name FROM specializations WHERE is_active=1 ORDER BY name")->fetch_all(MYSQLI_ASSOC);

// -- Handle Doctor Register Modal --
$dr_errors = [];
$dr_old = [];
if ($_SERVER['REQUEST_METHOD']==='POST' && isset($_POST['doctor_modal_register'])) {
    $dr_old['full_name']        = clean($_POST['dr_full_name'] ?? '');
    $dr_old['email']            = clean($_POST['dr_email'] ?? '');
    $dr_old['phone']            = clean($_POST['dr_phone'] ?? '');
    $dr_old['gender']           = clean($_POST['dr_gender'] ?? '');
    $dr_old['pmc_license']      = clean($_POST['dr_pmc'] ?? '');
    $dr_old['specialization']   = (int)($_POST['dr_specialization'] ?? 0);
    $dr_old['qualification']    = clean($_POST['dr_qualification'] ?? '');
    $dr_old['experience']       = (int)($_POST['dr_experience'] ?? 0);
    $dr_old['consultation_fee'] = (float)($_POST['dr_fee'] ?? 0);
    $dr_old['city']             = clean($_POST['dr_city'] ?? '');
    $dr_old['clinic_name']      = clean($_POST['dr_clinic'] ?? '');
    $dr_pass  = $_POST['dr_password'] ?? '';
    $dr_pass2 = $_POST['dr_password2'] ?? '';

    if (empty($dr_old['full_name']))                               $dr_errors[] = 'Full name is required.';
    if (!filter_var($dr_old['email'], FILTER_VALIDATE_EMAIL))      $dr_errors[] = 'Enter a valid email.';
    if (strlen($dr_old['phone']) < 10)                             $dr_errors[] = 'Enter a valid phone number.';
    if (empty($dr_old['pmc_license']))                             $dr_errors[] = 'PMC License Number is required.';
    if (empty($dr_old['specialization']))                          $dr_errors[] = 'Select a specialization.';
    if (empty($dr_old['qualification']))                           $dr_errors[] = 'Qualification is required.';
    if ($dr_old['consultation_fee'] <= 0)                          $dr_errors[] = 'Enter consultation fee.';
    if (strlen($dr_pass) < 8)                                      $dr_errors[] = 'Password must be at least 8 characters.';
    if (!preg_match('/[A-Z]/', $dr_pass))                          $dr_errors[] = 'Password needs at least 1 uppercase letter.';
    if (!preg_match('/[0-9]/', $dr_pass))                          $dr_errors[] = 'Password needs at least 1 number.';
    if ($dr_pass !== $dr_pass2)                                    $dr_errors[] = 'Passwords do not match.';

    $dr_files = [];
    foreach (['dr_doc_license'=>'PMC License doc','dr_doc_cnic'=>'CNIC copy'] as $fk => $flabel) {
        if (empty($_FILES[$fk]['name'])) {
            $dr_errors[] = $flabel . ' is required.';
        } else {
            $dr_files[$fk] = $_FILES[$fk];
        }
    }
    foreach (['dr_doc_qualification','dr_profile_photo'] as $fk) {
        if (!empty($_FILES[$fk]['name'])) $dr_files[$fk] = $_FILES[$fk];
    }

    if (empty($dr_errors)) {
        $chk = $conn->prepare("SELECT id FROM doctors WHERE email=? OR pmc_license_number=?");
        $chk->bind_param('ss', $dr_old['email'], $dr_old['pmc_license']); $chk->execute();
        if ($chk->get_result()->num_rows > 0) $dr_errors[] = 'Email or PMC license already registered.';
    }

    if (empty($dr_errors)) {
        $upload_dir = UPLOAD_PATH . 'doctors/';
        if (!is_dir($upload_dir)) mkdir($upload_dir, 0755, true);
        $saved = [];
        foreach ($dr_files as $fk => $file) {
            $ext = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
            if (!in_array($ext, ['jpg','jpeg','png','pdf'])) continue;
            $fname = $fk . '_' . time() . '_' . bin2hex(random_bytes(4)) . '.' . $ext;
            if (move_uploaded_file($file['tmp_name'], $upload_dir . $fname)) {
                $saved[$fk] = 'uploads/doctors/' . $fname;
            }
        }
        $hash        = password_hash($dr_pass, PASSWORD_BCRYPT);
        $doc_lic     = $saved['dr_doc_license'] ?? null;
        $doc_qual    = $saved['dr_doc_qualification'] ?? null;
        $doc_cnic    = $saved['dr_doc_cnic'] ?? null;
        $photo       = $saved['dr_profile_photo'] ?? null;
        $spec_id     = $dr_old['specialization'];
        $exp         = $dr_old['experience'];
        $fee         = $dr_old['consultation_fee'];

        $ins = $conn->prepare("INSERT INTO doctors (full_name,email,phone,gender,pmc_license_number,specialization_id,qualification,experience_years,consultation_fee,clinic_name,city,password,doc_license,doc_qualification,doc_cnic,profile_photo,verification_status,created_at) VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,'pending',NOW())");
        $ins->bind_param('sssssisidssssss',
            $dr_old['full_name'], $dr_old['email'], $dr_old['phone'], $dr_old['gender'],
            $dr_old['pmc_license'], $spec_id, $dr_old['qualification'],
            $exp, $fee, $dr_old['clinic_name'], $dr_old['city'], $hash,
            $doc_lic, $doc_qual, $doc_cnic, $photo
        );
        if ($ins->execute()) {
            $notif = "New doctor: Dr. {$dr_old['full_name']} ({$dr_old['pmc_license']}) needs verification.";
            $n = $conn->prepare("INSERT INTO notifications (user_type,user_id,title,message,type,channel) VALUES ('admin',1,'New Doctor Registration',?,'new_doctor_registration','in_app')");
            $n->bind_param('s',$notif); $n->execute();
            $dr_success = true;
        } else {
            $dr_errors[] = 'Registration failed. Please try again.';
        }
    }
}

// -- Handle Patient Register Modal --
$r_errors = [];
$r_old = [];
if ($_SERVER['REQUEST_METHOD']==='POST' && isset($_POST['patient_modal_register'])) {
    $r_old['full_name'] = clean($_POST['r_full_name'] ?? '');
    $r_old['email']     = clean($_POST['r_email'] ?? '');
    $r_old['phone']     = clean($_POST['r_phone'] ?? '');
    $r_old['gender']    = clean($_POST['r_gender'] ?? '');
    $r_old['dob']       = clean($_POST['r_dob'] ?? '');
    $r_pass  = $_POST['r_password'] ?? '';
    $r_pass2 = $_POST['r_password2'] ?? '';

    if (empty($r_old['full_name']))          $r_errors[] = 'Full name is required.';
    if (!filter_var($r_old['email'], FILTER_VALIDATE_EMAIL)) $r_errors[] = 'Enter a valid email.';
    if (strlen($r_old['phone']) < 10)        $r_errors[] = 'Enter a valid phone number.';
    if (empty($r_old['gender']))             $r_errors[] = 'Select your gender.';
    if (empty($r_old['dob']))                $r_errors[] = 'Date of birth is required.';
    if (strlen($r_pass) < 6)                 $r_errors[] = 'Password must be at least 6 characters.';
    if ($r_pass !== $r_pass2)                $r_errors[] = 'Passwords do not match.';

    if (empty($r_errors)) {
        $chk = $conn->prepare("SELECT id FROM patients WHERE email=?");
        $chk->bind_param('s', $r_old['email']); $chk->execute();
        if ($chk->get_result()->num_rows > 0) $r_errors[] = 'This email is already registered.';
    }
    if (empty($r_errors)) {
        $health_id = generateHealthId($conn);
        $hash = password_hash($r_pass, PASSWORD_BCRYPT);
        $ins = $conn->prepare("INSERT INTO patients (health_id,full_name,email,phone,gender,date_of_birth,password,created_at) VALUES (?,?,?,?,?,?,?,NOW())");
        $ins->bind_param('sssssss', $health_id, $r_old['full_name'], $r_old['email'], $r_old['phone'], $r_old['gender'], $r_old['dob'], $hash);
        if ($ins->execute()) {
            $_SESSION['patient_id']    = $conn->insert_id;
            $_SESSION['patient_name']  = $r_old['full_name'];
            $_SESSION['patient_email'] = $r_old['email'];
            $_SESSION['health_id']     = $health_id;
            header('Location: ' . SITE_URL . '/patient/dashboard.php'); exit;
        }
        $r_errors[] = 'Registration failed. Please try again.';
    }
}

// -- Handle Doctor Modal Login --
$d_errors = [];
if ($_SERVER['REQUEST_METHOD']==='POST' && isset($_POST['doctor_modal_login'])) {
    $d_email = clean($_POST['d_email'] ?? '');
    $d_pass  = $_POST['d_password'] ?? '';
    if (empty($d_email) || empty($d_pass)) {
        $d_errors[] = 'Email and password required.';
    } else {
        $s = $conn->prepare("SELECT id,full_name,email,password,verification_status FROM doctors WHERE email=?");
        $s->bind_param('s', $d_email);
        $s->execute();
        $doc = $s->get_result()->fetch_assoc();
        if (!$doc) {
            $d_errors[] = 'No doctor account found with this email.';
        } elseif ($doc['verification_status'] !== 'approved') {
            $d_errors[] = 'Account pending admin verification.';
        } elseif (!password_verify($d_pass, $doc['password'])) {
            $d_errors[] = 'Invalid password.';
        } else {
            $_SESSION['doctor_id']    = $doc['id'];
            $_SESSION['doctor_name']  = $doc['full_name'];
            $_SESSION['doctor_email'] = $doc['email'];
            header('Location: ' . SITE_URL . '/doctor/dashboard.php');
            exit;
        }
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>DRM HealthLink<sup class="tm">™</sup> — Powered by CarePoint AI</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <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@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  
  <style>
    * { box-sizing: border-box; }
    html { overflow-x: hidden; }
    :root {
      --hero-bg: linear-gradient(135deg, #4D8DFF 0%, #1E63E9 45%, #0E3FAE 100%);
    }
    body {
      margin: 0;
      font-family: 'Poppins', Arial, sans-serif;
      background: linear-gradient(135deg, #4D8DFF 0%, #1E63E9 45%, #0E3FAE 100%);
      color: #f1f5f9;
      min-height: 100vh;
      overflow-x: hidden;
      max-width: 100vw;
      padding-top: 68px;
    }

    /* -- SCALE WRAPPER (keeps mobile identical to desktop layout, just scaled) -- */
    #scaleOuter {
      position: relative;
      width: 100%;
      overflow: hidden;
    }
    #scaleInner {
      width: 1440px;
      transform-origin: top left;
    }

    /* -- HERO -- */
    .hero {
      position: relative;
      background: linear-gradient(135deg, #4D8DFF 0%, #1E63E9 45%, #0E3FAE 100%);  /* solutions.php gradient */
      isolation: auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding-bottom: 24px;
    }
    .bg { display: none; }
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: transparent;
    }

    .hero::after { display: none; }

    /* -- KIOSK -- */
    .pod {
      position: absolute;
      z-index: 4;
      left: 50%;
      top: 40px;
      transform: translateX(-50%);
      width: 420px;
      filter: drop-shadow(0 0 50px rgba(174,45,255,.6));
      animation: podDrop 1.8s cubic-bezier(.16,1,.3,1) .5s both, kioskOrbit 7s ease-in-out 2.3s infinite;
      transform-style: preserve-3d;
    }

    /* -- NEON FLOOR RINGS under kiosk -- */
    .pod-ring {
      position: absolute;
      z-index: 3;
      left: 50%;
      transform: translateX(-50%);
      top: 470px;
      width: 580px;
      height: 160px;
      pointer-events: none;
    }
    /* outer neon ring */
    .pod-ring .r1 {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      transform: perspective(300px) rotateX(78deg);
      border: 5px solid #a855f7;
      box-shadow:
        0 0 18px 6px #a855f7,
        0 0 45px 12px rgba(168,85,247,.55),
        inset 0 0 18px 4px rgba(168,85,247,.4);
    }
    /* inner tighter ring */
    .pod-ring .r2 {
      position: absolute;
      left: 10%; right: 10%; top: 22%; bottom: 22%;
      border-radius: 50%;
      transform: perspective(300px) rotateX(78deg);
      border: 3px solid #c084fc;
      box-shadow:
        0 0 12px 4px #c084fc,
        0 0 30px 8px rgba(192,132,252,.45),
        inset 0 0 12px 3px rgba(192,132,252,.3);
    }
    /* floor glow */
    .pod-ring .glow {
      position: absolute;
      left: 5%; right: 5%;
      bottom: 0%; height: 60%;
      border-radius: 50%;
      background: radial-gradient(ellipse at center,
        rgba(168,85,247,.75) 0%,
        rgba(139,92,246,.45) 35%,
        rgba(109,40,217,.15) 65%,
        transparent 100%
      );
      filter: blur(5px);
      transform: perspective(300px) rotateX(78deg);
    }

    /* -- MAIN -- */
    main { position: relative; z-index: 3; height: 600px; flex-shrink: 0; }

    /* Halo ring around kiosk */
    .halo {
      position: absolute;
      left: 50%;
      top: 40px;
      transform: translateX(-50%);
      width: 520px; height: 520px;
      border: 3px solid #a855f7;
      border-radius: 50%;
      box-shadow:
        0 0 20px 6px #a855f7,
        0 0 55px 14px rgba(168,85,247,.5),
        inset 0 0 20px 5px #a855f7,
        inset 0 0 55px 12px rgba(168,85,247,.35);
      z-index: 1;
      animation: ringGlow 3s ease-in-out infinite;
    }

    /* -- LEFT -- */
    .left {
      position: absolute; left: 7%; top: 60px;
      display: flex; flex-direction: column; gap: 20px;
      width: 420px;
      z-index: 5;
      animation: slideFromLeft 2.2s cubic-bezier(.16,1,.3,1) both;
    }
    .ai {
      width: 320px;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 20px;
      background: rgba(15,50,180,.35);
      box-shadow: 0 0 50px rgba(59,130,246,.15);
      backdrop-filter: blur(12px);
      padding: 20px 22px;
      animation: leftFloat 4s ease-in-out infinite;
    }
    .airow { display: flex; gap: 20px; align-items: flex-start; }
    .brain { font-size: 38px; color: #d56aff; text-shadow: 0 0 15px #4acbff; }
    .ai h3 { font-size: 14px; margin: 0 0 16px; }
    .wave {
      height: 28px; width: 190px;
      background: linear-gradient(90deg, #f132eb, #218dff, #ff51dc);
      clip-path: polygon(0 51%,5% 48%,9% 52%,13% 46%,17% 56%,21% 35%,25% 78%,29% 10%,34% 88%,39% 48%,45% 50%,50% 55%,55% 26%,60% 68%,65% 50%,70% 52%,75% 20%,80% 81%,85% 40%,90% 60%,95% 44%,100% 50%);
    }
    .ai p { margin: 10px 0 0 90px; color: #aaa; font-size: 12px; }

    .headline { margin: 0; font-weight: 800; font-size: 46px; line-height: 1.1; letter-spacing: -2px; }
    .headline .grad { background: linear-gradient(90deg, #a668ff, #ff42b9); -webkit-background-clip: text; color: transparent; }

    /* Watch button - more visible */
    .watch { display: flex; align-items: center; gap: 12px; }
    .play {
      width: 44px; height: 44px;
      border-radius: 50%;
      border: 2px solid #fff;
      display: grid; place-items: center;
      background: rgba(168,85,247,.3);
      box-shadow: 0 0 20px rgba(168,85,247,.8);
      cursor: pointer;
      flex-shrink: 0;
    }
    .play i { font-size: 14px; color: #fff; }
    .watch span { font-size: 13px; color: #fff; font-weight: 600; line-height: 1.4; }

    /* -- RIGHT -- */
    .right {
      position: absolute; right: 2.3%; top: 60px;
      width: 300px;
      display: flex; flex-direction: column; gap: 16px;
      animation: slideFromRight 2.2s cubic-bezier(.16,1,.3,1) .3s both;
    }

    .vital {
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 18px;
      background: rgba(15,50,180,.5);
      box-shadow: 0 0 40px rgba(59,130,246,.25);
      backdrop-filter: blur(12px);
      position: relative;
      height: auto;
      min-height: 120px;
      padding: 20px 18px 20px 100px;
      animation: rightFloat 4.5s ease-in-out infinite;
      overflow: visible;
    }
    .heart { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 48px; color: #df37ff; text-shadow: 0 0 18px #2e79ff; }
    .vital h3 { margin: 0 0 6px 0; font-size: 14px; font-weight: 700; color: #fff; }
    .vital p  { margin: 0; color: #cbd5e1; font-size: 12px; line-height: 1.5; }

    .choice {
      border: 1.5px solid rgba(255,255,255,.25);
      border-radius: 18px;
      background: rgba(15,50,180,.5);
      box-shadow: 0 0 40px rgba(59,130,246,.2);
      backdrop-filter: blur(12px);
      position: relative;
      height: 105px;
      padding: 26px 24px;
      display: flex; align-items: center; gap: 18px;
      cursor: pointer;
      transition: transform .2s, box-shadow .2s;
    }
    .choice:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(168,85,247,.4); }
    .choice.hot  { border-color: rgba(168,85,247,.7); background: rgba(88,28,220,.5); box-shadow: 0 0 28px rgba(168,85,247,.4), inset 0 0 40px rgba(168,85,247,.15); }
    .choice.blue { border-color: rgba(59,130,246,.7); background: rgba(15,50,180,.5); box-shadow: 0 0 28px rgba(59,130,246,.4), inset 0 0 40px rgba(59,130,246,.15); }
    .choice i:first-child { font-size: 38px; color: #e0b4ff; text-shadow: 0 0 16px rgba(168,85,247,1); }
    .blue i:first-child   { color: #93c5fd; text-shadow: 0 0 16px rgba(59,130,246,1); }
    .choice h3 { margin: 0 0 6px; font-size: 16px; color: #fff; font-weight: 700; }
    .choice p  { margin: 0; color: #cbd5e1; font-size: 12px; }
    .arrow {
      margin-left: auto;
      width: 38px; height: 38px;
      border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,.5);
      display: grid; place-items: center;
      color: #fff; flex-shrink: 0;
      background: rgba(255,255,255,.1);
    }

    /* -- STATS BAR -- */
    .stats {
      position: relative;
      z-index: 99999;
      width: min(92%, 980px);
      max-width: 980px;
      height: auto;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 20px;
      background: rgba(15,50,180,.35);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      padding: 8px 12px;
      box-shadow: 0 0 45px rgba(168,85,247,.25);
      backdrop-filter: blur(12px);
      animation: statsSlideUp 1.8s cubic-bezier(.16,1,.3,1) .8s both;
      margin: 0 auto 0;
      flex-shrink: 0;
      overflow: hidden;
    }
    /* -- ECG LINE ANIMATION -- */
    .ecg {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      width: 100%; height: 44px;
      z-index: 0;
      opacity: .35;
      pointer-events: none;
    }
    .ecg path {
      stroke: #4FD4FA;
      stroke-width: 2;
      fill: none;
      stroke-dasharray: 2400;
      stroke-dashoffset: 2400;
      animation: ecgTrace 7s linear infinite;
    }
    @keyframes ecgTrace { to { stroke-dashoffset: 0; } }
    @media (prefers-reduced-motion: reduce) {
      .ecg path { animation: none; stroke-dashoffset: 0; }
    }
    .stat {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px 28px;
      border-right: 1px solid rgba(255,255,255,.15);
      flex: 1;
      justify-content: center;
    }
    .stat:last-child { border-right: 0; }
    .stat i { font-size: 28px; color: #c084fc; text-shadow: 0 0 14px rgba(168,85,247,.9); }
    .stat:nth-child(2) i { color: #a855f7; text-shadow: 0 0 14px rgba(168,85,247,.9); }
    .stat:nth-child(3) i { color: #60a5fa; text-shadow: 0 0 14px rgba(59,130,246,.9); }
    .stat:nth-child(4) i { color: #3b82f6; text-shadow: 0 0 14px rgba(59,130,246,.9); }
    .num { font-size: 22px; font-weight: 800; }
    .lab { color: #c4c0cf; font-size: 12px; margin-top: 4px; }

    /* -- SCROLL -- */
    .scroll {
      position: absolute;
      left: 50px; bottom: 100px;
      z-index: 4;
      color: #aaa;
      display: flex; gap: 12px; align-items: center;
      font-size: 12px;
    }
    .mouse {
      width: 18px; height: 30px;
      border: 1px solid #ddd;
      border-radius: 10px;
      position: relative;
    }
    .mouse::before {
      content: "";
      position: absolute;
      left: 7px; top: 6px;
      width: 3px; height: 6px;
      background: #fff;
      border-radius: 2px;
    }

    /* -- MODALS -- */
    /* -- MODAL & FORM PREMIUM REDESIGN -- */

    /* -- MODAL & FORM PREMIUM REDESIGN -- */
    .modal-content {
      background: linear-gradient(160deg, #0c1a4a 0%, #071030 60%, #0a1540 100%);
      border: 1px solid rgba(99,140,255,.25);
      border-radius: 28px;
      color: #f1f5f9;
      overflow: hidden;
      box-shadow: 0 32px 100px rgba(0,0,0,.75), 0 0 80px rgba(59,130,246,.15), inset 0 1px 0 rgba(255,255,255,.07);
      font-family: 'Poppins', sans-serif;
    }
    .modal-header {
      border-bottom: 1px solid rgba(99,140,255,.12);
      padding: 0;
      background: linear-gradient(90deg, rgba(59,130,246,.12), rgba(99,140,255,.08));
    }
    .modal-title-wrap {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px 16px;
      border-radius: 999px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(99,140,255,.15);
      margin: 20px 20px 10px 20px;
    }
    .modal-title-icon {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, #1d4ed8, #3b82f6);
      box-shadow: 0 8px 24px rgba(59,130,246,.4);
      flex-shrink: 0;
    }
    .modal-title {
      font-family: 'Poppins', sans-serif;
      font-size: 22px;
      font-weight: 700;
      margin: 0;
      color: #f8fafc;
      letter-spacing: .3px;
    }
    .modal-body {
      padding: 28px 32px 36px;
      font-family: 'Poppins', sans-serif;
    }

    /* step dots */
    .doctor-reg-steps {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 24px;
    }
    .doctor-reg-step-dot {
      flex: 1;
      height: 4px;
      border-radius: 999px;
      background: rgba(255,255,255,.1);
      transition: all .3s ease;
    }
    .doctor-reg-step-dot.active {
      background: linear-gradient(90deg, #3b82f6, #60a5fa);
      box-shadow: 0 0 10px rgba(59,130,246,.5);
    }
    .doctor-reg-step { display: none; }
    .doctor-reg-step.active {
      display: block;
      animation: fadeInUp .3s cubic-bezier(.16,1,.3,1);
    }
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .doctor-reg-step-title {
      font-family: 'Poppins', sans-serif;
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 4px;
      color: #e2e8f0;
      letter-spacing: .2px;
    }
    .doctor-reg-step-subtitle {
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      color: #94a3b8;
      margin-bottom: 20px;
      line-height: 1.65;
    }
    .doctor-step-actions {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      margin-top: 20px;
    }
    .doctor-step-actions .btn-modal-submit {
      width: auto;
      padding: 12px 22px;
      margin-top: 0;
    }
    .doctor-step-actions .btn-secondary {
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.12);
      color: #cbd5e1;
      padding: 12px 22px;
      border-radius: 14px;
      font-family: 'Poppins', sans-serif;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: background .2s;
    }
    .doctor-step-actions .btn-secondary:hover {
      background: rgba(255,255,255,.1);
    }

    /* form fields */
    .input-wrap {
      position: relative;
      margin-bottom: 18px;
    }
    .input-wrap .input-icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 14px;
      color: #64748b;
      pointer-events: none;
    }
    .input-wrap .form-control,
    .input-wrap .form-select {
      padding-left: 42px;
    }
    .form-label {
      font-family: 'Poppins', sans-serif;
      font-size: 11px;
      font-weight: 700;
      color: #93c5fd;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      margin-bottom: 7px;
      display: block;
    }
    .form-control, .form-select {
      background: rgba(30,60,180,.18);
      border: 1px solid rgba(99,140,255,.25);
      color: #f1f5f9;
      border-radius: 14px;
      font-family: 'Poppins', sans-serif;
      font-size: 14px;
      font-weight: 500;
      padding: 13px 16px;
      width: 100%;
      transition: border-color .25s, box-shadow .25s, background .25s;
    }
    .form-control:focus, .form-select:focus {
      outline: none;
      background: rgba(30,80,220,.22);
      border-color: rgba(96,165,250,.8);
      color: #f8fafc;
      box-shadow: 0 0 0 4px rgba(59,130,246,.18);
    }
    .form-control::placeholder {
      color: rgba(148,163,184,.5);
      font-weight: 400;
    }
    .form-select option {
      background: #0c1a4a;
      color: #f1f5f9;
    }
    .form-control[type=file] {
      padding: 10px 16px;
      cursor: pointer;
    }
    .form-control[type=file]::file-selector-button {
      background: rgba(59,130,246,.2);
      border: 1px solid rgba(96,165,250,.4);
      color: #93c5fd;
      border-radius: 8px;
      padding: 5px 14px;
      font-family: 'Poppins', sans-serif;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      margin-right: 12px;
      transition: background .2s;
    }

    .section-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 20px 0 16px;
    }
    .section-divider span {
      font-family: 'Poppins', sans-serif;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: #475569;
      white-space: nowrap;
    }
    .section-divider::before, .section-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(99,140,255,.12);
    }

    /* submit button */
    .btn-modal-submit {
      background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 60%, #60a5fa 100%);
      border: none;
      color: #fff;
      padding: 14px 24px;
      border-radius: 14px;
      font-family: 'Poppins', sans-serif;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      width: 100%;
      transition: transform .2s, box-shadow .2s;
      letter-spacing: .3px;
      box-shadow: 0 6px 28px rgba(59,130,246,.45);
      margin-top: 8px;
    }
    .btn-modal-submit:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 40px rgba(59,130,246,.6);
    }
    .btn-modal-submit.blue-grad {
      background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
      box-shadow: 0 6px 28px rgba(14,165,233,.45);
    }
    .btn-modal-submit.blue-grad:hover {
      box-shadow: 0 14px 40px rgba(14,165,233,.6);
    }

    /* switch link */
    .modal-switch-link {
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      color: #64748b;
      text-align: center;
      margin-top: 16px;
    }
    .modal-switch-link a {
      color: #60a5fa;
      text-decoration: none;
      cursor: pointer;
      font-weight: 700;
      transition: color .2s;
    }
    .modal-switch-link a:hover { color: #93c5fd; }

    /* alerts */
    .alert-danger-custom {
      background: rgba(220,38,38,.1);
      border: 1px solid rgba(220,38,38,.3);
      border-radius: 12px;
      padding: 13px 16px;
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      color: #fca5a5;
      margin-bottom: 18px;
      display: flex;
      gap: 10px;
      align-items: flex-start;
      line-height: 1.6;
    }
    .alert-success-custom {
      background: rgba(16,185,129,.1);
      border: 1px solid rgba(16,185,129,.3);
      border-radius: 12px;
      padding: 13px 16px;
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      color: #6ee7b7;
      margin-bottom: 18px;
      line-height: 1.6;
    }
    .modal-dialog-scrollable .modal-body { overflow-y: auto; max-height: 72vh; }
    .btn-close {
      filter: none;
      opacity: 1;
      margin: 0;
      padding: 0;
      position: absolute;
      top: 18px;
      right: 18px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.18);
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: background .2s, transform .2s;
      z-index: 10;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293A1 1 0 0 1 .293 14.707L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z' fill='%23ffffff'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 12px;
    }
    .btn-close:hover {
      background-color: rgba(255,255,255,.2);
      transform: rotate(90deg) scale(1.1);
    }
    .modal-header { position: relative; }

    /* -- PASSWORD TOGGLE -- */
    .pw-wrap {
      position: relative;
    }
    .pw-wrap .form-control {
      padding-right: 46px;
    }
    .pw-eye {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      color: #60a5fa;
      font-size: 16px;
      line-height: 1;
      transition: color .2s;
      z-index: 5;
      user-select: none;
    }
    /* ==========================================================================
   PREMIUM MOBILE STATS MATRIX WITH ECG TRICK
   ========================================================================== */
.mobile-stats-container {
  margin: 12px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  background: rgba(5, 20, 100, 0.6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
  position: relative;
  z-index: 5;
  overflow: hidden;
  animation: mob-slideUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

.mob-stat-item {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 18px 4px;
  overflow: hidden;
}

.mob-stat-item:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.mob-icon-wrap {
  font-size: 17px;
  z-index: 2;
  position: relative;
  transition: transform 0.3s ease;
}

.mob-stat-item:active .mob-icon-wrap {
  transform: scale(1.15);
}

.mob-num {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
  z-index: 2;
  position: relative;
  font-family: 'Poppins', sans-serif;
}

.mob-lab {
  font-size: 10px;
  color: rgba(220, 235, 255, 0.8);
  font-weight: 600;
  line-height: 1;
  z-index: 2;
  position: relative;
}

/* ECG animation - background, thick line, clearly visible */
.mob-card-pulse {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.6;
  z-index: 0;
}

.mob-card-pulse svg {
  width: 100%;
  height: 100%;
}

.mob-card-pulse path {
  stroke: var(--pulse-color);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px var(--pulse-color));
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: mobDrawEcg 3.5s linear infinite;
  animation-delay: var(--pulse-delay);
}

@keyframes mobDrawEcg {
  0%   { stroke-dashoffset: 200; }
  65%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -200; }
}
    .pw-eye:hover { color: #93c5fd; }
/* STAT STRIP - matches mobile card */
.stat-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  position:relative;z-index:5;
  margin:0 40px 0;
  border:1px solid rgba(255,255,255,.2);
  border-radius:20px;
  background:rgba(5,20,100,.6);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 10px 35px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.15);
  overflow:hidden;
}
.stat{
  padding:22px 18px;
  border-right:1px solid rgba(255,255,255,.15);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  text-align:center;
}
.stat:last-child{border-right:none}
.stat:hover{background:rgba(77,141,255,.12);}
.stat i{font-size:1.3rem;z-index:2;position:relative;}
.stat b{display:block;font-family:'Poppins',sans-serif;font-size:1.5rem;font-weight:800;color:#ffffff;z-index:2;position:relative;}
.stat span{font-size:.78rem;color:rgba(220,235,255,.85);font-weight:600;z-index:2;position:relative;}
/* ECG pulse per stat cell */
.stat-pulse{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.55;z-index:0;}
.stat-pulse svg{width:100%;height:100%;}
.stat-pulse path{stroke:var(--sc);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px var(--sc));stroke-dasharray:200;stroke-dashoffset:200;animation:mobDrawEcg 3.5s linear infinite;animation-delay:var(--sd);}
    /* -- MODAL RESPONSIVE -- */
    @media (max-width: 575px) {
      .modal-dialog { margin: 10px; }
      .modal-content { border-radius: 20px; }
      .modal-body { padding: 20px 18px 28px; }
      .modal-title { font-size: 18px; }
      .modal-title-wrap { margin: 14px 14px 8px 14px; }
      .form-control, .form-select { font-size: 13px; padding: 11px 14px; }
      .pw-wrap .form-control { padding-right: 42px; }
      .btn-modal-submit { font-size: 14px; padding: 13px 20px; }
      .doctor-reg-step-title { font-size: 17px; }
      .row.g-3 > [class*="col-md-"] { width: 100% !important; }
      .col-md-3 { width: 100% !important; }
    }
    @media (min-width: 576px) and (max-width: 767px) {
      .modal-dialog { margin: 16px; }
      .modal-body { padding: 22px 22px 30px; }
      .row.g-3 > .col-md-3 { width: 50% !important; }
    }

    .service-section {
      padding: 100px 0 80px;
      position: relative;
      z-index: 2;
      color: #f1f5f9;
    }
    /* Alternating section backgrounds */
    #concept      { background: #ffffff; color: #1e293b; }
    #kiosk        { background: #ffffff; color: #1e293b; }
    #tests        { background: linear-gradient(135deg,#4D8DFF 0%,#1E63E9 45%,#0E3FAE 100%); color: #f1f5f9; }
    #tests > div:first-child h2 { color: #ffffff !important; }
    #tests > div:first-child p  { color: rgba(255,255,255,.85) !important; }
    #tests .svc-hover p { color: #0f172a !important; }
    #tests .svc-hover h4 { color: #0f172a !important; }
    #tests p.reveal { color: #0f172a !important; }
    #tests [style*="background:#ffffff"] p { color: #0f172a !important; }
    #tests [style*="background:#ffffff"] .reveal { color: #0f172a !important; }
    #technology   { background: #ffffff; color: #1e293b; }
    #telemedicine { background: #ffffff; color: #1e293b; }
    /* ===== SECTION TYPOGRAPHY ===== */
    .service-section, section,
    .service-section div, section div {
      font-family: 'Poppins', sans-serif;
    }
    /* --- HEADINGS: white on dark, dark on white --- */
    .service-section h2, section h2,
    div.reveal h2, div h2 {
      font-family: 'Poppins', sans-serif !important;
      font-weight: 800 !important;
      color: #ffffff !important;
    }
    #concept h2, #kiosk h2, #technology h2, #telemedicine h2 { color: #0f172a !important; }
    #concept h2 span, #kiosk h2 span, #technology h2 span, #telemedicine h2 span { color: transparent !important; -webkit-text-fill-color: transparent !important; }
    .service-section h3, section h3,
    div.reveal h3, div h3 {
      font-family: 'Poppins', sans-serif !important;
      font-weight: 700 !important;
      color: #ffffff !important;
    }
    #concept h3, #kiosk h3, #technology h3, #telemedicine h3 { color: #0f172a !important; }
    .service-section h4, section h4,
    div.reveal h4, div h4 {
      font-family: 'Poppins', sans-serif !important;
      font-weight: 700 !important;
      color: #ffffff !important;
    }
    #concept h4, #kiosk h4, #technology h4, #telemedicine h4 { color: #0f172a !important; }
    .service-section h5, section h5,
    div.reveal h5, div h5 {
      font-family: 'Poppins', sans-serif !important;
      font-weight: 600 !important;
      color: #e8f0ff !important;
    }
    #concept h5, #kiosk h5, #technology h5, #telemedicine h5 { color: #1e293b !important; }
    /* gradient spans inside headings stay transparent */
    .service-section h2 span, section h2 span,
    div h2 span, div h3 span {
      color: transparent !important;
    }
    /* --- PARAGRAPH TEXT --- */
    .service-section p, section p,
    div.reveal p, div.container p {
      font-family: 'Poppins', sans-serif !important;
      color: #cce4ff !important;
      font-size: 15px !important;
      line-height: 1.8 !important;
    }
    #concept p, #kiosk p, #technology p, #telemedicine p { color: #475569 !important; }
    .svc-hover p, .contact-hover p {
      font-size: 14px !important;
      color: #cce4ff !important;
    }
    #concept .svc-hover p, #kiosk .svc-hover p, #technology .svc-hover p { color: #475569 !important; }
    .service-section li, section li,
    .service-section .accordion-body {
      font-family: 'Poppins', sans-serif !important;
      color: #cce4ff !important;
      font-size: 14px !important;
    }
    #concept li, #kiosk li, #technology li, #telemedicine li { color: #475569 !important; }
    .service-section strong, section strong {
      color: #ffffff !important;
      font-weight: 700 !important;
    }
    #concept strong, #kiosk strong, #technology strong, #telemedicine strong { color: #0f172a !important; }
    .svc-hover h4, .svc-hover h5,
    .contact-hover h5, .contact-hover h4 {
      color: #ffffff !important;
    }
    #kiosk .svc-hover h4, #kiosk .svc-hover h5,
    #technology .svc-hover h4, #technology .svc-hover h5 {
      color: #0f172a !important;
    }
    /* White section card styles */
    #concept .svc-hover, #kiosk .svc-hover, #technology .svc-hover {
      background: #f8faff !important;
      border-color: rgba(59,130,246,0.25) !important;
      box-shadow: 0 4px 24px rgba(59,130,246,0.08);
    }
    #concept .svc-hover:hover, #kiosk .svc-hover:hover, #technology .svc-hover:hover {
      border-color: rgba(59,130,246,0.5) !important;
      box-shadow: 14px 28px 70px rgba(59,130,246,0.2) !important;
    }
    /* Telemedicine white section */
    #telemedicine [style*="background:rgba(15,50,180"] {
      background: #f0f6ff !important;
      border-color: rgba(59,130,246,0.25) !important;
    }
    #telemedicine li { color: #334155 !important; }
    #telemedicine button { color: #fff !important; }
    /* Kiosk list items on white */
    #kiosk li[style] { background: #f0f6ff !important; border-color: rgba(59,130,246,0.2) !important; }
    #kiosk li span { color: #475569 !important; }
    /* Concept barrier cards */
    #concept [style*="font-size:11px;font-weight:800"] { opacity: 0.85; }
    /* Technology trust pills on white */
    #technology [style*="border-radius:30px"] { background: #f0f6ff !important; border-color: rgba(59,130,246,0.25) !important; color: #1e40af !important; }
    #technology [style*="border-radius:30px"] i { color: #3b82f6 !important; }
    /* Flow statement text stays white (dark bg) */
    .flow-statement-div h2 { color: #ffffff !important; }
    .flow-statement-div p  { color: #cce4ff !important; }
    /* Value strip text stays white */
    .value-strip-div h2 { color: #ffffff !important; }
    .value-strip-div strong { color: #ffffff !important; }
    .value-strip-div span  { color: #cce4ff !important; }
    /* --- BADGES --- */
    .sec-badge {
      background: rgba(255,255,255,0.18) !important;
      border: 1.5px solid rgba(255,255,255,0.35) !important;
      color: #ffffff !important;
      font-weight: 700 !important;
      font-family: 'Poppins', sans-serif !important;
      letter-spacing: 1.5px !important;
      backdrop-filter: blur(8px) !important;
    }
    #concept .sec-badge, #kiosk .sec-badge, #technology .sec-badge, #telemedicine .sec-badge {
      background: rgba(59,130,246,0.1) !important;
      border: 1.5px solid rgba(59,130,246,0.4) !important;
      color: #1d4ed8 !important;
    }
    /* footer */
    footer p, footer span, footer li {
      font-family: 'Poppins', sans-serif;
    }
    footer h6 {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      color: #ffffff !important;
    }
    .accordion-button::after { filter: invert(1); }
    .accordion-button:not(.collapsed) { color: #c084fc; background: transparent; }

    /* -- DESKTOP HERO ANIMATIONS -- */
    @keyframes kioskOrbit {
      0%   { transform: translateX(-50%) translate(0px,0px) rotateY(-15deg) rotateX(3deg); }
      25%  { transform: translateX(-50%) translate(22px,-28px) rotateY(-5deg) rotateX(6deg); }
      50%  { transform: translateX(-50%) translate(0px,-42px) rotateY(5deg) rotateX(3deg); }
      75%  { transform: translateX(-50%) translate(-22px,-28px) rotateY(-10deg) rotateX(0deg); }
      85%,100% { transform: translateX(-50%) translate(0px,0px) rotateY(-15deg) rotateX(3deg); }
    }
    @keyframes haloRotate {
      from { transform: translateX(-50%) rotate(0deg); }
      to   { transform: translateX(-50%) rotate(360deg); }
    }
    @keyframes haloRotateRev {
      from { transform: translateX(-50%) rotate(0deg); }
      to   { transform: translateX(-50%) rotate(-360deg); }
    }
    @keyframes ringGlow {
      0%,100% { box-shadow: 0 0 20px 6px #a855f7, 0 0 55px 14px rgba(168,85,247,.5), inset 0 0 20px 5px #a855f7, inset 0 0 55px 12px rgba(168,85,247,.35); }
      50%     { box-shadow: 0 0 40px 14px #a855f7, 0 0 90px 25px rgba(168,85,247,.8), inset 0 0 40px 12px #a855f7, inset 0 0 90px 22px rgba(168,85,247,.6); }
    }
    @keyframes particle1 {
      0%,100% { transform: translate(0,0) scale(1); opacity:.7; }
      40%     { transform: translate(40px,-60px) scale(1.4); opacity:1; }
      70%     { transform: translate(-20px,-90px) scale(.7); opacity:.3; }
    }
    @keyframes particle2 {
      0%,100% { transform: translate(0,0) scale(1); opacity:.5; }
      35%     { transform: translate(-50px,-45px) scale(1.2); opacity:.9; }
      65%     { transform: translate(20px,-80px) scale(.6); opacity:.2; }
    }
    @keyframes particle3 {
      0%,100% { transform: translate(0,0) scale(1); opacity:.6; }
      50%     { transform: translate(30px,-70px) scale(1.5); opacity:1; }
    }
    @keyframes particle4 {
      0%,100% { transform: translate(0,0) scale(1); opacity:.4; }
      45%     { transform: translate(-40px,-55px) scale(1.3); opacity:.8; }
    }
    @keyframes leftFloat {
      0%,100% { transform: translateY(0px); }
      50%     { transform: translateY(-10px); }
    }
    @keyframes rightFloat {
      0%,100% { transform: translateY(0px); }
      50%     { transform: translateY(-8px); }
    }
    @keyframes scanLine {
      0%   { top:0%; opacity:.6; }
      100% { top:100%; opacity:0; }
    }
    @keyframes deskFadeIn {
      from { opacity:0; transform:translateY(20px); }
      to   { opacity:1; transform:translateY(0); }
    }
    @keyframes cursorBlink {
      0%,100% { opacity:1; } 50% { opacity:0; }
    }
      0%,100% { transform:scale(1); opacity:.8; }
      50%     { transform:scale(1.25); opacity:1; }
    }
    @keyframes slideFromLeft {
      from { opacity:0; transform:translateX(-120px); }
      to   { opacity:1; transform:translateX(0); }
    }
    @keyframes slideFromRight {
      from { opacity:0; transform:translateX(120px); }
      to   { opacity:1; transform:translateX(0); }
    }
    @keyframes podDrop {
      from { opacity:0; transform:translateX(-50%) translateY(-80px) scale(.8); }
      to   { opacity:1; transform:translateX(-50%) translateY(0px) scale(1); }
    }
    @keyframes statsSlideUp {
      from { opacity:0; transform:translateY(40px); }
      to   { opacity:1; transform:translateY(0); }
    }
    @keyframes card3dSpin {
      0%   { transform: perspective(700px) rotateY(0deg); }
      100% { transform: perspective(700px) rotateY(360deg); }
    }
    @keyframes card3dSpinRev {
      0%   { transform: perspective(700px) rotateY(0deg); }
      100% { transform: perspective(700px) rotateY(-360deg); }
    }
    @keyframes counterSpin {
      0%   { transform: perspective(700px) rotateY(0deg); }
      100% { transform: perspective(700px) rotateY(-360deg); }
    }
    @keyframes counterSpinRev {
      0%   { transform: perspective(700px) rotateY(0deg); }
      100% { transform: perspective(700px) rotateY(360deg); }
    }
    .card-3d {
      transform-style: preserve-3d;
      animation: card3dSpin 8s linear infinite;
    }
    .card-3d-rev {
      transform-style: preserve-3d;
      animation: card3dSpinRev 10s linear infinite;
    }
    .card-3d:hover, .card-3d-rev:hover {
      animation-play-state: paused;
    }
    .card-3d > *, .card-3d-rev > * {
      animation: inherit;
      animation-name: counterSpin;
    }
    .card-3d-rev > * {
      animation-name: counterSpinRev;
    }

    /* -- MOBILE HERO LAYOUT -- */
    .mob-hero { display: none; }

    @keyframes mob-fadeUp {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes mob-slideLeft {
      from { opacity:0; transform:translateX(-60px); }
      to   { opacity:1; transform:translateX(0); }
    }
    @keyframes mob-slideRight {
      from { opacity:0; transform:translateX(60px); }
      to   { opacity:1; transform:translateX(0); }
    }
    @keyframes mob-slideUp {
      from { opacity:0; transform:translateY(40px); }
      to   { opacity:1; transform:translateY(0); }
    }
    @keyframes mob-floatY {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(-10px); }
    }
    @keyframes mob-ring-pulse {
      0%,100% { box-shadow: 0 0 18px 6px #a855f7, 0 0 45px 12px rgba(168,85,247,.55), inset 0 0 18px 4px rgba(168,85,247,.4); }
      50%      { box-shadow: 0 0 28px 10px #a855f7, 0 0 65px 18px rgba(168,85,247,.75), inset 0 0 28px 8px rgba(168,85,247,.6); }
    }
    @keyframes mob-glow-pulse {
      0%,100% { opacity: .7; }
      50%      { opacity: 1; }
    }
    @keyframes mob-stat-in {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* -- RESPONSIVE -- */
    /* ===== MOBILE (=767px) ===== */
    @media (max-width: 767px) {
      #scaleInner { width: 100% !important; transform: none !important; }
      #scaleOuter { height: auto !important; }
      body { overflow-x: hidden; }
      .hero { display: none !important; }
      .mob-hero { display: block; }
      .service-section { padding: 40px 0 32px !important; }
      #concept, #kiosk, #tests, #technology, #telemedicine, #faq, #contact { padding: 40px 0 32px !important; }
      .mob-hero { margin-bottom: 0 !important; }
      .text-center.mb-5 { margin-bottom: 20px !important; }
      /* Typography */
      .service-section h2, section h2 { font-size: 22px !important; letter-spacing: -.5px !important; line-height: 1.25 !important; }
      .service-section h3, section h3 { font-size: 18px !important; line-height: 1.3 !important; }
      .service-section h4, .service-section h5, section h4, section h5 { font-size: 14px !important; }
      .service-section p, section p { font-size: 13px !important; line-height: 1.6 !important; }
      .sec-badge { font-size: 10px !important; padding: 4px 12px !important; }
      /* Grid */
      .col-md-4, .col-md-3, .col-md-6, .col-md-5, .col-md-7, .col-md-8, .col-lg-8 { width: 100% !important; }
      .col-6 { width: 50% !important; }
      /* Disable 3D hover on touch */
      .h3d:hover, .svc-hover:hover, .contact-hover:hover, .spec-hover:hover, .plan-hover:hover, .step-hover:hover, .tele-hover:hover { transform: none !important; box-shadow: none !important; }
      /* Concept section barrier cards */
      #concept .svc-hover { padding: 20px 16px !important; }
      #concept [style*="padding:40px 48px"] { padding: 24px 16px !important; }
      /* Flow statement */
      .reveal[style*="padding:60px 0"] { padding: 32px 0 !important; }
      /* Kiosk section */
      #kiosk .col-md-5 img { border-radius: 14px !important; margin-bottom: 20px; }
      #kiosk li { padding: 14px 14px !important; }
      #kiosk li strong { font-size: 13px !important; }
      #kiosk li span { font-size: 12px !important; }
      #kiosk .svc-hover { padding: 20px 16px !important; }
      /* Tests section */
      #tests .svc-hover { padding: 22px 16px !important; }
      #tests .svc-hover h4 { font-size: 15px !important; }
      /* Technology section */
      #technology .svc-hover { padding: 22px 16px !important; }
      #technology [style*="display:flex;flex-wrap:wrap"] { gap: 10px !important; }
      #technology [style*="padding:10px 22px"] { padding: 8px 14px !important; font-size: 12px !important; }
      /* Value strip */
      .col-md-3.col-6 { width: 50% !important; }
      /* Telemedicine */
      #telemedicine .col-md-6:last-child { margin-top: 20px; }
      #telemedicine [style*="padding:40px"] { padding: 24px 20px !important; }
      #telemedicine [style*="font-size:80px"] { font-size: 52px !important; }
      #telemedicine button { width: 100% !important; }
      /* Partner CTA */
      .service-section [style*="padding:60px 48px"] { padding: 28px 20px !important; flex-direction: column !important; }
      .service-section [style*="padding:60px 48px"] a { width: 100% !important; text-align: center !important; }
      /* FAQ */
      #faq .accordion-button { font-size: 13px !important; padding: 16px 16px !important; }
      #faq .accordion-body { font-size: 12px !important; padding: 0 16px 16px !important; }
      /* Contact */
      #contact .contact-hover { padding: 22px 16px !important; }
      #contact [style*="padding:14px 28px"] { padding: 12px 18px !important; font-size: 13px !important; }
      /* Footer */
      footer { padding: 40px 0 24px !important; }
      footer .col-md-4, footer .col-md-3, footer .col-md-2 { width: 100% !important; margin-bottom: 24px; }
      footer .col-md-4:last-child, footer .col-md-2:last-child { margin-bottom: 0; }
      footer [style*="display:flex;justify-content:space-between"] { flex-direction: column; align-items: flex-start; gap: 12px; }
      /* Scroll reveal reduced motion on mobile */
      .reveal.from-left  { transform: translateX(-30px); }
      .reveal.from-right { transform: translateX(30px); }
      .reveal.from-bottom{ transform: translateY(30px); }
      .reveal { transition-duration: 0.9s !important; }
      /* Flow cards */
      .flow-card { padding: 20px 12px !important; border-radius: 14px !important; }
      .flow-icon { width: 48px !important; height: 48px !important; margin-bottom: 12px !important; }
      .flow-icon i { font-size: 18px !important; }
      .flow-title { font-size: 12px !important; margin-bottom: 4px !important; }
      .flow-desc { font-size: 11px !important; line-height: 1.5 !important; }
      .flow-num { font-size: 9px !important; top: 8px !important; right: 10px !important; }
    }

    /* ===== SMALL TABLETS (480px�767px) ===== */
    @media (min-width: 480px) and (max-width: 767px) {
      .service-section h2, section h2 { font-size: 26px !important; }
      .service-section h3, section h3 { font-size: 20px !important; }
      #concept .col-md-4, #tests .col-md-4, #kiosk .col-md-4, #technology .col-md-4 { width: 100% !important; }
    }

    /* ===== TABLET (768px�1024px) ===== */
    @media (min-width: 768px) and (max-width: 1024px) {
      #scaleInner { width: 100% !important; transform: none !important; }
      #scaleOuter { height: auto !important; }
      body { overflow-x: hidden; }
      .hero { display: none !important; }
      .mob-hero { display: block !important; }
      /* Tablet mobile hero tweaks */
      .mob-hero [style*="font-size:36px"] { font-size: 42px !important; }
      .mob-hero [style*="width:150px"] { width: 200px !important; }
      .mob-hero [style*="width:148px"] { width: 190px !important; }
      /* Typography */
      .service-section h2, section h2 { font-size: 32px !important; letter-spacing: -1px !important; }
      .service-section h3, section h3 { font-size: 22px !important; }
      .service-section h4 { font-size: 17px !important; }
      /* Grid: 2-col on tablet */
      #concept .col-md-4 { width: 50% !important; }
      #concept .col-md-4:last-child { width: 100% !important; }
      #tests .col-md-4 { width: 50% !important; }
      #kiosk .col-md-4 { width: 50% !important; }
      #technology .col-md-4 { width: 50% !important; }
      #technology .col-md-4:last-child { width: 100% !important; }
      .col-md-3.col-6 { width: 50% !important; }
      /* Kiosk image + list side by side */
      #kiosk .col-md-5 { width: 40% !important; }
      #kiosk .col-md-7 { width: 60% !important; }
      /* Telemedicine */
      #telemedicine .col-md-6 { width: 50% !important; }
      /* Partner CTA */
      .service-section [style*="padding:60px 48px"] { padding: 36px 32px !important; }
      /* FAQ */
      #faq .col-lg-8 { width: 90% !important; }
      /* Contact */
      #contact .col-md-3 { width: 50% !important; }
      /* Footer */
      footer .col-md-4 { width: 100% !important; }
      footer .col-md-3 { width: 33% !important; }
      footer .col-md-2 { width: 33% !important; }
      /* Sections padding */
      .service-section { padding: 60px 0 48px !important; }
      #concept, #kiosk, #tests, #technology, #telemedicine, #faq, #contact { padding: 60px 0 48px !important; }
      /* Disable heavy 3D hover */
      .h3d:hover, .svc-hover:hover, .contact-hover:hover { transform: translateY(-6px) !important; }
    }

    /* ===== MEDIUM DESKTOP (1025px�1280px) ===== */
    @media (min-width: 1025px) and (max-width: 1280px) {
      #scaleInner { width: 1440px !important; }
      .service-section h2 { font-size: 38px !important; }
      #concept [style*="padding:40px 48px"] { padding: 32px 36px !important; }
      .service-section [style*="padding:60px 48px"] { padding: 40px 36px !important; }
    }

    /* -- SCROLL REVEAL -- */
    .reveal {
      opacity: 0;
      transition: opacity 1.8s cubic-bezier(.16,1,.3,1), transform 1.8s cubic-bezier(.16,1,.3,1);
      will-change: transform, opacity;
    }
    .reveal.from-left   { transform: translateX(-100px); }
    .reveal.from-right  { transform: translateX(100px); }
    .reveal.from-bottom { transform: translateY(80px); }
    .reveal.from-top    { transform: translateY(-50px); }
    .reveal.scale-in    { transform: scale(.82); }
    .reveal.visible     { opacity: 1 !important; transform: none !important; }
    .reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.22s; }
    .reveal.d3{ transition-delay:.38s; } .reveal.d4{ transition-delay:.54s; }
    .reveal.d5{ transition-delay:.70s; } .reveal.d6{ transition-delay:.86s; }
    @media (max-width: 767px) {
      .reveal.from-left  { transform: translateX(-30px); }
      .reveal.from-right { transform: translateX(30px); }
      .reveal.from-bottom{ transform: translateY(30px); }
      .reveal.scale-in   { transform: scale(.94); }
      .reveal { transition-duration: 0.9s; }
    }

    /* -- HOVER 3D -- */
    .h3d { transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease; }
    .h3d:hover { transform: perspective(700px) rotateY(-10deg) rotateX(5deg) translateY(-12px) scale(1.04) !important; box-shadow: 10px 28px 70px rgba(168,85,247,.5) !important; }
    .h3d.r:hover { transform: perspective(700px) rotateY(10deg) rotateX(5deg) translateY(-12px) scale(1.04) !important; box-shadow: -10px 28px 70px rgba(59,130,246,.5) !important; }
    .h3d.up:hover { transform: translateY(-14px) scale(1.05) !important; box-shadow: 0 28px 70px rgba(168,85,247,.45) !important; }
    .h3d.slide:hover { transform: translateX(12px) scale(1.03) !important; box-shadow: 0 12px 45px rgba(168,85,247,.4) !important; }

    /* -- ICON SPIN ON HOVER -- */
    .icon-spin { transition: transform .6s cubic-bezier(.16,1,.3,1); display: inline-block; }
    .svc-hover:hover .icon-spin,
    .h3d:hover .icon-spin,
    .h3d.up:hover .icon-spin { transform: rotate(360deg) scale(1.2); }
    .icon-bounce { transition: transform .4s cubic-bezier(.16,1,.3,1); display: inline-block; }
    .h3d:hover .icon-bounce,
    .h3d.up:hover .icon-bounce,
    .svc-hover:hover .icon-bounce { transform: translateY(-6px) scale(1.25); }
    /* pulse glow on icon wrap hover */
    @keyframes iconGlowPulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(168,85,247,.5); }
      50%      { box-shadow: 0 0 0 8px rgba(168,85,247,0); }
    }
    .svc-hover:hover .icon-wrap,
    .h3d:hover .icon-wrap,
    .h3d.up:hover .icon-wrap { animation: iconGlowPulse .8s ease; }

    /* -- SECTION CARDS HOVER -- */
    .svc-hover {
      transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .3s ease;
      cursor: default;
    }
    .svc-hover:hover {
      transform: perspective(800px) rotateY(-8deg) rotateX(4deg) translateY(-12px) scale(1.04) !important;
      box-shadow: 14px 28px 70px rgba(168,85,247,.45) !important;
      border-color: rgba(168,85,247,.7) !important;
    }
    .svc-hover.right-tilt:hover {
      transform: perspective(800px) rotateY(8deg) rotateX(4deg) translateY(-12px) scale(1.04) !important;
      box-shadow: -14px 28px 70px rgba(59,130,246,.45) !important;
      border-color: rgba(59,130,246,.7) !important;
    }
    .spec-hover {
      transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
    }
    .spec-hover:hover {
      transform: perspective(600px) rotateY(-10deg) rotateX(6deg) translateY(-10px) scale(1.06) !important;
      box-shadow: 0 24px 60px rgba(168,85,247,.5) !important;
    }
    .plan-hover {
      transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
    }
    .plan-hover:hover {
      transform: perspective(700px) rotateY(-6deg) rotateX(3deg) translateY(-14px) scale(1.05) !important;
      box-shadow: 0 34px 80px rgba(168,85,247,.55) !important;
    }
    .step-hover {
      transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
    }
    .step-hover:hover {
      transform: perspective(700px) rotateY(8deg) rotateX(-4deg) translateY(-12px) !important;
      box-shadow: -12px 24px 60px rgba(59,130,246,.45) !important;
    }
    .tele-hover {
      transition: transform .4s ease, box-shadow .4s ease;
    }
    .tele-hover:hover {
      transform: translateX(12px) scale(1.03) !important;
      box-shadow: 0 12px 45px rgba(168,85,247,.4) !important;
    }
    .contact-hover {
      transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
    }
    .contact-hover:hover {
      transform: perspective(600px) rotateY(-8deg) rotateX(5deg) translateY(-10px) !important;
      box-shadow: 0 24px 60px rgba(168,85,247,.45) !important;
    }
    /* -- FAQ HOVER -- */
    .faq-item {
      transition: transform .35s ease, box-shadow .35s ease, border-color .3s ease;
    }
    .faq-item:hover {
      transform: translateX(6px) !important;
      box-shadow: -4px 0 30px rgba(168,85,247,.3) !important;
      border-color: rgba(168,85,247,.5) !important;
    }
    /* -- FOOTER LINK HOVER -- */
    .footer-col { transition: transform .4s cubic-bezier(.16,1,.3,1); }
    .footer-col:hover { transform: translateY(-4px); }
    /* -- SECTION BADGE ANIMATION -- */
    @keyframes badgePulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(168,85,247,.4); }
      50%      { box-shadow: 0 0 0 6px rgba(168,85,247,0); }
    }
    .sec-badge { animation: badgePulse 2.5s ease-in-out infinite; display: inline-block; }
    /* -- FLOATING ICON ANIMATION -- */
    @keyframes floatIcon {
      0%,100% { transform: translateY(0) rotate(0deg); }
      33%      { transform: translateY(-8px) rotate(5deg); }
      66%      { transform: translateY(-4px) rotate(-3deg); }
    }
    .float-icon { animation: floatIcon 3.5s ease-in-out infinite; }

    /* -- SECTION CARD FADE-IN -- */
    @keyframes cardFadeUp {
      from { opacity: 0; transform: translateY(32px) scale(.97); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes cardFadeLeft {
      from { opacity: 0; transform: translateX(-32px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes cardFadeRight {
      from { opacity: 0; transform: translateX(32px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    /* applied via .reveal.visible already handled by IntersectionObserver */
    /* extra subtle entrance for cards inside visible reveals */
    .reveal.visible .svc-hover,
    .reveal.visible .h3d,
    .reveal.visible .flow-card,
    .reveal.visible .contact-hover {
      animation: cardFadeUp .55s cubic-bezier(.16,1,.3,1) both;
    }
    .reveal.visible.from-left .svc-hover,
    .reveal.visible.from-left .h3d,
    .reveal.visible.from-left .flow-card,
    .reveal.visible.from-left .contact-hover {
      animation: cardFadeLeft .55s cubic-bezier(.16,1,.3,1) both;
    }
    .reveal.visible.from-right .svc-hover,
    .reveal.visible.from-right .h3d,
    .reveal.visible.from-right .flow-card,
    .reveal.visible.from-right .contact-hover {
      animation: cardFadeRight .55s cubic-bezier(.16,1,.3,1) both;
    }
  </style>
</head>
<body>
<?php include 'navbar.php'; ?>
<div id="scaleOuter">
<div id="scaleInner">
<section class="hero">
  <div class="bg"></div>

  <!-- -- MAIN -- -->
  <main>
    <!-- Canvas star field -->
    <canvas id="heroCanvas" style="position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;"></canvas>

    <!-- Neon grid overlay -->
    <div style="position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(77,141,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(77,141,255,.06) 1px,transparent 1px);background-size:60px 60px;"></div>

    <!-- Big ambient glow blobs brighter -->
    <div style="position:absolute;left:10%;top:15%;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(168,85,247,.55) 0%,rgba(139,92,246,.25) 50%,transparent 75%);filter:blur(35px);z-index:0;animation:blobPulse 6s ease-in-out infinite;"></div>
    <div style="position:absolute;right:8%;top:25%;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.5) 0%,rgba(37,99,235,.22) 50%,transparent 75%);filter:blur(30px);z-index:0;animation:blobPulse 8s ease-in-out 2s infinite;"></div>
    <div style="position:absolute;left:40%;top:5%;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(244,114,182,.45) 0%,rgba(236,72,153,.2) 50%,transparent 75%);filter:blur(25px);z-index:0;animation:blobPulse 7s ease-in-out 1s infinite;"></div>
    <div style="position:absolute;left:25%;bottom:10%;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(168,85,247,.4) 0%,transparent 70%);filter:blur(40px);z-index:0;animation:blobPulse 9s ease-in-out 3s infinite;"></div>
    <div style="position:absolute;right:25%;bottom:5%;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.4) 0%,transparent 70%);filter:blur(35px);z-index:0;animation:blobPulse 7s ease-in-out 1.5s infinite;"></div>

    <div class="halo"></div>

    <!-- Floating particles -->
    <div style="position:absolute;left:50%;top:60px;z-index:2;pointer-events:none;">
      <div style="position:absolute;width:8px;height:8px;border-radius:50%;background:#a855f7;box-shadow:0 0 12px #a855f7;left:-80px;top:20px;animation:particle1 5s ease-in-out infinite;"></div>
      <div style="position:absolute;width:5px;height:5px;border-radius:50%;background:#60a5fa;box-shadow:0 0 10px #60a5fa;left:90px;top:40px;animation:particle2 6s ease-in-out 1s infinite;"></div>
      <div style="position:absolute;width:6px;height:6px;border-radius:50%;background:#f472b6;box-shadow:0 0 10px #f472b6;left:-120px;top:80px;animation:particle3 7s ease-in-out .5s infinite;"></div>
      <div style="position:absolute;width:4px;height:4px;border-radius:50%;background:#c084fc;box-shadow:0 0 8px #c084fc;left:130px;top:10px;animation:particle4 5.5s ease-in-out 2s infinite;"></div>
      <div style="position:absolute;width:7px;height:7px;border-radius:50%;background:#38bdf8;box-shadow:0 0 10px #38bdf8;left:60px;top:-30px;animation:particle1 8s ease-in-out 1.5s infinite;"></div>
      <div style="position:absolute;width:5px;height:5px;border-radius:50%;background:#e879f9;box-shadow:0 0 8px #e879f9;left:-60px;top:-20px;animation:particle2 6.5s ease-in-out 3s infinite;"></div>
    </div>

    <!-- Rotating outer ring -->
    <div style="position:absolute;left:50%;top:20px;transform:translateX(-50%);width:580px;height:580px;border:1px dashed rgba(168,85,247,.3);border-radius:50%;z-index:1;animation:haloRotate 18s linear infinite;"></div>
    <!-- Rotating inner ring reverse -->
    <div style="position:absolute;left:50%;top:50px;transform:translateX(-50%);width:460px;height:460px;border:1px dashed rgba(59,130,246,.25);border-radius:50%;z-index:1;animation:haloRotateRev 12s linear infinite;"></div>

    <!-- Left -->
    <div class="left">
      <div class="ai card-3d">
        <div class="airow">
          <i class="fas fa-brain brain"></i>
          <div>
            <h3>DRM CarePoint AI<sup class="tm">™</sup></h3>
            <div class="wave"></div>
          </div>
        </div>
        <p>The One Minute Clinic, Anywhere.</p>
      </div>
      <div class="headline">Your health checkup.<br><span class="grad">In 10 minutes.</span><br>Around the corner.</div>
      <div style="display:flex;align-items:center;gap:14px;flex-wrap:nowrap;">
        <a href="#kiosk" style="display:inline-flex;align-items:center;white-space:nowrap;background:linear-gradient(90deg,#a855f7,#3b82f6);color:#fff;padding:13px 28px;border-radius:30px;font-size:14px;font-weight:700;text-decoration:none;box-shadow:0 0 28px rgba(168,85,247,.5);">Explore DRM CarePoint<sup class="tm">™</sup></a>
        <a href="#kiosk" class="watch" style="margin:0;background:rgba(15,50,180,.45);border:2px solid #4D8DFF;border-radius:30px;padding:8px 18px 8px 8px;white-space:nowrap;box-shadow:0 0 18px rgba(77,141,255,.5);text-decoration:none;cursor:pointer;">
          <div class="play" style="width:34px;height:34px;flex-shrink:0;box-shadow:0 0 14px #8f31ff;border-color:rgba(255,255,255,.4);"><i class="fas fa-play" style="font-size:12px;"></i></div>
          <span style="font-size:13px;font-weight:600;color:#fff;">Watch How It Works</span>
        </a>
      </div>
    </div>

    <!-- Kiosk Image -->
    <img class="pod" src="kisko.webp" alt="DRM HealthLink Kiosk">
    <!-- Floor Ring under Kiosk -->
    <div class="pod-ring"><div class="r1"></div><div class="r2"></div><div class="glow"></div></div>

    <!-- Right -->
    <div class="right">
      <div class="vital card-3d-rev">
        <div style="position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(168,85,247,.8),transparent);animation:scanLine 2.5s linear infinite;"></div>
        <i class="fas fa-heartbeat heart"></i>
        <h3>Vital Connected</h3>
        <p>Your health,<br>always monitored.</p>
      </div>
      <div class="choice hot card-3d" onclick="openModal('patientLoginModal')">
        <i class="far fa-user"></i>
        <div><h3>I'm a Patient</h3><p>Access care, anytime.</p></div>
        <i class="fas fa-arrow-right arrow"></i>
      </div>
      <div class="choice blue card-3d-rev" onclick="openModal('doctorLoginModal')">
        <i class="fas fa-user-md"></i>
        <div><h3>I'm a Doctor</h3><p>Serve better, together.</p></div>
        <i class="fas fa-arrow-right arrow"></i>
      </div>
    </div>

    <div class="scroll">
      <span class="mouse"></span>
      <span>Scroll Down</span>
    </div>

  
  </main>
  <!-- Stats Bar -->
  <div class="wrap stat-strip">
    <div class="stat"><div class="stat-pulse" style="--sc:#4FD4FA;--sd:0s"><svg viewBox="0 0 100 40" preserveAspectRatio="none"><path d="M0,20 L40,20 L45,5 L50,35 L55,15 L60,25 L65,20 L100,20"/></svg></div><i class="fas fa-vials" style="color:#4FD4FA;text-shadow:0 0 12px #4FD4FA;"></i><b>60+</b><span>Health tests in one CarePoint<sup class="tm">™</sup></span></div>
    <div class="stat"><div class="stat-pulse" style="--sc:#a855f7;--sd:0.8s"><svg viewBox="0 0 100 40" preserveAspectRatio="none"><path d="M0,20 L40,20 L45,5 L50,35 L55,15 L60,25 L65,20 L100,20"/></svg></div><i class="fas fa-clock" style="color:#a855f7;text-shadow:0 0 12px #a855f7;"></i><b>10 min</b><span>For a complete health checkup</span></div>
    <div class="stat"><div class="stat-pulse" style="--sc:#4FD4FA;--sd:1.6s"><svg viewBox="0 0 100 40" preserveAspectRatio="none"><path d="M0,20 L40,20 L45,5 L50,35 L55,15 L60,25 L65,20 L100,20"/></svg></div><i class="fas fa-dollar-sign" style="color:#4FD4FA;text-shadow:0 0 12px #4FD4FA;"></i><b>$2 to $5</b><span>Typical cost per test</span></div>
    <div class="stat"><div class="stat-pulse" style="--sc:#a855f7;--sd:2.4s"><svg viewBox="0 0 100 40" preserveAspectRatio="none"><path d="M0,20 L40,20 L45,5 L50,35 L55,15 L60,25 L65,20 L100,20"/></svg></div><i class="fas fa-bolt" style="color:#a855f7;text-shadow:0 0 12px #a855f7;"></i><b>Instant</b><span>Reports via WhatsApp, SMS &amp; email</span></div>
  </div>
</div>
  </div>
</section>

<!-- -- MOBILE HERO (only visible on =768px) -- -->
<div class="mob-hero" style="
  background: linear-gradient(135deg, #4D8DFF 0%, #1E63E9 45%, #0E3FAE 100%); /* solutions.php gradient */
  position: relative; overflow: hidden; color: #fff; padding-bottom: 5px;
">
  <!-- Mobile bubble canvas same as desktop bgMedCanvas -->
  <canvas id="mobBubbleCanvas" style="position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;"></canvas>


  <!-- MAIN CONTENT: left text + right machine same top alignment -->
  <div style="display:flex;align-items:flex-start;justify-content:space-between;padding:10px 10px 0 14px;position:relative;z-index:5;gap:8px;">

    <!-- LEFT: text + buttons -->
    <div style="flex:1;min-width:0;animation:mob-slideLeft 1.2s cubic-bezier(.16,1,.3,1) .2s both;padding-top:4px;">
      <!-- badge -->

      <div style="font-weight:800;font-size:36px;line-height:.92;letter-spacing:-2px;margin-bottom:12px;">
        Your health checkup.<br><span style="background:linear-gradient(90deg,#a668ff,#ff42b9);-webkit-background-clip:text;color:transparent;">In 10 minutes.</span><br>Around the corner.
      </div>
      <!-- CTA buttons -->
      <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:nowrap;">
        <a href="#kiosk" style="display:inline-flex;align-items:center;white-space:nowrap;background:linear-gradient(90deg,#a855f7,#3b82f6);color:#fff;padding:9px 16px;border-radius:24px;font-size:11px;font-weight:700;text-decoration:none;box-shadow:0 0 16px rgba(168,85,247,.5);">Explore CarePoint<sup class="tm">™</sup></a>
        <a href="#kiosk" style="display:inline-flex;align-items:center;gap:6px;background:rgba(15,50,180,.45);border:2px solid #4D8DFF;border-radius:24px;padding:7px 14px 7px 7px;white-space:nowrap;cursor:pointer;box-shadow:0 0 14px rgba(77,141,255,.45);text-decoration:none;">
          <div style="width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(59,130,246,.8);display:grid;place-items:center;"><i class="fas fa-play" style="font-size:9px;"></i></div>
          <span style="font-size:11px;font-weight:600;color:#fff;">Watch How It Works</span>
        </a>
      </div>
      <!-- buttons: side by side horizontal, compact -->
      <div style="display:flex;flex-direction:row;gap:8px;margin-top:4px;">
        <button onclick="openModal('patientLoginModal')" style="flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:7px;background:linear-gradient(90deg,#a855f7,#3b82f6);border:none;border-radius:12px;padding:9px 8px;color:#fff;cursor:pointer;box-shadow:0 4px 18px rgba(168,85,247,.35);transition:transform .15s;" onmousedown="this.style.transform='scale(.96)'" onmouseup="this.style.transform=''" ontouchstart="this.style.transform='scale(.96)'" ontouchend="this.style.transform=''">
          <i class="far fa-user" style="font-size:13px;color:#fff;"></i>
          <div style="font-size:10px;font-weight:800;">Patient</div>
        </button>
        <button onclick="openModal('doctorLoginModal')" style="flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:7px;background:linear-gradient(90deg,#3b82f6,#a855f7);border:none;border-radius:12px;padding:9px 8px;color:#fff;cursor:pointer;box-shadow:0 4px 18px rgba(59,130,246,.3);transition:transform .15s;" onmousedown="this.style.transform='scale(.96)'" onmouseup="this.style.transform=''" ontouchstart="this.style.transform='scale(.96)'" ontouchend="this.style.transform=''">
          <i class="fas fa-user-md" style="font-size:13px;color:#fff;"></i>
          <div style="font-size:10px;font-weight:800;">Doctor</div>
        </button>
      </div>
    </div>

    <!-- RIGHT: machine + rings same top padding as left -->
    <div style="flex-shrink:0;width:150px;position:relative;display:flex;flex-direction:column;align-items:center;animation:mob-slideRight 1.2s cubic-bezier(.16,1,.3,1) .3s both;padding-top:4px;margin-bottom:0;">
      <!-- halo ring -->
      <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-54%);width:158px;height:158px;border:2px solid #a855f7;border-radius:50%;animation:mob-ring-pulse 3s ease-in-out infinite;z-index:1;"></div>
      <!-- inner ring -->
      <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-54%);width:128px;height:128px;border:1px solid rgba(192,132,252,.5);border-radius:50%;z-index:1;"></div>
      <!-- machine image -->
      <img src="kisko.webp" alt="Kiosk"
           style="width:148px;position:relative;z-index:2;filter:drop-shadow(0 0 30px rgba(174,45,255,.7));animation:mob-floatY 3.5s ease-in-out infinite;transform:perspective(400px) rotateY(18deg) rotateX(4deg);transform-origin:center center;">
      <!-- floor ring -->
      <div style="width:118px;height:26px;border-radius:50%;border:3px solid #a855f7;transform:perspective(200px) rotateX(78deg);box-shadow:0 0 14px 4px #a855f7,0 0 35px 8px rgba(168,85,247,.5);margin-top:-18px;position:relative;z-index:3;animation:mob-ring-pulse 3s ease-in-out infinite;"></div>
      <!-- side ring left -->
      <div style="position:absolute;left:-16px;top:38%;width:46px;height:46px;border:1.5px solid rgba(168,85,247,.4);border-radius:50%;animation:mob-ring-pulse 4s ease-in-out .5s infinite;"></div>
      <!-- side ring right -->
      <div style="position:absolute;right:-16px;top:54%;width:36px;height:36px;border:1.5px solid rgba(59,130,246,.4);border-radius:50%;animation:mob-ring-pulse 4s ease-in-out 1s infinite;"></div>
    </div>
  </div>

  <!-- STATS BAR: single bar with dividers, same as desktop -->
  <div class="mobile-stats-container">
  <?php
  $mob_stats = [
    ['icon' => 'fa-vials',       'color' => '#a855f7', 'num' => '60+',     'lab' => 'Tests'],
    ['icon' => 'fa-clock',       'color' => '#4fd4fa', 'num' => '10 min',  'lab' => 'Checkup'],
    ['icon' => 'fa-dollar-sign', 'color' => '#e028d6', 'num' => '$2-$5',   'lab' => 'Per Test'],
    ['icon' => 'fa-bolt',        'color' => '#0ba7ff', 'num' => 'Instant', 'lab' => 'Reports'],
  ];
  foreach($mob_stats as $idx => $ms): ?>
  <div class="mob-stat-item">
    <!-- Smooth ECG Drawing Wave for each card -->
    <div class="mob-card-pulse" style="--pulse-color: <?= $ms['color'] ?>; --pulse-delay: <?= $idx * 0.8 ?>s;">
      <svg viewBox="0 0 100 40" preserveAspectRatio="none">
        <path d="M0,20 L40,20 L45,5 L50,35 L55,15 L60,25 L65,20 L100,20"/>
      </svg>
    </div>
    
    <div class="mob-icon-wrap" style="color: <?= $ms['color'] ?>;">
      <i class="fas <?= $ms['icon'] ?>"></i>
    </div>
    <div class="mob-num"><?= $ms['num'] ?></div>
    <div class="mob-lab"><?= $ms['lab'] ?></div>
  </div>
  <?php endforeach; ?>
</div>
</div>


<!-- ================= PROBLEM / CONCEPT ================= -->
<section id="concept" class="service-section" style="padding:100px 0 80px;background:#ffffff;">
  <div class="container">
    <div class="text-center mb-5 reveal from-bottom">
      <span class="sec-badge" style="background:rgba(59,130,246,.15);border:1px solid rgba(59,130,246,.4);color:#60a5fa;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:6px 18px;border-radius:20px;">Why DRM HealthLink™ Exists</span>
      <h2 class="reveal from-bottom d2" style="font-size:48px;font-weight:800;margin:20px 0 14px;letter-spacing:-2px;">"Prevention is better than cure." <span style="background:linear-gradient(90deg,#a855f7,#3b82f6);-webkit-background-clip:text;color:transparent;">So why do so few get checked?</span></h2>
      <p class="reveal from-bottom d3" style="color:#475569;font-size:16px;max-width:640px;margin:0 auto;">We all know early detection saves lives. Yet most people can't remember their last health checkup. Three barriers stand in the way, everywhere in the world.</p>
    </div>
    <div class="row g-4 mb-5">
      <?php foreach([
        ['','Awareness','Silent conditions like diabetes and hypertension stay hidden until they turn serious. If nothing hurts, why get tested?','168,85,247'],
        ['','Affordability','A basic checkup costs $25-$45 at a hospital or lab. Too much for routine, repeated screening.','59,130,246'],
        ['','Accessibility','Testing means travelling to a facility and queueing for hours. Healthcare is concentrated where people aren\'t.','168,85,247'],
      ] as $i=>$b): ?>
      <div class="col-md-4 reveal from-bottom d<?=$i+1?>">
        <div class="svc-hover" style="background:#f8faff;border:1.5px solid rgba(<?=$b[3]?>,.25);border-radius:20px;padding:36px 28px;height:100%;box-shadow:0 4px 24px rgba(59,130,246,.07);">
          <div style="font-size:11px;font-weight:800;color:rgba(<?=$b[3]?>,1);letter-spacing:2px;text-transform:uppercase;margin-bottom:14px;opacity:.9;"><?=$b[0]?></div>
          <h4 style="font-size:22px;font-weight:800;margin-bottom:12px;color:#0f172a;"><?=$b[1]?></h4>
          <p style="color:#475569;font-size:15px;line-height:1.7;margin:0;"><?=$b[2]?></p>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
    <div class="reveal from-bottom" style="background:linear-gradient(135deg,rgba(88,28,220,.3),rgba(15,50,180,.2));border:1px solid rgba(168,85,247,.35);border-radius:24px;padding:40px 48px;text-align:center;">
      <h3 style="font-size:24px;font-weight:800;margin-bottom:14px;">DRM HealthLink™ removes all three barriers at once, with one intelligent, always available community <em style="color:#c084fc;">CarePoint™</em>.</h3>
      <a href="#kiosk" style="display:inline-block;background:linear-gradient(90deg,#a855f7,#3b82f6);border:none;color:#fff;padding:14px 36px;border-radius:30px;font-size:15px;font-weight:600;text-decoration:none;box-shadow:0 0 30px rgba(168,85,247,.4);">See How It Works</a>
    </div>
  </div>
</section>

<!-- ================= FLOW STATEMENT ================= -->
<div class="reveal from-bottom flow-statement-div" style="background:linear-gradient(135deg,#4D8DFF 0%,#1E63E9 45%,#0E3FAE 100%);  /* solutions.php gradient */border-top:1px solid rgba(168,85,247,.2);border-bottom:1px solid rgba(168,85,247,.2);padding:60px 0;">
  <div class="container" style="text-align:center;">
    <h2 style="font-size:clamp(24px,3.5vw,40px);font-weight:800;margin-bottom:16px;">Hospitals don't have a capacity problem.<br>They have a <span style="color:#ffffff;-webkit-text-fill-color:#ffffff;">flow problem</span>.</h2>
    <p style="color:#cce4ff;font-size:16px;max-width:640px;margin:0 auto;">DRM CarePoint™ stations sit inside communities and structure patient flow before it reaches the hospital. Better flow. Better experience. Better outcomes. Better utilization.</p>
  </div>
</div>

<!-- ================= KIOSK / JOURNEY ================= -->
<section id="kiosk" class="service-section" style="padding:100px 0 80px;background:#ffffff;">
  <div class="container">
    <div class="text-center mb-5 reveal from-bottom">

      <h2 class="reveal from-bottom d2" style="font-size:48px;font-weight:800;margin:20px 0 14px;letter-spacing:-2px;">One kiosk. <span style="background:linear-gradient(90deg,#a855f7,#3b82f6);-webkit-background-clip:text;color:transparent;">A complete clinic experience.</span></h2>
      <p class="reveal from-bottom d3" style="color:#cce4ff;font-size:16px;max-width:600px;margin:0 auto;">Certified point of care medical devices, AI driven assessment, and live physician teleconsultation in a single smart kiosk.</p>
    </div>
    <div class="row g-4 align-items-center mb-5">
      <div class="col-md-5 reveal from-left">
        <img src="kisko.webp" alt="DRM CarePoint Kiosk" style="width:100%;border-radius:20px;box-shadow:0 0 60px rgba(168,85,247,.3);">
      </div>
      <div class="col-md-7 reveal from-right">
        <ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px;">
          <?php foreach([
            ['Fully equipped','ECG, blood pressure, SpO2, digital stethoscope, lung function, hearing, vision, and a fingertip blood test area.'],
            ['Anyone can use it','Multilingual, guided, and assisted for first-time and elderly users.'],
            ['Deploys anywhere','Portable, power independent, offline capable, private enclosed design.'],
            ['Hygienic by design','Single use safety lancets and secure medical waste disposal.'],
          ] as $f): ?>
          <li style="display:flex;gap:14px;align-items:flex-start;background:rgba(15,50,180,.2);border:1px solid rgba(168,85,247,.25);border-radius:14px;padding:18px 20px;">
            <i class="fas fa-check-circle" style="color:#a855f7;font-size:18px;margin-top:2px;flex-shrink:0;"></i>
            <div><strong style="font-size:15px;"><?=$f[0]?>:</strong> <span style="color:#cce4ff;font-size:15px;"><?=$f[1]?></span></div>
          </li>
          <?php endforeach; ?>
        </ul>
      </div>
    </div>
    <!-- Journey Steps -->
    <div class="row g-4">
      <?php
      $journey = [
        ['Register in seconds','A mobile number and a few basic details. Returning visitors are recognised automatically through their digital health record.','fa-id-card'],
        ['Vitals & body composition','Temperature, SpO2, blood pressure, height by ultrasonic sensor, and full body composition including BMI, body fat, muscle mass.','fa-weight'],
        ['Fingertip blood tests','Glucose in seconds and hemoglobin in about twenty seconds, from a single hygienic, single use finger prick.','fa-tint'],
        ['Advanced assessments','ECG with specialist reviewed report in ~10 minutes, pulmonary function testing, digital stethoscope, audiometry, vision screening.','fa-heartbeat'],
        ['Consult a doctor','Secure video consultation with a physician who reviews your results on screen in real time.','fa-video'],
        ['Report, plan & records','Comprehensive report, AI powered personalised meal plan, and prescription delivered instantly via WhatsApp, SMS, and email.','fa-file-medical'],
      ];
      foreach($journey as $i=>$j): ?>
      <div class="col-md-4 reveal from-bottom d<?=($i%3)+1?>">
        <div class="svc-hover" style="background:rgba(15,50,180,.2);border:1px solid rgba(168,85,247,.3);border-radius:18px;padding:28px 24px;height:100%;position:relative;">
          <div style="position:absolute;top:14px;right:16px;font-size:11px;font-weight:800;color:rgba(168,85,247,.4);"><?=str_pad($i+1,2,'0',STR_PAD_LEFT)?></div>
          <div style="width:52px;height:52px;border-radius:50%;background:rgba(168,85,247,.2);border:1px solid rgba(168,85,247,.5);display:grid;place-items:center;margin-bottom:16px;">
            <i class="fas <?=$j[2]?>" style="font-size:20px;color:#c084fc;"></i>
          </div>
          <h5 style="font-size:17px;font-weight:700;margin-bottom:8px;color:#ffffff;"><?=$j[0]?></h5>
          <p style="color:#cce4ff;font-size:14px;line-height:1.6;margin:0;"><?=$j[1]?></p>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<!-- ================= WHAT WE TEST ================= -->
<section id="tests" class="service-section" style="padding:0;background:#ffffff;">
  <!-- Blue header strip -->
  <div style="background:linear-gradient(135deg,#4D8DFF 0%,#1E63E9 45%,#0E3FAE 100%);padding:72px 0 56px;">
    <div class="container">
      <div class="text-center reveal from-bottom">

        <h2 class="reveal from-bottom d2" style="font-size:48px;font-weight:800;margin:20px 0 14px;letter-spacing:-2px;">60+ tests. <span style="color:#ffffff !important;-webkit-text-fill-color:#ffffff !important;">From everyday vitals to cardiac markers.</span></h2>
        <p class="reveal from-bottom d3" style="color:rgba(255,255,255,.82);font-size:16px;max-width:560px;margin:0 auto;">Covering 80-90% of everyday community screening demand, with a menu that keeps growing.</p>
      </div>
    </div>
  </div>
  <!-- White cards area -->
  <div style="background:#ffffff;padding:64px 0 80px;">
  <div class="container">
    <div class="row g-4">
      <?php
      $tests = [
        ['fa-heartbeat','Vitals & Body Composition','Blood pressure, SpO2, temperature, BMI, body fat, muscle mass, metabolic age and more.','No sample needed','168,85,247'],
        ['fa-lungs','Heart & Lungs','6 and 12 lead ECG with specialist review, lung function, digital stethoscope, heart rate variability.','Specialist reviewed','59,130,246'],
        ['fa-tint','Fingertip Blood Tests','Glucose, HbA1c, hemoglobin, full lipid profile, uric acid, CRP and more. Results in seconds to minutes.','One finger prick','168,85,247'],
        ['fa-virus','Rapid Infection Screening','Malaria, dengue, typhoid, hepatitis, HIV, COVID and flu, screened in minutes.','Community ready','59,130,246'],
        ['fa-heart','Cardiac Markers','Troponin, CK-MB, NT-proBNP and D-Dimer via rapid cartridges, reviewed immediately by a telemedicine physician.','15 minute results','168,85,247'],
        ['fa-home','DRM HealthLink<sup class="tm">™</sup> Home Kits','Women&#39;s health, urine screening, and workplace programmes as private home kits, with results synced to your app.','Private &amp; connected','59,130,246'],
      ];foreach($tests as $i=>$t): ?>
      <div class="col-md-4 reveal from-bottom d<?=($i%3)+1?>">
        <div class="svc-hover" style="background:#f8faff;border:1.5px solid rgba(<?=$t[4]?>,.2);border-radius:20px;padding:32px 24px;height:100%;box-shadow:0 4px 24px rgba(59,130,246,.07);">
          <div style="width:56px;height:56px;border-radius:16px;background:rgba(<?=$t[4]?>,.15);border:1px solid rgba(<?=$t[4]?>,.4);display:grid;place-items:center;margin-bottom:16px;"><i class="fas <?=$t[0]?>" style="font-size:22px;color:rgba(<?=$t[4]?>,1);"></i></div>
          <h4 style="font-size:19px;font-weight:700;margin-bottom:10px;color:#0f172a;"><?=$t[1]?></h4>
          <p style="color:#0f172a;font-size:14px;line-height:1.7;margin-bottom:14px;"><?=$t[2]?></p>
          <span style="display:inline-block;background:rgba(<?=$t[4]?>,.12);border:1px solid rgba(<?=$t[4]?>,.4);color:rgba(<?=$t[4]?>,1);font-size:11px;font-weight:600;padding:4px 12px;border-radius:20px;"><?=$t[3]?></span>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
    <p class="reveal from-bottom" style="color:#0f172a;font-size:13px;margin-top:28px;text-align:center;">Complementing labs, not competing. DRM CarePoint™ screens and detects early; laboratories investigate in depth.</p>
  </div>
  </div>
</section>

<!-- ================= TECHNOLOGY ================= -->
<section id="technology" class="service-section" style="padding:100px 0 80px;background:#ffffff;">
  <div class="container">
    <div class="text-center mb-5 reveal from-bottom">
      <span class="sec-badge" style="background:linear-gradient(90deg,rgba(79,212,250,.15),rgba(176,140,255,.15));border:1px solid rgba(79,212,250,.4);color:#4FD4FA;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:6px 18px;border-radius:20px;">Powered by DRM CarePoint AI™</span>
      <h2 class="reveal from-bottom d2" style="font-size:48px;font-weight:800;margin:20px 0 14px;letter-spacing:-2px;">The AI system prepares. <span style="background:linear-gradient(90deg,#4FD4FA,#B08CFF);-webkit-background-clip:text;color:transparent;">Doctors decide.</span></h2>
      <p class="reveal from-bottom d3" style="color:#cce4ff;font-size:16px;max-width:600px;margin:0 auto;">Symptoms are structured, risks are categorized, and vitals are captured before the patient even sees the doctor. DRM CarePoint AI™ empowers medical professionals. It never replaces them.</p>
    </div>
    <div class="row g-4 mb-4">
      <?php foreach([
        ['Prepare','AI Triage & Intake','Structured symptoms, urgency scoring, and a standardized patient profile, ready for clinical review.','168,85,247'],
        ['Connect','Devices, Records & Teleconsult','Every certified device feeds one secure record, visible to your physician in real time, portable across every unit worldwide.','59,130,246'],
        ['Protect','Privacy by Design','Encrypted everywhere, GDPR compliant, HIPAA aligned safeguards, consent first, fully audited.','168,85,247'],
      ] as $i=>$tc): ?>
      <div class="col-md-4 reveal from-bottom d<?=$i+1?>">
        <div class="svc-hover" style="background:rgba(15,50,180,.2);border:1px solid rgba(<?=$tc[3]?>,.3);border-radius:20px;padding:36px 28px;height:100%;">
          <div style="font-size:11px;font-weight:800;color:rgba(<?=$tc[3]?>,1);letter-spacing:2px;text-transform:uppercase;margin-bottom:12px;"><?=$tc[0]?></div>
          <h4 style="font-size:21px;font-weight:700;margin-bottom:12px;color:#ffffff;"><?=$tc[1]?></h4>
          <p style="color:#cce4ff;font-size:15px;line-height:1.7;margin:0;"><?=$tc[2]?></p>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
    <div class="reveal from-bottom" style="display:flex;flex-wrap:wrap;justify-content:center;gap:16px;">
      <?php foreach(['Clinically validated protocols','Every prescription physician verified','Offline capable operation','Anonymised population insights only'] as $tr): ?>
      <div style="background:rgba(15,50,180,.2);border:1px solid rgba(168,85,247,.25);border-radius:30px;padding:10px 22px;font-size:13px;color:#dbeafe;display:flex;align-items:center;gap:8px;">
        <i class="fas fa-check-circle" style="color:#a855f7;"></i><?=$tr?>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<!-- ================= VALUE STRIP ================= -->
<div class="reveal from-bottom value-strip-div" style="background:linear-gradient(135deg,#4D8DFF 0%,#1E63E9 45%,#0E3FAE 100%);  /* solutions.php gradient */border-top:1px solid rgba(168,85,247,.15);border-bottom:1px solid rgba(168,85,247,.15);padding:60px 0;">
  <div class="container">
    <div class="text-center mb-4">
      <h2 style="font-size:36px;font-weight:800;">Everyone in the system <span style="background:linear-gradient(90deg,#a855f7,#3b82f6);-webkit-background-clip:text;color:transparent;">wins.</span></h2>
    </div>
    <div class="row g-3">
      <?php foreach([
        ['Patients','Better access, faster service, near zero wait.','168,85,247'],
        ['Doctors','Less admin, more time for clinical decisions.','59,130,246'],
        ['Hospitals','Better flow, higher throughput, smart utilization.','168,85,247'],
        ['Institutions','Efficiency, insight, and community readiness.','59,130,246'],
      ] as $v): ?>
      <div class="col-md-3 col-6">
        <div style="background:rgba(15,50,180,.2);border:1px solid rgba(<?=$v[2]?>,.3);border-radius:16px;padding:24px 20px;text-align:center;">
          <strong style="font-size:16px;display:block;margin-bottom:8px;"><?=$v[0]?></strong>
          <span style="color:#cce4ff;font-size:14px;"><?=$v[1]?></span>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</div>

<!-- ================= TELEMEDICINE ================= -->
<section id="telemedicine" class="service-section" style="padding:100px 0 80px;background:#ffffff;">
  <div class="container">
    <div class="row g-5 align-items-center">
      <div class="col-md-6 reveal from-left">

        <h2 style="font-size:clamp(24px,3vw,36px);font-weight:800;margin-bottom:16px;">Can't reach a DRM CarePoint™?<br><span style="background:linear-gradient(90deg,#a855f7,#3b82f6);-webkit-background-clip:text;color:transparent;">Care still reaches you.</span></h2>
        <p style="color:#cce4ff;font-size:15px;line-height:1.8;margin-bottom:20px;">The kiosk is the heart of DRM HealthLink™. For those who can't visit one nearby, the DRM HealthLink™ portal extends a part of the same care: secure video consultation with verified physicians, digital prescriptions, and access to your complete health record from any device, anywhere in the world.</p>
        <ul style="list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:10px;">
          <?php foreach(['Verified physicians, available around the clock','Digital prescriptions shared with any pharmacy','Kiosk visits, home kit results, and online consultations in one unified record'] as $li): ?>
          <li style="display:flex;align-items:center;gap:10px;font-size:14px;color:#dbeafe;">
            <i class="fas fa-check-circle" style="color:#a855f7;"></i><?=$li?>
          </li>
          <?php endforeach; ?>
        </ul>
        <button onclick="openModal('patientLoginModal')" style="background:linear-gradient(90deg,#a855f7,#3b82f6);border:none;color:#fff;padding:14px 36px;border-radius:30px;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 0 30px rgba(168,85,247,.4);">Open the Patient Portal</button>
      </div>
      <div class="col-md-6 reveal from-right">
        <div style="background:rgba(15,50,180,.2);border:1px solid rgba(168,85,247,.3);border-radius:24px;padding:40px;text-align:center;">
          <i class="fas fa-laptop-medical" style="font-size:80px;color:#c084fc;margin-bottom:20px;display:block;"></i>
          <h4 style="font-size:20px;font-weight:700;margin-bottom:10px;">DRM HealthLink™ Portal</h4>
          <p style="color:#cce4ff;font-size:15px;">Secure telemedicine, digital records & prescriptions  accessible from any device, anywhere in the world.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ================= PARTNER CTA ================= -->
<section class="service-section" style="padding:80px 0;background:#ffffff;">  <!-- solutions.php gradient -->
  <div class="container">
    <div class="reveal from-bottom" style="background:linear-gradient(135deg,#4D8DFF 0%,#1E63E9 45%,#0E3FAE 100%);border:1px solid rgba(168,85,247,.25);border-radius:28px;padding:60px 48px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:28px;">
      <div style="max-width:600px;">
        <h2 style="font-size:clamp(22px,3vw,34px);font-weight:800;margin-bottom:12px;color:#0f172a;">Bring a DRM CarePoint™ to your community, campus, or storefront.</h2>
        <p style="color:#cce4ff;font-size:15px;margin:0;">Corporates, pharmacies, hospitals, labs, public health authorities, CSR programmes, and investors: there is a model for you.</p>
      </div>
      <a href="contact.php" style="display:inline-block;background:linear-gradient(90deg,#a855f7,#3b82f6);border:none;color:#fff;padding:16px 40px;border-radius:30px;font-size:16px;font-weight:700;text-decoration:none;box-shadow:0 0 40px rgba(168,85,247,.5);white-space:nowrap;">Discuss a Deployment</a>
    </div>
  </div>
</section>
<?php /* FAQ SECTION COMMENTED OUT
<section id="faq" class="service-section" style="padding:100px 0 80px;">
  <div class="container">
    <div class="text-center mb-5 reveal from-bottom">
      <span class="sec-badge" style="background:rgba(59,130,246,.15);border:1px solid rgba(59,130,246,.4);color:#60a5fa;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:6px 18px;border-radius:20px;">FAQ</span>
      <h2 class="reveal from-bottom d2" style="font-size:48px;font-weight:800;margin:20px 0 14px;letter-spacing:-2px;">Frequently Asked <span style="background:linear-gradient(90deg,#3b82f6,#a855f7);-webkit-background-clip:text;color:transparent;">Questions</span></h2>
      <p class="reveal from-bottom d3" style="color:#cce4ff;font-size:16px;max-width:520px;margin:0 auto;">Everything you need to know about DRM HealthLink.</p>
    </div>
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <div class="accordion" id="faqAccordion">
          <?php
          $faqs = [
            ['q'=>'What is DRM HealthLink?','a'=>'DRM HealthLink is a global healthcare management and telemedicine platform powered by CarePoint AI. It connects patients with verified doctors worldwide, enabling digital consultations, e-prescriptions, lab referrals, and complete health record management all in one place.'],
            ['q'=>'How do I register as a patient?','a'=>'Click Sign Up, fill in your details, and your unique Health ID is generated instantly. The whole process takes under 2 minutes no paperwork required.'],
            ['q'=>'Are the doctors on DRM HealthLink verified?','a'=>'Yes. Every doctor goes through a strict verification process including license validation, credential review, and admin approval before they can consult patients.'],
            ['q'=>'Can I consult a doctor without a prior appointment?','a'=>'Yes. Our telemedicine feature connects you with an available doctor in under 5 minutes for urgent care no prior appointment needed.'],
            ['q'=>'Is my health data secure?','a'=>'Absolutely. DRM HealthLink uses HIPAA-grade encryption, bcrypt password hashing, end-to-end encrypted video calls, and role-based access control. Your data is never sold or shared with third parties.'],
            ['q'=>'How does the AI-Assisted Intake work?','a'=>'Before your consultation, CarePoint AI collects your symptoms in a structured way and categorizes your risk level helping the doctor understand your condition faster and more accurately.'],
            ['q'=>'How do I receive my digital prescription?','a'=>'After your consultation, the doctor issues a digital prescription directly to your patient portal. You can download, print, or share it with any pharmacy instantly.'],
            ['q'=>'Can I access DRM HealthLink from anywhere in the world?','a'=>'Yes. DRM HealthLink is a globally accessible platform. With an internet connection, you can consult doctors, manage health records, and use all features from any device, anywhere.'],
          ];
          foreach($faqs as $i=>$faq): ?>
          <div class="accordion-item faq-item reveal from-left d<?=$i+1?>" style="background:rgba(15,50,180,.2);border:1px solid rgba(255,255,255,.1);border-radius:14px;margin-bottom:12px;overflow:hidden;">
            <h2 class="accordion-header">
              <button class="accordion-button <?= $i>0?'collapsed':'' ?>" type="button" data-bs-toggle="collapse" data-bs-target="#faq<?=$i?>" style="background:transparent;color:#fff;font-size:15px;font-weight:600;box-shadow:none;padding:20px 24px;">
                <?=$faq['q']?>
              </button>
            </h2>
            <div id="faq<?=$i?>" class="accordion-collapse collapse <?= $i===0?'show':'' ?>" data-bs-parent="#faqAccordion">
              <div class="accordion-body" style="color:#cce4ff;font-size:15px;line-height:1.7;padding:0 24px 20px;"><?=$faq['a']?></div>
            </div>
          </div>
          <?php endforeach; ?>
        </div>
      </div>
    </div>
  </div>
</section>
FAQ SECTION COMMENTED OUT 
<section id="contact" class="service-section" style="padding:80px 0;">
  <div class="container">
    <div class="text-center mb-5 reveal from-bottom">
      <span class="sec-badge" style="background:rgba(168,85,247,.15);border:1px solid rgba(168,85,247,.4);color:#c084fc;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:6px 18px;border-radius:20px;">Get In Touch</span>
      <h2 class="reveal from-bottom d2" style="font-size:48px;font-weight:800;margin:20px 0 14px;letter-spacing:-2px;">Contact <span style="background:linear-gradient(90deg,#a855f7,#3b82f6);-webkit-background-clip:text;color:transparent;">Information</span></h2>
      <p class="reveal from-bottom d3" style="color:#cce4ff;font-size:16px;max-width:520px;margin:0 auto;">We're here to help. Reach out through any channel below.</p>
    </div>
    <div class="row g-4 justify-content-center mb-5">
      <?php
      $contacts = [
        ['icon'=>'fa-user-tie','title'=>'Munawar Zulfiqar','detail'=>'<span style="font-size:12px;color:#cce4ff;">+49 171 3204193 (M)</span><br>','color'=>'168,85,247'],
        ['icon'=>'fa-location-dot','title'=>'Our Address','detail'=>'DRM Pharma &amp; Diagnostic GmbH<br>Odenwaldring 41 63110 Rodgau, Germany','color'=>'59,130,246'],
        ['icon'=>'fa-phone','title'=>'Phone','detail'=>'+49 6106 6978263<br><span style="font-size:12px;color:#cce4ff;">+49 171 3204193 (M)</span>','color'=>'168,85,247'],
        ['icon'=>'fa-envelope','title'=>'Email','detail'=>'info@drmhealthlink.com<br><span style="font-size:12px;color:#cce4ff;"></span>','color'=>'59,130,246'],
      ];
      foreach($contacts as $c): ?>
      <div class="col-md-3 col-sm-6 reveal from-bottom d<?=array_search($c,$contacts)+1?>">
        <div class="contact-hover" style="background:rgba(15,50,180,.2);border:1px solid rgba(<?=$c['color']?>,.35);border-radius:20px;padding:32px 24px;text-align:center;">
          <div class="icon-wrap" style="width:60px;height:60px;border-radius:50%;background:rgba(<?=$c['color']?>,.2);border:1px solid rgba(<?=$c['color']?>,.5);display:grid;place-items:center;margin:0 auto 16px;">
            <i class="fas <?=$c['icon']?> icon-bounce" style="font-size:22px;color:rgba(<?=$c['color']?>,1);"></i>
          </div>
          <h5 style="font-size:16px;font-weight:700;margin-bottom:8px;color:#ffffff;"><?=$c['title']?></h5>
          <p style="color:#cce4ff;font-size:14px;line-height:1.6;margin:0;"><?=$c['detail']?></p>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
    <!-- Website link -->
    <div class="text-center mb-4 reveal from-bottom">
      <a href="https://www.drmhealthlink.com" target="_blank" style="display:inline-flex;align-items:center;gap:10px;background:rgba(15,50,180,.2);border:1px solid rgba(168,85,247,.4);border-radius:14px;padding:14px 28px;color:#c084fc;text-decoration:none;font-size:14px;font-weight:600;transition:all .2s;" onmouseover="this.style.background='rgba(168,85,247,.2)'" onmouseout="this.style.background='rgba(15,50,180,.2)'">
        <i class="fas fa-globe"></i> www.drmhealthlink.com
      </a>
      <p style="color:#93c5fd;font-size:12px;margin-top:10px;">Presented by DRM Pharma &amp; Diagnostic, Germany</p>
    </div>
    <div class="text-center">
      <a href="contact.php" style="background:linear-gradient(90deg,#a855f7,#3b82f6);border:none;color:#fff;padding:14px 40px;border-radius:30px;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 0 30px rgba(168,85,247,.4);text-decoration:none;display:inline-block;"><i class="fas fa-paper-plane me-2"></i>Send Us a Message</a>
    </div>
  </div>
</section>
*/ ?>
<!-- -- FOOTER -- -->
<?php include 'footer.php'; ?>
</div><!-- /#scaleInner -->
</div><!-- /#scaleOuter -->

<div class="modal fade" id="patientLoginModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title-wrap">
          <div class="modal-title-icon">
            <i class="far fa-user" style="color:white;font-size:18px;"></i>
          </div>
          <h5 class="modal-title">Patient Login</h5>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form method="POST">
        <div class="modal-body">
          <?php if (!empty($p_errors)): ?>
            <div class="alert-danger-custom"><?= implode('<br>', $p_errors) ?></div>
          <?php endif; ?>
          <div class="mb-3">
            <label class="form-label">Email Address</label>
            <input type="email" name="p_email" class="form-control" placeholder="you@example.com" value="<?= htmlspecialchars($_POST['p_email'] ?? '') ?>" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Password</label>
            <div class="pw-wrap">
              <input type="password" name="p_password" id="pw_p" class="form-control" placeholder="????????" required>
              <span class="pw-eye" onclick="togglePw('pw_p',this)"><i class="fas fa-eye-slash"></i></span>
            </div>
          </div>
          <button type="submit" name="patient_modal_login" class="btn-modal-submit">Login as Patient</button>
          <div class="modal-switch-link mt-3">
            Don't have an account? <a onclick="switchModal('patientLoginModal','registerModal')">Sign Up</a>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- -- PATIENT REGISTER MODAL -- -->
<div class="modal fade" id="registerModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title-wrap">
          <div class="modal-title-icon">
            <i class="fas fa-user-plus" style="color:white;font-size:18px;"></i>
          </div>
          <h5 class="modal-title">Patient Registration</h5>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form method="POST">
        <div class="modal-body">
          <?php if (!empty($r_errors)): ?>
            <div class="alert-danger-custom"><?= implode('<br>', $r_errors) ?></div>
          <?php endif; ?>
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">Full Name</label>
              <input type="text" name="r_full_name" class="form-control" placeholder="Muhammad Ali" value="<?= htmlspecialchars($r_old['full_name'] ?? '') ?>" required>
            </div>
            <div class="col-md-6">
              <label class="form-label">Email Address</label>
              <input type="email" name="r_email" class="form-control" placeholder="you@example.com" value="<?= htmlspecialchars($r_old['email'] ?? '') ?>" required>
            </div>
            <div class="col-md-6">
              <label class="form-label">Phone Number</label>
              <input type="text" name="r_phone" class="form-control" placeholder="03xx-xxxxxxx" value="<?= htmlspecialchars($r_old['phone'] ?? '') ?>" required>
            </div>
            <div class="col-md-3">
              <label class="form-label">Gender</label>
              <select name="r_gender" class="form-select" required>
                <option value="">Select</option>
                <option value="male"   <?= (($r_old['gender'] ?? '')==='male'  ?'selected':'') ?>>Male</option>
                <option value="female" <?= (($r_old['gender'] ?? '')==='female'?'selected':'') ?>>Female</option>
                <option value="other"  <?= (($r_old['gender'] ?? '')==='other' ?'selected':'') ?>>Other</option>
              </select>
            </div>
            <div class="col-md-3">
              <label class="form-label">Date of Birth</label>
              <input type="date" name="r_dob" class="form-control" value="<?= htmlspecialchars($r_old['dob'] ?? '') ?>" required>
            </div>
            <div class="col-md-6">
              <label class="form-label">Password</label>
              <div class="pw-wrap">
                <input type="password" name="r_password" id="pw_r1" class="form-control" placeholder="Min 6 characters" required>
                <span class="pw-eye" onclick="togglePw('pw_r1',this)"><i class="fas fa-eye-slash"></i></span>
              </div>
            </div>
            <div class="col-md-6">
              <label class="form-label">Confirm Password</label>
              <div class="pw-wrap">
                <input type="password" name="r_password2" id="pw_r2" class="form-control" placeholder="Repeat password" required>
                <span class="pw-eye" onclick="togglePw('pw_r2',this)"><i class="fas fa-eye-slash"></i></span>
              </div>
            </div>
          </div>
          <button type="submit" name="patient_modal_register" class="btn-modal-submit mt-3">Create Patient Account</button>
          <div class="modal-switch-link mt-2">
            Already have an account? <a onclick="switchModal('registerModal','patientLoginModal')">Login</a>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- -- DOCTOR LOGIN MODAL -- -->
<div class="modal fade" id="doctorLoginModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title-wrap">
          <div class="modal-title-icon" style="background:linear-gradient(135deg,#3b82f6,#06b6d4);">
            <i class="fas fa-user-md" style="color:white;font-size:18px;"></i>
          </div>
          <h5 class="modal-title">Doctor Login</h5>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form method="POST">
        <div class="modal-body">
          <?php if (!empty($d_errors)): ?>
            <div class="alert-danger-custom"><?= implode('<br>', $d_errors) ?></div>
          <?php endif; ?>
          <div class="mb-3">
            <label class="form-label">Email Address</label>
            <input type="email" name="d_email" class="form-control" placeholder="doctor@example.com" value="<?= htmlspecialchars($_POST['d_email'] ?? '') ?>" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Password</label>
            <div class="pw-wrap">
              <input type="password" name="d_password" id="pw_d" class="form-control" placeholder="????????" required>
              <span class="pw-eye" onclick="togglePw('pw_d',this)"><i class="fas fa-eye-slash"></i></span>
            </div>
          </div>
          <button type="submit" name="doctor_modal_login" class="btn-modal-submit blue-grad">Login as Doctor</button>
          <div class="modal-switch-link mt-3">
            New doctor? <a onclick="switchModal('doctorLoginModal','doctorRegisterModal')">Register here</a>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- -- DOCTOR REGISTER MODAL -- -->
<div class="modal fade" id="doctorRegisterModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title-wrap">
          <div class="modal-title-icon" style="background:linear-gradient(135deg,#3b82f6,#06b6d4);">
            <i class="fas fa-stethoscope" style="color:white;font-size:18px;"></i>
          </div>
          <h5 class="modal-title">Doctor Registration</h5>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form method="POST" enctype="multipart/form-data">
        <div class="modal-body">
          <?php if (!empty($dr_errors)): ?>
            <div class="alert-danger-custom"><?= implode('<br>', $dr_errors) ?></div>
          <?php endif; ?>
          <?php if (!empty($dr_success)): ?>
            <div class="alert-success-custom">Registration submitted! Admin will verify your account shortly.</div>
          <?php endif; ?>

          <div class="doctor-reg-steps">
            <span class="doctor-reg-step-dot active"></span>
            <span class="doctor-reg-step-dot"></span>
            <span class="doctor-reg-step-dot"></span>
          </div>

          <div class="doctor-reg-step active" data-step="1">
            <div class="doctor-reg-step-title">Step 1 &mdash; Account Basics</div>
            <div class="doctor-reg-step-subtitle">Start with your personal details and secure login information.</div>
            <div class="row g-3">
              <div class="col-md-6">
                <label class="form-label">Full Name</label>
                <input type="text" name="dr_full_name" class="form-control" placeholder="Dr. Ahmed Khan" value="<?= htmlspecialchars($dr_old['full_name'] ?? '') ?>" required>
              </div>
              <div class="col-md-6">
                <label class="form-label">Email Address</label>
                <input type="email" name="dr_email" class="form-control" placeholder="doctor@example.com" value="<?= htmlspecialchars($dr_old['email'] ?? '') ?>" required>
              </div>
              <div class="col-md-6">
                <label class="form-label">Phone Number</label>
                <input type="text" name="dr_phone" class="form-control" placeholder="03xx-xxxxxxx" value="<?= htmlspecialchars($dr_old['phone'] ?? '') ?>" required>
              </div>
              <div class="col-md-6">
                <label class="form-label">Gender</label>
                <select name="dr_gender" class="form-select">
                  <option value="">Select</option>
                  <option value="male"   <?= (($dr_old['gender'] ?? '')==='male'  ?'selected':'') ?>>Male</option>
                  <option value="female" <?= (($dr_old['gender'] ?? '')==='female'?'selected':'') ?>>Female</option>
                  <option value="other"  <?= (($dr_old['gender'] ?? '')==='other' ?'selected':'') ?>>Other</option>
                </select>
              </div>
              <div class="col-md-6">
                <label class="form-label">Password</label>
                <div class="pw-wrap">
                  <input type="password" name="dr_password" id="pw_dr1" class="form-control" placeholder="Min 8 chars, 1 uppercase, 1 number" required>
                  <span class="pw-eye" onclick="togglePw('pw_dr1',this)"><i class="fas fa-eye-slash"></i></span>
                </div>
              </div>
              <div class="col-md-6">
                <label class="form-label">Confirm Password</label>
                <div class="pw-wrap">
                  <input type="password" name="dr_password2" id="pw_dr2" class="form-control" placeholder="Repeat password" required>
                  <span class="pw-eye" onclick="togglePw('pw_dr2',this)"><i class="fas fa-eye-slash"></i></span>
                </div>
              </div>
            </div>
            <div class="doctor-step-actions">
              <div></div>
              <button type="button" class="btn-modal-submit" data-next-step="2">Next Step</button>
            </div>
          </div>

          <div class="doctor-reg-step" data-step="2">
            <div class="doctor-reg-step-title">Step 2 &mdash; Professional Details</div>
            <div class="doctor-reg-step-subtitle">Add your medical credentials and consultation preferences.</div>
            <div class="row g-3">
              <div class="col-md-6">
                <label class="form-label">PMC License Number</label>
                <input type="text" name="dr_pmc" class="form-control" placeholder="PMC-XXXXX" value="<?= htmlspecialchars($dr_old['pmc_license'] ?? '') ?>" required>
              </div>
              <div class="col-md-6">
                <label class="form-label">Specialization</label>
                <select name="dr_specialization" class="form-select" required>
                  <option value="">Select Specialization</option>
                  <?php foreach ($specializations as $sp): ?>
                    <option value="<?= $sp['id'] ?>" <?= (($dr_old['specialization'] ?? 0)==$sp['id']?'selected':'') ?>><?= htmlspecialchars($sp['name']) ?></option>
                  <?php endforeach; ?>
                </select>
              </div>
              <div class="col-md-6">
                <label class="form-label">Qualification</label>
                <input type="text" name="dr_qualification" class="form-control" placeholder="MBBS, FCPS..." value="<?= htmlspecialchars($dr_old['qualification'] ?? '') ?>" required>
              </div>
              <div class="col-md-6">
                <label class="form-label">Experience (Years)</label>
                <input type="number" name="dr_experience" class="form-control" min="0" max="60" placeholder="5" value="<?= htmlspecialchars($dr_old['experience'] ?? '') ?>">
              </div>
              <div class="col-md-6">
                <label class="form-label">Consultation Fee (PKR)</label>
                <input type="number" name="dr_fee" class="form-control" min="0" placeholder="1000" value="<?= htmlspecialchars($dr_old['consultation_fee'] ?? '') ?>" required>
              </div>
              <div class="col-md-6">
                <label class="form-label">City</label>
                <input type="text" name="dr_city" class="form-control" placeholder="Karachi" value="<?= htmlspecialchars($dr_old['city'] ?? '') ?>">
              </div>
              <div class="col-md-12">
                <label class="form-label">Clinic / Hospital Name</label>
                <input type="text" name="dr_clinic" class="form-control" placeholder="City Hospital" value="<?= htmlspecialchars($dr_old['clinic_name'] ?? '') ?>">
              </div>
            </div>
            <div class="doctor-step-actions">
              <button type="button" class="btn-secondary" data-prev-step="1">Back</button>
              <button type="button" class="btn-modal-submit" data-next-step="3">Next Step</button>
            </div>
          </div>

          <div class="doctor-reg-step" data-step="3">
            <div class="doctor-reg-step-title">Step 3 &mdash; Verification Documents</div>
            <div class="doctor-reg-step-subtitle">Upload the documents required for approval and complete your registration.</div>
            <div class="row g-3">
              <div class="col-md-6">
                <label class="form-label">PMC License Document <span style="color:#f87171">*</span></label>
                <input type="file" name="dr_doc_license" class="form-control" accept=".jpg,.jpeg,.png,.pdf" required>
              </div>
              <div class="col-md-6">
                <label class="form-label">CNIC Copy <span style="color:#f87171">*</span></label>
                <input type="file" name="dr_doc_cnic" class="form-control" accept=".jpg,.jpeg,.png,.pdf" required>
              </div>
              <div class="col-md-6">
                <label class="form-label">Qualification Document <span style="color:#93c5fd">(optional)</span></label>
                <input type="file" name="dr_doc_qualification" class="form-control" accept=".jpg,.jpeg,.png,.pdf">
              </div>
              <div class="col-md-6">
                <label class="form-label">Profile Photo <span style="color:#93c5fd">(optional)</span></label>
                <input type="file" name="dr_profile_photo" class="form-control" accept=".jpg,.jpeg,.png">
              </div>
            </div>
            <div class="doctor-step-actions">
              <button type="button" class="btn-secondary" data-prev-step="2">Back</button>
              <button type="submit" name="doctor_modal_register" class="btn-modal-submit blue-grad">Submit Registration</button>
            </div>
            <div class="modal-switch-link mt-2">
              Already registered? <a onclick="switchModal('doctorRegisterModal','doctorLoginModal')">Login here</a>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  // -- HERO CANVAS: Molecular Mesh + Stars + Sparkles --
  (function(){
    var c = document.getElementById('heroCanvas');
    if(!c) return;
    var ctx = c.getContext('2d');
    var mouse = {x:-9999,y:-9999};
    document.addEventListener('mousemove',function(e){mouse.x=e.clientX;mouse.y=e.clientY;});
    function resize(){ c.width=c.offsetWidth; c.height=c.offsetHeight; initNodes(); }

    // -- Molecular nodes --
    var nodes=[], NODE_COUNT=72, CONNECT_DIST=160;
    function initNodes(){
      nodes=[];
      for(var i=0;i<NODE_COUNT;i++){
        nodes.push({
          x:Math.random()*c.width, y:Math.random()*c.height,
          vx:(Math.random()-.5)*0.45, vy:(Math.random()-.5)*0.45,
          r:Math.random()*3+1.5,
          pulse:Math.random()*Math.PI*2,
          pSpeed:Math.random()*0.025+0.01,
          color:Math.random()>0.5?'168,85,247':'59,130,246'
        });
      }
    }

    // -- Stars --
    var stars=[];
    for(var i=0;i<90;i++) stars.push({x:Math.random()*1440,y:Math.random()*900,r:Math.random()*1.4+0.2,a:Math.random(),spd:Math.random()*0.3+0.08,dir:Math.random()>0.5?1:-1});

    // -- Medical plus sparkles --
    var sparks=[];
    for(var k=0;k<14;k++) sparks.push({x:Math.random()*1440,y:Math.random()*900,sz:Math.random()*7+3,a:Math.random(),spd:Math.random()*0.012+0.004,dir:Math.random()>0.5?1:-1,vy:(Math.random()-.5)*0.25});

    resize();
    window.addEventListener('resize',resize);

    function draw(){
      ctx.clearRect(0,0,c.width,c.height);

      // Draw connections
      for(var i=0;i<nodes.length;i++){
        for(var j=i+1;j<nodes.length;j++){
          var dx=nodes[i].x-nodes[j].x, dy=nodes[i].y-nodes[j].y;
          var dist=Math.sqrt(dx*dx+dy*dy);
          if(dist<CONNECT_DIST){
            var alpha=(1-dist/CONNECT_DIST)*0.22;
            // mouse proximity boost
            var mx=nodes[i].x-(mouse.x), my=nodes[i].y-(mouse.y);
            var md=Math.sqrt(mx*mx+my*my);
            if(md<200) alpha+=0.18*(1-md/200);
            ctx.beginPath();
            ctx.moveTo(nodes[i].x,nodes[i].y);
            ctx.lineTo(nodes[j].x,nodes[j].y);
            ctx.strokeStyle='rgba(168,85,247,'+alpha+')';
            ctx.lineWidth=0.8;
            ctx.stroke();
          }
        }
      }

      // Draw nodes
      nodes.forEach(function(n){
        n.x+=n.vx; n.y+=n.vy;
        n.pulse+=n.pSpeed;
        if(n.x<0||n.x>c.width)  n.vx*=-1;
        if(n.y<0||n.y>c.height) n.vy*=-1;
        // mouse repel
        var dx=n.x-mouse.x, dy=n.y-mouse.y, d=Math.sqrt(dx*dx+dy*dy);
        if(d<120){ n.vx+=dx/d*0.6; n.vy+=dy/d*0.6; }
        var glow=Math.sin(n.pulse)*0.5+0.5;
        var grad=ctx.createRadialGradient(n.x,n.y,0,n.x,n.y,n.r*3);
        grad.addColorStop(0,'rgba('+n.color+','+(0.9*glow+0.1)+')');
        grad.addColorStop(1,'rgba('+n.color+',0)');
        ctx.beginPath(); ctx.arc(n.x,n.y,n.r*3,0,Math.PI*2);
        ctx.fillStyle=grad; ctx.fill();
        ctx.beginPath(); ctx.arc(n.x,n.y,n.r,0,Math.PI*2);
        ctx.fillStyle='rgba('+n.color+','+(0.7+glow*0.3)+')';
        ctx.shadowBlur=10; ctx.shadowColor='rgba('+n.color+',0.9)';
        ctx.fill(); ctx.shadowBlur=0;
      });

      // Draw stars
      stars.forEach(function(s){
        s.a+=s.spd*0.01*s.dir; if(s.a>1||s.a<0) s.dir*=-1;
        ctx.beginPath(); ctx.arc(s.x,s.y,s.r,0,Math.PI*2);
        ctx.fillStyle='rgba(200,180,255,'+s.a+')';
        ctx.shadowBlur=5; ctx.shadowColor='rgba(168,85,247,0.7)';
        ctx.fill(); ctx.shadowBlur=0;
      });

      // Draw medical plus sparkles
      sparks.forEach(function(s){
        s.a+=s.spd*s.dir; s.y+=s.vy;
        if(s.a>1||s.a<0) s.dir*=-1;
        if(s.y<0) s.y=c.height; if(s.y>c.height) s.y=0;
        ctx.save(); ctx.globalAlpha=s.a*0.65;
        ctx.strokeStyle='rgba(192,132,252,1)'; ctx.lineWidth=1.5;
        ctx.shadowBlur=8; ctx.shadowColor='rgba(168,85,247,1)';
        ctx.beginPath(); ctx.moveTo(s.x-s.sz,s.y); ctx.lineTo(s.x+s.sz,s.y); ctx.stroke();
        ctx.beginPath(); ctx.moveTo(s.x,s.y-s.sz); ctx.lineTo(s.x,s.y+s.sz); ctx.stroke();
        ctx.restore();
      });

      requestAnimationFrame(draw);
    }
    draw();
  })();
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
  function openModal(id) {
    new bootstrap.Modal(document.getElementById(id)).show();
  }
  function switchModal(hideId, showId) {
    bootstrap.Modal.getInstance(document.getElementById(hideId)).hide();
    setTimeout(function(){ openModal(showId); }, 300);
  }
  document.addEventListener('DOMContentLoaded', function() {
    const steps = Array.from(document.querySelectorAll('.doctor-reg-step'));
    const dots = Array.from(document.querySelectorAll('.doctor-reg-step-dot'));

    function showDoctorStep(step) {
      steps.forEach(function(item) {
        item.classList.toggle('active', Number(item.getAttribute('data-step')) === step);
      });
      dots.forEach(function(dot, index) {
        dot.classList.toggle('active', index + 1 === step);
      });
    }

    document.querySelectorAll('[data-next-step]').forEach(function(btn) {
      btn.addEventListener('click', function() {
        showDoctorStep(Number(this.getAttribute('data-next-step')));
      });
    });

    document.querySelectorAll('[data-prev-step]').forEach(function(btn) {
      btn.addEventListener('click', function() {
        showDoctorStep(Number(this.getAttribute('data-prev-step')));
      });
    });

    showDoctorStep(1);
  });

  <?php
  $requestedModal = '';
  if (isset($_GET['open'])) {
      $requestedModal = preg_replace('/[^a-zA-Z0-9_]/', '', $_GET['open']);
      if (!in_array($requestedModal, ['patientLoginModal','registerModal','doctorLoginModal','doctorRegisterModal'], true)) {
          $requestedModal = '';
      }
  }
  ?>
  <?php if ($requestedModal !== ''): ?>
    document.addEventListener('DOMContentLoaded', function(){ openModal('<?= htmlspecialchars($requestedModal, ENT_QUOTES) ?>'); });
  <?php elseif (!empty($p_errors)): ?>
    document.addEventListener('DOMContentLoaded', function(){ openModal('patientLoginModal'); });
  <?php elseif (!empty($r_errors)): ?>
    document.addEventListener('DOMContentLoaded', function(){ openModal('registerModal'); });
  <?php elseif (!empty($d_errors)): ?>
    document.addEventListener('DOMContentLoaded', function(){ openModal('doctorLoginModal'); });
  <?php elseif (!empty($dr_errors) || !empty($dr_success)): ?>
    document.addEventListener('DOMContentLoaded', function(){ openModal('doctorRegisterModal'); });
  <?php endif; ?>
</script>

<!-- -- RESPONSIVE SCALE SCRIPT --
     Keeps the exact same desktop layout on every screen size:
     instead of re-flowing to a different "mobile" design,
     the whole page (#scaleInner, fixed at 1440px design width)
     is visually scaled down/up to fit the real viewport width. -->
<script>
  (function () {
    var DESIGN_WIDTH = 1440;
    var inner = document.getElementById('scaleInner');
    var outer = document.getElementById('scaleOuter');

    function applyScale() {
      if (!inner || !outer) return;
      if (window.innerWidth <= 1024) {
        inner.style.width = '';
        inner.style.transform = '';
        outer.style.height = '';
        return;
      }
      var scale = window.innerWidth / DESIGN_WIDTH;
      inner.style.width = DESIGN_WIDTH + 'px';
      inner.style.transform = 'scale(' + scale + ')';
      inner.style.transformOrigin = 'top left';
      outer.style.height = (inner.scrollHeight * scale) + 'px';
    }

    window.addEventListener('load', applyScale);
    window.addEventListener('resize', applyScale);
    document.addEventListener('DOMContentLoaded', applyScale);

    window.addEventListener('load', function () {
      setTimeout(applyScale, 50);
      setTimeout(applyScale, 300);
    });
  })();
</script>
<script>
  // Scroll Reveal slow slide-in from sides/bottom
  (function(){
    var els = document.querySelectorAll('.reveal');
    var io = new IntersectionObserver(function(entries){
      entries.forEach(function(e){
        if(e.isIntersecting){
          e.target.classList.add('visible');
          io.unobserve(e.target);
        }
      });
    },{ threshold: 0.06, rootMargin: '0px 0px -40px 0px' });
    els.forEach(function(el){ io.observe(el); });
  })();
</script>
<style>
  body { position: relative; }
  #scaleOuter { position: relative; z-index: 1; }
  .mob-hero { position: relative; z-index: 1; }
  footer { position: relative; z-index: 1; }
</style>
<script>
(function(){
  var cv = null;
  if(!cv) return;
  var cx = cv.getContext('2d');
  var W, H;
  function resize(){ W=cv.width=window.innerWidth; H=cv.height=window.innerHeight; }
  resize(); window.addEventListener('resize', resize);

  // Icon draw functions (SVG-path style on canvas)
  var iconDrawers = [
    // Stethoscope (simplified)
    function(ctx,x,y,s,a,c){
      ctx.save(); ctx.globalAlpha=a; ctx.strokeStyle=c; ctx.lineWidth=s*0.12; ctx.lineCap='round';
      ctx.beginPath(); ctx.arc(x,y-s*0.1,s*0.32,Math.PI*0.1,Math.PI*0.9); ctx.stroke();
      ctx.beginPath(); ctx.moveTo(x-s*0.32,y-s*0.1); ctx.lineTo(x-s*0.32,y+s*0.35);
      ctx.bezierCurveTo(x-s*0.32,y+s*0.7,x+s*0.32,y+s*0.7,x+s*0.32,y+s*0.35);
      ctx.lineTo(x+s*0.32,y+s*0.1); ctx.stroke();
      ctx.beginPath(); ctx.arc(x+s*0.32,y+s*0.05,s*0.13,0,Math.PI*2);
      ctx.fillStyle=c; ctx.fill();
      ctx.restore();
    },
    // Medical cross
    function(ctx,x,y,s,a,c){
      ctx.save(); ctx.globalAlpha=a; ctx.fillStyle=c;
      var t=s*0.28, arm=s*0.5;
      ctx.fillRect(x-t/2,y-arm,t,arm*2);
      ctx.fillRect(x-arm,y-t/2,arm*2,t);
      ctx.restore();
    },
    // Pill capsule
    function(ctx,x,y,s,a,c){
      ctx.save(); ctx.globalAlpha=a;
      var r=s*0.18, len=s*0.55;
      ctx.beginPath();
      ctx.moveTo(x-len+r, y-r); ctx.lineTo(x+len-r, y-r);
      ctx.arc(x+len-r, y, r, -Math.PI/2, Math.PI/2);
      ctx.lineTo(x-len+r, y+r);
      ctx.arc(x-len+r, y, r, Math.PI/2, -Math.PI/2);
      ctx.closePath();
      ctx.strokeStyle=c; ctx.lineWidth=s*0.1; ctx.stroke();
      ctx.beginPath(); ctx.moveTo(x,y-r); ctx.lineTo(x,y+r);
      ctx.stroke();
      ctx.restore();
    },
    // Heartbeat / ECG pulse
    function(ctx,x,y,s,a,c){
      ctx.save(); ctx.globalAlpha=a; ctx.strokeStyle=c;
      ctx.lineWidth=s*0.1; ctx.lineCap='round'; ctx.lineJoin='round';
      ctx.beginPath();
      ctx.moveTo(x-s*0.6,y);
      ctx.lineTo(x-s*0.25,y);
      ctx.lineTo(x-s*0.1,y-s*0.55);
      ctx.lineTo(x+s*0.05,y+s*0.45);
      ctx.lineTo(x+s*0.2,y);
      ctx.lineTo(x+s*0.6,y);
      ctx.stroke();
      ctx.restore();
    },
    // DNA helix (simplified double arc)
    function(ctx,x,y,s,a,c){
      ctx.save(); ctx.globalAlpha=a; ctx.strokeStyle=c; ctx.lineWidth=s*0.09;
      for(var i=0;i<4;i++){
        var yy=y-s*0.5+i*(s*0.33);
        ctx.beginPath();
        ctx.bezierCurveTo(x-s*0.4,yy-s*0.15, x+s*0.4,yy-s*0.15, x+s*0.0,yy+s*0.16);
        ctx.stroke();
        ctx.beginPath();
        ctx.bezierCurveTo(x+s*0.4,yy-s*0.15, x-s*0.4,yy-s*0.15, x-s*0.0,yy+s*0.16);
        ctx.stroke();
      }
      ctx.restore();
    },
    // Shield (health shield)
    function(ctx,x,y,s,a,c){
      ctx.save(); ctx.globalAlpha=a; ctx.strokeStyle=c; ctx.lineWidth=s*0.1;
      ctx.beginPath();
      ctx.moveTo(x,y-s*0.55);
      ctx.lineTo(x+s*0.45,y-s*0.25);
      ctx.lineTo(x+s*0.45,y+s*0.15);
      ctx.quadraticCurveTo(x+s*0.45,y+s*0.55,x,y+s*0.6);
      ctx.quadraticCurveTo(x-s*0.45,y+s*0.55,x-s*0.45,y+s*0.15);
      ctx.lineTo(x-s*0.45,y-s*0.25);
      ctx.closePath(); ctx.stroke();
      // inner cross
      ctx.lineWidth=s*0.08;
      ctx.beginPath(); ctx.moveTo(x,y-s*0.2); ctx.lineTo(x,y+s*0.25); ctx.stroke();
      ctx.beginPath(); ctx.moveTo(x-s*0.2,y+s*0.02); ctx.lineTo(x+s*0.2,y+s*0.02); ctx.stroke();
      ctx.restore();
    }
  ];

  var COLORS = ['rgba(168,85,247,', 'rgba(192,132,252,', 'rgba(59,130,246,', 'rgba(96,165,250,', 'rgba(244,114,182,'];
  var icons = [];
  var COUNT = 48;
  for(var i=0;i<COUNT;i++){
    icons.push({
      x: Math.random()*window.innerWidth,
      y: Math.random()*window.innerHeight,
      vy: -(Math.random()*0.35+0.12),
      vx: (Math.random()-.5)*0.2,
      size: Math.random()*34+20,
      targetAlpha: Math.random()*0.22+0.10,
      rot: Math.random()*Math.PI*2,
      rotSpeed: (Math.random()-.5)*0.006,
      type: Math.floor(Math.random()*iconDrawers.length),
      color: COLORS[Math.floor(Math.random()*COLORS.length)],
      pulse: Math.random()*Math.PI*2,
      pulseSpeed: Math.random()*0.015+0.006
    });
  }

  // -- Lightning bolts --
  var lightnings = [];
  var ltTimer = 0;
  function spawnLightning(){
    // Lake-shape lightning: starts from left or right edge, goes across
    var fromSide = Math.random() > 0.5;
    var segs = [];
    var startX = fromSide ? 0 : W;
    var startY = Math.random() * H * 0.8 + H * 0.05;
    var endX   = fromSide ? W * (Math.random()*0.6+0.3) : W * (Math.random()*0.6);
    var endY   = startY + (Math.random()-.5) * H * 0.3;
    var steps  = Math.floor(Math.random()*8)+8;
    var cx2 = startX, cy2 = startY;
    segs.push({x:cx2, y:cy2});
    for(var i=1;i<=steps;i++){
      var t = i/steps;
      cx2 = startX + (endX-startX)*t + (Math.random()-.5)*100;
      cy2 = startY + (endY-startY)*t + (Math.random()-.5)*60;
      segs.push({x:cx2, y:cy2});
    }
    // branches
    var branches = [];
    for(var b=0;b<Math.floor(Math.random()*4)+2;b++){
      var bi = Math.floor(Math.random()*(segs.length-2))+1;
      var bx = segs[bi].x, by = segs[bi].y;
      var bsegs = [{x:bx,y:by}];
      var bsteps = Math.floor(Math.random()*4)+3;
      var bdir = fromSide ? 1 : -1;
      for(var s=0;s<bsteps;s++){
        bx += bdir*(Math.random()*50+20) + (Math.random()-.5)*40;
        by += (Math.random()-.5)*50;
        bsegs.push({x:bx,y:by});
      }
      branches.push(bsegs);
    }
    var isPurple = Math.random()>0.4;
    lightnings.push({
      segs:segs, branches:branches,
      alpha:1, fade:Math.random()*0.05+0.03,
      color: isPurple ? 'rgba(200,100,255,' : 'rgba(100,160,255,',
      glow:  isPurple ? 'rgba(168,85,247,' : 'rgba(59,130,246,',
      width: Math.random()*2+1
    });
  }

  // -- Floating purple/blue orbs --
  var orbs = [];
  for(var o=0;o<22;o++){
    orbs.push({
      x:Math.random()*window.innerWidth, y:Math.random()*window.innerHeight,
      r: Math.random()*130+60,
      vx:(Math.random()-.5)*0.4, vy:(Math.random()-.5)*0.4,
      pulse:Math.random()*Math.PI*2, pSpd:Math.random()*0.015+0.006,
      isPurple: Math.random()>0.5
    });
  }

  function drawFrame(){
    cx.clearRect(0,0,W,H);

    // Draw orbs
    orbs.forEach(function(ob){
      ob.x+=ob.vx; ob.y+=ob.vy;
      ob.pulse+=ob.pSpd;
      if(ob.x<-ob.r) ob.x=W+ob.r; if(ob.x>W+ob.r) ob.x=-ob.r;
      if(ob.y<-ob.r) ob.y=H+ob.r; if(ob.y>H+ob.r) ob.y=-ob.r;
      var a = 0.32 + Math.sin(ob.pulse)*0.15;
      var g = cx.createRadialGradient(ob.x,ob.y,0,ob.x,ob.y,ob.r);
      if(ob.isPurple){
        g.addColorStop(0,'rgba(168,85,247,'+a+')');
        g.addColorStop(0.4,'rgba(139,92,246,'+(a*0.6)+')');
        g.addColorStop(0.7,'rgba(109,40,217,'+(a*0.3)+')');
      } else {
        g.addColorStop(0,'rgba(59,130,246,'+a+')');
        g.addColorStop(0.4,'rgba(37,99,235,'+(a*0.6)+')');
        g.addColorStop(0.7,'rgba(29,78,216,'+(a*0.3)+')');
      }
      g.addColorStop(1,'rgba(0,0,0,0)');
      cx.beginPath(); cx.arc(ob.x,ob.y,ob.r,0,Math.PI*2);
      cx.fillStyle=g; cx.fill();
    });

    // Draw lightning
    ltTimer++;
    if(ltTimer > Math.random()*40+20){ ltTimer=0; spawnLightning(); spawnLightning(); if(Math.random()>0.4) spawnLightning(); }
    lightnings = lightnings.filter(function(lt){ return lt.alpha>0; });
    lightnings.forEach(function(lt){
      lt.alpha -= lt.fade;
      var a = Math.max(0,lt.alpha);
      // glow pass
      cx.save();
      cx.shadowBlur=28; cx.shadowColor=lt.glow+'0.9)';
      cx.strokeStyle=lt.color+a+')';
      cx.lineWidth=lt.width*3; cx.lineCap='round'; cx.lineJoin='round';
      cx.globalAlpha=a*0.35;
      cx.beginPath();
      lt.segs.forEach(function(p,i){ i===0?cx.moveTo(p.x,p.y):cx.lineTo(p.x,p.y); });
      cx.stroke();
      // core
      cx.shadowBlur=12; cx.lineWidth=lt.width; cx.globalAlpha=a;
      cx.beginPath();
      lt.segs.forEach(function(p,i){ i===0?cx.moveTo(p.x,p.y):cx.lineTo(p.x,p.y); });
      cx.stroke();
      // branches
      lt.branches.forEach(function(br){
        cx.lineWidth=lt.width*0.6; cx.globalAlpha=a*0.7;
        cx.beginPath();
        br.forEach(function(p,i){ i===0?cx.moveTo(p.x,p.y):cx.lineTo(p.x,p.y); });
        cx.stroke();
      });
      cx.restore();
    });
    icons.forEach(function(ic){
      ic.y += ic.vy;
      ic.x += ic.vx;
      ic.rot += ic.rotSpeed;
      ic.pulse += ic.pulseSpeed;
      var pAlpha = ic.targetAlpha + Math.sin(ic.pulse)*0.04;
      if(ic.y < -ic.size*2) { ic.y=H+ic.size; ic.x=Math.random()*W; }
      if(ic.x < -ic.size*2) ic.x=W+ic.size;
      if(ic.x > W+ic.size*2) ic.x=-ic.size;
      cx.save();
      cx.translate(ic.x, ic.y);
      cx.rotate(ic.rot);
      cx.shadowBlur=18;
      cx.shadowColor=ic.color+'0.5)';
      iconDrawers[ic.type](cx, 0, 0, ic.size, pAlpha, ic.color+'1)');
      cx.shadowBlur=0;
      cx.restore();
    });
    requestAnimationFrame(drawFrame);
  }
  drawFrame();
})();
</script>

<script>
function togglePw(id, el) {
  var inp = document.getElementById(id);
  var icon = el.querySelector('i');
  if (inp.type === 'password') {
    inp.type = 'text';
    icon.className = 'fas fa-eye';
    el.style.color = '#93c5fd';
  } else {
    inp.type = 'password';
    icon.className = 'fas fa-eye-slash';
    el.style.color = '#60a5fa';
  }
}
</script>

</body>
</html>