* {    margin: 0;    padding: 0;    box-sizing: border-box;}body {    font-family: 'Arial', sans-serif;    overflow-x: hidden;    background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 50%, #000000 100%);    min-height: 100vh;    color: white;}img {    pointer-events: none;}/* Animated Background */.animated-bg {    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    z-index: -1;    overflow: hidden;}.wave {    position: absolute;    width: 200%;    height: 200%;    background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);    background-size: 50px 50px;    animation: float 20s infinite linear;}.wave:nth-child(1) {    animation-delay: 0s;    opacity: 0.3;}.wave:nth-child(2) {    animation-delay: -5s;    opacity: 0.2;    animation-duration: 25s;}.wave:nth-child(3) {    animation-delay: -10s;    opacity: 0.1;    animation-duration: 30s;}@keyframes float {    0% {        transform: translateX(-50%) translateY(-50%) rotate(0deg);    }    100% {        transform: translateX(-50%) translateY(-50%) rotate(360deg);    }}/* Glassmorphism utility class */.glass {    background: rgba(255, 255, 255, 0.1);    backdrop-filter: blur(3px);    filter: url(#glass-distortion);    overflow: hidden;    isolation: isolate;    border-radius: 20px;}/* Header */header {    position: fixed;    top: 0;    width: 100%;    padding: 20px 50px;    z-index: 1000;    transition: all 0.3s ease;    display: flex;    flex-direction: row;    justify-content: center;    align-items: center;}.header-glass {    /* sovrapposizione semi-trasparente + blur */    position: relative;    background: #ffffff80;    border: 1px solid rgba(255,255,255,0.1);    box-shadow: inset 2px 2px 1px 0 #ffffff80, inset -1px -1px 1px 1px #ffffff80;    border-radius: 15px;    padding: 15px 30px;    display: flex;    justify-content: center;    align-items: center;    animation: slideDown 1s ease-out;    z-index: 10;    overflow: hidden;}.header-glass nav {    z-index: 999;}.nav-links {    z-index: 999;}.header-glass-left {    position: absolute;    left: 20px;    width: 50px;    background: rgba(0, 0, 0, 0.2);    backdrop-filter: blur(15px);    -webkit-backdrop-filter: blur(15px);    border: 1px solid rgba(255, 255, 255, 0.1);    border-radius: 1rem;    padding: 8px 25px;    display: flex;    justify-content: center;    align-items: center;    animation: slideDown 1s ease-out;    cursor: pointer;}.logo {    width: 30px;}.nav-links {    display: flex;    gap: 30px;    list-style: none;}.nav-links a {    color: white;    text-decoration: none;    transition: all 0.3s ease;    position: relative;}.nav-links a:hover {    color: #ffffff;    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);}/* Hero Section */.hero {    height: 100vh;    display: flex;    flex-direction: column;    justify-content: center;    align-items: center;    text-align: center;    position: relative;    padding: 0 20px;}.hero-content {    max-width: 800px;    animation: fadeInUp 1.5s ease-out 0.5s both;}.company-name {    font-size: clamp(3rem, 8vw, 8rem);    font-weight: 900;    letter-spacing: 5px;    margin-bottom: 20px;    background: linear-gradient(45deg, #ffffff, #cccccc, #ffffff);    background-size: 200% 200%;    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;    background-clip: text;    animation: shimmer 3s ease-in-out infinite;}.slogan {    font-size: clamp(1.2rem, 3vw, 2rem);    font-weight: 300;    letter-spacing: 3px;    margin-bottom: 50px;    opacity: 0.9;    animation: fadeInUp 1.5s ease-out 1s both;}.cta-button {    display: inline-block;    padding: 18px 40px;    font-size: 18px;    font-weight: 600;    text-decoration: none;    color: white;    background: rgba(255, 255, 255, 0.1);    backdrop-filter: blur(20px);    -webkit-backdrop-filter: blur(20px);    border: 2px solid rgba(255, 255, 255, 0.3);    border-radius: 50px;    transition: all 0.4s ease;    position: relative;    overflow: hidden;    animation: fadeInUp 1.5s ease-out 1.5s both;}.cta-button:hover {    transform: translateY(-5px);    box-shadow: 0 15px 35px rgba(255, 255, 255, 0.2);    border-color: rgba(255, 255, 255, 0.5);    background: rgba(255, 255, 255, 0.2);}.cta-button::before {    content: '';    position: absolute;    top: 0;    left: -100%;    width: 100%;    height: 100%;    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);    transition: left 0.5s;}.cta-button:hover::before {    left: 100%;}/* Floating particles */.particle {    position: absolute;    width: 4px;    height: 4px;    background: rgba(255, 255, 255, 0.6);    border-radius: 50%;    animation: floatParticle 15s infinite linear;}@keyframes floatParticle {    0% {        transform: translateY(100vh) translateX(0);        opacity: 0;    }    10% {        opacity: 1;    }    90% {        opacity: 1;    }    100% {        transform: translateY(-100vh) translateX(100px);        opacity: 0;    }}/* About Section */.about {    padding: 100px 50px;    text-align: center;    position: relative;}.about-content {    max-width: 1000px;    margin: 0 auto;}.section-title {    font-size: clamp(2rem, 5vw, 4rem);    font-weight: 700;    margin-bottom: 30px;    opacity: 0;    transform: translateY(50px);    transition: all 0.8s ease;}.section-title.animate {    opacity: 1;    transform: translateY(0);}.about-text {    font-size: 1.2rem;    line-height: 1.8;    opacity: 0.9;    margin-bottom: 50px;    opacity: 0;    transform: translateY(30px);    transition: all 0.8s ease 0.3s;}.about-text.animate {    opacity: 0.9;    transform: translateY(0);}.features {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));    gap: 30px;    margin-top: 50px;}.feature-card {    padding: 40px 30px;    text-align: center;    transition: all 0.4s ease;    opacity: 0;    transform: translateY(50px);}.feature-card.animate {    opacity: 1;    transform: translateY(0);}.feature-card:hover {    transform: translateY(-10px);}.feature-icon {    font-size: 3rem;    margin-bottom: 20px;    display: block;}.feature-title {    font-size: 1.5rem;    font-weight: 600;    margin-bottom: 15px;}.feature-description {    opacity: 0.8;    line-height: 1.6;}/* Animations */@keyframes slideDown {    from {        transform: translateY(-100px);        opacity: 0;    }    to {        transform: translateY(0);        opacity: 1;    }}@keyframes fadeInUp {    from {        transform: translateY(50px);        opacity: 0;    }    to {        transform: translateY(0);        opacity: 1;    }}@keyframes shimmer {    0%, 100% {        background-position: 0% 50%;    }    50% {        background-position: 100% 50%;    }}/* Responsive Design */@media (max-width: 768px) {    header {        padding: 15px 20px;    }    .nav-links {        display: none;    }    .hero {        padding: 0 15px;    }    .about {        padding: 80px 20px;    }    .features {        grid-template-columns: 1fr;        gap: 20px;    }    .company-name {        letter-spacing: 2px;    }    .slogan {        letter-spacing: 1px;    }}/* Scroll indicator */.scroll-indicator {    position: absolute;    bottom: 30px;    left: 50%;    transform: translateX(-50%);    animation: bounce 2s infinite;}.scroll-arrow {    width: 30px;    height: 30px;    border: 2px solid rgba(255, 255, 255, 0.6);    border-top: none;    border-left: none;    transform: rotate(45deg);}@keyframes bounce {    0%, 20%, 50%, 80%, 100% {        transform: translateX(-50%) translateY(0);    }    40% {        transform: translateX(-50%) translateY(-10px);    }    60% {        transform: translateX(-50%) translateY(-5px);    }}/* Portfolio Section */.portfolio {    padding: 100px 50px;    text-align: center;}.portfolio-content {    max-width: 1200px;    margin: 0 auto;}.section-subtitle {    font-size: 1.2rem;    opacity: 0.8;    margin-bottom: 60px;    opacity: 0;    transform: translateY(30px);    transition: all 0.8s ease 0.2s;}.section-subtitle.animate {    opacity: 0.8;    transform: translateY(0);}.portfolio-grid {    display: grid;    max-width: calc(3 * 450px);    gap: 30px;    grid-template-columns: repeat(3, 1fr);    justify-items: center;    align-items: center;    justify-content: center;    align-content: center;}.portfolio-item {    padding: 0;    overflow: hidden;    transition: all 0.4s ease;    opacity: 0;    transform: translateY(50px);    width: 450px;    border: 1px solid #111;    border-radius: 1rem;    box-shadow: 0 0 10px #111;}.portfolio-item.animate {    opacity: 1;    transform: translateY(0);}.portfolio-item:hover {    transform: translateY(-10px) scale(1.02);}.portfolio-image {    height: 200px;    background: linear-gradient(45deg, #333, #666);    position: relative;    display: flex;    align-items: center;    justify-content: center;    overflow: hidden;    border-radius: .5rem;}.portfolio-image img {    position: absolute;    width: 100%;    height: 100%;    object-fit: cover;}.play-button {    width: 60px;    height: 60px;    background: rgba(255, 255, 255, 0.2);    border-radius: 50%;    display: flex;    align-items: center;    justify-content: center;    font-size: 20px;    transition: all 0.3s ease;    backdrop-filter: blur(10px);}.portfolio-item:hover .play-button {    background: rgba(255, 255, 255, 0.3);    transform: scale(1.1);}.portfolio-info {    padding: 25px;    text-align: left;}.portfolio-info h3 {    font-size: 1.3rem;    margin-bottom: 5px;}.portfolio-info p {    opacity: 0.8;    margin-bottom: 10px;}.portfolio-year {    font-size: 0.9rem;    opacity: 0.6;}/* Services Section */.services {    padding: 100px 50px;    background: rgba(0, 0, 0, 0.3);}.services-content {    max-width: 1200px;    margin: 0 auto;    text-align: center;}.services-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));    gap: 40px;    margin-top: 60px;}.service-card {    padding: 40px 30px;    text-align: center;    transition: all 0.4s ease;    opacity: 0;    transform: translateY(50px);}.service-card.animate {    opacity: 1;    transform: translateY(0);}.service-card:hover {    transform: translateY(-15px);}.service-icon {    font-size: 4rem;    margin-bottom: 25px;}.service-card h3 {    font-size: 1.8rem;    margin-bottom: 20px;}.service-card p {    opacity: 0.9;    line-height: 1.6;    margin-bottom: 25px;}.service-features {    list-style: none;    padding: 0;}.service-features li {    padding: 8px 0;    opacity: 0.8;    border-bottom: 1px solid rgba(255, 255, 255, 0.1);}.service-features li:last-child {    border-bottom: none;}/* Team Section */.team {    padding: 100px 50px;}.team-content {    max-width: 1000px;    margin: 0 auto;    text-align: center;}.team-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));    gap: 40px;    margin-top: 60px;}.team-member {    padding: 40px 30px;    text-align: center;    transition: all 0.4s ease;    opacity: 0;    transform: translateY(50px);}.team-member.animate {    opacity: 1;    transform: translateY(0);}.team-member:hover {    transform: translateY(-10px);}.member-avatar {    width: 120px;    height: 120px;    border-radius: 50%;    background: linear-gradient(45deg, #666, #999);    margin: 0 auto 25px;}.member-avatar img {    width: 100%;    height: 100%;    border-radius: 50%;}.team-member h3 {    font-size: 1.5rem;    margin-bottom: 10px;}.member-role {    color: #ccc;    font-weight: 600;    margin-bottom: 15px;}.member-bio {    opacity: 0.8;    line-height: 1.6;    font-size: 0.95rem;}/* Contact Section */.contact {    padding: 100px 50px;    background: rgba(0, 0, 0, 0.2);}.contact-content {    max-width: 1200px;    margin: 0 auto;    text-align: center;}.contact-container {    display: grid;    grid-template-columns: 1fr 2fr;    gap: 60px;    margin-top: 60px;    align-items: start;}.contact-info {    display: flex;    flex-direction: column;    gap: 30px;}.contact-item {    padding: 30px 25px;    text-align: center;    transition: all 0.3s ease;}.contact-item:hover {    transform: translateY(-5px);}.contact-icon {    font-size: 2.5rem;    margin-bottom: 15px;}.contact-item h3 {    margin-bottom: 10px;    font-size: 1.2rem;}.contact-form {    padding: 40px;}.form-group {    margin-bottom: 25px;}.form-group input,.form-group select,.form-group textarea {    width: 100%;    padding: 15px 20px;    background: rgba(255, 255, 255, 0.1);    border: 1px solid rgba(255, 255, 255, 0.2);    border-radius: 10px;    color: white;    font-size: 16px;    transition: all 0.3s ease;}.form-group input:focus,.form-group select:focus,.form-group textarea:focus {    outline: none;    border-color: rgba(255, 255, 255, 0.4);    background: rgba(255, 255, 255, 0.15);}.form-group input::placeholder,.form-group textarea::placeholder {    color: rgba(255, 255, 255, 0.6);}.submit-btn {    width: 100%;    padding: 18px;    background: rgba(255, 255, 255, 0.1);    border: 2px solid rgba(255, 255, 255, 0.3);    border-radius: 10px;    color: white;    font-size: 18px;    font-weight: 600;    cursor: pointer;    transition: all 0.3s ease;}.submit-btn:hover {    background: rgba(255, 255, 255, 0.2);    border-color: rgba(255, 255, 255, 0.5);    transform: translateY(-2px);}/* Footer */.footer {    background: rgba(0, 0, 0, 0.8);    padding: 60px 50px 30px;    border-top: 1px solid rgba(255, 255, 255, 0.1);}.footer-content {    max-width: 1200px;    margin: 0 auto;}.footer-main {    display: grid;    grid-template-columns: 1fr 2fr;    gap: 60px;    margin-bottom: 40px;}.footer-brand h3 {    font-size: 2rem;    margin-bottom: 10px;}.footer-brand p {    opacity: 0.8;    margin-bottom: 5px;}.footer-tagline {    font-style: italic;    opacity: 0.6;}.footer-links {    display: grid;    grid-template-columns: repeat(3, 1fr);    gap: 40px;}.footer-column h4 {    margin-bottom: 20px;    font-size: 1.2rem;}.footer-column ul {    list-style: none;}.footer-column li {    margin-bottom: 10px;}.footer-column a {    color: rgba(255, 255, 255, 0.8);    text-decoration: none;    transition: all 0.3s ease;}.footer-column a:hover {    color: white;    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);}.social-links {    display: flex;    gap: 15px;}.social-link {    width: 50px;    height: 50px;    display: flex;    align-items: center;    justify-content: center;    text-decoration: none;    font-size: 1.5rem;    transition: all 0.3s ease;}.social-link:hover {    transform: translateY(-3px);}.footer-bottom {    text-align: center;    padding-top: 30px;    border-top: 1px solid rgba(255, 255, 255, 0.1);    opacity: 0.6;}/* Responsive adjustments */@media (max-width: 768px) {    .portfolio-grid,    .services-grid,    .team-grid {        grid-template-columns: 1fr;    }    .contact-container {        grid-template-columns: 1fr;        gap: 40px;    }    .footer-main {        grid-template-columns: 1fr;        gap: 40px;    }    .footer-links {        grid-template-columns: 1fr;        gap: 30px;    }    .social-links {        justify-content: center;    }}