/* ======================
   RESET
====================== */

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

/* ======================
   ROOT
====================== */

:root {

    --color-light:
        #f4f1eb;

    --color-cream:
        #ebe6df;

    --color-soft:
        #d9d8e2;

    --color-mid:
        #8d98b3;

    --color-dark:
        #3b4966;

    --color-night:
        #1f2937;

    --color-text:
        #2f3440;

    --color-white:
        #ffffff;

    --transition:
        0.4s ease;

    /* SPACING SYSTEM */

    --space-xs: 12px;
    --space-sm: 20px;
    --space-md: 32px;
    --space-lg: 48px;
    --space-xl: 72px;
    --space-2xl: 120px;

    --space-section: clamp(120px, 16vw, 220px);

}

/* ======================
   BASE
====================== */

body {

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

    background:
        var(--color-light);

    color:
        var(--color-text);

    line-height:
        1.7;

    letter-spacing:
        -0.02em;

    overflow-x:
        hidden;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;

}

/* ======================
   LAYOUT
====================== */

.container {

    width:
        min(100% - 48px, 1180px);

    margin-inline:
        auto;

}

section {

    padding: var(--space-section) 0;

}

/* ======================
   TYPOGRAPHY
====================== */

.kicker {

    font-size:
        0.8rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.18em;

    margin-bottom:
        20px;

    opacity:
        0.7;

}

h1 {

    font-size:
        clamp(3.4rem, 11vw, 7rem);

    line-height:
        0.92;

    font-weight:
        500;

    letter-spacing:
        -0.05em;

    margin-bottom: var(--space-md);

    max-width:
        10ch;

}

h2 {

    font-size:
        clamp(2.4rem, 7vw, 5rem);

    line-height:
        0.98;

    font-weight:
        500;

    letter-spacing:
        -0.04em;

    margin-bottom: var(--space-md);

    max-width:
        12ch;

}

p {

    font-size:
        clamp(1rem, 1.4vw, 1.08rem);

    font-weight:
        400;

    opacity:
        0.82;

}

/* ======================
   BUTTON
====================== */

.btn {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        18px 30px;

    border-radius:
        999px;

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

    color:
        var(--color-white);

    text-decoration:
        none;

    margin-top: var(--space-md);

    backdrop-filter:
        blur(14px);

    border:
        1px solid rgba(255, 255, 255, 0.1);

    transition:
        transform 0.4s ease,
        background 0.4s ease,
        border-color 0.4s ease;

    overflow:
        hidden;

}

.btn::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.08),
            transparent);

    transform:
        translateX(-120%);

    transition:
        transform 0.8s ease;

}

.btn:hover {

    transform:
        translateY(-3px);

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

    border-color:
        rgba(255, 255, 255, 0.18);

}

#backToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;

    width: 42px;
    height: 42px;

    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);

    background: rgba(255, 255, 255, .05);

    color: white;

    backdrop-filter: blur(8px);

    opacity: 0;
    visibility: hidden;

    transition: all .3s ease;

    z-index: 10000;
}

#backToTop.show {
    opacity: 1;
    visibility: visible;
}

/* ======================
   HEADER
====================== */

.header {

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    z-index:
        999;

    padding:
        20px 0;

}

.header-content {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}

.logo {

    font-size:
        0.9rem;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

    color:
        white;

    opacity:
        0.85;

}

.header-btn {

    padding:
        12px 20px;

    border-radius:
        999px;

    text-decoration:
        none;

    color:
        white;

    font-size:
        0.9rem;

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

    backdrop-filter:
        blur(12px);

    border:
        1px solid rgba(255, 255, 255, 0.08);

    transition:
        0.4s ease;

}

.header-btn:hover {

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

}

/* ======================
   HERO
====================== */

.hero {

    position:
        relative;

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    color:
        white;

}

.hero-image {

    position:
        absolute;

    inset:
        0;

    background:
        url('../assets/img/hero.png') center center / cover;

    transform:
        scale(1.05);

}

.hero-image img {

    animation:
        heroFloat 8s ease-in-out infinite;

}

.hero::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(to bottom,
            rgba(10, 15, 25, 0.25),
            rgba(10, 15, 25, 0.58)),

        radial-gradient(circle at top,
            rgba(255, 255, 255, 0.08),
            transparent 45%);

    z-index:
        1;

}

.hero-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(to bottom,
            rgba(10, 12, 18, 0.45),
            rgba(25, 28, 40, 0.72));

}

.hero-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        680px;

}

.hero-text {

    max-width:
        34ch;

    font-size:
        1.1rem;

    opacity:
        0.88;

}

.hero .btn {

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

    backdrop-filter:
        blur(12px);

    border:
        1px solid rgba(255, 255, 255, 0.16);

}

