@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --bg: #03070d;
  --panel: #07101b;
  --line: rgba(116, 190, 255, .13);
  --text: #f5f9ff;
  --muted: #8ca0b8;
  --blue: #087cff;
  --cyan: #22d3ff;
  --side: 220px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 30px;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 72% 15%, #071d39 0, transparent 26%),
    var(--bg);
  color: var(--text);
  font-family: Inter, sans-serif;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}


/* =========================
   SFONDO
========================= */

.ambient {
  position: fixed;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
  opacity: .18;
  z-index: -1;
}

.ambient-one {
  width: 380px;
  height: 380px;
  background: #008cff;
  right: -100px;
  top: 20%;
}

.ambient-two {
  width: 300px;
  height: 300px;
  background: #16d9ff;
  left: 35%;
  bottom: -140px;
}


/* =========================
   SIDEBAR
========================= */

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;

  width: var(--side);

  padding: 28px 24px;

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

  background: rgba(3, 8, 15, .78);

  backdrop-filter: blur(18px);

  z-index: 20;

  display: flex;
  flex-direction: column;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;

  font:
    700 19px
    'Space Grotesk';
}

.brand img {
  width: 36px;
  height: 36px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 0 12px #0788ff
    );
}

.sidebar nav {
  margin: auto 0;

  display: flex;
  flex-direction: column;

  gap: 9px;
}

.nav-link {
  position: relative;

  color: #71849b;

  font-size: 13px;
  font-weight: 600;

  padding:
    13px
    12px
    13px
    23px;

  border-radius: 10px;

  transition: .3s;
}

.nav-link .dot {
  position: absolute;

  left: 5px;
  top: 50%;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #3e4d60;

  transform:
    translateY(-50%);

  transition: .3s;
}

.nav-link:hover,
.nav-link.active {
  color: #fff;

  background:
    linear-gradient(
      90deg,
      rgba(0, 126, 255, .14),
      transparent
    );
}

.nav-link.active .dot {
  background: var(--cyan);

  box-shadow:
    0 0 13px var(--cyan);

  height: 16px;

  border-radius: 4px;
}

.side-footer {
  font-size: 9px;
  letter-spacing: 2px;

  color: #4f6073;
}

.side-footer b {
  color: #168cff;
}

.mobile-menu {
  display: none;
}


/* =========================
   STRUTTURA
========================= */

main {
  margin-left: var(--side);
}

.section {
  min-height: 85vh;

  padding:
    100px
    clamp(34px, 6vw, 100px);

  position: relative;

  border-bottom:
    1px solid
    rgba(255, 255, 255, .035);
}


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

.hero {
  min-height: 100vh;

  display: grid;

  grid-template-columns:
    1.05fr .95fr;

  align-items: center;

  gap: 30px;

  overflow: hidden;
}

.eyebrow {
  font-size: 11px;

  letter-spacing: 3px;

  color: #86a1bf;

  font-weight: 700;

  display: flex;

  align-items: center;

  gap: 10px;
}

.eyebrow span {
  display: inline-block;

  width: 30px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--blue),
      var(--cyan)
    );

  box-shadow:
    0 0 10px var(--blue);
}

h1,
h2,
h3 {
  font-family:
    'Space Grotesk',
    sans-serif;

  margin: 0;
}

.hero h1 {
  font-size:
    clamp(
      55px,
      7vw,
      105px
    );

  line-height: .93;

  letter-spacing: -5px;

  margin:
    22px 0;
}

.hero h1 em,
.contact h2 em {
  font-style: normal;

  background:
    linear-gradient(
      110deg,
      #1587ff,
      #2ee6ff
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}

.hero-copy > p {
  max-width: 650px;

  color: var(--muted);

  font-size: 16px;

  line-height: 1.8;
}

.actions {
  display: flex;

  gap: 12px;

  margin-top: 34px;
}

.btn {
  padding:
    14px 20px;

  border-radius: 9px;

  font-size: 13px;

  font-weight: 700;

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

  transition: .25s;
}

.btn.primary {
  background:
    linear-gradient(
      110deg,
      #066dff,
      #08b9ee
    );

  box-shadow:
    0 10px 35px
    rgba(0, 126, 255, .22);
}

.btn:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 12px 35px
    rgba(0, 151, 255, .25);
}

.btn.ghost {
  background:
    rgba(255, 255, 255, .025);
}


/* =========================
   LOGO HERO
========================= */

.hero-logo {
  position: relative;

  display: grid;

  place-items: center;

  min-height: 520px;
}

.hero-logo img {
  width:
    min(
      95%,
      560px
    );

  position: relative;

  z-index: 2;

  filter:
    drop-shadow(
      0 0 25px
      rgba(0, 128, 255, .4)
    );

  animation:
    float 5s
    ease-in-out
    infinite;
}

