/*
Theme Name:   Nexo Labs
Theme URI:    https://nexolabs.it
Description:  Tema premium dark tech per Nexo Labs S.r.l.s. — Design accattivante e moderno
Author:       Nexo Labs
Version:      2.0.0
Text Domain:  nexolabs
*/

/* ============================================
   NEXO LABS — PREMIUM DARK THEME
   Tailwind handles most utilities. This file adds
   polish, typography, form styles, and micro details.
   ============================================ */

:root {
    --accent: #39f3a2;
}

/* Base */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-feature-settings: "ss01", "ss02", "cv01";
}

/* Headings */
h1, h2, h3, h4 {
    font-feature-settings: "tnum";
}

/* Selection */
::selection {
    background-color: #39f3a2;
    color: #05070f;
}

/* Nice focus states globally */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid #39f3a2;
    outline-offset: 3px;
}

/* Mobile nav link styles (used in header) */
.mobile-nav-link {
    color: #e2e8f0;
    transition: color 0.15s ease;
}
.mobile-nav-link:hover {
    color: #39f3a2;
}

/* ============================================
   FORMS — Premium dark inputs
   ============================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    box-shadow: 0 0 0 1px #39f3a2;
    border-color: #39f3a2;
}

/* ============================================
   BUTTONS (used in older templates / fallbacks)
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 14px;
    font-weight: 600;
    text-decoration: none;
    font-size: 15px;
    transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.btn-primary {
    background: #39f3a2;
    color: #05070f;
    border: none;
}

.btn-primary:hover {
    background: #1fd07e;
    transform: translateY(-1px);
}

.btn-secondary {
    background: transparent;
    color: #e2e8f0;
    border: 1px solid #1f2937;
}

.btn-secondary:hover {
    border-color: #39f3a2;
    color: #39f3a2;
    background: rgba(57, 243, 162, 0.06);
}

/* ============================================
   CARDS (legacy support)
   ============================================ */
.card {
    background: #11181f;
    border: 1px solid #1f2937;
    border-radius: 20px;
    padding: 32px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
    transform: translateY(-4px);
    border-color: rgba(57, 243, 162, 0.45);
    box-shadow: 0 25px 60px -15px rgb(0 0 0 / 0.25);
}

/* ============================================
   UTILITIES & EXTRAS
   ============================================ */
.section {
    padding: 100px 0;
}

/* Subtle grid / tech textures (used in hero) */
.tech-grid {
    background-image: 
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 38px 38px;
}

/* Accent text gradient option */
.text-gradient-accent {
    background: linear-gradient(90deg, #fff, #39f3a2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Footer link polish */
footer a {
    transition: color 0.2s ease;
}

/* Small animation for the pulse in hero badge */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}
.animate-pulse {
    animation: pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Responsive typography tweaks */
@media (max-width: 640px) {
    h1 {
        font-size: 52px !important;
        line-height: 0.98 !important;
    }
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}