:root{
    --arc-teal:#10b981;
    --arc-cyan:#06b6d4;
    --arc-sky:#0ea5e9;
    --arc-amber:#f59e0b;
    --arc-ink:#020617;
    --arc-ink-muted:#64748b;
    --arc-surface:#f9fafb;
    --arc-surface-alt:#ffffff;
    --arc-bg:#0b1220;
    --arc-divider:rgba(15,23,42,.12);

    --arc-radius-lg:20px;
    --arc-radius-md:12px;
    --arc-shadow-soft:0 28px 80px rgba(15,23,42,.65);
    --arc-shadow-btn:0 18px 40px rgba(15,23,42,.75);
    --arc-transition-fast:170ms ease-out;
}

:where(a,button,[role="button"],input,select,textarea):focus-visible{
    outline:2px solid color-mix(in oklab, var(--arc-cyan), white 18%);
    outline-offset:3px;
    border-radius:10px;
}

/* GLOBAL DECOR FOR NEW LOOK */

body{
    font-family:"Rubik","Nunito",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:
        radial-gradient(circle at top,#0ea5e9 0,transparent 55%),
        radial-gradient(circle at bottom,#22c55e 0,transparent 55%),
        #020617;
    color:#e5e7eb;
}

/* app shell background */

#AppShell{
    background:
        radial-gradient(1100px 540px at 50% -120px,rgba(34,197,94,.18),transparent 70%),
        radial-gradient(980px 520px at 10% 120%,rgba(56,189,248,.16),transparent 70%);
}

/* HEADER RE-THEME */

#hdr > div:first-child{
    background:
        linear-gradient(90deg,rgba(15,23,42,.98),rgba(15,23,42,.92));
    border-bottom:1px solid rgba(148,163,184,.25);
    backdrop-filter:blur(18px);
}

#hdr nav a{
    border-radius:999px;
    background:transparent;
    border:1px solid rgba(148,163,184,.35);
    color:#e5e7eb;
}
#hdr nav a:hover{
    background:rgba(15,23,42,.9);
    border-color:rgba(45,212,191,.75);
}

/* top-right CTA */

#hdr a[href="#contacto"]{
    background:linear-gradient(120deg,#22c55e,#0ea5e9,#38bdf8);
    box-shadow:0 18px 40px rgba(34,197,94,.5);
}

/* MOBILE DRAWER */

#drawer aside{
    background:radial-gradient(circle at 0 0,rgba(45,212,191,.45),transparent 55%),
               radial-gradient(circle at 100% 100%,rgba(14,165,233,.45),transparent 55%),
               #020617;
}

/* HERO / CASINOS SECTION */

#casinos{
    background:
        radial-gradient(900px 420px at 50% 0,rgba(34,197,94,.12),transparent 65%),
        #020617;
    color:#e5e7eb;
}

#casinos .max-w-4xl span.inline-flex{
    background:rgba(15,23,42,.7);
    color:#a5f3fc;
    border-color:rgba(56,189,248,.45);
}

#casinos h1{
    color:#f9fafb;
}

#casinos p{
    color:#cbd5f5;
}

#casinos article > div{
    background:linear-gradient(145deg,rgba(15,23,42,1),rgba(15,23,42,.96));
    border-color:rgba(30,64,175,.7);
}

#casinos aside{
    background:radial-gradient(circle at 0 0,rgba(45,212,191,.35),transparent 60%);
}

/* primary card on hero */

#casinos .lg\:col-span-9{
    background:radial-gradient(circle at 100% 0,rgba(59,130,246,.34),transparent 70%);
    backdrop-filter:blur(10px);
}

/* main CTA buttons */

a[href*="betsson.com"]{
    background:linear-gradient(120deg,#22c55e,#0ea5e9,#38bdf8);
    box-shadow:0 22px 55px rgba(34,197,94,.6);
    border-radius:999px;
}

/* BONOS SECTION */

#bonos{
    background:radial-gradient(1100px 520px at 0 0,rgba(45,212,191,.12),transparent 65%),
               radial-gradient(1100px 520px at 100% 100%,rgba(56,189,248,.12),transparent 65%),
               #020617;
    color:#e5e7eb;
}

