/* ================================================================
   SRS AIRBAG — CRYPTO / WEB3 PREMIUM DESIGN
   ================================================================ */

/* ----------------------------------------------------------------
   KEYFRAMES
   ---------------------------------------------------------------- */
@keyframes fadeInDown {
    from { opacity:0; transform:translateY(-28px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(36px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
    from { opacity:0; }
    to   { opacity:1; }
}
@keyframes slideInLeft {
    from { opacity:0; transform:translateX(-36px); }
    to   { opacity:1; transform:translateX(0); }
}
@keyframes slideInRight {
    from { opacity:0; transform:translateX(36px); }
    to   { opacity:1; transform:translateX(0); }
}
@keyframes scaleIn {
    from { opacity:0; transform:scale(0.90); }
    to   { opacity:1; transform:scale(1); }
}

/* Orb drift */
@keyframes orbDrift1 {
    0%,100% { transform:translate(0,0)   scale(1);   }
    30%      { transform:translate(60px,-80px) scale(1.1); }
    65%      { transform:translate(-40px,40px) scale(0.9); }
}
@keyframes orbDrift2 {
    0%,100% { transform:translate(0,0)    scale(1);   }
    40%      { transform:translate(-70px,50px) scale(1.15); }
    70%      { transform:translate(50px,-30px) scale(0.88); }
}
@keyframes orbDrift3 {
    0%,100% { transform:translate(0,0)   scale(1);   }
    50%      { transform:translate(40px,70px) scale(1.08); }
}

/* Shimmer sweep */
@keyframes shimmerSweep {
    0%   { background-position:-200% center; }
    100% { background-position: 200% center; }
}

/* Neon pulse */
@keyframes neonPulse {
    0%,100% { box-shadow: 0 0 8px  rgba(16,185,129,.4),
                           0 0 20px rgba(16,185,129,.2); }
    50%     { box-shadow: 0 0 18px rgba(16,185,129,.7),
                           0 0 40px rgba(16,185,129,.3); }
}

/* Border spin gradient trick  */
@keyframes rotateBorder {
    0%   { --angle:0deg; }
    100% { --angle:360deg; }
}

/* Tick glow for phone */
@keyframes phoneTick {
    0%,90%,100% { transform:rotate(0deg) scale(1); }
    93%          { transform:rotate(-12deg) scale(1.1); }
    97%          { transform:rotate(8deg)  scale(1.1); }
}

/* Float */
@keyframes floatY {
    0%,100% { transform:translateY(0); }
    50%      { transform:translateY(-10px); }
}

/* Gradient text shift */
@keyframes gradText {
    0%   { background-position:0% 50%; }
    50%  { background-position:100% 50%; }
    100% { background-position:0% 50%; }
}

/* Bar grow */
@keyframes barGrow {
    from { width:0; }
    to   { width:100%; }
}

/* Card enter stagger helper */
@keyframes cardPop {
    from { opacity:0; transform:translateY(24px) scale(0.96); }
    to   { opacity:1; transform:translateY(0)    scale(1);    }
}

/* ----------------------------------------------------------------
   CSS VARIABLES
   ---------------------------------------------------------------- */
:root {
    /* Brand */
    --g-green:   #10b981;
    --g-green2:  #06d6a0;
    --g-cyan:    #22d3ee;
    --g-purple:  #8b5cf6;
    --g-indigo:  #6366f1;
    --g-danger:  #f43f5e;

    /* Light-mode surfaces */
    --bg-main:   #f0f4f8;
    --card-bg:   #ffffff;
    --card-bg2:  #f8fafc;
    --nav-bg:    rgba(255,255,255,.88);
    --border:    rgba(0,0,0,.07);
    --text:      #0f172a;
    --text-2:    #475569;

    /* Glow colours */
    --glow-g:    rgba(16,185,129,.3);
    --glow-p:    rgba(139,92,246,.25);

    /* Social */
    --fb-blue:   #1877F2;
    --tt-dark:   #000000;

    /* Geometry */
    --r-sm:  10px;
    --r-md:  16px;
    --r-lg:  24px;
    --r-xl:  32px;

    /* Easing */
    --ease:  0.38s cubic-bezier(.4,0,.2,1);
    --ease-spring: 0.45s cubic-bezier(.34,1.56,.64,1);

    /* Shadows */
    --sh-sm: 0 2px 12px rgba(0,0,0,.06);
    --sh-md: 0 8px 32px rgba(0,0,0,.10);
    --sh-lg: 0 24px 64px rgba(0,0,0,.14);
    --sh-g:  0 8px 32px rgba(16,185,129,.28);
}

body.dark-mode {
    --bg-main:   #04080f;
    --card-bg:   rgba(12,22,40,.80);
    --card-bg2:  rgba(16,28,52,.60);
    --nav-bg:    rgba(4,8,15,.85);
    --border:    rgba(255,255,255,.07);
    --text:      #e2e8f0;
    --text-2:    #94a3b8;
    --glow-g:    rgba(16,185,129,.45);
    --glow-p:    rgba(139,92,246,.35);
    --sh-sm:     0 2px 12px rgba(0,0,0,.4);
    --sh-md:     0 8px 32px rgba(0,0,0,.5);
    --sh-lg:     0 24px 64px rgba(0,0,0,.65);
    --tt-dark:   #ffffff;
}

/* ----------------------------------------------------------------
   RESET
   ---------------------------------------------------------------- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

/* ----------------------------------------------------------------
   BODY + BACKGROUND SCENE
   ---------------------------------------------------------------- */
body {
    font-family:'Inter', system-ui, sans-serif;
    background: var(--bg-main);
    color: var(--text);
    line-height: 1.65;
    overflow-x: hidden;
    transition: background .4s, color .4s;
    min-height: 100vh;
}

/* Light-mode bg texture — subtle diagonal lines */
body::before {
    content:'';
    position:fixed;
    inset:0;
    background-image:
        linear-gradient(rgba(16,185,129,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16,185,129,.025) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events:none;
    z-index:0;
    transition: opacity .4s;
}

/* Dark-mode replaces with dot grid */
body.dark-mode::before {
    background-image:
        radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 28px 28px;
}

/* Animated ambient orbs */
body::after {
    content:'';
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
        radial-gradient(ellipse 700px 600px at 15% 30%,  rgba(16,185,129,.07) 0%, transparent 60%),
        radial-gradient(ellipse 600px 500px at 85% 10%,  rgba(139,92,246,.06) 0%, transparent 60%),
        radial-gradient(ellipse 500px 400px at 60% 85%,  rgba(34,211,238,.05) 0%, transparent 60%);
    animation: orbDrift1 18s ease-in-out infinite;
}

body.dark-mode::after {
    background:
        radial-gradient(ellipse 700px 600px at 15% 30%,  rgba(16,185,129,.12) 0%, transparent 60%),
        radial-gradient(ellipse 600px 500px at 85% 10%,  rgba(139,92,246,.10) 0%, transparent 60%),
        radial-gradient(ellipse 500px 400px at 60% 85%,  rgba(34,211,238,.08) 0%, transparent 60%);
}

/* Every direct child above the body layers */
body > * { position:relative; z-index:1; }

/* ----------------------------------------------------------------
   NAVBAR
   ---------------------------------------------------------------- */
.navbar {
    position:fixed;
    top:0; width:100%;
    z-index:1000;
    background: var(--nav-bg);
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    border-bottom: 1px solid var(--border);
    animation: fadeInDown .5s ease both;
    transition: background .4s, box-shadow .4s;
}

/* glowing bottom accent line */
.navbar::after {
    content:'';
    position:absolute;
    bottom:0; left:0; right:0;
    height:1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--g-green) 30%,
        var(--g-cyan) 55%,
        var(--g-purple) 80%,
        transparent 100%
    );
    background-size: 200% auto;
    animation: shimmerSweep 5s linear infinite;
    opacity:.8;
}

.nav-container {
    max-width:1400px;
    margin:0 auto;
    padding:13px 28px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo {
    display:flex; align-items:center; gap:12px;
    cursor:pointer;
    transition: var(--ease);
}
.logo:hover { transform:scale(1.05); }
.logo img {
    height:46px;
    filter: drop-shadow(0 0 10px var(--glow-g));
    transition: filter var(--ease);
}
.logo:hover img { filter: drop-shadow(0 0 20px rgba(16,185,129,.7)); }

.nav-right { display:flex; align-items:center; gap:16px; }

/* Social links */
.nav-socials { display:flex; gap:8px; font-size:1.15rem; align-items:center; }
.nav-socials a {
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px;
    border-radius:50%;
    text-decoration:none;
    border:1px solid var(--border);
    transition: var(--ease);
    position:relative;
    overflow:hidden;
}
.nav-socials a::before {
    content:'';
    position:absolute; inset:0;
    background:currentColor;
    opacity:0;
    transition: opacity var(--ease);
    border-radius:50%;
}
.nav-socials a:hover::before { opacity:.12; }
.nav-socials a:hover { transform:translateY(-3px) scale(1.1); border-color:currentColor; }
.fb-link { color:var(--fb-blue); }
.tt-link { color:var(--tt-dark); }

/* Phone */
.nav-phone-frame {
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 18px;
    border-radius:var(--r-md);
    color:var(--g-green);
    font-weight:700; font-size:.9rem;
    text-decoration:none;
    border:1.5px solid var(--g-green);
    background: rgba(16,185,129,.06);
    transition: var(--ease);
    position:relative; overflow:hidden;
}
.nav-phone-frame::before {
    content:'';
    position:absolute; inset:0;
    background: linear-gradient(135deg, var(--g-green), var(--g-cyan));
    opacity:0;
    transition: opacity var(--ease);
}
.nav-phone-frame:hover::before { opacity:1; }
.nav-phone-frame:hover { color:#fff; border-color:transparent; box-shadow:var(--sh-g); }
.nav-phone-frame span, .nav-phone-frame i { position:relative; z-index:1; }
.nav-phone-frame .fa-phone { animation: phoneTick 3.5s ease-in-out infinite; }

/* Lang picker */
.lang-selector {
    position:relative; cursor:pointer;
    background: var(--card-bg);
    padding:8px 13px;
    border-radius:var(--r-sm);
    display:flex; align-items:center; gap:8px;
    border:1.5px solid var(--border);
    transition: var(--ease);
    font-weight:600; font-size:.88rem;
}
.lang-selector:hover {
    border-color:var(--g-green);
    box-shadow:0 0 0 3px rgba(16,185,129,.12);
}
.current-lang { display:flex; align-items:center; gap:7px; font-weight:600; }
.lang-dropdown {
    position:absolute;
    top:calc(100% + 8px); right:0;
    background: var(--card-bg);
    border-radius:var(--r-md);
    box-shadow: var(--sh-lg);
    display:none; overflow:hidden;
    min-width:110px;
    border:1px solid var(--border);
    animation: scaleIn .18s ease both;
    transform-origin:top right;
    backdrop-filter:blur(16px);
}
.lang-dropdown.show { display:block; }
.lang-option { padding:11px 16px; transition: var(--ease); font-weight:600; font-size:.88rem; }
.lang-option:hover { background:var(--g-green); color:#fff; padding-left:22px; }

/* Theme button */
.theme-btn {
    background:var(--card-bg);
    border:1.5px solid var(--border);
    font-size:1.2rem;
    cursor:pointer;
    width:40px; height:40px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition: var(--ease);
}
.theme-btn:hover {
    border-color:var(--g-green);
    transform:rotate(25deg) scale(1.1);
    box-shadow:0 0 0 3px rgba(16,185,129,.15);
}

/* ----------------------------------------------------------------
   HERO SECTION
   ---------------------------------------------------------------- */
.hero-section {
    padding:112px 28px 50px;
    max-width:1400px;
    margin:0 auto;
    animation: fadeIn .7s ease .15s both;
}

.hero-container {
    display:grid;
    grid-template-columns:300px 1fr;
    gap:26px;
    align-items:start;
    position:relative;
}

/* ---- BRAND OVERLAY ---- */
.hero-brand-overlay {
    grid-column:2; grid-row:1;
    display:none;
    background: var(--card-bg);
    backdrop-filter:blur(20px);
    border-radius:var(--r-lg);
    box-shadow: var(--sh-lg), 0 0 0 1px var(--border);
    padding:28px;
    z-index:50;
    min-height:420px; max-height:420px;
    overflow-y:auto;
    animation: scaleIn .22s ease both;
    transform-origin:top left;
}
.hero-brand-overlay.show { display:block; }
.hero-brand-overlay::-webkit-scrollbar { width:4px; }
.hero-brand-overlay::-webkit-scrollbar-thumb { background:var(--g-green); border-radius:10px; }

.brand-grid-container { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.brand-grid-container .brand-link {
    display:flex; align-items:center; gap:8px;
}

.hero-brand-overlay .brand-link {
    display:flex; align-items:center; gap:8px;
    padding:8px 11px;
    border-radius:var(--r-sm);
    font-weight:600; font-size:.86rem;
    cursor:pointer;
    transition: var(--ease);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    border:1px solid transparent;
}
.hero-brand-overlay .brand-link span {
    overflow:hidden; text-overflow:ellipsis;
}
.brand-logo {
    width:24px; height:24px;
    object-fit:contain;
    flex-shrink:0;
}
.hero-brand-overlay .brand-link:hover {
    background:rgba(16,185,129,.1);
    color:var(--g-green);
    border-color:rgba(16,185,129,.25);
    transform:translateX(3px);
    text-shadow:0 0 8px rgba(16,185,129,.5);
}
.hero-brand-overlay .brand-overlay-title {
    font-size:.75rem; text-transform:uppercase; letter-spacing:2px;
    opacity:.5; margin-bottom:18px; padding-bottom:12px;
    border-bottom:1px solid var(--border);
    font-weight:800;
    grid-column:1/-1;
}

@media (max-width:1024px) { .hero-brand-overlay { display:none !important; } }

/* ---- SIDEBAR ---- */
.hero-sidebar-wrap { animation: slideInLeft .6s ease .25s both; }

.hero-sidebar {
    background: var(--card-bg);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    padding:24px 18px;
    border-radius:var(--r-lg);
    box-shadow: var(--sh-md);
    border:1px solid var(--border);
    position:relative;
    z-index:100;
    overflow:hidden;
}

/* Glowing top bar */
.hero-sidebar::before {
    content:'';
    position:absolute;
    top:0; left:0; right:0; height:2px;
    background: linear-gradient(90deg, var(--g-green), var(--g-cyan), var(--g-purple));
    background-size:200% auto;
    animation: shimmerSweep 4s linear infinite;
}

/* Ambient inner glow */
body.dark-mode .hero-sidebar::after {
    content:'';
    position:absolute;
    top:-60px; left:-60px;
    width:200px; height:200px;
    background: radial-gradient(circle, rgba(16,185,129,.08) 0%, transparent 70%);
    pointer-events:none;
}

.hero-sidebar h2 {
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:2.5px;
    color:var(--text-2);
    margin-bottom:18px;
    font-weight:800;
}

.sidebar-link {
    display:flex; justify-content:space-between; align-items:center;
    padding:11px 13px;
    margin-bottom:3px;
    cursor:pointer;
    border-radius:var(--r-sm);
    font-weight:600; font-size:.92rem;
    transition: var(--ease);
    border:1px solid transparent;
    position:relative;
    overflow:hidden;
}

.sidebar-link::after {
    content:'';
    position:absolute;
    left:0; top:0; bottom:0; width:2px;
    background: linear-gradient(180deg, var(--g-green), var(--g-cyan));
    transform:scaleY(0);
    transform-origin:center;
    transition: transform .28s ease;
    border-radius:0 2px 2px 0;
}
.sidebar-link:hover::after { transform:scaleY(1); }

.sidebar-link:hover {
    background:rgba(16,185,129,.08);
    color:var(--g-green);
    border-color:rgba(16,185,129,.15);
    padding-left:18px;
}

body.dark-mode .sidebar-link:hover {
    text-shadow:0 0 10px rgba(16,185,129,.5);
}

.sidebar-link.active {
    background: linear-gradient(135deg, rgba(16,185,129,.15), rgba(34,211,238,.08));
    color:var(--g-green);
    border-color:rgba(16,185,129,.3);
    box-shadow:inset 0 0 12px rgba(16,185,129,.08);
}

.sidebar-item { position:relative; }

.submenu {
    display:none;
    border-left:2px solid rgba(16,185,129,.3);
    margin-left:12px;
    padding:4px 0;
    margin-bottom:6px;
}
.submenu.open { display:block; animation: fadeInUp .22s ease both; }
.submenu .sidebar-link { padding-left:18px; font-size:.88rem; }

body.dark-mode .submenu { border-left-color:rgba(16,185,129,.4); }

.brand-submenu { display:none; padding-left:14px; }
.brand-submenu.open { display:block; animation: fadeInUp .2s ease both; }

/* ---- SLIDER ---- */
.hero-slider-wrapper {
    height:420px;
    position:relative;
    border-radius:var(--r-lg);
    overflow:hidden;
    grid-column:2; grid-row:1;
    animation: slideInRight .7s ease .2s both;
    /* Glowing border effect */
    box-shadow:
        0 0  0  1px rgba(16,185,129,.2),
        0 0 30px rgba(16,185,129,.12),
        var(--sh-lg);
}

/* Animated neon corner accents */
.hero-slider-wrapper::before {
    content:'';
    position:absolute;
    inset:-1px;
    border-radius:var(--r-lg);
    background: linear-gradient(
        135deg,
        rgba(16,185,129,.5) 0%,
        transparent 30%,
        transparent 70%,
        rgba(139,92,246,.4) 100%
    );
    pointer-events:none;
    z-index:3;
    opacity:.6;
}

.hero-slider-wrapper::after {
    content:'';
    position:absolute;
    inset:0;
    border-radius:var(--r-lg);
    box-shadow:inset 0 0 80px rgba(0,0,0,.4);
    pointer-events:none;
    z-index:2;
}

.slider-container { width:100%; height:100%; position:relative; }
.slider-track { display:flex; height:100%; transition: transform .8s cubic-bezier(.4,0,.2,1); }
.slider-img { min-width:100%; height:100%; object-fit:cover; }

.slider-arrow {
    position:absolute;
    top:50%; transform:translateY(-50%);
    background:rgba(0,0,0,.3);
    backdrop-filter:blur(10px);
    color:#fff;
    border:1.5px solid rgba(255,255,255,.2);
    width:50px; height:50px;
    border-radius:50%;
    cursor:pointer;
    font-size:1.1rem;
    z-index:10;
    transition: var(--ease);
    display:flex; align-items:center; justify-content:center;
}
.slider-arrow:hover {
    background: linear-gradient(135deg, var(--g-green), var(--g-cyan));
    border-color:transparent;
    transform:translateY(-50%) scale(1.15);
    box-shadow: 0 0 20px var(--glow-g), var(--sh-g);
}
.slider-arrow.prev { left:18px; }
.slider-arrow.next { right:18px; }

/* ----------------------------------------------------------------
   PRODUCT SECTION
   ---------------------------------------------------------------- */
.content-section {
    padding:50px 28px 100px;
    width:100%;
    position:relative;
    z-index:1;
}

.container { max-width:1400px; margin:0 auto; width:100%; }

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

/* ---- PRODUCT CARD ---- */
.product-card {
    background: var(--card-bg);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-radius:var(--r-lg);
    padding:18px;
    text-align:center;
    cursor:pointer;
    border:1px solid var(--border);
    box-shadow: var(--sh-sm);
    transition:
        transform var(--ease-spring),
        box-shadow .35s ease,
        border-color .35s ease;
    position:relative;
    overflow:hidden;
    animation: cardPop .55s ease both;
    will-change:transform;
}

/* Stagger */
.product-card:nth-child(1)  { animation-delay:.04s; }
.product-card:nth-child(2)  { animation-delay:.08s; }
.product-card:nth-child(3)  { animation-delay:.12s; }
.product-card:nth-child(4)  { animation-delay:.16s; }
.product-card:nth-child(5)  { animation-delay:.20s; }
.product-card:nth-child(6)  { animation-delay:.24s; }
.product-card:nth-child(7)  { animation-delay:.28s; }
.product-card:nth-child(8)  { animation-delay:.32s; }

/* Shimmer sweep on hover */
.product-card::before {
    content:'';
    position:absolute;
    top:0; left:-100%; width:60%; height:100%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255,255,255,.06) 50%,
        transparent 100%
    );
    transition: left .6s ease;
    pointer-events:none;
    z-index:2;
}
.product-card:hover::before { left:140%; }

/* Glowing border gradient — uses conic trick via inset pseudo + clip */
.product-card::after {
    content:'';
    position:absolute;
    inset:0;
    border-radius:var(--r-lg);
    padding:1px;
    background: linear-gradient(135deg, var(--g-green), var(--g-cyan), var(--g-purple));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite:exclude;
    opacity:0;
    transition: opacity .35s ease;
    pointer-events:none;
}
.product-card:hover::after { opacity:1; }

.product-card:hover {
    transform:translateY(-10px) scale(1.02);
    box-shadow:
        0 0 0  1px rgba(16,185,129,.2),
        0 0 20px rgba(16,185,129,.15),
        0 0 50px rgba(16,185,129,.08),
        var(--sh-lg);
    border-color:transparent;
    z-index:2;
}

body.dark-mode .product-card {
    background: rgba(12,22,40,.70);
}
body.dark-mode .product-card:hover {
    background: rgba(12,28,50,.85);
}

/* Image wrapper */
.product-img-placeholder {
    width:100%; height:210px;
    background: var(--card-bg2);
    border-radius:var(--r-md);
    margin-bottom:14px;
    overflow:hidden;
    position:relative;
    transition: var(--ease);
}
body.dark-mode .product-img-placeholder {
    background: rgba(255,255,255,.03);
}

.product-img-placeholder img {
    width:100%; height:100%;
    object-fit:contain;
    transition: transform .55s cubic-bezier(.34,1.56,.64,1);
    will-change:transform;
}
.product-card:hover .product-img-placeholder img {
    transform:scale(1.1);
}

/* Subtle inner glow on image on hover */
.product-img-placeholder::after {
    content:'';
    position:absolute; inset:0;
    background: radial-gradient(circle at center, rgba(16,185,129,.06) 0%, transparent 70%);
    opacity:0;
    transition: opacity var(--ease);
    pointer-events:none;
}
.product-card:hover .product-img-placeholder::after { opacity:1; }

.product-card h3 {
    font-size:.98rem; font-weight:700;
    margin-bottom:8px;
    color:var(--text);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    transition: color var(--ease);
}
.product-card:hover h3 { color:var(--g-green); }

body.dark-mode .product-card:hover h3 {
    text-shadow:0 0 12px rgba(16,185,129,.5);
}

/* Price — gradient text */
.price {
    font-weight:800;
    font-size:1.2rem;
    background: linear-gradient(135deg, var(--g-green), var(--g-cyan));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    display:inline-block;
    background-size:200% auto;
    animation: gradText 4s linear infinite;
}

/* ----------------------------------------------------------------
   PAGINATION
   ---------------------------------------------------------------- */
.pagination {
    display:flex; flex-wrap:wrap;
    justify-content:center; align-items:center;
    gap:10px; margin-top:50px; padding:24px 0;
    animation: fadeInUp .5s ease both;
}

.pagination button {
    min-width:44px; height:44px; padding:0 14px;
    border:1.5px solid var(--border);
    background: var(--card-bg);
    color:var(--text);
    border-radius:var(--r-md);
    font-weight:700; font-size:.88rem;
    cursor:pointer;
    transition: var(--ease);
    backdrop-filter:blur(10px);
}
.pagination button:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--g-green), var(--g-cyan));
    color:#fff;
    border-color:transparent;
    transform:translateY(-3px);
    box-shadow: var(--sh-g);
}
body.dark-mode .pagination button:hover:not(:disabled) {
    box-shadow: 0 0 20px var(--glow-g);
}
.pagination button.active {
    background: linear-gradient(135deg, var(--g-green), var(--g-cyan));
    color:#fff;
    border-color:transparent;
    box-shadow: var(--sh-g);
    transform:scale(1.08);
}
.pagination button:disabled { opacity:.3; cursor:not-allowed; }

/* ----------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------- */
.footer {
    background: var(--card-bg);
    backdrop-filter:blur(20px);
    padding:72px 28px 52px;
    border-top:1px solid var(--border);
    position:relative;
    overflow:hidden;
}

body.dark-mode .footer {
    background: rgba(4,8,15,.92);
}

/* Top animated gradient line */
.footer::before {
    content:'';
    position:absolute;
    top:0; left:0; right:0; height:2px;
    background: linear-gradient(
        90deg,
        var(--g-green), var(--g-cyan), var(--g-purple), var(--g-green)
    );
    background-size:200% auto;
    animation: shimmerSweep 4s linear infinite;
}

/* Dark-mode ambient glow inside footer */
body.dark-mode .footer::after {
    content:'';
    position:absolute;
    bottom:-100px; left:50%;
    transform:translateX(-50%);
    width:600px; height:400px;
    background: radial-gradient(ellipse, rgba(16,185,129,.07) 0%, transparent 70%);
    pointer-events:none;
}

.footer-container {
    max-width:1400px; margin:0 auto;
    display:grid; grid-template-columns:1fr 1fr;
    gap:60px;
    position:relative; z-index:1;
}

.footer-section h3 {
    font-size:1rem; font-weight:800;
    text-transform:uppercase; letter-spacing:2px;
    margin-bottom:28px;
    background: linear-gradient(135deg, var(--g-green), var(--g-cyan));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    position:relative; padding-bottom:14px;
}

.footer-section h3::after {
    content:'';
    position:absolute;
    bottom:0; left:0; width:36px; height:2px;
    background: linear-gradient(90deg, var(--g-green), var(--g-cyan));
    border-radius:4px;
    transition: width .4s ease;
}
.footer-section:hover h3::after { width:72px; }

.footer-phone-box { margin-bottom:18px; }

#footer-phone {
    display:inline-flex; align-items:center; gap:12px;
    background: linear-gradient(135deg, var(--g-green), var(--g-cyan));
    color:#fff;
    padding:14px 28px;
    border-radius:var(--r-md);
    text-decoration:none;
    font-weight:800; font-size:1.05rem;
    transition: var(--ease);
    box-shadow: var(--sh-g);
    position:relative; overflow:hidden;
    animation: neonPulse 2.5s ease-in-out infinite;
}
#footer-phone::before {
    content:'';
    position:absolute; inset:0;
    background: linear-gradient(135deg, rgba(255,255,255,.15), transparent);
    opacity:0; transition: opacity var(--ease);
}
#footer-phone:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(16,185,129,.5); }
#footer-phone:hover::before { opacity:1; }

