/*==================================================
    ABOUT PAGE
==================================================*/

:root{

    --about-hero-image-width:760px;
    --about-workspace-width:700px;
    --about-rocket-width:170px;
    --about-cta-icon-width:140px;

    --about-feature-icon-size:78px;
    --about-stat-icon-size:64px;

    --about-radius:18px;

    --about-section-padding:75px;

}


.about-hero {
    position: relative;
    overflow: hidden;
    padding: 65px 0 60px;
    background: radial-gradient(circle at 96% 8%,
    rgba(255,193,55,.16),
    transparent 22%),

    radial-gradient(circle at 12% 72%,
    rgba(40,130,255,.18),
    transparent 28%),

    radial-gradient(circle at 55% 48%,
    rgba(0,140,255,.07),
    transparent 45%),

    linear-gradient(
        135deg,
        #050d1d,
        #07162d,
        #091f45,
        #07162d,
        #050d1d
    );
    max-width: 1400px;
    margin: 0 auto;
}

.about-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:url("/smartshop/assets/images/pattern.svg");

    opacity:.05;

}


.about-hero-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    align-items:center;

    gap:80px;

    min-height:520px;

}


.about-hero-content{

    max-width:580px;

    padding-right:55px;

    position:relative;

    z-index:5;

}


.about-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 26px;

    border-radius:50px;

    background:rgba(255,191,53,.12);

    border:1px solid rgba(255,191,53,.45);

    color:#ffd25f;

    font-size:15px;

    font-weight:700;

    letter-spacing:.2px;

    box-shadow:

        inset 0 0 18px rgba(255,191,53,.08),

        0 0 18px rgba(255,191,53,.08);

    margin-bottom:28px;

}
.about-hero::after{

    content:"";

    position:absolute;

    left:-8%;

    top:58%;

    width:70%;

    height:2px;

    background:linear-gradient(
        to right,
        transparent,
        #2d7dff,
        transparent
    );

    box-shadow:
        0 0 20px #2d7dff;

    transform:rotate(-8deg);

}

.about-hero-content h1{

    font-size:55px;

    line-height:1.3;

    font-weight:900;

    color:#fff;

    margin:0 0 28px;

    text-wrap:balance;

}


.about-hero-content p{

    max-width:520px;

    font-size:21px;

    line-height:2;

    color:#dce5f7;

    margin-bottom:42px;

}



.about-hero .hero-actions{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

    margin-top:10px;

}
.about-hero .btn-primary{

    background:linear-gradient(135deg,#f0b323,#ffd45e);

    color:#fff;

    border:none;

    box-shadow:

        0 12px 30px rgba(240,179,35,.35),

        0 0 18px rgba(255,208,70,.18);

}

.about-hero .btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:

        0 18px 40px rgba(240,179,35,.42),

        0 0 28px rgba(255,208,70,.25);

}

.about-hero .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:190px;

    height:58px;

    padding:0 30px;

    border-radius:14px;

    font-size:16px;

    font-weight:700;

    text-decoration:none;

    transition:.30s;

}

.about-hero .btn-outline{

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

    border:1px solid rgba(255,255,255,.22);

    color:#fff;

    backdrop-filter:blur(10px);

}

.about-hero .btn-outline:hover{

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

    border-color:#fff;

    transform:translateY(-3px);

}

.about-hero-image{

    display:flex;

    justify-content:flex-start;

    align-items:center;

    padding-left:55px;

    position:relative;

    transform:perspective(1600px) rotateY(11deg);

    transform-origin:left center;

}


.about-hero-image img{

    width:610px;


    display:block;

    position:relative;

    z-index:2;

    border-radius:30px;

    border:1px solid rgba(110,180,255,.18);

    box-shadow:

        0 0 15px rgba(90,170,255,.45),

        0 0 45px rgba(60,130,255,.18),

        0 35px 70px rgba(0,0,0,.35);

}

.about-hero-image::before{

    content:"";

    position:absolute;

    left:80px;

    top:50%;

    transform:translateY(-50%);

    width:470px;

    height:470px;

    border-radius:50%;

    background:radial-gradient(circle,

        rgba(60,130,255,.22),

        rgba(60,130,255,.08),

        transparent 70%);

    filter:blur(35px);

    z-index:1;

}

.about-story {
    padding: 20px 0 25px;
    background: #fff;
    max-width: 1400px;
    margin: 0 auto;
}


.story-grid {
    display: grid;
    grid-template-columns: 450px minmax(450px,1fr) 220px;
    gap: 20px;
    align-items: center;
}


