:root {
    --color-bg: #09090b;         
    --color-primary: #76E5FF; /* Electric Blue (Neon) */
    --color-secondary: #6006BF; /* Deep Purple */
    --color-text: #FFFFFF;
    --color-text-muted: #A0A0A0;
    
    --font-heading: 'Bebas Neue', sans-serif;
    --font-ui: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    --container-width: 1400px;
    --section-pad: 8rem 0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }

body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-body); line-height: 1.5; overflow-x: hidden; cursor: none; text-transform: none; } h1, h2, h3, h4, h5, h6, .btn, .nav-link, .hero-marquee { text-transform: uppercase; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 0.9; margin: 0; letter-spacing: 0.02em; }
p { text-transform: none; font-family: var(--font-body); }

.container { max-width: var(--container-width); margin: 0 auto; padding: 0 2rem; }
.container-narrow { max-width: 1000px; }
section { padding: var(--section-pad); position: relative; z-index: 1; }

.btn {
    display: inline-flex; justify-content: center; align-items: center;
    padding: 1rem 2rem; font-family: var(--font-ui); font-weight: 700; font-size: 1.1rem;
    text-decoration: none; text-transform: uppercase; cursor: none;
    transition: transform 0.1s, box-shadow 0.1s; border: none; letter-spacing: 1px;
}
.btn-primary { 
    background-color: var(--color-primary); color: #000; 
    box-shadow: 6px 6px 0px var(--color-secondary);
}
.btn-primary:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0px var(--color-secondary); }
.btn-primary:hover { background-color: #fff; }

.btn-outline {
    background-color: transparent; color: var(--color-primary);
    border: 3px solid var(--color-primary); box-shadow: 6px 6px 0px var(--color-primary);
}
.btn-outline:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0px var(--color-primary); }
.btn-outline:hover { background-color: var(--color-primary); color: #000; }

.btn-large { padding: 1.25rem 3rem; font-size: 1.3rem; }
.btn-massive { padding: 2rem 5rem; font-size: 2.5rem; font-family: var(--font-heading); box-shadow: 10px 10px 0px var(--color-secondary); }

.display-title { font-size: clamp(6rem, 20vw, 20rem); letter-spacing: -0.01em; margin-bottom: 2rem; }
.display-title-huge { font-size: clamp(4rem, 15vw, 15rem); line-height: 0.85; margin-bottom: 3rem; }
.section-title { font-size: clamp(4rem, 8vw, 10rem); color: var(--color-primary); margin-bottom: 2rem; }
.outline-text { color: transparent; -webkit-text-stroke: 2px var(--color-primary); }
.highlight-text { color: var(--color-primary); }

.header { position: fixed; top: 0; width: 100%; z-index: 100; padding: 1.5rem 0; border-bottom: 2px solid transparent; transition: all 0.3s; }
.header.scrolled { background-color: rgba(9, 9, 11, 0.95); backdrop-filter: blur(10px); border-bottom-color: rgba(118, 229, 255, 0.2); padding: 1rem 0; }
.header-inner { display: flex; justify-content: space-between; align-items: center; }
.logo-text { font-family: var(--font-heading); font-size: 2.5rem; color: #fff; letter-spacing: 2px; }
.nav { display: flex; gap: 3rem; }
.nav-link { color: #fff; text-decoration: none; font-family: var(--font-ui); font-weight: 700; font-size: 1.1rem; position: relative; }
.nav-link:hover { color: var(--color-primary); }

.cursor-dot { width: 10px; height: 10px; background-color: var(--color-primary); border-radius: 50%; position: fixed; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); }
.cursor-outline { width: 40px; height: 40px; border: 2px solid var(--color-primary); border-radius: 50%; position: fixed; pointer-events: none; z-index: 9998; transform: translate(-50%, -50%); transition: width 0.15s, height 0.15s; }
body.hovering .cursor-dot { background-color: #fff; }
body.hovering .cursor-outline { width: 70px; height: 70px; background-color: rgba(118, 229, 255, 0.1); border-style: dashed; }

.marquee-container { width: 100%; overflow: hidden; background: var(--color-primary); color: #000; padding: 1rem 0; }
.marquee-content { display: flex; white-space: nowrap; animation: marquee 20s linear infinite; }
.marquee-content span { font-family: var(--font-heading); font-size: 4rem; padding-right: 2rem; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.marquee-hero { position: absolute; top: 20%; left: -10vw; width: 120vw; transform: rotate(-5deg); z-index: -1; opacity: 0.1; }
.marquee-hero .marquee-content span { font-size: 15vw; color: transparent; -webkit-text-stroke: 2px #fff; }

.trust-banner { background-color: var(--color-text); padding: 0; overflow: hidden; position: relative; margin: 4rem 0; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; transform: skewY(-2.5deg); border-top: 4px solid var(--color-primary); border-bottom: 4px solid var(--color-primary); z-index:1; }
.trust-marquee { background-color: transparent; color: #000; padding: 1rem 0; width: 105%; margin-left: -2.5%; transform: none; border: none; }
.trust-marquee span { font-size: 3rem; }

.secondary-marquee { background-color: var(--color-secondary); transform: rotate(3deg); overflow: hidden; position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; z-index:1; }
.secondary-marquee .marquee-content { background-color: transparent; color: #fff; width: 105%; margin-left: -2.5%; transform: none; padding: 1rem 0; height: 120px; display:flex; align-items:center;}

.grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 100px 100px; z-index: -2; opacity: 0.5; }

.hero { min-height: 100vh; display: flex; align-items: flex-end; padding-bottom: 5rem; position: relative; overflow: hidden;}
.hero-container { position: relative; z-index: 10; width: 100%; }
.hero-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; border-top: 4px solid var(--color-primary); padding-top: 3rem; margin-top: 2rem; }
.hero-subtitle { font-size: 1.5rem; color: var(--color-text-muted); max-width: 500px; }
.hero-cta { display: flex; gap: 2rem; justify-content: flex-end; align-items:center; }

.services-wrapper { border-top: 2px solid rgba(255,255,255,0.1); }
.service-row { display: grid; grid-template-columns: 100px 1fr; gap: 2rem; padding: 4rem 0; border-bottom: 2px solid rgba(255,255,255,0.1); transition: background-color 0.3s, padding-left 0.3s; }
.service-row:hover { background-color: var(--color-primary); color: #000; padding-left: 2rem; cursor: none;}
.service-row:hover h3, .service-row:hover p, .service-row:hover .service-number { color: #000; }
.service-number { font-family: var(--font-heading); font-size: 4rem; color: var(--color-text-muted); }
.service-content h3 { font-size: 3.5rem; margin-bottom: 1rem; color: #fff; }
.service-content p { font-size: 1.25rem; font-family: var(--font-ui); color: var(--color-text-muted); text-transform: none; max-width: 600px; }

.skewed-section { background-color: var(--color-text); color: #000; transform: skewY(-4deg); padding: 10rem 0; margin: 5rem 0; }
.skewed-unskew-content { transform: skewY(4deg); }
.skewed-section .section-title { color: #000; }
.skewed-section .section-desc { color: #555; font-family: var(--font-ui); text-transform: uppercase; font-weight: 700; font-size: 1.5rem;}
.section-header-flex { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 4px solid #000; padding-bottom: 2rem; margin-bottom: 4rem; }

.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.work-item { text-decoration: none; color: #000; display: block; }
.work-item:hover .work-image { transform: scale(0.95); }
.work-image-wrapper { overflow: hidden; margin-bottom: 2rem; background: #000; border: 4px solid #000; box-shadow: 10px 10px 0px rgba(0,0,0,0.1); transition: transform 0.3s; }
.work-item:hover .work-image-wrapper { transform: translate(-5px, -5px); box-shadow: 15px 15px 0px var(--color-primary); }
.work-image { width: 100%; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; transition: transform 0.5s; }
.placeholder-text { font-family: var(--font-heading); font-size: 5rem; }
.work-info h3 { font-size: 3rem; margin-bottom: 0.5rem; }
.outcome { font-family: var(--font-ui); font-size: 1.1rem; font-weight: 700; background: var(--color-primary); display: inline-block; padding: 0.5rem 1rem; color: #000; }

.center { text-align: center; margin-bottom: 4rem; }
.process-flow { display: flex; flex-direction: column; gap: 2rem; }
.process-step { background: #111; border: 2px solid #333; padding: 3rem; display: flex; align-items: center; gap: 4rem; transition: transform 0.2s, border-color 0.2s; position: relative;}
.process-step:hover { transform: translateX(20px); border-color: var(--color-primary); background: #000; }
.step-giant-number { font-family: var(--font-heading); font-size: 8rem; color: transparent; -webkit-text-stroke: 2px var(--color-text-muted); line-height: 0.8; }
.process-step:hover .step-giant-number { color: var(--color-primary); -webkit-text-stroke: 0; }
.step-details h3 { font-size: 3.5rem; margin-bottom: 1rem; }
.step-details p { font-family: var(--font-ui); font-size: 1.25rem; color: var(--color-text-muted); text-transform: none; }

.about-flex { display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; align-items: start; margin-top: 8rem; }
.about-lead { font-family: var(--font-ui); font-size: 2rem; line-height: 1.4; color: var(--color-text); text-transform: none;}

.cta { padding: 15rem 0; text-align: center; border-top: 4px solid var(--color-primary); }
.cta-subtitle { font-family: var(--font-ui); font-size: 1.5rem; text-transform: none; margin-bottom: 4rem; color: var(--color-text-muted); }

.footer { background: #000; padding: 6rem 0 2rem; border-top: 2px solid #222; }
.footer-top { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-bottom: 6rem; }
.footer-logo-text { font-size: 5rem; margin-bottom: 1rem; color: var(--color-primary); font-family: var(--font-heading); line-height: 1;}
.footer-tagline { font-family: var(--font-ui); font-size: 1.25rem; color: #888; text-transform: none; margin-bottom: 2rem; }
.contact-details p { color: #fff; font-family: var(--font-ui); font-weight: 700; font-size: 1.5rem; margin-bottom: 0.5rem; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.link-column { display: flex; flex-direction: column; gap: 1rem; }
.link-column a { color: #fff; text-decoration: none; font-family: var(--font-heading); font-size: 2.5rem; transition: color 0.2s, padding-left 0.2s; }
.link-column a:hover { color: var(--color-primary); padding-left: 10px; }
.footer-bottom { border-top: 2px solid #222; padding-top: 2rem; color: #555; font-family: var(--font-ui); text-transform: none; }

.animate-fade-in { animation: fadeIn 1s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1024px) {
    .display-title { font-size: clamp(4rem, 15vw, 15rem); }
    .hero-bottom-grid { grid-template-columns: 1fr; gap: 2rem; }
    .hero-cta { justify-content: flex-start; }
    .work-grid { grid-template-columns: 1fr; }
    .about-flex { grid-template-columns: 1fr; }
    .process-step { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .footer-top { grid-template-columns: 1fr; }
    .section-header-flex { flex-direction: column; align-items: flex-start; gap: 1rem; }
}
@media (max-width: 768px) {
    .nav, .cta-button-nav { display: none; }
    .service-row { grid-template-columns: 1fr; padding: 2rem 0; }
    .service-number { font-size: 3rem; margin-bottom: 1rem; }
}

/* Updates */
.header-inner { position: relative; }
.nav { position: absolute; left: 50%; transform: translateX(-50%); }
.nav-logo-img { height: 60px; width: 180px; background-color: var(--color-primary); -webkit-mask: url("Asset 13.svg") no-repeat center; mask: url("Asset 13.svg") no-repeat center; -webkit-mask-size: contain; mask-size: contain; display: block; } .cta-button-nav { margin-left: auto; }
.footer-logo-img { height: 80px; width: 240px; background-color: var(--color-primary); -webkit-mask: url("Asset 13.svg") no-repeat left center; mask: url("Asset 13.svg") no-repeat left center; -webkit-mask-size: contain; mask-size: contain; display: block; margin-bottom: 1rem; }



.about-logo-img { height: 80px; width: 250px; background-color: var(--color-primary); -webkit-mask: url('Asset 18.svg') no-repeat left center; mask: url('Asset 18.svg') no-repeat left center; -webkit-mask-size: contain; mask-size: contain; display: block; margin-bottom: 2rem; }