/* TwojaStrona — gotowa strona ofertowa (jasny, elegancki styl) */
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface2:#f8fafc;          /* slate-50 */
  --line:#e2e8f0;              /* slate-200 */
  --text:#0b1020;
  --muted:#475569;             /* slate-600 */
  --muted2:#64748b;            /* slate-500 */
  --accent:#0ea5e9;            /* sky-500 */
  --accent2:#38bdf8;           /* sky-400 */
  --accent3:#1d4ed8;           /* blue-700 */
  --shadow: 0 12px 40px rgba(2, 6, 23, .10);
  --shadow2: 0 10px 24px rgba(2, 6, 23, .08);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color:var(--text);
  line-height:1.55;
}

a{color:inherit}
.container{width:min(1120px, 92vw); margin:0 auto}

/* NAV */
.nav{
  position:sticky; top:0; z-index:20;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; gap:14px;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.logo{
  width:42px; height:42px; border-radius:14px;
  background: linear-gradient(135deg, rgba(14,165,233,1), rgba(56,189,248,1));
  box-shadow: 0 10px 22px rgba(14,165,233,.25);
  display:grid; place-items:center;
}
.logo svg{width:22px; height:22px; opacity:.95; fill:#ffffff}
.brand .t1{font-weight:800; letter-spacing:.2px}
.brand .t2{display:block; font-size:12px; color:var(--muted2); margin-top:1px}

.nav-right{display:flex; align-items:center; gap:10px}
.nav-toggle{
  display:none;
  border:1px solid var(--line);
  background: var(--surface);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
  box-shadow: var(--shadow2);
}
.nav-toggle svg{width:18px; height:18px; fill: var(--text); opacity:.92}

.nav-links{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.nav-links a{
  text-decoration:none; font-size:14px; color:var(--muted);
  padding:9px 10px; border-radius:14px;
}
.nav-links a:hover{color:var(--text); background: rgba(2,6,23,.04)}

.cta{
  text-decoration:none;
  padding:10px 12px;
  border-radius:16px;
  background: linear-gradient(135deg, rgba(14,165,233,.18), rgba(56,189,248,.20));
  border:1px solid rgba(14,165,233,.30);
  color: var(--text);
}
.cta:hover{background: linear-gradient(135deg, rgba(14,165,233,.24), rgba(56,189,248,.26)); border-color: rgba(14,165,233,.42)}

/* HERO */
.hero{padding:44px 0 18px}
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(14,165,233,.08);
  border:1px solid rgba(14,165,233,.18);
  color:var(--muted);
  font-size:13px;
}
.dot{width:9px; height:9px; border-radius:999px; background: var(--accent); box-shadow: 0 0 0 4px rgba(14,165,233,.16)}

.hgrid{display:grid; gap:18px; grid-template-columns: 1.12fr .88fr; align-items:start; margin-top:18px}
.h1{
  font-size: clamp(30px, 4.0vw, 54px);
  line-height:1.05;
  margin:0;
  letter-spacing:-.6px;
}
.lead{margin:14px 0 0; color:var(--muted); font-size:16px; max-width:70ch}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}

/* BUTTONS */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  text-decoration:none;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow2);
  cursor:pointer;
}
.btn:hover{background: rgba(2,6,23,.03); border-color: rgba(148,163,184,.9)}
.btn.primary{
  background: linear-gradient(135deg, rgba(14,165,233,1), rgba(56,189,248,1));
  border-color: rgba(14,165,233,.50);
  color:#ffffff;
}
.btn.primary:hover{filter: brightness(0.98)}
.btn.ghost{box-shadow:none}

/* CARDS */
.card{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-card{padding:16px}
.badges{display:flex; flex-wrap:wrap; gap:10px}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 11px;
  border-radius:999px;
  font-size:13px;
  color:var(--muted);
  border:1px solid var(--line);
  background: var(--surface2);
}
.badge strong{color:var(--text); font-weight:700}

/* SECTIONS */
.section{padding:24px 0}
.section h2{margin:0 0 10px; letter-spacing:-.2px}
.section p{margin:0 0 16px; color:var(--muted)}

.grid{display:grid; gap:14px}
.grid.cols3{grid-template-columns: repeat(3, 1fr)}
.grid.cols2{grid-template-columns: repeat(2, 1fr)}

.feature{padding:14px}
.feature h3{margin:0; font-size:16px}
.feature p{margin:10px 0 0; color:var(--muted)}

