/* =========================
   RESET + GLOBAL
========================= */

*{
box-sizing:border-box;
}


html,
body{

width:100%;
height:100%;

margin:0;
padding:0;

overflow:hidden;


font-family:
Inter,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Arial,
sans-serif;


font-size:14px;

color:#101828;


background:#fafafa;

}





/* =========================
   AI APP LAYOUT
========================= */


.ai-layout{


width:100vw;

height:100vh;


display:grid;


grid-template-columns:

320px minmax(0,1fr);



overflow:hidden;



background:

radial-gradient(

circle at 80% 10%,

rgba(124,58,237,.14),

transparent 35%

),


linear-gradient(

180deg,

#ffffff,

#f7f8fb

);


}









/* =========================
   LEFT SIDEBAR
========================= */


.ai-sidebar{


height:100vh;


overflow-y:auto;



padding:

32px 28px;



background:

rgba(255,255,255,.85);



backdrop-filter:

blur(22px);



border-right:

1px solid rgba(0,0,0,.08);



box-shadow:

15px 0 45px rgba(16,24,40,.04);


}








.ai-sidebar::-webkit-scrollbar,
.chat-response::-webkit-scrollbar{

width:6px;

}



.ai-sidebar::-webkit-scrollbar-thumb,
.chat-response::-webkit-scrollbar-thumb{


background:#d0d5dd;

border-radius:20px;

}











/* =========================
   PROFILE
========================= */


.profile-card{


padding-bottom:24px;


border-bottom:

1px solid #eaecf0;

}





.profile-card h3{


font-size:25px;


font-weight:900;


line-height:1.05;



letter-spacing:-.7px;


margin:

0 0 12px;



background:

linear-gradient(

135deg,

#6829ba,

#2563eb,

#4F46E5

);



background-size:200%;



-webkit-background-clip:text;


-webkit-text-fill-color:transparent;



animation:

nameMove 5s ease infinite;


}





@keyframes nameMove{


0%{

background-position:0%;

}


50%{

background-position:100%;

}


100%{

background-position:0%;

}


}








.profile-card p{


font-size:12px;


color:#475467;


margin:0;

}




/* =========================
   SIDEBAR MENU
========================= */


.side-menu{


margin-top:28px;



display:flex;


flex-direction:column;


gap:8px;


}




/* =========================
 SIDEBAR MENU WITH ICON
========================= */
/* =========================
 FLAT ICON MENU
========================= */


.side-menu button{


height:36px;


display:flex;

align-items:center;

gap:12px;


padding:

0 14px;


border:0;

border-radius:14px;


background:transparent;


font-size:14px;

font-weight:600;


color:#344054;


cursor:pointer;


transition:.25s;

}




.side-menu button i{


width:32px;

height:32px;


display:flex;


align-items:center;

justify-content:center;


padding:7px;


border-radius:10px;


background:#f5f3ff;


color:#6829ba;


stroke-width:2;


}




.side-menu button:hover{


background:

linear-gradient(

135deg,

#f5f3ff,

#eef6ff

);


transform:

translateX(5px);


}




.side-menu button:hover i{


background:white;


box-shadow:

0 8px 20px rgba(104,41,186,.18);


}



.follow-up-buttons button{


height:52px;


padding:

0 26px;



border-radius:

18px;



background:

rgba(255,255,255,.9);



border:

1px solid #e9d7fe;



box-shadow:

0 12px 30px rgba(124,58,237,.08);



font-size:14px;


font-weight:600;



color:#344054;



}


.follow-up-buttons svg{


color:#7c3aed;


}


.follow-up-buttons{


border:0;


gap:18px;


}


.follow-up-buttons i{


width:16px;

height:16px;


color:#6829ba;

}




.follow-up-buttons button:hover i{


color:white;

}



/* =========================
   RECENT
========================= */


.recent-box{


margin-top:34px;



padding-top:22px;



border-top:

1px solid #eaecf0;


}








.recent-box h5{


font-size:11px;



font-weight:800;



letter-spacing:.12em;



text-transform:uppercase;



color:#98a2b3;



}









#recentList{


display:flex;


flex-direction:column;


gap:5px;

}








#recentList button{


width:100%;



border:0;


background:transparent;



padding:

9px 10px;



border-radius:10px;



text-align:left;



font-size:13px;



color:#475467;


cursor:pointer;


}








#recentList button:hover{


background:#f5f3ff;


color:#6829ba;

}











/* =========================
   CHAT AREA
========================= */


.ai-chat-area{


height:100vh;


position:relative;


overflow:hidden;



background:

radial-gradient(

circle at center,

rgba(124,58,237,.08),

transparent 40%

),


linear-gradient(

180deg,

#fbfbfd,

#fff

);


}









.chat-response{


height:100%;


overflow-y:auto;



padding:

20px 8vw 120px;


scroll-behavior:smooth;


}










/* =========================
   MESSAGE
========================= */


.message{


margin-bottom:22px;



font-size:14px;


line-height:1.65;


}







