/*
                          

                          ____ ____ ____ ____ ____ ____ _  _
                          |__| |__/ | __ |  | |__/ |___  \/ 
                          |  | |  \ |__] |__| |  \ |___ _/\_


        ╔══════════════════════════════════════════════════════════════════════════════╗
        ║  🔐 Developed by Argorex | Cybersecurity Advisory                            ║
        ║  📍 Protecting the digital future of tech ventures from sunny Málaga, Spain  ║
        ║  🛡️ Need cybersecurity advisory? Contact us at hello@argorex.com             ║
        ║  🌐 www.argorex.com                                                          ║
        ╚══════════════════════════════════════════════════════════════════════════════╝

 */

:root {
       --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       --font-heading: 'Orbitron', monospace;
       --color-bg: #000;
       --color-white: #F2F2F2;
       --color-primary: #F5F5F5;
       --color-primary-dark: #808080;
       --color-secondary: #1A1A1A;
       --color-accent-not: #1A1A1A;
       --white-60: rgba(255, 255, 255, 0.6)
}

.header-logo {
       width: clamp(110px, 80%, 200px);
       height: auto;
       margin-bottom: 5px
}

.section-title {
       font-family: var(--font-heading);
       font-size: clamp(1.2rem, 5vw, 2.5rem);
       font-weight: 600;
       margin-bottom: 1rem;
       color: var(--color-white)
}

.about-subheading,
body {
       font-family: var(--font-sans)
}

.about-subheading {
       font-size: clamp(1.1rem, 3.5vw, 1.5rem);
       font-weight: 600;
       color: rgba(255, 255, 255, .859);
       margin: 1rem 0 0;
       letter-spacing: .5px
}

html {
       scroll-behavior: smooth
}

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

body {
       background: var(--color-bg);
       color: var(--white-60);
       line-height: 1.6;
       overflow-x: hidden;
       max-width: 800px;
       margin: 10px auto;
       padding: 10px 20px
}

p {
       margin-bottom: 1em
}

.service-features {
       list-style: none;
       margin-bottom: var(--space-2)
}

.service-features li {
       color: var(--white-70);
       font-size: clamp(.9rem, 2vw, .9rem);
       margin-bottom: .5rem;
       position: relative;
       padding-left: 30px
}

.service-features li::before {
       content: "✓";
       color: var(--color-primary);
       position: absolute;
       left: 10px
}

@font-face {
       font-family: Inter;
       src: url('/fonts/inter/inter-v19-latin-300.woff2') format('woff2');
       font-weight: 300;
       font-display: swap
}

@font-face {
       font-family: Inter;
       src: url('/fonts/inter/inter-v19-latin-regular.woff2') format('woff2');
       font-weight: 400;
       font-display: swap
}

@font-face {
       font-family: Inter;
       src: url('/fonts/inter/inter-v19-latin-500.woff2') format('woff2');
       font-weight: 500;
       font-display: swap
}

@font-face {
       font-family: Inter;
       src: url('/fonts/inter/inter-v19-latin-600.woff2') format('woff2');
       font-weight: 600;
       font-display: swap
}

@font-face {
       font-family: Inter;
       src: url('/fonts/inter/inter-v19-latin-700.woff2') format('woff2');
       font-weight: 700;
       font-display: swap
}

@font-face {
       font-family: Orbitron;
       src: url('/fonts/orbitron/orbitron-v34-latin-600.woff2') format('woff2');
       font-weight: 600;
       font-display: swap
}

@font-face {
       font-family: Orbitron;
       src: url('/fonts/orbitron/orbitron-v34-latin-700.woff2') format('woff2');
       font-weight: 700;
       font-display: swap
}

@media (max-width:768px) {
       .header-logo {
              width: clamp(110px, 80%, 130px);
              height: auto
       }
}