/* Lux Digital Studio app.bundle.css generated */
/* --- base/variables.css --- */
/*======================================================
    VARIABLES
    Lux Digital Studio v4
======================================================*/

:root{

    /*==============================
    COLORES
    ==============================*/

    --color-background:#0a0a0c;

    --color-surface:#111114;

    --color-surface-light:#17171b;

    --color-primary:#FF4FA3;

    --color-primary-dark:#FF2E88;

    --color-white:#FFFFFF;

    --color-text:#E8E6EA;

    --color-text-light:#A8A3AD;

    --color-border:rgba(255,255,255,.08);

    /*==============================
    TIPOGRAFÍAS
    ==============================*/

    --font-title:"Cormorant Garamond",serif;

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

    /*==============================
    ESPACIADOS
    ==============================*/

    --space-xs:10px;

    --space-sm:20px;

    --space-md:40px;

    --space-lg:80px;

    --space-xl:120px;

    /*==============================
    BORDES
    ==============================*/

    --radius-sm:12px;

    --radius-md:20px;

    --radius-lg:30px;

    --radius-xl:50px;

    /*==============================
    SOMBRAS
    ==============================*/

    --shadow-soft:

    0 10px 30px rgba(0,0,0,.30);

    --shadow-primary:

    0 0 35px rgba(255,79,163,.20);

    /*==============================
    TRANSICIONES
    ==============================*/

    --transition:.35s ease;

}

/* --- base/reset.css --- */
/*======================================================
RESET
======================================================*/

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

background:var(--color-background);

font-family:var(--font-body);

color:var(--color-text);

overflow-x:hidden;

}

img{

display:block;

max-width:100%;

}

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}

button{

font:inherit;

cursor:pointer;

background:none;

border:none;

}

section{
    padding:0;
}

/* --- base/typography.css --- */
/*======================================================
    TYPOGRAPHY
    Lux Digital Studio
======================================================*/

html{
    font-size:16px;
    -webkit-text-size-adjust:100%;
}

body{
    font-family:var(--font-body);
    font-size:1rem;
    font-weight:400;
    line-height:1.7;
    color:var(--color-text);
    background:var(--color-background);
}

h1,h2,h3,h4,h5,h6{
    font-family:var(--font-title);
    font-weight:600;
    line-height:1.2;
    color:var(--color-white);
    letter-spacing:-.01em;
}

p{
    margin:0 0 1rem;
    line-height:1.7;
}

a{
    color:inherit;
    text-decoration:none;
}

strong{
    font-weight:600;
    color:var(--color-white);
}

small{
    font-size:.85em;
}


/* --- base/animations.css --- */
/*======================================================
    ANIMATIONS
    Lux Digital Studio
======================================================*/

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(24px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeIn{
    from{ opacity:0; }
    to{ opacity:1; }
}

@keyframes pulseGlow{
    0%,100%{
        box-shadow:0 0 20px rgba(255,79,163,.15);
    }
    50%{
        box-shadow:0 0 40px rgba(255,79,163,.30);
    }
}

.reveal{
    opacity:0;
    transform:translateY(28px);
    transition:
        opacity .7s ease,
        transform .7s ease;
    transition-delay:var(--reveal-delay, 0ms);
}

.reveal.is-visible{
    opacity:1;
    transform:translateY(0);
}

@media(prefers-reduced-motion:reduce){
    .reveal{
        opacity:1;
        transform:none;
        transition:none;
    }
}


/* --- layout/container.css --- */
/*======================================================
CONTAINER
======================================================*/

.container{

width:min(90%,1300px);

margin:auto;

}

/* --- layout/header.css --- */
/*======================================================

    HEADER

    Lux Digital Studio v4.0

======================================================*/



/*========================================

HEADER

========================================*/



.header{



    position:fixed;



    top:0;



    left:0;



    width:100%;



    z-index:999;



    transition:all .35s ease;



    background:linear-gradient(180deg, rgba(8,8,8,.85), rgba(8,8,8,.35) 70%, transparent);



}



/*========================================

ESTADO AL HACER SCROLL

========================================*/



.header.scrolled{



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



    backdrop-filter:blur(18px);



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



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



    box-shadow:0 15px 40px rgba(0,0,0,.35);



}



/*========================================

CONTENEDOR

========================================*/



.header-container{



    display:flex;



    justify-content:space-between;



    align-items:center;



    min-height:76px;



    gap:20px;



}



/*========================================

LOGO

========================================*/



.logo{



    display:flex;



    align-items:center;



    color:#ffffff;



    text-decoration:none;



    transition:opacity .35s ease, transform .35s ease;



    position:relative;



    z-index:1002;



}



.logo-wordmark{



    display:inline-block;



    font-family:"Cormorant Garamond",serif;



    font-size:clamp(1.2rem, 2.1vw, 1.42rem);



    font-weight:600;



    letter-spacing:.04em;



    line-height:1.15;



    color:#fff;



    background:linear-gradient(120deg, #ffffff 0%, #ffe8f4 42%, #ffc4e3 72%, #ffffff 100%);



    -webkit-background-clip:text;



    background-clip:text;



    text-shadow:

        0 0 18px rgba(255,79,163,.14),

        0 0 42px rgba(255,79,163,.08);



    filter:drop-shadow(0 0 10px rgba(255,79,163,.12));



}



.logo:hover{



    opacity:.94;



    transform:translateY(-1px);



}



.logo:hover .logo-wordmark{



    text-shadow:

        0 0 22px rgba(255,79,163,.22),

        0 0 48px rgba(255,79,163,.12);



}



/*========================================

NAVBAR — ESCRITORIO

========================================*/



.navbar{



    display:flex;



}



.mobile-menu{



    display:flex;



    align-items:center;



}



.mobile-menu-header,

.menu-close,

.menu-item--mobile{

    display:none;

}



.header .mobile-menu__cta{

    display:none !important;

}



.menu{



    display:flex;



    align-items:center;



    gap:28px;



    list-style:none;



    margin:0;



    padding:0;



}



.menu li{



    margin:0;



    padding:0;



}



/*========================================

ENLACES

========================================*/



.menu a{



    position:relative;



    display:inline-block;



    color:rgba(255,255,255,.82);



    font-size:.92rem;



    font-weight:500;



    text-decoration:none;



    transition:color .3s ease;



}



.menu a::after{



    content:"";



    position:absolute;



    left:0;



    bottom:-8px;



    width:0;



    height:2px;



    background:#ff4fa3;



    transition:width .35s ease;



}



.menu a:hover,

.menu a:focus-visible{



    color:#ff4fa3;



}



.menu a:hover::after,

.menu a.is-active::after{



    width:100%;



}



.menu a.is-active{



    color:#ff4fa3;



}



/*========================================

BOTÓN CTA

========================================*/



.nav-button,
.header-cta{



    padding:12px 22px;



    font-size:.9rem;



    position:relative;



    z-index:1002;



}



/*========================================

BOTÓN HAMBURGUESA

========================================*/



.menu-toggle{



    display:none;



    border:0;



    background:transparent;



    color:#ffffff;



    cursor:pointer;



    width:44px;



    height:44px;



    padding:0;



    position:relative;



    z-index:1004;



    border-radius:10px;



    transition:box-shadow .25s ease, background .25s ease;



}



.menu-toggle__icon{



    display:grid;



    align-content:center;



    justify-items:center;



    gap:5px;



    width:22px;



    height:16px;



    margin:0 auto;



}



.menu-toggle__bar{



    display:block;



    width:22px;



    height:2.5px;



    border-radius:999px;



    background:#ffffff;



    box-shadow:0 0 10px rgba(255,79,163,.18);



    transition:transform .28s ease, opacity .2s ease, background .25s ease;



}



.menu-toggle:hover .menu-toggle__bar,
.menu-toggle:focus-visible .menu-toggle__bar{



    background:#fff;



    box-shadow:0 0 12px rgba(255,79,163,.42);



}



.menu-toggle.is-active{



    box-shadow:0 0 18px rgba(255,79,163,.22);



}



.menu-toggle.is-active .menu-toggle__bar:nth-child(1){



    transform:translateY(7.5px) rotate(45deg);



}



.menu-toggle.is-active .menu-toggle__bar:nth-child(2){



    opacity:0;



    transform:scaleX(0);



}



.menu-toggle.is-active .menu-toggle__bar:nth-child(3){



    transform:translateY(-7.5px) rotate(-45deg);



}



.menu-toggle:focus-visible{

    outline:2px solid #ff4fa3;

    outline-offset:3px;

    border-radius:8px;

}



/*========================================

OVERLAY

========================================*/



.nav-overlay{



    position:fixed;



    inset:0;



    background:rgba(0,0,0,.55);



    backdrop-filter:blur(4px);



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



    opacity:0;



    visibility:hidden;



    transition:opacity .3s ease, visibility .3s ease;



    z-index:1000;



}



.nav-overlay.is-visible{



    opacity:1;



    visibility:visible;



}



html.menu-open,
body.menu-open{

    overflow:hidden;

    overflow-x:hidden;

}



/*========================================

RESPONSIVE — PANEL MÓVIL

========================================*/



@media(max-width:992px){



    .nav-button,
    .header-cta{



        display:none;



    }



    .menu-toggle{



        display:block;



    }



    .navbar{



        position:fixed;



        top:0;



        right:0;



        width:min(100%, 360px);



        max-width:100%;



        height:100dvh;



        padding:0;



        background:rgba(10,10,12,.98);



        border-left:1px solid rgba(255,255,255,.08);



        box-shadow:-16px 0 48px rgba(0,0,0,.35);



        transform:translateX(100%);



        transition:transform .35s ease;



        z-index:1001;



        overflow-x:hidden;



        overflow-y:auto;



        overscroll-behavior:contain;



    }



    .navbar.active{



        transform:translateX(0);



        z-index:1003;



    }



    .mobile-menu{



        display:flex;



        flex-direction:column;



        align-items:stretch;



        gap:0;



        width:100%;



        min-height:100%;



        padding:clamp(18px, 4vw, 24px) clamp(20px, 5vw, 28px) clamp(24px, 6vw, 32px);



    }



    .mobile-menu-header{



        display:flex;



        align-items:center;



        justify-content:space-between;



        gap:16px;



        margin-bottom:clamp(20px, 5vw, 28px);



        padding-bottom:18px;



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



    }



    .mobile-menu-header .logo{



        min-width:0;



        flex:1;



    }



    .mobile-menu-header .logo .logo-wordmark{



        font-size:1.1rem;



        max-width:100%;



    }



    .menu-close{



        display:grid;



        place-items:center;



        width:40px;



        height:40px;



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



        border-radius:10px;



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



        color:#fff;



        font-size:1.2rem;



        cursor:pointer;



        flex-shrink:0;



        transition:border-color .3s ease, color .3s ease, background .3s ease;



    }



    .menu-close:hover,

    .menu-close:focus-visible{



        border-color:rgba(255,79,163,.35);



        color:#ffc4e3;



        background:rgba(255,79,163,.08);



    }



    .mobile-menu__links{



        display:flex !important;



        flex-direction:column !important;



        align-items:stretch !important;



        gap:0 !important;



        width:100%;



        margin:0;



        padding:0;



        list-style:none;



        white-space:normal !important;



    }



    .mobile-menu__links li{



        width:100%;



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



    }



    .menu-item--mobile{



        display:list-item;



    }



    .mobile-menu__links a{



        display:block;



        width:100%;



        padding:16px 4px;



        font-size:1.05rem;



        font-weight:500;



        line-height:1.35;



        color:rgba(255,255,255,.88);



        white-space:normal;



        word-break:break-word;



    }



    .mobile-menu__links a::after{



        display:none;



    }



    .mobile-menu__links a:hover,

    .mobile-menu__links a:focus-visible{



        color:#ff4fa3;



        padding-left:10px;



    }



    .mobile-menu__links a.is-active{



        color:#ff4fa3;



        padding-left:10px;



        border-left:2px solid #ff4fa3;



    }



    .header .mobile-menu__cta{



        display:inline-flex !important;



        justify-content:center;



        align-items:center;



        width:100%;



        margin-top:auto;



        padding:14px 22px;



        font-size:.95rem;



        text-align:center;



    }



}



@media(max-width:768px){



    .header-container{



        min-height:72px;



    }



    .header-logo .logo-wordmark,
    .mobile-menu-header .logo .logo-wordmark{



        font-size:1.12rem;



        letter-spacing:.03em;



    }



}



@media(max-width:480px){



    .navbar{



        width:100%;



    }



    .header-logo .logo-wordmark,
    .mobile-menu-header .logo .logo-wordmark{



        font-size:1.02rem;



        max-width:min(52vw, 220px);



        white-space:nowrap;



        overflow:hidden;



        text-overflow:ellipsis;



    }



    .mobile-menu__links a{



        font-size:1rem;



        padding:15px 2px;



    }



}




/* --- layout/footer.css --- */
/*======================================================
    FOOTER
    Lux Digital Studio v4.0
======================================================*/

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

.footer{

    position:relative;

    background:#090909;

    padding:100px 0 30px;

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

    overflow:hidden;

}

/*=========================================
EFECTOS
=========================================*/

.footer::before{

    content:"";

    position:absolute;

    top:-250px;

    left:-250px;

    width:600px;

    height:600px;

    background:radial-gradient(circle,
    rgba(255,79,163,.12),
    transparent 70%);

    filter:blur(80px);

}

.footer::after{

    content:"";

    position:absolute;

    right:-220px;

    bottom:-220px;

    width:500px;

    height:500px;

    background:radial-gradient(circle,
    rgba(255,79,163,.08),
    transparent 70%);

    filter:blur(80px);

}

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

.footer-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:

    2fr
    1fr
    1fr
    1fr;

    gap:70px;

    margin-bottom:70px;

}

/*=========================================
LOGO
=========================================*/

.footer-logo{
    display:inline-flex;
    align-items:center;
    margin-bottom:25px;
    text-decoration:none;
}

.footer-logo .logo-wordmark--footer{
    font-family:var(--font-title);
    font-size:1.35rem;
    font-weight:600;
    letter-spacing:.04em;
    color:#fff;
    background:linear-gradient(120deg, #ffffff 0%, #ffe8f4 45%, #ffc4e3 100%);
    -webkit-background-clip:text;
    background-clip:text;
    text-shadow:0 0 18px rgba(255,79,163,.12);
    max-width:none;
    white-space:normal;
    overflow:visible;
    text-overflow:unset;
    line-height:1.25;
    word-break:normal;
}

.footer-column p{

    color:var(--color-text-light);

    line-height:1.9;

    max-width:420px;

}

/*=========================================
TÍTULOS
=========================================*/

.footer-column h3{

    color:#fff;

    margin-bottom:25px;

    font-size:20px;

}

/*=========================================
LISTAS
=========================================*/

.footer-column ul{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.footer-column a{

    color:var(--color-text-light);

    transition:.3s;

}

.footer-column a:hover{

    color:var(--color-primary);

    padding-left:6px;

}

/*=========================================
SOCIAL
=========================================*/

.footer-social{

    display:flex;

    gap:16px;

}

.footer-social a{

    width:48px;

    height:48px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#151515;

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

    color:#ffffff;

    font-size:20px;

    transition:.35s;

}

.footer-social a:hover{

    background:var(--color-primary);

    color:#fff;

    transform:translateY(-6px);

    box-shadow:

    0 15px 40px rgba(255,79,163,.35);

}

/*=========================================
BOTTOM
=========================================*/

.footer-bottom{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:30px;

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

}

.footer-bottom p{

    color:#888;

    font-size:15px;

}

.footer-links{

    display:flex;

    gap:30px;

}

.footer-links a{

    color:#888;

    font-size:15px;

    transition:.3s;

}

.footer-links a:hover{

    color:var(--color-primary);

}

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

@media(max-width:1100px){

.footer-grid{

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

}

}

@media(max-width:768px){

.footer{

text-align:center;

}

.footer-grid{

grid-template-columns:1fr;

gap:50px;

}

.footer-logo{

justify-content:center;

}

.footer-column p{

margin:auto;

}

.footer-social{

justify-content:center;

}

.footer-bottom{

flex-direction:column;

gap:20px;

}

.footer-links{

flex-wrap:wrap;

justify-content:center;

}

}

@media(max-width:480px){

.footer{

padding:80px 0 30px;

}

.footer-logo .logo-wordmark--footer,
.footer-logo span{

font-size:clamp(1.05rem, 4.8vw, 1.25rem);
line-height:1.3;

}

.footer-social a{

width:44px;

height:44px;

}

}

/* --- components/buttons.css --- */
/*======================================================
    BUTTONS
    Lux Digital Studio
    Versión 3.0
======================================================*/

/*==============================
BOTONES GENERALES
==============================*/

.btn-primary,
.btn-secondary{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    padding:14px 26px;
    border-radius:50px;
    font-size:.92rem;
    font-weight:600;
    letter-spacing:.2px;
    text-decoration:none;
    cursor:pointer;
    transition:all .3s ease;
}

.btn-primary{
    background:#ff4fa3;
    color:#ffffff;
    border:1px solid #ff4fa3;
    box-shadow:0 10px 28px rgba(255,79,163,.18);
}

.btn-primary:hover{
    background:#ff3d98;
    color:#ffffff;
    border-color:#ff3d98;
    transform:translateY(-2px);
    box-shadow:0 14px 34px rgba(255,79,163,.24);
}

.btn-secondary{
    background:transparent;
    color:#ffffff;
    border:1px solid rgba(255,255,255,.14);
}

.btn-secondary:hover{
    border-color:rgba(255,79,163,.35);
    color:#ff9fd0;
    transform:translateY(-2px);
}

/*==============================
BOTONES DE TARJETAS
==============================*/

.service-card a,
.blog-card a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:25px;

    color:#ff4fa3;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.service-card a i,
.blog-card a i{

    transition:.35s;

}

.service-card a:hover,
.blog-card a:hover{

    color:#ffffff;

}

.service-card a:hover i,
.blog-card a:hover i{

    transform:translateX(6px);

}

/*==============================
BOTÓN CONTACTO
==============================*/

.contact button,
.contact-form button[type="submit"]{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    width:100%;
    padding:18px 24px;
    border:none;
    border-radius:50px;
    background:linear-gradient(135deg,#ff4fa3 0%,#ff2e88 52%,#ff6bb5 100%);
    color:#ffffff;
    font-size:16px;
    font-weight:600;
    letter-spacing:.3px;
    cursor:pointer;
    transition:transform .35s ease, box-shadow .35s ease, filter .35s ease;
    box-shadow:
        0 12px 32px rgba(255,79,163,.32),
        0 0 18px rgba(255,79,163,.22);
}

.contact button:hover,
.contact-form button[type="submit"]:hover{
    transform:translateY(-3px);
    filter:brightness(1.06);
    box-shadow:
        0 18px 42px rgba(255,79,163,.42),
        0 0 24px rgba(255,79,163,.35);
}

.contact button:active,
.contact-form button[type="submit"]:active{
    transform:translateY(-1px);
}

.contact button i,
.contact-form button[type="submit"] i{
    transition:transform .35s ease;
}

.contact button:hover i,
.contact-form button[type="submit"]:hover i{
    transform:translateX(4px);
}

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

@media(max-width:768px){

.btn-primary,
.btn-secondary{

width:100%;

}

}

/* --- components/cards.css --- */
/*======================================================
    CARDS
    Lux Digital Studio
======================================================*/

.service-card,
.blog-card,
.portfolio-card,
.about-card{
    position:relative;
    border-radius:16px;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.08);
    transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
    overflow:hidden;
}

.service-card:hover,
.blog-card:hover,
.portfolio-card:hover,
.about-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,79,163,.22);
    box-shadow:0 16px 40px rgba(0,0,0,.18);
}

.service-card h3,
.blog-card h3,
.portfolio-card h3,
.about-card h3{
    margin:0 0 12px;
    font-size:1.35rem;
}

.service-card p,
.blog-card p,
.portfolio-card p,
.about-card p{
    color:var(--color-text-light);
    line-height:1.8;
}


/* --- components/forms.css --- */
/*======================================================
    FORMS — Lux Digital Studio Design System
    input · textarea · select · custom lux-select
======================================================*/

:root{
    --form-bg:#090909;
    --form-bg-dropdown:#0b0b0b;
    --form-text:#ffffff;
    --form-placeholder:#bdbdbd;
    --form-border:#ff4fa3;
    --form-border-muted:rgba(255,79,163,.38);
    --form-border-width:1.5px;
    --form-radius:14px;
    --form-glow:0 0 8px rgba(255,79,163,.18);
    --form-glow-focus:0 0 12px rgba(255,79,163,.45);
    --form-option-hover:rgba(255,79,163,.20);
    --form-option-selected:rgba(255,79,163,.32);
}

.form-group,
.contact-form{
    color-scheme:dark;
}

.form-group{
    display:grid;
    gap:8px;
    margin-bottom:20px;
}

.form-group label{
    font-size:14px;
    font-weight:600;
    color:var(--form-text);
    letter-spacing:.2px;
}

/* Shared field shell */
.form-group input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.form-group textarea,
.contact-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.contact-form textarea,
.lux-select__trigger{
    width:100%;
    padding:15px 18px;
    border:var(--form-border-width) solid var(--form-border-muted);
    border-radius:var(--form-radius);
    background:var(--form-bg);
    color:var(--form-text);
    font-family:var(--font-body);
    font-size:15px;
    line-height:1.45;
    box-shadow:var(--form-glow);
    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background-color var(--transition);
    -webkit-appearance:none;
    appearance:none;
}

.form-group input::placeholder,
.form-group textarea::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder{
    color:var(--form-placeholder);
    opacity:1;
}

.form-group input:hover,
.form-group textarea:hover,
.contact-form input:hover,
.contact-form textarea:hover,
.lux-select__trigger:hover{
    border-color:rgba(255,79,163,.62);
    box-shadow:0 0 10px rgba(255,79,163,.24);
}

.form-group input:focus,
.form-group textarea:focus,
.contact-form input:focus,
.contact-form textarea:focus,
.lux-select.is-open .lux-select__trigger,
.lux-select__trigger:focus-visible{
    outline:none;
    border-color:var(--form-border);
    box-shadow:var(--form-glow-focus);
}

.form-group input:focus-visible,
.form-group textarea:focus-visible,
.contact-form input:focus-visible,
.contact-form textarea:focus-visible{
    outline:none;
}

/* Native select — hidden when enhanced */
.form-group select,
.contact-form select{
    width:100%;
    padding:15px 18px;
    border:var(--form-border-width) solid var(--form-border-muted);
    border-radius:var(--form-radius);
    background:var(--form-bg);
    color:var(--form-text);
    font-family:var(--font-body);
    font-size:15px;
    cursor:pointer;
    -webkit-appearance:none;
    appearance:none;
}

.form-group select.lux-select__native,
.contact-form select.lux-select__native{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
    opacity:0;
    pointer-events:none;
}

/* Custom select */
.lux-select{
    position:relative;
    width:100%;
}

.lux-select__trigger{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    text-align:left;
    cursor:pointer;
    padding-right:46px;
}

.lux-select__value{
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.lux-select__value.is-placeholder{
    color:var(--form-placeholder);
}

.lux-select__arrow{
    position:absolute;
    right:18px;
    top:50%;
    width:14px;
    height:8px;
    transform:translateY(-50%);
    pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1.5L7 6.5L13 1.5' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-size:contain;
    transition:transform .25s ease;
}

.lux-select.is-open .lux-select__arrow{
    transform:translateY(-50%) rotate(180deg);
}

.lux-select__menu{
    position:absolute;
    z-index:40;
    top:calc(100% + 8px);
    left:0;
    right:0;
    margin:0;
    padding:6px;
    list-style:none;
    border:var(--form-border-width) solid rgba(255,79,163,.45);
    border-radius:var(--form-radius);
    background:var(--form-bg-dropdown);
    box-shadow:
        0 18px 40px rgba(0,0,0,.55),
        0 0 16px rgba(255,79,163,.22);
    max-height:240px;
    overflow:auto;
    overscroll-behavior:contain;
}

.lux-select__menu[hidden]{
    display:none;
}

.lux-select__option{
    padding:12px 14px;
    border-radius:10px;
    color:var(--form-text);
    font-size:15px;
    line-height:1.4;
    cursor:pointer;
    transition:background-color .2s ease, color .2s ease;
}

.lux-select__option:hover,
.lux-select__option.is-focused{
    background:var(--form-option-hover);
}

.lux-select__option.is-selected{
    background:var(--form-option-selected);
    color:var(--form-text);
}

.lux-select__option.is-disabled{
    opacity:.45;
    cursor:not-allowed;
}

.form-group textarea,
.contact-form textarea{
    resize:vertical;
    min-height:130px;
}

.form-alert{
    padding:14px 18px;
    border-radius:var(--form-radius);
    font-size:14px;
    font-weight:500;
    margin-bottom:20px;
    line-height:1.6;
}

.form-alert.success{
    background:rgba(46,204,113,.12);
    border:1px solid rgba(46,204,113,.30);
    color:#6ee7a0;
}

.form-alert.error{
    background:rgba(231,76,60,.12);
    border:1px solid rgba(231,76,60,.30);
    color:#f5a8a0;
}

.honeypot{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
}

@media(max-width:768px){
    .form-group input:not([type="hidden"]),
    .form-group textarea,
    .contact-form input:not([type="hidden"]),
    .contact-form textarea,
    .lux-select__trigger{
        font-size:16px;
    }
}


/* --- components/section-title.css --- */
/*======================================================
    SECTION TITLES
    Lux Digital Studio
======================================================*/

.section-header{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:720px;
    margin:0 auto clamp(40px, 5vw, 56px);
}

.section-tag{
    display:inline-block;
    padding:7px 14px;
    border-radius:50px;
    background:rgba(255,79,163,.06);
    border:1px solid rgba(255,79,163,.16);
    color:var(--color-primary);
    font-size:.68rem;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
}

.section-header h2{
    margin:18px 0 14px;
    color:var(--color-white);
    font-family:var(--font-title);
    font-size:clamp(1.85rem, 3.6vw, 2.75rem);
    line-height:1.15;
}

.section-header p{
    color:var(--color-text-light);
    font-size:1rem;
    line-height:1.75;
    max-width:640px;
    margin-inline:auto;
}

.section-cta{
    margin-top:36px;
    text-align:center;
}

.skip-link{
    position:absolute;
    top:-100px;
    left:16px;
    z-index:9999;
    padding:12px 20px;
    background:var(--color-primary);
    color:#fff;
    border-radius:var(--radius-sm);
    font-weight:600;
    transition:top .2s ease;
}

.skip-link:focus{
    top:16px;
    outline:2px solid #fff;
    outline-offset:2px;
}


/* --- services.css --- */
/*======================================================
    SERVICES
    Lux Digital Studio v4.0
======================================================*/

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

.services{

    position:relative;

    padding:140px 0;

    background:#0d0d0d;

    overflow:hidden;

}

/*=========================================
FONDO
=========================================*/

.services::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    top:-300px;

    left:-280px;

    background:radial-gradient(circle,
    rgba(255,79,163,.12),
    transparent 70%);

    filter:blur(90px);

}

.services::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    right:-180px;

    bottom:-200px;

    background:radial-gradient(circle,
    rgba(255,79,163,.08),
    transparent 70%);

    filter:blur(90px);

}

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

