/* =====================================================
XTREME IT SOLUTIONS USA
Premium AI Creative & Automation Agency Theme
Black + Orange (#121212 / #FF6224)
===================================================== */


:root{

--orange:#FF6224;
--orange-dark:#e0501a;
--orange-light:rgba(255,98,36,.14);

--black:#121212;
--black-2:#1a1a1a;
--black-3:#0a0a0a;

--text:#f5f5f5;
--gray:#9c9c9c;

--white:#ffffff;
--bg:#161616;

--border:rgba(255,255,255,.09);

--container:1280px;

--radius:24px;

}




*{

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

}



html{

scroll-behavior:smooth;

}



body{

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

background:var(--black);

color:var(--text);

line-height:1.6;

overflow-x:hidden;

}



h1,h2,h3,h4{

font-family:"Space Grotesk",sans-serif;

letter-spacing:-0.03em;

font-weight:700;

color:var(--white);

}



a{

text-decoration:none;

color:inherit;

}



img{

max-width:100%;

display:block;

}



.container{

width:90%;

max-width:var(--container);

margin:auto;

}


::selection{

background:var(--orange);

color:white;

}




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


.header{

position:sticky;

top:0;

z-index:1000;

background:rgba(18,18,18,.75);

backdrop-filter:blur(18px);

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

}



.navbar{

height:85px;

display:flex;

align-items:center;

justify-content:space-between;

}



.logo{

display:flex;

align-items:center;

gap:12px;

}



.logo img{

width:45px;

height:45px;

border-radius:10px;

}



.logo strong{

display:block;

font-size:14px;

font-weight:800;

color:var(--white);

letter-spacing:.02em;

}



.logo span{

display:block;

font-size:10px;

color:var(--orange);

letter-spacing:.14em;

font-weight:700;

}





.nav-links{

display:flex;

align-items:center;

gap:32px;

}



.nav-links a{

font-size:14px;

font-weight:600;

color:#cfcfcf;

transition:.3s;

}



.nav-links a:hover{

color:var(--orange);

}



.nav-btn{

background:var(--orange);

color:white!important;

padding:13px 26px;

border-radius:50px;

font-weight:700!important;

box-shadow:0 8px 24px rgba(255,98,36,.25);

}



.nav-btn:hover{

background:var(--orange-dark);

}



.mobile-menu{

display:none;

background:none;

border:0;

color:var(--white);

font-size:28px;

}





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


.hero{

padding:110px 0 90px;

position:relative;

overflow:hidden;

}


.hero:before{

content:"";
position:absolute;
width:600px;
height:600px;
background:radial-gradient(circle,rgba(255,98,36,.22),transparent 70%);
top:-250px;
left:-200px;
z-index:0;
pointer-events:none;

}



.hero-wrapper{

display:grid;

grid-template-columns:1.1fr .9fr;

gap:20px;

align-items:center;

position:relative;

z-index:1;

}



.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

background:var(--orange-light);

color:var(--orange);

padding:9px 20px;

border-radius:50px;

font-size:13px;

font-weight:700;

letter-spacing:.02em;

margin-bottom:28px;

border:1px solid rgba(255,98,36,.25);

}



.hero-badge span{

width:8px;

height:8px;

background:var(--orange);

border-radius:50%;

animation:pulse 2s infinite;

}



@keyframes pulse{

50%{

opacity:.3;

}

}





.hero h1{

font-size:clamp(42px,5.6vw,72px);

line-height:1.04;

font-weight:700;

color:var(--white);

}



.hero h1 span{

color:var(--orange);

}



.hero-left p{

font-size:18px;

color:var(--gray);

max-width:600px;

margin:28px 0;

}






.hero-actions{

display:flex;

gap:15px;

}



.primary-btn{

background:var(--orange);

color:white;

padding:17px 34px;

border-radius:50px;

font-weight:700;

transition:.3s;

box-shadow:0 12px 30px rgba(255,98,36,.28);

display:inline-block;

}



.primary-btn:hover{

background:var(--orange-dark);

transform:translateY(-3px);

}




.outline-btn{

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

padding:17px 34px;

border-radius:50px;

font-weight:700;

color:var(--white);

transition:.3s;

}



.outline-btn:hover{

border-color:var(--orange);

color:var(--orange);

}






.hero-stats{

display:flex;

gap:45px;

margin-top:55px;

}



.hero-stats strong{

font-size:34px;

color:var(--white);

font-family:"Space Grotesk",sans-serif;

}



.hero-stats p{

font-size:13px;

color:var(--gray);

margin-top:4px;

}







.hero-visual{

position:relative;

z-index:1;

}



/* ================= TRUST BAR ================= */


.trust-bar{

padding:45px 0;

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

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

}



.trust-bar p{

text-align:center;

color:var(--gray);

margin-bottom:25px;

font-size:14px;

letter-spacing:.04em;

}



