/* =====================================================
   JUNTOS AGENCY — PREMIUM DARK THEME
   ===================================================== */

:root {
    /* ---- Colour System ---- */
    --black:       #050508;
    --dark-1:      #0a0a10;
    --dark-2:      #111118;
    --dark-3:      #1a1a24;
    --white:       #f5f5f7;
    --gray-1:      #b0b0bc;
    --gray-2:      #6e6e80;
    --accent:      #7c3aed;      /* Vivid Violet */
    --accent-2:    #a78bfa;      /* Light Violet  */
    --accent-3:    #c084fc;      /* Bright Lilac */
    --accent-glow: rgba(124,58,237,.35);
    --gradient:    linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%);

    /* ---- Glass ---- */
    --glass-bg:     rgba(255,255,255,.03);
    --glass-border: rgba(255,255,255,.06);

    /* ---- Fonts ---- */
    --f-heading: 'Sora', sans-serif;
    --f-body:    'Space Grotesk', sans-serif;

    /* ---- Layout ---- */
    --nav-h: 72px;
    --section-pad: clamp(80px,12vw,160px);
    --gap: clamp(16px, 2.5vw, 32px);
    --radius: 20px;
    --radius-sm: 12px;
}

/* =====================================================
   RESET & BASE
   ===================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{
    scroll-behavior: smooth;
    font-size: 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--dark-1);
}

body{
    background: var(--black);
    color: var(--white);
    font-family: var(--f-body);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

::selection{background:var(--accent);color:#fff}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer}

/* Custom Scrollbar (WebKit) */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--dark-1)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px}

/* =====================================================
   PRELOADER
   ===================================================== */
#preloader{
    position:fixed;inset:0;z-index:9999;
    display:flex;align-items:center;justify-content:center;
    background:var(--black);
    transition: opacity .6s ease, visibility .6s ease;
}
#preloader.done{opacity:0;visibility:hidden;pointer-events:none}

.preloader-inner{text-align:center}

.preloader-logo{
    display: block;
    height: 60px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    margin: 0 auto 2rem;
    animation: pulse 0.8s ease-in-out infinite;
}

@keyframes pulse{0%,100%{opacity:.4;transform:scale(.95)}50%{opacity:1;transform:scale(1)}}

.preloader-bar{
    width:180px;height:3px;
    background:var(--dark-3);border-radius:3px;
    margin:0 auto;overflow:hidden;
}
.preloader-progress{
    width:0%;height:100%;
    background:var(--gradient);border-radius:3px;
    animation: loadBar 0.8s ease-in-out forwards;
}
@keyframes loadBar{to{width:100%}}

/* =====================================================
   CANVAS BACKGROUND
   ===================================================== */
#bgCanvas{
    position:fixed;top:0;left:0;
    width:100%;height:100%;
    pointer-events:none;
    z-index:0;
    opacity:.45;
}

/* =====================================================
   NAVIGATION
   ===================================================== */
#navbar{
    position:fixed;top:0;left:0;width:100%;
    height:var(--nav-h);
    z-index:100;
    display:flex;align-items:center;
    background:transparent;
    border-bottom:1px solid transparent;
    transition: background .4s, border-color .4s, backdrop-filter .4s;
}
#navbar.scrolled{
    background:rgba(5,5,8,.75);
    backdrop-filter:blur(18px);
    border-bottom-color:var(--glass-border);
}

.nav-inner{
    width:100%;max-width:1400px;
    margin:0 auto;padding:0 clamp(20px,4vw,60px);
    display:flex;align-items:center;justify-content:space-between;
}

