:root{
  --bg: #1A1A2E;
  --text: #EAEAEA;
  --accent1: #FF2E63;
  --accent2: #00D0A5;
  --muted: rgba(234,234,234,0.65);
  --card: #f93a3a;
  --glass: rgba(255,255,255,0.03);
  --container: 1200px;
  --ff: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  --ease: cubic-bezier(.2,.9,.27,1);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:var(--ff);-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--text);overflow-y:auto;scroll-behavior:smooth}

/* container */
.container{max-width:var(--container);margin:0 auto;padding:28px}

/* nav */
.nav{position:fixed;top:18px;left:0;right:0;z-index:220;display:flex;justify-content:center;pointer-events:none}
.nav-row{max-width:var(--container);width:100%;display:flex;align-items:center;justify-content:space-between;pointer-events:auto;padding:10px 16px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));backdrop-filter:blur(6px);box-shadow:0 8px 30px rgba(0,0,0,0.5)}
.brand-row{display:flex;align-items:center;gap:12px}
.logo{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,var(--accent1),#ff8aa1);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--bg)}
.brand-name h1{margin:0;font-size:18px}
.brand-name .micro{margin:0;font-size:11px;color:var(--muted)}
.main-nav{display:flex;gap:16px;align-items:center}
.main-nav a{color:var(--text);text-decoration:none;font-weight:600;padding:8px 12px;border-radius:10px;transition:all .18s var(--ease)}
.main-nav a:hover, .main-nav a.active{background:rgba(255,255,255,0.03);transform:translateY(-3px)}
.nav-cta .btn.outline{border:1px solid var(--accent2);color:var(--accent2);background:transparent;padding:8px 12px;border-radius:10px;font-weight:700}
.nav-toggle{display:none}

/* dots nav */
.dots{position:fixed;right:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:200}
.dots button{width:12px;height:12px;border-radius:999px;background:rgba(255,255,255,0.12);border:0;transition:transform .18s, background .18s}
.dots button.active{transform:scale(1.35);background:linear-gradient(90deg,var(--accent1),var(--accent2));box-shadow:0 6px 18px rgba(0,0,0,0.45)}

/* bg layer */
.section{position:relative;z-index:2;overflow:visible}
.section::before{content:"";position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0;pointer-events:none;background-image:var(--bg-layer);background-repeat:no-repeat;background-position:center center;background-size:cover;transition:opacity 520ms var(--ease), transform 700ms var(--ease), filter 400ms var(--ease);opacity:0;transform:scale(1.03);filter:saturate(1) contrast(1);will-change:opacity, transform;}
.section::after{content:"";position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1;pointer-events:none;background:linear-gradient(rgba(8,10,14,0.0),rgba(8,10,14,0.0));transition:opacity 320ms var(--ease);opacity:0}
.section.active::before{opacity:1;transform:scale(1);filter:saturate(1.05) contrast(1.03) brightness(0.98)}
.section.active::after{opacity:1;background:linear-gradient(rgba(8,10,14,0.44),rgba(8,10,14,0.44))}
.section> *{position:relative;z-index:3}
.section.active[data-bg-parallax="true"]::before{transform:scale(1.02) translateY(-6px)}

/* full */
.section.full{min-height:100vh;display:flex;align-items:center;scroll-snap-align:start;padding:48px 20px}

.hero {
  position: relative;
  overflow: visible;
}

/* Background neon gradient – tidak menutup elemen hero-art */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0; /* di bawah konten, tapi di atas section::before */

  background: radial-gradient(
      at 85% 50%,
      rgba(255, 46, 99, 0.22) 0%,
      rgba(0, 208, 165, 0.18) 40%,
      rgba(26, 26, 46, 0.85) 75%,
      rgba(26, 26, 46, 1) 100%
  );

  filter: saturate(1.25);
  pointer-events: none;
}

/* Grid (Teks kiri + Gambar kanan) */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 32px;
  align-items: center;
  position: relative;
  z-index: 3; /* di atas hero::after */
}

/* ====================== */
/*   HERO IMAGE (KANAN)   */
/* ====================== */

.hero-art {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 3; /* penting: lebih tinggi dari gradient */
}

.hero-img {
  width: 420px;
  max-width: 100%;
  height: auto;

  border-radius: 14px;

  /* Glow + depth */
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.45));

  /* Floating soft animation */
  animation: float 4s ease-in-out infinite;
}

/* Floating animation */
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* ====================== */
/*       HERO TEXT        */
/* ====================== */

.prehead {
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 8px;
}

.title {
  font-size: 40px;
  line-height: 1.03;
  margin: 0;
  color: var(--text);
}
.title strong {
  font-weight: 800;
}
.title .accent {
  color: var(--accent1);
}

.lead {
  color: var(--muted);
  max-width: 640px;
  margin-top: 12px;
}