.trust-items{

display:grid;

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

text-align:center;

font-weight:700;

font-size:17px;

color:#e5e5e5;

}


.trust-items div{

opacity:.85;

transition:.3s;

}


.trust-items div:hover{

opacity:1;

color:var(--orange);

}








/* ================= SECTION HEADING ================= */


.section-heading{

max-width:750px;

margin-bottom:60px;

}



.section-heading span{

font-size:13px;

font-weight:800;

letter-spacing:.14em;

color:var(--orange);

}



.section-heading h2{

font-size:46px;

line-height:1.1;

margin:16px 0;

color:var(--white);

}



.section-heading p{

font-size:17px;

color:var(--gray);

}








/* ================= PROBLEM ================= */


.problem-section{

padding:100px 0;

}



.problem-cards{

display:grid;

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

gap:25px;

}



.problem-card{

background:var(--black-2);

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

border-radius:24px;

padding:35px;

transition:.3s;

}



.problem-card:hover{

transform:translateY(-8px);

border-color:var(--orange);

box-shadow:0 25px 60px rgba(0,0,0,.35);

}



.problem-card h3{

font-size:22px;

margin-bottom:12px;

color:var(--white);

}



.problem-card p{

color:var(--gray);

}








/* ================= SERVICES ================= */


.services-section{

padding:100px 0;

background:var(--bg);

}



.services-grid{

display:grid;

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

gap:25px;

}



.service-card{

background:var(--black-2);

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

border-radius:25px;

padding:35px;

transition:.35s;

}



.service-card:hover{

transform:translateY(-10px);

border-color:var(--orange);

box-shadow:0 30px 70px rgba(0,0,0,.35);

}



.service-icon{

height:60px;

width:60px;

display:flex;

align-items:center;

justify-content:center;

background:var(--orange-light);

border-radius:18px;

margin-bottom:25px;

}



.service-icon svg{

height:30px;

width:30px;

stroke:var(--orange);

fill:none;

stroke-width:2;

}



.service-card h3{

font-size:22px;

margin-bottom:14px;

color:var(--white);

}



.service-card p{

color:var(--gray);

font-size:15px;

margin-bottom:20px;

}



.service-card ul{

list-style:none;

margin-bottom:25px;

}



.service-card li{

font-size:14px;

padding:7px 0;

color:#c8c8c8;

}



.service-card li:before{

content:"✓";

color:var(--orange);

font-weight:bold;

margin-right:10px;

}



.service-card a{

font-weight:700;

color:var(--orange);

}







/* ================= AI AUTOMATION EXPLANATION ================= */


.automation-section{

padding:110px 0;

}



.automation-process{

display:grid;

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

gap:25px;

align-items:center;

}



.automation-card{

background:var(--black-2);

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

border-radius:25px;

padding:35px;

}



.automation-card.ai-highlight{

border:2px solid var(--orange);

box-shadow:0 20px 50px rgba(255,98,36,.15);

}



.automation-number{

height:45px;

width:45px;

border-radius:50%;

background:var(--orange);

color:white;

display:flex;

align-items:center;

justify-content:center;

font-weight:800;

margin-bottom:20px;

}



.automation-card h3{

font-size:23px;

margin-bottom:10px;

color:var(--white);

}



.automation-card p{

color:var(--gray);

}



.process-arrow{

font-size:32px;

color:var(--orange);

font-weight:800;

text-align:center;

}







/* ================= BEFORE AFTER AI ================= */


.automation-example-section{

padding:100px 0;

background:var(--bg);

}



.automation-example{

background:var(--black-3);

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

border-radius:35px;

padding:55px;

color:white;

}



.before-after{

display:grid;

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

align-items:center;

gap:30px;

}



.before-box,
.after-box{

background:#161616;

border:1px solid #2a2a2a;

border-radius:25px;

padding:35px;

}



.before-box span{

color:#ef4444;

font-weight:800;

font-size:13px;

letter-spacing:.08em;

}



.after-box span{

color:var(--orange);

font-weight:800;

font-size:13px;

letter-spacing:.08em;

}



.before-box h3,
.after-box h3{

font-size:24px;

margin:15px 0;

color:var(--white);

}



.process-flow{

margin:25px 0;

}



.process-flow p{

background:#1f1f1f;

padding:12px;

border-radius:12px;

margin:8px 0;

text-align:center;

font-size:14px;

}



.process-flow div{

text-align:center;

color:var(--orange);

}



.before-box strong{

color:#ef4444;

}



.after-box strong{

color:var(--orange);

}



.arrow-middle{

font-size:42px;

color:var(--orange);

text-align:center;

}



/* ================= PORTFOLIO ================= */


.portfolio-section{

padding:110px 0;

}



