/* =========================================================
   FELIC STUDIO — Design tokens v2
   Concept: "studio kreatif digital" — gradient mesh yang hidup,
   kartu kaca (glass) yang melayang, tipografi besar & berani.
   Ini tampilan yang dipakai brand digital/startup kekinian:
   gelap, warna gradasi violet→pink→cyan, rounded penuh, ringan.
   ========================================================= */

:root{
  --bg:        #0A0913;
  --bg-soft:   #120F22;
  --surface:   rgba(255,255,255,0.05);
  --surface-2: rgba(255,255,255,0.09);
  --border:    rgba(255,255,255,0.12);
  --border-hi: rgba(255,255,255,0.22);

  --text:      #F8F7FC;
  --text-dim:  #ADA8C4;
  --text-mute: #7A7594;

  --violet:  #8B5CF6;
  --pink:    #FF5C93;
  --cyan:    #37E6C4;
  --amber:   #FFB84C;

  --grad-brand: linear-gradient(135deg, #8B5CF6 0%, #FF5C93 100%);
  --grad-cool:  linear-gradient(135deg, #37E6C4 0%, #8B5CF6 100%);
  --grad-warm:  linear-gradient(135deg, #FF5C93 0%, #FFB84C 100%);

  --font-display: 'Space Grotesk', ui-sans-serif, sans-serif;
  --font-body: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;

  --max: 1160px;
  --r-xl: 32px;
  --r-lg: 22px;
  --r-md: 14px;
  --r-full: 999px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:700; letter-spacing:-0.02em; }
p{ margin:0; }
::selection{ background:var(--pink); color:#fff; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }

/* ---------- Gradient mesh backdrop ---------- */
.mesh-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.mesh-bg .blob{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:0.35;
}
.mesh-bg .b1{ width:520px; height:520px; background:var(--violet); top:-160px; left:-120px; }
.mesh-bg .b2{ width:460px; height:460px; background:var(--pink); top:120px; right:-160px; opacity:0.28; }
.mesh-bg .b3{ width:380px; height:380px; background:var(--cyan); bottom:-140px; left:30%; opacity:0.22; }
.mesh-bg::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 0%, rgba(10,9,19,0) 0%, var(--bg) 78%);
}

.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; position:relative; z-index:1; }

/* ---------- Chip / eyebrow ---------- */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-size:12.5px; font-weight:600;
  color:var(--text); background:var(--surface); border:1px solid var(--border);
  padding:7px 14px 7px 8px; border-radius:var(--r-full);
}
.chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--grad-brand); }

/* ---------- Header ---------- */
header.site{ position:sticky; top:0; z-index:40; padding-top:16px; }
.nav-shell{
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(18,15,34,0.65);
  backdrop-filter:blur(16px);
  border:1px solid var(--border);
  border-radius:var(--r-full);
  padding:10px 10px 10px 20px;
}
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:17px; }
.brand .mark{
  width:30px; height:30px; border-radius:9px;
  background:var(--grad-brand);
  display:grid; place-items:center; font-size:15px; flex-shrink:0;
}
.nav-links{ display:flex; align-items:center; gap:6px; font-size:14px; font-weight:500; }
.nav-links a{
  color:var(--text-dim); padding:9px 15px; border-radius:var(--r-full); transition:all .15s;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--text); background:var(--surface); }
.nav-cta{
  background:var(--grad-brand) !important; color:#fff !important; font-weight:700;
  box-shadow:0 8px 24px -8px rgba(139,92,246,0.6);
}
.nav-toggle{ display:none; }

