@import url("about-stickers.css?v=20260904-exact1");

/* =========================================================
   APPROVED MOCKUP — HERO + “ЧОМУ ВАРТО БУТИ ТУТ?”
   Loaded last. These rules intentionally own only the first
   two landing-page screens.
   ========================================================= */

/* ---------- HERO ---------- */
html body .hero{
  position:relative!important;
  isolation:isolate!important;
  box-sizing:border-box!important;
  min-height:650px!important;
  height:calc(100svh - 78px)!important;
  max-height:760px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  overflow:hidden!important;
  background:#062c24!important;
}

/* User-provided poster. Show the entire artwork — never crop it. */
html body .hero::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0 0 0 49%!important;
  z-index:0!important;
  pointer-events:none!important;
  background-color:#f7f6f0!important;
  background-image:url("assets/hero-main.jpg?v=20260904-exact1")!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:contain!important;
  opacity:1!important;
}

/* Only a narrow emerald blend enters the poster, like the approved mockup. */
html body .hero::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,
    #062c24 0%,
    #062c24 39%,
    rgba(6,44,36,.98) 43%,
    rgba(6,44,36,.88) 47%,
    rgba(6,44,36,.58) 50%,
    rgba(6,44,36,.24) 53%,
    rgba(6,44,36,0) 57%)!important;
}

html body .hero-artwork,
html body .hero-grid,
html body .hero-orb,
html body .hero-meta,
html body .marquee{display:none!important}

html body .hero .hero-inner{
  position:relative!important;
  z-index:3!important;
  display:block!important;
  width:min(1320px,calc(100% - 128px))!important;
  margin:0 auto!important;
  padding:58px 0 28px!important;
  min-height:0!important;
}
html body .hero .hero-copy,
html body .hero .hero-copy.reveal{
  position:relative!important;
  z-index:4!important;
  width:min(610px,45vw)!important;
  max-width:610px!important;
  margin:0!important;
  padding:0!important;
  opacity:1!important;
  transform:none!important;
  overflow:visible!important;
}
html body .hero .edition-stamp{display:none!important}