.nav-logo{display:flex;align-items:center;}
.nav-logo-img{
    height: 42px; /* Set a default height to prevent it from stretching the navbar */
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.nav-menu{display:flex;align-items:center;gap:2.5rem}

.nav-item{
    font-size:.9rem;font-weight:500;
    color:var(--gray-1);
    position:relative;
    transition:color .3s;
}
.nav-item::before{
    content:attr(data-index);
    font-size:.6rem;color:var(--accent-2);
    position:absolute;top:-12px;left:0;
    opacity:0;transform:translateY(4px);
    transition:all .3s;
}
.nav-item:hover{color:var(--white)}
.nav-item:hover::before{opacity:1;transform:translateY(0)}

.nav-item--cta{
    color:#fff !important;
    padding:.55rem 1.5rem;
    border-radius:50px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    transition:all .3s;
}
.nav-item--cta:hover{
    background:var(--accent);
    border-color:var(--accent);
    box-shadow:0 0 25px var(--accent-glow);
}
.nav-item--cta::before{display:none}

/* Burger */
.nav-burger{
    display:none;
    background:none;border:none;
    width:32px;height:32px;
    position:relative;z-index:101;
}
.nav-burger span{
    display:block;width:100%;height:2px;
    background:var(--white);border-radius:2px;
    position:absolute;left:0;
    transition:all .35s cubic-bezier(.77,0,.18,1);
}
.nav-burger span:first-child{top:9px}
.nav-burger span:last-child{bottom:9px}
.nav-burger.open span:first-child{top:15px;transform:rotate(45deg)}
.nav-burger.open span:last-child{bottom:15px;transform:rotate(-45deg)}

/* Mobile Menu Overlay */
.mobile-menu{
    position:fixed;inset:0;z-index:99;
    background:rgba(5,5,8,.96);
    backdrop-filter:blur(24px);
    display:flex;align-items:center;justify-content:center;
    opacity:0;visibility:hidden;
    transition: opacity .5s, visibility .5s;
}
.mobile-menu.open{opacity:1;visibility:visible}

.mobile-menu-inner{text-align:center}
.mobile-link{
    display:block;
    font-family:var(--f-heading);
    font-size:clamp(2rem,6vw,3.5rem);
    font-weight:700;
    color:var(--gray-1);
    margin:.6em 0;
    transition:color .3s, transform .3s;
}
.mobile-link:hover{color:var(--white);transform:translateX(10px)}

/* =====================================================
   HERO
   ===================================================== */
#hero{
    position:relative;
    min-height:100vh;
    display:flex;align-items:center;
    padding: calc(var(--nav-h) + 40px) 0 60px;
    overflow:hidden;
    z-index:1;
}

.hero-container{
    width:100%;max-width:1400px;
    margin:0 auto;padding:0 clamp(20px,4vw,60px);
    position:relative;z-index:2;
}

/* Badge */
.hero-badge{
    display:inline-flex;align-items:center;gap:.6rem;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:50px;
    padding:.45rem 1.2rem .45rem .8rem;
    font-size:.85rem;color:var(--gray-1);
    margin-bottom:2.5rem;
    opacity:0;
}
.badge-dot{
    width:8px;height:8px;border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 8px var(--accent-glow);
    animation:dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Heading */
.hero-heading{
    font-family:var(--f-heading);
    font-weight:800;
    font-size:clamp(2.8rem,6.5vw,5.8rem);
    line-height:1.08;
    letter-spacing:-2px;
    margin-bottom:1.8rem;
}
.line{display:block;overflow:hidden}
.line-inner{
    display:inline-block;
    transform:translateY(110%);
    will-change:transform;
}
.gradient-text{
    background:var(--gradient);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;color:transparent;
}
.heading-dot{
    -webkit-text-fill-color:var(--accent-2);
    color:var(--accent-2);
}

/* Description */
.hero-description{
    max-width:520px;
    color:var(--gray-1);
    font-size:clamp(1rem,1.5vw,1.2rem);
    margin-bottom:2.8rem;
    opacity:0;transform:translateY(20px);
}

/* Buttons */
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;opacity:0;transform:translateY(20px)}

.btn-main{
    display:inline-flex;align-items:center;gap:.6rem;
    background:var(--accent);color:#fff;
    padding:.85rem 2rem;border-radius:50px;
    font-weight:600;font-size:1rem;
    border:1px solid transparent;
    transition:all .35s;
    position:relative;overflow:hidden;
}
.btn-main::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);
    opacity:0;transition:opacity .35s;
}
.btn-main:hover::before{opacity:1}
.btn-main:hover{
    box-shadow:0 0 35px var(--accent-glow);
    transform:translateY(-2px);
}
.btn-main svg{transition:transform .3s}
.btn-main:hover svg{transform:translate(3px,-3px)}

