:root{
  --bg:#070b12;
  --ink:#eaf1ff;
  --muted:#9fb3c8;
  --panel:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.18);
  --soft:rgba(255,255,255,.10);

  --a:#00E7F6;
  --b:#7C4DFF;
  --c:#4CC9F0;
  --d:#A78BFA;
  --e:#16DB93;

  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --glass: blur(12px);
}

html,body{height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
  color:var(--ink);
  background:
    radial-gradient(circle at 15% 25%, rgba(99, 102, 241, 0.18), transparent 60%),
    radial-gradient(circle at 85% 75%, rgba(20, 184, 166, 0.18), transparent 60%),
    #1e293b;
  overflow-x:hidden;
}

.p-panel{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius:20px;
  box-shadow: var(--shadow);
  backdrop-filter: var(--glass);
}
.p-btn{
  border:1px solid var(--line);
  border-radius:14px;
  padding:.75rem 1rem;
  font-weight:800;
  color:var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.p-btn.primary{
  color:#08111b;
  background: linear-gradient(90deg, var(--a), var(--b));
}
.p-btn:hover{ transform: translateY(-2px); filter: brightness(1.06); box-shadow:0 12px 24px rgba(0,0,0,.25) }

.navbar-wrap{position:fixed;top:16px;left:0;right:0;z-index:1030}
.navbar-inner{max-width:1200px;margin:0 auto;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.navbar-inner.p-panel{box-shadow:0 12px 30px rgba(0,0,0,.35)}
.nav-link{
  border:1px solid var(--line);
  border-radius:999px;
  padding:.45rem .9rem;
  background: rgba(255,255,255,.06);
  color:var(--ink); font-weight:800; text-decoration:none;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.nav-link:hover{
  background: linear-gradient(90deg, rgba(0,231,246,.35), rgba(167,139,250,.35));
  transform: translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.3)
}

.hero{padding-top:120px}
.hero > .wrap {max-width:1200px; margin:0 auto; padding:96px 20px;display:grid; align-items:center;grid-template-columns: 1.1fr .9fr;gap:28px;}
@media (max-width:992px){.hero .wrap{grid-template-columns:1fr}}
.hero .tag{
  display:inline-flex;align-items:center;gap:.55rem;
  border:1px solid var(--line); border-radius:999px; padding:.35rem .8rem;
  font-weight:900; color:var(--ink);
  background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  backdrop-filter: var(--glass);
  box-shadow: var(--shadow);
}
.dot{width:10px;height:10px;border-radius:999px;background:linear-gradient(90deg,var(--a),var(--b))}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.6rem);font-weight:1000;line-height:1.25;margin:12px 0;background:linear-gradient(90deg,var(--a),var(--b));-webkit-background-clip:text;color:transparent}
.lead{color:var(--muted)}
.hero-brand-title{ font-size:1rem; font-weight:400; margin-bottom:.5rem; }
.hero-main-title{ font-size:2.75rem; font-weight:700; line-height:1.2; margin-bottom:1rem; }
.hero-ill img{ width:100%; height:auto; }

.video-frame{
  aspect-ratio:16/9;border-radius:22px;overflow:hidden;border:1px solid var(--line);
  box-shadow: var(--shadow); background:#000; position:relative;
}
.video-frame::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(50% 80% at 80% 0%, rgba(124,77,255,.25), transparent 60%);
  pointer-events:none;
}

.stats{max-width:1200px;margin:0 auto 36px;padding:0 20px}
.stats .card{padding:18px;text-align:center}
.stats .h2{font-weight:1000;background:linear-gradient(90deg,var(--a),var(--b));-webkit-background-clip:text;color:transparent}

.section{padding:72px 0}
.section h2{font-weight:1000;text-align:center;margin-bottom:18px;background:linear-gradient(90deg,var(--a),var(--b));-webkit-background-clip:text;color:transparent}

.why .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:992px){.why .grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:576px){.why .grid{grid-template-columns:1fr}}
.why .item{padding:18px; position:relative; overflow:hidden}
.why .item::after{
  content:""; position:absolute; inset:-1px;
  background: radial-gradient(120% 80% at 0% 0%, rgba(0,231,246,.07), transparent 60%),
              radial-gradient(120% 80% at 100% 100%, rgba(167,139,250,.07), transparent 60%);
  pointer-events:none;
}
.icon-pill{
  width:62px;height:62px;border-radius:16px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid var(--line);
  box-shadow: var(--shadow);
}
.why .item h5{
  color:#ffffff;
  background:none;
  -webkit-background-clip:initial;
  -webkit-text-fill-color:initial;
}

