/* ========================================
   INDEX PAGE - Enhanced Styles
   ======================================== */

/* ── Typing Cursor ── */
.typing-cursor { display:inline-block;width:3px;height:1em;background:var(--pixel-cyan);margin-left:4px;vertical-align:text-bottom;animation:cursorBlink .7s step-end infinite; }
@keyframes cursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }
.hero-typing-line { font-family:var(--font-pixel);font-size:11px;color:var(--pixel-green);margin-bottom:30px;min-height:20px;letter-spacing:1px; }

/* ── Glitch Title ── */
.glitch-title { position:relative;display:inline-block; }
.glitch-title::before,.glitch-title::after { content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden; }
.glitch-title::before { color:var(--pixel-cyan);z-index:-1;animation:glitch1 3s infinite linear alternate-reverse; }
.glitch-title::after { color:var(--pixel-magenta);z-index:-2;animation:glitch2 2s infinite linear alternate-reverse; }
@keyframes glitch1 { 0%,90%,100%{clip-path:inset(0 0 0 0);transform:translate(0)} 92%{clip-path:inset(20% 0 60% 0);transform:translate(-4px,2px)} 94%{clip-path:inset(50% 0 30% 0);transform:translate(4px,-2px)} 96%{clip-path:inset(80% 0 5% 0);transform:translate(-2px,4px)} 98%{clip-path:inset(10% 0 70% 0);transform:translate(2px,-4px)} }
@keyframes glitch2 { 0%,90%,100%{clip-path:inset(0 0 0 0);transform:translate(0)} 91%{clip-path:inset(60% 0 20% 0);transform:translate(4px,-2px)} 93%{clip-path:inset(30% 0 50% 0);transform:translate(-4px,2px)} 95%{clip-path:inset(5% 0 80% 0);transform:translate(2px,-4px)} 97%{clip-path:inset(70% 0 10% 0);transform:translate(-2px,4px)} }

/* ── Hero Stats Bar ── */
.hero-stats-bar { display:flex;gap:40px;justify-content:center;margin-top:50px;animation:slideInUp .8s ease-out .6s both; }
.hero-stat { text-align:center; }
.hero-stat-num { font-family:var(--font-gothic);font-size:36px;font-weight:900;color:var(--pixel-cyan);text-shadow:0 0 20px rgba(0,212,255,.4);line-height:1; }
.hero-stat-label { font-family:var(--font-pixel);font-size:7px;color:var(--pixel-gray);margin-top:8px;letter-spacing:1px; }

/* ── About Section ── */
.about-section { padding:100px 0;position:relative;overflow:hidden; }
.about-section::before { content:'';position:absolute;top:-200px;right:-200px;width:500px;height:500px;border:2px solid rgba(0,212,255,.06);border-radius:50%;animation:rotateSlow 40s linear infinite; }
.about-section::after { content:'';position:absolute;bottom:-150px;left:-150px;width:400px;height:400px;border:2px solid rgba(255,0,255,.05);border-radius:50%;animation:rotateSlow 30s linear infinite reverse; }
@keyframes rotateSlow { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.about-grid { display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1; }
.about-text-area h2 { font-family:var(--font-gothic);font-size:36px;font-weight:900;color:var(--pixel-white);line-height:1.5;margin-bottom:10px; }
.about-text-area h2 span { color:var(--pixel-cyan);text-shadow:0 0 20px rgba(0,212,255,.3); }
.about-text-area .about-lead { font-size:17px;color:var(--pixel-cyan);font-weight:500;margin-bottom:24px;line-height:1.8; }
.about-text-area p { font-size:15px;color:var(--pixel-gray);line-height:2;margin-bottom:16px; }
.about-card-stack { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.about-mini-card { background:var(--pixel-card-bg);border:2px solid var(--pixel-border);padding:24px 18px;text-align:center;transition:all .4s;position:relative;overflow:hidden; }
.about-mini-card::before { content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,212,255,.08) 0%,transparent 60%);opacity:0;transition:opacity .4s; }
.about-mini-card:hover::before { opacity:1; }
.about-mini-card:hover { border-color:var(--pixel-cyan);transform:translateY(-6px);box-shadow:0 12px 40px rgba(0,212,255,.15); }
.about-mini-card i { font-size:28px;color:var(--pixel-cyan);margin-bottom:14px;display:block; }
.about-mini-card h4 { font-family:var(--font-gothic);font-size:14px;font-weight:800;color:var(--pixel-white);margin-bottom:8px; }
.about-mini-card p { font-size:12px;color:var(--pixel-gray);line-height:1.7; }
.about-mini-card:nth-child(2) { margin-top:30px; }
.about-mini-card:nth-child(3) { margin-top:-15px; }

