@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700;800;900&display=swap');

/* =====================================================
   VARIABLES
===================================================== */

:root{
--bg:#050505;
--card:#0d0d0d;
--card2:#111;
--line:#242424;
--text:#f5f5f5;
--muted:#999;
--soft:#666;
--max:1180px;
--r:20px;
}

*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
-webkit-text-size-adjust:100%;
}

body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
overflow-x:hidden;
width:100%;
max-width:100vw;
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
letter-spacing: normal;
}

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

.wrap{
width:min(var(--max),92%);
margin:auto;
}


/* =====================================================
   SCROLLBAR
===================================================== */

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-track{
background:#050505;
}

::-webkit-scrollbar-thumb{
background:#333;
border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
background:#555;
}


/* =====================================================
   NAV
===================================================== */

nav{
position:sticky;
top:0;
z-index:100;
background:rgba(5,5,5,.86);
backdrop-filter:blur(18px);
border-bottom:1px solid var(--line);
}

.nav{
height:76px;
display:flex;
align-items:center;
justify-content:space-between;
}

/* =====================================================
   LOGO SS.ECOM
===================================================== */

.logo{
display:flex;
align-items:center;
text-decoration:none;
}

.logo img{
width:155px;
height:62px;
display:block;
object-fit:contain;
object-position:center;
border-radius:0;
background:transparent;
border:none;
transition:.35s ease;
}

/* Efecto al pasar el ratón */
.logo:hover img{
transform:scale(1.04);
filter:brightness(1.08);
box-shadow:none;
}

.menu{
display:flex;
gap:27px;
color:#bbb;
font-size:14px;
}

.menu a{
transition:.25s ease;
position:relative;
}

.menu a::after{
content:"";
position:absolute;
left:0;
bottom:-7px;
width:0;
height:1px;
background:white;
transition:.25s ease;
}

.menu a:hover{
color:white;
}

.menu a:hover::after{
width:100%;
}

.login{
border:1px solid #383838;
border-radius:11px;
padding:10px 15px;
font-weight:700;
font-size:13px;
transition:.25s ease;
}

.login:hover{
background:white;
color:#000;
transform:translateY(-2px);
box-shadow:0 8px 30px rgba(255,255,255,.12);
}


/* =====================================================
   HERO
===================================================== */

.hero{
min-height:700px;
display:flex;
align-items:center;
text-align:center;
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 50% 45%,rgba(255,255,255,.09),transparent 32%),
radial-gradient(circle at 15% 80%,rgba(255,255,255,.035),transparent 25%),
#050505;
}

.hero:before{
content:"";
position:absolute;
width:700px;
height:700px;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:radial-gradient(
circle,
rgba(255,255,255,.11),
transparent 65%
);
pointer-events:none;
animation:heroGlow 7s ease-in-out infinite;
}

.hero:after{
content:"";
position:absolute;
width:500px;
height:500px;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border-radius:50%;
border:1px solid rgba(255,255,255,.035);
animation:heroRing 14s linear infinite;
pointer-events:none;
}

.hero>*{
position:relative;
z-index:2;
}

@keyframes heroGlow{

0%,100%{
transform:translate(-50%,-50%) scale(1);
opacity:.7;
}

50%{
transform:translate(-50%,-50%) scale(1.2);
opacity:1;
}

}

@keyframes heroRing{

from{
transform:translate(-50%,-50%) rotate(0deg) scale(1);
}

to{
transform:translate(-50%,-50%) rotate(360deg) scale(1.15);
}

}


/* =====================================================
   HERO ENTRANCE
===================================================== */

.hero .pill{
animation:fadeUp .8s ease both;
}

.hero h1{
animation:fadeUp 1s .12s ease both;
}

.hero p{
animation:fadeUp 1s .25s ease both;
}

.hero .buttons{
animation:fadeUp 1s .38s ease both;
}

.hero .metrics{
animation:fadeUp 1s .52s ease both;
}

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(25px);
}

to{
opacity:1;
transform:translateY(0);
}

}


/* =====================================================
   PILL
===================================================== */

.pill{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 13px;
border:1px solid #333;
border-radius:999px;
background:#0e0e0e;
color:#bbb;
font-size:11px;
letter-spacing:1px;
text-transform:uppercase;
box-shadow:0 0 0 rgba(255,255,255,0);
transition:.3s ease;
}

.pill:hover{
border-color:#555;
box-shadow:0 0 30px rgba(255,255,255,.06);
transform:translateY(-2px);
}

.pill svg{
width:13px;
height:13px;
}


/* =====================================================
   HERO TITLE
===================================================== */

.hero h1{
font-size:clamp(46px,7vw,84px);
line-height:.94;
letter-spacing:-1.5px;
max-width:950px;
margin:22px auto 0;
}

.shine{
background:
linear-gradient(
110deg,
#fff 0%,
#777 45%,
#fff 55%,
#777 100%
);
background-size:250% auto;
color:transparent;
background-clip:text;
-webkit-background-clip:text;
animation:textShine 5s linear infinite;
}

@keyframes textShine{

0%{
background-position:200% center;
}

100%{
background-position:-50% center;
}

}

.serif-accent{
font-family:'Instrument Serif',Georgia,serif;
font-style:italic;
font-weight:400;
font-size:1.12em;
letter-spacing:-0.01em;
line-height:0.95;
display:inline-block;
background:linear-gradient(90deg,#ffffff 0%,#ffe082 25%,#ffd700 45%,#ffae00 65%,#fffdf0 85%,#ffffff 100%);
background-size:200% auto;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:goldTextShimmer 4s linear infinite;
filter:drop-shadow(0 0 16px rgba(255,184,0,.4));
}

.hero p{
max-width:720px;
color:var(--muted);
font-size:18px;
line-height:1.65;
margin:26px auto;
}


/* =====================================================
   BUTTONS
===================================================== */

.buttons{
display:flex;
gap:12px;
justify-content:center;
flex-wrap:wrap;
}

.btn{
padding:14px 20px;
border-radius:13px;
border:1px solid #333;
font-weight:800;
transition:.25s ease;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
position:relative;
overflow:hidden;
}

.btn::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:70%;
height:100%;
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.25),
transparent
);
transform:skewX(-20deg);
transition:.6s ease;
}

.btn:hover::before{
left:140%;
}

.btn:hover{
transform:translateY(-3px);
}

.primary{
background:#fff;
color:#000;
border-color:#fff;
box-shadow:0 8px 30px rgba(255,255,255,.05);
}

.primary:hover{
box-shadow:0 12px 45px rgba(255,255,255,.14);
}

.secondary{
background:#111;
}


/* =====================================================
   METRICS
===================================================== */

.metrics{
display:grid;
grid-template-columns:repeat(3,1fr);
margin-top:55px;
border:1px solid var(--line);
border-radius:18px;
overflow:hidden;
background:#0b0b0b;
}

.metric{
padding:22px;
border-right:1px solid var(--line);
transition:.3s ease;
}

.metric:last-child{
border:0;
}

.metric:hover{
background:#111;
}

.metric b{
display:block;
font-size:23px;
}

.metric span{
font-size:12px;
color:#777;
}


/* =====================================================
   SECTIONS
===================================================== */

section{
padding:90px 0;
position:relative;
overflow:hidden;
}

.head{
display:flex;
justify-content:space-between;
align-items:end;
gap:30px;
margin-bottom:35px;
position:relative;
z-index:3;
}

.eyebrow{
font-size:11px;
letter-spacing:2px;
color:#777;
text-transform:uppercase;
font-weight:800;
}

h2{
font-size:clamp(31px,4vw,48px);
letter-spacing:-0.3px;
margin:5px 0;
}

.desc{
max-width:570px;
color:var(--muted);
line-height:1.6;
}


/* =====================================================
   SCROLL PROGRESS BAR
===================================================== */
#scrollProgress{
position:fixed;
top:0;
left:0;
height:2.5px;
width:0%;
background:linear-gradient(90deg,#555 0%,#ffffff 50%,#888 100%);
box-shadow:0 0 10px rgba(255,255,255,0.7),0 0 20px rgba(255,255,255,0.3);
z-index:1000;
pointer-events:none;
transition:width .1s linear;
}

/* =====================================================
   STICKY NAV ENHANCED ON SCROLL
===================================================== */
nav{
transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}

nav.nav-scrolled{
background:rgba(4,4,4,.94);
border-bottom:1px solid rgba(255,255,255,.12);
box-shadow:0 10px 30px rgba(0,0,0,.7);
}

/* =====================================================
   SMOOTH SPRING SCROLL REVEAL ANIMATIONS (PREMIUM BLUR-IN)
===================================================== */
.reveal{
opacity:0;
transform:translateY(60px) scale(.95);
filter:blur(8px);
transition:
opacity .85s cubic-bezier(0.16,1,0.3,1),
transform .85s cubic-bezier(0.16,1,0.3,1),
filter .85s cubic-bezier(0.16,1,0.3,1),
box-shadow .85s ease;
will-change:opacity,transform,filter;
}

.reveal.visible,
.admin-body .reveal,
.auth-container .reveal,
.admin-tab-content .reveal{
opacity:1;
transform:translateY(0) scale(1);
filter:blur(0);
}

.reveal-left{
opacity:0;
transform:translateX(-65px) scale(.95);
filter:blur(8px);
transition:
opacity .85s cubic-bezier(0.16,1,0.3,1),
transform .85s cubic-bezier(0.16,1,0.3,1),
filter .85s cubic-bezier(0.16,1,0.3,1);
will-change:opacity,transform,filter;
}

.reveal-left.visible{
opacity:1;
transform:translateX(0) scale(1);
filter:blur(0);
}

.reveal-right{
opacity:0;
transform:translateX(65px) scale(.95);
filter:blur(8px);
transition:
opacity .85s cubic-bezier(0.16,1,0.3,1),
transform .85s cubic-bezier(0.16,1,0.3,1),
filter .85s cubic-bezier(0.16,1,0.3,1);
will-change:opacity,transform,filter;
}

.reveal-right.visible{
opacity:1;
transform:translateX(0) scale(1);
filter:blur(0);
}

.reveal-scale{
opacity:0;
transform:scale(.88) translateY(45px);
filter:blur(8px);
transition:
opacity .85s cubic-bezier(0.16,1,0.3,1),
transform .85s cubic-bezier(0.16,1,0.3,1),
filter .85s cubic-bezier(0.16,1,0.3,1);
will-change:opacity,transform,filter;
}

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

/* Stagger / Cascada automatica */
.grid .card:nth-child(1), .steps .step:nth-child(1), .trust-points .trust-point:nth-child(1), .metrics .metric:nth-child(1){
transition-delay:.06s;
}
.grid .card:nth-child(2), .steps .step:nth-child(2), .trust-points .trust-point:nth-child(2), .metrics .metric:nth-child(2){
transition-delay:.14s;
}
.grid .card:nth-child(3), .steps .step:nth-child(3), .trust-points .trust-point:nth-child(3), .metrics .metric:nth-child(3){
transition-delay:.22s;
}
.grid .card:nth-child(4), .steps .step:nth-child(4), .trust-points .trust-point:nth-child(4){
transition-delay:.30s;
}
.grid .card:nth-child(5), .steps .step:nth-child(5){
transition-delay:.38s;
}
.grid .card:nth-child(6), .steps .step:nth-child(6){
transition-delay:.46s;
}
.faq details:nth-child(1){ transition-delay:.05s; }
.faq details:nth-child(2){ transition-delay:.12s; }
.faq details:nth-child(3){ transition-delay:.19s; }
.faq details:nth-child(4){ transition-delay:.26s; }
.faq details:nth-child(5){ transition-delay:.33s; }
.faq details:nth-child(6){ transition-delay:.40s; }
.faq details:nth-child(7){ transition-delay:.47s; }

/* Back to Top Floating Button */
.back-to-top{
position:fixed;
bottom:25px;
right:25px;
width:42px;
height:42px;
border-radius:12px;
background:rgba(18,18,18,.85);
backdrop-filter:blur(12px);
border:1px solid #333;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:99;
opacity:0;
visibility:hidden;
transform:translateY(15px);
transition:all .3s cubic-bezier(0.16,1,0.3,1);
box-shadow:0 8px 25px rgba(0,0,0,.5);
}

.back-to-top.show{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.back-to-top:hover{
background:#ffffff;
color:#000000;
border-color:#ffffff;
transform:translateY(-4px) scale(1.05);
box-shadow:0 10px 30px rgba(255,255,255,.25);
}

@media(prefers-reduced-motion:reduce){
.reveal,.reveal-left,.reveal-right,.reveal-scale{
transition:none !important;
opacity:1 !important;
transform:none !important;
}
}


/* =====================================================
   CONFIANZA — FONDO TECNOLÓGICO
===================================================== */

.trust{
background:
radial-gradient(circle at 15% 20%,rgba(255,255,255,.06),transparent 25%),
radial-gradient(circle at 90% 80%,rgba(255,255,255,.035),transparent 28%),
#080808;
}

.trust::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
background-size:50px 50px;
mask-image:linear-gradient(to bottom,transparent,black 25%,black 75%,transparent);
-webkit-mask-image:linear-gradient(to bottom,transparent,black 25%,black 75%,transparent);
pointer-events:none;
}

.trust-grid{
display:grid;
grid-template-columns:1.2fr .8fr;
gap:20px;
position:relative;
z-index:2;
}

