<style>
   :root{
        --bg: #f7f9fa;
        --card: #ffffff;
        --accent: #2ecc71;
        --accent-dark: #27ae60;
        --muted: #6b7280;
        --danger: #e11d48;
    }

/* --- RESET & PODSTAWY --- */
*{box-sizing:border-box;}
html,body{height:100%;}
body { font-family: "Verdana", sans-serif; background: var(--bg); padding: 4px 16px; color:#111; }

/* --- UKŁAD GŁÓWNY --- */
.wrap{
  width:100%;
  max-width:10000px;
  background:var(--card);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(2,6,23,0.08);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  margin:0 auto;
}

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px 32px;
  border-bottom:1px solid #eef2f6;
  position:relative;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.logo{
  width:75px;
  height:75px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(46,204,113,0.18);
}
.brand h1{font-size:18px; margin:0;}
.brand p{margin:0; font-size:13px; color:var(--muted)}

nav{
  display:flex;
  gap:12px;
  align-items:center;
}

.btn {
  padding:10px 14px;
  border-radius:10px;
  border:0;
  cursor:pointer;
  font-weight:600;
  text-decoration:none;
}
.btn-ghost{background:transparent; color:var(--muted);}
.btn-primary{background: #006400; color:white; box-shadow:0 6px 12px rgba(39,174,96,0.14);}
.btn-outline{background:transparent; border:1px solid #e6eef0; color:#111;}

.hamburger{
  display:none;
  background:transparent;
  border:none;
  font-size:26px;
  cursor:pointer;
}

main{
  display:grid;
  grid-template-columns:1fr 430px;
  gap:32px;
  padding:36px 40px;
  align-items:start;
}

.hero h2{font-size:34px; margin:0 0 12px 0; line-height:1.05;}
.hero p.lead{color:var(--muted); font-size:16px; margin:0 0 20px;}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap;}
.feature-list{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap;}

.card{
  background:linear-gradient(180deg,#fff,#fbfffb);
  border-radius:12px;
  padding:18px;
  box-shadow:0 8px 20px rgba(10,20,40,0.04);
}

.phone-mock{
  width:100%;
  max-width:380px;
  margin:0 auto;
  display:flex;
  justify-content:center;
}
.phone {
  width:320px;
  height:640px;
  border-radius:28px;
  background:linear-gradient(180deg,#f8fff7,#ffffff);
  border:12px solid #0f1720;
  position:relative;
  box-shadow: 0 15px 40px rgba(6,20,10,0.25);
  overflow:hidden;
}
.phone .screen{
  position:absolute;
  inset:14px;
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff,#fbfff9);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:15px;
}
.mock-list{flex:1; overflow:auto;}
.mock-list h4{margin:6px 0 2px 0; font-size:13px; color:var(--muted);}
.mock-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 10px;
  border-radius:10px;
  margin:8px 0;
  background:#f4fff4;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,0.02);
}
.mock-item.done{background:#eef8ee; opacity:0.85; text-decoration:line-through; color:#6b6b6b;}
.mock-item .name{font-weight:600; font-size:18px;}
.mock-item.done .name{font-size:18px;}

.how{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:20px;
}
.how .step{
  padding:14px;
  border-radius:10px;
  background:linear-gradient(180deg,#fff,#fbfbfb);
  text-align:center;
  box-shadow:0 6px 14px rgba(10,20,30,0.04);
}
.how .step .ico{font-size:22px; margin-bottom:8px;}
.how .step p{margin:0; color:var(--muted); font-size:14px;}

.full-width-section {
  width: 100%;
  padding: 40px 20px;
  background: var(--bg);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.full-width-section .benefit,
.full-width-section .package {
  flex: 1 1 220px;
  max-width: 600px;
}

footer{
  padding:20px 32px;
  border-top:1px solid #eef2f6;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.legal{color:var(--muted); font-size:13px;}

.priceold{font-size:24px; font-weight:700; margin-bottom:12px; text-decoration:line-through;}

/* --- DODANE Z PIERWSZEGO STYLU --- */
table { width:100%; border-collapse:collapse; margin-top:15px; background:#fff; }
th, td { border:0px solid #ccc; padding:8px; text-align:center; }
th { background:#eee; }
ul { list-style:none; padding:0; margin:0; }
li { padding:5px 0; }
.lista { font-size:22px; }
.flashMessage {
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #cc0;
  background: #ffd;
  transition: opacity 0.5s ease-out;
  opacity: 1;
}
.flashMessage.hide { opacity: 0; }

/* --- PRZYCISKI SPECJALNE Z PIERWSZEGO STYLU --- */
.zapiszBtn {
  background-color: #f39c12;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s ease;
  width: auto; 
}
.zapiszBtn:hover { background-color: #e67e22; }

.kupioneBtn {
  background-color: #2ecc71;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s ease;
  width: auto; 
}
.kupioneBtn:hover { background-color: #27ae60; }

.dodajBtn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s ease;
}
.dodajBtn:hover { background-color: #2980b9; }

.usunBtn {
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s ease;
  width: auto; 
}
.usunBtn:hover { background-color: #c0392b; }

.kopiujBtn {
  background-color: #8e44ad;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s ease;
}
.kopiujBtn:hover { background-color: #732d91; }

.tooltip { font-size: 14px; font-weight: bold; }

.voiceBtn.start { background-color: #2ecc71; color: white; }
.voiceBtn.stop { background-color: #e74c3c; color: white; }

@media (max-width:1000px){
  main{grid-template-columns:1fr; padding:24px;}
  .phone{width:300px; height:560px; margin-top:24px;}
  .how{grid-template-columns:1fr;}
}
@media (max-width:768px){
  body{padding:18px;}
  header{padding:16px;}
  .logo{width:44px; height:44px;}
  .hero h2{font-size:26px;}
  .phone{width:260px; height:480px;}
  nav{display:none; position:absolute; top:80px; right:16px; background:white; flex-direction:column; gap:0; padding:12px; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,0.15);}
  nav.show{display:flex;}
  nav a{padding:8px 0; width:100%; text-align:center;}
  .hamburger{display:block;}
}
</style>