<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com data:; img-src 'self' https://cdn.jsdelivr.net data: blob:; media-src 'self' https:; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self'" />
<script>(function(){var t=null;try{t=localStorage.getItem("theme");}catch(e){}try{var d=t==="dark"||(!t&&matchMedia("(prefers-color-scheme:dark)").matches);if(d)document.documentElement.classList.add("dark");}catch(e){}})();</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>Lexa — Belajar 5 bahasa dengan cara cerdas</title>
<meta name="description" content="PWA pembelajaran 5 bahasa (Inggris, Indonesia, Arab, Jawa, Sunda) berbasis riset linguistik: SRS Ebbinghaus, CEFR A1–C2, kanon kultural (Pupuh, Tembang Macapat, Tajwid, Aksara). Gratis, offline-ready." />
<meta name="keywords" content="belajar bahasa, Inggris, Indonesia, Arab, Jawa, Sunda, CEFR, SRS, flashcard, Hanacaraka, Aksara Sunda, Tajwid, gratis" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="/" />
<link rel="icon" type="image/svg+xml" href="en/src/icons/logo.svg" />
<link rel="apple-touch-icon" href="en/src/icons/icon-192.svg" />
<meta name="theme-color" content="#7c3aed" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0a0e1a" />

<!-- Open Graph (URL/image filled at runtime from location.origin) -->
<meta property="og:title" content="Lexa — Belajar 5 bahasa dengan cara cerdas" />
<meta property="og:description" content="PWA gratis untuk belajar Inggris, Indonesia, Arab, Jawa, dan Sunda. Berbasis riset linguistik. Offline-ready." />
<meta property="og:type" content="website" />
<meta property="og:url" content="" data-origin-path="/" />
<meta property="og:image" content="" data-origin-path="/en/src/icons/icon-512.svg" />
<meta property="og:locale" content="id_ID" />
<meta property="og:site_name" content="Lexa" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Lexa — Belajar 5 bahasa dengan cara cerdas" />
<meta name="twitter:description" content="PWA gratis untuk belajar Inggris, Indonesia, Arab, Jawa, dan Sunda. Berbasis riset linguistik." />
<meta name="twitter:image" content="" data-origin-path="/en/src/icons/icon-512.svg" />

<!-- Structured data: Course / SoftwareApplication (URLs rewritten at runtime) -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "EducationalOrganization",
      "name": "Lexa",
      "url": "/",
      "logo": "/en/src/icons/icon-512.svg",
      "description": "Aplikasi pembelajaran 5 bahasa berbasis riset linguistik."
    },
    {
      "@type": "Course",
      "name": "Lexa — Kursus 5 Bahasa",
      "description": "Belajar bahasa Inggris, Indonesia, Arab, Jawa, dan Sunda dengan metode SRS Ebbinghaus dan kerangka CEFR.",
      "provider": { "@type": "EducationalOrganization", "name": "Lexa", "url": "/" },
      "hasCourseInstance": [
        { "@type": "CourseInstance", "name": "English", "courseMode": "online", "inLanguage": "en" },
        { "@type": "CourseInstance", "name": "Indonesian", "courseMode": "online", "inLanguage": "id" },
        { "@type": "CourseInstance", "name": "Arabic", "courseMode": "online", "inLanguage": "ar" },
        { "@type": "CourseInstance", "name": "Javanese", "courseMode": "online", "inLanguage": "jv" },
        { "@type": "CourseInstance", "name": "Sundanese", "courseMode": "online", "inLanguage": "su" }
      ],
      "offers": { "@type": "Offer", "price": "0", "priceCurrency": "IDR", "category": "Free" }
    },
    {
      "@type": "WebApplication",
      "name": "Lexa",
      "applicationCategory": "EducationalApplication",
      "operatingSystem": "Web, iOS, Android (PWA)",
      "offers": { "@type": "Offer", "price": "0", "priceCurrency": "IDR" }
    }
  ]
}
</script>
<script>
/* Resolve canonical/og:url/og:image + JSON-LD to current origin (works on lexa.app, localhost, IP). */
(function(){
  try{
    var o = location.origin;
    var canon = document.querySelector('link[rel="canonical"]');
    if(canon){ canon.setAttribute('href', o + (canon.getAttribute('href') || '/')); }
    document.querySelectorAll('meta[data-origin-path]').forEach(function(m){
      m.setAttribute('content', o + m.dataset.originPath);
    });
    var ld = document.querySelector('script[type="application/ld+json"]');
    if(ld){
      var fix = function(x){
        if(!x || typeof x !== 'object') return;
        for(var k in x){
          var v = x[k];
          if(typeof v === 'string' && v.length && v[0] === '/' && v[1] !== '/') x[k] = o + v;
          else if(typeof v === 'object') fix(v);
        }
      };
      var d = JSON.parse(ld.textContent);
      fix(d);
      ld.textContent = JSON.stringify(d);
    }
  }catch(e){}
})();
</script>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root{
  --bg:#f7f8fb; --bg-2:#ffffff; --bg-3:#fafbff;
  --ink:#0f172a; --ink-2:#475569; --ink-3:#94a3b8;
  --line:#e5e7eb; --line-2:#d1d5db;
  --brand:#7c3aed; --brand-2:#3b82f6; --brand-3:#06b6d4;
  --accent:#f59e0b; --ok:#10b981; --err:#ef4444;
  --shadow:0 8px 28px rgba(15,23,42,.08);
  --shadow-lg:0 20px 50px rgba(15,23,42,.10);
  --font:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --topbar-h:64px;
}
html.dark{
  --bg:#0a0e1a; --bg-2:#121827; --bg-3:#0f1422;
  --ink:#e2e8f0; --ink-2:#94a3b8; --ink-3:#64748b;
  --line:#1e293b; --line-2:#334155;
  --shadow:0 8px 28px rgba(0,0,0,.3); --shadow-lg:0 20px 50px rgba(0,0,0,.4);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);background:var(--bg);color:var(--ink);
  min-height:100dvh;line-height:1.55;-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit}

