:root{

  --bg: #f7f2ea;

  --paper: #fbf7f0;

  --text: #2a2a2a;



  --brown-900:#2f1a0f;

  --brown-800:#3b2417;

  --brown-700:#52301f;

  --brown-600:#6a3c26;



  --cream-200:#f3e6d2;

  --cream-300:#ead9c2;



  --green-700:#2f5b46;

  --green-600:#376a52;



  --shadow: 0 10px 25px rgba(0,0,0,.08);

  --radius: 18px;

  --radius-sm: 14px;



  --container: 1120px;

}



*{

  box-sizing:border-box;

  margin:0;

  padding:0;

}



html{

  scroll-behavior:smooth;

}



body{

  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  color:var(--text);

  background:var(--paper);

  line-height:1.6;

}



a{

  color:inherit;

  text-decoration:none;

}



img{

  max-width:100%;

  display:block;

}



.container{

  width:min(var(--container), calc(100% - 48px));

  margin:0 auto;

}



/* ===== Header ===== */







.header-inner{

  width:min(var(--container), calc(100% - 48px));

  margin:0 auto;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  padding:10px 0;

  position:relative;

}



.logo{

  display:flex;

  align-items:center;

  gap:10px;

  min-width:0;

}



.logo img{

  height:42px;

  width:auto;

  object-fit:contain;

}



nav{

  display:flex;

  align-items:center;

  gap:18px;

}



nav a{

  font-size:14px;

  opacity:.86;

  padding:8px 6px;

  border-radius:10px;

  position:relative;

  transition:all .18s ease;

  white-space:nowrap;

}



nav a:hover{

  opacity:1;

  background:rgba(0,0,0,.04);

}



nav a::after{

  content:"";

  position:absolute;

  left:10px;

  right:10px;

  bottom:4px;

  height:2px;

  background:var(--brown-600);

  border-radius:2px;

  transform:scaleX(0);

  transform-origin:left;

  transition:transform .18s ease;

  opacity:.9;

}



nav a:hover::after{

  transform:scaleX(1);

}



.social{

  display:flex;

  align-items:center;

  gap:10px;

}



.social a{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:9px 12px;

  border-radius:999px;

  background:rgba(82,48,31,.06);

  border:1px solid rgba(82,48,31,.10);

  font-size:13px;

  font-weight:700;

  color:var(--brown-700);

  transition:all .18s ease;

}



.social a:hover{

  background:rgba(82,48,31,.11);

  transform:translateY(-1px);

}



.hero{

  position:relative;

  min-height:80vh;

  overflow:hidden;

}



.hero-slide{

  position:absolute;

  inset:0;

  background-size:cover;

  background-position:center;

  opacity:0;

  transition:opacity 0.8s ease;

}



.hero-slide.active{

  opacity:1;

}



.hero-overlay{

  position:absolute;

  inset:0;

  background:linear-gradient(

    90deg,

    rgba(20, 14, 10, 0.65) 0%,

    rgba(20, 14, 10, 0.45) 35%,

    rgba(20, 14, 10, 0.22) 100%

  );

}



.hero-content{

  position:relative;

  z-index:2;

  max-width:720px;

  padding:110px 24px 60px;

  margin-left:max(40px, calc((100vw - 1120px) / 2));

  color:#fff;

}



.hero-kicker{

  display:inline-block;

  margin-bottom:18px;

  padding:8px 14px;

  border-radius:999px;

  background:rgba(255,255,255,0.12);

  border:1px solid rgba(255,255,255,0.18);

  backdrop-filter:blur(8px);

  font-size:14px;

  font-weight:700;

  letter-spacing:0.4px;

}



.hero h1{

  font-size:clamp(42px, 6vw, 76px);

  line-height:0.95;

  font-weight:800;

  margin:0 0 18px;

  color:#fff;

  letter-spacing:-1.4px;

  text-shadow:0 12px 30px rgba(0,0,0,0.22);

}



.hero-subtitle{

  font-size:clamp(19px, 2vw, 28px);

  line-height:1.2;

  font-weight:700;

  margin:0 0 18px;

  color:rgba(255,255,255,0.94);

  max-width:700px;

}



.hero-text{

  font-size:17px;

  line-height:1.75;

  color:rgba(255,255,255,0.90);

  max-width:680px;

  margin:0 0 28px;

}



.hero-cta{

  display:flex;

  flex-wrap:wrap;

  gap:14px;

  margin-bottom:18px;

}



