/* =========================================================
   TARGA. — design tokens
   Palette:  ink #0B0F14 · paper #FAF9F6 · plate-blue #003399
             plate-star #FFCC00 · accent #FF4605
   Type:     Space Grotesk (display) · Inter (body) · JetBrains Mono (dati/targa)
   Segno distintivo: la barra di ricerca È una targa, con un raggio
   di scansione che la attraversa — eco diretta del nome dell'API
   di origine ("targa-scan") e del concetto del prodotto.
========================================================= */

:root{
  --ink:#0B0F14;
  --ink-2:#14171A;
  --paper:#FAF9F6;
  --paper-2:#F1EFE9;
  --plate-blue:#003399;
  --plate-star:#FFCC00;
  --accent:#FF4605;
  --accent-2:#FF7A3D;
  --muted:#6B7280;
  --line:rgba(11,15,20,.12);
  --line-soft:rgba(11,15,20,.07);
  --success:#1FA463;
  --danger:#D6493F;
  --radius-plate:14px;
  --shadow-plate:0 24px 60px rgba(11,15,20,.35), 0 2px 0 rgba(255,255,255,.04) inset;
}

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

html,body{
  margin:0;
  padding:0;
  min-height:100%;
  background:var(--ink);
}

body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;}

button{font:inherit;}

:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:3px;
}

/* ---------- App shell ---------- */
.app{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,70,5,.10), transparent 42%),
    var(--ink);
}

.stage{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:48px 20px 32px;
  text-align:center;
}

.wordmark{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(40px,9vw,58px);
  letter-spacing:-.03em;
  line-height:1;
  margin:0 0 10px;
  color:#fff;
}

.wordmark span{color:var(--accent);}

.tagline{
  font-size:15px;
  line-height:1.5;
  color:rgba(250,249,246,.62);
  max-width:340px;
  margin:0 0 34px;
  font-weight:500;
}

/* ---------- La targa (elemento firma) ---------- */
.plate-form{
  width:100%;
  max-width:400px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.plate-wrap{
  position:relative;
  width:100%;
  aspect-ratio:520/110;
  border-radius:var(--radius-plate);
  overflow:hidden;
  box-shadow:var(--shadow-plate), 0 0 0 0 rgba(255,70,5,0);
  background:#fff;
  display:flex;
  transition:transform .18s ease, box-shadow .18s ease;
  animation:plateGlow 3.6s ease-in-out infinite;
}

@keyframes plateGlow{
  0%,100%{ box-shadow:var(--shadow-plate), 0 0 0 0 rgba(255,70,5,.0); }
  50%{ box-shadow:var(--shadow-plate), 0 0 26px 4px rgba(255,70,5,.22); }
}

.plate-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.55) 45%,
    rgba(255,255,255,0) 60%);
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:3;
}

.plate-wrap:focus-within{
  transform:translateY(-2px);
  box-shadow:0 28px 70px rgba(11,15,20,.42), 0 0 0 3px rgba(255,122,61,.55);
  animation-play-state:paused;
}

.plate-band{
  flex:0 0 15%;
  background:var(--plate-blue);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6%;
  padding:6% 0;
  position:relative;
  z-index:1;
}

.plate-stars{
  width:44%;
  aspect-ratio:1;
  position:relative;
}

.plate-stars i{
  position:absolute;
  top:50%;
  left:50%;
  width:14%;
  height:14%;
  margin:-7% 0 0 -7%;
  border-radius:50%;
  background:var(--plate-star);
}

.plate-i{
  width:28%;
  height:24%;
  border-radius:3px;
  background:#fff;
}

.plate-band-right{
  flex-basis:13%;
  gap:8%;
}