.portfolio-grid{

display:grid;

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

gap:30px;

}



.portfolio-card{

background:var(--black-2);

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

border-radius:28px;

overflow:hidden;

transition:.35s;

}



.portfolio-card:hover{

transform:translateY(-10px);

border-color:var(--orange);

box-shadow:0 30px 70px rgba(0,0,0,.35);

}



.portfolio-image,
.portfolio-image2{

height:240px;

background:#0f0f0f;

overflow:hidden;

}



.portfolio-image img,
.portfolio-image2 img{

height:100%;

width:100%;

object-fit:cover;

transition:.5s;

}



.portfolio-card:hover img{

transform:scale(1.05);

}



.portfolio-content{

padding:30px;

}



.portfolio-content span{

font-size:12px;

font-weight:800;

letter-spacing:.1em;

color:var(--orange);

}



.portfolio-content h3{

font-size:24px;

margin:12px 0;

color:var(--white);

}



.portfolio-content p{

color:var(--gray);

margin-bottom:20px;

font-size:15px;

}



.portfolio-content a{

font-weight:700;

color:var(--orange);

}







/* ================= CLIENT REVIEW ================= */


.client-review{

padding:110px 0;

background:var(--black-3);

color:white;

}



.review-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}



.review-content span{

color:var(--orange);

font-size:13px;

font-weight:800;

letter-spacing:.14em;

}



.review-content h2{

font-size:46px;

line-height:1.1;

margin:20px 0;

color:var(--white);

}



.review-content p{

color:var(--gray);

font-size:17px;

}



.youtube-wrapper{

border-radius:25px;

overflow:hidden;

border:1px solid #2a2a2a;

box-shadow:0 30px 80px rgba(0,0,0,.5);

}



.youtube-wrapper iframe{

width:100%;

height:380px;

border:0;

}







/* ================= PROCESS ================= */


.process-section{

padding:110px 0;

}



.process-grid{

display:grid;

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

gap:25px;

}



.process-card{

background:var(--black-2);

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

border-radius:25px;

padding:35px;

transition:.35s;

}



.process-card:hover{

transform:translateY(-8px);

border-color:var(--orange);

box-shadow:0 25px 60px rgba(0,0,0,.35);

}



.process-card .number{

font-size:14px;

font-weight:800;

color:var(--orange);

}



.process-card h3{

font-size:23px;

margin:18px 0 12px;

color:var(--white);

}



.process-card p{

color:var(--gray);

}







/* ================= ENGAGEMENT ================= */


.engagement-section{

padding:110px 0;

background:var(--bg);

}



.engagement-grid{

display:grid;

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

gap:30px;

}



.engagement-card{

background:var(--black-2);

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

border-radius:28px;

padding:40px;

position:relative;

transition:.35s;

}



.engagement-card:hover{

transform:translateY(-10px);

box-shadow:0 30px 70px rgba(0,0,0,.35);

}



.engagement-card.featured{

border:2px solid var(--orange);

}



.tag{

position:absolute;

top:-15px;

left:35px;

background:var(--orange);

color:white;

padding:6px 18px;

border-radius:30px;

font-size:12px;

font-weight:800;

}



.engagement-card h3{

font-size:26px;

color:var(--white);

}



.engagement-card p{

color:var(--gray);

margin:15px 0 25px;

}



.engagement-card ul{

list-style:none;

}



.engagement-card li{

padding:8px 0;

color:#d5d5d5;

}



.engagement-card li:before{

content:"✓";

color:var(--orange);

font-weight:bold;

margin-right:10px;

}



.engagement-card a{

display:block;

background:var(--orange);

color:white;

padding:16px;

border-radius:50px;

text-align:center;

font-weight:700;

margin-top:30px;

transition:.3s;

}



.engagement-card a:hover{

background:var(--orange-dark);

}







/* ================= FAQ ================= */


.faq-section{

padding:100px 0;

}



.faq-list{

max-width:850px;

}



.faq-list details{

background:var(--black-2);

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

border-radius:18px;

padding:25px;

margin-bottom:15px;

}



.faq-list summary{

font-size:17px;

font-weight:700;

cursor:pointer;

color:var(--white);

}



.faq-list p{

color:var(--gray);

margin-top:15px;

}



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


.contact-section{

padding:110px 0;

background:var(--bg);

}



.contact-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}



.contact-content span{

font-size:13px;

font-weight:800;

letter-spacing:.14em;

color:var(--orange);

}



.contact-content h2{

font-size:46px;

line-height:1.1;

margin:20px 0;

color:var(--white);

}



.contact-content p{

font-size:17px;

color:var(--gray);

}



.contact-details{

margin-top:35px;

}



.contact-details div{

margin-bottom:25px;

}



.contact-details strong{

display:block;

margin-bottom:6px;

color:var(--white);

}