.hero .btn:hover {

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

}

@keyframes heroFloat {

    0% {

        transform:
            scale(1.02) translateY(0px);

    }

    50% {

        transform:
            scale(1.04) translateY(-8px);

    }

    100% {

        transform:
            scale(1.02) translateY(0px);

    }

}

/* ======================
   SECTION - PROBLEM
====================== */

.problem {

    background:
        linear-gradient(to bottom,
            #e6e1dc,
            #d9d8e2);

}

.problem-content {

    max-width:
        720px;

}

.section-label {

    font-size:
        0.72rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.22em;

    margin-bottom:
        24px;

    opacity:
        0.48;

}

.section-text {

    max-width:
        46ch;

    font-size:
        1.05rem;

    line-height:
        1.9;

    opacity:
        0.75;

}

/* ======================
   SECTION - EXPERIENCE
====================== */

.experience {

    background:
        linear-gradient(to bottom,
            #d9d8e2,
            #8d98b3);

    color:
        white;

}

.experience-grid {

    display:
        grid;

    gap:
        48px;

    align-items:
        center;

}

.experience-image {

    position:
        relative;

    overflow:
        hidden;

    border-radius:
        28px;

}

.experience-image img {

    width:
        100%;

    display:
        block;

    object-fit:
        cover;

    min-height:
        420px;

}

.experience-image::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(to top,
            rgba(10, 12, 18, 0.28),
            transparent);

}

.experience-content {

    max-width:
        540px;

}

.experience .section-text {

    opacity:
        0.9;

}

.experience .btn {

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

    backdrop-filter:
        blur(12px);

    border:
        1px solid rgba(255, 255, 255, 0.18);

}

.experience .btn:hover {

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

}

@media (min-width: 768px) {

    .experience-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            80px;

    }

}

/* ======================
   TECHNOLOGY
====================== */

.technology {

    position:
        relative;

    background:
        linear-gradient(to bottom,
            #8d98b3,
            #5d6a86);

    color:
        white;

    overflow:
        hidden;

}

.technology::before {

    content:
        "";

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    border-radius:
        50%;

    background:
        radial-gradient(rgba(255, 255, 255, 0.08),
            transparent 70%);

    top:
        -120px;

    right:
        -120px;

}

.technology-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        760px;

}

.technology .section-text {

    opacity:
        0.88;

}

/* ======================
   BENEFITS
====================== */

.benefits {

    background:
        linear-gradient(to bottom,
            #5d6a86,
            #3b4966);

    color:
        white;

}

.benefits-heading {

    max-width:
        720px;

    margin-bottom: var(--space-xl);

}

.benefits-grid {

    display:
        grid;

    gap: var(--space-sm);

}

.benefit-card {

    position:
        relative;

    padding: var(--space-lg);

    border-radius:
        32px;

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

    backdrop-filter:
        blur(16px);

    border:
        1px solid rgba(255, 255, 255, 0.06);

    transition:
        transform 0.5s ease,
        background 0.5s ease,
        border-color 0.5s ease;

    overflow:
        hidden;

}

.benefit-card::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(circle at top left,
            rgba(255, 255, 255, 0.08),
            transparent 60%);

    opacity:
        0;

    transition:
        opacity 0.5s ease;

}

.benefit-card:hover::before {

    opacity:
        1;

}

.benefit-card:hover {

    transform:
        translateY(-10px);

    box-shadow:
        0 18px 60px rgba(0, 0, 0, 0.18);

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

    border-color:
        rgba(255, 255, 255, 0.12);

}

.benefit-card h3 {

    font-size:
        1.5rem;

    margin-bottom:
        16px;

    font-weight:
        600;

}

.benefit-card p {

    opacity:
        0.82;

    line-height:
        1.8;

}

@media (min-width: 768px) {

    .benefits-grid {

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

    }

}

/* ======================
   PROCESS
====================== */

