/* ============================================================
   assets/css/stile-home.css
   Tenace Games S.r.l.s. — Stili specifici della Homepage
   I comuni (navbar, footer, torna-su, cookie banner, animazioni)
   sono in assets/css/stile-comune.css
   ============================================================ */

/* ── HERO ── */
.sezione-hero { background: var(--gradiente-hero); min-height: 88vh; display: flex; align-items: center; position: relative; overflow: hidden; }
.sezione-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size: 60px 60px; pointer-events: none; }
.sezione-hero::after  { content: ''; position: absolute; right: -180px; top: -120px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle,rgba(74,127,212,.18) 0%,transparent 70%); pointer-events: none; }
.hero-etichetta { display: inline-block; background: rgba(204,204,204,.15); border: 1px solid rgba(204,204,204,.3); color: var(--accento); font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; padding: .4rem 1.1rem; border-radius: 50px; margin-bottom: 1.4rem; }
.hero-titolo { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2.8rem,5vw,4.6rem); font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 1.4rem; }
.hero-titolo span { color: var(--accento); }
.hero-sottotitolo { font-size: 1.2rem; color: rgba(255,255,255,.75); max-width: 560px; margin-bottom: 2.2rem; font-weight: 300; }
.btn-primario  { background: var(--accento); color: #1a1a2e; border: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.1rem; letter-spacing: .06em; padding: .8rem 2.2rem; border-radius: 8px; transition: all .25s; text-decoration: none; display: inline-block; }
.btn-primario:hover  { background: var(--accento-scuro); color: #0a0a1e; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(204,204,204,.25); }
.btn-secundario { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 1.1rem; letter-spacing: .06em; padding: .8rem 1.8rem; border-radius: 8px; transition: all .25s; text-decoration: none; display: inline-block; }
/* Alias italiano corretto */
.btn-secondario { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 1.1rem; letter-spacing: .06em; padding: .8rem 1.8rem; border-radius: 8px; transition: all .25s; text-decoration: none; display: inline-block; }
.btn-secondario:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; transform: translateY(-2px); }
.hero-stats { margin-top: 3.5rem; display: flex; gap: 2.5rem; flex-wrap: wrap; }
.stat-numero { font-family: 'Barlow Condensed', sans-serif; font-size: 2.4rem; font-weight: 800; color: var(--accento); line-height: 1; }
.stat-label  { font-size: .9rem; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .08em; margin-top: .3rem; }
.hero-brand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 420px; margin: 0 auto; }
.hero-brand-card { background: rgba(168,199,225,.30); border: none; border-radius: 14px; padding: 1.3rem 1.6rem; text-align: center; transition: all .28s; cursor: pointer; text-decoration: none; display: flex; align-items: center; justify-content: center; min-height: 90px; box-shadow: 0 4px 18px rgba(0,0,0,.18); }
.hero-brand-card:hover { background: #ffffff; transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.hero-brand-logo { height: 54px; width: auto; max-width: 300px; object-fit: contain; display: block; }

/* ── SEZIONI ── */
.sezione-chi-siamo  { padding: 100px 0; background-color: var(--sfondo-corpo);       transition: background-color .35s ease; }
.sezione-brand      { padding: 100px 0; background-color: var(--sfondo-sezione-alt); transition: background-color .35s ease; }
.sezione-settori    { padding: 100px 0; background-color: var(--sfondo-corpo);        transition: background-color .35s ease; }
.sezione-contatti   { padding: 100px 0; background-color: var(--sfondo-sezione-alt); transition: background-color .35s ease; }
.etichetta-sezione  { display: inline-block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blu-primario); background: var(--blu-chiaro); padding: .35rem 1rem; border-radius: 50px; margin-bottom: 1rem; }
.titolo-sezione     { font-size: clamp(2rem,3.5vw,3.1rem); font-weight: 800; color: var(--testo-primario); margin-bottom: 1.2rem; }
.titolo-sezione span { color: var(--blu-primario); }
.testo-sezione      { font-size: 1.1rem; color: var(--testo-secondario); font-weight: 300; line-height: 1.8; }

