body {
  box-sizing: border-box;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
   
body{
background:linear-gradient(135deg,#0b0b0b,#151515);
color:#00ff88;
overflow-x:hidden;
padding:0;
}
   
html, body {
height: 100%;
width: 100%;
}

.seo-h1{
position:absolute;
left:-9999px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

.app-header{
position:fixed;
top:0;
left:0;
right:0;
height:65px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 18px;
backdrop-filter:blur(12px);
border-bottom:1px solid rgba(0,255,136,0.28);
z-index:200;
}

.menu-btn{
background:transparent;
border:none;
color:#00ff88;
font-size:28px;
padding:6px 6px;
cursor:pointer;
outline:none;
}

.logo{
font-size:15px;
color:#00ff88;
font-weight:700;
letter-spacing:.5px;
}

.header-icons a{
color:#00ff88;
text-decoration:none;
font-size:15px;
font-weight:700;
}

.main-content{
padding:70px 10px 75px;
}

.drawer{
position:fixed;
top:0;
left:-280px;
width:220px;
height:100%;
background:rgba(10,12,20,.92);
z-index:300;
overflow-y:auto;
border-right:1px solid rgba(0,255,136,0.28);
transition:.3s ease;
padding-top:20px;
}

.drawer.active{
left:0;
}

.drawer a{
display:block;
padding:8px 16px;
color:#00ff88;
text-decoration:none;
font-size:12.5px;
border-bottom:1px solid rgba(255,255,255,.05);
}

.drawer-back{
background:none;
border:none;
color:#00ff88;
font-size:12.5px;
padding:8px 16px;
width:100%;
text-align:left;
cursor:pointer;
}

.drawer-overlay{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,.65);
z-index:250;
display:none;
}

.drawer-overlay.active{
display:block;
}

.glass-card{
border:1px solid rgba(0,255,136,0.28);
border-radius:18px;
padding:12px;
margin:8px;
background:rgba(255,255,255,.04);
}

.card-title{
font-size:14px;
font-weight:700;
color:#66ffb3;
text-align:center;
margin:5px 0;
}

.card-text{
font-size:13.5px;
color:#f2f2f2;
line-height:1.6;
padding:5px 5px;
margin-bottom:8px;
}

.theme-divider{
width:100%;
height:1px;
margin:6px auto;
background:linear-gradient(90deg,transparent,rgba(0,255,136,0.28),transparent);
}

.product-grid{
display:flex;
flex-direction:column;
margin:0;
}

.product-grid.active{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:10px;
}

.product-grid .glass-card{
aspect-ratio:1/1.25;
display:flex;
flex-direction:column;
justify-content:space-between;
margin:0;
overflow:hidden;
}

.product-grid .glass-card img{
width:100%;
height:140px;
object-fit:cover;
border-radius:12px;
margin-bottom:6px;
}

.utility-card{
border-radius:18px;
padding:16px;
margin:6px 5px 8px 5px;
color:#fff;
}

.utility-card h2{
font-size:16px;
margin-bottom:6px;
}

.utility-card p{
font-size:13.5px;
line-height:1.6;
color:#f1f1f1;
margin-bottom:8px;
}

.utility-btn{
align-self:flex-start;
padding:8px 16px;
border-radius:999px;
font-size:13px;
font-weight:700;
text-decoration:none;
color:#ffffff;
background:linear-gradient(145deg,
rgba(255,255,255,.18),
rgba(0,0,0,.45)
);
box-shadow:
0 6px 14px rgba(0,0,0,.65),
inset 0 1px 0 rgba(255,255,255,.35),
inset 0 -2px 6px rgba(0,0,0,.6);
border:1px solid rgba(255,255,255,.35);
letter-spacing:.3px;
display:inline-block;
white-space:nowrap;
transform:translateZ(0);
}

.social-links{
display:flex;
flex-wrap:wrap;
gap:8px;
justify-content:center;
}

.social-pill{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
padding:9px 18px;
border-radius:999px;
font-size:12px;
font-weight:700;
letter-spacing:.3px;
color:#ffffff;
text-decoration:none;
white-space:nowrap;
background:var(--chip-color);
box-shadow:
0 6px 14px rgba(0,0,0,.65),
inset 0 1px 0 rgba(255,255,255,.35),
inset 0 -3px 6px rgba(0,0,0,.55);
border:1px solid rgba(255,255,255,.35);
text-shadow:
0 1px 2px rgba(0,0,0,.9);
transform:translateZ(0);
backface-visibility:hidden;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

.social-pill:active{
transform:translateY(2px);
box-shadow:
0 2px 6px rgba(0,0,0,.75),
inset 0 3px 6px rgba(0,0,0,.7);
}

.bottom-nav{
position:fixed;
bottom:0;
left:0;
right:0;
height:65px;
backdrop-filter:blur(12px);
display:flex;
justify-content:space-around;
align-items:center;
border-top:1px solid rgba(0,255,136,0.28);
z-index:200;
}

.bottom-nav a{
color:#00ff88;
text-decoration:none;
}

.nav-item{
text-align:center;
font-size:11px;
}

.nav-item span{
display:block;
font-size:14px;
}

.page-scope a,
.page-scope .visit-chip,
.page-scope .brand-chip,
.page-scope .social-box,
.page-scope .chip{
color:#7fffd4 !important;
text-decoration:none !important;
}

.guide-carousel-wrap{
position:relative;
overflow:hidden;
}

.guide-carousel-title{
font-size:14px;
font-weight:700;
color:#66ffb3;
text-align:center;
margin:5px 0;
}

.guide-carousel{
display:flex;
align-items:flex-start;
gap:6px;
overflow-x:auto;
scroll-behavior:smooth;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
padding:8px 10px;
}

.guide-carousel::-webkit-scrollbar{
display:none;
}

.guide-carousel .guide-card{
flex:0 0 180px;
width:180px;
aspect-ratio:1/1;
height:auto;
scroll-snap-align:start;
}

.carousel-arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:44px;
height:44px;
border-radius:50%;
border:1px solid rgba(255,255,255,0.35);
cursor:pointer;
z-index:20;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
font-weight:900;
color:#ffffff;
background:rgba(255,255,255,0.08);
backdrop-filter:blur(8px);
box-shadow:
0 6px 14px rgba(0,0,0,.65),
inset 0 1px 0 rgba(255,255,255,.35),
inset 0 -3px 6px rgba(0,0,0,.55);
}

.carousel-arrow.left{
left:4px;
}

.carousel-arrow.right{
right:4px;
}

.carousel-arrow:active{
transform:translateY(-50%) scale(.9);
}

.guide-card{
position:relative;
border-radius:18px;
padding:8px;
color:#fff;
display:flex;
flex-direction:column;
justify-content:space-between;
aspect-ratio:1/1;
overflow:hidden;
text-decoration:none;
background:linear-gradient(
135deg,
rgba(255,255,255,0.10),
rgba(255,255,255,0.02)
);
border:1px solid rgba(255,255,255,0.18);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.25),
inset 0 -8px 20px rgba(0,0,0,0.35),
0 8px 25px rgba(0,0,0,0.55);
transition:.35s ease;
}

.guide-card::before{
content:"";
position:absolute;
inset:0;
background:var(--card-color);
opacity:.85;
z-index:0;
}

.guide-card::after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:45%;
background:linear-gradient(
180deg,
rgba(255,255,255,0.55),
rgba(255,255,255,0.18),
transparent
);
opacity:.35;
pointer-events:none;
}