/* TOPBAR */
.topbar{
  position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg) 88%,transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
  padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));
  display:flex;align-items:center;gap:12px;
}
.topbar .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800}
.topbar .brand img{width:36px;height:36px;border-radius:10px}
.topbar .brand span{font-size:18px;letter-spacing:-.2px}
.topbar .spacer{flex:1}
.topbar a.nav-link{color:var(--ink-2);text-decoration:none;font-weight:600;font-size:14px;padding:8px 12px;border-radius:10px;transition:.15s}
.topbar a.nav-link:hover{color:var(--ink);background:var(--bg-2)}
.topbar a.cta{
  background:var(--brand);color:#fff;padding:10px 18px;border-radius:12px;
  font-weight:700;text-decoration:none;font-size:14px;transition:.15s;
}
.topbar a.cta:hover{filter:brightness(1.08)}
.topbar a.cta-ghost{color:var(--ink);border:1px solid var(--line);padding:9px 16px;border-radius:12px;font-weight:600;text-decoration:none;font-size:14px}
.topbar a.cta-ghost:hover{background:var(--bg-2)}
.themetoggle{width:38px;height:38px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line);font-size:16px;cursor:pointer;color:var(--ink);transition:.15s}
.themetoggle:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
@media (max-width:859px){
  .topbar a.nav-link[href="/about"]{display:none}
  .topbar .themetoggle{display:none}
}
@media (max-width:640px){
  .topbar a.nav-link{display:none}
  .topbar a.cta-ghost{display:none}
  .topbar a.cta{padding:8px 14px;font-size:13px}
}

