<?php
require_once 'includes/config.php';

// Ensure reviews table exists
$pdo->exec("CREATE TABLE IF NOT EXISTS `reviews` (
  `id` INT AUTO_INCREMENT PRIMARY KEY,
  `user_id` INT NOT NULL,
  `rating` TINYINT NOT NULL,
  `title` VARCHAR(150) NOT NULL,
  `body` TEXT NOT NULL,
  `is_approved` TINYINT(1) DEFAULT 0,
  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON DELETE CASCADE
) ENGINE=InnoDB;");

$totalUsers    = $pdo->query("SELECT COUNT(*) FROM users WHERE is_verified=1")->fetchColumn();
$totalSessions = $pdo->query("SELECT COUNT(*) FROM study_sessions")->fetchColumn();
$totalMarks    = $pdo->query("SELECT COUNT(*) FROM marks")->fetchColumn();
$exam = $pdo->query("SELECT * FROM al_exam_dates WHERE is_active=1 ORDER BY exam_date ASC LIMIT 1")->fetch();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>StudyTrack — Free A/L Study Tracker for Sri Lankan Students</title>
<meta name="description" content="StudyTrack is a free online study tracker built for Sri Lankan A/L students. Track study hours, record exam marks, manage tasks and analyze your performance — all in one place. Free forever.">
<meta name="keywords" content="StudyTrack, A/L study tracker, Sri Lanka A/L, study tracker Sri Lanka, A level study app, free exam tracker, A/L results tracker, Sri Lankan students, edurx studytrack, A level Sri Lanka">
<meta name="author" content="StudyTrack — EduRx">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://studytrack.edurx.icu/studytrack/home">
<meta property="og:type" content="website">
<meta property="og:url" content="https://studytrack.edurx.icu/studytrack/home">
<meta property="og:title" content="StudyTrack — Free A/L Study Tracker for Sri Lankan Students">
<meta property="og:description" content="Free study tracker built for Sri Lankan A/L students. Track study hours, record exam marks, analyze performance and count down to your A/L exam.">
<meta property="og:image" content="https://studytrack.edurx.icu/studytrack/images/preview.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://studytrack.edurx.icu/studytrack/images/preview.jpg">
<meta property="og:site_name" content="StudyTrack">
<meta property="og:locale" content="en_LK">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "StudyTrack",
  "url": "https://studytrack.edurx.icu/studytrack",
  "description": "Free online study tracker for Sri Lankan A/L students.",
  "applicationCategory": "EducationalApplication",
  "operatingSystem": "Web Browser",
  "offers": { "@type": "Offer", "price": "0", "priceCurrency": "LKR" },
  "author": { "@type": "Organization", "name": "EduRx", "url": "https://edurx.icu" },
  "audience": { "@type": "EducationalAudience", "educationalRole": "student" },
  "inLanguage": "en",
  "countryOfOrigin": "LK"
}
</script>

<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=Nunito:wght@700;800;900&family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="<?= SITE_URL ?>/assets/css/style.css">
<link rel="icon" type="image/png" href="https://studytrack.edurx.icu/studytrack/images/studytrack.png">

<style>
/* ══════════════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: #08080f;
  color: #e2e8f0;
  font-family: 'Poppins', sans-serif;
  overflow-x: hidden;
  line-height: 1.6;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ── CSS tokens ── */
:root {
  --ink:       #e2e8f0;
  --ink-dim:   #94a3b8;
  --ink-ghost: #475569;
  --surface:   #0f0f1a;
  --card:      #13131f;
  --card2:     #1a1a2e;
  --border:    rgba(255,255,255,.07);
  --border2:   rgba(255,255,255,.12);
  --vi:        #7c6af0;   /* violet */
  --vi2:       #a78bfa;
  --cy:        #22d3ee;
  --em:        #f472b6;
  --glow-vi:   rgba(124,106,240,.35);
  --glow-cy:   rgba(34,211,238,.2);
  --r: 14px;
  --r2: 20px;
}

.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
section { padding: 100px 0; }

/* ══════════════════════════════════════════════════
   NOISE TEXTURE OVERLAY
══════════════════════════════════════════════════ */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: .4;
}

/* ══════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  padding: 0 24px;
  transition: background .3s, border-color .3s;
}
.nav.scrolled {
  background: rgba(8,8,15,.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1140px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
}
.nav-logo img { width: 34px; height: 34px; border-radius: 9px; }
.nav-logo-text {
  font-family: 'Nunito', sans-serif;
  font-size: 18px; font-weight: 800; letter-spacing: 0;
  background: linear-gradient(135deg, #fff 30%, var(--vi2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.nav-logo-by {
  font-size: 9px; font-weight: 500; color: var(--ink-ghost);
  letter-spacing: .5px; text-transform: uppercase; display: block; line-height: 1;
}

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  padding: 7px 14px; border-radius: 9px;
  font-size: 14px; font-weight: 500; color: var(--ink-dim);
  transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.nav-pill {
  background: linear-gradient(135deg, var(--vi), #9333ea) !important;
  color: #fff !important;
  padding: 8px 22px !important;
  box-shadow: 0 0 24px var(--glow-vi);
  font-weight: 600 !important;
}
.nav-pill:hover { box-shadow: 0 0 36px var(--glow-vi) !important; transform: translateY(-1px); }

/* hamburger */
.nav-hamburger {
  display: none; cursor: pointer;
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--card); border: 1px solid var(--border);
  align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 10px;
}
.nav-hamburger span {
  display: block; width: 16px; height: 1.5px;
  background: var(--ink); border-radius: 2px;
  transition: all .3s; transform-origin: center;
}
.nav-hamburger.open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2){ opacity: 0; }
.nav-hamburger.open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