.contact-details a{

color:var(--orange);

font-weight:600;

}







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


.contact-form-box{

background:var(--black-2);

padding:40px;

border-radius:30px;

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

box-shadow:0 25px 70px rgba(0,0,0,.35);

}



#contactForm{

display:flex;

flex-direction:column;

gap:20px;

}



.form-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

}



#contactForm label{

font-size:13px;

font-weight:700;

display:block;

margin-bottom:8px;

color:#d5d5d5;

}



#contactForm input,
#contactForm select,
#contactForm textarea{


width:100%;

padding:16px;

border-radius:14px;

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

font-family:inherit;

font-size:15px;

outline:none;

transition:.3s;

background:var(--black-3);

color:var(--white);

}



#contactForm select option{

background:var(--black-2);

color:var(--white);

}



#contactForm input::placeholder,
#contactForm textarea::placeholder{

color:#777;

}



#contactForm input:focus,
#contactForm select:focus,
#contactForm textarea:focus{


border-color:var(--orange);

box-shadow:0 0 0 4px rgba(255,98,36,.15);

}



#contactForm textarea{

height:140px;

resize:none;

}



.submit-btn{

background:var(--orange);

color:white;

border:none;

padding:17px;

border-radius:50px;

font-size:16px;

font-weight:800;

cursor:pointer;

transition:.3s;

}



.submit-btn:hover{

background:var(--orange-dark);

transform:translateY(-3px);

}



.submit-btn:disabled{

opacity:.7;

cursor:not-allowed;

}



.form-note{

font-size:13px;

text-align:center;

color:var(--gray);

}







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


footer{

background:var(--black-3);

color:white;

padding:70px 0 25px;

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

}



.footer-container{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:40px;

}



.footer-brand img{

width:50px;

margin-bottom:15px;

border-radius:10px;

}



.footer-brand h3{

font-size:19px;

margin-bottom:10px;

color:var(--white);

}



.footer-brand p{

color:#999;

}



footer h4{

margin-bottom:20px;

color:var(--white);

}



footer a{

display:block;

color:#999;

margin-bottom:12px;

transition:.3s;

}



footer a:hover{

color:var(--orange);

}



.copyright{

margin-top:50px;

padding-top:25px;

border-top:1px solid #222;

text-align:center;

font-size:14px;

color:#777;

}









/* ================= RESPONSIVE ================= */


@media(max-width:1200px){


.hero-wrapper{

grid-template-columns:1fr;

}



.services-grid{

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

}



.process-grid{

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

}



.footer-container{

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

}


}








@media(max-width:900px){



.nav-links{

display:none;

position:absolute;

top:85px;

left:0;

right:0;

background:var(--black);

padding:30px;

flex-direction:column;

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

box-shadow:0 20px 50px rgba(0,0,0,.4);

}



.nav-links.active{

display:flex;

}



.mobile-menu{

display:block;

}



.hero h1{

font-size:44px;

}



.hero-stats{

flex-wrap:wrap;

}



.trust-items{

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

gap:20px;

}



.problem-cards{

grid-template-columns:1fr;

}



.automation-process{

grid-template-columns:1fr;

}



.process-arrow{

text-align:center;

}



.before-after{

grid-template-columns:1fr;

}



.arrow-middle{

text-align:center;

}



.portfolio-grid{

grid-template-columns:1fr;

}



.review-wrapper{

grid-template-columns:1fr;

}



.contact-wrapper{

grid-template-columns:1fr;

}



.engagement-grid{

grid-template-columns:1fr;

}


}








@media(max-width:600px){



.container{

width:92%;

}



.hero{

padding:60px 0;

}



.hero-actions{

flex-direction:column;

}



.primary-btn,
.outline-btn{

text-align:center;

width:100%;

}



.hero-stats{

flex-direction:column;

gap:20px;

}



.section-heading h2,
.review-content h2,
.contact-content h2{

font-size:34px;

}



.services-grid{

grid-template-columns:1fr;

}



.form-row{

grid-template-columns:1fr;

}



.contact-form-box{

padding:25px;

}



.footer-container{

grid-template-columns:1fr;

}



.youtube-wrapper iframe{

height:250px;

}


}


/* =====================================================
V2 ADDITIONS — HERO VISUAL, MARQUEE, SERVICES, PORTFOLIO,
AUTOMATION TABS, TESTIMONIALS, CONTACT, FOOTER
===================================================== */


/* ---------- PUNCH HEADING (display typography) ---------- */

.punch-wrap{

max-width:800px;

margin-bottom:60px;

}

.punch-label{

display:inline-block;

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

font-size:12px;

font-weight:700;

letter-spacing:.18em;

color:var(--orange);

margin-bottom:14px;

}

.punch-heading{

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

text-transform:uppercase;

font-weight:400;

line-height:0.98;

letter-spacing:.01em;

font-size:clamp(34px,5.2vw,58px);

color:var(--white);

}