.trust-main{
border:1px solid #333;
border-radius:24px;
padding:35px;
background:
radial-gradient(circle at 90% 0,#252525,transparent 38%),
rgba(13,13,13,.92);
transition:.35s ease;
}

.trust-main:hover{
border-color:#4a4a4a;
transform:translateY(-3px);
}

.trust-main p{
color:var(--muted);
max-width:680px;
line-height:1.7;
}

.trust-main strong{
color:white;
}

.trust-points{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
margin-top:30px;
}

.trust-point{
border:1px solid var(--line);
background:#101010;
border-radius:15px;
padding:18px;
transition:.3s ease;
}

.trust-point:hover{
transform:translateY(-4px);
background:#151515;
border-color:#444;
}

.trust-point strong{
display:block;
font-size:20px;
margin-bottom:5px;
}

.trust-point span{
color:#777;
font-size:12px;
}

.trust-side{
border:1px solid var(--line);
border-radius:24px;
padding:30px;
background:#0d0d0d;
display:flex;
flex-direction:column;
justify-content:center;
transition:.35s ease;
}

.trust-side:hover{
border-color:#555;
transform:translateY(-3px);
}

.big-check{
width:54px;
height:54px;
display:grid;
place-items:center;
border-radius:16px;
background:#fff;
color:#000;
margin-bottom:22px;
}

.big-check svg{
width:25px;
}

.trust-side h3{
font-size:25px;
margin:0 0 10px;
}

.trust-side p{
color:var(--muted);
line-height:1.6;
}

.trust-side strong{
color:white;
}


/* =====================================================
   PROVEEDORES — FONDO PRODUCTOS / ECOMMERCE
===================================================== */

#proveedores{
background:
radial-gradient(circle at 10% 15%,rgba(255,255,255,.055),transparent 25%),
radial-gradient(circle at 90% 75%,rgba(255,255,255,.045),transparent 25%),
#060606;
}

#proveedores::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg,transparent 49.7%,rgba(255,255,255,.025) 50%,transparent 50.3%);
background-size:100px 100px;
opacity:.4;
pointer-events:none;
}


.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;
position:relative;
z-index:2;
}

.guides-row-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
width:calc((100% - 30px) * 2 / 3 + 15px);
max-width:100%;
margin:15px auto 0;
position:relative;
z-index:2;
}

@media (max-width: 900px){
.guides-row-grid{
grid-template-columns:1fr;
width:100%;
}
}

.guides-row-grid .card{
padding:20px 22px;
min-height:auto;
display:flex;
flex-direction:column;
justify-content:space-between;
}

.guides-row-grid .card .icon{
margin-bottom:10px;
}

.guides-row-grid .card .verified{
margin-bottom:10px;
}

.guides-row-grid .card h3{
margin:0 0 16px 0;
font-size:20px;
line-height:1.3;
}

.guides-row-grid .card .foot{
margin-top:auto;
padding-top:12px;
border-top:1px solid rgba(255,255,255,0.06);
}

.card{
background:
linear-gradient(145deg,#111,#0a0a0a);
border:1px solid var(--line);
border-radius:var(--r);
padding:24px;
transition:
transform .3s ease,
border-color .3s ease,
box-shadow .3s ease;
position:relative;
overflow:hidden;
}

.card::before{
content:"";
position:absolute;
width:180px;
height:180px;
right:-100px;
top:-100px;
border-radius:50%;
background:rgba(255,255,255,.04);
transition:.5s ease;
}

.card:hover::before{
width:300px;
height:300px;
}

.card:hover{
transform:translateY(-7px);
border-color:#4a4a4a;
box-shadow:0 18px 50px rgba(0,0,0,.35);
}

.icon{
height:48px;
width:48px;
display:grid;
place-items:center;
border-radius:14px;
background:#1a1a1a;
margin-bottom:27px;
transition:.35s ease;
}

.card:hover .icon{
transform:translateY(-3px) scale(1.06);
background:#202020;
}

.icon svg{
width:23px;
height:23px;
stroke:white;
}

.verified{
display:inline-flex;
align-items:center;
gap:6px;
border:1px solid #303030;
background:#151515;
color:#aaa;
border-radius:999px;
padding:5px 8px;
font-size:9px;
font-weight:800;
text-transform:uppercase;
}

.verified svg{
width:11px;
height:11px;
}

.card h3{
font-size:20px;
margin:14px 0 8px;
}

.card p{
color:var(--muted);
font-size:14px;
line-height:1.6;
min-height:90px;
}

.card p strong{
color:#fff;
}

.tags{
display:flex;
gap:6px;
flex-wrap:wrap;
margin:17px 0;
}

.tag{
border:1px solid #303030;
color:#aaa;
border-radius:999px;
padding:5px 8px;
font-size:10px;
transition:.25s ease;
}

.card:hover .tag{
border-color:#3d3d3d;
}

.foot{
border-top:1px solid #222;
padding-top:17px;
margin-top:20px;
display:flex;
justify-content:space-between;
align-items:center;
}

.card-price-group{
display:flex;
flex-direction:column;
gap:3px;
}

.price-strikethrough{
font-size:13px;
font-weight:700;
color:#c8c8c8;
text-decoration:line-through;
text-decoration-color:#f43f5e;
text-decoration-thickness:2px;
letter-spacing:0.1px;
white-space:nowrap;
opacity:.9;
}

.price{
font-weight:900;
font-size:17px;
color:#ffffff;
letter-spacing:-0.3px;
}

.mini{
padding:9px 12px;
border-radius:10px;
background:#fff;
color:#000;
font-weight:800;
font-size:11px;
transition:.25s ease;
}

.mini:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(255,255,255,.1);
}

.tech-number{
position:absolute;
top:18px;
right:18px;
font-size:12px;
font-weight:900;
color:#fff;
border:1px solid #333;
background:#151515;
padding:7px 9px;
border-radius:999px;
}

.authority{
text-align:center;
padding:35px 0 0;
position:relative;
z-index:2;
}

.authority p{
color:#777;
font-size:13px;
line-height:1.6;
}

.authority strong{
color:white;
}


/* =====================================================
   PACKS — FONDO PREMIUM
===================================================== */

#packs{
background:
radial-gradient(circle at 50% 0,rgba(255,255,255,.07),transparent 35%),
radial-gradient(circle at 0 100%,rgba(255,255,255,.025),transparent 30%),
#070707;
}

#packs::before{
content:"";
position:absolute;
width:700px;
height:700px;
border:1px solid rgba(255,255,255,.025);
border-radius:50%;
left:50%;
top:50%;
transform:translate(-50%,-50%);
box-shadow:
0 0 0 80px rgba(255,255,255,.008),
0 0 0 160px rgba(255,255,255,.006);
pointer-events:none;
}

.access-choice{
width:min(760px,100%);
margin:0 auto;
position:relative;
z-index:2;
}

.box{
background:#0d0d0d;
border:1px solid var(--line);
border-radius:22px;
padding:32px;
transition:.35s ease;
}

.box:hover{
border-color:#444;
}

