/* ====== HERO-SECTION :: Start ====== */
.hero-section{
    background-color: transparent;
    padding-bottom: 0px ;
    padding-top:clamp(var(--space-128), 25dvh, var(--space-384));
      /* padding-top: */
    align-items: start;
    min-height: 100vh;
}

  

.hero-bg-svg{
    width:1400px; 
    height:900px;
}

.headline{
    font-family: var(--overall-font);
    font-size: var(--font-size-6xl);
    font-weight: 400;

    line-height: var(--space-48);
    
    text-shadow: var(--text-shadow-base);
    text-align: start;
}

.hero-logo{
    display: flex;
    font-family: 'garet-book';
    justify-items: center;
    align-items: center;
    gap: var(--space-8);
}

.headline-part1{
    display: block;
    font-size: var(--font-size-4xl);
}

.svg-logo {
    width: 70px;
    height: 70px;
}


.mobile-break {
  display: none;
}

.subheadline{
    font-family: var(--overall-font);
    font-size: var(--font-size-3xl);
    text-align: left;
    
    margin: 0;
    padding: 0;

    transform: translateY(var(--space-neg-32));
}

.herobackground{
    height: 300px;
    border-radius: 50px;
    opacity: 0.4;
    transform: translateX(-128px) scale(1.2) translateY(-400px);
    z-index: -1;
}



/* ====== HERO-SECTION :: End ====== */

/* ====== TARGET-SECTION :: Start ====== */


.target-section{
    padding-top: var(--space-64);
    padding-bottom: var(--space-64);
    min-height: 100vh;
}

.targetline{
    font-size: var(--font-size-4xl);
    font-weight: 500;
    text-align: start;

    align-self: flex-start;
}