.section-header{

    position:relative;

    z-index:2;

    text-align:center;

    max-width:850px;

    margin:0 auto 90px;

}

.section-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(255,79,163,.08);

    border:1px solid rgba(255,79,163,.20);

    color:var(--color-primary);

    font-size:13px;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

}

.section-header h2{

    margin:30px 0;

    color:#fff;

    font-family:var(--font-title);

    font-size:clamp(42px,5vw,62px);

    line-height:1.15;

}

.section-header p{

    color:var(--color-text-light);

    font-size:18px;

    line-height:1.9;

}

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

.services-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

}

/*=========================================
CARD
=========================================*/

.service-card{

    position:relative;

    padding:40px;

    border-radius:28px;

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

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

    backdrop-filter:blur(20px);

    transition:.45s;

    overflow:hidden;

}

.service-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        130deg,
        transparent,
        rgba(255,79,163,.05),
        transparent
    );

    opacity:0;

    transition:.45s;

}

.service-card:hover{

    transform:translateY(-12px);

    border-color:rgba(255,79,163,.35);

    box-shadow:

    0 25px 60px rgba(0,0,0,.35),

    0 0 40px rgba(255,79,163,.15);

}

.service-card:hover::before{

    opacity:1;

}

/*=========================================
ICONO
=========================================*/

.service-icon{

    width:78px;

    height:78px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:22px;

    margin-bottom:30px;

    background:linear-gradient(
        145deg,
        #ff4fa3,
        #ff2e88
    );

    color:#fff;

    font-size:30px;

    box-shadow:

    0 15px 35px rgba(255,79,163,.35);

}

.service-card h3{

    color:#fff;

    font-size:26px;

    margin-bottom:18px;

}

.service-card p{

    color:var(--color-text-light);

    line-height:1.9;

    margin-bottom:30px;

}

/*=========================================
LINK
=========================================*/

.service-card a{

    display:inline-flex;

    align-items:center;

    gap:12px;

    color:var(--color-primary);

    font-weight:600;

    transition:.35s;

}

.service-card a i{

    transition:.35s;

}

.service-card a:hover{

    color:#fff;

}

.service-card a:hover i{

    transform:translateX(8px);

}

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

@media(max-width:992px){

.services{

padding:110px 0;

}

.services-grid{

gap:25px;

}

}

@media(max-width:768px){

.section-header{

margin-bottom:70px;

}

.section-header h2{

font-size:42px;

}

.service-card{

padding:32px;

}

}

@media(max-width:480px){

.section-header h2{

font-size:34px;

}

.section-header p{

font-size:16px;

}

.service-icon{

width:65px;

height:65px;

font-size:26px;

}

.service-card h3{

font-size:22px;

}

}

/* --- contact.css --- */
.contact{
    position:relative;
    padding:140px 0;
    background:#101010;
    overflow:hidden;
}

.contact::before{
    content:"";
    position:absolute;
    top:-260px;
    right:-220px;
    width:620px;
    height:620px;
    background:radial-gradient(circle, rgba(255,79,163,.12), transparent 70%);
    filter:blur(90px);
}

.contact-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:80px;
    align-items:start;
}

.contact-content h2{
    margin:30px 0;
    color:#ffffff;
    font-family:var(--font-title);
    font-size:clamp(42px,5vw,62px);
    line-height:1.15;
}

.contact-content p{
    max-width:620px;
    color:var(--color-text-light);
    font-size:18px;
    line-height:1.9;
}

.contact-info{
    display:grid;
    gap:18px;
    margin-top:40px;
}

.contact-info a{
    display:flex;
    align-items:center;
    gap:14px;
    color:#ffffff;
    font-weight:500;
}

.contact-info i,
.contact-info__icon{
    width:46px;
    height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:#ff4fa3;
    color:#ffffff;
}

.contact-form{
    padding:42px;
    border-radius:28px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.07);
    backdrop-filter:blur(20px);
    box-shadow:0 25px 70px rgba(0,0,0,.25);
}

.contact-form__fields{
    display:grid;
    gap:4px;
}

.contact-form__row--split{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
}

.form-group--service{
    margin-top:6px;
    margin-bottom:24px;
    padding:18px;
    border:1px solid rgba(255,79,163,.16);
    border-radius:18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(9,9,9,.45)),
        #090909;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.form-group__head{
    display:grid;
    gap:6px;
    margin-bottom:16px;
}

.form-group__head label{
    font-size:15px;
    font-weight:600;
    color:#ffffff;
    letter-spacing:.2px;
}

.form-group__hint{
    font-size:13px;
    line-height:1.5;
    color:rgba(255,255,255,.58);
}

.contact-service-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
}

.contact-service-card{
    position:relative;
    display:block;
    cursor:pointer;
}

.contact-service-card input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.contact-service-card__surface{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:52px;
    padding:12px 14px;
    border:1.5px solid rgba(255,255,255,.1);
    border-radius:12px;
    background:rgba(255,255,255,.02);
    color:#ffffff;
    transition:
        border-color .25s ease,
        background-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.contact-service-card__indicator{
    width:10px;
    height:10px;
    border-radius:50%;
    border:1.5px solid rgba(255,79,163,.55);
    background:transparent;
    flex-shrink:0;
    transition:
        border-color .25s ease,
        background-color .25s ease,
        box-shadow .25s ease;
}

.contact-service-card__title{
    font-size:14px;
    font-weight:500;
    line-height:1.35;
}

.contact-service-card:hover .contact-service-card__surface{
    border-color:rgba(255,79,163,.42);
    background:rgba(255,79,163,.06);
}

.contact-service-card input:focus-visible + .contact-service-card__surface{
    outline:2px solid rgba(255,79,163,.65);
    outline-offset:2px;
}

.contact-service-card input:checked + .contact-service-card__surface{
    border-color:#ff4fa3;
    background:rgba(255,79,163,.14);
    box-shadow:0 0 14px rgba(255,79,163,.22);
}

.contact-service-card input:checked + .contact-service-card__surface .contact-service-card__indicator{
    border-color:#ff4fa3;
    background:#ff4fa3;
    box-shadow:0 0 10px rgba(255,79,163,.55);
}

@media(max-width:992px){
    .contact-grid{
        grid-template-columns:1fr;
        gap:55px;
    }
}

@media(max-width:768px){
    .contact{
        padding:100px 0;
    }

    .contact-form{
        padding:30px;
    }

    .contact-form__row--split,
    .contact-service-grid{
        grid-template-columns:1fr;
    }

    .form-group--service{
        padding:16px;
    }
}


/* --- site-sections.css --- */
/*======================================================
    FAQ & TESTIMONIALS — Digital section heroes
======================================================*/

.faq-section,
.testimonials-section{
    position:relative;
    padding:clamp(5rem,10vw,7.5rem) 0;
    overflow:hidden;
}

.faq-section::before,
.testimonials-section::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(ellipse 55% 40% at 50% 0%, rgba(255,79,163,.14), transparent 68%),
        linear-gradient(180deg, rgba(255,79,163,.04), transparent 42%);
}

/* Digital hero header */
.section-hero{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:860px;
    margin:0 auto clamp(2.75rem,6vw,4.5rem);
    padding:clamp(2rem,5vw,3.25rem) clamp(1.25rem,4vw,2.5rem);
    border:1px solid rgba(255,79,163,.22);
    border-radius:28px;
    background:
        linear-gradient(145deg, rgba(255,79,163,.08), rgba(9,9,9,.92) 42%),
        #090909;
    box-shadow:
        0 24px 70px rgba(0,0,0,.45),
        0 0 28px rgba(255,79,163,.12),
        inset 0 1px 0 rgba(255,255,255,.06);
    overflow:hidden;
}

.section-hero__grid{
    position:absolute;
    inset:0;
    opacity:.35;
    background-image:
        linear-gradient(rgba(255,79,163,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,79,163,.12) 1px, transparent 1px);
    background-size:28px 28px;
    mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 78%);
    -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 78%);
    animation:section-grid-drift 18s linear infinite;
}

.section-hero__glow{
    position:absolute;
    width:320px;
    height:320px;
    border-radius:50%;
    filter:blur(70px);
    pointer-events:none;
    opacity:.55;
}

.section-hero__glow--left{
    left:-120px;
    top:-80px;
    background:rgba(255,79,163,.28);
}

.section-hero__glow--right{
    right:-100px;
    bottom:-120px;
    background:rgba(142,232,255,.14);
}

.section-hero__scan{
    position:absolute;
    left:0;
    right:0;
    height:2px;
    background:linear-gradient(90deg, transparent, rgba(255,79,163,.85), transparent);
    box-shadow:0 0 16px rgba(255,79,163,.55);
    animation:section-scan 4.5s ease-in-out infinite;
    pointer-events:none;
}

.section-hero__icon{
    position:relative;
    z-index:1;
    display:inline-grid;
    place-items:center;
    width:58px;
    height:58px;
    margin-bottom:1rem;
    border-radius:16px;
    border:1px solid rgba(255,79,163,.35);
    background:rgba(255,79,163,.12);
    color:#ff4fa3;
    font-size:1.5rem;
    box-shadow:0 0 20px rgba(255,79,163,.25);
}

.section-hero__tag{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.45rem 1rem;
    border-radius:999px;
    border:1px solid rgba(255,79,163,.35);
    background:rgba(9,9,9,.65);
    color:#ff4fa3;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:2.4px;
    text-transform:uppercase;
}

.section-hero__tag::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:#ff4fa3;
    box-shadow:0 0 10px rgba(255,79,163,.8);
    animation:section-pulse 2s ease-in-out infinite;
}

.section-hero__title{
    position:relative;
    z-index:1;
    margin:1.1rem 0 .85rem;
    font-family:var(--font-title);
    font-size:clamp(2rem,4.8vw,3.2rem);
    line-height:1.1;
    color:#ffffff;
    text-wrap:balance;
}

.section-hero__title span{
    display:block;
    background:linear-gradient(90deg,#ffffff 0%,#ff9fd0 48%,#ff4fa3 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.section-hero__desc{
    position:relative;
    z-index:1;
    max-width:620px;
    margin:0 auto;
    color:rgba(255,255,255,.78);
    font-size:1.02rem;
    line-height:1.75;
}

.section-hero__stats{
    position:relative;
    z-index:1;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:.75rem;
    margin-top:1.35rem;
}

.section-hero__stat{
    padding:.45rem .9rem;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.04);
    color:rgba(255,255,255,.82);
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.4px;
}

/* FAQ list */
.faq-list{
    position:relative;
    z-index:2;
    display:grid;
    gap:1rem;
    max-width:820px;
    margin:0 auto;
}

.faq-item{
    border:1px solid rgba(255,79,163,.18);
    border-radius:18px;
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(9,9,9,.65));
    padding:1rem 1.25rem;
    transition:border-color .3s ease, box-shadow .3s ease;
}

.faq-item[open]{
    border-color:rgba(255,79,163,.42);
    box-shadow:0 0 18px rgba(255,79,163,.14);
}

.faq-item summary{
    cursor:pointer;
    font-weight:600;
    list-style:none;
    color:#ffffff;
}

.faq-item summary::-webkit-details-marker{
    display:none;
}

.faq-item p{
    margin-top:.85rem;
    color:rgba(255,255,255,.78);
    line-height:1.7;
}

/* Testimonials */
.testimonials-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:1.25rem;
}

.testimonial-card{
    border:1px solid rgba(255,79,163,.16);
    border-radius:22px;
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(9,9,9,.55));
    padding:1.5rem;
    display:grid;
    gap:1rem;
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.testimonial-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,79,163,.38);
    box-shadow:0 16px 40px rgba(0,0,0,.35), 0 0 22px rgba(255,79,163,.12);
}

.testimonial-rating{
    color:#ff4fa3;
    letter-spacing:.08em;
    text-shadow:0 0 12px rgba(255,79,163,.35);
}

.testimonial-card blockquote p{
    font-size:1.02rem;
    line-height:1.7;
    color:rgba(255,255,255,.9);
}

.testimonial-card footer{
    display:flex;
    align-items:center;
    gap:.85rem;
}

.testimonial-card img,
.testimonial-avatar{
    width:44px;
    height:44px;
    border-radius:50%;
    object-fit:cover;
    background:rgba(255,79,163,.18);
    display:grid;
    place-items:center;
    font-weight:700;
    border:1px solid rgba(255,79,163,.3);
}

.testimonial-card small{
    display:block;
    color:rgba(255,255,255,.62);
}

@keyframes section-grid-drift{
    0%{ transform:translateY(0); }
    100%{ transform:translateY(28px); }
}

@keyframes section-scan{
    0%,100%{ top:12%; opacity:0; }
    12%{ opacity:1; }
    50%{ top:88%; opacity:1; }
    62%{ opacity:0; }
}

@keyframes section-pulse{
    0%,100%{ opacity:1; transform:scale(1); }
    50%{ opacity:.55; transform:scale(.85); }
}

@media(prefers-reduced-motion: reduce){
    .section-hero__grid,
    .section-hero__scan,
    .section-hero__tag::before{
        animation:none;
    }
}

@media(max-width:640px){
    .section-hero{
        border-radius:22px;
        padding:1.75rem 1.15rem;
    }

    .section-hero__stats{
        gap:.5rem;
    }
}


/* --- portfolio.css --- */
/*======================================================
    PORTFOLIO PREMIUM
    Lux Digital Studio — Centro de proyectos
======================================================*/

.portfolio-hub,
.portfolio-category-page,
.portfolio-detail{
    position:relative;
    overflow:hidden;
    background:#0B0B0F;
    color:#F5F3F7;
}

.portfolio-detail .portfolio-ambient__glow{
    opacity:.35;
    filter:blur(90px);
}

.portfolio-detail .portfolio-detail-hero,
.portfolio-detail .portfolio-detail-overview,
.portfolio-detail .portfolio-detail-branding,
.portfolio-detail .portfolio-detail-case,
.portfolio-detail .portfolio-detail-gallery{
    position:relative;
    z-index:1;
}

.portfolio-detail-meta div,
.portfolio-detail-overview__grid > div,
.portfolio-branding-panel,
.portfolio-case-block,
.portfolio-detail-cta{
    background:rgba(16,16,22,.98);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

.portfolio-detail-overview p,
.portfolio-detail-branding p,
.portfolio-case-block p,
.portfolio-detail-lead{
    color:rgba(245,243,247,.88);
}

.portfolio-detail-overview__grid > div{
    border-color:rgba(255,255,255,.1);
}

.portfolio-home{
    position:relative;
    background:linear-gradient(180deg, rgba(255,255,255,.012) 0%, transparent 100%);
}

.portfolio-home .section-header{
    text-align:center;
}

.portfolio-home .section-header p{
    margin-inline:auto;
}

.portfolio-hub,
.portfolio-category-page{
    padding:clamp(120px, 12vw, 148px) 0 clamp(88px, 8vw, 120px);
}

.portfolio-hub .reveal,
.portfolio-category-page .reveal,
.portfolio-detail .reveal{
    opacity:1;
    transform:none;
}

.portfolio-hub,
.portfolio-category-page,
.portfolio-detail{
    min-height:60vh;
}

.portfolio-hub > .container,
.portfolio-category-page > .container,
.portfolio-detail > .container{
    position:relative;
    z-index:1;
}

.portfolio-ambient{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.portfolio-ambient__glow{
    position:absolute;
    top:-10%;
    right:-8%;
    width:min(46vw, 480px);
    height:min(46vw, 480px);
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,79,163,.16) 0%, transparent 68%);
    filter:blur(70px);
}

.portfolio-ambient__grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:72px 72px;
    mask-image:radial-gradient(ellipse 70% 55% at 50% 20%, #000 15%, transparent 100%);
    opacity:.28;
}

/* ── Home header ── */

.portfolio-home__header,
.portfolio-header{
    max-width:760px;
    margin:0 auto clamp(48px, 6vw, 72px);
    text-align:center;
}

.portfolio-home__header h2,
.portfolio-header h1,
.portfolio-header h2,
.portfolio-section-head h2,
.portfolio-detail-hero h1{
    color:#fff;
    font-family:var(--font-title);
    letter-spacing:-.02em;
}

.portfolio-home__header h2{
    margin:18px 0 16px;
    font-size:clamp(2rem, 4.2vw, 3.2rem);
    line-height:1.08;
}

.portfolio-header h1,
.portfolio-detail-hero h1{
    margin:18px 0 16px;
    font-size:clamp(2.4rem, 5vw, 4rem);
    line-height:1.06;
}

.portfolio-home__header p,
.portfolio-header p,
.portfolio-section-head p,
.portfolio-detail-lead{
    color:rgba(232,230,234,.72);
    font-size:clamp(1rem, 1.4vw, 1.1rem);
    line-height:1.78;
}

.portfolio-back{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:28px;
    color:rgba(255,255,255,.72);
    text-decoration:none;
    transition:color .3s ease, transform .3s ease;
}

.portfolio-back:hover{
    color:#ffc4e3;
    transform:translateX(-3px);
}

/* ── Category portals ── */

.portfolio-home__portals{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:clamp(20px, 3vw, 32px);
    max-width:1120px;
    margin:0 auto;
}

.portfolio-home__portals--page{
    max-width:980px;
}

.portfolio-home .portfolio-portal{
    border:1px solid var(--pearl-border, rgba(255,255,255,.08));
    background:rgba(255,255,255,.025);
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    color:var(--pearl-ink, #f5f3f7);
}

.portfolio-home .portfolio-portal:hover{
    border-color:rgba(255,79,163,.22);
    box-shadow:0 16px 40px rgba(0,0,0,.18);
}

.portfolio-home .portfolio-portal h3,
.portfolio-home .portfolio-portal__tag{
    color:var(--pearl-ink, #fff);
}

.portfolio-home .portfolio-portal p,
.portfolio-home .portfolio-portal__stats span{
    color:var(--pearl-muted, rgba(232,230,234,.72));
}

.portfolio-home .portfolio-portal__stats strong{
    color:var(--pearl-ink, #fff);
}

.portfolio-home .portfolio-portal__cta{
    color:var(--pearl-pink, #ff4fa3);
}

.portfolio-home .portfolio-portal:hover .portfolio-portal__cta{
    color:var(--pearl-pink, #ffc4e3);
}

.portfolio-portal{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
    gap:clamp(20px, 3vw, 32px);
    align-items:stretch;
    min-height:clamp(280px, 28vw, 340px);
    padding:clamp(24px, 3vw, 36px);
    border-radius:28px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.025);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    text-decoration:none;
    color:inherit;
    overflow:hidden;
    transition:transform .4s cubic-bezier(.22,1,.36,1), border-color .4s ease, box-shadow .4s ease;
}

.portfolio-portal::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(255,79,163,.06) 0%, transparent 55%);
    opacity:0;
    transition:opacity .4s ease;
    pointer-events:none;
}

.portfolio-portal:hover{
    transform:translateY(-6px);
    border-color:rgba(255,79,163,.28);
    box-shadow:0 28px 64px rgba(0,0,0,.34), 0 0 0 1px rgba(255,79,163,.08);
}

.portfolio-portal:hover::before{
    opacity:1;
}

.portfolio-portal__visual{
    position:relative;
    display:grid;
    place-items:center;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.06);
    background:rgba(0,0,0,.22);
    overflow:hidden;
}

.portfolio-portal__glow{
    position:absolute;
    inset:20% 10%;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,79,163,.22) 0%, transparent 70%);
    filter:blur(24px);
}

.portfolio-portal__icon{
    position:relative;
    display:grid;
    place-items:center;
    width:clamp(72px, 8vw, 96px);
    height:clamp(72px, 8vw, 96px);
    border-radius:24px;
    background:rgba(255,79,163,.12);
    border:1px solid rgba(255,79,163,.24);
    color:#ff4fa3;
    font-size:clamp(1.8rem, 3vw, 2.4rem);
    box-shadow:0 0 40px rgba(255,79,163,.12);
}

.portfolio-portal__body{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:14px;
}

.portfolio-portal__tag{
    display:inline-flex;
    align-self:flex-start;
    padding:6px 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
    font-size:.68rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.55);
}

.portfolio-portal h3{
    margin:0;
    font-size:clamp(1.5rem, 2.6vw, 2rem);
    line-height:1.12;
    color:#fff;
}

