console.log("Main JS loaded!");

/* =========================================
   ORBITXA WEBSITE
   Main Styling
========================================= */


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


* {

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

}


html {

scroll-behavior:smooth;

}


body {

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

background:#050505;

color:#ffffff;

overflow-x:hidden;

line-height:1.6;

}



a {

text-decoration:none;

color:inherit;

}



img {

max-width:100%;

display:block;

}



.container {

width:min(1200px,90%);

margin:auto;

}





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


.background {

position:fixed;

inset:0;

z-index:-2;

overflow:hidden;

background:#050505;

}



.gradient {

position:absolute;

border-radius:50%;

filter:blur(120px);

opacity:.35;

}



.gradient1 {

width:600px;

height:600px;

background:
linear-gradient(
135deg,
#8b5cf6,
#2563eb
);

top:-200px;

left:-150px;

animation:
floatOne 12s infinite alternate;

}



.gradient2 {

width:500px;

height:500px;

background:
linear-gradient(
135deg,
#ec4899,
#6366f1
);

right:-150px;

bottom:-150px;

animation:
floatTwo 15s infinite alternate;

}




.noise {

position:absolute;

inset:0;

opacity:.04;

background-image:
url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");

}



@keyframes floatOne {

from {

transform:translate(
0,
0
);

}

to {

transform:translate(
120px,
80px
);

}

}



@keyframes floatTwo {

from {

transform:translate(
0,
0
);

}

to {

transform:translate(
-100px,
-80px
);

}

}






/* =========================================
   HEADER / NAV
========================================= */


header{

position:absolute;
top:20px;
left:0;
right:0;
z-index:1000;

}



header .container{

display:flex;
align-items:center;
justify-content:space-between;

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

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

padding:
15px 25px;

border-radius:25px;

backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);

position:relative;

}



.logo img{

width:140px;

filter:
brightness(1.8)
contrast(1.2);

}



/* DESKTOP NAV */


.desktopNav{

display:flex;

align-items:center;

gap:35px;

}



.desktopNav a{

color:#cfcfcf;

font-size:15px;

position:relative;

}



.desktopNav a:hover,
.desktopNav a.active{

color:white;

}



.desktopNav a.active::after{

content:"";

position:absolute;

bottom:-8px;

left:0;

width:100%;

height:2px;

background:
linear-gradient(
90deg,
#8b5cf6,
#2563eb
);

}




.desktopQuote{

display:flex;

}



/* HAMBURGER */


.menuToggle{

display:none;

width:35px;

height:30px;

background:none;

border:none;

cursor:pointer;

}



.menuToggle span{

display:block;

height:3px;

background:white;

margin:6px 0;

border-radius:20px;

}



/* MOBILE MENU */


.mobileNav{

display:none;

}







@media(max-width:700px){



header .container{

padding:
15px 20px;

}



.logo img{

width:110px;

}



.desktopNav,
.desktopQuote{

display:none;

}



.menuToggle{

display:block;

}



/* dropdown */


.mobileNav{

position:absolute;

top:90px;

left:0;

right:0;

display:flex;

flex-direction:column;

align-items:center;

gap:25px;

padding:35px;

background:
rgba(10,10,10,.96);

border:

1px solid rgba(255,255,255,.15);

border-radius:25px;

opacity:0;

visibility:hidden;

transform:translateY(-20px);

transition:.3s;

}



.mobileNav.show{

opacity:1;

visibility:visible;

transform:translateY(0);

}



.mobileNav a{

font-size:22px;

color:white;

}



.mobileNav .quoteButton{

display:flex;

margin-top:15px;

}



}

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


.primaryButton,
.secondaryButton,
.quoteButton {


display:inline-flex;

align-items:center;

justify-content:center;

padding:

14px 28px;

border-radius:50px;

font-weight:600;

transition:.35s;

}



.primaryButton {


background:
linear-gradient(
135deg,
#8b5cf6,
#2563eb
);

box-shadow:

0 0 30px
rgba(99,102,241,.35);

}



.primaryButton:hover {


transform:translateY(-4px);

box-shadow:

0 0 50px
rgba(139,92,246,.55);

}



.secondaryButton,
.quoteButton {


border:

1px solid
rgba(255,255,255,.2);

background:

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

backdrop-filter:blur(10px);

}



