/* --- Canvas background fixed to viewport to prevent layout shift/extra scroll --- */
#bg-net{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
:root{--bg:#0b0b0c;--bg-2:#0f0f12;--text:#e9e9e9;--muted:#b6b6b6;--gold:#d4af37;--accent-2:#f5d67b;--radius:16px;--section-gap:clamp(16px,4vw,48px);--container:min(1120px,92vw);--shadow:0 8px 30px rgba(0,0,0,.35)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--text);background:#09090a;background-image:radial-gradient(1000px 600px at 10% -10%,#1a1a1f 10%,transparent 60%),radial-gradient(800px 500px at 90% -20%,#141419 10%,transparent 60%)}a{color:var(--text);text-decoration:none}a:hover{color:var(--accent-2)}.container{width:var(--container);margin-inline:auto}.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.2rem;border:1px solid color-mix(in oklab,var(--gold),white 15%);border-radius:var(--radius);background:linear-gradient(180deg,color-mix(in oklab,var(--gold),#fff 12%),var(--gold));color:#111;font-weight:700;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease}.btn:hover{transform:translateY(-2px)}.btn--ghost{background:transparent;color:var(--text);border:1px solid #2a2a30}.pill{display:inline-block;padding:.35rem .65rem;border-radius:999px;background:#111218;border:1px solid #2a2a30;color:var(--muted);font-size:.85rem}header.site{position:sticky;top:0;z-index:40;backdrop-filter:blur(8px);background:color-mix(in oklab,#0b0b0c,transparent 20%);border-bottom:1px solid #15151c}nav.inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0}.brand{display:flex;align-items:center;gap:.7rem;font-weight:800;letter-spacing:.5px}.brand svg{width:28px;height:28px}.nav-links{display:flex;gap:1rem;align-items:center}.nav-links a{padding:.5rem .8rem;border-radius:10px;border:1px solid transparent}.nav-links a:hover{border-color:#23232b;background:#0e0e14}.hero{position:relative;padding:calc(var(--section-gap) + 32px) 0 var(--section-gap);overflow:hidden}.hero h1{font-size:clamp(32px,6vw,64px);line-height:1.04;margin:0 0 1rem;letter-spacing:.3px}.hero p{max-width:68ch;color:var(--muted);font-size:clamp(16px,2.2vw,20px)}.hero-ctas{display:flex;gap:.8rem;margin-top:1.2rem;flex-wrap:wrap}.badges{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem}.badge{display:flex;gap:.5rem;align-items:center;padding:.4rem .6rem;border:1px solid #24242a;background:#0e0e14;border-radius:999px;font-size:.85rem;color:var(--muted)}.grid{display:grid;gap:24px;grid-template-columns:repeat(12,1fr)}.card{background:linear-gradient(180deg,#0c0c11,#0a0a0e);border:1px solid #1f1f27;border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow)}.card h3{margin:.4rem 0 .6rem;font-size:1.25rem}section{padding:var(--section-gap) 0}section h2{font-size:clamp(24px,4.2vw,40px);letter-spacing:.2px;margin:0 0 1rem}section>.lead{color:var(--muted);max-width:72ch}.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}.kpi{border:1px solid #23232b;background:#0d0d13;border-radius:var(--radius);padding:1rem}.kpi strong{font-size:1.6rem}.list{display:grid;gap:.5rem;margin:.6rem 0 0;padding:0;list-style:none}.list li{display:flex;gap:.6rem}.accent{color:var(--gold)}.divider{height:1px;background:linear-gradient(90deg,transparent,#22222a,transparent);margin:var(--section-gap) 0}.services{grid-template-columns:repeat(3,minmax(0,1fr))}.step{counter-increment:step;position:relative;padding-left:3rem}.step::before{content:counter(step);position:absolute;left:0;top:.2rem;font-weight:800;color:var(--gold);background:#14141a;border:1px solid #282832;width:2.2rem;height:2.2rem;display:grid;place-items:center;border-radius:12px}.faq details{background:#0e0e14;border:1px solid #22222a;border-radius:12px;padding:1rem 1.2rem}.faq summary{cursor:pointer;font-weight:700}.faq p{color:var(--muted)}.footer{padding:32px 0;border-top:1px solid #1b1b22;background:#09090a}.legend{font-size:.9rem;color:var(--muted)}.settings-toggle{position:fixed;right:20px;bottom:20px;z-index:50}.settings-panel{position:fixed;right:20px;bottom:80px;width:320px;max-width:calc(100vw - 40px);background:#0e0e14;border:1px solid #22222a;border-radius:16px;padding:14px;box-shadow:var(--shadow);display:none}.settings-panel.open{display:block}.settings-panel label{display:grid;gap:.4rem;margin:.6rem 0}.settings-panel input[type=color],.settings-panel input[type=range],.settings-panel input[type=text],.settings-panel input[type=email],.settings-panel select{width:100%;padding:.5rem .6rem;border-radius:10px;background:#0c0c12;border:1px solid #262631;color:var(--text)}.note{font-size:.85rem;color:var(--muted)}.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{left:12px;top:12px;width:auto;height:auto;padding:.5rem .75rem;background:#111217;border:1px solid #2a2a30;border-radius:10px}@media (max-width:960px){.services{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}.reveal{opacity:0;transform:translateY(12px);will-change:transform,opacity;transition:opacity .6s ease,transform .6s ease}.reveal.in{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){.reveal{transition:none}}
/* --- Responsive improvements --- */
@media (max-width: 1024px){
  :root{ --container: min(960px, 94vw); }
  .hero{ padding: calc(var(--section-gap) + 16px) 0 var(--section-gap); }
}

@media (max-width: 768px){
  :root{ --container: min(680px, 94vw); --radius:14px; }
  .hero{ padding: 72px 0 56px; }
  .hero h1{ font-size: clamp(28px, 7vw, 40px); }
  .hero p{ font-size: 16px }
  .grid{ gap:16px }
  .services{ grid-template-columns: 1fr }
  .kpis{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px }
  nav.inner{ flex-wrap: wrap }
  .nav-links{ flex-wrap: wrap; gap:.5rem }
}

@media (max-width: 480px){
  :root{ --container: 92vw; --section-gap: 58px; }
  .hero{ padding: 56px 0 44px }
  .hero-ctas .btn{ width: 100%; justify-content: center }
  .badges{ gap: .4rem }
  section h2{ font-size: clamp(22px, 7vw, 30px) }
  .card{ padding: .9rem }
  .kpi strong{ font-size: 1.3rem }
}


/* --- custom tweaks per request --- */
.kpis.loading .kpi strong{position:relative; color:transparent;}
.kpis.loading .kpi strong::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.18), rgba(255,255,255,.06));
  animation: shimmer 1.2s linear infinite;
  border-radius: 8px;
}
@keyframes shimmer {0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

.form-modern{display:grid; gap:.8rem; padding:1.2rem 1.4rem; border-radius:var(--radius); background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08); box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);}
.form-modern label{display:grid; gap:.35rem; font-weight:600; color:var(--muted);}
.form-modern input,.form-modern textarea{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:.9rem 1rem; color:var(--text); font:inherit; outline:none; transition:border .2s, box-shadow .2s}
.form-modern input:focus,.form-modern textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(212,175,55,.25)}
.form-modern .legend{font-size:.88rem; font-weight:400}
.form-modern .btn{margin-top:.4rem}