.message.ai{


max-width:900px;



padding:

22px 24px;



border-radius:22px;



background:

rgba(255,255,255,.92);



border:

1px solid rgba(124,58,237,.08);




box-shadow:

0 25px 60px rgba(16,24,40,.08);


}








.message.user{

background:#f9f7ff;

color:#4c1d95;

border: 1px solid #ddd6fe;

box-shadow: 0 10px 30px rgba(104,41,186,.08);

margin-left:auto;

width:max-content;

max-width:600px;

padding: 13px 20px;

border-radius: 18px 18px 4px 18px;



}








.message p{

margin:

0 0 10px;

}

/* =========================
   FOLLOW UP BUTTONS / AI CHIPS
========================= */


.follow-up-buttons,
.ai-suggestion-list{


display:flex;


flex-wrap:wrap;


gap:12px;


margin-top:18px;

}

.follow-up-buttons button{


height:42px;


display:flex;

align-items:center;

gap:8px;


padding:

0 16px;


border-radius:14px;


border:

1px solid #ede9fe;


background:

rgba(255,255,255,.9);


box-shadow:

0 10px 25px rgba(124,58,237,.08);


font-size:13px;

font-weight:600;


color:#42307d;


cursor:pointer;


transition:.25s;

}




.follow-up-buttons button:hover{


background:#6829ba;


color:white;


transform:

translateY(-2px);


box-shadow:

0 14px 30px rgba(104,41,186,.25);

}


.follow-up-buttons button:hover{


background:#6829ba;


color:white;


transform:

translateY(-2px);


box-shadow:

0 14px 30px rgba(104,41,186,.25);

}



.follow-up-buttons button,
.ai-suggestion-list button{


height:40px;



padding:

0 16px;



border-radius:14px;



border:

1px solid #ede9fe;



background:#efe6fc;



box-shadow:

0 8px 22px rgba(124,58,237,.08);



font-size:13px;


font-weight:600;



color:#42307d;



cursor:pointer;



transition:

all .25s ease;


}







.follow-up-buttons button:hover,
.ai-suggestion-list button:hover{


background:#6829ba;


color:white;



transform:

translateY(-2px);



box-shadow:

0 12px 28px rgba(104,41,186,.25);


}











/* =========================
   FIXED CHAT INPUT
========================= */


.fixed-chat{


position:absolute;


left:0;

right:0;

bottom:0;



padding:

24px 8vw;



background:

linear-gradient(

180deg,

rgba(248,250,252,0),

rgba(248,250,252,.96) 45%

);


}










.chat-input{


height:66px;



display:flex;


align-items:center;



padding:

10px 12px 10px 22px;



border-radius:22px;



background:

linear-gradient(

#ffffff,

#ffffff

)

padding-box,



linear-gradient(
90deg,
#6829ba,
#06b6d4,
#ff82d2,
#6829ba
);

border-box;



border:

1px solid transparent;




box-shadow:

0 25px 65px rgba(124,58,237,.22);



animation:

inputGlow 5s ease-in-out infinite;


}








@keyframes inputGlow{


0%{


box-shadow:

0 18px 45px rgba(104,41,186,.16);


}




50%{


box-shadow:

0 25px 70px rgba(6,182,212,.25);


}



100%{


box-shadow:

0 18px 45px rgba(104,41,186,.16);


}


}








.chat-input input{


flex:1;


height:100%;



border:0;


outline:0;


background:transparent;



font-size:14px;



color:#101828;


}







.chat-input input::placeholder{


color:#98a2b3;


}








.chat-input button{


width:46px;


height:46px;



display:flex;


align-items:center;


justify-content:center;



border-radius:50%;



border:0;



background:

linear-gradient(

135deg,

#6829ba,

#4f46e5

);



color:white;



font-size:20px;



cursor:pointer;



transition:.25s ease;


}








.chat-input button:hover{


transform:

translateY(-3px);



box-shadow:

0 12px 28px rgba(104,41,186,.35);


}











/* =========================
   CARDS GRID
========================= */


.ai-card-area,
.process-ai-grid,
.industry-ai-grid,
.hire-grid{


display:grid;



grid-template-columns:

repeat(

auto-fit,

minmax(240px,1fr)

);



gap:16px;



margin-top:18px;


}









.ai-project-card,
.process-ai-card,
.industry-ai-card,
.hire-card,
.personal-card,
.experience-card{


background:

rgba(255,255,255,.9);



border:

1px solid #eaecf0;



border-radius:

18px;



padding:

18px;



box-shadow:

0 12px 35px rgba(16,24,40,.05);



transition:.25s ease;
margin-top:18px;


clear:both;

}









.ai-project-card:hover,
.industry-ai-card:hover,
.hire-card:hover{


transform:

translateY(-3px);



box-shadow:

0 18px 45px rgba(16,24,40,.1);


}










.message h3, .ai-project-card h4,
.industry-ai-card h4,
.experience-card h4, .personal-card h4, .hire-card h4{


font-size:15px;



font-weight:600;

color:#6a6175;

margin: 8px 0;


}


.ai-project-card h4{


cursor:pointer;
color:#6a6175;

transition:.25s ease;


}