.big{
min-height:520px;
background:
radial-gradient(circle at 80% 0,#292929,transparent 38%),
#0d0d0d;
position:relative;
overflow:hidden;
border-color:#393939;
}

.big::before{
content:"";
position:absolute;
inset:-2px;
border-radius:24px;
padding:1px;
background:
linear-gradient(
120deg,
transparent 15%,
rgba(255,255,255,.35),
transparent 35%,
transparent 65%,
rgba(255,255,255,.18),
transparent 85%
);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
background-size:250% 250%;
animation:borderFlow 6s linear infinite;
pointer-events:none;
}

@keyframes borderFlow{

0%{
background-position:200% 50%;
}

100%{
background-position:-50% 50%;
}

}

.big::after{
content:"";
position:absolute;
width:250px;
height:250px;
right:-130px;
bottom:-130px;
border-radius:50%;
background:rgba(255,255,255,.045);
animation:accessGlow 5s ease-in-out infinite;
pointer-events:none;
}

@keyframes accessGlow{

0%,100%{
transform:scale(1);
opacity:.5;
}

50%{
transform:scale(1.3);
opacity:1;
}

}

.big>*{
position:relative;
z-index:2;
}

.big:hover{
transform:translateY(-5px);
box-shadow:
0 25px 80px rgba(0,0,0,.5),
0 0 50px rgba(255,255,255,.025);
}

.popular{
display:inline-flex;
padding:7px 10px;
border:1px solid #555;
border-radius:999px;
color:#ddd;
font-size:9px;
font-weight:900;
letter-spacing:1.2px;
}

.box h3{
font-size:32px;
margin:15px 0 10px;
}

.box p{
color:var(--muted);
line-height:1.6;
}

.box p strong{
color:white;
}

.access-includes{
margin-top:24px;
}

.include-title{
font-size:11px;
font-weight:900;
letter-spacing:1.5px;
text-transform:uppercase;
color:#777;
margin-bottom:12px;
}

.big .check{
display:grid;
gap:7px;
margin:0;
color:#ddd;
font-size:13px;
}

.big .check div{
display:flex;
align-items:center;
gap:9px;
padding:6px 0;
transition:.25s ease;
}

.big .check div:hover{
transform:translateX(5px);
color:white;
}

.big .check svg{
width:15px;
height:15px;
flex-shrink:0;
}

.all-access-value{
display:flex;
align-items:center;
justify-content:space-between;
margin-top:25px;
padding:17px;
border:1px solid #333;
border-radius:15px;
background:#111;
transition:.3s ease;
}

.all-access-value:hover{
border-color:#555;
transform:translateX(3px);
}

.all-access-value span{
display:block;
font-size:9px;
letter-spacing:1.5px;
color:#777;
font-weight:900;
margin-bottom:4px;
}

.all-access-value strong{
font-size:13px;
}

.value-arrow{
width:34px;
height:34px;
display:grid;
place-items:center;
border-radius:10px;
background:#fff;
color:#000;
flex-shrink:0;
}

.value-arrow svg{
width:17px;
height:17px;
}

.big>.primary{
animation:purchasePulse 3s ease-in-out infinite;
}

@keyframes purchasePulse{

0%,100%{
box-shadow:0 8px 30px rgba(255,255,255,.04);
}

50%{
box-shadow:0 8px 45px rgba(255,255,255,.13);
}

}

.purchase-note{
text-align:center;
margin-top:12px;
font-size:10px;
color:#666;
}


/* =====================================================
   PACK PERSONALIZADO
===================================================== */

.custom-pack{
background:linear-gradient(155deg,#181818 0%,#0d0d0d 60%,#070707 100%);
border:1px solid #3d3d3d;
box-shadow:0 10px 40px rgba(0,0,0,.6),0 0 35px rgba(255,255,255,.03);
position:relative;
overflow:hidden;
}

.custom-pack::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:2px;
background:linear-gradient(90deg,transparent,#ffffff,transparent);
pointer-events:none;
}

.discount-floating-badge{
display:inline-flex;
align-items:center;
gap:6px;
background:linear-gradient(135deg,#fff 0%,#e0e0e0 100%);
color:#000;
padding:6px 14px;
border-radius:999px;
font-size:11px;
font-weight:900;
letter-spacing:0.8px;
text-transform:uppercase;
box-shadow:0 4px 18px rgba(255,255,255,.25);
margin-bottom:12px;
animation:pulseGlow 2.5s infinite;
}

@keyframes pulseGlow{
0%,100%{
transform:scale(1);
box-shadow:0 4px 18px rgba(255,255,255,.25);
}
50%{
transform:scale(1.03);
box-shadow:0 6px 25px rgba(255,255,255,.45);
}
}

.discount-offer-banner{
background:rgba(255,255,255,.05);
border:1px dashed rgba(255,255,255,.28);
border-radius:13px;
padding:13px 16px;
margin:16px 0 20px;
display:flex;
align-items:center;
gap:12px;
}

.discount-offer-banner .offer-icon{
font-size:24px;
line-height:1;
}

.discount-offer-banner .offer-title{
color:#fff;
font-weight:800;
font-size:13px;
display:block;
}

.discount-offer-banner .offer-sub{
color:#aaa;
font-size:11px;
display:block;
margin-top:2px;
}

.custom-pack h3{
font-size:26px;
}

.custom-pack-description{
font-size:13px;
margin-bottom:16px;
color:#bbb;
}

.provider-selector{
display:grid;
gap:8px;
margin-top:16px;
}

.provider-option{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:12px 14px;
border:1px solid #292929;
border-radius:12px;
background:#101010;
cursor:pointer;
transition:.25s ease;
}

.provider-option:hover{
border-color:#555;
transform:translateX(3px);
}

.provider-option.selected{
border-color:#fff;
background:#181818;
box-shadow:0 0 20px rgba(255,255,255,.05);
}

.provider-option.disabled{
opacity:.45;
cursor:not-allowed;
}

.provider-left{
display:flex;
align-items:center;
gap:10px;
}

.provider-left input{
width:16px;
height:16px;
accent-color:white;
cursor:pointer;
}

.provider-name{
font-size:13px;
font-weight:700;
}

.provider-price{
font-size:12px;
color:#888;
white-space:nowrap;
}

.discount-progress-container{
margin-top:18px;
background:#111;
border:1px solid #282828;
border-radius:12px;
padding:12px 14px;
}

.discount-progress-header{
display:flex;
justify-content:space-between;
align-items:center;
font-size:12px;
margin-bottom:8px;
}

.discount-progress-header span{
color:#bbb;
}

.discount-progress-header strong{
color:#fff;
font-weight:800;
}

.discount-progress-bar{
width:100%;
height:7px;
background:#222;
border-radius:999px;
overflow:hidden;
position:relative;
}

.discount-progress-fill{
height:100%;
width:0%;
background:linear-gradient(90deg,#888,#fff);
border-radius:999px;
transition:width 0.35s ease, background 0.35s ease;
}

.discount-progress-fill.complete{
background:linear-gradient(90deg,#4ade80,#22c55e);
box-shadow:0 0 12px rgba(34,197,94,0.6);
}

.discount-status-msg{
font-size:11px;
color:#888;
margin-top:6px;
text-align:center;
transition:color 0.25s ease;
}

.discount-status-msg.unlocked{
color:#4ade80;
font-weight:700;
}

.pack-price{
margin-top:18px;
padding:18px 20px;
border-radius:14px;
background:linear-gradient(180deg,#161616 0%,#101010 100%);
border:1px solid #383838;
box-shadow:0 8px 24px rgba(0,0,0,.4);
transition:border-color .3s ease, box-shadow .3s ease;
}

.pack-price.active-discount{
border-color:rgba(255,255,255,.45);
box-shadow:0 8px 30px rgba(255,255,255,.08);
}

.price-row{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:8px;
font-size:13px;
}

.original-price{
color:#888;
font-size:14px;
text-decoration:line-through;
}

.discount-price-container{
display:flex;
align-items:center;
gap:10px;
}

.discount-tag-pill{
background:#22c55e;
color:#000;
font-size:11px;
font-weight:900;
padding:3px 8px;
border-radius:6px;
letter-spacing:0.5px;
display:none;
}

.discount-price{
font-size:28px;
font-weight:900;
color:#fff;
letter-spacing:-0.5px;
}

.saving{
display:none;
align-items:center;
justify-content:center;
gap:6px;
margin-top:12px;
padding:10px 14px;
border-radius:10px;
background:linear-gradient(135deg,#ffffff 0%,#f0f0f0 100%);
color:#000;
font-size:12px;
font-weight:900;
letter-spacing:0.5px;
text-align:center;
box-shadow:0 4px 20px rgba(255,255,255,.2);
animation:bounceIn .4s cubic-bezier(0.175,0.885,0.32,1.275);
}

@keyframes bounceIn{
from{
opacity:0;
transform:scale(0.92);
}
to{
opacity:1;
transform:scale(1);
}
}

.pack-button{
width:100%;
margin-top:14px;
opacity:.45;
pointer-events:none;
font-weight:800;
font-size:14px;
padding:15px;
text-align:center;
transition:all .3s ease;
}

.pack-button.active{
opacity:1;
pointer-events:auto;
background:#ffffff;
color:#000;
box-shadow:0 8px 25px rgba(255,255,255,.25);
}

.pack-button.active:hover{
transform:translateY(-2px) scale(1.01);
box-shadow:0 12px 35px rgba(255,255,255,.35);
}

.pack-warning{
text-align:center;
font-size:11px;
color:#888;
margin-top:9px;
}


/* =====================================================
   COMO FUNCIONA — GRÁFICA ECOMMERCE
===================================================== */

.steps-section{
background:
radial-gradient(circle at 50% 50%,rgba(255,255,255,.04),transparent 45%),
#060606;
}

.steps-section::before{
content:"";
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:55px 55px;
mask-image:linear-gradient(
to bottom,
transparent,
black 18%,
black 82%,
transparent
);
-webkit-mask-image:linear-gradient(
to bottom,
transparent,
black 18%,
black 82%,
transparent
);
pointer-events:none;
}

.steps-section::after{
content:"";
position:absolute;
left:3%;
right:3%;
top:50%;
height:280px;
transform:translateY(-50%);
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='lineGrad' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='white' stop-opacity='0'/%3E%3Cstop offset='0.15' stop-color='white' stop-opacity='0.15'/%3E%3Cstop offset='0.55' stop-color='white' stop-opacity='0.3'/%3E%3Cstop offset='0.68' stop-color='white' stop-opacity='0.45'/%3E%3Cstop offset='0.74' stop-color='%23fbbf24' stop-opacity='0.9'/%3E%3Cstop offset='0.88' stop-color='%23ffd700' stop-opacity='1'/%3E%3Cstop offset='1' stop-color='%23ffb800' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='areaGrad' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='white' stop-opacity='0'/%3E%3Cstop offset='0.65' stop-color='white' stop-opacity='0.02'/%3E%3Cstop offset='0.74' stop-color='%23fbbf24' stop-opacity='0.09'/%3E%3Cstop offset='0.9' stop-color='%23ffd700' stop-opacity='0.18'/%3E%3Cstop offset='1' stop-color='%23ffb800' stop-opacity='0.28'/%3E%3C/linearGradient%3E%3ClinearGradient id='goldGlowLine' x1='0.68' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23ffd700' stop-opacity='0'/%3E%3Cstop offset='0.4' stop-color='%23ffd700' stop-opacity='0.65'/%3E%3Cstop offset='1' stop-color='%23ffb800' stop-opacity='0.9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 245 C100 238 130 220 205 225 C290 232 320 190 390 198 C465 206 490 178 560 184 C635 190 675 130 735 145 C805 162 820 110 875 120 C935 132 955 75 1010 88 C1070 103 1110 52 1200 30 L1200 300 L0 300 Z' fill='url(%23areaGrad)'/%3E%3Cpath d='M0 245 C100 238 130 220 205 225 C290 232 320 190 390 198 C465 206 490 178 560 184 C635 190 675 130 735 145 C805 162 820 110 875 120 C935 132 955 75 1010 88 C1070 103 1110 52 1200 30' fill='none' stroke='url(%23lineGrad)' stroke-width='4.5' stroke-linecap='round'/%3E%3Cpath d='M805 162 C820 110 875 120 935 132 C955 75 1010 88 C1070 103 1110 52 1200 30' fill='none' stroke='url(%23goldGlowLine)' stroke-width='9' opacity='0.55' stroke-linecap='round'/%3E%3Ccircle cx='1200' cy='30' r='6' fill='%23ffd700'/%3E%3Ccircle cx='1200' cy='30' r='14' fill='%23ffd700' opacity='0.35'/%3E%3C/svg%3E")
center/100% 100% no-repeat;
opacity:.95;
pointer-events:none;
animation:chartFloat 7s ease-in-out infinite;
}

.steps-section>*{
position:relative;
z-index:2;
}

@keyframes chartFloat{

0%,100%{
transform:translateY(-50%) translateX(0);
opacity:.65;
}

50%{
transform:translateY(-52%) translateX(8px);
opacity:.9;
}

}

.steps{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
}

.step{
padding:23px;
border:1px solid var(--line);
border-radius:17px;
background:rgba(13,13,13,.9);
backdrop-filter:blur(8px);
transition:.3s ease;
}

.step:hover{
transform:translateY(-5px);
border-color:#444;
background:rgba(17,17,17,.95);
box-shadow:0 18px 45px rgba(0,0,0,.3);
}

.n{
font-size:11px;
color:#666;
}

.step h3{
margin:30px 0 5px;
}

.step p{
color:var(--muted);
font-size:13px;
line-height:1.5;
}


/* =====================================================
   FAQ
===================================================== */

#faq{
background:
radial-gradient(circle at 50% 0,rgba(255,255,255,.045),transparent 35%),
#070707;
}

.faq{
max-width:850px;
margin:auto;
}

.faq details{
border-top:1px solid var(--line);
padding:20px 18px;
border-radius:14px;
margin-bottom:10px;
background:rgba(255, 255, 255, 0.015);
border:1px solid rgba(255, 255, 255, 0.07);
transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
overflow:hidden;
}

.faq details:last-child{
margin-bottom:0;
}

.faq details:hover{
background:rgba(255, 255, 255, 0.035);
border-color:rgba(255, 255, 255, 0.14);
}

.faq details[open]{
background:rgba(255, 255, 255, 0.04);
border-color:rgba(255, 255, 255, 0.16);
box-shadow:0 12px 32px -8px rgba(0,0,0,0.5);
}

.faq summary{
cursor:pointer;
font-weight:700;
font-size:16px;
display:flex;
justify-content:space-between;
align-items:center;
list-style:none;
user-select:none;
gap:16px;
transition:color .2s ease;
}

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

.faq summary:focus-visible{
outline:none;
color:#fff;
}

.faq-toggle-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:32px;
height:32px;
border-radius:50%;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
color:var(--muted);
transition:transform .35s cubic-bezier(0.34, 1.56, 0.64, 1), background .25s ease, border-color .25s ease, color .25s ease;
flex-shrink:0;
}

.faq details:hover .faq-toggle-icon{
background:rgba(255,255,255,.1);
border-color:rgba(255,255,255,.25);
color:#fff;
}

.faq details[open] .faq-toggle-icon{
transform:rotate(180deg);
background:rgba(255,255,255,.15);
border-color:rgba(255,255,255,.3);
color:#fff;
}

.faq p{
color:var(--muted);
font-size:14.5px;
line-height:1.65;
margin-top:14px;
padding-top:12px;
border-top:1px solid rgba(255,255,255,.05);
}


/* =====================================================
   CTA
===================================================== */

.cta-section{
background:
radial-gradient(circle at 50% 50%,rgba(255,255,255,.045),transparent 45%),
#050505;
}

.cta{
padding:65px 25px;
text-align:center;
border:1px solid #333;
border-radius:24px;
background:
radial-gradient(circle at 50% 0,#292929,transparent 55%),
#101010;
position:relative;
overflow:hidden;
transition:.35s ease;
}

.cta::before{
content:"";
position:absolute;
width:400px;
height:400px;
left:50%;
top:-300px;
transform:translateX(-50%);
border-radius:50%;
background:rgba(255,255,255,.06);
filter:blur(30px);
animation:ctaGlow 5s ease-in-out infinite;
}

@keyframes ctaGlow{

0%,100%{
transform:translateX(-50%) scale(1);
}

50%{
transform:translateX(-50%) scale(1.3);
}

}

.cta>*{
position:relative;
z-index:2;
}

.cta:hover{
border-color:#555;
}

.cta h2{
max-width:750px;
margin:8px auto;
}

.cta p{
color:var(--muted);
max-width:600px;
margin:15px auto 28px;
line-height:1.6;
}

/* =====================================================
   NEWSLETTER SUBSCRIPTION FORM
===================================================== */
.newsletter-form{
  max-width:540px;
  margin:0 auto 16px;
  display:flex;
  gap:10px;
  position:relative;
  z-index:3;
}

.newsletter-input-group{
  flex:1;
  position:relative;
  display:flex;
  align-items:center;
}

.newsletter-icon{
  position:absolute;
  left:16px;
  color:#777;
  pointer-events:none;
}

.newsletter-input{
  width:100%;
  padding:14px 16px 14px 44px;
  background:#141414;
  border:1px solid #333;
  border-radius:12px;
  color:#fff;
  font-size:14px;
  outline:none;
  transition:all .25s ease;
}

.newsletter-input:focus{
  border-color:#fbbf24;
  background:#181818;
  box-shadow:0 0 0 3px rgba(251,191,36,.15);
}

.newsletter-input::placeholder{
  color:#666;
}

.newsletter-btn{
  padding:14px 22px;
  border-radius:12px;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  border:none;
  background:#fff;
  color:#000;
  transition:all .25s ease;
}

.newsletter-btn:hover{
  background:#e5e5e5;
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(255,255,255,.15);
}

.newsletter-status{
  font-size:13px;
  margin-bottom:16px;
  min-height:20px;
  display:none;
  text-align:center;
}

.newsletter-status.success{
  display:block;
  color:#22c55e;
  font-weight:700;
}

.newsletter-status.error{
  display:block;
  color:#ef4444;
  font-weight:600;
}

.newsletter-features{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
  margin-top:14px;
}

.newsletter-feature{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:#999;
}

.newsletter-feature span{
  color:#bbb;
}

@media(max-width:640px){
  .newsletter-form{
    flex-direction:column;
  }
  .newsletter-btn{
    width:100%;
    justify-content:center;
  }
  .newsletter-features{
    flex-direction:column;
    gap:8px;
    align-items:flex-start;
    padding-left:15px;
  }
}


/* =====================================================
   FOOTER (PRODUCTION READY & PROFESSIONAL)
===================================================== */

footer.site-footer, footer{
  border-top:1px solid rgba(255, 255, 255, 0.08);
  padding:70px 0 35px;
  color:var(--muted, #a1a1aa);
  font-size:13px;
  background:radial-gradient(circle at 50% 0, rgba(255,255,255,.025), transparent 40%), #050505;
  position:relative;
  z-index:10;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr 1fr;
  gap:40px;
  margin-bottom:45px;
}

.footer-col{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.footer-brand{
  display:inline-block;
}

.footer-logo{
  height:44px;
  width:auto;
  display:block;
  object-fit:contain;
  background:transparent;
  transition:transform .25s ease, opacity .25s ease;
}

.footer-logo:hover{
  transform:scale(1.03);
  opacity:.9;
}

.footer-desc{
  color:#8e8e93;
  font-size:13.5px;
  line-height:1.6;
  max-width:340px;
  margin:0;
}

.footer-badges{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:4px;
}

.footer-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#d4d4d8;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  padding:6px 12px;
  border-radius:20px;
  width:fit-content;
}

.footer-title{
  color:#fff;
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.8px;
  margin:0 0 6px 0;
}

.footer-links{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:11px;
}

.footer-links a{
  color:#9ca3af;
  text-decoration:none;
  font-size:13.5px;
  transition:color .2s ease, transform .2s ease;
  display:inline-block;
  cursor:pointer;
}

.footer-links a:hover{
  color:#fff;
  transform:translateX(3px);
}

.btn-cookie-settings{
  background:none;
  border:none;
  padding:0;
  font:inherit;
  color:#9ca3af !important;
  cursor:pointer;
  text-align:left;
  transition:color .2s ease, transform .2s ease;
}

.btn-cookie-settings:hover{
  color:#fff !important;
  transform:translateX(3px);
}

.footer-divider{
  height:1px;
  background:rgba(255,255,255,.07);
  width:100%;
  margin-bottom:30px;
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:30px;
  flex-wrap:wrap;
}

.footer-bottom-left{
  flex:1;
  min-width:280px;
}

.footer-bottom-left p{
  margin:0 0 6px 0;
  color:#71717a;
  font-size:12.5px;
}

.footer-disclaimer{
  font-size:11.5px !important;
  line-height:1.5 !important;
  color:#52525b !important;
  max-width:650px;
}

.footer-payment-methods{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.payment-card-logo{
  height:28px;
  width:auto;
  border-radius:5px;
  object-fit:contain;
  background:#fff;
  padding:0;
  box-shadow:0 2px 8px rgba(0,0,0,0.35);
  transition:transform .2s ease, opacity .2s ease, box-shadow .2s ease;
  display:block;
}

.payment-card-logo:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,0.6);
  opacity:0.95;
}



/* =====================================================
   LEGAL PAGES STYLES
===================================================== */
.legal-container{
  max-width:850px;
  margin:0 auto;
  padding:40px 20px 80px;
}

.legal-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border:1px solid rgba(255, 255, 255, 0.08);
  border-radius:20px;
  padding:40px;
  color:#d4d4d8;
  font-size:15px;
  line-height:1.75;
}

.legal-card h2{
  color:#fff;
  font-size:20px;
  font-weight:700;
  letter-spacing:0;
  margin:32px 0 12px 0;
  padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,0.07);
}

.legal-card h2:first-child{
  margin-top:0;
}

.legal-card p{
  margin:0 0 16px 0;
  color:#a1a1aa;
}

.legal-card ul, .legal-card ol{
  margin:0 0 20px 24px;
  color:#a1a1aa;
}

.legal-card li{
  margin-bottom:8px;
}

.legal-card strong{
  color:#fff;
}

.legal-card a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
}

.legal-meta{
  display:inline-block;
  font-size:12.5px;
  color:#71717a;
  margin-bottom:24px;
  padding:4px 10px;
  background:rgba(255,255,255,0.03);
  border-radius:6px;
}

/* =====================================================
   COOKIE BANNER & MODAL (RGPD / GDPR)
===================================================== */
.cookie-banner{
  position:fixed;
  bottom:24px;
  left:24px;
  right:24px;
  max-width:540px;
  margin:0 auto;
  background:rgba(18, 18, 20, 0.94);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255, 255, 255, 0.14);
  border-radius:18px;
  padding:22px 24px;
  box-shadow:0 20px 40px -10px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.05);
  z-index:99999;
  transform:translateY(120%);
  opacity:0;
  transition:transform .4s cubic-bezier(0.16, 1, 0.3, 1), opacity .4s ease;
}

.cookie-banner.visible{
  transform:translateY(0);
  opacity:1;
}

.cookie-banner-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.cookie-banner-title{
  color:#fff;
  font-weight:700;
  font-size:15px;
}

.cookie-banner-text{
  color:#a1a1aa;
  font-size:13px;
  line-height:1.55;
  margin:0 0 18px 0;
}

.cookie-banner-text a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:2px;
}