.process {

    background:
        linear-gradient(to bottom,
            #3b4966,
            #2b354b);

    color:
        white;

}

.process-heading {

    max-width:
        720px;

    margin-bottom: var(--space-xl);

}

.process-steps {

    display:
        grid;

    gap: var(--space-sm);

}

.step-card {

    position:
        relative;

    padding: var(--space-lg);

    border-radius:
        28px;

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

    border:
        1px solid rgba(255, 255, 255, 0.08);

    backdrop-filter:
        blur(12px);

    overflow:
        hidden;

}

.step-number {

    display:
        inline-block;

    font-size:
        0.8rem;

    letter-spacing:
        0.16em;

    opacity:
        0.5;

    margin-bottom:
        20px;

}

.step-card h3 {

    font-size:
        1.5rem;

    margin-bottom:
        16px;

}

.step-card p {

    line-height:
        1.8;

    opacity:
        0.82;

}

@media (min-width: 768px) {

    .process-steps {

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

    }

}

/* ======================
   TESTIMONIALS
====================== */

.testimonials {

    background:
        linear-gradient(to bottom,
            #2b354b,
            #1f2937);

    color:
        white;

}

.testimonials-heading {

    max-width:
        720px;

    margin-bottom: var(--space-xl);

}

.testimonials-grid {

    display:
        grid;

    gap: var(--space-sm);

}

.testimonial-card {

    padding: var(--space-lg);

    border-radius:
        28px;

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

    border:
        1px solid rgba(255, 255, 255, 0.08);

    backdrop-filter:
        blur(12px);

}

.testimonial-card p {

    font-size:
        1.05rem;

    line-height:
        1.9;

    margin-bottom: var(--space-md);

    opacity:
        0.9;

}

.testimonial-card span {

    font-size:
        0.85rem;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    opacity:
        0.55;

}

@media (min-width: 768px) {

    .testimonials-grid {

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

    }

}

/* ======================
   FAQ
====================== */

.faq {

    background:
        linear-gradient(to bottom,
            #1f2937,
            #161d2b);

    color:
        white;

}

.faq-heading {

    max-width:
        720px;

    margin-bottom: var(--space-xl);

}

.faq-list {

    display:
        grid;

    gap: var(--space-sm);

}

.faq-item {

    padding: var(--space-md);

    border-radius:
        24px;

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

    border:
        1px solid rgba(255, 255, 255, 0.06);

    backdrop-filter:
        blur(12px);

    transition:
        0.4s ease;

}

.faq-item:hover {

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

}

.faq-item summary {

    list-style:
        none;

    cursor:
        pointer;

    font-size:
        1.05rem;

    font-weight:
        500;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}

.faq-item summary::-webkit-details-marker {

    display:
        none;

}

.faq-item summary::after {

    content:
        "+";

    font-size:
        1.2rem;

    opacity:
        0.5;

    transition:
        transform 0.4s ease;

}

.faq-item[open] summary::after {

    transform:
        rotate(45deg);

}

.faq-item p {

    margin-top:
        20px;

    max-width:
        58ch;

    line-height:
        1.9;

    opacity:
        0.78;

}

/* ======================
   CTA
====================== */

.cta {

    position:
        relative;

    overflow:
        hidden;

    background:
        linear-gradient(to bottom,
            #1f2937,
            #111827);

    color:
        white;

    text-align:
        center;

}

.cta-glow {

    position:
        absolute;

    width:
        480px;

    height:
        480px;

    border-radius:
        50%;

    background:
        radial-gradient(rgba(255, 255, 255, 0.08),
            transparent 70%);

    top:
        50%;

    left:
        50%;

    transform:
        translate(-50%, -50%);

}

.cta-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        760px;

    margin-inline:
        auto;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

}

.cta .section-text {

    margin-inline:
        auto;

    opacity:
        0.82;

}

.cta .btn {

    margin-top:
        40px;

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

    backdrop-filter:
        blur(14px);

    border:
        1px solid rgba(255, 255, 255, 0.12);

}

.cta .btn:hover {

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

    transform:
        translateY(-2px);

}

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

body::before {

    content:
        "";

    position:
        fixed;

    inset:
        0;

    background:
        url('../assets/textures/noise.png');

    opacity:
        0.035;

    pointer-events:
        none;

    z-index:
        1;

}

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

.footer {

    background:
        #111827;

padding: var(--space-lg) 0;

    color:
        rgba(255, 255, 255, 0.42);

}

.footer-content {

    display:
        flex;

    flex-direction:
        column;

    gap: var(--space-xs);

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

}

.footer p,
.footer a {

    font-size:
        0.78rem;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}

.footer a {

    color:
        rgba(255, 255, 255, 0.52);

    text-decoration:
        none;

    transition:
        0.4s ease;

}

.footer a:hover {

    color:
        rgba(255, 255, 255, 0.82);

}

/* ======================
   ATMOSPHERIC LIGHT
====================== */

body::after {

    content:
        "";

    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    background:

        radial-gradient(circle at 20% 20%,
            rgba(255, 255, 255, 0.035),
            transparent 35%),

        radial-gradient(circle at 80% 30%,
            rgba(173, 216, 230, 0.04),
            transparent 40%),

        radial-gradient(circle at 50% 80%,
            rgba(255, 255, 255, 0.02),
            transparent 40%);

    z-index:
        -1;

}

.benefit-card,
.step-card,
.testimonial-card,
.faq-item {

    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.12);

}