<?php include 'includes/header.php'; ?>

<!-- ====== PAGE HERO ====== -->
<section class="page-hero">
    <div class="overlay"></div>
    <div class="hero-grid-lines"><?php for ($i = 0; $i < 8; $i++): ?><div class="grid-line"></div><?php endfor; ?></div>
    <div class="container text-center" style="position:relative;z-index:2">
        <div class="hero-eyebrow"><span class="badge-dot"></span><span>THE PEOPLE</span></div>
        <h1>Our <span>Team</span></h1>
        <p>Meet the talented professionals who drive innovation, creativity, and success every day.</p>
        <div class="hero-breadcrumb">
            <a href="index.php">Home</a><i class="bi bi-chevron-right"></i><span>Team</span>
        </div>
    </div>
</section>

<style>
    /* ====== PAGE HERO ====== */
    .page-hero {
        position: relative;
        padding: 130px 0 100px;
        background: linear-gradient(135deg, #020509 0%, #041020 60%, #060d14 100%);
        overflow: hidden
    }

    .page-hero .overlay {
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 60% 50%, rgba(0, 212, 255, 0.05) 0%, transparent 70%)
    }

    .hero-grid-lines {
        position: absolute;
        inset: 0;
        display: flex;
        justify-content: space-around;
        pointer-events: none
    }

    .grid-line {
        width: 1px;
        height: 100%;
        background: linear-gradient(to bottom, transparent, rgba(0, 212, 255, 0.08), transparent);
        animation: grid-pulse 4s ease-in-out infinite
    }

    .grid-line:nth-child(odd) {
        animation-delay: -2s
    }

    @keyframes grid-pulse {

        0%,
        100% {
            opacity: .3
        }

        50% {
            opacity: 1
        }
    }

    .hero-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(0, 212, 255, 0.06);
        border: 1px solid rgba(0, 212, 255, 0.25);
        border-radius: 30px;
        padding: 6px 18px;
        margin-bottom: 20px;
        font-family: 'Orbitron', monospace;
        font-size: 10px;
        letter-spacing: 3px;
        color: #00d4ff
    }

    .badge-dot {
        width: 6px;
        height: 6px;
        background: #00d4ff;
        border-radius: 50%;
        box-shadow: 0 0 8px #00d4ff;
        animation: pulse-dot 2s infinite
    }

    @keyframes pulse-dot {

        0%,
        100% {
            opacity: 1;
            transform: scale(1)
        }

        50% {
            opacity: .5;
            transform: scale(.8)
        }
    }

    .page-hero h1 {
        font-family: 'Orbitron', monospace;
        font-size: clamp(28px, 5vw, 50px);
        font-weight: 800;
        color: #e8f4ff;
        margin-bottom: 14px;
        letter-spacing: 1px
    }

    .page-hero h1 span {
        color: #00d4ff
    }

    .page-hero p {
        color: #5a8a9f;
        font-size: 16px;
        max-width: 550px;
        margin: 0 auto 24px;
        line-height: 1.7
    }

    .hero-breadcrumb {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: #4a7a9b;
        font-family: 'Orbitron', monospace;
        letter-spacing: 1px
    }

    .hero-breadcrumb a {
        color: #00d4ff;
        text-decoration: none
    }

    .hero-breadcrumb i {
        font-size: 10px
    }

    /* ====== SHARED BUTTONS ====== */
    .btn-primary-tech {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: linear-gradient(135deg, #00d4ff, #0099cc);
        color: #020509;
        padding: 14px 30px;
        border-radius: 8px;
        font-weight: 700;
        font-size: 13px;
        font-family: 'Orbitron', monospace;
        letter-spacing: 1px;
        text-decoration: none;
        transition: all 0.3s;
        box-shadow: 0 0 25px rgba(0, 212, 255, 0.35)
    }

    .btn-primary-tech:hover {
        transform: translateY(-3px);
        box-shadow: 0 0 40px rgba(0, 212, 255, 0.6);
        color: #020509
    }

    .btn-ghost-tech {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: transparent;
        color: #e8f4ff;
        padding: 13px 28px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 13px;
        text-decoration: none;
        border: 1px solid rgba(0, 212, 255, 0.3);
        transition: all 0.3s;
        font-family: 'Orbitron', monospace
    }

    .btn-ghost-tech:hover {
        background: rgba(0, 212, 255, 0.08);
        border-color: #00d4ff;
        color: #00d4ff;
        transform: translateY(-2px)
    }

    /* ====== SHARED CTA ====== */
    .cta-section-dark {
        position: relative
    }

    .cta-box-dark {
        background: rgba(6, 18, 32, 0.8);
        border: 1px solid rgba(0, 212, 255, 0.2);
        border-radius: 16px;
        padding: 70px 40px;
        position: relative;
        overflow: hidden;
        backdrop-filter: blur(12px)
    }

    .cta-box-dark::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.04), transparent 70%);
        pointer-events: none
    }

    .cta-corner {
        position: absolute;
        width: 20px;
        height: 20px;
        border-color: rgba(0, 212, 255, 0.5);
        border-style: solid
    }

    .cta-tl {
        top: 12px;
        left: 12px;
        border-width: 2px 0 0 2px
    }

    .cta-tr {
        top: 12px;
        right: 12px;
        border-width: 2px 2px 0 0
    }

    .cta-bl {
        bottom: 12px;
        left: 12px;
        border-width: 0 0 2px 2px
    }

    .cta-br {
        bottom: 12px;
        right: 12px;
        border-width: 0 2px 2px 0
    }

    .cta-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(0, 212, 255, 0.06);
        border: 1px solid rgba(0, 212, 255, 0.25);
        border-radius: 30px;
        padding: 6px 16px;
        font-size: 10px;
        letter-spacing: 3px;
        color: #00d4ff;
        font-family: 'Orbitron', monospace
    }

    .cta-box-dark h2 {
        font-family: 'Orbitron', monospace;
        font-size: clamp(22px, 4vw, 40px);
        font-weight: 700;
        color: #e8f4ff;
        margin-bottom: 16px;
        position: relative
    }

    .cta-box-dark p {
        font-size: 15px;
        color: #5a8a9f;
        max-width: 550px;
        margin: 0 auto 36px;
        line-height: 1.7;
        position: relative
    }

    .cta-buttons-dark {
        display: flex;
        gap: 16px;
        justify-content: center;
        flex-wrap: wrap;
        position: relative
    }

    @media(max-width:768px) {
        .cta-box-dark {
            padding: 50px 24px
        }
    }
</style>


<!-- ====== TEAM SECTION ====== -->
<section class="team-page-section py-5">
    <div class="container">

        <div class="text-center mb-5">
            <h2 class="section-title">Meet The <span>Crew</span></h2>
            <p class="section-subtitle">Our diverse team of experts brings together creativity, technical expertise, and a passion for innovation.</p>
        </div>

        <?php
        $team = [
            ["name" => "Rahul Sharma", "role" => "Full Stack Developer", "bio" => "Expert in building scalable web applications with modern technologies.", "img" => "male.png", "skills" => ["PHP", "React", "MySQL", "Node.js"], "social" => ["bi-linkedin", "bi-github", "bi-twitter-x"]],
            ["name" => "Anjali Verma", "role" => "UI/UX Designer", "bio" => "Creates intuitive and beautiful user experiences for digital products.", "img" => "female.png", "skills" => ["Figma", "Adobe XD", "Photoshop", "Illustrator"], "social" => ["bi-linkedin", "bi-dribbble", "bi-instagram"]],
            ["name" => "Amit Singh", "role" => "Salesforce Developer", "bio" => "Specialist in CRM solutions and business automation systems.", "img" => "male.png", "skills" => ["Salesforce", "Apex", "Lightning", "REST API"], "social" => ["bi-linkedin", "bi-github", "bi-twitter-x"]],
            ["name" => "Priya Mehta", "role" => "Digital Marketer", "bio" => "Helps brands grow online with smart digital strategies and campaigns.", "img" => "female.png", "skills" => ["SEO", "Google Ads", "Meta Ads", "Analytics"], "social" => ["bi-linkedin", "bi-instagram", "bi-twitter-x"]],
            ["name" => "Khushi Sharma", "role" => "Digital Marketer", "bio" => "Helps brands grow online with smart digital strategies and campaigns.", "img" => "female.png", "skills" => ["Content", "SEO", "Social Media", "Branding"], "social" => ["bi-linkedin", "bi-instagram", "bi-twitter-x"]],
        ];
        ?>

        <div class="row justify-content-center">
            <?php foreach ($team as $i => $member): ?>
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="team-card-dark" style="--i:<?php echo $i; ?>">

                        <!-- Top glow bar -->
                        <div class="tc-glow-bar"></div>

                        <!-- Number -->
                        <div class="tc-num"><?php echo str_pad($i + 1, 2, '0', STR_PAD_LEFT); ?></div>

                        <!-- Avatar -->
                        <div class="tc-avatar-wrap">
                            <div class="tc-avatar-frame">
                                <img src="assets/team/<?php echo $member['img']; ?>" alt="<?php echo $member['name']; ?>">
                                <div class="tc-scan"></div>
                            </div>
                            <div class="tc-ring-1"></div>
                            <div class="tc-ring-2"></div>
                            <!-- Status dot -->
                            <div class="tc-status"></div>
                        </div>

                        <!-- Info -->
                        <div class="tc-info">
                            <h5><?php echo $member['name']; ?></h5>
                            <span class="tc-role"><?php echo $member['role']; ?></span>
                            <p><?php echo $member['bio']; ?></p>
                        </div>

                        <!-- Skills -->
                        <div class="tc-skills">
                            <?php foreach ($member['skills'] as $skill): ?>
                                <span><?php echo $skill; ?></span>
                            <?php endforeach; ?>
                        </div>

                        <!-- Divider -->
                        <div class="tc-divider"></div>

                        <!-- Social -->
                        <div class="tc-social">
                            <?php foreach ($member['social'] as $icon): ?>
                                <a href="#" class="tc-social-btn"><i class="bi <?php echo $icon; ?>"></i></a>
                            <?php endforeach; ?>
                        </div>

                        <!-- Hover glow -->
                        <div class="tc-hover-glow"></div>

                    </div>
                </div>
            <?php endforeach; ?>
        </div>

    </div>