.portfolio-portal p{
    margin:0;
    font-size:clamp(.92rem, 1.2vw, 1rem);
    line-height:1.72;
    color:rgba(232,230,234,.66);
    max-width:42ch;
}

.portfolio-portal__stats{
    display:flex;
    flex-wrap:wrap;
    gap:clamp(16px, 2vw, 28px);
    margin-top:4px;
}

.portfolio-portal__stats div{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.portfolio-portal__stats strong{
    font-size:clamp(1.4rem, 2.4vw, 1.8rem);
    color:#fff;
    line-height:1;
    font-weight:600;
}

.portfolio-portal__stats span{
    font-size:.72rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:rgba(255,255,255,.42);
}

.portfolio-portal__cta{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:auto;
    padding-top:8px;
    font-size:.88rem;
    font-weight:500;
    color:#ffc4e3;
    transition:gap .3s ease, color .3s ease;
}

.portfolio-portal:hover .portfolio-portal__cta{
    gap:12px;
    color:#fff;
}

/* ── Category sections ── */

.portfolio-section-head{
    max-width:720px;
    margin:0 0 clamp(28px, 4vw, 40px);
}

.portfolio-section-head h2{
    margin:0 0 10px;
    font-size:clamp(1.6rem, 3vw, 2.2rem);
    line-height:1.12;
}

.portfolio-group{
    margin-bottom:clamp(48px, 6vw, 72px);
}

.portfolio-empty{
    padding:28px;
    border-radius:18px;
    border:1px dashed rgba(255,255,255,.12);
    color:rgba(232,230,234,.62);
    background:rgba(255,255,255,.02);
}

/* ── Branding filter ── */

.portfolio-filter{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:0 0 clamp(32px, 4vw, 44px);
}

.portfolio-filter a{
    padding:10px 16px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
    color:rgba(255,255,255,.72);
    font-size:.82rem;
    text-decoration:none;
    transition:border-color .3s ease, color .3s ease, transform .3s ease, background .3s ease;
}

.portfolio-filter a:hover,
.portfolio-filter a.is-active{
    border-color:rgba(255,79,163,.3);
    background:rgba(255,79,163,.1);
    color:#ffc4e3;
    transform:translateY(-2px);
}

/* ── Project cards ── */

.portfolio-project-list{
    display:flex;
    flex-direction:column;
    gap:clamp(20px, 2.5vw, 28px);
}

.portfolio-project-list--compact{
    gap:clamp(16px, 2vw, 22px);
}

.portfolio-project{
    display:grid;
    grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr);
    gap:clamp(18px, 2.5vw, 28px);
    align-items:stretch;
    padding:clamp(16px, 2vw, 22px);
    border-radius:20px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(18,18,24,.94);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.portfolio-project:hover{
    transform:translateY(-4px);
    border-color:rgba(255,79,163,.22);
    box-shadow:0 22px 52px rgba(0,0,0,.28);
}

.portfolio-project--development{
    grid-template-columns:1fr;
}

.portfolio-project__media{
    position:relative;
    display:block;
    border-radius:16px;
    overflow:hidden;
    aspect-ratio:16/9;
    max-height:220px;
    background:#111116;
    border:1px solid rgba(255,255,255,.06);
}

.portfolio-project__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}

.portfolio-project:hover .portfolio-project__media img{
    transform:scale(1.03);
}

.portfolio-project__body{
    display:flex;
    flex-direction:column;
    gap:10px;
    justify-content:flex-start;
}

.portfolio-project__meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}

.portfolio-project__status{
    display:inline-flex;
    padding:6px 12px;
    border-radius:999px;
    font-size:.68rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    background:rgba(255,79,163,.12);
    border:1px solid rgba(255,79,163,.24);
    color:#ffc4e3;
}

.portfolio-project__status--dev{
    background:rgba(255,255,255,.04);
    border-color:rgba(255,255,255,.1);
    color:rgba(255,255,255,.78);
}

.portfolio-project__date{
    font-size:.78rem;
    color:rgba(255,255,255,.45);
    letter-spacing:.04em;
}

.portfolio-project__type{
    display:inline-flex;
    align-self:flex-start;
    padding:6px 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
    font-size:.68rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:rgba(255,255,255,.62);
}

.portfolio-project h3{
    margin:0;
    font-size:clamp(1.05rem, 1.8vw, 1.28rem);
    line-height:1.28;
}

.portfolio-project h3 a{
    color:#fff;
    text-decoration:none;
    transition:color .3s ease;
}

.portfolio-project h3 a:hover{
    color:#ffc4e3;
}

.portfolio-project__client,
.portfolio-project__description{
    margin:0;
    color:rgba(232,230,234,.72);
    font-size:.88rem;
    line-height:1.58;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.portfolio-project__chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.portfolio-project__chips span,
.portfolio-detail-chips span{
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
    font-size:.74rem;
    color:rgba(255,255,255,.78);
}

.portfolio-project__chips--muted span{
    color:rgba(255,255,255,.55);
    background:rgba(255,255,255,.02);
}

.portfolio-project__progress{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.portfolio-project__progress-bar{
    position:relative;
    height:6px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    overflow:hidden;
}

.portfolio-project__progress-bar::after{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:var(--progress, 0%);
    border-radius:inherit;
    background:linear-gradient(90deg, #ff4fa3, rgba(255,255,255,.55));
    box-shadow:0 0 12px rgba(255,79,163,.35);
    transition:width .6s ease;
}

.portfolio-project__progress span{
    font-size:.78rem;
    color:rgba(255,255,255,.5);
}

.portfolio-project__actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:6px;
}

.portfolio-project__actions .btn-primary,
.portfolio-project__actions .btn-secondary{
    min-height:42px;
    padding:10px 16px;
    font-size:.84rem;
}

.portfolio-project__external{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:rgba(255,255,255,.62);
    font-size:.82rem;
    text-decoration:none;
    transition:color .3s ease;
}

.portfolio-project__external:hover{
    color:#ffc4e3;
}

/* ── Related links ── */

.portfolio-related{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:clamp(40px, 5vw, 64px);
}

.portfolio-related a{
    padding:10px 16px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.1);
    color:rgba(255,255,255,.78);
    text-decoration:none;
    transition:border-color .3s ease, color .3s ease, transform .3s ease;
}

.portfolio-related a:hover{
    border-color:rgba(255,79,163,.3);
    color:#ffc4e3;
    transform:translateY(-2px);
}

/* ── Detail page ── */

.portfolio-cta,
.portfolio-detail-cta{
    margin-top:clamp(48px, 6vw, 72px);
    padding:clamp(32px, 4vw, 44px);
    border-radius:24px;
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(135deg, rgba(255,79,163,.08), rgba(255,255,255,.02));
    text-align:center;
}

.portfolio-cta span,
.portfolio-detail-cta span{
    display:block;
    margin-bottom:10px;
    font-size:.72rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(255,255,255,.45);
}

.portfolio-cta h2,
.portfolio-detail-cta h2{
    margin:0 0 22px;
    font-size:clamp(1.6rem, 3vw, 2.3rem);
    color:#fff;
}

.portfolio-detail-hero{
    padding:clamp(120px, 12vw, 148px) 0 48px;
}

.portfolio-detail-hero__grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, .95fr);
    gap:clamp(32px, 5vw, 56px);
    align-items:center;
}

.portfolio-detail-meta{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
    margin:24px 0;
}

.portfolio-detail-meta div{
    padding:14px 16px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
}

.portfolio-detail-meta span{
    display:block;
    margin-bottom:4px;
    font-size:.72rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.45);
}

.portfolio-detail-meta strong{
    color:#fff;
    font-size:.95rem;
}

.portfolio-detail-hero__actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.portfolio-detail-hero__visual{
    margin:0;
    border-radius:24px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    background:#111116;
    box-shadow:0 24px 60px rgba(0,0,0,.32);
}

.portfolio-detail-hero__visual img{
    display:block;
    width:100%;
    height:auto;
}

.portfolio-detail-overview,
.portfolio-detail-branding,
.portfolio-detail-case,
.portfolio-detail-gallery{
    padding:clamp(48px, 6vw, 72px) 0;
}

.portfolio-detail-overview__grid{
    display:grid;
    grid-template-columns:1.2fr repeat(3, minmax(0, 1fr));
    gap:20px;
}

.portfolio-detail-overview__grid > div{
    padding:22px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.025);
}

.portfolio-detail-overview h2,
.portfolio-detail-overview h3,
.portfolio-detail-branding h2,
.portfolio-detail-branding h3,
.portfolio-case-block h3{
    color:#fff;
    margin:0 0 12px;
}

.portfolio-detail-overview p,
.portfolio-detail-branding p,
.portfolio-case-block p{
    margin:0;
    color:rgba(232,230,234,.72);
    line-height:1.75;
}

.portfolio-detail-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.portfolio-branding-grid,
.portfolio-case-grid,
.portfolio-gallery-grid{
    display:grid;
    gap:18px;
}

.portfolio-branding-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    margin-top:24px;
}

.portfolio-branding-panel{
    padding:22px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.025);
}

.portfolio-color-swatches{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.portfolio-color-swatches span{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
    font-size:.78rem;
    color:rgba(255,255,255,.75);
}

.portfolio-color-swatches span::before{
    content:"";
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--swatch, #ff4fa3);
    box-shadow:0 0 0 1px rgba(255,255,255,.12);
}

.portfolio-case-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.portfolio-case-block{
    padding:24px;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.025);
}

.portfolio-gallery-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
}

.portfolio-gallery-item{
    margin:0;
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    background:#111116;
}

.portfolio-gallery-item img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ── Responsive ── */

@media(max-width:1100px){
    .portfolio-detail-overview__grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .portfolio-gallery-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media(max-width:900px){
    .portfolio-home__portals,
    .portfolio-portal,
    .portfolio-project,
    .portfolio-detail-hero__grid,
    .portfolio-branding-grid,
    .portfolio-case-grid{
        grid-template-columns:1fr;
    }

    .portfolio-portal{
        min-height:auto;
    }

    .portfolio-portal__visual{
        min-height:180px;
    }
}

@media(max-width:640px){
    .portfolio-gallery-grid,
    .portfolio-detail-overview__grid{
        grid-template-columns:1fr;
    }

    .portfolio-project__actions{
        flex-direction:column;
        align-items:stretch;
    }

    .portfolio-project__actions .btn-primary,
    .portfolio-project__actions .btn-secondary{
        width:100%;
        justify-content:center;
    }

    .portfolio-detail-meta{
        grid-template-columns:1fr;
    }

    .portfolio-filter{
        gap:8px;
    }

    .portfolio-filter a{
        font-size:.76rem;
        padding:8px 12px;
    }
}

@media(prefers-reduced-motion:reduce){
    .portfolio-portal,
    .portfolio-project,
    .portfolio-filter a,
    .portfolio-related a,
    .portfolio-back,
    .portfolio-project__media img{
        transition:none !important;
    }
}

/* ── Grid + filtros v2 ── */

.portfolio-project-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap:clamp(20px, 3vw, 28px);
    align-items:stretch;
}

.portfolio-project-grid .portfolio-project{
    display:flex;
    flex-direction:column;
    height:100%;
    min-height:100%;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(18,18,24,.96);
    padding:clamp(14px, 1.8vw, 18px);
    gap:14px;
}

.portfolio-project-grid .portfolio-project__media{
    max-height:200px;
    aspect-ratio:16/9;
}

.portfolio-project-grid .portfolio-project__actions{
    margin-top:auto;
    padding-top:4px;
}

.portfolio-project-grid .portfolio-project__actions .btn-primary,
.portfolio-project-grid .portfolio-project__actions .btn-secondary{
    padding:9px 14px;
    font-size:.82rem;
}

.portfolio-project-grid .portfolio-project__body{
    flex:1;
    display:flex;
    flex-direction:column;
}

.portfolio-project-grid .portfolio-project__description{
    flex:1;
}

.portfolio-filters{
    display:flex;
    flex-wrap:wrap;
    gap:16px 24px;
    justify-content:center;
    margin:0 0 clamp(32px, 4vw, 48px);
}

.portfolio-filter__label{
    display:inline-flex;
    align-items:center;
    font-size:.72rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.45);
    margin-right:8px;
}

.portfolio-project__media--cover img,
.portfolio-detail-hero__visual:not(.portfolio-project__media--contain) img{
    object-fit:cover;
}

.portfolio-project__media--contain,
.portfolio-detail-hero__visual.portfolio-project__media--contain{
    background:#111116;
}

.portfolio-project__media--contain img,
.portfolio-detail-hero__visual.portfolio-project__media--contain img{
    object-fit:contain;
    padding:18px;
}

.portfolio-project__status--soon{
    background:rgba(142,232,255,.12);
    color:#8ee8ff;
}

.portfolio-project__status--done{
    background:rgba(255,255,255,.08);
    color:#fff;
}

.portfolio-project__pending{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 16px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.72);
    font-size:.82rem;
    letter-spacing:.02em;
}

.portfolio-project__pending--detail{
    padding:12px 20px;
}


/* --- hero-premium.css --- */
/*======================================================
    HERO PREMIUM
    Lux Digital Studio
======================================================*/

.hero.hero-premium{
    --hero-bg:#0B0B0F;
    --hero-pink:#FF4FA3;
    --hero-pink-soft:rgba(255,79,163,.18);
    --hero-glass:rgba(255,255,255,.04);
    --hero-glass-border:rgba(255,255,255,.08);
    --hero-text:#F5F3F7;
    --hero-muted:rgba(232,230,234,.72);

    position:relative;
    min-height:clamp(640px, 92vh, 920px);
    display:flex;
    align-items:center;
    overflow:hidden;
    padding:clamp(128px, 14vh, 168px) 0 clamp(88px, 10vh, 128px);
    background:var(--hero-bg) !important;
    color:var(--hero-text);
}

.hero.hero-premium::before,
.hero.hero-premium::after,
.hero.hero-premium .hero-left::before,
.hero.hero-premium .hero-left::after{
    display:none !important;
    content:none !important;
}

/* --- Ambient --- */
.hero-ambient{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
}

.hero-ambient__glow{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    opacity:.55;
}

.hero-ambient__glow--primary{
    top:-18%;
    right:-8%;
    width:min(52vw, 520px);
    height:min(52vw, 520px);
    background:radial-gradient(circle, rgba(255,79,163,.22) 0%, transparent 68%);
    animation:heroGlowDrift 14s ease-in-out infinite alternate;
}

.hero-ambient__glow--secondary{
    bottom:-24%;
    left:-12%;
    width:min(44vw, 440px);
    height:min(44vw, 440px);
    background:radial-gradient(circle, rgba(255,79,163,.10) 0%, transparent 70%);
    animation:heroGlowDrift 18s ease-in-out infinite alternate-reverse;
}

.hero-ambient__grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:72px 72px;
    mask-image:radial-gradient(ellipse 70% 60% at 50% 42%, #000 20%, transparent 100%);
    opacity:.35;
}

.hero-ambient__beam{
    position:absolute;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,79,163,.55), rgba(255,255,255,.25), transparent);
    opacity:.45;
}

.hero-ambient__beam--one{
    top:28%;
    left:8%;
    width:34%;
    transform:rotate(-8deg);
    animation:heroBeamPulse 6s ease-in-out infinite;
}

.hero-ambient__beam--two{
    bottom:22%;
    right:10%;
    width:28%;
    transform:rotate(12deg);
    animation:heroBeamPulse 7s ease-in-out infinite reverse;
}

.hero-ambient__particles span{
    position:absolute;
    width:3px;
    height:3px;
    border-radius:50%;
    background:rgba(255,79,163,.65);
    box-shadow:0 0 12px rgba(255,79,163,.35);
    animation:heroParticleFloat 8s ease-in-out infinite;
}

.hero-ambient__particles span:nth-child(1){ top:18%; left:14%; animation-delay:0s; }
.hero-ambient__particles span:nth-child(2){ top:34%; left:72%; animation-delay:1.2s; opacity:.5; }
.hero-ambient__particles span:nth-child(3){ top:62%; left:22%; animation-delay:2.4s; }
.hero-ambient__particles span:nth-child(4){ top:78%; left:58%; animation-delay:.8s; opacity:.4; }
.hero-ambient__particles span:nth-child(5){ top:48%; left:88%; animation-delay:3s; }
.hero-ambient__particles span:nth-child(6){ top:12%; left:48%; animation-delay:1.8s; opacity:.35; }

/* --- Layout --- */
.hero.hero-premium .hero-container{
    position:relative;
    z-index:2;
    width:min(92%, 1240px);
    max-width:1240px;
    display:grid !important;
    grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr) !important;
    gap:clamp(48px, 6vw, 88px) !important;
    align-items:center;
    justify-content:stretch !important;
}

.hero.hero-premium .hero-left{
    max-width:680px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

/* --- Copy --- */
.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 16px 8px 12px;
    margin-bottom:clamp(24px, 3vw, 36px);
    border-radius:999px;
    border:1px solid rgba(255,79,163,.22);
    background:rgba(255,255,255,.03);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:2.2px;
    text-transform:uppercase;
    color:#f2a8cc;
    animation:heroFadeUp .8s ease both;
}

.hero-badge__pulse{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--hero-pink);
    box-shadow:0 0 0 0 rgba(255,79,163,.45);
    animation:heroBadgePulse 2.4s ease infinite;
}

.hero.hero-premium h1{
    max-width:none;
    margin:0 0 clamp(22px, 2.8vw, 32px);
    font-family:var(--font-title);
    font-size:clamp(2.6rem, 5.4vw, 4.6rem) !important;
    font-weight:600;
    line-height:1.04 !important;
    letter-spacing:-.03em;
    color:var(--hero-text) !important;
    text-shadow:none !important;
    animation:heroFadeUp .9s ease .08s both;
}

.hero.hero-premium h1::after{
    display:none !important;
}

.hero-gradient{
    background:linear-gradient(120deg, #ffffff 0%, #ffc4e3 48%, #ff4fa3 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.hero-lead{
    max-width:52ch;
    margin:0 0 clamp(36px, 4.5vw, 48px);
    font-size:clamp(1rem, 1.5vw, 1.12rem);
    line-height:1.78;
    color:var(--hero-muted) !important;
    animation:heroFadeUp .9s ease .16s both;
}

.hero-lead strong{
    color:#fff;
    font-weight:600;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin:0;
    animation:heroFadeUp .9s ease .24s both;
}

.hero.hero-premium .hero-cta{
    min-height:48px;
    padding:14px 26px;
    border-radius:999px;
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}

.hero.hero-premium .hero-cta.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(255,79,163,.28);
}

.hero.hero-premium .hero-cta.btn-secondary{
    border-color:rgba(255,255,255,.14);
    background:rgba(255,255,255,.02);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.hero.hero-premium .hero-cta.btn-secondary:hover{
    border-color:rgba(255,79,163,.4);
    color:#ffc4e3;
    transform:translateY(-3px);
}

/* --- Ecosystem hub --- */
.hero-stage{
    position:relative;
    display:flex !important;
    justify-content:center;
    align-items:center;
    min-height:420px;
    animation:heroFadeIn 1s ease .2s both;
}

.hero-stage__frame.hero-ecosystem{
    position:relative;
    width:min(100%, 460px);
    transform:translate3d(var(--hero-parallax-x, 0), calc(var(--hero-parallax-y, 0px) + var(--hero-scroll-y, 0px)), 0);
    transition:transform .45s ease;
    will-change:transform;
}

.hero-ecosystem__glow{
    position:absolute;
    top:12%;
    right:-4%;
    width:200px;
    height:200px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,79,163,.14) 0%, transparent 70%);
    filter:blur(28px);
    pointer-events:none;
    animation:heroEcoGlowDrift 10s ease-in-out infinite alternate;
}

.hero-ecosystem__panel{
    position:relative;
    padding:20px 18px 18px;
    border-radius:24px;
    border:1px solid var(--hero-glass-border);
    background:rgba(255,255,255,.03);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 16px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
}

.hero-ecosystem__panel-head{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
}

.hero-eco-live{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--hero-pink);
    box-shadow:0 0 12px rgba(255,79,163,.55);
    animation:heroEcoLive 2.4s ease infinite;
}

.hero-ecosystem__label{
    font-size:.68rem;
    letter-spacing:1.8px;
    text-transform:uppercase;
    color:rgba(255,255,255,.48);
}

.hero-ecosystem__radial{
    position:relative;
    width:100%;
    max-width:400px;
    margin:0 auto;
    aspect-ratio:1;
}

.hero-ecosystem__svg{
    width:100%;
    height:100%;
    display:block;
}

.hero-hub-line{
    opacity:0;
    transition:opacity .7s ease;
}

.hero-hub-line:nth-of-type(1){ transition-delay:.05s; }
.hero-hub-line:nth-of-type(2){ transition-delay:.12s; }
.hero-hub-line:nth-of-type(3){ transition-delay:.19s; }
.hero-hub-line:nth-of-type(4){ transition-delay:.26s; }
.hero-hub-line:nth-of-type(5){ transition-delay:.33s; }

.hero-hub-dot{
    opacity:0;
    transition:opacity .5s ease;
}

.hero-ecosystem__svg circle.hero-hub-dot:nth-of-type(3){ transition-delay:.45s; }
.hero-ecosystem__svg circle.hero-hub-dot:nth-of-type(4){ transition-delay:.55s; }
.hero-ecosystem__svg circle.hero-hub-dot:nth-of-type(5){ transition-delay:.65s; }
.hero-ecosystem__svg circle.hero-hub-dot:nth-of-type(6){ transition-delay:.75s; }
.hero-ecosystem__svg circle.hero-hub-dot:nth-of-type(7){ transition-delay:.85s; }
.hero-hub-ring{
    opacity:0;
    transition:opacity .5s ease .35s;
}

.hero-hub-pulse{
    fill:none;
    stroke-width:1;
    opacity:0;
    transform-origin:200px 200px;
}

.hero-ecosystem.is-active .hero-hub-line{ opacity:1; }
.hero-ecosystem.is-active .hero-hub-dot,
.hero-ecosystem.is-active .hero-hub-ring{ opacity:1; }
.hero-ecosystem.is-active .hero-hub-pulse{
    opacity:1;
    animation:heroEcoPulseRing 2.8s ease-out 1s infinite;
}

.hero-hub-core{
    position:absolute;
    top:50%;
    left:50%;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    width:min(42%, 150px);
    padding:14px 12px;
    border-radius:18px;
    border:1px solid rgba(255,79,163,.22);
    background:rgba(11,11,15,.72);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    text-align:center;
    transform:translate(-50%, -50%);
    box-shadow:0 0 28px rgba(255,79,163,.12);
}

.hero-hub-core__icon{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:10px;
    background:rgba(255,79,163,.14);
    color:#fff;
    font-size:.9rem;
}

.hero-hub-core strong{
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.04em;
    color:#fff;
    line-height:1.25;
}

.hero-hub-core small{
    font-size:.62rem;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:rgba(232,230,234,.5);
}

.hero-eco-node{
    --node-x:50%;
    --node-y:50%;
    position:absolute;
    left:var(--node-x);
    top:var(--node-y);
    z-index:3;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    width:min(34vw, 118px);
    padding:10px 8px;
    border-radius:14px;
    border:1px solid var(--hero-glass-border);
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    text-align:center;
    transform:translate(-50%, -50%);
    opacity:0;
    transition:opacity .5s ease, transform .5s ease, border-color .35s ease, box-shadow .35s ease;
}

.hero-ecosystem.is-active .hero-eco-node{
    opacity:1;
    animation:heroNodeFloat 5s ease-in-out infinite;
}

