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


        /* ══════════════════════════════════════════
           GLOBAL RESET & BASE
        ══════════════════════════════════════════ */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box
        }

        body {
            background: #0d0d0d;
            color: #e0e0e0;
            font-family: 'Inter', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            padding: 3rem 2rem 4rem
        }
        /* ══════════════════════════════════════════
           SHARED — HEADER, BRAND & NAVIGATION
        ══════════════════════════════════════════ */

        .hero {
            text-align: center;
            padding: 2.5rem 0 2rem;
            display: flex;
            flex-direction: column;
            align-items: center
        }

        .hero .brand {
            margin-bottom: .4rem
        }

        .hero-tagline {
            color: #3a3a3a;
            font-size: .78rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            margin-bottom: 2.8rem
        }

        .nav-card {
            background: #161616;
            border: 1px solid #222;
            border-radius: 14px;
            padding: 1.3rem 1.5rem;
            display: flex;
            align-items: center;
            gap: 1.2rem;
            text-decoration: none;
            color: inherit;
            transition: border-color .15s, transform .15s
        }

        .nav-card:hover {
            border-color: #2e2e2e;
            transform: translateY(-2px)
        }

        .nav-card-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: #1e1e1e;
            border: 1px solid #2a2a2a;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            color: #e8253a
        }

        .nav-card-icon svg {
            width: 22px;
            height: 22px
        }

        .nav-card-body {
            flex: 1;
            min-width: 0
        }

        .nav-card-title {
            font-size: .92rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: .25rem
        }

        .nav-card-desc {
            font-size: .75rem;
            color: #555;
            line-height: 1.5
        }

        .nav-card-arrow {
            color: #333;
            flex-shrink: 0
        }

        .nav-card-arrow svg {
            width: 16px;
            height: 16px
        }

        .nav-grid {
            display: flex;
            flex-direction: column;
            gap: .85rem;
            width: 100%;
            max-width: 640px
        }

        .brand {
            display: flex;
            align-items: center;
            gap: .7rem;
            margin-bottom: .6rem
        }

        .brand-name {
            font-size: 2rem;
            font-weight: 800;
            letter-spacing: .06em;
            text-transform: uppercase
        }

        .brand-name .pro {
            color: #fff
        }

        .brand-name .tech {
            color: #e8253a
        }


        /* ══════════════════════════════════════════
           SOFTWARE PAGE  ·  tools.html
        ══════════════════════════════════════════ */

        .tagline {
            color: #444;
            font-size: .82rem;
            letter-spacing: .08em;
            text-transform: uppercase;
            margin-bottom: 2.8rem
        }

        /* ── Content wrapper — aligns all sections ── */
        .content {
            width: 100%;
            max-width: 640px;
            display: flex;
            flex-direction: column
        }

        /* ── Section heading ── */
        .section-label {
            color: #3a3a3a;
            font-size: .7rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            margin-bottom: .9rem;
            display: flex;
            align-items: center;
            gap: .5rem
        }

        .section-label::before {
            content: '';
            width: 3px;
            height: 11px;
            background: #e8253a;
            border-radius: 2px;
            flex-shrink: 0
        }

        /* ── Grid ── */
        .grid {
            display: grid;
            gap: 1rem;
            width: 100%;
            margin-bottom: 2.5rem
        }

        .grid-win {
            grid-template-columns: 1fr
        }

        .grid-mac {
            grid-template-columns: 1fr
        }

        /* ── Card ── */
        .card {
            background: #161616;
            border: 1px solid #222;
            border-radius: 12px;
            padding: 1.1rem 1.4rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 1.1rem;
            text-align: left;
            transition: border-color .15s, transform .15s
        }

        .card:hover {
            border-color: #2e2e2e;
            transform: translateY(-2px)
        }

        .card-icon {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0
        }

        .card-icon img {
            width: 36px;
            height: 36px;
            object-fit: contain;
            border-radius: 50%
        }

        .card-body {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column
        }

        .card-title {
            font-size: .9rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.3;
            margin-bottom: .3rem
        }

        .card-desc {
            font-size: .75rem;
            color: #555;
            line-height: 1.6
        }


        /* ══════════════════════════════════════════
           SHARED — SOCIAL NAV & FOOTER
        ══════════════════════════════════════════ */

        /* ── Social nav ── */
        .social-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .6rem;
            margin-bottom: 2rem;
            width: 100%;
            max-width: 640px
        }

        .social-link {
            display: flex;
            align-items: center;
            gap: .45rem;
            padding: .55rem 1rem;
            border-radius: 8px;
            border: 1px solid #222;
            background: #161616;
            color: #666;
            text-decoration: none;
            font-size: .72rem;
            font-weight: 600;
            letter-spacing: .04em;
            text-transform: uppercase;
            transition: border-color .15s, color .15s, transform .15s;
            flex: 1;
            justify-content: center
        }

        .social-link svg {
            width: 15px;
            height: 15px;
            flex-shrink: 0
        }

        .social-link:hover {
            transform: translateY(-2px)
        }

        .social-link[aria-label="Instagram"]:hover { color: #e1306c; border-color: #e1306c }
        .social-link[aria-label="Facebook"]:hover  { color: #1877f2; border-color: #1877f2 }
        .social-link[aria-label="TikTok"]:hover    { color: #fff; border-color: #fff }
        .social-link[aria-label="WhatsApp"]:hover  { color: #25d366; border-color: #25d366 }
     

        @media (max-width: 480px) {
            .social-nav { gap: .4rem }
            .social-link span { display: none }
            .social-link { padding: .6rem; flex: none; width: 44px }
        }

        /* ── Back link ── */
        .back-link {
            display: flex;
            position: absolute;
            align-items: center;
            gap: .4rem;
            color: #444;
            text-decoration: none;
            font-size: .75rem;
            font-weight: 600;
            letter-spacing: .05em;
            text-transform: uppercase;
            width: 100%;
            max-width: 640px;
            margin-bottom: .5rem;
            transition: color .15s
        }

        .back-link svg {
            width: 16px;
            height: 16px
        }

        .back-link:hover {
            color: #e8253a
        }

        /* ── Footer ── */
        .footer {
            margin-top: 2.5rem;
            color: #252525;
            font-size: .7rem;
            letter-spacing: .06em;
            text-transform: uppercase;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .85rem
        }

        .footer-social {
            display: flex;
            align-items: center;
            gap: 1.1rem
        }

        .footer-social a {
            color: #2a2a2a;
            text-decoration: none;
            transition: color .15s
        }

        .footer-social a:hover { color: #e8253a }
        .footer-social a[aria-label="Instagram"]:hover { color: #e1306c }
        .footer-social a[aria-label="Facebook"]:hover  { color: #1877f2 }
        .footer-social a[aria-label="TikTok"]:hover    { color: #fff }
        .footer-social a[aria-label="WhatsApp"]:hover  { color: #25d366 }

        .footer-social svg {
            width: 15px;
            height: 15px;
            display: block
        }

        /* ══════════════════════════════════════════
           SOFTWARE PAGE  ·  MOBILE DOWNLOAD POPUP
        ══════════════════════════════════════════ */
          /* ── Download button ── */
        .dl-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .38rem;
            padding: .42rem .9rem;
            border-radius: 6px;
            border: none;
            font-family: inherit;
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .04em;
            text-transform: uppercase;
            text-decoration: none;
            cursor: pointer;
            background: #e8253a;
            color: #fff;
            white-space: nowrap;
            transition: opacity .12s, transform .1s
        }

        .dl-btn svg {
            width: 14px;
            height: 14px;
            flex-shrink: 0
        }

        .dl-btn:hover {
            opacity: .85;
            transform: translateY(-1px)
        }

        .dl-btn:active {
            transform: translateY(0)
        }

        .mobile-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .82);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            padding: 1.5rem
        }

        .mobile-popup {
            background: #161616;
            border: 1px solid #2e2e2e;
            border-radius: 16px;
            padding: 2rem 1.8rem;
            max-width: 340px;
            width: 100%;
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 1rem
        }

        .mobile-popup-icon {
            font-size: 2.8rem;
            line-height: 1
        }

        .mobile-popup-title {
            font-size: 1.1rem;
            font-weight: 800;
            color: #fff
        }

        .mobile-popup-msg {
            font-size: .82rem;
            color: #666;
            line-height: 1.6
        }

        .mobile-popup-dismiss {
            margin-top: .3rem;
            padding: .7rem 1.4rem;
            background: #e8253a;
            color: #fff;
            border: none;
            border-radius: 8px;
            font-family: inherit;
            font-size: .83rem;
            font-weight: 700;
            letter-spacing: .04em;
            text-transform: uppercase;
            cursor: pointer;
            transition: opacity .12s
        }

        .mobile-popup-dismiss:hover {
            opacity: .85
        }

        /* ══════════════════════════════════════════
           RESPONSIVE OVERRIDES
        ══════════════════════════════════════════ */

        @media (max-width: 520px) {
            body {
                padding: 2rem 1rem 3rem
            }

            .tagline {
                margin-bottom: 2rem
            }

            .card {
                padding: .9rem 1rem;
                gap: .85rem
            }

            .card-icon {
                width: 44px;
                height: 44px
            }

            .card-icon img {
                width: 30px;
                height: 30px
            }

            .card-title {
                font-size: .83rem
            }

            .card-desc {
                font-size: .72rem
            }

        }

        @media (max-width: 380px) {
            body {
                padding: 1.5rem .75rem 2.5rem
            }

            .brand-name {
                font-size: 1.65rem
            }
        }