/* =====================================================
   RESET BASE
===================================================== */

*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto;
  background:#0b0f1c;
  color:#e6e9f2;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

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

ul{
  list-style:none;
}

img{
  max-width:100%;
  display:block;
}

/* =====================================================
   VARIABILI COLORE
===================================================== */

:root{

  --bg-dark:#0b0f1c;
  --bg-dark-2:#10162b;

  --primary:#4f7cff;
  --primary-light:#7aa0ff;

  --accent:#ffd74a;

  --text-main:#e6e9f2;
  --text-muted:#9aa4c3;

  --glass-bg:rgba(255,255,255,0.05);
  --glass-border:rgba(255,255,255,0.12);

  --radius-lg:16px;
  --radius-md:10px;

  --shadow-lg:0 20px 50px rgba(0,0,0,0.45);

}

/* =====================================================
   CONTAINER
===================================================== */

.container{

  width:100%;
  max-width:1180px;
  margin:auto;
  padding-left:24px;
  padding-right:24px;

}

/* =====================================================
   BACKGROUND GRID
===================================================== */

.site-bg-grid{

  position:fixed;
  inset:0;

  background-image:
  linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);

  background-size:40px 40px;

  z-index:-3;

}

/* =====================================================
   BACKGROUND ORBS
===================================================== */

.site-bg-orb{

  position:fixed;
  width:420px;
  height:420px;
  border-radius:50%;
  filter:blur(140px);
  opacity:.35;
  z-index:-2;

}

.orb-a{

  background:#4f7cff;
  top:-120px;
  left:-120px;

}

.orb-b{

  background:#7c5cff;
  bottom:-160px;
  right:-160px;

}

.orb-c{

  background:#00c9a7;
  top:40%;
  left:60%;

}

/* =====================================================
   TIPOGRAFIA
===================================================== */

h1{

  font-size:3.1rem;
  font-weight:800;
  line-height:1.15;

}

h2{

  font-size:2.4rem;
  font-weight:700;

}

h3{

  font-size:1.35rem;
  font-weight:600;

}

p{

  color:var(--text-muted);
  font-size:1rem;

}

/* =====================================================
   SECTIONS
===================================================== */

.section{

  padding-top:100px;
  padding-bottom:100px;

}

.section-light{

  background:#f7f9ff;
  color:#0c1426;

}

.section-dark{

  background:var(--bg-dark);

}

/* =====================================================
   SECTION HEADER
===================================================== */

.section-head{

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

}

.section-head h2{

  margin-top:10px;
  margin-bottom:14px;

}

.section-tag{

  display:inline-block;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em;

  color:var(--primary);

  font-weight:600;

}

.light .section-tag{

  color:var(--accent);

}

/* =====================================================
   REVEAL ANIMATION
===================================================== */

.reveal{

  opacity:0;
  transform:translateY(30px);
  transition:all .7s ease;

}

.reveal.visible{

  opacity:1;
  transform:translateY(0);

}
/* =====================================================
   NAVBAR
===================================================== */

.site-header{

  position:sticky;
  top:0;
  z-index:100;

  background:rgba(11,15,28,0.85);
  backdrop-filter:blur(14px);

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

}

.nav-wrap{

  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;

}

/* brand */

.brand{

  display:flex;
  align-items:center;
  gap:10px;

  font-weight:700;
  font-size:1rem;

}

