:root {
    --bg-ant: #0b1020;
    --bg-2-ant: #0f172a;
    --bg: #2b49cf;
    --bg-2: #323e96;
    --panel: #111827;
    --txt: #e5e7eb;
    --muted: #d1d9e4;
    --txtVar: #ffffff;
    --mutedVar: #e7f8fa;
    --brand: #FF6A00;
    --brand-2: #00E0FF;
    --ring: rgba(255,106,0,.45);
    --ok: #10b981;
    --warn: #f59e0b;
    --err: #ef4444;
    --radius-xl: 1.25rem;
    --shadow-1: 0 20px 60px rgba(0,0,0,.35);
    --shadow-2: 0 2px 14px rgba(0,0,0,.25);
    --maxw: 1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
    color: var(--txt);
    background: linear-gradient(to bottom, var(--bg-ant) 0%, /* #0b1020 */
    var(--bg-2-ant) 40%, /* #0f172a */
    var(--bg-2) 100% /* #323e96 */
    );
    min-height: 100vh;
    background-attachment: fixed;
    line-height: 1.6;
    letter-spacing: .1px;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* Regla més específica per les icones dels botons */
button.btn .icon,
a.btn .icon,
.btn > .icon {
    width: 18px !important;
    height: 18px !important;
    margin-bottom: 0 !important;
    margin-right: 0.5rem;
    filter: none !important;
    transform: none !important;
}

.btn{display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.2rem; border-radius:.9rem; font-weight:650; border:1px solid transparent; box-shadow:var(--shadow-2); transition:.2s ease;}
.btn:focus{outline:2px solid var(--ring); outline-offset:2px}
.btn-primary{background:linear-gradient(135deg, var(--brand), #ff9540); color:#111}
.btn-primary:hover{transform:translateY(-1px); filter:saturate(1.05) brightness(1.05)}
.btn-ghost{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-warning {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border-color: rgba(252, 211, 77, 0.3);
}

    .btn-warning:hover {
        transform: translateY(-1px);
        filter: saturate(1.05) brightness(1.05);
        box-shadow: 0 4px 15px rgba(252, 211, 77, 0.3);
    }

/* Corregir les icones dels botons */
.btn .icon {
    width: 18px !important;
    height: 18px !important;
    margin-bottom: 0 !important;
    stroke-width: 2;
    filter: none !important;
}

header.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: saturate(140%) blur(10px);
    background: linear-gradient(180deg, #283253 , #676da2); border-bottom:1px solid rgba(255,255,255,.06)*/
}
.bar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
.brand .logo{width:32px; height:32px; border-radius:9px; background:conic-gradient(from 210deg, var(--brand), #ffd6b7 25%, #111 26% 74%, var(--brand-2) 75%);
  box-shadow:0 0 0 2px rgba(255,255,255,.05), inset 0 -6px 20px rgba(0,0,0,.45), 0 8px 30px rgba(0,224,255,.15)}
nav ul{display:flex; gap:14px; align-items:center; list-style:none; padding:0; margin:0}
nav a{padding:8px 12px; border-radius:10px; color:var(--mutedVar)}
nav a:hover{background:rgba(255,255,255,.06); color:var(--txtVar)}
.hero{padding:80px 0 40px}
.grid-hero {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 40px;
    align-items: start; /* Canviat de 'center' a 'start' */
}
h1{font-size:clamp(32px, 5vw, 40px); line-height:1.05; margin:0 0 16px; letter-spacing:.2px}
.lead{font-size:clamp(16px, 1.9vw, 20px); color:var(--muted); max-width:62ch}
.grad{background:linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.cta{display:flex; gap:14px; margin-top:24px; flex-wrap:wrap}

.mock{position:relative; border-radius:var(--radius-xl); background:white; box-shadow:var(--shadow-1); border:1px solid rgba(255,255,255,.06); overflow:hidden}
.mock::before{content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 20% -10%, rgba(0,224,255,.15), transparent 0%)}
.mock .chrome{display:flex; gap:8px; padding:14px 16px; align-items:center; background:"linear-gradient(180deg, rgba(100,100,100,.02), rgba(100,100,100,.02))"; border-bottom:1px solid rgba(255,255,255,.06)}
.dot{width:10px; height:10px; border-radius:50%; background:#ef4444; box-shadow:12px 0 0 #f59e0b, 24px 0 0 #10b981}
.mock .screen{padding:0; aspect-ratio: 16 / 10;}
.mock pre{margin:0; padding:16px; height:100%; overflow:auto; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color:#000000;}
.mock.wider {
    width: calc(100% + 50px);
    height: calc(100% + 15px);
    margin-left: -25px; /* Per centrar l'expansió */
}
.mock.wider::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 300px at 20% -10%, rgba(0,224,255,.15), transparent 0%)
}
.mock.wider pre,
.mock.wider .screen,
.mock.wider .chrome {
    /* Les regles existents s'aplicaran automàticament */
}
.section{padding:70px 0}
.section h2{font-size:clamp(26px, 4vw, 30px); margin:0 0 14px}
.muted{color:var(--muted)}
.grid{display:grid; gap:18px}

.features{grid-template-columns: repeat(3, 1fr)}
.card {
    background: linear-gradient(180deg, #1E3A8A, #1E293B);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--shadow-2)
}

.card h3{margin:10px 0 8px; font-size:18px}
/*
.icon{width:26px; height:26px}
*/

/* Crear una classe específica per les icones grans dels cards */
.icon-large {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 16px !important;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 4px 8px rgba(255, 106, 0, 0.25));
    transition: all 0.3s ease;
}

.icon-large.gradient {
    stroke: url(#iconGradient);
    filter: drop-shadow(0 6px 12px rgba(255, 106, 0, 0.4));
}

/* Icones normals per botons */
.icon {
    width: 18px;
    height: 18px;
    margin-bottom: 0;
}
/* Corregir el grid de features per limitar l'amplada */
.features {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1000px; /* Limitar amplada màxima */
    margin: 0 auto; /* Centrar */
    gap: 24px; /* Més espai entre targetes */
}

/* Mantenir les icones dels cards amb el seu estil */
.card .icon {
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 4px 8px rgba(255, 106, 0, 0.25));
    transition: all 0.3s ease;
}

    .card .icon.gradient {
        stroke: url(#iconGradient);
        filter: drop-shadow(0 6px 12px rgba(255, 106, 0, 0.4));
    }

    .card .icon:not(.gradient) {
        stroke: var(--brand);
        filter: drop-shadow(0 4px 8px rgba(255, 106, 0, 0.3));
    }

/* Hover effects només per icones de cards */
.card:hover .icon {
    transform: translateY(-2px) scale(1.05);
    filter: drop-shadow(0 8px 16px rgba(255, 106, 0, 0.4));
}

    .card:hover .icon.gradient {
        filter: drop-shadow(0 10px 20px rgba(255, 106, 0, 0.5));
    }
/* Millorar les targetes també */
.card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04) );
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 28px 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

    /* Efecte lluentor subtle */
    .card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.1), transparent );
        transition: left 0.5s ease;
    }

    .card:hover::before {
        left: 100%;
    }

    .card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 106, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 106, 0, 0.3);
    }

    /* Títols més vibrants */
    .card h3 {
        margin: 16px 0 12px;
        font-size: 19px;
        font-weight: 700;
        color: var(--txt);
        letter-spacing: -0.02em;
    }

    /* Text més llegible */
    .card p {
        color: var(--muted);
        font-size: 14px;
        line-height: 1.6;
        margin: 0;
        opacity: 0.9;
    }

