:root{--primary:#2563eb;--dark:#0f172a;--muted:#64748b;--soft:#eff6ff}html{scroll-behavior:smooth}body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--dark);overflow-x:hidden}.navbar{padding:14px 0}.navbar-brand{font-size:1.35rem}.brand-mark{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:10px;background:var(--primary);color:#fff;margin-right:7px}.nav-link{font-weight:500;color:#475569!important}.nav-link:hover,.nav-link.active{color:var(--primary)!important}.btn-primary{background:var(--primary);border-color:var(--primary)}.hero-section{background:radial-gradient(circle at 80% 25%,#dbeafe 0,rgba(239,246,255,.65) 20%,transparent 42%),linear-gradient(135deg,#fff 45%,#f8fbff);position:relative}.bg-soft-primary{background:var(--soft)}.text-primary{color:var(--primary)!important}.hero-section h1{letter-spacing:-2px}.stat h3{font-weight:800;margin:0}.stat p{margin:2px 0;color:var(--muted);font-size:.9rem}.hero-visual{min-height:520px;position:relative;display:flex;align-items:center;justify-content:center}.dashboard-card{background:#fff;border:1px solid #e2e8f0;border-radius:24px;padding:28px;width:90%;max-width:520px;box-shadow:0 25px 70px rgba(15,23,42,.12)}.chart{height:210px;display:flex;align-items:end;gap:13px;padding:20px 8px 0}.chart span{flex:1;border-radius:9px 9px 3px 3px;background:linear-gradient(180deg,#60a5fa,#2563eb)}.floating-card{position:absolute;background:#fff;padding:14px 17px;border-radius:15px;display:flex;gap:12px;align-items:center;box-shadow:0 15px 40px rgba(15,23,42,.14);z-index:2}.floating-card i{font-size:1.5rem;color:var(--primary)}.floating-card strong,.floating-card small{display:block}.floating-card small{color:var(--muted);margin-top:2px}.card-one{top:70px;left:0}.card-two{bottom:75px;right:0}.section-padding{padding:100px 0}.section-label{font-size:.78rem;font-weight:800;letter-spacing:2px;color:var(--primary)}.section-title{font-size:2.5rem;font-weight:800;letter-spacing:-1px;margin:10px 0 20px}.section-heading{max-width:650px}.about-image{height:480px;border-radius:28px;background:linear-gradient(145deg,#dbeafe,#eff6ff 55%,#bfdbfe);position:relative;overflow:hidden}.abstract-shape{position:absolute;width:330px;height:330px;right:35px;top:70px;border-radius:50%;background:#2563eb;display:flex;align-items:center;justify-content:center;box-shadow:0 25px 50px rgba(37,99,235,.3)}.abstract-shape:before,.abstract-shape:after{content:"";position:absolute;border:2px solid rgba(255,255,255,.4);border-radius:50%}.abstract-shape:before{width:260px;height:260px}.abstract-shape:after{width:180px;height:180px}.abstract-shape i{font-size:6rem;color:#fff;z-index:1}.experience-badge{position:absolute;z-index:2;left:25px;bottom:30px;background:#fff;padding:18px 22px;border-radius:18px;box-shadow:0 15px 35px rgba(15,23,42,.15);display:flex;gap:12px;align-items:center}.experience-badge strong{font-size:2rem;color:var(--primary)}.experience-badge span{font-size:.85rem;color:var(--muted)}.feature{display:flex;gap:12px}.feature>i{font-size:1.6rem;color:var(--primary)}.feature h6{margin:0 0 5px}.feature p{font-size:.9rem;color:var(--muted);margin:0}.service-card,.why-card,.team-card,.project-card{height:100%;background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:28px;transition:.25s}.service-card:hover,.why-card:hover,.team-card:hover,.project-card:hover{transform:translateY(-6px);box-shadow:0 20px 45px rgba(15,23,42,.1)}.service-card>i{display:inline-flex;width:55px;height:55px;align-items:center;justify-content:center;border-radius:15px;background:var(--soft);color:var(--primary);font-size:1.5rem;margin-bottom:20px}.service-card h5{font-weight:700}.service-card p,.why-card p{color:var(--muted);line-height:1.7}.service-card a{color:var(--primary);font-weight:700;text-decoration:none}.why-card{padding:25px}.number{font-size:.8rem;color:var(--primary);font-weight:800;margin-bottom:25px}.project-card{padding:0;overflow:hidden}.project-image{height:220px;display:flex;align-items:center;justify-content:center;color:#fff}.project-image i{font-size:5rem}.gradient-one{background:linear-gradient(135deg,#172554,#2563eb)}.gradient-two{background:linear-gradient(135deg,#164e63,#06b6d4)}.gradient-three{background:linear-gradient(135deg,#3b0764,#9333ea)}.project-card .p-4 span{font-size:.78rem;color:var(--primary);font-weight:700}.project-card p{color:var(--muted)}.team-card{text-align:center}.avatar,.small-avatar{width:95px;height:95px;border-radius:50%;background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:var(--primary);font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:1.6rem}.team-card p{color:var(--muted)}.social{display:flex;justify-content:center;gap:15px;color:var(--primary)}.testimonial-section{padding:90px 0;background:#f8fafc}.testimonial{text-align:center;background:#fff;border:1px solid #e2e8f0;border-radius:25px;padding:45px}.quote{font-size:5rem;color:#bfdbfe;line-height:.6}.testimonial p{font-size:1.25rem;line-height:1.8;color:#334155}.small-avatar{width:45px;height:45px;font-size:.8rem;margin:0}.contact-box{background:linear-gradient(135deg,#f8fafc,#eff6ff);border:1px solid #dbeafe;border-radius:30px;padding:55px}.contact-item{display:flex;gap:15px;margin-top:22px}.contact-item>i{font-size:1.3rem;color:var(--primary)}.contact-item small,.contact-item strong{display:block}.contact-item small{color:var(--muted);margin-bottom:3px}.form-control{padding:13px 15px;border-radius:12px;border-color:#cbd5e1}.contact-form label{font-size:.85rem;font-weight:600;margin-bottom:7px}.footer{background:#0f172a;color:#fff;padding:60px 0 25px}.footer a{display:block;color:#94a3b8;text-decoration:none;margin:10px 0}.footer a:hover{color:#fff}.footer h6{margin-bottom:18px}.footer-social{display:flex;gap:15px;font-size:1.2rem;color:#94a3b8}@media(max-width:991px){.hero-section h1{font-size:3rem}.hero-visual{min-height:430px}.section-padding{padding:75px 0}}@media(max-width:575px){.hero-section h1{font-size:2.45rem}.hero-visual{min-height:360px}.dashboard-card{width:100%;padding:18px}.card-one{left:-5px;top:25px}.card-two{right:-5px;bottom:25px}.about-image{height:360px}.abstract-shape{width:230px;height:230px;right:25px;top:55px}.abstract-shape i{font-size:4rem}.section-title{font-size:2rem}.contact-box{padding:30px 20px}}

/* =========================================
   SERVICE CARDS
========================================= */

.service-card {
    position: relative;
    height: 100%;
    padding: 35px 30px;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    transition: all 0.35s ease;
    overflow: hidden;
}

.service-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 0;
    background: #ff641f;
    transition: height 0.35s ease;
}