.ai-project-card h4:hover{


color:#4F46E5;


}




.case-tags{


display:flex;


flex-wrap:wrap;


gap:8px;


margin-top:15px;


}




.case-tags small{


padding:6px 12px;


border-radius:30px;


background:#f5f3ff;


font-size:12px;


font-weight:500;


color:#6a6175;


}





.ai-project-card p,
.industry-ai-card p,
.hire-card p{


font-size:13px;


line-height:1.6;



color:#667085;


}









.ai-project-card span,
.industry-ai-card span{


font-size:12px;


font-weight:700;


color:#6829ba;


}




/* CASE STUDY BUTTON */


.ai-project-card button, .linkedin-btn, .resume-download{


margin-top:12px;



border:0;
text-decoration: none;

background:transparent;



padding:

0 0 5px;



border-bottom:

2px solid #4F46E5;



color:#4F46E5;



font-size:13px;


font-weight:700;



cursor:pointer;


}








.ai-project-card button:hover{


transform:

translateX(5px);


}









/* =========================
   CASE STUDY IMAGE THUMB
========================= */


.case-images{


display:flex;


gap:12px;


flex-wrap:wrap;



margin-top:14px;


}







.case-images img{


width:95px;


height:75px;



object-fit:cover;



border-radius:12px;



border:

1px solid #e5e7eb;



padding:3px;


background:white;



cursor:pointer;



transition:.25s;


}








.case-images img:hover{


transform:

scale(1.06);



box-shadow:

0 12px 30px rgba(0,0,0,.15);


}










/* =========================
   SKILL BUBBLES
========================= */


.skill-group{


margin-top:20px;

}





.skill-group h4{


font-size:14px;


font-weight:700;


color:#344054;


}







.skill-bubbles{


display:flex;


gap:10px;


flex-wrap:wrap;


}


/* =========================
   SKILL BUBBLES
========================= */


.skill-bubbles{


display:flex;

flex-wrap:wrap;

gap:10px;

margin-top:10px;

}





.experience-summary span, .skill-bubbles span{


display:inline-flex;


align-items:center;


padding:

8px 14px;



border-radius:

30px;



background:

linear-gradient(

135deg,

#f5f3ff,

#eef6ff

);



border:

1px solid #ddd6fe;



color:#75717a;



font-size:13px;


font-weight:600;


line-height:1;



transition:.25s ease;


}








/* =========================
 EXPERIENCE SUMMARY BUBBLES
========================= */


.experience-summary{


display:flex;

flex-wrap:wrap;

gap:10px;


margin:

18px 0 22px;


align-items:flex-start;


}


.experience-card strong{
color: #6829ba;
}





/* =========================
 UX PROCESS TIMELINE
========================= */


.ux-timeline{


margin-top:25px;


display:flex;


flex-direction:column;


gap:18px;

}





.ux-step{


display:flex;


gap:16px;



opacity:0;



animation:

fadeUp .6s ease forwards;


}

.ux-step:nth-child(1){

animation-delay:.1s;

}


.ux-step:nth-child(2){

animation-delay:.3s;

}


.ux-step:nth-child(3){

animation-delay:.5s;

}


.ux-step:nth-child(4){

animation-delay:.7s;

}


.ux-step:nth-child(5){

animation-delay:.9s;

}





@keyframes fadeUp{


0%{


opacity:0;


transform:

translateY(25px)

scale(.96);


}



100%{


opacity:1;


transform:

translateY(0)

scale(1);


}


}







.ux-dot{


width:38px;


height:38px;



min-width:38px;



border-radius:50%;



background:

linear-gradient(

135deg,

#6829ba,

#2563eb

);



display:flex;


align-items:center;


justify-content:center;



color:white;



font-weight:700;


}









.ux-content{


flex:1;



background:#ffffff;



border:

1px solid #eaecf0;



border-radius:16px;



padding:15px;


}
















/* =========================
 IMAGE MODAL
========================= */


.image-modal{


position:fixed;


inset:0;


z-index:999;



background:

rgba(0,0,0,.85);



display:flex;


align-items:center;


justify-content:center;


}






.image-modal img{


max-width:90%;


max-height:90%;


}







.image-modal button{


position:absolute;


right:30px;


top:20px;



background:none;


border:0;


color:white;


font-size:34px;


}










/* =========================
 MOBILE
========================= */


@media(max-width:900px){



.ai-layout{


display:block;


}



.ai-sidebar{


display:none;


}



.ai-chat-area{


height:100vh;


}




.chat-response{


padding:

20px 16px 120px;


}



.fixed-chat{


padding:

16px;


}




.message.ai{


max-width:100%;


}



.message.user{


max-width:85%;


}



.chat-input{


height:58px;


border-radius:18px;


}



}

/* =========================
   GLOBAL ICON SIZE
========================= */


/* Sidebar icons */

.side-menu i,
.side-menu svg{


width:16px;

height:16px;

color:#4F46E5;
min-width:20px;


stroke-width:2;

}




/* Follow-up button icons */