.cookie-banner-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.cookie-btn{
  padding:9px 16px;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:all .2s ease;
  border:none;
}

.cookie-btn-primary{
  background:#fff;
  color:#000;
}

.cookie-btn-primary:hover{
  background:#e4e4e7;
  transform:translateY(-1px);
}

.cookie-btn-secondary{
  background:rgba(255,255,255,0.08);
  color:#d4d4d8;
  border:1px solid rgba(255,255,255,0.12);
}

.cookie-btn-secondary:hover{
  background:rgba(255,255,255,0.15);
  color:#fff;
}

.cookie-btn-link{
  background:transparent;
  color:#a1a1aa;
  text-decoration:underline;
  font-size:12.5px;
  padding:9px 8px;
}

.cookie-btn-link:hover{
  color:#fff;
}

/* Cookie Settings Modal */
.cookie-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}

.cookie-modal-overlay.active{
  opacity:1;
  visibility:visible;
}

.cookie-modal{
  background:#121214;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:20px;
  max-width:540px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  padding:28px;
  box-shadow:0 25px 50px -12px rgba(0,0,0,0.8);
  transform:scale(0.95);
  transition:transform .3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-modal-overlay.active .cookie-modal{
  transform:scale(1);
}

.cookie-modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}

.cookie-modal-head h3{
  color:#fff;
  font-size:18px;
  margin:0;
}

.cookie-modal-close{
  background:rgba(255,255,255,0.06);
  border:none;
  color:#a1a1aa;
  width:32px;
  height:32px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.2s ease;
}

.cookie-modal-close:hover{
  background:rgba(255,255,255,0.15);
  color:#fff;
}

.cookie-group{
  border-top:1px solid rgba(255,255,255,0.08);
  padding:16px 0;
}

.cookie-group-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
}

.cookie-group-title{
  color:#fff;
  font-weight:600;
  font-size:14.5px;
}

.cookie-group-desc{
  color:#8e8e93;
  font-size:12.5px;
  line-height:1.5;
  margin:0;
}

.cookie-toggle{
  position:relative;
  display:inline-block;
  width:42px;
  height:24px;
}

.cookie-toggle input{
  opacity:0;
  width:0;
  height:0;
}

.cookie-slider{
  position:absolute;
  cursor:pointer;
  inset:0;
  background-color:rgba(255,255,255,0.15);
  transition:.3s;
  border-radius:24px;
}

.cookie-slider:before{
  position:absolute;
  content:"";
  height:18px;
  width:18px;
  left:3px;
  bottom:3px;
  background-color:white;
  transition:.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius:50%;
}

.cookie-toggle input:checked + .cookie-slider{
  background-color:#22c55e;
}

.cookie-toggle input:disabled + .cookie-slider{
  opacity:0.6;
  cursor:not-allowed;
}

.cookie-toggle input:checked + .cookie-slider:before{
  transform:translateX(18px);
}

.cookie-modal-footer{
  margin-top:20px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}


/* =====================================================
   MOBILE
===================================================== */

/* =====================================================
   NAV ACTIONS & MOBILE HAMBURGER TOGGLE
===================================================== */
.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.nav-mobile-toggle{
  display:none;
  width:42px;
  height:42px;
  border-radius:10px;
  background:#141414;
  border:1px solid #2a2a2a;
  color:#fff;
  cursor:pointer;
  place-items:center;
  transition:all .25s ease;
}

.nav-mobile-toggle:hover{
  background:#1f1f1f;
  border-color:#444;
}

/* =====================================================
   MOBILE NAVIGATION DRAWER & BACKDROP
===================================================== */
.mobile-nav-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(8px);
  z-index:998;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease,visibility .35s ease;
}

.mobile-nav-backdrop.open{
  opacity:1;
  visibility:visible;
}

.mobile-nav-drawer{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width:300px;
  max-width:85vw;
  background:#0c0c0c;
  border-right:1px solid #242424;
  z-index:999;
  transform:translateX(-100%);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:24px 20px;
  box-shadow:20px 0 50px rgba(0,0,0,.8);
}

.mobile-nav-drawer.open{
  transform:translateX(0);
}

.mobile-nav-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:20px;
  border-bottom:1px solid #1c1c1c;
}

.mobile-nav-logo img{
  width:130px;
  height:auto;
  display:block;
}

.mobile-nav-close{
  width:36px;
  height:36px;
  border-radius:8px;
  background:#181818;
  border:1px solid #282828;
  color:#888;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:all .2s ease;
}

.mobile-nav-close:hover{
  color:#fff;
  background:#222;
}

.mobile-menu-links{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:24px 0;
  flex:1;
  overflow-y:auto;
}

.mobile-menu-links a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:12px;
  color:#aaa;
  text-decoration:none;
  font-size:15px;
  font-weight:600;
  transition:all .2s ease;
}

.mobile-menu-links a svg{
  width:18px;
  height:18px;
  color:#777;
  transition:color .2s ease;
}

.mobile-menu-links a:hover{
  color:#fff;
  background:#141414;
}

.mobile-menu-links a.active{
  color:#fff;
  background:linear-gradient(90deg,rgba(255,255,255,.08),transparent);
  border-left:3px solid #fbbf24;
}

.mobile-menu-links a.active svg{
  color:#fbbf24;
}

.mobile-nav-footer{
  padding-top:18px;
  border-top:1px solid #1c1c1c;
}

.mobile-nav-cta{
  width:100%;
  padding:14px;
  justify-content:center;
  border-radius:12px;
  font-weight:800;
}

/* =====================================================
   FULL RESPONSIVE MEDIA QUERIES
===================================================== */
@media(max-width:850px){
  /* Eliminate horizontal overflow from reveal animations on mobile */
  .reveal-left{
    transform:translateY(35px) scale(.96);
  }
  .reveal-left.visible{
    transform:translateY(0) scale(1);
  }
  .reveal-right{
    transform:translateY(35px) scale(.96);
  }
  .reveal-right.visible{
    transform:translateY(0) scale(1);
  }

  .menu{
    display:none !important;
  }
  .nav-mobile-toggle{
    display:grid;
  }
  .nav{
    height:68px;
  }
  .grid,
  .steps,
  .trust-grid{
    grid-template-columns:1fr !important;
    gap:28px;
  }
  .metrics{
    grid-template-columns:1fr;
  }
  .metric{
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:20px 0;
  }
  .metric:last-child{
    border-bottom:0;
  }
  .head{
    display:block;
  }
  .desc{
    margin-top:10px;
  }
  .trust-points{
    grid-template-columns:repeat(2,1fr);
  }
  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:32px;
  }
  .brand-col{
    grid-column:1 / -1;
  }
  .footer-bottom{
    flex-direction:column;
    gap:20px;
  }
  .big{
    min-height:auto;
  }
  .access-choice{
    width:100%;
  }
  .steps-section::after{
    left:-20%;
    right:-20%;
    width:140%;
    opacity:.4;
  }
}

@media(max-width:640px){
  .wrap{
    padding-left:16px;
    padding-right:16px;
  }
  .nav{
    height:64px;
  }
  .logo img{
    width:125px;
    height:auto;
  }
  .nav-cart-btn{
    padding:8px 12px;
    font-size:12px;
  }
  .hero{
    min-height:auto;
    padding:50px 0 60px;
  }
  .hero h1{
    font-size:clamp(28px, 8vw, 40px);
    letter-spacing:-1px;
    line-height:1.15;
  }
  .hero p{
    font-size:14.5px;
    line-height:1.55;
    margin:14px auto 26px;
  }
  .hero .buttons{
    flex-direction:column;
    width:100%;
    gap:10px;
  }
  .hero .buttons .btn{
    width:100%;
    justify-content:center;
    padding:16px;
    min-height:48px;
  }
  .page-hero{
    padding:45px 0 25px;
  }
  .page-hero h1{
    font-size:clamp(26px, 7vw, 36px);
    letter-spacing:-1px;
  }
  section{
    padding:55px 0;
  }
  .card{
    padding:20px;
    border-radius:16px;
  }
  .card .foot{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .card .mini.btn-add-cart{
    padding:10px 18px;
    min-height:42px;
    font-size:13px;
  }
  .all-access-box{
    padding:20px 16px;
    border-radius:18px;
  }
  .all-access-headline h3{
    font-size:22px;
  }
  .all-access-grid{
    grid-template-columns:1fr;
    gap:8px;
  }
  .access-card-item{
    padding:10px 12px;
  }
  .all-access-pricing{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding:14px 16px;
  }
  .pricing-right{
    width:100%;
    justify-content:space-between;
  }
  .all-access-cta-btn{
    padding:16px;
    font-size:14px;
    min-height:50px;
  }
  .all-access-guarantees{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .discount-offer-banner{
    flex-direction:column;
    text-align:left;
    align-items:flex-start;
    gap:10px;
    padding:14px;
  }
  .provider-selector{
    gap:8px;
  }
  .provider-option{
    padding:12px 14px;
    min-height:48px;
  }
  .box{
    padding:20px 16px;
    border-radius:18px;
  }
  .cta{
    padding:40px 18px;
    border-radius:18px;
  }
  .newsletter-form{
    flex-direction:column;
    gap:10px;
  }
  .newsletter-input{
    padding:14px 16px 14px 42px;
  }
  .newsletter-btn{
    width:100%;
    justify-content:center;
    padding:15px;
    min-height:48px;
  }
  .newsletter-features{
    flex-direction:column;
    gap:8px;
    align-items:flex-start;
  }
  .reviews-summary{
    grid-template-columns:repeat(2,1fr);
    padding:18px 14px;
    gap:16px;
  }
  .reviews-grid{
    grid-template-columns:1fr;
  }
  .review-card{
    padding:20px 16px;
  }
  .footer-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .cart-drawer{
    width:100%;
    max-width:100%;
  }
}

@media(max-width:420px){
  .trust-points{
    grid-template-columns:1fr;
  }
  .reviews-summary{
    grid-template-columns:1fr;
  }
  .announcement-badge{
    font-size:9.5px;
  }
  .announcement-text{
    font-size:12px;
  }
}

/* =====================================================
   REDUCED MOTION
===================================================== */
@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

/* =====================================================
   ACTIVE NAV LINK
===================================================== */
.menu a.active{
    color:#fff;
    font-weight:600;
}


/* =====================================================
   ACTIVE NAV LINK & PAGE HERO
===================================================== */
.menu a.active{
  color: #fff !important;
  font-weight: 600;
}
.menu a.active::after{
  width: 100% !important;
}

/* =====================================================
   SHINY GOLDEN PACKS NAV LINK HIGHLIGHT
===================================================== */
.menu a[href*="packs"],
.menu a.nav-packs {
  color: #ffd700 !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #ffffff 0%, #ffe082 25%, #ffd700 50%, #ffae00 75%, #ffffff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.45));
  animation: navGoldShimmer 4s ease infinite;
}

@keyframes navGoldShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.menu a[href*="packs"]::after,
.menu a.nav-packs::after {
  background: linear-gradient(90deg, #ffd700 0%, #fff8db 50%, #ffd700 100%) !important;
  height: 2px !important;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
  border-radius: 2px;
}

.menu a[href*="packs"]:hover::after,
.menu a.nav-packs:hover::after {
  width: 100% !important;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.9), 0 0 4px #ffd700 !important;
}

.menu a[href*="packs"].active::after,
.menu a.nav-packs.active::after {
  width: 100% !important;
  background: linear-gradient(90deg, #ffd700 0%, #fff8db 50%, #ffd700 100%) !important;
  height: 2px !important;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.9), 0 0 4px #ffd700 !important;
}

.mobile-menu-links a[href*="packs"] {
  color: #ffd700 !important;
  font-weight: 700 !important;
  background: rgba(255, 215, 0, 0.06);
  border-radius: 8px;
}

.mobile-menu-links a[href*="packs"] svg {
  stroke: #ffd700 !important;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.5));
}

.page-hero{
  padding: 70px 0 35px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.07), transparent 35%), #050505;
}