.hero-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:50px;

  padding:0 22px;

  border-radius:999px;

  font-weight:800;

  font-size:15px;

  text-decoration:none;

  transition:all 0.18s ease;

}



.hero-btn-dark{

  background:#2f5b46;

  color:#fff;

  box-shadow:0 12px 24px rgba(47,91,70,0.24);

}



.hero-btn-dark:hover{

  background:#376a52;

  transform:translateY(-1px);

}



.hero-btn-outline{

  background:rgba(255,255,255,0.10);

  color:#fff;

  border:1px solid rgba(255,255,255,0.28);

  backdrop-filter:blur(8px);

}



.hero-btn-outline:hover{

  background:rgba(255,255,255,0.16);

  transform:translateY(-1px);

}



.hero-micro{

  font-size:14px;

  line-height:1.6;

  color:rgba(255,255,255,0.82);

}



/* ===== Sections ===== */



.sluzby{

  padding:74px 0 84px;

  background:var(--paper);

}



.sluzby h2,

.recenze h2{

  text-align:center;

  margin:0 0 12px;

  font-size:44px;

  letter-spacing:-0.8px;

  color:var(--brown-700);

}



.sluzby-grid{

  width:min(var(--container), calc(100% - 48px));

  margin:34px auto 0;

  display:grid;

  grid-template-columns:repeat(3, 1fr);

  gap:22px;

}



.sluzba{

  position:relative;

  display:block;

  overflow:hidden;

  border-radius:26px;

  border:1px solid rgba(82,48,31,.12);

  background:#fff;

  box-shadow:0 22px 55px rgba(0,0,0,.10);

  min-height:320px;

  isolation:isolate;

}



.sluzba::before{

  content:"";

  position:absolute;

  inset:0;

  background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.52));

  z-index:1;

}



.sluzba img{

  width:100%;

  height:100%;

  object-fit:cover;

  transition:transform .45s ease;

}



.sluzba:hover img{

  transform:scale(1.08);

}



.sluzba-text{

  position:absolute;

  left:16px;

  right:16px;

  bottom:16px;

  z-index:2;

  padding:14px 14px 12px;

  border-radius:18px;

  background:rgba(255,255,255,.10);

  border:1px solid rgba(255,255,255,.22);

  backdrop-filter:blur(12px);

  -webkit-backdrop-filter:blur(12px);

  box-shadow:0 18px 40px rgba(0,0,0,.20);

}



.sluzba-text h3{

  color:#fff;

  font-size:19px;

  line-height:1.25;

  font-weight:800;

}



/* ===== Reviews ===== */



.recenze{

  padding:74px 0 84px;

  background:linear-gradient(180deg, rgba(243,230,210,.75), rgba(251,247,240,1));

}



.recenze-grid{

  width:min(var(--container), calc(100% - 48px));

  margin:34px auto 0;

  display:grid;

  grid-template-columns:repeat(3, 1fr);

  gap:22px;

}



.recenze-box{

  background:rgba(255,255,255,.82);

  border:1px solid rgba(82,48,31,.12);

  border-radius:22px;

  padding:22px 22px 18px;

  box-shadow:0 16px 36px rgba(0,0,0,.07);

}



.recenze-box p{

  margin:0 0 12px;

  color:rgba(47,26,15,.78);

  line-height:1.65;

}



.recenze-box span{

  letter-spacing:3px;

  color:#caa46a;

  font-weight:900;

  font-size:15px;

}



/* ===== Footer ===== */



footer{

  background:#0e1623;

  color:rgba(255,255,255,.8);

  padding:28px 0;

}



.footer-inner{

  width:min(var(--container), calc(100% - 48px));

  margin:0 auto;

  text-align:center;

  font-size:14px;

}



/* ===== Galerie page ===== */



.page-hero{

  background:

    radial-gradient(circle at 20% 30%, rgba(255,255,255,.65), transparent 50%),

    radial-gradient(circle at 80% 20%, rgba(255,255,255,.55), transparent 45%),

    linear-gradient(0deg, var(--paper), var(--cream-200));

  position:relative;

  overflow:hidden;

}



.page-hero::before{

  content:"";

  position:absolute;

  inset:0;

  opacity:.18;

  background-image:radial-gradient(rgba(70,45,30,.22) 1px, transparent 1px);

  background-size:22px 22px;

  pointer-events:none;

}



.page-hero-small{

  padding:72px 0 56px;

}