.hero-ecosystem.is-active .hero-eco-node:nth-child(3){ transition-delay:.2s; animation-delay:0s; }
.hero-ecosystem.is-active .hero-eco-node:nth-child(4){ transition-delay:.3s; animation-delay:.4s; }
.hero-ecosystem.is-active .hero-eco-node:nth-child(5){ transition-delay:.4s; animation-delay:.8s; }
.hero-ecosystem.is-active .hero-eco-node:nth-child(6){ transition-delay:.5s; animation-delay:1.2s; }
.hero-ecosystem.is-active .hero-eco-node:nth-child(7){ transition-delay:.6s; animation-delay:1.6s; }

.hero-eco-node:hover{
    border-color:rgba(255,79,163,.3);
    box-shadow:0 10px 24px rgba(0,0,0,.22), 0 0 0 1px rgba(255,79,163,.08);
}

.hero-eco-node__icon{
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    border-radius:9px;
    background:rgba(255,79,163,.12);
    color:#fff;
}

.hero-eco-node__icon .inline-icon,
.hero-hub-core__icon .inline-icon{
    display:block;
    color:#fff;
    filter:drop-shadow(0 0 6px rgba(255,79,163,.45));
}

.hero-eco-node__label{
    font-size:.64rem;
    font-weight:600;
    line-height:1.35;
    letter-spacing:.02em;
    color:rgba(255,255,255,.88);
}

/* --- Reveal overrides --- */
.hero.hero-premium .hero-left.reveal,
.hero.hero-premium .hero-stage.reveal{
    opacity:1;
    transform:none;
}

/* --- Animations --- */
@keyframes heroFadeUp{
    from{
        opacity:0;
        transform:translateY(22px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes heroFadeIn{
    from{ opacity:0; }
    to{ opacity:1; }
}

@keyframes heroGlowDrift{
    from{ transform:translate3d(0, 0, 0) scale(1); }
    to{ transform:translate3d(-24px, 18px, 0) scale(1.06); }
}

@keyframes heroBeamPulse{
    0%, 100%{ opacity:.25; }
    50%{ opacity:.65; }
}

@keyframes heroParticleFloat{
    0%, 100%{ transform:translate3d(0, 0, 0); opacity:.35; }
    50%{ transform:translate3d(0, -14px, 0); opacity:.9; }
}

@keyframes heroBadgePulse{
    0%{ box-shadow:0 0 0 0 rgba(255,79,163,.45); }
    70%{ box-shadow:0 0 0 10px rgba(255,79,163,0); }
    100%{ box-shadow:0 0 0 0 rgba(255,79,163,0); }
}

@keyframes heroEcoGlowDrift{
    from{ transform:translate3d(0, 0, 0); opacity:.55; }
    to{ transform:translate3d(-16px, 12px, 0); opacity:.85; }
}

@keyframes heroEcoLive{
    0%, 100%{ opacity:.65; transform:scale(1); }
    50%{ opacity:1; transform:scale(1.15); }
}

@keyframes heroEcoPulseRing{
    0%{ transform:scale(.7); opacity:.65; }
    70%{ transform:scale(1.45); opacity:0; }
    100%{ transform:scale(1.45); opacity:0; }
}

@keyframes heroNodeFloat{
    0%, 100%{ transform:translate(-50%, -50%) translateY(0); }
    50%{ transform:translate(-50%, -50%) translateY(-4px); }
}

/* --- Responsive --- */
@media(max-width:1100px){
    .hero.hero-premium .hero-container{
        grid-template-columns:minmax(0, 1fr) minmax(0, .85fr) !important;
        gap:40px !important;
    }

    .hero.hero-premium h1{
        max-width:none;
        font-size:clamp(2.4rem, 5vw, 3.8rem) !important;
    }
}

@media(max-width:900px){
    .hero.hero-premium{
        min-height:auto;
        padding:118px 0 72px;
    }

    .hero.hero-premium .hero-container{
        grid-template-columns:1fr !important;
        gap:48px !important;
    }

    .hero-stage{
        min-height:auto;
        max-width:520px;
        margin:0 auto;
    }

    .hero-ecosystem__radial{
        max-width:340px;
    }

    .hero-eco-node{
        width:min(38vw, 104px);
        padding:8px 6px;
    }

    .hero-eco-node__label{
        font-size:.58rem;
    }
}

@media(max-width:640px){
    .hero.hero-premium{
        padding:104px 0 64px;
    }

    .hero-badge{
        font-size:.66rem;
        letter-spacing:1.8px;
    }

    .hero.hero-premium h1{
        font-size:clamp(2.1rem, 9vw, 2.8rem) !important;
        line-height:1.08 !important;
    }

    .hero-lead{
        font-size:.98rem;
        line-height:1.72;
    }

    .hero-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .hero.hero-premium .hero-cta{
        width:100%;
        justify-content:center;
    }

    .hero-stage{
        min-height:auto;
    }

    .hero-stage__frame.hero-ecosystem{
        width:100%;
    }
}

@media(prefers-reduced-motion:reduce){
    .hero-ambient__glow,
    .hero-ambient__beam,
    .hero-ambient__particles span,
    .hero-badge__pulse,
    .hero-ecosystem__glow,
    .hero-eco-live,
    .hero-hub-pulse,
    .hero-badge,
    .hero.hero-premium h1,
    .hero-lead,
    .hero-actions,
    .hero-stage{
        animation:none !important;
    }

    .hero-eco-node,
    .hero-ecosystem.is-active .hero-eco-node{
        opacity:1 !important;
        transform:translate(-50%, -50%) !important;
        animation:none !important;
    }

    .hero-hub-line{
        opacity:1 !important;
    }

    .hero-hub-dot,
    .hero-hub-ring,
    .hero-hub-pulse{
        opacity:1 !important;
    }

    .hero-stage__frame,
    .hero-stage__frame.hero-ecosystem{
        transition:none !important;
    }
}

/* Pause hero ambient motion when hero is offscreen */
.hero-premium.is-paused .hero-ambient__glow,
.hero-premium.is-paused .hero-ambient__beam,
.hero-premium.is-paused .hero-ambient__particles span,
.hero-premium.is-paused .hero-badge__pulse,
.hero-premium.is-paused .hero-ecosystem__glow,
.hero-premium.is-paused .hero-eco-live,
.hero-premium.is-paused .hero-hub-pulse,
.hero-premium.is-paused .hero-ecosystem.is-active .hero-eco-node{
    animation-play-state:paused !important;
}


/* --- pearl-theme.css --- */
/* Premium clean layer — overrides heavy neon styling */
:root{
    --pearl-bg:#0a0a0c;
    --pearl-bg-soft:#101014;
    --pearl-panel:rgba(16,16,20,.72);
    --pearl-ink:#f7f5f8;
    --pearl-muted:#a8a3ad;
    --pearl-border:rgba(255,255,255,.09);
    --pearl-pink:#ff4fa3;
    --pearl-shadow:0 18px 48px rgba(0,0,0,.22);
}

html,
body{
    background:var(--pearl-bg) !important;
    color:var(--pearl-ink) !important;
}

body::before{
    display:none !important;
}

.header,
.header.scrolled{
    background:rgba(10,10,12,.72) !important;
    border-bottom:1px solid var(--pearl-border) !important;
    box-shadow:0 8px 30px rgba(0,0,0,.18) !important;
    backdrop-filter:blur(14px) saturate(120%) !important;
    -webkit-backdrop-filter:blur(14px) saturate(120%) !important;
}

.logo-text strong,
.footer-logo span,
.menu a,
.logo span{
    color:var(--pearl-ink) !important;
    text-shadow:none !important;
}

.hero,
.services,
.portfolio,
.cases,
.blog,
.contact,
.footer,
.legal,
.service-detail,
.blog-detail{
    background:transparent !important;
    color:var(--pearl-ink) !important;
}

.hero:not(.hero-premium){
    background:var(--pearl-bg) !important;
}

.hero h1,
.section-header h2,
.portfolio .section-header h2,
.contact-content h2,
.service-detail h1,
.service-detail h2,
.blog-detail-header h1,
.blog-detail h2,
.blog-content h3,
.blog-content h3 a,
.service-card h3,
.portfolio-card h3,
.footer h3,
.about-content h2{
    color:var(--pearl-ink) !important;
    text-shadow:none !important;
}

.hero-description,
.section-header p,
.service-card p,
.portfolio-card p,
.blog-content p,
.contact-content p,
.footer p,
.footer a,
.legal p,
.legal li,
.service-detail p,
.service-detail li,
.blog-detail p,
.blog-detail li{
    color:var(--pearl-muted) !important;
}

.hero-tag,
.section-tag,
.blog-category,
.form-kicker,
.case-category{
    background:rgba(255,255,255,.04) !important;
    border:1px solid rgba(255,79,163,.16) !important;
    color:#f2a8cc !important;
    box-shadow:none !important;
}

.btn-primary,
.nav-button,
.contact button,
button[type="submit"]{
    background:var(--pearl-pink) !important;
    color:#fff !important;
    border:1px solid transparent !important;
    box-shadow:0 10px 28px rgba(255,79,163,.18) !important;
}

.btn-primary:hover,
.nav-button:hover,
.contact button:hover,
button[type="submit"]:hover{
    box-shadow:0 14px 34px rgba(255,79,163,.24) !important;
}

.btn-secondary{
    background:transparent !important;
    border:1px solid rgba(255,255,255,.14) !important;
    box-shadow:none !important;
}

.service-card,
.portfolio-card,
.blog-card,
.about-card,
.case-card a,
.case-card-inner,
.contact-form,
.contact-info a,
.service-detail-card,
.blog-detail-card,
.legal-card{
    background:rgba(255,255,255,.025) !important;
    border:1px solid var(--pearl-border) !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}

.service-card:hover,
.portfolio-card:hover,
.blog-card:hover,
.about-card:hover,
.contact-info a:hover{
    border-color:rgba(255,79,163,.22) !important;
    box-shadow:0 16px 40px rgba(0,0,0,.18) !important;
}

.service-card a,
.portfolio-card a,
.blog-content a,
.contact-link,
.case-link{
    color:var(--pearl-pink) !important;
    text-shadow:none !important;
}

.form-group input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.form-group textarea,
.contact-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.contact-form textarea,
.lux-select__trigger{
    background:var(--form-bg,#090909) !important;
    border:var(--form-border-width,1.5px) solid var(--form-border-muted,rgba(255,79,163,.38)) !important;
    color:var(--form-text,#ffffff) !important;
    box-shadow:var(--form-glow,0 0 8px rgba(255,79,163,.18)) !important;
}

.form-group input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
.form-group textarea:focus,
.contact-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
.contact-form textarea:focus,
.lux-select.is-open .lux-select__trigger,
.lux-select__trigger:focus-visible{
    border-color:var(--form-border,#ff4fa3) !important;
    box-shadow:var(--form-glow-focus,0 0 12px rgba(255,79,163,.45)) !important;
}

.footer{
    border-top:1px solid var(--pearl-border) !important;
}

.footer-social a{
    background:rgba(255,255,255,.04) !important;
    border:1px solid var(--pearl-border) !important;
    box-shadow:none !important;
}

@media(max-width:992px){
    .navbar{
        background:rgba(10,10,12,.96) !important;
        border-left:1px solid var(--pearl-border) !important;
        box-shadow:-12px 0 40px rgba(0,0,0,.28) !important;
    }
}

/* Remove fake hero artwork when not using premium hero */
.hero:not(.hero-premium)::before,
.hero:not(.hero-premium)::after,
.hero:not(.hero-premium) .hero-left::after{
    display:none !important;
    content:none !important;
}

/* Portfolio pages keep dark styling; home section follows site theme */
.portfolio-hub,
.portfolio-category-page,
.portfolio-detail{
    background:#0B0B0F !important;
    color:#F5F3F7 !important;
}

.portfolio-header h1,
.portfolio-header h2,
.portfolio-section-head h2,
.portfolio-section-head h3,
.portfolio-detail-hero h1{
    color:#fff !important;
}

.portfolio-header p,
.portfolio-section-head p,
.portfolio-detail-lead{
    color:rgba(232,230,234,.72) !important;
}


/* --- enhancements.css --- */
/*======================================================
    ENHANCEMENTS
    Lux Digital Studio — UI polish layer
======================================================*/

:root{
    --color-accent:#8ee8ff;
    --color-muted:#89838f;
    --gradient-brand:linear-gradient(135deg, #ff4fa3 0%, #ff2e88 48%, #8ee8ff 100%);
    --gradient-text:linear-gradient(120deg, #ffffff 0%, #ff9fd0 45%, #8ee8ff 100%);
    --glass-bg:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    --section-padding:clamp(72px, 8vw, 108px);
}

/* --- Typography accents --- */
.text-gradient{
    background:var(--gradient-text);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

/* --- Header logo --- */
.logo{
    gap:0;
}

.logo-wordmark--footer{
    font-size:1.2rem;
}

/* --- Navigation --- */
.menu a{
    padding:6px 0;
}

.menu a.is-active{
    color:var(--color-primary);
}

.menu a.is-active::after{
    width:100%;
}

.nav-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(4px);
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
    z-index:998;
}

.nav-overlay.is-visible{
    opacity:1;
    visibility:visible;
}

body.menu-open{
    overflow:hidden;
}

@media(max-width:992px){
    .navbar{
        z-index:1001;
    }
}

/* --- Hero buttons --- */
.hero-buttons .btn-primary,
.hero-buttons .btn-secondary{
    min-width:190px;
}

/* --- Service cards as links --- */
a.service-card,
article.service-card,
.service-card{
    display:flex;
    flex-direction:column;
    height:100%;
    text-decoration:none;
    color:inherit;
    cursor:pointer;
}

.service-card:focus-visible{
    outline:2px solid rgba(142,232,255,.72);
    outline-offset:4px;
}

.service-badge{
    display:inline-block;
    width:fit-content;
    padding:6px 14px;
    margin-bottom:18px;
    border-radius:999px;
    background:rgba(255,79,163,.10);
    border:1px solid rgba(255,79,163,.22);
    color:var(--color-primary);
    font-size:.75rem;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.service-card .service-card-cta{
    margin-top:auto;
    padding-top:8px;
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:fit-content;
    color:var(--color-primary);
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.04em;
    pointer-events:none;
    transition:color .3s ease;
}

.service-card:hover .service-card-cta,
.service-card:focus-visible .service-card-cta{
    color:#fff;
}

.service-card .service-card-cta .inline-icon--service-cta svg{
    transition:transform .3s ease;
}

.service-card:hover .service-card-cta .inline-icon--service-cta svg,
.service-card:focus-visible .service-card-cta .inline-icon--service-cta svg{
    transform:translateX(5px);
}

/* --- About stats --- */
.about-stats{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
    margin-top:36px;
}

.stat-box{
    padding:22px 16px;
    border-radius:var(--radius-md);
    background:var(--glass-bg);
    border:1px solid var(--color-border);
    text-align:center;
    transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.stat-box:hover{
    transform:translateY(-3px);
    border-color:rgba(255,79,163,.22);
    box-shadow:0 12px 32px rgba(0,0,0,.16);
}

.stat-box h3{
    font-family:var(--font-title);
    font-size:2rem;
    color:var(--color-primary);
    margin-bottom:6px;
}

.stat-box span{
    color:var(--color-text-light);
    font-size:.85rem;
}

/* --- Contact form header --- */
.contact-form-header{
    margin-bottom:28px;
}

.form-kicker{
    display:inline-block;
    margin-bottom:12px;
    padding:6px 14px;
    border-radius:999px;
    background:rgba(255,79,163,.10);
    border:1px solid rgba(255,79,163,.20);
    color:var(--color-primary);
    font-size:.75rem;
    font-weight:700;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

.contact-form-header h3{
    margin:0 0 10px;
    font-family:var(--font-title);
    font-size:1.8rem;
}

.contact-form-header p{
    margin:0;
    color:var(--color-text-light);
    line-height:1.7;
}

.contact-info a{
    transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.contact-info a:hover{
    transform:translateY(-3px);
}

/* --- Blog featured card --- */
.blog-card-featured{
    border-color:rgba(255,79,163,.28);
    box-shadow:0 20px 50px rgba(255,79,163,.10);
}

.blog-featured-label{
    position:absolute;
    top:14px;
    right:14px;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(255,79,163,.90);
    color:#fff;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.blog-image{
    position:relative;
    display:block;
    overflow:hidden;
}

.blog-image img{
    width:100%;
    height:220px;
    object-fit:cover;
    transition:transform .5s ease;
}

.blog-card:hover .blog-image img{
    transform:scale(1.04);
}

.blog-category{
    position:absolute;
    left:14px;
    bottom:14px;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(8,8,8,.75);
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
    font-size:.75rem;
    font-weight:600;
}

/* --- Section CTA --- */
.section-cta .btn-secondary{
    gap:10px;
}

.section-cta .btn-secondary:hover i{
    transform:translateX(5px);
}

/* --- Footer --- */
.footer-social-placeholder a{
    color:var(--color-text-light);
    transition:color .3s ease;
}

.footer-social-placeholder a:hover{
    color:var(--color-primary);
}

/* --- Focus & selection polish --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline:2px solid var(--color-accent);
    outline-offset:3px;
}

/* --- Unified section spacing --- */
.about,
.services,
.portfolio,
.portfolio-home,
.cases,
.blog,
.contact{
    padding-block:var(--section-padding);
}

/* --- Service detail & legal polish --- */
.service-detail-back,
.blog-detail .service-detail-back{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:30px;
    color:var(--color-text-light);
    transition:color .3s ease, gap .3s ease;
}

.service-detail-back:hover{
    color:var(--color-primary);
    gap:12px;
}

@media(max-width:768px){
    .about-stats{
        grid-template-columns:1fr;
    }

    .logo-text small{
        display:none;
    }
}

@media(prefers-reduced-motion:reduce){
    .blog-card:hover .blog-image img,
    .stat-box:hover,
    .contact-info a:hover{
        transform:none;
    }

    .menu-toggle__bar{
        transition:none;
    }
}

/* --- Inline SVG icons (hero, captacion, portfolio) --- */
.inline-icon{
    display:block;
    flex-shrink:0;
}

.inline-icon--eco svg{
    width:18px;
    height:18px;
}

.inline-icon--hub svg{
    width:18px;
    height:18px;
}

.inline-icon--captation svg{
    width:38px;
    height:38px;
    color:#fff;
    filter:drop-shadow(0 0 10px rgba(255,79,163,.55));
}

.inline-icon--portal svg{
    width:clamp(1.6rem, 2.8vw, 2.1rem);
    height:clamp(1.6rem, 2.8vw, 2.1rem);
    color:#ff4fa3;
}

.inline-icon--portal-cta svg{
    width:14px;
    height:14px;
}

.inline-icon--cta svg{
    width:15px;
    height:15px;
}

.inline-icon--card-cta svg{
    width:14px;
    height:14px;
}

.inline-icon--close svg{
    width:18px;
    height:18px;
    color:#fff;
}

.portfolio-visual .inline-icon--captation{
    display:grid;
    place-items:center;
}

.portfolio-portal__cta{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.portfolio-portal__icon .inline-icon{
    display:grid;
    place-items:center;
}

/* --- Service, contact and social inline icons --- */
.service-icon .inline-icon--service{
    position:relative;
    z-index:1;
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
}

.service-icon .inline-icon--service svg,
.service-detail-icon .inline-icon--service svg,
.contact-info__icon .inline-icon--contact svg,
.portfolio-visual .inline-icon--captation svg,
.portfolio-portal__icon .inline-icon svg,
.contact-benefits .inline-icon--contact-benefit svg,
.footer-social .inline-icon--social svg{
    color:#fff;
    filter:drop-shadow(0 0 5px rgba(255,79,163,.65)) drop-shadow(0 0 12px rgba(142,232,255,.4));
}

.service-icon .inline-icon--service svg{
    width:22px;
    height:22px;
}

.service-card-cta{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.inline-icon--service-cta svg{
    width:14px;
    height:14px;
    filter:drop-shadow(0 0 4px rgba(255,79,163,.45));
}

.contact-info__icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.contact-info__icon .inline-icon--contact svg{
    width:17px;
    height:17px;
}

.footer-social .inline-icon--social{
    display:grid;
    place-items:center;
}

.footer-social .inline-icon--social svg{
    width:18px;
    height:18px;
}

.footer-social a:hover .inline-icon--social svg{
    color:#fff;
}

.footer-logo .logo-wordmark,
.footer-logo .logo-wordmark--footer,
.footer-logo span{
    max-width:none !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:unset !important;
    word-break:normal;
    line-height:1.25;
}

@media(max-width:480px){
    .footer-logo .logo-wordmark,
    .footer-logo .logo-wordmark--footer,
    .footer-logo span{
        font-size:clamp(1.05rem, 4.8vw, 1.25rem) !important;
        line-height:1.3;
    }
}

@media(max-width:768px){
    .service-icon .inline-icon--service svg{
        width:22px;
        height:22px;
    }

    .contact-info__icon .inline-icon--contact svg{
        width:16px;
        height:16px;
    }
}


/* --- premium-refine.css --- */
/*======================================================
    PREMIUM REFINE
    Limpio, ligero, legible y responsive
======================================================*/

:root{
    --color-background:#0a0a0c;
    --color-surface:#111114;
    --color-surface-light:#17171b;
    --color-text:#e8e6ea;
    --color-text-light:#a8a3ad;
    --color-border:rgba(255,255,255,.08);
    --section-padding:clamp(72px, 8vw, 108px);
    --content-width:min(1120px, 92vw);
    --radius-md:16px;
    --radius-lg:22px;
    --shadow-soft:0 14px 40px rgba(0,0,0,.18);
    --shadow-hover:0 18px 44px rgba(0,0,0,.22);
}

html{
    scroll-padding-top:84px;
}

body{
    background:var(--color-background);
    font-size:1rem;
    line-height:1.7;
    letter-spacing:.01em;
}

/* Quitar decoracion pesada de secciones */
.about::before,
.about::after,
.services::before,
.services::after,
.portfolio::before,
.portfolio::after,
.blog::before,
.blog::after,
.contact::before,
.contact::after,
.footer::before,
.footer::after,
.cases::before,
.cases::after{
    display:none !important;
    content:none !important;
}

section{
    padding:0 !important;
}

.about,
.services,
.portfolio,
.portfolio-home,
.cases,
.blog,
.contact,
.footer{
    padding-block:var(--section-padding) !important;
}

.about,
.cases,
.contact{
    background:rgba(255,255,255,.012);
}

.services,
.portfolio,
.blog{
    background:transparent;
}

.container,
.hero-container{
    width:var(--content-width);
}

/* --- Header --- */
.header-container{
    min-height:76px;
}

.logo-mark{
    display:none !important;
}

.logo-text strong{
    font-size:1.05rem;
    letter-spacing:.2px;
}

.menu{
    gap:28px;
}

.menu a{
    font-size:.92rem;
    font-weight:500;
    color:rgba(255,255,255,.82);
}

.menu a:hover,
.menu a.is-active{
    color:var(--color-primary);
}

.nav-button{
    padding:12px 22px;
    font-size:.9rem;
}

@media(max-width:992px){
    .navbar{
        top:0;
        width:min(100%, 360px);
        padding:0;
        box-shadow:-16px 0 48px rgba(0,0,0,.24);
    }
}

/* --- Typography --- */
h1,h2,h3,h4,h5,h6{
    font-weight:600;
    letter-spacing:-.01em;
}

strong{
    color:#fff;
    font-weight:600;
}

.text-gradient{
    background:linear-gradient(120deg, #ffffff 0%, #ffc4e3 55%, #b8efff 100%);
    -webkit-background-clip:text;
    background-clip:text;
}

.section-header{
    max-width:720px;
    margin-bottom:clamp(40px, 5vw, 56px);
}

.section-tag,
.hero-tag,
.form-kicker{
    padding:7px 14px;
    font-size:.68rem;
    letter-spacing:2px;
}

.section-header h2,
.about-content h2{
    margin:18px 0 14px;
    font-size:clamp(1.85rem, 3.6vw, 2.75rem);
    line-height:1.15;
}

.section-header p,
.about-content p{
    font-size:1rem;
    line-height:1.75;
    max-width:640px;
    margin-inline:auto;
}

.hero-premium h1{
    font-size:clamp(2.6rem, 5.4vw, 4.6rem) !important;
    line-height:1.04 !important;
    text-shadow:none !important;
}

.hero-lead{
    font-size:clamp(1rem, 1.5vw, 1.12rem) !important;
    line-height:1.78 !important;
    max-width:52ch;
}

.hero-actions,
.hero-buttons{
    gap:14px;
}

.hero-actions .btn-primary,
.hero-actions .btn-secondary,
.hero-buttons .btn-primary,
.hero-buttons .btn-secondary{
    min-width:0;
    padding:14px 26px;
    font-size:.92rem;
}

/* --- Cards & grids --- */
.service-card,
.blog-card,
.portfolio-card,
.about-card,
.case-card a,
.case-card-inner{
    border-radius:var(--radius-md);
    transform:none;
}

.service-card:hover,
.blog-card:hover,
.portfolio-card:hover,
.about-card:hover,
.case-card a:hover,
.case-card:hover .case-card-inner{
    transform:translateY(-4px);
}

.services-grid,
.blog-grid,
.portfolio-grid,
.cases-grid,
.about-cards{
    gap:clamp(16px, 2vw, 22px);
}

.service-card h3,
.portfolio-card h3,
.blog-card h3,
.about-card h3,
.case-body h3{
    font-size:1.15rem;
}

.service-card p,
.portfolio-card p,
.blog-card p,
.about-card p,
.case-body p{
    font-size:.94rem;
    line-height:1.65;
}

.service-badge,
.case-category{
    font-size:.68rem;
    letter-spacing:1px;
    padding:5px 10px;
}

.about-stats{
    gap:12px;
    margin-top:28px;
}

.stat-box{
    padding:18px 14px;
    border-radius:14px;
}

.stat-box h3{
    font-size:1.6rem;
}

.stat-box span{
    font-size:.8rem;
}

/* --- Buttons --- */
.btn-primary,
.btn-secondary,
.contact button{
    padding:14px 26px;
    font-size:.92rem;
    border-radius:999px;
    transform:none;
}

.btn-primary:hover,
.btn-secondary:hover,
.contact button:hover{
    transform:translateY(-2px);
}

/* --- Contact --- */
.contact-grid{
    gap:clamp(28px, 4vw, 48px);
    align-items:start;
}

.contact-content h2{
    font-size:clamp(1.8rem, 3.2vw, 2.4rem);
    line-height:1.18;
}

.contact-benefits li{
    font-size:.95rem;
}

.contact-form{
    padding:clamp(24px, 3vw, 32px);
    border-radius:var(--radius-lg);
}

.contact-form-header h3{
    font-size:1.45rem;
}

.contact-info a{
    padding:16px 18px;
    border-radius:14px;
}

/* --- Footer --- */
.footer{
    padding:clamp(64px, 8vw, 88px) 0 28px !important;
}

.footer-grid{
    gap:clamp(32px, 5vw, 56px);
    margin-bottom:48px;
}

.footer-column h3{
    font-size:1rem;
    margin-bottom:18px;
}

.footer-column p,
.footer-column a,
.footer-bottom p,
.footer-links a{
    font-size:.9rem;
}

.footer-logo span{
    font-size:1.35rem;
}

.footer-social a{
    width:42px;
    height:42px;
    font-size:18px;
}

.footer-social a:hover{
    transform:translateY(-3px);
}

/* --- Motion: mas suave --- */
.reveal{
    transform:translateY(16px);
    filter:none;
}

.hero-left.reveal{
    transform:translateY(16px);
}

/* --- Tablet --- */
@media(max-width:1100px){
    .about-grid{
        gap:40px;
    }
}

@media(max-width:768px){
    :root{
        --section-padding:clamp(56px, 10vw, 72px);
    }

    .header-container{
        min-height:68px;
    }

    .menu a.is-active{
        padding-left:0;
        border-left:none;
    }

    .section-header{
        text-align:left;
        margin-bottom:32px;
    }

    .section-header p{
        margin-inline:0;
    }

    .hero-premium .hero-container{
        text-align:left;
    }

    .hero-premium .hero-actions{
        justify-content:flex-start;
    }

    .cases-actions,
    .section-cta{
        flex-direction:column;
        align-items:stretch;
    }

    .cases-actions .btn-primary,
    .cases-actions .btn-secondary,
    .section-cta .btn-secondary{
        width:100%;
        justify-content:center;
    }

    .footer{
        text-align:left;
    }

    .footer-logo,
    .footer-social{
        justify-content:flex-start;
    }

    .footer-bottom{
        align-items:flex-start;
    }
}

@media(max-width:480px){
    .menu{
        gap:18px;
    }

    .logo-text strong{
        font-size:.98rem;
    }

    .hero-premium h1{
        font-size:2rem !important;
    }

    .cases-grid{
        gap:14px;
    }
}

/* --- Performance: defer offscreen sections --- */
.portfolio-home,
.portfolio,
.services,
.contact{
    content-visibility:auto;
    contain-intrinsic-size:auto 520px;
}

@media(prefers-reduced-motion:reduce){
    .reveal,
    .hero-left.reveal,
    .hero-stage.reveal{
        transform:none;
        filter:none;
    }
}

/* --- Mobile nav panel (wins cascade) --- */
@media (max-width:992px){
    .navbar .menu.mobile-menu__links{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        flex-wrap:nowrap !important;
        gap:0 !important;
        width:100% !important;
        max-width:100% !important;
        white-space:normal !important;
    }

    .navbar .menu.mobile-menu__links li{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
    }

    .navbar .menu.mobile-menu__links a{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box;
    }
}


/* --- nav-mobile.css --- */
/* Mobile navigation panel — loaded with APP_VERSION cache bust */
@media (max-width:992px){
    .navbar .menu.mobile-menu__links{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        flex-wrap:nowrap !important;
        gap:0 !important;
        width:100% !important;
        max-width:100% !important;
        white-space:normal !important;
    }

    .navbar .menu.mobile-menu__links li{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
    }

    .navbar .menu.mobile-menu__links a{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box;
    }
}


/* --- polish.css --- */
:root{
    --color-background:#070708;
    --color-surface:#101013;
    --color-surface-light:#17171b;
    --color-primary:#ff4fa3;
    --color-primary-dark:#d9347d;
    --color-accent:#8ee8ff;
    --color-text:#f4f1f5;
    --color-text-light:#b9b4bd;
    --color-muted:#89838f;
    --color-border:rgba(255,255,255,.105);
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:8px;
    --shadow-soft:0 18px 50px rgba(0,0,0,.34);
    --shadow-primary:0 18px 55px rgba(255,79,163,.20);
    --transition:.22s ease;
}

html{
    scroll-padding-top:96px;
}

body{
    background:
        linear-gradient(180deg, #070708 0%, #0b0b0d 42%, #070708 100%);
    text-rendering:optimizeLegibility;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    background:
        linear-gradient(115deg, rgba(255,79,163,.06), transparent 28%),
        linear-gradient(245deg, rgba(142,232,255,.04), transparent 32%);
}

::selection{
    background:rgba(255,79,163,.35);
    color:#fff;
}

.reveal{
    opacity:0;
    transform:translateY(28px);
    filter:blur(8px);
    transition:
        opacity .75s ease,
        transform .75s ease,
        filter .75s ease;
    transition-delay:var(--reveal-delay, 0ms);
    will-change:opacity, transform, filter;
}

.reveal.is-visible{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
}

.hero-left.reveal{
    transform:translateX(-24px);
}

.hero-card.reveal{
    transform:translateY(24px) scale(.97);
}

.hero-left.reveal.is-visible,
.hero-card.reveal.is-visible{
    transform:none;
}

@media(prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }

    .reveal{
        opacity:1;
        transform:none;
        filter:none;
    }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline:2px solid var(--color-accent);
    outline-offset:4px;
}

.container,
.hero-container,
.legal-wrap{
    width:min(92%,1240px);
}

.header{
    background:linear-gradient(180deg, rgba(7,7,8,.84), rgba(7,7,8,0));
}

.header.scrolled{
    background:rgba(8,8,10,.82);
    border-bottom:1px solid var(--color-border);
    box-shadow:0 16px 42px rgba(0,0,0,.28);
}

.header-container{
    min-height:82px;
}

.logo img,
.footer-logo img{
    filter:drop-shadow(0 8px 18px rgba(255,79,163,.18));
}

.logo span,
.footer-logo span{
    letter-spacing:.2px;
}

.menu{
    gap:30px;
}

.menu a{
    color:rgba(255,255,255,.82);
    font-size:14px;
}

.menu a:hover{
    color:#ffffff;
}

.menu a::after{
    bottom:-10px;
    height:1px;
    background:linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

.btn-primary,
.btn-secondary,
.contact button{
    min-height:52px;
    border-radius:12px;
    padding:15px 28px;
    letter-spacing:0;
}

.btn-primary,
.contact button{
    border:1px solid rgba(255,255,255,.10);
    background:
        linear-gradient(135deg, rgba(255,255,255,.18), transparent 30%),
        linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    box-shadow:0 14px 34px rgba(255,79,163,.24);
}

.btn-primary:hover,
.contact button:hover{
    background:
        linear-gradient(135deg, rgba(255,255,255,.20), transparent 30%),
        linear-gradient(135deg, #ff6ab3, #cf2c75);
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 20px 42px rgba(255,79,163,.30);
}

.section-tag,
.hero-tag{
    border-radius:999px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.10);
    color:#ffd8eb;
    letter-spacing:2.6px;
}

.hero,
.about,
.services,
.blog,
.contact,
.legal-page{
    background:
        linear-gradient(180deg, rgba(255,255,255,.022), transparent 34%),
        linear-gradient(135deg, rgba(255,79,163,.035), transparent 34%),
        #09090b;
}

.hero{
    min-height:92vh;
}

.hero::before,
.hero::after,
.about::before,
.about::after,
.services::before,
.services::after,
.blog::before,
.blog::after,
.contact::before,
.footer::before,
.footer::after,
.hero-glow{
    display:none;
}

.hero{
    isolation:isolate;
    background:
        linear-gradient(115deg, rgba(255,79,163,.13), transparent 32%),
        linear-gradient(245deg, rgba(142,232,255,.10), transparent 36%),
        radial-gradient(circle at 72% 48%, rgba(255,79,163,.10), transparent 30%),
        #070708;
}

.hero::before,
.hero::after{
    display:block;
    content:"";
    position:absolute;
    pointer-events:none;
}

.hero::before{
    inset:88px 7% auto auto;
    width:420px;
    height:420px;
    border:1px solid rgba(255,79,163,.20);
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,79,163,.20), transparent 62%);
    filter:blur(26px);
    opacity:.9;
}

.hero::after{
    inset:auto auto 8% 8%;
    width:360px;
    height:2px;
    background:linear-gradient(90deg, transparent, rgba(255,79,163,.9), rgba(142,232,255,.7), transparent);
    box-shadow:0 0 28px rgba(255,79,163,.75);
    opacity:.75;
}

.hero-left{
    position:relative;
}

.hero-left::before{
    content:"";
    position:absolute;
    left:-18px;
    top:106px;
    width:3px;
    height:142px;
    border-radius:999px;
    background:linear-gradient(180deg, var(--color-primary), var(--color-accent), transparent);
    box-shadow:0 0 22px rgba(255,79,163,.75);
}

.hero .hero-tag{
    box-shadow:0 0 24px rgba(255,79,163,.22);
}

.hero h1{
    text-shadow:
        0 0 22px rgba(255,79,163,.16),
        0 0 42px rgba(142,232,255,.08);
}

.hero h1::after{
    content:"";
    display:block;
    width:min(320px,70%);
    height:1px;
    margin-top:22px;
    background:linear-gradient(90deg, var(--color-primary), rgba(142,232,255,.85), transparent);
    box-shadow:0 0 22px rgba(255,79,163,.7);
}

.hero-description strong{
    color:#ffffff;
    text-shadow:0 0 18px rgba(255,79,163,.20);
}

.hero-glow{
    display:block;
    width:460px;
    height:460px;
    background:
        radial-gradient(circle, rgba(255,79,163,.36), rgba(255,79,163,.12) 42%, transparent 68%);
    filter:blur(52px);
    opacity:.9;
}

.hero h1,
.section-header h2,
.about-content h2,
.contact-content h2,
.legal-header h1{
    letter-spacing:0;
}

.hero h1{
    max-width:790px;
    font-size:clamp(48px,5.7vw,78px);
}

.hero-description,
.section-header p,
.about-content p,
.contact-content p,
.legal-header p,
.legal-content p,
.legal-content li{
    color:var(--color-text-light);
}

.hero-description{
    font-size:18px;
    line-height:1.85;
}

.hero-card,
.service-card,
.about-card,
.stat-box,
.blog-card,
.contact-form,
.legal-block{
    border-radius:var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
    border:1px solid var(--color-border);
    box-shadow:var(--shadow-soft);
}

.hero-card{
    width:min(100%,500px);
    animation:none;
    overflow:visible;
    border-color:rgba(255,255,255,.16);
    background:
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.025)),
        linear-gradient(135deg, rgba(255,79,163,.14), rgba(142,232,255,.055)),
        #101014;
    box-shadow:
        0 28px 90px rgba(0,0,0,.56),
        0 0 42px rgba(255,79,163,.33),
        0 0 78px rgba(142,232,255,.13);
}

.hero-card::before,
.hero-card::after{
    content:"";
    position:absolute;
    pointer-events:none;
}

.hero-card::before{
    inset:-1px;
    z-index:-1;
    border-radius:inherit;
    background:linear-gradient(135deg, rgba(255,79,163,.8), rgba(142,232,255,.52), rgba(255,255,255,.08));
    filter:blur(12px);
    opacity:.42;
}

.hero-card::after{
    inset:14px;
    border:1px solid rgba(255,255,255,.055);
    box-shadow:inset 0 0 44px rgba(255,79,163,.08);
}

.hero-card:hover,
.service-card:hover,
.about-card:hover,
.stat-box:hover,
.blog-card:hover{
    transform:translateY(-6px);
    border-color:rgba(255,255,255,.20);
    box-shadow:0 24px 60px rgba(0,0,0,.38), 0 0 0 1px rgba(255,79,163,.08);
}

.hero-card-header{
    padding:18px 22px;
    background:rgba(0,0,0,.18);
    backdrop-filter:blur(18px);
}

.hero-window-title{
    margin-left:auto;
    color:rgba(255,255,255,.58);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1.4px;
}

.hero-card-body{
    position:relative;
    display:grid;
    gap:18px;
    padding:34px;
    overflow:hidden;
}

.hero-line:last-child{
    margin-bottom:0;
}

.hero-line{
    height:10px;
    background:linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.055));
}

.hero-orbit{
    width:118px;
    height:118px;
    display:grid;
    place-items:center;
    margin:6px auto 2px;
    border-radius:50%;
    color:#ffffff;
    font-size:38px;
    background:
        radial-gradient(circle, rgba(255,79,163,.35), rgba(255,79,163,.08) 45%, transparent 66%),
        conic-gradient(from 120deg, rgba(255,79,163,.15), rgba(142,232,255,.9), rgba(255,79,163,.85), rgba(255,79,163,.15));
    box-shadow:
        0 0 34px rgba(255,79,163,.52),
        0 0 54px rgba(142,232,255,.18);
}

.hero-orbit i{
    width:76px;
    height:76px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#0b0b0d;
    box-shadow:inset 0 0 28px rgba(255,79,163,.24);
}

.hero-panel{
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
    background:rgba(255,255,255,.045);
}

.hero-panel-main{
    padding:20px;
}

.hero-panel-main span{
    display:block;
    margin-bottom:8px;
    color:#ffb8dc;
    font-size:13px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1.6px;
}

.hero-panel-main strong{
    color:#ffffff;
    font-size:24px;
    line-height:1.2;
}

.hero-metrics{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.hero-metrics div{
    display:grid;
    gap:8px;
    justify-items:center;
    padding:16px 10px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:12px;
    background:rgba(0,0,0,.20);
}

.hero-metrics i{
    color:var(--color-accent);
    font-size:24px;
    text-shadow:0 0 18px rgba(142,232,255,.55);
}

.hero-metrics span{
    color:rgba(255,255,255,.72);
    font-size:12px;
}

.hero-progress{
    height:12px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.07);
}

.hero-progress span{
    display:block;
    width:74%;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg, var(--color-primary), var(--color-accent));
    box-shadow:0 0 22px rgba(255,79,163,.65);
}

.hero-card-footer{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.hero-card-footer span{
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:999px;
    color:#ddd8e2;
    background:rgba(255,255,255,.045);
    font-size:12px;
}

.hero-stat,
.stat-box{
    border-radius:var(--radius-md);
    background:rgba(255,255,255,.04);
}

.services-grid{
    grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
    gap:24px;
}

.services{
    isolation:isolate;
}

.services::before{
    display:block;
    content:"";
    position:absolute;
    right:6%;
    top:16%;
    width:360px;
    height:360px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,79,163,.18), transparent 65%);
    filter:blur(40px);
    opacity:.72;
}

.services-showcase{
    position:relative;
    z-index:2;
    display:grid;
    gap:24px;
}

.service-card,
.about-card{
    padding:32px;
}

.service-card{
    display:flex;
    flex-direction:column;
    min-height:100%;
}

.service-card::after{
    content:"";
    position:absolute;
    left:24px;
    right:24px;
    bottom:0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,79,163,.75), rgba(142,232,255,.55), transparent);
    opacity:0;
    transition:var(--transition);
}

.service-card:hover::after{
    opacity:1;
}

.service-card-featured{
    position:relative;
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    column-gap:28px;
    row-gap:18px;
    min-height:auto;
    padding:38px;
    overflow:hidden;
    border-color:rgba(255,79,163,.32);
    background:
        linear-gradient(135deg, rgba(255,79,163,.16), rgba(142,232,255,.065)),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
        #101014;
    box-shadow:
        0 26px 78px rgba(0,0,0,.42),
        0 0 46px rgba(255,79,163,.20);
}

.service-card-featured::before{
    content:"";
    position:absolute;
    inset:auto -12% -45% auto;
    width:310px;
    height:310px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,79,163,.28), transparent 66%);
    filter:blur(18px);
}

.service-card-featured .service-badge,
.service-card-featured h3,
.service-card-featured p,
.service-card-featured .service-points,
.service-card-featured a{
    grid-column:2;
}

.service-card-featured .service-icon{
    grid-row:1 / span 5;
    width:96px;
    height:96px;
    margin:0;
    font-size:42px;
    box-shadow:
        0 0 32px rgba(255,79,163,.48),
        0 0 54px rgba(142,232,255,.18);
}

.service-badge{
    width:max-content;
    padding:7px 11px;
    margin-bottom:18px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:999px;
    color:#ffd8eb;
    background:rgba(255,255,255,.045);
    font-size:11px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.service-card-featured .service-badge{
    margin-bottom:0;
}

.service-points{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:2px 0 4px;
}

.service-points li{
    padding:8px 12px;
    border-radius:999px;
    color:rgba(255,255,255,.78);
    background:rgba(0,0,0,.22);
    border:1px solid rgba(255,255,255,.09);
    font-size:13px;
}

.service-icon,
.about-icon,
.contact-info i,
.contact-info__icon{
    width:58px;
    height:58px;
    border-radius:10px;
    background:linear-gradient(135deg, rgba(255,79,163,.95), rgba(142,232,255,.78));
    box-shadow:0 16px 32px rgba(255,79,163,.18);
}

.service-card h3,
.about-card h3,
.blog-content h3,
.legal-block h2{
    line-height:1.22;
}

.service-card p,
.about-card p,
.blog-content p{
    line-height:1.75;
}

.service-card p{
    flex:1;
}

.service-card a,
.blog-content a{
    margin-top:auto;
    color:#ffc1de;
}

.service-card a:hover,
.blog-content a:hover{
    color:var(--color-accent);
}

.blog-grid{
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:26px;
}

.blog{
    isolation:isolate;
    background:
        linear-gradient(120deg, rgba(142,232,255,.07), transparent 32%),
        linear-gradient(260deg, rgba(255,79,163,.08), transparent 34%),
        #08080a;
}

.blog::before{
    display:block;
    content:"";
    position:absolute;
    right:10%;
    top:18%;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(142,232,255,.12), transparent 65%);
    filter:blur(42px);
    opacity:.8;
}

.blog-card{
    display:flex;
    flex-direction:column;
    position:relative;
    overflow:hidden;
}

.blog-card::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,79,163,.8), rgba(142,232,255,.55), transparent);
    opacity:0;
    transition:var(--transition);
}

.blog-card:hover::after{
    opacity:1;
}

.blog-card-featured{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    min-height:390px;
    border-color:rgba(255,79,163,.24);
    box-shadow:
        0 28px 80px rgba(0,0,0,.42),
        0 0 38px rgba(255,79,163,.14);
}

.blog-image{
    height:220px;
}

.blog-card-featured .blog-image{
    height:100%;
    min-height:390px;
}

.blog-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.50)),
        linear-gradient(120deg, rgba(255,79,163,.20), transparent 45%);
    pointer-events:none;
}