.page-hero h1{
  font-size: clamp(30px, 4.5vw, 46px);
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 16px auto;
  max-width: 800px;
}

.page-hero p{
  color: var(--muted);
  max-width: 620px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
}

/* =====================================================
   SVG ICONS HELPER CLASSES
===================================================== */
.ui-icon{
  width:14px;
  height:14px;
  display:inline-block;
  vertical-align:middle;
  stroke:currentColor;
  fill:none;
  flex-shrink:0;
}

.ui-icon-sm{
  width:12px;
  height:12px;
}

.ui-icon-lg{
  width:18px;
  height:18px;
}

.ui-icon-xl{
  width:24px;
  height:24px;
}

/* =====================================================
   SHOPPING CART (DRAWER & BADGE)
===================================================== */
.nav-cart-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#141414;
  border:1px solid #333;
  color:#fff;
  padding:8px 14px;
  border-radius:10px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  position:relative;
  transition:all .25s ease;
}

.nav-cart-btn:hover{
  background:#1e1e1e;
  border-color:#555;
  transform:translateY(-2px);
  box-shadow:0 4px 15px rgba(0,0,0,.4);
}

.cart-badge{
  background:#fff;
  color:#000;
  font-size:10px;
  font-weight:900;
  min-width:18px;
  height:18px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
  transition:transform .2s ease;
}

.cart-badge.bump{
  animation:badgeBump .3s ease;
}

@keyframes badgeBump{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.35); background:#22c55e; color:#fff; }
}

.cart-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:2000;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}

.cart-backdrop.open{
  opacity:1;
  visibility:visible;
}

.cart-drawer{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:min(420px, 92vw);
  background:rgba(12,12,12,.98);
  border-left:1px solid #282828;
  box-shadow:-15px 0 50px rgba(0,0,0,.8);
  z-index:2001;
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(0.16,1,0.3,1);
}

.cart-drawer.open{
  transform:translateX(0);
}

.cart-header{
  padding:22px 24px;
  border-bottom:1px solid #222;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.cart-header-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:17px;
  font-weight:800;
  color:#fff;
}

.cart-header-count{
  font-size:11px;
  background:#202020;
  border:1px solid #333;
  color:#aaa;
  padding:2px 8px;
  border-radius:999px;
  font-weight:700;
}

.cart-close-btn{
  background:transparent;
  border:1px solid #2a2a2a;
  color:#888;
  width:32px;
  height:32px;
  border-radius:8px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:all .2s ease;
}

.cart-close-btn:hover{
  background:#222;
  color:#fff;
  border-color:#444;
}

.cart-body{
  flex:1;
  overflow-y:auto;
  padding:20px 24px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.cart-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  height:100%;
  padding:40px 20px;
  gap:14px;
}

.cart-empty-icon{
  width:56px;
  height:56px;
  border-radius:16px;
  background:#181818;
  border:1px solid #2e2e2e;
  display:grid;
  place-items:center;
  color:#777;
}

.cart-empty h3{
  font-size:16px;
  font-weight:700;
  color:#fff;
  margin:0;
}

.cart-empty p{
  font-size:13px;
  color:#777;
  max-width:240px;
  line-height:1.5;
  margin:0;
}

.cart-empty-btn{
  margin-top:6px;
  padding:9px 18px;
  background:#fff;
  color:#000;
  border-radius:10px;
  font-weight:800;
  font-size:12px;
  text-decoration:none;
  transition:.25s ease;
}

.cart-empty-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(255,255,255,.15);
}

.cart-item{
  background:#141414;
  border:1px solid #242424;
  border-radius:14px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  transition:border-color .25s ease, transform .25s ease;
}

.cart-item:hover{
  border-color:#383838;
}

.cart-item-info{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.cart-item-tag{
  font-size:9px;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.5px;
  color:#888;
}

.cart-item-name{
  font-size:14px;
  font-weight:700;
  color:#fff;
}

.cart-item-sub{
  font-size:11px;
  color:#777;
}

.cart-item-right{
  display:flex;
  align-items:center;
  gap:14px;
}

.cart-item-price{
  font-size:14px;
  font-weight:800;
  color:#fff;
  white-space:nowrap;
}

.cart-item-remove{
  background:transparent;
  border:none;
  color:#666;
  cursor:pointer;
  padding:4px;
  border-radius:6px;
  display:grid;
  place-items:center;
  transition:all .2s ease;
}

.cart-item-remove:hover{
  color:#ef4444;
  background:rgba(239,68,68,.1);
}

.cart-footer{
  border-top:1px solid #222;
  padding:20px 24px;
  background:#0e0e0e;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.cart-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  color:#888;
}

.cart-row strong{
  color:#fff;
}

/* CART COUPON SECTION */
.cart-coupon-section{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  margin-bottom:6px;
}
.cart-coupon-row{
  display:flex;
  gap:8px;
  align-items:center;
}
.cart-coupon-field{
  flex:1;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:8px;
  padding:8px 12px;
  color:#fff;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.5px;
  outline:none;
  transition:border-color 0.2s, background 0.2s;
}
.cart-coupon-field:focus{
  border-color:#ffd700;
  background:rgba(255,215,0,0.04);
}
.cart-coupon-field:disabled{
  opacity:0.8;
  cursor:not-allowed;
  border-color:rgba(34,197,94,0.4);
  color:#22c55e;
}
.cart-coupon-action{
  padding:8px 14px;
  background:#ffd700;
  color:#000;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.5px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:all 0.2s ease;
  white-space:nowrap;
}
.cart-coupon-action:hover:not(:disabled){
  background:#ffea70;
  transform:translateY(-1px);
}
.cart-coupon-action:disabled{
  opacity:0.5;
  cursor:not-allowed;
}
.cart-coupon-action.remove{
  background:rgba(239,68,68,0.15);
  color:#ef4444;
  border:1px solid rgba(239,68,68,0.3);
}
.cart-coupon-action.remove:hover{
  background:rgba(239,68,68,0.25);
  color:#ff6b6b;
}
.cart-coupon-msg{
  font-size:11px;
  display:flex;
  align-items:center;
  gap:5px;
  line-height:1.3;
}
.cart-coupon-msg.error{
  color:#ef4444;
}
.cart-coupon-msg.success{
  color:#22c55e;
  font-weight:600;
}
.cart-discount-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:#22c55e;
  background:rgba(34,197,94,.08);
  border:1px dashed rgba(34,197,94,.3);
  padding:8px 12px;
  border-radius:8px;
  font-weight:700;
}
.cart-discount-row.cart-coupon-discount{
  color:#ffd700;
  background:rgba(255,215,0,0.08);
  border-color:rgba(255,215,0,0.3);
}

.cart-total-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:15px;
  color:#fff;
  font-weight:800;
  padding-top:6px;
  border-top:1px solid #202020;
}

.cart-total-price{
  font-size:20px;
  font-weight:900;
  color:#fff;
}

.cart-checkout-btn{
  width:100%;
  padding:14px;
  border-radius:12px;
  background:#fff;
  color:#000;
  font-size:14px;
  font-weight:800;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:all .25s ease;
}

.cart-checkout-btn:hover{
  background:#e6e6e6;
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(255,255,255,.15);
}

.cart-guarantee{
  font-size:11px;
  color:#666;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.btn-add-cart{
  cursor:pointer;
  border:none;
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.btn-add-cart.added{
  background:#22c55e;
  color:#fff;
}

/* =====================================================
   REVIEWS & TESTIMONIALS SECTION
===================================================== */
.reviews-section{
  background:radial-gradient(circle at 50% 0,rgba(255,255,255,.05),transparent 40%),#060606;
  border-top:1px solid var(--line);
  padding:80px 0;
  position:relative;
  overflow:hidden;
}

.reviews-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
  background:#0f0f0f;
  border:1px solid #222;
  border-radius:18px;
  padding:24px;
  margin-bottom:40px;
  text-align:center;
}

.rev-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.rev-score{
  font-size:26px;
  font-weight:900;
  color:#fff;
}

.rev-score span{
  font-size:14px;
  color:#777;
  font-weight:600;
}

.rev-stars{
  display:flex;
  gap:4px;
  margin:4px 0;
}

.rev-stars svg, .review-stars svg{
  width:16px;
  height:16px;
  fill:#ffb800 !important;
  stroke:#ffb800 !important;
  filter:drop-shadow(0 0 6px rgba(255, 184, 0, 0.75)) drop-shadow(0 0 12px rgba(255, 184, 0, 0.4));
  transition:transform .25s ease;
}

.review-stars{
  display:flex;
  gap:4px;
}

.review-card:hover .review-stars svg{
  transform:scale(1.1);
}

.rev-num{
  font-size:26px;
  font-weight:900;
  color:#fff;
}

.rev-label{
  font-size:12px;
  color:#888;
}

.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.review-card{
  background:linear-gradient(145deg,#131313,#0b0b0b);
  border:1px solid #242424;
  border-radius:18px;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:18px;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}

.review-card:hover{
  transform:translateY(-5px);
  border-color:#444;
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}

.review-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.review-date{
  font-size:11px;
  color:#666;
}

.review-text{
  font-size:13.5px;
  color:#bbb;
  line-height:1.65;
  font-style:normal;
  margin:0;
}

.review-author{
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:14px;
  border-top:1px solid #1c1c1c;
}

.review-avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  background:linear-gradient(135deg,#2a2a2a,#1a1a1a);
  border:1px solid #3a3a3a;
  color:#fff;
  font-size:12px;
  font-weight:800;
  display:grid;
  place-items:center;
  flex-shrink:0;
}

.review-name{
  font-size:13px;
  font-weight:800;
  color:#fff;
  display:block;
}

.review-product{
  font-size:11px;
  color:#22c55e;
  display:block;
  margin-top:2px;
}

@media(max-width:960px){
  .reviews-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .reviews-summary{
    grid-template-columns:repeat(2,1fr);
    gap:20px;
  }
}

@media(max-width:640px){
  .reviews-grid{
    grid-template-columns:1fr;
  }
  .reviews-summary{
    grid-template-columns:1fr;
    gap:16px;
  }
}

/* =====================================================
   TOP ANNOUNCEMENT BAR (FLASH OFFER & COUNTDOWN)
===================================================== */
.admin-body .announcement-bar,
.admin-body #topAnnouncementBar {
  display: none !important;
}