.guide-card span.gloss{
position:absolute;
top:-80%;
left:-40%;
width:60%;
height:220%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.35),
transparent
);
transform:rotate(25deg);
opacity:0;
transition:.6s;
}

.guide-card *{
position:relative;
z-index:2;
}

.guide-icon{
font-size:26px;
padding:7px 10px;
}

.guide-cta{
align-self:flex-start;
margin-left:10px;
margin-bottom:10px;
padding:9px 18px;
border-radius:999px;
font-size:12px;
font-weight:700;
text-decoration:none;
color:#ffffff;
background:linear-gradient(145deg,
rgba(255,255,255,.18),
rgba(0,0,0,.45)
);
box-shadow:
0 6px 14px rgba(0,0,0,.65),
inset 0 1px 0 rgba(255,255,255,.35),
inset 0 -2px 6px rgba(0,0,0,.6);
border:1px solid rgba(255,255,255,.35);
letter-spacing:.3px;
display:inline-block;
white-space:nowrap;
transform:translateZ(0);
}

.guide-cta:active{
transform:translateY(2px);
box-shadow:
0 2px 6px rgba(0,0,0,.7),
inset 0 3px 6px rgba(0,0,0,.7);
}

@media(max-width:600px){

.product-grid.active{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.carousel-arrow{
width:36px;
height:36px;
font-size:18px;
opacity:.9;
}

}