.punch-heading .accent{

color:var(--orange);

}

.punch-sub{

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

font-size:16px;

color:var(--gray);

margin-top:18px;

max-width:600px;

}



/* ---------- HERO VISUAL FRAME (image) ---------- */

.hero-visual-frame{

position:relative;

border-radius:32px;

overflow:hidden;

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

box-shadow:0 40px 100px rgba(0,0,0,.5),0 0 0 1px rgba(255,98,36,.08);

background:linear-gradient(160deg,#1a1a1a,#0a0a0a);

aspect-ratio:4/5;

}

.hero-visual-frame:before{

content:"";

position:absolute;

inset:0;



z-index:1;

pointer-events:none;

}

.hero-visual-frame img{

width:100%;

height:100%;

object-fit:cover;

position:relative;

z-index:0;

}

.hero-visual-chip{

position:absolute;

bottom:22px;

left:22px;

z-index:2;



padding:12px 20px;

border-radius:50px;

display:flex;

align-items:center;

gap:10px;

font-size:13px;

font-weight:700;

color:white;

}

.hero-visual-chip span{

width:8px;

height:8px;

border-radius:50%;



animation:pulse 2s infinite;

}



/* ---------- MARQUEE STRIP ---------- */

.marquee-section{

background:var(--orange);

padding:20px 0;

overflow:hidden;

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

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

transform:rotate(-1.2deg);

margin:60px 0;

}

.marquee-track{

display:flex;

width:max-content;

animation:marquee-scroll 28s linear infinite;

}

.marquee-track span{

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

font-size:26px;

text-transform:uppercase;

color:var(--black);

white-space:nowrap;

padding:0 28px;

display:flex;

align-items:center;

gap:28px;

letter-spacing:.02em;

}

.marquee-track span:after{

content:"✦";

font-size:14px;

color:var(--black);

}

@keyframes marquee-scroll{

0%{transform:translateX(0);}

100%{transform:translateX(-50%);}

}



/* ---------- SERVICES V2 ---------- */

.services-v2{

padding:20px 0 110px;

}

.services-v2-grid{

display:grid;

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

gap:26px;

}

.svc-card{

position:relative;

border-radius:28px;

padding:42px 36px;

min-height:420px;

overflow:hidden;

display:flex;

flex-direction:column;

transition:.4s;

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

}

.svc-card:hover{

transform:translateY(-10px);

}

.svc-card.svc-dark{

background:linear-gradient(160deg,#1c1c1c,#0a0a0a);

}

.svc-card.svc-orange{

background:linear-gradient(160deg,var(--orange),#c8481a);

border-color:transparent;

}

.svc-card.svc-charcoal{

background:linear-gradient(160deg,#232323,#111);

}

.svc-card .svc-tag{

font-size:12px;

font-weight:800;

letter-spacing:.14em;

text-transform:uppercase;

margin-bottom:18px;

opacity:.8;

}

.svc-card.svc-orange .svc-tag{

color:rgba(0,0,0,.65);

}

.svc-card.svc-dark .svc-tag,
.svc-card.svc-charcoal .svc-tag{

color:var(--orange);

}

.svc-card h3{

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

text-transform:uppercase;

font-weight:400;

font-size:30px;

line-height:1.05;

margin-bottom:16px;

}

.svc-card.svc-orange h3{

color:var(--black);

}

.svc-card.svc-dark h3,
.svc-card.svc-charcoal h3{

color:var(--white);

}

.svc-card p{

font-size:15px;

line-height:1.6;

max-width:80%;

}

.svc-card.svc-orange p{

color:rgba(0,0,0,.75);

}

.svc-card.svc-dark p,
.svc-card.svc-charcoal p{

color:var(--gray);

}

.svc-card-media{

position:absolute;

right:-30px;

bottom:-30px;

width:220px;

height:220px;

opacity:.95;

pointer-events:none;

}

.svc-card-media img{

width:100%;

height:100%;

object-fit:contain;

filter:drop-shadow(0 20px 40px rgba(0,0,0,.4));

}

.svc-know-more{

margin-top:auto;

padding-top:30px;

display:flex;

align-items:center;

gap:14px;

font-size:13px;

font-weight:800;

letter-spacing:.08em;

text-transform:uppercase;

position:relative;

z-index:2;

}

.svc-card.svc-orange .svc-know-more{

color:var(--black);

}

.svc-card.svc-dark .svc-know-more,
.svc-card.svc-charcoal .svc-know-more{

color:var(--white);

}

.svc-know-more .circle{

width:38px;

height:38px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

transition:.3s;

}

.svc-card.svc-orange .circle{

background:var(--black);

color:var(--orange);

}

.svc-card.svc-dark .circle,
.svc-card.svc-charcoal .circle{

background:var(--orange);

color:var(--black);

}

.svc-card:hover .circle{

transform:rotate(45deg);

}



/* ---------- PORTFOLIO: UGC ADS (PHONE MARQUEE) ---------- */

.ugc-section{

padding:100px 0 60px;

overflow:hidden;

}

.ugc-marquee-outer{

position:relative;

width:100%;

overflow:hidden;

mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);

-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);

}

.ugc-marquee-track{

display:flex;

gap:32px;

width:max-content;

animation:ugc-scroll 42s linear infinite;

padding:20px 0;

}

.ugc-marquee-outer:hover .ugc-marquee-track{

animation-play-state:paused;

}

@keyframes ugc-scroll{

0%{transform:translateX(0);}

100%{transform:translateX(-50%);}

}

.phone-card{

width:230px;

flex-shrink:0;

text-align:center;

}

.phone-frame{

width:230px;

height:460px;

background:#000;

border-radius:34px;

border:6px solid #1f1f1f;

box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px rgba(255,98,36,.1);

overflow:hidden;

position:relative;

transition:.35s;

}

.phone-card:hover .phone-frame{

border-color:var(--orange);

transform:translateY(-8px);

}

.phone-frame:before{

content:"";

position:absolute;

top:10px;

left:50%;

transform:translateX(-50%);

width:70px;

height:16px;

background:#000;

border-radius:20px;

z-index:3;

}

.phone-frame iframe{

width:100%;

height:100%;

border:0;

object-fit:cover;

}

.phone-caption{

margin-top:18px;

}

.phone-caption .cat{

font-family:"Playfair Display",serif;

font-style:italic;

color:var(--orange);

font-size:15px;

display:block;

margin-bottom:4px;

}

.phone-caption .title{

font-size:14px;

font-weight:600;

color:var(--white);

}



/* ---------- PORTFOLIO: VIDEO EDITING (MONITOR MARQUEE) ---------- */

.video-section{

padding:60px 0 100px;

overflow:hidden;

}

.video-marquee-outer{

position:relative;

width:100%;

overflow:hidden;

mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);

-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);

}

