/* ===================================================================
   MIESZKANIE.HTML, strona "Dla mieszkania"
   Paleta specyficzna dla tej podstrony (czerń + #F5C800), zgodna z
   marką Drobot, ale z osobnym, nieco cieplejszym żółtym akcentem
   zgodnie z briefem klienta.
   =================================================================== */

.mk-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 30px; border-radius:999px; font-weight:700; font-size:14px;
  letter-spacing:.3px; cursor:pointer; border:2px solid transparent;
  transition:all .3s ease; text-decoration:none; font-family:inherit;
  text-align:center; max-width:100%;
}
.mk-btn-primary{background:#F5C800; color:#111;}
.mk-btn-primary:hover{background:#111; color:#F5C800; border-color:#F5C800; transform:translateY(-2px);}
.mk-btn-outline{background:transparent; color:#F5C800; border-color:#F5C800;}
.mk-btn-outline:hover{background:#F5C800; color:#111; transform:translateY(-2px);}
.mk-btn-block{width:100%;}

/* ---------- HERO ---------- */
.mk-hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  background:
    linear-gradient(160deg, rgba(10,10,10,.94) 0%, rgba(26,26,26,.9) 100%),
    url('../images/mieszkanie-hero.jpg') center/cover no-repeat;
  background-color:#0a0a0a;
  overflow:hidden; padding:130px 0 90px;
}
.mk-hero-grid-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(245,200,0,.05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(245,200,0,.05) 0 1px, transparent 1px 48px);
  mask-image:radial-gradient(circle at 70% 45%, #000 0%, transparent 75%);
}
.mk-hero-inner{
  position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr;
  gap:60px; align-items:center;
}
.mk-hero-text h1{
  color:#fff; font-size:clamp(32px,4.6vw,52px); font-weight:800; letter-spacing:-.5px;
  line-height:1.15; margin-bottom:20px; text-shadow:0 2px 20px rgba(0,0,0,.4);
}
.mk-hero-desc{color:#ccc; font-size:15.5px; line-height:1.75; max-width:480px; margin-bottom:36px; text-shadow:0 2px 12px rgba(0,0,0,.4);}
.mk-hero-actions{display:flex; gap:16px; flex-wrap:wrap;}

.mk-scroll-hint{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:2;
  color:#F5C800; opacity:.75; animation:mkBounce 2s ease-in-out infinite;
  display:flex; align-items:center; justify-content:center;
}
.mk-scroll-hint:hover{opacity:1;}
@keyframes mkBounce{0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(10px);}}

/* ---------- PHONE MOCKUP (hero + airbnb), proporcje zbliżone do iPhone 16 ---------- */
.mk-phone{
  width:340px; max-width:100%; margin:0 auto; background:#0c0c0c; border:12px solid #1c1c1e; border-radius:56px;
  box-shadow:0 30px 80px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(245,200,0,.08);
  overflow:hidden; position:relative;
}
.mk-phone::before{
  content:""; position:absolute; top:16px; left:50%; transform:translateX(-50%);
  width:104px; height:30px; background:#000; border-radius:20px; z-index:2;
}
.mk-phone-screen{background:#111; padding:56px 24px 34px; min-height:560px;}
.mk-phone-status{display:flex; justify-content:space-between; font-size:12px; color:#666; margin-bottom:26px; font-weight:600;}
.mk-phone-title{font-size:17px; font-weight:800; color:#fff; margin-bottom:22px;}
.mk-phone-rooms{display:grid; gap:13px;}
.mk-phone-room{
  display:flex; justify-content:space-between; align-items:center;
  background:#1a1a1a; border:1px solid #222; border-radius:14px; padding:18px 19px;
  transition:border-color .3s ease;
}
.mk-phone-room:has(.mk-toggle.on){border-color:rgba(245,200,0,.35);}
.mk-room-name{font-size:14.5px; font-weight:600; color:#ccc;}
.mk-toggle{width:46px; height:25px; border-radius:999px; background:#333; position:relative; flex:none; transition:background .35s ease;}
.mk-toggle-knob{position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:#888; transition:transform .35s ease, background .35s ease;}
.mk-toggle.on{background:#F5C800;}
.mk-toggle.on .mk-toggle-knob{transform:translateX(21px); background:#111;}

.mk-phone-alt .mk-phone-screen{min-height:auto; padding-bottom:40px;}

/* ---------- SEKCJA 2: 3 POWODY ---------- */
.mk-reasons{background:#0d0d0d;}
.mk-section-head{text-align:center; max-width:680px; margin:0 auto 60px;}
.mk-section-head h2{
  color:#fff; font-size:clamp(28px,4vw,40px); font-weight:800; letter-spacing:-.5px;
  position:relative; padding-bottom:22px; display:inline-block;
}
.mk-section-head h2::after{
  content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:60px; height:3px; background:#F5C800; border-radius:2px;
}
.mk-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-bottom:70px;}
.mk-card{
  background:#1a1a1a; border:1px solid #222; border-radius:16px; padding:40px;
  transition:border-color .3s ease, transform .3s ease;
}
.mk-card:hover{border-color:#F5C800; transform:translateY(-6px);}
.mk-card-icon{
  width:52px; height:52px; border-radius:14px; background:rgba(245,200,0,.1); color:#F5C800;
  display:flex; align-items:center; justify-content:center; margin-bottom:24px;
}
.mk-card-icon svg{width:26px; height:26px;}
.mk-card h3{color:#fff; font-size:19px; margin-bottom:14px;}
.mk-card p{color:#999; font-size:14.5px; line-height:1.75;}

.mk-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;}
.mk-stat-num{display:block; font-size:clamp(24px,3.6vw,36px); font-weight:900; color:#F5C800; margin-bottom:8px;}
.mk-stat-label{font-size:12.5px; color:#fff;}

/* ---------- SEKCJA 3: AIRBNB ---------- */
.mk-airbnb{
  background:#111;
  background-image:radial-gradient(circle at 82% 15%, rgba(245,200,0,.06), transparent 50%);
  position:relative;
}
.mk-airbnb-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:64px; align-items:start;}
.mk-label{display:block; color:#F5C800; font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:16px;}
.mk-airbnb-text h2{color:#fff; font-size:clamp(26px,4vw,38px); font-weight:800; letter-spacing:-.5px; margin-bottom:24px;}
.mk-airbnb-intro{color:#ccc; font-size:16px; line-height:1.8; margin-bottom:32px;}

.mk-problems{display:grid; gap:24px; margin-bottom:36px;}
.mk-problem{display:flex; gap:18px;}
.mk-problem-num{
  flex:none; width:32px; height:32px; border-radius:50%; background:rgba(245,200,0,.12); color:#F5C800;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; margin-top:2px;
}
.mk-problem-body{color:#ddd; font-size:15px; line-height:1.7;}
.mk-problem-body strong{color:#fff;}
.mk-problem-body .mk-solution{display:block; margin-top:8px; color:#aaa; font-size:14.5px; line-height:1.75;}

.mk-checklist{display:grid; gap:14px; margin-bottom:38px;}
.mk-checklist li{display:flex; gap:12px; align-items:flex-start; color:#ddd; font-size:14.5px; line-height:1.6;}
.mk-checklist svg{flex:none; width:20px; height:20px; color:#111; background:#F5C800; border-radius:50%; padding:4px; margin-top:1px;}

.mk-apt-list{display:grid; gap:12px;}
.mk-apt-card{
  background:#1a1a1a; border:1px solid #222; border-radius:12px; padding:16px 18px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.mk-apt-name{font-size:13.5px; font-weight:700; color:#fff;}
.mk-apt-status{font-size:11.5px; font-weight:700; padding:6px 12px; border-radius:999px; white-space:nowrap;}
.mk-apt-card.occupied .mk-apt-status{background:#F5C800; color:#111;}
.mk-apt-card.free .mk-apt-status{background:transparent; border:1px solid #3a3a3a; color:#999;}
.mk-apt-card.cleaning .mk-apt-status{background:rgba(245,200,0,.14); color:#F5C800;}

/* ---------- SEKCJA 4: KALKULATOR ---------- */
.mk-calc{background:#0a0a0a;}
.mk-calc-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:50px; align-items:start;}

.mk-calc-step{margin-bottom:46px;}
.mk-calc-step:last-child{margin-bottom:0;}
.mk-calc-step h3{color:#fff; font-size:16px; font-weight:700; margin-bottom:20px;}

.mk-size-btns{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.mk-size-btn{
  padding:16px 8px; border-radius:10px; border:1.5px solid #262626; background:#141414; color:#ccc;
  font-family:inherit; font-weight:700; font-size:13px; cursor:pointer; transition:all .25s ease;
}
.mk-size-btn:hover{border-color:#F5C800;}
.mk-size-btn.active{background:#F5C800; color:#111; border-color:#F5C800;}

.mk-cat-tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.mk-cat-tile{
  text-align:left; display:flex; flex-direction:column; gap:6px;
  background:#141414; border:1.5px solid #222; border-radius:14px; padding:18px 20px;
  cursor:pointer; transition:border-color .25s ease, background .25s ease; font-family:inherit;
}
.mk-cat-tile:hover{border-color:#3a3a3a;}
.mk-cat-tile.active{border-color:#F5C800; background:rgba(245,200,0,.06);}
.mk-cat-icon{
  width:36px; height:36px; border-radius:10px; background:rgba(245,200,0,.1); color:#F5C800;
  display:flex; align-items:center; justify-content:center; margin-bottom:4px;
}
.mk-cat-icon svg{width:19px; height:19px;}
.mk-cat-name{color:#fff; font-size:14.5px; font-weight:700;}
.mk-cat-desc{color:#777; font-size:12px; line-height:1.5;}

.mk-calc-result-wrap{position:relative;}
.mk-calc-result{background:#1a1a1a; border:1px solid #F5C800; border-radius:16px; padding:32px;}
.mk-result-label{display:block; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#999; margin-bottom:14px;}
.mk-result-amount{
  display:block; font-size:44px; font-weight:800; color:#F5C800; margin-bottom:22px;
  transition:transform .22s ease; line-height:1.1;
}
.mk-result-amount.pulse{transform:scale(1.05);}
.mk-result-breakdown{display:grid; gap:10px; margin-bottom:20px;}
.mk-result-breakdown div{display:flex; justify-content:space-between; gap:10px; font-size:14px; color:#999;}
.mk-result-sep{border:none; border-top:1px solid #2a2a2a; margin:20px 0;}
.mk-result-motivate{font-size:13.5px; color:#777; line-height:1.65; margin-bottom:28px;}
.mk-result-actions{display:grid; gap:12px;}
.mk-disclaimer{font-size:11px; color:#555; margin-top:22px; line-height:1.7;}

@media (min-width:1025px){
  .mk-calc-result-wrap{position:sticky; top:118px;}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .mk-hero-inner{grid-template-columns:1fr; text-align:center;}
  .mk-hero-visual{order:-1; margin-bottom:44px;}
  .mk-hero-desc{margin-left:auto; margin-right:auto;}
  .mk-hero-actions{justify-content:center;}
  .mk-cards{grid-template-columns:1fr; max-width:520px; margin-left:auto; margin-right:auto; margin-bottom:60px;}
  .mk-stats{grid-template-columns:repeat(2,1fr); gap:32px;}
  .mk-airbnb-grid{grid-template-columns:1fr;}
  .mk-airbnb-visual{order:-1; max-width:320px; margin:0 auto 44px;}
  .mk-calc-grid{grid-template-columns:1fr;}
}

@media (max-width:720px){
  .mk-hero{padding:110px 0 80px;}
  .mk-hero-actions{flex-direction:column; width:100%;}
  .mk-hero-actions .mk-btn{width:100%;}
  .mk-size-btns{grid-template-columns:1fr 1fr;}
  .mk-stats{grid-template-columns:1fr 1fr;}
  .mk-card{padding:30px 26px;}
  .mk-calc-result{padding:26px 22px;}
  .mk-cat-tiles{grid-template-columns:1fr;}
  .mk-phone-screen{padding:50px 20px 28px; min-height:auto;}
}