.story-rocket{


    justify-content:center;

    align-items:center;

    position:relative;

}
.story-rocket::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:radial-gradient(circle,

        rgba(55,135,255,.18),

        rgba(55,135,255,.08),

        transparent 72%);

    filter:blur(24px);

    z-index:1;

}


.story-rocket img{

    width:var(--about-rocket-width);

    position:relative;

    z-index:2;

    animation:rocketFloat 5s ease-in-out infinite;

}


.story-content{

    max-width:600px;

}


.story-content .section-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:11px 24px;

    margin-bottom:22px;

    border-radius:50px;

    background:rgba(255,191,53,.12);

    border:1px solid rgba(255,191,53,.35);

    color:#d7a51e;

    font-size:15px;

    font-weight:700;

    box-shadow:

        inset 0 0 14px rgba(255,191,53,.08),

        0 0 14px rgba(255,191,53,.08);

}


.story-content h2 {
    margin: 0 0 12px;
    font-size: 42px;
    line-height: 1.15;
    color: #081b3c;
    font-weight: 800;
}


.story-content p{



    font-size:16px;

    color:#67738d;

}


.story-image{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:18px;

}
.story-image img{

    width:calc(100% - 40px);

    max-width:760px;

    display:block;

    object-fit:cover;

    margin:20px;

    border-radius:28px;

    padding:14px;

    background:#fff;

    border:1px solid rgba(70,110,190,.10);

    box-shadow:

        0 24px 60px rgba(10,30,70,.12),

        0 8px 22px rgba(0,0,0,.05);

}
.about-features{

    padding:10px 0 45px;max-width: 1400px;
    background:#fff;margin: 0 auto;

}


.about-features .section-heading{

    margin-bottom:0;

    text-align:center;

}
.about-features .section-heading .section-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:11px 24px;

    margin-bottom:8px;

    border-radius:50px;

    background:rgba(255,191,53,.12);

    border:1px solid rgba(255,191,53,.35);

    color:#d7a51e;

    font-size:15px;

    font-weight:700;

    letter-spacing:.2px;

    box-shadow:

        inset 0 0 14px rgba(255,191,53,.08),

        0 0 14px rgba(255,191,53,.08);

}

.about-features .section-heading h2{

    font-size:42px;

    margin-top:0px;

}

.features-grid {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 12px;
    padding: 12px;
}


.feature-card{

    background:#fff;

    border:1px solid #edf1f8;

    border-radius:18px;

    padding:28px 22px;

    min-height:220px;

    text-align:center;

    transition:.25s;

    box-shadow:0 8px 24px rgba(0,0,0,.05);

}


.feature-card:hover{

    transform:translateY(-6px);

    border-color:#d6a72c;

    box-shadow:0 18px 45px rgba(10,35,70,.10);

}


.feature-icon{

    margin-bottom:18px;

}


.feature-icon img{

    width:var(--about-feature-icon-size);

    height:var(--about-feature-icon-size);

    object-fit:contain;

}


.feature-card h3{

    margin:0 0 12px;

    font-size:18px;

    color:#081b3c;

    font-weight:700;

    line-height:0.3;

}


.feature-card p{

    margin:0;

    font-size:14px;

    line-height:1.7;

    color:#6f7890;

}

.about-stats {
    padding: 0 0 65px;
    background: #fff;
    max-width: 1400px;
    margin: 0 auto;
}


.stats-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);
margin: 0 10px 0 10px;
    background:linear-gradient(135deg,#07152d,#081c40);

    border-radius:22px;

    overflow:hidden;

}


.stat-card{

    padding:20px 18px;

    text-align:center;

    position:relative;

}


.stat-card:not(:last-child)::after{

    content:"";

    position:absolute;

    top:22%;

    left:0;

    width:1px;

    height:56%;

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

}


.stat-icon{

    margin-bottom:0;

}


.stat-icon img{

    width:var(--about-stat-icon-size);

    height:var(--about-stat-icon-size);

    object-fit:contain;

}


.stat-card h3{

    margin:0;

    color:#ffbf35;

    font-size:42px;

    font-weight:800;

}


.stat-card span{

    color:#eef3ff;

    font-size:15px;

}


.about-timeline {
    padding: 10px 0 65px;
    background: #f8f9fc;
    max-width: 1400px;
    margin: 0 auto;
}


.about-timeline .section-heading{

    margin-bottom:15px;

    text-align:center;

}


.about-timeline .section-heading h2{

    font-size:40px;

    margin-top:10px;

}


.timeline{

    display:grid;

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

    gap:18px;

    position:relative;

}

.about-timeline .section-heading .section-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:11px 24px;

    margin-bottom:18px;

    border-radius:50px;

    background:rgba(255,191,53,.12);

    border:1px solid rgba(255,191,53,.35);

    color:#d7a51e;

    font-size:15px;

    font-weight:700;

    letter-spacing:.2px;

    box-shadow:

        inset 0 0 14px rgba(255,191,53,.08),

        0 0 14px rgba(255,191,53,.08);

}
.about-cta-content .section-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:11px 24px;

    margin-bottom:20px;

    border-radius:50px;

    background:rgba(255,191,53,.16);

    border:1px solid rgba(255,191,53,.40);

    color:#ffd25f;

    font-size:15px;

    font-weight:700;

    letter-spacing:.2px;

    box-shadow:

        inset 0 0 14px rgba(255,191,53,.08),

        0 0 18px rgba(255,191,53,.10);

}

.timeline-line{

    position:absolute;

    top:30px;

    left:11%;

    right:11%;

    height:2px;

    background:linear-gradient(to left,#d7a51e,#2d72ff);

}


.timeline-item{

    text-align:center;

    position:relative;

    z-index:2;

}


.timeline-number{

    width:60px;

    height:60px;

    margin:0 auto 18px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#d7a51e,#ffca4f);

    color:#fff;

    font-size:24px;

    font-weight:700;

    box-shadow:0 10px 28px rgba(215,165,30,.30);

}


.timeline-item h3{

    margin-bottom:10px;

    color:#081b3c;

    font-size:22px;

}


.timeline-item p{

    color:#69738d;

    font-size:15px;

    line-height:1.75;

}


.about-cta {
    padding: 0 0 25px;
    background: #fff;
    max-width: 1400px;
    margin: 0 auto;
}


.about-cta-box {
    display: grid;
    grid-template-columns: 0.6fr 580px;
    align-items: center;
    gap: 45px;
    padding: 45px;
    border-radius: 24px;
    overflow: hidden;
    background: radial-gradient(circle at top left,rgba(255,184,0,.12),transparent 30%),
    linear-gradient(135deg,#07152d,#081b3d);
}


.about-cta-content h2{

    margin:12px 0 18px;

    color:#fff;

    font-size:48px;

    line-height:1.2;

}


.about-cta-content p{

    margin-bottom:28px;

    color:#dce5f7;

    font-size:17px;

    line-height:1.9;

    max-width:700px;

}


.about-cta-icon{

    display:flex;

    justify-content:center;

    align-items:center;

}


.about-cta-icon img{

    width:var(--about-cta-icon-width);

    display:block;

}


.about-cta .hero-actions{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

    margin-top:12px;

}

.about-cta .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:190px;

    height:58px;

    padding:0 30px;

    border-radius:14px;

    font-size:16px;

    font-weight:700;

    text-decoration:none;

    transition:.30s;

}
.about-cta .btn-primary{

    background:linear-gradient(135deg,#f0b323,#ffd45e);

    color:#fff;

    border:none;

    box-shadow:

        0 12px 30px rgba(240,179,35,.35),

        0 0 18px rgba(255,208,70,.18);

}

.about-cta .btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:

        0 18px 40px rgba(240,179,35,.42),

        0 0 28px rgba(255,208,70,.25);

}

.about-cta .btn-outline{

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

    color:#fff;

    border:1px solid rgba(255,255,255,.28);

    backdrop-filter:blur(10px);

}

.about-cta .btn-outline:hover{

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

    border-color:#fff;

    transform:translateY(-3px);

}


@media (max-width:1200px){

    .about-hero-grid,
    .story-grid,
    .about-cta-box{

        grid-template-columns:1fr;

        text-align:center;

    }



    .timeline{

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

    }

    .timeline-line{

        display:none;

    }

}


@media (max-width:768px){

    :root{

        --about-hero-image-width:100%;
        --about-workspace-width:100%;
        --about-rocket-width:120px;
        --about-feature-icon-size:64px;
        --about-stat-icon-size:52px;
        --about-cta-icon-width:90px;

    }



    .about-hero-content h1{

        font-size:42px;

    }

    .story-content h2{

        font-size:38px;

    }

    .about-cta-content h2{

        font-size:36px;

    }

    .features-grid,
    .stats-grid,
    .timeline{

        grid-template-columns:1fr;

    }

    .story-rocket{

        display:none;

    }

}