@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap');
:root{
 --bg-color:#050505;
 --bg-main:#050505;
 --bg-accent:#0a0a0a;
 --text-primary:#ffffff;
 --text-secondary:#a0a0a0;
 --accent:#ffffff;
 --accent-color:#00f2fe;
 --accent-gradient:linear-gradient(90deg,#00f2fe 0%,#7b61ff 100%);
 --glass-bg:rgba(255,255,255,0.03);
 --glass-border:rgba(255,255,255,0.1);
 --font-sans:'Outfit',sans-serif;
 --section-padding:clamp(3rem,10vw,10rem) 0;
 --container-max-width:1200px;
 --transition-main:cubic-bezier(0.16,1,0.3,1);
 --card-padding:clamp(1.5rem,3vw,3rem);
 --header-height:clamp(60px,8vw,90px);
}
html,body{
 overflow-x:hidden;
 width:100%;
}
*{
 margin:0;
 padding:0;
 box-sizing:border-box;
 max-width:100%;
}
html{
 scroll-behavior:smooth;
}
body{
 background-color:var(--bg-main);
 background-image:
 linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),
 linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px);
 background-size:50px 50px;
 color:var(--text-primary);
 font-family:var(--font-sans);
 line-height:1.6;
 overflow-x:hidden;
 min-height:100vh;
 cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512" fill="white" stroke="black" stroke-width="10"><g transform="translate(100,100) rotate(-45 0 0)"><path d="M0 0L-136 192V384H136V192L0 0Z"/><path d="M0 0V208" stroke="black" stroke-width="30"/><circle cx="0" cy="256" r="48" fill="white" stroke="black" stroke-width="15"/><rect x="-96" y="416" width="192" height="64" rx="20" fill="white"/></g></svg>') 6 6,auto;
}
a,button,.work-card,.filter-btn,.modal-close,.nav-links a,.logo{
 cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512" fill="%2300d2ff" stroke="black" stroke-width="10"><g transform="translate(100,100) rotate(-45 0 0)"><path d="M0 0L-136 192V384H136V192L0 0Z"/><path d="M0 0V208" stroke="black" stroke-width="30"/><circle cx="0" cy="256" r="48" fill="%2300d2ff" stroke="black" stroke-width="15"/><rect x="-96" y="416" width="192" height="64" rx="20" fill="%2300d2ff"/></g></svg>') 6 6,pointer;
}
.bg-glows{
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 overflow:hidden;
 z-index:-1;
 pointer-events:none;
 opacity:0.4;
}
.glow-blob{
 position:absolute;
 width:600px;
 height:600px;
 background:radial-gradient(circle,var(--accent-color) 0%,transparent 70%);
 filter:blur(100px);
 border-radius:50%;
 opacity:0.15;
}
.blob-1{
 top:-10%;
 left:-10%;
 background:radial-gradient(circle,#00f2fe 0%,transparent 70%);
 animation:moveBlob 25s infinite alternate ease-in-out;
}
.blob-2{
 bottom:-10%;
 right:-10%;
 background:radial-gradient(circle,#7b61ff 0%,transparent 70%);
 animation:moveBlob 30s infinite alternate-reverse ease-in-out;
}
.blob-3{
 top:50%;
 left:50%;
 width:400px;
 height:400px;
 background:radial-gradient(circle,#00f2fe 0%,transparent 70%);
 animation:moveBlob 20s infinite alternate ease-in-out;
 opacity:0.05;
}
@keyframes moveBlob{
 0%{transform:translate(0,0) scale(1);}
 33%{transform:translate(100px,50px) scale(1.1);}
 66%{transform:translate(-50px,100px) scale(0.9);}
 100%{transform:translate(0,0) scale(1);}
}
.floating-elements{
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 pointer-events:none;
 z-index:-1;
 overflow:hidden;
}
.element{
 position:absolute;
 color:var(--text-primary);
 opacity:0.03;
 font-size:2rem;
 filter:blur(1px);
}
.el-1{top:15%;left:10%;animation:float 20s infinite linear;}
.el-2{top:60%;left:85%;animation:float 25s infinite linear reverse;}
.el-3{top:80%;left:15%;animation:float 18s infinite linear;}
.el-4{top:25%;left:75%;animation:float 22s infinite linear reverse;}
.el-5{top:45%;left:20%;animation:float 30s infinite linear;}
.el-6{top:70%;left:40%;animation:float 24s infinite linear;}
.el-7{top:10%;left:40%;animation:float 28s infinite linear reverse;}
.el-8{top:35%;left:90%;animation:float 22s infinite linear;}
.el-9{top:55%;left:5%;animation:float 26s infinite linear reverse;}
.el-10{top:90%;left:60%;animation:float 20s infinite linear;}
.el-11{top:40%;left:60%;animation:float 32s infinite linear reverse;}
.el-12{top:5%;left:80%;animation:float 15s infinite linear;}
.el-13{top:85%;left:90%;animation:float 27s infinite linear reverse;}
.el-14{top:50%;left:50%;animation:float 35s infinite linear;}
@keyframes float{
 0%{transform:translate(0,0) rotate(0deg);}
 33%{transform:translate(30px,50px) rotate(10deg);}
 66%{transform:translate(-20px,30px) rotate(-10deg);}
 100%{transform:translate(0,0) rotate(0deg);}
}
body::before{
 content:"";
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background-image:url('https://grainy-gradients.vercel.app/noise.svg');
 opacity:0.03;
 pointer-events:none;
 z-index:100;
}
.container{
 max-width:var(--container-max-width);
 margin:0 auto;
 width:100%;
}
h1,h2,h3,h4{
 font-family:var(--font-sans);
 font-weight:800;
 line-height:1.1;
 letter-spacing:-0.02em;
 transition:all 0.4s var(--transition-main);
}
h1:hover,h2:hover,h3:hover{
 background:var(--accent-gradient);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
}
.section-title{
 font-size:clamp(2rem,5vw,4rem);
 margin-bottom:1rem;
 text-align:center;
}
.section-subtitle{
 color:var(--text-secondary);
 text-align:center;
 max-width:600px;
 margin:0 auto clamp(2rem,4vw,4rem);
 font-size:clamp(0.9rem,2vw,1.1rem);
}
.navbar{
 position:fixed;
 top:0;
 left:0;
 width:100%;
 padding:0 2rem;
 height:var(--header-height);
 z-index:1000;
 display:flex;
 justify-content:space-between;
 align-items:center;
 transition:all 0.4s ease;
}
.navbar.scrolled{
 background:rgba(5,5,5,0.8);
 backdrop-filter:blur(10px);
 padding:1rem 2rem;
 border-bottom:1px solid var(--glass-border);
}
.logo{
 font-family:var(--font-sans);
 font-size:1.5rem;
 font-weight:800;
 letter-spacing:-1px;
 text-decoration:none;
 color:var(--text-primary);
 transition:all 0.3s var(--transition-main);
}
.logo:hover{
 background:var(--accent-gradient);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
}
.nav-links{
 display:flex;
 gap:2.5rem;
}
.nav-links a{
 color:var(--text-primary);
 text-decoration:none;
 font-size:0.9rem;
 font-weight:500;
 text-transform:uppercase;
 letter-spacing:1px;
 opacity:0.7;
 transition:opacity 0.3s;
}
.nav-links a:hover{
 opacity:1;
 background:var(--accent-gradient);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
}
.nav-actions{
 display:flex;
 align-items:center;
 gap:1.5rem;
}
.search-toggle{
 cursor:pointer;
 color:var(--text-primary);
 font-size:1.2rem;
 opacity:0.7;
 transition:all 0.3s ease;
}
.search-toggle:hover{
 opacity:1;
 transform:scale(1.1);
 color:var(--accent-color);
}
.menu-toggle{
 display:none;
 cursor:pointer;
 color:var(--text-primary);
 font-size:1.5rem;
 z-index:1001;
}
.btn{
 display:inline-block;
 padding:1.2rem 3rem;
 border-radius:50px;
 font-weight:600;
 text-decoration:none;
 transition:all 0.4s var(--transition-main);
 cursor:pointer;
 font-size:0.9rem;
 letter-spacing:1px;
 text-transform:uppercase;
}
.btn-secondary{
 background:transparent;
 color:var(--text-primary);
 border:1px solid var(--glass-border);
}
.btn-secondary:hover{
 border-color:transparent;
 background:linear-gradient(var(--bg-main),var(--bg-main)) padding-box,
 var(--accent-gradient) border-box;
 transform:translateY(-3px);
 box-shadow:0 10px 30px rgba(0,242,254,0.1);
}
.fade-up{
 opacity:1;
}
.hidden{
 display:none !important;
}
.hero{
 height:100vh;
 display:flex;
 justify-content:center;
 align-items:center;
 text-align:center;
 padding:0 5%;
 background:#050505;
 position:relative;
 overflow:hidden;
}
.hero-content{
 width:100%;
 max-width:1200px;
 z-index:2;
 text-align:center;
 display:flex;
 flex-direction:column;
 align-items:center;
}
.hero-tag{
 text-transform:uppercase;
 letter-spacing:6px;
 font-size:0.75rem;
 color:var(--text-secondary);
 margin-bottom:2rem;
 font-weight:500;
}
.hero-title{
 font-size:clamp(3rem,10vw,9rem);
 line-height:1.05;
 margin-bottom:1.5rem;
 font-weight:800;
 letter-spacing:-0.04em;
 white-space:normal;
}
.hero-subtitle-new{
 font-size:clamp(1rem,2vw,1.3rem);
 color:var(--text-primary);
 margin-bottom:0.5rem;
 font-weight:400;
}
.hero-description-new{
 font-size:clamp(0.95rem,1.5vw,1.1rem);
 color:var(--text-secondary);
 margin:0 auto clamp(2rem,5vw,3.5rem);
 max-width:650px;
 line-height:1.6;
}
.hero-ctas{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:3rem;
}
.btn-premium-gradient{
 background:linear-gradient(90deg,#00d2ff,#a163f7);
 color:#000;
 padding:1.2rem 3.5rem;
 font-weight:800;
 border-radius:6px;
 text-transform:uppercase;
 letter-spacing:2px;
 font-size:0.85rem;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 transition:all 0.3s ease;
 border:none;
 text-decoration:none;
 white-space:nowrap;
}
.btn-premium-gradient:hover{
 transform:translateY(-3px);
 box-shadow:0 12px 35px rgba(0,210,255,0.45);
 filter:brightness(1.1);
}
.btn-ghost-new{
 position:relative;
 background:transparent;
 border:1px solid rgba(255,255,255,0.18);
 color:#fff;
 padding:1.2rem 3.5rem;
 font-weight:800;
 border-radius:6px;
 text-transform:uppercase;
 letter-spacing:2px;
 font-size:0.85rem;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 transition:all 0.4s var(--transition-main);
 text-decoration:none;
 white-space:nowrap;
}
.btn-ghost-new:hover{
 background:linear-gradient(var(--bg-main),var(--bg-main)) padding-box,
 linear-gradient(90deg,#00d2ff,#a163f7) border-box;
 border:1px solid transparent;
 transform:translateY(-3px);
 box-shadow:0 12px 35px rgba(0,210,255,0.15);
}
.btn-text-link{
 color:var(--text-primary);
 text-decoration:none;
 font-weight:600;
 font-size:0.8rem;
 letter-spacing:2px;
 text-transform:uppercase;
 transition:all 0.3s ease;
}
.btn-text-link:hover{
 opacity:0.7;
}
.gradient-text{
 background:var(--accent-gradient);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
}
.gradient-text-blue-purple{
 background:linear-gradient(90deg,#00d2ff,#a163f7);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
}
.italic-text{
 font-style:italic;
}
.about{
 padding:var(--section-padding);
}
.about-grid{
 display:grid;
 grid-template-columns:1fr 1.2fr;
 gap:6rem;
 align-items:center;
}
.about-image-container{
 position:relative;
}
.profile-frame{
 position:relative;
 aspect-ratio:4/5;
 background:#111;
 border-radius:20px;
 overflow:hidden;
 border:1px solid var(--glass-border);
}
.profile-photo{
 width:100%;
 height:100%;
 object-fit:cover;
}
.about-text-container{
 padding-left:2rem;
}
.section-tag-left{
 text-transform:uppercase;
 letter-spacing:3px;
 font-size:0.8rem;
 color:var(--text-secondary);
 margin-bottom:1rem;
 font-weight:600;
}
.about-title{
 font-size:clamp(2.5rem,5vw,4rem);
 line-height:1.1;
 margin-bottom:2rem;
}
.about-description{
 font-size:1.1rem;
 line-height:1.7;
 color:var(--text-secondary);
 margin-bottom:1.5rem;
 max-width:600px;
}
.moody-filter{
 filter:grayscale(0%);
 transition:all 0.5s var(--transition-main);
 opacity:1;
}
.moody-filter:hover{
 filter:grayscale(100%) contrast(110%);
 opacity:0.7;
}
.about-stats{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:2rem;
 margin-top:3rem;
 padding-top:2rem;
 border-top:1px solid var(--glass-border);
}
.stat-item{
 display:flex;
 flex-direction:column;
 gap:1rem;
}
.stat-icon{
 color:#00d2ff;
}
.stat-icon i,.stat-icon svg{
 width:28px;
 height:28px;
 color:#00d2ff;
 filter:drop-shadow(0 0 8px rgba(0,210,255,0.5));
}
.stat-number{
 display:block;
 font-size:1.8rem;
 font-weight:800;
 color:var(--text-primary);
}
.stat-label{
 display:block;
 font-size:0.75rem;
 text-transform:uppercase;
 letter-spacing:1px;
 color:var(--text-secondary);
}
@media (max-width:992px){
 .about-grid{
 grid-template-columns:1fr;
 gap:4rem;
 text-align:center;
}
 .about-text-container .section-title{
 text-align:center !important;
}
 .profile-frame{
 max-width:400px;
 margin:0 auto;
}
}
.projects{
 padding:var(--section-padding);
}
.projects-title{
 font-size:clamp(3rem,6vw,5rem);
 margin-bottom:2rem;
 border-bottom:1px solid var(--glass-border);
 padding-bottom:2rem;
}
.project-filters{
 display:flex;
 flex-wrap:wrap;
 gap:2rem;
 margin-bottom:4rem;
}
.filter-btn{
 background:transparent;
 border:none;
 color:var(--text-secondary);
 font-size:0.8rem;
 font-weight:600;
 letter-spacing:2px;
 cursor:pointer;
 transition:all 0.3s ease;
 padding:0.5rem 0;
 border-bottom:2px solid transparent;
}
.filter-btn:hover{
 color:var(--text-primary);
}
.filter-btn.active{
 color:var(--text-primary);
 border-bottom-color:var(--text-primary);
}
.work-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:3rem;
}
.work-card{
 cursor:pointer;
 transition:all 0.4s var(--transition-main);
 position:relative;
 padding:1rem;
 border:1px solid transparent;
}
.work-card:hover{
 transform:translateY(-10px);
 border-color:var(--accent-color);
 box-shadow:0 10px 30px rgba(0,242,254,0.1);
}
.work-image-container{
 position:relative;
 aspect-ratio:16/9;
 background:#111;
 border-radius:12px;
 overflow:hidden;
 margin-bottom:1.5rem;
 display:flex;
 justify-content:center;
 align-items:center;
}
.work-card[data-category*="posters"] .work-image-container{
 aspect-ratio:4/5;
}
.work-image{
 width:100%;
 height:100%;
 object-fit:cover;
 opacity:1;
 transition:all 0.5s var(--transition-main);
}
.work-card:hover .work-image{
 opacity:0.5;
 filter:grayscale(100%);
}
.work-details{
 padding:0.5rem 0;
}
.work-title{
 font-family:var(--font-sans);
 font-size:1.6rem;
 font-weight:700;
 margin-bottom:0.5rem;
 color:var(--text-primary);
 transition:all 0.3s ease;
}
.work-card:hover .work-title{
 background:var(--accent-gradient);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
}
.work-category{
 font-size:0.8rem;
 color:var(--text-secondary);
 letter-spacing:1px;
 text-transform:uppercase;
}
.work-overlay{
 display:none;
}
.poster-gallery{
 padding:var(--section-padding) 0;
 overflow:hidden;
 position:relative;
}
.gallery-wrapper{
 position:relative;
 width:100%;
 overflow:hidden;
 padding-bottom:2rem;
}
.poster-track{
 display:flex;
 flex-wrap:nowrap;
 gap:2rem;
 padding:0 1rem;
 width:max-content;
 will-change:transform;
 transform:translateX(0);
 transition:transform 0.8s cubic-bezier(0.25,1,0.3,1);
}
.poster-item{
 width:450px;
 min-width:450px;
 aspect-ratio:4/5;
 background:var(--bg-accent);
 border-radius:12px;
 overflow:hidden;
 position:relative;
 transition:transform 0.4s var(--transition-main);
 flex-shrink:0;
}
.poster-item img{
 width:100%;
 height:100%;
 object-fit:cover;
 transition:transform 0.4s ease;
 display:block;
}
.poster-item:hover img{
 transform:scale(1.05);
}
.control-btn{
 background:rgba(5,5,5,0.65);
 backdrop-filter:blur(10px);
 -webkit-backdrop-filter:blur(10px);
 border:1px solid var(--glass-border);
 color:#fff;
 width:70px;
 height:70px;
 border-radius:50%;
 display:flex;
 justify-content:center;
 align-items:center;
 cursor:pointer;
 transition:background 0.3s ease,box-shadow 0.3s ease,transform 0.3s ease;
 pointer-events:auto !important;
 box-shadow:0 10px 30px rgba(0,0,0,0.5);
 position:absolute;
 top:50%;
 transform:translateY(-50%);
 z-index:100;
 border:none;
 outline:none;
}
.prev-btn{
 left:2rem;
}
.next-btn{
 right:2rem;
}
.control-btn svg{
 width:32px;
 height:32px;
 stroke-width:2.5px;
 transition:transform 0.3s ease;
}
.control-btn:hover{
 background:linear-gradient(135deg,#00d2ff,#7b2ff7);
 box-shadow:0 0 30px rgba(0,242,254,0.4);
 transform:translateY(-50%) scale(1.1);
}
.control-btn:active{
 transform:translateY(-50%) scale(0.95);
}
.skills{
 padding:var(--section-padding);
}
.skills-header{
 text-align:center;
 margin-bottom:4rem;
}
.skills-main-title{
 font-size:clamp(2.5rem,6vw,4.5rem);
 margin-bottom:1rem;
 font-weight:800;
}
.skills-subtitle{
 color:var(--text-secondary);
 font-size:1.1rem;
 line-height:1.6;
}
.skills-new-grid{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:2rem;
}
.skill-card{
 background:rgba(255,255,255,0.03);
 border:1px solid rgba(255,255,255,0.05);
 padding:3rem 2rem;
 border-radius:20px;
 text-align:center;
 transition:all 0.4s var(--transition-main);
}
.skill-card:hover{
 transform:translateY(-10px);
 background:rgba(255,255,255,0.05);
 border-color:rgba(255,255,255,0.1);
 box-shadow:0 20px 40px rgba(0,0,0,0.3);
}
.skill-card-icon{
 margin-bottom:1.5rem;
 display:flex;
 justify-content:center;
}
.skill-card-icon i{
 width:40px;
 height:40px;
}
.skill-card h3{
 font-size:1.2rem;
 font-weight:700;
 margin-bottom:1rem;
 color:var(--text-primary);
}
.skill-line{
 width:30px;
 height:2px;
 margin:0 auto 1.5rem;
 border-radius:2px;
}
.skill-card p{
 font-size:0.9rem;
 color:var(--text-secondary);
 line-height:1.5;
}
.icon-blue i,.icon-blue svg{color:#00d2ff;filter:drop-shadow(0 0 5px rgba(0,210,255,0.4));}
.line-blue{background:#00d2ff;}
.icon-purple i,.icon-purple svg{color:#bf5af2;filter:drop-shadow(0 0 5px rgba(191,90,242,0.4));}
.line-purple{background:#bf5af2;}
.icon-cyan i,.icon-cyan svg{color:#30d5c8;filter:drop-shadow(0 0 5px rgba(48,213,200,0.4));}
.line-cyan{background:#30d5c8;}
.icon-pink i,.icon-pink svg{color:#ff375f;filter:drop-shadow(0 0 5px rgba(255,55,95,0.4));}
.line-pink{background:#ff375f;}
.icon-orange i,.icon-orange svg{color:#ff9f0a;filter:drop-shadow(0 0 5px rgba(255,159,10,0.4));}
.line-orange{background:#ff9f0a;}
.icon-green i,.icon-green svg{color:#32d74b;filter:drop-shadow(0 0 5px rgba(50,215,75,0.4));}
.line-green{background:#32d74b;}
.icon-yellow i,.icon-yellow svg{color:#ffd60a;filter:drop-shadow(0 0 5px rgba(255,214,10,0.4));}
.line-yellow{background:#ffd60a;}
.icon-indigo i,.icon-indigo svg{color:#5e5ce6;filter:drop-shadow(0 0 5px rgba(94,92,230,0.4));}
.line-indigo{background:#5e5ce6;}
.skills-footer{
 text-align:center;
 margin-top:4rem;
 font-size:1.1rem;
}
.tools-title{
 font-size:1.8rem;
 margin-bottom:2rem;
 text-align:center;
}
.tools-tags{
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
 gap:1.5rem;
}
.tool-tag{
 display:flex;
 align-items:center;
 padding:1rem 1.8rem;
 background:rgba(255,255,255,0.03);
 border:1px solid rgba(255,255,255,0.05);
 border-radius:12px;
 font-size:0.95rem;
 transition:all 0.3s ease;
 gap:0.8rem;
}
.tool-tag i,.tool-tag img{
 font-size:1.3rem;
}
.tool-tag:hover{
 border-color:var(--accent-color);
 background:rgba(255,255,255,0.08);
 transform:translateY(-5px);
}
@media (max-width:1200px){
 .skills-new-grid{
 grid-template-columns:repeat(2,1fr);
}
}
@media (max-width:600px){
 .skills-new-grid{
 grid-template-columns:1fr;
}
}
.services{
 padding:var(--section-padding);
 background:var(--bg-accent);
}
.services-list{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
 gap:2rem;
}
.service-item{
 padding:3rem;
 border:1px solid var(--glass-border);
 transition:all 0.4s var(--transition-main);
 background:var(--bg-accent);
 border-radius:4px;
}
.service-item:hover{
 transform:translateY(-5px);
 border:1px solid transparent;
 background:linear-gradient(var(--bg-accent),var(--bg-accent)) padding-box,
 var(--accent-gradient) border-box;
 box-shadow:0 10px 30px rgba(0,242,254,0.05);
}
.service-item i{
 color:var(--accent-color);
 margin-bottom:1.5rem;
 width:32px;
 height:32px;
}
.service-item h3{
 margin-bottom:1rem;
 font-size:1.5rem;
}
.service-item p{
 color:var(--text-secondary);
}
.process{
 padding:var(--section-padding);
}
.process-steps{
 display:flex;
 flex-direction:column;
 gap:4rem;
 max-width:800px;
 margin:0 auto;
}
.process-step{
 display:flex;
 gap:3rem;
 align-items:flex-start;
}
.step-num{
 font-size:2.5rem;
 font-weight:800;
 opacity:0.2;
 line-height:1;
}
.step-content h3{
 font-size:1.8rem;
 margin-bottom:0.5rem;
}
.testimonials{
 padding:var(--section-padding);
}
.testimonial-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
 gap:2rem;
}
.testimonial-card{
 padding:3rem;
 background:var(--bg-accent);
 border:1px solid var(--glass-border);
 transition:all 0.4s var(--transition-main);
}
.testimonial-card:hover{
 border-color:var(--accent-color);
 box-shadow:0 10px 30px rgba(123,97,255,0.1);
 transform:translateY(-5px);
}
.testimonial-text{
 font-size:1.1rem;
 font-style:italic;
 margin-bottom:2rem;
}
.testimonial-author{
 font-weight:600;
 text-transform:uppercase;
 font-size:0.8rem;
 letter-spacing:1px;
}
.tools{
 padding:4rem 2rem;
 text-align:center;
}
.tools-list{
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
 gap:2rem;
 opacity:0.5;
}
.tool-name{
 font-size:0.9rem;
 font-weight:500;
}
.collaborate{
 padding:var(--section-padding);
}
.collaborate-container{
 max-width:800px;
 margin:0 auto;
}
.collaborate-card{
 background:#0a0a0a;
 padding:3rem;
 border-radius:20px;
 border:1px solid var(--glass-border);
 margin-bottom:4rem;
 transition:all 0.4s var(--transition-main);
}
.collaborate-card:hover{
 border-color:var(--accent-color);
 box-shadow:0 10px 40px rgba(0,242,254,0.05);
}
.collaborate-card input,.collaborate-card textarea{
 background:#111;
 border:1px solid #222;
 border-radius:10px;
 padding:1rem;
 margin-top:0.5rem;
 width:100%;
 color:var(--text-primary);
 font-family:var(--font-sans);
 font-size:1rem;
 transition:all 0.3s ease;
}
.collaborate-card input:focus,.collaborate-card textarea:focus{
 outline:none;
 border-color:var(--accent-color);
 box-shadow:0 0 15px rgba(0,242,254,0.1);
}
.btn-gradient{
 background:var(--accent-gradient);
 color:#000;
 border:none;
 padding:1rem 2.5rem;
 border-radius:50px;
 font-weight:600;
 cursor:pointer;
 transition:transform 0.3s,box-shadow 0.3s;
 margin-top:1rem;
}
.btn-gradient:hover{
 transform:translateY(-3px) scale(1.02);
 box-shadow:0 10px 25px rgba(0,242,254,0.4);
}
.social-links-area{
 display:flex;
 justify-content:center;
 gap:2rem;
}
.social-links-area a{
 color:var(--text-primary);
 font-size:1.8rem;
 transition:transform 0.3s,color 0.3s;
}
.social-links-area a:hover{
 transform:translateY(-5px);
 background:var(--accent-gradient);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
}
.form-success-message{
 text-align:center;
 padding:2rem;
 animation:fadeIn 0.5s ease forwards;
}
.success-icon{
 width:64px;
 height:64px;
 color:#4CAF50;
 margin-bottom:1.5rem;
}
.form-success-message h3{
 font-size:2rem;
 margin-bottom:1rem;
 background:var(--accent-gradient);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
}
.form-success-message p{
 color:var(--text-secondary);
 margin-bottom:2rem;
 font-size:1.1rem;
}
@keyframes fadeIn{
 from{opacity:0;transform:translateY(10px);}
 to{opacity:1;transform:translateY(0);}
}
.modal{
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:var(--bg-color);
 z-index:2000;
 display:none;
 overflow-y:auto;
 padding:4rem 2rem;
}
.modal-close{
 position:fixed;
 top:2rem;
 right:2rem;
 cursor:pointer;
 font-size:1.5rem;
}
footer{
 padding:4rem 2rem;
 text-align:center;
 border-top:1px solid var(--glass-border);
 color:var(--text-secondary);
 font-size:0.9rem;
}
@media (max-width:992px){
 .work-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
 .navbar{
 background:rgba(5,5,5,0.9);
 backdrop-filter:blur(10px);
 padding:1rem 1.5rem;
}
 .menu-toggle{
 display:block;
}
 .nav-links{
 position:fixed;
 top:0;
 right:-100%;
 width:100%;
 height:100vh;
 background:var(--bg-main);
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 gap:2.5rem;
 transition:right 0.5s var(--transition-main);
 z-index:1000;
}
 .nav-links.active{
 right:0;
}
 .nav-links a{
 font-size:1.5rem;
 opacity:0.9;
}
 .work-grid{grid-template-columns:1fr !important;gap:2rem;}
 .skills-grid{grid-template-columns:1fr;gap:3rem;}
 .hero-title{font-size:2.2rem;line-height:1.2;word-break:break-word;}
 .hero-subtitle{font-size:0.75rem;letter-spacing:2px;line-height:1.4;margin-bottom:2rem;}
 .hero-description{font-size:1.1rem;line-height:1.5;margin-bottom:2.5rem;}
 .hero-ctas{flex-direction:column;gap:1rem;width:100%;max-width:300px;margin:0 auto;}
 .hero-ctas .btn{width:100%;text-align:center;padding:1rem 2rem;}
 .section-title{font-size:2rem;}
 .section-padding{padding:4rem 1.2rem;}
}
.sparkle{
 position:fixed;
 pointer-events:none;
 z-index:9999;
 border-radius:50%;
 transform:translate(-50%,-50%);
 animation:sparkle-float var(--duration,900ms) ease-out forwards;
}
.sparkle-inner{
 width:100%;
 height:100%;
 border-radius:50%;
 background:radial-gradient(circle at 30% 30%,#ffffff,var(--color-from,#00d2ff),var(--color-to,#a163f7));
 box-shadow:
 0 0 calc(var(--glow-size,8px) * 1.5) var(--color-from,#00d2ff),
 0 0 calc(var(--glow-size,8px) * 3) var(--color-to,#a163f7),
 0 0 calc(var(--glow-size,8px) * 5) rgba(161,99,247,0.2);
}
@keyframes sparkle-float{
 0%{
 opacity:1;
 transform:translate(-50%,-50%) scale(1);
}
 100%{
 opacity:0;
 transform:translate(calc(-50% + var(--drift-x)),calc(-50% + var(--drift-y) - 40px)) scale(0.1);
}
}
.recent-works{
 padding:var(--section-padding);
 background:var(--bg-main);
}
.recent-works .section-title{
 color:#fff;
 background:none;
 -webkit-text-fill-color:initial;
 transition:all 0.4s ease;
 cursor:default;
}
.recent-works .section-title:hover{
 background:linear-gradient(90deg,#00d2ff,#a163f7);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
}
.recent-works .section-subtitle{
 letter-spacing:5px;
 text-transform:uppercase;
 font-weight:600;
 font-size:0.9rem;
 opacity:0.8;
}
.instagram-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:2px;
 max-width:1100px;
 margin:4rem auto 0;
 background:var(--glass-border);
 border:1px solid var(--glass-border);
}
.work-card{
 background:var(--bg-accent);
 border:1px solid var(--glass-border);
 overflow:hidden;
 transition:all 0.5s var(--transition-main);
 display:flex;
 flex-direction:column;
 content-visibility:auto;
 contain-intrinsic-size:350px;
}
.work-image{
 width:100%;
 aspect-ratio:16/10;
 overflow:hidden;
 position:relative;
}
.work-image img{
 width:100%;
 height:100%;
 object-fit:cover;
 transition:transform 0.8s var(--transition-main);
}
.work-info{
 padding:var(--card-padding);
}
.insta-item{
 position:relative;
 aspect-ratio:4/5;
 overflow:hidden;
 background:#000;
 transition:all 0.4s var(--transition-main);
}
.insta-item img{
 width:100%;
 height:100%;
 object-fit:cover;
 transition:transform 0.6s var(--transition-main);
}
.insta-item:hover{
 z-index:1;
 border-color:var(--accent-color);
 box-shadow:0 10px 30px rgba(0,242,254,0.2);
}
.insta-item:hover img{
 transform:scale(1.1);
}
@media (max-width:768px){
 .instagram-grid{
 grid-template-columns:repeat(3,1fr);
 gap:2px;
 margin-top:2rem;
}
 .recent-works .section-subtitle{
 letter-spacing:2px;
 font-size:0.8rem;
}
}
.grid-explanation-cta{
 text-align:center;
 margin-top:4rem;
 padding-top:4rem;
 border-top:1px solid var(--glass-border);
}
.grid-explanation-cta h3{
 font-size:1.8rem;
 margin-bottom:2rem;
 font-weight:700;
}
.btn-ghost-gold{
 display:inline-block;
 padding:1rem 3rem;
 border:1px solid var(--accent-color);
 color:var(--accent-color);
 text-decoration:none;
 text-transform:uppercase;
 letter-spacing:2px;
 font-weight:700;
 font-size:0.9rem;
 border-radius:4px;
 transition:all 0.3s ease;
}
.btn-ghost-gold:hover{
 background:var(--accent-gradient);
 color:#fff;
 border-color:transparent;
 box-shadow:0 0 20px rgba(0,242,254,0.3);
}
.campaign-explanation{
 padding:8rem 0;
 background:var(--bg-main);
 color:#f0f0f0;
}
.section-title-gold{
 text-align:center;
 font-size:3.5rem;
 font-weight:800;
 margin-bottom:1.5rem;
 background:var(--accent-gradient);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 text-transform:uppercase;
 display:block;
 transition:all 0.4s ease;
}
.section-title-gold:hover{
 background:none;
 -webkit-text-fill-color:#fff;
 color:#fff;
}
.section-subtitle-gold{
 text-align:center;
 max-width:800px;
 margin:0 auto 5rem;
 font-size:1.2rem;
 color:var(--text-secondary);
 line-height:1.6;
}
.explanation-content{
 max-width:900px;
 margin:0 auto 6rem;
 text-align:center;
}
.explanation-content .main-text{
 font-size:1.15rem;
 line-height:1.8;
 margin-bottom:2rem;
 color:#ccc;
 transition:all 0.4s ease;
 display:inline-block;
 width:100%;
}
.explanation-content .main-text:hover{
 background:var(--accent-gradient);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
}
.strategy-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
 gap:2.5rem;
 margin-bottom:8rem;
}
.strategy-card{
 background:rgba(255,255,255,0.02);
 padding:3rem 2rem;
 border-radius:12px;
 border:1px solid var(--glass-border);
 transition:all 0.4s var(--transition-main);
 text-align:center;
}
.strategy-card:hover{
 background:linear-gradient(var(--bg-main),var(--bg-main)) padding-box,
 var(--accent-gradient) border-box;
 border:1px solid transparent;
 transform:translateY(-10px);
 box-shadow:0 15px 40px rgba(0,0,0,0.4);
}
.strategy-card .card-icon{
 width:60px;
 height:60px;
 background:rgba(0,242,254,0.1);
 color:var(--accent-color);
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 margin:0 auto 2rem;
}
.strategy-card h3{
 font-size:1.4rem;
 margin-bottom:1.5rem;
 color:#fff;
 transition:all 0.4s ease;
}
.strategy-card:hover h3{
 background:var(--accent-gradient);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
}
.strategy-card p{
 color:#999;
 line-height:1.6;
 transition:color 0.3s ease;
}
.strategy-card:hover p{
 color:#eee;
}
.process-timeline-gold{
 display:flex;
 justify-content:center;
 align-items:center;
 gap:1.5rem;
 margin-bottom:8rem;
 flex-wrap:wrap;
}
.timeline-step{
 padding:1rem 2rem;
 background:rgba(255,255,255,0.05);
 border:1px solid var(--glass-border);
 border-radius:50px;
 color:var(--accent-color);
 font-weight:600;
 font-size:0.9rem;
 transition:all 0.4s ease;
}
.timeline-step:hover{
 background:linear-gradient(var(--bg-main),var(--bg-main)) padding-box,
 var(--accent-gradient) border-box;
 border:1px solid transparent;
 color:#fff;
 transform:translateY(-3px);
}
.timeline-arrow{
 color:var(--text-secondary);
 font-size:1.5rem;
}
.outcome-box{
 background:rgba(0,242,254,0.05);
 padding:4rem;
 border-radius:12px;
 border-left:5px solid var(--accent-color);
 max-width:900px;
 margin:0 auto 8rem;
 text-align:center;
}
.outcome-box h3{
 color:var(--accent-color);
 text-transform:uppercase;
 letter-spacing:3px;
 margin-bottom:2rem;
 font-size:1rem;
}
.outcome-box p{
 font-size:1.5rem;
 font-style:italic;
 color:#fff;
 line-height:1.6;
}
.closing-cta-gold{
 text-align:center;
 padding:6rem;
 background:radial-gradient(circle at center,rgba(0,242,254,0.08) 0%,transparent 70%);
 border-radius:20px;
}
.closing-cta-gold h3{
 font-size:2.2rem;
 margin-bottom:2.5rem;
 color:#fff;
}
.btn-gradient-gold{
 display:inline-block;
 padding:1.2rem 4rem;
 background:var(--accent-gradient);
 color:#fff;
 text-decoration:none;
 font-weight:800;
 text-transform:uppercase;
 letter-spacing:2px;
 border-radius:50px;
 transition:all 0.3s ease;
}
.btn-gradient-gold:hover{
 transform:scale(1.05);
 box-shadow:0 10px 30px rgba(0,242,254,0.4);
}
.search-overlay{
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:rgba(5,5,5,0.95);
 backdrop-filter:blur(20px);
 z-index:2000;
 display:flex;
 justify-content:center;
 padding-top:10vh;
 opacity:0;
 visibility:hidden;
 transition:all 0.4s var(--transition-main);
}
.search-overlay.active{
 opacity:1;
 visibility:visible;
}
.search-container{
 width:100%;
 max-width:800px;
 padding:0 2rem;
 transform:translateY(20px);
 transition:all 0.5s var(--transition-main);
}
.search-overlay.active .search-container{
 transform:translateY(0);
}
.search-header{
 display:flex;
 align-items:center;
 gap:1.5rem;
 margin-bottom:3rem;
}
.search-input-wrapper{
 flex:1;
 position:relative;
 background:rgba(255,255,255,0.05);
 border:1px solid var(--glass-border);
 border-radius:12px;
 display:flex;
 align-items:center;
 padding:0 1.5rem;
 transition:all 0.3s ease;
}
.search-input-wrapper:focus-within{
 border-color:var(--accent-color);
 background:rgba(255,255,255,0.08);
 box-shadow:0 0 20px rgba(0,242,254,0.1);
}
.search-input-icon{
 color:var(--text-secondary);
 width:20px;
 height:20px;
}
#search-input{
 background:transparent;
 border:none;
 padding:1.2rem 1rem;
 color:var(--text-primary);
 font-family:var(--font-sans);
 font-size:1.2rem;
 width:100%;
 outline:none;
}
.search-close{
 background:none;
 border:none;
 color:var(--text-secondary);
 cursor:pointer;
 padding:0.5rem;
 transition:all 0.3s ease;
}
.search-close:hover{
 color:#fff;
 transform:rotate(90deg);
}
.search-results-area{
 max-height:60vh;
 overflow-y:auto;
 padding-right:10px;
}
.search-results-area::-webkit-scrollbar{
 width:4px;
}
.search-results-area::-webkit-scrollbar-thumb{
 background:var(--glass-border);
 border-radius:10px;
}
.search-result-item{
 padding:1.5rem;
 background:rgba(255,255,255,0.02);
 border:1px solid var(--glass-border);
 border-radius:12px;
 margin-bottom:1rem;
 cursor:pointer;
 transition:all 0.3s ease;
 display:block;
 text-decoration:none;
}
.search-result-item:hover,.search-result-item.selected{
 background:rgba(0,242,254,0.05);
 border-color:var(--accent-color);
 transform:translateX(10px);
}
.search-result-header{
 display:flex;
 justify-content:space-between;
 align-items:flex-start;
 margin-bottom:0.5rem;
}
.search-result-title{
 color:#fff;
 font-weight:700;
 font-size:1.1rem;
}
.search-result-category{
 font-size:0.7rem;
 text-transform:uppercase;
 letter-spacing:1px;
 color:var(--accent-color);
 background:rgba(0,242,254,0.1);
 padding:2px 8px;
 border-radius:4px;
}
.search-result-desc{
 color:var(--text-secondary);
 font-size:0.9rem;
 line-height:1.4;
}
.no-results{
 text-align:center;
 padding:3rem;
 color:var(--text-secondary);
 font-style:italic;
}
 font-style:italic;
 color:#fff;
 line-height:1.6;
}
.closing-cta-gold{
 text-align:center;
 padding:6rem;
 background:radial-gradient(circle at center,rgba(0,242,254,0.08) 0%,transparent 70%);
 border-radius:20px;
}
.closing-cta-gold h3{
 font-size:2.2rem;
 margin-bottom:2.5rem;
 color:#fff;
}
.btn-gradient-gold{
 display:inline-block;
 padding:1.2rem 4rem;
 background:var(--accent-gradient);
 color:#fff;
 text-decoration:none;
 font-weight:800;
 text-transform:uppercase;
 letter-spacing:2px;
 border-radius:50px;
 transition:all 0.3s ease;
}
.btn-gradient-gold:hover{
 transform:scale(1.05);
 box-shadow:0 10px 30px rgba(0,242,254,0.4);
}
.search-overlay{
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:rgba(5,5,5,0.95);
 backdrop-filter:blur(20px);
 z-index:2000;
 display:flex;
 justify-content:center;
 padding-top:10vh;
 opacity:0;
 visibility:hidden;
 transition:all 0.4s var(--transition-main);
}
.search-overlay.active{
 opacity:1;
 visibility:visible;
}
.search-container{
 width:100%;
 max-width:800px;
 padding:0 2rem;
 transform:translateY(20px);
 transition:all 0.5s var(--transition-main);
}
.search-overlay.active .search-container{
 transform:translateY(0);
}
.search-header{
 display:flex;
 align-items:center;
 gap:1.5rem;
 margin-bottom:3rem;
}
.search-input-wrapper{
 flex:1;
 position:relative;
 background:rgba(255,255,255,0.05);
 border:1px solid var(--glass-border);
 border-radius:12px;
 display:flex;
 align-items:center;
 padding:0 1.5rem;
 transition:all 0.3s ease;
}
.search-input-wrapper:focus-within{
 border-color:var(--accent-color);
 background:rgba(255,255,255,0.08);
 box-shadow:0 0 20px rgba(0,242,254,0.1);
}
.search-input-icon{
 color:var(--text-secondary);
 width:20px;
 height:20px;
}
#search-input{
 background:transparent;
 border:none;
 padding:1.2rem 1rem;
 color:var(--text-primary);
 font-family:var(--font-sans);
 font-size:1.2rem;
 width:100%;
 outline:none;
}
.search-close{
 background:none;
 border:none;
 color:var(--text-secondary);
 cursor:pointer;
 padding:0.5rem;
 transition:all 0.3s ease;
}
.search-close:hover{
 color:#fff;
 transform:rotate(90deg);
}
.search-results-area{
 max-height:60vh;
 overflow-y:auto;
 padding-right:10px;
}
.search-results-area::-webkit-scrollbar{
 width:4px;
}
.search-results-area::-webkit-scrollbar-thumb{
 background:var(--glass-border);
 border-radius:10px;
}
.search-result-item{
 padding:1.5rem;
 background:rgba(255,255,255,0.02);
 border:1px solid var(--glass-border);
 border-radius:12px;
 margin-bottom:1rem;
 cursor:pointer;
 transition:all 0.3s ease;
 display:block;
 text-decoration:none;
}
.search-result-item:hover,.search-result-item.selected{
 background:rgba(0,242,254,0.05);
 border-color:var(--accent-color);
 transform:translateX(10px);
}
.search-result-header{
 display:flex;
 justify-content:space-between;
 align-items:flex-start;
 margin-bottom:0.5rem;
}
.search-result-title{
 color:#fff;
 font-weight:700;
 font-size:1.1rem;
}
.search-result-category{
 font-size:0.7rem;
 text-transform:uppercase;
 letter-spacing:1px;
 color:var(--accent-color);
 background:rgba(0,242,254,0.1);
 padding:2px 8px;
 border-radius:4px;
}
.search-result-desc{
 color:var(--text-secondary);
 font-size:0.9rem;
 line-height:1.4;
}
.no-results{
 text-align:center;
 padding:3rem;
 color:var(--text-secondary);
 font-style:italic;
}
@media (max-width:768px){
 .section-padding{padding:3rem 1rem;}
 .container{padding:0 1rem;}
 .navbar{padding:0 1rem;}
 .menu-toggle{display:block;}
 .nav-links{
 position:fixed;
 top:0;
 right:-100%;
 width:100%;
 height:100vh;
 background:rgba(5,5,5,0.98);
 backdrop-filter:blur(20px);
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 gap:2rem;
 transition:right 0.5s var(--transition-main);
 z-index:1000;
}
 .nav-links.active{right:0;}
 .nav-links a{font-size:1.3rem;}
 .hero{padding:0 1rem;}
 .hero-ctas{flex-direction:column;gap:1rem;width:100%;max-width:280px;}
 .hero-ctas .btn{width:100%;padding:1rem;}
 .about-grid{grid-template-columns:1fr;gap:2rem;text-align:center;}
 .about-text-container{padding:0;}
 .about-stats{grid-template-columns:1fr;gap:1.5rem;}
 .work-grid{grid-template-columns:1fr !important;gap:1.5rem;}
 .work-card{max-width:480px;width:100%;margin:0 auto;}
 .work-image{aspect-ratio:16/9;}
 .work-info{padding:1.2rem;}
 .work-info h3{font-size:1.1rem;}
 .category-tabs{overflow-x:auto;white-space:nowrap;padding-bottom:0.5rem;justify-content:flex-start;}
 .services-grid,.skills-grid,.skills-new-grid{grid-template-columns:1fr !important;gap:1rem;}
 .service-card,.skill-card,.service-item,.testimonial-card{padding:1.5rem !important;min-height:auto;}
 .service-item i,.skill-card i{width:32px;height:32px;margin-bottom:1rem;}
 .service-item h3{font-size:1.2rem;}
 .process-steps{gap:2rem;}
 .process-step{gap:1.5rem;}
 .step-num{font-size:1.8rem;}
 .step-content h3{font-size:1.3rem;}
 .section-title-gold{font-size:1.8rem;}
 .section-subtitle-gold{font-size:0.9rem;margin-bottom:3rem;}
 .strategy-grid{grid-template-columns:1fr !important;gap:1rem;}
 .strategy-card{padding:1.5rem;}
 .strategy-card .card-icon{width:45px;height:45px;margin-bottom:1rem;}
 .process-timeline-gold{flex-direction:column;gap:0.5rem;}
 .timeline-arrow{transform:rotate(90deg);margin:0.2rem 0;}
 .outcome-box{padding:2rem 1.5rem;}
 .outcome-box p{font-size:1.1rem;}
 .closing-cta-gold{padding:3rem 1rem;}
 .closing-cta-gold h3{font-size:1.4rem;}
 .poster-item{width:300px !important;min-width:300px !important;flex:0 0 300px !important;}
 .gallery-controls{padding:0 1rem;}
 .control-btn{width:50px;height:50px;}
 .search-container{padding:0 1rem;}
 #search-input{font-size:1rem;}
 .search-header{margin-bottom:2rem;}
}
@media (max-width:390px){
 .hero-title{font-size:2.2rem;}
 .section-title{font-size:1.8rem;}
 .poster-item{width:260px !important;min-width:260px !important;flex:0 0 260px !important;}
}
.kibblix-section{
 padding:var(--section-padding);
 background:var(--bg-main);
 position:relative;
 overflow:hidden;
 content-visibility:auto;
 contain-intrinsic-size:0 600px;
}
.kibblix-wrapper{
 max-width:1100px;
 margin:0 auto;
 width:100%;
 position:relative;
}
.kibblix-viewport{
 position:relative;
 width:100%;
 aspect-ratio:16 / 9;
 background:#0d0d0d;
 border-radius:16px;
 overflow:hidden;
 border:1px solid rgba(255,255,255,0.08);
 box-shadow:0 30px 70px rgba(0,0,0,0.6),
 0 0 100px rgba(0,210,255,0.03);
}
.kibblix-track{
 display:flex;
 flex-direction:column;
 height:auto;
 will-change:transform;
 transition:transform 0.85s cubic-bezier(0.25,1,0.3,1);
}
.kibblix-item{
 width:100%;
 height:auto;
 flex-shrink:0;
 position:relative;
 contain:layout style;
}
.kibblix-item img{
 width:100%;
 height:auto;
 display:block;
}
.kibblix-controls{
 position:absolute;
 right:1.25rem;
 top:50%;
 transform:translateY(-50%);
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:0.75rem;
 padding:1rem 0.65rem;
 background:rgba(5,5,5,0.6);
 backdrop-filter:blur(14px);
 -webkit-backdrop-filter:blur(14px);
 border:1px solid rgba(255,255,255,0.09);
 border-radius:999px;
 z-index:100;
 box-shadow:0 12px 30px rgba(0,0,0,0.5);
 pointer-events:auto;
}
.kibblix-btn{
 background:rgba(255,255,255,0.06);
 border:1px solid rgba(255,255,255,0.12);
 color:#fff;
 width:44px;
 height:44px;
 border-radius:50%;
 display:flex;
 justify-content:center;
 align-items:center;
 cursor:pointer;
 transition:background 0.25s ease,transform 0.2s ease,box-shadow 0.25s ease;
 outline:none;
 min-width:44px;
 min-height:44px;
}
.kibblix-btn svg,
.kibblix-btn i{
 width:20px;
 height:20px;
 stroke-width:2.5px;
 pointer-events:none;
}
.kibblix-btn:hover{
 background:linear-gradient(135deg,#00d2ff,#a163f7);
 border-color:transparent;
 transform:scale(1.1);
 box-shadow:0 0 14px rgba(0,210,255,0.45);
}
.kibblix-btn:active{
 transform:scale(0.93);
}
.kibblix-btn.disabled{
 opacity:0.22;
 pointer-events:none;
 cursor:default;
}
@media (max-width:768px){
 .kibblix-wrapper{
 padding:0;
}
 .kibblix-viewport{
 border-radius:10px;
}
 .kibblix-controls{
 top:auto;
 bottom:0.75rem;
 right:50%;
 transform:translateX(50%);
 flex-direction:row;
 gap:0.6rem;
 padding:0.55rem 0.9rem;
 border-radius:999px;
}
 .kibblix-btn{
 width:40px;
 height:40px;
 min-width:40px;
 min-height:40px;
}
 .kibblix-btn svg,
 .kibblix-btn i{
 width:18px;
 height:18px;
}
}
@media (max-width:390px){
 .kibblix-btn{
 width:36px;
 height:36px;
 min-width:36px;
 min-height:36px;
}
}
/* Recognized by the Brands Section */
.recognized-brands {
    background-color: #0c0f10;
    background-image: 
        linear-gradient(rgba(0, 229, 160, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 160, 0.018) 1px, transparent 1px);
    background-size: 44px 44px;
    background-position: center center;
    padding: clamp(4rem, 8vw, 8rem) 0;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.recognized-brands::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 20% 50%, rgba(0, 229, 160, 0.04) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 50%, rgba(0, 229, 160, 0.03) 0%, transparent 60%);
    pointer-events: none;
}

.section-header-brands {
    text-align: center;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    position: relative;
    z-index: 2;
}

.section-tag-brands {
    display: none;
}

.section-title-brands {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: 3px;
    color: #ffffff;
    text-transform: uppercase;
}

.brand-cards-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
}

/* Card shell */
.brand-card {
    position: relative;
    border-radius: 16px;
    background: #131a1c;
    border: 1.5px solid rgba(0, 229, 160, 0.35);
    box-shadow: 0 0 18px rgba(0, 229, 160, 0.07), 0 20px 50px rgba(0, 0, 0, 0.5);
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.brand-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 229, 160, 0.65);
    box-shadow: 0 0 30px rgba(0, 229, 160, 0.14), 0 30px 60px rgba(0, 0, 0, 0.55);
}

/* Card inner — no padding so image hits edges */
.brand-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Post image at the top */
.brand-post-image-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
    flex-shrink: 0;
}

.brand-post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s ease;
}

.brand-card:hover .brand-post-image {
    transform: scale(1.04);
}

/* Comment section below image */
.brand-comment-section {
    padding: 1.4rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: #131a1c;
}

/* Avatar row */
.insta-header {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

.brand-avatar-wrapper {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    padding: 2.5px;
    background: linear-gradient(135deg, #f99f1b 0%, #da291c 50%, #b233a6 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.brand-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background-color: #ffffff;
    border: 2px solid #131a1c;
}

.brand-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.brand-name-group {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.brand-handle {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.1px;
}

.verification-badge-new {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.verification-svg {
    width: 15px;
    height: 15px;
    display: block;
}

/* Comment text directly under the handle (inside brand-info) */
.comment-text {
    font-size: 0.96rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
    margin: 0;
}

/* Footer / button */
.insta-card-footer {
    margin-top: 0;
}

.btn-view-post {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.8rem 1.5rem;
    border-radius: 10px;
    background: transparent;
    border: 1.5px solid rgba(0, 229, 160, 0.5);
    color: rgba(0, 229, 160, 0.9);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-view-post:hover {
    background: rgba(0, 229, 160, 0.12);
    border-color: rgba(0, 229, 160, 0.9);
    color: #00e5a0;
    box-shadow: 0 0 16px rgba(0, 229, 160, 0.2);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .brand-cards-container {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }
    .brand-comment-section {
        padding: 1.2rem;
    }
}

/* Honeypot field for spam prevention */
.honeypot-field {
    display: none !important;
}