/* ── Counter Section ── */
.counter-section { padding:80px 0;background:linear-gradient(180deg,rgba(0,212,255,.03) 0%,transparent 50%,rgba(255,0,255,.02) 100%);position:relative;overflow:hidden; }
.counter-section::before { content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--pixel-cyan),transparent); }
.counter-section::after { content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--pixel-magenta),transparent); }
.counter-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:30px;text-align:center; }
.counter-item { position:relative;padding:30px 10px; }
.counter-item::after { content:'';position:absolute;top:20%;right:0;width:1px;height:60%;background:linear-gradient(180deg,transparent,var(--pixel-border),transparent); }
.counter-item:last-child::after { display:none; }
.counter-num { font-family:var(--font-gothic);font-size:48px;font-weight:900;background:linear-gradient(135deg,var(--pixel-cyan),var(--pixel-magenta));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:6px; }
.counter-suffix { font-family:var(--font-gothic);font-size:20px;font-weight:700;-webkit-text-fill-color:var(--pixel-cyan); }
.counter-label { font-family:var(--font-gothic);font-size:13px;font-weight:600;color:var(--pixel-gray);letter-spacing:1px;margin-top:4px; }
.counter-sublabel { font-family:var(--font-pixel);font-size:7px;color:rgba(255,255,255,.2);margin-top:6px;letter-spacing:1px; }

/* ── Philosophy ── */
.philosophy-section { padding:100px 0;position:relative; }
.philo-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:50px; }
.philo-card { background:var(--pixel-card-bg);border:2px solid var(--pixel-border);padding:40px 28px;position:relative;overflow:hidden;transition:all .5s cubic-bezier(.25,.8,.25,1); }
.philo-card::before { content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,212,255,.06),transparent);transition:left .7s; }
.philo-card:hover::before { left:100%; }
.philo-card:hover { border-color:var(--pixel-cyan);transform:translateY(-8px) scale(1.02);box-shadow:0 20px 60px rgba(0,212,255,.12); }
.philo-num { font-family:var(--font-pixel);font-size:32px;color:rgba(0,212,255,.12);position:absolute;top:16px;right:20px; }
.philo-icon { width:60px;height:60px;border:3px solid var(--pixel-cyan);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--pixel-cyan);margin-bottom:24px;transition:all .4s;background:rgba(0,212,255,.04); }
.philo-card:hover .philo-icon { background:rgba(0,212,255,.15);box-shadow:var(--pixel-glow-cyan);transform:rotateY(180deg); }
.philo-card h3 { font-family:var(--font-gothic);font-size:20px;font-weight:800;color:var(--pixel-white);margin-bottom:14px;line-height:1.5; }
.philo-card p { font-size:14px;color:var(--pixel-gray);line-height:2; }

/* ── Services Intro ── */
.services-intro { max-width:800px;margin:0 auto 20px;text-align:center; }
.services-intro p { font-size:15px;color:var(--pixel-gray);line-height:2; }

/* ── Tech Marquee ── */
.tech-marquee-section { padding:50px 0;overflow:hidden;border-top:1px solid var(--pixel-border);border-bottom:1px solid var(--pixel-border);background:rgba(0,0,0,.3); }
.tech-marquee-label { text-align:center;font-family:var(--font-pixel);font-size:9px;color:var(--pixel-green);letter-spacing:3px;margin-bottom:30px; }
.marquee-track { display:flex;width:max-content;animation:marqueeScroll 40s linear infinite; }
.marquee-track:hover { animation-play-state:paused; }
@keyframes marqueeScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.tech-chip { flex-shrink:0;display:inline-flex;align-items:center;gap:10px;font-family:var(--font-gothic);font-size:14px;font-weight:700;color:var(--pixel-white);padding:12px 28px;margin:0 12px;border:2px solid var(--pixel-border);background:var(--pixel-card-bg);white-space:nowrap;transition:all .3s;letter-spacing:1px; }
.tech-chip:hover { border-color:var(--pixel-cyan);color:var(--pixel-cyan);box-shadow:var(--pixel-glow-cyan);transform:scale(1.08); }
.tech-chip i { color:var(--pixel-cyan);font-size:16px; }