.follow-up-buttons i,
.follow-up-buttons svg{


width:16px;

height:16px;


min-width:16px;


stroke-width:2.2;

}
.follow-up-buttons button:hover svg{
	
	color:#c8c2d1;
}



/* Icon container spacing */

.side-menu button{

gap:10px;

}


.follow-up-buttons button{

gap:7px;

}
/* =========================
   AI THINKING ANIMATION
========================= */


.ai-loader{


width:max-content !important;


padding:

14px 18px !important;


border-radius:

18px !important;


}





.thinking{


display:flex;


align-items:center;


gap:5px;


height:12px;


}





.thinking span{


width:6px;


height:6px;


border-radius:50%;



background:#6829ba;



animation:

thinkingDot 1.2s infinite ease-in-out;


}





.thinking span:nth-child(2){

animation-delay:.2s;

}



.thinking span:nth-child(3){

animation-delay:.4s;

}






@keyframes thinkingDot{


0%,80%,100%{


opacity:.25;


transform:

translateY(0);


}




40%{


opacity:1;


transform:

translateY(-5px);


}


}

/* =========================
 EDUCATION
========================= */


.education-grid{


display:grid;


grid-template-columns:

repeat(

auto-fit,

minmax(220px,1fr)

);


gap:14px;


margin-top:18px;

}





.education-card{


background:white;


border:

1px solid #eaecf0;


border-radius:16px;


padding:16px;


box-shadow:

0 12px 35px rgba(16,24,40,.06);

}




.education-card h4{


font-size:14px;


margin-bottom:8px;


color:#6829ba;

}



.education-card p{


font-size:13px;


color:#667085;


line-height:1.6;

}

/* =========================
 EMAIL CARD
========================= */


.email-card{


margin:

18px 0;



display:flex;


align-items:center;


justify-content:space-between;


gap:15px;



padding:

14px 16px;



border-radius:

14px;



background:

rgba(255,255,255,.75);



border:

1px solid #e5e7eb;


}





.email-info{


display:flex;


align-items:center;


gap:10px;


font-size:14px;



font-weight:600;



color:#344054;


}





.email-info svg{


width:18px;


height:18px;


color:#667085;


}






.email-card button{


height:34px;



display:flex;


align-items:center;


gap:6px;



padding:

0 12px;



border-radius:10px;



border:

1px solid #d0d5dd;



background:white;



color:#475467;



font-size:13px;


font-weight:600;



cursor:pointer;


transition:.2s;


}







.email-card button svg{


width:15px;


height:15px;


}






.email-card button:hover{


background:#f9fafb;


border-color:#98a2b3;


}

/* =========================
   UX + AI THINKING
========================= */


.ai-thinking-list{


display:grid;


grid-template-columns:

repeat(
auto-fit,
minmax(260px,1fr)
);


gap:16px;


margin-top:20px;


}







.ai-thinking-card{


position:relative;


overflow:hidden;



padding:

18px;



border-radius:

18px;



background:

linear-gradient(

180deg,

rgba(255,255,255,.95),

rgba(248,250,252,.95)

);



border:

1px solid #e5e7eb;



box-shadow:

0 15px 40px rgba(16,24,40,.06);



transition:

all .3s ease;


}







.ai-thinking-card:before{


content:"";



position:absolute;


top:0;


left:0;



width:100%;


height:3px;



background:

linear-gradient(

90deg,

#6829ba,

#4F46E5

);


}







.ai-thinking-card:hover{


transform:

translateY(-4px);



box-shadow:

0 22px 50px rgba(104,41,186,.12);


}







.ai-thinking-card h4{


display:flex;


align-items:flex-start;


gap:8px;



font-size:14px;



font-weight:700;



line-height:1.4;



margin:

0 0 10px;



color:#101828;


}








.ai-thinking-card h4:before{


content:"";



width:18px;


height:18px;



min-width:18px;



background:

url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236829ba' stroke-width='2'%3E%3Cpath d='M12 8V4H8'/%3E%3Crect width='16' height='12' x='4' y='8' rx='2'/%3E%3Cpath d='M2 14h2'/%3E%3Cpath d='M20 14h2'/%3E%3Cpath d='M15 13v2'/%3E%3Cpath d='M9 13v2'/%3E%3C/svg%3E")

center/contain

no-repeat;


}








.ai-thinking-card p{


font-size:13px;


line-height:1.6;



color:#667085;



margin:0;


}

/* =========================
 UX AI FLOW ANIMATION
========================= */


.ux-flow{


position:relative;


margin-top:30px;


padding-top:20px;


}





.ux-flow svg{


width:100%;


height:120px;


position:absolute;


top:20px;


left:0;


z-index:0;


}








.flow-bg,
.flow-active{


fill:none;


stroke-width:3;


stroke-linecap:round;


}







.flow-bg{


stroke:#e5e7eb;


}








.flow-active{


stroke:#6829ba;


stroke-dasharray:900;


stroke-dashoffset:900;



animation:

drawFlow 4s ease infinite;


}








@keyframes drawFlow{


0%{


stroke-dashoffset:900;


}



60%{


stroke-dashoffset:0;


}



100%{


stroke-dashoffset:0;


}


}