.secondaryButton:hover,
.quoteButton:hover {

background:

rgba(255,255,255,.12);

}





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


.hero {

position:relative;

z-index:1;

padding-top:260px;

padding-bottom:100px;

}



.heroGrid {


display:grid;

grid-template-columns:

1fr 1fr;

gap:70px;

align-items:center;


}



.tag,
.sectionTag {


display:inline-block;

padding:

8px 18px;

border-radius:50px;

background:

rgba(139,92,246,.15);

border:

1px solid
rgba(139,92,246,.3);

color:#c4b5fd;

font-size:14px;

margin-bottom:25px;

}




.hero h1 {


font-size:

clamp(45px,6vw,80px);

line-height:1.05;

letter-spacing:-3px;

}



.hero p {


margin-top:30px;

max-width:550px;

color:#b8b8b8;

font-size:18px;

}



.heroButtons {


display:flex;

gap:20px;

margin-top:40px;

}





.stats {


display:flex;

gap:50px;

margin-top:80px;

}



.stats h2 {

font-size:42px;

}



.stats p {

font-size:14px;

color:#999;

margin-top:0;

}






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


.heroCard {


background:

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


border:

1px solid
rgba(255,255,255,.12);


border-radius:30px;


padding:20px;


backdrop-filter:blur(20px);


}



.browser {

background:#111;

border:

1px solid rgba(255,255,255,.15);

border-radius:30px;

overflow:hidden;

}



.dots {


padding:15px;

display:flex;

gap:8px;

}



.dots span {


width:10px;

height:10px;

border-radius:50%;

background:#555;

}



.browserContent {

width:100%;

height:100%;

object-fit:cover;

display:block;

}



.mockNavbar {


height:25px;

background:#222;

border-radius:20px;

}



.mockHero {


height:170px;

margin-top:25px;

border-radius:20px;


background:

linear-gradient(
135deg,
#8b5cf6,
#2563eb
);


}



.mockCards {


display:grid;

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

gap:15px;

margin-top:20px;

}



.mockCards div {


height:100px;

background:#1c1c1c;

border-radius:15px;

}

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


section {

padding:120px 0;

}



.sectionHeading {

text-align:center;

max-width:750px;

margin:0 auto 70px;

}



.sectionHeading h2 {

font-size:

clamp(38px,5vw,60px);

letter-spacing:-2px;

line-height:1.1;

}



.sectionHeading p {

margin-top:20px;

color:#999;

font-size:18px;

}






/* =========================================
   FEATURED PROJECT
========================================= */


.featuredProject {


display:grid;

grid-template-columns:

1.1fr 1fr;

gap:60px;

align-items:center;


background:

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


border:

1px solid
rgba(255,255,255,.12);


padding:40px;

border-radius:35px;


backdrop-filter:blur(20px);


transition:.4s;

}



.featuredProject:hover {

border-color:

rgba(139,92,246,.5);

}




.projectImage {

height:400px;

border-radius:30px;

overflow:hidden;

}


.projectImage img {

width:100%;

height:100%;

object-fit:cover;

}



.featuredProject:hover img {


transform:scale(1.05);

}





.projectBadge {


position:absolute;

top:20px;

left:20px;


padding:

8px 16px;


border-radius:50px;


font-size:13px;

font-weight:600;


backdrop-filter:blur(10px);


}




.projectBadge.client {


background:

rgba(139,92,246,.25);


border:

1px solid
rgba(139,92,246,.5);


color:#ddd6fe;


}



.projectBadge.personal {


background:

rgba(37,99,235,.25);


border:

1px solid
rgba(37,99,235,.5);


color:#bfdbfe;


}





.projectContent h3 {


font-size:40px;

letter-spacing:-1px;


}



.projectContent p {


margin-top:20px;

color:#aaa;

font-size:17px;

}



.techStack,
.showcaseTags {


display:flex;

flex-wrap:wrap;

gap:10px;

margin:30px 0;


}



.techStack span,
.showcaseTags span {


padding:

8px 14px;


background:

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


border-radius:50px;


font-size:13px;


color:#ddd;


border:

1px solid
rgba(255,255,255,.1);


}






/* =========================================
   PROJECT GRID
========================================= */


.projectGrid {


display:grid;


grid-template-columns:

repeat(2,1fr);


gap:30px;


margin-top:50px;


}