/* Bronze date plaque from the approved visual. */
html body .hero .eyebrow{
  position:relative!important;
  display:block!important;
  width:min(300px,100%)!important;
  min-height:82px!important;
  margin:0 0 24px!important;
  padding:13px 18px 12px!important;
  border:1px solid rgba(83,213,169,.72)!important;
  border-radius:0!important;
  background:linear-gradient(100deg,#b78950 0%,#9e7649 52%,rgba(22,94,73,.94) 100%)!important;
  box-shadow:none!important;
  color:transparent!important;
  font-size:0!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
html body .hero .eyebrow::before{
  content:"25–26"!important;
  display:block!important;
  color:#f5f0e7!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:46px!important;
  font-weight:400!important;
  line-height:.92!important;
  letter-spacing:-.045em!important;
}
html body .hero .eyebrow::after{
  content:"ВЕРЕСНЯ · ВІННИЦЯ"!important;
  display:block!important;
  margin-top:8px!important;
  padding-left:14px!important;
  border-left:1px solid rgba(244,235,219,.55)!important;
  color:#f5f0e7!important;
  font-family:Arial,sans-serif!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.08em!important;
}
html body .hero .eyebrow .live-dot{display:none!important}

html body .hero h1{
  display:block!important;
  width:100%!important;
  max-width:610px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(58px,5.05vw,78px)!important;
  font-weight:400!important;
  line-height:.84!important;
  letter-spacing:-.05em!important;
  white-space:normal!important;
}
html body .hero h1 br{display:none!important}
html body .hero h1 span,
html body .hero h1 em{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  transform:none!important;
  overflow:visible!important;
  white-space:nowrap!important;
}
html body .hero h1 span{color:#f4f0e7!important}
html body .hero h1 em{
  color:#31d3a2!important;
  -webkit-text-stroke:0!important;
  font-style:normal!important;
  font-size:.88em!important;
  margin-top:.05em!important;
  letter-spacing:-.055em!important;
}
/* Kill the old pseudo venue line; venue is attached to lead below. */
html body .hero h1::after{content:none!important;display:none!important}

html body .hero .hero-lead{
  position:relative!important;
  max-width:540px!important;
  margin:27px 0 0!important;
  padding:0 0 58px!important;
  color:#d6dfda!important;
  font-size:clamp(15px,1.15vw,18px)!important;
  line-height:1.52!important;
}
html body .hero .hero-lead::after{
  content:"Місце проведення заходу: готельно-ресторанний комплекс «Mont Blanc» · Hotel France · вул. Соборна, 34 · Вінниця"!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  bottom:0!important;
  width:min(540px,100%)!important;
  padding-left:24px!important;
  color:#e3eae6!important;
  font-family:Arial,sans-serif!important;
  font-size:12px!important;
  font-weight:600!important;
  line-height:1.45!important;
  letter-spacing:.01em!important;
  background:linear-gradient(#d5a45d,#d5a45d) left 2px center/2px 32px no-repeat!important;
}

html body .hero .hero-actions{
  display:flex!important;
  align-items:stretch!important;
  gap:12px!important;
  margin:28px 0 0!important;
}
html body .hero .hero-actions .button{
  min-height:56px!important;
  border-radius:0!important;
  padding:0 22px!important;
  box-shadow:none!important;
}
html body .hero .hero-actions .button.primary{
  background:#bd8f54!important;
  border-color:#bd8f54!important;
  color:#fff!important;
}
html body .hero .hero-actions .button.ghost{
  background:rgba(6,44,36,.32)!important;
  border-color:rgba(218,230,224,.34)!important;
  color:#f4f2ec!important;
}
html body .hero .hero-actions .button.primary,
html body .hero .hero-actions .button.ghost{font-size:0!important}
html body .hero .hero-actions .button.primary::before,
html body .hero .hero-actions .button.ghost::before{
  position:static!important;
  inset:auto!important;
  display:inline!important;
  width:auto!important;
  height:auto!important;
  opacity:1!important;
  background:none!important;
  transform:none!important;
  font-family:Arial,sans-serif!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.02em!important;
  white-space:nowrap!important;
}
html body .hero .hero-actions .button.primary::before{content:"КУПИТИ КВИТОК"!important}
html body .hero .hero-actions .button.ghost::before{content:"БРОНЮВАННЯ МІСЦЯ"!important}
html body .hero .hero-actions .button span{font-size:15px!important;margin-left:12px!important}

/* ---------- ABOUT: exact approved composition ---------- */
html body #about{
  position:relative!important;
  overflow:hidden!important;
  padding:70px 0 86px!important;
  background:
    radial-gradient(circle at 22% 14%,rgba(29,147,111,.18),transparent 30%),
    radial-gradient(circle at 78% 60%,rgba(25,119,91,.12),transparent 32%),
    linear-gradient(118deg,#073328 0%,#05271f 52%,#063026 100%)!important;
  color:#f4f1e8!important;
}
html body #about .section-kicker{display:none!important}
html body #about .container{position:relative!important;z-index:2!important}
html body #about .about-layout{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,5fr) minmax(0,2fr) minmax(0,5fr)!important;
  gap:24px!important;
  align-items:center!important;
  margin:0!important;
}
html body #about .about-layout .section-title{
  grid-column:1!important;
  margin:0!important;
  max-width:520px!important;
  color:#f4f0e7!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(58px,5.2vw,82px)!important;
  font-weight:400!important;
  line-height:.92!important;
  letter-spacing:-.055em!important;
}
html body #about .about-layout .section-title span{color:#f4f0e7!important}
html body #about .about-copy{
  grid-column:3!important;
  align-self:center!important;
  padding:0 30px 0 0!important;
}
html body #about .about-copy p{
  max-width:440px!important;
  margin:0!important;
  color:#d8e2dd!important;
  font-size:clamp(15px,1.18vw,18px)!important;
  line-height:1.55!important;
}

/* Building sticker centered between title and intro. */
html body #about .about-layout::after{
  left:50%!important;
  top:50%!important;
  width:118px!important;
  height:102px!important;
  transform:translate(-50%,-52%) rotate(-4deg)!important;
  opacity:1!important;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.3))!important;
  animation:none!important;
}

