:root {
            --tc: #FF4500;
            --tc2: #FF6B35;
            --tc-dk: #1A0500;
            --tc-md: #2D0E00;
            --tc-lt: #FFF3EE;
            --tc-gl: rgba(255, 69, 0, .12);
            --ss: #00A8E0;
            --ss2: #00D4FF;
            --ss-dk: #001420;
            --ss-md: #002030;
            --ss-lt: #EEF9FF;
            --ss-gl: rgba(0, 168, 224, .12);
            --bg: #F5F6F9;
            --white: #fff;
            --g1: #F0F2F5;
            --g2: #E0E3EA;
            --g3: #9BA5B8;
            --txt: #111827;
            --txt2: #4B5563;
            --r1: 8px;
            --r2: 14px;
            --r3: 22px;
            --sh1: 0 2px 8px rgba(0, 0, 0, .06);
            --sh2: 0 8px 32px rgba(0, 0, 0, .10);
            --sh3: 0 24px 64px rgba(0, 0, 0, .16);
            --ease: cubic-bezier(.4, 0, .2, 1);
            --t: .28s;
            --brand-color: var(--tc);
            --brand-color2: var(--tc2);
            --brand-dk: var(--tc-dk);
            --brand-md: var(--tc-md);
            --brand-lt: var(--tc-lt);
            --brand-gl: var(--tc-gl);
            /* ── Glassmorphism tokens ── */
            --glass-bg: rgba(255, 255, 255, .55);
            --glass-bg-hover: rgba(255, 255, 255, .72);
            --glass-border: rgba(255, 255, 255, .65);
            --glass-blur: blur(14px) saturate(160%);
            --glass-shadow: 0 10px 28px rgba(15, 23, 42, .16), 0 2px 4px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(15, 23, 42, .08);
            --glass-shadow-hover: 0 18px 40px rgba(15, 23, 42, .22), 0 3px 6px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(15, 23, 42, .10);
            --glass-shadow-active: 0 2px 6px rgba(15, 23, 42, .14), inset 0 3px 6px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .35);
            --glass-highlight: linear-gradient(180deg, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, .12) 35%, rgba(255, 255, 255, 0) 65%);
        }
        
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            -webkit-tap-highlight-color: transparent;
        }
        
        html {
            scroll-behavior: smooth;
            -webkit-text-size-adjust: 100%;
        }
        
        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--bg);
            color: var(--txt);
            overflow-x: hidden;
            min-height: 100vh;
            min-height: 100dvh;
            -webkit-font-smoothing: antialiased;
        }
        
        img {
            display: block;
            max-width: 100%;
        }
        
        button,
        a {
            touch-action: manipulation;
        }
        
        button {
            cursor: pointer;
            font-family: inherit;
            border: none;
            background: none;
        }
        /* ── TOPBAR ── */
        
        .topbar {
            position: sticky;
            top: 0;
            z-index: 100;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 28px;
            gap: 16px;
            background: rgba(255, 255, 255, .82);
            backdrop-filter: blur(18px) saturate(180%);
            border-bottom: 1px solid rgba(255, 255, 255, .6);
            box-shadow: 0 1px 0 rgba(0, 0, 0, .06), var(--sh1);
            transition: box-shadow var(--t) var(--ease);
        }
        
        .topbar.scrolled {
            box-shadow: var(--sh2);
        }
        /* ══ DYNAMIC CLOCK ══ */
        
        #digitalClock {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            flex-shrink: 0;
            background: var(--brand-lt, #fff3ee);
            border: 1.5px solid rgba(255, 69, 0, .22);
            border-radius: 10px;
            padding: 5px 12px 4px;
            position: relative;
            overflow: hidden;
            transition: background .4s, border-color .4s;
            cursor: default;
            min-width: 112px;
        }
        
        #digitalClock::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 69, 0, .08) 0%, transparent 60%);
            pointer-events: none;
        }
        
        #digitalClock::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--brand-color, #FF4500), var(--brand-color2, #FF6B35), transparent);
            opacity: .7;
        }
        
        .clock-segments {
            display: flex;
            align-items: center;
            gap: 1px;
            font-family: 'Barlow Condensed', monospace;
            font-weight: 900;
            font-size: 1.3rem;
            letter-spacing: 2px;
            line-height: 1;
            font-variant-numeric: tabular-nums;
            color: var(--brand-color, #FF4500);
            text-shadow: 0 0 8px rgba(255, 69, 0, .5);
            transition: color .4s, text-shadow .4s;
        }
        
        .clock-digit {
            display: inline-block;
            min-width: 1.05ch;
            text-align: center;
            transition: transform .12s cubic-bezier(.34, 1.56, .64, 1), opacity .12s;
        }
        
        .clock-digit.flip {
            animation: digitFlip .18s ease-out forwards;
        }
        
        @keyframes digitFlip {
            0% {
                transform: translateY(-4px) scaleY(.7);
                opacity: .4;
            }
            60% {
                transform: translateY(1px) scaleY(1.05);
                opacity: 1;
            }
            100% {
                transform: translateY(0) scaleY(1);
                opacity: 1;
            }
        }
        
        .clock-sep {
            color: var(--brand-color, #FF4500);
            opacity: .45;
            animation: sepBlink 1s step-end infinite;
            margin: 0 1px;
            font-size: 1.1rem;
            line-height: 1;
            align-self: center;
            transition: color .4s;
        }
        
        @keyframes sepBlink {
            50% {
                opacity: 0;
            }
        }
        
        .clock-bar-wrap {
            width: 100%;
            height: 2px;
            background: rgba(255, 69, 0, .15);
            border-radius: 2px;
            overflow: hidden;
        }
        
        .clock-bar {
            height: 100%;
            border-radius: 2px;
            background: linear-gradient(90deg, var(--brand-color, #FF4500), var(--brand-color2, #FF6B35));
            transition: width .95s linear, background .4s;
            box-shadow: 0 0 6px var(--brand-color, #FF4500);
        }
        
        .clock-date {
            font-family: 'DM Sans', sans-serif;
            font-size: .58rem;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--brand-color, #FF4500);
            white-space: nowrap;
            transition: color .4s;
        }
        
        .clock-day-dot {
            opacity: .5;
            margin: 0 3px;
        }
        
        .logo {
            font-family: 'Barlow Condensed', sans-serif;
            font-weight: 900;
            font-size: 1.35rem;
            letter-spacing: -.5px;
            color: var(--txt);
            white-space: nowrap;
            text-transform: uppercase;
        }
        
        .logo em {
            color: var(--brand-color);
            font-style: normal;
            transition: color var(--t);
        }
        /* pill tabs */
        
        .tabs {
            display: flex;
            gap: 4px;
            background: rgba(240, 242, 245, .55);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid rgba(255, 255, 255, .55);
            border-radius: 999px;
            padding: 4px;
            position: relative;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 8px rgba(15, 23, 42, .06);
        }
        
        .tab {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            padding: 7px 18px;
            border-radius: 999px;
            font-family: 'Barlow Condensed', sans-serif;
            font-weight: 700;
            font-size: .88rem;
            letter-spacing: .8px;
            text-transform: uppercase;
            color: var(--txt2);
            transition: color var(--t), transform var(--t) cubic-bezier(.34, 1.56, .64, 1);
            position: relative;
            z-index: 1;
            white-space: nowrap;
            background: transparent;
            border: none;
            cursor: pointer;
        }
        
        .tab .tab-ico {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            transition: transform var(--t) cubic-bezier(.34, 1.56, .64, 1), color var(--t);
            opacity: .85;
        }
        
        .tab:hover:not(.active) {
            color: var(--txt);
        }
        
        .tab:hover:not(.active) .tab-ico {
            opacity: 1;
            transform: scale(1.12);
        }
        
        .tab-ink {
            position: absolute;
            top: 4px;
            bottom: 4px;
            border-radius: 999px;
            transition:
                left .42s cubic-bezier(.34, 1.56, .64, 1),
                width .42s cubic-bezier(.34, 1.56, .64, 1),
                background .35s var(--ease),
                box-shadow .35s var(--ease);
            pointer-events: none;
            border: 1px solid rgba(255, 255, 255, .45);
            box-shadow: 0 6px 18px rgba(15, 23, 42, .25), 0 2px 4px rgba(15, 23, 42, .12), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .15);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        
        /* Highlight superior tipo glass dentro de la pastilla */
        .tab-ink::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 55%);
            pointer-events: none;
            border-radius: inherit;
        }
        
        .tab.active {
            color: #fff;
            text-shadow: 0 1px 2px rgba(0, 0, 0, .15);
            animation: tab-bounce .42s cubic-bezier(.34, 1.56, .64, 1);
        }
        
        .tab.active .tab-ico {
            opacity: 1;
        }
        
        @keyframes tab-bounce {
            0%   { transform: scale(.92); }
            55%  { transform: scale(1.06); }
            100% { transform: scale(1); }
        }
        /* search */
        
        .search {
            position: relative;
        }
        
        .search svg {
            position: absolute;
            left: 11px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--g3);
            pointer-events: none;
        }
        
        .search input {
            border: 1.5px solid var(--g2);
            border-radius: 999px;
            padding: 7px 14px 7px 34px;
            font: 400 .83rem 'DM Sans', sans-serif;
            background: var(--g1);
            color: var(--txt);
            width: 190px;
            outline: none;
            transition: border-color var(--t), background var(--t), width var(--t) var(--ease);
        }
        
        .search input:focus {
            border-color: var(--brand-color);
            background: #fff;
            width: 230px;
        }
        /* ── HERO ── */
        
        .hero {
            position: relative;
            overflow: hidden;
            padding: 0;
            min-height: 260px;
            display: flex;
            align-items: stretch;
            transition: background 0.5s var(--ease);
        }
        
        .hero-bg {
            position: absolute;
            inset: 0;
            transition: background 0.6s var(--ease);
        }
        
        .hero-bg.tc {
            background: linear-gradient(135deg, var(--tc-dk) 0%, var(--tc-md) 50%, #3B1400 100%);
        }
        
        .hero-bg.ss {
            background: linear-gradient(135deg, var(--ss-dk) 0%, var(--ss-md) 50%, #002A40 100%);
        }
        /* animated grid lines */
        
        .hero-grid {
            position: absolute;
            inset: 0;
            opacity: .045;
            background-image: linear-gradient(rgba(255, 255, 255, .9) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .9) 1px, transparent 1px);
            background-size: 40px 40px;
            animation: gridMove 20s linear infinite;
        }
        
        @keyframes gridMove {
            from {
                background-position: 0 0;
            }
            to {
                background-position: 40px 40px;
            }
        }
        /* glowing orbs */
        
        .hero-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(60px);
            pointer-events: none;
            transition: background 0.5s var(--ease);
        }
        
        .hero-orb-1 {
            width: 420px;
            height: 420px;
            right: -80px;
            top: -120px;
            opacity: .18;
        }
        
        .hero-orb-2 {
            width: 240px;
            height: 240px;
            left: 30%;
            bottom: -80px;
            opacity: .12;
            animation: orbFloat 6s ease-in-out infinite alternate;
        }
        
        @keyframes orbFloat {
            from {
                transform: translateY(0) scale(1);
            }
            to {
                transform: translateY(-20px) scale(1.08);
            }
        }
        /* scan line effect */
        
        .hero-scan {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, .02) 50%, transparent 100%);
            background-size: 100% 4px;
            animation: scan 8s linear infinite;
        }
        
        @keyframes scan {
            from {
                background-position: 0 0;
            }
            to {
                background-position: 0 100%;
            }
        }
        
        .hero-inner {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            gap: 32px;
            padding: 48px 40px 40px;
            width: 100%;
            flex-wrap: wrap;
        }
        /* brand badge with ring animation */
        
        .hero-badge {
            flex-shrink: 0;
            width: 90px;
            height: 90px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Barlow Condensed', sans-serif;
            font-weight: 900;
            font-size: 1rem;
            letter-spacing: 1px;
            text-align: center;
            line-height: 1.1;
            color: #fff;
            position: relative;
            transition: background 0.5s var(--ease);
            animation: badgePop .5s var(--ease) both;
        }
        
        @keyframes badgePop {
            from {
                transform: scale(.7) rotate(-15deg);
                opacity: 0;
            }
            to {
                transform: scale(1) rotate(0);
                opacity: 1;
            }
        }
        
        .hero-badge::before,
        .hero-badge::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            border: 2px solid currentColor;
            opacity: .25;
            animation: ringPulse 2.5s ease-out infinite;
        }
        
        .hero-badge::before {
            inset: -8px;
            animation-delay: 0s;
        }
        
        .hero-badge::after {
            inset: -16px;
            animation-delay: .6s;
        }
        
        @keyframes ringPulse {
            0% {
                opacity: .35;
                transform: scale(.92);
            }
            60% {
                opacity: 0;
                transform: scale(1.18);
            }
            100% {
                opacity: 0;
                transform: scale(1.18);
            }
        }
        
        .hero-text {
            flex: 1;
            min-width: 260px;
        }
        
        .hero-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 12px;
            border-radius: 999px;
            font-size: .7rem;
            font-weight: 600;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .7);
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .14);
            margin-bottom: 12px;
            animation: slideIn .4s var(--ease) .1s both;
        }
        
        .hero-eyebrow::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: currentColor;
            opacity: .8;
            animation: blink 1.8s ease-in-out infinite;
        }
        
        @keyframes blink {
            0%,
            100% {
                opacity: .8
            }
            50% {
                opacity: .2
            }
        }
        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-16px);
            }
            to {
                opacity: 1;
                transform: none;
            }
        }
        
        .hero-title {
            font-family: 'Barlow Condensed', sans-serif;
            font-weight: 900;
            font-size: clamp(2rem, 5vw, 3.8rem);
            color: #fff;
            line-height: .95;
            letter-spacing: -1.5px;
            text-transform: uppercase;
            animation: slideIn .4s var(--ease) .15s both;
        }
        
        .hero-title em {
            font-style: italic;
            color: var(--brand-color2, #FF6B35);
            -webkit-text-stroke: 0px;
            text-shadow: 0 0 40px rgba(255, 107, 53, .6);
            transition: color .5s, text-shadow .5s;
        }
        
        .hero-sub {
            color: rgba(255, 255, 255, .6);
            font-size: .9rem;
            line-height: 1.6;
            margin-top: 10px;
            max-width: 500px;
            animation: slideIn .4s var(--ease) .2s both;
        }
        /* stats bar */
        
        .hero-stats {
            display: flex;
            gap: 24px;
            margin-top: 24px;
            flex-wrap: wrap;
            animation: slideIn .4s var(--ease) .25s both;
        }
        
        .stat {
            display: flex;
            flex-direction: column;
            gap: 1px;
        }
        
        .stat-num {
            font-family: 'Barlow Condensed', sans-serif;
            font-weight: 900;
            font-size: 1.8rem;
            line-height: 1;
            color: #fff;
            letter-spacing: -1px;
        }
        
        .stat-num span {
            font-size: 1rem;
            opacity: .6;
        }
        
        .stat-label {
            font-size: .7rem;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .45);
        }
        
        .stat-divider {
            width: 1px;
            background: rgba(255, 255, 255, .12);
            align-self: stretch;
        }
        /* ── FILTER BAR ── */
        
        .filter-bar {
            position: sticky;
            top: 60px;
            z-index: 90;
            background: rgba(255, 255, 255, .9);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--g2);
            padding: 12px 28px;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            transition: box-shadow var(--t);
        }
        
        .filter-label {
            font-size: .7rem;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--g3);
            margin-right: 4px;
        }
        
        .chip {
            padding: 5px 14px;
            border-radius: 999px;
            font-size: .78rem;
            font-weight: 500;
            border: 1px solid var(--glass-border);
            color: var(--txt2);
            background: var(--glass-bg);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            box-shadow: var(--glass-shadow);
            transition: all var(--t) var(--ease);
            white-space: nowrap;
        }
        
        .chip:hover {
            background: var(--glass-bg-hover);
            color: var(--txt);
            transform: translateY(-1px);
            box-shadow: var(--glass-shadow-hover);
        }
        
        .chip:active {
            transform: translateY(0);
            box-shadow: var(--glass-shadow-active);
        }
        
        .chip.on {
            background: linear-gradient(180deg, color-mix(in srgb, var(--brand-color) 22%, rgba(255, 255, 255, .65)) 0%, color-mix(in srgb, var(--brand-color) 14%, rgba(255, 255, 255, .55)) 100%);
            border-color: color-mix(in srgb, var(--brand-color) 50%, rgba(255, 255, 255, .6));
            color: var(--brand-color);
            font-weight: 700;
            box-shadow: 0 6px 18px var(--brand-gl), inset 0 1px 0 rgba(255, 255, 255, .85);
        }
        /* Parent chip (EV / ADAS) */
        
        .chip-parent {
            border-style: solid;
            border-width: 2px;
            font-weight: 600;
            gap: 5px;
        }
        
        .chip-parent.on {
            background: linear-gradient(180deg, color-mix(in srgb, var(--brand-color) 92%, white) 0%, var(--brand-color) 100%);
            color: #fff;
            border-color: color-mix(in srgb, var(--brand-color) 70%, white);
            box-shadow: 0 6px 18px var(--brand-gl), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .12);
            text-shadow: 0 1px 2px rgba(0, 0, 0, .12);
        }
        
        .chip-arrow {
            font-size: .65em;
            opacity: .75;
            margin-left: 2px;
        }
        /* Sub-bar */
        
        .ss-subbar {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 8px 0 2px 0;
            border-top: 1px dashed var(--g2);
            margin-top: 4px;
        }
        
        .chip-sub {
            font-size: .73rem;
            padding: 4px 12px;
            border-radius: 999px;
            background: var(--glass-bg);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--glass-border);
            box-shadow: var(--glass-shadow);
            color: var(--txt2);
            font-weight: 500;
            transition: all var(--t) var(--ease);
            white-space: nowrap;
        }
        
        .chip-sub:hover {
            border-color: color-mix(in srgb, var(--brand-color) 60%, var(--glass-border));
            color: var(--brand-color);
            transform: translateY(-1px);
            box-shadow: var(--glass-shadow-hover);
        }
        
        .chip-sub:active {
            transform: translateY(0);
            box-shadow: var(--glass-shadow-active);
        }
        
        .chip-sub.on {
            background: var(--brand-color);
            border-color: var(--brand-color);
            color: #fff;
            font-weight: 700;
            box-shadow: 0 2px 8px var(--brand-gl);
        }
        /* count badge */
        
        .count-badge {
            margin-left: auto;
            font-size: .78rem;
            font-weight: 600;
            color: var(--txt2);
            background: var(--g1);
            border-radius: 999px;
            padding: 4px 12px;
            transition: all var(--t);
        }
        /* ── GRID ── */
        
        .grid {
            padding: 28px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
            gap: 20px;
            max-width: 1600px;
            margin: 0 auto;
        }
        /* ── CARD ── */
        
        .card {
            background: var(--white);
            border-radius: var(--r3);
            overflow: hidden;
            border: 1.5px solid transparent;
            box-shadow: var(--sh1);
            display: flex;
            flex-direction: column;
            transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t);
            animation: cardIn .4s var(--ease) both;
            cursor: pointer;
        }
        
        @keyframes cardIn {
            from {
                opacity: 0;
                transform: translateY(24px) scale(.97);
            }
            to {
                opacity: 1;
                transform: none;
            }
        }
        
        .card:hover {
            transform: translateY(-6px) scale(1.01);
            box-shadow: var(--sh3);
        }
        
        .card.tc:hover {
            border-color: rgba(255, 69, 0, .25);
        }
        
        .card.ss:hover {
            border-color: rgba(0, 168, 224, .25);
        }
        /* card visual */
        
        .card-vis {
            position: relative;
            height: 185px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .card.tc .card-vis {
            background: linear-gradient(135deg, var(--tc-dk), #3B1400);
        }
        
        .card.ss .card-vis {
            background: linear-gradient(135deg, var(--ss-dk), #002A40);
        }
        /* shimmer on card vis hover */
        
        .card-vis::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .06) 50%, transparent 60%);
            transform: translateX(-100%);
            transition: transform 0s;
        }
        
        .card:hover .card-vis::after {
            transform: translateX(100%);
            transition: transform .6s var(--ease);
        }
        
        .card-brand {
            position: absolute;
            top: 12px;
            left: 12px;
            padding: 3px 10px;
            border-radius: 999px;
            font-family: 'Barlow Condensed', sans-serif;
            font-weight: 700;
            font-size: .65rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #fff;
        }
        
        .card.tc .card-brand {
            background: var(--tc);
        }
        
        .card.ss .card-brand {
            background: var(--ss);
        }
        
        .card-cat {
            position: absolute;
            top: 12px;
            right: 12px;
            padding: 3px 8px;
            border-radius: 999px;
            font-size: .65rem;
            font-weight: 500;
            background: rgba(255, 255, 255, .1);
            color: rgba(255, 255, 255, .75);
            backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, .14);
        }
        /* product image */
        
        .img-wrap {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .prod-img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 18px;
            transition: transform .5s var(--ease);
        }
        
        .card:hover .prod-img {
            transform: scale(1.09) translateY(-3px);
        }
        
        .fallback-icon {
            width: 76px;
            height: 76px;
            border-radius: 50%;
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            transition: transform .4s var(--ease);
        }
        
        .card.tc .fallback-icon {
            background: rgba(255, 69, 0, .15);
        }
        
        .card.ss .fallback-icon {
            background: rgba(0, 168, 224, .15);
        }
        
        .card:hover .fallback-icon {
            transform: scale(1.12) rotate(-4deg);
        }
        
        .img-err .prod-img {
            display: none;
        }
        
        .img-err .fallback-icon {
            display: flex;
        }
        /* new badge */
        
        .new-badge {
            position: absolute;
            bottom: 12px;
            left: 12px;
            padding: 2px 8px;
            border-radius: 4px;
            font-family: 'Barlow Condensed', sans-serif;
            font-weight: 700;
            font-size: .65rem;
            letter-spacing: 1px;
            text-transform: uppercase;
            background: #22C55E;
            color: #fff;
        }
        /* card body */
        
        .card-body {
            padding: 18px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .card-title {
            font-family: 'Barlow Condensed', sans-serif;
            font-weight: 700;
            font-size: 1.22rem;
            line-height: 1.15;
            color: var(--txt);
            margin-bottom: 7px;
        }
        
        .card-desc {
            font-size: .82rem;
            color: var(--txt2);
            line-height: 1.55;
            flex: 1;
            margin-bottom: 14px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .card-specs {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-bottom: 16px;
        }
        
        .pill {
            padding: 3px 9px;
            border-radius: var(--r1);
            font-size: .7rem;
            font-weight: 600;
            letter-spacing: .2px;
            transition: transform var(--t);
        }
        
        .pill:hover {
            transform: translateY(-1px);
        }
        
        .card.tc .pill {
            background: var(--tc-lt);
            color: var(--tc);
        }
        
        .card.ss .pill {
            background: var(--ss-lt);
            color: var(--ss);
        }
        
        .card-foot {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .btn-cta {
            flex: 1;
            padding: 9px 14px;
            border-radius: var(--r2);
            font-family: 'Barlow Condensed', sans-serif;
            font-weight: 700;
            font-size: .88rem;
            letter-spacing: .8px;
            text-transform: uppercase;
            color: #fff;
            text-align: center;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px) saturate(150%);
            -webkit-backdrop-filter: blur(10px) saturate(150%);
            border: 1px solid rgba(255, 255, 255, .35);
            text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
            transition: box-shadow var(--t), transform var(--t), filter var(--t);
        }
        
        .btn-cta::after {
            /* glass top highlight */
            content: '';
            position: absolute;
            inset: 0;
            background: var(--glass-highlight);
            pointer-events: none;
            border-radius: inherit;
        }
        
        .btn-cta::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, .22);
            transform: translateX(-101%);
            transition: transform .35s var(--ease);
            z-index: 1;
        }
        
        .btn-cta:hover::before {
            transform: translateX(0);
        }
        
        .btn-cta:hover {
            transform: translateY(-2px);
            filter: brightness(1.05);
        }
        
        .btn-cta:active {
            transform: translateY(0);
        }
        
        .card.tc .btn-cta {
            background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 88%, white) 0%, var(--tc) 60%, color-mix(in srgb, var(--tc) 92%, black) 100%);
            box-shadow: 0 10px 24px rgba(255, 69, 0, .45), 0 2px 4px rgba(255, 69, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .22);
        }
        
        .card.tc .btn-cta:hover {
            box-shadow: 0 16px 36px rgba(255, 69, 0, .60), 0 3px 6px rgba(255, 69, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .60), inset 0 -2px 0 rgba(0, 0, 0, .18);
        }
        
        .card.tc .btn-cta:active {
            box-shadow: 0 3px 10px rgba(255, 69, 0, .35), inset 0 3px 8px rgba(0, 0, 0, .30);
        }
        
        .card.ss .btn-cta {
            background: linear-gradient(180deg, color-mix(in srgb, var(--ss) 88%, white) 0%, var(--ss) 60%, color-mix(in srgb, var(--ss) 92%, black) 100%);
            box-shadow: 0 10px 24px rgba(0, 168, 224, .45), 0 2px 4px rgba(0, 168, 224, .25), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .22);
        }
        
        .card.ss .btn-cta:hover {
            box-shadow: 0 16px 36px rgba(0, 168, 224, .60), 0 3px 6px rgba(0, 168, 224, .30), inset 0 1px 0 rgba(255, 255, 255, .60), inset 0 -2px 0 rgba(0, 0, 0, .18);
        }
        
        .card.ss .btn-cta:active {
            box-shadow: 0 3px 10px rgba(0, 168, 224, .35), inset 0 3px 8px rgba(0, 0, 0, .30);
        }
        
        .btn-eye {
            width: 36px;
            height: 36px;
            border-radius: var(--r2);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid rgba(255, 255, 255, .55);
            box-shadow: var(--glass-shadow);
            transition: all var(--t);
        }
        
        .card.tc .btn-eye {
            background: linear-gradient(180deg, rgba(255, 243, 238, .9) 0%, rgba(255, 243, 238, .65) 100%);
            color: var(--tc);
        }
        
        .card.tc .btn-eye:hover {
            background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 88%, white) 0%, var(--tc) 60%, color-mix(in srgb, var(--tc) 92%, black) 100%);
            color: #fff;
            transform: translateY(-2px) scale(1.06);
            box-shadow: 0 14px 28px rgba(255, 69, 0, .50), 0 2px 4px rgba(255, 69, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .50), inset 0 -2px 0 rgba(0, 0, 0, .20);
            border-color: rgba(255, 255, 255, .35);
        }
        
        .card.tc .btn-eye:active {
            transform: translateY(0) scale(1);
            box-shadow: var(--glass-shadow-active);
        }
        
        .card.ss .btn-eye {
            background: linear-gradient(180deg, rgba(238, 249, 255, .9) 0%, rgba(238, 249, 255, .65) 100%);
            color: var(--ss);
        }
        
        .card.ss .btn-eye:hover {
            background: linear-gradient(180deg, color-mix(in srgb, var(--ss) 88%, white) 0%, var(--ss) 60%, color-mix(in srgb, var(--ss) 92%, black) 100%);
            color: #fff;
            transform: translateY(-2px) scale(1.06);
            box-shadow: 0 14px 28px rgba(0, 168, 224, .50), 0 2px 4px rgba(0, 168, 224, .25), inset 0 1px 0 rgba(255, 255, 255, .50), inset 0 -2px 0 rgba(0, 0, 0, .20);
            border-color: rgba(255, 255, 255, .35);
        }
        
        .card.ss .btn-eye:active {
            transform: translateY(0) scale(1);
            box-shadow: var(--glass-shadow-active);
        }
        /* ── EMPTY ── */
        
        .empty {
            grid-column: 1/-1;
            text-align: center;
            padding: 80px 20px;
            display: none;
        }
        
        .empty.show {
            display: block;
        }
        
        .empty svg {
            margin: 0 auto 16px;
            color: var(--g3);
        }
        
        .empty p {
            color: var(--g3);
        }
        /* ── MODAL ── */
        
        .overlay {
            position: fixed;
            inset: 0;
            z-index: 200;
            background: rgba(10, 14, 20, .65);
            backdrop-filter: blur(10px) saturate(120%);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s var(--ease);
        }
        
        .overlay.open {
            opacity: 1;
            pointer-events: all;
        }
        
        .modal {
            background: var(--white);
            border-radius: var(--r3);
            max-width: 660px;
            width: 100%;
            max-height: 88vh;
            overflow-y: auto;
            box-shadow: var(--sh3);
            transform: scale(.9) translateY(30px);
            transition: transform .35s var(--ease);
            position: relative;
        }
        
        .modal::before {
            content: '';
            display: none;
            width: 40px;
            height: 4px;
            border-radius: 2px;
            background: var(--g2);
            margin: 12px auto 0;
        }
        
        @media (max-width: 768px) {
            .modal::before {
                display: block;
            }
        }
        
        .overlay.open .modal {
            transform: scale(1) translateY(0);
        }
        
        .modal-vis {
            height: 220px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        .modal-vis.tc {
            background: linear-gradient(135deg, var(--tc-dk), #3B1400);
        }
        
        .modal-vis.ss {
            background: linear-gradient(135deg, var(--ss-dk), #002A40);
        }
        
        .modal-vis img {
            max-height: 170px;
            max-width: 80%;
            object-fit: contain;
            filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .4));
            animation: floatImg 4s ease-in-out infinite alternate;
        }
        
        @keyframes floatImg {
            from {
                transform: translateY(0);
            }
            to {
                transform: translateY(-8px);
            }
        }
        
        .modal-vis .fallback-lg {
            font-size: 4rem;
            animation: floatImg 4s ease-in-out infinite alternate;
        }
        
        .modal-close {
            position: absolute;
            top: 14px;
            right: 14px;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .15);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            line-height: 1;
            transition: background var(--t), transform var(--t);
        }
        
        .modal-close:hover {
            background: rgba(255, 255, 255, .3);
            transform: rotate(90deg);
        }
        
        .modal-glow {
            position: absolute;
            bottom: -40px;
            left: 50%;
            transform: translateX(-50%);
            width: 200px;
            height: 80px;
            border-radius: 50%;
            filter: blur(30px);
            opacity: .4;
            pointer-events: none;
            transition: background .5s;
        }
        
        .modal-body {
            padding: 26px 28px 28px;
        }
        
        .modal-eyebrow {
            font-size: .68rem;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 4px;
            transition: color .5s;
        }
        
        .modal-title {
            font-family: 'Barlow Condensed', sans-serif;
            font-weight: 900;
            font-size: 2rem;
            line-height: 1.05;
            color: var(--txt);
            margin-bottom: 14px;
        }
        
        .modal-desc {
            font-size: .9rem;
            line-height: 1.65;
            color: var(--txt2);
            margin-bottom: 22px;
        }
        
        .modal-sec {
            font-family: 'Barlow Condensed', sans-serif;
            font-weight: 700;
            font-size: .9rem;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--txt);
            margin-bottom: 10px;
        }
        
        .feat-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 7px;
            margin-bottom: 20px;
        }
        
        .feat-list li {
            display: flex;
            gap: 9px;
            font-size: .86rem;
            color: var(--txt2);
            line-height: 1.5;
        }
        
        .feat-list li::before {
            content: '';
            flex-shrink: 0;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            margin-top: 1px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.8 4.8 6.4 11.2l-3.2-3.2 1.2-1.2 2 2 5.2-5.2z'/%3E%3C/svg%3E");
            background-size: cover;
            transition: background-color .5s;
        }
        
        .feat-tc li::before {
            background-color: var(--tc);
        }
        
        .feat-ss li::before {
            background-color: var(--ss);
        }
        
        .modal-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 22px;
        }
        
        .mtag {
            padding: 4px 12px;
            border-radius: var(--r1);
            font-size: .76rem;
            font-weight: 600;
        }
        
        .mtag.tc {
            background: var(--tc-lt);
            color: var(--tc);
        }
        
        .mtag.ss {
            background: var(--ss-lt);
            color: var(--ss);
        }
        /* Price block in modal */
        
        .modal-price-block {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 14px 0 2px;
            padding: 10px 16px;
            border-radius: 10px;
            background: var(--brand-lt, #fff3ee);
            border: 1.5px solid rgba(255, 69, 0, .20);
            transition: background .4s, border-color .4s;
        }
        
        .modal-price-label {
            font-family: 'DM Sans', sans-serif;
            font-size: .68rem;
            font-weight: 600;
            letter-spacing: .8px;
            text-transform: uppercase;
            color: var(--txt2);
            line-height: 1.3;
        }
        
        .modal-price-iva {
            font-size: .6rem;
            font-weight: 400;
            color: var(--txt2);
            opacity: .7;
        }
        
        .modal-price-value {
            font-family: 'Barlow Condensed', sans-serif;
            font-weight: 900;
            font-size: 1.7rem;
            letter-spacing: .5px;
            line-height: 1;
            color: var(--brand-color, #FF4500);
            transition: color .4s;
        }
        
        .modal-foot {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .modal-foot .btn-cta {
            flex: none;
            padding: 12px 28px;
            font-size: .95rem;
            border-radius: var(--r2);
        }
        
        .btn-cancel {
            padding: 12px 20px;
            border-radius: var(--r2);
            border: 1px solid var(--glass-border);
            background: var(--glass-bg);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            box-shadow: var(--glass-shadow);
            font-size: .86rem;
            color: var(--txt2);
            transition: all var(--t);
        }
        
        .btn-cancel:hover {
            background: var(--glass-bg-hover);
            border-color: rgba(255, 255, 255, .8);
            color: var(--txt);
            transform: translateY(-1px);
            box-shadow: var(--glass-shadow-hover);
        }
        
        .btn-cancel:active {
            transform: translateY(0);
            box-shadow: var(--glass-shadow-active);
        }
        /* ── FOOTER ── */
        
        .footer {
            background: var(--txt);
            color: rgba(255, 255, 255, .45);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 14px;
            padding: 22px 28px;
            font-size: .78rem;
        }
        
        .footer strong {
            color: #fff;
        }
        
        .footer-dot {
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .2);
        }
        /* ── WELCOME SCREEN ── */
        
        .welcome-screen {
            position: relative;
            overflow: hidden;
            min-height: calc(100vh - 60px);
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--txt);
        }
        
        .welcome-bg {
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 20% 50%, rgba(255, 69, 0, .18) 0%, transparent 60%), radial-gradient(ellipse at 80% 50%, rgba(0, 168, 224, .18) 0%, transparent 60%), linear-gradient(160deg, #0a0f18 0%, #111827 100%);
        }
        
        .welcome-grid {
            position: absolute;
            inset: 0;
            opacity: .04;
            background-image: linear-gradient(rgba(255, 255, 255, .9) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .9) 1px, transparent 1px);
            background-size: 50px 50px;
            animation: gridMove 25s linear infinite;
        }
        
        .welcome-inner {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 60px 28px;
            animation: fadeUp .6s var(--ease) both;
        }
        
        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: none;
            }
        }
        
        .welcome-logo {
            font-family: 'Barlow Condensed', sans-serif;
            font-weight: 900;
            font-size: clamp(3rem, 8vw, 5.5rem);
            letter-spacing: -2px;
            text-transform: uppercase;
            line-height: 1;
            margin-bottom: 14px;
        }
        
        .wl-main {
            color: #fff;
        }
        
        .wl-accent {
            color: var(--tc);
        }
        
        .welcome-tagline {
            font-size: .75rem;
            font-weight: 600;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .4);
            margin-bottom: 10px;
        }
        
        .welcome-desc {
            font-size: 1.05rem;
            color: rgba(255, 255, 255, .6);
            margin-bottom: 48px;
            max-width: 420px;
            line-height: 1.6;
        }
        
        .welcome-btns {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            justify-content: center;
        }
        
        .wb {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 32px 36px;
            border-radius: 20px;
            min-width: 240px;
            max-width: 280px;
            width: 100%;
            position: relative;
            overflow: hidden;
            transition: transform .28s var(--ease), box-shadow .28s var(--ease);
            text-align: left;
            border: 1.5px solid transparent;
            cursor: pointer;
        }
        
        .wb::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, .06);
            transform: translateX(-101%);
            transition: transform .4s var(--ease);
        }
        
        .wb:hover::before {
            transform: translateX(0);
        }
        
        .wb:hover {
            transform: translateY(-6px) scale(1.02);
        }
        
        .wb-tc {
            background: linear-gradient(135deg, #1A0500 0%, #3B1400 100%);
            border-color: rgba(255, 69, 0, .3);
            box-shadow: 0 8px 32px rgba(255, 69, 0, .2);
        }
        
        .wb-tc:hover {
            box-shadow: 0 20px 60px rgba(255, 69, 0, .35);
            border-color: rgba(255, 69, 0, .6);
        }
        
        .wb-ss {
            background: linear-gradient(135deg, #001420 0%, #002A40 100%);
            border-color: rgba(0, 168, 224, .3);
            box-shadow: 0 8px 32px rgba(0, 168, 224, .2);
        }
        
        .wb-ss:hover {
            box-shadow: 0 20px 60px rgba(0, 168, 224, .35);
            border-color: rgba(0, 168, 224, .6);
        }
        
        .wb-icon {
            font-size: 2.4rem;
            margin-bottom: 16px;
            animation: orbFloat 5s ease-in-out infinite alternate;
        }
        
        .wb-label {
            font-family: 'Barlow Condensed', sans-serif;
            font-weight: 900;
            font-size: 2rem;
            letter-spacing: -.5px;
            color: #fff;
            line-height: 1;
            margin-bottom: 6px;
        }
        
        .wb-tc .wb-label {
            color: #FF6B35;
        }
        
        .wb-ss .wb-label {
            color: #00D4FF;
        }
        
        .wb-sub {
            font-size: .78rem;
            color: rgba(255, 255, 255, .5);
            line-height: 1.4;
            margin-bottom: 20px;
        }
        
        .wb-arrow {
            font-size: 1.4rem;
            color: rgba(255, 255, 255, .3);
            transition: transform .28s var(--ease), color .28s;
            align-self: flex-end;
        }
        
        .wb:hover .wb-arrow {
            transform: translateX(6px);
            color: rgba(255, 255, 255, .8);
        }
        /* catalogue PDF button in topbar */
        
        .btn-catalogue {
            display: none;
            align-items: center;
            gap: 7px;
            padding: 8px 16px;
            border-radius: 999px;
            font-family: 'Barlow Condensed', sans-serif;
            font-weight: 700;
            font-size: .82rem;
            letter-spacing: .8px;
            text-transform: uppercase;
            color: var(--brand-color, var(--tc));
            background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, color-mix(in srgb, var(--brand-lt, var(--tc-lt)) 70%, rgba(255, 255, 255, .6)) 100%);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid color-mix(in srgb, var(--brand-color, var(--tc)) 35%, rgba(255, 255, 255, .7));
            box-shadow: 0 6px 18px var(--brand-gl, var(--tc-gl)), inset 0 1px 0 rgba(255, 255, 255, .85);
            text-decoration: none;
            white-space: nowrap;
            transition: all var(--t) var(--ease);
            opacity: .95;
        }
        
        .btn-catalogue:hover {
            opacity: 1;
            transform: translateY(-2px);
            box-shadow: 0 10px 26px var(--brand-gl, var(--tc-gl)), inset 0 1px 0 rgba(255, 255, 255, .9);
            background: linear-gradient(180deg, rgba(255, 255, 255, .8) 0%, color-mix(in srgb, var(--brand-lt, var(--tc-lt)) 85%, rgba(255, 255, 255, .7)) 100%);
        }
        
        .btn-catalogue:active {
            transform: translateY(0);
            box-shadow: var(--glass-shadow-active);
        }
        
        .btn-catalogue svg {
            flex-shrink: 0;
        }
        /* catalogue dropdown wrapper */
        
        .catalogue-wrap {
            position: relative;
            display: none;
        }
        
        .catalogue-wrap.show {
            display: block;
        }
        
        .catalogue-wrap .btn-catalogue {
            display: flex;
            cursor: pointer;
        }
        
        .cat-caret {
            transition: transform var(--t) var(--ease);
            opacity: .85;
            margin-left: 1px;
        }
        
        .catalogue-wrap.open .cat-caret {
            transform: rotate(180deg);
        }
        
        .catalogue-menu {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            min-width: 200px;
            background: rgba(255, 255, 255, .75);
            backdrop-filter: blur(20px) saturate(160%);
            -webkit-backdrop-filter: blur(20px) saturate(160%);
            border: 1px solid rgba(255, 255, 255, .65);
            border-radius: 14px;
            box-shadow: 0 16px 40px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255, 255, 255, .9);
            padding: 6px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-6px) scale(.97);
            transform-origin: top right;
            transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t) var(--ease);
            z-index: 1000;
        }
        
        .catalogue-wrap.open .catalogue-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }
        
        .cat-menu-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            border-radius: 10px;
            font-family: 'Barlow Condensed', sans-serif;
            font-weight: 600;
            font-size: .9rem;
            letter-spacing: .5px;
            text-transform: uppercase;
            color: var(--brand-color, var(--tc));
            text-decoration: none;
            white-space: nowrap;
            transition: background var(--t) var(--ease), transform var(--t) var(--ease);
        }
        
        .cat-menu-item:hover {
            background: linear-gradient(180deg, rgba(255, 255, 255, .85) 0%, color-mix(in srgb, var(--brand-lt, var(--tc-lt)) 70%, rgba(255, 255, 255, .5)) 100%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 6px var(--brand-gl, var(--tc-gl));
            transform: translateX(2px);
        }
        
        .cat-menu-item svg {
            flex-shrink: 0;
            opacity: .85;
        }
        /* back button in topbar */
        
        .btn-back {
            display: none;
            align-items: center;
            gap: 7px;
            padding: 8px 18px;
            border-radius: 999px;
            font-family: 'Barlow Condensed', sans-serif;
            font-weight: 900;
            font-size: .92rem;
            letter-spacing: 1px;
            text-transform: uppercase;
            background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 88%, white) 0%, var(--tc) 50%, color-mix(in srgb, var(--tc) 92%, black) 100%);
            backdrop-filter: blur(10px) saturate(160%);
            -webkit-backdrop-filter: blur(10px) saturate(160%);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, .35);
            box-shadow: 0 10px 24px rgba(255, 69, 0, .50), 0 2px 4px rgba(255, 69, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .60), inset 0 -2px 0 rgba(0, 0, 0, .22);
            text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
            transition: all var(--t) var(--ease);
            position: relative;
            overflow: hidden;
        }
        
        .btn-back::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--glass-highlight);
            pointer-events: none;
            border-radius: inherit;
        }
        
        .btn-back:hover {
            transform: translateY(-2px) scale(1.04);
            box-shadow: 0 18px 36px rgba(255, 69, 0, .65), 0 3px 6px rgba(255, 69, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -2px 0 rgba(0, 0, 0, .18);
            filter: brightness(1.08);
        }
        
        .btn-back:active {
            transform: translateY(0) scale(1);
            box-shadow: 0 3px 10px rgba(255, 69, 0, .35), inset 0 3px 8px rgba(0, 0, 0, .30);
        }
        
        .btn-back svg {
            transition: transform .2s;
        }
        
        .btn-back:hover svg {
            transform: translateX(-3px);
        }
        
        .welcome-screen.hide {
            animation: fadeOut .35s var(--ease) forwards;
        }
        
        @keyframes fadeOut {
            to {
                opacity: 0;
                transform: scale(.97);
                pointer-events: none;
            }
        }
        
        .catalog-content.show {
            display: block !important;
        }
        
        .grid.show {
            display: grid !important;
        }
        
        .filter-bar.show {
            display: flex !important;
        }
        /* ── CATEGORY BANNER ── */
        
        .cat-banner {
            grid-column: 1 / -1;
            display: flex;
            align-items: flex-start;
            gap: 20px;
            padding: 22px 26px;
            border-radius: var(--r3);
            border: 1.5px solid transparent;
            margin-bottom: 4px;
            animation: cardIn .35s var(--ease) both;
            position: relative;
            overflow: hidden;
        }
        
        .cat-banner::before {
            content: '';
            position: absolute;
            inset: 0;
            opacity: .04;
            background-image: linear-gradient(rgba(255, 255, 255, .9) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .9) 1px, transparent 1px);
            background-size: 28px 28px;
        }
        
        .cat-banner.tc {
            background: linear-gradient(135deg, var(--tc-dk) 0%, #2D1000 100%);
            border-color: rgba(255, 69, 0, .25);
            box-shadow: 0 4px 20px rgba(255, 69, 0, .1);
        }
        
        .cat-banner-icon {
            font-size: 2.2rem;
            flex-shrink: 0;
            width: 52px;
            height: 52px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, .07);
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, .1);
        }
        
        .cat-banner-body {
            flex: 1;
        }
        
        .cat-banner-title {
            font-family: 'Barlow Condensed', sans-serif;
            font-weight: 900;
            font-size: 1.3rem;
            letter-spacing: -.3px;
            color: #fff;
            margin-bottom: 6px;
            text-transform: uppercase;
        }
        
        .cat-banner.tc .cat-banner-title {
            color: var(--tc2);
        }
        
        .cat-banner-desc {
            font-size: .84rem;
            color: rgba(255, 255, 255, .55);
            line-height: 1.6;
            max-width: 680px;
        }
        
        .cat-banner-points {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        
        .cat-banner-points li {
            display: flex;
            align-items: baseline;
            gap: 9px;
            font-size: .84rem;
            color: rgba(255, 255, 255, .6);
            line-height: 1.5;
        }
        
        .cat-point-num {
            flex-shrink: 0;
            width: 20px;
            height: 20px;
            background: rgba(255, 69, 0, .25);
            border: 1px solid rgba(255, 69, 0, .4);
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-family: 'Barlow Condensed', sans-serif;
            font-weight: 700;
            font-size: .7rem;
            color: var(--tc2);
            margin-top: 1px;
        }
        
        .cat-banner-soon {
            display: inline-block;
            margin-top: 12px;
            padding: 3px 10px;
            border-radius: 999px;
            font-size: .68rem;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            background: rgba(255, 255, 255, .07);
            border: 1px solid rgba(255, 255, 255, .15);
            color: rgba(255, 255, 255, .4);
        }
        
        .cat-banner-empty {
            opacity: .75;
        }
        /* editable placeholder hint */
        
        .cat-banner-edit {
            position: absolute;
            top: 10px;
            right: 14px;
            font-size: .65rem;
            color: rgba(255, 255, 255, .2);
            font-family: 'Barlow Condensed', sans-serif;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        

        /* ════════════════════════════════════════════════════════════
           RESPONSIVE — Sistema unificado
           Breakpoints:
             ≥1280px  desktop ancho       (default)
             ≤1024px  laptop / tablet h.  (3 cols)
             ≤768px   tablet portrait     (2 cols)
             ≤600px   móvil grande        (banners apilados)
             ≤480px   móvil estándar      (1 col)
             ≤360px   móvil pequeño       (compactar tabs)
           Landscape móvil: ≤900w + ≤500h  (hero compacto)
        ════════════════════════════════════════════════════════════ */
        
        /* ── LAPTOP / TABLET HORIZONTAL ── */
        @media (max-width: 1024px) {
            .grid {
                padding: 22px;
                gap: 18px;
                grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            }
            .topbar {
                padding: 0 20px;
            }
            .hero-inner {
                padding: 36px 28px;
            }
        }
        
        /* ── TABLET PORTRAIT ── */
        @media (max-width: 768px) {
            /* Topbar — dos filas: logo+inicio+catálogos arriba, tabs abajo */
            .topbar {
                padding: 8px 14px;
                gap: 10px 8px;
                height: auto;
                min-height: 60px;
                flex-wrap: wrap;
                row-gap: 8px;
            }
            .logo {
                font-size: 1rem;
                flex-shrink: 1;
                min-width: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .btn-back {
                padding: 6px 12px;
                font-size: .78rem;
                min-height: 36px;
                flex-shrink: 0;
            }
            .catalogue-wrap {
                flex-shrink: 0;
            }
            /* Tabs ocupan toda la fila inferior */
            #tabsWrap {
                order: 10;
                width: 100%;
                justify-content: center;
            }
            /* Reloj se queda alineado a la derecha si hay espacio */
            #digitalClock {
                order: 5;
            }
            #searchWrap {
                order: 11;
                width: 100%;
            }
            /* Hero */
            .hero-inner {
                padding: 28px 18px 24px;
                gap: 16px;
                flex-direction: column;
                align-items: flex-start;
            }
            .hero-badge {
                width: 70px;
                height: 70px;
                font-size: .85rem;
            }
            .hero-title {
                font-size: clamp(1.8rem, 6vw, 2.8rem);
            }
            .hero-sub {
                font-size: .82rem;
            }
            .hero-stats {
                gap: 18px;
                margin-top: 18px;
            }
            .stat-num {
                font-size: 1.5rem;
            }
            /* Filter bar — chips se envuelven a nueva línea si no caben.
               Importante: NO usar nowrap aquí porque la sub-bar (.ss-subbar) 
               necesita bajar a línea nueva con width:100%.
               No-sticky en móvil para liberar espacio vertical. */
            .filter-bar {
                padding: 10px 14px;
                top: auto;
                position: relative;
                gap: 6px;
                flex-wrap: wrap;
            }
            .chip {
                white-space: nowrap;
                flex-shrink: 0;
                min-height: 36px;
            }
            .count-badge {
                flex-shrink: 0;
            }
            /* Banners de categoría apilados */
            .cat-banner {
                flex-direction: column;
                gap: 12px;
                padding: 18px;
            }
            .cat-banner-icon {
                width: 42px;
                height: 42px;
                font-size: 1.6rem;
            }
            .cat-banner-title {
                font-size: 1.1rem;
            }
            .cat-banner-desc {
                font-size: .8rem;
            }
            /* Grid — 2 columnas */
            .grid {
                padding: 16px;
                gap: 14px;
                grid-template-columns: repeat(2, 1fr);
            }
            /* Card — botones tap-friendly */
            .btn-cta {
                min-height: 44px;
            }
            .btn-eye {
                width: 44px;
                height: 44px;
            }
            /* Modal — bottom sheet */
            .overlay {
                padding: 0;
                align-items: flex-end;
            }
            .modal {
                max-height: 92vh;
                max-height: 92dvh;
                border-radius: var(--r3) var(--r3) 0 0;
                width: 100%;
                max-width: 100%;
            }
            .modal-vis {
                height: 200px;
            }
            .modal-body {
                padding: 20px 18px 32px;
            }
            .modal-title {
                font-size: 1.6rem;
            }
            .modal-close {
                width: 44px;
                height: 44px;
            }
            .modal-foot {
                flex-direction: column;
            }
            .modal-foot .btn-cta {
                width: 100%;
                text-align: center;
                padding: 14px;
                min-height: 48px;
            }
            .btn-cancel {
                width: 100%;
                text-align: center;
                padding: 12px;
                min-height: 48px;
            }
            /* Welcome */
            .welcome-inner {
                padding: 48px 20px;
            }
            .welcome-btns {
                flex-direction: column;
                align-items: stretch;
                width: 100%;
                max-width: 360px;
            }
            .wb {
                min-width: unset;
                width: 100%;
                max-width: 100%;
                padding: 24px 28px;
                flex-direction: row;
                align-items: center;
                gap: 16px;
            }
            .wb-icon {
                font-size: 2rem;
                margin-bottom: 0;
                animation: none;
                flex-shrink: 0;
            }
            .wb-content {
                flex: 1;
            }
            .wb-label {
                font-size: 1.6rem;
                margin-bottom: 2px;
            }
            .wb-sub {
                font-size: .74rem;
                margin-bottom: 0;
            }
            .wb-arrow {
                align-self: center;
                font-size: 1.2rem;
            }
        }
        
        /* ── MÓVIL GRANDE ── */
        @media (max-width: 600px) {
            /* Grid — 1 columna (las cards se ven mejor anchas en móvil) */
            .grid {
                grid-template-columns: 1fr;
            }
        }
        
        /* ── MÓVIL ESTÁNDAR ── */
        @media (max-width: 480px) {
            #digitalClock {
                display: none;
            }
            /* Topbar compacta */
            .topbar {
                height: 56px;
                padding: 0 12px;
                gap: 8px;
            }
            #searchWrap {
                display: none !important;
            }
            /* Tabs siguen visibles, más compactas */
            .tabs {
                gap: 2px;
                padding: 3px;
            }
            .tab {
                padding: 6px 11px;
                font-size: .78rem;
                letter-spacing: .4px;
                gap: 5px;
                min-height: 36px;
            }
            .tab .tab-ico {
                width: 14px;
                height: 14px;
            }
            .logo {
                font-size: .9rem;
            }
            .btn-back {
                padding: 6px 10px;
                font-size: .74rem;
                gap: 4px;
                min-height: 36px;
            }
            .btn-back svg {
                width: 12px;
                height: 12px;
            }
            /* Hero */
            .hero {
                min-height: 200px;
            }
            .hero-inner {
                padding: 22px 14px 18px;
            }
            .hero-badge {
                width: 56px;
                height: 56px;
                font-size: .72rem;
            }
            .hero-eyebrow {
                font-size: .62rem;
                padding: 3px 9px;
            }
            .hero-title {
                font-size: clamp(1.5rem, 7vw, 2.2rem);
                letter-spacing: -1px;
            }
            .hero-sub {
                font-size: .78rem;
                margin-top: 7px;
            }
            .hero-stats {
                gap: 12px;
                margin-top: 14px;
            }
            .stat-num {
                font-size: 1.25rem;
            }
            .stat-label {
                font-size: .6rem;
            }
            .stat-divider {
                display: none;
            }
            /* Filter bar */
            .filter-bar {
                padding: 8px 12px;
            }
            .filter-label {
                display: none;
            }
            .chip {
                font-size: .74rem;
                padding: 6px 11px;
                min-height: 36px;
            }
            /* Grid */
            .grid {
                padding: 10px;
                gap: 10px;
            }
            /* Card */
            .card-vis {
                height: 160px;
            }
            .card-body {
                padding: 14px;
            }
            .card-title {
                font-size: 1.1rem;
            }
            .card-desc {
                font-size: .8rem;
                -webkit-line-clamp: 2;
            }
            .card-specs {
                gap: 4px;
                margin-bottom: 12px;
            }
            .pill {
                font-size: .66rem;
                padding: 2px 7px;
            }
            .btn-cta {
                font-size: .82rem;
                padding: 10px 12px;
                min-height: 44px;
            }
            .btn-eye {
                width: 44px;
                height: 44px;
            }
            /* Modal */
            .modal-vis {
                height: 170px;
            }
            .modal-vis img {
                max-height: 130px;
            }
            .modal-body {
                padding: 18px 16px 28px;
            }
            .modal-title {
                font-size: 1.4rem;
            }
            .modal-desc {
                font-size: .84rem;
            }
            .feat-list li {
                font-size: .82rem;
            }
            .mtag {
                font-size: .7rem;
                padding: 3px 9px;
            }
            /* Welcome */
            .welcome-logo {
                font-size: clamp(2.4rem, 12vw, 3.5rem);
            }
            .welcome-tagline {
                font-size: .65rem;
                letter-spacing: 1.5px;
            }
            .welcome-desc {
                font-size: .9rem;
                margin-bottom: 32px;
            }
            .wb {
                padding: 20px 22px;
                gap: 14px;
                border-radius: 16px;
            }
            .wb-icon {
                font-size: 1.7rem;
            }
            .wb-label {
                font-size: 1.4rem;
            }
            .wb-sub {
                font-size: .7rem;
            }
        }
        
        /* ── MÓVIL PEQUEÑO ── */
        @media (max-width: 360px) {
            /* Tabs siguen visibles en fila inferior, más compactas aún */
            .topbar {
                padding: 6px 10px;
                gap: 6px;
                row-gap: 6px;
            }
            .logo {
                font-size: .82rem;
            }
            .logo em,
            #logoSub {
                display: none;
            }
            .tabs {
                gap: 1px;
                padding: 2px;
            }
            .tab {
                padding: 5px 8px;
                font-size: .68rem;
                letter-spacing: .2px;
                gap: 3px;
            }
            .tab .tab-ico {
                width: 13px;
                height: 13px;
            }
            .btn-back {
                padding: 5px 8px;
                font-size: .68rem;
            }
            .grid {
                grid-template-columns: 1fr;
            }
            .hero-stats {
                flex-direction: column;
                gap: 8px;
            }
            .stat-divider {
                display: none;
            }
            .wb {
                padding: 16px 18px;
            }
            .filter-bar {
                padding: 6px 10px;
            }
            .chip {
                font-size: .7rem;
                padding: 5px 9px;
            }
        }
        
        /* ── LANDSCAPE MÓVIL — hero compacto ── */
        @media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
            .hero {
                min-height: 0;
            }
            .hero-inner {
                padding: 18px 22px;
                flex-direction: row;
                gap: 18px;
            }
            .hero-badge {
                width: 56px;
                height: 56px;
                font-size: .7rem;
            }
            .hero-title {
                font-size: 1.4rem;
            }
            .hero-sub {
                font-size: .76rem;
            }
            .hero-stats {
                margin-top: 8px;
                gap: 14px;
            }
            .stat-num {
                font-size: 1.1rem;
            }
            .stat-label {
                font-size: .58rem;
            }
            .welcome-inner {
                padding: 24px 20px;
            }
            .welcome-logo {
                font-size: 2rem;
            }
            .welcome-desc {
                margin-bottom: 18px;
            }
            .wb {
                padding: 14px 18px;
            }
            .wb-icon {
                font-size: 1.5rem;
            }
            .wb-label {
                font-size: 1.2rem;
            }
        }
        
        /* ── MÓVIL CON HOVER LIMITADO ── 
           Evita que efectos :hover queden "atascados" tras un tap en móvil */
        @media (hover: none) {
            .card:hover {
                transform: none;
            }
            .btn-cta:hover {
                transform: none;
            }
            .btn-eye:hover {
                transform: none;
            }
            .chip:hover {
                transform: none;
            }
        }

