:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#0a0a0a;
  --card-bg:#141414;
  --card-border:#2a2a2a;
  --text:#ffffff;
  --gold:#ffd700;
  --gold-hover:#ffea70;
  --sub:#d8b4fe;
}
html{scroll-padding-top:calc(64px + env(safe-area-inset-top,0px));scroll-behavior:smooth;}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;}
body{
  font-family:Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  text-align:center;
  line-height:1.6;
  overflow-x:hidden;
}

#progress{position:fixed;top:0;left:0;height:3px;background:var(--gold);width:0%;z-index:999;transition:width .1s;box-shadow:0 0 8px var(--gold);}

nav{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:900;
  background:rgba(10,10,10,.85);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--card-border);
  display:flex;justify-content:center;gap:22px;flex-wrap:wrap;
  padding:14px 10px;
}
nav a{color:#ccc;text-decoration:none;font-size:13px;letter-spacing:1px;font-weight:bold;transition:.25s}
nav a:hover, nav a.active{color:var(--gold)}

.hero{
  position:relative;
  min-height:95vh;
  padding:90px 20px 60px;
  background:
    linear-gradient(rgba(0,0,0,.6), rgba(10,10,10,.85)),
    url('kwamepapa.jpg') center/cover no-repeat,
    radial-gradient(circle at 50% 30%, #2a2110 0%, #0a0a0a 70%);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  overflow:hidden;
}
#notes{position:absolute;inset:0;pointer-events:none;}
.note{position:absolute;bottom:-40px;color:var(--gold);opacity:.35;font-size:22px;animation:floatUp linear infinite;}
@keyframes floatUp{
  0%{transform:translateY(0) rotate(0deg);opacity:0;}
  10%{opacity:.4;}
  90%{opacity:.3;}
  100%{transform:translateY(-110vh) rotate(360deg);opacity:0;}
}

.glow{font-size:clamp(34px,8vw,56px);letter-spacing:4px;color:var(--gold);text-shadow:0 0 25px rgba(255,215,0,.7);animation:glowPulse 2.5s infinite;position:relative;z-index:2}
@keyframes glowPulse{0%,100%{text-shadow:0 0 25px rgba(255,215,0,.7)}50%{text-shadow:0 0 45px rgba(255,215,0,1)}}
.sub{color:var(--sub);margin:12px 0 5px;font-size:16px;letter-spacing:2.5px;font-weight:bold;position:relative;z-index:2}
.tag{font-family:cursive;color:var(--gold);font-size:32px;margin:10px 0;min-height:40px;position:relative;z-index:2}
.tag::after{content:"|";animation:blink 1s step-end infinite;}
@keyframes blink{50%{opacity:0}}
.intro{max-width:520px;opacity:.9;margin:15px auto;font-size:15px;position:relative;z-index:2}

.buttons{margin-top:20px;position:relative;z-index:2}
.btn{display:inline-block;margin:8px;padding:14px 28px;border-radius:30px;text-decoration:none;font-weight:bold;transition:.3s;cursor:pointer;border:none;font-size:15px}
.gold-btn{background:var(--gold);color:#000}
.gold-btn:hover{background:var(--gold-hover);transform:scale(1.05)}
.outline{background:transparent;color:#fff;border:2px solid #fff}
.outline:hover{background:#fff;color:#000}

.wrap{max-width:850px;margin:auto;padding:30px 20px}
h2.section-title{color:var(--gold);font-size:22px;letter-spacing:2px;margin:50px 0 20px;text-align:center}

.card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;padding:24px;margin:18px 0;text-align:left;transition:.6s;opacity:0;transform:translateY(20px);}
.card.visible{opacity:1;transform:translateY(0);}
.card:hover{border-color:var(--gold);transform:translateY(-3px)}
.card h3{color:var(--gold);margin-bottom:10px}
.card a{color:var(--gold);text-decoration:none}

.price-list{list-style:none}
.price-list li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--card-border);font-size:15px}
.price-list li:last-child{border-bottom:none}
.price-list span.amount{color:var(--gold);font-weight:bold}

.rentals{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:8px}
.rent-item{background:#141414;border:2px solid var(--card-border);border-radius:14px;padding:20px 12px;transition:.25s;cursor:pointer;}
.rent-item:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 0 16px rgba(255,215,0,.25)}
.rent-item .name{font-weight:bold;font-size:15px;margin-bottom:6px}
.rent-item .price{color:var(--gold);font-size:20px;font-weight:bold}
.rent-item .unit{font-size:11px;opacity:.6}
.rent-item .rent-btn{margin-top:12px;display:inline-block;background:var(--gold);color:#000;padding:8px 14px;border-radius:20px;font-size:12px;font-weight:bold;text-decoration:none}

#toTop{
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
  width:44px;height:44px;border-radius:50%;background:var(--gold);color:#000;
  border:none;font-size:18px;font-weight:bold;cursor:pointer;opacity:0;pointer-events:none;
  transition:.3s;z-index:800;
}
#toTop.show{opacity:1;pointer-events:auto;}

footer{padding:35px;opacity:.6;font-size:13px;border-top:1px solid #222;margin-top:20px;padding-bottom:calc(35px + env(safe-area-inset-bottom,0px));}
footer .credit{display:block;margin-top:8px;opacity:.85}
footer .credit a{color:var(--gold);text-decoration:none}

/* availability badge */
.badge{
  position:relative;z-index:2;margin-top:16px;display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,215,0,.1);border:1px solid var(--gold);color:var(--gold);
  padding:7px 16px;border-radius:20px;font-size:12px;font-weight:bold;letter-spacing:.5px;
}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:pulseDot 1.5s infinite}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.3}}