.nav-mobile-drawer {
  display: none; position: fixed; top: 68px; left: 0; right: 0; z-index: 998;
  background: rgba(13,13,20,.98); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px 20px;
  flex-direction: column; gap: 4px;
  animation: slideDown .2s ease;
}
@keyframes slideDown { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.nav-mobile-drawer.open { display: flex; }
.nav-mobile-drawer a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 10px;
  font-size: 14px; font-weight: 500; color: var(--ink-dim);
  transition: all .15s;
}
.nav-mobile-drawer a:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.nav-mobile-btn {
  background: linear-gradient(135deg, var(--vi), #9333ea) !important;
  color: #fff !important; font-weight: 700 !important; margin-top: 6px;
  justify-content: center; box-shadow: 0 0 20px var(--glow-vi);
}

/* ══════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  padding-top: 68px;
  position: relative; overflow: hidden;
}

/* Mesh gradient background */
.hero-mesh {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 15% 45%, rgba(124,106,240,.16) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 85% 25%, rgba(34,211,238,.09) 0%, transparent 55%),
    radial-gradient(ellipse 45% 35% at 55% 85%, rgba(168,85,247,.08) 0%, transparent 50%);
}
/* Grid lines */
.hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 80%);
}

.hero-inner {
  position: relative; z-index: 2;
  max-width: 1140px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;
}

/* Left side */
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(124,106,240,.12); border: 1px solid rgba(124,106,240,.3);
  border-radius: 100px; padding: 6px 16px 6px 8px;
  font-size: 12px; font-weight: 600; color: var(--vi2); margin-bottom: 28px;
  animation: fadeUp .6s ease both;
}
.hero-tag-dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, var(--vi), #9333ea);
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}

.hero-h1 {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(38px, 5.2vw, 62px);
  font-weight: 800; line-height: 1.08;
  letter-spacing: -.5px; margin-bottom: 22px;
  animation: fadeUp .6s .1s ease both;
}
.hero-h1 .line2 {
  background: linear-gradient(110deg, var(--vi2) 20%, var(--cy) 80%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.hero-sub {
  font-size: 16px; color: var(--ink-dim); line-height: 1.8;
  margin-bottom: 38px; max-width: 460px;
  animation: fadeUp .6s .2s ease both;
}

.hero-btns {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px;
  animation: fadeUp .6s .3s ease both;
}
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--vi), #9333ea);
  color: #fff; padding: 14px 30px; border-radius: var(--r);
  font-size: 15px; font-weight: 600;
  box-shadow: 0 6px 28px var(--glow-vi);
  transition: all .25s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 36px var(--glow-vi); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid var(--border2);
  color: var(--ink); padding: 14px 26px; border-radius: var(--r);
  font-size: 15px; font-weight: 500; transition: all .25s;
}
.btn-ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); }

.hero-trust {
  display: flex; gap: 20px; flex-wrap: wrap;
  animation: fadeUp .6s .4s ease both;
}
.trust-pill {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 500; color: var(--ink-ghost);
}
.trust-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; flex-shrink: 0; }

/* RIGHT: Mockup */
.hero-visual {
  position: relative;
  animation: fadeUp .6s .2s ease both;
}

.hw-card {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--r2);
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  position: relative; z-index: 1;
}
.hw-topbar {
  background: var(--card2);
  border-bottom: 1px solid var(--border);
  padding: 12px 18px;
  display: flex; align-items: center; gap: 10px;
}
.hw-dots { display: flex; gap: 6px; }
.hw-dots span { width: 9px; height: 9px; border-radius: 50%; }
.hw-dots span:nth-child(1) { background: #ff5f57; }
.hw-dots span:nth-child(2) { background: #ffbd2e; }
.hw-dots span:nth-child(3) { background: #27c93f; }
.hw-tab {
  font-size: 11px; color: var(--ink-dim); font-weight: 500;
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 10px;
}

.hw-body { padding: 18px; }

/* Countdown in mockup */
.hw-cd {
  background: linear-gradient(135deg, rgba(124,106,240,.15), rgba(34,211,238,.08));
  border: 1px solid rgba(124,106,240,.25);
  border-radius: var(--r); padding: 14px 16px;
  margin-bottom: 14px; text-align: center;
}
.hw-cd-label { font-size: 10px; font-weight: 700; color: var(--vi2); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.hw-cd-nums { display: flex; gap: 6px; justify-content: center; }
.hw-cd-box {
  background: rgba(0,0,0,.35); border: 1px solid var(--border2);
  border-radius: 8px; padding: 7px 10px; min-width: 46px; text-align: center;
}
.hw-cd-box .n { font-family: 'Nunito', sans-serif; font-size: 20px; font-weight: 800; color: var(--vi2); display: block; font-variant-numeric: tabular-nums; line-height: 1; }
.hw-cd-box .l { font-size: 8px; color: var(--ink-ghost); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; display: block; }

/* Stats row */
.hw-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 14px; }
.hw-stat {
  background: var(--card2); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px; text-align: center;
}
.hw-stat .v { font-family: 'Nunito', sans-serif; font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1; }
.hw-stat .l { font-size: 9px; color: var(--ink-ghost); text-transform: uppercase; letter-spacing: .6px; margin-top: 3px; }

/* Progress bars */
.hw-bar-row { margin-bottom: 9px; }
.hw-bar-meta { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 4px; }
.hw-bar-meta span:first-child { color: var(--ink-dim); }
.hw-bar-meta span:last-child  { color: var(--ink-ghost); font-weight: 600; }
.hw-bar { height: 5px; background: rgba(255,255,255,.06); border-radius: 99px; overflow: hidden; }
.hw-bar-fill { height: 100%; border-radius: 99px; transition: width 1.5s cubic-bezier(.4,0,.2,1); }

/* Floating badges */
.hw-badge {
  position: absolute;
  background: var(--card2); border: 1px solid var(--border2);
  border-radius: 11px; padding: 9px 13px;
  font-size: 12px; font-weight: 600; color: var(--ink);
  box-shadow: 0 10px 32px rgba(0,0,0,.5);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  animation: badgeFloat 4s ease-in-out infinite;
}
@keyframes badgeFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.hw-badge-1 { top: -16px; right: -16px; color: #10b981; animation-delay: 0s; }
.hw-badge-2 { bottom: 16px; left: -28px; color: #f59e0b; animation-delay: -2s; }

/* Glow behind card */
.hw-glow {
  position: absolute; inset: -30px; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(124,106,240,.12) 0%, transparent 70%);
  filter: blur(20px);
}

/* ══════════════════════════════════════════════════
   STATS STRIP
══════════════════════════════════════════════════ */
.stats-strip {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  padding: 0;
}
.stats-strip-inner {
  max-width: 1140px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: repeat(4,1fr);
}
.strip-item {
  padding: 40px 24px;
  border-right: 1px solid var(--border);
  text-align: center;
  position: relative;
  transition: background .2s;
}
.strip-item:last-child { border-right: none; }
.strip-item:hover { background: rgba(255,255,255,.02); }
.strip-num {
  font-family: 'Nunito', sans-serif;
  font-size: 40px; font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, var(--vi2), var(--cy));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}
.strip-desc { font-size: 13px; color: var(--ink-ghost); font-weight: 500; }

/* ══════════════════════════════════════════════════
   SECTION HEADERS
══════════════════════════════════════════════════ */
.sec-label {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--vi2);
  margin-bottom: 14px;
}
.sec-title {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(28px, 4vw, 42px); font-weight: 800;
  color: var(--ink); line-height: 1.15;
  letter-spacing: -.5px; margin-bottom: 16px;
}
.sec-sub {
  font-size: 16px; color: var(--ink-dim);
  line-height: 1.75; max-width: 540px;
}
.sec-center { text-align: center; }
.sec-center .sec-sub { margin: 0 auto; }

/* ══════════════════════════════════════════════════
   FEATURES
══════════════════════════════════════════════════ */
.features-wrap { margin-top: 64px; }

/* Bento-style asymmetric grid */
.features-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
  gap: 16px;
}
.feat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 28px;
  position: relative; overflow: hidden;
  transition: border-color .2s, transform .25s, box-shadow .25s;
  cursor: default;
}
.feat::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--vi), transparent);
  opacity: 0; transition: opacity .3s;
}
.feat:hover { border-color: rgba(124,106,240,.3); transform: translateY(-3px); box-shadow: 0 16px 48px rgba(0,0,0,.3); }
.feat:hover::after { opacity: 1; }

