/* USER TEMPLATE CSS START (unaltered except bg image) */
:root{
  /* palette */
    --ink:#0f172a;
    --muted:#94a3b8;
    --hair:rgba(255,255,255,.18);
    --brand:#00A3FF;
    --brand-soft: rgba(0,163,255,.22);
    --radius:14px;
    --shadow:0 12px 40px rgba(0,0,0,.22);
    --control-h:50px;
    --control-pad:12px 14px;
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:Inter,system-ui,sans-serif;
    color:#e8f2ff;
    background:#0a0f19; /* fallback */
    min-height:100dvh;
  }
  /* BG sempre attivo (pre e post login) */
  body::before{
    content:"";
    position:fixed; inset:0;
    background: url('/foto/corporate.png') center / cover no-repeat fixed;
    transform:scale(1.03);
    filter:saturate(1.05) contrast(1.04);
    z-index:-2;
  }
  body::after{
    content:"";
    position:fixed; inset:0;
    background:
      radial-gradient(1200px 600px at 10% -10%, rgba(0,163,255,.25), transparent 60%),
      linear-gradient(180deg, rgba(6,10,18,.85), rgba(6,10,18,.85));
    z-index:-1;
  }

  /* ---------- NAV ---------- */
  header{position:sticky;top:0;z-index:30;padding:14px}
  .nav{
    max-width:1360px;margin:0 auto;padding:.6rem 1rem;display:flex;gap:12px;
    justify-content:space-between;align-items:center;
    background:rgba(255,255,255,.06);
    backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-radius:999px;border:1px solid var(--hair)
  }
  .brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:.2px}
  .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 6px var(--brand-soft)}
  .nav-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .btn{
    border:0;border-radius:999px;padding:.7rem 1rem;cursor:pointer;font-weight:700;line-height:1;
    transition:transform .12s ease, box-shadow .18s ease, opacity .18s;
  }
  .btn:active{transform:translateY(1px)}
  .btn.primary{background:#111;color:#fff}
  .btn.ghost{background:rgba(255,255,255,.08); color:#eaf2ff; border:1px solid rgba(255,255,255,.16)}
  .btn.ghost:hover{box-shadow:0 0 0 3px rgba(255,255,255,.08) inset}

  .chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.35rem .6rem;font-size:.85rem}
  .muted{color:#A7B6CC}
  .hide{display:none!important}

  main{
    max-width:1180px;margin:22px auto; padding:0 18px 40px;
  }

  /* ---------- LOGIN CARD (solo login) ---------- */
  #loginCard{
    position:relative; overflow:hidden;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.18);
    border-radius:22px;
    box-shadow:0 30px 120px rgba(0,0,0,.45);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    color:#eaf2ff;
    padding:24px;
    isolation:isolate;
  }

/* base: senza maschera (nessun warning) */
/* base: filtro acqua + valori iniziali via CSS vars */
#loginCard::before{
  --blur: 15px;
  --sat: 130%;
  content:"";
  position:absolute; inset:-2px;
  padding:2px; border-radius:24px;
  background:
    conic-gradient(from 180deg at 50% 50%,
      rgba(0,163,255,.42),
      rgba(0,163,255,0) 42% 58%,
      rgba(0,163,255,.42));
  /* tieni il filtro SVG qui (con URL tra virgolette per i lint strict) */
  filter: url('#waterDisplace') blur(var(--blur)) saturate(var(--sat));
  opacity:.9; z-index:-1; pointer-events:none;
  clip-path: inset(0 round 24px);
  animation: water-breathe 6s ease-in-out infinite;
  will-change: filter, opacity;
}

/* fallback maschere (niente allerta perché fuori da keyframes) */
@supports (mask-composite: exclude) {
  #loginCard::before{
    clip-path: none;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
}
@supports (-webkit-mask-composite: xor) {
  #loginCard::before{
    clip-path: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
  }
}

/* anima SOLO le variabili: niente url() nei keyframes -> niente giallo */
@keyframes water-breathe{
  0%,100%{ --blur:14px; --sat:120%; opacity:.82; }
  50%    { --blur:18px; --sat:145%; opacity:.96; }
}

/* tipografia + spacing per login */
#loginCard h1{font-size:clamp(1.5rem,2.2vw,2rem);margin:.2rem 0 .4rem}
#loginCard p{margin-top:-2px}
#loginCard .grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:900px){ #loginCard .grid{grid-template-columns:1fr} }

