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

*{
margin:0;
padding:0;
box-sizing:border-box;
/*font-family:Arial, Helvetica, sans-serif;*/
}

@media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } } /* smooth scroll */
html {
    overflow: scroll;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

body{
background:#0f172a;
color:white;
text-rendering: optimizeLegibility;
-webkit-font-feature-settings: "kern";
-moz-font-feature-settings: "kern";
font-feature-settings: "kern";
font-family: 'Poppins', sans-serif !important; /* Poppins or Inter or loaded font*/
}


:root {
            /*--primary-color: #007bff;
            --dark-bg: #0a0a0a;
            --text-light: #ffffff;
            --text-gray: #a0a0a0;
            --accent-glow: rgba(0, 123, 255, 0.5);*/
        }

nav {
            background-color: var(--dark-bg);
            padding: 0 20px;
            display: flex;
            align-items: center;
            height: 70px;
            position: relative;
        }

        .nav-links {
            list-style: none;
            display: flex;
            margin: 0;
            padding: 0;
            height: 100%;
        }

        .nav-item {
            display: flex;
            align-items: center;
            height: 100%;
        }

        .nav-item > a {
            color: var(--text-light);
            text-decoration: none;
            padding: 0 25px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 14px;
            transition: color 0.3s;
        }

        .nav-item:hover > a {
            color: var(--primary-color);
        }

        /* Mega Menu Container */
        .mega-menu {
            position: absolute;
            top: 70px;
            left: 0;
            width: 100%;
            background: #0a0a0a;
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
            display: grid;
            grid-template-columns: 1fr 1fr 1.5fr;
            padding: 30px;
            box-sizing: border-box;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            border-bottom: 4px solid var(--primary-color);
            z-index: 1000;
        }

        .nav-item:hover .mega-menu {
            opacity: 1;
            visibility: visible;
            top: 70px;
        }

        .menu-column h3 {
            color: var(--dark-bg);
            font-size: 16px;
            margin-bottom: 15px;
            border-bottom: 2px solid #eee;
            padding-bottom: 8px;
        }

        .menu-column ul {
            list-style: none;
            padding: 0;
        }

        .menu-column ul li {
            margin-bottom: 10px;
        }

        .menu-column ul li a {
            color: white;
            text-decoration: none;
            font-size: 14px;
            transition: transform 0.2s, color 0.2s;
            display: inline-block;
        }

        .menu-column ul li a:hover {
            color: #22c55e;
            /*color: var(--primary-color*/
            transform: translateX(5px);
        }

        /* Sezione Featured */
        .featured-app {
            background: #0f172a;
            padding: 20px;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .badge {
            background: var(--primary-color);
            color: white;
            font-size: 10px;
            padding: 3px 8px;
            border-radius: 4px;
            align-self: flex-start;
        }

        .dev-mode-link {
            margin-top: 15px;
            display: block;
            font-family: 'Courier New', Courier, monospace;
            color: #28a745 !important;
            font-weight: bold;
        }

        .cta-button {
            background: var(--primary-color);
            color: white !important;
            padding: 10px 20px;
            border-radius: 5px;
            text-align: center;
            margin-top: 15px;
            font-weight: bold;
        }






        /* 3. Stile del pulsante: rimosso l'overflow nascosto da qui e spostato il controllo */
        .nav-item-appstore > a {
          position: relative;
          z-index: 1;
          padding: 8px 20px; /* Ridotto leggermente per aderenza */
          background: #0a0a0a;
          color: white;
          border-radius: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          text-decoration: none;
          border: none;
          overflow: hidden; /* Fondamentale: taglia la luce che esce dal perimetro */
        }

        /* 4. La cornice: deve essere enorme per non lasciare spazi vuoti mentre ruota */
        .nav-item-appstore > a::before {
          content: '';
          position: absolute;
          z-index: -2;
          /* Usiamo un valore molto alto per coprire i lati lunghi del pulsante */
          left: -150%;
          top: -150%;
          width: 400%;
          height: 400%;

          /* Gradiente continuo: l'ultimo colore deve essere uguale al primo */
          background: conic-gradient(
            #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000
          );

          animation: rainbow-rotate 3s linear infinite;
        }

        /* 5. Il "Tappo" interno: deve coprire tutto tranne 1-2 pixel */
        .nav-item-appstore > a::after {
          content: '';
          position: absolute;
          z-index: -1;
          /* 'inset' è il modo più veloce per definire lo spessore della cornice */
          inset: 2px;
          background: #0a0a0a;
          border-radius: 50px;
        }

        /* Animazione di rotazione standard */
        @keyframes rainbow-rotate {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }



/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 601px) { .navAutoText { font-size: 2rem; } .tableCellText { font-size: 1rem; } }
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) { .navAutoText { font-size: 1rem; } .tableCellText { font-size: .75rem; } }