.footer-map-wrap {
    margin:22px 0;
    border-radius:var(--r-lg);
    overflow:hidden;
    box-shadow:var(--sh-md);
    border:1px solid var(--border);
    transition: var(--ease);
}
.footer-map-wrap:hover {
    box-shadow:
        0 0 0 1px rgba(16,185,129,.2),
        0 0 24px rgba(16,185,129,.12),
        var(--sh-lg);
    transform:scale(1.008);
}
.footer-map-wrap iframe {
    display:block; width:100%; max-width:600px; height:280px; border:0;
}

.footer-socials { margin-top:22px; display:flex; gap:14px; }
.footer-socials a {
    font-weight:700;
    text-decoration:none;
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 18px;
    border-radius:var(--r-md);
    font-size:.9rem;
    border:1.5px solid var(--border);
    transition: var(--ease);
    position:relative; overflow:hidden;
}
.footer-socials a::before {
    content:'';
    position:absolute; inset:0;
    opacity:0; transition: opacity var(--ease);
}
.footer-socials .fb-link { color:var(--fb-blue); border-color:rgba(24,119,242,.2); }
.footer-socials .fb-link::before { background:var(--fb-blue); }
.footer-socials .fb-link:hover { color:#fff; border-color:var(--fb-blue); transform:translateY(-3px); box-shadow:0 8px 24px rgba(24,119,242,.4); }
.footer-socials .fb-link:hover::before { opacity:1; }
.footer-socials .fb-link span { position:relative; z-index:1; }
.footer-socials .fb-link i  { position:relative; z-index:1; }

.footer-socials .tt-link { color:var(--tt-dark); border-color:rgba(0,0,0,.12); }
.footer-socials .tt-link::before { background:var(--tt-dark); }
.footer-socials .tt-link:hover { color:#fff; border-color:var(--tt-dark); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.35); }
.footer-socials .tt-link:hover::before { opacity:1; }
.footer-socials .tt-link span,
.footer-socials .tt-link i  { position:relative; z-index:1; }
body.dark-mode .footer-socials .tt-link { color:#fff; border-color:rgba(255,255,255,.12); }
body.dark-mode .footer-socials .tt-link::before { background:#fff; }
body.dark-mode .footer-socials .tt-link:hover { color:#000; }

/* Working hours */
.hours-list { display:flex; flex-direction:column; gap:3px; }
.hour-item {
    display:flex; justify-content:space-between; align-items:center;
    padding:11px 14px;
    border-radius:var(--r-sm);
    font-size:.93rem;
    border:1px solid transparent;
    transition: var(--ease);
    cursor:default;
}
.hour-item:hover {
    background:rgba(16,185,129,.06);
    border-color:rgba(16,185,129,.15);
    transform:translateX(5px);
}
.hour-item strong {
    font-weight:700;
    background: linear-gradient(135deg, var(--g-green), var(--g-cyan));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.hour-item.sun { color:var(--g-danger); font-weight:700; }
.hour-item.sun:hover { background:rgba(244,63,94,.06); border-color:rgba(244,63,94,.15); }
.hour-item.sun strong {
    background: none;
    -webkit-text-fill-color:var(--g-danger);
    color:var(--g-danger);
}

/* ----------------------------------------------------------------
   LIGHTBOX
   ---------------------------------------------------------------- */
.lightbox {
    display:none;
    position:fixed; z-index:10000; inset:0;
    background:rgba(0,0,0,.97);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    align-items:center; justify-content:center; flex-direction:column;
}

.lightbox-content {
    width:90%; height:90%;
    display:flex; flex-direction:column;
    justify-content:center; align-items:center;
    position:relative;
    animation: scaleIn .35s cubic-bezier(.34,1.56,.64,1) both;
}

#lb-img {
    max-width:100%; max-height:82vh;
    object-fit:contain;
    border-radius:var(--r-md);
    box-shadow: 0 0 0 1px rgba(16,185,129,.2), 0 30px 80px rgba(0,0,0,.7);
}

#lb-cap {
    color:rgba(255,255,255,.88);
    margin-top:20px; font-size:1.1rem; font-weight:600; letter-spacing:.5px;
}

.lightbox-close {
    position:absolute;
    top:22px; right:28px;
    color:rgba(255,255,255,.7);
    font-size:36px; cursor:pointer;
    z-index:10002;
    width:48px; height:48px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    transition: var(--ease);
}
.lightbox-close:hover {
    color:#fff;
    background:var(--g-danger);
    border-color:var(--g-danger);
    transform:rotate(90deg) scale(1.1);
    box-shadow:0 0 20px rgba(244,63,94,.5);
}

.lightbox-arrow {
    position:absolute; top:50%; transform:translateY(-50%);
    background:rgba(255,255,255,.07);
    backdrop-filter:blur(8px);
    color:#fff;
    border:1.5px solid rgba(255,255,255,.12);
    width:58px; height:58px; font-size:22px;
    cursor:pointer; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition: var(--ease);
    z-index:10002;
}
.lightbox-arrow:hover {
    background: linear-gradient(135deg, var(--g-green), var(--g-cyan));
    border-color:transparent;
    transform:translateY(-50%) scale(1.12);
    box-shadow: 0 0 20px var(--glow-g);
}
.lightbox-arrow.prev { left:24px; }
.lightbox-arrow.next { right:24px; }

/* ----------------------------------------------------------------
   MOBILE MENU BUTTON
   ---------------------------------------------------------------- */
.mobile-cat-btn {
    display:none; align-items:center; justify-content:center; gap:10px;
    width:100%; padding:13px 18px;
    background: linear-gradient(135deg, var(--g-green), var(--g-cyan));
    color:#fff;
    border:none; border-radius:var(--r-md);
    font-weight:700; font-size:1rem;
    cursor:pointer;
    transition: var(--ease);
    box-shadow: var(--sh-g);
    position:relative; overflow:hidden;
}
.mobile-cat-btn::before {
    content:'';
    position:absolute; inset:0;
    background:rgba(255,255,255,.12);
    opacity:0; transition: opacity var(--ease);
}
.mobile-cat-btn:hover::before { opacity:1; }
.mobile-cat-btn:hover { transform:translateY(-2px); box-shadow:0 12px 30px var(--glow-g); }
.mobile-cat-btn:active { transform:scale(.98); }

/* ----------------------------------------------------------------
   SCROLLBAR
   ---------------------------------------------------------------- */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg-main); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--g-green), var(--g-cyan));
    border-radius:10px;
}