.btn-ghost{
    display:inline-flex;align-items:center;
    padding:.85rem 2rem;border-radius:50px;
    font-weight:600;font-size:1rem;
    color:var(--white);
    border:1px solid var(--glass-border);
    background:var(--glass-bg);
    transition:all .35s;
}
.btn-ghost:hover{
    border-color:var(--accent-2);
    color:var(--accent-2);
    box-shadow:0 0 20px rgba(167,139,250,.15);
}

/* Scroll Indicator */
.hero-scroll{
    display:flex;align-items:center;gap:1rem;
    opacity:0;
    margin-top:clamp(50px, 8vh, 90px);
}
.scroll-line{
    width:1px;height:50px;
    background: linear-gradient(to bottom, var(--accent), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse{0%,100%{height:50px;opacity:1}50%{height:30px;opacity:.4}}
.hero-scroll span{
    writing-mode:vertical-lr;
    font-size:.75rem;letter-spacing:3px;text-transform:uppercase;
    color:var(--gray-2);
}

/* Floating Shapes */
.floating-shape{
    position:absolute;border-radius:50%;
    filter:blur(100px);
    z-index:0;
    pointer-events:none;
    animation: floatShape 8s ease-in-out infinite alternate;
}
.shape-1{
    width:500px;height:500px;
    background:radial-gradient(circle,var(--accent) 0%,transparent 70%);
    top:-10%;right:-10%;opacity:.25;
}
.shape-2{
    width:350px;height:350px;
    background:radial-gradient(circle,var(--accent-3) 0%,transparent 70%);
    bottom:10%;left:-5%;opacity:.2;
    animation-delay:3s;
}
.shape-3{
    width:200px;height:200px;
    background:radial-gradient(circle,#6366f1 0%,transparent 70%);
    top:40%;right:20%;opacity:.15;
    animation-delay:5s;
}
@keyframes floatShape{
    0%{transform:translate(0,0) scale(1)}
    100%{transform:translate(30px,-30px) scale(1.1)}
}

/* =====================================================
   SECTION GENERAL
   ===================================================== */
.section-container{
    width:100%;max-width:1400px;
    margin:0 auto;padding:0 clamp(20px,4vw,60px);
}

#work, #clients, #contact{
    position:relative;z-index:1;
    padding: var(--section-pad) 0;
}

.section-top{margin-bottom:clamp(40px,5vw,70px)}
.section-top.center{text-align:center}
.section-top.center .section-label{justify-content:center}

.section-label{
    display:flex;align-items:center;gap:.75rem;
    font-size:.8rem;text-transform:uppercase;letter-spacing:3px;
    color:var(--accent-2);margin-bottom:1.2rem;
    font-weight:600;
}
.label-line{
    display:inline-block;width:32px;height:1px;
    background:var(--accent-2);
}

.section-heading{
    font-family:var(--f-heading);font-weight:800;
    font-size:clamp(2.2rem,5vw,4rem);
    line-height:1.12;letter-spacing:-1px;
}
.section-heading em{
    font-style:normal;
    background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;color:transparent;
}

/* =====================================================
   WORK / PORTFOLIO
   ===================================================== */
#work{background:var(--black)}

.work-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--gap);
}

.work-card{
    border-radius:var(--radius);
    overflow:hidden;
    position:relative;
    cursor:pointer;
    background:var(--dark-2);
    border:1px solid var(--glass-border);
    transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
    /* initial anim state */
    opacity:0;transform:translateY(60px);
}
.work-card:hover{
    transform:translateY(-6px) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 30px var(--accent-glow);
}
/* Make first card span 2 columns on large screens for visual interest */
.work-card:first-child{grid-column:span 2}
.work-grid.insta-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--gap);
    padding-bottom: 2rem;
    
    /* Elegant scrollbar override */
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--dark-1);
    -webkit-overflow-scrolling: touch;
}
.work-grid.insta-grid::-webkit-scrollbar {
    height: 6px;
}

.insta-card{
    flex: 0 0 calc(33.333% - (var(--gap) * 2 / 3)); /* Show exactly 3 perfectly */
    height: auto;
    aspect-ratio: 9 / 16; /* Perfect Reels/TikTok vertical ratio */
    padding: 0;
    pointer-events: auto;
    scroll-snap-align: center;
}
.insta-card iframe{
    position:absolute;inset:0;
    width:100%;height:100%;
}