.price{padding:16px}
.price .top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.price .name{font-weight:820}
.price .value{
  padding:8px 10px; border-radius:999px;
  border:1px solid rgba(14,165,233,.28);
  background: rgba(14,165,233,.08);
  color: var(--text);
  white-space:nowrap;
}
.price ul{margin:12px 0 0 0; padding:0 0 0 18px; color:var(--muted)}
.price li{margin:6px 0}
.price .note{margin-top:12px; font-size:12px; color:var(--muted2)}

.gallery-item{overflow:hidden}
.gallery-item img{
  display:block; width:100%; height:220px; object-fit:cover;
  background: var(--surface2);
}
.gallery-item .cap{padding:12px 14px}
.gallery-item .cap strong{display:block}
.gallery-item .cap span{display:block; color:var(--muted); font-size:13px; margin-top:4px}

/* FORM */
.form{padding:16px}
.form-row{display:grid; gap:10px; grid-template-columns: 1fr 1fr}
label{display:block; font-size:13px; color:var(--muted); margin:12px 0 6px}
input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: var(--surface);
  color:var(--text);
  outline:none;
}
textarea{min-height:130px; resize:vertical}
input:focus, textarea:focus{
  border-color: rgba(14,165,233,.65);
  box-shadow: 0 0 0 4px rgba(14,165,233,.14);
}
.help{color:var(--muted2); font-size:12px; margin-top:8px}
.check{display:flex; gap:10px; align-items:flex-start; margin-top:12px; color:var(--muted); font-size:13px}
.check input{width:18px; height:18px; margin-top:2px}
.form-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}

/* NOTICES */
.notice{
  padding:12px 14px;
  border-radius:16px;
  background: rgba(52,211,153,.12);
  border: 1px solid rgba(52,211,153,.28);
  color: #0b1020;
}
.notice.bad{
  background: rgba(251,113,133,.12);
  border-color: rgba(251,113,133,.28);
}

.faq{padding:14px}
.faq details{
  border:1px solid var(--line);
  background: var(--surface2);
  border-radius:16px;
  padding:12px 14px;
}
.faq details + details{margin-top:10px}
.faq summary{cursor:pointer; font-weight:750; color: var(--text)}
.faq p{margin:10px 0 0; color:var(--muted)}

.hr{height:1px; background: var(--line); margin:22px 0}
.footer{padding:24px 0 44px; color:var(--muted2); font-size:13px}
small.muted{color:var(--muted2)}
kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 7px;
  background: var(--surface2);
  border: 1px solid var(--line);
  color: var(--text);
}

/* RESPONSYWNOŚĆ / SMARTFON */
@media (max-width: 980px){
  .hgrid{grid-template-columns:1fr}
}
@media (max-width: 920px){
  .grid.cols3{grid-template-columns:1fr}
}
@media (max-width: 840px){
  .grid.cols2{grid-template-columns:1fr}
}

/* Mobile nav */
@media (max-width: 860px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .nav.open .nav-links{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:10px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.96);
    border-radius:16px;
    box-shadow: var(--shadow2);
    position:absolute;
    right:4vw;
    top:66px;
    width:min(340px, 92vw);
  }
  .nav.open .nav-links a{padding:12px 12px}
  .nav.open .nav-links .cta{display:block; text-align:center}
}


/* ===============================
   PREMIUM SaaS SCROLL EFFECTS
================================ */

.reveal {
  opacity: 0;
  transform: translateY(60px) scale(0.96);
  filter: blur(8px);
  transition:
    opacity 1s cubic-bezier(.16,1,.3,1),
    transform 1s cubic-bezier(.16,1,.3,1),
    filter 1s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform, filter;
}

.reveal.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.reveal-left {
  transform: translateX(-80px) scale(0.96);
}

.reveal-right {
  transform: translateX(80px) scale(0.96);
}

.reveal-left.show,
.reveal-right.show {
  transform: translateX(0) scale(1);
}

/* Subtle hover lift like SaaS cards */
.card,
.feature {
  transition: transform .4s cubic-bezier(.16,1,.3,1),
              box-shadow .4s cubic-bezier(.16,1,.3,1);
}

.card:hover,
.feature:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

/* Section spacing polish */
.section {
  transition: opacity .6s ease;
}


/* ===============================
   BACK TO TOP BUTTON (Premium)
================================ */

#backToTop {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: white;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(20px);
  transition: all .4s cubic-bezier(.16,1,.3,1);
  z-index: 9999;
}

#backToTop.visible {
  opacity: 1;
  transform: translateY(0);
}

#backToTop:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}