/* ===== Re7 Base (Dark Tech) ============================================ */
:root{
  --bg: #0b1020;        /* fondo principale */
  --panel:#11182c;      /* pannelli / card */
  --line:#203257;       /* bordi sottili */
  --text:#e6eef6;       /* testo primario */
  --muted:#9fb2c3;      /* testo attenuato */
  --accent:#19b4d2;     /* accento */
  --accent-2:#7a4cff;   /* accento secondario */
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --container:1200px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0; font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* ===== Layout generali ================================================== */
.container{ max-width: var(--container); margin:0 auto; padding:0 24px; }
.section{ padding: 56px 0; }
.section--sm{ padding: 32px 0; }
.section--lg{ padding: 88px 0; }

/* ===== Navbar =========================================================== */
.nav{
  position: sticky; top:0; z-index: 50;
  background: #0d152aee; backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav__inner{ height: 64px; display:flex; align-items:center; justify-content:space-between; }
.brand{ font-weight:700; letter-spacing:.3px; }
.brand__dot{ color: var(--accent); }

.menu{ display:flex; gap:24px; }
.menu a{
  color: var(--muted); text-decoration: none; font-size: 15px;
}
.menu a:hover, .menu a[aria-current="page"]{ color: var(--text); }

/* ===== Hero ============================================================= */
.hero{
  padding: 120px 0 80px;
  position: relative; overflow: hidden;
  background:
    radial-gradient(600px 300px at 80% -10%, rgba(25,180,210,.35), transparent),
    radial-gradient(400px 220px at 10% 10%, rgba(122,76,255,.25), transparent),
    var(--bg);
}
.hero__title{ font-size: clamp(32px, 6vw, 56px); line-height:1.1; margin:0; }
.hero__sub{ color: var(--muted); max-width: 720px; margin: 14px 0 0; }
.hero__cta{ margin-top:28px; display:flex; gap:12px; flex-wrap:wrap; }

/* ===== Bottoni ========================================================== */
.btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  border-radius: 12px; padding: 12px 18px; border:1px solid transparent;
  font-weight:600;
}
.btn--primary{ background: var(--accent); color:#04141a; }
.btn--primary:hover{ filter: brightness(1.08); }
.btn--ghost{ background: transparent; color: var(--text); border-color: var(--line); }
.btn--ghost:hover{ border-color: var(--accent); color: var(--accent); }

/* ===== Griglie e card (tile) ============================================ */
.grid{ display:grid; gap:16px; }
.grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 960px){ .grid--3, .grid--2{ grid-template-columns: 1fr; } }

.tile{
  background: var(--panel); border:1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow);
}
.tile__kicker{ color: var(--accent); text-transform: uppercase; font-size:12px; letter-spacing:.12em; }
.tile__title{ font-size: 18px; font-weight: 700; margin: 6px 0 6px; }
.tile__text{ color: var(--muted); font-size: 14px; margin:0; }
.tile__cta{ margin-top: 10px; color: var(--accent); font-weight:600; text-decoration:none; }
.tile__cta:hover{ text-decoration: underline; }

/* ===== Sezioni con titolo ============================================== */
.section-head{ display:flex; align-items:end; justify-content:space-between; gap:16px; }
.section-head__title{ font-size: clamp(22px, 3vw, 32px); margin:0; }
.section-head__sub{ color: var(--muted); max-width: 720px; margin: 6px 0 0; }

/* ===== Carousel (CSS-only, scroll-snap) ================================ */
.carousel{
  position:relative; border:1px solid var(--line); border-radius: var(--radius);
  overflow:hidden; box-shadow: var(--shadow);
}
.carousel__track{
  display:flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
}
.carousel__slide{
  min-width: 100%; scroll-snap-align: start; position: relative;
}
.carousel__slide img{ width: 100%; height: auto; display:block; }
.carousel__dots{
  position:absolute; left:50%; bottom:10px; transform: translateX(-50%);
  display:flex; gap:8px;
}
.carousel__dots a{
  width:10px; height:10px; border-radius:99px; background:#2a3e6b; display:inline-block;
  text-indent:-9999px; overflow:hidden; outline:none;
}
.carousel__dots a:focus, .carousel__dots a:hover{ background: var(--accent); }

/* ===== Rich text/Copy =================================================== */
.copy{ max-width: 760px; color: var(--muted); }
.copy p{ margin: 0 0 12px; }
.copy strong{ color: var(--text); }

/* ===== Footer =========================================================== */
.footer{
  margin-top: 64px; border-top:1px solid var(--line);
  padding: 28px 0; color: var(--muted); font-size: 14px;
}
.footer a{ color: var(--muted); text-decoration:none; }
.footer a:hover{ color: var(--text); }

/* ===== Utility ========================================================== */
.m-0{ margin:0; } .mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; } .mt-32{ margin-top:32px; }
.center{ text-align:center; }
.hide-visually{ position:absolute!important; width:1px;height:1px; overflow:hidden;clip:rect(1px,1px,1px,1px); white-space:nowrap; }

/* ===== Back to top ====================================================== */
.backtotop {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--accent); color: #04141a; border: 1px solid var(--line);
  box-shadow: var(--shadow); cursor: pointer; opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}
.backtotop--show { opacity: 1; visibility: visible; transform: translateY(0); }
.backtotop:hover { filter: brightness(1.08); }