.logo-glow {
  position: absolute;

  width: 65%;

  aspect-ratio: 1;

  border-radius: 50%;

  background: #087cff;

  filter:
    blur(100px);

  opacity: .22;
}

.logo-orbit {
  position: absolute;

  width: 90%;

  aspect-ratio: 1;

  border:
    1px solid
    rgba(35, 188, 255, .12);

  border-radius: 50%;

  animation:
    spin 16s
    linear infinite;
}

.logo-orbit::after {
  content: "";

  position: absolute;

  width: 8px;
  height: 8px;

  background:
    var(--cyan);

  border-radius: 50%;

  top: 14%;
  left: 14%;

  box-shadow:
    0 0 20px
    var(--cyan);
}

@keyframes spin {
  to {
    transform:
      rotate(360deg);
  }
}

@keyframes float {
  50% {
    transform:
      translateY(-15px);
  }
}

.scroll-hint {
  position: absolute;

  bottom: 28px;
  left: 50%;

  font-size: 9px;

  letter-spacing: 3px;

  color: #52667d;

  display: flex;

  gap: 10px;

  align-items: center;
}

.scroll-hint span {
  width: 34px;
  height: 1px;

  background: #168cff;
}


/* =========================
   TITOLI SEZIONI
========================= */

.section-head {
  display: flex;

  gap: 24px;

  align-items: flex-start;

  margin-bottom: 55px;
}

.section-head > span {
  font-size: 11px;

  color: #1caeff;

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

  padding: 6px;

  border-radius: 5px;
}

.section-head p {
  font-size: 10px;

  letter-spacing: 4px;

  color: #54708d;

  margin:
    0 0 10px;
}

.section-head h2 {
  font-size:
    clamp(
      38px,
      5vw,
      65px
    );

  letter-spacing: -2px;
}


/* =========================
   CHI SONO
========================= */

.about {
  min-height: 65vh;
}

.about-grid {
  display: grid;

  grid-template-columns:
    1.3fr .7fr;

  gap: 70px;

  align-items: center;
}

.lead {
  font-size:
    clamp(
      22px,
      3vw,
      38px
    );

  line-height: 1.45;

  color: #afbed0;
}

.lead b {
  color: #fff;
}

.quote {
  padding: 35px;

  border-left:
    2px solid
    #168cff;

  background:
    linear-gradient(
      90deg,
      rgba(0, 126, 255, .08),
      transparent
    );

  color: #7f94aa;

  font-size: 16px;

  line-height: 1.7;
}


/* =========================
   COMPETENZE
========================= */

.skill-grid {
  display: grid;

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

  gap: 18px;
}

.skill-card {
  position: relative;

  min-height: 330px;

  padding: 30px;

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

  background:
    linear-gradient(
      145deg,
      rgba(9, 22, 37, .9),
      rgba(3, 8, 14, .7)
    );

  border-radius: 16px;

  overflow: hidden;

  transition: .35s;
}

.skill-card::before {
  content: "";

  position: absolute;

  inset:
    auto 0 0;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--blue),
      var(--cyan),
      transparent
    );

  transform:
    scaleX(0);

  transition: .35s;
}

.skill-card:hover {
  transform:
    translateY(-8px);

  border-color:
    rgba(38, 188, 255, .32);

  box-shadow:
    0 25px 60px
    rgba(0, 90, 190, .12);
}

.skill-card:hover::before {
  transform:
    scaleX(1);
}

.skill-icon {
  width: 55px;
  height: 55px;

  border-radius: 13px;

  display: grid;

  place-items: center;

  background:
    linear-gradient(
      145deg,
      #073b78,
      #071321
    );

  border:
    1px solid
    #0b70d6;

  color: #35d7ff;

  font-weight: 800;

  font-size: 20px;

  margin-bottom: 42px;

  box-shadow:
    inset 0 0 20px
    rgba(0, 139, 255, .15);
}

.skill-card > span {
  position: absolute;

  right: 25px;
  top: 25px;

  color: #29415a;

  font-size: 11px;
}

.skill-card h3 {
  font-size: 24px;
}

.skill-card p {
  color: #71869c;

  font-size: 13px;

  line-height: 1.7;
}

.tags {
  display: flex;

  gap: 7px;

  flex-wrap: wrap;

  margin-top: 22px;
}

.tags i {
  font-style: normal;

  font-size: 9px;

  color: #55bfff;

  padding:
    6px 9px;

  background: #07192a;

  border:
    1px solid
    #0a2b4b;

  border-radius: 6px;
}


/* =========================
   PROGETTI
========================= */

.projects-section {
  overflow: hidden;
}

