/* ============================================================
   TALISMIA — Chi Siamo — Page CSS
   ============================================================ */

/* ── PARTICLES ──────────────────────────────────────────────── */
#particles-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.45}

/* ── HERO ───────────────────────────────────────────────────── */
.cs-hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  overflow:hidden;background:var(--bg-deep);
}
.cs-hero-bg{position:absolute;inset:0;z-index:1}
.cs-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center right;opacity:.75;transform:scale(1.05)}
.cs-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(5,5,5,1) 0%,rgba(5,5,5,.97) 28%,rgba(5,5,5,.78) 50%,rgba(5,5,5,.25) 70%,rgba(5,5,5,.04) 100%);
}
.cs-hero-glow{
  position:absolute;top:50%;right:22%;width:500px;height:500px;
  background:radial-gradient(circle,rgba(214,168,79,.28) 0%,transparent 70%);
  transform:translateY(-50%);animation:glowBreathe 4s ease-in-out infinite;pointer-events:none;
}
.cs-hero-smoke{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 40% 60% at 70% 40%,rgba(180,140,60,.04) 0%,transparent 60%),
             radial-gradient(ellipse 20% 40% at 80% 60%,rgba(214,168,79,.03) 0%,transparent 50%);
  animation:smokeDrift 8s ease-in-out infinite alternate;
}
.cs-hero-content{position:relative;z-index:2;padding:140px 80px 100px;max-width:760px}
.cs-hero-eyebrow{font-size:11px;letter-spacing:6px;text-transform:uppercase;color:var(--gold);margin-bottom:28px;display:block;font-family:var(--sans)}
.cs-hero-h1{font-family:var(--serif);font-size:clamp(52px,6.5vw,90px);font-weight:300;line-height:1.02;letter-spacing:-2px;margin-bottom:36px}
.cs-hero-h1 em{font-style:italic;color:var(--gold);display:block;text-shadow:0 0 60px rgba(214,168,79,.4),0 0 120px rgba(214,168,79,.18);animation:goldPulse 3s ease-in-out infinite}
.cs-hero-h1 .normal{display:block}
.cs-hero-desc{font-size:15px;color:var(--text-muted);line-height:1.9;margin-bottom:52px;max-width:520px}
.cs-hero-actions{display:flex;flex-direction:row;gap:16px;flex-wrap:wrap;align-items:center}

/* ── STATS BAR ──────────────────────────────────────────────── */
.cs-stats{background:var(--bg-dark);border-top:1px solid var(--border-md);border-bottom:1px solid var(--border-md)}
.cs-stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.cs-stat{
  padding:40px 40px;display:flex;align-items:center;gap:18px;
  border-right:1px solid var(--border);transition:background var(--tr);
}
.cs-stat:last-child{border-right:none}
.cs-stat:hover{background:rgba(214,168,79,.03)}
.cs-stat-icon{font-size:22px;color:var(--gold);opacity:.8;flex-shrink:0}
.cs-stat-num{font-family:var(--serif);font-size:36px;font-weight:400;color:var(--text);line-height:1;letter-spacing:-1px}
.cs-stat-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-top:4px;margin-bottom:4px;font-family:var(--sans)}
.cs-stat-desc{font-size:12px;color:var(--text-dim);line-height:1.4}

/* ── STORYTELLING ───────────────────────────────────────────── */
.cs-story{position:relative;z-index:2;padding:120px 80px;background:var(--bg-mid)}
.cs-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;max-width:1300px;margin:0 auto}
.cs-story-title{font-family:var(--serif);font-size:clamp(38px,4vw,58px);font-weight:300;line-height:1.1;margin-bottom:28px}
.cs-story-title em{font-style:italic;color:var(--gold)}
.cs-story-body{font-size:15px;color:var(--text-muted);line-height:1.9;margin-bottom:18px}
.cs-story-badge{
  display:inline-flex;flex-direction:column;align-items:center;
  border:1px solid var(--border-md);padding:24px 32px;margin-top:36px;
  background:rgba(214,168,79,.04);position:relative;
}
.cs-story-badge .badge-label{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--gold-dark);font-family:var(--sans)}
.cs-story-badge .badge-year{font-family:var(--serif);font-size:48px;font-weight:300;color:var(--gold);line-height:1}
.cs-story-badge .badge-sub{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--text-dim);font-family:var(--sans)}
.cs-story-imgs{display:flex;flex-direction:column;gap:20px}
.cs-story-img{position:relative;overflow:hidden}
.cs-story-img img{width:100%;height:320px;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.cs-story-img:hover img{transform:scale(1.04)}
.cs-story-img-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,5,5,.5) 0%,transparent 50%)}
.cs-story-img-glow{position:absolute;inset:0;box-shadow:inset 0 0 40px rgba(214,168,79,.07);pointer-events:none}