.service-card:hover {
    transform: translateY(-8px);
    border-color: #ff641f;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.10);
}

.service-card:hover::before {
    height: 100%;
}

.service-card > i:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin-bottom: 25px;

    border-radius: 12px;

    background: rgba(255, 100, 31, 0.10);
    color: #ff641f;

    font-size: 27px;

    transition: all 0.35s ease;
}

.service-card:hover > i:first-child {
    background: #ff641f;
    color: #111111;
    transform: scale(1.08);
}

.service-card h5 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 14px;
    color: #111111;
}

.service-card p {
    color: #70757a;
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 25px;
}

.service-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #111111;

    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;

    transition: all 0.25s ease;
}

.service-card a i {
    color: #ff641f;
    transition: transform 0.25s ease;
}

.service-card a:hover {
    color: #ff641f;
}

.service-card a:hover i {
    transform: translateX(5px);
}


/* =========================================
   ELECTION TECHNOLOGY FEATURE CARD
========================================= */

.service-card-featured {
    background: #111111;
    border-color: #111111;
    color: #ffffff;
}

.service-card-featured::before {
    background: #ff641f;
}

.service-card-featured h5 {
    color: #ffffff;
}

.service-card-featured p {
    color: #a5a9ad;
}

.service-card-featured a {
    color: #ffffff;
}

