/* ===================================================
RESET + VARIABILI GLOBALI
=================================================== */


*,
*::before,
*::after {

margin:0;
padding:0;
box-sizing:border-box;

}



:root {


--bg-dark:#050505;

--bg-soft:#0b0b0d;

--card:#111114;

--text:#ffffff;

--text-soft:#a7a7ad;

--accent:#ffffff;

--border:rgba(255,255,255,0.12);


--radius:22px;


--container:1200px;


--transition:0.35s ease;


}





html {

scroll-behavior:smooth;

}





body {


font-family:'Inter', sans-serif;

background:var(--bg-dark);

color:var(--text);

line-height:1.6;

overflow-x:hidden;

}





img {

max-width:100%;

display:block;

}





a {

text-decoration:none;

color:inherit;

}





ul {

list-style:none;

}





.container {


width:min(90%, var(--container));

margin:auto;

}





.section {


padding:120px 0;

}





.section-label {


display:inline-block;

font-size:12px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

color:var(--text-soft);

margin-bottom:25px;


}





h1,
h2,
h3 {


font-family:'Manrope', sans-serif;

line-height:1.1;

}





h1 {


font-size:clamp(42px,6vw,78px);

font-weight:800;

}





h2 {


font-size:clamp(34px,4vw,55px);

font-weight:800;

}





h3 {


font-size:24px;

font-weight:700;

}





p {


color:var(--text-soft);

font-size:16px;

}





/* ===================================================
BUTTON
=================================================== */


.btn {


display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 32px;

border-radius:50px;

background:#ffffff;

color:#000000;

font-weight:700;

transition:var(--transition);

border:1px solid transparent;

}





.btn:hover {


transform:translateY(-4px);

}





.btn-outline {


background:transparent;

border:1px solid var(--border);

color:white;

}





.btn-outline:hover {


background:white;

color:black;

}
/* ===================================================
HEADER
=================================================== */


.site-header {


position:fixed;

top:0;

left:0;

width:100%;

z-index:1000;

padding:25px 0;

background:rgba(5,5,5,0.65);

backdrop-filter:blur(15px);

border-bottom:1px solid rgba(255,255,255,0.06);


}





.site-header .container {


display:flex;

align-items:center;

justify-content:space-between;


}





.brand-logo img {


width:150px;

height:auto;


}





.main-nav ul {


display:flex;

align-items:center;

gap:40px;


}





.main-nav a {


font-size:15px;

font-weight:600;

color:#bdbdc3;

transition:var(--transition);


}





.main-nav a:hover,
.main-nav a.active {


color:white;


}





.nav-toggle {


display:none;

cursor:pointer;


}





.nav-toggle span {


display:block;

width:28px;

height:2px;

background:white;

margin:6px 0;


}








/* ===================================================
HERO BASE
=================================================== */


.hero {


position:relative;

min-height:100vh;

display:flex;

align-items:center;

overflow:hidden;

padding-top:120px;


}





.hero-background {


position:absolute;

inset:0;

background:

radial-gradient(
circle at 70% 40%,
rgba(255,255,255,0.12),
transparent 35%
);


z-index:-1;


}





.hero-grid {


display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:60px;


}





.hero-copy {


max-width:650px;


}





.hero-top {


display:flex;

align-items:center;

gap:20px;

margin-bottom:35px;


}





.hero-logo {


width:90px;


}





.hero-badge {


font-size:12px;

letter-spacing:2px;

font-weight:700;

color:var(--text-soft);


}





.hero-subtitle {


font-size:clamp(28px,3vw,48px);

margin-top:20px;

font-weight:700;


}





.hero-text {


margin-top:30px;

max-width:600px;

font-size:18px;

line-height:1.8;


}





.hero-buttons {


display:flex;

gap:18px;

margin-top:40px;

flex-wrap:wrap;


}
/* ===================================================
HERO VISUAL
=================================================== */


.hero-visual {


position:relative;

display:flex;

justify-content:center;

align-items:center;


}





