/*==================================================
PIXIMR STUDIO
STYLE.CSS
Production Version
Part 1A / 5
Reset • Root • Base
==================================================*/


/*==================================================
RESET
==================================================*/

*,
*::before,
*::after{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:"Manrope",sans-serif;

background:#08080d;

color:#ffffff;

overflow-x:hidden;

line-height:1.7;

text-rendering:optimizeLegibility;

-webkit-font-smoothing:antialiased;

}

img,
video{

display:block;

max-width:100%;

}

a{

text-decoration:none;

color:inherit;

}

button,
input,
textarea{

font:inherit;

border:none;

outline:none;

background:none;

}


/*==================================================
ROOT
==================================================*/

:root{

--bg:#08080d;

--surface:#111118;

--surface-2:#181821;

--white:#ffffff;

--text:#d7d7df;

--muted:#9898a8;

--violet:#7b5cff;

--violet-dark:#5b42ef;

--blue:#57a7ff;

--cyan:#7edfff;

--glass:rgba(255,255,255,.05);

--glass-border:rgba(255,255,255,.08);

--radius-sm:16px;

--radius:26px;

--radius-lg:36px;

--shadow-sm:

0 10px 30px rgba(0,0,0,.25);

--shadow:

0 24px 70px rgba(0,0,0,.35);

--shadow-lg:

0 40px 120px rgba(0,0,0,.55);

--transition:.35s ease;

--container:min(1240px,92%);

}


/*==================================================
SELECTION
==================================================*/

::selection{

background:var(--violet);

color:#fff;

}


/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#09090f;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(

180deg,

var(--violet),

var(--violet-dark)

);

border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

background:#8b73ff;

}


/*==================================================
TYPOGRAPHY
==================================================*/

h1,
h2,
h3,
h4{

font-weight:800;

letter-spacing:-1px;

line-height:1.08;

}

h1{

font-size:clamp(60px,10vw,130px);

}

h2{

font-size:clamp(38px,5vw,64px);

}

h3{

font-size:30px;

}

p{

font-size:17px;

color:var(--text);

line-height:1.9;

}


/*==================================================
CONTAINER
==================================================*/

.container{

width:var(--container);

margin:auto;

}

section{

position:relative;

}
/*==================================================
BUTTONS
==================================================*/

.primary-btn,
.secondary-btn,
.contact-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:12px;

padding:16px 34px;

border-radius:999px;

font-weight:700;

cursor:pointer;

transition:var(--transition);

}

.primary-btn{

background:linear-gradient(

135deg,

var(--violet),

var(--violet-dark)

);

color:#fff;

box-shadow:

0 18px 40px rgba(123,92,255,.35);

}

.primary-btn:hover{

transform:translateY(-4px);

box-shadow:

0 24px 55px rgba(123,92,255,.45);

}

.secondary-btn{

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(24px);

}

.secondary-btn:hover{

background:rgba(255,255,255,.08);

transform:translateY(-4px);

}


/*==================================================
SECTION TAG
==================================================*/

.section-tag{

display:inline-flex;

align-items:center;

padding:10px 18px;

border-radius:999px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

font-size:13px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

margin-bottom:26px;

backdrop-filter:blur(18px);

}

.section-heading{

width:var(--container);

margin:auto;

text-align:center;

padding-bottom:70px;

}

.section-heading p{

max-width:700px;

margin:18px auto 0;

}


/*==================================================
BACKGROUND
==================================================*/

.ambient{

position:fixed;

border-radius:50%;

filter:blur(120px);

pointer-events:none;

z-index:-2;

animation:ambientFloat 18s ease-in-out infinite;

}

.ambient-1{

width:520px;

height:520px;

top:-180px;

left:-150px;

background:rgba(123,92,255,.26);

}

.ambient-2{

width:460px;

height:460px;

right:-120px;

bottom:-160px;

background:rgba(87,167,255,.20);

animation-delay:5s;

}

.ambient-3{

width:340px;

height:340px;

left:45%;

top:18%;

background:rgba(150,120,255,.12);

animation-delay:9s;

}