.announcement-bar{
  background:linear-gradient(90deg,#161003 0%,#261702 35%,#2a1b04 65%,#140e02 100%);
  border-bottom:1px solid rgba(251,191,36,.28);
  padding:9px 0;
  position:relative;
  z-index:101;
  box-shadow:0 4px 20px rgba(0,0,0,.4);
}

.announcement-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.announcement-left{
  display:flex;
  align-items:center;
  gap:12px;
}

.announcement-badge{
  background:rgba(251,191,36,.15);
  border:1px solid rgba(251,191,36,.4);
  color:#fbbf24;
  font-size:10px;
  font-weight:900;
  padding:3px 8px;
  border-radius:999px;
  letter-spacing:.5px;
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.announcement-text{
  font-size:13px;
  color:#e5e5e5;
  letter-spacing:-.1px;
}

.announcement-text strong{
  color:#fbbf24;
  font-weight:800;
}

.announcement-right{
  display:flex;
  align-items:center;
  gap:14px;
}

.countdown-container{
  display:flex;
  align-items:center;
  gap:8px;
}

.countdown-label{
  font-size:11px;
  color:#a3a3a3;
  font-weight:600;
}

.countdown-timer{
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-family:monospace;
}

.cd-box{
  background:#111;
  border:1px solid #333;
  color:#fff;
  font-size:12px;
  font-weight:800;
  padding:3px 6px;
  border-radius:6px;
  font-variant-numeric:tabular-nums;
  display:inline-flex;
  align-items:baseline;
  gap:1px;
}

.cd-box b{
  color:#fbbf24;
  font-weight:900;
}

.cd-colon{
  color:#777;
  font-weight:800;
  font-size:11px;
}

.announcement-cta{
  background:#fbbf24;
  color:#000;
  font-size:11px;
  font-weight:900;
  padding:6px 12px;
  border-radius:8px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
  transition:all .25s ease;
  box-shadow:0 0 12px rgba(251,191,36,.3);
}

.announcement-cta:hover{
  background:#fcd34d;
  transform:translateY(-1px);
  box-shadow:0 0 18px rgba(251,191,36,.55);
}

@media(max-width:860px){
  .announcement-wrap{
    flex-direction:column;
    justify-content:center;
    text-align:center;
    gap:8px;
  }
  .announcement-left{
    justify-content:center;
    flex-wrap:wrap;
  }
  .announcement-right{
    justify-content:center;
    flex-wrap:wrap;
  }
}

/* =====================================================
   ALL ACCESS PREMIUM VISUAL CARD (RELUCIENTE & ANIMADO)
===================================================== */
.all-access-box{
  background:radial-gradient(circle at 85% 0%,rgba(251,191,36,.18),transparent 45%),
             radial-gradient(circle at 15% 100%,rgba(251,191,36,.12),transparent 40%),
             linear-gradient(160deg,#181818 0%,#0d0d0d 100%) !important;
  border:1px solid rgba(251,191,36,.55) !important;
  box-shadow:0 25px 70px rgba(0,0,0,.7),0 0 50px rgba(251,191,36,.2),inset 0 1px 0 rgba(255,255,255,.25) !important;
  position:relative;
  overflow:hidden;
  animation:allAccessGlowPulse 5s ease-in-out infinite;
}

@keyframes allAccessGlowPulse{
  0%,100%{
    box-shadow:0 25px 70px rgba(0,0,0,.7),0 0 40px rgba(251,191,36,.15),inset 0 1px 0 rgba(255,255,255,.2);
    border-color:rgba(251,191,36,.5);
  }
  50%{
    box-shadow:0 30px 85px rgba(0,0,0,.85),0 0 65px rgba(251,191,36,.35),inset 0 1px 0 rgba(255,255,255,.4);
    border-color:rgba(251,191,36,.95);
  }
}

/* Destello dorado en movimiento continuo cruzando la tarjeta */
.all-access-shimmer-sweep{
  position:absolute;
  top:0;
  left:-150%;
  width:70%;
  height:100%;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,184,0,.05) 15%,
    rgba(255,215,0,.45) 45%,
    rgba(255,255,255,.85) 50%,
    rgba(255,215,0,.45) 55%,
    rgba(255,184,0,.05) 85%,
    transparent 100%
  );
  transform:skewX(-25deg);
  animation:sweepGoldFlare 3.5s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events:none;
  z-index:1;
}

@keyframes sweepGoldFlare{
  0%{
    left:-100%;
  }
  60%,100%{
    left:200%;
  }
}

/* Orbe dorado flotante en movimiento */
.all-access-orb{
  position:absolute;
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,184,0,.22) 0%,rgba(255,184,0,0) 70%);
  filter:blur(30px);
  pointer-events:none;
  z-index:1;
  animation:moveGoldOrb 8s ease-in-out infinite alternate;
}

@keyframes moveGoldOrb{
  0%{
    top:-40px;
    left:-40px;
    transform:scale(1);
    opacity:.7;
  }
  50%{
    top:50%;
    left:70%;
    transform:scale(1.3);
    opacity:1;
  }
  100%{
    top:80%;
    left:10%;
    transform:scale(1.1);
    opacity:.8;
  }
}

/* Borde superior dinámico */
.all-access-box::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg,#fbbf24 0%,#ffffff 50%,#fbbf24 100%);
  background-size:200% auto;
  animation:laserShine 2.5s linear infinite;
  z-index:2;
}

@keyframes laserShine{
  0%{background-position:0% 50%;}
  100%{background-position:200% 50%;}
}

.all-access-top-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
  flex-wrap:wrap;
  gap:10px;
  position:relative;
  z-index:2;
}

.popular-pill{
  background:linear-gradient(135deg,rgba(251,191,36,.22),rgba(251,191,36,.08));
  border:1px solid rgba(251,191,36,.6);
  color:#fbbf24;
  font-size:10.5px;
  font-weight:900;
  padding:5px 12px;
  border-radius:999px;
  letter-spacing:.5px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  box-shadow:0 0 15px rgba(251,191,36,.3);
  animation:pillPulse 3s ease-in-out infinite;
}

@keyframes pillPulse{
  0%,100%{
    transform:scale(1);
    box-shadow:0 0 12px rgba(251,191,36,.25);
  }
  50%{
    transform:scale(1.03);
    box-shadow:0 0 22px rgba(251,191,36,.55);
  }
}

