/* SIMDIK RA AT-Taufiq — Prototype styles */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.font-arabic {
  font-family: 'Amiri', 'Traditional Arabic', serif;
}

/* ---------- Gradients ---------- */
.grad-em, .grad-emerald { background: linear-gradient(135deg, #34d399, #059669); }
.grad-am { background: linear-gradient(135deg, #fbbf24, #d97706); }
.grad-amber { background: linear-gradient(135deg, #fbbf24, #d97706); }
.grad-sky { background: linear-gradient(135deg, #38bdf8, #0284c7); }
.grad-rose { background: linear-gradient(135deg, #fb7185, #e11d48); }
.grad-violet { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.grad-lime { background: linear-gradient(135deg, #a3e635, #65a30d); }
.grad-cyan { background: linear-gradient(135deg, #22d3ee, #0891b2); }
.grad-fuchsia { background: linear-gradient(135deg, #e879f9, #c026d3); }
.grad-mesh { background: radial-gradient(circle at 15% 20%, rgba(34,181,115,0.18), transparent 40%), radial-gradient(circle at 85% 10%, rgba(240,147,11,0.16), transparent 40%), radial-gradient(circle at 50% 90%, rgba(56,189,248,0.14), transparent 45%); }

/* grad-hero bakes the Islamic geometric pattern directly into the gradient layer stack
   so it can't be clobbered by combining it with .pattern-islamic (both set background-image). */
.grad-hero {
  background-color: #059669;
  background-image:
    linear-gradient(30deg, rgba(255,255,255,0.07) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.07) 87.5%, rgba(255,255,255,0.07)),
    linear-gradient(150deg, rgba(255,255,255,0.07) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.07) 87.5%, rgba(255,255,255,0.07)),
    linear-gradient(30deg, rgba(255,255,255,0.07) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.07) 87.5%, rgba(255,255,255,0.07)),
    linear-gradient(150deg, rgba(255,255,255,0.07) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.07) 87.5%, rgba(255,255,255,0.07)),
    linear-gradient(60deg, rgba(255,255,255,0.05) 25%, transparent 25.5%, transparent 75%, rgba(255,255,255,0.05) 75%, rgba(255,255,255,0.05)),
    linear-gradient(135deg, #0f766e 0%, #059669 45%, #f0930b 130%);
  background-size: 48px 84px, 48px 84px, 48px 84px, 48px 84px, 48px 84px, 100% 100%;
  background-position: 0 0, 0 0, 24px 42px, 24px 42px, 0 0, 0 0;
}

/* ---------- Patterns ---------- */
.pattern-dots {
  background-image: radial-gradient(rgba(255,255,255,0.9) 1.4px, transparent 1.4px);
  background-size: 14px 14px;
}
.pattern-islamic {
  background-image:
    linear-gradient(30deg, rgba(255,255,255,0.07) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.07) 87.5%, rgba(255,255,255,0.07)),
    linear-gradient(150deg, rgba(255,255,255,0.07) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.07) 87.5%, rgba(255,255,255,0.07)),
    linear-gradient(30deg, rgba(255,255,255,0.07) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.07) 87.5%, rgba(255,255,255,0.07)),
    linear-gradient(150deg, rgba(255,255,255,0.07) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.07) 87.5%, rgba(255,255,255,0.07)),
    linear-gradient(60deg, rgba(255,255,255,0.05) 25%, transparent 25.5%, transparent 75%, rgba(255,255,255,0.05) 75%, rgba(255,255,255,0.05));
  background-size: 48px 84px;
  background-position: 0 0, 0 0, 24px 42px, 24px 42px, 0 0;
}

/* ---------- Reveal-on-load animation ---------- */
[data-reveal] {
  animation: fadeUp .6s cubic-bezier(.16,.8,.24,1) both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scanline {
  0% { transform: translateY(-100%); }
  50% { transform: translateY(1100%); }
  100% { transform: translateY(-100%); }
}
.animate-scanline { animation: scanline 2.6s cubic-bezier(.45,0,.55,1) infinite; }

@keyframes blobMove {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(16px,-18px) scale(1.06); }
  66% { transform: translate(-14px,12px) scale(0.96); }
}
.animate-blob { animation: blobMove 9s ease-in-out infinite; }

@keyframes pulseSoft {
  0%, 100% { box-shadow: 0 0 0 0 rgba(21,148,93,0.35); }
  50% { box-shadow: 0 0 0 10px rgba(21,148,93,0); }
}
.animate-pulse-soft { animation: pulseSoft 2s ease-in-out infinite; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .65rem;
  border-radius: 9999px;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.2;
}
.badge-emerald { background: #d1fae5; color: #047857; }
.badge-amber { background: #fef3c7; color: #b45309; }
.badge-rose { background: #ffe4e6; color: #be123c; }
.badge-slate { background: #f1f5f9; color: #475569; }
.badge-sky { background: #e0f2fe; color: #0369a1; }
.badge-violet { background: #ede9fe; color: #6d28d9; }

/* ---------- Scrollbar ---------- */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

.styled-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.styled-scroll::-webkit-scrollbar-thumb { background: #d1fae5; border-radius: 999px; }

/* ---------- Card ---------- */
.card {
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 8px 30px -12px rgba(16,77,53,0.14);
  border: 1px solid rgba(16,77,53,0.05);
}
.press { transition: transform .15s ease, box-shadow .15s ease; }
.press:active { transform: scale(.97); }

/* ---------- Bottom nav ---------- */
.bottom-nav-item { position: relative; }
.bottom-nav-item.active .nav-icon-wrap {
  background: linear-gradient(135deg,#34d399,#059669);
  color: #fff;
  box-shadow: 0 6px 16px -4px rgba(5,150,105,0.5);
}
.bottom-nav-item .nav-icon-wrap {
  transition: all .2s ease;
  color: #64748b;
}

/* ---------- App shell frame (desktop presentation of mobile app) ---------- */
.app-shell {
  max-width: 30rem;
  margin: 0 auto;
  min-height: 100dvh;
  background: #fbfdfc;
  position: relative;
  box-shadow: 0 0 0 1px rgba(16,77,53,0.05);
}
@media (min-width: 640px) {
  .app-shell-outer { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .app-shell { border-radius: 2.5rem; min-height: calc(100dvh - 3rem); box-shadow: 0 30px 60px -20px rgba(16,77,53,0.35), 0 0 0 10px #ffffff, 0 0 0 11px #e2e8f0; overflow: hidden; }
}

/* Sidebar active */
.side-link.active { background: rgba(255,255,255,0.14); color: #fff; }
.side-link.active .side-icon { color: #fde68a; }

/* Chart container helper */
.chart-wrap { position: relative; width: 100%; }

/* Modal/backdrop transitions rely on Alpine x-transition utility classes below */
.backdrop-blur-modal { backdrop-filter: blur(4px); }

input[type="checkbox"].chk {
  accent-color: #059669;
}

::selection { background: #a7f3d0; color: #064e3b; }

/* =====================================================================
   PREMIUM MARKETING SITE LAYER (landing page only)
   ===================================================================== */

/* ---------- Glassmorphism ---------- */
.glass {
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.22);
}
.glass-light {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.6);
}
.glass-dark {
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ---------- Floating gradient orbs ---------- */
.orb { position: absolute; border-radius: 9999px; filter: blur(70px); pointer-events: none; }
@keyframes orbFloatA { 0%, 100% { transform: translate(0,0) scale(1); } 33% { transform: translate(26px,-34px) scale(1.08); } 66% { transform: translate(-18px,22px) scale(0.95); } }
@keyframes orbFloatB { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,-24px) scale(1.1); } }
.animate-orb-a { animation: orbFloatA 13s ease-in-out infinite; }
.animate-orb-b { animation: orbFloatB 17s ease-in-out infinite; }

/* ---------- Hero spotlight ---------- */
.spotlight {
  background: radial-gradient(ellipse 900px 500px at 50% -5%, rgba(255,255,255,0.55), transparent 60%);
}

/* ---------- Phone: alive, floating, subtly tilted ---------- */
@keyframes phoneFloat {
  0%, 100% { transform: perspective(1600px) rotateY(-9deg) rotateX(3.5deg) translateY(0px); }
  50% { transform: perspective(1600px) rotateY(-9deg) rotateX(3.5deg) translateY(-16px); }
}
.animate-phone-float { animation: phoneFloat 7s ease-in-out infinite; }

@keyframes notifPop {
  0% { opacity: 0; transform: translate(14px, 14px) scale(0.92); }
  8% { opacity: 1; transform: translate(0,0) scale(1); }
  80% { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(14px, -14px) scale(0.94); }
}
.animate-notif { animation: notifPop 6.5s ease-in-out infinite; }

@keyframes tickPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.35); }
  50% { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
}
.animate-tick { animation: tickPulse 2.2s ease-in-out infinite; }

@keyframes cardDrift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.animate-card-drift { animation: cardDrift 5s ease-in-out infinite; }

/* ---------- Scroll reveal (Framer-Motion-style, IntersectionObserver driven) ----------
   Progressive enhancement: elements are visible by default. Only once JS confirms it's
   running (adds .aos-ready to <html>, synchronously, before the rest of body paints) do
   [data-aos] elements hide and wait to be revealed on scroll. If JS is slow/blocked, the
   page simply shows fully visible, static content — it can never get stuck invisible. */
[data-aos] {
  transition: opacity .8s cubic-bezier(.16,.8,.24,1), transform .8s cubic-bezier(.16,.8,.24,1);
  will-change: opacity, transform;
}
.aos-ready [data-aos] { opacity: 0; }
.aos-ready [data-aos="fade-up"] { transform: translateY(36px); }
.aos-ready [data-aos="fade-right"] { transform: translateX(-36px); }
.aos-ready [data-aos="fade-left"] { transform: translateX(36px); }
.aos-ready [data-aos="zoom-in"] { transform: scale(0.90); }
[data-aos].aos-in { opacity: 1 !important; transform: none !important; }

/* ---------- Premium shadows ---------- */
.shadow-premium { box-shadow: 0 2px 4px rgba(15,23,42,0.04), 0 12px 24px -8px rgba(15,23,42,0.10), 0 32px 64px -24px rgba(16,77,53,0.18); }
.shadow-glow-emerald { box-shadow: 0 20px 50px -12px rgba(21,148,93,0.45); }
.shadow-glow-gold { box-shadow: 0 20px 50px -12px rgba(240,147,11,0.4); }

/* ---------- Section polish ---------- */
.section-eyebrow { letter-spacing: .12em; }
.text-balance { text-wrap: balance; }
.bg-grid {
  background-image: linear-gradient(rgba(15,23,42,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,0.035) 1px, transparent 1px);
  background-size: 44px 44px;
}
.fade-edge-b { -webkit-mask-image: linear-gradient(to bottom, black 82%, transparent 100%); mask-image: linear-gradient(to bottom, black 82%, transparent 100%); }

/* ---------- Device frames (dashboard preview) ---------- */
.frame-browser {
  background: #1e293b;
  border-radius: 1.1rem;
  padding: 0.55rem 0.55rem 0;
  box-shadow: 0 40px 80px -24px rgba(15,23,42,0.45), 0 0 0 1px rgba(15,23,42,0.06);
}
.frame-browser-dots span { width: 9px; height: 9px; border-radius: 9999px; display: inline-block; }

/* ---------- Marquee (roadmap / logos, optional use) ---------- */
.hover-lift { transition: transform .35s cubic-bezier(.16,.8,.24,1), box-shadow .35s cubic-bezier(.16,.8,.24,1); }
.hover-lift:hover { transform: translateY(-6px); }