.project-controls {
  display: flex;

  justify-content:
    space-between;

  align-items: center;

  margin-bottom: 20px;
}

.project-controls p {
  color: #64798e;

  font-size: 12px;
}

.project-controls button {
  width: 42px;
  height: 42px;

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

  border-radius: 50%;

  background: #07111d;

  color: #a6c8e8;

  cursor: pointer;

  margin-left: 6px;

  transition: .25s;
}

.project-controls button:hover {
  background: #087cff;

  color: #fff;

  transform:
    scale(1.08);
}

.projects-track {
  display: flex;

  gap: 20px;

  overflow-x: auto;

  scroll-snap-type:
    x mandatory;

  padding:
    10px 4px 25px;

  scrollbar-width: none;
}

.projects-track::-webkit-scrollbar {
  display: none;
}

.project-card {
  min-width:
    min(
      410px,
      80vw
    );

  scroll-snap-align:
    start;

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

  border-radius: 17px;

  overflow: hidden;

  background: #06101a;

  transition: .3s;
}

.project-card:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(31, 187, 255, .35);
}

.project-body {
  padding: 24px;
}

.project-body small {
  font-size: 9px;

  letter-spacing: 2px;

  color: #19baff;
}

.project-body h3 {
  font-size: 23px;

  margin:
    8px 0;
}

.project-body p {
  color: #71869c;

  font-size: 12px;

  line-height: 1.6;
}


/* =========================
   PULSANTE DETTAGLI
========================= */

.project-details-btn {
  display: inline-block;

  margin-top: 10px;

  padding: 0;

  background: transparent;

  border: none;

  color: #5bcaff;

  font-family:
    Inter,
    sans-serif;

  font-size: 11px;

  font-weight: 700;

  cursor: pointer;

  transition:
    color .25s ease,
    transform .25s ease;
}

.project-details-btn:hover {
  color: var(--cyan);

  transform:
    translateX(5px);
}


/* =========================
   POPUP PROGETTO
========================= */

.project-modal {
  position: fixed;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 25px;

  background:
    rgba(2, 6, 14, .86);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  opacity: 0;

  visibility: hidden;

  z-index: 9999;

  transition:
    opacity .3s ease,
    visibility .3s ease;
}

.project-modal.active {
  opacity: 1;

  visibility: visible;
}

.project-modal-content {
  position: relative;

  width: 100%;

  max-width: 680px;

  padding: 48px;

  border-radius: 24px;

  border:
    1px solid
    rgba(34, 211, 255, .22);

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(8, 124, 255, .20),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #071421,
      #03080e
    );

  box-shadow:
    0 30px 100px
    rgba(0, 0, 0, .65),
    0 0 70px
    rgba(8, 124, 255, .13);

  transform:
    translateY(35px)
    scale(.95);

  transition:
    transform .35s
    cubic-bezier(.2, .8, .2, 1);

  overflow: hidden;
}

.project-modal.active
.project-modal-content {
  transform:
    translateY(0)
    scale(1);
}

.project-modal-content::before {
  content: "";

  position: absolute;

  top: 0;
  left: 50%;

  width: 55%;
  height: 2px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--blue),
      var(--cyan),
      transparent
    );

  box-shadow:
    0 0 20px
    rgba(34, 211, 255, .5);
}

.project-modal-content small {
  color: var(--cyan);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 2.5px;
}

.project-modal-content h2 {
  margin:
    12px 0 25px;

  color: var(--text);

  font-family:
    'Space Grotesk',
    sans-serif;

  font-size:
    clamp(
      38px,
      6vw,
      58px
    );

  letter-spacing: -2px;
}

.project-modal-content p {
  margin:
    0 0 17px;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.8;
}


/* =========================
   CHIUDI POPUP
========================= */