.about .grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
@media (max-width:992px){.about .grid{grid-template-columns:1fr}}
.about img{border:1px solid var(--line);border-radius:20px;box-shadow: var(--shadow)}

#paket{position:relative;color:var(--ink)}
#paket .container{max-width:1200px;margin:auto;padding:72px 20px;position:relative;z-index:1}
#paket .sticker{position:absolute;width:160px;aspect-ratio:1/1;border:1px solid var(--line);border-radius:22px;opacity:.85;filter:hue-rotate(8deg)}
#paket .s1{top:-30px;left:-20px;background:linear-gradient(135deg, rgba(0,231,246,.4), rgba(124,77,255,.35)); animation: floaty 9s ease-in-out infinite}
#paket .s2{bottom:-40px;right:-30px;background:linear-gradient(135deg, rgba(124,77,255,.35), rgba(22,219,147,.35)); animation: floaty 10s ease-in-out infinite reverse}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(10px) rotate(6deg)}}

#paket .tag{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--line);border-radius:999px;padding:.35rem .8rem;font-weight:900;
  background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  box-shadow: var(--shadow);
}
#paket h2{font-size:clamp(2.2rem,4.2vw,3.4rem);font-weight:1000;margin:14px 0 6px;background:linear-gradient(90deg,var(--a),var(--b));-webkit-background-clip:text;color:transparent}
#paket .sub{color:var(--muted);max-width:780px;margin:0 auto 28px;text-align:center}

#paket .wrap{display:grid;grid-template-columns:280px 1fr;gap:24px;margin-top:28px}
@media (max-width:960px){#paket .wrap{grid-template-columns:1fr}}

#paket .side{
  position:sticky;top:16px;background:var(--panel);border:1px solid var(--line);
  border-radius:20px;padding:18px;box-shadow: var(--shadow); backdrop-filter: var(--glass);
}
#paket .side h3{margin:2px 0 12px;font-size:1.05rem;color:var(--ink);opacity:.9}

#paket .search{
  display:flex;align-items:center;gap:.6rem;border:1px solid var(--line);
  border-radius:14px;padding:.55rem .7rem;background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  transition: box-shadow .2s ease, border-color .2s ease;
}
#paket .search:focus-within{ box-shadow:0 0 0 3px rgba(0,231,246,.25); border-color: rgba(0,231,246,.45) }
#paket .search input{border:0;outline:0;background:transparent;flex:1;font-weight:700;color:var(--ink)}

#paket .chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
#paket .chip{
  border:1px solid var(--line); background: rgba(255,255,255,.06);
  border-radius:999px;padding:.45rem .75rem;font-weight:900;cursor:pointer;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.06);
  color:var(--ink); transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
#paket .chip:hover{ transform: translateY(-2px); background: rgba(255,255,255,.12) }
#paket .chip[aria-pressed="true"]{
  background: linear-gradient(90deg, rgba(0,231,246,.35), rgba(124,77,255,.35));
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}

#paket .seg{
  display:flex;background: rgba(255,255,255,.06);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
#paket .seg button{
  flex:1;padding:.6rem .8rem;font-weight:900;cursor:pointer;border:0;background:transparent;color:var(--ink);
  transition: background .2s ease, color .2s ease;
}
#paket .seg button.active{ background:linear-gradient(90deg, var(--a), var(--b)); color:#08111b }

#paket .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
#paket .card{
  background: var(--panel); border:1px solid var(--line); border-radius:22px; padding:18px;
  box-shadow: var(--shadow); position:relative; overflow:hidden; transform: translateY(0);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
}
#paket .card::before{
  content:""; position:absolute; inset:-2px;
  background: radial-gradient(70% 50% at 0% 0%, rgba(0,231,246,.10), transparent 60%),
              radial-gradient(70% 50% at 100% 100%, rgba(124,77,255,.10), transparent 60%);
  pointer-events:none; opacity:.7;
}
#paket .card:hover{ transform: translateY(-6px); box-shadow:0 16px 36px rgba(0,0,0,.45); border-color:rgba(0,231,246,.4) }