/* ── Timeline ── */
.timeline-section { padding:100px 0;background:linear-gradient(180deg,transparent,rgba(0,212,255,.02),transparent); }
.timeline { position:relative;max-width:900px;margin:60px auto 0;padding-left:50px; }
.timeline::before { content:'';position:absolute;top:0;left:23px;width:3px;height:100%;background:linear-gradient(180deg,var(--pixel-cyan),var(--pixel-magenta),var(--pixel-green)); }
.timeline-item { position:relative;padding:0 0 60px 40px;opacity:0;transform:translateX(-30px);transition:all .6s ease-out; }
.timeline-item.visible { opacity:1;transform:translateX(0); }
.timeline-dot { position:absolute;left:-40px;top:4px;width:18px;height:18px;border:3px solid var(--pixel-cyan);background:var(--pixel-black);z-index:2;transition:all .4s; }
.timeline-item:hover .timeline-dot { background:var(--pixel-cyan);box-shadow:var(--pixel-glow-cyan);transform:scale(1.3); }
.timeline-item:nth-child(2) .timeline-dot { border-color:var(--pixel-magenta); }
.timeline-item:nth-child(2):hover .timeline-dot { background:var(--pixel-magenta);box-shadow:var(--pixel-glow-magenta); }
.timeline-item:nth-child(3) .timeline-dot { border-color:var(--pixel-green); }
.timeline-item:nth-child(3):hover .timeline-dot { background:var(--pixel-green);box-shadow:var(--pixel-glow-green); }
.timeline-item:nth-child(4) .timeline-dot { border-color:var(--pixel-yellow); }
.timeline-item:nth-child(4):hover .timeline-dot { background:var(--pixel-yellow); }
.timeline-step { font-family:var(--font-pixel);font-size:9px;color:var(--pixel-cyan);letter-spacing:2px;margin-bottom:8px; }
.timeline-item:nth-child(2) .timeline-step { color:var(--pixel-magenta); }
.timeline-item:nth-child(3) .timeline-step { color:var(--pixel-green); }
.timeline-item:nth-child(4) .timeline-step { color:var(--pixel-yellow); }
.timeline-title { font-family:var(--font-gothic);font-size:22px;font-weight:800;color:var(--pixel-white);margin-bottom:12px; }
.timeline-desc { font-size:14px;color:var(--pixel-gray);line-height:2;margin-bottom:14px; }
.timeline-tags { display:flex;flex-wrap:wrap;gap:8px; }
.timeline-tag { font-family:var(--font-pixel);font-size:7px;color:var(--pixel-cyan);border:1px solid rgba(0,212,255,.3);padding:4px 10px;letter-spacing:1px; }

/* ── Why Us Grid ── */
.whyus-section { padding:100px 0; }
.whyus-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:50px;border:2px solid var(--pixel-border); }
.whyus-card { padding:40px 24px;text-align:center;border-right:1px solid var(--pixel-border);position:relative;transition:all .4s;overflow:hidden; }
.whyus-card:last-child { border-right:none; }
.whyus-card::before { content:'';position:absolute;bottom:0;left:0;width:100%;height:0;background:linear-gradient(180deg,transparent,rgba(0,212,255,.08));transition:height .5s; }
.whyus-card:hover::before { height:100%; }
.whyus-icon { font-size:36px;color:var(--pixel-cyan);margin-bottom:20px;transition:all .4s;position:relative;z-index:1; }
.whyus-card:hover .whyus-icon { transform:scale(1.2);text-shadow:var(--pixel-glow-cyan); }
.whyus-card:nth-child(2) .whyus-icon { color:var(--pixel-green); }
.whyus-card:nth-child(3) .whyus-icon { color:var(--pixel-magenta); }
.whyus-card:nth-child(4) .whyus-icon { color:var(--pixel-yellow); }
.whyus-num { font-family:var(--font-gothic);font-size:40px;font-weight:900;color:var(--pixel-white);margin-bottom:4px;position:relative;z-index:1; }
.whyus-label { font-family:var(--font-gothic);font-size:15px;font-weight:700;color:var(--pixel-white);margin-bottom:14px;position:relative;z-index:1; }
.whyus-desc { font-size:13px;color:var(--pixel-gray);line-height:1.8;position:relative;z-index:1; }