.all-access-stars{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.all-access-stars svg{
  width:14px;
  height:14px;
  fill:#ffb800 !important;
  stroke:#ffb800 !important;
  filter:drop-shadow(0 0 6px rgba(255,184,0,.8));
}

.all-access-stars span{
  font-size:11px;
  color:#bbb;
  font-weight:700;
  margin-left:4px;
}

.all-access-headline{
  position:relative;
  z-index:2;
}

.all-access-headline h3{
  font-size:27px;
  font-weight:900;
  letter-spacing:-.5px;
  margin:0 0 8px;
  background:linear-gradient(90deg,#ffffff 0%,#ffeaa7 30%,#ffd000 50%,#fffdf0 70%,#ffffff 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:metallicTextShine 4s linear infinite;
}

@keyframes metallicTextShine{
  to{background-position:200% center;}
}

.all-access-headline p{
  font-size:14px;
  color:#aaa;
  line-height:1.6;
  margin-bottom:22px;
}

.all-access-headline p strong{
  color:#fff;
}

.all-access-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-bottom:24px;
  position:relative;
  z-index:2;
}

.access-card-item{
  background:rgba(22,22,22,.7);
  border:1px solid #282828;
  border-radius:12px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:12px;
  transition:all .25s ease;
}

.access-card-item:hover{
  background:rgba(30,30,30,.9);
  border-color:#444;
  transform:translateY(-2px);
}

.access-card-item.highlight{
  background:rgba(34,197,94,.06);
  border-color:rgba(34,197,94,.28);
}

.access-card-item.highlight:hover{
  background:rgba(34,197,94,.1);
  border-color:rgba(34,197,94,.45);
}

.access-item-icon{
  width:36px;
  height:36px;
  border-radius:10px;
  background:#181818;
  border:1px solid #333;
  display:grid;
  place-items:center;
  color:#fff;
  flex-shrink:0;
}

.access-item-icon.guide{
  background:rgba(34,197,94,.15);
  border-color:rgba(34,197,94,.35);
  color:#4ade80;
}

.access-item-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.access-item-text strong{
  font-size:13px;
  font-weight:700;
  color:#fff;
}

.access-item-text span{
  font-size:11px;
  color:#777;
}

.all-access-pricing{
  background:linear-gradient(145deg,#131313,#0b0b0b);
  border:1px solid rgba(251,191,36,.3);
  border-radius:14px;
  padding:16px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  box-shadow:0 8px 24px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);
  position:relative;
  z-index:2;
}

.pricing-left{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.pricing-label{
  font-size:11px;
  color:#888;
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:.3px;
}

.pricing-crossed{
  font-size:16px;
  color:#888;
  text-decoration:line-through;
  text-decoration-color:#ef4444;
  text-decoration-thickness:2px;
  font-weight:800;
}

.pricing-right{
  display:flex;
  align-items:center;
  gap:12px;
}

.pricing-save-tag{
  background:#22c55e;
  color:#000;
  font-size:10.5px;
  font-weight:900;
  padding:4px 9px;
  border-radius:6px;
  letter-spacing:.3px;
  box-shadow:0 0 12px rgba(34,197,94,.4);
}

.pricing-final{
  display:flex;
  align-items:baseline;
  color:#fff;
  font-weight:900;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}

.pricing-final .currency{
  font-size:18px;
  margin-right:2px;
}

.pricing-final .amount{
  font-size:36px;
  letter-spacing:-1px;
  line-height:1;
}

.pricing-final .cents{
  font-size:18px;
}

.all-access-cta-btn{
  width:100%;
  padding:17px;
  border-radius:12px;
  font-size:15px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  border:none;
  background:linear-gradient(90deg,#ffffff 0%,#fff5cc 50%,#ffffff 100%);
  background-size:200% auto;
  color:#000;
  transition:all .3s ease;
  box-shadow:0 10px 30px rgba(251,191,36,.25),0 0 20px rgba(255,255,255,.15);
  animation:buttonGleam 4s linear infinite;
  position:relative;
  z-index:2;
}

@keyframes buttonGleam{
  0%{background-position:0% 50%;}
  100%{background-position:200% 50%;}
}

.all-access-cta-btn:hover{
  background:#fff;
  transform:translateY(-2px) scale(1.01);
  box-shadow:0 15px 45px rgba(251,191,36,.45),0 0 30px rgba(255,255,255,.3);
}

.all-access-guarantees{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid #1c1c1c;
  position:relative;
  z-index:2;
}

.guarantee-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:#888;
}

.guarantee-item span{
  color:#aaa;
}

@media(max-width:640px){
  .all-access-grid{
    grid-template-columns:1fr;
  }
  .all-access-pricing{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .all-access-guarantees{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* =====================================================
   GOLD SHINE PREMIUM TEXT
===================================================== */
.gold-shine{
  background:linear-gradient(90deg,#ffffff 0%,#ffe082 25%,#ffd700 45%,#ffae00 65%,#fffdf0 85%,#ffffff 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:goldTextShimmer 4s linear infinite;
  display:inline;
  font-weight:inherit;
  filter:drop-shadow(0 0 14px rgba(255,184,0,.35));
}

@keyframes goldTextShimmer{
  0%{background-position:0% 50%;}
  100%{background-position:200% 50%;}
}

/* =====================================================
   TRUST SECTION (.trust, .trust-grid, .trust-main, .trust-side)
===================================================== */
.trust{
  padding:80px 0;
  position:relative;
  background:radial-gradient(circle at 20% 50%,rgba(255,255,255,.03),transparent 40%),var(--bg);
}

.trust-grid{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:36px;
  align-items:center;
  width:100%;
}

.trust-main{
  min-width:0;
  width:100%;
}

.trust-main h2{
  font-size:clamp(22px, 4.5vw, 36px);
  line-height:1.2;
  letter-spacing:-1px;
  margin:10px 0 16px;
  word-break:break-word;
  overflow-wrap:break-word;
}

.trust-main p{
  color:var(--muted);
  font-size:15px;
  line-height:1.65;
  margin:0 0 14px;
}

.trust-points{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-top:28px;
  width:100%;
}

.trust-point{
  background:linear-gradient(145deg,#141414,#0b0b0b);
  border:1px solid #242424;
  border-radius:14px;
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  width:100%;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}

.trust-point:hover{
  transform:translateY(-3px);
  border-color:#383838;
  box-shadow:0 8px 25px rgba(0,0,0,.5);
}

.trust-point strong{
  font-size:20px;
  font-weight:900;
  color:#fff;
  display:inline-block;
  word-break:break-word;
  overflow-wrap:break-word;
}

.trust-point strong.gold-shine{
  background:linear-gradient(90deg,#ffffff 0%,#ffe082 25%,#ffd700 45%,#ffae00 65%,#fffdf0 85%,#ffffff 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:goldTextShimmer 4s linear infinite;
  filter:drop-shadow(0 0 10px rgba(255,184,0,.35));
}

.trust-point span{
  font-size:12.5px;
  color:#888;
  line-height:1.4;
}

.trust-side{
  background:linear-gradient(145deg,#141414,#0c0c0c);
  border:1px solid #282828;
  border-radius:20px;
  padding:36px 30px;
  min-width:0;
  width:100%;
  position:relative;
  overflow:hidden;
  box-shadow:0 15px 40px rgba(0,0,0,.5);
}

.trust-side h3{
  font-size:22px;
  font-weight:800;
  margin:0 0 12px;
  color:#fff;
}

.trust-side p{
  color:var(--muted);
  font-size:14.5px;
  line-height:1.6;
  margin:0;
}

.big-check{
  width:48px;
  height:48px;
  border-radius:12px;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.35);
  color:#22c55e;
  display:grid;
  place-items:center;
  margin-bottom:20px;
}

.big-check svg{
  width:24px;
  height:24px;
}

@media(max-width:850px){
  .trust{
    padding:50px 0;
  }
  .trust-side{
    padding:24px 18px;
  }
}

@media(max-width:520px){
  .trust-points{
    grid-template-columns:1fr !important;
    gap:10px;
  }
  .trust-point{
    padding:16px;
  }
  .trust-point strong{
    font-size:18px;
  }
}

/* =====================================================
   AUTH & LOGIN / REGISTER PAGES
===================================================== */
.auth-container{
  max-width:480px;
  margin:20px auto 80px;
  padding:0 20px;
}

.auth-card{
  background:linear-gradient(145deg,#111,#0a0a0a);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:36px 30px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  position:relative;
  overflow:hidden;
}

.auth-card::before{
  content:"";
  position:absolute;
  width:200px;
  height:200px;
  right:-100px;
  top:-100px;
  border-radius:50%;
  background:rgba(255,255,255,.04);
  pointer-events:none;
}

.auth-tabs{
  display:flex;
  background:#141414;
  border-radius:999px;
  padding:4px;
  margin-bottom:26px;
  border:1px solid #282828;
}

.auth-tab{
  flex:1;
  background:none;
  border:none;
  color:#888;
  padding:10px 14px;
  font-size:13.5px;
  font-weight:700;
  border-radius:999px;
  cursor:pointer;
  transition:all .25s ease;
}

.auth-tab.active{
  background:#fff;
  color:#000;
  box-shadow:0 4px 20px rgba(255,255,255,.2);
}

.form-group{
  margin-bottom:20px;
}

.form-group label{
  display:block;
  font-size:13px;
  font-weight:700;
  color:#d4d4d8;
  margin-bottom:8px;
}

.auth-input{
  width:100%;
  box-sizing:border-box;
  background:#141414;
  border:1px solid #282828;
  border-radius:12px;
  padding:14px 16px;
  color:#fff;
  font-size:14px;
  outline:none;
  font-family:inherit;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.auth-input:focus{
  border-color:#4a4a4a;
  background:#181818;
  box-shadow:0 0 15px rgba(255,255,255,0.06);
}

.auth-submit-btn{
  width:100%;
  justify-content:center;
  padding:16px;
  font-size:15px;
  margin-top:10px;
}

.auth-alert{
  padding:12px 16px;
  border-radius:10px;
  font-size:13px;
  margin-bottom:20px;
  line-height:1.5;
}

.auth-alert.error{
  background:rgba(239, 68, 68, 0.12);
  border:1px solid rgba(239, 68, 68, 0.3);
  color:#f87171;
}

.auth-alert.success{
  background:rgba(34, 197, 94, 0.12);
  border:1px solid rgba(34, 197, 94, 0.3);
  color:#4ade80;
}

/* =====================================================
   CUSTOMER PORTAL / PANEL
===================================================== */
.panel-container{
  max-width:1200px;
  margin:20px auto 80px;
  padding:0 20px;
}

.panel-user-bar{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:14px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:36px;
  flex-wrap:wrap;
  gap:16px;
}

.panel-user-info{
  display:flex;
  align-items:center;
  gap:14px;
}

.panel-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  background:linear-gradient(135deg, #ffffff 0%, #d4d4d8 100%);
  color:#000000;
  font-weight:800;
  font-size:16px;
  display:grid;
  place-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
  flex-shrink:0;
}

.panel-user-name{
  font-size:15.5px;
  font-weight:700;
  color:#ffffff;
  margin:0 0 2px 0;
}

.panel-user-email{
  font-size:12.5px;
  color:#71717a;
  margin:0;
}

.panel-user-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.user-tier-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(34, 197, 94, 0.3);
  background:rgba(34, 197, 94, 0.1);
  color:#22c55e;
  border-radius:20px;
  padding:5px 12px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.3px;
}

.user-tier-badge.all-access-badge{
  border-color:rgba(234, 179, 8, 0.35);
  background:rgba(234, 179, 8, 0.1);
  color:#eab308;
}

.panel-logout-btn{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  color:#a1a1aa;
  padding:7px 14px;
  border-radius:10px;
  font-size:12px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  transition:all .2s ease;
}

.panel-logout-btn:hover{
  background:rgba(239,68,68,0.1);
  border-color:rgba(239,68,68,0.3);
  color:#f87171;
}

.panel-section{
  margin-bottom:60px;
}

.panel-section-head h2{
  font-size:24px;
  color:#fff;
  letter-spacing:0;
  margin:0 0 6px 0;
}

.panel-section-head p{
  font-size:14px;
  color:var(--muted);
  margin:0 0 24px 0;
}

.panel-unlocked-card{
  display:flex;
  flex-direction:column;
}

.unlocked-verified{
  color:#22c55e !important;
  border-color:rgba(34, 197, 94, 0.3) !important;
  background:rgba(34, 197, 94, 0.1) !important;
}

.locked-card{
  opacity:0.85;
  display:flex;
  flex-direction:column;
}

.locked-card:hover{
  opacity:1;
}

.panel-contact-box{
  background:rgba(255, 255, 255, 0.02);
  border:1px solid #252525;
  border-radius:16px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:auto;
}

.contact-item{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.contact-label{
  font-size:11.5px;
  color:#71717a;
  text-transform:uppercase;
  letter-spacing:0.4px;
  font-weight:600;
}

.contact-value-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.contact-value-row strong{
  color:#fff;
  font-size:13.5px;
  font-family:monospace;
}

.whatsapp-btn{
  background:#25D366 !important;
  color:#000 !important;
  font-weight:700 !important;
}

.vip-code{
  background:rgba(255,255,255,0.08);
  padding:4px 8px;
  border-radius:6px;
  color:#fff;
  font-size:12.5px;
  letter-spacing:0.5px;
}

.contact-notes{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:12px;
  color:#a1a1aa;
  line-height:1.45;
  border-top:1px solid rgba(255,255,255,0.06);
  padding-top:10px;
}

.guides-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:20px;
}

.guide-card{
  background:linear-gradient(145deg, #141416 0%, #0c0c0e 100%);
  border:1px solid rgba(255, 255, 255, 0.08);
  border-radius:18px;
  padding:24px;
  display:flex;
  gap:16px;
}

.guide-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  background:rgba(255,255,255,0.05);
  color:#fff;
  display:grid;
  place-items:center;
  flex-shrink:0;
}

.guide-body h4{
  font-size:15px;
  color:#fff;
  margin:0 0 6px 0;
}

.guide-body p{
  font-size:12.5px;
  color:#a1a1aa;
  line-height:1.5;
  margin:0 0 14px 0;
}

.guide-download-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* =====================================================
   CHECKOUT SUCCESS PAGE
===================================================== */
.success-container{
  max-width:580px;
  margin:40px auto 80px;
  padding:0 20px;
}

.success-card{
  background:linear-gradient(145deg,#111,#0a0a0a);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:44px 32px;
  text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  position:relative;
  overflow:hidden;
}

.success-card::before{
  content:"";
  position:absolute;
  width:200px;
  height:200px;
  right:-100px;
  top:-100px;
  border-radius:50%;
  background:rgba(255,255,255,.04);
  pointer-events:none;
}

.success-icon-wrap{
  width:84px;
  height:84px;
  border-radius:50%;
  background:rgba(34, 197, 94, 0.12);
  border:1px solid rgba(34, 197, 94, 0.3);
  display:grid;
  place-items:center;
  margin:0 auto 24px;
}

.success-card h1{
  font-size:26px;
  color:#fff;
  margin:0 0 10px 0;
}

.success-subtitle{
  color:#a1a1aa;
  font-size:14.5px;
  line-height:1.6;
  margin:0 0 28px 0;
}

.success-details-box{
  background:rgba(0,0,0,0.3);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:18px 20px;
  text-align:left;
  margin-bottom:28px;
}

.success-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13.5px;
  color:#a1a1aa;
  margin-bottom:8px;
}

.success-divider{
  height:1px;
  background:rgba(255,255,255,0.07);
  margin:12px 0;
}

.order-summary-item{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  color:#fff;
  margin-bottom:6px;
}

.success-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.success-btn{
  width:100%;
  justify-content:center;
  padding:16px;
  font-size:15px;
}

/* =====================================================
   PURCHASED PACKS & ITEMS BADGES
===================================================== */
.pack-purchased-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(34, 197, 94, 0.15);
  border:1px solid rgba(34, 197, 94, 0.4);
  color:#22c55e;
  padding:8px 16px;
  border-radius:12px;
  font-size:13.5px;
  font-weight:700;
  margin-bottom:18px;
}

.btn-view-purchased{
  background:rgba(34, 197, 94, 0.15) !important;
  border:1px solid rgba(34, 197, 94, 0.4) !important;
  color:#4ade80 !important;
  text-decoration:none !important;
  font-weight:700 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  cursor:pointer;
  transition:all .2s ease;
}

.btn-view-purchased:hover{
  background:rgba(34, 197, 94, 0.28) !important;
  color:#fff !important;
  border-color:#22c55e !important;
  transform:translateY(-1px);
}

.tag-purchased{
  background:rgba(34, 197, 94, 0.18) !important;
  color:#4ade80 !important;
  border-color:rgba(34, 197, 94, 0.35) !important;
  font-weight:700 !important;
}

.pricing-purchased-tag{
  background:rgba(34, 197, 94, 0.2);
  color:#22c55e;
  font-size:12px;
  font-weight:700;
  padding:4px 10px;
  border-radius:6px;
  border:1px solid rgba(34, 197, 94, 0.35);
  display:inline-block;
  margin-left:8px;
}

.provider-option.already-owned{
  opacity:0.65;
  border-color:rgba(34, 197, 94, 0.2);
  background:rgba(34, 197, 94, 0.04);
}



/* =====================================================
   ADMIN DASHBOARD STYLES
===================================================== */
.admin-tag-badge{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  padding:3px 8px;
  border-radius:6px;
  background:rgba(255,215,0,0.1);
  color:#ffd700;
  border:1px solid rgba(255,215,0,0.25);
}

.admin-status-indicator{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  color:#a1a1aa;
  margin-right:8px;
}

.status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 8px rgba(34,197,94,0.6);
}

.admin-body .wrap{
  width:min(1560px,95%);
  margin:auto;
}

.admin-body *{
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}

.admin-body *::-webkit-scrollbar{
  display:none !important;
  width:0 !important;
  height:0 !important;
}

.admin-body .nav-cart-btn,
.admin-body .nav-mobile-toggle,
.admin-body .nav-actions,
.admin-body #cartDrawer,
.admin-body #cartBackdrop,
.admin-body #mobileNavDrawer,
.admin-body #mobileNavBackdrop{
  display:none !important;
}

.admin-top-nav .nav{
  flex-wrap:wrap;
  gap:12px;
}

/* ADMIN TOP NAV BUTTONS */
.admin-top-nav .menu a,
.admin-top-nav .menu button{
  text-decoration:none !important;
  font-family:inherit;
}

.admin-top-nav .menu a::after,
.admin-top-nav .menu button::after{
  display:none !important;
}

.admin-btn-nav{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:#141418 !important;
  border:1px solid #2e2e33 !important;
  color:#e4e4e7 !important;
  font-size:12.5px;
  font-weight:600;
  padding:7px 14px;
  border-radius:999px;
  cursor:pointer;
  transition:all .2s ease;
  text-decoration:none;
  line-height:1;
  box-shadow:none !important;
}

.admin-btn-nav:hover{
  background:#222228 !important;
  border-color:#52525b !important;
  color:#ffffff !important;
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(0,0,0,0.4) !important;
}

.admin-btn-logout{
  background:rgba(239, 68, 68, 0.08) !important;
  border:1px solid rgba(239, 68, 68, 0.28) !important;
  color:#ef4444 !important;
}

.admin-btn-logout:hover{
  background:rgba(239, 68, 68, 0.18) !important;
  border-color:#ef4444 !important;
  color:#ff7878 !important;
}

.admin-btn-install{
  background:#ffd700 !important;
  border:1px solid #ffd700 !important;
  color:#000000 !important;
  font-weight:700;
}

.admin-btn-install:hover{
  background:#ffae00 !important;
  border-color:#ffae00 !important;
  color:#000000 !important;
}

.admin-tabs-nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:18px 0 28px;
  border-bottom:1px solid var(--line);
  padding-bottom:14px;
  overflow:visible;
}

.admin-tab-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#0f0f12;
  border:1px solid #27272a;
  color:#a1a1aa;
  font-family:inherit;
  font-size:12.5px;
  font-weight:600;
  padding:8px 14px;
  border-radius:10px;
  cursor:pointer;
  transition:all .2s ease;
  white-space:nowrap;
}

.admin-tab-btn:hover{
  color:#fff;
  border-color:#3f3f46;
  background:rgba(255,255,255,0.06);
}

.admin-tab-btn.active{
  color:#fff;
  background:#18181b;
  border-color:#ffd700;
  box-shadow:0 0 10px rgba(255,215,0,0.15);
}

.admin-tab-content{
  display:none;
}

.admin-tab-content.active{
  display:block;
  animation:fadeInTab .3s ease;
}

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

/* LIVE TRAFFIC CARD */
.admin-live-traffic-card{
  background:linear-gradient(135deg, #131317 0%, #0a0a0d 100%);
  border:1px solid #27272a;
  border-radius:var(--r);
}

.admin-live-traffic-wrap{
  display:grid;
  grid-template-columns:1.2fr 2fr;
  gap:24px;
  align-items:center;
}

.live-pulse-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(34, 197, 94, 0.1);
  border:1px solid rgba(34, 197, 94, 0.3);
  color:#22c55e;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.8px;
  padding:4px 10px;
  border-radius:20px;
  margin-bottom:8px;
}

.live-dot-pulse{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 10px #22c55e;
  animation:pulseGreen 1.8s infinite;
}

@keyframes pulseGreen{
  0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(34,197,94,0.7);}
  70%{transform:scale(1.15);box-shadow:0 0 0 8px rgba(34,197,94,0);}
  100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(34,197,94,0);}
}

.live-users-count{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:2px;
}

.live-number{
  font-size:38px;
  font-weight:900;
  color:#fff;
  line-height:1;
}

.live-label{
  font-size:14px;
  color:#a1a1aa;
  font-weight:500;
}

.live-hint{
  font-size:11.5px;
  color:#71717a;
  margin:4px 0 0 0;
}

.live-traffic-stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  background:rgba(0, 0, 0, 0.3);
  padding:16px;
  border-radius:12px;
  border:1px solid rgba(255, 255, 255, 0.04);
}

.traffic-mini-stat{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.traffic-mini-stat .stat-title{
  font-size:10.5px;
  color:#71717a;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.traffic-mini-stat .stat-num{
  font-size:18px;
  font-weight:700;
  color:#fff;
}

.admin-traffic-breakdown-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.admin-kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px;
}

.admin-kpi-card{
  padding:22px 24px;
  min-height:auto;
}

.kpi-label{
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:0.8px;
  color:#a1a1aa;
  margin-bottom:8px;
}

.kpi-value{
  font-size:28px;
  font-weight:800;
  color:#fff;
  line-height:1.1;
  margin-bottom:6px;
}

.kpi-sub{
  font-size:12px;
  color:#71717a;
}

.admin-section-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
  flex-wrap:wrap;
  gap:12px;
}

