
:root{
  --gold:#d4af37;
  --gold-soft:#e8d9a8;
  --black:#0b0b0b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--black);color:var(--gold);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;line-height:1.65}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;border-bottom:1px solid rgba(212,175,55,.25);position:sticky;top:0;background:rgba(11,11,11,.92);backdrop-filter:saturate(180%) blur(6px);z-index:10}
.nav{display:flex;gap:16px}
.nav a{padding:10px 14px;border-radius:999px;border:1px solid transparent}
.nav a.cta{border-color:rgba(212,175,55,.6)}
.nav a:hover{background:rgba(212,175,55,.08)}
.logo{width:120px;height:auto;display:block;margin:0 auto 10px;filter:drop-shadow(0 4px 18px rgba(212,175,55,.35))}
.hero{padding:64px 24px 40px;border-bottom:1px solid rgba(212,175,55,.2)}
.title{font-size:40px;font-weight:900;text-align:center;margin:0 0 6px}
.subtitle{font-size:18px;color:var(--gold-soft);text-align:center;margin:0 auto 26px;max-width:820px}
.center{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 18px;border:1px solid rgba(212,175,55,.6);border-radius:999px;color:var(--gold)}
.btn:hover{background:rgba(212,175,55,.08)}
.section{padding:36px 24px;border-bottom:1px solid rgba(212,175,55,.2)}
.section h2{margin:0 0 10px;font-size:26px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{border:1px solid rgba(212,175,55,.25);border-radius:16px;padding:18px;background:linear-gradient(180deg,rgba(212,175,55,.05),rgba(11,11,11,.7))}
.badge{display:inline-block;padding:6px 10px;border:1px solid rgba(212,175,55,.45);border-radius:999px;font-size:12px;margin-bottom:10px}
.prices table{width:100%;border-collapse:collapse}
.prices th,.prices td{padding:12px;border-bottom:1px solid rgba(212,175,55,.2);text-align:left}
.prices th{font-weight:800}
.footer{padding:28px 24px;text-align:center;color:var(--gold-soft)}
.whatsapp-fab{position:fixed;right:18px;bottom:210px;padding:14px 18px;border-radius:999px;background:linear-gradient(145deg,#ffd700,#b8860b);color:#111;font-weight:800;border:1px solid rgba(212,175,55,.7);box-shadow:0 8px 20px rgba(212,175,55,.35);z-index:9999}
.whatsapp-fab:hover{filter:brightness(1.05)}
input,textarea{width:100%;padding:12px;border-radius:12px;border:1px solid rgba(212,175,55,.35);background:#121212;color:var(--gold)}
.small{font-size:13px;color:var(--gold-soft)}


/* === Injected by Assistant === */

/* === Payment Strip (fixed style, black & gold theme) === */
.payment-strip{
  width:100%;
  background:#0a0a0a;
  padding:22px 16px;
  box-sizing:border-box;
  border-top:1px solid rgba(255,215,0,0.25);
  border-bottom:1px solid rgba(255,215,0,0.12);
 padding-bottom:calc(160px + env(safe-area-inset-bottom, 0px));}
.payment-strip .wrap{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.payment-strip .brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border:1px solid rgba(255,215,0,0.35);
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,215,0,0.1), rgba(255,215,0,0.02));
  transition:transform .18s ease;
}
.payment-strip .brand img{
  height:28px;
  width:auto;
  display:block;
  filter: none; /* keep original logo look */
}
@media (max-width:520px){
  .payment-strip .brand img{ height:24px; }
}

/* === Floating Phone Button (gold, above WhatsApp) === */
.floating-phone{
  position:fixed;
  right:18px;
  bottom:270px; /* above usual WhatsApp btn at ~20-30px */
  z-index:9999;
  width:56px; height:56px;
  background:linear-gradient(180deg,#FFD700,#B8860B);
  color:#111;
  border-radius:50%;
  box-shadow:0 8px 22px rgba(0,0,0,0.35), inset 0 2px 3px rgba(255,255,255,0.35);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  border:1px solid rgba(255,215,0,0.6);
}
.floating-phone svg{ width:28px; height:28px; }
.floating-phone:active{ transform:translateY(1px); }

/* === 3D Gold Text Effect for "Taxi Geffen" === */
.gold-3d{
  position:relative;
  color:#FFD700;
  background:linear-gradient(180deg,#FFF5B7 0%, #FFD700 45%, #B8860B 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:
     0 1px 0 rgba(255,255,255,0.25),
     0 2px 0 rgba(184,134,11,0.35),
     0 3px 0 rgba(184,134,11,0.25),
     0 4px 8px rgba(0,0,0,0.35);
}
.gold-3d.bold{ font-weight:800; letter-spacing:0.4px; }


/* === Assistant: Payment grid & FABs (gold theme) === */
.payment-strip{background:#000;padding:24px 16px;border-top:1px solid rgba(212,175,55,.25) padding-bottom:calc(160px + env(safe-area-inset-bottom, 0px));}
.payment-strip .pay-title{color:var(--gold);font-weight:700;margin:0 auto 12px;max-width:1100px}
.payment-strip .pay-grid{display:grid;grid-template-columns:repeat(3,120px);grid-auto-rows:60px;gap:16px;justify-content:center;align-items:center margin-bottom:120px;}
.payment-strip .pay-grid img{max-width:120px;max-height:36px;object-fit:contain;filter:drop-shadow(0 0 0 rgba(0,0,0,0));}

.fab-stack{position:fixed;right:18px;bottom:0px;display:flex;flex-direction:column;gap:10px;z-index:999}
.fab{display:flex;align-items:center;gap:10px;background:linear-gradient(145deg,#d4af37,#c9a235);color:#111;font-weight:700;border-radius:999px;padding:10px 14px;box-shadow:0 6px 18px rgba(212,175,55,.25);text-decoration:none}
.fab:hover{transform:translateY(-1px)}
.fab-ico{font-size:18px;line-height:1}
.fab-text{font-size:14px;line-height:1}
.fab-wa{background:linear-gradient(145deg,#d9bf54,#c19b2f)}
.fab-call{background:linear-gradient(145deg,#e0c766,#caa642)}
@media (max-width:480px){
  .payment-strip .pay-grid{grid-template-columns:repeat(3,1fr); margin-bottom:120px;}
  .fab-text{display:none} /* keep compact on phones */
}


/* === Elegant inline payments under Zakelijke transfers === */
.payment-inline{max-width:1100px;margin:18px auto 0;padding:0 12px}
.payment-inline .pay-title{color:var(--gold);font-weight:800;letter-spacing:.3px;margin:0 0 10px;font-size:18px}
.payment-inline .pay-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,max-content));
  gap:14px;
  justify-content:center;
  align-items:center;
}
.payment-inline .tg-pay-btn{
  display:flex;align-items:center;justify-content:center;
  height:60px;min-width:120px;padding:10px 14px;border-radius:14px;
  background:linear-gradient(180deg,rgba(212,175,55,.08),rgba(0,0,0,.88));
  border:1px solid rgba(212,175,55,.35);
  box-shadow:0 6px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.payment-inline .tg-pay-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1)}
.payment-inline .tg-pay-frame{display:flex;align-items:center;justify-content:center;gap:8px}
.payment-inline .tg-pay-text{color:var(--gold);font-weight:800;letter-spacing:.5px}
@media (max-width:480px){
  .payment-inline .pay-grid{grid-template-columns:repeat(2,1fr)}
  .payment-inline .tg-pay-btn{min-width:0}
}
