/* ============================================================
   DripTronic — strona produktowa
   Czysty CSS, bez frameworka i bez zależności zewnętrznych.
   Kolory spójne z ikoną aplikacji (D + kropla).
   ============================================================ */

:root{
  --bg:        #0E1117;
  --bg-alt:    #12161D;
  --surface:   #161B22;
  --surface-2: #1C222B;
  --line:      #262D36;
  --line-soft: #1E242C;

  --text:      #E6EDF3;
  --muted:     #9AA5B1;
  --faint:     #6E7A87;

  --green:     #3FB950;
  --green-dim: rgba(63,185,80,.14);
  --red:       #E63946;
  --red-dim:   rgba(230,57,70,.13);
  --oil:       #E6A23C;
  --oil-dim:   rgba(230,162,60,.13);

  --wrap: 1140px;
  --r:    16px;
  --r-sm: 10px;

  --shadow: 0 18px 50px -20px rgba(0,0,0,.85);
  --nav-h: 64px;
}

*,*::before,*::after{ box-sizing:border-box }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }

::selection{ background:var(--green); color:#04120a }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--green); color:#04120a; padding:12px 20px; font-weight:700; border-radius:0 0 8px 0;
}
.skip:focus{ left:0 }

:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:4px }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px }
.wrap.narrow{ max-width:800px }
.center{ text-align:center }

/* ── typografia ───────────────────────────────────────────── */

h1,h2,h3{ line-height:1.15; margin:0 0 .5em; letter-spacing:-.02em }
h1{ font-size:clamp(2rem,5.2vw,3.35rem); font-weight:800 }
h1 em{ font-style:normal; color:var(--green) }
h2.h2{ font-size:clamp(1.6rem,3.4vw,2.3rem); font-weight:800 }
h3{ font-size:1.06rem; font-weight:700 }
p{ margin:0 0 1rem; color:var(--muted) }
p strong{ color:var(--text) }
b{ color:var(--text) }

.eyebrow{
  display:inline-block; margin:0 0 14px;
  font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green);
  padding:6px 12px; border-radius:99px;
  background:var(--green-dim); border:1px solid rgba(63,185,80,.28);
}
.sub{ max-width:64ch; color:var(--muted); font-size:1.02rem }
.center .sub{ margin-inline:auto }
.note{
  max-width:70ch; margin:2.2rem auto 0; padding:18px 22px;
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--green);
  border-radius:var(--r-sm); color:var(--muted); font-size:.97rem;
}
.fine{ margin-top:1.4rem; font-size:.82rem; color:var(--faint) }

/* ── przyciski ────────────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:13px 26px; border-radius:11px; border:1px solid transparent;
  background:var(--green); color:#04120a; font-weight:800; font-size:.94rem;
  cursor:pointer; transition:transform .15s ease, filter .15s ease, background .15s ease;
}
.btn:hover{ filter:brightness(1.08); transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line) }
.btn-ghost:hover{ background:var(--surface); border-color:#3A434E }
.btn-sm{ padding:9px 16px; font-size:.85rem; border-radius:9px }
.btn-lg{ padding:16px 34px; font-size:1rem }
[data-placeholder]{ opacity:.65 }
.cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:1.8rem }
.cta-center{ justify-content:center }

/* ── nawigacja ────────────────────────────────────────────── */

.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(14,17,23,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, background .2s ease;
}
.nav.is-stuck{ border-bottom-color:var(--line); background:rgba(14,17,23,.95) }

.nav-in{ display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); gap:20px }

.brand{ display:flex; align-items:center; gap:9px; font-weight:700; letter-spacing:-.005em }
.brand img{ border-radius:8px }
.brand span{ font-size:.9rem }

/* nazwa w górnym pasku — wyróżniona, bo to jedyna stała nawigacja */
.nav .brand{ font-weight:800; letter-spacing:-.015em }
.nav .brand span{ font-size:1.15rem }
.nav .brand img{ width:32px; height:32px }

