/* =====================================================================
   landing.css — Website utama / landing page "IPAL Batik Astoetik"
   Menggunakan variabel warna & font yang sama dari style.css supaya
   temanya konsisten dengan dashboard (termasuk mode gelap/terang).
   ===================================================================== */

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body.landing-body{
  margin:0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); overflow-x:hidden;
}

/* ---------------- Nav bar ---------------- */
.lp-nav{
  position: sticky; top:0; z-index: 100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 28px;
  background: linear-gradient(120deg, var(--astoetik-teal-deep), var(--astoetik-cyan));
  box-shadow: 0 2px 14px rgba(0,0,0,.18);
}
.lp-nav-brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.lp-nav-brand img{ width:46px; height:46px; border-radius:50%; background:#fff; padding:5px; object-fit:contain; flex-shrink:0; }
.lp-nav-brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.lp-nav-brand-text strong{ font-family: var(--font-display); font-size:15.5px; color:#fff; }
.lp-nav-brand-text span{ font-size:10.5px; color: rgba(255,255,255,.82); }

.lp-nav-links{ display:flex; align-items:center; gap:4px; }
.lp-nav-links a{
  color: rgba(255,255,255,.85); text-decoration:none; font-size:13.5px; font-weight:600;
  padding: 9px 14px; border-radius: 999px; transition: background .15s ease, color .15s ease;
  white-space:nowrap;
}
.lp-nav-links a:hover{ background: rgba(255,255,255,.14); color:#fff; }
.lp-nav-links a.active{ background: rgba(255,255,255,.22); color:#fff; }

.lp-nav-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.lp-nav-cta{
  background:#fff; color: var(--astoetik-teal-deep); border:none; border-radius:999px;
  padding: 9px 16px; font-weight:700; font-size:13px; text-decoration:none; cursor:pointer;
  transition: transform .15s ease;
}
.lp-nav-cta:hover{ transform: translateY(-1px); }
.lp-nav-user{ display:flex; align-items:center; gap:8px; color:#fff; font-size:12.5px; }
.lp-nav-user img{ width:26px; height:26px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.5); }
.lp-nav-burger{ display:none; background:none; border:none; color:#fff; font-size:22px; cursor:pointer; }

@media (max-width: 980px){
  .lp-nav-links{
    position:fixed; top:70px; left:0; right:0; bottom:0; z-index:99;
    background: var(--panel); flex-direction:column; align-items:stretch; padding:18px;
    gap:6px; transform: translateX(-100%); transition: transform .25s ease; overflow-y:auto;
  }
  .lp-nav-links.open{ transform: translateX(0); }
  .lp-nav-links a{ color: var(--text); padding:14px 16px; border-radius:10px; font-size:15px; }
  .lp-nav-links a:hover, .lp-nav-links a.active{ background: var(--panel-2); color: var(--astoetik-cyan); }
  .lp-nav-burger{ display:block; }
  .lp-nav-brand-text span{ display:none; }
}

@media (max-width: 640px){
  .lp-nav{ padding: 10px 12px; gap:8px; }
  .lp-nav-brand{ gap:8px; min-width:0; flex:1 1 auto; overflow:hidden; }
  .lp-nav-brand img{ width:36px; height:36px; flex-shrink:0; }
  .lp-nav-brand-text strong{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; max-width:100%; }
  .lp-nav-actions{ gap:6px; flex-shrink:0; }
  .lp-nav-user span{ display:none; }
  .lp-nav-user img{ width:24px; height:24px; }
  .lp-nav-cta{ padding:8px 12px; font-size:12px; white-space:nowrap; }
  .theme-toggle-btn{ width:32px; height:32px; font-size:14px; }
  .lp-nav-burger{ font-size:20px; }
}


/* ---------------- Hero slideshow ---------------- */
.lp-hero{ position:relative; min-height: 82vh; display:flex; align-items:center; overflow:hidden; }
.lp-hero-slide{
  position:absolute; inset:0; opacity:0; transition: opacity 1.1s ease;
  background-size: cover; background-position:center;
}
.lp-hero-slide.active{ opacity:1; }
.lp-hero-slide::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(6,14,26,.96) 0%, rgba(6,14,26,.86) 32%, rgba(8,40,52,.62) 58%, rgba(10,58,70,.42) 85%, rgba(10,58,70,.32) 100%);
}
.lp-hero-slide:nth-child(1){ background-image: url('../img/hero1.jpg'); background-color: var(--bg); }
.lp-hero-slide:nth-child(2){ background-image: url('../img/hero2.jpg'); background-color: var(--bg); }
.lp-hero-slide:nth-child(3){ background-image: url('../img/hero3.jpg'); background-color: var(--bg); }

.lp-hero-inner{
  position:relative; z-index:2; max-width:1180px; margin:0 auto; padding: 40px 28px;
  display:grid; grid-template-columns: 1.1fr .9fr; gap:40px; align-items:center; width:100%;
}
.lp-hero-inner > div{ min-width:0; }
.lp-hero-badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px;
  background: rgba(25,142,175,.22); border:1px solid rgba(25,142,175,.5); color: #6FE0FF;
  font-size:12px; font-weight:700; margin-bottom:18px; max-width:100%; white-space:normal; text-align:left;
}
.lp-hero-title{
  font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 52px); line-height:1.08;
  color: #FFFFFF; margin:0 0 18px;
}
.lp-hero-title em{ font-style:italic; color: var(--astoetik-gold); font-weight:600; }
.lp-hero-desc{ font-size:15.5px; color: rgba(255,255,255,.82); max-width:520px; margin-bottom:26px; line-height:1.7; }
.lp-hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 34px; }
.lp-btn{
  display:inline-flex; align-items:center; gap:8px; padding: 13px 24px; border-radius: 999px;
  font-weight:700; font-size:14px; text-decoration:none; cursor:pointer; border:none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.lp-btn-primary{ background: linear-gradient(120deg, var(--astoetik-cyan), var(--astoetik-green)); color:#04121A; box-shadow: 0 10px 26px rgba(25,142,175,.28); }
.lp-btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(25,142,175,.36); }
.lp-btn-ghost{ background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.4); color: #FFFFFF; }
.lp-btn-ghost:hover{ background: rgba(255,255,255,.16); }

.lp-hero-stats{ display:flex; gap:28px; flex-wrap:wrap; }
.lp-hero-stat strong{ display:block; font-family: var(--font-display); font-size:26px; color: #FFFFFF; }
.lp-hero-stat span{ font-size:11.5px; color: rgba(255,255,255,.7); }

.lp-hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; }
.lp-hero-visual img{ width:100%; max-width:460px; filter: drop-shadow(0 20px 40px rgba(0,0,0,.35)); }
.lp-hero-dots{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:8px; }
.lp-hero-dot{ width:9px; height:9px; border-radius:50%; background: rgba(255,255,255,.35); cursor:pointer; border:none; padding:0; transition: background .2s ease, transform .2s ease; }
.lp-hero-dot.active{ background: var(--astoetik-cyan); transform: scale(1.25); }

@media (max-width: 900px){
  .lp-hero-inner{ grid-template-columns: 1fr; text-align:center; padding-top:34px; padding-bottom:70px; }
  .lp-hero-desc{ margin-left:auto; margin-right:auto; }
  .lp-hero-ctas, .lp-hero-stats{ justify-content:center; }
  .lp-hero-visual{ margin-top: 30px; }
  .lp-hero-visual img{ max-width: 320px; }
  .lp-hero{ min-height:auto; padding-bottom: 30px; }
  .lp-hero-dots{ bottom:14px; }
}
@media (max-width: 480px){
  .lp-hero-visual img{ max-width: 260px; }
  .lp-hero-badge{ font-size:10.5px; padding:5px 10px; }
  .lp-hero-title{ margin-bottom:12px; }
  .lp-hero-desc{ font-size:13.5px; margin-bottom:18px; }
  .lp-wa-fab, .lp-top-fab{ width:44px; height:44px; font-size:20px; bottom:16px; }
  .lp-wa-fab{ left:16px; }
  .lp-top-fab{ right:16px; }
}


/* ---------------- Section umum ---------------- */
.lp-section{ padding: 90px 28px; max-width:1180px; margin:0 auto; }
.lp-section-alt{ background: var(--panel-2); }
.lp-section-head{ text-align:center; max-width:640px; margin: 0 auto 52px; }
.lp-eyebrow{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color: var(--astoetik-cyan); margin-bottom:10px;
}
.lp-section-title{ font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); margin: 0 0 12px; color: var(--text); }
.lp-section-desc{ color: var(--text-dim); font-size:14.5px; line-height:1.7; }

