:root{
  --ra-ink:#070a16;
  --ra-card:rgba(255,255,255,.08);
  --ra-border:rgba(255,255,255,.14);
  --ra-text:rgba(255,255,255,.92);
  --ra-muted:rgba(255,255,255,.74);
  --ra-shadow: 0 18px 45px rgba(0,0,0,.45);
}

html{font-size:18px}
body{
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:url("images/bg-body.jpg") center/cover no-repeat fixed;
  color:var(--ra-text);
  min-height:100vh;
}

.ra-overlay{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 12% 18%, rgba(0,229,255,.22), transparent 42%),
    radial-gradient(circle at 82% 30%, rgba(255,0,153,.18), transparent 46%),
    linear-gradient(180deg, rgba(7,10,22,.80), rgba(7,10,22,.86));
}

.navbar{
  backdrop-filter: blur(14px);
}

.ra-glass{
  background: var(--ra-card);
  border:1px solid var(--ra-border);
  box-shadow: var(--ra-shadow);
}

.ra-pill{
  border:1px solid var(--ra-border);
  background: rgba(0,0,0,.20);
  color: var(--ra-muted);
}

.ra-hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--ra-border);
}

.ra-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("images/hero-rome-ai.jpg") center/cover no-repeat;
  opacity:.55;
  filter:saturate(1.25);
}

.ra-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,229,255,.25), transparent 40%),
    radial-gradient(circle at 85% 25%, rgba(255,215,0,.20), transparent 45%),
    linear-gradient(180deg, rgba(7,10,22,.85), rgba(7,10,22,.92));
}

.ra-hero > *{
  position:relative;
  z-index:1;
}

.ra-btn-gradient{
  border:0;
  color:#06101b;
  font-weight:800;
  background: linear-gradient(90deg, rgba(0,229,255,1), rgba(99,102,241,1), rgba(255,0,153,1));
  box-shadow: 0 14px 40px rgba(0,229,255,.18);
}

.ra-btn-outline{
  border:1px solid var(--ra-border);
  background: rgba(255,255,255,.06);
  color: var(--ra-text);
}

.ra-btn-outline:hover{background: rgba(255,255,255,.10); color:var(--ra-text);}

.ra-title{
  letter-spacing:-.03em;
}

.ra-bg-panel-1{
  background: linear-gradient(180deg, rgba(7,10,22,.78), rgba(7,10,22,.88)), url("images/bg-panel-soluzioni.jpg") center/cover no-repeat;
  border-top:1px solid var(--ra-border);
  border-bottom:1px solid var(--ra-border);
}

.ra-bg-panel-2{
  background: linear-gradient(180deg, rgba(7,10,22,.78), rgba(7,10,22,.90)), url("images/bg-panel-metodo.jpg") center/cover no-repeat;
  border-top:1px solid var(--ra-border);
  border-bottom:1px solid var(--ra-border);
}

.ra-bg-panel-3{
  background: linear-gradient(180deg, rgba(7,10,22,.78), rgba(7,10,22,.92)), url("images/bg-panel-contatto.jpg") center/cover no-repeat;
  border-top:1px solid var(--ra-border);
  border-bottom:1px solid var(--ra-border);
}

.ra-icon{
  width:48px;
  height:48px;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.08);
  border:1px solid var(--ra-border);
}

.ra-img{
  border-radius:24px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--ra-shadow);
}

.ra-footer{
  background: rgba(7,10,22,.92);
  border-top:1px solid var(--ra-border);
}

.ra-form-control, .ra-form-select{
  background: rgba(0,0,0,.25) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color: var(--ra-text) !important;
}

.ra-form-control::placeholder{color: rgba(255,255,255,.55);}

.ra-form-control:focus, .ra-form-select:focus{
  box-shadow: 0 0 0 .25rem rgba(0,229,255,.18) !important;
  border-color: rgba(0,229,255,.40) !important;
}

.accordion-button{
  background: rgba(255,255,255,.06) !important;
  color: var(--ra-text) !important;
}

.accordion-item{
  background: rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.12) !important;
}

.accordion-button:not(.collapsed){
  box-shadow:none !important;
  background: rgba(0,229,255,.12) !important;
}

.ra-cookie{
  backdrop-filter: blur(14px);
}

@media (prefers-reduced-motion:no-preference){
  .ra-float{animation: rafloat 7s ease-in-out infinite}
  @keyframes rafloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
}
