/* ==========================================================================
   LMS Nusantara — Landing Page (3D, Islamic-education themed)
   ========================================================================== */

.landing-body {
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  color:#0f172a;
  background:#faf7ff;
  overflow-x:hidden;
  position:relative;
}
.landing-body .wrap { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ---------- Background orbs ---------- */
.bg-orbs { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.orb { position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; animation:orbFloat 18s ease-in-out infinite; }
.orb-1 { width:420px; height:420px; background:radial-gradient(circle,#10b981,transparent 70%); top:-100px; left:-80px; }
.orb-2 { width:500px; height:500px; background:radial-gradient(circle,#8b5cf6,transparent 70%); top:200px; right:-120px; animation-delay:-4s; }
.orb-3 { width:360px; height:360px; background:radial-gradient(circle,#f59e0b,transparent 70%); bottom:100px; left:15%; animation-delay:-8s; }
.orb-4 { width:280px; height:280px; background:radial-gradient(circle,#ec4899,transparent 70%); bottom:-50px; right:20%; animation-delay:-12s; }
@keyframes orbFloat {
  0%,100% { transform:translate(0,0) scale(1); }
  33%     { transform:translate(30px,-40px) scale(1.1); }
  66%     { transform:translate(-25px,20px) scale(.95); }
}

/* ---------- Sparkles ---------- */
.sparkles { position:fixed; inset:0; z-index:1; pointer-events:none; }
.sp { position:absolute; width:6px; height:6px; background:#fff; border-radius:50%; box-shadow:0 0 12px 2px rgba(255,255,255,.9); animation:twinkle 3s ease-in-out infinite; }
.sp-1 { top:12%; left:30%; animation-delay:0s; }
.sp-2 { top:22%; left:70%; animation-delay:-.5s; width:4px; height:4px; }
.sp-3 { top:60%; left:15%; animation-delay:-1s; }
.sp-4 { top:75%; left:85%; animation-delay:-1.5s; width:5px; height:5px; }
.sp-5 { top:40%; left:50%; animation-delay:-2s; width:3px; height:3px; }
.sp-6 { top:88%; left:40%; animation-delay:-2.5s; }
@keyframes twinkle { 0%,100% { opacity:0; transform:scale(.5); } 50% { opacity:1; transform:scale(1.2); } }

/* ---------- Nav ---------- */
.landing-nav { position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:rgba(255,255,255,.65); border-bottom:1px solid rgba(255,255,255,.4); }
.landing-nav .wrap { display:flex; align-items:center; justify-content:space-between; padding:14px 24px; }
.landing-nav .brand { display:flex; align-items:center; gap:12px; }
.brand-logo { width:44px; height:44px; border-radius:14px; background:linear-gradient(135deg,#10b981,#059669); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow:0 8px 20px rgba(16,185,129,.4); animation:logoBounce 2.4s ease-in-out infinite; }
@keyframes logoBounce { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-4px) rotate(2deg); } }
.brand-name { font-weight:800; font-size:16px; line-height:1.15; }
.brand-sub { font-size:11px; color:#64748b; }
.nav-cta { display:flex; gap:20px; align-items:center; }
.nav-link { color:#334155; text-decoration:none; font-weight:500; font-size:14px; }
.nav-link:hover { color:#059669; }
.btn-shine { padding:10px 22px; background:linear-gradient(135deg,#10b981,#059669); color:#fff; text-decoration:none; border-radius:999px; font-weight:600; font-size:14px; display:inline-flex; align-items:center; gap:8px; box-shadow:0 8px 22px rgba(16,185,129,.35); position:relative; overflow:hidden; transition:transform .2s; }
.btn-shine::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); transform:translateX(-100%); transition:transform .6s; }
.btn-shine:hover { transform:translateY(-2px); }
.btn-shine:hover::before { transform:translateX(100%); }

/* ---------- Hero ---------- */
.hero { position:relative; z-index:2; padding:60px 0 120px; }
.hero-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns:1fr; } .hero-right { display:none !important; } }

.pill-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; background:rgba(255,255,255,.85); backdrop-filter:blur(8px); border:1px solid rgba(16,185,129,.3); border-radius:999px; font-size:12px; font-weight:600; color:#059669; letter-spacing:.5px; text-transform:uppercase; box-shadow:0 4px 12px rgba(16,185,129,.15); }
.pill-badge .dot { width:8px; height:8px; border-radius:50%; background:#10b981; animation:dotPulse 1.6s ease-in-out infinite; }
@keyframes dotPulse { 0%,100% { box-shadow:0 0 0 0 rgba(16,185,129,.7); } 100% { box-shadow:0 0 0 8px rgba(16,185,129,0); } }

.hero-title { font-family:'Playfair Display', serif; font-size:64px; font-weight:900; line-height:1.05; margin:20px 0 22px; letter-spacing:-.02em; }
@media (max-width: 900px) { .hero-title { font-size:42px; } }

.grad-text { background:linear-gradient(135deg,#10b981,#059669,#047857); -webkit-background-clip:text; background-clip:text; color:transparent; position:relative; display:inline-block; }
.grad-text-2 { background:linear-gradient(135deg,#f59e0b,#ec4899,#8b5cf6); -webkit-background-clip:text; background-clip:text; color:transparent; }

.hero-lead { font-size:17px; color:#475569; line-height:1.7; margin:0 0 28px; max-width:560px; }

.hero-cta { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px; }
.btn-primary-3d { position:relative; display:inline-flex; align-items:center; gap:10px; padding:14px 28px; background:linear-gradient(135deg,#10b981,#059669); color:#fff; text-decoration:none; border-radius:14px; font-weight:700; font-size:15px; box-shadow:0 10px 24px rgba(16,185,129,.4), inset 0 -3px 0 rgba(0,0,0,.15); transform:translateZ(0); transition:transform .25s, box-shadow .25s; overflow:hidden; }
.btn-primary-3d:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(16,185,129,.55), inset 0 -3px 0 rgba(0,0,0,.15); }
.btn-primary-3d .btn-glow { position:absolute; inset:0; background:radial-gradient(circle at 20% 30%, rgba(255,255,255,.5), transparent 60%); pointer-events:none; }
.btn-primary-3d.btn-lg { padding:16px 34px; font-size:17px; border-radius:16px; }
.btn-primary-3d.btn-xl { padding:20px 46px; font-size:19px; border-radius:20px; }
.btn-ghost-3d { display:inline-flex; align-items:center; gap:10px; padding:14px 28px; background:rgba(255,255,255,.8); backdrop-filter:blur(8px); color:#0f172a; text-decoration:none; border-radius:14px; font-weight:600; font-size:15px; border:1px solid rgba(255,255,255,.7); box-shadow:0 8px 20px rgba(0,0,0,.06); transition:transform .2s; }
.btn-ghost-3d:hover { transform:translateY(-2px); }

.hero-stats { display:flex; gap:36px; margin-top:6px; }
@media (max-width:600px){ .hero-stats { gap:18px; flex-wrap:wrap;} }
.stat-mini b { display:block; font-size:26px; font-weight:800; background:linear-gradient(135deg,#10b981,#059669); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-mini span { display:block; font-size:12px; color:#64748b; margin-top:2px; }

/* ---------- 3D scene ---------- */
.hero-right { display:flex; align-items:center; justify-content:center; }
.scene-3d { position:relative; width:420px; height:440px; perspective:1000px; transform-style:preserve-3d; }

/* Rotating cube */
.cube { position:absolute; top:50%; left:50%; width:140px; height:140px; margin:-70px 0 0 -70px; transform-style:preserve-3d; animation:cubeRotate 14s linear infinite; }
@keyframes cubeRotate { from { transform:rotateX(-20deg) rotateY(0); } to { transform:rotateX(-20deg) rotateY(360deg); } }
.cube .face { position:absolute; width:140px; height:140px; display:flex; align-items:center; justify-content:center; font-size:56px; color:#fff; border-radius:22px; backdrop-filter:blur(6px); box-shadow:inset 0 0 40px rgba(255,255,255,.2), 0 10px 40px rgba(0,0,0,.15); border:1px solid rgba(255,255,255,.4); }
.cube .front  { background:linear-gradient(135deg,#10b981,#059669); transform:translateZ(70px); }
.cube .back   { background:linear-gradient(135deg,#8b5cf6,#6366f1); transform:rotateY(180deg) translateZ(70px); }
.cube .right  { background:linear-gradient(135deg,#f59e0b,#ea580c); transform:rotateY( 90deg) translateZ(70px); }
.cube .left   { background:linear-gradient(135deg,#ec4899,#db2777); transform:rotateY(-90deg) translateZ(70px); }
.cube .top    { background:linear-gradient(135deg,#06b6d4,#0284c7); transform:rotateX( 90deg) translateZ(70px); }
.cube .bottom { background:linear-gradient(135deg,#eab308,#f59e0b); transform:rotateX(-90deg) translateZ(70px); }

/* Book stack */
.book-stack { position:absolute; top:60px; right:0; transform:rotate(-8deg); animation:bookFloat 5s ease-in-out infinite; }
@keyframes bookFloat { 0%,100% { transform:rotate(-8deg) translateY(0); } 50% { transform:rotate(-4deg) translateY(-12px); } }
.book { width:100px; height:16px; border-radius:4px; margin-top:4px; box-shadow:0 6px 12px rgba(0,0,0,.12); position:relative; }
.book::after { content:''; position:absolute; right:8px; top:3px; width:4px; height:10px; background:rgba(255,255,255,.5); border-radius:1px; }
.book.b1 { background:linear-gradient(135deg,#f59e0b,#ea580c); width:110px; }
.book.b2 { background:linear-gradient(135deg,#8b5cf6,#6366f1); width:96px; margin-left:8px; }
.book.b3 { background:linear-gradient(135deg,#10b981,#059669); width:104px; margin-left:2px; }
.cap { position:absolute; top:-30px; left:20px; width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,#0f172a,#334155); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow:0 8px 18px rgba(0,0,0,.25); transform:rotate(8deg); }

/* Floating chips */
.chip { position:absolute; width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff; box-shadow:0 12px 24px rgba(0,0,0,.15), inset 0 -3px 0 rgba(0,0,0,.15); animation:chipFloat 4s ease-in-out infinite; }
.chip-1 { top:20px; left:20px; background:linear-gradient(135deg,#f59e0b,#eab308); animation-delay:0s; }
.chip-2 { top:60px; right:60px; background:linear-gradient(135deg,#8b5cf6,#a855f7); animation-delay:-1s; }
.chip-3 { bottom:60px; left:40px; background:linear-gradient(135deg,#ec4899,#f43f5e); animation-delay:-2s; }
.chip-4 { bottom:20px; right:20px; background:linear-gradient(135deg,#06b6d4,#0891b2); animation-delay:-3s; }
@keyframes chipFloat { 0%,100% { transform:translateY(0) rotate(-4deg); } 50% { transform:translateY(-14px) rotate(4deg); } }

/* Ring */
.ring { position:absolute; top:50%; left:50%; width:280px; height:280px; margin:-140px 0 0 -140px; border:2px dashed rgba(139,92,246,.35); border-radius:50%; animation:ringSpin 22s linear infinite; }
@keyframes ringSpin { to { transform:rotate(360deg); } }

/* Wave bottom */
.wave-bottom { position:absolute; bottom:0; left:0; right:0; height:80px; background:linear-gradient(180deg, transparent, #fff); }

/* ---------- Quote section ---------- */
.quote-sec { position:relative; z-index:2; padding:80px 0; background:#fff; }
.quote-card { position:relative; max-width:820px; margin:0 auto; padding:56px 40px; text-align:center; background:linear-gradient(135deg,#065f46 0%, #047857 50%, #064e3b 100%); border-radius:28px; color:#fff; box-shadow:0 30px 80px rgba(5,150,105,.35); overflow:hidden; }
.quote-card::before { content:'❋'; position:absolute; top:24px; left:32px; font-size:36px; opacity:.15; }
.quote-card::after  { content:'❋'; position:absolute; bottom:24px; right:32px; font-size:36px; opacity:.15; }
.quote-glow { position:absolute; inset:-40px; background:radial-gradient(circle at 30% 20%, rgba(251,191,36,.35), transparent 55%), radial-gradient(circle at 80% 90%, rgba(236,72,153,.3), transparent 60%); pointer-events:none; }
.q-badge { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); border-radius:999px; font-size:13px; font-weight:600; margin-bottom:24px; }
.q-arab { font-family:'Amiri', serif; font-size:44px; font-weight:700; line-height:1.4; margin:0 0 18px; direction:rtl; letter-spacing:.02em; text-shadow:0 4px 20px rgba(0,0,0,.2); }
@media (max-width:600px){ .q-arab{ font-size:30px;} }
.q-id { font-family:'Playfair Display', serif; font-size:32px; font-weight:900; line-height:1.3; margin:0 0 8px; color:#fff; }
.q-id .grad-text { background:linear-gradient(135deg,#fbbf24,#f59e0b,#fb923c); -webkit-background-clip:text; background-clip:text; color:transparent; }
.q-src { color:rgba(255,255,255,.7); font-size:14px; margin:0 0 24px; letter-spacing:.5px; }
.q-desc { color:rgba(255,255,255,.9); font-size:16px; line-height:1.7; max-width:620px; margin:0 auto 30px; }
.quote-card .btn-primary-3d { background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#0f172a; box-shadow:0 12px 28px rgba(251,191,36,.45), inset 0 -3px 0 rgba(0,0,0,.15); }

/* ---------- Callouts ---------- */
.callout-sec { padding:80px 0; background:linear-gradient(180deg,#fff, #faf7ff); position:relative; z-index:2; }
.callout-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
@media (max-width:900px){ .callout-grid { grid-template-columns:1fr; } }
.callout { position:relative; padding:36px 28px; background:#fff; border-radius:22px; box-shadow:0 12px 36px rgba(15,23,42,.06); transition:transform .3s, box-shadow .3s; overflow:hidden; }
.callout::before { content:''; position:absolute; top:-40px; right:-40px; width:120px; height:120px; border-radius:50%; opacity:.15; transition:transform .4s; }
.callout:hover { transform:translateY(-8px); box-shadow:0 22px 50px rgba(15,23,42,.12); }
.callout:hover::before { transform:scale(1.4); }
.callout.tint-emerald::before { background:#10b981; }
.callout.tint-indigo::before  { background:#8b5cf6; }
.callout.tint-amber::before   { background:#f59e0b; }
.cal-icon { position:relative; z-index:1; width:64px; height:64px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:30px; color:#fff; margin-bottom:20px; box-shadow:0 10px 20px rgba(0,0,0,.15), inset 0 -3px 0 rgba(0,0,0,.15); }
.tint-emerald .cal-icon { background:linear-gradient(135deg,#10b981,#059669); }
.tint-indigo  .cal-icon { background:linear-gradient(135deg,#8b5cf6,#6366f1); }
.tint-amber   .cal-icon { background:linear-gradient(135deg,#f59e0b,#ea580c); }
.callout h3 { font-size:22px; font-weight:800; margin:0 0 10px; }
.callout p { color:#475569; line-height:1.6; margin:0 0 16px; font-size:14.5px; }
.cal-link { color:#059669; font-weight:700; font-size:14px; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.cal-link:hover { gap:10px; }
.tint-indigo .cal-link { color:#6366f1; }
.tint-amber  .cal-link { color:#ea580c; }

/* ---------- Features ---------- */
.feat-sec { padding:100px 0; background:#faf7ff; position:relative; z-index:2; }
.feat-head { text-align:center; margin-bottom:56px; }
.eyebrow { font-size:12px; color:#059669; font-weight:700; letter-spacing:2px; margin:0 0 14px; }
.feat-head h2 { font-family:'Playfair Display', serif; font-size:44px; font-weight:900; margin:0 0 16px; line-height:1.2; }
@media (max-width:600px){ .feat-head h2 { font-size:30px; } }
.feat-sub { color:#64748b; max-width:600px; margin:0 auto; font-size:16px; }
.feat-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
@media (max-width:1000px){ .feat-grid { grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .feat-grid { grid-template-columns:1fr;} }
.feat-card { padding:28px 22px; background:#fff; border-radius:20px; box-shadow:0 10px 30px rgba(15,23,42,.05); transition:transform .3s, box-shadow .3s; position:relative; overflow:hidden; }
.feat-card::after { content:''; position:absolute; inset:0; border-radius:20px; padding:2px; background:linear-gradient(135deg, transparent, var(--acc)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .3s; }
.feat-card:hover { transform:translateY(-6px); box-shadow:0 20px 40px rgba(15,23,42,.1); }
.feat-card:hover::after { opacity:1; }
.feat-icon { width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:26px; color:#fff; background:linear-gradient(135deg, var(--acc), color-mix(in oklab, var(--acc) 70%, #000)); box-shadow:0 10px 20px color-mix(in oklab, var(--acc) 35%, transparent), inset 0 -3px 0 rgba(0,0,0,.15); margin-bottom:16px; }
.feat-card h4 { margin:0 0 8px; font-size:17px; font-weight:800; }
.feat-card p { margin:0; font-size:13.5px; color:#64748b; line-height:1.6; }

/* ---------- Final CTA ---------- */
.final-cta { padding:80px 0 100px; background:linear-gradient(180deg,#faf7ff,#fff); position:relative; z-index:2; }
.cta-box { max-width:820px; margin:0 auto; padding:60px 40px; text-align:center; background:linear-gradient(135deg, #ffffff, #f0f9ff); border-radius:28px; box-shadow:0 20px 60px rgba(15,23,42,.08); border:1px solid rgba(139,92,246,.15); position:relative; overflow:hidden; }
.cta-box::before { content:''; position:absolute; top:-60px; right:-60px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,#8b5cf6,transparent 70%); opacity:.25; }
.cta-box::after { content:''; position:absolute; bottom:-60px; left:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,#10b981,transparent 70%); opacity:.25; }
.cta-emoji { font-size:44px; margin-bottom:14px; letter-spacing:8px; }
.cta-box h2 { font-family:'Playfair Display', serif; font-size:44px; font-weight:900; margin:0 0 14px; line-height:1.15; }
@media (max-width:600px){ .cta-box h2 { font-size:30px; } }
.cta-box > p { color:#64748b; font-size:17px; margin:0 0 30px; }

/* ---------- Footer ---------- */
.landing-foot { background:#0f172a; color:#94a3b8; padding:26px 0; text-align:center; font-size:13px; position:relative; z-index:2; }
.landing-foot strong { color:#10b981; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .orb, .cube, .book-stack, .chip, .ring, .brand-logo, .pill-badge .dot, .sp { animation:none !important; }
}