/* reveal on scroll */
.lp-reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.lp-reveal.in-view{ opacity:1; transform: translateY(0); }

/* ---------------- Fitur grid (Beranda) ---------------- */
.lp-feature-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; }
.lp-feature-card{
  background: var(--panel); border:1px solid var(--border-soft); border-radius: 16px; padding: 26px 22px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.lp-feature-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 34px rgba(0,0,0,.16); border-color: var(--astoetik-cyan); }
.lp-feature-ico{
  width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:22px; margin-bottom:16px; background: linear-gradient(135deg, var(--astoetik-cyan), var(--astoetik-teal-deep)); color:#fff;
}
.lp-feature-card h3{ font-size:15.5px; margin:0 0 8px; color: var(--text); }
.lp-feature-card p{ font-size:13px; color: var(--text-dim); line-height:1.6; margin:0; }

@media (max-width: 980px){ .lp-feature-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .lp-feature-grid{ grid-template-columns: 1fr; } }

/* ---------------- Produk ---------------- */
.lp-product-hero{ display:grid; grid-template-columns: .95fr 1.05fr; gap:48px; align-items:center; margin-bottom:70px; }
.lp-product-hero img, .lp-product-hero svg{ width:100%; max-width:420px; margin:0 auto; display:block; }
.lp-product-list{ list-style:none; margin: 18px 0 0; padding:0; display:grid; gap:12px; }
.lp-product-list li{ display:flex; gap:10px; font-size:13.5px; color: var(--text-dim); align-items:flex-start; }
.lp-product-list li::before{ content:'✓'; color: var(--astoetik-green); font-weight:800; flex-shrink:0; }