.hero-glow {


position:absolute;

width:450px;

height:450px;

border-radius:50%;


background:

radial-gradient(
circle,
rgba(255,255,255,0.18),
transparent 65%
);



filter:blur(20px);


}





.pc-mockup {


position:relative;

width:100%;

max-width:600px;

z-index:2;


animation:float 6s ease-in-out infinite;


}





@keyframes float {


0%,
100% {

transform:translateY(0);

}



50% {

transform:translateY(-18px);

}


}








/* ===================================================
METRICHE HERO
=================================================== */


.hero-metrics {


display:flex;

gap:45px;

margin-top:60px;

padding-top:35px;

border-top:1px solid var(--border);


}





.metric {


display:flex;

flex-direction:column;

gap:8px;


}





.metric-number {


font-size:32px;

font-weight:800;

font-family:'Manrope',sans-serif;


}





.metric-label {


font-size:13px;

color:var(--text-soft);

max-width:120px;


}








/* ===================================================
SECTION HEADING
=================================================== */


.section-heading {


max-width:750px;

margin-bottom:70px;


}





.section-heading h2 {


margin-bottom:25px;


}





.section-heading p {


font-size:18px;

line-height:1.8;


}








/* ===================================================
INTRO SECTION
=================================================== */


.intro-grid {


display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:start;


}





.intro-text {


margin-top:25px;

font-size:17px;

line-height:1.8;


}





.intro-right {


display:flex;

flex-direction:column;

gap:20px;


}





.intro-card {


display:flex;

gap:25px;

padding:30px;

background:var(--card);

border:1px solid var(--border);

border-radius:var(--radius);

transition:var(--transition);


}





.intro-card:hover {


transform:translateY(-8px);

border-color:rgba(255,255,255,0.3);


}





.intro-number {


font-size:32px;

font-weight:800;

color:white;

opacity:.5;


}





.intro-content h3 {


margin-bottom:12px;


}





.intro-content p {


font-size:15px;


}
/* ===================================================
SERVIZI
=================================================== */


.services-grid {


display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;


}





.service-card {


background:var(--card);

border:1px solid var(--border);

border-radius:var(--radius);

padding:35px;

transition:var(--transition);

display:flex;

flex-direction:column;


}





.service-card:hover {


transform:translateY(-10px);

border-color:rgba(255,255,255,0.3);


}





.service-number {


font-size:14px;

font-weight:700;

color:var(--text-soft);

margin-bottom:30px;


}





.service-card h3 {


margin-bottom:20px;


}





.service-card p {


font-size:15px;

line-height:1.7;

margin-bottom:30px;


}





.service-card a {


margin-top:auto;

font-weight:700;

font-size:14px;


}








/* ===================================================
PORTFOLIO GRID
=================================================== */


.portfolio-grid {


display:grid;

grid-template-columns:repeat(2,1fr);

gap:30px;


}





.project-card {


background:var(--card);

border-radius:var(--radius);

overflow:hidden;

border:1px solid var(--border);

transition:var(--transition);


}





.project-card:hover {


transform:translateY(-10px);


}





.project-image {


aspect-ratio:16/10;

overflow:hidden;


}





.project-image img {


width:100%;

height:100%;

object-fit:cover;

transition:0.5s ease;


}





.project-card:hover .project-image img {


transform:scale(1.08);


}





.project-info {


padding:30px;


}





.project-category {


font-size:12px;

letter-spacing:2px;

font-weight:700;

color:var(--text-soft);


}





.project-info h3 {


margin:15px 0;


}








.portfolio-bottom {


display:flex;

justify-content:center;

margin-top:60px;


}








/* ===================================================
CATEGORIE PORTFOLIO
=================================================== */


.categories-grid {


display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;


}





.category-card {


position:relative;

height:420px;

border-radius:var(--radius);

overflow:hidden;

display:flex;

align-items:flex-end;


}





.category-image {


position:absolute;

inset:0;


}