.service-card-featured > i:first-child {
    background: rgba(255, 100, 31, 0.15);
    color: #ff641f;
}

.service-card-featured:hover {
    background: #171717;
    border-color: #ff641f;
}

.service-badge {
    display: inline-block;

    position: absolute;
    top: 20px;
    right: 20px;

    padding: 6px 9px;

    background: #ff641f;
    color: #111111;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: 0.08em;
    border-radius: 3px;
}

/* ==========================================
   PROJECT CARDS
========================================== */

.project-card {
    height: 100%;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.35s ease;
}

.project-card:hover {
    transform: translateY(-8px);
    border-color: #ff641f;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.10);
}


/* Project Image */

.project-image {
    height: 235px;
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}


/* Project Number */

.project-number {
    position: absolute;
    top: 18px;
    right: 20px;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;

    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
}


/* Project Icon */

.project-icon {
    width: 95px;
    height: 95px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 22px;

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

    backdrop-filter: blur(10px);

    color: #ffffff;

    font-size: 42px;

    transition: all 0.4s ease;
}

.project-card:hover .project-icon {
    transform: scale(1.12) rotate(-5deg);
}


/* ==========================================
   PROJECT BACKGROUNDS
========================================== */

.gradient-one {
    background:
        radial-gradient(circle at 20% 20%, #ff8a4d, transparent 35%),
        linear-gradient(135deg, #101112, #25282b);
}


.gradient-two {
    background:
        radial-gradient(circle at 80% 20%, #ff8a4d, transparent 35%),
        linear-gradient(135deg, #111111, #303030);
}


.gradient-three {
    background:
        radial-gradient(circle at 50% 50%, rgba(255,100,31,.8), transparent 30%),
        linear-gradient(135deg, #08090a, #202326);
}


/* Election */

.gradient-election {
    background:
        radial-gradient(circle at 70% 30%, #ff8a4d, transparent 30%),
        linear-gradient(135deg, #070707, #242424);
}


/* Voter */

.gradient-voter {
    background:
        radial-gradient(circle at 20% 70%, #ff641f, transparent 30%),
        linear-gradient(135deg, #101112, #292929);
}


/* OCR */

.gradient-ocr {
    background:
        radial-gradient(circle at 80% 80%, #ff8a4d, transparent 30%),
        linear-gradient(135deg, #0a0b0c, #292b2d);
}


/* ==========================================
   ELECTION BADGE
========================================== */

.project-overlay-label {
    position: absolute;
    bottom: 18px;
    left: 18px;

    background: #ff641f;
    color: #111111;

    padding: 7px 10px;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: .1em;

    border-radius: 3px;
}


/* ==========================================
   PROJECT CONTENT
========================================== */

.project-category {
    display: inline-block;

    color: #ff641f;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .12em;

    margin-bottom: 10px;
}

.project-card h5 {
    font-size: 20px;
    font-weight: 700;

    margin-bottom: 12px;

    color: #111111;
}

.project-card p {
    color: #73787c;

    font-size: 12px;
    line-height: 1.8;

    margin-bottom: 22px;
}


/* ==========================================
   PROJECT LINK
========================================== */

.project-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #111111;

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .06em;

    transition: all .25s ease;
}

.project-link i {
    color: #ff641f;

    transition: transform .25s ease;
}

.project-link:hover {
    color: #ff641f;
}

.project-link:hover i {
    transform: translateX(5px);
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

    .project-image {
        height: 210px;
    }

    .project-icon {
        width: 80px;
        height: 80px;
        font-size: 34px;
    }

}

/* ==========================================
   TEAM / LEADERSHIP
========================================== */

.team-card {
    position: relative;

    height: 100%;

    padding: 30px;

    background: #ffffff;

    border: 1px solid #e5e5e5;

    border-radius: 16px;

    text-align: center;

    overflow: hidden;

    transition: all 0.35s ease;
}


/* Orange top line */

.team-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: #ff641f;

    transform: scaleX(0);

    transform-origin: left;

    transition: transform 0.35s ease;
}


.team-card:hover {
    transform: translateY(-8px);

    border-color: #ff641f;

    box-shadow:
        0 20px 45px rgba(0,0,0,.10);
}


.team-card:hover::before {
    transform: scaleX(1);
}


/* ==========================================
   AVATAR
========================================== */

.team-avatar-wrapper {
    position: relative;

    display: inline-block;

    margin-bottom: 22px;
}


.avatar {
    width: 105px;
    height: 105px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #111111,
            #292929
        );

    color: #ffffff;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size: 27px;

    font-weight: 800;

    border: 5px solid #f1f1f1;

    box-shadow:
        0 10px 30px rgba(0,0,0,.12);

    transition: all .35s ease;
}


.team-card:hover .avatar {
    background: #ff641f;

    color: #111111;

    transform: scale(1.05);
}


/* Online / active indicator */

.team-status {
    position: absolute;

    right: 7px;
    bottom: 8px;

    width: 15px;
    height: 15px;

    background: #ff641f;

    border: 3px solid #ffffff;

    border-radius: 50%;
}


/* ==========================================
   TEAM CONTENT
========================================== */

.team-role {
    display: block;

    margin-bottom: 8px;

    color: #ff641f;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: .13em;
}


.team-content h5 {
    margin-bottom: 6px;

    color: #111111;

    font-size: 19px;

    font-weight: 700;
}


.team-content p {
    margin-bottom: 20px;

    color: #777d82;

    font-size: 11px;
}


/* ==========================================
   SOCIAL ICONS
========================================== */

.social {
    display: flex;

    justify-content: center;

    gap: 8px;
}


.social a {
    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid #dedede;

    border-radius: 50%;

    color: #555b60;

    font-size: 13px;

    transition: all .25s ease;
}


.social a:hover {
    background: #ff641f;

    border-color: #ff641f;

    color: #111111;

    transform: translateY(-3px);
}


/* ==========================================
   FEATURED AI CARD
========================================== */

.team-card-featured {
    background: #111111;

    border-color: #111111;
}


.team-card-featured .avatar {
    background: #ff641f;

    color: #111111;

    border-color: #252525;
}


.team-card-featured .team-content h5 {
    color: #ffffff;
}


.team-card-featured .team-content p {
    color: #858b90;
}


.team-card-featured .social a {
    border-color: #333333;

    color: #999999;
}


.team-card-featured .social a:hover {
    background: #ff641f;

    color: #111111;

    border-color: #ff641f;
}


/* ==========================================
   LEADERSHIP NOTE
========================================== */

.leadership-note {

    display: flex;

    align-items: center;

    gap: 22px;

    margin-top: 55px;

    padding: 28px 32px;

    background: #111111;

    border-radius: 14px;

    color: #ffffff;
}


.leadership-icon {

    min-width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #ff641f;

    color: #111111;

    border-radius: 12px;

    font-size: 24px;
}


.leadership-note h5 {

    margin: 0 0 7px;

    font-size: 18px;

    font-weight: 700;
}


.leadership-note p {

    margin: 0;

    max-width: 750px;

    color: #858b90;

    font-size: 11px;

    line-height: 1.7;
}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 767px) {

    .team-card {
        padding: 28px 20px;
    }

    .avatar {
        width: 90px;
        height: 90px;

        font-size: 23px;
    }

    .leadership-note {

        flex-direction: column;

        text-align: center;

        padding: 28px 20px;
    }

}