/* HEADER */

header{
background:#020617;
padding:15px 40px;
display:flex;
align-items:center;
vertical-align: middle;
justify-content:space-between;
border-bottom:1px solid #1e293b;

/*position: -webkit-sticky;
position: sticky;
top:0;
z-index: 1;
height: 100%;
overflow-y: hidden;*/
}

.logo{
font-size:24px;
font-weight:bold;
color:#22c55e;
}

.nav-scroller {
  /*background-color: var(--bs-light) !important;*/
  position: -webkit-sticky;
  position: sticky;
  top:0; /* MARGIN-TOP NAV ONLY IF PRESE*/
  z-index: 1;
  height: auto; /*2.75rem;*/
  /*overflow-x: hidden;*/
  display: flex;
  justify-content: center;
  overflow-y: hidden;
  align-items: center;
  vertical-align: middle;
  margin: auto;
  /*border: 2px solid red;*/
}

.fadingo_{
  /*background: red;
  background-color: red;.walt {  font-family: "waltograph" !important; }*/
  background: linear-gradient(to bottom, var(--bs-secondary-bg), var(--bs-secondary-bg)) !important;
}
.fadingo{
  /*background: red;
  background-color: red;.walt {  font-family: "waltograph" !important; }*/
  /*background: linear-gradient(to bottom, var(--bs-secondary-bg), transparent) !important; #020617 #0f172a*/
  background: linear-gradient(to bottom, #020617, transparent) !important;
}

.fadingo_footer{
  /*background: red;
  background-color: red;.walt {  font-family: "waltograph" !important; }*/
  background: linear-gradient(to top, var(--bs-secondary-bg), transparent);
}

.fadingo_success{
  /*background: linear-gradient(to top, var(--bs-success), var(--bs-secondary-bg)) !important;*/
  transition: all 0.3s ease; opacity: 0.95;
  background: linear-gradient(to top, var(--bs-success), var(--bs-success)) !important;
}
.fadingo_success:hover { transform: rotate(0.004turn); }
.fadingo_bluepurple{
  transition: all 0.3s ease; opacity: 0.95;
  background: linear-gradient(to top, #6A5ACD, #6A5ACD) !important;
}
.fadingo_bluepurple:hover { transform: rotate(-0.004turn); }

.example-3 {
  position: relative;
  border-radius: var(--border-radius);
  padding: 4px;
}

.example-3 .inner {
  border-radius: 4px;
}

.example-3::before,
.example-3::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
    45deg,
    #ff595e,
    #ffca3a,
    #8ac926,
    #1982c4,
    #6a4c93,
    #ff6700
  );
  background-size: 400%;
  z-index: -1;
  animation: glow 20s linear infinite;
  width: 100%;
  border-radius: var(--border-radius);
}

.example-3::after {
  filter: blur(25px);
  transform: translate3d(0, 0, 0); /* For Safari */
}

@keyframes glow {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: 100% 0;
  }

  100% {
    background-position: 0 0;
  }
}


/* NAVIGATION */

/*nav ul{
height: auto;
margin: auto;
display:flex;
gap:25px;
justify-content: center;
align-items: center;
align-content: center;
list-style:none;
}*/

