/* ============ DT MEDICALL Dorota Tomczak - stomatologia i medycyna estetyczna ============ */
:root{
  --mint:#6FC9B4;
  --mint-deep:#3EA491;
  --forest:#0F3B36;
  --forest-2:#17544C;
  --ink:#17211F;
  --ink-soft:#5D6E6A;
  --paper:#F5F9F7;
  --card:#FFFFFF;
  --line:#E1EBE7;
  --radius:20px;
  --shadow:0 16px 44px rgba(15,59,54,.10);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Outfit',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--card);line-height:1.68;font-weight:300;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.2;letter-spacing:-.005em}
h1 em,h2 em{font-style:italic;color:var(--mint)}
h2{font-size:clamp(32px,4.4vw,50px);margin-bottom:14px}
.kicker{font-family:var(--sans);font-weight:500;color:var(--mint-deep);text-transform:uppercase;letter-spacing:.2em;font-size:12.5px;margin-bottom:10px}
.kicker.light{color:var(--mint)}
.sec-sub{max-width:620px;color:var(--ink-soft);font-size:16.5px}
.sec-sub.light{color:rgba(255,255,255,.8)}
.sec-head{margin-bottom:2.6rem}
.sec-head--center{text-align:center}
.sec-head--center .sec-sub{margin-inline:auto}
section{padding:88px 0}

/* przyciski */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:500;border-radius:999px;padding:13px 26px;font-size:15.5px;transition:transform .25s,box-shadow .25s,background .25s;cursor:pointer}
.btn:hover{transform:translateY(-3px)}
.btn-mint{background:var(--mint);color:var(--forest);box-shadow:0 10px 26px rgba(111,201,180,.4)}
.btn-mint:hover{background:var(--mint-deep);color:#fff;box-shadow:0 16px 34px rgba(62,164,145,.45)}
.btn-dark{background:var(--forest);color:#fff;margin-top:22px}
.btn-dark:hover{background:var(--forest-2)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.6);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.2)}
.btn-lg{padding:16px 32px;font-size:16.5px}

/* ============ HEADER ============ */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);transition:box-shadow .3s}
.hdr.scrolled{box-shadow:0 8px 30px rgba(15,59,54,.10)}
.hdr-in{display:flex;align-items:center;gap:26px;height:78px}
.brand,.stopka-brand{display:flex;align-items:center;flex:none}
.brand img{height:46px;width:auto}
.nav{display:flex;gap:23px;margin-left:auto}
.nav a{color:var(--ink);font-weight:400;font-size:15px;transition:color .2s}
.nav a:hover{color:var(--mint-deep)}
.hdr-cta{padding:10px 19px;font-size:14.5px}
.burger{display:none;background:none;border:0;width:40px;height:40px;flex-direction:column;justify-content:center;gap:6px;cursor:pointer}
.burger span{display:block;height:2px;border-radius:2px;background:var(--forest);transition:.3s}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ============ HERO ============ */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;padding:150px 0 110px;color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;background:url('../images/hero.jpg') center 30%/cover no-repeat}
.hero-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(15,59,54,.94) 0%,rgba(20,73,67,.78) 44%,rgba(23,84,76,.28) 100%)}
.hero-in{position:relative;z-index:2}
.hero-kicker{font-weight:500;letter-spacing:.2em;text-transform:uppercase;font-size:12.5px;color:var(--mint);margin-bottom:18px}
.hero h1{font-size:clamp(40px,6.2vw,74px);margin-bottom:20px;text-shadow:0 4px 26px rgba(0,0,0,.28)}
.hero-lead{max-width:520px;font-size:18px;color:rgba(255,255,255,.92);margin-bottom:32px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* ============ ATUTY ============ */
.atuty{background:var(--forest);padding:30px 0}
.atuty-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.atut{display:flex;align-items:center;gap:14px;color:#fff}
.atut-ic{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:12px;background:rgba(111,201,180,.16);color:var(--mint)}
.atut-ic svg{width:23px;height:23px}
.atut b{display:block;font-weight:500;font-size:15px}
.atut span{font-size:12.5px;color:rgba(255,255,255,.6)}

/* ============ O NAS ============ */
.o-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.o-foto{position:relative}
.o-foto img{border-radius:var(--radius);box-shadow:var(--shadow)}
.o-badge{position:absolute;right:-18px;bottom:-22px;display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:11px 16px 11px 11px;box-shadow:var(--shadow)}
.o-badge img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--mint)}
.o-badge span{display:flex;flex-direction:column;line-height:1.3}
.o-badge b{font-family:var(--serif);font-size:16px;font-weight:700}
.o-badge em{font-style:normal;font-size:11.5px;color:var(--ink-soft)}
.o-txt p{color:var(--ink-soft);margin-bottom:14px;max-width:56ch}
.o-txt h2{margin-bottom:18px}
.o-lista{list-style:none;display:flex;flex-direction:column;gap:10px;margin:20px 0 4px}
.o-lista li{position:relative;padding-left:32px;font-size:15px}
.o-lista li::before{content:"";position:absolute;left:0;top:7px;width:18px;height:18px;border-radius:50%;background:var(--mint);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:3px}