.blog-card:hover .blog-image img{
    transform:scale(1.05);
}

.blog-category{
    top:16px;
    left:16px;
    border-radius:999px;
    background:rgba(7,7,8,.72);
    border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(10px);
    z-index:2;
    color:#ffffff;
    text-transform:uppercase;
    letter-spacing:1.1px;
}

.blog-content{
    padding:28px;
    display:flex;
    flex-direction:column;
}

.blog-card-featured .blog-content{
    justify-content:center;
    padding:42px;
}

.blog-featured-label{
    position:absolute;
    right:16px;
    top:16px;
    z-index:2;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,79,163,.86);
    color:#ffffff;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1.2px;
    box-shadow:0 0 22px rgba(255,79,163,.32);
}

.blog-meta{
    color:var(--color-muted);
    flex-wrap:wrap;
}

.blog-meta i{
    color:var(--color-accent);
    text-shadow:0 0 14px rgba(142,232,255,.4);
}

.blog-card-featured .blog-content h3{
    font-size:34px;
}

.blog-content a{
    width:max-content;
    padding-top:4px;
    border-bottom:1px solid rgba(255,79,163,.55);
}

.blog-content a:hover{
    border-color:var(--color-accent);
}

.contact-grid{
    gap:60px;
}

.contact{
    isolation:isolate;
    background:
        linear-gradient(120deg, rgba(255,79,163,.10), transparent 34%),
        linear-gradient(250deg, rgba(142,232,255,.08), transparent 36%),
        #08080a;
}

.contact::before{
    display:block;
    content:"";
    position:absolute;
    left:8%;
    bottom:8%;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,79,163,.18), transparent 64%);
    filter:blur(46px);
    opacity:.85;
}

.contact-content{
    position:relative;
}

.contact-content::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-34px;
    width:260px;
    height:1px;
    background:linear-gradient(90deg, rgba(255,79,163,.95), rgba(142,232,255,.72), transparent);
    box-shadow:0 0 24px rgba(255,79,163,.65);
}

.contact-benefits{
    display:grid;
    gap:14px;
    margin-top:34px;
}

.contact-benefits li{
    display:flex;
    align-items:center;
    gap:12px;
    color:rgba(255,255,255,.82);
    font-size:15px;
}