/* === Contact Form 7 inside theme form-modern === */
.form-modern .wpcf7{margin:0}
.form-modern .wpcf7 form{display:grid;gap:.8rem;margin:0}
.form-modern .wpcf7 p{margin:0}
.form-modern .wpcf7 label{display:grid;gap:.35rem;font-weight:600;color:var(--muted)}
.form-modern .wpcf7 input[type="text"],
.form-modern .wpcf7 input[type="email"],
.form-modern .wpcf7 input[type="tel"],
.form-modern .wpcf7 textarea,
.form-modern .wpcf7 select{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:.9rem 1rem;
  color:var(--text);
  font:inherit;
  outline:none;
  transition:border .2s, box-shadow .2s;
}
.form-modern .wpcf7 input:focus,
.form-modern .wpcf7 textarea:focus,
.form-modern .wpcf7 select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.25)}

.form-modern .wpcf7 .wpcf7-form-control-wrap{display:block}

/* checkbox/acceptance */
.form-modern .wpcf7 .wpcf7-list-item{margin:0}
.form-modern .wpcf7 .wpcf7-list-item label{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;color:var(--muted)}
.form-modern .wpcf7 input[type="checkbox"]{margin-top:.2rem}

/* submit button in CF7 */
.form-modern .wpcf7 input[type="submit"].wpcf7-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.9rem 1.2rem;
  border:1px solid color-mix(in oklab,var(--gold),white 15%);
  border-radius:var(--radius);
  background:linear-gradient(180deg,color-mix(in oklab,var(--gold),#fff 12%),var(--gold));
  color:#111;
  font-weight:800;
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease;
}
.form-modern .wpcf7 input[type="submit"].wpcf7-submit:hover{transform:translateY(-2px)}

/* CF7 response / validation */
.form-modern .wpcf7 .wpcf7-response-output{
  margin:0;
  padding:.8rem 1rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.03);
  color:var(--text);
}
.form-modern .wpcf7 span.wpcf7-not-valid-tip{color:#ffb4a6;font-size:.9rem}

@media (max-width: 480px){
  .form-modern{padding:1rem}
  .form-modern .wpcf7 input[type="submit"].wpcf7-submit{width:100%}
}

.brand img{display:block; height:28px; width:auto}
.brand span{display:none}

.brand img{height:42px !important;}


/* keep canvas behind content but above page background */
header.site, main, footer.footer { position: relative; z-index: 1; }
/* bigger logo */
.brand img{display:block; height:clamp(28px,4vw,44px); width:auto}
.kpi strong{font-size:clamp(28px,6vw,44px); font-weight:800}


/* === Nav & Logo size === */
:root{ --nav-h: 64px; } /* desktop */
@media (max-width: 900px){ :root{ --nav-h: 56px; } }
header.site .inner{ min-height: var(--nav-h); align-items: center; }
.brand{ height: var(--nav-h); display:flex; align-items:center; }
.brand img{ height: calc(var(--nav-h) - 16px); width:auto; display:block } /* logo nearly full height */

/* === Golden gradient headings === */
.gradient-gold{ 
  background: linear-gradient(180deg, #f7e6a8 0%, #e3c768 45%, #b08a2b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero h1, section h2{ line-height:1.08; }
.hero h1, .container > h2{ background: linear-gradient(180deg, #f7e6a8 0%, #e7cc76 45%, #9c7a20 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }


/* Full-height logo */
:root{ --nav-h: 72px; }
@media (max-width: 900px){ :root{ --nav-h: 60px; } }
header.site .inner{ min-height: var(--nav-h); align-items: center; }
.brand{ height: var(--nav-h); display:flex; align-items:center; }
.brand img{ height: var(--nav-h); width:auto; display:block; }


/* ===== Logo full-height & nav spacing ===== */
:root{ --nav-h: 72px; }
@media (max-width: 900px){ :root{ --nav-h: 60px; } }
header.site .inner{ min-height: var(--nav-h) !important; align-items: center; }
.brand{ height: var(--nav-h); display:flex; align-items:center; }
.brand img{ height: calc(var(--nav-h) - 10px) !important; width:auto; display:block }


/* Canvas network background */
#bg-net{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.6;display:block}
header.site, main, footer.footer{position:relative;z-index:1}


:root{ --nav-h: 80px; } /* larger logo */
@media (max-width: 900px){ :root{ --nav-h: 64px; } }
header.site .inner{ min-height: var(--nav-h) !important; align-items:center; }
.brand{ height: var(--nav-h); display:flex; align-items:center; }
.brand img{ height: calc(var(--nav-h) - 10px) !important; width:auto; display:block }


/* ==== Mobile fixes: no horizontal overflow, responsive grids ==== */
html, body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas { max-width: 100%; height: auto; }

.container { padding-left: clamp(14px, 4vw, 24px); padding-right: clamp(14px, 4vw, 24px); }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
@media (max-width: 1100px){
  .grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 760px){
  .grid { grid-template-columns: 1fr !important; }
  .kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
}
@media (max-width: 520px){
  .kpis { grid-template-columns: 1fr; }
}

/* Avoid negative margins causing overflow */
.card, .hero, .kpi { max-width: 100%; }


/* === Mobile polish === */

/* 1) Center logo in mobile header */
@media (max-width: 760px){
  header.site .inner{ display:flex; flex-direction:column; gap:.6rem; align-items:center; }
  .brand{ margin: 0 auto; justify-content:center; }
  .nav-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem }
}

/* 2) KPI: two per row on phones */
@media (max-width: 760px){
  .kpis{ display:grid; grid-template-columns: 1fr 1fr; gap:.8rem }
}
@media (max-width: 520px){
  .kpis{ grid-template-columns: 1fr }
}

/* 3) Step badges (01/02/03/04): keep away from text */
.step{ padding-left: 3.2rem; }
.step::before{
  content: counter(step);
  
  position:absolute; left:.8rem; top:.8rem;
  width:2.4rem; height:2.4rem;
  display:grid; place-items:center;
  border-radius:12px;
  font-weight:800;
  color: var(--gold);
  background:#14141a;
  border:1px solid #282832;
  box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
@media (max-width: 760px){
  .step{ padding-left: 3.4rem; }
  .step::before{ left:1rem; top:1rem; }
}


/* Steps counter reset per section and nicer spacing */
#proces .grid, section#proces .grid { counter-reset: step; }
.step{ padding-left: 3.8rem; } /* more room for title */
.step::before{ left: .9rem; top: .9rem; }
.step h3{ margin: .1rem 0 .4rem 0; } /* slight gap after number */


/* Contact form checkbox inline */
.form-modern .legend{ display:flex; align-items:flex-start; gap:.6rem; }
.form-modern .legend input[type="checkbox"]{ margin-top:.25rem; flex:0 0 auto; }


.container > h2{ margin-top: 0.6rem; }
section + section{ margin-top: min(6vw, 40px); }


/* Force simple numeric step badges */
.step{counter-increment: step; position: relative; padding-left: 3.6rem;}
.step::before{
  content: counter(step);
  position:absolute; left:.9rem; top:.9rem;
  width:2.4rem; height:2.4rem; display:grid; place-items:center;
  border-radius:12px; font-weight:800;
  color: var(--gold); background:#14141a; border:1px solid #282832;
  box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  font-variant-numeric: tabular-nums;
}
.step h3{ margin-left: .1rem; }
@media (max-width: 760px){
  .step{ padding-left: 3.8rem; }
}


/* Checkbox + text inline */
.form-modern .legend{ display:flex; align-items:flex-start; gap:.6rem; margin-top:.6rem; }
.form-modern .legend input[type="checkbox"]{ margin-top:.25rem; }
.form-modern .legend label{ margin:0; }


/* Support label.legend as inline checkbox container */
label.legend{ display:flex; align-items:flex-start; gap:.6rem; margin-top:.6rem; font-weight:400 }
label.legend input[type="checkbox"]{ margin-top:.25rem; }

/* SINGLE step increment */
.step{counter-increment:step}


/* ---- HARD FIX: step counter 1,2,3,4 ---- */
#proces .grid{ counter-reset: step 0 !important; }
.step{ counter-increment: step !important; position: relative; padding-left: 3.6rem; }
.step::before{ counter-increment: none !important; content: counter(step) !important; }