/* ==========================================
   BELOW-FOLD CSS - Loads Async After Hero
   All non-critical styles for sections below hero
   ========================================== */

/* --- UTILITY CLASSES --- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section { padding: 100px 0; }
.section-header { text-align: center; margin-bottom: 60px; }
.section-title { font-size: 2.5rem; font-weight: 900; margin-bottom: 20px; line-height: 1.2; }
.bg-black { background: #000; }
.dark-bg { background: #050505; }

/* --- TECH MARQUEE --- */
.tech-marquee { background: #0a0a0a; border-top: 1px solid #1a1a1a; border-bottom: 1px solid #1a1a1a; padding: 30px 0; overflow: hidden; position: relative; }
.tech-marquee .track { display: flex; animation: marquee 20s linear infinite; white-space: nowrap; }
.tech-marquee .track span { display: inline-block; padding: 0 40px; font-size: 1.1rem; font-weight: 700; color: #00f2ff; letter-spacing: 2px; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* --- TEXT SECTIONS --- */
.text-section { padding: 100px 0; background: #080808; }
.text-content-box { max-width: 900px; margin: 0 auto; text-align: left; }
.text-content-box p { font-size: 1.15rem; color: #ddd; line-height: 1.8; margin-bottom: 25px; }
.text-content-box strong { color: #fff; font-weight: 600; }
.text-content-box h3 { font-size: 1.8rem; color: #fff; margin-top: 40px; margin-bottom: 20px; }
.text-highlight-box { background: rgba(0,242,255,.05); border-left: 4px solid #00f2ff; padding: 30px; border-radius: 0 20px 20px 0; margin: 40px 0; }

/* --- GRIDS --- */
.expert-grid-container { display: grid; gap: 30px; width: 100%; grid-template-columns: 1fr; }
@media (min-width: 768px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.niche-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* --- SERVICE CARDS --- */
.core-service-card { width: 100%; background: #0a0a0a; border: 1px solid rgba(255,255,255,.1); border-radius: 25px; transition: all .3s ease; position: relative; padding: 40px 30px; text-align: left; display: flex; flex-direction: column; min-height: 380px; }
.core-service-card:hover { border-color: #00f2ff; transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,242,255,.1); }
.core-service-card h3 { color: #fff; font-size: 1.5rem; margin-bottom: 15px; }
.core-service-card p { color: #aaa; font-size: 1.05rem; line-height: 1.6; flex-grow: 1; }
.new-badge { position: absolute; top: 20px; right: 20px; background: #00f2ff; color: #000; font-size: .8rem; font-weight: bold; padding: 5px 10px; border-radius: 20px; animation: pulse-badge 2s infinite; }
@keyframes pulse-badge { 0% { box-shadow: 0 0 0 0 rgba(0,242,255,.7); } 70% { box-shadow: 0 0 0 10px rgba(0,242,255,0); } 100% { box-shadow: 0 0 0 0 rgba(0,242,255,0); } }

/* --- ICON BOXES --- */
.icon-box { font-size: 1.8rem; margin-bottom: 25px; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; border-radius: 15px; flex-shrink: 0; }
.icon-blue { background: rgba(0,119,255,.1); color: #0077ff; }
.icon-purple { background: rgba(132,0,255,.1); color: #8400ff; }
.icon-green { background: rgba(0,255,136,.1); color: #00ff88; }
.icon-orange { background: rgba(255,102,0,.1); color: #ff6600; }
.icon-cyan { background: rgba(0,242,255,.1); color: #00f2ff; }

/* --- NICHE CARDS --- */
.niche-card { height: 350px; overflow: hidden; background-size: cover; background-position: center; border-radius: 25px; position: relative; }
.niche-card-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,.9), transparent 60%); display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; }
.niche-card h3 { color: #fff; font-size: 1.4rem; margin-top: 10px; }
.niche-card svg { font-size: 2rem; color: #00f2ff; margin-bottom: 10px; }

/* --- METRICS --- */
.metric-card { background: rgba(255,255,255,.03); border: 1px solid #222; border-radius: 15px; padding: 30px; transition: .3s; }
.metric-card:hover { border-color: #00f2ff; transform: translateY(-5px); }
.metric-card h3 { color: #ccc; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; margin: 0 0 10px 0; }
.metric-card p { font-size: 0.9rem; color: #999; }

/* --- PROCESS SECTION --- */
.process-section { position: relative; background: radial-gradient(circle at center, #1a1a1a 0%, #000000 100%); padding: 100px 0; overflow: hidden; }
.process-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 50px 50px; opacity: .5; pointer-events: none; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 60px; }
@media (max-width: 992px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .process-grid { grid-template-columns: 1fr; } }
.process-step-card { background: rgba(255,255,255,.02); border: 1px solid rgba(0,242,255,.1); padding: 40px 30px; border-radius: 20px; text-align: center; transition: all .3s ease; position: relative; backdrop-filter: blur(10px); height: 100%; display: flex; flex-direction: column; }
.process-step-card:hover { border-color: rgba(0,242,255,.4); transform: translateY(-5px); box-shadow: 0 10px 30px -10px rgba(0,242,255,.2); }
.step-icon-large { font-size: 3.5rem; color: #00f2ff; margin-bottom: 25px; text-shadow: 0 0 15px rgba(0,242,255,.4); }
.step-number-glow { font-size: 1.2rem; font-weight: 700; color: #00f2ff; margin-bottom: 15px; display: inline-block; padding: 5px 15px; background: rgba(0,242,255,.1); border-radius: 50px; }
.process-step-card h3 { font-size: 1.5rem; color: #fff; margin-bottom: 15px; min-height: 60px; display: flex; align-items: center; justify-content: center; }
.process-step-card p { color: #ccc; font-size: 1rem; line-height: 1.6; flex-grow: 1; }

/* --- PROJECTS --- */
.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin-top: 40px; }
.project-card-home { display: block; background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 20px; overflow: hidden; transition: all .3s ease; text-decoration: none; }
.project-card-home:hover { transform: translateY(-5px); border-color: #00f2ff; box-shadow: 0 10px 30px rgba(0,242,255,.2); }
.project-card-home .p-image { width: 100%; height: 250px; overflow: hidden; position: relative; }
.project-card-home .p-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.project-card-home:hover .p-image img { transform: scale(1.05); }
.project-card-home .p-info { padding: 25px; }
.project-card-home .p-cat { display: inline-block; font-size: 0.85rem; color: #00f2ff; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.project-card-home .p-info h3 { font-size: 1.3rem; color: #fff; margin: 0; font-weight: 600; }
.view-all { color: #00f2ff; font-weight: 600; font-size: 1rem; transition: color .3s ease; text-decoration: none; }
.view-all:hover { color: #fff; }

/* --- FAQ --- */
.faq-list details { transition: .3s; background: #111; border: 1px solid #222; border-radius: 10px; margin-bottom: 15px; padding: 20px; cursor: pointer; }
.faq-list details[open] { border-color: #00f2ff !important; background: rgba(0,242,255,.02) !important; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary h3 { display: inline; font-size: 1.1rem; font-weight: 600; color: #fff; }
.faq-list p { color: #ccc; margin-top: 15px; line-height: 1.6; }

/* --- SVG ICONS --- */
svg.svg-inline--fa { height: 1em; width: auto; display: inline-block; vertical-align: -0.125em; overflow: visible; }

/* --- MOBILE MENU --- */
@media (max-width: 992px) {
    .hamburger { display: flex; flex-direction: column; cursor: pointer; gap: 6px; z-index: 101; }
    .hamburger span { width: 30px; height: 2px; background-color: #fff; transition: all .3s ease; }
    .mobile-menu { position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; background: #000; z-index: 99; transition: .5s ease-in-out; display: block; padding-top: 100px; overflow-y: auto; }
    .mobile-menu ul { list-style: none; padding: 0; margin: 0; }
    .mobile-menu li a { display: block; padding: 15px 25px; font-size: 1.2rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
}