/* ========================= */
/* TERMS PAGE */
/* ========================= */

.terms-hero {

    position: relative;

    overflow: hidden;

    min-height: 72vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
    170px 24px 110px;

    text-align: center;
}

/* ========================= */
/* GLOW */
/* ========================= */

.terms-glow {

    position: absolute;

    width: 900px;

    height: 900px;

    background:
    radial-gradient(
        circle,
        rgba(201,168,87,0.12),
        transparent 70%
    );

    top: 50%;

    left: 50%;

    transform:
    translate(-50%, -50%);

    pointer-events: none;
}

/* ========================= */
/* HERO */
/* ========================= */

.terms-hero-content {

    position: relative;

    z-index: 2;

    max-width: 920px;

    animation:
    heroReveal 1s ease;
}

.terms-mini {

    font-size: 0.74rem;

    letter-spacing: 4px;

    text-transform: uppercase;

    color:
    #C9A857;

    margin-bottom: 20px;

    font-weight: 700;
}

.terms-hero h1 {

    font-size: 4rem;

    line-height: 1.05;

    letter-spacing: -2px;

    margin-bottom: 28px;

    color:
    #111;
}

.terms-sub {

    max-width: 760px;

    margin: 0 auto;

    font-size: 1.05rem;

    line-height: 2;

    color:
    #666;
}

/* ========================= */
/* INTRO */
/* ========================= */

.terms-intro {

    padding:
    0 24px 110px;
}

.terms-intro-card {

    position: relative;

    overflow: hidden;

    max-width: 1150px;

    margin: 0 auto;

    padding: 70px 60px;

    border-radius: 36px;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,0.92),
        rgba(255,255,255,0.76)
    );

    backdrop-filter:
    blur(18px);

    border:
    1px solid rgba(255,255,255,0.45);

    box-shadow:
    0 30px 70px rgba(0,0,0,0.06);

    transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;

    opacity: 0;

    animation:
    fadeScale 0.9s ease forwards;

    animation-delay: 0.2s;
}

/* REFLECTION */

.terms-intro-card::before {

    content: "";

    position: absolute;

    top: -150%;

    left: -40%;

    width: 50%;

    height: 400%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.6),
        rgba(201,168,87,0.14),
        transparent
    );

    transform:
    rotate(25deg);

    transition:
    0.9s ease;
}

.terms-intro-card:hover::before {

    left: 120%;
}

/* HOVER */

.terms-intro-card:hover {

    transform:
    translateY(-6px);

    box-shadow:
    0 40px 90px rgba(0,0,0,0.08);
}

.terms-intro-card h2 {

    font-size: 3rem;

    line-height: 1.1;

    margin-bottom: 34px;

    letter-spacing: -1px;

    color:
    #111;
}

.terms-intro-card p {

    max-width: 920px;

    font-size: 1.02rem;

    line-height: 2.1;

    color:
    #666;

    margin-bottom: 24px;
}

/* ========================= */
/* SECTION */
/* ========================= */

.terms-section {

    padding:
    0 24px 120px;
}

/* ========================= */
/* GRID */
/* ========================= */

.terms-container {

    max-width: 1300px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
    repeat(auto-fit, minmax(320px, 1fr));

    gap: 28px;
}

/* ========================= */
/* CARD */
/* ========================= */

.terms-card {

    position: relative;

    overflow: hidden;

    padding: 42px 36px;

    border-radius: 30px;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,0.92),
        rgba(255,255,255,0.76)
    );

    border:
    1px solid rgba(255,255,255,0.45);

    backdrop-filter:
    blur(18px);

    transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;

    box-shadow:
    0 20px 50px rgba(0,0,0,0.05);

    opacity: 0;

    animation:
    fadeScale 0.9s ease forwards;
}

/* DELAYS */

.terms-card:nth-child(1) { animation-delay: 0.3s; }
.terms-card:nth-child(2) { animation-delay: 0.4s; }
.terms-card:nth-child(3) { animation-delay: 0.5s; }
.terms-card:nth-child(4) { animation-delay: 0.6s; }
.terms-card:nth-child(5) { animation-delay: 0.7s; }
.terms-card:nth-child(6) { animation-delay: 0.8s; }
.terms-card:nth-child(7) { animation-delay: 0.9s; }
.terms-card:nth-child(8) { animation-delay: 1s; }
.terms-card:nth-child(9) { animation-delay: 1.1s; }

/* REFLECTION */