.ux-flow-items{


position:relative;


z-index:2;



display:grid;


grid-template-columns:
repeat(4,1fr);


gap:18px;


}








.ux-flow-step{


background:white;



border:

1px solid #eaecf0;



border-radius:

18px;



padding:

18px;


text-align:center;



box-shadow:

0 18px 40px rgba(16,24,40,.08);



animation:

stepPop .5s ease forwards;



opacity:0;


}







.ux-flow-step:nth-child(1){

animation-delay:.3s;

}


.ux-flow-step:nth-child(2){

animation-delay:.7s;

}


.ux-flow-step:nth-child(3){

animation-delay:1.1s;

}


.ux-flow-step:nth-child(4){

animation-delay:1.5s;

}









@keyframes stepPop{


from{


opacity:0;


transform:

translateY(20px)

scale(.9);


}



to{


opacity:1;


transform:

translateY(0)

scale(1);


}


}









.ux-circle{


width:42px;


height:42px;



margin:

0 auto 12px;



border-radius:50%;



display:flex;


align-items:center;


justify-content:center;



background:

linear-gradient(

135deg,

#6829ba,

#2563eb

);



color:white;


font-weight:700;


}








.ux-flow-step h4{


font-size:14px;


margin-bottom:8px;


}




.ux-flow-step p{


font-size:12px;


line-height:1.5;


color:#667085;


}
@media(max-width:768px){


.ux-flow svg{

display:none;

}


.ux-flow-items{


grid-template-columns:1fr;


}


}

/* =========================
 PREMIUM AI LANDING CARD
========================= */

/* =========================
 LANDING TOP INTRO
 No card background
========================= */


.welcome-card{


max-width:900px!important;


margin:

30px auto 0;


padding:

20px 30px!important;



background:

transparent!important;



border:

0!important;



box-shadow:

none!important;


backdrop-filter:none!important;


}





.welcome-head{


display:flex;


align-items:center;


justify-content:center;


gap:24px;



margin-bottom:22px;


}





.ai-face{


width:54px;


height:54px;



border-radius:18px;



display:flex;


align-items:center;


justify-content:center;



background:

linear-gradient(

135deg,

#3e3d40,

#282236

);



color:white;



box-shadow:

0 18px 35px rgba(124,58,237,.25);


}





.ai-face svg{


width:24px;

height:24px;

}





.welcome-head h2{


margin:0;


font-size:26px;


font-weight:600;



color:#101828;


}





.welcome-head h2 span{


background:

linear-gradient(

135deg,

#7c3aed,

#2563eb

);


-webkit-background-clip:text;


-webkit-text-fill-color:transparent;


}





.welcome-head p{


margin-top:6px;


font-size:14px;


color:#667085;


}

/* =========================
 EMPTY AI CENTER
========================= */

.empty-ai-state{


margin-top:55px;


display:flex;


flex-direction:column;


align-items:center;


justify-content:center;


text-align:center;


}


.empty-icon{


width:90px;

height:75px;


border-radius:22px;


}

.empty-icon svg{


width:42px;


height:42px;



color:#a78bfa;


}





.empty-ai-state h2{


margin-top:28px;


font-size:26px;


font-weight:800;


color:#101828;


}




.empty-ai-state p{


max-width:360px;


font-size:15px;


line-height:1.6;


}
/* =========================
 PROTOTYPE SECTION
========================= */


.prototype-grid{


display:grid;


grid-template-columns:

repeat(

auto-fit,

minmax(220px,1fr)

);


gap:16px;


margin:

20px 0;


}





.prototype-card{


padding:18px;


border-radius:18px;


background:

rgba(255,255,255,.9);


border:

1px solid #e5e7eb;


box-shadow:

0 15px 35px rgba(16,24,40,.06);


transition:.3s;


}





.prototype-card:hover{


transform:

translateY(-4px);


box-shadow:

0 20px 45px rgba(104,41,186,.12);


}






.prototype-card svg{


width:22px;


height:22px;


color:#6829ba;


margin-bottom:14px;


}






.prototype-card h4{


font-size:14px;


margin:

0 0 8px;


}





.prototype-card p{


font-size:13px;


line-height:1.6;


color:#667085;


}

/* =========================
 CONTACT FORM
========================= */

/* =========================
 CONTACT FORM
========================= */


.chat-contact-form{


margin-top:20px;


display:grid;


grid-template-columns:

1fr 1fr;



gap:14px;


padding-top:20px;


border-top:

1px solid #eaecf0;


}





.chat-contact-form input,
.chat-contact-form textarea{


width:100%;



border-radius:

16px;



border:

1px solid #e5e7eb;



background:white;



padding:

14px 16px;



font-size:14px;



outline:none;



transition:.25s ease;


}





.chat-contact-form textarea{


grid-column:

1 / -1;



height:110px;


resize:none;



font-family:

inherit;


}






.chat-contact-form input:focus,
.chat-contact-form textarea:focus{


border-color:

#7c3aed;



box-shadow:

0 0 0 4px rgba(124,58,237,.08);


}






