<style>

    *{box-sizing:border-box;}
    html,body{height:100%;}
    body{
      margin:0;
      font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background:linear-gradient(180deg,#fbfdfb 0%,var(--bg) 100%);
      color:#111827;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.45;
      padding:32px;
    }

    .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:var(--accent); color:white; box-shadow:0 6px 12px rgba(39,174,96,0.14);}
    .btn-outline{background:transparent; border:1px solid #e6eef0; color:#111;}

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



    .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);
    }

    
    .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 sections: korzyści i pakiety */
    .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: 800px;
    }

    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;}

  
	
	
	    :root{
        --bg: #f7f9fa;
        --card: #ffffff;
        --accent: #2ecc71;
        --accent-dark: #27ae60;
        --muted: #6b7280;
        --danger: #e11d48;
    }
    *{box-sizing:border-box}
    body { font-family: "Verdana", sans-serif; background: var(--bg); padding: 40px 16px; color:#111; }
    .wrap { margin: 0 auto; }
    .card { background: var(--card); padding: 22px; border-radius: 10px; box-shadow: 0 6px 18px rgba(17,24,39,0.06); }
    h2 { text-align:center; margin-top:0; font-size:22px; }
    form { display:block; margin-top:8px; }
    label.field { display:block; margin-bottom:8px; font-size:13px; color:var(--muted); }
    input[type="text"], input[type="email"], input[type="password"], select {
        width:100%; padding:12px 14px; border-radius:8px; border:1px solid #d1d5db; font-size:14px;
        background: #fff;
    }
    select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%); background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
    .row { display:flex; gap:10px; flex-wrap:wrap; }
    .checkbox { display:flex; align-items:center; gap:8px; margin:10px 0; color:var(--muted); font-size:14px; }
    button { width:100%; padding:12px; border-radius:8px; border:none; background:var(--accent); color:white; font-weight:600; cursor:pointer; font-size:15px; }
    button:hover { background:var(--accent-dark); }
    .note { font-size:13px; color:var(--muted); margin-top:8px; }
    .error { color:var(--danger); background: rgba(225,29,72,0.06); padding:10px; border-radius:6px; margin-bottom:12px; }
    .success { color: #065f46; background: rgba(6,95,70,0.06); padding:10px; border-radius:6px; margin-bottom:12px; }
    @media (max-width:520px){ .card{padding:16px} }
	
	 .art-button {
      padding:10px 14px;
      border-radius:10px;
      border:0;
      cursor:pointer;
      font-weight:600;
      text-decoration:none;
    }
    
    .art-button{background:red; color:white; box-shadow:0 6px 12px rgba(39,174,96,0.14);}
	
	.art-button-zapisz {
      padding:10px 14px;
      border-radius:10px;
      border:0;
      cursor:pointer;
      font-weight:600;
      text-decoration:none;
    }
    
    .art-button-zapisz{background:green; color:white; box-shadow:0 6px 12px rgba(39,174,96,0.14);}
	
	
	.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;
    }
	
	
	
    /* responsywność */
    @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:600px){
      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;}
    }
	.priceold{font-size:24px; font-weight:700; margin-bottom:12px; text-decoration:line-through;}



.hamburger {
  color: #111 !important; /* upewnia się, że symbol ☰ ma ciemny kolor */
  z-index: 9999;
  position: relative;
}

@media (max-width:600px){
  .hamburger {
    display: block !important; /* wymusza widoczność */
  }
}

#mainNav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu {
  display: flex;
  gap: 20px;
}

.menu-item {
  position: relative;
}

/* POZIOM 2 */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  min-width: 200px;
  display: none;
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

/* POZIOM 3 */
.dropdown-sub {
  position: absolute;
  top: 0;
  left: 100%;
  background: white;
  min-width: 200px;
  display: none;
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

/* pokazanie po najechaniu */
.menu-item:hover > .dropdown {
  display: block;
}

.dropdown .menu-item:hover > .dropdown-sub {
  display: block;
}

/* styl */
.dropdown li,
.dropdown-sub li {
  padding: 10px 15px;
}

.dropdown li a,
.dropdown-sub li a {
  text-decoration: none;
  display: block;
  color: #333;
}

.dropdown li:hover,
.dropdown-sub li:hover {
  background: #f5f5f5;
}


.menu-item {
  position: relative;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  background: white;
  min-width: 220px;
}

.dropdown-sub {
  position: absolute;
  top: 0;
  left: 100%;
  display: none;
  background: white;
  min-width: 220px;
}

.menu-item:hover > .dropdown {
  display: block;
}

.menu-item:hover > .dropdown-sub {
  display: block;
}

  </style>