#bonos .bg-white{
    background:rgba(15,23,42,.9);
    border-color:rgba(30,64,175,.6);
}

#bonos .bg-slate-50,
#bonos .bg-slate-50\/60{
    background:rgba(15,23,42,.9);
}

#bonos .rounded-2xl.bg-slate-50{
    background:rgba(15,23,42,.9);
}

/* chips */

#bonos span.inline-flex.items-center.rounded-full{
    background:rgba(15,23,42,.7);
    color:#a5f3fc;
    border-color:rgba(45,212,191,.55);
}

/* GUIA SELECCION SECTION */

#guia-seleccion{
    background:#020617;
    color:#e5e7eb;
}

#guia-seleccion header span.inline-flex{
    background:rgba(15,23,42,.9);
    border-color:rgba(148,163,184,.35);
    color:#e5e7eb;
}

#guia-seleccion .bg-white{
    background:rgba(15,23,42,.96);
    border-color:rgba(30,64,175,.6);
    box-shadow:0 26px 60px rgba(15,23,42,.9);
}

#guia-seleccion .bg-slate-50{
    background:rgba(15,23,42,.9);
}

/* LICENCIAS / SEGURIDAD */

#seguridad-licencias{
    background:
        radial-gradient(900px 420px at 0 100%,rgba(45,212,191,.16),transparent 60%),
        #020617;
    color:#e5e7eb;
}

#seguridad-licencias .bg-white{
    background:rgba(15,23,42,.95);
    border-color:rgba(37,99,235,.6);
}

/* MOVIL SECTION */

#dispositivos-moviles{
    background:#020617;
    color:#e5e7eb;
}

#dispositivos-moviles .bg-white{
    background:rgba(15,23,42,.96);
    border-color:rgba(30,64,175,.6);
}

#dispositivos-moviles .bg-slate-50{
    background:rgba(15,23,42,.94);
    border-color:rgba(30,64,175,.55);
}

/* FAQ SECTION */

#preguntas-frecuentes{
    background:
        radial-gradient(900px 420px at 100% 0,rgba(56,189,248,.18),transparent 60%),
        #020617;
    color:#e5e7eb;
}

#preguntas-frecuentes details{
    background:rgba(15,23,42,.94);
    border-color:rgba(30,64,175,.6);
    box-shadow:0 26px 60px rgba(15,23,42,.9);
}

/* CONTACTO SECTION */

#contacto{
    background:#020617;
    color:#e5e7eb;
}

#contacto .bg-white{
    background:rgba(15,23,42,.96);
    border-color:rgba(30,64,175,.55);
}

#contacto input,
#contacto select,
#contacto textarea{
    background:rgba(15,23,42,.9);
    border-color:rgba(51,65,85,.9);
    color:#e5e7eb;
}

#contacto input::placeholder,
#contacto textarea::placeholder{
    color:#64748b;
}

/* FOOTER */

footer{
    background:radial-gradient(circle at 0 0,rgba(45,212,191,.2),transparent 65%),
               radial-gradient(circle at 100% 100%,rgba(56,189,248,.2),transparent 65%),
               #020617;
    border-top:1px solid rgba(30,64,175,.5);
}

/* CTA GENERIC OVERRIDE */

a[href^="#casinos"],
a[href^="#bonos"],
a[href^="#guia-seleccion"],
a[href^="#seguridad-licencias"],
a[href^="#dispositivos-moviles"],
a[href^="#preguntas-frecuentes"],
a[href^="#contacto"]{
    scroll-behavior:smooth;
}

/* AGE GATE (ARC) — NEW STYLE, STRUCTURE PRESERVED */

.arc-overlay{
    position:fixed;
    inset:0;
    display:grid;
    place-items:center;
    padding:1.75rem;
    background:
        radial-gradient(circle at 0% 0%, rgba(34,197,94,.22), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(56,189,248,.22), transparent 55%),
        rgba(15,23,42,.9);
    -webkit-backdrop-filter:blur(20px);
    backdrop-filter:blur(20px);
    z-index:1000;
}