.chat-contact-form button{


width:max-content;



height:44px;



border:none;



border-radius:

14px;



padding:

0 20px;



background:

linear-gradient(

135deg,

#6829ba,

#4f46e5

);



color:white;



font-size:14px;


font-weight:700;



cursor:pointer;



box-shadow:

0 14px 35px rgba(104,41,186,.25);


}


/* inputs */


.chat-contact-form input,
.chat-contact-form textarea{


width:100%;


border:none;


outline:none;


border-radius:16px;


background:#ffffff;


border:1px solid #e5e7eb;


box-shadow:

0 10px 30px rgba(16,24,40,.06);



font-size:14px;


color:#344054;


transition:.25s ease;


}



.chat-contact-form input{


height:48px;


padding:0 16px;


}




.chat-contact-form textarea{


grid-column:1 / -1;


height:120px;


padding:16px;


resize:none;


font-family:inherit;


}





.chat-contact-form input:focus,
.chat-contact-form textarea:focus{


border-color:#7c3aed;


box-shadow:

0 0 0 4px rgba(124,58,237,.10);


}






.chat-contact-form input::placeholder,
.chat-contact-form textarea::placeholder{


color:#98a2b3;


}




/* =========================
 CONTACT DETAILS PREMIUM
========================= */


.contact-detail-card{


margin:22px 0;


display:grid;


grid-template-columns:

repeat(2,1fr);


gap:16px;


}


/* each contact card */

.contact-detail-card > div{


min-height:70px;


display:flex;


align-items:center;


gap:16px;


padding:

18px 20px;



border-radius:

18px;



background:

rgba(255,255,255,.85);



border:

1px solid #e5e7eb;



box-shadow:

0 12px 35px rgba(16,24,40,.06);



transition:.25s ease;


}


/* location full width */

.contact-detail-card > div:nth-child(3){


grid-column:

1 / -1;


}




.contact-detail-card > div:hover{


transform:

translateY(-3px);


box-shadow:

0 18px 45px rgba(104,41,186,.12);


border-color:#d8b4fe;


}




/* icon */

.contact-detail-card svg{


width:22px;


height:22px;


min-width:22px;


color:#7c3aed;


}



/* label */

.contact-detail-card span{


min-width:80px;


font-size:11px;


font-weight:800;


letter-spacing:.08em;


text-transform:uppercase;


color:#667085;


}




/* value */

.contact-detail-card strong{


flex:1;


font-size:14px;


font-weight:600;


color:#6a6175;


word-break:break-word;


}





/* copy button */

.contact-detail-card button{


height:38px;


padding:

0 18px;


border-radius:12px;


border:

1px solid #d0d5dd;


background:#fff;


font-size:13px;


font-weight:700;


color:#344054;


cursor:pointer;


transition:.25s ease;


}




.contact-detail-card button:hover{


background:#f5f3ff;


color:#6829ba;


border-color:#c4b5fd;


}







/* =========================
 CONTACT FORM
========================= */


.chat-contact-form{


margin-top:24px;


padding-top:22px;


border-top:

1px solid #e5e7eb;



display:grid;


grid-template-columns:

1fr 1fr;


gap:16px;


}





.chat-contact-form input,
.chat-contact-form textarea{


width:100%;


border-radius:18px;


border:

1px solid #e5e7eb;


background:

rgba(255,255,255,.9);


font-size:14px;


outline:none;


color:#344054;


box-shadow:

0 10px 30px rgba(16,24,40,.04);


transition:.25s ease;


}




.chat-contact-form input{


height:54px;


padding:

0 18px;


}





.chat-contact-form textarea{


grid-column:

1 / -1;


height:140px;


padding:

18px;


resize:none;


font-family:inherit;


}





.chat-contact-form input:focus,
.chat-contact-form textarea:focus{


border-color:#7c3aed;


box-shadow:

0 0 0 4px rgba(124,58,237,.08);


}




@media(max-width:600px){


.contact-detail-card{


grid-template-columns:1fr;


}


.contact-detail-card > div:nth-child(3){


grid-column:auto;


}


.chat-contact-form{


grid-template-columns:1fr;


}


}

/* =========================
 CASE STUDY GALLERY POPUP
========================= */


.gallery-modal{


position:fixed;


inset:0;


background:

rgba(15,23,42,.85);


backdrop-filter:

blur(12px);



z-index:9999;



display:flex;


align-items:center;


justify-content:center;


}







.gallery-view{


position:relative;


width:90vw;


height:85vh;



display:grid;


grid-template-columns:

1fr 120px;


gap:20px;


}





.gallery-main{


display:flex;


align-items:center;


justify-content:center;



border-radius:

24px;


overflow:hidden;


}






.gallery-main img{


max-width:100%;


max-height:100%;


object-fit:contain;


}






.gallery-thumbs{


display:flex;


flex-direction:column;


gap:12px;



overflow:auto;


padding:

10px;


}





.gallery-thumbs img{


width:90px;


height:70px;



object-fit:cover;



border-radius:

12px;



cursor:pointer;



opacity:.6;



border:

2px solid transparent;



transition:.25s;


}