.page-hero-inner{

  width:min(var(--container), calc(100% - 48px));

  margin:0 auto;

  text-align:center;

  position:relative;

  z-index:1;

}



.page-hero-label{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:8px 14px;

  border-radius:999px;

  background:rgba(255,255,255,.78);

  border:1px solid rgba(82,48,31,.12);

  box-shadow:0 10px 20px rgba(0,0,0,.06);

  color:var(--brown-700);

  font-weight:800;

  font-size:13px;

  margin-bottom:14px;

}



.page-hero-inner h1{

  margin:0 0 10px;

  font-size:clamp(34px, 4vw, 56px);

  line-height:1.05;

  letter-spacing:-1px;

  color:var(--brown-700);

}



.page-hero-inner p{

  max-width:760px;

  margin:0 auto;

  color:rgba(47,26,15,.70);

  line-height:1.7;

}



.galerie-page{

  background:var(--paper);

}



.galerie-nav{

  padding:26px 0 10px;

}



.galerie-nav-inner{

  width:min(var(--container), calc(100% - 48px));

  margin:0 auto;

  display:flex;

  justify-content:center;

  flex-wrap:wrap;

  gap:10px;

}



.galerie-chip{

  background:rgba(255,255,255,.78);

  border:1px solid rgba(82,48,31,.12);

  padding:10px 14px;

  border-radius:999px;

  font-weight:700;

  font-size:13px;

  color:rgba(47,26,15,.84);

  box-shadow:0 10px 20px rgba(0,0,0,.06);

  transition:all .18s ease;

}



.galerie-chip:hover{

  transform:translateY(-1px);

  background:#fff;

}



.galerie-section{

  width:min(var(--container), calc(100% - 48px));

  margin:0 auto;

  padding:48px 0 22px;

  scroll-margin-top:96px;

}



.galerie-section-head{

  display:flex;

  justify-content:space-between;

  gap:28px;

  align-items:flex-end;

  margin-bottom:22px;

}



.galerie-section-head h2{

  margin:4px 0 0;

  font-size:34px;

  line-height:1.1;

  letter-spacing:-0.7px;

  color:var(--brown-700);

}



.section-kicker{

  font-weight:900;

  letter-spacing:.6px;

  color:rgba(82,48,31,.55);

  font-size:13px;

}



.galerie-section-head p{

  max-width:520px;

  color:rgba(47,26,15,.68);

  line-height:1.7;

}



.galerie-grid-page{

  display:grid;

  grid-template-columns:repeat(3, 1fr);

  gap:22px;

}



.galerie-item{

  position:relative;

  overflow:hidden;

  border-radius:22px;

  border:1px solid rgba(82,48,31,.12);

  background:#fff;

  box-shadow:0 16px 36px rgba(0,0,0,.07);

  min-height:280px;

}



.galerie-item img{

  width:100%;

  height:100%;

  object-fit:cover;

  transition:transform .45s ease;

}



.galerie-item:hover img{

  transform:scale(1.08);

}



.kontakt-strip{

  padding:70px 0 82px;

}



.kontakt-strip-inner{

  width:min(var(--container), calc(100% - 48px));

  margin:0 auto;

  background:linear-gradient(180deg, #3d6b55, #2e5644);

  color:rgba(255,255,255,.94);

  border-radius:28px;

  padding:34px 32px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:24px;

  box-shadow:0 22px 55px rgba(0,0,0,.12);

}



.kontakt-strip-inner h2{

  margin:0 0 8px;

  font-size:36px;

  line-height:1.05;

  letter-spacing:-0.6px;

}



.kontakt-strip-inner p{

  margin:0;

  max-width:620px;

  opacity:.94;

  line-height:1.7;

}



.kontakt-actions{

  display:flex;

  flex-wrap:wrap;

  gap:12px;

}



.outline-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  padding:13px 20px;

  border-radius:999px;

  font-weight:800;

  font-size:14px;

  background:transparent;

  color:#fff;

  border:1px solid rgba(255,255,255,.55);

  transition:all .18s ease;

}



.outline-btn:hover{

  background:rgba(255,255,255,.12);

}



/* ===== Responsive ===== */



@media (max-width: 1100px){

  .sluzby-grid,

  .recenze-grid,

  .galerie-grid-page{

    grid-template-columns:repeat(2, 1fr);

  }



  .galerie-section-head{

    flex-direction:column;

    align-items:flex-start;

  }

}