/* Continue learning banner — only shown if signed in */
.cont-banner{
  display:none;
  background:linear-gradient(135deg,color-mix(in oklab,var(--brand) 12%,var(--bg-2)),color-mix(in oklab,var(--brand-3) 12%,var(--bg-2)));
  border:1px solid color-mix(in oklab,var(--brand) 30%,var(--line));
  border-radius:14px;padding:14px 18px;margin:18px auto 0;max-width:1100px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.cont-banner.show{display:flex}
.cont-banner .cb-text{flex:1;min-width:200px}
.cont-banner .cb-ico{font-size:24px}
.cont-banner b{font-weight:800}
.cont-banner a{background:var(--brand);color:#fff;padding:10px 18px;border-radius:10px;text-decoration:none;font-weight:700;font-size:14px}

/* HERO */
.section{padding:64px max(20px,env(safe-area-inset-right)) 64px max(20px,env(safe-area-inset-left));max-width:1200px;margin:0 auto}
@media (max-width:640px){ .section{padding:40px 16px} }

.hero{
  text-align:center;padding:64px 20px 48px;max-width:980px;margin:0 auto;
  position:relative;
}
.hero::before{
  content:'';position:absolute;inset:-20% 10% auto 10%;height:60%;z-index:-1;
  background:radial-gradient(ellipse at center,color-mix(in oklab,var(--brand) 18%,transparent) 0%,transparent 70%);
  filter:blur(40px);
}
.hero .eyebrow{display:inline-block;background:color-mix(in oklab,var(--brand) 12%,transparent);color:var(--brand);font-size:13px;font-weight:800;padding:6px 14px;border-radius:99px;margin-bottom:18px;letter-spacing:.3px}
.hero h1{
  font-size:clamp(32px,7vw,60px);font-weight:800;letter-spacing:-1.5px;line-height:1.08;margin-bottom:20px;
}
.hero h1 .grad{
  background:linear-gradient(135deg,var(--brand),var(--brand-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p.lede{font-size:clamp(15px,2.4vw,19px);color:var(--ink-2);max-width:680px;margin:0 auto 32px;line-height:1.6}
.hero .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}
.btn-primary{
  background:var(--brand);color:#fff;padding:14px 28px;border-radius:14px;
  font-weight:700;text-decoration:none;font-size:16px;transition:.15s;border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 6px 20px color-mix(in oklab,var(--brand) 30%,transparent);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px color-mix(in oklab,var(--brand) 40%,transparent)}
.btn-ghost{
  background:transparent;color:var(--ink);padding:14px 24px;border-radius:14px;
  font-weight:600;text-decoration:none;font-size:15px;border:1px solid var(--line-2);transition:.15s;
  display:inline-flex;align-items:center;gap:8px;
}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.hero .trust{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;color:var(--ink-3);font-size:13px;font-weight:500}
.hero .trust span{display:inline-flex;align-items:center;gap:6px}

/* Value props */
.value-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
@media (min-width:720px){ .value-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px} }
.value-card{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:16px;transition:.2s}
@media (min-width:720px){ .value-card{padding:24px;border-radius:16px} }
.value-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.value-card .vc-ico{font-size:24px;margin-bottom:8px}
@media (min-width:720px){ .value-card .vc-ico{font-size:32px;margin-bottom:12px} }
.value-card h3{font-size:14.5px;font-weight:800;margin-bottom:6px;letter-spacing:-.2px;line-height:1.25}
@media (min-width:720px){ .value-card h3{font-size:17px;margin-bottom:8px} }
.value-card p{font-size:12.5px;color:var(--ink-2);line-height:1.5}
@media (min-width:720px){ .value-card p{font-size:14px;line-height:1.55} }

.section-title{
  text-align:center;font-size:clamp(24px,4.5vw,38px);font-weight:800;letter-spacing:-.6px;margin-bottom:14px;
}
.section-sub{text-align:center;color:var(--ink-2);font-size:clamp(14px,2vw,17px);max-width:640px;margin:0 auto 36px;line-height:1.6}

/* Feature grid */
.feat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:720px){ .feat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} }
.feat-card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:16px;
  text-decoration:none;color:var(--ink);transition:.2s;position:relative;overflow:hidden;min-height:44px;
}
@media (min-width:720px){ .feat-card{padding:24px;border-radius:18px} }
.feat-card::before{
  content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--fc-1,var(--brand)),var(--fc-2,var(--brand-3)));
  opacity:0;transition:.25s;
}
.feat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.feat-card:hover::before{opacity:.08}
.feat-card > *{position:relative}
.feat-card .ico{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--fc-1,var(--brand)),var(--fc-2,var(--brand-3)));
  display:flex;align-items:center;justify-content:center;font-size:20px;
  margin-bottom:10px;box-shadow:0 4px 14px color-mix(in oklab,var(--fc-1,var(--brand)) 30%,transparent);
}
@media (min-width:720px){ .feat-card .ico{width:48px;height:48px;border-radius:12px;font-size:24px;margin-bottom:14px} }
.feat-card h3{font-size:14.5px;font-weight:800;margin-bottom:4px;letter-spacing:-.2px;line-height:1.25}
@media (min-width:720px){ .feat-card h3{font-size:17px;margin-bottom:6px} }
.feat-card p{font-size:12.5px;color:var(--ink-2);line-height:1.5}
@media (min-width:720px){ .feat-card p{font-size:14px;line-height:1.55} }