.projectCard {


background:

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


border:

1px solid
rgba(255,255,255,.1);


border-radius:30px;


overflow:hidden;


transition:.4s;


}



.projectCard:hover {


transform:

translateY(-10px);


border-color:

rgba(139,92,246,.5);


}



.cardImage {


position:relative;

overflow:hidden;


}



.cardImage img {


height:280px;

width:100%;

object-fit:cover;


transition:.5s;


}



.projectCard:hover img {


transform:scale(1.08);


}



.cardContent {


padding:30px;


}



.cardContent h3 {


font-size:28px;

}



.cardContent p {


margin:

15px 0 25px;


color:#999;


}



.cardContent a {


color:#c4b5fd;


font-weight:600;


}







/* =========================================
   SHOWCASE SECTION
========================================= */


.showcaseProject {


display:grid;


grid-template-columns:

1fr 1fr;


gap:80px;


align-items:center;


margin-bottom:120px;


}



.showcaseProject.reverse {


direction:rtl;


}



.showcaseProject.reverse > * {


direction:ltr;


}





/* =========================================
   LAPTOP MOCKUP
========================================= */


.device {

position:relative;
width:100%;
height:420px;

overflow:hidden;

background:#111;
border:1px solid rgba(255,255,255,.12);
border-radius:24px;

}

.device img {

width:100%;
height:calc(100% - 45px);

object-fit:cover;
object-position:top center;

display:block;

}



.deviceTop {

height:45px;

display:flex;

gap:10px;

align-items:center;

padding-left:20px;

background:#151515;

}



.deviceTop span {

width:12px;

height:12px;

border-radius:50%;

background:#555;

}


.showcaseContent h3 {

font-size:48px;

letter-spacing:-2px;

}



.projectType {

display:inline-block;

padding:8px 16px;

border-radius:50px;

font-size:13px;

margin-bottom:20px;

}



.projectType.client {

background:rgba(139,92,246,.2);

color:#ddd6fe;

}



.projectType.personal {

background:rgba(37,99,235,.2);

color:#bfdbfe;

}



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


.servicesGrid {


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:25px;


}



.serviceCard {


padding:35px;


background:

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


border:

1px solid
rgba(255,255,255,.1);


border-radius:25px;


transition:.35s;


}



.serviceCard:hover {

background:

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


}



.serviceIcon {


font-size:35px;


margin-bottom:20px;


}



.serviceCard h3 {


font-size:25px;


}



.serviceCard p {


margin-top:15px;


color:#999;


}

/* =========================================
   PRICING SECTION
========================================= */


.pricingSection {

margin-top:120px;

}



.pricingGrid {


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:30px;


}



.priceCard {


position:relative;


padding:40px;


background:

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


border:

1px solid
rgba(255,255,255,.12);


border-radius:30px;


transition:.4s;


}



.priceCard:hover {


transform:translateY(-10px);


border-color:

rgba(139,92,246,.5);


}



.priceCard.featured {


background:

linear-gradient(
145deg,
rgba(139,92,246,.2),
rgba(37,99,235,.15)
);


transform:scale(1.05);


}



.priceCard.featured:hover {


transform:

scale(1.05)
translateY(-10px);


}



.popular {


position:absolute;


top:-15px;


left:50%;


transform:translateX(-50%);


background:

linear-gradient(
135deg,
#8b5cf6,
#2563eb
);


padding:

8px 20px;


border-radius:50px;


font-size:13px;


font-weight:600;


}




.priceHeader h3 {


font-size:28px;


}



.priceHeader h2 {


font-size:45px;


margin:

20px 0;


}



.priceHeader p {


color:#999;


}



.priceCard ul {


list-style:none;


margin:

35px 0;


}



.priceCard li {


padding:

10px 0;


color:#ddd;


}



.priceCard .primaryButton {


width:100%;


}







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


.extras {


margin-top:80px;


}



.extras h2 {


text-align:center;


font-size:40px;


margin-bottom:40px;


}



.extrasGrid {


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:20px;


}



.extrasGrid div {


padding:25px;


background:

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


border:

1px solid
rgba(255,255,255,.1);


border-radius:20px;


text-align:center;


}



.extrasGrid h4 {


font-size:20px;


}



.extrasGrid p {


color:#a78bfa;


margin-top:10px;


}







/* =========================================
   CTA BANNER
========================================= */