@media (max-width: 980px){

  .header-inner{

    flex-wrap:wrap;

    justify-content:center;

  }



  nav{

    flex-wrap:wrap;

    justify-content:center;

  }



  .social{

    justify-content:center;

    flex-wrap:wrap;

  }



  .hero{

    min-height:80vh;

  }



  .hero-content{

    min-height:80vh;

    align-items:center;

    text-align:center;

  }



  .hero-content h1,

  .hero-content p{

    max-width:760px;

  }



  .kontakt-strip-inner{

    flex-direction:column;

    align-items:flex-start;

  }

}



@media (max-width: 720px){

  .sluzby h2,

  .recenze h2{

    font-size:34px;

  }



  .sluzby-grid,

  .recenze-grid,

  .galerie-grid-page{

    grid-template-columns:1fr;

  }



  .sluzba,

  .galerie-item{

    min-height:240px;

  }



  .page-hero-small{

    padding:58px 0 44px;

  }



  .page-hero-inner h1{

    font-size:36px;

  }



  .galerie-section{

    padding:38px 0 18px;

  }



  .galerie-section-head h2{

    font-size:28px;

  }



  .kontakt-strip-inner{

    padding:26px 22px;

    border-radius:22px;

  }



  .kontakt-strip-inner h2{

    font-size:28px;

  }



  .kontakt-actions{

    width:100%;

  }



  .kontakt-actions .hero-btn,

  .kontakt-actions .outline-btn{

    width:100%;

  }

}



@media (max-width: 560px){

  .header-inner{

    width:min(var(--container), calc(100% - 28px));

    padding:10px 0;

    gap:12px;

  }



  .hero-content{

    width:min(var(--container), calc(100% - 28px));

  }



  .hero-content h1{

    font-size:34px;

  }



  .hero-content p{

    font-size:16px;

  }



  .sluzba-text{

    left:12px;

    right:12px;

    bottom:12px;

    padding:12px;

  }



  .sluzby-grid,

  .recenze-grid,

  .galerie-nav-inner,

  .galerie-section,

  .kontakt-strip-inner,

  .page-hero-inner,

  .footer-inner{

    width:min(var(--container), calc(100% - 28px));

  }



  nav{

    gap:10px;

  }



  nav a{

    font-size:13px;

    padding:6px 4px;

  }



  .social a{

    font-size:12px;

    padding:8px 10px;

  }

}

.site-footer{

background:#0e1623;

color:rgba(255,255,255,.8);

padding:40px 0 20px;

}



.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:40px;

}



.footer-title{

font-weight:700;

font-size:18px;

}



.footer-sub{

opacity:.7;

font-size:14px;

}



.footer-head{

font-weight:700;

margin-bottom:10px;

}



.footer-item{

margin-bottom:6px;

font-size:14px;

}



.footer-bottom{

margin-top:30px;

font-size:13px;

opacity:.7;

text-align:center;

}

/* ===== RECENZE ===== */



#recenze{

background:#f3eee6;

padding:60px 0;

}



#recenze .section-head{

background:#e6e1d8;

padding:14px 18px;

margin-bottom:25px;

border-radius:6px;

}



#recenze .section-title{

font-size:26px;

margin-bottom:5px;

color:#2f1a0f;

}



#recenze .section-subtitle{

font-size:14px;

color:#5c5248;

}



.reviews{

display:flex;

flex-direction:column;

gap:25px;

max-width:900px;

}



.review{

line-height:1.6;

}



.review-stars{

color:#d19a2a;

font-size:18px;

margin-bottom:6px;

letter-spacing:2px;

}



.review-text{

font-size:16px;

margin-bottom:6px;

}



.review-meta{

font-size:14px;

color:#5c5248;

}

.hero{

  position:relative;

  min-height:80vh;

  overflow:hidden;

}



.hero-slide{

  position:absolute;

  inset:0;

  background-size:cover;

  background-position:center;

  opacity:0;

  transition:opacity 0.8s ease;

}



.hero-slide.active{

  opacity:1;

}



.hero-overlay{

  position:absolute;

  inset:0;

  background:linear-gradient(

    90deg,

    rgba(20, 14, 10, 0.65) 0%,

    rgba(20, 14, 10, 0.45) 35%,

    rgba(20, 14, 10, 0.22) 100%

  );

}



.hero-content{

  position:relative;

  z-index:2;

  max-width:720px;

  padding:110px 24px 60px;

  margin-left:max(40px, calc((100vw - 1120px) / 2));

  color:#fff;

}



