:root {
    --primary: #95B4EF;
    --secondary-blue: #C4CEFF;
    --secondary-purple: #E6DDFA;
    --main-background: #F9F1F6;
    --background-light: #fff;
    --text-main: #2D3748;
    --text-secondary: #6B7280;
    --highlight: #F5CCF1;
    --white: #fff;
}

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

html, body {
    height: 100%;
    overflow: hidden;
    background: var(--main-background);
    font-family: 'Nunito', sans-serif;
}

.bg { position: fixed; inset: 0; overflow: hidden; z-index: 0; }

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
}
.blob-1 {
    width: 520px; height: 520px;
    background: var(--secondary-purple);
    opacity: 0.5;
    top: -160px; left: -120px;
    animation: blobFloat 10s ease-in-out 0.2s infinite;
}
.blob-2 {
    width: 380px; height: 380px;
    background: var(--secondary-blue);
    opacity: 0.45;
    bottom: -100px; right: -80px;
    animation: blobFloat 12s ease-in-out 0.8s infinite;
}
.blob-3 {
    width: 260px; height: 260px;
    background: var(--highlight);
    opacity: 0.55;
    top: 55%; left: 55%;
    animation: blobFloat 9s ease-in-out 1.2s infinite;
}

@keyframes blobFloat {
    0%,100% { transform: scale(1) translate(0,0); }
    50%      { transform: scale(1.08) translate(18px,-18px); }
}

.container {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.card {
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.85);
    border-radius: 32px;
    padding: 3.5rem 4rem;
    max-width: 600px;
    width: 100%;
    box-shadow:
            0 4px 32px rgba(149,180,239,0.18),
            0 1px 0 rgba(255,255,255,0.95) inset;
    opacity: 0;
    transform: translateY(30px);
    animation: cardIn 0.9s cubic-bezier(0.16,1,0.3,1) 0.3s forwards;
}

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

.illustration {
    margin-bottom: 1.8rem;
    opacity: 0;
    animation: fadeUp 0.7s ease-out 0.8s forwards;
}

.illus-svg { width: 160px; height: 120px; overflow: visible; }

.truck-body { animation: truckIn 0.7s cubic-bezier(0.34,1.4,0.64,1) 1s both; }
@keyframes truckIn {
    from { transform: translateX(-50px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}

.wheel-el {
    transform-box: fill-box;
    transform-origin: center;
    animation: spin 1.4s linear 1.7s infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.box-stack { animation: boxIn 0.5s cubic-bezier(0.34,1.56,0.64,1) 1.3s both; }
@keyframes boxIn {
    from { transform: translateY(-18px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

.pin-el {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: pinBounce 0.6s cubic-bezier(0.34,1.56,0.64,1) 1.5s both,
    pinFloat 2.5s ease-in-out 2.1s infinite;
}
@keyframes pinBounce {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
@keyframes pinFloat {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-4px); }
}

.star { animation: twinkle 2.2s ease-in-out infinite; }
.s1 { animation-delay: 1.9s; }
.s2 { animation-delay: 2.4s; }
.s3 { animation-delay: 2.9s; }
@keyframes twinkle {
    0%,100% { opacity: 0.25; r: 2px; }
    50%     { opacity: 1;    r: 3.5px; }
}

.tagline {
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 0.7rem;
    opacity: 0;
    animation: fadeUp 0.6s ease-out 1s forwards;
}

.headline {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(3rem, 10vw, 5.2rem);
    font-weight: 700;
    line-height: 0.92;
    color: var(--text-main);
    margin-bottom: 1.2rem;
    overflow: hidden;
}

.headline .line {
    display: block;
    opacity: 0;
    transform: translateY(55px);
    animation: slideUp 0.65s cubic-bezier(0.16,1,0.3,1) forwards;
}
.l1 { animation-delay: 1.1s; }
.l2 { animation-delay: 1.3s; color: var(--primary); font-style: italic; }

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

.sep {
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--secondary-blue), var(--highlight));
    border-radius: 99px;
    margin: 1.3rem auto;
    animation: sepGrow 0.7s ease-out 1.6s forwards;
}
@keyframes sepGrow { to { width: 72px; } }

.desc {
    font-size: 0.93rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeUp 0.7s ease-out 1.7s forwards;
}

.cta-wrap {
    opacity: 0;
    transform: translateY(14px);
    animation: fadeUp 0.7s ease-out 1.9s forwards;
}

.cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary-blue) 100%);
    color: var(--white);
    font-family: 'Nunito', sans-serif;
    font-size: 0.88rem;
    padding: 0.85rem 2.1rem;
    border-radius: 100px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    box-shadow: 0 6px 22px rgba(149,180,239,0.4);
}

.cta:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 36px rgba(149,180,239,0.45);
    filter: brightness(1.07);
}
.cta:active { transform: translateY(0) scale(0.97); }

.cta .arr {
    transition: transform 0.3s ease;
    display: inline-block;
}
.cta:hover .arr { transform: translateX(4px); }

.particles { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.p {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: rise linear infinite;
}
@keyframes rise {
    0%   { opacity: 0;   transform: translateY(0) scale(0); }
    10%  { opacity: 0.6; transform: scale(1); }
    90%  { opacity: 0.15; }
    100% { opacity: 0;   transform: translateY(-100vh) scale(0.5); }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
    .card { padding: 2.5rem 1.8rem; border-radius: 22px; }
}