/* Responsive per targetes */
@media (max-width: 1000px) {
    .features {
        grid-template-columns: 1fr 1fr;
        max-width: 600px;
    }
}

@media (max-width: 640px) {
    .features {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .card {
        max-width: 100%;
    }
}

.strip{display:grid; grid-template-columns: 1fr 1fr; gap:28px; align-items:center}
.strip .panel{padding:24px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.06); border-radius:16px}

.shots{grid-template-columns: repeat(3, 1fr)}
.shot {
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
    background: #0c1224;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

    .shot:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(0,0,0,.4);
    }

    .shot img {
        transition: transform 0.3s ease;
    }

    .shot:hover img {
        transform: scale(1.05);
    }

    .shot .ph {
        aspect-ratio: 16/10;
        display: grid;
        place-items: center;
        color: #94a3b8;
        font-weight: 600;
        letter-spacing: .3px;
    }
.pricing {
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    margin: 0 auto;
    justify-content: center;
    max-width: 600px; 
}

.price{
    padding:26px; 
    border-radius:16px; 
    border:1px solid rgba(255,255,255,.08); 
    background:linear-gradient(180deg, 
        rgb(183, 183, 241, .8), 
        rgba(255,255,255,.02)); 
    box-shadow:var(--shadow-2)
}
.price.featured{border-color: rgba(255,106,0,.5); box-shadow: 0 0 0 1px rgba(255,106,0,.35), var(--shadow-2)}
.price h3{margin:0 0 6px}
.price .tag{display:inline-block; font-size:12px; padding:4px 8px; border-radius:999px; background:rgba(255,106,0,.15); border:1px solid rgba(255,106,0,.25); color:#ffd6b7; font-weight:700}
.price ul{margin:14px 0 0; padding-left:18px}
.price li{margin:8px 0}
.pricing-centered {
    display: flex;
    justify-content: center;
}
.faq{max-width:900px}
details{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:16px 18px}
details + details{margin-top:12px}
summary{cursor:pointer; font-weight:650}

.download{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:24px; align-items:center;
  background: linear-gradient(135deg, rgba(255,106,0,.15), rgba(0,224,255,.08));
  border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:28px; box-shadow:var(--shadow-2)
}
.badges{display:flex; gap:10px; flex-wrap:wrap}
.badge{display:flex; align-items:center; gap:8px; background:#0b1224; border:1px solid rgba(255,255,255,.08); padding:10px 14px; border-radius:12px; font-weight:700}
.badge svg{opacity:.9}

footer{border-top:1px solid rgba(255,255,255,.08); padding:30px 0 60px; color:var(--muted)}
.fgrid{display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:28px}

/* Responsive */
    @media (max-width: 1000px) {
        .grid-hero {
            grid-template-columns: 1fr
        }

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

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

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

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

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

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

    @media (max-width: 640px) {
        nav ul {
            display: none
        }
    }

    .contact-form{max-width:500px}
.contact-form input, .contact-form textarea{width:100%}

/* Selector d'idioma */
/* Afegeix o actualitza aquesta secció al final del fitxer */

/* Selector d'idioma */
.language-selector select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: white; /* Fons blanc */
    color: #333; /* Text fosc */
    border: 2px solid #333; /* Vora negra */
    border-radius: 6px;
    padding: 8px 32px 8px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
}

    .language-selector select:hover {
        background-color: #f5f5f5;
        border-color: #000;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .language-selector select:focus {
        outline: none;
        border-color: var(--brand);
        box-shadow: 0 0 0 2px rgba(255, 106, 0, 0.2);
    }

/* Estils específics per les opcions del desplegable */
.language-selector option {
    background-color: var(--panel) !important; /* Fons fosc */
    color: var(--txt) !important; /* Text blanc */
    padding: 8px 12px;
    border: none;
}

/* Per navegadors WebKit (Chrome, Safari) */
.language-selector select option:hover {
    background-color: rgba(255, 106, 0, 0.2) !important;
    color: var(--txt) !important;
}

/* Per navegadors Firefox */
.language-selector select option:checked {
    background-color: var(--brand) !important;
    color: white !important;
}

/* Forçar estils per opcions seleccionades */
.language-selector select option:focus,
.language-selector select option:active {
    background-color: var(--brand) !important;
    color: white !important;
}

/* Estils alternatius per assegurar compatibilitat */
@-moz-document url-prefix() {
    .language-selector select {
        color: #333;
        background-color: white;
    }

        .language-selector select option {
            background-color: var(--panel);
            color: var(--txt);
        }
}


.stats-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

    .stats-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

.stats-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .stats-icon svg {
        width: 24px;
        height: 24px;
        color: white;
    }

.stats-content {
    flex: 1;
}

.stats-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--txt);
    line-height: 1;
}

.stats-label {
    color: var(--muted);
    font-size: 0.875rem;
    margin-top: 2px;
}

.stats-detail {
    color: var(--muted);
    font-size: 0.75rem;
    margin-top: 4px;
}

.admin-action-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .admin-action-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transition: left 0.5s ease;
    }

    .admin-action-card:hover::before {
        left: 100%;
    }

    .admin-action-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
        border-color: rgba(255, 106, 0, 0.3);
    }

.action-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .action-icon svg {
        width: 28px;
        height: 28px;
        color: white;
    }

.action-content h3 {
    margin: 0 0 8px;
    color: var(--txt);
    font-size: 1.125rem;
    font-weight: 700;
}

.action-content p {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.4;
}

.action-stats {
    font-size: 0.75rem;
    color: var(--brand);
    font-weight: 600;
}

@media (max-width: 768px) {
    .stats-card {
        flex-direction: column;
        text-align: center;
    }
}