.hero-kicker{

  display:inline-block;

  margin-bottom:18px;

  padding:8px 14px;

  border-radius:999px;

  background:rgba(255,255,255,0.12);

  border:1px solid rgba(255,255,255,0.18);

  backdrop-filter:blur(8px);

  font-size:14px;

  font-weight:700;

  letter-spacing:0.4px;

}



.hero h1{

  font-size:clamp(42px, 6vw, 76px);

  line-height:0.95;

  font-weight:800;

  margin:0 0 18px;

  color:#fff;

  letter-spacing:-1.4px;

  text-shadow:0 12px 30px rgba(0,0,0,0.22);

}



.hero-subtitle{

  font-size:clamp(19px, 2vw, 28px);

  line-height:1.2;

  font-weight:700;

  margin:0 0 18px;

  color:rgba(255,255,255,0.94);

  max-width:700px;

}



.hero-text{

  font-size:17px;

  line-height:1.75;

  color:rgba(255,255,255,0.90);

  max-width:680px;

  margin:0 0 28px;

}



.hero-cta{

  display:flex;

  flex-wrap:wrap;

  gap:14px;

  margin-bottom:18px;

}



.hero-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:50px;

  padding:0 22px;

  border-radius:999px;

  font-weight:800;

  font-size:15px;

  text-decoration:none;

  transition:all 0.18s ease;

}



.hero-btn-dark{

  background:#2f5b46;

  color:#fff;

  box-shadow:0 12px 24px rgba(47,91,70,0.24);

}



.hero-btn-dark:hover{

  background:#376a52;

  transform:translateY(-1px);

}



.hero-btn-outline{

  background:rgba(255,255,255,0.10);

  color:#fff;

  border:1px solid rgba(255,255,255,0.28);

  backdrop-filter:blur(8px);

}



.hero-btn-outline:hover{

  background:rgba(255,255,255,0.16);

  transform:translateY(-1px);

}



.hero-micro{

  font-size:14px;

  line-height:1.6;

  color:rgba(255,255,255,0.82);

}



@media (max-width: 900px){

  .hero{

    min-height:88vh;

  }



  .hero-content{

    margin-left:auto;

    margin-right:auto;

    text-align:center;

    padding:40px 20px 40px;

    max-width:600px;

  }



  .hero-overlay{

    background:linear-gradient(

      180deg,

      rgba(20,14,10,0.52) 0%,

      rgba(20,14,10,0.58) 50%,

      rgba(20,14,10,0.66) 100%

    );

  }



  .hero h1{

    font-size:clamp(34px, 9vw, 52px);

  }



  .hero-subtitle{

    font-size:18px;

  }



  .hero-text{

  max-width:540px;

  margin-left:auto;

  margin-right:auto;

}

}

/* ===== NAŠE PRÁCE / SHOWCASE ===== */



.work-showcase{

  padding:40px 0 90px;

  background:var(--paper);

}



.section-heading{

  max-width:860px;

  margin:0 auto 42px;

  text-align:center;

}



.section-heading .section-kicker{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:8px 14px;

  border-radius:999px;

  background:rgba(82,48,31,.07);

  border:1px solid rgba(82,48,31,.10);

  color:var(--brown-700);

  font-size:13px;

  font-weight:800;

  margin-bottom:14px;

}



.section-heading h2{

  font-size:clamp(34px, 4vw, 56px);

  line-height:1.05;

  letter-spacing:-1px;

  color:var(--brown-700);

  margin:0 0 14px;

}



.section-heading p{

  color:rgba(47,26,15,.72);

  font-size:17px;

  line-height:1.8;

}



.showcase-row{

  display:grid;

  grid-template-columns: 1.05fr 1.4fr;

  align-items:center;

  gap:34px;

  padding:34px;

  margin:0 0 26px;

  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(243,230,210,.42));

  border:1px solid rgba(82,48,31,.10);

  border-radius:44px;

  box-shadow:0 18px 45px rgba(0,0,0,.06);

  overflow:hidden;

}



.showcase-copy{

  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.55));

  border:1px solid rgba(82,48,31,.08);

  border-radius:34px;

  padding:34px 30px;

  box-shadow:0 12px 28px rgba(0,0,0,.05);

}



.showcase-label{

  display:inline-block;

  margin-bottom:12px;

  padding:7px 12px;

  border-radius:999px;

  background:rgba(82,48,31,.07);

  color:var(--brown-700);

  font-size:13px;

  font-weight:800;

}



