/* ==========================================================================
   Assegno Sicuro — coming soon
   Palette derivata dal logo ufficiale (Lexcheck)
   ========================================================================== */

:root{
  --green-900:#08361c;
  --green-800:#0b4a26;
  --green-600:#1e7b36;
  --green-500:#3fa146;
  --green-400:#6bbe4b;

  --blue-900:#032549;
  --blue-800:#06376f;
  --blue-600:#0a5494;
  --blue-500:#1e76c4;

  --ink:#0a2440;
  --ink-soft:#4d6072;
  --ink-faint:#7d8fa0;

  --paper:#f4f8fb;
  --card:rgba(255,255,255,.74);
  --line:rgba(10,36,64,.09);

  --radius:30px;
  --shadow:
    0 1px 2px rgba(6,55,111,.05),
    0 12px 28px -12px rgba(6,55,111,.16),
    0 42px 80px -32px rgba(6,55,111,.22);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:clamp(1.25rem,4vw,3rem);
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---------- sfondo ------------------------------------------------------ */

.backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}

.orb{
  position:absolute;
  display:block;
  border-radius:50%;
  filter:blur(90px);
  opacity:.5;
  will-change:transform;
}
.orb--green{
  top:-22vmax;left:-18vmax;
  width:62vmax;height:62vmax;
  background:radial-gradient(circle at 35% 35%,rgba(107,190,75,.72),rgba(30,123,54,.28) 55%,transparent 72%);
  animation:drift-a 26s ease-in-out infinite alternate;
}
.orb--blue{
  right:-24vmax;bottom:-26vmax;
  width:68vmax;height:68vmax;
  background:radial-gradient(circle at 60% 55%,rgba(30,118,196,.60),rgba(6,55,111,.26) 55%,transparent 72%);
  animation:drift-b 32s ease-in-out infinite alternate;
}

.grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right,rgba(10,36,64,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(10,36,64,.055) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 45%,#000 25%,transparent 78%);
          mask-image:radial-gradient(ellipse 75% 65% at 50% 45%,#000 25%,transparent 78%);
}

@keyframes drift-a{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(5vmax,4vmax,0) scale(1.09)}
}
@keyframes drift-b{
  from{transform:translate3d(0,0,0) scale(1.06)}
  to  {transform:translate3d(-5vmax,-3vmax,0) scale(1)}
}

/* ---------- layout ------------------------------------------------------ */

.shell{
  position:relative;
  z-index:1;
  width:100%;
  max-width:820px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(1.25rem,3vw,1.85rem);
}

/* ---------- card -------------------------------------------------------- */

.card{
  position:relative;
  width:100%;
  padding:clamp(2rem,4.6vw,3.25rem) clamp(1.5rem,5vw,4rem) clamp(1.85rem,3.8vw,2.75rem);
  text-align:center;
  background:var(--card);
  border:1px solid rgba(255,255,255,.85);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(22px) saturate(1.35);
          backdrop-filter:blur(22px) saturate(1.35);
  overflow:hidden;
}

/* filo luminoso in alto: verde -> blu */
.card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,
    transparent,
    var(--green-500) 18%,
    var(--green-600) 34%,
    var(--blue-600) 66%,
    var(--blue-500) 82%,
    transparent);
  opacity:.9;
}

.card__logo{
  width:min(360px,80%);
  height:auto;
  margin:0 auto;
  display:block;
}

/* ---------- badge ------------------------------------------------------- */

.badge{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  margin:clamp(1.25rem,2.6vw,1.65rem) 0 0;
  padding:.45em 1.05em .45em .9em;
  border:1px solid rgba(30,123,54,.22);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(240,250,243,.9));
  color:var(--green-800);
  font-family:"Plus Jakarta Sans","Inter",sans-serif;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  box-shadow:0 1px 2px rgba(6,55,111,.05);
}

.badge__dot{
  position:relative;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--green-500);
}
.badge__dot::after{
  content:"";
  position:absolute;inset:0;
  border-radius:50%;
  background:var(--green-500);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%  {transform:scale(1);opacity:.7}
  70% {transform:scale(3.2);opacity:0}
  100%{transform:scale(3.2);opacity:0}
}

/* ---------- testi ------------------------------------------------------- */

.card__title{
  margin:clamp(1rem,2.4vw,1.4rem) 0 0;
  font-family:"Plus Jakarta Sans","Inter",sans-serif;
  font-size:clamp(1.6rem,1.05rem + 2.6vw,3.05rem);
  font-weight:800;
  line-height:1.14;
  letter-spacing:-.032em;
  color:var(--ink);
  text-wrap:balance;
}

.grad{
  background:linear-gradient(100deg,var(--green-600) 0%,var(--green-500) 34%,var(--blue-600) 78%);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

.card__lead{
  margin:clamp(1rem,2.2vw,1.35rem) auto 0;
  max-width:53ch;
  color:var(--ink-soft);
  font-size:clamp(1rem,.95rem + .3vw,1.15rem);
  line-height:1.72;
  text-wrap:pretty;
}
.card__lead strong{color:var(--ink);font-weight:600}

/* ---------- pills ------------------------------------------------------- */

.pills{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.6rem .7rem;
  margin:clamp(1.5rem,3vw,2rem) 0 0;
  padding:0;
  list-style:none;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding:.5em 1em;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.8);
  color:var(--ink);
  font-size:.875rem;
  font-weight:500;
  white-space:nowrap;
  box-shadow:0 1px 2px rgba(6,55,111,.04);
}
.pill svg{
  width:15px;height:15px;
  flex:none;
  fill:none;
  stroke:var(--green-600);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ---------- footer ------------------------------------------------------ */

.foot{
  text-align:center;
  color:var(--ink-faint);
  font-size:.83rem;
  line-height:1.6;
}
.foot p{margin:0}
.foot strong{color:var(--ink-soft);font-weight:600;letter-spacing:.01em}
.foot__copy{margin-top:.3rem;opacity:.8}

/* ---------- ingresso ---------------------------------------------------- */

.card__logo,.badge,.card__title,.card__lead,.pills,.foot{
  animation:rise .9s cubic-bezier(.22,.85,.3,1) backwards;
}
.card__logo {animation-delay:.05s}
.badge      {animation-delay:.16s}
.card__title{animation-delay:.24s}
.card__lead {animation-delay:.34s}
.pills      {animation-delay:.44s}
.foot       {animation-delay:.56s}

@keyframes rise{
  from{opacity:0;transform:translate3d(0,14px,0)}
  to  {opacity:1;transform:none}
}

/* ---------- accessibilità / stampa -------------------------------------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

@media (max-width:420px){
  .pill{font-size:.8rem;padding:.45em .85em}
  .card{border-radius:24px}
}

@media print{
  .backdrop{display:none}
  body{background:#fff}
  .card{box-shadow:none;border:1px solid #ddd;backdrop-filter:none;background:#fff}
}

/* il ritorno a capo del titolo serve solo sui formati larghi */
@media (max-width:680px){
  .card__title br{display:none}
}