/* ═══════════════════════════════════════════════════════════════
   PWA · Banner de actualización + Botón de instalación
   ═══════════════════════════════════════════════════════════════ */

/* Banner de "Nueva versión disponible" */
.pwa-update-banner {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(140%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 18px;
  background: linear-gradient(135deg, #1a1f3a 0%, #2a3158 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .2);
  font: 500 14px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  z-index: 99999;
  opacity: 0;
  transition: transform .35s cubic-bezier(.2, .9, .25, 1.15), opacity .25s ease;
  max-width: calc(100vw - 32px);
}
.pwa-update-banner.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.pwa-banner-ico {
  flex-shrink: 0;
  color: #93b3ff;
}
.pwa-banner-text {
  white-space: nowrap;
}
.pwa-banner-btn {
  border: 0;
  background: linear-gradient(135deg, #fff 0%, #e8ecf5 100%);
  color: #1a1f3a;
  font: 600 13px/1 system-ui, -apple-system, sans-serif;
  padding: 8px 14px;
  border-radius: 9px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.pwa-banner-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
}
.pwa-banner-btn:active {
  transform: translateY(0);
}
.pwa-banner-close {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .55);
  font: 400 22px/1 system-ui;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.pwa-banner-close:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

/* Botón flotante "Instalar app" */
.pwa-install-btn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: linear-gradient(135deg, #1a1f3a 0%, #3a4380 100%);
  color: #fff;
  font: 600 13.5px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(26, 31, 58, .35), 0 2px 6px rgba(0, 0, 0, .2);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  z-index: 9998;
  animation: pwaPulse 2.6s ease-in-out 2s 2;
}
.pwa-install-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(26, 31, 58, .45), 0 4px 10px rgba(0, 0, 0, .25);
  background: linear-gradient(135deg, #232a4f 0%, #4a559a 100%);
}
.pwa-install-btn:active {
  transform: translateY(0);
}
.pwa-install-btn:disabled {
  opacity: .55;
  cursor: wait;
}
@keyframes pwaPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(26, 31, 58, .35), 0 2px 6px rgba(0, 0, 0, .2), 0 0 0 0 rgba(147, 179, 255, .55); }
  50%      { box-shadow: 0 8px 24px rgba(26, 31, 58, .35), 0 2px 6px rgba(0, 0, 0, .2), 0 0 0 12px rgba(147, 179, 255, 0); }
}

/* Modal de instrucciones para iOS */
.pwa-ios-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 35, .68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  padding: 20px;
  animation: pwaFadeIn .2s ease;
}
@keyframes pwaFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pwa-ios-modal {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 28px 26px 22px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
  font: 400 14.5px/1.55 system-ui, -apple-system, sans-serif;
  color: #1a1f3a;
}
.pwa-ios-modal h3 {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
  color: #1a1f3a;
}
.pwa-ios-modal ol {
  margin: 0 0 12px;
  padding-left: 22px;
}
.pwa-ios-modal li {
  margin-bottom: 8px;
}
.pwa-ios-modal svg {
  vertical-align: -2px;
  margin: 0 2px;
}
.pwa-ios-note {
  margin: 6px 0 0;
  font-size: 13px;
  color: #5a6280;
}
.pwa-ios-close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: 0;
  background: transparent;
  font: 400 26px/1 system-ui;
  color: #8a91a8;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  cursor: pointer;
}
.pwa-ios-close:hover {
  background: #f1f3f8;
  color: #1a1f3a;
}

/* Si la app está instalada y abierta en standalone, ocultamos el botón */
@media (display-mode: standalone) {
  .pwa-install-btn { display: none; }
}

/* Móvil: ajustes */
@media (max-width: 480px) {
  .pwa-install-btn {
    right: 12px;
    bottom: 12px;
    padding: 10px 14px;
    font-size: 13px;
  }
  .pwa-update-banner {
    bottom: 16px;
    padding: 10px 12px 10px 14px;
    font-size: 13.5px;
  }
  .pwa-banner-text {
    white-space: normal;
  }
}