#paket .ribbon{
  position:absolute; top:10px; left:10px; padding:.25rem .6rem; border-radius:999px;
  background: linear-gradient(90deg, var(--a), var(--b)); color:#08111b; font-weight:1000; font-size:.8rem;
  border:1px solid var(--line);
}
#paket .ribbon::after{
  content:""; position:absolute; inset:0; border-radius:999px; mix-blend-mode:screen;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.6) 15%, transparent 30%);
  transform: translateX(-120%); animation: shimmer 2.8s ease-in-out infinite;
}
@keyframes shimmer{ 0%{transform:translateX(-120%)} 60%{transform:translateX(120%)} 100%{transform:translateX(120%)} }

#paket .logo{
  width:72px;height:72px;border:1px solid var(--line);border-radius:16px;display:grid;place-items:center;
  background: rgba(255,255,255,.06); box-shadow: var(--shadow); margin-bottom:10px; overflow:hidden;
}
#paket .logo img{max-width:46px;max-height:46px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}

#paket .name{font-size:1.1rem;font-weight:1000;letter-spacing:.2px}
#paket .cat{font-size:.85rem;color:var(--muted);margin-top:2px}

#paket .price{display:flex;align-items:flex-end;gap:.4rem;margin:12px 0 10px}
#paket .now{font-size:1.85rem;font-weight:1000;
  background:linear-gradient(90deg,var(--a),var(--b));-webkit-background-clip:text;color:transparent}
#paket .per{font-size:.9rem;color:var(--ink);opacity:.9}
#paket .strike{font-size:.95rem;color:var(--muted);text-decoration:line-through;margin-left:auto}

#paket ul{list-style:none;padding-left:0;margin:10px 0 16px;display:flex;flex-wrap:wrap;gap:8px}
#paket li{
  font-size:.85rem;color:var(--ink);
  background: rgba(255,255,255,.08); border:1px solid var(--line); padding:6px 10px; border-radius:999px;
}

#paket .cta{display:flex;gap:10px}
#paket .btn{
  flex:1;border:1px solid var(--line);border-radius:14px;padding:.7rem .9rem;font-weight:1000;cursor:pointer;color:var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  transition: transform .12s ease, filter .15s ease, box-shadow .15s ease;
}
#paket .btn.primary{ background: linear-gradient(90deg, var(--a), var(--b)); color:#08111b }
#paket .btn.ghost{ background: rgba(255,255,255,.06) }
#paket .btn:hover{ transform: translateY(-2px); filter: brightness(1.05); box-shadow:0 12px 20px rgba(0,0,0,.25) }

[data-animate]{opacity:0;transform:translateY(10px);transition:opacity .45s ease, transform .45s ease}
[data-animate].visible{opacity:1;transform:none}

.accordion-button{
  background: rgba(255,255,255,.10)!important; color:var(--ink)!important;
  border:1px solid var(--line)!important; border-radius:12px!important; margin-bottom:8px; font-weight:800
}
.accordion-button:not(.collapsed){ box-shadow:inset 0 0 0 1px rgba(0,231,246,.25) }
.accordion-body{
  background: rgba(255,255,255,.06); color:var(--ink);
  border:1px solid var(--line); border-radius:12px; padding:14px; backdrop-filter: var(--glass);
}

.footer{background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35));border-top:1px solid var(--line)}
.footer a{color:#d7e7ff}

a, .link-primary, .text-primary { color: var(--c) !important; }
a:hover, .link-primary:hover { color: var(--a) !important; text-decoration: none; }

.btn {
  border: 1px solid var(--line);
  border-radius: 14px;
  font-weight: 800;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  color: var(--ink);
  transition: transform .12s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 12px 24px rgba(0,0,0,.25); }
.btn:active { transform: translateY(0); }

.btn-primary, .btn-outline-primary:hover {
  background: linear-gradient(90deg, var(--a), var(--b));
  color: #08111b;
  border-color: var(--line);
}
.btn-outline-primary { background: rgba(255,255,255,.06); color: var(--ink); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,231,246,.35), 0 0 0 6px rgba(124,77,255,.25)!important; }