@media (max-width: 900px){ .lp-product-hero{ grid-template-columns: 1fr; } }

/* Galeri komponen dengan tilt-hover */
.lp-gallery{ display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; perspective: 900px; }
.lp-gallery-card{
  background: var(--panel); border:1px solid var(--border-soft); border-radius:16px; overflow:hidden;
  transition: transform .12s ease, box-shadow .12s ease; will-change: transform; cursor:pointer;
}
.lp-gallery-card:hover{ box-shadow: 0 20px 40px rgba(0,0,0,.22); }
.lp-gallery-thumb{ aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center; background: var(--panel-3); }
.lp-gallery-thumb svg{ width:62%; height:62%; }
.lp-gallery-card figcaption{ padding: 14px 16px 18px; }
.lp-gallery-card figcaption strong{ display:block; font-size:13.5px; color: var(--text); margin-bottom:3px; }
.lp-gallery-card figcaption span{ font-size:11.5px; color: var(--muted); }

@media (max-width: 980px){ .lp-gallery{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .lp-gallery{ grid-template-columns: 1fr; } }

/* ---------------- Stats counter ---------------- */
.lp-stats-row{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }
.lp-stat-card{ text-align:center; background: var(--panel); border:1px solid var(--border-soft); border-radius:16px; padding: 28px 14px; }
.lp-stat-num{ font-family: var(--font-display); font-size:32px; color: var(--astoetik-cyan); }
.lp-stat-label{ font-size:12px; color: var(--muted); margin-top:6px; }
@media (max-width: 780px){ .lp-stats-row{ grid-template-columns: repeat(2,1fr); } }

/* ---------------- Spesifikasi ---------------- */
.lp-spec-wrap{ display:grid; grid-template-columns: .8fr 1.2fr; gap:44px; align-items:start; }
.lp-spec-wrap svg{ width:100%; max-width:360px; margin: 0 auto; display:block; position:sticky; top:110px; }
.lp-spec-table{ width:100%; border-collapse: collapse; background: var(--panel); border-radius:14px; overflow:hidden; border:1px solid var(--border-soft); }
.lp-spec-table tr:not(:last-child) td{ border-bottom: 1px solid var(--border-soft); }
.lp-spec-table td{ padding: 13px 18px; font-size:13.5px; }
.lp-spec-table td:first-child{ color: var(--muted); width:42%; font-weight:600; }
.lp-spec-table td:last-child{ color: var(--text); font-weight:600; }
.lp-spec-group-title{ font-family: var(--font-display); font-size:15px; color: var(--astoetik-cyan); margin: 30px 0 10px; }
.lp-spec-group-title:first-child{ margin-top:0; }

@media (max-width: 900px){ .lp-spec-wrap{ grid-template-columns: 1fr; } .lp-spec-wrap svg{ position:static; } }

/* ---------------- Panduan teknis (timeline) ---------------- */
.lp-timeline{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; counter-reset: step; }
.lp-timeline-step{
  background: var(--panel); border:1px solid var(--border-soft); border-radius:16px; padding: 26px 20px;
  position:relative;
}
.lp-timeline-step::before{
  counter-increment: step; content: counter(step);
  display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%;
  background: linear-gradient(135deg, var(--astoetik-cyan), var(--astoetik-green)); color:#04121A;
  font-family: var(--font-display); font-weight:700; font-size:14px; margin-bottom:16px;
}
.lp-timeline-step h3{ font-size:14.5px; margin:0 0 8px; color: var(--text); }
.lp-timeline-step p{ font-size:12.5px; color: var(--text-dim); line-height:1.6; margin:0; }
@media (max-width: 980px){ .lp-timeline{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .lp-timeline{ grid-template-columns: 1fr; } }

.lp-guide-notes{ margin-top: 46px; background: var(--panel); border:1px solid var(--border-soft); border-radius:16px; padding: 26px 28px; }
.lp-guide-notes h3{ font-size:15px; margin:0 0 12px; color: var(--text); }
.lp-guide-notes ul{ margin:0; padding-left:20px; color: var(--text-dim); font-size:13.5px; line-height:1.8; }

/* ---------------- Kontak ---------------- */
.lp-contact-wrap{ display:grid; grid-template-columns: .85fr 1.15fr; gap:44px; }
.lp-contact-info{ display:flex; flex-direction:column; gap:18px; }
.lp-contact-item{ display:flex; gap:14px; align-items:flex-start; }
.lp-contact-ico{
  width:42px; height:42px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background: var(--panel-2); border:1px solid var(--border-soft); font-size:18px;
}
.lp-contact-item strong{ display:block; font-size:13.5px; color: var(--text); margin-bottom:3px; }
.lp-contact-item span, .lp-contact-item a{ font-size:12.5px; color: var(--text-dim); text-decoration:none; }

.lp-contact-form{ background: var(--panel); border:1px solid var(--border-soft); border-radius:18px; padding: 30px; display:grid; gap:16px; }
.lp-contact-form .lp-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.lp-field label{ display:block; font-size:11.5px; font-weight:700; color: var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:7px; }
.lp-field input, .lp-field textarea{
  width:100%; padding: 11px 14px; border-radius:10px; border:1px solid var(--border); background: var(--panel-2);
  color: var(--text); font-family: var(--font-body); font-size:13.5px; resize:vertical;
}
.lp-field input:focus, .lp-field textarea:focus{ outline:none; border-color: var(--astoetik-cyan); }
.lp-form-msg{ font-size:13px; padding:10px 14px; border-radius:10px; display:none; }
.lp-form-msg.show{ display:block; }
.lp-form-msg.ok{ background: rgba(76,154,76,.12); color: var(--success); border:1px solid rgba(76,154,76,.3); }
.lp-form-msg.err{ background: rgba(193,73,90,.12); color: var(--danger); border:1px solid rgba(193,73,90,.3); }

@media (max-width: 900px){ .lp-contact-wrap{ grid-template-columns: 1fr; } .lp-contact-form .lp-field-row{ grid-template-columns: 1fr; } }

/* ---------------- Footer ---------------- */
.lp-footer{ background: var(--panel-3); border-top: 1px solid var(--border-soft); padding: 50px 28px 24px; }
.lp-footer-inner{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:36px; }
.lp-footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.lp-footer-brand img{ width:38px; height:38px; border-radius:50%; background:#fff; padding:4px; }
.lp-footer-brand strong{ font-family: var(--font-display); color: var(--text); }
.lp-footer p{ font-size:12.5px; color: var(--text-dim); line-height:1.7; }
.lp-footer h4{ font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color: var(--muted); margin: 0 0 14px; }
.lp-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.lp-footer ul a{ color: var(--text-dim); text-decoration:none; font-size:13px; }
.lp-footer ul a:hover{ color: var(--astoetik-cyan); }
.lp-footer-bottom{ max-width:1180px; margin: 34px auto 0; padding-top:20px; border-top:1px solid var(--border-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:11.5px; color: var(--muted); }
@media (max-width: 780px){ .lp-footer-inner{ grid-template-columns: 1fr 1fr; } }

/* ---------------- Pilih Perangkat (kartu interaktif alat 1 & 2) ---------------- */
.lp-devices-wrap{ display:flex; align-items:center; justify-content:center; gap:0; max-width:900px; margin:0 auto; flex-wrap:wrap; }
.lp-device-card{
  position:relative; flex:1 1 300px; max-width:340px; text-decoration:none;
  background: var(--panel); border:1px solid var(--border-soft); border-radius:20px; padding: 30px 26px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display:flex; flex-direction:column; align-items:flex-start;
}
.lp-device-card:hover{ transform: translateY(-8px); box-shadow: 0 24px 44px rgba(0,0,0,.18); border-color: var(--astoetik-cyan); }
.lp-device-status{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color: var(--success);
  background: rgba(76,154,76,.12); border:1px solid rgba(76,154,76,.3); padding:4px 10px; border-radius:999px; margin-bottom:18px;
}
.lp-device-dot{ width:7px; height:7px; border-radius:50%; background: var(--success); animation: lp-device-blink 1.6s infinite; }
@keyframes lp-device-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.lp-device-ico{
  width:64px; height:64px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--astoetik-cyan), var(--astoetik-teal-deep)); color:#fff; margin-bottom:18px;
  transition: transform .25s ease;
}
.lp-device-card:hover .lp-device-ico{ transform: scale(1.08) rotate(-4deg); }
.lp-device-ico svg{ width:32px; height:32px; }
.lp-device-card h3{ font-family: var(--font-display); font-size:18px; color: var(--text); margin:0 0 8px; }
.lp-device-card p{ font-size:13px; color: var(--text-dim); line-height:1.6; margin:0 0 20px; }
.lp-device-btn{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color: var(--astoetik-cyan);
  transition: gap .2s ease;
}
.lp-device-card:hover .lp-device-btn{ gap:10px; }

.lp-devices-connector{
  flex:0 0 90px; height:3px; position:relative; align-self:center; margin: 0 -6px;
  background: repeating-linear-gradient(90deg, var(--astoetik-cyan) 0 10px, transparent 10px 20px);
  opacity:.55;
}
.lp-devices-pulse{
  position:absolute; top:50%; left:0; width:9px; height:9px; border-radius:50%;
  background: var(--astoetik-cyan); transform: translateY(-50%);
  box-shadow: 0 0 0 4px rgba(25,142,175,.25);
  animation: lp-devices-travel 2.6s ease-in-out infinite;
}
@keyframes lp-devices-travel{
  0%{ left:0; opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:1; }
  100%{ left:calc(100% - 9px); opacity:0; }
}
@media (max-width: 780px){
  .lp-devices-wrap{ flex-direction:column; }
  .lp-devices-connector{ width:3px; height:60px; flex:0 0 60px; margin: -6px 0; transform:rotate(0deg);
    background: repeating-linear-gradient(180deg, var(--astoetik-cyan) 0 10px, transparent 10px 20px); }
  .lp-devices-pulse{ top:0; left:50%; transform: translateX(-50%); animation: lp-devices-travel-v 2.6s ease-in-out infinite; }
  @keyframes lp-devices-travel-v{
    0%{ top:0; opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ top:calc(100% - 9px); opacity:0; }
  }
  .lp-device-card{ max-width:100%; }
}

.ic-cyan{ fill: var(--astoetik-cyan); }
.ic-teal{ fill: var(--astoetik-teal-deep); }
.ic-green{ fill: var(--astoetik-green); }
.ic-gold{ fill: var(--astoetik-gold); }
.ic-line{ fill:none; stroke: var(--astoetik-cyan); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ic-line-soft{ fill:none; stroke: var(--border); stroke-width:1.5; }
.ic-panel{ fill: var(--panel); }

.lp-wa-fab{
  position: fixed; bottom: 22px; left: 22px; z-index: 90;
  width:54px; height:54px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:26px; text-decoration:none;
  box-shadow: 0 10px 24px rgba(37,211,102,.4); animation: lp-pulse 2.4s infinite;
}
@keyframes lp-pulse{ 0%,100%{ box-shadow: 0 10px 24px rgba(37,211,102,.4);} 50%{ box-shadow: 0 10px 30px rgba(37,211,102,.7);} }

/* ---------------- Back to top ---------------- */
.lp-top-fab{
  position: fixed; bottom: 22px; right: 22px; z-index: 90; width:46px; height:46px; border-radius:50%;
  background: var(--panel); border:1px solid var(--border); color: var(--text); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:18px; opacity:0; pointer-events:none;
  transition: opacity .25s ease, transform .25s ease;
}
.lp-top-fab.show{ opacity:1; pointer-events:auto; }
.lp-top-fab:hover{ transform: translateY(-3px); }