.nav nav{ display:flex; align-items:center; gap:6px }
.nav nav a:not(.btn){
  padding:8px 12px; border-radius:8px; font-size:.89rem; font-weight:600; color:var(--muted);
  transition:color .15s, background .15s;
}
.nav nav a:not(.btn):hover{ color:var(--text); background:var(--surface) }

.burger{
  display:none; width:42px; height:38px; border:1px solid var(--line); border-radius:9px;
  background:var(--surface); cursor:pointer; padding:0; place-items:center; gap:5px;
}
.burger span{ display:block; width:18px; height:2px; background:var(--text); border-radius:2px; transition:.2s }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

@media (max-width:900px){
  .burger{ display:grid }
  .nav nav{
    position:absolute; top:var(--nav-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    padding:12px 24px 20px; background:rgba(14,17,23,.98);
    border-bottom:1px solid var(--line); display:none;
  }
  .nav.open nav{ display:flex }
  .nav nav a:not(.btn){ padding:12px }
  .nav nav .btn{ margin-top:8px; justify-content:center }
}

/* ── sekcje ───────────────────────────────────────────────── */

.band{ padding:clamp(56px,8vw,96px) 0; border-top:1px solid var(--line-soft) }
.band-alt{ background:var(--bg-alt) }
.band-cta{
  border-top:1px solid var(--line);
  background:
    radial-gradient(900px 340px at 50% -10%, rgba(63,185,80,.13), transparent 70%),
    var(--bg);
}
.cta-logo{ margin:0 auto 22px; border-radius:18px; box-shadow:var(--shadow) }

/* ── hero ─────────────────────────────────────────────────── */

.hero{ padding:clamp(48px,7vw,88px) 0 clamp(56px,8vw,96px); position:relative; overflow:hidden }
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(720px 420px at 12% -8%,  rgba(63,185,80,.10), transparent 65%),
    radial-gradient(620px 380px at 88% 8%,   rgba(230,162,60,.07), transparent 65%);
}
.hero-in{
  position:relative; display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,64px); align-items:center;
}
.hero-copy .lead{ max-width:52ch; font-size:1.06rem }

.hero-stats{
  list-style:none; margin:2.4rem 0 0; padding:1.4rem 0 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.hero-stats b{ display:block; font-size:1.02rem; font-weight:800 }
.hero-stats span{ font-size:.83rem; color:var(--faint) }

@media (max-width:980px){
  .hero-in{ grid-template-columns:1fr }
  .hero-stats{ grid-template-columns:1fr 1fr 1fr; gap:12px }
}

/* ── miniaturowy HUD w hero ───────────────────────────────── */

.hero-art{ display:grid; place-items:center; margin:0 }
/* Duży przycisk nad zrzutem HUD — prowadzi wprost do klikalnego demo. */
.hero-art .hero-demo{
  width:100%; margin:0 0 14px; gap:12px;
  padding:16px 20px; border-radius:13px;
  background:var(--green); color:#04120a;
  text-align:left; line-height:1.2;
  box-shadow:0 10px 30px -12px rgba(63,185,80,.55);
}
.hero-art .hero-demo:hover{ filter:brightness(1.07); transform:translateY(-1px) }
.hero-art .hero-demo-ico{ flex:0 0 auto; font-size:1rem; opacity:.75 }
.hero-art .hero-demo span{ display:flex; flex-direction:column; gap:3px }
.hero-art .hero-demo small{
  font-size:.76rem; font-weight:600; letter-spacing:0;
  text-transform:none; opacity:.72;
}
.hero-art .shot{
  display:block; width:100%; height:auto;
  border-radius:14px; border:1px solid var(--line); box-shadow:var(--shadow);
}
.hero-art figcaption{
  margin-top:.85rem; font-size:.78rem; line-height:1.45;
  color:var(--faint); text-align:center;
}
.hud{
  width:100%; max-width:360px; padding:18px; border-radius:22px;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.hud-top{
  display:flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}
.hud-top b{ margin-left:auto; color:var(--muted); letter-spacing:.04em }
.dot{ width:8px; height:8px; border-radius:99px; background:var(--green); box-shadow:0 0 0 4px var(--green-dim) }

.hud-main{ position:relative; display:grid; place-items:center; margin:10px 0 14px }
.dial{ width:188px; height:188px; transform:rotate(-90deg) }
.dial-bg{ fill:none; stroke:var(--line); stroke-width:9 }
.dial-arc{ fill:none; stroke:var(--green); stroke-width:9; stroke-linecap:round }
.dial-in{ fill:none; stroke:var(--line-soft); stroke-width:1 }

.hud-speed{ position:absolute; text-align:center; line-height:1 }
.hud-speed b{ display:block; font-size:2.7rem; font-weight:800; letter-spacing:-.03em }
.hud-speed span{ font-size:.72rem; color:var(--faint); letter-spacing:.1em; text-transform:uppercase }

.hud-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px }
.hud-grid .cell,.ph-tile{
  padding:10px 12px; border-radius:11px; background:rgba(0,0,0,.28); border:1px solid var(--line-soft);
}
.hud-grid span,.ph-tile span{ display:block; font-size:.68rem; color:var(--faint); letter-spacing:.05em }
.hud-grid b,.ph-tile b{ font-size:1.16rem; font-weight:800 }
.hud-grid i,.ph-tile i{ font-style:normal; font-size:.72rem; color:var(--faint); margin-left:3px }

.hud-bar{ height:7px; margin-top:14px; border-radius:99px; background:rgba(0,0,0,.4); overflow:hidden }
.hud-bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--green),#7ee787) }
.hud-badge{ margin-top:8px; font-size:.75rem; color:var(--faint); text-align:center }