.terms-card::before {

    content: "";

    position: absolute;

    top: -150%;

    left: -40%;

    width: 50%;

    height: 400%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.55),
        rgba(201,168,87,0.14),
        transparent
    );

    transform:
    rotate(25deg);

    transition:
    0.9s ease;
}

.terms-card:hover::before {

    left: 120%;
}

/* HOVER */

.terms-card:hover {

    transform:
    translateY(-8px);

    box-shadow:
    0 35px 70px rgba(0,0,0,0.08);
}

/* ========================= */
/* ICON */
/* ========================= */

.terms-icon {

    width: 72px;

    height: 72px;

    border-radius: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 28px;

    background:
    rgba(201,168,87,0.08);

    border:
    1px solid rgba(201,168,87,0.14);
}

.terms-icon i {

    font-size: 1.5rem;

    color:
    #C9A857;
}

/* ========================= */
/* TEXT */
/* ========================= */

.terms-card h2 {

    font-size: 1.7rem;

    margin-bottom: 18px;

    color:
    #111;
}

.terms-card p {

    color:
    #666;

    line-height: 2;

    margin-bottom: 18px;

    font-size: 0.98rem;
}

/* ========================= */
/* BOTTOM */
/* ========================= */

.terms-bottom {

    padding:
    0 24px 120px;
}

.terms-bottom-card {

    position: relative;

    overflow: hidden;

    max-width: 1100px;

    margin: 0 auto;

    text-align: center;

    padding: 70px 50px;

    border-radius: 34px;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,0.92),
        rgba(255,255,255,0.75)
    );

    border:
    1px solid rgba(255,255,255,0.45);

    backdrop-filter:
    blur(18px);

    box-shadow:
    0 30px 70px rgba(0,0,0,0.06);

    opacity: 0;

    animation:
    fadeUp 0.9s ease forwards;

    animation-delay: 1.2s;
}

/* REFLECTION */

.terms-bottom-card::before {

    content: "";

    position: absolute;

    top: -150%;

    left: -40%;

    width: 50%;

    height: 400%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.55),
        rgba(201,168,87,0.14),
        transparent
    );

    transform:
    rotate(25deg);

    transition:
    0.9s ease;
}

.terms-bottom-card:hover::before {

    left: 120%;
}

.terms-bottom-card h2 {

    font-size: 2.8rem;

    line-height: 1.15;

    margin-bottom: 24px;

    color:
    #111;
}

.terms-bottom-card p {

    max-width: 700px;

    margin:
    0 auto 34px;

    color:
    #666;

    line-height: 2;

    font-size: 1rem;
}

/* ========================= */
/* BUTTON */
/* ========================= */

.terms-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 16px 26px;

    border-radius: 16px;

    background:
    #111;

    color:
    #fff;

    text-decoration: none;

    font-size: 0.92rem;

    font-weight: 600;

    transition:
    transform 0.25s ease,
    background 0.25s ease;

    box-shadow:
    0 16px 35px rgba(0,0,0,0.12);
}

.terms-btn:hover {

    transform:
    translateY(-3px);

    background:
    #000;
}

/* ========================= */
/* ANIMATIONS */
/* ========================= */

@keyframes heroReveal {

    from {

        opacity: 0;

        transform:
        translateY(25px);

        filter:
        blur(10px);
    }

    to {

        opacity: 1;

        transform:
        translateY(0);

        filter:
        blur(0);
    }
}

@keyframes fadeScale {

    from {

        opacity: 0;

        transform:
        translateY(25px)
        scale(0.96);

        filter:
        blur(10px);
    }

    to {

        opacity: 1;

        transform:
        translateY(0)
        scale(1);

        filter:
        blur(0);
    }
}

@keyframes fadeUp {

    from {

        opacity: 0;

        transform:
        translateY(20px);
    }

    to {

        opacity: 1;

        transform:
        translateY(0);
    }
}

/* ========================= */
/* MOBILE */
/* ========================= */

@media (max-width: 768px) {

    .terms-hero {

        padding:
        150px 24px 90px;
    }

    .terms-hero h1 {

        font-size: 2.7rem;
    }

    .terms-sub {

        font-size: 0.96rem;
    }

    .terms-intro-card {

        padding: 45px 28px;
    }

    .terms-intro-card h2 {

        font-size: 2.2rem;
    }

    .terms-intro-card p {

        font-size: 0.95rem;

        line-height: 1.95;
    }

    .terms-card {

        padding: 34px 28px;
    }

    .terms-bottom-card {

        padding: 55px 28px;
    }

    .terms-bottom-card h2 {

        font-size: 2.1rem;
    }
}