/* ----------------------------------------------------------------
   SELECTION
   ---------------------------------------------------------------- */
::selection {
    background:rgba(16,185,129,.25);
    color:var(--g-green);
}

/* ----------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width:1280px) {
    .shop-grid { grid-template-columns:repeat(3,1fr); }
}

@media (max-width:1024px) {
    .logo img { height:32px; }
    .nav-container .nav-phone-frame span.nav-phone-num { display:none; }
    .nav-phone-frame { padding:8px 11px; }
    .nav-right { gap:8px; }
    .nav-socials { gap:6px; font-size:1.05rem; }

    .hero-section { padding:95px 16px 30px; }
    .hero-container { grid-template-columns:1fr; gap:16px; }

    .hero-slider-wrapper {
        grid-column:1; grid-row:1; order:1;
        height:260px;
        animation: scaleIn .6s ease both;
    }

    .hero-sidebar-wrap {
        grid-column:1; grid-row:2; order:2; width:100%;
    }

    .mobile-cat-btn { display:flex; }
    .hero-sidebar { display:none; margin-top:10px; }
    .hero-sidebar-wrap.open .hero-sidebar {
        display:block;
        animation: fadeInUp .28s ease both;
    }

    .submenu { background:transparent; }
    .submenu .sidebar-link { padding-left:18px; }

    .brand-submenu {
        display:none;
        padding:8px 4px;
        margin-left:8px;
        background: rgba(16,185,129,.04);
        border-radius: var(--r-md);
        border:1px solid var(--border);
    }
    .brand-submenu.open { display:grid; grid-template-columns:1fr 1fr; gap:10px; animation: fadeInUp .25s ease both; }
    .brand-submenu .brand-link {
        display:flex; align-items:center; justify-content:center; gap:8px;
        padding:14px 12px;
        background: var(--card-bg);
        border:1px solid var(--border);
        border-radius: var(--r-sm);
        font-weight:600;
        font-size:.9rem;
        text-align:center;
        transition: var(--ease);
        box-shadow: var(--sh-sm);
    }
    .brand-submenu .brand-link span {
        overflow:hidden; text-overflow:ellipsis;
    }
    .brand-submenu .brand-logo {
        width:28px; height:28px;
        object-fit:contain;
        flex-shrink:0;
    }
    .brand-submenu .brand-link:hover {
        background: linear-gradient(135deg, rgba(16,185,129,.15), rgba(34,211,238,.08));
        border-color:var(--g-green);
        color:var(--g-green);
        transform:translateY(-2px);
        box-shadow: var(--sh-g);
    }

    .content-section { padding:24px 12px 70px; }
    .shop-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
    .product-img-placeholder { height:150px; }
    .product-card h3 { font-size:.86rem; }

    .footer-container { grid-template-columns:1fr; gap:40px; }
    .footer { padding:50px 16px 40px; }

    .lightbox-arrow { width:46px; height:46px; font-size:18px; }
    .lightbox-arrow.prev { left:10px; }
    .lightbox-arrow.next { right:10px; }
}

@media (max-width:480px) {
    .shop-grid { gap:10px; }
    .product-card { padding:12px; }
    .product-img-placeholder { height:130px; }
    .footer-socials { flex-direction:column; gap:10px; }
    .footer-socials a { justify-content:center; }
}