.showcase-copy h3{

  margin:0 0 14px;

  font-size:clamp(28px, 3vw, 40px);

  line-height:1.08;

  letter-spacing:-0.8px;

  color:var(--brown-700);

}



.showcase-copy p{

  color:rgba(47,26,15,.76);

  line-height:1.85;

  font-size:16px;

  margin:0 0 20px;

}



.showcase-link{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:46px;

  padding:0 18px;

  border-radius:999px;

  background:var(--green-700);

  color:#fff;

  font-size:14px;

  font-weight:800;

  box-shadow:0 10px 20px rgba(47,91,70,.18);

  transition:all .18s ease;

}



.showcase-link:hover{

  background:var(--green-600);

  transform:translateY(-1px);

}



.showcase-gallery{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:18px;

  align-items:stretch;

}



.showcase-image{

  position:relative;

  display:block;

  height:320px;

  border-radius:26px;

  overflow:hidden;

  border:1px solid rgba(82,48,31,.12);

  box-shadow:0 16px 36px rgba(0,0,0,.10);

  transition:

    transform .35s ease,

    box-shadow .35s ease,

    filter .35s ease,

    opacity .35s ease;

  transform-origin:center center;

}



.showcase-image img{

  width:100%;

  height:100%;

  object-fit:cover;

  transition:transform .45s ease;

}



.showcase-image::after{

  content:"";

  position:absolute;

  inset:0;

  background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.18));

  pointer-events:none;

}



.showcase-gallery:hover .showcase-image{

  transform:scale(.96);

  filter:saturate(.9) brightness(.92);

  opacity:.88;

}



.showcase-gallery .showcase-image:hover{

  transform:scale(1.06);

  filter:saturate(1.05) brightness(1.02);

  opacity:1;

  z-index:2;

  box-shadow:0 26px 52px rgba(0,0,0,.18);

}



.showcase-gallery .showcase-image:hover img{

  transform:scale(1.04);

}



/* střídání layoutu po řádcích */

.showcase-row:nth-child(even){

  grid-template-columns:1.4fr 1.05fr;

}



.showcase-row:nth-child(even) .showcase-copy{

  order:2;

}



.showcase-row:nth-child(even) .showcase-gallery{

  order:1;

}



/* responsive */

@media (max-width: 980px){

  .showcase-row,

  .showcase-row:nth-child(even){

    grid-template-columns:1fr;

    gap:24px;

    padding:24px;

    border-radius:30px;

  }



  .showcase-row:nth-child(even) .showcase-copy,

  .showcase-row:nth-child(even) .showcase-gallery{

    order:initial;

  }



  .showcase-copy{

    border-radius:24px;

    padding:24px 22px;

  }



  .showcase-gallery{

    grid-template-columns:1fr 1fr;

  }



  .showcase-image{

    height:260px;

    border-radius:22px;

  }

}



@media (max-width: 640px){

  .work-showcase{

    padding:72px 0;

  }



  .section-heading{

    margin-bottom:30px;

  }



  .section-heading p{

    font-size:16px;

  }



  .showcase-gallery{

    grid-template-columns:1fr;

  }



  .showcase-image{

    height:240px;

  }



  .showcase-copy h3{

    font-size:28px;

  }

}

/* ===== HEADER / MOBILE ===== */



.site-header{

  position:sticky;

  top:0;

  z-index:999;

  background:rgba(255,255,255,.88);

  backdrop-filter:blur(10px);

  border-bottom:1px solid rgba(0,0,0,.06);

}



.header-inner{

  width:min(var(--container), calc(100% - 48px));

  margin:0 auto;

  min-height:72px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:18px;

}



.burger{

  display:none;

  width:46px;

  height:46px;

  border:none;

  background:rgba(82,48,31,.06);

  border:1px solid rgba(82,48,31,.10);

  border-radius:14px;

  cursor:pointer;

  align-items:center;

  justify-content:center;

  flex-direction:column;

  gap:5px;

}



.burger span{

  display:block;

  width:18px;

  height:2px;

  background:var(--brown-700);

  border-radius:2px;

  transition:all .22s ease;

}



.mobile-menu{

  display:none;

}



.mobile-menu-inner{

  display:flex;

  flex-direction:column;

  gap:10px;

  padding:0 24px 20px;

}



.mobile-menu a{

  padding:12px 0;

  border-bottom:1px solid rgba(82,48,31,.08);

  color:var(--brown-700);

  font-weight:600;

}



.social-mobile{

  display:flex;

  gap:10px;

  padding-top:10px;

}