/* ── zawartość zestawu ────────────────────────────────────── */

.kit{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:2.4rem }
@media (max-width:820px){ .kit{ grid-template-columns:1fr } }

.kit-col{
  padding:24px 22px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line);
}
.kit-col.out{ background:var(--bg-alt) }
.kit-h{ display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap }
.kit-h .mark{
  flex:0 0 28px; height:28px; border-radius:9px; display:grid; place-items:center;
  font-size:.95rem; font-weight:800;
}
.kit-col.have .mark{ background:var(--green-dim); border:1px solid rgba(63,185,80,.35); color:var(--green) }
.kit-col.buy .mark{ background:var(--oil-dim); border:1px solid rgba(230,162,60,.35); color:var(--oil) }
.kit-h h3{ margin:0; font-size:1.02rem }
.kit-h small{ display:block; color:var(--faint); font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase }

.kit-list{ list-style:none; margin:0; padding:0; display:grid; gap:11px }
.kit-list li{ position:relative; padding-left:26px; color:var(--muted); font-size:.94rem }
.kit-list li::before{
  position:absolute; left:0; top:0; font-weight:800; font-size:.95rem;
}
.kit-col.have .kit-list li::before{ content:"✓"; color:var(--green) }
.kit-col.buy  .kit-list li::before{ content:"›"; color:var(--oil) }
.kit-list b{ color:var(--text) }

.kit-note{
  margin-top:16px; padding-top:16px; border-top:1px dashed var(--line);
  font-size:.85rem; color:var(--faint);
}

/* ── zgodność ─────────────────────────────────────────────── */

.compat{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:2.4rem }
@media (max-width:900px){ .compat{ grid-template-columns:1fr 1fr } }
@media (max-width:600px){ .compat{ grid-template-columns:1fr } }

.compat-item{
  padding:22px 20px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line);
}
.compat-item .ci{ font-size:1.35rem; margin-bottom:10px; line-height:1 }
.compat-item h3{ font-size:.99rem; margin-bottom:.35em }
.compat-item p{ font-size:.9rem; margin:0 }
.compat-item .opt{
  display:inline-block; margin-top:10px; padding:3px 9px; border-radius:99px;
  font-size:.68rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  background:var(--green-dim); color:var(--green); border:1px solid rgba(63,185,80,.3);
}
.compat-item .opt.own{ background:var(--oil-dim); color:var(--oil); border-color:rgba(230,162,60,.3) }