/* ── CARD VALORI ── */
.card-valore { background: var(--sfondo-card); border: 1px solid var(--bordo); border-radius: 14px; padding: 1.8rem; height: 100%; transition: all .3s; position: relative; overflow: hidden; }
.card-valore::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,var(--blu-primario),var(--accento)); opacity: 0; transition: opacity .3s; }
.card-valore:hover { box-shadow: 0 12px 40px var(--ombra-forte); transform: translateY(-4px); border-color: var(--blu-primario); }
.card-valore:hover::before { opacity: 1; }
.card-valore-icona { width: 54px; height: 54px; border-radius: 12px; background: var(--blu-chiaro); display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; transition: background .3s; }
.card-valore:hover .card-valore-icona { background: var(--blu-primario); }
.card-valore-icona i { font-size: 1.5rem; color: var(--blu-primario); transition: color .3s; }
.card-valore:hover .card-valore-icona i { color: #fff; }
.card-valore h5, .card-valore .h5 { font-size: 1.2rem; font-weight: 700; color: var(--testo-primario); margin-bottom: .5rem; }
.card-valore p { font-size: 1rem; color: var(--testo-secondario); margin: 0; line-height: 1.7; }

/* ── SEZIONE NUMERI ── */
.sezione-numeri { padding: 85px 0; background: var(--gradiente-hero); position: relative; overflow: hidden; }
.sezione-numeri::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size: 50px 50px; }
.numero-grande { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(3rem,5vw,4.8rem); font-weight: 800; color: var(--accento); line-height: 1; }
.numero-label  { font-size: 1rem; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .1em; margin-top: .5rem; }
.divisore-numeri { width: 1px; background: rgba(255,255,255,.15); align-self: stretch; }