/* ── FAQ ── */
.faq-section { padding:100px 0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.3),transparent); }
.faq-list { max-width:800px;margin:50px auto 0; }
.faq-item { border:2px solid var(--pixel-border);margin-bottom:12px;transition:all .3s;overflow:hidden; }
.faq-item.active { border-color:var(--pixel-cyan); }
.faq-question { display:flex;align-items:center;justify-content:space-between;padding:20px 24px;cursor:pointer;transition:all .3s;background:var(--pixel-card-bg); }
.faq-question:hover { background:rgba(0,212,255,.05); }
.faq-question h4 { font-family:var(--font-gothic);font-size:15px;font-weight:700;color:var(--pixel-white);display:flex;align-items:center;gap:12px; }
.faq-question h4 .q-mark { font-family:var(--font-pixel);font-size:10px;color:var(--pixel-cyan);flex-shrink:0; }
.faq-toggle { color:var(--pixel-cyan);font-size:14px;transition:transform .3s;flex-shrink:0; }
.faq-item.active .faq-toggle { transform:rotate(180deg); }
.faq-answer { max-height:0;overflow:hidden;transition:max-height .4s ease-out,padding .3s;padding:0 24px;background:rgba(0,0,0,.2); }
.faq-item.active .faq-answer { max-height:300px;padding:20px 24px; }
.faq-answer p { font-size:14px;color:var(--pixel-gray);line-height:2; }

/* ── Trust ── */
.trust-section { padding:80px 0;text-align:center; }
.trust-badges { display:flex;justify-content:center;flex-wrap:wrap;gap:40px;margin-top:40px; }
.trust-badge { display:flex;flex-direction:column;align-items:center;gap:10px;opacity:.5;transition:all .4s;padding:20px; }
.trust-badge:hover { opacity:1;transform:translateY(-4px); }
.trust-badge i { font-size:32px;color:var(--pixel-gray);transition:color .3s; }
.trust-badge:hover i { color:var(--pixel-cyan); }
.trust-badge span { font-family:var(--font-gothic);font-size:11px;font-weight:700;color:var(--pixel-gray);letter-spacing:1px; }

/* ── Parallax Depth Layers ── */
.parallax-slow { will-change: transform; }
.parallax-medium { will-change: transform; }
.parallax-fast { will-change: transform; }

/* ── Enhanced Service Card Hover with GSAP ── */
.service-card { transform-style: preserve-3d; perspective: 600px; }

/* ── Responsive ── */
@media(max-width:1024px){
    .about-grid{grid-template-columns:1fr;gap:40px}
    .counter-grid{grid-template-columns:repeat(3,1fr)}
    .counter-item:nth-child(3)::after{display:none}
    .philo-grid{grid-template-columns:1fr 1fr}
    .whyus-grid{grid-template-columns:1fr 1fr}
    .whyus-card{border-bottom:1px solid var(--pixel-border)}
}
@media(max-width:768px){
    .hero-stats-bar{gap:20px;flex-wrap:wrap}
    .hero-stat-num{font-size:28px}
    .counter-grid{grid-template-columns:repeat(2,1fr)}
    .counter-num{font-size:36px}
    .philo-grid{grid-template-columns:1fr}
    .about-mini-card:nth-child(2){margin-top:0}
    .about-mini-card:nth-child(3){margin-top:0}
    .about-text-area h2{font-size:28px}
    .whyus-grid{grid-template-columns:1fr}
    .whyus-card{border-right:none}
    .timeline{padding-left:40px}
    .timeline-item{padding-left:30px}
    .trust-badges{gap:20px}
}
@media(max-width:480px){
    .counter-grid{grid-template-columns:1fr}
    .hero-stats-bar{flex-direction:column;gap:16px}
}