:root{
  --bg: #0b1220;
  --surface: rgba(255,255,255,.08);
  --surface2: rgba(255,255,255,.06);
  --line: rgba(234,240,255,.14);
  --text: #ecf2ff;
  --muted: rgba(236,242,255,.72);

  --brand: #7c5cff;
  --brand2: #35d3ff;

  --shadow: 0 18px 45px rgba(0,0,0,.35);
  --shadow2: 0 10px 24px rgba(0,0,0,.25);

  --r: 18px;
  --r2: 14px;

  --max: 1120px;
}

/*
Nova Landing Template — Premium (Default / Dark)
© 2026 Fatimah Digital Edge. Licensed to the purchaser only.
Resale/redistribution is prohibited. See LICENSE.txt
*/

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background:
    radial-gradient(900px 550px at 12% 10%, rgba(124,92,255,.34), transparent 60%),
    radial-gradient(900px 550px at 86% 18%, rgba(53,211,255,.26), transparent 60%),
    var(--bg);
}

.container{width:min(var(--max), 92%); margin:auto}
a{color:inherit}
code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

.muted{color:var(--muted)}
.tiny{font-size:12px}
.fine{font-size:13px}

.skip-link{
  position:absolute; left:-999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:12px; top:12px; width:auto; height:auto;
  background:#fff; color:#000;
  padding:10px 12px;
  border-radius: 12px;
  z-index: 9999;
}

/* Header */
.header{
  position: sticky; top:0; z-index: 30;
  backdrop-filter: blur(12px);
  background: rgba(11,18,32,.62);
  border-bottom: 1px solid var(--line);
}
.header.is-scrolled{
  box-shadow: var(--shadow2);
  background: rgba(11,18,32,.72);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0; gap: 16px;
}
.logo{
  display:flex; align-items:center; gap: 10px;
  text-decoration:none; font-weight: 900; letter-spacing:.2px;
}
.logo-mark{
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 10px 25px rgba(124,92,255,.18);
}
.logo-text{font-weight: 900}

.menu{display:flex; gap:16px; flex-wrap:wrap}
.menu a{
  text-decoration:none; color: var(--muted);
  font-weight:800; font-size: 14px;
  padding: 10px 10px;
  border-radius: 12px;
}
.menu a:hover{color: var(--text); background: rgba(255,255,255,.05)}

.nav-actions{display:flex; align-items:center; gap:10px}
.icon-btn{
  display:none;
  width: 42px; height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.icon-btn:hover{background: rgba(255,255,255,.09)}
.burger{
  display:block;
  width: 18px; height: 12px;
  margin: auto;
  position: relative;
}
.burger::before, .burger::after, .burger{
  background: transparent;
}
.burger::before, .burger::after{
  content:"";
  position:absolute; left:0; right:0;
  height: 2px; border-radius: 10px;
  background: rgba(236,242,255,.95);
}
.burger::before{ top:0 }
.burger::after{ bottom:0 }
.burger{
  border-top: 2px solid rgba(236,242,255,.95);
  border-radius: 10px;
}

.mobile-menu{
  border-top: 1px solid var(--line);
  background: rgba(11,18,32,.86);
}
.mobile-menu-inner{
  padding: 14px 0 18px;
  display:grid;
  gap: 10px;
}
.mobile-menu a{
  text-decoration:none;
  font-weight: 900;
  color: var(--text);
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}
.mobile-menu a:hover{background: rgba(255,255,255,.08)}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.14);
  color: #071020;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  box-shadow: 0 10px 25px rgba(124,92,255,.18);
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover{transform: translateY(-1px); filter: brightness(1.03)}
.btn:active{transform: translateY(0)}

.btn-outline{
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: none;
}
.btn-ghost{
  background: rgba(255,255,255,.06);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: none;
}
.btn-small{ padding: 10px 14px; border-radius: 12px; }
.btn-full{ width:100%; }

/* Hero */
.hero{ position: relative; padding: 78px 0 42px; overflow:hidden }
.hero-glow{
  position:absolute;
  inset: auto -20% -220px -20%;
  height: 420px;
  background: radial-gradient(closest-side, rgba(124,92,255,.20), transparent 65%);
  filter: blur(0px);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 26px;
  align-items:start;
  position: relative;
  z-index: 2;
}
.badge{
  display:inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  font-size: 13px;
  color: var(--text);
  margin-bottom: 12px;
}
h1{ font-size: clamp(36px, 4.3vw, 56px); line-height: 1.03; margin: 0 0 12px }
.lead{ font-size: 16px; max-width: 62ch; margin: 0 0 12px; color: var(--muted) }

.hero-cta{ display:flex; gap: 12px; flex-wrap:wrap; margin: 18px 0 18px; }