html body #about .benefit-grid{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr)!important;
  grid-template-rows:164px 164px!important;
  gap:12px!important;
  margin:54px 0 0!important;
  padding:0!important;
  border:0!important;
}
html body #about .benefit{
  position:relative!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:28px 30px!important;
  display:block!important;
  overflow:visible!important;
  border:1px solid rgba(91,199,159,.38)!important;
  border-radius:0!important;
  background:linear-gradient(135deg,#0b644b 0%,#09513e 100%)!important;
  box-shadow:none!important;
  transform:none!important;
  isolation:isolate!important;
}
html body #about .benefit:nth-child(1){grid-column:1!important;grid-row:1 / 3!important;background:linear-gradient(135deg,#0c6a50,#084c3a)!important}
html body #about .benefit:nth-child(2){grid-column:2!important;grid-row:1!important;background:#082b24!important}
html body #about .benefit:nth-child(3){grid-column:3!important;grid-row:1!important;background:linear-gradient(135deg,#bc8d53,#95683a)!important;border-color:rgba(231,192,137,.72)!important}
html body #about .benefit:nth-child(4){grid-column:2 / 4!important;grid-row:2!important;background:linear-gradient(110deg,#0c6049,#0a3c31)!important}
html body #about .benefit:hover{transform:none!important}
html body #about .benefit>span{display:none!important}
html body #about .benefit>div{position:relative!important;z-index:3!important}
html body #about .benefit h3{
  margin:0 0 10px!important;
  color:#f5f0e6!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(29px,2.65vw,42px)!important;
  font-weight:400!important;
  line-height:1!important;
  letter-spacing:-.045em!important;
}
html body #about .benefit:nth-child(2) h3{font-size:clamp(25px,2.15vw,34px)!important}
html body #about .benefit p{
  max-width:390px!important;
  margin:0!important;
  color:#d3dfda!important;
  font-size:13px!important;
  line-height:1.45!important;
}
html body #about .benefit:nth-child(3) p{color:#f2e5d1!important}

/* Keep the same four outline stickers from the approved picture, without sticker cards. */
html body #about .benefit::before{
  z-index:4!important;
  opacity:1!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background-color:transparent!important;
  background-size:contain!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  box-shadow:none!important;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.38))!important;
  transition:none!important;
}
html body #about .benefit:nth-child(1)::before{
  left:28px!important;right:auto!important;top:auto!important;bottom:25px!important;
  width:118px!important;height:118px!important;transform:rotate(-7deg)!important;
}
html body #about .benefit:nth-child(2)::before{
  left:auto!important;right:14px!important;top:auto!important;bottom:-6px!important;
  width:86px!important;height:96px!important;transform:rotate(7deg)!important;
}
html body #about .benefit:nth-child(3)::before{
  left:auto!important;right:-10px!important;top:-60px!important;bottom:auto!important;
  width:118px!important;height:94px!important;transform:rotate(6deg)!important;
}
html body #about .benefit:nth-child(4)::before{
  left:auto!important;right:38%!important;top:auto!important;bottom:-22px!important;
  width:116px!important;height:108px!important;transform:rotate(-5deg)!important;
}

/* Decorative circles, stars and dot fields visible in the approved picture. */
html body #about::before{
  content:""!important;
  position:absolute!important;
  right:-70px!important;
  top:-58px!important;
  width:210px!important;
  height:210px!important;
  border:1px solid rgba(208,159,91,.34)!important;
  border-radius:50%!important;
  box-shadow:0 0 0 20px rgba(208,159,91,.055),0 0 0 42px rgba(47,198,153,.03)!important;
  background-image:radial-gradient(circle,rgba(208,159,91,.64) 1.2px,transparent 1.4px)!important;
  background-size:12px 12px!important;
  background-position:80px 70px!important;
  opacity:.68!important;
  pointer-events:none!important;
}
html body #about::after{
  content:""!important;
  position:absolute!important;
  left:-92px!important;
  bottom:-116px!important;
  width:205px!important;
  height:205px!important;
  border:1px solid rgba(56,205,160,.34)!important;
  border-radius:50%!important;
  box-shadow:0 0 0 24px rgba(211,165,97,.06)!important;
  opacity:.8!important;
  pointer-events:none!important;
}
html body #about .benefit-grid::before{
  content:"✦"!important;
  position:absolute!important;
  left:3.5%!important;
  bottom:-47px!important;
  z-index:5!important;
  color:#d9a55d!important;
  font-size:32px!important;
  line-height:1!important;
  pointer-events:none!important;
}
html body #about .benefit-grid::after{
  content:""!important;
  position:absolute!important;
  right:-26px!important;
  bottom:-56px!important;
  width:100px!important;
  height:74px!important;
  background-image:radial-gradient(circle,rgba(211,165,97,.7) 1.2px,transparent 1.5px)!important;
  background-size:11px 11px!important;
  opacity:.65!important;
  pointer-events:none!important;
}

/* ---------- TABLET ---------- */
@media(max-width:1180px) and (min-width:761px){
  html body .hero{min-height:630px!important;max-height:730px!important}
  html body .hero::after{inset-left:50%!important}
  html body .hero .hero-inner{width:calc(100% - 72px)!important}
  html body .hero .hero-copy{width:min(540px,47vw)!important;max-width:540px!important}
  html body .hero h1{font-size:clamp(52px,5.1vw,68px)!important}
  html body .hero .hero-lead{font-size:15px!important}

  html body #about .about-layout .section-title{font-size:clamp(50px,5.4vw,68px)!important}
  html body #about .about-layout::after{width:94px!important;height:82px!important}
  html body #about .benefit h3{font-size:clamp(25px,2.7vw,34px)!important}
}