/* ── QUOTE BAND ─────────────────────────────────────────────── */
.cs-quote{
  position:relative;z-index:2;padding:70px 80px;
  background:var(--bg-warm);border-top:1px solid var(--border-md);border-bottom:1px solid var(--border-md);
  text-align:center;overflow:hidden;
}
.cs-quote::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 100% at 50% 50%,rgba(214,168,79,.05) 0%,transparent 70%)}
.cs-quote blockquote{position:relative;max-width:900px;margin:0 auto}
.cs-quote-marks{font-family:var(--serif);font-size:120px;color:var(--gold);opacity:.12;line-height:.5;display:block;margin-bottom:12px}
.cs-quote-text{font-family:var(--serif);font-size:clamp(20px,2.5vw,30px);font-weight:300;font-style:italic;color:var(--text);line-height:1.6}
.cs-quote-author{font-size:11px;letter-spacing:5px;text-transform:uppercase;color:var(--gold);margin-top:28px;display:block;opacity:.75;font-family:var(--sans)}

/* ── VALORI ─────────────────────────────────────────────────── */
.cs-valori{position:relative;z-index:2;padding:120px 80px;background:var(--bg-dark);text-align:center}
.cs-valori-title{font-family:var(--serif);font-size:clamp(38px,4vw,56px);font-weight:300;line-height:1.15;margin-bottom:72px}
.cs-valori-title em{font-style:italic;color:var(--gold)}
.cs-valori-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;max-width:1300px;margin:0 auto}
.cs-valore{
  border:1px solid var(--border);background:var(--bg-mid);
  overflow:hidden;transition:transform var(--tr),box-shadow var(--tr);cursor:pointer;
}
.cs-valore:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(214,168,79,.12);z-index:1}
.cs-valore-img{position:relative;overflow:hidden;height:260px}
.cs-valore-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.cs-valore:hover .cs-valore-img img{transform:scale(1.08)}
.cs-valore-img-ov{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 30%,rgba(18,13,8,.82) 100%)}
.cs-valore-img-glow{position:absolute;inset:0;box-shadow:inset 0 0 30px rgba(214,168,79,.08);transition:box-shadow var(--tr)}
.cs-valore:hover .cs-valore-img-glow{box-shadow:inset 0 0 60px rgba(214,168,79,.18)}
.cs-valore-body{padding:28px;text-align:left}
.cs-valore-icon{font-size:18px;color:var(--gold);margin-bottom:12px;display:block}
.cs-valore-name{font-family:var(--serif);font-size:22px;color:var(--text);font-weight:400;margin-bottom:10px}
.cs-valore-desc{font-size:13px;color:var(--text-muted);line-height:1.7}

/* ── BENEFICI BAR ───────────────────────────────────────────── */
.cs-benefici{
  position:relative;z-index:2;padding:80px 80px;background:var(--bg-warm);
  border-top:1px solid var(--border-md);border-bottom:1px solid var(--border-md);overflow:hidden;
}
.cs-benefici::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 100% at 50% 50%,rgba(214,168,79,.04) 0%,transparent 60%)}
.cs-benefici-title{font-family:var(--serif);font-size:clamp(30px,3.5vw,48px);font-weight:300;text-align:center;margin-bottom:56px}
.cs-benefici-title em{font-style:italic;color:var(--gold)}
.cs-benefici-grid{display:grid;grid-template-columns:repeat(6,1fr);max-width:1300px;margin:0 auto;position:relative}
.cs-beneficio{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:32px 20px;border-right:1px solid var(--border);text-align:center;transition:background var(--tr);
}
.cs-beneficio:last-child{border-right:none}
.cs-beneficio:hover{background:rgba(214,168,79,.04)}
.cs-beneficio-icon{
  width:48px;height:48px;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--gold);
  transition:box-shadow var(--tr),border-color var(--tr);
}
.cs-beneficio:hover .cs-beneficio-icon{border-color:var(--gold);box-shadow:0 0 20px var(--gold-glow)}
.cs-beneficio-name{font-family:var(--serif);font-size:16px;color:var(--text);font-weight:400}
.cs-beneficio-desc{font-size:12px;color:var(--text-dim);line-height:1.5}

