:root {
      --milk: #faf7f2;
      --champagne: #f4e8d7;
      --gold: #d4af37;
      --gold-light: #ebd78a;
      --gold-glow: #c9a84c;
      --emerald: #2f6f62;
      --dark: #3e3a35;
      --white: #ffffff;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    @font-face {
      font-family: 'corki';
      src: url('fonts/corki/corki-regular-webfont.eot');
      src: url('fonts/corki/corki-regular-webfont.svg');
      src: url('fonts/corki/corki-regular-webfont.ttf');
      src: url('fonts/corki/corki-regular-webfont.woff');
    }

    @font-face {
      font-family: 'montserrat';
      src: url('fonts/montserrat/Montserrat.ttf');
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 75px;
    }

    body {
      font-family: 'Montserrat', sans-serif;
      background: var(--milk);
      color: var(--dark);
      overflow-x: hidden;
      line-height: 1.7;
    }

    h1, h2, h3 {
      font-family: 'Playfair Display', serif;
      margin: 0 0 10px;
    }

    .container {
      width: min(1200px, 92%);
      margin: auto;
    }

    section {
      padding: 140px 0;
    }

    #dreams {
      scroll-margin-top: -120px;
    }

    #gallery {
      scroll-margin-top: -80px;
    }

    /* Специальные настройки для плавного скролла к нужным разделам */
    #wishes {
      scroll-margin-top: -50px;
      padding-bottom: 200px; /* УВЕЛИЧЕННЫЙ ОТСТУП СНИЗУ */
    }

    #music-surprise {
      scroll-margin-top: 120px;
    }

    .fade-up {
      opacity: 0;
      transform: translateY(40px);
      transition: 1s;
    }

    .fade-up.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ========================================
       МЕНЮ
       ======================================== */
    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      background: rgba(250, 247, 242, .85);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(212, 175, 55, .2);
    }

    nav {
      height: 75px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo {
      font-size: 28px;
      font-family: 'Playfair Display', serif;
      color: var(--emerald);
    }

    .menu {
      display: flex;
      gap: 30px;
    }

    .menu a {
      text-decoration: none;
      color: var(--dark);
      font-weight: 600;
      transition: .3s;
    }

    .menu a:hover {
      color: var(--gold);
    }

    /* Стиль для кнопки "Сюрприз" в меню */
    .menu .surprise-link {
      color: var(--gold);
      font-weight: 700;
    }

    .menu .surprise-link:hover {
      color: var(--emerald);
    }

    .burger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      z-index: 1001;
    }

    .burger span {
      width: 28px;
      height: 3px;
      background: var(--emerald);
      border-radius: 3px;
      transition: .3s;
    }

    /* ========================================
       HERO
       ======================================== */
    .hero {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: relative;
      background: linear-gradient(135deg, #faf7f2, #f4e8d7, #faf7f2);
      overflow: hidden;
    }

    .floating-bubbles {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: 1;
    }

    .bubble {
      position: absolute;
      border-radius: 50%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      box-shadow:
        0 10px 35px rgba(0, 0, 0, .15),
        0 0 0 4px rgba(212, 175, 55, .25),
        0 0 0 8px rgba(212, 175, 55, .08);
      animation: floatBubble 9s ease-in-out infinite;
    }

    .bubble-1  { width:140px; height:140px; top:15%; left:10%;  background-image:url('images/family1.jpg'); }
    .bubble-2  { width:100px; height:100px; top:20%; right:15%; background-image:url('images/family2.jpg'); }
    .bubble-3  { width:140px; height:140px; top:60%; left:8%;   background-image:url('images/family17.jpg'); }
    .bubble-4  { width:110px; height:110px; top:70%; right:10%; background-image:url('images/me1.jpg'); }
    .bubble-5  { width:90px;  height:90px;  top:40%; left:25%;  background-image:url('images/me2.jpg'); }
    .bubble-6  { width:130px; height:130px; top:40%; right:15%; background-image:url('images/family12.jpg'); }
    .bubble-7  { width:105px; height:105px; top:80%; left:40%;  background-image:url('images/family11.jpg'); }
    .bubble-8  { width:115px; height:115px; top:10%; left:50%;  background-image:url('images/me2.jpg'); }
    .bubble-9  { width:95px;  height:95px;  top:50%; right:5%;  background-image:url('images/me3.jpg'); }
    .bubble-10 { width:125px; height:125px; top:75%; right:35%; background-image:url('images/me6.jpg'); }
    .bubble-11 { width:100px; height:100px; top:5%;  left:35%;  background-image:url('images/me4.jpg'); }
    .bubble-12 { width:100px; height:100px; top:45%; left:5%;   background-image:url('images/ME5.jpg'); }
    .bubble-13 { width:110px; height:110px; top:85%; left:70%;  background-image:url('images/me7.jpg'); }
    .bubble-14 { width:110px; height:110px; top:85%; left:20%;  background-image:url('images/me10.jpg'); }
    .bubble-15 { width:95px;  height:95px;  top:65%; left:75%;  background-image:url('images/trip6.jpg'); }
    .bubble-16 { width:100px; height:100px; top:23%; left:90%;  background-image:url('images/work1.jpg'); }

    @keyframes floatBubble {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-25px); }
    }

    .floating-bubbles-mobile {
      display: none;
    }

    .hero-box {
      position: relative;
      z-index: 10;
      max-width: 850px;
      padding: 55px;
      background: rgba(255, 255, 255, .75);
      backdrop-filter: blur(18px);
      border-radius: 40px;
      box-shadow: 0 30px 60px rgba(0, 0, 0, .08);
    }

    .hero h1 {
      font-size: clamp(2.5rem, 6vw, 4.8rem);
      color: var(--emerald);
      line-height: 1.2;
      margin-bottom: 25px;
    }

    .subtitle {
      font-size: 1.25rem;
      margin-bottom: 40px;
    }

    p.subtitle {
      font-weight: 300;
    }

    .hero-btn {
      border: none;
      padding: 18px 40px;
      border-radius: 60px;
      font-size: 18px;
      cursor: pointer;
      background: linear-gradient(135deg, var(--gold), #c79e25);
      color: white;
      font-weight: 600;
      font-family: 'Playfair Display', serif;
      letter-spacing: 0.5pt;
      transition: .3s;
    }

    .hero-btn:hover {
      transform: translateY(-4px);
    }

    /* ========================================
       ЗАГОЛОВКИ СЕКЦИЙ
       ======================================== */
    .section-title {
      text-align: center;
      font-size: 3rem;
      margin-bottom: 60px;
      color: var(--emerald);
    }

    #dreams .section-title {
      margin-bottom: 20px;
    }

    /* ========================================
       КАРТОЧКИ
       ======================================== */
    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 30px;
    }
    .cards p {
      font-weight: 100;
    }

    .card {
      background: white;
      padding: 35px;
      border-radius: 30px;
      box-shadow: 0 20px 45px rgba(0, 0, 0, .05);
      transition: .3s;
      text-align: center;
    }

    .card:hover {
      transform: translateY(-10px);
    }

    .card-icon {
      font-size: 50px;
      margin-bottom: 20px;
    }

    /* ========================================
       55 ПРИЧИН
       ======================================== */
    .reason-item {
      background: white;
      padding: 18px;
      border-radius: 22px;
      text-align: center;
      font-weight: 600;
      border-left: 4px solid var(--gold);
      transition: .3s;
      cursor: default;
    }
    .reason-item:hover {
      background: var(--gold);
      color: white;
      transform: translateY(-5px);
    }

    .reason-item.last-reason {
      background: white;
      color: var(--dark);
      transform: none;
      cursor: default;
      border-left: 4px solid var(--gold);
      grid-column: 1 / -1;
      justify-self: center;
      width: 100%;
      max-width: 420px;
      margin: 0 auto;
      padding: 20px 25px;
      font-size: 32px;
      letter-spacing: 2pt;
      box-shadow: 0 0 0 1px rgba(212, 175, 55, .15),
                  0 8px 25px rgba(0,0,0,.04);
      transition: none;
    }

    .reason-item.last-reason:hover {
      background: white;
      color: var(--dark);
      transform: none;
      box-shadow: 0 0 0 1px rgba(212, 175, 55, .15),
                  0 8px 25px rgba(0,0,0,.04);
    }

    /* ========================================
       ГАЛЕРЕЯ — 4 В РЯД НА ВСЮ ШИРИНУ
       ======================================== */
    .gallery-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 25px;
      width: 100%;
      margin: 0 auto 40px;
    }

    .gallery-card {
      height: 200px;
      border-radius: 30px;
      background: linear-gradient(135deg, #e8dccf, #faf7f2);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      font-size: 26px;
      font-weight: 700;
      transition: .3s;
      cursor: pointer;
      text-align: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
    }

    .gallery-card:hover {
      transform: scale(1.04);
      box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
    }

    /* ========================================
       АЛЬБОМ "МОИ 55!" — ГЛУБОКАЯ ЭСТЕТИЧНАЯ ОКАНТОВКА
       ======================================== */
    .gallery-row-bottom {
      display: grid;
      grid-template-columns: 1fr;
      gap: 25px;
      width: 100%;
      max-width: 500px;
      margin: 0 auto;
    }

    .gallery-card-gold {
      height: 200px;
      border-radius: 30px;
      background: linear-gradient(135deg, #e8dccf, #faf7f2);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      font-size: 26px;
      font-weight: 700;
      transition: .3s;
      cursor: pointer;
      text-align: center;
      
      border: 3px solid transparent;
      background-clip: padding-box;
      position: relative;
      
      box-shadow: 
        0 4px 12px rgba(0, 0, 0, .06),
        0 0 0 2px rgba(212, 175, 55, .2),
        0 0 0 6px rgba(212, 175, 55, .08),
        0 0 30px rgba(212, 175, 55, .06);
      
      background-image: 
        linear-gradient(135deg, #e8dccf, #faf7f2),
        linear-gradient(135deg, #d4af37, #f0d68a, #b8942a, #d4af37, #f0d68a);
      background-origin: padding-box, border-box;
      background-clip: padding-box, border-box;
    }

    .gallery-card-gold::after {
      content: '';
      position: absolute;
      inset: -6px;
      border-radius: 34px;
      background: linear-gradient(135deg, rgba(212, 175, 55, .15), rgba(212, 175, 55, .05), rgba(212, 175, 55, .15));
      z-index: -1;
      filter: blur(8px);
      transition: .4s;
    }

    .gallery-card-gold:hover {
      transform: scale(1.04);
      box-shadow: 
        0 12px 28px rgba(0, 0, 0, .08),
        0 0 0 2px rgba(212, 175, 55, .4),
        0 0 0 8px rgba(212, 175, 55, .12),
        0 0 50px rgba(212, 175, 55, .15),
        0 0 80px rgba(212, 175, 55, .06);
    }

    .gallery-card-gold:hover::after {
      filter: blur(12px);
      background: linear-gradient(135deg, rgba(212, 175, 55, .25), rgba(212, 175, 55, .08), rgba(212, 175, 55, .25));
    }

    /* ========================================
       КАРТА МЕЧТЫ
       ======================================== */
    .dream-country {
      background: white;
      padding: 15px 25px;
      border-radius: 40px;
      font-size: 22px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, .05);
      transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
      cursor: default;
      display: inline-block;
      user-select: none;
      font-weight: 100;
      color: var(--dark);
    }

    .dream-country:hover {
      transform: scale(1.08);
      box-shadow: 0 18px 35px rgba(0, 0, 0, 0.1);
      background: #fffcf5;
    }

    /* ========================================
       ПИСЬМА (АДАПТИРОВАНО ДЛЯ МОБИЛЬНЫХ)
       ======================================== */
    .letter-card {
      background: white;
      padding: 40px;
      border-radius: 30px;
      text-align: center;
      cursor: pointer;
      transition: .3s;
      font-size: 45px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, .05);
    }

    .letter-card:hover {
      transform: translateY(-10px);
    }

    #letterModal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .5);
      z-index: 2000;
      justify-content: center;
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
    }

    #letterContent {
      background: white;
      width: 100%;
      max-width: 700px;
      max-height: 85vh;
      padding: 40px;
      border-radius: 40px;
      position: relative;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      overflow: hidden;
    }

    #closeBtn {
      position: absolute;
      top: 15px;
      right: 15px;
      border: none;
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(4px);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      cursor: pointer;
      color: var(--dark);
      z-index: 10;
      transition: background 0.2s;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    #closeBtn:hover {
      background: rgba(255, 255, 255, 1);
    }

    #letterText {
      font-size: 20px;
      line-height: 1.8;
      overflow-y: auto;
      padding-right: 10px;
      height: 100%;
      word-wrap: break-word;
    }

    #letterText::-webkit-scrollbar {
      width: 6px;
    }
    #letterText::-webkit-scrollbar-track {
      background: transparent;
    }
    #letterText::-webkit-scrollbar-thumb {
      background-color: rgba(212, 175, 55, 0.4);
      border-radius: 10px;
    }

    /* ========================================
       КНОПКА «НАВЕРХ»
       ======================================== */
    #scrollToTopBtn {
      position: fixed;
      bottom: 30px;
      right: 30px;
      z-index: 999;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: var(--emerald);
      backdrop-filter: blur(8px);
      border: none;
      color: white;
      font-size: 22px;
      font-weight: 400;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transform: translateY(20px);
      transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease, background 0.3s ease;
      box-shadow: 0 8px 25px rgba(47, 111, 98, 0.25);
      outline: none;
    }

    #scrollToTopBtn.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    #scrollToTopBtn:hover {
      background: #1f5a4e;
      transform: translateY(-4px);
      box-shadow: 0 12px 30px rgba(47, 111, 98, 0.4);
    }

    /* ========================================
       ФУТЕР
       ======================================== */
    footer {
      background: #24554b;
      padding: 40px;
      text-align: center;
      color: white;
    }

    /* ========================================
       МУЗЫКАЛЬНАЯ ОТКРЫТКА (Теперь ID: music-surprise)
       ======================================== */
    #music-surprise {
      padding: 80px 0;
      background: linear-gradient(180deg, var(--milk) 0%, #fcf5ea 50%, var(--milk) 100%);
      text-align: center;
    }

    .music-btn {
      background: linear-gradient(135deg, #c9a84c, #e0b863);
      border: none;
      outline: none !important;
      padding: 24px 60px;
      border-radius: 80px;
      font-size: 28px;
      font-weight: 600;
      font-family: 'Playfair Display', serif;
      color: white;
      letter-spacing: 2px;
      box-shadow: 0 18px 40px rgba(180, 140, 40, 0.35), 0 0 0 3px rgba(255, 255, 200, 0.5);
      cursor: pointer;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 15px;
      position: relative;
      z-index: 5;
      -webkit-tap-highlight-color: transparent;
      -webkit-focus-ring-color: transparent;
    }

    .music-btn:focus,
    .music-btn:active,
    .music-btn:focus-visible,
    .music-btn:focus:not(:focus-visible) {
      outline: none !important;
      box-shadow: 0 18px 40px rgba(180, 140, 40, 0.35), 0 0 0 3px rgba(255, 255, 200, 0.5);
    }

    .music-btn:hover {
      transform: scale(1.06);
      outline: none !important;
      box-shadow: 0 25px 50px rgba(180, 140, 40, 0.5), 0 0 0 6px rgba(255, 255, 200, 0.6);
      background: linear-gradient(135deg, #d4af37, #f0d68a);
    }

    .music-btn.playing {
      background: linear-gradient(135deg, #e07b7b, #c94c4c);
      outline: none !important;
      box-shadow: 0 18px 40px rgba(200, 80, 80, 0.35), 0 0 0 3px rgba(255, 200, 200, 0.5);
    }

    .music-btn.playing:hover {
      background: linear-gradient(135deg, #f08a8a, #d45c5c);
      outline: none !important;
      box-shadow: 0 25px 50px rgba(200, 80, 80, 0.5), 0 0 0 6px rgba(255, 200, 200, 0.6);
    }

    .music-btn.playing:focus,
    .music-btn.playing:active,
    .music-btn.playing:focus-visible {
      outline: none !important;
      box-shadow: 0 18px 40px rgba(200, 80, 80, 0.35), 0 0 0 3px rgba(255, 200, 200, 0.5);
    }

    /* Эффекты */
    .effect-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1500;
      overflow: hidden;
    }

    .butterfly, .bear, .confetti, .star, .sparkle, .flying-text, .gif-cat, .gif-dog {
      position: absolute;
      will-change: transform;
    }

    .butterfly {
      font-size: 40px;
      animation: flyAcross 8s linear infinite;
      opacity: 0.9;
      filter: drop-shadow(0 5px 8px rgba(0,0,0,0.2));
    }

    .bear {
      font-size: 70px;
      left: -100px;
      animation: bearVerticalDance 3s ease-in-out infinite;
      filter: drop-shadow(0 12px 15px rgba(0,0,0,0.25));
    }

    /* Контейнер для гифки кота — без рамок, вплотную к низу и справа */
    .gif-cat {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 280px;
      height: auto;
      z-index: 10;
      margin: 0;
      padding: 0;
      border: none;
      border-radius: 0;
      background: none;
      backdrop-filter: none;
      box-shadow: none;
      overflow: visible;
      animation: gifPulse 2s ease-in-out infinite;
      line-height: 0;
    }

    .gif-cat img {
      width: 100%;
      height: auto;
      display: block;
      margin: 0;
      padding: 0;
      border: none;
      border-radius: 0;
    }

    /* Контейнер для гифки собаки — без рамок, вплотную к низу и слева, поменьше котика */
    .gif-dog {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 210px;
      height: auto;
      z-index: 10;
      margin: 0;
      padding: 0;
      border: none;
      border-radius: 0;
      background: none;
      backdrop-filter: none;
      box-shadow: none;
      overflow: visible;
      animation: gifPulse 2.5s ease-in-out infinite;
      line-height: 0;
    }

    .gif-dog img {
      width: 100%;
      height: auto;
      display: block;
      margin: 0;
      padding: 0;
      border: none;
      border-radius: 0;
    }

    .confetti {
      width: 12px;
      height: 12px;
      background: #ffd700;
      border-radius: 2px;
      animation: confettiFall 4s linear infinite;
      opacity: 0.8;
      box-shadow: 0 0 8px rgba(255,215,0,0.7);
    }

    .star {
      font-size: 30px;
      animation: starPulse 2s ease-in-out infinite;
      filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.9));
    }

    .sparkle {
      width: 6px;
      height: 6px;
      background: white;
      border-radius: 50%;
      animation: sparkleFloat 3s linear infinite;
      box-shadow: 0 0 12px 3px rgba(255, 255, 200, 1);
    }

    .flying-text {
      font-family: 'Playfair Display', serif;
      font-size: 64px;
      font-weight: 700;
      color: #ffd966;
      text-shadow: 0 0 25px rgba(255, 200, 0, 0.9), 0 0 50px rgba(255, 180, 0, 0.6), 0 5px 0 #b8860b;
      animation: textFlyUpper 7s ease-in-out infinite;
      white-space: nowrap;
      letter-spacing: 4px;
      top: 10% !important;
    }

    @keyframes flyAcross {
      0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
      20% { opacity: 1; }
      80% { opacity: 1; }
      100% { transform: translate(calc(100vw + 100px), -120px) rotate(45deg); opacity: 0; }
    }

    @keyframes bearVerticalDance {
      0% { transform: translateX(0) rotate(-5deg); }
      25% { transform: translateX(40vw) rotate(8deg); }
      50% { transform: translateX(75vw) rotate(-4deg); }
      75% { transform: translateX(95vw) rotate(6deg); }
      100% { transform: translateX(110vw) rotate(0deg); }
    }

    @keyframes gifPulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }

    @keyframes confettiFall {
      0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
      100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
    }

    @keyframes starPulse {
      0% { transform: scale(0.8); opacity: 0.7; }
      50% { transform: scale(1.4); opacity: 1; }
      100% { transform: scale(0.8); opacity: 0.7; }
    }

    @keyframes sparkleFloat {
      0% { transform: translateY(0) scale(0); opacity: 0; }
      50% { opacity: 1; transform: scale(1); }
      100% { transform: translateY(-80px) scale(0); opacity: 0; }
    }

    @keyframes textFlyUpper {
      0% { transform: translate(-100%, 0) rotate(-6deg); opacity: 0; }
      15% { opacity: 1; }
      85% { opacity: 1; }
      100% { transform: translate(110vw, 15vh) rotate(6deg); opacity: 0; }
    }

    /* ========================================
       АДАПТИВНОСТЬ
       ======================================== */
    @media (max-width: 900px) {
      .menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 75px;
        left: 0;
        width: 100%;
        background: rgba(250, 247, 242, .95);
        backdrop-filter: blur(12px);
        padding: 30px;
        gap: 20px;
        text-align: center;
        border-bottom: 1px solid rgba(212, 175, 55, .2);
      }

      .menu.active {
        display: flex;
      }

      .burger {
        display: flex;
      }

      .hero-box {
        padding: 35px;
      }

      .section-title {
        font-size: 2.3rem;
      }

      section {
        padding: 110px 0;
      }

      .gallery-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
      }

      .gallery-card {
        height: 160px;
        font-size: 20px;
      }

      .gallery-card-gold {
        height: 160px;
        font-size: 20px;
      }

      .gallery-row-bottom {
        max-width: 380px;
      }

      .letter-card {
        font-size: 35px;
        padding: 30px;
      }

      #letterContent {
        padding: 35px;
        max-height: 80vh;
      }

      #letterText {
        font-size: 18px;
      }

      .music-btn {
        padding: 20px 45px;
        font-size: 24px;
      }

      .flying-text {
        font-size: 40px;
      }

      .bear {
        font-size: 55px;
      }

      .gif-cat {
        width: 200px;
      }

      .gif-dog {
        width: 150px;
      }
    }

    @media (max-width: 600px) {
      .floating-bubbles {
        display: none;
      }

      .floating-bubbles-mobile {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 1;
      }

      .bubble-mob {
        position: absolute;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        box-shadow:
          0 5px 15px rgba(0,0,0,.15),
          0 0 0 3px rgba(212,175,55,.25),
          0 0 0 6px rgba(212,175,55,.08);
        animation: floatBubble 9s ease-in-out infinite;
      }

      .bubble-mob-1  { width:90px; height:90px; top:12%; left:21%; background-image:url('images/family1.jpg'); }
      .bubble-mob-2  { width:80px; height:80px; top:12%; right:15%; background-image:url('images/family2.jpg'); }
      .bubble-mob-3  { width:75px; height:75px; top:25%; left:3%; background-image:url('images/family17.jpg'); }
      .bubble-mob-4  { width:65px; height:65px; bottom:17%; right:8%; background-image:url('images/me1.jpg'); }
      .bubble-mob-6  { width:90px; height:90px; top:72%; right:30%; background-image:url('images/family12.jpg'); }
      .bubble-mob-7  { width:95px; height:95px; bottom:3%; left:32%; background-image:url('images/family11.jpg'); }
      .bubble-mob-11 { width:85px; height:85px; top:20%; left:45%; background-image:url('images/me4.jpg'); }
      .bubble-mob-12 { width:60px; height:60px; bottom:7%; left:8%; background-image:url('images/ME5.jpg'); }
      .bubble-mob-13 { width:70px; height:70px; top:75%; left:17%; background-image:url('images/me7.jpg'); }
      .bubble-mob-14 { width:75px; height:75px; top:88%; right:17%; background-image:url('images/me10.jpg'); }
      .bubble-mob-16 { width:65px; height:65px; top:25%; right:5%; background-image:url('images/work1.jpg'); }

      .hero {
        padding-top: 100px;
        padding-bottom: 40px;
      }

      .hero-box {
        padding: 25px;
        border-radius: 25px;
        margin: 0 15px;
      }

      .hero h1 {
        font-size: 2rem;
      }

      .subtitle {
        font-size: 1rem;
      }

      .hero-btn {
        padding: 15px 30px;
        font-size: 16px;
      }

      .section-title {
        font-size: 1.8rem;
        margin-bottom: 40px;
      }

      section {
        padding: 90px 0;
      }

      .cards {
        grid-template-columns: 1fr;
      }

      .gallery-row {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
      }

      .gallery-card {
        height: 130px;
        font-size: 16px;
        padding: 12px;
      }

      .gallery-card-gold {
        height: 130px;
        font-size: 16px;
        padding: 12px;
      }

      .gallery-row-bottom {
        max-width: 300px;
      }

      .dream-country {
        font-size: 16px;
        padding: 10px 18px;
      }

      .letter-card {
        font-size: 28px;
        padding: 25px 15px;
        border-radius: 20px;
      }

      #letterModal {
        padding: 10px;
      }

      #letterContent {
        padding: 30px 20px 20px;
        border-radius: 30px;
        max-height: 90vh;
      }

      #closeBtn {
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
        font-size: 18px;
      }

      #letterText {
        font-size: 16px;
        line-height: 1.7;
        margin-top: 10px;
      }

      #scrollToTopBtn {
        width: 44px;
        height: 44px;
        bottom: 20px;
        right: 20px;
        font-size: 20px;
      }

      .music-btn {
        padding: 16px 30px;
        font-size: 20px;
        border-radius: 60px;
      }

      .flying-text {
        font-size: 32px;
        letter-spacing: 2px;
      }

      .bear {
        font-size: 45px;
      }

      .gif-cat {
        width: 150px;
      }

      .gif-dog {
        width: 110px;
      }
    }

    hr {
      border: none;
      height: 3px;
      margin: 5px 0 10px;
      background-image: linear-gradient(to right, #FFF, var(--emerald), #FFF);
    }

    rh {
      font-family: 'corki';
      font-size: 40px;
      letter-spacing: 4pt;
      color: var(--emerald);
    }

    rh-final {
      font-family: 'Playfair Display', serif;
      font-size: 64pt;
      letter-spacing: 3pt;
      color: var(--gold);
      text-shadow: 0 0 8px rgba(212, 175, 55, .4),
                   0 0 20px rgba(212, 175, 55, .15),
                   0 2px 0 rgba(255,255,255,.5);
      line-height: 1;
    }

    /* ========================================
       ЗАГОЛОВОК СТРАНИЦЫ
       ======================================== */
    .page-hero {
      min-height: 45vh;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      background: linear-gradient(135deg, #faf7f2, #f4e8d7, #faf7f2);
      position: relative;
      overflow: hidden;
      margin-top: 75px; /* отступ под фиксированное меню */
    }

    .page-hero::before {
      content: "❤️";
      position: absolute;
      font-size: 20rem;
      opacity: 0.06;
      top: -20%;
      right: -10%;
      transform: rotate(15deg);
      pointer-events: none;
    }

    .page-title {
      font-size: clamp(3rem, 8vw, 5rem);
      color: var(--emerald);
      margin-bottom: 15px;
      position: relative;
      z-index: 2;
    }

    .page-subtitle {
      font-size: 1.3rem;
      color: var(--dark);
      position: relative;
      z-index: 2;
      max-width: 600px;
      margin: 0 auto;
      font-weight: 300;
    }

    /* ========================================
       ГАЛЕРЕЯ
       ======================================== */
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 25px;
    }

    .gallery-item {
      position: relative;
      border-radius: 30px;
      overflow: hidden;
      aspect-ratio: 4 / 5;
      background: linear-gradient(135deg, #e8dccf, #faf7f2);
      box-shadow: 0 20px 45px rgba(0, 0, 0, .08);
      cursor: pointer;
      transition: .4s;
    }

    .gallery-item:hover {
      transform: translateY(-10px);
      box-shadow: 0 30px 60px rgba(0, 0, 0, .15);
    }

    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: .5s;
    }

    .gallery-item:hover img {
      transform: scale(1.08);
    }

    /* ОВЕРЛЕЙ ПРИ НАВЕДЕНИИ */
    .gallery-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(47, 111, 98, 0.7) 0%, rgba(47, 111, 98, 0) 60%);
      display: flex;
      align-items: flex-end;
      padding: 25px;
      opacity: 0;
      transition: .3s;
    }

    .gallery-item:hover .gallery-overlay {
      opacity: 1;
    }

    .gallery-caption {
      color: white;
      font-weight: 600;
      font-size: 1.1rem;
      background: rgba(0,0,0,0.25);
      backdrop-filter: blur(8px);
      padding: 10px 20px;
      border-radius: 40px;
      border: 1px solid rgba(255,255,255,0.3);
    }

    /* ========================================
       МОДАЛЬНОЕ ОКНО (ЛАЙТБОКС)
       ======================================== */
    .lightbox {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .92);
      z-index: 3000;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .lightbox.active {
      display: flex;
    }

    .lightbox-content {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      max-width: 95%;
    }

    .lightbox img {
      max-width: 85%;
      max-height: 80vh;
      border-radius: 20px;
      box-shadow: 0 30px 60px rgba(0,0,0,0.5);
      border: 2px solid rgba(212, 175, 55, 0.3);
      transition: opacity 0.3s;
    }

    /* КНОПКИ НАВИГАЦИИ */
    .nav-arrow {
      background: rgba(255,255,255,0.15);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.3);
      color: white;
      font-size: 40px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s;
      user-select: none;
      flex-shrink: 0;
      line-height: 1;
    }

    .nav-arrow:hover {
      background: rgba(212, 175, 55, 0.6);
      border-color: var(--gold);
      transform: scale(1.1);
    }

    .nav-arrow:active {
      transform: scale(0.95);
    }

    .lightbox-close {
      position: absolute;
      top: 25px;
      right: 35px;
      background: none;
      border: none;
      font-size: 45px;
      color: white;
      cursor: pointer;
      transition: .3s;
      z-index: 3001;
      line-height: 1;
    }

    .lightbox-close:hover {
      color: var(--gold);
      transform: rotate(90deg);
    }

    .lightbox-caption {
      color: rgba(255,255,255,0.9);
      margin-top: 25px;
      font-size: 1.2rem;
      font-weight: 500;
      background: rgba(255,255,255,0.1);
      padding: 10px 25px;
      border-radius: 30px;
      backdrop-filter: blur(10px);
    }

    /* ========================================
       КНОПКА НАЗАД
       ======================================== */
    .back-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--emerald);
      font-weight: 700;
      text-decoration: none;
      margin-bottom: 50px;
      font-size: 1.1rem;
      transition: .3s;
      border-bottom: 2px solid transparent;
    }

    .back-link:hover {
      border-bottom: 2px solid var(--gold);
      color: var(--gold);
    }

    /* ========================================
       КНОПКА «НАВЕРХ» (КАК НА ГЛАВНОЙ)
       ======================================== */
    #scrollToTopBtn {
      position: fixed;
      bottom: 30px;
      right: 30px;
      z-index: 999;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: var(--emerald);
      backdrop-filter: blur(8px);
      border: none;
      color: white;
      font-size: 22px;
      font-weight: 400;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transform: translateY(20px);
      transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease, background 0.3s ease;
      box-shadow: 0 8px 25px rgba(47, 111, 98, 0.25);
      outline: none;
    }

    #scrollToTopBtn.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    #scrollToTopBtn:hover {
      background: #1f5a4e;
      transform: translateY(-4px);
      box-shadow: 0 12px 30px rgba(47, 111, 98, 0.4);
    }

    /* ========================================
       ФУТЕР
       ======================================== */
    footer {
      background: #24554b;
      padding: 40px;
      text-align: center;
      color: white;
    }

    /* Стиль для кнопки "Сюрприз" в меню */
    .menu .surprise-link {
      color: var(--gold);
      font-weight: 700;
    }

    .menu .surprise-link:hover {
      color: var(--emerald);
    }

    /* ========================================
       АДАПТИВНОСТЬ (МОБИЛЬНЫЕ УСТРОЙСТВА)
       ======================================== */
    @media (max-width: 900px) {
      .menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 75px;
        left: 0;
        width: 100%;
        background: rgba(250, 247, 242, .95);
        backdrop-filter: blur(12px);
        padding: 30px;
        gap: 20px;
        text-align: center;
        border-bottom: 1px solid rgba(212, 175, 55, .2);
      }

      .menu.active {
        display: flex;
      }

      .burger {
        display: flex;
      }

      .page-hero {
        min-height: 35vh;
      }

      section {
        padding: 60px 0;
      }
    }

    @media (max-width: 600px) {
      .gallery-grid {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
      }

      .gallery-item {
        border-radius: 20px;
      }

      .gallery-overlay {
        padding: 15px;
      }

      .gallery-caption {
        font-size: 0.8rem;
        padding: 6px 14px;
      }

      .lightbox-close {
        top: 15px;
        right: 20px;
        font-size: 35px;
      }

      .nav-arrow {
        width: 45px;
        height: 45px;
        font-size: 28px;
      }

      .lightbox-content {
        gap: 10px;
      }

      .lightbox img {
        max-width: 75%;
      }

      #scrollToTopBtn {
        width: 44px;
        height: 44px;
        bottom: 20px;
        right: 20px;
        font-size: 20px;
      }

      .back-link {
        margin-bottom: 30px;
        font-size: 1rem;
      }

      .page-title {
        font-size: 2.5rem;
      }

      .page-subtitle {
        font-size: 1rem;
      }
    }