/* Large featured card spanning 2 cols */
.feat-lg { grid-column: span 2; }
.feat-lg .feat-body { max-width: 340px; }

.feat-icon {
  width: 48px; height: 48px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 18px;
}
.feat-title { font-family: 'Nunito', sans-serif; font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.feat-desc  { font-size: 14px; color: var(--ink-dim); line-height: 1.7; }

/* Decorative elements inside large cards */
.feat-deco {
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 8px;
}
.feat-mini-bar {
  height: 6px; border-radius: 99px;
  background: linear-gradient(90deg, var(--vi), var(--cy));
  opacity: .7;
}

/* Icon backgrounds by type */
.ic-vi  { background: rgba(124,106,240,.14); }
.ic-cy  { background: rgba(34,211,238,.12); }
.ic-em  { background: rgba(244,114,182,.12); }
.ic-gr  { background: rgba(16,185,129,.12); }
.ic-am  { background: rgba(245,158,11,.12); }

/* ══════════════════════════════════════════════════
   COUNTDOWN
══════════════════════════════════════════════════ */
.cd-section {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 80px 0;
}
.cd-inner {
  max-width: 700px; margin: 0 auto; text-align: center; padding: 0 24px;
}
.cd-glow-ring {
  position: relative; display: inline-flex; flex-direction: column;
  align-items: center;
}
.cd-exam-name {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(20px,3vw,30px); font-weight: 800;
  color: var(--ink); margin-bottom: 8px;
}
.cd-exam-date { font-size: 14px; color: var(--ink-ghost); margin-bottom: 40px; }
.cd-units { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cd-unit { text-align: center; }
.cd-num-box {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--r2);
  padding: 22px 28px; min-width: 96px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07);
  position: relative; overflow: hidden;
}
.cd-num-box::before {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--vi), var(--cy));
}
.cd-n {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(36px,5vw,52px); font-weight: 800;
  color: var(--vi2); display: block; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cd-l {
  font-size: 11px; color: var(--ink-ghost);
  text-transform: uppercase; letter-spacing: 1.5px;
  margin-top: 8px; display: block; font-weight: 600;
}
.cd-tagline { margin-top: 36px; font-size: 15px; color: var(--ink-dim); }

/* ══════════════════════════════════════════════════
   HOW IT WORKS
══════════════════════════════════════════════════ */
.steps-row {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 16px;
  margin-top: 64px; position: relative;
}
.steps-row::before {
  content: '';
  position: absolute; top: 28px; left: 5%; right: 5%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,106,240,.3), rgba(34,211,238,.3), transparent);
  z-index: 0;
}
.step {
  text-align: center; padding: 20px 16px;
  position: relative; z-index: 1;
  border-radius: 16px;
  transition: background .2s, transform .2s;
  cursor: pointer;
}
.step:hover {
  background: rgba(124,106,240,.07);
  transform: translateY(-4px);
}
.step-num-wrap {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  box-shadow: 0 0 0 8px rgba(124,106,240,.06);
  position: relative; z-index: 1;
  transition: box-shadow .2s, border-color .2s;
}
.step:hover .step-num-wrap {
  border-color: var(--vi2);
  box-shadow: 0 0 0 8px rgba(124,106,240,.12), 0 0 20px rgba(124,106,240,.2);
}
.step-num-wrap span {
  font-family: 'Nunito', sans-serif;
  font-size: 20px; font-weight: 800;
  background: linear-gradient(135deg, var(--vi2), var(--cy));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.step-title { font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.step-desc  { font-size: 13px; color: var(--ink-dim); line-height: 1.7; }
.step-link-hint {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--vi2);
  margin-top: 12px; opacity: 0;
  transition: opacity .2s;
}
.step:hover .step-link-hint { opacity: 1; }

/* Tutorial CTA pill below section header */
.how-it-works-cta {
  display: flex; justify-content: center; margin-top: 16px;
}
.btn-tutorial-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: 50px;
  border: 1px solid rgba(124,106,240,.35);
  background: rgba(124,106,240,.08);
  font-size: 13px; font-weight: 600; color: var(--vi2);
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
  backdrop-filter: blur(6px);
}
.btn-tutorial-pill:hover {
  background: rgba(124,106,240,.18);
  border-color: var(--vi2);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(124,106,240,.2);
}
.btn-tutorial-pill svg { transition: transform .2s; }
.btn-tutorial-pill:hover svg { transform: translateX(3px); }