@media (max-width:900px){
  .nav-links:not(.nav-cta-wrap){
    position:fixed; inset:78px 16px auto 16px; z-index:50;
    background:rgba(18,15,34,0.97); border:1px solid var(--border); border-radius:var(--r-lg);
    flex-direction:column; align-items:stretch; gap:2px; padding:12px;
    opacity:0; pointer-events:none; transform:translateY(-8px); transition:all .18s;
  }
  .nav-links.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .nav-links a{ padding:13px 16px; }
  .nav-cta{ margin-top:6px; text-align:center; }
  .nav-toggle{
    display:grid; place-items:center; width:38px; height:38px; border-radius:var(--r-full);
    background:var(--surface); border:1px solid var(--border); color:var(--text);
  }
}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-body); font-size:14.5px; font-weight:700;
  padding:14px 24px; border-radius:var(--r-full);
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid transparent; transition:transform .18s, box-shadow .18s, background .18s;
}
.btn-primary{ background:var(--grad-brand); color:#fff; box-shadow:0 10px 30px -10px rgba(255,92,147,0.55); }
.btn-primary:hover{ transform:translateY(-2px) scale(1.02); }
.btn-ghost{ background:var(--surface); color:var(--text); border-color:var(--border); }
.btn-ghost:hover{ border-color:var(--border-hi); background:var(--surface-2); }

/* ---------- Hero ---------- */
.hero{ padding:76px 0 60px; position:relative; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:50px; align-items:center; }
@media (max-width:920px){ .hero-grid{ grid-template-columns:1fr; } }

h1.display{ font-size:clamp(36px,5.4vw,64px); line-height:1.02; margin-top:22px; }
.gtext{
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lede{ margin-top:20px; max-width:48ch; color:var(--text-dim); font-size:17.5px; }
.hero-actions{ display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }

.hero-stats{ display:flex; gap:10px; margin-top:36px; flex-wrap:wrap; }
.stat-pill{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-full);
  padding:9px 16px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:7px;
}
.stat-pill b{ color:var(--text); }
.stat-pill span{ color:var(--text-mute); font-weight:500; }

/* ---------- Hero visual (stacked glass cards) ---------- */
.stack{ position:relative; height:420px; }
.gcard{
  position:absolute; border-radius:var(--r-lg);
  background:var(--surface-2); border:1px solid var(--border);
  backdrop-filter:blur(10px); padding:20px; overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.5);
}
.gcard.c1{ width:78%; top:0; left:0; z-index:3; transform:rotate(-3deg); }
.gcard.c2{ width:70%; bottom:26px; right:0; z-index:2; transform:rotate(4deg); background:rgba(255,255,255,0.04); }
.gcard.c3{ width:52%; bottom:-10px; left:8%; z-index:1; transform:rotate(-6deg); background:rgba(255,255,255,0.03); }
.gcard .bar{ display:flex; gap:5px; margin-bottom:14px; }
.gcard .bar span{ width:8px; height:8px; border-radius:50%; background:var(--border-hi); }
.gcard .block{ border-radius:8px; margin-bottom:8px; }
.gcard .g1{ height:34px; background:var(--grad-brand); width:60%; }
.gcard .g2{ height:9px; background:rgba(255,255,255,0.14); width:90%; }
.gcard .g3{ height:9px; background:rgba(255,255,255,0.14); width:70%; }
.gcard .g4{ height:52px; background:var(--grad-cool); border-radius:10px; margin-top:12px; opacity:0.85; }
.badge-float{
  position:absolute; top:14px; right:14px; z-index:4;
  background:var(--bg-soft); border:1px solid var(--border);
  padding:6px 12px; border-radius:var(--r-full); font-size:11.5px; font-weight:700;
  display:flex; align-items:center; gap:6px;
}
.badge-float .dot2{ width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }

/* ---------- Sections ---------- */
section{ padding:64px 0; position:relative; }
.section-head{ margin-bottom:40px; max-width:640px; }
.section-head .chip{ margin-bottom:16px; }
.section-head h2{ font-size:clamp(26px,3.6vw,40px); }
.section-head p{ margin-top:14px; color:var(--text-dim); font-size:15.5px; }

/* Service cards */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr; } }
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:30px 26px; transition:transform .2s, border-color .2s, background .2s;
}
.card:hover{ transform:translateY(-4px); border-color:var(--border-hi); background:var(--surface-2); }
.card .icon{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  font-size:20px; margin-bottom:18px;
}
.card:nth-child(1) .icon{ background:var(--grad-brand); }
.card:nth-child(2) .icon{ background:var(--grad-cool); }
.card:nth-child(3) .icon{ background:var(--grad-warm); }
.card h3{ font-size:19px; }
.card p{ margin-top:10px; color:var(--text-dim); font-size:14.5px; }

/* Process */
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:900px){ .grid-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .grid-4{ grid-template-columns:1fr; } }
.step-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:24px 22px; position:relative;
}
.step-card .n{
  font-family:var(--font-display); font-size:34px; font-weight:700;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.step-card h4{ font-size:15.5px; margin-top:14px; }
.step-card p{ margin-top:8px; font-size:13.5px; color:var(--text-dim); }

/* Pricing */
.grid-pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .grid-pricing{ grid-template-columns:1fr; } }
.price-card{
  border:1px solid var(--border); border-radius:var(--r-lg); padding:30px 26px;
  display:flex; flex-direction:column; gap:16px; background:var(--surface); position:relative;
}
.price-card.featured{
  border-color:transparent; background:linear-gradient(var(--bg-soft), var(--bg-soft)) padding-box,
  var(--grad-brand) border-box; border:2px solid transparent;
}
.price-card.featured::before{
  content:'✦ PALING LARIS'; position:absolute; top:-13px; left:24px;
  background:var(--grad-brand); color:#fff; font-size:11px; font-weight:800; letter-spacing:0.03em;
  padding:5px 12px; border-radius:var(--r-full);
}
.price-card h3{ font-size:18px; }
.price-card .price{ font-family:var(--font-display); font-size:32px; font-weight:700; }
.price-card .price span{ font-size:12.5px; color:var(--text-mute); font-family:var(--font-body); font-weight:500; }
.price-card ul{ display:flex; flex-direction:column; gap:10px; margin-top:2px; }
.price-card li{ font-size:13.5px; color:var(--text-dim); display:flex; gap:9px; align-items:flex-start; }
.price-card li::before{ content:'✓'; color:var(--cyan); font-weight:700; flex-shrink:0; }

