* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    line-height: 1.6; 
    color: #1A1A1A; 
    overflow-x: hidden; 
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* HEADER */
header { 
    background: rgba(255,255,255,0.98); 
    padding: 20px 0; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
    position: sticky; 
    top: 0; 
    z-index: 100; 
}
nav { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.logo { 
    font-size: 36px; 
    font-weight: bold; 
    background: linear-gradient(45deg, #0066CC, #00A651); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    text-decoration: none;
}
nav ul { display: flex; list-style: none; gap: 30px; flex-wrap: wrap; }
nav a { 
    text-decoration: none; 
    color: #1A1A1A; 
    font-weight: 500; 
    font-size: 16px; 
    transition: color 0.3s; 
}
nav a:hover { color: #0066CC; }

/* HERO */
.hero { 
    height: 90vh; 
    background: 
        linear-gradient(135deg, rgba(0,102,204,0.4) 0%, rgba(0,166,81,0.3) 30%, rgba(0,153,255,0.3) 70%, rgba(0,204,255,0.3) 100%),
        url('https://user-gen-media-assets.s3.amazonaws.com/seedream_images/14b0f2c3-1846-44c5-b988-5d04e85e8a64.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    color: white;
    position: relative;
}
.hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.15);
    z-index: 1;
}
.hero-content { position: relative; z-index: 2; }
.hero-content h1 { 
    font-size: clamp(3rem, 8vw, 5rem); 
    margin-bottom: 15px; 
    text-shadow: 0 0 40px rgba(0,0,0,0.9), 0 2px 15px rgba(0,0,0,0.8), 0 4px 25px rgba(0,0,0,0.7);
    font-weight: 700;
}
.hero-content .tagline { 
    font-size: clamp(1.3rem, 4vw, 2.2rem); 
    font-weight: 400; 
    margin-bottom: 15px; 
    text-shadow: 0 2px 15px rgba(0,0,0,0.9), 0 4px 25px rgba(0,0,0,0.8);
}
.hero-content .since { 
    font-size: 1.2rem; 
    opacity: 0.98; 
    margin-bottom: 40px; 
    text-shadow: 0 2px 15px rgba(0,0,0,0.9), 0 4px 25px rgba(0,0,0,0.8);
}
.hero-btn { 
    padding: 18px 40px; 
    font-size: 18px; 
    border: 2px solid white; 
    background: rgba(255,255,255,0.2); 
    color: white; 
    border-radius: 30px; 
    text-decoration: none; 
    display: inline-block; 
    margin: 10px; 
    transition: all 0.3s; 
    backdrop-filter: blur(10px); 
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
.hero-btn:hover { 
    background: rgba(255,255,255,0.4); 
    transform: translateY(-3px); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.4); 
}

/* SECTIONS */
.section { padding: 80px 20px; }
.section h2 { text-align: center; font-size: 42px; margin-bottom: 20px; color: #0066CC; }
.section h3 { font-size: 32px; color: #0066CC; margin-bottom: 20px; }
.section-subtitle { 
    text-align: center; 
    font-size: 20px; 
    color: #666; 
    margin-bottom: 60px; 
    max-width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
}

/* INDUSTRIES */
.industries-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.industry-card { 
    background: white; 
    padding: 45px 35px; 
    border-radius: 15px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
    text-align: center; 
    transition: all 0.3s; 
    border-top: 5px solid #0066CC; 
    text-decoration: none;
    color: inherit;
    display: block;
}
.industry-card:hover { transform: translateY(-8px); box-shadow: 0 15px 40px rgba(0,0,0,0.15); }
.industry-card .icon { font-size: 56px; margin-bottom: 20px; }
.industry-card h3 { font-size: 26px; color: #0066CC; margin-bottom: 15px; }
.industry-card p { font-size: 16px; color: #555; line-height: 1.8; }

/* BENEFITS */
.benefits { background: linear-gradient(135deg, #e3f2fd, #f0f8ff); }
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.benefit-item { text-align: center; padding: 30px 20px; }
.benefit-item .icon { font-size: 48px; margin-bottom: 15px; }
.benefit-item h3 { font-size: 22px; color: #0066CC; margin-bottom: 10px; }
.benefit-item p { font-size: 15px; color: #555; }

/* REFERENCES */
.references { background: #f8f9fa; }
.ref-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 50px; }
.ref-card { 
    background: white; 
    padding: 50px; 
    border-radius: 20px; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.1); 
    text-align: center; 
    transition: transform 0.3s; 
}
.ref-card:hover { transform: translateY(-10px); }
.ref-card .logo-placeholder { font-size: 48px; margin-bottom: 20px; }
.ref-card h3 { font-size: 32px; color: #00A651; margin-bottom: 15px; }
.ref-card .location { font-size: 22px; color: #0066CC; font-weight: bold; margin-bottom: 20px; }
.ref-card p { font-size: 17px; color: #555; margin-bottom: 25px; line-height: 1.7; }
.ref-card a { 
    display: inline-block; 
    padding: 14px 30px; 
    background: #0066CC; 
    color: white; 
    text-decoration: none; 
    border-radius: 25px; 
    margin: 8px; 
    transition: all 0.3s; 
    font-weight: 600; 
}
.ref-card a:hover { background: #00A651; transform: scale(1.05); }

/* PROCESS */
.process { background: white; }
.process-slide { 
    background: #f8f9fa; 
    margin: 30px 0; 
    padding: 40px; 
    border-radius: 15px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 40px; 
    align-items: center;
}
.process-slide:nth-child(even) { direction: rtl; }
.process-slide:nth-child(even) > * { direction: ltr; }
.process-slide img { 
    width: 100%; 
    max-height: 400px; 
    object-fit: contain; 
    border-radius: 10px; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    cursor: zoom-in; 
    transition: all 0.3s;
}
.process-slide img:hover { transform: scale(1.02); }
.process-content { padding: 20px; }
.process-content .number { 
    display: inline-block; 
    width: 50px; 
    height: 50px; 
    background: #0066CC; 
    color: white; 
    border-radius: 50%; 
    font-size: 24px; 
    font-weight: bold; 
    text-align: center; 
    line-height: 50px; 
    margin-bottom: 15px;
}
.process-content h3 { font-size: 28px; color: #0066CC; margin-bottom: 15px; }
.process-content p { font-size: 16px; color: #555; line-height: 1.8; }

/* LIGHTBOX */
.lightbox { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.95); 
    z-index: 9999; 
    cursor: zoom-out;
    justify-content: center; 
    align-items: center;
}
.lightbox.active { display: flex; }
.lightbox img { max-width: 95%; max-height: 95vh; object-fit: contain; border-radius: 10px; }
.lightbox-close { 
    position: absolute; 
    top: 30px; 
    right: 40px; 
    color: white; 
    font-size: 50px; 
    cursor: pointer; 
    transition: all 0.3s;
}
.lightbox-close:hover { transform: scale(1.2); color: #FFD700; }

/* CONTACT */
.contact { 
    background: linear-gradient(135deg, #0066CC, #0099FF); 
    color: white; 
    padding: 100px 20px; 
    text-align: center; 
}
.contact h2 { color: white; font-size: 42px; margin-bottom: 30px; }
.contact-info { font-size: 24px; margin: 20px 0; }
.contact-info a { color: #FFD700; text-decoration: none; font-weight: bold; }

/* FOOTER */
footer { background: #1A1A1A; color: #999; padding: 40px 20px; text-align: center; font-size: 14px; }

/* RESPONSIVE */
@media (max-width: 768px) {
    .hero { background-attachment: scroll; }
    .process-slide { grid-template-columns: 1fr; }
    .process-slide:nth-child(even) { direction: ltr; }
    nav ul { gap: 15px; }
}