.feature-row-landing {
    min-width: 100vw;
    margin-left: calc(-50vw + 50%); /* Break out of parent container */
    overflow-x: auto;
    overflow-y: hidden;
    margin-top: var(--space-20);
    margin-bottom: var(--space-20);
    padding:  0 var(--space-12);

    display: flex;
    justify-content: center;
    gap: var(--space-20); /* Space between items */

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.feature-row-landing::before {
    content: '';
    flex-shrink: 0;
    width: 200px;
}

.feature-row-landing::after {
    content: '';
    flex-shrink: 0;
    width: 200px ;
}

/* Hide scrollbar but keep functionality */
.feature-row-landing::-webkit-scrollbar {
    display: none;
}

.feature-row-landing::-webkit-scrollbar-track {
    background: transparent;
}

.feature-row-landing::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

/* Prevent items from shrinking */
.feature-row-landing > * {
    flex-shrink: 0;
    scroll-snap-align: start;
}

.Iam {
    /* padding: 2em 5em;*/
    font: normal 40px/50px var(--overall-font);
    /* color: #999; */
    }
.Iam p {
    height: 50px;
    float: left;
    margin-right: 0.3em;
}
.Iam b {
    float: left;
    overflow: hidden;
    position: relative;
    height: 50px;
    top: 45px;
}

.Iam .innerIam {
    display: inline-block;
    color: #D35400;
    position: relative;
    white-space: nowrap;
    top: 0;
    left: 0;


    /*animation*/
    -webkit-animation:move 3s;
    -moz-animation:move 3s;
        -ms-animation:move 3s;
        -o-animation:move 3s;
            animation:move 3s;
    /*animation-iteration-count*/
    -webkit-animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite;
        -ms-animation-iteration-count:infinite;
        -o-animation-iteration-count:infinite;
            animation-iteration-count:infinite;
    /*animation-delay*/
    -webkit-animation-delay:1s;
    -moz-animation-delay:1s;
        -ms-animation-delay:1s;
        -o-animation-delay:1s;
            animation-delay:1s;
    }
    @keyframes move{
        0%  { top: 0px; }
        33% { top: -45px; }
        67% { top: -100px; }
    }


    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        padding: 20px;
        transition: background 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .modal {
        background: radial-gradient(in hsl,hsl(48, 25%, 92.2%), hsl(49, 20%, 79%));
        border: 3px solid var(--primary-600);;
        border-radius: var(--radius-4xl);
        max-width: 800px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        position: relative;
        opacity: 1;
        will-change: transform;
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .modal-content {
        padding: 60px 50px;
    }

    .close-btn {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        border: 1px solid #333;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        background: transparent;
        color: #666;
        font-size: 20px;
        transition: all 0.3s;
        z-index: 10;
    }

    .close-btn:hover {
        background: #222;
        border-color: #444;
        color: #999;
        transform: rotate(90deg);
    }

    .modal-visual {
        height: 320px;
        margin-bottom: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateY(var(--space-32)) scale(1.25);
    }

    .modal h2 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 32px;
        letter-spacing: -0.02em;
    }

    .modal p {
        font-size: 1.125rem;
        line-height: 1.8;
        color: var(--text-secondary);
        margin-bottom: 24px;
    }

    .modal-quote {
        margin-top: 48px;
        padding: 32px;
        background: rgba(255, 255, 255, 0.02);
        border-left: 3px solid #333;
        border-radius: 8px;
        font-style: italic;
        color: #888;
        line-height: 1.8;
    }


/* ====== TARGET-SECTION :: END ====== */

/* ====== CHATFOCUS-SECTION :: Start ====== */

.chatfocus-section-bg{
    position: absolute;
    width: 100wv;
    
    top:0;
    right: -50vw;
    left: -50vw;
    bottom: 0;

    background: linear-gradient(
    to bottom,
        hsla(50, 20.7%, 88.6%, 0.9) 0%,
        hsla(50, 20.7%, 88.6%, 0.7) 50%,
        hsla(50, 20.7%, 88.6%, 0.2)  100%
    );
    
    z-index: -99;   
}


.chatfocus-section{
    position: relative;
    background-color:transparent;
    text-shadow: var(--text-shadow-base);
    min-height: 100vh;
    padding-top: clamp(var(--space-32), 20dvh, var(--space-384));
}

.chatfocusline{
    text-align: center;
    align-self: center;
    padding: 0px;
    margin: 0px;
    font-family: var(--overall-font);
}

.chat-first-section{
    align-self: center;
    transform: scale(0.8) translateY(var(--space-neg-192));
    height: 560px;
    margin-top: var(--space-128);
    margin-bottom: var(--space-128);
    }

.chat-first-container {
    display: flex;
    justify-content: center;
}

.chat-svg{
    max-width: 800px;
    max-height: 600px;

}
/* ====== CHATFOCUS-SECTION :: END ====== */
/* ====== MULTIPLE-FEATURES-SECTION :: Start ====== */

.features-title{
    font-family: var(--overall-font);
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 equal width columns */
    grid-template-rows: 1fr 0.2fr;    /* 2 equal height rows */
    column-gap: var(--space-128);
    column-gap: var(--space-48);
    width: 100%;
}

.box-left {
    grid-row: 1 / 3; /* spans from row 1 to row 3 (2 rows) */
    background-color:transparent;
    align-self: center;
}

.box-top-right {
/* automatically goes to row 1 */
    background-color: transparent;
    align-self: center;
    padding: var(--space-12) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* margin: auto; */
}

.box-bottom-right {
/* automatically goes to row 2 */
    background-color:transparent;
    align-self: center;
    padding: var(--space-12) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* margin: auto; */
}

.multi-features-section{
    /*  border-top: 1px solid #C15F3C; */
    position: relative;
    padding-left: 0px;
    background-color: transparent;
    gap: 0;
    min-height: 100vh;

}

.grid-container .param-overall-container{
    /* width: 400px; */
    transform: scale(0.9);
    max-width: unset;
}

.pdf-feature{
    margin-bottom: var(--space-12);
    transition: all var(--transition-fast);
}

.pdf-feature:hover{
    transform: translateX(var(--space-neg-12));

}

.pdf-feature-title-1{
    /* font:  Montserrat, sans-serif; */
    font-family:var(--overall-font);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-400);
    text-align: center;

    background: -webkit-linear-gradient(#C15F3C, #D35400);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow: var(--text-shadow-lg);
    padding: 0;
    margin: 0;
    
}

/* ====== MULTIPLE-FEATURES-SECTION :: End ====== */
/* ====== DEMO-SECTION :: Start ====== */

.demo-section{
    position: relative;
    background-color: transparent;
    min-height: 100vh;
}

.demo-header{
    font-family: var(--overall-font);
}

/* ====== DEMO-SECTION :: End ====== */
/* ====== CTA-SECTION :: Start ====== */

.cta-section{
    position: relative;
    align-items: center;
    background-color: transparent;
    padding: var(--space-192) 0;
}

.cta-title{
    font-family: var(--overall-font);
}

.hero-arcs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: -1;
}