/* ── wartość do uzupełnienia ───────────────────────────────── */

.tbd{
  color:var(--faint); font-style:italic;
  border-bottom:1px dashed var(--line); padding-bottom:1px;
}

/* ── karty ────────────────────────────────────────────────── */

.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:2.4rem }
.cards-3{ grid-template-columns:repeat(3,1fr) }
@media (max-width:1000px){ .cards,.cards-3{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .cards,.cards-3{ grid-template-columns:1fr } }

.card{
  padding:24px 22px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line);
  transition:transform .18s ease, border-color .18s ease;
}
.card:hover{ transform:translateY(-3px); border-color:rgba(63,185,80,.42) }
.card-link{
  display:inline-block; margin-top:14px; font-size:.86rem; font-weight:700;
  color:var(--green); text-decoration:none; border-bottom:1px solid rgba(63,185,80,.35);
  transition:border-color .15s, color .15s;
}
.card-link:hover{ color:var(--text); border-color:currentColor }
.card h3{ color:var(--text) }
.card p{ font-size:.93rem; margin:0 }

.card.feat{ position:relative; padding-top:26px }
.card.feat::before{
  content:""; position:absolute; top:0; left:22px; width:34px; height:3px; border-radius:0 0 3px 3px;
  background:var(--green);
}
.cards-3 .card:nth-child(3n+2)::before{ background:var(--oil) }
.cards-3 .card:nth-child(3n)::before{ background:var(--red) }

/* ── kroki ────────────────────────────────────────────────── */

.steps{ list-style:none; margin:2.4rem 0 0; padding:0; display:grid; gap:14px }
.steps li{
  display:flex; gap:18px; align-items:flex-start;
  padding:20px 22px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line);
}
.steps h3{ margin-bottom:.25em }
.steps p{ margin:0; font-size:.94rem }
.step-n{
  flex:0 0 40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:var(--green-dim); border:1px solid rgba(63,185,80,.32);
  color:var(--green); font-weight:800; font-size:1.02rem;
}

/* ── schemat ──────────────────────────────────────────────── */

.diagram{
  margin:2.6rem 0 0; padding:26px 20px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line); overflow-x:auto;
}
.diagram svg{ width:100%; min-width:660px; height:auto; color:var(--text) }
.dg-t{ fill:var(--muted); font-size:15px; font-weight:700 }
.dg-s{ fill:var(--faint); font-size:12.5px }

/* ── aplikacja: podział + telefon ─────────────────────────── */

.split{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,52px); align-items:center; margin-top:2.4rem }
@media (max-width:980px){ .split{ grid-template-columns:1fr } }

.ticks{ list-style:none; margin:0; padding:0; display:grid; gap:14px }
.ticks li{
  position:relative; padding-left:30px; color:var(--muted); font-size:.96rem;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:9px; width:14px; height:14px; border-radius:99px;
  background:var(--green-dim); border:1.5px solid var(--green);
}
/* W sekcji „Aplikacja” lista leży nad demem, więc przy szerokim ekranie
   idzie w dwóch kolumnach — inaczej zajmowałaby pół ekranu w pionie. */
.ticks-wide{ grid-template-columns:repeat(2, 1fr); gap:12px 34px }
@media (max-width:860px){ .ticks-wide{ grid-template-columns:1fr } }

.phone{ display:grid; place-items:center }
.phone-in{
  width:100%; max-width:300px; padding:16px; border-radius:30px;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.ph-bar{ display:flex; align-items:center; gap:8px; font-size:.74rem; font-weight:700; color:var(--faint); margin-bottom:12px }
.ph-tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px }
.ph-chart{ margin-top:10px; padding:12px; border-radius:12px; background:rgba(0,0,0,.28); border:1px solid var(--line-soft) }
.ph-chart svg{ width:100%; height:80px }
.ph-legend{ display:flex; gap:14px; margin-top:8px; font-size:.68rem; color:var(--faint) }
.ph-legend span:first-child{ color:var(--green) }
.ph-legend span:last-child{ color:var(--red) }
.ph-btn{
  margin-top:12px; padding:13px; border-radius:12px; text-align:center;
  background:var(--green); color:#04120a; font-weight:800; font-size:.9rem;
}

