:root{ --fg:#0b1020; --bg:#070a16; --muted:#7f8aa0; --accent:#ff7ac3; --white:#f6f7fb; }
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
    margin:0; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--white); background: radial-gradient(1200px 600px at 70% 10%, #1a1f3b, var(--bg)) !important; /* Оригинальный тёмный фон с приоритетом */
}
/* Фоновый слой */
.bg{ position:fixed; inset:0; overflow:hidden; z-index:-1; }
.blob{ position:absolute; width:600px; height:600px; filter:blur(90px); opacity:.5; }
.blob1{ background:conic-gradient(from 120deg, #6aa9ff, #b794f6, #ff7ac3, #6aa9ff);
    left:-200px; top:-150px; animation:float1 18s ease-in-out infinite; }
.blob2{ background:linear-gradient(45deg, #00e5ff, #7cffcb);
    right:-180px; bottom:-200px; animation:float2 22s ease-in-out infinite; }
.stars{ position:absolute; inset:0; background-image:radial-gradient(#ffffff33 1px, transparent 1px);
    background-size:3px 3px; opacity:.12; }
@keyframes float1{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,30px)} }
@keyframes float2{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(-30px,-40px)} }

/* Контейнер и шапка */
.container{ width:min(1080px, 92%); margin-inline:auto; padding:24px; }
.hero{ text-align:center; padding:72px 0 36px; }
.hero h1 {
    font-size: clamp(28px, 6vw, 56px);
    line-height: 1.05;
    margin: 0 0 12px;
    text-align: center;
    white-space: pre-wrap;
}
.subtitle{ color:var(--muted); font-size:clamp(16px,2.6vw,20px); max-width:920px; margin:0 auto; }
.cta-row{ display:flex; gap:12px; justify-content:center; margin-top:24px; flex-wrap:wrap; }
.btn{ background:var(--accent); color:#1b0030; border:0; padding:12px 18px; border-radius:14px; font-weight:700; text-decoration:none; display:inline-block; }

/* Галерея */
.gallery{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px; margin:32px 0; }
.card{ grid-column:span 12; background:#ffffff06; border:1px solid #ffffff1a; border-radius:18px; overflow:hidden; }
.card img{ width:100%; height:100%; display:block; object-fit:cover; aspect-ratio:4/3; }
@media(min-width:520px){ .gallery .card{ grid-column:span 6; } }
@media(min-width:900px){
    .gallery .card{ grid-column:span 4; max-width:450px; margin:0 auto; } /* Увеличенные карточки в галерее */
}

/* Финальная фотография */
.final-photo{ margin:32px 0; text-align:center; }
.final-photo .card{ max-width:400px; margin:0 auto; } /* Меньший размер для четвёртой фотографии */

/* Блок заметки */
.note{ background:#ffffff08; border:1px solid #ffffff16; border-radius:18px; padding:22px; }
.note h2{ margin-top:0; font-size:22px; text-align: center; }
.note p {
    color: #e8eaf7;
    text-align: center;
    white-space: pre-wrap;
}
.heart{ color:var(--accent); font-weight:800; }

/* Canvas для конфетти */
#confetti{ position:fixed; top:0; left:0; width:100%; height:100%; z-index:10; pointer-events:none; }

.speech-bubble {
    position: absolute;
    background: #ffffff;
    border: 2px solid #ff7ac3;
    border-radius: 15px;
    padding: 10px 15px;
    max-width: 200px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #0b1020;
    z-index: 5;
}

/* карточка — родитель для абсолютного позиционирования */
.card { position: relative; }

/* пузырь — в правом нижнем углу, адаптивные отступы и размер */
.speech-bubble{
  position: absolute;
  right: clamp(8px, 3vw, 20px);
  bottom: clamp(8px, 3vw, 20px);
  background: #ffffff;
  border: 2px solid #ff7ac3;
  border-radius: 16px;
  padding: clamp(8px, 2.5vw, 12px) clamp(12px, 3vw, 18px);
  max-width: min(70%, 260px);
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: clamp(12px, 3.5vw, 16px);
  color: #0b1020;
  z-index: 2;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
  transform: rotate(-2deg);
}

/* хвостик — снизу справа, направлен к фото */
.speech-bubble::after{
  content:'';
  position:absolute;
  right: 16px;
  bottom: -10px;
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #ff7ac3 transparent transparent transparent;
}

/* мелкие экраны — чуть выше и компактнее */
@media (max-width: 480px){
  .speech-bubble{
    right: 10px;
    bottom: 10px;
    max-width: 75%;
  }
}