.gallery-thumbs img:hover{


opacity:1;



border-color:

#7c3aed;


transform:

scale(1.05);


}







.gallery-close{


position:absolute;


right:-10px;


top:-45px;



width:38px;


height:38px;



border-radius:50%;


border:0;



color:white;
background: none;


font-size:44px;



cursor:pointer;


}
@media(max-width:768px){


.gallery-view{


grid-template-columns:1fr;


}



.gallery-thumbs{


flex-direction:row;


}


}


/* ==================================
   MOBILE RESPONSIVE FIX
================================== */


@media(max-width:768px){


/* Main chat area leave space for input + mobile browser */

.chat-response{


padding:

20px 18px 170px !important;


height:

calc(100dvh - 90px);


overflow-y:auto;


}





/* Chat input safe position */


.chat-input-wrap,
.chat-input-area{


position:fixed;


left:16px;


right:16px;


bottom:

calc(env(safe-area-inset-bottom) + 18px);


z-index:100;


}






.chat-input{


height:58px;


border-radius:18px;


}







/* ======================
 UX PROCESS MOBILE
====================== */


.ux-flow{


margin-top:20px;


padding-bottom:40px;


}





.ux-flow svg{


display:none;


}






.ux-flow-items{


display:flex !important;


flex-direction:column;


gap:16px;


}






.ux-flow-step{


width:100%;


min-height:auto;



padding:

20px 18px;



border-radius:

18px;



}





.ux-circle{


width:40px;


height:40px;



font-size:14px;


}







.ux-flow-step h4{


font-size:14px;


}





.ux-flow-step p{


font-size:12px;


line-height:1.5;


}






/* reduce welcome spacing */


.welcome-card{


margin-top:10px!important;


padding:

10px 16px!important;


}



.empty-ai-state{


margin-top:40px;


}




}
/* =========================
 TOOL LOGO GRID
========================= */


.tool-title{


margin-top:25px;


font-size:15px;


font-weight:800;


color:#101828;


}





.tool-logo-grid{


display:grid;


grid-template-columns:

repeat(auto-fill,minmax(90px,1fr));



gap:16px;


margin-top:15px;


}






.tool-logo-card{


height:95px;



display:flex;


flex-direction:column;


align-items:center;


justify-content:center;


gap:10px;



border-radius:18px;



background:

rgba(255,255,255,.85);



border:

1px solid #e5e7eb;



box-shadow:

0 12px 30px rgba(16,24,40,.05);



transition:.25s ease;


}







.tool-logo-card:hover{


transform:

translateY(-4px);



box-shadow:

0 18px 40px rgba(104,41,186,.15);


}







.tool-logo-card img{


width:40px;


height:40px;



object-fit:contain;


}







.tool-logo-card span{


font-size:12px;


font-weight:700;


color:#344054;


text-align:center;


}


@media(max-width:600px){


.tool-logo-grid{


grid-template-columns:

repeat(3,1fr);


gap:12px;


}



.tool-logo-card{


height:85px;


}



.tool-logo-card img{


width:34px;


height:34px;


}


}

/* =========================
 COPY ICON BUTTON
========================= */

.copy-icon-btn{


width:38px;

height:38px;


padding:0!important;


border-radius:12px!important;


display:flex;


align-items:center;


justify-content:center;


background:#ffffff;


border:

1px solid #e5e7eb!important;


cursor:pointer;


transition:.25s ease;


}



.copy-icon-btn svg{


width:17px!important;


height:17px!important;


color:#6a6175;


}



.copy-icon-btn:hover{


background:#f5f3ff;


border-color:#6a6175!important;


transform:

translateY(-2px);


}

/* =========================
 PROTOTYPE TOOLS
========================= */

.prototype-tool-grid{

display:flex;

flex-wrap:wrap;

gap:16px;

margin-top:18px;

}


/* tool card */

.prototype-tool-grid .tool-logo-card{

width:95px;

height:95px;


display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:10px;


border-radius:18px;


background:#fff;


border:

1px solid #e5e7eb;


box-shadow:

0 12px 30px rgba(16,24,40,.06);


}


/* image */

.prototype-tool-grid img{

width:40px;

height:40px;

object-fit:contain;

}


/* label */

.prototype-tool-grid span{

font-size:12px;

font-weight:700;

color:#344054;

}


/* =========================
 OPEN TO WORK
========================= */


.open-work-badge{


margin-top:18px;


width:max-content;


display:flex;


align-items:center;


gap:8px;


padding:

8px 16px;


border-radius:

50px;


background:

#ecfdf3;


color:

#027a48;


font-size:

13px;


font-weight:

700;


}




.open-work-badge span{


width:8px;


height:8px;


border-radius:

50%;


background:#12b76a;


box-shadow:

0 0 0 6px rgba(18,183,106,.15);


animation:

onlinePulse 1.8s infinite;


}





