<!-- CORRECTED & RELIABLE BLINKING CURSOR STYLE -->
<style>
    .blinking-cursor {
        /* Base styling for the cursor when it's VISIBLE */
        display: inline-block;
        width: 3px;
        height: 1.1em;
        margin-left: 4px;
        vertical-align: baseline;
        background: linear-gradient(to right, #c812d6, #ff6a00);
        
        /* --- THE ANIMATION FIX --- */
        /* We now animate the 'opacity' property, which is much more reliable */
        animation: blink-animation 1s infinite;
    }

    /* Keyframes now explicitly toggle opacity for a true on/off blink */
    @keyframes blink-animation {
        /* The cursor is visible (opacity: 1) for the first half of the animation */
        0%, 49% {
            opacity: 1;
        }
        /* The cursor is invisible (opacity: 0) for the second half */
        50%, 100% {
            opacity: 0.1;
        }
    }
</style>

<section
    id="home"
    class="container mx-auto px-6 lg:px-10 pt-20 md:pt-28 pb-20 md:pb-28 font-inter"
    x-data="{
        words: ['Business Strategist', 'Startup Founder', 'Tech Entrepreneur', 'IT Consultant'],
        wordIndex: 0, 
        charIndex: 0, 
        isDeleting: false, 
        currentText: '',
        typewriter() {
            const currentWord = this.words[this.wordIndex];
            if (this.isDeleting) { 
                this.currentText = currentWord.substring(0, this.charIndex - 1); 
                this.charIndex--; 
            } else { 
                this.currentText = currentWord.substring(0, this.charIndex + 1); 
                this.charIndex++; 
            }
            if (!this.isDeleting && this.charIndex === currentWord.length) { 
                setTimeout(() => { this.isDeleting = true; }, 2000); 
            } else if (this.isDeleting && this.charIndex === 0) { 
                this.isDeleting = false; 
                this.wordIndex = (this.wordIndex + 1) % this.words.length; 
            }
            const speed = this.isDeleting ? 50 : 100;
            setTimeout(() => this.typewriter(), speed);
        }
    }"
    x-init="setTimeout(() => typewriter(), 500)"
>
    <!-- Main Content Grid -->
    <div class="grid lg:grid-cols-5 gap-y-16 lg:gap-x-12 items-center">
        
        <!-- Left Side: Text with new fonts and refined spacing -->
        <div class="lg:col-span-3 text-center lg:text-left">
            <p class="font-poppins text-sm font-thin bg-gradient-to-r from-[#c812d6] via-primary to-orange-400 text-transparent bg-clip-text tracking-[3px] uppercase">
                WELCOME TO MY WORLD
            </p>
            
            <!-- Headline with Poppins font -->
            <h1 class="font-poppins text-4xl sm:text-5xl md:text-6xl  text-light-headings dark:text-dark-headings mt-6 mb-6 leading-tight">
                Hi, I'm 
                <span class="inline-block bg-gradient-to-r from-[#d1d5db] via-[#9ca3af] to-[#6b7280] text-transparent bg-clip-text">
                    Ashok KC
                </span>
                
                <!-- Animated text with now-functional blinking cursor -->
                <span class="block text-3xl sm:text-4xl md:text-5xl "> 
                    a <span x-text="currentText" class="text-dark dark:text-dark-text"></span><span class="blinking-cursor"></span>
                </span>
            </h1>

            <!-- Body text with Inter font -->
            <p class="text-base text-light-text dark:text-dark-text leading-relaxed max-w-xl mb-12 mx-auto lg:mx-0">
              As the founder and CEO of ABS Soft Pvt. Ltd., I’m passionate about using technology to create practical solutions for real world challenges in Nepal. With a focus on innovation, usability, and long term impact, I’m working to support digital growth step by step while empowering individuals and small businesses through accessible tech solutions.      </p>

            <!-- ALL 4 LOGOS RESTORED - Neumorphic Icon Grid -->
            <div>
                <p class="font-poppins font-semibold uppercase text-sm tracking-wider text-light-text dark:text-dark-text mb-5 text-center lg:text-left">Find Me On</p>
                <div class="flex flex-wrap justify-center lg:justify-start gap-4">
                    <a href="https://www.facebook.com/akc3416" class="w-14 h-14 flex items-center justify-center bg-light-bg dark:bg-dark-bg rounded-lg shadow-light-neumorphic dark:shadow-dark-neumorphic group hover:bg-gradient-to-br from-[#c812d6] via-primary to-[#ff6a00] hover:shadow-hire-glow transition-all duration-300 hover:-translate-y-1">
                        <svg class="w-6 h-6 text-light-headings dark:text-dark-text group-hover:text-white transition-colors" fill="currentColor" viewBox="0 0 512 512"><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></svg>
                    </a>
                    <a href="https://www.instagram.com/asok.kc/" class="w-14 h-14 flex items-center justify-center bg-light-bg dark:bg-dark-bg rounded-lg shadow-light-neumorphic dark:shadow-dark-neumorphic group hover:bg-gradient-to-br from-[#c812d6] via-primary to-[#ff6a00] hover:shadow-hire-glow transition-all duration-300 hover:-translate-y-1">
                        <svg class="w-6 h-6 text-light-headings dark:text-dark-text group-hover:text-white transition-colors" fill="currentColor" viewBox="0 0 448 512"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9 26.3 26.2 58 34.4 93.9 36.2 37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>
                    </a>
                    <a href="https://wa.me/9779864400000?text=Hello" class="w-14 h-14 flex items-center justify-center bg-light-bg dark:bg-dark-bg rounded-lg shadow-light-neumorphic dark:shadow-dark-neumorphic group hover:bg-gradient-to-br from-[#c812d6] via-primary to-[#ff6a00] hover:shadow-hire-glow transition-all duration-300 hover:-translate-y-1">
                        <svg class="w-6 h-6 text-light-headings dark:text-dark-text group-hover:text-white transition-colors" fill="currentColor" viewBox="0 0 448 512"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.8 0-67.6-9.5-97.8-26.7l-7-4.1-72.3 19 19.4-70.6-4.5-7.3c-18.4-29.7-28-64.4-28-101.4 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg>
                    </a>
                    <a href="https://github.com/akc3416" class="w-14 h-14 flex items-center justify-center bg-light-bg dark:bg-dark-bg rounded-lg shadow-light-neumorphic dark:shadow-dark-neumorphic group hover:bg-gradient-to-br from-[#c812d6] via-primary to-[#ff6a00] hover:shadow-hire-glow transition-all duration-300 hover:-translate-y-1">
                        <svg class="w-6 h-6 text-light-headings dark:text-dark-text group-hover:text-white transition-colors" fill="currentColor" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3.3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
                    </a>
                </div>
            </div>
        </div>

        <!-- Right Side: Image (Neumorphism intact) -->
        <div class="lg:col-span-2 flex justify-center mt-8 lg:mt-0">
            <div class="bg-light-bg dark:bg-dark-bg rounded-lg shadow-light-neumorphic dark:shadow-dark-neumorphic w-full max-w-md lg:max-w-lg">
                <img src="images/hero/hero.png" alt="Ashok KC Portrait" class="w-full rounded-lg lg:-mt-24">
            </div>
        </div>
    </div>
</section><?php /**PATH /home2/kcashok/public_html/portfolio/resources/views/components/hero-section.blade.php ENDPATH**/ ?>