/* ── CARD BRAND ── */
.card-brand { background: var(--sfondo-card); border: 1px solid var(--bordo); border-radius: 18px; overflow: hidden; height: 100%; transition: all .3s; display: flex; flex-direction: column; }
.card-brand:hover { box-shadow: 0 16px 48px var(--ombra-forte); transform: translateY(-6px); border-color: transparent; }
.card-brand-header { background: var(--gradiente-brand); padding: 2rem 1.8rem 1.4rem; position: relative; overflow: hidden; }
.card-brand-header::after { content: ''; position: absolute; right: -30px; bottom: -40px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.06); }
.brand-logo-header { margin-bottom: 1.1rem; display: flex; align-items: center; }
.brand-logo-header img { height: 46px; width: auto; max-width: 200px; object-fit: contain; border-radius: 8px; background: rgba(255,255,255,.92); padding: 6px 12px; display: block; }
.brand-logo-header.logo-trasparente img { background: transparent; padding: 0; filter: drop-shadow(0 2px 6px rgba(0,0,0,.3)); }
.brand-nome   { font-family: 'Barlow Condensed', sans-serif; font-size: 1.7rem; font-weight: 800; color: #fff; margin: 0 0 .3rem; }
.brand-dominio { font-size: .9rem; color: rgba(255,255,255,.65); text-decoration: none; letter-spacing: .04em; }
.brand-dominio:hover { color: var(--accento); }
.card-brand-body { padding: 1.8rem; flex: 1; display: flex; flex-direction: column; }
.card-brand-body p { font-size: 1rem; color: var(--testo-secondario); line-height: 1.7; flex: 1; }
.brand-tag { display: inline-block; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: var(--blu-chiaro); color: var(--blu-primario); border-radius: 50px; padding: .25rem .75rem; margin: .25rem .25rem .25rem 0; }
.btn-brand { background: var(--gradiente-brand); color: #fff; border: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: .05em; padding: .65rem 1.5rem; border-radius: 8px; transition: all .25s; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.2rem; width: fit-content; }
.btn-brand:hover { color: #fff; opacity: .88; transform: translateX(3px); }
.card-brand:nth-child(1) .card-brand-header { background: linear-gradient(135deg,#1c3c78,#2a5298); }
.card-brand:nth-child(2) .card-brand-header { background: linear-gradient(135deg,#1a3560,#0d4a8a); }
.card-brand:nth-child(3) .card-brand-header { background: linear-gradient(135deg,#152d5a,#1e4080); }
.card-brand:nth-child(4) .card-brand-header { background: linear-gradient(135deg,#0f2248,#1c3c78); }

/* ── SETTORI ── */
.card-settore { background: var(--sfondo-card); border: 1px solid var(--bordo); border-radius: 14px; padding: 2rem 1.5rem; text-align: center; transition: all .3s; height: 100%; }
.card-settore:hover { box-shadow: 0 12px 40px var(--ombra); border-color: var(--blu-primario); transform: translateY(-4px); }
.settore-icona { width: 72px; height: 72px; background: var(--gradiente-brand); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.3rem; }
.settore-icona i { font-size: 1.9rem; color: #fff; }
.card-settore h5, .card-settore .h5 { font-size: 1.25rem; font-weight: 700; color: var(--testo-primario); margin-bottom: .6rem; }
.card-settore p { font-size: 1rem; color: var(--testo-secondario); margin: 0; line-height: 1.7; }

/* ── FORM CONTATTI ── */
.form-tenace .form-control,
.form-tenace .form-select { background: var(--sfondo-card); border: 1.5px solid var(--bordo); color: var(--testo-primario); border-radius: 10px; padding: .8rem 1.1rem; font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.form-tenace .form-control:focus,
.form-tenace .form-select:focus { border-color: var(--blu-primario); box-shadow: 0 0 0 3px rgba(28,60,120,.12); background: var(--sfondo-card); color: var(--testo-primario); }
.form-tenace .form-select option { background: var(--sfondo-card); color: var(--testo-primario); }
.form-tenace label { font-weight: 600; font-size: .95rem; color: var(--testo-primario); margin-bottom: .4rem; }
.form-tenace textarea { resize: none; }
.btn-invia { background: var(--gradiente-brand); color: #fff; border: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: .06em; padding: .85rem 2.5rem; border-radius: 10px; transition: all .25s; width: 100%; cursor: pointer; }
.btn-invia:hover    { opacity: .88; transform: translateY(-2px); box-shadow: 0 8px 24px var(--ombra-forte); }
.btn-invia:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.info-contatto { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; }
.info-contatto-icona { width: 46px; height: 46px; background: var(--blu-chiaro); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.info-contatto-icona i { font-size: 1.15rem; color: var(--blu-primario); }
.info-contatto-testo strong { display: block; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--testo-secondario); margin-bottom: .2rem; }
.info-contatto-testo a,
.info-contatto-testo span { color: var(--testo-primario); text-decoration: none; font-weight: 500; font-size: 1rem; }
.info-contatto-testo a:hover { color: var(--blu-primario); }

/* ── RESPONSIVE HOMEPAGE ── */
@media (max-width: 991px) {
  .sezione-hero  { min-height: 70vh; padding: 60px 0; }
  .hero-brand-grid { margin-top: 3rem; max-width: 100%; }
  .hero-brand-card { min-width: 0; overflow: hidden; }
  .hero-brand-logo { max-width: 100%; height: auto; max-height: 52px; }
  .divisore-numeri { display: none; }
}
@media (max-width: 767px) {
  .hero-stats { gap: 1.5rem; }
  .stat-numero { font-size: 2rem; }
  .sezione-chi-siamo, .sezione-brand, .sezione-settori, .sezione-contatti { padding: 70px 0; }
  .hero-brand-grid { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .hero-brand-card { padding: 1rem; min-height: 84px; border-radius: 12px; }
  .hero-brand-logo { width: 100%; max-width: 100%; max-height: 44px; }
}
@media (max-width: 575px) {
  .hero-brand-grid  { grid-template-columns: 1fr; gap: .75rem; }
  .hero-brand-card  { min-height: 80px; }
  .hero-brand-logo  { max-height: 40px; }
}