/* Langs available */
.langs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
@media (min-width:560px){ .langs{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px} }
@media (min-width:1024px){ .langs{grid-template-columns:repeat(5,minmax(0,1fr))} }
.lang{
  background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:14px 10px;
  text-align:center;transition:.2s;text-decoration:none;color:var(--ink);
  position:relative;overflow:hidden;min-height:44px;
}
@media (min-width:560px){ .lang{padding:20px;border-radius:16px} }
.lang.span-2{grid-column:span 2}
@media (min-width:560px){ .lang.span-2{grid-column:auto} }
.lang::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--lc-1),var(--lc-2));opacity:0;transition:.25s}
.lang:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.lang:hover::before{opacity:.1}
.lang > *{position:relative}
.lang .flag{font-size:36px;line-height:1;margin-bottom:6px;display:inline-block}
@media (min-width:560px){ .lang .flag{font-size:44px;margin-bottom:10px} }
.lang h3{font-size:14px;font-weight:800;margin-bottom:2px;letter-spacing:-.2px}
@media (min-width:560px){ .lang h3{font-size:17px;margin-bottom:4px} }
.lang .native{font-size:10.5px;color:var(--brand);font-weight:700;margin-bottom:4px;letter-spacing:.3px}
@media (min-width:560px){ .lang .native{font-size:12px;margin-bottom:8px} }
.lang p{font-size:11px;color:var(--ink-2);line-height:1.4;display:none}
@media (min-width:560px){ .lang p{font-size:12px;line-height:1.45;display:block;min-height:34px} }

/* Cultural canon */
.canon-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
@media (min-width:720px){ .canon-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px} }
.canon-card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:14px;
}
@media (min-width:720px){ .canon-card{padding:20px;border-radius:16px} }
.canon-card .ca-script{font-size:24px;line-height:1.2;margin-bottom:8px;color:var(--brand)}
@media (min-width:720px){ .canon-card .ca-script{font-size:32px;margin-bottom:10px} }
.canon-card h3{font-size:13px;font-weight:800;margin-bottom:4px;line-height:1.25}
@media (min-width:720px){ .canon-card h3{font-size:15px} }
.canon-card .lang-label{font-size:10px;color:var(--ink-3);text-transform:uppercase;font-weight:700;letter-spacing:.4px;margin-bottom:8px;display:inline-block}
@media (min-width:720px){ .canon-card .lang-label{font-size:11px;letter-spacing:.5px;margin-bottom:10px} }
.canon-card p{font-size:12px;color:var(--ink-2);line-height:1.5}
@media (min-width:720px){ .canon-card p{font-size:13px;line-height:1.55} }

/* Social proof */
.stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  background:linear-gradient(135deg,color-mix(in oklab,var(--brand) 6%,var(--bg-2)),color-mix(in oklab,var(--brand-3) 6%,var(--bg-2)));
  border:1px solid var(--line);border-radius:16px;padding:18px 12px;margin-top:20px;
}
@media (min-width:560px){ .stats{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;border-radius:20px;padding:32px 24px;margin-top:24px} }
.stats .stat{text-align:center}
.stats b{display:block;font-size:clamp(18px,4.5vw,36px);font-weight:800;letter-spacing:-.5px;background:linear-gradient(135deg,var(--brand),var(--brand-3));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:2px;line-height:1.1}
@media (min-width:560px){ .stats b{margin-bottom:4px} }
.stats span{font-size:11px;color:var(--ink-2);font-weight:600;letter-spacing:.2px;line-height:1.3;display:block}
@media (min-width:560px){ .stats span{font-size:13px} }

/* CTA banner */
.cta-banner{
  background:linear-gradient(135deg,var(--brand),var(--brand-3));color:#fff;
  border-radius:24px;padding:48px 36px;text-align:center;margin:48px auto 0;max-width:980px;
  box-shadow:var(--shadow-lg);
}
.cta-banner h2{font-size:clamp(24px,4vw,34px);font-weight:800;letter-spacing:-.5px;margin-bottom:12px}
.cta-banner p{font-size:clamp(14px,2vw,17px);opacity:.92;margin-bottom:24px;max-width:580px;margin-left:auto;margin-right:auto;line-height:1.6}
.cta-banner a{
  background:#fff;color:var(--brand);padding:14px 32px;border-radius:14px;
  font-weight:800;text-decoration:none;font-size:16px;transition:.15s;
  display:inline-flex;align-items:center;gap:8px;
}
.cta-banner a:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.2)}

/* FAQ */
.faq{display:grid;gap:10px;margin-top:28px;max-width:780px;margin-left:auto;margin-right:auto}
.faq details{
  background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:18px 22px;cursor:pointer;
}
.faq summary{font-weight:700;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:22px;color:var(--ink-3);font-weight:400;transition:.2s;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--brand)}
.faq p{color:var(--ink-2);font-size:14px;line-height:1.65;margin-top:12px}

