/* ================= GLOBAL ================= */

body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    background:  #fce4ec;
}

html {
    scroll-behavior: smooth;
}

/* ================= NAVBAR ================= */

.navbar-brand {
    font-size: 22px;
}

/* ================= SECTION SPACING ================= */
#about {
    background: linear-gradient(135deg, #ffe6ef, #ffd6e8);
}

#about h2 {
    margin-bottom: 30px;

}

section h1 {
    font-size: 40px;
}

section p {
    font-size: 18px;
    color: #555;
}

/* ================= TEMPLATE CARDS ================= */

.template-card {
    border-radius: 25px;
    padding: 18px;
    background: #f1f1f1;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: 0.3s ease;
    height: 100%;
    max-width: 320px;
    margin: auto;
}

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

.price-tag {
    font-size: 20px;
    font-weight: 600;
    color: #e63946;
}

/* ================= PREVIEW WRAPPER ================= */

.preview-wrapper {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
}

.preview-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
}

.preview-wrapper:hover .preview-media {
    transform: scale(1.05);
    transition: transform 0.4s ease;
}

.preview-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.preview-wrapper:hover .preview-overlay {
    opacity: 1;
}

.template-preview {
    width: 390px;
    height: 700px;
    transform: scale(0.55);
    transform-origin: top left;
    border: none;
    pointer-events: none;
}

/* ================= BUTTONS ================= */

.preview-btn {
    display: block;
    padding: 14px;
    border-radius: 60px;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.9);
    color: #444;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.preview-btn:hover {
    transform: translateY(-5px);
    background: white;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.buy-btn {
    display: block;
    padding: 16px;
    border-radius: 60px;
    background: linear-gradient(45deg, #ff4b5c, #ff6b81);
    color: white;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(255,75,92,0.35);
    transition: all 0.3s ease;
    animation: pulseGlow 2s infinite;
}

.buy-btn:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(255,75,92,0.45);
}

@keyframes pulseGlow {
    0% { box-shadow: 0 10px 25px rgba(255,75,92,0.35); }
    50% { box-shadow: 0 15px 35px rgba(255,75,92,0.6); }
    100% { box-shadow: 0 10px 25px rgba(255,75,92,0.35); }
}

/* ================= STATS SECTION ================= */

