:root {
--bg: #09070a;
--bg-soft: #110b10;
--card: rgba(255, 255, 255, 0.045);

--rose: #d8899b;
--rose-light: #f2b8c5;
--rose-dark: #8e4055;

--text: #f7edf0;
--muted: #aa9da2;

--border: rgba(255, 255, 255, 0.09);
}

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

html {
scroll-behavior: smooth;
}

body {
background: var(--bg);
color: var(--text);

font-family: "Manrope", sans-serif;

overflow-x: hidden;
}

.background {
position: fixed;
inset: 0;

pointer-events: none;
overflow: hidden;

z-index: -1;

background:
radial-gradient(
circle at 50% 0%,
rgba(160, 64, 91, 0.14),
transparent 35%
),
linear-gradient(
180deg,
#0b070a 0%,
#09070a 100%
);
}

.glow {
position: absolute;

width: 500px;
height: 500px;

border-radius: 50%;

filter: blur(120px);

opacity: 0.13;
}

.glow-1 {
top: 10%;
left: -250px;
background: #b94f6c;
}

.glow-2 {
right: -250px;
top: 45%;
background: #762d49;
}

.hero {
min-height: 100vh;

display: flex;
flex-direction: column;

align-items: center;
justify-content: center;

text-align: center;

padding: 40px 25px;

position: relative;
}

.small-title,
.section-label {
font-size: 10px;

letter-spacing: 4px;

color: var(--rose);

font-weight: 600;
}

.small-title {
display: flex;

align-items: center;
gap: 14px;

animation: fadeUp 1s ease forwards;
}

.small-title span {
width: 35px;
height: 1px;

background: var(--rose-dark);
}

.hero h1 {
font-family: "Cormorant Garamond", serif;

font-size: clamp(80px, 17vw, 170px);

line-height: 0.9;

font-weight: 500;

margin: 35px 0 30px;

letter-spacing: -5px;

background: linear-gradient(
120deg,
#ffffff,
#e5a6b5,
#ffffff
);

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

animation: titleReveal 1.5s ease forwards;
}

.hero h1 span {
color: var(--rose);
}

.hero-text {
max-width: 550px;

color: var(--muted);

font-size: 15px;

line-height: 2;

font-weight: 300;

animation: fadeUp 1.4s ease forwards;
}

.scroll-button {
margin-top: 55px;

background: transparent;

border: 1px solid var(--border);

color: var(--text);

padding: 14px 24px;

border-radius: 100px;

cursor: pointer;

display: flex;
align-items: center;

gap: 12px;

font-family: inherit;

transition: 0.3s;
}

.scroll-button:hover {
border-color: var(--rose);

transform: translateY(-3px);

background: rgba(216, 137, 155, 0.08);
}

.scroll-button span {
color: var(--rose);

animation: bounce 1.5s infinite;
}

section {
width: 100%;

max-width: 1100px;

margin: auto;

padding: 120px 25px;
}

.letter-section {
max-width: 850px;
}

.section-label {
margin-bottom: 35px;
}

.letter-card {
position: relative;

padding: clamp(35px, 7vw, 75px);

border: 1px solid var(--border);

background:
linear-gradient(
135deg,
rgba(255,255,255,0.055),
rgba(255,255,255,0.018)
);

backdrop-filter: blur(15px);

border-radius: 8px;

box-shadow:
0 40px 100px rgba(0,0,0,0.35);

overflow: hidden;
}

.letter-card::before {
content: "";

position: absolute;

top: 0;
left: 0;

width: 2px;
height: 100%;

background: linear-gradient(
transparent,
var(--rose),
transparent
);
}

.letter-top {
display: flex;

justify-content: space-between;

color: var(--rose);

font-size: 10px;

letter-spacing: 4px;

margin-bottom: 55px;
}

.letter-card h2 {
font-family: "Cormorant Garamond", serif;

font-size: clamp(42px, 7vw, 70px);

font-weight: 500;

line-height: 0.95;

margin-bottom: 35px;
}

.divider {
height: 1px;

width: 70px;

background: var(--rose);

margin-bottom: 35px;
}

.letter-card p {
color: #c8bdc1;

font-size: 15px;

line-height: 2;

font-weight: 300;

margin-bottom: 24px;
}

.signature {
margin-top: 55px;

display: flex;

flex-direction: column;

gap: 4px;

color: var(--muted);

font-family: "Cormorant Garamond", serif;

font-size: 22px;
}

.signature strong {
color: var(--rose-light);

font-size: 30px;

font-weight: 500;
}

.reasons {
max-width: 1100px;
}

.reasons > h2 {
font-family: "Cormorant Garamond", serif;

font-size: clamp(45px, 7vw, 75px);

font-weight: 500;

line-height: 0.95;

margin-bottom: 60px;
}

.reason-grid {
display: grid;

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

gap: 15px;
}

.reason-card {
border: 1px solid var(--border);

background: var(--card);

padding: 35px;

min-height: 260px;

transition: 0.4s;

position: relative;
}