.arc-modal{
    width:min(560px,96vw);
    background:
        radial-gradient(circle at top left, rgba(45,212,191,.18), transparent 60%),
        radial-gradient(circle at bottom right, rgba(56,189,248,.18), transparent 60%),
        rgba(15,23,42,.98);
    color:#e5e7eb;
    border-radius:var(--arc-radius-lg);
    border:1px solid rgba(148,163,184,.5);
    box-shadow:var(--arc-shadow-soft);
    padding:clamp(1.6rem,2.2vw + 1.2rem,2.6rem);
    position:relative;
    overflow:hidden;
}

.arc-modal::before{
    content:"";
    position:absolute;
    inset:-40%;
    background:
        conic-gradient(from 210deg,
            rgba(34,197,94,.4),
            transparent,
            rgba(56,189,248,.4),
            transparent,
            rgba(16,185,129,.4));
    opacity:.5;
    mix-blend-mode:soft-light;
    pointer-events:none;
}

.arc-modal > *{
    position:relative;
    z-index:1;
}

.arc-actions{
    display:flex;
    flex-wrap:wrap;
    gap:.9rem;
    justify-content:center;
    margin-top:1.4rem;
}

.arc-btn{
    appearance:none;
    border:0;
    border-radius:var(--arc-radius-md);
    padding:.85rem 1.55rem;
    font-weight:800;
    font-size:.9rem;
    line-height:1;
    cursor:pointer;
    letter-spacing:.08em;
    text-transform:uppercase;
    position:relative;
    overflow:hidden;
    transition:
        transform var(--arc-transition-fast),
        box-shadow var(--arc-transition-fast),
        filter var(--arc-transition-fast),
        background var(--arc-transition-fast),
        color var(--arc-transition-fast),
        border-color var(--arc-transition-fast);
    box-shadow:var(--arc-shadow-btn);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    white-space:nowrap;
}

.arc-btn::after{
    content:"";
    position:absolute;
    inset:-2px;
    background:
        linear-gradient(120deg,rgba(255,255,255,.4),transparent 40%,transparent 60%,rgba(255,255,255,.28));
    opacity:0;
    transform:translateX(-40%);
    transition:opacity 220ms ease-out, transform 220ms ease-out;
    pointer-events:none;
}

.arc-btn:hover{
    transform:translateY(-1px) translateZ(0);
    filter:brightness(1.05);
}

.arc-btn:active{
    transform:translateY(1px) scale(.97);
    box-shadow:0 12px 28px rgba(15,23,42,.9);
}

.arc-btn:hover::after{
    opacity:.85;
    transform:translateX(0);
}

.arc-btn--ok{
    color:#ecfdf5;
    background:
        radial-gradient(circle at 0 0, rgba(74,222,128,.6), transparent 55%),
        linear-gradient(135deg,#16a34a,#22c55e,#4ade80);
    border:1px solid rgba(74,222,128,.85);
}

.arc-btn--no{
    color:#fef2f2;
    background:
        radial-gradient(circle at 0 0, rgba(248,113,113,.6), transparent 55%),
        linear-gradient(135deg,#dc2626,#f97316,#facc15);
    border:1px solid rgba(252,165,165,.9);
}

.arc-btn--ghost{
    color:#e5e7eb;
    background:rgba(15,23,42,.9);
    border:1px solid rgba(148,163,184,.7);
    box-shadow:0 14px 32px rgba(15,23,42,.95);
}

/* AGE GATE LAYOUT */

.arc-age-gate{
    min-height:100svh;
    display:grid;
    place-items:center;
    padding:2.4rem 1.8rem;
    background:
        radial-gradient(circle at top, rgba(34,197,94,.18), transparent 60%),
        radial-gradient(circle at bottom, rgba(56,189,248,.18), transparent 65%),
        #020617;
    color:#e5e7eb;
    text-align:center;
}

.arc-rule{
    height:1px;
    width:100%;
    background:linear-gradient(90deg,transparent,rgba(148,163,184,.9),transparent);
    opacity:.9;
    margin:1.3rem 0 1rem;
}

.login{
    color:#a5f3fc;
    text-decoration:none;
    border-bottom:1px dashed rgba(45,212,191,.8);
    padding-bottom:1px;
    transition:color var(--arc-transition-fast), border-color var(--arc-transition-fast), opacity var(--arc-transition-fast);
}
.login:hover{
    color:#e5e7eb;
    border-color:#e5e7eb;
    opacity:1;
}