/* ── SELEZIONE ──────────────────────────────────────────────── */
.cs-selezione{position:relative;z-index:2;padding:120px 80px;background:var(--bg-mid);overflow:hidden}
.cs-sel-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;max-width:1300px;margin:0 auto}
.cs-sel-title{font-family:var(--serif);font-size:clamp(44px,4.5vw,62px);font-weight:300;line-height:1.05;margin-bottom:24px}
.cs-sel-title em{font-style:italic;color:var(--gold)}
.cs-sel-body{font-size:15px;color:var(--text-muted);line-height:1.9;margin-bottom:16px}
.cs-sel-cta{margin-top:36px}
.cs-sel-icons{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);margin-top:48px}
.cs-sel-icon{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 12px;border-right:1px solid var(--border);text-align:center}
.cs-sel-icon:last-child{border-right:none}
.cs-sel-icon .icon-sym{font-size:17px;color:var(--gold)}
.cs-sel-icon .icon-label{font-size:11px;color:var(--text-muted);line-height:1.4;font-family:var(--sans)}
.cs-sel-image{position:relative;overflow:hidden}
.cs-sel-image img{width:100%;height:560px;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.cs-sel-image:hover img{transform:scale(1.03)}
.cs-sel-img-glow{position:absolute;inset:0;box-shadow:inset 0 0 80px rgba(214,168,79,.1);pointer-events:none}
.cs-sel-img-corner{position:absolute;top:18px;right:18px;width:36px;height:36px;border-top:2px solid var(--gold);border-right:2px solid var(--gold);opacity:.5}
.cs-sel-img-corner-bl{position:absolute;bottom:18px;left:18px;width:36px;height:36px;border-bottom:2px solid var(--gold);border-left:2px solid var(--gold);opacity:.5}

/* ── QUALITÀ / TRUST ────────────────────────────────────────── */
.cs-qualita{position:relative;z-index:2;padding:120px 80px;background:var(--bg-dark)}
.cs-qualita-title{font-family:var(--serif);font-size:clamp(36px,4vw,54px);font-weight:300;text-align:center;line-height:1.15;margin-bottom:72px}
.cs-qualita-title em{font-style:italic;color:var(--gold)}
.cs-qualita-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;max-width:1200px;margin:0 auto;align-items:center}
.cs-qualita-left{position:relative;overflow:hidden;border:1px solid var(--border-md)}
.cs-qualita-left img{width:100%;height:500px;object-fit:cover;opacity:.8}
.cs-qualita-left-ov{
  position:absolute;inset:0;background:linear-gradient(to bottom,transparent 30%,rgba(5,5,5,.65) 100%);
  display:flex;align-items:flex-end;justify-content:center;padding:40px;
}
.cs-logo-box{
  text-align:center;border:1px solid var(--gold);padding:18px 36px;
  background:rgba(5,5,5,.75);backdrop-filter:blur(6px);
}
.cs-logo-box-icon{font-size:26px;color:var(--gold)}
.cs-logo-box-text{font-family:var(--serif);font-size:18px;letter-spacing:6px;color:var(--gold);text-transform:uppercase;font-weight:400;margin-top:6px}
.cs-trust-list{display:flex;flex-direction:column;gap:24px}
.cs-trust-item{
  display:flex;gap:22px;align-items:flex-start;padding:22px 26px;
  border:1px solid var(--border);background:rgba(214,168,79,.03);transition:all var(--tr);
}
.cs-trust-item:hover{background:rgba(214,168,79,.06);box-shadow:0 0 30px rgba(214,168,79,.07)}
.cs-trust-icon{
  width:42px;height:42px;border:1px solid var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--gold);flex-shrink:0;
}
.cs-trust-name{font-family:var(--serif);font-size:19px;color:var(--text);margin-bottom:5px}
.cs-trust-desc{font-size:13px;color:var(--text-muted);line-height:1.7}

/* ── BLOG SECTION ───────────────────────────────────────────── */
.cs-blog{position:relative;z-index:2;padding:120px 80px;background:var(--bg-mid)}
.cs-blog-title{font-family:var(--serif);font-size:clamp(36px,4vw,54px);font-weight:300;text-align:center;margin-bottom:72px}
.cs-blog-title em{font-style:italic;color:var(--gold)}
.cs-blog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;max-width:1300px;margin:0 auto}

/* ── CTA FINALE ─────────────────────────────────────────────── */
.cs-cta{
  position:relative;z-index:2;overflow:hidden;
  min-height:380px;display:flex;align-items:center;justify-content:center;text-align:center;
}
.cs-cta-bg{position:absolute;inset:0}
.cs-cta-bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.cs-cta-ov{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(5,5,5,.65) 0%,rgba(5,5,5,.4) 50%,rgba(5,5,5,.7) 100%)}
.cs-cta-glow{position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(214,168,79,.1) 0%,transparent 70%);animation:glowBreathe 3.5s ease-in-out infinite}
.cs-cta-content{position:relative;z-index:1;padding:80px 60px;max-width:800px}
.cs-cta-title{font-family:var(--serif);font-size:clamp(36px,5vw,64px);font-weight:300;line-height:1.1;margin-bottom:14px}
.cs-cta-sub{font-size:15px;color:var(--text-muted);margin-bottom:44px;letter-spacing:.5px}
.cs-cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:1100px){
  .cs-valori-grid{grid-template-columns:repeat(2,1fr)}
  .cs-benefici-grid{grid-template-columns:repeat(3,1fr)}
  .cs-blog-grid{grid-template-columns:repeat(2,1fr)}
  .cs-stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:780px){
  .cs-hero-content{padding:110px 24px 70px}
  .cs-story,.cs-valori,.cs-benefici,.cs-selezione,.cs-qualita,.cs-blog{padding:72px 24px}
  .cs-story-grid,.cs-sel-grid,.cs-qualita-grid{grid-template-columns:1fr}
  .cs-valori-grid{grid-template-columns:1fr}
  .cs-benefici-grid{grid-template-columns:repeat(2,1fr)}
  .cs-blog-grid{grid-template-columns:1fr}
  .cs-quote{padding:60px 24px}
  .cs-cta-content{padding:70px 24px}
}