html { scroll-behavior: smooth; }
  body { font-family: 'PT Sans', sans-serif; }

  /* Paper texture */
  .paper {
    background-color: #f5f5f5;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  }

  /* Scroll reveal */
  .reveal { opacity:0; transform:translateY(28px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
  .reveal.visible { opacity:1; transform:translateY(0); }

  /* Green divider line */
  .green-line { background: linear-gradient(to right, transparent, #00673D, transparent); }

  /* Hero */
  @keyframes fadeUp { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)} }
  @keyframes fadeIn { from{opacity:0} to{opacity:1} }
  @keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
  .anim-up { animation: fadeUp .9s cubic-bezier(.16,1,.3,1) forwards; opacity:0; }
  .anim-in { animation: fadeIn 1s ease forwards; opacity:0; }
  .bounce { animation: bounce 2s ease-in-out infinite; }
  .hero-copy {
    margin-bottom: 4vh;
    max-width: 68vw;
    transform: translateY(-72px);
  }
  .hero-copy::before {
    content: "";
    position: absolute;
    inset: -1.25rem -1rem -1rem -1rem;
    z-index: -1;
    border-radius: 1.25rem;
    background: radial-gradient(ellipse at center, rgba(4,12,9,.44) 0%, rgba(4,12,9,.24) 48%, transparent 76%);
    pointer-events: none;
  }
  .hero-mascot-layer {
    position: absolute;
    right: -84px;
    bottom: 166px;
    z-index: 10;
    width: min(76vw, 330px);
    pointer-events: none;
  }
  .hero-mascot-img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 24px 46px rgba(0,0,0,.42));
  }
  .hero-description p {
    margin: 0 0 .9em;
  }
  .hero-description p:last-child {
    margin-bottom: 0;
  }
  @media (min-width: 768px) {
    .hero-copy {
      max-width: 54rem;
      transform: translateY(-50px);
    }
    .hero-mascot-layer {
      right: clamp(2rem, 7vw, 7.5rem);
      bottom: 3.5rem;
      width: clamp(360px, 34vw, 560px);
    }
  }
  @media (min-width: 1024px) {
    .hero-copy {
      max-width: min(52rem, 58vw);
    }
  }
  @media (max-width: 380px) {
    .hero-copy {
      max-width: 70vw;
    }
    .hero-mascot-layer {
      right: -96px;
      bottom: 158px;
      width: min(78vw, 315px);
    }
  }
  @media (max-width: 767px) {
    .hero-arrow {
      top: auto !important;
      bottom: 86px;
      transform: none !important;
      z-index: 30;
    }
    .hero-arrow-prev {
      left: 2rem;
    }
    .hero-arrow-next {
      left: 5.5rem;
      right: auto !important;
    }
  }

  /* Gallery */
  .slide { position:absolute; inset:0; opacity:0; transition: opacity .8s ease; }
  .slide.active { opacity:1; }
  .dot { width:6px; height:6px; border-radius:9999px; background:rgba(255,255,255,.4); transition:all .25s; border:none; cursor:pointer; padding:0; }
  .dot.active { background:white; width:20px; border-radius:4px; }

  /* Flip cards — translateZ убирает «зеркальный»/рваный текст в 3D */
  .flip-card { perspective:1200px; }
  .flip-inner { transition:transform .55s cubic-bezier(.4,0,.2,1); transform-style:preserve-3d; position:relative; width:100%; height:100%; }
  .flip-card.flipped .flip-inner { transform:rotateY(180deg); }
  .flip-face {
    position:absolute; inset:0;
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
    border-radius:1rem; overflow:hidden;
    transform: rotateY(0deg) translateZ(0.5px);
  }
  .flip-back { transform: rotateY(180deg) translateZ(0.5px); }
  .flip-cue {
    background: rgba(7, 18, 13, .56);
    border-color: rgba(255,255,255,.34);
    box-shadow: 0 8px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform .28s ease, background-color .28s ease, border-color .28s ease;
  }
  .flip-card:hover .flip-cue,
  .flip-card:focus-within .flip-cue {
    transform: rotate(22deg);
    background: rgba(7, 18, 13, .72);
    border-color: rgba(255,255,255,.52);
  }
  .flip-card.flipped .flip-cue {
    transform: rotate(180deg);
  }

  /* Rules infinite carousel */
  .rules-viewport { overflow:visible; position:relative; }
  .rules-track { display:flex; gap:20px; will-change:transform; padding:24px 0 36px; }
  .rule-card { flex:0 0 420px; width:420px; height:440px; opacity:.38; transition:opacity .45s, transform .45s cubic-bezier(.4,0,.2,1); cursor:pointer; border-radius:1.25rem; overflow:hidden; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.06); position:relative; }
  .rule-card.rc-active { opacity:1; transform:translateY(-20px); box-shadow:0 12px 40px rgba(0,0,0,.13); z-index:10; }
  .rule-card .rc-media { position:absolute; inset:0; overflow:hidden; z-index:0; transition: opacity .35s ease; }
  .rule-card .rc-media img { width:100%; height:100%; object-fit:cover; display:block; }
  .rule-card .rc-sheet {
    position:absolute; left:0; right:0; bottom:0; height:132px;
    background:#fff; padding:16px 20px 14px; display:flex; flex-direction:column;
    transition:height .5s cubic-bezier(.4,0,.2,1), box-shadow .45s, border-radius .35s;
    border-radius:0 0 1.25rem 1.25rem; z-index:1;
    overflow:hidden;
  }
  .rule-card.rc-expanded .rc-sheet {
    height:100%; z-index:2; border-radius:1.25rem; box-shadow:inset 0 1px 0 rgba(0,0,0,.04);
    overflow-y:auto;
  }
  .rule-card .rc-head { flex-shrink:0; }
  .rule-card .rc-hint {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid #eef1f6;
    font-family: 'PT Sans', sans-serif;
    font-size: 11px;
    color: #3f7658;
    line-height: 1.35;
    letter-spacing: 0.02em;
  }
  .rule-card.rc-expanded .rc-hint { display: none; }
  .rule-card.rc-expanded .rc-head {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
    padding-bottom: 10px;
    margin-bottom: 2px;
  }
  .rule-card.rc-expanded .rc-media { opacity: 0; }
  .rule-card .rc-all-rules { display: none; }
  .rule-card.rc-expanded .rc-all-rules {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    padding-right: 6px;
    border-top: 1px solid #eef1f6;
    padding-top: 14px;
    margin-top: 2px;
  }
  .rule-card .rc-all-rules p {
    font-family: 'PT Sans', sans-serif;
    font-size: 13px;
    color: #4a7358;
    line-height: 1.65;
    margin: 0 0 12px;
  }
  @media (max-width: 767px) {
    .rules-track {
      gap: 14px;
      padding: 18px 0 30px;
    }
    .rule-card {
      flex-basis: min(82vw, 340px);
      width: min(82vw, 340px);
      height: 400px;
      border-radius: 1rem;
    }
    .rule-card.rc-active {
      transform: translateY(-12px);
    }
    .rule-card .rc-sheet {
      height: 128px;
      padding: 14px 16px 12px;
      border-radius: 0 0 1rem 1rem;
    }
    .rule-card.rc-expanded .rc-sheet {
      border-radius: 1rem;
    }
  }

  /* Review form */
  .vesta-review-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  /* FAQ */
  .faq-body { max-height:0; overflow:hidden; transition:max-height .38s ease; }
  .faq-item.open .faq-body { max-height:220px; }
  .faq-toggle { transition:transform .3s; }
  .faq-item.open .faq-toggle { transform:rotate(45deg); background:#00673D; border-color:#00673D; color:white; }

  /* Flip cards — по центру при любом количестве */
  .vesta-flip-cards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
  }
  .vesta-flip-cards-grid > .flip-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
  .vesta-flip-cards-grid > .flip-card:only-child {
    width: min(100%, 420px);
    max-width: min(100%, 420px);
  }
  @media (min-width: 640px) {
    .vesta-flip-cards-grid > .flip-card {
      width: min(calc(50% - 0.625rem), 400px);
      max-width: min(calc(50% - 0.625rem), 400px);
    }
    .vesta-flip-cards-grid > .flip-card:only-child {
      width: min(100%, 420px);
      max-width: min(100%, 420px);
    }
  }
  @media (min-width: 1024px) {
    .vesta-flip-cards-grid > .flip-card {
      width: min(calc(33.333% - 0.834rem), 400px);
      max-width: min(calc(33.333% - 0.834rem), 400px);
    }
    .vesta-flip-cards-grid > .flip-card:only-child {
      width: min(100%, 420px);
      max-width: min(100%, 420px);
    }
  }

  /* Contacts — группа карточек по центру при любом количестве */
  .vesta-contacts-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 1.25rem;
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
  }
  .vesta-contacts-grid .vesta-contact-card {
    flex: 0 0 auto;
    width: 10.75rem;
    max-width: calc(50% - 0.625rem);
  }
  @media (min-width: 480px) {
    .vesta-contacts-grid .vesta-contact-card {
      width: 11rem;
      max-width: 11rem;
    }
  }

  /* Scrollbar */
  ::-webkit-scrollbar { width:6px; }
  ::-webkit-scrollbar-track { background:#f5f5f5; }
  ::-webkit-scrollbar-thumb { background:#00673D; border-radius:4px; }

  /* Mobile menu panel — фон как у шапки (прозрачно на герое, белый после скролла) */
  #mobileMenu { transition: border-color .45s ease; }
  #navbar:not(.nav-on-light) #mobileMenu { border-color: rgba(255,255,255,.22); }
  #navbar.nav-on-light #mobileMenu { border-color: #e8e8e4; }
  #mobileMenuInner {
    transition: background-color .45s ease, backdrop-filter .45s ease;
  }
  #navbar:not(.nav-on-light) #mobileMenuInner {
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  #navbar.nav-on-light #mobileMenuInner {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }