/* ══════════════════════════════════════════════════════════
   Landing (/index_new)

   The first block below is index.php's own <style> element, lifted out
   verbatim. That is where the live page's look actually lives: 919 lines
   of it, inline, which landing.css does not contain and which is re-sent
   to every visitor on every hit because it is part of the document.

   Taking it as-is rather than reinterpreting it is the point -- the
   proposal has to look like the site, not like my reading of the site.
   The additions at the end are the handful of components with no
   equivalent there, written on the same :root variables.

   If this proposal is adopted, index.php should load this file and drop
   its inline block, so the CSS is cached once instead of re-sent.
   ══════════════════════════════════════════════════════════ */


        :root {
            --primary: #00d9a3;
            --primary-dark: #00b386;
            --primary-glow: rgba(0, 217, 163, 0.4);
            --dark: #0a0a0a;
            --dark-light: #121212;
            --dark-lighter: #1a1a1a;
            --light: #ffffff;
            --border-radius: 16px;
            --border-radius-lg: 24px;
            --shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
            --shadow-glow: 0 0 30px var(--primary-glow);
            --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            --gradient: linear-gradient(135deg, var(--primary) 0%, #00b386 100%);
        }

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

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--dark);
            color: var(--light);
            overflow-x: hidden;
            line-height: 1.7;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: var(--dark-light);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--gradient);
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-dark);
        }

        /* Enhanced Particles Background */
        #particles-js {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
            background: linear-gradient(135deg, #0a0a0a 0%, #050505 50%, #0a0a0a 100%);
        }

        /* Content wrapper to ensure proper layering */
        .content-wrapper {
            position: relative;
            z-index: 1;
        }

        /* Modern Navigation */
        /* Navbar: solid dark bar from the top (not transparent over the hero),
           with the simple terms-style text links. */
        .navbar {
            background-color: rgba(10, 10, 10, 0.92);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            padding: 1rem 0;
            transition: all 0.3s ease;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            z-index: 1000;
        }

        .navbar.scrolled {
            background-color: rgba(15, 20, 25, 0.97) !important;
            padding: 0.7rem 0;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
        }

        .navbar-brand {
            font-weight: 900;
            font-size: 1.8rem;
            background: var(--gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .logo-img {
            height: 40px;
            transition: var(--transition);
            filter: drop-shadow(0 0 10px var(--primary-glow));
        }

        .nav-link {
            font-weight: 500;
            position: relative;
            padding: 0.5rem 0.9rem !important;
            margin: 0;
            border-radius: 0;
            transition: all 0.3s ease;
            color: rgba(255, 255, 255, 0.85) !important;
        }

        .nav-link:hover,
        .nav-link.active {
            background: transparent;
            color: var(--primary) !important;
            transform: none;
            text-shadow: 0 0 8px rgba(0, 217, 163, 0.5);
        }

        /* Hero Section with Background Image */
        .hero-section {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            overflow: hidden;
            padding-top: 80px;
            background: linear-gradient(rgba(10, 10, 10, 0.7), rgba(10, 10, 10, 0.7)), url('/server.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            text-align: center;
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 900;
            line-height: 1.1;
            margin-bottom: 1.5rem;
            background: linear-gradient(135deg, #ffffff 0%, var(--primary) 50%, #00b386 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 10px 30px rgba(0, 217, 163, 0.3);
        }

        .hero-subtitle {
            font-size: 1.3rem;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 2.5rem;
            line-height: 1.6;
            font-weight: 400;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            background: rgba(0, 217, 163, 0.3);
            border: 1px solid rgba(0, 217, 163, 0.5);
            border-radius: 50px;
            padding: 0.6rem 1.2rem;
            margin-bottom: 2rem;
            font-size: 0.9rem;
            font-weight: 600;
            backdrop-filter: blur(10px);
            animation: pulse 2s infinite;
            box-shadow: 0 0 20px rgba(0, 217, 163, 0.4);
            color: white;
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 20px rgba(0, 217, 163, 0.4);
            }

            50% {
                box-shadow: 0 0 30px rgba(0, 217, 163, 0.7);
            }

            100% {
                box-shadow: 0 0 20px rgba(0, 217, 163, 0.4);
            }
        }

        /* Feature Cards - Centered below hero */
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin: 4rem auto 2rem;
            max-width: 1200px;
        }

        .feature-card {
            background: rgba(26, 26, 26, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: var(--border-radius);
            padding: 2rem;
            text-align: center;
            transition: var(--transition);
            backdrop-filter: blur(20px);
            position: relative;
            overflow: hidden;
            height: 100%;
        }

        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--gradient);
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow), var(--shadow-glow);
            border-color: rgba(0, 217, 163, 0.4);
        }

        .feature-icon {
            width: 70px;
            height: 70px;
            margin: 0 auto 1.5rem;
            background: rgba(0, 217, 163, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            color: var(--primary);
            transition: var(--transition);
            border: 2px solid rgba(0, 217, 163, 0.3);
        }

        .feature-card:hover .feature-icon {
            transform: scale(1.1);
            background: var(--gradient);
            color: white;
            border-color: transparent;
        }

        .feature-card h5 {
            font-size: 1.3rem;
            margin-bottom: 1rem;
            color: white;
        }

        .feature-card p {
            font-size: 1rem;
            line-height: 1.6;
            margin-bottom: 0;
            color: rgba(255, 255, 255, 0.9);
        }

        .monero-logo {
            width: 50px;
            height: 50px;
            margin: 0 auto;
        }

        /* Pricing Grid - NEW STYLES */
        .pricing-grid-section {
            padding: 2rem 0;
        }

        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            margin: 0 auto;
            max-width: 1400px;
        }

        .pricing-card-compact {
            background: rgba(26, 26, 26, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--border-radius);
            padding: 1.5rem;
            transition: var(--transition);
            backdrop-filter: blur(20px);
            height: 100%;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .pricing-card-compact::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--gradient);
        }

        .pricing-card-compact:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow), var(--shadow-glow);
            border-color: transparent;
        }

        .pricing-header-compact {
            text-align: center;
            margin-bottom: 1.5rem;
        }

        .pricing-name-compact {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: white;
        }

        .pricing-price-compact {
            font-size: 1.8rem;
            font-weight: 900;
            background: var(--gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.25rem;
        }

        .pricing-period-compact {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.8rem;
        }

        .pricing-features-compact {
            margin-bottom: 1.5rem;
            flex-grow: 1;
        }

        .pricing-feature-compact {
            display: flex;
            align-items: center;
            margin-bottom: 0.5rem;
            font-size: 0.85rem;
        }

        .pricing-feature-compact i {
            color: var(--primary);
            margin-right: 0.5rem;
            font-size: 0.7rem;
            min-width: 12px;
        }

        .pricing-feature-compact span {
            color: rgba(255, 255, 255, 0.9);
        }

        .pricing-button-compact {
            background: var(--gradient);
            border: none;
            border-radius: 10px;
            padding: 0.75rem 1rem;
            font-weight: 600;
            font-size: 0.9rem;
            transition: var(--transition);
            color: white;
            text-align: center;
            text-decoration: none;
            display: block;
            width: 100%;
            margin-top: auto;
        }

        .pricing-button-compact:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 217, 163, 0.4);
        }

        /* Services Section */
        .services-section {
            padding: 6rem 0;
            position: relative;
        }

        .section-title {
            font-size: 3rem;
            font-weight: 900;
            text-align: center;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #fff 0%, var(--primary) 50%, #00b386 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .section-subtitle {
            text-align: center;
            color: rgba(255, 255, 255, 0.7);
            font-size: 1.2rem;
            margin-bottom: 3rem;
            font-weight: 400;
        }

        .service-card {
            background: rgba(26, 26, 26, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--border-radius);
            padding: 2.5rem;
            height: 100%;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(20px);
            display: flex;
            flex-direction: column;
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient);
        }

        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow), var(--shadow-glow);
            border-color: transparent;
        }

        .service-icon {
            font-size: 3rem;
            margin-bottom: 1.5rem;
            color: var(--primary);
            transition: var(--transition);
        }

        .service-card:hover .service-icon {
            transform: scale(1.2);
            color: white;
        }

        .service-content {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .service-button-container {
            margin-top: auto;
            padding-top: 1.5rem;
        }

        .service-button {
            background: rgba(45, 45, 45, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--light);
            border-radius: 12px;
            padding: 1rem 1.5rem;
            font-weight: 600;
            transition: var(--transition);
            text-align: center;
            display: block;
            width: 100%;
            text-decoration: none;
        }

        .service-button:hover {
            background: var(--primary);
            border-color: var(--primary);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 217, 163, 0.3);
            color: white;
        }

        /* API Section - NEW SECTION */
        .api-section {
            padding: 6rem 0;
            background: rgba(10, 10, 10, 0.8);
            position: relative;
        }

        .api-features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-top: 3rem;
        }

        .api-feature-card {
            background: rgba(26, 26, 26, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--border-radius);
            padding: 2rem;
            transition: var(--transition);
            backdrop-filter: blur(20px);
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .api-feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient);
        }

        .api-feature-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow), var(--shadow-glow);
            border-color: transparent;
        }

        .api-feature-icon {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
            color: var(--primary);
            transition: var(--transition);
        }

        .api-feature-card:hover .api-feature-icon {
            transform: scale(1.1);
        }

        .api-code-example {
            background: rgba(26, 26, 26, 0.9);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--border-radius);
            padding: 1.5rem;
            margin-top: 2rem;
            position: relative;
            overflow: hidden;
        }

        .api-code-example pre {
            color: var(--primary);
            font-family: 'Courier New', monospace;
            margin: 0;
            overflow-x: auto;
            font-size: 0.9rem;
            line-height: 1.5;
        }

        .api-cta {
            text-align: center;
            margin-top: 3rem;
        }

        /* Pricing Section */
        .pricing-section {
            padding: 6rem 0;
            background: rgba(10, 10, 10, 0.8);
            position: relative;
        }

        /* About Section */
        .about-section {
            padding: 6rem 0;
            position: relative;
        }

        .about-image {
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            position: relative;
            transition: var(--transition);
        }

        .about-image:hover {
            transform: scale(1.02);
            box-shadow: var(--shadow), var(--shadow-glow);
        }

        .about-image img {
            transition: var(--transition);
            width: 100%;
        }

        .about-image:hover img {
            transform: scale(1.05);
        }

        /* Excellence Section */
        .excellence-section {
            padding: 6rem 0;
            position: relative;
        }

        .excellence-card {
            background: rgba(26, 26, 26, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--border-radius);
            padding: 3rem;
            text-align: center;
            transition: var(--transition);
            backdrop-filter: blur(20px);
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .excellence-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient);
        }

        .excellence-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow), var(--shadow-glow);
            border-color: transparent;
        }

        .excellence-icon {
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
            color: var(--primary);
            transition: var(--transition);
        }

        .excellence-card:hover .excellence-icon {
            transform: scale(1.2);
            color: white;
        }

        .excellence-image {
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            cursor: pointer;
        }

        .excellence-image:hover {
            transform: scale(1.02);
            box-shadow: var(--shadow), var(--shadow-glow);
        }

        .excellence-image img {
            width: 100%;
            transition: var(--transition);
        }

        .excellence-image:hover img {
            transform: scale(1.05);
        }

        /* Info Cards Section */
        .info-cards-section {
            padding: 4rem 0;
        }

        .info-card {
            background: rgba(26, 26, 26, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--border-radius);
            padding: 2.5rem;
            transition: var(--transition);
            backdrop-filter: blur(20px);
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .info-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient);
        }

        .info-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow), var(--shadow-glow);
            border-color: transparent;
        }

        .info-card-icon {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
            color: var(--primary);
            transition: var(--transition);
        }

        .info-card:hover .info-card-icon {
            transform: scale(1.1);
        }

        /* Contact Form Styles */
        .bg-secondary-dark {
            background: rgba(26, 26, 26, 0.7) !important;
        }

        .btn-actions-form {
            background: rgba(45, 45, 45, 0.7);
            color: var(--light);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .btn-actions-form:hover,
        .btn-actions-form:focus {
            background: var(--primary);
            border-color: var(--primary);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 217, 163, 0.3);
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 0.2rem rgba(0, 217, 163, 0.25);
            background: rgba(26, 26, 26, 0.9);
            color: white;
        }

        /* Buttons */
        .btn {
            border-radius: 12px;
            padding: 1rem 2rem;
            font-weight: 600;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .btn-primary {
            background: var(--gradient);
            border: none;
            box-shadow: 0 10px 30px rgba(0, 217, 163, 0.4);
        }

        .btn-primary:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0, 217, 163, 0.6);
        }

        .btn-outline-light:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(255, 255, 255, 0.2);
        }

        /* Footer */
        .footer-section {
            background: rgba(10, 10, 10, 0.95);
            backdrop-filter: blur(20px);
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            position: relative;
        }

        .footer-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: var(--gradient);
        }

        /* Responsive Design */
        @media (max-width: 1200px) {
            .hero-title {
                font-size: 3rem;
            }

            .pricing-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 1.25rem;
            }

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

        @media (max-width: 992px) {
            .hero-title {
                font-size: 2.5rem;
            }

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

            .section-title {
                font-size: 2.5rem;
            }

            .pricing-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1.25rem;
            }

            .navbar-nav {
                text-align: center;
            }

            .nav-link {
                margin: 0.25rem 0;
            }
        }

        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.2rem;
            }

            .feature-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .about-image {
                margin-bottom: 3rem;
            }

            .section-title {
                font-size: 2.2rem;
            }

            .pricing-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
                max-width: 400px;
            }

            .api-features-grid {
                grid-template-columns: 1fr;
            }

            .api-code-example pre {
                font-size: 0.8rem;
            }

            .hero-buttons .btn {
                display: block;
                width: 100%;
                margin-bottom: 1rem;
            }

            .hero-buttons .btn:last-child {
                margin-bottom: 0;
            }
        }

        @media (max-width: 576px) {
            .hero-title {
                font-size: 2rem;
            }

            .section-title {
                font-size: 2rem;
            }

            .hero-badge {
                font-size: 0.8rem;
                padding: 0.5rem 1rem;
            }

            .feature-card,
            .service-card,
            .excellence-card,
            .info-card,
            .pricing-card-compact,
            .api-feature-card {
                padding: 1.5rem;
            }

            .api-cta .btn {
                display: block;
                width: 100%;
                margin-bottom: 1rem;
            }

            .api-cta .btn:last-child {
                margin-bottom: 0;
            }

            .navbar-brand {
                font-size: 1.5rem;
            }

            .logo-img {
                height: 30px;
            }
        }

        @media (max-width: 400px) {
            .hero-title {
                font-size: 1.8rem;
            }

            .section-title {
                font-size: 1.8rem;
            }

            .hero-subtitle {
                font-size: 1.1rem;
            }

            .section-subtitle {
                font-size: 1rem;
            }
        }
    