.plate-flag{
  width:60%;
  height:14%;
  border-radius:2px;
  overflow:hidden;
  display:flex;
}
.plate-flag::before,
.plate-flag::after,
.plate-flag i{flex:1;}
.plate-flag{
  background:linear-gradient(90deg,#009246 0 33.3%, #fff 33.3% 66.6%, #CE2B37 66.6% 100%);
}

.plate-cc{
  font-family:'Space Grotesk','Poppins',sans-serif;
  font-weight:700;
  font-size:clamp(11px,3.4vw,15px);
  letter-spacing:.04em;
  color:#fff;
}

.plate-input{
  flex:1;
  min-width:0;
  border:none;
  outline:none;
  background:transparent;
  color:var(--ink-2);
  font-family:'JetBrains Mono','Space Mono',monospace;
  font-weight:700;
  font-size:clamp(20px,6.4vw,32px);
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  padding:0 3%;
  caret-color:var(--accent);
  text-shadow:0 1px 0 rgba(255,255,255,.6), 0 -1px 1px rgba(11,15,20,.18);
  position:relative;
  z-index:2;
}

.plate-input::placeholder{
  color:rgba(20,23,26,.28);
  letter-spacing:.10em;
  text-shadow:none;
}

.scan-beam{
  position:absolute;
  inset:0 auto 0 -18%;
  width:18%;
  background:linear-gradient(90deg,transparent, rgba(255,70,5,.55), transparent);
  pointer-events:none;
  opacity:0;
  z-index:4;
}

.plate-wrap.is-scanning .scan-beam{
  animation:scanSweep 1.1s ease-in-out infinite;
}

@keyframes scanSweep{
  0%{opacity:0; left:-18%;}
  15%{opacity:1;}
  85%{opacity:1;}
  100%{opacity:0; left:100%;}
}

.search-btn{
  width:100%;
  min-height:52px;
  border:none;
  border-radius:999px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 16px 34px rgba(255,70,5,.28);
  transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.search-btn:hover{transform:translateY(-1px);}
.search-btn:disabled{opacity:.55; cursor:default; transform:none;}

.hint{
  font-size:12.5px;
  color:rgba(250,249,246,.55);
  margin:0;
  min-height:16px;
}

.brand-credit{
  font-size:11.5px;
  color:rgba(250,249,246,.32);
  margin:2px 0 0;
  letter-spacing:.02em;
}

.brand-credit strong{
  color:rgba(250,249,246,.5);
  font-weight:700;
}

.proof-row{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:26px;
  font-size:12px;
  color:rgba(250,249,246,.4);
}

.proof-row span{display:flex; align-items:center; gap:6px;}

.proof-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 3px rgba(31,164,99,.18);
}

/* ---------- Result area ---------- */
.result-area{
  width:100%;
  max-width:520px;
  margin:0 auto;
  padding:0 20px 40px;
}

.result-card{
  background:var(--paper);
  color:var(--ink-2);
  border-radius:22px;
  padding:24px;
  box-shadow:0 30px 70px rgba(0,0,0,.35);
  opacity:0;
  transform:translateY(14px);
  animation:cardIn .38s ease forwards;
}

@keyframes cardIn{
  to{opacity:1; transform:translateY(0);}
}

.result-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.result-plate{
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  font-size:13px;
  letter-spacing:.12em;
  padding:6px 10px;
  border-radius:8px;
  background:var(--paper-2);
  border:1px solid var(--line-soft);
}

.result-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:5px 9px;
  border-radius:999px;
}

.result-status.cached{background:rgba(31,164,99,.12); color:var(--success);}
.result-status.live{background:rgba(255,70,5,.12); color:var(--accent);}

.result-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:22px;
  font-weight:700;
  letter-spacing:-.02em;
  margin:0 0 4px;
}

.result-sub{
  font-size:13.5px;
  color:var(--muted);
  margin:0 0 18px;
}

.result-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.result-item{
  padding:12px 13px;
  border-radius:14px;
  background:var(--paper-2);
  border:1px solid var(--line-soft);
}

.result-item-k{
  font-size:10px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:5px;
}

.result-item-v{
  font-size:14px;
  font-weight:700;
  color:var(--ink-2);
  line-height:1.3;
}

/* ---------- Stati messaggio (bloccato / errore) ---------- */
.message-card{
  background:var(--paper);
  color:var(--ink-2);
  border-radius:22px;
  padding:26px 24px;
  text-align:center;
  box-shadow:0 30px 70px rgba(0,0,0,.35);
  opacity:0;
  transform:translateY(14px);
  animation:cardIn .38s ease forwards;
}

.message-icon{
  width:44px;height:44px;
  margin:0 auto 14px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  background:var(--paper-2);
}

.message-card.error .message-icon{color:var(--danger);}
.message-card.info .message-icon{color:var(--accent);}

.message-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:18px;
  font-weight:700;
  margin:0 0 8px;
}

.message-text{
  font-size:13.5px;
  color:var(--muted);
  line-height:1.55;
  margin:0 0 18px;
}

.message-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 20px;
  border:none;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  font-weight:700;
  font-size:13.5px;
  text-decoration:none;
  cursor:pointer;
  font-family:inherit;
}

/* ---------- Install banner ---------- */
.install-banner{
  position:fixed;
  left:14px;
  right:14px;
  bottom:14px;
  z-index:999;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(20,23,26,.92);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 20px 50px rgba(0,0,0,.4);
  transform:translateY(140%);
  transition:transform .32s cubic-bezier(.22,1,.36,1);
}