/* ============ WIZYTA ============ */
.wizyta{background:var(--paper)}
.wizyta-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.wiz{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 20px;transition:transform .3s,border-color .3s}
.wiz:hover{transform:translateY(-5px);border-color:var(--mint)}
.wiz span{font-family:var(--serif);font-weight:700;font-size:24px;color:var(--mint);display:block;margin-bottom:8px}
.wiz p{font-size:14.5px;color:var(--ink-soft)}

/* ============ USŁUGI ============ */
.uslugi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.usl{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;transition:transform .3s,box-shadow .3s,border-color .3s;display:flex;flex-direction:column}
.usl:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--mint)}
.usl--wide{grid-column:span 2}
.usl--kids{background:linear-gradient(160deg,#F0FAF7,var(--card));border-color:#CFEDE5}
.usl-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#E6F5F1;color:var(--mint-deep);margin-bottom:16px;flex:none}
.usl-ic svg{width:25px;height:25px}
.usl h3{font-size:22px;margin-bottom:8px}
.usl p{color:var(--ink-soft);font-size:14.5px}
.usl-note{margin-top:10px;font-size:12.5px;color:var(--mint-deep);font-weight:500}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.tags li{font-size:12.5px;font-weight:400;color:var(--forest);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.tags li.tag-hl{background:var(--mint);border-color:var(--mint);color:var(--forest);font-weight:500}

/* Wizualizacja 3D */
.wiz3d{display:flex;align-items:center;gap:24px;margin-top:24px;background:var(--forest);color:#fff;border-radius:var(--radius);padding:32px 34px;flex-wrap:wrap}
.wiz3d-ic{display:grid;place-items:center;width:60px;height:60px;flex:none;border-radius:16px;background:rgba(111,201,180,.18);color:var(--mint)}
.wiz3d-ic svg{width:29px;height:29px}
.wiz3d div{flex:1;min-width:240px}
.wiz3d h3{color:#fff;font-size:25px;margin-bottom:6px}
.wiz3d p{color:rgba(255,255,255,.78);font-size:15px;max-width:60ch}

/* ============ MEDYCYNA ESTETYCZNA ============ */
.estetyczna{position:relative;color:#fff;overflow:hidden}
.est-bg{position:absolute;inset:0;z-index:0;background:url('../images/estetyczna.jpg') center 25%/cover no-repeat}
.est-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(15,59,54,.95) 0%,rgba(20,73,67,.86) 50%,rgba(23,84,76,.42) 100%)}
.est-in{position:relative;z-index:2;text-align:center}
.est-in .sec-head{text-align:left;max-width:560px}
.estetyczna h2{color:#fff}
.est-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:38px;text-align:left}
.est-karta{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(12px);border-radius:16px;padding:22px 20px;transition:transform .3s,background .3s}
.est-karta:hover{transform:translateY(-5px);background:rgba(255,255,255,.15)}
.est-karta h3{font-size:19px;color:#fff;margin-bottom:5px}
.est-karta p{font-size:13px;color:rgba(255,255,255,.75);line-height:1.5}

/* ============ OPINIE ============ */
.opinie{background:var(--paper)}
.opinie-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.opinia{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:32px 30px;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.opinia:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.gwiazdki{color:var(--mint-deep);font-size:17px;letter-spacing:3px;margin-bottom:14px}
.opinia p{font-size:15px;color:var(--ink);flex:1;font-style:italic}
.opinia footer{display:flex;align-items:center;gap:12px;margin-top:20px;font-weight:500;font-size:15px}
.av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#fff;font-family:var(--serif);font-weight:700;font-size:18px}
.av-1{background:var(--forest)}
.av-2{background:var(--mint-deep)}
.av-3{background:#8A9E99}
.opinia footer em{font-style:normal;font-weight:300;color:var(--ink-soft);font-size:12.5px;margin-left:auto}
/* karta z samą oceną (bez komentarza) */
.opinia--ocena{background:linear-gradient(165deg,#EDF8F5,var(--card));border-color:#CFEDE5;text-align:center;align-items:center}
.opinia--ocena .gwiazdki{margin-bottom:6px}
.ocena-duza{font-family:var(--serif);font-weight:700;font-size:60px;line-height:1;color:var(--forest);font-style:normal;flex:none}
.ocena-txt{font-size:14px;color:var(--ink-soft);font-style:normal;flex:1;margin-top:6px}
.opinia--ocena footer{width:100%}

/* ============ REZERWACJA / ZNANYLEKARZ ============ */
.rezerwacja{background:var(--card);text-align:center}
.rez-box{display:flex;align-items:center;gap:22px;max-width:820px;margin:0 auto;text-align:left;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px 30px;box-shadow:var(--shadow);flex-wrap:wrap}
.rez-ic{display:grid;place-items:center;width:58px;height:58px;flex:none;border-radius:16px;background:#E6F5F1;color:var(--mint-deep)}
.rez-ic svg{width:28px;height:28px}
.rez-txt{flex:1;min-width:200px}
.rez-txt b{display:block;font-family:var(--serif);font-weight:700;font-size:22px;color:var(--ink)}
.rez-txt span{font-size:14.5px;color:var(--ink-soft)}
.rez-widget{max-width:820px;margin:22px auto 0}

/* ============ KONTAKT ============ */
.kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:stretch;max-width:980px;margin:0 auto}
.kontakt-info{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:36px 32px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.k-tel{display:inline-flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:700;font-size:clamp(28px,3.4vw,38px);color:var(--forest);transition:transform .25s}
.k-tel:hover{transform:scale(1.03);color:var(--mint-deep)}
.k-adres{font-size:16px;font-weight:400;margin:12px 0 8px;color:var(--ink)}
.k-note{color:var(--ink-soft);font-size:14.5px;max-width:38ch}
.platnosci{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);width:100%}
.pl-tyt{font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
.platnosci ul{list-style:none;display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.platnosci li{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:13.5px}
.platnosci svg{width:17px;height:17px;color:var(--mint-deep)}
.kontakt-mapa{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);min-height:340px;border:1px solid var(--line)}
.kontakt-mapa iframe{width:100%;height:100%;border:0;display:block}

/* ============ STOPKA ============ */
.stopka{background:var(--forest);color:rgba(255,255,255,.8);padding:34px 0}
.stopka-in{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.stopka-brand img{height:40px;width:auto;filter:brightness(0) invert(1);opacity:.92}
.stopka p{font-size:14px;flex:1}
.stopka>.wrap>a{font-family:var(--serif);font-weight:700;font-size:19px;color:var(--mint)}

/* ============ ANIMACJE REVEAL ============ */
.reveal,.reveal-s,.reveal-l,.reveal-r{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal-l{transform:translateX(-30px)}
.reveal-r{transform:translateX(30px)}
.reveal.in,.reveal-s.in,.reveal-l.in,.reveal-r.in{opacity:1;transform:none}
[data-stagger]>*:nth-child(1){transition-delay:.02s}
[data-stagger]>*:nth-child(2){transition-delay:.08s}
[data-stagger]>*:nth-child(3){transition-delay:.14s}
[data-stagger]>*:nth-child(4){transition-delay:.2s}
[data-stagger]>*:nth-child(5){transition-delay:.26s}
[data-stagger]>*:nth-child(6){transition-delay:.08s}
[data-stagger]>*:nth-child(7){transition-delay:.14s}
[data-stagger]>*:nth-child(8){transition-delay:.2s}
[data-stagger]>*:nth-child(9){transition-delay:.26s}
[data-stagger]>*:nth-child(10){transition-delay:.32s}

/* ============ RESPONSYWNOŚĆ ============ */
@media(max-width:1100px){
  .est-grid{grid-template-columns:repeat(3,1fr)}
  .wizyta-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1024px){
  .opinie-grid{grid-template-columns:repeat(2,1fr)}
  .atuty-grid{grid-template-columns:repeat(2,1fr);gap:1.2rem}
  .o-grid{grid-template-columns:1fr;gap:56px}
  .o-foto{max-width:460px}
  .uslugi-grid{grid-template-columns:repeat(2,1fr)}
  .usl--wide{grid-column:span 2}
}
@media(max-width:860px){
  .nav{position:fixed;top:78px;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:10px 0 16px;transform:translateY(-135%);transition:transform .35s;box-shadow:0 20px 40px rgba(15,59,54,.14);z-index:55}
  .nav.open{transform:translateY(0)}
  .nav a{padding:13px 26px}
  .burger{display:flex}
  .hdr-cta{margin-left:auto}
  .kontakt-grid{grid-template-columns:1fr}
  .kontakt-mapa{min-height:300px}
  .opinie-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .est-grid,.wizyta-grid{grid-template-columns:repeat(2,1fr)}
  .est-in .sec-head{max-width:none}
  .rez-box{text-align:center;justify-content:center}
  .rez-txt{min-width:100%}
  .rez-box .btn{width:100%;justify-content:center}
}
@media(max-width:640px){
  section{padding:62px 0}
  .hero{min-height:0;padding:128px 0 92px}
  .hero-cta .btn{width:100%;justify-content:center}
  .atuty-grid{grid-template-columns:1fr}
  .uslugi-grid,.est-grid,.wizyta-grid{grid-template-columns:1fr}
  .usl--wide{grid-column:span 1}
  .o-badge{right:8px;bottom:-18px}
  .wiz3d{padding:26px 24px}
  .brand img{height:38px}
  .stopka-in{flex-direction:column;text-align:center;gap:14px}
}