.card-visual{
    position:relative;
    width:100%;padding-top:62%;
    overflow:hidden;
}
.work-card:first-child .card-visual{padding-top:52%}

.card-visual img{
    position:absolute;inset:0;
    width:100%;height:100%;object-fit:cover;
    transition:transform .7s cubic-bezier(.2,.8,.2,1), filter .5s;
}
.work-card:hover .card-visual img{
    transform:scale(1.06);
    filter:brightness(.75);
}

.card-overlay{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    opacity:0;transition:opacity .4s;
}
.work-card:hover .card-overlay{opacity:1}

.play-icon{
    width:64px;height:64px;border-radius:50%;
    background:rgba(255,255,255,.1);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.2);
    display:flex;align-items:center;justify-content:center;
    color:#fff;
    transform:scale(.7);transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.work-card:hover .play-icon{transform:scale(1)}
.play-icon svg{margin-left:3px}

.card-meta{
    padding:1.4rem 1.8rem;
}
.card-tag{
    display:inline-block;
    font-size:.7rem;text-transform:uppercase;letter-spacing:2px;
    color:var(--accent-2);margin-bottom:.4rem;
}
.card-meta h3{
    font-family:var(--f-heading);font-weight:600;font-size:1.15rem;
    color:var(--white);
    transition:color .3s;
}
.work-card:hover .card-meta h3{color:var(--accent-2)}

/* =====================================================
   CLIENTS / MARQUEE
   ===================================================== */
#clients{
    background:var(--dark-1);
    border-top:1px solid var(--glass-border);
    border-bottom:1px solid var(--glass-border);
}

.marquee-track{
    margin-top:clamp(30px,4vw,60px);
    overflow:hidden;
    display:flex;flex-direction:column;gap:1.5rem;
}

.marquee-row{
    display:flex;width:fit-content;
    animation: marqueeScroll 40s linear infinite;
}
.marquee-row.reverse{animation-direction:reverse}

.marquee-row:hover{animation-play-state:paused}

.marquee-content{
    display:flex;align-items:center;flex-shrink:0;
}

.brand-logo{
    height: clamp(35px, 6vw, 45px); /* Responsive height for logos */
    width: auto;
    object-fit: contain;
    padding: 0 clamp(1.5rem, 3vw, 3rem);
    filter: brightness(0) invert(1) opacity(0.5);
    transition: all .4s cubic-bezier(.2,.8,.2,1);
    cursor: pointer;
}
.brand-logo:hover{
    filter: brightness(0) invert(1) opacity(1) drop-shadow(0 0 10px var(--accent-glow));
    transform: scale(1.08);
}

.brand-sep{
    color:var(--accent);font-size:1rem;
    padding:0 .5rem;
}

@keyframes marqueeScroll{
    0%{transform:translateX(0)}
    100%{transform:translateX(-50%)}
}

/* =====================================================
   CONTACT
   ===================================================== */
#contact{background:var(--black)}

.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(40px,5vw,80px);
    align-items:start;
}

.contact-desc{
    color:var(--gray-1);font-size:1.05rem;
    margin:1.5rem 0 2.5rem;max-width:420px;
}

.contact-links{
    display:flex;flex-direction:column;gap:1.2rem;
    margin-bottom:2.5rem;
}
.c-link{
    display:flex;align-items:center;gap:1rem;
    padding:1rem 1.4rem;
    border-radius:var(--radius-sm);
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    transition:all .35s;
}
.c-link:hover{
    border-color:var(--accent);
    background:rgba(124,58,237,.06);
    transform:translateX(6px);
}
.c-link-icon{
    width:48px;height:48px;border-radius:12px;
    background:rgba(124,58,237,.12);
    display:flex;align-items:center;justify-content:center;
    color:var(--accent-2);flex-shrink:0;
}
.c-link small{
    font-size:.75rem;color:var(--gray-2);display:block;
    text-transform:uppercase;letter-spacing:1px;margin-bottom:2px;
}
.c-link span{font-size:1rem;font-weight:500}