.form-control, .form-select, .form-check-input, .input-group-text {
  background: rgba(255,255,255,.08);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.form-control:focus, .form-select:focus {
  background: rgba(255,255,255,.12);
  border-color: rgba(0,231,246,.45);
  box-shadow: 0 0 0 3px rgba(0,231,246,.25);
  color: var(--ink);
}
.input-group .btn, .input-group-text { border-radius: 12px; }
.form-check-input:checked {
  background: linear-gradient(90deg, var(--a), var(--b));
  border-color: rgba(0,231,246,.45);
}
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(0,231,246,.25) }
.form-control[type="file"] { padding:.6rem .9rem; }

.card, .modal-content, .dropdown-menu, .toast, .offcanvas, .list-group, .popover {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink);
  backdrop-filter: var(--glass);
  box-shadow: var(--shadow);
}
.card-header, .modal-header, .offcanvas-header, .list-group-item {
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.list-group-item { border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.list-group-item.active { background: linear-gradient(90deg,var(--a),var(--b)); color:#08111b; border-color: var(--line); }

.table { color: var(--ink); border-color: var(--line); }
.table thead th { background: rgba(255,255,255,.10); color: var(--ink); border-bottom: 1px solid var(--line); }
.table tbody tr { background: rgba(255,255,255,.04); border-color: var(--line); }
.table-hover tbody tr:hover { background: rgba(255,255,255,.10); }

.alert {
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255,255,255,.08);
  backdrop-filter: var(--glass);
}
.alert-success { background: linear-gradient(180deg, rgba(22,219,147,.18), rgba(255,255,255,.06)); }
.alert-danger  { background: linear-gradient(180deg, rgba(255, 99, 132,.18), rgba(255,255,255,.06)); }
.alert-warning { background: linear-gradient(180deg, rgba(255,193,7,.18), rgba(255,255,255,.06)); }
.alert-info    { background: linear-gradient(180deg, rgba(0,231,246,.18), rgba(255,255,255,.06)); }

.badge, .btn .badge {
  border: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  color: var(--ink);
  border-radius: 999px;
}

.dropdown-menu { padding: .5rem; }
.dropdown-item { border-radius: 10px; color: var(--ink); }
.dropdown-item:hover { background: rgba(255,255,255,.12); }

.tooltip-inner{
  background: rgba(0,0,0,.6);
  padding:.44rem .6rem;
  border-radius: 10px;
  backdrop-filter: blur(4px);
}
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before{ border-top-color: rgba(0,0,0,.6)!important; }

.modal-content { overflow: hidden; position: relative; }
.modal-content::after {
  content: ""; position: absolute; inset: -1px;
  background:
    radial-gradient(60% 40% at 0% 0%, rgba(0,231,246,.10), transparent 60%),
    radial-gradient(60% 40% at 100% 100%, rgba(124,77,255,.10), transparent 60%);
  pointer-events: none;
}

.nav-tabs .nav-link {
  border:1px solid var(--line);
  color: var(--ink);
  background: rgba(255,255,255,.06);
  margin-right: 6px;
  border-radius: 12px 12px 0 0;
}
.nav-tabs .nav-link.active {
  background: linear-gradient(90deg,var(--a),var(--b));
  color:#08111b;
  border-color: var(--line);
}
.nav-pills .nav-link {
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--ink);
  border-radius: 999px;
}
.nav-pills .nav-link.active {
  background: linear-gradient(90deg,var(--a),var(--b));
  color:#08111b;
}

.breadcrumb {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding:.5rem .75rem;
}

.page-link {
  border:1px solid var(--line)!important;
  color: var(--ink);
  background: rgba(255,255,255,.06);
  border-radius: 12px!important;
}
.page-item.active .page-link {
  background: linear-gradient(90deg,var(--a),var(--b));
  color:#08111b; border-color: var(--line) !important;
}

.progress {
  background: rgba(255,255,255,.08);
  border: 1px solid var(--line);
  border-radius: 999px;
  height: 10px;
}
.progress-bar { background: linear-gradient(90deg,var(--a),var(--b)); }

.offcanvas { color: var(--ink); }
.offcanvas-header { border-bottom: 1px solid var(--line); }
.toast { border-radius: 14px; }
.toast-header { background: rgba(255,255,255,.06); border-bottom: 1px solid var(--line); }

.shadow-ab { box-shadow: var(--shadow)!important; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,.35); }

