/* KVK v2 — blueprint redesign, dark/light themes, tools, gantt, enquiry form styles */
:root{--grid:rgba(120,170,230,.07)}
html{scroll-padding-top:80px}
/* ---------- hero (3D) ---------- */
.hero:before{background:linear-gradient(90deg,rgba(4,16,32,.97) 0%,rgba(4,16,32,.78) 42%,rgba(4,16,32,.05) 100%),linear-gradient(var(--grid) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/48px 48px;z-index:1;pointer-events:none}
.hero{background:radial-gradient(ellipse at 72% 45%,#14406d 0%,#071a32 62%)}
.hero .viewer.herov{position:absolute;inset:0;height:100%;background:none;z-index:0}
.hero .viewer.herov canvas{cursor:default;pointer-events:none}
.hero-content{z-index:2}
.hero h1 em{font-style:normal;color:var(--orange)}
.scrollcue{position:absolute;left:50%;bottom:62px;z-index:2;color:#8fb0d0;font:700 10px Manrope;letter-spacing:2px;transform:translateX(-50%);display:none}
.hero .buildtag{position:absolute;right:4%;bottom:70px;z-index:2;font:700 10px/1.5 Manrope;letter-spacing:1.6px;color:#8fb0d0;text-align:right;text-transform:uppercase}
.hero .buildtag b{color:var(--orange)}
/* ---------- nav ---------- */
.themebtn{background:none;border:1px solid var(--line);color:inherit;width:38px;height:38px;border-radius:50%;font-size:16px;cursor:pointer;margin-left:6px;line-height:1}
.themebtn:hover{border-color:var(--orange);color:var(--orange)}
/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
/* ---------- explode slider ---------- */
.vexp{position:absolute;top:10px;right:10px;z-index:2;display:none;align-items:center;gap:8px;background:rgba(7,26,50,.7);border:1px solid rgba(255,255,255,.22);border-radius:3px;padding:5px 9px;color:#cfe0f1;font:700 10px "DM Sans";letter-spacing:.6px;text-transform:uppercase;backdrop-filter:blur(4px)}
.viewer.live .vexp{display:flex}.viewer.showref .vexp{display:none}
.vexp input{width:78px;accent-color:#f28b2c;height:3px;cursor:pointer}
/* ---------- gantt ---------- */
.gantt{margin-top:60px;border:1px solid var(--line);padding:26px 28px;background:linear-gradient(var(--grid) 1px,transparent 1px) 0 0/100% 38px}
.gantt h3{font:800 14px Manrope;letter-spacing:.4px;margin:0 0 4px;color:var(--navy)}.gantt>p{font-size:12px;color:var(--muted);margin:0 0 20px}
.grow{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:center;padding:7px 0}.grow span{font-size:12px;font-weight:700}
.gtrack{height:16px;background:rgba(120,160,210,.12);border-radius:2px;position:relative;overflow:hidden}
.gbar{position:absolute;top:0;bottom:0;left:calc(var(--s)*1%);width:0;background:linear-gradient(90deg,var(--orange),#ffb15e);border-radius:2px;transition:width 1.1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*.14s)}
.gantt.in .gbar{width:calc(var(--w)*1%)}
.gscale{display:grid;grid-template-columns:200px 1fr;gap:16px;margin-top:8px}.gscale div{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);letter-spacing:1px}
/* ---------- tools ---------- */
.tools{background:var(--paper)}
.toolgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}
.toolcard,.toolresult{background:#fff;border:1px solid var(--line);padding:30px}
.toolresult{background:linear-gradient(150deg,#0c2b50,#071a32);color:#fff;border:0;display:flex;flex-direction:column;justify-content:center}
.toolresult small{color:#8fb0d0;font:700 10px Manrope;letter-spacing:1.6px;text-transform:uppercase}
.bignum{font:800 clamp(34px,5vw,54px)/1.05 Manrope;letter-spacing:-1.6px;margin:10px 0 6px;color:var(--orange)}
.toolresult p{color:#b5c4d4;font-size:12px;line-height:1.7;margin:0 0 18px}
.toolcard .field input,.toolcard .field select{width:100%}
.btn-ghost{background:none;border:1px solid var(--line);color:inherit;padding:12px 18px;border-radius:4px;font:800 13px "DM Sans";cursor:pointer}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange)}
.toolresult .btn-ghost{border-color:rgba(255,255,255,.3);color:#fff;align-self:flex-start}
/* ---------- contact + enquiry form ---------- */
.contactline{display:flex;align-items:center;gap:15px}
.contactline a{color:inherit;transition:.2s}.contactline a:hover{color:var(--orange)}
.cicon{flex:0 0 40px;height:40px;border-radius:50%;background:#f28b2c1f;display:grid;place-items:center}
.cicon svg{width:18px;height:18px;fill:var(--orange)}
.field .ferr{display:block;min-height:0;color:#e5484d;font-size:11px;margin-top:6px;line-height:1.4}.field .ferr:empty{display:none}
.field input.invalid,.field textarea.invalid{border-color:#e5484d!important}
.btn-send{width:100%;padding:16px 22px;font-size:14px;letter-spacing:.3px}
.btn-send:disabled{opacity:.7;cursor:wait;transform:none}
.formstatus{margin-top:16px;font-size:13px;line-height:1.6;border-radius:3px;outline:none}
.formstatus:empty{display:none}
.formstatus.success{background:#1f9d5c1a;border-left:3px solid #1f9d5c;color:#14783f;padding:13px 15px}
.formstatus.error{background:#e5484d1a;border-left:3px solid #e5484d;color:#c3282d;padding:13px 15px}
html[data-theme=dark] .formstatus.success{color:#5fd896}html[data-theme=dark] .formstatus.error{color:#ff8c90}
#turnstileBox{margin:4px 0 14px}
/* ---------- WhatsApp ---------- */
.wa{position:fixed;right:20px;bottom:20px;z-index:30;display:flex;align-items:center;gap:10px;background:#25d366;color:#06301a;font:800 13px "DM Sans";padding:13px 18px;border-radius:40px;box-shadow:0 10px 28px #0005;transition:.2s}
.wa:hover{transform:translateY(-3px)}.wa svg{width:20px;height:20px;fill:currentColor}
@media(max-width:560px){.wa span{display:none}.wa{padding:14px}}
/* ---------- dark theme (default) ---------- */
html[data-theme=dark]{--muted:#9db1c7;--paper:#0a2038;--line:#1d3b5d;color-scheme:dark}
html[data-theme=dark] body{background:#06172b;color:#d6e2ef;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:64px 64px}
html[data-theme=dark] header{background:rgba(6,23,43,.92);border-color:#12304f}
html[data-theme=dark] .brand,html[data-theme=dark] .links{color:#e6eef7}
html[data-theme=dark] .sectionhead h2,html[data-theme=dark] .step h3,html[data-theme=dark] .service h3,html[data-theme=dark] .value b,html[data-theme=dark] .contactinfo h2,html[data-theme=dark] .gantt h3,html[data-theme=dark] .trustitem strong{color:#fff}
html[data-theme=dark] .trust{background:#0c2744;box-shadow:0 15px 45px #0006}
html[data-theme=dark] .services,html[data-theme=dark] .tools,html[data-theme=dark] .contact{background:#081d35}
html[data-theme=dark] .service,html[data-theme=dark] form,html[data-theme=dark] .toolcard{background:#0d2a47;border-color:#1d3b5d}
html[data-theme=dark] .service:hover{border-color:var(--orange);box-shadow:0 18px 35px #0006}
html[data-theme=dark] .field input,html[data-theme=dark] .field select,html[data-theme=dark] .field textarea{background:#071a32;border-color:#24476f;color:#fff}
html[data-theme=dark] .field label{color:#b9cade}
html[data-theme=dark] .links.open{background:#06172b}
html[data-theme=dark] .hamb{color:#fff}
html[data-theme=dark] .aboutnote{color:#10233a}
html[data-theme=dark] .ctaband{background:linear-gradient(110deg,#0a2443,#0f3a63)}
@media(max-width:850px){.toolgrid{grid-template-columns:1fr}.grow,.gscale{grid-template-columns:110px 1fr}.scrollcue,.buildtag{display:none}.hero .viewer.herov{opacity:.55}}
@media(max-width:560px){.gantt{padding:20px 16px}}
footer{padding-bottom:80px}