.reason-card:hover {
transform: translateY(-8px);

border-color: rgba(216,137,155,0.35);
}

.number {
color: var(--rose);

font-size: 11px;

letter-spacing: 2px;

margin-bottom: 65px;
}

.reason-card h3 {
font-family: "Cormorant Garamond", serif;

font-size: 34px;

font-weight: 500;

margin-bottom: 12px;
}

.reason-card p {
color: var(--muted);

line-height: 1.7;

font-size: 13px;
}

.surprise-section {
text-align: center;
}

.gift-container {
display: flex;

flex-direction: column;

align-items: center;

min-height: 400px;
}

.gift {
width: 130px;
height: 120px;

position: relative;

cursor: pointer;

margin-top: 30px;

transition: 0.4s;
}

.gift:hover {
transform: translateY(-8px);
}

.gift-box {
position: absolute;

width: 130px;
height: 90px;

bottom: 0;

background:
linear-gradient(
90deg,
#6d293e,
#a64e67
);

border-radius: 4px;
}

.gift-lid {
position: absolute;

width: 145px;
height: 25px;

left: -7px;
top: 15px;

background: #b96279;

border-radius: 4px;

z-index: 2;

transition: 0.7s;
}

.ribbon {
position: absolute;

width: 18px;
height: 100%;

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

left: 50%;

transform: translateX(-50%);
}

.gift.open .gift-lid {
transform: translateY(-65px) rotate(-5deg);
}

#giftHint {
color: var(--muted);

font-size: 13px;

line-height: 1.7;

margin-top: 35px;

transition: 0.4s;
}

.gift-message {
opacity: 0;

transform: translateY(20px);

pointer-events: none;

max-width: 500px;

transition: 0.7s;

margin-top: 30px;
}

.gift-message.show {
opacity: 1;

transform: translateY(0);

pointer-events: auto;
}

.heart-big {
font-size: 70px;

color: var(--rose);

animation: heartPulse 1.5s infinite;
}

.gift-message h3 {
font-family: "Cormorant Garamond", serif;

font-size: 35px;

margin: 10px 0;
}

.gift-message p {
color: var(--muted);

line-height: 1.8;

font-size: 14px;
}

.final-section {
text-align: center;

padding-bottom: 170px;
}

.final-heart {
width: 75px;
height: 75px;

margin: auto auto 35px;

display: flex;

align-items: center;
justify-content: center;

border: 1px solid rgba(216,137,155,0.3);

border-radius: 50%;

color: var(--rose);

font-size: 38px;
}

.final-section h2 {
font-family: "Cormorant Garamond", serif;

font-size: clamp(55px, 8vw, 90px);

font-weight: 500;

line-height: 0.9;

margin-bottom: 30px;
}

.final-section > p {
max-width: 500px;

margin: auto;

color: var(--muted);

line-height: 1.9;

font-size: 14px;
}

.forgive-button {
margin-top: 40px;

padding: 17px 30px;

border-radius: 100px;

border: 1px solid var(--rose);

background: rgba(216,137,155,0.08);

color: var(--rose-light);

font-family: inherit;

cursor: pointer;

transition: 0.4s;
}

.forgive-button:hover {
background: var(--rose);

color: #180b10;

transform: translateY(-4px);

box-shadow: 0 15px 40px rgba(216,137,155,0.2);
}

.final-message {
display: none;

margin-top: 30px;

color: var(--rose-light);

font-family: "Cormorant Garamond", serif;

font-size: 26px;

animation: fadeUp 0.7s ease;
}

.final-message span {
margin: 0 12px;
}

footer {
padding: 30px;

border-top: 1px solid var(--border);

text-align: center;

color: #665c60;

font-size: 10px;

letter-spacing: 2px;
}

.heart-particle {
position: fixed;

pointer-events: none;

font-size: 20px;

color: var(--rose);

animation: floatHeart 2s ease-out forwards;

z-index: 100;
}

@keyframes titleReveal {
from {
opacity: 0;
transform: translateY(30px);
filter: blur(8px);
}

to {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}

@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(20px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes bounce {
0%, 100% {
transform: translateY(0);
}

50% {
transform: translateY(5px);
}
}

@keyframes heartPulse {
0%, 100% {
transform: scale(1);
}

50% {
transform: scale(1.12);
}
}

@keyframes floatHeart {
0% {
opacity: 1;
transform: translateY(0) scale(1);
}

100% {
opacity: 0;
transform: translateY(-180px) translateX(var(--x)) scale(0.5);
}
}

@media (max-width: 700px) {

section {
padding: 90px 20px;
}

.hero {
padding: 30px 20px;
}

.hero h1 {
font-size: 85px;

letter-spacing: -3px;
}

.hero-text {
font-size: 13px;
}

.letter-card {
padding: 30px 25px;
}

.letter-card h2 {
font-size: 48px;
}

.letter-card p {
font-size: 14px;
}

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

.reason-card {
min-height: auto;

padding: 30px;
}

.number {
margin-bottom: 40px;
}

.final-section h2 {
font-size: 60px;
}
}