.ctaBanner {


margin-top:100px;


padding:

60px;


border-radius:35px;


background:

linear-gradient(
135deg,
rgba(139,92,246,.25),
rgba(37,99,235,.25)
);


border:

1px solid
rgba(255,255,255,.15);


display:flex;


align-items:center;


justify-content:space-between;


gap:30px;


}



.ctaBanner h2 {


font-size:45px;


}



.ctaBanner p {


color:#ccc;


margin-top:15px;


}







/* =========================================
   TRUST SECTION
========================================= */


.trustGrid {


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:25px;


}



.trustCard {


padding:35px;


background:

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


border:

1px solid
rgba(255,255,255,.1);


border-radius:25px;


}



.trustCard h3 {


font-size:40px;


background:

linear-gradient(
135deg,
#8b5cf6,
#2563eb
);


-webkit-background-clip:text;


color:transparent;


}



.trustCard h4 {


font-size:22px;


margin:

15px 0;


}



.trustCard p {


color:#999;


}







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


.faqContainer {


max-width:850px;


margin:auto;


}



.faqItem {


border-bottom:

1px solid
rgba(255,255,255,.15);


}



.faqItem button {


width:100%;


background:none;


border:none;


color:white;


padding:

30px 0;


font-size:20px;


display:flex;


justify-content:space-between;


cursor:pointer;


text-align:left;


}



.faqItem button span {


font-size:30px;


color:#a78bfa;


}



.faqAnswer {


display:none;


padding-bottom:25px;


}



.faqAnswer p {


color:#999;


}



.faqItem.active .faqAnswer {


display:block;


}







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


.contactCTA {

padding:

120px 0 160px;

width:100%;

}



.ctaBox {

width:100%;

max-width:1000px;

margin:auto;

text-align:center;

padding:80px 60px;

border-radius:40px;

background:

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

border:

1px solid rgba(255,255,255,.15);

}



.ctaBox span {


color:#a78bfa;


}



.ctaBox h2 {


font-size:

clamp(40px,5vw,65px);


margin:

20px 0;


}



.ctaBox p {


color:#aaa;


max-width:600px;


margin:auto;


}



.ctaButtons {


display:flex;


justify-content:center;


gap:20px;


margin-top:40px;


}







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


footer {

padding:

80px 0 40px;

margin-top:80px;

}



.footerGrid {

display:grid;

grid-template-columns:

2fr 1fr 1fr;

gap:80px;

align-items:start;

}



.footerBrand img {


width:140px;


margin-bottom:20px;


}



.footerBrand p {


color:#999;


max-width:350px;


}



.footerLinks {


display:flex;


flex-direction:column;


gap:15px;


}



.footerLinks h4 {


margin-bottom:10px;


}



.footerLinks a {


color:#aaa;


transition:.3s;


}



.footerLinks a:hover {


color:white;


}



.footerBottom {


margin-top:50px;


padding-top:30px;


border-top:

1px solid
rgba(255,255,255,.1);


text-align:center;


color:#777;


}







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


@media(max-width:1000px){


.heroGrid,
.featuredProject,
.showcaseProject {


grid-template-columns:1fr;


}



.projectGrid {


grid-template-columns:1fr;


}



.servicesGrid {


grid-template-columns:

repeat(2,1fr);


}



.pricingGrid {


grid-template-columns:1fr;


}



.priceCard.featured {


transform:none;


}



.trustGrid {


grid-template-columns:

repeat(2,1fr);


}



.extrasGrid {


grid-template-columns:

repeat(2,1fr);


}



.ctaBanner {


flex-direction:column;


text-align:center;


}



}





@media(max-width:700px){



header .container {


padding:

15px;


}



nav {

display:flex;

}



.hero {


padding-top:160px;


}



.heroButtons,
.ctaButtons {


flex-direction:column;


}



.stats {


flex-direction:column;


gap:25px;


}



.servicesGrid,
.trustGrid,
.extrasGrid {


grid-template-columns:1fr;


}



.footerGrid {


grid-template-columns:1fr;


}



.projectImage img {


height:250px;


}



.showcaseContent h3 {


font-size:35px;


}



.ctaBanner h2 {


font-size:35px;


}



}


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


.aboutHero {

padding-top:220px;

padding-bottom:100px;

}



.aboutHero h1 {

font-size:

clamp(45px,6vw,75px);

}



