<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Sriwijaya Smart Edu — Digitalisasi Sekolah Modular</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.13.3/cdn.min.js" defer></script>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="icon" href="assets/logo/logo.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet"/>
<style>
  /* ===================== VARIABLES ===================== */
  :root {
    --navy: #0f1f5c;
    --navy-deep: #091444;
    --navy-mid: #1a2f6e;
    --blue: #1e40af;
    --blue-bright: #2563eb;
    --blue-light: #3b82f6;
    --sky: #60a5fa;
    --accent: #f0a500;
    --white: #ffffff;
    --gray-50: #f8faff;
    --gray-100: #eef2ff;
    --gray-200: #e0e7ff;
    --text-main: #0f172a;
    --text-muted: #475569;
    --text-light: #94a3b8;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 4px 24px rgba(15,31,92,0.10);
    --shadow-md: 0 8px 40px rgba(15,31,92,0.14);
    --shadow-lg: 0 20px 60px rgba(15,31,92,0.18);
  }

  /* ===================== RESET ===================== */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--text-main); background: var(--white); overflow-x: hidden; }
  a { text-decoration: none; color: inherit; }

  /* ===================== NAVBAR ===================== */
  .navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: rgba(255,255,255,0.92); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--gray-200);
    padding: 0 5%; height: 68px;
    display: flex; align-items: center; justify-content: space-between;
    transition: box-shadow .3s;
  }
  .navbar.scrolled { box-shadow: var(--shadow); }
  .nav-logo { display: flex; align-items: center; gap: 10px; }
  .nav-logo .logo-mark {
    width: 38px; height: 38px; background: var(--navy);
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-weight: 800; color: white; font-size: 14px; letter-spacing: -0.5px;
  }
  .nav-logo .logo-text { font-weight: 800; font-size: 15px; color: var(--navy); line-height: 1.2; }
  .nav-logo .logo-sub { font-size: 10px; color: var(--text-muted); font-weight: 500; letter-spacing: .5px; text-transform: uppercase; }
  .nav-links { display: flex; gap: 28px; align-items: center; }
  .nav-links a { font-size: 14px; font-weight: 600; color: var(--text-muted); transition: color .2s; }
  .nav-links a:hover { color: var(--navy); }
  .nav-cta { display: flex; gap: 10px; }
  .btn-outline { padding: 9px 20px; border: 2px solid var(--navy); border-radius: 8px; font-weight: 700; font-size: 13.5px; color: var(--navy); transition: all .2s; cursor: pointer; background: transparent; }
  .btn-outline:hover { background: var(--navy); color: white; }
  .btn-solid { padding: 9px 20px; background: var(--navy); border: 2px solid var(--navy); border-radius: 8px; font-weight: 700; font-size: 13.5px; color: white; transition: all .2s; cursor: pointer; }
  .btn-solid:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(37,99,235,.3); }
  .hamburger { display: none; cursor: pointer; flex-direction: column; gap: 5px; }
  .hamburger span { width: 24px; height: 2px; background: var(--navy); border-radius: 2px; transition: .3s; }

  /* ===================== HERO ===================== */
  .hero {
    min-height: 100vh; background: var(--navy-deep);
    position: relative; overflow: hidden;
    display: flex; align-items: center; padding: 100px 5% 60px;
  }
  .hero-bg {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 80% 60% at 70% 40%, rgba(37,99,235,0.22) 0%, transparent 60%),
                radial-gradient(ellipse 40% 40% at 10% 80%, rgba(96,165,250,0.10) 0%, transparent 60%);
  }
  .hero-grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 48px 48px;
  }
  .hero-inner {
    max-width: 1200px; margin: 0 auto; width: 100%;
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
    align-items: center; position: relative; z-index: 2;
  }
  .hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
    border-radius: 100px; padding: 6px 14px; margin-bottom: 24px;
  }
  .hero-badge span { font-size: 12px; font-weight: 600; color: var(--sky); letter-spacing: .5px; }
  .hero-badge .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #22c55e; box-shadow: 0 0 6px #22c55e; animation: pulse 2s infinite;
  }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
  .hero h1 { font-size: clamp(32px,4vw,52px); font-weight: 800; color: white; line-height: 1.15; margin-bottom: 20px; }
  .hero h1 em { font-style: italic; font-family: 'Instrument Serif', serif; color: var(--sky); font-weight: 400; }
  .hero p { font-size: 16px; color: rgba(255,255,255,.65); line-height: 1.7; margin-bottom: 36px; max-width: 500px; }
  .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
  .btn-hero-primary {
    padding: 14px 28px; background: var(--accent); color: #0f172a;
    font-weight: 800; font-size: 15px; border-radius: 10px; border: none;
    cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 8px;
  }
  .btn-hero-primary:hover { background: #f59e0b; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(240,165,0,.35); }
  .btn-hero-secondary {
    padding: 14px 28px; background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.25);
    color: white; font-weight: 700; font-size: 15px; border-radius: 10px;
    cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 8px;
  }
  .btn-hero-secondary:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }
  .hero-modules { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
  .hero-mod-chip {
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px; padding: 8px 14px;
    display: flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 600; color: rgba(255,255,255,.7);
    transition: all .25s; cursor: default;
  }
  .hero-mod-chip:hover { background: rgba(255,255,255,.14); color: white; transform: translateY(-2px); }
  .hero-mod-chip svg { width: 15px; height: 15px; color: var(--sky); }

  /* ===================== DASHBOARD MOCKUP ===================== */
  .hero-visual { position: relative; }
  .hero-visual-inner { position: relative; padding: 20px; }
  .dashboard-frame {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px; overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,.4);
  }
  .frame-bar {
    background: rgba(255,255,255,.08); height: 38px;
    display: flex; align-items: center; padding: 0 16px; gap: 7px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .frame-dot { width: 10px; height: 10px; border-radius: 50%; }
  .frame-dot.red { background: #ff5f57; }
  .frame-dot.yellow { background: #febc2e; }
  .frame-dot.green { background: #28c840; }
  .frame-bar-title { margin-left: 12px; font-size: 11px; color: rgba(255,255,255,.4); font-weight: 600; }
  .frame-content { padding: 20px; }
  .dash-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
  .dash-title { font-size: 13px; font-weight: 700; color: white; }
  .dash-badge { background: #22c55e; color: white; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 100px; }
  .dash-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 16px; }
  .dash-stat { background: rgba(255,255,255,.07); border-radius: 10px; padding: 12px; border: 1px solid rgba(255,255,255,.08); }
  .dash-stat .num { font-size: 20px; font-weight: 800; color: white; }
  .dash-stat .lbl { font-size: 10px; color: rgba(255,255,255,.5); margin-top: 2px; }
  .dash-stat .arrow { font-size: 10px; color: #22c55e; font-weight: 700; }
  .dash-modules-label { font-size: 11px; color: rgba(255,255,255,.4); margin-bottom: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
  .dash-modules-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
  .dash-mod { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 10px 8px; text-align: center; transition: .2s; }
  .dash-mod:hover { background: rgba(255,255,255,.12); }
  .dash-mod .icon { font-size: 20px; margin-bottom: 4px; }
  .dash-mod .name { font-size: 9px; color: rgba(255,255,255,.6); font-weight: 600; }
  .dash-mod-add { border: 1.5px dashed rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; }
  .dash-mod-add-icon { font-size: 18px; color: rgba(255,255,255,.3); }
  .floating-badge {
    position: absolute; background: white; border-radius: 12px; padding: 10px 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.3); display: flex; align-items: center; gap: 10px;
    animation: float 4s ease-in-out infinite;
  }
  .floating-badge.top { top: -18px; right: -20px; }
  .floating-badge.bottom { bottom: -18px; left: -20px; animation-delay: -2s; }
  @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
  .fb-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
  .fb-icon.green { background: #dcfce7; }
  .fb-icon.blue { background: #dbeafe; }
  .fb-text .fb-label { font-size: 11px; font-weight: 700; color: var(--navy); }
  .fb-text .fb-sub { font-size: 10px; color: var(--text-muted); }

  /* ===================== STATS ===================== */
  .stats-section { background: var(--gray-50); padding: 60px 5%; }
  .stats-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
  .stat-card { background: white; border-radius: var(--radius); padding: 32px 24px; text-align: center; box-shadow: var(--shadow); border: 1px solid var(--gray-200); transition: all .3s; }
  .stat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--blue-light); }
  .stat-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--gray-100); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
  .stat-icon svg { width: 26px; height: 26px; color: var(--navy); }
  .stat-num { font-size: 36px; font-weight: 800; color: var(--navy); line-height: 1; }
  .stat-label { font-size: 13px; color: var(--text-muted); font-weight: 600; margin-top: 6px; }

  
  /* ===================== CARA KERJA ===================== */
  .cara-kerja-section { position: relative; padding: 90px 5%; background: var(--navy-deep); overflow: hidden; }
  .ck-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 15% 30%, rgba(37,99,235,.20) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 85% 70%, rgba(96,165,250,.12) 0%, transparent 60%), radial-gradient(ellipse 40% 60% at 50% 100%, rgba(240,165,0,.06) 0%, transparent 60%); }
  .ck-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 52px 52px; }
  .ck-header { text-align: center; margin-bottom: 60px; }
  .ck-tag { display: inline-block; background: rgba(37,99,235,.25); border: 1px solid rgba(37,99,235,.4); color: var(--sky); font-size: 12px; font-weight: 700; padding: 5px 16px; border-radius: 100px; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 16px; }
  .ck-title { font-size: clamp(26px, 3.5vw, 44px); font-weight: 800; color: white; line-height: 1.2; margin-bottom: 14px; }
  .ck-title em { font-style: italic; font-family: 'Instrument Serif', serif; color: var(--sky); font-weight: 400; }
  .ck-sub { font-size: 16px; color: rgba(255,255,255,.55); max-width: 480px; margin: 0 auto; line-height: 1.7; }
  .ck-steps { display: flex; flex-direction: column; gap: 0; max-width: 900px; margin: 0 auto 52px; position: relative; }
  .ck-steps::before { content: ''; position: absolute; left: 27px; top: 50px; bottom: 50px; width: 2px; background: linear-gradient(to bottom, rgba(37,99,235,.6) 0%, rgba(96,165,250,.4) 50%, rgba(240,165,0,.4) 100%); z-index: 0; }
  .ck-step { display: flex; align-items: flex-start; gap: 24px; padding: 0 0 36px; position: relative; z-index: 1; }
  .ck-step:last-child { padding-bottom: 0; }
  .ck-step-num { width: 56px; height: 56px; border-radius: 50%; background: var(--blue-bright); border: 3px solid rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 0 6px rgba(37,99,235,.2), 0 4px 20px rgba(37,99,235,.4); position: relative; z-index: 2; }
  .ck-step-num span { font-size: 20px; font-weight: 800; color: white; }
  .ck-step-num-2 { background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%); box-shadow: 0 0 0 6px rgba(96,165,250,.18), 0 4px 20px rgba(37,99,235,.35); }
  .ck-step-num-3 { background: linear-gradient(135deg, var(--accent) 0%, #f59e0b 100%); box-shadow: 0 0 0 6px rgba(240,165,0,.2), 0 4px 20px rgba(240,165,0,.35); }
  .ck-step-card { flex: 1; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); border-radius: 18px; padding: 28px 28px 26px; display: flex; gap: 20px; align-items: flex-start; transition: all .3s cubic-bezier(.22,1,.36,1); backdrop-filter: blur(4px); }
  .ck-step-card:hover { background: rgba(255,255,255,.09); border-color: rgba(96,165,250,.35); transform: translateX(6px); box-shadow: 0 12px 40px rgba(0,0,0,.25), -2px 0 0 var(--blue-bright); }
  .ck-step-card-2:hover { box-shadow: 0 12px 40px rgba(0,0,0,.25), -2px 0 0 var(--blue-light); }
  .ck-step-card-3:hover { box-shadow: 0 12px 40px rgba(0,0,0,.25), -2px 0 0 var(--accent); }
  .ck-icon-wrap { width: 54px; height: 54px; border-radius: 14px; background: rgba(37,99,235,.25); border: 1px solid rgba(37,99,235,.4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .ck-icon-wrap-2 { background: rgba(96,165,250,.15); border-color: rgba(96,165,250,.3); }
  .ck-icon-wrap-3 { background: rgba(240,165,0,.15); border-color: rgba(240,165,0,.3); }
  .ck-icon svg { color: var(--sky); }
  .ck-icon-2 svg { color: #93c5fd; }
  .ck-icon-3 svg { color: var(--accent); }
  .ck-step-label { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.35); letter-spacing: .8px; text-transform: uppercase; margin-bottom: 7px; }
  .ck-step-title { font-size: 18px; font-weight: 800; color: white; line-height: 1.25; margin-bottom: 10px; }
  .ck-step-desc { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.7; margin-bottom: 16px; }
  .ck-step-tags { display: flex; flex-wrap: wrap; gap: 7px; }
  .ck-tag-pill { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 100px; padding: 4px 12px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.65); transition: .2s; }
  .ck-tag-pill:hover { background: rgba(255,255,255,.14); color: white; }
  .ck-cta-strip { background: linear-gradient(135deg, rgba(37,99,235,.3) 0%, rgba(15,31,92,.5) 100%); border: 1px solid rgba(37,99,235,.4); border-radius: 18px; padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; max-width: 900px; margin: 0 auto; backdrop-filter: blur(8px); }
  .ck-cta-left { display: flex; align-items: center; gap: 14px; }
  .ck-cta-pulse { width: 14px; height: 14px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.25), 0 0 10px rgba(34,197,94,.4); flex-shrink: 0; animation: ckpulse 2s ease-in-out infinite; }
  @keyframes ckpulse { 0%,100%{box-shadow:0 0 0 4px rgba(34,197,94,.25),0 0 10px rgba(34,197,94,.4)} 50%{box-shadow:0 0 0 8px rgba(34,197,94,.12),0 0 18px rgba(34,197,94,.3)} }
  .ck-cta-title { font-size: 16px; font-weight: 800; color: white; margin-bottom: 3px; }
  .ck-cta-sub { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.5; }
  .ck-cta-btn { display: inline-flex; align-items: center; gap: 9px; background: var(--accent); color: #0f172a; font-size: 14px; font-weight: 800; padding: 14px 24px; border-radius: 12px; text-decoration: none; white-space: nowrap; transition: all .22s; box-shadow: 0 4px 20px rgba(240,165,0,.3); }
  .ck-cta-btn:hover { background: #f59e0b; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(240,165,0,.4); }

  /* ===================== SECTIONS GENERIC ===================== */
  .section { padding: 80px 5%; }
  .section-alt { background: var(--gray-50); }
  .container { max-width: 1100px; margin: 0 auto; }
  .section-header { text-align: center; margin-bottom: 52px; }
  .section-tag { display: inline-block; background: var(--gray-100); color: var(--blue); font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 100px; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 14px; border: 1px solid var(--gray-200); }
  .section-title { font-size: clamp(24px,3vw,38px); font-weight: 800; color: var(--navy); line-height: 1.2; }
  .section-sub { font-size: 16px; color: var(--text-muted); margin-top: 12px; max-width: 520px; margin-left: auto; margin-right: auto; line-height: 1.7; }

  /* ===================== MODULES ===================== */
  .modules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
  .module-card {
    background: white; border-radius: var(--radius); padding: 28px 24px;
    border: 1.5px solid var(--gray-200); cursor: pointer; transition: all .3s;
    position: relative; overflow: hidden;
  }
  .module-card::before { content:''; position:absolute; inset:0; background: linear-gradient(135deg, var(--gray-100) 0%, transparent 50%); opacity:0; transition:.3s; }
  .module-card:hover { border-color: var(--blue-bright); transform: translateY(-6px); box-shadow: var(--shadow-md); }
  .module-card:hover::before { opacity: 1; }
  .mod-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--gray-100); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; transition: .3s; }
  .module-card:hover .mod-icon { background: var(--navy); }
  .module-card:hover .mod-icon svg { color: white; }
  .mod-icon svg { width: 26px; height: 26px; color: var(--navy); transition: .3s; }
  .module-card h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
  .module-card p { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 18px; }
  .mod-link { font-size: 13px; font-weight: 700; color: var(--blue); display: inline-flex; align-items: center; gap: 5px; transition: gap .2s; }
  .module-card:hover .mod-link { gap: 8px; }
  .mod-badge { position: absolute; top: 16px; right: 16px; background: var(--navy); color: white; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
  .mod-badge.popular { background: var(--accent); color: #0f172a; }

  /* ===================== ADVANTAGES ===================== */
  .adv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
  .adv-image-side { position: relative; }
  .adv-main-card {
    background: var(--navy); border-radius: 20px; padding: 36px 32px;
    box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
  }
  .adv-main-card::after { content:''; position:absolute; top:-60px; right:-60px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.04); }
  .adv-main-card h3 { font-size: 20px; font-weight: 800; color: white; margin-bottom: 6px; }
  .adv-main-card p { color: rgba(255,255,255,.6); font-size: 14px; margin-bottom: 24px; }
  .modular-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .m-chip { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.8); transition: .2s; }
  .m-chip:hover, .m-chip.active { background: rgba(255,255,255,.2); color: white; }
  .m-chip.active { border-color: var(--sky); color: var(--sky); }
  .adv-estimasi { margin-top: 20px; padding: 14px; background: rgba(255,255,255,.08); border-radius: 10px; border: 1px solid rgba(255,255,255,.12); }
  .adv-estimasi-label { font-size: 12px; color: rgba(255,255,255,.5); margin-bottom: 6px; font-weight: 600; }
  .adv-estimasi-price { font-size: 22px; font-weight: 800; color: white; }
  .adv-estimasi-price span { font-size: 13px; font-weight: 400; color: rgba(255,255,255,.4); }
  .adv-estimasi-sub { font-size: 12px; color: rgba(255,255,255,.4); margin-top: 2px; }
  .adv-list { display: flex; flex-direction: column; gap: 18px; }
  .adv-item { display: flex; gap: 16px; align-items: flex-start; }
  .adv-check { width: 40px; height: 40px; border-radius: 10px; background: var(--gray-100); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .adv-check svg { width: 20px; height: 20px; color: var(--blue); }
  .adv-item h4 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
  .adv-item p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
  .adv-section-tag { margin-bottom: 8px; margin-top: 0; }
  .adv-section-title { margin-bottom: 28px; margin-top: 8px; }

  /* ===================== FEATURES ACCORDION ===================== */
  .acc-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 36px; align-items: start; }
  .acc-tabs { display: flex; flex-direction: column; gap: 6px; }
  .acc-tab { padding: 14px 18px; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-muted); transition: all .2s; display: flex; align-items: center; gap: 10px; border: 1.5px solid transparent; }
  .acc-tab:hover { background: var(--gray-100); color: var(--navy); }
  .acc-tab.active { background: var(--navy); color: white; border-color: var(--navy); }
  .acc-tab svg { width: 18px; height: 18px; flex-shrink: 0; }
  .acc-panel { background: white; border-radius: var(--radius); border: 1.5px solid var(--gray-200); padding: 36px; }
  .acc-panel-title { font-size: 22px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
  .acc-panel-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 28px; line-height: 1.7; }
  .feat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .feat-item { display: flex; gap: 10px; align-items: flex-start; }
  .feat-dot { width: 22px; height: 22px; border-radius: 6px; background: var(--gray-100); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
  .feat-dot svg { width: 13px; height: 13px; color: var(--blue); }
  .feat-item span { font-size: 14px; font-weight: 600; color: var(--navy); line-height: 1.5; }

  /* ===================== PRICING ===================== */
  .pricing-toggle { display: flex; background: var(--gray-100); border-radius: 10px; padding: 4px; width: fit-content; margin: 0 auto 40px; border: 1px solid var(--gray-200); }
  .ptog-btn { padding: 9px 24px; border-radius: 7px; font-size: 14px; font-weight: 700; cursor: pointer; border: none; background: transparent; color: var(--text-muted); transition: .2s; }
  .ptog-btn.active { background: var(--navy); color: white; box-shadow: var(--shadow); }
  .pricing-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
  .pricing-card { background: white; border-radius: var(--radius); padding: 28px 24px; border: 1.5px solid var(--gray-200); position: relative; transition: all .3s; }
  .pricing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
  .pricing-card.featured { background: var(--navy); border-color: var(--navy); }
  .featured-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #0f172a; font-size: 11px; font-weight: 800; padding: 4px 16px; border-radius: 100px; white-space: nowrap; }
  .plan-name { font-size: 14px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 12px; }
  .featured .plan-name { color: rgba(255,255,255,.6); }
  .plan-capacity { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; font-weight: 500; }
  .featured .plan-capacity { color: rgba(255,255,255,.55); }
  .plan-price { font-size: 28px; font-weight: 800; color: var(--navy); line-height: 1; margin-bottom: 6px; }
  .featured .plan-price { color: white; }
  .plan-period { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; }
  .featured .plan-period { color: rgba(255,255,255,.5); }
  .plan-features { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .plan-features li { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--text-main); font-weight: 500; }
  .featured .plan-features li { color: rgba(255,255,255,.85); }
  .plan-features li svg { width: 18px; height: 18px; color: var(--blue); flex-shrink: 0; }
  .featured .plan-features li svg { color: var(--sky); }
  .plan-includes-label { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: .8px; text-transform: uppercase; margin-bottom: 12px; }
  .featured .plan-includes-label { color: rgba(255,255,255,.5); }
  .btn-plan { width: 100%; padding: 13px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; transition: all .2s; border: none; margin-bottom: 20px; }
  .btn-plan-outline { background: transparent; border: 2px solid var(--navy) !important; color: var(--navy); }
  .btn-plan-outline:hover { background: var(--navy); color: white; }
  .btn-plan-featured { background: var(--accent); color: #0f172a; }
  .btn-plan-featured:hover { background: #f59e0b; }
  .pricing-note { text-align: center; margin-top: 24px; font-size: 13px; color: var(--text-muted); background: var(--gray-100); border-radius: 10px; padding: 14px 20px; border: 1px solid var(--gray-200); }

  /* ===================== PORTFOLIO ===================== */
  .port-stats { display: flex; gap: 12px; justify-content: center; margin-bottom: 36px; flex-wrap: wrap; }
  .port-stat-box { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 12px; padding: 14px 24px; text-align: center; }
  .port-stat-box .num { font-size: 22px; font-weight: 800; color: var(--navy); }
  .port-stat-box .lbl { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
  .port-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
  .port-item {
    background: white; border-radius: 14px; padding: 16px 20px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    border: 1.5px solid var(--gray-200); transition: all .25s;
  }
  .port-item:hover { border-color: var(--sky); box-shadow: var(--shadow); }
  .port-item.top { border: 2px solid var(--blue-light); }
  .port-rank {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; flex-shrink: 0;
  }
  .port-rank.gold { background: #FAEEDA; color: #633806; }
  .port-rank.silver { background: #F1EFE8; color: #444441; }
  .port-info { flex: 1; min-width: 160px; }
  .port-name { font-size: 15px; font-weight: 800; color: var(--navy); }
  .port-type { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
  .port-siswa { font-size: 12px; font-weight: 700; color: var(--blue); display: flex; align-items: center; gap: 5px; min-width: 80px; }
  .port-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; display: inline-block; flex-shrink: 0; }
  .port-tags { display: flex; flex-wrap: wrap; gap: 5px; }
  .port-tag { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 100px; }
  .port-tag.ujian { background: #dbeafe; color: #1e40af; }
  .port-tag.apk { background: #f3e8ff; color: #6b21a8; }
  .port-tag.website { background: #dcfce7; color: #166534; }
  .port-tag.custom { background: #fef9c3; color: #854d0e; }
  .port-badge { background: var(--gray-100); color: var(--blue); font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 100px; border: 1px solid var(--gray-200); white-space: nowrap; }
  .port-others-label { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 12px; }
  .port-others-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 10px; margin-bottom: 28px; }
  .port-other-item { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; }
  .port-other-avatar { width: 30px; height: 30px; border-radius: 50%; background: white; border: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--navy); flex-shrink: 0; }
  .port-other-name { font-size: 13px; font-weight: 700; color: var(--navy); }
  .port-other-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
  .port-cta { background: var(--navy); border-radius: 16px; padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
  .port-cta-title { font-size: 16px; font-weight: 800; color: white; margin-bottom: 4px; }
  .port-cta-sub { font-size: 13px; color: rgba(255,255,255,.6); }
  .port-cta-btn { background: var(--accent); color: #0f172a; font-size: 14px; font-weight: 800; padding: 12px 24px; border-radius: 10px; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
  .port-cta-btn:hover { background: #f59e0b; }

  /* ===================== TESTIMONIALS ===================== */
  .testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
  .testi-card { background: white; border-radius: var(--radius); padding: 28px 24px; border: 1.5px solid var(--gray-200); transition: .3s; position: relative; }
  .testi-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--blue-light); }
  .testi-module { position: absolute; top: 18px; right: 18px; background: var(--gray-100); font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px; color: var(--blue); }
  .testi-stars { display: flex; gap: 3px; margin-bottom: 14px; }
  .testi-stars span { color: var(--accent); font-size: 16px; }
  .testi-text { font-size: 14.5px; color: var(--text-main); line-height: 1.7; margin-bottom: 20px; font-style: italic; }
  .testi-author { display: flex; align-items: center; gap: 12px; }
  .testi-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; color: white; flex-shrink: 0; }
  .testi-name { font-size: 14px; font-weight: 700; color: var(--navy); }
  .testi-role { font-size: 12px; color: var(--text-muted); }

  /* ===================== DOKUMENTASI FOTO ===================== */
  .foto-section { margin-top: 48px; }
  .foto-section-label { text-align: center; margin-bottom: 24px; }
  .foto-section-label p { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .8px; }
  .foto-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
  .foto-item { border-radius: 10px; overflow: hidden; border: 1.5px solid var(--gray-200); aspect-ratio: 4/3; position: relative; }
  .foto-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .foto-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(9,20,68,.75)); padding: 10px 10px 8px; }
  .foto-caption-name { font-size: 11px; font-weight: 700; color: white; }
  .foto-caption-sub { font-size: 10px; color: rgba(255,255,255,.7); }

  /* ===================== FORM ===================== */
  .lead-form-wrap { max-width: 720px; margin: 0 auto; background: white; border-radius: 24px; padding: 48px; box-shadow: var(--shadow-lg); border: 1.5px solid var(--gray-200); }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
  .form-group { display: flex; flex-direction: column; gap: 7px; }
  .form-group label { font-size: 13px; font-weight: 700; color: var(--navy); }
  .form-group input, .form-group select { padding: 12px 16px; border: 1.5px solid var(--gray-200); border-radius: 10px; font-size: 14px; font-family: inherit; color: var(--text-main); transition: .2s; background: var(--gray-50); }
  .form-group input:focus, .form-group select:focus { outline: none; border-color: var(--blue); background: white; box-shadow: 0 0 0 3px rgba(37,99,235,.08); }
  .form-full { grid-column: 1/-1; }
  .cb-section-label { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
  .checkbox-group { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 24px; }
  .checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-main); cursor: pointer; }
  .checkbox-label input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--navy); }
  .btn-submit { width: 100%; padding: 16px; background: var(--navy); color: white; font-weight: 800; font-size: 16px; border-radius: 12px; border: none; cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 10px; }
  .btn-submit:hover { background: var(--blue); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,99,235,.3); }

  /* ===================== CTA FINAL ===================== */
  .cta-final { background: var(--navy-deep); padding: 100px 5%; text-align: center; position: relative; overflow: hidden; }
  .cta-final::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 60% at 50% 50%, rgba(37,99,235,.2) 0%,transparent 70%); }
  .cta-final h2 { font-size: clamp(28px,4vw,48px); font-weight: 800; color: white; margin-bottom: 16px; position: relative; z-index: 2; }
  .cta-final p { font-size: 16px; color: rgba(255,255,255,.6); margin-bottom: 40px; position: relative; z-index: 2; }
  .cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 2; }

  /* ===================== FOOTER ===================== */
  footer { background: #060d2e; padding: 60px 5% 32px; }
  .footer-inner { max-width: 1100px; margin: 0 auto; }
  .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
  .footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
  .footer-logo .flm { width: 36px; height: 36px; background: var(--navy); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: white; font-size: 13px; }
  .footer-logo-name { font-size: 16px; font-weight: 800; color: white; line-height: 1.2; }
  .footer-logo-sub { font-size: 10px; color: rgba(255,255,255,.4); letter-spacing: .5px; text-transform: uppercase; }
  .footer-brand p { font-size: 13.5px; color: rgba(255,255,255,.5); line-height: 1.7; max-width: 280px; }
  .social-links { display: flex; gap: 10px; margin-top: 16px; }
  .social-link { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center; transition: .2s; }
  .social-link:hover { background: rgba(255,255,255,.15); }
  .social-link svg { width: 16px; height: 16px; color: rgba(255,255,255,.6); }
  .footer-col h4 { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 16px; }
  .footer-col a { display: block; font-size: 13.5px; color: rgba(255,255,255,.45); margin-bottom: 10px; transition: color .2s; }
  .footer-col a:hover { color: rgba(255,255,255,.9); }
  .footer-bottom { border-top: 1px solid rgba(255,255,255,.07); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
  .footer-bottom p { font-size: 12.5px; color: rgba(255,255,255,.3); }
  .footer-bottom .footer-copy-dim { color: rgba(255,255,255,.2); }
  .footer-bottom .dev-link { color: var(--sky); font-weight: 700; }

  /* ===================== MOBILE NAV ===================== */
  .mobile-menu { display: none; position: fixed; top: 68px; left: 0; right: 0; background: white; border-bottom: 1px solid var(--gray-200); padding: 20px 5%; box-shadow: var(--shadow-md); z-index: 99; flex-direction: column; gap: 14px; }
  .mobile-menu.open { display: flex; }
  .mobile-menu a { font-size: 15px; font-weight: 700; color: var(--navy); padding: 8px 0; border-bottom: 1px solid var(--gray-100); }

  /* ===================== WA FLOAT ===================== */
  .wa-fixed { position: fixed; bottom: 28px; right: 28px; z-index: 200; background: #25d366; border-radius: 50%; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,.4); cursor: pointer; transition: .2s; }
  .wa-fixed:hover { transform: scale(1.1); box-shadow: 0 8px 28px rgba(37,211,102,.5); }
  .wa-fixed svg { width: 28px; height: 28px; color: white; }

  /* ===================== ANIMATIONS ===================== */
  .fade-in { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
  .fade-in.visible { opacity: 1; transform: none; }

  /* ===================== RESPONSIVE ===================== */
  @media (max-width: 1200px) {
    .pricing-grid { grid-template-columns: repeat(2,1fr); }
  }
  @media (max-width: 1024px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-visual { display: none; }
    .acc-grid { grid-template-columns: 1fr; }
    .acc-tabs { flex-direction: row; flex-wrap: wrap; }
    .footer-top { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 768px) {
    .nav-links, .nav-cta { display: none; }
    .hamburger { display: flex; }
    .stats-inner { grid-template-columns: 1fr 1fr; }
    .adv-grid { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; }
    .testi-grid { grid-template-columns: 1fr; }
    .foto-grid { grid-template-columns: repeat(2,1fr); }
    .form-grid { grid-template-columns: 1fr; }
    .checkbox-group { grid-template-columns: repeat(2,1fr); }
    .footer-top { grid-template-columns: 1fr; gap: 28px; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .lead-form-wrap { padding: 28px 20px; }
    .feat-list { grid-template-columns: 1fr; }
    .port-others-grid { grid-template-columns: 1fr 1fr; }
    .port-cta { flex-direction: column; }
  }
</style>
</head>
<body x-data="{ mobileOpen: false, activeTab: 'cbt', pricingMode: 'paket', scrolled: false }"
      @scroll.window="scrolled = window.scrollY > 20">

<!-- WA Float -->
<a href="https://wa.me/6285382702449" class="wa-fixed" target="_blank" title="Chat WhatsApp">
  <svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.123.556 4.116 1.528 5.845L.057 23.899l6.234-1.635A11.936 11.936 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.892a9.876 9.876 0 01-5.017-1.364l-.36-.214-3.732.979 1.003-3.648-.234-.373A9.865 9.865 0 012.108 12C2.108 6.528 6.528 2.108 12 2.108S21.892 6.528 21.892 12 17.472 21.892 12 21.892z"/></svg>
</a>

<!-- NAVBAR -->
<nav class="navbar" :class="{ scrolled: scrolled }">
  <div class="nav-logo">
  <img src="assets/logo/sriwijaya.png" alt="Sriwijaya Smart Edu Logo" style="width:40px; height:40px;">
  <div>
    <div class="logo-text">Sriwijaya Smart Edu</div>
    <div class="logo-sub">Smart Solutions for Modern Education</div>
  </div>
</div>
  <div class="nav-links">
    <a href="#modul">Aplikasi</a>
    <a href="#fitur">Fitur</a>
    <a href="#harga">Harga</a>
    <a href="#portofolio">Portofolio</a>
    <a href="#kontak">Kontak</a>
  </div>
  <div class="nav-cta">
    <a href="login.php" class="btn-outline">Login Sekolah</a>
    <a href="#kontak" class="btn-solid">Konsultasi Gratis</a>
  </div>
  <div class="hamburger" @click="mobileOpen = !mobileOpen">
    <span></span><span></span><span></span>
  </div>
</nav>
<div class="mobile-menu" :class="{ open: mobileOpen }">
  <a href="#modul" @click="mobileOpen=false">Modul</a>
  <a href="#fitur" @click="mobileOpen=false">Fitur</a>
  <a href="#harga" @click="mobileOpen=false">Harga</a>
  <a href="#portofolio" @click="mobileOpen=false">Portofolio</a>
  <a href="#kontak" @click="mobileOpen=false">Konsultasi Gratis</a>
</div>

<!-- HERO -->
<section class="hero" id="hero">
  <div class="hero-bg"></div>
  <div class="hero-grid"></div>
  <div class="hero-inner">
    <div>
      <div class="hero-badge">
        <div class="dot"></div>
        <span>By Sriwijaya Dev</span>
      </div>
      <h1>Ujian Sekolah <em>Tanpa Kertas, Tanpa Ribet</em> Nilai Langsung Keluar Otomatis</h1>
      <p>Kami bantu setup, training, dan pendampingan sampai sekolah Anda benar-benar siap digunakan</p>
      <div class="hero-btns">
        <a href="#carakerja" class="btn-hero-primary">
          <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polygon points="5,3 19,12 5,21"/></svg>
          Lihat Cara Kerja
        </a>
        <a href="#kontak" class="btn-hero-secondary">
          <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
          Jadwalkan Demo Gratis via WhatsApp
        </a>
      </div>
      <p>Gratis konsultasi • Respon cepat • Tanpa komitmen</p>
      <div class="hero-modules">
        <div class="hero-mod-chip"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2"/></svg>Ujian Berbasis Android</div>
        <div class="hero-mod-chip"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>SPMB Online</div>
        <div class="hero-mod-chip"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>Perpustakaan</div>
        <div class="hero-mod-chip"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>Pembayaran SPP</div>
        <div class="hero-mod-chip"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>Absensi Digital</div>
        <div class="hero-mod-chip"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>Website Sekolah</div>
        <div class="hero-mod-chip"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>Aplikasi Lainnya</div>
      </div>
    </div>
    <div class="hero-visual">
      <div class="hero-visual-inner">
        <div class="floating-badge top">
          <div class="fb-icon green">✅</div>
          <div class="fb-text"><div class="fb-label">Ujian Selesai</div><div class="fb-sub">1247 siswa mengikuti</div></div>
        </div>
        <div class="dashboard-frame">
          <div class="frame-bar">
            <div class="frame-dot red"></div>
            <div class="frame-dot yellow"></div>
            <div class="frame-dot green"></div>
            <div class="frame-bar-title">Sriwijaya Smart Edu — Dashboard</div>
          </div>
          <div class="frame-content">
            <div class="dash-header">
              <div class="dash-title">📊 Dashboard Sekolah</div>
              <div class="dash-badge">● Live</div>
            </div>
            <div class="dash-stats">
              <div class="dash-stat"><div class="num">1.247</div><div class="lbl">Total Siswa</div><div class="arrow">↑ 12%</div></div>
              <div class="dash-stat"><div class="num">98%</div><div class="lbl">Kehadiran</div><div class="arrow">↑ 3%</div></div>
              <div class="dash-stat"><div class="num">54</div><div class="lbl">Ujian Aktif</div><div class="arrow">↑ 8</div></div>
            </div>
            <div class="dash-modules-label">Modul Aktif</div>
            <div class="dash-modules-grid">
              <div class="dash-mod"><div class="icon">📝</div><div class="name">CBT Ujian</div></div>
              <div class="dash-mod"><div class="icon">🎓</div><div class="name">PPDB</div></div>
              <div class="dash-mod"><div class="icon">📚</div><div class="name">Perpus</div></div>
              <div class="dash-mod"><div class="icon">💳</div><div class="name">SPP</div></div>
              <div class="dash-mod"><div class="icon">✅</div><div class="name">Absensi</div></div>
              <div class="dash-mod"><div class="icon">🌐</div><div class="name">Website</div></div>
              <div class="dash-mod"><div class="icon">📱</div><div class="name">APK</div></div>
              <div class="dash-mod dash-mod-add"><div class="dash-mod-add-icon">+</div></div>
            </div>
          </div>
        </div>
        
      </div>
    </div>
  </div>
</section>

<!-- STATS -->
<section class="stats-section">
  <div class="stats-inner">
    <div class="stat-card fade-in">
      <div class="stat-icon"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9,22 9,12 15,12 15,22"/></svg></div>
      <div class="stat-num">15+</div>
      <div class="stat-label">Sekolah Aktif</div>
    </div>
    <div class="stat-card fade-in">
      <div class="stat-icon"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
      <div class="stat-num">8.971+</div>
      <div class="stat-label">Total Siswa</div>
    </div>
    <div class="stat-card fade-in">
      <div class="stat-icon"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg></div>
      <div class="stat-num">12</div>
      <div class="stat-label">Aplikasi Tersedia</div>
    </div>
    <div class="stat-card fade-in">
      <div class="stat-icon"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/></svg></div>
      <div class="stat-num">24/7</div>
      <div class="stat-label">Digunakan Sepanjang Tahun</div>
    </div>
  </div>
</section>

<!-- ==================== CARA KERJA ==================== -->
<section class="cara-kerja-section" id="carakerja">
  <div class="ck-bg"></div>
  <div class="ck-grid"></div>
  <div class="container" style="position:relative;z-index:2;">

    <div class="ck-header">
      <span class="ck-tag">Cara Kerja</span>
      <h2 class="ck-title">Mulai Ujian Online dalam <em>3 Langkah</em></h2>
      <p class="ck-sub">Tidak perlu keahlian teknis. Dari upload soal hingga nilai keluar semua otomatis.</p>
    </div>

    <div class="ck-steps">

      <!-- Step 1 -->
      <div class="ck-step">
        <div class="ck-step-num"><span>1</span></div>
        <div class="ck-step-card">
          <div class="ck-icon-wrap">
            <div class="ck-icon">
              <svg width="28" height="28" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17,8 12,3 7,8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
            </div>
          </div>
          <div class="ck-step-body">
            <div class="ck-step-label">Langkah 1 — Persiapan</div>
            <h3 class="ck-step-title">Guru Upload Soal</h3>
            <p class="ck-step-desc">Unggah soal pilihan ganda atau esai dari file Excel/Word, atau buat langsung di sistem. Atur waktu, kelas, dan jadwal ujian dalam hitungan menit.</p>
            <div class="ck-step-tags">
              <span class="ck-tag-pill">📄 Import Excel/Word</span>
              <span class="ck-tag-pill">⏱️ Atur Waktu Ujian</span>
              <span class="ck-tag-pill">🔀 Soal dan Jawaban Diacak Otomatis</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Step 2 -->
      <div class="ck-step">
        <div class="ck-step-num ck-step-num-2"><span>2</span></div>
        <div class="ck-step-card ck-step-card-2">
          <div class="ck-icon-wrap ck-icon-wrap-2">
            <div class="ck-icon ck-icon-2">
              <svg width="28" height="28" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
            </div>
          </div>
          <div class="ck-step-body">
            <div class="ck-step-label">Langkah 2 — Pelaksanaan</div>
            <h3 class="ck-step-title">Siswa Mengerjakan via HP Android</h3>
            <p class="ck-step-desc">Siswa buka aplikasi di HP Android masing-masing, login dengan token, dan langsung mulai ujian. Anti-curang aktif otomatis, tidak bisa buka aplikasi lain.</p>
            <div class="ck-step-tags">
              <span class="ck-tag-pill">📱 Cukup HP Android</span>
              <span class="ck-tag-pill">🔒 Anti-Curang Aktif</span>
              <span class="ck-tag-pill">🌐 Bisa Tanpa Internet Stabil</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Step 3 -->
      <div class="ck-step">
        <div class="ck-step-num ck-step-num-3"><span>3</span></div>
        <div class="ck-step-card ck-step-card-3">
          <div class="ck-icon-wrap ck-icon-wrap-3">
            <div class="ck-icon ck-icon-3">
              <svg width="28" height="28" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="22,12 18,12 15,21 9,3 6,12 2,12"/></svg>
            </div>
          </div>
          <div class="ck-step-body">
            <div class="ck-step-label">Langkah 3 — Hasil Instan</div>
            <h3 class="ck-step-title">Nilai Langsung Keluar & Laporan Otomatis</h3>
            <p class="ck-step-desc">Begitu ujian selesai, nilai langsung tampil. Guru mendapat rekap nilai per siswa, per kelas, dan analisis butir soal — tanpa koreksi manual sama sekali.</p>
            <div class="ck-step-tags">
              <span class="ck-tag-pill">⚡ Nilai Instan</span>
              <span class="ck-tag-pill">📊 Rekap Otomatis</span>
              <span class="ck-tag-pill">📥 Export Excel/PDF</span>
            </div>
          </div>
        </div>
      </div>

    </div><!-- /ck-steps -->

    <div class="ck-cta-strip">
      <div class="ck-cta-left">
        <div class="ck-cta-pulse"></div>
        <div>
          <div class="ck-cta-title">Siap dalam 3 Hari Kerja</div>
          <div class="ck-cta-sub">Tim kami bantu setup dari awal, gratis konsultasi &amp; pendampingan pertama</div>
        </div>
      </div>
      <a href="#kontak" class="ck-cta-btn">
        Mulai Sekarang !
        <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>

  </div>
</section>
<!-- ==================== / CARA KERJA ==================== -->


<!-- MODULES -->
<section class="section" id="modul">
  <div class="container">
    <div class="section-header">
      <span class="section-tag">Aplikasi Sriwijaya Smart System</span>
      <h2 class="section-title">Pilih Aplikasi Sesuai Kebutuhan Sekolah</h2>
      <p class="section-sub">Setiap aplikasi dapat dipilih secara terpisah sesuai dengan yang Anda butuhkan.</p>
    </div>
    <div class="modules-grid">
      <div class="module-card">
        <div class="mod-badge popular">⭐ Populer</div>
        <div class="mod-icon"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2"/></svg></div>
        <h3>Ujian Berbasis Android</h3>
        <p>Sistem ujian berbasis Android dengan sistem anti-curang, manajemen ringan dan penilaian otomatis.</p>
        <a href="demo.php" class="mod-link">Lihat Demo <svg width="14" height="14" 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 class="module-card">
        <div class="mod-icon"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
        <h3>SPMB Digital</h3>
        <p>Sistem Penerimaan Murid Baru berbasis digital dengan keamanan digital dan upload berkas.</p>
        <a href="#fitur" class="mod-link">Lihat Demo <svg width="14" height="14" 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 class="module-card">
        <div class="mod-icon"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg></div>
        <h3>Perpustakaan Digital</h3>
        <p>Kelola koleksi buku, peminjaman, dan denda secara otomatis dan real-time.</p>
        <a href="#fitur" class="mod-link">Lihat Demo <svg width="14" height="14" 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 class="module-card">
        <div class="mod-icon"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg></div>
        <h3>Pembayaran SPP</h3>
        <p>Kelola tagihan SPP, pembayaran lain, dan pantau status pembayaran siswa secara langsung.</p>
        <a href="#fitur" class="mod-link">Lihat Demo <svg width="14" height="14" 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 class="module-card">
        <div class="mod-icon"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg></div>
        <h3>Absensi Digital</h3>
        <p>Rekam kehadiran siswa dan guru dengan scan QR atau input manual, rekap otomatis harian.</p>
        <a href="#fitur" class="mod-link">Lihat Demo <svg width="14" height="14" 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 class="module-card">
        <div class="mod-icon"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg></div>
        <h3>Website Sekolah</h3>
        <p>Website profesional dengan profil sekolah, berita, galeri, dan SEO-friendly.</p>
        <a href="#fitur" class="mod-link">Lihat Demo <svg width="14" height="14" 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 class="module-card">
        <div class="mod-icon"><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg></div>
        <h3>Aplikasi Lainnya</h3>
        <p>Rancang Aplikasi sesuai kebutuhan sekolah Anda.</p>
        <a href="#fitur" class="mod-link">Lihat Demo <svg width="14" height="14" 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>
  </div>
</section>

<!-- ADVANTAGES -->
<section class="section section-alt">
  <div class="container">
    <div class="adv-grid">
      <div class="adv-image-side fade-in">
        <div class="adv-main-card">
          <h3>Mulai dari Ujian, Kembangkan Sesuai Kebutuhan</h3>
          <p>Gunakan sistem CBT sebagai inti, lalu tambahkan fitur lain kapan saja sesuai kebutuhan sekolah Anda.</p>
          <div class="modular-chips">
            <div class="m-chip active">✅ Ujian Berbasis Android</div>
            <div class="m-chip">PPDB</div>
            <div class="m-chip">Perpustakaan</div>
            <div class="m-chip">Pembayaran</div>
            <div class="m-chip active">✅ Website</div>
            <div class="m-chip">Absensi</div>
            <div class="m-chip">Aplikasi Lainnya</div>
          </div>
          <div class="adv-estimasi">
            <div class="adv-estimasi-label">Estimasi Biaya</div>
            <div class="adv-estimasi-price">Rp 2.350.000 <span>/tahun</span></div>
            <div class="adv-estimasi-sub">2 Aplikasi terpilih</div>
          </div>
        </div>
      </div>
      <div>
        <span class="section-tag adv-section-tag">Keunggulan</span>
        <h2 class="section-title adv-section-title">Mengapa Sekolah Memilih Sistem Kami?</h2>
        <div class="adv-list">
          <div class="adv-item">
            <div class="adv-check"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22,4 12,14.01 9,11.01"/></svg></div>
            <div><h4>Pendampingan Proktor dan Teknisi</h4><p>Didampingi sampai sekolah benar-benar bisa pakai.</p></div>
          </div>
          <div class="adv-item">
            <div class="adv-check"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg></div>
            <div><h4>Keamanan Ujian Lebih Terjaga</h4><p>Sistem dilengkapi proteksi untuk meminimalisir kecurangan dan menjaga integritas ujian tetap aman.</p></div>
          </div>
          <div class="adv-item">
            <div class="adv-check"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="23,6 13.5,15.5 8.5,10.5 1,18"/><polyline points="17,6 23,6 23,12"/></svg></div>
            <div><h4>Ringan &amp; Stabil Saat Digunakan</h4><p>Tetap lancar digunakan oleh banyak siswa sekaligus, bahkan pada perangkat dengan spesifikasi standar.</p></div>
          </div>
          <div class="adv-item">
            <div class="adv-check"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></div>
            <div><h4>Manajemen Ujian Lebih Mudah</h4><p>Mulai dari input soal, pengaturan jadwal, hingga monitoring peserta bisa dilakukan dengan cepat dan praktis.</p></div>
          </div>
          <div class="adv-item">
            <div class="adv-check"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></div>
            <div><h4>Hasil Langsung &amp; Otomatis</h4><p>Nilai dapat langsung dilihat setelah ujian selesai tanpa koreksi manual yang memakan waktu.</p></div>
          </div>
          <div class="adv-item">
            <div class="adv-check"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div>
            <div><h4>Siap Mendampingi Saat Dibutuhkan</h4><p>Tim kami siap membantu sebelum, saat, dan setelah ujian berlangsung.</p></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- FEATURES PER MODULE -->
<section class="section" id="fitur">
  <div class="container">
    <div class="section-header">
      <span class="section-tag">Detail Fitur</span>
      <h2 class="section-title">Fitur Lengkap Setiap Aplikasi</h2>
      <p class="section-sub">Klik Aplikasi untuk melihat fitur yang tersedia</p>
    </div>
    <div class="acc-grid">
      <div class="acc-tabs">
        <div class="acc-tab" :class="{ active: activeTab === 'cbt' }" @click="activeTab='cbt'">
          <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2"/></svg>Aplikasi Ujian
        </div>
        <div class="acc-tab" :class="{ active: activeTab === 'ppdb' }" @click="activeTab='ppdb'">
          <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>SPMB Online
        </div>
        <div class="acc-tab" :class="{ active: activeTab === 'perpus' }" @click="activeTab='perpus'">
          <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>Perpustakaan Digital
        </div>
        <div class="acc-tab" :class="{ active: activeTab === 'spp' }" @click="activeTab='spp'">
          <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>Pembayaran SPP
        </div>
        <div class="acc-tab" :class="{ active: activeTab === 'absen' }" @click="activeTab='absen'">
          <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>Absensi Digital
        </div>
        <div class="acc-tab" :class="{ active: activeTab === 'web' }" @click="activeTab='web'">
          <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/></svg>Website Sekolah
        </div>
        <div class="acc-tab" :class="{ active: activeTab === 'apk' }" @click="activeTab='apk'">
          <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>Aplikasi Lainnya
        </div>
      </div>
      <div>
        <div class="acc-panel" x-show="activeTab==='cbt'">
          <div class="acc-panel-title">Ujian Online Berbasis Android</div>
          <div class="acc-panel-sub">Sistem Ujian Berbasis Android yang memiliki keamanan untuk mengatasi siswa yang curang. Manajemen yang mudah dan terintegrasi.</div>
          <div class="feat-list">
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Soal pilihan ganda, esai &amp; multi-type</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Randomisasi soal &amp; jawaban otomatis</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Sistem anti-cheat (anti kecurangan)</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Penilaian &amp; nilai otomatis</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Update Aplikasi Secara Berkala</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Import soal dari Excel/Word</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Laporan hasil ujian per siswa</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Rekap nilai kelas &amp; analisis butir soal</span></div>
          </div>
        </div>
        <div class="acc-panel" x-show="activeTab==='ppdb'">
          <div class="acc-panel-title">SPMB Berbasis Online</div>
          <div class="acc-panel-sub">Penerimaan Peserta Didik Baru secara digital, transparan, dan efisien. Kurangi antrian dan kertas.</div>
          <div class="feat-list">
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Formulir pendaftaran online</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Upload berkas digital</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Verifikasi berkas online</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>(Optional) Seleksi otomatis berdasarkan nilai</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Pengumuman hasil online</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Dashboard monitoring real-time</span></div>
          </div>
        </div>
        <div class="acc-panel" x-show="activeTab==='perpus'">
          <div class="acc-panel-title">Perpustakaan Digital</div>
          <div class="acc-panel-sub">Kelola seluruh aktivitas perpustakaan sekolah secara digital, efisien, dan minim kertas.</div>
          <div class="feat-list">
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Katalog buku &amp; inventaris</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Peminjaman &amp; pengembalian</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Denda otomatis keterlambatan</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Scan barcode buku</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Riwayat peminjaman siswa</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Laporan bulanan otomatis</span></div>
          </div>
        </div>
        <div class="acc-panel" x-show="activeTab==='spp'">
          <div class="acc-panel-title">Pembayaran SPP</div>
          <div class="acc-panel-sub">Sistem keuangan sekolah terintegrasi. Monitor pembayaran SPP dan tagihan lain secara real-time.</div>
          <div class="feat-list">
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Tagihan SPP bulanan otomatis</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Tagihan kegiatan &amp; ekstrakurikuler</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Status pembayaran real-time</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Notifikasi tagihan ke orang tua</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Bukti pembayaran digital</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Laporan keuangan sekolah</span></div>
          </div>
        </div>
        <div class="acc-panel" x-show="activeTab==='absen'">
          <div class="acc-panel-title">Absensi Digital</div>
          <div class="acc-panel-sub">Rekam kehadiran siswa dan guru dengan mudah, cepat, dan akurat. Data tersedia seketika.</div>
          <div class="feat-list">
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Absensi scan QR code</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Input manual oleh wali kelas</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Rekap harian, mingguan, bulanan</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Notifikasi ketidakhadiran ke orang tua</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Izin &amp; sakit digital</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Ekspor laporan ke Excel/PDF</span></div>
          </div>
        </div>
        <div class="acc-panel" x-show="activeTab==='web'">
          <div class="acc-panel-title">Website Sekolah</div>
          <div class="acc-panel-sub">Website profesional yang meningkatkan citra sekolah dan memudahkan masyarakat mengakses informasi.</div>
          <div class="feat-list">
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Profil sekolah lengkap</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Manajemen berita &amp; pengumuman</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Galeri foto &amp; video kegiatan</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>SEO-friendly &amp; mobile responsive</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Data tenaga pendidik</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Hosting &amp; domain termasuk</span></div>
          </div>
        </div>
        <div class="acc-panel" x-show="activeTab==='apk'">
          <div class="acc-panel-title">Aplikasi Sekolah Lainnya</div>
          <div class="acc-panel-sub">Aplikasi sesuai dengan kebutuhan Sekolah</div>
          <div class="feat-list">
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Sistem Penilaian Pegawai</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Pengumuman Hasil Kelulusan</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>E-Learning</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Portal Alumni</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Sistem Poin Siswa</span></div>
            <div class="feat-item"><div class="feat-dot"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20,6 9,17 4,12"/></svg></div><span>Tersedia dalam Bentuk Website, Android &amp; iOS</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- PRICING -->
<section class="section section-alt" id="harga">
  <div class="container">
    <div class="section-header">
      <span class="section-tag">Harga Transparan</span>
      <h2 class="section-title">Pilih Harga Sesuai Kebutuhan</h2>
      <p class="section-sub">Harga Aplikasi Sesuai Sekolah</p>
    </div>
    <div class="pricing-toggle">
      <button class="ptog-btn" :class="{ active: pricingMode === 'paket' }" @click="pricingMode = 'paket'">Paket Aplikasi</button>
    </div>
    <div x-show="pricingMode === 'paket'">
      <div class="pricing-grid">
        <div class="pricing-card">
          <div class="plan-name">Basic</div>
          <div class="plan-capacity">250 siswa</div>
          <div class="plan-price">Rp 149.000</div>
          <div class="plan-period">per bulan</div>
          <button class="btn-plan btn-plan-outline">Pilih Paket</button>
          <div class="plan-includes-label">Termasuk</div>
          <ul class="plan-features">
            <li><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="9,12 11,14 15,10"/></svg>Server Aplikasi Ujian</li>
            <li><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="9,12 11,14 15,10"/></svg>CBT Berbasis Web</li>
             <li><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="9,12 11,14 15,10"/></svg>Gratis Setup dan Pendampingan</li>
            <li><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="9,12 11,14 15,10"/></svg>Manajemen Soal dan Hasil Ujian Mudah</li>
            <li><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="9,12 11,14 15,10"/></svg>Dukungan WA</li>
            
          </ul>
        </div>
        <div class="pricing-card">
          <div class="plan-name">Pro</div>
          <div class="plan-capacity">± 300–500 siswa</div>
          <div class="plan-price">Rp 299.000</div>
          <div class="plan-period">per bulan</div>
          <button class="btn-plan btn-plan-outline">Pilih Paket</button>
          <div class="plan-includes-label">Termasuk</div>
          <ul class="plan-features">
            <li><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="9,12 11,14 15,10"/></svg>Server Aplikasi Ujian VPS</li>
            <li><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="9,12 11,14 15,10"/></svg>Aplikasi Android</li>
             <li><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="9,12 11,14 15,10"/></svg>Gratis Setup dan Pendampingan</li>
            <li><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="9,12 11,14 15,10"/></svg>1 Fitur Tambahan (PPDB / Website / Lainnya)</li>
            <li><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="9,12 11,14 15,10"/></svg>Digunakan ratusan siswa tanpa kendala</li>
          </ul>
        </div>
        <div class="pricing-card featured">
          <div class="featured-tag">🔥 Paling Populer</div>
          <div class="plan-name">Premium</div>
          <div class="plan-capacity">± 500–1000 siswa</div>
          <div class="plan-price">Rp 449.000</div>
          <div class="plan-period">per bulan</div>
          <button class="btn-plan btn-plan-featured">Pilih Paket</button>
          <div class="plan-includes-label">Termasuk</div>
          <ul class="plan-features">
            <li><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="9,12 11,14 15,10"/></svg>Server Aplikasi Ujian VPS</li>
            <li><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="9,12 11,14 15,10"/></svg>Aplikasi Android</li>
             <li><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="9,12 11,14 15,10"/></svg>Gratis Setup dan Pendampingan</li>
            <li><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="9,12 11,14 15,10"/></svg>2 Aplikasi Tambahan (PPDB / Website / Lainnya)</li>
            <li><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="9,12 11,14 15,10"/></svg>Prioritas support</li>
          </ul>
        </div>
        <div class="pricing-card">
          <div class="plan-name">Ultimate</div>
          <div class="plan-capacity">± 1000–2000 siswa</div>
          <div class="plan-price">Rp 749.000</div>
          <div class="plan-period">per bulan</div>
          <button class="btn-plan btn-plan-outline">Pilih Paket</button>
          <div class="plan-includes-label">Termasuk</div>
          <ul class="plan-features">
            <li><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="9,12 11,14 15,10"/></svg>Semua fitur lengkap</li>
             <li><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="9,12 11,14 15,10"/></svg>Gratis Setup dan Pendampingan</li>
            <li><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="9,12 11,14 15,10"/></svg>5 Aplikasi Tambahan (PPDB / Website / Lainnya)</li>
            <li><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="9,12 11,14 15,10"/></svg>Pendampingan saat hari ujian</li>
            <li><svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="9,12 11,14 15,10"/></svg>Prioritas support</li>
          </ul>
        </div>
      </div>
      <div class="pricing-note">
        💡 <strong>Bisa request Aplikasi</strong> sesuai kebutuhan spesifik sekolah Anda. Hubungi tim kami untuk diskusi lebih lanjut.
      </div>
    </div>
  </div>
</section>

<!-- PORTFOLIO -->
<section class="section" id="portofolio">
  <div class="container">
    <div class="section-header">
      <span class="section-tag">Portofolio</span>
      <h2 class="section-title">Sekolah yang Telah Mempercayai Kami</h2>
      <p class="section-sub">Berbagai sekolah dari jenjang SMP hingga SMA/MA telah menggunakan sistem kami</p>
    </div>

    <div class="port-stats">
      <div class="port-stat-box"><div class="num">15+</div><div class="lbl">Sekolah Aktif</div></div>
      <div class="port-stat-box"><div class="num">8.000+</div><div class="lbl">Total Siswa</div></div>
      <div class="port-stat-box"><div class="num">100%</div><div class="lbl">Aktif Berlangganan</div></div>
    </div>

    <div class="port-list">
      <div class="port-item top">
        <div class="port-rank gold">1</div>
        <div class="port-info"><div class="port-name">MAN 2 Lubuklinggau</div><div class="port-type">Madrasah Aliyah Negeri</div></div>
        <div class="port-siswa"><div class="port-dot"></div>1.500 siswa</div>
        <div class="port-tags">
          <span class="port-tag ujian">Server Ujian</span>
          <span class="port-tag apk">APK</span>
          <span class="port-tag website">Aplikasi</span>
        </div>
        <span class="port-badge">Terbesar</span>
      </div>
      <div class="port-item top">
        <div class="port-rank gold">2</div>
        <div class="port-info"><div class="port-name">SMAN 15 Palembang</div><div class="port-type">SMA Negeri</div></div>
        <div class="port-siswa"><div class="port-dot"></div>1.500 siswa</div>
        <div class="port-tags">
          <span class="port-tag ujian">Server Ujian</span>
          <span class="port-tag apk">APK</span>
        </div>
        <span class="port-badge">Terbesar</span>
      </div>
      <div class="port-item">
        <div class="port-rank silver">3</div>
        <div class="port-info"><div class="port-name">MAN 1 Prabumulih</div><div class="port-type">Madrasah Aliyah Negeri</div></div>
        <div class="port-siswa"><div class="port-dot"></div>800 siswa</div>
        <div class="port-tags">
          <span class="port-tag ujian">Server Ujian</span>
          <span class="port-tag apk">APK</span>
          <span class="port-tag website">Website</span>
        </div>
      </div>
      <div class="port-item">
        <div class="port-rank silver">4</div>
        <div class="port-info"><div class="port-name">SMAN 2 Sekayu</div><div class="port-type">SMA Negeri</div></div>
        <div class="port-siswa"><div class="port-dot"></div>800 siswa</div>
        <div class="port-tags">
          <span class="port-tag ujian">Server Ujian</span>
          <span class="port-tag apk">APK</span>
          <span class="port-tag website">Website</span>
        </div>
      </div>
      <div class="port-item">
        <div class="port-rank silver">5</div>
        <div class="port-info"><div class="port-name">SMA IT Raudhatul Ulum</div><div class="port-type">SMA Islam Terpadu</div></div>
        <div class="port-siswa"><div class="port-dot"></div>800 siswa</div>
        <div class="port-tags">
          <span class="port-tag ujian">Server Ujian</span>
          <span class="port-tag apk">APK</span>
        </div>
      </div>
    </div>

    <div class="port-others-label">Dan Sekolah Lainnya</div>
    <div class="port-others-grid">
      <div class="port-other-item">
        <div class="port-other-avatar">SN</div>
        <div><div class="port-other-name">SMAN 1 Indralaya Utara</div><div class="port-other-sub">500 siswa · 4 layanan</div></div>
      </div>
      <div class="port-other-item">
        <div class="port-other-avatar">S5</div>
        <div><div class="port-other-name">SMAN 5 Sekayu</div><div class="port-other-sub">300 siswa · 3 layanan</div></div>
      </div>
      <div class="port-other-item">
        <div class="port-other-avatar">BI</div>
        <div><div class="port-other-name">SMA IT Bina Ilmi Palembang</div><div class="port-other-sub">350 siswa · 4 layanan</div></div>
      </div>
      <div class="port-other-item">
        <div class="port-other-avatar">PB</div>
        <div><div class="port-other-name">SMPIA 53 Baturaja</div><div class="port-other-sub">250 siswa · 3 layanan</div></div>
      </div>
    </div>

    <div class="port-cta">
      <div>
        <div class="port-cta-title">Sekolah Anda berikutnya?</div>
        <div class="port-cta-sub">Bergabung bersama sekolah yang telah bertransformasi digital bersama kami.</div>
      </div>
      <a href="#kontak" class="port-cta-btn">
        Konsultasi Gratis
        <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>
  </div>
</section>

<!-- TESTIMONI -->
<section class="section section-alt">
  <div class="container">
    <div class="section-header">
      <span class="section-tag">Testimoni</span>
      <h2 class="section-title">Apa Kata Mereka?</h2>
    </div>
    <div class="testi-grid">
      <div class="testi-card">
        <div class="testi-module">Ujian Berbasis Android</div>
        <div class="testi-stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
        <div class="testi-text">"Aplikasi ujian benar-benar membawa perubahan besar bagi efisiensi kerja kami. Proses penilaian sumatif, mulai dari harian, semester, hingga akhir jenjang, menjadi jauh lebih praktis dan terorganisir. Hal yang paling membuat tenang adalah fitur keamanannya yang sangat solid, sehingga potensi kecurangan bisa diminimalisir dengan maksimal."</div>
        <div class="testi-author">
          <div class="testi-avatar">TA</div>
          <div><div class="testi-name">Tri Apriyanti, S.Pd</div><div class="testi-role">Wakil Kurikulum — SMAN IA 53 Baturaja</div></div>
        </div>
      </div>
      <div class="testi-card">
        <div class="testi-module">Ujian + Website Sekolah</div>
        <div class="testi-stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
        <div class="testi-text">"Aplikasi ini sangat mendukung dan sangat bagus sekali untuk dipakai saat melaksanakan Asesmen. Selama penggunaan dan pelaksanaan selalu dibantu pemantauan oleh Tim pengelola sehingga kami sangat aman dalam penggunaan aplikasi."</div>
        <div class="testi-author">
          <div class="testi-avatar">EN</div>
          <div><div class="testi-name">Eka Nir Romadhoni W, S.Pd., M.M</div><div class="testi-role">Kepala SMA Negeri 2 Sekayu</div></div>
        </div>
      </div>
      <div class="testi-card">
        <div class="testi-module">Semua Fitur</div>
        <div class="testi-stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
        <div class="testi-text">"Aplikasi yang dilaksanakan membantu kami dalam upload soal dan merekap hasil ujian. Pengembangan Aplikasi SPMB dan Pengumuman membantu kami lebih mudah tahun ini."</div>
        <div class="testi-author">
          <div class="testi-avatar">FN</div>
          <div><div class="testi-name">Maryana, S.Pd., Gr</div><div class="testi-role">Proktor Ujian — MAN 1 Prabumulih</div></div>
        </div>
      </div>
    </div>

    <div class="foto-section">
      <div class="foto-section-label">
        <p>Dokumentasi Kegiatan Ujian</p>
      </div>
      <div class="foto-grid">
        <div class="foto-item">
          <img src="assets/pic/1.png" alt="Kegiatan Ujian SMAN 2 Sekayu"/>
          <div class="foto-caption"><div class="foto-caption-name">SMAN 5 Sekayu</div><div class="foto-caption-sub">Ujian Kelas XII 2026</div></div>
        </div>
        <div class="foto-item">
          <img src="assets/pic/2.png" alt="Kegiatan Ujian MAN 2 Lubuklinggau"/>
          <div class="foto-caption"><div class="foto-caption-name">SMPIA 53 Baturaja</div><div class="foto-caption-sub">Ujian Akhir Semester 2025</div></div>
        </div>
        <div class="foto-item">
          <img src="assets/pic/3.png" alt="Kegiatan Ujian MAN 1 Prabumulih"/>
          <div class="foto-caption"><div class="foto-caption-name">MAN 1 Prabumulih</div><div class="foto-caption-sub">Ujian Kelas XII 2026</div></div>
        </div>
        <div class="foto-item">
          <img src="assets/pic/4.png" alt="Kegiatan Ujian SMAN 15 Palembang"/>
          <div class="foto-caption"><div class="foto-caption-name">SMAN 2 Sekayu</div><div class="foto-caption-sub">Ujian Semester Genap 2025</div></div>
        </div>
        <div class="foto-item">
          <img src="assets/pic/5.png" alt="Kegiatan Ujian SMPIA 53 Baturaja"/>
          <div class="foto-caption"><div class="foto-caption-name">SMAN 1 Indralaya Utara</div><div class="foto-caption-sub">Ujian Akhir Semester 2025</div></div>
        </div>
        <div class="foto-item">
          <img src="assets/pic/6.png" alt="Kegiatan Ujian SMA IT Raudhatul Ulum"/>
          <div class="foto-caption"><div class="foto-caption-name">SMA IT Raudhatul Ulum</div><div class="foto-caption-sub">Ujian Semester Ganjil 2025</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- FORM LEADS -->
<section class="section" id="kontak">
  <div class="container">
    <div class="section-header">
      <span class="section-tag">Konsultasi Gratis</span>
      <h2 class="section-title">Mulai Sekarang, Gratis Konsultasi</h2>
      <p class="section-sub">Ceritakan kebutuhan sekolah Anda. Tim kami akan menghubungi dalam 1x24 jam.</p>
    </div>
    <div class="lead-form-wrap">
      <div class="form-grid">
        <div class="form-group">
          <label>Nama Sekolah *</label>
          <input type="text" id="namaSekolah" placeholder="Contoh: SMAN 1 Jakarta"/>
        </div>
        <div class="form-group">
          <label>Jumlah Siswa *</label>
          <select>
            <option value="">Pilih rentang...</option>
            <option id="jumlahSiswa">&lt; 200 siswa</option>
            <option id="jumlahSiswa">200 - 500 siswa</option>
            <option id="jumlahSiswa">500 - 1.000 siswa</option>
            <option id="jumlahSiswa">&gt; 1.000 siswa</option>
          </select>
        </div>
        <div class="form-group form-full">
          <label>Nomor WhatsApp *</label>
          <input type="tel" id="whatsapp" placeholder="Contoh: 08123456789"/>
        </div>
      </div>
      <div class="cb-section-label">Kebutuhan Sistem (pilih yang diinginkan):</div>
      <div class="checkbox-group">
        <label class="checkbox-label"><input type="checkbox" value="Ujian CBT"/> Ujian Online</label>
        <label class="checkbox-label"><input type="checkbox" value=""PPDB Online/> SPMBM Online</label>
        <label class="checkbox-label"><input type="checkbox" value="Perpustakaan"/> Perpustakaan</label>
        <label class="checkbox-label"><input type="checkbox" value="Pembayaran SPP"/>  Pembayaran SPP</label>
        <label class="checkbox-label"><input type="checkbox" value="Absensi"/>  Absensi</label>
        <label class="checkbox-label"><input type="checkbox" value="Website"/>  Website</label>
        <label class="checkbox-label"><input type="checkbox" value="APK Sekolah"/>  APK Sekolah</label>
        <label class="checkbox-label"><input type="checkbox" value="Custom / Lainnya"/>  Custom / Lainnya</label>
      </div>
     <button class="btn-submit" onclick="kirimWhatsApp()">
        <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.71 3.44 2 2 0 0 1 3.7 1.27h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8 8a16 16 0 0 0 6 6l.92-.92a2 2 0 0 1 2.1-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 15z"/></svg>
        Konsultasi Sekarang via WhatsApp
      </button>
    </div>
  </div>
</section>

<!-- CTA FINAL -->
<section class="cta-final" id="demo">
  <h2>“Jadwalkan Demo Gratis Hari Ini”</h2>
  <p>Kami Tunjukkan Langsung Cara Kerjanya</p>
  <div class="cta-btns">
    
    <a href="https://wa.me/6285382702449" class="btn-hero-secondary" target="_blank">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.123.556 4.116 1.528 5.845L.057 23.899l6.234-1.635A11.936 11.936 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.892a9.876 9.876 0 01-5.017-1.364l-.36-.214-3.732.979 1.003-3.648-.234-.373A9.865 9.865 0 012.108 12C2.108 6.528 6.528 2.108 12 2.108S21.892 6.528 21.892 12 17.472 21.892 12 21.892z"/></svg>
      Chat WhatsApp Sekarang
    </a>
  </div>
</section>

<!-- FOOTER -->
<footer>
  <div class="footer-inner">
    <div class="footer-top">
      <div class="footer-brand">
        <div class="footer-logo">
          
          <div>
            <div class="footer-logo-name">Sriwijaya Smart Edu</div>
            <div class="footer-logo-sub">Smart Solutions for Modern Education</div>
          </div>
        </div>
        <p>Platform digital sekolah yang menyediakan kebutuhan sekolah untuk Digitalisasi secara cepat dan mudah</p>
        <div class="social-links">
          <a href="#" class="social-link"><svg fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg></a>
          <a href="#" class="social-link"><svg fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg></a>
          <a href="#" class="social-link"><svg fill="currentColor" viewBox="0 0 24 24"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.27 8.27 0 004.84 1.56V6.79a4.85 4.85 0 01-1.07-.1z"/></svg></a>
        </div>
      </div>
      <div class="footer-col">
        <h4>Aplikasi</h4>
        <a href="#modul">Ujian Berbasis Android</a>
        <a href="#modul">PPDB Online</a>
        <a href="#modul">Perpustakaan Digital</a>
        <a href="#modul">Pembayaran SPP</a>
        <a href="#modul">Absensi Digital</a>
        <a href="#modul">Website Sekolah</a>
        <a href="#modul">APK Sekolah</a>
      </div>
      <div class="footer-col">
        <h4>Navigasi</h4>
        <a href="#hero">Beranda</a>
        <a href="#fitur">Fitur</a>
        <a href="#harga">Harga</a>
        <a href="#portofolio">Portofolio</a>
        <a href="#kontak">Konsultasi</a>
      </div>
      <div class="footer-col">
        <h4>Kontak</h4>
        <a href="https://wa.me/6285382702449">📱 0812-3456-7890</a>
        <a href="mailto:admin@sriwijayadev.com">✉️ admin@sriwijayadev.com</a>
        <a href="#">📍 Palembang, Indonesia</a>
      </div>
    </div>
    <div class="footer-bottom">
      <p>© 2026 Sriwijaya Smart Edu. Produk dari <a href="#" class="dev-link">Sriwijaya Dev</a> — Building Solutions, Empowering Futures.</p>
      <p class="footer-copy-dim">Inisiatif seorang guru untuk transformasi pendidikan Indonesia.</p>
    </div>
  </div>
</footer>
<script>
function kirimWhatsApp() {
  var nama = document.getElementById("namaSekolah").value;
  var siswa = document.getElementById("jumlahSiswa").value;
  var wa = document.getElementById("whatsapp").value;

  var kebutuhan = [];
  var checkboxes = document.querySelectorAll('.checkbox-group input[type="checkbox"]:checked');

  checkboxes.forEach((cb) => {
    kebutuhan.push(cb.value);
  });

  var pesan = `Halo, saya ingin konsultasi:

Nama Sekolah: ${nama}
Jumlah Siswa: ${siswa}
No WA: ${wa}
Kebutuhan: ${kebutuhan.join(", ")}`;

  var nomorAdmin = "6285382702449"; // GANTI

  var url = "https://wa.me/" + nomorAdmin + "?text=" + encodeURIComponent(pesan);

  window.open(url, '_blank');
}
</script>
<script>
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(el => {
      if (el.isIntersecting) el.target.classList.add('visible');
    });
  }, { threshold: 0.1 });
  document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));

  document.querySelector('.btn-submit').addEventListener('click', () => {
    const schoolName = document.querySelector('input[type="text"]').value;
    const phone = document.querySelector('input[type="tel"]').value;
    const checks = [...document.querySelectorAll('.checkbox-label input:checked')].map(cb => cb.parentElement.textContent.trim());
    const modules = checks.length > 0 ? checks.join(', ') : 'Belum dipilih';
    const msg = `Halo Sriwijaya Smart Edu!%0A%0ANama Sekolah: ${schoolName || '-'}%0ANomor WA: ${phone || '-'}%0AKebutuhan: ${modules}%0A%0ASaya ingin konsultasi lebih lanjut.`;
    window.open(`https://wa.me/6285382702449?text=${msg}`, '_blank');
  });
</script>
</body>
</html>