/* ===================================
   WHY WEBPOT
=================================== */

#about{

    padding:180px 0;

}

.about-heading{

    display: flex;

    align-items: flex-start;

    gap: 48px;

    margin-bottom: 90px;

}

.about-heading span,
.about-heading .about-tag {

    color: #64748B;

    font-family: sans-serif, 'DM Sans', 'Inter', system-ui;

    font-weight: 700;

    font-size: 0.88rem;

    letter-spacing: .12em;

    text-transform: uppercase;

    white-space: nowrap;

    padding-top: 14px;

}

.about-heading h2{

    font-family: sans-serif, 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system;

    font-size: clamp(5.2rem, 9.5vw, 9rem);

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -0.02em;

    color: #1E293B;

    text-transform: none;

    transition: font-family 0.3s ease, font-weight 0.3s ease, letter-spacing 0.3s ease, color 0.3s ease;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:100px;

    margin-bottom:120px;

}

.about-left h3{

    font-size:2.4rem;

    line-height:1.2;

}

.about-right{

    display:flex;

    flex-direction:column;

    gap:30px;

}

.about-right p{

    font-size:1.1rem;

    line-height:2;

    color:#666;

}

.about-right blockquote{

    font-size:2rem;

    font-weight:700;

    color:#111;

    margin-top:20px;

}

/* ==========================================
   JOURNEY
========================================== */

.journey{

    margin:140px 0;

}

.journey-nav{

    display:flex;

    justify-content:center;

    gap:40px;

    margin-bottom:60px;

}

.journey-btn{

    background:none;

    border:none;

    font-size:2rem;

    font-weight:600;

    color:#999;

    cursor:pointer;

    transition:.35s ease;

    position:relative;

}

.journey-btn:hover{

    color:#111;

}

.journey-btn.active{

    color:#111;

}

.journey-btn::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#111;

    transition:.35s;

}

.journey-btn:hover::after,

.journey-btn.active::after{

    width:100%;

}

.journey-content{

    max-width:800px;

    margin:auto;

    text-align:center;

    min-height:180px;

}

.journey-content h3{

    font-size:3rem;

    margin-bottom:20px;

}

.journey-content p{

    font-size:1.1rem;

    color:#666;

    line-height:1.9;

}

/* ========================= */

.about-quote{

    margin-top:180px;

    text-align:center;

    position:relative;

}

.about-quote h2{

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

    line-height:1.08;

    max-width:1200px;

    margin:auto;

    font-weight:800;

    letter-spacing:-0.02em;

}

.about-quote .fade-line{

    display:block;

    overflow:hidden;

    padding:4px 0;

}

.about-quote .fade-line-inner{

    display:block;

    opacity:0;

    transform:translateY(70px);

    filter:blur(14px);

    transition:opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1),

               transform 1.8s cubic-bezier(0.16, 1, 0.3, 1),

               filter 1.6s cubic-bezier(0.16, 1, 0.3, 1);

    will-change:transform, opacity, filter;

}

.about-quote.is-visible .fade-line:nth-child(1) .fade-line-inner{

    opacity:1;

    transform:translateY(0);

    filter:blur(0);

    transition-delay:0.2s;

}

.about-quote.is-visible .fade-line:nth-child(2) .fade-line-inner{

    opacity:1;

    transform:translateY(0);

    filter:blur(0);

    transition-delay:0.55s;

}

#journey-title,
#journey-description{

    transition:.25s ease;

}