.contact-benefits i,
.contact-benefits .inline-icon--contact-benefit svg{
    color:var(--color-accent);
    text-shadow:0 0 18px rgba(142,232,255,.48);
}

.contact-info{
    grid-template-columns:1fr;
    gap:14px;
    margin-top:36px;
}

.contact-info a{
    padding:16px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
    background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
    box-shadow:0 16px 36px rgba(0,0,0,.24);
}

.contact-info a:hover{
    border-color:rgba(255,79,163,.35);
    box-shadow:0 18px 44px rgba(255,79,163,.12);
}

.contact-info span{
    display:grid;
    gap:4px;
}

.contact-info small{
    color:var(--color-muted);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1.2px;
}

.contact-form{
    position:relative;
    padding:34px;
    overflow:hidden;
    border-color:rgba(255,79,163,.24);
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
        linear-gradient(135deg, rgba(255,79,163,.10), rgba(142,232,255,.045)),
        #101014;
    box-shadow:
        0 26px 80px rgba(0,0,0,.44),
        0 0 42px rgba(255,79,163,.18);
}

.contact-form::before{
    content:"";
    position:absolute;
    inset:0;
    border-top:1px solid rgba(255,255,255,.18);
    pointer-events:none;
}

.contact-form::after{
    content:"";
    position:absolute;
    right:-90px;
    top:-110px;
    width:260px;
    height:260px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,79,163,.22), transparent 66%);
    filter:blur(20px);
    pointer-events:none;
}

.contact-form-header{
    position:relative;
    z-index:1;
    margin-bottom:26px;
    padding-bottom:22px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.form-kicker{
    display:inline-flex;
    margin-bottom:12px;
    padding:7px 11px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:999px;
    color:#ffd8eb;
    background:rgba(255,255,255,.045);
    font-size:11px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.contact-form-header h3{
    color:#ffffff;
    font-size:30px;
    line-height:1.15;
}

.contact-form-header p{
    margin-top:10px;
    color:var(--color-text-light);
    line-height:1.7;
}

.contact-form .form-group,
.contact-form .form-alert,
.contact-form button{
    position:relative;
    z-index:1;
}

.form-group input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea{
    border-radius:var(--form-radius,14px);
}

.footer{
    background:#070708;
}

.footer-grid{
    gap:44px;
}

.footer-social a{
    border-radius:12px;
}

.footer-column a:hover{
    padding-left:0;
}

@media(max-width:992px){
    .nav-button,
    .header-cta{
        display:none;
    }

    .hero-container,
    .about-grid,
    .contact-grid{
        gap:56px;
    }
}

@media(max-width:992px){
    .navbar{
        background:rgba(10,10,12,.96);
        backdrop-filter:blur(18px);
    }
}

@media(max-width:768px){
    .hero,
    .about,
    .services,
    .blog,
    .contact,
    .legal-page{
        padding:100px 0 76px;
    }

    .hero-container,
    .about-content,
    .section-header,
    .contact-content{
        text-align:left;
    }

    .hero-buttons{
        justify-content:flex-start;
    }

    .hero h1{
        font-size:42px;
    }

    .section-header h2,
    .about-content h2,
    .contact-content h2{
        font-size:36px;
    }

    .about-stats,
    .hero-stats{
        grid-template-columns:1fr;
    }

    .footer{
        text-align:left;
    }

    .footer-logo,
    .footer-social,
    .footer-links{
        justify-content:flex-start;
    }

    .footer-column p{
        margin:0;
    }

    .footer-bottom{
        align-items:flex-start;
    }
}

@media(max-width:480px){
    .btn-primary,
    .btn-secondary,
    .contact button{
        width:100%;
    }

    .service-card,
    .about-card,
    .contact-form,
    .legal-block{
        padding:24px;
    }

    .blog-image{
        height:190px;
    }
}

@media(min-width:641px) and (max-width:900px){
    .hero{
        min-height:auto;
        padding:118px 0 72px;
    }

    .hero-container{
        display:grid;
        grid-template-columns:1fr;
        gap:34px;
    }

    .hero h1{
        max-width:720px;
        margin:20px 0 16px;
        font-size:46px;
        line-height:1.05;
    }

    .hero-description{
        max-width:720px;
        font-size:16px;
        line-height:1.72;
        margin-bottom:26px;
    }

    .hero-right{
        justify-content:flex-start;
    }

    .hero-card{
        max-width:620px;
        width:100%;
    }

    .hero-card-body{
        grid-template-columns:150px 1fr;
        align-items:center;
    }

    .hero-orbit{
        grid-row:1 / span 3;
        width:120px;
        height:120px;
        margin:0;
    }

    .hero-panel-main{
        padding:18px;
    }

    .hero-panel-main strong{
        font-size:22px;
    }

    .hero-stats{
        grid-template-columns:repeat(3,1fr);
    }

    .services,
    .about,
    .blog,
    .contact{
        padding:82px 0;
    }

    .section-header{
        margin:0 0 38px;
        max-width:720px;
        text-align:left;
    }

    .section-header h2,
    .about-content h2,
    .contact-content h2{
        margin:18px 0 12px;
        font-size:34px;
        line-height:1.08;
    }

    .section-header p,
    .about-content p,
    .contact-content p{
        font-size:15px;
        line-height:1.7;
    }

    .services-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:18px;
    }

    .service-card-featured{
        grid-template-columns:1fr;
        padding:28px;
    }

    .service-card-featured .service-badge,
    .service-card-featured h3,
    .service-card-featured p,
    .service-card-featured .service-points,
    .service-card-featured a{
        grid-column:auto;
    }

    .service-card-featured .service-icon{
        grid-row:auto;
        width:70px;
        height:70px;
        font-size:30px;
    }

    .service-card{
        display:flex;
        flex-direction:column;
        min-height:270px;
        padding:24px;
    }

    .service-card p{
        margin-bottom:18px;
        font-size:14px;
    }

    .service-icon,
    .about-icon{
        width:48px;
        height:48px;
        margin-bottom:18px;
        font-size:22px;
    }

    .about-grid{
        grid-template-columns:1fr;
        gap:34px;
    }

    .about-stats{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:14px;
        margin-top:28px;
    }

    .about-cards{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:18px;
    }

    .about-card,
    .stat-box{
        padding:22px;
    }

    .blog-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .blog-card,
    .blog-card-featured{
        display:grid;
        grid-template-columns:260px 1fr;
        align-items:stretch;
        min-height:auto;
    }

    .blog-image,
    .blog-card-featured .blog-image{
        height:100%;
        min-height:210px;
    }

    .blog-content,
    .blog-card-featured .blog-content{
        padding:24px;
    }

    .blog-content h3,
    .blog-card-featured .blog-content h3{
        font-size:22px;
    }

    .contact-grid{
        grid-template-columns:1fr;
        gap:34px;
    }

    .contact-benefits{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:10px;
    }

    .contact-benefits li{
        align-items:flex-start;
        padding:14px;
        border:1px solid rgba(255,255,255,.09);
        border-radius:12px;
        background:rgba(255,255,255,.035);
        font-size:13px;
    }

    .contact-info{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .contact-form{
        width:100%;
        padding:28px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea{
        min-height:50px;
        display:block;
    }

    .footer{
        padding-top:70px;
    }

    .footer-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:34px;
    }
}

@media(max-width:640px){
    .header-container{
        min-height:72px;
    }

    .hero{
        min-height:auto;
        padding:106px 0 62px;
    }

    .hero-container{
        gap:28px;
    }

    .hero h1{
        margin:18px 0 14px;
        font-size:36px;
    }

    .hero-description{
        font-size:15px;
        line-height:1.65;
        margin-bottom:24px;
    }

    .hero-card{
        display:block;
        width:100%;
    }

    .hero-card-header{
        padding:14px 16px;
    }

    .hero-card-body{
        padding:22px;
        gap:14px;
    }

    .hero-orbit{
        width:86px;
        height:86px;
    }

    .hero-orbit i{
        width:56px;
        height:56px;
        font-size:28px;
    }

    .hero-panel-main strong{
        font-size:19px;
    }

    .hero-metrics{
        grid-template-columns:1fr;
    }

    .hero-metrics div{
        grid-template-columns:auto 1fr;
        justify-items:start;
        align-items:center;
        padding:12px 14px;
    }

    .services,
    .about,
    .blog,
    .contact{
        padding:72px 0;
    }

    .services-grid,
    .about-cards,
    .blog-grid{
        gap:16px;
    }

    .blog-card,
    .blog-card-featured{
        display:flex;
        flex-direction:column;
    }

    .blog-card-featured .blog-image{
        min-height:220px;
    }

    .blog-card-featured .blog-content{
        padding:24px;
    }

    .blog-card-featured .blog-content h3{
        font-size:24px;
    }

    .service-card-featured{
        grid-template-columns:1fr;
        padding:24px;
    }

    .service-card-featured .service-badge,
    .service-card-featured h3,
    .service-card-featured p,
    .service-card-featured .service-points,
    .service-card-featured a{
        grid-column:auto;
    }

    .service-card-featured .service-icon{
        grid-row:auto;
        width:64px;
        height:64px;
        font-size:28px;
    }

    .service-points{
        display:grid;
        grid-template-columns:1fr;
    }

    .contact-benefits,
    .contact-info{
        grid-template-columns:1fr;
    }

    .contact-form-header h3{
        font-size:24px;
    }

    .service-card,
    .about-card,
    .blog-card,
    .contact-form{
        box-shadow:0 12px 30px rgba(0,0,0,.24);
    }

    .blog-image{
        height:210px;
    }
}

/* Generated hero image on the right */
.hero-container{
    grid-template-columns:minmax(0, 760px) minmax(360px, 1fr);
    align-items:center;
    gap:44px;
}

.hero-visual{
    position:relative;
    justify-self:end;
    width:min(48vw, 680px);
    aspect-ratio:1672 / 941;
    border-radius:18px;
    overflow:hidden;
    opacity:.92;
    filter:drop-shadow(0 0 26px rgba(255,79,163,.30));
}

.hero-visual::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
        radial-gradient(circle at 58% 46%, transparent 0 38%, rgba(5,5,7,.18) 62%, rgba(5,5,7,.70) 100%),
        linear-gradient(90deg, rgba(5,5,7,.54), transparent 36%, rgba(5,5,7,.18));
}

.hero-visual img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.03);
}

.hero-visual::after{
    content:"";
    position:absolute;
    inset:10%;
    border:1px solid rgba(255,79,163,.14);
    border-radius:18px;
    box-shadow:
        0 0 34px rgba(255,79,163,.22),
        inset 0 0 30px rgba(142,232,255,.08);
    pointer-events:none;
}

@media(max-width:1100px){
    .hero-container{
        grid-template-columns:minmax(0, 1fr) minmax(300px, 440px);
        gap:28px;
    }

    .hero-visual{
        width:min(42vw, 440px);
    }
}

@media(max-width:820px){
    .hero-container{
        grid-template-columns:1fr;
    }

    .hero-visual{
        justify-self:start;
        width:min(100%, 520px);
        margin-top:4px;
        opacity:.78;
    }
}

@media(max-width:640px){
    .hero-visual{
        display:none;
    }
}

/* Final readability scale: larger lower sections, no hero image */
.hero-visual,
.hero-visual::before,
.hero-visual::after{
    display:none !important;
}

.hero{
    min-height:620px;
    padding:118px 0 82px;
    background:
        radial-gradient(circle at 22% 24%, rgba(255,79,163,.13), transparent 30%),
        radial-gradient(circle at 78% 28%, rgba(142,232,255,.06), transparent 28%),
        linear-gradient(180deg, #050506 0%, #09090b 100%);
}

.hero-container{
    width:min(92%, 1240px);
    max-width:1240px;
    display:grid;
    grid-template-columns:minmax(0, 780px);
    justify-content:start;
    gap:0;
}

.hero-left{
    max-width:780px;
}

.hero h1{
    max-width:780px;
    font-size:clamp(40px, 4.9vw, 66px);
    line-height:1.03;
}

.hero-description{
    max-width:700px;
    font-size:15px;
    line-height:1.72;
}

.services,
.about,
.blog,
.contact{
    padding:88px 0 !important;
}

.section-header,
.services .section-header{
    max-width:780px;
    margin:0 auto 48px;
}

.section-tag,
.services .section-tag{
    padding:8px 16px;
    font-size:10px;
    letter-spacing:1.8px;
}

.section-header h2,
.services .section-header h2,
.about-content h2,
.contact-content h2{
    font-size:clamp(32px, 3.6vw, 48px);
    line-height:1.08;
}

.section-header p,
.services .section-header p,
.about-content p,
.contact-content p{
    font-size:15px;
    line-height:1.72;
}

.services-showcase{
    max-width:1180px;
    margin:0 auto;
    gap:20px;
}

.services-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:20px !important;
}

.service-card,
.service-card-featured,
.about-card,
.blog-card,
.contact-form{
    border-radius:12px;
    padding:26px !important;
}

.service-card-featured{
    padding:30px !important;
    gap:18px 22px;
}

.service-icon,
.about-icon,
.contact-info i,
.contact-info__icon{
    width:50px !important;
    height:50px !important;
    min-width:50px;
    font-size:23px !important;
}

.service-card h3,
.about-card h3,
.blog-content h3{
    font-size:21px !important;
    line-height:1.2;
}

.service-card p,
.about-card p,
.blog-content p{
    font-size:14px !important;
    line-height:1.66 !important;
}

.service-card a,
.blog-content a{
    font-size:13px !important;
}

.service-badge,
.blog-category,
.blog-featured-label{
    font-size:10px !important;
}

.service-points li{
    padding:10px 12px;
    font-size:12px !important;
}

.about-grid{
    max-width:1180px;
    margin:0 auto;
    grid-template-columns:minmax(0, 470px) minmax(0, 560px);
    gap:56px;
}

.about-cards{
    gap:18px;
}

.blog-grid{
    max-width:1180px;
    margin:0 auto;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:22px;
}

.blog-image,
.blog-card-featured .blog-image{
    height:210px;
    min-height:210px;
}

.blog-content,
.blog-card-featured .blog-content{
    padding:24px !important;
}

.contact-grid{
    max-width:1120px;
    grid-template-columns:minmax(0, 430px) minmax(0, 520px);
    gap:64px;
}

.contact-content,
.contact-content h2,
.contact-content p{
    max-width:430px;
}

.contact-form{
    max-width:520px;
}

.form-group input,
.form-group select{
    height:46px;
    font-size:13px;
}

.form-group textarea{
    min-height:118px;
    font-size:13px;
}

@media(max-width:900px){
    .services-grid,
    .blog-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }

    .about-grid,
    .contact-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:640px){
    .hero{
        min-height:auto;
        padding:98px 0 60px;
    }

    .hero h1{
        font-size:34px;
    }

    .services,
    .about,
    .blog,
    .contact{
        padding:64px 0 !important;
    }

    .services-grid,
    .blog-grid{
        grid-template-columns:1fr !important;
    }
}

/* Blog links and article detail */
.blog-content h3 a{
    color:#fff !important;
    font-size:inherit !important;
    line-height:inherit !important;
    text-decoration:none;
    text-shadow:
        0 0 14px rgba(255, 110, 190, .45),
        0 0 34px rgba(244, 74, 165, .22);
}

.blog-image{
    display:block;
}

.blog-detail{
    padding:150px 0 90px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,79,163,.16), transparent 30%),
        linear-gradient(180deg, #050506 0%, #0a0b0e 50%, #050506 100%);
}

.blog-detail-header{
    max-width:920px;
    margin:0 auto 34px;
    text-align:center;
}

.blog-detail-header h1{
    margin:20px 0;
    color:#fff;
    font-family:"Cormorant Garamond", serif;
    font-size:clamp(42px, 5vw, 72px);
    line-height:1;
    text-shadow:
        0 0 14px rgba(255, 110, 190, .45),
        0 0 34px rgba(244, 74, 165, .22);
}

.blog-detail-header .blog-meta{
    justify-content:center;
}

.blog-detail-image{
    max-width:980px;
    margin:0 auto 34px;
    padding:24px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
    box-shadow:0 28px 90px rgba(0,0,0,.46);
}

.blog-detail-image img{
    width:100%;
    display:block;
    border-radius:8px;
}

.blog-detail-content{
    max-width:820px;
    margin:0 auto 36px;
}

.blog-detail-content p{
    color:rgba(255,255,255,.76);
    font-size:17px;
    line-height:1.9;
}

.blog-detail-content p + p{
    margin-top:22px;
}

@media(max-width:640px){
    .blog-detail{
        padding:110px 0 64px;
    }

    .blog-detail-image{
        padding:14px;
    }

    .blog-detail-content p{
        font-size:15px;
    }
}

/* Last override: hero brand mark must fill the right side */
.hero-container{
    grid-template-columns:minmax(0, 680px) minmax(320px, 520px) !important;
    align-items:center !important;
}

.hero-brand-mark{
    position:relative !important;
    display:grid !important;
    place-items:center !important;
    width:min(38vw, 500px) !important;
    height:min(38vw, 500px) !important;
    min-width:320px !important;
    min-height:320px !important;
    justify-self:end !important;
    align-self:center !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:none;
}

@media(max-width:760px){
    .hero-container{
        grid-template-columns:1fr !important;
    }

    .hero-brand-mark{
        width:min(82vw, 330px) !important;
        height:min(82vw, 330px) !important;
        min-width:0 !important;
        min-height:0 !important;
        justify-self:center !important;
        margin-top:10px;
    }
}

/* Final hero brand mark override */
.hero-container{
    grid-template-columns:minmax(0, 680px) minmax(320px, 520px) !important;
    align-items:center !important;
}

.hero-brand-mark{
    position:relative !important;
    display:grid !important;
    place-items:center !important;
    width:min(38vw, 500px) !important;
    height:min(38vw, 500px) !important;
    min-width:320px !important;
    min-height:320px !important;
    justify-self:end !important;
    align-self:center !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:none;
}

@media(max-width:760px){
    .hero-container{
        grid-template-columns:1fr !important;
    }

    .hero-brand-mark{
        width:min(82vw, 330px) !important;
        height:min(82vw, 330px) !important;
        min-width:0 !important;
        min-height:0 !important;
        justify-self:center !important;
        margin-top:10px;
    }
}

/* Service detail pages */
.service-detail{
    position:relative;
    overflow:hidden;
    padding:150px 0 90px;
    background:
        radial-gradient(circle at 16% 10%, rgba(244, 74, 165, .16), transparent 34%),
        radial-gradient(circle at 86% 18%, rgba(114, 224, 232, .10), transparent 30%),
        linear-gradient(180deg, #050506 0%, #0a0b0e 48%, #050506 100%);
}

.service-detail::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:58px 58px;
    mask-image:linear-gradient(180deg, rgba(0,0,0,.72), transparent 62%);
}

.service-detail .container{
    position:relative;
    z-index:1;
}

.service-detail-hero{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(320px, 430px);
    gap:52px;
    align-items:center;
    margin-bottom:58px;
}

.service-detail-copy{
    max-width:720px;
}

.service-detail-back{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-bottom:26px;
    color:#f8bfdc;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
}

.service-detail h1,
.service-detail h2{
    color:#fff;
    font-family:"Cormorant Garamond", serif;
    text-shadow:
        0 0 14px rgba(255, 110, 190, .45),
        0 0 34px rgba(244, 74, 165, .22);
}

.service-detail h1{
    max-width:720px;
    margin:20px 0 18px;
    font-size:clamp(46px, 6vw, 82px);
    line-height:.96;
}

.service-detail-copy p{
    max-width:650px;
    margin:0 0 30px;
    color:rgba(255,255,255,.72);
    font-size:18px;
    line-height:1.75;
}

.service-detail-card,
.service-detail-panel,
.service-process,
.service-detail-cta{
    border:1px solid rgba(255,255,255,.12);
    background:linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
    box-shadow:
        0 28px 90px rgba(0,0,0,.46),
        inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
}

.service-detail-card{
    padding:34px;
    border-radius:16px;
}

.service-detail-icon{
    width:76px;
    height:76px;
    display:grid;
    place-items:center;
    margin-bottom:26px;
    border-radius:18px;
    color:#fff;
    font-size:34px;
    background:linear-gradient(135deg, #f45faa, #7de2ea);
    box-shadow:0 0 36px rgba(244, 74, 165, .42);
}

.service-detail-icon .inline-icon--service svg{
    width:34px;
    height:34px;
    display:block;
}

.service-detail-card p{
    margin:0;
    color:rgba(255,255,255,.73);
    font-size:16px;
    line-height:1.75;
}

.service-detail-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:24px;
    margin-bottom:28px;
}

.service-detail-panel{
    min-height:100%;
    padding:30px;
    border-radius:14px;
}

.service-detail-panel span,
.service-detail-cta span{
    display:inline-flex;
    margin-bottom:14px;
    color:#f8bfdc;
    font-size:11px;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.service-detail-panel h2,
.service-process h2,
.service-detail-cta h2{
    margin:0 0 20px;
    font-size:34px;
    line-height:1.08;
}

.service-detail-panel ul{
    display:grid;
    gap:13px;
    margin:0;
    padding:0;
    list-style:none;
}

.service-detail-panel li{
    display:flex;
    gap:12px;
    color:rgba(255,255,255,.74);
    font-size:14px;
    line-height:1.55;
}

.service-detail-panel li i{
    color:#f45faa;
    filter:drop-shadow(0 0 10px rgba(244, 74, 165, .55));
}

.service-process{
    display:grid;
    grid-template-columns:300px minmax(0, 1fr);
    gap:30px;
    margin-bottom:28px;
    padding:32px;
    border-radius:14px;
}

.service-process-steps{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:14px;
}

.service-process-steps article{
    min-height:150px;
    padding:18px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
    background:rgba(0,0,0,.22);
}

.service-process-steps strong{
    display:block;
    margin-bottom:18px;
    color:#f45faa;
    font-size:13px;
    letter-spacing:1.8px;
}

.service-process-steps p{
    margin:0;
    color:rgba(255,255,255,.72);
    font-size:13px;
    line-height:1.58;
}

.service-detail-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    padding:34px;
    border-radius:16px;
}

.service-detail-cta h2{
    max-width:680px;
    margin-bottom:0;
}