@keyframes ambientFloat{

0%{

transform:translateY(0) scale(1);

}

50%{

transform:translateY(-40px) scale(1.08);

}

100%{

transform:translateY(0) scale(1);

}

}

.noise{

position:fixed;

inset:0;

pointer-events:none;

z-index:-1;

opacity:.03;

background-image:url("https://www.transparenttextures.com/patterns/noise.png");

}
/*==================================================
NAVBAR
==================================================*/

.navbar{

position:fixed;

top:0;

left:0;

width:100%;

height:88px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 5%;

background:rgba(8,8,13,.55);

backdrop-filter:blur(24px);

border-bottom:1px solid rgba(255,255,255,.06);

z-index:1000;

transition:var(--transition);

}

.nav-logo{

flex-shrink:0;

font-size:30px;

font-weight:800;

letter-spacing:-1px;

}

.nav-logo a{

color:#fff;

}

.nav-menu{

margin-left:auto;

display:flex;

align-items:center;

gap:34px;

}

.nav-menu a{

position:relative;

font-size:15px;

font-weight:600;

color:rgba(255,255,255,.78);

transition:var(--transition);

}

.nav-menu a:hover,

.nav-menu a.active{

color:#ffffff;

}

.nav-menu a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

border-radius:999px;

background:linear-gradient(

90deg,

var(--violet),

var(--blue)

);

transition:.35s;

}

.nav-menu a:hover::after,

.nav-menu a.active::after{

width:100%;

}

.navbar.scrolled{

height:78px;

background:rgba(8,8,13,.82);

box-shadow:

0 16px 40px rgba(0,0,0,.30);

}


/*==================================================
PAGE HERO
==================================================*/

.page-hero{

padding:180px 5% 110px;

text-align:center;

}

.page-hero h1{

margin-bottom:24px;

background:linear-gradient(

180deg,

#ffffff,

#bebefb

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero-description{

max-width:760px;

margin:auto;

font-size:20px;

color:var(--text);

line-height:1.9;

}
/*==================================================
HERO
==================================================*/

.hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

padding:140px 5% 100px;

overflow:hidden;

}

.hero video{

position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:cover;

transform:scale(1.05);

z-index:-3;

}

.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

rgba(8,8,13,.28),

rgba(8,8,13,.82)

),

radial-gradient(

circle at top,

rgba(123,92,255,.16),

transparent 60%

);

z-index:-2;

}

.hero::before{

content:"";

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

width:720px;

height:720px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(123,92,255,.18),

transparent 72%

);

filter:blur(80px);

animation:heroGlow 8s ease-in-out infinite;

z-index:-1;

}

@keyframes heroGlow{

0%{

transform:translate(-50%,-50%) scale(1);

opacity:.6;

}

50%{

transform:translate(-50%,-50%) scale(1.15);

opacity:1;

}

100%{

transform:translate(-50%,-50%) scale(1);

opacity:.6;

}

}

.hero-content{

width:min(900px,95%);

margin:auto;

text-align:center;

}

.eyebrow{

display:inline-flex;

align-items:center;

justify-content:center;

padding:12px 22px;

margin-bottom:26px;

border-radius:999px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(20px);

font-size:13px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

}

.hero h1{

margin-bottom:28px;

background:

linear-gradient(

180deg,

#ffffff,

#bfbffd

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero-description{

max-width:760px;

margin:auto;

font-size:20px;

line-height:1.9;

color:var(--text);

}

.hero-buttons{

margin-top:48px;

display:flex;

justify-content:center;

align-items:center;

gap:22px;

flex-wrap:wrap;

}
/*==================================================
EXPLORE
==================================================*/

.explore{

padding:140px 0;

}

.project-slider{

width:var(--container);

margin:auto;

display:grid;

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

gap:34px;

}


/*==================================================
PROJECT CARD
==================================================*/

.project-card{

position:relative;

display:block;

overflow:hidden;

border-radius:32px;

background:var(--glass);

border:1px solid var(--glass-border);

backdrop-filter:blur(24px);

box-shadow:var(--shadow);

transition:.45s ease;

}

.project-card:hover{

transform:translateY(-10px);

border-color:rgba(123,92,255,.35);

box-shadow:

0 35px 70px rgba(123,92,255,.12),

var(--shadow-lg);

}

.project-card::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

135deg,

transparent,

rgba(255,255,255,.08),

transparent

);

opacity:0;

transition:.45s;

pointer-events:none;

}