.category-image img {


width:100%;

height:100%;

object-fit:cover;


}





.category-overlay {


position:absolute;

inset:0;

background:linear-gradient(
transparent,
rgba(0,0,0,.85)
);


}





.category-content {


position:relative;

padding:35px;

z-index:2;


}





.category-content h3 {


margin-bottom:15px;


}





.category-content p {


font-size:15px;


}
/* ===================================================
CTA
=================================================== */


.cta-home {


padding:120px 0;


}





.cta-box {


background:var(--card);

border:1px solid var(--border);

border-radius:35px;

padding:80px;

text-align:center;


}





.cta-box h2 {


margin-bottom:25px;


}





.cta-box p {


max-width:650px;

margin:0 auto;

font-size:18px;

line-height:1.8;


}





.cta-buttons {


display:flex;

justify-content:center;

gap:20px;

margin-top:40px;

flex-wrap:wrap;


}








/* ===================================================
CONTATTI FORM
=================================================== */


.contact-section {


padding-top:80px;


}





.contact-wrapper {


display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:start;


}





.contact-form {


background:var(--card);

border:1px solid var(--border);

padding:45px;

border-radius:var(--radius);


}





.form-group {


display:flex;

flex-direction:column;

gap:10px;

margin-bottom:25px;


}





.form-group label {


font-size:14px;

font-weight:600;


}





.form-group input,
.form-group textarea,
.form-group select {


width:100%;

padding:16px 18px;

background:#09090b;

border:1px solid var(--border);

border-radius:14px;

color:white;

font-family:inherit;

outline:none;

transition:var(--transition);


}





.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {


border-color:white;


}





.form-group textarea {


resize:none;


}





.contact-form .btn {


width:100%;

cursor:pointer;


}








.contact-info {


display:flex;

flex-direction:column;

gap:20px;


}








/* ===================================================
PAGE HERO
=================================================== */


.page-hero {


min-height:75vh;


}





.page-hero .hero-copy {


max-width:800px;


}





.page-hero .hero-text {


max-width:700px;


}
/* ===================================================
FOOTER
=================================================== */


.site-footer {


padding:80px 0 30px;

border-top:1px solid var(--border);

background:#030303;


}





.footer-grid {


display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:50px;


}





.footer-logo {


width:160px;

margin-bottom:25px;


}





.footer-brand p {


max-width:320px;

line-height:1.8;


}





.footer-column h3 {


font-size:18px;

margin-bottom:25px;


}





.footer-column ul {


display:flex;

flex-direction:column;

gap:15px;


}





.footer-column a,
.footer-column li {


color:var(--text-soft);

font-size:15px;

transition:var(--transition);


}





.footer-column a:hover {


color:white;


}





.footer-bottom {


margin-top:60px;

padding-top:25px;

border-top:1px solid var(--border);

text-align:center;


}





.footer-bottom p {


font-size:14px;


}
/* ===================================================
ANIMAZIONI
=================================================== */


.reveal {


opacity:0;

transform:translateY(40px);

transition:0.8s ease;


}





.reveal.active {


opacity:1;

transform:translateY(0);


}








/* effetto entrata card */


.service-card,
.project-card,
.category-card,
.intro-card {


animation-duration:0.8s;

animation-fill-mode:both;


}








/* hover generale immagini */


.project-image,
.category-image {


overflow:hidden;


}








/* glow morbido */


.hero-glow {


animation:pulseGlow 5s infinite ease-in-out;


}





@keyframes pulseGlow {


0% {


opacity:.5;

transform:scale(1);


}



50% {


opacity:1;

transform:scale(1.08);


}



100% {


opacity:.5;

transform:scale(1);


}


}








/* comparsa pagina */


main {


animation:pageFade .6s ease;


}





@keyframes pageFade {


from {


opacity:0;

transform:translateY(15px);


}



to {


opacity:1;

transform:translateY(0);


}


}
/* ===================================================
RESPONSIVE TABLET + MOBILE
=================================================== */