/* ══════════════════════════════════════════════════════════
   Additions for /index_new — components index.php has no rule for.
   ══════════════════════════════════════════════════════════ */

/* Compute / Storage switch above the plans. */
.ln-tabs {
    display: flex;
    gap: 4px;
    width: max-content;
    margin: 0 auto 2rem;
    padding: 4px;
    border-radius: 14px;
    background: rgba(26, 26, 26, .8);
    border: 1px solid rgba(255, 255, 255, .1);
}

.ln-tab {
    padding: 10px 28px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, .6);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.ln-tab:hover { color: #fff; }
.ln-tab.is-active { background: var(--gradient); color: var(--dark); }



/* Service cards are links here, unlike the ones on index.php. */
.ln-service { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.ln-service, .ln-service:hover { color: var(--light); }
.ln-go { margin-top: auto; padding-top: 1rem; color: var(--primary); font-size: 13.5px; font-weight: 600; }
.ln-go i { font-size: 11px; transition: transform .25s ease; }
.ln-service:hover .ln-go i { transform: translateX(4px); }

/* Step numbers. */
.ln-step-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 1rem;
    border-radius: 12px;
    background: rgba(0, 217, 163, .15);
    color: var(--primary);
    font-weight: 800;
    font-size: 15px;
}

/* Privacy list. */
.ln-checks { margin: 0; padding: 0; list-style: none; }

.ln-checks li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .75);
    font-size: 15px;
}

.ln-checks li:last-child { border-bottom: 0; }
.ln-checks i { margin-top: 5px; color: var(--primary); font-size: 12px; }

/* Coin chips. */
.ln-coin {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(10, 10, 10, .6);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

/* FAQ. <details> on a .feature-card; the default marker sits outside the
   padding, and the card's hover lift reads as a glitch on something you
   are about to click open. */
.ln-faq summary {
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    list-style: none;
}

.ln-faq summary::-webkit-details-marker { display: none; }

.ln-faq summary::after {
    content: '+';
    float: right;
    color: var(--primary);
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
}

.ln-faq[open] summary::after { content: '\2212'; }
.ln-faq:hover { transform: none; }

/* Four tabs come to about 608px of labels. Between 576 and 608 the strip was
   wider than the viewport and pushed the whole page sideways; below 575 the
   old rule squeezed them to roughly 90px each, which does not hold
   "Bulletproof VPS".
   
   So it scrolls instead of shrinking. Labels stay whole and the strip stays
   inside the page. */
@media (max-width: 900px) {
    .ln-tabs {
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .ln-tabs::-webkit-scrollbar { display: none; }

    .ln-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 10px 18px;
    }
}

/* Our own photograph of the racks. Framed like the cards around it but with
   no dark overlay -- the point of a real photo is that it is real, and the
   hero already carries the atmospheric treatment. */
.ln-rack {
    margin: 0;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: var(--shadow);
}

.ln-rack img {
    display: block;
    width: 100%;
    height: auto;
    /* Now that it owns a column it can show whole. The cap only guards very
       wide viewports, where the column would otherwise make it tall enough to
       outrun the text beside it. */
    max-height: 460px;
    object-fit: cover;
}



/* Small icon beside each About claim. index.php uses .feature-icon-small in
   that section but neither stylesheet ever defined it, so there it renders
   with no styling at all. */
.feature-icon-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(0, 217, 163, .15);
    color: var(--primary);
    font-size: 15px;
}




/* ── Hero tint ──
   The photograph sat under a flat 70% black, which reads as a stock image
   someone darkened. A diagonal wash in the brand teal ties it to the rest of
   the page and gives the picture a direction it did not have.

   Kept dark where it matters: the bottom-right stays near-black so the
   headline, which is itself a white-to-teal gradient, keeps its contrast
   against it. */
.hero-section {
    background:
        linear-gradient(135deg,
            rgba(0, 217, 163, .38) 0%,
            rgba(0, 140, 110, .30) 28%,
            rgba(10, 10, 10, .82) 62%,
            rgba(10, 10, 10, .92) 100%),
        url('/server.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
}

/* A teal glow bleeding up from the fold, so the hero hands off to the section
   under it instead of stopping at a hard edge. */
.hero-section::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 180px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(0, 217, 163, .10) 45%, var(--dark) 100%);
}

/* ── Operating systems ──
   One row under the plans for the whole catalogue. It used to be a strip on
   every card, but the list is identical on all of them, so eight copies was
   repetition rather than information -- and it pushed the price and the
   button apart. In colour and at a readable size now that it is said once. */
.ln-osbar {
    margin-top: 2.5rem;
    padding: 1.8rem;
    border-radius: var(--border-radius);
    background: rgba(26, 26, 26, .55);
    border: 1px solid rgba(255, 255, 255, .08);
    text-align: center;
}

.ln-osbar__label {
    display: block;
    margin-bottom: 1.2rem;
    color: rgba(255, 255, 255, .6);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.ln-osbar__logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.ln-osfam {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(10, 10, 10, .6);
    border: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .85);
    font-size: 13.5px;
    font-weight: 600;
    transition: border-color .2s ease, transform .15s ease;
}

.ln-osfam:hover { border-color: var(--primary); transform: translateY(-2px); }
.ln-osfam img { width: 22px; height: 22px; object-fit: contain; }

.ln-osbar__note {
    margin: 1.2rem 0 0;
    color: rgba(255, 255, 255, .55);
    font-size: 13px;
}

@media (max-width: 575px) {
    .ln-osbar { padding: 1.4rem 1rem; }
    .ln-osfam { padding: 7px 12px; font-size: 12.5px; }
}

/* A family not offered on every plan. Marked rather than dropped: it is
   available on ten of the eleven, so hiding it would understate the
   catalogue as badly as claiming it everywhere overstates it. */
.ln-osfam.has-exception { border-style: dashed; }
.ln-osfam sup { color: var(--primary); font-size: 10px; margin-left: 1px; }
.ln-osbar__note--exception { margin-top: .4rem; font-size: 12.5px; }


/* An arrow under each one, pointing down at the plans. This is the whole
   reason the band exists: in a screenshot it has to be obvious that the
   claim belongs to the cards below it. */
.ln-callout::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 22px;
    width: 14px;
    height: 14px;
    background: var(--primary-dark);
    transform: rotate(45deg);
    border-radius: 2px;
}

/* Heading over each plan grid, shown only in screenshot mode: with the tabs
   hidden there is nothing else saying which set is which. */
.ln-promo-h {
    margin-bottom: 1.2rem;
    font-size: 1.4rem;
    font-weight: 800;
    text-align: center;
    color: var(--primary);
}

/* ══════════════════════════════════════════════════════════
   Banner (/index_new?banner=1)

   Designed for its size instead of being the page shrunk. The first
   version was the landing page in miniature -- logo, headline, subtitle,
   four claims, a photograph and a table of four plans -- and at 700px none
   of it was legible.

   A banner in a thread gets about two seconds. So: who, the one thing that
   separates us, four claims, an anchor price, the address. The full plan
   list belongs in the post as text, where it can be quoted and searched.

   Laid out once at 1000x460 and scaled, so all three sizes stay identical.
   ══════════════════════════════════════════════════════════ */

.bn-body {
    margin: 0;
    padding: 24px;
    background: #05050a;
    font-family: 'Inter', sans-serif;
    display: flex;
    justify-content: center;
}

.bn-frame { overflow: hidden; }

.bn {
    width: 1000px;
    height: 460px;
    padding: 44px 48px;
    display: flex;
    flex-direction: column;
    transform-origin: top left;
    border-radius: 18px;
    border: 1px solid rgba(0, 217, 163, .3);
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 60px rgba(0, 217, 163, .16);
}

.bn__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 26px;
}

.bn__logo { height: 40px; width: auto; }

.bn__tag {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0, 217, 163, .45);
    background: rgba(0, 217, 163, .12);
    color: #00d9a3;
    font-size: 13.5px;
    font-weight: 700;
}

/* The one line that has to survive being scaled down, so it takes the space
   the plan table used to. */
.bn__title {
    margin: 0 0 30px;
    font-size: 54px;
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -2px;
    background: linear-gradient(120deg, #fff 0%, #00d9a3 92%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 2x2. A single column would run the height out and six claims would not
   survive the scaling. */
.bn__claims {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 34px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1;
}

.bn__claims li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 19px;
    font-weight: 700;
}

.bn__claims i {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(0, 217, 163, .16);
    color: #00d9a3;
    font-size: 13px;
}

.bn__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.bn__from { display: flex; align-items: baseline; gap: 8px; color: rgba(255, 255, 255, .6); }
.bn__from small { font-size: 15px; font-weight: 600; }
.bn__from strong { color: #fff; font-size: 34px; font-weight: 900; letter-spacing: -1.2px; }

.bn__url {
    padding: 12px 26px;
    border-radius: 11px;
    background: linear-gradient(135deg, #00d9a3, #00b386);
    color: #05050a;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -.4px;
}

/* ══════════════════════════════════════════════════════════
   Forum post generator (/index_new?thread=1)
   An internal tool, so it is plain: two boxes and a copy button.
   ══════════════════════════════════════════════════════════ */

.th-body {
    margin: 0;
    padding: 40px 24px;
    background: #05050a;
    color: #fff;
    font-family: 'Inter', sans-serif;
}

.th { max-width: 860px; margin: 0 auto; }
.th__h { margin: 0 0 8px; font-size: 26px; font-weight: 800; }

.th__note { margin: 0 0 28px; color: rgba(255, 255, 255, .6); font-size: 14px; line-height: 1.6; }
.th__note a, .th__note code { color: #00d9a3; }
.th__note code { background: rgba(0, 217, 163, .1); padding: 1px 6px; border-radius: 4px; }

.th__block {
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    overflow: hidden;
}

.th__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255, 255, 255, .04);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

.th__copy {
    padding: 6px 16px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #00d9a3, #00b386);
    color: #05050a;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
}

.th__area {
    display: block;
    width: 100%;
    padding: 16px;
    border: 0;
    background: #0a0a12;
    color: #d7dae3;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    resize: vertical;
    white-space: pre;
    overflow-x: auto;
}

.th__area:focus { outline: 1px solid rgba(0, 217, 163, .5); }

/* ── Dedicated servers band ──
   Under the VPS plans, for the reader who has just gone through eleven of
   them and found none big enough. It was one line of text; that reader was
   about to leave. */
.ln-ded {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 2.5rem;
    padding: 26px 30px;
    border-radius: var(--border-radius);
    border: 1px solid rgba(0, 217, 163, .3);
    background:
        linear-gradient(120deg, rgba(0, 217, 163, .14) 0%, rgba(26, 26, 26, .8) 55%);
    text-decoration: none;
    transition: var(--transition);
}

.ln-ded:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}

.ln-ded__body { display: flex; flex-direction: column; gap: 5px; max-width: 620px; }

.ln-ded__kicker {
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.ln-ded__title { color: #fff; font-size: 24px; font-weight: 800; letter-spacing: -.6px; }
.ln-ded__sub { color: rgba(255, 255, 255, .7); font-size: 14.5px; line-height: 1.5; }

.ln-ded__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;
}

.ln-ded__from { display: flex; align-items: baseline; gap: 6px; color: rgba(255, 255, 255, .6); }
.ln-ded__from small { font-size: 13px; font-weight: 600; }
.ln-ded__from strong { color: #fff; font-size: 30px; font-weight: 900; letter-spacing: -1px; }

/* Only shown when the feed answered, so the dot always means a real count. */
.ln-ded__stock {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(0, 217, 163, .14);
    color: var(--primary);
    font-size: 12.5px;
    font-weight: 700;
}

.ln-ded__stock i { font-size: 7px; }

.ln-ded__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 10px;
    background: var(--gradient);
    color: var(--dark);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.ln-ded__cta i { font-size: 11px; transition: transform .2s ease; }
.ln-ded:hover .ln-ded__cta i { transform: translateX(3px); }

@media (max-width: 767px) {
    .ln-ded { padding: 22px; }
    .ln-ded__side { align-items: flex-start; width: 100%; }
    .ln-ded__title { font-size: 20px; }
}

/* ── Card labels ──
   Inside the card, not floating off its top edge. Both .pricing-card-compact
   and .feature-card carry overflow:hidden, so a pill at top:-12px was being
   cut in half -- and on .feature-card it landed on the 3px gradient rule its
   ::before already draws there.

   In the flow it also needs no z-index, no translate and no guessing at the
   card's padding. */
.ln-tagline {
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px 11px;
    border-radius: 999px;
    background: rgba(0, 217, 163, .16);
    border: 1px solid rgba(0, 217, 163, .4);
    color: var(--primary);
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    line-height: 1.7;
}

/* The plan header centres its children; the contact card is left-aligned. */
.ln-tagline--left { align-self: flex-start; margin-top: -4px; }

/* The featured plan keeps the accent border and glow -- that is what carries
   the emphasis now the label is a quiet tag rather than a sticker. */
.pricing-card-compact.is-featured {
    border-color: var(--primary);
    box-shadow: var(--shadow-glow);
}

/* ══════════════════════════════════════════════════════════
   Section rhythm

   Every section inherited body's #0a0a0a and set no background of its own,
   so eight of them ran together as one flat black sheet with nothing
   marking where anything began. Padding was uneven on top of that --
   .services-section came to 9rem and .pricing-grid-section to 5rem.

   Alternating bands and one spacing rule for all of them.
   ══════════════════════════════════════════════════════════ */

.ln-sec {
    position: relative;
    padding: 6.5rem 0;
    background: var(--dark);
}

/* Lifted a little rather than a different colour: on a near-black page a few
   percent of light is enough to separate two bands, and anything more starts
   looking like a different site. */
.ln-sec--alt {
    background: #101018;
    border-top: 1px solid rgba(255, 255, 255, .05);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

/* Headings had no room under them once the container's own padding went. */
.ln-sec .section-title { margin-bottom: 1rem; }
.ln-sec .section-subtitle { margin-bottom: 3.5rem; }

@media (max-width: 767px) {
    .ln-sec { padding: 4rem 0; }
    .ln-sec .section-subtitle { margin-bottom: 2.5rem; }
}

/* ── Contact band ──
   One row. Three channels is a short list, and as three tall cards it was
   given the same weight as the six services above it. */
.ln-contactbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 34px;
    padding: 34px 38px;
    border-radius: var(--border-radius);
    background: rgba(26, 26, 26, .6);
    border: 1px solid rgba(255, 255, 255, .09);
}

.ln-contactbar__intro { max-width: 330px; }

.ln-contactbar__h {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.7px;
    color: #fff;
}

.ln-contactbar__p { margin: 0; color: rgba(255, 255, 255, .65); font-size: 14.5px; }

.ln-contactbar__links { display: flex; flex-wrap: wrap; gap: 12px; }

.ln-chan {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 14px 20px;
    border-radius: 12px;
    background: var(--dark);
    border: 1px solid rgba(255, 255, 255, .1);
    text-decoration: none;
    transition: var(--transition);
}

.ln-chan:hover { border-color: var(--primary); transform: translateY(-2px); }
.ln-chan i { font-size: 19px; color: var(--primary); }
.ln-chan__body { display: flex; flex-direction: column; gap: 2px; }
.ln-chan__name { color: #fff; font-size: 15px; font-weight: 700; }
.ln-chan__sub { color: rgba(255, 255, 255, .55); font-size: 12.5px; }

/* The recommendation reads inline instead of as a badge floating off the
   card, which is what was being clipped by overflow:hidden before. */
.ln-chan__name em {
    font-style: normal;
    margin-left: 7px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 217, 163, .16);
    color: var(--primary);
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.ln-chan--best { border-color: rgba(0, 217, 163, .4); }

@media (max-width: 767px) {
    .ln-contactbar { padding: 26px 22px; }
    .ln-chan { width: 100%; }
}

/* Closing band. Kept on the base background with a teal glow rising into it,
   so the page ends on the accent rather than on another flat panel. */
.ln-final {
    background:
        radial-gradient(760px 340px at 50% 118%, rgba(0, 217, 163, .16), transparent 70%),
        var(--dark);
    border-top: 1px solid rgba(255, 255, 255, .06);
}

/* ── Domain extensions ──
   A band under the plans rather than a fourth tab. Twenty-two extensions is
   a price list, not a product to compare -- the ten cheapest answer "what
   does a domain cost here" and the link handles the rest. */
/* Domains are a price list, so they are set as one: aligned columns, the
   extension on the left and the price on the right with a dotted leader
   between. Twenty-two pills floating in a centred blob was not a list, it
   was a heap. */
.ln-tldpane { max-width: 880px; margin: 0 auto; }

.ln-tlds__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0 40px;
}

.ln-tld {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 11px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    color: var(--primary);
    font-size: 15px;
    font-weight: 800;
}

/* Dotted leader between the extension and its price, so the eye crosses the
   gap the way it does on any printed price list. */
.ln-tld::before {
    content: '';
    flex: 1;
    margin-bottom: 4px;
    border-bottom: 1px dotted rgba(255, 255, 255, .2);
}

.ln-tld em {
    order: -1;
    font-style: normal;
    color: #fff;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 14.5px;
    font-weight: 700;
}

.ln-tlds__note { text-align: center; }

.ln-tlds__note { margin: 1.2rem 0 0; color: rgba(255, 255, 255, .55); font-size: 13px; }
.ln-tlds__note a { color: var(--primary); text-decoration: none; }

/* The arrow is a glyph inside the badge, pointing at the cards. It was a
   rotated square with a 2px radius hanging off the edge, which reads as a
   diamond stuck to the side rather than as an arrow. */
.ln-callout::after {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 11px;
    opacity: .7;
}

/* ── Promo callouts ──
   Screenshot mode only. On the live page these were absolutely positioned at
   the edges of the plan grid, and any viewport without spare margin dropped
   them straight onto the first row of cards. They exist for the forum image,
   so that is where they stay -- in a row above the plans, where nothing can
   collide with anything. */
.ln-callouts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0 auto 2.2rem;
    max-width: 900px;
}

.ln-callout {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 10px;
    background: var(--gradient);
    color: var(--dark);
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -.2px;
    white-space: nowrap;
    box-shadow: 0 8px 22px rgba(0, 217, 163, .26);
}

.ln-callout--out {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
    box-shadow: none;
}

/* ══════════════════════════════════════════════════════════
   Motion and rhythm

   Six of the eight sections were the same template one after another --
   centred title, subtitle, grid of cards -- and nothing on the page ever
   moved. That is what made it read as one long scroll.
   ══════════════════════════════════════════════════════════ */

/* Applied by JS, so a page with JS disabled shows everything rather than
   nothing. */
.ln-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .55s cubic-bezier(.25, .46, .45, .94),
                transform .55s cubic-bezier(.25, .46, .45, .94);
}

.ln-reveal.is-in { opacity: 1; transform: none; }

/* Cards in a row arrive one after another rather than all at once. */
.ln-sec .col-md-6:nth-child(2) .ln-reveal,
.ln-sec .col-lg-3:nth-child(2) .ln-reveal,
.ln-sec .col-lg-4:nth-child(2) .ln-reveal { transition-delay: .07s; }
.ln-sec .col-lg-3:nth-child(3) .ln-reveal,
.ln-sec .col-lg-4:nth-child(3) .ln-reveal { transition-delay: .14s; }
.ln-sec .col-lg-3:nth-child(4) .ln-reveal { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
    .ln-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Steps as a timeline ──
   Three steps in sequence are not three things to compare, and as three
   cards this section had the same shape as the two around it. */
.ln-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The line runs behind the dots, from the first to the last. */
.ln-steps::before {
    content: '';
    position: absolute;
    top: 27px;
    left: 16%;
    right: 16%;
    height: 2px;
    background: linear-gradient(90deg, rgba(0, 217, 163, .5), rgba(0, 217, 163, .18));
}

.ln-step { position: relative; text-align: center; padding: 0 6px; }

.ln-step__dot {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: var(--dark);
    border: 2px solid var(--primary);
    color: var(--primary);
    font-size: 19px;
}

.ln-step__n {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, .3);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
}

.ln-step__h { margin: 0 0 8px; font-size: 19px; font-weight: 800; color: #fff; }
.ln-step__p { margin: 0; color: rgba(255, 255, 255, .65); font-size: 14.5px; }

@media (max-width: 767px) {
    .ln-shout { padding: 4.5rem 0; }
    .ln-steps { grid-template-columns: 1fr; gap: 34px; }
    .ln-steps::before { display: none; }
}

/* One line of proof, not a dashboard. The figures widget that lived in this
   section was removed on purpose; this is the same evidence as a sentence. */
.ln-proof {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 1.5rem;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(0, 217, 163, .1);
    border: 1px solid rgba(0, 217, 163, .28);
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
}

.ln-proof strong { color: var(--primary); font-weight: 800; }
.ln-proof i { font-size: 7px; color: var(--primary); }

/* ══════════════════════════════════════════════════════════
   Contrast — them and us

   The strongest thing this business has to say is what does not happen
   here, and that only lands beside what happens everywhere else. Two
   columns, the same four moments down each.
   ══════════════════════════════════════════════════════════ */

.ln-vs {
    padding: 7rem 0;
    background: #101018;
    border-top: 1px solid rgba(255, 255, 255, .05);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.ln-vs__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-width: 940px;
    margin: 0 auto;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .09);
}

.ln-vs__col { padding: 30px 32px 34px; }

/* Their side is drained of colour; ours carries the accent. The contrast is
   the argument, so the styling makes it before the words do. */
.ln-vs__col--them { background: rgba(0, 0, 0, .35); }

.ln-vs__col--us {
    background: linear-gradient(180deg, rgba(0, 217, 163, .1), rgba(0, 217, 163, .03));
    border-left: 1px solid rgba(0, 217, 163, .25);
}

.ln-vs__who {
    display: block;
    margin-bottom: 26px;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .35);
}

.ln-vs__col--us .ln-vs__who { color: var(--primary); }

/* Each moment hangs off a rail, so the two columns read as the same sequence
   happening twice rather than as two lists. */
.ln-vs__step {
    position: relative;
    padding: 0 0 26px 26px;
    border-left: 1px solid rgba(255, 255, 255, .1);
}

.ln-vs__col--us .ln-vs__step { border-left-color: rgba(0, 217, 163, .3); }
.ln-vs__step:last-child { border-left-color: transparent; padding-bottom: 0; }

.ln-vs__dot {
    position: absolute;
    left: -5px;
    top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
}

.ln-vs__col--us .ln-vs__dot { background: var(--primary); box-shadow: 0 0 12px var(--primary-glow); }

.ln-vs__step strong { display: block; color: #fff; font-size: 16px; font-weight: 700; margin-bottom: 3px; }
.ln-vs__step span { display: block; color: rgba(255, 255, 255, .5); font-size: 13.5px; line-height: 1.5; }
.ln-vs__col--us .ln-vs__step span { color: rgba(255, 255, 255, .68); }

@media (max-width: 767px) {
    .ln-vs { padding: 4.5rem 0; }
    .ln-vs__grid { grid-template-columns: 1fr; }
    .ln-vs__col--us { border-left: 0; border-top: 1px solid rgba(0, 217, 163, .25); }
}

/* ══════════════════════════════════════════════════════════
   Terminal — API section only

   The one place a shell belongs on this page: it is a code example, and the
   reader who wants it reads terminals all day. Everywhere else it would be
   costume.
   ══════════════════════════════════════════════════════════ */

.ln-term {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    background: #07070c;
    box-shadow: var(--shadow);
}

.ln-term__bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    background: rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.ln-term__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .16); }

.ln-term__title {
    margin-left: 8px;
    color: rgba(255, 255, 255, .4);
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 12px;
}

.ln-term__body {
    margin: 0;
    padding: 20px 22px;
    color: #cfd4dd;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.75;
    /* A long curl line must scroll inside the block, never widen the page. */
    overflow-x: auto;
    white-space: pre;
}

.ln-term__body .c { color: var(--primary); font-weight: 700; }
.ln-term__body .s { color: #e0b877; }
.ln-term__body .o { color: #7fd1a8; }
.ln-term__body .g { color: rgba(255, 255, 255, .3); }
.ln-term__body .d { color: rgba(255, 255, 255, .35); }

.ln-checks code {
    padding: 1px 7px;
    border-radius: 5px;
    background: rgba(0, 217, 163, .12);
    color: var(--primary);
    font-size: 12.5px;
}

/* ── The count on the rack photograph ──
   A figure means more standing on the thing it counts than floating as a
   pill to the left of two paragraphs. */
.ln-rack { position: relative; }

.ln-rack__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    background: linear-gradient(to top, rgba(5, 5, 10, .95), rgba(5, 5, 10, .55) 60%, transparent);
    color: #fff;
}

.ln-rack__n {
    font-size: 42px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1.6px;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}

/* The plus belongs to the number, not to the label, and rounding down means
   it is always true. */
.ln-rack__n::after { content: '+'; }

.ln-rack__t { color: rgba(255, 255, 255, .82); font-size: 13.5px; line-height: 1.45; }

@media (max-width: 575px) {
    .ln-live__row { gap: 12px 24px; }
    .ln-live__item strong { font-size: 19px; }
    .ln-rack__n { font-size: 32px; }
}

/* ── Statement band ──
   Moved to just before the closing call to action. Beside the contrast
   section it was making the same point twice in a row; down here it is the
   last thing read before the button. */
.ln-shout {
    padding: 7rem 0;
    background:
        radial-gradient(900px 400px at 15% 50%, rgba(0, 217, 163, .1), transparent 70%),
        var(--dark);
    border-top: 1px solid rgba(255, 255, 255, .05);
}

.ln-shout__text {
    margin: 0;
    max-width: 900px;
    font-size: clamp(28px, 5vw, 58px);
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: -2px;
    color: rgba(255, 255, 255, .2);
}

.ln-shout__text span { display: block; }

/* Only the last line at full strength -- the other three are the run-up. */
.ln-shout__text em {
    display: block;
    font-style: normal;
    background: linear-gradient(120deg, #fff 0%, var(--primary) 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (max-width: 767px) {
    .ln-shout { padding: 4.5rem 0; }
}

/* ══════════════════════════════════════════════════════════
   Live state — instrument panel

   A row of large centred numbers with labels underneath is the stats bar
   every hosting page has. This reads as a status strip instead: an inset
   panel with a header, cells divided by hairlines, monospace figures and a
   note under each one. It is what "live" looks like to somebody who reads
   dashboards, and it is the shape the data was already in.

   Every value comes from the request -- nothing here is typed in.
   ══════════════════════════════════════════════════════════ */

.ln-live { padding: 0; background: var(--dark); }

/* Pulled up into the hero's lower edge so it reads as instrumentation
   attached to the page rather than as the first of many bands. */
.ln-live__panel {
    position: relative;
    z-index: 3;
    margin-top: -46px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0, 217, 163, .22);
    background: rgba(8, 8, 14, .96);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

.ln-live__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: rgba(0, 217, 163, .07);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ln-live__title { color: rgba(255, 255, 255, .55); }
.ln-live__loc { margin-left: auto; color: var(--primary); }

.ln-live__pulse i {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    animation: ln-pulse 2.4s ease-in-out infinite;
}

@keyframes ln-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 217, 163, .55); }
    50%      { box-shadow: 0 0 0 7px rgba(0, 217, 163, 0); }
}

/* Hairline dividers between cells rather than gaps, which is what makes it
   read as one instrument instead of six separate figures. */
.ln-live__cells {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.ln-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 18px 18px;
    border-left: 1px solid rgba(255, 255, 255, .06);
}

.ln-cell:first-child { border-left: 0; }

.ln-cell__label {
    color: rgba(255, 255, 255, .4);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.ln-cell__value {
    color: #fff;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1px;
    /* Tabular, so a counter ticking up does not shift the cell beside it. */
    font-variant-numeric: tabular-nums;
}

.ln-cell__note {
    color: var(--primary);
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 11px;
}

/* Four cells fold to two rows of two rather than to a single column: at
   these sizes one per row leaves the panel tall and mostly empty. */
@media (max-width: 767px) {
    .ln-live__panel { margin-top: -28px; }
    .ln-live__cells { grid-template-columns: repeat(2, 1fr); }
    .ln-cell:nth-child(odd) { border-left: 0; }
    .ln-cell:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .06); }
    .ln-cell__value { font-size: 22px; }
}

/* The plus belongs to the figure, and only the server count carries one --
   the other three cells are exact. */
.ln-cell__value--plus::after { content: '+'; color: var(--primary); }

/* ── Service hierarchy ──
   Seven identical cards gave IP ranges, which five customers have, the same
   weight as VPS, which 528 servers run on. The two that are the business get
   twice the width and larger type. */
.ln-service--lead { padding: 2.4rem 2.2rem; }
.ln-service--lead h3 { font-size: 24px; letter-spacing: -.5px; }
.ln-service--lead .feature-icon { font-size: 30px; }
.ln-service--lead p { font-size: 15px; max-width: 460px; }

/* ── Hardware ──
   What the machines are, which a buyer comparing offshore hosts asks before
   anything else and the page answered nowhere. Same shape as the operating
   system row directly under it, so the two read as one block of facts about
   the metal rather than as two more sections. */
.ln-hw {
    margin-top: 2.5rem;
    padding: 1.8rem;
    border-radius: var(--border-radius);
    background: rgba(26, 26, 26, .55);
    border: 1px solid rgba(255, 255, 255, .08);
    text-align: center;
}

.ln-hw__label {
    display: block;
    margin-bottom: 1.2rem;
    color: rgba(255, 255, 255, .6);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.ln-hw__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.ln-hw__cpu {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 17px;
    border-radius: 999px;
    background: rgba(10, 10, 10, .6);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #fff;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 13px;
}

.ln-hw__cpu i { color: var(--primary); font-size: 12px; }

/* The storage node is a different class of machine and should not read as an
   option for a compute plan. */
.ln-hw__cpu--st { opacity: .75; }
.ln-hw__cpu em { font-style: normal; color: rgba(255, 255, 255, .45); font-size: 11px; }

.ln-hw__note {
    margin: 1.2rem auto 0;
    max-width: 620px;
    color: rgba(255, 255, 255, .55);
    font-size: 13px;
    line-height: 1.55;
}

/* ══════════════════════════════════════════════════════════
   Plan comparison table

   These plans differ by numbers and nothing else, and numbers are what a
   table is for. Eight cards of five identical spec lines made a reader
   compare one card at a time; a table is read down a column.

   The block of ticks under the specifications is the argument: everything
   other hosts meter, charge for or refuse runs the full width here.
   ══════════════════════════════════════════════════════════ */

/* Eight columns will not fit a phone. It scrolls inside its own box rather
   than widening the page -- and it is the one element on the page allowed
   to scroll sideways, because a comparison you cannot scroll is a
   comparison you cannot make. */
.ln-tablewrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
}

.ln-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    text-align: center;
}

.ln-table th,
.ln-table td {
    padding: 13px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* The row labels stay put while the columns scroll, so you never lose track
   of which line you are reading. */
.ln-table tbody th {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 210px;
    text-align: left;
    background: var(--dark);
    color: rgba(255, 255, 255, .62);
    font-size: 13.5px;
    font-weight: 600;
}

.ln-table__corner { background: var(--dark); position: sticky; left: 0; z-index: 3; }

.ln-table thead th {
    padding: 22px 12px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    vertical-align: bottom;
}

.ln-table__plan { display: block; color: rgba(255, 255, 255, .6); font-size: 13px; font-weight: 700; }

.ln-table__price {
    display: block;
    margin-top: 4px;
    font-size: 25px;
    font-weight: 900;
    letter-spacing: -1px;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ln-table__per { display: block; color: rgba(255, 255, 255, .35); font-size: 11px; }

.ln-table__tag {
    display: inline-block;
    margin-bottom: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--gradient);
    color: var(--dark);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.ln-table td { color: #fff; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* The included rows read quieter than the specifications, so the ticks are a
   texture you notice rather than eight rows shouting. */
.ln-table__inc th { font-weight: 500; }
.ln-table__inc td i { color: var(--primary); font-size: 13px; }

/* The chosen column is tinted the whole way down instead of being a card
   with a border, which is what a table lets you do. */
.ln-table .is-feat { background: rgba(0, 217, 163, .07); }
.ln-table thead .is-feat { background: rgba(0, 217, 163, .12); }

.ln-table__cta td { padding-top: 18px; border-bottom: 0; }
.ln-table__cta th { border-bottom: 0; }
.ln-table__cta .pricing-button-compact { padding: 9px 10px; font-size: 13px; }

@media (max-width: 767px) {
    .ln-table tbody th { min-width: 170px; font-size: 12.5px; }
    .ln-table__price { font-size: 21px; }
}

/* The seven included rows, said once above the mobile cards instead of
   repeated in each. Seven ticks across eight cards is fifty-six lines of the
   same sentence, and stating it once is also what makes it read as universal
   rather than as a per-plan feature. */
.ln-allplans {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0 0 1.4rem;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(0, 217, 163, .09);
    border: 1px solid rgba(0, 217, 163, .26);
    color: rgba(255, 255, 255, .78);
    font-size: 13.5px;
    line-height: 1.55;
}

.ln-allplans i { margin-top: 4px; color: var(--primary); font-size: 12px; }

/* The table no longer needs to survive a phone: below lg it is not rendered.
   Which means it can stop pretending, and the sticky first column can go --
   it existed only so eight columns could be scrolled on a small screen. */
@media (min-width: 992px) {
    .ln-tablewrap { overflow-x: auto; }
    .ln-table { min-width: 900px; }
}

/* ══════════════════════════════════════════════════════════
   Footer

   Was one row: logo and six links, five of them pointing at /login under
   five different labels. Five links to one destination is decoration, not
   navigation.

   Three columns now. What is sold is set as text because it is a summary,
   not a menu; the only things that are links are the ones that go
   somewhere different.
   ══════════════════════════════════════════════════════════ */

.ln-foot {
    padding: 4.5rem 0 0;
    background: #08080e;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.ln-foot__top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 3rem;
}

.ln-foot__brand p {
    margin: 18px 0 16px;
    color: rgba(255, 255, 255, .5);
    font-size: 14px;
    line-height: 1.6;
}

.ln-foot__tg {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 15px;
    border-radius: 999px;
    background: rgba(42, 171, 238, .1);
    border: 1px solid rgba(42, 171, 238, .3);
    color: #57b9f0;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.ln-foot__tg:hover { background: rgba(42, 171, 238, .18); color: #7cc9f5; }

.ln-foot__col h3 {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, .35);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.ln-foot__col ul { margin: 0; padding: 0; list-style: none; }
.ln-foot__col li { padding: 5px 0; color: rgba(255, 255, 255, .55); font-size: 14px; }
.ln-foot__col a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.ln-foot__col a:hover { color: var(--primary); }

/* Bottom bar: what somebody looks for down here is who you are, what you
   take, and the terms. */
.ln-foot__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .35);
    font-size: 13px;
}

.ln-foot__bar a { color: rgba(255, 255, 255, .5); text-decoration: none; }
.ln-foot__bar a:hover { color: var(--primary); }

.ln-foot__coins { display: flex; flex-wrap: wrap; gap: 9px; }

/* Dimmed: they are a fact about payment, not twelve logos competing with the
   sign-in link beside them. */
.ln-foot__coins img { opacity: .38; transition: opacity .2s ease; }
.ln-foot__coins:hover img { opacity: .7; }

/* Tor mirror card (footer) */
.ln-onion {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 700px;
    margin: 30px auto 6px;
    padding: 18px 22px;
    background: linear-gradient(135deg, rgba(0, 217, 163, .07), rgba(255, 255, 255, .02));
    border: 1px solid rgba(0, 217, 163, .18);
    border-radius: 16px;
}
.ln-onion__icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 217, 163, .12);
    color: var(--primary);
    font-size: 20px;
}
.ln-onion__body { flex: 1 1 auto; min-width: 0; }
.ln-onion__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #fff;
    font-size: 14px;
    margin-bottom: 3px;
}
.ln-onion__tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--primary);
    background: rgba(0, 217, 163, .12);
    padding: 2px 7px;
    border-radius: 999px;
}
.ln-onion__sub { color: rgba(255, 255, 255, .5); font-size: 12px; margin-bottom: 11px; }
.ln-onion__row { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.ln-onion__addr {
    flex: 1 1 240px;
    min-width: 0;
    display: flex;
    align-items: center;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .85);
    background: rgba(0, 0, 0, .32);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    padding: 9px 12px;
    word-break: break-all;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}
.ln-onion__addr:hover { color: var(--primary); border-color: rgba(0, 217, 163, .35); }
.ln-onion__copy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--gradient);
    color: #04231b;
    border: none;
    border-radius: 10px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.ln-onion__copy:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 217, 163, .28); }
.ln-onion__copy.copied { background: rgba(0, 217, 163, .15); color: var(--primary); }
@media (max-width: 560px) {
    .ln-onion { flex-direction: column; text-align: center; }
    .ln-onion__icon { align-self: center; }
    .ln-onion__label, .ln-onion__row { justify-content: center; }
}

@media (max-width: 767px) {
    .ln-foot { padding-top: 3rem; }
    .ln-foot__top { grid-template-columns: 1fr; gap: 34px; }
    .ln-foot__bar { justify-content: flex-start; }
}

/* ── Network services ──
   Rows, not cards: these are six things with wildly different prices -- 50
   to 3500 -- and a grid of equal cards would flatten that. A row per service
   with the figure on the right reads as a rate card, which is what it is. */
.ln-netpane { max-width: 900px; margin: 0 auto; }

.ln-net {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    padding: 20px 22px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: rgba(26, 26, 26, .6);
    border: 1px solid rgba(255, 255, 255, .09);
    transition: var(--transition);
}

.ln-net:hover { border-color: var(--primary); transform: translateY(-2px); }
.ln-net__body { flex: 1; min-width: 240px; }
.ln-net__name { margin: 0 0 4px; color: #fff; font-size: 17px; font-weight: 700; }
.ln-net__desc { margin: 0; color: rgba(255, 255, 255, .55); font-size: 13.5px; line-height: 1.5; }

.ln-net__price { text-align: right; }

.ln-net__amount {
    display: block;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.8px;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Setup and renewal both, where there are both. An ASN quoted at 600 alone
   reads as far worse than it is, and at 100 alone as far better. */
.ln-net__cycle { display: block; color: rgba(255, 255, 255, .45); font-size: 12px; }

.ln-net__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid rgba(0, 217, 163, .4);
    color: var(--primary);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.ln-net__cta:hover { background: var(--primary); color: var(--dark); }
.ln-net__cta i { font-size: 11px; }

@media (max-width: 575px) {
    .ln-net__price { text-align: left; }
    .ln-net__cta { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════
   Background motion

   The teal glows on this page were static. They move now: drifting light
   blooms behind the hero, and the section glows breathe instead of sitting
   still. CSS only, GPU only (transform and opacity), and off entirely under
   prefers-reduced-motion.
   ══════════════════════════════════════════════════════════ */

/* ── Hero ── two light blooms drifting across it, plus the panning grid.
   Stronger and faster than before -- teal on an already-teal hero was too
   subtle to read as motion. */
.hero-section::before,
.hero-section::after {
    content: '';
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    will-change: transform, opacity;
}

.hero-section::before {
    width: 50vw;
    height: 50vw;
    top: -16%;
    left: -10%;
    background: radial-gradient(circle, rgba(0, 217, 163, .85), transparent 66%);
    opacity: .8;
    animation: ln-drift-a 16s ease-in-out infinite;
}

.hero-section::after {
    width: 42vw;
    height: 42vw;
    bottom: -22%;
    right: -8%;
    background: radial-gradient(circle, rgba(0, 170, 235, .6), transparent 66%);
    opacity: .7;
    animation: ln-drift-b 20s ease-in-out infinite;
}

@keyframes ln-drift-a {
    0%,100% { transform: translate(0,0) scale(1);        opacity: .55; }
    50%     { transform: translate(16vw,9vh) scale(1.25); opacity: .9; }
}

@keyframes ln-drift-b {
    0%,100% { transform: translate(0,0) scale(1);          opacity: .5; }
    50%     { transform: translate(-13vw,-8vh) scale(1.18); opacity: .8; }
}

.hero-section > .ln-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(0, 217, 163, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 217, 163, .07) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 40%, transparent 100%);
            mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 40%, transparent 100%);
    animation: ln-grid-pan 30s linear infinite;
}

@keyframes ln-grid-pan {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 46px 46px, 46px 46px; }
}

/* ── Section glows ── the teal blooms in the statement and closing bands were
   painted static into the background. They are animated blobs now, one per
   section, drifting and breathing behind the text. Both sections get the
   position + overflow they need to hold an absolute child, and their content
   is lifted above it. */
.ln-shout,
.ln-final { position: relative; overflow: hidden; }

.ln-shout > .container,
.ln-final > .container { position: relative; z-index: 1; }

.ln-shout::before,
.ln-final::before {
    content: '';
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(90px);
    background: radial-gradient(circle, rgba(0, 217, 163, .55), transparent 68%);
    will-change: transform, opacity;
}

/* Statement band: bloom drifting in from the left, where its static glow was. */
.ln-shout::before {
    width: 44vw;
    height: 44vw;
    top: -30%;
    left: -14%;
    animation: ln-drift-a 18s ease-in-out infinite;
}

/* Closing band: bloom rising and breathing from the bottom centre. */
.ln-final::before {
    width: 52vw;
    height: 52vw;
    left: 50%;
    bottom: -40%;
    margin-left: -26vw;
    animation: ln-breathe 12s ease-in-out infinite;
}

@keyframes ln-breathe {
    0%,100% { transform: translateY(0) scale(1);      opacity: .5; }
    50%     { transform: translateY(-6vh) scale(1.15); opacity: .85; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-section::before,
    .hero-section::after,
    .hero-section > .ln-grid,
    .ln-shout::before,
    .ln-final::before { animation: none; }
}