:root {
  --navy:#10214a;
  --text:#162445;
  --muted:#58657d;
  --green:#557f2a;
  --green-dark:#3f681b;
  --green-soft:#edf6d8;
  --blue:#2865d2;
  --blue-dark:#154fab;
  --blue-soft:#edf4ff;
  --shadow:0 22px 50px rgba(38,56,96,.11);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-width:320px;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:#fff;
  color:var(--text);
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* ========================= DESKTOP ========================= */
.desktop{display:block;padding:0;background:#fff}
.desktop__canvas{
  position:relative;
  width:min(1672px,100vw);
  margin:0 auto;
  aspect-ratio:1672/847;
  overflow:hidden;
  background:#fff;
}
.desktop__art{width:100%;height:100%;object-fit:contain}
.hotspot{
  position:absolute;
  z-index:3;
  border-radius:26px;
  background:rgba(255,255,255,.001);
  outline:none;
  transition:box-shadow .18s ease,transform .18s ease,background .18s ease;
}
.hotspot:hover,.hotspot:focus-visible{
  background:rgba(255,255,255,.05);
  box-shadow:0 0 0 3px rgba(39,101,210,.16);
  transform:translateY(-1px);
}
.hotspot--garden{left:10.9%;top:57.7%;width:35.4%;height:27.9%}
.hotspot--cd{left:52.7%;top:57.7%;width:31.3%;height:27.9%}

/* ========================= MOBILE/TABLET ========================= */
.mobile{display:none}

@media (max-width: 900px){
  body{
    background:
      radial-gradient(circle at 8% 8%,rgba(228,243,199,.45),transparent 23rem),
      radial-gradient(circle at 96% 12%,rgba(220,232,255,.62),transparent 24rem),
      #f9fafc;
  }
  .desktop{display:none}
  .mobile{
    display:block;
    width:min(100%,720px);
    margin:0 auto;
    padding:calc(20px + env(safe-area-inset-top)) 14px calc(30px + env(safe-area-inset-bottom));
  }
  .mobile-head{text-align:center;padding:2px 8px 12px}
  .mobile-brand{
    color:#152957;
    font-size:16px;
    font-weight:800;
    letter-spacing:.25em;
    margin-bottom:14px;
  }
  .mobile-head h1{
    margin:0;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(38px,9.6vw,60px);
    line-height:.99;
    letter-spacing:-.035em;
    color:#101d3d;
  }
  .mobile-head p{
    max-width:510px;
    margin:15px auto 0;
    font-size:17px;
    line-height:1.48;
    color:#52617e;
  }

  .mobile-hero{
    margin:12px 0 17px;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 20px 42px rgba(37,61,109,.11);
    background:#f7f9fc;
    border:1px solid rgba(255,255,255,.85);
  }
  .mobile-hero img{
    width:100%;
    height:auto;
  }

  .shops{display:grid;grid-template-columns:1fr;gap:15px}
  .shop-card{
    position:relative;
    display:grid;
    grid-template-columns:86px minmax(0,1fr);
    gap:15px;
    align-items:start;
    padding:18px;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(255,255,255,.92);
    border-radius:25px;
    box-shadow:var(--shadow);
    overflow:hidden;
    -webkit-tap-highlight-color:transparent;
    transition:transform .15s ease,box-shadow .15s ease;
  }
  .shop-card::before{
    content:"";
    position:absolute;
    width:170px;height:170px;
    border-radius:50%;
    right:-70px;top:-85px;
    opacity:.55;
    pointer-events:none;
  }
  .shop-card--garden::before{background:radial-gradient(circle,#eef7d7 0,rgba(238,247,215,0) 70%)}
  .shop-card--cd::before{background:radial-gradient(circle,#eaf2ff 0,rgba(234,242,255,0) 70%)}
  .shop-card:active{transform:scale(.993)}

  .shop-card__icon{
    width:78px;height:78px;
    border-radius:50%;
    display:grid;
    place-items:center;
    border:2px solid rgba(255,255,255,.98);
    box-shadow:0 8px 18px rgba(42,65,107,.07),inset 0 0 0 1px rgba(16,33,74,.04);
  }
  .shop-card__icon svg{width:44px;height:44px}
  .shop-card__icon--garden{background:linear-gradient(#e4f2c7,#f6fbe9);color:#4f7c22}
  .shop-card__icon--cd{background:linear-gradient(#eef5ff,#fbfdff);color:#2362d1}

  .shop-card__body{min-width:0;position:relative;z-index:1}
  .shop-card h2{
    margin:1px 0 7px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:30px;
    line-height:1;
    letter-spacing:-.025em;
  }
  .shop-card--garden h2{color:#173018}
  .shop-card--cd h2{color:#142c59}
  .shop-card p{
    margin:0 0 7px;
    font-size:17px;
    line-height:1.35;
    color:#273854;
  }
  .shop-card__url{
    display:block;
    margin-bottom:13px;
    font-size:15px;
  }
  .shop-card--garden .shop-card__url{color:#518151}
  .shop-card--cd .shop-card__url{color:#2d65cf}
  .globe{font-weight:700;margin-right:4px}

  .shop-card__button{
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    width:min(100%,290px);
    padding:0 20px;
    border-radius:999px;
    color:#fff;
    font-size:16px;
    font-weight:600;
    box-shadow:0 10px 20px rgba(34,65,127,.14);
  }
  .shop-card__button b{font-size:23px;font-weight:400;line-height:1}
  .shop-card__button--garden{background:linear-gradient(180deg,#719d37,#456d1e)}
  .shop-card__button--cd{background:linear-gradient(180deg,#3978ec,#1856c4)}

  .features{
    margin-top:17px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .feature{
    min-height:88px;
    padding:13px 10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-align:center;
    background:rgba(255,255,255,.85);
    border:1px solid rgba(255,255,255,.95);
    border-radius:18px;
    color:#24324d;
    font-size:14px;
    line-height:1.3;
    box-shadow:0 12px 26px rgba(40,58,97,.065);
  }
  .feature__icon{
    width:42px;height:42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff;
    box-shadow:0 8px 16px rgba(40,58,97,.06);
  }
  .feature__icon svg{width:23px;height:23px}
  .feature__icon--green{color:#567f2e;background:#f0f6df}
  .feature__icon--blue{color:#1d4ba4;background:#edf2fb}
}

/* TABLET: dwie karty obok siebie, gdy jest miejsce */
@media (min-width: 650px) and (max-width: 900px){
  .mobile{padding-left:20px;padding-right:20px}
  .mobile-head h1 br{display:none}
  .mobile-hero{max-width:620px;margin-left:auto;margin-right:auto}
  .shops{grid-template-columns:1fr 1fr}
  .shop-card{grid-template-columns:1fr;padding:20px}
  .shop-card__icon{width:72px;height:72px}
  .shop-card__button{width:100%}
  .features{grid-template-columns:repeat(4,1fr)}
}

@media (max-width: 420px){
  .mobile{padding-left:10px;padding-right:10px}
  .mobile-head h1{font-size:40px}
  .mobile-head p{font-size:16px}
  .shop-card{grid-template-columns:72px minmax(0,1fr);padding:15px;gap:12px;border-radius:22px}
  .shop-card__icon{width:66px;height:66px}
  .shop-card__icon svg{width:38px;height:38px}
  .shop-card h2{font-size:27px}
  .shop-card p{font-size:16px}
  .shop-card__url{font-size:14px}
  .shop-card__button{grid-column:1/-1;width:100%;font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}