/* ══════════════════════════════════════════════════
   CTA BANNER
══════════════════════════════════════════════════ */
.cta-wrap { padding: 0 0 100px; }
.cta-banner {
  position: relative; overflow: hidden;
  background: var(--card);
  border: 1px solid rgba(124,106,240,.25);
  border-radius: 28px; padding: 72px 48px;
  text-align: center;
}
.cta-banner::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 80% at 30% 50%, rgba(124,106,240,.14) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 80% 30%, rgba(34,211,238,.08) 0%, transparent 50%);
}
.cta-banner h2 {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(28px,4vw,44px); font-weight: 800;
  color: var(--ink); margin-bottom: 16px;
  position: relative; letter-spacing: -.5px;
}
.cta-banner h2 span {
  background: linear-gradient(110deg, var(--vi2), var(--cy));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.cta-banner p { font-size: 16px; color: var(--ink-dim); margin-bottom: 36px; position: relative; }
.btn-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--vi), #9333ea);
  color: #fff; padding: 16px 44px; border-radius: var(--r2);
  font-size: 16px; font-weight: 700;
  box-shadow: 0 8px 36px var(--glow-vi);
  transition: all .25s; position: relative;
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 48px var(--glow-vi); }
.cta-note { margin-top: 16px; font-size: 13px; color: var(--ink-ghost); position: relative; }

/* ══════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════ */
.footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 60px 24px 32px;
}
.footer-inner { max-width: 1140px; margin: 0 auto; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr repeat(3, 1fr);
  gap: 48px; margin-bottom: 48px;
}
.footer-brand-desc {
  font-size: 14px; color: var(--ink-ghost); line-height: 1.75;
  margin-top: 14px; max-width: 230px;
}
.footer-col h5 {
  font-size: 11px; font-weight: 700; color: var(--ink-ghost);
  text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 16px;
}
.footer-col a {
  display: block; font-size: 14px; color: var(--ink-dim);
  margin-bottom: 10px; transition: color .15s;
}
.footer-col a:hover { color: var(--vi2); }
.footer-bottom {
  border-top: 1px solid var(--border); padding-top: 24px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--ink-ghost); flex-wrap: wrap; gap: 10px;
}