.brand-badge{

  display:flex;
  align-items:center;
  justify-content:center;

  width:32px;
  height:32px;

  border-radius:8px;

  background:linear-gradient(135deg,#4f7cff,#7c5cff);

  font-size:.85rem;

}

.brand-text strong{

  color:var(--primary);

}

/* nav links */

.nav{

  display:flex;
  align-items:center;
  gap:28px;

}

.nav a{

  font-size:.9rem;
  color:#c6cbe4;

  transition:.25s;

}

.nav a:hover{

  color:white;

}

.nav-cta{

  background:linear-gradient(135deg,#4f7cff,#7c5cff);

  padding:10px 18px;
  border-radius:8px;

  color:white;

  font-weight:600;

}

/* toggle */

.nav-toggle{

  display:none;
  background:none;
  border:none;
  color:white;
  font-size:1.4rem;

}

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

.hero-extreme{

  position:relative;
  overflow:hidden;

  padding-top:140px;
  padding-bottom:120px;

}

/* particles */

.hero-particles{

  position:absolute;
  inset:0;
  z-index:0;

}

/* grid */

.hero-grid{

  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;

  align-items:center;

}

/* hero text */

.hero-copy{

  max-width:520px;

}

.hero-badge{

  display:inline-block;

  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);

  padding:10px 14px;

  border-radius:999px;

  font-size:.75rem;
  color:#c6cbe4;

  margin-bottom:18px;

}

.hero-lead{

  margin-top:18px;
  margin-bottom:28px;

  font-size:1.05rem;

}

/* hero actions */

.hero-actions{

  display:flex;
  gap:16px;

}

/* buttons */

.btn{

  display:inline-block;
  padding:12px 22px;

  border-radius:8px;

  font-size:.9rem;
  font-weight:600;

  transition:.25s;

}

.btn-primary{

  background:linear-gradient(135deg,#4f7cff,#7c5cff);
  color:white;

}

.btn-primary:hover{

  transform:translateY(-2px);

}

.btn-secondary{

  border:1px solid rgba(255,255,255,0.2);
  color:white;

}

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

.hero-metrics{

  margin-top:36px;

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

}

.metric-card{

  padding:18px;

  border-radius:var(--radius-md);

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

  background:var(--glass-bg);

}

.metric-card strong{

  display:block;
  font-size:1rem;

}

.metric-card span{

  font-size:.85rem;
  color:#9aa4c3;

}

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

.hero-visual{

  position:relative;

}

/* glass card */

.glass-card{

  background:var(--glass-bg);
  border:1px solid var(--glass-border);

  backdrop-filter:blur(10px);

  border-radius:var(--radius-lg);

  box-shadow:var(--shadow-lg);

}

/* floating animation */

.floating{

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

}

.floating-1{

  margin-bottom:20px;

}

.floating-2{

  margin-left:40px;
  margin-bottom:20px;

}

.floating-3{

  margin-left:80px;

}

@keyframes floating{

  0%{transform:translateY(0px)}
  50%{transform:translateY(-10px)}
  100%{transform:translateY(0px)}

}

/* =====================================================
   DASHBOARD SHELL
===================================================== */

.dashboard-shell{

  padding:20px;

}

.shell-head{

  display:flex;
  align-items:center;
  gap:6px;

  margin-bottom:14px;

}

.shell-dot{

  width:10px;
  height:10px;
  border-radius:50%;

}

.shell-dot.red{background:#ff5f56;}
.shell-dot.yellow{background:#ffbd2e;}
.shell-dot.green{background:#27c93f;}

.shell-title{

  margin-left:8px;
  font-size:.8rem;
  color:#9aa4c3;

}

/* mini chart */

.mini-chart{

  padding:10px;

}

.mini-chart-bars{

  display:flex;
  gap:6px;
  align-items:flex-end;
  height:80px;

}

.mini-chart-bars span{

  width:8px;
  background:linear-gradient(#4f7cff,#7c5cff);
  border-radius:4px;

}

/* stats list */

.stats-list{

  display:flex;
  flex-direction:column;
  gap:8px;

}

.stat-line{

  display:flex;
  justify-content:space-between;
  font-size:.85rem;

}

/* =====================================================
   CODE WINDOW
===================================================== */

.code-shell{

  padding:20px;

}

.code-shell pre{

  font-family:monospace;
  font-size:.8rem;
  line-height:1.5;

}

.code-key{color:#7c9cff}
.code-name{color:#ffd74a}
.code-fn{color:#00c9a7}
.code-str{color:#f9a8d4}
/* =====================================================
   SERVIZI GRID
===================================================== */

.services-grid{

  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;

}

.service-card{

  position:relative;

  padding:34px 30px;

  border-radius:var(--radius-lg);

  border:1px solid rgba(255,255,255,0.07);

  background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));

  transition:.35s;

  cursor:default;

}

.service-card:hover{

  transform:translateY(-6px);

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

}

.service-icon{

  font-size:1.8rem;

  margin-bottom:16px;

  color:var(--primary);

}

.service-card h3{

  margin-bottom:12px;

}

.service-card p{

  font-size:.92rem;

}

/* =====================================================
   TILT CARD EFFECT
===================================================== */

.tilt-card{

  transform-style:preserve-3d;
  perspective:1000px;

}

.tilt-card:hover{

  box-shadow:0 20px 50px rgba(0,0,0,0.45);

}

/* =====================================================
   BENEFITS SECTION
===================================================== */

.benefits-grid{

  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:28px;

}

.benefit-card{

  padding:30px;

  border-radius:var(--radius-lg);

  background:#ffffff;

  border:1px solid #e7eaf5;

  transition:.3s;

}

.benefit-card:hover{

  transform:translateY(-6px);

  box-shadow:0 12px 35px rgba(0,0,0,0.08);

}

.benefit-icon{

  font-size:1.6rem;

  margin-bottom:14px;

  color:var(--primary);

}

.benefit-card h3{

  margin-bottom:10px;

  color:#0b132b;

}

.benefit-card p{

  font-size:.9rem;

  color:#4a5573;

}

/* =====================================================
   CASE STUDY
===================================================== */

.case-grid{

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;

  align-items:center;

}

.case-box{

  padding:30px;

  border-radius:var(--radius-lg);

  border:1px solid rgba(255,255,255,0.08);

  background:rgba(255,255,255,0.04);

}

.case-box h3{

  margin-bottom:10px;

}

.case-box p{

  font-size:.95rem;

}

.case-stats{

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

  margin-top:20px;

}

.case-stat{

  padding:16px;

  border-radius:10px;

  background:rgba(255,255,255,0.05);

  text-align:center;

}

.case-stat strong{

  display:block;

  font-size:1.2rem;

}

/* =====================================================
   ROI CALCULATOR
===================================================== */

.roi-grid{

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;

}

.roi-form{

  display:flex;
  flex-direction:column;
  gap:16px;

}

.roi-form input{

  padding:14px;

  border-radius:8px;

  border:1px solid #dfe3f4;

  font-size:.9rem;

}

.roi-form button{

  margin-top:10px;

}

.roi-result{

  padding:30px;

  border-radius:var(--radius-lg);

  background:#ffffff;

  border:1px solid #e4e8f6;

}

.roi-result h3{

  margin-bottom:12px;

  color:#0b132b;

}

#roiRisultato{

  font-size:.95rem;

  color:#394064;

}

/* =====================================================
   STATISTICS
===================================================== */

.stats-grid{

  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:26px;

}

.stat-box{

  padding:30px;

  border-radius:var(--radius-lg);

  text-align:center;

  background:linear-gradient(160deg,#4f7cff,#7c5cff);

  color:white;

}

.stat-number{

  font-size:2rem;

  font-weight:700;

  margin-bottom:6px;

}

/* =====================================================
   TESTIMONIALS
===================================================== */

.testimonials-slider{

  position:relative;

  max-width:720px;

}

.testimonial{

  display:none;

  padding:28px;

  border-radius:var(--radius-lg);

  background:#ffffff;

  border:1px solid #e6e9f4;

  box-shadow:0 12px 30px rgba(0,0,0,0.05);

}

.testimonial.active{

  display:block;

}

.testimonial p{

  font-size:1rem;

  color:#0f1735;

  margin-bottom:12px;

}

.testimonial-author{

  font-size:.85rem;

  color:#5a6484;

  font-weight:600;

}


/* =====================================================
   FAQ
===================================================== */

.faq-grid{

  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:28px;

}

.faq-item{

  padding:26px;

  border-radius:var(--radius-lg);

  background:rgba(255,255,255,0.05);

  border:1px solid rgba(255,255,255,0.08);

}

.faq-item h3{

  font-size:1rem;

  margin-bottom:10px;

  color:white;

}

.faq-item p{

  font-size:.9rem;

  color:#aeb6d4;

}

/* =====================================================
   SEO CITIES GRID
===================================================== */

.cities-grid{

  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:14px;

  margin-top:30px;

}

.city-card{

  padding:12px;

  border-radius:8px;

  text-align:center;

  background:#ffffff;

  border:1px solid #e6e9f4;

  font-size:.85rem;

  color:#1a2244;

  transition:.2s;

}

.city-card:hover{

  background:#4f7cff;

  color:white;

}

/* =====================================================
   CONTACT SECTION
===================================================== */

.contact-grid{

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;

  align-items:center;

}

.contact-info h2{

  margin-bottom:14px;

}

.contact-benefits{

  margin-top:20px;

  display:flex;
  flex-direction:column;
  gap:8px;

}

.contact-benefits li{

  font-size:.9rem;

  color:#aab1d0;

}

.contact-form{

  padding:32px;

  border-radius:var(--radius-lg);

  background:rgba(255,255,255,0.04);

  border:1px solid rgba(255,255,255,0.08);

  display:flex;
  flex-direction:column;
  gap:14px;

}

.contact-form input,
.contact-form textarea{

  padding:14px;

  border-radius:8px;

  border:1px solid rgba(255,255,255,0.15);

  background:rgba(255,255,255,0.03);

  color:white;

  font-size:.9rem;

}

.contact-form textarea{

  min-height:120px;

  resize:vertical;

}

.contact-form input::placeholder,
.contact-form textarea::placeholder{

  color:#9aa4c3;

}

.contact-form button{

  margin-top:10px;

}

.privacy-checkbox{

  font-size:.8rem;

  color:#a8b0d3;

  display:flex;
  gap:6px;

}

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

.site-footer{

  background:#070a15;

  padding-top:60px;

}

.footer-grid{

  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:40px;

  margin-bottom:40px;

}

.footer-brand{

  display:flex;
  align-items:center;
  gap:10px;

  font-weight:700;

  margin-bottom:10px;

}

.footer-desc{

  font-size:.9rem;

  color:#8f98b8;

}

.footer-col h4{

  margin-bottom:14px;

  font-size:.95rem;

}

.footer-links{

  display:flex;
  flex-direction:column;
  gap:8px;

}

.footer-links a{

  font-size:.85rem;

  color:#9aa4c3;

}

.footer-links a:hover{

  color:white;

}

.footer-bottom{

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

  padding:20px 0;

  text-align:center;

}

.footer-bottom p{

  font-size:.8rem;

  color:#8f98b8;

}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width:1024px){

.hero-grid{

grid-template-columns:1fr;
gap:60px;

}

.case-grid{

grid-template-columns:1fr;

}

.roi-grid{

grid-template-columns:1fr;

}

.contact-grid{

grid-template-columns:1fr;

}

}

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

@media (max-width:768px){

.nav{

display:none;

flex-direction:column;
gap:16px;

position:absolute;
top:72px;
left:0;
width:100%;

background:#0b0f1c;

padding:30px;

}

.nav.active{

display:flex;

}

.nav-toggle{

display:block;

}

.hero-extreme{

padding-top:120px;

}

h1{

font-size:2.4rem;

}

.hero-metrics{

grid-template-columns:1fr;

}

}

/* =====================================================
   MICRO INTERACTIONS
===================================================== */

button,
.btn{

transition:.25s ease;

}

button:hover,
.btn:hover{

transform:translateY(-2px);

}

/* =====================================================
   SCROLLBAR
===================================================== */

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-track{

background:#070a15;

}

::-webkit-scrollbar-thumb{

background:#4f7cff;
border-radius:10px;

}