/*
Theme Name: EVFornalik
Theme URI: https://evfornalik.pl
Author: EVFornalik
Description: Motyw jednostronicowy dla serwisu aut elektrycznych i hybrydowych EVFornalik. Ciemny, premium, z filmem w tle, kalkulatorem SOH, konfiguratorem pakietow i formularzem zgloszeniowym.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: evfornalik
Tags: one-page, dark, business, custom-colors, responsive
*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800;900&family=Inter:wght@400;500;600&display=swap');

:root {
  --ev-bg: #05050d;
  --ev-bg-card: rgba(10, 10, 24, .85);
  --ev-nav-bg: rgba(5, 5, 13, .9);
  --ev-green: #00ff88;
  --ev-cyan: #00d4ff;
  --ev-orange: #ff6b00;
  --ev-red: #ff3355;
  --ev-ink: #e8f4ff;
  --ev-muted: #4a6a8a;
  --ev-nav-link: #b7cfe4;
  --ev-border: rgba(0, 255, 136, .12);
  --ev-bh: rgba(0, 255, 136, .28);
  --ev-gradient: linear-gradient(135deg, #00ff88 0%, #00d4ff 100%);
  --ev-gt: rgba(0, 255, 136, .06);
  --ev-gtb: rgba(0, 255, 136, .14);
  --ev-og: rgba(255, 107, 0, .04);
  --ev-fd: 'Outfit', system-ui, sans-serif;
  --ev-fb: 'Inter', system-ui, sans-serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--ev-bg);
  color: var(--ev-ink);
  font-family: var(--ev-fb);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; }

/* ---------- buttons ---------- */
.ev-btn-p {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1.5rem; border-radius: 9999px;
  background: var(--ev-gradient); color: var(--ev-bg);
  font-family: var(--ev-fd); font-weight: 700; font-size: .9375rem;
  letter-spacing: -.01em; text-decoration: none; border: none; cursor: pointer;
  transition: opacity .2s, transform .2s;
}
.ev-btn-p:hover { opacity: .85; transform: translateY(-1px); }
.ev-btn-p[disabled] { opacity: .6; cursor: default; transform: none; }

.ev-btn-ph {
  display: inline-flex; align-items: center; gap: .625rem;
  padding: .75rem 1.5rem; border-radius: 9999px;
  border: 1px solid var(--ev-bh); background: var(--ev-gt); color: var(--ev-green);
  font-family: var(--ev-fd); font-weight: 700; font-size: .9375rem;
  text-decoration: none; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.ev-btn-ph:hover { border-color: var(--ev-green); background: var(--ev-gtb); }

.ev-btn-s {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .75rem 1.5rem; border-radius: 9999px;
  border: 1px solid var(--ev-bh); background: none; color: var(--ev-ink);
  font-family: var(--ev-fd); font-weight: 700; font-size: .9375rem;
  cursor: pointer; text-decoration: none; transition: all .2s;
}
.ev-btn-s:hover { background: var(--ev-gt); border-color: var(--ev-green); }

.ev-la {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--ev-green); font-family: var(--ev-fd); font-size: .875rem;
  font-weight: 700; text-decoration: none; letter-spacing: .02em;
  background: none; border: none; padding: 0; cursor: pointer;
  transition: gap .2s;
}
.ev-la:hover { gap: .875rem; }