/* quote calculator */
.quote-item{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--card-border);cursor:pointer}
.quote-item:last-of-type{border-bottom:none}
.quote-item label{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:14px;flex:1}
.quote-item input[type="checkbox"]{width:18px;height:18px;accent-color:var(--gold);cursor:pointer}
.quote-item .qprice{color:var(--gold);font-weight:bold;font-size:14px}
.quote-total{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:16px;border-top:2px solid var(--gold);font-size:17px;font-weight:bold}
.quote-total .qtotal-amount{color:var(--gold);font-size:24px}
#quoteBtn{width:100%;margin-top:16px;margin-left:0;color:#000 !important}

.testimonial{border-left:3px solid var(--gold);padding:4px 0 4px 16px;margin:16px 0;font-style:italic;opacity:.9;font-size:14px}
.testimonial b{display:block;margin-top:6px;font-style:normal;color:var(--gold);font-size:13px}

.discount-note{display:none;background:rgba(255,215,0,.12);border:1px solid var(--gold);color:var(--gold);font-size:12px;font-weight:bold;padding:8px 12px;border-radius:8px;margin-top:12px;text-align:center}
.discount-note.show{display:block}

#shareBtn{background:transparent;border:1.5px dashed var(--gold);color:var(--gold)}
#shareBtn:hover{background:rgba(255,215,0,.1)}

/* FAQ */
.faq-item{border-bottom:1px solid var(--card-border)}
.faq-item:last-child{border-bottom:none}
.faq-q{padding:16px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:bold;font-size:14px}
.faq-q .plus{color:var(--gold);font-size:20px;transition:.3s}
.faq-item.open .faq-q .plus{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:.3s;font-size:14px;opacity:.85}
.faq-item.open .faq-a{max-height:200px;padding-bottom:16px}

/* floating whatsapp bubble */
#waFloat{
  position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
  width:52px;height:52px;border-radius:50%;background:var(--gold);color:#000;
  display:flex;align-items:center;justify-content:center;font-size:24px;
  box-shadow:0 0 0 0 rgba(255,215,0,.6);animation:waPulse 2s infinite;
  text-decoration:none;z-index:800;
}
@keyframes waPulse{
  0%{box-shadow:0 0 0 0 rgba(255,215,0,.5)}
  70%{box-shadow:0 0 0 14px rgba(255,215,0,0)}
  100%{box-shadow:0 0 0 0 rgba(255,215,0,0)}
}