.install-banner.show{transform:translateY(0);}

.install-icon{
  flex:0 0 auto;
  width:34px;height:34px;
  border-radius:9px;
  overflow:hidden;
  background:var(--paper-2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
}

.install-copy{flex:1; min-width:0;}
.install-copy strong{display:block; font-size:13px; color:#fff;}
.install-copy span{display:block; font-size:11.5px; color:rgba(255,255,255,.55); margin-top:1px;}

.install-btn{
  flex:0 0 auto;
  min-height:36px;
  padding:0 14px;
  border:none;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  font-size:12.5px;
  cursor:pointer;
}

.install-close{
  flex:0 0 auto;
  width:28px;height:28px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.6);
  font-size:14px;
  cursor:pointer;
}

.hidden{display:none !important;}

/* ---------- Modulo "Richiedi accesso" ---------- */
.access-overlay{
  position:fixed;
  inset:0;
  z-index:9999999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(2,5,7,.72);
  backdrop-filter:blur(6px);
  opacity:0;
  pointer-events:none;
  transition:opacity .26s ease;
}

.access-overlay.show{
  opacity:1;
  pointer-events:auto;
}

.access-box{
  position:relative;
  width:100%;
  max-width:420px;
  max-height:calc(100dvh - 40px);
  overflow-y:auto;
  padding:32px 28px;
  border-radius:26px;
  background:var(--paper);
  color:var(--ink-2);
  box-shadow:0 40px 100px rgba(0,0,0,.5);
  transform:scale(.95) translateY(10px);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}

.access-overlay.show .access-box{
  transform:scale(1) translateY(0);
}

.access-close{
  position:absolute;
  top:14px;
  right:14px;
  width:32px;height:32px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper-2);
  color:var(--muted);
  font-size:17px;
  line-height:1;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.access-close:hover{color:var(--ink-2);}

.access-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--accent);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.access-kicker::before{
  content:"";
  width:18px;height:2px;
  background:linear-gradient(90deg,var(--accent),transparent);
}

.access-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:24px;
  font-weight:700;
  letter-spacing:-.025em;
  margin:0 0 8px;
}

.access-sub{
  font-size:13.5px;
  line-height:1.55;
  color:var(--muted);
  margin:0 0 20px;
}

.access-plate-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  font-size:15px;
  letter-spacing:.12em;
  padding:9px 14px;
  border-radius:10px;
  background:var(--paper-2);
  border:1px solid var(--line-soft);
  color:var(--ink-2);
  margin-bottom:18px;
}

.access-label{
  display:block;
  font-size:11.5px;
  font-weight:700;
  color:var(--muted);
  margin:0 0 6px;
}

.access-input{
  width:100%;
  min-height:48px;
  padding:0 14px;
  margin-bottom:16px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
  color:var(--ink-2);
  font-family:'Inter',sans-serif;
  font-size:14.5px;
  outline:none;
  transition:border-color .16s ease, box-shadow .16s ease;
}

.access-input:focus{
  border-color:var(--accent-2);
  box-shadow:0 0 0 3px rgba(255,122,61,.18);
}

.access-select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236B7280'><path d='M5.5 7.5l4.5 4.5 4.5-4.5'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px;
  padding-right:38px;
}

.access-submit{
  width:100%;
  min-height:50px;
  border:none;
  border-radius:999px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:14.5px;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(255,70,5,.26);
  transition:transform .16s ease, opacity .16s ease;
}
.access-submit:hover{transform:translateY(-1px);}
.access-submit:disabled{opacity:.6; cursor:default; transform:none;}

.access-error{
  min-height:16px;
  margin:10px 0 0;
  font-size:12.5px;
  color:var(--danger);
  text-align:center;
}

.access-success-state{
  text-align:center;
  padding:8px 0 4px;
}