@media(max-width:980px){
    .service-detail-hero,
    .service-detail-grid,
    .service-process{
        grid-template-columns:1fr;
    }

    .service-process-steps{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .service-detail-cta{
        align-items:flex-start;
        flex-direction:column;
    }
}

@media(max-width:640px){
    .service-detail{
        padding:110px 0 64px;
    }

    .service-detail h1{
        font-size:40px;
    }

    .service-detail-copy p{
        font-size:15px;
    }

    .service-detail-card,
    .service-detail-panel,
    .service-process,
    .service-detail-cta{
        padding:24px;
    }

    .service-process-steps{
        grid-template-columns:1fr;
    }
}

/* Make service cards reliably clickable */
.service-card::before,
.service-card::after{
    pointer-events:none !important;
}

.service-card a{
    position:relative;
    z-index:5;
    pointer-events:auto;
}

.service-card .service-card-cta{
    position:relative;
    z-index:6;
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:25px;
    color:#ff4fa3;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    transition:.35s;
}

.service-card:hover .service-card-cta{
    color:#fff;
}

.service-card:hover .service-card-cta i{
    transform:translateX(6px);
}

/* Hero right-side neon brand mark */
.hero-container{
    grid-template-columns:minmax(0, 680px) minmax(320px, 520px) !important;
    align-items:center;
}

.hero-brand-mark{
    position:relative;
    display:grid;
    place-items:center;
    width:min(38vw, 500px);
    height:min(38vw, 500px);
    min-width:320px;
    min-height:320px;
    aspect-ratio:1;
    justify-self:end;
    isolation:isolate;
}

.hero-brand-mark::before{
    content:"";
    position:absolute;
    inset:6%;
    border-radius:50%;
    background:
        radial-gradient(circle, rgba(255,79,163,.22), transparent 58%),
        linear-gradient(135deg, rgba(255,79,163,.12), rgba(119,226,235,.08));
    filter:blur(18px);
    opacity:.95;
}

.hero-brand-mark::after{
    content:"";
    position:absolute;
    inset:16%;
    border-radius:34px;
    border:1px solid rgba(255,255,255,.10);
    background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:34px 34px;
    transform:rotate(-8deg);
    box-shadow:
        0 0 70px rgba(255,79,163,.18),
        inset 0 0 55px rgba(255,79,163,.08);
    opacity:.82;
    z-index:-1;
}

.brand-core{
    position:relative;
    z-index:3;
    width:172px;
    height:172px;
    display:grid;
    place-items:center;
    border-radius:36px;
    border:1px solid rgba(255,255,255,.22);
    background:
        radial-gradient(circle at 30% 18%, rgba(255,255,255,.30), transparent 24%),
        linear-gradient(135deg, rgba(255,79,163,.82), rgba(123,222,230,.58));
    box-shadow:
        0 0 34px rgba(255,79,163,.60),
        0 0 90px rgba(255,79,163,.22),
        inset 0 1px 0 rgba(255,255,255,.30);
    transform:rotate(-8deg);
}

.brand-core span{
    color:#fff;
    font-family:"Cormorant Garamond", serif;
    font-size:48px;
    font-weight:700;
    letter-spacing:2px;
    text-shadow:
        0 0 12px rgba(255,255,255,.90),
        0 0 28px rgba(255,79,163,.65);
    transform:rotate(8deg);
}

.brand-orbit{
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 0 36px rgba(255,79,163,.22);
}

.brand-orbit-one{
    width:70%;
    height:38%;
    transform:rotate(-21deg);
    border-color:rgba(255,79,163,.38);
}

.brand-orbit-two{
    width:54%;
    height:82%;
    transform:rotate(28deg);
    border-color:rgba(117,226,235,.26);
}

.brand-node{
    position:absolute;
    z-index:2;
    width:62px;
    height:62px;
    display:grid;
    place-items:center;
    border-radius:18px;
    color:#fff;
    font-size:25px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(14,14,18,.82);
    box-shadow:
        0 0 24px rgba(255,79,163,.35),
        inset 0 1px 0 rgba(255,255,255,.14);
}

.brand-node-code{
    left:15%;
    top:25%;
}

.brand-node-growth{
    right:11%;
    top:39%;
}

.brand-node-ai{
    left:37%;
    bottom:13%;
}

@media(max-width:760px){
    .hero-container{
        grid-template-columns:1fr !important;
    }

    .hero-brand-mark{
        width:min(72vw, 420px);
        height:min(72vw, 420px);
        min-width:0;
        min-height:0;
        justify-self:center;
        margin-top:8px;
    }
}

@media(max-width:640px){
    .hero-brand-mark{
        width:min(82vw, 310px);
        height:min(82vw, 310px);
        opacity:.88;
    }

    .brand-core{
        width:124px;
        height:124px;
        border-radius:26px;
    }

    .brand-core span{
        font-size:36px;
    }

    .brand-node{
        width:48px;
        height:48px;
        border-radius:14px;
        font-size:20px;
    }
}

/* Neon title glow and portfolio section */
.hero h1,
.section-header h2,
.about-content h2,
.contact-content h2,
.service-card h3,
.about-card h3,
.blog-content h3,
.contact-form-header h3,
.footer-column h3{
    color:#ffffff;
    text-shadow:
        0 0 7px rgba(255,255,255,.28),
        0 0 18px rgba(255,79,163,.48),
        0 0 34px rgba(255,79,163,.20);
}

.portfolio{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 18% 16%, rgba(255,79,163,.11), transparent 30%),
        radial-gradient(circle at 84% 70%, rgba(142,232,255,.07), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.012), transparent);
}

.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:22px;
    max-width:1180px;
    margin:0 auto;
}

.portfolio-card{
    position:relative;
    min-height:310px;
    padding:26px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:12px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        rgba(10,10,13,.82);
    box-shadow:
        0 16px 42px rgba(0,0,0,.36),
        0 0 30px rgba(255,79,163,.09);
    overflow:hidden;
}

.portfolio-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(135deg, rgba(255,79,163,.18), transparent 38%),
        radial-gradient(circle at 72% 22%, rgba(142,232,255,.14), transparent 28%);
    opacity:.72;
    pointer-events:none;
}

.portfolio-card > *{
    position:relative;
    z-index:1;
}

.portfolio-visual{
    display:grid;
    place-items:center;
    width:100%;
    height:118px;
    margin-bottom:22px;
    border:1px solid rgba(255,79,163,.18);
    border-radius:10px;
    background:
        linear-gradient(90deg, rgba(255,79,163,.10) 1px, transparent 1px),
        linear-gradient(180deg, rgba(142,232,255,.08) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,79,163,.22), transparent 60%);
    background-size:28px 28px, 28px 28px, auto;
    box-shadow:inset 0 0 36px rgba(255,79,163,.10);
}

.portfolio-visual i,
.portfolio-visual .inline-icon--captation svg{
    color:#ffffff;
    filter:drop-shadow(0 0 10px rgba(255,79,163,.55));
}

.portfolio-card span{
    display:inline-flex;
    margin-bottom:12px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.07);
    color:rgba(255,255,255,.78);
    font-size:10px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.portfolio-card h3{
    margin-bottom:12px;
    color:#ffffff;
    font-family:var(--font-title);
    font-size:23px;
    line-height:1.14;
    text-shadow:
        0 0 7px rgba(255,255,255,.28),
        0 0 18px rgba(255,79,163,.48),
        0 0 34px rgba(255,79,163,.20);
}

.portfolio-card p{
    color:rgba(255,255,255,.70);
    font-size:14px;
    line-height:1.68;
}

@media(max-width:900px){
    .portfolio-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media(max-width:640px){
    .portfolio{
        padding:64px 0;
    }

    .portfolio-grid{
        grid-template-columns:1fr;
    }
}

/* Portfolio prepared for real website projects */
.portfolio-card{
    min-height:330px;
}

.portfolio-card a{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:18px;
    color:#ffc1df;
    font-size:13px;
    font-weight:700;
    text-shadow:0 0 16px rgba(255,79,163,.34);
}

.portfolio-card a i{
    transition:transform .2s ease;
}

.portfolio-card a:hover i{
    transform:translateX(4px);
}

/* Services premium icons and tighter featured card */
.services-showcase{
    display:grid;
    grid-template-columns:minmax(0, 420px) minmax(0, 1fr);
    gap:22px;
    align-items:start;
    max-width:1180px;
}

.service-card-featured{
    min-height:auto !important;
    align-self:start;
    display:block !important;
    padding:28px !important;
}

.service-card-featured .service-icon{
    margin-bottom:20px;
}

.service-card-featured .service-badge{
    display:inline-flex;
    margin-bottom:18px;
}

.service-card-featured h3,
.service-card-featured p,
.service-card-featured .service-points,
.service-card-featured a{
    grid-column:auto !important;
}

.service-card-featured p{
    max-width:100%;
}

.service-points{
    grid-template-columns:1fr !important;
    gap:9px;
    margin:18px 0;
}

.service-icon{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.22);
    background:
        linear-gradient(145deg, rgba(255,255,255,.28), rgba(255,255,255,.06)),
        radial-gradient(circle at 28% 18%, rgba(255,255,255,.42), transparent 24%),
        linear-gradient(135deg, rgba(255,79,163,.90), rgba(142,232,255,.68));
    box-shadow:
        0 12px 34px rgba(255,79,163,.30),
        0 0 32px rgba(255,79,163,.24),
        inset 0 1px 0 rgba(255,255,255,.45),
        inset 0 -14px 28px rgba(0,0,0,.18);
}

.service-icon::before{
    content:"";
    position:absolute;
    inset:4px 6px auto;
    height:38%;
    border-radius:inherit;
    background:linear-gradient(180deg, rgba(255,255,255,.34), transparent);
    pointer-events:none;
}

.service-icon i,
.service-icon .inline-icon--service svg{
    position:relative;
    z-index:1;
    color:#ffffff;
    text-shadow:
        0 0 8px rgba(255,255,255,.70),
        0 0 18px rgba(255,79,163,.48);
}

.services-grid .service-card{
    min-height:260px;
}

@media(max-width:1000px){
    .services-showcase{
        grid-template-columns:1fr;
    }

    .service-card-featured{
        max-width:none;
    }

    .service-points{
        grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    }
}

@media(max-width:640px){
    .service-points{
        grid-template-columns:1fr !important;
    }
}

/* Captation first, services as quieter support section */
.portfolio{
    padding-top:92px;
    padding-bottom:92px;
}

.services{
    padding:66px 0 !important;
    background:
        radial-gradient(circle at 84% 20%, rgba(255,79,163,.055), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.006), transparent) !important;
}

.services .section-header{
    max-width:680px;
    margin-bottom:34px;
}

.services .section-tag{
    padding:6px 12px;
    font-size:8.5px;
    opacity:.78;
}

.services .section-header h2{
    font-size:clamp(26px, 2.6vw, 36px);
    text-shadow:
        0 0 6px rgba(255,255,255,.18),
        0 0 14px rgba(255,79,163,.25);
}

.services .section-header p{
    font-size:13px;
    line-height:1.65;
    color:rgba(255,255,255,.62);
}

.services-showcase{
    max-width:1100px;
}

.services-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:14px !important;
}

.service-card,
.service-card-featured{
    min-height:260px !important;
    padding:20px !important;
    border-color:rgba(255,255,255,.075);
    background:
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
        rgba(10,10,13,.66);
    box-shadow:
        0 12px 28px rgba(0,0,0,.26),
        0 0 18px rgba(255,79,163,.045);
}

.service-card:hover{
    border-color:rgba(255,79,163,.20);
    box-shadow:
        0 16px 34px rgba(0,0,0,.32),
        0 0 24px rgba(255,79,163,.08);
}

.service-icon{
    width:38px !important;
    height:38px !important;
    min-width:38px;
    margin-bottom:16px !important;
    font-size:17px !important;
    border-radius:10px;
    opacity:.86;
    box-shadow:
        0 8px 22px rgba(255,79,163,.18),
        inset 0 1px 0 rgba(255,255,255,.32);
}

.service-card .service-badge{
    margin-bottom:13px;
    padding:5px 9px;
    font-size:8px !important;
    opacity:.72;
}

.service-card h3{
    min-height:0;
    margin-bottom:9px !important;
    font-size:17px !important;
    text-shadow:
        0 0 6px rgba(255,255,255,.16),
        0 0 12px rgba(255,79,163,.20);
}

.service-card p{
    font-size:12px !important;
    line-height:1.58 !important;
    color:rgba(255,255,255,.62);
}

.service-card a{
    font-size:11px !important;
    color:rgba(255,193,223,.82);
}

@media(max-width:1200px){
    .services-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    }
}

@media(max-width:900px){
    .services-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }
}

@media(max-width:640px){
    .portfolio{
        padding-top:64px;
        padding-bottom:64px;
    }

    .services{
        padding:52px 0 !important;
    }

    .services-grid{
        grid-template-columns:1fr !important;
    }
}

/* Equal service cards */
.services-showcase{
    display:block !important;
    max-width:1180px;
    margin:0 auto;
}

.services-grid{
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:22px !important;
    align-items:stretch;
}

.service-card,
.service-card-featured{
    display:flex !important;
    flex-direction:column;
    min-height:340px !important;
    padding:26px !important;
}

.service-card-featured{
    grid-column:auto !important;
}

.service-card .service-icon{
    margin-bottom:24px;
}

.service-card .service-badge{
    order:-1;
    align-self:flex-start;
    margin-bottom:18px;
}

.service-card h3{
    min-height:52px;
}

.service-card p{
    flex:1;
}

.service-card a{
    margin-top:auto;
}

.service-points{
    display:none !important;
}

@media(max-width:1200px){
    .services-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    }
}

@media(max-width:900px){
    .services-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }
}

@media(max-width:640px){
    .services-grid{
        grid-template-columns:1fr !important;
    }

    .service-card,
    .service-card-featured{
        min-height:auto !important;
    }
}

/* Tighten contact form header spacing */
.contact-form{
    display:block !important;
}

.contact-form-header{
    margin-bottom:18px !important;
    padding-bottom:16px !important;
}

.contact-form-header p{
    margin-bottom:0 !important;
}

.contact-form .honeypot{
    display:none !important;
}

.contact-form .honeypot + .form-group{
    margin-top:0 !important;
}

.contact-form .form-group{
    margin-bottom:16px !important;
}

/* Footer brand: text-only neon mark */
.footer-logo{
    gap:0;
}

.footer-logo img{
    display:none !important;
}

.footer-logo span{
    color:#ffffff;
    font-family:var(--font-title);
    font-size:30px;
    font-weight:700;
    letter-spacing:.4px;
    text-shadow:
        0 0 8px rgba(255,255,255,.42),
        0 0 18px rgba(255,79,163,.78),
        0 0 42px rgba(255,79,163,.34);
}

.footer-logo:hover span{
    color:#fff7fb;
    text-shadow:
        0 0 10px rgba(255,255,255,.55),
        0 0 24px rgba(255,79,163,.92),
        0 0 56px rgba(255,79,163,.42);
}

/* Clean reset: no hero image, simple background and normal services */
.hero{
    min-height:640px;
    padding:118px 0 84px;
    background:
        radial-gradient(circle at 18% 22%, rgba(255,79,163,.14), transparent 30%),
        radial-gradient(circle at 82% 20%, rgba(142,232,255,.07), transparent 26%),
        linear-gradient(180deg, #050506 0%, #09090b 100%);
}

.hero::before,
.hero::after,
.hero-visual{
    display:none !important;
}

.hero-container{
    width:min(92%, 1240px);
    max-width:1240px;
    display:grid;
    grid-template-columns:minmax(0, 760px);
    justify-content:start;
    gap:0;
}

.hero-left{
    max-width:760px;
}

.hero h1{
    max-width:760px;
    font-size:clamp(38px, 4.8vw, 64px);
    line-height:1.04;
}

.hero-description{
    max-width:680px;
    font-size:15px;
    line-height:1.72;
}

.services{
    padding:78px 0 !important;
}

.services .section-header{
    max-width:760px;
    margin:0 auto 44px;
}

.services .section-tag{
    padding:8px 16px;
    font-size:10px;
    letter-spacing:1.8px;
}

.services .section-header h2{
    margin:16px 0 14px;
    font-size:clamp(30px, 3.4vw, 44px);
    line-height:1.08;
}

.services .section-header p{
    max-width:720px;
    font-size:14px;
    line-height:1.68;
}

.services-showcase{
    max-width:1180px;
    margin:0 auto;
    gap:18px;
}

.services-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:18px !important;
}

.service-card,
.service-card-featured{
    padding:24px !important;
    border-radius:12px;
}

.service-card-featured{
    gap:18px 22px;
}

.service-icon{
    width:48px !important;
    height:48px !important;
    min-width:48px;
    font-size:22px !important;
    border-radius:12px;
}

.service-badge{
    margin-bottom:14px;
    font-size:10px !important;
    letter-spacing:1.6px;
}

.service-card h3{
    margin-bottom:12px !important;
    font-size:21px !important;
    line-height:1.18;
}

.service-card p{
    margin-bottom:18px;
    font-size:14px !important;
    line-height:1.65 !important;
}

.service-card a{
    font-size:13px !important;
}

.service-points{
    gap:10px;
    margin:8px 0;
}

.service-points li{
    padding:10px 12px;
    font-size:12px !important;
}

@media(max-width:900px){
    .hero{
        min-height:auto;
        padding:100px 0 64px;
    }

    .services-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }
}

@media(max-width:640px){
    .hero h1{
        font-size:32px;
    }

    .services{
        padding:58px 0 !important;
    }

    .services-grid{
        grid-template-columns:1fr !important;
    }
}

/* Final tech image and compact services pass */
.hero-visual{
    right:-34px;
    width:min(50vw, 640px);
    opacity:.52;
    mix-blend-mode:screen;
    filter:
        drop-shadow(0 0 28px rgba(255,79,163,.24))
        drop-shadow(0 0 22px rgba(142,232,255,.10))
        saturate(1.04);
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, #000 28%, #000 76%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 16%, #000 86%, transparent 100%);
    mask-image:
        linear-gradient(90deg, transparent 0%, #000 28%, #000 76%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 16%, #000 86%, transparent 100%);
    -webkit-mask-composite:source-in;
    mask-composite:intersect;
}

.hero-visual img{
    object-position:center right;
}

.services{
    padding:46px 0 50px !important;
}

.services .section-header{
    max-width:560px;
    margin-bottom:24px;
}

.services .section-tag{
    padding:5px 10px;
    font-size:8px;
    letter-spacing:1.35px;
}

.services .section-header h2{
    margin:12px 0 10px;
    font-size:clamp(22px, 2.2vw, 30px);
    line-height:1.08;
}

.services .section-header p{
    max-width:540px;
    margin:0 auto;
    font-size:12px;
    line-height:1.58;
}

.services-showcase{
    max-width:1040px;
    margin:0 auto;
    gap:12px;
}

.services-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:12px !important;
}

.service-card,
.service-card-featured{
    padding:15px !important;
    border-radius:9px;
}

.service-card-featured{
    gap:10px 14px;
}

.service-icon{
    width:34px !important;
    height:34px !important;
    min-width:34px;
    font-size:16px !important;
    border-radius:9px;
}

.service-badge{
    margin-bottom:8px;
    font-size:7.5px !important;
    letter-spacing:1.2px;
}

.service-card h3{
    margin-bottom:7px !important;
    font-size:15px !important;
    line-height:1.16;
}

.service-card p{
    margin-bottom:12px;
    font-size:11.2px !important;
    line-height:1.5 !important;
}

.service-card a{
    font-size:10.5px !important;
}

.service-points{
    gap:8px;
    margin:2px 0 2px;
}

.service-points li{
    padding:7px 8px;
    font-size:9.5px !important;
}

@media(max-width:900px){
    .services-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }
}

@media(max-width:640px){
    .services-grid{
        grid-template-columns:1fr !important;
    }

    .services{
        padding:40px 0 42px !important;
    }
}

/* Final correction: complete brand and integrated right-side hero image */
.logo-text,
.logo-text strong{
    display:block;
    white-space:nowrap;
}

.logo-text small{
    display:none !important;
}

.logo-text strong{
    font-size:18px;
    line-height:1;
}

.hero{
    min-height:560px;
    padding:104px 0 64px;
}

.hero-container{
    position:relative;
    width:min(94%, 1320px);
    max-width:1320px;
    display:grid;
    grid-template-columns:minmax(0, 660px) 1fr;
    gap:0;
    align-items:center;
    overflow:visible;
}

.hero-left{
    position:relative;
    z-index:2;
    max-width:660px;
}

.hero h1{
    max-width:650px;
    margin:0 0 18px;
    font-size:clamp(36px, 4.35vw, 60px);
    line-height:1.02;
}

.hero-description{
    max-width:620px;
    font-size:13.5px;
    line-height:1.72;
}

.hero-visual{
    position:absolute;
    z-index:1;
    top:50%;
    right:0;
    width:min(48vw, 600px);
    aspect-ratio:1672 / 941;
    transform:translateY(-48%);
    border:0;
    border-radius:0;
    overflow:visible;
    opacity:.58;
    filter:
        drop-shadow(0 0 24px rgba(255,79,163,.28))
        saturate(1.08);
    mix-blend-mode:screen;
    pointer-events:none;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 22%, #000 84%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0%, #000 22%, #000 84%, transparent 100%);
}

.hero-visual::before,
.hero-visual::after{
    display:none;
}

.hero-visual img{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:none;
}

@media(max-width:1100px){
    .hero-container{
        grid-template-columns:minmax(0, 600px) 1fr;
    }

    .hero-visual{
        width:min(46vw, 500px);
        opacity:.42;
    }
}

@media(max-width:820px){
    .hero{
        min-height:auto;
        padding:92px 0 52px;
    }

    .hero-container{
        grid-template-columns:1fr;
    }

    .hero-visual{
        display:none;
    }
}

/* Wider header and hero title: less vertical, more horizontal */
html{
    scroll-padding-top:70px;
}

.header{
    top:0;
    left:0;
    right:0;
    background:rgba(5,5,7,.80);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.header .container,
.header-container{
    width:min(96%, 1480px);
    max-width:1480px;
}

.header-container{
    min-height:54px;
    padding:0 8px;
    display:grid;
    grid-template-columns:minmax(180px, 1fr) auto minmax(190px, 1fr);
    align-items:center;
    gap:28px;
}

.logo{
    justify-self:start;
    min-width:0;
}

.logo-text{
    display:block;
    white-space:nowrap;
}

.logo-text strong{
    font-size:18px;
    line-height:1;
}

.navbar{
    justify-self:center;
}

@media (min-width:993px){
    .menu{
        flex-direction:row;
        gap:34px;
        white-space:nowrap;
    }

    .menu a{
        font-size:12px;
    }
}

.nav-button{
    justify-self:end;
    min-height:40px;
    padding:10px 22px;
    border-radius:10px;
    font-size:12px;
    white-space:nowrap;
}

.hero{
    padding-top:104px;
}

.hero-container{
    width:min(96%, 1480px);
    max-width:1480px;
    grid-template-columns:minmax(0, 880px);
}

.hero-left{
    max-width:880px;
}

.hero h1{
    max-width:880px;
    font-size:clamp(38px, 5.2vw, 74px);
    line-height:.98;
}

.hero-description{
    max-width:760px;
}

@media(max-width:992px){
    .header-container{
        display:flex;
        min-height:58px;
    }

    .navbar{
        justify-self:auto;
    }

    .menu{
        gap:24px;
    }

    .hero h1{
        max-width:720px;
        font-size:clamp(34px, 7vw, 56px);
    }
}

@media(max-width:640px){
    .hero-container{
        width:min(92%, 1480px);
    }

    .hero h1{
        max-width:100%;
        font-size:32px;
        line-height:1.05;
    }
}

/* Compact contact pass */
.contact{
    padding:50px 0 54px;
}

.contact-grid{
    max-width:1080px;
    grid-template-columns:minmax(0,390px) minmax(0,470px);
    gap:42px;
    align-items:start;
}

.contact-content{
    max-width:390px;
    padding-top:10px;
}

.contact-content h2{
    max-width:360px;
    margin:14px 0 14px;
    font-size:clamp(24px,2.6vw,34px);
    line-height:1.08;
}

.contact-content p{
    max-width:360px;
    margin-bottom:18px;
    font-size:12.5px;
    line-height:1.62;
}

.contact-benefits{
    gap:8px;
    margin:18px 0 18px;
}

.contact-benefits li{
    padding:0;
    font-size:11.5px;
    line-height:1.35;
}

.contact-benefits i{
    font-size:14px;
}

.contact-info{
    max-width:330px;
    gap:10px;
}

.contact-info a{
    min-height:0;
    padding:11px 12px;
    border-radius:10px;
}

.contact-info i,
.contact-info__icon{
    width:34px;
    height:34px;
    min-width:34px;
    font-size:15px;
}

.contact-info span{
    gap:2px;
    font-size:11.5px;
}

.contact-info small{
    font-size:8px;
}

.contact-form{
    max-width:470px;
    padding:22px;
    border-radius:12px;
}

.contact-form-header{
    margin-bottom:16px;
}

.form-kicker{
    margin-bottom:7px;
    font-size:8px;
}

.contact-form-header h3{
    margin-bottom:6px;
    font-size:21px;
}

.contact-form-header p{
    font-size:11.5px;
    line-height:1.55;
}

.contact-form .form-group{
    margin-bottom:11px;
}

.form-group label{
    margin-bottom:5px;
    font-size:10px;
}

.form-group input,
.form-group select{
    height:40px;
    padding:0 12px;
    font-size:12px;
    border-radius:8px;
}

.form-group textarea{
    min-height:96px;
    padding:11px 12px;
    font-size:12px;
    border-radius:8px;
}

.contact button{
    min-height:40px;
    padding:11px 16px;
    font-size:11px;
    border-radius:8px;
}

@media(max-width:900px){
    .contact-grid{
        grid-template-columns:1fr;
        gap:26px;
    }

    .contact-content,
    .contact-content h2,
    .contact-content p,
    .contact-info,
    .contact-form{
        max-width:none;
    }
}

@media(max-width:640px){
    .contact{
        padding:40px 0 44px;
    }

    .contact-form{
        padding:18px;
    }
}

/* Compact harmony pass: smaller sections, cleaner cards and tighter blog/about */
.container{
    max-width:1120px;
}

.header-container{
    min-height:62px;
}

.logo-text strong{
    font-size:18px;
}

.logo-text small{
    display:none;
}

@media (min-width:993px){
    .menu{
        gap:20px;
    }

    .menu a{
        font-size:11px;
    }
}

.nav-button{
    padding:10px 18px;
    font-size:11px;
}

.hero{
    min-height:62vh;
    padding:112px 0 58px;
}

.hero-container{
    max-width:1120px;
    grid-template-columns:minmax(0,570px);
}

.hero h1{
    max-width:560px;
    margin:0 0 18px;
    font-size:clamp(32px,4vw,50px);
    line-height:1.02;
}

.hero-description{
    max-width:540px;
    font-size:13.5px;
    line-height:1.7;
    margin-bottom:24px;
}

.hero-buttons .btn-primary{
    padding:12px 20px;
    font-size:11px;
}

.hero::before{
    top:92px;
    right:8%;
    width:min(34vw,380px);
    height:min(34vw,380px);
    opacity:.48;
}

.hero::after{
    right:8%;
    bottom:18%;
    width:min(34vw,370px);
    height:110px;
    opacity:.5;
}

.services,
.about,
.blog,
.contact{
    padding:58px 0;
}

.section-header{
    max-width:620px;
    margin:0 auto 30px;
}

.section-tag{
    padding:6px 12px;
    font-size:9px;
    letter-spacing:1.6px;
}

.section-header h2,
.about-content h2,
.contact-content h2{
    font-size:clamp(24px,2.6vw,34px);
    line-height:1.08;
}

.section-header p,
.about-content p,
.contact-content p{
    font-size:13px;
    line-height:1.68;
}

.services-showcase{
    gap:14px;
}

.services-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
}