@keyframes onlinePulse{


0%{

box-shadow:0 0 0 0 rgba(18,183,106,.4);

}


70%{

box-shadow:0 0 0 8px rgba(18,183,106,0);

}


100%{

box-shadow:0 0 0 0 rgba(18,183,106,0);

}


}

/* ======================
 PRODUCT TYPES
====================== */

.product-type-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:18px;

margin-top:20px;

}


.product-type-card{

padding:20px;

border-radius:22px;

background:#fff;

border:1px solid #e5e7eb;

box-shadow:
0 15px 35px rgba(16,24,40,.06);

transition:.25s ease;

}


.product-type-card:hover{

transform:translateY(-4px);

box-shadow:
0 20px 45px rgba(104,41,186,.12);

}



.type-icon{

width:42px;

height:42px;

border-radius:14px;

display:flex;

align-items:center;

justify-content:center;


background:#f5f3ff;

color:#6829ba;

margin-bottom:14px;

}


.type-icon svg{

width:20px;

height:20px;

}



.product-type-card h4{

font-size:14px;

font-weight:800;

margin-bottom:12px;

color:#101828;

}



.product-type-card ul{

padding:0;

margin:0;

list-style:none;

}



.product-type-card li{

font-size:13px;

color:#475467;

padding:

6px 0;

border-bottom:

1px solid #f2f4f7;

}


.product-type-card li:last-child{

border-bottom:0;

}


/* =========================
 CASE STUDY RESULT UI
========================= */


.case-study-view{

max-width:900px;

}


.case-study-view h3{

font-size:22px;

font-weight:600;

line-height:1.3;

margin-bottom:10px;

color:#101828;

}


.case-study-view > span{

display:inline-flex;

padding:7px 14px;

border-radius:30px;

background:#f5f3ff;

color:#6829ba;

font-size:12px;

font-weight:700;

margin-bottom:22px;

}


/* SECTION TITLE */

.case-study-view h4{

font-size:15px;

font-weight:600;

margin:

24px 0 12px;

color:#101828;

position:relative;

}


.case-study-view h4:before{

content:"";

display:inline-block;

width:6px;

height:18px;

background:#6829ba;

border-radius:10px;

margin-right:8px;

vertical-align:middle;

}



/* PARAGRAPH */

.case-study-view p{

font-size:14px;

line-height:1.7;

color:#475467;

}



/* LIST STYLE */

.case-study-view ul{

margin:0;

padding:0;

list-style:none;

display:grid;

gap:10px;

}


.case-study-view li{

position:relative;

padding:

12px 14px 12px 38px;

background:#ffffff;

border:

1px solid #e5e7eb;

border-radius:14px;

font-size:13px;

line-height:1.5;

color:#344054;

box-shadow:

0 8px 20px rgba(16,24,40,.04);

}


.case-study-view li:before{

content:"✓";

position:absolute;

left:14px;

top:12px;

font-weight:800;

color:#6829ba;

}




/* =========================
 ONSITE EXPERIENCE CARD
========================= */


.onsite-card{

margin:

22px 0;

padding:20px;

border-radius:22px;

background:

linear-gradient(
135deg,
#faf5ff,
#ffffff
);

border:

1px solid #eadcff;

box-shadow:

0 16px 40px rgba(104,41,186,.08);

}


.onsite-card h4{

margin-top:0;

}


.onsite-card p{

font-size:13px;

color:#475467;

}



/* =========================
 CASE IMAGES
========================= */


.case-images{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(150px,1fr));

gap:14px;

margin-top:14px;

}


.case-images img{

width:100%;

height:120px;

object-fit:cover;

border-radius:16px;

cursor:pointer;

border:

1px solid #e5e7eb;

transition:.25s ease;

}


.case-images img:hover{

transform:

scale(1.04);

box-shadow:

0 15px 35px rgba(16,24,40,.15);

}
/* =========================
 CASE STUDY CLICK CARD
========================= */

.ai-project-card{

cursor:pointer;

transition:
all .25s ease;

}


.ai-project-card:hover{

transform:
translateY(-5px);

border-color:#6829ba;

box-shadow:
0 18px 45px rgba(104,41,186,.14);

}


.ai-project-card h4{

pointer-events:none;

}


.case-tags{

pointer-events:none;

}

/* =========================
 CONTACT MOBILE FIX
========================= */

@media(max-width:600px){


.contact-detail-card > div{

display:grid;

grid-template-columns:
32px 1fr auto;

align-items:center;

gap:10px;

padding:18px;

}



/* icon */

.contact-detail-card svg{

grid-row:
1 / span 2;

}



/* LABEL */

.contact-detail-card span{

grid-column:2 / 4;

font-size:11px;

font-weight:800;

letter-spacing:.08em;

text-transform:uppercase;

color:#667085;

}



/* VALUE */

.contact-detail-card strong{

grid-column:2;

font-size:14px;

font-weight:700;

color:#101828;

word-break:normal;

overflow-wrap:anywhere;

}



/* COPY BUTTON */

.copy-icon-btn{

grid-column:3;

grid-row:2;

width:36px;

height:36px;

border-radius:12px;

display:flex;

align-items:center;

justify-content:center;

}



}