/* ---------- shared ---------- */
.ev-card {
  background: var(--ev-bg-card); border: 1px solid var(--ev-border);
  border-radius: 1rem; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.ev-gt {
  background: var(--ev-gradient); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ev-ey {
  font-family: var(--ev-fd); font-size: .75rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ev-green);
  margin-bottom: 1rem;
}
.ev-wrap { max-width: 72rem; margin: 0 auto; padding: 0 2rem; }
.ev-sec { padding: 6rem 0; border-top: 1px solid var(--ev-border); background: var(--ev-bg); }
.ev-h2 {
  font-family: var(--ev-fd); font-size: clamp(1.75rem, 4vw, 2.875rem);
  font-weight: 800; line-height: 1.12; letter-spacing: -.03em; margin-bottom: 1rem;
}
.ev-lead {
  font-size: 1rem; color: var(--ev-muted); line-height: 1.7;
  max-width: 56ch; margin-bottom: 3rem;
}
.ev-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ev-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ev-mt3 { margin-top: 3rem; }

/* ---------- nav ---------- */
.ev-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.125rem 2rem; background: var(--ev-nav-bg);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--ev-border);
}
.ev-logo { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.ev-logo-mark {
  width: 36px; height: 36px; border-radius: 9px; background: var(--ev-gradient);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ev-logo-txt {
  font-family: var(--ev-fd); font-weight: 700; font-size: 1.125rem;
  letter-spacing: -.025em; color: var(--ev-ink);
}
.ev-logo-txt span { color: var(--ev-green); }
.ev-nl { display: flex; align-items: center; gap: 2rem; }
.ev-nl a {
  font-size: .9375rem; font-weight: 500; color: var(--ev-nav-link);
  text-decoration: none; transition: color .2s;
}
.ev-nl a:hover { color: var(--ev-green); }
.ev-nl a.ev-btn-p { color: var(--ev-bg); font-weight: 700; }
.ev-nl a.ev-btn-p:hover { color: var(--ev-bg); }

/* ---------- hero ---------- */
.ev-hero {
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: flex-end; overflow: hidden; background: var(--ev-bg);
}
.ev-hv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ev-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(5,5,13,.72) 0%, rgba(5,5,13,.25) 35%, rgba(5,5,13,.85) 100%);
}
.ev-hero-in { position: relative; z-index: 2; width: 100%; max-width: 72rem; margin: 0 auto; padding: 7rem 2rem 4rem; }
.ev-h1 {
  font-family: var(--ev-fd); font-size: clamp(2rem, 6vw, 4.25rem); font-weight: 800;
  line-height: 1.05; letter-spacing: -.04em; max-width: 18ch; margin-bottom: 1.5rem;
}
.ev-hero-lead {
  font-size: 1.0625rem; color: var(--ev-ink); opacity: .82;
  line-height: 1.7; max-width: 60ch; margin-bottom: 2.25rem;
}
.ev-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.ev-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
  margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--ev-border);
}
.ev-sv { font-family: var(--ev-fd); font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.ev-sl { font-size: .8125rem; color: var(--ev-muted); margin-top: .5rem; line-height: 1.5; }

/* ---------- services ---------- */
/* Naglowek karty uslugi - pelna nazwa zamiast skrotu. */
.ev-svc-name {
  display: block; width: 100%;
  padding: .875rem 1.25rem; border-radius: .75rem;
  background: var(--ev-gt); border: 1px solid var(--ev-border);
  color: var(--ev-green); text-align: center;
  font-family: var(--ev-fd); font-weight: 800;
  font-size: 1.0625rem; letter-spacing: -.01em; line-height: 1.3;
  margin-bottom: 1.5rem;
}
.ev-ct { font-family: var(--ev-fd); font-size: 1.1875rem; font-weight: 700; letter-spacing: -.02em; margin: 1.25rem 0 .75rem; }
.ev-cd { font-size: .875rem; color: var(--ev-muted); line-height: 1.7; }
.ev-svc { padding: 2rem; display: flex; flex-direction: column; }
.ev-svc .ev-la { margin-top: 1.5rem; align-self: flex-start; }
.ev-rsn { padding: 1.75rem; }
.ev-rsn .ev-ct { margin-top: 0; font-size: 1.0625rem; }

/* ---------- testimonials ---------- */
.ev-tst { padding: 1.75rem; display: flex; flex-direction: column; }
.ev-quote { font-size: .9375rem; line-height: 1.75; font-style: italic; flex: 1; margin-bottom: 1.5rem; }
.ev-who { display: flex; align-items: center; gap: .875rem; }
.ev-av {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--ev-gradient);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-family: var(--ev-fd); font-weight: 700; font-size: .8125rem; color: var(--ev-bg);
}
.ev-who-n { font-size: .875rem; font-weight: 600; }
.ev-who-c { font-size: .75rem; color: var(--ev-muted); }