.social-mobile a{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:10px 14px;

  border-radius:999px;

  background:rgba(82,48,31,.06);

  border:1px solid rgba(82,48,31,.10);

  font-size:13px;

  font-weight:700;

  color:var(--brown-700);

}



/* otevřené menu */

.mobile-menu.is-open{

  display:block;

  background:#fff;

  border-top:1px solid rgba(0,0,0,.06);

}



/* animace burgeru */

.burger.is-open span:nth-child(1){

  transform:translateY(7px) rotate(45deg);

}



.burger.is-open span:nth-child(2){

  opacity:0;

}



.burger.is-open span:nth-child(3){

  transform:translateY(-7px) rotate(-45deg);

}

@media (max-width: 900px){



  .header-inner{

    width:min(var(--container), calc(100% - 28px));

    min-height:60px;

    padding:8px 0;

  }



  .logo img{

    height:34px;

  }



  nav{

    display:none;

  }



  .social-desktop{

    display:none;

  }



  .burger{

    display:flex;

  }

}

html{

  scroll-behavior:smooth;

  overflow-x:hidden;

}

/* ===== FACHMAN ROKU ===== */



.award-section{

  padding:74px 0 84px;

  background:linear-gradient(180deg, rgba(243,230,210,.55), rgba(251,247,240,1));

}



.award-box{

  max-width:860px;

  margin:0 auto;

  text-align:center;

  background:linear-gradient(180deg, var(--brown-800), var(--brown-900));

  color:rgba(255,255,255,.94);

  border-radius:32px;

  padding:42px 28px;

  border:1px solid rgba(255,255,255,.08);

  box-shadow:0 24px 60px rgba(0,0,0,.16);

}



.award-icon{

  font-size:42px;

  line-height:1;

  margin-bottom:12px;

}



.award-label{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:8px 14px;

  border-radius:999px;

  background:rgba(255,255,255,.08);

  border:1px solid rgba(255,255,255,.12);

  font-size:13px;

  font-weight:800;

  letter-spacing:.3px;

  margin-bottom:16px;

}



.award-box h2{

  margin:0 0 12px;

  font-size:clamp(30px, 4vw, 48px);

  line-height:1.05;

  letter-spacing:-0.8px;

  color:#fff;

}



.award-stars{

  margin:0 0 18px;

  letter-spacing:4px;

  color:#d9b06b;

  font-size:18px;

  font-weight:900;

}



.award-box p{

  max-width:700px;

  margin:0 auto 14px;

  line-height:1.8;

  color:rgba(255,255,255,.86);

  font-size:16px;

}



.award-box p:last-child{

  margin-bottom:0;

}



@media (max-width: 720px){

  .award-section{

    padding:62px 0 72px;

  }



  .award-box{

    padding:30px 20px;

    border-radius:24px;

  }



  .award-box h2{

    font-size:34px;

  }



  .award-box p{

    font-size:15px;

    line-height:1.75;

  }



  .award-stars{

    font-size:16px;

    letter-spacing:3px;

  }

}

/* ===== FOOTER ===== */



.site-footer{

  background:#071428;

  color:rgba(255,255,255,.85);

  padding:70px 0 25px;

}



.footer-grid{

  display:grid;

  grid-template-columns:2fr 1fr 1fr 1fr;

  gap:40px;

}



/* brand */



.footer-brand h3{

  font-size:24px;

  margin:15px 0 10px;

  color:#fff;

}



.footer-brand p{

  color:rgba(255,255,255,.65);

  line-height:1.7;

  max-width:320px;

}



.footer-logo{

  width:45px;

  border-radius:10px;

}



/* columns */



.footer-col h4{

  margin-bottom:15px;

  font-size:18px;

  color:#fff;

}



.footer-col a{

  display:block;

  margin-bottom:8px;

  color:rgba(255,255,255,.75);

  text-decoration:none;

  transition:all .2s ease;

}



.footer-col a:hover{

  color:#fff;

}



/* social */



.footer-socials{

  display:flex;

  flex-direction:column;

  gap:12px;

}



.footer-social{

  display:flex;

  align-items:center;

  gap:10px;

  padding:10px 16px;

  border-radius:999px;

  border:1px solid rgba(255,255,255,.15);

  background:rgba(255,255,255,.05);

  color:#fff;

  font-weight:600;

  transition:all .2s ease;

}



.footer-social svg{

  width:18px;

  height:18px;

  fill:currentColor;

}



.footer-social:hover{

  transform:translateY(-2px);

}



