/* ==========================================================================
   SKINMED TECHNOLOGY — odwzorowanie prototypu 1:1
   Źródło prawdy: SkinMed_logo_i_o_nas_poprawione/_private/page.html (<style>)
   Klasy sm-* podpinane są do natywnych kontenerów i widgetów Elementor Free
   przez pole "Klasy CSS", więc treść pozostaje w pełni edytowalna w builderze.
   !important występuje tam, gdzie globalny Kit Elementora narzuca własną
   typografię i kolory nagłówków.
   ========================================================================== */

:root{
  --sm-ink:#10374a;
  --sm-muted:#5b737b;
  --sm-coral:#289eaa;
  --sm-coral-dark:#187f8c;
  --sm-peach:#e9f8f8;
  --sm-cream:#fdfcfa;
  --sm-line:#d7e9e9;
  --sm-lavender:#a694be;
  --sm-tiffany:#81d8d0;
  --sm-navy:#052b3a;
}

/* --- Baza ---------------------------------------------------------------- */
body{
  background:var(--sm-cream);
  color:var(--sm-ink);
  font:15px/1.7 'DM Sans',Arial,sans-serif;
}

/* --- .container: width:min(1220px, calc(100% - 96px)) -------------------- */
.sm-container{
  width:min(1220px,calc(100% - 96px))!important;
  max-width:min(1220px,calc(100% - 96px))!important;
  margin-inline:auto!important;
  padding:0!important;
}

