/* W.K. Tinting — Royal Tint Experience (goud op zwart) */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:auto; }
body { background:#050505; color:#EDEDED; font-family:Georgia, 'Times New Roman', serif; }
a { color:#F2D14B; text-decoration:none; }

/* ---------- act copy (scroll-motion) ---------- */
.act {
  position: fixed; z-index: 1; left: 32px; bottom: 120px; max-width: 480px;
  opacity: 0; visibility: hidden; pointer-events: none;
  will-change: opacity, transform;
}
.act h2 { font-size: clamp(26px, 3.4vw, 42px); font-weight: normal; letter-spacing: 1px; }
.act-kicker { font-family:Arial,sans-serif; font-size:10px; letter-spacing:4px; color:#F2D14B; text-transform:uppercase; margin-bottom:12px; }
.act-sub { font-family:Arial,sans-serif; font-size:13px; color:#999; margin-top:12px; line-height:1.6; }
#act1 { bottom: 120px; }
#act2 { right: 32px; left: auto; text-align: right; }
#act3 { bottom: 160px; }

/* ---------- 3D scene ---------- */
#stage { position:fixed; inset:0; z-index:0; }
#stage canvas { display:block; }
.spacer { height:300vh; }
.hud { position:fixed; top:24px; left:32px; z-index:5; pointer-events:none; }
.hud-logo { width:120px; opacity:.95; filter:drop-shadow(0 2px 12px rgba(242,209,75,.25)); }
.kicker { font-family:Arial, sans-serif; font-size:10px; letter-spacing:4px; color:#F2D14B; text-transform:uppercase; margin-top:10px; }
.hud-title { font-size:clamp(26px, 4vw, 42px); font-weight:normal; letter-spacing:2px; margin-top:4px; }
.scrollhint { position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:5;
  font-family:Arial,sans-serif; font-size:10px; letter-spacing:4px; color:#8a8a8a; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px; }
.scrollhint .line { width:1px; height:34px; background:linear-gradient(#F2D14B, transparent); animation:pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity:.3; transform:scaleY(.6);} 50% { opacity:1; transform:scaleY(1);} }

/* ---------- configurator panel ---------- */
#panel {
  position:fixed; right:32px; bottom:32px; z-index:6; width:300px;
  background:rgba(8,8,8,.88); border:1px solid rgba(242,209,75,.4);
  padding:20px 22px 18px; backdrop-filter:blur(10px);
  opacity:0; transform:translateY(24px); pointer-events:none;
  transition:opacity .5s, transform .5s;
}
#panel.visible { opacity:1; transform:none; pointer-events:auto; }
#panel h2 { font-size:13px; letter-spacing:3px; text-transform:uppercase; color:#F2D14B; font-weight:normal; margin-bottom:14px; cursor:pointer; }
#panel.mini { width:210px; padding:14px 16px; bottom:20px; right:20px; }
#panel.mini .ctl, #panel.mini .types, #panel.mini .note, #panel.mini .panel-cta { display:none; }
#panel.mini #price { margin-top:0; padding-top:0; border-top:none; display:flex; align-items:baseline; gap:10px; }
#panel.mini #price .val { font-size:20px; }
#panel.mini.open .ctl, #panel.mini.open .types, #panel.mini.open .note, #panel.mini.open .panel-cta { display:block; }
#panel.mini.open { width:300px; padding:20px 22px 18px; }
#panel.mini.open #price { display:block; margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.12); }
#panel.mini.open #price .val { font-size:30px; }
.hud { transition:opacity .4s; }
.types { display:grid; grid-template-columns:repeat(3, 1fr); gap:5px; margin-bottom:16px; }
.types button, .presets button, .addons button {
  background:none; border:1px solid rgba(255,255,255,.16); color:#bbb;
  font-family:Arial,sans-serif; font-size:10px; letter-spacing:1px; padding:6px 0; cursor:pointer;
  text-transform:uppercase;
}
.types button.active, .presets button:active, .addons button.active,
.types button:hover, .addons button:hover { border-color:#F2D14B; color:#F2D14B; }
.types button:disabled { opacity:.4; cursor:not-allowed; border-color:rgba(255,255,255,.08); color:#666; }
.ctl { margin-bottom:12px; }
.ctl label { display:flex; justify-content:space-between; font-family:Arial,sans-serif; font-size:10px; letter-spacing:1px; color:#999; text-transform:uppercase; margin-bottom:5px; }
.ctl label b { color:#fff; font-weight:normal; }
input[type=range] { width:100%; accent-color:#F2D14B; height:18px; }
.presets { display:flex; gap:5px; margin-top:4px; }
.addons button { flex:1; }
.addons button.active { background:rgba(242,209,75,.12); }
#price { margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.12); font-family:Arial,sans-serif; }
#price .lbl { font-size:10px; letter-spacing:2px; color:#888; text-transform:uppercase; }
#price .lbl span { color:#F2D14B; }
#price .val { font-size:30px; color:#F2D14B; font-family:Georgia,serif; }
#price .note { font-size:9px; color:#666; margin-top:2px; }
.panel-cta { display:block; margin-top:14px; text-align:center; border:1px solid #F2D14B; padding:9px 0;
  font-family:Arial,sans-serif; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#F2D14B; }
.panel-cta:hover { background:#F2D14B; color:#050505; }
#fps { position:fixed; bottom:6px; left:8px; z-index:6; font:10px monospace; color:#444; }

/* ---------- content ---------- */
#content { position:relative; z-index:2; background:#050505; border-top:1px solid rgba(242,209,75,.25); }
section { max-width:1100px; margin:0 auto; padding:90px 32px; }
section .kicker { font-family:Arial,sans-serif; font-size:10px; letter-spacing:4px; color:#F2D14B; text-transform:uppercase; margin-bottom:12px; }
section h2 { font-size:clamp(26px,3.4vw,40px); font-weight:normal; letter-spacing:1px; margin-bottom:40px; }
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s, transform .7s; }
.reveal.in { opacity:1; transform:none; }

.intro { padding-top:110px; }
.intro h2 { max-width:720px; }
.whygrid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.whygrid div { border:1px solid rgba(242,209,75,.22); padding:26px; background:#0a0a0a; }
.whygrid h3 { color:#F2D14B; font-weight:normal; margin-bottom:10px; letter-spacing:1px; }
.whygrid p { font-size:14px; color:#aaa; line-height:1.6; }

.cards { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.cards article { border:1px solid rgba(255,255,255,.08); padding:28px; background:#0a0a0a; transition:border-color .3s; }
.cards article:hover { border-color:rgba(242,209,75,.45); }
.cards h3 { color:#fff; font-weight:normal; margin-bottom:10px; }
.cards p { font-size:14px; color:#999; line-height:1.65; }

.tables { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.tablewrap { border:1px solid rgba(255,255,255,.08); padding:24px; background:#0a0a0a; }
.tablewrap h3 { color:#F2D14B; font-weight:normal; letter-spacing:1px; margin-bottom:14px; }
table { width:100%; border-collapse:collapse; font-family:Arial,sans-serif; font-size:13px; }
td { padding:8px 0; border-bottom:1px solid rgba(255,255,255,.07); color:#bbb; }
td:last-child { text-align:right; color:#F2D14B; }
tr:last-child td { border-bottom:none; }

.gal { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.gal img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; filter:saturate(.9);
  transition:transform .5s, filter .5s; }
.gal img:hover { transform:scale(1.03); filter:saturate(1.1); }

.revs { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.revs blockquote { border:1px solid rgba(255,255,255,.08); padding:22px; background:#0a0a0a;
  font-size:13px; color:#aaa; line-height:1.65; font-style:italic; }
.revs cite { display:block; margin-top:12px; font-style:normal; color:#F2D14B; font-family:Arial,sans-serif; font-size:11px; letter-spacing:1px; }
.score { color:#F2D14B; }
.glink { display:inline-block; margin-top:24px; font-family:Arial,sans-serif; font-size:12px; letter-spacing:1px; }

.contactgrid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:36px; }
.contactgrid h3 { color:#F2D14B; font-size:11px; letter-spacing:2px; text-transform:uppercase; font-weight:normal; font-family:Arial,sans-serif; margin-bottom:8px; }
.contactgrid p, .contactgrid a { font-size:14px; color:#ccc; }
.contactgrid a:hover { color:#F2D14B; }
.bigcta { display:inline-block; border:1px solid #F2D14B; color:#F2D14B; padding:14px 46px;
  font-family:Arial,sans-serif; font-size:12px; letter-spacing:3px; text-transform:uppercase; }
.bigcta:hover { background:#F2D14B; color:#050505; }
.cta-row { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:44px; }
.ghostcta { display:inline-block; border:1px solid rgba(255,255,255,.2); color:#bbb; padding:14px 32px;
  font-family:Arial,sans-serif; font-size:12px; letter-spacing:2px; text-transform:uppercase; }
.ghostcta:hover { border-color:#F2D14B; color:#F2D14B; }
@media (max-width: 760px) {
  .act { left:16px; right:16px; bottom:90px; max-width:none; }
  #act2 { right:16px; text-align:left; }
  #act3 { bottom:110px; }
  .cta-row .ghostcta { padding:12px 20px; }
}

footer { border-top:1px solid rgba(242,209,75,.2); padding:40px 32px; text-align:center; }
.foot-logo { width:84px; opacity:.85; margin-bottom:14px; }
footer p { font-family:Arial,sans-serif; font-size:11px; color:#666; letter-spacing:1px; }

/* ---------- mobiel ---------- */
@media (max-width: 760px) {
  .hud { left:16px; top:16px; }
  .hud-logo { width:80px; }
  #panel { right:12px; left:12px; bottom:12px; width:auto; padding:16px; max-height:46vh; overflow-y:auto; }
  #panel.mini { right:12px; left:12px; bottom:12px; }
  #panel.mini.open { max-height:70vh; }
  .types { grid-template-columns:repeat(5,1fr); }
  .types button { padding:6px 2px; font-size:9px; }
  .gal { grid-template-columns:repeat(2,1fr); }
  .revs { grid-template-columns:1fr; }
  .tables { grid-template-columns:1fr; }
  .cards { grid-template-columns:1fr; }
  .whygrid { grid-template-columns:1fr; }
  .contactgrid { grid-template-columns:repeat(2,1fr); }
  section { padding:60px 20px; }
  #fps { display:none; }
}