/* FOOTER */
.footer{
  background:var(--bg-2);border-top:1px solid var(--line);
  padding:48px max(20px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  margin-top:48px;
}
.footer-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media (min-width:720px){ .footer-inner{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px} }
.footer-col h4{font-size:13px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.footer-col a{display:block;color:var(--ink-2);text-decoration:none;font-size:14px;padding:6px 0;transition:.15s}
.footer-col a:hover{color:var(--brand)}
.footer-bottom{max-width:1100px;margin:32px auto 0;padding-top:24px;border-top:1px solid var(--line);text-align:center;font-size:13px;color:var(--ink-3)}

@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.hero > *{animation:fade .6s ease-out backwards}
.hero .eyebrow{animation-delay:.05s}
.hero h1{animation-delay:.15s}
.hero p.lede{animation-delay:.25s}
.hero .cta-row{animation-delay:.35s}
.hero .trust{animation-delay:.45s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.001ms !important;transition-duration:0.001ms !important}
}
</style>
</head>
<body>

<!-- TOPBAR -->
<header class="topbar" role="banner">
  <a class="brand" href="/">
    <img src="en/src/icons/logo.svg" alt="Lexa" />
    <span>Lexa</span>
  </a>
  <div class="spacer"></div>
  <a class="nav-link" href="#features">Fitur</a>
  <a class="nav-link" href="#langs">Bahasa</a>
  <a class="nav-link" href="#canon">Budaya</a>
  <a class="nav-link" href="/about">Tentang</a>
  <button class="themetoggle" id="themeBtn" title="Toggle tema" aria-label="Toggle tema">🌓</button>
  <a class="cta-ghost" href="/login">Masuk</a>
  <a class="cta" href="/signup">Daftar gratis</a>
</header>

<!-- CONTINUE LEARNING — only if signed in -->
<div class="cont-banner" id="contBanner" role="status">
  <div class="cb-ico">📚</div>
  <div class="cb-text">
    <b id="contName">Selamat datang kembali</b>
    <div style="color:var(--ink-2);font-size:13px;margin-top:2px">Lanjutkan belajar dari mana kamu berhenti</div>
  </div>
  <a href="/lang-picker">Lanjutkan →</a>
</div>

<!-- HERO -->
<section class="hero">
  <span class="eyebrow">📚 PWA Pembelajaran Bahasa</span>
  <h1>Belajar <span class="grad">5 bahasa</span><br/>dengan cara cerdas.</h1>
  <p class="lede">
    Inggris · Indonesia · Arab · Jawa · Sunda. Berbasis riset linguistik (SRS Ebbinghaus, CEFR A1–C2, NGSL). Kanon kultural <b>Pupuh, Tembang Macapat, Tajwid, Hanacaraka, Aksara Sunda</b>. Offline-ready. <b>Gratis selamanya.</b>
  </p>
  <div class="cta-row">
    <a class="btn-primary" href="/signup">Mulai gratis →</a>
    <a class="btn-ghost" href="#features">Lihat fitur</a>
  </div>
  <div class="trust">
    <span>✓ Gratis 100%</span>
    <span>✓ Tanpa iklan</span>
    <span>✓ Offline-ready</span>
    <span>✓ Privasi-friendly (PDPA)</span>
  </div>
</section>

<!-- VALUE PROPS -->
<section class="section" id="why">
  <h2 class="section-title">Kenapa Lexa berbeda?</h2>
  <p class="section-sub">Bukan sekadar Duolingo clone. Lexa fokus pada kedalaman bahasa Nusantara dengan kaidah klasik.</p>
  <div class="value-grid">
    <div class="value-card">
      <div class="vc-ico">🧠</div>
      <h3>SRS Ebbinghaus</h3>
      <p>Spaced repetition (×4 · ×2.5 · ×1.2 · reset) — review berjarak yang ampuh untuk hafalan jangka panjang.</p>
    </div>
    <div class="value-card">
      <div class="vc-ico">📐</div>
      <h3>CEFR A1–C2</h3>
      <p>Setiap kata, materi, dan bacaan ditandai level resmi Eropa — dari pemula sampai mahir.</p>
    </div>
    <div class="value-card">
      <div class="vc-ico">🎭</div>
      <h3>Kanon kultural</h3>
      <p>Pupuh 17, Tembang Macapat 11, Tajwid, Hanacaraka, Aksara Sunda Baku — bukan cuma teori, tapi praktik.</p>
    </div>
    <div class="value-card">
      <div class="vc-ico">📱</div>
      <h3>Offline-ready PWA</h3>
      <p>Install di iOS & Android, belajar saat sinyal mati, sinkron otomatis saat online.</p>
    </div>
    <div class="value-card">
      <div class="vc-ico">🌐</div>
      <h3>Multi-arah translation</h3>
      <p>Translate Sunda↔Jawa↔Arab↔Inggris↔Indonesia — bukan cuma EN-ID seperti app lain.</p>
    </div>
    <div class="value-card">
      <div class="vc-ico">🔓</div>
      <h3>100% open content</h3>
      <p>Konten dipublikasikan di GitHub (MIT). Privacy-first, no tracking, no ads, no paywall.</p>
    </div>
  </div>
</section>

<!-- FEATURE GRID -->
<section class="section" id="features">
  <h2 class="section-title">Fitur lengkap</h2>
  <p class="section-sub">Semua yang kamu butuhkan untuk belajar bahasa serius, dalam satu app.</p>
  <div class="feat-grid">
    <a class="feat-card" href="/signup" style="--fc-1:#7c3aed;--fc-2:#06b6d4"><div class="ico">📖</div><h3>Kamus</h3><p>6.300+ entri lintas 5 bahasa dengan IPA, contoh, dan glosa multi-bahasa.</p></a>
    <a class="feat-card" href="/signup" style="--fc-1:#f59e0b;--fc-2:#ef4444"><div class="ico">📊</div><h3>Top 1000</h3><p>1.000 kata tersering per bahasa — NGSL-aligned untuk hasil maksimal.</p></a>
    <a class="feat-card" href="/signup" style="--fc-1:#10b981;--fc-2:#06b6d4"><div class="ico">📐</div><h3>Grammar</h3><p>20+ materi grammar per bahasa, lengkap dengan kuiz pengetahuan.</p></a>
    <a class="feat-card" href="/signup" style="--fc-1:#ec4899;--fc-2:#7c3aed"><div class="ico">🎴</div><h3>Flashcard SRS</h3><p>Algoritma spaced-repetition: review berjarak otomatis sesuai progress.</p></a>
    <a class="feat-card" href="/signup" style="--fc-1:#06b6d4;--fc-2:#10b981"><div class="ico">⌨️</div><h3>Typing</h3><p>Active production: ketik kata target dari arti — 3 kesempatan per kata.</p></a>
    <a class="feat-card" href="/signup" style="--fc-1:#7c3aed;--fc-2:#3b82f6"><div class="ico">👂</div><h3>Listening</h3><p>Dengar voice native (American/Arab/Sunda/Jawa), pilih jawaban dari 4 opsi.</p></a>
    <a class="feat-card" href="/signup" style="--fc-1:#f59e0b;--fc-2:#7c3aed"><div class="ico">📚</div><h3>Reading</h3><p>Bacaan bertingkat A1–C1 + comprehension quiz untuk uji pemahaman.</p></a>
    <a class="feat-card" href="/signup" style="--fc-1:#10b981;--fc-2:#3b82f6"><div class="ico">💬</div><h3>Dialog</h3><p>Skrip role-play: restoran, bandara, ngoko vs krama, fushah, dll.</p></a>
    <a class="feat-card" href="/signup" style="--fc-1:#ef4444;--fc-2:#f59e0b"><div class="ico">🔊</div><h3>Pronunciation</h3><p>44 fonem IPA (Inggris) + makharij Arab + aksara Jawa/Sunda.</p></a>
  </div>
</section>

<!-- LANGUAGES AVAILABLE -->
<section class="section" id="langs">
  <h2 class="section-title">5 bahasa tersedia</h2>
  <p class="section-sub">Modul terpisah per bahasa, instal sebagai PWA mandiri di home screen kamu.</p>
  <div class="langs">
    <a class="lang" href="/signup" style="--lc-1:#7c3aed;--lc-2:#06b6d4">
      <div class="flag">🇺🇸</div>
      <h3>English</h3>
      <div class="native">English</div>
      <p>1.100+ kosakata · 25 grammar · idioms · phrasal verbs · matematika · IPA</p>
    </a>
    <a class="lang" href="/signup" style="--lc-1:#16a34a;--lc-2:#10b981">
      <div class="flag">🇮🇩</div>
      <h3>Indonesia</h3>
      <div class="native">Bahasa Indonesia</div>
      <p>1.600+ KBBI · PUEBI/EYD V · 104 peribahasa · sastra · slang gaul</p>
    </a>
    <a class="lang" href="/signup" style="--lc-1:#dc2626;--lc-2:#f59e0b">
      <div class="flag">🕌</div>
      <h3>Arab</h3>
      <div class="native">العربية</div>
      <p>850+ mufrodat · Nahwu &amp; Sharaf · 102 Qurani · Tajwid · 28 hijaiyah</p>
    </a>
    <a class="lang" href="/signup" style="--lc-1:#a16207;--lc-2:#ca8a04">
      <div class="flag">🏛️</div>
      <h3>Jawa</h3>
      <div class="native">ꦧꦱꦗꦮ</div>
      <p>1.300+ tembung · undha-usuk · Tembang Macapat · Hanacaraka</p>
    </a>
    <a class="lang span-2" href="/signup" style="--lc-1:#15803d;--lc-2:#65a30d">
      <div class="flag">🌿</div>
      <h3>Sunda</h3>
      <div class="native">ᮘᮞ ᮞᮥᮔ᮪ᮓ</div>
      <p>1.500+ kekecapan · undak usuk · Pupuh 17 · Aksara Sunda · sisindiran</p>
    </a>
  </div>
</section>

<!-- CULTURAL CANON -->
<section class="section" id="canon">
  <h2 class="section-title">Kanon budaya Nusantara</h2>
  <p class="section-sub">Yang membedakan Lexa dari semua app belajar bahasa lain: konten budaya klasik yang bisa di-drill, bukan cuma di-baca.</p>
  <div class="canon-grid">
    <div class="canon-card">
      <div class="ca-script">ꦱꦼꦤꦺꦤ꧀</div>
      <span class="lang-label">Jawa · Hanacaraka</span>
      <h3>Aksara Jawa</h3>
      <p>20 carakan + sandhangan + pasangan. Setiap kata di-render dengan aksara dan glosa Latin.</p>
    </div>
    <div class="canon-card">
      <div class="ca-script">ᮞᮥᮔ᮪ᮓ</div>
      <span class="lang-label">Sunda · Aksara Sunda Baku</span>
      <h3>Aksara Sunda</h3>
      <p>Unicode U+1B80, sesuai pedoman LBSS. Inklusif untuk konten tradisional Sunda.</p>
    </div>
    <div class="canon-card">
      <div class="ca-script">رَحْمَة</div>
      <span class="lang-label">Arab · Tajwid + Qurani</span>
      <h3>Mufrodat Quran</h3>
      <p>102 kata Qurani tinggi-frekuensi dengan referensi surah:ayah + tajwid hukum.</p>
    </div>
    <div class="canon-card">
      <div class="ca-script">📜</div>
      <span class="lang-label">Sunda · Pupuh 17</span>
      <h3>Pupuh + Sisindiran</h3>
      <p>17 metra (Asmarandana, Kinanti, Sinom, dll.) + 49 sisindiran kanonik (paparikan, rarakitan, wawangsalan).</p>
    </div>
    <div class="canon-card">
      <div class="ca-script">🎭</div>
      <span class="lang-label">Jawa · Tembang Macapat</span>
      <h3>11 Macapat</h3>
      <p>Mijil, Maskumambang, Sinom, Kinanthi, Asmaradana, dll. — guru gatra/wilangan/lagu canonical-verified.</p>
    </div>
    <div class="canon-card">
      <div class="ca-script">رِنْتْ</div>
      <span class="lang-label">Jawa · Undha-usuk</span>
      <h3>Ngoko ↔ Krama</h3>
      <p>Hafal 1 kata, tahu 4 register: ngoko / madya / krama / krama inggil. Sama untuk Sunda undak usuk.</p>
    </div>
  </div>
</section>

<!-- STATS -->
<section class="section">
  <h2 class="section-title">Konten yang besar</h2>
  <p class="section-sub">Kurasi linguistik, bukan auto-generate. Setiap entri ditulis &amp; di-review native speaker.</p>
  <div class="stats">
    <div class="stat"><b>6.300+</b><span>Entri kosakata</span></div>
    <div class="stat"><b>110+</b><span>Materi grammar</span></div>
    <div class="stat"><b>100+</b><span>Bacaan A1–C1</span></div>
    <div class="stat"><b>200+</b><span>Soal kuiz</span></div>
    <div class="stat"><b>5</b><span>Bahasa</span></div>
    <div class="stat"><b>0 IDR</b><span>Selamanya gratis</span></div>
  </div>
</section>

<!-- FAQ -->
<section class="section">
  <h2 class="section-title">Pertanyaan umum</h2>
  <div class="faq">
    <details>
      <summary>Apa Lexa gratis selamanya?</summary>
      <p>Ya. Lexa adalah proyek edukasi gratis tanpa iklan dan tanpa paywall. Semua konten (kosakata, grammar, bacaan, dialog, kanon budaya) bisa diakses tanpa biaya, untuk siapa saja.</p>
    </details>
    <details>
      <summary>Kenapa harus daftar dulu?</summary>
      <p>Akun dibutuhkan untuk menyimpan progress belajar kamu (kartu SRS, bookmark, streak) dan menyinkronkan antar device. Login via magic link (cuma email, tanpa password) atau Google. Data kamu dilindungi sesuai UU PDP 27/2022.</p>
    </details>
    <details>
      <summary>Apa bedanya dengan Duolingo?</summary>
      <p>Duolingo fokus pada gamifikasi + EN-target. Lexa fokus pada <b>kedalaman bahasa Nusantara</b>: Pupuh 17, Tembang Macapat, Tajwid, Hanacaraka, Aksara Sunda Baku — semua bisa di-drill, bukan cuma di-baca. Plus 5 arah translation (Sunda↔Jawa↔Arab, dll.).</p>
    </details>
    <details>
      <summary>Bisa offline?</summary>
      <p>Ya. Install Lexa sebagai PWA di iOS atau Android (Add to Home Screen), lalu bisa belajar tanpa internet. Progress disinkronkan saat online kembali.</p>
    </details>
    <details>
      <summary>Bagaimana dengan privasi?</summary>
      <p>Lexa <b>tidak mengumpulkan data kecuali email</b> (untuk login). Tidak ada tracking, tidak ada ads, tidak ada analytics yang mengidentifikasi kamu. Data kamu bisa di-export dan dihapus kapan saja. Lihat <a href="/privacy" style="color:var(--brand);text-decoration:underline">Kebijakan Privasi</a>.</p>
    </details>
    <details>
      <summary>Apa konten Lexa akurat?</summary>
      <p>Konten ditulis dan di-review berdasarkan: KBBI Daring + PUEBI (Indonesia), NGSL/COCA (Inggris), Mu'jam Mufradat Quran + Ajurumiyyah (Arab), Bausastra Jawa (Jawa), LBSS Kamus Umum Basa Sunda (Sunda). Untuk penggunaan formal (akademik, agama, hukum), konsultasi sumber otoritatif tetap diperlukan.</p>
    </details>
  </div>
</section>

<!-- CTA banner -->
<section class="section" style="padding-top:0">
  <div class="cta-banner">
    <h2>Mulai belajar hari ini</h2>
    <p>Gratis selamanya · Tanpa kartu kredit · Setup 30 detik · Offline-ready</p>
    <a href="/signup">Daftar gratis →</a>
  </div>
</section>

<!-- FOOTER -->
<footer class="footer" role="contentinfo">
  <div class="footer-inner">
    <div class="footer-col">
      <h4>Lexa</h4>
      <p style="color:var(--ink-2);font-size:14px;line-height:1.6">PWA pembelajaran 5 bahasa berbasis riset linguistik. Untuk pembelajar otodidak Indonesia.</p>
    </div>
    <div class="footer-col">
      <h4>Produk</h4>
      <a href="#features">Fitur</a>
      <a href="#langs">Bahasa</a>
      <a href="#canon">Kanon budaya</a>
      <a href="/about">Tentang Lexa</a>
    </div>
    <div class="footer-col">
      <h4>Akun</h4>
      <a href="/login">Masuk</a>
      <a href="/signup">Daftar gratis</a>
    </div>
    <div class="footer-col">
      <h4>Legal</h4>
      <a href="/privacy">Kebijakan Privasi</a>
      <a href="/terms">Syarat &amp; Ketentuan</a>
    </div>
  </div>
  <div class="footer-bottom">
    © <span id="year"></span> Lexa · Disusun untuk pembelajar otodidak · MIT License
  </div>
</footer>

<script>
document.getElementById('year').textContent = new Date().getFullYear();
document.getElementById('themeBtn').addEventListener('click', () => {
  const isDark = document.documentElement.classList.toggle('dark');
  try{ localStorage.setItem('theme', isDark ? 'dark' : 'light'); }catch{}
});

/* Show "Continue learning" banner if signed in */
(function checkSignedIn(){
  function get(k){ try{ return localStorage.getItem(k); }catch{ return null; } }
  function parse(s){ try{ return JSON.parse(s); }catch{ return null; } }
  const jwt = get('lexa:auth:jwt');
  const profile = parse(get('lexa:auth:profile'));
  if(jwt){
    const banner = document.getElementById('contBanner');
    banner.classList.add('show');
    if(profile && profile.displayName){
      document.getElementById('contName').textContent = `Halo, ${profile.displayName}!`;
    }
    /* Swap "Daftar gratis" CTA to "Lanjutkan" in topbar */
    document.querySelectorAll('a.cta').forEach(a => {
      if(a.getAttribute('href') === '/signup'){ a.textContent = 'Lanjutkan'; a.setAttribute('href','/lang-picker'); }
    });
    document.querySelectorAll('a.cta-ghost').forEach(a => {
      if(a.getAttribute('href') === '/login'){ a.hidden = true; }
    });
  }
})();
</script>
</body>
</html>