/* --- .btn ---------------------------------------------------------------- */
.sm-btn .elementor-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0;
  border-radius:50px!important;
  padding:13px 23px!important;
  background-color:var(--sm-coral)!important;
  color:#fff!important;
  font-family:'DM Sans',Arial,sans-serif!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:normal!important;
  text-transform:none!important;
  white-space:nowrap;
  box-shadow:0 6px 20px #168e931e;
  transition:background-color .18s ease;
}
.sm-btn .elementor-button:hover,
.sm-btn .elementor-button:focus{background-color:var(--sm-coral-dark)!important;color:#fff!important}

/* --- .eyebrow ------------------------------------------------------------ */
.sm-eyebrow,.sm-eyebrow p{
  margin:0!important;
  font-family:'DM Sans',Arial,sans-serif!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1.7!important;
  text-transform:uppercase!important;
  letter-spacing:2.3px!important;
  color:#268a96!important;
}

/* ==========================================================================
   01 — HOME HERO (.home-hero)
   ========================================================================== */
.sm-home-hero{
  position:relative;
  overflow:hidden;
  padding:0!important;
  background:
    radial-gradient(circle at 72% 20%,#f8ffff 0%,#f1fbfb 16%,transparent 17%),
    linear-gradient(110deg,#e8fbf9 0%,#ccefed 58%,#92ddd6 100%);
}
.sm-hero-inner{
  min-height:575px;
  display:flex!important;
  flex-direction:row;
  align-items:center;
  position:relative;
  gap:0!important;
}
.sm-hero-content{
  width:55%!important;
  max-width:55%!important;
  position:relative;
  z-index:2;
  padding:90px 0!important;
  display:flex!important;
  flex-direction:column;
  align-items:flex-start;
  gap:0!important;
}
.sm-hero-content>.elementor-element{width:100%}

.sm-h1 .elementor-heading-title{
  font-family:'Playfair Display',Georgia,serif!important;
  font-weight:400!important;
  font-size:clamp(50px,5.3vw,80px)!important;
  line-height:1.08!important;
  letter-spacing:-1.4px!important;
  color:var(--sm-ink)!important;
  max-width:650px;
  margin:14px 0 24px!important;
}

.sm-hero-lead,.sm-hero-lead p{
  margin:0 0 18px!important;
  max-width:460px;
  font-family:'DM Sans',Arial,sans-serif!important;
  font-size:17px!important;
  line-height:1.7!important;
  color:#3c737c!important;
}

.sm-home-hero .sm-btn{margin-top:10px;width:auto!important}

/* Placeholder portretu — geometria 1:1 z .home-model (1086 x 1448) */
.sm-home-model{
  position:absolute!important;
  right:1.5%;
  bottom:0;
  height:92%;
  width:auto!important;
  aspect-ratio:1086/1448;
  max-width:46%;
  border-radius:220px 150px 0 0;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.22) 0 14px,transparent 14px 28px),
    linear-gradient(160deg,#a9ded8,#6fbfb8);
  border:2px dashed rgba(255,255,255,.75);
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0 18px!important;
  gap:0!important;
  z-index:1;
  filter:drop-shadow(0 18px 40px rgba(24,110,118,.08));
}
.sm-ph-label,.sm-ph-label p{
  margin:0!important;
  font-family:'DM Sans',Arial,sans-serif!important;
  font-size:12px!important;
  font-style:italic!important;
  line-height:1.6!important;
  letter-spacing:.3px!important;
  color:#ffffff!important;
  text-align:center!important;
  text-shadow:0 1px 3px rgba(12,80,86,.35);
}

/* ==========================================================================
   02 — CZTERY KORZYŚCI (.home-features)
   ========================================================================== */
.sm-features-section{
  background-color:#fff;
  padding:35px 0 75px!important;
}
.sm-home-features{
  display:grid!important;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  width:100%;
  padding:0!important;
}
.sm-feature{
  background:linear-gradient(145deg,#f3fbfa,#eaf4f3);
  border-radius:17px;
  padding:28px!important;
  min-height:206px;
  display:flex!important;
  flex-direction:column;
  align-items:flex-start;
  gap:0!important;
  width:auto!important;
}
.sm-symbol{line-height:0}
.sm-symbol .sm-symbol-inner{
  width:45px;
  height:45px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#fff;
  box-shadow:0 4px 12px #12697312;
}
.sm-symbol svg{width:28px;height:28px;color:#8f8cbb;display:block}
.sm-f-title .elementor-heading-title{
  font-family:'Playfair Display',Georgia,serif!important;
  font-weight:400!important;
  font-size:20px!important;
  line-height:1.2!important;
  letter-spacing:normal!important;
  margin:16px 0 9px!important;
  color:var(--sm-ink)!important;
}
.sm-f-desc,.sm-f-desc p{
  margin:0!important;
  font-family:'DM Sans',Arial,sans-serif!important;
  font-size:12px!important;
  line-height:1.7!important;
  color:var(--sm-muted)!important;
}

/* ==========================================================================
   Breakpointy z oryginału: 1100 / 900 / 600
   ========================================================================== */
@media(max-width:1100px){
  .sm-container{
    width:calc(100% - 64px)!important;
    max-width:calc(100% - 64px)!important;
  }
}

@media(max-width:900px){
  .sm-hero-inner{min-height:470px}
  .sm-hero-content{width:65%!important;max-width:65%!important}
  .sm-home-model{height:84%;max-width:48%;right:0}
  .sm-home-features{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:600px){
  body{font-size:14px}
  .sm-container{
    width:calc(100% - 38px)!important;
    max-width:calc(100% - 38px)!important;
  }
  .sm-hero-inner{min-height:575px;align-items:flex-start}
  .sm-hero-content{
    width:100%!important;
    max-width:100%!important;
    padding:53px 0 235px!important;
  }
  .sm-h1 .elementor-heading-title{font-size:46px!important;max-width:330px}
  .sm-hero-lead,.sm-hero-lead p{font-size:13px!important;max-width:280px}
  .sm-home-model{
    height:285px;
    max-width:62%;
    right:-8px;
  }
  .sm-home-features{grid-template-columns:1fr 1fr;gap:10px}
  .sm-feature{padding:16px!important;min-height:205px}
  .sm-f-title .elementor-heading-title{font-size:17px!important}
  .sm-f-desc,.sm-f-desc p{font-size:11px!important}
}