.btn.primary, .p-btn.primary, .btn-primary { position:relative; overflow:hidden; }
.btn.primary::before, .p-btn.primary::before, .btn-primary::before{
  content:""; position:absolute; inset:-2px; pointer-events:none;
  background: radial-gradient(130px 130px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.28), transparent 45%);
  opacity:.0; transition:opacity .25s ease;
}
.btn.primary:hover::before, .p-btn.primary:hover::before, .btn-primary:hover::before{ opacity:.9; }

.modal-title { color: #fff !important; }
.p-btn.primary { color: #fff !important; }

#typing-text {
  font-weight: 700;
  background: linear-gradient(90deg, var(--a), var(--b));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cursor { opacity: .9; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0 } }

#paket .per { color: #ffffff !important; }
#paket .btn.primary,
#paket .p-btn.primary,
#paket .btn-primary { background: linear-gradient(90deg, var(--a), var(--b)); color: #ffffff !important; }
#paket .btn.primary:hover,
#paket .p-btn.primary:hover,
#paket .btn-primary:hover { color: #ffffff !important; }

.nav-link { color: #ffffff !important; }
.nav-link:hover { color: #ffffff !important; }
.hero .p-btn { color: #ffffff !important; }
.navbar-inner .nav-link,
.navbar-inner .nav-link:hover,
.navbar-inner .nav-link:focus,
.navbar-inner .nav-link:active,
#mnav .nav-link { color: #ffffff !important; }
.navbar-inner .nav-link i { color: #ffffff !important; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .p-panel, .card, .modal-content, .dropdown-menu, .toast, .offcanvas,
  .list-group, .popover, .accordion-body {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
@media (max-width: 768px) {
  .p-panel, .card, .modal-content, .dropdown-menu, .toast, .offcanvas,
  .list-group, .popover, .accordion-body {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
  }
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .p-panel, .card, .modal-content, .dropdown-menu, .toast, .offcanvas,
  .list-group, .popover, .accordion-body {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
section, .card, .p-panel { content-visibility: auto; contain-intrinsic-size: 600px 400px; }

:root { --muted: #ffffff; }
.text-muted { color: #ffffff !important; }

.ab-live-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:#0d1224;}
canvas#ab-glow,canvas#ab-fluid{position:absolute;inset:0;mix-blend-mode:screen;}

#floating-wa{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 10000;
  width: 64px; height: 64px;
  border-radius: 18px;

  background: linear-gradient(145deg, rgba(37,211,102,0.15), rgba(25,180,82,0.10));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(37,211,102,0.25);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; color:#EAEFF7;
  transition: all .3s ease;
  overflow:hidden;
}

#floating-wa .wa-glow{
  position:absolute;
  inset:0;
  border-radius:18px;
  background: radial-gradient(circle at center, rgba(37,211,102,0.35), transparent 70%);
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}

#floating-wa::after{
  content:"";
  position:absolute; inset:-1px;
  border-radius:18px;
  box-shadow: 0 0 10px rgba(37,211,102,0.15);
  pointer-events:none;
}

#floating-wa .mdi-whatsapp{
  font-size: 30px;
  line-height: 1;
  color: #25D366;
  transition: transform .3s ease, color .3s ease;
}

#floating-wa:hover .mdi-whatsapp{
  transform: scale(1.12);
  color:#32ff89;
}
#floating-wa:hover{
  background: linear-gradient(145deg, rgba(37,211,102,0.25), rgba(25,180,82,0.15));
  box-shadow:
    0 0 20px rgba(37,211,102,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.1);
}
#floating-wa:hover .wa-glow{
  opacity:1;
}
#floating-wa:active{
  transform: scale(0.96);
}

@media (max-width:576px){
  #floating-wa{ right:16px; bottom:16px; width:60px; height:60px; border-radius:16px; }
  #floating-wa .mdi-whatsapp{ font-size:26px; }
}

@media (prefers-reduced-motion: reduce){
  #floating-wa{ transition:none; }
  #floating-wa .mdi-whatsapp{ transition:none; }
}