/* instagram */



.footer-social.instagram:hover{

  background:linear-gradient(

    45deg,

    #f09433,

    #e6683c,

    #dc2743,

    #cc2366,

    #bc1888

  );

  border-color:transparent;

}



/* facebook */



.footer-social.facebook:hover{

  background:#1877f2;

  border-color:transparent;

}



/* bottom */



.footer-bottom{

  text-align:center;

  margin-top:40px;

  font-size:14px;

  opacity:.6;

}



/* responsive */



@media (max-width:900px){



  .footer-grid{

    grid-template-columns:1fr 1fr;

  }



}



@media (max-width:600px){



  .footer-grid{

    grid-template-columns:1fr;

    gap:30px;

  }



}

/* ===== HEADER SOCIAL LINKS ===== */



.social a{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:42px;

  padding:0 16px;

  border-radius:999px;

  background:rgba(82,48,31,.06);

  border:1px solid rgba(82,48,31,.10);

  font-size:13px;

  font-weight:700;

  color:var(--brown-700);

  transition:all .18s ease;

}



.social a:hover{

  background:rgba(82,48,31,.11);

  transform:translateY(-1px);

}



.social-mobile a{

  flex:1;

  justify-content:center;

}



/* ===== FOOTER ===== */



.site-footer{

  background:

    radial-gradient(circle at top left, rgba(255,255,255,.04), transparent 30%),

    linear-gradient(180deg, #071428 0%, #08162c 100%);

  color:rgba(255,255,255,.85);

  padding:70px 0 25px;

}



.footer-grid{

  display:grid;

  grid-template-columns:2fr 1fr 1fr 1fr;

  gap:40px;

}



.footer-brand h3{

  font-size:24px;

  margin:15px 0 10px;

  color:#fff;

}



.footer-brand p{

  color:rgba(255,255,255,.65);

  line-height:1.75;

  max-width:330px;

}



.footer-logo{

  width:45px;

  border-radius:10px;

}



.footer-col h4{

  margin-bottom:15px;

  font-size:18px;

  color:#fff;

}



.footer-col p{

  color:rgba(255,255,255,.72);

  line-height:1.75;

  margin-bottom:14px;

}



.footer-col a{

  display:block;

  margin-bottom:8px;

  color:rgba(255,255,255,.76);

  text-decoration:none;

  transition:all .2s ease;

}



.footer-col a:hover{

  color:#fff;

}



.footer-socials{

  display:flex;

  flex-direction:column;

  gap:14px;

}



.footer-social{

  display:flex;

  align-items:center;

  gap:12px;

  padding:12px 18px;

  border-radius:999px;

  border:1px solid rgba(255,255,255,.12);

  background:rgba(255,255,255,.05);

  color:#fff !important;

  font-weight:700;

  width:fit-content;

  min-width:170px;

  transition:all .22s ease;

  box-shadow:0 10px 24px rgba(0,0,0,.14);

}



.footer-social svg{

  width:18px;

  height:18px;

  fill:currentColor;

  flex:0 0 auto;

}



.footer-social span{

  display:inline-block;

}



.footer-social:hover{

  transform:translateY(-2px);

  color:#fff !important;

}



/* hezčí Instagram */

.footer-social.instagram{

  background:linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.03));

}



.footer-social.instagram:hover{

  background:linear-gradient(

    135deg,

    #f09433 0%,

    #e6683c 25%,

    #dc2743 50%,

    #cc2366 75%,

    #bc1888 100%

  );

  border-color:transparent;

  box-shadow:0 14px 34px rgba(204,35,102,.28);

}



/* Facebook */

.footer-social.facebook:hover{

  background:#1877f2;

  border-color:transparent;

  box-shadow:0 14px 34px rgba(24,119,242,.28);

}



.footer-bottom{

  text-align:center;

  margin-top:40px;

  padding-top:20px;

  border-top:1px solid rgba(255,255,255,.08);

  font-size:14px;

  color:rgba(255,255,255,.55);

}



/* responsive */



@media (max-width: 900px){

  .footer-grid{

    grid-template-columns:1fr 1fr;

  }

}



@media (max-width: 600px){

  .footer-grid{

    grid-template-columns:1fr;

    gap:30px;

  }



  .footer-social{

    width:100%;

    min-width:unset;

    justify-content:flex-start;

  }

}

@media (max-width: 600px){



  .hero-micro{

    font-size:13px;

    line-height:1.4;

    padding:0 12px;

  }



}