@media(max-width:1100px){



.hero-grid {


grid-template-columns:1fr;


}



.hero-visual {


margin-top:60px;


}



.services-grid {


grid-template-columns:repeat(2,1fr);


}



.categories-grid {


grid-template-columns:repeat(2,1fr);


}



.footer-grid {


grid-template-columns:repeat(2,1fr);


}



}





@media(max-width:768px){



.section {


padding:80px 0;


}





/* HEADER MOBILE */


.site-header {


padding:20px 0;


}





.brand-logo img {


width:120px;


}





.main-nav {


display:none;


}





.nav-toggle {


display:block;


}







/* HERO MOBILE */


.hero {


min-height:auto;

padding-top:150px;

padding-bottom:80px;


}





.hero-top {


flex-direction:column;

align-items:flex-start;


}





.hero-logo {


width:80px;


}





.hero-buttons {


flex-direction:column;


}





.hero-buttons .btn {


width:100%;


}





.hero-metrics {


flex-direction:column;

gap:25px;


}





.metric-number {


font-size:28px;


}





.hero-text {


font-size:16px;

.hero-text {

    font-size:16px;
    line-height:1.2;

}
}





.pc-mockup {


max-width:100%;


}







/* GRID MOBILE */


.intro-grid,
.contact-wrapper {


grid-template-columns:1fr;

gap:40px;


}





.services-grid,
.portfolio-grid,
.categories-grid {


grid-template-columns:1fr;


}





.service-card {


padding:30px;


}





.category-card {


height:350px;


}





/* CTA */


.cta-box {


padding:45px 25px;


}





.cta-buttons {


flex-direction:column;


}





.cta-buttons .btn {


width:100%;


}





/* FORM */


.contact-form {


padding:30px 20px;


}





/* FOOTER */


.footer-grid {


grid-template-columns:1fr;


gap:35px;


}





.footer-bottom {


margin-top:40px;


}



}




@media(max-width:480px){



h1 {


font-size:42px;


}





h2 {


font-size:34px;


}





.hero-subtitle {


font-size:26px;


}





.container {


width:92%;


}



}
.cursor-dot {

position:fixed;
width:10px;
height:10px;
background:white;
border-radius:50%;
pointer-events:none;
z-index:9999;
transform:translate(-50%,-50%);

}


.cursor-outline {

position:fixed;
width:40px;
height:40px;
border:1px solid rgba(255,255,255,.5);
border-radius:50%;
pointer-events:none;
z-index:9998;
transform:translate(-50%,-50%);
transition:.15s ease;

}
.hero h1 {

animation:textReveal 1s ease forwards;

}


@keyframes textReveal {

from{

opacity:0;
transform:translateY(50px);

}

to{

opacity:1;
transform:translateY(0);

}

}
.btn{

position:relative;
overflow:hidden;

}


.btn::before{

content:"";

position:absolute;

width:0;
height:0;

background:white;

border-radius:50%;

top:50%;
left:50%;

transform:translate(-50%,-50%);

transition:.5s;

z-index:-1;

}


.btn:hover::before{

width:300px;
height:300px;

}
/* ===================================================
PORTFOLIO PREMIUM STYLE
=================================================== */


/* HERO */

.page-hero {

    padding: 180px 0 100px;
    overflow: hidden;

}

.hero-content {

    max-width: 850px;

}

.hero-badge {

    display: inline-block;
    margin-bottom: 25px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #3b82f6;

}


.hero-content h1 {

    font-size: clamp(42px, 6vw, 78px);
    line-height: 1.05;
    font-weight: 800;
    margin-bottom: 30px;

}


.hero-text {

    max-width: 650px;
    font-size: 20px;
    line-height: 1.7;
    opacity: .75;

}



/* SEZIONI */

.portfolio-categories,
.portfolio-section {

    padding: 100px 0;

}


.section-heading {

    max-width: 750px;
    margin-bottom: 60px;

}