/*nav li{
  height: auto;
  margin: auto;
  display:flex;
  position:relative;
  cursor:pointer;
  justify-content: center;
  align-items: center;
  align-content: center;
  list-style: none;
  letter-spacing: -0.6px;
}*/

/* DROPDOWN
.dropdown{
  display:none;
  position:absolute;
  top:30px;
  left: 0;
  background:#1e293b;
  padding:10px;
  border-radius:6px;
  min-width:150px;
  background: white;
}
*/

.dropdown {
  display: none;
  position: absolute;
  border: 8px solid #020617;
  top: 100%;
  left: 0;
  border-radius:8px;
  background: #0f172a;
}


.dropdown p{
padding:6px;
margin: 6px;
cursor:pointer;
}

.dropdown p:hover{
background:#334155;
}

/*li:hover .dropdown {
  display: block;
}*/

/* SEARCH BAR */

.search-area{
display:flex;
justify-content:center;
padding:25px;
background:#020617;
}

.search-box{
width:600px;
display:flex;
background:#1e293b;
border-radius:30px;
overflow:hidden;
}

.search-box input{
flex:1;
border:none;
background:none;
padding:14px;
color:white;
}

.search-box button{
background:#22c55e;
border:none;
padding:14px 20px;
cursor:pointer;
}

/* HERO */

.hero{
  text-align:center;
  padding:70px 20px;
}

.hero h1{
font-size:42px;
margin-bottom:10px;
}

.hero p{
color:#94a3b8;
}

/* FILTERS */

.filters{
display:flex;
gap:15px;
justify-content:center;
padding:0px;
}

.filters select{
padding:10px;
border-radius:6px;
border:none;
}

/* ROBOT GRID display:grid */

.robot-grid{
  display:none;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:25px;
  padding:40px;
}

.robot-card{
background:#1e293b;
padding:15px;
border-radius:10px;
transition:0.3s;
}

.robot-card:hover{
transform:translateY(-5px);
box-shadow:0 10px 20px rgba(0,0,0,0.4);
}

.robot-card img{
width:100%;
height:140px;
object-fit:cover;
border-radius:6px;
}

.price{
color:#22c55e;
font-weight:bold;
}

/* BUTTON */

.btn{
background:#22c55e;
border:none;
padding:10px 18px;
border-radius:6px;
cursor:pointer;
}

/* LOGIN MODAL */

.modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
justify-content:center;
align-items:center;
}

.modal-box{
background:#1e293b;
padding:30px;
border-radius:10px;
width:300px;
}

.modal-box input{
width:100%;
padding:10px;
margin:8px 0;
border:none;
border-radius:4px;
}

a { text-decoration: none; color: inherit; }
/* Categorie */
.categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; padding: 40px 30px; }
.category { background: #fff; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.1); cursor: pointer; transition: transform 0.2s; }
.category:hover { transform: translateY(-5px); }
.category img { width: 60px; height: 60px; margin-bottom: 10px; }

/* Hero #ff9900*/
.hero { background: url('https://images.unsplash.com/photo-1600079629265-5e511f84c2ff?auto=format&fit=crop&w=1950&q=80') center/cover no-repeat; color: #fff; text-align: center; padding: 100px 20px; }
.hero h1 { font-size: 48px; margin-bottom: 10px; text-shadow: 1px 1px 5px #000; }
.hero p { font-size: 20px; margin-bottom: 20px; text-shadow: 1px 1px 5px #000; }
.hero .btn { padding: 12px 25px; margin: 5px; background: #22c55e; color: black; border-radius: 5px; font-weight: bold; }

/* Footer */
footer { background: #222; color: #fff; text-align: center; padding: 30px; margin-top: 40px; }
footer a { color: #ff9900; margin: 0 8px; }

/* Responsive */
@media (max-width: 768px) {
  .hero h1 { font-size: 32px; }
  .hero p { font-size: 16px; }
}