.admin-section-header h2,
.admin-section-header h3{
  margin:0 0 4px 0;
}

.admin-section-header p{
  margin:0;
  font-size:13.5px;
  color:#a1a1aa;
}

.admin-search-box input{
  background:#111;
  border:1px solid var(--line);
  color:#fff;
  padding:10px 16px;
  border-radius:10px;
  font-family:inherit;
  font-size:13.5px;
  width:260px;
  max-width:100%;
}

.admin-search-box input:focus{
  outline:none;
  border-color:#52525b;
}

.admin-table-container{
  background:linear-gradient(145deg,#111,#0a0a0a);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.admin-table-container::-webkit-scrollbar{
  display:none;
}

.admin-table{
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:13px;
  table-layout:auto;
}

.admin-table th{
  background:#141416;
  color:#a1a1aa;
  font-weight:600;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.6px;
  padding:11px 14px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}

.admin-table td{
  padding:11px 14px;
  border-bottom:1px solid rgba(255,255,255,0.04);
  vertical-align:middle;
}

.admin-table tr:hover td{
  background:rgba(255,255,255,0.02);
}

.admin-table tr:last-child td{
  border-bottom:none;
}

.admin-badge{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:20px;
  font-size:11.5px;
  font-weight:600;
}

.admin-badge.completed{
  background:rgba(34,197,94,0.12);
  color:#22c55e;
  border:1px solid rgba(34,197,94,0.25);
}

.admin-badge.pending{
  background:rgba(234,179,8,0.12);
  color:#eab308;
  border:1px solid rgba(234,179,8,0.25);
}

.admin-pills-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.admin-product-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#18181b;
  border:1px solid #27272a;
  color:#e4e4e7;
  font-size:11.5px;
  padding:3px 8px;
  border-radius:6px;
}

.admin-product-pill button{
  background:transparent;
  border:none;
  color:#ef4444;
  font-size:14px;
  cursor:pointer;
  padding:0;
  line-height:1;
}

.admin-inline-select{
  background:#18181b;
  border:1px solid #27272a;
  color:#fff;
  border-radius:8px;
  padding:6px 10px;
  font-size:12px;
  font-family:inherit;
}

.admin-inline-select:focus{
  outline:none;
  border-color:#52525b;
}

.admin-backup-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 0;
  font-size:13.5px;
  color:#a1a1aa;
}

.admin-backup-row strong{
  color:#fff;
}

.admin-toast{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:9999;
  background:#18181b;
  border:1px solid #27272a;
  color:#fff;
  padding:14px 22px;
  border-radius:12px;
  font-size:13.5px;
  font-weight:600;
  box-shadow:0 10px 30px rgba(0,0,0,0.6);
  animation:toastSlideIn .3s ease;
}

.admin-toast.success{
  border-color:rgba(34,197,94,0.4);
  color:#22c55e;
}

.admin-toast.error{
  border-color:rgba(239,68,68,0.4);
  color:#ef4444;
}

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

@media(max-width:768px){
  .admin-kpi-grid{
    grid-template-columns:1fr 1fr;
  }
  .admin-top-nav .menu span.admin-status-indicator{
    display:none;
  }
}

/* =====================================================
   ADMIN ADVANCED STYLES & MODALS
===================================================== */
.admin-modal{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:99999;
  padding:20px;
}

.admin-modal-box{
  width:100%;
  max-width:540px;
  background:#111114;
  border:1px solid #27272a;
  border-radius:18px;
  padding:28px;
  box-shadow:0 20px 50px rgba(0,0,0,0.8);
  animation:modalSlide .25s ease;
}

@keyframes modalSlide{
  from{opacity:0;transform:scale(0.96) translateY(10px);}
  to{opacity:1;transform:scale(1) translateY(0);}
}

.admin-campaign-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr);
  gap:24px;
  width:100%;
  max-width:100%;
}

.admin-broadcast-card{
  padding:28px;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

.admin-subscribers-col{
  min-width:0;
  max-width:100%;
}

@media(max-width:900px){
  .admin-charts-row,
  .admin-campaign-grid,
  .admin-system-grid{
    grid-template-columns:minmax(0, 1fr) !important;
    width:100% !important;
    max-width:100% !important;
  }
  .admin-broadcast-card{
    padding:16px !important;
    min-width:0 !important;
    max-width:100% !important;
  }
  .admin-subscribers-col{
    min-width:0 !important;
    max-width:100% !important;
  }
}

/* =====================================================
   ADMIN MOBILE RESPONSIVE MASTER STYLES
===================================================== */
@media(max-width:768px){
  .admin-body .wrap{
    width:94% !important;
    padding:0 !important;
  }

  /* TOP NAV */
  .admin-top-nav .nav{
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    padding:10px 0 !important;
    flex-wrap:nowrap !important;
  }
  .admin-tag-badge,
  .admin-status-indicator{
    display:none !important;
  }
  .admin-top-nav .menu{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
  }
  .admin-top-nav .btn.mini,
  .admin-top-nav .admin-btn-nav{
    padding:6px 11px !important;
    font-size:11.5px !important;
  }

  /* HERO */
  .admin-body .page-hero{
    padding:20px 0 14px !important;
  }
  .admin-body .page-hero h1{
    font-size:24px !important;
    line-height:1.2 !important;
    margin:6px 0 !important;
  }
  .admin-body .page-hero p{
    font-size:12.5px !important;
    margin:0 !important;
  }
  .admin-body .pill{
    padding:3px 8px !important;
    font-size:10.5px !important;
    margin-bottom:6px !important;
  }

  /* TABS AS 4x2 APP GRID */
  .admin-tabs-nav{
    display:grid !important;
    grid-template-columns:repeat(4, 1fr) !important;
    gap:6px !important;
    margin:12px 0 20px !important;
    padding-bottom:10px !important;
  }
  .admin-tab-btn{
    flex-direction:column !important;
    padding:8px 3px !important;
    font-size:10.5px !important;
    text-align:center !important;
    justify-content:center !important;
    gap:4px !important;
    border-radius:8px !important;
    line-height:1.2 !important;
    white-space:normal !important;
  }
  .admin-tab-btn svg{
    width:16px !important;
    height:16px !important;
  }

  /* KPI CARDS */
  .admin-kpi-grid{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }
  .admin-kpi-card{
    padding:14px !important;
    border-radius:12px !important;
  }
  .kpi-label{
    font-size:10.5px !important;
    margin-bottom:4px !important;
  }
  .kpi-value{
    font-size:20px !important;
    margin-bottom:2px !important;
  }
  .kpi-sub{
    font-size:10.5px !important;
  }

  /* CHARTS & LAYOUTS */
  .admin-live-traffic-wrap{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  .live-traffic-stats{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    padding:12px !important;
  }
  .admin-traffic-breakdown-row{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  .live-number{
    font-size:30px !important;
  }
  .admin-charts-row,
  .admin-campaign-grid,
  .admin-system-grid{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  /* SECTION HEADERS & SEARCH */
  .admin-section-header{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    margin-bottom:14px !important;
  }
  .admin-section-header h2{
    font-size:18px !important;
  }
  .admin-search-box{
    width:100% !important;
  }
  .admin-search-box input{
    width:100% !important;
    box-sizing:border-box !important;
  }

  /* FORMS ON MOBILE */
  #formCreateCoupon{
    grid-template-columns:1fr !important;
  }
  #formCreateCoupon button{
    width:100% !important;
  }

  .admin-broadcast-card{
    padding:14px !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  #formBroadcast,
  #formBroadcast .form-group{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  #formBroadcast .auth-input{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  #btnSendBroadcast{
    font-size:12px !important;
    padding:12px 10px !important;
    white-space:normal !important;
    line-height:1.3 !important;
    text-align:center !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px !important;
  }

  /* TABLES ON MOBILE: SMOOTH TOUCH SCROLL */
  .admin-table-container{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    border-radius:12px !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  .admin-table{
    min-width:580px !important;
    font-size:12px !important;
  }
  #tabSection-newsletter .admin-table{
    min-width:0 !important;
    width:100% !important;
  }
  .admin-table th,
  .admin-table td{
    padding:10px 10px !important;
  }

  /* MODALS */
  .admin-modal{
    padding:12px !important;
  }
  .admin-modal-box{
    padding:20px !important;
    border-radius:14px !important;
    max-height:90vh !important;
    overflow-y:auto !important;
  }
}

@media(max-width:440px){
  .admin-tabs-nav{
    grid-template-columns:repeat(4, 1fr) !important;
    gap:4px !important;
  }
  .admin-tab-btn{
    padding:6px 2px !important;
    font-size:9.5px !important;
  }
  .admin-tab-btn svg{
    width:14px !important;
    height:14px !important;
  }
  .admin-kpi-grid{
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }
  .admin-kpi-card{
    padding:10px 12px !important;
  }
  .kpi-value{
    font-size:18px !important;
  }
}

/* =====================================================
   TIKTOK IN-APP BROWSER OVERLAY NOTICE (MOBILE ONLY)
===================================================== */
.tt-overlay-backdrop {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: rgba(5, 5, 8, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 99999999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px 20px;
  box-sizing: border-box;
  opacity: 1;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  overflow-y: auto;
}

.tt-overlay-backdrop.tt-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Floating Golden Arrow pointing to top-right ... button */
.tt-arrow-wrap {
  position: fixed;
  top: 14px;
  right: 20px;
  width: 80px;
  height: 80px;
  pointer-events: none;
  z-index: 100000000;
  animation: ttArrowBounce 1.4s ease-in-out infinite;
}

.tt-arrow-wrap svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.95));
}

@keyframes ttArrowBounce {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(8px, -10px) scale(1.1);
  }
}

/* Modal Content Card */
.tt-modal-card {
  width: 100%;
  max-width: 440px;
  background: #0d0d10;
  border: 1px solid rgba(255, 215, 0, 0.35);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 35px rgba(255, 215, 0, 0.15);
  border-radius: 20px;
  padding: 28px 22px 22px;
  text-align: left;
  box-sizing: border-box;
  position: relative;
}

.tt-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.3);
  color: #ffd700;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.tt-badge-pill svg {
  width: 14px;
  height: 14px;
}

.tt-modal-title {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
  margin: 0 0 20px 0;
  letter-spacing: -0.3px;
}

.tt-steps-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 22px;
}

.tt-step-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.tt-step-badge {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffd700;
  color: #000000;
  font-weight: 900;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.tt-step-text {
  font-size: 14.5px;
  color: #e4e4e7;
  line-height: 1.5;
}

.tt-step-text strong {
  color: #ffffff;
  font-weight: 700;
}

.tt-step-text .tt-highlight {
  color: #ffd700;
  font-weight: 700;
}

.tt-info-box {
  background: rgba(24, 24, 27, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 12px;
  color: #a1a1aa;
  line-height: 1.5;
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.tt-info-box svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #ffd700;
}

.tt-actions-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tt-btn-copy {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid #ffd700;
  color: #ffd700;
  font-size: 13.5px;
  font-weight: 700;
  padding: 12px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tt-btn-copy:active {
  transform: scale(0.98);
  background: rgba(255, 215, 0, 0.25);
}

.tt-btn-dismiss {
  background: transparent;
  border: none;
  color: #71717a;
  font-size: 12.5px;
  padding: 8px 0;
  cursor: pointer;
  text-align: center;
  transition: color 0.2s ease;
}

.tt-btn-dismiss:hover {
  color: #a1a1aa;
}