@font-face{font-family:Manrope;src:url('fonts/manrope.woff2') format('woff2');font-weight:200 800;font-display:swap}

:root{
  --bg:#050506;
  --fg:#ececef;
  --muted:#7d7d86;
  --line:rgba(255,255,255,.12);
  --glow:rgba(124,92,255,.35);
  color-scheme:dark;
}

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

html,body{margin:0;background:var(--bg)}

body{
  min-height:100vh;
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  color:var(--fg);
  font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* alone viola appena percettibile dietro al logo */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(60vmax 40vmax at 50% 32%,rgba(92,70,190,.10),transparent 70%),
    radial-gradient(80vmax 60vmax at 50% 120%,rgba(40,40,60,.35),transparent 70%);
  pointer-events:none;
}

#mesh{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}

a{color:inherit}

/* ---------- centro ---------- */

.stage{
  position:relative;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:clamp(44px,8vh,80px);
  padding:96px 16px 48px;
}

.brand{margin:0;display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2.6vh,26px)}
.brand img{display:block;height:auto;user-select:none;-webkit-user-drag:none}
.brand-mark{width:clamp(64px,8vw,92px);filter:drop-shadow(0 0 28px rgba(150,130,255,.18))}
.brand-word{width:clamp(168px,17vw,214px);opacity:.92}

.cards{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;perspective:900px}

.card{
  --rx:0deg;--ry:0deg;--mx:50%;--my:50%;
  position:relative;
  display:block;
  width:clamp(260px,24vw,320px);
  aspect-ratio:4/3;
  border-radius:14px;
  overflow:hidden;
  isolation:isolate;
  border:1px solid var(--line);
  background:#0c0c10;
  text-decoration:none;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .5s;
  box-shadow:0 20px 60px -30px rgba(0,0,0,.9);
}
.card.is-tilting{transition:transform .08s linear,border-color .4s,box-shadow .5s}
.card-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.02);transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .6s;filter:saturate(.9) brightness(.82)}
.card-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,5,6,.15) 0%,rgba(5,5,6,.05) 40%,rgba(5,5,6,.88) 100%)}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(240px circle at var(--mx) var(--my),rgba(255,255,255,.16),transparent 60%);
  opacity:0;
  transition:opacity .4s;
  pointer-events:none;
}
.card-logo{position:absolute;left:50%;top:40%;width:58%;height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 6px 18px rgba(0,0,0,.6));transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card-meta{
  position:absolute;
  left:16px;right:14px;bottom:13px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
.card-meta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s cubic-bezier(.2,.7,.2,1)}

.card:hover,.card:focus-visible{border-color:rgba(255,255,255,.34);box-shadow:0 30px 90px -30px var(--glow)}
.card:hover .card-bg,.card:focus-visible .card-bg{transform:scale(1.08);filter:saturate(1.05) brightness(.9)}
.card:hover .card-logo{transform:translate(-50%,-53%)}
.card:hover::after{opacity:1}
.card:hover .card-meta svg,.card:focus-visible .card-meta svg{transform:translate(2px,-2px)}
.card:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:4px}

/* ---------- footer ---------- */

.foot{
  position:relative;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:10px 34px;
  padding:20px 16px 30px;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);
}
.foot a{position:relative;text-decoration:none;padding:6px 0;transition:color .3s}
.foot a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.foot a:hover,.foot a:focus-visible{color:var(--fg)}
.foot a:hover::after,.foot a:focus-visible::after{transform:scaleX(1)}
.foot a:focus-visible{outline:none}
.foot-copy{color:#4d4d55}

/* ---------- chi siamo ---------- */

.about{
  width:min(440px,calc(100vw - 32px));
  padding:0;
  overflow:visible;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(14,14,18,.92);
  color:var(--fg);
  box-shadow:0 40px 120px -40px var(--glow);
}
.about-body{position:relative;padding:44px 36px 36px}
.about[open] .about-body{animation:about-in .45s cubic-bezier(.2,.7,.2,1)}
.about::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
html:not(.js) .about:target{display:block;position:fixed;inset:0;margin:auto;height:fit-content;z-index:10}
.about h2{margin:14px 0 14px;font-size:22px;font-weight:600;letter-spacing:.02em}
.about p{margin:0 0 14px;color:#b6b6bf;font-size:15px;line-height:1.65}
.about .about-contact{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.about-contact a{margin-left:10px;color:var(--fg);text-transform:none;letter-spacing:.02em;font-size:14px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.about-contact a:hover{border-color:var(--fg)}
.about-sigil{width:22px;height:20px;fill:none;stroke:rgba(255,255,255,.55);stroke-width:2;stroke-linejoin:round}
.about-close{position:absolute;top:10px;right:10px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--muted);transition:color .3s,background .3s}
.about-close:hover,.about-close:focus-visible{color:var(--fg);background:rgba(255,255,255,.06)}
.about-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
@keyframes about-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- cursore triangolare (solo mouse, attivato da JS) ---------- */

.cursor{display:none}
.has-cursor,.has-cursor *{cursor:none!important}
.has-cursor .cursor{display:block;position:fixed;inset:0;z-index:100;pointer-events:none;mix-blend-mode:difference}
.cursor svg{position:absolute;left:0;top:0;opacity:0;transition:opacity .3s}
.cursor.is-visible svg{opacity:1}
.cursor-dot{width:16px;height:16px;fill:#fff}
.cursor-ring{width:40px;height:36px;margin:-20px 0 0 -20px;fill:none;stroke:rgba(255,255,255,.7);stroke-width:1.4;stroke-linejoin:round}

/* ---------- entrata ---------- */

.brand-mark,.brand-word,.card,.foot{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
.brand-word{animation-delay:.15s}
.card{animation-delay:.35s}
.foot{animation-delay:.6s}
@keyframes rise{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.card{animation-name:rise-card}
@keyframes rise-card{from{opacity:0;translate:0 14px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:none}}

/* ---------- lingue asiatiche: font di sistema e niente spaziatura larga ---------- */

:lang(ja) body{font-family:Manrope,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP","Noto Sans CJK JP",sans-serif}
:lang(ko) body{font-family:Manrope,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Noto Sans CJK KR",sans-serif}
:lang(zh-CN) body{font-family:Manrope,"PingFang SC","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",sans-serif}
:lang(ja) .card-meta,:lang(ko) .card-meta,:lang(zh-CN) .card-meta,
:lang(ja) .foot,:lang(ko) .foot,:lang(zh-CN) .foot{letter-spacing:.08em}
:lang(ja) .about p,:lang(ko) .about p,:lang(zh-CN) .about p{line-height:1.85}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

@media (max-width:520px){
  .stage{padding-top:72px}
  .foot{gap:8px 26px}
}