.service-card,
.about-card,
.blog-card{
    border-radius:10px;
}

.service-card,
.service-card-featured{
    min-height:0;
    padding:18px;
}

.service-card-featured{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:12px 16px;
}

.service-card-featured .service-badge,
.service-card-featured .service-points,
.service-card-featured a{
    grid-column:1 / -1;
}

.service-card-featured h3,
.service-card-featured p{
    grid-column:2;
}

.service-icon,
.about-icon{
    width:38px;
    height:38px;
    font-size:18px;
    border-radius:10px;
}

.service-card h3,
.about-card h3,
.blog-content h3{
    font-size:16px;
    margin-bottom:8px;
}

.service-card p,
.about-card p,
.blog-content p{
    font-size:12px;
    line-height:1.55;
}

.service-card a,
.blog-content a{
    font-size:11px;
}

.service-badge,
.blog-category,
.blog-featured-label{
    font-size:8px;
}

.service-points{
    margin-top:4px;
    grid-template-columns:repeat(3, minmax(0,1fr));
}

.service-points li{
    padding:8px 10px;
    font-size:10px;
}

.about{
    padding:54px 0;
}

.about-grid{
    grid-template-columns:minmax(0,430px) minmax(0,520px);
    justify-content:space-between;
    gap:34px;
}

.about-content{
    max-width:430px;
}

.about-cards{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:12px;
}

.about-card{
    padding:16px;
}

.blog{
    padding:56px 0;
}

.blog-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:14px;
    align-items:stretch;
}

.blog-card,
.blog-card-featured{
    display:flex;
    flex-direction:column;
    min-height:0;
}

.blog-card-featured{
    grid-column:auto;
    grid-template-columns:none;
}

.blog-image,
.blog-card-featured .blog-image{
    height:150px;
    min-height:150px;
}

.blog-content,
.blog-card-featured .blog-content{
    padding:16px;
}

.blog-card-featured .blog-content h3,
.blog-content h3{
    font-size:16px;
}

.blog-meta{
    gap:10px;
    margin-bottom:9px;
    font-size:10px;
}

.blog-content p{
    margin-bottom:14px;
}

@media(max-width:900px){
    .services-grid,
    .blog-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }

    .about-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:640px){
    .header-container{
        min-height:58px;
    }

    .hero{
        padding:94px 0 46px;
    }

    .hero h1{
        font-size:29px;
    }

    .services-grid,
    .blog-grid,
    .about-cards{
        grid-template-columns:1fr;
    }

    .services,
    .about,
    .blog,
    .contact{
        padding:44px 0;
    }
}

/* Premium neon refinement: compact, readable and more agency-focused */
body{
    background:
        radial-gradient(circle at 18% 0%, rgba(255,79,163,.16), transparent 28%),
        radial-gradient(circle at 78% 12%, rgba(95,219,255,.10), transparent 26%),
        linear-gradient(180deg, #050506 0%, #09090b 46%, #050506 100%);
}

.header{
    background:rgba(5,5,7,.76);
    box-shadow:
        0 14px 38px rgba(0,0,0,.34),
        0 1px 0 rgba(255,79,163,.12);
}

.logo-text strong{
    font-size:25px;
    letter-spacing:.6px;
    text-shadow:
        0 0 8px rgba(255,79,163,.95),
        0 0 22px rgba(255,79,163,.62),
        0 0 46px rgba(255,79,163,.28);
}

.logo-text small{
    margin-bottom:3px;
    color:rgba(255,255,255,.74);
}

.hero{
    isolation:isolate;
    min-height:72vh;
    overflow:hidden;
    background:
        linear-gradient(90deg, rgba(5,5,7,.97) 0%, rgba(5,5,7,.88) 48%, rgba(5,5,7,.56) 100%),
        radial-gradient(circle at 82% 32%, rgba(255,79,163,.38), transparent 25%),
        radial-gradient(circle at 68% 68%, rgba(88,214,255,.16), transparent 28%),
        repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 1px, transparent 1px 18px),
        #050506;
}

.hero::before{
    top:118px;
    right:6%;
    width:min(42vw,500px);
    height:min(42vw,500px);
    border-radius:22px;
    background:
        linear-gradient(90deg, rgba(255,79,163,.16) 1px, transparent 1px),
        linear-gradient(180deg, rgba(105,221,255,.10) 1px, transparent 1px),
        linear-gradient(135deg, transparent 0 42%, rgba(255,79,163,.34) 42% 43%, transparent 43% 100%);
    background-size:32px 32px, 32px 32px, 100% 100%;
    opacity:.72;
}

.hero::after{
    bottom:16%;
    right:7%;
    opacity:.82;
    filter:drop-shadow(0 0 18px rgba(255,79,163,.72));
}

.hero-left{
    padding:10px 0;
}

.hero h1{
    max-width:710px;
    font-size:clamp(34px,4.2vw,56px);
    text-wrap:balance;
}

.hero-description{
    max-width:650px;
    font-size:15px;
    color:rgba(255,255,255,.76);
}

.btn-primary{
    box-shadow:
        0 12px 30px rgba(255,58,151,.26),
        0 0 28px rgba(255,79,163,.24);
}

.services,
.about,
.blog{
    background:
        radial-gradient(circle at 12% 18%, rgba(255,79,163,.08), transparent 24%),
        radial-gradient(circle at 86% 60%, rgba(91,213,255,.06), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,.012), transparent);
}

.section-header{
    margin-bottom:38px;
}

.section-header h2,
.about-content h2{
    font-size:clamp(27px,3vw,40px);
    line-height:1.06;
}

.section-header p,
.about-content p{
    max-width:680px;
}

.service-card,
.about-card,
.blog-card{
    border:1px solid rgba(255,255,255,.09);
    background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        rgba(10,10,13,.82);
    backdrop-filter:blur(18px);
    box-shadow:
        0 14px 38px rgba(0,0,0,.36),
        0 0 0 1px rgba(255,79,163,.06),
        0 0 32px rgba(255,79,163,.08);
}

.service-card:hover,
.about-card:hover,
.blog-card:hover{
    border-color:rgba(255,79,163,.34);
    box-shadow:
        0 18px 44px rgba(0,0,0,.42),
        0 0 34px rgba(255,79,163,.18),
        0 0 56px rgba(95,219,255,.07);
}

.services-grid{
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
}

.service-card{
    min-height:auto;
    padding:22px;
}

.service-card-featured{
    gap:20px;
    padding:26px;
}

.service-card h3,
.about-card h3,
.blog-content h3{
    font-size:19px;
    line-height:1.2;
}

.service-card p,
.about-card p,
.blog-content p{
    font-size:13.5px;
    line-height:1.62;
}

.service-points{
    gap:10px 14px;
}

.service-points li{
    font-size:13px;
}

.about{
    padding:66px 0;
}

.about-grid{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.05fr);
    align-items:start;
}

.about-cards{
    grid-template-columns:repeat(2, minmax(0,1fr));
}

.about-card{
    padding:20px;
}

.blog{
    padding:68px 0;
}

.blog-card-featured{
    min-height:270px;
}

.blog-card-featured .blog-image{
    min-height:270px;
}

.blog-image{
    height:158px;
}

.blog-content,
.blog-card-featured .blog-content{
    padding:20px;
}

.blog-card-featured .blog-content h3,
.blog-content h3{
    font-size:19px;
}

.blog-category,
.blog-featured-label{
    font-size:10px;
    letter-spacing:1.4px;
}

@media(max-width:900px){
    .hero::before,
    .hero::after{
        opacity:.28;
    }

    .about-grid,
    .about-cards{
        grid-template-columns:1fr;
    }
}

@media(max-width:640px){
    .logo-text strong{
        font-size:20px;
    }

    .menu a{
        font-size:14px;
    }

    .hero{
        padding:104px 0 58px;
    }

    .hero h1{
        font-size:30px;
    }

    .service-card,
    .about-card,
    .blog-content,
    .blog-card-featured .blog-content{
        padding:18px;
    }
}

/* Visual refresh requested: cleaner agency look, compact cards and neon brand */
.header-container{
    min-height:74px;
}

.logo{
    gap:0;
}

.logo img{
    display:none;
}

.logo-text{
    display:grid;
    gap:0;
    line-height:1;
}

.logo-text small{
    color:rgba(255,255,255,.62);
    font-family:var(--font-body);
    font-size:11px;
    font-weight:600;
    letter-spacing:2.4px;
    text-transform:uppercase;
}

.logo-text strong{
    color:#ffffff;
    font-family:var(--font-title);
    font-size:27px;
    font-weight:700;
    letter-spacing:.3px;
    text-shadow:
        0 0 10px rgba(255,79,163,.78),
        0 0 24px rgba(255,79,163,.44),
        0 0 46px rgba(255,79,163,.22);
}

.menu a{
    font-size:13px;
}

.hero{
    min-height:78vh;
    padding:132px 0 84px;
    background:
        linear-gradient(90deg, rgba(7,7,8,.94), rgba(7,7,8,.78) 48%, rgba(7,7,8,.48)),
        radial-gradient(circle at 78% 40%, rgba(255,79,163,.32), transparent 26%),
        radial-gradient(circle at 62% 62%, rgba(142,232,255,.13), transparent 28%),
        linear-gradient(135deg, rgba(255,79,163,.14), transparent 30%),
        #060607;
}

.hero::before{
    inset:96px 4% auto auto;
    width:min(46vw,520px);
    height:min(46vw,520px);
    border-radius:28px;
    border:1px solid rgba(255,79,163,.22);
    background:
        linear-gradient(90deg, rgba(255,79,163,.13) 1px, transparent 1px),
        linear-gradient(180deg, rgba(142,232,255,.08) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,79,163,.22), transparent 58%);
    background-size:34px 34px, 34px 34px, auto;
    box-shadow:
        0 0 45px rgba(255,79,163,.24),
        inset 0 0 70px rgba(255,79,163,.12);
    filter:none;
    opacity:.78;
    transform:perspective(900px) rotateY(-18deg) rotateX(8deg);
}

.hero::after{
    right:9%;
    left:auto;
    bottom:14%;
    width:min(42vw,520px);
    height:170px;
    background:
        linear-gradient(90deg, transparent, rgba(255,79,163,.92), rgba(142,232,255,.72), transparent),
        linear-gradient(180deg, rgba(255,79,163,.18), transparent);
    clip-path:polygon(0 58%, 20% 42%, 38% 64%, 56% 28%, 76% 52%, 100% 34%, 100% 100%, 0 100%);
    box-shadow:0 0 34px rgba(255,79,163,.72);
}

.hero-container{
    grid-template-columns:minmax(0,760px);
    justify-content:start;
}

.hero-right,
.hero-card,
.hero-glow{
    display:none !important;
}

.hero-left{
    max-width:760px;
}

.hero h1{
    max-width:760px;
    margin:22px 0 18px;
    font-size:clamp(38px,4.8vw,64px);
    line-height:1.04;
}

.hero-description{
    max-width:680px;
    font-size:16px;
    line-height:1.72;
    margin-bottom:30px;
}

.hero-tag,
.section-tag{
    padding:8px 16px;
    font-size:11px;
    letter-spacing:2px;
}

.services,
.about,
.blog,
.contact{
    padding:92px 0;
}

.section-header{
    max-width:760px;
    margin-bottom:48px;
}

.section-header h2,
.about-content h2,
.contact-content h2{
    font-size:clamp(30px,3.5vw,46px);
}

.section-header p,
.about-content p,
.contact-content p{
    font-size:15px;
    line-height:1.7;
}

.service-card,
.about-card,
.blog-card,
.contact-form,
.legal-block{
    border-radius:12px;
    box-shadow:
        0 16px 42px rgba(0,0,0,.32),
        0 0 26px rgba(255,79,163,.08);
}

.service-card{
    padding:24px;
}

.service-card-featured{
    padding:30px;
}

.services-grid{
    gap:18px;
}

.service-icon,
.about-icon,
.contact-info i,
.contact-info__icon{
    width:48px;
    height:48px;
    font-size:22px;
    box-shadow:
        0 0 24px rgba(255,79,163,.32),
        0 0 38px rgba(142,232,255,.10);
}

.service-card h3{
    font-size:21px;
    margin-bottom:12px;
}

.service-card p{
    font-size:14px;
    line-height:1.65;
}

.service-badge{
    margin-bottom:14px;
    font-size:10px;
}

.about{
    padding:76px 0;
}

.about-grid{
    gap:44px;
}

.about-cards{
    gap:16px;
}

.about-card{
    padding:22px;
}

.about-card h3{
    font-size:20px;
    margin-bottom:10px;
}

.about-card p{
    font-size:14px;
    line-height:1.62;
}

.blog{
    padding:78px 0;
}

.blog-grid{
    gap:18px;
}

.blog-card-featured{
    min-height:310px;
    grid-template-columns:.95fr 1fr;
}

.blog-card-featured .blog-image{
    min-height:310px;
}

.blog-image{
    height:178px;
}

.blog-content,
.blog-card-featured .blog-content{
    padding:22px;
}

.blog-card-featured .blog-content h3,
.blog-content h3{
    font-size:21px;
}

.blog-content p{
    font-size:14px;
    line-height:1.62;
    margin-bottom:18px;
}

.blog-meta{
    gap:14px;
    margin-bottom:12px;
    font-size:12px;
}

@media(max-width:900px){
    .hero{
        min-height:auto;
        padding:112px 0 70px;
    }

    .hero::before{
        opacity:.24;
        width:70vw;
        height:70vw;
    }

    .hero::after{
        opacity:.36;
        width:72vw;
    }

    .hero h1{
        font-size:40px;
    }

    .blog-card-featured{
        grid-template-columns:1fr;
    }

    .blog-card-featured .blog-image{
        min-height:220px;
    }
}

@media(max-width:640px){
    .logo-text strong{
        font-size:22px;
    }

    .logo-text small{
        font-size:9px;
    }

    .hero h1{
        font-size:32px;
    }

    .hero-description{
        font-size:14px;
    }

    .services,
    .about,
    .blog,
    .contact{
        padding:62px 0;
    }
}

/* Final hero visual placement override */
.hero-container{
    width:min(96%, 1480px);
    max-width:1480px;
    grid-template-columns:minmax(0, 720px) minmax(360px, 1fr);
    align-items:center;
    gap:52px;
}

.hero-left{
    max-width:720px;
}

.hero h1{
    max-width:720px;
    font-size:clamp(36px, 4.7vw, 66px);
}

.hero-description{
    max-width:660px;
}

.hero-visual{
    display:block;
    position:relative;
    justify-self:end;
    width:min(46vw, 660px);
    aspect-ratio:1672 / 941;
    border-radius:18px;
    overflow:hidden;
    opacity:.94;
    filter:drop-shadow(0 0 30px rgba(255,79,163,.34));
}

.hero-visual::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
        radial-gradient(circle at 58% 46%, transparent 0 38%, rgba(5,5,7,.16) 62%, rgba(5,5,7,.62) 100%),
        linear-gradient(90deg, rgba(5,5,7,.50), transparent 38%, rgba(5,5,7,.10));
}

.hero-visual img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.03);
}

.hero-visual::after{
    content:"";
    position:absolute;
    inset:10%;
    border:1px solid rgba(255,79,163,.14);
    border-radius:18px;
    box-shadow:
        0 0 34px rgba(255,79,163,.22),
        inset 0 0 30px rgba(142,232,255,.08);
    pointer-events:none;
}

@media(max-width:1100px){
    .hero-container{
        grid-template-columns:minmax(0, 1fr) minmax(300px, 430px);
        gap:30px;
    }

    .hero-visual{
        width:min(42vw, 430px);
    }
}

@media(max-width:820px){
    .hero-container{
        grid-template-columns:1fr;
    }

    .hero-visual{
        justify-self:start;
        width:min(100%, 520px);
        opacity:.78;
    }
}

@media(max-width:640px){
    .hero-visual{
        display:none;
    }
}

/* Absolute final readability scale: larger lower sections, no hero image */
.hero-visual,
.hero-visual::before,
.hero-visual::after{
    display:none !important;
}

.hero{
    min-height:620px;
    padding:118px 0 82px;
    background:
        radial-gradient(circle at 22% 24%, rgba(255,79,163,.13), transparent 30%),
        radial-gradient(circle at 78% 28%, rgba(142,232,255,.06), transparent 28%),
        linear-gradient(180deg, #050506 0%, #09090b 100%);
}

.hero-container{
    width:min(92%, 1240px);
    max-width:1240px;
    display:grid;
    grid-template-columns:minmax(0, 780px);
    justify-content:start;
    gap:0;
}

.hero-left{
    max-width:780px;
}

.hero h1{
    max-width:780px;
    font-size:clamp(40px, 4.9vw, 66px);
    line-height:1.03;
}

.hero-description{
    max-width:700px;
    font-size:15px;
    line-height:1.72;
}

.services,
.about,
.blog,
.contact{
    padding:88px 0 !important;
}

.section-header,
.services .section-header{
    max-width:780px;
    margin:0 auto 48px;
}

.section-tag,
.services .section-tag{
    padding:8px 16px;
    font-size:10px;
    letter-spacing:1.8px;
}

.section-header h2,
.services .section-header h2,
.about-content h2,
.contact-content h2{
    font-size:clamp(32px, 3.6vw, 48px);
    line-height:1.08;
}

.section-header p,
.services .section-header p,
.about-content p,
.contact-content p{
    font-size:15px;
    line-height:1.72;
}

.services-showcase{
    max-width:1180px;
    margin:0 auto;
    gap:20px;
}

.services-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:20px !important;
}

.service-card,
.service-card-featured,
.about-card,
.blog-card,
.contact-form{
    border-radius:12px;
    padding:26px !important;
}

.service-card-featured{
    padding:30px !important;
    gap:18px 22px;
}

.service-icon,
.about-icon,
.contact-info i,
.contact-info__icon{
    width:50px !important;
    height:50px !important;
    min-width:50px;
    font-size:23px !important;
}

.service-card h3,
.about-card h3,
.blog-content h3{
    font-size:21px !important;
    line-height:1.2;
}

.service-card p,
.about-card p,
.blog-content p{
    font-size:14px !important;
    line-height:1.66 !important;
}

.service-card a,
.blog-content a{
    font-size:13px !important;
}

.service-badge,
.blog-category,
.blog-featured-label{
    font-size:10px !important;
}

.service-points li{
    padding:10px 12px;
    font-size:12px !important;
}

.about-grid{
    max-width:1180px;
    margin:0 auto;
    grid-template-columns:minmax(0, 470px) minmax(0, 560px);
    gap:56px;
}

.about-cards{
    gap:18px;
}

.blog-grid{
    max-width:1180px;
    margin:0 auto;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:22px;
}

.blog-image,
.blog-card-featured .blog-image{
    height:210px;
    min-height:210px;
}

.blog-content,
.blog-card-featured .blog-content{
    padding:24px !important;
}

.contact-grid{
    max-width:1120px;
    grid-template-columns:minmax(0, 430px) minmax(0, 520px);
    gap:64px;
}

.contact-content,
.contact-content h2,
.contact-content p{
    max-width:430px;
}

.contact-form{
    max-width:520px;
}

.form-group input,
.form-group select{
    height:46px;
    font-size:13px;
}

.form-group textarea{
    min-height:118px;
    font-size:13px;
}

@media(max-width:900px){
    .services-grid,
    .blog-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }

    .about-grid,
    .contact-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:640px){
    .hero{
        min-height:auto;
        padding:98px 0 60px;
    }

    .hero h1{
        font-size:34px;
    }

    .services,
    .about,
    .blog,
    .contact{
        padding:64px 0 !important;
    }

    .services-grid,
    .blog-grid{
        grid-template-columns:1fr !important;
    }
}

/* === Minimal neon icon system === */
.service-icon,
.service-detail-icon,
.contact-info__icon,
.portfolio-visual .inline-icon--captation,
.portfolio-portal__icon,
.admin-service-icon{
    background:rgba(255,79,163,.06) !important;
    border:1px solid rgba(255,79,163,.32) !important;
    box-shadow:
        0 0 14px rgba(255,79,163,.16),
        inset 0 0 10px rgba(142,232,255,.05) !important;
}

.service-icon::before,
.service-detail-icon::before{
    display:none !important;
}

.service-icon,
.service-card .service-icon{
    width:64px !important;
    height:64px !important;
    border-radius:16px !important;
    margin-bottom:22px !important;
}

.service-detail-icon{
    width:68px !important;
    height:68px !important;
    border-radius:16px !important;
}

.service-detail-icon .inline-icon--service svg{
    width:28px !important;
    height:28px !important;
}

.portfolio-visual .inline-icon--captation svg,
.portfolio-portal__icon .inline-icon svg{
    width:28px !important;
    height:28px !important;
}

.contact-info__icon{
    width:42px !important;
    height:42px !important;
    border-radius:12px !important;
}

.contact-benefits .inline-icon--contact-benefit svg{
    width:16px !important;
    height:16px !important;
    color:var(--color-accent) !important;
    filter:drop-shadow(0 0 6px rgba(142,232,255,.55)) !important;
}