.aboutStory {

padding:80px 0;

}



.aboutGrid {

display:grid;

grid-template-columns:

1fr 400px;

gap:80px;

align-items:center;

}



.aboutGrid p {

color:#999;

margin-top:20px;

font-size:17px;

}



.aboutCard {


padding:40px;


background:

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


border:

1px solid rgba(255,255,255,.12);


border-radius:30px;


}



.aboutCard li {

list-style:none;

padding:12px 0;

color:#ddd;

}




.skillsGrid {

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:25px;

}



.skillCard {

padding:35px;


background:

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


border:

1px solid rgba(255,255,255,.1);


border-radius:25px;

}



.skillCard h3 {

font-size:25px;

margin-bottom:20px;

}



.skillCard p {

color:#aaa;

line-height:2;

}




@media(max-width:900px){

.aboutGrid,
.skillsGrid{

grid-template-columns:1fr;

}

}


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


.portfolioHero {

padding-top:220px;

padding-bottom:80px;

}



.portfolioHero h1 {

font-size:

clamp(45px,6vw,75px);

}



.caseStudy {

display:grid;

grid-template-columns:

1fr 1fr;

gap:70px;

align-items:center;

background:

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

border:

1px solid rgba(255,255,255,.12);

padding:40px;

border-radius:35px;

overflow:hidden;

}



.caseImage {

overflow:hidden;

border-radius:25px;

position:relative;

}


.caseImage img {

width:100%;

height:100%;

object-fit:cover;

display:block;

}



.caseImage {

overflow:hidden;

border-radius:25px;

}



.caseImage img {

width:100%;

height:100%;

object-fit:cover;

display:block;

border-radius:25px;

}


.caseContent h3 {


font-size:45px;


margin:

20px 0;


}



.caseContent p {


color:#999;


font-size:17px;


}





.portfolioLargeGrid {


display:grid;


grid-template-columns:

repeat(2,1fr);


gap:35px;


}



.largeProjectCard {


background:

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


border:

1px solid rgba(255,255,255,.12);


border-radius:30px;


overflow:hidden;


transition:.4s;


}



.largeProjectCard:hover {


transform:translateY(-10px);


}



.largeProjectCard img {


width:100%;


height:350px;


object-fit:cover;


}



.largeProjectContent {


padding:35px;


}



.largeProjectContent h3 {


font-size:32px;


margin:20px 0;


}



.largeProjectContent p {


color:#999;


}



.largeProjectContent a {


color:#c4b5fd;


font-weight:600;


}



@media(max-width:900px){


.caseStudy,
.portfolioLargeGrid{

grid-template-columns:1fr;

}


}

/* =========================================
   PRICING PAGE
========================================= */


.priceCard ul li {

display:flex;

align-items:center;

gap:10px;

}



.pricingGrid .priceCard {

min-height:600px;

display:flex;

flex-direction:column;

}



.pricingGrid .priceCard .primaryButton {

margin-top:auto;

}




.priceCard.featured {


box-shadow:

0 30px 80px
rgba(139,92,246,.25);


}

.simpleContact p {

color:#aaa;

font-size:18px;

max-width:650px;

margin:0 auto 40px;

}

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


.contactHero {

padding-top:220px;

padding-bottom:80px;

min-height:500px;

display:flex;

align-items:center;

}



.contactSection {

padding:

80px 0 140px;

}



.simpleContact {

max-width:900px;

margin:auto;

text-align:center;

padding:

70px 60px;


background:

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


border:

1px solid rgba(255,255,255,.12);


border-radius:40px;


animation:

fadeUp .8s ease;

}



.simpleContact h1 {

font-size:

clamp(40px,5vw,70px);

margin:

25px 0;

}



.simpleContact p {

color:#aaa;

font-size:18px;

max-width:650px;

margin:

0 auto 40px;

}



.contactDetails {

display:flex;

justify-content:center;

gap:60px;

margin:

50px 0;

}



.contactDetails div {

text-align:center;

}



.contactDetails h4 {

margin-bottom:10px;

}



.contactDetails a {

color:#c4b5fd;

}



@media(max-width:800px){


.contactDetails {

flex-direction:column;

gap:25px;

}


}



@keyframes fadeUp {


from {

opacity:0;

transform:translateY(40px);

}


to {

opacity:1;

transform:translateY(0);

}


}