.project-card:hover::after{

opacity:1;

}

.project-image{

position:relative;

height:520px;

overflow:hidden;

}

.project-image img{

width:100%;

height:100%;

object-fit:cover;

transition:1s ease;

}

.project-card:hover .project-image img{

transform:scale(1.08);

}

.project-gradient{

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

transparent 20%,

rgba(8,8,13,.82) 100%

);

}

.project-content{

position:absolute;

left:32px;

right:32px;

bottom:30px;

z-index:2;

}

.project-category{

display:inline-flex;

align-items:center;

padding:8px 16px;

margin-bottom:18px;

border-radius:999px;

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(20px);

font-size:12px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

}

.project-content h3{

font-size:34px;

margin-bottom:14px;

}

.project-content p{

font-size:16px;

line-height:1.8;

max-width:340px;

color:var(--text);

}
/*==================================================
SIGNATURE
==================================================*/

.signature{

padding:170px 0;

position:relative;

overflow:hidden;

}

.signature::before{

content:"";

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

width:720px;

height:720px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(123,92,255,.10),

transparent 70%

);

filter:blur(90px);

pointer-events:none;

}

.signature-content{

position:relative;

z-index:2;

width:min(900px,90%);

margin:auto;

text-align:center;

}

.signature-content h2{

margin-bottom:28px;

}

.signature-content p{

max-width:760px;

margin:auto;

font-size:20px;

line-height:2;

color:var(--text);

}

.signature-actions{

margin-top:45px;

display:flex;

justify-content:center;

align-items:center;

gap:20px;

flex-wrap:wrap;

}


/*==================================================
REVEAL ANIMATION
==================================================*/

.reveal{

opacity:0;

transform:translateY(70px);

transition:

opacity .9s ease,

transform .9s ease;

will-change:opacity,transform;

}

.reveal.show{

opacity:1;

transform:translateY(0);

}


/*==================================================
FADE ANIMATION
==================================================*/

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(45px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.hero-content>*{

animation:fadeUp .9s ease both;

}

.hero-content h1{

animation-delay:.15s;

}

.hero-description{

animation-delay:.30s;

}

.hero-buttons{

animation-delay:.45s;

}
/*==================================================
ABOUT PAGE
==================================================*/

.about-intro{

padding:120px 0;

}

.about-grid{

width:var(--container);

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:start;

}

.about-grid h2{

margin-bottom:24px;

max-width:520px;

}

.about-grid p{

font-size:18px;

line-height:2;

color:var(--text);

}


/*==================================================
ABOUT VALUES
==================================================*/

.about-values{

padding:140px 0;

}

.values-grid{

width:var(--container);

margin:auto;

display:grid;

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

gap:34px;

}

.value-card{

padding:42px;

border-radius:30px;

background:var(--glass);

border:1px solid var(--glass-border);

backdrop-filter:blur(22px);

transition:.4s ease;

box-shadow:var(--shadow-sm);

}

.value-card:hover{

transform:translateY(-8px);

border-color:rgba(123,92,255,.30);

box-shadow:var(--shadow);

}

.value-number{

display:inline-flex;

margin-bottom:20px;

font-size:14px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

color:var(--violet);

}

.value-card h3{

margin-bottom:16px;

font-size:28px;

}

.value-card p{

font-size:16px;

line-height:1.9;

}


/*==================================================
SHARED PAGE SPACING
==================================================*/

.gallery-grid,

.journal-grid,

.project-section{

padding:140px 0;

}

.page-section{

padding:120px 0;

}

.page-section+.page-section{

padding-top:0;

}
/*==================================================
GALLERY
==================================================*/

.gallery-grid{

padding:140px 0;

}

.gallery-layout{

width:var(--container);

margin:auto;

display:grid;

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

gap:28px;

}

.gallery-item{

position:relative;

overflow:hidden;

border-radius:28px;

cursor:pointer;

background:#111118;

box-shadow:var(--shadow);

}

.gallery-item img{

width:100%;

height:100%;

aspect-ratio:4/5;

object-fit:cover;

transition:.8s ease;

}

.gallery-item:hover img{

transform:scale(1.08);

}

.gallery-item::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

transparent,

rgba(8,8,13,.75)

);

