/* HVACDesk — landing marketingowy.
   Statyczny HTML/CSS zamiast Fluttera: landing musi wczytać się natychmiast
   i działać wszędzie, także bez WebGL (CanvasKit spada wtedy na renderowanie
   programowe i strona się zacina). Paleta odpowiada lib/landing_theme.dart. */

:root{
  --blue:#2563EB; --blue-dark:#1D4ED8; --blue-bg:#EFF6FF;
  --ink:#0F172A; --slate:#334155; --slate-mut:#475569;
  --muted:#64748B; --cool:#94A3B8;
  --line:#E2E8F0; --pale:#F8FAFC; --dark:#1E293B;
  --sky:#38BDF8; --green:#16A34A; --emerald:#10B981; --amber:#F59E0B;
  --radius:14px; --radius-lg:22px;
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 6px 16px rgba(15,23,42,.06);
  --shadow-lg:0 2px 4px rgba(15,23,42,.05), 0 12px 28px rgba(15,23,42,.09);
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}

body{
  margin:0; background:var(--pale); color:var(--ink);
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; line-height:1.15; letter-spacing:-.02em; font-weight:800}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
a{color:inherit; text-decoration:none}
img,svg{max-width:100%}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px}
.wrap--narrow{max-width:820px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; z-index:100; background:#fff; padding:10px 16px; border-radius:8px; box-shadow:var(--shadow)}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px; border-radius:6px}

/* ---------- przyciski ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; border-radius:12px; border:1px solid transparent;
  font-weight:700; font-size:15px; cursor:pointer; white-space:nowrap;
  transition:background-color .15s, border-color .15s, color .15s;
}
.btn--lg{padding:16px 26px; font-size:16px}
.btn--block{width:100%}
.btn--primary{background:var(--blue); color:#fff}
.btn--primary:hover{background:var(--blue-dark)}
.btn--outline{background:#fff; color:var(--ink); border-color:var(--line)}
.btn--outline:hover{border-color:var(--blue); color:var(--blue)}
.btn--ghost{color:var(--slate-mut)}
.btn--ghost:hover{color:var(--blue)}
.btn--white{background:#fff; color:var(--blue)}
.btn--white:hover{background:var(--blue-bg)}
.btn--sky{background:var(--sky); color:#08243a}
.btn--sky:hover{background:#7dd3fc}

/* ---------- pigułki ---------- */
.pill{display:inline-block; padding:6px 14px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.06em}
.pill--blue{background:var(--blue-bg); color:var(--blue)}
.pill--soft{background:var(--blue-bg); color:var(--blue); letter-spacing:.02em}
.pill--sky{background:rgba(56,189,248,.15); color:var(--sky)}

/* ---------- nawigacja ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(6px); border-bottom:1px solid var(--line)}
.nav__in{display:flex; align-items:center; gap:24px; height:72px}
.brand{display:flex; align-items:center; gap:10px; margin-right:auto}
.brand__mark{display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:var(--blue); color:#fff}
.brand__mark svg{width:20px; height:20px}
.brand__txt{display:flex; flex-direction:column; line-height:1.15}
.brand__txt strong{font-size:18px; font-weight:800}
.brand__txt small{font-size:11px; color:var(--muted)}
.nav__links{display:flex; gap:22px}
.nav__links a{font-size:14px; font-weight:600; color:var(--slate-mut)}
.nav__links a:hover{color:var(--blue)}
.nav__cta{display:flex; align-items:center; gap:10px}
.nav__burger{display:none; flex-direction:column; gap:4px; width:42px; height:38px; align-items:center; justify-content:center; background:none; border:1px solid var(--line); border-radius:10px; cursor:pointer}
.nav__burger span{display:block; width:18px; height:2px; background:var(--ink); border-radius:2px}
.nav__mobile{display:none; flex-direction:column; gap:4px; padding:12px 20px 20px; border-bottom:1px solid var(--line); background:#fff}
.nav__mobile a{padding:12px 4px; font-weight:600; color:var(--slate)}
.nav__mobile .btn{margin-top:8px}

/* ---------- hero ---------- */
.hero{padding:72px 0 24px}
.hero__in{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.hero h1{font-size:clamp(32px,4.2vw,52px); margin:18px 0 16px}
.lead{font-size:17px; color:var(--muted); max-width:56ch}
.hero__actions{display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 18px}
.hero__notes{display:flex; flex-wrap:wrap; gap:20px; font-size:14px; color:var(--muted)}
.hero__notes li{display:flex; align-items:center; gap:7px}
.tick{width:18px; height:18px; fill:none; stroke:var(--green); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}

/* okno podglądu */
.win{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden}
.win__bar{display:flex; align-items:center; gap:6px; padding:12px 16px; background:var(--pale); border-bottom:1px solid var(--line)}
.win__bar i{width:10px; height:10px; border-radius:50%; background:var(--line)}
.win__bar i:first-child{background:#FCA5A5} .win__bar i:nth-child(2){background:#FCD34D} .win__bar i:nth-child(3){background:#86EFAC}
.win__bar span{margin-left:10px; font-size:12px; color:var(--muted); font-weight:600}
.win__body{padding:16px; display:grid; gap:10px}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:4px}
.stat{background:var(--pale); border:1px solid var(--line); border-radius:12px; padding:10px 12px; display:grid; gap:2px}
.stat__k{font-size:11px; color:var(--muted); font-weight:600}
.stat__v{font-size:22px; font-weight:800}
.stat__v--red{color:#DC2626}
.appt{display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--line); border-left-width:4px; border-radius:12px; background:#fff}
.appt--green{border-left-color:var(--emerald)} .appt--blue{border-left-color:var(--blue)} .appt--amber{border-left-color:var(--amber)}
.appt__t{font-weight:800; font-size:13px; color:var(--slate); min-width:44px}
.appt__d{display:grid; margin-right:auto}
.appt__d strong{font-size:14px} .appt__d small{font-size:12px; color:var(--muted)}
.chip{padding:4px 10px; border-radius:999px; font-size:11px; font-weight:800}
.chip--green{background:#DCFCE7; color:var(--green)} .chip--blue{background:var(--blue-bg); color:var(--blue)} .chip--amber{background:#FEF3C7; color:#B45309}

/* ---------- pasek zaufania ---------- */
.trust{padding:36px 0}
.trust__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.trust__it{display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px}
.trust__it svg{flex:0 0 auto; width:24px; height:24px; fill:none; stroke:var(--blue); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.trust__it strong{display:block; font-size:14px}
.trust__it span{font-size:13px; color:var(--muted)}

/* ---------- sekcje ---------- */
.sec{padding:72px 0}
.sec__head{text-align:center; max-width:720px; margin:0 auto 40px; display:grid; gap:12px; justify-items:center}
.sec__head h2{font-size:clamp(26px,3.2vw,34px)}
.sec__head p{color:var(--muted)}
.sec__head--light h2{color:#fff}
.sec__head--light p{color:var(--cool)}

/* zakładki funkcji */
.tabs{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:32px}
.tab{padding:12px 18px; border-radius:12px; border:1px solid var(--line); background:#fff; font-weight:700; font-size:14px; color:var(--slate); cursor:pointer; font-family:inherit}
.tab:hover{border-color:var(--blue); color:var(--blue)}
.tab.is-on{background:var(--blue); border-color:var(--blue); color:#fff}
.panel{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.panel[hidden]{display:none}
.panel__copy{display:grid; gap:14px; justify-items:start}
.panel__copy h3{font-size:clamp(21px,2.4vw,27px)}
.panel__copy p{color:var(--muted)}
.ticks{display:grid; gap:10px}
.ticks li{position:relative; padding-left:28px; font-size:15px; color:var(--slate)}
.ticks li::before{
  content:""; position:absolute; left:0; top:.42em; width:17px; height:17px; border-radius:50%;
  background:#DCFCE7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2316A34A' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* makiety */
.mock{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:18px; display:grid; gap:9px}
.mock__h{font-size:12px; font-weight:800; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; padding-bottom:8px; border-bottom:1px solid var(--line)}
.mock__row{display:flex; align-items:center; gap:10px; font-size:14px; padding:8px 10px; border-radius:10px; background:var(--pale)}
.mock__row b{font-weight:800; min-width:44px}
.mock__row em{margin-left:auto; font-style:normal; font-size:12px; color:var(--muted)}
.mock__row--muted{opacity:.55}
.dot{width:9px; height:9px; border-radius:50%; background:var(--cool)}
.dot--green{background:var(--emerald)} .dot--blue{background:var(--blue)} .dot--amber{background:var(--amber)}
.mock__check{display:flex; align-items:center; gap:10px; font-size:14px; padding:8px 10px; border-radius:10px; background:var(--pale)}
.cbx{display:grid; place-items:center; width:20px; height:20px; border-radius:6px; background:#DCFCE7; color:var(--green); font-weight:800; font-size:12px}
.mock__sign{margin-top:4px; border:1px dashed var(--line); border-radius:12px; padding:10px 12px}
.mock__sign span{font-size:11px; color:var(--muted); font-weight:700}
.mock__sign svg{display:block; width:100%; height:40px; fill:none; stroke:var(--ink); stroke-width:2.2; stroke-linecap:round}
.kv{display:flex; justify-content:space-between; align-items:center; font-size:14px; padding:9px 10px; border-radius:10px; background:var(--pale)}
.kv span{color:var(--muted)} .kv b{font-weight:800}
.kv--hi{background:var(--blue-bg)} .kv--hi b{color:var(--blue)}
.kv .low{color:#DC2626}
.mock__note{font-size:13px; color:var(--slate); background:#FEF3C7; border-radius:10px; padding:9px 11px}
.mock__foot{font-size:12px; color:var(--muted); padding-top:8px; border-top:1px solid var(--line)}

/* ---------- kalkulator ---------- */
.calc{background:linear-gradient(135deg,var(--ink),var(--dark)); border-radius:26px; padding:clamp(26px,4vw,52px); box-shadow:var(--shadow-lg)}
.calc .sec__head{margin-bottom:34px}
.calc__grid{display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:center}
.calc__inputs{display:grid; gap:26px}
.fld{display:grid; gap:12px}
.fld__top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; color:#fff; font-size:15px; font-weight:600}
.fld__top b{color:var(--sky); font-size:18px; font-weight:800}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px; background:var(--slate); outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:var(--sky); border:3px solid #0b1220; cursor:pointer}
input[type=range]::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:var(--sky); border:3px solid #0b1220; cursor:pointer}
.calc__out{background:rgba(0,0,0,.28); border:1px solid var(--slate); border-radius:18px; padding:24px; display:grid; gap:18px}
.res{display:grid; gap:4px}
.res__k{font-size:13px; color:var(--cool); font-weight:600}
.res__v{font-size:clamp(21px,2.6vw,27px); font-weight:800; color:#fff}
.res__v--money{color:var(--emerald)}

/* ---------- cennik ---------- */
.billing{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; margin-bottom:34px; font-size:14px; color:var(--muted)}
.billing .is-bold{color:var(--ink); font-weight:800}
.sw{position:relative; width:50px; height:28px; border-radius:99px; border:none; background:var(--cool); cursor:pointer; padding:0; transition:background-color .15s}
.sw.is-on{background:var(--blue)}
.sw i{position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:transform .15s}
.sw.is-on i{transform:translateX(22px)}
.save{background:#DCFCE7; color:var(--green); font-size:10px; font-weight:800; padding:4px 9px; border-radius:99px}
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start}
.tier{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; display:grid; gap:14px; box-shadow:var(--shadow)}
.tier--pop{border-color:var(--blue); border-width:2px; box-shadow:var(--shadow-lg)}
.tier__badge{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--blue); color:#fff; font-size:11px; font-weight:800; padding:5px 14px; border-radius:99px; white-space:nowrap}
.tier h3{font-size:21px}
.tier__d{font-size:14px; color:var(--muted); min-height:42px}
.tier__p{display:flex; align-items:baseline; gap:7px; padding-bottom:6px; border-bottom:1px solid var(--line)}
.tier__p b{font-size:42px; font-weight:800; letter-spacing:-.03em}
.tier__p span{font-size:13px; color:var(--muted); font-weight:600}
.tier .ticks li{font-size:14px}
.tier .btn{margin-top:6px}

/* ---------- opinie ---------- */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.quote{margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; display:grid; gap:18px; box-shadow:var(--shadow)}
.quote blockquote{margin:0; font-size:15px; color:var(--slate); line-height:1.65}
.quote blockquote::before{
  content:"„"; display:block; font-size:44px; line-height:1; height:26px;
  color:var(--blue); font-weight:800;
}
.quote figcaption{display:flex; align-items:center; gap:12px}
.ava{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--blue-bg); color:var(--blue); font-weight:800; font-size:13px}
.quote figcaption strong{display:block; font-size:14px}
.quote figcaption small{font-size:12px; color:var(--muted)}

/* ---------- FAQ ---------- */
.faq{background:#fff; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:12px; overflow:hidden}
.faq[open]{border-color:var(--blue)}
.faq summary{list-style:none; cursor:pointer; padding:18px 52px 18px 20px; font-weight:700; font-size:15px; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:20px; top:50%; width:11px; height:11px; margin-top:-6px;
  border-right:2.4px solid var(--muted); border-bottom:2.4px solid var(--muted);
  transform:rotate(45deg); transition:transform .15s;
}
.faq[open] summary::after{transform:rotate(-135deg); border-color:var(--blue)}
.faq__a{padding:0 20px 20px; color:var(--muted); font-size:15px}

/* ---------- CTA ---------- */
.cta{background:linear-gradient(135deg,var(--blue),var(--blue-dark)); border-radius:26px; padding:clamp(32px,5vw,60px); text-align:center; display:grid; gap:16px; justify-items:center}
.cta h2{color:#fff; font-size:clamp(24px,3.4vw,36px)}
.cta p{color:#DBEAFE; max-width:56ch}

/* ---------- stopka ---------- */
.foot{background:var(--ink); color:#fff; padding:44px 0 28px; margin-top:20px}
.foot__in{display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between}
.foot__brand strong{display:block; font-size:19px}
.foot__brand span{font-size:13px; color:var(--cool)}
.foot__links{display:flex; flex-wrap:wrap; gap:22px; font-size:14px; color:var(--cool)}
.foot__links a:hover{color:#fff}
.foot__copy{margin-top:26px; padding-top:20px; border-top:1px solid var(--slate); font-size:13px; color:var(--cool)}

/* ---------- strony prawne (polityka/regulamin) ---------- */
.legal{padding:56px 0 88px}
.legal__in{max-width:780px; margin-inline:auto}
.legal h1{font-size:clamp(28px,4vw,38px)}
.legal__updated{color:var(--muted); font-size:14px; margin-top:10px; margin-bottom:8px}
.legal__intro{color:var(--muted); font-size:15px; max-width:64ch}
.legal section{margin-top:40px}
.legal h2{font-size:21px; margin-bottom:14px}
.legal h3{font-size:16px; margin:20px 0 8px}
.legal p{color:var(--slate); margin-bottom:14px}
.legal ul{list-style:disc; padding-left:22px; margin-bottom:14px; display:block}
.legal li{color:var(--slate); margin-bottom:8px; line-height:1.6}
.legal a{color:var(--blue); text-decoration:underline}
.legal strong{color:var(--ink)}

/* ---------- responsywność ---------- */
@media (max-width:1000px){
  .hero__in,.panel,.calc__grid{grid-template-columns:1fr; gap:36px}
  .hero{padding-top:48px}
  .trust__grid{grid-template-columns:repeat(2,1fr)}
  .tiers,.quotes{grid-template-columns:1fr}
  .tier--pop{order:-1}
}
@media (max-width:820px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
  .nav__mobile.is-open{display:flex}
  .sec{padding:56px 0}
  .stats{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .trust__grid{grid-template-columns:1fr}
  .hero__actions .btn{width:100%}
}