/* ---------- faq ---------- */
.ev-faq { border-top: 1px solid var(--ev-border); }
.ev-fq {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 1.375rem 0; background: none; border: none; cursor: pointer;
  text-align: left; font-family: var(--ev-fd); font-size: 1rem; font-weight: 700;
  color: var(--ev-ink); letter-spacing: -.01em;
}
.ev-fi {
  flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  border: 1px solid var(--ev-bh); color: var(--ev-green);
  display: flex; align-items: center; justify-content: center; font-size: 1.125rem; line-height: 1;
}
.ev-fa { font-size: .9375rem; color: var(--ev-muted); line-height: 1.75; padding: 0 3rem 1.5rem 0; max-width: 70ch; }
.ev-fa[hidden] { display: none; }

/* ---------- contact ---------- */
.ev-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; margin-top: 3rem; }
.ev-ci { display: flex; gap: 1rem; padding: 1.25rem 0; border-top: 1px solid var(--ev-border); }
.ev-ck { font-size: .75rem; color: var(--ev-muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .25rem; }
.ev-cv { font-family: var(--ev-fd); font-size: 1rem; font-weight: 700; text-decoration: none; }
a.ev-cv:hover { color: var(--ev-green); }

.ev-form-card { padding: 2rem; }
.ev-lbl { display: block; font-size: .75rem; font-weight: 600; color: var(--ev-muted); letter-spacing: .04em; text-transform: uppercase; margin-bottom: .375rem; }
.ev-inp, .ev-ta {
  width: 100%; background: rgba(255,255,255,.04); border: 1px solid var(--ev-border);
  border-radius: .625rem; padding: .625rem .875rem; color: var(--ev-ink);
  font-family: var(--ev-fb); font-size: .875rem; outline: none; transition: border-color .2s;
}
.ev-ta { min-height: 7rem; resize: vertical; padding: .75rem .875rem; }
.ev-inp:focus, .ev-ta:focus { border-color: var(--ev-green); }
.ev-field { margin-bottom: 1rem; }
.ev-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.ev-msg { font-size: .8125rem; line-height: 1.6; margin-bottom: 1rem; }
.ev-msg[hidden] { display: none; }
.ev-msg-err { color: var(--ev-red); }
.ev-msg-ok { color: var(--ev-green); }
.ev-thanks { text-align: center; padding: 2rem 0; }
.ev-thanks[hidden] { display: none; }

/* ---------- modals ---------- */
.ev-ov {
  position: fixed; inset: 0; z-index: 100; background: rgba(2,2,8,.86);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; overflow-y: auto;
}
.ev-ov[hidden] { display: none; }
.ev-mb {
  position: relative; width: 100%; max-width: 34rem;
  background: var(--ev-bg-card); border: 1px solid var(--ev-bh);
  border-radius: 1.25rem; padding: 2.5rem; max-height: 90vh; overflow-y: auto;
}
.ev-mw { max-width: 64rem; }
.ev-x {
  position: absolute; top: 1.25rem; right: 1.25rem; width: 2rem; height: 2rem;
  border-radius: 50%; border: 1px solid var(--ev-border); background: none;
  color: var(--ev-muted); font-size: 1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ev-x:hover { color: var(--ev-ink); border-color: var(--ev-bh); }
.ev-mh { font-family: var(--ev-fd); font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: 2rem; }

.ev-rng {
  width: 100%; -webkit-appearance: none; appearance: none; height: .25rem;
  border-radius: 2px; background: var(--ev-gtb); outline: none; margin: .5rem 0 .25rem;
}
.ev-rng::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 1.125rem; height: 1.125rem;
  border-radius: 50%; background: var(--ev-green); cursor: pointer; border: none;
}
.ev-rng::-moz-range-thumb {
  width: 1.125rem; height: 1.125rem; border-radius: 50%;
  background: var(--ev-green); cursor: pointer; border: none;
}
.ev-seg { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .5rem; }
.ev-sb {
  padding: .625rem; border-radius: .5rem; border: 1px solid var(--ev-border);
  background: none; color: var(--ev-muted); font-size: .8125rem; cursor: pointer; transition: all .2s;
}
.ev-sb.is-active { border-color: var(--ev-bh); background: var(--ev-gt); color: var(--ev-green); font-weight: 600; }
.ev-res { text-align: center; padding: 1.75rem 0; margin-top: 1.75rem; border-top: 1px solid var(--ev-border); }
.ev-rn { font-family: var(--ev-fd); font-size: 3.5rem; font-weight: 800; line-height: 1; }
.ev-rl { font-family: var(--ev-fd); font-weight: 700; margin-top: .5rem; }
.ev-note { font-size: .75rem; color: var(--ev-muted); line-height: 1.65; margin-bottom: 1.5rem; }
.ev-full { width: 100%; }

.ev-pkg {
  border: 1px solid var(--ev-border); border-radius: 1rem; padding: 1.75rem;
  background: rgba(255,255,255,.02); display: flex; flex-direction: column;
}
.ev-pkg-hl { border-color: var(--ev-bh); background: var(--ev-gt); }
.ev-tag {
  display: inline-block; padding: .25rem .625rem; border-radius: 9999px;
  background: var(--ev-gradient); color: var(--ev-bg);
  font-family: var(--ev-fd); font-size: .625rem; font-weight: 800;
  letter-spacing: .1em; margin-bottom: .875rem; align-self: flex-start;
}
.ev-pn { font-family: var(--ev-fd); font-size: 1.0625rem; font-weight: 700; }
.ev-pp { font-family: var(--ev-fd); font-size: 2rem; font-weight: 800; letter-spacing: -.03em; margin: .375rem 0 1.25rem; }
.ev-fl { margin: 0 0 1.75rem; flex: 1; }
.ev-fl li { display: flex; gap: .625rem; font-size: .8125rem; color: var(--ev-muted); line-height: 1.6; margin-bottom: .625rem; }
.ev-tick { color: var(--ev-green); flex-shrink: 0; font-weight: 700; }

/* ---------- trust band ---------- */
.ev-band { position: relative; overflow: hidden; }
.ev-ghost {
  position: absolute; right: -1rem; top: 50%; transform: translateY(-50%);
  font-family: var(--ev-fd); font-size: clamp(10rem, 25vw, 18rem); font-weight: 900;
  color: var(--ev-og); line-height: 1; user-select: none; letter-spacing: -.06em; pointer-events: none;
}
.ev-band .ev-wrap { position: relative; }

/* ---------- footer ---------- */
.ev-foot { background: var(--ev-bg); border-top: 1px solid var(--ev-border); padding: 2.5rem 2rem; }
.ev-foot-in {
  max-width: 72rem; margin: 0 auto; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 1rem;
}
.ev-foot-in a, .ev-foot-in p, .ev-foot-in span { font-size: .8125rem; color: var(--ev-muted); text-decoration: none; }
.ev-foot-brand { font-family: var(--ev-fd); font-weight: 700; font-size: .9375rem !important; }
.ev-foot-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.ev-foot-links a:hover { color: var(--ev-ink); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .ev-g3, .ev-stats { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .ev-g2, .ev-contact-grid { grid-template-columns: 1fr; }
  .ev-contact-grid { gap: 2rem; }
  .ev-nl { display: none; }
  .ev-nav { padding: .875rem 1.25rem; }
  .ev-hero-in { padding: 6rem 1.25rem 2.5rem; }
  .ev-wrap { padding: 0 1.25rem; }
  .ev-sec { padding: 4rem 0; }
  .ev-mb { padding: 1.75rem 1.25rem; }
  .ev-fa { padding-right: 0; }
  .ev-card { border-radius: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* WordPress admin bar offset */
body.admin-bar .ev-nav { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .ev-nav { top: 46px; }
}