/* Trust strip */
.trust-strip{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  border:1px solid var(--border); border-radius:var(--r-xl);
  padding:26px 30px; background:var(--surface);
}
.badge-row{ display:flex; gap:8px; flex-wrap:wrap; }
.badge{
  font-size:11.5px; font-weight:700; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border);
  padding:7px 13px; border-radius:var(--r-full);
}

/* CTA banner */
.cta-banner{
  border-radius:var(--r-xl); padding:64px 44px; text-align:center; position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--border);
}
.cta-banner::before{
  content:''; position:absolute; inset:0; opacity:0.5;
  background:radial-gradient(ellipse 60% 80% at 50% -10%, rgba(139,92,246,0.35), transparent 70%);
}
.cta-banner > *{ position:relative; z-index:1; }
.cta-banner h2{ font-size:clamp(26px,3.8vw,38px); }
.cta-banner p{ margin-top:14px; color:var(--text-dim); }
.cta-banner .hero-actions{ justify-content:center; margin-top:28px; }

/* ---------- Simple pages ---------- */
.page-hero{ padding:56px 0 36px; }
.page-hero h1{ font-size:clamp(30px,4.4vw,48px); margin-top:18px; }
.page-hero .lede{ margin-top:16px; }

.legal{ padding:20px 0 90px; }
.legal-grid{ display:grid; grid-template-columns:230px 1fr; gap:48px; align-items:flex-start; }
@media (max-width:860px){ .legal-grid{ grid-template-columns:1fr; } }

.toc{
  position:sticky; top:104px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:20px; display:flex; flex-direction:column; gap:4px;
}
.toc span{ font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-mute); margin-bottom:8px; }
.toc a{ font-size:13.5px; color:var(--text-dim); padding:8px 10px; border-radius:8px; transition:all .15s; }
.toc a:hover{ color:var(--text); background:var(--surface-2); }

.legal-body{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:38px 40px;
}
@media (max-width:600px){ .legal-body{ padding:26px 22px; } }
.legal-body h2{
  font-size:20px; margin-top:40px; margin-bottom:14px; display:flex; align-items:center; gap:12px;
}
.legal-body h2:first-child{ margin-top:0; }
.legal-body h2 .n{
  font-family:var(--font-display); font-size:13px; font-weight:700; color:#fff;
  background:var(--grad-brand); width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center; flex-shrink:0;
}
.legal-body p, .legal-body li{ color:var(--text-dim); font-size:14.5px; margin-bottom:10px; }
.legal-body ul{ padding-left:0; margin:14px 0; display:flex; flex-direction:column; gap:9px; }
.legal-body li{ list-style:none; padding-left:22px; position:relative; margin-bottom:0; }
.legal-body li::before{ content:'→'; position:absolute; left:0; color:var(--pink); }
.legal-body strong{ color:var(--text); }
.legal-body .note{
  border:1px dashed var(--border-hi); border-radius:var(--r-md); padding:16px 18px;
  font-size:13.5px; color:var(--text-dim); margin-top:20px; line-height:1.6;
}

/* FAQ */
.faq-list{ display:flex; flex-direction:column; gap:10px; }
.faq-item{
  border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); overflow:hidden;
}
.faq-item[open]{ border-color:var(--border-hi); background:var(--surface-2); }
.faq-item summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:19px 20px; font-size:15px; font-weight:600;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .plus{
  font-size:18px; color:var(--pink); flex-shrink:0; transition:transform .2s; font-weight:400;
}
.faq-item[open] summary .plus{ transform:rotate(45deg); }
.faq-item .a{ padding:0 20px 20px; color:var(--text-dim); font-size:14.5px; max-width:70ch; }
.faq-kicker{ font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-mute); margin:36px 0 12px; }
.faq-kicker:first-child{ margin-top:0; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:18px; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:32px 30px; }
.contact-item{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--border); }
.contact-item:last-child{ border-bottom:none; }
.contact-item .ic{
  width:42px; height:42px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border);
  display:grid; place-items:center; flex-shrink:0; font-size:17px;
}
.contact-item h4{ font-size:12px; color:var(--text-mute); font-weight:700; letter-spacing:0.05em; text-transform:uppercase; }
.contact-item p{ margin-top:6px; color:var(--text); font-size:15px; font-weight:500; }
.contact-item p small{ display:block; color:var(--text-mute); font-size:12px; margin-top:5px; font-weight:400; }

.form-field{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.form-field label{ font-size:12.5px; font-weight:700; color:var(--text-dim); }
.form-field input, .form-field textarea, .form-field select{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md);
  color:var(--text); padding:13px 14px; font-family:var(--font-body); font-size:14.5px;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
  outline:none; border-color:var(--violet);
}
.form-field textarea{ resize:vertical; min-height:110px; }

/* Footer */
footer.site{ padding:64px 0 34px; margin-top:40px; }
.footer-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:44px 40px 28px;
}
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h5{ font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-mute); margin-bottom:16px; }
.footer-grid a, .footer-grid p{ font-size:13.5px; color:var(--text-dim); display:block; margin-bottom:10px; }
.footer-grid a:hover{ color:var(--text); }
.footer-bottom{
  margin-top:36px; padding-top:22px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-size:12.5px; color:var(--text-mute);
}