.stats-section {
    background: linear-gradient(135deg, #f8bbd0, #f48fb1);
    color: white;
    border-top: 1px solid rgba(0,0,0,0.05);
    padding: 50px 0 40px 0;
}

.stats-number {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #ff4b5c;
}

.stats-text {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

.stats-section .col-md-3:hover {
    transform: translateY(-5px);
    transition: 0.3s ease;
}

/* ================= FOOTER ================= */

footer {
    font-size: 14px;
    color: #777;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 992px) {
    section h1 {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .preview-wrapper {
        height: 200px;
    }

    .template-preview {
        transform: scale(0.45);
    }

    .template-card {
        padding: 15px;
    }

    .stats-number {
        font-size: 32px;
    }
}



/* ================= HOW IT WORKS ================= */

.how-it-works {
    background: linear-gradient(135deg, #ffe0eb, #f8bbd0);
    padding: 30px 0;
}

.hiw-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 10px;
}

.hiw-subtitle {
    color: #555;
    font-size: 18px;
}

.hiw-card {
    background: white;
    padding: 20px 25px;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: 0.3s ease;
}

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

.step-number {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff4b5c;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.hiw-icon {
    font-size: 40px;
    margin-bottom: 15px;
}

.hiw-card h5 {
    font-weight: 600;
    margin-bottom: 10px;
}

.hiw-card p {
    color: #666;
    font-size: 15px;
}

/* Responsive */
@media (max-width: 768px) {
    .hiw-title {
        font-size: 28px;
    }
}

.old-price{
    text-decoration:line-through;
    color:#888;
    margin-right:6px;
}

.preview-wrapper{
    position:relative;
    overflow:hidden;
}

/* Premium ribbon */

.sale-ribbon{
    position:absolute;
    top:16px;
    left:-45px;
    width:170px;

    background:linear-gradient(135deg,#FFD84D,#FFC107);
    color:#111;

    font-weight:800;
    font-size:14px;
    text-align:center;

    padding:8px 0;

    transform:rotate(-45deg);

    box-shadow:0 6px 20px rgba(0,0,0,0.25);

    letter-spacing:1px;
}

.trust-line{
font-size:13px;
text-align:center;
color:#666;
margin-top:6px;
}

.send-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
}

.send-modal-box{
background:white;
padding:30px;
border-radius:20px;
max-width:400px;
text-align:center;
box-shadow:0 20px 60px rgba(0,0,0,0.3);
}

.trust-list{
list-style:none;
padding:0;
margin:15px 0;
color:#555;
}

.trust-list li{
margin:6px 0;
}

.modal-buttons{
margin-top:20px;
display:flex;
gap:10px;
justify-content:center;
}

.send-btn{
background:#ff4b5c;
color:white;
border:none;
padding:12px 20px;
border-radius:30px;
font-weight:600;
cursor:pointer;
}

.cancel-btn{
background:#eee;
border:none;
padding:12px 20px;
border-radius:30px;
cursor:pointer;
}

.template-social-proof{
font-size:13px;
color:#666;
margin-top:4px;
}

.template-value{
font-size:13px;
color:#e63946;
font-weight:500;
margin-top:2px;
}

.preview-link{
text-decoration:none;
display:block;
}

/* TRENDING CARD GLOW */

.trending-card{
position:relative;
overflow:hidden;
}

/* glowing background pulse */

.trending-card::before{
content:"";
position:absolute;
inset:-3px;
border-radius:25px;

background:linear-gradient(
120deg,
#ff6b81,
#ff4b5c,
#ff85a2,
#ff4b5c
);

z-index:-1;
filter:blur(14px);
opacity:0.6;

animation:heartbeatGlow 2.5s infinite;
}

/* subtle sparkle */

.trending-card::after{
content:"💖";
position:absolute;
top:-10px;
right:-5px;
font-size:18px;
animation:heartPop 1.8s infinite;
}

/* heartbeat glow animation */

@keyframes heartbeatGlow{
0%{
transform:scale(0.98);
opacity:0.4;
}
50%{
transform:scale(1.05);
opacity:0.8;
}
100%{
transform:scale(0.98);
opacity:0.4;
}
}

/* heart sparkle */

@keyframes heartPop{
0%{
transform:scale(0.8);
opacity:0.5;
}
50%{
transform:scale(1.3);
opacity:1;
}
100%{
transform:scale(0.8);
opacity:0.5;
}
}

/* trending badge */

.trending-badge{
position:absolute;
top:12px;
left:12px;
background:linear-gradient(45deg,#ff4b5c,#ff6b81);
color:white;
font-size:12px;
font-weight:600;
padding:6px 12px;
border-radius:20px;
box-shadow:0 6px 18px rgba(0,0,0,0.2);
z-index:2;
}

/* trending glow */
.trending-card{
position:relative;
border-radius:22px;
background:white;
z-index:1;
}

/* fire border glow */

.trending-card::before{
content:"";
position:absolute;
inset:-4px;
border-radius:26px;

background:linear-gradient(
120deg,
rgba(252, 169, 143, 0.7),
rgba(255,120,0,0.7),
rgba(255,30,0,0.7)
);

filter:blur(14px);
z-index:-1;

animation:fireBorder 2.5s infinite ease-in-out;
}

@keyframes fireBorder{

0%{
opacity:0.5;
transform:scale(0.98);
}

50%{
opacity:0.9;
transform:scale(1.02);
}

100%{
opacity:0.5;
transform:scale(0.98);
}

}