.video-marquee-track{

display:flex;

gap:32px;

width:max-content;

animation:video-scroll 38s linear infinite;

padding:20px 0;

}

.video-marquee-outer:hover .video-marquee-track{

animation-play-state:paused;

}

@keyframes video-scroll{

0%{transform:translateX(0);}

100%{transform:translateX(-50%);}

}

.monitor-card{

width:420px;

flex-shrink:0;

}

.monitor-frame{

background:#161616;

border:10px solid #1f1f1f;

border-radius:18px;

box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px rgba(255,98,36,.1);

overflow:hidden;

aspect-ratio:16/9;

transition:.35s;

}

.monitor-card:hover .monitor-frame{

border-color:var(--orange);

transform:translateY(-8px);

}

.monitor-frame iframe{

width:100%;

height:100%;

border:0;

}

.monitor-stand{

width:80px;

height:22px;

background:#1f1f1f;

margin:0 auto;

border-radius:0 0 10px 10px;

}

.monitor-base{

width:150px;

height:8px;

background:#1f1f1f;

margin:0 auto;

border-radius:4px;

}

.monitor-caption{

text-align:center;

margin-top:18px;

font-size:14px;

font-weight:600;

color:var(--white);

}



/* ---------- AI AUTOMATION TABS ---------- */

.automation-tabs-section{

padding:100px 0;

background:var(--bg);

}

.automation-tabs-nav{

display:flex;

gap:14px;

margin-bottom:50px;

flex-wrap:wrap;

}

.automation-tab-btn{

background:var(--black-2);

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

color:var(--gray);

padding:16px 28px;

border-radius:50px;

font-weight:700;

font-size:14px;

cursor:pointer;

transition:.3s;

}

.automation-tab-btn:hover{

border-color:var(--orange);

color:var(--white);

}

.automation-tab-btn.active{

background:var(--orange);

border-color:var(--orange);

color:var(--white);

}

.automation-tab-panel{

display:none;

}

.automation-tab-panel.active{

display:grid;

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

gap:26px;

animation:fadeIn .4s ease;

}

@keyframes fadeIn{

from{opacity:0;transform:translateY(10px);}

to{opacity:1;transform:translateY(0);}

}

.auto-project-card{

background:var(--black-2);

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

border-radius:24px;

overflow:hidden;

transition:.35s;

}

.auto-project-card:hover{

transform:translateY(-8px);

border-color:var(--orange);

box-shadow:0 25px 60px rgba(0,0,0,.4);

}

.auto-project-image{

height:200px;

background:#0f0f0f;

overflow:hidden;

}

.auto-project-image img{

width:100%;

height:100%;

object-fit:cover;

}