/* ══════════════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Typewriter cursor */
.tcursor { display: inline-block; color: var(--vi2); animation: blink .7s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media(max-width:1024px){
  .hero-inner        { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual       { display: none; }
  .features-bento    { grid-template-columns: repeat(2,1fr); }
  .feat-lg           { grid-column: span 2; }
  .steps-row         { grid-template-columns: repeat(2,1fr); }
  .steps-row::before { display: none; }
  .footer-grid       { grid-template-columns: 1fr 1fr; }
}
@media(max-width:768px){
  section            { padding: 72px 0; }
  .stats-strip-inner { grid-template-columns: repeat(2,1fr); }
  .strip-item        { border-right: none; border-bottom: 1px solid var(--border); }
  .strip-item:nth-child(2n) { border-right: none; }
  .features-bento    { grid-template-columns: 1fr; }
  .feat-lg           { grid-column: span 1; }
  .feat-deco         { display: none; }
  .cd-num-box        { min-width: 70px; padding: 16px 14px; }
  .cd-units          { gap: 10px; }
  .cta-banner        { padding: 48px 24px; }
  .footer-grid       { grid-template-columns: 1fr; gap: 32px; }
  .nav-links         { display: none !important; }
  .nav-hamburger     { display: flex !important; }
}
</style>
</head>
<body>

<!-- ── NAVBAR ─────────────────────────────────────────── -->
<nav class="nav" id="mainNav">
  <div class="nav-inner">
    <a href="<?= SITE_URL ?>/home" class="nav-logo">
      <img src="https://studytrack.edurx.icu/studytrack/images/studytrack.png" alt="StudyTrack">
      <div>
        <div class="nav-logo-text">StudyTrack</div>
        <span class="nav-logo-by">by EduRx</span>
      </div>
    </a>
    <div class="nav-links">
      <a href="#features">Features</a>
      <a href="#how-it-works">How It Works</a>
      <a href="<?= SITE_URL ?>/contact">Contact</a>
      <a href="<?= SITE_URL ?>/login">Sign In</a>
      <a href="<?= SITE_URL ?>/register" class="nav-pill">Get Started</a>
    </div>
    <button class="nav-hamburger" id="navHamburger" onclick="toggleNav()">
      <span></span><span></span><span></span>
    </button>
  </div>
</nav>

<div class="nav-mobile-drawer" id="navDrawer">
  <a href="<?= SITE_URL ?>/home"> Home</a>
  <a href="#features" onclick="closeNav()">Features</a>
  <a href="#how-it-works" onclick="closeNav()"> How It Works</a>
  <a href="<?= SITE_URL ?>/contact">Contact & Support</a>
  <a href="<?= SITE_URL ?>/login"> Sign In</a>
  <a href="<?= SITE_URL ?>/register" class="nav-mobile-btn"> Get Started — Free</a>
</div>

<!-- ── HERO ───────────────────────────────────────────── -->
<section class="hero">
  <div class="hero-mesh"></div>
  <div class="hero-grid"></div>
  <div class="hero-inner">

    <!-- Left text -->
    <div class="hero-text">
      <div class="hero-tag">
        <span class="hero-tag-dot">🎓</span>
        Built for Sri Lankan A/L Students
      </div>

      <h1 class="hero-h1">
        <span id="tw-text"></span><span class="tcursor">|</span>
      </h1>

      <p class="hero-sub">
        Log every study session, track your marks, manage tasks and watch
        your performance improve — all from one beautiful dashboard.
        <strong style="color:var(--ink)">Free forever.</strong>
      </p>

      <div class="hero-btns">
        <a href="<?= SITE_URL ?>/register" class="btn-primary">
          Start Tracking Free
          <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
        </a>
        <a href="<?= SITE_URL ?>/login" class="btn-ghost">
          Sign In →
        </a>
      </div>

      <div class="hero-trust">
        <div class="trust-pill"><span class="dot"></span> Free to use</div>
        <div class="trust-pill"><span class="dot"></span> No credit card</div>
        <div class="trust-pill"><span class="dot"></span> Real-time analytics</div>
      </div>
    </div>

    <!-- Right mockup -->
    <div class="hero-visual">
      <div class="hw-glow"></div>
      <div class="hw-badge hw-badge-1">🎯 Goal achieved today!</div>
      <div class="hw-card">
        <div class="hw-topbar">
          <div class="hw-dots"><span></span><span></span><span></span></div>
          <div class="hw-tab">📚 StudyTrack — Dashboard</div>
        </div>
        <div class="hw-body">
          <!-- Countdown -->
          <div class="hw-cd">
            <div class="hw-cd-label">⏳ A/L Exam Countdown</div>
            <div class="hw-cd-nums">
              <div class="hw-cd-box"><span class="n" id="mcd-d">000</span><span class="l">Days</span></div>
              <div class="hw-cd-box"><span class="n" id="mcd-h">00</span><span class="l">Hrs</span></div>
              <div class="hw-cd-box"><span class="n" id="mcd-m">00</span><span class="l">Min</span></div>
              <div class="hw-cd-box"><span class="n" id="mcd-s">00</span><span class="l">Sec</span></div>
            </div>
          </div>
          <!-- Stats -->
          <div class="hw-stats">
            <div class="hw-stat"><div class="v">4h 20m</div><div class="l">Today</div></div>
            <div class="hw-stat"><div class="v">🔥 12</div><div class="l">Streak</div></div>
            <div class="hw-stat"><div class="v">84%</div><div class="l">Avg</div></div>
          </div>
          <!-- Bars -->
          <div class="hw-bar-row">
            <div class="hw-bar-meta"><span>Combined Maths</span><span>92%</span></div>
            <div class="hw-bar"><div class="hw-bar-fill" id="bar1" style="width:0;background:linear-gradient(90deg,#7c6af0,#a78bfa)"></div></div>
          </div>
          <div class="hw-bar-row">
            <div class="hw-bar-meta"><span>Physics</span><span>78%</span></div>
            <div class="hw-bar"><div class="hw-bar-fill" id="bar2" style="width:0;background:linear-gradient(90deg,#22d3ee,#7c6af0)"></div></div>
          </div>
          <div class="hw-bar-row">
            <div class="hw-bar-meta"><span>Chemistry</span><span>71%</span></div>
            <div class="hw-bar"><div class="hw-bar-fill" id="bar3" style="width:0;background:linear-gradient(90deg,#10b981,#22d3ee)"></div></div>
          </div>
        </div>
      </div>
      <div class="hw-badge hw-badge-2">📈 +12% this week</div>
    </div>

  </div>
</section>

<!-- ── STATS STRIP ────────────────────────────────────── -->
<div class="stats-strip">
  <div class="stats-strip-inner">
    <div class="strip-item reveal">
      <div class="strip-num"><?= number_format($totalUsers) ?>+</div>
      <div class="strip-desc">Registered Students</div>
    </div>
    <div class="strip-item reveal">
      <div class="strip-num"><?= number_format($totalSessions) ?>+</div>
      <div class="strip-desc">Study Sessions Logged</div>
    </div>
    <div class="strip-item reveal">
      <div class="strip-num"><?= number_format($totalMarks) ?>+</div>
      <div class="strip-desc">Exam Results Tracked</div>
    </div>
    <div class="strip-item reveal">
      <div class="strip-num">100%</div>
      <div class="strip-desc">Free to Use</div>
    </div>
  </div>
</div>

<!-- ── FEATURES ───────────────────────────────────────── -->
<section id="features">
  <div class="container">
    <div class="sec-center reveal">
      <div class="sec-label">Features</div>
      <h2 class="sec-title">Everything you need to succeed</h2>
      <p class="sec-sub">
        A complete toolkit designed specifically for Sri Lankan A/L students —
        from daily session logging to deep performance analysis.
      </p>
    </div>

    <div class="features-wrap">
      <div class="features-bento">

        <!-- Large card -->
        <div class="feat feat-lg reveal">
          <div class="feat-icon ic-vi">⏱️</div>
          <div class="feat-body">
            <div class="feat-title">Study Session Logging</div>
            <div class="feat-desc">Log every session with subject, duration and notes. See exactly how much time you've invested — daily, weekly and monthly breakdowns with beautiful charts.</div>
          </div>
          <div class="feat-deco">
            <div class="feat-mini-bar" style="width:120px;opacity:.8"></div>
            <div class="feat-mini-bar" style="width:90px;opacity:.55"></div>
            <div class="feat-mini-bar" style="width:140px;opacity:.7"></div>
            <div class="feat-mini-bar" style="width:75px;opacity:.4"></div>
          </div>
        </div>

        <div class="feat reveal">
          <div class="feat-icon ic-cy">📊</div>
          <div class="feat-title">Marks Tracker</div>
          <div class="feat-desc">Record every exam result. Instantly see grades (A–F), percentages and per-subject averages. Track improvement over time.</div>
        </div>

        <div class="feat reveal">
          <div class="feat-icon ic-em">⏳</div>
          <div class="feat-title">A/L Countdown</div>
          <div class="feat-desc">A live countdown to your A/L exam on every dashboard page — days, hours, minutes, seconds. Always visible. Always motivating.</div>
        </div>

        <div class="feat reveal">
          <div class="feat-icon ic-gr">📈</div>
          <div class="feat-title">Performance Analysis</div>
          <div class="feat-desc">Beautiful charts showing study trends, marks progression and subject distribution. GitHub-style heatmap for your consistency.</div>
        </div>

        <!-- Large card -->
        <div class="feat feat-lg reveal">
          <div class="feat-icon ic-am">✅</div>
          <div class="feat-body">
            <div class="feat-title">Task Manager + Goals</div>
            <div class="feat-desc">Create tasks with priorities, due dates and subject tags. Set daily study goals and watch your progress bar fill up. Get overdue alerts automatically.</div>
          </div>
          <div class="feat-deco" style="gap:10px">
            <div style="background:var(--card2);border:1px solid var(--border);border-radius:9px;padding:8px 12px;font-size:11px;color:var(--ink-dim);white-space:nowrap">✅ Revise Chapter 5</div>
            <div style="background:var(--card2);border:1px solid var(--border);border-radius:9px;padding:8px 12px;font-size:11px;color:var(--ink-dim);white-space:nowrap">📖 Past Papers × 3</div>
            <div style="background:rgba(124,106,240,.12);border:1px solid rgba(124,106,240,.25);border-radius:9px;padding:8px 12px;font-size:11px;color:var(--vi2);white-space:nowrap">🎯 Daily goal: 87%</div>
          </div>
        </div>

        <div class="feat reveal">
          <div class="feat-icon ic-vi">🔥</div>
          <div class="feat-title">Study Streaks</div>
          <div class="feat-desc">Build momentum with daily study streaks and a 12-week heatmap. Consistency visualised at a glance.</div>
        </div>

        <div class="feat reveal">
          <div class="feat-icon ic-cy">📖</div>
          <div class="feat-title">Subject Management</div>
          <div class="feat-desc">Add A/L subjects with custom colours and target scores. See per-subject time investment and progress bars.</div>
        </div>

        <div class="feat reveal">
          <div class="feat-icon ic-gr">🔒</div>
          <div class="feat-title">Secure & Private</div>
          <div class="feat-desc">Email OTP verification, bcrypt passwords, Google & Facebook Sign-In. Biometric login (passkeys) supported. Your data is yours.</div>
        </div>

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

<!-- ── A/L COUNTDOWN ──────────────────────────────────── -->
<?php if ($exam): ?>
<div class="cd-section">
  <div class="cd-inner">
    <div class="sec-label reveal">⏳ Exam Countdown</div>
    <div class="cd-exam-name reveal"><?= htmlspecialchars($exam['exam_name']) ?></div>
    <div class="cd-exam-date reveal"><?= date('F j, Y', strtotime($exam['exam_date'])) ?></div>
    <div class="cd-units reveal">
      <div class="cd-unit"><div class="cd-num-box"><span class="cd-n" id="lcd-d">000</span></div><span class="cd-l">Days</span></div>
      <div class="cd-unit"><div class="cd-num-box"><span class="cd-n" id="lcd-h">00</span></div><span class="cd-l">Hours</span></div>
      <div class="cd-unit"><div class="cd-num-box"><span class="cd-n" id="lcd-m">00</span></div><span class="cd-l">Minutes</span></div>
      <div class="cd-unit"><div class="cd-num-box"><span class="cd-n" id="lcd-s">00</span></div><span class="cd-l">Seconds</span></div>
    </div>
    <p class="cd-tagline reveal">Every second counts. <a href="<?= SITE_URL ?>/register" style="color:var(--vi2);font-weight:600">Start tracking today →</a></p>
  </div>
</div>
<?php endif; ?>

<!-- ── HOW IT WORKS ───────────────────────────────────── -->
<section id="how-it-works">
  <div class="container">
    <div class="sec-center reveal">
      <div class="sec-label">How It Works</div>
      <h2 class="sec-title">Up and running in 2 minutes</h2>
    </div>
    <div class="how-it-works-cta reveal">
      <a href="tutorial.php" class="btn-tutorial-pill">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg>
        Watch Full Tutorial
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
      </a>
    </div>
    <div class="steps-row">
      <a href="tutorial.php#step-1" class="step reveal" style="text-decoration:none;color:inherit;">
        <div class="step-num-wrap"><span>1</span></div>
        <div class="step-title">Create Free Account</div>
        <div class="step-desc">Sign up with email, verify with OTP. Ready instantly — no credit card, no setup fees, no ads.</div>
        <span class="step-link-hint">See how <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></span>
      </a>
      <a href="tutorial.php#step-2" class="step reveal" style="text-decoration:none;color:inherit;">
        <div class="step-num-wrap"><span>2</span></div>
        <div class="step-title">Add Your Subjects</div>
        <div class="step-desc">Add your A/L subjects with colours and target scores. Combined Maths, Physics, Chemistry — anything you study.</div>
        <span class="step-link-hint">See how <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></span>
      </a>
      <a href="tutorial.php#step-3" class="step reveal" style="text-decoration:none;color:inherit;">
        <div class="step-num-wrap"><span>3</span></div>
        <div class="step-title">Log Daily Progress</div>
        <div class="step-desc">After each session, log the time spent. Add exam results as they arrive. Under 30 seconds per entry.</div>
        <span class="step-link-hint">See how <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></span>
      </a>
      <a href="tutorial.php#step-4" class="step reveal" style="text-decoration:none;color:inherit;">
        <div class="step-num-wrap"><span>4</span></div>
        <div class="step-title">Analyse & Improve</div>
        <div class="step-desc">Charts and insights appear automatically. See which subjects need attention and watch your scores climb.</div>
        <span class="step-link-hint">See how <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></span>
      </a>
    </div>
  </div>
</section>

<!-- ── REVIEWS SECTION ──────────────────────────────── -->
<?php
$homeReviews = $pdo->query("
    SELECT r.rating, r.title, r.body, r.created_at, u.name AS uname, u.avatar AS uavatar
    FROM reviews r JOIN users u ON u.id=r.user_id
    WHERE r.is_approved=1
    ORDER BY r.created_at DESC LIMIT 3
")->fetchAll();
$homeAvg   = (float)$pdo->query("SELECT AVG(rating) FROM reviews WHERE is_approved=1")->fetchColumn();
$homeCnt   = (int)$pdo->query("SELECT COUNT(*) FROM reviews WHERE is_approved=1")->fetchColumn();
?>
<?php if (!empty($homeReviews)): ?>
<section id="reviews" style="padding:100px 0">
  <div class="container">
    <!-- Section label -->
    <div style="text-align:center;margin-bottom:56px">
      <div style="display:inline-flex;align-items:center;gap:8px;background:rgba(124,106,240,.1);border:1px solid rgba(124,106,240,.28);border-radius:100px;padding:6px 18px;font-size:12px;font-weight:700;color:var(--vi2);letter-spacing:.5px;text-transform:uppercase;margin-bottom:18px">
        ★ Student Reviews
      </div>
      <h2 style="font-family:'Nunito',sans-serif;font-size:clamp(26px,4vw,42px);font-weight:800;letter-spacing:-.5px;margin-bottom:10px">
        Loved by A/L Students
      </h2>
      <p style="font-size:16px;color:var(--ink-dim);max-width:440px;margin:0 auto">
        <?= $homeCnt ?> review<?= $homeCnt !== 1 ? 's' : '' ?> · <?= number_format($homeAvg,1) ?> / 5 average rating
      </p>
    </div>

    <!-- Cards -->
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:36px">
      <?php foreach ($homeReviews as $rv):
        $ini = strtoupper(substr($rv['uname'], 0, 1));
      ?>
      <div style="background:var(--card);border:1px solid var(--border);border-radius:var(--r2);padding:26px;transition:border-color .2s,transform .2s" onmouseover="this.style.borderColor='rgba(255,255,255,.18)';this.style.transform='translateY(-4px)'" onmouseout="this.style.borderColor='rgba(255,255,255,.07)';this.style.transform='translateY(0)'">
        <!-- Stars -->
        <div style="display:flex;gap:3px;margin-bottom:14px">
          <?php for ($i=1;$i<=5;$i++): ?>
            <span style="font-size:15px;color:<?= $i<=$rv['rating'] ? '#f59e0b' : 'var(--ink-ghost)' ?>">★</span>
          <?php endfor; ?>
        </div>
        <div style="font-size:15px;font-weight:700;color:var(--ink);margin-bottom:8px"><?= htmlspecialchars($rv['title']) ?></div>
        <div style="font-size:13px;color:var(--ink-dim);line-height:1.7;margin-bottom:18px"><?= nl2br(htmlspecialchars(substr($rv['body'],0,160))) ?><?= strlen($rv['body'])>160 ? '…' : '' ?></div>
        <!-- User -->
        <div style="display:flex;align-items:center;gap:10px;border-top:1px solid var(--border);padding-top:14px">
          <div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--vi),#9333ea);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff;overflow:hidden;flex-shrink:0">
            <?php if ($rv['uavatar']): ?><img src="<?= htmlspecialchars($rv['uavatar']) ?>" style="width:100%;height:100%;object-fit:cover"><?php else: echo $ini; endif; ?>
          </div>
          <div>
            <div style="font-size:13px;font-weight:600;color:var(--ink)"><?= htmlspecialchars($rv['uname']) ?></div>
            <div style="font-size:11px;color:var(--ink-ghost)"><?= date('M Y', strtotime($rv['created_at'])) ?></div>
          </div>
        </div>
      </div>
      <?php endforeach; ?>
    </div>

    <!-- View All button -->
    <div style="text-align:center">
      <a href="<?= SITE_URL ?>/reviews" style="display:inline-flex;align-items:center;gap:9px;background:transparent;border:1px solid var(--border2);color:var(--ink);padding:13px 30px;border-radius:var(--r);font-size:15px;font-weight:600;transition:all .25s" onmouseover="this.style.background='rgba(255,255,255,.06)';this.style.borderColor='rgba(255,255,255,.2)'" onmouseout="this.style.background='transparent';this.style.borderColor='rgba(255,255,255,.12)'">
        View All Reviews
        <svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
      </a>
    </div>
  </div>
</section>
<?php endif; ?>

<!-- ── CTA BANNER ────────────────────────────────────── -->
<section class="cta-wrap">
  <div class="container">
    <div class="cta-banner reveal">
      <h2>Ready to take control of<br><span>your A/Ls?</span></h2>
      <p>Join students already tracking smarter. Completely free — no catch.</p>
      <a href="<?= SITE_URL ?>/register" class="btn-cta">
        Create Your Free Account
        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
      </a>
      <div class="cta-note">✓ Free forever &nbsp;·&nbsp; ✓ No spam &nbsp;·&nbsp; ✓ Delete any time</div>
    </div>
  </div>
</section>

<!-- ── FOOTER ─────────────────────────────────────────── -->
<footer class="footer">
  <div class="footer-inner">
    <div class="footer-grid">
      <div>
        <a href="<?= SITE_URL ?>/home" class="nav-logo" style="margin-bottom:0">
          <img src="https://studytrack.edurx.icu/studytrack/images/studytrack.png" alt="" style="width:30px;height:30px;border-radius:8px">
          <div>
            <div class="nav-logo-text" style="font-size:16px">StudyTrack</div>
            <span class="nav-logo-by">by EduRx</span>
          </div>
        </a>
        <p class="footer-brand-desc">A free study tracking platform for Sri Lankan A/L students. Track smarter, study better, score higher.</p>
      </div>
      <div class="footer-col">
        <h5>Platform</h5>
        <a href="<?= SITE_URL ?>/register">Register</a>
        <a href="<?= SITE_URL ?>/login">Sign In</a>
        <a href="<?= SITE_URL ?>/forgot-password">Forgot Password</a>
      </div>
      <div class="footer-col">
        <h5>Features</h5>
        <a href="#features">Study Log</a>
        <a href="#features">Marks Tracker</a>
        <a href="#features">Analysis</a>
        <a href="#features">Task Manager</a>
      </div>
      <div class="footer-col">
        <h5>Company</h5>
        <a href="<?= SITE_URL ?>/contact">Contact & Support</a>
        <a href="<?= SITE_URL ?>/terms">Terms & Conditions</a>
        <a href="<?= SITE_URL ?>/privacy">Privacy Policy</a>
      </div>
    </div>
    <div class="footer-bottom">
      <span>© <?= date('Y') ?> StudyTrack. All rights reserved.</span>
      <span>Built with ❤️ for Sri Lankan A/L students</span>
    </div>
  </div>
</footer>

<!-- ── SCRIPTS ────────────────────────────────────────── -->
<script>
// Navbar scroll
const nav = document.getElementById('mainNav');
window.addEventListener('scroll', () => {
  nav.classList.toggle('scrolled', window.scrollY > 30);
});

// Mobile nav
function toggleNav(){
  document.getElementById('navDrawer').classList.toggle('open');
  document.getElementById('navHamburger').classList.toggle('open');
}
function closeNav(){
  document.getElementById('navDrawer').classList.remove('open');
  document.getElementById('navHamburger').classList.remove('open');
}
document.addEventListener('click', e => {
  const d = document.getElementById('navDrawer');
  const b = document.getElementById('navHamburger');
  if (!d.contains(e.target) && !b.contains(e.target)) closeNav();
});

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

// Countdown
function runCountdown(target, ids) {
  function tick(){
    const diff = new Date(target + ' 08:00:00') - new Date();
    if (diff <= 0) return;
    const d = Math.floor(diff/86400000);
    const h = Math.floor((diff%86400000)/3600000);
    const m = Math.floor((diff%3600000)/60000);
    const s = Math.floor((diff%60000)/1000);
    const p = (n,l=2) => String(n).padStart(l,'0');
    const el = id => document.getElementById(id);
    if(el(ids.d)) el(ids.d).textContent = p(d,3);
    if(el(ids.h)) el(ids.h).textContent = p(h);
    if(el(ids.m)) el(ids.m).textContent = p(m);
    if(el(ids.s)) el(ids.s).textContent = p(s);
  }
  tick(); setInterval(tick,1000);
}
<?php if ($exam): ?>
const examDate = '<?= $exam['exam_date'] ?>';
runCountdown(examDate, {d:'lcd-d',h:'lcd-h',m:'lcd-m',s:'lcd-s'});
runCountdown(examDate, {d:'mcd-d',h:'mcd-h',m:'mcd-m',s:'mcd-s'});
<?php else: ?>
['mcd-d','mcd-h','mcd-m','mcd-s'].forEach(id => { const el=document.getElementById(id); if(el) el.textContent='--'; });
<?php endif; ?>

// Typewriter
(function(){
  const el = document.getElementById('tw-text');
  if (!el) return;
  const parts = [
    {t:'Track Your Studies.', g:false},
    {t:'\nAce Your A/Ls.',     g:true}
  ];
  const chars = [];
  parts.forEach(p => p.t.split('').forEach(ch => chars.push({ch, g:p.g})));
  let pos = 0;
  function render(){
    let html = '';
    for(let j=0;j<pos;j++){
      const c = chars[j];
      if(c.ch==='\n') html+='<br>';
      else if(c.g) html+=`<span style="background:linear-gradient(110deg,var(--vi2),var(--cy));-webkit-background-clip:text;-webkit-text-fill-color:transparent">${c.ch}</span>`;
      else html+=c.ch;
    }
    el.innerHTML = html;
  }
  function type(){
    if(pos<=chars.length){ render(); pos++; setTimeout(type, pos<20?120:140); }
  }
  setTimeout(type, 400);
})();

// Scroll reveal
const revealObserver = new IntersectionObserver(entries => {
  entries.forEach(e => { if(e.isIntersecting) { e.target.classList.add('visible'); } });
}, {threshold:.12});
document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));

// Animate mockup bars on load
setTimeout(() => {
  const b = (id,w) => { const el=document.getElementById(id); if(el) el.style.width=w; };
  b('bar1','92%'); b('bar2','78%'); b('bar3','71%');
}, 800);
</script>
</body>
</html>