.stats{ display:flex; gap: 12px; flex-wrap:wrap; margin-top: 4px; }
.stat{
  display:flex; align-items:flex-start; gap: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  border-radius: 16px;
  padding: 12px 14px;
  min-width: 190px;
}
.stat-icon{ font-size: 16px; line-height: 1.3; margin-top: 1px; }
.stat-num{ display:block; font-weight: 900; color: var(--text); }
.stat-label{ display:block; font-size: 13px; color: var(--muted); }

.trust-row{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 18px; }
.trust-pill{
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  font-weight: 800;
  font-size: 13px;
  color: var(--muted);
}

/* Cards / Boxes */
.card, .box{
  background: linear-gradient(180deg, var(--surface), var(--surface2));
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.card{ padding: 20px }
.box{ padding: 18px }

.hero-card .card{ position: relative; overflow:hidden }
.hero-card .card::before{
  content:"";
  position:absolute; inset: -2px;
  background: radial-gradient(500px 200px at 30% 0%, rgba(53,211,255,.18), transparent 60%),
              radial-gradient(500px 240px at 70% 0%, rgba(124,92,255,.18), transparent 60%);
  pointer-events:none;
  opacity: .9;
}
.hero-card .card > *{ position: relative; z-index: 1; }

.card-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.chip{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  font-weight: 900;
  font-size: 12px;
  color: var(--text);
}

.card-foot{
  display:flex; gap: 12px; flex-wrap:wrap;
  margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 12px;
}
.mini{ display:flex; align-items:center; gap: 8px; }
.mini-dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
}

/* Form */
.form label{
  display:block; font-size: 13px;
  color: var(--muted);
  margin: 12px 0 6px;
}
input, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
  color: var(--text);
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}
input:focus, textarea:focus{ border-color: rgba(53,211,255,.65); background: rgba(0,0,0,.26) }

/* Sections */
.section{ padding: 86px 0; }
.section.alt{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: 14px; flex-wrap:wrap;
  margin-bottom: 12px;
}
.title{ font-size: clamp(26px, 3.2vw, 38px); margin: 0 0 10px; line-height: 1.12 }
.subtitle{ max-width: 70ch; margin: 0 0 22px; color: var(--muted); }

.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; }

.icon{
  width: 42px; height: 42px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  margin-bottom: 10px;
  font-size: 18px;
}

.list{ margin: 10px 0 0; padding-left: 18px; color: var(--muted) }
.list li{ margin-bottom: 8px }

/* Logos */
.logos{ padding: 8px 0 26px; }
.logos-row{ display:flex; gap: 10px; flex-wrap:wrap; }
.logo-pill{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 900;
  color: var(--muted);
  font-size: 13px;
}

/* Testimonials */
.quote blockquote{ margin: 10px 0 10px; color: var(--text); font-size: 15px; line-height: 1.5 }
.quote figcaption{ color: var(--muted); font-size: 13px }
.stars{ color: rgba(236,242,255,.92); letter-spacing: 1px; font-size: 12px; }

/* Pricing */
.pricing{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 10px; }
.amount{ font-size: 38px; font-weight: 900; margin: 10px 0 12px; color: var(--text); }
.price .btn{ margin-top: 6px; }
.featured{
  border-color: rgba(53,211,255,.45);
  box-shadow: 0 18px 60px rgba(53,211,255,.10);
  position: relative;
  transform: translateY(-6px);
}
.tag{
  position:absolute;
  top: 12px; right: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(53,211,255,.35);
  background: rgba(53,211,255,.14);
  color: var(--text);
  margin: 0;
}

/* FAQ */
.faq{ display:grid; gap: 12px; margin-top: 10px; }
details summary{
  cursor:pointer;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 8px;
}
details[open]{
  outline: 1px solid rgba(53,211,255,.22);
}

/* Contact */
.contact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  flex-wrap:wrap;
}
.contact-cta{ display:grid; gap: 10px; min-width: 240px; }

/* Footer */
.footer{
  border-top: 1px solid var(--line);
  padding: 34px 0 24px;
  background: rgba(0,0,0,.18);
}
.foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.foot-links{ display:flex; gap: 12px; flex-wrap:wrap; }
.foot-links a{
  color: var(--muted);
  text-decoration:none;
  font-weight: 900;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 12px;
}
.foot-links a:hover{ color: var(--text); background: rgba(255,255,255,.05) }

/* Reveal animation */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--d, 0ms);
}
.reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
  .btn{ transition: none; }
}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .grid-3, .pricing{ grid-template-columns: 1fr; }
  .featured{ transform: none; }
  .menu{ display:none; }
  .icon-btn{ display:inline-grid; place-items:center; }
}