.cta-row {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.hero-features {
  display: flex;
  gap: 12px;
  list-style: none;
  padding: 14px 0 0;
  margin: 0;
  color: var(--muted);
}

.hero-features li {
  background: var(--glass);
  padding: 8px 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-features li .icon {
    font-size: 16px;
    line-height: 1;
}

/* cards */
.section-title{font-size:26px;margin:0}
.section-sub{color:var(--muted);margin:6px 0 18px}
.cards{display:flex;gap:18px;flex-wrap:wrap}
.card{flex:1 1 260px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px;position:relative;border:1px solid rgba(255,255,255,0.03);transition:transform .18s}
.card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(0,0,0,0.45)}
.card .icon{font-size:24px;margin-bottom:8px}
.card .price{font-weight:800;margin:6px 0}

/* ---------- Pricing Cards (added) ---------- */
.pricing-cards { display:flex; gap:18px; flex-wrap:wrap; align-items:stretch; margin-top:18px; }

.pricing-card{
  flex:1 1 300px;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
  padding:20px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.03);
  position:relative;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-width:240px;
}
.pricing-card:hover{ transform:translateY(-8px); box-shadow:0 30px 60px rgba(0,0,0,0.55); }

.pricing-card .icon{ font-size:24px; margin-bottom:12px; opacity:0.95; }

.pricing-card h4{ margin:0; font-size:20px; font-weight:700; color:var(--text); }

.pricing-card .price{
  margin:10px 0 4px; font-size:20px; font-weight:800; color:var(--text);
}
.pricing-card .price-number{ color:inherit; }
.pricing-card .price-sub{ margin:0 0 12px; color:var(--muted); font-size:13px; }
.pricing-card .price-sub.strong{ color:var(--accent2); font-weight:700; }

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

.card-actions{ margin-top:12px; display:flex; gap:10px; align-items:center; }

/* small button */
.btn.small { padding:8px 12px; border-radius:10px; font-weight:800; font-size:14px; }
.btn.small.outline { border:1px solid rgba(255,255,255,0.06); background:transparent; color:var(--text); }
.btn.small.primary { background: linear-gradient(90deg,var(--accent1),#ff6b85); color:#fff; }

/* featured / best value styling */
.pricing-card.featured{
  border:1px solid rgba(255,46,99,0.12);
  background: linear-gradient(180deg, rgba(255,46,99,0.03), rgba(0,0,0,0.03));
  box-shadow: 0 20px 60px rgba(255,46,99,0.04);
}
.pricing-card.best-value .price{ color: var(--accent1); font-size:22px; }
.pricing-card.best-value .price-sub { color: rgba(255,46,99,0.95); font-weight:700; }

/* ribbon */
.ribbon{
  position:absolute; top:14px; right:14px;
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
  color:white; padding:6px 10px; border-radius:999px; font-weight:800; font-size:12px;
  box-shadow:0 6px 18px rgba(0,0,0,0.45);
}

/* features */
.features-grid{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start}
.grid-features{display:grid;gap:12px;margin-top:8px}
.fcard{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));padding:14px;border-radius:12px}
.ficon{font-size:22px;margin-bottom:8px;color:var(--accent2)}
.gallery{display:flex;gap:12px;margin-top:18px}
.gallery img{width:160px;height:100px;object-fit:cover;border-radius:10px;cursor:pointer;box-shadow:0 12px 28px rgba(0,0,0,0.5)}

/* why */
.why-card{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);padding:18px;border-radius:12px}
.why-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
@media(min-width:900px){ .why-grid{grid-template-columns:repeat(3,1fr);} }
.why-item{background:var(--card);padding:16px;border-radius:10px}
.why-icon{font-size:22px;background:linear-gradient(90deg,var(--accent1),var(--accent2));display:inline-flex;padding:8px;border-radius:10px;margin-bottom:8px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
.contact-form label{display:block;margin-bottom:12px;font-weight:700;color:var(--text)}
.contact-form input, .contact-form textarea{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:var(--text)}
.form-actions{display:flex;gap:10px;margin-top:8px;align-items:center}
.tiny{color:var(--muted);font-size:13px;margin-top:8px}

/* share */
.share-row{display:flex;gap:10px}
.btn.outline{border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--text);padding:8px 12px;border-radius:10px}

/* reveal animations */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.visible{opacity:1;transform:none}

/* responsive */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-img{width: 300px; margin-top: 20px;}
  .main-nav{display:none}
  .nav-toggle{display:block}
  .cards{flex-direction:column}
  .features-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .dots{right:10px}
}
@media(max-width:480px){
  .title{font-size:24px}
  .logo{width:44px;height:44px}
  .container{padding:16px}
  .cta-row{flex-direction:column}
  .cta-row .btn{width:100%}
  .dots{display:none}
}

/* focus */
a:focus,button:focus,input:focus,textarea:focus{outline:3px solid rgba(58,175,150,0.12);outline-offset:4px}