/* ── specyfikacja ─────────────────────────────────────────── */

.table-wrap{ margin-top:2rem; border:1px solid var(--line); border-radius:var(--r); overflow:hidden }
.spec{ width:100%; border-collapse:collapse; font-size:.94rem }
.spec tr{ border-top:1px solid var(--line-soft) }
.spec tr:first-child{ border-top:0 }
.spec th,.spec td{ padding:14px 20px; text-align:left; vertical-align:top }
.spec th{
  width:38%; color:var(--text); font-weight:700; background:var(--surface);
  border-right:1px solid var(--line-soft);
}
.spec td{ color:var(--muted); background:var(--bg-alt) }
.spec tr:hover th,.spec tr:hover td{ background:var(--surface-2) }
@media (max-width:640px){
  .spec th{ width:46%; padding:12px 14px; font-size:.87rem }
  .spec td{ padding:12px 14px; font-size:.87rem }
}

/* ── FAQ ──────────────────────────────────────────────────── */

.faq{
  padding:18px 20px; margin-top:10px; border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--line);
}
.faq summary{
  cursor:pointer; font-weight:700; color:var(--text); list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:"+"; flex:0 0 auto; width:26px; height:26px; border-radius:8px;
  display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line);
  color:var(--green); font-size:1.1rem; font-weight:700; line-height:1;
}
.faq[open] summary::after{ content:"–" }
.faq[open] summary{ margin-bottom:.6rem }
.faq p{ margin:0; font-size:.94rem }

/* ── autor ────────────────────────────────────────────────── */

.author{ display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap }
.author-badge{
  flex:0 0 auto; height:44px; padding:0 18px; border-radius:18px;
  display:inline-flex; align-items:center;
  background:linear-gradient(135deg,var(--green),#1f6f2e); color:#04120a;
  font-size:1.02rem; font-weight:800; letter-spacing:-.01em; white-space:nowrap;
}
.author p{ max-width:60ch }

/* ── kontakt ──────────────────────────────────────────────── */

.contacts{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:2rem }
.contact{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  min-width:230px; padding:18px 22px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line);
  transition:transform .16s ease, border-color .16s ease;
}
.contact:hover{ transform:translateY(-3px); border-color:rgba(63,185,80,.42) }
.contact .ci{ font-size:1.3rem; color:var(--green); margin-bottom:6px }
.contact b{ font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint) }
.contact i{ font-style:normal; color:var(--text); font-weight:600; overflow-wrap:anywhere }

/* ── stopka ───────────────────────────────────────────────── */

.foot{ padding:34px 0; border-top:1px solid var(--line); background:#0A0D12 }
.foot-in{ display:flex; align-items:center; gap:24px; flex-wrap:wrap }
.foot nav{ display:flex; gap:16px; flex-wrap:wrap; margin-left:auto }
.foot nav a{ font-size:.87rem; color:var(--faint); transition:color .15s }
.foot nav a:hover{ color:var(--green) }
.copy{ width:100%; margin:0; font-size:.82rem; color:var(--faint) }

/* ── animacje wejścia ─────────────────────────────────────── */

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease }
.reveal.in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .reveal{ opacity:1; transform:none; transition:none }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}

/* ── wydruk ───────────────────────────────────────────────── */

@media print{
  .nav,.foot,.hero-art,.cta{ display:none }
  body{ background:#fff; color:#000 }
  h1,h2,h3,b{ color:#000 }
  p,.sub,.fine{ color:#333 }
  .band{ padding:20px 0; border-color:#ccc }
}