.auto-project-content{

padding:28px;

}

.auto-project-content h4{

font-size:19px;

color:var(--white);

margin-bottom:10px;

font-family:"Space Grotesk",sans-serif;

}

.auto-project-content p{

color:var(--gray);

font-size:14px;

margin-bottom:22px;

}

.auto-project-btn{

display:inline-flex;

align-items:center;

gap:8px;

background:transparent;

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

color:var(--orange);

padding:11px 22px;

border-radius:50px;

font-size:13px;

font-weight:700;

transition:.3s;

}

.auto-project-btn:hover{

background:var(--orange);

color:white;

}



/* ---------- TESTIMONIAL REELS ---------- */

.reels-section{

padding:100px 0;

}

.reels-grid{

display:grid;

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

gap:28px;

}

.reel-frame{

aspect-ratio:9/16;

border-radius:26px;

overflow:hidden;

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

background:#000;

box-shadow:0 30px 70px rgba(0,0,0,.5);

transition:.35s;

}

.reel-frame:hover{

border-color:var(--orange);

transform:translateY(-8px);

}

.reel-frame iframe{

width:100%;

height:100%;

border:0;

}



/* ---------- CONTACT V2 ---------- */

.contact-v2{

padding:110px 0;

position:relative;

overflow:hidden;

}

.contact-v2:before{

content:"";

position:absolute;

width:700px;

height:700px;

background:radial-gradient(circle,rgba(255,98,36,.16),transparent 65%);

top:-300px;

right:-250px;

pointer-events:none;

}

.contact-v2-box{

position:relative;

z-index:1;

background:linear-gradient(160deg,#1a1a1a,#0a0a0a);

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

border-radius:36px;

padding:60px;

display:grid;

grid-template-columns:.9fr 1.1fr;

gap:60px;

box-shadow:0 40px 100px rgba(0,0,0,.5);

}

.contact-v2-info .punch-wrap{

margin-bottom:40px;

}

.contact-v2-info-list div{

display:flex;

align-items:center;

gap:16px;

margin-bottom:22px;

}

.contact-v2-info-list .icon-box{

width:46px;

height:46px;

border-radius:14px;

background:var(--orange-light);

display:flex;

align-items:center;

justify-content:center;

color:var(--orange);

flex-shrink:0;

font-size:18px;

}

.contact-v2-info-list strong{

display:block;

color:var(--white);

font-size:14px;

}

.contact-v2-info-list a,
.contact-v2-info-list span{

color:var(--gray);

font-size:14px;

}

.contact-v2-form{

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

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

border-radius:26px;

padding:36px;

}

.contact-v2-form .form-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:18px;

}

.contact-v2-form label{

font-size:12px;

font-weight:700;

text-transform:uppercase;

letter-spacing:.06em;

color:var(--gray);

display:block;

margin-bottom:8px;

}

.contact-v2-form input,
.contact-v2-form select,
.contact-v2-form textarea{

width:100%;

padding:15px 16px;

border-radius:14px;

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

background:var(--black-3);

color:var(--white);

font-family:inherit;

font-size:14px;

outline:none;

transition:.3s;

margin-bottom:18px;

}

.contact-v2-form input:focus,
.contact-v2-form select:focus,
.contact-v2-form textarea:focus{

border-color:var(--orange);

box-shadow:0 0 0 4px rgba(255,98,36,.15);

}

.contact-v2-form textarea{

height:110px;

resize:none;

}

.contact-v2-submit{

width:100%;

background:var(--orange);

color:white;

border:none;

padding:17px;

border-radius:50px;

font-size:15px;

font-weight:800;

cursor:pointer;

transition:.3s;

}

.contact-v2-submit:hover{

background:var(--orange-dark);

transform:translateY(-2px);

}

.contact-v2-submit:disabled{

opacity:.7;

cursor:not-allowed;

}

.contact-v2-note{

font-size:12px;

text-align:center;

color:var(--gray);

margin-top:14px;

}



/* ---------- FOOTER V2 ---------- */

.footer-v2{

background:var(--black-3);

padding-top:70px;

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

}

.footer-v2-tagline{

display:flex;

justify-content:space-between;

font-size:12px;

color:var(--gray);

padding-bottom:26px;

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

margin-bottom:50px;

}

.footer-cta-box{

display:grid;

grid-template-columns:1.4fr 1fr;

gap:30px;

margin-bottom:60px;

}