/* input dark mode dentro il login */
#loginCard label{font-weight:700;font-size:.95rem; color:#cfe4ff}
#loginCard input, #loginCard select, #loginCard textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius);
  background:rgba(10,15,25,.55);
  color:#eaf2ff;
  font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#loginCard input[type="email"],
#loginCard input[type="password"],
#loginCard select{ height:var(--control-h); padding:var(--control-pad); appearance:none; }
#loginCard textarea{min-height:120px; padding:12px 16px; resize:vertical}
#loginCard input::placeholder{color:#A7B6CC}
#loginCard input:focus, #loginCard select:focus, #loginCard textarea:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(0,163,255,.22);
  background:rgba(10,15,25,.72);
}

/* CTA login potenziata */
#loginCard .btn.primary{
  background:linear-gradient(135deg,var(--brand), #39c2ff);
  color:#001423;
  box-shadow:0 8px 24px rgba(0,163,255,.35), inset 0 0 0 1px rgba(255,255,255,.28);
}
#loginCard .btn.primary:hover{ box-shadow:0 10px 30px rgba(0,163,255,.5), inset 0 0 0 1px rgba(255,255,255,.35) }
#loginCard .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* micro badge in alto a destra */
#loginCard .accent-chip{
  position:absolute; top:12px; right:12px;
  display:inline-flex; align-items:center; gap:8px;
  padding:.4rem .7rem; border-radius:999px;
  background:rgba(0,163,255,.14); border:1px solid rgba(0,163,255,.35);
  font-weight:700; font-size:.8rem; color:#cfe9ff;
}
#loginCard .accent-chip .dot{
  width:8px;height:8px;border-radius:999px;background:var(--brand);
  box-shadow:0 0 0 4px rgba(0,163,255,.18);
}

/* separatore soft */
.sep{margin:18px 0;border-top:1px dashed rgba(255,255,255,.18)}

/* --- CARDS (benefit) --- */
.card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.12);padding:18px;animation:cardIn .28s ease both; color:var(--ink)}
@keyframes cardIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}
.company{display:flex;flex-direction:column;gap:12px;overflow:hidden}
.company .thumb{aspect-ratio:16/9;background:#f1f5f9;border-radius:14px;overflow:hidden;display:grid;place-items:center}
.company .thumb img{width:100%;height:100%;object-fit:cover}
.company h3{margin:.1rem 0 .2rem;font-size:1.05rem}
.badges{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:0;height:30px;padding:0 .7rem;border-radius:999px;font-weight:700;font-size:.82rem;background:#eef2ff;border:1px solid #c7d2fe}
/* USER TEMPLATE CSS END */


/* ===== Corporate Form (look chiaro dentro .card) ===== */
.form-wrap{ display:block; margin-top:.25rem; }
.form-title{ font-size:1.1rem; font-weight:800; margin:.4rem 0 .8rem; }

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 14px;
}
@media (max-width:900px){
  .form-grid{ grid-template-columns:1fr; }
}

.field{ display:flex; flex-direction:column; gap:8px; }
.field label{
  font-weight:700; font-size:.95rem; color:#0f172a;
}
.field .hint{ font-size:.85rem; color:#64748b; }

.form-wrap input[type="text"],
.form-wrap input[type="email"],
.form-wrap input[type="tel"],
.form-wrap select,
.form-wrap textarea{
  width:100%;
  height:50px;
  padding:12px 14px;
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:#fff;
  color:#0f172a;
  font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-wrap textarea{ min-height:140px; resize:vertical; }

.form-wrap input::placeholder,
.form-wrap textarea::placeholder{ color:#94a3b8; }

.form-wrap input:focus,
.form-wrap select:focus,
.form-wrap textarea:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(0,163,255,.18);
  background:#fff;
}

/* riga azioni / stato invio */
.form-actions{
  display:flex; gap:10px; align-items:center; justify-content:flex-end;
  margin-top:14px;
}
.form-status{
  margin:.4rem 0 0;
  font-size:.95rem;
  color:#64748b;
}
.form-status.ok{ color:#0f7a39; }
.form-status.err{ color:#b91c1c; }

/* badge sopra al form (coerente con le tue chip) */
.form-badges{ display:flex; gap:8px; flex-wrap:wrap; margin:.6rem 0 1rem; }
.form-badges .badge{
  background:#eef2ff; border:1px solid #c7d2fe; color:#0f172a;
}

/* honeypot invisibile ma leggibile per screen reader */
.form-honeypot{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }