:root{
  --red: #E4362C;
  --red-dark: #B8231B;
  --red-glow: rgba(228,54,44,.55);
  --blue: #1E5AA0;
  --blue-dark: #123C74;
  --blue-glow: rgba(30,90,160,.55);
  --ink: #0B0E16;
  --paper: #FBFAF5;

  --font-display: "Lato", system-ui, sans-serif;
  --font-body: "Lato", system-ui, sans-serif;
  --font-accent: "Lato", system-ui, sans-serif;
  --ease: cubic-bezier(.22,.9,.32,1);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%; margin:0; overflow:hidden;}
body.landing-body{
  background:var(--ink); font-family:var(--font-body); color:#fff;
  width:100%; height:100vh;
}

/* ============ TOP BAR ============ */
.landing-topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:.6rem;
  padding:1.4rem clamp(1.2rem,4vw,2.4rem);
  pointer-events:none;
}
.landing-brand-logo{ height:46px; width:auto; display:block; opacity:.95; }

/* ============ SPLIT STAGE ============ */
.split-stage{
  display:flex; width:100%; height:100vh; position:relative;
}
.split-half{
  position:relative; flex:1; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; color:#fff;
  transition:flex-grow .6s var(--ease);
  cursor:pointer;
}
.split-bg-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center center;
  filter:grayscale(.3) brightness(.5);
  transition:filter .6s var(--ease), transform .8s var(--ease);
  transform:scale(1.0);
}
.split-half--artisti{ background-color:#1a0508; }
.split-half--fornitori{ background-color:#060c1a; }
.split-scrim{ position:absolute; inset:0; transition:opacity .6s var(--ease); }
.split-scrim--artisti{ background:linear-gradient(200deg, rgba(228,54,44,.5), rgba(11,14,22,.88) 65%); }
.split-scrim--fornitori{ background:linear-gradient(160deg, rgba(30,90,160,.5), rgba(11,14,22,.88) 65%); }

.split-glow{
  position:absolute; width:60vw; height:60vw; border-radius:50%;
  filter:blur(90px); opacity:.35; transition:opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events:none;
}
.split-glow--artisti{ background:var(--red-glow); right:-20%; top:10%; }
.split-glow--fornitori{ background:var(--blue-glow); left:-20%; top:10%; }

.split-content{
  position:relative; z-index:2; max-width:420px; padding:2rem;
  text-align:center; transition:transform .6s var(--ease);
}
.split-eyebrow{
  display:inline-block; font-weight:300; font-style:italic;
  font-size:1.1rem; margin-bottom:.6rem; opacity:.85;
}
.split-half--artisti .split-eyebrow{ color:#FFB4AC; }
.split-half--fornitori .split-eyebrow{ color:#9EC3F2; }

.split-heading{
  font-weight:900; line-height:1.12;
  font-size:clamp(1.6rem, 3.4vw, 2.6rem); margin:0 0 .9rem;
  letter-spacing:-.01em;
}
.split-sub{
  font-size:.98rem; line-height:1.5; color:rgba(255,255,255,.78); margin:0 0 1.7rem;
}

.split-cta{
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:700; font-size:.95rem;
  padding:.85em 1.6em; color:#fff;
  transition:background .35s var(--ease), box-shadow .35s var(--ease),
             transform .35s var(--ease), border-radius .35s var(--ease);
}
/* shape language: artisti = soft pill + diffused glow; fornitori = sharp + hard shadow */
.split-half--artisti .split-cta{
  background:var(--red); border-radius:999px;
  box-shadow:0 14px 34px -10px var(--red-glow);
}
.split-half--fornitori .split-cta{
  background:var(--blue); border-radius:4px;
  box-shadow:5px 5px 0 0 rgba(255,255,255,.18);
}
.split-half:hover .split-cta{ transform:translateY(-2px); }
.split-half--artisti:hover .split-cta{ background:var(--red-dark); }
.split-half--fornitori:hover .split-cta{ background:var(--blue-dark); }

/* ============ HOVER STATE (desktop) ============ */
.split-stage.hover-artisti .split-half--artisti{ flex-grow:1.32; }
.split-stage.hover-artisti .split-half--fornitori{ flex-grow:.68; }
.split-stage.hover-fornitori .split-half--fornitori{ flex-grow:1.32; }
.split-stage.hover-fornitori .split-half--artisti{ flex-grow:.68; }

.split-stage.hover-artisti .split-half--artisti .split-bg-img{ filter:grayscale(0) brightness(.58); transform:scale(1.12); }
.split-stage.hover-artisti .split-half--artisti .split-glow{ opacity:.55; }
.split-stage.hover-fornitori .split-half--fornitori .split-bg-img{ filter:grayscale(0) brightness(.58); transform:scale(1.12); }
.split-stage.hover-fornitori .split-half--fornitori .split-glow{ opacity:.55; }

.split-stage.hover-artisti .split-half--fornitori .split-content,
.split-stage.hover-fornitori .split-half--artisti .split-content{ opacity:.55; transform:scale(.94); }

/* ============ CENTER CONNECTOR (flex item — follows boundary by construction) ============ */
.split-center{
  flex:0 0 0px; overflow:visible;
  display:flex; align-items:center; justify-content:center;
  z-index:10; pointer-events:none;
  position:relative;
}
.split-center-inner{
  position:absolute; 
  display:flex; flex-direction:column; align-items:center;
}
.split-center-mascot{
  width:clamp(100px,11vw,160px);
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.5));
}
.split-center-mascot img{ width:100%; display:block; }

.split-center-tagline{
  display:flex; flex-direction:column; align-items:center; gap:0;
  margin-top:.5rem; text-align:center;
}
.split-center-tagline span{
  display:block; font-weight:700; text-transform:uppercase;
  font-size:.65rem; letter-spacing:.2em; line-height:1.6;
  color:rgba(255,255,255,.6);
}
.split-center-logo-mobile{ display:none; }

/* ============ MODE CHOOSER MODAL ============ */
.mode-modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:1.5rem;
  opacity:0; visibility:hidden;
  transition:opacity .25s var(--ease), visibility 0s linear .25s;
}
.mode-modal.is-open{
  opacity:1; visibility:visible;
  transition:opacity .25s var(--ease), visibility 0s linear 0s;
}
.mode-modal-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(3px);
}
.mode-modal-card{
  position:relative; z-index:1;
  background:#1B1E2A; border:1px solid rgba(255,255,255,.12); border-radius:18px;
  padding:2.5rem 2.5rem 2rem; max-width:380px; width:100%; text-align:center;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.6);
  transform:translateY(12px) scale(.97); opacity:0;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.mode-modal.is-open .mode-modal-card{ transform:none; opacity:1; }
.mode-modal-card h3{ font-size:1.3rem; font-weight:900; margin:0 0 .4rem; color:#fff; }
.mode-modal-sub{ font-size:.88rem; color:rgba(255,255,255,.55); margin:0 0 1.8rem; }
.mode-modal-buttons{ display:flex; gap:1rem; justify-content:center; }
.mode-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding:1.3rem 1rem; border-radius:14px; border:1.5px solid rgba(255,255,255,.12);
  background:transparent; color:#fff; cursor:pointer; font-family:inherit;
  transition:border-color .25s, background .25s, transform .25s;
}
.mode-btn:hover{ transform:translateY(-2px); }
.mode-btn--dark:hover{ border-color:var(--blue); background:rgba(30,90,160,.15); }
.mode-btn--light:hover{ border-color:var(--red); background:rgba(228,54,44,.1); }
.mode-btn-icon{ font-size:1.8rem; }
.mode-btn-label{ font-size:.82rem; font-weight:700; letter-spacing:.04em; }

/* center divider line */
.split-center::before{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:1px;
  transform:translateX(-50%);
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.25) 20%, rgba(255,255,255,.25) 80%, transparent);
}

/* ============ BOTTOM HINT ============ */
.landing-hint{
  position:fixed; bottom:1.4rem; left:0; right:0; z-index:50;
  text-align:center; font-size:.8rem; color:rgba(255,255,255,.55);
  font-weight:300; font-style:italic;
  pointer-events:none;
}

/* ============ MOBILE ============ */
@media (max-width:820px){
  html,body{ overflow-y:auto; height:auto; }
  .split-stage{ flex-direction:column; height:auto; min-height:100vh; }
  .split-half{ min-height:48vh; flex-grow:1 !important; }
  .split-content{ padding:2.4rem 1.6rem; max-width:420px; }
  .split-heading{ font-size:1.7rem; }
  .split-center{
    flex:0 0 auto; width:100%; position:relative;
    flex-direction:row; justify-content:center; align-items:center; gap:1rem;
    padding:1.1rem 1rem; background:var(--ink); z-index:20; overflow:hidden;
  }
  .split-center-inner{ position:static; flex-direction:row; gap:.6rem; align-items:center; }
  .split-center::before{ display:none; }
  .split-center-mascot{ width:60px; }
  .split-center-tagline{ flex-direction:row; gap:.4em; margin-top:0; }
  .split-center-tagline span{ font-size:.75rem; }
  .split-center-logo-mobile{ display:block; height:36px; width:auto; }
  .landing-hint{ display:none; }
}