.hero-arcs svg {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    opacity: 0.07;
}

/* ====== CTA-SECTION :: End ====== */
/* ====== PILLS-SECTION :: Start ====== */

:root{
    --cream:#fdf6e3;--cream2:#f7edd0;--cream3:#f0e4c0;
    --surface:#fffef9;--border:#e2d5b8;--border2:#ecdfc6;
    --olive:#6b7c52;--olive2:#8a9e6a;--olive-bg:#eef1e8;
    --rust:#C15F3C;--rust2:#D35400;
    --text:#3a2f1e;--muted:#9a8a72;--muted2:#c5b79a;
    --r:16px;--r2:24px;--r3:48px;
    }

.pills-section{width:100%;overflow:hidden;padding:0 0 48px}
.pills-track{display:flex;gap:12px;animation:scroll 30s linear infinite;width:max-content;padding:8px 0}
.pills-track:hover{animation-play-state:paused}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.pill-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r3);padding:10px 20px;font-size:13px;font-weight:400;color:var(--muted);white-space:nowrap;flex-shrink:0}
.pill-item span{color:var(--rust);margin-right:6px}
/* ====== PILLS-SECTION :: End  ====== */

    @media  (max-width:  992px) {
        /* html,body{
            max-width: 100vw;
            overflow-x: hidden;
        }

        main{
            max-width: 800px;
            padding: 0px var(--space-48);
        }

        section{
            padding-left: var(--space-4)
        } */

        .headline{
            text-align: start;
            font-size: clamp(var(--font-size-4xl), 25dvh, var(--font-size-6xl));
            line-height: var(--space-48);
        }

        .svg-logo {
            width: 50px;
            height: 50px;
        }

        .headline-part1{
            display: block;
            font-size: var(--font-size-2xl);
            margin-left: var(--space-4);
        }

        .subheadline{
            font-size: var(--font-size-2xl);
            margin-left: var(--space-8);
        }

         


        .herobackground{
            height: 500px;
            width: 650px;
            border-radius: 50px;
            /* transform:  scale(0.8) translateX(var(--space-neg-128)) translateY(var(--space-neg-256)); */
            z-index: -1;
        }

       

        .Iam {
            padding: var(--space-4);
        }

        .target-section{
            padding-top: var(--space-64);
            padding-bottom: var(--space-64);
        }

        .feature-row-landing {
            justify-content: flex-start;
            gap: 20px; /* Space between items */

        }

        .feature-row-landing::before {
            width: calc(-50vw + 50%); 
        }

        .feature-row-landing::after {
            width: calc(-50vw + 50%); 
        }


        .chatfocus-section-bg{
            position: absolute;
            width: 100wv;
            top:0;
            right: calc(-50vw + 50%);
            left:  calc(-50vw + 50%);
            bottom: 0;
        }

        .grid-container {
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        #pdf-report-f{
            /* transform: matrix(1, 0, 0.05, 0.95, -5, 10) scale(0.8); */
            transition: all var(--transition-fast);
            height: 640px;
           
        }

        #pdf-report-f:hover {
            transform: matrix(1, 0, 0, 1, 0, 0); /* normal */
            scale: 0.9;
        }

        .chat-section.show-panel .chat-artifest {
            position: absolute; /* Change from fixed to absolute */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
            flex: none;
        }


    }


    @media (max-width: 550px){

        .mobile-break {
            display: inline;
        }
           .Iam {
            padding: var(--space-4);
            font: normal var(--font-size-2xl) var(--overall-font);
        }

        .Iam p{
            text-align: right;
        }

        .Iam b {
                float: left;
                overflow: hidden;
                position: relative;
                height: 30px;
                top: 40px;
                left:10px
            }

            @keyframes move{
            0%  { top: 0px; }
            33% { top: -35px; }
            67% { top: -70px; }
        }

        .modal-visual {
            transform: translateY(var(--space-32)) scale(1);
        }

        .modal h2{
            font-size: var(--font-size-2xl);
            margin-bottom: var(--space-20)
        }

        .feature-row-landing {
            flex-direction: column;
            align-items: center;
        }

        .feature-row-square{
            width: 270px;
            height: 270px;
        }

        .feature-row-square svg{
            height: 250px;
            width: 250px;
        }

        .feature-title{
            font-size: var(--font-size-2xl);
            bottom: var(--space-12);
        }

        .designAction{
            font-size: 10px;
        }



    }

    @media  (max-width:  450px) {
        /* html,body{
            max-width: 100vw;
            overflow-x: hidden;
        }
        main{
            max-width: 380px;
            padding: 0px var(--space-20);
        }

        section{
            padding-left: var(--space-8)
        } */

        .headline{
            /* width: 380px; */
            text-align: start;
            font-size: var(--font-size-4xl);
            line-height: var(--space-36);
        }

        .mobile-break {
            display: inline;
        }

        .headline-part1{
            display: none;
            font-size: var(--font-size-2xl);
            margin-left: var(--space-4);   
        }


        .subheadline{
            font-size: var(--font-size-xl);
            margin-left: var(--space-4);
            transform: translateY(var(--space-neg-24));
        }

        .hero-btn{
            transform: translateY(var(--space-neg-12));
        }
/* 
        .hero-section {
            margin-top:clamp(var(--space-64), 15vh, var(--space-128));
        } */

        .herobackground{
            height: 400px;
            width: 100vw;
            border-radius: 50px;
            /* transform:  scale(1.2) translateY(var(--space-neg-384)); */
            transform:  scale(2) translateY(-400px);
            z-index: -1;
        }

            .hero-bg-svg{
            width:100vw; 
        }

     

        .pdf-feature{
            transition: none;
        }

        .pdf-feature:hover{
            transform: none;
        
        }

        .chatfocus-section{
            padding-top: clamp(var(--space-32), 20dvh, var(--space-384));
        }

   
        .chat-container{
            height: 600px;
        }


        #pdf-report-f{
            transform: none;
            transition: none;
            max-width: 80dvw;
            height: 500px;
            
        }

        #pdf-report-f:hover {
            transform: none; /* normal */
            scale: 1;
        }

        #chatlayout{
            position: relative;
        }

        .param-container .param-overall-container{
            line-height: var(--line-height-tight);
            font-size: var(--font-size-sm);

        }

        .param-container table{
            margin: var(--space-4) var(--space-8);
        }

        .param-container table th:first-child {
            padding-bottom: var(--space-4);
        }

        .message-bubble {
            max-width: 95%;
            padding: var(--space-8) var(--space-12);
            border-radius: var(--radius-lg);
            font-size: var(--font-size-sm);
            line-height: 1.6;
            word-wrap: break-word;
            color: var(--gray-700);
        }

        .param-container{
            margin-left: var(--space-4);
        }

        .param-container td{
            padding: var(--space-4);
        }

        .suggestions {
            margin-left: var(--space-4);
            margin-top: var(--space-4);
            display: flex;
            gap: var(--space-4);
            transform: translateY(var(--space-neg-8));
        }

        .suggestion-btn {
            padding: var(--space-4) var(--space-8);
            border-radius: var(--radius-lg);
            font-size: 10px;
            
        }

    }