</section>

<style>
    .team-page-section {
        position: relative;
    }

    /* Card */
    .team-card-dark {
        background: rgba(6, 18, 32, 0.65);
        border: 1px solid rgba(0, 212, 255, 0.1);
        border-radius: 16px;
        padding: 36px 24px 28px;
        text-align: center;
        height: 100%;
        position: relative;
        overflow: hidden;
        backdrop-filter: blur(10px);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        animation: card-in 0.6s ease calc(var(--i)*0.1s) both;
    }

    @keyframes card-in {
        from {
            opacity: 0;
            transform: translateY(30px)
        }

        to {
            opacity: 1;
            transform: translateY(0)
        }
    }

    .team-card-dark:hover {
        transform: translateY(-14px) scale(1.01);
        border-color: rgba(0, 212, 255, 0.4);
        box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 212, 255, 0.1);
    }

    /* Top glow bar */
    .tc-glow-bar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, transparent, #00d4ff, transparent);
        transform: scaleX(0);
        transition: 0.4s;
    }

    .team-card-dark:hover .tc-glow-bar {
        transform: scaleX(1);
    }

    /* Number */
    .tc-num {
        position: absolute;
        top: 14px;
        right: 16px;
        font-family: 'Orbitron', monospace;
        font-size: 10px;
        color: rgba(0, 212, 255, 0.2);
        letter-spacing: 1px;
        transition: 0.3s;
    }

    .team-card-dark:hover .tc-num {
        color: rgba(0, 212, 255, 0.5);
    }

    /* Avatar */
    .tc-avatar-wrap {
        width: 120px;
        height: 120px;
        position: relative;
        margin: 0 auto 22px;
    }

    .tc-avatar-frame {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid rgba(0, 212, 255, 0.25);
        position: relative;
        transition: 0.4s;
    }

    .tc-avatar-frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(0.85) saturate(0.8);
        transition: 0.4s;
    }

    .team-card-dark:hover .tc-avatar-frame {
        border-color: #00d4ff;
        box-shadow: 0 0 25px rgba(0, 212, 255, 0.35);
    }

    .team-card-dark:hover .tc-avatar-frame img {
        filter: brightness(1) saturate(1);
    }

    /* Scan effect on avatar */
    .tc-scan {
        position: absolute;
        top: -5%;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.7), transparent);
        opacity: 0;
        transition: 0.3s;
    }

    .team-card-dark:hover .tc-scan {
        animation: img-scan 3s linear infinite;
        opacity: 1;
    }

    @keyframes img-scan {
        0% {
            top: -5%;
            opacity: 1
        }

        90% {
            top: 105%;
            opacity: 1
        }

        91%,
        100% {
            top: -5%;
            opacity: 0
        }
    }

    /* Rings */
    .tc-ring-1,
    .tc-ring-2 {
        position: absolute;
        border-radius: 50%;
        border: 1px solid rgba(0, 212, 255, 0.1);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        transition: 0.4s;
    }

    .tc-ring-1 {
        width: 138px;
        height: 138px;
    }

    .tc-ring-2 {
        width: 158px;
        height: 158px;
        border-style: dashed;
        animation: ring-spin 14s linear infinite;
    }

    @keyframes ring-spin {
        to {
            transform: translate(-50%, -50%) rotate(360deg)
        }
    }

    .team-card-dark:hover .tc-ring-1 {
        border-color: rgba(0, 212, 255, 0.25);
    }

    .team-card-dark:hover .tc-ring-2 {
        border-color: rgba(0, 212, 255, 0.15);
    }

    /* Status dot */
    .tc-status {
        position: absolute;
        bottom: 4px;
        right: 4px;
        width: 14px;
        height: 14px;
        background: #00ff88;
        border-radius: 50%;
        border: 2px solid rgba(6, 18, 32, 0.9);
        box-shadow: 0 0 8px #00ff88;
        animation: pulse-dot 2s infinite;
        z-index: 3;
    }

    /* Info */
    .tc-info h5 {
        font-family: 'Orbitron', monospace;
        font-size: 13px;
        font-weight: 700;
        color: #c8e8ff;
        margin-bottom: 5px;
        letter-spacing: 0.5px;
        transition: 0.3s;
    }

    .team-card-dark:hover .tc-info h5 {
        color: #fff;
    }

    .tc-role {
        display: block;
        font-family: 'Orbitron', monospace;
        font-size: 9px;
        letter-spacing: 2.5px;
        color: #00d4ff;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    .tc-info p {
        font-size: 12px;
        color: #4a7a9b;
        line-height: 1.65;
        margin-bottom: 14px;
    }

    /* Skills */
    .tc-skills {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
        margin-bottom: 16px;
    }

    .tc-skills span {
        font-size: 9px;
        color: #5a8a9f;
        background: rgba(0, 212, 255, 0.05);
        border: 1px solid rgba(0, 212, 255, 0.12);
        padding: 3px 10px;
        border-radius: 4px;
        font-family: 'Orbitron', monospace;
        letter-spacing: 0.5px;
        transition: 0.3s;
    }

    .team-card-dark:hover .tc-skills span {
        border-color: rgba(0, 212, 255, 0.25);
        color: #8ab4cc;
    }

    /* Divider */
    .tc-divider {
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.2), transparent);
        margin: 0 0 16px;
    }

    /* Social */
    .tc-social {
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    .tc-social-btn {
        width: 34px;
        height: 34px;
        background: rgba(0, 212, 255, 0.05);
        border: 1px solid rgba(0, 212, 255, 0.15);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #5a8a9f;
        font-size: 13px;
        text-decoration: none;
        transition: 0.3s;
    }

    .tc-social-btn:hover {
        background: rgba(0, 212, 255, 0.15);
        border-color: #00d4ff;
        color: #00d4ff;
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 212, 255, 0.2);
    }

    /* Hover glow */
    .tc-hover-glow {
        position: absolute;
        inset: 0;
        border-radius: 16px;
        pointer-events: none;
        opacity: 0;
        background: radial-gradient(ellipse at center bottom, rgba(0, 212, 255, 0.06), transparent 70%);
        transition: 0.4s;
    }

    .team-card-dark:hover .tc-hover-glow {
        opacity: 1;
    }
</style>


<!-- ====== CTA ====== -->
<section class="cta-section-dark my-5 py-5">
    <div class="container">
        <div class="cta-box-dark text-center">
            <div class="cta-corner cta-tl"></div>
            <div class="cta-corner cta-tr"></div>
            <div class="cta-corner cta-bl"></div>
            <div class="cta-corner cta-br"></div>
            <div class="cta-badge mb-4"><span class="badge-dot"></span><span>LET'S BUILD TOGETHER</span></div>
            <h2>Work With Our Expert Team</h2>
            <p>Our talented professionals are ready to bring your ideas to life with creativity, innovation, and technical excellence.</p>
            <div class="cta-buttons-dark">
                <a href="contact.php" class="btn-primary-tech"><span>Get Free Consultation</span><i class="bi bi-arrow-right"></i></a>
                <a href="tel:9999999999" class="btn-ghost-tech"><i class="bi bi-telephone me-2"></i><span>Call Now</span></a>
            </div>
        </div>
    </div>
</section>

<?php include 'includes/footer.php'; ?>