.access-success-icon{
  width:52px;height:52px;
  margin:0 auto 16px;
  border-radius:50%;
  background:rgba(31,164,99,.12);
  color:var(--success);
  font-size:24px;
  font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

@media (max-width:400px){
  .access-box{padding:26px 20px; border-radius:22px;}
}

@media (max-width:380px){
  .stage{padding:36px 16px 24px;}
  .result-grid{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  .plate-wrap{animation:none;}
  .plate-wrap.is-scanning .scan-beam{animation:none; opacity:.4;}
  .result-card,.message-card{animation:none; opacity:1; transform:none;}
  .install-banner{transition:none;}
  .access-overlay,.access-box{transition:none;}
}


/* =========================================================
   STORYCAR — installazione PWA premium v4
========================================================= */
html.install-lock{overflow:hidden}
.install-overlay{position:fixed;inset:0;z-index:99990;display:grid;place-items:center;padding:16px;opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s ease;font-family:'Inter',sans-serif}
.install-overlay.show{opacity:1;visibility:visible}
.install-backdrop{position:absolute;inset:0;background:rgba(2,5,9,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.install-modal{position:relative;width:min(420px,100%);max-height:calc(100dvh - 24px);overflow:auto;padding:30px 24px 20px;border:1px solid rgba(255,255,255,.11);border-radius:29px;text-align:center;color:#f8f9fb;background:radial-gradient(circle at 50% -4%,rgba(255,78,19,.22),transparent 38%),linear-gradient(160deg,#151922 0%,#080b11 70%);box-shadow:0 34px 110px rgba(0,0,0,.62),0 18px 50px rgba(255,71,10,.14);transform:translateY(18px) scale(.97);transition:transform .3s cubic-bezier(.2,.75,.2,1)}
.install-overlay.show .install-modal{transform:none}
.install-x{position:absolute;right:13px;top:12px;width:39px;height:39px;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);color:#b8bdc6;font-size:26px;line-height:1;cursor:pointer}
.install-app-icon{width:76px;height:76px;margin:1px auto 14px;border-radius:22px;overflow:hidden;background:#090c12;border:1px solid rgba(255,255,255,.12);box-shadow:0 16px 40px rgba(255,74,15,.24)}
.install-app-icon img{width:100%;height:100%;display:block}
.install-kicker{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;letter-spacing:.15em;font-weight:800;color:#c5c9d0}
.install-kicker i{width:7px;height:7px;border-radius:50%;background:#24c982;box-shadow:0 0 0 4px rgba(36,201,130,.12),0 0 16px rgba(36,201,130,.6)}
.install-modal h2{margin:12px 0 9px;font-family:'Space Grotesk',sans-serif;font-size:clamp(28px,7vw,35px);line-height:1.02;letter-spacing:-.04em;color:#fff}
.install-lead{max-width:355px;margin:0 auto;color:#aeb3bc;font-size:15px;line-height:1.5}
.install-benefits{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 14px;margin:17px 0 18px;color:#d7dae0;font-size:12.5px;font-weight:650}
.install-benefits span{display:flex;align-items:center;gap:5px}.install-benefits b{color:#24c982}
.install-ios-steps{display:grid;gap:8px;margin:0 0 17px;text-align:left}
.install-ios-steps div{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid rgba(255,255,255,.06);border-radius:13px;background:rgba(255,255,255,.045);color:#dde0e5;font-size:13px;line-height:1.25}
.install-ios-steps b{display:grid;place-items:center;min-width:27px;height:27px;border-radius:50%;background:linear-gradient(135deg,#ff4308,#ff7a35);color:#fff;font-size:12px}.install-ios-steps em{font-style:normal;font-size:18px}
.install-primary{width:100%;min-height:60px;padding:10px 18px;border:0;border-radius:18px;background:linear-gradient(110deg,#ff4308,#ff7934);color:#fff;font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:700;cursor:pointer;box-shadow:0 15px 38px rgba(255,70,7,.31);transition:transform .17s ease,opacity .17s ease}
.install-primary:hover{transform:translateY(-1px)}.install-primary:disabled{opacity:.48;cursor:not-allowed;transform:none;box-shadow:none}
.install-later{margin:8px auto 0;padding:7px 12px;border:0;background:transparent;color:#9197a1;text-decoration:underline;cursor:pointer}
.install-privacy{margin:4px 0 0;color:#6f7580;font-size:11px}
.install-fab{position:fixed;right:15px;bottom:calc(15px + env(safe-area-inset-bottom));z-index:99970;display:flex;align-items:center;gap:8px;min-height:46px;padding:6px 14px 6px 7px;border:1px solid rgba(255,255,255,.11);border-radius:999px;background:rgba(11,14,20,.94);color:#f4f5f7;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:700;box-shadow:0 13px 36px rgba(0,0,0,.38);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transform:translateY(10px);transition:.22s ease;cursor:pointer}
.install-fab.show{opacity:1;visibility:visible;transform:none}.install-fab img{width:34px;height:34px;border-radius:10px}
@media(max-width:480px){.install-overlay{padding:9px;align-items:end}.install-modal{width:100%;padding:27px 19px 17px;border-radius:28px 28px 20px 20px}.install-app-icon{width:68px;height:68px}.install-fab{right:11px;bottom:calc(11px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.install-overlay,.install-modal,.install-fab{transition:none}}