/* About page layout and sections. */
.reveal-left{opacity:0;transform:translateX(-40px);transition:all .7s cubic-bezier(.16,1,.3,1)}

.reveal-left.visible{opacity:1;transform:translateX(0)}

.nav-links{display:flex;gap:1.5rem;align-items:center}

.nav-links a{font-size:.85rem;color:var(--gray);transition:color .3s;font-weight:500}

.nav-links a:hover,.nav-links a.active{color:var(--primary)}

.nav-links a.active{position:relative}

.nav-links a.active::after{
            content:'';position:absolute;bottom:-4px;left:0;right:0;
            height:2px;background:var(--primary);border-radius:1px
        }

.hero{
            min-height:auto;display:flex;align-items:center;justify-content:center;
            background:
                radial-gradient(ellipse 55% 55% at 15% 25%,rgba(249,115,22,.35),transparent 55%),
                radial-gradient(ellipse 45% 50% at 90% 70%,rgba(168,85,247,.22),transparent 50%),
                linear-gradient(165deg,#0b0a14 0%,#16122a 55%,#1f1538 100%);
            color:#fff;
            position:relative;overflow:hidden;padding:8rem 1.5rem 4rem
        }

.hero::before{
            content:'';position:absolute;top:-30%;right:-12%;width:480px;height:480px;
            background:radial-gradient(circle,rgba(249,115,22,.22) 0%,transparent 70%);
            border-radius:50%;pointer-events:none;filter:blur(8px)
        }

.hero-content{position:relative;z-index:1;text-align:center;max-width:700px}

.hero-badge{
            display:inline-flex;align-items:center;gap:.35rem;
            padding:.4rem 1.05rem;border-radius:2rem;
            background:rgba(255,255,255,.1);color:#ffe8cc;
            font-size:.8rem;font-weight:600;margin-bottom:1.5rem;
            border:1px solid rgba(255,255,255,.18);
            backdrop-filter:blur(10px)
        }

.hero h1{
            font-size:clamp(2rem,4.5vw,3rem);font-weight:800;
            line-height:1.2;margin-bottom:1rem;letter-spacing:-1px;color:#fff
        }

.hero h1 .highlight{
            background:linear-gradient(100deg,#fdba74,#fb923c,#f472b6,#a78bfa,#38bdf8,#fbbf24,#fdba74);
            background-size:300% auto;
            -webkit-background-clip:text;-webkit-text-fill-color:transparent;
            background-clip:text
        }

.hero p{
            font-size:clamp(.95rem,1.6vw,1.1rem);color:rgba(255,255,255,.75);
            max-width:540px;margin:0 auto 2rem;line-height:1.8
        }

.breadcrumb{
            background:var(--primary-light);padding:.8rem 0;
            border-bottom:1px solid var(--border);font-size:.85rem;
            margin-top:65px
        }

.breadcrumb-inner{
            max-width:1100px;margin:0 auto;padding:0 1.5rem;
            color:var(--gray)
        }

.breadcrumb a{color:var(--primary);transition:color .3s}

.breadcrumb a:hover{color:var(--primary-dark)}

.breadcrumb span{margin:0 .5rem;color:var(--border)}

.breadcrumb .current{color:var(--dark);font-weight:500}

#about-intro{background:#fff}

.about-grid{
            display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center
        }

.about-text h3{
            font-size:1.5rem;font-weight:700;margin-bottom:1rem;color:var(--dark)
        }

.about-text p{color:var(--gray);font-size:.95rem;margin-bottom:1rem;line-height:1.8}

.about-text .highlight-box{
            background:var(--primary-light);border-left:4px solid var(--primary);
            padding:1rem 1.2rem;border-radius:0 .5rem .5rem 0;margin:1.5rem 0
        }

.about-text .highlight-box p{color:var(--dark);font-weight:500;margin:0}

.about-visual{
            background:linear-gradient(135deg,var(--primary-light),#ffedd5);
            border-radius:var(--radius);padding:3rem 2rem;text-align:center;
            position:relative;overflow:hidden
        }

.about-visual::before{
            content:'';position:absolute;top:20%;right:-10%;width:200px;height:200px;
            background:radial-gradient(circle,rgba(249,115,22,.1) 0%,transparent 70%);
            border-radius:50%
        }

.about-visual .big-icon{font-size:4rem;margin-bottom:1rem}

.about-visual h4{font-size:1.3rem;font-weight:800;color:var(--dark);margin-bottom:.5rem}

.about-visual p{color:var(--gray);font-size:.9rem}

.about-numbers{
            display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem
        }

.about-num{text-align:center}

.about-num-val{font-size:1.6rem;font-weight:800;color:var(--primary-dark)}

.about-num-label{font-size:.75rem;color:var(--gray)}

#values{background:var(--primary-light)}

.values-grid{
            display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
            gap:1.5rem
        }

.value-card{
            background:#fff;border-radius:var(--radius);padding:2rem;
            transition:all .4s;border:1px solid transparent
        }

.value-card:hover{
            border-color:var(--border);transform:translateY(-4px);box-shadow:var(--shadow)
        }

.value-icon{font-size:2rem;margin-bottom:.8rem}

.value-card h4{font-size:1.05rem;font-weight:700;margin-bottom:.6rem}

.value-card p{font-size:.88rem;color:var(--gray);line-height:1.7}

#areas{background:#fff}

.areas-content{max-width:800px;margin:0 auto}

.area-main{
            background:linear-gradient(135deg,var(--primary),var(--primary-dark));
            color:#fff;border-radius:var(--radius);padding:2rem;
            text-align:center;margin-bottom:2rem
        }

.area-main h3{font-size:1.3rem;font-weight:700;margin-bottom:.5rem}

.area-main p{opacity:.9;font-size:.95rem}

.area-list{
            display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
            gap:1rem
        }

.area-item{
            background:var(--light);border-radius:.6rem;padding:1rem;
            text-align:center;font-size:.9rem;font-weight:500;
            border:1px solid var(--border);transition:all .3s
        }

.area-item:hover{border-color:var(--primary);background:var(--primary-light)}

.area-item .area-icon{font-size:1.2rem;display:block;margin-bottom:.3rem}

#team{background:var(--primary-light)}

.team-grid{
            display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
            gap:1.5rem
        }

.team-card{
            background:#fff;border-radius:var(--radius);padding:2rem;text-align:center;
            transition:all .4s;border:1px solid transparent
        }

.team-card:hover{
            border-color:var(--border);transform:translateY(-4px);box-shadow:var(--shadow)
        }

.team-avatar{
            width:72px;height:72px;border-radius:50%;margin:0 auto 1rem;
            display:flex;align-items:center;justify-content:center;
            font-size:2rem
        }

.team-card h4{font-size:1rem;font-weight:700;margin-bottom:.3rem}

.team-card .team-role{
            font-size:.8rem;color:var(--primary);font-weight:600;margin-bottom:.5rem
        }

.team-card p{font-size:.85rem;color:var(--gray);line-height:1.6}

#timeline{background:#fff}

.timeline{max-width:600px;margin:0 auto;position:relative}

.timeline::before{
            content:'';position:absolute;left:20px;top:0;bottom:0;
            width:2px;background:linear-gradient(180deg,var(--primary),var(--border))
        }

.timeline-item{
            position:relative;padding-left:55px;margin-bottom:2rem
        }

.timeline-dot{
            position:absolute;left:12px;top:4px;width:18px;height:18px;
            border-radius:50%;background:var(--primary);border:3px solid #fff;
            box-shadow:0 0 0 2px var(--primary)
        }

.timeline-item h4{font-size:1rem;font-weight:700;color:var(--dark);margin-bottom:.3rem}

.timeline-item .timeline-date{font-size:.8rem;color:var(--primary);font-weight:600;margin-bottom:.3rem}

.timeline-item p{font-size:.88rem;color:var(--gray);line-height:1.6}

#contact-info{background:var(--primary-light)}

.contact-grid{
            display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
            gap:1.5rem
        }

.contact-card{
            background:#fff;border-radius:var(--radius);padding:2rem;
            transition:all .4s;border:1px solid transparent;text-align:center
        }

.contact-card:hover{
            border-color:var(--border);transform:translateY(-4px);box-shadow:var(--shadow)
        }

.contact-card .c-icon{font-size:2rem;margin-bottom:.8rem}

.contact-card h4{font-size:1rem;font-weight:700;margin-bottom:.5rem}

.contact-card p{font-size:.88rem;color:var(--gray);margin-bottom:.3rem}

.contact-card .c-value{
            font-size:1.1rem;font-weight:700;color:var(--dark);
            display:block;margin-top:.5rem
        }

.contact-card a.c-value{color:var(--primary)}

.contact-card a.c-value:hover{color:var(--primary-dark)}

.btn{
            padding:.9rem 2.2rem;border:none;border-radius:2rem;
            font-size:.95rem;font-weight:600;cursor:pointer;
            transition:all .3s;display:inline-flex;align-items:center;gap:.5rem
        }

.btn-outline{background:transparent;color:var(--dark);border:2px solid var(--border)}

.footer-links a{display:inline-block;margin-right:.8rem}

@media(max-width:768px) {
.hero{padding:6rem 1rem 3rem}

.about-grid{grid-template-columns:1fr}

.about-visual{order:-1}
}

@media(max-width:480px) {
.hero h1{font-size:2rem}

.about-numbers{grid-template-columns:repeat(3,1fr);gap:.5rem}
}