/* ---------- MOBILE ---------- */
@media(max-width:760px){
  html body .hero{
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    display:block!important;
    background:#062c24!important;
  }
  html body .hero::after{
    inset:auto 0 0 0!important;
    width:100%!important;
    height:365px!important;
    background-color:#f7f6f0!important;
    background-position:center center!important;
    background-size:contain!important;
  }
  html body .hero::before{
    background:linear-gradient(180deg,#062c24 0%,#062c24 54%,rgba(6,44,36,.97) 62%,rgba(6,44,36,.58) 72%,rgba(6,44,36,.12) 82%,rgba(6,44,36,0) 90%)!important;
  }
  html body .hero .hero-inner{
    width:calc(100% - 32px)!important;
    padding:88px 0 385px!important;
  }
  html body .hero .hero-copy,
  html body .hero .hero-copy.reveal{width:100%!important;max-width:100%!important}
  html body .hero .eyebrow{width:236px!important;min-height:70px!important;margin-bottom:18px!important;padding:10px 14px!important}
  html body .hero .eyebrow::before{font-size:37px!important}
  html body .hero .eyebrow::after{font-size:11px!important;margin-top:7px!important}
  html body .hero h1{max-width:100%!important;font-size:clamp(45px,12.5vw,59px)!important;line-height:.85!important}
  html body .hero h1 em{font-size:.82em!important}
  html body .hero .hero-lead{margin-top:20px!important;padding-bottom:70px!important;font-size:15px!important}
  html body .hero .hero-lead::after{font-size:11.5px!important;line-height:1.45!important;padding-left:18px!important}
  html body .hero .hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin-top:22px!important}
  html body .hero .hero-actions .button{width:100%!important;margin:0!important}

  html body #about{padding:58px 0 72px!important}
  html body #about .about-layout{display:grid!important;grid-template-columns:1fr!important;gap:20px!important}
  html body #about .about-layout .section-title{grid-column:1!important;font-size:clamp(44px,12vw,58px)!important;max-width:310px!important}
  html body #about .about-copy{grid-column:1!important;padding:0!important;max-width:315px!important;margin-left:auto!important}
  html body #about .about-copy p{font-size:14px!important;line-height:1.5!important}
  html body #about .about-layout::after{left:auto!important;right:2px!important;top:4px!important;width:72px!important;height:62px!important;transform:rotate(-4deg)!important;opacity:.82!important}

  html body #about .benefit-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:none!important;
    gap:9px!important;
    margin-top:34px!important;
  }
  html body #about .benefit,
  html body #about .benefit:nth-child(1),
  html body #about .benefit:nth-child(2),
  html body #about .benefit:nth-child(3),
  html body #about .benefit:nth-child(4){
    grid-column:1!important;
    grid-row:auto!important;
    min-height:156px!important;
    padding:22px!important;
    overflow:hidden!important;
  }
  html body #about .benefit:nth-child(1){min-height:220px!important}
  html body #about .benefit h3,
  html body #about .benefit:nth-child(2) h3{font-size:31px!important}
  html body #about .benefit p{font-size:13px!important;max-width:70%!important}
  html body #about .benefit:nth-child(1)::before{left:18px!important;bottom:14px!important;width:84px!important;height:84px!important}
  html body #about .benefit:nth-child(2)::before{right:8px!important;bottom:6px!important;width:70px!important;height:78px!important}
  html body #about .benefit:nth-child(3)::before{right:8px!important;top:8px!important;width:76px!important;height:62px!important}
  html body #about .benefit:nth-child(4)::before{right:12px!important;bottom:4px!important;width:78px!important;height:74px!important}
  html body #about::before{right:-100px!important;top:-70px!important;opacity:.44!important}
  html body #about::after{left:-120px!important;bottom:-130px!important;opacity:.5!important}
  html body #about .benefit-grid::after{display:none!important}
}

@media(max-width:390px){
  html body .hero::after{height:325px!important}
  html body .hero .hero-inner{padding-bottom:345px!important}
  html body .hero h1{font-size:clamp(41px,12vw,51px)!important}
  html body .hero .hero-actions .button.primary::before,
  html body .hero .hero-actions .button.ghost::before{font-size:12px!important}
}