.socials{display:flex;gap:.75rem}
.social{
    width:44px;height:44px;border-radius:50%;
    border:1px solid var(--glass-border);
    background:var(--glass-bg);
    display:flex;align-items:center;justify-content:center;
    color:var(--gray-1);
    transition:all .35s;
}
.social:hover{
    background:var(--accent);border-color:var(--accent);
    color:#fff;
    box-shadow:0 0 18px var(--accent-glow);
    transform:translateY(-4px);
}

/* Form */
.contact-right{
    background:var(--dark-2);
    border:1px solid var(--glass-border);
    border-radius:var(--radius);
    padding:clamp(24px,3vw,48px);
}

.c-form{display:flex;flex-direction:column;gap:1.8rem}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

.form-field{position:relative}
.form-field input,
.form-field textarea{
    width:100%;
    background:transparent;border:none;
    border-bottom:1px solid var(--glass-border);
    padding:.8rem 0;
    color:var(--white);font-size:1rem;font-family:var(--f-body);
    transition:border-color .3s;
    resize:none;
}
.form-field input:focus,
.form-field textarea:focus{outline:none;border-bottom-color:var(--accent)}

.form-field label{
    position:absolute;top:.8rem;left:0;
    font-size:.95rem;color:var(--gray-2);
    pointer-events:none;
    transition:all .3s ease;
}
.form-field input:focus ~ label,
.form-field input:not(:placeholder-shown) ~ label,
.form-field textarea:focus ~ label,
.form-field textarea:not(:placeholder-shown) ~ label{
    top:-.9rem;font-size:.72rem;
    color:var(--accent-2);letter-spacing:1px;
}

.field-line{
    position:absolute;bottom:0;left:0;
    width:0;height:1px;
    background:var(--gradient);
    transition:width .4s;
}
.form-field input:focus ~ .field-line,
.form-field textarea:focus ~ .field-line{width:100%}

.btn-submit{
    display:inline-flex;align-items:center;gap:.6rem;
    background:var(--accent);color:#fff;
    padding:.9rem 2.2rem;border-radius:50px;
    font-weight:600;font-size:1rem;
    border:none;
    transition:all .35s;
    align-self:flex-start;
    position:relative;overflow:hidden;
}
.btn-submit::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);
    opacity:0;transition:opacity .35s;
}
.btn-submit:hover::before{opacity:1}
.btn-submit:hover{
    box-shadow:0 0 30px var(--accent-glow);
    transform:translateY(-2px);
}
.btn-submit svg{transition:transform .3s}
.btn-submit:hover svg{transform:translateX(5px)}

/* =====================================================
   FOOTER
   ===================================================== */
#footer{
    background:var(--dark-1);
    border-top:1px solid var(--glass-border);
    padding:2rem 0;
    position:relative;z-index:1;
}
.footer-inner{
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:1rem;
}
.footer-logo{
    font-family:var(--f-heading);font-weight:800;
    font-size:1.2rem;letter-spacing:2px;
}
.footer-logo span{color:var(--accent-2)}
.footer-copy{font-size:.85rem;color:var(--gray-2)}
.footer-links{display:flex;gap:1.5rem}
.footer-links a{
    font-size:.85rem;color:var(--gray-2);
    transition:color .3s;
}
.footer-links a:hover{color:var(--accent-2)}

/* =====================================================
   SCROLL REVEAL INITIAL STATES
   ===================================================== */
.reveal-text, .reveal-up{opacity:0;transform:translateY(40px)}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media(max-width:1024px){
    .work-grid:not(.insta-grid){grid-template-columns:1fr 1fr}
    .work-card:first-child{grid-column:span 1}
    .insta-card{flex: 0 0 calc(50% - (var(--gap) / 2));} /* 2 per view on tablet */
}

@media(max-width:768px){
    .nav-menu{display:none}
    .nav-burger{display:block}

    .work-grid:not(.insta-grid){grid-template-columns:1fr}
    .insta-card{flex: 0 0 85%;} /* 1 per view on mobile with a sneak peek next to it */

    .contact-grid{grid-template-columns:1fr}

    .form-row{grid-template-columns:1fr}

    .footer-inner{flex-direction:column;text-align:center}
}

@media(max-width:480px){
    .hero-heading{letter-spacing:-1px}
}