.footer-cta-left{

background:linear-gradient(150deg,#1a1a1a,#0a0a0a);

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

border-radius:30px;

padding:50px;

position:relative;

overflow:hidden;

display:flex;

align-items:center;

justify-content:space-between;

gap:30px;

flex-wrap:wrap;

}

.footer-cta-left:before{

content:"";

position:absolute;

width:400px;

height:400px;

background:radial-gradient(circle,rgba(255,98,36,.2),transparent 65%);

right:-150px;

top:-150px;

}

.footer-cta-left h2{

position:relative;

z-index:1;

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

text-transform:uppercase;

font-weight:400;

font-size:clamp(28px,3.4vw,44px);

line-height:1.05;

color:var(--white);

}

.footer-cta-left h2 span{

color:var(--orange);

}

.footer-cta-left a{

position:relative;

z-index:1;

background:var(--orange);

color:white;

padding:16px 30px;

border-radius:50px;

font-weight:700;

font-size:14px;

display:inline-flex;

align-items:center;

gap:10px;

white-space:nowrap;

transition:.3s;

}

.footer-cta-left a:hover{

background:var(--orange-dark);

}

.footer-social-box{

background:var(--black-2);

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

border-radius:30px;

padding:40px;

}

.footer-social-box h4{

color:var(--white);

font-size:19px;

margin-bottom:20px;

font-family:"Space Grotesk",sans-serif;

}

.footer-social-icons{

display:flex;

gap:12px;

margin-bottom:26px;

}

.footer-social-icons a{

width:42px;

height:42px;

border-radius:50%;

background:var(--black-3);

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

display:flex;

align-items:center;

justify-content:center;

color:var(--white);

transition:.3s;

}

.footer-social-icons a:hover{

background:var(--orange);

border-color:var(--orange);

}

.footer-newsletter label{

display:flex;

align-items:center;

gap:8px;

font-size:13px;

color:var(--gray);

margin-bottom:12px;

}

.footer-newsletter-row{

display:flex;

gap:8px;

}

.footer-newsletter-row input{

flex:1;

padding:13px 16px;

border-radius:50px;

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

background:var(--black-3);

color:white;

font-size:13px;

outline:none;

}

.footer-newsletter-row input:focus{

border-color:var(--orange);

}

.footer-newsletter-row button{

width:44px;

height:44px;

border-radius:50%;

background:var(--orange);

border:none;

color:white;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

flex-shrink:0;

transition:.3s;

}

.footer-newsletter-row button:hover{

background:var(--orange-dark);

}

.footer-bottom-row{

display:flex;

justify-content:space-between;

align-items:flex-end;

flex-wrap:wrap;

gap:30px;

padding-bottom:40px;

}

.footer-brand-v2 img{

width:44px;

border-radius:10px;

margin-bottom:14px;

}

.footer-brand-v2 h3{

font-size:20px;

color:var(--white);

margin-bottom:8px;

}

.footer-brand-v2 p{

color:#888;

font-size:13px;

max-width:320px;

}

.footer-nav-pills{

display:flex;

gap:10px;

flex-wrap:wrap;

max-width:360px;

}

.footer-nav-pills a{

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

padding:11px 22px;

border-radius:50px;

font-size:13px;

color:#ccc;

transition:.3s;

}

.footer-nav-pills a:hover{

border-color:var(--orange);

color:var(--orange);

}

.footer-v2-copyright{

text-align:center;

padding:24px 0;

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

font-size:13px;

color:#777;

}



/* ---------- V2 RESPONSIVE ---------- */

@media(max-width:1200px){

.services-v2-grid{

grid-template-columns:1fr 1fr;

}

.reels-grid{

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

}

.contact-v2-box{

grid-template-columns:1fr;

}

.footer-cta-box{

grid-template-columns:1fr;

}

.automation-tab-panel.active{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:900px){

.hero-visual-frame{

aspect-ratio:16/10;

margin-top:40px;

}

.services-v2-grid{

grid-template-columns:1fr;

}

.svc-card{

min-height:340px;

}

.reels-grid{

grid-template-columns:1fr 1fr;

}

.monitor-card{

width:320px;

}

.automation-tab-panel.active{

grid-template-columns:1fr;

}

.contact-v2-box{

padding:35px;

}

.contact-v2-form .form-row{

grid-template-columns:1fr;

}

.footer-cta-left{

flex-direction:column;

align-items:flex-start;

padding:35px;

}

.footer-bottom-row{

flex-direction:column;

}

}

@media(max-width:600px){

.marquee-track span{

font-size:19px;

padding:0 18px;

gap:18px;

}

.phone-card{

width:190px;

}

.phone-frame{

width:190px;

height:380px;

}

.monitor-card{

width:270px;

}

.reels-grid{

grid-template-columns:1fr;

}

.punch-heading{

font-size:32px;

}

.contact-v2-box{

padding:24px;

}

}


/* ---------- MOBILE FIX: service card media overlap ---------- */

@media(max-width:600px){

.svc-card-media{

top:14px;

right:14px;

bottom:auto;

left:auto;

width:90px;

height:90px;

opacity:.35;

}

.svc-card p{

max-width:100%;

position:relative;

z-index:2;

}

}