.modal-close {
  position: absolute;

  top: 18px;
  right: 18px;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 42px;
  height: 42px;

  padding: 0;

  border-radius: 50%;

  border:
    1px solid
    rgba(34, 211, 255, .25);

  background:
    rgba(8, 124, 255, .08);

  color: #fff;

  font-size: 25px;

  line-height: 1;

  cursor: pointer;

  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

.modal-close:hover {
  background:
    var(--blue);

  border-color:
    var(--cyan);

  transform:
    rotate(90deg);

  box-shadow:
    0 0 25px
    rgba(34, 211, 255, .35);
}


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

.contact {
  min-height: 80vh;

  display: flex;

  flex-direction: column;

  justify-content: center;
}

.contact-card {
  display: grid;

  grid-template-columns:
    1.2fr .8fr;

  gap: 70px;

  padding:
    clamp(
      35px,
      6vw,
      75px
    );

  border:
    1px solid
    rgba(44, 181, 255, .18);

  border-radius: 24px;

  background:
    radial-gradient(
      circle at 80% 50%,
      rgba(0, 119, 255, .16),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #071421,
      #03080e
    );

  box-shadow:
    0 35px 100px
    rgba(0, 0, 0, .3);
}

.contact h2 {
  font-size:
    clamp(
      48px,
      7vw,
      90px
    );

  line-height: .95;

  letter-spacing: -4px;

  margin:
    22px 0;
}

.contact-card p {
  color: #7e93a9;

  max-width: 540px;

  line-height: 1.7;
}

.contact-actions {
  display: flex;

  flex-direction: column;

  justify-content: center;
}

.contact-actions a {
  padding:
    22px 5px;

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

  display: flex;

  justify-content:
    space-between;

  color: #a9bed1;

  transition: .25s;
}

.contact-actions a:hover {
  padding-left: 12px;

  color: #35d7ff;
}


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

footer {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-top: 70px;

  color: #4e6378;

  font-size: 10px;
}

footer img {
  width: 30px;
  height: 30px;

  object-fit: contain;
}

footer span {
  font-weight: 700;

  color: #8fa8c0;
}

footer p {
  margin-left: auto;
}


/* =========================
   TORNA SU
========================= */

.back-to-top {
  position: fixed;

  right: 28px;
  bottom: 28px;

  width: 50px;
  height: 50px;

  border:
    1px solid
    rgba(58, 203, 255, .4);

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #087cff,
      #05a9dc
    );

  color: #fff;

  font-size: 22px;

  cursor: pointer;

  box-shadow:
    0 0 30px
    rgba(0, 140, 255, .3);

  z-index: 30;

  opacity: 0;

  visibility: hidden;

  transform:
    translateY(15px);

  transition: .3s;
}

.back-to-top.show {
  opacity: 1;

  visibility: visible;

  transform: none;
}

.back-to-top:hover {
  transform:
    translateY(-5px);

  box-shadow:
    0 0 40px
    rgba(0, 197, 255, .5);
}


/* =========================
   ANIMAZIONI SCROLL
========================= */

.reveal {
  opacity: 0;

  transform:
    translateY(30px);

  transition:
    opacity .75s ease,
    transform .75s ease;
}

.reveal.visible {
  opacity: 1;

  transform: none;
}


/* =========================
   TABLET
========================= */

@media (max-width: 900px) {

  :root {
    --side: 0px;
  }

  .sidebar {
    width: 250px;

    transform:
      translateX(-100%);

    transition: .3s;
  }

  .sidebar.open {
    transform: none;
  }

  .mobile-menu {
    display: block;

    position: fixed;

    top: 18px;
    left: 18px;

    z-index: 40;

    width: 44px;
    height: 44px;

    border-radius: 10px;

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

    background:
      rgba(4, 12, 21, .88);

    color: #fff;
  }

  .hero {
    grid-template-columns:
      1fr;

    padding-top: 120px;
  }

  .hero-logo {
    min-height: 320px;

    grid-row: 1;
  }

  .hero-logo img {
    width:
      min(
        75%,
        400px
      );
  }

  .hero-copy {
    text-align: center;
  }

  .hero-copy .eyebrow {
    justify-content: center;
  }

  .hero-copy > p {
    margin-inline: auto;
  }

  .actions {
    justify-content: center;
  }

  .scroll-hint {
    display: none;
  }

  .skill-grid {
    grid-template-columns:
      1fr;
  }

  .about-grid,
  .contact-card {
    grid-template-columns:
      1fr;
  }

  .section {
    padding:
      80px 25px;
  }

  .hero h1 {
    letter-spacing: -3px;
  }

  .contact h2 {
    letter-spacing: -3px;
  }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 560px) {

  .hero-logo {
    min-height: 250px;
  }

  .hero h1 {
    font-size: 54px;
  }

  .actions {
    flex-direction: column;
  }

  .section-head {
    gap: 12px;
  }

  .project-card {
    min-width: 88vw;
  }

  .contact-card {
    padding:
      30px 22px;
  }

  .contact h2 {
    font-size: 48px;
  }

  footer {
    flex-wrap: wrap;
  }

  footer p {
    width: 100%;

    margin:
      8px 0 0;
  }

  .back-to-top {
    right: 18px;
    bottom: 18px;
  }


  /* POPUP MOBILE */

  .project-modal {
    padding: 15px;
  }

  .project-modal-content {
    max-height: 85vh;

    overflow-y: auto;

    padding:
      45px
      24px
      28px;

    border-radius: 20px;
  }

  .project-modal-content h2 {
    font-size: 38px;
  }

  .project-modal-content p {
    font-size: 13px;
  }

  .modal-close {
    top: 14px;
    right: 14px;

    width: 38px;
    height: 38px;
  }

}