opacity:0;

transition:.35s;

}

.gallery-item:hover::after{

opacity:1;

}


/*==================================================
JOURNAL
==================================================*/

.journal-grid{

padding:140px 0;

}

.journal-layout{

width:var(--container);

margin:auto;

display:grid;

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

gap:32px;

}

.journal-card{

display:flex;

flex-direction:column;

overflow:hidden;

border-radius:28px;

background:var(--glass);

border:1px solid var(--glass-border);

backdrop-filter:blur(20px);

transition:.4s ease;

box-shadow:var(--shadow-sm);

}

.journal-card:hover{

transform:translateY(-10px);

border-color:rgba(123,92,255,.25);

box-shadow:var(--shadow);

}

.journal-image{

overflow:hidden;

}

.journal-image img{

width:100%;

aspect-ratio:16/10;

object-fit:cover;

transition:.8s ease;

}

.journal-card:hover .journal-image img{

transform:scale(1.08);

}

.journal-content{

padding:30px;

}

.journal-date{

display:inline-block;

margin-bottom:14px;

font-size:13px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

color:var(--violet);

}

.journal-content h3{

margin-bottom:14px;

font-size:28px;

}

.journal-content p{

font-size:16px;

line-height:1.8;

margin-bottom:22px;

}

.journal-content a{

font-weight:700;

color:#fff;

transition:.3s;

}

.journal-content a:hover{

color:var(--violet);

}
/*==================================================
PROJECT PAGES
==================================================*/

.project-section{

padding:140px 0;

}

.project-layout{

width:var(--container);

margin:auto;

display:grid;

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

gap:70px;

align-items:center;

}

.project-text h2{

margin-bottom:24px;

max-width:560px;

}

.project-text p{

font-size:18px;

line-height:2;

color:var(--text);

margin-bottom:24px;

}

.project-image-large{

position:relative;

overflow:hidden;

border-radius:32px;

background:#111118;

box-shadow:var(--shadow);

}

.project-image-large img{

width:100%;

display:block;

transition:1s ease;

}

.project-image-large:hover img{

transform:scale(1.06);

}


/*==================================================
PROJECT FEATURES
==================================================*/

.features-grid{

width:var(--container);

margin:auto;

display:grid;

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

gap:30px;

}

.feature-card{

padding:36px;

border-radius:28px;

background:var(--glass);

border:1px solid var(--glass-border);

backdrop-filter:blur(20px);

transition:.35s ease;

}

.feature-card:hover{

transform:translateY(-8px);

border-color:rgba(123,92,255,.30);

box-shadow:var(--shadow);

}

.feature-card h3{

font-size:26px;

margin-bottom:16px;

}

.feature-card p{

font-size:16px;

line-height:1.9;

}


/*==================================================
PROJECT CTA
==================================================*/

.project-cta{

padding:140px 0;

text-align:center;

}

.project-cta p{

max-width:700px;

margin:22px auto 42px;

}

.project-cta .primary-btn{

min-width:220px;

}
/*==================================================
CONTACT
==================================================*/

.contact{

padding:170px 0;

position:relative;

overflow:hidden;

}

.contact::before{

content:"";

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

width:760px;

height:760px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(123,92,255,.12),

transparent 72%

);

filter:blur(90px);

pointer-events:none;

}

.contact-content{

position:relative;

z-index:2;

width:min(900px,92%);

margin:auto;

text-align:center;

}

.contact-label{

display:inline-flex;

padding:10px 18px;

margin-bottom:22px;

border-radius:999px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

font-size:13px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

}

.contact-content h2{

margin-bottom:24px;

}

.contact-text{

max-width:760px;

margin:auto;

font-size:18px;

line-height:2;

color:var(--text);

}

.contact-actions{

display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

gap:20px;

margin-top:48px;

}


/*==================================================
FOOTER
==================================================*/

.footer{

width:var(--container);

margin:auto;

padding:80px 0;

display:flex;

justify-content:space-between;

align-items:center;

border-top:1px solid rgba(255,255,255,.08);

gap:40px;

}

.footer-logo{

font-size:30px;

font-weight:800;

letter-spacing:-1px;

margin-bottom:10px;

}

.footer-left p{

color:var(--muted);

}

.footer-right{

display:flex;

align-items:center;

gap:28px;

flex-wrap:wrap;

}

.footer-right a{

font-size:15px;

color:rgba(255,255,255,.72);

transition:var(--transition);

}

.footer-right a:hover{

color:#fff;

}
/*==================================================
AI CHATBOT
==================================================*/

.piximr-ai-bubble{

position:fixed;

right:28px;

bottom:28px;

width:72px;

height:72px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

background:linear-gradient(

135deg,

var(--violet),

var(--violet-dark)

);

box-shadow:

0 20px 45px rgba(123,92,255,.35);

z-index:999;

transition:.35s ease;

}

.piximr-ai-bubble:hover{

transform:translateY(-6px) scale(1.05);

}

.piximr-ai-bubble img{

width:34px;

height:34px;

object-fit:contain;

}

.piximr-chat-window{

position:fixed;

right:28px;

bottom:118px;

width:380px;

height:560px;

background:#111118;

border:1px solid rgba(255,255,255,.08);

border-radius:28px;

overflow:hidden;

box-shadow:var(--shadow-lg);

display:none;

flex-direction:column;

z-index:998;

}

.piximr-chat-window.active{

display:flex;

}

.chat-header{

padding:20px 24px;

display:flex;

justify-content:space-between;

align-items:center;

background:rgba(255,255,255,.04);

border-bottom:1px solid rgba(255,255,255,.08);

}

.chat-body{

flex:1;

padding:24px;

overflow-y:auto;

}

.chat-footer{

padding:18px;

border-top:1px solid rgba(255,255,255,.08);

display:flex;

gap:12px;

}

.chat-footer input{

flex:1;

padding:14px 18px;

border-radius:999px;

background:#1a1a24;

color:#fff;

}

.chat-footer button{

padding:14px 22px;

border-radius:999px;

cursor:pointer;

background:linear-gradient(

135deg,

var(--violet),

var(--violet-dark)

);

color:#fff;

font-weight:700;

}


/*==================================================
UTILITY
==================================================*/

.text-center{

text-align:center;

}

.mt-1{margin-top:16px;}
.mt-2{margin-top:24px;}
.mt-3{margin-top:40px;}
.mt-4{margin-top:60px;}

.mb-1{margin-bottom:16px;}
.mb-2{margin-bottom:24px;}
.mb-3{margin-bottom:40px;}
.mb-4{margin-bottom:60px;}

.hidden{

display:none;

}


/*==================================================
GLOBAL ANIMATIONS
==================================================*/

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}

.float{

animation:float 5s ease-in-out infinite;

}

.pulse{

animation:pulse 3s ease-in-out infinite;

}
/*==================================================
RESPONSIVE
1200px
==================================================*/

@media(max-width:1200px){

.project-slider,
.gallery-layout,
.journal-layout,
.values-grid,
.features-grid{

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

}

.project-layout,
.about-grid{

grid-template-columns:1fr;

gap:60px;

}

.hero h1{

font-size:86px;

}

}


/*==================================================
992px
==================================================*/

@media(max-width:992px){

.navbar{

padding:0 30px;

}

.nav-menu{

gap:24px;

}

.hero{

padding:150px 30px 90px;

}

.hero h1{

font-size:68px;

}

.page-hero{

padding:160px 30px 90px;

}

.footer{

flex-direction:column;

align-items:flex-start;

}

}


/*==================================================
768px
==================================================*/

