/* ==========================================================================
   Treby — Landing "Stiamo arrivando"
   Foglio di stile principale (mobile-first)
   Commenti in italiano.
   ========================================================================== */

/* --- Reset minimale ------------------------------------------------------- */
*,
*::before,
*::after{
  box-sizing:border-box;margin:0;padding:0;
  -webkit-tap-highlight-color:transparent;
}
html,body{height:100%}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}

/* --- Design tokens (derivati dal logo Treby) ------------------------------ */
:root{
  --primary:#1E5FA8;
  --primary-strong:#0E4A9B;
  --primary-soft:#2A82D8;
  --primary-light:#E8F0FA;
  --accent:#E8612C;
  --accent-soft:#FF9366;
  --accent-warm:#F5C756;
  --bg:#F4F4F4;
  --surface:#FFFFFF;
  --text:#111111;
  --text2:#555555;
  --text3:#999999;
  --border:rgba(0,0,0,.07);
  --font:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-display:'Oswald',var(--font);
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --radius-pill:999px;
  --shadow-md:0 8px 24px rgba(14,74,155,.12);
  --shadow-lg:0 18px 48px rgba(14,74,155,.22);
}

/* Tema scuro automatico */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0F0F0F;
    --surface:#1C1C1E;
    --text:#F2F2F2;
    --text2:#ABABAB;
    --text3:#6E6E6E;
    --border:rgba(255,255,255,.08);
    --primary-light:rgba(42,130,216,.15);
    --shadow-md:0 8px 24px rgba(0,0,0,.45);
    --shadow-lg:0 18px 48px rgba(0,0,0,.6);
  }
}

/* --- Layout di pagina ----------------------------------------------------- */
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}

/* Sfondo decorativo: blob blu/arancio che richiamano il logo */
.bg-decor{
  position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
}
.bg-decor::before,
.bg-decor::after{
  content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;
  animation:floaty 14s ease-in-out infinite;
}
.bg-decor::before{
  width:420px;height:420px;
  background:radial-gradient(circle at 30% 30%, var(--primary-soft), var(--primary) 70%);
  top:-140px;left:-120px;
}
.bg-decor::after{
  width:360px;height:360px;
  background:radial-gradient(circle at 70% 70%, var(--accent-soft), var(--accent) 70%);
  bottom:-120px;right:-100px;animation-delay:-7s;
}
@keyframes floaty{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(20px,-20px,0) scale(1.05)}
}

/* --- Top bar stile app ---------------------------------------------------- */
.top-bar{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;
  position:sticky;top:0;z-index:10;
  background:linear-gradient(180deg, rgba(244,244,244,.85), rgba(244,244,244,.6));
  backdrop-filter:saturate(1.2) blur(14px);
  -webkit-backdrop-filter:saturate(1.2) blur(14px);
}
@media (prefers-color-scheme: dark){
  .top-bar{background:linear-gradient(180deg, rgba(15,15,15,.85), rgba(15,15,15,.5))}
}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{
  width:40px;height:40px;border-radius:12px;
  box-shadow:var(--shadow-md);background:#fff;
}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-word{
  font-family:var(--font-display);font-weight:700;letter-spacing:.08em;
  font-size:18px;color:var(--primary);
}
.brand-city{font-size:11px;color:var(--text2);font-weight:600}

/* --- Contenuto principale ------------------------------------------------- */
main{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 20px 40px;
  width:100%;max-width:560px;margin:0 auto;text-align:center;
}

/* Card hero che richiama le card dell'app */
.hero-card{
  width:100%;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:36px 22px 30px;
  box-shadow:var(--shadow-lg);
  position:relative;overflow:hidden;
  animation:fadeUp .8s ease-out both;
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

/* Striscia gradient in alto per dare "carattere app" */
.hero-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg, var(--primary), var(--primary-soft), var(--accent-warm), var(--accent));
}

/* Logo centrale con effetto pulse e alone */
.logo-wrap{
  width:140px;height:140px;margin:0 auto 22px;
  display:grid;place-items:center;position:relative;
}
.logo-wrap::before{
  content:"";position:absolute;inset:-12px;border-radius:50%;
  background:radial-gradient(circle, var(--primary-light), transparent 70%);
  animation:pulse 2.6s ease-in-out infinite;
}
.logo-wrap img{
  width:128px;height:128px;object-fit:contain;border-radius:28px;
  box-shadow:var(--shadow-md);position:relative;z-index:1;background:#fff;
  padding:8px;
}
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:.75}
  50%{transform:scale(1.08);opacity:1}
}

/* Titolo principale */
h1{
  font-family:var(--font-display);
  font-size:clamp(28px, 8vw, 40px);
  font-weight:700;letter-spacing:.02em;line-height:1.1;
  color:var(--text);margin-bottom:10px;
}
/* Seconda parte del titolo: stesso blu brand della wordmark TREBY */
h1 .accent{
  color:var(--primary);
  letter-spacing:.08em;
}
.lead{
  color:var(--text2);font-size:15.5px;max-width:44ch;margin:0 auto 22px;
}

/* Griglia di feature per ricordare le sezioni dell'app */
.features{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  margin:18px 0 24px;
}
.feature{
  display:flex;align-items:center;gap:10px;
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:10px 12px;text-align:left;
  font-size:13.5px;font-weight:600;color:var(--text);
}
.feature .icon{
  width:32px;height:32px;flex:0 0 32px;border-radius:10px;display:grid;place-items:center;
  background:var(--primary-light);color:var(--primary);
}
.feature .icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.feature.accent .icon{background:rgba(232,97,44,.12);color:var(--accent)}
.feature.warm   .icon{background:rgba(245,199,86,.22);color:#B3830A}
.feature.soft   .icon{background:rgba(42,130,216,.14);color:var(--primary-soft)}

/* Barra di progresso decorativa */
.progress{
  height:8px;border-radius:var(--radius-pill);background:var(--bg);
  overflow:hidden;border:1px solid var(--border);margin:6px 0 6px;
}
/* Riempimento blu→arancio + "highlight" che scorre da sinistra verso destra */
.progress .bar{
  height:100%;width:72%;
  border-radius:var(--radius-pill);
  position:relative;overflow:hidden;
  background:linear-gradient(90deg, var(--primary), var(--accent));
}
.progress .bar::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 100%
  );
  transform:translateX(-100%);
  animation:loader-sweep 1.6s linear infinite;
}
@keyframes loader-sweep{
  0%  {transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
.progress-label{font-size:12px;color:var(--text3);font-weight:600}

/* Link social (Instagram / Facebook) nella card hero */
.social-hero{margin-top:26px}
.social-hero-title{
  font-size:13px;font-weight:700;color:var(--text2);letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:14px;
}
.social-hero-row{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.social-hero a{
  width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow-md);transition:transform .15s ease, box-shadow .2s ease;
}
.social-hero a:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.social-hero a:active{transform:translateY(0)}
.social-hero svg{width:28px;height:28px;display:block}

/* --- Footer --------------------------------------------------------------- */
footer{
  padding:20px 18px 28px;text-align:center;
  color:var(--text3);font-size:12.5px;
}
footer .copy-email{color:var(--primary);font-weight:700}

/* --- Mobile first: breakpoint ≥ 600px ------------------------------------- */
@media (min-width: 600px){
  .hero-card{padding:44px 36px 36px}
  .features{grid-template-columns:repeat(2,1fr);gap:12px}
  .feature{padding:12px 14px;font-size:14px}
}

/* Accessibilità: riduci animazioni per chi le preferisce disattivate */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{animation:none!important;transition:none!important}
}