.section-tag {

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #3b82f6;
    display: block;
    margin-bottom: 20px;

}


.section-heading h2 {

    font-size: clamp(32px,4vw,55px);
    line-height:1.1;
    margin-bottom:25px;

}


.section-heading p {

    font-size:18px;
    line-height:1.7;
    opacity:.75;

}



/* CATEGORIE */

.categories-grid {

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;

}


.category-card {

    position:relative;
    height:520px;
    overflow:hidden;
    border-radius:28px;
    display:block;

}


.category-card img {

    width:100%;
    height:100%;
    object-fit:cover;
    transition:.6s ease;

}


.category-card:hover img {

    transform:scale(1.08);

}


.category-overlay {

    position:absolute;
    inset:0;
    padding:40px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    background:
    linear-gradient(
    transparent,
    rgba(0,0,0,.85)
    );

}


.category-label {

    color:#3b82f6;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;

}


.category-overlay h3 {

    color:white;
    font-size:30px;
    line-height:1.2;
    margin:15px 0;

}


.category-link {

    color:white;
    font-weight:600;

}



/* PROGETTI PDF */

.projects-grid {

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}


.project-card {

    padding:35px;
    border-radius:24px;
    background:#111;
    border:1px solid rgba(255,255,255,.08);
    transition:.35s ease;

}


.project-card:hover {

    transform:translateY(-8px);
    border-color:#3b82f6;

}


.project-card h3 {

    font-size:24px;
    margin-bottom:15px;

}


.project-card p {

    line-height:1.7;
    opacity:.7;
    margin-bottom:30px;

}


.project-button {

    display:inline-flex;
    padding:12px 25px;
    border-radius:50px;
    background:#3b82f6;
    color:white;
    font-weight:600;
    transition:.3s;

}


.project-button:hover {

    transform:translateY(-3px);

}



/* GALLERIA FOTO */

.photo-gallery {

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;

}


.photo-gallery img {

    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:20px;
    transition:.5s;

}


.photo-gallery img:hover {

    transform:scale(1.04);

}



/* CTA */

.portfolio-cta {

    padding:120px 0;

}


.cta-box {

    text-align:center;
    padding:80px 40px;
    border-radius:35px;
    background:#111;

}


.cta-box h2 {

    font-size:clamp(35px,5vw,60px);
    margin:20px 0;

}


.cta-box p {

    max-width:650px;
    margin:0 auto 40px;
    line-height:1.7;
    opacity:.75;

}


.cta-buttons {

    display:flex;
    justify-content:center;
    gap:20px;

}


.btn {

    padding:15px 35px;
    border-radius:50px;
    font-weight:700;

}


.btn-primary {

    background:#3b82f6;
    color:white;

}


.btn-secondary {

    border:1px solid rgba(255,255,255,.2);

}



/* RESPONSIVE */

@media(max-width:900px){

.categories-grid,
.projects-grid{

grid-template-columns:1fr;

}


.photo-gallery{

grid-template-columns:repeat(2,1fr);

}


.category-card{

height:420px;

}

}



@media(max-width:600px){

.photo-gallery{

grid-template-columns:1fr;

}


.cta-buttons{

flex-direction:column;

}


.page-hero{

padding-top:120px;

}

}
/* ===================================================
   MENU MOBILE (Stili per schermi piccoli)
   =================================================== */
@media (max-width: 768px) {
  
  /* Nasconde il menu classico su mobile */
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #0d0d0d; /* Usa il colore di sfondo del tuo sito */
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    z-index: 999;
  }

  /* Mostra i link in verticale */
  .main-nav ul {
    flex-direction: column;
    gap: 15px;
  }

  /* QUANDO IL JS AGGIUNGE LA CLASSE .open IL MENU COMPAIE */
  .main-nav.open {
    display: block !important;
  }

  /* Animazione facoltativa per le 3 barrette del pulsante */
  .nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .nav-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
  }
}