@media(max-width:768px){

.navbar{

padding:0 20px;

height:74px;

}

.nav-menu{

display:none;

}

.hero{

padding:130px 20px 80px;

min-height:auto;

}

.hero h1{

font-size:52px;

}

.hero-description{

font-size:17px;

}

.hero-buttons{

flex-direction:column;

width:100%;

}

.hero-buttons a{

width:100%;

}

.page-hero{

padding:140px 20px 70px;

}

.page-hero h1{

font-size:46px;

}

.project-slider,
.gallery-layout,
.journal-layout,
.values-grid,
.features-grid{

grid-template-columns:1fr;

}

.project-image{

height:420px;

}

.contact-actions{

flex-direction:column;

}

.contact-btn{

width:100%;

}

.footer{

text-align:center;

align-items:center;

}

.footer-right{

justify-content:center;

}

}


/*==================================================
576px
==================================================*/

@media(max-width:576px){

.hero h1{

font-size:40px;

}

.page-hero h1{

font-size:36px;

}

.section-heading h2,
.about-grid h2,
.signature-content h2,
.contact-content h2{

font-size:34px;

}

.project-content{

left:22px;

right:22px;

bottom:22px;

}

.project-content h3{

font-size:28px;

}

.project-image{

height:360px;

}

.footer-logo{

font-size:26px;

}

}


/*==================================================
420px
==================================================*/

@media(max-width:420px){

.hero{

padding:120px 16px 70px;

}

.hero h1{

font-size:34px;

}

.hero-description{

font-size:15px;

}

.page-hero{

padding:120px 16px 60px;

}

.page-hero h1{

font-size:30px;

}

.project-image{

height:300px;

}

.project-content{

left:18px;

right:18px;

bottom:18px;

}

.project-content h3{

font-size:24px;

}

.piximr-chat-window{

width:calc(100vw - 20px);

height:450px;

right:10px;

bottom:90px;

}

.piximr-ai-bubble{

right:14px;

bottom:14px;

width:60px;

height:60px;

}

}


/*==================================================
FINAL POLISH
==================================================*/

.project-card,
.value-card,
.feature-card,
.journal-card,
.gallery-item,
.contact-btn,
.primary-btn,
.secondary-btn{

will-change:transform;

}

.project-card:hover,
.value-card:hover,
.feature-card:hover,
.journal-card:hover{

transform:translateY(-10px);

}

.primary-btn:active,
.secondary-btn:active,
.contact-btn:active{

transform:scale(.98);

}

img{

user-select:none;

-webkit-user-drag:none;

}

body{

overflow-x:hidden;

}
/*==================================================
PIXIMR AI CHAT FIX
==================================================*/

.chat-header{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 20px;

font-size:18px;

font-weight:700;

color:#fff;

}

#chat-close{

cursor:pointer;

font-size:22px;

opacity:.7;

transition:.3s;

}

#chat-close:hover{

opacity:1;

}

.chat-messages{

flex:1;

padding:20px;

overflow-y:auto;

display:flex;

flex-direction:column;

gap:14px;

}

.chat-messages p{

padding:14px 16px;

border-radius:16px;

font-size:15px;

line-height:1.7;

margin:0;

}

.bot-message{

background:#1d1d29;

color:#fff;

align-self:flex-start;

max-width:85%;

}

.user-message{

background:linear-gradient(135deg,#7b5cff,#5b42ef);

color:#fff;

align-self:flex-end;

max-width:85%;

}

.chat-input-area{

display:flex;

gap:12px;

padding:16px;

border-top:1px solid rgba(255,255,255,.08);

background:#111118;

}

#chat-input{

flex:1;

padding:14px 18px;

background:#1b1b26;

border:1px solid rgba(255,255,255,.08);

border-radius:999px;

color:#fff;

font-size:15px;

}

#chat-input::placeholder{

color:#8e8ea0;

}

#chat-send{

padding:0 22px;

border-radius:999px;

background:linear-gradient(135deg,#7b5cff,#5b42ef);

color:#fff;

font-weight:700;

cursor:pointer;

transition:.3s;

}

#chat-send:hover{

transform:translateY(-2px);

}