/* =========================================
   home.css - Homepage Specific Layouts
   ========================================= */

/* =========================================
   1. SECTION HEADERS & COMMON
   ========================================= */
.section-header { 
    margin-bottom: 60px; 
}
.section-tag { 
    color: var(--primary-blue); 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-size: 0.85rem; 
    display: block; 
    margin-bottom: 15px; 
    font-family: var(--font-heading); 
}
.section-header h2 { 
    font-size: clamp(2rem, 4vw, 3rem); 
    color: var(--text-dark); 
}
.section-header p { 
    color: var(--text-muted); 
    font-size: 1.1rem; 
    max-width: 600px; 
}

/* =========================================
   2. ANIMATED ISLAND HERO SECTION
   ========================================= */
.hero-section { 
    padding-top: 130px; 
    padding-bottom: 60px; 
    background-color: var(--bg-light); 
}
.hero-island {
    /* Animated Gradient Background */
    background: linear-gradient(270deg, var(--primary-blue), #123e6b, var(--accent-blue));
    background-size: 200% 200%;
    animation: GradientFlow 15s ease infinite;
    border-radius: 40px; 
    position: relative; 
    overflow: hidden; 
    padding: 80px 60px;
    box-shadow: var(--shadow-blue); 
    min-height: 80vh; 
    display: flex; 
    align-items: center;
}

@keyframes GradientFlow { 
    0% { background-position: 0% 50%; } 
    50% { background-position: 100% 50%; } 
    100% { background-position: 0% 50%; } 
}

/* Floating Blurred Orbs inside Hero */
.hero-anim-shape { 
    position: absolute; 
    border-radius: 50%; 
    filter: blur(80px); 
    z-index: 0; 
    /* Tell the browser to prepare the GPU for these specific changes */
    will-change: transform; 
    /* Added translate3d(0,0,0) to force hardware acceleration */
    transform: translate3d(0, 0, 0);
    animation: floatShape 20s infinite ease-in-out alternate; 
}
.shape-1 { 
    width: 500px; height: 500px; 
    background: rgba(63, 143, 216, 0.6); 
    top: -100px; left: -100px; 
}
.shape-2 { 
    width: 600px; height: 600px; 
    background: rgba(13, 45, 82, 0.8); 
    bottom: -150px; right: -100px; 
    animation-delay: -5s; 
}
.shape-3 { 
    width: 300px; height: 300px; 
    background: rgba(63, 143, 216, 0.4); 
    top: 30%; left: 40%; 
    animation-delay: -10s; 
}

/* Use translate3d for buttery smooth GPU rendering */
@keyframes floatShape { 
    0% { transform: translate3d(0, 0, 0) scale(1); } 
    100% { transform: translate3d(-30px, -20px, 0) scale(0.9); } 
}

/* Hero Visuals & Floating Image */
.hero-visuals { 
    position: relative; 
    z-index: 2; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.hero-main-img {
    width: 100%; 
    max-width: 500px; 
    height: 600px; 
    object-fit: cover; 
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 60px rgba(0,0,0,0.3); 
    border: 4px solid rgba(255, 255, 255, 0.1);
    will-change: transform; /* Prepare GPU */
    animation: gentleFloat 6s ease-in-out infinite alternate;
}

/* Use translate3d for the main image as well */
@keyframes gentleFloat { 
    0% { transform: translate3d(0, 0, 0); } 
    100% { transform: translate3d(0, -15px, 0); } 
}

/* Hero Text & Content */
.hero-content { 
    position: relative; 
    z-index: 2; 
}
.hero-badge { 
    display: inline-block; 
    padding: 8px 20px; 
    background: rgba(255, 255, 255, 0.15); 
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--bg-white); 
    font-family: var(--font-heading); 
    font-weight: 700; 
    font-size: 0.85rem; 
    letter-spacing: 1px;
    text-transform: uppercase; 
    border-radius: var(--radius-pill); 
    margin-bottom: 25px; 
    backdrop-filter: blur(10px); 
}
.hero-title { 
    color: var(--bg-white); 
    font-size: clamp(2.5rem, 5vw, 4.5rem); 
    line-height: 1.1; 
    margin-bottom: 25px; 
    font-weight: 900; 
}
.hero-title span { 
    color: #8AC4FF; /* Lighter accent for contrast */
} 
.hero-subtitle { 
    color: rgba(255, 255, 255, 0.9); 
    font-size: 1.15rem; 
    margin-bottom: 40px; 
    max-width: 500px; 
    line-height: 1.7; 
    font-weight: 400; 
}

/* Hero Visuals & Floating Image */
.hero-visuals { 
    position: relative; 
    z-index: 2; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.hero-main-img {
    width: 100%; 
    max-width: 500px; 
    height: 600px; 
    object-fit: cover; 
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 60px rgba(0,0,0,0.3); 
    border: 4px solid rgba(255, 255, 255, 0.1);
    animation: gentleFloat 6s ease-in-out infinite alternate;
}

@keyframes gentleFloat { 
    0% { transform: translateY(0); } 
    100% { transform: translateY(-15px); } 
}

/* =========================================
   3. ABOUT SECTION
   ========================================= */
.about-image-wrapper { 
    position: relative; 
    border-radius: var(--radius-lg); 
    overflow: hidden; 
    box-shadow: var(--shadow-lg); 
}
.about-image-wrapper img { 
    width: 100%; 
    height: 500px; 
    object-fit: cover; 
}
.about-experience {
    position: absolute; 
    bottom: 30px; 
    right: 30px; 
    background: var(--bg-white); 
    padding: 25px 35px;
    border-radius: var(--radius-md); 
    box-shadow: var(--shadow-lg); 
    text-align: center; 
    border-bottom: 4px solid var(--primary-blue);
}
.about-experience h3 { 
    color: var(--primary-blue); 
    font-size: 2.5rem; 
    margin: 0; 
}
.about-experience span { 
    font-weight: 700; 
    color: var(--text-dark); 
    text-transform: uppercase; 
    font-size: 0.85rem; 
}
.feature-list { 
    list-style: none; 
    padding: 0; 
    margin-top: 30px; 
}
.feature-list li { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    margin-bottom: 20px; 
    font-weight: 600; 
    color: var(--text-dark); 
    font-size: 1.05rem; 
}
.feature-list i { 
    color: var(--accent-blue); 
    font-size: 1.2rem; 
    background: rgba(63, 143, 216, 0.1); 
    padding: 10px; 
    border-radius: 50%; 
}

/* =========================================
   4. PRODUCTS GRID
   ========================================= */
.product-card {
    background: var(--bg-white); 
    border-radius: var(--radius-lg); 
    overflow: hidden;
    box-shadow: var(--shadow-sm); 
    transition: all 0.4s ease; 
    height: 100%;
    border: 1px solid rgba(0,0,0,0.03); 
    display: flex; 
    flex-direction: column; 
    text-decoration: none;
}
.product-card:hover { 
    transform: translateY(-10px); 
    box-shadow: var(--shadow-lg); 
    border-color: rgba(46, 111, 182, 0.2); 
}
.product-img { 
    height: 240px; 
    width: 100%; 
    overflow: hidden; 
}
.product-img img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: transform 0.6s ease; 
}
.product-card:hover .product-img img { 
    transform: scale(1.08); 
}
.product-content { 
    padding: 30px; 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
}
.product-content h4 { 
    font-size: 1.3rem; 
    margin-bottom: 12px; 
    color: var(--text-dark); 
    line-height: 1.3; 
}
.product-content p { 
    color: var(--text-muted); 
    font-size: 0.95rem; 
    margin-bottom: 25px; 
    line-height: 1.6; 
    flex-grow: 1; 
}
.product-link {
    margin-top: auto; 
    color: var(--primary-blue); 
    font-family: var(--font-heading); 
    font-weight: 700;
    text-transform: uppercase; 
    font-size: 0.85rem; 
    letter-spacing: 1px; 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    transition: 0.3s;
}
.product-card:hover .product-link { 
    color: var(--accent-blue); 
}
.product-card:hover .product-link i { 
    transform: translateX(5px); 
}

/* =========================================
   5. HORIZONTAL PROCESS TIMELINE
   ========================================= */
.timeline-wrapper { 
    position: relative; 
    padding-top: 20px; 
}
/* The connecting horizontal line (Desktop only) */
.timeline-line {
    position: absolute; 
    top: 60px; 
    left: 10%; 
    width: 80%; 
    height: 3px;
    background: linear-gradient(90deg, rgba(46,111,182,0.1), var(--primary-blue), rgba(46,111,182,0.1));
    z-index: 1;
}

.timeline-step { 
    position: relative; 
    z-index: 2; 
    text-align: center; 
    height: 100%; 
    padding: 0 15px; 
}

.timeline-icon-wrap {
    width: 80px; 
    height: 80px; 
    background: var(--bg-white);
    border: 3px solid var(--primary-blue); 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    margin: 0 auto 20px; 
    font-size: 1.5rem; 
    color: var(--primary-blue);
    box-shadow: 0 0 0 8px var(--bg-soft-blue); 
    transition: all 0.4s ease;
}
.timeline-step:hover .timeline-icon-wrap {
    background: var(--primary-blue); 
    color: var(--bg-white); 
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(46, 111, 182, 0.2);
}

.timeline-step .step-badge {
    display: inline-block; 
    font-family: var(--font-heading); 
    font-weight: 800;
    font-size: 0.8rem; 
    color: var(--accent-blue); 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    margin-bottom: 10px;
}
.timeline-step h4 { 
    font-size: 1.2rem; 
    color: var(--text-dark); 
    margin-bottom: 10px; 
}
.timeline-step p { 
    font-size: 0.95rem; 
    color: var(--text-muted); 
    line-height: 1.5; 
    margin: 0; 
}

/* =========================================
   6. DEPLOYMENT SECTORS
   ========================================= */
.sector-box {
    background: var(--bg-white); 
    border-radius: 12px; 
    padding: 25px; 
    display: flex; 
    align-items: center; 
    gap: 20px;
    transition: 0.3s; 
    box-shadow: var(--shadow-sm); 
    border: 1px solid rgba(0,0,0,0.02); 
    cursor: pointer; 
    height: 100%;
}
.sector-box:hover { 
    border-color: var(--accent-blue); 
    box-shadow: var(--shadow-lg); 
    transform: translateX(5px); 
}
.sector-icon {
    width: 60px; 
    height: 60px; 
    background: rgba(46, 111, 182, 0.08); 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: 0.3s; 
    flex-shrink: 0;
}
.sector-box:hover .sector-icon { 
    background: var(--primary-blue); 
    color: var(--bg-white); 
}
.sector-icon i { 
    font-size: 1.5rem; 
    color: var(--primary-blue); 
    transition: 0.3s; 
}
.sector-box:hover .sector-icon i { 
    color: var(--bg-white); 
}
.sector-box h5 { 
    margin: 0; 
    font-size: 1.05rem; 
    color: var(--text-dark); 
    font-weight: 700; 
    line-height: 1.3; 
}

/* =========================================
   7. ENHANCED BENTO CONTACT SECTION
   ========================================= */
.contact-bento {
    background: var(--bg-white);
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(46, 111, 182, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Left Panel: Info */
.info-side {
    background: linear-gradient(145deg, #0A192F 0%, #1A4D85 100%);
    position: relative;
    overflow: hidden;
    color: var(--bg-white);
}
.info-content {
    position: relative;
    z-index: 2;
    padding: 60px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.info-content h3 { 
    color: var(--bg-white); 
    font-family: var(--font-heading); 
    font-size: 2.2rem; 
    font-weight: 800; 
}

.tech-badge {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 50px;
    display: flex; 
    align-items: center; 
    gap: 8px;
    font-size: 0.85rem; 
    font-weight: 600; 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
}

.contact-methods { margin-top: auto; }
.method-item {
    display: flex; 
    align-items: center; 
    gap: 20px; 
    margin-bottom: 25px;
}
.method-item:last-child { margin-bottom: 0; }

.method-icon {
    width: 50px; 
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: var(--accent-blue); 
    font-size: 1.2rem;
}
.method-item h6 { 
    margin: 0; 
    font-size: 0.85rem; 
    color: rgba(255, 255, 255, 0.6); 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}
.method-item p { 
    margin: 0; 
    font-size: 1.1rem; 
    font-weight: 700; 
    color: var(--bg-white); 
}

/* Decorative Background Elements */
.info-bg-circles { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    z-index: 1; 
    overflow: hidden; 
    pointer-events: none; 
}
.circle-1 {
    position: absolute; 
    bottom: -100px; 
    right: -100px; 
    width: 350px; 
    height: 350px;
    border: 2px solid rgba(63, 143, 216, 0.2); 
    border-radius: 50%;
}
.circle-2 {
    position: absolute; 
    bottom: -50px; 
    right: -50px; 
    width: 250px; 
    height: 250px;
    border: 2px solid rgba(63, 143, 216, 0.4); 
    border-radius: 50%;
}

/* Right Panel: Form */
.form-side { 
    padding: 60px; 
    background: var(--bg-white); 
}

.input-group-modern {
    position: relative;
    background: var(--bg-light);
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    display: flex; 
    align-items: center;
    transition: all 0.3s ease;
}
.input-group-modern:focus-within {
    background: var(--bg-white);
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 4px rgba(46, 111, 182, 0.1);
}
.input-icon {
    padding-left: 20px; 
    color: var(--text-muted); 
    font-size: 1.1rem;
    transition: 0.3s;
}
.input-group-modern:focus-within .input-icon { 
    color: var(--primary-blue); 
}

.form-control-modern {
    border: none; 
    background: transparent; 
    width: 100%; 
    padding: 20px 20px 20px 15px;
    color: var(--text-dark); 
    font-family: var(--font-body); 
    font-weight: 500; 
    font-size: 1rem;
    outline: none; 
    border-radius: 16px;
}
.form-control-modern::placeholder { 
    color: #A0AEC0; 
    font-weight: 400; 
}
.form-control-modern:focus { 
    box-shadow: none; 
    outline: none; 
}

textarea.form-control-modern { 
    resize: vertical; 
    min-height: 120px; 
}

/* =========================================
   8. COMPREHENSIVE RESPONSIVE OVERRIDES
   ========================================= */

/* --- TABLETS & SMALL DESKTOPS (991px and below) --- */
@media (max-width: 991px) {
    /* Hero Adjustments */
    .hero-island { 
        padding: 50px 40px; 
        flex-direction: column; 
        text-align: center; 
        border-radius: 24px;
        min-height: auto;
    }
    .hero-title { font-size: 2.8rem; }
    .hero-subtitle { margin: 0 auto 30px auto; }
    .hero-main-img { 
        height: 400px; 
        margin-top: 40px; 
    }
    
    /* Timeline Adjustments */
    .timeline-line { display: none; } /* Hide line on tablet/mobile */
    .timeline-step { margin-bottom: 40px; } /* Add vertical spacing */
    
    /* Contact Adjustments */
    .contact-bento { border-radius: 24px; }
    .info-side, .form-side { padding: 40px 30px; }
    .info-content { padding: 0; }
}

/* --- MOBILE PHONES (768px and below) --- */
@media (max-width: 768px) {
    /* Section Headers */
    .section-header { margin-bottom: 40px; text-align: center; }
    .section-header p { margin: 0 auto; }

    /* Hero Adjustments */
    .hero-section { padding-top: 100px; }
    .hero-island { padding: 40px 20px; }
    .hero-main-img { height: 300px; }

    /* About Section */
    .about-image-wrapper img { height: 350px; }
    .about-experience {
        position: relative; /* Remove absolute positioning */
        bottom: auto;
        right: auto;
        margin: -40px 20px 0 20px; /* Overlap slightly, pull inwards */
        padding: 20px;
    }

    /* Products Grid */
    .product-content { padding: 20px; }
    
    /* Deployment Sectors */
    .sector-box { flex-direction: column; text-align: center; gap: 15px; }

    /* Contact Form Side */
    .form-side { padding: 30px 20px; }
    .info-side { padding: 40px 20px; }
    .info-content h3 { font-size: 1.8rem; }
    .tech-badge { flex-direction: column; text-align: center; gap: 4px;}
}

/* --- EXTRA SMALL DEVICES (480px and below) --- */
@media (max-width: 480px) {
    .hero-title { font-size: 2.2rem; }
    .about-experience h3 { font-size: 2rem; }
    .method-item { flex-direction: column; text-align: center; }
    .method-icon { margin: 0 auto; }
}